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

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

@@ -0,0 +1,533 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+import { ApolloBase } from '../../apollo-data-base';
+export interface DonutDataItem {
+    category: string;
+    value: number;
+}
+export interface DonutSpec {
+    colorSet?: string[];
+    prefix?: string;
+    suffix?: string;
+    centerText?: string;
+}
+interface DonutDataItemValues extends DonutDataItem {
+    order: number;
+}
+export declare class ApolloDataDonutChart extends ApolloBase<DonutDataItem[], DonutSpec> implements ComponentInterface {
+    el: HTMLElement;
+    /**
+     * 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: string | DonutDataItem[];
+    /**
+     * 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: string | DonutSpec;
+    private categories;
+    private dataValues;
+    private totalRevenue;
+    private chartColors;
+    private defaultChartColors;
+    private defaultCenterText;
+    componentDidRender(): Promise<void>;
+    protected getViewData(data: DonutDataItem[], spec?: DonutSpec): Promise<{
+        $schema: string;
+        description: string;
+        height: number;
+        signals: ({
+            name: string;
+            update: string;
+            value?: undefined;
+            on?: undefined;
+        } | {
+            name: string;
+            value: any;
+            on: {
+                events: {
+                    type: string;
+                    markname: string;
+                };
+                update: string;
+            }[];
+            update?: undefined;
+        })[];
+        width: {
+            signal: string;
+        };
+        data: ({
+            name: string;
+            values: DonutDataItemValues[];
+            transform: ({
+                type: string;
+                fields: string[];
+                ops: string[];
+                as: string[];
+                expr?: undefined;
+                sort?: undefined;
+                field?: undefined;
+            } | {
+                type: string;
+                as: string;
+                expr: string;
+                fields?: undefined;
+                ops?: undefined;
+                sort?: undefined;
+                field?: undefined;
+            } | {
+                type: string;
+                sort: {
+                    field: string;
+                    order: string;
+                };
+                fields?: undefined;
+                ops?: undefined;
+                as?: undefined;
+                expr?: undefined;
+                field?: undefined;
+            } | {
+                type: string;
+                field: string;
+                as: string[];
+                fields?: undefined;
+                ops?: undefined;
+                expr?: undefined;
+                sort?: undefined;
+            })[];
+        } | {
+            name: string;
+            values: {
+                category: string;
+                value: number;
+                order: number;
+            }[];
+            transform: ({
+                type: string;
+                expr: string;
+                as?: undefined;
+            } | {
+                type: string;
+                as: string;
+                expr: string;
+            })[];
+        })[];
+        scales: {
+            name: string;
+            type: string;
+            domain: string[];
+            range: string[];
+        }[];
+        legends: {
+            fill: string;
+            orient: string;
+            direction: string;
+            columns: number;
+            title: string;
+            padding: number;
+            symbolType: string;
+            symbolSize: number;
+            labelFontSize: number;
+            labelColor: string;
+            rowPadding: number;
+        }[];
+        marks: ({
+            type: string;
+            name: string;
+            from: {
+                data: string;
+            };
+            encode: {
+                enter: {
+                    stroke: {
+                        value: string;
+                    };
+                    strokeWidth: {
+                        value: number;
+                    };
+                    x: {
+                        signal: string;
+                        field?: undefined;
+                    };
+                    y: {
+                        signal: string;
+                        field?: undefined;
+                    };
+                    x2: {
+                        signal: string;
+                    };
+                    y2: {
+                        signal: string;
+                    };
+                    fill?: undefined;
+                    startAngle?: undefined;
+                    endAngle?: undefined;
+                    innerRadius?: undefined;
+                    outerRadius?: undefined;
+                    padAngle?: undefined;
+                    cornerRadius?: undefined;
+                    text?: undefined;
+                    align?: undefined;
+                    baseline?: undefined;
+                    fontSize?: undefined;
+                    font?: undefined;
+                    fontWeight?: undefined;
+                    limit?: undefined;
+                    lineBreak?: undefined;
+                };
+                update: {
+                    opacity: {
+                        value: number;
+                    };
+                    text?: undefined;
+                };
+            };
+            zindex: number;
+            interactive?: undefined;
+        } | {
+            type: string;
+            name: string;
+            from: {
+                data: string;
+            };
+            encode: {
+                enter: {
+                    fill: {
+                        scale: string;
+                        field: string;
+                        value?: undefined;
+                    };
+                    x: {
+                        signal: string;
+                        field?: undefined;
+                    };
+                    y: {
+                        signal: string;
+                        field?: undefined;
+                    };
+                    startAngle: {
+                        field: string;
+                    };
+                    endAngle: {
+                        field: string;
+                    };
+                    innerRadius: {
+                        signal: string;
+                    };
+                    outerRadius: {
+                        signal: string;
+                    };
+                    padAngle: {
+                        value: number;
+                    };
+                    cornerRadius: {
+                        value: number;
+                    };
+                    stroke?: undefined;
+                    strokeWidth?: undefined;
+                    x2?: undefined;
+                    y2?: undefined;
+                    text?: undefined;
+                    align?: undefined;
+                    baseline?: undefined;
+                    fontSize?: undefined;
+                    font?: undefined;
+                    fontWeight?: undefined;
+                    limit?: undefined;
+                    lineBreak?: undefined;
+                };
+                update?: undefined;
+            };
+            interactive: boolean;
+            zindex?: undefined;
+        } | {
+            type: string;
+            name: string;
+            from: {
+                data: string;
+            };
+            encode: {
+                enter: {
+                    fill: {
+                        value: string;
+                        scale?: undefined;
+                        field?: undefined;
+                    };
+                    x: {
+                        signal: string;
+                        field?: undefined;
+                    };
+                    y: {
+                        signal: string;
+                        field?: undefined;
+                    };
+                    startAngle: {
+                        field: string;
+                    };
+                    endAngle: {
+                        field: string;
+                    };
+                    innerRadius: {
+                        signal: string;
+                    };
+                    outerRadius: {
+                        signal: string;
+                    };
+                    padAngle: {
+                        value: number;
+                    };
+                    cornerRadius: {
+                        value: number;
+                    };
+                    stroke?: undefined;
+                    strokeWidth?: undefined;
+                    x2?: undefined;
+                    y2?: undefined;
+                    text?: undefined;
+                    align?: undefined;
+                    baseline?: undefined;
+                    fontSize?: undefined;
+                    font?: undefined;
+                    fontWeight?: undefined;
+                    limit?: undefined;
+                    lineBreak?: undefined;
+                };
+                update?: undefined;
+            };
+            zindex: number;
+            interactive?: undefined;
+        } | {
+            type: string;
+            name: string;
+            from: {
+                data: string;
+            };
+            encode: {
+                enter: {
+                    fill: {
+                        value: string;
+                        scale?: undefined;
+                        field?: undefined;
+                    };
+                    x: {
+                        signal: string;
+                        field?: undefined;
+                    };
+                    y: {
+                        signal: string;
+                        field?: undefined;
+                    };
+                    startAngle: {
+                        field: string;
+                    };
+                    endAngle: {
+                        field: string;
+                    };
+                    innerRadius: {
+                        signal: string;
+                    };
+                    outerRadius: {
+                        signal: string;
+                    };
+                    stroke?: undefined;
+                    strokeWidth?: undefined;
+                    x2?: undefined;
+                    y2?: undefined;
+                    padAngle?: undefined;
+                    cornerRadius?: undefined;
+                    text?: undefined;
+                    align?: undefined;
+                    baseline?: undefined;
+                    fontSize?: undefined;
+                    font?: undefined;
+                    fontWeight?: undefined;
+                    limit?: undefined;
+                    lineBreak?: undefined;
+                };
+                update?: undefined;
+            };
+            zindex: number;
+            interactive?: undefined;
+        } | {
+            type: string;
+            name: string;
+            from: {
+                data: string;
+            };
+            encode: {
+                enter: {
+                    text: {
+                        field: string;
+                        value?: undefined;
+                    };
+                    align: {
+                        value: string;
+                    };
+                    baseline: {
+                        value: string;
+                    };
+                    fill: {
+                        value: string;
+                        scale?: undefined;
+                        field?: undefined;
+                    };
+                    fontSize: {
+                        value: number;
+                    };
+                    x: {
+                        field: string;
+                        signal?: undefined;
+                    };
+                    y: {
+                        field: string;
+                        signal?: undefined;
+                    };
+                    font: {
+                        value: string;
+                    };
+                    fontWeight: number;
+                    stroke?: undefined;
+                    strokeWidth?: undefined;
+                    x2?: undefined;
+                    y2?: undefined;
+                    startAngle?: undefined;
+                    endAngle?: undefined;
+                    innerRadius?: undefined;
+                    outerRadius?: undefined;
+                    padAngle?: undefined;
+                    cornerRadius?: undefined;
+                    limit?: undefined;
+                    lineBreak?: undefined;
+                };
+                update?: undefined;
+            };
+            zindex?: undefined;
+            interactive?: undefined;
+        } | {
+            type: string;
+            encode: {
+                enter: {
+                    text: {
+                        value: string;
+                        field?: undefined;
+                    };
+                    x: {
+                        signal: string;
+                        field?: undefined;
+                    };
+                    y: {
+                        signal: string;
+                        field?: undefined;
+                    };
+                    align: {
+                        value: string;
+                    };
+                    baseline: {
+                        value: string;
+                    };
+                    fontSize: {
+                        value: number;
+                    };
+                    fontWeight: {
+                        value: string;
+                    };
+                    fill: {
+                        value: string;
+                        scale?: undefined;
+                        field?: undefined;
+                    };
+                    font: {
+                        value: string;
+                    };
+                    stroke?: undefined;
+                    strokeWidth?: undefined;
+                    x2?: undefined;
+                    y2?: undefined;
+                    startAngle?: undefined;
+                    endAngle?: undefined;
+                    innerRadius?: undefined;
+                    outerRadius?: undefined;
+                    padAngle?: undefined;
+                    cornerRadius?: undefined;
+                    limit?: undefined;
+                    lineBreak?: undefined;
+                };
+                update: {
+                    text: {
+                        signal: string;
+                    };
+                    opacity?: undefined;
+                };
+            };
+            name?: undefined;
+            from?: undefined;
+            zindex?: undefined;
+            interactive?: undefined;
+        } | {
+            type: string;
+            encode: {
+                enter: {
+                    x: {
+                        signal: string;
+                        field?: undefined;
+                    };
+                    y: {
+                        signal: string;
+                        field?: undefined;
+                    };
+                    align: {
+                        value: string;
+                    };
+                    baseline: {
+                        value: string;
+                    };
+                    fontSize: {
+                        value: number;
+                    };
+                    fill: {
+                        value: string;
+                        scale?: undefined;
+                        field?: undefined;
+                    };
+                    font: {
+                        value: string;
+                    };
+                    fontWeight: number;
+                    limit: {
+                        value: number;
+                    };
+                    lineBreak: {
+                        value: string;
+                    };
+                    stroke?: undefined;
+                    strokeWidth?: undefined;
+                    x2?: undefined;
+                    y2?: undefined;
+                    startAngle?: undefined;
+                    endAngle?: undefined;
+                    innerRadius?: undefined;
+                    outerRadius?: undefined;
+                    padAngle?: undefined;
+                    cornerRadius?: undefined;
+                    text?: undefined;
+                };
+                update: {
+                    text: {
+                        signal: string;
+                    };
+                    opacity?: undefined;
+                };
+            };
+            name?: undefined;
+            from?: undefined;
+            zindex?: undefined;
+            interactive?: undefined;
+        })[];
+    }>;
+    render(): any;
+}
+export {};

package/dist/types/components.d.ts

@@ -0,0 +1,102 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+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";
+export { BarDataItem, BarSpec } from "./components/apollo-data-bar/apollo-data-bar";
+export { DonutDataItem, DonutSpec } from "./components/apollo-data-donut/apollo-data-donut";
+export namespace Components {
+    interface ApolloDataBarChart {
+        /**
+          * @default []
+         */
+        "adData": string | BarDataItem[];
+        /**
+          * @default null
+         */
+        "adSpec": string | BarSpec;
+    }
+    interface ApolloDataDonutChart {
+        /**
+          * 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
+          * @default []
+         */
+        "adData": string | DonutDataItem[];
+        /**
+          * 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.
+          * @default {}
+         */
+        "adSpec": string | DonutSpec;
+    }
+}
+declare global {
+    interface HTMLApolloDataBarChartElement extends Components.ApolloDataBarChart, HTMLStencilElement {
+    }
+    var HTMLApolloDataBarChartElement: {
+        prototype: HTMLApolloDataBarChartElement;
+        new (): HTMLApolloDataBarChartElement;
+    };
+    interface HTMLApolloDataDonutChartElement extends Components.ApolloDataDonutChart, HTMLStencilElement {
+    }
+    var HTMLApolloDataDonutChartElement: {
+        prototype: HTMLApolloDataDonutChartElement;
+        new (): HTMLApolloDataDonutChartElement;
+    };
+    interface HTMLElementTagNameMap {
+        "apollo-data-bar-chart": HTMLApolloDataBarChartElement;
+        "apollo-data-donut-chart": HTMLApolloDataDonutChartElement;
+    }
+}
+declare namespace LocalJSX {
+    interface ApolloDataBarChart {
+        /**
+          * @default []
+         */
+        "adData"?: string | BarDataItem[];
+        /**
+          * @default null
+         */
+        "adSpec"?: string | BarSpec;
+    }
+    interface ApolloDataDonutChart {
+        /**
+          * 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
+          * @default []
+         */
+        "adData"?: string | DonutDataItem[];
+        /**
+          * 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.
+          * @default {}
+         */
+        "adSpec"?: string | DonutSpec;
+    }
+    interface IntrinsicElements {
+        "apollo-data-bar-chart": ApolloDataBarChart;
+        "apollo-data-donut-chart": ApolloDataDonutChart;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "apollo-data-bar-chart": LocalJSX.ApolloDataBarChart & JSXBase.HTMLAttributes<HTMLApolloDataBarChartElement>;
+            "apollo-data-donut-chart": LocalJSX.ApolloDataDonutChart & JSXBase.HTMLAttributes<HTMLApolloDataDonutChartElement>;
+        }
+    }
+}

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

@@ -0,0 +1,12 @@
+import { BarDataItem, BarSpec } from '../components/apollo-data-bar/apollo-data-bar';
+export interface BarExample {
+    name: string;
+    description: string;
+    props: {
+        adData: BarDataItem[];
+        adSpec?: BarSpec;
+    };
+    notes?: string;
+}
+/** periodId should be a date string (YYYY-MM-DD) representing the period. */
+export declare const barExamples: BarExample[];

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

@@ -0,0 +1,11 @@
+import { DonutDataItem, DonutSpec } from '../components/apollo-data-donut/apollo-data-donut';
+export interface DonutExample {
+    name: string;
+    description: string;
+    props: {
+        adData: DonutDataItem[];
+        adSpec?: DonutSpec;
+    };
+    notes?: string;
+}
+export declare const donutExamples: DonutExample[];

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

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

package/dist/types/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @fileoverview entry point for your component library
+ *
+ * This is the entry point for your component library. Use this file to export utilities,
+ * constants or data structure that accompany your components.
+ *
+ * DO NOT use this file to export your components. Instead, use the recommended approaches
+ * to consume components of this package as outlined in the `README.md`.
+ */
+export { format } from './utils/utils';
+export type * from './components';