Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 saherelm
|
752efe3e3c |
@@ -6,48 +6,32 @@ import {
|
||||
} from '@angular/core';
|
||||
import {
|
||||
nameof,
|
||||
toArray,
|
||||
isString,
|
||||
XMimeType,
|
||||
downloadFile,
|
||||
generateUuid,
|
||||
getXColorValue,
|
||||
XOneOrManyType,
|
||||
XColorIdentifier,
|
||||
downloadFileByUrl,
|
||||
isNullOrUndefined,
|
||||
XResourceIdentifier,
|
||||
isNullOrEmptyString,
|
||||
XColorWithBrightness,
|
||||
downloadArrayBufferedFile,
|
||||
} from 'x-framework-core';
|
||||
import {
|
||||
XChartFill,
|
||||
isChartType,
|
||||
XChartXAxis,
|
||||
XChartYAxis,
|
||||
XChartStroke,
|
||||
XChartAction,
|
||||
XChartTooltip,
|
||||
XChartOptions,
|
||||
XChartColorStop,
|
||||
XChartColorType,
|
||||
XChartEventOpts,
|
||||
XChartTextAlign,
|
||||
XChartSeriesType,
|
||||
isChartTextAlign,
|
||||
XChartAnnotations,
|
||||
XChartActionBarItem,
|
||||
XChartDrilldownEvent,
|
||||
XChartAnnotationLabel,
|
||||
XChartAnnotationStyle,
|
||||
XChartMarkerAnnotations,
|
||||
XChartTooltipAnnotations,
|
||||
XChartContainerComponent,
|
||||
XChartStoryboardBeatInfo,
|
||||
XChartColorFormatterOpts,
|
||||
} from './x-chart.typings';
|
||||
import ApexCharts from 'apexcharts';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { Subject, Subscription } from 'rxjs';
|
||||
import {
|
||||
XActionBarItem,
|
||||
XActionBarItemSlot,
|
||||
@@ -192,32 +176,6 @@ export class XChartComponent extends XChartContainerComponent {
|
||||
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 ...
|
||||
isChanged = changeKeys.includes(nameof<XChartComponent>('zoomStep'));
|
||||
@@ -232,58 +190,6 @@ export class XChartComponent extends XChartContainerComponent {
|
||||
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 ...
|
||||
isChanged = changeKeys.includes(nameof<XChartComponent>('title'));
|
||||
@@ -820,20 +726,12 @@ export class XChartComponent extends XChartContainerComponent {
|
||||
const chartId = await this.getValueAsync(this.uuid);
|
||||
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 xAxis = await this.getPreparedXAxis(cOptions?.xaxis);
|
||||
const yAxis = await this.getPreparedYAxis(cOptions?.yaxis);
|
||||
|
||||
//
|
||||
const tooltip = await this.getPreparedTooltip();
|
||||
const annotations = await this.getPreparedAnnotations();
|
||||
const colors: Array<string | ((opts: XChartColorFormatterOpts) => string)> =
|
||||
[getXColorValue(XColorWithBrightness.PrimaryShade)];
|
||||
|
||||
//
|
||||
const title = await this.getResourceValueAsync(this.title);
|
||||
@@ -868,6 +766,9 @@ export class XChartComponent extends XChartContainerComponent {
|
||||
//
|
||||
const primaryColorValue = getXColorValue(XColorWithBrightness.Primary);
|
||||
|
||||
//
|
||||
console.log('cOptions: ', cOptions);
|
||||
|
||||
//
|
||||
// Normalize Directional Properties ....
|
||||
if (this.managerService.uiDirection == 'ltr') {
|
||||
@@ -908,14 +809,6 @@ export class XChartComponent extends XChartContainerComponent {
|
||||
this.CHART_OPTIONS = {
|
||||
...cOptions,
|
||||
series: series,
|
||||
stroke: {
|
||||
...cOptions?.stroke,
|
||||
...stroke
|
||||
},
|
||||
annotations: {
|
||||
...cOptions?.annotations,
|
||||
...annotations,
|
||||
},
|
||||
title: {
|
||||
...cOptions?.title,
|
||||
text: title,
|
||||
@@ -1488,17 +1381,10 @@ export class XChartComponent extends XChartContainerComponent {
|
||||
palette: cOptions?.theme?.palette || 'palette1',
|
||||
},
|
||||
colors: colors,
|
||||
xaxis: {
|
||||
...xAxis,
|
||||
},
|
||||
yaxis: [...yAxis],
|
||||
grid: {
|
||||
...cOptions?.grid,
|
||||
borderColor: gridColorValue,
|
||||
},
|
||||
tooltip: {
|
||||
...tooltip,
|
||||
},
|
||||
dataLabels: {
|
||||
...cOptions?.dataLabels,
|
||||
},
|
||||
@@ -2365,693 +2251,5 @@ export class XChartComponent extends XChartContainerComponent {
|
||||
this.CARD_ACTION_PROVIDER_SUBSCRIPTION.unsubscribe();
|
||||
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
|
||||
}
|
||||
|
||||
@@ -13,11 +13,11 @@ import {
|
||||
import {
|
||||
XStandardType,
|
||||
isValueInEnum,
|
||||
getXColorValue,
|
||||
XOneOrManyType,
|
||||
XColorIdentifier,
|
||||
XResourceIdentifier,
|
||||
XColorWithBrightness,
|
||||
getXColorValue,
|
||||
} from 'x-framework-core';
|
||||
import {
|
||||
XCardActionModel,
|
||||
@@ -102,7 +102,21 @@ export type XChartXAxisAnnotations = XCahrtAxisBaseAnnotations & {
|
||||
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;
|
||||
fillColor?: string;
|
||||
strokeColor?: string;
|
||||
@@ -112,8 +126,19 @@ export type XChartMarkerAnnotations = {
|
||||
offsetY?: number;
|
||||
cssClass?: string;
|
||||
};
|
||||
|
||||
export type XChartTooltipAnnotations = {
|
||||
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?: {
|
||||
enabled?: boolean;
|
||||
/**
|
||||
* Static tooltip content (HTML allowed; an array is joined with line
|
||||
@@ -136,35 +161,6 @@ export type XChartTooltipAnnotations = {
|
||||
offsetX?: 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
|
||||
* 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 {
|
||||
annotations?: XChartAnnotations;
|
||||
chart?: XChart;
|
||||
@@ -2422,7 +2416,7 @@ export interface XChartOptions {
|
||||
* named) or a function returning one per-datapoint. The list cycles when
|
||||
* there are more series than colors.
|
||||
*/
|
||||
colors?: XChartColorType;
|
||||
colors?: Array<string | ((opts: XChartColorFormatterOpts) => string)>;
|
||||
dataLabels?: XChartDataLabels;
|
||||
/** Opt-in drilldown navigation. Requires `import 'apexcharts/features/drilldown'`. */
|
||||
drilldown?: XChartDrilldown;
|
||||
@@ -3331,16 +3325,7 @@ export interface IXChartContainer extends TXChartContainer {
|
||||
type: XStandardType<XChartTypeIdentifier>;
|
||||
|
||||
//
|
||||
stroke: XStandardType<XChartStroke>;
|
||||
colors: XStandardType<XChartColorType>;
|
||||
|
||||
//
|
||||
xAxis: XStandardType<XChartXAxis>;
|
||||
yAxis: XStandardType<XOneOrManyType<XChartYAxis>>;
|
||||
|
||||
//
|
||||
tooltip: XStandardType<XChartTooltip>;
|
||||
annotations: XStandardType<XChartAnnotations>;
|
||||
colors: Array<string | ((opts: XChartColorFormatterOpts) => string)>;
|
||||
|
||||
//
|
||||
title: XStandardType<XResourceIdentifier>;
|
||||
@@ -3479,7 +3464,8 @@ export interface IXChartContainer extends TXChartContainer {
|
||||
})
|
||||
export class XChartContainer
|
||||
extends XBaseContainer
|
||||
implements Readonly<IXChartContainer> {
|
||||
implements Readonly<IXChartContainer>
|
||||
{
|
||||
//
|
||||
readonly actionProvider = new Subject<XChartActionModel>();
|
||||
readonly cssClass: XStandardType<XOneOrManyType<string>>;
|
||||
@@ -3489,22 +3475,12 @@ export class XChartContainer
|
||||
readonly options: XStandardType<XChartOptions>;
|
||||
readonly zoomStep: XStandardType<number> = 0.125;
|
||||
readonly series: XStandardType<XChartSeriesType>;
|
||||
|
||||
//
|
||||
readonly stroke: XStandardType<XChartStroke> = {
|
||||
width: 3,
|
||||
curve: 'smooth'
|
||||
};
|
||||
readonly type: XStandardType<XChartTypeIdentifier> = XChartType.Line;
|
||||
readonly colors: XStandardType<XChartColorType> = [getXColorValue(XColorWithBrightness.PrimaryShade)];
|
||||
|
||||
//
|
||||
readonly xAxis: XStandardType<XChartXAxis>;
|
||||
readonly yAxis: XStandardType<XOneOrManyType<XChartYAxis>>;
|
||||
|
||||
//
|
||||
readonly tooltip: XStandardType<XChartTooltip>;
|
||||
readonly annotations: XStandardType<XChartAnnotations>;
|
||||
readonly colors: Array<
|
||||
string | ((opts: XChartColorFormatterOpts) => string)
|
||||
> = [getXColorValue(XColorWithBrightness.PrimaryShade)];
|
||||
|
||||
//
|
||||
readonly title: XStandardType<XResourceIdentifier>;
|
||||
@@ -3704,7 +3680,8 @@ export class XChartContainer
|
||||
@Component({ template: `` })
|
||||
export abstract class XChartContainerComponent
|
||||
extends XBaseContainerComponent
|
||||
implements IXChartContainer {
|
||||
implements IXChartContainer
|
||||
{
|
||||
//
|
||||
//#region Props ...
|
||||
@Input()
|
||||
@@ -3731,22 +3708,7 @@ export abstract class XChartContainerComponent
|
||||
zoomStep: XStandardType<number> = this.propertyProvider.zoomStep;
|
||||
|
||||
@Input()
|
||||
xAxis: XStandardType<XChartXAxis> = this.propertyProvider.xAxis;
|
||||
|
||||
@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;
|
||||
colors: Array<string | ((opts: XChartColorFormatterOpts) => string)> = this.propertyProvider.colors;
|
||||
|
||||
@Input()
|
||||
defaultActionBarItemColor: XStandardType<XColorIdentifier> =
|
||||
@@ -4085,16 +4047,7 @@ export abstract class XChartContainerComponent
|
||||
zoomStep: this.getValue(container ? container.zoomStep : this.zoomStep),
|
||||
|
||||
//
|
||||
stroke: this.getValue(container ? container.stroke : this.stroke),
|
||||
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),
|
||||
colors: this.getValue(container ? container.colors : this.colors),
|
||||
|
||||
//
|
||||
title: this.getValue(container ? container.title : this.title),
|
||||
|
||||
Reference in New Issue
Block a user