@xplortech/apollo-data 0.0.5 → 0.0.6

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

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

@@ -0,0 +1,131 @@
+/** Average high temperature (°F) by day of month and month – weather heat map. */
+const weatherDayVsMonth = (() => {
+    const days = ['1', '5', '10', '15', '20', '25', '30'];
+    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    // Base avg high °F by month (mid-latitude style), with slight variation by day-in-month
+    const baseByMonth = [42, 45, 54, 64, 74, 82, 87, 85, 78, 66, 54, 44];
+    const items = [];
+    days.forEach((day, i) => {
+        months.forEach((month, j) => {
+            const base = baseByMonth[j];
+            const dayOffset = (i - 3) * 2; // slightly warmer in middle of month
+            items.push({ xLabel: month, yLabel: `Day ${day}`, value: Math.round(base + dayOffset) });
+        });
+    });
+    return items;
+})();
+/** Quarterly revenue (K) by region – typical sales dashboard. */
+const salesByRegionQuarter = [
+    { xLabel: 'Q1', yLabel: 'North', value: 142 },
+    { xLabel: 'Q2', yLabel: 'North', value: 168 },
+    { xLabel: 'Q3', yLabel: 'North', value: 195 },
+    { xLabel: 'Q4', yLabel: 'North', value: 218 },
+    { xLabel: 'Q1', yLabel: 'South', value: 98 },
+    { xLabel: 'Q2', yLabel: 'South', value: 112 },
+    { xLabel: 'Q3', yLabel: 'South', value: 134 },
+    { xLabel: 'Q4', yLabel: 'South', value: 156 },
+    { xLabel: 'Q1', yLabel: 'East', value: 187 },
+    { xLabel: 'Q2', yLabel: 'East', value: 203 },
+    { xLabel: 'Q3', yLabel: 'East', value: 221 },
+    { xLabel: 'Q4', yLabel: 'East', value: 245 },
+    { xLabel: 'Q1', yLabel: 'West', value: 76 },
+    { xLabel: 'Q2', yLabel: 'West', value: 89 },
+    { xLabel: 'Q3', yLabel: 'West', value: 102 },
+    { xLabel: 'Q4', yLabel: 'West', value: 118 },
+];
+/** Support tickets by product and month. */
+const supportTicketsByProductMonth = [
+    { xLabel: 'Jan', yLabel: 'Billing', value: 124 },
+    { xLabel: 'Feb', yLabel: 'Billing', value: 98 },
+    { xLabel: 'Mar', yLabel: 'Billing', value: 156 },
+    { xLabel: 'Apr', yLabel: 'Billing', value: 87 },
+    { xLabel: 'May', yLabel: 'Billing', value: 112 },
+    { xLabel: 'Jun', yLabel: 'Billing', value: 134 },
+    { xLabel: 'Jan', yLabel: 'Onboarding', value: 89 },
+    { xLabel: 'Feb', yLabel: 'Onboarding', value: 102 },
+    { xLabel: 'Mar', yLabel: 'Onboarding', value: 145 },
+    { xLabel: 'Apr', yLabel: 'Onboarding', value: 78 },
+    { xLabel: 'May', yLabel: 'Onboarding', value: 91 },
+    { xLabel: 'Jun', yLabel: 'Onboarding', value: 67 },
+    { xLabel: 'Jan', yLabel: 'API', value: 45 },
+    { xLabel: 'Feb', yLabel: 'API', value: 52 },
+    { xLabel: 'Mar', yLabel: 'API', value: 61 },
+    { xLabel: 'Apr', yLabel: 'API', value: 38 },
+    { xLabel: 'May', yLabel: 'API', value: 49 },
+    { xLabel: 'Jun', yLabel: 'API', value: 55 },
+    { xLabel: 'Jan', yLabel: 'Mobile App', value: 203 },
+    { xLabel: 'Feb', yLabel: 'Mobile App', value: 187 },
+    { xLabel: 'Mar', yLabel: 'Mobile App', value: 221 },
+    { xLabel: 'Apr', yLabel: 'Mobile App', value: 198 },
+    { xLabel: 'May', yLabel: 'Mobile App', value: 234 },
+    { xLabel: 'Jun', yLabel: 'Mobile App', value: 256 },
+];
+/** Average response time (ms) by service and environment. */
+const responseTimeByServiceEnv = [
+    { xLabel: 'Staging', yLabel: 'Auth', value: 42 },
+    { xLabel: 'Production', yLabel: 'Auth', value: 38 },
+    { xLabel: 'Staging', yLabel: 'Payments', value: 128 },
+    { xLabel: 'Production', yLabel: 'Payments', value: 95 },
+    { xLabel: 'Staging', yLabel: 'Search', value: 215 },
+    { xLabel: 'Production', yLabel: 'Search', value: 178 },
+    { xLabel: 'Staging', yLabel: 'Notifications', value: 56 },
+    { xLabel: 'Production', yLabel: 'Notifications', value: 48 },
+    { xLabel: 'Staging', yLabel: 'Reporting', value: 890 },
+    { xLabel: 'Production', yLabel: 'Reporting', value: 720 },
+];
+export const heatMapExamples = [
+    {
+        name: 'Weather: day vs month',
+        description: 'Average high temperature (°F) by day of month and month.',
+        props: {
+            adData: weatherDayVsMonth,
+            adSpec: {
+                xAxisTitle: 'Month',
+                yAxisTitle: 'Day of month',
+                colorRange: ['#2166ac', '#b2182b'],
+                tooltip: 'auto',
+            },
+        },
+        notes: 'Cool (blue) to warm (red) temperature scale; diverging style.',
+    },
+    {
+        name: 'Sales by region and quarter',
+        description: 'Quarterly revenue (K) by region – typical sales or revenue dashboard.',
+        props: {
+            adData: salesByRegionQuarter,
+            adSpec: {
+                xAxisTitle: 'Quarter',
+                yAxisTitle: 'Region',
+                tooltip: 'auto',
+            },
+        },
+        notes: 'Useful for regional performance and seasonality.',
+    },
+    {
+        name: 'Support tickets by product and month',
+        description: 'Monthly support ticket volume by product area.',
+        props: {
+            adData: supportTicketsByProductMonth,
+            adSpec: {
+                xAxisTitle: 'Month',
+                yAxisTitle: 'Product',
+                tooltip: 'auto',
+            },
+        },
+        notes: 'Helps spot spikes by product and time.',
+    },
+    {
+        name: 'API response time by service and environment',
+        description: 'Average response time (ms) by service and environment (green = fast, red = slow).',
+        props: {
+            adData: responseTimeByServiceEnv,
+            adSpec: {
+                xAxisTitle: 'Environment',
+                yAxisTitle: 'Service',
+                colorRange: ['#2ecc71', '#e74c3c'],
+                tooltip: 'auto',
+            },
+        },
+        notes: 'Green–red scale for performance; lower is better.',
+    },
+];

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

@@ -0,0 +1,45 @@
+export const worldMapExamples = [
+    {
+        name: 'Global Sales Hubs',
+        description: 'World map with major city hubs and value markers.',
+        props: {
+            adData: [
+                { lon: -74.006, lat: 40.7128, value: 82, label: 'New York' },
+                { lon: -46.6333, lat: -23.5505, value: 64, label: 'São Paulo' },
+                { lon: -0.1276, lat: 51.5074, value: 58, label: 'London' },
+                { lon: 77.209, lat: 28.6139, value: 73, label: 'Delhi' },
+                { lon: 139.6917, lat: 35.6895, value: 69, label: 'Tokyo' },
+                { lon: 151.2093, lat: -33.8688, value: 47, label: 'Sydney' },
+            ],
+            adSpec: { pinColor: '#2563eb' },
+        },
+    },
+    {
+        name: 'EMEA Focus',
+        description: 'World map centered on EMEA business locations and values.',
+        props: {
+            adData: [
+                { lon: 13.405, lat: 52.52, value: 56, label: 'Berlin' },
+                { lon: 2.3522, lat: 48.8566, value: 59, label: 'Paris' },
+                { lon: 55.2708, lat: 25.2048, value: 45, label: 'Dubai' },
+                { lon: 18.4241, lat: -33.9249, value: 41, label: 'Cape Town' },
+                { lon: 36.8219, lat: -1.2921, value: 26, label: 'Nairobi' },
+            ],
+            adSpec: {},
+        },
+    },
+    {
+        name: 'APAC Expansion',
+        description: 'World map showing APAC expansion points and values.',
+        props: {
+            adData: [
+                { lon: 103.8198, lat: 1.3521, value: 62, label: 'Singapore' },
+                { lon: 126.978, lat: 37.5665, value: 53, label: 'Seoul' },
+                { lon: 106.8456, lat: -6.2088, value: 37, label: 'Jakarta' },
+                { lon: 100.5018, lat: 13.7563, value: 31, label: 'Bangkok' },
+                { lon: 174.7633, lat: -36.8485, value: 23, label: 'Auckland' },
+            ],
+            adSpec: {},
+        },
+    },
+];

package/dist/collection/examples/index.js

@@ -1,3 +1,5 @@
 export * from './apollo-data-donut.examples';
 export * from './apollo-data-bar.examples';
 export * from './apollo-data-line.examples';
+export * from './apollo-data-heat-map.examples';
+export * from './apollo-data-world-map.examples';

package/dist/collection/utils/code-generator.js

@@ -233,7 +233,7 @@ export function generateWebComponentCode(componentName, props) {
   <script>
     const component = document.querySelector('${componentName}');
 ${propertyAssignments.join('\n')}
-${eventListeners.length > 0 ? '\n' + eventListeners.join('\n') : ''}
+${eventListeners.length > 0 ? `\n${eventListeners.join('\n')}` : ''}
   </script>
 </body>
 </html>`;

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

@@ -1 +1 @@
-import{p as e,t,h as a,H as o}from"./p-Dws5s-Xe.js";import{A as l}from"./p-7XF5Cax8.js";import{C as n}from"./p-2nuV5Vny.js";const r="apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif",i=e(class e extends l{constructor(e){super(!1),!1!==e&&this.__registerHost(),this.__attachShadow()}get el(){return this}adData=[];adSpec=null;static tooltipStylesInjected=!1;componentDidLoad(){this.injectTooltipStyles()}async componentDidRender(){await this.renderChart()}injectTooltipStyles(){if(e.tooltipStylesInjected)return;const t="apollo-data-bar-tooltip-styles";if(document.getElementById(t))return void(e.tooltipStylesInjected=!0);const a=document.createElement("style");a.id=t,a.textContent="\n      #vg-tooltip-element {\n        background-color: #ffffff;\n        border: 1px solid #e1e2e8;\n        border-radius: 0.25rem;\n        box-shadow: 0 4px 6px -1px rgba(48, 45, 59, 0.1), 0 2px 4px -1px rgba(48, 45, 59, 0.05);\n        font-family: apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif;\n        font-weight: 500;\n        padding: 0.25rem 0.75rem;\n        pointer-events: none;\n        text-align: center;\n        transform: translateY(20%);\n        white-space: pre;\n        z-index: 999999999;\n      }\n\n      #vg-tooltip-element table tr td.key {\n        color: #6a6d7d;\n        text-align: center;\n      }\n\n      #vg-tooltip-element table tr td.value {\n        text-align: center;\n      }\n\n      #vg-tooltip-element.dark-theme {\n        background-color: #292632;\n        border: 1px solid #6a6d7d;\n        box-shadow: 0 4px 6px -1px rgba(48, 45, 59, 0.1), 0 2px 4px -1px rgba(48, 45, 59, 0.5);\n        color: #ffffff;\n      }\n\n      #vg-tooltip-element::after {\n        border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent;\n        border-style: solid;\n        border-width: 9px;\n        bottom: -17px;\n        content: '';\n        left: 50%;\n        position: absolute;\n        transform: translateX(-50%);\n      }\n    ",document.head.appendChild(a),e.tooltipStylesInjected=!0}async getViewData(e,t){if(!t)throw Error("adSpec is required for apollo-data-bar-chart");const{tooltipPrefix:a="",currencySymbol:o=""}=t;if(!e||0===e.length)throw Error("Data is required for apollo-data-bar-chart");const l=Array.from(new Set(e.map((e=>e.category)))),i=a?".2f":".0f",d=a?o:"";return{$schema:"https://vega.github.io/schema/vega/v5.json",config:{text:{fill:"#6a6d7d",font:r,labelFontSize:12,labelFontWeight:400},axis:{labelColor:"#6a6d7d",titleColor:"#6a6d7d",labelFont:r,titleFont:r,titleFontWeight:400},legend:{labelColor:"#6a6d7d",titleColor:"#6a6d7d",labelFont:r,titleFont:r,labelFontSize:12,labelLimit:95},title:{color:"#6a6d7d",font:r,labelFontSize:12,labelFontWeight:400}},height:250,autosize:{type:"fit-x",contains:"padding",resize:!0},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:e},{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:.35,paddingOuter:.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:!0,zero:!0,range:"height"},{name:"color",type:"ordinal",domain:l,range:t?.colorSet??n}],axes:[{orient:"bottom",scale:"x",title:t?.xAxisTitle,labelPadding:12,titlePadding:12,labelAngle:-90,labelAlign:"right",labelBaseline:"middle",tickSize:3,labelFontSize:12,titleFontSize:14,ticks:!1,domain:!1,encode:{labels:{update:{text:{signal:"scale('xLabels', datum.value)"}}}}},{orient:"left",scale:"y",title:t?.yAxisTitle||"",format:",.0f",grid:!0,tickCount:6,labelFontSize:12,titleFontSize:14,ticks:!1,domain:!1,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 + ': ${d}' + format(datum.value, ',${i}') + '\\nTotal: ${d}' + format(datum.total, ',${i}')`}},update:{opacity:[{test:"hoveredPeriod && datum.period !== hoveredPeriod",value:.2},{value:1}]}}}]}}render(){return a(o,{key:"86ed2e74e5abd57e684a93bc9cf6a014b3ed081c"},a("div",{key:"96e5f7dd2dfa6a104ca709d1399308a86041c2f3",id:"container",style:{width:"100%",height:"100%"}}))}},[513,"apollo-data-bar-chart",{adData:[1,"ad-data"],adSpec:[1,"ad-spec"]}]),d=i,s=function(){"undefined"!=typeof customElements&&["apollo-data-bar-chart"].forEach((e=>{"apollo-data-bar-chart"===e&&(customElements.get(t(e))||customElements.define(t(e),i))}))};export{d as ApolloDataBarChart,s as defineCustomElement}
+import{p as e,t,h as a,H as o}from"./p-gcjU8DVr.js";import{A as n}from"./p-CfbMSXKd.js";import{C as l}from"./p-2nuV5Vny.js";const r="apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif",i=e(class extends n{constructor(e){super(!1),!1!==e&&this.__registerHost(),this.__attachShadow()}get el(){return this}adData=[];adSpec=null;static tooltipStylesInjected=!1;componentDidLoad(){this.injectTooltipStyles()}async componentDidRender(){await this.renderChart()}injectTooltipStyles(){const e=this.constructor;if(e.tooltipStylesInjected)return;const t="apollo-data-bar-tooltip-styles";if(document.getElementById(t))return void(e.tooltipStylesInjected=!0);const a=document.createElement("style");a.id=t,a.textContent="\n      #vg-tooltip-element {\n        background-color: #ffffff;\n        border: 1px solid #e1e2e8;\n        border-radius: 0.25rem;\n        box-shadow: 0 4px 6px -1px rgba(48, 45, 59, 0.1), 0 2px 4px -1px rgba(48, 45, 59, 0.05);\n        font-family: apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif;\n        font-weight: 500;\n        padding: 0.25rem 0.75rem;\n        pointer-events: none;\n        text-align: center;\n        transform: translateY(20%);\n        white-space: pre;\n        z-index: 999999999;\n      }\n\n      #vg-tooltip-element table tr td.key {\n        color: #6a6d7d;\n        text-align: center;\n      }\n\n      #vg-tooltip-element table tr td.value {\n        text-align: center;\n      }\n\n      #vg-tooltip-element.dark-theme {\n        background-color: #292632;\n        border: 1px solid #6a6d7d;\n        box-shadow: 0 4px 6px -1px rgba(48, 45, 59, 0.1), 0 2px 4px -1px rgba(48, 45, 59, 0.5);\n        color: #ffffff;\n      }\n\n      #vg-tooltip-element::after {\n        border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent;\n        border-style: solid;\n        border-width: 9px;\n        bottom: -17px;\n        content: '';\n        left: 50%;\n        position: absolute;\n        transform: translateX(-50%);\n      }\n    ",document.head.appendChild(a),e.tooltipStylesInjected=!0}async getViewData(e,t){const a=this.el?.tagName?.toLowerCase()??"apollo-data-bar-chart";if(!t)throw Error("adSpec is required for "+a);const{tooltipPrefix:o="",currencySymbol:n=""}=t;if(!e||0===e.length)throw Error("Data is required for "+a);const i=Array.from(new Set(e.map((e=>e.category)))),d=o?".2f":".0f",s=o?n:"";return{$schema:"https://vega.github.io/schema/vega/v5.json",config:{text:{fill:"#6a6d7d",font:r,labelFontSize:12,labelFontWeight:400},axis:{labelColor:"#6a6d7d",titleColor:"#6a6d7d",labelFont:r,titleFont:r,titleFontWeight:400},legend:{labelColor:"#6a6d7d",titleColor:"#6a6d7d",labelFont:r,titleFont:r,labelFontSize:12,labelLimit:95},title:{color:"#6a6d7d",font:r,labelFontSize:12,labelFontWeight:400}},height:250,autosize:{type:"fit-x",contains:"padding",resize:!0},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:e},{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:.35,paddingOuter:.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:!0,zero:!0,range:"height"},{name:"color",type:"ordinal",domain:i,range:t?.colorSet??l}],axes:[{orient:"bottom",scale:"x",title:t?.xAxisTitle,labelPadding:12,titlePadding:12,labelAngle:-90,labelAlign:"right",labelBaseline:"middle",tickSize:3,labelFontSize:12,titleFontSize:14,ticks:!1,domain:!1,encode:{labels:{update:{text:{signal:"scale('xLabels', datum.value)"}}}}},{orient:"left",scale:"y",title:t?.yAxisTitle||"",format:",.0f",grid:!0,tickCount:6,labelFontSize:12,titleFontSize:14,ticks:!1,domain:!1,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 + ': ${s}' + format(datum.value, ',${d}') + '\\nTotal: ${s}' + format(datum.total, ',${d}')`}},update:{opacity:[{test:"hoveredPeriod && datum.period !== hoveredPeriod",value:.2},{value:1}]}}}]}}render(){return a(o,{key:"a0aebbff4fb177de35eb90329de81a1098663620"},a("div",{key:"9e753e876df877d46254a02349850414914d9231",id:"container",style:{width:"100%",height:"100%"}}))}},[513,"apollo-data-bar-chart",{adData:[1,"ad-data"],adSpec:[1,"ad-spec"]}]),d=i,s=function(){"undefined"!=typeof customElements&&["apollo-data-bar-chart"].forEach((e=>{"apollo-data-bar-chart"===e&&(customElements.get(t(e))||customElements.define(t(e),i))}))};export{d as ApolloDataBarChart,s as defineCustomElement}