@xplortech/apollo-data 0.0.5 → 0.0.7

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

@@ -0,0 +1,132 @@
+import { html } from "lit-html";
+import { donutExamples } from "../../examples/apollo-data-donut.examples";
+import { generateReactCode, generateVueCode, generateWebComponentCode, generateInstallationDocs } from "../../utils/code-generator";
+// Helper function to generate code based on framework
+function getCodeForFramework(props, framework) {
+    switch (framework) {
+        case 'vue':
+            return generateVueCode('apollo-data-donut-chart', props);
+        case 'webcomponent':
+            return generateWebComponentCode('apollo-data-donut-chart', props);
+        case 'react':
+        default:
+            return generateReactCode('apollo-data-donut-chart', props);
+    }
+}
+const meta = {
+    title: 'Apollo Data/Donut Chart',
+    tags: ['autodocs'],
+    argTypes: {
+        adData: {
+            control: 'object',
+            description: 'Array of data items to display in the donut chart. Each item must have a category (string) and value (number).',
+            table: {
+                type: {
+                    summary: 'DonutDataItem[]',
+                    detail: 'interface DonutDataItem {\n  category: string;\n  value: number;\n}',
+                },
+                defaultValue: { summary: '[]' },
+            },
+        },
+        adSpec: {
+            control: 'object',
+            description: 'Optional specification object for customizing the chart appearance, such as custom color sets, prefix , suffix and center text',
+            table: {
+                type: {
+                    summary: 'DonutSpec',
+                    detail: 'interface DonutSpec {\n  colorSet?: string[];\n  prefix?: string;\n  suffix?: string;\n  centerText: string;\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-donut-chart')}
+
+${generateInstallationDocs('vue', 'apollo-data-donut-chart')}
+
+${generateInstallationDocs('webcomponent', 'apollo-data-donut-chart')}
+
+---
+
+## Description
+
+A donut chart component built with Vega that displays data in a circular format with interactive hover effects. Use the controls below to modify the data and see the code examples update automatically.
+
+**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 ApolloDataDonut = {
+    args: {
+        adData: donutExamples[5].props.adData,
+        adSpec: donutExamples[5].props.adSpec || {},
+    },
+    render: args => html `
+    <div style="width: 600px; height: 400px;">
+      <apollo-data-donut-chart .adData=${args.adData} .adSpec=${args.adSpec}></apollo-data-donut-chart>
+    </div>
+  `,
+    parameters: {
+        // Code generator function for the Code addon panel
+        codeGenerator: (args, framework) => getCodeForFramework(args, framework),
+        docs: {
+            description: {
+                story: 'Interactive donut 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-donut-chart />`;
+                    }
+                },
+            },
+        },
+    },
+};

package/dist/collection/components/apollo-data-heat-map/apollo-data-heat-map.js

@@ -0,0 +1,208 @@
+import { h, Host } from "@stencil/core";
+import { ApolloBase } from "../../apollo-data-base";
+export class ApolloDataHeatMap extends ApolloBase {
+    constructor() {
+        super();
+    }
+    el = null;
+    /**
+     * Data for the heat map. Each item defines a cell by xLabel, yLabel, and value.
+     * @property {string} xLabel - Label for the X-axis (horizontal).
+     * @property {string} yLabel - Label for the Y-axis (vertical).
+     * @property {number} value - Numeric value encoded as color.
+     */
+    adData = [];
+    /**
+     * Optional specification for axis titles, color range, and tooltip behavior.
+     * @property {string} [xAxisTitle] - Label for the X-axis.
+     * @property {string} [yAxisTitle] - Label for the Y-axis.
+     * @property {string[]} [colorRange] - Two or more colors for the value scale (Vega interpolates between them).
+     * @property {'auto' | 'none'} [tooltip] - Tooltip behavior.
+     */
+    adSpec = {};
+    async componentDidRender() {
+        await this.renderChart();
+    }
+    DEFAULT_COLOR_RANGE = ['#e8f4f8', '#0066a1'];
+    // @ts-ignore
+    async getViewData(data, spec) {
+        const rawRange = spec?.colorRange;
+        const colorRange = Array.isArray(rawRange) && rawRange.length >= 2 ? rawRange : this.DEFAULT_COLOR_RANGE;
+        const tooltip = spec?.tooltip !== 'none';
+        const valid = data.filter(d => d != null && typeof d.xLabel === 'string' && typeof d.yLabel === 'string' && d.xLabel !== '' && d.yLabel !== '' && typeof d.value === 'number');
+        const xLabels = [...new Set(valid.map(d => d.xLabel))];
+        const yLabels = [...new Set(valid.map(d => d.yLabel))];
+        return {
+            $schema: 'https://vega.github.io/schema/vega/v6.json',
+            description: 'A heat map with xLabel and yLabel categories and value encoded as color.',
+            width: 450,
+            height: 350,
+            padding: { left: 5, top: 5, bottom: 5, right: 70 },
+            autosize: { type: 'fit', resize: true },
+            data: [
+                {
+                    name: 'source',
+                    values: valid,
+                },
+            ],
+            scales: [
+                {
+                    name: 'xscale',
+                    type: 'band',
+                    range: [0, { signal: 'width' }],
+                    domain: xLabels,
+                    padding: 0.05,
+                },
+                {
+                    name: 'yscale',
+                    type: 'band',
+                    range: [{ signal: 'height' }, 0],
+                    domain: yLabels,
+                    padding: 0.05,
+                },
+                {
+                    name: 'color',
+                    type: 'sequential',
+                    range: colorRange,
+                    domain: { data: 'source', field: 'value' },
+                    zero: true,
+                },
+            ],
+            axes: [
+                {
+                    orient: 'bottom',
+                    scale: 'xscale',
+                    title: spec?.xAxisTitle ?? 'X',
+                    labelAngle: -90,
+                    labelAlign: 'right',
+                },
+                {
+                    orient: 'left',
+                    scale: 'yscale',
+                    title: spec?.yAxisTitle ?? 'Y',
+                },
+            ],
+            legends: [
+                {
+                    type: 'gradient',
+                    fill: 'color',
+                    orient: 'right',
+                    direction: 'vertical',
+                    title: 'Value',
+                    titleLimit: 120,
+                    tickCount: 5,
+                    format: 's',
+                },
+            ],
+            marks: [
+                {
+                    type: 'rect',
+                    from: { data: 'source' },
+                    encode: {
+                        ...(tooltip && {
+                            enter: {
+                                tooltip: {
+                                    signal: "datum.xLabel + ' | ' + datum.yLabel + ' | ' + format(datum.value, ',.2f')",
+                                },
+                            },
+                        }),
+                        update: {
+                            x: { scale: 'xscale', field: 'xLabel' },
+                            y: { scale: 'yscale', field: 'yLabel' },
+                            width: { scale: 'xscale', band: 1 },
+                            height: { scale: 'yscale', band: 1 },
+                            fill: { scale: 'color', field: 'value' },
+                        },
+                        hover: {
+                            fill: { value: 'firebrick' },
+                            opacity: { value: 0.8 },
+                        },
+                    },
+                },
+            ],
+        };
+    }
+    render() {
+        return (h(Host, { key: 'd15b44f268f153498e61dc7829fe0d45f315a992' }, h("div", { key: '7783444f4675c885980f1cd571737d506e00fdbc', id: "container", style: { width: '100%', height: '100%' } })));
+    }
+    static get is() { return "apollo-data-heat-map"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "adData": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | HeatMapDataItem[]",
+                    "resolved": "HeatMapDataItem[] | string",
+                    "references": {
+                        "HeatMapDataItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-data/src/components/apollo-data-heat-map/apollo-data-heat-map.tsx",
+                            "id": "src/components/apollo-data-heat-map/apollo-data-heat-map.tsx::HeatMapDataItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "property",
+                            "text": "{string} xLabel - Label for the X-axis (horizontal)."
+                        }, {
+                            "name": "property",
+                            "text": "{string} yLabel - Label for the Y-axis (vertical)."
+                        }, {
+                            "name": "property",
+                            "text": "{number} value - Numeric value encoded as color."
+                        }],
+                    "text": "Data for the heat map. Each item defines a cell by xLabel, yLabel, and value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ad-data",
+                "defaultValue": "[]"
+            },
+            "adSpec": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | HeatMapSpec",
+                    "resolved": "HeatMapSpec | string",
+                    "references": {
+                        "HeatMapSpec": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-data/src/components/apollo-data-heat-map/apollo-data-heat-map.tsx",
+                            "id": "src/components/apollo-data-heat-map/apollo-data-heat-map.tsx::HeatMapSpec"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "property",
+                            "text": "{string} [xAxisTitle] - Label for the X-axis."
+                        }, {
+                            "name": "property",
+                            "text": "{string} [yAxisTitle] - Label for the Y-axis."
+                        }, {
+                            "name": "property",
+                            "text": "{string[]} [colorRange] - Two or more colors for the value scale (Vega interpolates between them)."
+                        }, {
+                            "name": "property",
+                            "text": "{'auto' | 'none'} [tooltip] - Tooltip behavior."
+                        }],
+                    "text": "Optional specification for axis titles, color range, and tooltip behavior."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ad-spec",
+                "defaultValue": "{}"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/apollo-data-heat-map/apollo-data-heat-map.stories.js

@@ -0,0 +1,137 @@
+import { html } from "lit-html";
+import { generateReactCode, generateVueCode, generateWebComponentCode, generateInstallationDocs } from "../../utils/code-generator";
+import { heatMapExamples } from "../../examples/apollo-data-heat-map.examples";
+function getCodeForFramework(props, framework) {
+    switch (framework) {
+        case 'vue':
+            return generateVueCode('apollo-data-heat-map', props);
+        case 'webcomponent':
+            return generateWebComponentCode('apollo-data-heat-map', props);
+        case 'react':
+        default:
+            return generateReactCode('apollo-data-heat-map', props);
+    }
+}
+const meta = {
+    title: 'Apollo Data/Heat Map',
+    tags: ['autodocs'],
+    argTypes: {
+        adData: {
+            control: 'object',
+            description: 'Array of data items. Each item defines a cell by xLabel, yLabel, and value (value is encoded as color).',
+            table: {
+                type: {
+                    summary: 'HeatMapDataItem[]',
+                    detail: 'interface HeatMapDataItem {\n  xLabel: string;\n  yLabel: string;\n  value: number;\n}',
+                },
+                defaultValue: { summary: '[]' },
+            },
+        },
+        adSpec: {
+            control: 'object',
+            description: 'Optional specification for axis titles, color range, and tooltip behavior.',
+            table: {
+                type: {
+                    summary: 'HeatMapSpec',
+                    detail: `interface HeatMapSpec {
+  xAxisTitle?: string;
+  yAxisTitle?: string;
+  colorRange?: string[];
+  tooltip?: 'auto' | 'none';
+}`,
+                },
+                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-heat-map')}
+
+${generateInstallationDocs('vue', 'apollo-data-heat-map')}
+
+${generateInstallationDocs('webcomponent', 'apollo-data-heat-map')}
+
+---
+
+## Description
+
+A Heat Map visualizes values in a matrix of rows and columns using color. Each cell is defined by a row category, a column category, and a numeric value that is encoded on a color scale.
+
+**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;
+const chartWrapper = (args) => html `
+  <div style="width: 640px; height: 380px;">
+    <apollo-data-heat-map .adData=${args.adData} .adSpec=${args.adSpec}></apollo-data-heat-map>
+  </div>
+`;
+const sharedParams = {
+    codeGenerator: (args, framework) => getCodeForFramework(args, framework),
+    docs: {
+        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) {
+                    console.error('Error in transform function:', error);
+                    return `<apollo-data-heat-map />`;
+                }
+            },
+        },
+    },
+};
+export const WeatherDayVsMonth = {
+    args: {
+        adData: heatMapExamples[0].props.adData,
+        adSpec: heatMapExamples[0].props.adSpec || {},
+    },
+    render: chartWrapper,
+    parameters: {
+        ...sharedParams,
+        docs: {
+            description: {
+                story: 'Average high temperature (°F) by day of month and month. Blue = cooler, red = warmer.',
+            },
+            ...sharedParams.docs,
+        },
+    },
+};

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

@@ -28,12 +28,13 @@ export class ApolloDataLineChart extends ApolloBase {
         await this.renderChart();
     }
     injectTooltipStyles() {
-        if (ApolloDataLineChart.tooltipStylesInjected) {
+        const chartClass = this.constructor;
+        if (chartClass.tooltipStylesInjected) {
             return;
         }
         const styleId = 'apollo-data-line-tooltip-styles';
         if (document.getElementById(styleId)) {
-            ApolloDataLineChart.tooltipStylesInjected = true;
+            chartClass.tooltipStylesInjected = true;
             return;
         }
         const style = document.createElement('style');
@@ -82,16 +83,17 @@ export class ApolloDataLineChart extends ApolloBase {
       }
     `;
         document.head.appendChild(style);
-        ApolloDataLineChart.tooltipStylesInjected = true;
+        chartClass.tooltipStylesInjected = true;
     }
     // @ts-ignore
     async getViewData(data, spec) {
+        const componentTag = this.el?.tagName?.toLowerCase() ?? 'apollo-data-line-chart';
         if (!spec) {
-            throw new Error('adSpec is required for apollo-data-line-chart');
+            throw new Error(`adSpec is required for ${componentTag}`);
         }
         const { tooltipPrefix = '', currencySymbol = '' } = spec;
         if (!data || data.length === 0) {
-            throw new Error('Data is required for apollo-data-line-chart');
+            throw new Error(`Data is required for ${componentTag}`);
         }
         const uniqueCategories = Array.from(new Set(data.map(item => item.category)));
         const uniqueXValues = [...new Set(data.map(item => item.xValue))].sort((a, b) => a - b);
@@ -282,7 +284,7 @@ export class ApolloDataLineChart extends ApolloBase {
         };
     }
     render() {
-        return (h(Host, { key: '7799f01536f212d7a06da08c1e463d8529c5bf21' }, h("div", { key: '25463f10bbc0f5443c35ab03b5b53164d9ad1efd', id: "container", style: { width: '100%', height: '100%' } })));
+        return (h(Host, { key: 'fd64f4abb624b14a878808b23345910c9b23a72c' }, h("div", { key: 'aeda5086730862ca1368a0374caf2d918969839d', id: "container", style: { width: '100%', height: '100%' } })));
     }
     static get is() { return "apollo-data-line-chart"; }
     static get encapsulation() { return "shadow"; }

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

@@ -235,7 +235,7 @@ export class ApolloDataScatterChart extends ApolloBase {
         };
     }
     render() {
-        return (h(Host, { key: '60005ab926b0153b3e31729a69f5a64cf6558085' }, h("div", { key: '820de3e0ddbbc2650b9764e279d87531338e72e3', id: "container", style: { width: '100%', height: '100%' } })));
+        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"; }