refactor: move methods

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.

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()