@shopify/polaris-viz - npm Package Compare versions

Comparing version 0.12.0 to 0.12.1

CHANGELOG.md

 # Changelog
 
+## [0.12.1] — 2021-05-10
+
+### Fixed
+
+- yAxis ticks sometimes getting cut off
+- `<SparkLine/>` and `<Sparkbar/>` stroke dasharray treatment is consistent at all sizes
+- Components now resize when their container resizes, not just when the page resizes
+
 ## [0.12.0] — 2021-05-10
@@ -13,3 +21,3 @@
 
-## Changed
+### Changed
 
@@ -16,0 +24,0 @@ - `<MultiSeriesBarChart/>`, `<BarChart />` and `<LineChart/>` yScale will allow data to overflow the highest tick if the highest value is less than half way to the next tick

package.json

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

types/components/BarChart/Chart.d.ts

 import React from 'react';
+import { Dimensions } from '../../types';
 import { BarChartData, RenderTooltipContentData, BarOptions as BarChartBarOptions, GridOptions, XAxisOptions, YAxisOptions, AnnotationLookupTable } from './types';
@@ -10,3 +11,3 @@ declare type BarOptions = Omit<BarChartBarOptions, 'innerMargin' | 'outerMargin'> & {
     annotationsLookupTable: AnnotationLookupTable;
-    chartDimensions: DOMRect;
+    chartDimensions: Dimensions;
     renderTooltipContent: (data: RenderTooltipContentData) => React.ReactNode;
@@ -13,0 +14,0 @@ emptyStateText?: string;

types/components/LineChart/Chart.d.ts

 import React from 'react';
+import { Dimensions } from '../../types';
 import { RenderTooltipContentData, LineOptions, XAxisOptions, YAxisOptions, GridOptions, CrossHairOptions, SeriesWithDefaults } from './types';
 interface Props {
     series: SeriesWithDefaults[];
-    dimensions: DOMRect;
+    dimensions: Dimensions;
     renderTooltipContent: (data: RenderTooltipContentData) => React.ReactNode;
@@ -7,0 +8,0 @@ emptyStateText?: string;

types/components/MultiSeriesBarChart/Chart.d.ts

 import React from 'react';
+import { Dimensions } from '../../types';
 import { Series, RenderTooltipContentData, BarOptions as MultiSeriesBarOptions, GridOptions, XAxisOptions, YAxisOptions } from './types';
@@ -9,3 +10,3 @@ declare type BarOptions = Omit<MultiSeriesBarOptions, 'innerMargin' | 'outerMargin'> & {
     series: Required<Series>[];
-    chartDimensions: DOMRect;
+    chartDimensions: Dimensions;
     renderTooltipContent(data: RenderTooltipContentData): React.ReactNode;
@@ -12,0 +13,0 @@ barOptions: BarOptions;

types/components/StackedAreaChart/Chart.d.ts

 import React from 'react';
-import { StringLabelFormatter, NumberLabelFormatter } from '../../types';
+import { StringLabelFormatter, NumberLabelFormatter, Dimensions } from '../../types';
 import { Series, RenderTooltipContentData } from './types';
@@ -10,3 +10,3 @@ interface Props {
     renderTooltipContent(data: RenderTooltipContentData): React.ReactNode;
-    dimensions: DOMRect;
+    dimensions: Dimensions;
     opacity: number;
@@ -13,0 +13,0 @@ isAnimated: boolean;

types/components/TooltipContainer/TooltipContainer.d.ts

 import { ReactNode } from 'react';
+import { Dimensions } from '../../types';
 interface Props {
@@ -13,3 +14,3 @@ children: ReactNode;
     currentY: number;
-    chartDimensions: DOMRect;
+    chartDimensions: Dimensions;
     position?: 'center' | 'auto';
@@ -16,0 +17,0 @@ id?: string;

types/hooks/useLinearXAxisDetails.d.ts

@@ -1,6 +0,6 @@
-import { StringLabelFormatter, NullableData, Data, DataSeries, SeriesColor, YAxisTick } from '../types';
+import { StringLabelFormatter, NullableData, Data, DataSeries, SeriesColor, YAxisTick, Dimensions } from '../types';
 export interface ChartDetails {
     series: DataSeries<Data | NullableData, SeriesColor>[];
     fontSize: number;
-    chartDimensions: DOMRect;
+    chartDimensions: Dimensions;
     formatXAxisLabel: StringLabelFormatter;
@@ -7,0 +7,0 @@ initialTicks: YAxisTick[];

types/types.d.ts

@@ -39,1 +39,5 @@ export interface Data {
 }
+export interface Dimensions {
+    width: number;
+    height: number;
+}

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

@@ -0,1 +1,2 @@
+import { Dimensions } from '../types';
 interface LayoutDetails {
@@ -5,3 +6,3 @@ yAxisLabelWidth: number;
     xLabels: string[];
-    chartDimensions: DOMRect;
+    chartDimensions: Dimensions;
     innerMargin: number;
@@ -8,0 +9,0 @@ outerMargin: number;

No alert changes

Improved metrics

Total package byte prevSize

753830

increased by0.94%

Lines of code

10543

increased by1.36%

No dependency changes