@mathstack/viz 2.2.0 → 2.2.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/LICENSE +21 -21
- package/README.md +11 -11
- package/fesm2022/mathstack-viz.mjs +20 -20
- package/fesm2022/mathstack-viz.mjs.map +1 -1
- package/package.json +5 -2
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2025 Mathematica
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Mathematica
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
# VizComponents
|
|
2
|
-
|
|
3
|
-
## Overview
|
|
4
|
-
|
|
5
|
-
Viz Components is a library of Angular components for building highly custom data visualizations,
|
|
6
|
-
built on top of D3.
|
|
7
|
-
|
|
8
|
-
Viz Components allows users to compose sub-chart level components into custom data visualizations
|
|
9
|
-
and to fully customize the system of visual marks used to represent data. At the same time, this
|
|
10
|
-
package takes care of common data viz functionality, such as setting scales, creating axes, and
|
|
11
|
-
responsively scaling svgs under the hood.
|
|
1
|
+
# VizComponents
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
|
|
5
|
+
Viz Components is a library of Angular components for building highly custom data visualizations,
|
|
6
|
+
built on top of D3.
|
|
7
|
+
|
|
8
|
+
Viz Components allows users to compose sub-chart level components into custom data visualizations
|
|
9
|
+
and to fully customize the system of visual marks used to represent data. At the same time, this
|
|
10
|
+
package takes care of common data viz functionality, such as setting scales, creating axes, and
|
|
11
|
+
responsively scaling svgs under the hood.
|
|
@@ -10,8 +10,8 @@ import { select, utcFormat, format, axisTop, axisBottom, axisLeft, axisRight, po
|
|
|
10
10
|
import { color } from 'd3-color';
|
|
11
11
|
import { Overlay, OverlayPositionBuilder, OverlayModule } from '@angular/cdk/overlay';
|
|
12
12
|
import { TemplatePortal } from '@angular/cdk/portal';
|
|
13
|
-
import
|
|
14
|
-
import
|
|
13
|
+
import saveAs from 'file-saver';
|
|
14
|
+
import unparse from 'papaparse';
|
|
15
15
|
import polylabel from 'polylabel';
|
|
16
16
|
import * as domToImage from 'html-to-image';
|
|
17
17
|
|
|
@@ -342,13 +342,13 @@ class ChartComponent {
|
|
|
342
342
|
};
|
|
343
343
|
}
|
|
344
344
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
345
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: ChartComponent, isStandalone: true, selector: "vic-chart", inputs: { config: "config" }, host: { classAttribute: "vic-chart" }, providers: [{ provide: CHART, useExisting: ChartComponent }], viewQueries: [{ propertyName: "divRef", first: true, predicate: ["div"], descendants: true, static: true }, { propertyName: "svgRef", first: true, predicate: ["svg"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Slot exists so that projected content can have access to scales -->\
|
|
345
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: ChartComponent, isStandalone: true, selector: "vic-chart", inputs: { config: "config" }, host: { classAttribute: "vic-chart" }, providers: [{ provide: CHART, useExisting: ChartComponent }], viewQueries: [{ propertyName: "divRef", first: true, predicate: ["div"], descendants: true, static: true }, { propertyName: "svgRef", first: true, predicate: ["svg"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsBefore\"></ng-container>\n<div\n #div\n class=\"vic-chart-container\"\n [ngClass]=\"(strategy$ | async)\"\n [style.maxWidth.px]=\"widthCfg$ | async\"\n [style.minWidth.px]=\"minWidthCfg$ | async\"\n [style.maxHeight.px]=\"heightCfg$ | async\"\n [style.aspectRatio]=\"(strategy$ | async) === 'viewbox' ? (config.viewBoxX / config.viewBoxY) : null\"\n [style.width.%]=\"(strategy$ | async) === 'viewbox' ? 100 : null\"\n>\n <svg\n #svg\n class=\"vic-chart-svg\"\n [ngClass]=\"(strategy$ | async)\"\n [style.width.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.width : null\"\n [style.height.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.height : null\"\n [attr.viewBox]=\"(strategy$ | async) === 'viewbox' ? '0 0 ' + config.viewBoxX + ' ' + config.viewBoxY : null\"\n >\n <defs>\n <ng-container *ngTemplateOutlet=\"svgDefs\"></ng-container>\n </defs>\n <ng-container *ngTemplateOutlet=\"svgElements\"></ng-container>\n </svg>\n</div>\n\n<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsAfter\"></ng-container>\n\n<ng-template #htmlElementsBefore>\n <ng-content select=\"[html-elements-before]\"></ng-content>\n</ng-template>\n\n<ng-template #svgDefs>\n <ng-content select=\"[svg-defs]\"></ng-content>\n</ng-template>\n\n<ng-template #svgElements>\n <ng-content select=\"[svg-elements]\"></ng-content>\n</ng-template>\n\n<ng-template #htmlElementsAfter>\n <ng-content select=\"[html-elements-after]\"></ng-content>\n</ng-template>\n", styles: [".vic-chart-container{display:flex;align-items:stretch;box-sizing:border-box;width:100%;min-width:0}.vic-chart-container.responsive-width{contain:inline-size}.vic-chart-container.viewbox{contain:inline-size;overflow:hidden}.vic-chart-container.fixed,.vic-chart-svg{display:block}.vic-chart-svg:not(.viewbox){overflow:visible}.vic-chart-svg.viewbox{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
346
346
|
}
|
|
347
347
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChartComponent, decorators: [{
|
|
348
348
|
type: Component,
|
|
349
349
|
args: [{ selector: 'vic-chart', providers: [{ provide: CHART, useExisting: ChartComponent }], host: {
|
|
350
350
|
class: 'vic-chart',
|
|
351
|
-
}, imports: [CommonModule], template: "<!-- Slot exists so that projected content can have access to scales -->\
|
|
351
|
+
}, imports: [CommonModule], template: "<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsBefore\"></ng-container>\n<div\n #div\n class=\"vic-chart-container\"\n [ngClass]=\"(strategy$ | async)\"\n [style.maxWidth.px]=\"widthCfg$ | async\"\n [style.minWidth.px]=\"minWidthCfg$ | async\"\n [style.maxHeight.px]=\"heightCfg$ | async\"\n [style.aspectRatio]=\"(strategy$ | async) === 'viewbox' ? (config.viewBoxX / config.viewBoxY) : null\"\n [style.width.%]=\"(strategy$ | async) === 'viewbox' ? 100 : null\"\n>\n <svg\n #svg\n class=\"vic-chart-svg\"\n [ngClass]=\"(strategy$ | async)\"\n [style.width.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.width : null\"\n [style.height.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.height : null\"\n [attr.viewBox]=\"(strategy$ | async) === 'viewbox' ? '0 0 ' + config.viewBoxX + ' ' + config.viewBoxY : null\"\n >\n <defs>\n <ng-container *ngTemplateOutlet=\"svgDefs\"></ng-container>\n </defs>\n <ng-container *ngTemplateOutlet=\"svgElements\"></ng-container>\n </svg>\n</div>\n\n<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsAfter\"></ng-container>\n\n<ng-template #htmlElementsBefore>\n <ng-content select=\"[html-elements-before]\"></ng-content>\n</ng-template>\n\n<ng-template #svgDefs>\n <ng-content select=\"[svg-defs]\"></ng-content>\n</ng-template>\n\n<ng-template #svgElements>\n <ng-content select=\"[svg-elements]\"></ng-content>\n</ng-template>\n\n<ng-template #htmlElementsAfter>\n <ng-content select=\"[html-elements-after]\"></ng-content>\n</ng-template>\n", styles: [".vic-chart-container{display:flex;align-items:stretch;box-sizing:border-box;width:100%;min-width:0}.vic-chart-container.responsive-width{contain:inline-size}.vic-chart-container.viewbox{contain:inline-size;overflow:hidden}.vic-chart-container.fixed,.vic-chart-svg{display:block}.vic-chart-svg:not(.viewbox){overflow:visible}.vic-chart-svg.viewbox{width:100%;height:100%}\n"] }]
|
|
352
352
|
}], propDecorators: { config: [{
|
|
353
353
|
type: Input
|
|
354
354
|
}], divRef: [{
|
|
@@ -396,13 +396,13 @@ class MapChartComponent extends ChartComponent {
|
|
|
396
396
|
});
|
|
397
397
|
}
|
|
398
398
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
399
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: MapChartComponent, isStandalone: true, selector: "vic-map-chart", host: { classAttribute: "vic-map-chart" }, providers: [{ provide: CHART, useExisting: ChartComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Slot exists so that projected content can have access to scales -->\
|
|
399
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: MapChartComponent, isStandalone: true, selector: "vic-map-chart", host: { classAttribute: "vic-map-chart" }, providers: [{ provide: CHART, useExisting: ChartComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsBefore\"></ng-container>\n<div\n #div\n class=\"vic-chart-container\"\n [ngClass]=\"(strategy$ | async)\"\n [style.maxWidth.px]=\"widthCfg$ | async\"\n [style.minWidth.px]=\"minWidthCfg$ | async\"\n [style.maxHeight.px]=\"heightCfg$ | async\"\n [style.aspectRatio]=\"(strategy$ | async) === 'viewbox' ? (config.viewBoxX / config.viewBoxY) : null\"\n [style.width.%]=\"(strategy$ | async) === 'viewbox' ? 100 : null\"\n>\n <svg\n #svg\n class=\"vic-chart-svg\"\n [ngClass]=\"(strategy$ | async)\"\n [style.width.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.width : null\"\n [style.height.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.height : null\"\n [attr.viewBox]=\"(strategy$ | async) === 'viewbox' ? '0 0 ' + config.viewBoxX + ' ' + config.viewBoxY : null\"\n >\n <defs>\n <ng-container *ngTemplateOutlet=\"svgDefs\"></ng-container>\n </defs>\n <ng-container *ngTemplateOutlet=\"svgElements\"></ng-container>\n </svg>\n</div>\n\n<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsAfter\"></ng-container>\n\n<ng-template #htmlElementsBefore>\n <ng-content select=\"[html-elements-before]\"></ng-content>\n</ng-template>\n\n<ng-template #svgDefs>\n <ng-content select=\"[svg-defs]\"></ng-content>\n</ng-template>\n\n<ng-template #svgElements>\n <ng-content select=\"[svg-elements]\"></ng-content>\n</ng-template>\n\n<ng-template #htmlElementsAfter>\n <ng-content select=\"[html-elements-after]\"></ng-content>\n</ng-template>\n", styles: [".vic-chart-container{display:flex;align-items:stretch;box-sizing:border-box;width:100%;min-width:0}.vic-chart-container.responsive-width{contain:inline-size}.vic-chart-container.viewbox{contain:inline-size;overflow:hidden}.vic-chart-container.fixed,.vic-chart-svg{display:block}.vic-chart-svg:not(.viewbox){overflow:visible}.vic-chart-svg.viewbox{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
400
400
|
}
|
|
401
401
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapChartComponent, decorators: [{
|
|
402
402
|
type: Component,
|
|
403
403
|
args: [{ selector: 'vic-map-chart', providers: [{ provide: CHART, useExisting: ChartComponent }], host: {
|
|
404
404
|
class: 'vic-map-chart',
|
|
405
|
-
}, imports: [CommonModule], template: "<!-- Slot exists so that projected content can have access to scales -->\
|
|
405
|
+
}, imports: [CommonModule], template: "<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsBefore\"></ng-container>\n<div\n #div\n class=\"vic-chart-container\"\n [ngClass]=\"(strategy$ | async)\"\n [style.maxWidth.px]=\"widthCfg$ | async\"\n [style.minWidth.px]=\"minWidthCfg$ | async\"\n [style.maxHeight.px]=\"heightCfg$ | async\"\n [style.aspectRatio]=\"(strategy$ | async) === 'viewbox' ? (config.viewBoxX / config.viewBoxY) : null\"\n [style.width.%]=\"(strategy$ | async) === 'viewbox' ? 100 : null\"\n>\n <svg\n #svg\n class=\"vic-chart-svg\"\n [ngClass]=\"(strategy$ | async)\"\n [style.width.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.width : null\"\n [style.height.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.height : null\"\n [attr.viewBox]=\"(strategy$ | async) === 'viewbox' ? '0 0 ' + config.viewBoxX + ' ' + config.viewBoxY : null\"\n >\n <defs>\n <ng-container *ngTemplateOutlet=\"svgDefs\"></ng-container>\n </defs>\n <ng-container *ngTemplateOutlet=\"svgElements\"></ng-container>\n </svg>\n</div>\n\n<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsAfter\"></ng-container>\n\n<ng-template #htmlElementsBefore>\n <ng-content select=\"[html-elements-before]\"></ng-content>\n</ng-template>\n\n<ng-template #svgDefs>\n <ng-content select=\"[svg-defs]\"></ng-content>\n</ng-template>\n\n<ng-template #svgElements>\n <ng-content select=\"[svg-elements]\"></ng-content>\n</ng-template>\n\n<ng-template #htmlElementsAfter>\n <ng-content select=\"[html-elements-after]\"></ng-content>\n</ng-template>\n", styles: [".vic-chart-container{display:flex;align-items:stretch;box-sizing:border-box;width:100%;min-width:0}.vic-chart-container.responsive-width{contain:inline-size}.vic-chart-container.viewbox{contain:inline-size;overflow:hidden}.vic-chart-container.fixed,.vic-chart-svg{display:block}.vic-chart-svg:not(.viewbox){overflow:visible}.vic-chart-svg.viewbox{width:100%;height:100%}\n"] }]
|
|
406
406
|
}] });
|
|
407
407
|
|
|
408
408
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
@@ -442,13 +442,13 @@ class XyChartComponent extends ChartComponent {
|
|
|
442
442
|
});
|
|
443
443
|
}
|
|
444
444
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
445
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: XyChartComponent, isStandalone: true, selector: "vic-xy-chart", host: { classAttribute: "vic-xy-chart" }, providers: [{ provide: CHART, useExisting: ChartComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Slot exists so that projected content can have access to scales -->\
|
|
445
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: XyChartComponent, isStandalone: true, selector: "vic-xy-chart", host: { classAttribute: "vic-xy-chart" }, providers: [{ provide: CHART, useExisting: ChartComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsBefore\"></ng-container>\n<div\n #div\n class=\"vic-chart-container\"\n [ngClass]=\"(strategy$ | async)\"\n [style.maxWidth.px]=\"widthCfg$ | async\"\n [style.minWidth.px]=\"minWidthCfg$ | async\"\n [style.maxHeight.px]=\"heightCfg$ | async\"\n [style.aspectRatio]=\"(strategy$ | async) === 'viewbox' ? (config.viewBoxX / config.viewBoxY) : null\"\n [style.width.%]=\"(strategy$ | async) === 'viewbox' ? 100 : null\"\n>\n <svg\n #svg\n class=\"vic-chart-svg\"\n [ngClass]=\"(strategy$ | async)\"\n [style.width.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.width : null\"\n [style.height.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.height : null\"\n [attr.viewBox]=\"(strategy$ | async) === 'viewbox' ? '0 0 ' + config.viewBoxX + ' ' + config.viewBoxY : null\"\n >\n <defs>\n <ng-container *ngTemplateOutlet=\"svgDefs\"></ng-container>\n </defs>\n <ng-container *ngTemplateOutlet=\"svgElements\"></ng-container>\n </svg>\n</div>\n\n<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsAfter\"></ng-container>\n\n<ng-template #htmlElementsBefore>\n <ng-content select=\"[html-elements-before]\"></ng-content>\n</ng-template>\n\n<ng-template #svgDefs>\n <ng-content select=\"[svg-defs]\"></ng-content>\n</ng-template>\n\n<ng-template #svgElements>\n <ng-content select=\"[svg-elements]\"></ng-content>\n</ng-template>\n\n<ng-template #htmlElementsAfter>\n <ng-content select=\"[html-elements-after]\"></ng-content>\n</ng-template>\n", styles: [".vic-chart-container{display:flex;align-items:stretch;box-sizing:border-box;width:100%;min-width:0}.vic-chart-container.responsive-width{contain:inline-size}.vic-chart-container.viewbox{contain:inline-size;overflow:hidden}.vic-chart-container.fixed,.vic-chart-svg{display:block}.vic-chart-svg:not(.viewbox){overflow:visible}.vic-chart-svg.viewbox{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
446
446
|
}
|
|
447
447
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyChartComponent, decorators: [{
|
|
448
448
|
type: Component,
|
|
449
449
|
args: [{ selector: 'vic-xy-chart', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: CHART, useExisting: ChartComponent }], host: {
|
|
450
450
|
class: 'vic-xy-chart',
|
|
451
|
-
}, imports: [CommonModule], template: "<!-- Slot exists so that projected content can have access to scales -->\
|
|
451
|
+
}, imports: [CommonModule], template: "<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsBefore\"></ng-container>\n<div\n #div\n class=\"vic-chart-container\"\n [ngClass]=\"(strategy$ | async)\"\n [style.maxWidth.px]=\"widthCfg$ | async\"\n [style.minWidth.px]=\"minWidthCfg$ | async\"\n [style.maxHeight.px]=\"heightCfg$ | async\"\n [style.aspectRatio]=\"(strategy$ | async) === 'viewbox' ? (config.viewBoxX / config.viewBoxY) : null\"\n [style.width.%]=\"(strategy$ | async) === 'viewbox' ? 100 : null\"\n>\n <svg\n #svg\n class=\"vic-chart-svg\"\n [ngClass]=\"(strategy$ | async)\"\n [style.width.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.width : null\"\n [style.height.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.height : null\"\n [attr.viewBox]=\"(strategy$ | async) === 'viewbox' ? '0 0 ' + config.viewBoxX + ' ' + config.viewBoxY : null\"\n >\n <defs>\n <ng-container *ngTemplateOutlet=\"svgDefs\"></ng-container>\n </defs>\n <ng-container *ngTemplateOutlet=\"svgElements\"></ng-container>\n </svg>\n</div>\n\n<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsAfter\"></ng-container>\n\n<ng-template #htmlElementsBefore>\n <ng-content select=\"[html-elements-before]\"></ng-content>\n</ng-template>\n\n<ng-template #svgDefs>\n <ng-content select=\"[svg-defs]\"></ng-content>\n</ng-template>\n\n<ng-template #svgElements>\n <ng-content select=\"[svg-elements]\"></ng-content>\n</ng-template>\n\n<ng-template #htmlElementsAfter>\n <ng-content select=\"[html-elements-after]\"></ng-content>\n</ng-template>\n", styles: [".vic-chart-container{display:flex;align-items:stretch;box-sizing:border-box;width:100%;min-width:0}.vic-chart-container.responsive-width{contain:inline-size}.vic-chart-container.viewbox{contain:inline-size;overflow:hidden}.vic-chart-container.fixed,.vic-chart-svg{display:block}.vic-chart-svg:not(.viewbox){overflow:visible}.vic-chart-svg.viewbox{width:100%;height:100%}\n"] }]
|
|
452
452
|
}] });
|
|
453
453
|
|
|
454
454
|
class VicChartModule {
|
|
@@ -4007,11 +4007,11 @@ class TooltipTriangleComponent {
|
|
|
4007
4007
|
this.width = 20;
|
|
4008
4008
|
}
|
|
4009
4009
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipTriangleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4010
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: TooltipTriangleComponent, isStandalone: true, selector: "vic-tooltip-triangle", inputs: { height: "height", width: "width" }, ngImport: i0, template: "<svg\
|
|
4010
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: TooltipTriangleComponent, isStandalone: true, selector: "vic-tooltip-triangle", inputs: { height: "height", width: "width" }, ngImport: i0, template: "<svg\n width=\"100%\"\n [attr.height]=\"height\"\n [style.--width]=\"width + 'px'\"\n class=\"vic-tooltip-svg-triangle center\"\n>\n <g class=\"svg-g\">\n <path\n class=\"triangle-path\"\n [attr.d]=\"'M 0,0 ' + (width / 2) + ',' + height + ' ' + width + ',0'\"\n ></path>\n </g>\n</svg>\n\n<svg\n width=\"100%\"\n [attr.height]=\"height\"\n [style.--width]=\"width + 'px'\"\n class=\"vic-tooltip-svg-triangle right\"\n>\n <g class=\"svg-g\">\n <path\n class=\"triangle-path\"\n [attr.d]=\"'M 0,0 ' + (width / 2) + ',' + height + ' ' + (width / 2) + ',0'\"\n ></path>\n </g>\n</svg>\n\n<svg\n width=\"100%\"\n [attr.height]=\"height\"\n [style.--width]=\"width + 'px'\"\n class=\"vic-tooltip-svg-triangle left\"\n>\n <g class=\"svg-g\">\n <path\n class=\"triangle-path\"\n [attr.d]=\"'M 0,0 ' + '0,' + height + ' ' + (width / 2) + ',0'\"\n ></path>\n </g>\n</svg>\n", styles: [".cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.center{transform:translate(calc(50% - var(--width) / 2),-2px)}.cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.right,.cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.left,.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.center,.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.right{display:none}.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.left{transform:translateY(-2px)}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.center{display:none}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.right{transform:translate(calc(100% - var(--width) / 2),-2px)}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.left{display:none}.cdk-overlay-container .vic-tooltip-svg-triangle{display:block;transform:translate(calc(50% - var(--width) / 2),-2px)}.cdk-overlay-container .vic-tooltip-svg-triangle .triangle-path{stroke:var(--tooltip-triangle-stroke, gray);fill:var(--tooltip-triangle-fill, white);fill-opacity:var(--tooltip-triangle-fill-opacity, 1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4011
4011
|
}
|
|
4012
4012
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipTriangleComponent, decorators: [{
|
|
4013
4013
|
type: Component,
|
|
4014
|
-
args: [{ selector: 'vic-tooltip-triangle', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<svg\
|
|
4014
|
+
args: [{ selector: 'vic-tooltip-triangle', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<svg\n width=\"100%\"\n [attr.height]=\"height\"\n [style.--width]=\"width + 'px'\"\n class=\"vic-tooltip-svg-triangle center\"\n>\n <g class=\"svg-g\">\n <path\n class=\"triangle-path\"\n [attr.d]=\"'M 0,0 ' + (width / 2) + ',' + height + ' ' + width + ',0'\"\n ></path>\n </g>\n</svg>\n\n<svg\n width=\"100%\"\n [attr.height]=\"height\"\n [style.--width]=\"width + 'px'\"\n class=\"vic-tooltip-svg-triangle right\"\n>\n <g class=\"svg-g\">\n <path\n class=\"triangle-path\"\n [attr.d]=\"'M 0,0 ' + (width / 2) + ',' + height + ' ' + (width / 2) + ',0'\"\n ></path>\n </g>\n</svg>\n\n<svg\n width=\"100%\"\n [attr.height]=\"height\"\n [style.--width]=\"width + 'px'\"\n class=\"vic-tooltip-svg-triangle left\"\n>\n <g class=\"svg-g\">\n <path\n class=\"triangle-path\"\n [attr.d]=\"'M 0,0 ' + '0,' + height + ' ' + (width / 2) + ',0'\"\n ></path>\n </g>\n</svg>\n", styles: [".cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.center{transform:translate(calc(50% - var(--width) / 2),-2px)}.cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.right,.cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.left,.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.center,.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.right{display:none}.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.left{transform:translateY(-2px)}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.center{display:none}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.right{transform:translate(calc(100% - var(--width) / 2),-2px)}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.left{display:none}.cdk-overlay-container .vic-tooltip-svg-triangle{display:block;transform:translate(calc(50% - var(--width) / 2),-2px)}.cdk-overlay-container .vic-tooltip-svg-triangle .triangle-path{stroke:var(--tooltip-triangle-stroke, gray);fill:var(--tooltip-triangle-fill, white);fill-opacity:var(--tooltip-triangle-fill-opacity, 1)}\n"] }]
|
|
4015
4015
|
}], propDecorators: { height: [{
|
|
4016
4016
|
type: Input
|
|
4017
4017
|
}], width: [{
|
|
@@ -7732,7 +7732,7 @@ class GeographiesComponent extends MapPrimaryMarks {
|
|
|
7732
7732
|
provide: ChartComponent,
|
|
7733
7733
|
useExisting: MapChartComponent,
|
|
7734
7734
|
},
|
|
7735
|
-
], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\
|
|
7735
|
+
], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
7736
7736
|
}
|
|
7737
7737
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GeographiesComponent, decorators: [{
|
|
7738
7738
|
type: Component,
|
|
@@ -7749,7 +7749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
7749
7749
|
], host: {
|
|
7750
7750
|
'[class]': 'config.marksClass',
|
|
7751
7751
|
'[style.mixed-blend-mode]': 'config.mixBlendMode',
|
|
7752
|
-
}, template: "<ng-content></ng-content>\
|
|
7752
|
+
}, template: "<ng-content></ng-content>\n" }]
|
|
7753
7753
|
}] });
|
|
7754
7754
|
|
|
7755
7755
|
const DEFAULT_POSITIONS$2 = [
|
|
@@ -9504,11 +9504,11 @@ class ContinuousLegendComponent extends MapLegend {
|
|
|
9504
9504
|
}
|
|
9505
9505
|
}
|
|
9506
9506
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContinuousLegendComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
9507
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ContinuousLegendComponent, isStandalone: true, selector: "vic-continuous-legend", viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\
|
|
9507
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ContinuousLegendComponent, isStandalone: true, selector: "vic-continuous-legend", viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"vic-legend-color-scale vic-continuous\"\n [ngClass]=\"['vic-' + orientation, 'vic-' + valuesSide]\"\n [style.--width]=\"width + 'px'\"\n [style.--height]=\"height + 'px'\"\n [style.--border-color]=\"outlineColor\"\n [style.--value-space]=\"largerValueSpace + 'px'\"\n [style.left.px]=\"leftOffset\"\n>\n @if ((orientation === 'vertical' && valuesSide === 'left') || (orientation ===\n 'horizontal' && valuesSide === 'top')) {\n <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n }\n <div class=\"vic-legend-canvas-container\">\n <canvas class=\"vic-legend-canvas\" #canvas></canvas>\n </div>\n @if ((orientation === 'vertical' && valuesSide === 'right') || (orientation\n === 'horizontal' && valuesSide === 'bottom')) {\n <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n }\n</div>\n\n<ng-template #valuesDisplay>\n <div class=\"vic-legend-values-container vic-continuous\">\n <p class=\"vic-value vic-low\">{{ values[0] }}</p>\n <p class=\"vic-value vic-high\">{{ values[values.length - 1] }}</p>\n </div>\n</ng-template>\n", styles: [".vic-legend-canvas{display:block}.vic-legend-color-scale.vic-horizontal{display:flex;flex-direction:column;position:relative;max-width:var(--width)}.vic-legend-color-scale.vic-horizontal .vic-legend-canvas-container{display:flex;flex-direction:column;width:calc(var(--width) - var(--value-space) * 2);height:var(--height);margin-right:var(--value-space);margin-left:var(--value-space)}.vic-legend-color-scale.vic-horizontal .vic-legend-values-container{padding-top:.25rem;display:flex;flex-direction:row;justify-content:space-between}.vic-legend-color-scale.vic-horizontal .vic-value{width:calc(var(--value-space) * 2);text-align:center}.vic-legend-color-scale.vic-horizontal.vic-top .vic-legend-values-container{padding-top:0;padding-bottom:.25rem}.vic-legend-color-scale.vic-vertical{display:flex;max-height:var(--height)}.vic-legend-color-scale.vic-vertical .vic-legend-canvas-container{width:var(--width);height:calc(var(--height) - grid-2 * 2);margin-top:.5rem;margin-bottom:.5rem}.vic-legend-color-scale.vic-vertical .vic-legend-values-container{padding-right:.25rem;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}.vic-legend-color-scale.vic-vertical.vic-right .vic-legend-values-container{padding-right:0;padding-left:.25rem;align-items:flex-start}.vic-legend-canvas-container{border:1px solid var(--border-color)}.vic-value{font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
9508
9508
|
}
|
|
9509
9509
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContinuousLegendComponent, decorators: [{
|
|
9510
9510
|
type: Component,
|
|
9511
|
-
args: [{ selector: 'vic-continuous-legend', imports: [CommonModule], template: "<div\
|
|
9511
|
+
args: [{ selector: 'vic-continuous-legend', imports: [CommonModule], template: "<div\n class=\"vic-legend-color-scale vic-continuous\"\n [ngClass]=\"['vic-' + orientation, 'vic-' + valuesSide]\"\n [style.--width]=\"width + 'px'\"\n [style.--height]=\"height + 'px'\"\n [style.--border-color]=\"outlineColor\"\n [style.--value-space]=\"largerValueSpace + 'px'\"\n [style.left.px]=\"leftOffset\"\n>\n @if ((orientation === 'vertical' && valuesSide === 'left') || (orientation ===\n 'horizontal' && valuesSide === 'top')) {\n <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n }\n <div class=\"vic-legend-canvas-container\">\n <canvas class=\"vic-legend-canvas\" #canvas></canvas>\n </div>\n @if ((orientation === 'vertical' && valuesSide === 'right') || (orientation\n === 'horizontal' && valuesSide === 'bottom')) {\n <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n }\n</div>\n\n<ng-template #valuesDisplay>\n <div class=\"vic-legend-values-container vic-continuous\">\n <p class=\"vic-value vic-low\">{{ values[0] }}</p>\n <p class=\"vic-value vic-high\">{{ values[values.length - 1] }}</p>\n </div>\n</ng-template>\n", styles: [".vic-legend-canvas{display:block}.vic-legend-color-scale.vic-horizontal{display:flex;flex-direction:column;position:relative;max-width:var(--width)}.vic-legend-color-scale.vic-horizontal .vic-legend-canvas-container{display:flex;flex-direction:column;width:calc(var(--width) - var(--value-space) * 2);height:var(--height);margin-right:var(--value-space);margin-left:var(--value-space)}.vic-legend-color-scale.vic-horizontal .vic-legend-values-container{padding-top:.25rem;display:flex;flex-direction:row;justify-content:space-between}.vic-legend-color-scale.vic-horizontal .vic-value{width:calc(var(--value-space) * 2);text-align:center}.vic-legend-color-scale.vic-horizontal.vic-top .vic-legend-values-container{padding-top:0;padding-bottom:.25rem}.vic-legend-color-scale.vic-vertical{display:flex;max-height:var(--height)}.vic-legend-color-scale.vic-vertical .vic-legend-canvas-container{width:var(--width);height:calc(var(--height) - grid-2 * 2);margin-top:.5rem;margin-bottom:.5rem}.vic-legend-color-scale.vic-vertical .vic-legend-values-container{padding-right:.25rem;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}.vic-legend-color-scale.vic-vertical.vic-right .vic-legend-values-container{padding-right:0;padding-left:.25rem;align-items:flex-start}.vic-legend-canvas-container{border:1px solid var(--border-color)}.vic-value{font-size:12px}\n"] }]
|
|
9512
9512
|
}], propDecorators: { canvasRef: [{
|
|
9513
9513
|
type: ViewChild,
|
|
9514
9514
|
args: ['canvas', { static: true }]
|
|
@@ -9547,11 +9547,11 @@ class DiscontinuousLegendComponent extends MapLegend {
|
|
|
9547
9547
|
}
|
|
9548
9548
|
}
|
|
9549
9549
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DiscontinuousLegendComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
9550
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DiscontinuousLegendComponent, isStandalone: true, selector: "vic-discontinuous-legend", usesInheritance: true, ngImport: i0, template: "<div\
|
|
9550
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DiscontinuousLegendComponent, isStandalone: true, selector: "vic-discontinuous-legend", usesInheritance: true, ngImport: i0, template: "<div\n class=\"vic-legend-color-scale vic-discontinuous\"\n [ngClass]=\"['vic-' + orientation, 'vic-' + valuesSide]\"\n [class.vic-categorical]=\"config.binType === VicValuesBin.categorical\"\n [style.--border-color]=\"outlineColor\"\n [style.--width]=\"width + 'px'\"\n [style.--height]=\"height + 'px'\"\n [style.--num-colors]=\"colors.length\"\n [style.--value-space]=\"largerValueSpace + 'px'\"\n [style.left.px]=\"leftOffset\"\n>\n @if ((orientation === 'vertical' && valuesSide === 'left') || (orientation ===\n 'horizontal' && valuesSide === 'top')) {\n <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n }\n <div class=\"vic-legend-colors-container\">\n @if (config.binType !== VicValuesBin.categorical) {\n <div class=\"vic-legend-color-padding\"></div>\n } @for (color of colors; track $index) {\n <div\n class=\"vic-legend-color vic-discontinuous\"\n [style.background-color]=\"color\"\n [style.--border-color]=\"outlineColor\"\n >\n </div>\n }\n </div>\n @if ((orientation === 'vertical' && valuesSide === 'right') || (orientation\n === 'horizontal' && valuesSide === 'bottom')) {\n <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n }\n</div>\n\n<ng-template #valuesDisplay>\n <div class=\"vic-legend-values-container vic-discontinous\">\n @for (value of values; track $index) {\n <p class=\"vic-value\"> {{ value }} </p>\n }\n </div>\n</ng-template>\n", styles: [".vic-legend-color-scale.vic-horizontal{display:flex;flex-direction:column;position:relative}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container{display:grid;grid-template-columns:minmax(var(--value-space),.5fr) repeat(var(--num-colors),minmax(calc(var(--value-space) * 2),1fr)) minmax(var(--value-space),.5fr);max-width:var(--width);height:var(--height)}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container .vic-legend-color{height:100%;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);border-left:1px solid var(--border-color)}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container .vic-legend-color:last-child{border-right:1px solid var(--border-color)}.vic-legend-color-scale.vic-horizontal .vic-legend-values-container{padding-top:.25rem;display:grid;grid-template-columns:repeat(calc(var(--num-colors) + 1),minmax(calc(var(--value-space) * 2),1fr));max-width:var(--width);justify-items:center}.vic-legend-color-scale.vic-horizontal.vic-top .vic-legend-values-container{padding-top:0;padding-bottom:.25rem}.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-legend-colors-container,.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-legend-values-container{column-gap:.5rem;grid-template-columns:repeat(calc(var(--num-colors)),1fr)}.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-value{text-align:center}.vic-legend-color-scale.vic-categorical .vic-legend-color{border:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical{display:flex;height:var(--height)}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container{display:grid;grid-template-columns:var(--width);grid-template-rows:.5fr repeat(var(--num-colors),1fr) .5fr;height:100%}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container .vic-legend-color{width:100%;border-top:1px solid var(--border-color);border-left:1px solid var(--border-color);border-right:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container .vic-legend-color:last-child{border-bottom:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical .vic-legend-values-container{padding-right:.25rem;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(calc(var(--num-colors) + 1),1fr);align-items:center;justify-items:end;height:100%}.vic-legend-color-scale.vic-vertical.vic-right .vic-legend-values-container{padding-right:0;padding-left:.25rem;justify-items:start}.vic-legend-color-scale.vic-vertical.vic-categorical .vic-legend-colors-container,.vic-legend-color-scale.vic-vertical.vic-categorical .vic-legend-values-container{grid-template-rows:repeat(var(--num-colors),1fr);row-gap:.5rem}.vic-legend-color-scale.vic-vertical.vic-categorical .vic-value{text-align:right}.vic-legend-color-scale.vic-vertical.vic-categorical.vic-right .vic-value{text-align:left}.vic-value{font-size:12px;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
9551
9551
|
}
|
|
9552
9552
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DiscontinuousLegendComponent, decorators: [{
|
|
9553
9553
|
type: Component,
|
|
9554
|
-
args: [{ selector: 'vic-discontinuous-legend', imports: [CommonModule], template: "<div\
|
|
9554
|
+
args: [{ selector: 'vic-discontinuous-legend', imports: [CommonModule], template: "<div\n class=\"vic-legend-color-scale vic-discontinuous\"\n [ngClass]=\"['vic-' + orientation, 'vic-' + valuesSide]\"\n [class.vic-categorical]=\"config.binType === VicValuesBin.categorical\"\n [style.--border-color]=\"outlineColor\"\n [style.--width]=\"width + 'px'\"\n [style.--height]=\"height + 'px'\"\n [style.--num-colors]=\"colors.length\"\n [style.--value-space]=\"largerValueSpace + 'px'\"\n [style.left.px]=\"leftOffset\"\n>\n @if ((orientation === 'vertical' && valuesSide === 'left') || (orientation ===\n 'horizontal' && valuesSide === 'top')) {\n <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n }\n <div class=\"vic-legend-colors-container\">\n @if (config.binType !== VicValuesBin.categorical) {\n <div class=\"vic-legend-color-padding\"></div>\n } @for (color of colors; track $index) {\n <div\n class=\"vic-legend-color vic-discontinuous\"\n [style.background-color]=\"color\"\n [style.--border-color]=\"outlineColor\"\n >\n </div>\n }\n </div>\n @if ((orientation === 'vertical' && valuesSide === 'right') || (orientation\n === 'horizontal' && valuesSide === 'bottom')) {\n <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n }\n</div>\n\n<ng-template #valuesDisplay>\n <div class=\"vic-legend-values-container vic-discontinous\">\n @for (value of values; track $index) {\n <p class=\"vic-value\"> {{ value }} </p>\n }\n </div>\n</ng-template>\n", styles: [".vic-legend-color-scale.vic-horizontal{display:flex;flex-direction:column;position:relative}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container{display:grid;grid-template-columns:minmax(var(--value-space),.5fr) repeat(var(--num-colors),minmax(calc(var(--value-space) * 2),1fr)) minmax(var(--value-space),.5fr);max-width:var(--width);height:var(--height)}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container .vic-legend-color{height:100%;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);border-left:1px solid var(--border-color)}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container .vic-legend-color:last-child{border-right:1px solid var(--border-color)}.vic-legend-color-scale.vic-horizontal .vic-legend-values-container{padding-top:.25rem;display:grid;grid-template-columns:repeat(calc(var(--num-colors) + 1),minmax(calc(var(--value-space) * 2),1fr));max-width:var(--width);justify-items:center}.vic-legend-color-scale.vic-horizontal.vic-top .vic-legend-values-container{padding-top:0;padding-bottom:.25rem}.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-legend-colors-container,.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-legend-values-container{column-gap:.5rem;grid-template-columns:repeat(calc(var(--num-colors)),1fr)}.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-value{text-align:center}.vic-legend-color-scale.vic-categorical .vic-legend-color{border:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical{display:flex;height:var(--height)}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container{display:grid;grid-template-columns:var(--width);grid-template-rows:.5fr repeat(var(--num-colors),1fr) .5fr;height:100%}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container .vic-legend-color{width:100%;border-top:1px solid var(--border-color);border-left:1px solid var(--border-color);border-right:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container .vic-legend-color:last-child{border-bottom:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical .vic-legend-values-container{padding-right:.25rem;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(calc(var(--num-colors) + 1),1fr);align-items:center;justify-items:end;height:100%}.vic-legend-color-scale.vic-vertical.vic-right .vic-legend-values-container{padding-right:0;padding-left:.25rem;justify-items:start}.vic-legend-color-scale.vic-vertical.vic-categorical .vic-legend-colors-container,.vic-legend-color-scale.vic-vertical.vic-categorical .vic-legend-values-container{grid-template-rows:repeat(var(--num-colors),1fr);row-gap:.5rem}.vic-legend-color-scale.vic-vertical.vic-categorical .vic-value{text-align:right}.vic-legend-color-scale.vic-vertical.vic-categorical.vic-right .vic-value{text-align:left}.vic-value{font-size:12px;line-height:1}\n"] }]
|
|
9555
9555
|
}] });
|
|
9556
9556
|
|
|
9557
9557
|
var VicLegendType;
|
|
@@ -9595,7 +9595,7 @@ class MapLegendComponent {
|
|
|
9595
9595
|
}
|
|
9596
9596
|
}
|
|
9597
9597
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9598
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MapLegendComponent, isStandalone: true, selector: "vic-map-legend", inputs: { width: "width", height: "height", valuesSide: "valuesSide", outlineColor: "outlineColor" }, viewQueries: [{ propertyName: "VicValuesBin", first: true, predicate: ["canvas"], descendants: true, static: true }], ngImport: i0, template: "<ng-content select=\"[title]\"></ng-content>\
|
|
9598
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MapLegendComponent, isStandalone: true, selector: "vic-map-legend", inputs: { width: "width", height: "height", valuesSide: "valuesSide", outlineColor: "outlineColor" }, viewQueries: [{ propertyName: "VicValuesBin", first: true, predicate: ["canvas"], descendants: true, static: true }], ngImport: i0, template: "<ng-content select=\"[title]\"></ng-content>\n@if (chart.attributeProperties$ | async; as attributeProperties) { @if\n(attributeProperties.config) { @if (attributeProperties.config.binType ===\nVicValuesBin.none) {\n<vic-continuous-legend\n [width]=\"width\"\n [height]=\"height\"\n [valuesSide]=\"valuesSide\"\n [scale]=\"attributeProperties.scale\"\n [config]=\"attributeProperties.config\"\n [outlineColor]=\"outlineColor\"\n [orientation]=\"orientation\"\n></vic-continuous-legend>\n} @else {\n<vic-discontinuous-legend\n [width]=\"width\"\n [height]=\"height\"\n [valuesSide]=\"valuesSide\"\n [scale]=\"attributeProperties.scale\"\n [config]=\"attributeProperties.config\"\n [outlineColor]=\"outlineColor\"\n [orientation]=\"orientation\"\n></vic-discontinuous-legend>\n} } }\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContinuousLegendComponent, selector: "vic-continuous-legend" }, { kind: "component", type: DiscontinuousLegendComponent, selector: "vic-discontinuous-legend" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
9599
9599
|
}
|
|
9600
9600
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapLegendComponent, decorators: [{
|
|
9601
9601
|
type: Component,
|
|
@@ -9603,7 +9603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
9603
9603
|
CommonModule,
|
|
9604
9604
|
ContinuousLegendComponent,
|
|
9605
9605
|
DiscontinuousLegendComponent,
|
|
9606
|
-
], template: "<ng-content select=\"[title]\"></ng-content>\
|
|
9606
|
+
], template: "<ng-content select=\"[title]\"></ng-content>\n@if (chart.attributeProperties$ | async; as attributeProperties) { @if\n(attributeProperties.config) { @if (attributeProperties.config.binType ===\nVicValuesBin.none) {\n<vic-continuous-legend\n [width]=\"width\"\n [height]=\"height\"\n [valuesSide]=\"valuesSide\"\n [scale]=\"attributeProperties.scale\"\n [config]=\"attributeProperties.config\"\n [outlineColor]=\"outlineColor\"\n [orientation]=\"orientation\"\n></vic-continuous-legend>\n} @else {\n<vic-discontinuous-legend\n [width]=\"width\"\n [height]=\"height\"\n [valuesSide]=\"valuesSide\"\n [scale]=\"attributeProperties.scale\"\n [config]=\"attributeProperties.config\"\n [outlineColor]=\"outlineColor\"\n [orientation]=\"orientation\"\n></vic-discontinuous-legend>\n} } }\n" }]
|
|
9607
9607
|
}], propDecorators: { width: [{
|
|
9608
9608
|
type: Input
|
|
9609
9609
|
}], height: [{
|
|
@@ -10988,13 +10988,13 @@ class XyBackgroundComponent {
|
|
|
10988
10988
|
this.chart = inject(XyChartComponent);
|
|
10989
10989
|
}
|
|
10990
10990
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyBackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10991
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: XyBackgroundComponent, isStandalone: true, selector: "[vic-xy-background]", inputs: { color: "color" }, host: { classAttribute: "vic-xy-background" }, ngImport: i0, template: "@if(chart.scales$ | async; as scales) { @if(scales.x && scales.y) {\
|
|
10991
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: XyBackgroundComponent, isStandalone: true, selector: "[vic-xy-background]", inputs: { color: "color" }, host: { classAttribute: "vic-xy-background" }, ngImport: i0, template: "@if(chart.scales$ | async; as scales) { @if(scales.x && scales.y) {\n<svg:rect\n class=\"vic-xy-background\"\n [attr.x]=\"scales.x.range()[0]\"\n [attr.y]=\"scales.y.range()[1]\"\n [attr.width]=\"scales.x.range()[1] - scales.x.range()[0]\"\n [attr.height]=\"scales.y.range()[0] - scales.y.range()[1]\"\n [attr.fill]=\"color\"\n></svg:rect>\n} }\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
10992
10992
|
}
|
|
10993
10993
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyBackgroundComponent, decorators: [{
|
|
10994
10994
|
type: Component,
|
|
10995
10995
|
args: [{ selector: '[vic-xy-background]', host: {
|
|
10996
10996
|
class: 'vic-xy-background',
|
|
10997
|
-
}, imports: [AsyncPipe, CommonModule], template: "@if(chart.scales$ | async; as scales) { @if(scales.x && scales.y) {\
|
|
10997
|
+
}, imports: [AsyncPipe, CommonModule], template: "@if(chart.scales$ | async; as scales) { @if(scales.x && scales.y) {\n<svg:rect\n class=\"vic-xy-background\"\n [attr.x]=\"scales.x.range()[0]\"\n [attr.y]=\"scales.y.range()[1]\"\n [attr.width]=\"scales.x.range()[1] - scales.x.range()[0]\"\n [attr.height]=\"scales.y.range()[0] - scales.y.range()[1]\"\n [attr.fill]=\"color\"\n></svg:rect>\n} }\n" }]
|
|
10998
10998
|
}], propDecorators: { color: [{
|
|
10999
10999
|
type: Input
|
|
11000
11000
|
}] } });
|