@mathstack/viz 2.2.0 → 2.2.2
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 +31 -24
- 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 {
|
|
@@ -2093,6 +2093,9 @@ function xAxisMixin(Base) {
|
|
|
2093
2093
|
getBaselineTranslate() {
|
|
2094
2094
|
if (!this.otherAxisHasPosAndNegValues('x'))
|
|
2095
2095
|
return null;
|
|
2096
|
+
const yDomain = this.scales.y.domain();
|
|
2097
|
+
if (yDomain[0] > 0 || yDomain[1] < 0)
|
|
2098
|
+
return null;
|
|
2096
2099
|
const rangeIndexForSide = this.config.side === 'top' ? 1 : 0;
|
|
2097
2100
|
const translateDistance = this.scales.y(0) - this.scales.y.range()[rangeIndexForSide];
|
|
2098
2101
|
return `translate(0, ${translateDistance})`;
|
|
@@ -2356,6 +2359,9 @@ function yAxisMixin(Base) {
|
|
|
2356
2359
|
getBaselineTranslate() {
|
|
2357
2360
|
if (!this.otherAxisHasPosAndNegValues('y'))
|
|
2358
2361
|
return null;
|
|
2362
|
+
const xDomain = this.scales.x.domain();
|
|
2363
|
+
if (xDomain[0] > 0 || xDomain[1] < 0)
|
|
2364
|
+
return null;
|
|
2359
2365
|
const rangeIndexForSide = this.config.side === 'left' ? 0 : 1;
|
|
2360
2366
|
const translateDistance = this.scales.x(0) - this.scales.x.range()[rangeIndexForSide];
|
|
2361
2367
|
return `translate(${translateDistance}, 0)`;
|
|
@@ -3065,13 +3071,14 @@ class BarsComponent extends VicXyPrimaryMarks {
|
|
|
3065
3071
|
const origin = this.getBarQuantitativeOrigin();
|
|
3066
3072
|
return this.scales.x(origin);
|
|
3067
3073
|
}
|
|
3068
|
-
else if (
|
|
3069
|
-
if (
|
|
3074
|
+
else if (d.quantitative < 0) {
|
|
3075
|
+
if (this.config.quantitative.domainIncludesZero) {
|
|
3070
3076
|
return this.scales.x(d.quantitative);
|
|
3071
3077
|
}
|
|
3072
|
-
return this.scales.x(
|
|
3078
|
+
return this.scales.x(this.getQuantitativeDomainFromScale()[1]);
|
|
3073
3079
|
}
|
|
3074
|
-
|
|
3080
|
+
const origin = this.getBarQuantitativeOrigin();
|
|
3081
|
+
return this.scales.x(origin);
|
|
3075
3082
|
}
|
|
3076
3083
|
getBarY(d) {
|
|
3077
3084
|
if (this.config.dimensions.y === 'ordinal') {
|
|
@@ -4007,11 +4014,11 @@ class TooltipTriangleComponent {
|
|
|
4007
4014
|
this.width = 20;
|
|
4008
4015
|
}
|
|
4009
4016
|
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\
|
|
4017
|
+
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
4018
|
}
|
|
4012
4019
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipTriangleComponent, decorators: [{
|
|
4013
4020
|
type: Component,
|
|
4014
|
-
args: [{ selector: 'vic-tooltip-triangle', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<svg\
|
|
4021
|
+
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
4022
|
}], propDecorators: { height: [{
|
|
4016
4023
|
type: Input
|
|
4017
4024
|
}], width: [{
|
|
@@ -7732,7 +7739,7 @@ class GeographiesComponent extends MapPrimaryMarks {
|
|
|
7732
7739
|
provide: ChartComponent,
|
|
7733
7740
|
useExisting: MapChartComponent,
|
|
7734
7741
|
},
|
|
7735
|
-
], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\
|
|
7742
|
+
], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
7736
7743
|
}
|
|
7737
7744
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GeographiesComponent, decorators: [{
|
|
7738
7745
|
type: Component,
|
|
@@ -7749,7 +7756,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
7749
7756
|
], host: {
|
|
7750
7757
|
'[class]': 'config.marksClass',
|
|
7751
7758
|
'[style.mixed-blend-mode]': 'config.mixBlendMode',
|
|
7752
|
-
}, template: "<ng-content></ng-content>\
|
|
7759
|
+
}, template: "<ng-content></ng-content>\n" }]
|
|
7753
7760
|
}] });
|
|
7754
7761
|
|
|
7755
7762
|
const DEFAULT_POSITIONS$2 = [
|
|
@@ -9504,11 +9511,11 @@ class ContinuousLegendComponent extends MapLegend {
|
|
|
9504
9511
|
}
|
|
9505
9512
|
}
|
|
9506
9513
|
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\
|
|
9514
|
+
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
9515
|
}
|
|
9509
9516
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContinuousLegendComponent, decorators: [{
|
|
9510
9517
|
type: Component,
|
|
9511
|
-
args: [{ selector: 'vic-continuous-legend', imports: [CommonModule], template: "<div\
|
|
9518
|
+
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
9519
|
}], propDecorators: { canvasRef: [{
|
|
9513
9520
|
type: ViewChild,
|
|
9514
9521
|
args: ['canvas', { static: true }]
|
|
@@ -9547,11 +9554,11 @@ class DiscontinuousLegendComponent extends MapLegend {
|
|
|
9547
9554
|
}
|
|
9548
9555
|
}
|
|
9549
9556
|
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\
|
|
9557
|
+
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
9558
|
}
|
|
9552
9559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DiscontinuousLegendComponent, decorators: [{
|
|
9553
9560
|
type: Component,
|
|
9554
|
-
args: [{ selector: 'vic-discontinuous-legend', imports: [CommonModule], template: "<div\
|
|
9561
|
+
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
9562
|
}] });
|
|
9556
9563
|
|
|
9557
9564
|
var VicLegendType;
|
|
@@ -9595,7 +9602,7 @@ class MapLegendComponent {
|
|
|
9595
9602
|
}
|
|
9596
9603
|
}
|
|
9597
9604
|
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>\
|
|
9605
|
+
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
9606
|
}
|
|
9600
9607
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapLegendComponent, decorators: [{
|
|
9601
9608
|
type: Component,
|
|
@@ -9603,7 +9610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
9603
9610
|
CommonModule,
|
|
9604
9611
|
ContinuousLegendComponent,
|
|
9605
9612
|
DiscontinuousLegendComponent,
|
|
9606
|
-
], template: "<ng-content select=\"[title]\"></ng-content>\
|
|
9613
|
+
], 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
9614
|
}], propDecorators: { width: [{
|
|
9608
9615
|
type: Input
|
|
9609
9616
|
}], height: [{
|
|
@@ -10988,13 +10995,13 @@ class XyBackgroundComponent {
|
|
|
10988
10995
|
this.chart = inject(XyChartComponent);
|
|
10989
10996
|
}
|
|
10990
10997
|
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) {\
|
|
10998
|
+
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
10999
|
}
|
|
10993
11000
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyBackgroundComponent, decorators: [{
|
|
10994
11001
|
type: Component,
|
|
10995
11002
|
args: [{ selector: '[vic-xy-background]', host: {
|
|
10996
11003
|
class: 'vic-xy-background',
|
|
10997
|
-
}, imports: [AsyncPipe, CommonModule], template: "@if(chart.scales$ | async; as scales) { @if(scales.x && scales.y) {\
|
|
11004
|
+
}, 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
11005
|
}], propDecorators: { color: [{
|
|
10999
11006
|
type: Input
|
|
11000
11007
|
}] } });
|