@agions/taroviz 1.3.1 → 1.6.0

package/src/hooks/__tests__/useDataTransform.test.ts

@@ -0,0 +1,159 @@
+/**
+ * @version v1.5.0
+ */
+
+import { renderHook } from '@testing-library/react';
+import { useDataTransform, useTableTransform, useTimeSeriesTransform } from '../useDataTransform';
+
+describe('useDataTransform', () => {
+  describe('useDataTransform - line/bar chart', () => {
+    it('transforms simple line chart data', () => {
+      const { result } = renderHook(() =>
+        useDataTransform({
+          data: {
+            categories: ['周一', '周二', '周三'],
+            series: [
+              { name: '销量', value: 120 },
+              { name: '销量', value: 200 },
+              { name: '销量', value: 150 },
+            ],
+          },
+          chartType: 'line',
+          mapping: { xField: 'name', yField: 'value' },
+        })
+      );
+
+      expect(result.current.xAxis).toBeTruthy();
+      expect(result.current.series).toBeTruthy();
+    });
+
+    it('transforms bar chart data with series', () => {
+      const { result } = renderHook(() =>
+        useDataTransform({
+          data: {
+            categories: ['周一', '周二', '周三'],
+            series: [
+              { name: 'A', value: 100 },
+              { name: 'A', value: 200 },
+              { name: 'A', value: 150 },
+            ],
+          },
+          chartType: 'bar',
+          mapping: { xField: 'name', yField: 'value', seriesField: 'name' },
+        })
+      );
+
+      // All data points have name='A', so they should be grouped into 1 series
+      expect(result.current.series).toHaveLength(1);
+      const series = result.current.series as unknown as Array<{ data: unknown[] }>;
+      expect(series[0].data).toHaveLength(3);
+    });
+  });
+
+  describe('useDataTransform - pie chart', () => {
+    it('transforms pie chart data', () => {
+      const { result } = renderHook(() =>
+        useDataTransform({
+          data: {
+            series: [
+              { name: '直接访问', value: 335 },
+              { name: '邮件营销', value: 310 },
+            ],
+          },
+          chartType: 'pie',
+          mapping: { nameField: 'name', valueField: 'value' },
+        })
+      );
+
+      expect(result.current.series).toBeTruthy();
+      const series = result.current.series as unknown as Array<{ data: unknown[] }>;
+      expect(series[0].data).toHaveLength(2);
+    });
+  });
+
+  describe('useDataTransform - scatter chart', () => {
+    it('transforms scatter chart data', () => {
+      const { result } = renderHook(() =>
+        useDataTransform({
+          data: {
+            series: [
+              { x: 10, y: 20, size: 5 },
+              { x: 30, y: 40, size: 10 },
+            ],
+          },
+          chartType: 'scatter',
+          mapping: { xField: 'x', yField: 'y', sizeField: 'size' },
+        })
+      );
+
+      expect(result.current.series).toBeTruthy();
+    });
+  });
+
+  describe('useTableTransform', () => {
+    it('transforms table data to bar chart config', () => {
+      const { result } = renderHook(() =>
+        useTableTransform({
+          data: [
+            { month: '一月', sales: 1200, profit: 300 },
+            { month: '二月', sales: 2000, profit: 500 },
+          ],
+          columns: [
+            { field: 'month', label: '月份' },
+            { field: 'sales', label: '销量' },
+          ],
+        })
+      );
+
+      expect(result.current.xAxis).toBeTruthy();
+      expect(result.current.series).toBeTruthy();
+    });
+
+    it('handles empty data', () => {
+      const { result } = renderHook(() =>
+        useTableTransform({
+          data: [],
+        })
+      );
+
+      expect(result.current).toEqual({});
+    });
+  });
+
+  describe('useTimeSeriesTransform', () => {
+    it('transforms time series data', () => {
+      const { result } = renderHook(() =>
+        useTimeSeriesTransform({
+          data: [
+            { date: '2024-01-01', value: 100 },
+            { date: '2024-01-02', value: 200 },
+            { date: '2024-01-03', value: 150 },
+          ],
+          dateField: 'date',
+          valueField: 'value',
+          period: 'day',
+        })
+      );
+
+      expect(result.current.xAxis).toBeTruthy();
+      expect(result.current.series).toBeTruthy();
+    });
+
+    it('handles grouped time series', () => {
+      const { result } = renderHook(() =>
+        useTimeSeriesTransform({
+          data: [
+            { date: '2024-01-01', value: 100, category: 'A' },
+            { date: '2024-01-01', value: 150, category: 'B' },
+          ],
+          dateField: 'date',
+          valueField: 'value',
+          groupField: 'category',
+          period: 'day',
+        })
+      );
+
+      expect(result.current.series).toHaveLength(2);
+    });
+  });
+});

package/src/hooks/index.ts

@@ -4,6 +4,7 @@
  */
 import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import { getAdapter } from '../adapters';
+import { getThemeByName } from '../themes';
 import type { EChartsOption } from 'echarts';
 
 // ============================================================================
@@ -94,14 +95,18 @@ export function useChart(
       return;
     }
 
-    try {
-      const adapter = getAdapter(configRef.current || {});
-      const chartInstance = adapter as unknown as ChartInstance;
-      setInstance(chartInstance);
-      setInitialized(true);
-    } catch (error) {
-      console.error('Failed to initialize chart:', error);
-    }
+    const initAdapter = async () => {
+      try {
+        const adapter = await getAdapter(configRef.current || {});
+        const chartInstance = adapter as unknown as ChartInstance;
+        setInstance(chartInstance);
+        setInitialized(true);
+      } catch (error) {
+        console.error('Failed to initialize chart:', error);
+      }
+    };
+
+    initAdapter();
 
     return () => {
       if (instance) {
@@ -294,9 +299,9 @@ export function useLoading(
 export function useChartTheme(theme: string | Record<string, unknown>, darkMode = false) {
   return useMemo(() => {
     if (typeof theme === 'string') {
-      // 如果是字符串，尝试获取内置主题
+      // 如果是字符串，尝试获取内置主题配置
       try {
-        const builtinTheme = getTheme(theme);
+        const builtinTheme = getThemeByName(theme);
         return builtinTheme || (darkMode ? 'dark' : theme);
       } catch {
         return darkMode ? 'dark' : theme;
@@ -410,7 +415,7 @@ export function useDataPolling<T>(
   const [data, setData] = useState<T | null>(null);
   const [loading, setLoading] = useState(autoStart);
   const [error, setError] = useState<Error | null>(null);
-  
+
   // 用于取消进行中的请求
   const abortRef = useRef<{ cancelled: boolean }>({ cancelled: false });
 
@@ -420,12 +425,12 @@ export function useDataPolling<T>(
     // 创建新的取消标记
     abortRef.current = { cancelled: false };
     const currentAbort = abortRef.current;
-    
+
     let retries = retryCount;
     setLoading(true);
     setError(null);
 
-    while (retries >= 0 && !currentAbort.cancelled) {
+    while (retries > 0 && !currentAbort.cancelled) {
       try {
         const result = await fetchFn();
         if (!currentAbort.cancelled) {
@@ -435,16 +440,40 @@ export function useDataPolling<T>(
         return;
       } catch (e) {
         retries--;
-        if (retries < 0 || currentAbort.cancelled) {
+        if (retries <= 0 || currentAbort.cancelled) {
           if (!currentAbort.cancelled) {
             setError(e as Error);
           }
           setLoading(false);
+          return;
         } else {
           await new Promise((resolve) => setTimeout(resolve, retryDelay));
         }
       }
     }
+
+    // No retries configured — if fetch fails immediately, that's an error
+    if (retryCount <= 0 && !currentAbort.cancelled) {
+      try {
+        const result = await fetchFn();
+        if (!currentAbort.cancelled) {
+          setData(result);
+          setLoading(false);
+        }
+      } catch (e) {
+        if (!currentAbort.cancelled) {
+          setError(e as Error);
+          setLoading(false);
+        }
+      }
+      return;
+    }
+
+    // All retries exhausted without success (caught in loop already handled above)
+    if (!currentAbort.cancelled) {
+      setError(new Error('All retries failed'));
+      setLoading(false);
+    }
   }, [fetchFn, retryCount, retryDelay]);
 
   useEffect(() => {
@@ -459,7 +488,7 @@ export function useDataPolling<T>(
         abortRef.current.cancelled = true;
       };
     }
-    
+
     return () => {
       abortRef.current.cancelled = true;
     };
@@ -591,9 +620,17 @@ export function useChartTools(instance: ChartInstance | null) {
 // 导出
 // ============================================================================
 
-export const version = '1.2.0';
+export const version = '1.4.0';
+
+// 新增数据转换 hooks
+export {
+  useDataTransform,
+  useTableTransform,
+  useTimeSeriesTransform,
+  useTransform,
+} from './useDataTransform';
 
-const hooks = {
+export default {
   useChart,
   useOption,
   useResize,
@@ -608,5 +645,3 @@ const hooks = {
   useExport,
   useChartTools,
 };
-
-export default hooks;