saherelm/xFrameworkComponentsHolder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: saherelm/xFrameworkComponentsHolder:master
Branches Tags
saherelm/xFrameworkComponentsHolder:master saherelm/xFrameworkComponentsHolder:dev-xchart-properties
..
pull from: saherelm/xFrameworkComponentsHolder:dev-xchart-properties
Branches Tags
saherelm/xFrameworkComponentsHolder:master saherelm/xFrameworkComponentsHolder:dev-xchart-properties
1 Commits
master .. dev-xchart-properties
Author SHA1 Message Date
saherelm 752efe3e3c add color properties has issues ... 2026-08-31 22:24:40 +03:30
2 changed files with 209 additions and 1058 deletions
Expand all files Collapse all files
projects/x-framework-components/src/lib/x-chart/x-chart.component.ts
+7 -809
View File
@@ -6,48 +6,32 @@ import {
} from '@angular/core'; } from '@angular/core';
import { import {
nameof, nameof,
toArray,
isString,
XMimeType, XMimeType,
downloadFile, downloadFile,
generateUuid, generateUuid,
getXColorValue, getXColorValue,
XOneOrManyType,
XColorIdentifier,
downloadFileByUrl, downloadFileByUrl,
isNullOrUndefined, isNullOrUndefined,
XResourceIdentifier,
isNullOrEmptyString, isNullOrEmptyString,
XColorWithBrightness, XColorWithBrightness,
downloadArrayBufferedFile, downloadArrayBufferedFile,
} from 'x-framework-core'; } from 'x-framework-core';
import { import {
XChartFill,
isChartType, isChartType,
XChartXAxis,
XChartYAxis,
XChartStroke,
XChartAction, XChartAction,
XChartTooltip,
XChartOptions, XChartOptions,
XChartColorStop,
XChartColorType,
XChartEventOpts, XChartEventOpts,
XChartTextAlign, XChartTextAlign,
XChartSeriesType, XChartSeriesType,
isChartTextAlign, isChartTextAlign,
XChartAnnotations,
XChartActionBarItem, XChartActionBarItem,
XChartDrilldownEvent, XChartDrilldownEvent,
XChartAnnotationLabel,
XChartAnnotationStyle,
XChartMarkerAnnotations,
XChartTooltipAnnotations,
XChartContainerComponent, XChartContainerComponent,
XChartStoryboardBeatInfo, XChartStoryboardBeatInfo,
XChartColorFormatterOpts,
} from './x-chart.typings'; } from './x-chart.typings';
import ApexCharts from 'apexcharts'; import ApexCharts from 'apexcharts';
import { Subscription } from 'rxjs'; import { Subject, Subscription } from 'rxjs';
import { import {
XActionBarItem, XActionBarItem,
XActionBarItemSlot, XActionBarItemSlot,
@@ -192,32 +176,6 @@ export class XChartComponent extends XChartContainerComponent {
await this.prepareActionBar(); await this.prepareActionBar();
} }
//
// Stroke ...
isChanged = changeKeys.includes(nameof<XChartComponent>('stroke'));
if (isChanged) {
//
if (isNullOrUndefined(this.stroke)) {
this.stroke = this.propertyProvider.stroke;
}
//
this.handleChartUpdate();
}
//
// Colors ...
isChanged = changeKeys.includes(nameof<XChartComponent>('colors'));
if (isChanged) {
//
if (isNullOrUndefined(this.colors)) {
this.colors = this.propertyProvider.colors;
}
//
this.handleChartUpdate();
}
// //
// Zoom Step ... // Zoom Step ...
isChanged = changeKeys.includes(nameof<XChartComponent>('zoomStep')); isChanged = changeKeys.includes(nameof<XChartComponent>('zoomStep'));
@@ -232,58 +190,6 @@ export class XChartComponent extends XChartContainerComponent {
zoomStep = await this.getValueAsync(this.zoomStep); zoomStep = await this.getValueAsync(this.zoomStep);
} }
//
// Toolbar ...
isChanged = changeKeys.includes(nameof<XChartComponent>('tooltip'));
if (isChanged) {
//
if (isNullOrUndefined(this.tooltip)) {
this.tooltip = this.propertyProvider.tooltip;
}
//
await this.handleChartUpdate();
}
//
// XAxis ...
isChanged = changeKeys.includes(nameof<XChartComponent>('xAxis'));
if (isChanged) {
//
if (isNullOrUndefined(this.xAxis)) {
this.xAxis = this.propertyProvider.xAxis;
}
//
await this.handleChartUpdate();
}
//
// YAxis ...
isChanged = changeKeys.includes(nameof<XChartComponent>('yAxis'));
if (isChanged) {
//
if (isNullOrUndefined(this.yAxis)) {
this.yAxis = this.propertyProvider.yAxis;
}
//
await this.handleChartUpdate();
}
//
// Annotations ...
isChanged = changeKeys.includes(nameof<XChartComponent>('annotations'));
if (isChanged) {
//
if (isNullOrUndefined(this.annotations)) {
this.annotations = this.propertyProvider.annotations;
}
//
await this.handleChartUpdate();
}
// //
// Chart Title ... // Chart Title ...
isChanged = changeKeys.includes(nameof<XChartComponent>('title')); isChanged = changeKeys.includes(nameof<XChartComponent>('title'));
@@ -820,20 +726,12 @@ export class XChartComponent extends XChartContainerComponent {
const chartId = await this.getValueAsync(this.uuid); const chartId = await this.getValueAsync(this.uuid);
const series = await this.getValueAsync(this.series); const series = await this.getValueAsync(this.series);
//
const stroke = await this.getPreparedStroke();
const colors = await this.getPreparedColors();
// //
const cOptions = await this.getValueAsync(this.options); const cOptions = await this.getValueAsync(this.options);
// //
const xAxis = await this.getPreparedXAxis(cOptions?.xaxis); const colors: Array<string | ((opts: XChartColorFormatterOpts) => string)> =
const yAxis = await this.getPreparedYAxis(cOptions?.yaxis); [getXColorValue(XColorWithBrightness.PrimaryShade)];
//
const tooltip = await this.getPreparedTooltip();
const annotations = await this.getPreparedAnnotations();
// //
const title = await this.getResourceValueAsync(this.title); const title = await this.getResourceValueAsync(this.title);
@@ -868,6 +766,9 @@ export class XChartComponent extends XChartContainerComponent {
// //
const primaryColorValue = getXColorValue(XColorWithBrightness.Primary); const primaryColorValue = getXColorValue(XColorWithBrightness.Primary);
//
console.log('cOptions: ', cOptions);
// //
// Normalize Directional Properties .... // Normalize Directional Properties ....
if (this.managerService.uiDirection == 'ltr') { if (this.managerService.uiDirection == 'ltr') {
@@ -908,14 +809,6 @@ export class XChartComponent extends XChartContainerComponent {
this.CHART_OPTIONS = { this.CHART_OPTIONS = {
...cOptions, ...cOptions,
series: series, series: series,
stroke: {
...cOptions?.stroke,
...stroke
},
annotations: {
...cOptions?.annotations,
...annotations,
},
title: { title: {
...cOptions?.title, ...cOptions?.title,
text: title, text: title,
@@ -1488,17 +1381,10 @@ export class XChartComponent extends XChartContainerComponent {
palette: cOptions?.theme?.palette || 'palette1', palette: cOptions?.theme?.palette || 'palette1',
}, },
colors: colors, colors: colors,
xaxis: {
...xAxis,
},
yaxis: [...yAxis],
grid: { grid: {
...cOptions?.grid, ...cOptions?.grid,
borderColor: gridColorValue, borderColor: gridColorValue,
}, },
tooltip: {
...tooltip,
},
dataLabels: { dataLabels: {
...cOptions?.dataLabels, ...cOptions?.dataLabels,
}, },
@@ -2365,693 +2251,5 @@ export class XChartComponent extends XChartContainerComponent {
this.CARD_ACTION_PROVIDER_SUBSCRIPTION.unsubscribe(); this.CARD_ACTION_PROVIDER_SUBSCRIPTION.unsubscribe();
this.CARD_ACTION_PROVIDER_SUBSCRIPTION = null; this.CARD_ACTION_PROVIDER_SUBSCRIPTION = null;
} }
//
//#region Preparers ...
private async getPreparedStroke() {
//
let result: XChartStroke = undefined;
//
if (!isNullOrUndefined(this.stroke)) {
//
result = await this.getValueAsync(this.stroke);
//
result = {
...result,
colors: result?.colors.map((c) => this.normalizeColor(c)),
fill: this.normalizeFill(result?.fill),
};
}
//
return result;
}
private async getPreparedColors() {
//
let result: XChartColorType = undefined;
//
if (!isNullOrUndefined(this.colors)) {
//
result = await this.getValueAsync(this.colors);
//
// Try to Normalize ...
if (!isNullOrUndefined(result) && this.hasChild(result)) {
//
result = [
...result.map((x) => {
//
// Only Normalize when color is string ...
if (!isNullOrUndefined(x) && isString(x)) {
x = this.normalizeColor(x as string);
}
//
return x;
}),
];
}
}
//
return result;
}
private async getPreparedTooltip() {
//
let result: XChartTooltip = undefined;
//
if (!isNullOrUndefined(this.tooltip)) {
//
result = await this.getValueAsync(this.tooltip);
//
result = await this.normalizeChartTooltip(result);
}
//
return result;
}
private async getPreparedXAxis(v?: XChartXAxis) {
//
let result: XChartXAxis = undefined;
//
if (!isNullOrUndefined(this.xAxis)) {
//
result = {
...(await this.getValueAsync(this.xAxis)),
};
}
//
if (!isNullOrUndefined(v)) {
//
result = {
...v,
...result,
};
}
//
if (!isNullOrUndefined(result)) {
//
result = {
...result,
};
//
if (!isNullOrUndefined(result.labels)) {
//
result.labels = {
...result.labels,
};
//
if (!isNullOrUndefined(result.labels.style)) {
//
result.labels.style = {
...result.labels.style,
colors: toArray(result.labels.style.colors).map((c) =>
this.normalizeColor(c),
),
};
}
}
//
if (!isNullOrUndefined(result.group)) {
//
result.group = {
...result.group,
};
//
if (!isNullOrUndefined(result.group.style)) {
//
result.group.style = {
...result.group.style,
colors: toArray(result.group.style.colors).map((x) =>
this.normalizeColor(x),
),
};
}
}
//
if (!isNullOrUndefined(result.axisBorder)) {
//
result.axisBorder = {
...result.axisBorder,
color: this.normalizeColor(result.axisBorder.color),
};
}
//
if (!isNullOrUndefined(result.axisTicks)) {
//
result.axisTicks = {
...result.axisTicks,
color: this.normalizeColor(result.axisTicks.color),
};
}
//
if (!isNullOrUndefined(result.title)) {
//
result.title = {
...result.title,
text: (await this.normalizeText(result.title.text)) as string,
};
//
if (!isNullOrUndefined(result.title.style)) {
//
result.title.style = {
...result.title.style,
color: this.normalizeColor(result.title.style.color),
};
}
}
//
if (!isNullOrUndefined(result.crosshairs)) {
//
result.crosshairs = {
...result.crosshairs,
};
//
if (!isNullOrUndefined(result.crosshairs.stroke)) {
//
result.crosshairs.stroke = {
...result.crosshairs.stroke,
color: this.normalizeColor(result.crosshairs.stroke.color),
};
}
//
if (!isNullOrUndefined(result.crosshairs.fill)) {
//
result.crosshairs.fill = {
...result.crosshairs.fill,
color: this.normalizeColor(result.crosshairs.fill.color),
};
//
if (!isNullOrUndefined(result.crosshairs.fill.gradient)) {
//
result.crosshairs.fill.gradient = {
...result.crosshairs.fill.gradient,
colorTo: this.normalizeColor(
result.crosshairs.fill.gradient.colorTo,
),
colorFrom: this.normalizeColor(
result.crosshairs.fill.gradient.colorFrom,
),
};
}
}
}
}
//
return result;
}
private async getPreparedYAxis(v?: XOneOrManyType<XChartYAxis>) {
//
let result: XChartYAxis[] = undefined;
//
if (!isNullOrUndefined(v)) {
//
result = [...toArray(v)];
}
//
if (!isNullOrUndefined(this.yAxis)) {
//
result = [
...(this.hasChild(result) ? result : []),
...(await this.getArrayValueAsync(this.yAxis)),
];
//
const mappers = result.map(async (x) => {
//
if (!isNullOrUndefined(x.labels)) {
//
x.labels = {
...x.labels,
};
//
if (!isNullOrUndefined(x.labels.style)) {
//
x.labels.style = {
...x.labels.style,
colors: toArray(x.labels.style.colors).map((c) =>
this.normalizeColor(c),
),
};
}
}
//
if (!isNullOrUndefined(x.axisBorder)) {
//
x.axisBorder = {
...x.axisBorder,
color: this.normalizeColor(x.axisBorder.color),
};
}
//
if (!isNullOrUndefined(x.axisTicks)) {
//
x.axisTicks = {
...x.axisTicks,
color: this.normalizeColor(x.axisTicks.color),
};
}
//
if (!isNullOrUndefined(x.title)) {
//
x.title = {
...x.title,
text: (await this.normalizeText(x.title.text)) as string,
};
//
if (!isNullOrUndefined(x.title.style)) {
//
x.title.style = {
...x.title.style,
color: this.normalizeColor(x.title.style.color),
};
}
}
//
if (!isNullOrUndefined(x.crosshairs)) {
//
x.crosshairs = {
...x.crosshairs,
};
//
if (!isNullOrUndefined(x.crosshairs.stroke)) {
//
x.crosshairs.stroke = {
...x.crosshairs.stroke,
color: this.normalizeColor(x.crosshairs.stroke.color),
};
}
}
//
return x;
});
//
const items = await Promise.all(mappers);
//
result = [...result, ...items];
}
//
return result;
}
private async getPreparedAnnotations() {
//
let result: XChartAnnotations = undefined;
//
if (!isNullOrUndefined(this.annotations)) {
//
result = await this.getValueAsync(this.annotations);
//
// Try to Normalize Colors and Resources ...
//
// Texts ...
if (this.hasChild(result.texts)) {
//
const mappers = result.texts.map(async (x) => {
//
// Normalizing Text ...
x.text = (await this.normalizeText(x.text)) as string;
//
// Normalizing Colors ...
x.foreColor = this.normalizeColor(x.foreColor);
x.borderColor = this.normalizeColor(x.borderColor);
x.backgroundColor = this.normalizeColor(x.backgroundColor);
//
return x;
});
const items = await Promise.all(mappers);
result.texts = [...items];
}
//
// Y Axis ...
if (this.hasChild(result.yaxis)) {
//
const mappers = result.yaxis.map(async (x) => {
//
// Normalizing Text ...
x.label = await this.normalizeLabel(x.label);
//
// Normalizing Colors ...
x.fillColor = this.normalizeColor(x.fillColor);
x.borderColor = this.normalizeColor(x.borderColor);
//
return x;
});
const items = await Promise.all(mappers);
result.yaxis = [...items];
}
//
// X Axis ...
if (this.hasChild(result.xaxis)) {
//
const mappers = result.xaxis.map(async (x) => {
//
// Normalizing Text ...
x.label = await this.normalizeLabel(x.label);
//
// Normalizing Colors ...
x.fillColor = this.normalizeColor(x.fillColor);
x.borderColor = this.normalizeColor(x.borderColor);
//
return x;
});
const items = await Promise.all(mappers);
result.yaxis = [...items];
}
//
// Points ...
if (this.hasChild(result.points)) {
//
const mappers = result.points.map(async (x) => {
//
x.marker = this.normalizeMarker(x.marker);
x.label = await this.normalizeLabel(x.label);
x.tooltip = await this.normalizeTooltip(x.tooltip);
//
return x;
});
const items = await Promise.all(mappers);
result.points = [...items];
}
//
// Images ...
if (this.hasChild(result.images)) {
//
result.images = [...result.images];
}
}
//
return result;
}
//#endregion
//
//#region Normalizers ...
private async normalizeText(
v: XOneOrManyType<XResourceIdentifier>,
forceLocale: boolean = false,
) {
//
let result: XOneOrManyType<string> = undefined;
//
if (!isNullOrUndefined(v)) {
//
let items = toArray(v);
if (this.hasChild(items)) {
//
const mappers = items.map(async (x) => {
//
let r: string = await this.getResourceValueAsync(x);
//
if (forceLocale && !isNullOrEmptyString(r)) {
r = this.applyLocale(r);
}
//
return r;
});
//
var results = await Promise.all(mappers);
//
if (this.hasChild(results)) {
//
if (results.length == 1) {
result = results[0];
} else {
result = [...results];
}
}
}
}
//
return result;
}
private normalizeFill(v: XChartFill) {
//
if (!isNullOrUndefined(v)) {
//
v = {
...v,
colors: v?.colors.map((c) => this.normalizeColor(c)),
};
//
if (!isNullOrUndefined(v.gradient)) {
//
v.gradient = {
...v?.gradient,
gradientToColors: v?.gradient?.gradientToColors.map((c) =>
this.normalizeColor(c),
),
};
//
if (!isNullOrUndefined(v?.gradient?.colorStops)) {
//
const isMatrix =
Array.isArray(v?.gradient?.colorStops) &&
this.hasChild(v?.gradient?.colorStops) &&
Array.isArray(v?.gradient?.colorStops);
if (isMatrix) {
//
// Normalize Matrix ...
for (let c of v?.gradient?.colorStops as XChartColorStop[][]) {
//
c = [...c.map((x) => this.normalizeFillGradientColorStop(x))];
}
} else {
//
// Normalize Array ...
v.gradient.colorStops = [
...(v?.gradient?.colorStops as XChartColorStop[]).map((x) =>
this.normalizeFillGradientColorStop(x),
),
];
}
}
}
}
//
return v;
}
private normalizeColor(v: XColorIdentifier) {
//
let result = '';
//
if (!isNullOrUndefined(v)) {
//
const titleColorValue = getXColorValue(v);
//
result = titleColorValue || v;
}
//
return result;
}
private normalizeMarker(v: XChartMarkerAnnotations) {
//
let result: XChartMarkerAnnotations = undefined;
//
if (!isNullOrUndefined(v)) {
//
result = {
...v,
fillColor: this.normalizeColor(v.fillColor),
strokeColor: this.normalizeColor(v.strokeColor),
};
}
//
return result;
}
private async normalizeStyle(v: XChartAnnotationStyle) {
//
let result: XChartAnnotationStyle = undefined;
//
if (!isNullOrUndefined(v)) {
//
result = {
...v,
//
color: this.normalizeColor(v.color),
background: this.normalizeColor(v.background),
};
}
//
return result;
}
private async normalizeLabel(v: XChartAnnotationLabel) {
//
let result: XChartAnnotationLabel = undefined;
//
if (!isNullOrUndefined(v)) {
//
result = {
...v,
//
text: await this.normalizeText(v.text),
//
style: await this.normalizeStyle(v.style),
//
borderColor: this.normalizeColor(v.borderColor),
};
}
//
return result;
}
private async normalizeTooltip(v: XChartTooltipAnnotations) {
//
let result: XChartTooltipAnnotations = undefined;
//
if (!isNullOrUndefined(v)) {
//
result = {
...v,
//
text: await this.normalizeText(v.text),
};
}
//
return result;
}
private async normalizeChartTooltip(v: XChartTooltip) {
//
let result: XChartTooltip = undefined;
//
if (!isNullOrUndefined(v)) {
//
result = {
...v,
};
//
// Style ...
if (!isNullOrUndefined(v.style)) {
//
result.style = {
...v.style,
background: this.normalizeColor(v.style.background),
};
}
//
// Z ...
if (!isNullOrUndefined(v.z)) {
//
result.z = {
...v.z,
title: (await this.normalizeText(v.z.title)) as string,
};
}
//
// Marker ...
if (!isNullOrUndefined(v.marker)) {
//
result.marker = {
...v.marker,
fillColors: v.marker.fillColors?.map((fc) => this.normalizeColor(fc)),
};
}
}
//
return result;
}
private normalizeFillGradientColorStop(v: XChartColorStop) {
//
if (!isNullOrUndefined(v)) {
//
v = {
...v,
color: this.normalizeColor(v.color),
};
}
//
return v;
}
//#endregion
//#endregion //#endregion
} }
projects/x-framework-components/src/lib/x-chart/x-chart.typings.ts
+42 -89
View File
@@ -13,11 +13,11 @@ import {
import { import {
XStandardType, XStandardType,
isValueInEnum, isValueInEnum,
getXColorValue,
XOneOrManyType, XOneOrManyType,
XColorIdentifier, XColorIdentifier,
XResourceIdentifier, XResourceIdentifier,
XColorWithBrightness, XColorWithBrightness,
getXColorValue,
} from 'x-framework-core'; } from 'x-framework-core';
import { import {
XCardActionModel, XCardActionModel,
@@ -102,7 +102,21 @@ export type XChartXAxisAnnotations = XCahrtAxisBaseAnnotations & {
x2?: null | number | string; x2?: null | number | string;
}; };
export type XChartMarkerAnnotations = { export type XChartPointAnnotations = {
id?: number | string;
x?: number | string;
y?: null | number;
yAxisIndex?: number;
seriesIndex?: number;
/**
* Ink Layer (#7): make this point annotation draggable. Overrides
* `chart.ink.enabled`. Requires the `ink` feature.
*/
draggable?: boolean;
mouseEnter?: (annotation: XChartPointAnnotations, e: MouseEvent) => void;
mouseLeave?: (annotation: XChartPointAnnotations, e: MouseEvent) => void;
click?: (annotation: XChartPointAnnotations, e: MouseEvent) => void;
marker?: {
size?: number; size?: number;
fillColor?: string; fillColor?: string;
strokeColor?: string; strokeColor?: string;
@@ -111,9 +125,20 @@ export type XChartMarkerAnnotations = {
offsetX?: number; offsetX?: number;
offsetY?: number; offsetY?: number;
cssClass?: string; cssClass?: string;
}; };
label?: XChartAnnotationLabel;
export type XChartTooltipAnnotations = { image?: {
path?: string;
width?: number;
height?: number;
offsetX?: number;
offsetY?: number;
};
/**
* Show a hover tooltip over the annotation marker, like a regular data
* point. Useful for surfacing more detail than fits in the label.
*/
tooltip?: {
enabled?: boolean; enabled?: boolean;
/** /**
* Static tooltip content (HTML allowed; an array is joined with line * Static tooltip content (HTML allowed; an array is joined with line
@@ -135,36 +160,7 @@ export type XChartTooltipAnnotations = {
theme?: 'light' | 'dark'; theme?: 'light' | 'dark';
offsetX?: number; offsetX?: number;
offsetY?: number; offsetY?: number;
};
export type XChartPointAnnotations = {
id?: number | string;
x?: number | string;
y?: null | number;
yAxisIndex?: number;
seriesIndex?: number;
/**
* Ink Layer (#7): make this point annotation draggable. Overrides
* `chart.ink.enabled`. Requires the `ink` feature.
*/
draggable?: boolean;
mouseEnter?: (annotation: XChartPointAnnotations, e: MouseEvent) => void;
mouseLeave?: (annotation: XChartPointAnnotations, e: MouseEvent) => void;
click?: (annotation: XChartPointAnnotations, e: MouseEvent) => void;
marker?: XChartMarkerAnnotations;
label?: XChartAnnotationLabel;
image?: {
path?: string;
width?: number;
height?: number;
offsetX?: number;
offsetY?: number;
}; };
/**
* Show a hover tooltip over the annotation marker, like a regular data
* point. Useful for surfacing more detail than fits in the label.
*/
tooltip?: XChartTooltipAnnotations;
/** /**
* Render arbitrary SVG markup at the annotation's position. Deprecated in * Render arbitrary SVG markup at the annotation's position. Deprecated in
* favor of `image`/`marker`, but still supported. * favor of `image`/`marker`, but still supported.
@@ -2412,8 +2408,6 @@ export type XChartTooltip = {
}; };
}; };
export type XChartColorType = Array<string | ((opts: XChartColorFormatterOpts) => string)>;
export interface XChartOptions { export interface XChartOptions {
annotations?: XChartAnnotations; annotations?: XChartAnnotations;
chart?: XChart; chart?: XChart;
@@ -2422,7 +2416,7 @@ export interface XChartOptions {
* named) or a function returning one per-datapoint. The list cycles when * named) or a function returning one per-datapoint. The list cycles when
* there are more series than colors. * there are more series than colors.
*/ */
colors?: XChartColorType; colors?: Array<string | ((opts: XChartColorFormatterOpts) => string)>;
dataLabels?: XChartDataLabels; dataLabels?: XChartDataLabels;
/** Opt-in drilldown navigation. Requires `import 'apexcharts/features/drilldown'`. */ /** Opt-in drilldown navigation. Requires `import 'apexcharts/features/drilldown'`. */
drilldown?: XChartDrilldown; drilldown?: XChartDrilldown;
@@ -3232,7 +3226,7 @@ export enum XChartAction {
export type XChartActionIdentifier = XChartAction | string; export type XChartActionIdentifier = XChartAction | string;
export interface XChartActionModel extends XBaseActionModel<XChartActionIdentifier> { } export interface XChartActionModel extends XBaseActionModel<XChartActionIdentifier> {}
export type XChartSeriesType = XChartAxisChartSeries | XChartNonAxisChartSeries; export type XChartSeriesType = XChartAxisChartSeries | XChartNonAxisChartSeries;
@@ -3331,16 +3325,7 @@ export interface IXChartContainer extends TXChartContainer {
type: XStandardType<XChartTypeIdentifier>; type: XStandardType<XChartTypeIdentifier>;
// //
stroke: XStandardType<XChartStroke>; colors: Array<string | ((opts: XChartColorFormatterOpts) => string)>;
colors: XStandardType<XChartColorType>;
//
xAxis: XStandardType<XChartXAxis>;
yAxis: XStandardType<XOneOrManyType<XChartYAxis>>;
//
tooltip: XStandardType<XChartTooltip>;
annotations: XStandardType<XChartAnnotations>;
// //
title: XStandardType<XResourceIdentifier>; title: XStandardType<XResourceIdentifier>;
@@ -3479,7 +3464,8 @@ export interface IXChartContainer extends TXChartContainer {
}) })
export class XChartContainer export class XChartContainer
extends XBaseContainer extends XBaseContainer
implements Readonly<IXChartContainer> { implements Readonly<IXChartContainer>
{
// //
readonly actionProvider = new Subject<XChartActionModel>(); readonly actionProvider = new Subject<XChartActionModel>();
readonly cssClass: XStandardType<XOneOrManyType<string>>; readonly cssClass: XStandardType<XOneOrManyType<string>>;
@@ -3489,22 +3475,12 @@ export class XChartContainer
readonly options: XStandardType<XChartOptions>; readonly options: XStandardType<XChartOptions>;
readonly zoomStep: XStandardType<number> = 0.125; readonly zoomStep: XStandardType<number> = 0.125;
readonly series: XStandardType<XChartSeriesType>; readonly series: XStandardType<XChartSeriesType>;
//
readonly stroke: XStandardType<XChartStroke> = {
width: 3,
curve: 'smooth'
};
readonly type: XStandardType<XChartTypeIdentifier> = XChartType.Line; readonly type: XStandardType<XChartTypeIdentifier> = XChartType.Line;
readonly colors: XStandardType<XChartColorType> = [getXColorValue(XColorWithBrightness.PrimaryShade)];
// //
readonly xAxis: XStandardType<XChartXAxis>; readonly colors: Array<
readonly yAxis: XStandardType<XOneOrManyType<XChartYAxis>>; string | ((opts: XChartColorFormatterOpts) => string)
> = [getXColorValue(XColorWithBrightness.PrimaryShade)];
//
readonly tooltip: XStandardType<XChartTooltip>;
readonly annotations: XStandardType<XChartAnnotations>;
// //
readonly title: XStandardType<XResourceIdentifier>; readonly title: XStandardType<XResourceIdentifier>;
@@ -3704,7 +3680,8 @@ export class XChartContainer
@Component({ template: `` }) @Component({ template: `` })
export abstract class XChartContainerComponent export abstract class XChartContainerComponent
extends XBaseContainerComponent extends XBaseContainerComponent
implements IXChartContainer { implements IXChartContainer
{
// //
//#region Props ... //#region Props ...
@Input() @Input()
@@ -3731,22 +3708,7 @@ export abstract class XChartContainerComponent
zoomStep: XStandardType<number> = this.propertyProvider.zoomStep; zoomStep: XStandardType<number> = this.propertyProvider.zoomStep;
@Input() @Input()
xAxis: XStandardType<XChartXAxis> = this.propertyProvider.xAxis; colors: Array<string | ((opts: XChartColorFormatterOpts) => string)> = this.propertyProvider.colors;
@Input()
yAxis: XStandardType<XOneOrManyType<XChartYAxis>> = this.propertyProvider.yAxis;
@Input()
colors: XStandardType<XChartColorType> = this.propertyProvider.colors;
@Input()
stroke: XStandardType<XChartStroke> = this.propertyProvider.stroke;
@Input()
tooltip: XStandardType<XChartTooltip> = this.propertyProvider.tooltip;
@Input()
annotations: XStandardType<XChartAnnotations> = this.propertyProvider.annotations;
@Input() @Input()
defaultActionBarItemColor: XStandardType<XColorIdentifier> = defaultActionBarItemColor: XStandardType<XColorIdentifier> =
@@ -4085,16 +4047,7 @@ export abstract class XChartContainerComponent
zoomStep: this.getValue(container ? container.zoomStep : this.zoomStep), zoomStep: this.getValue(container ? container.zoomStep : this.zoomStep),
// //
stroke: this.getValue(container ? container.stroke : this.stroke), colors: this.getValue(container ? container.colors : this.colors),
colors: this.getArrayValue(container ? container.colors : this.colors),
//
xAxis: this.getValue(container ? container.xAxis : this.xAxis),
yAxis: this.getValue(container ? container.yAxis : this.yAxis),
//
tooltip: this.getValue(container ? container.tooltip : this.tooltip),
annotations: this.getValue(container ? container.annotations : this.annotations),
// //
title: this.getValue(container ? container.title : this.title), title: this.getValue(container ? container.title : this.title),