diff --git a/frontend/src/ts/ervu_business_metrics/component/chart/ErvuChartTooltip.ts b/frontend/src/ts/ervu_business_metrics/component/chart/ErvuChartTooltip.ts index 8c29cd4..fa70ac2 100644 --- a/frontend/src/ts/ervu_business_metrics/component/chart/ErvuChartTooltip.ts +++ b/frontend/src/ts/ervu_business_metrics/component/chart/ErvuChartTooltip.ts @@ -39,11 +39,9 @@ export class ErvuChartTooltip implements OnChanges { public refreshContent() { const tooltipModel: TooltipModel = this.tooltipModel; - const titleLines: string[] = tooltipModel.title || []; const bodyLines: any = tooltipModel.body.map((bodyItem) => bodyItem.lines); this.items = bodyLines.map((body, i) => ({ - title: titleLines[i] || '', body: body, color: this.tooltipModel.labelColors[i].backgroundColor })); diff --git a/frontend/src/ts/ervu_business_metrics/component/chart/ErvuChartV2.ts b/frontend/src/ts/ervu_business_metrics/component/chart/ErvuChartV2.ts index fa07bfa..320aacc 100644 --- a/frontend/src/ts/ervu_business_metrics/component/chart/ErvuChartV2.ts +++ b/frontend/src/ts/ervu_business_metrics/component/chart/ErvuChartV2.ts @@ -224,7 +224,25 @@ export class ErvuChartV2 extends Control implements Filterable { chartOptions.plugins = chartOptions.plugins ? chartOptions.plugins : {}; chartOptions.plugins.legend = this.legend ? this.legend : {}; - chartOptions.plugins.tooltip = this.getTooltipConfiguration(); + chartOptions.plugins.tooltip = { + enabled: false, //Disables default tooltip from charjs (we'll use a custom tooltip) + external: (context) => { + if (this.showTooltip) { + if (!context || !this.chartTooltip) { + return; + } + const positionX = this.chart.canvas.offsetLeft; + const positionY = this.chart.canvas.offsetTop; + + this.tooltipModel = context.tooltip; + this.tooltipPosition = { + 'left': positionX + context.tooltip.caretX, + 'top': positionY + context.tooltip.caretY + } + this.cd.markForCheck(); + } + } + }; if (this.title && this.title.text) { chartOptions.plugins.title = this.title; @@ -313,6 +331,16 @@ export class ErvuChartV2 extends Control implements Filterable { } } + chartConfig.options.plugins.tooltip.callbacks = { + label: function (tooltipItem) { + console.log(tooltipItem); + const dataset = tooltipItem.dataset; + if (dataset.type == 'bar' || dataset.type == 'line') { + return dataset.label + ' : ' + dataset.data[tooltipItem.dataIndex].x.toLocaleString(); + } + return tooltipItem.label + ' : ' + dataset.data[tooltipItem.dataIndex].toLocaleString(); + } + }; this.chartConfig = chartConfig; } @@ -392,12 +420,6 @@ export class ErvuChartV2 extends Control implements Filterable { }) } }); - - options.plugins.tooltip.callbacks = { - title: function (tooltipItems) { - return tooltipItems.length > 0 ? tooltipItems[0].dataset.stack : undefined; - } - } } } @@ -413,29 +435,6 @@ export class ErvuChartV2 extends Control implements Filterable { this.chart = new ChartJs(canvasEl, jQuery.extend(true, chartConfig, chartData)); } - //General config tooltip. - private getTooltipConfiguration() { - return { - enabled: false, - external: (context) => { - if (this.showTooltip) { - if (!context || !this.chartTooltip) { - return; - } - const positionX = this.chart.canvas.offsetLeft; - const positionY = this.chart.canvas.offsetTop; - - this.tooltipModel = context.tooltip; - this.tooltipPosition = { - 'left': positionX + context.tooltip.caretX, - 'top': positionY + context.tooltip.caretY - } - this.cd.markForCheck(); - } - } - }; - } - clear() { //todo SUPPORT-4909 throw new UnsupportedOperationError("Unsupported operation"); }