fix: dashboard dark theme

Author: dolphin0618

src/frontend/platform/src/pages/Dashboard/components/AdvancedDatePicker.tsx

@@ -252,15 +252,16 @@ export function AdvancedDatePicker({
         <Button
           variant={"outline"}
           className={cn(
-            "w-92 flex-1 justify-start text-left font-normal dark:text-gray-200",
-            !value && "text-muted-foreground"
+            "w-92 flex-1 justify-start text-left font-normal",
+            value ? "text-prompt-description" : "text-muted-foreground",
+            isDark && "dark:text-gray-200"
           )}
         >
           <CalendarIcon className="mr-2 h-4 w-4" />
           {getDisplayValue() || placeholder}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className={cn("w-auto p-0", isDark && 'dark bg-gray-950 border-gray-600')} align="start">
+      <PopoverContent className={cn("w-auto p-0", isDark ? 'dark bg-gray-950 border-gray-600' : "theme-force-light")} align="start">
         <div className="no-drag flex flex-col">
 
           {/* Calendar Area */}

src/frontend/platform/src/pages/Dashboard/components/charts/BaseChart.tsx

@@ -2,10 +2,10 @@
 
 import { ChartType, ComponentConfig, ComponentStyleConfig } from '@/pages/Dashboard/types/dataConfig'
 import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { colorSchemes, convertToEChartsTheme } from '../../colorSchemes'
 import { ChartDataResponse } from '../../types/chartData'
 import { unitConversion } from './MetricCard'
-import { useTranslation } from 'react-i18next'
 
 // Dynamic loading of ECharts.
 const loadECharts = async () => {
@@ -264,7 +264,8 @@ const getCartesianChartOption = (
     },
     name: styleConfig.xAxisTitle || '',
     nameLocation: styleConfig.xAxisAlign === 'right' ? 'end' : styleConfig.xAxisAlign === 'left' ? 'start' : 'center',
-    nameTextStyle: xAxisTitleStyle
+    nameTextStyle: xAxisTitleStyle,
+    inverse: isHorizontal
   };
 
   // (Value Axis)
@@ -280,7 +281,7 @@ const getCartesianChartOption = (
     nameLocation: styleConfig.yAxisAlign === 'right' ? 'end' : styleConfig.yAxisAlign === 'left' ? 'start' : 'center',
     nameRotate: isHorizontal ? 0 : 90,
     nameTextStyle: yAxisTitleStyle,
-    boundaryGap: [0, '20%']
+    boundaryGap: [0, '20%'],
   };
 
   const lastValueIndexes = dimensions.map((_, dimIdx) => {
@@ -331,10 +332,14 @@ const getCartesianChartOption = (
         position: 'top',
         fontSize: 10,
         color: "#666",
+        formatter: (params: any) => unitConversion(params.value, dataConfig).join('')
       };
+      item.labelLayout = {
+        hideOverlap: true
+      }
     }
     if (isStacked) item.stack = 'total';
-    if (isArea) item.areaStyle = {opacity: 0.1};
+    if (isArea) item.areaStyle = { opacity: 0.1 };
     // if (isLineOrArea) item.smooth = true;
 
     return item;

src/frontend/platform/src/pages/Dashboard/components/editor/ComponentWrapper.tsx

@@ -17,6 +17,7 @@ interface ComponentWrapperProps {
     component: DashboardComponent
     isPreviewMode: boolean
     dashboards: Dashboard[]
+    /** When it is true, the dark selector can take effect, resolving the conflict between the system and canvas themes  */
     isDark: boolean
     onDuplicate: (component: DashboardComponent) => void
     onCopyTo: (component: DashboardComponent, targetDashboardId: string) => void
@@ -133,7 +134,7 @@ export function ComponentWrapper({
             id={component.id}
             className={cn(`relative w-full h-full rounded-md overflow-visible transition-all border ${!isPreviewMode && isSelected ? 'component-select border border-primary' : ''
                 }`,
-                !componentData.style_config.bgColor && 'dark:bg-gray-900',
+                !componentData.style_config.bgColor && isDark && 'dark:bg-gray-900',
                 !componentData.style_config.bgColor && 'bg-background',
                 !isPreviewMode && 'hover:border-primary hover:shadow-md'
             )}
@@ -259,8 +260,8 @@ export function ComponentWrapper({
                             />
                         ) : (
                             <h3
-                                className={cn("text-sm font-medium truncate",
-                                    "dark:text-gray-400"
+                                className={cn("text-sm font-medium truncate text-foreground",
+                                    isDark && "dark:text-gray-400"
                                 )}
                                 style={{ textAlign: componentData.style_config?.titleAlign }}
                                 onDoubleClick={() => setIsEditing(true)}>

src/frontend/platform/src/pages/Dashboard/components/editor/EditorCanvas.tsx

@@ -216,7 +216,7 @@ export function EditorCanvas({ isLoading, isPreviewMode }: EditorCanvasProps) {
 
     // loading
     if (isLoading || !currentDashboard) {
-        return <div className="w-full h-full flex justify-center items-center z-10 bg-[rgba(255,255,255,0.6)] dark:bg-blur-shared">
+        return <div className="w-full h-full flex justify-center items-center z-10">
             <LoadingIcon />
         </div>
     }
@@ -234,10 +234,7 @@ export function EditorCanvas({ isLoading, isPreviewMode }: EditorCanvasProps) {
             <div className="flex h-full">
                 <div
                     id="edit-charts-panne"
-                    className={cn("flex-1 relative overflow-auto no-scrollbar", theme)}
-                    style={{
-                        backgroundColor: theme === 'dark' ? '#1a1a1a' : '#f5f5f5',
-                    }}
+                    className={cn("flex-1 relative overflow-auto no-scrollbar", theme === 'dark' ? 'bg-[#1a1a1a] dark' : 'bg-[#f5f5f5] theme-force-light')}
                 >
                     <div
                         ref={containerRef}

src/frontend/platform/src/pages/Dashboard/components/editor/EditorHeader.tsx

@@ -216,7 +216,7 @@ export function EditorHeader({
                         {title}
                     </h1>
                 )}
-                <Badge variant="outline" className="break-keep font-normal bg-gray-100">{getSaveStatus()}</Badge>
+                <Badge variant="outline" className="break-keep font-normal bg-gray-100 dark:bg-black">{getSaveStatus()}</Badge>
             </div>
 
             {/* Middle section */}

src/frontend/platform/src/pages/Dashboard/components/editor/index.css

@@ -1,3 +1,80 @@
+.theme-force-light {
+    --background-login: #fff;
+    --text-color: rgba(17, 17, 17, 0.3);
+    --background-main: rgba(244, 245, 248, 1);
+    --background-main-content: rgba(255, 255, 255, 1);
+    --background-tip: white;
+    --background-tip-darkhover: #0055e3;
+    --background-prompt: hsla(0, 0%, 100%, 1);
+    --background-new: hsla(240, 14%, 99%, 1);
+    --nav-hover: white;
+    --header-icon: white;
+    --text-answer: #111;
+    --text-prompt: hsla(0, 0%, 18%, 1);
+    --search-input: hsla(220, 100%, 99%, 1);
+    --background: 0 0% 100%;
+    /* hsl(0 0% 100%) */
+    --foreground: 222.2 47.4% 11.2%;
+    /* hsl(222 47% 11%) */
+    --muted: 210 40% 98%;
+    /* hsl(210 40% 98%) */
+    --muted-foreground: 215.4 16.3% 46.9%;
+    /* hsl(215 16% 46%) */
+    --popover: 0 0% 100%;
+    /* hsl(0 0% 100%) */
+    --popover-foreground: 222.2 47.4% 11.2%;
+    /* hsl(222 47% 11%) */
+    --card: 0 0% 100%;
+    /* hsl(0 0% 100%) */
+    --card-foreground: 222.2 47.4% 11.2%;
+    --white: white;
+    /* hsl(222 47% 11%) */
+    --border: 214.3 21.8% 91.4%;
+    /* hsl(214 32% 91%) */
+    --input: 223 48% 44%;
+    /* hsl(214 32% 91%) */
+    --primary: 220 98% 45%;
+    /* hsl(222 27% 18%) */
+    --primary-foreground: 210 40% 98%;
+    /* hsl(210 40% 98%) */
+    --secondary: 210 40% 96.1%;
+    /* hsl(210 40% 96%) */
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    /* hsl(222 47% 11%) */
+    --accent: 210 30% 96.1%;
+    /* hsl(210 30% 96%) */
+    --accent-foreground: 222.2 47.4% 11.2%;
+    /* hsl(222 47% 11%) */
+    --destructive: 0 100% 50%;
+    /* hsl(0 100% 50%) */
+    --destructive-foreground: 210 40% 98%;
+    --black-button: 0 0% 7%;
+    /* hsl(215 20% 65%) */
+    --ring: 223, 48%, 44%, 0.35;
+    --radius: .58rem;
+    --round-btn-shadow: #00000063;
+    --error-background: #fef2f2;
+    --error-foreground: #991b1b;
+    --success-background: #f0fdf4;
+    --success-foreground: #14532d;
+    --info-background: #f0f4fd;
+    --info-foreground: #141653;
+    --high-indigo: #4338ca;
+    --medium-indigo: #6366f1;
+    --chat-bot-icon: #afe6ef;
+    --chat-user-icon: #aface9;
+    /* Colors that are shared in dark and light mode */
+    --blur-shared: #151923de;
+    --build-trigger: #dc735b;
+    --chat-trigger: #5c8be1;
+    --chat-trigger-disabled: #b4c3da;
+    --status-red: #ef4444;
+    --status-yellow: #eab308;
+    --status-green: #4ade80;
+    --status-blue: #2563eb;
+    --connection: #555;
+}
+
 .react-grid-item>.react-resizable-handle {
     width: 10px;
     height: 10px;