@shopify/polaris-viz - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

CHANGELOG.md

 # Changelog
 
+## [0.2.0] - 2021-02-03
+
+### Changed
+
+- Unified the data/series interfaces for [`<BarChart />`](src/components/BarChart/BarChart.md#data), [`<LineChart />`](src/components/LineChart/LineChart.md#the-series-type)), [`<MultiSeriesBarChart />`](src/components/MultiSeriesBarChart/MultiSeriesBarChart.md#the-series-type), and [`<StackedAreaChart />`](src/components/StackedAreaChart/StackedAreaChart.md#the-series-type)
+
+### Added
+
+- Added a default color utility which unifies the default colors provided in the `<BarChart />`, `<LineChart />`, `<MultiSeriesBarChart />`, and `<StackedAreaChart />`
+
+### Fixed
+
+- Long label handling for the `<BarChart />`, `<LineChart />`, `<MultiSeriesBarChart />`, and `<StackedAreaChart />`
+
 ## [0.1.1] - 2021-01-11
@@ -4,0 +18,0 @@

package.json

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

types/components/BarChart/BarChart.d.ts

 import React from 'react';
-import { Color } from 'types';
+import { Color, Data } from 'types';
 import { StringLabelFormatter, NumberLabelFormatter } from '../../types';
-import { BarData, BarMargin, RenderTooltipContentData } from './types';
+import { BarMargin, RenderTooltipContentData } from './types';
 export interface BarChartProps {
-    data: BarData[];
+    data: Data[];
     barMargin?: keyof typeof BarMargin;
@@ -16,2 +16,2 @@ accessibilityLabel?: string;
 }
-export declare function BarChart({ data, highlightColor, accessibilityLabel, barMargin, color, timeSeries, formatXAxisLabel, formatYAxisLabel, renderTooltipContent, }: BarChartProps): JSX.Element;
+export declare function BarChart({ data, accessibilityLabel, color, highlightColor, barMargin, timeSeries, formatXAxisLabel, formatYAxisLabel, renderTooltipContent, }: BarChartProps): JSX.Element;

types/components/BarChart/Chart.d.ts

 import React from 'react';
-import { Color } from 'types';
+import { Color, Data } from 'types';
 import { StringLabelFormatter, NumberLabelFormatter } from '../../types';
-import { BarData, RenderTooltipContentData } from './types';
+import { RenderTooltipContentData } from './types';
 interface Props {
-    data: BarData[];
+    data: Data[];
     chartDimensions: DOMRect;
     barMargin: number;
     color: Color;
-    highlightColor?: Color;
+    highlightColor: Color;
     formatXAxisLabel: StringLabelFormatter;
@@ -12,0 +12,0 @@ formatYAxisLabel: NumberLabelFormatter;

types/components/BarChart/components/Bar/Bar.d.ts

@@ -6,3 +6,3 @@ /// <reference types="react" />
     color: Color;
-    highlightColor?: Color;
+    highlightColor: Color;
     isSelected: boolean;
@@ -9,0 +9,0 @@ x: number;

types/components/BarChart/components/index.d.ts

@@ -1,3 +0,2 @@
-export { XAxis } from './XAxis';
 export { Bar } from './Bar';
 export { TooltipContent, TooltipContentProps } from './TooltipContent';

types/components/BarChart/constants.d.ts

@@ -8,3 +8,3 @@ export declare const MIN_BAR_HEIGHT = 5;
 };
-export declare const LINE_HEIGHT = 12;
+export declare const LINE_HEIGHT = 14;
 export declare const TICK_SIZE = 6;
@@ -15,2 +15,3 @@ export declare const MIN_Y_LABEL_SPACE = 80;
 export declare const SPACING = 16;
+export declare const SPACING_BASE_TIGHT = 12;
 export declare const SPACING_LOOSE = 20;
@@ -20,2 +21,1 @@ export declare const SMALL_SCREEN = 500;
 export declare const SMALL_FONT_SIZE = 10;
-export declare const DIAGONAL_ANGLE = -40;

types/components/BarChart/hooks/use-x-scale.d.ts

@@ -1,2 +0,2 @@
-import { BarData } from '../types';
+import { Data } from 'types';
 import { StringLabelFormatter } from '../../../types';
@@ -6,3 +6,3 @@ export declare function useXScale({ drawableWidth, barMargin, data, formatXAxisLabel, }: {
     barMargin: number;
-    data: BarData[];
+    data: Data[];
     formatXAxisLabel: StringLabelFormatter;
@@ -9,0 +9,0 @@ }): {

types/components/BarChart/hooks/use-y-scale.d.ts

@@ -1,6 +0,6 @@
-import { BarData } from '../types';
+import { Data } from 'types';
 import { NumberLabelFormatter } from '../../../types';
 export declare function useYScale({ drawableHeight, data, formatYAxisLabel, }: {
     drawableHeight: number;
-    data: BarData[];
+    data: Data[];
     formatYAxisLabel: NumberLabelFormatter;
@@ -7,0 +7,0 @@ }): {

types/components/BarChart/types.d.ts

@@ -1,5 +0,1 @@
-export interface BarData {
-    rawValue: number;
-    label: string;
-}
 export declare enum BarMargin {
@@ -6,0 +2,0 @@ Small = 0.05,

types/components/index.d.ts

@@ -14,1 +14,2 @@ export { Point } from './Point';
 export { TooltipContent, TooltipContentProps } from './TooltipContent';
+export { BarChartXAxis } from './BarChartXAxis';

types/components/LinearXAxis/LinearXAxis.d.ts

 import React from 'react';
 import { ScaleLinear } from 'd3-scale';
+interface XAxisDetails {
+    maxXLabelHeight: number;
+    maxDiagonalLabelLength: number;
+    needsDiagonalLabels: boolean;
+    ticks: number[];
+    horizontalLabelWidth: number;
+}
 interface Props {
     xScale: ScaleLinear<number, number>;
-    labels?: string[] | null;
-    dimensions: DOMRect;
+    labels: string[] | null;
+    drawableWidth: number;
+    fontSize: number;
+    xAxisDetails: XAxisDetails;
     drawableHeight: number;
-    axisMargin: number;
 }
-declare function Axis({ xScale, drawableHeight, dimensions, labels, axisMargin }: Props): JSX.Element;
+declare function Axis({ xScale, labels, xAxisDetails, fontSize, drawableWidth, drawableHeight, }: Props): JSX.Element;
 export declare const LinearXAxis: React.MemoExoticComponent<typeof Axis>;
 export {};

types/components/LineChart/Chart.d.ts

@@ -5,3 +5,3 @@ import React from 'react';
 interface Props {
-    series: Series[];
+    series: Required<Series>[];
     xAxisLabels?: string[];
@@ -8,0 +8,0 @@ formatXAxisLabel: StringLabelFormatter;

types/components/LineChart/components/Legend/Legend.d.ts

 /// <reference types="react" />
 import { Series } from '../../types';
 interface Props {
-    series: Series[];
+    series: Required<Series>[];
 }
 export declare function Legend({ series }: Props): JSX.Element;
 export {};

types/components/LineChart/components/Line/Line.d.ts

@@ -6,3 +6,3 @@ /// <reference types="react" />
     path: string;
-    series: Series;
+    series: Required<Series>;
     xScale: ScaleLinear<number, number>;
@@ -9,0 +9,0 @@ yScale: ScaleLinear<number, number>;

types/components/LineChart/components/TooltipContent/TooltipContent.d.ts

 /// <reference types="react" />
-import { LineChartStyle } from '../../types';
+import { Color } from 'types';
+import { LineStyle } from '../../types';
 interface TooltipData {
@@ -9,3 +10,4 @@ name: string;
     };
-    style?: Partial<LineChartStyle>;
+    color: Color;
+    lineStyle: LineStyle;
 }
@@ -12,0 +14,0 @@ export interface TooltipContentProps {

types/components/LineChart/constants.d.ts

@@ -10,7 +10,1 @@ export declare const MIN_Y_LABEL_SPACE = 50;
 export declare const FONT_SIZE = 12;
-export declare enum Margin {
-    Top,
-    Left = 0,
-    Bottom = 30,
-    Right
-}

types/components/LineChart/hooks/index.d.ts

@@ -1,2 +0,1 @@
-export { useXScale } from './use-x-scale';
 export { useYScale } from './use-y-scale';

types/components/LineChart/types.d.ts

@@ -1,15 +0,6 @@
-import { Color } from 'types';
+import { Color, DataSeries, Data } from '../../types';
 export declare type LineStyle = 'dashed' | 'solid';
-export interface LineChartStyle {
-    color: Color;
-    lineStyle: LineStyle;
+export interface Series extends DataSeries<Data> {
+    lineStyle?: LineStyle;
 }
-export interface Series {
-    name: string;
-    data: {
-        label: string;
-        rawValue: number;
-    }[];
-    style?: Partial<LineChartStyle>;
-}
 interface TooltipData {
@@ -21,3 +12,4 @@ name: string;
     };
-    style?: Partial<LineChartStyle>;
+    color: Color;
+    lineStyle: LineStyle;
 }
@@ -24,0 +16,0 @@ export interface RenderTooltipContentData {

types/components/MultiSeriesBarChart/Chart.d.ts

 import React from 'react';
 import { StringLabelFormatter, NumberLabelFormatter } from '../../types';
-import { Data, RenderTooltipContentData } from './types';
+import { Series, RenderTooltipContentData } from './types';
 interface Props {
-    series: Data[];
+    series: Required<Series>[];
     labels: string[];
@@ -7,0 +7,0 @@ chartDimensions: DOMRect;

types/components/MultiSeriesBarChart/components/index.d.ts

@@ -1,4 +0,3 @@
-export { XAxis } from './XAxis';
 export { BarGroup } from './BarGroup';
 export { Legend } from './Legend';
 export { StackedBarGroup } from './StackedBarGroup';

types/components/MultiSeriesBarChart/components/Legend/Legend.d.ts

 /// <reference types="react" />
-import { Data } from 'components/MultiSeriesBarChart/types';
+import { Series } from 'components/MultiSeriesBarChart/types';
+declare type LegendSeries = Required<Omit<Series, 'highlightColor'>>;
 interface Props {
-    series: Data[];
+    series: LegendSeries[];
 }
 export declare function Legend({ series }: Props): JSX.Element;
 export {};

types/components/MultiSeriesBarChart/constants.d.ts

@@ -21,1 +21,2 @@ export declare const MIN_BAR_HEIGHT = 5;
 export declare const DIAGONAL_ANGLE = -40;
+export declare const INNER_PADDING = 0.3;

types/components/MultiSeriesBarChart/hooks/use-y-scale.d.ts

@@ -1,6 +0,6 @@
-import { Data, StackSeries } from '../types';
+import { Series, StackSeries } from '../types';
 import { NumberLabelFormatter } from '../../../types';
 export declare function useYScale({ drawableHeight, data, formatYAxisLabel, stackedValues, }: {
     drawableHeight: number;
-    data: Data[];
+    data: Series[];
     formatYAxisLabel: NumberLabelFormatter;
@@ -7,0 +7,0 @@ stackedValues: StackSeries[] | null;

types/components/MultiSeriesBarChart/MultiSeriesBarChart.d.ts

 import React from 'react';
 import { StringLabelFormatter, NumberLabelFormatter } from '../../types';
-import { Data, RenderTooltipContentData } from './types';
+import { Series, RenderTooltipContentData } from './types';
 export interface MultiSeriesBarChartProps {
-    series: Data[];
+    series: Series[];
     labels: string[];
@@ -7,0 +7,0 @@ timeSeries?: boolean;

types/components/MultiSeriesBarChart/types.d.ts

@@ -1,10 +0,7 @@
-import { Series } from 'd3-shape';
-import { Color } from 'types';
-export interface Data {
-    data: number[];
-    color: Color;
+import { Series as ShapeSeries } from 'd3-shape';
+import { Color, DataSeries, Data } from '../../types';
+export interface Series extends DataSeries<Data> {
     highlightColor?: Color;
-    label: string;
 }
-export declare type StackSeries = Series<{
+export declare type StackSeries = ShapeSeries<{
     [key: string]: number;
@@ -11,0 +8,0 @@ }, string>;

types/components/MultiSeriesBarChart/utilities/get-min-max.d.ts

@@ -1,5 +0,5 @@
-import { Data, StackSeries } from '../types';
-export declare function getMinMax(stackedValues: StackSeries[] | null, data: Data[]): {
+import { Series, StackSeries } from '../types';
+export declare function getMinMax(stackedValues: StackSeries[] | null, data: Series[]): {
     min: number;
     max: number;
 };

types/components/MultiSeriesBarChart/utilities/get-stacked-values.d.ts

@@ -1,4 +0,4 @@
-import { Data } from '../types';
-export declare function getStackedValues(series: Data[], labels: string[]): import("d3-shape").Series<{
+import { Series } from '../types';
+export declare function getStackedValues(series: Series[], labels: string[]): import("d3-shape").Series<{
     [key: string]: number;
 }, string>[];

types/components/StackedAreaChart/Chart.d.ts

@@ -6,3 +6,3 @@ import React from 'react';
     xAxisLabels: string[];
-    series: Series[];
+    series: Required<Series>[];
     formatXAxisLabel: StringLabelFormatter;
@@ -9,0 +9,0 @@ formatYAxisLabel: NumberLabelFormatter;

types/components/StackedAreaChart/components/Legend/Legend.d.ts

 /// <reference types="react" />
 import { Series } from '../../types';
 interface Props {
-    series: Series[];
+    series: Required<Series>[];
 }
 export declare function Legend({ series }: Props): JSX.Element;
 export {};

types/components/StackedAreaChart/constants.d.ts

@@ -6,3 +6,4 @@ export declare const MIN_Y_LABEL_SPACE = 80;
     Loose = 20,
-    ExtraTight = 4
+    ExtraTight = 4,
+    BaseTight = 12
 }
@@ -12,4 +13,4 @@ export declare enum Margin {
     Left = 0,
-    Bottom = 30,
+    Bottom = 12,
     Right = 4
 }

types/components/StackedAreaChart/types.d.ts

@@ -1,7 +0,3 @@
-import { Color } from 'types';
-declare type Data = number | null;
-export interface Series {
-    label: string;
-    data: Data[];
-    color: Color;
+import { Color, DataSeries, NullableData } from '../../types';
+export interface Series extends DataSeries<NullableData> {
 }
@@ -16,2 +12,1 @@ export interface RenderTooltipContentData {
 }
-export {};

types/components/YAxis/YAxis.d.ts

@@ -9,5 +9,6 @@ import React from 'react';
     drawableWidth: number;
+    fontSize?: number;
 }
-declare function Axis({ ticks, drawableWidth }: Props): JSX.Element;
+declare function Axis({ ticks, drawableWidth, fontSize }: Props): JSX.Element;
 export declare const YAxis: React.MemoExoticComponent<typeof Axis>;
 export {};

types/constants.d.ts

 export declare const CROSSHAIR_WIDTH = 5;
-export declare const MIN_Y_LABEL_SPACE = 50;
 export declare const SPACING_TIGHT = 8;
@@ -8,1 +7,29 @@ export declare const SMALL_WIDTH = 300;
 export declare const FONT_SIZE = 12;
+export declare const MARGIN: {
+    Top: number;
+    Right: number;
+    Bottom: number;
+    Left: number;
+};
+export declare const MIN_Y_LABEL_SPACE = 80;
+export declare const SPACING_EXTRA_TIGHT = 4;
+export declare const SPACING = 16;
+export declare const SPACING_BASE_TIGHT = 12;
+export declare const SPACING_LOOSE = 20;
+export declare const SMALL_SCREEN = 500;
+export declare const SMALL_FONT_SIZE = 10;
+export declare const DIAGONAL_ANGLE = -40;
+export declare const TEXT_BOX_LINE_HEIGHT = 22.5;
+export declare const MIN_HORIZONTAL_LABEL_SPACE = 25;
+export declare const DEFAULT_LABEL_RATIO = 2;
+export declare const MIN_HORIZONTAL_TICKS = 3;
+export declare const LINE_HEIGHT = 15;
+export declare const MAX_TEXT_BOX_HEIGHT: number;
+export declare const SMALL_LABEL_WIDTH = 50;
+export declare const LABEL_SPACE_MINUS_FIRST_AND_LAST = 0.6;
+export declare enum Margin {
+    Top,
+    Left = 0,
+    Bottom,
+    Right
+}

types/hooks/index.d.ts

 export { usePrefersReducedMotion } from './usePrefersReducedMotion';
+export { useLinearXAxisDetails, ChartDetails } from './useLinearXAxisDetails';
+export { useLinearXScale } from './useLinearXScale';

types/types.d.ts

@@ -0,1 +1,14 @@
+export interface Data {
+    label: string;
+    rawValue: number;
+}
+export interface NullableData {
+    label: string;
+    rawValue: number | null;
+}
+export interface DataSeries<T> {
+    name: string;
+    data: T[];
+    color?: Color;
+}
 export declare type Color = TokensColor | VizPaletteColor;
@@ -2,0 +15,0 @@ export declare type TokensColor = 'colorBlack' | 'colorBlue' | 'colorBlueDark' | 'colorBlueDarker' | 'colorBlueLight' | 'colorBlueLighter' | 'colorBlueText' | 'colorGreen' | 'colorGreenDark' | 'colorGreenDarker' | 'colorGreenLight' | 'colorGreenLighter' | 'colorGreenText' | 'colorIndigo' | 'colorIndigoDark' | 'colorIndigoDarker' | 'colorIndigoLight' | 'colorIndigoLighter' | 'colorIndigoText' | 'colorInk' | 'colorInkLight' | 'colorInkLighter' | 'colorInkLightest' | 'colorOrange' | 'colorOrangeDark' | 'colorOrangeDarker' | 'colorOrangeLight' | 'colorOrangeLighter' | 'colorOrangeText' | 'colorPurple' | 'colorPurpleDark' | 'colorPurpleDarker' | 'colorPurpleLight' | 'colorPurpleLighter' | 'colorPurpleText' | 'colorRed' | 'colorRedDark' | 'colorRedDarker' | 'colorRedLight' | 'colorRedLighter' | 'colorRedText' | 'colorSky' | 'colorSkyDark' | 'colorSkyLight' | 'colorSkyLighter' | 'colorTeal' | 'colorTealDark' | 'colorTealDarker' | 'colorTealLight' | 'colorTealLighter' | 'colorTealText' | 'colorWhite' | 'colorYellow' | 'colorYellowDark' | 'colorYellowDarker' | 'colorYellowLight' | 'colorYellowLighter';

types/utilities/index.d.ts

@@ -6,1 +6,8 @@ export { eventPoint } from './event-point';
 export { uniqueId } from './unique-id';
+export { getDefaultColor } from './get-default-color';
+export { getTextContainerHeight } from './get-text-container-height';
+export { RightAngleTriangle } from './RightAngleTriangle';
+export { degreesToRadians } from './degrees-to-radians';
+export { getBarXAxisDetails } from './get-bar-xaxis-details';
+export { getLongestLabelDetails } from './get-longest-label-details';
+export { getMaxDiagonalDetails } from './get-max-diagonal-details';

No alert changes

Improved metrics

Total package byte prevSize

458946

increased by11.56%

Number of package files

277

increased by4.14%

Lines of code

6570

increased by9.87%

Worsened metrics

Number of low supply chain risk alerts

5

increased by66.67%

No dependency changes