Select Git revision
radarChart.ts
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() {
}
}