@xplortech/apollo-data 0.0.5 → 0.0.7

package/dist/cjs/{apollo-data-base-CxVQ-WVP.js → apollo-data-base-COGMOEqL.js}

@@ -22831,7 +22831,7 @@ var boundsStream$1 = {
     boundsStream$1.lineEnd = boundsLineEnd;
     if (areaRingSum$1 < 0) lambda0 = -(lambda1 = 180), phi0 = -(phi1 = 90);
     else if (deltaSum > epsilon$3) phi1 = 90;
-    else if (deltaSum < -1e-6) phi0 = -90;
+    else if (deltaSum < -epsilon$3) phi0 = -90;
     range$4[0] = lambda0, range$4[1] = lambda1;
   },
   sphere: function() {
@@ -23432,7 +23432,7 @@ function polygonContains(polygon, point) {
   // from the point to the South pole.  If it is zero, then the point is the
   // same side as the South pole.
 
-  return (angle < -1e-6 || angle < epsilon$3 && sum < -1e-12) ^ (winding & 1);
+  return (angle < -epsilon$3 || angle < epsilon$3 && sum < -epsilon2) ^ (winding & 1);
 }
 
 function clip$1(pointVisible, clipLine, interpolate, start) {
@@ -23883,7 +23883,7 @@ function clipLine(a, b, x0, y0, x1, y1) {
   return true;
 }
 
-var clipMax = 1e9, clipMin = -1e9;
+var clipMax = 1e9, clipMin = -clipMax;
 
 // TODO Use d3-polygon’s polygonContains here for the ring check?
 // TODO Eliminate duplicate buffering in clipBuffer and polygon.push?
@@ -67613,17 +67613,12 @@ async function _embed(el, spec, opts = {}, loader) {
     return { view, spec, vgSpec, finalize, embedOptions: opts };
 }
 
-// @ts-ignore
-// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 class ApolloBase {
-    // @ts-ignore
-    getViewData(data, spec) {
-        throw new Error('getViewData is not implemented');
-    }
     async renderChart() {
         // Wait for shadow DOM to be ready
-        await new Promise(resolve => setTimeout(resolve, 0));
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        await new Promise(resolve => {
+            setTimeout(resolve, 0);
+        });
         const container = this.el?.shadowRoot?.querySelector('#container');
         if (!container) {
             return;
@@ -67635,6 +67630,7 @@ class ApolloBase {
             spec = typeof this.adSpec === 'string' ? JSON.parse(this.adSpec) : this.adSpec;
         }
         catch (err) {
+            // eslint-disable-next-line no-console
             console.error('Error parsing data/spec', err);
             return;
         }

package/dist/cjs/apollo-data-donut-chart.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Cl7HgRm0.js');
-var apolloDataBase = require('./apollo-data-base-CxVQ-WVP.js');
+var index = require('./index-Bd5risOy.js');
+var apolloDataBase = require('./apollo-data-base-COGMOEqL.js');
 
 const ApolloDataDonutChart = class extends apolloDataBase.ApolloBase {
     constructor(hostRef) {
@@ -401,7 +401,7 @@ const ApolloDataDonutChart = class extends apolloDataBase.ApolloBase {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'fb26a6b02b83b0ce64a8301149b66f5d09a4a7b4' }, index.h("div", { key: 'fc08cdc3c0c0fda7f7c13149532eb61f511aa035', id: "container", style: { width: '100%', height: '100%' } })));
+        return (index.h(index.Host, { key: '5d9ba4976956c4f0d29b9aa8638373895c0c3f7f' }, index.h("div", { key: '2db6d1418492898de84a167e35ecc8b16d695942', id: "container", style: { width: '100%', height: '100%' } })));
     }
 };
 

package/dist/cjs/apollo-data.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-Cl7HgRm0.js');
+var index = require('./index-Bd5risOy.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
- Stencil Client Patch Browser v4.41.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.43.2 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["apollo-data-line-chart_2.cjs",[[513,"apollo-data-line-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-scatter-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}]]],["apollo-data-bar-chart.cjs",[[513,"apollo-data-bar-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}]]],["apollo-data-donut-chart.cjs",[[513,"apollo-data-donut-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}]]]], options);
+  return index.bootstrapLazy([["apollo-data-bar-chart_5.cjs",[[513,"apollo-data-bar-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-heat-map",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-line-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-scatter-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-world-map-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}]]],["apollo-data-donut-chart.cjs",[[513,"apollo-data-donut-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{index-Cl7HgRm0.js → index-Bd5risOy.js}

@@ -4,9 +4,22 @@ const NAMESPACE = 'apollo-data';
 const BUILD = /* apollo-data */ { hydratedSelectorName: "hydrated", lazyLoad: true, prop: true, propChangeCallback: false, updatable: true};
 
 /*
- Stencil Client Platform v4.41.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.43.2 | MIT Licensed | https://stenciljs.com
  */
 
+
+// src/utils/get-prop-descriptor.ts
+function getPropertyDescriptor(obj, memberName, getOnly) {
+  const stopAt = typeof HTMLElement !== "undefined" ? HTMLElement.prototype : null;
+  while (obj && obj !== stopAt) {
+    const desc = Object.getOwnPropertyDescriptor(obj, memberName);
+    if (desc && (!getOnly || desc.get)) return desc;
+    obj = Object.getPrototypeOf(obj);
+  }
+  return void 0;
+}
+
+// src/utils/es2022-rewire-class-members.ts
 var reWireGetterSetter = (instance, hostRef) => {
   var _a;
   const cmpMeta = hostRef.$cmpMeta$;
@@ -14,7 +27,7 @@ var reWireGetterSetter = (instance, hostRef) => {
   members.map(([memberName, [memberFlags]]) => {
     if ((memberFlags & 31 /* Prop */ || memberFlags & 32 /* State */)) {
       const ogValue = instance[memberName];
-      const ogDescriptor = getPropertyDescriptor(Object.getPrototypeOf(instance), memberName) || Object.getOwnPropertyDescriptor(instance, memberName);
+      const ogDescriptor = getPropertyDescriptor(Object.getPrototypeOf(instance), memberName, true) || Object.getOwnPropertyDescriptor(instance, memberName);
       if (ogDescriptor) {
         Object.defineProperty(instance, memberName, {
           get() {
@@ -27,18 +40,14 @@ var reWireGetterSetter = (instance, hostRef) => {
           enumerable: true
         });
       }
-      instance[memberName] = hostRef.$instanceValues$.has(memberName) ? hostRef.$instanceValues$.get(memberName) : ogValue;
+      if (hostRef.$instanceValues$.has(memberName)) {
+        instance[memberName] = hostRef.$instanceValues$.get(memberName);
+      } else if (ogValue !== void 0) {
+        instance[memberName] = ogValue;
+      }
     }
   });
 };
-function getPropertyDescriptor(obj, memberName) {
-  while (obj) {
-    const desc = Object.getOwnPropertyDescriptor(obj, memberName);
-    if (desc == null ? void 0 : desc.get) return desc;
-    obj = Object.getPrototypeOf(obj);
-  }
-  return void 0;
-}
 
 // src/client/client-host-ref.ts
 var getHostRef = (ref) => {
@@ -327,15 +336,45 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
         }
       }
     }
-  } else if (memberName === "key") ; else {
+  } else if (memberName === "key") ; else if (memberName[0] === "a" && memberName.startsWith("attr:")) {
+    const propName = memberName.slice(5);
+    let attrName;
+    {
+      const hostRef = getHostRef(elm);
+      if (hostRef && hostRef.$cmpMeta$ && hostRef.$cmpMeta$.$members$) {
+        const memberMeta = hostRef.$cmpMeta$.$members$[propName];
+        if (memberMeta && memberMeta[1]) {
+          attrName = memberMeta[1];
+        }
+      }
+    }
+    if (!attrName) {
+      attrName = propName.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+    }
+    if (newValue == null || newValue === false) {
+      if (newValue !== false || elm.getAttribute(attrName) === "") {
+        elm.removeAttribute(attrName);
+      }
+    } else {
+      elm.setAttribute(attrName, newValue === true ? "" : newValue);
+    }
+    return;
+  } else if (memberName[0] === "p" && memberName.startsWith("prop:")) {
+    const propName = memberName.slice(5);
+    try {
+      elm[propName] = newValue;
+    } catch (e) {
+    }
+    return;
+  } else {
     const isComplex = isComplexType(newValue);
-    if ((isProp || isComplex && newValue !== null) && true) {
+    if ((isProp || isComplex && newValue !== null) && !isSvg) {
       try {
         if (!elm.tagName.includes("-")) {
           const n = newValue == null ? "" : newValue;
           if (memberName === "list") {
             isProp = false;
-          } else if (oldValue == null || elm[memberName] != n) {
+          } else if (oldValue == null || elm[memberName] !== n) {
             if (typeof elm.__lookupSetter__(memberName) === "function") {
               elm[memberName] = n;
             } else {
@@ -685,7 +724,7 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
     if (childrenPromises.length === 0) {
       postUpdate();
     } else {
-      Promise.all(childrenPromises).then(postUpdate);
+      Promise.all(childrenPromises).then(postUpdate).catch(postUpdate);
       hostRef.$flags$ |= 4 /* isWaitingForChildren */;
       childrenPromises.length = 0;
     }
@@ -787,13 +826,16 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
   const didValueChange = newVal !== oldVal && !areBothNaN;
   if ((!(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
     hostRef.$instanceValues$.set(propName, newVal);
-    if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+    if (flags & 2 /* hasRendered */) {
       if (instance.componentShouldUpdate) {
-        if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
+        const shouldUpdate = instance.componentShouldUpdate(newVal, oldVal, propName);
+        if (shouldUpdate === false && !(flags & 16 /* isQueuedForUpdate */)) {
           return;
         }
       }
-      scheduleUpdate(hostRef, false);
+      if (!(flags & 16 /* isQueuedForUpdate */)) {
+        scheduleUpdate(hostRef, false);
+      }
     }
   }
 };
@@ -806,7 +848,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
       if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
-        const { get: origGetter, set: origSetter } = Object.getOwnPropertyDescriptor(prototype, memberName) || {};
+        const { get: origGetter, set: origSetter } = getPropertyDescriptor(prototype, memberName) || {};
         if (origGetter) cmpMeta.$members$[memberName][0] |= 2048 /* Getter */;
         if (origSetter) cmpMeta.$members$[memberName][0] |= 4096 /* Setter */;
         if (flags & 1 /* isElementConstructor */ || !origGetter) {
@@ -936,53 +978,64 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
 // src/runtime/initialize-component.ts
 var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
   let Cstr;
-  if ((hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
-    hostRef.$flags$ |= 32 /* hasInitializedComponent */;
-    const bundleId = cmpMeta.$lazyBundleId$;
-    if (bundleId) {
-      const CstrImport = loadModule(cmpMeta, hostRef);
-      if (CstrImport && "then" in CstrImport) {
-        const endLoad = uniqueTime();
-        Cstr = await CstrImport;
-        endLoad();
+  try {
+    if ((hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
+      hostRef.$flags$ |= 32 /* hasInitializedComponent */;
+      const bundleId = cmpMeta.$lazyBundleId$;
+      if (bundleId) {
+        const CstrImport = loadModule(cmpMeta, hostRef);
+        if (CstrImport && "then" in CstrImport) {
+          const endLoad = uniqueTime();
+          Cstr = await CstrImport;
+          endLoad();
+        } else {
+          Cstr = CstrImport;
+        }
+        if (!Cstr) {
+          throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
+        }
+        if (!Cstr.isProxied) {
+          proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
+          Cstr.isProxied = true;
+        }
+        const endNewInstance = createTime("createInstance", cmpMeta.$tagName$);
+        {
+          hostRef.$flags$ |= 8 /* isConstructingInstance */;
+        }
+        try {
+          new Cstr(hostRef);
+        } catch (e) {
+          consoleError(e, elm);
+        }
+        {
+          hostRef.$flags$ &= -9 /* isConstructingInstance */;
+        }
+        endNewInstance();
+        {
+          fireConnectedCallback(hostRef.$lazyInstance$, elm);
+        }
       } else {
-        Cstr = CstrImport;
-      }
-      if (!Cstr) {
-        throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
-      }
-      if (!Cstr.isProxied) {
-        proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
-        Cstr.isProxied = true;
-      }
-      const endNewInstance = createTime("createInstance", cmpMeta.$tagName$);
-      {
-        hostRef.$flags$ |= 8 /* isConstructingInstance */;
-      }
-      try {
-        new Cstr(hostRef);
-      } catch (e) {
-        consoleError(e, elm);
-      }
-      {
-        hostRef.$flags$ &= -9 /* isConstructingInstance */;
-      }
-      endNewInstance();
-      {
-        fireConnectedCallback(hostRef.$lazyInstance$, elm);
+        Cstr = elm.constructor;
+        const cmpTag = elm.localName;
+        customElements.whenDefined(cmpTag).then(() => hostRef.$flags$ |= 128 /* isWatchReady */);
       }
+    }
+    const ancestorComponent = hostRef.$ancestorComponent$;
+    const schedule = () => scheduleUpdate(hostRef, true);
+    if (ancestorComponent && ancestorComponent["s-rc"]) {
+      ancestorComponent["s-rc"].push(schedule);
     } else {
-      Cstr = elm.constructor;
-      const cmpTag = elm.localName;
-      customElements.whenDefined(cmpTag).then(() => hostRef.$flags$ |= 128 /* isWatchReady */);
+      schedule();
+    }
+  } catch (e) {
+    consoleError(e, elm);
+    if (hostRef.$onRenderResolve$) {
+      hostRef.$onRenderResolve$();
+      hostRef.$onRenderResolve$ = void 0;
+    }
+    if (hostRef.$onReadyResolve$) {
+      hostRef.$onReadyResolve$(elm);
     }
-  }
-  const ancestorComponent = hostRef.$ancestorComponent$;
-  const schedule = () => scheduleUpdate(hostRef, true);
-  if (ancestorComponent && ancestorComponent["s-rc"]) {
-    ancestorComponent["s-rc"].push(schedule);
-  } else {
-    schedule();
   }
 };
 var fireConnectedCallback = (instance, elm) => {
@@ -1013,7 +1066,7 @@ var connectedCallback = (elm) => {
       }
       if (cmpMeta.$members$) {
         Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
-          if (memberFlags & 31 /* Prop */ && memberName in elm && elm[memberName] !== Object.prototype[memberName]) {
+          if (memberFlags & 31 /* Prop */ && Object.prototype.hasOwnProperty.call(elm, memberName)) {
             const value = elm[memberName];
             delete elm[memberName];
             elm[memberName] = value;

package/dist/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-Cl7HgRm0.js');
+var index = require('./index-Bd5risOy.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["apollo-data-line-chart_2.cjs",[[513,"apollo-data-line-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-scatter-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}]]],["apollo-data-bar-chart.cjs",[[513,"apollo-data-bar-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}]]],["apollo-data-donut-chart.cjs",[[513,"apollo-data-donut-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}]]]], options);
+  return index.bootstrapLazy([["apollo-data-bar-chart_5.cjs",[[513,"apollo-data-bar-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-heat-map",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-line-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-scatter-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-world-map-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}]]],["apollo-data-donut-chart.cjs",[[513,"apollo-data-donut-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/apollo-data-base.js

@@ -1,15 +1,10 @@
-// @ts-ignore
 import embed from "vega-embed";
-// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 export class ApolloBase {
-    // @ts-ignore
-    getViewData(data, spec) {
-        throw new Error('getViewData is not implemented');
-    }
     async renderChart() {
         // Wait for shadow DOM to be ready
-        await new Promise(resolve => setTimeout(resolve, 0));
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        await new Promise(resolve => {
+            setTimeout(resolve, 0);
+        });
         const container = this.el?.shadowRoot?.querySelector('#container');
         if (!container) {
             return;
@@ -21,6 +16,7 @@ export class ApolloBase {
             spec = typeof this.adSpec === 'string' ? JSON.parse(this.adSpec) : this.adSpec;
         }
         catch (err) {
+            // eslint-disable-next-line no-console
             console.error('Error parsing data/spec', err);
             return;
         }

package/dist/collection/collection-manifest.json

@@ -2,12 +2,15 @@
   "entries": [
     "components/apollo-data-bar/apollo-data-bar.js",
     "components/apollo-data-donut/apollo-data-donut.js",
+    "components/apollo-data-heat-map/apollo-data-heat-map.js",
     "components/apollo-data-line/apollo-data-line.js",
-    "components/apollo-data-scatter/apollo-data-scatter.js"
+    "components/apollo-data-scatter/apollo-data-scatter.js",
+    "components/apollo-data-world-map/apollo-data-world-map.js"
   ],
+  "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.41.3",
+    "version": "4.43.2",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

package/dist/collection/components/apollo-data-bar/apollo-data-bar.js

@@ -17,12 +17,13 @@ export class ApolloDataBarChart extends ApolloBase {
         await this.renderChart();
     }
     injectTooltipStyles() {
-        if (ApolloDataBarChart.tooltipStylesInjected) {
+        const chartClass = this.constructor;
+        if (chartClass.tooltipStylesInjected) {
             return;
         }
         const styleId = 'apollo-data-bar-tooltip-styles';
         if (document.getElementById(styleId)) {
-            ApolloDataBarChart.tooltipStylesInjected = true;
+            chartClass.tooltipStylesInjected = true;
             return;
         }
         const style = document.createElement('style');
@@ -71,16 +72,16 @@ export class ApolloDataBarChart extends ApolloBase {
       }
     `;
         document.head.appendChild(style);
-        ApolloDataBarChart.tooltipStylesInjected = true;
+        chartClass.tooltipStylesInjected = true;
     }
-    // @ts-ignore
     async getViewData(data, spec) {
+        const componentTag = this.el?.tagName?.toLowerCase() ?? 'apollo-data-bar-chart';
         if (!spec) {
-            throw new Error('adSpec is required for apollo-data-bar-chart');
+            throw new Error(`adSpec is required for ${componentTag}`);
         }
         const { tooltipPrefix = '', currencySymbol = '' } = spec;
         if (!data || data.length === 0) {
-            throw new Error('Data is required for apollo-data-bar-chart');
+            throw new Error(`Data is required for ${componentTag}`);
         }
         const uniqueCategories = Array.from(new Set(data.map(item => item.category)));
         const formatNumber = tooltipPrefix ? '.2f' : '.0f';
@@ -131,7 +132,7 @@ export class ApolloDataBarChart extends ApolloBase {
                     name: 'hoveredPeriod',
                     value: null,
                     on: [
-                        { events: 'rect:mouseover', update: 'datum.period' },
+                        { events: 'rect:mouseover', update: 'datum.periodId' },
                         { events: 'rect:mouseout', update: 'null' },
                     ],
                 },
@@ -295,7 +296,7 @@ export class ApolloDataBarChart extends ApolloBase {
                             },
                         },
                         update: {
-                            opacity: [{ test: 'hoveredPeriod && datum.period !== hoveredPeriod', value: 0.2 }, { value: 1 }],
+                            opacity: [{ test: 'hoveredPeriod && datum.periodId !== hoveredPeriod', value: 0.2 }, { value: 1 }],
                         },
                     },
                 },
@@ -303,7 +304,7 @@ export class ApolloDataBarChart extends ApolloBase {
         };
     }
     render() {
-        return (h(Host, { key: '86ed2e74e5abd57e684a93bc9cf6a014b3ed081c' }, h("div", { key: '96e5f7dd2dfa6a104ca709d1399308a86041c2f3', id: "container", style: { width: '100%', height: '100%' } })));
+        return (h(Host, { key: 'fd34c44431e85e36cec86ff19c7142c2deb2e9ff' }, h("div", { key: 'f3e9c269e4817b0f06233860c67649f1e1d9ec16', id: "container", style: { width: '100%', height: '100%' } })));
     }
     static get is() { return "apollo-data-bar-chart"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/apollo-data-bar/apollo-data-bar.stories.js

@@ -0,0 +1,122 @@
+import { html } from "lit-html";
+import { barExamples } from "../../examples/apollo-data-bar.examples";
+import { generateReactCode, generateVueCode, generateWebComponentCode, generateInstallationDocs } from "../../utils/code-generator";
+function getCodeForFramework(props, framework) {
+    switch (framework) {
+        case 'vue':
+            return generateVueCode('apollo-data-bar-chart', props);
+        case 'webcomponent':
+            return generateWebComponentCode('apollo-data-bar-chart', props);
+        case 'react':
+        default:
+            return generateReactCode('apollo-data-bar-chart', props);
+    }
+}
+const meta = {
+    title: 'Apollo Data/Bar Chart',
+    tags: ['autodocs'],
+    argTypes: {
+        adData: {
+            control: 'object',
+            description: 'Array of data items. Each item must have label (string), category (string), value (number), and periodId (string, typically a date YYYY-MM-DD).',
+            table: {
+                type: {
+                    summary: 'BarDataItem[]',
+                    detail: 'interface BarDataItem {\n  label: string;\n  category: string;\n  value: number;\n  periodId: string; // date string e.g. YYYY-MM-DD\n}',
+                },
+                defaultValue: { summary: '[]' },
+            },
+        },
+        adSpec: {
+            control: 'object',
+            description: 'Specification object for customizing the chart appearance.',
+            table: {
+                type: {
+                    summary: 'BarSpec',
+                    detail: 'interface BarSpec {\n  colorSet?: string[];\n  tooltipPrefix?: string;\n  currencySymbol?: string;\n  yAxisTitle?: string;\n  xAxisTitle?: string;\n}',
+                },
+                defaultValue: { summary: '{}' },
+            },
+        },
+    },
+    decorators: [
+        (story, context) => {
+            const framework = context.globals?.framework || 'react';
+            setTimeout(() => {
+                const doc = globalThis.document;
+                if (doc) {
+                    const installSections = {
+                        react: doc.querySelector('.install-react'),
+                        vue: doc.querySelector('.install-vue'),
+                        webcomponent: doc.querySelector('.install-webcomponent'),
+                    };
+                    Object.values(installSections).forEach((section) => {
+                        if (section)
+                            section.setAttribute('style', 'display: none;');
+                    });
+                    const selectedSection = installSections[framework];
+                    if (selectedSection)
+                        selectedSection.setAttribute('style', 'display: block;');
+                }
+            }, 0);
+            return story();
+        },
+    ],
+    parameters: {
+        docs: {
+            description: {
+                component: `${generateInstallationDocs('react', 'apollo-data-bar-chart')}
+
+${generateInstallationDocs('vue', 'apollo-data-bar-chart')}
+
+${generateInstallationDocs('webcomponent', 'apollo-data-bar-chart')}
+
+---
+
+## Description
+
+A stacked bar chart component built with Vega that displays data by period with interactive hover effects. Each data item has a \`label\` (shown on the x-axis), \`category\`, \`value\`, and \`periodId\` (use a date string like \`YYYY-MM-DD\` for the period). Use \`adSpec.xAxisTitle\` and \`adSpec.yAxisTitle\` to customize axis labels. The example uses the monthly sales by product preset from \`barExamples\`.
+
+**Tip:** Use the Framework selector in the toolbar above to switch between React, Vue, and Web Component installation instructions and code examples.`,
+            },
+        },
+        viewMode: 'story',
+    },
+};
+export default meta;
+const chartWrapper = (args) => html `
+  <div style="width: 800px; height: 400px;">
+    <apollo-data-bar-chart .adData=${args.adData} .adSpec=${args.adSpec}></apollo-data-bar-chart>
+  </div>
+`;
+export const MonthlySalesByProduct = {
+    args: {
+        adData: barExamples[1].props.adData,
+        adSpec: barExamples[1].props.adSpec ?? {},
+    },
+    render: args => chartWrapper(args),
+    parameters: {
+        codeGenerator: (args, framework) => getCodeForFramework({ adData: args.adData ?? barExamples[1].props.adData, adSpec: args.adSpec ?? barExamples[1].props.adSpec ?? {} }, framework),
+        docs: {
+            description: { story: barExamples[1].description },
+            source: {
+                language: 'tsx',
+                type: 'dynamic',
+                transform: (_code, storyContext) => {
+                    try {
+                        const framework = storyContext?.globals?.framework || 'react';
+                        const props = {
+                            adData: storyContext?.args?.adData ?? barExamples[1].props.adData,
+                            adSpec: storyContext?.args?.adSpec ?? barExamples[1].props.adSpec ?? {},
+                        };
+                        return getCodeForFramework(props, framework);
+                    }
+                    catch (error) {
+                        console.error('Error in transform function:', error);
+                        return `<apollo-data-bar-chart />`;
+                    }
+                },
+            },
+        },
+    },
+};

package/dist/collection/components/apollo-data-donut/apollo-data-donut.js

@@ -397,7 +397,7 @@ export class ApolloDataDonutChart extends ApolloBase {
         };
     }
     render() {
-        return (h(Host, { key: 'fb26a6b02b83b0ce64a8301149b66f5d09a4a7b4' }, h("div", { key: 'fc08cdc3c0c0fda7f7c13149532eb61f511aa035', id: "container", style: { width: '100%', height: '100%' } })));
+        return (h(Host, { key: '5d9ba4976956c4f0d29b9aa8638373895c0c3f7f' }, h("div", { key: '2db6d1418492898de84a167e35ecc8b16d695942', id: "container", style: { width: '100%', height: '100%' } })));
     }
     static get is() { return "apollo-data-donut-chart"; }
     static get encapsulation() { return "shadow"; }