@shopify/polaris-viz - npm Package Compare versions

Comparing version 0.21.3 to 0.21.4

CHANGELOG.md

@@ -5,2 +5,13 @@ # Changelog
 
+## [0.21.4] - 2021-10-20
+
+### Added
+- Overflow style to `<StackedAreaChart />`
+- Charts with `xAxisOptions` have the option to disable text wrapping of xAxis labels
+
+### Fixed
+-`<StackedAreaChart />` stroke is cut off if it reaches the top of the chart
+- Various xAxis label bugs that caused labels to truncate too early
+- Apply yAxis formatter to default tooltip on `<LineChart />`
+
 ## [0.21.3] - 2021-10-15
@@ -7,0 +18,0 @@

package.json

 {
   "name": "@shopify/polaris-viz",
   "description": "Shopify’s viz component library",
-  "version": "0.21.3",
+  "version": "0.21.4",
   "private": false,
@@ -6,0 +6,0 @@ "license": "SEE LICENSE IN LICENSE.md",

types/components/BarChart/Chart.d.ts

 import React from 'react';
 import { Dimensions, XAxisOptions, YAxisOptions } from '../../types';
 import type { BarChartData, RenderTooltipContentData, AnnotationLookupTable } from './types';
-declare type RequiredXAxis = Pick<Required<XAxisOptions>, 'labelFormatter' | 'useMinimalLabels'> & XAxisOptions;
+declare type RequiredXAxis = Pick<Required<XAxisOptions>, 'labelFormatter' | 'useMinimalLabels' | 'wrapLabels'> & XAxisOptions;
 interface Props {
@@ -6,0 +6,0 @@ data: BarChartData[];

types/components/LineChart/types.d.ts

@@ -27,2 +27,3 @@ import type { DataSeries, Data, LineStyle, StringLabelFormatter, NumberLabelFormatter, Color } from '../../types';
     hide?: boolean;
+    wrapLabels: boolean;
 }
@@ -29,0 +30,0 @@ export interface YAxisOptions {

types/components/MultiSeriesBarChart/types.d.ts

@@ -39,2 +39,3 @@ import type { Series as ShapeSeries } from 'd3-shape';
     hide?: boolean;
+    wrapLabels?: boolean;
 }
@@ -41,0 +42,0 @@ export interface YAxisOptions {

types/components/StackedAreaChart/Chart.d.ts

@@ -6,3 +6,6 @@ import React from 'react';
     hideXAxis: boolean;
-    xAxisLabels: string[];
+    xAxisOptions: {
+        labels: string[];
+        wrapLabels?: boolean;
+    };
     series: Series[];
@@ -16,3 +19,3 @@ formatXAxisLabel: StringLabelFormatter;
 }
-export declare function Chart({ hideXAxis, xAxisLabels, series, dimensions, formatXAxisLabel, formatYAxisLabel, renderTooltipContent, isAnimated, theme, }: Props): JSX.Element | null;
+export declare function Chart({ hideXAxis, xAxisOptions, series, dimensions, formatXAxisLabel, formatYAxisLabel, renderTooltipContent, isAnimated, theme, }: Props): JSX.Element | null;
 export {};

types/components/StackedAreaChart/StackedAreaChart.d.ts

@@ -10,2 +10,3 @@ import React from 'react';
         hide?: boolean;
+        wrapLabels?: boolean;
     };
@@ -12,0 +13,0 @@ yAxisOptions?: {

types/constants.d.ts

@@ -16,3 +16,3 @@ import type { Theme } from './types';
 export declare const LINE_HEIGHT = 15;
-export declare const MAX_TEXT_BOX_HEIGHT: number;
+export declare const LABEL_ELLIPSIS_LENGTH = 3;
 export declare const SMALL_LABEL_WIDTH = 50;
@@ -19,0 +19,0 @@ export declare const LABEL_SPACE_MINUS_FIRST_AND_LAST = 0.6;

types/hooks/useLinearXAxisDetails.d.ts

@@ -10,4 +10,5 @@ import type { StringLabelFormatter, NullableData, Data, DataSeries, Color, YAxisTick } from '../types';
     useMinimalLabels?: boolean;
+    wrapLabels: boolean;
 }
-export declare function useLinearXAxisDetails({ series, fontSize, width, formatXAxisLabel, initialTicks, xAxisLabels, useMinimalLabels, }: ChartDetails): {
+export declare function useLinearXAxisDetails({ series, fontSize, width, formatXAxisLabel, initialTicks, xAxisLabels, useMinimalLabels, wrapLabels, }: ChartDetails): {
     maxXLabelHeight: number;
@@ -14,0 +15,0 @@ maxDiagonalLabelLength: number;

types/types.d.ts

@@ -51,2 +51,3 @@ import type { InterpolatorFn } from '@react-spring/web';
     hide?: boolean;
+    wrapLabels?: boolean;
 }
@@ -53,0 +54,0 @@ export interface YAxisOptions {

types/utilities/get-bar-xaxis-details.d.ts

@@ -9,4 +9,5 @@ interface LayoutDetails {
     minimalLabelIndexes?: number[] | null;
+    wrapLabels: boolean;
 }
-export declare function getBarXAxisDetails({ xLabels, yAxisLabelWidth, fontSize, width, innerMargin, outerMargin, minimalLabelIndexes, }: LayoutDetails): {
+export declare function getBarXAxisDetails({ xLabels, yAxisLabelWidth, fontSize, width, innerMargin, outerMargin, minimalLabelIndexes, wrapLabels, }: LayoutDetails): {
     maxXLabelHeight: number;
@@ -13,0 +14,0 @@ maxDiagonalLabelLength: number;

No alert changes

Improved metrics

Total package byte prevSize

1087863

increased by0.41%

Lines of code

16432

increased by0.41%

No dependency changes