@xplortech/apollo-data 0.0.5 → 0.0.7

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

@@ -1,103 +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;
+  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: '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: '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: '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'],
-            },
-        },
+  },
+  {
+    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

@@ -1,4 +1,4 @@
-import { ScatterDataItem, ScatterSpec } from '../components';
+import type { ScatterDataItem, ScatterSpec } from '../components/apollo-data-scatter/apollo-data-scatter';
 
 // Use the component's prop types directly
 export interface ScatterExamples {

package/src/examples/apollo-data-world-map.examples.ts

@@ -0,0 +1,57 @@
+import { WorldMapDataItem, WorldMapSpec } from '../components/apollo-data-world-map/apollo-data-world-map';
+
+export interface WorldMapExample {
+  name: string;
+  description: string;
+  props: {
+    adData: WorldMapDataItem[];
+    adSpec?: WorldMapSpec;
+  };
+  notes?: string;
+}
+
+export const worldMapExamples: WorldMapExample[] = [
+  {
+    name: 'Global Sales Hubs',
+    description: 'World map with major city hubs and value markers.',
+    props: {
+      adData: [
+        { lon: -74.006, lat: 40.7128, value: 82, label: 'New York' },
+        { lon: -46.6333, lat: -23.5505, value: 64, label: 'São Paulo' },
+        { lon: -0.1276, lat: 51.5074, value: 58, label: 'London' },
+        { lon: 77.209, lat: 28.6139, value: 73, label: 'Delhi' },
+        { lon: 139.6917, lat: 35.6895, value: 69, label: 'Tokyo' },
+        { lon: 151.2093, lat: -33.8688, value: 47, label: 'Sydney' },
+      ],
+      adSpec: { pinColor: '#2563eb' },
+    },
+  },
+  {
+    name: 'EMEA Focus',
+    description: 'World map centered on EMEA business locations and values.',
+    props: {
+      adData: [
+        { lon: 13.405, lat: 52.52, value: 56, label: 'Berlin' },
+        { lon: 2.3522, lat: 48.8566, value: 59, label: 'Paris' },
+        { lon: 55.2708, lat: 25.2048, value: 45, label: 'Dubai' },
+        { lon: 18.4241, lat: -33.9249, value: 41, label: 'Cape Town' },
+        { lon: 36.8219, lat: -1.2921, value: 26, label: 'Nairobi' },
+      ],
+      adSpec: {},
+    },
+  },
+  {
+    name: 'APAC Expansion',
+    description: 'World map showing APAC expansion points and values.',
+    props: {
+      adData: [
+        { lon: 103.8198, lat: 1.3521, value: 62, label: 'Singapore' },
+        { lon: 126.978, lat: 37.5665, value: 53, label: 'Seoul' },
+        { lon: 106.8456, lat: -6.2088, value: 37, label: 'Jakarta' },
+        { lon: 100.5018, lat: 13.7563, value: 31, label: 'Bangkok' },
+        { lon: 174.7633, lat: -36.8485, value: 23, label: 'Auckland' },
+      ],
+      adSpec: {},
+    },
+  },
+];

package/src/examples/index.ts

@@ -1,3 +1,5 @@
 export * from './apollo-data-donut.examples';
 export * from './apollo-data-bar.examples';
-export * from './apollo-data-line.examples';
+export * from './apollo-data-line.examples';
+export * from './apollo-data-heat-map.examples';
+export * from './apollo-data-world-map.examples';

package/dist/apollo-data/p-2nuV5Vny.js

@@ -1 +0,0 @@
-const f=["#4d1ab2","#f99170","#e550c8","#ffd563","#8857fa","#52ebba","#bf1d78","#31cff8"];export{f as C}

package/dist/apollo-data/p-4ac3c97c.entry.js

@@ -1 +0,0 @@
-import{r as e,g as t,h as a,H as o}from"./p-Bb2nY-Tf.js";import{A as l}from"./p-BWkrM8dc.js";import{C as n}from"./p-2nuV5Vny.js";const r="apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif",i=class extends l{constructor(t){super(),e(this,t)}get el(){return t(this)}adData=[];adSpec=null;static tooltipStylesInjected=!1;componentDidLoad(){this.injectTooltipStyles()}async componentDidRender(){await this.renderChart()}injectTooltipStyles(){if(i.tooltipStylesInjected)return;const e="apollo-data-bar-tooltip-styles";if(document.getElementById(e))return void(i.tooltipStylesInjected=!0);const t=document.createElement("style");t.id=e,t.textContent="\n      #vg-tooltip-element {\n        background-color: #ffffff;\n        border: 1px solid #e1e2e8;\n        border-radius: 0.25rem;\n        box-shadow: 0 4px 6px -1px rgba(48, 45, 59, 0.1), 0 2px 4px -1px rgba(48, 45, 59, 0.05);\n        font-family: apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif;\n        font-weight: 500;\n        padding: 0.25rem 0.75rem;\n        pointer-events: none;\n        text-align: center;\n        transform: translateY(20%);\n        white-space: pre;\n        z-index: 999999999;\n      }\n\n      #vg-tooltip-element table tr td.key {\n        color: #6a6d7d;\n        text-align: center;\n      }\n\n      #vg-tooltip-element table tr td.value {\n        text-align: center;\n      }\n\n      #vg-tooltip-element.dark-theme {\n        background-color: #292632;\n        border: 1px solid #6a6d7d;\n        box-shadow: 0 4px 6px -1px rgba(48, 45, 59, 0.1), 0 2px 4px -1px rgba(48, 45, 59, 0.5);\n        color: #ffffff;\n      }\n\n      #vg-tooltip-element::after {\n        border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent;\n        border-style: solid;\n        border-width: 9px;\n        bottom: -17px;\n        content: '';\n        left: 50%;\n        position: absolute;\n        transform: translateX(-50%);\n      }\n    ",document.head.appendChild(t),i.tooltipStylesInjected=!0}async getViewData(e,t){if(!t)throw new Error("adSpec is required for apollo-data-bar-chart");const{tooltipPrefix:a="",currencySymbol:o=""}=t;if(!e||0===e.length)throw new Error("Data is required for apollo-data-bar-chart");const l=Array.from(new Set(e.map((e=>e.category)))),i=a?".2f":".0f",d=a?o:"";return{$schema:"https://vega.github.io/schema/vega/v5.json",config:{text:{fill:"#6a6d7d",font:r,labelFontSize:12,labelFontWeight:400},axis:{labelColor:"#6a6d7d",titleColor:"#6a6d7d",labelFont:r,titleFont:r,titleFontWeight:400},legend:{labelColor:"#6a6d7d",titleColor:"#6a6d7d",labelFont:r,titleFont:r,labelFontSize:12,labelLimit:95},title:{color:"#6a6d7d",font:r,labelFontSize:12,labelFontWeight:400}},height:250,autosize:{type:"fit-x",contains:"padding",resize:!0},signals:[{name:"containerW",update:"max(containerSize()[0], 400)"},{name:"legendColumns",update:"ceil(containerW / 140)"},{name:"hoveredPeriod",value:null,on:[{events:"rect:mouseover",update:"datum.period"},{events:"rect:mouseout",update:"null"}]}],width:{signal:"containerW"},data:[{name:"raw",values:e},{name:"periodTotals",source:"raw",transform:[{type:"aggregate",groupby:["periodId"],fields:["value"],ops:["sum"],as:["total"]}]},{name:"table",source:"raw",transform:[{type:"lookup",from:"periodTotals",key:"periodId",fields:["periodId"],values:["total"],as:["total"]},{type:"stack",groupby:["periodId"],sort:{field:"category"},field:"value"},{type:"formula",as:"periodId",expr:"datum.periodId"},{type:"formula",as:"labelOnly",expr:"datum.label"}]},{name:"periodLabels",source:"raw",transform:[{type:"aggregate",groupby:["periodId","label"]}]}],scales:[{name:"x",type:"band",domain:{data:"table",field:"periodId"},range:"width",paddingInner:.35,paddingOuter:.02},{name:"xLabels",type:"ordinal",domain:{data:"periodLabels",field:"periodId"},range:{data:"periodLabels",field:"label"}},{name:"y",type:"linear",domain:{data:"table",field:"y1"},nice:!0,zero:!0,range:"height"},{name:"color",type:"ordinal",domain:l,range:t?.colorSet??n}],axes:[{orient:"bottom",scale:"x",title:t?.xAxisTitle,labelPadding:12,titlePadding:12,labelAngle:-90,labelAlign:"right",labelBaseline:"middle",tickSize:3,labelFontSize:12,titleFontSize:14,ticks:!1,domain:!1,encode:{labels:{update:{text:{signal:"scale('xLabels', datum.value)"}}}}},{orient:"left",scale:"y",title:t?.yAxisTitle||"",format:",.0f",grid:!0,tickCount:6,labelFontSize:12,titleFontSize:14,ticks:!1,domain:!1,tickBand:"extent",labelPadding:10}],legends:[{fill:"color",orient:"bottom",direction:"horizontal",columns:{signal:"legendColumns"},title:null,symbolType:"square",rowPadding:8,symbolOffset:-35,symbolSize:100,labelOffset:8,labelLimit:95}],marks:[{type:"rect",from:{data:"table"},encode:{enter:{x:{scale:"x",field:"periodId"},width:{scale:"x",band:1},y:{scale:"y",field:"y1"},y2:{scale:"y",field:"y0"},fill:{scale:"color",field:"category"},tooltip:{signal:`datum.category + ': ${d}' + format(datum.value, ',${i}') + '\\nTotal: ${d}' + format(datum.total, ',${i}')`}},update:{opacity:[{test:"hoveredPeriod && datum.period !== hoveredPeriod",value:.2},{value:1}]}}}]}}render(){return a(o,{key:"86ed2e74e5abd57e684a93bc9cf6a014b3ed081c"},a("div",{key:"96e5f7dd2dfa6a104ca709d1399308a86041c2f3",id:"container",style:{width:"100%",height:"100%"}}))}};export{i as apollo_data_bar_chart}