@shopify/polaris-viz - npm Package Compare versions

Comparing version 0.18.2 to 0.19.0-0

CHANGELOG.md

 # Changelog
 
+## Unreleased
+
+## [0.19.0-0] - 2021-08-31
+### Added
+
+- `PolarisVizProvider` to support theming charts
+- The `theme` to prop to `<BarChart />`, `<LineChart />`, `<Sparkline />`, `<StackedAreaChart />` and `<Sparkbar />`
+- `<Sparkline />` supports the dotted line style
+- `<Sparkline />`, `<StackedAreaChart />` and `<Sparkbar />` support gradient fills
+- `<Legend />` text is now configurable via the theme
+
+### Removed
+
+- Polaris Tokens strings are no longer accepted as colors. Any valid CSS color can now be provided as a color to charts, and in some cases gradients can be specified by supplying an array of gradient stops.
+- `barOptions`, `gridOptions`, `xAxisOptions.showTicks`, `xAxisOptions.labelColor` and `yAxisOptions.labelColor` from `BarChartProps` and `LineChartProps`.
+- `barFillStyle` and `color` props are removed from the `<Sparkbar />` component and are inherited from the chart's theme
+- `opacity` prop from `<StackedAreaChart />`. Opaque colors can now be directly specified in the series color prop or theme.
+- `colors` prop from  `<NormalizedStackedBarChart />`
+
+### Changed
+- `<BarChart />`, `<LineChart />`, `<Sparkline />`, `<NormalizedStackedBarChart />`, `<MultiSeriesBarChart />` and `<Sparkbar />` styles now are defined through themes in `PolarisVizProvider` instead of props. For more details check the [migration guide](https://docs.google.com/document/d/1VxfcgBbTNwjmYix1jGuDMgqDgIdehTgQbVZpER7djeU/edit?usp=sharing)
+- change indicators on the  `<NormalizedStackedBarChart />` can now have their colors configured externally, which applies the color to the metric and percentage change
+- `SparkChartData` now accepts `value` and `color` properties, instead of `number | null`, to allow individual bars to override the `seriesColors`.
+
+### Fixed
+- in `<Sparkbar />`, align comparison bar and bars.
+- `<NormalizedStackedBarChart />` no longer overflows its container by a few pixels
+- [Updates `serialize-javascript` package](https://github.com/Shopify/polaris-viz/pull/477). No consumer-facing changes are expected.
+
 ## [0.18.2] - 2021-08-17
@@ -4,0 +33,0 @@

package.json

 {
   "name": "@shopify/polaris-viz",
   "description": "Shopify’s viz component library",
-  "version": "0.18.2",
+  "version": "0.19.0-0",
   "private": false,
@@ -155,3 +155,2 @@ "license": "SEE LICENSE IN LICENSE.md",
     "@react-spring/web": "^9.1.2",
-    "@shopify/polaris-tokens": "^3.0.0",
     "d3-array": "2.4.0",
@@ -158,0 +157,0 @@ "d3-color": "1",

types/components/BarChart/BarChart.d.ts

 import React from 'react';
-import { BarChartData, RenderTooltipContentData, BarOptions, GridOptions, XAxisOptions, YAxisOptions, Annotation } from './types';
+import type { XAxisOptions, YAxisOptions } from '../../types';
+import type { BarChartData, RenderTooltipContentData, Annotation } from './types';
 export interface BarChartProps {
@@ -10,7 +11,6 @@ data: BarChartData[];
     renderTooltipContent?: (data: RenderTooltipContentData) => React.ReactNode;
-    barOptions?: Partial<BarOptions>;
-    gridOptions?: Partial<GridOptions>;
-    xAxisOptions?: Partial<XAxisOptions>;
-    yAxisOptions?: Partial<YAxisOptions>;
+    xAxisOptions?: XAxisOptions;
+    yAxisOptions?: YAxisOptions;
+    theme?: string;
 }
-export declare function BarChart({ data, annotations, renderTooltipContent, emptyStateText, isAnimated, skipLinkText, barOptions, gridOptions, xAxisOptions, yAxisOptions, }: BarChartProps): JSX.Element;
+export declare function BarChart({ data, annotations, renderTooltipContent, emptyStateText, isAnimated, skipLinkText, xAxisOptions, yAxisOptions, theme, }: BarChartProps): JSX.Element;

types/components/BarChart/Chart.d.ts

 import React from 'react';
-import type { Dimensions } from '../../types';
-import type { BarChartData, RenderTooltipContentData, BarOptions as BarChartBarOptions, GridOptions, XAxisOptions, YAxisOptions, AnnotationLookupTable } from './types';
-declare type BarOptions = Omit<BarChartBarOptions, 'innerMargin' | 'outerMargin'> & {
+import type { Dimensions, BarTheme, GridTheme, XAxisTheme, YAxisTheme, XAxisOptions, YAxisOptions, Color } from '../../types';
+import type { BarChartData, RenderTooltipContentData, AnnotationLookupTable } from './types';
+declare type BarThemeWithNumericMargins = Omit<BarTheme, 'innerMargin' | 'outerMargin'> & {
+    color: Color;
     innerMargin: number;
@@ -15,8 +16,10 @@ outerMargin: number;
     isAnimated?: boolean;
-    barOptions: BarOptions;
-    gridOptions: GridOptions;
-    xAxisOptions: XAxisOptions;
-    yAxisOptions: YAxisOptions;
+    xAxisOptions: Required<XAxisOptions>;
+    yAxisOptions: Required<YAxisOptions>;
+    barTheme: BarThemeWithNumericMargins;
+    gridTheme: GridTheme;
+    xAxisTheme: XAxisTheme;
+    yAxisTheme: YAxisTheme;
 }
-export declare function Chart({ data, annotationsLookupTable, chartDimensions, renderTooltipContent, emptyStateText, isAnimated, barOptions, gridOptions, xAxisOptions, yAxisOptions, }: Props): JSX.Element;
+export declare function Chart({ data, annotationsLookupTable, chartDimensions, renderTooltipContent, emptyStateText, isAnimated, barTheme, gridTheme, xAxisOptions, yAxisOptions, xAxisTheme, yAxisTheme, }: Props): JSX.Element;
 export {};

types/components/BarChart/components/TooltipContent/TooltipContent.d.ts

@@ -7,3 +7,4 @@ /// <reference types="react" />
     annotation?: Annotation;
+    theme?: string;
 }
-export declare function TooltipContent({ label, value, annotation, }: TooltipContentProps): JSX.Element;
+export declare function TooltipContent({ label, value, annotation, theme, }: TooltipContentProps): JSX.Element;

types/components/BarChart/types.d.ts

@@ -1,15 +0,7 @@
-import type { Color, StringLabelFormatter, NumberLabelFormatter, GradientStop } from 'types';
+import type { Color } from 'types';
 export interface BarChartData {
-    barOptions?: {
-        color: Color;
-    };
+    barColor?: Color;
     label: string;
     rawValue: number;
 }
-export declare enum BarMargin {
-    Small = 0.05,
-    Medium = 0.1,
-    Large = 0.3,
-    None = 0
-}
 export interface RenderTooltipContentData {
@@ -20,34 +12,6 @@ label: string;
 }
-export interface BarOptions {
-    innerMargin: keyof typeof BarMargin;
-    outerMargin: keyof typeof BarMargin;
-    color: Color | GradientStop[];
-    hasRoundedCorners: boolean;
-    /**
-     * @deprecated This prop is experimental and not ready for general use. If you want to use this, come talk to us in #polaris-data-viz
-     */
-    zeroAsMinHeight: boolean;
-}
-export interface GridOptions {
-    showHorizontalLines: boolean;
-    horizontalOverflow: boolean;
-    color: string;
-    horizontalMargin: number;
-}
-export interface XAxisOptions {
-    labelFormatter: StringLabelFormatter;
-    showTicks: boolean;
-    labelColor: string;
-    useMinimalLabels: boolean;
-}
-export interface YAxisOptions {
-    labelFormatter: NumberLabelFormatter;
-    labelColor: string;
-    backgroundColor: string;
-    integersOnly: boolean;
-}
 export interface Annotation {
     dataIndex: number;
     width: number;
-    color: Color | string;
+    color: string;
     tooltipData?: {
@@ -54,0 +18,0 @@ label: string;

types/components/ComparisonMetric/ComparisonMetric.d.ts

 /// <reference types="react" />
+import type { Legend } from '../../types';
 import type { ComparisonMetricShape } from './types';
-export declare function ComparisonMetric({ metric, trend, accessibilityLabel, }: ComparisonMetricShape): JSX.Element;
+export declare function ComparisonMetric({ metric, trend, accessibilityLabel, theme, }: ComparisonMetricShape & {
+    theme: Legend;
+}): JSX.Element;

types/components/ComparisonMetric/components/DownChevron/DownChevron.d.ts

 /// <reference types="react" />
 interface Props {
     accessibilityLabel: string;
+    fill: string;
 }
-export declare function DownChevron({ accessibilityLabel }: Props): JSX.Element;
+export declare function DownChevron({ accessibilityLabel, fill }: Props): JSX.Element;
 export {};

types/components/ComparisonMetric/components/UpChevron/UpChevron.d.ts

 /// <reference types="react" />
 interface Props {
     accessibilityLabel: string;
+    fill: string;
 }
-export declare function UpChevron({ accessibilityLabel }: Props): JSX.Element;
+export declare function UpChevron({ accessibilityLabel, fill }: Props): JSX.Element;
 export {};

types/components/Crosshair/Crosshair.d.ts

@@ -6,7 +6,7 @@ /// <reference types="react" />
     height: number;
+    width: number;
     opacity?: number;
     fill?: string;
-    width?: number;
 }
 export declare function Crosshair({ x, height, opacity, width, fill, }: Props): JSX.Element;
 export {};

types/components/index.d.ts

@@ -32,1 +32,3 @@ export { Point } from './Point';
 export { LinearGradient } from './LinearGradient';
+export { PolarisVizProvider } from './PolarisVizProvider';
+export type { PolarisVizProviderProps } from './PolarisVizProvider';

types/components/Legend/Legend.d.ts

 /// <reference types="react" />
-import type { DataSeries, Data, NullableData, LineStyle, SeriesColor } from '../../types';
-declare type LegendData = Required<DataSeries<Data | NullableData, SeriesColor>>;
+import type { DataSeries, Data, NullableData, LineStyle, Color } from '../../types';
+declare type LegendData = Required<DataSeries<Data | NullableData, Color>>;
 interface LegendProps extends Omit<LegendData, 'data'> {
@@ -10,4 +10,5 @@ lineStyle?: LineStyle;
     series: LegendProps[];
+    theme?: string;
 }
-export declare function Legend({ series }: Props): JSX.Element;
+export declare function Legend({ series, theme }: Props): JSX.Element;
 export {};

types/components/LineChart/Chart.d.ts

 import React from 'react';
-import type { Dimensions } from '../../types';
-import type { RenderTooltipContentData, LineOptions, XAxisOptions, YAxisOptions, GridOptions, CrossHairOptions, SeriesWithDefaults } from './types';
+import type { CrossHairTheme, Dimensions, GridTheme, LineTheme, XAxisTheme, YAxisTheme } from '../../types';
+import type { RenderTooltipContentData, XAxisOptions, YAxisOptions, SeriesWithDefaults } from './types';
 interface Props {
@@ -10,9 +10,9 @@ series: SeriesWithDefaults[];
     isAnimated: boolean;
-    lineOptions: LineOptions;
-    xAxisOptions: XAxisOptions;
-    yAxisOptions: YAxisOptions;
-    gridOptions: GridOptions;
-    crossHairOptions: CrossHairOptions;
+    lineOptions: LineTheme;
+    xAxisOptions: XAxisOptions & XAxisTheme;
+    yAxisOptions: YAxisOptions & YAxisTheme;
+    gridOptions: GridTheme;
+    crossHairOptions: CrossHairTheme;
 }
 export declare function Chart({ series, dimensions, renderTooltipContent, emptyStateText, isAnimated, lineOptions, xAxisOptions, yAxisOptions, gridOptions, crossHairOptions, }: Props): JSX.Element | null;
 export {};

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

 import React from 'react';
 import type { Line as D3Line } from 'd3-shape';
+import type { LineTheme } from '../../../../types';
 import type { SeriesWithDefaults } from '../../types';
@@ -12,8 +13,5 @@ interface Props {
     color: string;
-    lineOptions: {
-        hasSpline: boolean;
-        width: number;
-    };
+    lineOptions: LineTheme;
 }
 export declare const Line: React.NamedExoticComponent<Props>;
 export {};

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

 /// <reference types="react" />
-import type { LineStyle, SeriesColor } from 'types';
+import type { LineStyle, Color } from 'types';
 interface TooltipData {
@@ -9,3 +9,3 @@ name: string;
     };
-    color: SeriesColor;
+    color: Color;
     lineStyle: LineStyle;
@@ -15,4 +15,5 @@ }
     data: TooltipData[];
+    theme?: string;
 }
-export declare function TooltipContent({ data }: TooltipContentProps): JSX.Element;
+export declare function TooltipContent({ data, theme }: TooltipContentProps): JSX.Element;
 export {};

types/components/LineChart/LineChart.d.ts

 import React from 'react';
-import type { Series, RenderTooltipContentData, LineOptions, XAxisOptions, YAxisOptions, GridOptions, CrossHairOptions } from './types';
+import type { Series, RenderTooltipContentData, XAxisOptions, YAxisOptions } from './types';
 export interface LineChartProps {
     series: Series[];
-    renderTooltipContent?: (data: RenderTooltipContentData) => React.ReactNode;
+    xAxisOptions: Partial<XAxisOptions> & Pick<XAxisOptions, 'xAxisLabels'>;
+    yAxisOptions?: Partial<YAxisOptions>;
     skipLinkText?: string;
     emptyStateText?: string;
     isAnimated?: boolean;
-    lineOptions?: Partial<LineOptions>;
-    xAxisOptions: Partial<XAxisOptions> & Pick<XAxisOptions, 'xAxisLabels'>;
-    yAxisOptions?: Partial<YAxisOptions>;
-    gridOptions?: Partial<GridOptions>;
-    crossHairOptions?: Partial<CrossHairOptions>;
+    renderTooltipContent?: (data: RenderTooltipContentData) => React.ReactNode;
+    theme?: string;
 }
-export declare function LineChart({ series, renderTooltipContent, skipLinkText, emptyStateText, isAnimated, lineOptions, xAxisOptions, yAxisOptions, gridOptions, crossHairOptions, }: LineChartProps): JSX.Element;
+export declare function LineChart({ series, renderTooltipContent, skipLinkText, emptyStateText, isAnimated, xAxisOptions, yAxisOptions, theme, }: LineChartProps): JSX.Element;

types/components/LineChart/types.d.ts

@@ -1,9 +0,9 @@
-import type { DataSeries, Data, LineStyle, StringLabelFormatter, NumberLabelFormatter, SeriesColor } from '../../types';
-export interface Series extends DataSeries<Data, SeriesColor> {
-    areaColor?: string;
+import type { DataSeries, Data, LineStyle, StringLabelFormatter, NumberLabelFormatter, Color } from '../../types';
+export interface Series extends DataSeries<Data, Color> {
+    areaColor?: string | null;
     lineStyle?: LineStyle;
 }
-export declare type SeriesWithDefaults = Required<DataSeries<Data, SeriesColor>> & {
+export declare type SeriesWithDefaults = Required<DataSeries<Data, Color>> & {
     lineStyle: LineStyle;
-    areaColor?: string;
+    areaColor?: string | null;
 };
@@ -16,3 +16,3 @@ export interface TooltipData {
     };
-    color: SeriesColor;
+    color: Color;
     lineStyle: LineStyle;
@@ -23,13 +23,5 @@ }
 }
-export interface LineOptions {
-    hasSpline: boolean;
-    width: number;
-    pointStroke: string;
-}
 export interface XAxisOptions {
     labelFormatter: StringLabelFormatter;
     xAxisLabels: string[];
-    hideXAxisLabels: boolean;
-    showTicks: boolean;
-    labelColor: string;
     useMinimalLabels: boolean;
@@ -39,17 +31,3 @@ }
     labelFormatter: NumberLabelFormatter;
-    labelColor: string;
-    backgroundColor: string;
     integersOnly: boolean;
 }
-export interface GridOptions {
-    showVerticalLines: boolean;
-    showHorizontalLines: boolean;
-    color: string;
-    horizontalOverflow: boolean;
-    horizontalMargin: number;
-}
-export interface CrossHairOptions {
-    width: number;
-    color: string;
-    opacity: number;
-}

types/components/LinePreview/LinePreview.d.ts

 /// <reference types="react" />
-import type { SeriesColor } from 'types';
+import type { Color } from 'types';
 import type { LineStyle } from '../../types';
 interface Props {
-    color: SeriesColor;
+    color: Color;
     lineStyle: LineStyle;
@@ -7,0 +7,0 @@ }

types/components/MultiSeriesBarChart/Chart.d.ts

 import React from 'react';
-import type { Dimensions } from '../../types';
-import type { Series, RenderTooltipContentData, BarOptions as MultiSeriesBarOptions, GridOptions, XAxisOptions, YAxisOptions } from './types';
-declare type BarOptions = Omit<MultiSeriesBarOptions, 'innerMargin' | 'outerMargin'> & {
+import type { Dimensions, XAxisTheme, YAxisTheme, BarTheme, GridTheme } from '../../types';
+import type { Series, RenderTooltipContentData, BarOptions as MultiSeriesBarOptions, XAxisOptions, YAxisOptions } from './types';
+declare type BarOptions = Omit<BarTheme, 'innerMargin' | 'outerMargin'> & {
     innerMargin: number;
     outerMargin: number;
-};
+} & MultiSeriesBarOptions;
 interface Props {
@@ -13,5 +13,5 @@ series: Required<Series>[];
     barOptions: BarOptions;
-    gridOptions: GridOptions;
-    xAxisOptions: XAxisOptions;
-    yAxisOptions: YAxisOptions;
+    gridOptions: Omit<GridTheme, 'showVerticalLines'>;
+    xAxisOptions: Omit<XAxisOptions & XAxisTheme, 'hide'>;
+    yAxisOptions: YAxisOptions & YAxisTheme;
     isAnimated?: boolean;
@@ -18,0 +18,0 @@ emptyStateText?: string;

types/components/MultiSeriesBarChart/components/BarGroup/BarGroup.d.ts

 /// <reference types="react" />
 import type { ScaleLinear } from 'd3-scale';
-import type { SeriesColor } from 'types';
+import type { Color } from 'types';
 interface Props {
@@ -10,3 +10,3 @@ x: number;
     data: number[];
-    colors: SeriesColor[];
+    colors: Color[];
     isSubdued: boolean;
@@ -13,0 +13,0 @@ barGroupIndex: number;

types/components/MultiSeriesBarChart/components/StackedBarGroup/types.d.ts

 import type { ScaleLinear, ScaleBand } from 'd3-scale';
 import type { StackSeries } from '../../types';
-import type { SeriesColor } from '../../../../types';
+import type { Color } from '../../../../types';
 export interface StackedBarGroupProps {
@@ -9,3 +9,3 @@ groupIndex: number;
     xScale: ScaleBand<string>;
-    colors: SeriesColor[];
+    colors: Color[];
     activeBarGroup: number | null;
@@ -12,0 +12,0 @@ accessibilityData: {

types/components/MultiSeriesBarChart/MultiSeriesBarChart.d.ts

 import React from 'react';
-import { Series, RenderTooltipContentData, BarOptions, GridOptions, XAxisOptions, YAxisOptions } from './types';
+import { Series, RenderTooltipContentData, BarOptions, XAxisOptions, YAxisOptions } from './types';
 export interface MultiSeriesBarChartProps {
@@ -8,3 +8,2 @@ series: Series[];
     barOptions?: Partial<BarOptions>;
-    gridOptions?: Partial<GridOptions>;
     xAxisOptions: Partial<XAxisOptions> & Pick<XAxisOptions, 'labels'>;
@@ -14,3 +13,4 @@ yAxisOptions?: Partial<YAxisOptions>;
     emptyStateText?: string;
+    theme?: string;
 }
-export declare function MultiSeriesBarChart({ series, renderTooltipContent, skipLinkText, isAnimated, barOptions, gridOptions, xAxisOptions, yAxisOptions, emptyStateText, }: MultiSeriesBarChartProps): JSX.Element;
+export declare function MultiSeriesBarChart({ series, renderTooltipContent, skipLinkText, isAnimated, barOptions, xAxisOptions, yAxisOptions, emptyStateText, theme, }: MultiSeriesBarChartProps): JSX.Element;

types/components/MultiSeriesBarChart/types.d.ts

 import type { Series as ShapeSeries } from 'd3-shape';
-import type { StringLabelFormatter, NumberLabelFormatter, DataSeries, Data, SeriesColor } from '../../types';
-export declare type Series = DataSeries<Data, SeriesColor>;
+import type { StringLabelFormatter, NumberLabelFormatter, DataSeries, Data, Color } from '../../types';
+export declare type Series = DataSeries<Data, Color>;
 export declare type StackSeries = ShapeSeries<{
@@ -9,3 +9,3 @@ [key: string]: number;
     data: {
-        color: SeriesColor;
+        color: Color;
         label: string;
@@ -30,5 +30,2 @@ value: number;
 export interface BarOptions {
-    innerMargin: keyof typeof BarMargin;
-    outerMargin: keyof typeof BarMargin;
-    hasRoundedCorners: boolean;
     isStacked: boolean;
@@ -40,19 +37,9 @@ /**
 }
-export interface GridOptions {
-    showHorizontalLines: boolean;
-    color: string;
-    horizontalOverflow: boolean;
-    horizontalMargin: number;
-}
 export interface XAxisOptions {
     labelFormatter: StringLabelFormatter;
-    showTicks: boolean;
     labels: string[];
-    labelColor: string;
 }
 export interface YAxisOptions {
     labelFormatter: NumberLabelFormatter;
-    labelColor: string;
-    backgroundColor: string;
     integersOnly: boolean;
 }

types/components/NormalizedStackedBarChart/components/BarLabel/BarLabel.d.ts

 /// <reference types="react" />
+import type { Color, Legend } from '../../../../types';
 import { ComparisonMetricShape } from '../../../ComparisonMetric';
+import type { Orientation } from '../../types';
 export interface Props {
     label: string;
     value: string;
-    color: string;
+    color: Color;
     comparisonMetric?: ComparisonMetricShape;
+    legendColors: Legend;
+    orientation: Orientation;
 }
-export declare function BarLabel({ label, value, color, comparisonMetric }: Props): JSX.Element;
+export declare function BarLabel({ label, value, color, comparisonMetric, legendColors, orientation, }: Props): JSX.Element;

types/components/NormalizedStackedBarChart/components/BarSegment/BarSegment.d.ts

 /// <reference types="react" />
 import type { Orientation, Size } from '../../types';
+import type { Color } from '../../../../types';
 interface Props {
     scale: number;
-    color: string;
+    color: Color;
     size: Size;
     orientation: Orientation;
+    roundedCorners: boolean;
 }
-export declare function BarSegment({ color, scale, size, orientation }: Props): JSX.Element;
+export declare function BarSegment({ color, scale, size, orientation, roundedCorners, }: Props): JSX.Element;
 export {};

types/components/NormalizedStackedBarChart/NormalizedStackedBarChart.d.ts

 /// <reference types="react" />
-import type { Color } from 'types';
 import type { Size, Data, Orientation } from './types';
@@ -8,4 +7,4 @@ export interface NormalizedStackedBarChartProps {
     orientation?: Orientation;
-    colors?: Color[];
+    theme?: string;
 }
-export declare function NormalizedStackedBarChart({ data, size, orientation, colors, }: NormalizedStackedBarChartProps): JSX.Element;
+export declare function NormalizedStackedBarChart({ data, size, orientation, theme, }: NormalizedStackedBarChartProps): JSX.Element;

types/components/Sparkbar/components/Bar/Bar.d.ts

 /// <reference types="react" />
 import type { ScaleLinear } from 'd3-scale';
 import { SpringValue } from '@react-spring/web';
-import type { SparkChartData } from '../../../../types';
 interface Props {
     x: number;
     yScale: ScaleLinear<number, number>;
-    rawValue: SparkChartData;
+    value: number | null;
     width: number;
     height?: SpringValue<number> | number;
+    fill: string;
 }
-export declare function Bar({ x, rawValue, yScale, width, height }: Props): JSX.Element | null;
+export declare function Bar({ x, value, yScale, width, height, fill }: Props): JSX.Element | null;
 export {};

types/components/Sparkbar/Sparkbar.d.ts

 /// <reference types="react" />
-import type { Color, SparkChartData } from '../../types';
+import type { SparkChartData } from '../../types';
 interface Coordinates {
@@ -12,8 +12,7 @@ x: number;
     comparison?: Coordinates[];
-    color?: Color;
     accessibilityLabel?: string;
     isAnimated?: boolean;
-    barFillStyle?: 'solid' | 'gradient';
+    theme?: string;
 }
-export declare function Sparkbar({ data, comparison, color, accessibilityLabel, isAnimated, barFillStyle, dataOffsetRight, dataOffsetLeft, }: SparkbarProps): JSX.Element;
+export declare function Sparkbar({ data, comparison, accessibilityLabel, isAnimated, dataOffsetRight, dataOffsetLeft, theme, }: SparkbarProps): JSX.Element;
 export {};

types/components/Sparkline/components/Series/Series.d.ts

 /// <reference types="react" />
 import type { ScaleLinear } from 'd3-scale';
+import type { Theme } from '../../../../types';
 import type { SingleSeries } from '../../Sparkline';
-export declare function Series({ xScale, yScale, series, isAnimated, height, hasSpline, }: {
+export declare function Series({ xScale, yScale, series, isAnimated, svgDimensions, theme, }: {
     xScale: ScaleLinear<number, number>;
@@ -9,4 +10,7 @@ yScale: ScaleLinear<number, number>;
     isAnimated: boolean;
-    height: number;
-    hasSpline: boolean;
+    svgDimensions: {
+        width: number;
+        height: number;
+    };
+    theme: Theme;
 }): JSX.Element | null;

types/components/Sparkline/Sparkline.d.ts

 /// <reference types="react" />
-import type { Color, SparkChartData } from 'types';
+import type { Color, LineStyle } from 'types';
 export interface Coordinates {
     x: number;
-    y: SparkChartData;
+    y: number | null;
 }
-declare type AreaStyle = 'none' | 'solid' | 'gradient';
-declare type LineStyle = 'solid' | 'dashed';
 export interface SingleSeries {
     data: Coordinates[];
     color?: Color;
-    areaStyle?: AreaStyle;
+    area?: Color;
     lineStyle?: LineStyle;
@@ -22,5 +20,4 @@ hasPoint?: boolean;
     isAnimated?: boolean;
-    hasSpline?: boolean;
+    theme?: string;
 }
-export declare function Sparkline({ series, accessibilityLabel, isAnimated, hasSpline, }: SparklineProps): JSX.Element;
-export {};
+export declare function Sparkline({ series, accessibilityLabel, isAnimated, theme, }: SparklineProps): JSX.Element;

types/components/SquareColorPreview/SquareColorPreview.d.ts

 /// <reference types="react" />
-import type { SeriesColor } from 'types';
+import type { Color } from 'types';
 export interface SquareColorPreviewProps {
-    color: SeriesColor;
+    color: Color;
 }
 export declare function SquareColorPreview({ color }: SquareColorPreviewProps): JSX.Element;

types/components/StackedAreaChart/Chart.d.ts

@@ -6,3 +6,3 @@ import React from 'react';
     xAxisLabels: string[];
-    series: Required<Series>[];
+    series: Series[];
     formatXAxisLabel: StringLabelFormatter;
@@ -12,6 +12,6 @@ formatYAxisLabel: NumberLabelFormatter;
     dimensions: Dimensions;
-    opacity: number;
     isAnimated: boolean;
+    theme?: string;
 }
-export declare function Chart({ xAxisLabels, series, dimensions, formatXAxisLabel, formatYAxisLabel, renderTooltipContent, opacity, isAnimated, }: Props): JSX.Element | null;
+export declare function Chart({ xAxisLabels, series, dimensions, formatXAxisLabel, formatYAxisLabel, renderTooltipContent, isAnimated, theme, }: Props): JSX.Element | null;
 export {};

types/components/StackedAreaChart/components/StackedAreas/StackedAreas.d.ts

 import React from 'react';
 import { Series } from 'd3-shape';
+import type { ScaleLinear } from 'd3-scale';
 import type { Color } from 'types';
-import type { ScaleLinear } from 'd3-scale';
 declare type StackedSeries = Series<{
@@ -16,7 +16,6 @@ [key: string]: number;
     yScale: ScaleLinear<number, number>;
-    opacity: number;
     isAnimated: boolean;
 }
-export declare function Areas({ width, height, stackedValues, transform, xScale, yScale, colors, opacity, isAnimated, }: Props): JSX.Element;
+export declare function Areas({ width, height, stackedValues, transform, xScale, yScale, colors, isAnimated, }: Props): JSX.Element;
 export declare const StackedAreas: React.MemoExoticComponent<typeof Areas>;
 export {};

types/components/StackedAreaChart/StackedAreaChart.d.ts

@@ -10,6 +10,6 @@ import React from 'react';
     series: Series[];
-    opacity?: number;
     isAnimated?: boolean;
     skipLinkText?: string;
+    theme?: string;
 }
-export declare function StackedAreaChart({ xAxisLabels, series, formatXAxisLabel, formatYAxisLabel, renderTooltipContent, opacity, isAnimated, skipLinkText, }: StackedAreaChartProps): JSX.Element | null;
+export declare function StackedAreaChart({ xAxisLabels, series, formatXAxisLabel, formatYAxisLabel, renderTooltipContent, isAnimated, skipLinkText, theme, }: StackedAreaChartProps): JSX.Element | null;

types/components/StackedAreaChart/types.d.ts

 import type { Color, DataSeries, NullableData } from '../../types';
-export interface Series extends DataSeries<NullableData, Color> {
+export interface Series extends DataSeries<NullableData, string> {
 }
@@ -4,0 +4,0 @@ export interface RenderTooltipContentData {

types/components/TooltipContent/TooltipContent.d.ts

 /// <reference types="react" />
-import type { SeriesColor } from 'types';
+import type { Color } from 'types';
 interface TooltipData {
-    color: SeriesColor;
+    color: Color;
     label: string;
@@ -15,4 +15,5 @@ value: string;
     };
+    theme?: string;
 }
-export declare function TooltipContent({ title, data, total }: TooltipContentProps): JSX.Element;
+export declare function TooltipContent({ title, data, total, theme, }: TooltipContentProps): JSX.Element;
 export {};

types/components/VisuallyHiddenRows/VisuallyHiddenRows.d.ts

 import React from 'react';
-import type { NumberLabelFormatter, DataSeries, NullableData, Data, SeriesColor } from '../../types';
+import type { NumberLabelFormatter, DataSeries, NullableData, Data, Color } from '../../types';
 interface Props {
-    series: DataSeries<Data | NullableData, SeriesColor>[];
+    series: DataSeries<Data | NullableData, Color>[];
     xAxisLabels: string[];
@@ -6,0 +6,0 @@ formatYAxisLabel: NumberLabelFormatter;

types/constants.d.ts

@@ -1,3 +0,2 @@
-export declare const CROSSHAIR_WIDTH = 5;
-export declare const SPACING_TIGHT = 8;
+import type { Theme } from './types';
 export declare const SMALL_WIDTH = 300;
@@ -8,6 +7,7 @@ export declare const MIN_LABEL_SPACE = 100;
 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 SPACING_TIGHT: number;
+export declare const SPACING_EXTRA_TIGHT: number;
+export declare const SPACING: number;
+export declare const SPACING_BASE_TIGHT: number;
+export declare const SPACING_LOOSE: number;
 export declare const BELOW_X_AXIS_MARGIN = 24;
@@ -31,3 +31,3 @@ export declare const SMALL_SCREEN = 500;
 export declare const DEFAULT_GREY_LABEL = "rgb(99, 115, 129)";
-export declare const DEFAULT_CROSSHAIR_COLOR = "rgb(223, 227, 232)";
+export declare const DEFAULT_CROSSHAIR_COLOR: string;
 export declare enum BarChartMargin {
@@ -37,3 +37,3 @@ Top = 5,
     Bottom,
-    Right = 20
+    Right
 }
@@ -52,4 +52,15 @@ export declare enum LineChartMargin {
 export declare const MAX_TRAIL_DURATION = 500;
-export declare const MASK_HIGHLIGHT_COLOR = "#FFF";
+export declare const MASK_HIGHLIGHT_COLOR: string;
 export declare const MASK_SUBDUE_COLOR = "#434343";
+export declare const colorSky: string;
+export declare const colorWhite: string;
+export declare const colorBlack: string;
+export declare const colorPurpleDark: string;
+export declare const colorBlue: string;
+export declare const colorTeal: string;
+export declare const colorSkyDark: string;
+export declare const positiveColor: string;
+export declare const negativeColor: string;
+export declare const DEFAULT_THEME: Theme;
+export declare const animationDurationBase = 200;
 export declare const XMLNS = "http://www.w3.org/2000/svg";

types/hooks/index.d.ts

@@ -7,1 +7,4 @@ export { usePrefersReducedMotion } from './usePrefersReducedMotion';
 export { useResizeObserver } from './useResizeObserver';
+export { useTheme } from './useTheme';
+export { usePolarisVizContext } from './usePolarisVizContext';
+export { useThemeSeriesColors } from './use-theme-series-colors';

types/hooks/useLinearXAxisDetails.d.ts

@@ -1,4 +0,4 @@
-import type { StringLabelFormatter, NullableData, Data, DataSeries, SeriesColor, YAxisTick } from '../types';
+import type { StringLabelFormatter, NullableData, Data, DataSeries, Color, YAxisTick } from '../types';
 export interface ChartDetails {
-    series: DataSeries<Data | NullableData, SeriesColor>[];
+    series: DataSeries<Data | NullableData, Color>[];
     fontSize: number;
@@ -5,0 +5,0 @@ width: number;

types/index.d.ts

@@ -1,3 +0,5 @@
-export { Sparkline, Sparkbar, NormalizedStackedBarChart, BarChart, BarChartTooltipContent, LineChart, LineChartTooltipContent, StackedAreaChart, Legend, MultiSeriesBarChart, TooltipContent, LinePreview, SquareColorPreview, } from './components';
-export type { SparklineProps, SparkbarProps, NormalizedStackedBarChartProps, BarChartProps, BarChartTooltipContentProps, LineChartProps, LineChartTooltipContentProps, StackedAreaChartProps, MultiSeriesBarChartProps, TooltipContentProps, } from './components';
-export type { Color, GradientStop } from './types';
+export { Sparkline, Sparkbar, NormalizedStackedBarChart, BarChart, BarChartTooltipContent, LineChart, LineChartTooltipContent, StackedAreaChart, Legend, MultiSeriesBarChart, TooltipContent, LinePreview, SquareColorPreview, PolarisVizProvider, } from './components';
+export type { SparklineProps, SparkbarProps, NormalizedStackedBarChartProps, BarChartProps, BarChartTooltipContentProps, LineChartProps, LineChartTooltipContentProps, StackedAreaChartProps, MultiSeriesBarChartProps, TooltipContentProps, PolarisVizProviderProps, } from './components';
+export { DEFAULT_THEME as PolarisVizTheme } from './constants';
+export { createTheme } from './utilities/create-themes';
+export type { GradientStop } from './types';

types/storybook/index.d.ts

@@ -1,3 +0,1 @@
-export declare const polarisTokensColors: string[];
-export declare const colorOptions: string[];
 export declare const getDataPoint: (limit?: number) => number;

types/types.d.ts

@@ -21,6 +21,2 @@ import type { InterpolatorFn } from '@react-spring/web';
 }
-export declare type SeriesColor = Color | GradientStop[];
-export declare type Color = TokensColor | VizPaletteColor;
-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';
-export declare type VizPaletteColor = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'primaryProminent' | 'secondaryProminent' | 'tertiaryProminent' | 'quaternaryProminent' | 'pastComparison' | 'positive' | 'negative' | 'darkModePositive' | 'darkModeNegative' | 'colorGrayDark' | 'colorGrayLight' | 'colorWhiteTransparent';
 export declare type StringLabelFormatter = (value: string, index?: number, data?: string[]) => string;
@@ -46,4 +42,108 @@ export declare type NumberLabelFormatter = (value: number) => string;
 }
-export declare type SparkChartData = number | null;
+export interface SparkChartData {
+    value: number | null;
+    color?: Color;
+}
 export declare type PathInterpolator = InterpolatorFn<readonly number[], string>;
 export declare type NumberInterpolator = InterpolatorFn<readonly number[], number>;
+export declare type Color = string | GradientStop[];
+export interface XAxisOptions {
+    labelFormatter?: StringLabelFormatter;
+    useMinimalLabels?: boolean;
+}
+export interface YAxisOptions {
+    labelFormatter?: NumberLabelFormatter;
+    integersOnly?: boolean;
+}
+export declare enum BarMargin {
+    Small = 0.05,
+    Medium = 0.1,
+    Large = 0.3,
+    None = 0
+}
+export interface GridTheme {
+    showHorizontalLines: boolean;
+    showVerticalLines: boolean;
+    horizontalOverflow: boolean;
+    color: string;
+    horizontalMargin: number;
+}
+export interface BarTheme {
+    innerMargin: keyof typeof BarMargin;
+    outerMargin: keyof typeof BarMargin;
+    hasRoundedCorners: boolean;
+    /**
+     * @deprecated This prop is experimental and not ready for general use. If you want to use this, come talk to us in #polaris-data-viz
+     */
+    zeroAsMinHeight: boolean;
+}
+export interface XAxisTheme {
+    showTicks: boolean;
+    labelColor: string;
+    hide: boolean;
+}
+export interface CrossHairTheme {
+    color: string;
+    width: number;
+}
+export interface YAxisTheme {
+    labelColor: string;
+    backgroundColor: string;
+}
+export interface ChartContainerTheme {
+    borderRadius: string;
+    padding: string;
+    backgroundColor: string;
+}
+export interface LineTheme {
+    sparkArea: Color | null;
+    hasSpline: boolean;
+    style: LineStyle;
+    hasPoint: boolean;
+    width: number;
+    pointStroke: string;
+    dottedStrokeColor: string;
+}
+export interface TooltipTheme {
+    backgroundColor: string;
+    valueColor: string;
+    labelColor: string;
+}
+export interface SeriesColors {
+    upToFour: Color[];
+    fromFiveToSeven: Color[];
+    all: Color[];
+}
+export interface Legend {
+    labelColor: string;
+    valueColor: string;
+    trendIndicator: {
+        positive: string;
+        negative: string;
+        neutral: string;
+    };
+}
+export interface PartialTheme {
+    chartContainer?: Partial<ChartContainerTheme>;
+    bar?: Partial<BarTheme>;
+    line?: Partial<LineTheme>;
+    grid?: Partial<GridTheme>;
+    xAxis?: Partial<XAxisTheme>;
+    yAxis?: Partial<YAxisTheme>;
+    crossHair?: Partial<CrossHairTheme>;
+    legend?: Partial<Legend>;
+    seriesColors?: Partial<SeriesColors>;
+    tooltip?: Partial<TooltipTheme>;
+}
+export interface Theme {
+    chartContainer: ChartContainerTheme;
+    bar: BarTheme;
+    grid: GridTheme;
+    xAxis: XAxisTheme;
+    yAxis: YAxisTheme;
+    line: LineTheme;
+    crossHair: CrossHairTheme;
+    legend: Legend;
+    seriesColors: SeriesColors;
+    tooltip: TooltipTheme;
+}

types/utilities/create-css-gradient.d.ts

 import type { GradientStop } from 'types';
-export declare const createCSSGradient: (gradient: GradientStop[]) => string;
+export declare const createCSSGradient: (gradient: GradientStop[], angle: number) => string;

types/utilities/index.d.ts

 export { eventPoint } from './event-point';
 export { getTextWidth } from './get-text-width';
 export { clamp } from './clamp';
-export { getColorValue, isValidColorToken } from './get-color-value';
 export { isGradientType } from './is-gradient-type';
-export { vizColors } from './viz-colors';
-export { colorOptions, primaryColor, secondaryColor } from './color-options';
 export { uniqueId } from './unique-id';
-export { getDefaultColor } from './get-default-color';
 export { getTextContainerHeight } from './get-text-container-height';
@@ -24,5 +20,7 @@ export { RightAngleTriangle } from './RightAngleTriangle';
 export { curveStepRounded } from './curve-step-rounded';
-export { makeColorOpaque, makeGradientOpaque } from './make-color-opaque';
 export { shouldRotateZeroBars } from './should-rotate-zero-bars';
 export { isNumber } from './is-number';
+export { createTheme, createThemes } from './create-themes';
+export { PolarisVizContext } from './polaris-viz-context';
 export { classNames } from './classnames';
+export { changeColorOpacity, changeGradientOpacity, } from './change-color-opacity';

types/utilities/is-gradient-type.d.ts

@@ -1,2 +0,2 @@
-import type { GradientStop, SeriesColor } from '../types';
-export declare function isGradientType(color: SeriesColor): color is GradientStop[];
+import type { GradientStop, Color } from '../types';
+export declare function isGradientType(color: Color): color is GradientStop[];

No alert changes

Improved metrics

Total package byte prevSize

988885

increased by12.68%

Dependency count

13

decreased by-7.14%

Number of package files

398

increased by3.65%

Lines of code

14375

increased by26.15%

Number of low supply chain risk alerts

5

decreased by-28.57%

Dependency changes

• - Removed@shopify/polaris-tokens@^3.0.0

• - Removed@shopify/polaris-tokens@3.1.0(transitive)

• - Removedhsluv@0.1.0(transitive)

• - Removedtslib@1.14.1(transitive)