reportjs - npm Package Compare versions

Comparing version 3.0.5 to 3.1.0

dist/js/adapter/DOMGraphChartjsAdapter.js

@@ -40,2 +40,15 @@ 'use strict';
 
+function generateColors(colorScheme, index) {
+    var colorIndex = index % colorScheme.length,
+        rgbColor = (0, _colors.hexToRgb)(colorScheme[colorIndex]);
+
+    return {
+        backgroundColor: (0, _colors.rgbToString)(rgbColor, 0.2),
+        borderColor: (0, _colors.rgbToString)(rgbColor, 1),
+        pointBorderColor: (0, _colors.rgbToString)(rgbColor, 1),
+        pointBackgroundColor: (0, _colors.rgbToString)(rgbColor, 1),
+        pointHoverBackgroundColor: (0, _colors.rgbToString)(rgbColor, 0.1)
+    };
+}
+
 var DOMGraphChartjsAdapter = exports.DOMGraphChartjsAdapter = function () {
@@ -50,19 +63,7 @@ function DOMGraphChartjsAdapter() {
             var getChartData = function getChartData(graph) {
-                var index = 0,
-                    colors = new _colors.Colors(),
-                    colorScheme = colors.defaultScheme();
+                var colorScheme = _colors.defaultScheme;
                 return {
                     labels: graph.labels,
-                    datasets: graph.datasets.map(function (dataset) {
-                        var colorIndex = index % colorScheme.length,
-                            rgbColor = colors.hexToRgb(colorScheme[colorIndex]);
-                        dataset.fillColor = colors.rgbToString(rgbColor, 0.2);
-                        dataset.strokeColor = colors.rgbToString(rgbColor, 1);
-                        dataset.pointColor = colors.rgbToString(rgbColor, 1);
-                        dataset.pointStrokeColor = colors.rgbToString(rgbColor, 0.1);
-                        dataset.pointHighlightFill = colors.rgbToString(rgbColor, 0.1);
-                        dataset.pointHighlightStroke = colors.rgbToString(rgbColor, 1);
-                        index++;
-
-                        return dataset;
+                    datasets: graph.datasets.map(function (dataset, index) {
+                        return Object.assign(generateColors(colorScheme, index), dataset);
                     })
@@ -73,21 +74,7 @@ };
             var context = canvas.getContext('2d'),
-                chart = new _chart2.default(context),
-                chartOptions = {
-                legendTemplate: '<ul class="chartjs-legend <%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span class="pill" style="background-color:<%=datasets[i].strokeColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
-            };
+                chart = new _chart2.default(context, {
+                type: graph.graphType,
+                data: getChartData(graph)
+            });
 
-            switch (graph.graphType) {
-                case 'line':
-                    chart = chart.Line(getChartData(graph), chartOptions);
-                    break;
-                case 'bar':
-                    chart = chart.Bar(getChartData(graph), chartOptions);
-                    break;
-                case 'radar':
-                    chart = chart.Radar(getChartData(graph), chartOptions);
-                    break;
-                default:
-                    throw Error('Unknown graph type "' + graph.graphType + '"');
-            }
-
             return chart;
@@ -99,36 +86,33 @@ }
             var getChartData = function getChartData(graph) {
-                var index = 0,
-                    colors = new _colors.Colors(),
-                    colorScheme = colors.defaultScheme();
-                return graph.labels.map(function (label) {
-                    var colorIndex = index % colorScheme.length,
-                        rgbColor = colors.hexToRgb(colorScheme[colorIndex]);
-                    label.color = colors.rgbToString(rgbColor, 0.8);
-                    label.highlight = colors.rgbToString(rgbColor, 1);
-                    index++;
-
-                    return label;
+                var colorScheme = _colors.defaultScheme;
+                var colors = graph.labels.map(function (label, index) {
+                    return generateColors(colorScheme, index);
                 });
+                return {
+                    datasets: [{
+                        data: graph.labels.map(function (label) {
+                            return label.value;
+                        }),
+                        backgroundColor: colors.map(function (color) {
+                            return color.borderColor;
+                        }),
+                        hoverBorderColor: colors.map(function (color) {
+                            return color.borderColor;
+                        }),
+                        hoverBackgroundColor: colors.map(function (color) {
+                            return color.backgroundColor;
+                        })
+                    }],
+                    labels: graph.labels.map(function (label) {
+                        return label.label;
+                    })
+                };
             };
 
             var context = canvas.getContext('2d'),
-                chart = new _chart2.default(context),
-                chartOptions = {
-                legendTemplate: '<ul class="chartjs-legend <%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span class="pill" style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'
-            };
+                chart = new _chart2.default(context, {
+                type: graph.graphType,
+                data: getChartData(graph)
+            });
 
-            switch (graph.graphType) {
-                case 'pie':
-                    chart = chart.Pie(getChartData(graph), chartOptions);
-                    break;
-                case 'polarArea':
-                    chart = chart.PolarArea(getChartData(graph), chartOptions);
-                    break;
-                case 'doughnut':
-                    chart = chart.Doughnut(getChartData(graph), chartOptions);
-                    break;
-                default:
-                    throw Error('Unknown segment graph type "' + graph.graphType + '"');
-            }
-
             return chart;
@@ -144,6 +128,3 @@ }
             element.appendChild(canvas);
-            var chart = this.renderGraphToCanvas(canvas, graph);
-            var legend = document.createElement('DIV');
-            element.appendChild(legend);
-            legend.innerHTML = chart.generateLegend();
+            this.renderGraphToCanvas(canvas, graph);
         }
@@ -158,6 +139,3 @@ }, {
             element.appendChild(canvas);
-            var chart = this.renderSegmentGraphToCanvas(canvas, graph);
-            var legend = document.createElement('DIV');
-            element.appendChild(legend);
-            legend.innerHTML = chart.generateLegend();
+            this.renderSegmentGraphToCanvas(canvas, graph);
         }
@@ -164,0 +142,0 @@ }]);

dist/js/utils/colors.js

@@ -6,40 +6,20 @@ 'use strict';
 });
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-var Colors = exports.Colors = function () {
-    function Colors() {
-        _classCallCheck(this, Colors);
+var hexToRgb = exports.hexToRgb = function hexToRgb(hex) {
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (!result) {
+        throw Error('"' + hex + '" is not a valid hex color');
     }
+    return {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    };
+};
 
-    _createClass(Colors, [{
-        key: 'hexToRgb',
-        value: function hexToRgb(hex) {
-            var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-            if (!result) {
-                throw Error('"' + hex + '" is not a valid hex color');
-            }
-            return {
-                r: parseInt(result[1], 16),
-                g: parseInt(result[2], 16),
-                b: parseInt(result[3], 16)
-            };
-        }
-    }, {
-        key: 'rgbToString',
-        value: function rgbToString(rgb) {
-            var alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+var rgbToString = exports.rgbToString = function rgbToString(rgb) {
+    var alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
 
-            return 'rgba(' + [rgb.r, rgb.g, rgb.b, alpha].join(',') + ')';
-        }
-    }, {
-        key: 'defaultScheme',
-        value: function defaultScheme() {
-            return ['#97bbcd', '#dcdcdc', '#F7464A', '#46BFBD', '#949FB1', '#FDB45C', '#4D5360', '#7cb5ec', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'];
-        }
-    }]);
+    return 'rgba(' + [rgb.r, rgb.g, rgb.b, alpha].join(',') + ')';
+};
 
-    return Colors;
-}();
+var defaultScheme = exports.defaultScheme = ['#97bbcd', '#dcdcdc', '#F7464A', '#46BFBD', '#949FB1', '#FDB45C', '#4D5360', '#7cb5ec', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'];

package.json

 {
   "name": "reportjs",
-  "version": "3.0.5",
+  "version": "3.1.0",
   "description": "Report Library",
@@ -38,4 +38,4 @@ "repository": {
   "dependencies": {
-    "chart.js": "^1.0.2"
+    "chart.js": "^2.3.0"
   }
 }

src/js/adapter/DOMGraphChartjsAdapter.js

 import Chart from 'chart.js';
-import {Colors} from '../utils/colors';
+import { hexToRgb, rgbToString, defaultScheme } from '../utils/colors';
 
@@ -20,47 +20,34 @@ function getHeight(element, height = 'auto') {
 
+function generateColors(colorScheme, index) {
+    let colorIndex = index % colorScheme.length,
+        rgbColor = hexToRgb(colorScheme[colorIndex]);
+
+    return {
+        backgroundColor: rgbToString(rgbColor, 0.2),
+        borderColor: rgbToString(rgbColor, 1),
+        pointBorderColor: rgbToString(rgbColor, 1),
+        pointBackgroundColor: rgbToString(rgbColor, 1),
+        pointHoverBackgroundColor: rgbToString(rgbColor, 0.1)
+    }
+}
+
 export class DOMGraphChartjsAdapter {
 
     renderGraphToCanvas(canvas, graph) {
-      let getChartData = function(graph) {
-                let index = 0,
-                    colors = new Colors(),
-                    colorScheme = colors.defaultScheme();
-                return {
-                    labels: graph.labels,
-                    datasets: graph.datasets.map(dataset => {
-                        let colorIndex = index % colorScheme.length,
-                            rgbColor = colors.hexToRgb(colorScheme[colorIndex]);
-                        dataset.fillColor = colors.rgbToString(rgbColor, 0.2);
-                        dataset.strokeColor = colors.rgbToString(rgbColor, 1);
-                        dataset.pointColor = colors.rgbToString(rgbColor, 1);
-                        dataset.pointStrokeColor = colors.rgbToString(rgbColor, 0.1);
-                        dataset.pointHighlightFill = colors.rgbToString(rgbColor, 0.1);
-                        dataset.pointHighlightStroke = colors.rgbToString(rgbColor, 1);
-                        index++;
-
-                        return dataset;
-                    })
-                };
+        const getChartData = function(graph) {
+            const colorScheme = defaultScheme;
+            return {
+                labels: graph.labels,
+                datasets: graph.datasets.map((dataset, index) => {
+                    return Object.assign(generateColors(colorScheme, index), dataset);
+                })
             };
+        };
 
-        let context = canvas.getContext('2d'),
-            chart = new Chart(context),
-            chartOptions = {
-              legendTemplate : '<ul class="chartjs-legend <%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span class="pill" style="background-color:<%=datasets[i].strokeColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
-            };
+        const context = canvas.getContext('2d'),
+            chart = new Chart(context, {
+                type: graph.graphType,
+                data: getChartData(graph)
+            });
 
-        switch (graph.graphType) {
-            case 'line':
-                chart = chart.Line(getChartData(graph), chartOptions);
-                break;
-            case 'bar':
-                chart = chart.Bar(getChartData(graph), chartOptions);
-                break;
-            case 'radar':
-                chart = chart.Radar(getChartData(graph), chartOptions);
-                break;
-            default:
-                throw Error('Unknown graph type "' + graph.graphType + '"');
-        }
-
         return chart;
@@ -70,37 +57,22 @@ }
     renderSegmentGraphToCanvas(canvas, graph) {
-      let getChartData = function(graph) {
-                let index = 0,
-                    colors = new Colors(),
-                    colorScheme = colors.defaultScheme();
-                return graph.labels.map(label => {
-                    let colorIndex = index % colorScheme.length,
-                        rgbColor = colors.hexToRgb(colorScheme[colorIndex]);
-                    label.color = colors.rgbToString(rgbColor, 0.8);
-                    label.highlight = colors.rgbToString(rgbColor, 1);
-                    index++;
-
-                    return label;
-                });
+        let getChartData = function(graph) {
+            const colorScheme = defaultScheme;
+            const colors = graph.labels.map((label, index) => generateColors(colorScheme, index));
+            return {
+                datasets: [{
+                    data: graph.labels.map(label => label.value),
+                    backgroundColor: colors.map(color => color.borderColor),
+                    hoverBorderColor: colors.map(color => color.borderColor),
+                    hoverBackgroundColor: colors.map(color => color.backgroundColor)
+                }],
+                labels: graph.labels.map(label => label.label)
             };
+        };
 
-        let context = canvas.getContext('2d'),
-            chart = new Chart(context),
-            chartOptions = {
-              legendTemplate : '<ul class="chartjs-legend <%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span class="pill" style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'
-            };
+        const context = canvas.getContext('2d'),
+            chart = new Chart(context, {
+                type: graph.graphType,
+                data: getChartData(graph)
+            });
 
-        switch (graph.graphType) {
-            case 'pie':
-                chart = chart.Pie(getChartData(graph), chartOptions);
-                break;
-            case 'polarArea':
-                chart = chart.PolarArea(getChartData(graph), chartOptions);
-                break;
-            case 'doughnut':
-                chart = chart.Doughnut(getChartData(graph), chartOptions);
-                break;
-            default:
-                throw Error('Unknown segment graph type "' + graph.graphType + '"');
-        }
-
         return chart;
@@ -115,6 +87,3 @@ }
         element.appendChild(canvas);
-        let chart = this.renderGraphToCanvas(canvas, graph);
-        let legend = document.createElement('DIV');
-        element.appendChild(legend);
-        legend.innerHTML = chart.generateLegend();
+        this.renderGraphToCanvas(canvas, graph);
     }
@@ -128,7 +97,4 @@
         element.appendChild(canvas);
-        let chart = this.renderSegmentGraphToCanvas(canvas, graph);
-        let legend = document.createElement('DIV');
-        element.appendChild(legend);
-        legend.innerHTML = chart.generateLegend();
+        this.renderSegmentGraphToCanvas(canvas, graph);
     }
 }

src/js/utils/colors.js

@@ -1,39 +0,34 @@
-export class Colors {
-
-    hexToRgb(hex) {
-        let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-        if (!result) {
-            throw Error('"' + hex + '" is not a valid hex color');
-        }
-        return {
-            r: parseInt(result[1], 16),
-            g: parseInt(result[2], 16),
-            b: parseInt(result[3], 16)
-        };
+export const hexToRgb = hex => {
+    let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (!result) {
+        throw Error('"' + hex + '" is not a valid hex color');
     }
+    return {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    };
+};
 
-    rgbToString(rgb, alpha = 1) {
-        return 'rgba(' + ([rgb.r, rgb.g, rgb.b, alpha].join(',')) +')';
-    }
+export const rgbToString = (rgb, alpha = 1) => {
+    return 'rgba(' + ([rgb.r, rgb.g, rgb.b, alpha].join(',')) +')';
+};
 
-    defaultScheme() {
-        return [
-            '#97bbcd',
-            '#dcdcdc',
-            '#F7464A',
-            '#46BFBD',
-            '#949FB1',
-            '#FDB45C',
-            '#4D5360',
-            '#7cb5ec',
-            '#90ed7d',
-            '#f7a35c',
-            '#8085e9',
-            '#f15c80',
-            '#e4d354',
-            '#8085e8',
-            '#8d4653',
-            '#91e8e1'
-        ];
-    }
-}
+export const defaultScheme = [
+    '#97bbcd',
+    '#dcdcdc',
+    '#F7464A',
+    '#46BFBD',
+    '#949FB1',
+    '#FDB45C',
+    '#4D5360',
+    '#7cb5ec',
+    '#90ed7d',
+    '#f7a35c',
+    '#8085e9',
+    '#f15c80',
+    '#e4d354',
+    '#8085e8',
+    '#8d4653',
+    '#91e8e1'
+];

src/css/legend.css

-.chartjs-legend li {
-  display: inline-block;
-  margin: 0 5px;
-}
-
-.chartjs-legend .pill {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 2px;
-  margin-right: 3px;
-}
-
-.chartjs-legend {
-  list-style: none;
-  text-align: center;
-}

No alert changes

Worsened metrics

Total package byte prevSize

87675

-5.55%

Number of package files

53

-1.85%

Lines of code

1701

-5.13%

Dependency changes

• + Added

  chart.js@2.9.4
  (transitive)

• + Added

  chartjs-color@2.4.1
  (transitive)

• + Added

  chartjs-color-string@0.6.0
  (transitive)

• + Added

  color-convert@1.9.3
  (transitive)

• + Added

  color-name@1.1.31.1.4
  (transitive)

• + Added

  moment@2.30.1
  (transitive)

• - Removed

  chart.js@1.1.1
  (transitive)

• Updated

  chart.js@^2.3.0