feat(text): fit antd darkAlgorithm

antvis · Nov 21, 2024 · 518cef6 · 518cef6
1 parent 11fa40d
commit 518cef6
Show file tree

Hide file tree

Showing 13 changed files with 159 additions and 80 deletions.
diff --git a/src/Text/VisText.tsx b/src/Text/VisText.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { useComponentGlobalConfig } from '../ConfigProvider/hooks';
 import { type TextConfig, STATICS_KEY } from './config';
 import type { VisTextProps } from './types';
+import { getThemeColor, useAntdDarkAlgorithm } from './utils';
 
 const { Text } = Typography;
 
@@ -20,9 +21,13 @@ function renderPrefixSuffix(
 
 const VisText = (props: VisTextProps) => {
   const { children, className, style, type, origin } = props;
+
+  const isDark = useAntdDarkAlgorithm();
   const textConfig = useComponentGlobalConfig('VisText');
+
   const encoding = type ? textConfig?.[type] : {};
   const staticsConfig = textConfig?.[STATICS_KEY];
+
   return (
     // TODO  @羽熙 暂时简单处理 tooltip 直接显示 origin，后续可以根据 origin 类型分类处理
     <Tooltip title={toString(origin)}>
@@ -32,8 +37,9 @@ const VisText = (props: VisTextProps) => {
           // antd Text 组件写死了 14px，在段落定义了 font-size 的情况下，显示很突兀，这里不设置，跟随上级容器字体大小改变。
           // TODO @羽熙 之后看能否通过 antd ConfigProvider 统一配置
           fontSize: 'unset',
+          color: getThemeColor({ type, color: encoding?.color, theme: isDark ? 'dark' : 'light' }),
           ...style,
-          ...pick(encoding, ['color', 'backgroundColor', 'fontWeight']),
+          ...pick(encoding, ['backgroundColor', 'fontWeight']),
         }}
       >
         {renderPrefixSuffix(encoding?.prefix, staticsConfig, props)}

diff --git a/src/Text/config.tsx b/src/Text/config.tsx
@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'react';
-import { TEXT_THEME } from './constants';
 import { ArrowDown, ArrowUp } from './custom-icons';
 import { ProportionChart, SingleLineChart } from './mini-charts';
+import { TEXT_THEME } from './theme';
 import type { VisTextProps } from './types';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -56,49 +56,49 @@ export const DEFAULT_VIS_TEXT_CONFIG: TextConfig = {
     'mini-chart:line': SingleLineChart,
   },
   metric_name: {
-    color: TEXT_THEME.black88,
+    color: TEXT_THEME.light.default88Color,
     fontWeight: 500,
   },
   metric_value: {
-    color: TEXT_THEME.primaryColor,
+    color: TEXT_THEME.light.primaryColor,
   },
   other_metric_value: {
-    color: TEXT_THEME.black65,
+    color: TEXT_THEME.light.default65Color,
   },
   delta_value: {
-    color: TEXT_THEME.black65,
+    color: TEXT_THEME.light.default65Color,
   },
   ratio_value: {
-    color: TEXT_THEME.black65,
+    color: TEXT_THEME.light.default65Color,
   },
   delta_value_pos: {
-    color: TEXT_THEME.posColor,
+    color: TEXT_THEME.light.posColor,
     prefix: '+',
   },
   delta_value_neg: {
-    color: TEXT_THEME.negColor,
+    color: TEXT_THEME.light.negColor,
     prefix: '-',
   },
   ratio_value_pos: {
-    color: TEXT_THEME.posColor,
+    color: TEXT_THEME.light.posColor,
     prefix: 'icon:arrow-up',
   },
   ratio_value_neg: {
-    color: TEXT_THEME.negColor,
+    color: TEXT_THEME.light.negColor,
     prefix: 'icon:arrow-down',
   },
   contribute_ratio: {
-    color: TEXT_THEME.statisticsInsightColor,
+    color: TEXT_THEME.light.conclusionColor,
   },
   trend_desc: {
-    color: TEXT_THEME.statisticsInsightColor,
+    color: TEXT_THEME.light.conclusionColor,
     suffix: 'mini-chart:line',
   },
   dim_value: {
-    color: TEXT_THEME.black88,
+    color: TEXT_THEME.light.default88Color,
   },
   time_desc: {
-    color: TEXT_THEME.black88,
+    color: TEXT_THEME.light.default88Color,
   },
   proportion: {
     suffix: 'mini-chart:proportion',

diff --git a/src/Text/constants.ts b/src/Text/constants.ts
diff --git a/src/Text/demos/common.tsx b/src/Text/demos/common.tsx
@@ -1,50 +1,61 @@
 import { VisText } from '@antv/gpt-vis';
-import { Descriptions, Space } from 'antd';
+import { ConfigProvider, Descriptions, Space, theme } from 'antd';
+import { usePrefersColor } from 'dumi';
 import React from 'react';
 
 export default () => {
+  // dumi 文档当前的主题色
+  const [color] = usePrefersColor();
   return (
-    <Descriptions bordered column={2} size="small">
-      <Descriptions.Item label="指标名 metric_name">
-        <VisText type="metric_name">DAU</VisText>
-      </Descriptions.Item>
-      <Descriptions.Item label="指标值 metric_value">
-        <VisText type="metric_value" origin={9012334}>
-          90.1w
-        </VisText>
-      </Descriptions.Item>
-      <Descriptions.Item label="其他指标 other_metric_value">
-        <VisText type="other_metric_value">30%</VisText>
-      </Descriptions.Item>
-      <Descriptions.Item label="差值 delta_value">
-        <Space>
-          <VisText type="delta_value_pos">100.33</VisText>
-          <VisText type="delta_value_neg">100.33</VisText>
-        </Space>
-      </Descriptions.Item>
-      <Descriptions.Item label="比率 ratio_value">
-        <Space>
-          <VisText type="ratio_value_pos">30%</VisText>
-          <VisText type="ratio_value_neg">30%</VisText>
-        </Space>
-      </Descriptions.Item>
-      <Descriptions.Item label="贡献度 contribute_ratio">
-        <VisText type="contribute_ratio">20%</VisText>
-      </Descriptions.Item>
-      <Descriptions.Item label="趋势描述 trend_desc">
-        <VisText type="trend_desc" origin={[1, 2, 6, 18, 24, 48]}>
-          趋势上涨
-        </VisText>
-      </Descriptions.Item>
-      <Descriptions.Item label="维度值 dim_value">
-        <VisText type="dim_value">杭州</VisText>
-      </Descriptions.Item>
-      <Descriptions.Item label="时间描述 time_desc">
-        <VisText type="time_desc">2021-10-11</VisText>
-      </Descriptions.Item>
-      <Descriptions.Item label="占比 proportion">
-        <VisText type="proportion">30%</VisText>
-      </Descriptions.Item>
-    </Descriptions>
+    // 适配 antd 主题。待整体文档 demo 都适配主题后可以删除
+    // https://github.com/antvis/GPT-Vis/pull/24
+    <ConfigProvider
+      theme={{
+        algorithm: color === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
+      }}
+    >
+      <Descriptions bordered column={2} size="small">
+        <Descriptions.Item label="指标名 metric_name">
+          <VisText type="metric_name">DAU</VisText>
+        </Descriptions.Item>
+        <Descriptions.Item label="指标值 metric_value">
+          <VisText type="metric_value" origin={9012334}>
+            90.1w
+          </VisText>
+        </Descriptions.Item>
+        <Descriptions.Item label="其他指标 other_metric_value">
+          <VisText type="other_metric_value">30%</VisText>
+        </Descriptions.Item>
+        <Descriptions.Item label="差值 delta_value">
+          <Space>
+            <VisText type="delta_value_pos">100.33</VisText>
+            <VisText type="delta_value_neg">100.33</VisText>
+          </Space>
+        </Descriptions.Item>
+        <Descriptions.Item label="比率 ratio_value">
+          <Space>
+            <VisText type="ratio_value_pos">30%</VisText>
+            <VisText type="ratio_value_neg">30%</VisText>
+          </Space>
+        </Descriptions.Item>
+        <Descriptions.Item label="贡献度 contribute_ratio">
+          <VisText type="contribute_ratio">20%</VisText>
+        </Descriptions.Item>
+        <Descriptions.Item label="趋势描述 trend_desc">
+          <VisText type="trend_desc" origin={[1, 2, 6, 18, 24, 48]}>
+            趋势上涨
+          </VisText>
+        </Descriptions.Item>
+        <Descriptions.Item label="维度值 dim_value">
+          <VisText type="dim_value">杭州</VisText>
+        </Descriptions.Item>
+        <Descriptions.Item label="时间描述 time_desc">
+          <VisText type="time_desc">2021-10-11</VisText>
+        </Descriptions.Item>
+        <Descriptions.Item label="占比 proportion">
+          <VisText type="proportion">30%</VisText>
+        </Descriptions.Item>
+      </Descriptions>
+    </ConfigProvider>
   );
 };
diff --git a/src/Text/mini-charts/hooks/getElementFontSize.ts b/src/Text/mini-charts/hooks/getElementFontSize.ts
@@ -1,4 +1,4 @@
-import { TEXT_THEME } from '../../constants';
+import { TEXT_THEME } from '../../theme';
 
 function getStyle(ele: Element, style: string): string | undefined {
   return window.getComputedStyle

diff --git a/src/Text/mini-charts/hooks/useSvgWrapper.tsx b/src/Text/mini-charts/hooks/useSvgWrapper.tsx
@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import React, { useLayoutEffect, useRef, useState } from 'react';
-import { TEXT_THEME } from '../../constants';
+import { TEXT_THEME } from '../../theme';
 import { getElementFontSize } from './getElementFontSize';
 
 type SvgProps = PropsWithChildren<React.SVGProps<SVGSVGElement>>;

diff --git a/src/Text/mini-charts/line/SingleLineChart.tsx b/src/Text/mini-charts/line/SingleLineChart.tsx
@@ -1,13 +1,12 @@
 import { isArray, isString, size } from 'lodash';
 import React, { useMemo } from 'react';
+import { TEXT_THEME } from '../../theme';
 import type { VisTextProps } from '../../types';
 import { useSvgWrapper } from '../hooks';
 import { useLineCompute } from './useLineCompute';
 
 const LINEAR_FILL_COLOR_ID = 'wsc-line-fill';
 
-const LINE_STROKE_COLOR = '#5B8FF9';
-
 function getLineChartData(origin: any) {
   if (isArray(origin)) return origin;
   if (isString(origin)) {
@@ -29,11 +28,13 @@ export const SingleLineChart: React.FC<VisTextProps> = ({ origin }) => {
       <Svg width={width} height={height}>
         <defs>
           <linearGradient x1="50%" y1="0%" x2="50%" y2="122.389541%" id={LINEAR_FILL_COLOR_ID}>
-            <stop stopColor={LINE_STROKE_COLOR} offset="0%" />
+            <stop stopColor={TEXT_THEME.chart.lineStrokeColor} offset="0%" />
             <stop stopColor="#FFFFFF" stopOpacity="0" offset="100%" />
           </linearGradient>
         </defs>
-        {linePath && <path d={linePath} stroke={LINE_STROKE_COLOR} fill="transparent" />}
+        {linePath && (
+          <path d={linePath} stroke={TEXT_THEME.chart.lineStrokeColor} fill="transparent" />
+        )}
         {polygonPath && <polygon points={polygonPath} fill={`url(#${LINEAR_FILL_COLOR_ID})`} />}
       </Svg>
     )

diff --git a/src/Text/mini-charts/line/useLineCompute.ts b/src/Text/mini-charts/line/useLineCompute.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { TEXT_THEME } from '../../constants';
+import { TEXT_THEME } from '../../theme';
 import type { Scale } from './scaleLinear';
 import { scaleLinear } from './scaleLinear';
 

diff --git a/src/Text/mini-charts/proportion/index.tsx b/src/Text/mini-charts/proportion/index.tsx
@@ -1,12 +1,10 @@
 import { isNaN, isString, toNumber } from 'lodash';
 import React, { useMemo } from 'react';
+import { TEXT_THEME } from '../../theme';
 import type { VisTextProps } from '../../types';
 import { useSvgWrapper } from '../hooks/useSvgWrapper';
 import { getArcPath } from './getArcPath';
 
-const SHADOW_COLOR = '#CDDDFD';
-const FILL_COLOR = '#3471F9';
-
 function getProportionNumber(
   children: string | string[], // markdown 中传入的 children 文本为 string[]
   origin?: any,
@@ -38,11 +36,11 @@ export const ProportionChart: React.FC<VisTextProps> = ({ origin, children }) =>
   return (
     data && (
       <Svg width={fontSize} height={fontSize}>
-        <circle cx={r} cy={r} r={r} fill={SHADOW_COLOR} />
+        <circle cx={r} cy={r} r={r} fill={TEXT_THEME.chart.proportionShadowColor} />
         {data >= 1 ? (
-          <circle cx={r} cy={r} r={r} fill={FILL_COLOR} />
+          <circle cx={r} cy={r} r={r} fill={TEXT_THEME.chart.proportionFillColor} />
         ) : (
-          <path d={getArcPath(fontSize, data)} fill={FILL_COLOR} />
+          <path d={getArcPath(fontSize, data)} fill={TEXT_THEME.chart.proportionFillColor} />
         )}
       </Svg>
     )

diff --git a/src/Text/theme.ts b/src/Text/theme.ts
@@ -0,0 +1,24 @@
+export const TEXT_THEME = {
+  fontSizeBase: 14,
+  chart: {
+    proportionShadowColor: '#CDDDFD',
+    proportionFillColor: '#3471F9',
+    lineStrokeColor: '#5B8FF9',
+  },
+  light: {
+    primaryColor: '#1677FF',
+    default88Color: 'rgba(0, 0, 0, 0.88)',
+    default65Color: 'rgba(0, 0, 0, 0.65)',
+    posColor: '#FA541C',
+    negColor: '#13A8A8',
+    conclusionColor: '#1F0352',
+  },
+  dark: {
+    primaryColor: '#4B91FF',
+    default88Color: 'rgba(255, 255, 255, 0.88)',
+    default65Color: 'rgba(255, 255, 255, 0.65)',
+    posColor: '#FA541C',
+    negColor: '#13A8A8',
+    conclusionColor: '#D8C3F3',
+  },
+};
diff --git a/src/Text/utils/getThemeColor.ts b/src/Text/utils/getThemeColor.ts
@@ -0,0 +1,32 @@
+import { findKey, get } from 'lodash';
+import { DEFAULT_VIS_TEXT_CONFIG } from '../config';
+import { TEXT_THEME } from '../theme';
+
+/**
+ * 自动适配暗黑模式
+ * @params type 类型
+ * @params color 当前颜色
+ * @params theme 当前主题
+ */
+export const getThemeColor = ({
+  type,
+  color,
+  theme,
+}: {
+  type?: string;
+  color: string | undefined;
+  theme: 'dark' | 'light';
+}) => {
+  // 仅暗黑主题才处理
+  if (type && color && theme === 'dark') {
+    const defaultLightColor = get(DEFAULT_VIS_TEXT_CONFIG, [type, 'color']);
+    // 仅当前颜色为默认的浅色主题时才处理
+    if (color === defaultLightColor) {
+      // 找到浅色主题的 token
+      const token = findKey(TEXT_THEME.light, (i) => i === color);
+      // 返回暗黑主题的对应 token 的颜色
+      if (token) return TEXT_THEME.dark[token as keyof typeof TEXT_THEME.dark];
+    }
+  }
+  return color;
+};
diff --git a/src/Text/utils/index.ts b/src/Text/utils/index.ts
@@ -0,0 +1,2 @@
+export * from './getThemeColor';
+export * from './useAntdDarkAlgorithm';
diff --git a/src/Text/utils/useAntdDarkAlgorithm.ts b/src/Text/utils/useAntdDarkAlgorithm.ts
@@ -0,0 +1,14 @@
+import { ConfigProvider, theme as antdTheme } from 'antd';
+import { isArray } from 'lodash';
+import { useContext } from 'react';
+
+const { darkAlgorithm } = antdTheme;
+
+/** 判断是否运用了 antd dark algorithm */
+export const useAntdDarkAlgorithm = () => {
+  const config = useContext(ConfigProvider.ConfigContext);
+  const currentAlgorithm = config.theme?.algorithm;
+
+  if (isArray(currentAlgorithm) && currentAlgorithm.includes(darkAlgorithm)) return true;
+  return currentAlgorithm === darkAlgorithm;
+};