Browse Source

fix(lib): refine Chart.js tooltip type definitions in line and treemap charts

pull/6264/head
KenTandrian 3 days ago
parent
commit
3843f22d95
  1. 9
      libs/ui/src/lib/line-chart/line-chart.component.ts
  2. 13
      libs/ui/src/lib/treemap-chart/treemap-chart.component.ts

9
libs/ui/src/lib/line-chart/line-chart.component.ts

@ -26,7 +26,6 @@ import {
} from '@angular/core'; } from '@angular/core';
import { import {
Chart, Chart,
ChartTypeRegistry,
Filler, Filler,
LinearScale, LinearScale,
LineController, LineController,
@ -34,8 +33,8 @@ import {
PointElement, PointElement,
TimeScale, TimeScale,
Tooltip, Tooltip,
TooltipOptions, type TooltipOptions,
TooltipPosition type TooltipPosition
} from 'chart.js'; } from 'chart.js';
import 'chartjs-adapter-date-fns'; import 'chartjs-adapter-date-fns';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@ -320,9 +319,7 @@ export class GfLineChartComponent
}; };
} }
private getTooltipPluginConfiguration< private getTooltipPluginConfiguration(): Partial<TooltipOptions<'line'>> {
T extends keyof ChartTypeRegistry
>(): Partial<TooltipOptions<T>> {
return { return {
...getTooltipOptions({ ...getTooltipOptions({
colorScheme: this.colorScheme, colorScheme: this.colorScheme,

13
libs/ui/src/lib/treemap-chart/treemap-chart.component.ts

@ -25,7 +25,7 @@ import {
} from '@angular/core'; } from '@angular/core';
import { DataSource } from '@prisma/client'; import { DataSource } from '@prisma/client';
import { Big } from 'big.js'; import { Big } from 'big.js';
import { ChartConfiguration } from 'chart.js'; import type { ChartConfiguration, TooltipOptions } from 'chart.js';
import { LinearScale } from 'chart.js'; import { LinearScale } from 'chart.js';
import { Chart, Tooltip } from 'chart.js'; import { Chart, Tooltip } from 'chart.js';
import { TreemapController, TreemapElement } from 'chartjs-chart-treemap'; import { TreemapController, TreemapElement } from 'chartjs-chart-treemap';
@ -294,8 +294,13 @@ export class GfTreemapChartComponent
if (this.chartCanvas) { if (this.chartCanvas) {
if (this.chart) { if (this.chart) {
this.chart.data = data; this.chart.data = data;
if (!this.chart.options.plugins) {
this.chart.options.plugins = {};
}
this.chart.options.plugins.tooltip = this.chart.options.plugins.tooltip =
this.getTooltipPluginConfiguration() as unknown; this.getTooltipPluginConfiguration();
this.chart.update(); this.chart.update();
} else { } else {
this.chart = new Chart(this.chartCanvas.nativeElement, { this.chart = new Chart(this.chartCanvas.nativeElement, {
@ -329,7 +334,7 @@ export class GfTreemapChartComponent
plugins: { plugins: {
tooltip: this.getTooltipPluginConfiguration() tooltip: this.getTooltipPluginConfiguration()
} }
} as unknown, },
type: 'treemap' type: 'treemap'
}); });
} }
@ -338,7 +343,7 @@ export class GfTreemapChartComponent
this.isLoading = false; this.isLoading = false;
} }
private getTooltipPluginConfiguration() { private getTooltipPluginConfiguration(): Partial<TooltipOptions<'treemap'>> {
return { return {
...getTooltipOptions({ ...getTooltipOptions({
colorScheme: this.colorScheme, colorScheme: this.colorScheme,

Loading…
Cancel
Save