From 66887c16837fbb9bea1c85989854eae260e10da5 Mon Sep 17 00:00:00 2001 From: Adam Kariv Date: Tue, 16 Jan 2024 09:23:48 +0200 Subject: [PATCH] Add hover to hbars --- .../dataset-chart/dataset-chart.component.ts | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/app/dataset-chart/dataset-chart.component.ts b/src/app/dataset-chart/dataset-chart.component.ts index f2c3f12..a3540d0 100644 --- a/src/app/dataset-chart/dataset-chart.component.ts +++ b/src/app/dataset-chart/dataset-chart.component.ts @@ -193,13 +193,26 @@ export class DatasetChartComponent implements OnInit, OnChanges { .style('fill', colorScale); const group = chart.selectAll('g.bar-group').selectAll('rect') - .data((d: any) => d.dataset) + .data((d: any) => d.dataset.map((x) => Object.assign(x, {__series: d}))) .enter(); group.append('rect') .attr('x', leftPadding) .attr('y', (d: any) => y(d.x)) .attr('width', (d: any) => x(d.y)) - .attr('height', y.bandwidth()); + .attr('height', y.bandwidth()) + .on("mouseover", (d: any) => { + const series = d.__series; + this.tooltipSeries = series; + this.tooltipValueX = d.x; + this.tooltipValueY = this.yFormatter(series)(d.y); + this.tooltipLocation = { + x: d3.event.layerX, + y: d3.event.layerY + }; + }) + .on("mouseout", (d) => { + this.tooltipSeries = null; + }); group.append('text') .attr('class', 'label') .attr('x', leftPadding)