@tetacom/svg-charts 1.7.23 → 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
|
}
|
|
@@ -2174,42 +2182,84 @@ class BlockSeriesComponent extends SeriesBaseComponent {
|
|
|
2174
2182
|
constructor() {
|
|
2175
2183
|
super(...arguments);
|
|
2176
2184
|
this.displayPoints = computed(() => {
|
|
2185
|
+
const domain = this.config().inverted ? this.y().domain() : this.x().domain();
|
|
2186
|
+
const [min, max] = domain;
|
|
2177
2187
|
return this.series().data.filter((point, index, arr) => {
|
|
2178
|
-
const [
|
|
2179
|
-
|
|
2180
|
-
|
|
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
|
+
}
|
|
2181
2210
|
});
|
|
2182
2211
|
});
|
|
2183
2212
|
this.Math = Math;
|
|
2184
2213
|
this.FillType = FillType;
|
|
2185
2214
|
}
|
|
2186
2215
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BlockSeriesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2187
|
-
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 }); }
|
|
2188
2217
|
}
|
|
2189
2218
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BlockSeriesComponent, decorators: [{
|
|
2190
2219
|
type: Component,
|
|
2191
|
-
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" }]
|
|
2192
2221
|
}] });
|
|
2193
2222
|
|
|
2194
2223
|
class BlockAreaSeriesComponent extends SeriesBaseComponent {
|
|
2195
2224
|
constructor() {
|
|
2196
2225
|
super(...arguments);
|
|
2197
2226
|
this.displayPoints = computed(() => {
|
|
2227
|
+
const domain = this.config().inverted ? this.y().domain() : this.x().domain();
|
|
2228
|
+
const [min, max] = domain;
|
|
2198
2229
|
return this.series().data.filter((point, index, arr) => {
|
|
2199
|
-
const [
|
|
2200
|
-
|
|
2201
|
-
|
|
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
|
+
}
|
|
2202
2252
|
});
|
|
2203
2253
|
});
|
|
2204
2254
|
this.fillType = FillType;
|
|
2205
2255
|
this.Math = Math;
|
|
2206
2256
|
}
|
|
2207
2257
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BlockAreaSeriesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2208
|
-
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 }); }
|
|
2209
2259
|
}
|
|
2210
2260
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BlockAreaSeriesComponent, decorators: [{
|
|
2211
2261
|
type: Component,
|
|
2212
|
-
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" }]
|
|
2213
2263
|
}] });
|
|
2214
2264
|
|
|
2215
2265
|
class AreaSeriesComponent extends LinearSeriesBaseComponent {
|
|
@@ -2668,8 +2718,13 @@ class SeriesControlsComponent {
|
|
|
2668
2718
|
{ id: SeriesType.blockArea, value: 'BlockArea' },
|
|
2669
2719
|
{ id: SeriesType.bar, value: 'Bar' },
|
|
2670
2720
|
];
|
|
2721
|
+
this.fillType = [
|
|
2722
|
+
{ id: FillType.default, value: 'Default' },
|
|
2723
|
+
{ id: FillType.gradient, value: 'Gradient' },
|
|
2724
|
+
];
|
|
2671
2725
|
this.TetaSize = TetaSize;
|
|
2672
2726
|
this.SeriesType = SeriesType;
|
|
2727
|
+
this.FillType = FillType;
|
|
2673
2728
|
}
|
|
2674
2729
|
setSeriesEnabled(series, value) {
|
|
2675
2730
|
series.enabled = value;
|
|
@@ -2696,13 +2751,20 @@ class SeriesControlsComponent {
|
|
|
2696
2751
|
setSeriesType(series, value) {
|
|
2697
2752
|
series.type = value;
|
|
2698
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;
|
|
2699
2761
|
this.chartService.updateSeries(series);
|
|
2700
2762
|
}
|
|
2701
2763
|
clear() {
|
|
2702
2764
|
this.chartService.clearSeriesSettings();
|
|
2703
2765
|
}
|
|
2704
2766
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2705
|
-
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 }); }
|
|
2706
2768
|
}
|
|
2707
2769
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesControlsComponent, decorators: [{
|
|
2708
2770
|
type: Component,
|
|
@@ -2724,7 +2786,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
2724
2786
|
ScrollableComponent,
|
|
2725
2787
|
TranslocoPipe,
|
|
2726
2788
|
InputComponent,
|
|
2727
|
-
], 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" }]
|
|
2728
2790
|
}] });
|
|
2729
2791
|
|
|
2730
2792
|
class ChartContainerComponent {
|