apply all x-chart component works ...

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

@@ -3225,7 +3225,7 @@ export enum XChartAction {
 
 export type XChartActionIdentifier = XChartAction | string;
 
-export interface XChartActionModel extends XBaseActionModel<XChartActionIdentifier> { }
+export interface XChartActionModel extends XBaseActionModel<XChartActionIdentifier> {}
 
 export type XChartSeriesType = XChartAxisChartSeries | XChartNonAxisChartSeries;
 
@@ -3286,6 +3286,28 @@ export interface XChartAvailableActionBarItem {
   popoverPresentOptions?: XPopoverPresentOptions;
 }
 
+export interface XChartMouseEvent {
+  e: MouseEvent;
+  options?: XChartEventOpts;
+}
+
+export interface XChartKeyboardEvent {
+  e: KeyboardEvent;
+  options?: XChartEventOpts;
+}
+
+export enum XChartTextAlign {
+  Start = 'start',
+  Center = 'center',
+  End = 'end',
+}
+
+export type XChartTextAlignIdentifier = XChartTextAlign | string;
+
+export function isChartTextAlign(value: XChartTextAlignIdentifier) {
+  return isValueInEnum(value, Object.assign({}, XChartTextAlign));
+}
+
 type TXChartContainer = IXComponentCardContainer &
   IXComponentActionBarContainer;
 export interface IXChartContainer extends TXChartContainer {
@@ -3296,12 +3318,27 @@ export interface IXChartContainer extends TXChartContainer {
 
   //
   // Chart Props ...
-  autoUpdate: XStandardType<boolean>;
+  zoomStep: XStandardType<number>;
   options: XStandardType<XChartOptions>;
   series: XStandardType<XChartSeriesType>;
-  zoomStep: XStandardType<number>;
   type: XStandardType<XChartTypeIdentifier>;
 
+  //
+  title: XStandardType<XResourceIdentifier>;
+  titleAlign: XStandardType<XChartTextAlignIdentifier>;
+
+  //
+  subTitle: XStandardType<XResourceIdentifier>;
+  subTitleAlign: XStandardType<XChartTextAlignIdentifier>;
+
+  //
+  // Chart Colors ...
+  gridColor: XStandardType<XColorIdentifier>;
+  titleColor: XStandardType<XColorIdentifier>;
+  subTitleColor: XStandardType<XColorIdentifier>;
+  foregroundColor: XStandardType<XColorIdentifier>;
+  backgroundColor: XStandardType<XColorIdentifier>;
+
   //
   //#region ActionBar ...
   defaultActionBarItemColor: XStandardType<XColorIdentifier>;
@@ -3311,10 +3348,111 @@ export interface IXChartContainer extends TXChartContainer {
   //#endregion
 
   //
-  // Events ...
+  //#region Events ...
-  chartRendered: EventEmitter<void>;
+  click: EventEmitter<XChartMouseEvent>;
-  dataPointSelected: EventEmitter<any>;
+  keyUp: EventEmitter<XChartKeyboardEvent>;
-  zoomed: EventEmitter<any>;
+  zoomed: EventEmitter<{
+    xaxis: { min: number; max: number };
+    yaxis?: { min: number; max: number }[];
+  }>;
+  keyDown: EventEmitter<XChartKeyboardEvent>;
+  drillUp: EventEmitter<{
+    info: XChartDrilldownEvent;
+    options?: XChartEventOpts;
+  }>;
+  mounted: EventEmitter<XChartEventOpts>;
+  updated: EventEmitter<XChartEventOpts>;
+  measured: EventEmitter<{
+    from: { x: any; y: any };
+    to: { x: any; y: any };
+    dx: number;
+    dy: number;
+    percentChange: number;
+    slope: number;
+  }>;
+  scrolled: EventEmitter<{ xaxis: { min: number; max: number } }>;
+  mouseMove: EventEmitter<XChartMouseEvent>;
+  selection: EventEmitter<{
+    xaxis?: { min: number; max: number };
+    yaxis?: { min: number; max: number };
+  }>;
+  beatChange: EventEmitter<XChartStoryboardBeatInfo>;
+  mouseLeave: EventEmitter<XChartMouseEvent>;
+  beforeZoom: EventEmitter<{ xaxis: { min: number; max: number } }>;
+  legendClick: EventEmitter<{
+    seriesIndex?: number;
+    options?: XChartEventOpts;
+  }>;
+  markerClick: EventEmitter<XChartMouseEvent>;
+  crossFilter: EventEmitter<{
+    xaxis: { min: number; max: number };
+    sourceChartID?: string;
+  }>;
+  beforeMount: EventEmitter<XChartEventOpts>;
+  drillDownEnd: EventEmitter<{
+    info: XChartDrilldownEvent;
+    options?: XChartEventOpts;
+  }>;
+  animationEnd: EventEmitter<XChartEventOpts>;
+  filterChange: EventEmitter<{
+    filters: Record<string, any>;
+    filteredCount: number;
+    total: number;
+    sourceChartID?: string;
+    key?: any;
+  }>;
+  brushScrolled: EventEmitter<{
+    xaxis: { min: number; max: number };
+    yaxis?: { min: number; max: number }[];
+  }>;
+  drillDownStart: EventEmitter<{
+    info: XChartDrilldownEvent;
+    options?: XChartEventOpts;
+  }>;
+  drillDownError: EventEmitter<{
+    info: { id: string | number | null; error: any };
+    options?: XChartEventOpts;
+  }>;
+  xAxisLabelClick: EventEmitter<XChartMouseEvent>;
+  beforeResetZoom: EventEmitter<XChartEventOpts>;
+  annotationEdited: EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    text: string;
+  }>;
+  annotationStyled: EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    label?: any;
+    marker?: any;
+  }>;
+  annotationDragged: EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    x: any;
+    y: any;
+    x2?: any;
+    y2?: any;
+  }>;
+  annotationCreated: EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    x?: any;
+    y?: any;
+  }>;
+  annotationDeleted: EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+  }>;
+  dataPointSelection: EventEmitter<XChartMouseEvent>;
+  dataPointMouseEnter: EventEmitter<XChartMouseEvent>;
+  dataPointMouseLeave: EventEmitter<XChartMouseEvent>;
+  //#endregion
 }
 
 @Injectable({
@@ -3322,18 +3460,42 @@ 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>>;
 
   //
+  // Chart Props ...
   readonly options: XStandardType<XChartOptions>;
   readonly zoomStep: XStandardType<number> = 0.125;
   readonly series: XStandardType<XChartSeriesType>;
-  readonly autoUpdate: XStandardType<boolean> = true;
   readonly type: XStandardType<XChartTypeIdentifier> = XChartType.Line;
 
+  //
+  readonly title: XStandardType<XResourceIdentifier>;
+  readonly titleAlign: XStandardType<XChartTextAlignIdentifier> =
+    XChartTextAlign.Center;
+
+  //
+  readonly subTitle: XStandardType<XResourceIdentifier>;
+  readonly subTitleAlign: XStandardType<XChartTextAlignIdentifier> =
+    XChartTextAlign.Center;
+
+  //
+  // Chart Colors ...
+  readonly gridColor: XStandardType<XColorIdentifier> =
+    XColorWithBrightness.Medium;
+  readonly titleColor: XStandardType<XColorIdentifier> =
+    XColorWithBrightness.Dark;
+  readonly subTitleColor: XStandardType<XColorIdentifier> =
+    XColorWithBrightness.Dark;
+  readonly foregroundColor: XStandardType<XColorIdentifier> =
+    XColorWithBrightness.Dark;
+  readonly backgroundColor: XStandardType<XColorIdentifier> =
+    XColorWithBrightness.Light;
+
   //
   readonly availableActionBarItems: XStandardType<
     XOneOrManyType<XChartAvailableActionBarItem>
@@ -3342,9 +3504,115 @@ export class XChartContainer
     XColorWithBrightness.Dark;
 
   //
-  readonly zoomed = new EventEmitter<any>();
+  //#region Events ...
-  readonly chartRendered = new EventEmitter<void>();
+  readonly click = new EventEmitter<XChartMouseEvent>();
-  readonly dataPointSelected = new EventEmitter<any>();
+  readonly keyUp = new EventEmitter<XChartKeyboardEvent>();
+  readonly zoomed = new EventEmitter<{
+    xaxis: { min: number; max: number };
+    yaxis?: { min: number; max: number }[];
+  }>();
+  readonly keyDown = new EventEmitter<XChartKeyboardEvent>();
+  readonly drillUp = new EventEmitter<{
+    info: XChartDrilldownEvent;
+    options?: XChartEventOpts;
+  }>();
+  readonly mounted = new EventEmitter<XChartEventOpts>();
+  readonly updated = new EventEmitter<XChartEventOpts>();
+  readonly measured = new EventEmitter<{
+    from: { x: any; y: any };
+    to: { x: any; y: any };
+    dx: number;
+    dy: number;
+    percentChange: number;
+    slope: number;
+  }>();
+  readonly scrolled = new EventEmitter<{
+    xaxis: { min: number; max: number };
+  }>();
+  readonly mouseMove = new EventEmitter<XChartMouseEvent>();
+  readonly selection = new EventEmitter<{
+    xaxis?: { min: number; max: number };
+    yaxis?: { min: number; max: number };
+  }>();
+  readonly beatChange = new EventEmitter<XChartStoryboardBeatInfo>();
+  readonly mouseLeave = new EventEmitter<XChartMouseEvent>();
+  readonly beforeZoom = new EventEmitter<{
+    xaxis: { min: number; max: number };
+  }>();
+  readonly legendClick = new EventEmitter<{
+    seriesIndex?: number;
+    options?: XChartEventOpts;
+  }>();
+  readonly markerClick = new EventEmitter<XChartMouseEvent>();
+  readonly crossFilter = new EventEmitter<{
+    xaxis: { min: number; max: number };
+    sourceChartID?: string;
+  }>();
+  readonly beforeMount = new EventEmitter<XChartEventOpts>();
+  readonly drillDownEnd = new EventEmitter<{
+    info: XChartDrilldownEvent;
+    options?: XChartEventOpts;
+  }>();
+  readonly animationEnd = new EventEmitter<XChartEventOpts>();
+  readonly filterChange = new EventEmitter<{
+    filters: Record<string, any>;
+    filteredCount: number;
+    total: number;
+    sourceChartID?: string;
+    key?: any;
+  }>();
+  readonly brushScrolled = new EventEmitter<{
+    xaxis: { min: number; max: number };
+    yaxis?: { min: number; max: number }[];
+  }>();
+  readonly drillDownStart = new EventEmitter<{
+    info: XChartDrilldownEvent;
+    options?: XChartEventOpts;
+  }>();
+  readonly drillDownError = new EventEmitter<{
+    info: { id: string | number | null; error: any };
+    options?: XChartEventOpts;
+  }>();
+  readonly xAxisLabelClick = new EventEmitter<XChartMouseEvent>();
+  readonly beforeResetZoom = new EventEmitter<XChartEventOpts>();
+  readonly annotationEdited = new EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    text: string;
+  }>();
+  readonly annotationStyled = new EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    label?: any;
+    marker?: any;
+  }>();
+  readonly annotationDragged = new EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    x: any;
+    y: any;
+    x2?: any;
+    y2?: any;
+  }>();
+  readonly annotationCreated = new EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    x?: any;
+    y?: any;
+  }>();
+  readonly annotationDeleted = new EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+  }>();
+  readonly dataPointSelection = new EventEmitter<XChartMouseEvent>();
+  readonly dataPointMouseEnter = new EventEmitter<XChartMouseEvent>();
+  readonly dataPointMouseLeave = new EventEmitter<XChartMouseEvent>();
+  //#endregion
 
   //
   //#region ComponentActionBar Props ...
@@ -3403,7 +3671,8 @@ export class XChartContainer
 @Component({ template: `` })
 export abstract class XChartContainerComponent
   extends XBaseContainerComponent
-  implements IXChartContainer {
+  implements IXChartContainer
+{
   //
   //#region Props ...
   @Input()
@@ -3429,9 +3698,6 @@ export abstract class XChartContainerComponent
   @Input()
   zoomStep: XStandardType<number> = this.propertyProvider.zoomStep;
 
-  @Input()
-  autoUpdate: XStandardType<boolean> = this.propertyProvider.autoUpdate;
-
   @Input()
   defaultActionBarItemColor: XStandardType<XColorIdentifier> =
     this.propertyProvider.defaultActionBarItemColor;
@@ -3442,15 +3708,219 @@ export abstract class XChartContainerComponent
   > = this.propertyProvider.availableActionBarItems;
 
   //
-  // Events ...
+
+  @Input()
+  title: XStandardType<XResourceIdentifier> = this.propertyProvider.title;
+
+  @Input()
+  titleAlign: XStandardType<XChartTextAlignIdentifier> =
+    this.propertyProvider.titleAlign;
+
+  @Input()
+  subTitle: XStandardType<XResourceIdentifier> = this.propertyProvider.subTitle;
+
+  @Input()
+  subTitleAlign: XStandardType<XChartTextAlignIdentifier> =
+    this.propertyProvider.subTitleAlign;
+
+  //
+
+  @Input()
+  gridColor: XStandardType<XColorIdentifier> = this.propertyProvider.gridColor;
+
+  @Input()
+  titleColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.titleColor;
+
+  @Input()
+  subTitleColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.subTitleColor;
+
+  @Input()
+  foregroundColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.foregroundColor;
+
+  @Input()
+  backgroundColor: XStandardType<XColorIdentifier> =
+    this.propertyProvider.backgroundColor;
+
+  //
+  //#region Events ...
   @Output()
-  chartRendered: EventEmitter<void> = new EventEmitter();
+  click = new EventEmitter<XChartMouseEvent>();
 
   @Output()
-  dataPointSelected: EventEmitter<any> = new EventEmitter();
+  keyUp = new EventEmitter<XChartKeyboardEvent>();
 
   @Output()
-  zoomed: EventEmitter<any> = new EventEmitter();
+  zoomed = new EventEmitter<{
+    xaxis: { min: number; max: number };
+    yaxis?: { min: number; max: number }[];
+  }>();
+
+  @Output()
+  keyDown = new EventEmitter<XChartKeyboardEvent>();
+
+  @Output()
+  drillUp = new EventEmitter<{
+    info: XChartDrilldownEvent;
+    options?: XChartEventOpts;
+  }>();
+
+  @Output()
+  mounted = new EventEmitter<XChartEventOpts>();
+
+  @Output()
+  updated = new EventEmitter<XChartEventOpts>();
+
+  @Output()
+  measured = new EventEmitter<{
+    from: { x: any; y: any };
+    to: { x: any; y: any };
+    dx: number;
+    dy: number;
+    percentChange: number;
+    slope: number;
+  }>();
+
+  @Output()
+  scrolled = new EventEmitter<{
+    xaxis: { min: number; max: number };
+  }>();
+
+  @Output()
+  mouseMove = new EventEmitter<XChartMouseEvent>();
+
+  @Output()
+  selection = new EventEmitter<{
+    xaxis?: { min: number; max: number };
+    yaxis?: { min: number; max: number };
+  }>();
+
+  @Output()
+  beatChange = new EventEmitter<XChartStoryboardBeatInfo>();
+
+  @Output()
+  mouseLeave = new EventEmitter<XChartMouseEvent>();
+
+  @Output()
+  beforeZoom = new EventEmitter<{
+    xaxis: { min: number; max: number };
+  }>();
+
+  @Output()
+  legendClick = new EventEmitter<{
+    seriesIndex?: number;
+    options?: XChartEventOpts;
+  }>();
+
+  @Output()
+  markerClick = new EventEmitter<XChartMouseEvent>();
+
+  @Output()
+  crossFilter = new EventEmitter<{
+    xaxis: { min: number; max: number };
+    sourceChartID?: string;
+  }>();
+
+  @Output()
+  beforeMount = new EventEmitter<XChartEventOpts>();
+
+  @Output()
+  drillDownEnd = new EventEmitter<{
+    info: XChartDrilldownEvent;
+    options?: XChartEventOpts;
+  }>();
+
+  @Output()
+  animationEnd = new EventEmitter<XChartEventOpts>();
+
+  @Output()
+  filterChange = new EventEmitter<{
+    filters: Record<string, any>;
+    filteredCount: number;
+    total: number;
+    sourceChartID?: string;
+    key?: any;
+  }>();
+
+  @Output()
+  brushScrolled = new EventEmitter<{
+    xaxis: { min: number; max: number };
+    yaxis?: { min: number; max: number }[];
+  }>();
+
+  @Output()
+  drillDownStart = new EventEmitter<{
+    info: XChartDrilldownEvent;
+    options?: XChartEventOpts;
+  }>();
+
+  @Output()
+  drillDownError = new EventEmitter<{
+    info: { id: string | number | null; error: any };
+    options?: XChartEventOpts;
+  }>();
+
+  @Output()
+  xAxisLabelClick = new EventEmitter<XChartMouseEvent>();
+
+  @Output()
+  beforeResetZoom = new EventEmitter<XChartEventOpts>();
+
+  @Output()
+  annotationEdited = new EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    text: string;
+  }>();
+
+  @Output()
+  annotationStyled = new EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    label?: any;
+    marker?: any;
+  }>();
+
+  @Output()
+  annotationDragged = new EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    x: any;
+    y: any;
+    x2?: any;
+    y2?: any;
+  }>();
+
+  @Output()
+  annotationCreated = new EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+    x?: any;
+    y?: any;
+  }>();
+
+  @Output()
+  annotationDeleted = new EventEmitter<{
+    type?: 'point' | 'xaxis' | 'yaxis';
+    id?: string;
+    index: number;
+  }>();
+
+  @Output()
+  dataPointSelection = new EventEmitter<XChartMouseEvent>();
+
+  @Output()
+  dataPointMouseEnter = new EventEmitter<XChartMouseEvent>();
+
+  @Output()
+  dataPointMouseLeave = new EventEmitter<XChartMouseEvent>();
+  //#endregion
 
   //
   //#region ComponentCard Props ...
@@ -3563,8 +4033,34 @@ export abstract class XChartContainerComponent
       options: this.getValue(container ? container.options : this.options),
       series: this.getValue(container ? container.series : this.series),
       zoomStep: this.getValue(container ? container.zoomStep : this.zoomStep),
-      autoUpdate: this.getValue(
+
-        container ? container.autoUpdate : this.autoUpdate,
+      //
+      title: this.getValue(container ? container.title : this.title),
+      titleAlign: this.getValue(
+        container ? container.titleAlign : this.titleAlign,
+      ),
+
+      //
+      subTitle: this.getValue(container ? container.subTitle : this.subTitle),
+      subTitleAlign: this.getValue(
+        container ? container.subTitleAlign : this.subTitleAlign,
+      ),
+
+      //
+      gridColor: this.getValue(
+        container ? container.gridColor : this.gridColor,
+      ),
+      titleColor: this.getValue(
+        container ? container.titleColor : this.titleColor,
+      ),
+      subTitleColor: this.getValue(
+        container ? container.subTitleColor : this.subTitleColor,
+      ),
+      foregroundColor: this.getValue(
+        container ? container.foregroundColor : this.foregroundColor,
+      ),
+      backgroundColor: this.getValue(
+        container ? container.backgroundColor : this.backgroundColor,
       ),
 
       //
@@ -3642,11 +4138,73 @@ export abstract class XChartContainerComponent
         actionBarActionProvider: container
           ? container.actionBarActionProvider
           : this.actionBarActionProvider,
+
         //
-        zoomed: this.zoomed,
+        //#region Events ...
-        chartRendered: this.chartRendered,
+        click: container ? container.click : this.click,
-        dataPointSelected: this.dataPointSelected,
+        keyUp: container ? container.keyUp : this.keyUp,
-        actionBarActionFired: this.actionBarActionFired,
+        zoomed: container ? container.zoomed : this.zoomed,
+        keyDown: container ? container.keyDown : this.keyDown,
+        drillUp: container ? container.drillUp : this.drillUp,
+        mounted: container ? container.mounted : this.mounted,
+        updated: container ? container.updated : this.updated,
+        measured: container ? container.measured : this.measured,
+        scrolled: container ? container.scrolled : this.scrolled,
+        mouseMove: container ? container.mouseMove : this.mouseMove,
+        selection: container ? container.selection : this.selection,
+        beatChange: container ? container.beatChange : this.beatChange,
+        mouseLeave: container ? container.mouseLeave : this.mouseLeave,
+        beforeZoom: container ? container.beforeZoom : this.beforeZoom,
+        legendClick: container ? container.legendClick : this.legendClick,
+        markerClick: container ? container.markerClick : this.markerClick,
+        crossFilter: container ? container.crossFilter : this.crossFilter,
+        beforeMount: container ? container.beforeMount : this.beforeMount,
+        drillDownEnd: container ? container.drillDownEnd : this.drillDownEnd,
+        animationEnd: container ? container.animationEnd : this.animationEnd,
+        filterChange: container ? container.filterChange : this.filterChange,
+        brushScrolled: container ? container.brushScrolled : this.brushScrolled,
+        drillDownStart: container
+          ? container.drillDownStart
+          : this.drillDownStart,
+        drillDownError: container
+          ? container.drillDownError
+          : this.drillDownError,
+        xAxisLabelClick: container
+          ? container.xAxisLabelClick
+          : this.xAxisLabelClick,
+        beforeResetZoom: container
+          ? container.beforeResetZoom
+          : this.beforeResetZoom,
+        annotationEdited: container
+          ? container.annotationEdited
+          : this.annotationEdited,
+        annotationStyled: container
+          ? container.annotationStyled
+          : this.annotationStyled,
+        annotationDragged: container
+          ? container.annotationDragged
+          : this.annotationDragged,
+        annotationCreated: container
+          ? container.annotationCreated
+          : this.annotationCreated,
+        annotationDeleted: container
+          ? container.annotationDeleted
+          : this.annotationDeleted,
+        dataPointSelection: container
+          ? container.dataPointSelection
+          : this.dataPointSelection,
+        dataPointMouseEnter: container
+          ? container.dataPointMouseEnter
+          : this.dataPointMouseEnter,
+        dataPointMouseLeave: container
+          ? container.dataPointMouseLeave
+          : this.dataPointMouseLeave,
+
+        //
+        actionBarActionFired: container
+          ? container.actionBarActionFired
+          : this.actionBarActionFired,
+        //#endregion
       })),
     );
   }