@xplortech/apollo-data 0.0.4-draft.64ed229 → 0.0.4-draft.f74ef02

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

@@ -8,9 +8,11 @@ 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 {
         /**
@@ -50,6 +52,28 @@ export namespace Components {
          */
         "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 {
@@ -70,10 +94,17 @@ declare global {
         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 {
@@ -115,10 +146,33 @@ declare namespace LocalJSX {
          */
         "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 };
@@ -128,6 +182,7 @@ declare module "@stencil/core" {
             "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>;
         }
     }
 }

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

@@ -0,0 +1,11 @@
+import { ScatterDataItem, ScatterSpec } from '../components';
+export interface ScatterExamples {
+    name: string;
+    description: string;
+    props: {
+        adData: ScatterDataItem[];
+        adSpec?: ScatterSpec;
+    };
+    notes?: string;
+}
+export declare const scatterExamples: ScatterExamples[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xplortech/apollo-data",
-  "version": "0.0.4-draft.64ed229",
+  "version": "0.0.4-draft.f74ef02",
   "description": "Apollo Data",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/src/examples/apollo-data-scatter.examples.ts

@@ -0,0 +1,109 @@
+import { ScatterDataItem, ScatterSpec } from '../components';
+
+// Use the component's prop types directly
+export interface ScatterExamples {
+  name: string;
+  description: string;
+  props: {
+    adData: ScatterDataItem[];
+    adSpec?: ScatterSpec;
+    // Future: add event handlers when component supports them
+    // onSliceClick?: (item: ScatterDataItem) => void;
+  };
+  notes?: string; // Optional additional documentation
+}
+
+export const scatterExamples: ScatterExamples[] = [
+  {
+    name: 'Basic Scatter Chart',
+    description: 'A simple scatter chart using default styling and automatic tooltips.',
+    props: {
+      adData: [
+        { category: 'A', xValue: 120, yValue: 4.5 },
+        { category: 'B', xValue: 340, yValue: 6.8 },
+        { category: 'C', xValue: 560, yValue: 7.2 },
+        { category: 'A', xValue: 230, yValue: 5.1 },
+        { category: 'B', xValue: 890, yValue: 8.4 },
+      ],
+      adSpec: {
+        xAxisTitle: 'Revenue',
+        yAxisTitle: 'Rating',
+        tooltip: 'auto',
+      },
+    },
+    notes: 'Uses defaultPointStyle internally. No category-based styling applied.',
+  },
+  {
+    name: 'Category Styled Scatter',
+    description: 'Scatter chart with custom styles per category using categoryPointStyleMap.',
+    props: {
+      adData: [
+        { category: 'Mobile', xValue: 150, yValue: 3.8 },
+        { category: 'Web', xValue: 980, yValue: 7.9 },
+        { category: 'Backend', xValue: 670, yValue: 6.7 },
+        { category: 'Mobile', xValue: 300, yValue: 5.6 },
+      ],
+      adSpec: {
+        xAxisTitle: 'Users',
+        yAxisTitle: 'Performance Score',
+        tooltip: 'auto',
+        categoryPointStyleMap: {
+          Mobile: { color: '#4ECDC4', size: 100, shape: 'circle' },
+          Web: { color: '#FF6B6B', size: 120, shape: 'square' },
+          Backend: { color: '#6A6D7D', size: 140, shape: 'triangle' },
+        },
+      },
+    },
+    notes: 'Each category overrides the defaultPointStyle using categoryPointStyleMap.',
+  },
+  {
+    name: 'Per-Point Style Override',
+    description: 'Individual data points override category and default styles.',
+    props: {
+      adData: [
+        {
+          category: 'Sales',
+          xValue: 400,
+          yValue: 6.2,
+          pointStyle: { color: '#FF0000', size: 180, shape: 'triangle' },
+        },
+        {
+          category: 'Sales',
+          xValue: 520,
+          yValue: 7.1,
+        },
+        {
+          category: 'Marketing',
+          xValue: 310,
+          yValue: 5.4,
+          pointStyle: { color: '#000000', size: 160, shape: 'square' },
+        },
+      ],
+      adSpec: {
+        xAxisTitle: 'Spend',
+        yAxisTitle: 'Conversion Rate',
+        defaultPointStyle: { color: '#6A6D7D', size: 100, shape: 'circle' },
+        tooltip: 'auto',
+      },
+    },
+    notes: 'pointStyle at the data level has highest priority over category and default styles.',
+  },
+  {
+    name: 'Tooltip Disabled',
+    description: 'Scatter chart with tooltips disabled.',
+    props: {
+      adData: [
+        { category: 'Q1', xValue: 200, yValue: 4.2 },
+        { category: 'Q2', xValue: 450, yValue: 6.5 },
+        { category: 'Q3', xValue: 700, yValue: 8.1 },
+        { category: 'Q4', xValue: 300, yValue: 5.9 },
+      ],
+      adSpec: {
+        xAxisTitle: 'Quarter',
+        yAxisTitle: 'Growth',
+        tooltip: 'none',
+      },
+    },
+    notes: 'Tooltip interaction is completely disabled in this example.',
+  },
+];