fix(view): label not breaking correctly when green bar is too small

MauriceNino · Sep 18, 2022 · 1cd5e7b · 1cd5e7b
1 parent 6b969c3
commit 1cd5e7b
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 5 deletions.
diff --git a/apps/view/src/components/chart-components.tsx b/apps/view/src/components/chart-components.tsx
@@ -5,6 +5,7 @@ import {
   Area,
   AreaChart,
   BarChart,
+  LabelProps,
   Pie,
   PieChart,
   Sector,
@@ -232,6 +233,31 @@ const ToolTipContainer = styled.div`
   gap: 5px;
 `;
 
+export const VertBarStartLabel: FC<
+  LabelProps & {
+    labelRenderer: (value: number) => string;
+  }
+> = props => {
+  const theme = useTheme();
+
+  return (
+    <text
+      x={props.x}
+      y={(props.y as number) + (props.height as number) / 2}
+      width={props.width}
+      height={props.height}
+      offset={props.offset}
+      className='recharts-text recharts-label'
+      text-anchor='start'
+      fill={theme.colors.text}
+    >
+      <tspan x={(props.x as number) + (props.offset as number)} dy='0.355em'>
+        {props.labelRenderer(props.value as number)}
+      </tspan>
+    </text>
+  );
+};
+
 type DefaultVertBarChartProps = {
   height: number;
   width: number;

diff --git a/apps/view/src/widgets/storage.tsx b/apps/view/src/widgets/storage.tsx
@@ -7,6 +7,7 @@ import { useTheme } from 'styled-components';
 import {
   DefaultPieChart,
   DefaultVertBarChart,
+  VertBarStartLabel,
 } from '../components/chart-components';
 import {
   ChartContainer,
@@ -225,12 +226,13 @@ export const StorageChart: FC<StorageChartProps> = ({
                     position='insideLeft'
                     offset={15}
                     dataKey='usedPercent'
-                    formatter={(value: number) =>
-                      `%: ${(value * 100).toFixed(1)}`
+                    content={
+                      <VertBarStartLabel
+                        labelRenderer={value =>
+                          `%: ${(value * 100).toFixed(1)}`
+                        }
+                      />
                     }
-                    style={{
-                      fill: theme.colors.text,
-                    }}
                   />
                 )}
               </Bar>