Output a warning whenever user tries to use datasets without a unique key (#135)

* Output a warning whenever user tries to use datasets without a unique key

* grammar fix

* only show warning in dev enviroment

* Rebased, changed NODE_ENV to get from process.env, moved code to checkDatasets function

* linting fixes

Author: BenLorantfy

src/index.js

@@ -5,6 +5,8 @@ import isEqual from 'lodash/isEqual';
 import find from 'lodash/find';
 import keyBy from 'lodash/keyBy';
 
+const NODE_ENV = (typeof process !== 'undefined') && process.env && process.env.NODE_ENV;
+
 class ChartComponent extends React.Component {
   static getLabelAsKey = d => d.label;
 
@@ -144,6 +146,25 @@ class ChartComponent extends React.Component {
     return data;
   }
 
+  checkDatasets(datasets) {
+    const isDev = NODE_ENV !== 'production' && NODE_ENV !== 'prod';
+    const usingCustomKeyProvider = this.props.datasetKeyProvider !== ChartComponent.getLabelAsKey;
+    const multipleDatasets = datasets.length > 1;
+
+    if (isDev && multipleDatasets && !usingCustomKeyProvider) {
+      let shouldWarn = false;
+      datasets.forEach((dataset) => {
+        if (!dataset.label) {
+          shouldWarn = true;
+        }
+      });
+
+      if (shouldWarn) {
+        console.error('[react-chartjs-2] Warning: Each dataset needs a unique key. By default, the "label" property on each dataset is used. Alternatively, you may provide a "datasetKeyProvider" as a prop that returns a unique key.');
+      }
+    }
+  }
+
   updateChart() {
     const {options} = this.props;
 
@@ -159,6 +180,7 @@ class ChartComponent extends React.Component {
     // seamless transitions
     let currentDatasets = (this.chartInstance.config.data && this.chartInstance.config.data.datasets) || [];
     const nextDatasets = data.datasets || [];
+    this.checkDatasets(currentDatasets);
 
     const currentDatasetsIndexed = keyBy(
       currentDatasets,
@@ -170,6 +192,7 @@ class ChartComponent extends React.Component {
     this.chartInstance.config.data.datasets = nextDatasets.map(next => {
       const current =
         currentDatasetsIndexed[this.props.datasetKeyProvider(next)];
+
       if (current && current.type === next.type) {
         // The data array must be edited in place. As chart.js adds listeners to it.
         current.data.splice(next.data.length);
@@ -233,7 +256,7 @@ class ChartComponent extends React.Component {
   }
 
   ref = (element) => {
-    this.element = element
+    this.element = element;
   }
 
   render() {

test/__tests__/Chart_spec.js

@@ -222,4 +222,79 @@ describe('<Chart />', () => {
       expect(dataFn.calledWith(canvas)).to.equal(true);
     });
   });
+
+  describe('checkDatasets', () => {
+    let consoleStub = null;
+    beforeEach(() => {
+      consoleStub = sinon.stub(global.console, 'error');
+    });
+
+    afterEach(() => {
+      consoleStub.restore();
+      consoleStub = null;
+    });
+
+    it('should log error to console if datasets don\'t have a label', () => {
+      const wrapper = mountComponent({ data: {} });
+      wrapper.setProps({
+          data: {
+            datasets: [
+              {
+                _id: '238940890234809234',
+                data: [10, 20, 10, 20, 10, 20, 10]
+              },
+              {
+                _id: '098340598345839455',
+                data: [50, 100, 50, 100, 50, 100, 50]
+              }
+            ]
+          }
+      });
+      wrapper.update();
+
+      expect(consoleStub.callCount).to.equal(1);
+    });
+
+    it('should not log error to console if all datasets have a label', () => {
+      const wrapper = mountComponent({ data: {} });
+      wrapper.setProps({
+        data: {
+          datasets: [
+            {
+              label: 'My first dataset',
+              data: [10, 20, 10, 20, 10, 20, 10]
+            },
+            {
+              label: 'My second dataset',
+              data: [50, 100, 50, 100, 50, 100, 50]
+            }
+          ]
+        }
+      });
+      wrapper.update();
+
+      expect(consoleStub.callCount).to.equal(0);
+    });
+
+    it('should not log error to console if a custom datasetKeyProvider is provided', () => {
+      const wrapper = mountComponent({ datasetKeyProvider: (d) => d._id });
+      wrapper.setProps({
+          data: {
+            datasets: [
+              {
+                _id: '238940890234809234',
+                data: [10, 20, 10, 20, 10, 20, 10]
+              },
+              {
+                _id: '098340598345839455',
+                data: [50, 100, 50, 100, 50, 100, 50]
+              }
+            ]
+          }
+      });
+      wrapper.update();
+
+      expect(consoleStub.callCount).to.equal(0);
+    });
+  });
 });