feature, Improves Grid chart labels and values responsivenes

Shopify · Nov 8, 2024 · 10d6482 · 10d6482
1 parent 034d902
commit 10d6482
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 8 deletions.
diff --git a/packages/polaris-viz/src/components/Grid/components/GroupCell.scss b/packages/polaris-viz/src/components/Grid/components/GroupCell.scss
@@ -12,6 +12,7 @@
 
 .GroupCellContainer {
   transition: opacity 200ms ease-in-out;
+  outline: none;
 }
 
 @keyframes FadeInScale {

diff --git a/packages/polaris-viz/src/components/Grid/components/GroupInfo.tsx b/packages/polaris-viz/src/components/Grid/components/GroupInfo.tsx
@@ -1,4 +1,11 @@
-import React from 'react';
+import React, {useCallback} from 'react';
+
+import {truncateText} from '../utilities/truncate-text';
+
+const LABEL_FONT_SIZE = 11;
+const PRIMARY_VALUE_WIDTH_RATIO = 2;
+const PRIMARY_VALUE_WIDTH_RATIO_SOLO = 1.5;
+const SECONDARY_VALUE_WIDTH_RATIO = 3.5;
 
 interface GroupInfoProps {
   groupX: number;
@@ -33,22 +40,55 @@ export const GroupInfo: React.FC<GroupInfoProps> = ({
   groupSecondaryValue,
   groupNameOffset,
 }) => {
+  const getTruncatedText = useCallback(
+    (text: string, availableWidth: number, fontSize: number) => {
+      return truncateText(text, availableWidth - 10, fontSize);
+    },
+    [],
+  );
+
+  const divider = showNameAndSecondaryValue
+    ? PRIMARY_VALUE_WIDTH_RATIO
+    : PRIMARY_VALUE_WIDTH_RATIO_SOLO;
+
+  const truncatedValue = getTruncatedText(
+    groupValue,
+    groupWidth / divider,
+    mainFontSize,
+  );
+  const truncatedSecondaryValue = showNameAndSecondaryValue
+    ? getTruncatedText(
+        groupSecondaryValue,
+        groupWidth / SECONDARY_VALUE_WIDTH_RATIO,
+        secondaryFontSize,
+      )
+    : '';
+  const truncatedGroupName = showNameAndSecondaryValue
+    ? getTruncatedText(
+        group.name,
+        groupWidth - groupNameOffset * 2,
+        LABEL_FONT_SIZE,
+      )
+    : '';
+
+  const textYOffset = showNameAndSecondaryValue ? 2 : 0;
+
   return (
     <React.Fragment>
       <text
         x={groupX + groupWidth / 2}
-        y={groupY + groupHeight / 2}
+        y={groupY + groupHeight / 2 + textYOffset}
         textAnchor="middle"
         dominantBaseline="middle"
         fill={getColors(group).textColor}
         opacity={opacity}
       >
         <tspan fontWeight={600} fontSize={`${mainFontSize}px`}>
-          {groupValue}
+          {truncatedValue}
         </tspan>
         {showNameAndSecondaryValue && (
           <tspan dx="0.5em" fontSize={`${secondaryFontSize}px`}>
-            {groupSecondaryValue}
+            {truncatedSecondaryValue}
           </tspan>
         )}
       </text>
@@ -59,11 +99,11 @@ export const GroupInfo: React.FC<GroupInfoProps> = ({
           y={groupY + groupNameOffset}
           textAnchor="start"
           dominantBaseline="hanging"
-          fontSize="11"
+          fontSize={LABEL_FONT_SIZE}
           fill={getColors(group).textColor}
           opacity={opacity}
         >
-          {group.name}
+          {truncatedGroupName}
         </text>
       )}
     </React.Fragment>

diff --git a/packages/polaris-viz/src/components/Grid/tests/Grid.test.tsx b/packages/polaris-viz/src/components/Grid/tests/Grid.test.tsx
@@ -2,7 +2,6 @@ import {mount} from '@shopify/react-testing';
 import {act} from 'react-dom/test-utils';
 
 import {Grid} from '../Grid';
-import {ChartContainer} from '../../ChartContainer';
 import {XAxis} from '../../XAxis';
 import {YAxis} from '../../YAxis';
 import {GroupCell} from '../components/GroupCell';

diff --git a/packages/polaris-viz/src/components/Grid/utilities/constants.ts b/packages/polaris-viz/src/components/Grid/utilities/constants.ts
@@ -4,7 +4,7 @@ export const TOOLTIP_HORIZONTAL_OFFSET = 10;
 export const TOOLTIP_VERTICAL_OFFSET = 135;
 export const TOOLTIP_PADDING = 10;
 
-export const Y_LABEL_OFFSET = 20;
+export const Y_LABEL_OFFSET = 25;
 export const Y_AXIS_LABEL_WIDTH = 50;
 export const X_AXIS_HEIGHT = 40;
 export const X_AXIS_LABEL_OFFSET = 20;

diff --git a/packages/polaris-viz/src/components/Grid/utilities/truncate-text.ts b/packages/polaris-viz/src/components/Grid/utilities/truncate-text.ts
@@ -0,0 +1,21 @@
+export function truncateText(text: string, maxWidth: number, fontSize: number) {
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+  if (!context) return text;
+
+  context.font = `${fontSize}px sans-serif`;
+
+  if (context.measureText(text).width <= maxWidth) {
+    return text;
+  }
+
+  let truncated = text;
+  while (
+    context.measureText(`${truncated}...`).width > maxWidth &&
+    truncated.length > 0
+  ) {
+    truncated = truncated.slice(0, -1);
+  }
+
+  return `${truncated}...`;
+}