@rfprodz/client-d3-charts 1.2.22 → 1.2.23
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/esm2020/lib/components/bar-chart/bar-chart.component.mjs +3 -3
- package/esm2020/lib/components/chart-examples/chart-examples.component.mjs +3 -3
- package/esm2020/lib/components/force-directed-chart/force-directed-chart.component.mjs +3 -3
- package/esm2020/lib/components/line-chart/line-chart.component.mjs +3 -3
- package/esm2020/lib/components/pie-chart/pie-chart.component.mjs +3 -3
- package/esm2020/lib/components/radar-chart/radar-chart.component.mjs +3 -3
- package/esm2020/lib/d3-charts.module.mjs +4 -4
- package/esm2020/lib/interfaces/pie-chart.interface.mjs +1 -1
- package/esm2020/lib/util/pie-chart.util.mjs +16 -13
- package/fesm2015/rfprodz-client-d3-charts.mjs +37 -34
- package/fesm2015/rfprodz-client-d3-charts.mjs.map +1 -1
- package/fesm2020/rfprodz-client-d3-charts.mjs +37 -34
- package/fesm2020/rfprodz-client-d3-charts.mjs.map +1 -1
- package/lib/interfaces/pie-chart.interface.d.ts +10 -0
- package/package.json +3 -3
|
@@ -63,9 +63,9 @@ export class AppBarChartComponent {
|
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
|
-
/** @nocollapse */ AppBarChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
67
|
-
/** @nocollapse */ AppBarChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.
|
|
68
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
66
|
+
/** @nocollapse */ AppBarChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppBarChartComponent, deps: [{ token: DOCUMENT }, { token: D3_CHART_FACTORY }], target: i0.ɵɵFactoryTarget.Component });
|
|
67
|
+
/** @nocollapse */ AppBarChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.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 });
|
|
68
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.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: [{
|
|
@@ -172,9 +172,9 @@ export class AppChartExamplesComponent {
|
|
|
172
172
|
};
|
|
173
173
|
}
|
|
174
174
|
}
|
|
175
|
-
/** @nocollapse */ AppChartExamplesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
176
|
-
/** @nocollapse */ AppChartExamplesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.
|
|
177
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
175
|
+
/** @nocollapse */ AppChartExamplesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppChartExamplesComponent, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
|
|
176
|
+
/** @nocollapse */ AppChartExamplesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: AppChartExamplesComponent, selector: "app-chart-examples", 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\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<div class=\"container\" *ngIf=\"lineChartConfig$ | async as config\">\n <app-line-chart [chartId]=\"'line-example-1'\" [data]=\"config.data\" [options]=\"config.options\"></app-line-chart>\n</div>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<div class=\"container\" *ngIf=\"radarChartConfig$ | async as config\">\n <app-radar-chart [chartId]=\"'radar-example-1'\" [data]=\"config.data\" [options]=\"config.options\"></app-radar-chart>\n</div>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<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\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<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{flex:1 1 auto;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.AppPieChartComponent, selector: "app-pie-chart", inputs: ["chartId", "data", "options"] }, { kind: "component", type: i4.AppRadarChartComponent, selector: "app-radar-chart", inputs: ["chartId", "data", "options"] }, { kind: "component", type: i5.AppForceDirectedChartComponent, selector: "app-force-directed-chart", inputs: ["chartId", "data", "options"] }, { kind: "component", type: i6.AppBarChartComponent, selector: "app-bar-chart", inputs: ["chartId", "data", "options"] }, { kind: "component", type: i7.AppLineChartComponent, selector: "app-line-chart", inputs: ["chartId", "data", "options"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
177
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppChartExamplesComponent, decorators: [{
|
|
178
178
|
type: Component,
|
|
179
179
|
args: [{ selector: 'app-chart-examples', 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\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<div class=\"container\" *ngIf=\"lineChartConfig$ | async as config\">\n <app-line-chart [chartId]=\"'line-example-1'\" [data]=\"config.data\" [options]=\"config.options\"></app-line-chart>\n</div>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<div class=\"container\" *ngIf=\"radarChartConfig$ | async as config\">\n <app-radar-chart [chartId]=\"'radar-example-1'\" [data]=\"config.data\" [options]=\"config.options\"></app-radar-chart>\n</div>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<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\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<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{flex:1 1 auto;width:100%}\n"] }]
|
|
180
180
|
}], ctorParameters: function () { return [{ type: i1.BreakpointObserver }]; } });
|
|
@@ -68,9 +68,9 @@ export class AppForceDirectedChartComponent {
|
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
|
-
/** @nocollapse */ AppForceDirectedChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
72
|
-
/** @nocollapse */ AppForceDirectedChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.
|
|
73
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
71
|
+
/** @nocollapse */ AppForceDirectedChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppForceDirectedChartComponent, deps: [{ token: DOCUMENT }, { token: D3_CHART_FACTORY }], target: i0.ɵɵFactoryTarget.Component });
|
|
72
|
+
/** @nocollapse */ AppForceDirectedChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.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 });
|
|
73
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.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: [{
|
|
@@ -67,9 +67,9 @@ export class AppLineChartComponent {
|
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
|
-
/** @nocollapse */ AppLineChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
71
|
-
/** @nocollapse */ AppLineChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.
|
|
72
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
70
|
+
/** @nocollapse */ AppLineChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppLineChartComponent, deps: [{ token: DOCUMENT }, { token: D3_CHART_FACTORY }], target: i0.ɵɵFactoryTarget.Component });
|
|
71
|
+
/** @nocollapse */ AppLineChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.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
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppLineChartComponent, decorators: [{
|
|
73
73
|
type: Component,
|
|
74
74
|
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"] }]
|
|
75
75
|
}], ctorParameters: function () { return [{ type: Document, decorators: [{
|
|
@@ -66,9 +66,9 @@ export class AppPieChartComponent {
|
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
|
-
/** @nocollapse */ AppPieChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
70
|
-
/** @nocollapse */ AppPieChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.
|
|
71
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
69
|
+
/** @nocollapse */ AppPieChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppPieChartComponent, deps: [{ token: DOCUMENT }, { token: D3_CHART_FACTORY }], target: i0.ɵɵFactoryTarget.Component });
|
|
70
|
+
/** @nocollapse */ AppPieChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.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 });
|
|
71
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.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: [{
|
|
@@ -78,9 +78,9 @@ export class AppRadarChartComponent {
|
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
|
-
/** @nocollapse */ AppRadarChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
82
|
-
/** @nocollapse */ AppRadarChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.
|
|
83
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
81
|
+
/** @nocollapse */ AppRadarChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppRadarChartComponent, deps: [{ token: DOCUMENT }, { token: D3_CHART_FACTORY }], target: i0.ɵɵFactoryTarget.Component });
|
|
82
|
+
/** @nocollapse */ AppRadarChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.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 });
|
|
83
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.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: [{
|
|
@@ -9,8 +9,8 @@ import { AppRadarChartComponent } from './components/radar-chart/radar-chart.com
|
|
|
9
9
|
import * as i0 from "@angular/core";
|
|
10
10
|
export class AppD3ChartsModule {
|
|
11
11
|
}
|
|
12
|
-
/** @nocollapse */ AppD3ChartsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
13
|
-
/** @nocollapse */ AppD3ChartsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.
|
|
12
|
+
/** @nocollapse */ AppD3ChartsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppD3ChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
13
|
+
/** @nocollapse */ AppD3ChartsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: AppD3ChartsModule, declarations: [AppPieChartComponent,
|
|
14
14
|
AppRadarChartComponent,
|
|
15
15
|
AppForceDirectedChartComponent,
|
|
16
16
|
AppBarChartComponent,
|
|
@@ -21,8 +21,8 @@ export class AppD3ChartsModule {
|
|
|
21
21
|
AppBarChartComponent,
|
|
22
22
|
AppLineChartComponent,
|
|
23
23
|
AppChartExamplesComponent] });
|
|
24
|
-
/** @nocollapse */ AppD3ChartsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.
|
|
25
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
24
|
+
/** @nocollapse */ AppD3ChartsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppD3ChartsModule, imports: [CommonModule] });
|
|
25
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppD3ChartsModule, decorators: [{
|
|
26
26
|
type: NgModule,
|
|
27
27
|
args: [{
|
|
28
28
|
imports: [CommonModule],
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGllLWNoYXJ0LmludGVyZmFjZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY2xpZW50LWQzLWNoYXJ0cy9zcmMvbGliL2ludGVyZmFjZXMvcGllLWNoYXJ0LmludGVyZmFjZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGludGVyZmFjZSBJUGllQ2hhcnREYXRhTm9kZSB7XG4gIGtleTogc3RyaW5nO1xuICB5OiBudW1iZXI7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgSVBpZUNoYXJ0T3B0aW9ucyB7XG4gIC8qKiBUaGUgY2hhcnQgdGl0bGUgKi9cbiAgY2hhcnRUaXRsZTogc3RyaW5nO1xuICAvKiogVGhlIGNoYXJ0IHdpZHRoIGZvciBjYWxjdWxhdGlvbiBvZiB0aGUgb3V0ZXIgcmFkaXVzICovXG4gIHdpZHRoOiBudW1iZXI7XG4gIC8qKiBUaGUgY2hhcnQgaGVpZ2h0IGZvciBjYWxjdWxhdGlvbiBvZiB0aGUgb3V0ZXIgcmFkaXVzICovXG4gIGhlaWdodDogbnVtYmVyO1xuICAvKiogVGhlIGNoYXJ0IG1hcmdpbnMgZnJvbSB0aGUgYm9yZGVyIG9mIHRoZSBjb250YWluZXIgKi9cbiAgbWFyZ2luOiB7XG4gICAgdG9wOiBudW1iZXI7XG4gICAgcmlnaHQ6IG51bWJlcjtcbiAgICBib3R0b206IG51bWJlcjtcbiAgICBsZWZ0OiBudW1iZXI7XG4gIH07XG4gIC8qKiBUaGUgaW5uZXIgcmFkaXVzIG9mIHRoZSBjaGFydCAqL1xuICBpbm5lclJhZGl1czogbnVtYmVyO1xuICAvKiogVGhlIGNoYXJ0IGxhYmVsIG9mZnNldCByZWxhdGl2ZSB0byB0aGUgb3V0ZXIgYm9yZGVyICovXG4gIGxhYmVsUmFkaXVzTW9kaWZpZXI6IG51bWJlcjtcbiAgLyoqIFRoZSBjaGFydCBsYWJlbCB0ZXh0IHdyYXAgd2lkdGggKi9cbiAgbGFiZWxUZXh0V3JhcFdpZHRoOiBudW1iZXI7XG4gIC8qKiBXaGV0aGVyIHRvIHNob3cgbGFiZWxzIG5leHQgdG8gdGhlIGNoYXJ0IHNsaWNlcyAqL1xuICBzaG93TGFiZWxzOiBib29sZWFuO1xuICAvKiogVGhlIGNvbG9yIHNjYWxlIGZvciB0aGUgY2hhcnQgKi9cbiAgY29sb3I6IGQzLlNjYWxlT3JkaW5hbDxzdHJpbmcsIHN0cmluZz47XG59XG4iXX0=
|
|
@@ -14,6 +14,7 @@ export const defaultPieChartConfig = Object.freeze({
|
|
|
14
14
|
left: 20,
|
|
15
15
|
},
|
|
16
16
|
innerRadius: 0,
|
|
17
|
+
showLabels: true,
|
|
17
18
|
labelRadiusModifier: 50,
|
|
18
19
|
labelTextWrapWidth: 60,
|
|
19
20
|
color: d3.scaleOrdinal(d3.schemeCategory10),
|
|
@@ -68,22 +69,24 @@ export const drawPieChart = (container, data, options) => {
|
|
|
68
69
|
.on('mouseout', function (event, d) {
|
|
69
70
|
d3.select('#tooltip').style('opacity', 0);
|
|
70
71
|
});
|
|
71
|
-
const label = d3
|
|
72
|
-
.arc()
|
|
73
|
-
.innerRadius(radius)
|
|
74
|
-
.outerRadius(radius + config.labelRadiusModifier);
|
|
75
72
|
arcs
|
|
76
73
|
.append('path')
|
|
77
74
|
.attr('fill', (d, i) => config.color(i.toString()))
|
|
78
75
|
.attr('d', arc);
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
76
|
+
if (config.showLabels) {
|
|
77
|
+
const label = d3
|
|
78
|
+
.arc()
|
|
79
|
+
.innerRadius(radius)
|
|
80
|
+
.outerRadius(radius + config.labelRadiusModifier);
|
|
81
|
+
const textDy = 5;
|
|
82
|
+
arcs
|
|
83
|
+
.append('text')
|
|
84
|
+
.attr('class', 'legend')
|
|
85
|
+
.attr('text-anchor', 'middle')
|
|
86
|
+
.attr('dy', textDy)
|
|
87
|
+
.attr('transform', d => `translate(${label.centroid(d)})`)
|
|
88
|
+
.text(d => d.data.y);
|
|
89
|
+
}
|
|
87
90
|
return config;
|
|
88
91
|
};
|
|
89
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
92
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGllLWNoYXJ0LnV0aWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NsaWVudC1kMy1jaGFydHMvc3JjL2xpYi91dGlsL3BpZS1jaGFydC51dGlsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sS0FBSyxFQUFFLE1BQU0sSUFBSSxDQUFDO0FBR3pCLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBRTdEOztHQUVHO0FBQ0gsTUFBTSxDQUFDLE1BQU0scUJBQXFCLEdBQXFCLE1BQU0sQ0FBQyxNQUFNLENBQW1CO0lBQ3JGLFVBQVUsRUFBRSxFQUFFO0lBQ2QsS0FBSyxFQUFFLEdBQUc7SUFDVixNQUFNLEVBQUUsR0FBRztJQUNYLE1BQU0sRUFBRTtRQUNOLEdBQUcsRUFBRSxFQUFFO1FBQ1AsS0FBSyxFQUFFLEVBQUU7UUFDVCxNQUFNLEVBQUUsRUFBRTtRQUNWLElBQUksRUFBRSxFQUFFO0tBQ1Q7SUFDRCxXQUFXLEVBQUUsQ0FBQztJQUNkLFVBQVUsRUFBRSxJQUFJO0lBQ2hCLG1CQUFtQixFQUFFLEVBQUU7SUFDdkIsa0JBQWtCLEVBQUUsRUFBRTtJQUN0QixLQUFLLEVBQUUsRUFBRSxDQUFDLFlBQVksQ0FBQyxFQUFFLENBQUMsZ0JBQWdCLENBQUM7Q0FDNUMsQ0FBQyxDQUFDO0FBRUg7Ozs7O0dBS0c7QUFDSCxNQUFNLGVBQWUsR0FBRyxDQUFDLFNBQXFDLEVBQUUsTUFBd0IsRUFBRSxFQUFFO0lBQzFGLE1BQU0sRUFBRSxHQUFHLFNBQVMsQ0FBQyxhQUFhLENBQUMsRUFBRSxJQUFJLE9BQU8sQ0FBQztJQUVqRCxFQUFFLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUMsTUFBTSxFQUFFLENBQUM7SUFDM0MsTUFBTSxHQUFHLEdBQUcsRUFBRTtTQUNYLE1BQU0sQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDO1NBQ2hCLE1BQU0sQ0FBQyxLQUFLLENBQUM7U0FDYixJQUFJLENBQUMsT0FBTyxFQUFFLE1BQU0sQ0FBQyxLQUFLLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUM7U0FDdEUsSUFBSSxDQUFDLFFBQVEsRUFBRSxNQUFNLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUMsR0FBRyxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDO1NBQ3hFLElBQUksQ0FBQyxPQUFPLEVBQUUsRUFBRSxDQUFDLENBQUM7SUFDckIsTUFBTSxDQUFDLEdBQUcsR0FBRztTQUNWLE1BQU0sQ0FBQyxHQUFHLENBQUM7U0FDWCxJQUFJLENBQUMsV0FBVyxFQUFFLGFBQWEsTUFBTSxDQUFDLEtBQUssR0FBRyxDQUFDLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQyxJQUFJLElBQUksTUFBTSxDQUFDLE1BQU0sR0FBRyxDQUFDLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQyxHQUFHLEdBQUcsQ0FBQyxDQUFDO0lBRXJILE9BQU8sRUFBRSxHQUFHLEVBQUUsQ0FBQyxFQUFFLENBQUM7QUFDcEIsQ0FBQyxDQUFDO0FBRUY7Ozs7OztHQU1HO0FBQ0gsTUFBTSxDQUFDLE1BQU0sWUFBWSxHQUFHLENBQUMsU0FBcUMsRUFBRSxJQUF5QixFQUFFLE9BQW1DLEVBQUUsRUFBRTtJQUNwSSxNQUFNLE1BQU0sR0FBcUIscUJBQXFCLENBQW1CLHFCQUFxQixFQUFFLE9BQU8sRUFBRSxFQUFFLENBQUMsQ0FBQztJQUU3RyxNQUFNLEVBQUUsQ0FBQyxFQUFFLEdBQUcsZUFBZSxDQUFDLFNBQVMsRUFBRSxNQUFNLENBQUMsQ0FBQztJQUVqRCxNQUFNLEdBQUcsR0FBRyxFQUFFLENBQUMsR0FBRyxFQUFxQixDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUVoRSxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxLQUFLLEVBQUUsTUFBTSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUV6RCxNQUFNLEdBQUcsR0FBRyxFQUFFLENBQUMsR0FBRyxFQUFxQyxDQUFDLFdBQVcsQ0FBQyxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUMsV0FBVyxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBRTVHLE1BQU0sSUFBSSxHQUFHLENBQUM7U0FDWCxTQUFTLENBQUMsS0FBSyxDQUFDO1NBQ2hCLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLENBQUM7U0FDZixLQUFLLEVBQUU7U0FDUCxNQUFNLENBQUMsR0FBRyxDQUFDO1NBQ1gsSUFBSSxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUM7U0FDcEIsRUFBRSxDQUFDLFdBQVcsRUFBRSxVQUFnQixLQUFpQixFQUFFLENBQUM7UUFDbkQsRUFBRSxDQUFDLE1BQU0sQ0FBQyxVQUFVLENBQUM7YUFDbEIsS0FBSyxDQUFDLE1BQU0sRUFBRSxHQUFHLEtBQUssQ0FBQyxLQUFLLElBQUksQ0FBQzthQUNqQyxLQUFLLENBQUMsS0FBSyxFQUFFLEdBQUcsS0FBSyxDQUFDLEtBQUssSUFBSSxDQUFDO2FBQ2hDLEtBQUssQ0FBQyxTQUFTLEVBQUUsQ0FBQyxDQUFDO2FBQ25CLE1BQU0sQ0FBQyxRQUFRLENBQUM7YUFDaEIsSUFBSSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNuQixDQUFDLENBQUM7U0FDRCxFQUFFLENBQUMsVUFBVSxFQUFFLFVBQWdCLEtBQUssRUFBRSxDQUFDO1FBQ3RDLEVBQUUsQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUMsS0FBSyxDQUFDLFNBQVMsRUFBRSxDQUFDLENBQUMsQ0FBQztJQUM1QyxDQUFDLENBQUMsQ0FBQztJQUVMLElBQUk7U0FDRCxNQUFNLENBQUMsTUFBTSxDQUFDO1NBQ2QsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUM7U0FDbEQsSUFBSSxDQUFDLEdBQUcsRUFBRSxHQUFHLENBQUMsQ0FBQztJQUVsQixJQUFJLE1BQU0sQ0FBQyxVQUFVLEVBQUU7UUFDckIsTUFBTSxLQUFLLEdBQUcsRUFBRTthQUNiLEdBQUcsRUFBcUM7YUFDeEMsV0FBVyxDQUFDLE1BQU0sQ0FBQzthQUNuQixXQUFXLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDO1FBRXBELE1BQU0sTUFBTSxHQUFHLENBQUMsQ0FBQztRQUNqQixJQUFJO2FBQ0QsTUFBTSxDQUFDLE1BQU0sQ0FBQzthQUNkLElBQUksQ0FBQyxPQUFPLEVBQUUsUUFBUSxDQUFDO2FBQ3ZCLElBQUksQ0FBQyxhQUFhLEVBQUUsUUFBUSxDQUFDO2FBQzdCLElBQUksQ0FBQyxJQUFJLEVBQUUsTUFBTSxDQUFDO2FBQ2xCLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxhQUFhLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQzthQUN6RCxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDO0tBQ3hCO0lBRUQsT0FBTyxNQUFNLENBQUM7QUFDaEIsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRWxlbWVudFJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0ICogYXMgZDMgZnJvbSAnZDMnO1xuXG5pbXBvcnQgeyBJUGllQ2hhcnREYXRhTm9kZSwgSVBpZUNoYXJ0T3B0aW9ucyB9IGZyb20gJy4uL2ludGVyZmFjZXMvcGllLWNoYXJ0LmludGVyZmFjZSc7XG5pbXBvcnQgeyBnZW5lcmF0ZUNvbmZpZ3VyYXRpb24gfSBmcm9tICcuL2NvbmZpZ3VyYXRpb24udXRpbCc7XG5cbi8qKlxuICogVGhlIHBpZSBjaGFydCBkZWZhdWx0IGNvbmZpZ3VyYXRpb24uXG4gKi9cbmV4cG9ydCBjb25zdCBkZWZhdWx0UGllQ2hhcnRDb25maWc6IElQaWVDaGFydE9wdGlvbnMgPSBPYmplY3QuZnJlZXplKDxJUGllQ2hhcnRPcHRpb25zPntcbiAgY2hhcnRUaXRsZTogJycsXG4gIHdpZHRoOiA2MDAsXG4gIGhlaWdodDogNjAwLFxuICBtYXJnaW46IHtcbiAgICB0b3A6IDIwLFxuICAgIHJpZ2h0OiAyMCxcbiAgICBib3R0b206IDIwLFxuICAgIGxlZnQ6IDIwLFxuICB9LFxuICBpbm5lclJhZGl1czogMCwgLy8gaW5jcmVhc2UgaW5uZXIgcmFkaXVzIHRvIHJlbmRlciBhIGRvbnV0IGNoYXJ0XG4gIHNob3dMYWJlbHM6IHRydWUsXG4gIGxhYmVsUmFkaXVzTW9kaWZpZXI6IDUwLFxuICBsYWJlbFRleHRXcmFwV2lkdGg6IDYwLFxuICBjb2xvcjogZDMuc2NhbGVPcmRpbmFsKGQzLnNjaGVtZUNhdGVnb3J5MTApLFxufSk7XG5cbi8qKlxuICogQ3JlYXRlcyBhIGNvbnRhaW5lciBmb3IgdGhlIHBpZSBjaGFydC5cbiAqIEBwYXJhbSBjb250YWluZXIgdGhlIGNoYXJ0IGNvbnRhaW5lclxuICogQHBhcmFtIGNvbmZpZyB0aGUgY2hhcnQgY29uZmlndXJhdGlvblxuICogQHJldHVybnMgdGhlIG9iamVjdCB3aXRoIHRoZSBzdmcgZWxlbWVudCBhbmQgdGhlIGcgZWxlbWVudFxuICovXG5jb25zdCBjcmVhdGVDb250YWluZXIgPSAoY29udGFpbmVyOiBFbGVtZW50UmVmPEhUTUxEaXZFbGVtZW50PiwgY29uZmlnOiBJUGllQ2hhcnRPcHRpb25zKSA9PiB7XG4gIGNvbnN0IGlkID0gY29udGFpbmVyLm5hdGl2ZUVsZW1lbnQuaWQgPz8gJ3BpZS0wJztcblxuICBkMy5zZWxlY3QoYCMke2lkfWApLnNlbGVjdCgnc3ZnJykucmVtb3ZlKCk7XG4gIGNvbnN0IHN2ZyA9IGQzXG4gICAgLnNlbGVjdChgIyR7aWR9YClcbiAgICAuYXBwZW5kKCdzdmcnKVxuICAgIC5hdHRyKCd3aWR0aCcsIGNvbmZpZy53aWR0aCArIGNvbmZpZy5tYXJnaW4ubGVmdCArIGNvbmZpZy5tYXJnaW4ucmlnaHQpXG4gICAgLmF0dHIoJ2hlaWdodCcsIGNvbmZpZy5oZWlnaHQgKyBjb25maWcubWFyZ2luLnRvcCArIGNvbmZpZy5tYXJnaW4uYm90dG9tKVxuICAgIC5hdHRyKCdjbGFzcycsIGlkKTtcbiAgY29uc3QgZyA9IHN2Z1xuICAgIC5hcHBlbmQoJ2cnKVxuICAgIC5hdHRyKCd0cmFuc2Zvcm0nLCBgdHJhbnNsYXRlKCR7Y29uZmlnLndpZHRoIC8gMiArIGNvbmZpZy5tYXJnaW4ubGVmdH0sJHtjb25maWcuaGVpZ2h0IC8gMiArIGNvbmZpZy5tYXJnaW4udG9wfSlgKTtcblxuICByZXR1cm4geyBzdmcsIGcgfTtcbn07XG5cbi8qKlxuICogRHJhd3MgdGhlIHBpZSBjaGFydC5cbiAqIEBwYXJhbSBjb250YWluZXIgdGhlIGNoYXJ0IGNvbnRhaW5lclxuICogQHBhcmFtIGRhdGEgdGhlIGNoYXJ0IGRhdGFcbiAqIEBwYXJhbSBvcHRpb25zIHRoZSBjaGFydCBvcHRpb25zXG4gKiBAcmV0dXJucyB0aGUgY2hhcnQgY29uZmlndXJhdGlvblxuICovXG5leHBvcnQgY29uc3QgZHJhd1BpZUNoYXJ0ID0gKGNvbnRhaW5lcjogRWxlbWVudFJlZjxIVE1MRGl2RWxlbWVudD4sIGRhdGE6IElQaWVDaGFydERhdGFOb2RlW10sIG9wdGlvbnM/OiBQYXJ0aWFsPElQaWVDaGFydE9wdGlvbnM+KSA9PiB7XG4gIGNvbnN0IGNvbmZpZzogSVBpZUNoYXJ0T3B0aW9ucyA9IGdlbmVyYXRlQ29uZmlndXJhdGlvbjxJUGllQ2hhcnRPcHRpb25zPihkZWZhdWx0UGllQ2hhcnRDb25maWcsIG9wdGlvbnMsIHt9KTtcblxuICBjb25zdCB7IGcgfSA9IGNyZWF0ZUNvbnRhaW5lcihjb250YWluZXIsIGNvbmZpZyk7XG5cbiAgY29uc3QgcGllID0gZDMucGllPElQaWVDaGFydERhdGFOb2RlPigpLnZhbHVlKGRhdHVtID0+IGRhdHVtLnkpO1xuXG4gIGNvbnN0IHJhZGl1cyA9IE1hdGgubWluKGNvbmZpZy53aWR0aCwgY29uZmlnLmhlaWdodCkgLyAyO1xuXG4gIGNvbnN0IGFyYyA9IGQzLmFyYzxkMy5QaWVBcmNEYXR1bTxJUGllQ2hhcnREYXRhTm9kZT4+KCkuaW5uZXJSYWRpdXMoY29uZmlnLmlubmVyUmFkaXVzKS5vdXRlclJhZGl1cyhyYWRpdXMpO1xuXG4gIGNvbnN0IGFyY3MgPSBnXG4gICAgLnNlbGVjdEFsbCgnYXJjJylcbiAgICAuZGF0YShwaWUoZGF0YSkpXG4gICAgLmVudGVyKClcbiAgICAuYXBwZW5kKCdnJylcbiAgICAuYXR0cignY2xhc3MnLCAnYXJjJylcbiAgICAub24oJ21vdXNlb3ZlcicsIGZ1bmN0aW9uICh0aGlzLCBldmVudDogTW91c2VFdmVudCwgZCkge1xuICAgICAgZDMuc2VsZWN0KCcjdG9vbHRpcCcpXG4gICAgICAgIC5zdHlsZSgnbGVmdCcsIGAke2V2ZW50LnBhZ2VYfXB4YClcbiAgICAgICAgLnN0eWxlKCd0b3AnLCBgJHtldmVudC5wYWdlWX1weGApXG4gICAgICAgIC5zdHlsZSgnb3BhY2l0eScsIDEpXG4gICAgICAgIC5zZWxlY3QoJyN2YWx1ZScpXG4gICAgICAgIC50ZXh0KGQudmFsdWUpO1xuICAgIH0pXG4gICAgLm9uKCdtb3VzZW91dCcsIGZ1bmN0aW9uICh0aGlzLCBldmVudCwgZCkge1xuICAgICAgZDMuc2VsZWN0KCcjdG9vbHRpcCcpLnN0eWxlKCdvcGFjaXR5JywgMCk7XG4gICAgfSk7XG5cbiAgYXJjc1xuICAgIC5hcHBlbmQoJ3BhdGgnKVxuICAgIC5hdHRyKCdmaWxsJywgKGQsIGkpID0+IGNvbmZpZy5jb2xvcihpLnRvU3RyaW5nKCkpKVxuICAgIC5hdHRyKCdkJywgYXJjKTtcblxuICBpZiAoY29uZmlnLnNob3dMYWJlbHMpIHtcbiAgICBjb25zdCBsYWJlbCA9IGQzXG4gICAgICAuYXJjPGQzLlBpZUFyY0RhdHVtPElQaWVDaGFydERhdGFOb2RlPj4oKVxuICAgICAgLmlubmVyUmFkaXVzKHJhZGl1cylcbiAgICAgIC5vdXRlclJhZGl1cyhyYWRpdXMgKyBjb25maWcubGFiZWxSYWRpdXNNb2RpZmllcik7XG5cbiAgICBjb25zdCB0ZXh0RHkgPSA1O1xuICAgIGFyY3NcbiAgICAgIC5hcHBlbmQoJ3RleHQnKVxuICAgICAgLmF0dHIoJ2NsYXNzJywgJ2xlZ2VuZCcpXG4gICAgICAuYXR0cigndGV4dC1hbmNob3InLCAnbWlkZGxlJylcbiAgICAgIC5hdHRyKCdkeScsIHRleHREeSlcbiAgICAgIC5hdHRyKCd0cmFuc2Zvcm0nLCBkID0+IGB0cmFuc2xhdGUoJHtsYWJlbC5jZW50cm9pZChkKX0pYClcbiAgICAgIC50ZXh0KGQgPT4gZC5kYXRhLnkpO1xuICB9XG5cbiAgcmV0dXJuIGNvbmZpZztcbn07XG4iXX0=
|
|
@@ -849,6 +849,7 @@ const defaultPieChartConfig = Object.freeze({
|
|
|
849
849
|
left: 20,
|
|
850
850
|
},
|
|
851
851
|
innerRadius: 0,
|
|
852
|
+
showLabels: true,
|
|
852
853
|
labelRadiusModifier: 50,
|
|
853
854
|
labelTextWrapWidth: 60,
|
|
854
855
|
color: d3.scaleOrdinal(d3.schemeCategory10),
|
|
@@ -904,22 +905,24 @@ const drawPieChart = (container, data, options) => {
|
|
|
904
905
|
.on('mouseout', function (event, d) {
|
|
905
906
|
d3.select('#tooltip').style('opacity', 0);
|
|
906
907
|
});
|
|
907
|
-
const label = d3
|
|
908
|
-
.arc()
|
|
909
|
-
.innerRadius(radius)
|
|
910
|
-
.outerRadius(radius + config.labelRadiusModifier);
|
|
911
908
|
arcs
|
|
912
909
|
.append('path')
|
|
913
910
|
.attr('fill', (d, i) => config.color(i.toString()))
|
|
914
911
|
.attr('d', arc);
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
912
|
+
if (config.showLabels) {
|
|
913
|
+
const label = d3
|
|
914
|
+
.arc()
|
|
915
|
+
.innerRadius(radius)
|
|
916
|
+
.outerRadius(radius + config.labelRadiusModifier);
|
|
917
|
+
const textDy = 5;
|
|
918
|
+
arcs
|
|
919
|
+
.append('text')
|
|
920
|
+
.attr('class', 'legend')
|
|
921
|
+
.attr('text-anchor', 'middle')
|
|
922
|
+
.attr('dy', textDy)
|
|
923
|
+
.attr('transform', d => `translate(${label.centroid(d)})`)
|
|
924
|
+
.text(d => d.data.y);
|
|
925
|
+
}
|
|
923
926
|
return config;
|
|
924
927
|
};
|
|
925
928
|
|
|
@@ -1290,9 +1293,9 @@ class AppBarChartComponent {
|
|
|
1290
1293
|
}
|
|
1291
1294
|
}
|
|
1292
1295
|
}
|
|
1293
|
-
/** @nocollapse */ AppBarChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
1294
|
-
/** @nocollapse */ AppBarChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.
|
|
1295
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
1296
|
+
/** @nocollapse */ AppBarChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppBarChartComponent, deps: [{ token: DOCUMENT }, { token: D3_CHART_FACTORY }], target: i0.ɵɵFactoryTarget.Component });
|
|
1297
|
+
/** @nocollapse */ AppBarChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.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 });
|
|
1298
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppBarChartComponent, decorators: [{
|
|
1296
1299
|
type: Component,
|
|
1297
1300
|
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"] }]
|
|
1298
1301
|
}], ctorParameters: function () {
|
|
@@ -1376,9 +1379,9 @@ class AppPieChartComponent {
|
|
|
1376
1379
|
}
|
|
1377
1380
|
}
|
|
1378
1381
|
}
|
|
1379
|
-
/** @nocollapse */ AppPieChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
1380
|
-
/** @nocollapse */ AppPieChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.
|
|
1381
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
1382
|
+
/** @nocollapse */ AppPieChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppPieChartComponent, deps: [{ token: DOCUMENT }, { token: D3_CHART_FACTORY }], target: i0.ɵɵFactoryTarget.Component });
|
|
1383
|
+
/** @nocollapse */ AppPieChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.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 });
|
|
1384
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppPieChartComponent, decorators: [{
|
|
1382
1385
|
type: Component,
|
|
1383
1386
|
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"] }]
|
|
1384
1387
|
}], ctorParameters: function () {
|
|
@@ -1470,9 +1473,9 @@ class AppRadarChartComponent {
|
|
|
1470
1473
|
}
|
|
1471
1474
|
}
|
|
1472
1475
|
}
|
|
1473
|
-
/** @nocollapse */ AppRadarChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
1474
|
-
/** @nocollapse */ AppRadarChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.
|
|
1475
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
1476
|
+
/** @nocollapse */ AppRadarChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppRadarChartComponent, deps: [{ token: DOCUMENT }, { token: D3_CHART_FACTORY }], target: i0.ɵɵFactoryTarget.Component });
|
|
1477
|
+
/** @nocollapse */ AppRadarChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.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 });
|
|
1478
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppRadarChartComponent, decorators: [{
|
|
1476
1479
|
type: Component,
|
|
1477
1480
|
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"] }]
|
|
1478
1481
|
}], ctorParameters: function () {
|
|
@@ -1561,9 +1564,9 @@ class AppForceDirectedChartComponent {
|
|
|
1561
1564
|
}
|
|
1562
1565
|
}
|
|
1563
1566
|
}
|
|
1564
|
-
/** @nocollapse */ AppForceDirectedChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
1565
|
-
/** @nocollapse */ AppForceDirectedChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.
|
|
1566
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
1567
|
+
/** @nocollapse */ AppForceDirectedChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppForceDirectedChartComponent, deps: [{ token: DOCUMENT }, { token: D3_CHART_FACTORY }], target: i0.ɵɵFactoryTarget.Component });
|
|
1568
|
+
/** @nocollapse */ AppForceDirectedChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.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 });
|
|
1569
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppForceDirectedChartComponent, decorators: [{
|
|
1567
1570
|
type: Component,
|
|
1568
1571
|
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"] }]
|
|
1569
1572
|
}], ctorParameters: function () {
|
|
@@ -1648,9 +1651,9 @@ class AppLineChartComponent {
|
|
|
1648
1651
|
}
|
|
1649
1652
|
}
|
|
1650
1653
|
}
|
|
1651
|
-
/** @nocollapse */ AppLineChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
1652
|
-
/** @nocollapse */ AppLineChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.
|
|
1653
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
1654
|
+
/** @nocollapse */ AppLineChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppLineChartComponent, deps: [{ token: DOCUMENT }, { token: D3_CHART_FACTORY }], target: i0.ɵɵFactoryTarget.Component });
|
|
1655
|
+
/** @nocollapse */ AppLineChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.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 });
|
|
1656
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppLineChartComponent, decorators: [{
|
|
1654
1657
|
type: Component,
|
|
1655
1658
|
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"] }]
|
|
1656
1659
|
}], ctorParameters: function () {
|
|
@@ -1833,17 +1836,17 @@ class AppChartExamplesComponent {
|
|
|
1833
1836
|
};
|
|
1834
1837
|
}
|
|
1835
1838
|
}
|
|
1836
|
-
/** @nocollapse */ AppChartExamplesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
1837
|
-
/** @nocollapse */ AppChartExamplesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.
|
|
1838
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
1839
|
+
/** @nocollapse */ AppChartExamplesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppChartExamplesComponent, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
|
|
1840
|
+
/** @nocollapse */ AppChartExamplesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: AppChartExamplesComponent, selector: "app-chart-examples", 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\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<div class=\"container\" *ngIf=\"lineChartConfig$ | async as config\">\n <app-line-chart [chartId]=\"'line-example-1'\" [data]=\"config.data\" [options]=\"config.options\"></app-line-chart>\n</div>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<div class=\"container\" *ngIf=\"radarChartConfig$ | async as config\">\n <app-radar-chart [chartId]=\"'radar-example-1'\" [data]=\"config.data\" [options]=\"config.options\"></app-radar-chart>\n</div>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<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\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<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{flex:1 1 auto;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AppPieChartComponent, selector: "app-pie-chart", inputs: ["chartId", "data", "options"] }, { kind: "component", type: AppRadarChartComponent, selector: "app-radar-chart", inputs: ["chartId", "data", "options"] }, { kind: "component", type: AppForceDirectedChartComponent, selector: "app-force-directed-chart", inputs: ["chartId", "data", "options"] }, { kind: "component", type: AppBarChartComponent, selector: "app-bar-chart", inputs: ["chartId", "data", "options"] }, { kind: "component", type: AppLineChartComponent, selector: "app-line-chart", inputs: ["chartId", "data", "options"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1841
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppChartExamplesComponent, decorators: [{
|
|
1839
1842
|
type: Component,
|
|
1840
1843
|
args: [{ selector: 'app-chart-examples', 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\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<div class=\"container\" *ngIf=\"lineChartConfig$ | async as config\">\n <app-line-chart [chartId]=\"'line-example-1'\" [data]=\"config.data\" [options]=\"config.options\"></app-line-chart>\n</div>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<div class=\"container\" *ngIf=\"radarChartConfig$ | async as config\">\n <app-radar-chart [chartId]=\"'radar-example-1'\" [data]=\"config.data\" [options]=\"config.options\"></app-radar-chart>\n</div>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<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\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<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{flex:1 1 auto;width:100%}\n"] }]
|
|
1841
1844
|
}], ctorParameters: function () { return [{ type: i1.BreakpointObserver }]; } });
|
|
1842
1845
|
|
|
1843
1846
|
class AppD3ChartsModule {
|
|
1844
1847
|
}
|
|
1845
|
-
/** @nocollapse */ AppD3ChartsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
1846
|
-
/** @nocollapse */ AppD3ChartsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.
|
|
1848
|
+
/** @nocollapse */ AppD3ChartsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppD3ChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1849
|
+
/** @nocollapse */ AppD3ChartsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: AppD3ChartsModule, declarations: [AppPieChartComponent,
|
|
1847
1850
|
AppRadarChartComponent,
|
|
1848
1851
|
AppForceDirectedChartComponent,
|
|
1849
1852
|
AppBarChartComponent,
|
|
@@ -1854,8 +1857,8 @@ class AppD3ChartsModule {
|
|
|
1854
1857
|
AppBarChartComponent,
|
|
1855
1858
|
AppLineChartComponent,
|
|
1856
1859
|
AppChartExamplesComponent] });
|
|
1857
|
-
/** @nocollapse */ AppD3ChartsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.
|
|
1858
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
1860
|
+
/** @nocollapse */ AppD3ChartsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppD3ChartsModule, imports: [CommonModule] });
|
|
1861
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AppD3ChartsModule, decorators: [{
|
|
1859
1862
|
type: NgModule,
|
|
1860
1863
|
args: [{
|
|
1861
1864
|
imports: [CommonModule],
|