@xplortech/apollo-data 0.0.4 → 0.0.6

package/dist/cjs/apollo-data-heat-map_4.cjs.entry.js

@@ -0,0 +1,883 @@
+'use strict';
+
+var index = require('./index-Bd5risOy.js');
+var apolloDataBase = require('./apollo-data-base-COGMOEqL.js');
+var constants = require('./constants-B3weDEpc.js');
+
+const ApolloDataHeatMap = class extends apolloDataBase.ApolloBase {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * 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 (index.h(index.Host, { key: 'd15b44f268f153498e61dc7829fe0d45f315a992' }, index.h("div", { key: '7783444f4675c885980f1cd571737d506e00fdbc', id: "container", style: { width: '100%', height: '100%' } })));
+    }
+};
+
+const FONT_FAMILY = "apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif";
+function lineStyleToStrokeDash(lineStyle) {
+    switch (lineStyle) {
+        case 'dashed':
+            return [6, 4];
+        case 'dotted':
+            return [2, 2];
+        case 'solid':
+        default:
+            return [];
+    }
+}
+const ApolloDataLineChart = class extends apolloDataBase.ApolloBase {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    adData = [];
+    adSpec = null;
+    static tooltipStylesInjected = false;
+    componentDidLoad() {
+        this.injectTooltipStyles();
+    }
+    async componentDidRender() {
+        await this.renderChart();
+    }
+    injectTooltipStyles() {
+        const chartClass = this.constructor;
+        if (chartClass.tooltipStylesInjected) {
+            return;
+        }
+        const styleId = 'apollo-data-line-tooltip-styles';
+        if (document.getElementById(styleId)) {
+            chartClass.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);
+        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 ${componentTag}`);
+        }
+        const { tooltipPrefix = '', currencySymbol = '' } = spec;
+        if (!data || data.length === 0) {
+            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);
+        const colorSet = spec?.colorSet ?? constants.CHART_COLORS;
+        const xLabelData = uniqueXValues.map(x => {
+            const first = data.find(d => d.xValue === x);
+            return { xValue: x, displayLabel: first?.xLabel != null ? first.xLabel : String(x) };
+        });
+        const formatNumber = tooltipPrefix ? '.2f' : '.0f';
+        const currencyPrefix = tooltipPrefix ? currencySymbol : '';
+        const pointShape = spec.pointStyle ?? 'circle';
+        const strokeDash = lineStyleToStrokeDash(spec.lineStyle ?? 'solid');
+        const dataSpec = [
+            { name: 'raw', values: data },
+            { name: 'xLabelData', values: xLabelData },
+        ];
+        uniqueCategories.forEach((cat, i) => {
+            dataSpec.push({
+                name: `series_${i}`,
+                source: 'raw',
+                transform: [
+                    { type: 'filter', expr: `datum.category === ${JSON.stringify(cat)}` },
+                    { type: 'collect', sort: { field: 'xValue' } },
+                ],
+            });
+        });
+        const lineMarks = uniqueCategories.map((_, i) => ({
+            type: 'line',
+            from: { data: `series_${i}` },
+            encode: {
+                enter: {
+                    x: { scale: 'x', field: 'xValue' },
+                    y: { scale: 'y', field: 'yValue' },
+                    stroke: { value: colorSet[i % colorSet.length] },
+                    strokeWidth: { value: 2 },
+                    interpolate: { value: 'monotone' },
+                    ...(strokeDash.length > 0 ? { strokeDash: { value: strokeDash } } : {}),
+                },
+            },
+        }));
+        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)',
+                },
+            ],
+            width: { signal: 'containerW' },
+            data: dataSpec,
+            scales: [
+                {
+                    name: 'x',
+                    type: 'point',
+                    domain: uniqueXValues,
+                    range: 'width',
+                    padding: 0.5,
+                },
+                {
+                    name: 'xLabels',
+                    type: 'ordinal',
+                    domain: { data: 'xLabelData', field: 'xValue' },
+                    range: { data: 'xLabelData', field: 'displayLabel' },
+                },
+                {
+                    name: 'y',
+                    type: 'linear',
+                    domain: { data: 'raw', field: 'yValue' },
+                    nice: true,
+                    zero: true,
+                    range: 'height',
+                },
+                {
+                    name: 'color',
+                    type: 'ordinal',
+                    domain: uniqueCategories,
+                    range: spec?.colorSet ?? constants.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: [
+                {
+                    stroke: 'color',
+                    orient: 'bottom',
+                    direction: 'horizontal',
+                    columns: { signal: 'legendColumns' },
+                    title: null,
+                    symbolType: 'stroke',
+                    symbolStrokeWidth: 3,
+                    rowPadding: 8,
+                    symbolOffset: -35,
+                    symbolSize: 100,
+                    labelOffset: 8,
+                    labelLimit: 95,
+                },
+            ],
+            marks: [
+                ...lineMarks,
+                {
+                    type: 'symbol',
+                    from: { data: 'raw' },
+                    encode: {
+                        enter: {
+                            x: { scale: 'x', field: 'xValue' },
+                            y: { scale: 'y', field: 'yValue' },
+                            fill: { scale: 'color', field: 'category' },
+                            size: { value: 50 },
+                            shape: { value: pointShape },
+                            tooltip: {
+                                signal: `(datum.xLabel != null ? datum.xLabel : format(datum.xValue, ',.0f')) + ' · ' + datum.category + ': ' + (datum.yLabel != null ? datum.yLabel : '${currencyPrefix}' + format(datum.yValue, ',${formatNumber}'))`,
+                            },
+                        },
+                    },
+                },
+            ],
+        };
+    }
+    render() {
+        return (index.h(index.Host, { key: 'fd64f4abb624b14a878808b23345910c9b23a72c' }, index.h("div", { key: 'aeda5086730862ca1368a0374caf2d918969839d', id: "container", style: { width: '100%', height: '100%' } })));
+    }
+};
+
+const ApolloDataScatterChart = class extends apolloDataBase.ApolloBase {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * Represents a single data point in the scatter chart.
+     * @property {string} category - Category or group name associated with the data point.
+     * This can be used for legend grouping or category-based styling.
+     * @property {number} xValue - Numeric value plotted along the X-axis.
+     * @property {number} yValue - Numeric value plotted along the Y-axis.
+     * @property {PointStyle} [pointStyle] - Optional style override for this specific data point.
+     * If provided, it takes precedence over default or category-level styles.
+     */
+    adData = [];
+    /**
+     * Optional specification object for customizing the scatter chart configuration.
+     * @property {string} [yAxisTitle] - Label displayed for the Y-axis.
+     * @property {string} [xAxisTitle] - Label displayed for the X-axis.
+     * @property {PointStyle} [defaultPointStyle] - Default styling applied to all scatter points (e.g., size, color, shape, opacity).
+     * @property {PointStyle} [pointStyle] - Global point style override applied to all data points.
+     * @property {{ [categoryName: string]: PointStyle }} [categoryPointStyleMap] -
+     * A mapping object that allows custom point styles per category name.
+     * Each key represents a category, and its value defines the corresponding PointStyle.
+     * @property {'auto' | 'none'} [tooltip] - Controls tooltip behavior.
+     * 'auto' enables default tooltip rendering, while 'none' disables tooltips.
+     */
+    adSpec = {};
+    async componentDidRender() {
+        await this.renderChart();
+    }
+    DEFAULT_POINT_STYLE = {
+        shape: 'circle',
+        opacity: 1,
+        color: 'blue',
+        size: 1,
+    };
+    // @ts-ignore
+    async getViewData(data, spec) {
+        const dataItemsToUse = data.map(dataItem => {
+            const pointStylesToUse = {};
+            Object.keys(this.DEFAULT_POINT_STYLE).forEach(key => {
+                const value = dataItem.pointStyle?.[key] ??
+                    dataItem?.[key] ??
+                    spec.categoryPointStyleMap?.[dataItem.category]?.[key] ??
+                    spec.defaultPointStyle?.[key] ??
+                    this.DEFAULT_POINT_STYLE[key];
+                pointStylesToUse[key] = value;
+            });
+            return {
+                category: dataItem.category,
+                xValue: dataItem.xValue,
+                yValue: dataItem.yValue,
+                color: pointStylesToUse.color,
+                shape: pointStylesToUse.shape,
+                opacity: pointStylesToUse.opacity,
+            };
+        });
+        const tooltipField = spec?.tooltip === 'auto' ? 'category' : 'none';
+        return {
+            $schema: 'https://vega.github.io/schema/vega/v6.json',
+            description: 'A scatter plot with null values visualized along the axes.',
+            width: 450,
+            height: 450,
+            padding: 5,
+            autosize: { type: 'fit', resize: true },
+            signals: [
+                { name: 'nullSize', value: 8 },
+                { name: 'nullGap', update: 'nullSize + 10' },
+            ],
+            data: [
+                {
+                    name: 'source',
+                    values: dataItemsToUse,
+                },
+                {
+                    name: 'valid',
+                    source: 'source',
+                    transform: [
+                        {
+                            type: 'filter',
+                            expr: 'datum.xValue != null && datum.yValue != null',
+                        },
+                    ],
+                },
+                {
+                    name: 'nullXY',
+                    source: 'source',
+                    transform: [
+                        {
+                            type: 'filter',
+                            expr: 'datum.xValue == null && datum.yValue == null',
+                        },
+                        { type: 'aggregate' },
+                    ],
+                },
+                {
+                    name: 'nullY',
+                    source: 'source',
+                    transform: [
+                        {
+                            type: 'filter',
+                            expr: 'datum.xValue != null && datum.yValue == null',
+                        },
+                    ],
+                },
+                {
+                    name: 'nullX',
+                    source: 'source',
+                    transform: [
+                        {
+                            type: 'filter',
+                            expr: 'datum.xValue == null && datum.yValue != null',
+                        },
+                    ],
+                },
+            ],
+            scales: [
+                {
+                    name: 'xscale',
+                    type: 'linear',
+                    range: [{ signal: 'nullGap' }, { signal: 'width' }],
+                    nice: true,
+                    domain: { data: 'valid', field: 'xValue' },
+                },
+                {
+                    name: 'yscale',
+                    type: 'linear',
+                    range: [{ signal: 'height - nullGap' }, 0],
+                    nice: true,
+                    domain: { data: 'valid', field: 'yValue' },
+                },
+            ],
+            axes: [
+                {
+                    orient: 'bottom',
+                    scale: 'xscale',
+                    offset: 5,
+                    format: 's',
+                    title: spec?.xAxisTitle || 'X Value',
+                },
+                {
+                    orient: 'left',
+                    scale: 'yscale',
+                    offset: 5,
+                    format: 's',
+                    title: spec?.yAxisTitle || 'Y Value',
+                },
+            ],
+            marks: [
+                {
+                    type: 'symbol',
+                    from: { data: 'valid' },
+                    encode: {
+                        enter: {
+                            size: { value: 50 },
+                            tooltip: { field: tooltipField },
+                        },
+                        update: {
+                            x: { scale: 'xscale', field: 'xValue' },
+                            y: { scale: 'yscale', field: 'yValue' },
+                            fill: { field: 'color' },
+                            fillOpacity: { field: 'opacity' },
+                            shape: { field: 'shape' },
+                            zindex: { value: 0 },
+                        },
+                        hover: {
+                            fill: { value: 'firebrick' },
+                            fillOpacity: { value: 1 },
+                            zindex: { value: 1 },
+                        },
+                    },
+                },
+                {
+                    type: 'symbol',
+                    from: { data: 'nullY' },
+                    encode: {
+                        enter: {
+                            size: { value: 50 },
+                            tooltip: { field: tooltipField },
+                        },
+                        update: {
+                            x: { scale: 'xscale', field: 'xValue' },
+                            y: { signal: 'height - nullSize/2' },
+                            fill: { value: '#aaa' },
+                            fillOpacity: { value: 0.2 },
+                        },
+                        hover: {
+                            fill: { value: 'firebrick' },
+                            fillOpacity: { value: 1 },
+                        },
+                    },
+                },
+                {
+                    type: 'symbol',
+                    from: { data: 'nullX' },
+                    encode: {
+                        enter: {
+                            size: { value: 50 },
+                            tooltip: { field: 'name' },
+                        },
+                        update: {
+                            x: { signal: 'nullSize/2' },
+                            y: { scale: 'yscale', field: 'yValue' },
+                            fill: { value: '#aaa' },
+                            fillOpacity: { value: 0.2 },
+                            zindex: { value: 0 },
+                        },
+                        hover: {
+                            fill: { value: 'firebrick' },
+                            fillOpacity: { value: 1 },
+                            zindex: { value: 1 },
+                        },
+                    },
+                },
+                {
+                    type: 'text',
+                    interactive: false,
+                    from: { data: 'nullXY' },
+                    encode: {
+                        update: {
+                            x: { signal: 'nullSize', offset: -4 },
+                            y: { signal: 'height', offset: 13 },
+                            text: { signal: "datum.count + ' null'" },
+                            align: { value: 'right' },
+                            baseline: { value: 'top' },
+                            fill: { value: '#999' },
+                            fontSize: { value: 9 },
+                        },
+                    },
+                },
+            ],
+        };
+    }
+    render() {
+        return (index.h(index.Host, { key: 'f6c1e8d9e9a6ba41dbbf8c2c5737895b96b0915d' }, index.h("div", { key: '2aeba82bc31c5995a3d5b532c339f5b45ae850f7', id: "container", style: { width: '100%', height: '100%' } })));
+    }
+};
+
+const ApolloDataWorldMapChart = class extends apolloDataBase.ApolloBase {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * 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 (index.h(index.Host, { key: '8053ea3b9706cdd03a430157b3f63e93c1201d1f' }, index.h("div", { key: '514807ae8dd4868d3d74e86c4260b7b9967c0ac2', id: "container", style: { width: '100%', height: '100%' } })));
+    }
+};
+
+exports.apollo_data_heat_map = ApolloDataHeatMap;
+exports.apollo_data_line_chart = ApolloDataLineChart;
+exports.apollo_data_scatter_chart = ApolloDataScatterChart;
+exports.apollo_data_world_map_chart = ApolloDataWorldMapChart;