Merge pull request #1751 from Shopify/passanelli/grid_responsiveness_…

…improvements feature, Improves Grid chart labels and values responsivenes
Shopify · Nov 11, 2024 · d7ed495 · d7ed495
2 parents 034d902 + 6437d04
commit d7ed495
Show file tree

Hide file tree

Showing 5 changed files with 77 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,15 @@
-import React from 'react';
+import React, {useCallback} from 'react';
+import {useChartContext} from '@shopify/polaris-viz-core';
+
+import {truncateText} from '../utilities/truncate-text';
+import {
+  LABEL_FONT_SIZE,
+  PRIMARY_VALUE_WIDTH_RATIO,
+  PRIMARY_VALUE_WIDTH_RATIO_SOLO,
+  SECONDARY_VALUE_WIDTH_RATIO,
+  GROUP_NAME_WIDTH_MULTIPLIER,
+  TEXT_Y_OFFSET_WITH_SECONDARY,
+} from '../utilities/constants';
 
 interface GroupInfoProps {
   groupX: number;
@@ -33,22 +44,50 @@ export const GroupInfo: React.FC<GroupInfoProps> = ({
   groupSecondaryValue,
   groupNameOffset,
 }) => {
+  const {characterWidths} = useChartContext();
+
+  const getTruncatedText = useCallback(
+    (text: string, availableWidth: number) => {
+      return truncateText(text, availableWidth, characterWidths);
+    },
+    [characterWidths],
+  );
+
+  const divider = showNameAndSecondaryValue
+    ? PRIMARY_VALUE_WIDTH_RATIO
+    : PRIMARY_VALUE_WIDTH_RATIO_SOLO;
+
+  const truncatedValue = getTruncatedText(groupValue, groupWidth / divider);
+  const truncatedSecondaryValue = showNameAndSecondaryValue
+    ? getTruncatedText(
+        groupSecondaryValue,
+        groupWidth / SECONDARY_VALUE_WIDTH_RATIO,
+      )
+    : '';
+  const truncatedGroupName = showNameAndSecondaryValue
+    ? getTruncatedText(group.name, groupWidth * GROUP_NAME_WIDTH_MULTIPLIER)
+    : '';
+
+  const textYOffset = showNameAndSecondaryValue
+    ? TEXT_Y_OFFSET_WITH_SECONDARY
+    : 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 +98,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;
@@ -24,3 +24,10 @@ export const BACKGROUND_GAP = 9;
 export const HIDE_NAME_AND_SECONDARY_VALUE_WIDTH_THRESHOLD = 500;
 export const HIDE_NAME_AND_SECONDARY_VALUE_HEIGHT_THRESHOLD = 350;
 export const X_AXIS_LABEL_BOTTOM_OFFSET = 20;
+
+export const LABEL_FONT_SIZE = 11;
+export const PRIMARY_VALUE_WIDTH_RATIO = 2;
+export const PRIMARY_VALUE_WIDTH_RATIO_SOLO = 1;
+export const SECONDARY_VALUE_WIDTH_RATIO = 2;
+export const GROUP_NAME_WIDTH_MULTIPLIER = 1.5;
+export const TEXT_Y_OFFSET_WITH_SECONDARY = 2;
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,23 @@
+import {estimateStringWidth} from '@shopify/polaris-viz-core';
+
+export function truncateText(
+  text: string,
+  maxWidth: number,
+  characterWidths: {[key: string]: number},
+) {
+  const estimatedWidth = estimateStringWidth(text, characterWidths);
+
+  if (estimatedWidth <= maxWidth) {
+    return text;
+  }
+
+  let truncated = text;
+  while (
+    estimateStringWidth(`${truncated}...`, characterWidths) > maxWidth &&
+    truncated.length > 0
+  ) {
+    truncated = truncated.slice(0, -1);
+  }
+
+  return truncated.length === 0 ? '' : `${truncated}...`;
+}