@xplortech/insights-elements 0.0.1-draft.7729525

package/dist/collection/utils/code-generator.js

@@ -0,0 +1,201 @@
+/**
+ * Code generator for insights chart components
+ * Generates framework-specific code examples based on current story args
+ */
+/**
+ * Convert kebab-case to PascalCase
+ * e.g. 'insights-bar-chart' -> 'InsightsBarChart'
+ */
+function toPascalCase(str) {
+    return str
+        .split('-')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+        .join('');
+}
+/**
+ * Convert kebab-case to camelCase
+ * e.g. 'insights-bar-chart' -> 'insightsBarChart'
+ */
+function toCamelCase(str) {
+    const pascal = toPascalCase(str);
+    return pascal.charAt(0).toLowerCase() + pascal.slice(1);
+}
+function buildNormalizeMappingCode(mappings) {
+    return (mappings
+        ?.filter(m => m.outputKey && m.sourceField)
+        .map(m => `    ${m.outputKey}: row['${m.sourceField}']`)
+        .join(',\n') || '');
+}
+/**
+ * Build the getQueryByFilters function code with dynamic filter references
+ * Values like "filters_location_id" become filters.location_id
+ */
+function buildGetQueryByFiltersCode(props, indent = '  ') {
+    const lines = [];
+    lines.push(`const getQueryByFilters = (filters) => ({`);
+    const safeColumns = Array.isArray(props.columns) ? props.columns : [];
+    const safeQueryFilters = Array.isArray(props.queryFilters) ? props.queryFilters : [];
+    const safeOrder = props.order && typeof props.order === 'object' ? props.order : {};
+    const safeTotals = Array.isArray(props.totals) ? props.totals : [];
+    if (safeColumns.length) {
+        lines.push(`${indent}columns: ${JSON.stringify(safeColumns)},`);
+    }
+    if (safeQueryFilters.length) {
+        lines.push(`${indent}filters: [`);
+        safeQueryFilters.forEach((f, i) => {
+            if (!f || typeof f !== 'object')
+                return;
+            const values = Array.isArray(f.values) ? f.values : [];
+            const valuesCode = values
+                .map((v) => {
+                if (typeof v === 'string' && v.startsWith('filters_')) {
+                    const key = v.replace('filters_', '');
+                    return `filters.${key}`;
+                }
+                return JSON.stringify(v);
+            })
+                .join(', ');
+            const comma = i < safeQueryFilters.length - 1 ? ',' : '';
+            lines.push(`${indent}  { member: '${f.member || ''}', operator: '${f.operator || 'equals'}', values: [${valuesCode}] }${comma}`);
+        });
+        lines.push(`${indent}],`);
+    }
+    if (Object.keys(safeOrder).length) {
+        lines.push(`${indent}order: ${JSON.stringify(safeOrder)},`);
+    }
+    if (safeTotals.length) {
+        lines.push(`${indent}totals: ${JSON.stringify(safeTotals.filter(t => t && t.member))},`);
+    }
+    if (props.limit) {
+        lines.push(`${indent}limit: ${props.limit},`);
+    }
+    lines.push(`});`);
+    return lines.join('\n');
+}
+export function generateReactCode(props) {
+    const normalizeCode = buildNormalizeMappingCode(props.normalizeMapping);
+    const apiUrl = props.apiUrl || 'http://localhost:3000/v1';
+    const filtersStr = JSON.stringify(props.filters || {}, null, 2).replace(/\n/g, '\n  ');
+    const getQueryCode = buildGetQueryByFiltersCode(props, '    ');
+    const componentName = props.componentName || 'insights-donut-chart';
+    const reactComponent = toPascalCase(componentName);
+    const functionName = 'My' + toPascalCase(componentName.replace('insights-', ''));
+    return `import { InsightsWrapper, ${reactComponent} } from '@xplortech/insights-elements-react';
+
+function ${functionName}() {
+  const filters = ${filtersStr};
+
+  ${getQueryCode}
+
+  const normalizeRawResponse = (response) => {
+    return response.getData().map(row => ({
+${normalizeCode}
+    }));
+  };
+
+  return (
+    <InsightsWrapper apiUrl="${apiUrl}" token="YOUR_TOKEN">
+      <${reactComponent}
+        reportName="${props.reportName}"
+        filters={filters}
+        spec={${JSON.stringify(props.spec)}}
+        getQueryByFilters={getQueryByFilters}
+        normalizeRawResponse={normalizeRawResponse}
+      />
+    </InsightsWrapper>
+  );
+}
+
+export default ${functionName};`;
+}
+export function generateVueCode(props) {
+    const normalizeCode = buildNormalizeMappingCode(props.normalizeMapping);
+    const apiUrl = props.apiUrl || 'http://localhost:3000/v1';
+    const getQueryCode = buildGetQueryByFiltersCode(props, '  ');
+    const componentName = props.componentName || 'insights-donut-chart';
+    const vueComponent = toPascalCase(componentName);
+    return `<template>
+  <InsightsWrapper :api-url="apiUrl" :token="token">
+    <${vueComponent}
+      :report-name="reportName"
+      :filters="filters"
+      :spec="spec"
+      :get-query-by-filters="getQueryByFilters"
+      :normalize-raw-response="normalizeRawResponse"
+    />
+  </InsightsWrapper>
+</template>
+
+<script setup lang="ts">
+import { InsightsWrapper, ${vueComponent} } from '@xplortech/insights-elements-vue';
+
+const apiUrl = '${apiUrl}';
+const token = 'YOUR_TOKEN';
+const reportName = '${props.reportName}';
+const filters = ${JSON.stringify(props.filters || {}, null, 2)};
+const spec = ${JSON.stringify(props.spec)};
+
+${getQueryCode}
+
+const normalizeRawResponse = (response) => {
+  return response.getData().map(row => ({
+${normalizeCode}
+  }));
+};
+</script>`;
+}
+export function generateWebComponentCode(props) {
+    const normalizeCode = buildNormalizeMappingCode(props.normalizeMapping);
+    const apiUrl = props.apiUrl || 'http://localhost:3000/v1';
+    const getQueryCode = buildGetQueryByFiltersCode(props, '      ');
+    const componentName = props.componentName || 'insights-donut-chart';
+    const chartId = toCamelCase(componentName.replace('insights-', ''));
+    return `<!DOCTYPE html>
+<html>
+<head>
+  <script type="module">
+    import { defineCustomElements } from '@xplortech/insights-elements/loader';
+    defineCustomElements();
+  </script>
+</head>
+<body>
+  <insights-wrapper api-url="${apiUrl}" token="YOUR_TOKEN">
+    <${componentName} 
+      id="${chartId}"
+      report-name="${props.reportName}"
+    ></${componentName}>
+  </insights-wrapper>
+
+  <script>
+    const chart = document.getElementById('${chartId}');
+    
+    chart.filters = ${JSON.stringify(props.filters || {}, null, 2).replace(/\n/g, '\n    ')};
+    chart.spec = ${JSON.stringify(props.spec)};
+    
+    ${getQueryCode.replace(/\n/g, '\n    ')}
+    chart.getQueryByFilters = getQueryByFilters;
+    
+    chart.normalizeRawResponse = (response) => {
+      return response.getData().map(row => ({
+${normalizeCode
+        .split('\n')
+        .map(l => '    ' + l)
+        .join('\n')}
+      }));
+    };
+  </script>
+</body>
+</html>`;
+}
+export function getCodeForFramework(props, framework = 'webcomponent') {
+    switch (framework) {
+        case 'react':
+            return generateReactCode(props);
+        case 'vue':
+            return generateVueCode(props);
+        case 'webcomponent':
+        default:
+            return generateWebComponentCode(props);
+    }
+}
+//# sourceMappingURL=code-generator.js.map

package/dist/collection/utils/code-generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-generator.js","sourceRoot":"","sources":["../../src/utils/code-generator.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Code generator for insights chart components\n * Generates framework-specific code examples based on current story args\n */\n\nexport interface CodeGenProps {\n  reportName: string;\n  filters: Record<string, any>;\n  columns: string[];\n  queryFilters: Array<{ member: string; operator: string; values: any[] }>;\n  order: Record<string, 'asc' | 'desc'>;\n  totals: Array<{ fn: string; member: string }>;\n  limit: number;\n  normalizeMapping: Array<{ outputKey: string; sourceField: string }>;\n  spec: any;\n  apiUrl?: string;\n  componentName?: string; // e.g. 'insights-bar-chart', 'insights-donut-chart'\n}\n\n/**\n * Convert kebab-case to PascalCase\n * e.g. 'insights-bar-chart' -> 'InsightsBarChart'\n */\nfunction toPascalCase(str: string): string {\n  return str\n    .split('-')\n    .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n    .join('');\n}\n\n/**\n * Convert kebab-case to camelCase\n * e.g. 'insights-bar-chart' -> 'insightsBarChart'\n */\nfunction toCamelCase(str: string): string {\n  const pascal = toPascalCase(str);\n  return pascal.charAt(0).toLowerCase() + pascal.slice(1);\n}\n\nfunction buildNormalizeMappingCode(mappings: Array<{ outputKey: string; sourceField: string }>): string {\n  return (\n    mappings\n      ?.filter(m => m.outputKey && m.sourceField)\n      .map(m => `    ${m.outputKey}: row['${m.sourceField}']`)\n      .join(',\\n') || ''\n  );\n}\n\n/**\n * Build the getQueryByFilters function code with dynamic filter references\n * Values like \"filters_location_id\" become filters.location_id\n */\nfunction buildGetQueryByFiltersCode(props: CodeGenProps, indent: string = '  '): string {\n  const lines: string[] = [];\n  lines.push(`const getQueryByFilters = (filters) => ({`);\n\n  const safeColumns = Array.isArray(props.columns) ? props.columns : [];\n  const safeQueryFilters = Array.isArray(props.queryFilters) ? props.queryFilters : [];\n  const safeOrder = props.order && typeof props.order === 'object' ? props.order : {};\n  const safeTotals = Array.isArray(props.totals) ? props.totals : [];\n\n  if (safeColumns.length) {\n    lines.push(`${indent}columns: ${JSON.stringify(safeColumns)},`);\n  }\n\n  if (safeQueryFilters.length) {\n    lines.push(`${indent}filters: [`);\n    safeQueryFilters.forEach((f, i) => {\n      if (!f || typeof f !== 'object') return;\n      const values = Array.isArray(f.values) ? f.values : [];\n      const valuesCode = values\n        .map((v: any) => {\n          if (typeof v === 'string' && v.startsWith('filters_')) {\n            const key = v.replace('filters_', '');\n            return `filters.${key}`;\n          }\n          return JSON.stringify(v);\n        })\n        .join(', ');\n      const comma = i < safeQueryFilters.length - 1 ? ',' : '';\n      lines.push(`${indent}  { member: '${f.member || ''}', operator: '${f.operator || 'equals'}', values: [${valuesCode}] }${comma}`);\n    });\n    lines.push(`${indent}],`);\n  }\n\n  if (Object.keys(safeOrder).length) {\n    lines.push(`${indent}order: ${JSON.stringify(safeOrder)},`);\n  }\n\n  if (safeTotals.length) {\n    lines.push(`${indent}totals: ${JSON.stringify(safeTotals.filter(t => t && t.member))},`);\n  }\n\n  if (props.limit) {\n    lines.push(`${indent}limit: ${props.limit},`);\n  }\n\n  lines.push(`});`);\n  return lines.join('\\n');\n}\n\nexport function generateReactCode(props: CodeGenProps): string {\n  const normalizeCode = buildNormalizeMappingCode(props.normalizeMapping);\n  const apiUrl = props.apiUrl || 'http://localhost:3000/v1';\n  const filtersStr = JSON.stringify(props.filters || {}, null, 2).replace(/\\n/g, '\\n  ');\n  const getQueryCode = buildGetQueryByFiltersCode(props, '    ');\n\n  const componentName = props.componentName || 'insights-donut-chart';\n  const reactComponent = toPascalCase(componentName);\n  const functionName = 'My' + toPascalCase(componentName.replace('insights-', ''));\n\n  return `import { InsightsWrapper, ${reactComponent} } from '@xplortech/insights-elements-react';\n\nfunction ${functionName}() {\n  const filters = ${filtersStr};\n\n  ${getQueryCode}\n\n  const normalizeRawResponse = (response) => {\n    return response.getData().map(row => ({\n${normalizeCode}\n    }));\n  };\n\n  return (\n    <InsightsWrapper apiUrl=\"${apiUrl}\" token=\"YOUR_TOKEN\">\n      <${reactComponent}\n        reportName=\"${props.reportName}\"\n        filters={filters}\n        spec={${JSON.stringify(props.spec)}}\n        getQueryByFilters={getQueryByFilters}\n        normalizeRawResponse={normalizeRawResponse}\n      />\n    </InsightsWrapper>\n  );\n}\n\nexport default ${functionName};`;\n}\n\nexport function generateVueCode(props: CodeGenProps): string {\n  const normalizeCode = buildNormalizeMappingCode(props.normalizeMapping);\n  const apiUrl = props.apiUrl || 'http://localhost:3000/v1';\n  const getQueryCode = buildGetQueryByFiltersCode(props, '  ');\n\n  const componentName = props.componentName || 'insights-donut-chart';\n  const vueComponent = toPascalCase(componentName);\n\n  return `<template>\n  <InsightsWrapper :api-url=\"apiUrl\" :token=\"token\">\n    <${vueComponent}\n      :report-name=\"reportName\"\n      :filters=\"filters\"\n      :spec=\"spec\"\n      :get-query-by-filters=\"getQueryByFilters\"\n      :normalize-raw-response=\"normalizeRawResponse\"\n    />\n  </InsightsWrapper>\n</template>\n\n<script setup lang=\"ts\">\nimport { InsightsWrapper, ${vueComponent} } from '@xplortech/insights-elements-vue';\n\nconst apiUrl = '${apiUrl}';\nconst token = 'YOUR_TOKEN';\nconst reportName = '${props.reportName}';\nconst filters = ${JSON.stringify(props.filters || {}, null, 2)};\nconst spec = ${JSON.stringify(props.spec)};\n\n${getQueryCode}\n\nconst normalizeRawResponse = (response) => {\n  return response.getData().map(row => ({\n${normalizeCode}\n  }));\n};\n</script>`;\n}\n\nexport function generateWebComponentCode(props: CodeGenProps): string {\n  const normalizeCode = buildNormalizeMappingCode(props.normalizeMapping);\n  const apiUrl = props.apiUrl || 'http://localhost:3000/v1';\n  const getQueryCode = buildGetQueryByFiltersCode(props, '      ');\n\n  const componentName = props.componentName || 'insights-donut-chart';\n  const chartId = toCamelCase(componentName.replace('insights-', ''));\n\n  return `<!DOCTYPE html>\n<html>\n<head>\n  <script type=\"module\">\n    import { defineCustomElements } from '@xplortech/insights-elements/loader';\n    defineCustomElements();\n  </script>\n</head>\n<body>\n  <insights-wrapper api-url=\"${apiUrl}\" token=\"YOUR_TOKEN\">\n    <${componentName} \n      id=\"${chartId}\"\n      report-name=\"${props.reportName}\"\n    ></${componentName}>\n  </insights-wrapper>\n\n  <script>\n    const chart = document.getElementById('${chartId}');\n    \n    chart.filters = ${JSON.stringify(props.filters || {}, null, 2).replace(/\\n/g, '\\n    ')};\n    chart.spec = ${JSON.stringify(props.spec)};\n    \n    ${getQueryCode.replace(/\\n/g, '\\n    ')}\n    chart.getQueryByFilters = getQueryByFilters;\n    \n    chart.normalizeRawResponse = (response) => {\n      return response.getData().map(row => ({\n${normalizeCode\n  .split('\\n')\n  .map(l => '    ' + l)\n  .join('\\n')}\n      }));\n    };\n  </script>\n</body>\n</html>`;\n}\n\nexport function getCodeForFramework(props: any, framework: string = 'webcomponent'): string {\n  switch (framework) {\n    case 'react':\n      return generateReactCode(props as CodeGenProps);\n    case 'vue':\n      return generateVueCode(props as CodeGenProps);\n    case 'webcomponent':\n    default:\n      return generateWebComponentCode(props as CodeGenProps);\n  }\n}\n"]}

package/dist/collection/utils/insights-context.js

@@ -0,0 +1,33 @@
+// Global configuration store
+let globalConfigurations = {};
+/**
+ * Setup multiple configurations for insights
+ * @param configurations - Map of configuration names to configuration items
+ * @example
+ * ```typescript
+ * setupConfiguration({
+ *   default: {
+ *     apiUrl: 'https://api.example.com',
+ *     token: 'token123',
+ *     refreshToken: async () => 'newToken',
+ *     onEventEmitted: (event) => console.log(event)
+ *   },
+ *   europe: {
+ *     apiUrl: 'https://api.eu.example.com',
+ *     token: 'euToken123'
+ *   }
+ * });
+ * ```
+ */
+export const setupConfiguration = (configurations) => {
+    globalConfigurations = configurations;
+};
+/**
+ * Get configuration by name
+ * @param configName - Name of the configuration to retrieve (defaults to 'default')
+ */
+export const getConfiguration = (configName) => {
+    const name = configName || 'default';
+    return globalConfigurations[name];
+};
+//# sourceMappingURL=insights-context.js.map

package/dist/collection/utils/insights-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"insights-context.js","sourceRoot":"","sources":["../../src/utils/insights-context.ts"],"names":[],"mappings":"AAkBA,6BAA6B;AAC7B,IAAI,oBAAoB,GAAkB,EAAE,CAAC;AAE7C;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,cAA6B,EAAE,EAAE;IAClE,oBAAoB,GAAG,cAAc,CAAC;AACxC,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,UAAmB,EAAiC,EAAE;IACrF,MAAM,IAAI,GAAG,UAAU,IAAI,SAAS,CAAC;IACrC,OAAO,oBAAoB,CAAC,IAAI,CAAC,CAAC;AACpC,CAAC,CAAC","sourcesContent":["export type EventType = 'error' | 'warning';\n\nexport interface EventData {\n  eventType: EventType;\n  data: any;\n}\n\nexport interface ConfigurationItem {\n  apiUrl: string;\n  token?: string;\n  refreshToken?: () => Promise<string> | string;\n  onEventEmitted?: (event: EventData) => void;\n}\n\nexport interface Configuration {\n  [configName: string]: ConfigurationItem;\n}\n\n// Global configuration store\nlet globalConfigurations: Configuration = {};\n\n/**\n * Setup multiple configurations for insights\n * @param configurations - Map of configuration names to configuration items\n * @example\n * ```typescript\n * setupConfiguration({\n *   default: {\n *     apiUrl: 'https://api.example.com',\n *     token: 'token123',\n *     refreshToken: async () => 'newToken',\n *     onEventEmitted: (event) => console.log(event)\n *   },\n *   europe: {\n *     apiUrl: 'https://api.eu.example.com',\n *     token: 'euToken123'\n *   }\n * });\n * ```\n */\nexport const setupConfiguration = (configurations: Configuration) => {\n  globalConfigurations = configurations;\n};\n\n/**\n * Get configuration by name\n * @param configName - Name of the configuration to retrieve (defaults to 'default')\n */\nexport const getConfiguration = (configName?: string): ConfigurationItem | undefined => {\n  const name = configName || 'default';\n  return globalConfigurations[name];\n};\n"]}

package/dist/components/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;

package/dist/components/index.js

@@ -0,0 +1,44 @@
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-DFvs3VMW.js';
+export { s as setupConfiguration } from './p-CSTD3N9t.js';
+
+/**
+ * Global script for insights-elements
+ * Auto-loads apollo-data components when the library initializes
+ */
+var appGlobalScript = async () => {
+    if (typeof window === 'undefined')
+        return;
+    // Auto-load apollo-data when insights-elements initializes
+    try {
+        // Determine the base URL for apollo-data based on the current script location
+        let apolloDataUrl;
+        if (typeof import.meta?.url === 'string') {
+            const baseUrl = new URL('.', import.meta.url).href;
+            apolloDataUrl = new URL('apollo-data/apollo-data.esm.js', baseUrl).href;
+        }
+        if (apolloDataUrl) {
+            // Try loading from the co-located apollo-data folder first (works for both dev and bundled scenarios)
+            try {
+                await import(/* @vite-ignore */ apolloDataUrl);
+                console.log('✓ apollo-data loaded from co-located bundle', { apolloDataUrl });
+                return;
+            }
+            catch {
+                // Fall through to npm package import
+            }
+        }
+        // Fallback: Import from npm package (for bundlers that handle this)
+        await import('./p-DHA6uI9u.js');
+        console.log('✓ apollo-data loaded from npm package');
+    }
+    catch (error) {
+        console.warn('ℹ apollo-data not available:', error?.message || error);
+    }
+};
+
+const globalScripts = appGlobalScript;
+
+globalScripts();
+//# sourceMappingURL=index.js.map
+
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"file":"index.js","mappings":";;;AAAA;;;AAGG;AACH,sBAAe,YAAW;IACxB,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE;;AAGnC,IAAA,IAAI;;AAEF,QAAA,IAAI,aAAiC;QAErC,IAAI,OAAO,MAAM,CAAC,IAAI,EAAE,GAAG,KAAK,QAAQ,EAAE;AACxC,YAAA,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI;YAClD,aAAa,GAAG,IAAI,GAAG,CAAC,gCAAgC,EAAE,OAAO,CAAC,CAAC,IAAI;;QAGzE,IAAI,aAAa,EAAE;;AAEjB,YAAA,IAAI;AACF,gBAAA,MAAM,0BAA0B,aAAa,CAAC;gBAC9C,OAAO,CAAC,GAAG,CAAC,6CAA6C,EAAE,EAAE,aAAa,EAAE,CAAC;gBAC7E;;AACA,YAAA,MAAM;;;;;AAMV,QAAA,MAAM,OAAO,iBAAwB,CAAC;AACtC,QAAA,OAAO,CAAC,GAAG,CAAC,uCAAuC,CAAC;;IACpD,OAAO,KAAK,EAAE;QACd,OAAO,CAAC,IAAI,CAAC,8BAA8B,EAAG,KAAe,EAAE,OAAO,IAAI,KAAK,CAAC;;AAEpF,CAAC;;ACjCM,MAAM,aAAa,GAAG,eAAe;;","names":[],"sources":["src/global/app.ts","@stencil/core/internal/app-globals"],"sourcesContent":["/**\n * Global script for insights-elements\n * Auto-loads apollo-data components when the library initializes\n */\nexport default async () => {\n  if (typeof window === 'undefined') return;\n\n  // Auto-load apollo-data when insights-elements initializes\n  try {\n    // Determine the base URL for apollo-data based on the current script location\n    let apolloDataUrl: string | undefined;\n\n    if (typeof import.meta?.url === 'string') {\n      const baseUrl = new URL('.', import.meta.url).href;\n      apolloDataUrl = new URL('apollo-data/apollo-data.esm.js', baseUrl).href;\n    }\n\n    if (apolloDataUrl) {\n      // Try loading from the co-located apollo-data folder first (works for both dev and bundled scenarios)\n      try {\n        await import(/* @vite-ignore */ apolloDataUrl);\n        console.log('✓ apollo-data loaded from co-located bundle', { apolloDataUrl });\n        return;\n      } catch {\n        // Fall through to npm package import\n      }\n    }\n\n    // Fallback: Import from npm package (for bundlers that handle this)\n    await import('@xplortech/apollo-data');\n    console.log('✓ apollo-data loaded from npm package');\n  } catch (error) {\n    console.warn('ℹ apollo-data not available:', (error as Error)?.message || error);\n  }\n};\n","import appGlobalScript from '/home/runner/work/insights-api/insights-api/packages/insights-elements/src/global/app.ts';\nexport const globalScripts = appGlobalScript;\nexport const globalStyles = \"\";\n"],"version":3}

package/dist/components/insights-bar-chart.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface InsightsBarChart extends Components.InsightsBarChart, HTMLElement {}
+export const InsightsBarChart: {
+    prototype: InsightsBarChart;
+    new (): InsightsBarChart;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/insights-bar-chart.js

@@ -0,0 +1,73 @@
+import { p as proxyCustomElement, h } from './p-DFvs3VMW.js';
+import { I as InsightsChartBase } from './p-Dv82-c17.js';
+
+const insightsBarChartCss = ":host{display:block}.insights-bar-chart{width:100%;height:100%;min-height:300px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:300px}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.loading-container p{margin-top:16px;color:#666}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:300px;padding:20px}.error-message{color:#e74c3c;margin-bottom:16px;text-align:center}.error-container button{padding:8px 16px;background-color:#3498db;color:white;border:none;border-radius:4px;cursor:pointer;font-size:14px}.error-container button:hover{background-color:#2980b9}.chart-container{width:100%;height:100%;padding:20px}.no-data{display:flex;align-items:center;justify-content:center;height:100%;min-height:300px;color:#999}";
+
+const InsightsBarChart$1 = /*@__PURE__*/ proxyCustomElement(class InsightsBarChart extends InsightsChartBase {
+    constructor(registerHost) {
+        super(false);
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    get el() { return this; }
+    componentWillLoad() {
+        this.fetchChartData();
+    }
+    handlePropsChange() {
+        this.fetchChartData();
+    }
+    renderChart() {
+        if (!this.data || this.data.length === 0) {
+            return h("div", { class: "no-data" }, "No data available");
+        }
+        return (h("div", { class: "chart-container" }, h("apollo-data-bar-chart", { ref: el => {
+                if (el) {
+                    el.adData = this.data;
+                    el.adSpec = this.spec || {};
+                }
+            } })));
+    }
+    render() {
+        return (h("div", { key: 'cc42b49e957eba1e8cfef55ff2e4a212456489c6', class: "insights-bar-chart" }, this.loading && (h("div", { key: 'c82db2f39efa98f3429d21608afaced7623bac6a', class: "loading-container" }, h("div", { key: '05e31d66e3c0ee4f58bde4e4ddc16fcd969f3e80', class: "spinner" }), h("p", { key: 'e6626e2ae87ba94aed71d9610f5f54e8c1978899' }, "Loading chart data..."))), this.error && (h("div", { key: 'c77589a081583bfb82ac224c7969db69391a7a24', class: "error-container" }, h("p", { key: '53578a6f3344a29aa4f54f8a1b3f2f8a6bc8e32e', class: "error-message" }, this.error), h("button", { key: 'bf102ad25e23c2b894d1c0d49ac788f9c5979fac', onClick: () => this.fetchChartData() }, "Retry"))), !this.loading && !this.error && this.renderChart()));
+    }
+    static get watchers() { return {
+        "reportName": ["handlePropsChange"],
+        "filters": ["handlePropsChange"]
+    }; }
+    static get style() { return insightsBarChartCss; }
+}, [769, "insights-bar-chart", {
+        "reportName": [1, "report-name"],
+        "filters": [16],
+        "getQueryByFilters": [16],
+        "normalizeRawResponse": [16],
+        "spec": [16],
+        "loading": [32],
+        "data": [32],
+        "error": [32]
+    }, undefined, {
+        "reportName": ["handlePropsChange"],
+        "filters": ["handlePropsChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["insights-bar-chart"];
+    components.forEach(tagName => { switch (tagName) {
+        case "insights-bar-chart":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, InsightsBarChart$1);
+            }
+            break;
+    } });
+}
+
+const InsightsBarChart = InsightsBarChart$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { InsightsBarChart, defineCustomElement };
+//# sourceMappingURL=insights-bar-chart.js.map
+
+//# sourceMappingURL=insights-bar-chart.js.map

package/dist/components/insights-bar-chart.js.map

@@ -0,0 +1 @@
+{"file":"insights-bar-chart.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,wpCAAwpC;;MCSvqCA,kBAAiB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAQ,iBAAyC,CAAA;;;;;;;;;IAG7E,iBAAiB,GAAA;QACf,IAAI,CAAC,cAAc,EAAE;;IAKvB,iBAAiB,GAAA;QACf,IAAI,CAAC,cAAc,EAAE;;IAGf,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;AACxC,YAAA,OAAO,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,SAAS,wBAAwB;;QAGrD,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,uBAAA,EAAA,EACE,GAAG,EAAE,EAAE,IAAG;gBACR,IAAI,EAAE,EAAE;AACN,oBAAA,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI;oBACrB,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE;;AAE/B,aAAC,EAAA,CACD,CACE;;IAIV,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC5B,IAAI,CAAC,OAAO,KACX,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAO,CAAA,EAC3B,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,uBAAA,CAA4B,CACxB,CACP,EAEA,IAAI,CAAC,KAAK,KACT,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,KAAK,CAAK,EACzC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EAAgB,EAAA,OAAA,CAAA,CACxD,CACP,EAEA,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,EAAE,CAC/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["InsightsBarChart","__stencil_proxyCustomElement"],"sources":["src/components/insights-bar-chart/insights-bar-chart.css?tag=insights-bar-chart&encapsulation=shadow","src/components/insights-bar-chart/insights-bar-chart.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.insights-bar-chart {\n  width: 100%;\n  height: 100%;\n  min-height: 300px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n}\n\n.loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 300px;\n}\n\n.spinner {\n  width: 40px;\n  height: 40px;\n  border: 4px solid #f3f3f3;\n  border-top: 4px solid #3498db;\n  border-radius: 50%;\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-container p {\n  margin-top: 16px;\n  color: #666;\n}\n\n.error-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 300px;\n  padding: 20px;\n}\n\n.error-message {\n  color: #e74c3c;\n  margin-bottom: 16px;\n  text-align: center;\n}\n\n.error-container button {\n  padding: 8px 16px;\n  background-color: #3498db;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n}\n\n.error-container button:hover {\n  background-color: #2980b9;\n}\n\n.chart-container {\n  width: 100%;\n  height: 100%;\n  padding: 20px;\n}\n\n.no-data {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 300px;\n  color: #999;\n}\n","import { Component, h, Watch, Element } from '@stencil/core';\nimport type { BarDataItem, BarSpec } from '@xplortech/apollo-data/dist/types/components.d.ts';\nimport { InsightsChartBase } from '../insights-chart-base';\n\n@Component({\n  tag: 'insights-bar-chart',\n  styleUrl: 'insights-bar-chart.css',\n  shadow: true,\n})\nexport class InsightsBarChart extends InsightsChartBase<BarDataItem[], BarSpec> {\n  @Element() el: HTMLElement = null;\n\n  componentWillLoad() {\n    this.fetchChartData();\n  }\n\n  @Watch('reportName')\n  @Watch('filters')\n  handlePropsChange() {\n    this.fetchChartData();\n  }\n\n  private renderChart() {\n    if (!this.data || this.data.length === 0) {\n      return <div class=\"no-data\">No data available</div>;\n    }\n\n    return (\n      <div class=\"chart-container\">\n        <apollo-data-bar-chart\n          ref={el => {\n            if (el) {\n              el.adData = this.data;\n              el.adSpec = this.spec || {};\n            }\n          }}\n        />\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <div class=\"insights-bar-chart\">\n        {this.loading && (\n          <div class=\"loading-container\">\n            <div class=\"spinner\"></div>\n            <p>Loading chart data...</p>\n          </div>\n        )}\n\n        {this.error && (\n          <div class=\"error-container\">\n            <p class=\"error-message\">{this.error}</p>\n            <button onClick={() => this.fetchChartData()}>Retry</button>\n          </div>\n        )}\n\n        {!this.loading && !this.error && this.renderChart()}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/insights-donut-chart.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface InsightsDonutChart extends Components.InsightsDonutChart, HTMLElement {}
+export const InsightsDonutChart: {
+    prototype: InsightsDonutChart;
+    new (): InsightsDonutChart;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/insights-donut-chart.js

@@ -0,0 +1,73 @@
+import { p as proxyCustomElement, h } from './p-DFvs3VMW.js';
+import { I as InsightsChartBase } from './p-Dv82-c17.js';
+
+const insightsDonutChartCss = ":host{display:block}.insights-donut-chart{width:100%;height:100%;min-height:300px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:300px}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.loading-container p{margin-top:16px;color:#666}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:300px;padding:20px}.error-message{color:#e74c3c;margin-bottom:16px;text-align:center}.error-container button{padding:8px 16px;background-color:#3498db;color:white;border:none;border-radius:4px;cursor:pointer;font-size:14px}.error-container button:hover{background-color:#2980b9}.chart-container{width:100%;height:100%;padding:20px}.no-data{display:flex;align-items:center;justify-content:center;height:100%;min-height:300px;color:#999}";
+
+const InsightsDonutChart$1 = /*@__PURE__*/ proxyCustomElement(class InsightsDonutChart extends InsightsChartBase {
+    constructor(registerHost) {
+        super(false);
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    get el() { return this; }
+    componentWillLoad() {
+        this.fetchChartData();
+    }
+    handlePropsChange() {
+        this.fetchChartData();
+    }
+    renderChart() {
+        if (!this.data || this.data.length === 0) {
+            return h("div", { class: "no-data" }, "No data available");
+        }
+        return (h("div", { class: "chart-container" }, h("apollo-data-donut-chart", { ref: el => {
+                if (el) {
+                    el.adData = this.data;
+                    el.adSpec = this.spec || {};
+                }
+            } })));
+    }
+    render() {
+        return (h("div", { key: 'b459affa996f96b3d3c6d3be1b434bfd3bf9a434', class: "insights-donut-chart" }, this.loading && (h("div", { key: 'd657d9c5561521a87e9c89e53604f2f29d4ee672', class: "loading-container" }, h("div", { key: '4bba1ebc4c1ff611c156c89ca172f8a5962c22df', class: "spinner" }), h("p", { key: 'c769618075a47539d7e00c0d88951e9ec230211b' }, "Loading chart data..."))), this.error && (h("div", { key: '4d7222db52e39e475e865d5dd82f800d87f80f6c', class: "error-container" }, h("p", { key: 'a56ae48922b31cd0fe23b682580e05eafd052288', class: "error-message" }, this.error), h("button", { key: '0cd6d156f31fcddc624b1332d012a59f7f265092', onClick: () => this.fetchChartData() }, "Retry"))), !this.loading && !this.error && this.renderChart()));
+    }
+    static get watchers() { return {
+        "reportName": ["handlePropsChange"],
+        "filters": ["handlePropsChange"]
+    }; }
+    static get style() { return insightsDonutChartCss; }
+}, [769, "insights-donut-chart", {
+        "reportName": [1, "report-name"],
+        "filters": [16],
+        "getQueryByFilters": [16],
+        "normalizeRawResponse": [16],
+        "spec": [16],
+        "loading": [32],
+        "data": [32],
+        "error": [32]
+    }, undefined, {
+        "reportName": ["handlePropsChange"],
+        "filters": ["handlePropsChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["insights-donut-chart"];
+    components.forEach(tagName => { switch (tagName) {
+        case "insights-donut-chart":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, InsightsDonutChart$1);
+            }
+            break;
+    } });
+}
+
+const InsightsDonutChart = InsightsDonutChart$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { InsightsDonutChart, defineCustomElement };
+//# sourceMappingURL=insights-donut-chart.js.map
+
+//# sourceMappingURL=insights-donut-chart.js.map

package/dist/components/insights-donut-chart.js.map

@@ -0,0 +1 @@
+{"file":"insights-donut-chart.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,0pCAA0pC;;MCS3qCA,oBAAmB,iBAAAC,kBAAA,CAAA,MAAA,kBAAA,SAAQ,iBAA6C,CAAA;;;;;;;;;IAGnF,iBAAiB,GAAA;QACf,IAAI,CAAC,cAAc,EAAE;;IAKvB,iBAAiB,GAAA;QACf,IAAI,CAAC,cAAc,EAAE;;IAGf,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;AACxC,YAAA,OAAO,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,SAAS,wBAAwB;;QAGrD,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,yBAAA,EAAA,EACE,GAAG,EAAE,EAAE,IAAG;gBACR,IAAI,EAAE,EAAE;AACN,oBAAA,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI;oBACrB,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE;;AAE/B,aAAC,EAAA,CACD,CACE;;IAIV,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,sBAAsB,EAAA,EAC9B,IAAI,CAAC,OAAO,KACX,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAO,CAAA,EAC3B,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,uBAAA,CAA4B,CACxB,CACP,EAEA,IAAI,CAAC,KAAK,KACT,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,KAAK,CAAK,EACzC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EAAgB,EAAA,OAAA,CAAA,CACxD,CACP,EAEA,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,EAAE,CAC/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["InsightsDonutChart","__stencil_proxyCustomElement"],"sources":["src/components/insights-donut-chart/insights-donut-chart.css?tag=insights-donut-chart&encapsulation=shadow","src/components/insights-donut-chart/insights-donut-chart.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.insights-donut-chart {\n  width: 100%;\n  height: 100%;\n  min-height: 300px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n}\n\n.loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 300px;\n}\n\n.spinner {\n  width: 40px;\n  height: 40px;\n  border: 4px solid #f3f3f3;\n  border-top: 4px solid #3498db;\n  border-radius: 50%;\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-container p {\n  margin-top: 16px;\n  color: #666;\n}\n\n.error-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 300px;\n  padding: 20px;\n}\n\n.error-message {\n  color: #e74c3c;\n  margin-bottom: 16px;\n  text-align: center;\n}\n\n.error-container button {\n  padding: 8px 16px;\n  background-color: #3498db;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n}\n\n.error-container button:hover {\n  background-color: #2980b9;\n}\n\n.chart-container {\n  width: 100%;\n  height: 100%;\n  padding: 20px;\n}\n\n.no-data {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 300px;\n  color: #999;\n}\n","import { Component, h, Watch, Element } from '@stencil/core';\nimport type { DonutDataItem, DonutSpec } from '@xplortech/apollo-data/dist/types/components.d.ts';\nimport { InsightsChartBase } from '../insights-chart-base';\n\n@Component({\n  tag: 'insights-donut-chart',\n  styleUrl: 'insights-donut-chart.css',\n  shadow: true,\n})\nexport class InsightsDonutChart extends InsightsChartBase<DonutDataItem[], DonutSpec> {\n  @Element() el: HTMLElement = null;\n\n  componentWillLoad() {\n    this.fetchChartData();\n  }\n\n  @Watch('reportName')\n  @Watch('filters')\n  handlePropsChange() {\n    this.fetchChartData();\n  }\n\n  private renderChart() {\n    if (!this.data || this.data.length === 0) {\n      return <div class=\"no-data\">No data available</div>;\n    }\n\n    return (\n      <div class=\"chart-container\">\n        <apollo-data-donut-chart\n          ref={el => {\n            if (el) {\n              el.adData = this.data;\n              el.adSpec = this.spec || {};\n            }\n          }}\n        />\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <div class=\"insights-donut-chart\">\n        {this.loading && (\n          <div class=\"loading-container\">\n            <div class=\"spinner\"></div>\n            <p>Loading chart data...</p>\n          </div>\n        )}\n\n        {this.error && (\n          <div class=\"error-container\">\n            <p class=\"error-message\">{this.error}</p>\n            <button onClick={() => this.fetchChartData()}>Retry</button>\n          </div>\n        )}\n\n        {!this.loading && !this.error && this.renderChart()}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/insights-wrapper.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface InsightsWrapper extends Components.InsightsWrapper, HTMLElement {}
+export const InsightsWrapper: {
+    prototype: InsightsWrapper;
+    new (): InsightsWrapper;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;