ngx-line-chart - npm Package Compare versions

Comparing version 0.0.1-rc.4 to 1.0.0-rc.0

chart-style.d.ts

@@ -8,4 +8,5 @@ import { IDataSetStyle } from './data-set-style';
             fontSize?: number;
+            angle: number;
         };
     };
 }

index.js

 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Input, NgModule } from '@angular/core';
+import { Component, Input, NgModule } from '@angular/core';
 import deepmerge from 'deepmerge';
@@ -17,3 +17,3 @@
         this.height = 500;
-        this.padding = 40;
+        this.padding = 100;
     }
@@ -140,6 +140,5 @@ /**
         { type: Component, args: [{
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'ngx-chart',
                     styles: [".graph svg { width: 100%; height: 100%; } .graph .labels { stroke: #AFAFB1; } .graph .grid { stroke: #AFAFB1; stroke-dasharray: 0; stroke-width: 1; } .graph .data { fill: transparent; } "],
-                    template: "<div class=\"chart\" xmlns:svg=\"http://www.w3.org/1999/XSL/Transform\"> <div class=\"graph\"> <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" [attr.viewBox]=\"'0 0 ' + width + ' ' + height\"> <svg:g class=\"grid y-grid\"> <svg:line [attr.x1]=\"padding\" [attr.x2]=\"width - padding\" [attr.y1]=\"height - padding\" [attr.y2]=\"height - padding\"></svg:line> </svg:g> <svg:g class=\"labels labels-x\"> <svg:line [attr.x1]=\"value.x\" [attr.x2]=\"value.x\" [attr.y1]=\"height - padding\" [attr.y2]=\"height - padding + 10\" *ngFor=\"let value of getXAxisValues()\"></svg:line> <svg:text [attr.y]=\"height - padding + 38\" [attr.x]=\"value.x - 12 - (3/4) * style.xAxis.labels.fontSize\" [attr.stroke]=\"style.xAxis.labels.color\" [attr.fill]=\"style.xAxis.labels.color\" [attr.font-size]=\"style.xAxis.labels.fontSize\" *ngFor=\"let value of getXAxisValues()\"> {{value.label}} </svg:text> </svg:g> <svg:g class=\"labels labels-y\"> <svg:text [attr.x]=\"padding - 30\" [attr.y]=\"value.y + 4\" [attr.stroke]=\"style.dataSetStyles[0].labels.yAxis.color\" [attr.fill]=\"style.dataSetStyles[0].labels.yAxis.color\" [attr.font-size]=\"style.dataSetStyles[0].labels.yAxis.fontSize\" *ngFor=\"let value of getYAxisValues(0)\">{{value.label}} </svg:text> <svg:line [attr.x1]=\"padding\" [attr.x2]=\"width - padding\" [attr.y1]=\"value.y\" [attr.y2]=\"value.y\" *ngFor=\"let value of getYAxisValues(0)\"></svg:line> </svg:g> <svg:g class=\"labels labels-y\"> <svg:text [attr.x]=\"width - padding + 10\" [attr.y]=\"value.y + 4\" [attr.stroke]=\"style.dataSetStyles[1].labels.yAxis.color\" [attr.fill]=\"style.dataSetStyles[1].labels.yAxis.color\" [attr.font-size]=\"style.dataSetStyles[1].labels.yAxis.fontSize\" *ngFor=\"let value of getYAxisValues(1)\">{{value.label}} </svg:text> </svg:g> <svg:g class=\"data\" [id]=\"'set-' + (i + 1)\" *ngFor=\"let set of dataSets; let i = index\"> <svg:circle [attr.cx]=\"point.x\" [attr.cy]=\"point.y\" [attr.data-value]=\"point.y\" [attr.stroke]=\"style.dataSetStyles[i].circle.color\" [attr.fill]=\"style.dataSetStyles[i].circle.color\" [attr.r]=\"style.dataSetStyles[i].circle.radius\" *ngFor=\"let point of getScaledPoints(set.points)\"></svg:circle> <svg:text [attr.y]=\"point.y - 14\" [attr.x]=\"point.x - 10\" [attr.stroke]=\"style.dataSetStyles[i].labels.value.color\" [attr.fill]=\"style.dataSetStyles[i].labels.value.color\" [attr.font-size]=\"style.dataSetStyles[i].labels.value.fontSize\" *ngFor=\"let point of getScaledPoints(set.points)\"> {{point.originalY}} </svg:text> <svg:path [attr.stroke-width]=\"style.dataSetStyles[i].line.width\" [attr.stroke]=\"style.dataSetStyles[i].line.color\" [attr.d]=\"pointsToPath(getScaledPoints(set.points))\"></svg:path> </svg:g> </svg> </div> </div> "
+                    template: "<div class=\"chart\" xmlns:svg=\"http://www.w3.org/1999/XSL/Transform\"> <div class=\"graph\"> <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" [attr.viewBox]=\"'0 0 ' + width + ' ' + height\"> <svg:g class=\"grid y-grid\"> <svg:line [attr.x1]=\"padding\" [attr.x2]=\"width - padding\" [attr.y1]=\"height - padding\" [attr.y2]=\"height - padding\"></svg:line> </svg:g> <svg:g class=\"labels labels-x\"> <svg:line [attr.x1]=\"value.x\" [attr.x2]=\"value.x\" [attr.y1]=\"height - padding\" [attr.y2]=\"height - padding + 10\" *ngFor=\"let value of getXAxisValues()\"></svg:line> <svg:text [attr.y]=\"height - padding + 30\" [attr.x]=\"value.x - 20\" [attr.stroke]=\"style.xAxis.labels.color\" [attr.fill]=\"style.xAxis.labels.color\" [attr.font-size]=\"style.xAxis.labels.fontSize\" [attr.transform]=\"'rotate(' + style.xAxis.labels.angle + ',' + (value.x - 20) + ',' + (height - padding + 30) + ')'\" *ngFor=\"let value of getXAxisValues()\"> {{value.label}} </svg:text> </svg:g> <svg:g class=\"labels labels-y\"> <svg:text [attr.x]=\"padding - 30\" [attr.y]=\"value.y + 4\" [attr.stroke]=\"style.dataSetStyles[0].labels.yAxis.color\" [attr.fill]=\"style.dataSetStyles[0].labels.yAxis.color\" [attr.font-size]=\"style.dataSetStyles[0].labels.yAxis.fontSize\" *ngFor=\"let value of getYAxisValues(0)\">{{value.label}} </svg:text> <svg:line [attr.x1]=\"padding\" [attr.x2]=\"width - padding\" [attr.y1]=\"value.y\" [attr.y2]=\"value.y\" *ngFor=\"let value of getYAxisValues(0)\"></svg:line> </svg:g> <svg:g class=\"labels labels-y\"> <svg:text [attr.x]=\"width - padding + 10\" [attr.y]=\"value.y + 4\" [attr.stroke]=\"style.dataSetStyles[1].labels.yAxis.color\" [attr.fill]=\"style.dataSetStyles[1].labels.yAxis.color\" [attr.font-size]=\"style.dataSetStyles[1].labels.yAxis.fontSize\" *ngFor=\"let value of getYAxisValues(1)\">{{value.label}} </svg:text> </svg:g> <svg:g class=\"data\" [id]=\"'set-' + (i + 1)\" *ngFor=\"let set of dataSets; let i = index\"> <svg:circle [attr.cx]=\"point.x\" [attr.cy]=\"point.y\" [attr.data-value]=\"point.y\" [attr.stroke]=\"style.dataSetStyles[i].circle.color\" [attr.fill]=\"style.dataSetStyles[i].circle.color\" [attr.r]=\"style.dataSetStyles[i].circle.radius\" *ngFor=\"let point of getScaledPoints(set.points)\"></svg:circle> <svg:text [attr.y]=\"point.y - 14\" [attr.x]=\"point.x - 10\" [attr.stroke]=\"style.dataSetStyles[i].labels.value.color\" [attr.fill]=\"style.dataSetStyles[i].labels.value.color\" [attr.font-size]=\"style.dataSetStyles[i].labels.value.fontSize\" *ngFor=\"let point of getScaledPoints(set.points)\"> {{point.originalY}} </svg:text> <svg:path [attr.stroke-width]=\"style.dataSetStyles[i].line.width\" [attr.stroke]=\"style.dataSetStyles[i].line.color\" [attr.d]=\"pointsToPath(getScaledPoints(set.points))\"></svg:path> </svg:g> </svg> </div> </div> "
                 },] },
@@ -171,7 +170,7 @@ ];
                     color: '#0051BA',
-                    fontSize: 18
+                    fontSize: 14
                 },
                 yAxis: {
                     color: '#0051BA',
-                    fontSize: 18
+                    fontSize: 14
                 }
@@ -192,7 +191,7 @@ },
                     color: '#1F1F21',
-                    fontSize: 18
+                    fontSize: 14
                 },
                 yAxis: {
                     color: '#575759',
-                    fontSize: 18
+                    fontSize: 14
                 }
@@ -209,3 +208,4 @@ },
             color: '#8C8C8E',
-            fontSize: 24
+            fontSize: 18,
+            angle: 60
         }
@@ -271,2 +271,26 @@ }
     LineChartComponent.prototype.ngOnInit = function () {
+        this.update();
+    };
+    /**
+     * @param {?} changes
+     * @return {?}
+     */
+    LineChartComponent.prototype.ngOnChanges = function (changes) {
+        var _this = this;
+        this.update();
+        this.dataSets.forEach(function (dataSet, index) {
+            var /** @type {?} */ dataSetProxy = new Proxy(dataSet, {
+                set: function (target, prop, value) {
+                    target[prop] = value;
+                    _this.update();
+                    return true;
+                }
+            });
+            _this.dataSets[index] = dataSetProxy;
+        });
+    };
+    /**
+     * @return {?}
+     */
+    LineChartComponent.prototype.update = function () {
         if (!this.dataSets || this.dataSets.length === 0) {
@@ -280,10 +304,13 @@ throw new Error('No data sets specified.');
         if (!this.xAxisValues) {
-            this.xAxisValues = LineChartComponent.getDefaultXAxis(this.dataSets);
+            this._xAxisValues = LineChartComponent.getDefaultXAxis(this.dataSets);
         }
         else if (typeof this.xAxisValues === 'number') {
             if (this.xAxisValues < 2) {
-                throw new Error('xAxisValues can\'t be less than 2 since min and max are required at least for x-axis.');
+                throw new Error('xAxisValue can\'t be less than 2 since min and max are required at least for x-axis.');
             }
-            this.xAxisValues = LineChartComponent.divideXAxisToN(this.xAxisValues, this.dataSets);
+            this._xAxisValues = LineChartComponent.divideXAxisToN(this.xAxisValues, this.dataSets);
         }
+        else {
+            this._xAxisValues = this.xAxisValues.slice();
+        }
         this.applyDefaultStyle();
@@ -301,3 +328,3 @@ };
                     styles: [".labels { text-align: center; } .labels .set { display: inline-block; margin-right: 10px; } .labels .set .color-indicator { display: inline-block; } .labels .set .name { vertical-align: text-bottom; } "],
-                    template: "<div class=\"chart-container\"> <ngx-chart [dataSets]=\"dataSets\" [xAxisValues]=\"xAxisValues\" [xLabelFunction]=\"xLabelFunction\" [yLabelFunction]=\"yLabelFunction\" [style]=\"style\"></ngx-chart> <div class=\"labels\"> <div class=\"set\" *ngFor=\"let dataSet of dataSets; let i = index\"> <svg width=\"34\" height=\"16\" viewBox=\"0 0 120 120\" class=\"color-indicator\" xmlns=\"http://www.w3.org/2000/svg\"> <svg:rect x=\"0\" y=\"30\" width=\"120\" height=\"60\" rx=\"16\" ry=\"16\" [attr.fill]=\"style.dataSetStyles[i].circle.color\"/> </svg> <span class=\"name\" [innerHTML]=\"dataSet.name\"></span> </div> </div> </div> "
+                    template: "<div class=\"chart-container\"> <ngx-chart [dataSets]=\"dataSets\" [xAxisValues]=\"_xAxisValues\" [xLabelFunction]=\"xLabelFunction\" [yLabelFunction]=\"yLabelFunction\" [style]=\"style\"></ngx-chart> <div class=\"labels\"> <div class=\"set\" *ngFor=\"let dataSet of dataSets; let i = index\"> <svg width=\"34\" height=\"16\" viewBox=\"0 0 120 120\" class=\"color-indicator\" xmlns=\"http://www.w3.org/2000/svg\"> <svg:rect x=\"0\" y=\"30\" width=\"120\" height=\"60\" rx=\"16\" ry=\"16\" [attr.fill]=\"style.dataSetStyles[i].circle.color\"/> </svg> <span class=\"name\" [innerHTML]=\"dataSet.name\"></span> </div> </div> </div> "
                 },] },
@@ -304,0 +331,0 @@ ];

line-chart/line-chart.component.d.ts

@@ -1,8 +0,9 @@
-import { OnInit } from '@angular/core';
+import { OnChanges, OnInit } from '@angular/core';
 import { IChartStyle } from '../chart-style';
 import { IDataSet } from '../data-set';
-export declare class LineChartComponent implements OnInit {
+export declare class LineChartComponent implements OnInit, OnChanges {
     xAxisValues: number[] | number;
     dataSets: IDataSet[];
     style: IChartStyle;
+    private _xAxisValues;
     private static getDefaultXAxis(dataSets);
@@ -14,3 +15,5 @@ private static ensureDataSetsHaveSameXValues(dataSets);
     ngOnInit(): void;
+    ngOnChanges(changes: any): void;
+    private update();
     private applyDefaultStyle();
 }

ngx-line-chart.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":3,"metadata":{"NgxLineChartModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ChartComponent"},{"__symbolic":"reference","name":"LineChartComponent"}],"exports":[{"__symbolic":"reference","name":"LineChartComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}]}]}],"members":{}},"ChartComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"selector":"ngx-chart","styles":[".graph svg { width: 100%; height: 100%; } .graph .labels { stroke: #AFAFB1; } .graph .grid { stroke: #AFAFB1; stroke-dasharray: 0; stroke-width: 1; } .graph .data { fill: transparent; } "],"template":"<div class=\"chart\" xmlns:svg=\"http://www.w3.org/1999/XSL/Transform\"> <div class=\"graph\"> <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" [attr.viewBox]=\"'0 0 ' + width + ' ' + height\"> <svg:g class=\"grid y-grid\"> <svg:line [attr.x1]=\"padding\" [attr.x2]=\"width - padding\" [attr.y1]=\"height - padding\" [attr.y2]=\"height - padding\"></svg:line> </svg:g> <svg:g class=\"labels labels-x\"> <svg:line [attr.x1]=\"value.x\" [attr.x2]=\"value.x\" [attr.y1]=\"height - padding\" [attr.y2]=\"height - padding + 10\" *ngFor=\"let value of getXAxisValues()\"></svg:line> <svg:text [attr.y]=\"height - padding + 38\" [attr.x]=\"value.x - 12 - (3/4) * style.xAxis.labels.fontSize\" [attr.stroke]=\"style.xAxis.labels.color\" [attr.fill]=\"style.xAxis.labels.color\" [attr.font-size]=\"style.xAxis.labels.fontSize\" *ngFor=\"let value of getXAxisValues()\"> {{value.label}} </svg:text> </svg:g> <svg:g class=\"labels labels-y\"> <svg:text [attr.x]=\"padding - 30\" [attr.y]=\"value.y + 4\" [attr.stroke]=\"style.dataSetStyles[0].labels.yAxis.color\" [attr.fill]=\"style.dataSetStyles[0].labels.yAxis.color\" [attr.font-size]=\"style.dataSetStyles[0].labels.yAxis.fontSize\" *ngFor=\"let value of getYAxisValues(0)\">{{value.label}} </svg:text> <svg:line [attr.x1]=\"padding\" [attr.x2]=\"width - padding\" [attr.y1]=\"value.y\" [attr.y2]=\"value.y\" *ngFor=\"let value of getYAxisValues(0)\"></svg:line> </svg:g> <svg:g class=\"labels labels-y\"> <svg:text [attr.x]=\"width - padding + 10\" [attr.y]=\"value.y + 4\" [attr.stroke]=\"style.dataSetStyles[1].labels.yAxis.color\" [attr.fill]=\"style.dataSetStyles[1].labels.yAxis.color\" [attr.font-size]=\"style.dataSetStyles[1].labels.yAxis.fontSize\" *ngFor=\"let value of getYAxisValues(1)\">{{value.label}} </svg:text> </svg:g> <svg:g class=\"data\" [id]=\"'set-' + (i + 1)\" *ngFor=\"let set of dataSets; let i = index\"> <svg:circle [attr.cx]=\"point.x\" [attr.cy]=\"point.y\" [attr.data-value]=\"point.y\" [attr.stroke]=\"style.dataSetStyles[i].circle.color\" [attr.fill]=\"style.dataSetStyles[i].circle.color\" [attr.r]=\"style.dataSetStyles[i].circle.radius\" *ngFor=\"let point of getScaledPoints(set.points)\"></svg:circle> <svg:text [attr.y]=\"point.y - 14\" [attr.x]=\"point.x - 10\" [attr.stroke]=\"style.dataSetStyles[i].labels.value.color\" [attr.fill]=\"style.dataSetStyles[i].labels.value.color\" [attr.font-size]=\"style.dataSetStyles[i].labels.value.fontSize\" *ngFor=\"let point of getScaledPoints(set.points)\"> {{point.originalY}} </svg:text> <svg:path [attr.stroke-width]=\"style.dataSetStyles[i].line.width\" [attr.stroke]=\"style.dataSetStyles[i].line.color\" [attr.d]=\"pointsToPath(getScaledPoints(set.points))\"></svg:path> </svg:g> </svg> </div> </div> "}]}],"members":{"dataSets":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"xAxisValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"xLabelFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"yLabelFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"getYAxisValues":[{"__symbolic":"method"}],"getXAxisValues":[{"__symbolic":"method"}],"pointsToPath":[{"__symbolic":"method"}],"getScaledPoints":[{"__symbolic":"method"}],"getXLabel":[{"__symbolic":"method"}],"getYLabel":[{"__symbolic":"method"}]}},"LineChartComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-line-chart","styles":[".labels { text-align: center; } .labels .set { display: inline-block; margin-right: 10px; } .labels .set .color-indicator { display: inline-block; } .labels .set .name { vertical-align: text-bottom; } "],"template":"<div class=\"chart-container\"> <ngx-chart [dataSets]=\"dataSets\" [xAxisValues]=\"xAxisValues\" [xLabelFunction]=\"xLabelFunction\" [yLabelFunction]=\"yLabelFunction\" [style]=\"style\"></ngx-chart> <div class=\"labels\"> <div class=\"set\" *ngFor=\"let dataSet of dataSets; let i = index\"> <svg width=\"34\" height=\"16\" viewBox=\"0 0 120 120\" class=\"color-indicator\" xmlns=\"http://www.w3.org/2000/svg\"> <svg:rect x=\"0\" y=\"30\" width=\"120\" height=\"60\" rx=\"16\" ry=\"16\" [attr.fill]=\"style.dataSetStyles[i].circle.color\"/> </svg> <span class=\"name\" [innerHTML]=\"dataSet.name\"></span> </div> </div> </div> "}]}],"members":{"xAxisValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dataSets":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"xLabelFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"yLabelFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ngOnInit":[{"__symbolic":"method"}],"applyDefaultStyle":[{"__symbolic":"method"}]},"statics":{"getDefaultXAxis":{"__symbolic":"function","parameters":["dataSets"],"value":{"__symbolic":"error","message":"Function call not supported","line":22,"character":34,"module":"./line-chart/line-chart.component"}}}}},"origins":{"NgxLineChartModule":"./ngx-line-chart.module","ChartComponent":"./chart/chart.component","LineChartComponent":"./line-chart/line-chart.component"},"importAs":"ngx-line-chart"}
+{"__symbolic":"module","version":3,"metadata":{"NgxLineChartModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ChartComponent"},{"__symbolic":"reference","name":"LineChartComponent"}],"exports":[{"__symbolic":"reference","name":"LineChartComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}]}]}],"members":{}},"ChartComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-chart","styles":[".graph svg { width: 100%; height: 100%; } .graph .labels { stroke: #AFAFB1; } .graph .grid { stroke: #AFAFB1; stroke-dasharray: 0; stroke-width: 1; } .graph .data { fill: transparent; } "],"template":"<div class=\"chart\" xmlns:svg=\"http://www.w3.org/1999/XSL/Transform\"> <div class=\"graph\"> <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" [attr.viewBox]=\"'0 0 ' + width + ' ' + height\"> <svg:g class=\"grid y-grid\"> <svg:line [attr.x1]=\"padding\" [attr.x2]=\"width - padding\" [attr.y1]=\"height - padding\" [attr.y2]=\"height - padding\"></svg:line> </svg:g> <svg:g class=\"labels labels-x\"> <svg:line [attr.x1]=\"value.x\" [attr.x2]=\"value.x\" [attr.y1]=\"height - padding\" [attr.y2]=\"height - padding + 10\" *ngFor=\"let value of getXAxisValues()\"></svg:line> <svg:text [attr.y]=\"height - padding + 30\" [attr.x]=\"value.x - 20\" [attr.stroke]=\"style.xAxis.labels.color\" [attr.fill]=\"style.xAxis.labels.color\" [attr.font-size]=\"style.xAxis.labels.fontSize\" [attr.transform]=\"'rotate(' + style.xAxis.labels.angle + ',' + (value.x - 20) + ',' + (height - padding + 30) + ')'\" *ngFor=\"let value of getXAxisValues()\"> {{value.label}} </svg:text> </svg:g> <svg:g class=\"labels labels-y\"> <svg:text [attr.x]=\"padding - 30\" [attr.y]=\"value.y + 4\" [attr.stroke]=\"style.dataSetStyles[0].labels.yAxis.color\" [attr.fill]=\"style.dataSetStyles[0].labels.yAxis.color\" [attr.font-size]=\"style.dataSetStyles[0].labels.yAxis.fontSize\" *ngFor=\"let value of getYAxisValues(0)\">{{value.label}} </svg:text> <svg:line [attr.x1]=\"padding\" [attr.x2]=\"width - padding\" [attr.y1]=\"value.y\" [attr.y2]=\"value.y\" *ngFor=\"let value of getYAxisValues(0)\"></svg:line> </svg:g> <svg:g class=\"labels labels-y\"> <svg:text [attr.x]=\"width - padding + 10\" [attr.y]=\"value.y + 4\" [attr.stroke]=\"style.dataSetStyles[1].labels.yAxis.color\" [attr.fill]=\"style.dataSetStyles[1].labels.yAxis.color\" [attr.font-size]=\"style.dataSetStyles[1].labels.yAxis.fontSize\" *ngFor=\"let value of getYAxisValues(1)\">{{value.label}} </svg:text> </svg:g> <svg:g class=\"data\" [id]=\"'set-' + (i + 1)\" *ngFor=\"let set of dataSets; let i = index\"> <svg:circle [attr.cx]=\"point.x\" [attr.cy]=\"point.y\" [attr.data-value]=\"point.y\" [attr.stroke]=\"style.dataSetStyles[i].circle.color\" [attr.fill]=\"style.dataSetStyles[i].circle.color\" [attr.r]=\"style.dataSetStyles[i].circle.radius\" *ngFor=\"let point of getScaledPoints(set.points)\"></svg:circle> <svg:text [attr.y]=\"point.y - 14\" [attr.x]=\"point.x - 10\" [attr.stroke]=\"style.dataSetStyles[i].labels.value.color\" [attr.fill]=\"style.dataSetStyles[i].labels.value.color\" [attr.font-size]=\"style.dataSetStyles[i].labels.value.fontSize\" *ngFor=\"let point of getScaledPoints(set.points)\"> {{point.originalY}} </svg:text> <svg:path [attr.stroke-width]=\"style.dataSetStyles[i].line.width\" [attr.stroke]=\"style.dataSetStyles[i].line.color\" [attr.d]=\"pointsToPath(getScaledPoints(set.points))\"></svg:path> </svg:g> </svg> </div> </div> "}]}],"members":{"dataSets":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"xAxisValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"xLabelFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"yLabelFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"getYAxisValues":[{"__symbolic":"method"}],"getXAxisValues":[{"__symbolic":"method"}],"pointsToPath":[{"__symbolic":"method"}],"getScaledPoints":[{"__symbolic":"method"}],"getXLabel":[{"__symbolic":"method"}],"getYLabel":[{"__symbolic":"method"}]}},"LineChartComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-line-chart","styles":[".labels { text-align: center; } .labels .set { display: inline-block; margin-right: 10px; } .labels .set .color-indicator { display: inline-block; } .labels .set .name { vertical-align: text-bottom; } "],"template":"<div class=\"chart-container\"> <ngx-chart [dataSets]=\"dataSets\" [xAxisValues]=\"_xAxisValues\" [xLabelFunction]=\"xLabelFunction\" [yLabelFunction]=\"yLabelFunction\" [style]=\"style\"></ngx-chart> <div class=\"labels\"> <div class=\"set\" *ngFor=\"let dataSet of dataSets; let i = index\"> <svg width=\"34\" height=\"16\" viewBox=\"0 0 120 120\" class=\"color-indicator\" xmlns=\"http://www.w3.org/2000/svg\"> <svg:rect x=\"0\" y=\"30\" width=\"120\" height=\"60\" rx=\"16\" ry=\"16\" [attr.fill]=\"style.dataSetStyles[i].circle.color\"/> </svg> <span class=\"name\" [innerHTML]=\"dataSet.name\"></span> </div> </div> </div> "}]}],"members":{"xAxisValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dataSets":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"xLabelFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"yLabelFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"update":[{"__symbolic":"method"}],"applyDefaultStyle":[{"__symbolic":"method"}]},"statics":{"getDefaultXAxis":{"__symbolic":"function","parameters":["dataSets"],"value":{"__symbolic":"error","message":"Function call not supported","line":24,"character":34,"module":"./line-chart/line-chart.component"}}}}},"origins":{"NgxLineChartModule":"./ngx-line-chart.module","ChartComponent":"./chart/chart.component","LineChartComponent":"./line-chart/line-chart.component"},"importAs":"ngx-line-chart"}

ngx-line-chart.umd.js

@@ -21,3 +21,3 @@ (function (global, factory) {
         this.height = 500;
-        this.padding = 40;
+        this.padding = 100;
     }
@@ -144,6 +144,5 @@ /**
         { type: _angular_core.Component, args: [{
-                    changeDetection: _angular_core.ChangeDetectionStrategy.OnPush,
                     selector: 'ngx-chart',
                     styles: [".graph svg { width: 100%; height: 100%; } .graph .labels { stroke: #AFAFB1; } .graph .grid { stroke: #AFAFB1; stroke-dasharray: 0; stroke-width: 1; } .graph .data { fill: transparent; } "],
-                    template: "<div class=\"chart\" xmlns:svg=\"http://www.w3.org/1999/XSL/Transform\"> <div class=\"graph\"> <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" [attr.viewBox]=\"'0 0 ' + width + ' ' + height\"> <svg:g class=\"grid y-grid\"> <svg:line [attr.x1]=\"padding\" [attr.x2]=\"width - padding\" [attr.y1]=\"height - padding\" [attr.y2]=\"height - padding\"></svg:line> </svg:g> <svg:g class=\"labels labels-x\"> <svg:line [attr.x1]=\"value.x\" [attr.x2]=\"value.x\" [attr.y1]=\"height - padding\" [attr.y2]=\"height - padding + 10\" *ngFor=\"let value of getXAxisValues()\"></svg:line> <svg:text [attr.y]=\"height - padding + 38\" [attr.x]=\"value.x - 12 - (3/4) * style.xAxis.labels.fontSize\" [attr.stroke]=\"style.xAxis.labels.color\" [attr.fill]=\"style.xAxis.labels.color\" [attr.font-size]=\"style.xAxis.labels.fontSize\" *ngFor=\"let value of getXAxisValues()\"> {{value.label}} </svg:text> </svg:g> <svg:g class=\"labels labels-y\"> <svg:text [attr.x]=\"padding - 30\" [attr.y]=\"value.y + 4\" [attr.stroke]=\"style.dataSetStyles[0].labels.yAxis.color\" [attr.fill]=\"style.dataSetStyles[0].labels.yAxis.color\" [attr.font-size]=\"style.dataSetStyles[0].labels.yAxis.fontSize\" *ngFor=\"let value of getYAxisValues(0)\">{{value.label}} </svg:text> <svg:line [attr.x1]=\"padding\" [attr.x2]=\"width - padding\" [attr.y1]=\"value.y\" [attr.y2]=\"value.y\" *ngFor=\"let value of getYAxisValues(0)\"></svg:line> </svg:g> <svg:g class=\"labels labels-y\"> <svg:text [attr.x]=\"width - padding + 10\" [attr.y]=\"value.y + 4\" [attr.stroke]=\"style.dataSetStyles[1].labels.yAxis.color\" [attr.fill]=\"style.dataSetStyles[1].labels.yAxis.color\" [attr.font-size]=\"style.dataSetStyles[1].labels.yAxis.fontSize\" *ngFor=\"let value of getYAxisValues(1)\">{{value.label}} </svg:text> </svg:g> <svg:g class=\"data\" [id]=\"'set-' + (i + 1)\" *ngFor=\"let set of dataSets; let i = index\"> <svg:circle [attr.cx]=\"point.x\" [attr.cy]=\"point.y\" [attr.data-value]=\"point.y\" [attr.stroke]=\"style.dataSetStyles[i].circle.color\" [attr.fill]=\"style.dataSetStyles[i].circle.color\" [attr.r]=\"style.dataSetStyles[i].circle.radius\" *ngFor=\"let point of getScaledPoints(set.points)\"></svg:circle> <svg:text [attr.y]=\"point.y - 14\" [attr.x]=\"point.x - 10\" [attr.stroke]=\"style.dataSetStyles[i].labels.value.color\" [attr.fill]=\"style.dataSetStyles[i].labels.value.color\" [attr.font-size]=\"style.dataSetStyles[i].labels.value.fontSize\" *ngFor=\"let point of getScaledPoints(set.points)\"> {{point.originalY}} </svg:text> <svg:path [attr.stroke-width]=\"style.dataSetStyles[i].line.width\" [attr.stroke]=\"style.dataSetStyles[i].line.color\" [attr.d]=\"pointsToPath(getScaledPoints(set.points))\"></svg:path> </svg:g> </svg> </div> </div> "
+                    template: "<div class=\"chart\" xmlns:svg=\"http://www.w3.org/1999/XSL/Transform\"> <div class=\"graph\"> <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" [attr.viewBox]=\"'0 0 ' + width + ' ' + height\"> <svg:g class=\"grid y-grid\"> <svg:line [attr.x1]=\"padding\" [attr.x2]=\"width - padding\" [attr.y1]=\"height - padding\" [attr.y2]=\"height - padding\"></svg:line> </svg:g> <svg:g class=\"labels labels-x\"> <svg:line [attr.x1]=\"value.x\" [attr.x2]=\"value.x\" [attr.y1]=\"height - padding\" [attr.y2]=\"height - padding + 10\" *ngFor=\"let value of getXAxisValues()\"></svg:line> <svg:text [attr.y]=\"height - padding + 30\" [attr.x]=\"value.x - 20\" [attr.stroke]=\"style.xAxis.labels.color\" [attr.fill]=\"style.xAxis.labels.color\" [attr.font-size]=\"style.xAxis.labels.fontSize\" [attr.transform]=\"'rotate(' + style.xAxis.labels.angle + ',' + (value.x - 20) + ',' + (height - padding + 30) + ')'\" *ngFor=\"let value of getXAxisValues()\"> {{value.label}} </svg:text> </svg:g> <svg:g class=\"labels labels-y\"> <svg:text [attr.x]=\"padding - 30\" [attr.y]=\"value.y + 4\" [attr.stroke]=\"style.dataSetStyles[0].labels.yAxis.color\" [attr.fill]=\"style.dataSetStyles[0].labels.yAxis.color\" [attr.font-size]=\"style.dataSetStyles[0].labels.yAxis.fontSize\" *ngFor=\"let value of getYAxisValues(0)\">{{value.label}} </svg:text> <svg:line [attr.x1]=\"padding\" [attr.x2]=\"width - padding\" [attr.y1]=\"value.y\" [attr.y2]=\"value.y\" *ngFor=\"let value of getYAxisValues(0)\"></svg:line> </svg:g> <svg:g class=\"labels labels-y\"> <svg:text [attr.x]=\"width - padding + 10\" [attr.y]=\"value.y + 4\" [attr.stroke]=\"style.dataSetStyles[1].labels.yAxis.color\" [attr.fill]=\"style.dataSetStyles[1].labels.yAxis.color\" [attr.font-size]=\"style.dataSetStyles[1].labels.yAxis.fontSize\" *ngFor=\"let value of getYAxisValues(1)\">{{value.label}} </svg:text> </svg:g> <svg:g class=\"data\" [id]=\"'set-' + (i + 1)\" *ngFor=\"let set of dataSets; let i = index\"> <svg:circle [attr.cx]=\"point.x\" [attr.cy]=\"point.y\" [attr.data-value]=\"point.y\" [attr.stroke]=\"style.dataSetStyles[i].circle.color\" [attr.fill]=\"style.dataSetStyles[i].circle.color\" [attr.r]=\"style.dataSetStyles[i].circle.radius\" *ngFor=\"let point of getScaledPoints(set.points)\"></svg:circle> <svg:text [attr.y]=\"point.y - 14\" [attr.x]=\"point.x - 10\" [attr.stroke]=\"style.dataSetStyles[i].labels.value.color\" [attr.fill]=\"style.dataSetStyles[i].labels.value.color\" [attr.font-size]=\"style.dataSetStyles[i].labels.value.fontSize\" *ngFor=\"let point of getScaledPoints(set.points)\"> {{point.originalY}} </svg:text> <svg:path [attr.stroke-width]=\"style.dataSetStyles[i].line.width\" [attr.stroke]=\"style.dataSetStyles[i].line.color\" [attr.d]=\"pointsToPath(getScaledPoints(set.points))\"></svg:path> </svg:g> </svg> </div> </div> "
                 },] },
@@ -175,7 +174,7 @@ ];
                     color: '#0051BA',
-                    fontSize: 18
+                    fontSize: 14
                 },
                 yAxis: {
                     color: '#0051BA',
-                    fontSize: 18
+                    fontSize: 14
                 }
@@ -196,7 +195,7 @@ },
                     color: '#1F1F21',
-                    fontSize: 18
+                    fontSize: 14
                 },
                 yAxis: {
                     color: '#575759',
-                    fontSize: 18
+                    fontSize: 14
                 }
@@ -213,3 +212,4 @@ },
             color: '#8C8C8E',
-            fontSize: 24
+            fontSize: 18,
+            angle: 60
         }
@@ -275,2 +275,26 @@ }
     LineChartComponent.prototype.ngOnInit = function () {
+        this.update();
+    };
+    /**
+     * @param {?} changes
+     * @return {?}
+     */
+    LineChartComponent.prototype.ngOnChanges = function (changes) {
+        var _this = this;
+        this.update();
+        this.dataSets.forEach(function (dataSet, index) {
+            var /** @type {?} */ dataSetProxy = new Proxy(dataSet, {
+                set: function (target, prop, value) {
+                    target[prop] = value;
+                    _this.update();
+                    return true;
+                }
+            });
+            _this.dataSets[index] = dataSetProxy;
+        });
+    };
+    /**
+     * @return {?}
+     */
+    LineChartComponent.prototype.update = function () {
         if (!this.dataSets || this.dataSets.length === 0) {
@@ -284,10 +308,13 @@ throw new Error('No data sets specified.');
         if (!this.xAxisValues) {
-            this.xAxisValues = LineChartComponent.getDefaultXAxis(this.dataSets);
+            this._xAxisValues = LineChartComponent.getDefaultXAxis(this.dataSets);
         }
         else if (typeof this.xAxisValues === 'number') {
             if (this.xAxisValues < 2) {
-                throw new Error('xAxisValues can\'t be less than 2 since min and max are required at least for x-axis.');
+                throw new Error('xAxisValue can\'t be less than 2 since min and max are required at least for x-axis.');
             }
-            this.xAxisValues = LineChartComponent.divideXAxisToN(this.xAxisValues, this.dataSets);
+            this._xAxisValues = LineChartComponent.divideXAxisToN(this.xAxisValues, this.dataSets);
         }
+        else {
+            this._xAxisValues = this.xAxisValues.slice();
+        }
         this.applyDefaultStyle();
@@ -305,3 +332,3 @@ };
                     styles: [".labels { text-align: center; } .labels .set { display: inline-block; margin-right: 10px; } .labels .set .color-indicator { display: inline-block; } .labels .set .name { vertical-align: text-bottom; } "],
-                    template: "<div class=\"chart-container\"> <ngx-chart [dataSets]=\"dataSets\" [xAxisValues]=\"xAxisValues\" [xLabelFunction]=\"xLabelFunction\" [yLabelFunction]=\"yLabelFunction\" [style]=\"style\"></ngx-chart> <div class=\"labels\"> <div class=\"set\" *ngFor=\"let dataSet of dataSets; let i = index\"> <svg width=\"34\" height=\"16\" viewBox=\"0 0 120 120\" class=\"color-indicator\" xmlns=\"http://www.w3.org/2000/svg\"> <svg:rect x=\"0\" y=\"30\" width=\"120\" height=\"60\" rx=\"16\" ry=\"16\" [attr.fill]=\"style.dataSetStyles[i].circle.color\"/> </svg> <span class=\"name\" [innerHTML]=\"dataSet.name\"></span> </div> </div> </div> "
+                    template: "<div class=\"chart-container\"> <ngx-chart [dataSets]=\"dataSets\" [xAxisValues]=\"_xAxisValues\" [xLabelFunction]=\"xLabelFunction\" [yLabelFunction]=\"yLabelFunction\" [style]=\"style\"></ngx-chart> <div class=\"labels\"> <div class=\"set\" *ngFor=\"let dataSet of dataSets; let i = index\"> <svg width=\"34\" height=\"16\" viewBox=\"0 0 120 120\" class=\"color-indicator\" xmlns=\"http://www.w3.org/2000/svg\"> <svg:rect x=\"0\" y=\"30\" width=\"120\" height=\"60\" rx=\"16\" ry=\"16\" [attr.fill]=\"style.dataSetStyles[i].circle.color\"/> </svg> <span class=\"name\" [innerHTML]=\"dataSet.name\"></span> </div> </div> </div> "
                 },] },
@@ -308,0 +335,0 @@ ];

package.json

 {
   "name": "ngx-line-chart",
-  "version": "0.0.1-rc.4",
+  "version": "1.0.0-rc.0",
   "repository": {
@@ -5,0 +5,0 @@ "type": "git",

README.MD

@@ -108,50 +108,51 @@ # ngx-line-chart
 export const defaultStyle: IChartStyle = {
-    dataSetStyles: [
-        {
-            circle: {
-                color: '#0051BA',
-                radius: 4
-            },
-            labels: {
-                value: {
-                    color: '#0051BA',
-                    fontSize: 18
-                },
-                yAxis: {
-                    color: '#0051BA',
-                    fontSize: 18
-                }
-            },
-            line: {
-                color: 'rgba(0, 81, 186, 0.4)',
-                width: 5
-            }
+  dataSetStyles: [
+    {
+      circle: {
+        color: '#0051BA',
+        radius: 4
+      },
+      labels: {
+        value: {
+          color: '#0051BA',
+          fontSize: 18
         },
-        {
-            circle: {
-                color: '#1F1F21',
-                radius: 4
-            },
-            labels: {
-                value: {
-                    color: '#1F1F21',
-                    fontSize: 18
-                },
-                yAxis: {
-                    color: '#575759',
-                    fontSize: 18
-                }
-            },
-            line: {
-                color: 'rgba(87, 87, 89, 0.4)',
-                width: 5
-            }
+        yAxis: {
+          color: '#0051BA',
+          fontSize: 18
         }
-    ],
-    xAxis: {
-        labels: {
-            color: '#8C8C8E',
-            fontSize: 24
+      },
+      line: {
+        color: 'rgba(0, 81, 186, 0.4)',
+        width: 5
+      }
+    },
+    {
+      circle: {
+        color: '#1F1F21',
+        radius: 4
+      },
+      labels: {
+        value: {
+          color: '#1F1F21',
+          fontSize: 18
+        },
+        yAxis: {
+          color: '#575759',
+          fontSize: 18
         }
+      },
+      line: {
+        color: 'rgba(87, 87, 89, 0.4)',
+        width: 5
+      }
     }
+  ],
+  xAxis: {
+    labels: {
+      color: '#8C8C8E',
+      fontSize: 24,
+      angle: 60
+    }
+  }
 };
@@ -158,0 +159,0 @@ ```

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53209

increased by2.85%

Lines of code

847

increased by7.35%

Number of lines in readme file

229

increased by0.44%

No dependency changes