Merge pull request #157 from keen/dlacheta-bar-percent-stacked-chart

dlacheta 100% stacked charts

Author: dariuszlacheta

README.md

@@ -574,7 +574,8 @@ Create a stacked chart, used to break down and compare parts of a whole.
 ```javascript
 const chart = new KeenDataviz({
   container: '#some_container', // required
-  stacked: true
+  stacking: 'normal' // 'normal' - stacked chart
+                     // 'percent' - 100% stacked chart
 });
  ```
 

lib/index.js

@@ -151,6 +151,11 @@ export const Dataviz = function (options = {}) {
     this.config.type = convertChartTypes(this.config.type);
   }
 
+  // overwriting stacked when stacking added
+  if (this.config.stacking) {
+    this.config.stacked = true;
+  }
+
   // get DOM node by query
   if (this.config.container) {
     this.el(this.config.container);

lib/libraries/c3/extensions/tooltip-contents.js

@@ -18,7 +18,7 @@ export default function (d, defaultTitleFormat, defaultValueFormat, color) {
     let name = nameFormat(d[i].name);
     let value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
     let bgcolor = this.levelColor ? this.levelColor(d[i].value) : color(d[i].id);
-    if (value) {
+    if (value && !isNaN(value)) {
       text += "<tr class='" + this.CLASS.tooltipName + "-" + d[i].id + "'>";
       if (name.indexOf('__tooltip_ignore_name_field__') === -1) {
         text +=   "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + escapeHtml(name) + "</td>";

lib/libraries/index.js

@@ -107,7 +107,7 @@ function defineC3(){
     'horizontal-bar',
     'horizontal-line',
     'horizontal-step',
-    'horizontal-spline'
+    'horizontal-spline',
   ];
 
   const getPaddings = (element, paddingName) => {
@@ -185,6 +185,24 @@ function defineC3(){
       render: function(){
         const options = getDefaultOptions.call(this);
 
+        // 100% for charts
+        const sumArray = calculateSumForPercents(this.dataset.matrix);
+        let oldMatrix = [];
+        if (options.stacking === 'percent' && (type === 'bar' || type === 'horizontal-bar' || type === 'area' || type === 'area-step' || type === 'area-spline')) {
+          oldMatrix = this.dataset.matrix;
+          this.dataset.matrix = [this.dataset.matrix[0], ...calculatePercents(this.dataset.matrix, sumArray)];
+          options.axis = {
+            y: {
+              padding: {
+                top: 0,
+              },
+              tick: {
+                format: d => `${d}%`,
+              },
+            },
+          };
+        }
+
         if (!!this.config.clearOnRender && options.data.columns.length > 0) {
           options.data.columns.splice(1);
         }
@@ -282,13 +300,13 @@ function defineC3(){
           if (results && results.length > 1) {
             const partialResultsRegion = {
               axis: 'x',
-              start: new Date(results[results.length-2]),
+              start: new Date(results[results.length - 2]),
               class: options.partialIntervalIndicator.className
             };
             options.regions = [...(options.regions || []), partialResultsRegion];
           }
         }
-
+        
         if (
           !(options.tooltip && options.tooltip.show === false)
           &&
@@ -297,6 +315,7 @@ function defineC3(){
             && options.legend.tooltip
             && options.legend.tooltip.show)
           )) {
+            
           // Apply custom tooltip
           options.tooltip = {
             contents: c3TooltipContents,
@@ -307,6 +326,18 @@ function defineC3(){
                 if (this.config.tooltip && this.config.tooltip.format && this.config.tooltip.format.value)
                 {
                   valueFormatted = this.config.tooltip.format.value.call(this, valueFormatted, ratio, id, index);
+                  // Restore value from percents calculation for stacking 100% charts
+                  if (options.stacking === 'percent' && (type === 'bar' || type === 'horizontal-bar' || type === 'area' 
+                  || type === 'area-step' || type === 'area-spline')) {
+                    valueFormatted = parseFloat(((valueFormatted / 100) * sumArray[index]).toFixed(2));
+                  }
+                  return valueFormatted;
+                }
+                // Restore value from percents calculation for stacking 100% charts
+                if (options.stacking === 'percent' && (type === 'bar' || type === 'horizontal-bar' || type === 'area' 
+                || type === 'area-step' || type === 'area-spline')) {
+                  valueFormatted = ((valueFormatted / 100) * sumArray[index]).toFixed(2);
+                  return parseFloat(valueFormatted);
                 }
                 return valueFormatted;
               }
@@ -422,3 +453,30 @@ function bindResizeListener(fn){
     window.attachEvent('onresize', fn);
   }
 }
+
+function calculateSumForPercents(matrix) {
+  const sumArray = [];
+  matrix.slice(1).forEach((d, i) => {
+    d.forEach((e) => {
+      if (typeof e === 'number') {
+        if (!sumArray[i]) {
+          sumArray[i] = e;
+          return sumArray[i];
+        }
+        sumArray[i] += e;
+      }
+      return sumArray[i];
+    });
+  });
+  return sumArray;
+}
+
+function calculatePercents(matrix, sumArray) {
+  const newValues = matrix.slice(1).map((d, i) => d.map((e) => {
+    if (typeof e === 'number') {
+      return (e / sumArray[i]) * 100;
+    }
+    return e;
+  }));
+  return newValues;
+}