@xplortech/apollo-data 0.0.4 → 0.0.5

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/apollo-data-scatter.examples.d.ts

@@ -0,0 +1,11 @@
+import { ScatterDataItem, ScatterSpec } from '../components';
+export interface ScatterExamples {
+    name: string;
+    description: string;
+    props: {
+        adData: ScatterDataItem[];
+        adSpec?: ScatterSpec;
+    };
+    notes?: string;
+}
+export declare const scatterExamples: ScatterExamples[];

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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xplortech/apollo-data",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Apollo Data",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

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

@@ -0,0 +1,103 @@
+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 const lineExamples: LineExample[] = [
+    {
+        name: 'Revenue and Expenses by Day',
+        description: 'Line chart showing daily revenue and expenses over a week',
+        props: {
+            adData: [
+                { category: 'Revenue', xValue: 1, yValue: 5000, xLabel: 'Mon' },
+                { category: 'Expenses', xValue: 1, yValue: 2000, xLabel: 'Mon' },
+                { category: 'Revenue', xValue: 2, yValue: 6000, xLabel: 'Tue' },
+                { category: 'Expenses', xValue: 2, yValue: 2500, xLabel: 'Tue' },
+                { category: 'Revenue', xValue: 3, yValue: 5500, xLabel: 'Wed' },
+                { category: 'Expenses', xValue: 3, yValue: 2200, xLabel: 'Wed' },
+                { category: 'Revenue', xValue: 4, yValue: 7000, xLabel: 'Thu' },
+                { category: 'Expenses', xValue: 4, yValue: 3000, xLabel: 'Thu' },
+                { category: 'Revenue', xValue: 5, yValue: 6500, xLabel: 'Fri' },
+                { category: 'Expenses', xValue: 5, yValue: 2800, xLabel: 'Fri' },
+            ],
+            adSpec: {
+                tooltipPrefix: '$',
+                currencySymbol: '$',
+                yAxisTitle: 'Amount',
+                colorSet: ['#FF8DF4', '#74FBD0'],
+            },
+        },
+    },
+    {
+        name: 'Monthly Sales by Product',
+        description: 'Multi-line chart showing sales across products by month',
+        props: {
+            adData: [
+                { category: 'Product A', xValue: 1, yValue: 12000, xLabel: 'Jan' },
+                { category: 'Product B', xValue: 1, yValue: 8000, xLabel: 'Jan' },
+                { category: 'Product C', xValue: 1, yValue: 6000, xLabel: 'Jan' },
+                { category: 'Product A', xValue: 2, yValue: 15000, xLabel: 'Feb' },
+                { category: 'Product B', xValue: 2, yValue: 9000, xLabel: 'Feb' },
+                { category: 'Product C', xValue: 2, yValue: 7000, xLabel: 'Feb' },
+                { category: 'Product A', xValue: 3, yValue: 13000, xLabel: 'Mar' },
+                { category: 'Product B', xValue: 3, yValue: 10000, xLabel: 'Mar' },
+                { category: 'Product C', xValue: 3, yValue: 5500, xLabel: 'Mar' },
+                { category: 'Product A', xValue: 4, yValue: 14000, xLabel: 'Apr' },
+                { category: 'Product B', xValue: 4, yValue: 9500, xLabel: 'Apr' },
+                { category: 'Product C', xValue: 4, yValue: 6500, xLabel: 'Apr' },
+            ],
+            adSpec: {
+                tooltipPrefix: '$',
+                currencySymbol: '$',
+                yAxisTitle: 'Monthly Sales',
+                colorSet: ['#FF8DF4', '#74FBD0', '#ECFD91'],
+            },
+        },
+    },
+    {
+        name: 'Single Series',
+        description: 'Line chart with one category (visitors over time)',
+        props: {
+            adData: [
+                { category: 'Visitors', xValue: 1, yValue: 2450, xLabel: 'Mon' },
+                { category: 'Visitors', xValue: 2, yValue: 2680, xLabel: 'Tue' },
+                { category: 'Visitors', xValue: 3, yValue: 2320, xLabel: 'Wed' },
+                { category: 'Visitors', xValue: 4, yValue: 2890, xLabel: 'Thu' },
+                { category: 'Visitors', xValue: 5, yValue: 3150, xLabel: 'Fri' },
+                { category: 'Visitors', xValue: 6, yValue: 3420, xLabel: 'Sat' },
+                { category: 'Visitors', xValue: 7, yValue: 3280, xLabel: 'Sun' },
+            ],
+            adSpec: {
+                yAxisTitle: 'Daily Visitors',
+                colorSet: ['#6366f1'],
+            },
+        },
+    },
+    {
+        name: 'Custom Axis Titles',
+        description: 'Line chart with custom x-axis and y-axis titles',
+        props: {
+            adData: [
+                { category: 'Inbound', xValue: 1, yValue: 120, xLabel: 'Mon' },
+                { category: 'Outbound', xValue: 1, yValue: 80, xLabel: 'Mon' },
+                { category: 'Inbound', xValue: 2, yValue: 95, xLabel: 'Tue' },
+                { category: 'Outbound', xValue: 2, yValue: 110, xLabel: 'Tue' },
+                { category: 'Inbound', xValue: 3, yValue: 130, xLabel: 'Wed' },
+                { category: 'Outbound', xValue: 3, yValue: 70, xLabel: 'Wed' },
+            ],
+            adSpec: {
+                yAxisTitle: 'Calls',
+                xAxisTitle: 'Support queue (by day)',
+                colorSet: ['#4d1ab2', '#f99170'],
+            },
+        },
+    },
+];

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

@@ -0,0 +1,109 @@
+import { ScatterDataItem, ScatterSpec } from '../components';
+
+// Use the component's prop types directly
+export interface ScatterExamples {
+  name: string;
+  description: string;
+  props: {
+    adData: ScatterDataItem[];
+    adSpec?: ScatterSpec;
+    // Future: add event handlers when component supports them
+    // onSliceClick?: (item: ScatterDataItem) => void;
+  };
+  notes?: string; // Optional additional documentation
+}
+
+export const scatterExamples: ScatterExamples[] = [
+  {
+    name: 'Basic Scatter Chart',
+    description: 'A simple scatter chart using default styling and automatic tooltips.',
+    props: {
+      adData: [
+        { category: 'A', xValue: 120, yValue: 4.5 },
+        { category: 'B', xValue: 340, yValue: 6.8 },
+        { category: 'C', xValue: 560, yValue: 7.2 },
+        { category: 'A', xValue: 230, yValue: 5.1 },
+        { category: 'B', xValue: 890, yValue: 8.4 },
+      ],
+      adSpec: {
+        xAxisTitle: 'Revenue',
+        yAxisTitle: 'Rating',
+        tooltip: 'auto',
+      },
+    },
+    notes: 'Uses defaultPointStyle internally. No category-based styling applied.',
+  },
+  {
+    name: 'Category Styled Scatter',
+    description: 'Scatter chart with custom styles per category using categoryPointStyleMap.',
+    props: {
+      adData: [
+        { category: 'Mobile', xValue: 150, yValue: 3.8 },
+        { category: 'Web', xValue: 980, yValue: 7.9 },
+        { category: 'Backend', xValue: 670, yValue: 6.7 },
+        { category: 'Mobile', xValue: 300, yValue: 5.6 },
+      ],
+      adSpec: {
+        xAxisTitle: 'Users',
+        yAxisTitle: 'Performance Score',
+        tooltip: 'auto',
+        categoryPointStyleMap: {
+          Mobile: { color: '#4ECDC4', size: 100, shape: 'circle' },
+          Web: { color: '#FF6B6B', size: 120, shape: 'square' },
+          Backend: { color: '#6A6D7D', size: 140, shape: 'triangle' },
+        },
+      },
+    },
+    notes: 'Each category overrides the defaultPointStyle using categoryPointStyleMap.',
+  },
+  {
+    name: 'Per-Point Style Override',
+    description: 'Individual data points override category and default styles.',
+    props: {
+      adData: [
+        {
+          category: 'Sales',
+          xValue: 400,
+          yValue: 6.2,
+          pointStyle: { color: '#FF0000', size: 180, shape: 'triangle' },
+        },
+        {
+          category: 'Sales',
+          xValue: 520,
+          yValue: 7.1,
+        },
+        {
+          category: 'Marketing',
+          xValue: 310,
+          yValue: 5.4,
+          pointStyle: { color: '#000000', size: 160, shape: 'square' },
+        },
+      ],
+      adSpec: {
+        xAxisTitle: 'Spend',
+        yAxisTitle: 'Conversion Rate',
+        defaultPointStyle: { color: '#6A6D7D', size: 100, shape: 'circle' },
+        tooltip: 'auto',
+      },
+    },
+    notes: 'pointStyle at the data level has highest priority over category and default styles.',
+  },
+  {
+    name: 'Tooltip Disabled',
+    description: 'Scatter chart with tooltips disabled.',
+    props: {
+      adData: [
+        { category: 'Q1', xValue: 200, yValue: 4.2 },
+        { category: 'Q2', xValue: 450, yValue: 6.5 },
+        { category: 'Q3', xValue: 700, yValue: 8.1 },
+        { category: 'Q4', xValue: 300, yValue: 5.9 },
+      ],
+      adSpec: {
+        xAxisTitle: 'Quarter',
+        yAxisTitle: 'Growth',
+        tooltip: 'none',
+      },
+    },
+    notes: 'Tooltip interaction is completely disabled in this example.',
+  },
+];

package/src/examples/index.ts

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