@agorapulse/ui-charts 13.0.2 → 14.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/agorapulse-ui-charts-14.0.0.tgz +0 -0
- package/esm2020/src/lib/agorapulse-ui-charts.module.mjs +7 -9
- package/esm2020/src/lib/chart-bar/chart-bar-options.model.mjs +1 -1
- package/esm2020/src/lib/chart-bar/chart-bar.component.mjs +4 -4
- package/esm2020/src/lib/chart-colors.mjs +7 -1
- package/esm2020/src/lib/chart-column/chart-column.component.mjs +4 -4
- package/esm2020/src/lib/chart-heatmap/chart-heatmap-options.model.mjs +16 -16
- package/esm2020/src/lib/chart-heatmap/chart-heatmap.component.mjs +4 -4
- package/esm2020/src/lib/chart-metrics-list/chart-metrics-list.component.mjs +8 -8
- package/esm2020/src/lib/chart-options.mjs +21 -19
- package/esm2020/src/lib/chart-pie/chart-pie.component.mjs +4 -4
- package/esm2020/src/lib/chart-spline/chart-spline.component.mjs +4 -4
- package/fesm2015/agorapulse-ui-charts.mjs +69 -63
- package/fesm2015/agorapulse-ui-charts.mjs.map +1 -1
- package/fesm2020/agorapulse-ui-charts.mjs +69 -63
- package/fesm2020/agorapulse-ui-charts.mjs.map +1 -1
- package/package.json +8 -8
- package/src/lib/chart-bar/chart-bar.component.d.ts +1 -1
- package/src/lib/chart-colors.d.ts +6 -0
- package/src/lib/chart-column/chart-column.component.d.ts +1 -1
- package/src/lib/chart-heatmap/chart-heatmap.component.d.ts +1 -1
- package/src/lib/chart-metrics-list/chart-metrics-list.component.d.ts +1 -1
- package/src/lib/chart-pie/chart-pie.component.d.ts +1 -1
- package/src/lib/chart-spline/chart-spline.component.d.ts +1 -1
- package/agorapulse-ui-charts-13.0.2.tgz +0 -0
- package/agorapulse-ui-charts.d.ts +0 -5
|
@@ -2,12 +2,12 @@ import * as Highcharts from 'highcharts';
|
|
|
2
2
|
import { dateFormat, Chart } from 'highcharts';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { Component, ViewChild, Input, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
|
5
|
-
import * as
|
|
5
|
+
import * as i1 from '@angular/common';
|
|
6
6
|
import { CommonModule } from '@angular/common';
|
|
7
|
-
import * as
|
|
7
|
+
import * as i2 from '@angular/material/list';
|
|
8
8
|
import { MatListModule } from '@angular/material/list';
|
|
9
9
|
import { HighchartsChartModule } from 'highcharts-angular';
|
|
10
|
-
import * as
|
|
10
|
+
import * as i3 from '@angular/material/divider';
|
|
11
11
|
import { mapChart } from 'highcharts/highmaps';
|
|
12
12
|
|
|
13
13
|
const borderRadiusPlugin = function (H) {
|
|
@@ -160,6 +160,12 @@ ChartColors.GREY_COLORS = {
|
|
|
160
160
|
'85': '#5D6A82',
|
|
161
161
|
'100': '#344563'
|
|
162
162
|
};
|
|
163
|
+
ChartColors.SOFT_RED_COLORS = {
|
|
164
|
+
100: '#ff5353',
|
|
165
|
+
85: '#ff6d6d',
|
|
166
|
+
60: '#ff9898',
|
|
167
|
+
10: '#fff9f9'
|
|
168
|
+
};
|
|
163
169
|
ChartColors.BLACK_COLOR = '#000000';
|
|
164
170
|
ChartColors.LIMIT_COLOR = '#E81313';
|
|
165
171
|
ChartColors.WHITE_COLOR = '#FFFFFF';
|
|
@@ -203,28 +209,30 @@ ChartOptions.DEFAULT_OPTIONS = {
|
|
|
203
209
|
},*/
|
|
204
210
|
chart: {
|
|
205
211
|
spacingRight: 20,
|
|
206
|
-
|
|
212
|
+
zooming: {
|
|
213
|
+
type: 'xy',
|
|
214
|
+
resetButton: {
|
|
215
|
+
theme: {
|
|
216
|
+
fill: ChartColors.WHITE_COLOR,
|
|
217
|
+
r: 4,
|
|
218
|
+
style: {
|
|
219
|
+
color: ChartColors.GREY_COLORS[100],
|
|
220
|
+
fontSize: '12px'
|
|
221
|
+
},
|
|
222
|
+
states: {
|
|
223
|
+
hover: {
|
|
224
|
+
fill: ChartColors.GREY_COLORS[5]
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
},
|
|
207
230
|
panning: {
|
|
208
231
|
enabled: true
|
|
209
232
|
},
|
|
210
233
|
panKey: 'shift',
|
|
211
234
|
style: {
|
|
212
235
|
fontFamily: 'Averta, \'Open Sans\', Helvetica, sans-serif'
|
|
213
|
-
},
|
|
214
|
-
resetZoomButton: {
|
|
215
|
-
theme: {
|
|
216
|
-
fill: ChartColors.WHITE_COLOR,
|
|
217
|
-
r: 4,
|
|
218
|
-
style: {
|
|
219
|
-
color: ChartColors.GREY_COLORS[100],
|
|
220
|
-
fontSize: '12px'
|
|
221
|
-
},
|
|
222
|
-
states: {
|
|
223
|
-
hover: {
|
|
224
|
-
fill: ChartColors.GREY_COLORS[5]
|
|
225
|
-
}
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
236
|
}
|
|
229
237
|
},
|
|
230
238
|
colorAxis: {
|
|
@@ -326,7 +334,7 @@ function isObject(item) {
|
|
|
326
334
|
return (item && typeof item === 'object' && !Array.isArray(item));
|
|
327
335
|
}
|
|
328
336
|
function mergeDeep(target, source) {
|
|
329
|
-
|
|
337
|
+
const output = deepCopy(target);
|
|
330
338
|
if (isObject(target) && isObject(source)) {
|
|
331
339
|
Object.keys(source).forEach(key => {
|
|
332
340
|
if (isObject(source[key])) {
|
|
@@ -348,7 +356,7 @@ function deepCopy(source) {
|
|
|
348
356
|
}
|
|
349
357
|
// Create an array or object to hold the values
|
|
350
358
|
const newObject = Array.isArray(source) ? [] : {};
|
|
351
|
-
for (
|
|
359
|
+
for (const key in source) {
|
|
352
360
|
if (source.hasOwnProperty(key)) {
|
|
353
361
|
// Recursively (deep) copy for nested objects, including arrays
|
|
354
362
|
newObject[key] = deepCopy(source[key]);
|
|
@@ -467,9 +475,9 @@ class ChartBarComponent {
|
|
|
467
475
|
}
|
|
468
476
|
}
|
|
469
477
|
}
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
478
|
+
ChartBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ChartBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
479
|
+
ChartBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: ChartBarComponent, selector: "ap-chart-bar", inputs: { categories: "categories", chartOptions: "chartOptions", color: "color", labelDateFormat: "labelDateFormat", opposite: "opposite", series: "series" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #chart></div>\n" });
|
|
480
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ChartBarComponent, decorators: [{
|
|
473
481
|
type: Component,
|
|
474
482
|
args: [{ selector: 'ap-chart-bar', template: "<div #chart></div>\n" }]
|
|
475
483
|
}], propDecorators: { chartRef: [{
|
|
@@ -625,9 +633,9 @@ class ChartColumnComponent {
|
|
|
625
633
|
}
|
|
626
634
|
}
|
|
627
635
|
}
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
636
|
+
ChartColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ChartColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
637
|
+
ChartColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: ChartColumnComponent, selector: "ap-chart-column", inputs: { chartOptions: "chartOptions", color: "color", labelDateFormat: "labelDateFormat", series: "series", simple: "simple" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #chart></div>\n" });
|
|
638
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ChartColumnComponent, decorators: [{
|
|
631
639
|
type: Component,
|
|
632
640
|
args: [{ selector: 'ap-chart-column', template: "<div #chart></div>\n" }]
|
|
633
641
|
}], propDecorators: { chartRef: [{
|
|
@@ -659,11 +667,11 @@ class ChartMetricsListComponent {
|
|
|
659
667
|
this.digitsInfo = '1.0-1';
|
|
660
668
|
}
|
|
661
669
|
}
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
670
|
+
ChartMetricsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ChartMetricsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
671
|
+
ChartMetricsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: ChartMetricsListComponent, selector: "ap-chart-metrics-list", inputs: { metrics: "metrics", locale: "locale" }, ngImport: i0, template: "<mat-list>\n <ng-container *ngIf=\"metrics\">\n <mat-list-item *ngFor=\"let metric of metrics; let i = index\"\n [ngClass]=\"{'chart-metric-total': metric.type === ChartMetricType.total}\">\n <div class=\"chart-metric-name metric-label\"\n *ngIf=\"!metric.children\">\n {{metric.name}}\n </div>\n <div class=\"chart-metric-name\"\n *ngIf=\"metric.children\">\n <span class=\"metric-label\">\n {{metric.name}}\n </span>\n <span class=\"chart-metric-children\">\n <span *ngFor=\"let item of metric.children\">\n <span class=\"child-label\">{{item.name}}</span>: <span class=\"child-value\">{{item.value}}</span>\n </span>\n </span>\n </div>\n <div class=\"chart-metric-value metric-label\">\n {{metric.value | number: digitsInfo: locale}}\n </div>\n <mat-divider *ngIf=\"i < metrics.length - 1\"></mat-divider>\n </mat-list-item>\n </ng-container>\n</mat-list>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.metric-label{font-size:14px;color:#5d6a82}.chart-metric-total .metric-label{font-size:16px;color:#344563!important;font-weight:700}.chart-metric-name .chart-metric-children{color:#aeb5c1;font-size:14px}.chart-metric-name .chart-metric-children .child-label{margin-left:16px}.chart-metric-value{justify-content:left;flex:1 0 0;flex-direction:row;text-align:end;color:#344563}.mat-list-item{height:35px}.mat-list-item ::ng-deep .mat-list-item-content{padding:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { kind: "component", type: i2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
672
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ChartMetricsListComponent, decorators: [{
|
|
665
673
|
type: Component,
|
|
666
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: "ap-chart-metrics-list", template: "<mat-list>\n <ng-container *ngIf=\"metrics\">\n <mat-list-item *ngFor=\"let metric of metrics; let i = index\"\n [ngClass]=\"{'chart-metric-total': metric.type
|
|
674
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: "ap-chart-metrics-list", template: "<mat-list>\n <ng-container *ngIf=\"metrics\">\n <mat-list-item *ngFor=\"let metric of metrics; let i = index\"\n [ngClass]=\"{'chart-metric-total': metric.type === ChartMetricType.total}\">\n <div class=\"chart-metric-name metric-label\"\n *ngIf=\"!metric.children\">\n {{metric.name}}\n </div>\n <div class=\"chart-metric-name\"\n *ngIf=\"metric.children\">\n <span class=\"metric-label\">\n {{metric.name}}\n </span>\n <span class=\"chart-metric-children\">\n <span *ngFor=\"let item of metric.children\">\n <span class=\"child-label\">{{item.name}}</span>: <span class=\"child-value\">{{item.value}}</span>\n </span>\n </span>\n </div>\n <div class=\"chart-metric-value metric-label\">\n {{metric.value | number: digitsInfo: locale}}\n </div>\n <mat-divider *ngIf=\"i < metrics.length - 1\"></mat-divider>\n </mat-list-item>\n </ng-container>\n</mat-list>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.metric-label{font-size:14px;color:#5d6a82}.chart-metric-total .metric-label{font-size:16px;color:#344563!important;font-weight:700}.chart-metric-name .chart-metric-children{color:#aeb5c1;font-size:14px}.chart-metric-name .chart-metric-children .child-label{margin-left:16px}.chart-metric-value{justify-content:left;flex:1 0 0;flex-direction:row;text-align:end;color:#344563}.mat-list-item{height:35px}.mat-list-item ::ng-deep .mat-list-item-content{padding:0}\n"] }]
|
|
667
675
|
}], propDecorators: { metrics: [{
|
|
668
676
|
type: Input
|
|
669
677
|
}], locale: [{
|
|
@@ -675,7 +683,7 @@ class ChartHeatmapOptions extends ChartOptions {
|
|
|
675
683
|
const defaultHeatmapOptions = {
|
|
676
684
|
chart: {
|
|
677
685
|
type: 'heatmap',
|
|
678
|
-
height: 600
|
|
686
|
+
height: 600,
|
|
679
687
|
},
|
|
680
688
|
colorAxis: {
|
|
681
689
|
allowDecimals: false,
|
|
@@ -684,43 +692,43 @@ class ChartHeatmapOptions extends ChartOptions {
|
|
|
684
692
|
min: 0,
|
|
685
693
|
labels: {
|
|
686
694
|
style: {
|
|
687
|
-
fontSize: '12px'
|
|
688
|
-
}
|
|
689
|
-
}
|
|
695
|
+
fontSize: '12px',
|
|
696
|
+
},
|
|
697
|
+
},
|
|
690
698
|
},
|
|
691
699
|
legend: {
|
|
692
|
-
enabled: false
|
|
700
|
+
enabled: false,
|
|
693
701
|
},
|
|
694
702
|
plotOptions: {
|
|
695
703
|
heatmap: {
|
|
696
704
|
borderColor: ChartColors.GREY_COLORS[10],
|
|
697
705
|
borderWidth: 1,
|
|
698
|
-
nullColor: 'white'
|
|
699
|
-
}
|
|
706
|
+
nullColor: 'white',
|
|
707
|
+
},
|
|
700
708
|
},
|
|
701
709
|
tooltip: {
|
|
702
710
|
headerFormat: '',
|
|
703
|
-
pointFormat: `<div style="border-bottom: 1px solid ${ChartColors.GREY_COLORS[10]}; padding: 0 8px 7px">`
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
711
|
+
pointFormat: `<div style="border-bottom: 1px solid ${ChartColors.GREY_COLORS[10]}; padding: 0 8px 7px">` +
|
|
712
|
+
`<span style="font-size: 12px; color: ${ChartColors.GREY_COLORS[60]}">{point.tooltipHeaderLabel}</span></div>` +
|
|
713
|
+
`<div style="font-size: 14px; color: ${ChartColors.GREY_COLORS[100]}; margin: 6px 8px 0 8px;">` +
|
|
714
|
+
`<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.value}</b></div>`,
|
|
707
715
|
},
|
|
708
716
|
xAxis: {
|
|
709
717
|
labels: {
|
|
710
718
|
formatter: function () {
|
|
711
719
|
return this.value.toString();
|
|
712
|
-
}
|
|
720
|
+
},
|
|
713
721
|
},
|
|
714
722
|
lineWidth: 1,
|
|
715
723
|
tickWidth: 0,
|
|
716
|
-
visible: true
|
|
724
|
+
visible: true,
|
|
717
725
|
},
|
|
718
726
|
yAxis: {
|
|
719
727
|
lineWidth: 0,
|
|
720
728
|
tickInterval: 3,
|
|
721
729
|
reversed: true,
|
|
722
|
-
visible: true
|
|
723
|
-
}
|
|
730
|
+
visible: true,
|
|
731
|
+
},
|
|
724
732
|
};
|
|
725
733
|
return super.build(mergeDeep(defaultHeatmapOptions, options));
|
|
726
734
|
}
|
|
@@ -766,9 +774,9 @@ class ChartHeatmapComponent {
|
|
|
766
774
|
}
|
|
767
775
|
}
|
|
768
776
|
}
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
777
|
+
ChartHeatmapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ChartHeatmapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
778
|
+
ChartHeatmapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: ChartHeatmapComponent, selector: "ap-chart-heatmap", inputs: { categoriesX: "categoriesX", categoriesY: "categoriesY", chartOptions: "chartOptions", labelDateFormat: "labelDateFormat", series: "series" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #chart></div>\n" });
|
|
779
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ChartHeatmapComponent, decorators: [{
|
|
772
780
|
type: Component,
|
|
773
781
|
args: [{ selector: 'ap-chart-heatmap', template: "<div #chart></div>\n" }]
|
|
774
782
|
}], propDecorators: { chartRef: [{
|
|
@@ -839,9 +847,9 @@ class ChartSplineComponent {
|
|
|
839
847
|
}
|
|
840
848
|
}
|
|
841
849
|
}
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
850
|
+
ChartSplineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ChartSplineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
851
|
+
ChartSplineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: ChartSplineComponent, selector: "ap-chart-spline", inputs: { chartOptions: "chartOptions", color: "color", labelDateFormat: "labelDateFormat", series: "series" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #chart></div>\n" });
|
|
852
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ChartSplineComponent, decorators: [{
|
|
845
853
|
type: Component,
|
|
846
854
|
args: [{ selector: 'ap-chart-spline', template: "<div #chart></div>\n" }]
|
|
847
855
|
}], propDecorators: { chartRef: [{
|
|
@@ -1007,9 +1015,9 @@ class ChartPieComponent {
|
|
|
1007
1015
|
}
|
|
1008
1016
|
}
|
|
1009
1017
|
}
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1018
|
+
ChartPieComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ChartPieComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1019
|
+
ChartPieComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: ChartPieComponent, selector: "ap-chart-pie", inputs: { chartOptions: "chartOptions", color: "color", innerLabels: "innerLabels", labelDateFormat: "labelDateFormat", series: "series" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #chart></div>\n" });
|
|
1020
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ChartPieComponent, decorators: [{
|
|
1013
1021
|
type: Component,
|
|
1014
1022
|
args: [{ selector: 'ap-chart-pie', template: "<div #chart></div>\n" }]
|
|
1015
1023
|
}], propDecorators: { chartRef: [{
|
|
@@ -1029,8 +1037,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
|
|
|
1029
1037
|
|
|
1030
1038
|
class AgorapulseUiChartsModule {
|
|
1031
1039
|
}
|
|
1032
|
-
|
|
1033
|
-
|
|
1040
|
+
AgorapulseUiChartsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AgorapulseUiChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1041
|
+
AgorapulseUiChartsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: AgorapulseUiChartsModule, declarations: [ChartBarComponent,
|
|
1034
1042
|
ChartColumnComponent,
|
|
1035
1043
|
ChartHeatmapComponent,
|
|
1036
1044
|
ChartMetricsListComponent,
|
|
@@ -1043,12 +1051,10 @@ class AgorapulseUiChartsModule {
|
|
|
1043
1051
|
ChartMetricsListComponent,
|
|
1044
1052
|
ChartSplineComponent,
|
|
1045
1053
|
ChartPieComponent] });
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
]] });
|
|
1051
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AgorapulseUiChartsModule, decorators: [{
|
|
1054
|
+
AgorapulseUiChartsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AgorapulseUiChartsModule, imports: [CommonModule,
|
|
1055
|
+
HighchartsChartModule,
|
|
1056
|
+
MatListModule] });
|
|
1057
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AgorapulseUiChartsModule, decorators: [{
|
|
1052
1058
|
type: NgModule,
|
|
1053
1059
|
args: [{
|
|
1054
1060
|
declarations: [
|