Add padding option (#53)

* Add padding option

* changes default of padding to font.lineHeight / 2

Author: stockiNail

src/controller.js

@@ -241,8 +241,8 @@ export default class SankeyController extends DatasetController {
     const lines = isNullOrUndef(label) ? [] : me.toTextLines(label);
     const linesLength = lines.length;
     const middle = y + height / 2;
-    const padding = 7.5;
     const textHeight = font.lineHeight;
+    const padding = valueOrDefault(me.options.padding, textHeight / 2);
 
     ctx.font = font.string;
 

test/fixtures/labels-multiline-padding.js

@@ -0,0 +1,52 @@
+const data = [
+  {from: 'Oil', to: 'Fossil Fuels', flow: 100},
+  {from: 'Oil', to: 'Natural Gas', flow: 50},
+  {from: 'Natural Gas', to: 'Coal', flow: 50},
+  {from: 'Coal', to: 'Electricity', flow: 50},
+  {from: 'Fossil Fuels', to: 'Energy', flow: 100},
+];
+
+const colors = {
+  Oil: 'black',
+  Coal: 'gray',
+  'Fossil Fuels': 'slategray',
+  Electricity: 'blue',
+  Energy: 'orange'
+};
+
+const labels = {
+  'Natural Gas': 'Nat. gas \nsubtitle 1\nsubtitle 2',
+  'Fossil Fuels': 'Fossil\nsubtitle 1\nsubtitle 2',
+  Coal: 'Coal\nsubtitle 1\nsubtitle 2\nsubtitle 3\nsubtitle 4',
+  Energy: 'Energy\nsubtitle 1\nsubtitle 2\nsubtitle 3',
+  Electricity: 'Electricity\nsubtitle 1'
+};
+
+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,
+          padding: -20
+        }
+      ]
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      height: 512,
+      width: 512
+    }
+  }
+};

test/fixtures/labels-multiline-padding.png

@@ -32,7 +32,8 @@ declare module 'chart.js' {
     nodeWidth?: number      /* defaults to 10 */
     color?: string          /* defaults to 'black' */
     borderColor?: string    /* defaults to 'black' */
-    font: FontSpec          /* defaults to chart.options.font */
+    font?: FontSpec         /* defaults to chart.options.font */
+    padding?: number        /* defaults to font.lineHeight / 2 */
   }
 
   type FromToElement = {