@xplortech/apollo-data 0.0.3-draft.f8f65f7 → 0.0.4-draft.64ed229

package/dist/esm/{apollo-data-bar-chart_2.entry.js → apollo-data-bar-chart_3.entry.js}

@@ -67653,7 +67653,7 @@ 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 FONT_FAMILY$1 = "apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif";
 const ApolloDataBarChart = class extends ApolloBase {
     constructor(hostRef) {
         super();
@@ -67743,28 +67743,28 @@ const ApolloDataBarChart = class extends ApolloBase {
             config: {
                 text: {
                     fill: '#6a6d7d',
-                    font: FONT_FAMILY,
+                    font: FONT_FAMILY$1,
                     labelFontSize: 12,
                     labelFontWeight: 400,
                 },
                 axis: {
                     labelColor: '#6a6d7d',
                     titleColor: '#6a6d7d',
-                    labelFont: FONT_FAMILY,
-                    titleFont: FONT_FAMILY,
+                    labelFont: FONT_FAMILY$1,
+                    titleFont: FONT_FAMILY$1,
                     titleFontWeight: 400,
                 },
                 legend: {
                     labelColor: '#6a6d7d',
                     titleColor: '#6a6d7d',
-                    labelFont: FONT_FAMILY,
-                    titleFont: FONT_FAMILY,
+                    labelFont: FONT_FAMILY$1,
+                    titleFont: FONT_FAMILY$1,
                     labelFontSize: 12,
                     labelLimit: 95,
                 },
                 title: {
                     color: '#6a6d7d',
-                    font: FONT_FAMILY,
+                    font: FONT_FAMILY$1,
                     labelFontSize: 12,
                     labelFontWeight: 400,
                 },
@@ -68362,4 +68362,290 @@ const ApolloDataDonutChart = class extends ApolloBase {
     }
 };
 
-export { ApolloDataBarChart as apollo_data_bar_chart, ApolloDataDonutChart as apollo_data_donut_chart };
+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$1(Host, { key: '7799f01536f212d7a06da08c1e463d8529c5bf21' }, h$1("div", { key: '25463f10bbc0f5443c35ab03b5b53164d9ad1efd', id: "container", style: { width: '100%', height: '100%' } })));
+    }
+};
+
+export { ApolloDataBarChart as apollo_data_bar_chart, ApolloDataDonutChart as apollo_data_donut_chart, ApolloDataLineChart as apollo_data_line_chart };

package/dist/esm/apollo-data.js

@@ -17,5 +17,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["apollo-data-bar-chart_2",[[513,"apollo-data-bar-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-donut-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}]]]], options);
+  return bootstrapLazy([["apollo-data-bar-chart_3",[[513,"apollo-data-bar-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-donut-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-line-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}]]]], options);
 });

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["apollo-data-bar-chart_2",[[513,"apollo-data-bar-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-donut-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}]]]], options);
+  return bootstrapLazy([["apollo-data-bar-chart_3",[[513,"apollo-data-bar-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-donut-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-line-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/types/components/apollo-data-line/apollo-data-line.d.ts

@@ -0,0 +1,244 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+import { ApolloBase } from '../../apollo-data-base';
+export interface LineDataItem {
+    category: string;
+    xValue: number;
+    yValue: number;
+    xLabel?: string;
+    yLabel?: string;
+}
+export type LinePointStyle = 'circle' | 'square' | 'diamond' | 'cross' | 'triangle' | 'triangle-up' | 'triangle-down' | 'triangle-right' | 'triangle-left';
+/** Stroke dash pattern for the lines: 'solid' | 'dashed' | 'dotted'. */
+export type LineLineStyle = 'solid' | 'dashed' | 'dotted';
+export interface LineSpec {
+    colorSet?: string[];
+    tooltipPrefix?: string;
+    currencySymbol?: string;
+    yAxisTitle?: string;
+    xAxisTitle?: string;
+    /** Shape of the data points. Defaults to 'circle'. */
+    pointStyle?: LinePointStyle;
+    /** Stroke style of the lines. Defaults to 'solid'. */
+    lineStyle?: LineLineStyle;
+}
+export declare class ApolloDataLineChart extends ApolloBase<LineDataItem[], LineSpec> implements ComponentInterface {
+    el: HTMLElement;
+    adData: string | LineDataItem[];
+    adSpec: string | LineSpec;
+    private static tooltipStylesInjected;
+    componentDidLoad(): void;
+    componentDidRender(): Promise<void>;
+    private injectTooltipStyles;
+    protected getViewData(data: LineDataItem[], spec?: LineSpec): Promise<{
+        $schema: string;
+        config: {
+            text: {
+                fill: string;
+                font: string;
+                labelFontSize: number;
+                labelFontWeight: number;
+            };
+            axis: {
+                labelColor: string;
+                titleColor: string;
+                labelFont: string;
+                titleFont: string;
+                titleFontWeight: number;
+            };
+            legend: {
+                labelColor: string;
+                titleColor: string;
+                labelFont: string;
+                titleFont: string;
+                labelFontSize: number;
+                labelLimit: number;
+            };
+            title: {
+                color: string;
+                font: string;
+                labelFontSize: number;
+                labelFontWeight: number;
+            };
+        };
+        height: number;
+        autosize: {
+            type: string;
+            contains: string;
+            resize: boolean;
+        };
+        signals: {
+            name: string;
+            update: string;
+        }[];
+        width: {
+            signal: string;
+        };
+        data: any[];
+        scales: ({
+            name: string;
+            type: string;
+            domain: number[];
+            range: string;
+            padding: number;
+            nice?: undefined;
+            zero?: undefined;
+        } | {
+            name: string;
+            type: string;
+            domain: {
+                data: string;
+                field: string;
+            };
+            range: {
+                data: string;
+                field: string;
+            };
+            padding?: undefined;
+            nice?: undefined;
+            zero?: undefined;
+        } | {
+            name: string;
+            type: string;
+            domain: {
+                data: string;
+                field: string;
+            };
+            nice: boolean;
+            zero: boolean;
+            range: string;
+            padding?: undefined;
+        } | {
+            name: string;
+            type: string;
+            domain: string[];
+            range: string[];
+            padding?: undefined;
+            nice?: undefined;
+            zero?: undefined;
+        })[];
+        axes: ({
+            orient: string;
+            scale: string;
+            title: string;
+            labelPadding: number;
+            titlePadding: number;
+            labelAngle: number;
+            labelAlign: string;
+            labelBaseline: string;
+            tickSize: number;
+            labelFontSize: number;
+            titleFontSize: number;
+            ticks: boolean;
+            domain: boolean;
+            encode: {
+                labels: {
+                    update: {
+                        text: {
+                            signal: string;
+                        };
+                    };
+                };
+            };
+            format?: undefined;
+            grid?: undefined;
+            tickCount?: undefined;
+            tickBand?: undefined;
+        } | {
+            orient: string;
+            scale: string;
+            title: string;
+            format: string;
+            grid: boolean;
+            tickCount: number;
+            labelFontSize: number;
+            titleFontSize: number;
+            ticks: boolean;
+            domain: boolean;
+            tickBand: string;
+            labelPadding: number;
+            titlePadding?: undefined;
+            labelAngle?: undefined;
+            labelAlign?: undefined;
+            labelBaseline?: undefined;
+            tickSize?: undefined;
+            encode?: undefined;
+        })[];
+        legends: {
+            stroke: string;
+            orient: string;
+            direction: string;
+            columns: {
+                signal: string;
+            };
+            title: any;
+            symbolType: string;
+            symbolStrokeWidth: number;
+            rowPadding: number;
+            symbolOffset: number;
+            symbolSize: number;
+            labelOffset: number;
+            labelLimit: number;
+        }[];
+        marks: ({
+            type: string;
+            from: {
+                data: string;
+            };
+            encode: {
+                enter: {
+                    strokeDash?: {
+                        value: number[];
+                    };
+                    x: {
+                        scale: string;
+                        field: string;
+                    };
+                    y: {
+                        scale: string;
+                        field: string;
+                    };
+                    stroke: {
+                        value: string;
+                    };
+                    strokeWidth: {
+                        value: number;
+                    };
+                    interpolate: {
+                        value: string;
+                    };
+                };
+            };
+        } | {
+            type: string;
+            from: {
+                data: string;
+            };
+            encode: {
+                enter: {
+                    x: {
+                        scale: string;
+                        field: string;
+                    };
+                    y: {
+                        scale: string;
+                        field: string;
+                    };
+                    fill: {
+                        scale: string;
+                        field: string;
+                    };
+                    size: {
+                        value: number;
+                    };
+                    shape: {
+                        value: LinePointStyle;
+                    };
+                    tooltip: {
+                        signal: string;
+                    };
+                };
+            };
+        })[];
+    }>;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -7,8 +7,10 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { BarDataItem, BarSpec } from "./components/apollo-data-bar/apollo-data-bar";
 import { DonutDataItem, DonutSpec } from "./components/apollo-data-donut/apollo-data-donut";
+import { LineDataItem, LineSpec } from "./components/apollo-data-line/apollo-data-line";
 export { BarDataItem, BarSpec } from "./components/apollo-data-bar/apollo-data-bar";
 export { DonutDataItem, DonutSpec } from "./components/apollo-data-donut/apollo-data-donut";
+export { LineDataItem, LineSpec } from "./components/apollo-data-line/apollo-data-line";
 export namespace Components {
     interface ApolloDataBarChart {
         /**
@@ -38,6 +40,16 @@ export namespace Components {
          */
         "adSpec": string | DonutSpec;
     }
+    interface ApolloDataLineChart {
+        /**
+          * @default []
+         */
+        "adData": string | LineDataItem[];
+        /**
+          * @default null
+         */
+        "adSpec": string | LineSpec;
+    }
 }
 declare global {
     interface HTMLApolloDataBarChartElement extends Components.ApolloDataBarChart, HTMLStencilElement {
@@ -52,9 +64,16 @@ declare global {
         prototype: HTMLApolloDataDonutChartElement;
         new (): HTMLApolloDataDonutChartElement;
     };
+    interface HTMLApolloDataLineChartElement extends Components.ApolloDataLineChart, HTMLStencilElement {
+    }
+    var HTMLApolloDataLineChartElement: {
+        prototype: HTMLApolloDataLineChartElement;
+        new (): HTMLApolloDataLineChartElement;
+    };
     interface HTMLElementTagNameMap {
         "apollo-data-bar-chart": HTMLApolloDataBarChartElement;
         "apollo-data-donut-chart": HTMLApolloDataDonutChartElement;
+        "apollo-data-line-chart": HTMLApolloDataLineChartElement;
     }
 }
 declare namespace LocalJSX {
@@ -86,9 +105,20 @@ declare namespace LocalJSX {
          */
         "adSpec"?: string | DonutSpec;
     }
+    interface ApolloDataLineChart {
+        /**
+          * @default []
+         */
+        "adData"?: string | LineDataItem[];
+        /**
+          * @default null
+         */
+        "adSpec"?: string | LineSpec;
+    }
     interface IntrinsicElements {
         "apollo-data-bar-chart": ApolloDataBarChart;
         "apollo-data-donut-chart": ApolloDataDonutChart;
+        "apollo-data-line-chart": ApolloDataLineChart;
     }
 }
 export { LocalJSX as JSX };
@@ -97,6 +127,7 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "apollo-data-bar-chart": LocalJSX.ApolloDataBarChart & JSXBase.HTMLAttributes<HTMLApolloDataBarChartElement>;
             "apollo-data-donut-chart": LocalJSX.ApolloDataDonutChart & JSXBase.HTMLAttributes<HTMLApolloDataDonutChartElement>;
+            "apollo-data-line-chart": LocalJSX.ApolloDataLineChart & JSXBase.HTMLAttributes<HTMLApolloDataLineChartElement>;
         }
     }
 }

package/dist/types/examples/apollo-data-line.examples.d.ts

@@ -0,0 +1,12 @@
+import { LineDataItem, LineSpec } from '../components/apollo-data-line/apollo-data-line';
+export interface LineExample {
+    name: string;
+    description: string;
+    props: {
+        adData: LineDataItem[];
+        adSpec?: LineSpec;
+    };
+    notes?: string;
+}
+/** Each item has category, xValue, yValue, and optional xLabel/yLabel. When labels are omitted, numeric values are shown. */
+export declare const lineExamples: LineExample[];

package/dist/types/examples/index.d.ts

@@ -1,2 +1,3 @@
 export * from './apollo-data-donut.examples';
 export * from './apollo-data-bar.examples';
+export * from './apollo-data-line.examples';