jojotaoo_components 0.0.1-beta.0

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

@@ -0,0 +1,116 @@
+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 },
+    };
+});
+function hexToRgba(hex, alpha) {
+    const h = hex.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}, ${alpha})`;
+}
+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: 'line',
+        name: dim,
+        encode: { x: 0, y: idx + 1 },
+        smooth: s.smooth,
+        symbol: s.symbol === 'none' ? 'none' : s.symbol,
+        symbolSize: s.symbol === 'none' ? 0 : s.symbolSize,
+        lineStyle: {
+            width: s.lineWidth,
+            ...(useColorList ? {} : { color: s.color }),
+        },
+        itemStyle: useColorList ? {} : {
+            color: s.color,
+        },
+        areaStyle: s.showArea
+            ? {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: hexToRgba(useColorList ? (s.colorList[idx % s.colorList.length] ?? s.color) : s.color, s.areaOpacityStart) },
+                    { offset: 1, color: hexToRgba(useColorList ? (s.colorList[idx % s.colorList.length] ?? s.color) : s.color, s.areaOpacityEnd) },
+                ]),
+            }
+            : undefined,
+        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: "line-chart" },
+    ...{ style: ({ backgroundColor: __VLS_ctx.containerBg }) },
+});
+/** @type {__VLS_StyleScopedClasses['line-chart']} */ ;
+// @ts-ignore
+[containerBg,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeProps: {},
+    props: {},
+});
+export default {};

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

@@ -0,0 +1,22 @@
+import type { ChartStyleConfig } from '../../types';
+type __VLS_Props = {
+    componentId?: string;
+    option?: Record<string, any>;
+    width?: number;
+    height?: number;
+    bgColor?: string;
+    chartStyle?: ChartStyleConfig;
+    geoKey?: string;
+};
+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;
+    geoKey: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=MapChart.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MapChart.vue.d.ts","sourceRoot":"","sources":["../../../src/components/charts/MapChart.vue"],"names":[],"mappings":"AA8tBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAMnD,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;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAC;AAgtBF,QAAA,MAAM,YAAY;aAntBN,MAAM;YADP,MAAM;YAFN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;gBAIf,gBAAgB;WAHrB,MAAM;iBAFA,MAAM;YAMX,MAAM;6EAotBf,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}