jojotaoo_components 0.0.1-beta.0

package/dist/components/charts/BackgroundCard.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    componentId?: string;
+    option?: Record<string, any>;
+    width?: number;
+    height?: number;
+    bgProps?: Record<string, any>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    height: number;
+    option: Record<string, any>;
+    width: number;
+    componentId: string;
+    bgProps: Record<string, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=BackgroundCard.vue.d.ts.map

package/dist/components/charts/BackgroundCard.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundCard.vue.d.ts","sourceRoot":"","sources":["../../../src/components/charts/BackgroundCard.vue"],"names":[],"mappings":"AAgJA,KAAK,WAAW,GAAG;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAC9B,CAAC;AA0KF,QAAA,MAAM,YAAY;YA5KP,MAAM;YAFN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WACpB,MAAM;iBAFA,MAAM;aAIV,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;6EA8K7B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/charts/BackgroundCard.vue.js

@@ -0,0 +1,140 @@
+import { computed } from 'vue';
+const props = withDefaults(defineProps(), {
+    componentId: '',
+    option: () => ({}),
+    width: 900,
+    height: 900,
+    bgProps: () => ({}),
+});
+const bp = computed(() => props.bgProps ?? {});
+const cardWidth = computed(() => bp.value.cardWidth ?? 900);
+const cardHeight = computed(() => bp.value.cardHeight ?? 900);
+const cardBgColor = computed(() => bp.value.cardBgColor ?? '#ffffff');
+const cardBorderRadius = computed(() => bp.value.cardBorderRadius ?? 16);
+const cardBorderColor = computed(() => bp.value.cardBorderColor ?? '#e8ecf1');
+const cardBorderWidth = computed(() => bp.value.cardBorderWidth ?? 1);
+const cardShadow = computed(() => bp.value.cardShadow ?? '0 2px 12px rgba(0,0,0,0.06)');
+const cardPadding = computed(() => bp.value.cardPadding ?? '40px 48px');
+const titleText = computed(() => bp.value.titleText ?? '标题');
+const titleFontSize = computed(() => bp.value.titleFontSize ?? 32);
+const titleFontWeight = computed(() => bp.value.titleFontWeight ?? 600);
+const titleColor = computed(() => bp.value.titleColor ?? '#1d2a3a');
+const titleLineHeight = computed(() => bp.value.titleLineHeight ?? 1.3);
+const showDecorator = computed(() => bp.value.showDecorator ?? true);
+const decoratorColor = computed(() => bp.value.decoratorColor ?? '#e34d59');
+const decoratorWidth = computed(() => bp.value.decoratorWidth ?? 6);
+const decoratorHeight = computed(() => bp.value.decoratorHeight ?? 32);
+const decoratorRadius = computed(() => bp.value.decoratorRadius ?? 3);
+const showSubtitle = computed(() => bp.value.showSubtitle ?? false);
+const subText = computed(() => bp.value.subText ?? '');
+const subFontSize = computed(() => bp.value.subFontSize ?? 16);
+const subColor = computed(() => bp.value.subColor ?? '#8c9aa8');
+const subMarginTop = computed(() => bp.value.subMarginTop ?? 8);
+const subPaddingLeft = computed(() => bp.value.subPaddingLeft ?? 20);
+const cardStyle = computed(() => ({
+    width: '100%',
+    height: '100%',
+    minWidth: '200px',
+    minHeight: '150px',
+    backgroundColor: cardBgColor.value,
+    borderRadius: `${cardBorderRadius.value}px`,
+    border: `${cardBorderWidth.value}px solid ${cardBorderColor.value}`,
+    boxShadow: cardShadow.value,
+    padding: cardPadding.value,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    boxSizing: 'border-box',
+}));
+const titleStyle = computed(() => ({
+    fontSize: `${titleFontSize.value}px`,
+    fontWeight: titleFontWeight.value,
+    color: titleColor.value,
+    display: 'flex',
+    alignItems: 'center',
+    gap: '14px',
+    lineHeight: titleLineHeight.value,
+}));
+const decoratorStyle = computed(() => ({
+    content: '""',
+    display: 'inline-block',
+    width: `${decoratorWidth.value}px`,
+    height: `${decoratorHeight.value}px`,
+    backgroundColor: decoratorColor.value,
+    borderRadius: `${decoratorRadius.value}px`,
+    flexShrink: 0,
+}));
+const subStyle = computed(() => ({
+    fontSize: `${subFontSize.value}px`,
+    color: subColor.value,
+    marginTop: `${subMarginTop.value}px`,
+    paddingLeft: `${subPaddingLeft.value}px`,
+}));
+const contentStyle = computed(() => ({
+    flex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: '#d0d5dd',
+    fontSize: '18px',
+    letterSpacing: '1px',
+    userSelect: 'none',
+}));
+const __VLS_defaults = {
+    componentId: '',
+    option: () => ({}),
+    width: 900,
+    height: 900,
+    bgProps: () => ({}),
+};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "bg-card" },
+    ...{ style: (__VLS_ctx.cardStyle) },
+});
+/** @type {__VLS_StyleScopedClasses['bg-card']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "title-area" },
+});
+/** @type {__VLS_StyleScopedClasses['title-area']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "page-title" },
+    ...{ style: (__VLS_ctx.titleStyle) },
+});
+/** @type {__VLS_StyleScopedClasses['page-title']} */ ;
+if (__VLS_ctx.showDecorator) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        ...{ class: "decorator" },
+        ...{ style: (__VLS_ctx.decoratorStyle) },
+    });
+    /** @type {__VLS_StyleScopedClasses['decorator']} */ ;
+}
+(__VLS_ctx.titleText);
+if (__VLS_ctx.showSubtitle) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ class: "page-sub" },
+        ...{ style: (__VLS_ctx.subStyle) },
+    });
+    /** @type {__VLS_StyleScopedClasses['page-sub']} */ ;
+    (__VLS_ctx.subText);
+}
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "content-area" },
+    ...{ style: (__VLS_ctx.contentStyle) },
+});
+/** @type {__VLS_StyleScopedClasses['content-area']} */ ;
+// @ts-ignore
+[cardStyle, titleStyle, showDecorator, decoratorStyle, titleText, showSubtitle, subStyle, subText, contentStyle,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeProps: {},
+    props: {},
+});
+export default {};

package/dist/components/charts/BarChart.vue.d.ts

@@ -0,0 +1,20 @@
+import type { ChartStyleConfig } from '../../types';
+type __VLS_Props = {
+    componentId?: string;
+    option?: Record<string, any>;
+    width?: number;
+    height?: number;
+    bgColor?: string;
+    chartStyle?: ChartStyleConfig;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    bgColor: string;
+    height: number;
+    option: Record<string, any>;
+    chartStyle: ChartStyleConfig;
+    width: number;
+    componentId: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=BarChart.vue.d.ts.map

package/dist/components/charts/BarChart.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.vue.d.ts","sourceRoot":"","sources":["../../../src/components/charts/BarChart.vue"],"names":[],"mappings":"AAoHA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAGnD,KAAK,WAAW,GAAG;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,gBAAgB,CAAA;CAC9B,CAAC;AAwHF,QAAA,MAAM,YAAY;aA1HN,MAAM;YADP,MAAM;YAFN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;gBAIf,gBAAgB;WAHrB,MAAM;iBAFA,MAAM;6EAiIpB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/charts/BarChart.vue.js

@@ -0,0 +1,109 @@
+import { computed, toRef } from 'vue';
+import * as echarts from 'echarts';
+import { useECharts } from '../../composables/useECharts';
+import { useInteractFilter } from '../../composables/useInteractFilter';
+import { DEFAULT_CHART_STYLE } from '../../types';
+const props = withDefaults(defineProps(), {
+    componentId: '',
+    option: () => ({}),
+    width: 400,
+    height: 300,
+    bgColor: '#1e1e2e',
+    chartStyle: undefined,
+});
+const optionRef = toRef(props, 'option');
+const widthRef = toRef(props, 'width');
+const heightRef = toRef(props, 'height');
+const chartStyleRef = computed(() => props.chartStyle ?? DEFAULT_CHART_STYLE);
+const componentIdRef = toRef(props, 'componentId');
+const dimensions = computed(() => optionRef.value.dataset?.dimensions ?? []);
+const source = computed(() => optionRef.value.dataset?.source ?? []);
+const { filteredSource } = useInteractFilter(componentIdRef, dimensions, source);
+const filteredOption = computed(() => {
+    const ds = optionRef.value.dataset;
+    if (!ds)
+        return optionRef.value;
+    return {
+        ...optionRef.value,
+        dataset: { ...ds, source: filteredSource.value },
+    };
+});
+const seriesOption = computed(() => {
+    const s = chartStyleRef.value.series;
+    const dims = optionRef.value.dataset?.dimensions ?? [];
+    const useColorList = s.colorList.length > 0;
+    return dims.slice(1).map((dim, idx) => ({
+        type: 'bar',
+        name: dim,
+        encode: { x: 0, y: idx + 1 },
+        barWidth: s.barWidth,
+        barGap: s.barGap,
+        barCategoryGap: s.barCategoryGap,
+        itemStyle: {
+            borderRadius: [s.barBorderRadius, s.barBorderRadius, 0, 0],
+            ...(s.barColorByData && useColorList
+                ? {
+                    color: (params) => s.colorList[params.dataIndex % s.colorList.length],
+                }
+                : useColorList
+                    ? {}
+                    : {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            { offset: 0, color: s.color },
+                            { offset: 1, color: s.colorEnd },
+                        ]),
+                    }),
+        },
+        label: s.showLabel
+            ? {
+                show: true,
+                position: 'top',
+                color: s.labelColor,
+                fontSize: s.labelFontSize,
+                formatter: (p) => (p.data?.[idx + 1] ?? p.value),
+            }
+            : { show: false },
+    }));
+});
+const containerBg = computed(() => {
+    const cs = chartStyleRef.value;
+    if (cs.backgroundOpacity < 1 && cs.backgroundColor !== 'transparent') {
+        const h = cs.backgroundColor.replace('#', '');
+        const r = parseInt(h.substring(0, 2), 16);
+        const g = parseInt(h.substring(2, 4), 16);
+        const b = parseInt(h.substring(4, 6), 16);
+        return `rgba(${r}, ${g}, ${b}, ${cs.backgroundOpacity})`;
+    }
+    return props.bgColor || cs.backgroundColor;
+});
+const { chartRef } = useECharts(filteredOption, widthRef, heightRef, chartStyleRef, seriesOption);
+const __VLS_defaults = {
+    componentId: '',
+    option: () => ({}),
+    width: 400,
+    height: 300,
+    bgColor: '#1e1e2e',
+    chartStyle: undefined,
+};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ref: "chartRef",
+    ...{ class: "bar-chart" },
+    ...{ style: ({ backgroundColor: __VLS_ctx.containerBg }) },
+});
+/** @type {__VLS_StyleScopedClasses['bar-chart']} */ ;
+// @ts-ignore
+[containerBg,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeProps: {},
+    props: {},
+});
+export default {};

package/dist/components/charts/CustomLegend.vue.d.ts

@@ -0,0 +1,28 @@
+type __VLS_Props = {
+    data: Array<{
+        name: string;
+        value?: number | string;
+        percent?: string;
+    }>;
+    colorList: string[];
+    chartInstance: any;
+    icon?: 'circle' | 'rect' | 'roundRect' | 'triangle' | 'diamond';
+    fontSize?: number;
+    textColor?: string;
+    gridColumns?: number;
+    itemGap?: number;
+    position?: 'bottom' | 'left' | 'right' | 'top' | 'bottom-flow';
+    unit?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    fontSize: number;
+    textColor: string;
+    itemGap: number;
+    icon: "circle" | "rect" | "roundRect" | "triangle" | "diamond";
+    gridColumns: number;
+    unit: string;
+    position: "bottom" | "left" | "right" | "top" | "bottom-flow";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=CustomLegend.vue.d.ts.map

package/dist/components/charts/CustomLegend.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomLegend.vue.d.ts","sourceRoot":"","sources":["../../../src/components/charts/CustomLegend.vue"],"names":[],"mappings":"AAsOA,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACxE,SAAS,EAAE,MAAM,EAAE,CAAA;IACnB,aAAa,EAAE,GAAG,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAA;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,aAAa,CAAA;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAC;AAuOF,QAAA,MAAM,YAAY;cA7OL,MAAM;eACL,MAAM;aAER,MAAM;UAJT,QAAQ,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS;iBAGjD,MAAM;UAGb,MAAM;cADF,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,aAAa;6EA4O9D,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/charts/CustomLegend.vue.js

@@ -0,0 +1,198 @@
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+const props = withDefaults(defineProps(), {
+    icon: 'circle',
+    fontSize: 11,
+    textColor: '#cdd6f4',
+    gridColumns: 3,
+    itemGap: 8,
+    position: 'bottom',
+    unit: '',
+});
+const hoveredName = ref(null);
+const items = computed(() => props.data.map((d, i) => ({
+    name: d.name,
+    color: props.colorList[i % props.colorList.length] || '#89b4fa',
+    value: d.value ?? '',
+    percent: d.percent ?? '',
+})));
+const legendStyle = computed(() => {
+    const style = {
+        display: 'grid',
+        gridTemplateColumns: `repeat(${props.gridColumns}, 1fr)`,
+        gap: `${props.itemGap}px`,
+    };
+    if (props.position === 'bottom') {
+        style.position = 'absolute';
+        style.bottom = '8px';
+        style.left = '16px';
+        style.right = '16px';
+        style.zIndex = '10';
+    }
+    else if (props.position === 'top') {
+        style.position = 'absolute';
+        style.top = '8px';
+        style.left = '16px';
+        style.right = '16px';
+        style.zIndex = '10';
+    }
+    else if (props.position === 'left') {
+        style.position = 'absolute';
+        style.top = '50%';
+        style.left = '8px';
+        style.transform = 'translateY(-50%)';
+        style.gridTemplateColumns = '1fr';
+        style.zIndex = '10';
+    }
+    else if (props.position === 'right') {
+        style.position = 'absolute';
+        style.top = '50%';
+        style.right = '8px';
+        style.transform = 'translateY(-50%)';
+        style.gridTemplateColumns = '1fr';
+        style.zIndex = '10';
+    }
+    else if (props.position === 'bottom-flow') {
+        style.padding = '8px 16px';
+    }
+    return style;
+});
+function setSeriesDataOpacity(targetName) {
+    if (!props.chartInstance)
+        return;
+    const opt = props.chartInstance.getOption();
+    if (!opt.series?.[0]?.data)
+        return;
+    const newData = opt.series[0].data.map((d) => ({
+        name: d.name,
+        value: d.value,
+        itemStyle: {
+            ...(d.itemStyle || {}),
+            opacity: targetName !== null ? (d.name === targetName ? 1 : 0.3) : 1,
+        },
+    }));
+    props.chartInstance.setOption({ series: [{ data: newData }] });
+}
+function onLegendEnter(name) {
+    hoveredName.value = name;
+    setSeriesDataOpacity(name);
+}
+function onLegendLeave() {
+    hoveredName.value = null;
+    setSeriesDataOpacity(null);
+}
+function onChartMouseOver(params) {
+    if (params?.componentType === 'series' && params?.seriesType === 'pie') {
+        hoveredName.value = params.name;
+    }
+}
+function onChartMouseOut(params) {
+    if (params?.componentType === 'series' && params?.seriesType === 'pie') {
+        hoveredName.value = null;
+    }
+}
+function bindEvents() {
+    if (!props.chartInstance)
+        return;
+    props.chartInstance.on('mouseover', onChartMouseOver);
+    props.chartInstance.on('mouseout', onChartMouseOut);
+}
+function unbindEvents() {
+    if (!props.chartInstance)
+        return;
+    props.chartInstance.off('mouseover', onChartMouseOver);
+    props.chartInstance.off('mouseout', onChartMouseOut);
+}
+watch(() => props.chartInstance, (inst) => {
+    unbindEvents();
+    if (inst)
+        bindEvents();
+});
+onMounted(() => {
+    bindEvents();
+});
+onUnmounted(() => {
+    unbindEvents();
+});
+const __VLS_defaults = {
+    icon: 'circle',
+    fontSize: 11,
+    textColor: '#cdd6f4',
+    gridColumns: 3,
+    itemGap: 8,
+    position: 'bottom',
+    unit: '',
+};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+/** @type {__VLS_StyleScopedClasses['legend-item']} */ ;
+/** @type {__VLS_StyleScopedClasses['legend-item']} */ ;
+/** @type {__VLS_StyleScopedClasses['legend-icon']} */ ;
+/** @type {__VLS_StyleScopedClasses['legend-icon']} */ ;
+/** @type {__VLS_StyleScopedClasses['legend-icon']} */ ;
+/** @type {__VLS_StyleScopedClasses['legend-icon']} */ ;
+/** @type {__VLS_StyleScopedClasses['legend-icon']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "custom-legend" },
+    ...{ style: (__VLS_ctx.legendStyle) },
+});
+/** @type {__VLS_StyleScopedClasses['custom-legend']} */ ;
+for (const [item] of __VLS_vFor((__VLS_ctx.items))) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ onMouseenter: (...[$event]) => {
+                return __VLS_ctx.onLegendEnter(item.name);
+                // @ts-ignore
+                [legendStyle, items, onLegendEnter,];
+            } },
+        ...{ onMouseleave: (__VLS_ctx.onLegendLeave) },
+        key: (item.name),
+        ...{ class: "legend-item" },
+        ...{ class: ({ inactive: __VLS_ctx.hoveredName !== null && __VLS_ctx.hoveredName !== item.name }) },
+    });
+    /** @type {__VLS_StyleScopedClasses['legend-item']} */ ;
+    /** @type {__VLS_StyleScopedClasses['inactive']} */ ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ class: "legend-left" },
+    });
+    /** @type {__VLS_StyleScopedClasses['legend-left']} */ ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        ...{ class: "legend-icon" },
+        ...{ class: (`icon-${__VLS_ctx.icon}`) },
+        ...{ style: ({ backgroundColor: item.color }) },
+    });
+    /** @type {__VLS_StyleScopedClasses['legend-icon']} */ ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        ...{ class: "legend-text" },
+        ...{ style: ({ fontSize: `${__VLS_ctx.fontSize}px`, color: __VLS_ctx.textColor }) },
+    });
+    /** @type {__VLS_StyleScopedClasses['legend-text']} */ ;
+    (item.name);
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ class: "legend-right" },
+        ...{ style: ({ fontSize: `${__VLS_ctx.fontSize}px`, color: __VLS_ctx.textColor }) },
+    });
+    /** @type {__VLS_StyleScopedClasses['legend-right']} */ ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({});
+    (item.value);
+    (__VLS_ctx.unit);
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        ...{ class: "legend-percent" },
+    });
+    /** @type {__VLS_StyleScopedClasses['legend-percent']} */ ;
+    (item.percent);
+    // @ts-ignore
+    [onLegendLeave, hoveredName, hoveredName, icon, fontSize, fontSize, textColor, textColor, unit,];
+}
+// @ts-ignore
+[];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeProps: {},
+    props: {},
+});
+export default {};

package/dist/components/charts/DataFetchManager.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    componentId: string;
+    mode?: 'design' | 'preview';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    mode: "design" | "preview";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=DataFetchManager.vue.d.ts.map

package/dist/components/charts/DataFetchManager.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataFetchManager.vue.d.ts","sourceRoot":"","sources":["../../../src/components/charts/DataFetchManager.vue"],"names":[],"mappings":"AAqIA,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;CAC5B,CAAC;AAoIF,QAAA,MAAM,YAAY;UArIT,QAAQ,GAAG,SAAS;6EAwI3B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/charts/DataFetchManager.vue.js

@@ -0,0 +1,127 @@
+import { computed, onMounted, onUnmounted, watch } from 'vue';
+import { useDashboardStore } from '../../stores/dashboard';
+import { mergeRequestConfig, executeRequest, doFetch, getPondCache, setPondCache, clearPondCache } from '../../composables/useRequestMerge';
+const props = withDefaults(defineProps(), {
+    mode: 'design',
+});
+const store = useDashboardStore();
+const comp = computed(() => store.findComponent(props.componentId));
+const request = computed(() => comp.value?.request);
+const globalConfig = computed(() => store.requestGlobalConfig);
+const interactOverrides = computed(() => comp.value?.interactOverrides);
+let pollingTimer = null;
+let fetchSeq = 0;
+function getRequestSource() {
+    const config = request.value;
+    if (!config)
+        return null;
+    if (config.requestDataType === 1)
+        return config;
+    if (config.requestDataType === 2 && config.requestDataPondId) {
+        const pond = globalConfig.value.requestDataPond.find(p => p.dataPondId === config.requestDataPondId);
+        return pond?.dataPondRequestConfig ?? null;
+    }
+    return null;
+}
+function getPondId() {
+    return request.value?.requestDataType === 2 ? (request.value.requestDataPondId ?? null) : null;
+}
+async function fetchData(isPolling = false, forceFresh = false) {
+    const config = request.value;
+    if (!config || config.requestDataType === 0)
+        return;
+    const source = getRequestSource();
+    if (!source || source.requestDataType === 0)
+        return;
+    try {
+        const pondId = getPondId();
+        let result = null;
+        if (pondId) {
+            if (isPolling || forceFresh)
+                clearPondCache(pondId);
+            const cached = getPondCache(pondId);
+            if (cached !== undefined && !forceFresh) {
+                result = cached;
+            }
+            else {
+                const merged = mergeRequestConfig(source, globalConfig.value, interactOverrides.value);
+                if (merged) {
+                    result = await doFetch(merged);
+                    setPondCache(pondId, result);
+                }
+            }
+        }
+        else {
+            result = await executeRequest(source, globalConfig.value, interactOverrides.value);
+        }
+        if (result !== null) {
+            store.updateComponentOption(props.componentId, 'dataset', result);
+        }
+    }
+    catch (err) {
+        console.error('[DataFetch] Request failed:', err);
+    }
+}
+function startPolling() {
+    stopPolling();
+    const config = request.value;
+    if (!config || config.requestDataType === 0)
+        return;
+    const source = getRequestSource();
+    if (!source)
+        return;
+    const interval = source.requestInterval ?? globalConfig.value.requestInterval;
+    const unit = source.requestIntervalUnit ?? globalConfig.value.requestIntervalUnit ?? 'second';
+    if (!interval)
+        return;
+    const ms = toMilliseconds(interval, unit);
+    pollingTimer = setInterval(() => fetchData(true), ms);
+}
+function stopPolling() {
+    if (pollingTimer) {
+        clearInterval(pollingTimer);
+        pollingTimer = null;
+    }
+}
+function toMilliseconds(interval, unit) {
+    const map = {
+        second: 1000,
+        minute: 60 * 1000,
+        hour: 3600 * 1000,
+        day: 86400 * 1000,
+    };
+    return interval * (map[unit] ?? 1000);
+}
+async function handleConfigChange() {
+    stopPolling();
+    if (props.mode === 'preview' && request.value && request.value.requestDataType !== 0) {
+        const seq = ++fetchSeq;
+        await fetchData(false, true);
+        if (seq !== fetchSeq)
+            return;
+        startPolling();
+    }
+}
+if (props.mode === 'preview') {
+    onMounted(handleConfigChange);
+    watch(request, handleConfigChange, { deep: true });
+    watch(globalConfig, handleConfigChange, { deep: true });
+    watch(interactOverrides, handleConfigChange, { deep: true });
+}
+onUnmounted(stopPolling);
+const __VLS_defaults = {
+    mode: 'design',
+};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeProps: {},
+    props: {},
+});
+export default {};