label: string;
@Input()
label2?: string;
+ @Input()
+ decimals?: number = 1;
currentDataUnits: string;
currentData: number;
currentDataUnits2?: string;
currentData2?: number;
+ maxConvertedValue?: number;
+ maxConvertedValueUnits?: string;
chartDataUnits: string;
-
- chartData: any = {
- dataset: [
- {
- label: '',
- data: [{ x: 0, y: 0 }],
- tension: 0,
- pointBackgroundColor: this.cssHelper.propertyValue('chart-color-strong-blue'),
- backgroundColor: this.cssHelper.propertyValue('chart-color-translucent-blue'),
- borderColor: this.cssHelper.propertyValue('chart-color-strong-blue')
- },
- {
- label: '',
- data: [],
- tension: 0,
- pointBackgroundColor: this.cssHelper.propertyValue('chart-color-orange'),
- backgroundColor: this.cssHelper.propertyValue('chart-color-yellow'),
- borderColor: this.cssHelper.propertyValue('chart-color-orange')
- }
- ]
- };
-
- options: any = {
- responsive: true,
- maintainAspectRatio: false,
- elements: {
- point: {
- radius: 0
- }
- },
- legend: {
- display: false
- },
- tooltips: {
- intersect: false,
- displayColors: true,
- backgroundColor: this.cssHelper.propertyValue('chart-color-tooltip-background'),
- callbacks: {
- title: function (tooltipItem: any): any {
- return tooltipItem[0].xLabel;
- }
- }
- },
- hover: {
- intersect: false
- },
- scales: {
- xAxes: [
- {
- display: false,
- type: 'time',
- gridLines: {
- display: false
- },
- time: {
- tooltipFormat: 'YYYY/MM/DD hh:mm:ss'
- }
- }
- ],
- yAxes: [
- {
- gridLines: {
- display: false
- },
- ticks: {
- beginAtZero: true,
- maxTicksLimit: 3,
- callback: (value: any) => {
- if (value === 0) {
- return null;
- }
- return this.fillString(this.convertUnits(value));
- }
- }
- }
- ]
- },
- plugins: {
- borderArea: true,
- chartAreaBorder: {
- borderColor: this.cssHelper.propertyValue('chart-color-slight-dark-gray'),
- borderWidth: 2
- }
- }
- };
+ chartData: any = {};
+ options: any = {};
public chartAreaBorderPlugin: PluginServiceGlobalRegistrationAndOptions[] = [
{
private dimlessPipe: DimlessPipe,
private formatter: FormatterService,
private numberFormatter: NumberFormatterService
- ) {}
+ ) {
+ this.chartData = {
+ dataset: [
+ {
+ label: '',
+ data: [{ x: 0, y: 0 }],
+ tension: 0.2,
+ pointBackgroundColor: this.cssHelper.propertyValue('chart-color-strong-blue'),
+ backgroundColor: this.cssHelper.propertyValue('chart-color-translucent-blue'),
+ borderColor: this.cssHelper.propertyValue('chart-color-strong-blue'),
+ borderWidth: 1
+ },
+ {
+ label: '',
+ data: [],
+ tension: 0.2,
+ pointBackgroundColor: this.cssHelper.propertyValue('chart-color-orange'),
+ backgroundColor: this.cssHelper.propertyValue('chart-color-translucent-yellow'),
+ borderColor: this.cssHelper.propertyValue('chart-color-orange'),
+ borderWidth: 1
+ }
+ ]
+ };
+
+ this.options = {
+ responsive: true,
+ maintainAspectRatio: false,
+ animation: false,
+ elements: {
+ point: {
+ radius: 0
+ }
+ },
+ legend: {
+ display: false
+ },
+ tooltips: {
+ mode: 'index',
+ custom: function (tooltipModel: { x: number; y: number }) {
+ tooltipModel.x = 10;
+ tooltipModel.y = 0;
+ }.bind(this),
+ intersect: false,
+ displayColors: true,
+ backgroundColor: this.cssHelper.propertyValue('chart-color-tooltip-background'),
+ callbacks: {
+ title: function (tooltipItem: any): any {
+ return tooltipItem[0].xLabel;
+ },
+ label: (tooltipItems: any, data: any) => {
+ return (
+ ' ' +
+ data.datasets[tooltipItems.datasetIndex].label +
+ ' - ' +
+ tooltipItems.value +
+ ' ' +
+ this.chartDataUnits
+ );
+ }
+ }
+ },
+ hover: {
+ intersect: false
+ },
+ scales: {
+ xAxes: [
+ {
+ display: false,
+ type: 'time',
+ gridLines: {
+ display: false
+ },
+ time: {
+ tooltipFormat: 'DD/MM/YYYY - HH:mm:ss'
+ }
+ }
+ ],
+ yAxes: [
+ {
+ afterFit: (scaleInstance: any) => (scaleInstance.width = 100),
+ gridLines: {
+ display: false
+ },
+ ticks: {
+ beginAtZero: true,
+ maxTicksLimit: 4,
+ callback: (value: any) => {
+ if (value === 0) {
+ return null;
+ }
+ return this.convertUnits(value);
+ }
+ }
+ }
+ ]
+ },
+ plugins: {
+ borderArea: true,
+ chartAreaBorder: {
+ borderColor: this.cssHelper.propertyValue('chart-color-slight-dark-gray'),
+ borderWidth: 1
+ }
+ }
+ };
+ }
ngOnChanges(): void {
this.updateChartData();
}
private updateChartData(): void {
+ this.chartData.dataset[0].label = this.label;
+ this.chartData.dataset[1].label = this.label2;
+ this.setChartTicks();
if (this.data) {
- this.setChartTicks();
this.chartData.dataset[0].data = this.formatData(this.data);
- this.chartData.dataset[0].label = this.label;
[this.currentData, this.currentDataUnits] = this.convertUnits(
this.data[this.data.length - 1][1]
).split(' ');
+ [this.maxConvertedValue, this.maxConvertedValueUnits] = this.convertUnits(
+ this.maxValue
+ ).split(' ');
}
if (this.data2) {
this.chartData.dataset[1].data = this.formatData(this.data2);
- this.chartData.dataset[1].label = this.label2;
[this.currentData2, this.currentDataUnits2] = this.convertUnits(
this.data2[this.data2.length - 1][1]
).split(' ');
private convertToChartDataUnits(data: any): any {
let dataWithUnits: string = '';
- if (this.chartDataUnits) {
+ if (this.chartDataUnits !== null) {
if (this.dataUnits === 'B') {
dataWithUnits = this.numberFormatter.formatBytesFromTo(
data,
this.dataUnits,
- this.chartDataUnits
+ this.chartDataUnits,
+ this.decimals
);
} else if (this.dataUnits === 'B/s') {
dataWithUnits = this.numberFormatter.formatBytesPerSecondFromTo(
data,
this.dataUnits,
- this.chartDataUnits
+ this.chartDataUnits,
+ this.decimals
);
} else if (this.dataUnits === 'ms') {
dataWithUnits = this.numberFormatter.formatSecondsFromTo(
data,
this.dataUnits,
- this.chartDataUnits
+ this.chartDataUnits,
+ this.decimals
);
} else {
dataWithUnits = this.numberFormatter.formatUnitlessFromTo(
data,
this.dataUnits,
- this.chartDataUnits
+ this.chartDataUnits,
+ this.decimals
);
}
}
private convertUnits(data: any): any {
let dataWithUnits: string = '';
if (this.dataUnits === 'B') {
- dataWithUnits = this.dimlessBinary.transform(data);
+ dataWithUnits = this.dimlessBinary.transform(data, this.decimals);
} else if (this.dataUnits === 'B/s') {
- dataWithUnits = this.dimlessBinaryPerSecond.transform(data);
+ dataWithUnits = this.dimlessBinaryPerSecond.transform(data, this.decimals);
} else if (this.dataUnits === 'ms') {
- dataWithUnits = this.formatter.format_number(data, 1000, ['ms', 's']);
+ dataWithUnits = this.formatter.format_number(data, 1000, ['ms', 's'], this.decimals);
} else {
- dataWithUnits = this.dimlessPipe.transform(data);
+ dataWithUnits = this.dimlessPipe.transform(data, this.decimals);
}
return dataWithUnits;
}
- private fillString(str: string): string {
- let maxNumberOfChar: number = 8;
- let numberOfChars: number = str.length;
- if (str.length < 4) {
- maxNumberOfChar = 11;
- }
- for (; numberOfChars < maxNumberOfChar; numberOfChars++) {
- str = '\u00A0' + str;
- }
- return str + '\u00A0\u00A0';
- }
-
private setChartTicks() {
if (!this.chart) {
return;
let maxValueDataUnits = '';
let extraRoom = 1.2;
- if (this.maxValue) {
- extraRoom = 1.0;
- [maxValue, maxValueDataUnits] = this.convertUnits(this.maxValue).split(' ');
- } else if (this.data) {
- extraRoom = 1.2;
+ if (this.data) {
let maxValueData = Math.max(...this.data.map((values: any) => values[1]));
if (this.data2) {
let maxValueData2 = Math.max(...this.data2.map((values: any) => values[1]));
const yAxesTicks = this.chart.chart.options.scales.yAxes[0].ticks;
yAxesTicks.suggestedMax = maxValue * extraRoom;
yAxesTicks.suggestedMin = 0;
- yAxesTicks.stepSize = Number((yAxesTicks.suggestedMax / 2).toFixed(0));
yAxesTicks.callback = (value: any) => {
if (value === 0) {
return null;
}
if (!maxValueDataUnits) {
- return this.fillString(`${value}`);
+ return `${value}`;
}
- return this.fillString(`${value} ${maxValueDataUnits}`);
+ return `${value} ${maxValueDataUnits}`;
};
this.chartDataUnits = maxValueDataUnits || '';
this.chart.chart.update();
projects / ceph.git / blobdiff