@xplortech/apollo-data 0.0.5 → 0.0.7

package/dist/esm/apollo-data-line-chart_2.entry.js

@@ -1,531 +0,0 @@
-import { r as registerInstance, g as getElement, h, H as Host } from './index-Bb2nY-Tf.js';
-import { A as ApolloBase } from './apollo-data-base-BWkrM8dc.js';
-import { C as CHART_COLORS } from './constants-2nuV5Vny.js';
-
-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 ApolloBase {
-    constructor(hostRef) {
-        super();
-        registerInstance(this, hostRef);
-    }
-    get el() { return getElement(this); }
-    adData = [];
-    adSpec = null;
-    static tooltipStylesInjected = false;
-    componentDidLoad() {
-        this.injectTooltipStyles();
-    }
-    async componentDidRender() {
-        await this.renderChart();
-    }
-    injectTooltipStyles() {
-        if (ApolloDataLineChart.tooltipStylesInjected) {
-            return;
-        }
-        const styleId = 'apollo-data-line-tooltip-styles';
-        if (document.getElementById(styleId)) {
-            ApolloDataLineChart.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);
-        ApolloDataLineChart.tooltipStylesInjected = true;
-    }
-    // @ts-ignore
-    async getViewData(data, spec) {
-        if (!spec) {
-            throw new Error('adSpec is required for apollo-data-line-chart');
-        }
-        const { tooltipPrefix = '', currencySymbol = '' } = spec;
-        if (!data || data.length === 0) {
-            throw new Error('Data is required for apollo-data-line-chart');
-        }
-        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 ?? 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 ?? 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 (h(Host, { key: '7799f01536f212d7a06da08c1e463d8529c5bf21' }, h("div", { key: '25463f10bbc0f5443c35ab03b5b53164d9ad1efd', id: "container", style: { width: '100%', height: '100%' } })));
-    }
-};
-
-const ApolloDataScatterChart = class extends ApolloBase {
-    constructor(hostRef) {
-        super();
-        registerInstance(this, hostRef);
-    }
-    get el() { return 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 (h(Host, { key: '60005ab926b0153b3e31729a69f5a64cf6558085' }, h("div", { key: '820de3e0ddbbc2650b9764e279d87531338e72e3', id: "container", style: { width: '100%', height: '100%' } })));
-    }
-};
-
-export { ApolloDataLineChart as apollo_data_line_chart, ApolloDataScatterChart as apollo_data_scatter_chart };

package/dist/esm/constants-2nuV5Vny.js

@@ -1,3 +0,0 @@
-const CHART_COLORS = ['#4d1ab2', '#f99170', '#e550c8', '#ffd563', '#8857fa', '#52ebba', '#bf1d78', '#31cff8'];
-
-export { CHART_COLORS as C };