init dev-push code ui base design

2025-07-22 09:58:38 +07:00
parent ffdf5ccb66
commit eedbf94d56
214 changed files with 42170 additions and 28040 deletions
--- a/components/common/chartoptions/LineChart.js
+++ b/components/common/chartoptions/LineChart.js
@ -0,0 +1,78 @@
+
+export default function getLineChartOption({
+    xAxisData = [],
+    seriesData = [],
+    legendData = [],
+    isDarkMode = false,
+}) {
+
+    // const defaultColors = isDarkMode
+    //     ? ['#D32029', '#31B47B', '#D89614'] : ['#F5222D', '#31B47B', '#FAAD14'];
+
+    const defaultColors = isDarkMode
+        ? ['#31B47B', '#D89614', '#D32029'] : ['#31B47B', '#FAAD14', '#F5222D'];
+
+    const styledSeries = seriesData.map((item, index) => {
+        const color = item.color || defaultColors[index % defaultColors.length];
+        return {
+            ...item,
+            itemStyle: {
+                color,
+            },
+        };
+    });
+
+    return {
+        grid: {
+            left: '3%',
+            right: '5%',
+            top: '25%',
+            containLabel: true,
+        },
+
+        legend: {
+            data: legendData,
+            icon: 'circle',
+            top: '0%',
+            right: '5%',
+            orient: 'horizontal',
+            textStyle: {
+                color: isDarkMode ? '#676A7B' : '#676A7B',
+            },
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            splitLine: {
+                show: false,
+            },
+            data: xAxisData,
+            axisLine: {
+                lineStyle: {
+                    color: isDarkMode ? '#AAAAAA' : '#333333',
+                },
+            },
+            axisLabel: {
+                color: isDarkMode ? '#676A7B' : '#676A7B',
+            },
+        },
+        yAxis: {
+            type: 'value',
+            position: 'left',
+            axisLine: {
+                lineStyle: {
+                    color: isDarkMode ? '#AAAAAA' : '#333333',
+                },
+            },
+            axisLabel: {
+                color: isDarkMode ? '#676A7B' : '#676A7B',
+            },
+            splitLine: {
+                lineStyle: {
+                    color: isDarkMode ? '#444444' : '#EEEEEE',
+                },
+            },
+        },
+        series: styledSeries,
+    };
+}