Merge pull request #123 from keen/dlacheta-extend-metric-chart

metric chart extended and mapValues for table added
keen · Feb 18, 2019 · d089b8e · d089b8e
2 parents abbc5b3 + dfff397
commit d089b8e
Show file tree

Hide file tree

Showing 8 changed files with 7,299 additions and 924 deletions.
diff --git a/README.md b/README.md
@@ -639,6 +639,22 @@ chart
   .render(customParser(result));
 ```
 
+### Mapping values of a table column
+
+```javascript
+const chart = new KeenDataviz({
+    container: '#some_container',
+    type: 'table',
+    table: {
+      mapValues: {
+        'keen.timestamp': (value) => {
+          return value.toUpperCase();
+        }
+      }
+    }
+  })
+```
+
 ### Partial interval visual indicator
 
 By default, it's enabled for all charts with relative time frames starting with this_

diff --git a/docs/README.md b/docs/README.md
@@ -28,6 +28,18 @@ Types like "bar" and "line" support [axis rotation](http://c3js.org/samples/axes
 ### Custom (built by us):
 
 * metric
+
+If `previousResults` is set, the metric will show the difference between the current result and the previous one.
+
+```javascript
+const chart = new KeenDataviz({
+    container: '#some_container',
+    type: 'metric',
+    results,
+    previousResults // optional
+  })
+```
+
 * message
 
 ## Prototype methods

diff --git a/lib/index.js b/lib/index.js
@@ -127,7 +127,8 @@ export const Dataviz = function (options = {}) {
      show: undefined,
      className: 'partial-interval-indicator'
    },
-   timezone: 'UTC'
+   timezone: 'UTC',
+   table: {}
   };
 
   this.config = { ...extendDeep(defaultOptions, options) };

diff --git a/lib/libraries/default/metric.js b/lib/libraries/default/metric.js
@@ -13,6 +13,18 @@ export default {
     let suffix = '';
     let formattedNum;
     let valueEl;
+    let flexDifferenceStyle = '';
+    let resultDifference = '';
+    let differenceStyle = '';
+    let smallerValue = '';
+    const { results, previousResults } = this.config;
+    if(results && previousResults){
+      flexDifferenceStyle = previousResults ? ' metric-comparison' : '';
+      smallerValue = previousResults && title ? '-smaller' : '';
+      resultDifference = results.result - previousResults.result;
+      differenceStyle = (resultDifference > 0) ? '-green' : '-red';
+      resultDifference = Math.abs(resultDifference);
+    }
 
     if (typeof this.data()[1][1] === 'number') {
       value = this.data()[1][1];
@@ -22,6 +34,9 @@ export default {
     if ( (typeof opts['prettyNumber'] === 'undefined' || opts['prettyNumber'] === true)
       && !isNaN(parseInt(value)) ) {
         formattedNum = prettyNumber(value);
+        if(results && previousResults){
+          resultDifference = prettyNumber(resultDifference);
+        }
     }
 
     if (opts['prefix']) {
@@ -30,14 +45,16 @@ export default {
     if (opts['suffix']) {
       suffix = '<span class="' + theme + '-metric-suffix">' + opts['suffix'] + '</span>';
     }
-
     html += '<div class="' + theme + '">';
-    html +=   '<div class="' + theme + '-metric keen-dataviz-box" title="' + escapeHtml(value) + '">';
-    html +=     '<span><div class="' + theme + '-metric-value">' + prefix + escapeHtml(formattedNum) + suffix + '</div>';
+    html +=   '<div class="' + theme + '-metric keen-dataviz-box' + flexDifferenceStyle + '" title="' + escapeHtml(value) + '">';
+    if (results && previousResults) {
+      html +=   '<div class="' + theme + '-metric' + differenceStyle + '"><div class="arrow' + differenceStyle + '"> </div>' + escapeHtml(resultDifference) + '</div>';
+    }
+    html +=     '<div class="' + theme + '-metric-value' + smallerValue + '">' + prefix + escapeHtml(formattedNum) + suffix + '</div>';
     if (title) {
       html +=   '<div class="' + theme + '-metric-title">' + escapeHtml(title) + '</div>';
     }
-    html +=   '</span></div>';
+    html +=   '</div>';
     html += '</div>';
 
     this.el().innerHTML = html;

diff --git a/lib/libraries/default/table.js b/lib/libraries/default/table.js
@@ -45,10 +45,20 @@ function _generateTableRows(datavizInstance, dataset) {
     pages = Math.ceil((dataset.length - 1) / config.limit);
   }
 
+  let columnsArray = datavizInstance.config.table.columns ?
+                   datavizInstance.config.table.columns :
+                   datavizInstance.dataset.matrix[0];
+
+  const checkArray = {};
+  const { mapValues } = datavizInstance.config.table;
+  for (let key in mapValues){
+    checkArray[columnsArray.indexOf(key)] = key;
+  }
+
   // var london     = newYork.clone().tz("Europe/London");
   for (let row of datasetPaginated) {
     html +=   '<tr class="table-data-row">';
-    for (let rowCol of row) {
+    for (let [index, rowCol] of row.entries()) {
       if (
         datavizInstance.config.timezone
         && rowCol instanceof Date
@@ -60,7 +70,11 @@ function _generateTableRows(datavizInstance, dataset) {
         html += `<td>${dateTimeTimezoned.toString()}</td>`;
         continue;
       }
-      html +=   `<td>${rowCol}</td>`;
+      if(checkArray[index]){
+        html += `<td>${mapValues[checkArray[index]](rowCol)}</td>`;
+        continue
+      }
+      html += `<td>${rowCol}</td>`
     }
     html +=   '</tr>';
   }

diff --git a/lib/style/keen-dataviz.css b/lib/style/keen-dataviz.css
@@ -53,13 +53,20 @@
     text-align: center;
     display: flex;
     align-items: center;
-    flex-flow: row wrap;
+    flex-flow: row;
     justify-content: space-around;
+    flex-direction: column;
     padding: 1em 0;
     min-height: 4em;
     height: inherit;
   }
 
+  .metric-comparison {
+    flex-direction: column-reverse;
+    color: var(--black);
+    background: #f9f9f9;
+  }
+
   /* METRIC */
   &-metric {
     height: inherit;
@@ -69,12 +76,44 @@
       font-size: 4.3em;
       font-weight: 700;
       width: 100%;
+      &-smaller {
+        font-size: 3em;
+      }
     }
     &-title {
       font-size: 2em;
       font-weight: 200;
       width: 100%;
     }
+    &-green {
+      color: var(--green);
+      font-size: 2em;
+    }
+    &-red {
+      color: var(--red);
+      font-size: 2em;
+    }
+  }
+
+  .arrow-green {
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 8px solid var(--green);
+    position: relative;
+    top: 0.7em;
+    left: -0.6em;
+  }
+  .arrow-red {
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid var(--red);
+    position: relative;
+    top: 0.8em;
+    left: -0.6em;
   }
 
   /* MESSAGE */