fix bugs

src/demo/index.ts

@@ -1,6 +1,6 @@
-import Chart from 'chart.js/auto';
+import Chart from "chart.js/auto";
 
-import ChartPluginStacked100 from '../plugin';
+import ChartPluginStacked100 from "../plugin";
 Chart.register(ChartPluginStacked100);
 
 const getCanvas = (id: string): HTMLCanvasElement => document.getElementById(id) as HTMLCanvasElement

src/plugin/index.ts

@@ -1,10 +1,10 @@
-import { beforeInit, beforeDatasetsUpdate, afterDatasetsUpdate } from "./plugin"
+import { beforeInit, beforeUpdate, afterUpdate } from "./plugin"
 
 const ChartPluginStacked100 = {
   id: "stacked100",
   beforeInit,
-  beforeDatasetsUpdate,
-  afterDatasetsUpdate
+  beforeUpdate,
+  afterUpdate
 };
 
 export default ChartPluginStacked100;

src/plugin/plugin.ts

@@ -1,9 +1,8 @@
 import { Chart, ChartType, TooltipCallbacks, TooltipItem } from "chart.js"
 
-import { dataValue, setOriginalData, round } from "./utils"
-import { ExtendedChartData, PluginOptions, ExtendedPlugin } from "./types"
+import { dataValue, setOriginalData, round, getPrecision } from "./utils"
+import { ExtendedChartData, ExtendedPlugin } from "./types"
 
-// set calculated rate (xx%) to data.calculatedData
 const calculateRate = function(data: ExtendedChartData, isHorizontal: boolean, precision: number) {
   const visibles = data.datasets.map((dataset) => dataset.hidden ? 0 : 1 );
   const datasetDataLength = data?.datasets?.[0]?.data?.length || 0;
@@ -18,7 +17,7 @@ const calculateRate = function(data: ExtendedChartData, isHorizontal: boolean, p
     }, {});
   });
 
-  data.calculatedData = data.datasets.map((dataset)  => {
+  return data.datasets.map((dataset)  => {
     return dataset.data.map((val, j)  => {
       const total = totals[j][dataset.stack];
       const dv = dataValue(val, isHorizontal);
@@ -27,17 +26,6 @@ const calculateRate = function(data: ExtendedChartData, isHorizontal: boolean, p
   });
 };
 
-const getPrecision = (pluginOptions: PluginOptions): number => {
-  // return the (validated) configured precision from pluginOptions or default 1
-  const defaultPrecision = 1;
-  if (!("precision" in pluginOptions)) return defaultPrecision;
-  if (!pluginOptions.precision) return defaultPrecision;
-  const optionsPrecision = Math.floor(pluginOptions.precision);
-  if (isNaN(optionsPrecision)) return defaultPrecision;
-  if (optionsPrecision < 0 || optionsPrecision > 16) return defaultPrecision; 
-  return optionsPrecision;
-};
-
 const tooltipLabel = (isHorizontal: boolean): TooltipCallbacks<ChartType>["label"] => {
   return (tooltipItem: TooltipItem<ChartType>)  => {
     const data = tooltipItem.chart.data as ExtendedChartData
@@ -66,6 +54,7 @@ const isHorizontalChart = (chartInstance: Chart) => {
 
 export const beforeInit: ExtendedPlugin["beforeInit"] = (chartInstance, args, pluginOptions) => {
   if (!pluginOptions.enable) return;
+  const { replaceTooltipLabel = true } = pluginOptions
 
   const isHorizontal = isHorizontalChart(chartInstance);
   const targetAxis = isHorizontal ? "x" : "y"
@@ -79,23 +68,23 @@ export const beforeInit: ExtendedPlugin["beforeInit"] = (chartInstance, args, pl
   })
 
   // Replace tooltips
-  if ("replaceTooltipLabel" in pluginOptions && !pluginOptions.replaceTooltipLabel) return;
+  if (!replaceTooltipLabel) return;
 
   chartInstance.options.plugins.tooltip.callbacks.label = tooltipLabel(isHorizontal);
 }
 
-export const beforeDatasetsUpdate: ExtendedPlugin["beforeDatasetsUpdate"] = (chartInstance, args, pluginOptions) =>{
+export const beforeUpdate: ExtendedPlugin["beforeUpdate"] = (chartInstance, _args, pluginOptions) =>{
   if (!pluginOptions.enable) return;
 
   const data = chartInstance.data as ExtendedChartData
 
   setOriginalData(data);
   const precision = getPrecision(pluginOptions);
-  calculateRate(data, isHorizontalChart(chartInstance), precision);
+  data.calculatedData = calculateRate(data, isHorizontalChart(chartInstance), precision);
   reflectData(data.calculatedData, data.datasets);
 }
 
-export const afterDatasetsUpdate: ExtendedPlugin["afterDatasetsUpdate"]  = (chartInstance, args, pluginOptions) => {
+export const afterUpdate: ExtendedPlugin["afterUpdate"]  = (chartInstance, _args, pluginOptions) => {
   if (!pluginOptions.enable) return;
 
   const data = chartInstance.data as ExtendedChartData

src/plugin/types.ts

@@ -1,8 +1,10 @@
-import { Plugin, ChartType, ChartData } from "chart.js"
+import { Plugin, ChartType, ChartData, ScatterDataPoint } from "chart.js"
+
+type PluginDataPoint = number | ScatterDataPoint
 
 export type ExtendedChartData = ChartData & {
   calculatedData?: number[][];
-  originalData?: ChartData["datasets"]
+  originalData?: PluginDataPoint[][];
 }
 
 export type ExtendedPlugin = Plugin<ChartType, PluginOptions>

src/plugin/utils.ts

@@ -1,9 +1,11 @@
+import { ExtendedChartData, PluginOptions } from "./types"
+
 export const isObject = (obj: any) => {
   const type = typeof obj;
   return type === 'object' && !!obj;
 }
 
-export const dataValue = (dataPoint, isHorizontal: boolean) => {
+export const dataValue = (dataPoint: any, isHorizontal: boolean) => {
   if (isObject(dataPoint)) {
     return isHorizontal ? dataPoint.x : dataPoint.y;
   }
@@ -11,11 +13,11 @@ export const dataValue = (dataPoint, isHorizontal: boolean) => {
   return dataPoint;
 }
 
-export const cloneArray = (srcAry: any[]) => {
+const cloneArray = <T>(srcAry: T[]): T[] => {
   return [...srcAry];
 };
 
-export const setOriginalData = (data) => {
+export const setOriginalData = (data: ExtendedChartData) => {
   data.originalData = data.datasets.map((dataset) => {
     return cloneArray(dataset.data);
   });
@@ -26,3 +28,14 @@ export const round = (value: number, precision: number): number => {
   return Math.round(value * 100 * multiplicator) / multiplicator;
 };
 
+export const getPrecision = (pluginOptions: PluginOptions): number => {
+  // return the (validated) configured precision from pluginOptions or default 1
+  const defaultPrecision = 1;
+  if (!("precision" in pluginOptions)) return defaultPrecision;
+  if (!pluginOptions.precision) return defaultPrecision;
+  const optionsPrecision = Math.floor(pluginOptions.precision);
+  if (isNaN(optionsPrecision)) return defaultPrecision;
+  if (optionsPrecision < 0 || optionsPrecision > 16) return defaultPrecision; 
+  return optionsPrecision;
+};
+