fix: some bugfix

Author: dolphin0618

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

@@ -61,6 +61,7 @@ export function BaseChart({ isDark, data, chartType, dataConfig, styleConfig }:
   }, [])
 
   // Initialize and update the chart.
+  const [screenFull, setScreenFull] = useState(false)
   useEffect(() => {
     if (!echartsLibRef.current || !domRef.current || isLoading) return
 
@@ -94,7 +95,7 @@ export function BaseChart({ isDark, data, chartType, dataConfig, styleConfig }:
         chartRef.current = null
       }
     }
-  }, [echartsLibRef.current, data, chartType, dataConfig, styleConfig, isLoading, isDark])
+  }, [screenFull, echartsLibRef.current, data, chartType, dataConfig, styleConfig, isLoading, isDark])
 
   // resize
   useEffect(() => {
@@ -119,6 +120,21 @@ export function BaseChart({ isDark, data, chartType, dataConfig, styleConfig }:
     }
   }, [chartRef.current])
 
+  // screen full
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setScreenFull(!screenFull)
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+      document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
+    };
+  }, []);
+
   if (isLoading) {
     return (
       <div className="w-full h-full flex items-center justify-center">
@@ -201,7 +217,7 @@ const getCartesianChartOption = (
   const isHorizontal = chartType.includes('horizontal');
   const isStacked = chartType.includes('stacked');
   const isLineOrArea = chartType.includes('line') || chartType.includes('area');
-  const isArea = chartType.includes('area') || chartType === 'stacked-line'; // Depending on logic
+  const isArea = chartType.includes('area')
 
   // Tooltip
   const tooltipFormatter = (params: any[]) => {
@@ -299,7 +315,8 @@ const getCartesianChartOption = (
       name: s.name,
       data: processedData,
       type: isLineOrArea ? 'line' : 'bar',
-      symbol: 'none',
+      symbol: 'circle',
+      symbolSize: 0,
       itemStyle: {
         borderRadius: (!isLineOrArea && !isStacked)
           ? (isHorizontal ? [0, 4, 4, 0] : [4, 4, 0, 0])
@@ -308,7 +325,12 @@ const getCartesianChartOption = (
     };
 
     if (styleConfig.showDataLabel) {
-      item.label = { show: true, position: isLineOrArea ? 'top' : 'inside' };
+      item.label = {
+        show: true,
+        position: 'top',
+        fontSize: 10,
+        color: "#666",
+      };
     }
     if (isStacked) item.stack = 'total';
     if (isArea) item.areaStyle = {};
@@ -407,11 +429,12 @@ const buildLegendOption = (styleConfig: ComponentStyleConfig, seriesNames?: stri
 const buildTooltipOption = (type: 'axis' | 'item', formatter: (params: any) => string) => {
   return {
     trigger: type,
-    axisPointer: type === 'axis' ? { type: 'shadow' } : undefined,
-    appendToBody: true,
     confine: true,
+    axisPointer: type === 'axis' ? { type: 'shadow' } : undefined,
     enterable: true,
     extraCssText: 'max-height: 500px; overflow-y: auto;',
-    formatter,
+    appendToBody: !document.fullscreenElement,
+    // renderMode: 'html',
+    formatter
   };
 };

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

@@ -64,7 +64,7 @@ const ComponentPicker = ({ children, className, onSelect, maxHeight = 500 }: Com
     const [open, setOpen] = useState(false);
 
     const handleItemClick = (item) => {
-        onSelect({ ...item, title: t(`chart.${item.label}`) });
+        onSelect({ ...item, title: item.type === ChartType.Metric ? '' : t(`chart.${item.label}`) });
         setOpen(false);
     };
 

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

@@ -83,7 +83,7 @@ export function ComponentWrapper({
 
         if (trimmedTitle !== component.title) {
             setTitle(trimmedTitle)
-            onRename(component.id, trimmedTitle)
+            // onRename(component.id, trimmedTitle)
             updateEditingComponent({ title: trimmedTitle })
         }
     }
@@ -130,6 +130,7 @@ export function ComponentWrapper({
 
     return (
         <div
+            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',

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

@@ -113,7 +113,9 @@ export function EditorCanvas({ isLoading, isPreviewMode }: EditorCanvasProps) {
             const isInsideContainer = containerRef.current?.contains(target);
             const isDragHandle = target.closest('.drag-handle');
             if (isInsideContainer && !isDragHandle) {
-                clearComponentEditorStore();
+                setTimeout(() => {
+                    clearComponentEditorStore();
+                }, 0);
             }
         };
 
@@ -232,7 +234,7 @@ export function EditorCanvas({ isLoading, isPreviewMode }: EditorCanvasProps) {
             <div className="flex h-full">
                 <div
                     id="edit-charts-panne"
-                    className={cn("flex-1 overflow-auto no-scrollbar", theme)}
+                    className={cn("flex-1 relative overflow-auto no-scrollbar", theme)}
                     style={{
                         backgroundColor: theme === 'dark' ? '#1a1a1a' : '#f5f5f5',
                     }}