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

package/dist/collection/components/apollo-data-scatter/apollo-data-scatter.js

@@ -0,0 +1,329 @@
+import { h, Host } from "@stencil/core";
+import { ApolloBase } from "../../apollo-data-base";
+export class ApolloDataScatterChart extends ApolloBase {
+    constructor() {
+        super();
+    }
+    el = null;
+    /**
+     * 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 = [];
+    /**
+     * 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 = {};
+    async componentDidRender() {
+        await this.renderChart();
+    }
+    DEFAULT_POINT_STYLE = {
+        shape: 'circle',
+        opacity: 1,
+        color: 'blue',
+        size: 1,
+    };
+    // @ts-ignore
+    async getViewData(data, spec) {
+        const dataItemsToUse = data.map(dataItem => {
+            const pointStylesToUse = {};
+            Object.keys(this.DEFAULT_POINT_STYLE).forEach(key => {
+                const value = dataItem.pointStyle?.[key] ??
+                    dataItem?.[key] ??
+                    spec.categoryPointStyleMap?.[dataItem.category]?.[key] ??
+                    spec.defaultPointStyle?.[key] ??
+                    this.DEFAULT_POINT_STYLE[key];
+                pointStylesToUse[key] = value;
+            });
+            return {
+                category: dataItem.category,
+                xValue: dataItem.xValue,
+                yValue: dataItem.yValue,
+                color: pointStylesToUse.color,
+                shape: pointStylesToUse.shape,
+                opacity: pointStylesToUse.opacity,
+            };
+        });
+        const tooltipField = spec?.tooltip === 'auto' ? 'category' : 'none';
+        return {
+            $schema: 'https://vega.github.io/schema/vega/v6.json',
+            description: 'A scatter plot with null values visualized along the axes.',
+            width: 450,
+            height: 450,
+            padding: 5,
+            autosize: { type: 'fit', resize: true },
+            signals: [
+                { name: 'nullSize', value: 8 },
+                { name: 'nullGap', update: 'nullSize + 10' },
+            ],
+            data: [
+                {
+                    name: 'source',
+                    values: dataItemsToUse,
+                },
+                {
+                    name: 'valid',
+                    source: 'source',
+                    transform: [
+                        {
+                            type: 'filter',
+                            expr: 'datum.xValue != null && datum.yValue != null',
+                        },
+                    ],
+                },
+                {
+                    name: 'nullXY',
+                    source: 'source',
+                    transform: [
+                        {
+                            type: 'filter',
+                            expr: 'datum.xValue == null && datum.yValue == null',
+                        },
+                        { type: 'aggregate' },
+                    ],
+                },
+                {
+                    name: 'nullY',
+                    source: 'source',
+                    transform: [
+                        {
+                            type: 'filter',
+                            expr: 'datum.xValue != null && datum.yValue == null',
+                        },
+                    ],
+                },
+                {
+                    name: 'nullX',
+                    source: 'source',
+                    transform: [
+                        {
+                            type: 'filter',
+                            expr: 'datum.xValue == null && datum.yValue != null',
+                        },
+                    ],
+                },
+            ],
+            scales: [
+                {
+                    name: 'xscale',
+                    type: 'linear',
+                    range: [{ signal: 'nullGap' }, { signal: 'width' }],
+                    nice: true,
+                    domain: { data: 'valid', field: 'xValue' },
+                },
+                {
+                    name: 'yscale',
+                    type: 'linear',
+                    range: [{ signal: 'height - nullGap' }, 0],
+                    nice: true,
+                    domain: { data: 'valid', field: 'yValue' },
+                },
+            ],
+            axes: [
+                {
+                    orient: 'bottom',
+                    scale: 'xscale',
+                    offset: 5,
+                    format: 's',
+                    title: spec?.xAxisTitle || 'X Value',
+                },
+                {
+                    orient: 'left',
+                    scale: 'yscale',
+                    offset: 5,
+                    format: 's',
+                    title: spec?.yAxisTitle || 'Y Value',
+                },
+            ],
+            marks: [
+                {
+                    type: 'symbol',
+                    from: { data: 'valid' },
+                    encode: {
+                        enter: {
+                            size: { value: 50 },
+                            tooltip: { field: tooltipField },
+                        },
+                        update: {
+                            x: { scale: 'xscale', field: 'xValue' },
+                            y: { scale: 'yscale', field: 'yValue' },
+                            fill: { field: 'color' },
+                            fillOpacity: { field: 'opacity' },
+                            shape: { field: 'shape' },
+                            zindex: { value: 0 },
+                        },
+                        hover: {
+                            fill: { value: 'firebrick' },
+                            fillOpacity: { value: 1 },
+                            zindex: { value: 1 },
+                        },
+                    },
+                },
+                {
+                    type: 'symbol',
+                    from: { data: 'nullY' },
+                    encode: {
+                        enter: {
+                            size: { value: 50 },
+                            tooltip: { field: tooltipField },
+                        },
+                        update: {
+                            x: { scale: 'xscale', field: 'xValue' },
+                            y: { signal: 'height - nullSize/2' },
+                            fill: { value: '#aaa' },
+                            fillOpacity: { value: 0.2 },
+                        },
+                        hover: {
+                            fill: { value: 'firebrick' },
+                            fillOpacity: { value: 1 },
+                        },
+                    },
+                },
+                {
+                    type: 'symbol',
+                    from: { data: 'nullX' },
+                    encode: {
+                        enter: {
+                            size: { value: 50 },
+                            tooltip: { field: 'name' },
+                        },
+                        update: {
+                            x: { signal: 'nullSize/2' },
+                            y: { scale: 'yscale', field: 'yValue' },
+                            fill: { value: '#aaa' },
+                            fillOpacity: { value: 0.2 },
+                            zindex: { value: 0 },
+                        },
+                        hover: {
+                            fill: { value: 'firebrick' },
+                            fillOpacity: { value: 1 },
+                            zindex: { value: 1 },
+                        },
+                    },
+                },
+                {
+                    type: 'text',
+                    interactive: false,
+                    from: { data: 'nullXY' },
+                    encode: {
+                        update: {
+                            x: { signal: 'nullSize', offset: -4 },
+                            y: { signal: 'height', offset: 13 },
+                            text: { signal: "datum.count + ' null'" },
+                            align: { value: 'right' },
+                            baseline: { value: 'top' },
+                            fill: { value: '#999' },
+                            fontSize: { value: 9 },
+                        },
+                    },
+                },
+            ],
+        };
+    }
+    render() {
+        return (h(Host, { key: '60005ab926b0153b3e31729a69f5a64cf6558085' }, h("div", { key: '820de3e0ddbbc2650b9764e279d87531338e72e3', id: "container", style: { width: '100%', height: '100%' } })));
+    }
+    static get is() { return "apollo-data-scatter-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "adData": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | ScatterDataItem[]",
+                    "resolved": "ScatterDataItem[] | string",
+                    "references": {
+                        "ScatterDataItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-data/src/components/apollo-data-scatter/apollo-data-scatter.tsx",
+                            "id": "src/components/apollo-data-scatter/apollo-data-scatter.tsx::ScatterDataItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "property",
+                            "text": "{string} category - Category or group name associated with the data point.\nThis can be used for legend grouping or category-based styling."
+                        }, {
+                            "name": "property",
+                            "text": "{number} xValue - Numeric value plotted along the X-axis."
+                        }, {
+                            "name": "property",
+                            "text": "{number} yValue - Numeric value plotted along the Y-axis."
+                        }, {
+                            "name": "property",
+                            "text": "{PointStyle} [pointStyle] - Optional style override for this specific data point.\nIf provided, it takes precedence over default or category-level styles."
+                        }],
+                    "text": "Represents a single data point in the scatter chart."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ad-data",
+                "defaultValue": "[]"
+            },
+            "adSpec": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | ScatterSpec",
+                    "resolved": "ScatterSpec | string",
+                    "references": {
+                        "ScatterSpec": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-data/src/components/apollo-data-scatter/apollo-data-scatter.tsx",
+                            "id": "src/components/apollo-data-scatter/apollo-data-scatter.tsx::ScatterSpec"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "property",
+                            "text": "{string} [yAxisTitle] - Label displayed for the Y-axis."
+                        }, {
+                            "name": "property",
+                            "text": "{string} [xAxisTitle] - Label displayed for the X-axis."
+                        }, {
+                            "name": "property",
+                            "text": "{PointStyle} [defaultPointStyle] - Default styling applied to all scatter points (e.g., size, color, shape, opacity)."
+                        }, {
+                            "name": "property",
+                            "text": "{PointStyle} [pointStyle] - Global point style override applied to all data points."
+                        }, {
+                            "name": "property",
+                            "text": "{{ [categoryName: string]: PointStyle }} [categoryPointStyleMap] -\nA mapping object that allows custom point styles per category name.\nEach key represents a category, and its value defines the corresponding PointStyle."
+                        }, {
+                            "name": "property",
+                            "text": "{'auto' | 'none'} [tooltip] - Controls tooltip behavior.\n'auto' enables default tooltip rendering, while 'none' disables tooltips."
+                        }],
+                    "text": "Optional specification object for customizing the scatter chart configuration."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ad-spec",
+                "defaultValue": "{}"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/examples/apollo-data-scatter.examples.js

@@ -0,0 +1,94 @@
+export const 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.',
+    },
+];

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ApolloDataScatterChart extends Components.ApolloDataScatterChart, HTMLElement {}
+export const ApolloDataScatterChart: {
+    prototype: ApolloDataScatterChart;
+    new (): ApolloDataScatterChart;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/apollo-data-scatter-chart.js

@@ -0,0 +1 @@
+import{p as e,h as a,H as l,t}from"./p-Dws5s-Xe.js";import{A as i}from"./p-7XF5Cax8.js";const s=e(class extends i{constructor(e){super(!1),!1!==e&&this.__registerHost(),this.__attachShadow()}get el(){return this}adData=[];adSpec={};async componentDidRender(){await this.renderChart()}DEFAULT_POINT_STYLE={shape:"circle",opacity:1,color:"blue",size:1};async getViewData(e,a){const l=e.map((e=>{const l={};return Object.keys(this.DEFAULT_POINT_STYLE).forEach((t=>{l[t]=e.pointStyle?.[t]??e?.[t]??a.categoryPointStyleMap?.[e.category]?.[t]??a.defaultPointStyle?.[t]??this.DEFAULT_POINT_STYLE[t]})),{category:e.category,xValue:e.xValue,yValue:e.yValue,color:l.color,shape:l.shape,opacity:l.opacity}})),t="auto"===a?.tooltip?"category":"none";return{$schema:"https://vega.github.io/schema/vega/v6.json",description:"A scatter plot with null values visualized along the axes.",width:450,height:450,padding:5,autosize:{type:"fit",resize:!0},signals:[{name:"nullSize",value:8},{name:"nullGap",update:"nullSize + 10"}],data:[{name:"source",values:l},{name:"valid",source:"source",transform:[{type:"filter",expr:"datum.xValue != null && datum.yValue != null"}]},{name:"nullXY",source:"source",transform:[{type:"filter",expr:"datum.xValue == null && datum.yValue == null"},{type:"aggregate"}]},{name:"nullY",source:"source",transform:[{type:"filter",expr:"datum.xValue != null && datum.yValue == null"}]},{name:"nullX",source:"source",transform:[{type:"filter",expr:"datum.xValue == null && datum.yValue != null"}]}],scales:[{name:"xscale",type:"linear",range:[{signal:"nullGap"},{signal:"width"}],nice:!0,domain:{data:"valid",field:"xValue"}},{name:"yscale",type:"linear",range:[{signal:"height - nullGap"},0],nice:!0,domain:{data:"valid",field:"yValue"}}],axes:[{orient:"bottom",scale:"xscale",offset:5,format:"s",title:a?.xAxisTitle||"X Value"},{orient:"left",scale:"yscale",offset:5,format:"s",title:a?.yAxisTitle||"Y Value"}],marks:[{type:"symbol",from:{data:"valid"},encode:{enter:{size:{value:50},tooltip:{field:t}},update:{x:{scale:"xscale",field:"xValue"},y:{scale:"yscale",field:"yValue"},fill:{field:"color"},fillOpacity:{field:"opacity"},shape:{field:"shape"},zindex:{value:0}},hover:{fill:{value:"firebrick"},fillOpacity:{value:1},zindex:{value:1}}}},{type:"symbol",from:{data:"nullY"},encode:{enter:{size:{value:50},tooltip:{field:t}},update:{x:{scale:"xscale",field:"xValue"},y:{signal:"height - nullSize/2"},fill:{value:"#aaa"},fillOpacity:{value:.2}},hover:{fill:{value:"firebrick"},fillOpacity:{value:1}}}},{type:"symbol",from:{data:"nullX"},encode:{enter:{size:{value:50},tooltip:{field:"name"}},update:{x:{signal:"nullSize/2"},y:{scale:"yscale",field:"yValue"},fill:{value:"#aaa"},fillOpacity:{value:.2},zindex:{value:0}},hover:{fill:{value:"firebrick"},fillOpacity:{value:1},zindex:{value:1}}}},{type:"text",interactive:!1,from:{data:"nullXY"},encode:{update:{x:{signal:"nullSize",offset:-4},y:{signal:"height",offset:13},text:{signal:"datum.count + ' null'"},align:{value:"right"},baseline:{value:"top"},fill:{value:"#999"},fontSize:{value:9}}}}]}}render(){return a(l,{key:"60005ab926b0153b3e31729a69f5a64cf6558085"},a("div",{key:"820de3e0ddbbc2650b9764e279d87531338e72e3",id:"container",style:{width:"100%",height:"100%"}}))}},[513,"apollo-data-scatter-chart",{adData:[1,"ad-data"],adSpec:[1,"ad-spec"]}]),u=s,n=function(){"undefined"!=typeof customElements&&["apollo-data-scatter-chart"].forEach((e=>{"apollo-data-scatter-chart"===e&&(customElements.get(t(e))||customElements.define(t(e),s))}))};export{u as ApolloDataScatterChart,n as defineCustomElement}