react-chartjs-2 - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

dist/index.d.ts

 import React from 'react';
 import { Props } from './types';
 import ChartComponent from './chart';
+import * as chartjs from 'chart.js';
 export declare const Line: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
@@ -12,2 +13,4 @@ export declare const Bar: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
 export declare const Scatter: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
+export declare const defaults: chartjs.Defaults;
+export declare const Chart: typeof chartjs;
 export default ChartComponent;

dist/index.js

@@ -5,6 +5,7 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 var React__default = _interopDefault(React);
-var Chart = _interopDefault(require('chart.js/auto'));
+var Chart$1 = _interopDefault(require('chart.js/auto'));
 var merge = _interopDefault(require('lodash/merge'));
 var assign = _interopDefault(require('lodash/assign'));
 var find = _interopDefault(require('lodash/find'));
+var chartjs = require('chart.js');
 
@@ -76,3 +77,3 @@ function _extends() {
     if (!canvas.current) return;
-    setChart(new Chart(canvas.current, {
+    setChart(new Chart$1(canvas.current, {
       type: type,
@@ -228,5 +229,8 @@ data: computedData,
 });
+var defaults = chartjs.defaults;
+var Chart = chartjs;
 
 exports.Bar = Bar;
 exports.Bubble = Bubble;
+exports.Chart = Chart;
 exports.Doughnut = Doughnut;
@@ -239,2 +243,3 @@ exports.Line = Line;
 exports.default = ChartComponent;
+exports.defaults = defaults;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

 import React, { forwardRef, useRef, useMemo, useState, useImperativeHandle, useEffect } from 'react';
-import Chart from 'chart.js/auto';
+import Chart$1 from 'chart.js/auto';
 import merge from 'lodash/merge';
 import assign from 'lodash/assign';
 import find from 'lodash/find';
+import * as chartjs from 'chart.js';
+import { defaults as defaults$1 } from 'chart.js';
 
-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 () {
+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(() => {
     if (typeof data === 'function') {
@@ -61,26 +27,22 @@ return canvas.current ? data(canvas.current) : {};
   }, [data, canvas.current]);
+  const [chart, setChart] = useState();
+  useImperativeHandle(ref, () => chart, [chart]);
 
-  var _useState = useState(),
-      chart = _useState[0],
-      setChart = _useState[1];
-
-  useImperativeHandle(ref, function () {
-    return chart;
-  }, [chart]);
-
-  var renderChart = function renderChart() {
+  const renderChart = () => {
     if (!canvas.current) return;
-    setChart(new Chart(canvas.current, {
-      type: type,
+    setChart(new Chart$1(canvas.current, {
+      type,
       data: computedData,
-      options: options,
-      plugins: plugins
+      options,
+      plugins
     }));
   };
 
-  var onClick = function onClick(e) {
+  const onClick = e => {
     if (!chart) return;
-    var getDatasetAtEvent = props.getDatasetAtEvent,
-        getElementAtEvent = props.getElementAtEvent,
-        getElementsAtEvent = props.getElementsAtEvent;
+    const {
+      getDatasetAtEvent,
+      getElementAtEvent,
+      getElementsAtEvent
+    } = props;
     getDatasetAtEvent && getDatasetAtEvent(chart.getElementsAtEventForMode(e, 'dataset', {
@@ -97,7 +59,8 @@ intersect: true
 
-  var updateChart = function updateChart() {
+  const updateChart = () => {
     if (!chart) return;
 
     if (options) {
-      chart.options = _extends({}, options);
+      chart.options = { ...options
+      };
     }
@@ -111,13 +74,12 @@
 
-    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;
+    const {
+      datasets: newDataSets = [],
+      ...newChartData
+    } = computedData;
+    const {
+      datasets: currentDataSets = []
+    } = chart.config.data;
     assign(chart.config.data, newChartData);
-    chart.config.data.datasets = newDataSets.map(function (newDataSet) {
-      var currentDataSet = find(currentDataSets, function (d) {
-        return d.label === newDataSet.label && d.type === newDataSet.type;
-      });
+    chart.config.data.datasets = newDataSets.map(newDataSet => {
+      const currentDataSet = find(currentDataSets, d => d.label === newDataSet.label && d.type === newDataSet.type);
       if (!currentDataSet || !newDataSet.data) return newDataSet;
@@ -132,5 +94,6 @@
       assign(currentDataSet.data, newDataSet.data);
-      return _extends({}, currentDataSet, newDataSet, {
+      return { ...currentDataSet,
+        ...newDataSet,
         data: currentDataSet.data
-      });
+      };
     });
@@ -140,16 +103,14 @@ chart.update();
 
-  var destroyChart = function destroyChart() {
+  const destroyChart = () => {
     if (chart) chart.destroy();
   };
 
-  useEffect(function () {
+  useEffect(() => {
     renderChart();
-    return function () {
-      return destroyChart();
-    };
+    return () => destroyChart();
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     if (redraw) {
       destroyChart();
-      setTimeout(function () {
+      setTimeout(() => {
         renderChart();
@@ -172,61 +133,47 @@ }, 0);
 
-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 || {}
-  }));
-});
+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;
 
 export default ChartComponent;
-export { Bar, Bubble, Doughnut, Line, Pie, PolarArea, Radar, Scatter };
+export { Bar, Bubble, Chart, Doughnut, Line, Pie, PolarArea, Radar, Scatter, defaults };
 //# sourceMappingURL=index.modern.js.map

package.json

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

README.md

@@ -44,2 +44,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)
   id?: string;
+  className?: string;
   height?: number;
@@ -64,2 +65,9 @@ width?: number;
 
+#### className
+
+Type `string`
+Default: `undefined`
+
+class attribute applied to the rendered canvas
+
 #### height
@@ -66,0 +74,0 @@

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

57072

13.9%

Number of package files

14

7.69%

Lines of code

633

40.98%

Number of lines in readme file

261

3.16%

Number of medium supply chain risk alerts

0

-100%

No dependency changes