@tetacom/svg-charts 1.7.6 → 1.7.8
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AfterViewInit,
|
|
1
|
+
import { AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
|
|
2
2
|
import { Axis } from '../../core/axis/axis';
|
|
3
3
|
import { AxisOrientation } from '../../model/enum/axis-orientation';
|
|
4
4
|
import { IChartEvent } from '../../model/i-chart-event';
|
|
@@ -7,28 +7,31 @@ import { ChartService } from '../../service/chart.service';
|
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
8
|
export declare class PlotBandComponent implements AfterViewInit, OnDestroy {
|
|
9
9
|
private chartService;
|
|
10
|
-
private cdr;
|
|
11
10
|
private element;
|
|
12
|
-
plotBand: PlotBand
|
|
13
|
-
axis: Axis
|
|
14
|
-
scale: any
|
|
15
|
-
size: DOMRect
|
|
11
|
+
plotBand: import("@angular/core").InputSignal<PlotBand>;
|
|
12
|
+
axis: import("@angular/core").InputSignal<Axis>;
|
|
13
|
+
scale: import("@angular/core").InputSignal<any>;
|
|
14
|
+
size: import("@angular/core").InputSignal<DOMRect>;
|
|
15
|
+
fromTo: import("@angular/core").WritableSignal<{
|
|
16
|
+
from: number;
|
|
17
|
+
to: number;
|
|
18
|
+
}>;
|
|
16
19
|
click(event: MouseEvent): void;
|
|
17
20
|
contextMenu(event: MouseEvent): void;
|
|
18
21
|
orientation: typeof AxisOrientation;
|
|
19
22
|
resizeElements: any;
|
|
20
23
|
dragElements: any;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
height: import("@angular/core").Signal<number>;
|
|
25
|
+
width: import("@angular/core").Signal<number>;
|
|
26
|
+
from: import("@angular/core").Signal<any>;
|
|
27
|
+
to: import("@angular/core").Signal<any>;
|
|
28
|
+
bandSize: import("@angular/core").Signal<number>;
|
|
29
|
+
textPosition: import("@angular/core").Signal<any>;
|
|
30
|
+
fill: import("@angular/core").Signal<string>;
|
|
31
|
+
constructor(chartService: ChartService, element: ElementRef);
|
|
27
32
|
emit(event: IChartEvent<PlotBand>): void;
|
|
28
33
|
ngAfterViewInit(): void;
|
|
29
34
|
ngOnDestroy(): void;
|
|
30
|
-
getTextPosition: () => any;
|
|
31
|
-
getFill(d: PlotBand): string;
|
|
32
35
|
static ɵfac: i0.ɵɵFactoryDeclaration<PlotBandComponent, never>;
|
|
33
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<PlotBandComponent, "[teta-plot-band]", never, { "plotBand": { "alias": "plotBand"; "required": false; }; "axis": { "alias": "axis"; "required": false; }; "scale": { "alias": "scale"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
|
|
36
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<PlotBandComponent, "[teta-plot-band]", never, { "plotBand": { "alias": "plotBand"; "required": false; "isSignal": true; }; "axis": { "alias": "axis"; "required": false; "isSignal": true; }; "scale": { "alias": "scale"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
34
37
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, input, inject, ChangeDetectorRef, ElementRef, computed, Component, ChangeDetectionStrategy, Input, ViewChild, Directive, HostBinding, HostListener, signal, EventEmitter, Output, ViewContainerRef
|
|
2
|
+
import { Injectable, input, inject, ChangeDetectorRef, ElementRef, computed, Component, ChangeDetectionStrategy, Input, ViewChild, Directive, HostBinding, HostListener, signal, effect, EventEmitter, Output, ViewContainerRef } from '@angular/core';
|
|
3
3
|
import { ReplaySubject, filter, BehaviorSubject, Subject, of, shareReplay, withLatestFrom, map, merge, lastValueFrom, take, combineLatest, tap, takeWhile, observeOn, animationFrameScheduler } from 'rxjs';
|
|
4
4
|
import * as d3 from 'd3';
|
|
5
5
|
import { zoomIdentity } from 'd3';
|
|
@@ -1473,66 +1473,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
1473
1473
|
args: [{ selector: '[teta-y-axis]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ({\n y: y(),\n axis: axis()\n}; as data) {\n @for (tick of data.y.ticks(); track $index) {\n <svg:g\n [attr.text-anchor]=\"data.axis.options.opposite ? 'start' : 'end'\"\n [attr.transform]=\"'translate(0, ' + data.y(tick) + ')'\"\n >\n <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"data.axis.options.opposite ? 10 : -9\">\n {{ data.axis.options.tickFormat ? data.axis.options.tickFormat(tick) : data.axis.defaultFormatter()(tick) }}\n </text>\n <line stroke=\"var(--color-text-30)\" [attr.x2]=\"data.axis.options.opposite ? 6 : -6\"></line>\n </svg:g>\n }\n <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n <text\n [attr.dy]=\"data.axis.options.opposite ? '-4px' : '4px'\"\n text-anchor=\"middle\"\n [attr.dominant-baseline]=\"data.axis.options.opposite ? 'auto' : 'hanging'\"\n >\n {{ data.axis.options.title }}\n </text>\n </svg:g>\n}\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\n"] }]
|
|
1474
1474
|
}] });
|
|
1475
1475
|
|
|
1476
|
-
class PlotBand {
|
|
1477
|
-
constructor(options) {
|
|
1478
|
-
this.order = 0;
|
|
1479
|
-
this.id = options?.id;
|
|
1480
|
-
this.name = options?.name;
|
|
1481
|
-
this.from = options?.from;
|
|
1482
|
-
this.to = options?.to;
|
|
1483
|
-
this.label = options?.label;
|
|
1484
|
-
this.showGrabbers = options?.showGrabbers != null ? options.showGrabbers : true;
|
|
1485
|
-
this.draggable = options?.draggable != null ? options?.draggable : false;
|
|
1486
|
-
this.resizable = options?.resizable != null ? options?.resizable : true;
|
|
1487
|
-
this.min = options?.min;
|
|
1488
|
-
this.max = options?.max;
|
|
1489
|
-
this.order = options?.order ?? 0;
|
|
1490
|
-
this.style = options?.style;
|
|
1491
|
-
}
|
|
1492
|
-
}
|
|
1493
|
-
|
|
1494
1476
|
class PlotBandComponent {
|
|
1495
1477
|
click(event) {
|
|
1496
1478
|
this.emit({
|
|
1497
|
-
target: this.plotBand,
|
|
1479
|
+
target: this.plotBand(),
|
|
1498
1480
|
event,
|
|
1499
1481
|
});
|
|
1500
1482
|
}
|
|
1501
1483
|
contextMenu(event) {
|
|
1502
1484
|
this.emit({
|
|
1503
|
-
target: this.plotBand,
|
|
1485
|
+
target: this.plotBand(),
|
|
1504
1486
|
event,
|
|
1505
1487
|
});
|
|
1506
1488
|
}
|
|
1507
|
-
|
|
1508
|
-
return this.size.height;
|
|
1509
|
-
}
|
|
1510
|
-
get width() {
|
|
1511
|
-
return this.size.width;
|
|
1512
|
-
}
|
|
1513
|
-
get from() {
|
|
1514
|
-
return this.scale(this.plotBand.from);
|
|
1515
|
-
}
|
|
1516
|
-
get to() {
|
|
1517
|
-
return this.scale(this.plotBand.to);
|
|
1518
|
-
}
|
|
1519
|
-
get bandSize() {
|
|
1520
|
-
return Math.abs(this.scale(this.plotBand.to) - this.scale(this.plotBand.from));
|
|
1521
|
-
}
|
|
1522
|
-
constructor(chartService, cdr, element) {
|
|
1489
|
+
constructor(chartService, element) {
|
|
1523
1490
|
this.chartService = chartService;
|
|
1524
|
-
this.cdr = cdr;
|
|
1525
1491
|
this.element = element;
|
|
1492
|
+
this.plotBand = input();
|
|
1493
|
+
this.axis = input();
|
|
1494
|
+
this.scale = input();
|
|
1495
|
+
this.size = input();
|
|
1496
|
+
this.fromTo = signal({
|
|
1497
|
+
from: 0,
|
|
1498
|
+
to: 0,
|
|
1499
|
+
});
|
|
1526
1500
|
this.orientation = AxisOrientation;
|
|
1527
|
-
this.
|
|
1528
|
-
|
|
1501
|
+
this.height = computed(() => {
|
|
1502
|
+
return this.size().height;
|
|
1503
|
+
});
|
|
1504
|
+
this.width = computed(() => {
|
|
1505
|
+
return this.size().width;
|
|
1506
|
+
});
|
|
1507
|
+
this.from = computed(() => {
|
|
1508
|
+
if (this.scale() && this.fromTo()) {
|
|
1509
|
+
return this.scale()(this.fromTo().from);
|
|
1510
|
+
}
|
|
1511
|
+
return 0;
|
|
1512
|
+
});
|
|
1513
|
+
this.to = computed(() => {
|
|
1514
|
+
if (this.scale() && this.fromTo()) {
|
|
1515
|
+
return this.scale()(this.fromTo().to);
|
|
1516
|
+
}
|
|
1517
|
+
return 0;
|
|
1518
|
+
});
|
|
1519
|
+
this.bandSize = computed(() => {
|
|
1520
|
+
if (this.scale() && this.fromTo()) {
|
|
1521
|
+
return Math.abs(this.scale()(this.fromTo().to) - this.scale()(this.fromTo().from));
|
|
1522
|
+
}
|
|
1523
|
+
return 0;
|
|
1524
|
+
});
|
|
1525
|
+
this.textPosition = computed(() => {
|
|
1526
|
+
let [min, max] = this.scale().domain();
|
|
1529
1527
|
min = min instanceof Date ? min.getTime() : min;
|
|
1530
1528
|
max = max instanceof Date ? max.getTime() : max;
|
|
1531
|
-
const from = this.
|
|
1532
|
-
const to = this.
|
|
1529
|
+
const from = this.fromTo().from instanceof Date ? this.fromTo().from.getTime() : this.fromTo().from;
|
|
1530
|
+
const to = this.fromTo().to instanceof Date ? this.fromTo().to.getTime() : this.fromTo().to;
|
|
1533
1531
|
const position = ((from <= min ? min : from) + (to >= max ? max : to)) / 2;
|
|
1534
|
-
return this.scale(position);
|
|
1535
|
-
};
|
|
1532
|
+
return this.scale()(position);
|
|
1533
|
+
});
|
|
1534
|
+
this.fill = computed(() => {
|
|
1535
|
+
if (this.plotBand().style?.plotBand?.patternImage) {
|
|
1536
|
+
return `url(#${this.plotBand().style.plotBand?.patternImage})`;
|
|
1537
|
+
}
|
|
1538
|
+
return this.plotBand().style.plotBand?.fill;
|
|
1539
|
+
});
|
|
1540
|
+
effect(() => {
|
|
1541
|
+
if (this.plotBand()) {
|
|
1542
|
+
this.fromTo.set({
|
|
1543
|
+
from: this.plotBand().from,
|
|
1544
|
+
to: this.plotBand().to,
|
|
1545
|
+
});
|
|
1546
|
+
}
|
|
1547
|
+
});
|
|
1536
1548
|
}
|
|
1537
1549
|
emit(event) {
|
|
1538
1550
|
this.chartService.emitPlotBand(event);
|
|
@@ -1541,23 +1553,42 @@ class PlotBandComponent {
|
|
|
1541
1553
|
const plotbandElement = d3.select(this.element.nativeElement).select('.plotband');
|
|
1542
1554
|
const grabElements = d3.select(this.element.nativeElement).selectAll('.grabber');
|
|
1543
1555
|
this.dragElements = d3.drag().subject(() => {
|
|
1544
|
-
if (this.axis.orientation === AxisOrientation.x) {
|
|
1556
|
+
if (this.axis().orientation === AxisOrientation.x) {
|
|
1545
1557
|
return { x: plotbandElement.attr('x') };
|
|
1546
1558
|
}
|
|
1547
|
-
if (this.axis.orientation === AxisOrientation.y) {
|
|
1559
|
+
if (this.axis().orientation === AxisOrientation.y) {
|
|
1548
1560
|
return { y: plotbandElement.attr('y') };
|
|
1549
1561
|
}
|
|
1550
1562
|
return null;
|
|
1551
1563
|
});
|
|
1552
1564
|
const drag = this.dragElements.on('start drag end', (event, d) => {
|
|
1553
|
-
const bandSize = parseFloat(plotbandElement.attr(this.axis.orientation === AxisOrientation.x ? 'width' : 'height'));
|
|
1554
|
-
|
|
1555
|
-
|
|
1565
|
+
const bandSize = parseFloat(plotbandElement.attr(this.axis().orientation === AxisOrientation.x ? 'width' : 'height'));
|
|
1566
|
+
const from = this.scale().invert(event[AxisOrientation[this.axis().orientation]]);
|
|
1567
|
+
const to = this.scale().invert(event[AxisOrientation[this.axis().orientation]] + bandSize);
|
|
1568
|
+
// const min = Math.min(...this.scale().domain());
|
|
1569
|
+
// const max = Math.max(...this.scale().domain());
|
|
1570
|
+
//
|
|
1571
|
+
// const minValue = d.min ?? min;
|
|
1572
|
+
// const maxValue = d.max ?? max;
|
|
1573
|
+
//
|
|
1574
|
+
// d.from = from;
|
|
1575
|
+
// d.to = to;
|
|
1576
|
+
// if (d.from < minValue) {
|
|
1577
|
+
// d.from = minValue;
|
|
1578
|
+
// }
|
|
1579
|
+
// if (d.to > maxValue) {
|
|
1580
|
+
// d.to = maxValue;
|
|
1581
|
+
// }
|
|
1582
|
+
d.from = from;
|
|
1583
|
+
d.to = to;
|
|
1584
|
+
this.fromTo.set({
|
|
1585
|
+
from: d.from,
|
|
1586
|
+
to: d.to,
|
|
1587
|
+
});
|
|
1556
1588
|
this.emit({
|
|
1557
1589
|
event,
|
|
1558
1590
|
target: d,
|
|
1559
1591
|
});
|
|
1560
|
-
this.cdr.detectChanges();
|
|
1561
1592
|
});
|
|
1562
1593
|
let grabberKey;
|
|
1563
1594
|
this.resizeElements = d3.drag();
|
|
@@ -1566,11 +1597,11 @@ class PlotBandComponent {
|
|
|
1566
1597
|
const { grabber } = event?.sourceEvent?.target?.dataset;
|
|
1567
1598
|
grabberKey = grabber;
|
|
1568
1599
|
}
|
|
1569
|
-
const min = Math.min(...this.scale.domain());
|
|
1570
|
-
const max = Math.max(...this.scale.domain());
|
|
1600
|
+
const min = Math.min(...this.scale().domain());
|
|
1601
|
+
const max = Math.max(...this.scale().domain());
|
|
1571
1602
|
const minValue = d.min ?? min;
|
|
1572
1603
|
const maxValue = d.max ?? max;
|
|
1573
|
-
d[grabberKey] = this.scale.invert(event[AxisOrientation[this.axis.orientation]]);
|
|
1604
|
+
d[grabberKey] = this.scale().invert(event[AxisOrientation[this.axis().orientation]]);
|
|
1574
1605
|
if (grabberKey === 'from') {
|
|
1575
1606
|
const borderMin = d.from <= minValue;
|
|
1576
1607
|
if (d.from >= d.to) {
|
|
@@ -1589,18 +1620,21 @@ class PlotBandComponent {
|
|
|
1589
1620
|
d.to = d.from;
|
|
1590
1621
|
}
|
|
1591
1622
|
}
|
|
1623
|
+
this.fromTo.set({
|
|
1624
|
+
from: d.from,
|
|
1625
|
+
to: d.to,
|
|
1626
|
+
});
|
|
1592
1627
|
this.emit({
|
|
1593
1628
|
event,
|
|
1594
1629
|
target: d,
|
|
1595
1630
|
});
|
|
1596
|
-
this.cdr.detectChanges();
|
|
1597
1631
|
});
|
|
1598
|
-
plotbandElement.datum(this.plotBand);
|
|
1599
|
-
grabElements.datum(this.plotBand);
|
|
1600
|
-
if (this.plotBand.draggable) {
|
|
1632
|
+
plotbandElement.datum(this.plotBand());
|
|
1633
|
+
grabElements.datum(this.plotBand());
|
|
1634
|
+
if (this.plotBand().draggable) {
|
|
1601
1635
|
plotbandElement.call(drag);
|
|
1602
1636
|
}
|
|
1603
|
-
if (this.plotBand.resizable) {
|
|
1637
|
+
if (this.plotBand().resizable) {
|
|
1604
1638
|
grabElements.call(resize);
|
|
1605
1639
|
}
|
|
1606
1640
|
}
|
|
@@ -1608,27 +1642,13 @@ class PlotBandComponent {
|
|
|
1608
1642
|
this.dragElements.on('start drag end', null);
|
|
1609
1643
|
this.resizeElements.on('start drag end', null);
|
|
1610
1644
|
}
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
return `url(#${d.style.plotBand?.patternImage})`;
|
|
1614
|
-
}
|
|
1615
|
-
return d.style.plotBand?.fill;
|
|
1616
|
-
}
|
|
1617
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PlotBandComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1618
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PlotBandComponent, isStandalone: true, selector: "[teta-plot-band]", inputs: { plotBand: "plotBand", axis: "axis", scale: "scale", size: "size" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, ngImport: i0, template: "<svg:rect\n class=\"plotband\"\n xmlns:svg=\"http://www.w3.org/1999/html\"\n [class.draggable]=\"plotBand?.draggable === true\"\n [attr.fill]=\"getFill(plotBand)\"\n [attr.opacity]=\"plotBand.style?.plotBand?.opacity\"\n [attr.height]=\"axis.orientation === orientation.x ? height : bandSize\"\n [attr.width]=\"axis.orientation === orientation.x ? bandSize : width\"\n [attr.y]=\"axis.orientation === orientation.y ? (axis.options.inverted === true ? from : to) : null\"\n [attr.x]=\"axis.orientation === orientation.x ? (axis.options.inverted === true ? to : from) : null\"\n></svg:rect>\n@if (axis.orientation === orientation.x) {\n <svg:text\n text-anchor=\"middle\"\n dominant-baseline=\"middle\"\n class=\"label font-caption fill-text-90\"\n [attr.x]=\"getTextPosition()\"\n [attr.transform]=\"'rotate(-90, ' + getTextPosition() + ',' + height / 2 + ')'\"\n [attr.y]=\"height / 2\"\n >\n {{ plotBand.label }}\n </svg:text>\n}\n@if (axis.orientation === orientation.y) {\n <svg:text\n text-anchor=\"middle\"\n class=\"label font-caption fill-text-90\"\n dominant-baseline=\"central\"\n [attr.x]=\"getTextPosition()\"\n [attr.y]=\"width / 2\"\n >\n {{ plotBand.label }}\n </svg:text>\n}\n@if (plotBand.resizable) {\n @if (plotBand.showGrabbers) {\n <svg:line\n class=\"display-grabber\"\n [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n [attr.data-grabber]=\"'from'\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : from\"\n ></svg:line>\n <svg:line\n class=\"display-grabber\"\n [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n [attr.data-grabber]=\"'to'\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : to\"\n ></svg:line>\n }\n <svg:line\n class=\"grabber\"\n [class.x-grabber]=\"axis.orientation === orientation.x\"\n [class.y-grabber]=\"axis.orientation === orientation.y\"\n [class.resizeable]=\"plotBand?.resizable\"\n [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"8\"\n [style.transform]=\"axis.orientation === orientation.x ? 'translateX(2px)' : 'translateY(2px)'\"\n [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n [attr.data-grabber]=\"'from'\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : from\"\n ></svg:line>\n <svg:line\n class=\"grabber\"\n [class.x-grabber]=\"axis.orientation === orientation.x\"\n [class.y-grabber]=\"axis.orientation === orientation.y\"\n [class.resizeable]=\"plotBand?.resizable\"\n [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"8\"\n [style.transform]=\"axis.orientation === orientation.x ? 'translateX(-2px)' : 'translateY(-2px)'\"\n [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n [attr.data-grabber]=\"'to'\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : to\"\n ></svg:line>\n}\n", styles: [":host .draggable rect:hover{cursor:grab}:host .draggable rect:active{cursor:grabbing}:host .x-grabber.resizeable{cursor:col-resize}:host .y-grabber.resizeable{cursor:row-resize}:host:hover .grabber{opacity:.1}.grabber{opacity:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1645
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PlotBandComponent, deps: [{ token: ChartService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1646
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PlotBandComponent, isStandalone: true, selector: "[teta-plot-band]", inputs: { plotBand: { classPropertyName: "plotBand", publicName: "plotBand", isSignal: true, isRequired: false, transformFunction: null }, axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, ngImport: i0, template: "<svg:rect\n class=\"plotband\"\n xmlns:svg=\"http://www.w3.org/1999/html\"\n [class.draggable]=\"plotBand()?.draggable === true\"\n [attr.fill]=\"fill()\"\n [attr.opacity]=\"plotBand().style?.plotBand?.opacity\"\n [attr.height]=\"axis().orientation === orientation.x ? height() : bandSize()\"\n [attr.width]=\"axis().orientation === orientation.x ? bandSize() : width()\"\n [attr.y]=\"axis().orientation === orientation.y ? (axis().options.inverted === true ? from() : to()) : null\"\n [attr.x]=\"axis().orientation === orientation.x ? (axis().options.inverted === true ? to() : from()) : null\"\n></svg:rect>\n@if (axis().orientation === orientation.x) {\n <svg:text\n text-anchor=\"middle\"\n dominant-baseline=\"middle\"\n class=\"label font-caption fill-text-90\"\n [attr.x]=\"textPosition()\"\n [attr.transform]=\"'rotate(-90, ' + textPosition() + ',' + height() / 2 + ')'\"\n [attr.y]=\"height() / 2\"\n >\n {{ plotBand().label }}\n </svg:text>\n}\n@if (axis().orientation === orientation.y) {\n <svg:text\n text-anchor=\"middle\"\n class=\"label font-caption fill-text-90\"\n dominant-baseline=\"central\"\n [attr.x]=\"textPosition()\"\n [attr.y]=\"width() / 2\"\n >\n {{ plotBand().label }}\n </svg:text>\n}\n@if (plotBand().resizable) {\n @if (plotBand().showGrabbers) {\n <svg:line\n class=\"display-grabber\"\n [attr.stroke]=\"plotBand().style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"plotBand().style?.grabbers?.strokeWidth || 4\"\n [attr.stroke-dasharray]=\"plotBand().style?.grabbers?.strokeDasharray\"\n [attr.x1]=\"axis().orientation === orientation.x ? from() : 0\"\n [attr.x2]=\"axis().orientation === orientation.x ? from() : width()\"\n [attr.data-grabber]=\"'from'\"\n [attr.y1]=\"axis().orientation === orientation.x ? 0 : from()\"\n [attr.y2]=\"axis().orientation === orientation.x ? height() : from()\"\n ></svg:line>\n <svg:line\n class=\"display-grabber\"\n [attr.stroke]=\"plotBand().style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"plotBand().style?.grabbers?.strokeWidth || 4\"\n [attr.stroke-dasharray]=\"plotBand().style?.grabbers?.strokeDasharray\"\n [attr.x1]=\"axis().orientation === orientation.x ? to() : 0\"\n [attr.x2]=\"axis().orientation === orientation.x ? to() : width()\"\n [attr.data-grabber]=\"'to'\"\n [attr.y1]=\"axis().orientation === orientation.x ? 0 : to()\"\n [attr.y2]=\"axis().orientation === orientation.x ? height() : to()\"\n ></svg:line>\n }\n <svg:line\n class=\"grabber\"\n [class.x-grabber]=\"axis().orientation === orientation.x\"\n [class.y-grabber]=\"axis().orientation === orientation.y\"\n [class.resizeable]=\"plotBand()?.resizable\"\n [attr.stroke]=\"plotBand().style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"8\"\n [style.transform]=\"axis().orientation === orientation.x ? 'translateX(2px)' : 'translateY(2px)'\"\n [attr.x1]=\"axis().orientation === orientation.x ? from() : 0\"\n [attr.x2]=\"axis().orientation === orientation.x ? from() : width()\"\n [attr.data-grabber]=\"'from'\"\n [attr.y1]=\"axis().orientation === orientation.x ? 0 : from()\"\n [attr.y2]=\"axis().orientation === orientation.x ? height() : from()\"\n ></svg:line>\n <svg:line\n class=\"grabber\"\n [class.x-grabber]=\"axis().orientation === orientation.x\"\n [class.y-grabber]=\"axis().orientation === orientation.y\"\n [class.resizeable]=\"plotBand()?.resizable\"\n [attr.stroke]=\"plotBand().style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"8\"\n [style.transform]=\"axis().orientation === orientation.x ? 'translateX(-2px)' : 'translateY(-2px)'\"\n [attr.x1]=\"axis().orientation === orientation.x ? to() : 0\"\n [attr.x2]=\"axis().orientation === orientation.x ? to() : width()\"\n [attr.data-grabber]=\"'to'\"\n [attr.y1]=\"axis().orientation === orientation.x ? 0 : to()\"\n [attr.y2]=\"axis().orientation === orientation.x ? height() : to()\"\n ></svg:line>\n}\n", styles: [":host .draggable rect:hover{cursor:grab}:host .draggable rect:active{cursor:grabbing}:host .x-grabber.resizeable{cursor:col-resize}:host .y-grabber.resizeable{cursor:row-resize}:host:hover .grabber{opacity:.1}.grabber{opacity:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1619
1647
|
}
|
|
1620
1648
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PlotBandComponent, decorators: [{
|
|
1621
1649
|
type: Component,
|
|
1622
|
-
args: [{ selector: '[teta-plot-band]', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:rect\n class=\"plotband\"\n xmlns:svg=\"http://www.w3.org/1999/html\"\n [class.draggable]=\"plotBand?.draggable === true\"\n [attr.fill]=\"
|
|
1623
|
-
}], ctorParameters: () => [{ type: ChartService }, { type: i0.
|
|
1624
|
-
type: Input
|
|
1625
|
-
}], axis: [{
|
|
1626
|
-
type: Input
|
|
1627
|
-
}], scale: [{
|
|
1628
|
-
type: Input
|
|
1629
|
-
}], size: [{
|
|
1630
|
-
type: Input
|
|
1631
|
-
}], click: [{
|
|
1650
|
+
args: [{ selector: '[teta-plot-band]', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:rect\n class=\"plotband\"\n xmlns:svg=\"http://www.w3.org/1999/html\"\n [class.draggable]=\"plotBand()?.draggable === true\"\n [attr.fill]=\"fill()\"\n [attr.opacity]=\"plotBand().style?.plotBand?.opacity\"\n [attr.height]=\"axis().orientation === orientation.x ? height() : bandSize()\"\n [attr.width]=\"axis().orientation === orientation.x ? bandSize() : width()\"\n [attr.y]=\"axis().orientation === orientation.y ? (axis().options.inverted === true ? from() : to()) : null\"\n [attr.x]=\"axis().orientation === orientation.x ? (axis().options.inverted === true ? to() : from()) : null\"\n></svg:rect>\n@if (axis().orientation === orientation.x) {\n <svg:text\n text-anchor=\"middle\"\n dominant-baseline=\"middle\"\n class=\"label font-caption fill-text-90\"\n [attr.x]=\"textPosition()\"\n [attr.transform]=\"'rotate(-90, ' + textPosition() + ',' + height() / 2 + ')'\"\n [attr.y]=\"height() / 2\"\n >\n {{ plotBand().label }}\n </svg:text>\n}\n@if (axis().orientation === orientation.y) {\n <svg:text\n text-anchor=\"middle\"\n class=\"label font-caption fill-text-90\"\n dominant-baseline=\"central\"\n [attr.x]=\"textPosition()\"\n [attr.y]=\"width() / 2\"\n >\n {{ plotBand().label }}\n </svg:text>\n}\n@if (plotBand().resizable) {\n @if (plotBand().showGrabbers) {\n <svg:line\n class=\"display-grabber\"\n [attr.stroke]=\"plotBand().style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"plotBand().style?.grabbers?.strokeWidth || 4\"\n [attr.stroke-dasharray]=\"plotBand().style?.grabbers?.strokeDasharray\"\n [attr.x1]=\"axis().orientation === orientation.x ? from() : 0\"\n [attr.x2]=\"axis().orientation === orientation.x ? from() : width()\"\n [attr.data-grabber]=\"'from'\"\n [attr.y1]=\"axis().orientation === orientation.x ? 0 : from()\"\n [attr.y2]=\"axis().orientation === orientation.x ? height() : from()\"\n ></svg:line>\n <svg:line\n class=\"display-grabber\"\n [attr.stroke]=\"plotBand().style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"plotBand().style?.grabbers?.strokeWidth || 4\"\n [attr.stroke-dasharray]=\"plotBand().style?.grabbers?.strokeDasharray\"\n [attr.x1]=\"axis().orientation === orientation.x ? to() : 0\"\n [attr.x2]=\"axis().orientation === orientation.x ? to() : width()\"\n [attr.data-grabber]=\"'to'\"\n [attr.y1]=\"axis().orientation === orientation.x ? 0 : to()\"\n [attr.y2]=\"axis().orientation === orientation.x ? height() : to()\"\n ></svg:line>\n }\n <svg:line\n class=\"grabber\"\n [class.x-grabber]=\"axis().orientation === orientation.x\"\n [class.y-grabber]=\"axis().orientation === orientation.y\"\n [class.resizeable]=\"plotBand()?.resizable\"\n [attr.stroke]=\"plotBand().style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"8\"\n [style.transform]=\"axis().orientation === orientation.x ? 'translateX(2px)' : 'translateY(2px)'\"\n [attr.x1]=\"axis().orientation === orientation.x ? from() : 0\"\n [attr.x2]=\"axis().orientation === orientation.x ? from() : width()\"\n [attr.data-grabber]=\"'from'\"\n [attr.y1]=\"axis().orientation === orientation.x ? 0 : from()\"\n [attr.y2]=\"axis().orientation === orientation.x ? height() : from()\"\n ></svg:line>\n <svg:line\n class=\"grabber\"\n [class.x-grabber]=\"axis().orientation === orientation.x\"\n [class.y-grabber]=\"axis().orientation === orientation.y\"\n [class.resizeable]=\"plotBand()?.resizable\"\n [attr.stroke]=\"plotBand().style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"8\"\n [style.transform]=\"axis().orientation === orientation.x ? 'translateX(-2px)' : 'translateY(-2px)'\"\n [attr.x1]=\"axis().orientation === orientation.x ? to() : 0\"\n [attr.x2]=\"axis().orientation === orientation.x ? to() : width()\"\n [attr.data-grabber]=\"'to'\"\n [attr.y1]=\"axis().orientation === orientation.x ? 0 : to()\"\n [attr.y2]=\"axis().orientation === orientation.x ? height() : to()\"\n ></svg:line>\n}\n", styles: [":host .draggable rect:hover{cursor:grab}:host .draggable rect:active{cursor:grabbing}:host .x-grabber.resizeable{cursor:col-resize}:host .y-grabber.resizeable{cursor:row-resize}:host:hover .grabber{opacity:.1}.grabber{opacity:0}\n"] }]
|
|
1651
|
+
}], ctorParameters: () => [{ type: ChartService }, { type: i0.ElementRef }], propDecorators: { click: [{
|
|
1632
1652
|
type: HostListener,
|
|
1633
1653
|
args: ['click', ['$event']]
|
|
1634
1654
|
}], contextMenu: [{
|
|
@@ -2991,6 +3011,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
2991
3011
|
type: Input
|
|
2992
3012
|
}] } });
|
|
2993
3013
|
|
|
3014
|
+
class PlotBand {
|
|
3015
|
+
constructor(options) {
|
|
3016
|
+
this.order = 0;
|
|
3017
|
+
this.id = options?.id;
|
|
3018
|
+
this.name = options?.name;
|
|
3019
|
+
this.from = options?.from;
|
|
3020
|
+
this.to = options?.to;
|
|
3021
|
+
this.label = options?.label;
|
|
3022
|
+
this.showGrabbers = options?.showGrabbers != null ? options.showGrabbers : true;
|
|
3023
|
+
this.draggable = options?.draggable != null ? options?.draggable : false;
|
|
3024
|
+
this.resizable = options?.resizable != null ? options?.resizable : true;
|
|
3025
|
+
this.min = options?.min;
|
|
3026
|
+
this.max = options?.max;
|
|
3027
|
+
this.order = options?.order ?? 0;
|
|
3028
|
+
this.style = options?.style;
|
|
3029
|
+
}
|
|
3030
|
+
}
|
|
3031
|
+
|
|
2994
3032
|
class BlockHorizontalSeriesComponent extends SeriesBaseComponent {
|
|
2995
3033
|
constructor() {
|
|
2996
3034
|
super(...arguments);
|