react-chartjs-2 - npm Package Compare versions

Comparing version 3.0.1 to 3.0.2

dist/index.d.ts

@@ -14,3 +14,3 @@ import React from 'react';
 export declare const defaults: chartjs.Defaults;
-export declare const Chart: typeof chartjs;
+export declare const Chart: typeof chartjs.Chart;
 export default ChartComponent;

dist/index.js

@@ -228,3 +228,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 var defaults = chartjs.defaults;
-var Chart = chartjs;
+var Chart = chartjs.Chart;
 
@@ -231,0 +231,0 @@ exports.Bar = Bar;

dist/index.modern.js

@@ -6,19 +6,54 @@ import React, { forwardRef, useRef, useMemo, useState, useImperativeHandle, useEffect } from 'react';
 import find from 'lodash/find';
-import * as chartjs from 'chart.js';
-import { defaults as defaults$1 } from 'chart.js';
+import { defaults as defaults$1, Chart as Chart$2 } from 'chart.js';
 
-const ChartComponent = forwardRef((props, ref) => {
-  const {
-    id,
-    className,
-    height = 150,
-    width = 300,
-    redraw = false,
-    type,
-    data,
-    options = {},
-    plugins = []
-  } = props;
-  const canvas = useRef(null);
-  const computedData = useMemo(() => {
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var ChartComponent = forwardRef(function (props, ref) {
+  var id = props.id,
+      className = props.className,
+      _props$height = props.height,
+      height = _props$height === void 0 ? 150 : _props$height,
+      _props$width = props.width,
+      width = _props$width === void 0 ? 300 : _props$width,
+      _props$redraw = props.redraw,
+      redraw = _props$redraw === void 0 ? false : _props$redraw,
+      type = props.type,
+      data = props.data,
+      _props$options = props.options,
+      options = _props$options === void 0 ? {} : _props$options,
+      _props$plugins = props.plugins,
+      plugins = _props$plugins === void 0 ? [] : _props$plugins;
+  var canvas = useRef(null);
+  var computedData = useMemo(function () {
     if (typeof data === 'function') {
@@ -28,22 +63,26 @@ return canvas.current ? data(canvas.current) : {};
   }, [data, canvas.current]);
-  const [chart, setChart] = useState();
-  useImperativeHandle(ref, () => chart, [chart]);
 
-  const renderChart = () => {
+  var _useState = useState(),
+      chart = _useState[0],
+      setChart = _useState[1];
+
+  useImperativeHandle(ref, function () {
+    return chart;
+  }, [chart]);
+
+  var renderChart = function renderChart() {
     if (!canvas.current) return;
     setChart(new Chart$1(canvas.current, {
-      type,
+      type: type,
       data: computedData,
-      options,
-      plugins
+      options: options,
+      plugins: plugins
     }));
   };
 
-  const onClick = e => {
+  var onClick = function onClick(e) {
     if (!chart) return;
-    const {
-      getDatasetAtEvent,
-      getElementAtEvent,
-      getElementsAtEvent
-    } = props;
+    var getDatasetAtEvent = props.getDatasetAtEvent,
+        getElementAtEvent = props.getElementAtEvent,
+        getElementsAtEvent = props.getElementsAtEvent;
     getDatasetAtEvent && getDatasetAtEvent(chart.getElementsAtEventForMode(e, 'dataset', {
@@ -60,8 +99,7 @@ intersect: true
 
-  const updateChart = () => {
+  var updateChart = function updateChart() {
     if (!chart) return;
 
     if (options) {
-      chart.options = { ...options
-      };
+      chart.options = _extends({}, options);
     }
@@ -75,12 +113,13 @@
 
-    const {
-      datasets: newDataSets = [],
-      ...newChartData
-    } = computedData;
-    const {
-      datasets: currentDataSets = []
-    } = chart.config.data;
+    var _computedData$dataset = computedData.datasets,
+        newDataSets = _computedData$dataset === void 0 ? [] : _computedData$dataset,
+        newChartData = _objectWithoutPropertiesLoose(computedData, ["datasets"]);
+
+    var _chart$config$data$da = chart.config.data.datasets,
+        currentDataSets = _chart$config$data$da === void 0 ? [] : _chart$config$data$da;
     assign(chart.config.data, newChartData);
-    chart.config.data.datasets = newDataSets.map(newDataSet => {
-      const currentDataSet = find(currentDataSets, d => d.label === newDataSet.label && d.type === newDataSet.type);
+    chart.config.data.datasets = newDataSets.map(function (newDataSet) {
+      var currentDataSet = find(currentDataSets, function (d) {
+        return d.label === newDataSet.label && d.type === newDataSet.type;
+      });
       if (!currentDataSet || !newDataSet.data) return newDataSet;
@@ -95,6 +134,5 @@
       assign(currentDataSet.data, newDataSet.data);
-      return { ...currentDataSet,
-        ...newDataSet,
+      return _extends({}, currentDataSet, newDataSet, {
         data: currentDataSet.data
-      };
+      });
     });
@@ -104,14 +142,16 @@ chart.update();
 
-  const destroyChart = () => {
+  var destroyChart = function destroyChart() {
     if (chart) chart.destroy();
   };
 
-  useEffect(() => {
+  useEffect(function () {
     renderChart();
-    return () => destroyChart();
+    return function () {
+      return destroyChart();
+    };
   }, []);
-  useEffect(() => {
+  useEffect(function () {
     if (redraw) {
       destroyChart();
-      setTimeout(() => {
+      setTimeout(function () {
         renderChart();
@@ -134,44 +174,60 @@ }, 0);
 
-const Line = forwardRef((props, ref) => React.createElement(ChartComponent, Object.assign({}, props, {
-  type: 'line',
-  ref: ref,
-  options: props.options || {}
-})));
-const Bar = forwardRef((props, ref) => React.createElement(ChartComponent, Object.assign({}, props, {
-  type: 'bar',
-  ref: ref,
-  options: props.options || {}
-})));
-const Radar = forwardRef((props, ref) => React.createElement(ChartComponent, Object.assign({}, props, {
-  type: 'radar',
-  ref: ref,
-  options: props.options || {}
-})));
-const Doughnut = forwardRef((props, ref) => React.createElement(ChartComponent, Object.assign({}, props, {
-  type: 'doughnut',
-  ref: ref,
-  options: props.options || {}
-})));
-const PolarArea = forwardRef((props, ref) => React.createElement(ChartComponent, Object.assign({}, props, {
-  type: 'polarArea',
-  ref: ref,
-  options: props.options || {}
-})));
-const Bubble = forwardRef((props, ref) => React.createElement(ChartComponent, Object.assign({}, props, {
-  type: 'bubble',
-  ref: ref,
-  options: props.options || {}
-})));
-const Pie = forwardRef((props, ref) => React.createElement(ChartComponent, Object.assign({}, props, {
-  type: 'pie',
-  ref: ref,
-  options: props.options || {}
-})));
-const Scatter = forwardRef((props, ref) => React.createElement(ChartComponent, Object.assign({}, props, {
-  type: 'scatter',
-  ref: ref,
-  options: props.options || {}
-})));
-const defaults = defaults$1;
-const Chart = chartjs;
+var Line = forwardRef(function (props, ref) {
+  return React.createElement(ChartComponent, Object.assign({}, props, {
+    type: 'line',
+    ref: ref,
+    options: props.options || {}
+  }));
+});
+var Bar = forwardRef(function (props, ref) {
+  return React.createElement(ChartComponent, Object.assign({}, props, {
+    type: 'bar',
+    ref: ref,
+    options: props.options || {}
+  }));
+});
+var Radar = forwardRef(function (props, ref) {
+  return React.createElement(ChartComponent, Object.assign({}, props, {
+    type: 'radar',
+    ref: ref,
+    options: props.options || {}
+  }));
+});
+var Doughnut = forwardRef(function (props, ref) {
+  return React.createElement(ChartComponent, Object.assign({}, props, {
+    type: 'doughnut',
+    ref: ref,
+    options: props.options || {}
+  }));
+});
+var PolarArea = forwardRef(function (props, ref) {
+  return React.createElement(ChartComponent, Object.assign({}, props, {
+    type: 'polarArea',
+    ref: ref,
+    options: props.options || {}
+  }));
+});
+var Bubble = forwardRef(function (props, ref) {
+  return React.createElement(ChartComponent, Object.assign({}, props, {
+    type: 'bubble',
+    ref: ref,
+    options: props.options || {}
+  }));
+});
+var Pie = forwardRef(function (props, ref) {
+  return React.createElement(ChartComponent, Object.assign({}, props, {
+    type: 'pie',
+    ref: ref,
+    options: props.options || {}
+  }));
+});
+var Scatter = forwardRef(function (props, ref) {
+  return React.createElement(ChartComponent, Object.assign({}, props, {
+    type: 'scatter',
+    ref: ref,
+    options: props.options || {}
+  }));
+});
+var defaults = defaults$1;
+var Chart = Chart$2;
 
@@ -178,0 +234,0 @@ export default ChartComponent;

package.json

 {
   "name": "react-chartjs-2",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "React components for Chart.js",
@@ -5,0 +5,0 @@ "source": "src/index.tsx",

README.md

@@ -203,3 +203,3 @@ [![build status](https://img.shields.io/travis/jerairrest/react-chartjs-2.svg?branch=master&style=flat-square)](https://travis-ci.org/jerairrest/react-chartjs-2)
 
-<!-- ### Defaults
+### Defaults
 
@@ -212,3 +212,3 @@ Chart.js defaults can be set by importing the `defaults` object:
 // Disable animating charts by default.
-defaults.global.animation = false;
+defaults.animation = false;
 ```
@@ -218,3 +218,3 @@
 
-```tsx
+````tsx
 import { defaults } from 'react-chartjs-2';
@@ -224,8 +224,6 @@ import merge from 'lodash.merge';
 merge(defaults, {
-	global: {
-		animation: false,
-		line: {
-			borderColor: '#F85F73',
-		},
-	},
+	animation: false,
+  line: {
+    borderColor: '#F85F73',
+  }
 });
@@ -242,3 +240,3 @@ ``` -->
 componentWillMount() {
-  Chart.pluginService.register({
+  Chart.register({
     afterDraw: function (chart, easing) {
@@ -249,3 +247,3 @@ // Plugin code.
 }
-``` -->
+````
 
@@ -252,0 +250,0 @@ ### Working with Multiple Datasets

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

59048

increased by3.46%

Lines of code

679

increased by7.27%

Worsened metrics

Number of lines in readme file

259

decreased by-0.77%

No dependency changes