ngx-line-chart - npm Package Compare versions

Comparing version 0.0.1-beta.5 to 0.0.1-beta.6

chart-style.d.ts

 import { IDataSetStyle } from './data-set-style';
 export interface IChartStyle {
-    dataSetStyles: IDataSetStyle[];
+    dataSetStyles?: IDataSetStyle[];
+    xAxis?: {
+        labels?: {
+            color?: string;
+            fontSize?: number;
+        };
+    };
 }

data-set-style.d.ts

 export interface IDataSetStyle {
-    circle: {
-        color: string;
-        radius: number;
+    circle?: {
+        color?: string;
+        radius?: number;
     };
-    line: {
-        color: string;
-        width: number;
-    };
-    labels: {
-        yAxis: {
-            color: string;
+    labels?: {
+        value?: {
+            color?: string;
+            fontSize?: number;
         };
-        value: {
-            color: string;
+        yAxis?: {
+            color?: string;
+            fontSize?: number;
         };
     };
+    line?: {
+        color?: string;
+        width?: number;
+    };
 }

index.js

@@ -5,2 +5,53 @@ import { CommonModule } from '@angular/common';
 
+var defaultStyle = {
+    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
+            }
+        },
+        {
+            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: 'rgb(74, 74, 74)',
+            fontSize: 24
+        }
+    }
+};
+
 var LineChartComponent = (function () {
@@ -102,46 +153,6 @@ function LineChartComponent() {
     LineChartComponent.prototype.applyDefaultStyle = function () {
-        this.style = deepmerge(this.style || {}, LineChartComponent.DEFAULT_STYLE);
+        this.style = deepmerge(this.style || {}, defaultStyle);
     };
     return LineChartComponent;
 }());
-LineChartComponent.DEFAULT_STYLE = {
-    dataSetStyles: [
-        {
-            circle: {
-                color: '#0051BA',
-                radius: 4
-            },
-            labels: {
-                value: {
-                    color: '#0051BA'
-                },
-                yAxis: {
-                    color: '#0051BA'
-                }
-            },
-            line: {
-                color: 'rgba(0, 81, 186, 0.4)',
-                width: 5
-            }
-        },
-        {
-            circle: {
-                color: '#1F1F21',
-                radius: 4
-            },
-            labels: {
-                value: {
-                    color: '#1F1F21'
-                },
-                yAxis: {
-                    color: '#575759'
-                }
-            },
-            line: {
-                color: 'rgba(87, 87, 89, 0.4)',
-                width: 5
-            }
-        }
-    ]
-};
 LineChartComponent.decorators = [
@@ -298,3 +309,3 @@ { type: Component, args: [{
                 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 + 20\" [attr.x]=\"value.x - 12\" *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\" *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\" *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.font-size]=\"18\" *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 + 28\" [attr.x]=\"value.x - 12 - (3/4) * style.xAxis.labels.fontSize\" [attr.stroke]=\"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.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.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.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> "
             },] },
@@ -301,0 +312,0 @@ ];

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

@@ -6,3 +6,2 @@ import { OnInit } from '@angular/core';
 export declare class LineChartComponent implements OnInit {
-    private static DEFAULT_STYLE;
     axes: IAxis[];
@@ -9,0 +8,0 @@ dataSets: IDataSet[];

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":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"exports":[{"__symbolic":"reference","name":"ɵb"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}]}]}],"members":{}},"ɵa":{"__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 + 20\" [attr.x]=\"value.x - 12\" *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\" *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\" *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.font-size]=\"18\" *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"}}]}],"axes":[{"__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"}]}},"ɵb":{"__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\" [axes]=\"axes\" [xLabelFunction]=\"xLabelFunction\" [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":{"axes":[{"__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"}}]}],"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"}}]}],"ngOnInit":[{"__symbolic":"method"}],"applyDefaultStyle":[{"__symbolic":"method"}]},"statics":{"DEFAULT_STYLE":{"dataSetStyles":[{"circle":{"color":"#0051BA","radius":4},"labels":{"value":{"color":"#0051BA"},"yAxis":{"color":"#0051BA"}},"line":{"color":"rgba(0, 81, 186, 0.4)","width":5}},{"circle":{"color":"#1F1F21","radius":4},"labels":{"value":{"color":"#1F1F21"},"yAxis":{"color":"#575759"}},"line":{"color":"rgba(87, 87, 89, 0.4)","width":5}}]},"deduceMinAndMaxYAxisValueFromMinAndMaxPointValues":{"__symbolic":"function","parameters":["min","max"],"value":{"max":{"__symbolic":"reference","name":"max"},"min":{"__symbolic":"reference","name":"min"}}}}}},"origins":{"NgxLineChartModule":"./ngx-line-chart.module","ɵa":"./chart/chart.component","ɵb":"./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":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"exports":[{"__symbolic":"reference","name":"ɵb"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}]}]}],"members":{}},"ɵa":{"__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 + 28\" [attr.x]=\"value.x - 12 - (3/4) * style.xAxis.labels.fontSize\" [attr.stroke]=\"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.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.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.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"}}]}],"axes":[{"__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"}]}},"ɵb":{"__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\" [axes]=\"axes\" [xLabelFunction]=\"xLabelFunction\" [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":{"axes":[{"__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"}}]}],"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"}}]}],"ngOnInit":[{"__symbolic":"method"}],"applyDefaultStyle":[{"__symbolic":"method"}]},"statics":{"deduceMinAndMaxYAxisValueFromMinAndMaxPointValues":{"__symbolic":"function","parameters":["min","max"],"value":{"max":{"__symbolic":"reference","name":"max"},"min":{"__symbolic":"reference","name":"min"}}}}}},"origins":{"NgxLineChartModule":"./ngx-line-chart.module","ɵa":"./chart/chart.component","ɵb":"./line-chart/line-chart.component"},"importAs":"ngx-line-chart"}

ngx-line-chart.umd.js

@@ -9,2 +9,53 @@ (function (global, factory) {
 
+var defaultStyle = {
+    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
+            }
+        },
+        {
+            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: 'rgb(74, 74, 74)',
+            fontSize: 24
+        }
+    }
+};
+
 var LineChartComponent = (function () {
@@ -106,46 +157,6 @@ function LineChartComponent() {
     LineChartComponent.prototype.applyDefaultStyle = function () {
-        this.style = deepmerge(this.style || {}, LineChartComponent.DEFAULT_STYLE);
+        this.style = deepmerge(this.style || {}, defaultStyle);
     };
     return LineChartComponent;
 }());
-LineChartComponent.DEFAULT_STYLE = {
-    dataSetStyles: [
-        {
-            circle: {
-                color: '#0051BA',
-                radius: 4
-            },
-            labels: {
-                value: {
-                    color: '#0051BA'
-                },
-                yAxis: {
-                    color: '#0051BA'
-                }
-            },
-            line: {
-                color: 'rgba(0, 81, 186, 0.4)',
-                width: 5
-            }
-        },
-        {
-            circle: {
-                color: '#1F1F21',
-                radius: 4
-            },
-            labels: {
-                value: {
-                    color: '#1F1F21'
-                },
-                yAxis: {
-                    color: '#575759'
-                }
-            },
-            line: {
-                color: 'rgba(87, 87, 89, 0.4)',
-                width: 5
-            }
-        }
-    ]
-};
 LineChartComponent.decorators = [
@@ -302,3 +313,3 @@ { type: _angular_core.Component, args: [{
                 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 + 20\" [attr.x]=\"value.x - 12\" *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\" *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\" *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.font-size]=\"18\" *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 + 28\" [attr.x]=\"value.x - 12 - (3/4) * style.xAxis.labels.fontSize\" [attr.stroke]=\"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.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.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.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> "
             },] },
@@ -305,0 +316,0 @@ ];

package.json

 {
   "name": "ngx-line-chart",
-  "version": "0.0.1-beta.5",
+  "version": "0.0.1-beta.6",
   "repository": {
@@ -5,0 +5,0 @@ "type": "git",

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

47730

increased by2.69%

Number of package files

17

increased by6.25%

Lines of code

809

increased by3.98%

No dependency changes