New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

ngx-line-chart

Package Overview
Dependencies
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-line-chart - npm Package Compare versions

Comparing version 0.0.1-rc.2 to 0.0.1-rc.3

19

chart/chart.component.d.ts

@@ -1,2 +0,1 @@

import { IAxis } from '../axis';
import { IChartStyle } from '../chart-style';

@@ -7,7 +6,4 @@ import { IDataSet } from '../data-set';

export declare class ChartComponent {
private static scaleValueBetween0And1(value, minAndMax, type);
private static findMinAndMax(values);
private static findMiddle(values);
dataSets: IDataSet[];
axes: IAxis[];
xAxisValues: number[];
xLabelFunction: (value: number) => string;

@@ -19,6 +15,15 @@ yLabelFunction: (value: number) => string;

padding: number;
getYAxisValues(setIndex: number): {
private static scaleValueBetween0And1(value, minAndMax, type);
private static findMinAndMax(values);
private static findMiddle(values);
getYAxisValues(setIndex: number): ({
label: string | number;
y: number;
}[];
} | {
label: string | number;
y: number;
x: number;
originalX: number;
originalY: number;
})[];
getXAxisValues(): {

@@ -25,0 +30,0 @@ label: string | number;

395

index.js

@@ -5,172 +5,2 @@ 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: '#8C8C8E',
fontSize: 24
}
}
};
var LineChartComponent = (function () {
function LineChartComponent() {
}
/**
* @param {?} dataSets
* @return {?}
*/
LineChartComponent.getDefaultAxis = function (dataSets) {
// Find min and max of all data sets and then calculate axis min and max from those
var /** @type {?} */ firstSetValues = dataSets[0].points.map(function (point) { return point.x; });
var /** @type {?} */ firstSetMin = Math.min.apply(Math, firstSetValues);
var /** @type {?} */ firstSetMax = Math.max.apply(Math, firstSetValues);
if (dataSets.length === 1) {
return LineChartComponent.deduceMinAndMaxYAxisValueFromMinAndMaxPointValues(firstSetMin, firstSetMax);
}
var /** @type {?} */ secondSetValues = dataSets[1].points.map(function (point) { return point.x; });
var /** @type {?} */ secondSetMin = Math.min.apply(Math, secondSetValues);
var /** @type {?} */ secondSetMax = Math.max.apply(Math, secondSetValues);
var /** @type {?} */ totalMinValue = Math.min(firstSetMin, secondSetMin);
var /** @type {?} */ totalMaxValue = Math.min(firstSetMax, secondSetMax);
return LineChartComponent.deduceMinAndMaxYAxisValueFromMinAndMaxPointValues(totalMinValue, totalMaxValue);
};
/**
* @param {?} min
* @param {?} max
* @return {?}
*/
LineChartComponent.deduceMinAndMaxYAxisValueFromMinAndMaxPointValues = function (min, max) {
return {
max: max,
min: min
};
};
/**
* @param {?} dataSets
* @return {?}
*/
LineChartComponent.ensureDataSetsHaveSameXValues = function (dataSets) {
if (dataSets.length === 1) {
return;
}
var /** @type {?} */ error = new Error('Unfortunately the data sets need to have common, same-way ordered set of x values.'
+ ' If either data set is missing some point, provide it as null y value. Sorry for inconvenience');
var /** @type {?} */ firstSetValues = dataSets[0].points.map(function (point) { return point.x; });
var /** @type {?} */ secondSetValues = dataSets[1].points.map(function (point) { return point.x; });
if (firstSetValues.length !== secondSetValues.length) {
throw error;
}
for (var /** @type {?} */ i = 0; i < firstSetValues.length; ++i) {
if (firstSetValues[i] !== secondSetValues[i]) {
throw error;
}
}
};
/**
* @param {?} axes
* @param {?} dataSets
* @return {?}
*/
LineChartComponent.ensureAxisDoMatchToXValuesOfPoints = function (axes, dataSets) {
var /** @type {?} */ axeNames = axes.map(function (axis) { return axis.name; });
dataSets.forEach(function (dataSet) {
if (!axeNames.includes(dataSet.axis)) {
throw new Error("Axis " + dataSet.axis + " is not defined as axes (" + axeNames.join(', ') + ").");
}
});
};
/**
* @return {?}
*/
LineChartComponent.prototype.ngOnInit = function () {
if (!this.dataSets || this.dataSets.length === 0) {
throw new Error('No data sets specified');
}
if (this.dataSets.length > 2) {
throw new Error('Only one or two data sets allowed.');
}
LineChartComponent.ensureDataSetsHaveSameXValues(this.dataSets);
if (!this.axes) {
this.axes = [LineChartComponent.getDefaultAxis(this.dataSets)];
}
else {
LineChartComponent.ensureAxisDoMatchToXValuesOfPoints(this.axes, this.dataSets);
}
if (!this.xLabelFunction) {
this.xLabelFunction = function (value) { return value.toString(); };
}
if (!this.yLabelFunction) {
this.yLabelFunction = function (value) { return value.toString(); };
}
this.applyDefaultStyle();
};
/**
* @return {?}
*/
LineChartComponent.prototype.applyDefaultStyle = function () {
this.style = deepmerge(defaultStyle, this.style || {});
};
return LineChartComponent;
}());
LineChartComponent.decorators = [
{ type: Component, args: [{
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> "
},] },
];
/**
* @nocollapse
*/
LineChartComponent.ctorParameters = function () { return []; };
LineChartComponent.propDecorators = {
'axes': [{ type: Input },],
'dataSets': [{ type: Input },],
'xLabelFunction': [{ type: Input },],
'yLabelFunction': [{ type: Input },],
'style': [{ type: Input },],
};
var __assign = (undefined && undefined.__assign) || Object.assign || function(t) {

@@ -259,8 +89,7 @@ for (var s, i = 1, n = arguments.length; i < n; i++) {

var _this = this;
return this.getScaledPoints(this.dataSets[0].points).map(function (scaledPoint) {
return {
label: _this.getXLabel(scaledPoint.originalX),
x: scaledPoint.x
};
});
return this.getScaledPoints(this.xAxisValues.map(function (value) { return ({ x: value, y: 0 }); }))
.map(function (scaledPoint) { return ({
label: _this.getXLabel(scaledPoint.originalX),
x: scaledPoint.x
}); });
};

@@ -310,43 +139,195 @@ /**

};
ChartComponent.decorators = [
{ 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> "
},] },
];
/**
* @nocollapse
*/
ChartComponent.ctorParameters = function () { return []; };
ChartComponent.propDecorators = {
'dataSets': [{ type: Input },],
'xAxisValues': [{ type: Input },],
'xLabelFunction': [{ type: Input },],
'yLabelFunction': [{ type: Input },],
'style': [{ type: Input },],
};
return ChartComponent;
}());
ChartComponent.decorators = [
{ 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> "
},] },
];
/**
* @nocollapse
*/
ChartComponent.ctorParameters = function () { return []; };
ChartComponent.propDecorators = {
'dataSets': [{ type: Input },],
'axes': [{ type: Input },],
'xLabelFunction': [{ type: Input },],
'yLabelFunction': [{ type: Input },],
'style': [{ type: Input },],
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: '#8C8C8E',
fontSize: 24
}
}
};
var LineChartComponent = (function () {
function LineChartComponent() {
this.style = {};
this.xLabelFunction = function (value) { return value.toString(); };
this.yLabelFunction = function (value) { return value.toString(); };
}
/**
* @param {?} dataSets
* @return {?}
*/
LineChartComponent.getDefaultXAxis = function (dataSets) {
return dataSets[0].points.map(function (point) { return point.x; });
};
/**
* @param {?} dataSets
* @return {?}
*/
LineChartComponent.ensureDataSetsHaveSameXValues = function (dataSets) {
if (dataSets.length === 1) {
return;
}
var /** @type {?} */ error = new Error('Unfortunately the data sets need to have common, same-way ordered set of x values.'
+ ' If either data set is missing some point, provide it as null y value. Sorry for inconvenience');
var /** @type {?} */ firstSetValues = dataSets[0].points.map(function (point) { return point.x; });
var /** @type {?} */ secondSetValues = dataSets[1].points.map(function (point) { return point.x; });
if (firstSetValues.length !== secondSetValues.length) {
throw error;
}
for (var /** @type {?} */ i = 0; i < firstSetValues.length; ++i) {
if (firstSetValues[i] !== secondSetValues[i]) {
throw error;
}
}
};
/**
* @param {?} n
* @param {?} dataSets
* @return {?}
*/
LineChartComponent.divideXAxisToN = function (n, dataSets) {
var /** @type {?} */ points = dataSets[0].points;
var /** @type {?} */ firstPointX = points[0].x;
var /** @type {?} */ lastPointX = points[points.length - 1].x;
var /** @type {?} */ result = [];
result.push(firstPointX);
var /** @type {?} */ range = lastPointX - firstPointX;
for (var /** @type {?} */ i = 1; i < n; ++i) {
result.push(range / n * i + firstPointX);
}
result.push(lastPointX);
return result;
};
/**
* @return {?}
*/
LineChartComponent.prototype.ngOnInit = function () {
if (!this.dataSets || this.dataSets.length === 0) {
throw new Error('No data sets specified.');
}
if (this.dataSets.length > 2) {
throw new Error('Only one or two data sets allowed.');
}
LineChartComponent.ensureDataSetsHaveSameXValues(this.dataSets);
if (!this.xAxisValues) {
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.');
}
this.xAxisValues = LineChartComponent.divideXAxisToN(this.xAxisValues, this.dataSets);
}
this.applyDefaultStyle();
};
/**
* @return {?}
*/
LineChartComponent.prototype.applyDefaultStyle = function () {
this.style = deepmerge(defaultStyle, this.style);
};
LineChartComponent.decorators = [
{ type: Component, args: [{
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> "
},] },
];
/**
* @nocollapse
*/
LineChartComponent.ctorParameters = function () { return []; };
LineChartComponent.propDecorators = {
'xAxisValues': [{ type: Input },],
'dataSets': [{ type: Input },],
'style': [{ type: Input },],
'xLabelFunction': [{ type: Input },],
'yLabelFunction': [{ type: Input },],
};
return LineChartComponent;
}());
var NgxLineChartModule = (function () {
function NgxLineChartModule() {
}
NgxLineChartModule.decorators = [
{ type: NgModule, args: [{
declarations: [ChartComponent, LineChartComponent],
exports: [LineChartComponent],
imports: [
CommonModule
]
},] },
];
/**
* @nocollapse
*/
NgxLineChartModule.ctorParameters = function () { return []; };
return NgxLineChartModule;
}());
NgxLineChartModule.decorators = [
{ type: NgModule, args: [{
declarations: [ChartComponent, LineChartComponent],
exports: [LineChartComponent],
imports: [
CommonModule
]
},] },
];
/**
* @nocollapse
*/
NgxLineChartModule.ctorParameters = function () { return []; };
export { NgxLineChartModule, ChartComponent, LineChartComponent };

12

line-chart/line-chart.component.d.ts
import { OnInit } from '@angular/core';
import { IAxis } from '../axis';
import { IChartStyle } from '../chart-style';
import { IDataSet } from '../data-set';
export declare class LineChartComponent implements OnInit {
axes: IAxis[];
xAxisValues: number[] | number;
dataSets: IDataSet[];
style: IChartStyle;
private static getDefaultXAxis(dataSets);
private static ensureDataSetsHaveSameXValues(dataSets);
private static divideXAxisToN(n, dataSets);
xLabelFunction: (value: number) => string;
yLabelFunction: (value: number) => string;
style: IChartStyle;
private static getDefaultAxis(dataSets);
private static deduceMinAndMaxYAxisValueFromMinAndMaxPointValues(min, max);
private static ensureDataSetsHaveSameXValues(dataSets);
private static ensureAxisDoMatchToXValuesOfPoints(axes, dataSets);
ngOnInit(): void;
private applyDefaultStyle();
}

2

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"}}]}],"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"}]}},"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\" [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","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":[{"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"}

397

ngx-line-chart.umd.js

@@ -7,174 +7,4 @@ (function (global, factory) {

deepmerge = deepmerge && 'default' in deepmerge ? deepmerge['default'] : deepmerge;
deepmerge = deepmerge && deepmerge.hasOwnProperty('default') ? deepmerge['default'] : deepmerge;
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: '#8C8C8E',
fontSize: 24
}
}
};
var LineChartComponent = (function () {
function LineChartComponent() {
}
/**
* @param {?} dataSets
* @return {?}
*/
LineChartComponent.getDefaultAxis = function (dataSets) {
// Find min and max of all data sets and then calculate axis min and max from those
var /** @type {?} */ firstSetValues = dataSets[0].points.map(function (point) { return point.x; });
var /** @type {?} */ firstSetMin = Math.min.apply(Math, firstSetValues);
var /** @type {?} */ firstSetMax = Math.max.apply(Math, firstSetValues);
if (dataSets.length === 1) {
return LineChartComponent.deduceMinAndMaxYAxisValueFromMinAndMaxPointValues(firstSetMin, firstSetMax);
}
var /** @type {?} */ secondSetValues = dataSets[1].points.map(function (point) { return point.x; });
var /** @type {?} */ secondSetMin = Math.min.apply(Math, secondSetValues);
var /** @type {?} */ secondSetMax = Math.max.apply(Math, secondSetValues);
var /** @type {?} */ totalMinValue = Math.min(firstSetMin, secondSetMin);
var /** @type {?} */ totalMaxValue = Math.min(firstSetMax, secondSetMax);
return LineChartComponent.deduceMinAndMaxYAxisValueFromMinAndMaxPointValues(totalMinValue, totalMaxValue);
};
/**
* @param {?} min
* @param {?} max
* @return {?}
*/
LineChartComponent.deduceMinAndMaxYAxisValueFromMinAndMaxPointValues = function (min, max) {
return {
max: max,
min: min
};
};
/**
* @param {?} dataSets
* @return {?}
*/
LineChartComponent.ensureDataSetsHaveSameXValues = function (dataSets) {
if (dataSets.length === 1) {
return;
}
var /** @type {?} */ error = new Error('Unfortunately the data sets need to have common, same-way ordered set of x values.'
+ ' If either data set is missing some point, provide it as null y value. Sorry for inconvenience');
var /** @type {?} */ firstSetValues = dataSets[0].points.map(function (point) { return point.x; });
var /** @type {?} */ secondSetValues = dataSets[1].points.map(function (point) { return point.x; });
if (firstSetValues.length !== secondSetValues.length) {
throw error;
}
for (var /** @type {?} */ i = 0; i < firstSetValues.length; ++i) {
if (firstSetValues[i] !== secondSetValues[i]) {
throw error;
}
}
};
/**
* @param {?} axes
* @param {?} dataSets
* @return {?}
*/
LineChartComponent.ensureAxisDoMatchToXValuesOfPoints = function (axes, dataSets) {
var /** @type {?} */ axeNames = axes.map(function (axis) { return axis.name; });
dataSets.forEach(function (dataSet) {
if (!axeNames.includes(dataSet.axis)) {
throw new Error("Axis " + dataSet.axis + " is not defined as axes (" + axeNames.join(', ') + ").");
}
});
};
/**
* @return {?}
*/
LineChartComponent.prototype.ngOnInit = function () {
if (!this.dataSets || this.dataSets.length === 0) {
throw new Error('No data sets specified');
}
if (this.dataSets.length > 2) {
throw new Error('Only one or two data sets allowed.');
}
LineChartComponent.ensureDataSetsHaveSameXValues(this.dataSets);
if (!this.axes) {
this.axes = [LineChartComponent.getDefaultAxis(this.dataSets)];
}
else {
LineChartComponent.ensureAxisDoMatchToXValuesOfPoints(this.axes, this.dataSets);
}
if (!this.xLabelFunction) {
this.xLabelFunction = function (value) { return value.toString(); };
}
if (!this.yLabelFunction) {
this.yLabelFunction = function (value) { return value.toString(); };
}
this.applyDefaultStyle();
};
/**
* @return {?}
*/
LineChartComponent.prototype.applyDefaultStyle = function () {
this.style = deepmerge(defaultStyle, this.style || {});
};
return LineChartComponent;
}());
LineChartComponent.decorators = [
{ type: _angular_core.Component, args: [{
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> "
},] },
];
/**
* @nocollapse
*/
LineChartComponent.ctorParameters = function () { return []; };
LineChartComponent.propDecorators = {
'axes': [{ type: _angular_core.Input },],
'dataSets': [{ type: _angular_core.Input },],
'xLabelFunction': [{ type: _angular_core.Input },],
'yLabelFunction': [{ type: _angular_core.Input },],
'style': [{ type: _angular_core.Input },],
};
var __assign = (undefined && undefined.__assign) || Object.assign || function(t) {

@@ -263,8 +93,7 @@ for (var s, i = 1, n = arguments.length; i < n; i++) {

var _this = this;
return this.getScaledPoints(this.dataSets[0].points).map(function (scaledPoint) {
return {
label: _this.getXLabel(scaledPoint.originalX),
x: scaledPoint.x
};
});
return this.getScaledPoints(this.xAxisValues.map(function (value) { return ({ x: value, y: 0 }); }))
.map(function (scaledPoint) { return ({
label: _this.getXLabel(scaledPoint.originalX),
x: scaledPoint.x
}); });
};

@@ -314,42 +143,194 @@ /**

};
ChartComponent.decorators = [
{ 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> "
},] },
];
/**
* @nocollapse
*/
ChartComponent.ctorParameters = function () { return []; };
ChartComponent.propDecorators = {
'dataSets': [{ type: _angular_core.Input },],
'xAxisValues': [{ type: _angular_core.Input },],
'xLabelFunction': [{ type: _angular_core.Input },],
'yLabelFunction': [{ type: _angular_core.Input },],
'style': [{ type: _angular_core.Input },],
};
return ChartComponent;
}());
ChartComponent.decorators = [
{ 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> "
},] },
];
/**
* @nocollapse
*/
ChartComponent.ctorParameters = function () { return []; };
ChartComponent.propDecorators = {
'dataSets': [{ type: _angular_core.Input },],
'axes': [{ type: _angular_core.Input },],
'xLabelFunction': [{ type: _angular_core.Input },],
'yLabelFunction': [{ type: _angular_core.Input },],
'style': [{ type: _angular_core.Input },],
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: '#8C8C8E',
fontSize: 24
}
}
};
var LineChartComponent = (function () {
function LineChartComponent() {
this.style = {};
this.xLabelFunction = function (value) { return value.toString(); };
this.yLabelFunction = function (value) { return value.toString(); };
}
/**
* @param {?} dataSets
* @return {?}
*/
LineChartComponent.getDefaultXAxis = function (dataSets) {
return dataSets[0].points.map(function (point) { return point.x; });
};
/**
* @param {?} dataSets
* @return {?}
*/
LineChartComponent.ensureDataSetsHaveSameXValues = function (dataSets) {
if (dataSets.length === 1) {
return;
}
var /** @type {?} */ error = new Error('Unfortunately the data sets need to have common, same-way ordered set of x values.'
+ ' If either data set is missing some point, provide it as null y value. Sorry for inconvenience');
var /** @type {?} */ firstSetValues = dataSets[0].points.map(function (point) { return point.x; });
var /** @type {?} */ secondSetValues = dataSets[1].points.map(function (point) { return point.x; });
if (firstSetValues.length !== secondSetValues.length) {
throw error;
}
for (var /** @type {?} */ i = 0; i < firstSetValues.length; ++i) {
if (firstSetValues[i] !== secondSetValues[i]) {
throw error;
}
}
};
/**
* @param {?} n
* @param {?} dataSets
* @return {?}
*/
LineChartComponent.divideXAxisToN = function (n, dataSets) {
var /** @type {?} */ points = dataSets[0].points;
var /** @type {?} */ firstPointX = points[0].x;
var /** @type {?} */ lastPointX = points[points.length - 1].x;
var /** @type {?} */ result = [];
result.push(firstPointX);
var /** @type {?} */ range = lastPointX - firstPointX;
for (var /** @type {?} */ i = 1; i < n; ++i) {
result.push(range / n * i + firstPointX);
}
result.push(lastPointX);
return result;
};
/**
* @return {?}
*/
LineChartComponent.prototype.ngOnInit = function () {
if (!this.dataSets || this.dataSets.length === 0) {
throw new Error('No data sets specified.');
}
if (this.dataSets.length > 2) {
throw new Error('Only one or two data sets allowed.');
}
LineChartComponent.ensureDataSetsHaveSameXValues(this.dataSets);
if (!this.xAxisValues) {
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.');
}
this.xAxisValues = LineChartComponent.divideXAxisToN(this.xAxisValues, this.dataSets);
}
this.applyDefaultStyle();
};
/**
* @return {?}
*/
LineChartComponent.prototype.applyDefaultStyle = function () {
this.style = deepmerge(defaultStyle, this.style);
};
LineChartComponent.decorators = [
{ type: _angular_core.Component, args: [{
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> "
},] },
];
/**
* @nocollapse
*/
LineChartComponent.ctorParameters = function () { return []; };
LineChartComponent.propDecorators = {
'xAxisValues': [{ type: _angular_core.Input },],
'dataSets': [{ type: _angular_core.Input },],
'style': [{ type: _angular_core.Input },],
'xLabelFunction': [{ type: _angular_core.Input },],
'yLabelFunction': [{ type: _angular_core.Input },],
};
return LineChartComponent;
}());
var NgxLineChartModule = (function () {
function NgxLineChartModule() {
}
NgxLineChartModule.decorators = [
{ type: _angular_core.NgModule, args: [{
declarations: [ChartComponent, LineChartComponent],
exports: [LineChartComponent],
imports: [
_angular_common.CommonModule
]
},] },
];
/**
* @nocollapse
*/
NgxLineChartModule.ctorParameters = function () { return []; };
return NgxLineChartModule;
}());
NgxLineChartModule.decorators = [
{ type: _angular_core.NgModule, args: [{
declarations: [ChartComponent, LineChartComponent],
exports: [LineChartComponent],
imports: [
_angular_common.CommonModule
]
},] },
];
/**
* @nocollapse
*/
NgxLineChartModule.ctorParameters = function () { return []; };

@@ -356,0 +337,0 @@ exports.NgxLineChartModule = NgxLineChartModule;

12

package.json
{
"name": "ngx-line-chart",
"version": "0.0.1-rc.2",
"version": "0.0.1-rc.3",
"repository": {

@@ -22,3 +22,5 @@ "type": "git",

},
"main": "ngx-line-chart.umd.js",
"module": "ngx-line-chart.js",
"jsnext:main": "ngx-line-chart.js",
"typings": "ngx-line-chart.d.ts",

@@ -29,7 +31,7 @@ "dependencies": {

"peerDependencies": {
"@angular/core": "^4.0.0",
"@angular/common": "^4.0.0",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
"@angular/core": ">2.0.0",
"@angular/common": ">2.0.0",
"rxjs": ">5.0.0",
"zone.js": ">0.8.4"
}
}

143

README.MD

@@ -22,3 +22,3 @@ # ngx-line-chart

```bash
$ npm install ngx-line-chart --save
$ npm install ngx-line-chart # Add --save if using npm version < 5
```

@@ -43,4 +43,3 @@

BrowserModule,
// Add module here
NgxLineChartModule
NgxLineChartModule // Add module here
],

@@ -53,2 +52,4 @@ providers: [],

Now a component with selector `ngx-line-chart` is registered and is usable in the templates.
## Usage

@@ -58,16 +59,32 @@ Module only contains single component, called `ngx-line-chart` to be used in the templates:

```html
<ngx-line-chart []></ngx-line-chart>
<ngx-line-chart [dataSets]="myDataSets" [xLabelFunction]="formXAxisValue.bind(this)"></ngx-line-chart>
```
See explanation for inputs below.
```typescript
export class MyComponent {
myDataSets = [{
name: 'likes',
points: [
{x: 10, y: 100},
{x: 20, y: 500}
]
}];
formatXAxisValue(value: number) {
return `Value ${value}`;
}
}
```
See below for details about all of the inputs.
### Inputs
| Input | Type | Example value | Description |
|----------------|---------------------------|------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| dataSets | IDataSet[] | [{name: 'likes', points: [{x: 10, y: 100}, {x: 20, y: 500}, {x: 50, y: 40}]] | Array of 1 or 2 data sets each containing a name and the actual data points (x and y as numbers). There data sets will be used to determine x-axis values along with the corresponding y-axis for each data set. |
| xLabelFunction | (value: number) => string | (value: number) => value.toString() (this is the default) | This function will be called for each value of the x-axis labels for it to be formatted. Default function shows the values as they are. You may use this to format values as for example dates. |
| xLabelFunction | (value: number) => string | (value: number) => value.toString() (this is the default) | This function will be called for each value of the y-axis labels for it to be formatted. Default function shows the values as they are. |
| style | IChartStyle | - | Explained below. |
| Input | Type | Example value | Description |
|----------------|---------------------------|------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| dataSets | IDataSet[] | [{name: 'likes', points: [{x: 10, y: 100}, {x: 20, y: 500}, {x: 50, y: 40}]] | Array of 1 or 2 data sets each containing a name and the actual data points (x and y as numbers). There data sets will be used to determine x-axis values along with the corresponding y-axis for each data set. |
| xLabelFunction | (value: number) => string | (value: number) => value.toString() (this is the default) | This function will be called for each value of the x-axis labels for it to be formatted. Default function shows the values as they are. You may use this to format values as for example dates. *See [example](#usage) above for how to pass a method (`bind` is needed)*. |
| yLabelFunction | (value: number) => string | (value: number) => value.toString() (this is the default) | This function will be called for each value of the y-axis labels for it to be formatted. Default function shows the values as they are. |
| xAxisValues | number[] | number | [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100] or 10 | If an array is provided, the values in array will be used for x-axis. If number is provided, first data set is used to distribute x-axis values linearly over the range of values. If none is provided, all x-axis values of first data set will be used. |
| style | IChartStyle | | See [Chart details](#chart-details) below. |
The `axes` input will be fixed in the future to work as intended. It can be skipped for now.

@@ -86,8 +103,88 @@ ### Styles

The chart will now be 600px x 400px.
The chart will now be 600px x 400px as it fulfills the container. Please note that the container doesn't of course need to have size specified as pixels but instead it can be declared as percentages etc.
#### Chart details
Details of the chart can be fine tuned also with `style` input. The options for this include:
Details of the chart can be fine tuned with `style` input. [default-style.ts](src/default-style.ts) gives a good example on how the object passed should look like:
```typescript
import { IChartStyle } from './chart-style';
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
}
},
{
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
}
}
};
```
These are also the default values and can be partially or fully altered by providing the input as follows:
```html
<ngx-line-chart [style]="chartStyles"></ngx-line-chart>
```
```typescript
export class MyComponent {
chartStyles = {
xAxis: {
labels: {
color: 'red'
}
}
}
}
```
This will now merge the specified red color for x-axis labels with the default styles.
For colors all the ways possible to declare a color in CSS will work. This includes:
- common color names such as `red` and `blue`
- RGB values as hexa and integer versions such as `#FFFFFF`, `#242424`, `rgb(255, 255, 255)` and `rgba(60, 60, 60, 0.5)`
- HSL colors such as `hsl(120, 100%, 50%)` and `hsla(120, 100%, 25%, 0.4)`
## Future

@@ -104,2 +201,20 @@ Plan is to generalize the library as going forward. Things to be included contain at least:

## Development
To run the demo project:
1. Run `npm run build` in the root directory to generate `dist/` (`npm install` first, of course)
2. Go to `demo/` and run `npm install`
3. Go to root and run `npm run prepare-demo`. This copies `dist/` folder to the `node_modules/` of demo application. This is essentially what `npm link` would achieve with symbolic link, but there's a [known problem](https://github.com/angular/angular/issues/15763) with Angular and `npm link`.
4. Go back to the `demo/` and start dev server with `npm start`
So to conclude:
```bash
npm install
npm run build
cd demo
npm install
cd ..
npm run prepare-demo
cd demo
npm start
```
To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:

@@ -106,0 +221,0 @@ 

axis.d.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc