@agions/taroviz 1.3.0 → 1.5.0

package/src/hooks/__tests__/index.test.tsx

@@ -13,16 +13,18 @@ import {
 
 // Mock dependencies
 jest.mock('../../adapters', () => ({
-  getAdapter: jest.fn(() => ({
-    setComponent: jest.fn(),
-    setOption: jest.fn(),
-    resize: jest.fn(),
-    on: jest.fn(),
-    off: jest.fn(),
-    showLoading: jest.fn(),
-    hideLoading: jest.fn(),
-    dispose: jest.fn(),
-  })),
+  getAdapter: jest.fn(() =>
+    Promise.resolve({
+      setComponent: jest.fn(),
+      setOption: jest.fn(),
+      resize: jest.fn(),
+      on: jest.fn(),
+      off: jest.fn(),
+      showLoading: jest.fn(),
+      hideLoading: jest.fn(),
+      dispose: jest.fn(),
+    })
+  ),
 }));
 
 describe('React Hooks', () => {
@@ -244,7 +246,8 @@ describe('React Hooks', () => {
         }
       );
 
-      expect(result.current).toBe('dark');
+      // getThemeByName('default') returns the defaultTheme object
+      expect(result.current).toEqual(expect.objectContaining({ backgroundColor: '#ffffff', textColor: '#333333' }));
     });
 
     it('should return original theme when darkMode is false', () => {

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,29 +415,65 @@ export function useDataPolling<T>(
   const [data, setData] = useState<T | null>(null);
   const [loading, setLoading] = useState(autoStart);
   const [error, setError] = useState<Error | null>(null);
-  const [refreshIndex, setRefreshIndex] = useState(0);
+
+  // 用于取消进行中的请求
+  const abortRef = useRef<{ cancelled: boolean }>({ cancelled: false });
 
   const fetchData = useCallback(async () => {
+    // 取消之前的请求
+    abortRef.current.cancelled = true;
+    // 创建新的取消标记
+    abortRef.current = { cancelled: false };
+    const currentAbort = abortRef.current;
+
     let retries = retryCount;
     setLoading(true);
     setError(null);
 
-    while (retries >= 0) {
+    while (retries > 0 && !currentAbort.cancelled) {
       try {
         const result = await fetchFn();
-        setData(result);
-        setLoading(false);
+        if (!currentAbort.cancelled) {
+          setData(result);
+          setLoading(false);
+        }
         return;
       } catch (e) {
         retries--;
-        if (retries < 0) {
-          setError(e as Error);
+        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(() => {
@@ -442,12 +483,18 @@ export function useDataPolling<T>(
 
     if (interval > 0) {
       const timer = setInterval(fetchData, interval);
-      return () => clearInterval(timer);
+      return () => {
+        clearInterval(timer);
+        abortRef.current.cancelled = true;
+      };
     }
-  }, [interval, autoStart, fetchData, refreshIndex]);
+
+    return () => {
+      abortRef.current.cancelled = true;
+    };
+  }, [interval, autoStart, fetchData]);
 
   const refresh = useCallback(() => {
-    setRefreshIndex((prev) => prev + 1);
     fetchData();
   }, [fetchData]);
 
@@ -573,9 +620,17 @@ export function useChartTools(instance: ChartInstance | null) {
 // 导出
 // ============================================================================
 
-export const version = '1.2.0';
+export const version = '1.4.0';
 
-const hooks = {
+// 新增数据转换 hooks
+export {
+  useDataTransform,
+  useTableTransform,
+  useTimeSeriesTransform,
+  useTransform,
+} from './useDataTransform';
+
+export default {
   useChart,
   useOption,
   useResize,
@@ -590,5 +645,3 @@ const hooks = {
   useExport,
   useChartTools,
 };
-
-export default hooks;