@xplortech/apollo-data 0.0.4 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xplortech/apollo-data",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Apollo Data",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -64,21 +64,21 @@
     "start": "stencil build --dev --watch --serve",
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
-    "generate": "stencil generate"
+    "generate": "stencil generate",
+    "lint:js": "prettier --check \"src/**/*.{js,ts,json,md}\"",
+    "lint:css": "stylelint 'src/**/*.css'",
+    "lint:ts": "eslint \"src/**/*.{ts,tsx}\" --ignore-pattern 'src/components/**/test/**' --no-warn-ignored",
+    "lint": "npm-run-all lint:ts lint:css lint:js",
+    "format": "npm run lint:ts -- --fix && npm run lint:css -- --fix && prettier --write \"src/**/*.{js,ts,json,md}\""
   },
   "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",
+    "lit-html": "^3.3.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.5.3",
     "typescript": "^5.5.3",

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

@@ -1,172 +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;
+  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: '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: '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: '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: '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: '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: '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'],
-            },
-        },
+  },
+  {
+    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-heat-map.examples.ts

@@ -0,0 +1,147 @@
+import { HeatMapDataItem, HeatMapSpec } from '../components/apollo-data-heat-map/apollo-data-heat-map';
+
+export interface HeatMapExamples {
+  name: string;
+  description: string;
+  props: {
+    adData: HeatMapDataItem[];
+    adSpec?: HeatMapSpec;
+  };
+  notes?: string;
+}
+
+/** Average high temperature (°F) by day of month and month – weather heat map. */
+const weatherDayVsMonth: HeatMapDataItem[] = (() => {
+  const days = ['1', '5', '10', '15', '20', '25', '30'];
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  // Base avg high °F by month (mid-latitude style), with slight variation by day-in-month
+  const baseByMonth = [42, 45, 54, 64, 74, 82, 87, 85, 78, 66, 54, 44];
+  const items: HeatMapDataItem[] = [];
+  days.forEach((day, i) => {
+    months.forEach((month, j) => {
+      const base = baseByMonth[j];
+      const dayOffset = (i - 3) * 2; // slightly warmer in middle of month
+      items.push({ xLabel: month, yLabel: `Day ${day}`, value: Math.round(base + dayOffset) });
+    });
+  });
+  return items;
+})();
+
+/** Quarterly revenue (K) by region – typical sales dashboard. */
+const salesByRegionQuarter: HeatMapDataItem[] = [
+  { xLabel: 'Q1', yLabel: 'North', value: 142 },
+  { xLabel: 'Q2', yLabel: 'North', value: 168 },
+  { xLabel: 'Q3', yLabel: 'North', value: 195 },
+  { xLabel: 'Q4', yLabel: 'North', value: 218 },
+  { xLabel: 'Q1', yLabel: 'South', value: 98 },
+  { xLabel: 'Q2', yLabel: 'South', value: 112 },
+  { xLabel: 'Q3', yLabel: 'South', value: 134 },
+  { xLabel: 'Q4', yLabel: 'South', value: 156 },
+  { xLabel: 'Q1', yLabel: 'East', value: 187 },
+  { xLabel: 'Q2', yLabel: 'East', value: 203 },
+  { xLabel: 'Q3', yLabel: 'East', value: 221 },
+  { xLabel: 'Q4', yLabel: 'East', value: 245 },
+  { xLabel: 'Q1', yLabel: 'West', value: 76 },
+  { xLabel: 'Q2', yLabel: 'West', value: 89 },
+  { xLabel: 'Q3', yLabel: 'West', value: 102 },
+  { xLabel: 'Q4', yLabel: 'West', value: 118 },
+];
+
+/** Support tickets by product and month. */
+const supportTicketsByProductMonth: HeatMapDataItem[] = [
+  { xLabel: 'Jan', yLabel: 'Billing', value: 124 },
+  { xLabel: 'Feb', yLabel: 'Billing', value: 98 },
+  { xLabel: 'Mar', yLabel: 'Billing', value: 156 },
+  { xLabel: 'Apr', yLabel: 'Billing', value: 87 },
+  { xLabel: 'May', yLabel: 'Billing', value: 112 },
+  { xLabel: 'Jun', yLabel: 'Billing', value: 134 },
+  { xLabel: 'Jan', yLabel: 'Onboarding', value: 89 },
+  { xLabel: 'Feb', yLabel: 'Onboarding', value: 102 },
+  { xLabel: 'Mar', yLabel: 'Onboarding', value: 145 },
+  { xLabel: 'Apr', yLabel: 'Onboarding', value: 78 },
+  { xLabel: 'May', yLabel: 'Onboarding', value: 91 },
+  { xLabel: 'Jun', yLabel: 'Onboarding', value: 67 },
+  { xLabel: 'Jan', yLabel: 'API', value: 45 },
+  { xLabel: 'Feb', yLabel: 'API', value: 52 },
+  { xLabel: 'Mar', yLabel: 'API', value: 61 },
+  { xLabel: 'Apr', yLabel: 'API', value: 38 },
+  { xLabel: 'May', yLabel: 'API', value: 49 },
+  { xLabel: 'Jun', yLabel: 'API', value: 55 },
+  { xLabel: 'Jan', yLabel: 'Mobile App', value: 203 },
+  { xLabel: 'Feb', yLabel: 'Mobile App', value: 187 },
+  { xLabel: 'Mar', yLabel: 'Mobile App', value: 221 },
+  { xLabel: 'Apr', yLabel: 'Mobile App', value: 198 },
+  { xLabel: 'May', yLabel: 'Mobile App', value: 234 },
+  { xLabel: 'Jun', yLabel: 'Mobile App', value: 256 },
+];
+
+/** Average response time (ms) by service and environment. */
+const responseTimeByServiceEnv: HeatMapDataItem[] = [
+  { xLabel: 'Staging', yLabel: 'Auth', value: 42 },
+  { xLabel: 'Production', yLabel: 'Auth', value: 38 },
+  { xLabel: 'Staging', yLabel: 'Payments', value: 128 },
+  { xLabel: 'Production', yLabel: 'Payments', value: 95 },
+  { xLabel: 'Staging', yLabel: 'Search', value: 215 },
+  { xLabel: 'Production', yLabel: 'Search', value: 178 },
+  { xLabel: 'Staging', yLabel: 'Notifications', value: 56 },
+  { xLabel: 'Production', yLabel: 'Notifications', value: 48 },
+  { xLabel: 'Staging', yLabel: 'Reporting', value: 890 },
+  { xLabel: 'Production', yLabel: 'Reporting', value: 720 },
+];
+
+export const heatMapExamples: HeatMapExamples[] = [
+  {
+    name: 'Weather: day vs month',
+    description: 'Average high temperature (°F) by day of month and month.',
+    props: {
+      adData: weatherDayVsMonth,
+      adSpec: {
+        xAxisTitle: 'Month',
+        yAxisTitle: 'Day of month',
+        colorRange: ['#2166ac', '#b2182b'],
+        tooltip: 'auto',
+      },
+    },
+    notes: 'Cool (blue) to warm (red) temperature scale; diverging style.',
+  },
+  {
+    name: 'Sales by region and quarter',
+    description: 'Quarterly revenue (K) by region – typical sales or revenue dashboard.',
+    props: {
+      adData: salesByRegionQuarter,
+      adSpec: {
+        xAxisTitle: 'Quarter',
+        yAxisTitle: 'Region',
+        tooltip: 'auto',
+      },
+    },
+    notes: 'Useful for regional performance and seasonality.',
+  },
+  {
+    name: 'Support tickets by product and month',
+    description: 'Monthly support ticket volume by product area.',
+    props: {
+      adData: supportTicketsByProductMonth,
+      adSpec: {
+        xAxisTitle: 'Month',
+        yAxisTitle: 'Product',
+        tooltip: 'auto',
+      },
+    },
+    notes: 'Helps spot spikes by product and time.',
+  },
+  {
+    name: 'API response time by service and environment',
+    description: 'Average response time (ms) by service and environment (green = fast, red = slow).',
+    props: {
+      adData: responseTimeByServiceEnv,
+      adSpec: {
+        xAxisTitle: 'Environment',
+        yAxisTitle: 'Service',
+        colorRange: ['#2ecc71', '#e74c3c'],
+        tooltip: 'auto',
+      },
+    },
+    notes: 'Green–red scale for performance; lower is better.',
+  },
+];

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'],
+      },
+    },
+  },
+];