Add labels option for overriding labels

Author: kurkle

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-chart-sankey",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Chart.js module for creating sankey diagrams",
   "main": "dist/chartjs-chart-sankey.js",
   "module": "dist/chartjs-chart-sankey.esm.js",

package.json

@@ -143,6 +143,8 @@ export default class SankeyController extends DatasetController {
     const me = this;
     const ctx = me._ctx;
     const nodes = me._nodes || new Map();
+    const dataset = me.getDataset();
+    const labels = dataset.labels;
     const {xScale, yScale} = me._cachedMeta;
 
     ctx.save();
@@ -153,15 +155,18 @@ export default class SankeyController extends DatasetController {
       const y = yScale.getPixelForValue(node.y);
       const max = Math.max(node.in, node.out);
       const height = Math.abs(yScale.getPixelForValue(node.y + max) - y);
-      ctx.fillStyle = me.getDataset().color || 'black';
+      const label = labels && labels[node.key] || node.key;
+      let textX = x;
+      ctx.fillStyle = dataset.color || 'black';
       ctx.textBaseline = 'middle';
       if (x < chartArea.width / 2) {
         ctx.textAlign = 'left';
-        ctx.fillText(node.key, x + 15, y + height / 2);
+        textX += 15;
       } else {
         ctx.textAlign = 'right';
-        ctx.fillText(node.key, x - 5, y + height / 2);
+        textX -= 5;
       }
+      ctx.fillText(label, textX, y + height / 2);
     }
     ctx.restore();
   }

src/controller.js

@@ -0,0 +1,48 @@
+const data = [
+  {from: 'Oil', to: 'Fossil Fuels', flow: 15},
+  {from: 'Natural Gas', to: 'Fossil Fuels', flow: 20},
+  {from: 'Coal', to: 'Fossil Fuels', flow: 25},
+  {from: 'Coal', to: 'Electricity', flow: 25},
+  {from: 'Fossil Fuels', to: 'Energy', flow: 60},
+  {from: 'Electricity', to: 'Energy', flow: 25}
+];
+
+const colors = {
+  Oil: 'black',
+  Coal: 'gray',
+  'Fossil Fuels': 'slategray',
+  Electricity: 'blue',
+  Energy: 'orange'
+};
+
+const labels = {
+  'Natural Gas': 'Nat. gas',
+  'Fossil Fuels': 'Fossil',
+};
+
+function getColor(name) {
+  return colors[name] || 'green';
+}
+
+module.exports = {
+  config: {
+    type: 'sankey',
+    data: {
+      datasets: [
+        {
+          data,
+          colorFrom: (c) => getColor(c.dataset.data[c.dataIndex].from),
+          colorTo: (c) => getColor(c.dataset.data[c.dataIndex].to),
+          labels
+        }
+      ]
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      height: 256,
+      width: 512
+    }
+  }
+};

test/fixtures/labels.js

@@ -17,7 +17,7 @@ const colors = {
 
 const priority = {
   Oil: 1,
-  'Narural Gas': 2,
+  'Natural Gas': 2,
   Coal: 3,
   'Fossil Fuels': 1,
   Electricity: 2,