diff --git a/src/charts/bubbleChart.ts b/src/charts/bubbleChart.ts index 5c31a4049f0166dcf144f2c9b470c73ffc9d247b..6f6509e96b76e09e67bf5e72d53cc4024d332f66 100644 --- a/src/charts/bubbleChart.ts +++ b/src/charts/bubbleChart.ts @@ -3,13 +3,13 @@ import {HierarchyNode, NumberValue, ScaleOrdinal, ScaleSequential} from "d3"; import {ChartConfig, ChartConfigParam} from "@/charts/chart.ts"; import SearchableChart from "@/charts/SearchableChart.ts"; - export type BubbleChartConfig = ChartConfig & { groupAccessor: (d: any) => string, sizeAccessor: (d: any) => number, colorAccessor: (d: any) => string | number | null, zoomExtent: [number, number], - onZoom?: (event: any) => void + onZoom?: (event: any) => void, + renderTooltip?: (dataPoint: any, tooltip: d3.Selection<d3.BaseType, unknown, HTMLElement, any>) => void, } export type BubbleChartConfigParam = ChartConfigParam & Partial<BubbleChartConfig> @@ -26,24 +26,17 @@ export default class BubbleChart extends SearchableChart { constructor(data: any[], _config: BubbleChartConfigParam) { super(data, _config as ChartConfigParam) - this.config = { - ..._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, - groupAccessor: _config.groupAccessor || (() => 'default'), - sizeAccessor: _config.sizeAccessor || (() => 5), - colorAccessor: _config.colorAccessor || (() => null), - zoomExtent: _config.zoomExtent || [0.5, 20], - } + this.config = this.createConfig(_config) this.initVis() } - set _config(_config: BubbleChartConfigParam) { - this.config = { + private setConfig(_config: BubbleChartConfigParam) { + this.config = this.createConfig(_config) + } + + private createConfig(_config: BubbleChartConfigParam) { + return { ..._config, parentElement: typeof _config.parentElement === 'string' ? document.querySelector(_config.parentElement) as HTMLElement : _config.parentElement, containerWidth: _config.containerWidth || 500, @@ -91,7 +84,7 @@ export default class BubbleChart extends SearchableChart { } updateVisConfig(_config: BubbleChartConfigParam): void { - this._config = {...this.config, ..._config}; + this.setConfig({...this.config, ..._config}) this.update() } @@ -138,7 +131,10 @@ export default class BubbleChart extends SearchableChart { .attr('r', (d: any) => d.r) .attr('data-player', (d: any) => d.data.player) .on('mouseover', (_: Event, d: any) => { - vis.renderTooltip(d.data) + const element = d3.select('#tooltip') + .style('display', 'block') + if (!vis.config.renderTooltip) return + vis.config.renderTooltip(d.data, element) }) .on('mousemove', (event: any) => { d3.select('#tooltip') @@ -150,20 +146,6 @@ export default class BubbleChart extends SearchableChart { }) } - private renderTooltip(dataPoint: { player: string; league: string; pos: string; nation: string; team: string; }) { - d3.select('#tooltip') - .style('display', 'block') - .html(` - <table> - <tr><th>Name</th><td>${dataPoint['player']}</td></tr> - <tr><th>Liga</th><td>${dataPoint['league']}</td></tr> - <tr><th>Position</th><td>${dataPoint['pos']}</td></tr> - <tr><th>Nationalität</th><td>${dataPoint['nation']}</td></tr> - <tr><th>Team</th><td>${dataPoint['team']}</td></tr> - </table> - `) - } - /** * Updates the d3 hierachy pack root with the current data. * Uses the groupAccessor and sizeAccessor to group the data. diff --git a/src/main.ts b/src/main.ts index 4495694d9010df4c02c696c834e19dc03cf25f7e..131f983fc8a97685f2ced2d70b7b836f80ae3cf4 100644 --- a/src/main.ts +++ b/src/main.ts @@ -53,6 +53,17 @@ dsv(';', 'data/output.csv').then(data => { if (sliderBlocked) return zoomSlider.value = event.transform.k.toString() }, + renderTooltip: (dataPoint: any, tooltip: d3.Selection<d3.BaseType, unknown, HTMLElement, any>) => { + tooltip.html(` + <table> + <tr><th>Name</th><td>${dataPoint['player']}</td></tr> + <tr><th>Liga</th><td>${dataPoint['league']}</td></tr> + <tr><th>Position</th><td>${dataPoint['pos']}</td></tr> + <tr><th>Nationalität</th><td>${dataPoint['nation']}</td></tr> + <tr><th>Team</th><td>${dataPoint['team']}</td></tr> + </table> + `) + } }) bubbleChart.renderVis()