@xplortech/apollo-data 0.0.5 → 0.0.7

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 />`;
+                    }
+                },
+            },
+        },
+    },
+};

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

@@ -0,0 +1,294 @@
+import { h, Host } from "@stencil/core";
+import { ApolloBase } from "../../apollo-data-base";
+export class ApolloDataWorldMapChart extends ApolloBase {
+    constructor() {
+        super();
+    }
+    el = null;
+    /**
+     * Represents a single data point in the world map chart.
+     * @property {number} lon - Longitude coordinate used to position the point on the map.
+     * @property {number} lat - Latitude coordinate used to position the point on the map.
+     * @property {number} value - A numeric metric tied to the point.
+     * @property {string} label - Label displayed for the place or location represented by the point.
+     */
+    adData = [];
+    /**
+     * @property {string} pinColor - Color of the pin representing the point.
+     * @property {'circle' | 'square' | 'triangle'} pinShape - Shape of the pin representing the point.
+     */
+    adSpec = {};
+    async componentDidRender() {
+        await this.renderChart();
+    }
+    // @ts-ignore
+    // eslint-disable-next-line class-methods-use-this
+    async getViewData(data, spec) {
+        const pinColor = spec?.pinColor || '#d3544b';
+        const pinShape = spec?.pinShape || 'circle';
+        return {
+            $schema: 'https://vega.github.io/schema/vega/v6.json',
+            description: 'World map + tooltip + points.',
+            width: 600,
+            height: 400,
+            autosize: 'none',
+            background: '#cfe3f1',
+            signals: [
+                {
+                    name: 'scale',
+                    value: 85,
+                    on: [
+                        {
+                            events: { type: 'wheel', consume: true },
+                            update: 'clamp(scale * pow(1.002, -event.deltaY), 85, 2000)',
+                        },
+                    ],
+                },
+                {
+                    name: 'xc',
+                    value: 0,
+                    on: [{ events: 'mousedown', update: 'x()' }],
+                },
+                {
+                    name: 'yc',
+                    value: 0,
+                    on: [{ events: 'mousedown', update: 'y()' }],
+                },
+                {
+                    name: 'xo',
+                    value: 300,
+                    on: [{ events: 'mousedown', update: 'tx' }],
+                },
+                {
+                    name: 'yo',
+                    value: 175,
+                    on: [{ events: 'mousedown', update: 'ty' }],
+                },
+                {
+                    name: 'tx',
+                    value: 300,
+                    on: [
+                        {
+                            events: '[mousedown, window:mouseup] > window:mousemove',
+                            update: 'xo - (x() - xc)',
+                        },
+                    ],
+                },
+                {
+                    name: 'ty',
+                    value: 270,
+                    on: [
+                        {
+                            events: '[mousedown, window:mouseup] > window:mousemove',
+                            update: 'clamp(yo + y() - yc, -scale * 0.5, scale * 2.5 + height)',
+                        },
+                    ],
+                },
+            ],
+            projections: [
+                {
+                    name: 'projection',
+                    type: 'mercator',
+                    scale: { signal: 'scale' },
+                    rotate: [{ signal: '-(tx - width / 2) * 180 / (scale * PI)' }, 0, 0],
+                    center: [0, 0],
+                    translate: [{ signal: 'width / 2' }, { signal: 'ty' }],
+                },
+            ],
+            data: [
+                {
+                    name: 'names',
+                    url: 'https://raw.githubusercontent.com/KoGor/Map-Icons-Generator/master/data/world-110m-country-names.tsv',
+                    format: { type: 'tsv' },
+                    transform: [{ type: 'formula', as: 'id', expr: 'toNumber(datum.id)' }],
+                },
+                {
+                    name: 'metrics',
+                    values: data,
+                },
+                {
+                    name: 'world',
+                    url: 'https://vega.github.io/editor/data/world-110m.json',
+                    format: { type: 'topojson', feature: 'countries' },
+                    transform: [
+                        {
+                            type: 'lookup',
+                            from: 'names',
+                            key: 'id',
+                            fields: ['id'],
+                            values: ['name'],
+                            as: ['name'],
+                        },
+                        { type: 'filter', expr: "datum.name != 'Antarctica'" },
+                    ],
+                },
+                {
+                    name: 'points',
+                    source: 'metrics',
+                    transform: [
+                        { type: 'filter', expr: 'isValid(datum.lon) && isValid(datum.lat)' },
+                        {
+                            type: 'geopoint',
+                            projection: 'projection',
+                            fields: ['lon', 'lat'],
+                            as: ['x', 'y'],
+                        },
+                    ],
+                },
+                {
+                    name: 'continentLabels',
+                    values: [
+                        { name: 'North America', lon: -105, lat: 45 },
+                        { name: 'South America', lon: -60, lat: -15 },
+                        { name: 'Europe', lon: 15, lat: 52 },
+                        { name: 'Africa', lon: 20, lat: 5 },
+                        { name: 'Asia', lon: 90, lat: 35 },
+                        { name: 'Oceania', lon: 135, lat: -25 },
+                    ],
+                    transform: [
+                        {
+                            type: 'geopoint',
+                            projection: 'projection',
+                            fields: ['lon', 'lat'],
+                            as: ['x', 'y'],
+                        },
+                    ],
+                },
+            ],
+            marks: [
+                {
+                    type: 'shape',
+                    from: { data: 'world' },
+                    transform: [{ type: 'geoshape', projection: 'projection' }],
+                    encode: {
+                        update: {
+                            fill: { value: '#8fbf8f' },
+                            stroke: { value: '#6c8c8c' },
+                            strokeWidth: { value: 0.7 },
+                            tooltip: { signal: "{Country: datum.name ? datum.name : 'Unknown'}" },
+                        },
+                        hover: {
+                            stroke: { value: '#2b3a42' },
+                            strokeWidth: { value: 1.3 },
+                        },
+                    },
+                },
+                {
+                    type: 'symbol',
+                    from: { data: 'points' },
+                    encode: {
+                        update: {
+                            x: { field: 'x' },
+                            y: { field: 'y' },
+                            size: { value: 80 },
+                            fill: { value: pinColor },
+                            stroke: { value: 'white' },
+                            shape: { value: pinShape },
+                            strokeWidth: { value: 1 },
+                            tooltip: {
+                                signal: '{Label: datum.label, Value: datum.value, Latitude: datum.lat, Longitude: datum.lon}',
+                            },
+                        },
+                    },
+                },
+                {
+                    type: 'text',
+                    from: { data: 'continentLabels' },
+                    encode: {
+                        update: {
+                            x: { field: 'x' },
+                            y: { field: 'y' },
+                            text: { field: 'name' },
+                            align: { value: 'center' },
+                            baseline: { value: 'middle' },
+                            fontSize: { value: 12 },
+                            fontWeight: { value: '600' },
+                            fill: { value: '#2b3a42' },
+                            fillOpacity: { value: 0.5 },
+                        },
+                    },
+                },
+            ],
+        };
+    }
+    render() {
+        return (h(Host, { key: '8053ea3b9706cdd03a430157b3f63e93c1201d1f' }, h("div", { key: '514807ae8dd4868d3d74e86c4260b7b9967c0ac2', id: "container", style: { width: '100%', height: '100%' } })));
+    }
+    static get is() { return "apollo-data-world-map-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "adData": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | WorldMapDataItem[]",
+                    "resolved": "WorldMapDataItem[] | string",
+                    "references": {
+                        "WorldMapDataItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-data/src/components/apollo-data-world-map/apollo-data-world-map.tsx",
+                            "id": "src/components/apollo-data-world-map/apollo-data-world-map.tsx::WorldMapDataItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "property",
+                            "text": "{number} lon - Longitude coordinate used to position the point on the map."
+                        }, {
+                            "name": "property",
+                            "text": "{number} lat - Latitude coordinate used to position the point on the map."
+                        }, {
+                            "name": "property",
+                            "text": "{number} value - A numeric metric tied to the point."
+                        }, {
+                            "name": "property",
+                            "text": "{string} label - Label displayed for the place or location represented by the point."
+                        }],
+                    "text": "Represents a single data point in the world map chart."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ad-data",
+                "defaultValue": "[]"
+            },
+            "adSpec": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | WorldMapSpec",
+                    "resolved": "WorldMapSpec | string",
+                    "references": {
+                        "WorldMapSpec": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-data/src/components/apollo-data-world-map/apollo-data-world-map.tsx",
+                            "id": "src/components/apollo-data-world-map/apollo-data-world-map.tsx::WorldMapSpec"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "property",
+                            "text": "{string} pinColor - Color of the pin representing the point."
+                        }, {
+                            "name": "property",
+                            "text": "{'circle' | 'square' | 'triangle'} pinShape - Shape of the pin representing the point."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ad-spec",
+                "defaultValue": "{}"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,126 @@
+import { html } from "lit-html";
+import { worldMapExamples } from "../../examples/apollo-data-world-map.examples";
+import { generateReactCode, generateVueCode, generateWebComponentCode, generateInstallationDocs } from "../../utils/code-generator";
+function getCodeForFramework(props, framework) {
+    switch (framework) {
+        case 'vue':
+            return generateVueCode('apollo-data-world-map-chart', props);
+        case 'webcomponent':
+            return generateWebComponentCode('apollo-data-world-map-chart', props);
+        case 'react':
+        default:
+            return generateReactCode('apollo-data-world-map-chart', props);
+    }
+}
+const meta = {
+    title: 'Apollo Data/World Map Chart',
+    tags: ['autodocs'],
+    argTypes: {
+        adData: {
+            control: 'object',
+            description: 'Array of map data items. Each item contains geographic coordinates (lon/lat), a label, and a value displayed in the tooltip.',
+            table: {
+                type: {
+                    summary: 'WorldMapDataItem[]',
+                    detail: 'interface WorldMapDataItem {\n  lon: number;\n  lat: number;\n  value: number;\n  label: string;\n}',
+                },
+                defaultValue: { summary: '[]' },
+            },
+        },
+        adSpec: {
+            control: 'object',
+            description: 'Optional specification object for world map customization (for example pin color and pin shape).',
+            table: {
+                type: {
+                    summary: 'WorldMapSpec',
+                    detail: "interface WorldMapSpec {\n  pinColor?: string;\n  pinShape?: 'circle' | 'square' | 'triangle';\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-world-map-chart')}
+
+${generateInstallationDocs('vue', 'apollo-data-world-map-chart')}
+
+${generateInstallationDocs('webcomponent', 'apollo-data-world-map-chart')}
+
+---
+
+## Description
+
+A world map chart component built with Vega that renders countries with interactive city markers using longitude and latitude coordinates.
+
+**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: 800px; height: 460px;">
+    <apollo-data-world-map-chart .adData=${args.adData} .adSpec=${args.adSpec}></apollo-data-world-map-chart>
+  </div>
+`;
+export const ApolloDataWorldMap = {
+    args: {
+        adData: worldMapExamples[0].props.adData,
+        adSpec: { ...(worldMapExamples[0].props.adSpec || {}), pinShape: 'circle' },
+    },
+    render: args => chartWrapper(args),
+    parameters: {
+        codeGenerator: (args, framework) => getCodeForFramework(args, framework),
+        docs: {
+            description: {
+                story: 'Interactive world map chart. Modify **adData** and **adSpec** in the controls, switch frameworks from the toolbar, and view generated usage 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) {
+                        console.error('Error in transform function:', error);
+                        return `<apollo-data-world-map-chart />`;
+                    }
+                },
+            },
+        },
+    },
+};