@xplortech/apollo-data 0.0.3-draft.64d0fa1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+
+exports.format = format;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var index = require('./index-Cl7HgRm0.js');
+var appGlobals = require('./app-globals-V2Kpy_OQ.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["apollo-data-bar-chart_2.cjs",[[513,"apollo-data-bar-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-donut-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/apollo-data-base.js

@@ -0,0 +1,38 @@
+// @ts-ignore
+import embed from "vega-embed";
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
+export class ApolloBase {
+    // @ts-ignore
+    getViewData(data, spec) {
+        throw new Error('getViewData is not implemented');
+    }
+    async renderChart() {
+        // Wait for shadow DOM to be ready
+        await new Promise(resolve => setTimeout(resolve, 0));
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        const container = this.el?.shadowRoot?.querySelector('#container');
+        if (!container) {
+            return;
+        }
+        let data;
+        let spec;
+        try {
+            data = typeof this.adData === 'string' ? JSON.parse(this.adData || '[]') : this.adData;
+            spec = typeof this.adSpec === 'string' ? JSON.parse(this.adSpec) : this.adSpec;
+        }
+        catch (err) {
+            console.error('Error parsing data/spec', err);
+            return;
+        }
+        const view = await this.getViewData(data, spec);
+        container.innerHTML = '';
+        await embed(container, view, {
+            actions: false,
+            ast: true,
+            tooltip: {
+                position: 'top',
+                anchor: 'mark',
+            },
+        });
+    }
+}

package/dist/collection/collection-manifest.json

@@ -0,0 +1,13 @@
+{
+  "entries": [
+    "components/apollo-data-bar/apollo-data-bar.js",
+    "components/apollo-data-donut/apollo-data-donut.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.41.3",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,367 @@
+import { h, Host } from "@stencil/core";
+import { ApolloBase } from "../../apollo-data-base";
+import { CHART_COLORS } from "../../utils/constants";
+const FONT_FAMILY = "apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif";
+export class ApolloDataBarChart extends ApolloBase {
+    constructor() {
+        super();
+    }
+    el = null;
+    adData = [];
+    adSpec = null;
+    static tooltipStylesInjected = false;
+    componentDidLoad() {
+        this.injectTooltipStyles();
+    }
+    async componentDidRender() {
+        await this.renderChart();
+    }
+    injectTooltipStyles() {
+        if (ApolloDataBarChart.tooltipStylesInjected) {
+            return;
+        }
+        const styleId = 'apollo-data-bar-tooltip-styles';
+        if (document.getElementById(styleId)) {
+            ApolloDataBarChart.tooltipStylesInjected = true;
+            return;
+        }
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+      #vg-tooltip-element {
+        background-color: #ffffff;
+        border: 1px solid #e1e2e8;
+        border-radius: 0.25rem;
+        box-shadow: 0 4px 6px -1px rgba(48, 45, 59, 0.1), 0 2px 4px -1px rgba(48, 45, 59, 0.05);
+        font-family: apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif;
+        font-weight: 500;
+        padding: 0.25rem 0.75rem;
+        pointer-events: none;
+        text-align: center;
+        transform: translateY(20%);
+        white-space: pre;
+        z-index: 999999999;
+      }
+
+      #vg-tooltip-element table tr td.key {
+        color: #6a6d7d;
+        text-align: center;
+      }
+
+      #vg-tooltip-element table tr td.value {
+        text-align: center;
+      }
+
+      #vg-tooltip-element.dark-theme {
+        background-color: #292632;
+        border: 1px solid #6a6d7d;
+        box-shadow: 0 4px 6px -1px rgba(48, 45, 59, 0.1), 0 2px 4px -1px rgba(48, 45, 59, 0.5);
+        color: #ffffff;
+      }
+
+      #vg-tooltip-element::after {
+        border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent;
+        border-style: solid;
+        border-width: 9px;
+        bottom: -17px;
+        content: '';
+        left: 50%;
+        position: absolute;
+        transform: translateX(-50%);
+      }
+    `;
+        document.head.appendChild(style);
+        ApolloDataBarChart.tooltipStylesInjected = true;
+    }
+    // @ts-ignore
+    async getViewData(data, spec) {
+        if (!spec) {
+            throw new Error('adSpec is required for apollo-data-bar-chart');
+        }
+        const { tooltipPrefix = '', currencySymbol = '' } = spec;
+        if (!data || data.length === 0) {
+            throw new Error('Data is required for apollo-data-bar-chart');
+        }
+        const uniqueCategories = Array.from(new Set(data.map(item => item.category)));
+        const formatNumber = tooltipPrefix ? '.2f' : '.0f';
+        const currencyPrefix = tooltipPrefix ? currencySymbol : '';
+        return {
+            $schema: 'https://vega.github.io/schema/vega/v5.json',
+            config: {
+                text: {
+                    fill: '#6a6d7d',
+                    font: FONT_FAMILY,
+                    labelFontSize: 12,
+                    labelFontWeight: 400,
+                },
+                axis: {
+                    labelColor: '#6a6d7d',
+                    titleColor: '#6a6d7d',
+                    labelFont: FONT_FAMILY,
+                    titleFont: FONT_FAMILY,
+                    titleFontWeight: 400,
+                },
+                legend: {
+                    labelColor: '#6a6d7d',
+                    titleColor: '#6a6d7d',
+                    labelFont: FONT_FAMILY,
+                    titleFont: FONT_FAMILY,
+                    labelFontSize: 12,
+                    labelLimit: 95,
+                },
+                title: {
+                    color: '#6a6d7d',
+                    font: FONT_FAMILY,
+                    labelFontSize: 12,
+                    labelFontWeight: 400,
+                },
+            },
+            height: 250,
+            autosize: { type: 'fit-x', contains: 'padding', resize: true },
+            signals: [
+                {
+                    name: 'containerW',
+                    update: 'max(containerSize()[0], 400)',
+                },
+                {
+                    name: 'legendColumns',
+                    update: 'ceil(containerW / 140)',
+                },
+                {
+                    name: 'hoveredPeriod',
+                    value: null,
+                    on: [
+                        { events: 'rect:mouseover', update: 'datum.period' },
+                        { events: 'rect:mouseout', update: 'null' },
+                    ],
+                },
+            ],
+            width: { signal: 'containerW' },
+            data: [
+                {
+                    name: 'raw',
+                    values: data,
+                },
+                {
+                    name: 'periodTotals',
+                    source: 'raw',
+                    transform: [
+                        {
+                            type: 'aggregate',
+                            groupby: ['periodId'],
+                            fields: ['value'],
+                            ops: ['sum'],
+                            as: ['total'],
+                        },
+                    ],
+                },
+                {
+                    name: 'table',
+                    source: 'raw',
+                    transform: [
+                        {
+                            type: 'lookup',
+                            from: 'periodTotals',
+                            key: 'periodId',
+                            fields: ['periodId'],
+                            values: ['total'],
+                            as: ['total'],
+                        },
+                        {
+                            type: 'stack',
+                            groupby: ['periodId'],
+                            sort: { field: 'category' },
+                            field: 'value',
+                        },
+                        {
+                            type: 'formula',
+                            as: 'periodId',
+                            expr: 'datum.periodId',
+                        },
+                        {
+                            type: 'formula',
+                            as: 'labelOnly',
+                            expr: 'datum.label',
+                        },
+                    ],
+                },
+                {
+                    name: 'periodLabels',
+                    source: 'raw',
+                    transform: [
+                        {
+                            type: 'aggregate',
+                            groupby: ['periodId', 'label'],
+                        },
+                    ],
+                },
+            ],
+            scales: [
+                {
+                    name: 'x',
+                    type: 'band',
+                    domain: { data: 'table', field: 'periodId' },
+                    range: 'width',
+                    paddingInner: 0.35,
+                    paddingOuter: 0.02,
+                },
+                {
+                    name: 'xLabels',
+                    type: 'ordinal',
+                    domain: { data: 'periodLabels', field: 'periodId' },
+                    range: { data: 'periodLabels', field: 'label' },
+                },
+                {
+                    name: 'y',
+                    type: 'linear',
+                    domain: { data: 'table', field: 'y1' },
+                    nice: true,
+                    zero: true,
+                    range: 'height',
+                },
+                {
+                    name: 'color',
+                    type: 'ordinal',
+                    domain: uniqueCategories,
+                    range: spec?.colorSet ?? CHART_COLORS,
+                },
+            ],
+            axes: [
+                {
+                    orient: 'bottom',
+                    scale: 'x',
+                    title: spec?.xAxisTitle,
+                    labelPadding: 12,
+                    titlePadding: 12,
+                    labelAngle: -90,
+                    labelAlign: 'right',
+                    labelBaseline: 'middle',
+                    tickSize: 3,
+                    labelFontSize: 12,
+                    titleFontSize: 14,
+                    ticks: false,
+                    domain: false,
+                    encode: {
+                        labels: {
+                            update: {
+                                text: { signal: "scale('xLabels', datum.value)" },
+                            },
+                        },
+                    },
+                },
+                {
+                    orient: 'left',
+                    scale: 'y',
+                    title: spec?.yAxisTitle || '',
+                    format: ',.0f',
+                    grid: true,
+                    tickCount: 6,
+                    labelFontSize: 12,
+                    titleFontSize: 14,
+                    ticks: false,
+                    domain: false,
+                    tickBand: 'extent',
+                    labelPadding: 10,
+                },
+            ],
+            legends: [
+                {
+                    fill: 'color',
+                    orient: 'bottom',
+                    direction: 'horizontal',
+                    columns: { signal: 'legendColumns' },
+                    title: null,
+                    symbolType: 'square',
+                    rowPadding: 8,
+                    symbolOffset: -35,
+                    symbolSize: 100,
+                    labelOffset: 8,
+                    labelLimit: 95,
+                },
+            ],
+            marks: [
+                {
+                    type: 'rect',
+                    from: { data: 'table' },
+                    encode: {
+                        enter: {
+                            x: { scale: 'x', field: 'periodId' },
+                            width: { scale: 'x', band: 1 },
+                            y: { scale: 'y', field: 'y1' },
+                            y2: { scale: 'y', field: 'y0' },
+                            fill: { scale: 'color', field: 'category' },
+                            tooltip: {
+                                signal: `datum.category + ': ${currencyPrefix}' + format(datum.value, ',${formatNumber}') + '\\nTotal: ${currencyPrefix}' + format(datum.total, ',${formatNumber}')`,
+                            },
+                        },
+                        update: {
+                            opacity: [{ test: 'hoveredPeriod && datum.period !== hoveredPeriod', value: 0.2 }, { value: 1 }],
+                        },
+                    },
+                },
+            ],
+        };
+    }
+    render() {
+        return (h(Host, { key: '86ed2e74e5abd57e684a93bc9cf6a014b3ed081c' }, h("div", { key: '96e5f7dd2dfa6a104ca709d1399308a86041c2f3', id: "container", style: { width: '100%', height: '100%' } })));
+    }
+    static get is() { return "apollo-data-bar-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "adData": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | BarDataItem[]",
+                    "resolved": "BarDataItem[] | string",
+                    "references": {
+                        "BarDataItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-data/src/components/apollo-data-bar/apollo-data-bar.tsx",
+                            "id": "src/components/apollo-data-bar/apollo-data-bar.tsx::BarDataItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ad-data",
+                "defaultValue": "[]"
+            },
+            "adSpec": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | BarSpec",
+                    "resolved": "BarSpec | string",
+                    "references": {
+                        "BarSpec": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-data/src/components/apollo-data-bar/apollo-data-bar.tsx",
+                            "id": "src/components/apollo-data-bar/apollo-data-bar.tsx::BarSpec"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ad-spec",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}