@xplortech/apollo-data 0.0.4 → 0.0.6

package/dist/collection/components/apollo-data-line/apollo-data-line.stories.js

@@ -0,0 +1,122 @@
+import { html } from "lit-html";
+import { lineExamples } from "../../examples/apollo-data-line.examples";
+import { generateReactCode, generateVueCode, generateWebComponentCode, generateInstallationDocs } from "../../utils/code-generator";
+function getCodeForFramework(props, framework) {
+    switch (framework) {
+        case 'vue':
+            return generateVueCode('apollo-data-line-chart', props);
+        case 'webcomponent':
+            return generateWebComponentCode('apollo-data-line-chart', props);
+        case 'react':
+        default:
+            return generateReactCode('apollo-data-line-chart', props);
+    }
+}
+const meta = {
+    title: 'Apollo Data/Line Chart',
+    tags: ['autodocs'],
+    argTypes: {
+        adData: {
+            control: 'object',
+            description: 'Array of data items. Each item has category, xValue, yValue, and optional xLabel/yLabel. When labels are omitted, numeric values are shown on axes and tooltip.',
+            table: {
+                type: {
+                    summary: 'LineDataItem[]',
+                    detail: 'interface LineDataItem {\n  category: string;\n  xValue: number;\n  yValue: number;\n  xLabel?: string;\n  yLabel?: string;\n}',
+                },
+                defaultValue: { summary: '[]' },
+            },
+        },
+        adSpec: {
+            control: 'object',
+            description: 'Specification object for customizing the chart appearance.',
+            table: {
+                type: {
+                    summary: 'LineSpec',
+                    detail: 'interface LineSpec {\n  colorSet?: string[];\n  tooltipPrefix?: string;\n  currencySymbol?: string;\n  yAxisTitle?: string;\n  xAxisTitle?: string;\n  pointStyle?: LinePointStyle;\n  lineStyle?: LineLineStyle;\n}',
+                },
+                defaultValue: { summary: '{}' },
+            },
+        },
+    },
+    decorators: [
+        (story, context) => {
+            const framework = context.globals?.framework || 'react';
+            setTimeout(() => {
+                const doc = globalThis.document;
+                if (doc) {
+                    const installSections = {
+                        react: doc.querySelector('.install-react'),
+                        vue: doc.querySelector('.install-vue'),
+                        webcomponent: doc.querySelector('.install-webcomponent'),
+                    };
+                    Object.values(installSections).forEach((section) => {
+                        if (section)
+                            section.setAttribute('style', 'display: none;');
+                    });
+                    const selectedSection = installSections[framework];
+                    if (selectedSection)
+                        selectedSection.setAttribute('style', 'display: block;');
+                }
+            }, 0);
+            return story();
+        },
+    ],
+    parameters: {
+        docs: {
+            description: {
+                component: `${generateInstallationDocs('react', 'apollo-data-line-chart')}
+
+${generateInstallationDocs('vue', 'apollo-data-line-chart')}
+
+${generateInstallationDocs('webcomponent', 'apollo-data-line-chart')}
+
+---
+
+## Description
+
+A multi-series line chart component built with Vega. Each data item has \`category\` (one line per category), \`xValue\` and \`yValue\` (numeric axes), and optional \`xLabel\`/\`yLabel\` for display; when labels are omitted, numeric values are shown. Use \`adSpec.xAxisTitle\`, \`adSpec.yAxisTitle\`, \`adSpec.pointStyle\`, and \`adSpec.lineStyle\` (\`'solid' | 'dashed' | 'dotted'\`) to customize the chart. The example uses the monthly sales by product preset from \`lineExamples\`.
+
+**Tip:** Use the Framework selector in the toolbar to switch between React, Vue, and Web Component installation and code examples.`,
+            },
+        },
+        viewMode: 'story',
+    },
+};
+export default meta;
+const chartWrapper = (args) => html `
+  <div style="width: 800px; height: 400px;">
+    <apollo-data-line-chart .adData=${args.adData} .adSpec=${args.adSpec}></apollo-data-line-chart>
+  </div>
+`;
+export const MonthlySalesByProduct = {
+    args: {
+        adData: lineExamples[1].props.adData,
+        adSpec: lineExamples[1].props.adSpec ?? {},
+    },
+    render: args => chartWrapper(args),
+    parameters: {
+        codeGenerator: (args, framework) => getCodeForFramework({ adData: args.adData ?? lineExamples[1].props.adData, adSpec: args.adSpec ?? lineExamples[1].props.adSpec ?? {} }, framework),
+        docs: {
+            description: { story: lineExamples[1].description },
+            source: {
+                language: 'tsx',
+                type: 'dynamic',
+                transform: (_code, storyContext) => {
+                    try {
+                        const framework = storyContext?.globals?.framework || 'react';
+                        const props = {
+                            adData: storyContext?.args?.adData ?? lineExamples[1].props.adData,
+                            adSpec: storyContext?.args?.adSpec ?? lineExamples[1].props.adSpec ?? {},
+                        };
+                        return getCodeForFramework(props, framework);
+                    }
+                    catch (error) {
+                        console.error('Error in transform function:', error);
+                        return `<apollo-data-line-chart />`;
+                    }
+                },
+            },
+        },
+    },
+};

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: 'f6c1e8d9e9a6ba41dbbf8c2c5737895b96b0915d' }, h("div", { key: '2aeba82bc31c5995a3d5b532c339f5b45ae850f7', 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/components/apollo-data-scatter/apollo-data-scatter.stories.js

@@ -0,0 +1,147 @@
+import { html } from "lit-html";
+import { generateReactCode, generateVueCode, generateWebComponentCode, generateInstallationDocs } from "../../utils/code-generator";
+import { scatterExamples } from "../../examples/apollo-data-scatter.examples";
+// Helper function to generate code based on framework
+function getCodeForFramework(props, framework) {
+    switch (framework) {
+        case 'vue':
+            return generateVueCode('apollo-data-scatter-chart', props);
+        case 'webcomponent':
+            return generateWebComponentCode('apollo-data-scatter-chart', props);
+        case 'react':
+        default:
+            return generateReactCode('apollo-data-scatter-chart', props);
+    }
+}
+const metaDetail = `interface ScatterDataItem {
+  category: string;
+  xValue: number;
+  yValue: number;
+  pointStyle?: PointStyle;
+}`;
+const meta = {
+    title: 'Apollo Data/Scatter Chart',
+    tags: ['autodocs'],
+    argTypes: {
+        adData: {
+            control: 'object',
+            description: 'Array of data items to display in the scatter chart. Each item represents a single plotted point defined by its category, xValue, and yValue.',
+            table: {
+                type: {
+                    summary: 'ScatterDataItem[]',
+                    detail: metaDetail,
+                },
+                defaultValue: { summary: '[]' },
+            },
+        },
+        adSpec: {
+            control: 'object',
+            description: 'Optional specification object for customizing the scatter chart appearance, including axis titles, point styling, category-based styling, and tooltip behavior.',
+            table: {
+                type: {
+                    summary: 'ScatterSpec',
+                    detail: 'interface ScatterSpec {\n' +
+                        '  yAxisTitle?: string;\n' +
+                        '  xAxisTitle?: string;\n' +
+                        '  defaultPointStyle?: PointStyle;\n' +
+                        '  pointStyle?: PointStyle;\n' +
+                        '  categoryPointStyleMap?: {\n' +
+                        '    [categoryName: string]: PointStyle;\n' +
+                        '  };\n' +
+                        "  tooltip?: 'auto' | 'none';\n" +
+                        '}',
+                },
+                defaultValue: { summary: '{}' },
+            },
+        },
+    },
+    decorators: [
+        (story, context) => {
+            const framework = context.globals?.framework || 'react';
+            // Update visibility of installation sections when framework changes
+            setTimeout(() => {
+                const doc = globalThis.document;
+                if (doc) {
+                    const installSections = {
+                        react: doc.querySelector('.install-react'),
+                        vue: doc.querySelector('.install-vue'),
+                        webcomponent: doc.querySelector('.install-webcomponent'),
+                    };
+                    // Hide all sections first
+                    Object.values(installSections).forEach((section) => {
+                        if (section) {
+                            section.setAttribute('style', 'display: none;');
+                        }
+                    });
+                    // Show only the selected framework
+                    const selectedSection = installSections[framework];
+                    if (selectedSection) {
+                        selectedSection.setAttribute('style', 'display: block;');
+                    }
+                }
+            }, 0);
+            return story();
+        },
+    ],
+    parameters: {
+        docs: {
+            description: {
+                component: `${generateInstallationDocs('react', 'apollo-data-scatter-chart')}
+
+${generateInstallationDocs('vue', 'apollo-data-scatter-chart')}
+
+${generateInstallationDocs('webcomponent', 'apollo-data-scatter-chart')}
+
+---
+
+## Description
+
+AA Scatter Chart is used to visualize the relationship between two numeric variables by plotting individual data points on a two-dimensional plane. Each point represents a single data item, positioned based on its xValue and yValue.
+
+**Tip:** Use the Framework selector in the toolbar above to switch between React, Vue, and Web Component installation instructions and code examples.`,
+            },
+        },
+        viewMode: 'story',
+    },
+};
+export default meta;
+// Single interactive story
+export const ApolloDataScatter = {
+    args: {
+        adData: scatterExamples[0].props.adData,
+        adSpec: scatterExamples[0].props.adSpec || {},
+    },
+    render: args => html `
+    <div style="width: 600px; height: 400px;">
+      <apollo-data-scatter-chart .adData=${args.adData} .adSpec=${args.adSpec}></apollo-data-scatter-chart>
+    </div>
+  `,
+    parameters: {
+        // Code generator function for the Code addon panel
+        codeGenerator: (args, framework) => getCodeForFramework(args, framework),
+        docs: {
+            description: {
+                story: 'Interactive scatter chart. Modify the data and spec using the controls below, switch between React, Vue, or Web Component using the Framework selector in the toolbar, and view the generated code in the Code tab.',
+            },
+            source: {
+                language: 'tsx',
+                type: 'dynamic',
+                transform: (_code, storyContext) => {
+                    try {
+                        const framework = storyContext?.globals?.framework || 'react';
+                        const props = {
+                            adData: storyContext?.args?.adData || [],
+                            adSpec: storyContext?.args?.adSpec || {},
+                        };
+                        return getCodeForFramework(props, framework);
+                    }
+                    catch (error) {
+                        // eslint-disable-next-line no-console
+                        console.error('Error in transform function:', error);
+                        return `<apollo-data-scatter-chart />`;
+                    }
+                },
+            },
+        },
+    },
+};