fix(view): storage multi-view sizing + text

MauriceNino · Sep 18, 2022 · afb66c4 · afb66c4
1 parent 0eafb7d
commit afb66c4
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/apps/view/src/components/chart-components.tsx b/apps/view/src/components/chart-components.tsx
@@ -273,7 +273,7 @@ export const DefaultVertBarChart: FC<DefaultVertBarChartProps> = ({
   children,
   tooltipRenderer,
 }) => {
-  const barSize = clamp(height / data.length - 20, 40, 60);
+  const barSize = clamp(height / data.length - 20, 10, 60);
   const gap = (data.length - 1) * 10;
   const allBars = barSize * data.length;
   const margin = (height - gap - allBars) / 2;

diff --git a/apps/view/src/widgets/storage.tsx b/apps/view/src/widgets/storage.tsx
@@ -112,7 +112,6 @@ export const StorageChart: FC<StorageChartProps> = ({
   multiView,
   showPercentages,
 }) => {
-  const isMobile = useIsMobile();
   const theme = useTheme();
   const layout = useStorageLayout(data, config);
   const layoutNoVirtual = layout.filter(l => !l.virtual);
@@ -191,7 +190,11 @@ export const StorageChart: FC<StorageChartProps> = ({
             <DefaultVertBarChart
               width={size.width}
               height={size.height}
-              data={index ? usageArr.slice(index * 3, index * 3 + 3) : usageArr}
+              data={
+                index != null
+                  ? usageArr.slice(index * 3, index * 3 + 3)
+                  : usageArr
+              }
               tooltipRenderer={x => {
                 const value = x.payload?.[0]?.payload as
                   | typeof usageArr[0]
@@ -219,9 +222,9 @@ export const StorageChart: FC<StorageChartProps> = ({
                 fill={theme.colors.storagePrimary}
                 style={{ stroke: theme.colors.surface, strokeWidth: 4 }}
                 radius={10}
-                isAnimationActive={!config.always_show_percentages && !isMobile}
+                isAnimationActive={!showPercentages}
               >
-                {(config.always_show_percentages || isMobile) && (
+                {showPercentages && (
                   <LabelList
                     position='insideLeft'
                     offset={15}