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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xplortech/apollo-data",
-  "version": "0.0.3-draft.f8f65f7",
+  "version": "0.0.4-draft.64ed229",
   "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/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';