@xplortech/apollo-data 0.0.4 → 0.0.5

package/dist/cjs/{apollo-data-bar-chart_2.cjs.entry.js → apollo-data-base-CxVQ-WVP.js}

@@ -1,7 +1,5 @@
 'use strict';
 
-var index$2 = require('./index-Cl7HgRm0.js');
-
 // Note: This regex matches even invalid JSON strings, but since we’re
 // working on the output of `JSON.stringify` we know that only valid strings
 // are present (unless the user supplied a weird `options.indent` but in
@@ -67653,716 +67651,4 @@ class ApolloBase {
     }
 }
 
-const CHART_COLORS = ['#4d1ab2', '#f99170', '#e550c8', '#ffd563', '#8857fa', '#52ebba', '#bf1d78', '#31cff8'];
-
-const FONT_FAMILY = "apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif";
-const ApolloDataBarChart = class extends ApolloBase {
-    constructor(hostRef) {
-        super();
-        index$2.registerInstance(this, hostRef);
-    }
-    get el() { return index$2.getElement(this); }
-    adData = [];
-    adSpec = null;
-    static tooltipStylesInjected = false;
-    componentDidLoad() {
-        this.injectTooltipStyles();
-    }
-    async componentDidRender() {
-        await this.renderChart();
-    }
-    injectTooltipStyles() {
-        if (ApolloDataBarChart.tooltipStylesInjected) {
-            return;
-        }
-        const styleId = 'apollo-data-bar-tooltip-styles';
-        if (document.getElementById(styleId)) {
-            ApolloDataBarChart.tooltipStylesInjected = true;
-            return;
-        }
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.textContent = `
-      #vg-tooltip-element {
-        background-color: #ffffff;
-        border: 1px solid #e1e2e8;
-        border-radius: 0.25rem;
-        box-shadow: 0 4px 6px -1px rgba(48, 45, 59, 0.1), 0 2px 4px -1px rgba(48, 45, 59, 0.05);
-        font-family: apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif;
-        font-weight: 500;
-        padding: 0.25rem 0.75rem;
-        pointer-events: none;
-        text-align: center;
-        transform: translateY(20%);
-        white-space: pre;
-        z-index: 999999999;
-      }
-
-      #vg-tooltip-element table tr td.key {
-        color: #6a6d7d;
-        text-align: center;
-      }
-
-      #vg-tooltip-element table tr td.value {
-        text-align: center;
-      }
-
-      #vg-tooltip-element.dark-theme {
-        background-color: #292632;
-        border: 1px solid #6a6d7d;
-        box-shadow: 0 4px 6px -1px rgba(48, 45, 59, 0.1), 0 2px 4px -1px rgba(48, 45, 59, 0.5);
-        color: #ffffff;
-      }
-
-      #vg-tooltip-element::after {
-        border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent;
-        border-style: solid;
-        border-width: 9px;
-        bottom: -17px;
-        content: '';
-        left: 50%;
-        position: absolute;
-        transform: translateX(-50%);
-      }
-    `;
-        document.head.appendChild(style);
-        ApolloDataBarChart.tooltipStylesInjected = true;
-    }
-    // @ts-ignore
-    async getViewData(data, spec) {
-        if (!spec) {
-            throw new Error('adSpec is required for apollo-data-bar-chart');
-        }
-        const { tooltipPrefix = '', currencySymbol = '' } = spec;
-        if (!data || data.length === 0) {
-            throw new Error('Data is required for apollo-data-bar-chart');
-        }
-        const uniqueCategories = Array.from(new Set(data.map(item => item.category)));
-        const formatNumber = tooltipPrefix ? '.2f' : '.0f';
-        const currencyPrefix = tooltipPrefix ? currencySymbol : '';
-        return {
-            $schema: 'https://vega.github.io/schema/vega/v5.json',
-            config: {
-                text: {
-                    fill: '#6a6d7d',
-                    font: FONT_FAMILY,
-                    labelFontSize: 12,
-                    labelFontWeight: 400,
-                },
-                axis: {
-                    labelColor: '#6a6d7d',
-                    titleColor: '#6a6d7d',
-                    labelFont: FONT_FAMILY,
-                    titleFont: FONT_FAMILY,
-                    titleFontWeight: 400,
-                },
-                legend: {
-                    labelColor: '#6a6d7d',
-                    titleColor: '#6a6d7d',
-                    labelFont: FONT_FAMILY,
-                    titleFont: FONT_FAMILY,
-                    labelFontSize: 12,
-                    labelLimit: 95,
-                },
-                title: {
-                    color: '#6a6d7d',
-                    font: FONT_FAMILY,
-                    labelFontSize: 12,
-                    labelFontWeight: 400,
-                },
-            },
-            height: 250,
-            autosize: { type: 'fit-x', contains: 'padding', resize: true },
-            signals: [
-                {
-                    name: 'containerW',
-                    update: 'max(containerSize()[0], 400)',
-                },
-                {
-                    name: 'legendColumns',
-                    update: 'ceil(containerW / 140)',
-                },
-                {
-                    name: 'hoveredPeriod',
-                    value: null,
-                    on: [
-                        { events: 'rect:mouseover', update: 'datum.period' },
-                        { events: 'rect:mouseout', update: 'null' },
-                    ],
-                },
-            ],
-            width: { signal: 'containerW' },
-            data: [
-                {
-                    name: 'raw',
-                    values: data,
-                },
-                {
-                    name: 'periodTotals',
-                    source: 'raw',
-                    transform: [
-                        {
-                            type: 'aggregate',
-                            groupby: ['periodId'],
-                            fields: ['value'],
-                            ops: ['sum'],
-                            as: ['total'],
-                        },
-                    ],
-                },
-                {
-                    name: 'table',
-                    source: 'raw',
-                    transform: [
-                        {
-                            type: 'lookup',
-                            from: 'periodTotals',
-                            key: 'periodId',
-                            fields: ['periodId'],
-                            values: ['total'],
-                            as: ['total'],
-                        },
-                        {
-                            type: 'stack',
-                            groupby: ['periodId'],
-                            sort: { field: 'category' },
-                            field: 'value',
-                        },
-                        {
-                            type: 'formula',
-                            as: 'periodId',
-                            expr: 'datum.periodId',
-                        },
-                        {
-                            type: 'formula',
-                            as: 'labelOnly',
-                            expr: 'datum.label',
-                        },
-                    ],
-                },
-                {
-                    name: 'periodLabels',
-                    source: 'raw',
-                    transform: [
-                        {
-                            type: 'aggregate',
-                            groupby: ['periodId', 'label'],
-                        },
-                    ],
-                },
-            ],
-            scales: [
-                {
-                    name: 'x',
-                    type: 'band',
-                    domain: { data: 'table', field: 'periodId' },
-                    range: 'width',
-                    paddingInner: 0.35,
-                    paddingOuter: 0.02,
-                },
-                {
-                    name: 'xLabels',
-                    type: 'ordinal',
-                    domain: { data: 'periodLabels', field: 'periodId' },
-                    range: { data: 'periodLabels', field: 'label' },
-                },
-                {
-                    name: 'y',
-                    type: 'linear',
-                    domain: { data: 'table', field: 'y1' },
-                    nice: true,
-                    zero: true,
-                    range: 'height',
-                },
-                {
-                    name: 'color',
-                    type: 'ordinal',
-                    domain: uniqueCategories,
-                    range: spec?.colorSet ?? CHART_COLORS,
-                },
-            ],
-            axes: [
-                {
-                    orient: 'bottom',
-                    scale: 'x',
-                    title: spec?.xAxisTitle,
-                    labelPadding: 12,
-                    titlePadding: 12,
-                    labelAngle: -90,
-                    labelAlign: 'right',
-                    labelBaseline: 'middle',
-                    tickSize: 3,
-                    labelFontSize: 12,
-                    titleFontSize: 14,
-                    ticks: false,
-                    domain: false,
-                    encode: {
-                        labels: {
-                            update: {
-                                text: { signal: "scale('xLabels', datum.value)" },
-                            },
-                        },
-                    },
-                },
-                {
-                    orient: 'left',
-                    scale: 'y',
-                    title: spec?.yAxisTitle || '',
-                    format: ',.0f',
-                    grid: true,
-                    tickCount: 6,
-                    labelFontSize: 12,
-                    titleFontSize: 14,
-                    ticks: false,
-                    domain: false,
-                    tickBand: 'extent',
-                    labelPadding: 10,
-                },
-            ],
-            legends: [
-                {
-                    fill: 'color',
-                    orient: 'bottom',
-                    direction: 'horizontal',
-                    columns: { signal: 'legendColumns' },
-                    title: null,
-                    symbolType: 'square',
-                    rowPadding: 8,
-                    symbolOffset: -35,
-                    symbolSize: 100,
-                    labelOffset: 8,
-                    labelLimit: 95,
-                },
-            ],
-            marks: [
-                {
-                    type: 'rect',
-                    from: { data: 'table' },
-                    encode: {
-                        enter: {
-                            x: { scale: 'x', field: 'periodId' },
-                            width: { scale: 'x', band: 1 },
-                            y: { scale: 'y', field: 'y1' },
-                            y2: { scale: 'y', field: 'y0' },
-                            fill: { scale: 'color', field: 'category' },
-                            tooltip: {
-                                signal: `datum.category + ': ${currencyPrefix}' + format(datum.value, ',${formatNumber}') + '\\nTotal: ${currencyPrefix}' + format(datum.total, ',${formatNumber}')`,
-                            },
-                        },
-                        update: {
-                            opacity: [{ test: 'hoveredPeriod && datum.period !== hoveredPeriod', value: 0.2 }, { value: 1 }],
-                        },
-                    },
-                },
-            ],
-        };
-    }
-    render() {
-        return (index$2.h(index$2.Host, { key: '86ed2e74e5abd57e684a93bc9cf6a014b3ed081c' }, index$2.h("div", { key: '96e5f7dd2dfa6a104ca709d1399308a86041c2f3', id: "container", style: { width: '100%', height: '100%' } })));
-    }
-};
-
-const ApolloDataDonutChart = class extends ApolloBase {
-    constructor(hostRef) {
-        super();
-        index$2.registerInstance(this, hostRef);
-    }
-    get el() { return index$2.getElement(this); }
-    /**
-     * Array of data items to display in the donut chart. Each item represents a segment with category and value.
-     * @property {string} category - Category name for the data segment
-     * @property {number} value - Numeric value for the donut chart segment
-     */
-    adData = [];
-    /**
-     * Optional specification object for customizing the chart appearance
-     * @property {string[]} [colorSet] - Array of color hex codes for chart segments
-     * @property {string} [preffix] - A string added at the start of another string, like $ or a currency symbol.
-     * @property {string} [suffix] - A string added at the end of another string, like %, kg or a currency symbol.
-     * @property {string} [centerText] - A label string rendered at the center of the view.
-     */
-    adSpec = {};
-    categories;
-    dataValues;
-    totalRevenue;
-    chartColors;
-    defaultChartColors = ['#4d1ab2', '#f99170', '#e550c8', '#ffd563', '#8857fa', '#52ebba', '#bf1d78', '#31cff8'];
-    defaultCenterText = 'Total Revenue';
-    async componentDidRender() {
-        await this.renderChart();
-    }
-    // @ts-ignore
-    async getViewData(data, spec) {
-        const dataValues = data;
-        this.chartColors = spec?.colorSet ? spec.colorSet : this.defaultChartColors;
-        this.categories = dataValues.map(item => item.category);
-        this.dataValues = dataValues.map((item, index) => ({
-            ...item,
-            order: index + 1,
-        }));
-        this.totalRevenue = Math.round(dataValues.reduce((prev, curr) => prev + curr.value, 0) * 100) / 100;
-        return {
-            $schema: 'https://vega.github.io/schema/vega/v5.json',
-            description: "Donut chart with correctly placed percentage labels and exploded 'Other' slices on hover",
-            height: 250,
-            signals: [
-                {
-                    name: 'containerW',
-                    update: 'min(containerSize()[0], 400)',
-                },
-                { name: 'centerX', update: 'containerW / 2' },
-                { name: 'centerY', update: '250 / 2' },
-                { name: 'radius', update: 'min(containerW, 250) / 2 - 20' },
-                {
-                    name: 'categoryDisplay',
-                    value: null,
-                    on: [
-                        {
-                            events: { type: 'mouseover', markname: 'mainArc' },
-                            update: 'datum.category',
-                        },
-                        {
-                            events: {
-                                type: 'mouseover',
-                                markname: 'mainArcLabel',
-                            },
-                            update: 'datum.category',
-                        },
-                        {
-                            events: { type: 'mouseout', markname: 'mainArc' },
-                            update: 'null',
-                        },
-                        {
-                            events: {
-                                type: 'mouseout',
-                                markname: 'mainArcLabel',
-                            },
-                            update: 'null',
-                        },
-                        {
-                            events: { type: 'mouseover', markname: 'innerArc' },
-                            update: 'null',
-                        },
-                        {
-                            events: { type: 'mouseover', markname: 'outerArc' },
-                            update: 'null',
-                        },
-                        {
-                            events: { type: 'mouseover', markname: 'otherArc' },
-                            update: 'datum.category',
-                        },
-                        {
-                            events: { type: 'mouseout', markname: 'otherArc' },
-                            update: 'null',
-                        },
-                    ],
-                },
-                {
-                    name: 'displayText',
-                    update: `categoryDisplay && length(categoryDisplay) > 18 ? (lastindexof(categoryDisplay, ' ') > 0 ? slice(categoryDisplay, 0, lastindexof(categoryDisplay, ' ')) + '\\n' + slice(categoryDisplay, lastindexof(categoryDisplay, ' ') + 1) : categoryDisplay) : categoryDisplay || '${spec?.centerText ? spec.centerText : this.defaultCenterText}'`,
-                },
-                {
-                    name: 'hoveredCategory',
-                    value: null,
-                    on: [
-                        {
-                            events: { type: 'mouseover', markname: 'mainArc' },
-                            update: 'datum.category',
-                        },
-                        {
-                            events: {
-                                type: 'mouseover',
-                                markname: 'mainArcLabel',
-                            },
-                            update: 'datum.category',
-                        },
-                        {
-                            events: { type: 'mouseover', markname: 'outerArc' },
-                            update: 'null',
-                        },
-                        {
-                            events: { type: 'mouseover', markname: 'innerArc' },
-                            update: 'null',
-                        },
-                        {
-                            events: { type: 'mouseout', markname: 'innerArc' },
-                            update: 'null',
-                        },
-                    ],
-                },
-                {
-                    name: 'hoveredValue',
-                    value: null,
-                    on: [
-                        {
-                            events: { type: 'mouseover', markname: 'mainArc' },
-                            update: 'datum.value',
-                        },
-                        {
-                            events: {
-                                type: 'mouseover',
-                                markname: 'mainArcLabel',
-                            },
-                            update: 'datum.value',
-                        },
-                        {
-                            events: { type: 'mouseout', markname: 'mainArc' },
-                            update: 'null',
-                        },
-                        {
-                            events: { type: 'mouseover', markname: 'otherArc' },
-                            update: 'datum.value',
-                        },
-                        {
-                            events: { type: 'mouseout', markname: 'otherArc' },
-                            update: 'null',
-                        },
-                    ],
-                },
-            ],
-            width: { signal: 'containerW' },
-            data: [
-                {
-                    name: 'table',
-                    values: this.dataValues,
-                    transform: [
-                        {
-                            type: 'joinaggregate',
-                            fields: ['value'],
-                            ops: ['sum'],
-                            as: ['total'],
-                        },
-                        {
-                            type: 'formula',
-                            as: 'percent',
-                            expr: 'datum.value / datum.total',
-                        },
-                        {
-                            type: 'collect',
-                            sort: { field: 'order', order: 'descending' },
-                        },
-                        {
-                            type: 'pie',
-                            field: 'value',
-                            as: ['startAngle', 'endAngle'],
-                        },
-                        {
-                            type: 'formula',
-                            as: 'midAngle',
-                            expr: '((datum.startAngle + datum.endAngle) + 9.418) / 2',
-                        },
-                        {
-                            type: 'formula',
-                            as: 'labelX',
-                            expr: 'centerX + (radius * 1.2 * cos(datum.midAngle))',
-                        },
-                        {
-                            type: 'formula',
-                            as: 'labelY',
-                            expr: 'centerY + (radius * 1.2 * sin(datum.midAngle))',
-                        },
-                        {
-                            type: 'formula',
-                            as: 'percentLabel',
-                            expr: `format(datum.value / ${this.totalRevenue} * 100, '.1f') + '%'`,
-                        },
-                    ],
-                },
-                {
-                    name: 'defaultCenterText',
-                    values: [
-                        {
-                            category: spec?.centerText ? spec.centerText : this.defaultCenterText,
-                            value: this.totalRevenue,
-                            order: 4,
-                        },
-                    ],
-                    transform: [
-                        { type: 'filter', expr: 'hoveredCategory === null' },
-                        {
-                            type: 'formula',
-                            as: 'textDisplay',
-                            expr: `'${spec?.prefix ?? '$'}' + format(floor(datum.value), ',') + '${spec?.suffix ?? ''}' `,
-                        },
-                    ],
-                },
-            ],
-            scales: [
-                {
-                    name: 'mainColor',
-                    type: 'ordinal',
-                    domain: this.categories,
-                    range: this.chartColors,
-                },
-            ],
-            legends: [
-                {
-                    fill: 'mainColor',
-                    orient: 'bottom',
-                    direction: 'horizontal',
-                    columns: 2,
-                    title: '',
-                    padding: 10,
-                    symbolType: 'square',
-                    symbolSize: 100,
-                    labelFontSize: 12,
-                    labelColor: '#6A6D7D',
-                    rowPadding: 8,
-                },
-            ],
-            marks: [
-                {
-                    type: 'rule',
-                    name: 'labelLines',
-                    from: { data: 'table' },
-                    encode: {
-                        enter: {
-                            stroke: { value: 'black' }, // line color
-                            strokeWidth: { value: 1 },
-                            x: {
-                                signal: 'centerX + (radius * 0.9) * cos(datum.midAngle)',
-                            },
-                            y: {
-                                signal: 'centerY + (radius * 0.9) * sin(datum.midAngle)',
-                            },
-                            x2: {
-                                signal: 'datum.labelX - 12 * cos(datum.midAngle)', // <-- added offset
-                            },
-                            y2: {
-                                signal: 'datum.labelY - 12 * sin(datum.midAngle)', // <-- added offset
-                            },
-                        },
-                        update: {
-                            opacity: { value: 1 },
-                        },
-                    },
-                    zindex: 5,
-                },
-                {
-                    type: 'arc',
-                    name: 'mainArc',
-                    from: { data: 'table' },
-                    encode: {
-                        enter: {
-                            fill: { scale: 'mainColor', field: 'category' },
-                            x: { signal: 'centerX' },
-                            y: { signal: 'centerY' },
-                            startAngle: { field: 'startAngle' },
-                            endAngle: { field: 'endAngle' },
-                            innerRadius: { signal: 'radius * 0.5' },
-                            outerRadius: { signal: 'radius * 0.9' },
-                            padAngle: { value: 0.03 },
-                            cornerRadius: { value: 1 },
-                        },
-                    },
-                    interactive: true,
-                },
-                {
-                    type: 'arc',
-                    name: 'innerArc',
-                    from: { data: 'table' },
-                    encode: {
-                        enter: {
-                            fill: { value: 'transparent' },
-                            x: { signal: 'centerX' },
-                            y: { signal: 'centerY' },
-                            startAngle: { field: 'startAngle' },
-                            endAngle: { field: 'endAngle' },
-                            innerRadius: { signal: 'radius * 0.4' },
-                            outerRadius: { signal: 'radius * 0.5' },
-                            padAngle: { value: 0.03 },
-                            cornerRadius: { value: 1 },
-                        },
-                    },
-                    zindex: 1,
-                },
-                {
-                    type: 'arc',
-                    name: 'outerArc',
-                    from: { data: 'table' },
-                    encode: {
-                        enter: {
-                            fill: { value: 'transparent' },
-                            x: { signal: 'centerX' },
-                            y: { signal: 'centerY' },
-                            startAngle: { field: 'startAngle' },
-                            endAngle: { field: 'endAngle' },
-                            innerRadius: { signal: 'radius * 0.91' },
-                            outerRadius: { signal: 'radius * 1.30' },
-                        },
-                    },
-                    zindex: 1,
-                },
-                {
-                    type: 'text',
-                    name: 'mainArcLabel',
-                    from: { data: 'table' },
-                    encode: {
-                        enter: {
-                            text: { field: 'percentLabel' },
-                            align: { value: 'center' },
-                            baseline: { value: 'middle' },
-                            fill: { value: '#302D3B' },
-                            fontSize: { value: 10 },
-                            x: { field: 'labelX' },
-                            y: { field: 'labelY' },
-                            font: {
-                                value: "apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif",
-                            },
-                            fontWeight: 600,
-                        },
-                    },
-                },
-                {
-                    type: 'text',
-                    encode: {
-                        enter: {
-                            text: { value: '$850,000' },
-                            x: { signal: 'centerX' },
-                            y: { signal: 'centerY' },
-                            align: { value: 'center' },
-                            baseline: { value: 'middle' },
-                            fontSize: { value: 16 },
-                            fontWeight: { value: 'bold' },
-                            fill: { value: '#302D3B' },
-                            font: {
-                                value: "apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif",
-                            },
-                        },
-                        update: {
-                            text: {
-                                signal: `hoveredValue ? '${spec?.prefix ?? '$'}' + format(floor(hoveredValue), ',') + '${spec?.suffix ?? ''}' : '${spec?.prefix ?? '$'}' + format(floor(${this.totalRevenue ?? 1}), ',') + '${spec?.suffix ?? ''}'`,
-                            },
-                        },
-                    },
-                },
-                {
-                    type: 'text',
-                    encode: {
-                        enter: {
-                            x: { signal: 'centerX' },
-                            y: { signal: 'centerY + 15' },
-                            align: { value: 'center' },
-                            baseline: { value: 'middle' },
-                            fontSize: { value: 10 },
-                            fill: { value: '#6A6D7D' },
-                            font: {
-                                value: "apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif",
-                            },
-                            fontWeight: 400,
-                            limit: { value: 100 },
-                            lineBreak: { value: '\\n' },
-                        },
-                        update: { text: { signal: 'displayText' } },
-                    },
-                },
-            ],
-        };
-    }
-    render() {
-        return (index$2.h(index$2.Host, { key: 'fb26a6b02b83b0ce64a8301149b66f5d09a4a7b4' }, index$2.h("div", { key: 'fc08cdc3c0c0fda7f7c13149532eb61f511aa035', id: "container", style: { width: '100%', height: '100%' } })));
-    }
-};
-
-exports.apollo_data_bar_chart = ApolloDataBarChart;
-exports.apollo_data_donut_chart = ApolloDataDonutChart;
+exports.ApolloBase = ApolloBase;