diff --git a/.eslintrc.js b/.eslintrc.js index 4e262da191..62bc4a24c2 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -34,7 +34,7 @@ module.exports = { '@typescript-eslint/no-unsafe-return': 0, '@typescript-eslint/explicit-module-boundary-types': 0, '@typescript-eslint/restrict-template-expressions': 1, - '@typescript-eslint/restrict-plus-operands': 1, + '@typescript-eslint/restrict-plus-operands': 0, // rule is broken '@typescript-eslint/no-unsafe-call': 1, '@typescript-eslint/unbound-method': 1, 'unicorn/consistent-function-scoping': 1, diff --git a/api/charts.api.md b/api/charts.api.md index 26dc5e3fb7..5496fab1c0 100644 --- a/api/charts.api.md +++ b/api/charts.api.md @@ -113,25 +113,6 @@ export interface AreaStyle { // @public (undocumented) export const Axis: React.FunctionComponent; -// Warning: (ae-missing-release-tag) "AxisConfig" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) -export interface AxisConfig { - // (undocumented) - axisLineStyle: StrokeStyle; - // (undocumented) - axisTitleStyle: TextStyle; - // (undocumented) - gridLineStyle: { - horizontal: GridLineConfig; - vertical: GridLineConfig; - }; - // (undocumented) - tickLabelStyle: TextStyle; - // (undocumented) - tickLineStyle: TickStyle; -} - // @public (undocumented) export type AxisId = string; @@ -142,7 +123,7 @@ export interface AxisSpec extends Spec { // (undocumented) chartType: typeof ChartTypes.XYAxis; domain?: YDomainRange; - gridLineStyle?: GridLineConfig; + gridLine?: Partial; groupId: GroupId; hide: boolean; id: AxisId; @@ -150,17 +131,15 @@ export interface AxisSpec extends Spec { labelFormat?: TickFormatter; position: Position; showDuplicatedTicks?: boolean; + // @deprecated showGridLines?: boolean; showOverlappingLabels: boolean; showOverlappingTicks: boolean; // (undocumented) specType: typeof SpecTypes.Axis; - style?: AxisStyle; + style?: RecursivePartial>; tickFormat: TickFormatter; - tickLabelRotation?: number; - tickPadding: number; ticks?: number; - tickSize: number; title?: string; } @@ -168,7 +147,25 @@ export interface AxisSpec extends Spec { // // @public (undocumented) export interface AxisStyle { - tickLabelPadding?: number; + // (undocumented) + axisLine: StrokeStyle & Visible; + // Warning: (ae-forgotten-export) The symbol "Visible" needs to be exported by the entry point index.d.ts + // + // (undocumented) + axisTitle: TextStyle & Visible; + // (undocumented) + gridLine: { + horizontal: GridLineStyle; + vertical: GridLineStyle; + }; + // (undocumented) + tickLabel: TextStyle & Visible & { + rotation: number; + offset: TextOffset; + alignment: TextAlignment; + }; + // (undocumented) + tickLine: TickStyle; } // @public @@ -385,8 +382,6 @@ export type CompleteBoundedDomain = DomainBase & LowerBound & UpperBound; // // @public (undocumented) export interface CrosshairStyle { - // Warning: (ae-forgotten-export) The symbol "Visible" needs to be exported by the entry point index.d.ts - // // (undocumented) band: FillStyle & Visible; // (undocumented) @@ -661,20 +656,18 @@ export interface GoalSpec extends Spec { tickValueFormatter: BandFillColorAccessor; } -// Warning: (ae-missing-release-tag) "GridLineConfig" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// // @public (undocumented) -export interface GridLineConfig { +export interface GridLineStyle { // (undocumented) - dash?: number[]; + dash: number[]; // (undocumented) - opacity?: number; + opacity: number; // (undocumented) - stroke?: Color; + stroke: Color; // (undocumented) - strokeWidth?: number; + strokeWidth: number; // (undocumented) - visible?: boolean; + visible: boolean; } // Warning: (ae-missing-release-tag) "GroupBrushExtent" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -721,6 +714,20 @@ export const HistogramModeAlignments: Readonly<{ End: LineAlignSetting; }>; +// Warning: (ae-missing-release-tag) "HorizontalAlignment" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export const HorizontalAlignment: Readonly<{ + Center: "center"; + Right: "right"; + Left: "left"; + Near: "near"; + Far: "far"; +}>; + +// @public +export type HorizontalAlignment = $Values; + // Warning: (ae-forgotten-export) The symbol "BinaryAccessorFn" needs to be exported by the entry point index.d.ts // // @public @@ -862,11 +869,6 @@ export type LowerBoundedDomain = DomainBase & LowerBound; // @public export type MarkBuffer = number | ((radius: number) => number); -// Warning: (ae-missing-release-tag) "mergeGridLineConfigs" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) -export function mergeGridLineConfigs(axisSpecConfig: GridLineConfig, themeConfig: GridLineConfig): GridLineConfig; - // Warning: (ae-missing-release-tag) "mergeWithDefaultAnnotationLine" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) @@ -1349,6 +1351,14 @@ export interface SharedGeometryStateStyle { unhighlighted: GeometryStateStyle; } +// @public +export interface SimplePadding { + // (undocumented) + inner: number; + // (undocumented) + outer: number; +} + // Warning: (ae-missing-release-tag) "Spec" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) @@ -1385,6 +1395,21 @@ export interface StrokeStyle { strokeWidth: number; } +// @public +export interface TextAlignment { + // (undocumented) + horizontal: HorizontalAlignment; + // (undocumented) + vertical: VerticalAlignment; +} + +// @public +export interface TextOffset { + reference: 'global' | 'local'; + x: number | string; + y: number | string; +} + // Warning: (ae-missing-release-tag) "TextStyle" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) @@ -1398,7 +1423,7 @@ export interface TextStyle { // (undocumented) fontStyle?: string; // (undocumented) - padding: number; + padding: number | SimplePadding; } // Warning: (ae-missing-release-tag) "Theme" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -1409,7 +1434,7 @@ export interface Theme { arcSeriesStyle: ArcSeriesStyle; areaSeriesStyle: AreaSeriesStyle; // (undocumented) - axes: AxisConfig; + axes: AxisStyle; background: BackgroundStyle; barSeriesStyle: BarSeriesStyle; bubbleSeriesStyle: BubbleSeriesStyle; @@ -1438,7 +1463,10 @@ export type TickFormatterOptions = { }; // @public (undocumented) -export type TickStyle = StrokeStyle & Visible; +export type TickStyle = StrokeStyle & Visible & { + padding: number; + size: number; +}; // Warning: (ae-missing-release-tag) "timeFormatter" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -1506,6 +1534,20 @@ export type UnboundedDomainWithInterval = DomainBase; // @public (undocumented) export type UpperBoundedDomain = DomainBase & UpperBound; +// Warning: (ae-missing-release-tag) "VerticalAlignment" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export const VerticalAlignment: Readonly<{ + Middle: "middle"; + Top: "top"; + Bottom: "bottom"; + Near: "near"; + Far: "far"; +}>; + +// @public +export type VerticalAlignment = $Values; + // Warning: (ae-missing-release-tag) "XYBrushArea" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) diff --git a/integration/helpers.ts b/integration/helpers.ts index 54eb79c9d6..e933cbf849 100644 --- a/integration/helpers.ts +++ b/integration/helpers.ts @@ -72,15 +72,18 @@ function encodeString(string: string) { */ const storiesToSkip: Record = { // Interactions: ['Some story name'], + Legend: [ + 'Actions', + ], }; /** * Delays for stories to skip in all vrt based on group. */ const storiesToDelay: Record> = { - Legend: { - Actions: 200, // needed for icon to load - }, + // GroupName: { + // 'some story name': 200, + // }, }; export function getStorybookInfo(): StoryGroupInfo[] { diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-single-bar-histogram-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-single-bar-histogram-visually-looks-correct-1-snap.png index fe5eb87ef1..53be1ac1bf 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-single-bar-histogram-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-single-bar-histogram-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-styling-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-styling-visually-looks-correct-1-snap.png index e906122a0f..db691a926d 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-styling-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-styling-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-tooltip-options-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-tooltip-options-visually-looks-correct-1-snap.png index f2bd48c9f2..dff1cc960d 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-tooltip-options-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-tooltip-options-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-x-continuous-domain-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-x-continuous-domain-visually-looks-correct-1-snap.png index 573c34f980..39fdbb4b0b 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-x-continuous-domain-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-x-continuous-domain-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-x-ordinal-domain-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-x-ordinal-domain-visually-looks-correct-1-snap.png index f2bd48c9f2..dff1cc960d 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-x-ordinal-domain-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-x-ordinal-domain-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-x-time-domain-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-x-time-domain-visually-looks-correct-1-snap.png index 98ad62b835..bee08b702a 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-x-time-domain-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-x-time-domain-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-y-domain-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-y-domain-visually-looks-correct-1-snap.png index 5bd147ec14..5a7bbd9ce1 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-y-domain-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-y-domain-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-rects-linear-bar-chart-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-rects-linear-bar-chart-visually-looks-correct-1-snap.png index 4cba31aca5..f39ebe7cef 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-rects-linear-bar-chart-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-rects-linear-bar-chart-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-rects-linear-line-chart-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-rects-linear-line-chart-visually-looks-correct-1-snap.png index d9470c9625..c2ca755a9d 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-rects-linear-line-chart-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-rects-linear-line-chart-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-rects-ordinal-bar-chart-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-rects-ordinal-bar-chart-visually-looks-correct-1-snap.png index 33bfc727be..7ec08dc527 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-rects-ordinal-bar-chart-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-rects-ordinal-bar-chart-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-rects-styling-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-rects-styling-visually-looks-correct-1-snap.png index 254268e93d..0c07873598 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-rects-styling-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-rects-styling-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-rects-tooltip-options-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-rects-tooltip-options-visually-looks-correct-1-snap.png index a62a0bedd0..80181fd8f1 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-rects-tooltip-options-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-rects-tooltip-options-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-band-area-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-band-area-visually-looks-correct-1-snap.png index e16f5957b1..b20a28aa30 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-band-area-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-band-area-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-band-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-band-visually-looks-correct-1-snap.png index c7252f0392..a179f2a132 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-band-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-band-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-grouped-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-grouped-visually-looks-correct-1-snap.png index 9f80f10e32..29a14e211d 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-grouped-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-grouped-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-percentage-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-percentage-visually-looks-correct-1-snap.png index 6bd76bc542..b29c078abf 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-percentage-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-percentage-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-percentage-with-zeros-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-percentage-with-zeros-visually-looks-correct-1-snap.png index 3f2755be2d..3619083da4 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-percentage-with-zeros-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-percentage-with-zeros-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-same-naming-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-same-naming-visually-looks-correct-1-snap.png index f79bbc0a90..1b53e93199 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-same-naming-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-same-naming-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-separate-specs-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-separate-specs-visually-looks-correct-1-snap.png index e009c33fc5..040f9e9ead 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-separate-specs-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-separate-specs-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-visually-looks-correct-1-snap.png index e009c33fc5..040f9e9ead 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-test-linear-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-test-linear-visually-looks-correct-1-snap.png index 69d90038b4..0e6edcb918 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-test-linear-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-test-linear-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-test-stacked-with-missing-values-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-test-stacked-with-missing-values-visually-looks-correct-1-snap.png index de79c65283..b52bb56d48 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-test-stacked-with-missing-values-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-test-stacked-with-missing-values-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-test-time-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-test-time-visually-looks-correct-1-snap.png index 6b1288f9e1..973384b7c4 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-test-time-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-test-time-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-4-axes-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-4-axes-visually-looks-correct-1-snap.png index e4d4614486..52d686f067 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-4-axes-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-4-axes-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-axis-and-legend-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-axis-and-legend-visually-looks-correct-1-snap.png index 7ea11ddd3e..3f15ea0f0f 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-axis-and-legend-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-axis-and-legend-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-linear-x-axis-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-linear-x-axis-visually-looks-correct-1-snap.png index 71354ce60a..d51fade361 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-linear-x-axis-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-linear-x-axis-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-log-y-axis-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-log-y-axis-visually-looks-correct-1-snap.png index f8a6e8d2cb..526cdb1f27 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-log-y-axis-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-log-y-axis-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-time-x-axis-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-time-x-axis-visually-looks-correct-1-snap.png index 5492533913..cb050bb81c 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-time-x-axis-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-with-time-x-axis-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-bars-and-lines-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-bars-and-lines-visually-looks-correct-1-snap.png index e8728c3069..f9ec1413bb 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-bars-and-lines-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-bars-and-lines-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-custom-domain-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-custom-domain-visually-looks-correct-1-snap.png index d0e6382291..c32ca6545a 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-custom-domain-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-custom-domain-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-custom-mixed-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-custom-mixed-visually-looks-correct-1-snap.png index 96562f09e8..1f93c9ddd1 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-custom-mixed-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-custom-mixed-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-different-tooltip-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-different-tooltip-visually-looks-correct-1-snap.png index 69bcb9bc8e..d03b2821eb 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-different-tooltip-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-different-tooltip-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-duplicate-ticks-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-duplicate-ticks-visually-looks-correct-1-snap.png index 2d503fd420..a47aced5d8 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-duplicate-ticks-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-duplicate-ticks-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-fit-domain-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-fit-domain-visually-looks-correct-1-snap.png index a180c17957..5781503a18 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-fit-domain-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-fit-domain-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-label-formatting-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-label-formatting-visually-looks-correct-1-snap.png index fe5673134b..c942275037 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-label-formatting-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-label-formatting-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-multi-axes-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-multi-axes-visually-looks-correct-1-snap.png index 5afbeddc31..d9144982db 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-multi-axes-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-multi-axes-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-one-domain-bound-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-one-domain-bound-visually-looks-correct-1-snap.png index e4dc22d5e1..ff6a90f985 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-one-domain-bound-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-one-domain-bound-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-tick-label-rotation-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-tick-label-rotation-visually-looks-correct-1-snap.png index 88318c25d4..12fd22f78c 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-tick-label-rotation-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-tick-label-rotation-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-with-4-axes-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-with-4-axes-visually-looks-correct-1-snap.png index 2416a2eb5a..999df06910 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-with-4-axes-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-with-4-axes-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-band-bar-chart-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-band-bar-chart-visually-looks-correct-1-snap.png index eb4f196189..d2311ece4d 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-band-bar-chart-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-band-bar-chart-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-1-y-0-g-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-1-y-0-g-visually-looks-correct-1-snap.png index 6a4e5c44ac..e4a39fe22e 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-1-y-0-g-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-1-y-0-g-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-1-y-1-g-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-1-y-1-g-visually-looks-correct-1-snap.png index 1ccafa68e1..b6709e4842 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-1-y-1-g-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-1-y-1-g-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-1-y-2-g-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-1-y-2-g-visually-looks-correct-1-snap.png index 71bf9fa3f4..958a5e0417 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-1-y-2-g-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-1-y-2-g-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-0-g-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-0-g-visually-looks-correct-1-snap.png index 3cc3d51ef9..ce3589898c 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-0-g-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-0-g-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-1-g-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-1-g-visually-looks-correct-1-snap.png index fcf5732e98..faa9ceef77 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-1-g-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-1-g-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-2-g-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-2-g-visually-looks-correct-1-snap.png index f14c3176a3..3532241eaa 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-2-g-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-bar-chart-2-y-2-g-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-clustered-multiple-series-specs-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-clustered-multiple-series-specs-visually-looks-correct-1-snap.png index bbdcb2eda1..b0a538b9a4 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-clustered-multiple-series-specs-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-clustered-multiple-series-specs-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-clustered-with-axis-and-legend-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-clustered-with-axis-and-legend-visually-looks-correct-1-snap.png index 54f68ccb4d..6ffeeb9143 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-clustered-with-axis-and-legend-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-clustered-with-axis-and-legend-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-min-height-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-min-height-visually-looks-correct-1-snap.png index 8399405d08..acedf93fdb 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-min-height-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-min-height-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-negative-and-positive-x-values-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-negative-and-positive-x-values-visually-looks-correct-1-snap.png index 9c62665461..66a4f52eb4 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-negative-and-positive-x-values-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-negative-and-positive-x-values-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-scale-to-extent-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-scale-to-extent-visually-looks-correct-1-snap.png index 24c7d815ad..a9215ea30c 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-scale-to-extent-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-scale-to-extent-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-single-data-chart-linear-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-single-data-chart-linear-visually-looks-correct-1-snap.png index d63d6fa98f..5e6d1f44c8 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-single-data-chart-linear-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-single-data-chart-linear-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-single-data-chart-ordinal-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-single-data-chart-ordinal-visually-looks-correct-1-snap.png index 76d6200ece..c7baa05851 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-single-data-chart-ordinal-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-single-data-chart-ordinal-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-single-data-clustered-chart-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-single-data-clustered-chart-visually-looks-correct-1-snap.png index 472a6329c3..5dd2e4fae4 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-single-data-clustered-chart-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-single-data-clustered-chart-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-single-data-stacked-chart-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-single-data-stacked-chart-visually-looks-correct-1-snap.png index 46ac7fae7d..f0805d0f50 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-single-data-stacked-chart-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-single-data-stacked-chart-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-as-percentage-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-as-percentage-visually-looks-correct-1-snap.png index b873128512..9fc57ccf67 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-as-percentage-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-as-percentage-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-only-grouped-areas-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-only-grouped-areas-visually-looks-correct-1-snap.png index 52adbe33f5..0e9f6ae8c1 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-only-grouped-areas-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-only-grouped-areas-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-to-extent-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-to-extent-visually-looks-correct-1-snap.png index eba435773f..2139b90bce 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-to-extent-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-to-extent-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-with-axis-and-legend-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-with-axis-and-legend-visually-looks-correct-1-snap.png index 392b1f1afe..06c0847ca9 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-with-axis-and-legend-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-stacked-with-axis-and-legend-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-clustered-bar-chart-with-null-bars-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-clustered-bar-chart-with-null-bars-visually-looks-correct-1-snap.png index 34731d5990..30fa6e43a2 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-clustered-bar-chart-with-null-bars-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-clustered-bar-chart-with-null-bars-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-discover-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-discover-visually-looks-correct-1-snap.png index 73dceae171..57bff9b8d8 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-discover-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-discover-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-histogram-mode-linear-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-histogram-mode-linear-visually-looks-correct-1-snap.png index cd398778ae..9ad6c008b6 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-histogram-mode-linear-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-histogram-mode-linear-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-histogram-mode-ordinal-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-histogram-mode-ordinal-visually-looks-correct-1-snap.png index c46d31da24..96d6e79b36 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-histogram-mode-ordinal-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-histogram-mode-ordinal-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-linear-clustered-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-linear-clustered-visually-looks-correct-1-snap.png index b3f49ea913..614240b0d7 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-linear-clustered-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-linear-clustered-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-linear-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-linear-visually-looks-correct-1-snap.png index 0b0fbd4c8e..b8cbb757c5 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-linear-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-linear-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-min-height-positive-and-negative-values-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-min-height-positive-and-negative-values-visually-looks-correct-1-snap.png index 0ee53f8335..54a3c331e5 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-min-height-positive-and-negative-values-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-min-height-positive-and-negative-values-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-single-histogram-bar-chart-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-single-histogram-bar-chart-visually-looks-correct-1-snap.png index f984038fc4..ac94c7e11d 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-single-histogram-bar-chart-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-single-histogram-bar-chart-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-stacked-bar-chart-with-null-bars-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-stacked-bar-chart-with-null-bars-visually-looks-correct-1-snap.png index 9776807122..8f3636a466 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-stacked-bar-chart-with-null-bars-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-stacked-bar-chart-with-null-bars-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-switch-ordinal-linear-axis-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-switch-ordinal-linear-axis-visually-looks-correct-1-snap.png index a71bbbc978..6ab9f4ccc1 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-switch-ordinal-linear-axis-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-switch-ordinal-linear-axis-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-time-clustered-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-time-clustered-visually-looks-correct-1-snap.png index c35b5e8762..08c74f76a1 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-time-clustered-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-time-clustered-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-time-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-time-visually-looks-correct-1-snap.png index 009e37da9c..07dac411be 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-time-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-time-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-time-clustered-using-various-specs-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-time-clustered-using-various-specs-visually-looks-correct-1-snap.png index f20cd384f4..22efeb4641 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-time-clustered-using-various-specs-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-time-clustered-using-various-specs-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-time-stacked-using-various-specs-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-time-stacked-using-various-specs-visually-looks-correct-1-snap.png index 8111bbfdbe..f881e94f6a 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-time-stacked-using-various-specs-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-time-stacked-using-various-specs-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-tooltip-series-visibility-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-tooltip-series-visibility-visually-looks-correct-1-snap.png index f14c3176a3..3532241eaa 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-tooltip-series-visibility-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-tooltip-series-visibility-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-axis-and-legend-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-axis-and-legend-visually-looks-correct-1-snap.png index dae00ed146..d6e019d53d 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-axis-and-legend-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-axis-and-legend-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-axis-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-axis-visually-looks-correct-1-snap.png index a71bbbc978..6ab9f4ccc1 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-axis-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-axis-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-high-data-volume-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-high-data-volume-visually-looks-correct-1-snap.png index 5cbde6eec8..dc07e807c2 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-high-data-volume-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-high-data-volume-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-linear-x-axis-no-linear-interval-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-linear-x-axis-no-linear-interval-visually-looks-correct-1-snap.png index dfe4391b1e..4491673952 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-linear-x-axis-no-linear-interval-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-linear-x-axis-no-linear-interval-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-linear-x-axis-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-linear-x-axis-visually-looks-correct-1-snap.png index 7bd1217803..485754fd34 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-linear-x-axis-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-linear-x-axis-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-log-y-axis-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-log-y-axis-visually-looks-correct-1-snap.png index a2aa3cf473..5b3a79ce57 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-log-y-axis-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-log-y-axis-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-ordinal-x-axis-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-ordinal-x-axis-visually-looks-correct-1-snap.png index ce7599ce4a..53522e848f 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-ordinal-x-axis-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-ordinal-x-axis-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-stacked-log-y-axis-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-stacked-log-y-axis-visually-looks-correct-1-snap.png index 0a994a025a..60f794b31a 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-stacked-log-y-axis-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-stacked-log-y-axis-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-time-x-axis-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-time-x-axis-visually-looks-correct-1-snap.png index 6eb581f2a8..10899879fd 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-time-x-axis-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-time-x-axis-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-value-label-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-value-label-visually-looks-correct-1-snap.png index cb53cb7a69..2a98e2d40a 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-value-label-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-value-label-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-mixed-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-mixed-visually-looks-correct-1-snap.png index 49cb782403..bd7ae74199 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-mixed-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-mixed-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-multiple-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-multiple-visually-looks-correct-1-snap.png index f4c281be67..299b65c5af 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-multiple-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-multiple-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-ordinal-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-ordinal-visually-looks-correct-1-snap.png index 7744ec5bc1..9146a93bf0 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-ordinal-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-ordinal-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-simple-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-simple-visually-looks-correct-1-snap.png index 7ae5d4db1d..6ddcfed682 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-simple-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bubble-chart-alpha-simple-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-grids-basic-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-grids-basic-visually-looks-correct-1-snap.png index c11bf85719..c4a401ba00 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-grids-basic-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-grids-basic-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-grids-multiple-axes-with-the-same-position-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-grids-multiple-axes-with-the-same-position-visually-looks-correct-1-snap.png index 2304651253..6952f324df 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-grids-multiple-axes-with-the-same-position-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-grids-multiple-axes-with-the-same-position-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-area-point-clicks-and-hovers-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-area-point-clicks-and-hovers-visually-looks-correct-1-snap.png index 008da3fa06..4e8440005f 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-area-point-clicks-and-hovers-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-area-point-clicks-and-hovers-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-bar-clicks-and-hovers-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-bar-clicks-and-hovers-visually-looks-correct-1-snap.png index b0923cea76..b3b89d6923 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-bar-clicks-and-hovers-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-bar-clicks-and-hovers-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-disabled-on-ordinal-x-axis-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-disabled-on-ordinal-x-axis-visually-looks-correct-1-snap.png index 24589ef135..1189e76228 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-disabled-on-ordinal-x-axis-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-disabled-on-ordinal-x-axis-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-selection-tool-on-bar-chart-linear-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-selection-tool-on-bar-chart-linear-visually-looks-correct-1-snap.png index c951687a93..bf23c039c1 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-selection-tool-on-bar-chart-linear-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-selection-tool-on-bar-chart-linear-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-selection-tool-on-histogram-time-charts-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-selection-tool-on-histogram-time-charts-visually-looks-correct-1-snap.png index 71d80aaee7..4d6c99f7ab 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-selection-tool-on-histogram-time-charts-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-selection-tool-on-histogram-time-charts-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-selection-tool-on-linear-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-selection-tool-on-linear-visually-looks-correct-1-snap.png index 2416a2eb5a..999df06910 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-selection-tool-on-linear-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-selection-tool-on-linear-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-selection-tool-on-time-charts-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-selection-tool-on-time-charts-visually-looks-correct-1-snap.png index 3c5742d4f2..229fc73ae0 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-selection-tool-on-time-charts-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-selection-tool-on-time-charts-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-tool-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-tool-visually-looks-correct-1-snap.png index 2416a2eb5a..999df06910 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-tool-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-tool-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-area-chart-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-area-chart-visually-looks-correct-1-snap.png index 22ca07ecdf..6723158bd8 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-area-chart-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-area-chart-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-line-chart-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-line-chart-visually-looks-correct-1-snap.png index 9af2dbd1c7..92f4f468ea 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-line-chart-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-line-chart-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-mixed-chart-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-mixed-chart-visually-looks-correct-1-snap.png index c3170d245c..35d0e9593e 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-mixed-chart-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-click-hovers-on-legend-items-mixed-chart-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-clicks-hovers-on-legend-items-bar-chart-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-clicks-hovers-on-legend-items-bar-chart-visually-looks-correct-1-snap.png index a1ef5d5271..976467cb74 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-clicks-hovers-on-legend-items-bar-chart-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-clicks-hovers-on-legend-items-bar-chart-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-crosshair-with-time-axis-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-crosshair-with-time-axis-visually-looks-correct-1-snap.png index e5a1868e9a..c91b2ac271 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-crosshair-with-time-axis-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-crosshair-with-time-axis-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-cursor-update-action-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-cursor-update-action-visually-looks-correct-1-snap.png index 5112f10000..b3f52b2cd9 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-cursor-update-action-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-cursor-update-action-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-line-area-bar-point-clicks-and-hovers-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-line-area-bar-point-clicks-and-hovers-visually-looks-correct-1-snap.png index d26ad235a2..c7afd8ec2c 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-line-area-bar-point-clicks-and-hovers-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-line-area-bar-point-clicks-and-hovers-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-line-point-clicks-and-hovers-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-line-point-clicks-and-hovers-visually-looks-correct-1-snap.png index e462a43d1e..88f21fcd8d 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-line-point-clicks-and-hovers-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-line-point-clicks-and-hovers-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-png-export-action-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-png-export-action-visually-looks-correct-1-snap.png index 9b12570427..e3122f5569 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-png-export-action-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-png-export-action-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-render-change-action-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-render-change-action-visually-looks-correct-1-snap.png index b0923cea76..b3b89d6923 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-render-change-action-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-render-change-action-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-actions-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-actions-visually-looks-correct-1-snap.png deleted file mode 100644 index 9503de445b..0000000000 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-actions-visually-looks-correct-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-bottom-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-bottom-visually-looks-correct-1-snap.png index bff9a30c42..1d8c279647 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-bottom-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-bottom-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-changing-specs-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-changing-specs-visually-looks-correct-1-snap.png index 1c0f4ae1d3..6ec5566add 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-changing-specs-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-changing-specs-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-color-picker-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-color-picker-visually-looks-correct-1-snap.png index 99aa01fbf4..4cec4a1eb2 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-color-picker-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-color-picker-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-display-values-in-legend-elements-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-display-values-in-legend-elements-visually-looks-correct-1-snap.png index aa77889287..16505efd51 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-display-values-in-legend-elements-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-display-values-in-legend-elements-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-hide-legend-items-by-series-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-hide-legend-items-by-series-visually-looks-correct-1-snap.png index c3170d245c..35d0e9593e 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-hide-legend-items-by-series-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-hide-legend-items-by-series-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-left-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-left-visually-looks-correct-1-snap.png index c8a54ead31..b6556d130e 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-left-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-left-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-legend-spacing-buffer-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-legend-spacing-buffer-visually-looks-correct-1-snap.png index 80f860ba1a..21ed519d46 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-legend-spacing-buffer-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-legend-spacing-buffer-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-margins-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-margins-visually-looks-correct-1-snap.png index c23a53fb20..8aa9ea9b71 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-margins-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-margins-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-right-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-right-visually-looks-correct-1-snap.png index a1ef5d5271..976467cb74 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-right-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-right-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-top-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-top-visually-looks-correct-1-snap.png index 1c0f4ae1d3..6ec5566add 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-top-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-top-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-curved-with-axis-and-legend-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-curved-with-axis-and-legend-visually-looks-correct-1-snap.png index 23d609cd76..0e5bce7a33 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-curved-with-axis-and-legend-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-curved-with-axis-and-legend-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-linear-with-axis-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-linear-with-axis-visually-looks-correct-1-snap.png index 1ea6dedecb..571ee00b1a 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-linear-with-axis-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-linear-with-axis-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-multi-series-with-log-values-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-multi-series-with-log-values-visually-looks-correct-1-snap.png index 5fd3bd0fab..b34c893576 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-multi-series-with-log-values-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-multi-series-with-log-values-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-multiple-with-axis-and-legend-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-multiple-with-axis-and-legend-visually-looks-correct-1-snap.png index d8fe90c318..6e3e838b59 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-multiple-with-axis-and-legend-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-multiple-with-axis-and-legend-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-ordinal-with-axis-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-ordinal-with-axis-visually-looks-correct-1-snap.png index 901cbd38f0..9d5312058d 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-ordinal-with-axis-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-ordinal-with-axis-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-stacked-with-axis-and-legend-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-stacked-with-axis-and-legend-visually-looks-correct-1-snap.png index c07d4f5bc5..549a687c0a 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-stacked-with-axis-and-legend-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-stacked-with-axis-and-legend-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-with-axis-and-legend-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-with-axis-and-legend-visually-looks-correct-1-snap.png index 85695d2266..9df46f4a0a 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-with-axis-and-legend-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-with-axis-and-legend-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-with-axis-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-with-axis-visually-looks-correct-1-snap.png index eb6a30af5f..de58241175 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-with-axis-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-with-axis-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-areas-and-bars-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-areas-and-bars-visually-looks-correct-1-snap.png index 66283fa71d..31caf02a66 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-areas-and-bars-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-areas-and-bars-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-bars-and-lines-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-bars-and-lines-visually-looks-correct-1-snap.png index cc3f65de9c..3d7c2fd32f 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-bars-and-lines-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-bars-and-lines-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-fitting-functions-non-stacked-series-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-fitting-functions-non-stacked-series-visually-looks-correct-1-snap.png index 9f03e48788..f9b989306b 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-fitting-functions-non-stacked-series-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-fitting-functions-non-stacked-series-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-lines-and-areas-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-lines-and-areas-visually-looks-correct-1-snap.png index fba2b3a29a..8356300f6d 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-lines-and-areas-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-lines-and-areas-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-mark-size-accessor-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-mark-size-accessor-visually-looks-correct-1-snap.png index 48782e5425..a53dbb2315 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-mark-size-accessor-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-mark-size-accessor-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-test-bar-lines-linear-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-test-bar-lines-linear-visually-looks-correct-1-snap.png index 2146f8e83e..36ae83caea 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-test-bar-lines-linear-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-test-bar-lines-linear-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-test-bar-lines-time-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-test-bar-lines-time-visually-looks-correct-1-snap.png index 4254165291..f2b858e7cc 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-test-bar-lines-time-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mixed-charts-test-bar-lines-time-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-negative-90-deg-linear-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-negative-90-deg-linear-visually-looks-correct-1-snap.png index f1406ec7bc..0e977e9f69 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-negative-90-deg-linear-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-negative-90-deg-linear-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-negative-90-degree-ordinal-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-negative-90-degree-ordinal-visually-looks-correct-1-snap.png index bff64c6533..288cd4c1d9 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-negative-90-degree-ordinal-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-negative-90-degree-ordinal-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-0-deg-linear-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-0-deg-linear-visually-looks-correct-1-snap.png index 313f82d6eb..5219b15833 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-0-deg-linear-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-0-deg-linear-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-0-deg-ordinal-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-0-deg-ordinal-visually-looks-correct-1-snap.png index 03dc0a6af9..bb478da44d 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-0-deg-ordinal-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-0-deg-ordinal-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-180-deg-linear-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-180-deg-linear-visually-looks-correct-1-snap.png index 22a99400c4..7675669df9 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-180-deg-linear-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-180-deg-linear-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-180-deg-ordinal-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-180-deg-ordinal-visually-looks-correct-1-snap.png index 0ff96bc5f4..34c7e5cad5 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-180-deg-ordinal-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-180-deg-ordinal-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-90-deg-linear-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-90-deg-linear-visually-looks-correct-1-snap.png index a4571b03fc..a20127b980 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-90-deg-linear-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-90-deg-linear-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-90-deg-ordinal-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-90-deg-ordinal-visually-looks-correct-1-snap.png index 54baefe52b..a34f506d5a 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-90-deg-ordinal-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-rotations-90-deg-ordinal-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-with-ordinal-axis-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-with-ordinal-axis-visually-looks-correct-1-snap.png index ff1a2f3e9a..61d47bbc50 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-with-ordinal-axis-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-rotations-with-ordinal-axis-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-remove-duplicate-axis-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-remove-duplicate-axis-visually-looks-correct-1-snap.png index 91a8fb7623..67d342c8da 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-remove-duplicate-axis-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-remove-duplicate-axis-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-specified-timezone-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-specified-timezone-visually-looks-correct-1-snap.png index a723bd7f84..920d2ff685 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-specified-timezone-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-specified-timezone-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-timezone-configuration-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-timezone-configuration-visually-looks-correct-1-snap.png index 05ff054f57..0b591599ec 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-timezone-configuration-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-timezone-configuration-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-tooltip-in-local-timezone-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-tooltip-in-local-timezone-visually-looks-correct-1-snap.png index 05ff054f57..0b591599ec 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-tooltip-in-local-timezone-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-tooltip-in-local-timezone-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-tooltip-in-utc-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-tooltip-in-utc-visually-looks-correct-1-snap.png index 05ff054f57..0b591599ec 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-tooltip-in-utc-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-tooltip-in-utc-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-area-series-color-variant-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-area-series-color-variant-visually-looks-correct-1-snap.png index dbd66d1c7c..8c876a6bf1 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-area-series-color-variant-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-area-series-color-variant-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-axis-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-axis-visually-looks-correct-1-snap.png index 8de3863733..c445eb6313 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-axis-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-axis-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-bar-series-color-variant-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-bar-series-color-variant-visually-looks-correct-1-snap.png index b14d89b0ea..f796e0fdb8 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-bar-series-color-variant-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-bar-series-color-variant-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-colors-via-accessor-function-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-colors-via-accessor-function-visually-looks-correct-1-snap.png index fab4108a8c..18d053731a 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-colors-via-accessor-function-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-colors-via-accessor-function-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-colors-via-colors-array-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-colors-via-colors-array-visually-looks-correct-1-snap.png index 3a0bea1d95..d170de7a13 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-colors-via-colors-array-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-colors-via-colors-array-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-config-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-config-visually-looks-correct-1-snap.png index 26d9a263d1..79b09c342a 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-config-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-config-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-formatting-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-formatting-visually-looks-correct-1-snap.png index 6c3421ff2a..fdf21db7f0 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-formatting-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-formatting-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-visually-looks-correct-1-snap.png index a069458431..010c710fc4 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-name-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-area-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-area-visually-looks-correct-1-snap.png index 26c8cc68a6..406c4730a2 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-area-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-area-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-bars-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-bars-visually-looks-correct-1-snap.png index 058c96187e..ab8cab2333 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-bars-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-bars-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-lines-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-lines-visually-looks-correct-1-snap.png index d562821b3e..d87c5ad3c4 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-lines-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-custom-series-styles-lines-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-dark-theme-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-dark-theme-visually-looks-correct-1-snap.png index 8d6d006700..b77952b854 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-dark-theme-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-dark-theme-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-line-series-color-variant-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-line-series-color-variant-visually-looks-correct-1-snap.png index 5004e1839c..be56065df8 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-line-series-color-variant-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-line-series-color-variant-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-margins-and-paddings-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-margins-and-paddings-visually-looks-correct-1-snap.png index 8d2e486ee4..dff291d57a 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-margins-and-paddings-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-margins-and-paddings-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-multiple-custom-partial-themes-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-multiple-custom-partial-themes-visually-looks-correct-1-snap.png index 1d9add7db3..6c288e5cff 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-multiple-custom-partial-themes-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-multiple-custom-partial-themes-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-visually-looks-correct-1-snap.png index 7df222a987..36eb205639 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-with-base-theme-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-with-base-theme-visually-looks-correct-1-snap.png index 7df222a987..36eb205639 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-with-base-theme-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-with-base-theme-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-style-accessor-overrides-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-style-accessor-overrides-visually-looks-correct-1-snap.png index a62e3f8c5c..27b4aeaa33 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-style-accessor-overrides-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-style-accessor-overrides-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-theme-styling-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-theme-styling-visually-looks-correct-1-snap.png index a166f16c33..299afacbcf 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-theme-styling-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-theme-styling-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-tick-label-padding-both-prop-and-theme-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-tick-label-padding-both-prop-and-theme-visually-looks-correct-1-snap.png index 9fb4a3a62b..72db7d1469 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-tick-label-padding-both-prop-and-theme-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-tick-label-padding-both-prop-and-theme-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-rotation-rotation-0-1-snap.png b/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-rotation-rotation-0-1-snap.png index fe5eb87ef1..53be1ac1bf 100644 Binary files a/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-rotation-rotation-0-1-snap.png and b/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-rotation-rotation-0-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-rotation-rotation-180-1-snap.png b/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-rotation-rotation-180-1-snap.png index 932c94a248..b5f94e61e5 100644 Binary files a/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-rotation-rotation-180-1-snap.png and b/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-rotation-rotation-180-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-rotation-rotation-90-1-snap.png b/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-rotation-rotation-90-1-snap.png index 357d73225c..d58207531f 100644 Binary files a/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-rotation-rotation-90-1-snap.png and b/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-rotation-rotation-90-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-rotation-rotation-negative-90-1-snap.png b/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-rotation-rotation-negative-90-1-snap.png index 97218e6fc2..f14aba0b51 100644 Binary files a/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-rotation-rotation-negative-90-1-snap.png and b/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-rotation-rotation-negative-90-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-accessor-formats-should-show-custom-format-1-snap.png b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-accessor-formats-should-show-custom-format-1-snap.png index fed5eb728d..c96938f4dc 100644 Binary files a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-accessor-formats-should-show-custom-format-1-snap.png and b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-accessor-formats-should-show-custom-format-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-false-should-show-correct-extents-banded-1-snap.png b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-false-should-show-correct-extents-banded-1-snap.png index c7252f0392..a179f2a132 100644 Binary files a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-false-should-show-correct-extents-banded-1-snap.png and b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-false-should-show-correct-extents-banded-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-false-should-show-correct-extents-stacked-1-snap.png b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-false-should-show-correct-extents-stacked-1-snap.png index c7252f0392..a179f2a132 100644 Binary files a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-false-should-show-correct-extents-stacked-1-snap.png and b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-false-should-show-correct-extents-stacked-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-true-should-show-correct-extents-banded-1-snap.png b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-true-should-show-correct-extents-banded-1-snap.png index 42f11c5b1a..a83b05a327 100644 Binary files a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-true-should-show-correct-extents-banded-1-snap.png and b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-true-should-show-correct-extents-banded-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-true-should-show-correct-extents-stacked-1-snap.png b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-true-should-show-correct-extents-stacked-1-snap.png index 42f11c5b1a..a83b05a327 100644 Binary files a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-true-should-show-correct-extents-stacked-1-snap.png and b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-scale-to-extents-domain-fit-is-true-should-show-correct-extents-stacked-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-stacked-as-not-percentage-1-snap.png b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-stacked-as-not-percentage-1-snap.png index 6bd76bc542..b29c078abf 100644 Binary files a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-stacked-as-not-percentage-1-snap.png and b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-stacked-as-not-percentage-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-bottom-axis-1-snap.png b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-bottom-axis-1-snap.png index 3710203c65..12fd22f78c 100644 Binary files a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-bottom-axis-1-snap.png and b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-bottom-axis-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-consecutive-duplicate-ticks-1-snap.png b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-consecutive-duplicate-ticks-1-snap.png index 1590f04bbb..4ae6acf943 100644 Binary files a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-consecutive-duplicate-ticks-1-snap.png and b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-consecutive-duplicate-ticks-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-left-axis-1-snap.png b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-left-axis-1-snap.png index 621a63ad67..12fd22f78c 100644 Binary files a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-left-axis-1-snap.png and b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-left-axis-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-right-axis-1-snap.png b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-right-axis-1-snap.png index 5be26ac723..12fd22f78c 100644 Binary files a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-right-axis-1-snap.png and b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-right-axis-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-top-axis-1-snap.png b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-top-axis-1-snap.png index c07a2b65b0..12fd22f78c 100644 Binary files a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-top-axis-1-snap.png and b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-top-axis-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-render-tick-padding-1-snap.png b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-render-tick-padding-1-snap.png index 5db44120f1..ccc0872acb 100644 Binary files a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-render-tick-padding-1-snap.png and b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-render-tick-padding-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-render-ticks-with-varied-rotations-1-snap.png b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-render-ticks-with-varied-rotations-1-snap.png index 66152ff2de..12fd22f78c 100644 Binary files a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-render-ticks-with-varied-rotations-1-snap.png and b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-render-ticks-with-varied-rotations-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-render-with-domain-constraints-1-snap.png b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-render-with-domain-constraints-1-snap.png index 86ed002dc9..4311cb706b 100644 Binary files a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-render-with-domain-constraints-1-snap.png and b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-render-with-domain-constraints-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-discover-using-no-custom-min-interval-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-discover-using-no-custom-min-interval-1-snap.png index 73dceae171..57bff9b8d8 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-discover-using-no-custom-min-interval-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-discover-using-no-custom-min-interval-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-false-rotation-0-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-false-rotation-0-1-snap.png index cd398778ae..9ad6c008b6 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-false-rotation-0-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-false-rotation-0-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-false-rotation-180-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-false-rotation-180-1-snap.png index 44fde0aa28..44089e684f 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-false-rotation-180-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-false-rotation-180-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-false-rotation-90-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-false-rotation-90-1-snap.png index c662e46d59..1f0d2341c7 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-false-rotation-90-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-false-rotation-90-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-false-rotation-negative-90-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-false-rotation-negative-90-1-snap.png index 5a91e0f34d..78e1fc5b6e 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-false-rotation-negative-90-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-false-rotation-negative-90-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-0-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-0-1-snap.png index ae5a133d8c..f9055ffd29 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-0-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-0-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-180-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-180-1-snap.png index 58ada2c3de..849ab52d4f 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-180-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-180-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-90-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-90-1-snap.png index c1ed6c452e..418d9ce35f 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-90-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-90-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-negative-90-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-negative-90-1-snap.png index 78deaa6b9d..5ef7b14204 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-negative-90-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-enable-histogram-mode-is-true-rotation-negative-90-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-point-alignment-center-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-point-alignment-center-1-snap.png index 547ec98609..19fcd4e385 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-point-alignment-center-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-point-alignment-center-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-point-alignment-end-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-point-alignment-end-1-snap.png index 9a87134d13..46b4d9f1f3 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-point-alignment-end-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-point-alignment-end-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-point-alignment-start-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-point-alignment-start-1-snap.png index 753571197f..cdd8187766 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-point-alignment-start-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-linear-point-alignment-start-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-false-has-histogram-bar-series-is-false-rotation-0-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-false-has-histogram-bar-series-is-false-rotation-0-1-snap.png index e954247085..2daa92e7c0 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-false-has-histogram-bar-series-is-false-rotation-0-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-false-has-histogram-bar-series-is-false-rotation-0-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-false-has-histogram-bar-series-is-false-rotation-180-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-false-has-histogram-bar-series-is-false-rotation-180-1-snap.png index 10c0424522..c212b0dfb4 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-false-has-histogram-bar-series-is-false-rotation-180-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-false-has-histogram-bar-series-is-false-rotation-180-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-false-has-histogram-bar-series-is-false-rotation-90-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-false-has-histogram-bar-series-is-false-rotation-90-1-snap.png index 1728ab7f1f..8cbc9e9c3d 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-false-has-histogram-bar-series-is-false-rotation-90-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-false-has-histogram-bar-series-is-false-rotation-90-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-false-has-histogram-bar-series-is-false-rotation-negative-90-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-false-has-histogram-bar-series-is-false-rotation-negative-90-1-snap.png index 16700d4d2c..9b5582fa18 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-false-has-histogram-bar-series-is-false-rotation-negative-90-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-false-has-histogram-bar-series-is-false-rotation-negative-90-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-true-has-histogram-bar-series-is-true-rotation-0-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-true-has-histogram-bar-series-is-true-rotation-0-1-snap.png index 3b592fdc46..f1d33b809d 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-true-has-histogram-bar-series-is-true-rotation-0-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-true-has-histogram-bar-series-is-true-rotation-0-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-true-has-histogram-bar-series-is-true-rotation-180-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-true-has-histogram-bar-series-is-true-rotation-180-1-snap.png index e76a6ef0e0..c99dbed4f4 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-true-has-histogram-bar-series-is-true-rotation-180-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-true-has-histogram-bar-series-is-true-rotation-180-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-true-has-histogram-bar-series-is-true-rotation-90-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-true-has-histogram-bar-series-is-true-rotation-90-1-snap.png index 10bf5b1c8d..dc44c0d076 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-true-has-histogram-bar-series-is-true-rotation-90-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-true-has-histogram-bar-series-is-true-rotation-90-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-true-has-histogram-bar-series-is-true-rotation-negative-90-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-true-has-histogram-bar-series-is-true-rotation-negative-90-1-snap.png index 574981f8d2..27070fe237 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-true-has-histogram-bar-series-is-true-rotation-negative-90-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-histogram-mode-ordinal-enable-histogram-mode-is-true-has-histogram-bar-series-is-true-rotation-negative-90-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-switch-ordinal-linear-x-axis-using-ordinal-x-axis-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-switch-ordinal-linear-x-axis-using-ordinal-x-axis-1-snap.png index a71bbbc978..6ab9f4ccc1 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-switch-ordinal-linear-x-axis-using-ordinal-x-axis-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-switch-ordinal-linear-x-axis-using-ordinal-x-axis-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-rectangular-brush-selection-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-rectangular-brush-selection-1-snap.png index 88f5f6e70c..2403d398ee 100644 Binary files a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-rectangular-brush-selection-1-snap.png and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-rectangular-brush-selection-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-rectangular-brush-selection-90-degree-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-rectangular-brush-selection-90-degree-1-snap.png index 811344d7e4..e6871b832a 100644 Binary files a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-rectangular-brush-selection-90-degree-1-snap.png and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-rectangular-brush-selection-90-degree-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-x-brush-selection-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-x-brush-selection-1-snap.png index 7ed0a6cce5..409632e9c2 100644 Binary files a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-x-brush-selection-1-snap.png and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-x-brush-selection-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-x-brush-selection-90-degree-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-x-brush-selection-90-degree-1-snap.png index a35307631e..d249262679 100644 Binary files a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-x-brush-selection-90-degree-1-snap.png and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-x-brush-selection-90-degree-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-y-brush-selection-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-y-brush-selection-1-snap.png index c340d383f2..2d4a590b5f 100644 Binary files a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-y-brush-selection-1-snap.png and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-y-brush-selection-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-y-brush-selection-90-degree-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-y-brush-selection-90-degree-1-snap.png index 139c4b87b7..5be27abc49 100644 Binary files a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-y-brush-selection-90-degree-1-snap.png and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-brushing-show-y-brush-selection-90-degree-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltip-sync-show-synced-tooltips-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltip-sync-show-synced-tooltips-1-snap.png index 14c30a26dd..42dc34cd50 100644 Binary files a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltip-sync-show-synced-tooltips-1-snap.png and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltip-sync-show-synced-tooltips-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-corrent-tooltip-for-split-and-y-accessors-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-corrent-tooltip-for-split-and-y-accessors-1-snap.png index b35c75cdbe..3eaf8d4c2f 100644 Binary files a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-corrent-tooltip-for-split-and-y-accessors-1-snap.png and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-corrent-tooltip-for-split-and-y-accessors-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-corrent-tooltip-in-dark-theme-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-corrent-tooltip-in-dark-theme-1-snap.png index 6ee9531fa4..85dac90e5a 100644 Binary files a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-corrent-tooltip-in-dark-theme-1-snap.png and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-corrent-tooltip-in-dark-theme-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-0-legend-buffer-1-snap.png b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-0-legend-buffer-1-snap.png index 8d749cd38b..844cb936ef 100644 Binary files a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-0-legend-buffer-1-snap.png and b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-0-legend-buffer-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-hide-bar-series-legend-item-1-snap.png b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-hide-bar-series-legend-item-1-snap.png index 0461efe92d..084b69896c 100644 Binary files a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-hide-bar-series-legend-item-1-snap.png and b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-hide-bar-series-legend-item-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-hide-line-series-legend-item-1-snap.png b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-hide-line-series-legend-item-1-snap.png index 716f7ef895..beb9ad2799 100644 Binary files a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-hide-line-series-legend-item-1-snap.png and b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-hide-line-series-legend-item-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png index bc0e63a793..41e766b874 100644 Binary files a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png and b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-legend-action-on-mouse-hover-1-snap.png b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-legend-action-on-mouse-hover-1-snap.png index c37017d1f1..a48721a8c1 100644 Binary files a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-legend-action-on-mouse-hover-1-snap.png and b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-legend-action-on-mouse-hover-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-non-split-series-1-snap.png b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-non-split-series-1-snap.png index 1c0f4ae1d3..6ec5566add 100644 Binary files a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-non-split-series-1-snap.png and b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-non-split-series-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-rotation-rotation-0-1-snap.png b/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-rotation-rotation-0-1-snap.png index 901cbd38f0..9d5312058d 100644 Binary files a/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-rotation-rotation-0-1-snap.png and b/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-rotation-rotation-0-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-rotation-rotation-180-1-snap.png b/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-rotation-rotation-180-1-snap.png index 11664d7da3..cef0ee6ad4 100644 Binary files a/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-rotation-rotation-180-1-snap.png and b/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-rotation-rotation-180-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-rotation-rotation-90-1-snap.png b/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-rotation-rotation-90-1-snap.png index 86b5532575..c5998f1aba 100644 Binary files a/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-rotation-rotation-90-1-snap.png and b/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-rotation-rotation-90-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-rotation-rotation-negative-90-1-snap.png b/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-rotation-rotation-negative-90-1-snap.png index 1a6b2c8b27..d1f1f98352 100644 Binary files a/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-rotation-rotation-negative-90-1-snap.png and b/integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-rotation-rotation-negative-90-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-average-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-average-1-snap.png index aab5eaf11c..db39ba78b5 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-average-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-average-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-carry-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-carry-1-snap.png index 69b1bb9b1f..9663015c9a 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-carry-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-carry-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-explicit-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-explicit-1-snap.png index 7b16c4dc3a..6baf739a96 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-explicit-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-explicit-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-linear-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-linear-1-snap.png index 82871bf1e3..bd54026518 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-linear-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-linear-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-lookahead-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-lookahead-1-snap.png index 43404d80d0..cc0880ac50 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-lookahead-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-lookahead-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-nearest-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-nearest-1-snap.png index e90684f74d..6ccf96e255 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-nearest-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-nearest-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-none-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-none-1-snap.png index 338c1ad842..112441511c 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-none-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-none-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-zero-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-zero-1-snap.png index ad655d2bfe..713b820f78 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-zero-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-2-should-display-correct-fit-for-type-zero-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-average-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-average-1-snap.png index 043b8ab95f..1cf32db1de 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-average-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-average-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-carry-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-carry-1-snap.png index b4e4f1d521..f52d9023d3 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-carry-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-carry-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-explicit-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-explicit-1-snap.png index 7b16c4dc3a..6baf739a96 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-explicit-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-explicit-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-linear-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-linear-1-snap.png index 249dc36e59..26c9614bfd 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-linear-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-linear-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-lookahead-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-lookahead-1-snap.png index 3eb17f79c2..f24896271b 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-lookahead-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-lookahead-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-nearest-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-nearest-1-snap.png index e90684f74d..6ccf96e255 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-nearest-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-nearest-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-none-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-none-1-snap.png index 338c1ad842..112441511c 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-none-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-none-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-zero-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-zero-1-snap.png index ad655d2bfe..713b820f78 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-zero-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-end-value-set-to-nearest-should-display-correct-fit-for-type-zero-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-average-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-average-1-snap.png index 9f03e48788..f9b989306b 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-average-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-average-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-carry-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-carry-1-snap.png index 272a68025a..53acd55d27 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-carry-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-carry-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-explicit-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-explicit-1-snap.png index 7b16c4dc3a..6baf739a96 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-explicit-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-explicit-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-linear-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-linear-1-snap.png index 7da1ea31fc..093ab3cc57 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-linear-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-linear-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-lookahead-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-lookahead-1-snap.png index 1039dd5f53..ecb96bba00 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-lookahead-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-lookahead-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-nearest-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-nearest-1-snap.png index e90684f74d..6ccf96e255 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-nearest-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-nearest-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-none-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-none-1-snap.png index 338c1ad842..112441511c 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-none-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-none-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-zero-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-zero-1-snap.png index ad655d2bfe..713b820f78 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-zero-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-no-end-value-should-display-correct-fit-for-type-zero-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-average-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-average-1-snap.png index b5aff9b8f4..f7f54f7fde 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-average-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-average-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-carry-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-carry-1-snap.png index 4518d0124c..b694ec3f62 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-carry-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-carry-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-explicit-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-explicit-1-snap.png index 686c1c700a..6d0db2425a 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-explicit-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-explicit-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-linear-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-linear-1-snap.png index a9ea6c5965..49d077a9f1 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-linear-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-linear-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-lookahead-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-lookahead-1-snap.png index 2f9c48e6e6..8cfcad3262 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-lookahead-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-lookahead-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-nearest-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-nearest-1-snap.png index 702b7dd05b..19d83cec4f 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-nearest-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-nearest-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-none-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-none-1-snap.png index e471eac8c0..96ff95abdc 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-none-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-none-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-zero-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-zero-1-snap.png index 989008a48e..f7954f0148 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-zero-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-ordinal-dataset-no-end-value-should-display-correct-fit-for-type-zero-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-average-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-average-1-snap.png index aab5eaf11c..db39ba78b5 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-average-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-average-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-carry-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-carry-1-snap.png index 69b1bb9b1f..9663015c9a 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-carry-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-carry-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-explicit-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-explicit-1-snap.png index 7b16c4dc3a..6baf739a96 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-explicit-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-explicit-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-linear-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-linear-1-snap.png index 82871bf1e3..bd54026518 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-linear-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-linear-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-lookahead-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-lookahead-1-snap.png index 43404d80d0..cc0880ac50 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-lookahead-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-lookahead-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-nearest-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-nearest-1-snap.png index e90684f74d..6ccf96e255 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-nearest-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-nearest-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-none-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-none-1-snap.png index 338c1ad842..112441511c 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-none-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-none-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-zero-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-zero-1-snap.png index ad655d2bfe..713b820f78 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-zero-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-area-charts-with-curved-end-value-set-to-2-should-display-correct-fit-for-type-zero-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-average-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-average-1-snap.png index 1f1baa17bb..713c0f6f26 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-average-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-average-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-carry-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-carry-1-snap.png index 48a58abb26..9bf2d342dc 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-carry-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-carry-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-explicit-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-explicit-1-snap.png index 7455b245f0..645bb84521 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-explicit-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-explicit-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-linear-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-linear-1-snap.png index 4a726d7465..4eb3afae30 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-linear-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-linear-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-lookahead-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-lookahead-1-snap.png index b8ea02587d..052d98d644 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-lookahead-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-lookahead-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-nearest-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-nearest-1-snap.png index 76065ea719..4625b7e1dc 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-nearest-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-nearest-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-none-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-none-1-snap.png index cb62246c2d..48f2c29d40 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-none-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-none-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-zero-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-zero-1-snap.png index a5793bb408..8f6d38ba8c 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-zero-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-end-value-set-to-2-should-display-correct-fit-for-type-zero-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-average-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-average-1-snap.png index d87b44f1b2..4495399dad 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-average-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-average-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-carry-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-carry-1-snap.png index d87e9fd74f..ca2ccf61a6 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-carry-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-carry-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-explicit-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-explicit-1-snap.png index 7455b245f0..645bb84521 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-explicit-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-explicit-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-linear-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-linear-1-snap.png index c2efabeaaf..769ce79c9d 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-linear-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-linear-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-lookahead-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-lookahead-1-snap.png index ffc4c2864b..6d9347c04b 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-lookahead-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-lookahead-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-nearest-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-nearest-1-snap.png index 76065ea719..4625b7e1dc 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-nearest-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-nearest-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-none-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-none-1-snap.png index cb62246c2d..48f2c29d40 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-none-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-none-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-zero-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-zero-1-snap.png index a5793bb408..8f6d38ba8c 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-zero-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-no-end-value-should-display-correct-fit-for-type-zero-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-average-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-average-1-snap.png index 1f1baa17bb..713c0f6f26 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-average-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-average-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-carry-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-carry-1-snap.png index 48a58abb26..9bf2d342dc 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-carry-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-carry-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-explicit-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-explicit-1-snap.png index 7455b245f0..645bb84521 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-explicit-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-explicit-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-linear-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-linear-1-snap.png index 4a726d7465..4eb3afae30 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-linear-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-linear-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-lookahead-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-lookahead-1-snap.png index b8ea02587d..052d98d644 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-lookahead-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-lookahead-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-nearest-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-nearest-1-snap.png index 76065ea719..4625b7e1dc 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-nearest-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-nearest-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-none-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-none-1-snap.png index cb62246c2d..48f2c29d40 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-none-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-none-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-zero-1-snap.png b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-zero-1-snap.png index a5793bb408..8f6d38ba8c 100644 Binary files a/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-zero-1-snap.png and b/integration/tests/__image_snapshots__/mixed-stories-test-ts-mixed-series-stories-fitting-functions-line-charts-with-curve-end-value-set-to-2-should-display-correct-fit-for-type-zero-1-snap.png differ diff --git a/src/chart_types/xy_chart/annotations/utils.test.ts b/src/chart_types/xy_chart/annotations/utils.test.ts index 9bbcfe20e6..2bd05f00f2 100644 --- a/src/chart_types/xy_chart/annotations/utils.test.ts +++ b/src/chart_types/xy_chart/annotations/utils.test.ts @@ -17,6 +17,7 @@ * under the License. */ +import { RecursivePartial } from '@elastic/eui'; import React from 'react'; import { ChartTypes } from '../..'; @@ -29,7 +30,7 @@ import { Position, Rotation } from '../../../utils/commons'; import { Dimensions } from '../../../utils/dimensions'; import { GroupId, AnnotationId } from '../../../utils/ids'; import { Point } from '../../../utils/point'; -import { DEFAULT_ANNOTATION_LINE_STYLE } from '../../../utils/themes/theme'; +import { DEFAULT_ANNOTATION_LINE_STYLE, AxisStyle } from '../../../utils/themes/theme'; import { computeAnnotationDimensionsSelector } from '../state/selectors/compute_annotations'; import { AnnotationDomainTypes, @@ -73,6 +74,12 @@ describe('annotation utils', () => { }; const groupId = 'foo-group'; + const style: RecursivePartial = { + tickLine: { + size: 10, + padding: 10, + }, + }; const axesSpecs: AxisSpec[] = []; const verticalAxisSpec: AxisSpec = { @@ -84,8 +91,7 @@ describe('annotation utils', () => { showOverlappingTicks: false, showOverlappingLabels: false, position: Position.Left, - tickSize: 10, - tickPadding: 10, + style, tickFormat: (value: any) => value.toString(), showGridLines: true, }; @@ -98,8 +104,7 @@ describe('annotation utils', () => { showOverlappingTicks: false, showOverlappingLabels: false, position: Position.Bottom, - tickSize: 10, - tickPadding: 10, + style, tickFormat: (value: any) => value.toString(), showGridLines: true, }; diff --git a/src/chart_types/xy_chart/legend/legend.test.ts b/src/chart_types/xy_chart/legend/legend.test.ts index 4a592b4235..19c399f1d8 100644 --- a/src/chart_types/xy_chart/legend/legend.test.ts +++ b/src/chart_types/xy_chart/legend/legend.test.ts @@ -21,7 +21,8 @@ import { ChartTypes } from '../..'; import { LegendItem } from '../../../commons/legend'; import { ScaleType } from '../../../scales/constants'; import { SpecTypes } from '../../../specs/constants'; -import { Position } from '../../../utils/commons'; +import { Position, RecursivePartial } from '../../../utils/commons'; +import { AxisStyle } from '../../../utils/themes/theme'; import { SeriesCollectionValue, getSeriesName } from '../utils/series'; import { AxisSpec, BasicSeriesSpec, SeriesTypes } from '../utils/specs'; import { computeLegend } from './legend'; @@ -94,6 +95,12 @@ const spec2: BasicSeriesSpec = { hideInLegend: false, }; +const style: RecursivePartial = { + tickLine: { + size: 10, + padding: 10, + }, +}; const axesSpecs: AxisSpec[] = []; const axisSpec: AxisSpec = { chartType: ChartTypes.XYAxis, @@ -104,8 +111,7 @@ const axisSpec: AxisSpec = { showOverlappingTicks: false, showOverlappingLabels: false, position: Position.Left, - tickSize: 10, - tickPadding: 10, + style, tickFormat: (value: any) => `${value}`, }; axesSpecs.push(axisSpec); diff --git a/src/chart_types/xy_chart/renderer/canvas/axes/index.ts b/src/chart_types/xy_chart/renderer/canvas/axes/index.ts index 11386cb3f0..f73a6f1648 100644 --- a/src/chart_types/xy_chart/renderer/canvas/axes/index.ts +++ b/src/chart_types/xy_chart/renderer/canvas/axes/index.ts @@ -20,9 +20,9 @@ import { withContext } from '../../../../../renderers/canvas'; import { Dimensions } from '../../../../../utils/dimensions'; import { AxisId } from '../../../../../utils/ids'; -import { AxisConfig } from '../../../../../utils/themes/theme'; +import { AxisStyle } from '../../../../../utils/themes/theme'; import { getSpecsById } from '../../../state/utils/spec'; -import { AxisTick, AxisTicksDimensions } from '../../../utils/axis_utils'; +import { AxisTick, AxisTicksDimensions, shouldShowTicks } from '../../../utils/axis_utils'; import { AxisSpec } from '../../../utils/specs'; import { renderDebugRect } from '../utils/debug'; import { renderLine } from './line'; @@ -32,7 +32,7 @@ import { renderTitle } from './title'; /** @internal */ export interface AxisProps { - axisConfig: AxisConfig; + axisStyle: AxisStyle; axisSpec: AxisSpec; axisTicksDimensions: AxisTicksDimensions; axisPosition: Dimensions; @@ -47,27 +47,41 @@ export interface AxesProps { axesSpecs: AxisSpec[]; axesTicksDimensions: Map; axesPositions: Map; - axisStyle: AxisConfig; + axesStyles: Map; + sharedAxesStyle: AxisStyle; debug: boolean; chartDimensions: Dimensions; } /** @internal */ export function renderAxes(ctx: CanvasRenderingContext2D, props: AxesProps) { - const { axesVisibleTicks, axesSpecs, axesTicksDimensions, axesPositions, axisStyle, debug, chartDimensions } = props; + const { + axesVisibleTicks, + axesSpecs, + axesTicksDimensions, + axesPositions, + axesStyles, + sharedAxesStyle, + debug, + chartDimensions, + } = props; axesVisibleTicks.forEach((ticks, axisId) => { const axisSpec = getSpecsById(axesSpecs, axisId); const axisTicksDimensions = axesTicksDimensions.get(axisId); const axisPosition = axesPositions.get(axisId); - if (!ticks || !axisSpec || !axisTicksDimensions || !axisPosition) { + + if (!ticks || !axisSpec || !axisTicksDimensions || !axisPosition || axisSpec.hide) { return; } + + const axisStyle = axesStyles.get(axisSpec.id) ?? sharedAxesStyle; + renderAxis(ctx, { axisSpec, axisTicksDimensions, axisPosition, ticks, - axisConfig: axisStyle, + axisStyle, debug, chartDimensions, }); @@ -76,7 +90,8 @@ export function renderAxes(ctx: CanvasRenderingContext2D, props: AxesProps) { function renderAxis(ctx: CanvasRenderingContext2D, props: AxisProps) { withContext(ctx, (ctx) => { - const { ticks, axisPosition, debug } = props; + const { ticks, axisPosition, debug, axisStyle, axisSpec } = props; + const showTicks = shouldShowTicks(axisStyle.tickLine, axisSpec.hide); ctx.translate(axisPosition.left, axisPosition.top); if (debug) { renderDebugRect(ctx, { @@ -90,18 +105,25 @@ function renderAxis(ctx: CanvasRenderingContext2D, props: AxisProps) { withContext(ctx, (ctx) => { renderLine(ctx, props); }); - withContext(ctx, (ctx) => { - ticks.forEach((tick) => { - renderTick(ctx, tick, props); - }); - }); - withContext(ctx, (ctx) => { - ticks - .filter((tick) => tick.label !== null) - .forEach((tick) => { - renderTickLabel(ctx, tick, props); + + if (showTicks) { + withContext(ctx, (ctx) => { + ticks.forEach((tick) => { + renderTick(ctx, tick, props); }); - }); + }); + } + + if (axisStyle.tickLabel.visible) { + withContext(ctx, (ctx) => { + ticks + .filter((tick) => tick.label !== null) + .forEach((tick) => { + renderTickLabel(ctx, tick, showTicks, props); + }); + }); + } + withContext(ctx, (ctx) => { renderTitle(ctx, props); }); diff --git a/src/chart_types/xy_chart/renderer/canvas/axes/line.ts b/src/chart_types/xy_chart/renderer/canvas/axes/line.ts index 23dd90f3f8..29b9aab2a8 100644 --- a/src/chart_types/xy_chart/renderer/canvas/axes/line.ts +++ b/src/chart_types/xy_chart/renderer/canvas/axes/line.ts @@ -22,12 +22,15 @@ import { Position } from '../../../../../utils/commons'; import { isVerticalAxis } from '../../../utils/axis_type_utils'; /** @internal */ -export function renderLine(ctx: CanvasRenderingContext2D, props: AxisProps) { - const { - axisSpec: { position }, - axisPosition, - axisConfig: { axisLineStyle }, - } = props; +export function renderLine(ctx: CanvasRenderingContext2D, { + axisSpec: { position }, + axisPosition, + axisStyle: { axisLine }, +}: AxisProps) { + if (!axisLine.visible) { + return; + } + const lineProps: number[] = []; if (isVerticalAxis(position)) { lineProps[0] = position === Position.Left ? axisPosition.width : 0; @@ -43,7 +46,7 @@ export function renderLine(ctx: CanvasRenderingContext2D, props: AxisProps) { ctx.beginPath(); ctx.moveTo(lineProps[0], lineProps[1]); ctx.lineTo(lineProps[2], lineProps[3]); - ctx.strokeStyle = axisLineStyle.stroke; - ctx.lineWidth = axisLineStyle.strokeWidth; + ctx.strokeStyle = axisLine.stroke; + ctx.lineWidth = axisLine.strokeWidth; ctx.stroke(); } diff --git a/src/chart_types/xy_chart/renderer/canvas/axes/tick.ts b/src/chart_types/xy_chart/renderer/canvas/axes/tick.ts index 72c462fb10..4ef06739ab 100644 --- a/src/chart_types/xy_chart/renderer/canvas/axes/tick.ts +++ b/src/chart_types/xy_chart/renderer/canvas/axes/tick.ts @@ -23,22 +23,19 @@ import { TickStyle } from '../../../../../utils/themes/theme'; import { stringToRGB } from '../../../../partition_chart/layout/utils/color_library_wrappers'; import { isVerticalAxis } from '../../../utils/axis_type_utils'; import { AxisTick } from '../../../utils/axis_utils'; -import { renderLine, MIN_STROKE_WIDTH } from '../primitives/line'; +import { renderLine } from '../primitives/line'; /** @internal */ export function renderTick(ctx: CanvasRenderingContext2D, tick: AxisTick, props: AxisProps) { const { - axisSpec: { tickSize, position }, + axisSpec: { position }, axisPosition, - axisConfig: { tickLineStyle }, + axisStyle: { tickLine }, } = props; - if (!tickLineStyle.visible || tickLineStyle.strokeWidth < MIN_STROKE_WIDTH) { - return; - } if (isVerticalAxis(position)) { - renderVerticalTick(ctx, position, axisPosition.width, tickSize, tick.position, tickLineStyle); + renderVerticalTick(ctx, position, axisPosition.width, tickLine.size, tick.position, tickLine); } else { - renderHorizontalTick(ctx, position, axisPosition.height, tickSize, tick.position, tickLineStyle); + renderHorizontalTick(ctx, position, axisPosition.height, tickLine.size, tick.position, tickLine); } } diff --git a/src/chart_types/xy_chart/renderer/canvas/axes/tick_label.ts b/src/chart_types/xy_chart/renderer/canvas/axes/tick_label.ts index f97dc191b3..6af2b7d2f9 100644 --- a/src/chart_types/xy_chart/renderer/canvas/axes/tick_label.ts +++ b/src/chart_types/xy_chart/renderer/canvas/axes/tick_label.ts @@ -25,41 +25,50 @@ import { renderText } from '../primitives/text'; import { renderDebugRectCenterRotated } from '../utils/debug'; /** @internal */ -export function renderTickLabel(ctx: CanvasRenderingContext2D, tick: AxisTick, props: AxisProps) { - /** - * padding is already computed through width - * and bbox_calculator using tickLabelPadding - * set padding to 0 to avoid conflict - */ - const labelStyle = { - ...props.axisConfig.tickLabelStyle, - padding: 0, - }; - +export function renderTickLabel(ctx: CanvasRenderingContext2D, tick: AxisTick, showTicks: boolean, props: AxisProps) { const { - axisSpec: { tickSize, tickPadding, position, labelFormat }, + axisSpec: { position, labelFormat }, axisTicksDimensions, axisPosition, debug, + axisStyle, } = props; + const labelStyle = axisStyle.tickLabel; + const { + rotation: tickLabelRotation, + alignment, + offset, + } = labelStyle; - const tickLabelRotation = props.axisSpec.tickLabelRotation || 0; - - const tickLabelProps = getTickLabelProps( - tickLabelRotation, - tickSize, - tickPadding, + const { + maxLabelBboxWidth, + maxLabelBboxHeight, + maxLabelTextWidth, + maxLabelTextHeight, + } = axisTicksDimensions; + const { + x, + y, + offsetX, + offsetY, + textOffsetX, + textOffsetY, + align, + verticalAlign, + } = getTickLabelProps( + axisStyle, tick.position, position, axisPosition, axisTicksDimensions, + showTicks, + offset, + alignment, ); - const { maxLabelTextWidth, maxLabelTextHeight } = axisTicksDimensions; - - const { x, y, offsetX, offsetY, align, verticalAlign } = tickLabelProps; if (debug) { + // full text container renderDebugRectCenterRotated( ctx, { @@ -76,6 +85,25 @@ export function renderTickLabel(ctx: CanvasRenderingContext2D, tick: AxisTick, p undefined, tickLabelRotation, ); + // rotated text container + if (![0, -90, 90, 180].includes(tickLabelRotation)) { + renderDebugRectCenterRotated( + ctx, + { + x: x + offsetX, + y: y + offsetY, + }, + { + x: x + offsetX, + y: y + offsetY, + height: maxLabelBboxHeight, + width: maxLabelBboxWidth, + }, + undefined, + undefined, + 0, + ); + } } const font: Font = { fontFamily: labelStyle.fontFamily, @@ -86,13 +114,11 @@ export function renderTickLabel(ctx: CanvasRenderingContext2D, tick: AxisTick, p textOpacity: 1, }; withContext(ctx, (ctx) => { - const textOffsetX = tickLabelRotation === 0 ? 0 : offsetX; - const textOffsetY = tickLabelRotation === 0 ? 0 : offsetY; renderText( ctx, { - x: x + textOffsetX, - y: y + textOffsetY, + x: x + offsetX, + y: y + offsetY, }, labelFormat ? labelFormat(tick.value) : tick.label, { @@ -103,6 +129,10 @@ export function renderTickLabel(ctx: CanvasRenderingContext2D, tick: AxisTick, p baseline: verticalAlign as CanvasTextBaseline, }, tickLabelRotation, + { + x: textOffsetX, + y: textOffsetY, + }, ); }); } diff --git a/src/chart_types/xy_chart/renderer/canvas/axes/title.ts b/src/chart_types/xy_chart/renderer/canvas/axes/title.ts index 52b797388e..2287fc90cc 100644 --- a/src/chart_types/xy_chart/renderer/canvas/axes/title.ts +++ b/src/chart_types/xy_chart/renderer/canvas/axes/title.ts @@ -19,8 +19,10 @@ import { AxisProps } from '.'; import { Position } from '../../../../../utils/commons'; +import { getSimplePadding } from '../../../../../utils/dimensions'; import { Font, FontStyle } from '../../../../partition_chart/layout/types/types'; import { isHorizontalAxis } from '../../../utils/axis_type_utils'; +import { shouldShowTicks } from '../../../utils/axis_utils'; import { renderText } from '../primitives/text'; import { renderDebugRect } from '../utils/debug'; @@ -28,8 +30,11 @@ import { renderDebugRect } from '../utils/debug'; export function renderTitle(ctx: CanvasRenderingContext2D, props: AxisProps) { const { axisSpec: { title, position }, + axisStyle: { + axisTitle, + }, } = props; - if (!title) { + if (!title || !axisTitle.visible) { return null; } if (isHorizontalAxis(position)) { @@ -41,48 +46,57 @@ export function renderTitle(ctx: CanvasRenderingContext2D, props: AxisProps) { function renderVerticalTitle(ctx: CanvasRenderingContext2D, props: AxisProps) { const { axisPosition: { height }, - axisSpec: { title, position, tickSize, tickPadding }, + axisSpec: { title, position, hide: hideAxis }, axisTicksDimensions: { maxLabelBboxWidth }, - axisConfig: { axisTitleStyle }, + axisStyle: { + axisTitle, + tickLine, + tickLabel, + }, debug, } = props; if (!title) { return null; } - const { padding, ...titleStyle } = axisTitleStyle; + const tickDimension = shouldShowTicks(tickLine, hideAxis) ? tickLine.size + tickLine.padding : 0; + const titlePadding = getSimplePadding(axisTitle.visible ? axisTitle.padding : 0); + const labelPadding = getSimplePadding(tickLabel.padding); + const labelWidth = tickLabel.visible ? labelPadding.outer + maxLabelBboxWidth + labelPadding.inner : 0; const top = height; - const left = position === Position.Left ? 0 : tickSize + tickPadding + maxLabelBboxWidth + padding; + const left = position === Position.Left ? titlePadding.outer : tickDimension + labelWidth + titlePadding.inner; if (debug) { - renderDebugRect(ctx, { x: left, y: top, width: height, height: titleStyle.fontSize }, undefined, undefined, -90); + renderDebugRect(ctx, { x: left, y: top, width: height, height: axisTitle.fontSize }, undefined, undefined, -90); } const font: Font = { - fontFamily: titleStyle.fontFamily, + fontFamily: axisTitle.fontFamily, fontVariant: 'normal', - fontStyle: titleStyle.fontStyle ? (titleStyle.fontStyle as FontStyle) : 'normal', + fontStyle: axisTitle.fontStyle ? (axisTitle.fontStyle as FontStyle) : 'normal', fontWeight: 'normal', - textColor: titleStyle.fill, + textColor: axisTitle.fill, textOpacity: 1, }; renderText( ctx, { - x: left + titleStyle.fontSize / 2, + x: left + axisTitle.fontSize / 2, y: top - height / 2, }, title, - { ...font, fill: titleStyle.fill, align: 'center', baseline: 'middle', fontSize: titleStyle.fontSize }, + { ...font, fill: axisTitle.fill, align: 'center', baseline: 'middle', fontSize: axisTitle.fontSize }, -90, ); } function renderHorizontalTitle(ctx: CanvasRenderingContext2D, props: AxisProps) { const { axisPosition: { width }, - axisSpec: { title, position, tickSize, tickPadding }, + axisSpec: { title, position, hide: hideAxis }, axisTicksDimensions: { maxLabelBboxHeight }, - axisConfig: { - axisTitleStyle: { padding, ...titleStyle }, + axisStyle: { + axisTitle, + tickLine, + tickLabel, }, debug, } = props; @@ -91,33 +105,37 @@ function renderHorizontalTitle(ctx: CanvasRenderingContext2D, props: AxisProps) return; } - const top = position === Position.Top ? 0 : maxLabelBboxHeight + tickPadding + tickSize + padding; + const tickDimension = shouldShowTicks(tickLine, hideAxis) ? tickLine.size + tickLine.padding : 0; + const titlePadding = getSimplePadding(axisTitle.visible ? axisTitle.padding : 0); + const labelPadding = getSimplePadding(tickLabel.padding); + const labelHeight = tickLabel.visible ? maxLabelBboxHeight + labelPadding.outer + labelPadding.inner : 0; + const top = position === Position.Top ? titlePadding.outer : labelHeight + tickDimension + titlePadding.inner; const left = 0; if (debug) { - renderDebugRect(ctx, { x: left, y: top, width, height: titleStyle.fontSize }); + renderDebugRect(ctx, { x: left, y: top, width, height: axisTitle.fontSize }); } const font: Font = { - fontFamily: titleStyle.fontFamily, + fontFamily: axisTitle.fontFamily, fontVariant: 'normal', - fontStyle: titleStyle.fontStyle ? (titleStyle.fontStyle as FontStyle) : 'normal', + fontStyle: axisTitle.fontStyle ? (axisTitle.fontStyle as FontStyle) : 'normal', fontWeight: 'normal', - textColor: titleStyle.fill, + textColor: axisTitle.fill, textOpacity: 1, }; renderText( ctx, { x: left + width / 2, - y: top + titleStyle.fontSize / 2, + y: top + axisTitle.fontSize / 2, }, title, { ...font, - fill: titleStyle.fill, + fill: axisTitle.fill, align: 'center', baseline: 'middle', - fontSize: titleStyle.fontSize, + fontSize: axisTitle.fontSize, }, ); } diff --git a/src/chart_types/xy_chart/renderer/canvas/grids.ts b/src/chart_types/xy_chart/renderer/canvas/grids.ts index 682dc99e68..c4d0087bcb 100644 --- a/src/chart_types/xy_chart/renderer/canvas/grids.ts +++ b/src/chart_types/xy_chart/renderer/canvas/grids.ts @@ -19,9 +19,10 @@ import { Line, Stroke } from '../../../../geoms/types'; import { withContext } from '../../../../renderers/canvas'; +import { mergePartial } from '../../../../utils/commons'; import { Dimensions } from '../../../../utils/dimensions'; import { AxisId } from '../../../../utils/ids'; -import { mergeGridLineConfigs, Theme } from '../../../../utils/themes/theme'; +import { AxisStyle } from '../../../../utils/themes/theme'; import { stringToRGB } from '../../../partition_chart/layout/utils/color_library_wrappers'; import { getSpecsById } from '../../state/utils/spec'; import { isVerticalGrid } from '../../utils/axis_type_utils'; @@ -30,35 +31,37 @@ import { AxisSpec } from '../../utils/specs'; import { renderMultiLine, MIN_STROKE_WIDTH } from './primitives/line'; interface GridProps { - chartTheme: Theme; + sharedAxesStyle: AxisStyle; axesGridLinesPositions: Map; axesSpecs: AxisSpec[]; chartDimensions: Dimensions; + axesStyles: Map; } /** @internal */ export function renderGrids(ctx: CanvasRenderingContext2D, props: GridProps) { - const { axesGridLinesPositions, axesSpecs, chartDimensions, chartTheme } = props; + const { axesGridLinesPositions, axesSpecs, chartDimensions, sharedAxesStyle, axesStyles } = props; withContext(ctx, (ctx) => { ctx.translate(chartDimensions.left, chartDimensions.top); axesGridLinesPositions.forEach((axisGridLinesPositions, axisId) => { const axisSpec = getSpecsById(axesSpecs, axisId); if (axisSpec && axisGridLinesPositions.length > 0) { + const axisStyle = axesStyles.get(axisSpec.id) ?? sharedAxesStyle; const themeConfig = isVerticalGrid(axisSpec.position) - ? chartTheme.axes.gridLineStyle.vertical - : chartTheme.axes.gridLineStyle.horizontal; + ? axisStyle.gridLine.vertical + : axisStyle.gridLine.horizontal; - const axisSpecConfig = axisSpec.gridLineStyle; - const gridLineStyle = axisSpecConfig ? mergeGridLineConfigs(axisSpecConfig, themeConfig) : themeConfig; - if (!gridLineStyle.stroke || !gridLineStyle.strokeWidth || gridLineStyle.strokeWidth < MIN_STROKE_WIDTH) { + const axisSpecConfig = axisSpec.gridLine; + const gridLine = axisSpecConfig ? mergePartial(themeConfig, axisSpecConfig) : themeConfig; + if (!gridLine.stroke || !gridLine.strokeWidth || gridLine.strokeWidth < MIN_STROKE_WIDTH) { return; } - const strokeColor = stringToRGB(gridLineStyle.stroke); - strokeColor.opacity = gridLineStyle.opacity !== undefined ? strokeColor.opacity * gridLineStyle.opacity : strokeColor.opacity; + const strokeColor = stringToRGB(gridLine.stroke); + strokeColor.opacity = gridLine.opacity !== undefined ? strokeColor.opacity * gridLine.opacity : strokeColor.opacity; const stroke: Stroke = { color: strokeColor, - width: gridLineStyle.strokeWidth, - dash: gridLineStyle.dash, + width: gridLine.strokeWidth, + dash: gridLine.dash, }; const lines = axisGridLinesPositions.map(([x1, y1, x2, y2]) => ({ x1, y1, x2, y2 })); renderMultiLine(ctx, lines, stroke); diff --git a/src/chart_types/xy_chart/renderer/canvas/primitives/text.ts b/src/chart_types/xy_chart/renderer/canvas/primitives/text.ts index 5ab3ca8094..b84f889671 100644 --- a/src/chart_types/xy_chart/renderer/canvas/primitives/text.ts +++ b/src/chart_types/xy_chart/renderer/canvas/primitives/text.ts @@ -27,18 +27,28 @@ export function renderText( ctx: CanvasRenderingContext2D, origin: Point, text: string, - font: Font & { fill: string; fontSize: number; align: TextAlign; baseline: TextBaseline }, + font: Font & { + fill: string; + fontSize: number; + align: TextAlign; + baseline: TextBaseline; + }, degree: number = 0, + translation?: Partial, ) { if (text === undefined || text === null) { return; } + withRotatedOrigin(ctx, origin, degree, (ctx) => { withContext(ctx, (ctx) => { ctx.fillStyle = font.fill; ctx.textAlign = font.align; ctx.textBaseline = font.baseline; ctx.font = cssFontShorthand(font, font.fontSize); + if (translation?.x || translation?.y) { + ctx.translate(translation?.x ?? 0, translation?.y ?? 0); + } ctx.fillText(text, origin.x, origin.y); }); }); diff --git a/src/chart_types/xy_chart/renderer/canvas/renderers.ts b/src/chart_types/xy_chart/renderer/canvas/renderers.ts index cc0a8a7efb..03556e2404 100644 --- a/src/chart_types/xy_chart/renderer/canvas/renderers.ts +++ b/src/chart_types/xy_chart/renderer/canvas/renderers.ts @@ -54,6 +54,7 @@ export function renderXYChartCanvas2d( axisTickPositions, axesSpecs, axesTicksDimensions, + axesStyles, axesGridLinesPositions, debug, } = props; @@ -67,7 +68,7 @@ export function renderXYChartCanvas2d( // The layers are callbacks, because of the need to not bake in the `ctx`, it feels more composable and uncoupled this way. renderLayers(ctx, [ // clear the canvas - (ctx: CanvasRenderingContext2D) => clearCanvas(ctx, 200000, 200000 /* , backgroundColor */), + (ctx: CanvasRenderingContext2D) => clearCanvas(ctx, 200000, 200000), (ctx: CanvasRenderingContext2D) => { renderAxes(ctx, { @@ -77,7 +78,8 @@ export function renderXYChartCanvas2d( axesVisibleTicks: axisTickPositions.axisVisibleTicks, chartDimensions, debug, - axisStyle: theme.axes, + axesStyles, + sharedAxesStyle: theme.axes, }); }, (ctx: CanvasRenderingContext2D) => { @@ -85,7 +87,8 @@ export function renderXYChartCanvas2d( axesSpecs, chartDimensions, axesGridLinesPositions, - chartTheme: theme, + axesStyles, + sharedAxesStyle: theme.axes, }); }, // rendering background annotations diff --git a/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx b/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx index 78f87885f8..55a7328d29 100644 --- a/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx +++ b/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx @@ -34,7 +34,7 @@ import { Dimensions } from '../../../../utils/dimensions'; import { deepEqual } from '../../../../utils/fast_deep_equal'; import { AnnotationId, AxisId } from '../../../../utils/ids'; import { LIGHT_THEME } from '../../../../utils/themes/light_theme'; -import { Theme } from '../../../../utils/themes/theme'; +import { Theme, AxisStyle } from '../../../../utils/themes/theme'; import { AnnotationDimensions } from '../../annotations/types'; import { computeAnnotationDimensionsSelector } from '../../state/selectors/compute_annotations'; import { computeAxisTicksDimensionsSelector } from '../../state/selectors/compute_axis_ticks_dimensions'; @@ -42,6 +42,7 @@ import { AxisVisibleTicks, computeAxisVisibleTicksSelector } from '../../state/s import { computeChartDimensionsSelector } from '../../state/selectors/compute_chart_dimensions'; import { computeChartTransformSelector } from '../../state/selectors/compute_chart_transform'; import { computeSeriesGeometriesSelector } from '../../state/selectors/compute_series_geometries'; +import { getAxesStylesSelector } from '../../state/selectors/get_axis_styles'; import { getHighlightedSeriesSelector } from '../../state/selectors/get_highlighted_series'; import { getAnnotationSpecsSelector, getAxisSpecsSelector } from '../../state/selectors/get_specs'; import { isChartEmptySelector } from '../../state/selectors/is_chart_empty'; @@ -66,6 +67,7 @@ export interface ReactiveChartStateProps { highlightedLegendItem?: LegendItem; axesSpecs: AxisSpec[]; axesTicksDimensions: Map; + axesStyles: Map; axisTickPositions: AxisVisibleTicks; axesGridLinesPositions: Map; annotationDimensions: Map; @@ -213,6 +215,7 @@ const DEFAULT_PROPS: ReactiveChartStateProps = { axisVisibleTicks: new Map(), }, axesTicksDimensions: new Map(), + axesStyles: new Map(), axesGridLinesPositions: new Map(), annotationDimensions: new Map(), annotationSpecs: [], @@ -240,6 +243,7 @@ const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => { axesSpecs: getAxisSpecsSelector(state), axisTickPositions: computeAxisVisibleTicksSelector(state), axesTicksDimensions: computeAxisTicksDimensionsSelector(state), + axesStyles: getAxesStylesSelector(state), axesGridLinesPositions: computeAxisVisibleTicksSelector(state).axisGridLinesPositions, annotationDimensions: computeAnnotationDimensionsSelector(state), annotationSpecs: getAnnotationSpecsSelector(state), diff --git a/src/chart_types/xy_chart/specs/axis.tsx b/src/chart_types/xy_chart/specs/axis.tsx index ce6fb096dc..02c2e1e0d9 100644 --- a/src/chart_types/xy_chart/specs/axis.tsx +++ b/src/chart_types/xy_chart/specs/axis.tsx @@ -33,10 +33,7 @@ const defaultProps = { showOverlappingTicks: false, showOverlappingLabels: false, position: Position.Left, - tickSize: 10, - tickPadding: 10, tickFormat: (tick: any) => `${tick}`, - tickLabelRotation: 0, }; type SpecRequired = Pick; @@ -50,9 +47,6 @@ export const Axis: React.FunctionComponent = getCo | 'showOverlappingTicks' | 'showOverlappingLabels' | 'position' - | 'tickSize' - | 'tickPadding' | 'tickFormat' - | 'tickLabelRotation' >(defaultProps), ); diff --git a/src/chart_types/xy_chart/state/chart_state.interactions.test.ts b/src/chart_types/xy_chart/state/chart_state.interactions.test.ts index efff0072a4..6fee601a6e 100644 --- a/src/chart_types/xy_chart/state/chart_state.interactions.test.ts +++ b/src/chart_types/xy_chart/state/chart_state.interactions.test.ts @@ -28,7 +28,8 @@ import { onExternalPointerEvent } from '../../../state/actions/events'; import { onPointerMove, onMouseDown, onMouseUp } from '../../../state/actions/mouse'; import { GlobalChartState } from '../../../state/chart_state'; import { getSettingsSpecSelector } from '../../../state/selectors/get_settings_specs'; -import { Position } from '../../../utils/commons'; +import { Position, RecursivePartial } from '../../../utils/commons'; +import { AxisStyle } from '../../../utils/themes/theme'; import { BarSeriesSpec, BasicSeriesSpec, AxisSpec, SeriesTypes } from '../utils/specs'; import { computeSeriesGeometriesSelector } from './selectors/compute_series_geometries'; import { getCursorBandPositionSelector } from './selectors/get_cursor_band'; @@ -728,6 +729,12 @@ function mouseOverTestSuite(scaleType: ScaleType) { let leftAxis: AxisSpec; let bottomAxis: AxisSpec; let currentSettingSpec: SettingsSpec; + const style: RecursivePartial = { + tickLine: { + size: 0, + padding: 0, + }, + }; beforeEach(() => { leftAxis = { chartType: ChartTypes.XYAxis, @@ -739,8 +746,7 @@ function mouseOverTestSuite(scaleType: ScaleType) { tickFormat: (value) => `left ${Number(value)}`, showOverlappingLabels: false, showOverlappingTicks: false, - tickPadding: 0, - tickSize: 0, + style, }; bottomAxis = { chartType: ChartTypes.XYAxis, @@ -752,8 +758,7 @@ function mouseOverTestSuite(scaleType: ScaleType) { tickFormat: (value) => `bottom ${Number(value)}`, showOverlappingLabels: false, showOverlappingTicks: false, - tickPadding: 0, - tickSize: 0, + style, }; currentSettingSpec = getSettingsSpecSelector(store.getState()); }); diff --git a/src/chart_types/xy_chart/state/chart_state.test.ts b/src/chart_types/xy_chart/state/chart_state.test.ts index 9ae10db0d3..4f8d439426 100644 --- a/src/chart_types/xy_chart/state/chart_state.test.ts +++ b/src/chart_types/xy_chart/state/chart_state.test.ts @@ -23,9 +23,10 @@ import { ScaleContinuous, ScaleBand } from '../../../scales'; import { ScaleType } from '../../../scales/constants'; import { SpecTypes, TooltipType } from '../../../specs/constants'; import { TooltipValue } from '../../../specs/settings'; -import { Position } from '../../../utils/commons'; +import { Position, RecursivePartial } from '../../../utils/commons'; import { IndexedGeometry, GeometryValue, BandedAccessorType } from '../../../utils/geometry'; import { AxisId } from '../../../utils/ids'; +import { AxisStyle } from '../../../utils/themes/theme'; import { AxisTicksDimensions, isDuplicateAxis } from '../utils/axis_utils'; import { AnnotationDomainTypes, @@ -37,6 +38,13 @@ import { SeriesTypes, } from '../utils/specs'; +const style: RecursivePartial = { + tickLine: { + size: 30, + padding: 10, + }, +}; + describe.skip('Chart Store', () => { let store: any = null; // @@ -105,8 +113,7 @@ describe.skip('Chart Store', () => { showOverlappingTicks: false, showOverlappingLabels: false, position: Position.Left, - tickSize: 30, - tickPadding: 10, + style, tickFormat: (value: any) => `${value}%`, }; const axis2: AxisSpec = { @@ -262,8 +269,7 @@ describe.skip('Chart Store', () => { showOverlappingTicks: false, showOverlappingLabels: false, position: Position.Left, - tickSize: 30, - tickPadding: 10, + style, tickFormat: (value: any) => `value ${value}`, }; store.addAxisSpec(axisSpec); @@ -603,8 +609,7 @@ describe.skip('Chart Store', () => { showOverlappingTicks: false, showOverlappingLabels: false, position: Position.Left, - tickSize: 30, - tickPadding: 10, + style, tickFormat: (value: any) => `value ${value}`, }; @@ -809,8 +814,7 @@ describe.skip('Chart Store', () => { showOverlappingTicks: false, showOverlappingLabels: false, position: Position.Bottom, - tickSize: 30, - tickPadding: 10, + style, tickFormat: (value: any) => `foo ${value}`, }; diff --git a/src/chart_types/xy_chart/state/selectors/compute_axis_visible_ticks.ts b/src/chart_types/xy_chart/state/selectors/compute_axis_visible_ticks.ts index 6d73763d72..0e4c6496e3 100644 --- a/src/chart_types/xy_chart/state/selectors/compute_axis_visible_ticks.ts +++ b/src/chart_types/xy_chart/state/selectors/compute_axis_visible_ticks.ts @@ -29,6 +29,7 @@ import { computeAxisTicksDimensionsSelector } from './compute_axis_ticks_dimensi import { computeChartDimensionsSelector } from './compute_chart_dimensions'; import { computeSeriesDomainsSelector } from './compute_series_domains'; import { countBarsInClusterSelector } from './count_bars_in_cluster'; +import { getAxesStylesSelector } from './get_axis_styles'; import { getBarPaddingsSelector } from './get_bar_paddings'; import { getAxisSpecsSelector } from './get_specs'; import { isHistogramModeEnabledSelector } from './is_histogram_mode_enabled'; @@ -48,6 +49,7 @@ export const computeAxisVisibleTicksSelector = createCachedSelector( getSettingsSpecSelector, getAxisSpecsSelector, computeAxisTicksDimensionsSelector, + getAxesStylesSelector, computeSeriesDomainsSelector, countBarsInClusterSelector, isHistogramModeEnabledSelector, @@ -59,6 +61,7 @@ export const computeAxisVisibleTicksSelector = createCachedSelector( settingsSpec, axesSpecs, axesTicksDimensions, + axesStyles, seriesDomainsAndData, totalBarsInCluster, isHistogramMode, @@ -71,6 +74,7 @@ export const computeAxisVisibleTicksSelector = createCachedSelector( settingsSpec.rotation, axesSpecs, axesTicksDimensions, + axesStyles, xDomain, yDomain, totalBarsInCluster, diff --git a/src/chart_types/xy_chart/state/selectors/compute_chart_dimensions.ts b/src/chart_types/xy_chart/state/selectors/compute_chart_dimensions.ts index f890e66c6a..9d0908db56 100644 --- a/src/chart_types/xy_chart/state/selectors/compute_chart_dimensions.ts +++ b/src/chart_types/xy_chart/state/selectors/compute_chart_dimensions.ts @@ -25,6 +25,7 @@ import { getChartThemeSelector } from '../../../../state/selectors/get_chart_the import { Dimensions } from '../../../../utils/dimensions'; import { computeChartDimensions } from '../../utils/dimensions'; import { computeAxisTicksDimensionsSelector } from './compute_axis_ticks_dimensions'; +import { getAxesStylesSelector } from './get_axis_styles'; import { getAxisSpecsSelector } from './get_specs'; /** @internal */ @@ -34,14 +35,16 @@ export const computeChartDimensionsSelector = createCachedSelector( getChartThemeSelector, computeAxisTicksDimensionsSelector, getAxisSpecsSelector, + getAxesStylesSelector, ], ( chartContainerDimensions, chartTheme, axesTicksDimensions, axesSpecs, + axesStyles, ): { chartDimensions: Dimensions; leftMargin: number; - } => computeChartDimensions(chartContainerDimensions, chartTheme, axesTicksDimensions, axesSpecs), + } => computeChartDimensions(chartContainerDimensions, chartTheme, axesTicksDimensions, axesStyles, axesSpecs), )(getChartIdSelector); diff --git a/src/chart_types/xy_chart/state/selectors/get_axis_styles.ts b/src/chart_types/xy_chart/state/selectors/get_axis_styles.ts new file mode 100644 index 0000000000..ec732a09a3 --- /dev/null +++ b/src/chart_types/xy_chart/state/selectors/get_axis_styles.ts @@ -0,0 +1,48 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import createCachedSelector from 're-reselect'; + +import { getChartIdSelector } from '../../../../state/selectors/get_chart_id'; +import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme'; +import { mergePartial, RecursivePartial } from '../../../../utils/commons'; +import { AxisId } from '../../../../utils/ids'; +import { AxisStyle } from '../../../../utils/themes/theme'; +import { getAxisSpecsSelector } from './get_specs'; + +/** + * Get merged axis styles. **Only** include axes with styles overrides. + * + * @internal + */ +export const getAxesStylesSelector = createCachedSelector( + [getAxisSpecsSelector, getChartThemeSelector], + (axesSpecs, { axes: sharedAxesStyle }): Map => { + const axesStyles = new Map(); + axesSpecs.forEach(({ id, style }) => { + const newStyle = style + ? mergePartial(sharedAxesStyle, style as RecursivePartial, { + mergeOptionalPartialValues: true, + }) + : null; + axesStyles.set(id, newStyle); + }); + return axesStyles; + }, +)(getChartIdSelector); diff --git a/src/chart_types/xy_chart/tooltip/tooltip.test.ts b/src/chart_types/xy_chart/tooltip/tooltip.test.ts index 17cda35620..c69e0ad81c 100644 --- a/src/chart_types/xy_chart/tooltip/tooltip.test.ts +++ b/src/chart_types/xy_chart/tooltip/tooltip.test.ts @@ -20,11 +20,19 @@ import { ChartTypes } from '../..'; import { ScaleType } from '../../../scales/constants'; import { SpecTypes } from '../../../specs/constants'; -import { Position } from '../../../utils/commons'; +import { Position, RecursivePartial } from '../../../utils/commons'; import { BarGeometry } from '../../../utils/geometry'; +import { AxisStyle } from '../../../utils/themes/theme'; import { AxisSpec, BarSeriesSpec, SeriesTypes } from '../utils/specs'; import { formatTooltip } from './tooltip'; +const style: RecursivePartial = { + tickLine: { + size: 0, + padding: 0, + }, +}; + describe('Tooltip formatting', () => { const SPEC_ID_1 = 'bar_1'; const SPEC_GROUP_ID_1 = 'bar_group_1'; @@ -53,8 +61,7 @@ describe('Tooltip formatting', () => { position: Position.Left, showOverlappingLabels: false, showOverlappingTicks: false, - tickPadding: 0, - tickSize: 0, + style, tickFormat: jest.fn((d) => `${d}`), }; const seriesStyle = { diff --git a/src/chart_types/xy_chart/tooltip/tooltip.ts b/src/chart_types/xy_chart/tooltip/tooltip.ts index a991ed2730..ed22408756 100644 --- a/src/chart_types/xy_chart/tooltip/tooltip.ts +++ b/src/chart_types/xy_chart/tooltip/tooltip.ts @@ -21,6 +21,7 @@ import { LegendItemExtraValues } from '../../../commons/legend'; import { SeriesKey } from '../../../commons/series_id'; import { TooltipValue } from '../../../specs'; import { getAccessorFormatLabel } from '../../../utils/accessor'; +import { identity } from '../../../utils/commons'; import { IndexedGeometry, BandedAccessorType } from '../../../utils/geometry'; import { getSeriesName } from '../utils/series'; import { @@ -88,14 +89,10 @@ export function formatTooltip( seriesIdentifier, valueAccessor: accessor, label, - value: axisSpec ? axisSpec.tickFormat(value, tickFormatOptions) : emptyFormatter(value), + value: axisSpec ? axisSpec.tickFormat(value, tickFormatOptions) : identity(value), markValue: isHeader || mark === null ? null : mark, color, isHighlighted: isHeader ? false : isHighlighted, isVisible, }; } - -function emptyFormatter(value: T): T { - return value; -} diff --git a/src/chart_types/xy_chart/utils/axis_utils.test.ts b/src/chart_types/xy_chart/utils/axis_utils.test.ts index 00f47012a7..e7c2537dad 100644 --- a/src/chart_types/xy_chart/utils/axis_utils.test.ts +++ b/src/chart_types/xy_chart/utils/axis_utils.test.ts @@ -26,10 +26,11 @@ import { ScaleType } from '../../../scales/constants'; import { SpecTypes } from '../../../specs/constants'; import { CanvasTextBBoxCalculator } from '../../../utils/bbox/canvas_text_bbox_calculator'; import { SvgTextBBoxCalculator } from '../../../utils/bbox/svg_text_bbox_calculator'; -import { Position } from '../../../utils/commons'; +import { Position, mergePartial } from '../../../utils/commons'; import { niceTimeFormatter } from '../../../utils/data/formatters'; import { AxisId, GroupId } from '../../../utils/ids'; import { LIGHT_THEME } from '../../../utils/themes/light_theme'; +import { AxisStyle, TextOffset } from '../../../utils/themes/theme'; import { XDomain, YDomain } from '../domains/types'; import { mergeYCustomDomainsByGroupId } from '../state/selectors/merge_y_custom_domains'; import { @@ -43,7 +44,7 @@ import { getAxisTicksPositions, getHorizontalAxisGridLineProps, getHorizontalAxisTickLineProps, - getMaxBboxDimensions, + getMaxLabelDimensions, getMinMaxRange, getScaleForAxisSpec, getTickLabelProps, @@ -51,11 +52,23 @@ import { getVerticalAxisTickLineProps, getVisibleTicks, isYDomain, - getAxisTickLabelPadding, enableDuplicatedTicks, } from './axis_utils'; import { computeXScale } from './scales'; -import { AxisSpec, DomainRange, AxisStyle, DEFAULT_GLOBAL_ID, TickFormatter } from './specs'; +import { AxisSpec, DomainRange, DEFAULT_GLOBAL_ID, TickFormatter } from './specs'; + +const getCustomStyle = (rotation = 0, padding = 10): AxisStyle => mergePartial(LIGHT_THEME.axes, { + tickLine: { + size: 10, + padding, + }, + tickLabel: { + fontSize: 16, + fontFamily: 'Arial', + rotation, + }, +}); +const style = getCustomStyle(); describe('Axis computational utils', () => { const mockedRect = { @@ -103,8 +116,7 @@ describe('Axis computational utils', () => { showOverlappingTicks: false, showOverlappingLabels: false, position: Position.Left, - tickSize: 10, - tickPadding: 10, + style, tickFormat: (value: any) => `${value}`, showGridLines: true, integersOnly: false, @@ -119,8 +131,7 @@ describe('Axis computational utils', () => { showOverlappingTicks: false, showOverlappingLabels: false, position: Position.Top, - tickSize: 10, - tickPadding: 10, + style, tickFormat: (value: any) => `${value}`, integersOnly: false, }; @@ -135,8 +146,7 @@ describe('Axis computational utils', () => { showOverlappingTicks: false, showOverlappingLabels: false, position: Position.Left, - tickSize: 10, - tickPadding: 10, + style, tickFormat: (value: any) => `${value}`, showGridLines: true, integersOnly: false, @@ -151,8 +161,7 @@ describe('Axis computational utils', () => { showOverlappingTicks: false, showOverlappingLabels: false, position: Position.Bottom, - tickSize: 10, - tickPadding: 10, + style, tickFormat: niceTimeFormatter([1551438000000, 1551441300000]), showGridLines: true, integersOnly: false, @@ -166,8 +175,7 @@ describe('Axis computational utils', () => { // showOverlappingTicks: false, // showOverlappingLabels: false, // position: Position.Top, - // tickSize: 10, - // tickPadding: 10, + // style, // tickFormat: (value: any) => { // return `${value}`; // }, @@ -196,12 +204,10 @@ describe('Axis computational utils', () => { const axisDimensions = computeAxisTicksDimensions(verticalAxisSpec, xDomain, [yDomain], 1, bboxCalculator, 0, axes); expect(axisDimensions).toEqual(axis1Dims); - const computeScalelessSpec = () => { - computeAxisTicksDimensions(ungroupedAxisSpec, xDomain, [yDomain], 1, bboxCalculator, 0, axes, undefined, false); - }; - const ungroupedAxisSpec = { ...verticalAxisSpec, groupId: 'foo' }; - expect(computeScalelessSpec).toThrowError('Cannot compute scale for axis spec axis_1'); + const result = computeAxisTicksDimensions(ungroupedAxisSpec, xDomain, [yDomain], 1, bboxCalculator, 0, axes, undefined, false); + + expect(result).toBeNull(); bboxCalculator.destroy(); }); @@ -294,6 +300,20 @@ describe('Axis computational utils', () => { expect(xScale).toBeDefined(); }); + const axisDimensions: AxisTicksDimensions = { + maxLabelBboxWidth: 100, + maxLabelBboxHeight: 100, + maxLabelTextHeight: 100, + maxLabelTextWidth: 100, + tickLabels: [], + tickValues: [], + }; + const offset: TextOffset = { + x: 0, + y: 0, + reference: 'global', + }; + describe('getAvailableTicks', () => { test('should compute to end of domain when histogram mode not enabled', () => { const enableHistogramMode = false; @@ -601,7 +621,7 @@ describe('Axis computational utils', () => { }); test('should get max bbox dimensions for a tick in comparison to previous values', () => { const bboxCalculator = new CanvasTextBBoxCalculator(); - const reducer = getMaxBboxDimensions(bboxCalculator, 16, 'Arial', 0, 1); + const reducer = getMaxLabelDimensions(bboxCalculator, LIGHT_THEME.axes.tickLabel); const accWithGreaterValues = { maxLabelBboxWidth: 100, @@ -613,9 +633,6 @@ describe('Axis computational utils', () => { }); test('should compute positions and alignment of tick labels along a vertical axis', () => { - let tickLabelRotation = 0; - const tickSize = 10; - const tickPadding = 5; const tickPosition = 0; const axisPosition = { top: 0, @@ -623,83 +640,93 @@ describe('Axis computational utils', () => { width: 100, height: 10, }; - const axisDimensions = { - maxLabelBboxWidth: 100, - maxLabelBboxHeight: 100, - }; const unrotatedLabelProps = getTickLabelProps( - tickLabelRotation, - tickSize, - tickPadding, + getCustomStyle(0, 5), tickPosition, Position.Left, axisPosition, axisDimensions, + true, + offset, ); expect(unrotatedLabelProps).toEqual({ offsetX: -50, offsetY: 0, + textOffsetX: 50, + textOffsetY: 0, x: 85, y: 0, align: 'right', verticalAlign: 'middle', }); - tickLabelRotation = 90; const rotatedLabelProps = getTickLabelProps( - tickLabelRotation, - tickSize, - tickPadding, + getCustomStyle(90), tickPosition, Position.Left, axisPosition, axisDimensions, + true, + offset, + { + vertical: 'middle', + horizontal: 'center', + }, ); expect(rotatedLabelProps).toEqual({ offsetX: -50, offsetY: 0, - x: 85, + textOffsetX: 0, + textOffsetY: 0, + x: 80, y: 0, align: 'center', verticalAlign: 'middle', }); const rightRotatedLabelProps = getTickLabelProps( - tickLabelRotation, - tickSize, - tickPadding, + getCustomStyle(90), tickPosition, Position.Right, axisPosition, axisDimensions, + true, + offset, + { + horizontal: 'center', + vertical: 'middle', + }, ); expect(rightRotatedLabelProps).toEqual({ offsetX: 50, offsetY: 0, - x: 15, + textOffsetX: 0, + textOffsetY: 0, + x: 20, y: 0, align: 'center', verticalAlign: 'middle', }); - tickLabelRotation = 0; const rightUnrotatedLabelProps = getTickLabelProps( - tickLabelRotation, - tickSize, - tickPadding, + getCustomStyle(), tickPosition, Position.Right, axisPosition, axisDimensions, + true, + offset, ); expect(rightUnrotatedLabelProps).toEqual({ offsetX: 50, offsetY: 0, - x: 15, + textOffsetX: -50, + textOffsetY: 0, + x: 20, y: 0, align: 'left', verticalAlign: 'middle', @@ -707,9 +734,6 @@ describe('Axis computational utils', () => { }); test('should compute positions and alignment of tick labels along a horizontal axis', () => { - let tickLabelRotation = 0; - const tickSize = 10; - const tickPadding = 5; const tickPosition = 0; const axisPosition = { top: 0, @@ -717,84 +741,94 @@ describe('Axis computational utils', () => { width: 100, height: 10, }; - const axisDimensions = { - maxLabelBboxWidth: 100, - maxLabelBboxHeight: 100, - }; const unrotatedLabelProps = getTickLabelProps( - tickLabelRotation, - tickSize, - tickPadding, + getCustomStyle(0, 5), tickPosition, Position.Top, axisPosition, axisDimensions, + true, + offset, + { + horizontal: 'center', + vertical: 'bottom', + } ); expect(unrotatedLabelProps).toEqual({ offsetX: 0, offsetY: -50, + textOffsetY: 50, + textOffsetX: 0, x: 0, y: -5, align: 'center', verticalAlign: 'bottom', }); - tickLabelRotation = 90; const rotatedLabelProps = getTickLabelProps( - tickLabelRotation, - tickSize, - tickPadding, + getCustomStyle(90), tickPosition, Position.Top, axisPosition, axisDimensions, + true, + offset, ); expect(rotatedLabelProps).toEqual({ offsetX: 0, offsetY: -50, + textOffsetX: 0, + textOffsetY: 0, x: 0, - y: -5, + y: -10, align: 'center', verticalAlign: 'middle', }); const bottomRotatedLabelProps = getTickLabelProps( - tickLabelRotation, - tickSize, - tickPadding, + getCustomStyle(90), tickPosition, Position.Bottom, axisPosition, axisDimensions, + true, + offset, ); expect(bottomRotatedLabelProps).toEqual({ offsetX: 0, offsetY: 50, + textOffsetX: 0, + textOffsetY: 0, x: 0, - y: 15, + y: 20, align: 'center', verticalAlign: 'middle', }); - tickLabelRotation = 0; const bottomUnrotatedLabelProps = getTickLabelProps( - tickLabelRotation, - tickSize, - tickPadding, + getCustomStyle(90), tickPosition, Position.Bottom, axisPosition, axisDimensions, + true, + offset, + { + horizontal: 'center', + vertical: 'top', + } ); expect(bottomUnrotatedLabelProps).toEqual({ offsetX: 0, offsetY: 50, + textOffsetX: 0, + textOffsetY: -50, x: 0, - y: 15, + y: 20, align: 'center', verticalAlign: 'top', }); @@ -854,7 +888,7 @@ describe('Axis computational utils', () => { expect(verticalAxisSpec.id).toEqual(verticalAxisSpecWTitle.id); const axisSpecs = [verticalAxisSpecWTitle]; - + const axesStyles = new Map(); const axisDims = new Map(); axisDims.set(verticalAxisSpecWTitle.id, axis1Dims); @@ -867,6 +901,7 @@ describe('Axis computational utils', () => { chartRotation, axisSpecs, axisDims, + axesStyles, xDomain, [yDomain], 1, @@ -893,6 +928,7 @@ describe('Axis computational utils', () => { chartRotation, axisSpecs, axisDims, + axesStyles, xDomain, [yDomain], 1, @@ -902,11 +938,18 @@ describe('Axis computational utils', () => { expect(axisTicksPosition.axisPositions.get(verticalAxisSpecWTitle.id)).toEqual({ top: 0, left: 10, - width: 30, + width: 18, height: 100, }); }); + const axisTitleStyles = mergePartial(LIGHT_THEME.axes.axisTitle, { + padding: { + inner: 0, + outer: 10, + }, + }); + test('should compute left axis position', () => { const axisTitleHeight = 10; const cumTopSum = 10; @@ -918,12 +961,16 @@ describe('Axis computational utils', () => { chartDim, LIGHT_THEME.chartMargins, axisTitleHeight, + axisTitleStyles, verticalAxisSpec, axis1Dims, cumTopSum, cumBottomSum, cumLeftSum, cumRightSum, + 10, + 0, + true, ); const expectedLeftAxisPosition = { @@ -954,12 +1001,16 @@ describe('Axis computational utils', () => { chartDim, LIGHT_THEME.chartMargins, axisTitleHeight, + axisTitleStyles, verticalAxisSpec, axis1Dims, cumTopSum, cumBottomSum, cumLeftSum, cumRightSum, + 10, + 0, + true, ); const expectedRightAxisPosition = { @@ -990,18 +1041,26 @@ describe('Axis computational utils', () => { chartDim, LIGHT_THEME.chartMargins, axisTitleHeight, + axisTitleStyles, horizontalAxisSpec, axis1Dims, cumTopSum, cumBottomSum, cumLeftSum, cumRightSum, + 10, + 0, + true, ); + const { + size: tickSize, + padding: tickPadding, + } = LIGHT_THEME.axes.tickLine; const expectedTopAxisPosition = { dimensions: { height: - axis1Dims.maxLabelBboxHeight + axisTitleHeight + horizontalAxisSpec.tickSize + horizontalAxisSpec.tickPadding, + axis1Dims.maxLabelBboxHeight + axisTitleHeight + tickSize + tickPadding, width: 100, left: 0, top: cumTopSum + LIGHT_THEME.chartMargins.top, @@ -1027,12 +1086,16 @@ describe('Axis computational utils', () => { chartDim, LIGHT_THEME.chartMargins, axisTitleHeight, + axisTitleStyles, horizontalAxisSpec, axis1Dims, cumTopSum, cumBottomSum, cumLeftSum, cumRightSum, + 10, + 0, + true, ); const expectedBottomAxisPosition = { @@ -1055,7 +1118,7 @@ describe('Axis computational utils', () => { const chartRotation = 0; const axisSpecs = [verticalAxisSpec]; - + const axisStyles = new Map(); const axisDims = new Map(); axisDims.set('not_a_mapped_one', axis1Dims); @@ -1068,6 +1131,7 @@ describe('Axis computational utils', () => { chartRotation, axisSpecs, axisDims, + axisStyles, xDomain, [yDomain], 1, @@ -1083,7 +1147,7 @@ describe('Axis computational utils', () => { const chartRotation = 0; const axisSpecs = [verticalAxisSpec]; - + const axisStyles = new Map(); const axisDims = new Map(); axisDims.set(verticalAxisSpec.id, axis1Dims); @@ -1096,6 +1160,7 @@ describe('Axis computational utils', () => { chartRotation, axisSpecs, axisDims, + axisStyles, xDomain, [yDomain], 1, @@ -1127,6 +1192,7 @@ describe('Axis computational utils', () => { chartRotation, axisSpecs, axisDims, + axisStyles, xDomain, [yDomain], 1, @@ -1135,7 +1201,7 @@ describe('Axis computational utils', () => { const expectedPositionWithTopLegend = { height: 100, - width: 30, + width: 18, left: 100, top: 0, }; @@ -1154,6 +1220,7 @@ describe('Axis computational utils', () => { chartRotation, invalidSpecs, axisDims, + axisStyles, xDomain, [yDomain], 1, @@ -1375,26 +1442,6 @@ describe('Axis computational utils', () => { expect(attemptToMerge).toThrowError(expectedError); }); - test('should not allow negative padding', () => { - const negativePadding = -2; - // value canvas_text_bbox_calculator changes negative values is 1 - const positivePadding = 1; - - const bboxCalculator = new CanvasTextBBoxCalculator(); - const negativeReducer = getMaxBboxDimensions(bboxCalculator, 16, 'Arial', 0, negativePadding); - const positiveReducer = getMaxBboxDimensions(bboxCalculator, 16, 'Arial', 0, positivePadding); - - expect(JSON.stringify(negativeReducer)).toEqual(JSON.stringify(positiveReducer)); - }); - test('should expect axisSpec.style.tickLabelPadding if specified', () => { - const axisSpecStyle: AxisStyle = { - tickLabelPadding: 2, - }; - - const axisConfigTickLabelPadding = 1; - - expect(getAxisTickLabelPadding(axisConfigTickLabelPadding, axisSpecStyle)).toEqual(2); - }); test('should show unique tick labels if duplicateTicks is set to false', () => { const now = DateTime.fromISO('2019-01-11T00:00:00.000') .setZone('utc+1') @@ -1411,9 +1458,7 @@ describe('Axis computational utils', () => { hide: false, showOverlappingLabels: false, showOverlappingTicks: false, - tickSize: 10, - tickPadding: 10, - tickLabelRotation: 0, + style, tickFormat: formatter, }; const xDomainTime: XDomain = { @@ -1447,9 +1492,7 @@ describe('Axis computational utils', () => { hide: false, showOverlappingLabels: false, showOverlappingTicks: false, - tickSize: 10, - tickPadding: 10, - tickLabelRotation: 0, + style, tickFormat: formatter, }; const xDomainTime: XDomain = { @@ -1494,9 +1537,7 @@ describe('Axis computational utils', () => { hide: false, showOverlappingLabels: false, showOverlappingTicks: false, - tickSize: 10, - tickPadding: 10, - tickLabelRotation: 0, + style, tickFormat: formatter, }; const xDomainTime: XDomain = { @@ -1523,3 +1564,9 @@ describe('Axis computational utils', () => { ]); }); }); + +it.todo('Test alignment calculations'); +it.todo('Test text offsets calculations'); +it.todo('Test title padding calculations'); +it.todo('Test label padding calculations'); +it.todo('Test axis visibility'); diff --git a/src/chart_types/xy_chart/utils/axis_utils.ts b/src/chart_types/xy_chart/utils/axis_utils.ts index 17a5d324fd..6d9f0f2327 100644 --- a/src/chart_types/xy_chart/utils/axis_utils.ts +++ b/src/chart_types/xy_chart/utils/axis_utils.ts @@ -19,20 +19,17 @@ import { Scale } from '../../../scales'; import { BBox, BBoxCalculator } from '../../../utils/bbox/bbox_calculator'; -import { Position, Rotation, getUniqueValues } from '../../../utils/commons'; -import { Dimensions, Margins } from '../../../utils/dimensions'; +import { Position, Rotation, getUniqueValues, VerticalAlignment, HorizontalAlignment, getPercentageValue, mergePartial } from '../../../utils/commons'; +import { Dimensions, Margins, getSimplePadding } from '../../../utils/dimensions'; import { AxisId } from '../../../utils/ids'; -import { AxisConfig, Theme } from '../../../utils/themes/theme'; +import { Logger } from '../../../utils/logger'; +import { AxisStyle, Theme, TextAlignment, TextOffset } from '../../../utils/themes/theme'; import { XDomain, YDomain } from '../domains/types'; +import { MIN_STROKE_WIDTH } from '../renderer/canvas/primitives/line'; import { getSpecsById } from '../state/utils/spec'; import { isVerticalAxis } from './axis_type_utils'; import { computeXScale, computeYScales } from './scales'; -import { - AxisSpec, - TickFormatter, - AxisStyle, - TickFormatterOptions, -} from './specs'; +import { AxisSpec, TickFormatterOptions, TickFormatter } from './specs'; export type AxisLinePosition = [number, number, number, number]; @@ -56,8 +53,10 @@ export interface TickLabelProps { y: number; offsetX: number; offsetY: number; - align: string; - verticalAlign: string; + textOffsetX: number; + textOffsetY: number; + align: Extract; + verticalAlign: Extract; } /** @@ -78,13 +77,14 @@ export function computeAxisTicksDimensions( totalBarsInCluster: number, bboxCalculator: BBoxCalculator, chartRotation: Rotation, - axisConfig: AxisConfig, + { gridLine, tickLabel }: AxisStyle, barsPadding?: number, enableHistogramMode?: boolean, ): AxisTicksDimensions | null { - if (axisSpec.hide) { + if (axisSpec.hide && !gridLine.horizontal.visible && !gridLine.vertical.visible) { return null; } + const scale = getScaleForAxisSpec( axisSpec, xDomain, @@ -96,22 +96,19 @@ export function computeAxisTicksDimensions( barsPadding, enableHistogramMode, ); + if (!scale) { - throw new Error(`Cannot compute scale for axis spec ${axisSpec.id}`); - } + Logger.warn(`Cannot compute scale for axis spec ${axisSpec.id}. Axis will not be displayed.`); - const tickLabelPadding = getAxisTickLabelPadding(axisConfig.tickLabelStyle.padding, axisSpec.style); + return null; + } const dimensions = computeTickDimensions( scale, axisSpec.labelFormat ?? axisSpec.tickFormat, bboxCalculator, - axisConfig, - tickLabelPadding, - axisSpec.tickLabelRotation, - { - timeZone: xDomain.timeZone, - }, + tickLabel, + { timeZone: xDomain.timeZone }, ); return { @@ -119,14 +116,6 @@ export function computeAxisTicksDimensions( }; } -/** @internal */ -export function getAxisTickLabelPadding(axisConfigTickLabelPadding: number, axisSpecStyle?: AxisStyle): number { - if (axisSpecStyle && axisSpecStyle.tickLabelPadding !== undefined) { - return axisSpecStyle.tickLabelPadding; - } - return axisConfigTickLabelPadding; -} - /** @internal */ export function isYDomain(position: Position, chartRotation: Rotation): boolean { const isStraightRotation = chartRotation === 0 || chartRotation === 180; @@ -190,14 +179,15 @@ export function computeRotatedLabelDimensions(unrotatedDims: BBox, degreesRotati } /** @internal */ -export const getMaxBboxDimensions = ( +export const getMaxLabelDimensions = ( bboxCalculator: BBoxCalculator, - fontSize: number, - fontFamily: string, - tickLabelRotation: number, - tickLabelPadding: number, + { + fontSize, + fontFamily, + rotation, + }: AxisStyle['tickLabel'], ) => ( - acc: { [key: string]: number }, + acc: Record, tickLabel: string, ): { maxLabelBboxWidth: number; @@ -205,9 +195,8 @@ export const getMaxBboxDimensions = ( maxLabelTextWidth: number; maxLabelTextHeight: number; } => { - const bbox = bboxCalculator.compute(tickLabel, tickLabelPadding, fontSize, fontFamily); - - const rotatedBbox = computeRotatedLabelDimensions(bbox, tickLabelRotation); + const bbox = bboxCalculator.compute(tickLabel, 0, fontSize, fontFamily); + const rotatedBbox = computeRotatedLabelDimensions(bbox, rotation); const width = Math.ceil(rotatedBbox.width); const height = Math.ceil(rotatedBbox.height); @@ -230,39 +219,120 @@ function computeTickDimensions( scale: Scale, tickFormat: TickFormatter, bboxCalculator: BBoxCalculator, - axisConfig: AxisConfig, - tickLabelPadding: number, - tickLabelRotation = 0, + tickLabelStyle: AxisStyle['tickLabel'], tickFormatOptions?: TickFormatterOptions, ) { const tickValues = scale.ticks(); const tickLabels = tickValues.map((d) => tickFormat(d, tickFormatOptions)); - const { - tickLabelStyle: { fontFamily, fontSize }, - } = axisConfig; - const { - maxLabelBboxWidth, - maxLabelBboxHeight, - maxLabelTextWidth, - maxLabelTextHeight, - } = tickLabels.reduce( - getMaxBboxDimensions(bboxCalculator, fontSize, fontFamily, tickLabelRotation, tickLabelPadding), - { maxLabelBboxWidth: 0, maxLabelBboxHeight: 0, maxLabelTextWidth: 0, maxLabelTextHeight: 0 }, - ); + const defaultAcc = { maxLabelBboxWidth: 0, maxLabelBboxHeight: 0, maxLabelTextWidth: 0, maxLabelTextHeight: 0 }; + const dimensions = tickLabelStyle.visible + ? tickLabels.reduce( + getMaxLabelDimensions(bboxCalculator, tickLabelStyle), + defaultAcc, + ) + : defaultAcc; + return { + ...dimensions, tickValues, tickLabels, - maxLabelBboxWidth, - maxLabelBboxHeight, - maxLabelTextWidth, - maxLabelTextHeight, }; } +function getUserTextOffsets(dimensions: AxisTicksDimensions, offset: TextOffset) { + const defaults = { + x: 0, + y: 0, + }; + + if (offset.reference === 'global') { + return { + local: defaults, + global: { + x: getPercentageValue(offset.x, dimensions.maxLabelBboxWidth, 0), + y: getPercentageValue(offset.y, dimensions.maxLabelBboxHeight, 0), + }, + }; + } + + return { + global: defaults, + local: { + x: getPercentageValue(offset.x, dimensions.maxLabelTextWidth, 0), + y: getPercentageValue(offset.y, dimensions.maxLabelTextHeight, 0), + }, + }; +} + +function getHorizontalTextOffset(width: number, alignment: Extract): number { + switch (alignment) { + case 'left': + return -width / 2; + case 'right': + return width / 2; + case 'center': + default: + return 0; + } +} + +function getVerticalTextOffset(height: number, alignment: Extract): number { + switch (alignment) { + case 'top': + return -height / 2; + case 'bottom': + return height / 2; + case 'middle': + default: + return 0; + } +} + +function getHorizontalAlign(position: Position, alignment: HorizontalAlignment = HorizontalAlignment.Near): Exclude { + if ( + alignment === HorizontalAlignment.Center + || alignment === HorizontalAlignment.Right + || alignment === HorizontalAlignment.Left + ) { + return alignment; + } + + if (position === Position.Left) { + return alignment === HorizontalAlignment.Near ? HorizontalAlignment.Right : HorizontalAlignment.Left; + } + + if (position === Position.Right) { + return alignment === HorizontalAlignment.Near ? HorizontalAlignment.Left : HorizontalAlignment.Right; + } + + // fallback for near/far on top/bottom axis + return 'center'; +} + +function getVerticalAlign(position: Position, alignment: VerticalAlignment = VerticalAlignment.Middle): Exclude { + if ( + alignment === VerticalAlignment.Middle + || alignment === VerticalAlignment.Top + || alignment === VerticalAlignment.Bottom + ) { + return alignment; + } + + if (position === Position.Top) { + return alignment === VerticalAlignment.Near ? VerticalAlignment.Bottom : VerticalAlignment.Top; + } + + if (position === Position.Bottom) { + return alignment === VerticalAlignment.Near ? VerticalAlignment.Top : VerticalAlignment.Bottom; + } + + // fallback for near/far on left/right axis + return VerticalAlignment.Middle; +} + /** * Gets the computed x/y coordinates & alignment properties for an axis tick label. * @param isVerticalAxis if the axis is vertical (in contrast to horizontal) - * @param tickLabelRotation degree of rotation of the tick label * @param tickSize length of tick line * @param tickPadding amount of padding between label and tick line * @param tickPosition position of tick relative to axis line origin and other ticks along it @@ -271,39 +341,58 @@ function computeTickDimensions( * @internal */ export function getTickLabelProps( - tickLabelRotation: number, - tickSize: number, - tickPadding: number, + { + tickLine, + tickLabel, + }: AxisStyle, tickPosition: number, position: Position, axisPosition: Dimensions, - axisTickDimensions: Pick, + tickDimensions: AxisTicksDimensions, + showTicks: boolean, + textOffset: TextOffset, + textAlignment?: TextAlignment, ): TickLabelProps { - const { maxLabelBboxWidth, maxLabelBboxHeight } = axisTickDimensions; - const isRotated = tickLabelRotation !== 0; + const { maxLabelBboxWidth, maxLabelTextWidth, maxLabelBboxHeight, maxLabelTextHeight } = tickDimensions; + const tickDimension = showTicks ? tickLine.size + tickLine.padding : 0; + const labelPadding = getSimplePadding(tickLabel.padding); + const isLeftAxis = position === Position.Left; + const isAxisTop = position === Position.Top; + const align = getHorizontalAlign(position, textAlignment?.horizontal); + const verticalAlign = getVerticalAlign(position, textAlignment?.vertical); + + const userOffsets = getUserTextOffsets(tickDimensions, textOffset); + const textOffsetX = getHorizontalTextOffset(maxLabelTextWidth, align) + userOffsets.local.x; + const textOffsetY = getVerticalTextOffset(maxLabelTextHeight, verticalAlign) + userOffsets.local.y; + if (isVerticalAxis(position)) { - const isLeftAxis = position === Position.Left; - const x = isLeftAxis ? axisPosition.width - tickSize - tickPadding : tickSize + tickPadding; - const offsetX = isLeftAxis ? -maxLabelBboxWidth / 2 : maxLabelBboxWidth / 2; + const x = isLeftAxis ? axisPosition.width - tickDimension - labelPadding.inner : tickDimension + labelPadding.inner; + const offsetX = (isLeftAxis ? -1 : 1) * (maxLabelBboxWidth / 2); + return { x, y: tickPosition, - offsetX, - offsetY: 0, - align: isRotated ? 'center' : (isLeftAxis ? 'right' : 'left'), - verticalAlign: 'middle', + offsetX: offsetX + userOffsets.global.x, + offsetY: userOffsets.global.y, + textOffsetY, + textOffsetX, + align, + verticalAlign, }; } - const isAxisTop = position === Position.Top; + const offsetY = isAxisTop ? -maxLabelBboxHeight / 2 : maxLabelBboxHeight / 2; + return { x: tickPosition, - y: isAxisTop ? axisPosition.height - tickSize - tickPadding : tickSize + tickPadding, - offsetX: 0, - offsetY: isAxisTop ? -maxLabelBboxHeight / 2 : maxLabelBboxHeight / 2, - align: 'center', - verticalAlign: isRotated ? 'middle' : (isAxisTop ? 'bottom' : 'top'), + y: isAxisTop ? axisPosition.height - tickDimension - labelPadding.inner : tickDimension + labelPadding.inner, + offsetX: userOffsets.global.x, + offsetY: offsetY + userOffsets.global.y, + textOffsetX, + textOffsetY, + align, + verticalAlign, }; } @@ -464,6 +553,7 @@ export function enableDuplicatedTicks( const ticks = scale.ticks(); const allTicks: AxisTick[] = ticks.map((tick) => ({ value: tick, + // TODO handle empty string tick formatting label: axisSpec.tickFormat(tick, tickFormatOptions), position: (scale.scale(tick) ?? 0) + offset, })); @@ -514,14 +604,20 @@ export function getAxisPosition( chartDimensions: Dimensions, chartMargins: Margins, axisTitleHeight: number, + axisTitleStyle: AxisStyle['axisTitle'], axisSpec: AxisSpec, axisDim: AxisTicksDimensions, cumTopSum: number, cumBottomSum: number, cumLeftSum: number, cumRightSum: number, + tickDimension: number, + labelPaddingSum: number, + showLabels: boolean, ) { - const { position, tickSize, tickPadding } = axisSpec; + const titlePadding = getSimplePadding(axisTitleStyle.padding); + const titleDimension = axisTitleStyle.visible ? titlePadding.inner + axisTitleHeight + titlePadding.outer : 0; + const { position } = axisSpec; const { maxLabelBboxHeight, maxLabelBboxWidth } = axisDim; const { top, left, height, width } = chartDimensions; const dimensions = { @@ -536,9 +632,9 @@ export function getAxisPosition( let rightIncrement = 0; if (isVerticalAxis(position)) { - const dimWidth = maxLabelBboxWidth + tickSize + tickPadding + axisTitleHeight; + const dimWidth = labelPaddingSum + (showLabels ? maxLabelBboxWidth : 0) + tickDimension + titleDimension; if (position === Position.Left) { - leftIncrement = dimWidth + chartMargins.left; + leftIncrement = chartMargins.left + dimWidth; dimensions.left = cumLeftSum + chartMargins.left; } else { rightIncrement = dimWidth + chartMargins.right; @@ -546,7 +642,7 @@ export function getAxisPosition( } dimensions.width = dimWidth; } else { - const dimHeight = maxLabelBboxHeight + tickSize + tickPadding + axisTitleHeight; + const dimHeight = labelPaddingSum + (showLabels ? maxLabelBboxHeight : 0) + tickDimension + titleDimension; if (position === Position.Top) { topIncrement = dimHeight + chartMargins.top; dimensions.top = cumTopSum + chartMargins.top; @@ -560,16 +656,24 @@ export function getAxisPosition( return { dimensions, topIncrement, bottomIncrement, leftIncrement, rightIncrement }; } +export function shouldShowTicks( + { visible, strokeWidth, size }: AxisStyle['tickLine'], + axisHidden: boolean, +): boolean { + return !axisHidden && visible && size > 0 && strokeWidth >= MIN_STROKE_WIDTH; +} + /** @internal */ export function getAxisTicksPositions( computedChartDims: { chartDimensions: Dimensions; leftMargin: number; }, - chartTheme: Theme, + { chartPaddings, chartMargins, axes: sharedAxesStyle }: Theme, chartRotation: Rotation, axisSpecs: AxisSpec[], axisDimensions: Map, + axesStyles: Map, xDomain: XDomain, yDomain: YDomain[], totalGroupsCount: number, @@ -581,7 +685,6 @@ export function getAxisTicksPositions( axisVisibleTicks: Map; axisGridLinesPositions: Map; } { - const { chartPaddings, chartMargins } = chartTheme; const axisPositions: Map = new Map(); const axisVisibleTicks: Map = new Map(); const axisTicks: Map = new Map(); @@ -620,37 +723,53 @@ export function getAxisTicksPositions( const tickFormatOptions = { timeZone: xDomain.timeZone, }; - + const { + axisTitle, + tickLine, + tickLabel, + gridLine, + } = axesStyles.get(id) ?? sharedAxesStyle; const allTicks = getAvailableTicks(axisSpec, scale, totalGroupsCount, enableHistogramMode, tickFormatOptions); const visibleTicks = getVisibleTicks(allTicks, axisSpec, axisDim); + const isVertical = isVerticalAxis(axisSpec.position); + const axisSpecConfig = axisSpec.gridLine; + const gridLineThemeStyles = isVertical ? gridLine.vertical : gridLine.horizontal; + const gridLineStyles = axisSpecConfig ? mergePartial(gridLineThemeStyles, axisSpecConfig) : gridLineThemeStyles; - if (axisSpec.showGridLines) { - const isVertical = isVerticalAxis(axisSpec.position); + if (axisSpec.showGridLines ?? gridLineStyles.visible) { const gridLines = visibleTicks.map( (tick: AxisTick): AxisLinePosition => computeAxisGridLinePositions(isVertical, tick.position, chartDimensions), ); axisGridLinesPositions.set(id, gridLines); } - const { fontSize, padding } = chartTheme.axes.axisTitleStyle; + const labelPadding = getSimplePadding(tickLabel.padding); + const showTicks = shouldShowTicks(tickLine, axisSpec.hide); + const axisTitleHeight = axisSpec.title !== undefined ? axisTitle.fontSize : 0; + const tickDimension = showTicks ? tickLine.size + tickLine.padding : 0; + const labelPaddingSum = tickLabel.visible ? labelPadding.inner + labelPadding.outer : 0; - const axisTitleHeight = axisSpec.title !== undefined ? fontSize + padding : 0; const axisPosition = getAxisPosition( chartDimensions, chartMargins, axisTitleHeight, + axisTitle, axisSpec, axisDim, cumTopSum, cumBottomSum, cumLeftSum, cumRightSum, + labelPaddingSum, + tickDimension, + tickLabel.visible ); cumTopSum += axisPosition.topIncrement; cumBottomSum += axisPosition.bottomIncrement; cumLeftSum += axisPosition.leftIncrement; cumRightSum += axisPosition.rightIncrement; + axisPositions.set(id, axisPosition.dimensions); axisVisibleTicks.set(id, visibleTicks); axisTicks.set(id, allTicks); diff --git a/src/chart_types/xy_chart/utils/dimensions.test.ts b/src/chart_types/xy_chart/utils/dimensions.test.ts index 79ba2fe722..42ca8cdea5 100644 --- a/src/chart_types/xy_chart/utils/dimensions.test.ts +++ b/src/chart_types/xy_chart/utils/dimensions.test.ts @@ -65,8 +65,6 @@ describe('Computed chart dimensions', () => { showOverlappingTicks: false, showOverlappingLabels: false, position: Position.Left, - tickSize: 10, - tickPadding: 10, tickFormat: (value: any) => `${value}`, }; const legend: LegendStyle = { @@ -85,12 +83,13 @@ describe('Computed chart dimensions', () => { }, ...legend, }; - chartTheme.axes.axisTitleStyle.fontSize = 10; - chartTheme.axes.axisTitleStyle.padding = 10; + chartTheme.axes.axisTitle.fontSize = 10; + chartTheme.axes.axisTitle.padding = 10; test('should be equal to parent dimension with no axis minus margins', () => { const axisDims = new Map(); + const axisStyles = new Map(); const axisSpecs: AxisSpec[] = []; - const { chartDimensions } = computeChartDimensions(parentDim, chartTheme, axisDims, axisSpecs); + const { chartDimensions } = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs); expect(chartDimensions.left + chartDimensions.width).toBeLessThanOrEqual(parentDim.width); expect(chartDimensions.top + chartDimensions.height).toBeLessThanOrEqual(parentDim.height); expect(chartDimensions).toMatchSnapshot(); @@ -99,9 +98,10 @@ describe('Computed chart dimensions', () => { // |margin|titleFontSize|titlePadding|maxLabelBboxWidth|tickPadding|tickSize|padding| // \10|10|10|10|10|10|10| = 70px from left const axisDims = new Map(); + const axisStyles = new Map(); const axisSpecs = [axisLeftSpec]; axisDims.set('axis_1', axis1Dims); - const { chartDimensions } = computeChartDimensions(parentDim, chartTheme, axisDims, axisSpecs); + const { chartDimensions } = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs); expect(chartDimensions.left + chartDimensions.width).toBeLessThanOrEqual(parentDim.width); expect(chartDimensions.top + chartDimensions.height).toBeLessThanOrEqual(parentDim.height); expect(chartDimensions).toMatchSnapshot(); @@ -110,9 +110,10 @@ describe('Computed chart dimensions', () => { // |padding|tickSize|tickPadding|maxLabelBBoxWidth|titlePadding|titleFontSize\margin| // \10|10|10|10|10|10|10| = 70px from right const axisDims = new Map(); + const axisStyles = new Map(); const axisSpecs = [{ ...axisLeftSpec, position: Position.Right }]; axisDims.set('axis_1', axis1Dims); - const { chartDimensions } = computeChartDimensions(parentDim, chartTheme, axisDims, axisSpecs); + const { chartDimensions } = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs); expect(chartDimensions.left + chartDimensions.width).toBeLessThanOrEqual(parentDim.width); expect(chartDimensions.top + chartDimensions.height).toBeLessThanOrEqual(parentDim.height); expect(chartDimensions).toMatchSnapshot(); @@ -121,6 +122,7 @@ describe('Computed chart dimensions', () => { // |margin|titleFontSize|titlePadding|maxLabelBboxHeight|tickPadding|tickSize|padding| // \10|10|10|10|10|10|10| = 70px from top const axisDims = new Map(); + const axisStyles = new Map(); const axisSpecs = [ { ...axisLeftSpec, @@ -128,7 +130,7 @@ describe('Computed chart dimensions', () => { }, ]; axisDims.set('axis_1', axis1Dims); - const { chartDimensions } = computeChartDimensions(parentDim, chartTheme, axisDims, axisSpecs); + const { chartDimensions } = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs); expect(chartDimensions.left + chartDimensions.width).toBeLessThanOrEqual(parentDim.width); expect(chartDimensions.top + chartDimensions.height).toBeLessThanOrEqual(parentDim.height); expect(chartDimensions).toMatchSnapshot(); @@ -137,6 +139,7 @@ describe('Computed chart dimensions', () => { // |margin|titleFontSize|titlePadding|maxLabelBboxHeight|tickPadding|tickSize|padding| // \10|10|10|10|10|10|10| = 70px from bottom const axisDims = new Map(); + const axisStyles = new Map(); const axisSpecs = [ { ...axisLeftSpec, @@ -144,13 +147,14 @@ describe('Computed chart dimensions', () => { }, ]; axisDims.set('axis_1', axis1Dims); - const { chartDimensions } = computeChartDimensions(parentDim, chartTheme, axisDims, axisSpecs); + const { chartDimensions } = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs); expect(chartDimensions.left + chartDimensions.width).toBeLessThanOrEqual(parentDim.width); expect(chartDimensions.top + chartDimensions.height).toBeLessThanOrEqual(parentDim.height); expect(chartDimensions).toMatchSnapshot(); }); test('should not add space for axis when no spec for axis dimensions or axis is hidden', () => { const axisDims = new Map(); + const axisStyles = new Map(); const axisSpecs = [ { ...axisLeftSpec, @@ -158,7 +162,7 @@ describe('Computed chart dimensions', () => { }, ]; axisDims.set('foo', axis1Dims); - const chartDimensions = computeChartDimensions(parentDim, chartTheme, axisDims, axisSpecs); + const chartDimensions = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs); const expectedDims = { chartDimensions: { @@ -180,7 +184,7 @@ describe('Computed chart dimensions', () => { hide: true, position: Position.Bottom, }); - const hiddenAxisChartDimensions = computeChartDimensions(parentDim, chartTheme, axisDims, axisSpecs); + const hiddenAxisChartDimensions = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs); expect(hiddenAxisChartDimensions).toEqual(expectedDims); }); diff --git a/src/chart_types/xy_chart/utils/dimensions.ts b/src/chart_types/xy_chart/utils/dimensions.ts index 02c1da23f9..805e1278fe 100644 --- a/src/chart_types/xy_chart/utils/dimensions.ts +++ b/src/chart_types/xy_chart/utils/dimensions.ts @@ -18,11 +18,11 @@ */ import { Position } from '../../../utils/commons'; -import { Dimensions } from '../../../utils/dimensions'; +import { Dimensions, getSimplePadding } from '../../../utils/dimensions'; import { AxisId } from '../../../utils/ids'; -import { Theme } from '../../../utils/themes/theme'; +import { Theme, AxisStyle } from '../../../utils/themes/theme'; import { getSpecsById } from '../state/utils/spec'; -import { AxisTicksDimensions } from './axis_utils'; +import { AxisTicksDimensions, shouldShowTicks } from './axis_utils'; import { AxisSpec } from './specs'; /** @@ -36,8 +36,9 @@ import { AxisSpec } from './specs'; */ export function computeChartDimensions( parentDimensions: Dimensions, - chartTheme: Theme, + { chartMargins, chartPaddings, axes: sharedAxesStyles }: Theme, axisDimensions: Map, + axesStyles: Map, axisSpecs: AxisSpec[], ): { chartDimensions: Dimensions; @@ -54,10 +55,6 @@ export function computeChartDimensions( leftMargin: 0, }; } - const { chartMargins, chartPaddings } = chartTheme; - const { axisTitleStyle } = chartTheme.axes; - - const axisTitleHeight = axisTitleStyle.fontSize + axisTitleStyle.padding; let vLeftAxisSpecWidth = 0; let vRightAxisSpecWidth = 0; @@ -70,10 +67,18 @@ export function computeChartDimensions( if (!axisSpec || axisSpec.hide) { return; } - const { position, tickSize, tickPadding, title } = axisSpec; - const titleHeight = title !== undefined ? axisTitleHeight : 0; - const maxAxisHeight = maxLabelBboxHeight + tickSize + tickPadding + titleHeight; - const maxAxisWidth = maxLabelBboxWidth + tickSize + tickPadding + titleHeight; + const { tickLine, axisTitle, tickLabel } = axesStyles.get(id) ?? sharedAxesStyles; + const showTicks = shouldShowTicks(tickLine, axisSpec.hide); + const { position, title } = axisSpec; + const titlePadding = getSimplePadding(axisTitle.padding); + const labelPadding = getSimplePadding(tickLabel.padding); + const labelPaddingSum = tickLabel.visible ? labelPadding.inner + labelPadding.outer : 0; + + const tickDimension = showTicks ? tickLine.size + tickLine.padding : 0; + const titleHeight = title !== undefined && axisTitle.visible ? axisTitle.fontSize + titlePadding.outer + titlePadding.inner : 0; + const axisDimension = labelPaddingSum + tickDimension + titleHeight; + const maxAxisHeight = tickLabel.visible ? maxLabelBboxHeight + axisDimension : axisDimension; + const maxAxisWidth = tickLabel.visible ? maxLabelBboxWidth + axisDimension : axisDimension; switch (position) { case Position.Top: hTopAxisSpecHeight += maxAxisHeight + chartMargins.top; @@ -93,7 +98,6 @@ export function computeChartDimensions( default: vLeftAxisSpecWidth += maxAxisWidth + chartMargins.left; verticalEdgeLabelOverflow = Math.max(verticalEdgeLabelOverflow, maxLabelBboxHeight / 2); - break; } }); const chartLeftAxisMaxWidth = Math.max(vLeftAxisSpecWidth, horizontalEdgeLabelOverflow + chartMargins.left); diff --git a/src/chart_types/xy_chart/utils/specs.ts b/src/chart_types/xy_chart/utils/specs.ts index 02d2e749bf..84aafcc4b0 100644 --- a/src/chart_types/xy_chart/utils/specs.ts +++ b/src/chart_types/xy_chart/utils/specs.ts @@ -32,12 +32,13 @@ import { AxisId, GroupId } from '../../../utils/ids'; import { AreaSeriesStyle, BarSeriesStyle, - GridLineConfig, + GridLineStyle, LineAnnotationStyle, LineSeriesStyle, PointStyle, RectAnnotationStyle, BubbleSeriesStyle, + AxisStyle, } from '../../../utils/themes/theme'; import { PrimitiveValue } from '../../partition_chart/layout/utils/group_by_rollup'; import { AnnotationTooltipFormatter, CustomAnnotationTooltip } from '../annotations/types'; @@ -579,7 +580,7 @@ export interface AxisSpec extends Spec { /** The ID of the spec */ id: AxisId; /** Style options for grid line */ - gridLineStyle?: GridLineConfig; + gridLine?: Partial; /** * The ID of the axis group * @defaultValue {@link DEFAULT_GLOBAL_ID} @@ -594,14 +595,11 @@ export interface AxisSpec extends Spec { /** * Shows grid lines for axis * @defaultValue `false` + * @deprecated use `gridLine.visible` */ showGridLines?: boolean; /** Where the axis appear on the chart */ position: Position; - /** The length of the tick line */ - tickSize: number; - /** The padding between the label and the tick */ - tickPadding: number; /** * A function called to format every single tick label (includes tooltip) */ @@ -612,16 +610,14 @@ export interface AxisSpec extends Spec { * overrides tickFormat for axis labels */ labelFormat?: TickFormatter; - /** The degrees of rotation of the tick labels */ - tickLabelRotation?: number; /** An approximate count of how many ticks will be generated */ ticks?: number; /** The axis title */ title?: string; + /** Custom style overrides */ + style?: RecursivePartial>; /** If specified, it constrains the domain for these values */ domain?: YDomainRange; - /** Object to hold custom styling */ - style?: AxisStyle; /** Show only integar values * */ integersOnly?: boolean; /** @@ -639,11 +635,6 @@ export type TickFormatterOptions = { /** @public */ export type TickFormatter = (value: any, options?: TickFormatterOptions) => string; -export interface AxisStyle { - /** Specifies the amount of padding on the tick label bounding box */ - tickLabelPadding?: number; -} - export const AnnotationTypes = Object.freeze({ Line: 'line' as const, Rectangle: 'rectangle' as const, diff --git a/src/index.ts b/src/index.ts index 576d32b3b4..217bccaeef 100644 --- a/src/index.ts +++ b/src/index.ts @@ -27,8 +27,9 @@ export { SpecId, GroupId, AxisId, AnnotationId } from './utils/ids'; // Everything related to the specs types and react-components export * from './specs'; export { CurveType } from './utils/curves'; +export { SimplePadding } from './utils/dimensions'; export { timeFormatter, niceTimeFormatter, niceTimeFormatByDay } from './utils/data/formatters'; -export { Datum, Position, Rendering, Rotation } from './utils/commons'; +export { Datum, Position, Rendering, Rotation, VerticalAlignment, HorizontalAlignment } from './utils/commons'; export { SeriesIdentifier } from './commons/series_id'; export { XYChartSeriesIdentifier } from './chart_types/xy_chart/utils/series'; export { AnnotationTooltipFormatter, CustomAnnotationTooltip } from './chart_types/xy_chart/annotations/types'; diff --git a/src/mocks/specs/specs.ts b/src/mocks/specs/specs.ts index 3f63729612..69ce8abc66 100644 --- a/src/mocks/specs/specs.ts +++ b/src/mocks/specs/specs.ts @@ -273,10 +273,7 @@ export class MockGlobalSpec { showOverlappingTicks: false, showOverlappingLabels: false, position: Position.Left, - tickSize: 10, - tickPadding: 10, tickFormat: (tick: any) => `${tick}`, - tickLabelRotation: 0, }; private static readonly settingsBaseNoMargings: SettingsSpec = { diff --git a/src/specs/constants.ts b/src/specs/constants.ts index 17ed528b5f..42f9879295 100644 --- a/src/specs/constants.ts +++ b/src/specs/constants.ts @@ -104,7 +104,7 @@ export const DEFAULT_SETTINGS_SPEC: SettingsSpec = { legendPosition: Position.Right, showLegendExtra: false, hideDuplicateAxes: false, - theme: LIGHT_THEME, + baseTheme: LIGHT_THEME, brushAxis: BrushAxis.X, minBrushDelta: 2, }; diff --git a/src/specs/settings.test.tsx b/src/specs/settings.test.tsx index 6671d73928..37cefd7ed7 100644 --- a/src/specs/settings.test.tsx +++ b/src/specs/settings.test.tsx @@ -72,11 +72,11 @@ describe('Settings spec component', () => { test('should update store on component update', () => { const component = mount(); let settingSpec = getSettingsSpecSelector(chartStore.getState()); - expect(settingSpec.theme).toEqual(LIGHT_THEME); + expect(settingSpec.baseTheme).toEqual(LIGHT_THEME); expect(settingSpec.rotation).toBe(0); component.setProps({ settings: { - theme: DARK_THEME, + baseTheme: DARK_THEME, rotation: 90 as Rotation, rendering: 'svg' as Rendering, animateData: true, @@ -92,7 +92,7 @@ describe('Settings spec component', () => { }, }); settingSpec = getSettingsSpecSelector(chartStore.getState()); - expect(settingSpec.theme).toEqual(DARK_THEME); + expect(settingSpec.baseTheme).toEqual(DARK_THEME); expect(settingSpec.rotation).toBe(90); expect(settingSpec.rendering).toBe('svg'); expect(settingSpec.animateData).toBe(true); @@ -162,7 +162,7 @@ describe('Settings spec component', () => { test('should allow partial theme', () => { mount(); let settingSpec = getSettingsSpecSelector(chartStore.getState()); - expect(settingSpec.theme).toEqual(LIGHT_THEME); + expect(settingSpec.baseTheme).toEqual(LIGHT_THEME); const partialTheme: PartialTheme = { colors: { diff --git a/src/utils/commons.ts b/src/utils/commons.ts index 273b24e083..f0c9ee74f6 100644 --- a/src/utils/commons.ts +++ b/src/utils/commons.ts @@ -40,6 +40,64 @@ export const ColorVariant = Object.freeze({ }); export type ColorVariant = $Values; +export const HorizontalAlignment = Object.freeze({ + Center: 'center' as const, + Right: 'right' as const, + Left: 'left' as const, + /** + * Aligns to near side of axis depending on position + * + * Examples: + * - Left Axis, `Near` will push the label to the `Right`, _near_ the axis + * - Right Axis, `Near` will push the axis labels to the `Left` + * - Top/Bottom Axes, `Near` will default to `center` + */ + Near: 'near' as const, + /** + * Aligns to far side of axis depending on position + * + * Examples: + * - Left Axis, `Far` will push the label to the `Left`, _far_ from the axis + * - Right Axis, `Far` will push the axis labels to the `Right` + * - Top/Bottom Axes, `Far` will default to `center` + */ + Far: 'far' as const, +}); +/** + * Horizontal text alignment + * @public + */ +export type HorizontalAlignment = $Values; + +export const VerticalAlignment = Object.freeze({ + Middle: 'middle' as const, + Top: 'top' as const, + Bottom: 'bottom' as const, + /** + * Aligns to near side of axis depending on position + * + * Examples: + * - Top Axis, `Near` will push the label to the `Right`, _near_ the axis + * - Bottom Axis, `Near` will push the axis labels to the `Left` + * - Left/Right Axes, `Near` will default to `middle` + */ + Near: 'near' as const, + /** + * Aligns to far side of axis depending on position + * + * Examples: + * - Top Axis, `Far` will push the label to the `Top`, _far_ from the axis + * - Bottom Axis, `Far` will push the axis labels to the `Bottom` + * - Left/Right Axes, `Far` will default to `middle` + */ + Far: 'far' as const, +}); +/** + * Vertical text alignment + * @public + */ +export type VerticalAlignment = $Values; + /** @public */ export type Datum = any; // unknown; /** @public */ @@ -454,3 +512,28 @@ export const round = (value: number, fractionDigits = 0): number => { return scaledValue / precision; }; + +/** + * Get number/percentage value from string + * + * i.e. `'90%'` with relative value of `100` returns `90` + */ +export const getPercentageValue = ( + ratio: string | number, + relativeValue: number, + defaultValue: T, +): number | T => { + if (typeof ratio === 'number') { + return ratio; + } + + const ratioStr = ratio.trim(); + + if (/\d+%$/.test(ratioStr)) { + const percentage = Number.parseInt(ratioStr.slice(0, -1), 10); + return relativeValue * (percentage / 100); + } + const num = Number.parseFloat(ratioStr); + + return num && !isNaN(num) ? num : defaultValue; +}; diff --git a/src/utils/dimensions.ts b/src/utils/dimensions.ts index efbdbd028d..db43736ea3 100644 --- a/src/utils/dimensions.ts +++ b/src/utils/dimensions.ts @@ -37,3 +37,36 @@ export interface PerSideDistance { * see https://github.com/elastic/elastic-charts/pull/660#discussion_r419474171 */ export type Margins = PerSideDistance; + +export type Padding = PerSideDistance; + +/** + * Simple padding declaration + * @public + */ +export interface SimplePadding { + outer: number; + inner: number; +} + +/** + * Computes padding from number or `SimplePadding` with optional `minPadding` + * + * @param padding + * @param minPadding should be at least one to avoid browser measureText inconsistencies + */ +export function getSimplePadding(padding: number | Partial, minPadding = 0): SimplePadding { + if (typeof padding === 'number') { + const adjustedPadding = Math.max(minPadding, padding); + + return { + inner: adjustedPadding, + outer: adjustedPadding, + }; + } + + return { + inner: Math.max(minPadding, padding?.inner ?? 0), + outer: Math.max(minPadding, padding?.outer ?? 0), + }; +} diff --git a/src/utils/domain.ts b/src/utils/domain.ts index 38696f206b..9ebb2aa2b0 100644 --- a/src/utils/domain.ts +++ b/src/utils/domain.ts @@ -21,6 +21,7 @@ import { extent } from 'd3-array'; import { YDomainRange } from '../specs'; import { AccessorFn } from './accessor'; +import { getPercentageValue } from './commons'; export type Domain = any[]; @@ -51,17 +52,8 @@ function getPaddedRange(start: number, end: number, domainOptions?: YDomainRange let computedPadding = 0; if (typeof domainOptions.padding === 'string') { - const padding = domainOptions.padding.trim(); - - if (/\d+%$/.test(padding.trim())) { - const paddingPercent = Number.parseInt(padding.trim().slice(0, -1), 10); - const delta = Math.abs(end - start); - computedPadding = delta * (paddingPercent / 100); - } else { - const num = Number.parseFloat(padding); - - computedPadding = num && !isNaN(num) ? num : 0; - } + const delta = Math.abs(end - start); + computedPadding = getPercentageValue(domainOptions.padding, delta, 0); } else { computedPadding = domainOptions.padding; } diff --git a/src/utils/logger.ts b/src/utils/logger.ts index 5efd43532c..327f2d3655 100644 --- a/src/utils/logger.ts +++ b/src/utils/logger.ts @@ -35,7 +35,7 @@ export class Logger { * @param optionalParams */ static warn(message?: any, ...optionalParams: any[]) { - if (Logger.isDevelopment()) { + if (Logger.isDevelopment() && !Logger.isTest()) { console.warn(`${Logger.namespace} ${message}`, ...optionalParams); } } @@ -44,7 +44,7 @@ export class Logger { * Log expected value warning to console */ static expected(message: any, expected: any, received: any) { - if (Logger.isDevelopment()) { + if (Logger.isDevelopment() && !Logger.isTest()) { console.warn(`${Logger.namespace} ${message}`, `\n Expected: ${expected} Received: ${received} @@ -59,7 +59,7 @@ export class Logger { * @param optionalParams */ static error(message?: any, ...optionalParams: any[]) { - if (Logger.isDevelopment()) { + if (Logger.isDevelopment() && !Logger.isTest()) { console.warn(`${Logger.namespace} ${message}`, ...optionalParams); } } @@ -73,6 +73,16 @@ export class Logger { private static isDevelopment(): boolean { return process.env.NODE_ENV !== 'production'; } + + /** + * Determined development env + * + * @todo confirm this logic works + * @todo add more robust logic + */ + private static isTest(): boolean { + return process.env.NODE_ENV === 'test'; + } } /* eslint-enable */ diff --git a/src/utils/themes/dark_theme.ts b/src/utils/themes/dark_theme.ts index a5e6bfe689..3c59874e3c 100644 --- a/src/utils/themes/dark_theme.ts +++ b/src/utils/themes/dark_theme.ts @@ -102,39 +102,57 @@ export const DARK_THEME: Theme = { histogramPadding: 0.05, }, axes: { - axisTitleStyle: { + axisTitle: { fontSize: 12, fontStyle: 'bold', fontFamily: 'sans-serif', - padding: 8, + padding: { + inner: 8, + outer: 0, + }, fill: '#D4D4D4', + visible: true, }, - axisLineStyle: { + axisLine: { + visible: true, stroke: '#444', strokeWidth: 1, }, - tickLabelStyle: { + tickLabel: { + visible: true, fontSize: 10, fontFamily: 'sans-serif', fontStyle: 'normal', fill: '#999', - padding: 1, + padding: 0, + rotation: 0, + offset: { + x: 0, + y: 0, + reference: 'local', + }, + alignment: { + vertical: 'near', + horizontal: 'near', + }, }, - tickLineStyle: { + tickLine: { visible: true, stroke: '#444', strokeWidth: 1, + size: 10, + padding: 10, }, - gridLineStyle: { + gridLine: { horizontal: { - visible: true, + visible: false, stroke: '#D3DAE6', strokeWidth: 1, opacity: 1, dash: [0, 0], }, vertical: { - visible: true, + visible: false, stroke: '#D3DAE6', strokeWidth: 1, opacity: 1, diff --git a/src/utils/themes/light_theme.ts b/src/utils/themes/light_theme.ts index bf3905ee57..3ec21e6ccb 100644 --- a/src/utils/themes/light_theme.ts +++ b/src/utils/themes/light_theme.ts @@ -102,39 +102,57 @@ export const LIGHT_THEME: Theme = { histogramPadding: 0.05, }, axes: { - axisTitleStyle: { + axisTitle: { + visible: true, fontSize: 12, fontStyle: 'bold', fontFamily: 'sans-serif', - padding: 8, + padding: { + inner: 8, + outer: 0, + }, fill: '#333', }, - axisLineStyle: { + axisLine: { + visible: true, stroke: '#eaeaea', strokeWidth: 1, }, - tickLabelStyle: { + tickLabel: { + visible: true, fontSize: 10, fontFamily: 'sans-serif', fontStyle: 'normal', fill: '#777', - padding: 4, + padding: 0, + rotation: 0, + offset: { + x: 0, + y: 0, + reference: 'local', + }, + alignment: { + vertical: 'near', + horizontal: 'near', + }, }, - tickLineStyle: { + tickLine: { visible: true, stroke: '#eaeaea', strokeWidth: 1, + size: 10, + padding: 10, }, - gridLineStyle: { + gridLine: { horizontal: { - visible: true, + visible: false, stroke: '#D3DAE6', strokeWidth: 1, opacity: 1, dash: [0, 0], }, vertical: { - visible: true, + visible: false, stroke: '#D3DAE6', strokeWidth: 1, opacity: 1, diff --git a/src/utils/themes/theme.test.ts b/src/utils/themes/theme.test.ts index 206d5206f2..d2a8a7a30f 100644 --- a/src/utils/themes/theme.test.ts +++ b/src/utils/themes/theme.test.ts @@ -27,7 +27,6 @@ import { LineSeriesStyle, mergeWithDefaultAnnotationLine, mergeWithDefaultAnnotationRect, - mergeGridLineConfigs, mergeWithDefaultTheme, PartialTheme, Theme, @@ -48,24 +47,6 @@ describe('Theme', () => { expect(DARK_THEME).toEqual(CLONED_DARK_THEME); }); - describe('mergeGridLineConfigs', () => { - it('should merge partial grid line configs', () => { - const fullConfig = { - visible: true, - stroke: 'foo', - strokeWidth: 1, - opacity: 0, - dash: [0, 0], - }; - const partialConfig = { strokeWidth: 5 }; - const themeConfig = LIGHT_THEME.axes.gridLineStyle.vertical; - - expect(mergeGridLineConfigs(fullConfig, themeConfig)).toEqual(fullConfig); - expect(mergeGridLineConfigs({}, themeConfig)).toEqual(themeConfig); - expect(mergeGridLineConfigs(partialConfig, themeConfig)).toEqual({ ...themeConfig, ...partialConfig }); - }); - }); - describe('mergeWithDefaultAnnotationLine', () => { it('should merge custom and default annotation line configs', () => { expect(mergeWithDefaultAnnotationLine()).toEqual(DEFAULT_ANNOTATION_LINE_STYLE); @@ -311,10 +292,10 @@ describe('Theme', () => { it('should merge partial theme: axes', () => { const partialTheme: PartialTheme = { axes: { - axisTitleStyle: { + axisTitle: { fontStyle: 'elastic_charts', }, - axisLineStyle: { + axisLine: { stroke: 'elastic_charts', }, }, @@ -324,13 +305,13 @@ describe('Theme', () => { ...DARK_THEME, axes: { ...DARK_THEME.axes, - axisTitleStyle: { - ...DARK_THEME.axes.axisTitleStyle, - ...partialTheme.axes!.axisTitleStyle, + axisTitle: { + ...DARK_THEME.axes.axisTitle, + ...partialTheme.axes!.axisTitle, }, - axisLineStyle: { - ...DARK_THEME.axes.axisLineStyle, - ...partialTheme.axes!.axisLineStyle, + axisLine: { + ...DARK_THEME.axes.axisLine, + ...partialTheme.axes!.axisLine, }, }, }); diff --git a/src/utils/themes/theme.ts b/src/utils/themes/theme.ts index 48804e6629..6552735d12 100644 --- a/src/utils/themes/theme.ts +++ b/src/utils/themes/theme.ts @@ -17,8 +17,8 @@ * under the License. */ -import { mergePartial, RecursivePartial, Color, ColorVariant } from '../commons'; -import { Margins } from '../dimensions'; +import { mergePartial, RecursivePartial, Color, ColorVariant, HorizontalAlignment, VerticalAlignment } from '../commons'; +import { Margins, SimplePadding } from '../dimensions'; import { LIGHT_THEME } from './light_theme'; interface Visible { @@ -30,7 +30,38 @@ export interface TextStyle { fontFamily: string; fontStyle?: string; fill: Color; - padding: number; + padding: number | SimplePadding; +} + +/** + * Offset in pixels + * @public + */ +export interface TextOffset { + /** + * X offset of tick in px or string with % of height + */ + x: number | string; + /** + * X offset of tick in px or string with % of height + */ + y: number | string; + /** + * Offset coordinate system reference + * + * - `global` - aligns offset coordinate system to global (non-rotated) coordinate system + * - `local` - aligns offset coordinate system to local rotated coordinate system + */ + reference: 'global' | 'local'; +} + +/** + * Text alignment + * @public + */ +export interface TextAlignment { + horizontal: HorizontalAlignment; + vertical: VerticalAlignment; } /** Shared style properties for varies geometries */ @@ -71,7 +102,16 @@ export interface StrokeStyle { } /** @public */ -export type TickStyle = StrokeStyle & Visible; +export type TickStyle = StrokeStyle & Visible & { + /** + * Amount of padding between tick line and labels + */ + padding: number; + /** + * length of tick line + */ + size: number; +}; /** * The dash array for a stroke @@ -90,22 +130,36 @@ export interface Opacity { opacity: number; } -export interface AxisConfig { - axisTitleStyle: TextStyle; - axisLineStyle: StrokeStyle; - tickLabelStyle: TextStyle; - tickLineStyle: TickStyle; - gridLineStyle: { - horizontal: GridLineConfig; - vertical: GridLineConfig; +export interface AxisStyle { + axisTitle: TextStyle & Visible; + axisLine: StrokeStyle & Visible; + tickLabel: TextStyle & Visible & { + /** The degrees of rotation of the tick labels */ + rotation: number; + /** + * Offset in pixels to render text relative to anchor + * + * **Note:** rotation aligns to global cartesian coordinates + */ + offset: TextOffset; + alignment: TextAlignment + }; + tickLine: TickStyle; + gridLine: { + horizontal: GridLineStyle; + vertical: GridLineStyle; }; } -export interface GridLineConfig { - visible?: boolean; - stroke?: Color; - strokeWidth?: number; - opacity?: number; - dash?: number[]; + +/** + * @public + */ +export interface GridLineStyle { + visible: boolean; + stroke: Color; + strokeWidth: number; + opacity: number; + dash: number[]; } export interface ScalesConfig { /** @@ -205,7 +259,7 @@ export interface Theme { bubbleSeriesStyle: BubbleSeriesStyle; arcSeriesStyle: ArcSeriesStyle; sharedStyle: SharedGeometryStateStyle; - axes: AxisConfig; + axes: AxisStyle; scales: ScalesConfig; colors: ColorConfig; legend: LegendStyle; @@ -379,20 +433,6 @@ export const DEFAULT_ANNOTATION_RECT_STYLE: RectAnnotationStyle = { fill: '#FFEEBC', }; -export function mergeGridLineConfigs(axisSpecConfig: GridLineConfig, themeConfig: GridLineConfig): GridLineConfig { - const visible = axisSpecConfig.visible != null ? axisSpecConfig.visible : themeConfig.visible; - const strokeWidth = axisSpecConfig.strokeWidth != null ? axisSpecConfig.strokeWidth : themeConfig.strokeWidth; - const opacity = axisSpecConfig.opacity != null ? axisSpecConfig.opacity : themeConfig.opacity; - - return { - visible, - stroke: axisSpecConfig.stroke || themeConfig.stroke, - dash: axisSpecConfig.dash || themeConfig.dash, - strokeWidth, - opacity, - }; -} - export function mergeWithDefaultAnnotationLine(config?: Partial): LineAnnotationStyle { const defaultLine = DEFAULT_ANNOTATION_LINE_STYLE.line; const defaultDetails = DEFAULT_ANNOTATION_LINE_STYLE.details; diff --git a/stories/axes/1_basic.tsx b/stories/axes/1_basic.tsx index 42ead10316..99a9f6b9d3 100644 --- a/stories/axes/1_basic.tsx +++ b/stories/axes/1_basic.tsx @@ -20,17 +20,19 @@ import { boolean, number } from '@storybook/addon-knobs'; import React from 'react'; -import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, niceTimeFormatter } from '../../src'; +import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, niceTimeFormatter, RecursivePartial, AxisStyle } from '../../src'; import { KIBANA_METRICS } from '../../src/utils/data_samples/test_dataset_kibana'; export const Example = () => { - const customStyle = { - tickLabelPadding: number('Tick Label Padding', 0, { - range: true, - min: 2, - max: 30, - step: 1, - }), + const customStyle: RecursivePartial = { + tickLabel: { + padding: number('Tick Label Padding', 0, { + range: true, + min: 2, + max: 30, + step: 1, + }), + }, }; const data = KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 60); return ( diff --git a/stories/axes/2_tick_label_rotation.tsx b/stories/axes/2_tick_label_rotation.tsx index 3067454f15..f7da8104bf 100644 --- a/stories/axes/2_tick_label_rotation.tsx +++ b/stories/axes/2_tick_label_rotation.tsx @@ -17,73 +17,147 @@ * under the License. */ -import { boolean, number } from '@storybook/addon-knobs'; +import { boolean, number, select } from '@storybook/addon-knobs'; import React from 'react'; -import { AreaSeries, Axis, Chart, Position, ScaleType, Settings } from '../../src'; +import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, AxisStyle, RecursivePartial, DEFAULT_CHART_MARGINS, DEFAULT_CHART_PADDING } from '../../src'; +import { getVerticalTextAlignmentKnob, getHorizontalTextAlignmentKnob, getPositiveNumberKnob } from '../utils/knobs'; + +const getAxisKnobs = (group?: string, gridLines = false): RecursivePartial => ({ + axisTitle: { + visible: !boolean('Hide axis title', false, group), + padding: { + outer: getPositiveNumberKnob('Axis title padding - outer', 6, group), + inner: getPositiveNumberKnob('Axis title padding - inner', 6, group), + }, + }, + axisLine: { + visible: !boolean('Hide axis line', false, group), + }, + tickLine: { + visible: !boolean('Hide tick lines', false, group), + padding: getPositiveNumberKnob('Tick line padding', 10, group), + size: getPositiveNumberKnob('Tick line size', 10, group), + }, + tickLabel: { + visible: !boolean('Hide tick labels', false, group), + rotation: number('Tick label rotation', 0, { + range: true, + min: -90, + max: 90, + step: 1, + }, group), + padding: { + outer: getPositiveNumberKnob('Tick label padding - outer', 0, group), + inner: getPositiveNumberKnob('Tick label padding - inner', 0, group), + }, + offset: { + y: number('Tick label y offset', 0, { + range: true, + min: -10, + max: 10, + step: 1, + }, group), + x: number('Tick label x offset', 0, { + range: true, + min: -10, + max: 10, + step: 1, + }, group), + reference: select('Tick label offset reference', { + Global: 'global', + Local: 'local', + }, 'local', group), + }, + alignment: { + vertical: getVerticalTextAlignmentKnob(group), + horizontal: getHorizontalTextAlignmentKnob(group), + }, + }, + ...(gridLines && { + gridLine: { + horizontal: { + visible: boolean('show horizontal gridLines', false, group), + }, + vertical: { + visible: boolean('show vertical gridLines', false, group), + }, + }, + }), +}); export const Example = () => { - const customStyle = { - tickLabelPadding: number('Tick Label Padding', 0), + const debug = boolean('debug', false, 'general'); + const onlyGlobal = !boolean('disable axis overrides', false, 'general'); + const chartMargins = { + left: getPositiveNumberKnob('margin left', DEFAULT_CHART_MARGINS.left, 'general'), + right: getPositiveNumberKnob('margin right', DEFAULT_CHART_MARGINS.right, 'general'), + top: getPositiveNumberKnob('margin top', DEFAULT_CHART_MARGINS.top, 'general'), + bottom: getPositiveNumberKnob('margin bottom', DEFAULT_CHART_MARGINS.bottom, 'general'), + }; + const chartPaddings = { + left: getPositiveNumberKnob('padding left', DEFAULT_CHART_PADDING.left, 'general'), + right: getPositiveNumberKnob('padding right', DEFAULT_CHART_PADDING.right, 'general'), + top: getPositiveNumberKnob('padding top', DEFAULT_CHART_PADDING.top, 'general'), + bottom: getPositiveNumberKnob('padding bottom', DEFAULT_CHART_PADDING.bottom, 'general'), + }; + const bottomAxisStyles = getAxisKnobs(Position.Bottom); + const leftAxisStyles = getAxisKnobs(Position.Left); + const topAxisStyles = getAxisKnobs(Position.Top); + const rightAxisStyles = getAxisKnobs(Position.Right); + const theme = { + axes: getAxisKnobs('shared', true), + chartMargins, + chartPaddings, }; return ( + Number(d).toFixed(2)} - style={customStyle} - hide={boolean('hide left axis', false)} /> Number(d).toFixed(2)} - style={customStyle} - hide={boolean('hide top axis', false)} /> Number(d).toFixed(2)} - style={customStyle} - hide={boolean('hide right axis', false)} + domain={{ min: 0, max: 10 }} /> { { x: 3, y: 6 }, ]} /> - ); }; diff --git a/stories/axes/7_many_tick_labels.tsx b/stories/axes/7_many_tick_labels.tsx index c746413684..e2ea7353de 100644 --- a/stories/axes/7_many_tick_labels.tsx +++ b/stories/axes/7_many_tick_labels.tsx @@ -20,15 +20,17 @@ import { number } from '@storybook/addon-knobs'; import React from 'react'; -import { AreaSeries, Axis, Chart, Position, ScaleType, Settings } from '../../src'; +import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, RecursivePartial, AxisStyle } from '../../src'; import { SeededDataGenerator } from '../../src/mocks/utils'; export const Example = () => { const dg = new SeededDataGenerator(); const data = dg.generateSimpleSeries(31); - const customStyle = { - tickLabelPadding: number('Tick Label Padding', 0), + const customStyle: RecursivePartial = { + tickLabel: { + padding: number('Tick Label Padding', 0), + }, }; return ( diff --git a/stories/grids/1_basic.tsx b/stories/grids/1_basic.tsx index a2090de760..9e8268ef01 100644 --- a/stories/grids/1_basic.tsx +++ b/stories/grids/1_basic.tsx @@ -20,12 +20,13 @@ import { boolean, color, number } from '@storybook/addon-knobs'; import React from 'react'; -import { Axis, BarSeries, Chart, GridLineConfig, LineSeries, Position, ScaleType, Settings } from '../../src'; +import { Axis, BarSeries, Chart, GridLineStyle, LineSeries, Position, ScaleType, Settings } from '../../src'; -function generateGridLineConfig(group: string, gridColor = 'purple'): GridLineConfig { +function generateGridLineStyle(group: string, gridColor = 'purple'): GridLineStyle { const groupId = `${group} axis`; return { + visible: true, stroke: color(`${groupId} grid line stroke color`, gridColor, groupId), strokeWidth: number( `${groupId} grid line stroke width`, @@ -77,17 +78,17 @@ function generateGridLineConfig(group: string, gridColor = 'purple'): GridLineCo } export const Example = () => { - const leftAxisGridLineConfig = generateGridLineConfig(Position.Left, 'lightblue'); - const rightAxisGridLineConfig = generateGridLineConfig(Position.Right, 'red'); - const topAxisGridLineConfig = generateGridLineConfig(Position.Top, 'teal'); - const bottomAxisGridLineConfig = generateGridLineConfig(Position.Bottom, 'blue'); - const toggleBottomAxisGridLineStyle = boolean('use axis gridLineStyle vertically', false, 'bottom axis'); - const toggleHorizontalAxisGridLineStyle = boolean('use axis gridLineStyle horizontally', false, 'left axis'); - const bottomAxisThemeGridLineConfig = generateGridLineConfig('Vertical Axis Theme', 'violet'); - const leftAxisThemeGridLineConfig = generateGridLineConfig('Horizontal Axis Theme', 'hotpink'); + const leftAxisGridLineStyle = generateGridLineStyle(Position.Left, 'lightblue'); + const rightAxisGridLineStyle = generateGridLineStyle(Position.Right, 'red'); + const topAxisGridLineStyle = generateGridLineStyle(Position.Top, 'teal'); + const bottomAxisGridLineStyle = generateGridLineStyle(Position.Bottom, 'blue'); + const toggleBottomAxisGridLineStyle = boolean('use axis gridLine vertically', false, 'bottom axis'); + const toggleHorizontalAxisGridLineStyle = boolean('use axis gridLine horizontally', false, 'left axis'); + const bottomAxisThemeGridLineStyle = generateGridLineStyle('Vertical Axis Theme', 'violet'); + const leftAxisThemeGridLineStyle = generateGridLineStyle('Horizontal Axis Theme', 'hotpink'); const theme = { axes: { - gridLineStyle: { vertical: leftAxisThemeGridLineConfig, horizontal: bottomAxisThemeGridLineConfig }, + gridLine: { vertical: leftAxisThemeGridLineStyle, horizontal: bottomAxisThemeGridLineStyle }, }, }; const integersOnlyLeft = boolean('left axis show only integer values', false, 'left axis'); @@ -101,7 +102,7 @@ export const Example = () => { title="Bottom axis" showOverlappingTicks showGridLines={boolean('show bottom axis grid lines', false, 'bottom axis')} - gridLineStyle={toggleBottomAxisGridLineStyle ? bottomAxisGridLineConfig : undefined} + gridLine={toggleBottomAxisGridLineStyle ? bottomAxisGridLineStyle : undefined} integersOnly={boolean('bottom axis show only integer values', false, 'bottom axis')} /> { title="Left axis 1" tickFormat={integersOnlyLeft ? (d) => Number(d).toFixed(0) : (d) => Number(d).toFixed(2)} showGridLines={boolean('show left axis grid lines', false, 'left axis')} - gridLineStyle={toggleHorizontalAxisGridLineStyle ? leftAxisGridLineConfig : undefined} + gridLine={toggleHorizontalAxisGridLineStyle ? leftAxisGridLineStyle : undefined} integersOnly={integersOnlyLeft} /> { title="Top axis" showOverlappingTicks showGridLines={boolean('show top axis grid lines', false, 'top axis')} - gridLineStyle={topAxisGridLineConfig} + gridLine={topAxisGridLineStyle} integersOnly={boolean('top axis show only integer values', false, 'top axis')} /> { position={Position.Right} tickFormat={integersOnlyRight ? (d) => Number(d).toFixed(0) : (d) => Number(d).toFixed(2)} showGridLines={boolean('show right axis grid lines', false, 'right axis')} - gridLineStyle={rightAxisGridLineConfig} + gridLine={rightAxisGridLineStyle} integersOnly={integersOnlyRight} /> { - const leftAxisGridLineConfig = generateGridLineConfig(Position.Left); - const leftAxisGridLineConfig2 = generateGridLineConfig(`${Position.Left}2`); + const leftAxisGridLineStyle = generateGridLineStyle(Position.Left); + const leftAxisGridLineStyle2 = generateGridLineStyle(`${Position.Left}2`); return ( @@ -89,7 +90,7 @@ export const Example = () => { position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} showGridLines={boolean('show left axis grid lines', false, 'left axis')} - gridLineStyle={leftAxisGridLineConfig} + gridLine={leftAxisGridLineStyle} /> { position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} showGridLines={boolean('show left axis 2 grid lines', false, 'left2 axis')} - gridLineStyle={leftAxisGridLineConfig2} + gridLine={leftAxisGridLineStyle2} /> ( - + Number(d).toFixed(2)} /> diff --git a/stories/stylings/15_tick_label.tsx b/stories/stylings/15_tick_label.tsx index 924904edd5..2db16264ef 100644 --- a/stories/stylings/15_tick_label.tsx +++ b/stories/stylings/15_tick_label.tsx @@ -20,7 +20,17 @@ import { boolean, color, number } from '@storybook/addon-knobs'; import React from 'react'; -import { AreaSeries, Axis, Chart, PartialTheme, Position, ScaleType, Settings } from '../../src'; +import { + AreaSeries, + Axis, + Chart, + PartialTheme, + Position, + ScaleType, + Settings, + RecursivePartial, + AxisStyle, +} from '../../src'; function range(title: string, min: number, max: number, value: number, groupId?: string, step = 1) { return number( @@ -39,7 +49,7 @@ function range(title: string, min: number, max: number, value: number, groupId?: export const Example = () => { const theme: PartialTheme = { axes: { - tickLabelStyle: { + tickLabel: { fill: color('tickFill', '#333', 'Tick Label'), fontSize: range('tickFontSize', 0, 40, 10, 'Tick Label'), fontFamily: '\'Open Sans\', Helvetica, Arial, sans-serif', @@ -48,9 +58,13 @@ export const Example = () => { }, }, }; - const customStyle = { - tickLabelPadding: number('Tick Label Padding Axis Spec', 0), + + const customStyle: RecursivePartial = { + tickLabel: { + padding: number('Tick Label Padding Axis Spec', 0), + }, }; + return ( diff --git a/stories/stylings/3_axis.tsx b/stories/stylings/3_axis.tsx index e9678fdfb9..d4ad13d890 100644 --- a/stories/stylings/3_axis.tsx +++ b/stories/stylings/3_axis.tsx @@ -39,25 +39,25 @@ function range(title: string, min: number, max: number, value: number, groupId?: export const Example = () => { const theme: PartialTheme = { axes: { - axisTitleStyle: { + axisTitle: { fill: color('titleFill', '#333', 'Axis Title'), fontSize: range('titleFontSize', 0, 40, 12, 'Axis Title'), fontStyle: 'bold', fontFamily: '\'Open Sans\', Helvetica, Arial, sans-serif', padding: range('titlePadding', 0, 40, 5, 'Axis Title'), }, - axisLineStyle: { + axisLine: { stroke: color('axisLinecolor', '#333', 'Axis Line'), strokeWidth: range('axisLineWidth', 0, 5, 1, 'Axis Line'), }, - tickLabelStyle: { + tickLabel: { fill: color('tickFill', '#333', 'Tick Label'), fontSize: range('tickFontSize', 0, 40, 10, 'Tick Label'), fontFamily: '\'Open Sans\', Helvetica, Arial, sans-serif', fontStyle: 'normal', padding: number('tickLabelPadding', 1, {}, 'Tick Label'), }, - tickLineStyle: { + tickLine: { visible: boolean('showTicks', true, 'Tick Line'), stroke: color('tickLineColor', '#333', 'Tick Line'), strokeWidth: range('tickLineWidth', 0, 5, 1, 'Tick Line'), diff --git a/stories/utils/knobs.ts b/stories/utils/knobs.ts index ce80a2c3cc..fa460b13bf 100644 --- a/stories/utils/knobs.ts +++ b/stories/utils/knobs.ts @@ -17,10 +17,17 @@ * under the License. */ -import { select, array, optionsKnob } from '@storybook/addon-knobs'; +import { select, array, number, optionsKnob } from '@storybook/addon-knobs'; import { Rotation, Position, Placement, TooltipProps } from '../../src'; import { TooltipType } from '../../src/specs/constants'; +import { VerticalAlignment, HorizontalAlignment } from '../../src/utils/commons'; + +export const getPositiveNumberKnob = ( + name: string, + value: number, + groupId?: string, +) => number(name, value, { min: 0 }, groupId); export const numberSelect = ( name: string, @@ -146,3 +153,33 @@ export const getBoundaryKnob = () => select( }, undefined, ); + +export const getVerticalTextAlignmentKnob = (group?: string) => + select( + 'Vertical Text alignment', + { + None: undefined, + Middle: VerticalAlignment.Middle, + Top: VerticalAlignment.Top, + Bottom: VerticalAlignment.Bottom, + Near: VerticalAlignment.Near, + Far: VerticalAlignment.Far, + }, + undefined, + group, + ) || undefined; + +export const getHorizontalTextAlignmentKnob = (group?: string) => + select( + 'Horizontal Text alignment', + { + None: undefined, + Center: HorizontalAlignment.Center, + Left: HorizontalAlignment.Left, + Right: HorizontalAlignment.Right, + Near: HorizontalAlignment.Near, + Far: HorizontalAlignment.Far, + }, + undefined, + group, + ) || undefined;