@xplortech/apollo-data 0.0.3-draft.64d0fa1

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

@@ -0,0 +1,100 @@
+export const donutExamples = [
+    {
+        name: 'Basic Revenue Distribution',
+        description: 'A simple donut chart showing revenue distribution across different categories',
+        props: {
+            adData: [
+                { category: 'Product Sales', value: 350000 },
+                { category: 'Services', value: 250000 },
+                { category: 'Subscriptions', value: 150000 },
+                { category: 'Consulting', value: 100000 },
+            ],
+        },
+    },
+    {
+        name: 'Custom Colors',
+        description: 'Donut chart with custom color scheme',
+        props: {
+            adData: [
+                { category: 'Region A', value: 450000 },
+                { category: 'Region B', value: 300000 },
+                { category: 'Region C', value: 200000 },
+            ],
+            adSpec: {
+                colorSet: ['#FF6B6B', '#4ECDC4', '#45B7D1'],
+            },
+        },
+    },
+    {
+        name: 'Many Categories',
+        description: 'Donut chart with multiple categories',
+        props: {
+            adData: [
+                { category: 'Marketing', value: 120000 },
+                { category: 'Engineering', value: 280000 },
+                { category: 'Sales', value: 210000 },
+                { category: 'Operations', value: 150000 },
+                { category: 'Customer Support', value: 90000 },
+            ],
+        },
+    },
+    {
+        name: 'Prefix',
+        description: 'Donut chart with prefix',
+        props: {
+            adData: [
+                { category: 'Marketing', value: 120000 },
+                { category: 'Engineering', value: 280000 },
+                { category: 'Sales', value: 210000 },
+                { category: 'Operations', value: 150000 },
+                { category: 'Customer Support', value: 90000 },
+            ],
+            adSpec: {
+                prefix: '€',
+            },
+        },
+    },
+    {
+        name: 'Prefix and Suffix',
+        description: 'Donut chart with prefix and suffix',
+        props: {
+            adData: [
+                { category: 'Marketing', value: 120000 },
+                { category: 'Engineering', value: 280000 },
+                { category: 'Sales', value: 210000 },
+                { category: 'Operations', value: 150000 },
+                { category: 'Customer Support', value: 90000 },
+            ],
+            adSpec: {
+                prefix: '€',
+                suffix: '€',
+            },
+        },
+    },
+    {
+        name: 'Prefix, suffix and color set',
+        description: 'Donut chart with prefix and suffix and color set',
+        props: {
+            adData: [
+                { category: 'Marketing', value: 120000 },
+                { category: 'Engineering', value: 280000 },
+                { category: 'Sales', value: 210000 },
+                { category: 'Operations', value: 150000 },
+                { category: 'Customer Support', value: 90000 },
+            ],
+            adSpec: {
+                prefix: '€',
+                suffix: '€',
+                colorSet: [
+                    '#FF0000', // Red
+                    '#FF7F00', // Orange
+                    '#FFD700', // Yellow
+                    '#00C853', // Green
+                    '#00B0FF', // Blue
+                    '#3F51B5', // Indigo
+                    '#8E24AA', // Violet
+                ],
+            },
+        },
+    },
+];

package/dist/collection/examples/index.js

@@ -0,0 +1,2 @@
+export * from './apollo-data-donut.examples';
+export * from './apollo-data-bar.examples';

package/dist/collection/index.js

@@ -0,0 +1,10 @@
+/**
+ * @fileoverview entry point for your component library
+ *
+ * This is the entry point for your component library. Use this file to export utilities,
+ * constants or data structure that accompany your components.
+ *
+ * DO NOT use this file to export your components. Instead, use the recommended approaches
+ * to consume components of this package as outlined in the `README.md`.
+ */
+export { format } from './utils/utils';

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

@@ -0,0 +1,240 @@
+import packageJson from "../../package.json";
+// Package version - loaded from package.json
+const PACKAGE_VERSION = packageJson.version;
+// Generate installation documentation based on framework
+export function generateInstallationDocs(framework = 'react', componentName) {
+    const packageMap = {
+        react: '@xplortech/apollo-data-react',
+        vue: '@xplortech/apollo-data-vue',
+        webcomponent: '@xplortech/apollo-data',
+    };
+    const packageName = packageMap[framework] || packageMap.webcomponent;
+    const installCmd = `npm install ${packageName}@${PACKAGE_VERSION}`;
+    const yarnCmd = `yarn add ${packageName}@${PACKAGE_VERSION}`;
+    const pnpmCmd = `pnpm add ${packageName}@${PACKAGE_VERSION}`;
+    let importExample = '';
+    const componentNamePascal = componentName
+        ? componentName
+            .split('-')
+            .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+            .join('')
+        : 'ApolloDataDonutChart';
+    if (framework === 'react') {
+        importExample = `
+### Import in React
+
+\`\`\`tsx
+import { ${componentNamePascal} } from '@xplortech/apollo-data-react';
+
+function MyComponent() {
+  const data = [
+    { category: 'A', value: 30 },
+    { category: 'B', value: 70 }
+  ];
+
+  return <${componentNamePascal} adData={data} />;
+}
+\`\`\``;
+    }
+    else if (framework === 'vue') {
+        importExample = `
+### Import in Vue
+
+\`\`\`vue
+<template>
+  <${componentNamePascal} :adData="data" />
+</template>
+
+<script setup>
+import { ${componentNamePascal} } from '@xplortech/apollo-data-vue';
+
+const data = [
+  { category: 'A', value: 30 },
+  { category: 'B', value: 70 }
+];
+</script>
+\`\`\``;
+    }
+    else {
+        const kebabName = componentName || 'apollo-data-donut-chart';
+        importExample = `
+### Import as Web Component
+
+\`\`\`html
+<script type="module">
+  import { defineCustomElements } from '@xplortech/apollo-data/loader';
+  defineCustomElements();
+</script>
+
+<${kebabName}></${kebabName}>
+
+<script>
+  const chart = document.querySelector('${kebabName}');
+  chart.adData = [
+    { category: 'A', value: 30 },
+    { category: 'B', value: 70 }
+  ];
+</script>
+\`\`\``;
+    }
+    const frameworkLabel = framework === 'react' ? 'React' : framework === 'vue' ? 'Vue' : 'Web Component';
+    const classPrefix = framework === 'react' ? 'install-react' : framework === 'vue' ? 'install-vue' : 'install-webcomponent';
+    const hideByDefault = framework !== 'react' ? ' style="display: none;"' : '';
+    return `<div class="${classPrefix}"${hideByDefault}>
+
+## Installation (v${PACKAGE_VERSION}) - ${frameworkLabel}
+
+Install the package using your preferred package manager:
+
+\`\`\`bash
+# npm
+${installCmd}
+
+# yarn
+${yarnCmd}
+
+# pnpm
+${pnpmCmd}
+\`\`\`
+${importExample}
+
+</div>`;
+}
+function formatValue(value, indent = '') {
+    if (typeof value === 'function') {
+        return value.toString();
+    }
+    if (Array.isArray(value) || typeof value === 'object') {
+        return JSON.stringify(value, null, 2)
+            .split('\n')
+            .map((line, i) => (i === 0 ? line : indent + line))
+            .join('\n');
+    }
+    return JSON.stringify(value);
+}
+function extractPropsAndValues(props) {
+    const propEntries = Object.entries(props).filter(([_, value]) => value !== undefined);
+    return propEntries;
+}
+export function generateReactCode(componentName, props) {
+    const componentNamePascal = componentName
+        .split('-')
+        .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+        .join('');
+    const propEntries = extractPropsAndValues(props);
+    // Separate data declarations and event handlers
+    const dataProps = [];
+    const eventProps = [];
+    const declarations = [];
+    propEntries.forEach(([key, value]) => {
+        const camelKey = key.replace(/-([a-z])/g, g => g[1].toUpperCase());
+        if (key.startsWith('on') || typeof value === 'function') {
+            // Event handler
+            const handlerName = camelKey;
+            declarations.push(`const ${handlerName} = ${formatValue(value, '  ')};`);
+            eventProps.push(`${camelKey}={${handlerName}}`);
+        }
+        else {
+            // Data prop
+            const varName = camelKey === 'adData' ? 'data' : camelKey === 'adSpec' ? 'spec' : camelKey;
+            if (value && typeof value === 'object') {
+                declarations.push(`const ${varName} = ${formatValue(value, '  ')};`);
+                dataProps.push(`${camelKey}={${varName}}`);
+            }
+            else {
+                dataProps.push(`${camelKey}={${formatValue(value)}}`);
+            }
+        }
+    });
+    const allProps = [...dataProps, ...eventProps].join('\n      ');
+    return `import { ${componentNamePascal} } from '@xplortech/apollo-data-react';
+
+${declarations.join('\n\n')}
+
+function MyComponent() {
+  return (
+    <${componentNamePascal}
+      ${allProps}
+    />
+  );
+}
+
+export default MyComponent;`;
+}
+export function generateVueCode(componentName, props) {
+    const componentNamePascal = componentName
+        .split('-')
+        .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+        .join('');
+    const propEntries = extractPropsAndValues(props);
+    // Separate data declarations and event handlers
+    const templateProps = [];
+    const declarations = [];
+    propEntries.forEach(([key, value]) => {
+        const kebabKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+        if (key.startsWith('on') || typeof value === 'function') {
+            // Event handler
+            const eventName = key.startsWith('on') ? key.slice(2).toLowerCase() : key;
+            const handlerName = `handle${key.charAt(2).toUpperCase() + key.slice(3)}`;
+            declarations.push(`const ${handlerName} = ${formatValue(value, '  ')};`);
+            templateProps.push(`@${eventName}="${handlerName}"`);
+        }
+        else {
+            // Data prop
+            const varName = kebabKey === 'ad-data' ? 'data' : kebabKey === 'ad-spec' ? 'spec' : kebabKey;
+            if (value && typeof value === 'object') {
+                declarations.push(`const ${varName} = ${formatValue(value, '  ')};`);
+                templateProps.push(`:${kebabKey}="${varName}"`);
+            }
+            else {
+                templateProps.push(`:${kebabKey}="${formatValue(value)}"`);
+            }
+        }
+    });
+    const allProps = templateProps.join('\n    ');
+    return `<template>
+  <${componentNamePascal}
+    ${allProps}
+  />
+</template>
+
+<script setup lang="ts">
+import { ${componentNamePascal} } from '@xplortech/apollo-data-vue';
+
+${declarations.join('\n\n')}
+</script>`;
+}
+export function generateWebComponentCode(componentName, props) {
+    const propEntries = extractPropsAndValues(props);
+    const propertyAssignments = [];
+    const eventListeners = [];
+    propEntries.forEach(([key, value]) => {
+        if (key.startsWith('on') || typeof value === 'function') {
+            // Event handler
+            const eventName = key.startsWith('on') ? key.slice(2).toLowerCase() : key;
+            eventListeners.push(`    component.addEventListener('${eventName}', ${formatValue(value, '    ')});`);
+        }
+        else {
+            // Property
+            propertyAssignments.push(`    component.${key} = ${formatValue(value, '    ')};`);
+        }
+    });
+    return `<!DOCTYPE html>
+<html>
+<head>
+  <script type="module">
+    import { defineCustomElements } from '@xplortech/apollo-data/loader';
+    defineCustomElements();
+  </script>
+</head>
+<body>
+  <${componentName}></${componentName}>
+
+  <script>
+    const component = document.querySelector('${componentName}');
+${propertyAssignments.join('\n')}
+${eventListeners.length > 0 ? '\n' + eventListeners.join('\n') : ''}
+  </script>
+</body>
+</html>`;
+}

package/dist/collection/utils/constants.js

@@ -0,0 +1,2 @@
+export const MAX_NUMBER_OF_CATEGORIES = 8;
+export const CHART_COLORS = ['#4d1ab2', '#f99170', '#e550c8', '#ffd563', '#8857fa', '#52ebba', '#bf1d78', '#31cff8'];

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}

package/dist/components/apollo-data-bar-chart.d.ts

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

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

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

package/dist/components/apollo-data-donut-chart.d.ts

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

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

@@ -0,0 +1 @@
+import{p as e,h as a,H as t,t as n}from"./p-Dws5s-Xe.js";import{A as l}from"./p-7XF5Cax8.js";const r=e(class extends l{constructor(e){super(!1),!1!==e&&this.__registerHost(),this.__attachShadow()}get el(){return this}adData=[];adSpec={};categories;dataValues;totalRevenue;chartColors;defaultChartColors=["#4d1ab2","#f99170","#e550c8","#ffd563","#8857fa","#52ebba","#bf1d78","#31cff8"];defaultCenterText="Total Revenue";async componentDidRender(){await this.renderChart()}async getViewData(e,a){const t=e;return this.chartColors=a?.colorSet?a.colorSet:this.defaultChartColors,this.categories=t.map((e=>e.category)),this.dataValues=t.map(((e,a)=>({...e,order:a+1}))),this.totalRevenue=Math.round(100*t.reduce(((e,a)=>e+a.value),0))/100,{$schema:"https://vega.github.io/schema/vega/v5.json",description:"Donut chart with correctly placed percentage labels and exploded 'Other' slices on hover",height:250,signals:[{name:"containerW",update:"min(containerSize()[0], 400)"},{name:"centerX",update:"containerW / 2"},{name:"centerY",update:"250 / 2"},{name:"radius",update:"min(containerW, 250) / 2 - 20"},{name:"categoryDisplay",value:null,on:[{events:{type:"mouseover",markname:"mainArc"},update:"datum.category"},{events:{type:"mouseover",markname:"mainArcLabel"},update:"datum.category"},{events:{type:"mouseout",markname:"mainArc"},update:"null"},{events:{type:"mouseout",markname:"mainArcLabel"},update:"null"},{events:{type:"mouseover",markname:"innerArc"},update:"null"},{events:{type:"mouseover",markname:"outerArc"},update:"null"},{events:{type:"mouseover",markname:"otherArc"},update:"datum.category"},{events:{type:"mouseout",markname:"otherArc"},update:"null"}]},{name:"displayText",update:`categoryDisplay && length(categoryDisplay) > 18 ? (lastindexof(categoryDisplay, ' ') > 0 ? slice(categoryDisplay, 0, lastindexof(categoryDisplay, ' ')) + '\\n' + slice(categoryDisplay, lastindexof(categoryDisplay, ' ') + 1) : categoryDisplay) : categoryDisplay || '${a?.centerText?a.centerText:this.defaultCenterText}'`},{name:"hoveredCategory",value:null,on:[{events:{type:"mouseover",markname:"mainArc"},update:"datum.category"},{events:{type:"mouseover",markname:"mainArcLabel"},update:"datum.category"},{events:{type:"mouseover",markname:"outerArc"},update:"null"},{events:{type:"mouseover",markname:"innerArc"},update:"null"},{events:{type:"mouseout",markname:"innerArc"},update:"null"}]},{name:"hoveredValue",value:null,on:[{events:{type:"mouseover",markname:"mainArc"},update:"datum.value"},{events:{type:"mouseover",markname:"mainArcLabel"},update:"datum.value"},{events:{type:"mouseout",markname:"mainArc"},update:"null"},{events:{type:"mouseover",markname:"otherArc"},update:"datum.value"},{events:{type:"mouseout",markname:"otherArc"},update:"null"}]}],width:{signal:"containerW"},data:[{name:"table",values:this.dataValues,transform:[{type:"joinaggregate",fields:["value"],ops:["sum"],as:["total"]},{type:"formula",as:"percent",expr:"datum.value / datum.total"},{type:"collect",sort:{field:"order",order:"descending"}},{type:"pie",field:"value",as:["startAngle","endAngle"]},{type:"formula",as:"midAngle",expr:"((datum.startAngle + datum.endAngle) + 9.418) / 2"},{type:"formula",as:"labelX",expr:"centerX + (radius * 1.2 * cos(datum.midAngle))"},{type:"formula",as:"labelY",expr:"centerY + (radius * 1.2 * sin(datum.midAngle))"},{type:"formula",as:"percentLabel",expr:`format(datum.value / ${this.totalRevenue} * 100, '.1f') + '%'`}]},{name:"defaultCenterText",values:[{category:a?.centerText?a.centerText:this.defaultCenterText,value:this.totalRevenue,order:4}],transform:[{type:"filter",expr:"hoveredCategory === null"},{type:"formula",as:"textDisplay",expr:`'${a?.prefix??"$"}' + format(floor(datum.value), ',') + '${a?.suffix??""}' `}]}],scales:[{name:"mainColor",type:"ordinal",domain:this.categories,range:this.chartColors}],legends:[{fill:"mainColor",orient:"bottom",direction:"horizontal",columns:2,title:"",padding:10,symbolType:"square",symbolSize:100,labelFontSize:12,labelColor:"#6A6D7D",rowPadding:8}],marks:[{type:"rule",name:"labelLines",from:{data:"table"},encode:{enter:{stroke:{value:"black"},strokeWidth:{value:1},x:{signal:"centerX + (radius * 0.9) * cos(datum.midAngle)"},y:{signal:"centerY + (radius * 0.9) * sin(datum.midAngle)"},x2:{signal:"datum.labelX - 12 * cos(datum.midAngle)"},y2:{signal:"datum.labelY - 12 * sin(datum.midAngle)"}},update:{opacity:{value:1}}},zindex:5},{type:"arc",name:"mainArc",from:{data:"table"},encode:{enter:{fill:{scale:"mainColor",field:"category"},x:{signal:"centerX"},y:{signal:"centerY"},startAngle:{field:"startAngle"},endAngle:{field:"endAngle"},innerRadius:{signal:"radius * 0.5"},outerRadius:{signal:"radius * 0.9"},padAngle:{value:.03},cornerRadius:{value:1}}},interactive:!0},{type:"arc",name:"innerArc",from:{data:"table"},encode:{enter:{fill:{value:"transparent"},x:{signal:"centerX"},y:{signal:"centerY"},startAngle:{field:"startAngle"},endAngle:{field:"endAngle"},innerRadius:{signal:"radius * 0.4"},outerRadius:{signal:"radius * 0.5"},padAngle:{value:.03},cornerRadius:{value:1}}},zindex:1},{type:"arc",name:"outerArc",from:{data:"table"},encode:{enter:{fill:{value:"transparent"},x:{signal:"centerX"},y:{signal:"centerY"},startAngle:{field:"startAngle"},endAngle:{field:"endAngle"},innerRadius:{signal:"radius * 0.91"},outerRadius:{signal:"radius * 1.30"}}},zindex:1},{type:"text",name:"mainArcLabel",from:{data:"table"},encode:{enter:{text:{field:"percentLabel"},align:{value:"center"},baseline:{value:"middle"},fill:{value:"#302D3B"},fontSize:{value:10},x:{field:"labelX"},y:{field:"labelY"},font:{value:"apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif"},fontWeight:600}}},{type:"text",encode:{enter:{text:{value:"$850,000"},x:{signal:"centerX"},y:{signal:"centerY"},align:{value:"center"},baseline:{value:"middle"},fontSize:{value:16},fontWeight:{value:"bold"},fill:{value:"#302D3B"},font:{value:"apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif"}},update:{text:{signal:`hoveredValue ? '${a?.prefix??"$"}' + format(floor(hoveredValue), ',') + '${a?.suffix??""}' : '${a?.prefix??"$"}' + format(floor(${this.totalRevenue??1}), ',') + '${a?.suffix??""}'`}}}},{type:"text",encode:{enter:{x:{signal:"centerX"},y:{signal:"centerY + 15"},align:{value:"center"},baseline:{value:"middle"},fontSize:{value:10},fill:{value:"#6A6D7D"},font:{value:"apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif"},fontWeight:400,limit:{value:100},lineBreak:{value:"\\n"}},update:{text:{signal:"displayText"}}}}]}}render(){return a(t,{key:"fb26a6b02b83b0ce64a8301149b66f5d09a4a7b4"},a("div",{key:"fc08cdc3c0c0fda7f7c13149532eb61f511aa035",id:"container",style:{width:"100%",height:"100%"}}))}},[513,"apollo-data-donut-chart",{adData:[1,"ad-data"],adSpec:[1,"ad-spec"]}]),s=r,o=function(){"undefined"!=typeof customElements&&["apollo-data-donut-chart"].forEach((e=>{"apollo-data-donut-chart"===e&&(customElements.get(n(e))||customElements.define(n(e),r))}))};export{s as ApolloDataDonutChart,o as defineCustomElement}

package/dist/components/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 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;
+
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1 @@
+export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-Dws5s-Xe.js";function t(s,t,e){return(s||"")+(t?" "+t:"")+(e?" "+e:"")}export{t as format}