Remove last point from Line Series; Change TrendIndicator font-size t…

…o 12px
Shopify · Sep 7, 2023 · 5dbdd0a · 5dbdd0a
1 parent e89bec6
commit 5dbdd0a
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 33 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.10.6] - 2023-08-24
 

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
@@ -12,6 +12,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 = 400;
 
 export const HEIGHT = 16;