Merge pull request #1583 from Shopify/ux-updates

UX updates for in-context MetricCards
Shopify · Sep 19, 2023 · c5d9b29 · c5d9b29
2 parents 06a5e87 + f4eee43
commit c5d9b29
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 38 deletions.
diff --git a/packages/polaris-viz-core/CHANGELOG.md b/packages/polaris-viz-core/CHANGELOG.md
@@ -5,7 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-<!-- ## Unreleased -->
+## Unreleased
+
+### Removed
+
+- Last point from LineSeries
 
 ## [9.11.0] - 2023-09-12
 

diff --git a/packages/polaris-viz-core/src/components/LineSeries/LineSeries.tsx b/packages/polaris-viz-core/src/components/LineSeries/LineSeries.tsx
@@ -19,7 +19,6 @@ import {
 import {
   COLOR_VISION_SINGLE_ITEM,
   SHAPE_ANIMATION_HEIGHT_BUFFER,
-  LINE_SERIES_POINT_RADIUS,
 } from '../../constants';
 
 import {Area, AnimatedLine, AnimatedArea} from './components';
@@ -52,7 +51,7 @@ export function LineSeries({
 }: LineSeriesProps) {
   const {
     // eslint-disable-next-line id-length
-    components: {Defs, Mask, G, Rect, Path, Circle},
+    components: {Defs, Mask, G, Rect, Path},
     animated,
   } = usePolarisVizContext();
 
@@ -113,7 +112,7 @@ export function LineSeries({
     !hasNulls(previousData) &&
     data.data.length === previousData?.data.length;
 
-  const {x: lastX = 0, y: lastY = 0} = lastLinePointCoordinates ?? {};
+  const {y: lastY = 0} = lastLinePointCoordinates ?? {};
 
   const zeroLineData = data.data.map((dataPoint) => ({
     ...dataPoint,
@@ -131,8 +130,6 @@ export function LineSeries({
 
   const PathHoverTargetSize = 15;
 
-  const showPoint =
-    -isSparkChart && !data.isComparison && lastLinePointCoordinates != null;
   const showArea =
     selectedTheme.line.hasArea && data?.styleOverride?.line?.hasArea !== false;
 
@@ -156,9 +153,7 @@ export function LineSeries({
           <Mask id={`mask-${id}`}>
             {dataIsValidForAnimation ? (
               <AnimatedLine
-                lastX={lastX}
                 lastY={lastY}
-                showPoint={showPoint}
                 delay={delay}
                 lineGenerator={lineGenerator}
                 strokeWidth={strokeWidth}
@@ -188,14 +183,6 @@ export function LineSeries({
                     strokeLinecap: 'round',
                   }}
                 />
-                {showPoint && (
-                  <Circle
-                    cx={lastX}
-                    cy={lastY}
-                    r={LINE_SERIES_POINT_RADIUS}
-                    fill="white"
-                  />
-                )}
               </Fragment>
             )}
           </Mask>

diff --git a/packages/polaris-viz-core/src/components/LineSeries/components/AnimatedLine/AnimatedLine.tsx b/packages/polaris-viz-core/src/components/LineSeries/components/AnimatedLine/AnimatedLine.tsx
@@ -4,7 +4,6 @@ import {useSpring} from '@react-spring/core';
 import {
   usePolarisVizContext,
   LINES_LOAD_ANIMATION_CONFIG,
-  LINE_SERIES_POINT_RADIUS,
   getColorVisionStylesForActiveIndex,
 } from '../../../../';
 import {useSpringConfig} from '../../../../hooks/useSpringConfig';
@@ -21,17 +20,14 @@ export function AnimatedLine({
   index,
   strokeWidth,
   strokeDasharray,
-  showPoint,
-  lastX,
   lastY,
   zeroLineY,
 }) {
   const {
-    components: {Path, Circle},
+    components: {Path},
     animated,
   } = usePolarisVizContext();
   const AnimatedPath = animated(Path);
-  const AnimatedCircle = animated(Circle);
 
   const springConfig = useSpringConfig({
     shouldAnimate: !immediate,
@@ -42,7 +38,7 @@ export function AnimatedLine({
 
   const mounted = useRef(false);
 
-  const {animatedLineShape, cy} = useSpring({
+  const {animatedLineShape} = useSpring({
     from: {
       cy: mounted.current ? lastY : zeroLineY,
       animatedLineShape: lineGenerator(
@@ -72,14 +68,6 @@ export function AnimatedLine({
           strokeDasharray,
         }}
       />
-      {showPoint && (
-        <AnimatedCircle
-          cx={lastX}
-          cy={cy}
-          r={LINE_SERIES_POINT_RADIUS}
-          fill="white"
-        />
-      )}
     </Fragment>
   );
 }
diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md
@@ -20,6 +20,8 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 -  Changed `<DonutChart />` to not show 0 or negative values.
 -  Changed `<DonutChart />` to only show a maximum of 5 data points.
 -  Updated `<DonutChart />` default styles.
+-  Changed `<TrendIndicator />` font-size to 11px from 12px.
+-  Changed `<TrendIndicator />` font-weight to 450 from 600.
 
 ## [9.10.6] - 2023-08-24
 

diff --git a/packages/polaris-viz/src/components/TrendIndicator/TrendIndicator.tsx b/packages/polaris-viz/src/components/TrendIndicator/TrendIndicator.tsx
@@ -12,6 +12,7 @@ import {
   FONT_SIZE,
   HEIGHT,
   Y_OFFSET,
+  FONT_WEIGHT,
 } from './constants';
 
 export interface TrendIndicatorProps {
@@ -67,7 +68,7 @@ export function TrendIndicator({
           y={(HEIGHT + Y_OFFSET) / 2}
           fontSize={FONT_SIZE}
           fill="currentColor"
-          fontWeight="600"
+          fontWeight={FONT_WEIGHT}
           dominantBaseline="middle"
           fontFamily="-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
           textRendering="geometricPrecision"

diff --git a/packages/polaris-viz/src/components/TrendIndicator/constants.ts b/packages/polaris-viz/src/components/TrendIndicator/constants.ts
@@ -4,8 +4,8 @@ export const NO_VALUE_ICON_HEIGHT = 2;
 export const TEXT_ICON_SPACING = 4;
 export const ICON_SIZE = 5.5;
 
-export const FONT_SIZE = 12;
-export const FONT_WEIGHT = 600;
+export const FONT_SIZE = 11;
+export const FONT_WEIGHT = 450;
 
 export const HEIGHT = 16;
 

diff --git a/packages/polaris-viz/src/data/character-width-offsets.json b/packages/polaris-viz/src/data/character-width-offsets.json
@@ -13,9 +13,9 @@
     "10": 0.85,
     "11": 0.92,
     "12": 1,
-    "13": 1.07,
+    "13": 1.08,
     "14": 1.15,
-    "15": 1.22,
+    "15": 1.23,
     "16": 1.3,
     "17": 1.37,
     "18": 1.45,
@@ -29,7 +29,7 @@
     "26": 2.04,
     "27": 2.12,
     "28": 2.2,
-    "29": 2.27,
+    "29": 2.28,
     "30": 2.35,
     "31": 2.43,
     "32": 2.51,
@@ -47,7 +47,8 @@
     "200": 0.97,
     "300": 0.99,
     "400": 1,
-    "500": 1.03,
+    "450": 1.04,
+    "500": 1.04,
     "600": 1.06,
     "700": 1.09,
     "800": 1.14,

diff --git a/packages/polaris-viz/src/utilities/tests/estimateStringWidthWithOffset.test.ts b/packages/polaris-viz/src/utilities/tests/estimateStringWidthWithOffset.test.ts
@@ -8,7 +8,7 @@ describe('estimateStringWidthWithOffset()', () => {
       ${4}     | ${23.79}
       ${10}    | ${56.16}
       ${12}    | ${66.07}
-      ${15}    | ${80.61}
+      ${15}    | ${81.27}
       ${20}    | ${105.05}
       ${40}    | ${206.14}
     `(`returns width with $fontSize offset`, ({fontSize, expected}) => {

diff --git a/scripts/character-widths/build-character-offsets.html b/scripts/character-widths/build-character-offsets.html
@@ -42,6 +42,12 @@
         );
       });
 
+      // we will need to add the Uplift font weights eventually
+      // for now I'm just adding 450 manually
+      characters.fontWeight[450] = getWidthWithBaseline(
+        getWidth(null, FONT_SIZE, 450),
+      );
+
       let string = JSON.stringify(characters);
       string = string.replace('&nbsp;', ' ');