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

package/dist/types/utils/code-generator.d.ts

@@ -0,0 +1,12 @@
+export interface PropValue {
+    value: any;
+    isFunction?: boolean;
+    functionBody?: string;
+}
+export interface ComponentProps {
+    [key: string]: any;
+}
+export declare function generateInstallationDocs(framework?: string, componentName?: string): string;
+export declare function generateReactCode(componentName: string, props: ComponentProps): string;
+export declare function generateVueCode(componentName: string, props: ComponentProps): string;
+export declare function generateWebComponentCode(componentName: string, props: ComponentProps): string;

package/dist/types/utils/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const MAX_NUMBER_OF_CATEGORIES = 8;
+export declare const CHART_COLORS: string[];

package/dist/types/utils/utils.d.ts

@@ -0,0 +1 @@
+export declare function format(first?: string, middle?: string, last?: string): string;

package/loader/cdn.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.d.ts

@@ -0,0 +1,24 @@
+export * from '../dist/types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
+export declare function applyPolyfills(): Promise<void>;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/loader/index.es2017.js

@@ -0,0 +1 @@
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -0,0 +1,2 @@
+(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
+export * from '../dist/esm/loader.js';

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@xplortech/apollo-data",
+  "version": "0.0.3-draft.64d0fa1",
+  "description": "Apollo Data",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/apollo-data/apollo-data.esm.js",
+  "author": "Xplor Technologies",
+  "homepage": "https://github.com/xplor/apollo/tree/main/packages/apollo-data#readme",
+  "bugs": {
+    "url": "https://github.com/xplor/apollo/issues"
+  },
+  "repository": {
+    "url": "git+https://github.com/xplor/apollo.git"
+  },
+  "keywords": [
+    "apollo",
+    "apollo-data",
+    "apollo-data-visualization",
+    "apollo-data-charts",
+    "xplor"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": false
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/apollo-data/apollo-data.esm.js",
+      "require": "./dist/apollo-data/apollo-data.cjs.js"
+    },
+    "./dist/*": {
+      "import": "./dist/*",
+      "types": "./dist/*"
+    },
+    "./components/*": {
+      "import": "./dist/components/*.js",
+      "types": "./dist/components/*.d.ts"
+    },
+    "./loader": {
+      "import": "./loader/index.js",
+      "require": "./loader/index.cjs",
+      "types": "./loader/index.d.ts"
+    },
+    "./examples": {
+      "import": "./dist/examples/index.js",
+      "types": "./dist/types/examples/index.d.ts"
+    }
+  },
+  "files": [
+    "dist/",
+    "loader/",
+    "src/examples/"
+  ],
+  "scripts": {
+    "build": "stencil build",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate"
+  },
+  "devDependencies": {
+    "@kesills/eslint-config-airbnb-typescript": "^20.0.0",
+    "@stencil/core": "^4.38.2",
+    "@stencil/react-output-target": "^1.2.0",
+    "@stencil/vue-output-target": "^0.11.8",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "eslint": "^8.57.1",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.5",
+    "eslint-plugin-testing-library": "^7.1.1",
+    "happy-dom": "^17.4.4",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.5.3",
+    "typescript": "^5.5.3",
+    "vitest": "^3.0.9"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "date-fns": "^2.30.0",
+    "vega-embed": "^7.1.0"
+  }
+}

package/src/examples/apollo-data-bar.examples.ts

@@ -0,0 +1,172 @@
+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 const barExamples: BarExample[] = [
+    {
+        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'],
+            },
+        },
+    },
+];

package/src/examples/apollo-data-donut.examples.ts

@@ -0,0 +1,118 @@
+import { DonutDataItem, DonutSpec } from '../components/apollo-data-donut/apollo-data-donut';
+
+// Use the component's prop types directly
+export interface DonutExample {
+  name: string;
+  description: string;
+  props: {
+    adData: DonutDataItem[];
+    adSpec?: DonutSpec;
+    // Future: add event handlers when component supports them
+    // onSliceClick?: (item: DonutDataItem) => void;
+  };
+  notes?: string; // Optional additional documentation
+}
+
+export const donutExamples: DonutExample[] = [
+  {
+    name: 'Basic Revenue Distribution',
+    description: 'A simple donut chart showing revenue distribution across different categories',
+    props: {
+      adData: [
+        { category: 'Product Sales', value: 350000 },
+        { category: 'Services', value: 250000 },
+        { category: 'Subscriptions', value: 150000 },
+        { category: 'Consulting', value: 100000 },
+      ],
+    },
+  },
+  {
+    name: 'Custom Colors',
+    description: 'Donut chart with custom color scheme',
+    props: {
+      adData: [
+        { category: 'Region A', value: 450000 },
+        { category: 'Region B', value: 300000 },
+        { category: 'Region C', value: 200000 },
+      ],
+      adSpec: {
+        colorSet: ['#FF6B6B', '#4ECDC4', '#45B7D1'],
+      },
+    },
+  },
+  {
+    name: 'Many Categories',
+    description: 'Donut chart with multiple categories',
+    props: {
+      adData: [
+        { category: 'Marketing', value: 120000 },
+        { category: 'Engineering', value: 280000 },
+        { category: 'Sales', value: 210000 },
+        { category: 'Operations', value: 150000 },
+        { category: 'Customer Support', value: 90000 },
+      ],
+    },
+  },
+  {
+    name: 'Prefix',
+    description: 'Donut chart with prefix',
+    props: {
+      adData: [
+        { category: 'Marketing', value: 120000 },
+        { category: 'Engineering', value: 280000 },
+        { category: 'Sales', value: 210000 },
+        { category: 'Operations', value: 150000 },
+        { category: 'Customer Support', value: 90000 },
+      ],
+
+      adSpec: {
+        prefix: '€',
+      },
+    },
+  },
+  {
+    name: 'Prefix and Suffix',
+    description: 'Donut chart with prefix and suffix',
+    props: {
+      adData: [
+        { category: 'Marketing', value: 120000 },
+        { category: 'Engineering', value: 280000 },
+        { category: 'Sales', value: 210000 },
+        { category: 'Operations', value: 150000 },
+        { category: 'Customer Support', value: 90000 },
+      ],
+
+      adSpec: {
+        prefix: '€',
+        suffix: '€',
+      },
+    },
+  },
+  {
+    name: 'Prefix, suffix and color set',
+    description: 'Donut chart with prefix and suffix and color set',
+    props: {
+      adData: [
+        { category: 'Marketing', value: 120000 },
+        { category: 'Engineering', value: 280000 },
+        { category: 'Sales', value: 210000 },
+        { category: 'Operations', value: 150000 },
+        { category: 'Customer Support', value: 90000 },
+      ],
+
+      adSpec: {
+        prefix: '€',
+        suffix: '€',
+        colorSet: [
+          '#FF0000', // Red
+          '#FF7F00', // Orange
+          '#FFD700', // Yellow
+          '#00C853', // Green
+          '#00B0FF', // Blue
+          '#3F51B5', // Indigo
+          '#8E24AA', // Violet
+        ],
+      },
+    },
+  },
+];

package/src/examples/index.ts

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