diff --git a/packages/polaris-viz-core/CHANGELOG.md b/packages/polaris-viz-core/CHANGELOG.md index 1d72c0318..30c60d9df 100644 --- 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 + +### 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 index 5b3f95bd9..850d89ec2 100644 --- 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({ {dataIsValidForAnimation ? ( - {showPoint && ( - - )} )} 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 index 2b9dc5d3e..c9f7b7093 100644 --- 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 && ( - - )} ); } diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md index 50fb53f00..3e8fa2418 100644 --- 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 `` to not show 0 or negative values. - Changed `` to only show a maximum of 5 data points. - Updated `` default styles. +- Changed `` font-size to 11px from 12px. +- Changed `` 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 index 7b4749cbf..d7e08753d 100644 --- 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 index 2676a0348..f2c27b5e2 100644 --- 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 index fb73f2673..3bfaf0aeb 100644 --- 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 index 607edd8f7..506ecf202 100644 --- 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 index e455fa232..c23c81e21 100644 --- 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(' ', ' ');