Skip to content
Snippets Groups Projects
Select Git revision
  • 9a4b6a854cb30e68fb29ed24c2c8c11cf6ac3041
  • main default protected
2 results

radarChart.ts

Blame
  • user avatar
    Leander authored
    9a4b6a85
    History
    user avatar 9a4b6a85
    radarChart.ts 2.85 KiB
    import * as d3 from "d3";
    import {curveCardinalClosed, HierarchyNode, ScaleOrdinal, ScaleRadial, ScaleSequential} from "d3";
    import Chart, {ChartConfig, ChartConfigParam} from "@/charts/chart.ts";
    
    export type RadarChartConfig = ChartConfig & {
        renderTooltip?: (dataPoint: any, tooltip: d3.Selection<d3.BaseType, unknown, HTMLElement, any>) => void,
        axisCircles: number,
        attributes: string[],
    }
    
    export type RadarChartConfigParam = ChartConfigParam & Partial<RadarChartConfig>
    
    export default class RadarChart extends Chart {
        chartId: string = 'radarChart';
        chart: any
        config: RadarChartConfig
        colorScale: ScaleSequential<any> | ScaleOrdinal<any, any> | null = null
        radialScale: ScaleRadial<any, any> = null
        angleSlice = 0.7853981633974483
    
        constructor(data: any[], _config: RadarChartConfigParam) {
            super(data, _config as ChartConfigParam)
    
            this.config = this.createConfig(_config)
    
            this.initVis()
        }
    
        private setConfig(_config: RadarChartConfigParam) {
            this.config = this.createConfig(_config)
        }
    
        private createConfig(_config: RadarChartConfigParam) {
            return {
                ..._config,
                parentElement: typeof _config.parentElement === 'string' ? document.querySelector(_config.parentElement) as HTMLElement : _config.parentElement,
                containerWidth: _config.containerWidth || 500,
                containerHeight: _config.containerHeight || 140,
                margin: _config.margin || {top: 10, bottom: 30, right: 10, left: 30},
                tooltipPadding: _config.tooltipPadding || 15,
                axisCircles: _config.axisCircles || 2,
                attributes: ['Per 90 Minutes _ G+A', 'Per 90 Minutes _ xG+xAG', 'PrgP', 'Total _ Cmp%', 'Tkl+Int', 'Touches _ Touches'],
            }
        }
    
        initVis() {
            let vis = this;
            vis.config.parentElement.innerHTML += `
                <svg id="${this.chartId}"></svg>
            `;
            vis.config.parentElement.innerHTML += `
                <div id="tooltip"></div>
            `;
    
            const svg = d3.select(`#${this.chartId}`)
                .attr('width', vis.config.containerWidth)
                .attr('height', vis.config.containerHeight)
                .attr('transform', `translate(${vis.config.margin.left},${vis.config.margin.top})`)
    
            vis.chart = svg.append('g')
    
            const domain = d3.range(0, 2 * Math.PI, vis.angleSlice)
    
            this.radialScale = d3.scaleLinear()
                    .domain(domain)
                    .range([0, 360])
    
            vis.updateColorScale()
        }
    
        updateVis(data: any[]): void {
            this.data = data;
            this.update()
        }
    
        private update() {
            let vis: RadarChart = this;
        }
    
        renderVis(): void {
            let vis: RadarChart = this;
    
            const node = vis.chart
                .selectAll("g")
                .data(vis.data)
                .join("g")
    
        }
    
        updateColorScale() {
    
        }
    }