Merge pull request #163 from bento-platform/card-description

Card description improvement
bento-platform · May 30, 2024 · 561ea4c · 561ea4c
2 parents e47bdd5 + bf9d0c5
commit 561ea4c
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/src/js/components/Overview/ChartCard.tsx b/src/js/components/Overview/ChartCard.tsx
@@ -10,10 +10,14 @@ import { ChartDataField } from '@/types/data';
 const CARD_STYLE = { width: '100%', height: '415px', borderRadius: '11px', ...BOX_SHADOW };
 const ROW_EMPTY_STYLE = { height: `${CHART_HEIGHT}px` };
 
-const TitleComponent: React.FC<TitleComponentProps> = ({ title, description }) => (
+const TitleComponent: React.FC<TitleComponentProps> = ({ title, description, smallEllipsis }) => (
   <Space.Compact direction="vertical" style={{ fontWeight: 'normal', padding: '5px 5px' }}>
     <Typography.Text style={{ fontSize: '20px', fontWeight: '600' }}>{title}</Typography.Text>
-    <Typography.Text type="secondary" style={{ width: '375px' }} ellipsis={{ tooltip: description }}>
+    <Typography.Text
+      type="secondary"
+      style={smallEllipsis ? { width: '260px' } : { width: '375px' }}
+      ellipsis={{ tooltip: description }}
+    >
       {description}
     </Typography.Text>
   </Space.Compact>
@@ -22,6 +26,7 @@ const TitleComponent: React.FC<TitleComponentProps> = ({ title, description }) =
 interface TitleComponentProps {
   title: string;
   description: string;
+  smallEllipsis: boolean;
 }
 
 const ChartCard = memo(({ section, chart, onRemoveChart, width }: ChartCardProps) => {
@@ -70,7 +75,7 @@ const ChartCard = memo(({ section, chart, onRemoveChart, width }: ChartCardProps
   return (
     <div key={id} style={{ height: '100%', width }}>
       <Card
-        title={<TitleComponent title={t(title)} description={t(description)} />}
+        title={<TitleComponent title={t(title)} description={t(description)} smallEllipsis={!!missingCount} />}
         style={CARD_STYLE}
         size="small"
         extra={<Space size="small">{ed}</Space>}