react-chartjs-2 - npm Package Compare versions

Comparing version 3.1.1 to 3.2.0

dist/chart.d.ts

 import React from 'react';
-import { Props, ChartJSOrUndefined } from './types';
-export declare const Chart: <TType extends keyof import("chart.js").ChartTypeRegistry = keyof import("chart.js").ChartTypeRegistry, TData = import("chart.js/types/utils").DistributiveArray<import("chart.js").ChartTypeRegistry[TType]["defaultDataPoint"]>, TLabel = unknown, TOtherType extends TType = TType>(props: Props<TType, TData, TLabel, TOtherType> & {
-    ref?: React.ForwardedRef<ChartJSOrUndefined<TType, TData, TLabel>> | undefined;
+import type { Props } from './types';
+export declare const Chart: <TType extends keyof import("chart.js").ChartTypeRegistry = keyof import("chart.js").ChartTypeRegistry, TData = import("chart.js/types/utils").DistributiveArray<import("chart.js").ChartTypeRegistry[TType]["defaultDataPoint"]>, TLabel = unknown>(props: Props<TType, TData, TLabel> & {
+    ref?: React.ForwardedRef<import("./types").ChartJSOrUndefined<TType, TData, TLabel>> | undefined;
 }) => JSX.Element;

dist/index.js

@@ -8,5 +8,2 @@ 'use strict';
 var React = require('react');
-var merge = require('lodash/merge');
-var assign = require('lodash/assign');
-var find = require('lodash/find');
 
@@ -17,5 +14,2 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
-var assign__default = /*#__PURE__*/_interopDefaultLegacy(assign);
-var find__default = /*#__PURE__*/_interopDefaultLegacy(find);
 
@@ -102,32 +96,51 @@ function _arrayWithHoles(arr) {
 
+function reforwardRef(ref, value) {
+    if (typeof ref === 'function') {
+        ref(value);
+    } else if (ref) {
+        ref.current = value;
+    }
+}
+function setNextDatasets(currentData, nextDatasets) {
+    currentData.datasets = nextDatasets.map(function(nextDataset) {
+        // given the new set, find it's current match
+        var currentDataset = currentData.datasets.find(function(dataset) {
+            return dataset.label === nextDataset.label && dataset.type === nextDataset.type;
+        });
+        // There is no original to update, so simply add new one
+        if (!currentDataset || !nextDataset.data) return nextDataset;
+        Object.assign(currentDataset, nextDataset);
+        return currentDataset;
+    });
+}
+
+var noopData = {
+    datasets: []
+};
 function ChartComponent(_param, ref) {
-    var _height = _param.height, height = _height === void 0 ? 150 : _height, _width = _param.width, width = _width === void 0 ? 300 : _width, _redraw = _param.redraw, redraw = _redraw === void 0 ? false : _redraw, type = _param.type, data = _param.data, options = _param.options, _plugins = _param.plugins, plugins = _plugins === void 0 ? [] : _plugins, getDatasetAtEvent = _param.getDatasetAtEvent, getElementAtEvent = _param.getElementAtEvent, getElementsAtEvent = _param.getElementsAtEvent, fallbackContent = _param.fallbackContent, onClickProp = _param.onClick, props = _objectWithoutProperties(_param, ["height", "width", "redraw", "type", "data", "options", "plugins", "getDatasetAtEvent", "getElementAtEvent", "getElementsAtEvent", "fallbackContent", "onClick"
+    var _height = _param.height, height = _height === void 0 ? 150 : _height, _width = _param.width, width = _width === void 0 ? 300 : _width, _redraw = _param.redraw, redraw = _redraw === void 0 ? false : _redraw, type = _param.type, dataProp = _param.data, options = _param.options, _plugins = _param.plugins, plugins = _plugins === void 0 ? [] : _plugins, getDatasetAtEvent = _param.getDatasetAtEvent, getElementAtEvent = _param.getElementAtEvent, getElementsAtEvent = _param.getElementsAtEvent, fallbackContent = _param.fallbackContent, onClickProp = _param.onClick, props = _objectWithoutProperties(_param, ["height", "width", "redraw", "type", "data", "options", "plugins", "getDatasetAtEvent", "getElementAtEvent", "getElementsAtEvent", "fallbackContent", "onClick"
     ]);
-    var canvas = React.useRef(null);
-    var computedData = React.useMemo(function() {
-        if (typeof data === 'function') {
-            return canvas.current ? data(canvas.current) : {
-                datasets: []
-            };
-        } else return merge__default["default"]({
-        }, data);
-    }, [
-        data,
-        canvas.current
-    ]);
-    var ref1 = _slicedToArray(React.useState()), chart = ref1[0], setChart = ref1[1];
-    React.useImperativeHandle(ref, function() {
-        return chart;
-    }, [
-        chart
-    ]);
+    var canvasRef = React.useRef(null);
+    var chartRef = React.useRef();
+    /**
+   * In case `dataProp` is function use internal state
+   */ var ref1 = _slicedToArray(React.useState()), computedData = ref1[0], setComputedData = ref1[1];
+    var data = computedData || (typeof dataProp === 'function' ? noopData : dataProp);
     var renderChart = function() {
-        if (!canvas.current) return;
-        setChart(new ChartJS__default["default"](canvas.current, {
+        if (!canvasRef.current) return;
+        chartRef.current = new ChartJS__default["default"](canvasRef.current, {
             type: type,
-            data: computedData,
+            data: data,
             options: options,
             plugins: plugins
-        }));
+        });
+        reforwardRef(ref, chartRef.current);
     };
+    var destroyChart = function() {
+        reforwardRef(ref, null);
+        if (chartRef.current) {
+            chartRef.current.destroy();
+            chartRef.current = null;
+        }
+    };
     var onClick = function(event) {
@@ -137,2 +150,3 @@ if (onClickProp) {
         }
+        var chart = chartRef.current;
         if (!chart) return;
@@ -149,49 +163,52 @@ getDatasetAtEvent && getDatasetAtEvent(chart.getElementsAtEventForMode(event.nativeEvent, 'dataset', {
     };
-    var updateChart = function() {
-        if (!chart) return;
-        if (options) {
-            chart.options = _objectSpread({
+    /**
+   * In case `dataProp` is function,
+   * then update internal state
+   */ React.useEffect(function() {
+        if (typeof dataProp === 'function' && canvasRef.current) {
+            setComputedData(dataProp(canvasRef.current));
+        }
+    }, [
+        dataProp
+    ]);
+    React.useEffect(function() {
+        if (!redraw && chartRef.current && options) {
+            chartRef.current.options = _objectSpread({
             }, options);
         }
-        if (!chart.config.data) {
-            chart.config.data = computedData;
-            chart.update();
-            return;
+    }, [
+        redraw,
+        options
+    ]);
+    React.useEffect(function() {
+        if (!redraw && chartRef.current) {
+            chartRef.current.config.data.labels = data.labels;
         }
-        var tmp = computedData.datasets, newDataSets = tmp === void 0 ? [] : tmp, newChartData = _objectWithoutProperties(computedData, [
-            "datasets"
-        ]);
-        var _data = chart.config.data, tmp1 = _data.datasets, currentDataSets = tmp1 === void 0 ? [] : tmp1;
-        // copy values
-        assign__default["default"](chart.config.data, newChartData);
-        chart.config.data.datasets = newDataSets.map(function(newDataSet) {
-            // given the new set, find it's current match
-            var currentDataSet = find__default["default"](currentDataSets, function(d) {
-                return d.label === newDataSet.label && d.type === newDataSet.type;
-            });
-            // There is no original to update, so simply add new one
-            if (!currentDataSet || !newDataSet.data) return _objectSpread({
-            }, newDataSet);
-            if (!currentDataSet.data) {
-                // @ts-expect-error Need to refactor
-                currentDataSet.data = [];
-            } else {
-                // @ts-expect-error Need to refactor
-                currentDataSet.data.length = newDataSet.data.length;
-            }
-            // copy in values
-            assign__default["default"](currentDataSet.data, newDataSet.data);
-            // apply dataset changes, but keep copied data
-            assign__default["default"](currentDataSet, _objectSpread({
-            }, newDataSet, {
-                data: currentDataSet.data
-            }));
-            return currentDataSet;
-        });
-        chart.update();
-    };
-    var destroyChart = function() {
-        if (chart) chart.destroy();
-    };
+    }, [
+        redraw,
+        data.labels
+    ]);
     React.useEffect(function() {
+        if (!redraw && chartRef.current && data.datasets) {
+            setNextDatasets(chartRef.current.config.data, data.datasets);
+        }
+    }, [
+        redraw,
+        data.datasets
+    ]);
+    React.useEffect(function() {
+        if (!chartRef.current) return;
+        if (redraw) {
+            destroyChart();
+            setTimeout(renderChart);
+        } else {
+            chartRef.current.update();
+        }
+    }, [
+        redraw,
+        options,
+        data.labels,
+        data.datasets
+    ]);
+    React.useEffect(function() {
         renderChart();
@@ -202,14 +219,4 @@ return function() {
     }, []);
-    React.useEffect(function() {
-        if (redraw) {
-            destroyChart();
-            setTimeout(function() {
-                renderChart();
-            }, 0);
-        } else {
-            updateChart();
-        }
-    });
     return(/*#__PURE__*/ React__default["default"].createElement("canvas", Object.assign({
-        ref: canvas,
+        ref: canvasRef,
         role: "img",
@@ -216,0 +223,0 @@ height: height,

dist/index.modern.js

 import ChartJS from 'chart.js/auto';
 export { default as Chart } from 'chart.js/auto';
 export { defaults } from 'chart.js';
-import React, { forwardRef, useRef, useMemo, useState, useImperativeHandle, useEffect } from 'react';
-import merge from 'lodash/merge';
-import assign from 'lodash/assign';
-import find from 'lodash/find';
+import React, { forwardRef, useRef, useState, useEffect } from 'react';
 
@@ -89,32 +86,51 @@ function _arrayWithHoles(arr) {
 
+function reforwardRef(ref, value) {
+    if (typeof ref === 'function') {
+        ref(value);
+    } else if (ref) {
+        ref.current = value;
+    }
+}
+function setNextDatasets(currentData, nextDatasets) {
+    currentData.datasets = nextDatasets.map(function(nextDataset) {
+        // given the new set, find it's current match
+        var currentDataset = currentData.datasets.find(function(dataset) {
+            return dataset.label === nextDataset.label && dataset.type === nextDataset.type;
+        });
+        // There is no original to update, so simply add new one
+        if (!currentDataset || !nextDataset.data) return nextDataset;
+        Object.assign(currentDataset, nextDataset);
+        return currentDataset;
+    });
+}
+
+var noopData = {
+    datasets: []
+};
 function ChartComponent(_param, ref) {
-    var _height = _param.height, height = _height === void 0 ? 150 : _height, _width = _param.width, width = _width === void 0 ? 300 : _width, _redraw = _param.redraw, redraw = _redraw === void 0 ? false : _redraw, type = _param.type, data = _param.data, options = _param.options, _plugins = _param.plugins, plugins = _plugins === void 0 ? [] : _plugins, getDatasetAtEvent = _param.getDatasetAtEvent, getElementAtEvent = _param.getElementAtEvent, getElementsAtEvent = _param.getElementsAtEvent, fallbackContent = _param.fallbackContent, onClickProp = _param.onClick, props = _objectWithoutProperties(_param, ["height", "width", "redraw", "type", "data", "options", "plugins", "getDatasetAtEvent", "getElementAtEvent", "getElementsAtEvent", "fallbackContent", "onClick"
+    var _height = _param.height, height = _height === void 0 ? 150 : _height, _width = _param.width, width = _width === void 0 ? 300 : _width, _redraw = _param.redraw, redraw = _redraw === void 0 ? false : _redraw, type = _param.type, dataProp = _param.data, options = _param.options, _plugins = _param.plugins, plugins = _plugins === void 0 ? [] : _plugins, getDatasetAtEvent = _param.getDatasetAtEvent, getElementAtEvent = _param.getElementAtEvent, getElementsAtEvent = _param.getElementsAtEvent, fallbackContent = _param.fallbackContent, onClickProp = _param.onClick, props = _objectWithoutProperties(_param, ["height", "width", "redraw", "type", "data", "options", "plugins", "getDatasetAtEvent", "getElementAtEvent", "getElementsAtEvent", "fallbackContent", "onClick"
     ]);
-    var canvas = useRef(null);
-    var computedData = useMemo(function() {
-        if (typeof data === 'function') {
-            return canvas.current ? data(canvas.current) : {
-                datasets: []
-            };
-        } else return merge({
-        }, data);
-    }, [
-        data,
-        canvas.current
-    ]);
-    var ref1 = _slicedToArray(useState()), chart = ref1[0], setChart = ref1[1];
-    useImperativeHandle(ref, function() {
-        return chart;
-    }, [
-        chart
-    ]);
+    var canvasRef = useRef(null);
+    var chartRef = useRef();
+    /**
+   * In case `dataProp` is function use internal state
+   */ var ref1 = _slicedToArray(useState()), computedData = ref1[0], setComputedData = ref1[1];
+    var data = computedData || (typeof dataProp === 'function' ? noopData : dataProp);
     var renderChart = function() {
-        if (!canvas.current) return;
-        setChart(new ChartJS(canvas.current, {
+        if (!canvasRef.current) return;
+        chartRef.current = new ChartJS(canvasRef.current, {
             type: type,
-            data: computedData,
+            data: data,
             options: options,
             plugins: plugins
-        }));
+        });
+        reforwardRef(ref, chartRef.current);
     };
+    var destroyChart = function() {
+        reforwardRef(ref, null);
+        if (chartRef.current) {
+            chartRef.current.destroy();
+            chartRef.current = null;
+        }
+    };
     var onClick = function(event) {
@@ -124,2 +140,3 @@ if (onClickProp) {
         }
+        var chart = chartRef.current;
         if (!chart) return;
@@ -136,49 +153,52 @@ getDatasetAtEvent && getDatasetAtEvent(chart.getElementsAtEventForMode(event.nativeEvent, 'dataset', {
     };
-    var updateChart = function() {
-        if (!chart) return;
-        if (options) {
-            chart.options = _objectSpread({
+    /**
+   * In case `dataProp` is function,
+   * then update internal state
+   */ useEffect(function() {
+        if (typeof dataProp === 'function' && canvasRef.current) {
+            setComputedData(dataProp(canvasRef.current));
+        }
+    }, [
+        dataProp
+    ]);
+    useEffect(function() {
+        if (!redraw && chartRef.current && options) {
+            chartRef.current.options = _objectSpread({
             }, options);
         }
-        if (!chart.config.data) {
-            chart.config.data = computedData;
-            chart.update();
-            return;
+    }, [
+        redraw,
+        options
+    ]);
+    useEffect(function() {
+        if (!redraw && chartRef.current) {
+            chartRef.current.config.data.labels = data.labels;
         }
-        var tmp = computedData.datasets, newDataSets = tmp === void 0 ? [] : tmp, newChartData = _objectWithoutProperties(computedData, [
-            "datasets"
-        ]);
-        var _data = chart.config.data, tmp1 = _data.datasets, currentDataSets = tmp1 === void 0 ? [] : tmp1;
-        // copy values
-        assign(chart.config.data, newChartData);
-        chart.config.data.datasets = newDataSets.map(function(newDataSet) {
-            // given the new set, find it's current match
-            var currentDataSet = find(currentDataSets, function(d) {
-                return d.label === newDataSet.label && d.type === newDataSet.type;
-            });
-            // There is no original to update, so simply add new one
-            if (!currentDataSet || !newDataSet.data) return _objectSpread({
-            }, newDataSet);
-            if (!currentDataSet.data) {
-                // @ts-expect-error Need to refactor
-                currentDataSet.data = [];
-            } else {
-                // @ts-expect-error Need to refactor
-                currentDataSet.data.length = newDataSet.data.length;
-            }
-            // copy in values
-            assign(currentDataSet.data, newDataSet.data);
-            // apply dataset changes, but keep copied data
-            assign(currentDataSet, _objectSpread({
-            }, newDataSet, {
-                data: currentDataSet.data
-            }));
-            return currentDataSet;
-        });
-        chart.update();
-    };
-    var destroyChart = function() {
-        if (chart) chart.destroy();
-    };
+    }, [
+        redraw,
+        data.labels
+    ]);
     useEffect(function() {
+        if (!redraw && chartRef.current && data.datasets) {
+            setNextDatasets(chartRef.current.config.data, data.datasets);
+        }
+    }, [
+        redraw,
+        data.datasets
+    ]);
+    useEffect(function() {
+        if (!chartRef.current) return;
+        if (redraw) {
+            destroyChart();
+            setTimeout(renderChart);
+        } else {
+            chartRef.current.update();
+        }
+    }, [
+        redraw,
+        options,
+        data.labels,
+        data.datasets
+    ]);
+    useEffect(function() {
         renderChart();
@@ -189,14 +209,4 @@ return function() {
     }, []);
-    useEffect(function() {
-        if (redraw) {
-            destroyChart();
-            setTimeout(function() {
-                renderChart();
-            }, 0);
-        } else {
-            updateChart();
-        }
-    });
     return(/*#__PURE__*/ React.createElement("canvas", Object.assign({
-        ref: canvas,
+        ref: canvasRef,
         role: "img",
@@ -203,0 +213,0 @@ height: height,

dist/typedCharts.d.ts

 import React from 'react';
 import { Props, ChartJSOrUndefined } from './types';
-export declare const Line: <TData = (number | import("chart.js").ScatterDataPoint | null)[], TLabel = unknown>(props: Omit<Props<"line", TData, TLabel, "line">, "type"> & {
+export declare const Line: <TData = (number | import("chart.js").ScatterDataPoint | null)[], TLabel = unknown>(props: Omit<Props<"line", TData, TLabel>, "type"> & {
     ref?: React.ForwardedRef<ChartJSOrUndefined<"line", TData, TLabel>> | undefined;
 }) => JSX.Element;
-export declare const Bar: <TData = number[], TLabel = unknown>(props: Omit<Props<"bar", TData, TLabel, "bar">, "type"> & {
+export declare const Bar: <TData = number[], TLabel = unknown>(props: Omit<Props<"bar", TData, TLabel>, "type"> & {
     ref?: React.ForwardedRef<ChartJSOrUndefined<"bar", TData, TLabel>> | undefined;
 }) => JSX.Element;
-export declare const Radar: <TData = (number | null)[], TLabel = unknown>(props: Omit<Props<"radar", TData, TLabel, "radar">, "type"> & {
+export declare const Radar: <TData = (number | null)[], TLabel = unknown>(props: Omit<Props<"radar", TData, TLabel>, "type"> & {
     ref?: React.ForwardedRef<ChartJSOrUndefined<"radar", TData, TLabel>> | undefined;
 }) => JSX.Element;
-export declare const Doughnut: <TData = number[], TLabel = unknown>(props: Omit<Props<"doughnut", TData, TLabel, "doughnut">, "type"> & {
+export declare const Doughnut: <TData = number[], TLabel = unknown>(props: Omit<Props<"doughnut", TData, TLabel>, "type"> & {
     ref?: React.ForwardedRef<ChartJSOrUndefined<"doughnut", TData, TLabel>> | undefined;
 }) => JSX.Element;
-export declare const PolarArea: <TData = number[], TLabel = unknown>(props: Omit<Props<"polarArea", TData, TLabel, "polarArea">, "type"> & {
+export declare const PolarArea: <TData = number[], TLabel = unknown>(props: Omit<Props<"polarArea", TData, TLabel>, "type"> & {
     ref?: React.ForwardedRef<ChartJSOrUndefined<"polarArea", TData, TLabel>> | undefined;
 }) => JSX.Element;
-export declare const Bubble: <TData = import("chart.js").BubbleDataPoint[], TLabel = unknown>(props: Omit<Props<"bubble", TData, TLabel, "bubble">, "type"> & {
+export declare const Bubble: <TData = import("chart.js").BubbleDataPoint[], TLabel = unknown>(props: Omit<Props<"bubble", TData, TLabel>, "type"> & {
     ref?: React.ForwardedRef<ChartJSOrUndefined<"bubble", TData, TLabel>> | undefined;
 }) => JSX.Element;
-export declare const Pie: <TData = number[], TLabel = unknown>(props: Omit<Props<"pie", TData, TLabel, "pie">, "type"> & {
+export declare const Pie: <TData = number[], TLabel = unknown>(props: Omit<Props<"pie", TData, TLabel>, "type"> & {
     ref?: React.ForwardedRef<ChartJSOrUndefined<"pie", TData, TLabel>> | undefined;
 }) => JSX.Element;
-export declare const Scatter: <TData = (number | import("chart.js").ScatterDataPoint | null)[], TLabel = unknown>(props: Omit<Props<"scatter", TData, TLabel, "scatter">, "type"> & {
+export declare const Scatter: <TData = (number | import("chart.js").ScatterDataPoint | null)[], TLabel = unknown>(props: Omit<Props<"scatter", TData, TLabel>, "type"> & {
     ref?: React.ForwardedRef<ChartJSOrUndefined<"scatter", TData, TLabel>> | undefined;
 }) => JSX.Element;

dist/types.d.ts

 import type { CanvasHTMLAttributes, ForwardedRef, ReactNode, MouseEvent } from 'react';
 import type { Chart, ChartType, ChartData, ChartOptions, DefaultDataPoint, Plugin, InteractionItem } from 'chart.js';
-export interface Props<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown, TOtherType extends TType = TType> extends CanvasHTMLAttributes<HTMLCanvasElement> {
+export interface Props<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> extends CanvasHTMLAttributes<HTMLCanvasElement> {
     type: TType;
-    data: ChartData<TOtherType, TData, TLabel> | ((canvas: HTMLCanvasElement) => ChartData<TOtherType, TData, TLabel>);
-    options?: ChartOptions<TOtherType>;
-    plugins?: Plugin<TOtherType>[];
+    /**
+     * @todo Remove function variant.
+     */
+    data: ChartData<TType, TData, TLabel> | ((canvas: HTMLCanvasElement) => ChartData<TType, TData, TLabel>);
+    options?: ChartOptions<TType>;
+    plugins?: Plugin<TType>[];
     redraw?: boolean;
@@ -23,4 +26,4 @@ /**
     ref?: ForwardedRef<ChartJSOrUndefined<TDefaultType, TData, TLabel>>;
-}) => JSX.Element : <TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown, TOtherType extends TType = TType>(props: Props<TType, TData, TLabel, TOtherType> & {
+}) => JSX.Element : <TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown>(props: Props<TType, TData, TLabel> & {
     ref?: ForwardedRef<ChartJSOrUndefined<TType, TData, TLabel>>;
 }) => JSX.Element;

package.json

 {
   "name": "react-chartjs-2",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "React components for Chart.js",
@@ -26,5 +26,2 @@ "main": "dist/index.js",
   ],
-  "dependencies": {
-    "lodash": "^4.17.19"
-  },
   "peerDependencies": {
@@ -31,0 +28,0 @@ "chart.js": "^3.5.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

66353

increased by7.76%

Dependency count

2

decreased by-33.33%

Number of package files

13

increased by8.33%

Lines of code

538

increased by4.26%

Dependency changes

• - Removedlodash@^4.17.19

• - Removedlodash@4.17.21(transitive)