@xplortech/apollo-data 0.0.5 → 0.0.6

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-heat-map_4.cjs",[[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-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);
 };
 
 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';
@@ -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: 'a0aebbff4fb177de35eb90329de81a1098663620' }, h("div", { key: '9e753e876df877d46254a02349850414914d9231', 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"; }

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

@@ -0,0 +1,132 @@
+import { html } from "lit-html";
+import { donutExamples } from "../../examples/apollo-data-donut.examples";
+import { generateReactCode, generateVueCode, generateWebComponentCode, generateInstallationDocs } from "../../utils/code-generator";
+// Helper function to generate code based on framework
+function getCodeForFramework(props, framework) {
+    switch (framework) {
+        case 'vue':
+            return generateVueCode('apollo-data-donut-chart', props);
+        case 'webcomponent':
+            return generateWebComponentCode('apollo-data-donut-chart', props);
+        case 'react':
+        default:
+            return generateReactCode('apollo-data-donut-chart', props);
+    }
+}
+const meta = {
+    title: 'Apollo Data/Donut Chart',
+    tags: ['autodocs'],
+    argTypes: {
+        adData: {
+            control: 'object',
+            description: 'Array of data items to display in the donut chart. Each item must have a category (string) and value (number).',
+            table: {
+                type: {
+                    summary: 'DonutDataItem[]',
+                    detail: 'interface DonutDataItem {\n  category: string;\n  value: number;\n}',
+                },
+                defaultValue: { summary: '[]' },
+            },
+        },
+        adSpec: {
+            control: 'object',
+            description: 'Optional specification object for customizing the chart appearance, such as custom color sets, prefix , suffix and center text',
+            table: {
+                type: {
+                    summary: 'DonutSpec',
+                    detail: 'interface DonutSpec {\n  colorSet?: string[];\n  prefix?: string;\n  suffix?: string;\n  centerText: string;\n}',
+                },
+                defaultValue: { summary: '{}' },
+            },
+        },
+    },
+    decorators: [
+        (story, context) => {
+            const framework = context.globals?.framework || 'react';
+            // Update visibility of installation sections when framework changes
+            setTimeout(() => {
+                const doc = globalThis.document;
+                if (doc) {
+                    const installSections = {
+                        react: doc.querySelector('.install-react'),
+                        vue: doc.querySelector('.install-vue'),
+                        webcomponent: doc.querySelector('.install-webcomponent'),
+                    };
+                    // Hide all sections first
+                    Object.values(installSections).forEach((section) => {
+                        if (section) {
+                            section.setAttribute('style', 'display: none;');
+                        }
+                    });
+                    // Show only the selected framework
+                    const selectedSection = installSections[framework];
+                    if (selectedSection) {
+                        selectedSection.setAttribute('style', 'display: block;');
+                    }
+                }
+            }, 0);
+            return story();
+        },
+    ],
+    parameters: {
+        docs: {
+            description: {
+                component: `${generateInstallationDocs('react', 'apollo-data-donut-chart')}
+
+${generateInstallationDocs('vue', 'apollo-data-donut-chart')}
+
+${generateInstallationDocs('webcomponent', 'apollo-data-donut-chart')}
+
+---
+
+## Description
+
+A donut chart component built with Vega that displays data in a circular format with interactive hover effects. Use the controls below to modify the data and see the code examples update automatically.
+
+**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;
+// Single interactive story
+export const ApolloDataDonut = {
+    args: {
+        adData: donutExamples[5].props.adData,
+        adSpec: donutExamples[5].props.adSpec || {},
+    },
+    render: args => html `
+    <div style="width: 600px; height: 400px;">
+      <apollo-data-donut-chart .adData=${args.adData} .adSpec=${args.adSpec}></apollo-data-donut-chart>
+    </div>
+  `,
+    parameters: {
+        // Code generator function for the Code addon panel
+        codeGenerator: (args, framework) => getCodeForFramework(args, framework),
+        docs: {
+            description: {
+                story: 'Interactive donut chart. Modify the data and spec using the controls below, switch between React, Vue, or Web Component using the Framework selector in the toolbar, and view the generated code in the Code tab.',
+            },
+            source: {
+                language: 'tsx',
+                type: 'dynamic',
+                transform: (_code, storyContext) => {
+                    try {
+                        const framework = storyContext?.globals?.framework || 'react';
+                        const props = {
+                            adData: storyContext?.args?.adData || [],
+                            adSpec: storyContext?.args?.adSpec || {},
+                        };
+                        return getCodeForFramework(props, framework);
+                    }
+                    catch (error) {
+                        // eslint-disable-next-line no-console
+                        console.error('Error in transform function:', error);
+                        return `<apollo-data-donut-chart />`;
+                    }
+                },
+            },
+        },
+    },
+};