last ...

projects/x-framework-components/src/lib/x-chart/x-chart.typings.ts

@@ -13,6 +13,7 @@ import {
 import {
   XStandardType,
   isValueInEnum,
+  getXColorValue,
   XOneOrManyType,
   XColorIdentifier,
   XResourceIdentifier,
@@ -101,21 +102,7 @@ export type XChartXAxisAnnotations = XCahrtAxisBaseAnnotations & {
   x2?: null | number | string;
 };
 
-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?: {
+export type XChartMarkerAnnotations = {
   size?: number;
   fillColor?: string;
   strokeColor?: string;
@@ -125,19 +112,8 @@ export type XChartPointAnnotations = {
   offsetY?: number;
   cssClass?: string;
 };
-  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?: {
+
+export type XChartTooltipAnnotations = {
   enabled?: boolean;
   /**
    * Static tooltip content (HTML allowed; an array is joined with line
@@ -160,6 +136,35 @@ export type XChartPointAnnotations = {
   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.
@@ -2407,6 +2412,8 @@ export type XChartTooltip = {
   };
 };
 
+export type XChartColorType = Array<string | ((opts: XChartColorFormatterOpts) => string)>;
+
 export interface XChartOptions {
   annotations?: XChartAnnotations;
   chart?: XChart;
@@ -2415,7 +2422,7 @@ export interface XChartOptions {
    * named) or a function returning one per-datapoint. The list cycles when
    * there are more series than colors.
    */
-  colors?: Array<string | ((opts: XChartColorFormatterOpts) => string)>;
+  colors?: XChartColorType;
   dataLabels?: XChartDataLabels;
   /** Opt-in drilldown navigation. Requires `import 'apexcharts/features/drilldown'`. */
   drilldown?: XChartDrilldown;
@@ -3323,6 +3330,18 @@ export interface IXChartContainer extends TXChartContainer {
   series: XStandardType<XChartSeriesType>;
   type: XStandardType<XChartTypeIdentifier>;
 
+  //
+  stroke: XStandardType<XChartStroke>;
+  colors: XStandardType<XChartColorType>;
+
+  //
+  xAxis: XStandardType<XChartXAxis>;
+  yAxis: XStandardType<XOneOrManyType<XChartYAxis>>;
+
+  //
+  tooltip: XStandardType<XChartTooltip>;
+  annotations: XStandardType<XChartAnnotations>;
+
   //
   title: XStandardType<XResourceIdentifier>;
   titleAlign: XStandardType<XChartTextAlignIdentifier>;
@@ -3460,8 +3479,7 @@ 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>>;
@@ -3471,7 +3489,22 @@ 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 title: XStandardType<XResourceIdentifier>;
@@ -3671,8 +3704,7 @@ export class XChartContainer
 @Component({ template: `` })
 export abstract class XChartContainerComponent
   extends XBaseContainerComponent
-  implements IXChartContainer
-{
+  implements IXChartContainer {
   //
   //#region Props ...
   @Input()
@@ -3698,6 +3730,24 @@ export abstract class XChartContainerComponent
   @Input()
   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;
+
   @Input()
   defaultActionBarItemColor: XStandardType<XColorIdentifier> =
     this.propertyProvider.defaultActionBarItemColor;
@@ -4030,10 +4080,22 @@ export abstract class XChartContainerComponent
 
       //
       type: this.getValue(container ? container.type : this.type),
-      options: this.getValue(container ? container.options : this.options),
       series: this.getValue(container ? container.series : this.series),
+      options: this.getValue(container ? container.options : this.options),
       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),
+
       //
       title: this.getValue(container ? container.title : this.title),
       titleAlign: this.getValue(