@xplortech/apollo-data 0.0.4 → 0.0.5

package/dist/types/components/apollo-data-line/apollo-data-line.d.ts

@@ -0,0 +1,244 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+import { ApolloBase } from '../../apollo-data-base';
+export interface LineDataItem {
+    category: string;
+    xValue: number;
+    yValue: number;
+    xLabel?: string;
+    yLabel?: string;
+}
+export type LinePointStyle = 'circle' | 'square' | 'diamond' | 'cross' | 'triangle' | 'triangle-up' | 'triangle-down' | 'triangle-right' | 'triangle-left';
+/** Stroke dash pattern for the lines: 'solid' | 'dashed' | 'dotted'. */
+export type LineLineStyle = 'solid' | 'dashed' | 'dotted';
+export interface LineSpec {
+    colorSet?: string[];
+    tooltipPrefix?: string;
+    currencySymbol?: string;
+    yAxisTitle?: string;
+    xAxisTitle?: string;
+    /** Shape of the data points. Defaults to 'circle'. */
+    pointStyle?: LinePointStyle;
+    /** Stroke style of the lines. Defaults to 'solid'. */
+    lineStyle?: LineLineStyle;
+}
+export declare class ApolloDataLineChart extends ApolloBase<LineDataItem[], LineSpec> implements ComponentInterface {
+    el: HTMLElement;
+    adData: string | LineDataItem[];
+    adSpec: string | LineSpec;
+    private static tooltipStylesInjected;
+    componentDidLoad(): void;
+    componentDidRender(): Promise<void>;
+    private injectTooltipStyles;
+    protected getViewData(data: LineDataItem[], spec?: LineSpec): Promise<{
+        $schema: string;
+        config: {
+            text: {
+                fill: string;
+                font: string;
+                labelFontSize: number;
+                labelFontWeight: number;
+            };
+            axis: {
+                labelColor: string;
+                titleColor: string;
+                labelFont: string;
+                titleFont: string;
+                titleFontWeight: number;
+            };
+            legend: {
+                labelColor: string;
+                titleColor: string;
+                labelFont: string;
+                titleFont: string;
+                labelFontSize: number;
+                labelLimit: number;
+            };
+            title: {
+                color: string;
+                font: string;
+                labelFontSize: number;
+                labelFontWeight: number;
+            };
+        };
+        height: number;
+        autosize: {
+            type: string;
+            contains: string;
+            resize: boolean;
+        };
+        signals: {
+            name: string;
+            update: string;
+        }[];
+        width: {
+            signal: string;
+        };
+        data: any[];
+        scales: ({
+            name: string;
+            type: string;
+            domain: number[];
+            range: string;
+            padding: number;
+            nice?: undefined;
+            zero?: undefined;
+        } | {
+            name: string;
+            type: string;
+            domain: {
+                data: string;
+                field: string;
+            };
+            range: {
+                data: string;
+                field: string;
+            };
+            padding?: undefined;
+            nice?: undefined;
+            zero?: undefined;
+        } | {
+            name: string;
+            type: string;
+            domain: {
+                data: string;
+                field: string;
+            };
+            nice: boolean;
+            zero: boolean;
+            range: string;
+            padding?: undefined;
+        } | {
+            name: string;
+            type: string;
+            domain: string[];
+            range: string[];
+            padding?: undefined;
+            nice?: undefined;
+            zero?: undefined;
+        })[];
+        axes: ({
+            orient: string;
+            scale: string;
+            title: string;
+            labelPadding: number;
+            titlePadding: number;
+            labelAngle: number;
+            labelAlign: string;
+            labelBaseline: string;
+            tickSize: number;
+            labelFontSize: number;
+            titleFontSize: number;
+            ticks: boolean;
+            domain: boolean;
+            encode: {
+                labels: {
+                    update: {
+                        text: {
+                            signal: string;
+                        };
+                    };
+                };
+            };
+            format?: undefined;
+            grid?: undefined;
+            tickCount?: undefined;
+            tickBand?: undefined;
+        } | {
+            orient: string;
+            scale: string;
+            title: string;
+            format: string;
+            grid: boolean;
+            tickCount: number;
+            labelFontSize: number;
+            titleFontSize: number;
+            ticks: boolean;
+            domain: boolean;
+            tickBand: string;
+            labelPadding: number;
+            titlePadding?: undefined;
+            labelAngle?: undefined;
+            labelAlign?: undefined;
+            labelBaseline?: undefined;
+            tickSize?: undefined;
+            encode?: undefined;
+        })[];
+        legends: {
+            stroke: string;
+            orient: string;
+            direction: string;
+            columns: {
+                signal: string;
+            };
+            title: any;
+            symbolType: string;
+            symbolStrokeWidth: number;
+            rowPadding: number;
+            symbolOffset: number;
+            symbolSize: number;
+            labelOffset: number;
+            labelLimit: number;
+        }[];
+        marks: ({
+            type: string;
+            from: {
+                data: string;
+            };
+            encode: {
+                enter: {
+                    strokeDash?: {
+                        value: number[];
+                    };
+                    x: {
+                        scale: string;
+                        field: string;
+                    };
+                    y: {
+                        scale: string;
+                        field: string;
+                    };
+                    stroke: {
+                        value: string;
+                    };
+                    strokeWidth: {
+                        value: number;
+                    };
+                    interpolate: {
+                        value: string;
+                    };
+                };
+            };
+        } | {
+            type: string;
+            from: {
+                data: string;
+            };
+            encode: {
+                enter: {
+                    x: {
+                        scale: string;
+                        field: string;
+                    };
+                    y: {
+                        scale: string;
+                        field: string;
+                    };
+                    fill: {
+                        scale: string;
+                        field: string;
+                    };
+                    size: {
+                        value: number;
+                    };
+                    shape: {
+                        value: LinePointStyle;
+                    };
+                    tooltip: {
+                        signal: string;
+                    };
+                };
+            };
+        })[];
+    }>;
+    render(): any;
+}

package/dist/types/components/apollo-data-scatter/apollo-data-scatter.d.ts

@@ -0,0 +1,329 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+import { ApolloBase } from '../../apollo-data-base';
+export interface PointStyle {
+    shape?: 'circle' | 'square' | 'triangle';
+    opacity?: number;
+    color?: string;
+    size?: number;
+}
+export interface ScatterDataItem {
+    category: string;
+    xValue: number;
+    yValue: number;
+    pointStyle?: PointStyle;
+}
+export interface ScatterSpec {
+    yAxisTitle?: string;
+    xAxisTitle?: string;
+    defaultPointStyle?: PointStyle;
+    pointStyle?: PointStyle;
+    categoryPointStyleMap?: {
+        [categoryName: string]: PointStyle;
+    };
+    tooltip?: 'auto' | 'none';
+}
+export declare class ApolloDataScatterChart extends ApolloBase<ScatterDataItem[], ScatterSpec> implements ComponentInterface {
+    el: HTMLElement;
+    /**
+     * Represents a single data point in the scatter chart.
+     * @property {string} category - Category or group name associated with the data point.
+     * This can be used for legend grouping or category-based styling.
+     * @property {number} xValue - Numeric value plotted along the X-axis.
+     * @property {number} yValue - Numeric value plotted along the Y-axis.
+     * @property {PointStyle} [pointStyle] - Optional style override for this specific data point.
+     * If provided, it takes precedence over default or category-level styles.
+     */
+    adData: string | ScatterDataItem[];
+    /**
+     * Optional specification object for customizing the scatter chart configuration.
+     * @property {string} [yAxisTitle] - Label displayed for the Y-axis.
+     * @property {string} [xAxisTitle] - Label displayed for the X-axis.
+     * @property {PointStyle} [defaultPointStyle] - Default styling applied to all scatter points (e.g., size, color, shape, opacity).
+     * @property {PointStyle} [pointStyle] - Global point style override applied to all data points.
+     * @property {{ [categoryName: string]: PointStyle }} [categoryPointStyleMap] -
+     * A mapping object that allows custom point styles per category name.
+     * Each key represents a category, and its value defines the corresponding PointStyle.
+     * @property {'auto' | 'none'} [tooltip] - Controls tooltip behavior.
+     * 'auto' enables default tooltip rendering, while 'none' disables tooltips.
+     */
+    adSpec: string | ScatterSpec;
+    componentDidRender(): Promise<void>;
+    private DEFAULT_POINT_STYLE;
+    protected getViewData(data: ScatterDataItem[], spec?: ScatterSpec): Promise<{
+        $schema: string;
+        description: string;
+        width: number;
+        height: number;
+        padding: number;
+        autosize: {
+            type: string;
+            resize: boolean;
+        };
+        signals: ({
+            name: string;
+            value: number;
+            update?: undefined;
+        } | {
+            name: string;
+            update: string;
+            value?: undefined;
+        })[];
+        data: ({
+            name: string;
+            values: {
+                category: string;
+                xValue: number;
+                yValue: number;
+                color: string;
+                shape: "square" | "circle" | "triangle";
+                opacity: number;
+            }[];
+            source?: undefined;
+            transform?: undefined;
+        } | {
+            name: string;
+            source: string;
+            transform: ({
+                type: string;
+                expr: string;
+            } | {
+                type: string;
+                expr?: undefined;
+            })[];
+            values?: undefined;
+        })[];
+        scales: {
+            name: string;
+            type: string;
+            range: (number | {
+                signal: string;
+            })[];
+            nice: boolean;
+            domain: {
+                data: string;
+                field: string;
+            };
+        }[];
+        axes: {
+            orient: string;
+            scale: string;
+            offset: number;
+            format: string;
+            title: string;
+        }[];
+        marks: ({
+            type: string;
+            from: {
+                data: string;
+            };
+            encode: {
+                enter: {
+                    size: {
+                        value: number;
+                    };
+                    tooltip: {
+                        field: string;
+                    };
+                };
+                update: {
+                    x: {
+                        scale: string;
+                        field: string;
+                        signal?: undefined;
+                        offset?: undefined;
+                    };
+                    y: {
+                        scale: string;
+                        field: string;
+                        signal?: undefined;
+                        offset?: undefined;
+                    };
+                    fill: {
+                        field: string;
+                        value?: undefined;
+                    };
+                    fillOpacity: {
+                        field: string;
+                        value?: undefined;
+                    };
+                    shape: {
+                        field: string;
+                    };
+                    zindex: {
+                        value: number;
+                    };
+                    text?: undefined;
+                    align?: undefined;
+                    baseline?: undefined;
+                    fontSize?: undefined;
+                };
+                hover: {
+                    fill: {
+                        value: string;
+                    };
+                    fillOpacity: {
+                        value: number;
+                    };
+                    zindex: {
+                        value: number;
+                    };
+                };
+            };
+            interactive?: undefined;
+        } | {
+            type: string;
+            from: {
+                data: string;
+            };
+            encode: {
+                enter: {
+                    size: {
+                        value: number;
+                    };
+                    tooltip: {
+                        field: string;
+                    };
+                };
+                update: {
+                    x: {
+                        scale: string;
+                        field: string;
+                        signal?: undefined;
+                        offset?: undefined;
+                    };
+                    y: {
+                        signal: string;
+                        scale?: undefined;
+                        field?: undefined;
+                        offset?: undefined;
+                    };
+                    fill: {
+                        value: string;
+                        field?: undefined;
+                    };
+                    fillOpacity: {
+                        value: number;
+                        field?: undefined;
+                    };
+                    shape?: undefined;
+                    zindex?: undefined;
+                    text?: undefined;
+                    align?: undefined;
+                    baseline?: undefined;
+                    fontSize?: undefined;
+                };
+                hover: {
+                    fill: {
+                        value: string;
+                    };
+                    fillOpacity: {
+                        value: number;
+                    };
+                    zindex?: undefined;
+                };
+            };
+            interactive?: undefined;
+        } | {
+            type: string;
+            from: {
+                data: string;
+            };
+            encode: {
+                enter: {
+                    size: {
+                        value: number;
+                    };
+                    tooltip: {
+                        field: string;
+                    };
+                };
+                update: {
+                    x: {
+                        signal: string;
+                        scale?: undefined;
+                        field?: undefined;
+                        offset?: undefined;
+                    };
+                    y: {
+                        scale: string;
+                        field: string;
+                        signal?: undefined;
+                        offset?: undefined;
+                    };
+                    fill: {
+                        value: string;
+                        field?: undefined;
+                    };
+                    fillOpacity: {
+                        value: number;
+                        field?: undefined;
+                    };
+                    zindex: {
+                        value: number;
+                    };
+                    shape?: undefined;
+                    text?: undefined;
+                    align?: undefined;
+                    baseline?: undefined;
+                    fontSize?: undefined;
+                };
+                hover: {
+                    fill: {
+                        value: string;
+                    };
+                    fillOpacity: {
+                        value: number;
+                    };
+                    zindex: {
+                        value: number;
+                    };
+                };
+            };
+            interactive?: undefined;
+        } | {
+            type: string;
+            interactive: boolean;
+            from: {
+                data: string;
+            };
+            encode: {
+                update: {
+                    x: {
+                        signal: string;
+                        offset: number;
+                        scale?: undefined;
+                        field?: undefined;
+                    };
+                    y: {
+                        signal: string;
+                        offset: number;
+                        scale?: undefined;
+                        field?: undefined;
+                    };
+                    text: {
+                        signal: string;
+                    };
+                    align: {
+                        value: string;
+                    };
+                    baseline: {
+                        value: string;
+                    };
+                    fill: {
+                        value: string;
+                        field?: undefined;
+                    };
+                    fontSize: {
+                        value: number;
+                    };
+                    fillOpacity?: undefined;
+                    shape?: undefined;
+                    zindex?: undefined;
+                };
+                enter?: undefined;
+                hover?: undefined;
+            };
+        })[];
+    }>;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -7,8 +7,12 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { BarDataItem, BarSpec } from "./components/apollo-data-bar/apollo-data-bar";
 import { DonutDataItem, DonutSpec } from "./components/apollo-data-donut/apollo-data-donut";
+import { LineDataItem, LineSpec } from "./components/apollo-data-line/apollo-data-line";
+import { ScatterDataItem, ScatterSpec } from "./components/apollo-data-scatter/apollo-data-scatter";
 export { BarDataItem, BarSpec } from "./components/apollo-data-bar/apollo-data-bar";
 export { DonutDataItem, DonutSpec } from "./components/apollo-data-donut/apollo-data-donut";
+export { LineDataItem, LineSpec } from "./components/apollo-data-line/apollo-data-line";
+export { ScatterDataItem, ScatterSpec } from "./components/apollo-data-scatter/apollo-data-scatter";
 export namespace Components {
     interface ApolloDataBarChart {
         /**
@@ -38,6 +42,38 @@ export namespace Components {
          */
         "adSpec": string | DonutSpec;
     }
+    interface ApolloDataLineChart {
+        /**
+          * @default []
+         */
+        "adData": string | LineDataItem[];
+        /**
+          * @default null
+         */
+        "adSpec": string | LineSpec;
+    }
+    interface ApolloDataScatterChart {
+        /**
+          * Represents a single data point in the scatter chart.
+          * @property {string} category - Category or group name associated with the data point. This can be used for legend grouping or category-based styling.
+          * @property {number} xValue - Numeric value plotted along the X-axis.
+          * @property {number} yValue - Numeric value plotted along the Y-axis.
+          * @property {PointStyle} [pointStyle] - Optional style override for this specific data point. If provided, it takes precedence over default or category-level styles.
+          * @default []
+         */
+        "adData": string | ScatterDataItem[];
+        /**
+          * Optional specification object for customizing the scatter chart configuration.
+          * @property {string} [yAxisTitle] - Label displayed for the Y-axis.
+          * @property {string} [xAxisTitle] - Label displayed for the X-axis.
+          * @property {PointStyle} [defaultPointStyle] - Default styling applied to all scatter points (e.g., size, color, shape, opacity).
+          * @property {PointStyle} [pointStyle] - Global point style override applied to all data points.
+          * @property {{ [categoryName: string]: PointStyle }} [categoryPointStyleMap] - A mapping object that allows custom point styles per category name. Each key represents a category, and its value defines the corresponding PointStyle.
+          * @property {'auto' | 'none'} [tooltip] - Controls tooltip behavior. 'auto' enables default tooltip rendering, while 'none' disables tooltips.
+          * @default {}
+         */
+        "adSpec": string | ScatterSpec;
+    }
 }
 declare global {
     interface HTMLApolloDataBarChartElement extends Components.ApolloDataBarChart, HTMLStencilElement {
@@ -52,9 +88,23 @@ declare global {
         prototype: HTMLApolloDataDonutChartElement;
         new (): HTMLApolloDataDonutChartElement;
     };
+    interface HTMLApolloDataLineChartElement extends Components.ApolloDataLineChart, HTMLStencilElement {
+    }
+    var HTMLApolloDataLineChartElement: {
+        prototype: HTMLApolloDataLineChartElement;
+        new (): HTMLApolloDataLineChartElement;
+    };
+    interface HTMLApolloDataScatterChartElement extends Components.ApolloDataScatterChart, HTMLStencilElement {
+    }
+    var HTMLApolloDataScatterChartElement: {
+        prototype: HTMLApolloDataScatterChartElement;
+        new (): HTMLApolloDataScatterChartElement;
+    };
     interface HTMLElementTagNameMap {
         "apollo-data-bar-chart": HTMLApolloDataBarChartElement;
         "apollo-data-donut-chart": HTMLApolloDataDonutChartElement;
+        "apollo-data-line-chart": HTMLApolloDataLineChartElement;
+        "apollo-data-scatter-chart": HTMLApolloDataScatterChartElement;
     }
 }
 declare namespace LocalJSX {
@@ -86,9 +136,43 @@ declare namespace LocalJSX {
          */
         "adSpec"?: string | DonutSpec;
     }
+    interface ApolloDataLineChart {
+        /**
+          * @default []
+         */
+        "adData"?: string | LineDataItem[];
+        /**
+          * @default null
+         */
+        "adSpec"?: string | LineSpec;
+    }
+    interface ApolloDataScatterChart {
+        /**
+          * Represents a single data point in the scatter chart.
+          * @property {string} category - Category or group name associated with the data point. This can be used for legend grouping or category-based styling.
+          * @property {number} xValue - Numeric value plotted along the X-axis.
+          * @property {number} yValue - Numeric value plotted along the Y-axis.
+          * @property {PointStyle} [pointStyle] - Optional style override for this specific data point. If provided, it takes precedence over default or category-level styles.
+          * @default []
+         */
+        "adData"?: string | ScatterDataItem[];
+        /**
+          * Optional specification object for customizing the scatter chart configuration.
+          * @property {string} [yAxisTitle] - Label displayed for the Y-axis.
+          * @property {string} [xAxisTitle] - Label displayed for the X-axis.
+          * @property {PointStyle} [defaultPointStyle] - Default styling applied to all scatter points (e.g., size, color, shape, opacity).
+          * @property {PointStyle} [pointStyle] - Global point style override applied to all data points.
+          * @property {{ [categoryName: string]: PointStyle }} [categoryPointStyleMap] - A mapping object that allows custom point styles per category name. Each key represents a category, and its value defines the corresponding PointStyle.
+          * @property {'auto' | 'none'} [tooltip] - Controls tooltip behavior. 'auto' enables default tooltip rendering, while 'none' disables tooltips.
+          * @default {}
+         */
+        "adSpec"?: string | ScatterSpec;
+    }
     interface IntrinsicElements {
         "apollo-data-bar-chart": ApolloDataBarChart;
         "apollo-data-donut-chart": ApolloDataDonutChart;
+        "apollo-data-line-chart": ApolloDataLineChart;
+        "apollo-data-scatter-chart": ApolloDataScatterChart;
     }
 }
 export { LocalJSX as JSX };
@@ -97,6 +181,8 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "apollo-data-bar-chart": LocalJSX.ApolloDataBarChart & JSXBase.HTMLAttributes<HTMLApolloDataBarChartElement>;
             "apollo-data-donut-chart": LocalJSX.ApolloDataDonutChart & JSXBase.HTMLAttributes<HTMLApolloDataDonutChartElement>;
+            "apollo-data-line-chart": LocalJSX.ApolloDataLineChart & JSXBase.HTMLAttributes<HTMLApolloDataLineChartElement>;
+            "apollo-data-scatter-chart": LocalJSX.ApolloDataScatterChart & JSXBase.HTMLAttributes<HTMLApolloDataScatterChartElement>;
         }
     }
 }