@tetacom/svg-charts 1.7.22 → 1.7.24
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.
|
@@ -2,6 +2,7 @@ import { Align, TetaSize } from '@tetacom/ng-components';
|
|
|
2
2
|
import { Series } from '../../model/series';
|
|
3
3
|
import { BasePoint } from '../../model/base-point';
|
|
4
4
|
import { SeriesType } from '../../model/enum/series-type';
|
|
5
|
+
import { FillType } from '../../model/enum/fill-type';
|
|
5
6
|
import * as i0 from "@angular/core";
|
|
6
7
|
export declare class SeriesControlsComponent {
|
|
7
8
|
private chartService;
|
|
@@ -22,14 +23,20 @@ export declare class SeriesControlsComponent {
|
|
|
22
23
|
id: SeriesType;
|
|
23
24
|
value: string;
|
|
24
25
|
}[];
|
|
26
|
+
fillType: {
|
|
27
|
+
id: FillType;
|
|
28
|
+
value: string;
|
|
29
|
+
}[];
|
|
25
30
|
setSeriesEnabled(series: Series<BasePoint>, value: boolean): void;
|
|
26
31
|
setSeriesColor(series: Series<BasePoint>, value: string): void;
|
|
27
32
|
setSeriesStrokeWidth(series: Series<BasePoint>, value: number): void;
|
|
28
33
|
setSeriesStrokeDasharray(series: Series<BasePoint>, value: string): void;
|
|
29
34
|
setSeriesType(series: Series<BasePoint>, value: SeriesType): void;
|
|
35
|
+
setSeriesFillType(series: Series<BasePoint>, value: FillType): void;
|
|
30
36
|
clear(): void;
|
|
31
37
|
protected readonly TetaSize: typeof TetaSize;
|
|
32
38
|
protected readonly SeriesType: typeof SeriesType;
|
|
39
|
+
protected readonly FillType: typeof FillType;
|
|
33
40
|
static ɵfac: i0.ɵɵFactoryDeclaration<SeriesControlsComponent, never>;
|
|
34
41
|
static ɵcmp: i0.ɵɵComponentDeclaration<SeriesControlsComponent, "teta-series-controls", never, { "series": { "alias": "series"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
35
42
|
}
|
|
@@ -313,6 +313,7 @@ class ChartService {
|
|
|
313
313
|
enabled: _.enabled,
|
|
314
314
|
color: _.color,
|
|
315
315
|
type: _.type,
|
|
316
|
+
fillType: _.fillType,
|
|
316
317
|
strokeDasharray: _.style?.strokeDasharray,
|
|
317
318
|
strokeWidth: _.style?.strokeWidth,
|
|
318
319
|
};
|
|
@@ -331,7 +332,14 @@ class ChartService {
|
|
|
331
332
|
serie.visible = found.visible ?? serie.visible;
|
|
332
333
|
serie.enabled = found.enabled ?? serie.enabled;
|
|
333
334
|
serie.color = found.color ?? serie.color;
|
|
334
|
-
|
|
335
|
+
const type = parseInt(found.type, 10);
|
|
336
|
+
if (type !== null && type !== undefined && !isNaN(type)) {
|
|
337
|
+
serie.type = type;
|
|
338
|
+
}
|
|
339
|
+
const fillType = parseInt(found.fillType, 10);
|
|
340
|
+
if (fillType !== null && fillType !== undefined && !isNaN(fillType)) {
|
|
341
|
+
serie.fillType = fillType;
|
|
342
|
+
}
|
|
335
343
|
if (!serie.style) {
|
|
336
344
|
serie.style = {};
|
|
337
345
|
}
|
|
@@ -489,7 +497,10 @@ class ExtremesBuilder {
|
|
|
489
497
|
if (!hasMin || !hasMax) {
|
|
490
498
|
const linkedSeries = settings.linkedSeries();
|
|
491
499
|
const data = linkedSeries.reduce((acc, current) => {
|
|
492
|
-
|
|
500
|
+
if (current.visible && current.enabled) {
|
|
501
|
+
return acc.concat(current.data);
|
|
502
|
+
}
|
|
503
|
+
return acc;
|
|
493
504
|
}, []);
|
|
494
505
|
const accessor = this.extentAccessorMap.get(settings.orientation);
|
|
495
506
|
if (settings.options.scaleType.type === ScaleType.band) {
|
|
@@ -511,7 +522,6 @@ class ExtremesBuilder {
|
|
|
511
522
|
extremes[1] = extremes[1] * 2;
|
|
512
523
|
}
|
|
513
524
|
else {
|
|
514
|
-
extremes[0] = extremes[0] - 1;
|
|
515
525
|
extremes[1] = extremes[1] + 1;
|
|
516
526
|
}
|
|
517
527
|
}
|
|
@@ -759,7 +769,7 @@ class ScaleService {
|
|
|
759
769
|
config.yAxis.forEach((axis, index) => {
|
|
760
770
|
const newAxis = Axis.createAxis(AxisOrientation.y, config, index);
|
|
761
771
|
if (newAxis.options.visible &&
|
|
762
|
-
config.series.some((serie) => serie.yAxisIndex === index && serie.enabled && serie.data?.length > 0)) {
|
|
772
|
+
config.series.some((serie) => serie.yAxisIndex === index && serie.visible && serie.enabled && serie.data?.length > 0)) {
|
|
763
773
|
newAxis.options.visible = true;
|
|
764
774
|
}
|
|
765
775
|
else {
|
|
@@ -2172,42 +2182,84 @@ class BlockSeriesComponent extends SeriesBaseComponent {
|
|
|
2172
2182
|
constructor() {
|
|
2173
2183
|
super(...arguments);
|
|
2174
2184
|
this.displayPoints = computed(() => {
|
|
2185
|
+
const domain = this.config().inverted ? this.y().domain() : this.x().domain();
|
|
2186
|
+
const [min, max] = domain;
|
|
2175
2187
|
return this.series().data.filter((point, index, arr) => {
|
|
2176
|
-
const [
|
|
2177
|
-
|
|
2178
|
-
|
|
2188
|
+
const next = arr[index + 1];
|
|
2189
|
+
const secondNext = arr[index + 2];
|
|
2190
|
+
if (this.config().inverted) {
|
|
2191
|
+
if (point.y1 === null || point.y1 === undefined) {
|
|
2192
|
+
point.y1 = next?.y ?? point.y;
|
|
2193
|
+
}
|
|
2194
|
+
if (next && (next.y1 === null || next.y1 === undefined)) {
|
|
2195
|
+
next.y1 = secondNext?.y ?? next.y;
|
|
2196
|
+
}
|
|
2197
|
+
return ((point.y >= min || point.y1 >= min || arr[index + 1]?.y >= min || arr[index + 1]?.y1 >= min) &&
|
|
2198
|
+
(point.y <= max || point.y1 <= max || arr[index - 1]?.y <= max || arr[index - 1]?.y1 <= max));
|
|
2199
|
+
}
|
|
2200
|
+
else {
|
|
2201
|
+
if (point.x1 === null || point.x1 === undefined) {
|
|
2202
|
+
point.x1 = next?.x ?? point.x;
|
|
2203
|
+
}
|
|
2204
|
+
if (next && (next.x1 === null || next.x1 === undefined)) {
|
|
2205
|
+
next.x1 = secondNext?.x ?? next.x;
|
|
2206
|
+
}
|
|
2207
|
+
return ((point.x >= min || point.x1 >= min || arr[index + 1]?.x >= min || arr[index + 1]?.x1 >= min) &&
|
|
2208
|
+
(point.x <= max || point.x1 <= max || arr[index - 1]?.x <= max || arr[index - 1]?.x1 <= max));
|
|
2209
|
+
}
|
|
2179
2210
|
});
|
|
2180
2211
|
});
|
|
2181
2212
|
this.Math = Math;
|
|
2182
2213
|
this.FillType = FillType;
|
|
2183
2214
|
}
|
|
2184
2215
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BlockSeriesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2185
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: BlockSeriesComponent, isStandalone: true, selector: "svg:svg[teta-block-series]", usesInheritance: true, ngImport: i0, template: "@if ({ y: y(), x: x(), points: displayPoints() }; as data) {\n @if (series()?.fillType === FillType.gradient) {\n <svg:defs>\n <svg:linearGradient\n [id]=\"'gradient-fill-' + id\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"0%\"\n [attr.y1]=\"config()?.inverted ? '0%' : '100%'\"\n [attr.x2]=\"config()?.inverted ? '100%' : '0%'\"\n y2=\"0%\"
|
|
2216
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: BlockSeriesComponent, isStandalone: true, selector: "svg:svg[teta-block-series]", usesInheritance: true, ngImport: i0, template: "@if ({ y: y(), x: x(), points: displayPoints() }; as data) {\n @if (series()?.fillType === FillType.gradient) {\n <svg:defs>\n <svg:linearGradient\n [id]=\"'gradient-fill-' + id\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"0%\"\n [attr.y1]=\"config()?.inverted ? '0%' : '100%'\"\n [attr.x2]=\"config()?.inverted ? '100%' : '0%'\"\n y2=\"0%\">\n <svg:stop offset=\"0%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0\"></svg:stop>\n <svg:stop offset=\"5%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.1\"></svg:stop>\n <svg:stop offset=\"20%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.2\"></svg:stop>\n <svg:stop offset=\"60%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.5\"></svg:stop>\n <svg:stop offset=\"100%\" [attr.stop-color]=\"series().style?.fill ?? series().color\"\n stop-opacity=\"0.9\"></svg:stop>\n </svg:linearGradient>\n </svg:defs>\n }\n @if (data.x && data.y) {\n @if (config()?.inverted) {\n @for (point of data.points; track index; let index = $index) {\n <svg:g (mouseenter)=\"mouseenter(point)\" (mouseleave)=\"mouseleave(point)\">\n <svg:rect\n x=\"0\"\n [attr.y]=\"data.y(point.y)\"\n [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n [attr.fill]=\"\n series().fillType === FillType.gradient\n ? 'url(#gradient-fill-' + id + ')'\n : point.iconId\n ? 'url(#pattern' + point.iconId + ')'\n : (point.color ?? series().style?.fill ?? series().color)\n \"\n [attr.fill-opacity]=\"series().style?.fillOpacity\"\n width=\"100%\"\n ></svg:rect>\n @if (point.text && data.y(point.y1) - data.y(point.y) > 8) {\n <svg:text\n x=\"50%\"\n [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n alignment-baseline=\"middle\"\n text-anchor=\"middle\"\n >\n {{ point.text }}\n </svg:text>\n }\n <svg:line\n x1=\"0\"\n x2=\"100%\"\n [attr.y1]=\"data.y(point.y)\"\n [attr.y2]=\"data.y(point.y)\"\n [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series().style?.stroke ?? series().color)\"\n ></svg:line>\n <svg:line\n x1=\"0\"\n x2=\"100%\"\n [attr.y1]=\"data.y(point.y1)\"\n [attr.y2]=\"data.y(point.y1)\"\n [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series().style?.stroke ?? series().color)\"\n ></svg:line>\n </svg:g>\n }\n } @else {\n @for (point of data.points; track index; let index = $index) {\n <svg:g (mouseenter)=\"mouseenter(point)\" (mouseleave)=\"mouseleave(point)\">\n <svg:rect\n y=\"0\"\n height=\"100%\"\n [attr.x]=\"data.x(point.x)\"\n [attr.width]=\"Math.abs(data.x(point.x1) - data.x(point.x))\"\n [attr.fill]=\"\n series().fillType === FillType.gradient\n ? 'url(#gradient-fill-' + id + ')'\n : point.iconId\n ? 'url(#pattern' + point.iconId + ')'\n : (point.color ?? series().style?.fill ?? series().color)\n \"\n [attr.fill-opacity]=\"series().style?.fillOpacity\"\n\n ></svg:rect>\n @if (point.text && data.x(point.x1) - data.x(point.x) > 8) {\n <svg:text\n x=\"50%\"\n [attr.x]=\"(data.x(point.x1) + data.x(point.x)) / 2\"\n alignment-baseline=\"middle\"\n text-anchor=\"middle\"\n >\n {{ point.text }}\n </svg:text>\n }\n <svg:line\n y1=\"0\"\n y2=\"100%\"\n [attr.x1]=\"data.x(point.x)\"\n [attr.x2]=\"data.x(point.x)\"\n [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series().style?.stroke ?? series().color)\"\n ></svg:line>\n <svg:line\n y1=\"0\"\n y2=\"100%\"\n [attr.x1]=\"data.x(point.x1)\"\n [attr.x2]=\"data.x(point.x1)\"\n [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series().style?.stroke ?? series().color)\"\n ></svg:line>\n </svg:g>\n }\n }\n }\n}\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2186
2217
|
}
|
|
2187
2218
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BlockSeriesComponent, decorators: [{
|
|
2188
2219
|
type: Component,
|
|
2189
|
-
args: [{ selector: 'svg:svg[teta-block-series]', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2220
|
+
args: [{ selector: 'svg:svg[teta-block-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ({ y: y(), x: x(), points: displayPoints() }; as data) {\n @if (series()?.fillType === FillType.gradient) {\n <svg:defs>\n <svg:linearGradient\n [id]=\"'gradient-fill-' + id\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"0%\"\n [attr.y1]=\"config()?.inverted ? '0%' : '100%'\"\n [attr.x2]=\"config()?.inverted ? '100%' : '0%'\"\n y2=\"0%\">\n <svg:stop offset=\"0%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0\"></svg:stop>\n <svg:stop offset=\"5%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.1\"></svg:stop>\n <svg:stop offset=\"20%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.2\"></svg:stop>\n <svg:stop offset=\"60%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.5\"></svg:stop>\n <svg:stop offset=\"100%\" [attr.stop-color]=\"series().style?.fill ?? series().color\"\n stop-opacity=\"0.9\"></svg:stop>\n </svg:linearGradient>\n </svg:defs>\n }\n @if (data.x && data.y) {\n @if (config()?.inverted) {\n @for (point of data.points; track index; let index = $index) {\n <svg:g (mouseenter)=\"mouseenter(point)\" (mouseleave)=\"mouseleave(point)\">\n <svg:rect\n x=\"0\"\n [attr.y]=\"data.y(point.y)\"\n [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n [attr.fill]=\"\n series().fillType === FillType.gradient\n ? 'url(#gradient-fill-' + id + ')'\n : point.iconId\n ? 'url(#pattern' + point.iconId + ')'\n : (point.color ?? series().style?.fill ?? series().color)\n \"\n [attr.fill-opacity]=\"series().style?.fillOpacity\"\n width=\"100%\"\n ></svg:rect>\n @if (point.text && data.y(point.y1) - data.y(point.y) > 8) {\n <svg:text\n x=\"50%\"\n [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n alignment-baseline=\"middle\"\n text-anchor=\"middle\"\n >\n {{ point.text }}\n </svg:text>\n }\n <svg:line\n x1=\"0\"\n x2=\"100%\"\n [attr.y1]=\"data.y(point.y)\"\n [attr.y2]=\"data.y(point.y)\"\n [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series().style?.stroke ?? series().color)\"\n ></svg:line>\n <svg:line\n x1=\"0\"\n x2=\"100%\"\n [attr.y1]=\"data.y(point.y1)\"\n [attr.y2]=\"data.y(point.y1)\"\n [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series().style?.stroke ?? series().color)\"\n ></svg:line>\n </svg:g>\n }\n } @else {\n @for (point of data.points; track index; let index = $index) {\n <svg:g (mouseenter)=\"mouseenter(point)\" (mouseleave)=\"mouseleave(point)\">\n <svg:rect\n y=\"0\"\n height=\"100%\"\n [attr.x]=\"data.x(point.x)\"\n [attr.width]=\"Math.abs(data.x(point.x1) - data.x(point.x))\"\n [attr.fill]=\"\n series().fillType === FillType.gradient\n ? 'url(#gradient-fill-' + id + ')'\n : point.iconId\n ? 'url(#pattern' + point.iconId + ')'\n : (point.color ?? series().style?.fill ?? series().color)\n \"\n [attr.fill-opacity]=\"series().style?.fillOpacity\"\n\n ></svg:rect>\n @if (point.text && data.x(point.x1) - data.x(point.x) > 8) {\n <svg:text\n x=\"50%\"\n [attr.x]=\"(data.x(point.x1) + data.x(point.x)) / 2\"\n alignment-baseline=\"middle\"\n text-anchor=\"middle\"\n >\n {{ point.text }}\n </svg:text>\n }\n <svg:line\n y1=\"0\"\n y2=\"100%\"\n [attr.x1]=\"data.x(point.x)\"\n [attr.x2]=\"data.x(point.x)\"\n [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series().style?.stroke ?? series().color)\"\n ></svg:line>\n <svg:line\n y1=\"0\"\n y2=\"100%\"\n [attr.x1]=\"data.x(point.x1)\"\n [attr.x2]=\"data.x(point.x1)\"\n [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : (point.color ?? series().style?.stroke ?? series().color)\"\n ></svg:line>\n </svg:g>\n }\n }\n }\n}\n" }]
|
|
2190
2221
|
}] });
|
|
2191
2222
|
|
|
2192
2223
|
class BlockAreaSeriesComponent extends SeriesBaseComponent {
|
|
2193
2224
|
constructor() {
|
|
2194
2225
|
super(...arguments);
|
|
2195
2226
|
this.displayPoints = computed(() => {
|
|
2227
|
+
const domain = this.config().inverted ? this.y().domain() : this.x().domain();
|
|
2228
|
+
const [min, max] = domain;
|
|
2196
2229
|
return this.series().data.filter((point, index, arr) => {
|
|
2197
|
-
const [
|
|
2198
|
-
|
|
2199
|
-
|
|
2230
|
+
const next = arr[index + 1];
|
|
2231
|
+
const secondNext = arr[index + 2];
|
|
2232
|
+
if (this.config().inverted) {
|
|
2233
|
+
if (point.y1 === null || point.y1 === undefined) {
|
|
2234
|
+
point.y1 = next?.y ?? point.y;
|
|
2235
|
+
}
|
|
2236
|
+
if (next && (next.y1 === null || next.y1 === undefined)) {
|
|
2237
|
+
next.y1 = secondNext?.y ?? next.y;
|
|
2238
|
+
}
|
|
2239
|
+
return ((point.y >= min || point.y1 >= min || arr[index + 1]?.y >= min || arr[index + 1]?.y1 >= min) &&
|
|
2240
|
+
(point.y <= max || point.y1 <= max || arr[index - 1]?.y <= max || arr[index - 1]?.y1 <= max));
|
|
2241
|
+
}
|
|
2242
|
+
else {
|
|
2243
|
+
if (point.x1 === null || point.x1 === undefined) {
|
|
2244
|
+
point.x1 = next?.x ?? point.x;
|
|
2245
|
+
}
|
|
2246
|
+
if (next && (next.x1 === null || next.x1 === undefined)) {
|
|
2247
|
+
next.x1 = secondNext?.x ?? next.x;
|
|
2248
|
+
}
|
|
2249
|
+
return ((point.x >= min || point.x1 >= min || arr[index + 1]?.x >= min || arr[index + 1]?.x1 >= min) &&
|
|
2250
|
+
(point.x <= max || point.x1 <= max || arr[index - 1]?.x <= max || arr[index - 1]?.x1 <= max));
|
|
2251
|
+
}
|
|
2200
2252
|
});
|
|
2201
2253
|
});
|
|
2202
2254
|
this.fillType = FillType;
|
|
2203
2255
|
this.Math = Math;
|
|
2204
2256
|
}
|
|
2205
2257
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BlockAreaSeriesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2206
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: BlockAreaSeriesComponent, isStandalone: true, selector: "svg:svg[teta-block-area-series]", usesInheritance: true, ngImport: i0, template: "@if ({ y: y(), x: x(), points: displayPoints() }; as data) {\n @if (series()?.fillType === fillType.gradient) {\n <svg:defs>\n <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"0%\"\n [attr.y1]=\"config()?.inverted ? '0%' : '100%'\"\n [attr.x2]=\"config()?.inverted ? '100%' : '0%'\"\n y2=\"0%\">\n <svg:stop offset=\"0%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0\"></svg:stop>\n <svg:stop offset=\"5%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.1\"></svg:stop>\n <svg:stop offset=\"20%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.2\"></svg:stop>\n <svg:stop offset=\"60%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.5\"></svg:stop>\n <svg:stop offset=\"100%\" [attr.stop-color]=\"series().style?.fill ?? series().color\"\n stop-opacity=\"0.9\"></svg:stop>\n </svg:linearGradient>\n </svg:defs>\n }\n @if (data.x && data.y) {\n @for (point of data.points; track
|
|
2258
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: BlockAreaSeriesComponent, isStandalone: true, selector: "svg:svg[teta-block-area-series]", usesInheritance: true, ngImport: i0, template: "@if ({ y: y(), x: x(), points: displayPoints() }; as data) {\n @if (series()?.fillType === fillType.gradient) {\n <svg:defs>\n <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"0%\"\n [attr.y1]=\"config()?.inverted ? '0%' : '100%'\"\n [attr.x2]=\"config()?.inverted ? '100%' : '0%'\"\n y2=\"0%\">\n <svg:stop offset=\"0%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0\"></svg:stop>\n <svg:stop offset=\"5%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.1\"></svg:stop>\n <svg:stop offset=\"20%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.2\"></svg:stop>\n <svg:stop offset=\"60%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.5\"></svg:stop>\n <svg:stop offset=\"100%\" [attr.stop-color]=\"series().style?.fill ?? series().color\"\n stop-opacity=\"0.9\"></svg:stop>\n </svg:linearGradient>\n </svg:defs>\n }\n @if (data.x && data.y) {\n @for (point of data.points; track $index) {\n <svg:g (mouseenter)=\"mouseenter(point)\" (mouseleave)=\"mouseleave(point)\">\n @if (!!config().inverted) {\n <svg:rect [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n [attr.y]=\"data.y(point.y)\"\n [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n [attr.stroke]=\"point.iconId ? '' : (point.color ?? series().style?.stroke ?? series().color)\"\n [attr.stroke-dasharray]=\"series().style?.strokeDasharray\"\n [attr.stroke-width]=\"series().style?.strokeWidth\"\n [attr.fill]=\"\n series().fillType === fillType.gradient\n ? 'url(#gradient-fill-' + id + ')'\n : point.iconId\n ? 'url(#pattern' + point.iconId + ')'\n : (point.color ?? series().style?.fill ?? series().color)\n \"\n [attr.fill-opacity]=\"series().style?.fillOpacity\"></svg:rect>\n } @else {\n <svg:rect [attr.x]=\"data.x(point.x)\"\n [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n [attr.height]=\"Math.abs(data.y(0) - data.y(point.y))\"\n [attr.width]=\"Math.abs(data.x(point.x1) - data.x(point.x))\"\n [attr.stroke]=\"point.iconId ? '' : (point.color ?? series().color)\"\n [attr.stroke-dasharray]=\"series().style?.strokeDasharray\"\n [attr.stroke-width]=\"series().style?.strokeWidth\"\n [attr.fill]=\"\n series().fillType === fillType.gradient\n ? 'url(#gradient-fill-' + id + ')'\n : point.iconId\n ? 'url(#pattern' + point.iconId + ')'\n : (point.color ?? series().color)\n \"\n [attr.fill-opacity]=\"series().style?.fillOpacity\"></svg:rect>\n }\n @if (point.text) {\n <svg:text x=\"50%\"\n fill=\"var(--color-text-50)\"\n [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n alignment-baseline=\"middle\"\n text-anchor=\"middle\">\n {{ point.text }}\n </svg:text>\n }\n </svg:g>\n }\n }\n}\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2207
2259
|
}
|
|
2208
2260
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BlockAreaSeriesComponent, decorators: [{
|
|
2209
2261
|
type: Component,
|
|
2210
|
-
args: [{ selector: 'svg:svg[teta-block-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ({ y: y(), x: x(), points: displayPoints() }; as data) {\n @if (series()?.fillType === fillType.gradient) {\n <svg:defs>\n <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"0%\"\n [attr.y1]=\"config()?.inverted ? '0%' : '100%'\"\n [attr.x2]=\"config()?.inverted ? '100%' : '0%'\"\n y2=\"0%\">\n <svg:stop offset=\"0%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0\"></svg:stop>\n <svg:stop offset=\"5%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.1\"></svg:stop>\n <svg:stop offset=\"20%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.2\"></svg:stop>\n <svg:stop offset=\"60%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.5\"></svg:stop>\n <svg:stop offset=\"100%\" [attr.stop-color]=\"series().style?.fill ?? series().color\"\n stop-opacity=\"0.9\"></svg:stop>\n </svg:linearGradient>\n </svg:defs>\n }\n @if (data.x && data.y) {\n @for (point of data.points; track
|
|
2262
|
+
args: [{ selector: 'svg:svg[teta-block-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ({ y: y(), x: x(), points: displayPoints() }; as data) {\n @if (series()?.fillType === fillType.gradient) {\n <svg:defs>\n <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"0%\"\n [attr.y1]=\"config()?.inverted ? '0%' : '100%'\"\n [attr.x2]=\"config()?.inverted ? '100%' : '0%'\"\n y2=\"0%\">\n <svg:stop offset=\"0%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0\"></svg:stop>\n <svg:stop offset=\"5%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.1\"></svg:stop>\n <svg:stop offset=\"20%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.2\"></svg:stop>\n <svg:stop offset=\"60%\" [attr.stop-color]=\"series().style?.fill ?? series().color\" stop-opacity=\"0.5\"></svg:stop>\n <svg:stop offset=\"100%\" [attr.stop-color]=\"series().style?.fill ?? series().color\"\n stop-opacity=\"0.9\"></svg:stop>\n </svg:linearGradient>\n </svg:defs>\n }\n @if (data.x && data.y) {\n @for (point of data.points; track $index) {\n <svg:g (mouseenter)=\"mouseenter(point)\" (mouseleave)=\"mouseleave(point)\">\n @if (!!config().inverted) {\n <svg:rect [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n [attr.y]=\"data.y(point.y)\"\n [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n [attr.stroke]=\"point.iconId ? '' : (point.color ?? series().style?.stroke ?? series().color)\"\n [attr.stroke-dasharray]=\"series().style?.strokeDasharray\"\n [attr.stroke-width]=\"series().style?.strokeWidth\"\n [attr.fill]=\"\n series().fillType === fillType.gradient\n ? 'url(#gradient-fill-' + id + ')'\n : point.iconId\n ? 'url(#pattern' + point.iconId + ')'\n : (point.color ?? series().style?.fill ?? series().color)\n \"\n [attr.fill-opacity]=\"series().style?.fillOpacity\"></svg:rect>\n } @else {\n <svg:rect [attr.x]=\"data.x(point.x)\"\n [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n [attr.height]=\"Math.abs(data.y(0) - data.y(point.y))\"\n [attr.width]=\"Math.abs(data.x(point.x1) - data.x(point.x))\"\n [attr.stroke]=\"point.iconId ? '' : (point.color ?? series().color)\"\n [attr.stroke-dasharray]=\"series().style?.strokeDasharray\"\n [attr.stroke-width]=\"series().style?.strokeWidth\"\n [attr.fill]=\"\n series().fillType === fillType.gradient\n ? 'url(#gradient-fill-' + id + ')'\n : point.iconId\n ? 'url(#pattern' + point.iconId + ')'\n : (point.color ?? series().color)\n \"\n [attr.fill-opacity]=\"series().style?.fillOpacity\"></svg:rect>\n }\n @if (point.text) {\n <svg:text x=\"50%\"\n fill=\"var(--color-text-50)\"\n [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n alignment-baseline=\"middle\"\n text-anchor=\"middle\">\n {{ point.text }}\n </svg:text>\n }\n </svg:g>\n }\n }\n}\n" }]
|
|
2211
2263
|
}] });
|
|
2212
2264
|
|
|
2213
2265
|
class AreaSeriesComponent extends LinearSeriesBaseComponent {
|
|
@@ -2666,8 +2718,13 @@ class SeriesControlsComponent {
|
|
|
2666
2718
|
{ id: SeriesType.blockArea, value: 'BlockArea' },
|
|
2667
2719
|
{ id: SeriesType.bar, value: 'Bar' },
|
|
2668
2720
|
];
|
|
2721
|
+
this.fillType = [
|
|
2722
|
+
{ id: FillType.default, value: 'Default' },
|
|
2723
|
+
{ id: FillType.gradient, value: 'Gradient' },
|
|
2724
|
+
];
|
|
2669
2725
|
this.TetaSize = TetaSize;
|
|
2670
2726
|
this.SeriesType = SeriesType;
|
|
2727
|
+
this.FillType = FillType;
|
|
2671
2728
|
}
|
|
2672
2729
|
setSeriesEnabled(series, value) {
|
|
2673
2730
|
series.enabled = value;
|
|
@@ -2694,13 +2751,20 @@ class SeriesControlsComponent {
|
|
|
2694
2751
|
setSeriesType(series, value) {
|
|
2695
2752
|
series.type = value;
|
|
2696
2753
|
series.component = defaultSeriesTypeMapping.get(series.type) || LineSeriesComponent;
|
|
2754
|
+
if (value === SeriesType.area || value === SeriesType.blockArea || value === SeriesType.block) {
|
|
2755
|
+
series.fillType = FillType.gradient;
|
|
2756
|
+
}
|
|
2757
|
+
this.chartService.updateSeries(series);
|
|
2758
|
+
}
|
|
2759
|
+
setSeriesFillType(series, value) {
|
|
2760
|
+
series.fillType = value;
|
|
2697
2761
|
this.chartService.updateSeries(series);
|
|
2698
2762
|
}
|
|
2699
2763
|
clear() {
|
|
2700
2764
|
this.chartService.clearSeriesSettings();
|
|
2701
2765
|
}
|
|
2702
2766
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2703
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SeriesControlsComponent, isStandalone: true, selector: "teta-series-controls", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<teta-dropdown [align]=\"Align.right\"\n #dropdown=\"dropdown\"\n [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [class.active]=\"dropdown.open\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\">\n <teta-icon [name]=\"'gear'\"></teta-icon>\n {{ 'charts.settings' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n @if (disabledSeries().length > 0) {\n <div class=\"row padding-h-3 padding-top-3\">\n <teta-dropdown [align]=\"Align.left\" [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [palette]=\"'primary'\">\n <teta-icon [name]=\"'add'\"></teta-icon>\n {{ 'charts.add_curve' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column list shadow-2\" style=\"min-width: 200px;\"\n (click)=\"$event.stopPropagation();\">\n @for (seriesItem of disabledSeries(); track seriesItem.id) {\n <div class=\"list-item list-item_interactive\"\n (click)=\"$event.stopPropagation();setSeriesEnabled(seriesItem, true)\">\n {{ seriesItem.name }}\n </div>\n }\n </div>\n </teta-dropdown>\n </div>\n }\n <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\n <teta-accordion>\n @for (seriesItem of enabledSeries(); track seriesItem.id) {\n <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n <teta-accordion-head style=\"padding: 2px 8px\">\n <div class=\"row align-center gap-12\">\n <div class=\"row align-center gap-8\" (click)=\"$event.stopPropagation()\">\n <teta-button (click)=\"setSeriesEnabled(seriesItem, false)\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\"\n [square]=\"true\">\n <teta-icon [name]=\"'delete'\" [palette]=\"'red'\"></teta-icon>\n </teta-button>\n <teta-color-input [ngModel]=\"seriesItem.color\"\n (ngModelChange)=\"setSeriesColor(seriesItem, $event)\"></teta-color-input>\n </div>\n {{ seriesItem.name }}\n </div>\n </teta-accordion-head>\n <ng-template tetaAccordionContent>\n <div class=\"column gap-8\">\n <teta-input [label]=\"'charts.line_width' | transloco\">\n <teta-select [options]=\"strokeWidth\"\n [ngModel]=\"seriesItem.style?.strokeWidth ?? 1\"\n [valueRef]=\"'id'\"\n (ngModelChange)=\"setSeriesStrokeWidth(seriesItem, $event)\"\n [allowNull]=\"false\">\n <ng-template tetaSelectOption let-option>\n <div style=\"width: 50px;\"\n [style.height.px]=\"option.id\"\n [style.background-color]=\"seriesItem.color\"></div>\n </ng-template>\n <ng-template tetaSelectValue let-value>\n <div style=\"width: 50px;\"\n [style.height.px]=\"value?.id\"\n [style.background-color]=\"seriesItem.color\"></div>\n </ng-template>\n </teta-select>\n </teta-input>\n <teta-input [label]=\"'charts.line_style' | transloco\">\n <teta-select [options]=\"strokeArray\"\n [ngModel]=\"seriesItem.style?.strokeDasharray ?? ''\"\n [valueRef]=\"'id'\"\n (ngModelChange)=\"setSeriesStrokeDasharray(seriesItem, $event)\"\n [allowNull]=\"false\">\n <ng-template tetaSelectOption let-option>\n <div style=\"width: 50px;border:0;border-top: 2px;\"\n [style.border-style]=\"option.value\"\n [style.border-color]=\"seriesItem.color\"></div>\n </ng-template>\n <ng-template tetaSelectValue let-value>\n <div style=\"width: 50px;border:0;border-top: 2px;\"\n [style.border-style]=\"value?.value\"\n [style.border-color]=\"seriesItem.color\"></div>\n </ng-template>\n </teta-select>\n </teta-input>\n <teta-input [label]=\"'charts.chart_type' | transloco\">\n <teta-select [options]=\"seriesType\"\n [ngModel]=\"seriesItem.type ?? SeriesType.line\"\n [valueRef]=\"'id'\"\n [textRef]=\"'value'\"\n (ngModelChange)=\"setSeriesType(seriesItem, $event)\"\n [allowNull]=\"false\">\n </teta-select>\n </teta-input>\n </div>\n </ng-template>\n </teta-accordion-item>\n }\n </teta-accordion>\n </teta-scrollable>\n <div class=\"row padding-3\">\n <button teta-button\n [palette]=\"'red'\"\n [view]=\"'ghost'\"\n (click)=\"clear()\">\n <teta-icon [name]=\"'erase'\"></teta-icon>\n {{ 'charts.reset' | transloco }}\n </button>\n </div>\n </div>\n</teta-dropdown>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: AccordionComponent, selector: "teta-accordion" }, { kind: "component", type: AccordionHeadComponent, selector: "teta-accordion-head", inputs: ["showToggle"] }, { kind: "component", type: AccordionItemComponent, selector: "teta-accordion-item", inputs: ["open", "disabled", "divider", "viewType"] }, { kind: "directive", type: AccordionContentDirective, selector: "[tetaAccordionContent]" }, { kind: "component", type: ColorInputComponent, selector: "teta-color-input", inputs: ["disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "viewType", "notFoundText", "valueRef", "textRef", "searchRef"] }, { kind: "directive", type: SelectOptionDirective, selector: "[tetaSelectOption]" }, { kind: "directive", type: SelectValueDirective, selector: "[tetaSelectValue]" }, { kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2767
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SeriesControlsComponent, isStandalone: true, selector: "teta-series-controls", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<teta-dropdown [align]=\"Align.right\"\n #dropdown=\"dropdown\"\n [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [class.active]=\"dropdown.open\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\">\n <teta-icon [name]=\"'gear'\"></teta-icon>\n {{ 'charts.settings' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n @if (disabledSeries().length > 0) {\n <div class=\"row padding-h-3 padding-top-3\">\n <teta-dropdown [align]=\"Align.left\" [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [palette]=\"'primary'\">\n <teta-icon [name]=\"'add'\"></teta-icon>\n {{ 'charts.add_curve' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column list shadow-2\" style=\"min-width: 200px;\"\n (click)=\"$event.stopPropagation();\">\n @for (seriesItem of disabledSeries(); track seriesItem.id) {\n <div class=\"list-item list-item_interactive\"\n (click)=\"$event.stopPropagation();setSeriesEnabled(seriesItem, true)\">\n {{ seriesItem.name }}\n </div>\n }\n </div>\n </teta-dropdown>\n </div>\n }\n <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\n <teta-accordion>\n @for (seriesItem of enabledSeries(); track seriesItem.id) {\n <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n <teta-accordion-head style=\"padding: 2px 8px\">\n <div class=\"row align-center gap-12\">\n <div class=\"row align-center gap-8\" (click)=\"$event.stopPropagation()\">\n <teta-button (click)=\"setSeriesEnabled(seriesItem, false)\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\"\n [square]=\"true\">\n <teta-icon [name]=\"'delete'\" [palette]=\"'red'\"></teta-icon>\n </teta-button>\n <teta-color-input [ngModel]=\"seriesItem.color\"\n (ngModelChange)=\"setSeriesColor(seriesItem, $event)\"></teta-color-input>\n </div>\n {{ seriesItem.name }}\n </div>\n </teta-accordion-head>\n <ng-template tetaAccordionContent>\n <div class=\"column gap-8\">\n <teta-input [label]=\"'charts.line_width' | transloco\">\n <teta-select [options]=\"strokeWidth\"\n [ngModel]=\"seriesItem.style?.strokeWidth ?? 1\"\n [valueRef]=\"'id'\"\n (ngModelChange)=\"setSeriesStrokeWidth(seriesItem, $event)\"\n [allowNull]=\"false\">\n <ng-template tetaSelectOption let-option>\n <div style=\"width: 50px;\"\n [style.height.px]=\"option.id\"\n [style.background-color]=\"seriesItem.color\"></div>\n </ng-template>\n <ng-template tetaSelectValue let-value>\n <div style=\"width: 50px;\"\n [style.height.px]=\"value?.id\"\n [style.background-color]=\"seriesItem.color\"></div>\n </ng-template>\n </teta-select>\n </teta-input>\n <teta-input [label]=\"'charts.line_style' | transloco\">\n <teta-select [options]=\"strokeArray\"\n [ngModel]=\"seriesItem.style?.strokeDasharray ?? ''\"\n [valueRef]=\"'id'\"\n (ngModelChange)=\"setSeriesStrokeDasharray(seriesItem, $event)\"\n [allowNull]=\"false\">\n <ng-template tetaSelectOption let-option>\n <div style=\"width: 50px;border:0;border-top: 2px;\"\n [style.border-style]=\"option.value\"\n [style.border-color]=\"seriesItem.color\"></div>\n </ng-template>\n <ng-template tetaSelectValue let-value>\n <div style=\"width: 50px;border:0;border-top: 2px;\"\n [style.border-style]=\"value?.value\"\n [style.border-color]=\"seriesItem.color\"></div>\n </ng-template>\n </teta-select>\n </teta-input>\n <teta-input [label]=\"'charts.chart_type' | transloco\">\n <teta-select [options]=\"seriesType\"\n [ngModel]=\"seriesItem.type ?? SeriesType.line\"\n [valueRef]=\"'id'\"\n [textRef]=\"'value'\"\n (ngModelChange)=\"setSeriesType(seriesItem, $event)\"\n [allowNull]=\"false\">\n </teta-select>\n </teta-input>\n @if (seriesItem.type === SeriesType.area || seriesItem.type === SeriesType.blockArea || seriesItem.type === SeriesType.block) {\n <teta-input [label]=\"'charts.fill_type' | transloco\">\n <teta-select [options]=\"fillType\"\n [ngModel]=\"seriesItem.fillType ?? FillType.default\"\n [valueRef]=\"'id'\"\n [textRef]=\"'value'\"\n (ngModelChange)=\"setSeriesFillType(seriesItem, $event)\"\n [allowNull]=\"false\">\n </teta-select>\n </teta-input>\n }\n </div>\n </ng-template>\n </teta-accordion-item>\n }\n </teta-accordion>\n </teta-scrollable>\n <div class=\"row padding-3\">\n <button teta-button\n [palette]=\"'red'\"\n [view]=\"'ghost'\"\n (click)=\"clear()\">\n <teta-icon [name]=\"'erase'\"></teta-icon>\n {{ 'charts.reset' | transloco }}\n </button>\n </div>\n </div>\n</teta-dropdown>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: AccordionComponent, selector: "teta-accordion" }, { kind: "component", type: AccordionHeadComponent, selector: "teta-accordion-head", inputs: ["showToggle"] }, { kind: "component", type: AccordionItemComponent, selector: "teta-accordion-item", inputs: ["open", "disabled", "divider", "viewType"] }, { kind: "directive", type: AccordionContentDirective, selector: "[tetaAccordionContent]" }, { kind: "component", type: ColorInputComponent, selector: "teta-color-input", inputs: ["disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "viewType", "notFoundText", "valueRef", "textRef", "searchRef"] }, { kind: "directive", type: SelectOptionDirective, selector: "[tetaSelectOption]" }, { kind: "directive", type: SelectValueDirective, selector: "[tetaSelectValue]" }, { kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2704
2768
|
}
|
|
2705
2769
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesControlsComponent, decorators: [{
|
|
2706
2770
|
type: Component,
|
|
@@ -2722,7 +2786,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
2722
2786
|
ScrollableComponent,
|
|
2723
2787
|
TranslocoPipe,
|
|
2724
2788
|
InputComponent,
|
|
2725
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown [align]=\"Align.right\"\n #dropdown=\"dropdown\"\n [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [class.active]=\"dropdown.open\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\">\n <teta-icon [name]=\"'gear'\"></teta-icon>\n {{ 'charts.settings' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n @if (disabledSeries().length > 0) {\n <div class=\"row padding-h-3 padding-top-3\">\n <teta-dropdown [align]=\"Align.left\" [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [palette]=\"'primary'\">\n <teta-icon [name]=\"'add'\"></teta-icon>\n {{ 'charts.add_curve' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column list shadow-2\" style=\"min-width: 200px;\"\n (click)=\"$event.stopPropagation();\">\n @for (seriesItem of disabledSeries(); track seriesItem.id) {\n <div class=\"list-item list-item_interactive\"\n (click)=\"$event.stopPropagation();setSeriesEnabled(seriesItem, true)\">\n {{ seriesItem.name }}\n </div>\n }\n </div>\n </teta-dropdown>\n </div>\n }\n <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\n <teta-accordion>\n @for (seriesItem of enabledSeries(); track seriesItem.id) {\n <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n <teta-accordion-head style=\"padding: 2px 8px\">\n <div class=\"row align-center gap-12\">\n <div class=\"row align-center gap-8\" (click)=\"$event.stopPropagation()\">\n <teta-button (click)=\"setSeriesEnabled(seriesItem, false)\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\"\n [square]=\"true\">\n <teta-icon [name]=\"'delete'\" [palette]=\"'red'\"></teta-icon>\n </teta-button>\n <teta-color-input [ngModel]=\"seriesItem.color\"\n (ngModelChange)=\"setSeriesColor(seriesItem, $event)\"></teta-color-input>\n </div>\n {{ seriesItem.name }}\n </div>\n </teta-accordion-head>\n <ng-template tetaAccordionContent>\n <div class=\"column gap-8\">\n <teta-input [label]=\"'charts.line_width' | transloco\">\n <teta-select [options]=\"strokeWidth\"\n [ngModel]=\"seriesItem.style?.strokeWidth ?? 1\"\n [valueRef]=\"'id'\"\n (ngModelChange)=\"setSeriesStrokeWidth(seriesItem, $event)\"\n [allowNull]=\"false\">\n <ng-template tetaSelectOption let-option>\n <div style=\"width: 50px;\"\n [style.height.px]=\"option.id\"\n [style.background-color]=\"seriesItem.color\"></div>\n </ng-template>\n <ng-template tetaSelectValue let-value>\n <div style=\"width: 50px;\"\n [style.height.px]=\"value?.id\"\n [style.background-color]=\"seriesItem.color\"></div>\n </ng-template>\n </teta-select>\n </teta-input>\n <teta-input [label]=\"'charts.line_style' | transloco\">\n <teta-select [options]=\"strokeArray\"\n [ngModel]=\"seriesItem.style?.strokeDasharray ?? ''\"\n [valueRef]=\"'id'\"\n (ngModelChange)=\"setSeriesStrokeDasharray(seriesItem, $event)\"\n [allowNull]=\"false\">\n <ng-template tetaSelectOption let-option>\n <div style=\"width: 50px;border:0;border-top: 2px;\"\n [style.border-style]=\"option.value\"\n [style.border-color]=\"seriesItem.color\"></div>\n </ng-template>\n <ng-template tetaSelectValue let-value>\n <div style=\"width: 50px;border:0;border-top: 2px;\"\n [style.border-style]=\"value?.value\"\n [style.border-color]=\"seriesItem.color\"></div>\n </ng-template>\n </teta-select>\n </teta-input>\n <teta-input [label]=\"'charts.chart_type' | transloco\">\n <teta-select [options]=\"seriesType\"\n [ngModel]=\"seriesItem.type ?? SeriesType.line\"\n [valueRef]=\"'id'\"\n [textRef]=\"'value'\"\n (ngModelChange)=\"setSeriesType(seriesItem, $event)\"\n [allowNull]=\"false\">\n </teta-select>\n </teta-input>\n </div>\n </ng-template>\n </teta-accordion-item>\n }\n </teta-accordion>\n </teta-scrollable>\n <div class=\"row padding-3\">\n <button teta-button\n [palette]=\"'red'\"\n [view]=\"'ghost'\"\n (click)=\"clear()\">\n <teta-icon [name]=\"'erase'\"></teta-icon>\n {{ 'charts.reset' | transloco }}\n </button>\n </div>\n </div>\n</teta-dropdown>\n" }]
|
|
2789
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown [align]=\"Align.right\"\n #dropdown=\"dropdown\"\n [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [class.active]=\"dropdown.open\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\">\n <teta-icon [name]=\"'gear'\"></teta-icon>\n {{ 'charts.settings' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n @if (disabledSeries().length > 0) {\n <div class=\"row padding-h-3 padding-top-3\">\n <teta-dropdown [align]=\"Align.left\" [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [palette]=\"'primary'\">\n <teta-icon [name]=\"'add'\"></teta-icon>\n {{ 'charts.add_curve' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column list shadow-2\" style=\"min-width: 200px;\"\n (click)=\"$event.stopPropagation();\">\n @for (seriesItem of disabledSeries(); track seriesItem.id) {\n <div class=\"list-item list-item_interactive\"\n (click)=\"$event.stopPropagation();setSeriesEnabled(seriesItem, true)\">\n {{ seriesItem.name }}\n </div>\n }\n </div>\n </teta-dropdown>\n </div>\n }\n <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\n <teta-accordion>\n @for (seriesItem of enabledSeries(); track seriesItem.id) {\n <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n <teta-accordion-head style=\"padding: 2px 8px\">\n <div class=\"row align-center gap-12\">\n <div class=\"row align-center gap-8\" (click)=\"$event.stopPropagation()\">\n <teta-button (click)=\"setSeriesEnabled(seriesItem, false)\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\"\n [square]=\"true\">\n <teta-icon [name]=\"'delete'\" [palette]=\"'red'\"></teta-icon>\n </teta-button>\n <teta-color-input [ngModel]=\"seriesItem.color\"\n (ngModelChange)=\"setSeriesColor(seriesItem, $event)\"></teta-color-input>\n </div>\n {{ seriesItem.name }}\n </div>\n </teta-accordion-head>\n <ng-template tetaAccordionContent>\n <div class=\"column gap-8\">\n <teta-input [label]=\"'charts.line_width' | transloco\">\n <teta-select [options]=\"strokeWidth\"\n [ngModel]=\"seriesItem.style?.strokeWidth ?? 1\"\n [valueRef]=\"'id'\"\n (ngModelChange)=\"setSeriesStrokeWidth(seriesItem, $event)\"\n [allowNull]=\"false\">\n <ng-template tetaSelectOption let-option>\n <div style=\"width: 50px;\"\n [style.height.px]=\"option.id\"\n [style.background-color]=\"seriesItem.color\"></div>\n </ng-template>\n <ng-template tetaSelectValue let-value>\n <div style=\"width: 50px;\"\n [style.height.px]=\"value?.id\"\n [style.background-color]=\"seriesItem.color\"></div>\n </ng-template>\n </teta-select>\n </teta-input>\n <teta-input [label]=\"'charts.line_style' | transloco\">\n <teta-select [options]=\"strokeArray\"\n [ngModel]=\"seriesItem.style?.strokeDasharray ?? ''\"\n [valueRef]=\"'id'\"\n (ngModelChange)=\"setSeriesStrokeDasharray(seriesItem, $event)\"\n [allowNull]=\"false\">\n <ng-template tetaSelectOption let-option>\n <div style=\"width: 50px;border:0;border-top: 2px;\"\n [style.border-style]=\"option.value\"\n [style.border-color]=\"seriesItem.color\"></div>\n </ng-template>\n <ng-template tetaSelectValue let-value>\n <div style=\"width: 50px;border:0;border-top: 2px;\"\n [style.border-style]=\"value?.value\"\n [style.border-color]=\"seriesItem.color\"></div>\n </ng-template>\n </teta-select>\n </teta-input>\n <teta-input [label]=\"'charts.chart_type' | transloco\">\n <teta-select [options]=\"seriesType\"\n [ngModel]=\"seriesItem.type ?? SeriesType.line\"\n [valueRef]=\"'id'\"\n [textRef]=\"'value'\"\n (ngModelChange)=\"setSeriesType(seriesItem, $event)\"\n [allowNull]=\"false\">\n </teta-select>\n </teta-input>\n @if (seriesItem.type === SeriesType.area || seriesItem.type === SeriesType.blockArea || seriesItem.type === SeriesType.block) {\n <teta-input [label]=\"'charts.fill_type' | transloco\">\n <teta-select [options]=\"fillType\"\n [ngModel]=\"seriesItem.fillType ?? FillType.default\"\n [valueRef]=\"'id'\"\n [textRef]=\"'value'\"\n (ngModelChange)=\"setSeriesFillType(seriesItem, $event)\"\n [allowNull]=\"false\">\n </teta-select>\n </teta-input>\n }\n </div>\n </ng-template>\n </teta-accordion-item>\n }\n </teta-accordion>\n </teta-scrollable>\n <div class=\"row padding-3\">\n <button teta-button\n [palette]=\"'red'\"\n [view]=\"'ghost'\"\n (click)=\"clear()\">\n <teta-icon [name]=\"'erase'\"></teta-icon>\n {{ 'charts.reset' | transloco }}\n </button>\n </div>\n </div>\n</teta-dropdown>\n" }]
|
|
2726
2790
|
}] });
|
|
2727
2791
|
|
|
2728
2792
|
class ChartContainerComponent {
|