@rfprodz/client-d3-charts 1.3.19 → 1.4.1
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/README.md +6 -3
- package/esm2022/lib/components/bar-chart/bar-chart.component.mjs +3 -3
- package/esm2022/lib/components/chart-examples/chart-examples.component.mjs +7 -6
- package/esm2022/lib/components/chart-examples-bar/chart-examples-bar.component.mjs +3 -3
- package/esm2022/lib/components/chart-examples-force-directed/chart-examples-force-directed.component.mjs +3 -3
- package/esm2022/lib/components/chart-examples-gauge/chart-examples-gauge.component.mjs +80 -0
- package/esm2022/lib/components/chart-examples-line/chart-examples-line.component.mjs +3 -3
- package/esm2022/lib/components/chart-examples-pie/chart-examples-pie.component.mjs +3 -3
- package/esm2022/lib/components/chart-examples-radar/chart-examples-radar.component.mjs +3 -3
- package/esm2022/lib/components/force-directed-chart/force-directed-chart.component.mjs +3 -3
- package/esm2022/lib/components/gauge-chart/gauge-chart.component.mjs +97 -0
- package/esm2022/lib/components/index.mjs +2 -1
- package/esm2022/lib/components/line-chart/line-chart.component.mjs +3 -3
- package/esm2022/lib/components/pie-chart/pie-chart.component.mjs +3 -3
- package/esm2022/lib/components/radar-chart/radar-chart.component.mjs +3 -3
- package/esm2022/lib/d3-charts.module.mjs +14 -6
- package/esm2022/lib/interfaces/gauge-chart.interface.mjs +2 -0
- package/esm2022/lib/interfaces/index.mjs +2 -1
- package/esm2022/lib/providers/d3-chart-factory.provider.mjs +3 -1
- package/esm2022/lib/util/gauge-chart.util.mjs +158 -0
- package/esm2022/lib/util/index.mjs +2 -1
- package/fesm2022/rfprodz-client-d3-charts.mjs +373 -44
- package/fesm2022/rfprodz-client-d3-charts.mjs.map +1 -1
- package/lib/components/chart-examples-gauge/chart-examples-gauge.component.d.ts +37 -0
- package/lib/components/gauge-chart/gauge-chart.component.d.ts +53 -0
- package/lib/components/index.d.ts +1 -0
- package/lib/d3-charts.module.d.ts +15 -13
- package/lib/interfaces/gauge-chart.interface.d.ts +37 -0
- package/lib/interfaces/index.d.ts +1 -0
- package/lib/providers/d3-chart-factory.provider.d.ts +2 -0
- package/lib/util/gauge-chart.util.d.ts +14 -0
- package/lib/util/index.d.ts +1 -0
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -51,6 +51,8 @@ import { AppD3ChartsModule } from '@rfprodz/client-d3-charts';
|
|
|
51
51
|
<app-line-chart></app-line-chart>
|
|
52
52
|
<!-- pie chart -->
|
|
53
53
|
<app-pie-chart></app-pie-chart>
|
|
54
|
+
<!-- pie chart -->
|
|
55
|
+
<app-gauge-chart></app-gauge-chart>
|
|
54
56
|
<!-- radar chart -->
|
|
55
57
|
<app-radar-chart></app-radar-chart>
|
|
56
58
|
<!-- force-directed chart -->
|
|
@@ -61,11 +63,12 @@ import { AppD3ChartsModule } from '@rfprodz/client-d3-charts';
|
|
|
61
63
|
|
|
62
64
|
```typescript
|
|
63
65
|
import {
|
|
64
|
-
AppPieChartComponent,
|
|
65
|
-
AppRadarChartComponent,
|
|
66
|
-
AppForceDirectedChartComponent,
|
|
67
66
|
AppBarChartComponent,
|
|
67
|
+
AppForceDirectedChartComponent,
|
|
68
|
+
AppGaugeChartComponent,
|
|
68
69
|
AppLineChartComponent,
|
|
70
|
+
AppPieChartComponent,
|
|
71
|
+
AppRadarChartComponent,
|
|
69
72
|
} from '@rfprodz/client-d3-charts';
|
|
70
73
|
```
|
|
71
74
|
|
|
@@ -62,10 +62,10 @@ export class AppBarChartComponent {
|
|
|
62
62
|
this.drawChart();
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
66
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.
|
|
65
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppBarChartComponent, deps: [{ token: DOCUMENT }, { token: D3_CHART_FACTORY }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
66
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: AppBarChartComponent, selector: "app-bar-chart", inputs: { chartId: "chartId", data: "data", options: "options" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\" id=\"{{ chartId }}\" #container></div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center}:host .container{flex:0 1 auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
67
67
|
}
|
|
68
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
68
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppBarChartComponent, decorators: [{
|
|
69
69
|
type: Component,
|
|
70
70
|
args: [{ selector: 'app-bar-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\" id=\"{{ chartId }}\" #container></div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center}:host .container{flex:0 1 auto}\n"] }]
|
|
71
71
|
}], ctorParameters: function () { return [{ type: Document, decorators: [{
|
|
@@ -5,13 +5,14 @@ import * as i2 from "../chart-examples-line/chart-examples-line.component";
|
|
|
5
5
|
import * as i3 from "../chart-examples-radar/chart-examples-radar.component";
|
|
6
6
|
import * as i4 from "../chart-examples-bar/chart-examples-bar.component";
|
|
7
7
|
import * as i5 from "../chart-examples-pie/chart-examples-pie.component";
|
|
8
|
-
import * as i6 from "../chart-examples-
|
|
8
|
+
import * as i6 from "../chart-examples-gauge/chart-examples-gauge.component";
|
|
9
|
+
import * as i7 from "../chart-examples-force-directed/chart-examples-force-directed.component";
|
|
9
10
|
export class AppChartExamplesComponent {
|
|
10
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
11
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.
|
|
11
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppChartExamplesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: AppChartExamplesComponent, selector: "app-chart-examples", ngImport: i0, template: "<app-chart-examples-bar></app-chart-examples-bar>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<app-chart-examples-line></app-chart-examples-line>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<app-chart-examples-radar></app-chart-examples-radar>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<app-chart-examples-pie></app-chart-examples-pie>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<app-chart-examples-gauge></app-chart-examples-gauge>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<app-chart-examples-force-directed></app-chart-examples-force-directed>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}:host .container{display:flex;flex:1 1 auto;flex-wrap:wrap;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.AppChartExamplesLineComponent, selector: "app-chart-examples-line" }, { kind: "component", type: i3.AppChartExamplesRadaraComponent, selector: "app-chart-examples-radar" }, { kind: "component", type: i4.AppChartExamplesBarComponent, selector: "app-chart-examples-bar" }, { kind: "component", type: i5.AppChartExamplesPieComponent, selector: "app-chart-examples-pie" }, { kind: "component", type: i6.AppChartExamplesGaugeComponent, selector: "app-chart-examples-gauge" }, { kind: "component", type: i7.AppChartExamplesForceDirectedComponent, selector: "app-chart-examples-force-directed" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12
13
|
}
|
|
13
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
14
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppChartExamplesComponent, decorators: [{
|
|
14
15
|
type: Component,
|
|
15
|
-
args: [{ selector: 'app-chart-examples', changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-chart-examples-bar></app-chart-examples-bar>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<app-chart-examples-line></app-chart-examples-line>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<app-chart-examples-radar></app-chart-examples-radar>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<app-chart-examples-pie></app-chart-examples-pie>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<app-chart-examples-force-directed></app-chart-examples-force-directed>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}:host .container{display:flex;flex:1 1 auto;flex-wrap:wrap;width:100%}\n"] }]
|
|
16
|
+
args: [{ selector: 'app-chart-examples', changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-chart-examples-bar></app-chart-examples-bar>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<app-chart-examples-line></app-chart-examples-line>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<app-chart-examples-radar></app-chart-examples-radar>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<app-chart-examples-pie></app-chart-examples-pie>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<app-chart-examples-gauge></app-chart-examples-gauge>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<app-chart-examples-force-directed></app-chart-examples-force-directed>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}:host .container{display:flex;flex:1 1 auto;flex-wrap:wrap;width:100%}\n"] }]
|
|
16
17
|
}] });
|
|
17
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
18
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhcnQtZXhhbXBsZXMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jbGllbnQtZDMtY2hhcnRzL3NyYy9saWIvY29tcG9uZW50cy9jaGFydC1leGFtcGxlcy9jaGFydC1leGFtcGxlcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NsaWVudC1kMy1jaGFydHMvc3JjL2xpYi9jb21wb25lbnRzL2NoYXJ0LWV4YW1wbGVzL2NoYXJ0LWV4YW1wbGVzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7Ozs7OztBQVFuRSxNQUFNLE9BQU8seUJBQXlCO2lJQUF6Qix5QkFBeUI7cUhBQXpCLHlCQUF5QiwwRENSdEMsZ2pCQXFCQTs7MkZEYmEseUJBQXlCO2tCQU5yQyxTQUFTOytCQUNFLG9CQUFvQixtQkFHYix1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtY2hhcnQtZXhhbXBsZXMnLFxuICB0ZW1wbGF0ZVVybDogJy4vY2hhcnQtZXhhbXBsZXMuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jaGFydC1leGFtcGxlcy5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgQXBwQ2hhcnRFeGFtcGxlc0NvbXBvbmVudCB7fVxuIiwiPGFwcC1jaGFydC1leGFtcGxlcy1iYXI+PC9hcHAtY2hhcnQtZXhhbXBsZXMtYmFyPlxuXG48aHIgW25nU3R5bGVdPVwieyB3aWR0aDogJzEwMCUnIH1cIiAvPlxuXG48YXBwLWNoYXJ0LWV4YW1wbGVzLWxpbmU+PC9hcHAtY2hhcnQtZXhhbXBsZXMtbGluZT5cblxuPGhyIFtuZ1N0eWxlXT1cInsgd2lkdGg6ICcxMDAlJyB9XCIgLz5cblxuPGFwcC1jaGFydC1leGFtcGxlcy1yYWRhcj48L2FwcC1jaGFydC1leGFtcGxlcy1yYWRhcj5cblxuPGhyIFtuZ1N0eWxlXT1cInsgd2lkdGg6ICcxMDAlJyB9XCIgLz5cblxuPGFwcC1jaGFydC1leGFtcGxlcy1waWU+PC9hcHAtY2hhcnQtZXhhbXBsZXMtcGllPlxuXG48aHIgW25nU3R5bGVdPVwieyB3aWR0aDogJzEwMCUnIH1cIiAvPlxuXG48YXBwLWNoYXJ0LWV4YW1wbGVzLWdhdWdlPjwvYXBwLWNoYXJ0LWV4YW1wbGVzLWdhdWdlPlxuXG48aHIgW25nU3R5bGVdPVwieyB3aWR0aDogJzEwMCUnIH1cIiAvPlxuXG48YXBwLWNoYXJ0LWV4YW1wbGVzLWZvcmNlLWRpcmVjdGVkPjwvYXBwLWNoYXJ0LWV4YW1wbGVzLWZvcmNlLWRpcmVjdGVkPlxuIl19
|
|
@@ -41,10 +41,10 @@ export class AppChartExamplesBarComponent {
|
|
|
41
41
|
yAxisTitle: 'long y axis title',
|
|
42
42
|
};
|
|
43
43
|
}
|
|
44
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
45
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.
|
|
44
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppChartExamplesBarComponent, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
45
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: AppChartExamplesBarComponent, selector: "app-chart-examples-bar", ngImport: i0, template: "<div class=\"container\" *ngIf=\"barChartConfig$ | async as config\">\n <app-bar-chart [chartId]=\"'bar-example-1'\" [data]=\"config.data\" [options]=\"config.options\"></app-bar-chart>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}:host .container{display:flex;flex:1 1 auto;flex-wrap:wrap;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.AppBarChartComponent, selector: "app-bar-chart", inputs: ["chartId", "data", "options"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
46
46
|
}
|
|
47
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
47
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppChartExamplesBarComponent, decorators: [{
|
|
48
48
|
type: Component,
|
|
49
49
|
args: [{ selector: 'app-chart-examples-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\" *ngIf=\"barChartConfig$ | async as config\">\n <app-bar-chart [chartId]=\"'bar-example-1'\" [data]=\"config.data\" [options]=\"config.options\"></app-bar-chart>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}:host .container{display:flex;flex:1 1 auto;flex-wrap:wrap;width:100%}\n"] }]
|
|
50
50
|
}], ctorParameters: function () { return [{ type: i1.BreakpointObserver }]; } });
|
|
@@ -71,10 +71,10 @@ export class AppChartExamplesForceDirectedComponent {
|
|
|
71
71
|
chartTitle: 'Example force directed chart',
|
|
72
72
|
};
|
|
73
73
|
}
|
|
74
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
75
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.
|
|
74
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppChartExamplesForceDirectedComponent, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
75
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: AppChartExamplesForceDirectedComponent, selector: "app-chart-examples-force-directed", ngImport: i0, template: "<div class=\"container\" *ngIf=\"forceDirectedChartConfig$ | async as config\">\n <app-force-directed-chart\n [chartId]=\"'force-directed-example-1'\"\n [data]=\"config.data\"\n [options]=\"config.options\"\n ></app-force-directed-chart>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}:host .container{display:flex;flex:1 1 auto;flex-wrap:wrap;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.AppForceDirectedChartComponent, selector: "app-force-directed-chart", inputs: ["chartId", "data", "options"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
76
76
|
}
|
|
77
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
77
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppChartExamplesForceDirectedComponent, decorators: [{
|
|
78
78
|
type: Component,
|
|
79
79
|
args: [{ selector: 'app-chart-examples-force-directed', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\" *ngIf=\"forceDirectedChartConfig$ | async as config\">\n <app-force-directed-chart\n [chartId]=\"'force-directed-example-1'\"\n [data]=\"config.data\"\n [options]=\"config.options\"\n ></app-force-directed-chart>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}:host .container{display:flex;flex:1 1 auto;flex-wrap:wrap;width:100%}\n"] }]
|
|
80
80
|
}], ctorParameters: function () { return [{ type: i1.BreakpointObserver }]; } });
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
|
2
|
+
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { first, map, switchMap, timer } from 'rxjs';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
import * as i1 from "@angular/cdk/layout";
|
|
6
|
+
import * as i2 from "@angular/common";
|
|
7
|
+
import * as i3 from "../gauge-chart/gauge-chart.component";
|
|
8
|
+
/**
|
|
9
|
+
* Gauge chart examples.
|
|
10
|
+
*/
|
|
11
|
+
export class AppChartExamplesGaugeComponent {
|
|
12
|
+
/**
|
|
13
|
+
* Sample gauge chart data.
|
|
14
|
+
*/
|
|
15
|
+
get gaugeChartData() {
|
|
16
|
+
const chunks = {
|
|
17
|
+
first: 10,
|
|
18
|
+
second: 100,
|
|
19
|
+
};
|
|
20
|
+
const data = {
|
|
21
|
+
first: Array.from(Array(chunks.first).keys()).map(item => {
|
|
22
|
+
const mod = 10;
|
|
23
|
+
return {
|
|
24
|
+
key: 'value',
|
|
25
|
+
y: (item + 1) * mod,
|
|
26
|
+
};
|
|
27
|
+
}),
|
|
28
|
+
second: Array.from(Array(chunks.second).keys()).map(item => {
|
|
29
|
+
return {
|
|
30
|
+
key: 'value',
|
|
31
|
+
y: item + 1,
|
|
32
|
+
};
|
|
33
|
+
}),
|
|
34
|
+
};
|
|
35
|
+
return data;
|
|
36
|
+
}
|
|
37
|
+
constructor(breakpointObserver) {
|
|
38
|
+
this.breakpointObserver = breakpointObserver;
|
|
39
|
+
this.value = {
|
|
40
|
+
first: 80,
|
|
41
|
+
second: 75,
|
|
42
|
+
third: 65,
|
|
43
|
+
};
|
|
44
|
+
this.breakpoint$ = this.breakpointObserver
|
|
45
|
+
.observe([Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge])
|
|
46
|
+
.pipe(map(result => Object.keys(result.breakpoints).find(item => result.breakpoints[item]) ?? 'unknown'));
|
|
47
|
+
this.gaugeChartConfig$ = this.breakpoint$.pipe(switchMap(() => {
|
|
48
|
+
const timeout = 100;
|
|
49
|
+
return timer(timeout).pipe(first(), map(() => ({ data: this.gaugeChartData, options: this.gaugeChartOptions() })));
|
|
50
|
+
}));
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Example gauge chart options.
|
|
54
|
+
*/
|
|
55
|
+
gaugeChartOptions() {
|
|
56
|
+
const options = {
|
|
57
|
+
first: {
|
|
58
|
+
chartTitle: 'Example gauge chart 1',
|
|
59
|
+
},
|
|
60
|
+
second: {
|
|
61
|
+
chartTitle: 'Example gauge chart 2',
|
|
62
|
+
showLabels: false,
|
|
63
|
+
},
|
|
64
|
+
third: {
|
|
65
|
+
chartTitle: 'Example gauge chart 3',
|
|
66
|
+
showLabels: false,
|
|
67
|
+
showTooltips: false,
|
|
68
|
+
defaultColor: 'red',
|
|
69
|
+
},
|
|
70
|
+
};
|
|
71
|
+
return options;
|
|
72
|
+
}
|
|
73
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppChartExamplesGaugeComponent, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
74
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: AppChartExamplesGaugeComponent, selector: "app-chart-examples-gauge", ngImport: i0, template: "<div class=\"container\" *ngIf=\"gaugeChartConfig$ | async as config\">\n <app-gauge-chart\n [chartId]=\"'gauge-example-1'\"\n [data]=\"config.data.first\"\n [options]=\"config.options.first\"\n [value]=\"value.first\"\n ></app-gauge-chart>\n\n <app-gauge-chart\n [chartId]=\"'gauge-example-2'\"\n [data]=\"config.data.second\"\n [options]=\"config.options.second\"\n [value]=\"value.second\"\n ></app-gauge-chart>\n\n <app-gauge-chart\n [chartId]=\"'gauge-example-3'\"\n [data]=\"config.data.second\"\n [options]=\"config.options.third\"\n [value]=\"value.third\"\n ></app-gauge-chart>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}:host .container{display:flex;flex:1 1 auto;flex-wrap:wrap;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.AppGaugeChartComponent, selector: "app-gauge-chart", inputs: ["chartId", "value", "data", "options"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
75
|
+
}
|
|
76
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppChartExamplesGaugeComponent, decorators: [{
|
|
77
|
+
type: Component,
|
|
78
|
+
args: [{ selector: 'app-chart-examples-gauge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\" *ngIf=\"gaugeChartConfig$ | async as config\">\n <app-gauge-chart\n [chartId]=\"'gauge-example-1'\"\n [data]=\"config.data.first\"\n [options]=\"config.options.first\"\n [value]=\"value.first\"\n ></app-gauge-chart>\n\n <app-gauge-chart\n [chartId]=\"'gauge-example-2'\"\n [data]=\"config.data.second\"\n [options]=\"config.options.second\"\n [value]=\"value.second\"\n ></app-gauge-chart>\n\n <app-gauge-chart\n [chartId]=\"'gauge-example-3'\"\n [data]=\"config.data.second\"\n [options]=\"config.options.third\"\n [value]=\"value.third\"\n ></app-gauge-chart>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}:host .container{display:flex;flex:1 1 auto;flex-wrap:wrap;width:100%}\n"] }]
|
|
79
|
+
}], ctorParameters: function () { return [{ type: i1.BreakpointObserver }]; } });
|
|
80
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhcnQtZXhhbXBsZXMtZ2F1Z2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jbGllbnQtZDMtY2hhcnRzL3NyYy9saWIvY29tcG9uZW50cy9jaGFydC1leGFtcGxlcy1nYXVnZS9jaGFydC1leGFtcGxlcy1nYXVnZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NsaWVudC1kMy1jaGFydHMvc3JjL2xpYi9jb21wb25lbnRzL2NoYXJ0LWV4YW1wbGVzLWdhdWdlL2NoYXJ0LWV4YW1wbGVzLWdhdWdlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxXQUFXLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUN0RSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ25FLE9BQU8sRUFBRSxLQUFLLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxNQUFNLENBQUM7Ozs7O0FBSXBEOztHQUVHO0FBT0gsTUFBTSxPQUFPLDhCQUE4QjtJQU96Qzs7T0FFRztJQUNILElBQVksY0FBYztRQUN4QixNQUFNLE1BQU0sR0FBRztZQUNiLEtBQUssRUFBRSxFQUFFO1lBQ1QsTUFBTSxFQUFFLEdBQUc7U0FDWixDQUFDO1FBQ0YsTUFBTSxJQUFJLEdBR047WUFDRixLQUFLLEVBQUUsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDLElBQUksRUFBRSxDQUFDLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxFQUFFO2dCQUN2RCxNQUFNLEdBQUcsR0FBRyxFQUFFLENBQUM7Z0JBQ2YsT0FBNEI7b0JBQzFCLEdBQUcsRUFBRSxPQUFPO29CQUNaLENBQUMsRUFBRSxDQUFDLElBQUksR0FBRyxDQUFDLENBQUMsR0FBRyxHQUFHO2lCQUNwQixDQUFDO1lBQ0osQ0FBQyxDQUFDO1lBQ0YsTUFBTSxFQUFFLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsRUFBRTtnQkFDekQsT0FBNEI7b0JBQzFCLEdBQUcsRUFBRSxPQUFPO29CQUNaLENBQUMsRUFBRSxJQUFJLEdBQUcsQ0FBQztpQkFDWixDQUFDO1lBQ0osQ0FBQyxDQUFDO1NBQ0gsQ0FBQztRQUNGLE9BQU8sSUFBSSxDQUFDO0lBQ2QsQ0FBQztJQWdCRCxZQUE2QixrQkFBc0M7UUFBdEMsdUJBQWtCLEdBQWxCLGtCQUFrQixDQUFvQjtRQWpENUQsVUFBSyxHQUFHO1lBQ2IsS0FBSyxFQUFFLEVBQUU7WUFDVCxNQUFNLEVBQUUsRUFBRTtZQUNWLEtBQUssRUFBRSxFQUFFO1NBQ1YsQ0FBQztRQStCZSxnQkFBVyxHQUFHLElBQUksQ0FBQyxrQkFBa0I7YUFDbkQsT0FBTyxDQUFDLENBQUMsV0FBVyxDQUFDLE1BQU0sRUFBRSxXQUFXLENBQUMsS0FBSyxFQUFFLFdBQVcsQ0FBQyxNQUFNLEVBQUUsV0FBVyxDQUFDLEtBQUssRUFBRSxXQUFXLENBQUMsTUFBTSxDQUFDLENBQUM7YUFDM0csSUFBSSxDQUFDLEdBQUcsQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLFdBQVcsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLE1BQU0sQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxTQUFTLENBQUMsQ0FBQyxDQUFDO1FBRTVGLHNCQUFpQixHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUN2RCxTQUFTLENBQUMsR0FBRyxFQUFFO1lBQ2IsTUFBTSxPQUFPLEdBQUcsR0FBRyxDQUFDO1lBQ3BCLE9BQU8sS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDLElBQUksQ0FDeEIsS0FBSyxFQUFFLEVBQ1AsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFDLENBQUMsRUFBRSxJQUFJLEVBQUUsSUFBSSxDQUFDLGNBQWMsRUFBRSxPQUFPLEVBQUUsSUFBSSxDQUFDLGlCQUFpQixFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQzlFLENBQUM7UUFDSixDQUFDLENBQUMsQ0FDSCxDQUFDO0lBRW9FLENBQUM7SUFFdkU7O09BRUc7SUFDSyxpQkFBaUI7UUFDdkIsTUFBTSxPQUFPLEdBSVQ7WUFDRixLQUFLLEVBQStCO2dCQUNsQyxVQUFVLEVBQUUsdUJBQXVCO2FBQ3BDO1lBQ0QsTUFBTSxFQUErQjtnQkFDbkMsVUFBVSxFQUFFLHVCQUF1QjtnQkFDbkMsVUFBVSxFQUFFLEtBQUs7YUFDbEI7WUFDRCxLQUFLLEVBQStCO2dCQUNsQyxVQUFVLEVBQUUsdUJBQXVCO2dCQUNuQyxVQUFVLEVBQUUsS0FBSztnQkFDakIsWUFBWSxFQUFFLEtBQUs7Z0JBQ25CLFlBQVksRUFBRSxLQUFLO2FBQ3BCO1NBQ0YsQ0FBQztRQUNGLE9BQU8sT0FBTyxDQUFDO0lBQ2pCLENBQUM7aUlBNUVVLDhCQUE4QjtxSEFBOUIsOEJBQThCLGdFQ2YzQyxnb0JBc0JBOzsyRkRQYSw4QkFBOEI7a0JBTjFDLFNBQVM7K0JBQ0UsMEJBQTBCLG1CQUduQix1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQnJlYWtwb2ludE9ic2VydmVyLCBCcmVha3BvaW50cyB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9sYXlvdXQnO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgZmlyc3QsIG1hcCwgc3dpdGNoTWFwLCB0aW1lciB9IGZyb20gJ3J4anMnO1xuXG5pbXBvcnQgeyBJR2F1Z2VDaGFydERhdGFOb2RlLCBJR2F1Z2VDaGFydE9wdGlvbnMgfSBmcm9tICcuLi8uLi9pbnRlcmZhY2VzL2dhdWdlLWNoYXJ0LmludGVyZmFjZSc7XG5cbi8qKlxuICogR2F1Z2UgY2hhcnQgZXhhbXBsZXMuXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FwcC1jaGFydC1leGFtcGxlcy1nYXVnZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9jaGFydC1leGFtcGxlcy1nYXVnZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2NoYXJ0LWV4YW1wbGVzLWdhdWdlLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBBcHBDaGFydEV4YW1wbGVzR2F1Z2VDb21wb25lbnQge1xuICBwdWJsaWMgdmFsdWUgPSB7XG4gICAgZmlyc3Q6IDgwLFxuICAgIHNlY29uZDogNzUsXG4gICAgdGhpcmQ6IDY1LFxuICB9O1xuXG4gIC8qKlxuICAgKiBTYW1wbGUgZ2F1Z2UgY2hhcnQgZGF0YS5cbiAgICovXG4gIHByaXZhdGUgZ2V0IGdhdWdlQ2hhcnREYXRhKCkge1xuICAgIGNvbnN0IGNodW5rcyA9IHtcbiAgICAgIGZpcnN0OiAxMCxcbiAgICAgIHNlY29uZDogMTAwLFxuICAgIH07XG4gICAgY29uc3QgZGF0YToge1xuICAgICAgZmlyc3Q6IElHYXVnZUNoYXJ0RGF0YU5vZGVbXTtcbiAgICAgIHNlY29uZDogSUdhdWdlQ2hhcnREYXRhTm9kZVtdO1xuICAgIH0gPSB7XG4gICAgICBmaXJzdDogQXJyYXkuZnJvbShBcnJheShjaHVua3MuZmlyc3QpLmtleXMoKSkubWFwKGl0ZW0gPT4ge1xuICAgICAgICBjb25zdCBtb2QgPSAxMDtcbiAgICAgICAgcmV0dXJuIDxJR2F1Z2VDaGFydERhdGFOb2RlPntcbiAgICAgICAgICBrZXk6ICd2YWx1ZScsXG4gICAgICAgICAgeTogKGl0ZW0gKyAxKSAqIG1vZCxcbiAgICAgICAgfTtcbiAgICAgIH0pLFxuICAgICAgc2Vjb25kOiBBcnJheS5mcm9tKEFycmF5KGNodW5rcy5zZWNvbmQpLmtleXMoKSkubWFwKGl0ZW0gPT4ge1xuICAgICAgICByZXR1cm4gPElHYXVnZUNoYXJ0RGF0YU5vZGU+e1xuICAgICAgICAgIGtleTogJ3ZhbHVlJyxcbiAgICAgICAgICB5OiBpdGVtICsgMSxcbiAgICAgICAgfTtcbiAgICAgIH0pLFxuICAgIH07XG4gICAgcmV0dXJuIGRhdGE7XG4gIH1cblxuICBwcml2YXRlIHJlYWRvbmx5IGJyZWFrcG9pbnQkID0gdGhpcy5icmVha3BvaW50T2JzZXJ2ZXJcbiAgICAub2JzZXJ2ZShbQnJlYWtwb2ludHMuWFNtYWxsLCBCcmVha3BvaW50cy5TbWFsbCwgQnJlYWtwb2ludHMuTWVkaXVtLCBCcmVha3BvaW50cy5MYXJnZSwgQnJlYWtwb2ludHMuWExhcmdlXSlcbiAgICAucGlwZShtYXAocmVzdWx0ID0+IE9iamVjdC5rZXlzKHJlc3VsdC5icmVha3BvaW50cykuZmluZChpdGVtID0+IHJlc3VsdC5icmVha3BvaW50c1tpdGVtXSkgPz8gJ3Vua25vd24nKSk7XG5cbiAgcHVibGljIHJlYWRvbmx5IGdhdWdlQ2hhcnRDb25maWckID0gdGhpcy5icmVha3BvaW50JC5waXBlKFxuICAgIHN3aXRjaE1hcCgoKSA9PiB7XG4gICAgICBjb25zdCB0aW1lb3V0ID0gMTAwO1xuICAgICAgcmV0dXJuIHRpbWVyKHRpbWVvdXQpLnBpcGUoXG4gICAgICAgIGZpcnN0KCksXG4gICAgICAgIG1hcCgoKSA9PiAoeyBkYXRhOiB0aGlzLmdhdWdlQ2hhcnREYXRhLCBvcHRpb25zOiB0aGlzLmdhdWdlQ2hhcnRPcHRpb25zKCkgfSkpLFxuICAgICAgKTtcbiAgICB9KSxcbiAgKTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHJlYWRvbmx5IGJyZWFrcG9pbnRPYnNlcnZlcjogQnJlYWtwb2ludE9ic2VydmVyKSB7fVxuXG4gIC8qKlxuICAgKiBFeGFtcGxlIGdhdWdlIGNoYXJ0IG9wdGlvbnMuXG4gICAqL1xuICBwcml2YXRlIGdhdWdlQ2hhcnRPcHRpb25zKCkge1xuICAgIGNvbnN0IG9wdGlvbnM6IHtcbiAgICAgIGZpcnN0OiBQYXJ0aWFsPElHYXVnZUNoYXJ0T3B0aW9ucz47XG4gICAgICBzZWNvbmQ6IFBhcnRpYWw8SUdhdWdlQ2hhcnRPcHRpb25zPjtcbiAgICAgIHRoaXJkOiBQYXJ0aWFsPElHYXVnZUNoYXJ0T3B0aW9ucz47XG4gICAgfSA9IHtcbiAgICAgIGZpcnN0OiA8UGFydGlhbDxJR2F1Z2VDaGFydE9wdGlvbnM+PntcbiAgICAgICAgY2hhcnRUaXRsZTogJ0V4YW1wbGUgZ2F1Z2UgY2hhcnQgMScsXG4gICAgICB9LFxuICAgICAgc2Vjb25kOiA8UGFydGlhbDxJR2F1Z2VDaGFydE9wdGlvbnM+PntcbiAgICAgICAgY2hhcnRUaXRsZTogJ0V4YW1wbGUgZ2F1Z2UgY2hhcnQgMicsXG4gICAgICAgIHNob3dMYWJlbHM6IGZhbHNlLFxuICAgICAgfSxcbiAgICAgIHRoaXJkOiA8UGFydGlhbDxJR2F1Z2VDaGFydE9wdGlvbnM+PntcbiAgICAgICAgY2hhcnRUaXRsZTogJ0V4YW1wbGUgZ2F1Z2UgY2hhcnQgMycsXG4gICAgICAgIHNob3dMYWJlbHM6IGZhbHNlLFxuICAgICAgICBzaG93VG9vbHRpcHM6IGZhbHNlLFxuICAgICAgICBkZWZhdWx0Q29sb3I6ICdyZWQnLFxuICAgICAgfSxcbiAgICB9O1xuICAgIHJldHVybiBvcHRpb25zO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiY29udGFpbmVyXCIgKm5nSWY9XCJnYXVnZUNoYXJ0Q29uZmlnJCB8IGFzeW5jIGFzIGNvbmZpZ1wiPlxuICA8YXBwLWdhdWdlLWNoYXJ0XG4gICAgW2NoYXJ0SWRdPVwiJ2dhdWdlLWV4YW1wbGUtMSdcIlxuICAgIFtkYXRhXT1cImNvbmZpZy5kYXRhLmZpcnN0XCJcbiAgICBbb3B0aW9uc109XCJjb25maWcub3B0aW9ucy5maXJzdFwiXG4gICAgW3ZhbHVlXT1cInZhbHVlLmZpcnN0XCJcbiAgPjwvYXBwLWdhdWdlLWNoYXJ0PlxuXG4gIDxhcHAtZ2F1Z2UtY2hhcnRcbiAgICBbY2hhcnRJZF09XCInZ2F1Z2UtZXhhbXBsZS0yJ1wiXG4gICAgW2RhdGFdPVwiY29uZmlnLmRhdGEuc2Vjb25kXCJcbiAgICBbb3B0aW9uc109XCJjb25maWcub3B0aW9ucy5zZWNvbmRcIlxuICAgIFt2YWx1ZV09XCJ2YWx1ZS5zZWNvbmRcIlxuICA+PC9hcHAtZ2F1Z2UtY2hhcnQ+XG5cbiAgPGFwcC1nYXVnZS1jaGFydFxuICAgIFtjaGFydElkXT1cIidnYXVnZS1leGFtcGxlLTMnXCJcbiAgICBbZGF0YV09XCJjb25maWcuZGF0YS5zZWNvbmRcIlxuICAgIFtvcHRpb25zXT1cImNvbmZpZy5vcHRpb25zLnRoaXJkXCJcbiAgICBbdmFsdWVdPVwidmFsdWUudGhpcmRcIlxuICA+PC9hcHAtZ2F1Z2UtY2hhcnQ+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -79,10 +79,10 @@ export class AppChartExamplesLineComponent {
|
|
|
79
79
|
dateFormat,
|
|
80
80
|
};
|
|
81
81
|
}
|
|
82
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
83
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.
|
|
82
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppChartExamplesLineComponent, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
83
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: AppChartExamplesLineComponent, selector: "app-chart-examples-line", ngImport: i0, template: "<div class=\"container\" *ngIf=\"lineChartConfig$ | async as config\">\n <app-line-chart [chartId]=\"'line-example-1'\" [data]=\"[config.data[0]]\" [options]=\"config.options\"></app-line-chart>\n\n <app-line-chart [chartId]=\"'line-example-2'\" [data]=\"[config.data[1]]\" [options]=\"config.optionsDateDdMmYy\"></app-line-chart>\n\n <app-line-chart\n [chartId]=\"'line-example-3'\"\n [data]=\"[config.data[1], config.data[2]]\"\n [options]=\"config.optionsDateDdMmYyyy\"\n ></app-line-chart>\n\n <app-line-chart [chartId]=\"'line-example-4'\" [data]=\"config.data\" [options]=\"config.optionsDateMmYyyy\"></app-line-chart>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}:host .container{display:flex;flex:1 1 auto;flex-wrap:wrap;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.AppLineChartComponent, selector: "app-line-chart", inputs: ["chartId", "data", "options"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
84
84
|
}
|
|
85
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
85
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppChartExamplesLineComponent, decorators: [{
|
|
86
86
|
type: Component,
|
|
87
87
|
args: [{ selector: 'app-chart-examples-line', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\" *ngIf=\"lineChartConfig$ | async as config\">\n <app-line-chart [chartId]=\"'line-example-1'\" [data]=\"[config.data[0]]\" [options]=\"config.options\"></app-line-chart>\n\n <app-line-chart [chartId]=\"'line-example-2'\" [data]=\"[config.data[1]]\" [options]=\"config.optionsDateDdMmYy\"></app-line-chart>\n\n <app-line-chart\n [chartId]=\"'line-example-3'\"\n [data]=\"[config.data[1], config.data[2]]\"\n [options]=\"config.optionsDateDdMmYyyy\"\n ></app-line-chart>\n\n <app-line-chart [chartId]=\"'line-example-4'\" [data]=\"config.data\" [options]=\"config.optionsDateMmYyyy\"></app-line-chart>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}:host .container{display:flex;flex:1 1 auto;flex-wrap:wrap;width:100%}\n"] }]
|
|
88
88
|
}], ctorParameters: function () { return [{ type: i1.BreakpointObserver }]; } });
|
|
@@ -40,10 +40,10 @@ export class AppChartExamplesPieComponent {
|
|
|
40
40
|
chartTitle: 'Example pie chart',
|
|
41
41
|
};
|
|
42
42
|
}
|
|
43
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
44
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.
|
|
43
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppChartExamplesPieComponent, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
44
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: AppChartExamplesPieComponent, selector: "app-chart-examples-pie", ngImport: i0, template: "<div class=\"container\" *ngIf=\"pieChartConfig$ | async as config\">\n <app-pie-chart [chartId]=\"'pie-example-1'\" [data]=\"config.data\" [options]=\"config.options\"></app-pie-chart>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}:host .container{display:flex;flex:1 1 auto;flex-wrap:wrap;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.AppPieChartComponent, selector: "app-pie-chart", inputs: ["chartId", "data", "options"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
45
45
|
}
|
|
46
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
46
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppChartExamplesPieComponent, decorators: [{
|
|
47
47
|
type: Component,
|
|
48
48
|
args: [{ selector: 'app-chart-examples-pie', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\" *ngIf=\"pieChartConfig$ | async as config\">\n <app-pie-chart [chartId]=\"'pie-example-1'\" [data]=\"config.data\" [options]=\"config.options\"></app-pie-chart>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}:host .container{display:flex;flex:1 1 auto;flex-wrap:wrap;width:100%}\n"] }]
|
|
49
49
|
}], ctorParameters: function () { return [{ type: i1.BreakpointObserver }]; } });
|
|
@@ -56,10 +56,10 @@ export class AppChartExamplesRadaraComponent {
|
|
|
56
56
|
chartTitle: 'Example radar chart',
|
|
57
57
|
};
|
|
58
58
|
}
|
|
59
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
60
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.
|
|
59
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppChartExamplesRadaraComponent, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
60
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: AppChartExamplesRadaraComponent, selector: "app-chart-examples-radar", ngImport: i0, template: "<div class=\"container\" *ngIf=\"radarChartConfig$ | async as config\">\n <app-radar-chart [chartId]=\"'radar-example-1'\" [data]=\"[config.data[0]]\" [options]=\"config.options\"></app-radar-chart>\n\n <app-radar-chart [chartId]=\"'radar-example-2'\" [data]=\"[config.data[1]]\" [options]=\"config.options\"></app-radar-chart>\n\n <app-radar-chart [chartId]=\"'radar-example-3'\" [data]=\"config.data\" [options]=\"config.options\"></app-radar-chart>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}:host .container{display:flex;flex:1 1 auto;flex-wrap:wrap;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.AppRadarChartComponent, selector: "app-radar-chart", inputs: ["chartId", "data", "options"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
61
61
|
}
|
|
62
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
62
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppChartExamplesRadaraComponent, decorators: [{
|
|
63
63
|
type: Component,
|
|
64
64
|
args: [{ selector: 'app-chart-examples-radar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\" *ngIf=\"radarChartConfig$ | async as config\">\n <app-radar-chart [chartId]=\"'radar-example-1'\" [data]=\"[config.data[0]]\" [options]=\"config.options\"></app-radar-chart>\n\n <app-radar-chart [chartId]=\"'radar-example-2'\" [data]=\"[config.data[1]]\" [options]=\"config.options\"></app-radar-chart>\n\n <app-radar-chart [chartId]=\"'radar-example-3'\" [data]=\"config.data\" [options]=\"config.options\"></app-radar-chart>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}:host .container{display:flex;flex:1 1 auto;flex-wrap:wrap;width:100%}\n"] }]
|
|
65
65
|
}], ctorParameters: function () { return [{ type: i1.BreakpointObserver }]; } });
|
|
@@ -67,10 +67,10 @@ export class AppForceDirectedChartComponent {
|
|
|
67
67
|
this.drawChart();
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
71
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.
|
|
70
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppForceDirectedChartComponent, deps: [{ token: DOCUMENT }, { token: D3_CHART_FACTORY }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
71
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: AppForceDirectedChartComponent, selector: "app-force-directed-chart", inputs: { chartId: "chartId", data: "data", options: "options" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\">\n <div id=\"{{ chartId }}\" #container></div>\n\n <small class=\"container--chart-title\">{{ options.chartTitle }}</small>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center}:host .container{flex:0 1 auto}:host .container--chart-title{display:block;text-align:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
72
72
|
}
|
|
73
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
73
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppForceDirectedChartComponent, decorators: [{
|
|
74
74
|
type: Component,
|
|
75
75
|
args: [{ selector: 'app-force-directed-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\">\n <div id=\"{{ chartId }}\" #container></div>\n\n <small class=\"container--chart-title\">{{ options.chartTitle }}</small>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center}:host .container{flex:0 1 auto}:host .container--chart-title{display:block;text-align:center}\n"] }]
|
|
76
76
|
}], ctorParameters: function () { return [{ type: Document, decorators: [{
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { DOCUMENT } from '@angular/common';
|
|
2
|
+
import { ChangeDetectionStrategy, Component, ElementRef, Inject, Input, ViewChild, } from '@angular/core';
|
|
3
|
+
import { D3_CHART_FACTORY } from '../../providers/d3-chart-factory.provider';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export class AppGaugeChartComponent {
|
|
6
|
+
constructor(doc, d3Factory) {
|
|
7
|
+
this.doc = doc;
|
|
8
|
+
this.d3Factory = d3Factory;
|
|
9
|
+
/**
|
|
10
|
+
* The chart id.
|
|
11
|
+
*/
|
|
12
|
+
this.chartId = 'gauge-0';
|
|
13
|
+
/**
|
|
14
|
+
* The value of the gauge chart.
|
|
15
|
+
*/
|
|
16
|
+
this.value = 0;
|
|
17
|
+
/**
|
|
18
|
+
* The chart data.
|
|
19
|
+
*/
|
|
20
|
+
this.data = [];
|
|
21
|
+
/**
|
|
22
|
+
* The chart options.
|
|
23
|
+
*/
|
|
24
|
+
this.options = {};
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* The chart options constructor.
|
|
28
|
+
* @returns chart options
|
|
29
|
+
*/
|
|
30
|
+
chartOptions() {
|
|
31
|
+
const margin = { top: 50, right: 50, bottom: 50, left: 50 };
|
|
32
|
+
const minWidth = 350;
|
|
33
|
+
const modifiers = {
|
|
34
|
+
width: 10,
|
|
35
|
+
height: 20,
|
|
36
|
+
};
|
|
37
|
+
const width = Math.min(minWidth, this.doc.body.clientWidth - modifiers.width) - margin.left - margin.right;
|
|
38
|
+
const height = Math.min(width, this.doc.body.clientHeight - margin.top - margin.bottom - modifiers.height);
|
|
39
|
+
const options = {
|
|
40
|
+
width,
|
|
41
|
+
height,
|
|
42
|
+
margin,
|
|
43
|
+
...this.options,
|
|
44
|
+
value: this.value,
|
|
45
|
+
};
|
|
46
|
+
return options;
|
|
47
|
+
}
|
|
48
|
+
/**
|
|
49
|
+
* Draws the chart.
|
|
50
|
+
*/
|
|
51
|
+
drawChart() {
|
|
52
|
+
if (typeof this.container !== 'undefined') {
|
|
53
|
+
const options = this.chartOptions();
|
|
54
|
+
this.d3Factory.drawGaugeChart(this.container, this.data, options);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* Actually draws the chart after the component view is initialized.
|
|
59
|
+
*/
|
|
60
|
+
ngAfterViewInit() {
|
|
61
|
+
this.drawChart();
|
|
62
|
+
}
|
|
63
|
+
/**
|
|
64
|
+
* Redraws the chart on changes.
|
|
65
|
+
*/
|
|
66
|
+
ngOnChanges(changes) {
|
|
67
|
+
const data = changes.data?.currentValue;
|
|
68
|
+
const options = changes.options?.currentValue;
|
|
69
|
+
if ((typeof data !== 'undefined' && data !== null) || (typeof options !== 'undefined' && options !== null)) {
|
|
70
|
+
this.drawChart();
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppGaugeChartComponent, deps: [{ token: DOCUMENT }, { token: D3_CHART_FACTORY }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
74
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: AppGaugeChartComponent, selector: "app-gauge-chart", inputs: { chartId: "chartId", value: "value", data: "data", options: "options" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\">\n <div id=\"{{ chartId }}\" #container></div>\n\n <small class=\"container--chart-title\">{{ options.chartTitle }}</small>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center}:host canvas{width:auto!important;height:150px}:host .container{flex:0 1 auto}:host .container--chart-title{display:block;text-align:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
75
|
+
}
|
|
76
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppGaugeChartComponent, decorators: [{
|
|
77
|
+
type: Component,
|
|
78
|
+
args: [{ selector: 'app-gauge-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\">\n <div id=\"{{ chartId }}\" #container></div>\n\n <small class=\"container--chart-title\">{{ options.chartTitle }}</small>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center}:host canvas{width:auto!important;height:150px}:host .container{flex:0 1 auto}:host .container--chart-title{display:block;text-align:center}\n"] }]
|
|
79
|
+
}], ctorParameters: function () { return [{ type: Document, decorators: [{
|
|
80
|
+
type: Inject,
|
|
81
|
+
args: [DOCUMENT]
|
|
82
|
+
}] }, { type: undefined, decorators: [{
|
|
83
|
+
type: Inject,
|
|
84
|
+
args: [D3_CHART_FACTORY]
|
|
85
|
+
}] }]; }, propDecorators: { chartId: [{
|
|
86
|
+
type: Input
|
|
87
|
+
}], value: [{
|
|
88
|
+
type: Input
|
|
89
|
+
}], data: [{
|
|
90
|
+
type: Input
|
|
91
|
+
}], options: [{
|
|
92
|
+
type: Input
|
|
93
|
+
}], container: [{
|
|
94
|
+
type: ViewChild,
|
|
95
|
+
args: ['container']
|
|
96
|
+
}] } });
|
|
97
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2F1Z2UtY2hhcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jbGllbnQtZDMtY2hhcnRzL3NyYy9saWIvY29tcG9uZW50cy9nYXVnZS1jaGFydC9nYXVnZS1jaGFydC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NsaWVudC1kMy1jaGFydHMvc3JjL2xpYi9jb21wb25lbnRzL2dhdWdlLWNoYXJ0L2dhdWdlLWNoYXJ0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMzQyxPQUFPLEVBRUwsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxVQUFVLEVBQ1YsTUFBTSxFQUNOLEtBQUssRUFHTCxTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUM7QUFHdkIsT0FBTyxFQUFFLGdCQUFnQixFQUFtQixNQUFNLDJDQUEyQyxDQUFDOztBQWE5RixNQUFNLE9BQU8sc0JBQXNCO0lBMEJqQyxZQUNxQyxHQUFhLEVBQ0wsU0FBMEI7UUFEbEMsUUFBRyxHQUFILEdBQUcsQ0FBVTtRQUNMLGNBQVMsR0FBVCxTQUFTLENBQWlCO1FBM0J2RTs7V0FFRztRQUNhLFlBQU8sR0FBRyxTQUFTLENBQUM7UUFFcEM7O1dBRUc7UUFDYSxVQUFLLEdBQUcsQ0FBQyxDQUFDO1FBRTFCOztXQUVHO1FBQ2EsU0FBSSxHQUEwQixFQUFFLENBQUM7UUFFakQ7O1dBRUc7UUFDYSxZQUFPLEdBQWdDLEVBQUUsQ0FBQztJQVV2RCxDQUFDO0lBRUo7OztPQUdHO0lBQ0ssWUFBWTtRQUNsQixNQUFNLE1BQU0sR0FBaUMsRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLEtBQUssRUFBRSxFQUFFLEVBQUUsTUFBTSxFQUFFLEVBQUUsRUFBRSxJQUFJLEVBQUUsRUFBRSxFQUFFLENBQUM7UUFDMUYsTUFBTSxRQUFRLEdBQUcsR0FBRyxDQUFDO1FBQ3JCLE1BQU0sU0FBUyxHQUFHO1lBQ2hCLEtBQUssRUFBRSxFQUFFO1lBQ1QsTUFBTSxFQUFFLEVBQUU7U0FDWCxDQUFDO1FBQ0YsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxRQUFRLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsV0FBVyxHQUFHLFNBQVMsQ0FBQyxLQUFLLENBQUMsR0FBRyxNQUFNLENBQUMsSUFBSSxHQUFHLE1BQU0sQ0FBQyxLQUFLLENBQUM7UUFDM0csTUFBTSxNQUFNLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsWUFBWSxHQUFHLE1BQU0sQ0FBQyxHQUFHLEdBQUcsTUFBTSxDQUFDLE1BQU0sR0FBRyxTQUFTLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDM0csTUFBTSxPQUFPLEdBQWdDO1lBQzNDLEtBQUs7WUFDTCxNQUFNO1lBQ04sTUFBTTtZQUNOLEdBQUcsSUFBSSxDQUFDLE9BQU87WUFDZixLQUFLLEVBQUUsSUFBSSxDQUFDLEtBQUs7U0FDbEIsQ0FBQztRQUNGLE9BQU8sT0FBTyxDQUFDO0lBQ2pCLENBQUM7SUFFRDs7T0FFRztJQUNLLFNBQVM7UUFDZixJQUFJLE9BQU8sSUFBSSxDQUFDLFNBQVMsS0FBSyxXQUFXLEVBQUU7WUFDekMsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1lBQ3BDLElBQUksQ0FBQyxTQUFTLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUUsSUFBSSxDQUFDLElBQUksRUFBRSxPQUFPLENBQUMsQ0FBQztTQUNuRTtJQUNILENBQUM7SUFFRDs7T0FFRztJQUNJLGVBQWU7UUFDcEIsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ25CLENBQUM7SUFFRDs7T0FFRztJQUNJLFdBQVcsQ0FBQyxPQUFzQjtRQUN2QyxNQUFNLElBQUksR0FBc0MsT0FBTyxDQUFDLElBQUksRUFBRSxZQUFZLENBQUM7UUFDM0UsTUFBTSxPQUFPLEdBQWdDLE9BQU8sQ0FBQyxPQUFPLEVBQUUsWUFBWSxDQUFDO1FBQzNFLElBQUksQ0FBQyxPQUFPLElBQUksS0FBSyxXQUFXLElBQUksSUFBSSxLQUFLLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxPQUFPLEtBQUssV0FBVyxJQUFJLE9BQU8sS0FBSyxJQUFJLENBQUMsRUFBRTtZQUMxRyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7U0FDbEI7SUFDSCxDQUFDO2lJQWhGVSxzQkFBc0Isa0JBMkJ2QixRQUFRLGFBQ1IsZ0JBQWdCO3FIQTVCZixzQkFBc0Isc1FDM0JuQyxrS0FLQTs7MkZEc0JhLHNCQUFzQjtrQkFObEMsU0FBUzsrQkFDRSxpQkFBaUIsbUJBR1YsdUJBQXVCLENBQUMsTUFBTTs7MEJBNkI1QyxNQUFNOzJCQUFDLFFBQVE7OzBCQUNmLE1BQU07MkJBQUMsZ0JBQWdCOzRDQXhCVixPQUFPO3NCQUF0QixLQUFLO2dCQUtVLEtBQUs7c0JBQXBCLEtBQUs7Z0JBS1UsSUFBSTtzQkFBbkIsS0FBSztnQkFLVSxPQUFPO3NCQUF0QixLQUFLO2dCQUttQyxTQUFTO3NCQUFqRCxTQUFTO3VCQUFDLFdBQVciLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBET0NVTUVOVCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICBBZnRlclZpZXdJbml0LFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBJbmplY3QsXG4gIElucHV0LFxuICBPbkNoYW5nZXMsXG4gIFNpbXBsZUNoYW5nZSxcbiAgVmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgSUdhdWdlQ2hhcnREYXRhTm9kZSwgSUdhdWdlQ2hhcnRPcHRpb25zIH0gZnJvbSAnLi4vLi4vaW50ZXJmYWNlcy9nYXVnZS1jaGFydC5pbnRlcmZhY2UnO1xuaW1wb3J0IHsgRDNfQ0hBUlRfRkFDVE9SWSwgSUQzQ2hhcnRGYWN0b3J5IH0gZnJvbSAnLi4vLi4vcHJvdmlkZXJzL2QzLWNoYXJ0LWZhY3RvcnkucHJvdmlkZXInO1xuXG5pbnRlcmZhY2UgSUlucHV0Q2hhbmdlcyB7XG4gIGRhdGE/OiBTaW1wbGVDaGFuZ2UgfCBudWxsO1xuICBvcHRpb25zPzogU2ltcGxlQ2hhbmdlIHwgbnVsbDtcbn1cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXBwLWdhdWdlLWNoYXJ0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2dhdWdlLWNoYXJ0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZ2F1Z2UtY2hhcnQuY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEFwcEdhdWdlQ2hhcnRDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0LCBPbkNoYW5nZXMge1xuICAvKipcbiAgICogVGhlIGNoYXJ0IGlkLlxuICAgKi9cbiAgQElucHV0KCkgcHVibGljIGNoYXJ0SWQgPSAnZ2F1Z2UtMCc7XG5cbiAgLyoqXG4gICAqIFRoZSB2YWx1ZSBvZiB0aGUgZ2F1Z2UgY2hhcnQuXG4gICAqL1xuICBASW5wdXQoKSBwdWJsaWMgdmFsdWUgPSAwO1xuXG4gIC8qKlxuICAgKiBUaGUgY2hhcnQgZGF0YS5cbiAgICovXG4gIEBJbnB1dCgpIHB1YmxpYyBkYXRhOiBJR2F1Z2VDaGFydERhdGFOb2RlW10gPSBbXTtcblxuICAvKipcbiAgICogVGhlIGNoYXJ0IG9wdGlvbnMuXG4gICAqL1xuICBASW5wdXQoKSBwdWJsaWMgb3B0aW9uczogUGFydGlhbDxJR2F1Z2VDaGFydE9wdGlvbnM+ID0ge307XG5cbiAgLyoqXG4gICAqIEQzIGNoYXJ0IHZpZXcgY2hpbGQgcmVmZXJlbmNlLlxuICAgKi9cbiAgQFZpZXdDaGlsZCgnY29udGFpbmVyJykgcHJpdmF0ZSByZWFkb25seSBjb250YWluZXI/OiBFbGVtZW50UmVmPEhUTUxEaXZFbGVtZW50PjtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBASW5qZWN0KERPQ1VNRU5UKSBwcml2YXRlIHJlYWRvbmx5IGRvYzogRG9jdW1lbnQsXG4gICAgQEluamVjdChEM19DSEFSVF9GQUNUT1JZKSBwcml2YXRlIHJlYWRvbmx5IGQzRmFjdG9yeTogSUQzQ2hhcnRGYWN0b3J5LFxuICApIHt9XG5cbiAgLyoqXG4gICAqIFRoZSBjaGFydCBvcHRpb25zIGNvbnN0cnVjdG9yLlxuICAgKiBAcmV0dXJucyBjaGFydCBvcHRpb25zXG4gICAqL1xuICBwcml2YXRlIGNoYXJ0T3B0aW9ucygpIHtcbiAgICBjb25zdCBtYXJnaW46IElHYXVnZUNoYXJ0T3B0aW9uc1snbWFyZ2luJ10gPSB7IHRvcDogNTAsIHJpZ2h0OiA1MCwgYm90dG9tOiA1MCwgbGVmdDogNTAgfTtcbiAgICBjb25zdCBtaW5XaWR0aCA9IDM1MDtcbiAgICBjb25zdCBtb2RpZmllcnMgPSB7XG4gICAgICB3aWR0aDogMTAsXG4gICAgICBoZWlnaHQ6IDIwLFxuICAgIH07XG4gICAgY29uc3Qgd2lkdGggPSBNYXRoLm1pbihtaW5XaWR0aCwgdGhpcy5kb2MuYm9keS5jbGllbnRXaWR0aCAtIG1vZGlmaWVycy53aWR0aCkgLSBtYXJnaW4ubGVmdCAtIG1hcmdpbi5yaWdodDtcbiAgICBjb25zdCBoZWlnaHQgPSBNYXRoLm1pbih3aWR0aCwgdGhpcy5kb2MuYm9keS5jbGllbnRIZWlnaHQgLSBtYXJnaW4udG9wIC0gbWFyZ2luLmJvdHRvbSAtIG1vZGlmaWVycy5oZWlnaHQpO1xuICAgIGNvbnN0IG9wdGlvbnM6IFBhcnRpYWw8SUdhdWdlQ2hhcnRPcHRpb25zPiA9IHtcbiAgICAgIHdpZHRoLFxuICAgICAgaGVpZ2h0LFxuICAgICAgbWFyZ2luLFxuICAgICAgLi4udGhpcy5vcHRpb25zLFxuICAgICAgdmFsdWU6IHRoaXMudmFsdWUsXG4gICAgfTtcbiAgICByZXR1cm4gb3B0aW9ucztcbiAgfVxuXG4gIC8qKlxuICAgKiBEcmF3cyB0aGUgY2hhcnQuXG4gICAqL1xuICBwcml2YXRlIGRyYXdDaGFydCgpIHtcbiAgICBpZiAodHlwZW9mIHRoaXMuY29udGFpbmVyICE9PSAndW5kZWZpbmVkJykge1xuICAgICAgY29uc3Qgb3B0aW9ucyA9IHRoaXMuY2hhcnRPcHRpb25zKCk7XG4gICAgICB0aGlzLmQzRmFjdG9yeS5kcmF3R2F1Z2VDaGFydCh0aGlzLmNvbnRhaW5lciwgdGhpcy5kYXRhLCBvcHRpb25zKTtcbiAgICB9XG4gIH1cblxuICAvKipcbiAgICogQWN0dWFsbHkgZHJhd3MgdGhlIGNoYXJ0IGFmdGVyIHRoZSBjb21wb25lbnQgdmlldyBpcyBpbml0aWFsaXplZC5cbiAgICovXG4gIHB1YmxpYyBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgdGhpcy5kcmF3Q2hhcnQoKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBSZWRyYXdzIHRoZSBjaGFydCBvbiBjaGFuZ2VzLlxuICAgKi9cbiAgcHVibGljIG5nT25DaGFuZ2VzKGNoYW5nZXM6IElJbnB1dENoYW5nZXMpOiB2b2lkIHtcbiAgICBjb25zdCBkYXRhOiBJR2F1Z2VDaGFydERhdGFOb2RlW10gfCB1bmRlZmluZWQgPSBjaGFuZ2VzLmRhdGE/LmN1cnJlbnRWYWx1ZTtcbiAgICBjb25zdCBvcHRpb25zOiBQYXJ0aWFsPElHYXVnZUNoYXJ0T3B0aW9ucz4gPSBjaGFuZ2VzLm9wdGlvbnM/LmN1cnJlbnRWYWx1ZTtcbiAgICBpZiAoKHR5cGVvZiBkYXRhICE9PSAndW5kZWZpbmVkJyAmJiBkYXRhICE9PSBudWxsKSB8fCAodHlwZW9mIG9wdGlvbnMgIT09ICd1bmRlZmluZWQnICYmIG9wdGlvbnMgIT09IG51bGwpKSB7XG4gICAgICB0aGlzLmRyYXdDaGFydCgpO1xuICAgIH1cbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImNvbnRhaW5lclwiPlxuICA8ZGl2IGlkPVwie3sgY2hhcnRJZCB9fVwiICNjb250YWluZXI+PC9kaXY+XG5cbiAgPHNtYWxsIGNsYXNzPVwiY29udGFpbmVyLS1jaGFydC10aXRsZVwiPnt7IG9wdGlvbnMuY2hhcnRUaXRsZSB9fTwvc21hbGw+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
export * from './bar-chart/bar-chart.component';
|
|
2
2
|
export * from './chart-examples/chart-examples.component';
|
|
3
3
|
export * from './force-directed-chart/force-directed-chart.component';
|
|
4
|
+
export * from './gauge-chart/gauge-chart.component';
|
|
4
5
|
export * from './line-chart/line-chart.component';
|
|
5
6
|
export * from './pie-chart/pie-chart.component';
|
|
6
7
|
export * from './radar-chart/radar-chart.component';
|
|
7
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
8
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NsaWVudC1kMy1jaGFydHMvc3JjL2xpYi9jb21wb25lbnRzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsaUNBQWlDLENBQUM7QUFDaEQsY0FBYywyQ0FBMkMsQ0FBQztBQUMxRCxjQUFjLHVEQUF1RCxDQUFDO0FBQ3RFLGNBQWMscUNBQXFDLENBQUM7QUFDcEQsY0FBYyxtQ0FBbUMsQ0FBQztBQUNsRCxjQUFjLGlDQUFpQyxDQUFDO0FBQ2hELGNBQWMscUNBQXFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2Jhci1jaGFydC9iYXItY2hhcnQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vY2hhcnQtZXhhbXBsZXMvY2hhcnQtZXhhbXBsZXMuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vZm9yY2UtZGlyZWN0ZWQtY2hhcnQvZm9yY2UtZGlyZWN0ZWQtY2hhcnQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vZ2F1Z2UtY2hhcnQvZ2F1Z2UtY2hhcnQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGluZS1jaGFydC9saW5lLWNoYXJ0LmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL3BpZS1jaGFydC9waWUtY2hhcnQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vcmFkYXItY2hhcnQvcmFkYXItY2hhcnQuY29tcG9uZW50JztcbiJdfQ==
|
|
@@ -67,10 +67,10 @@ export class AppLineChartComponent {
|
|
|
67
67
|
this.drawChart();
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
71
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.
|
|
70
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppLineChartComponent, deps: [{ token: DOCUMENT }, { token: D3_CHART_FACTORY }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
71
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: AppLineChartComponent, selector: "app-line-chart", inputs: { chartId: "chartId", data: "data", options: "options" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\" id=\"{{ chartId }}\" #container></div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center}:host .container{flex:0 1 auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
72
72
|
}
|
|
73
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
73
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppLineChartComponent, decorators: [{
|
|
74
74
|
type: Component,
|
|
75
75
|
args: [{ selector: 'app-line-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\" id=\"{{ chartId }}\" #container></div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center}:host .container{flex:0 1 auto}\n"] }]
|
|
76
76
|
}], ctorParameters: function () { return [{ type: Document, decorators: [{
|
|
@@ -65,10 +65,10 @@ export class AppPieChartComponent {
|
|
|
65
65
|
this.drawChart();
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
69
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.
|
|
68
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppPieChartComponent, deps: [{ token: DOCUMENT }, { token: D3_CHART_FACTORY }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
69
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: AppPieChartComponent, selector: "app-pie-chart", inputs: { chartId: "chartId", data: "data", options: "options" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\">\n <div id=\"{{ chartId }}\" #container></div>\n\n <small class=\"container--chart-title\">{{ options.chartTitle }}</small>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center}:host canvas{width:auto!important;height:150px}:host .container{flex:0 1 auto}:host .container--chart-title{display:block;text-align:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
70
70
|
}
|
|
71
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
71
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppPieChartComponent, decorators: [{
|
|
72
72
|
type: Component,
|
|
73
73
|
args: [{ selector: 'app-pie-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\">\n <div id=\"{{ chartId }}\" #container></div>\n\n <small class=\"container--chart-title\">{{ options.chartTitle }}</small>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center}:host canvas{width:auto!important;height:150px}:host .container{flex:0 1 auto}:host .container--chart-title{display:block;text-align:center}\n"] }]
|
|
74
74
|
}], ctorParameters: function () { return [{ type: Document, decorators: [{
|
|
@@ -77,10 +77,10 @@ export class AppRadarChartComponent {
|
|
|
77
77
|
this.drawChart();
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
81
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.
|
|
80
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppRadarChartComponent, deps: [{ token: DOCUMENT }, { token: D3_CHART_FACTORY }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
81
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: AppRadarChartComponent, selector: "app-radar-chart", inputs: { chartId: "chartId", data: "data", options: "options" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\" id=\"{{ chartId }}\" #container></div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center}:host .container{flex:0 1 auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
82
82
|
}
|
|
83
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
83
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppRadarChartComponent, decorators: [{
|
|
84
84
|
type: Component,
|
|
85
85
|
args: [{ selector: 'app-radar-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\" id=\"{{ chartId }}\" #container></div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center}:host .container{flex:0 1 auto}\n"] }]
|
|
86
86
|
}], ctorParameters: function () { return [{ type: Document, decorators: [{
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { CommonModule } from '@angular/common';
|
|
2
2
|
import { NgModule } from '@angular/core';
|
|
3
|
+
import { AppGaugeChartComponent } from './components';
|
|
3
4
|
import { AppBarChartComponent } from './components/bar-chart/bar-chart.component';
|
|
4
5
|
import { AppChartExamplesComponent } from './components/chart-examples/chart-examples.component';
|
|
5
6
|
import { AppChartExamplesBarComponent } from './components/chart-examples-bar/chart-examples-bar.component';
|
|
6
7
|
import { AppChartExamplesForceDirectedComponent } from './components/chart-examples-force-directed/chart-examples-force-directed.component';
|
|
8
|
+
import { AppChartExamplesGaugeComponent } from './components/chart-examples-gauge/chart-examples-gauge.component';
|
|
7
9
|
import { AppChartExamplesLineComponent } from './components/chart-examples-line/chart-examples-line.component';
|
|
8
10
|
import { AppChartExamplesPieComponent } from './components/chart-examples-pie/chart-examples-pie.component';
|
|
9
11
|
import { AppChartExamplesRadaraComponent } from './components/chart-examples-radar/chart-examples-radar.component';
|
|
@@ -13,8 +15,9 @@ import { AppPieChartComponent } from './components/pie-chart/pie-chart.component
|
|
|
13
15
|
import { AppRadarChartComponent } from './components/radar-chart/radar-chart.component';
|
|
14
16
|
import * as i0 from "@angular/core";
|
|
15
17
|
export class AppD3ChartsModule {
|
|
16
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
17
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.
|
|
18
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppD3ChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
19
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: AppD3ChartsModule, declarations: [AppGaugeChartComponent,
|
|
20
|
+
AppPieChartComponent,
|
|
18
21
|
AppRadarChartComponent,
|
|
19
22
|
AppForceDirectedChartComponent,
|
|
20
23
|
AppBarChartComponent,
|
|
@@ -24,19 +27,22 @@ export class AppD3ChartsModule {
|
|
|
24
27
|
AppChartExamplesRadaraComponent,
|
|
25
28
|
AppChartExamplesBarComponent,
|
|
26
29
|
AppChartExamplesPieComponent,
|
|
27
|
-
|
|
30
|
+
AppChartExamplesGaugeComponent,
|
|
31
|
+
AppChartExamplesForceDirectedComponent], imports: [CommonModule], exports: [AppGaugeChartComponent,
|
|
32
|
+
AppPieChartComponent,
|
|
28
33
|
AppRadarChartComponent,
|
|
29
34
|
AppForceDirectedChartComponent,
|
|
30
35
|
AppBarChartComponent,
|
|
31
36
|
AppLineChartComponent,
|
|
32
37
|
AppChartExamplesComponent] }); }
|
|
33
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.
|
|
38
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppD3ChartsModule, imports: [CommonModule] }); }
|
|
34
39
|
}
|
|
35
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
40
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: AppD3ChartsModule, decorators: [{
|
|
36
41
|
type: NgModule,
|
|
37
42
|
args: [{
|
|
38
43
|
imports: [CommonModule],
|
|
39
44
|
declarations: [
|
|
45
|
+
AppGaugeChartComponent,
|
|
40
46
|
AppPieChartComponent,
|
|
41
47
|
AppRadarChartComponent,
|
|
42
48
|
AppForceDirectedChartComponent,
|
|
@@ -47,9 +53,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
|
|
|
47
53
|
AppChartExamplesRadaraComponent,
|
|
48
54
|
AppChartExamplesBarComponent,
|
|
49
55
|
AppChartExamplesPieComponent,
|
|
56
|
+
AppChartExamplesGaugeComponent,
|
|
50
57
|
AppChartExamplesForceDirectedComponent,
|
|
51
58
|
],
|
|
52
59
|
exports: [
|
|
60
|
+
AppGaugeChartComponent,
|
|
53
61
|
AppPieChartComponent,
|
|
54
62
|
AppRadarChartComponent,
|
|
55
63
|
AppForceDirectedChartComponent,
|
|
@@ -59,4 +67,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
|
|
|
59
67
|
],
|
|
60
68
|
}]
|
|
61
69
|
}] });
|
|
62
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
70
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZDMtY2hhcnRzLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMvY2xpZW50LWQzLWNoYXJ0cy9zcmMvbGliL2QzLWNoYXJ0cy5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFekMsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sY0FBYyxDQUFDO0FBQ3RELE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLDRDQUE0QyxDQUFDO0FBQ2xGLE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxNQUFNLHNEQUFzRCxDQUFDO0FBQ2pHLE9BQU8sRUFBRSw0QkFBNEIsRUFBRSxNQUFNLDhEQUE4RCxDQUFDO0FBQzVHLE9BQU8sRUFBRSxzQ0FBc0MsRUFBRSxNQUFNLG9GQUFvRixDQUFDO0FBQzVJLE9BQU8sRUFBRSw4QkFBOEIsRUFBRSxNQUFNLGtFQUFrRSxDQUFDO0FBQ2xILE9BQU8sRUFBRSw2QkFBNkIsRUFBRSxNQUFNLGdFQUFnRSxDQUFDO0FBQy9HLE9BQU8sRUFBRSw0QkFBNEIsRUFBRSxNQUFNLDhEQUE4RCxDQUFDO0FBQzVHLE9BQU8sRUFBRSwrQkFBK0IsRUFBRSxNQUFNLGtFQUFrRSxDQUFDO0FBQ25ILE9BQU8sRUFBRSw4QkFBOEIsRUFBRSxNQUFNLGtFQUFrRSxDQUFDO0FBQ2xILE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDhDQUE4QyxDQUFDO0FBQ3JGLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLDRDQUE0QyxDQUFDO0FBQ2xGLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLGdEQUFnRCxDQUFDOztBQTZCeEYsTUFBTSxPQUFPLGlCQUFpQjtpSUFBakIsaUJBQWlCO2tJQUFqQixpQkFBaUIsaUJBeEIxQixzQkFBc0I7WUFDdEIsb0JBQW9CO1lBQ3BCLHNCQUFzQjtZQUN0Qiw4QkFBOEI7WUFDOUIsb0JBQW9CO1lBQ3BCLHFCQUFxQjtZQUNyQix5QkFBeUI7WUFDekIsNkJBQTZCO1lBQzdCLCtCQUErQjtZQUMvQiw0QkFBNEI7WUFDNUIsNEJBQTRCO1lBQzVCLDhCQUE4QjtZQUM5QixzQ0FBc0MsYUFkOUIsWUFBWSxhQWlCcEIsc0JBQXNCO1lBQ3RCLG9CQUFvQjtZQUNwQixzQkFBc0I7WUFDdEIsOEJBQThCO1lBQzlCLG9CQUFvQjtZQUNwQixxQkFBcUI7WUFDckIseUJBQXlCO2tJQUdoQixpQkFBaUIsWUExQmxCLFlBQVk7OzJGQTBCWCxpQkFBaUI7a0JBM0I3QixRQUFRO21CQUFDO29CQUNSLE9BQU8sRUFBRSxDQUFDLFlBQVksQ0FBQztvQkFDdkIsWUFBWSxFQUFFO3dCQUNaLHNCQUFzQjt3QkFDdEIsb0JBQW9CO3dCQUNwQixzQkFBc0I7d0JBQ3RCLDhCQUE4Qjt3QkFDOUIsb0JBQW9CO3dCQUNwQixxQkFBcUI7d0JBQ3JCLHlCQUF5Qjt3QkFDekIsNkJBQTZCO3dCQUM3QiwrQkFBK0I7d0JBQy9CLDRCQUE0Qjt3QkFDNUIsNEJBQTRCO3dCQUM1Qiw4QkFBOEI7d0JBQzlCLHNDQUFzQztxQkFDdkM7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLHNCQUFzQjt3QkFDdEIsb0JBQW9CO3dCQUNwQixzQkFBc0I7d0JBQ3RCLDhCQUE4Qjt3QkFDOUIsb0JBQW9CO3dCQUNwQixxQkFBcUI7d0JBQ3JCLHlCQUF5QjtxQkFDMUI7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQXBwR2F1Z2VDaGFydENvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cyc7XG5pbXBvcnQgeyBBcHBCYXJDaGFydENvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9iYXItY2hhcnQvYmFyLWNoYXJ0LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBBcHBDaGFydEV4YW1wbGVzQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2NoYXJ0LWV4YW1wbGVzL2NoYXJ0LWV4YW1wbGVzLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBBcHBDaGFydEV4YW1wbGVzQmFyQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2NoYXJ0LWV4YW1wbGVzLWJhci9jaGFydC1leGFtcGxlcy1iYXIuY29tcG9uZW50JztcbmltcG9ydCB7IEFwcENoYXJ0RXhhbXBsZXNGb3JjZURpcmVjdGVkQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2NoYXJ0LWV4YW1wbGVzLWZvcmNlLWRpcmVjdGVkL2NoYXJ0LWV4YW1wbGVzLWZvcmNlLWRpcmVjdGVkLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBBcHBDaGFydEV4YW1wbGVzR2F1Z2VDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvY2hhcnQtZXhhbXBsZXMtZ2F1Z2UvY2hhcnQtZXhhbXBsZXMtZ2F1Z2UuY29tcG9uZW50JztcbmltcG9ydCB7IEFwcENoYXJ0RXhhbXBsZXNMaW5lQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2NoYXJ0LWV4YW1wbGVzLWxpbmUvY2hhcnQtZXhhbXBsZXMtbGluZS5jb21wb25lbnQnO1xuaW1wb3J0IHsgQXBwQ2hhcnRFeGFtcGxlc1BpZUNvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9jaGFydC1leGFtcGxlcy1waWUvY2hhcnQtZXhhbXBsZXMtcGllLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBBcHBDaGFydEV4YW1wbGVzUmFkYXJhQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2NoYXJ0LWV4YW1wbGVzLXJhZGFyL2NoYXJ0LWV4YW1wbGVzLXJhZGFyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBBcHBGb3JjZURpcmVjdGVkQ2hhcnRDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvZm9yY2UtZGlyZWN0ZWQtY2hhcnQvZm9yY2UtZGlyZWN0ZWQtY2hhcnQuY29tcG9uZW50JztcbmltcG9ydCB7IEFwcExpbmVDaGFydENvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9saW5lLWNoYXJ0L2xpbmUtY2hhcnQuY29tcG9uZW50JztcbmltcG9ydCB7IEFwcFBpZUNoYXJ0Q29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL3BpZS1jaGFydC9waWUtY2hhcnQuY29tcG9uZW50JztcbmltcG9ydCB7IEFwcFJhZGFyQ2hhcnRDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvcmFkYXItY2hhcnQvcmFkYXItY2hhcnQuY29tcG9uZW50JztcblxuQE5nTW9kdWxlKHtcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG4gIGRlY2xhcmF0aW9uczogW1xuICAgIEFwcEdhdWdlQ2hhcnRDb21wb25lbnQsXG4gICAgQXBwUGllQ2hhcnRDb21wb25lbnQsXG4gICAgQXBwUmFkYXJDaGFydENvbXBvbmVudCxcbiAgICBBcHBGb3JjZURpcmVjdGVkQ2hhcnRDb21wb25lbnQsXG4gICAgQXBwQmFyQ2hhcnRDb21wb25lbnQsXG4gICAgQXBwTGluZUNoYXJ0Q29tcG9uZW50LFxuICAgIEFwcENoYXJ0RXhhbXBsZXNDb21wb25lbnQsXG4gICAgQXBwQ2hhcnRFeGFtcGxlc0xpbmVDb21wb25lbnQsXG4gICAgQXBwQ2hhcnRFeGFtcGxlc1JhZGFyYUNvbXBvbmVudCxcbiAgICBBcHBDaGFydEV4YW1wbGVzQmFyQ29tcG9uZW50LFxuICAgIEFwcENoYXJ0RXhhbXBsZXNQaWVDb21wb25lbnQsXG4gICAgQXBwQ2hhcnRFeGFtcGxlc0dhdWdlQ29tcG9uZW50LFxuICAgIEFwcENoYXJ0RXhhbXBsZXNGb3JjZURpcmVjdGVkQ29tcG9uZW50LFxuICBdLFxuICBleHBvcnRzOiBbXG4gICAgQXBwR2F1Z2VDaGFydENvbXBvbmVudCxcbiAgICBBcHBQaWVDaGFydENvbXBvbmVudCxcbiAgICBBcHBSYWRhckNoYXJ0Q29tcG9uZW50LFxuICAgIEFwcEZvcmNlRGlyZWN0ZWRDaGFydENvbXBvbmVudCxcbiAgICBBcHBCYXJDaGFydENvbXBvbmVudCxcbiAgICBBcHBMaW5lQ2hhcnRDb21wb25lbnQsXG4gICAgQXBwQ2hhcnRFeGFtcGxlc0NvbXBvbmVudCxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgQXBwRDNDaGFydHNNb2R1bGUge31cbiJdfQ==
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export {};
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2F1Z2UtY2hhcnQuaW50ZXJmYWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jbGllbnQtZDMtY2hhcnRzL3NyYy9saWIvaW50ZXJmYWNlcy9nYXVnZS1jaGFydC5pbnRlcmZhY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBpbnRlcmZhY2UgSUdhdWdlQ2hhcnREYXRhTm9kZSB7XG4gIGtleTogc3RyaW5nO1xuICB5OiBudW1iZXI7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgSUdhdWdlQ2hhcnRPcHRpb25zIHtcbiAgLyoqIFRoZSBjaGFydCB0aXRsZSAqL1xuICBjaGFydFRpdGxlOiBzdHJpbmc7XG4gIC8qKiBUaGUgY2hhcnQgd2lkdGggZm9yIGNhbGN1bGF0aW9uIG9mIHRoZSBvdXRlciByYWRpdXMgKi9cbiAgd2lkdGg6IG51bWJlcjtcbiAgLyoqIFRoZSBjaGFydCBoZWlnaHQgZm9yIGNhbGN1bGF0aW9uIG9mIHRoZSBvdXRlciByYWRpdXMgKi9cbiAgaGVpZ2h0OiBudW1iZXI7XG4gIC8qKiBUaGUgY2hhcnQgbWFyZ2lucyBmcm9tIHRoZSBib3JkZXIgb2YgdGhlIGNvbnRhaW5lciAqL1xuICBtYXJnaW46IHtcbiAgICB0b3A6IG51bWJlcjtcbiAgICByaWdodDogbnVtYmVyO1xuICAgIGJvdHRvbTogbnVtYmVyO1xuICAgIGxlZnQ6IG51bWJlcjtcbiAgfTtcbiAgLyoqIFRoZSBpbm5lciByYWRpdXMgb2YgdGhlIGNoYXJ0ICovXG4gIGlubmVyUmFkaXVzOiBudW1iZXI7XG4gIC8qKiBUaGUgY2hhcnQgbGFiZWwgb2Zmc2V0IHJlbGF0aXZlIHRvIHRoZSBvdXRlciBib3JkZXIgKi9cbiAgbGFiZWxSYWRpdXNNb2RpZmllcjogbnVtYmVyO1xuICAvKiogVGhlIGNoYXJ0IGxhYmVsIHRleHQgd3JhcCB3aWR0aCAqL1xuICBsYWJlbFRleHRXcmFwV2lkdGg6IG51bWJlcjtcbiAgLyoqIFdoZXRoZXIgdG8gc2hvdyBsYWJlbHMgbmV4dCB0byB0aGUgY2hhcnQgc2xpY2VzICovXG4gIHNob3dMYWJlbHM6IGJvb2xlYW47XG4gIC8qKiBXaGV0aGVyIHRvIHNob3cgdG9vbHRpcHMgb24gY2h1bmsgaG92ZXIgYmVsb3cgdGhlIGNoYXJ0ICovXG4gIHNob3dUb29sdGlwczogYm9vbGVhbjtcbiAgLyoqIFRyYW5zaXRpb24gZHVyYXRpb24gY29uZmlndXJhdGlvbi4gVXNlZCBtYWlubHkgZm9yIHRoZSBjaGFydCB0b29sdGlwcy4gKi9cbiAgdHJhbnNpdGlvbkR1cmF0aW9uOiBudW1iZXI7XG4gIC8qKiBUaGUgY29sb3IgZm9yIHRoZSBmaWxsZWQgY2h1bmtzICovXG4gIGNvbG9yOiBzdHJpbmc7XG4gIC8qKiBUaGUgY29sb3IgZm9yIHRoZSBlbXB0eSBjaHVua3MgKi9cbiAgZGVmYXVsdENvbG9yOiBzdHJpbmc7XG4gIC8qKiBUaGUgdmFsdWUgb2YgdGhlIGdhdWdlIGNoYXJ0ICovXG4gIHZhbHVlOiBudW1iZXI7XG59XG4iXX0=
|