@tetacom/svg-charts 1.7.39 → 1.7.40
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.
|
@@ -2677,58 +2677,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
2677
2677
|
}]
|
|
2678
2678
|
}], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }] } });
|
|
2679
2679
|
|
|
2680
|
-
class PlotLine {
|
|
2681
|
-
constructor(options) {
|
|
2682
|
-
this.id = options?.id;
|
|
2683
|
-
this.name = options?.name;
|
|
2684
|
-
this.value = options?.value;
|
|
2685
|
-
this.label = options?.label;
|
|
2686
|
-
this.min = options?.min;
|
|
2687
|
-
this.max = options?.max;
|
|
2688
|
-
this.draggable = options?.draggable;
|
|
2689
|
-
this.style = options?.style;
|
|
2690
|
-
}
|
|
2691
|
-
}
|
|
2692
|
-
|
|
2693
2680
|
class PlotlineComponent {
|
|
2694
|
-
constructor(
|
|
2695
|
-
this.
|
|
2696
|
-
this.
|
|
2697
|
-
this.
|
|
2698
|
-
this.
|
|
2699
|
-
this.
|
|
2681
|
+
constructor() {
|
|
2682
|
+
this.chartService = inject(ChartService);
|
|
2683
|
+
this.element = inject(ElementRef);
|
|
2684
|
+
this.plotLine = input(...(ngDevMode ? [undefined, { debugName: "plotLine" }] : /* istanbul ignore next */ []));
|
|
2685
|
+
this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2686
|
+
this.axis = input(...(ngDevMode ? [undefined, { debugName: "axis" }] : /* istanbul ignore next */ []));
|
|
2687
|
+
this.scale = input(...(ngDevMode ? [undefined, { debugName: "scale" }] : /* istanbul ignore next */ []));
|
|
2700
2688
|
this.orientation = AxisOrientation;
|
|
2689
|
+
this.currentValue = signal(0, ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
|
|
2690
|
+
this.value = computed(() => {
|
|
2691
|
+
const scale = this.scale();
|
|
2692
|
+
if (!scale) {
|
|
2693
|
+
return 0;
|
|
2694
|
+
}
|
|
2695
|
+
return scale(this.currentValue());
|
|
2696
|
+
}, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2697
|
+
this.height = computed(() => {
|
|
2698
|
+
return this.size()?.height ?? 0;
|
|
2699
|
+
}, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
2700
|
+
this.width = computed(() => {
|
|
2701
|
+
return this.size()?.width ?? 0;
|
|
2702
|
+
}, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
2703
|
+
effect(() => {
|
|
2704
|
+
if (this.plotLine()) {
|
|
2705
|
+
this.currentValue.set(this.plotLine().value);
|
|
2706
|
+
}
|
|
2707
|
+
});
|
|
2701
2708
|
}
|
|
2702
|
-
|
|
2703
|
-
this._domain = this.scale.domain();
|
|
2709
|
+
ngAfterViewInit() {
|
|
2704
2710
|
const plotlineElement = d3.select(this.element.nativeElement).select('.plotline');
|
|
2705
2711
|
const grabElement = d3.select(this.element.nativeElement).selectAll('.grabber');
|
|
2706
2712
|
this.dragElements = d3.drag().subject(() => {
|
|
2707
|
-
if (this.axis.orientation === AxisOrientation.y) {
|
|
2713
|
+
if (this.axis().orientation === AxisOrientation.y) {
|
|
2708
2714
|
return { y: plotlineElement.attr('y1') };
|
|
2709
2715
|
}
|
|
2710
|
-
if (this.axis.orientation === AxisOrientation.x) {
|
|
2716
|
+
if (this.axis().orientation === AxisOrientation.x) {
|
|
2711
2717
|
return { x: plotlineElement.attr('x1') };
|
|
2712
2718
|
}
|
|
2713
2719
|
return null;
|
|
2714
2720
|
});
|
|
2715
2721
|
const drag = this.dragElements.on('start drag end', (event, d) => {
|
|
2716
|
-
d.value = this.scale.invert(event[AxisOrientation[this.axis.orientation]]);
|
|
2722
|
+
d.value = this.scale().invert(event[AxisOrientation[this.axis().orientation]]);
|
|
2717
2723
|
if (d.max !== null && d.max !== undefined && d.value >= d.max) {
|
|
2718
2724
|
d.value = d.max;
|
|
2719
2725
|
}
|
|
2720
2726
|
if (d.min !== null && d.min !== undefined && d.value <= d.min) {
|
|
2721
2727
|
d.value = d.min;
|
|
2722
2728
|
}
|
|
2729
|
+
this.currentValue.set(d.value);
|
|
2723
2730
|
this.emit({
|
|
2724
2731
|
event,
|
|
2725
2732
|
target: d,
|
|
2726
2733
|
});
|
|
2727
|
-
this.cdr.detectChanges();
|
|
2728
2734
|
});
|
|
2729
|
-
plotlineElement.datum(this.plotLine);
|
|
2730
|
-
grabElement.datum(this.plotLine);
|
|
2731
|
-
if (this.plotLine.draggable) {
|
|
2735
|
+
plotlineElement.datum(this.plotLine());
|
|
2736
|
+
grabElement.datum(this.plotLine());
|
|
2737
|
+
if (this.plotLine().draggable) {
|
|
2732
2738
|
grabElement.call(drag);
|
|
2733
2739
|
}
|
|
2734
2740
|
}
|
|
@@ -2738,30 +2744,13 @@ class PlotlineComponent {
|
|
|
2738
2744
|
emit(event) {
|
|
2739
2745
|
this.chartService.emitPlotLine(event);
|
|
2740
2746
|
}
|
|
2741
|
-
|
|
2742
|
-
|
|
2743
|
-
}
|
|
2744
|
-
get height() {
|
|
2745
|
-
return this.size.height;
|
|
2746
|
-
}
|
|
2747
|
-
get width() {
|
|
2748
|
-
return this.size.width;
|
|
2749
|
-
}
|
|
2750
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PlotlineComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ZoomService }, { token: ScaleService }, { token: ChartService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2751
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PlotlineComponent, isStandalone: true, selector: "[teta-plot-line]", inputs: { plotLine: "plotLine", size: "size", axis: "axis", scale: "scale" }, ngImport: i0, template: "<svg:line\n class=\"plotline\"\n [attr.stroke]=\"plotLine.style?.stroke || 'red'\"\n [attr.stroke-width]=\"plotLine.style?.strokeWidth || 4\"\n [attr.stroke-dasharray]=\"plotLine.style?.strokeDasharray\"\n [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : value\"\n></svg:line>\n\n@if (axis.orientation === orientation.x) {\n <svg:text\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"label font-title-2 fill-text-70\"\n [attr.x]=\"value\"\n dy=\"-2em\"\n [attr.transform]=\"'rotate(-90, ' + value + ',' + height / 2 + ')'\"\n [attr.y]=\"height / 2\"\n >\n {{ plotLine.label }}\n </svg:text>\n}\n@if (axis.orientation === orientation.y) {\n <svg:text\n text-anchor=\"middle\"\n class=\"label font-title-2 fill-text-70\"\n dominant-baseline=\"central\"\n [attr.x]=\"value\"\n [attr.y]=\"width / 2\"\n >\n {{ plotLine.label }}\n </svg:text>\n}\n<svg:line\n class=\"grabber\"\n [class.x-grabber]=\"axis.orientation === orientation.x\"\n [class.y-grabber]=\"axis.orientation === orientation.y\"\n [attr.stroke]=\"'red'\"\n [attr.stroke-width]=\"8\"\n opacity=\"0\"\n [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : value\"\n></svg:line>\n", styles: [":host .x-grabber{cursor:col-resize}:host .y-grabber{cursor:row-resize}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2747
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PlotlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2748
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PlotlineComponent, isStandalone: true, selector: "[teta-plot-line]", inputs: { plotLine: { classPropertyName: "plotLine", publicName: "plotLine", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 } }, ngImport: i0, template: "<svg:line\n class=\"plotline\"\n [attr.stroke]=\"plotLine().style?.stroke || 'red'\"\n [attr.stroke-width]=\"plotLine().style?.strokeWidth || 4\"\n [attr.stroke-dasharray]=\"plotLine().style?.strokeDasharray\"\n [attr.x1]=\"axis().orientation === orientation.x ? value() : 0\"\n [attr.x2]=\"axis().orientation === orientation.x ? value() : width()\"\n [attr.y1]=\"axis().orientation === orientation.x ? 0 : value()\"\n [attr.y2]=\"axis().orientation === orientation.x ? height() : value()\"\n></svg:line>\n\n@if (axis().orientation === orientation.x) {\n <svg:text\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"label font-title-2 fill-text-70\"\n [attr.x]=\"value()\"\n dy=\"-2em\"\n [attr.transform]=\"'rotate(-90, ' + value() + ',' + height() / 2 + ')'\"\n [attr.y]=\"height() / 2\"\n >\n {{ plotLine().label }}\n </svg:text>\n}\n@if (axis().orientation === orientation.y) {\n <svg:text\n text-anchor=\"middle\"\n class=\"label font-title-2 fill-text-70\"\n dominant-baseline=\"central\"\n [attr.x]=\"value()\"\n [attr.y]=\"width() / 2\"\n >\n {{ plotLine().label }}\n </svg:text>\n}\n<svg:line\n class=\"grabber\"\n [class.x-grabber]=\"axis().orientation === orientation.x\"\n [class.y-grabber]=\"axis().orientation === orientation.y\"\n [attr.stroke]=\"'red'\"\n [attr.stroke-width]=\"8\"\n opacity=\"0\"\n [attr.x1]=\"axis().orientation === orientation.x ? value() : 0\"\n [attr.x2]=\"axis().orientation === orientation.x ? value() : width()\"\n [attr.y1]=\"axis().orientation === orientation.x ? 0 : value()\"\n [attr.y2]=\"axis().orientation === orientation.x ? height() : value()\"\n></svg:line>\n", styles: [":host .x-grabber{cursor:col-resize}:host .y-grabber{cursor:row-resize}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2752
2749
|
}
|
|
2753
2750
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PlotlineComponent, decorators: [{
|
|
2754
2751
|
type: Component,
|
|
2755
|
-
args: [{ selector: '[teta-plot-line]', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:line\n class=\"plotline\"\n [attr.stroke]=\"plotLine.style?.stroke || 'red'\"\n [attr.stroke-width]=\"plotLine.style?.strokeWidth || 4\"\n [attr.stroke-dasharray]=\"plotLine.style?.strokeDasharray\"\n [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : value\"\n></svg:line>\n\n@if (axis.orientation === orientation.x) {\n <svg:text\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"label font-title-2 fill-text-70\"\n [attr.x]=\"value\"\n dy=\"-2em\"\n [attr.transform]=\"'rotate(-90, ' + value + ',' + height / 2 + ')'\"\n [attr.y]=\"height / 2\"\n >\n {{ plotLine.label }}\n </svg:text>\n}\n@if (axis.orientation === orientation.y) {\n <svg:text\n text-anchor=\"middle\"\n class=\"label font-title-2 fill-text-70\"\n dominant-baseline=\"central\"\n [attr.x]=\"value\"\n [attr.y]=\"width / 2\"\n >\n {{ plotLine.label }}\n </svg:text>\n}\n<svg:line\n class=\"grabber\"\n [class.x-grabber]=\"axis.orientation === orientation.x\"\n [class.y-grabber]=\"axis.orientation === orientation.y\"\n [attr.stroke]=\"'red'\"\n [attr.stroke-width]=\"8\"\n opacity=\"0\"\n [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : value\"\n></svg:line>\n", styles: [":host .x-grabber{cursor:col-resize}:host .y-grabber{cursor:row-resize}\n"] }]
|
|
2756
|
-
}], ctorParameters: () => [{ type: i0.
|
|
2757
|
-
type: Input
|
|
2758
|
-
}], size: [{
|
|
2759
|
-
type: Input
|
|
2760
|
-
}], axis: [{
|
|
2761
|
-
type: Input
|
|
2762
|
-
}], scale: [{
|
|
2763
|
-
type: Input
|
|
2764
|
-
}] } });
|
|
2752
|
+
args: [{ selector: '[teta-plot-line]', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:line\n class=\"plotline\"\n [attr.stroke]=\"plotLine().style?.stroke || 'red'\"\n [attr.stroke-width]=\"plotLine().style?.strokeWidth || 4\"\n [attr.stroke-dasharray]=\"plotLine().style?.strokeDasharray\"\n [attr.x1]=\"axis().orientation === orientation.x ? value() : 0\"\n [attr.x2]=\"axis().orientation === orientation.x ? value() : width()\"\n [attr.y1]=\"axis().orientation === orientation.x ? 0 : value()\"\n [attr.y2]=\"axis().orientation === orientation.x ? height() : value()\"\n></svg:line>\n\n@if (axis().orientation === orientation.x) {\n <svg:text\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"label font-title-2 fill-text-70\"\n [attr.x]=\"value()\"\n dy=\"-2em\"\n [attr.transform]=\"'rotate(-90, ' + value() + ',' + height() / 2 + ')'\"\n [attr.y]=\"height() / 2\"\n >\n {{ plotLine().label }}\n </svg:text>\n}\n@if (axis().orientation === orientation.y) {\n <svg:text\n text-anchor=\"middle\"\n class=\"label font-title-2 fill-text-70\"\n dominant-baseline=\"central\"\n [attr.x]=\"value()\"\n [attr.y]=\"width() / 2\"\n >\n {{ plotLine().label }}\n </svg:text>\n}\n<svg:line\n class=\"grabber\"\n [class.x-grabber]=\"axis().orientation === orientation.x\"\n [class.y-grabber]=\"axis().orientation === orientation.y\"\n [attr.stroke]=\"'red'\"\n [attr.stroke-width]=\"8\"\n opacity=\"0\"\n [attr.x1]=\"axis().orientation === orientation.x ? value() : 0\"\n [attr.x2]=\"axis().orientation === orientation.x ? value() : width()\"\n [attr.y1]=\"axis().orientation === orientation.x ? 0 : value()\"\n [attr.y2]=\"axis().orientation === orientation.x ? height() : value()\"\n></svg:line>\n", styles: [":host .x-grabber{cursor:col-resize}:host .y-grabber{cursor:row-resize}\n"] }]
|
|
2753
|
+
}], ctorParameters: () => [], propDecorators: { plotLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "plotLine", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: false }] }], scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }] } });
|
|
2765
2754
|
|
|
2766
2755
|
class AnnotationComponent {
|
|
2767
2756
|
set annotation(annotation) {
|
|
@@ -2778,10 +2767,10 @@ class AnnotationComponent {
|
|
|
2778
2767
|
get node() {
|
|
2779
2768
|
return this._node;
|
|
2780
2769
|
}
|
|
2781
|
-
constructor(
|
|
2782
|
-
this.scaleService =
|
|
2783
|
-
this.cdr =
|
|
2784
|
-
this.chartService =
|
|
2770
|
+
constructor() {
|
|
2771
|
+
this.scaleService = inject(ScaleService);
|
|
2772
|
+
this.cdr = inject(ChangeDetectorRef);
|
|
2773
|
+
this.chartService = inject(ChartService);
|
|
2785
2774
|
this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.annotation.xAxisIndex ?? 0)?.scale));
|
|
2786
2775
|
this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.annotation.yAxisIndex ?? 0)?.scale));
|
|
2787
2776
|
this.drag = d3.drag();
|
|
@@ -2802,6 +2791,9 @@ class AnnotationComponent {
|
|
|
2802
2791
|
this.drag.on('drag end', null);
|
|
2803
2792
|
}
|
|
2804
2793
|
init() {
|
|
2794
|
+
if (!this.node) {
|
|
2795
|
+
return;
|
|
2796
|
+
}
|
|
2805
2797
|
d3.select(this.node.nativeElement).datum(this.annotation);
|
|
2806
2798
|
const offsetPx = 10;
|
|
2807
2799
|
const nodeRect = this.node.nativeElement.getBoundingClientRect();
|
|
@@ -2834,13 +2826,13 @@ class AnnotationComponent {
|
|
|
2834
2826
|
d3.select(this.node.nativeElement).call(this.drag);
|
|
2835
2827
|
}
|
|
2836
2828
|
}
|
|
2837
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AnnotationComponent, deps: [
|
|
2838
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AnnotationComponent, isStandalone: true, selector: "[teta-annotation]", inputs: { visibleRect: "visibleRect", annotation: "annotation" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, viewQueries: [{ propertyName: "node", first: true, predicate: ["annotationNode"], descendants: true }], ngImport: i0, template: "@if ({ x: x | async, y: y | async }; as data) {\n @if (data.x && data.y) {\n <svg:circle\n [attr.r]=\"annotation.style?.radius ?? 5\"\n [attr.cx]=\"data.x(annotation.point.x)\"\n [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n [attr.cy]=\"data.y(annotation.point.y)\"\n ></svg:circle>\n <svg:line\n [attr.x1]=\"data.x(annotation.point.x)\"\n [attr.y1]=\"data.y(annotation.point.y)\"\n [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n ></svg:line>\n <svg:foreignObject\n class=\"position-absolute\"\n [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\"\n >\n <div\n #annotationNode\n [style.background-color]=\"annotation.style?.fill ?? 'var(--color-global-bgmain)'\"\n [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n [className]=\"'padding-h-2 ' + (annotation.className ?? '')\"\n style=\"border-radius: 2px; display: inline-block\"\n >\n @if (annotation.template) {\n <ng-container *ngTemplateOutlet=\"annotation.template; context: { $implicit: annotation }\"></ng-container>\n } @else {\n {{ annotation.note?.label }}\n }\n </div>\n </svg:foreignObject>\n }\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2829
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AnnotationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2830
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AnnotationComponent, isStandalone: true, selector: "[teta-annotation]", inputs: { visibleRect: "visibleRect", annotation: "annotation" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, viewQueries: [{ propertyName: "node", first: true, predicate: ["annotationNode"], descendants: true }], ngImport: i0, template: "@if ({ x: x | async, y: y | async }; as data) {\n @if (data.x && data.y && annotation.point.x !== null && annotation.point.x !== undefined && annotation.point.y !== null && annotation.point.y !== undefined) {\n <svg:circle\n [attr.r]=\"annotation.style?.radius ?? 5\"\n [attr.cx]=\"data.x(annotation.point.x)\"\n [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n [attr.cy]=\"data.y(annotation.point.y)\"\n ></svg:circle>\n <svg:line\n [attr.x1]=\"data.x(annotation.point.x)\"\n [attr.y1]=\"data.y(annotation.point.y)\"\n [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n ></svg:line>\n <svg:foreignObject\n class=\"position-absolute\"\n [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\"\n >\n <div\n #annotationNode\n [style.background-color]=\"annotation.style?.fill ?? 'var(--color-global-bgmain)'\"\n [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n [className]=\"'padding-h-2 ' + (annotation.className ?? '')\"\n style=\"border-radius: 2px; display: inline-block\"\n >\n @if (annotation.template) {\n <ng-container *ngTemplateOutlet=\"annotation.template; context: { $implicit: annotation }\"></ng-container>\n } @else {\n {{ annotation.note?.label }}\n }\n </div>\n </svg:foreignObject>\n }\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2839
2831
|
}
|
|
2840
2832
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AnnotationComponent, decorators: [{
|
|
2841
2833
|
type: Component,
|
|
2842
|
-
args: [{ selector: '[teta-annotation]', imports: [NgTemplateOutlet, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ({ x: x | async, y: y | async }; as data) {\n @if (data.x && data.y) {\n <svg:circle\n [attr.r]=\"annotation.style?.radius ?? 5\"\n [attr.cx]=\"data.x(annotation.point.x)\"\n [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n [attr.cy]=\"data.y(annotation.point.y)\"\n ></svg:circle>\n <svg:line\n [attr.x1]=\"data.x(annotation.point.x)\"\n [attr.y1]=\"data.y(annotation.point.y)\"\n [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n ></svg:line>\n <svg:foreignObject\n class=\"position-absolute\"\n [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\"\n >\n <div\n #annotationNode\n [style.background-color]=\"annotation.style?.fill ?? 'var(--color-global-bgmain)'\"\n [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n [className]=\"'padding-h-2 ' + (annotation.className ?? '')\"\n style=\"border-radius: 2px; display: inline-block\"\n >\n @if (annotation.template) {\n <ng-container *ngTemplateOutlet=\"annotation.template; context: { $implicit: annotation }\"></ng-container>\n } @else {\n {{ annotation.note?.label }}\n }\n </div>\n </svg:foreignObject>\n }\n}\n" }]
|
|
2843
|
-
}], ctorParameters: () => [
|
|
2834
|
+
args: [{ selector: '[teta-annotation]', imports: [NgTemplateOutlet, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ({ x: x | async, y: y | async }; as data) {\n @if (data.x && data.y && annotation.point.x !== null && annotation.point.x !== undefined && annotation.point.y !== null && annotation.point.y !== undefined) {\n <svg:circle\n [attr.r]=\"annotation.style?.radius ?? 5\"\n [attr.cx]=\"data.x(annotation.point.x)\"\n [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n [attr.cy]=\"data.y(annotation.point.y)\"\n ></svg:circle>\n <svg:line\n [attr.x1]=\"data.x(annotation.point.x)\"\n [attr.y1]=\"data.y(annotation.point.y)\"\n [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n ></svg:line>\n <svg:foreignObject\n class=\"position-absolute\"\n [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\"\n >\n <div\n #annotationNode\n [style.background-color]=\"annotation.style?.fill ?? 'var(--color-global-bgmain)'\"\n [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n [className]=\"'padding-h-2 ' + (annotation.className ?? '')\"\n style=\"border-radius: 2px; display: inline-block\"\n >\n @if (annotation.template) {\n <ng-container *ngTemplateOutlet=\"annotation.template; context: { $implicit: annotation }\"></ng-container>\n } @else {\n {{ annotation.note?.label }}\n }\n </div>\n </svg:foreignObject>\n }\n}\n" }]
|
|
2835
|
+
}], ctorParameters: () => [], propDecorators: { visibleRect: [{
|
|
2844
2836
|
type: Input
|
|
2845
2837
|
}], annotation: [{
|
|
2846
2838
|
type: Input
|
|
@@ -3496,6 +3488,19 @@ class PlotBand {
|
|
|
3496
3488
|
}
|
|
3497
3489
|
}
|
|
3498
3490
|
|
|
3491
|
+
class PlotLine {
|
|
3492
|
+
constructor(options) {
|
|
3493
|
+
this.id = options?.id;
|
|
3494
|
+
this.name = options?.name;
|
|
3495
|
+
this.value = options?.value;
|
|
3496
|
+
this.label = options?.label;
|
|
3497
|
+
this.min = options?.min;
|
|
3498
|
+
this.max = options?.max;
|
|
3499
|
+
this.draggable = options?.draggable;
|
|
3500
|
+
this.style = options?.style;
|
|
3501
|
+
}
|
|
3502
|
+
}
|
|
3503
|
+
|
|
3499
3504
|
class BlockHorizontalSeriesComponent extends SeriesBaseComponent {
|
|
3500
3505
|
constructor() {
|
|
3501
3506
|
super(...arguments);
|