diff --git a/playground/entries/Chart/Cigarette.tsx b/playground/entries/Chart/Cigarette.tsx index 5630f01e82..292132dcfc 100644 --- a/playground/entries/Chart/Cigarette.tsx +++ b/playground/entries/Chart/Cigarette.tsx @@ -1,3 +1,4 @@ +import { Box } from '@semcore/ui/base-components'; import type { CigaretteChartProps } from '@semcore/ui/d3-chart'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; diff --git a/semcore/base-components/__tests__/flex-box.test.jsx b/semcore/base-components/__tests__/flex-box.test.jsx index 5edf876943..7a15e5cd44 100644 --- a/semcore/base-components/__tests__/flex-box.test.jsx +++ b/semcore/base-components/__tests__/flex-box.test.jsx @@ -141,6 +141,8 @@ describe('Box', () => { right: { css: 'right', values: ['2px'], tests: [2, '2px'] }, bottom: { css: 'bottom', values: ['2px'], tests: [2, '2px'] }, zIndex: { css: 'z-index', values: ['5'], tests: [5] }, + resize: { css: 'resize', values: ['both'], tests: ['both'] }, + overflow: { css: 'overflow', values: ['hidden'], tests: ['hidden'] }, }; const components = Object.keys(MAP_CSS).map((prop, id) => { const { tests } = MAP_CSS[prop]; diff --git a/semcore/base-components/src/components/flex-box/Box/useBox.tsx b/semcore/base-components/src/components/flex-box/Box/useBox.tsx index d11f25e909..cb720ab544 100644 --- a/semcore/base-components/src/components/flex-box/Box/useBox.tsx +++ b/semcore/base-components/src/components/flex-box/Box/useBox.tsx @@ -167,19 +167,16 @@ export type BoxProps = IStyledProps & { children?: React.ReactNode; /** Hover cursor */ hoverCursor?: Property.Cursor; - /** - * Background - */ + /** Css `background` property */ bg?: Property.Background | BasicColorKeys | SemanticColorKeys; - /** - * Border radius - */ + /** Css `border-radius` property */ borderRadius?: Property.BorderRadius | BorderRadius; - /** - * Border - */ + /** Css `border` property */ border?: Property.Border; - + /** Css `resize` property */ + resize?: Property.Resize; + /** Css `overflow` property */ + overflow?: Property.Overflow; /** * Old way to add custom style * @deprecated @@ -254,6 +251,8 @@ function calculateIndentStyles(props: BoxProps, scaleIndent: number, colorResolv getAutoOrScaleIndent(props['px'], scaleIndent), border: props.border, + resize: props.resize, + overflow: props.overflow, borderRadius: props.borderRadius ? colorResolver(props.borderRadius) : undefined, backgroundColor: props.bg ? colorResolver(props.bg) : undefined, }); @@ -277,7 +276,9 @@ export default function useBox( bg, border, borderRadius, + resize, flex, + overflow, w, h, wMin, @@ -351,6 +352,8 @@ export default function useBox( border, borderRadius, bg, + resize, + overflow, ]); const styles = sstyled(style); diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Inverted-axis-inversion-no-tooltip-1-chromium-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Inverted-axis-inversion-no-tooltip-1-chromium-linux.png index 5fe0d39c34..d2ffba707b 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Inverted-axis-inversion-no-tooltip-1-chromium-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Inverted-axis-inversion-no-tooltip-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Inverted-axis-inversion-no-tooltip-1-firefox-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Inverted-axis-inversion-no-tooltip-1-firefox-linux.png index 1129c00827..edc505a211 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Inverted-axis-inversion-no-tooltip-1-firefox-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Inverted-axis-inversion-no-tooltip-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Inverted-axis-inversion-no-tooltip-1-webkit-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Inverted-axis-inversion-no-tooltip-1-webkit-linux.png index 77330683be..e12f749c0b 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Inverted-axis-inversion-no-tooltip-1-webkit-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Inverted-axis-inversion-no-tooltip-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Stacked-patterns-enabled-minimal-UI-1-chromium-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Stacked-patterns-enabled-minimal-UI-1-chromium-linux.png index 26a1fbad20..0cabfac56b 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Stacked-patterns-enabled-minimal-UI-1-chromium-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Stacked-patterns-enabled-minimal-UI-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Stacked-patterns-enabled-minimal-UI-1-firefox-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Stacked-patterns-enabled-minimal-UI-1-firefox-linux.png index 9872574bb0..f2f31bf2ee 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Stacked-patterns-enabled-minimal-UI-1-firefox-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Stacked-patterns-enabled-minimal-UI-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Stacked-patterns-enabled-minimal-UI-1-webkit-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Stacked-patterns-enabled-minimal-UI-1-webkit-linux.png index 1336a2480a..44856b5a8b 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Stacked-patterns-enabled-minimal-UI-1-webkit-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Stacked-patterns-enabled-minimal-UI-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Standard-all-features-medium-size-1-chromium-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Standard-all-features-medium-size-1-chromium-linux.png index 38f5a9fc38..dac099c5ce 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Standard-all-features-medium-size-1-chromium-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Standard-all-features-medium-size-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Standard-all-features-medium-size-1-firefox-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Standard-all-features-medium-size-1-firefox-linux.png index b4593c82cc..78c5a53d89 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Standard-all-features-medium-size-1-firefox-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Standard-all-features-medium-size-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Standard-all-features-medium-size-1-webkit-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Standard-all-features-medium-size-1-webkit-linux.png index eec1095d90..2572664d0b 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Standard-all-features-medium-size-1-webkit-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-Standard-all-features-medium-size-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-null-undefined-and-negative-values-1-chromium-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-null-undefined-and-negative-values-1-chromium-linux.png index e509e666b3..36a415fcf1 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-null-undefined-and-negative-values-1-chromium-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-null-undefined-and-negative-values-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-null-undefined-and-negative-values-1-firefox-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-null-undefined-and-negative-values-1-firefox-linux.png index 3706f5eb1e..42f28f9c1a 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-null-undefined-and-negative-values-1-firefox-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-null-undefined-and-negative-values-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-null-undefined-and-negative-values-1-webkit-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-null-undefined-and-negative-values-1-webkit-linux.png index 8401a1d357..4e4af941ee 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-null-undefined-and-negative-values-1-webkit-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-null-undefined-and-negative-values-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-single-data-point-1-chromium-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-single-data-point-1-chromium-linux.png index 4b4fe1ee1b..fe6d2add8e 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-single-data-point-1-chromium-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-single-data-point-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-single-data-point-1-firefox-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-single-data-point-1-firefox-linux.png index 90df374be3..00d6ff0f6f 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-single-data-point-1-firefox-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-single-data-point-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-single-data-point-1-webkit-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-single-data-point-1-webkit-linux.png index ab363cadf2..125b059bd2 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-single-data-point-1-webkit-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-with-single-data-point-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/axe-tests/d3-chart.axe-test.tsx b/semcore/d3-chart/__tests__/axe-tests/d3-chart.axe-test.tsx index 5349a77e5b..54e2af14c3 100644 --- a/semcore/d3-chart/__tests__/axe-tests/d3-chart.axe-test.tsx +++ b/semcore/d3-chart/__tests__/axe-tests/d3-chart.axe-test.tsx @@ -9,8 +9,8 @@ test.describe(`@d3-chart ${TAG.ACCESSIBILITY}`, () => { expect(violations).toEqual([]); }); - test('adaptive-chart', async ({ page }) => { - await loadPage(page, 'stories/components/d3-chart/docs/examples/d3-chart/adaptive-chart.tsx', 'en'); + test('responsive-low-level-chart', async ({ page }) => { + await loadPage(page, 'stories/components/d3-chart/docs/examples/d3-chart/responsive-low-level-chart.tsx', 'en'); const violations = await getAccessibilityViolations({ page }); expect(violations).toEqual([]); }); diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Inverted-horizontal-layout-no-legend-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Inverted-horizontal-layout-no-legend-1-chromium-linux.png index 58a88d05e9..e2b6a82e9a 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Inverted-horizontal-layout-no-legend-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Inverted-horizontal-layout-no-legend-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Inverted-horizontal-layout-no-legend-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Inverted-horizontal-layout-no-legend-1-firefox-linux.png index ffd91b119c..9f0daeb133 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Inverted-horizontal-layout-no-legend-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Inverted-horizontal-layout-no-legend-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Inverted-horizontal-layout-no-legend-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Inverted-horizontal-layout-no-legend-1-webkit-linux.png index 532cbe6eff..960af540b5 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Inverted-horizontal-layout-no-legend-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Inverted-horizontal-layout-no-legend-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Patterns-minimal-axes-and-UI-multiline-ticks-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Patterns-minimal-axes-and-UI-multiline-ticks-1-chromium-linux.png index 83c71ce9f1..78e774fcbe 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Patterns-minimal-axes-and-UI-multiline-ticks-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Patterns-minimal-axes-and-UI-multiline-ticks-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Patterns-minimal-axes-and-UI-multiline-ticks-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Patterns-minimal-axes-and-UI-multiline-ticks-1-firefox-linux.png index 0200c45e66..6f169f5b5e 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Patterns-minimal-axes-and-UI-multiline-ticks-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Patterns-minimal-axes-and-UI-multiline-ticks-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Patterns-minimal-axes-and-UI-multiline-ticks-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Patterns-minimal-axes-and-UI-multiline-ticks-1-webkit-linux.png index dec543e2a0..01a1eae87a 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Patterns-minimal-axes-and-UI-multiline-ticks-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Patterns-minimal-axes-and-UI-multiline-ticks-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Standard-all-features-enabled-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Standard-all-features-enabled-1-chromium-linux.png index cd99c56082..8fae086f58 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Standard-all-features-enabled-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Standard-all-features-enabled-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Standard-all-features-enabled-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Standard-all-features-enabled-1-firefox-linux.png index 0a996f887a..2b11045678 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Standard-all-features-enabled-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Standard-all-features-enabled-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Standard-all-features-enabled-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Standard-all-features-enabled-1-webkit-linux.png index 865b3e696d..8412b21d80 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Standard-all-features-enabled-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Standard-all-features-enabled-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-chromium-linux.png index 11bede8fe7..5f67c70792 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-firefox-linux.png index addeb0eea7..62133fab0a 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-webkit-linux.png index 871aabbaef..cdffc55505 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-2-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-2-chromium-linux.png index e9893c1d17..9e106a2737 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-2-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-2-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-2-firefox-linux.png index d6a804cde9..1bedac84b7 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-2-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-2-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-2-webkit-linux.png index 5eaf2bd6dc..0fa0922a5a 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-2-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-1-chromium-linux.png index 07d8ccea75..838fe0efe5 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-1-firefox-linux.png index 8b529a5bc9..51f1a4ae42 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-1-webkit-linux.png index 96126a909f..a3b9241c0a 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-2-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-2-chromium-linux.png index be1dd15560..9f3a0cd9a3 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-2-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-2-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-2-firefox-linux.png index cceb0e3a6d..8889fb392e 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-2-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-2-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-2-webkit-linux.png index 64ad041266..adc655fa3f 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-2-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-chromium-linux.png index 69fa4509f5..9482b29a22 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-firefox-linux.png index 757a5f6afa..4ac7b92c70 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-webkit-linux.png index ce176eddef..a703b3198e 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-chromium-linux.png index 4880438e3b..5ed4c62bea 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-firefox-linux.png index a049fbaf73..c1f96e9d72 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-webkit-linux.png index 3d2b968c2f..5ce847351a 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-chromium-linux.png index b71875ac4c..e501ea97fb 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-firefox-linux.png index 6c9bb92539..ca7d619e02 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-webkit-linux.png index fc4e302b46..83395d938c 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-2-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-2-chromium-linux.png index e522449646..96a2eb516c 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-2-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-2-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-2-firefox-linux.png index 8d3c18e380..399d93a626 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-2-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-2-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-2-webkit-linux.png index c439b67c55..1eb4e5d54e 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-2-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-chromium-linux.png index 472486b7d8..07903e4165 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-firefox-linux.png index 72fdce5210..10e7012386 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-webkit-linux.png index 922284b32d..e5c47dcbb5 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-2-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-2-chromium-linux.png index 9c794bb164..393996f516 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-2-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-2-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-2-firefox-linux.png index 01e5ff379e..b5561ad5c7 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-2-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-2-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-2-webkit-linux.png index 2f7086b53b..4f625989a7 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-2-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-chromium-linux.png index 646ee69b5a..ec4c08d9e5 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-firefox-linux.png index c218a407d2..942b1bf2b3 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-webkit-linux.png index 28ccd5e93c..eb404c87d6 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-2-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-2-chromium-linux.png index ad2cd6c830..a0f4d3ffc0 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-2-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-2-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-2-firefox-linux.png index 14d1dc054f..010f992266 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-2-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-2-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-2-webkit-linux.png index ad70dee0bb..6928eac434 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-2-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-chromium-linux.png index 2d1c4b9604..62fb9fc508 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-firefox-linux.png index bf488a7a66..9cfcfe0a86 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-webkit-linux.png index 34cb93d5b3..924d0773b5 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-2-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-2-chromium-linux.png index 4ec090d582..2fda1a1e42 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-2-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-2-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-2-firefox-linux.png index 7e590d1a42..7190c31d6a 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-2-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-2-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-2-webkit-linux.png index 74ddde0b46..cccc50349e 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-2-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-2dbb9-terns-no-margins-no-axis-patterns-enabled-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-2dbb9-terns-no-margins-no-axis-patterns-enabled-1-chromium-linux.png index 613f0adfa9..2e8c3199e5 100644 Binary files a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-2dbb9-terns-no-margins-no-axis-patterns-enabled-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-2dbb9-terns-no-margins-no-axis-patterns-enabled-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-2dbb9-terns-no-margins-no-axis-patterns-enabled-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-2dbb9-terns-no-margins-no-axis-patterns-enabled-1-firefox-linux.png index 5c97171d03..586217438a 100644 Binary files a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-2dbb9-terns-no-margins-no-axis-patterns-enabled-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-2dbb9-terns-no-margins-no-axis-patterns-enabled-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-2dbb9-terns-no-margins-no-axis-patterns-enabled-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-2dbb9-terns-no-margins-no-axis-patterns-enabled-1-webkit-linux.png index c057ec345b..73fddd33f3 100644 Binary files a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-2dbb9-terns-no-margins-no-axis-patterns-enabled-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-2dbb9-terns-no-margins-no-axis-patterns-enabled-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-b1c7d-andard-all-features-medium-size-with-axis-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-b1c7d-andard-all-features-medium-size-with-axis-1-chromium-linux.png index 8495c28d2b..93ed2c8618 100644 Binary files a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-b1c7d-andard-all-features-medium-size-with-axis-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-b1c7d-andard-all-features-medium-size-with-axis-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-b1c7d-andard-all-features-medium-size-with-axis-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-b1c7d-andard-all-features-medium-size-with-axis-1-firefox-linux.png index 5440c17fa2..357d766f80 100644 Binary files a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-b1c7d-andard-all-features-medium-size-with-axis-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-b1c7d-andard-all-features-medium-size-with-axis-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-b1c7d-andard-all-features-medium-size-with-axis-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-b1c7d-andard-all-features-medium-size-with-axis-1-webkit-linux.png index 5134a2d6b7..d83948dcd9 100644 Binary files a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-b1c7d-andard-all-features-medium-size-with-axis-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-con-b1c7d-andard-all-features-medium-size-with-axis-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-config-3-Standart-No-margins-no-tooltip-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-config-3-Standart-No-margins-no-tooltip-1-chromium-linux.png index b0cf70c0a6..c2110206cb 100644 Binary files a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-config-3-Standart-No-margins-no-tooltip-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-config-3-Standart-No-margins-no-tooltip-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-config-3-Standart-No-margins-no-tooltip-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-config-3-Standart-No-margins-no-tooltip-1-firefox-linux.png index aad9acb428..65aa6d824a 100644 Binary files a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-config-3-Standart-No-margins-no-tooltip-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-config-3-Standart-No-margins-no-tooltip-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-config-3-Standart-No-margins-no-tooltip-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-config-3-Standart-No-margins-no-tooltip-1-webkit-linux.png index e7f5f56cb5..2d1b046bd9 100644 Binary files a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-config-3-Standart-No-margins-no-tooltip-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-bar-horizontal-compact-with-config-3-Standart-No-margins-no-tooltip-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Inverted-yAxis-and-no-tooltip-1-chromium-linux.png b/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Inverted-yAxis-and-no-tooltip-1-chromium-linux.png index ffb9fa852c..11970ce122 100644 Binary files a/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Inverted-yAxis-and-no-tooltip-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Inverted-yAxis-and-no-tooltip-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Inverted-yAxis-and-no-tooltip-1-firefox-linux.png b/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Inverted-yAxis-and-no-tooltip-1-firefox-linux.png index d6f385ac9f..43720529d7 100644 Binary files a/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Inverted-yAxis-and-no-tooltip-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Inverted-yAxis-and-no-tooltip-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Inverted-yAxis-and-no-tooltip-1-webkit-linux.png b/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Inverted-yAxis-and-no-tooltip-1-webkit-linux.png index 4febf49c35..3e935cdbd5 100644 Binary files a/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Inverted-yAxis-and-no-tooltip-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Inverted-yAxis-and-no-tooltip-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Patterns-no-axes-patterns-enabled-large-size-1-chromium-linux.png b/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Patterns-no-axes-patterns-enabled-large-size-1-chromium-linux.png index bd1b4ea0ee..b875e780df 100644 Binary files a/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Patterns-no-axes-patterns-enabled-large-size-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Patterns-no-axes-patterns-enabled-large-size-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Patterns-no-axes-patterns-enabled-large-size-1-firefox-linux.png b/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Patterns-no-axes-patterns-enabled-large-size-1-firefox-linux.png index 7e0617a6b8..896c13c8bc 100644 Binary files a/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Patterns-no-axes-patterns-enabled-large-size-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Patterns-no-axes-patterns-enabled-large-size-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Patterns-no-axes-patterns-enabled-large-size-1-webkit-linux.png b/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Patterns-no-axes-patterns-enabled-large-size-1-webkit-linux.png index a072d5ff88..b13607f620 100644 Binary files a/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Patterns-no-axes-patterns-enabled-large-size-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Patterns-no-axes-patterns-enabled-large-size-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Standard-all-features-enabled-medium-size-1-chromium-linux.png b/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Standard-all-features-enabled-medium-size-1-chromium-linux.png index 6b75637c21..2cc02c56ed 100644 Binary files a/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Standard-all-features-enabled-medium-size-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Standard-all-features-enabled-medium-size-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Standard-all-features-enabled-medium-size-1-firefox-linux.png b/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Standard-all-features-enabled-medium-size-1-firefox-linux.png index e4ad804b23..375fb568ae 100644 Binary files a/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Standard-all-features-enabled-medium-size-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Standard-all-features-enabled-medium-size-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Standard-all-features-enabled-medium-size-1-webkit-linux.png b/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Standard-all-features-enabled-medium-size-1-webkit-linux.png index 2cefa8bcf5..e350a2225d 100644 Binary files a/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Standard-all-features-enabled-medium-size-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-Standard-all-features-enabled-medium-size-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-1-chromium-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-1-chromium-linux.png index 14ba6ad931..2127a1b123 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-1-chromium-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-1-firefox-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-1-firefox-linux.png index 3db329326b..7ba7f541d4 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-1-firefox-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-1-webkit-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-1-webkit-linux.png index f29790174b..f2b8dcb04c 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-1-webkit-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-2-chromium-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-2-chromium-linux.png index 56d78d1da6..c67166483f 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-2-chromium-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-2-firefox-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-2-firefox-linux.png index ad7f462044..c13cc8a20b 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-2-firefox-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-2-webkit-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-2-webkit-linux.png index 293fc9469c..08420b9294 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-2-webkit-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-layouts-and-highlights-on-hover-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-no-tooltip-when-showTooltip-false-1-chromium-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-no-tooltip-when-showTooltip-false-1-chromium-linux.png index c928ed6a7e..9d46166a91 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-no-tooltip-when-showTooltip-false-1-chromium-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-no-tooltip-when-showTooltip-false-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-no-tooltip-when-showTooltip-false-1-firefox-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-no-tooltip-when-showTooltip-false-1-firefox-linux.png index bac7aee81b..305376abf2 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-no-tooltip-when-showTooltip-false-1-firefox-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-no-tooltip-when-showTooltip-false-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-no-tooltip-when-showTooltip-false-1-webkit-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-no-tooltip-when-showTooltip-false-1-webkit-linux.png index c88fdeb9c9..77a0200457 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-no-tooltip-when-showTooltip-false-1-webkit-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-no-tooltip-when-showTooltip-false-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-1-chromium-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-1-chromium-linux.png index 019c42a050..4ef46d3f2d 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-1-chromium-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-1-firefox-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-1-firefox-linux.png index aeb2fdcb9d..f69c4c6d40 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-1-firefox-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-1-webkit-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-1-webkit-linux.png index 938db5cd33..a7e597415c 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-1-webkit-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-2-chromium-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-2-chromium-linux.png index 3606e4f998..46fe03123b 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-2-chromium-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-2-firefox-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-2-firefox-linux.png index db305abfd5..0fd4289cc4 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-2-firefox-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-2-webkit-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-2-webkit-linux.png index 108e4f77ab..232406d82e 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-2-webkit-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltip-shown-on-hover-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-with-percent-and-total-1-chromium-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-with-percent-and-total-1-chromium-linux.png index e760526ef2..25fb9c4978 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-with-percent-and-total-1-chromium-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-with-percent-and-total-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-with-percent-and-total-1-firefox-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-with-percent-and-total-1-firefox-linux.png index 40264a1a08..b218253427 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-with-percent-and-total-1-firefox-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-with-percent-and-total-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-with-percent-and-total-1-webkit-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-with-percent-and-total-1-webkit-linux.png index eec6f34282..a7e8ad9309 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-with-percent-and-total-1-webkit-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-with-percent-and-total-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-without-percent-1-chromium-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-without-percent-1-chromium-linux.png index 4d9009daa1..cbc066bd44 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-without-percent-1-chromium-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-without-percent-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-without-percent-1-firefox-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-without-percent-1-firefox-linux.png index f58c9aa32f..d7b625c8a4 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-without-percent-1-firefox-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-without-percent-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-without-percent-1-webkit-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-without-percent-1-webkit-linux.png index d0633c959e..aeb78799fb 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-without-percent-1-webkit-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-all-without-percent-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-with-percent-1-chromium-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-with-percent-1-chromium-linux.png index 2e1254a7e2..f6ec0ebd67 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-with-percent-1-chromium-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-with-percent-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-with-percent-1-firefox-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-with-percent-1-firefox-linux.png index ae79468153..50fc948a72 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-with-percent-1-firefox-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-with-percent-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-with-percent-1-webkit-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-with-percent-1-webkit-linux.png index 8a251ee9ef..efe45795de 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-with-percent-1-webkit-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-with-percent-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-without-percent-1-chromium-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-without-percent-1-chromium-linux.png index a262601515..5928e2ffc7 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-without-percent-1-chromium-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-without-percent-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-without-percent-1-firefox-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-without-percent-1-firefox-linux.png index 7e0e068dc3..f4c1b95af8 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-without-percent-1-firefox-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-without-percent-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-without-percent-1-webkit-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-without-percent-1-webkit-linux.png index 71389beb62..8d891d383b 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-without-percent-1-webkit-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-tooltipViewType-single-without-percent-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx index b447f5c818..a8a76dd70b 100644 --- a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx +++ b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx @@ -229,7 +229,7 @@ test.describe(`${TAG.VISUAL}`, () => { test('Verify chart looks good on small resolutions', { tag: [TAG.PRIORITY_MEDIUM, '@d3-chart'], }, async ({ page }) => { - await loadPage(page, 'stories/components/d3-chart/docs/examples/d3-chart/adaptive-chart.tsx', 'en'); + await loadPage(page, 'stories/components/d3-chart/docs/examples/d3-chart/responsive-low-level-chart.tsx', 'en'); await page.setViewportSize({ width: 768, height: 1024 }); await page.waitForTimeout(500); diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-All-features-enabled-standard-size-1-chromium-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-All-features-enabled-standard-size-1-chromium-linux.png index b56beba80f..02c89494fc 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-All-features-enabled-standard-size-1-chromium-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-All-features-enabled-standard-size-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-All-features-enabled-standard-size-1-firefox-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-All-features-enabled-standard-size-1-firefox-linux.png index 4dc6812a89..79e0840a40 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-All-features-enabled-standard-size-1-firefox-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-All-features-enabled-standard-size-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-All-features-enabled-standard-size-1-webkit-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-All-features-enabled-standard-size-1-webkit-linux.png index b5535dcc59..2a9f774f12 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-All-features-enabled-standard-size-1-webkit-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-All-features-enabled-standard-size-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-axis-small-size-no-tooltip-1-chromium-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-axis-small-size-no-tooltip-1-chromium-linux.png index 9ae5b61880..b532b2ca40 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-axis-small-size-no-tooltip-1-chromium-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-axis-small-size-no-tooltip-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-axis-small-size-no-tooltip-1-firefox-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-axis-small-size-no-tooltip-1-firefox-linux.png index e7f3875e9a..831bbb771e 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-axis-small-size-no-tooltip-1-firefox-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-axis-small-size-no-tooltip-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-axis-small-size-no-tooltip-1-webkit-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-axis-small-size-no-tooltip-1-webkit-linux.png index 4702b74851..314978d04b 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-axis-small-size-no-tooltip-1-webkit-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-axis-small-size-no-tooltip-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-large-margins-patterns-1-chromium-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-large-margins-patterns-1-chromium-linux.png index 52ecd7cbd7..8d835af7c5 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-large-margins-patterns-1-chromium-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-large-margins-patterns-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-large-margins-patterns-1-firefox-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-large-margins-patterns-1-firefox-linux.png index b276a607d5..1a591fd3af 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-large-margins-patterns-1-firefox-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-large-margins-patterns-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-large-margins-patterns-1-webkit-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-large-margins-patterns-1-webkit-linux.png index a0493ce586..61445a66a9 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-large-margins-patterns-1-webkit-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Inverted-large-margins-patterns-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Large-size-minimal-margins-no-axes-1-chromium-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Large-size-minimal-margins-no-axes-1-chromium-linux.png index 61ec963f85..39be0a57c7 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Large-size-minimal-margins-no-axes-1-chromium-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Large-size-minimal-margins-no-axes-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Large-size-minimal-margins-no-axes-1-firefox-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Large-size-minimal-margins-no-axes-1-firefox-linux.png index 38978c831a..e09f5eb004 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Large-size-minimal-margins-no-axes-1-firefox-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Large-size-minimal-margins-no-axes-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Large-size-minimal-margins-no-axes-1-webkit-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Large-size-minimal-margins-no-axes-1-webkit-linux.png index 5c2d62eab4..78833417cd 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Large-size-minimal-margins-no-axes-1-webkit-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Large-size-minimal-margins-no-axes-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Minimal-features-medium-size-1-chromium-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Minimal-features-medium-size-1-chromium-linux.png index f9eaca7d54..f11fe89d27 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Minimal-features-medium-size-1-chromium-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Minimal-features-medium-size-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Minimal-features-medium-size-1-firefox-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Minimal-features-medium-size-1-firefox-linux.png index 7058fb7f8f..fdd4bc72f7 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Minimal-features-medium-size-1-firefox-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Minimal-features-medium-size-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Minimal-features-medium-size-1-webkit-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Minimal-features-medium-size-1-webkit-linux.png index 39610a4fcf..23dda3b3cf 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Minimal-features-medium-size-1-webkit-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-Minimal-features-medium-size-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-No-legend-mixed-features-1-chromium-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-No-legend-mixed-features-1-chromium-linux.png index b5c0f56be7..6cee309786 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-No-legend-mixed-features-1-chromium-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-No-legend-mixed-features-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-No-legend-mixed-features-1-firefox-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-No-legend-mixed-features-1-firefox-linux.png index ba4a03c965..503cc967d4 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-No-legend-mixed-features-1-firefox-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-No-legend-mixed-features-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-No-legend-mixed-features-1-webkit-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-No-legend-mixed-features-1-webkit-linux.png index 93ff02336f..c52f3a79e4 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-No-legend-mixed-features-1-webkit-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-line-chart-with-config-No-legend-mixed-features-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-2-chromium-linux.png b/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-2-chromium-linux.png index 5a7235e3ac..649abf07a0 100644 Binary files a/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-2-chromium-linux.png and b/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-1-Standard-all-features-enabled-medium-size-1-chromium-linux.png b/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-1-Standard-all-features-enabled-medium-size-1-chromium-linux.png index 36a3cfd516..f510aa5e66 100644 Binary files a/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-1-Standard-all-features-enabled-medium-size-1-chromium-linux.png and b/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-1-Standard-all-features-enabled-medium-size-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-1-Standard-all-features-enabled-medium-size-1-firefox-linux.png b/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-1-Standard-all-features-enabled-medium-size-1-firefox-linux.png index 56042a899f..39511cee75 100644 Binary files a/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-1-Standard-all-features-enabled-medium-size-1-firefox-linux.png and b/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-1-Standard-all-features-enabled-medium-size-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-1-Standard-all-features-enabled-medium-size-1-webkit-linux.png b/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-1-Standard-all-features-enabled-medium-size-1-webkit-linux.png index 2bb12dfeae..c4f99a11b3 100644 Binary files a/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-1-Standard-all-features-enabled-medium-size-1-webkit-linux.png and b/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-1-Standard-all-features-enabled-medium-size-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-2-Patterns-no-axes-patterns-enabled-large-size-1-chromium-linux.png b/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-2-Patterns-no-axes-patterns-enabled-large-size-1-chromium-linux.png index 478495635a..5423477cc3 100644 Binary files a/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-2-Patterns-no-axes-patterns-enabled-large-size-1-chromium-linux.png and b/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-2-Patterns-no-axes-patterns-enabled-large-size-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-2-Patterns-no-axes-patterns-enabled-large-size-1-firefox-linux.png b/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-2-Patterns-no-axes-patterns-enabled-large-size-1-firefox-linux.png index dcc9a706cb..b1680e8490 100644 Binary files a/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-2-Patterns-no-axes-patterns-enabled-large-size-1-firefox-linux.png and b/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-2-Patterns-no-axes-patterns-enabled-large-size-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-2-Patterns-no-axes-patterns-enabled-large-size-1-webkit-linux.png b/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-2-Patterns-no-axes-patterns-enabled-large-size-1-webkit-linux.png index 3ade2dd2e6..241a91a485 100644 Binary files a/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-2-Patterns-no-axes-patterns-enabled-large-size-1-webkit-linux.png and b/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-2-Patterns-no-axes-patterns-enabled-large-size-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-3-Inverted-axis-inversion-no-tooltip-no-legend-1-chromium-linux.png b/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-3-Inverted-axis-inversion-no-tooltip-no-legend-1-chromium-linux.png index cee3ac964d..d2d246bcb7 100644 Binary files a/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-3-Inverted-axis-inversion-no-tooltip-no-legend-1-chromium-linux.png and b/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-3-Inverted-axis-inversion-no-tooltip-no-legend-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-3-Inverted-axis-inversion-no-tooltip-no-legend-1-firefox-linux.png b/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-3-Inverted-axis-inversion-no-tooltip-no-legend-1-firefox-linux.png index c5d881b88f..5ce6522c92 100644 Binary files a/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-3-Inverted-axis-inversion-no-tooltip-no-legend-1-firefox-linux.png and b/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-3-Inverted-axis-inversion-no-tooltip-no-legend-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-3-Inverted-axis-inversion-no-tooltip-no-legend-1-webkit-linux.png b/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-3-Inverted-axis-inversion-no-tooltip-no-legend-1-webkit-linux.png index b1b7eaceca..2724073481 100644 Binary files a/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-3-Inverted-axis-inversion-no-tooltip-no-legend-1-webkit-linux.png and b/semcore/d3-chart/__tests__/scatterplot-chart.browser-test.tsx-snapshots/-visual-Verify-scatterplot-chart-with-config-3-Inverted-axis-inversion-no-tooltip-no-legend-1-webkit-linux.png differ diff --git a/semcore/d3-chart/src/component/Chart/AbstractChart.tsx b/semcore/d3-chart/src/component/Chart/AbstractChart.tsx index 621bcbbe08..503964c6c1 100644 --- a/semcore/d3-chart/src/component/Chart/AbstractChart.tsx +++ b/semcore/d3-chart/src/component/Chart/AbstractChart.tsx @@ -3,6 +3,9 @@ import type { Intergalactic } from '@semcore/core'; import { Component, Root, sstyled } from '@semcore/core'; import { extractAriaProps } from '@semcore/core/lib/utils/ariaProps'; import { callAllEventHandlers } from '@semcore/core/lib/utils/assignProps'; +import canUseDOM from '@semcore/core/lib/utils/canUseDOM'; +import cssToIntDefault from '@semcore/core/lib/utils/cssToIntDefault'; +import trottle from '@semcore/core/lib/utils/rafTrottle'; import { Text } from '@semcore/typography'; import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale'; import React, { Fragment } from 'react'; @@ -24,6 +27,9 @@ export type ChartState = { dataDefinitions: Array; highlightedLine: number; withTrend: boolean; + + plotWidth: number; + plotHeight: number; }; export const NOT_A_VALUE = 'n/a'; @@ -45,9 +51,20 @@ export abstract class AbstractChart< protected dataHints = makeDataHintsContainer(); + protected chartRef = React.createRef(); + protected legendRef = React.createRef(); + + private observer: ResizeObserver | undefined; + constructor(props: Props) { super(props); + this.handleResize = trottle(this.handleResize.bind(this)); + + if (canUseDOM() && (!props.plotWidth || !props.plotHeight)) { + this.observer = new ResizeObserver(this.handleResize); + } + this.setHighlightedLine = this.setHighlightedLine.bind(this); this.handleChangeVisible = this.handleChangeVisible.bind(this); this.handleMouseEnter = this.handleMouseEnter.bind(this); @@ -60,15 +77,33 @@ export abstract class AbstractChart< dataDefinitions: this.getDefaultDataDefinitions(), highlightedLine: -1, withTrend: false, + plotWidth: 0, + plotHeight: 0, } as State; } + public componentDidMount(): void { + this.observer?.observe(this.chartRef.current!); + } + public componentDidUpdate(prevProps: Props) { if (prevProps.data !== this.props.data || prevProps.legendProps !== this.props.legendProps) { this.setState({ dataDefinitions: this.getDefaultDataDefinitions() }); } } + public componentWillUnmount(): void { + this.observer?.disconnect(); + } + + protected get plotWidth() { + return this.asProps.plotWidth ?? this.state.plotWidth; + } + + protected get plotHeight() { + return this.asProps.plotHeight ?? this.state.plotHeight; + } + protected getDefaultDataDefinitions(): Array { const { data, legendProps } = this.props; @@ -398,7 +433,7 @@ export abstract class AbstractChart< }; if (lProps.legendType === 'Table') { - return ; + return ; } if ('withTrend' in lProps) { @@ -410,10 +445,10 @@ export abstract class AbstractChart< onTrendIsVisibleChange: this.handleWithTrendChange, }; - return ; + return ; } - return ; + return ; } protected renderAxis(): React.ReactNode { @@ -531,13 +566,14 @@ export abstract class AbstractChart< public render() { const SChart = Root; - const { styles, plotWidth, plotHeight, data, patterns, a11yAltTextConfig, duration, eventEmitter, showTooltip } = + const { styles, data, patterns, a11yAltTextConfig, duration, eventEmitter, showTooltip } = this.asProps; + const { plotWidth, plotHeight } = this; const { extractedAriaProps } = extractAriaProps(this.asProps); return sstyled(styles)( - + {this.renderLegend()} , ); } + + private handleResize(entities: ResizeObserverEntry[]) { + const { aspect, direction, onResize, plotWidth, plotHeight } = this.asProps; + const chartElement = this.chartRef.current; + + if (!chartElement) return; + + const legendElement = this.legendRef.current; + const computedStyles = window.getComputedStyle(chartElement); + + let width: number = chartElement.clientWidth; + let height: number = chartElement.clientHeight; + + if (legendElement) { + const gap: number = cssToIntDefault(computedStyles.gap, 0); + if (direction?.includes('column')) { + height = height - legendElement.clientHeight - gap; + } else { + width = width - legendElement.clientWidth - gap; + } + } + + if (aspect) { + const minHeight = cssToIntDefault(computedStyles.getPropertyValue('min-height')); + const maxHeight = cssToIntDefault(computedStyles.getPropertyValue('max-height')); + height = width * aspect; + + if (height < minHeight) { + height = minHeight; + } + if (height > maxHeight) { + height = maxHeight; + } + } + + this.setState({ + plotWidth: plotWidth ? 0 : width, + plotHeight: plotHeight ? 0 : height, + }); + + onResize?.([width, height], entities); + } } diff --git a/semcore/d3-chart/src/component/Chart/AbstractChart.type.ts b/semcore/d3-chart/src/component/Chart/AbstractChart.type.ts index 09db471e8a..27051a4382 100644 --- a/semcore/d3-chart/src/component/Chart/AbstractChart.type.ts +++ b/semcore/d3-chart/src/component/Chart/AbstractChart.type.ts @@ -63,12 +63,14 @@ export type BaseChartProps = FlexProps & { data: T; /** * Width of plot + * @default width is 100% of the parent element. */ - plotWidth: number; + plotWidth?: number; /** * Height of plot + * @default height is 100% of the parent element. */ - plotHeight: number; + plotHeight?: number; /** Enables charts patterns that enhances charts accessibility */ patterns?: PatternsConfig; @@ -158,6 +160,10 @@ export type BaseChartProps = FlexProps & { * Flag to show/hide legend */ showLegend?: boolean; + /** Relation between height and width dimensions block */ + aspect?: number; + /** Callback which will be called after changing the block size */ + onResize?: (size: [number, number], entries: ResizeObserverEntry[]) => void; /** * Props for Legend */ diff --git a/semcore/d3-chart/src/component/Chart/AreaChart.tsx b/semcore/d3-chart/src/component/Chart/AreaChart.tsx index 3af1953517..2c9a0203c0 100644 --- a/semcore/d3-chart/src/component/Chart/AreaChart.tsx +++ b/semcore/d3-chart/src/component/Chart/AreaChart.tsx @@ -30,7 +30,8 @@ class AreaChartComponent extends AbstractChart< } as const; get xScale() { - const { xScale, marginY = 40, plotWidth, data, groupKey } = this.asProps; + const { xScale, marginY = 40, data, groupKey } = this.asProps; + const { plotWidth } = this; if (xScale) { return xScale; @@ -48,7 +49,8 @@ class AreaChartComponent extends AbstractChart< } get yScale(): ScaleLinear { - const { yScale, marginX = 24, plotHeight, stacked } = this.asProps; + const { yScale, marginX = 24, stacked } = this.asProps; + const { plotHeight } = this; if (yScale) { return yScale; diff --git a/semcore/d3-chart/src/component/Chart/BarChart.tsx b/semcore/d3-chart/src/component/Chart/BarChart.tsx index 48315f9441..aa8e761a11 100644 --- a/semcore/d3-chart/src/component/Chart/BarChart.tsx +++ b/semcore/d3-chart/src/component/Chart/BarChart.tsx @@ -267,12 +267,11 @@ class BarChartComponent extends AbstractChart< const { marginY = 40, marginX = 24, - plotWidth, - plotHeight, invertAxis, data, groupKey, } = this.asProps; + const { plotWidth, plotHeight } = this; const testItem = data[0][groupKey]; const range = invertAxis @@ -291,7 +290,8 @@ class BarChartComponent extends AbstractChart< } private get valueScale() { - const { marginY = 40, marginX = 24, plotWidth, plotHeight, invertAxis, type } = this.asProps; + const { marginY = 40, marginX = 24, invertAxis, type } = this.asProps; + const { plotWidth, plotHeight } = this; const max = type === 'stack' ? super.maxStackedValue : Math.max(...super.flatValues); diff --git a/semcore/d3-chart/src/component/Chart/BubbleChart.tsx b/semcore/d3-chart/src/component/Chart/BubbleChart.tsx index 424fbd0545..fde5fc39d7 100644 --- a/semcore/d3-chart/src/component/Chart/BubbleChart.tsx +++ b/semcore/d3-chart/src/component/Chart/BubbleChart.tsx @@ -72,7 +72,8 @@ class BubbleChartComponent extends AbstractChart< } get xScale() { - const { xScale, marginY = 30, plotWidth, data } = this.asProps; + const { xScale, marginY = 30, data } = this.asProps; + const { plotWidth } = this; if (xScale) { return xScale; @@ -85,7 +86,8 @@ class BubbleChartComponent extends AbstractChart< } get yScale(): ScaleLinear { - const { yScale, marginX = 30, plotHeight, data } = this.asProps; + const { yScale, marginX = 30, data } = this.asProps; + const { plotHeight } = this; if (yScale) { return yScale; diff --git a/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx b/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx index 114157646f..4f69d3db20 100644 --- a/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx +++ b/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx @@ -57,6 +57,7 @@ class CigaretteChartComponent extends AbstractChart< plotHeight: invertAxis && !props.plotHeight ? 28 : props.plotHeight, showPercentValueInTooltip: false, minimalBarWidth: DEFAULT_MINIMAL_BAR_WIDTH, + direction: invertAxis ? 'column' : 'row', } as const; }; @@ -147,7 +148,8 @@ class CigaretteChartComponent extends AbstractChart< } private computeCigaretteItems() { - const { plotWidth, plotHeight, data, invertAxis, minimalBarWidth } = this.asProps; + const { data, invertAxis, minimalBarWidth } = this.asProps; + const { plotWidth, plotHeight } = this; const dataDefinitions = invertAxis ? this.activeDataDefinitions @@ -214,21 +216,22 @@ class CigaretteChartComponent extends AbstractChart< }; get xScale() { - const { plotWidth } = this.asProps; + const { plotWidth } = this; return scaleLinear([0, plotWidth]); } get yScale() { - const { plotHeight } = this.asProps; + const { plotHeight } = this; return scaleLinear([plotHeight, 0]); } renderChart() { - const { invertAxis, data, uid, duration, patterns, plotHeight, plotWidth, onClick } = + const { invertAxis, data, uid, duration, patterns, onClick } = this.asProps; const { dataDefinitions, highlightedLine } = this.state; + const { plotWidth, plotHeight } = this; this.offset = 0; @@ -415,13 +418,13 @@ class CigaretteChartComponent extends AbstractChart< override render() { const SChart = Root; - const { styles, plotWidth, plotHeight, data, patterns, invertAxis, a11yAltTextConfig } = this.asProps; - + const { styles, data, patterns, direction, invertAxis, a11yAltTextConfig } = this.asProps; + const { plotWidth, plotHeight } = this; const header = this.renderHeader(); if (invertAxis) { return sstyled(styles)( - + {header} + acc + d, 0); diff --git a/semcore/d3-chart/src/component/Chart/HistogramChart.tsx b/semcore/d3-chart/src/component/Chart/HistogramChart.tsx index 335f6cf53f..7bcdaf5ec6 100644 --- a/semcore/d3-chart/src/component/Chart/HistogramChart.tsx +++ b/semcore/d3-chart/src/component/Chart/HistogramChart.tsx @@ -34,12 +34,11 @@ class HistogramChartComponent extends AbstractChart< xScale, marginY = 30, marginX = 30, - plotWidth, - plotHeight, invertAxis, data, groupKey, } = this.asProps; + const { plotWidth, plotHeight } = this; if (xScale) { return xScale; @@ -66,11 +65,10 @@ class HistogramChartComponent extends AbstractChart< yScale, marginY = 30, marginX = 30, - plotHeight, - plotWidth, invertAxis, data, } = this.asProps; + const { plotWidth, plotHeight } = this; let max: number; diff --git a/semcore/d3-chart/src/component/Chart/LineChart.tsx b/semcore/d3-chart/src/component/Chart/LineChart.tsx index 9cb1153dc9..18c199aa18 100644 --- a/semcore/d3-chart/src/component/Chart/LineChart.tsx +++ b/semcore/d3-chart/src/component/Chart/LineChart.tsx @@ -30,7 +30,8 @@ class LineChartComponent extends AbstractChart< } as const; protected get xScale() { - const { xScale, marginY = 30, plotWidth, data, groupKey } = this.asProps; + const { xScale, marginY = 30, data, groupKey } = this.asProps; + const { plotWidth } = this; if (xScale) { return xScale; @@ -48,7 +49,8 @@ class LineChartComponent extends AbstractChart< } protected get yScale(): ScaleLinear { - const { yScale, marginX = 30, plotHeight } = this.asProps; + const { yScale, marginX = 30 } = this.asProps; + const { plotHeight } = this; if (yScale) { return yScale; diff --git a/semcore/d3-chart/src/component/Chart/ScatterPlotChart.tsx b/semcore/d3-chart/src/component/Chart/ScatterPlotChart.tsx index ccabd3a7f7..b690889335 100644 --- a/semcore/d3-chart/src/component/Chart/ScatterPlotChart.tsx +++ b/semcore/d3-chart/src/component/Chart/ScatterPlotChart.tsx @@ -42,7 +42,8 @@ class ScatterPlotChartComponent extends AbstractChart< } protected get xScale() { - const { xScale, marginY = 30, plotWidth, data, groupKey, valueKey } = this.asProps; + const { xScale, marginY = 30, data, groupKey, valueKey } = this.asProps; + const { plotWidth } = this; if (xScale) { return xScale; @@ -61,7 +62,8 @@ class ScatterPlotChartComponent extends AbstractChart< } protected get yScale(): ScaleLinear { - const { yScale, marginX = 30, plotHeight, valueKey } = this.asProps; + const { yScale, marginX = 30, valueKey } = this.asProps; + const { plotHeight } = this; if (yScale) { return yScale; diff --git a/semcore/d3-chart/src/style/abstract-chart.shadow.css b/semcore/d3-chart/src/style/abstract-chart.shadow.css index e5cbc2cfe0..124b8494cb 100644 --- a/semcore/d3-chart/src/style/abstract-chart.shadow.css +++ b/semcore/d3-chart/src/style/abstract-chart.shadow.css @@ -1,3 +1,10 @@ +SChart { + width: 100%; + height: 100%; + min-width: 0; + min-height: 0; +} + STooltipChildrenWrapper { display: grid; column-gap: var(--intergalactic-spacing-2x, 8px); diff --git a/semcore/icon/package.json b/semcore/icon/package.json index ff0eea93a6..66419506a0 100644 --- a/semcore/icon/package.json +++ b/semcore/icon/package.json @@ -4414,4 +4414,4 @@ "require": "./lib/ZoomPlus/m/index.js" } } -} +} \ No newline at end of file diff --git a/stories/components/base-components/flex-box/tests/examples/box-all-props.tsx b/stories/components/base-components/flex-box/tests/examples/box-all-props.tsx index 6990e98453..3855011934 100644 --- a/stories/components/base-components/flex-box/tests/examples/box-all-props.tsx +++ b/stories/components/base-components/flex-box/tests/examples/box-all-props.tsx @@ -79,6 +79,8 @@ const Demo = (props: ExampleProps) => { bg={props.bg} border={props.border} borderRadius={props.borderRadius} + resize={props.resize} + overflow={props.overflow} innerOutline={props.innerOutline} invertOutline={props.invertOutline} inAfterOutline={props.inAfterOutline} @@ -104,6 +106,9 @@ export const defaultProps: ExampleProps = { scaleIndent: 4, + resize: 'both', + overflow: 'auto', + innerOutline: false, invertOutline: false, inAfterOutline: false, diff --git a/stories/components/base-components/flex-box/tests/flex-box.stories.tsx b/stories/components/base-components/flex-box/tests/flex-box.stories.tsx index d6a7e71519..41bd21e54b 100644 --- a/stories/components/base-components/flex-box/tests/flex-box.stories.tsx +++ b/stories/components/base-components/flex-box/tests/flex-box.stories.tsx @@ -103,6 +103,14 @@ export const BoxAllPropsConfigurable: StoryObj = { control: { type: 'select' }, options: borderRadiusOptions, }, + resize: { + control: { type: 'select' }, + options: ['none', 'both', 'horizontal', 'vertical'], + }, + overflow: { + control: { type: 'select' }, + options: ['visible', 'hidden', 'scroll', 'auto'], + }, innerOutline: { control: { type: 'boolean' } }, invertOutline: { control: { type: 'boolean' } }, inAfterOutline: { control: { type: 'boolean' } }, diff --git a/stories/components/d3-chart/docs/d3-chart.docs.stories.tsx b/stories/components/d3-chart/docs/d3-chart.docs.stories.tsx index a1efcf5ecd..847f35eaca 100644 --- a/stories/components/d3-chart/docs/d3-chart.docs.stories.tsx +++ b/stories/components/d3-chart/docs/d3-chart.docs.stories.tsx @@ -1,7 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import A11yFormattingExample from './examples/d3-chart/a11y-formatting'; -import AdaptiveChartExample from './examples/d3-chart/adaptive-chart'; import AdditionalLinesExample from './examples/d3-chart/additional-lines'; import AxesExample from './examples/d3-chart/axes'; import AxesTitlesExample from './examples/d3-chart/axes-titles'; @@ -15,6 +14,8 @@ import LowLevelComponentsUseExample from './examples/d3-chart/low-level-componen import PaddingMarginsExample from './examples/d3-chart/paddings-&-margins'; import PatternFillExample from './examples/d3-chart/pattern-fill'; import ReferenceLineExample from './examples/d3-chart/reference-line'; +import ResponsiveChartExample from './examples/d3-chart/responsive-chart'; +import ResponsiveLowLevelChartExample from './examples/d3-chart/responsive-low-level-chart'; import SynchronousChartsExample from './examples/d3-chart/synchronous-charts'; import TooltipExample from './examples/d3-chart/tooltip'; import TooltipControlExample from './examples/d3-chart/tooltip-control'; @@ -29,10 +30,6 @@ export const A11yFormatting: StoryObj = { render: A11yFormattingExample, }; -export const AdaptiveChart: StoryObj = { - render: AdaptiveChartExample, -}; - export const AdditionalLines: StoryObj = { render: AdditionalLinesExample, }; @@ -53,10 +50,6 @@ export const Base: StoryObj = { render: BaseExample, }; -export const Tooltip: StoryObj = { - render: TooltipExample, -}; - export const ChartLegend: StoryObj = { render: ChartLegendExample, }; @@ -89,10 +82,22 @@ export const ReferenceLine: StoryObj = { render: ReferenceLineExample, }; +export const ResponsiveChart: StoryObj = { + render: ResponsiveChartExample, +}; + +export const ResponsiveLowLevelChart: StoryObj = { + render: ResponsiveLowLevelChartExample, +}; + export const SynchronousCharts: StoryObj = { render: SynchronousChartsExample, }; +export const Tooltip: StoryObj = { + render: TooltipExample, +}; + export const TooltipControl: StoryObj = { render: TooltipControlExample, }; diff --git a/stories/components/d3-chart/docs/examples/bubble-chart/basic-usage.tsx b/stories/components/d3-chart/docs/examples/bubble-chart/basic-usage.tsx index 79ae9a3a7d..9adb6a0c79 100644 --- a/stories/components/d3-chart/docs/examples/bubble-chart/basic-usage.tsx +++ b/stories/components/d3-chart/docs/examples/bubble-chart/basic-usage.tsx @@ -1,3 +1,4 @@ +import { Box } from '@semcore/ui/base-components'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; diff --git a/stories/components/d3-chart/docs/examples/d3-chart/responsive-chart.tsx b/stories/components/d3-chart/docs/examples/d3-chart/responsive-chart.tsx new file mode 100644 index 0000000000..96cc536a88 --- /dev/null +++ b/stories/components/d3-chart/docs/examples/d3-chart/responsive-chart.tsx @@ -0,0 +1,30 @@ +import { Chart } from '@semcore/ui/d3-chart'; +import React from 'react'; + +import AreaMockData from '../../../__mocks__/area'; + +function formatDate(value: any) { + const options = { + month: 'short' as const, + day: 'numeric' as const, + }; + + return new Intl.DateTimeFormat('en', options).format(value); +} + +const Demo = () => { + return ( + + ); +}; + +const data = AreaMockData.Default; + +export default Demo; diff --git a/stories/components/d3-chart/docs/examples/d3-chart/adaptive-chart.tsx b/stories/components/d3-chart/docs/examples/d3-chart/responsive-low-level-chart.tsx similarity index 100% rename from stories/components/d3-chart/docs/examples/d3-chart/adaptive-chart.tsx rename to stories/components/d3-chart/docs/examples/d3-chart/responsive-low-level-chart.tsx diff --git a/stories/components/d3-chart/docs/examples/venn-chart/basic-usage.tsx b/stories/components/d3-chart/docs/examples/venn-chart/basic-usage.tsx index d04764a140..460711e773 100644 --- a/stories/components/d3-chart/docs/examples/venn-chart/basic-usage.tsx +++ b/stories/components/d3-chart/docs/examples/venn-chart/basic-usage.tsx @@ -1,3 +1,4 @@ +import { Box } from '@semcore/ui/base-components'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; @@ -5,7 +6,7 @@ import VennMockData from '../../../__mocks__/venn'; const Demo = () => { return ( -
+ { legendProps={legendProps} aria-label='Venn chart' /> -
+ ); }; diff --git a/stories/components/d3-chart/tests/bar-horizontal.stories.tsx b/stories/components/d3-chart/tests/bar-horizontal.stories.tsx index ff000ddd77..1cd85ef127 100644 --- a/stories/components/d3-chart/tests/bar-horizontal.stories.tsx +++ b/stories/components/d3-chart/tests/bar-horizontal.stories.tsx @@ -1,6 +1,8 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; +import BasicUsageExample, { defaultProps as BasicUsageProps } from './examples/bar-horizontal/basic-usage'; import HorizontalBarPropsExample, { defaultProps as HorizontalBarPropsDefaultProps } from './examples/bar-horizontal/horizontal-bar-props'; +import { getChartArgTypes } from './examples/stories_props_helper'; const meta: Meta = { title: 'Components/d3Charts/Tests/Bar-Horizontal-Chart', @@ -20,3 +22,9 @@ export const HorizontalBarProps: StoryObj = { }, args: HorizontalBarPropsDefaultProps, }; + +export const BasicUsage = { + render: BasicUsageExample, + argTypes: getChartArgTypes(), + args: BasicUsageProps, +}; diff --git a/stories/components/d3-chart/tests/examples/area-chart/basic-usage.tsx b/stories/components/d3-chart/tests/examples/area-chart/basic-usage.tsx index 5f743ef486..e8f61049a8 100644 --- a/stories/components/d3-chart/tests/examples/area-chart/basic-usage.tsx +++ b/stories/components/d3-chart/tests/examples/area-chart/basic-usage.tsx @@ -1,3 +1,4 @@ +import { Box } from '@semcore/ui/base-components'; import type { AreaChartProps } from '@semcore/ui/d3-chart'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; @@ -21,13 +22,23 @@ const Demo = (props: AreaChartProps) => { console.log('→ Data item:', clickedItem); console.log('→ Event:', event); }; + const { plotWidth, plotHeight, ...chartProps } = getPropsToChart(props); return ( - + + + ); }; diff --git a/stories/components/d3-chart/tests/examples/bar-chart/basic-usage.tsx b/stories/components/d3-chart/tests/examples/bar-chart/basic-usage.tsx index 975402d178..12dc9b6b79 100644 --- a/stories/components/d3-chart/tests/examples/bar-chart/basic-usage.tsx +++ b/stories/components/d3-chart/tests/examples/bar-chart/basic-usage.tsx @@ -1,3 +1,4 @@ +import { Box } from '@semcore/ui/base-components'; import type { BarChartProps } from '@semcore/ui/d3-chart'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; @@ -5,11 +6,22 @@ import React from 'react'; import { getChartProps, getPropsToChart } from '../stories_props_helper'; const Demo = (props: BarChartProps) => { + const { plotWidth, plotHeight, ...chartProps } = getPropsToChart(props); + return ( - + + + ); }; diff --git a/stories/components/d3-chart/tests/examples/bar-horizontal-compact/basic_usage.tsx b/stories/components/d3-chart/tests/examples/bar-horizontal-compact/basic_usage.tsx index d46022d5d9..bc86746aba 100644 --- a/stories/components/d3-chart/tests/examples/bar-horizontal-compact/basic_usage.tsx +++ b/stories/components/d3-chart/tests/examples/bar-horizontal-compact/basic_usage.tsx @@ -1,3 +1,4 @@ +import { Box } from '@semcore/ui/base-components'; import type { CompactHorizontalBarChartProps } from '@semcore/ui/d3-chart'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; @@ -5,11 +6,22 @@ import React from 'react'; import { getChartProps, getPropsToChart } from '../stories_props_helper'; const Demo = (props: CompactHorizontalBarChartProps) => { + const { plotWidth, plotHeight, ...chartProps } = getPropsToChart(props); + return ( - + + + ); }; diff --git a/stories/components/d3-chart/tests/examples/bar-horizontal/basic-usage.tsx b/stories/components/d3-chart/tests/examples/bar-horizontal/basic-usage.tsx new file mode 100644 index 0000000000..5c50a7eca0 --- /dev/null +++ b/stories/components/d3-chart/tests/examples/bar-horizontal/basic-usage.tsx @@ -0,0 +1,39 @@ +import { Box } from '@semcore/ui/base-components'; +import type { BarChartProps } from '@semcore/ui/d3-chart'; +import { Chart } from '@semcore/ui/d3-chart'; +import React from 'react'; + +import BarMockData from '../../../__mocks__/bar'; +import { getChartProps, getPropsToChart } from '../stories_props_helper'; + +const Demo = (props: BarChartProps) => { + const { plotWidth, plotHeight, ...chartProps } = getPropsToChart(props); + + return ( + + + + ); +}; + +const data = BarMockData.Default.map((d, i) => ({ ...d, category: `C.${i}` })); + +export const defaultProps = getChartProps({ + groupKey: 'category', + data, + invertAxis: true, +}); + +Demo.defaultProps = defaultProps; + +export default Demo; diff --git a/stories/components/d3-chart/tests/examples/bubble-chart/basic-usage.tsx b/stories/components/d3-chart/tests/examples/bubble-chart/basic-usage.tsx index b25f43dfc3..21861bbf83 100644 --- a/stories/components/d3-chart/tests/examples/bubble-chart/basic-usage.tsx +++ b/stories/components/d3-chart/tests/examples/bubble-chart/basic-usage.tsx @@ -1,3 +1,4 @@ +import { Box } from '@semcore/ui/base-components'; import type { BubbleChartProps } from '@semcore/ui/d3-chart'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; @@ -5,7 +6,20 @@ import React from 'react'; import { getChartProps, getPropsToChart } from '../stories_props_helper'; const Demo = (props: BubbleChartProps) => { - return ; + const { plotWidth, plotHeight, ...chartProps } = getPropsToChart(props); + + return ( + + + + ); }; const data = [ diff --git a/stories/components/d3-chart/tests/examples/cigarette-chart/basic-usage.tsx b/stories/components/d3-chart/tests/examples/cigarette-chart/basic-usage.tsx index 81c2e1c06d..fed52f641e 100644 --- a/stories/components/d3-chart/tests/examples/cigarette-chart/basic-usage.tsx +++ b/stories/components/d3-chart/tests/examples/cigarette-chart/basic-usage.tsx @@ -1,3 +1,4 @@ +import { Box } from '@semcore/ui/base-components'; import type { CigaretteChartProps } from '@semcore/ui/d3-chart'; import { Chart, interpolateValue } from '@semcore/ui/d3-chart'; import React from 'react'; @@ -59,13 +60,22 @@ export const dataOverflow = { Z: 3, }; -const Demo = ({ enableMinimalBarWidth = true, ...props }: CigaretteChartProps & { enableMinimalBarWidth?: boolean }) => { +const Demo = ({ enableMinimalBarWidth = true, plotWidth, plotHeight, ...props }: CigaretteChartProps & { enableMinimalBarWidth?: boolean }) => { return ( - + + + ); }; diff --git a/stories/components/d3-chart/tests/examples/donut-chart/basic-usage.tsx b/stories/components/d3-chart/tests/examples/donut-chart/basic-usage.tsx index b76d626cd1..82d2a81d85 100644 --- a/stories/components/d3-chart/tests/examples/donut-chart/basic-usage.tsx +++ b/stories/components/d3-chart/tests/examples/donut-chart/basic-usage.tsx @@ -1,3 +1,4 @@ +import { Box } from '@semcore/ui/base-components'; import type { DonutChartProps } from '@semcore/ui/d3-chart'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; @@ -5,13 +6,22 @@ import React from 'react'; import { getChartProps, getPropsToChart } from '../stories_props_helper'; const Demo = (props: DonutChartProps) => { + const { plotWidth, plotHeight, ...chartProps } = getPropsToChart(props); + return ( -
+ -
+ ); }; diff --git a/stories/components/d3-chart/tests/examples/histogram-chart/basic-usage.tsx b/stories/components/d3-chart/tests/examples/histogram-chart/basic-usage.tsx index a4f272f606..0718469253 100644 --- a/stories/components/d3-chart/tests/examples/histogram-chart/basic-usage.tsx +++ b/stories/components/d3-chart/tests/examples/histogram-chart/basic-usage.tsx @@ -1,3 +1,4 @@ +import { Box } from '@semcore/ui/base-components'; import type { HistogramChartProps } from '@semcore/ui/d3-chart'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; @@ -5,11 +6,22 @@ import React from 'react'; import { getChartProps, getPropsToChart } from '../stories_props_helper'; const Demo = (props: HistogramChartProps) => { + const { plotWidth, plotHeight, ...chartProps } = getPropsToChart(props); + return ( - + + + ); }; diff --git a/stories/components/d3-chart/tests/examples/line-chart/basic-usage.tsx b/stories/components/d3-chart/tests/examples/line-chart/basic-usage.tsx index cd4fe4ce97..179e29d4b9 100644 --- a/stories/components/d3-chart/tests/examples/line-chart/basic-usage.tsx +++ b/stories/components/d3-chart/tests/examples/line-chart/basic-usage.tsx @@ -1,20 +1,68 @@ +import { Box } from '@semcore/ui/base-components'; import type { LineChartProps } from '@semcore/ui/d3-chart'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; import { getChartProps, getPropsToChart } from '../stories_props_helper'; -const Demo = (props: LineChartProps) => { +type LineChartStoryProps = LineChartProps & { + useExplicitPlotWidth?: boolean; +}; + +const Demo = (props: LineChartStoryProps) => { + const [measuredSize, setMeasuredSize] = React.useState<[number, number] | null>(null); const onClickHandler = () => { console.log('Clicked line chart'); }; + const { + aspect, + hMax, + hMin, + onResize, + plotWidth, + plotHeight, + useExplicitPlotWidth, + ...chartProps + } = getPropsToChart(props); + + const handleResize: NonNullable = (size, entries) => { + setMeasuredSize(size); + onResize?.(size, entries); + }; + + const responsiveChartProps: LineChartProps = { + ...(chartProps as LineChartProps), + aspect, + hMax, + hMin, + onResize: handleResize, + ...(useExplicitPlotWidth ? { plotWidth } : {}), + }; + + const showResponsiveInfo = aspect || hMin || hMax || useExplicitPlotWidth; return ( - + <> + + + + {showResponsiveInfo && ( + + Measured plot size: {measuredSize ? `${Math.round(measuredSize[0])} x ${Math.round(measuredSize[1])}` : 'not measured yet'} + + )} + ); }; @@ -26,11 +74,12 @@ const data = Array(20) line2: Math.abs(Math.cos(Math.exp(i))) * 10, })); -export const defaultProps = getChartProps({ +export const defaultProps = getChartProps({ groupKey: 'x', data, showDots: true, showLegend: true, + useExplicitPlotWidth: false, }); Demo.defaultProps = defaultProps; diff --git a/stories/components/d3-chart/tests/examples/radar-chart/basic-usage.tsx b/stories/components/d3-chart/tests/examples/radar-chart/basic-usage.tsx index 35a65074d6..dd1a05ab5d 100644 --- a/stories/components/d3-chart/tests/examples/radar-chart/basic-usage.tsx +++ b/stories/components/d3-chart/tests/examples/radar-chart/basic-usage.tsx @@ -1,19 +1,31 @@ +import { Box } from '@semcore/ui/base-components'; import type { RadarChartProps } from '@semcore/ui/d3-chart'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; -import { getChartProps } from '../stories_props_helper'; +import { getChartProps, getPropsToChart } from '../stories_props_helper'; const Demo = (props: RadarChartProps) => { const onClickHandler = () => { console.log('Clicked radar chart'); }; + const { plotWidth, plotHeight, ...chartProps } = getPropsToChart(props); + return ( - + + + ); }; diff --git a/stories/components/d3-chart/tests/examples/scatterplot-chart/basic-usage.tsx b/stories/components/d3-chart/tests/examples/scatterplot-chart/basic-usage.tsx index 069fb11d2a..56ec57815a 100644 --- a/stories/components/d3-chart/tests/examples/scatterplot-chart/basic-usage.tsx +++ b/stories/components/d3-chart/tests/examples/scatterplot-chart/basic-usage.tsx @@ -1,3 +1,4 @@ +import { Box } from '@semcore/ui/base-components'; import type { ScatterPlotChartProps } from '@semcore/ui/d3-chart'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; @@ -8,12 +9,23 @@ const Demo = (props: ScatterPlotChartProps) => { const onClickHandler = () => { console.log('Clicked scatterplot item'); }; + const { plotWidth, plotHeight, ...chartProps } = getPropsToChart(props); + return ( - + + + ); }; diff --git a/stories/components/d3-chart/tests/examples/stacked-area-chart/basic-usage.tsx b/stories/components/d3-chart/tests/examples/stacked-area-chart/basic-usage.tsx new file mode 100644 index 0000000000..ea3d1872fc --- /dev/null +++ b/stories/components/d3-chart/tests/examples/stacked-area-chart/basic-usage.tsx @@ -0,0 +1,57 @@ +import { Box } from '@semcore/ui/base-components'; +import type { AreaChartProps } from '@semcore/ui/d3-chart'; +import { Chart } from '@semcore/ui/d3-chart'; +import React from 'react'; + +import StackedAreaMockData from '../../../__mocks__/stacked-area'; +import { getChartProps, getPropsToChart } from '../stories_props_helper'; + +const formatDate = (type: 'axis' | 'tooltip') => (value: any) => { + const options = + type === 'axis' + ? { + month: 'short' as const, + day: 'numeric' as const, + } + : { + year: 'numeric' as const, + month: 'long' as const, + day: 'numeric' as const, + }; + + return new Intl.DateTimeFormat('en', options).format(value); +}; + +const Demo = (props: AreaChartProps) => { + const { plotWidth, plotHeight, ...chartProps } = getPropsToChart(props); + + return ( + + + + ); +}; + +const data = StackedAreaMockData.Default; + +export const defaultProps = getChartProps({ + data, + groupKey: 'time', + stacked: true, +}); + +Demo.defaultProps = defaultProps; + +export default Demo; diff --git a/stories/components/d3-chart/tests/examples/stacked-bar-chart/basic-usage.tsx b/stories/components/d3-chart/tests/examples/stacked-bar-chart/basic-usage.tsx new file mode 100644 index 0000000000..4e163d63f6 --- /dev/null +++ b/stories/components/d3-chart/tests/examples/stacked-bar-chart/basic-usage.tsx @@ -0,0 +1,39 @@ +import { Box } from '@semcore/ui/base-components'; +import type { BarChartProps } from '@semcore/ui/d3-chart'; +import { Chart } from '@semcore/ui/d3-chart'; +import React from 'react'; + +import StackedBarMockData from '../../../__mocks__/stacked-bar'; +import { getChartProps, getPropsToChart } from '../stories_props_helper'; + +const Demo = (props: BarChartProps) => { + const { plotWidth, plotHeight, ...chartProps } = getPropsToChart(props); + + return ( + + + + ); +}; + +const data = StackedBarMockData.Default; + +export const defaultProps = getChartProps({ + groupKey: 'bar', + data, + type: 'stack', +}); + +Demo.defaultProps = defaultProps; + +export default Demo; diff --git a/stories/components/d3-chart/tests/examples/venn-chart/basic-usage.tsx b/stories/components/d3-chart/tests/examples/venn-chart/basic-usage.tsx index 11848b88c5..482d1a5750 100644 --- a/stories/components/d3-chart/tests/examples/venn-chart/basic-usage.tsx +++ b/stories/components/d3-chart/tests/examples/venn-chart/basic-usage.tsx @@ -1,17 +1,27 @@ +import { Box } from '@semcore/ui/base-components'; import type { VennChartProps } from '@semcore/ui/d3-chart'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; -import { getChartProps } from '../stories_props_helper'; +import { getChartProps, getPropsToChart } from '../stories_props_helper'; const Demo = (props: VennChartProps) => { + const { plotWidth, plotHeight, ...chartProps } = getPropsToChart(props); + return ( -
+ -
+ ); }; diff --git a/stories/components/d3-chart/tests/line-chart.stories.tsx b/stories/components/d3-chart/tests/line-chart.stories.tsx index 61d32fb5fb..3b41913ab2 100644 --- a/stories/components/d3-chart/tests/line-chart.stories.tsx +++ b/stories/components/d3-chart/tests/line-chart.stories.tsx @@ -26,6 +26,11 @@ export const Lines: StoryObj = { export const BasicUsage = { render: BasicUsageExample, - argTypes: getChartArgTypes(), + argTypes: getChartArgTypes({ + aspect: { control: { type: 'number', min: 0, max: 2, step: 0.1 } }, + hMin: { control: { type: 'number', min: 0, max: 600, step: 10 } }, + hMax: { control: { type: 'number', min: 0, max: 600, step: 10 } }, + useExplicitPlotWidth: { control: 'boolean' }, + }), args: BasicUsageProps, }; diff --git a/stories/components/d3-chart/tests/stacked-area-chart.stories.tsx b/stories/components/d3-chart/tests/stacked-area-chart.stories.tsx new file mode 100644 index 0000000000..d1acf2d4c8 --- /dev/null +++ b/stories/components/d3-chart/tests/stacked-area-chart.stories.tsx @@ -0,0 +1,16 @@ +import type { Meta } from '@storybook/react-vite'; + +import BasicUsageExample, { defaultProps as BasicUsageProps } from './examples/stacked-area-chart/basic-usage'; +import { getChartArgTypes } from './examples/stories_props_helper'; + +const meta: Meta = { + title: 'Components/d3Charts/Tests/Stacked-Area-Chart', +}; + +export default meta; + +export const BasicUsage = { + render: BasicUsageExample, + argTypes: getChartArgTypes(), + args: BasicUsageProps, +}; diff --git a/stories/components/d3-chart/tests/stacked-bar-chart.stories.tsx b/stories/components/d3-chart/tests/stacked-bar-chart.stories.tsx index c3a2ce6486..5ce11a7e39 100644 --- a/stories/components/d3-chart/tests/stacked-bar-chart.stories.tsx +++ b/stories/components/d3-chart/tests/stacked-bar-chart.stories.tsx @@ -1,6 +1,8 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; +import BasicUsageExample, { defaultProps as BasicUsageProps } from './examples/stacked-bar-chart/basic-usage'; import StackBarPropsExample, { defaultProps as StackBarPropsDefaultProps } from './examples/stacked-bar-chart/stack-bar-props-cases'; +import { getChartArgTypes } from './examples/stories_props_helper'; const meta: Meta = { title: 'Components/d3Charts/Tests/Stacked-Bar-Chart', @@ -30,3 +32,11 @@ export const StackBarProps: StoryObj = { }, args: StackBarPropsDefaultProps, }; + +export const BasicUsage = { + render: BasicUsageExample, + argTypes: getChartArgTypes({ + type: { control: 'select', options: ['stack', 'group'] }, + }), + args: BasicUsageProps, +}; diff --git a/website/docs/data-display/d3-chart/d3-chart-code.md b/website/docs/data-display/d3-chart/d3-chart-code.md index c9f8454acd..f8cda9852e 100644 --- a/website/docs/data-display/d3-chart/d3-chart-code.md +++ b/website/docs/data-display/d3-chart/d3-chart-code.md @@ -165,22 +165,62 @@ To make things easier, ticks can be specified on the `Axis` component itself, an ::: -## Adaptive chart +## Responsiveness -For SVG charts to display correctly on responsive layouts, you need to dynamically calculate their width and height. To help you with that, we created the `ResponsiveContainer` component that supports all the [Box properties](/layout/box-system/box-system-api) and can help you flexibly adjust the chart size. +High-level chart components (`Chart.Area`, `Chart.Bar`, `Chart.Line`, and others) are responsive by default. They fill their container (`width: 100%`, `height: 100%`) and automatically recalculate plot dimensions when the container size changes. + +You need to set the container size using [Box properties](/layout/box-system/box-system-api) (`w`, `h`, `aspect`, and others) on the chart itself or on a parent wrapper: + +```jsx + +``` + +Or keep a fixed aspect ratio: + +```jsx + +``` ::: tip -`ResponsiveContainer` supports the `aspect` property – the aspect ratio between the width and height of a chart. +The chart adapts to its **container**, not to the viewport directly. Make sure the parent layout provides a measurable size — especially height. Without it, the chart may collapse to zero height. ::: +::: sandbox + + + +::: + +### Low-level chart components + +When building charts from low-level components (`Plot`, `Line`, `XAxis`, `YAxis`, and others), use `ResponsiveContainer`. It supports all [Box properties](/layout/box-system/box-system-api) and reports size changes via `onResize`: + ```jsx - // width = height ... +const [[width, height], setSize] = React.useState([0, 0]); + + + + ... + + ``` +::: tip +`ResponsiveContainer` and high-level charts both support the `aspect` property — the ratio between width and height. +::: + ::: sandbox :::