💄 style: Update colors

lobehub · Dec 15, 2024 · 357cc08 · 357cc08
1 parent 68b0a61
commit 357cc08
Show file tree

Hide file tree

Showing 26 changed files with 56 additions and 39 deletions.
diff --git a/src/AreaChart/index.tsx b/src/AreaChart/index.tsx
@@ -26,7 +26,7 @@ import CustomYAxisTick from '@/common/CustomYAxisTick';
 import NoData from '@/common/NoData';
 import { constructCategoryColors, getYAxisDomain, hasOnlyOneValueForThisKey } from '@/common/utils';
 import { useThemeColorRange } from '@/hooks/useThemeColorRange';
-import { CurveType } from '@/types';
+import { CurveType } from '@/types/charts';
 import { defaultValueFormatter } from '@/utils';
 import { getMaxLabelLength } from '@/utils/getMaxLabelLength';
 

diff --git a/src/BarList/index.tsx b/src/BarList/index.tsx
@@ -6,7 +6,7 @@ import React, { HTMLAttributes, ReactNode, forwardRef, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { useThemeColorRange } from '@/hooks/useThemeColorRange';
-import { ValueFormatter } from '@/types';
+import { ValueFormatter } from '@/types/charts';
 import { defaultValueFormatter } from '@/utils';
 
 import { useStyles } from './styles';

diff --git a/src/DataBars/CategoryBar.tsx b/src/DataBars/CategoryBar.tsx
@@ -5,7 +5,7 @@ import { forwardRef, memo, useMemo } from 'react';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
 import { useThemeColorRange } from '@/hooks/useThemeColorRange';
-import { ValueFormatter } from '@/types';
+import { ValueFormatter } from '@/types/charts';
 import { defaultValueFormatter, sumNumericArray } from '@/utils';
 
 import { useStyles } from './styles';

diff --git a/src/DataBars/DeltaBar.tsx b/src/DataBars/DeltaBar.tsx
@@ -4,7 +4,7 @@ import { Tooltip } from '@lobehub/ui';
 import { ReactNode, forwardRef } from 'react';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
-import { DeltaTypes } from '@/types';
+import { DeltaTypes } from '@/types/charts';
 import { mapInputsToDeltaType } from '@/utils';
 
 import { useStyles } from './styles';

diff --git a/src/DonutChart/DonutChartTooltip.tsx b/src/DonutChart/DonutChartTooltip.tsx
@@ -3,7 +3,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import ChartTooltipFrame from '@/common/ChartTooltip/ChartTooltipFrame';
 import ChartTooltipRow from '@/common/ChartTooltip/ChartTooltipRow';
-import { ValueFormatter } from '@/types';
+import { ValueFormatter } from '@/types/charts';
 
 export interface DonutChartTooltipProps {
   active: boolean | undefined;

diff --git a/src/DonutChart/index.tsx b/src/DonutChart/index.tsx
@@ -10,8 +10,8 @@ import type BaseAnimationTimingProps from '@/common/BaseAnimationTimingProps';
 import { CustomTooltipProps } from '@/common/CustomTooltipProps';
 import NoData, { type NoDataProps } from '@/common/NoData';
 import { useThemeColorRange } from '@/hooks/useThemeColorRange';
-import type { EventProps } from '@/types';
-import { ValueFormatter } from '@/types';
+import type { EventProps } from '@/types/charts';
+import { ValueFormatter } from '@/types/charts';
 import { defaultValueFormatter, isOnSeverSide } from '@/utils';
 
 import { DonutChartTooltip } from './DonutChartTooltip';

diff --git a/src/DonutChart/inputParser.ts b/src/DonutChart/inputParser.ts
@@ -1,4 +1,4 @@
-import { ValueFormatter } from '@/types';
+import { ValueFormatter } from '@/types/charts';
 import { sumNumericArray } from '@/utils';
 
 const calculateDefaultLabel = (data: any[], category: string) =>

diff --git a/src/Heatmaps/Calendar.tsx b/src/Heatmaps/Calendar.tsx
@@ -2,7 +2,7 @@ import { Tooltip } from '@lobehub/ui';
 import { keyframes } from 'antd-style';
 import { Fragment, ReactNode, memo } from 'react';
 
-import type { Activity, Labels, Week } from '@/types';
+import type { Activity, Labels, Week } from '@/types/charts';
 
 interface CalendarProps {
   blockMargin: number;

diff --git a/src/Heatmaps/ChartLabels.tsx b/src/Heatmaps/ChartLabels.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react';
 
-import type { Labels, Week } from '@/types';
+import type { Labels, Week } from '@/types/charts';
 import { getMonthLabels } from '@/utils/calendar';
 
 import { useStyles } from './styles';

diff --git a/src/Heatmaps/index.tsx b/src/Heatmaps/index.tsx
@@ -8,7 +8,7 @@ import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
 import NoData, { NoDataProps } from '@/common/NoData';
 import { usePrefersReducedMotion } from '@/hooks/usePrefersReducedMotion';
-import type { Activity, Labels, Week } from '@/types';
+import type { Activity, Labels, Week } from '@/types/charts';
 import { isOnSeverSide } from '@/utils';
 import {
   DEFAULT_LABELS,

diff --git a/src/LineChart/index.tsx b/src/LineChart/index.tsx
@@ -25,7 +25,7 @@ import CustomYAxisTick from '@/common/CustomYAxisTick';
 import NoData from '@/common/NoData';
 import { constructCategoryColors, getYAxisDomain, hasOnlyOneValueForThisKey } from '@/common/utils';
 import { useThemeColorRange } from '@/hooks/useThemeColorRange';
-import { CurveType } from '@/types';
+import { CurveType } from '@/types/charts';
 import { defaultValueFormatter } from '@/utils';
 import { getMaxLabelLength } from '@/utils/getMaxLabelLength';
 

diff --git a/src/ScatterChart/ScatterChartTooltip.tsx b/src/ScatterChart/ScatterChartTooltip.tsx
@@ -6,7 +6,7 @@ import React, { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { ChartTooltipFrame } from '@/common/ChartTooltip/ChartTooltipFrame';
-import { ScatterChartValueFormatter } from '@/types';
+import { ScatterChartValueFormatter } from '@/types/charts';
 import { defaultValueFormatter } from '@/utils';
 
 import ScatterChartTooltipRow from './ScatterChartTooltipRow';

diff --git a/src/ScatterChart/index.tsx b/src/ScatterChart/index.tsx
@@ -29,8 +29,8 @@ import {
   getYAxisDomain,
 } from '@/common/utils';
 import { useThemeColorRange } from '@/hooks/useThemeColorRange';
-import type { EventProps } from '@/types';
-import { IntervalType, ValueFormatter } from '@/types';
+import type { EventProps } from '@/types/charts';
+import { IntervalType, ValueFormatter } from '@/types/charts';
 import { defaultValueFormatter } from '@/utils';
 import { getMaxLabelLength } from '@/utils/getMaxLabelLength';
 

diff --git a/src/SparkChart/SparkAreaChart.tsx b/src/SparkChart/SparkAreaChart.tsx
@@ -12,7 +12,7 @@ import BaseSparkChartProps from '@/common/BaseSparkChartProps';
 import NoData from '@/common/NoData';
 import { constructCategoryColors, getYAxisDomain } from '@/common/utils';
 import { useThemeColorRange } from '@/hooks/useThemeColorRange';
-import { CurveType } from '@/types';
+import { CurveType } from '@/types/charts';
 
 export interface SparkAreaChartProps extends BaseSparkChartProps {
   connectNulls?: boolean;

diff --git a/src/SparkChart/SparkLineChart.tsx b/src/SparkChart/SparkLineChart.tsx
@@ -12,7 +12,7 @@ import BaseSparkChartProps from '@/common/BaseSparkChartProps';
 import NoData from '@/common/NoData';
 import { constructCategoryColors, getYAxisDomain } from '@/common/utils';
 import { useThemeColorRange } from '@/hooks/useThemeColorRange';
-import { CurveType } from '@/types';
+import { CurveType } from '@/types/charts';
 
 export interface SparkLineChartProps extends BaseSparkChartProps {
   connectNulls?: boolean;

diff --git a/src/common/BaseChartProps.tsx b/src/common/BaseChartProps.tsx
@@ -1,7 +1,7 @@
 import { ComponentType, HTMLAttributes } from 'react';
 
 import type { NoDataProps } from '@/common/NoData';
-import { IntervalType, LabelFormatter, ValueFormatter } from '@/types';
+import { IntervalType, LabelFormatter, ValueFormatter } from '@/types/charts';
 
 import type BaseAnimationTimingProps from './BaseAnimationTimingProps';
 import { CustomTooltipProps } from './CustomTooltipProps';

diff --git a/src/common/ChartTooltip/index.tsx b/src/common/ChartTooltip/index.tsx
@@ -3,7 +3,7 @@ import { createStyles } from 'antd-style';
 import { ReactNode } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { ValueFormatter } from '@/types';
+import { ValueFormatter } from '@/types/charts';
 
 import ChartTooltipFrame from './ChartTooltipFrame';
 import ChartTooltipRow from './ChartTooltipRow';

diff --git a/src/common/CustomTooltipProps.tsx b/src/common/CustomTooltipProps.tsx
@@ -1,7 +1,7 @@
 import { NameType, Payload } from 'recharts/types/component/DefaultTooltipContent';
 
 import { ScatterChartValueFormatter } from '@/ScatterChart';
-import { ValueFormatter } from '@/types';
+import { ValueFormatter } from '@/types/charts';
 
 export type CustomTooltipProps = {
   active: boolean | undefined;

diff --git a/src/common/CustomYAxisTick.tsx b/src/common/CustomYAxisTick.tsx
@@ -1,7 +1,7 @@
 import { useTheme } from 'antd-style';
 import React, { memo } from 'react';
 
-import { ValueFormatter } from '@/types';
+import { ValueFormatter } from '@/types/charts';
 
 interface CustomYAxisTickProps {
   align: 'left' | 'right';

diff --git a/src/hooks/useThemeColorRange.ts b/src/hooks/useThemeColorRange.ts
@@ -1,20 +1,28 @@
 import { useTheme } from 'antd-style';
+import { useMemo } from 'react';
 
 export const useThemeColorRange = () => {
   const theme = useTheme();
 
-  return [
-    theme.geekblue,
-    theme.gold,
-    theme.lime,
-    theme.volcano,
-    theme.purple,
-    theme.blue,
-    theme.orange,
-    theme.green,
-    theme.red,
-    theme.cyan,
-    theme.yellow,
-    theme.magenta,
-  ];
+  return useMemo(
+    () => [
+      theme.geekblue,
+      theme.gold,
+      theme.green,
+      theme.cyan,
+      theme.purple,
+      theme.red,
+      theme.volcano,
+      theme.gray,
+      theme.geekblue7,
+      theme.gold7,
+      theme.green7,
+      theme.cyan7,
+      theme.purple7,
+      theme.red7,
+      theme.volcano7,
+      theme.gray7,
+    ],
+    [theme],
+  );
 };
diff --git a/src/index.ts b/src/index.ts
@@ -13,5 +13,5 @@ export { default as LineChart, type LineChartProps } from './LineChart';
 export { default as ScatterChart, type ScatterChartProps } from './ScatterChart';
 export * from './SparkChart';
 export { default as Tracker, type TrackerProps } from './Tracker';
-export type * from './types';
+export type * from './types/charts';
 export { useThemeColorRange } from '@/hooks/useThemeColorRange';
diff --git a/src/types.ts → src/types/charts.ts b/src/types.ts → src/types/charts.ts
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -0,0 +1,9 @@
+import type { LobeCustomStylish, LobeCustomToken } from '@lobehub/ui';
+import 'antd-style';
+
+declare module 'antd-style' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface CustomToken extends LobeCustomToken {}
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface CustomStylish extends LobeCustomStylish {}
+}
diff --git a/src/utils/calendar.ts b/src/utils/calendar.ts
@@ -12,7 +12,7 @@ import {
   subWeeks,
 } from 'date-fns';
 
-import type { Activity, Week } from '@/types';
+import type { Activity, Week } from '@/types/charts';
 import { isOnSeverSide } from '@/utils/index';
 
 export const DEFAULT_MONTH_LABELS = [

diff --git a/src/utils/getMaxLabelLength.ts b/src/utils/getMaxLabelLength.ts
@@ -1,4 +1,4 @@
-import { ValueFormatter } from '@/types';
+import { ValueFormatter } from '@/types/charts';
 import { defaultValueFormatter, isOnSeverSide } from '@/utils/index';
 
 export const getTextWidth = (text: string) => {

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1,4 +1,4 @@
-import { DeltaTypes, ValueFormatter } from '@/types';
+import { DeltaTypes, ValueFormatter } from '@/types/charts';
 
 export const defaultValueFormatter: ValueFormatter = String;