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

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

@@ -0,0 +1,479 @@
+import { h, Host } from "@stencil/core";
+import { ApolloBase } from "../../apollo-data-base";
+export class ApolloDataDonutChart extends ApolloBase {
+    constructor() {
+        super();
+    }
+    el = null;
+    /**
+     * 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 (h(Host, { key: 'fb26a6b02b83b0ce64a8301149b66f5d09a4a7b4' }, h("div", { key: 'fc08cdc3c0c0fda7f7c13149532eb61f511aa035', id: "container", style: { width: '100%', height: '100%' } })));
+    }
+    static get is() { return "apollo-data-donut-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "adData": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | DonutDataItem[]",
+                    "resolved": "DonutDataItem[] | string",
+                    "references": {
+                        "DonutDataItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-data/src/components/apollo-data-donut/apollo-data-donut.tsx",
+                            "id": "src/components/apollo-data-donut/apollo-data-donut.tsx::DonutDataItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "property",
+                            "text": "{string} category - Category name for the data segment"
+                        }, {
+                            "name": "property",
+                            "text": "{number} value - Numeric value for the donut chart segment"
+                        }],
+                    "text": "Array of data items to display in the donut chart. Each item represents a segment with category and value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ad-data",
+                "defaultValue": "[]"
+            },
+            "adSpec": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | DonutSpec",
+                    "resolved": "DonutSpec | string",
+                    "references": {
+                        "DonutSpec": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-data/src/components/apollo-data-donut/apollo-data-donut.tsx",
+                            "id": "src/components/apollo-data-donut/apollo-data-donut.tsx::DonutSpec"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "property",
+                            "text": "{string[]} [colorSet] - Array of color hex codes for chart segments"
+                        }, {
+                            "name": "property",
+                            "text": "{string} [preffix] - A string added at the start of another string, like $ or a currency symbol."
+                        }, {
+                            "name": "property",
+                            "text": "{string} [suffix] - A string added at the end of another string, like %, kg or a currency symbol."
+                        }, {
+                            "name": "property",
+                            "text": "{string} [centerText] - A label string rendered at the center of the view."
+                        }],
+                    "text": "Optional specification object for customizing the chart appearance"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ad-spec",
+                "defaultValue": "{}"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,160 @@
+/** periodId should be a date string (YYYY-MM-DD) representing the period. */
+export const barExamples = [
+    {
+        name: 'Revenue and Expenses by Day',
+        description: 'A stacked bar chart showing daily revenue and expenses over a week',
+        props: {
+            adData: [
+                { label: 'Mon', category: 'Revenue', value: 5000, periodId: '2024-01-01' },
+                { label: 'Mon', category: 'Expenses', value: 2000, periodId: '2024-01-01' },
+                { label: 'Tue', category: 'Revenue', value: 6000, periodId: '2024-01-02' },
+                { label: 'Tue', category: 'Expenses', value: 2500, periodId: '2024-01-02' },
+                { label: 'Wed', category: 'Revenue', value: 5500, periodId: '2024-01-03' },
+                { label: 'Wed', category: 'Expenses', value: 2200, periodId: '2024-01-03' },
+                { label: 'Thu', category: 'Revenue', value: 7000, periodId: '2024-01-04' },
+                { label: 'Thu', category: 'Expenses', value: 3000, periodId: '2024-01-04' },
+                { label: 'Fri', category: 'Revenue', value: 6500, periodId: '2024-01-05' },
+                { label: 'Fri', category: 'Expenses', value: 2800, periodId: '2024-01-05' },
+            ],
+            adSpec: {
+                tooltipPrefix: '$',
+                currencySymbol: '$',
+                yAxisTitle: 'Amount',
+                colorSet: ['#FF8DF4', '#74FBD0'],
+            },
+        },
+    },
+    {
+        name: 'Monthly Sales by Product',
+        description: 'Stacked bar chart showing sales across multiple products by month',
+        props: {
+            adData: [
+                { label: 'Jan', category: 'Product A', value: 12000, periodId: '2024-01-01' },
+                { label: 'Jan', category: 'Product B', value: 8000, periodId: '2024-01-01' },
+                { label: 'Jan', category: 'Product C', value: 6000, periodId: '2024-01-01' },
+                { label: 'Feb', category: 'Product A', value: 15000, periodId: '2024-02-01' },
+                { label: 'Feb', category: 'Product B', value: 9000, periodId: '2024-02-01' },
+                { label: 'Feb', category: 'Product C', value: 7000, periodId: '2024-02-01' },
+                { label: 'Mar', category: 'Product A', value: 13000, periodId: '2024-03-01' },
+                { label: 'Mar', category: 'Product B', value: 10000, periodId: '2024-03-01' },
+                { label: 'Mar', category: 'Product C', value: 5500, periodId: '2024-03-01' },
+                { label: 'Apr', category: 'Product A', value: 14000, periodId: '2024-04-01' },
+                { label: 'Apr', category: 'Product B', value: 9500, periodId: '2024-04-01' },
+                { label: 'Apr', category: 'Product C', value: 6500, periodId: '2024-04-01' },
+            ],
+            adSpec: {
+                tooltipPrefix: '$',
+                currencySymbol: '$',
+                yAxisTitle: 'Monthly Sales',
+                colorSet: ['#FF8DF4', '#74FBD0', '#ECFD91'],
+            },
+        },
+    },
+    {
+        name: 'Weekly Revenue by Category',
+        description: 'Stacked bar chart showing revenue across Sales, Marketing, and Product',
+        props: {
+            adData: [
+                { label: 'W1', category: 'Sales', value: 3500, periodId: '2024-01-01' },
+                { label: 'W1', category: 'Marketing', value: 2200, periodId: '2024-01-01' },
+                { label: 'W1', category: 'Product A', value: 1800, periodId: '2024-01-01' },
+                { label: 'W2', category: 'Sales', value: 4200, periodId: '2024-01-08' },
+                { label: 'W2', category: 'Marketing', value: 2800, periodId: '2024-01-08' },
+                { label: 'W2', category: 'Product A', value: 2000, periodId: '2024-01-08' },
+                { label: 'W3', category: 'Sales', value: 3800, periodId: '2024-01-15' },
+                { label: 'W3', category: 'Marketing', value: 2500, periodId: '2024-01-15' },
+                { label: 'W3', category: 'Product A', value: 1900, periodId: '2024-01-15' },
+            ],
+            adSpec: {
+                tooltipPrefix: '$',
+                currencySymbol: '$',
+                yAxisTitle: 'Weekly Revenue',
+            },
+        },
+    },
+    {
+        name: 'Yearly Regional Revenue',
+        description: 'Stacked bar chart showing revenue across regions by year',
+        props: {
+            adData: [
+                { label: '2019', category: 'North America', value: 450000, periodId: '2019-01-01' },
+                { label: '2019', category: 'Europe', value: 320000, periodId: '2019-01-01' },
+                { label: '2019', category: 'Asia Pacific', value: 280000, periodId: '2019-01-01' },
+                { label: '2020', category: 'North America', value: 380000, periodId: '2020-01-01' },
+                { label: '2020', category: 'Europe', value: 290000, periodId: '2020-01-01' },
+                { label: '2020', category: 'Asia Pacific', value: 310000, periodId: '2020-01-01' },
+                { label: '2021', category: 'North America', value: 520000, periodId: '2021-01-01' },
+                { label: '2021', category: 'Europe', value: 410000, periodId: '2021-01-01' },
+                { label: '2021', category: 'Asia Pacific', value: 450000, periodId: '2021-01-01' },
+                { label: '2022', category: 'North America', value: 580000, periodId: '2022-01-01' },
+                { label: '2022', category: 'Europe', value: 460000, periodId: '2022-01-01' },
+                { label: '2022', category: 'Asia Pacific', value: 520000, periodId: '2022-01-01' },
+            ],
+            adSpec: {
+                tooltipPrefix: '$',
+                currencySymbol: '$',
+                yAxisTitle: 'Regional Revenue',
+                colorSet: ['#4d1ab2', '#f99170', '#e550c8'],
+            },
+        },
+    },
+    {
+        name: 'Order Counts by Channel',
+        description: 'Bar chart showing order counts by channel without currency formatting',
+        props: {
+            adData: [
+                { label: 'Mon', category: 'Website', value: 1250, periodId: '2024-05-01' },
+                { label: 'Mon', category: 'Mobile App', value: 890, periodId: '2024-05-01' },
+                { label: 'Mon', category: 'In-Store', value: 450, periodId: '2024-05-01' },
+                { label: 'Tue', category: 'Website', value: 1380, periodId: '2024-05-02' },
+                { label: 'Tue', category: 'Mobile App', value: 920, periodId: '2024-05-02' },
+                { label: 'Tue', category: 'In-Store', value: 480, periodId: '2024-05-02' },
+                { label: 'Wed', category: 'Website', value: 1150, periodId: '2024-05-03' },
+                { label: 'Wed', category: 'Mobile App', value: 850, periodId: '2024-05-03' },
+                { label: 'Wed', category: 'In-Store', value: 420, periodId: '2024-05-03' },
+            ],
+            adSpec: {
+                yAxisTitle: 'Order Count',
+                colorSet: ['#8857fa', '#52ebba', '#31cff8'],
+            },
+        },
+    },
+    {
+        name: 'Single Category',
+        description: 'Bar chart with a single category showing visitor counts by day',
+        props: {
+            adData: [
+                { label: 'Mon', category: 'Visitors', value: 2450, periodId: '2024-04-01' },
+                { label: 'Tue', category: 'Visitors', value: 2680, periodId: '2024-04-02' },
+                { label: 'Wed', category: 'Visitors', value: 2320, periodId: '2024-04-03' },
+                { label: 'Thu', category: 'Visitors', value: 2890, periodId: '2024-04-04' },
+                { label: 'Fri', category: 'Visitors', value: 3150, periodId: '2024-04-05' },
+                { label: 'Sat', category: 'Visitors', value: 3420, periodId: '2024-04-06' },
+                { label: 'Sun', category: 'Visitors', value: 3280, periodId: '2024-04-07' },
+            ],
+            adSpec: {
+                yAxisTitle: 'Daily Visitors',
+                colorSet: ['#6366f1'],
+            },
+        },
+    },
+    {
+        name: 'Custom Axis Titles',
+        description: 'Chart with custom x-axis and y-axis titles via xAxisTitle and yAxisTitle',
+        props: {
+            adData: [
+                { label: 'Mon', category: 'Inbound', value: 120, periodId: '2024-06-01' },
+                { label: 'Mon', category: 'Outbound', value: 80, periodId: '2024-06-01' },
+                { label: 'Tue', category: 'Inbound', value: 95, periodId: '2024-06-02' },
+                { label: 'Tue', category: 'Outbound', value: 110, periodId: '2024-06-02' },
+                { label: 'Wed', category: 'Inbound', value: 130, periodId: '2024-06-03' },
+                { label: 'Wed', category: 'Outbound', value: 70, periodId: '2024-06-03' },
+            ],
+            adSpec: {
+                yAxisTitle: 'Calls',
+                xAxisTitle: 'Support queue (by day)',
+                colorSet: ['#4d1ab2', '#f99170'],
+            },
+        },
+    },
+];