@lark-apaas/fullstack-vite-preset 1.0.1-alpha.0

package/src/module-alias/registry_echarts_theme.mjs

@@ -0,0 +1,390 @@
+import Color from 'colorjs.io';
+
+/**
+ * Get the value of a CSS variable and convert it to sRGB color space hex string
+ * @param varName CSS variable name
+ * @param element Optional element, defaults to document.body
+ * @returns sRGB color space hex string
+ */
+export function getCssVariable(varName, element = document.body) {
+  const value = window
+    .getComputedStyle(element)
+    .getPropertyValue(varName)
+    .trim();
+  if (!value) {
+    return '';
+  }
+  return new Color(value).to('srgb').toString({ format: 'hex' });
+}
+
+// Generate ECharts theme configuration
+export function generateEChartsTheme(element = document.body) {
+  // Get chart colors
+  const chartColors = [
+    getCssVariable('--chart-1', element),
+    getCssVariable('--chart-2', element),
+    getCssVariable('--chart-3', element),
+    getCssVariable('--chart-4', element),
+    getCssVariable('--chart-5', element),
+  ];
+
+  // Get other color variables
+  const background = getCssVariable('--background', element);
+  const foreground = getCssVariable('--foreground', element);
+  const muted = getCssVariable('--muted', element);
+  const mutedForeground = getCssVariable('--muted-foreground', element);
+  const border = getCssVariable('--border', element);
+  const primary = getCssVariable('--primary', element);
+
+  const fullTheme = {
+    color: chartColors,
+    backgroundColor: 'transparent',
+    textStyle: {
+      color: foreground,
+    },
+    title: {
+      textStyle: {
+        color: foreground,
+      },
+      subtextStyle: {
+        color: mutedForeground,
+      },
+    },
+    line: {
+      itemStyle: {
+        borderWidth: 1,
+      },
+      lineStyle: {
+        width: 2,
+      },
+      symbolSize: 4,
+      symbol: 'circle',
+      smooth: false,
+    },
+    radar: {
+      itemStyle: {
+        borderWidth: 1,
+      },
+      lineStyle: {
+        width: 2,
+      },
+      symbolSize: 4,
+      symbol: 'circle',
+      smooth: false,
+    },
+    bar: {
+      itemStyle: {
+        barBorderWidth: 0,
+        barBorderColor: border,
+      },
+    },
+    pie: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: border,
+      },
+    },
+    scatter: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: border,
+      },
+    },
+    boxplot: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: border,
+      },
+    },
+    parallel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: border,
+      },
+    },
+    sankey: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: border,
+      },
+    },
+    funnel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: border,
+      },
+    },
+    gauge: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: border,
+      },
+    },
+    candlestick: {
+      itemStyle: {
+        color: chartColors[0],
+        color0: chartColors[1],
+        borderColor: chartColors[0],
+        borderColor0: chartColors[1],
+        borderWidth: 1,
+      },
+    },
+    graph: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: border,
+      },
+      lineStyle: {
+        width: 1,
+        color: mutedForeground,
+      },
+      symbolSize: 4,
+      symbol: 'circle',
+      smooth: false,
+      color: chartColors,
+      label: {
+        color: foreground,
+      },
+    },
+    map: {
+      itemStyle: {
+        areaColor: muted,
+        borderColor: border,
+        borderWidth: 0.5,
+      },
+      label: {
+        color: foreground,
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: chartColors[0],
+          borderColor: chartColors[1],
+          borderWidth: 1,
+        },
+        label: {
+          color: foreground,
+        },
+      },
+    },
+    geo: {
+      itemStyle: {
+        areaColor: muted,
+        borderColor: border,
+        borderWidth: 0.5,
+      },
+      label: {
+        color: foreground,
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: chartColors[0],
+          borderColor: chartColors[1],
+          borderWidth: 1,
+        },
+        label: {
+          color: foreground,
+        },
+      },
+    },
+    categoryAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: border,
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: border,
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: mutedForeground,
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: [border],
+        },
+      },
+      splitArea: {
+        show: false,
+      },
+    },
+    valueAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: border,
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: border,
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: mutedForeground,
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: [border],
+        },
+      },
+      splitArea: {
+        show: false,
+      },
+    },
+    logAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: border,
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: border,
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: mutedForeground,
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: [border],
+        },
+      },
+      splitArea: {
+        show: false,
+      },
+    },
+    timeAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: border,
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: border,
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: mutedForeground,
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: [border],
+        },
+      },
+      splitArea: {
+        show: false,
+      },
+    },
+    toolbox: {
+      iconStyle: {
+        borderColor: mutedForeground,
+      },
+      emphasis: {
+        iconStyle: {
+          borderColor: primary,
+        },
+      },
+    },
+    legend: {
+      textStyle: {
+        color: foreground,
+      },
+    },
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: border,
+          width: 1,
+        },
+        crossStyle: {
+          color: border,
+          width: 1,
+        },
+      },
+    },
+    timeline: {
+      lineStyle: {
+        color: primary,
+        width: 1,
+      },
+      itemStyle: {
+        color: primary,
+        borderWidth: 1,
+      },
+      controlStyle: {
+        color: primary,
+        borderColor: primary,
+        borderWidth: 0.5,
+      },
+      checkpointStyle: {
+        color: chartColors[1],
+        borderColor: chartColors[1],
+      },
+      label: {
+        color: mutedForeground,
+      },
+      emphasis: {
+        itemStyle: {
+          color: chartColors[1],
+        },
+        controlStyle: {
+          color: primary,
+          borderColor: primary,
+          borderWidth: 0.5,
+        },
+        label: {
+          color: mutedForeground,
+        },
+      },
+    },
+    visualMap: {
+      color: [chartColors[0], chartColors[2]],
+    },
+    dataZoom: {
+      backgroundColor: background,
+      dataBackgroundColor: border,
+      fillerColor: `${chartColors[0]}40`, // 25% opacity
+      handleColor: primary,
+      handleSize: '100%',
+      textStyle: {
+        color: foreground,
+      },
+    },
+    markPoint: {
+      label: {
+        color: foreground,
+      },
+      emphasis: {
+        label: {
+          color: foreground,
+        },
+      },
+    },
+  };
+  return fullTheme;
+}
+
+// Get current theme's ECharts configuration
+export function getShadcnEChartsTheme() {
+  // body
+  return generateEChartsTheme(document.body);
+}