💄 style: Update styles

lobehub · Nov 8, 2024 · 611b092 · 611b092
1 parent edcc8cc
commit 611b092
Show file tree

Hide file tree

Showing 14 changed files with 52 additions and 21 deletions.
diff --git a/src/AreaChart/styles.ts b/src/AreaChart/styles.ts
@@ -11,12 +11,12 @@ export const useStyles = createStyles(({ css, token }) => ({
     stroke-width: 1;
   `,
   label: css`
-    font-size: 14px;
+    font-size: 12px;
     line-height: 16px;
     fill: ${token.colorTextDescription};
   `,
   strongLabel: css`
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 500;
     line-height: 16px;
     fill: ${token.colorTextSecondary};

diff --git a/src/BarChart/styles.ts b/src/BarChart/styles.ts
@@ -11,12 +11,12 @@ export const useStyles = createStyles(({ css, token }) => ({
     stroke-width: 1;
   `,
   label: css`
-    font-size: 14px;
+    font-size: 12px;
     line-height: 16px;
     fill: ${token.colorTextDescription};
   `,
   strongLabel: css`
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 500;
     line-height: 16px;
     fill: ${token.colorTextSecondary};

diff --git a/src/BarList/styles.ts b/src/BarList/styles.ts
@@ -29,7 +29,7 @@ export const useStyles = createStyles(({ css, token }) => ({
     white-space: nowrap;
   `,
   label: css`
-    font-size: 14px;
+    font-size: 12px;
     line-height: 16px;
     color: ${token.colorTextDescription};
   `,

diff --git a/src/DataBars/styles.ts b/src/DataBars/styles.ts
@@ -7,7 +7,7 @@ export const useStyles = createStyles(({ css, token }) => ({
     white-space: nowrap;
   `,
   label: css`
-    font-size: 14px;
+    font-size: 12px;
     line-height: 16px;
     fill: ${token.colorTextDescription};
   `,

diff --git a/src/DonutChart/index.tsx b/src/DonutChart/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { css } from 'antd-style';
+import { css, useThemeMode } from 'antd-style';
 import { CSSProperties, ComponentType, MouseEvent, forwardRef, useEffect, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { Pie, PieChart as ReChartsDonutChart, ResponsiveContainer, Tooltip } from 'recharts';
@@ -29,6 +29,7 @@ export interface DonutChartProps extends BaseAnimationTimingProps {
   };
   customTooltip?: ComponentType<CustomTooltipProps>;
   data: any[];
+  donutLabel?: string;
   index?: string;
   label?: string;
   noDataText?: NoDataProps['noDataText'];
@@ -64,8 +65,10 @@ const DonutChart = forwardRef<HTMLDivElement, DonutChartProps>((props, ref) => {
     height = '10rem',
     style,
     customCategories,
+    donutLabel,
     ...rest
   } = props;
+  const { isDarkMode } = useThemeMode();
   const CustomTooltip = customTooltip;
   const isDonut = variant === 'donut';
   const parsedLabelInput = parseLabelInput(label, valueFormatter, data, category);
@@ -141,7 +144,9 @@ const DonutChart = forwardRef<HTMLDivElement, DonutChartProps>((props, ref) => {
                 x="50%"
                 y="50%"
               >
-                {parsedLabelInput}
+                {donutLabel || typeof activeIndex === 'number'
+                  ? valueFormatter(data?.[activeIndex as any]?.[category])
+                  : parsedLabelInput}
               </text>
             ) : null}
             <Pie
@@ -167,6 +172,32 @@ const DonutChart = forwardRef<HTMLDivElement, DonutChartProps>((props, ref) => {
                 stroke: theme.colorBgContainer,
               }}
             />
+            {isDonut && (
+              <Pie
+                activeIndex={activeIndex}
+                animationDuration={animationDuration}
+                cx="50%"
+                cy="50%"
+                data={parseData(
+                  [{ [category]: 1 }],
+                  [isDarkMode ? 'rgba(0,0,0,.33)' : 'rgba(0,0,0,.1)'],
+                )}
+                dataKey={category}
+                endAngle={-270}
+                inactiveShape={renderInactiveShape}
+                innerRadius={isDonut ? '75%' : '0%'}
+                isAnimationActive={false}
+                nameKey={index}
+                outerRadius="80%"
+                startAngle={90}
+                stroke=""
+                strokeLinejoin="round"
+                style={{
+                  outline: 'none',
+                  pointerEvents: 'none',
+                }}
+              />
+            )}
             <Tooltip
               content={
                 showTooltip

diff --git a/src/DonutChart/styles.ts b/src/DonutChart/styles.ts
@@ -11,7 +11,7 @@ export const useStyles = createStyles(({ css, token }) => ({
     stroke-width: 1;
   `,
   label: css`
-    font-size: 14px;
+    font-size: 12px;
     line-height: 16px;
     fill: ${token.colorTextDescription};
   `,

diff --git a/src/Heatmaps/demos/index.tsx b/src/Heatmaps/demos/index.tsx
@@ -22,7 +22,7 @@ export default () => {
       },
       fontSize: {
         step: 1,
-        value: 14,
+        value: 12,
       },
       hideColorLegend: false,
       hideMonthLabels: false,

diff --git a/src/Heatmaps/index.tsx b/src/Heatmaps/index.tsx
@@ -54,7 +54,7 @@ const Heatmaps = forwardRef<HTMLDivElement, HeatmapsProps>((props, ref) => {
     blockRadius = 2,
     blockSize = 12,
     onValueChange,
-    fontSize = 14,
+    fontSize = 12,
     hideColorLegend = false,
     hideMonthLabels = false,
     hideTotalCount = false,

diff --git a/src/Legend/LegendItem.tsx b/src/Legend/LegendItem.tsx
@@ -24,7 +24,7 @@ const useStyles = createStyles(({ css, token }) => ({
     }
   `,
   itemContent: css`
-    font-size: 14px;
+    font-size: 12px;
     color: inherit;
   `,
 }));
@@ -44,7 +44,7 @@ const LegendItem = memo<LegendItemProps>(({ label, name, color, onClick, activeL
   return (
     <Flexbox
       className={cx(styles.container, hasOnValueChange && styles.hasOnValueChange)}
-      gap={8}
+      gap={6}
       horizontal
       onClick={(e) => {
         e.stopPropagation();

diff --git a/src/LineChart/styles.ts b/src/LineChart/styles.ts
@@ -11,12 +11,12 @@ export const useStyles = createStyles(({ css, token }) => ({
     stroke-width: 1;
   `,
   label: css`
-    font-size: 14px;
+    font-size: 12px;
     line-height: 16px;
     fill: ${token.colorTextDescription};
   `,
   strongLabel: css`
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 500;
     line-height: 16px;
     fill: ${token.colorTextSecondary};

diff --git a/src/ScatterChart/styles.ts b/src/ScatterChart/styles.ts
@@ -11,12 +11,12 @@ export const useStyles = createStyles(({ css, token }) => ({
     stroke-width: 1;
   `,
   label: css`
-    font-size: 14px;
+    font-size: 12px;
     line-height: 16px;
     fill: ${token.colorTextDescription};
   `,
   strongLabel: css`
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 500;
     line-height: 16px;
     fill: ${token.colorTextSecondary};

diff --git a/src/Tracker/styles.ts b/src/Tracker/styles.ts
@@ -7,12 +7,12 @@ export const useStyles = createStyles(({ css, token }) => ({
     white-space: nowrap;
   `,
   label: css`
-    font-size: 14px;
+    font-size: 12px;
     line-height: 16px;
     color: ${token.colorTextDescription};
   `,
   strongLabel: css`
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 500;
     line-height: 16px;
     fill: ${token.colorTextSecondary};

diff --git a/src/common/CustomYAxisTick.tsx b/src/common/CustomYAxisTick.tsx
@@ -27,7 +27,7 @@ const CustomYAxisTick = memo<CustomYAxisTickProps>(
         <text
           dy={4}
           fill={theme.colorTextDescription}
-          fontSize={14}
+          fontSize={12}
           textAnchor={align === 'left' ? 'start' : 'end'}
           x={0}
           y={0}

diff --git a/src/utils/getMaxLabelLength.ts b/src/utils/getMaxLabelLength.ts
@@ -6,7 +6,7 @@ export const getTextWidth = (text: string) => {
   const span = document.createElement('span');
 
   // 设置样式使其不可见
-  span.style.fontSize = '14px';
+  span.style.fontSize = '12px';
   span.style.position = 'absolute';
   span.style.visibility = 'hidden';
   span.style.whiteSpace = 'nowrap';