diff --git a/playground/entries/Chart/ChartLegend.tsx b/playground/entries/Chart/ChartLegend.tsx index 81513ccc3e..3341697f5e 100644 --- a/playground/entries/Chart/ChartLegend.tsx +++ b/playground/entries/Chart/ChartLegend.tsx @@ -114,7 +114,7 @@ const entry: PlaygroundEntry = { shape: { type: 'select', value: 'Checkbox', - options: ['Checkbox', 'Line', 'Circle', 'Square'], + options: ['Checkbox', 'Circle', 'Pattern'], displayName: 'Shape', }, withIcon: { diff --git a/playground/entries/Chart/common/controls.ts b/playground/entries/Chart/common/controls.ts index 6e35233eee..faad045b17 100644 --- a/playground/entries/Chart/common/controls.ts +++ b/playground/entries/Chart/common/controls.ts @@ -4,7 +4,7 @@ const Direction = ['row', 'column', 'row-reverse', 'column-reverse'] as const; const AlignItems = ['flex-start', 'center', 'flex-end'] as const; const LegendDirection = ['row', 'column'] as const; const Size = ['m', 'l'] as const; -const Shape = ['Checkbox', 'Line', 'Circle', 'Square', 'Pattern'] as const; +const Shape = ['Checkbox', 'Circle', 'Pattern'] as const; export type CommonChartProps = { direction: (typeof Direction)[number]; diff --git a/semcore/base-components/src/components/hint/style/hint.shadow.css b/semcore/base-components/src/components/hint/style/hint.shadow.css index d79dcbc21a..7af94d81e6 100644 --- a/semcore/base-components/src/components/hint/style/hint.shadow.css +++ b/semcore/base-components/src/components/hint/style/hint.shadow.css @@ -9,7 +9,7 @@ SHintPopper { pointer-events: none; background: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140)); - border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.35 0.006 140)); + border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.4 0.004 140)); color: var(--intergalactic-tooltip-text-invert, oklch(0.999 0.001 180 / 0.949)); padding: var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-small, 8px); border-radius: var(--intergalactic-rounded-small, 4px); diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx index a0ca5c8aaa..cca5fc455d 100644 --- a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx +++ b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx @@ -1,6 +1,6 @@ import type { Page } from '@semcore/testing-utils/playwright'; import { expect, test } from '@semcore/testing-utils/playwright'; -import { loadPage } from '@semcore/testing-utils/shared/helpers'; +import { expectEachToHaveAttribute, loadPage } from '@semcore/testing-utils/shared/helpers'; import { TAG } from '@semcore/testing-utils/shared/tags'; export const locators = { @@ -361,13 +361,9 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { await locators.plot(page).waitFor({ state: 'visible' }); await page.waitForTimeout(500); - const count = await locators.areaDots(page).count(); - await expect(count).toBe(10); - for (let i = 0; i < count; i++) { - const dot = locators.areaDots(page, i); - await expect(dot).toHaveAttribute('aria-hidden', 'true'); - await expect(dot).toHaveAttribute('r', '4'); - } + await expect(locators.areaDots(page)).toHaveCount(10); + await expectEachToHaveAttribute(locators.areaDots(page), 'aria-hidden', 'true'); + await expectEachToHaveAttribute(locators.areaDots(page), 'r', '3.5'); }); await test.step('Verify no unneeded attributes on DOM nodes', async () => { @@ -430,14 +426,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { await locators.plot(page).waitFor({ state: 'visible' }); const checkboxes = page.locator('[data-ui-name="LegendFlex.LegendItem"][shape="Checkbox"]'); - const checkboxesInputs = checkboxes.locator('input'); - const count = await checkboxesInputs.count(); - expect(count).toBeGreaterThan(0); - - for (let i = 0; i < count; i++) { - const checkboxesInput = checkboxesInputs.nth(i); - await expect(checkboxesInput).toHaveAttribute('aria-invalid', 'false'); - } + await expectEachToHaveAttribute(checkboxes.locator('input'), 'aria-invalid', 'false'); }); }); }); 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 c7bf0fb5c1..6b6f5a1b97 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 e15155c322..11febc917d 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 caa8ccaaf6..a49236f361 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 32afdc9c59..76884718b6 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 87af08b3d2..ac9a8699c2 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 d54dab6201..4a32498d8a 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 141671ba0f..2a7914f79a 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 94934fccc7..28c52f928a 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 86002f226b..1cfab591d1 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-rendering-with-dots-and-hover-1-chromium-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-rendering-with-dots-and-hover-1-chromium-linux.png index 5a575c8b20..37723d4e83 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-rendering-with-dots-and-hover-1-chromium-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-rendering-with-dots-and-hover-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-rendering-with-dots-and-hover-1-firefox-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-rendering-with-dots-and-hover-1-firefox-linux.png index 413fff5f17..d3dd1c35d0 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-rendering-with-dots-and-hover-1-firefox-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-rendering-with-dots-and-hover-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-rendering-with-dots-and-hover-1-webkit-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-rendering-with-dots-and-hover-1-webkit-linux.png index c448e19899..ef0a55af5f 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-rendering-with-dots-and-hover-1-webkit-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-area-chart-rendering-with-dots-and-hover-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 06f0c5dd83..8db2f087f1 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 e5bc0a5809..2da8e2763b 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 55a4d6160d..2df8562b1f 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-chart-with-no-data-and-single-data-1-chromium-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-chart-with-no-data-and-single-data-1-chromium-linux.png index 76171958f2..03ac679845 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-chart-with-no-data-and-single-data-1-chromium-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-chart-with-no-data-and-single-data-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-chart-with-no-data-and-single-data-1-firefox-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-chart-with-no-data-and-single-data-1-firefox-linux.png index 4bb0be3092..7d9645fdc9 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-chart-with-no-data-and-single-data-1-firefox-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-chart-with-no-data-and-single-data-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-chart-with-no-data-and-single-data-1-webkit-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-chart-with-no-data-and-single-data-1-webkit-linux.png index 771867a111..813a50a09b 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-chart-with-no-data-and-single-data-1-webkit-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-chart-with-no-data-and-single-data-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-styles-1-chromium-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-styles-1-chromium-linux.png index b986b20043..d54bcdbfde 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-styles-1-chromium-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-styles-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-styles-1-firefox-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-styles-1-firefox-linux.png index fd2079c536..d2f0681c58 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-styles-1-firefox-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-styles-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-styles-1-webkit-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-styles-1-webkit-linux.png index c729f0955f..21efc0dd6d 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-styles-1-webkit-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-styles-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-1-chromium-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-1-chromium-linux.png index 02ea6be154..dd0ecce7be 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-1-chromium-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-1-firefox-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-1-firefox-linux.png index 90df224c59..f3a18ce41a 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-1-firefox-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-1-webkit-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-1-webkit-linux.png index a7aa6da1e5..f172214cab 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-1-webkit-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-2-chromium-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-2-chromium-linux.png index 1b9c010af2..a096ab1cde 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-2-chromium-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-2-firefox-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-2-firefox-linux.png index 4bf9e3f002..ca68a44072 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-2-firefox-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-2-webkit-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-2-webkit-linux.png index a3690bfe98..fd27053a5f 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-2-webkit-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-3-chromium-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-3-chromium-linux.png index a3a9207976..6d1299fcdc 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-3-chromium-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-3-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-3-firefox-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-3-firefox-linux.png index afecfe9772..7341a05d86 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-3-firefox-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-3-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-3-webkit-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-3-webkit-linux.png index 0ad249d3aa..4bb7fb9a15 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-3-webkit-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-hover-and-focus-styles-3-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-legend-hover-styles-1-chromium-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-legend-hover-styles-1-chromium-linux.png index 1173df9f06..43a35a4ece 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-legend-hover-styles-1-chromium-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-legend-hover-styles-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-legend-hover-styles-1-firefox-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-legend-hover-styles-1-firefox-linux.png index a6dcde8aff..ce99c3f9d0 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-legend-hover-styles-1-firefox-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-legend-hover-styles-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-legend-hover-styles-1-webkit-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-legend-hover-styles-1-webkit-linux.png index 5abd31da0a..9be91f6c06 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-legend-hover-styles-1-webkit-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-legend-hover-styles-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-rendering-1-chromium-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-rendering-1-chromium-linux.png index c883a51e5f..17597eeba3 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-rendering-1-chromium-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-rendering-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-rendering-1-firefox-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-rendering-1-firefox-linux.png index bc4b951be8..a85d8d583c 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-rendering-1-firefox-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-rendering-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-rendering-1-webkit-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-rendering-1-webkit-linux.png index f18a1741da..96c3acfbbd 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-rendering-1-webkit-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-chart-rendering-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-when-part-of-the-chart-has-no-data-or-only-one-value-1-chromium-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-when-part-of-the-chart-has-no-data-or-only-one-value-1-chromium-linux.png index 71a19607b3..f593dcf9a9 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-when-part-of-the-chart-has-no-data-or-only-one-value-1-chromium-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-when-part-of-the-chart-has-no-data-or-only-one-value-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-when-part-of-the-chart-has-no-data-or-only-one-value-1-firefox-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-when-part-of-the-chart-has-no-data-or-only-one-value-1-firefox-linux.png index bc77686bcb..c5fa97961e 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-when-part-of-the-chart-has-no-data-or-only-one-value-1-firefox-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-when-part-of-the-chart-has-no-data-or-only-one-value-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-when-part-of-the-chart-has-no-data-or-only-one-value-1-webkit-linux.png b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-when-part-of-the-chart-has-no-data-or-only-one-value-1-webkit-linux.png index 1479b9aca3..caba37c2de 100644 Binary files a/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-when-part-of-the-chart-has-no-data-or-only-one-value-1-webkit-linux.png and b/semcore/d3-chart/__tests__/area-chart.browser-test.tsx-snapshots/-visual-Verify-stacked-area-when-part-of-the-chart-has-no-data-or-only-one-value-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx index 2f0f2f1b61..452a16b410 100644 --- a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx +++ b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx @@ -1185,7 +1185,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { for (const dot of dots) { await expect(dot).toHaveAttribute('aria-hidden', 'true'); - await expect(dot).toHaveAttribute('r', '4'); + await expect(dot).toHaveAttribute('r', '3.5'); } }); }); diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Bar-chart---Legend-and-interactions-Ve-e8cb8--legend-and-pattern-fill-keyboard-interaction-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Bar-chart---Legend-and-interactions-Ve-e8cb8--legend-and-pattern-fill-keyboard-interaction-1-webkit-linux.png index ce64daa7b9..fec834c8f3 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Bar-chart---Legend-and-interactions-Ve-e8cb8--legend-and-pattern-fill-keyboard-interaction-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Bar-chart---Legend-and-interactions-Ve-e8cb8--legend-and-pattern-fill-keyboard-interaction-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Bar-chart---Legend-and-interactions-Verify-bar-legend-and-pattern-fill-mouse-interaction-2-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Bar-chart---Legend-and-interactions-Verify-bar-legend-and-pattern-fill-mouse-interaction-2-chromium-linux.png index e7b0c3e8ac..6ebeb116d0 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Bar-chart---Legend-and-interactions-Verify-bar-legend-and-pattern-fill-mouse-interaction-2-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Bar-chart---Legend-and-interactions-Verify-bar-legend-and-pattern-fill-mouse-interaction-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Bar-chart---Legend-and-interactions-Verify-bar-legend-and-pattern-fill-mouse-interaction-2-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Bar-chart---Legend-and-interactions-Verify-bar-legend-and-pattern-fill-mouse-interaction-2-firefox-linux.png index e416fd02f8..6252316db0 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Bar-chart---Legend-and-interactions-Verify-bar-legend-and-pattern-fill-mouse-interaction-2-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Bar-chart---Legend-and-interactions-Verify-bar-legend-and-pattern-fill-mouse-interaction-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Bar-chart---Legend-and-interactions-Verify-bar-legend-and-pattern-fill-mouse-interaction-2-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Bar-chart---Legend-and-interactions-Verify-bar-legend-and-pattern-fill-mouse-interaction-2-webkit-linux.png index 99e1091c49..a86ae542d0 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Bar-chart---Legend-and-interactions-Verify-bar-legend-and-pattern-fill-mouse-interaction-2-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Bar-chart---Legend-and-interactions-Verify-bar-legend-and-pattern-fill-mouse-interaction-2-webkit-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-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 0ef07ea65e..3536c01b3f 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 597e5971fd..822cb5b281 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 c9b0a81ab1..17b5487b2b 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 8112093579..faa22311d4 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 0ffeb19099..8a8d3c952a 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 4498afa22c..8a084d200d 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 396a0eacf4..9a2f8b2c89 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 d33cbf966b..c09a95050a 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 846c57579f..70a94847c1 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-negative-values-look-good-on-bar-charts-2-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-negative-values-look-good-on-bar-charts-2-chromium-linux.png index 5a24468ead..ccb98a8154 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-negative-values-look-good-on-bar-charts-2-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-negative-values-look-good-on-bar-charts-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-negative-values-look-good-on-bar-charts-2-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-negative-values-look-good-on-bar-charts-2-firefox-linux.png index a10335b9da..165091d76c 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-negative-values-look-good-on-bar-charts-2-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-negative-values-look-good-on-bar-charts-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-negative-values-look-good-on-bar-charts-2-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-negative-values-look-good-on-bar-charts-2-webkit-linux.png index 0a2be6fdb3..f48fe68a50 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-negative-values-look-good-on-bar-charts-2-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-negative-values-look-good-on-bar-charts-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-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 2ef3f9dea1..b4eb091ac3 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 76f6870c99..18015bf45d 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 90d5a35bc1..b8d95251d6 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 2bbd7380bb..84f8155c13 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 73e82aa3cf..0460169955 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 51f9399b1a..af08c51bff 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 93f4187cc6..1be8475174 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 2e2833fa0e..6dca285879 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 e2b002cf60..2bd2890bd9 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-Basic-bar-chart-Verify-trend-line-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-line-1-chromium-linux.png index 695411cf8a..b667cc99ff 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-line-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-line-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-line-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-line-1-firefox-linux.png index 46e8b3e27f..520b94d4ba 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-line-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-line-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-line-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-line-1-webkit-linux.png index 75f7d6bf7f..0c089c92d1 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-line-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-line-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 4976fd6da3..f4a7ac314d 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 39ffdecc4f..5d11742a21 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 bff09d59b6..77e478004e 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-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 4693b4511b..5a37538922 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 b42a4bffd2..95706919b1 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 8528408f91..5abbc30fa3 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-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 830e3ca8cb..78e380c782 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 96e4ccdcc5..e1428a0839 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 dd9cd4857a..160d29c95d 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-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 e7e4235df4..bee5960e16 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 abb24ea1d4..bedb31a20b 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 fe924cc7e5..79df4d31cf 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-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-HorizontalBar-implementation-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-HorizontalBar-implementation-1-chromium-linux.png index 0efc6ffd70..d06309f47f 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-HorizontalBar-implementation-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-HorizontalBar-implementation-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-HorizontalBar-implementation-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-HorizontalBar-implementation-1-firefox-linux.png index 0cb7f6db88..97b313a66b 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-HorizontalBar-implementation-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-HorizontalBar-implementation-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-HorizontalBar-implementation-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-HorizontalBar-implementation-1-webkit-linux.png index a1396fdc6d..2b39bbafa1 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-HorizontalBar-implementation-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-HorizontalBar-implementation-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-grouped-horizontal-bars-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-grouped-horizontal-bars-1-chromium-linux.png index 85ebb896ae..845fe394c4 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-grouped-horizontal-bars-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-grouped-horizontal-bars-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-grouped-horizontal-bars-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-grouped-horizontal-bars-1-firefox-linux.png index c91002415c..cb4fdc4e0c 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-grouped-horizontal-bars-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-grouped-horizontal-bars-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-grouped-horizontal-bars-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-grouped-horizontal-bars-1-webkit-linux.png index 88e14da27e..a607b6c4b4 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-grouped-horizontal-bars-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-grouped-horizontal-bars-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-legend-and-pattern-fill-keyboard-interaction-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-legend-and-pattern-fill-keyboard-interaction-1-webkit-linux.png index 437b4ec61a..356839d08f 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-legend-and-pattern-fill-keyboard-interaction-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-legend-and-pattern-fill-keyboard-interaction-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-legend-and-pattern-fill-keyboard-interaction-2-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-legend-and-pattern-fill-keyboard-interaction-2-webkit-linux.png index 500615644b..ac72c1511c 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-legend-and-pattern-fill-keyboard-interaction-2-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-legend-and-pattern-fill-keyboard-interaction-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-legend-and-pattern-fill-mouse-interaction-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-legend-and-pattern-fill-mouse-interaction-1-webkit-linux.png index fc8e08b04b..7d3d006eb8 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-legend-and-pattern-fill-mouse-interaction-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-legend-and-pattern-fill-mouse-interaction-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-with-background-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-with-background-1-chromium-linux.png index 3f9061b20b..3c32946dd1 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-with-background-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-with-background-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-with-background-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-with-background-1-firefox-linux.png index 50a0283ee3..10dd284b2b 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-with-background-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-with-background-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-with-background-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-with-background-1-webkit-linux.png index 07ad9c47bc..7350084d8a 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-with-background-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Horizontal-bars-Verify-horizontal-bar-with-background-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-bars-Verify-stacked-grouped-bars-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-bars-Verify-stacked-grouped-bars-1-chromium-linux.png index 4569d6b4d8..3704440e0e 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-bars-Verify-stacked-grouped-bars-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-bars-Verify-stacked-grouped-bars-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-bars-Verify-stacked-grouped-bars-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-bars-Verify-stacked-grouped-bars-1-firefox-linux.png index d8ab2ac585..31e057e57b 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-bars-Verify-stacked-grouped-bars-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-bars-Verify-stacked-grouped-bars-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-bars-Verify-stacked-grouped-bars-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-bars-Verify-stacked-grouped-bars-1-webkit-linux.png index d78580122f..055d0f24c3 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-bars-Verify-stacked-grouped-bars-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-bars-Verify-stacked-grouped-bars-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-horizontal-bars-Verify-stacked-horizontal-bar-chart-with-HoverRect-tooltip-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-horizontal-bars-Verify-stacked-horizontal-bar-chart-with-HoverRect-tooltip-1-chromium-linux.png index 79bafc8747..8a3e256d3f 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-horizontal-bars-Verify-stacked-horizontal-bar-chart-with-HoverRect-tooltip-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-horizontal-bars-Verify-stacked-horizontal-bar-chart-with-HoverRect-tooltip-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-horizontal-bars-Verify-stacked-horizontal-bar-chart-with-HoverRect-tooltip-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-horizontal-bars-Verify-stacked-horizontal-bar-chart-with-HoverRect-tooltip-1-firefox-linux.png index 098ebeb982..32ee37bead 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-horizontal-bars-Verify-stacked-horizontal-bar-chart-with-HoverRect-tooltip-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-horizontal-bars-Verify-stacked-horizontal-bar-chart-with-HoverRect-tooltip-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-horizontal-bars-Verify-stacked-horizontal-bar-chart-with-HoverRect-tooltip-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-horizontal-bars-Verify-stacked-horizontal-bar-chart-with-HoverRect-tooltip-1-webkit-linux.png index 7963b9cf61..442671271f 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-horizontal-bars-Verify-stacked-horizontal-bar-chart-with-HoverRect-tooltip-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Stacked-horizontal-bars-Verify-stacked-horizontal-bar-chart-with-HoverRect-tooltip-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-advanced-usage-of-bar-horizontal-compact-2-chromium-linux.png b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-advanced-usage-of-bar-horizontal-compact-2-chromium-linux.png index 0ebd2f1197..dda3184260 100644 Binary files a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-advanced-usage-of-bar-horizontal-compact-2-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-advanced-usage-of-bar-horizontal-compact-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-advanced-usage-of-bar-horizontal-compact-2-firefox-linux.png b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-advanced-usage-of-bar-horizontal-compact-2-firefox-linux.png index 22b6c0cbca..a914fe49f4 100644 Binary files a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-advanced-usage-of-bar-horizontal-compact-2-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-advanced-usage-of-bar-horizontal-compact-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-advanced-usage-of-bar-horizontal-compact-2-webkit-linux.png b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-advanced-usage-of-bar-horizontal-compact-2-webkit-linux.png index 967b0c993d..6b387e5193 100644 Binary files a/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-advanced-usage-of-bar-horizontal-compact-2-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-horizontal-compact.browser-test.tsx-snapshots/-visual-Verify-advanced-usage-of-bar-horizontal-compact-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-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 e418679cf2..9bbd73b23c 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__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-implementation-1-chromium-linux.png b/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-implementation-1-chromium-linux.png index 9bdc30cfff..3813e7b27b 100644 Binary files a/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-implementation-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-implementation-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-implementation-1-webkit-linux.png b/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-implementation-1-webkit-linux.png index 41f576ef89..67f3ba9b8f 100644 Binary files a/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-implementation-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bubble-chart.browser-test.tsx-snapshots/-visual-Verify-bubble-chart-implementation-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx new file mode 100644 index 0000000000..8e3e3d6bec --- /dev/null +++ b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx @@ -0,0 +1,325 @@ +import type { Page } from '@semcore/testing-utils/playwright'; +import { expect, test } from '@semcore/testing-utils/playwright'; +import { expectEachToHaveAttribute, loadPage } from '@semcore/testing-utils/shared/helpers'; +import { TAG } from '@semcore/testing-utils/shared/tags'; + +export const locators = { + legendFlex: (page: Page) => page.locator('[data-ui-name="LegendFlex"]'), + legendTable: (page: Page) => page.locator('[data-ui-name="LegendTable"]'), + flexItem: (page: Page, index?: number) => { + const base = page.locator('div[data-ui-name="LegendFlex.LegendItem"]'); + return typeof index === 'number' ? base.nth(index) : base; + }, + tableItem: (page: Page, index?: number) => { + const base = page.locator('div[data-ui-name="LegendTable.LegendItem"]'); + return typeof index === 'number' ? base.nth(index) : base; + }, + tableColumn: (page: Page, index?: number) => { + const base = page.locator('[data-ui-name="LegendTable.Column"]'); + return typeof index === 'number' ? base.nth(index) : base; + }, + checkboxInput: (page: Page, index?: number) => { + const base = page.locator('[data-ui-name="Checkbox.Value"]'); + return typeof index === 'number' ? base.nth(index) : base; + }, + /** + * The checkbox input itself is visually hidden, so clicks have to go through the + * rendered checkmark. The input stays the place to assert the checked state. + */ + checkboxMark: (page: Page, index?: number) => { + const base = page.locator('[data-ui-name="Value.CheckMark"]'); + return typeof index === 'number' ? base.nth(index) : base; + }, + /** + * Dimmed items are styled through sstyled, so the generated class carries the + * modifier name rather than a `transparent` attribute. + */ + dimmed: (page: Page) => page.locator('[class*="_transparent_"]'), +}; + +const FLEX_EXAMPLE = 'stories/components/d3-chart/tests/examples/chart-legend/customizable_legend.tsx'; +const TABLE_EXAMPLE = 'stories/components/d3-chart/tests/examples/chart-legend/legend-table-data.tsx'; + +/** + * Pairwise set for LegendFlex. + * + * Factors: shape (Checkbox|Circle|Pattern), addon (none|trend|suffix), + * size (m|l), direction (row|column), patterns (false|true), + * highlightedItem (-1|0). + * + * The two 3-value factors put the lower bound at 9 cases, and the 2-value factors + * are distributed across those 9 rows so that every pair of values appears at + * least once. + */ +const flexPairwiseCases = [ + { + name: '#1 Checkbox, no addon, m, row, no patterns, no highlight', + props: { shape: 'Checkbox', size: 'm', direction: 'row', patterns: false, highlightedItem: -1 }, + }, + { + name: '#2 Checkbox, trend, l, column, patterns, highlight 0', + props: { shape: 'Checkbox', size: 'l', direction: 'column', patterns: true, highlightedItem: 0, withTrend: true }, + }, + { + name: '#3 Checkbox, suffix, m, column, patterns, no highlight', + props: { shape: 'Checkbox', size: 'm', direction: 'column', patterns: true, highlightedItem: -1, withSuffix: true }, + }, + { + name: '#4 Circle, no addon, l, column, no patterns, highlight 0', + props: { shape: 'Circle', size: 'l', direction: 'column', patterns: false, highlightedItem: 0 }, + }, + { + name: '#5 Circle, trend, m, row, patterns, no highlight', + props: { shape: 'Circle', size: 'm', direction: 'row', patterns: true, highlightedItem: -1, withTrend: true }, + }, + { + name: '#6 Circle, suffix, l, row, no patterns, highlight 0', + props: { shape: 'Circle', size: 'l', direction: 'row', patterns: false, highlightedItem: 0, withSuffix: true }, + }, + { + name: '#7 Pattern, no addon, m, column, patterns, highlight 0', + props: { shape: 'Pattern', size: 'm', direction: 'column', patterns: true, highlightedItem: 0 }, + }, + { + name: '#8 Pattern, trend, l, row, no patterns, no highlight', + props: { shape: 'Pattern', size: 'l', direction: 'row', patterns: false, highlightedItem: -1, withTrend: true }, + }, + { + name: '#9 Pattern, suffix, m, row, patterns, highlight 0', + props: { shape: 'Pattern', size: 'm', direction: 'row', patterns: true, highlightedItem: 0, withSuffix: true }, + }, +]; + +/** + * Pairwise set for LegendTable. + * + * Factors: size (m|l), highlightedItem (-1|0), columnsCount (1|2), width (185|300). + * Four 2-value factors need five cases to cover every pair. + */ +const tablePairwiseCases = [ + { + name: '#1 m, no highlight, 1 column, narrow', + props: { size: 'm', highlightedItem: -1, columnsCount: 1, w: 185 }, + }, + { + name: '#2 m, highlight 0, 2 columns, wide', + props: { size: 'm', highlightedItem: 0, columnsCount: 2, w: 300 }, + }, + { + name: '#3 l, no highlight, 2 columns, wide', + props: { size: 'l', highlightedItem: -1, columnsCount: 2, w: 300 }, + }, + { + name: '#4 l, highlight 0, 1 column, wide', + props: { size: 'l', highlightedItem: 0, columnsCount: 1, w: 300 }, + }, + { + name: '#5 l, highlight 0, 2 columns, narrow', + props: { size: 'l', highlightedItem: 0, columnsCount: 2, w: 185 }, + }, +]; + +/* ===================================================== +@visual +Visual states, hover and focus styles, paddings, margins, and snapshots. +===================================================== */ +test.describe(`${TAG.VISUAL}`, () => { + test.describe('LegendFlex', () => { + flexPairwiseCases.forEach((c) => { + test(`Verify pairwise ${c.name}`, { + tag: [TAG.PRIORITY_HIGH, '@d3-chart', '@chart-legend'], + }, async ({ page }) => { + await loadPage(page, FLEX_EXAMPLE, 'en', c.props); + + await locators.legendFlex(page).waitFor({ state: 'visible' }); + await expect(page).toHaveScreenshot(); + }); + }); + }); + + test.describe('LegendTable', () => { + tablePairwiseCases.forEach((c) => { + test(`Verify pairwise ${c.name}`, { + tag: [TAG.PRIORITY_HIGH, '@d3-chart', '@chart-legend'], + }, async ({ page }) => { + await loadPage(page, TABLE_EXAMPLE, 'en', c.props); + + await locators.legendTable(page).waitFor({ state: 'visible' }); + await expect(page).toHaveScreenshot(); + }); + }); + }); + + test.describe('Custom rendering', () => { + test('Verify custom shape as legend item', { + tag: [TAG.PRIORITY_MEDIUM, '@d3-chart', '@chart-legend'], + }, async ({ page }) => { + await loadPage(page, 'stories/components/d3-chart/docs/examples/chart-legend/custom-shape-as-legenditem.tsx', 'en'); + + await expect(page).toHaveScreenshot(); + }); + + test('Verify legend table view', { + tag: [TAG.PRIORITY_MEDIUM, '@d3-chart', '@chart-legend', '@typography'], + }, async ({ page }) => { + await loadPage(page, 'stories/components/d3-chart/docs/examples/chart-legend/table-view.tsx', 'en'); + + await expect(page).toHaveScreenshot(); + }); + }); +}); + +/* ===================================================== +@functional +Keyboard and mouse interactions - no snapshots here. +We verify states, visibility, and attributes. +===================================================== */ +test.describe(`${TAG.FUNCTIONAL}`, () => { + test.describe('LegendFlex', () => { + test('Verify checkbox roles and attributes', { + tag: [TAG.PRIORITY_MEDIUM, '@d3-chart', '@chart-legend'], + }, async ({ page }) => { + await loadPage(page, FLEX_EXAMPLE, 'en', { shape: 'Checkbox' }); + + await expectEachToHaveAttribute(locators.checkboxInput(page), 'aria-invalid', 'false'); + }); + + test('Verify an item is toggled by its checkbox and by its label', { + tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@d3-chart', '@chart-legend'], + }, async ({ page }) => { + await loadPage(page, FLEX_EXAMPLE, 'en', { shape: 'Checkbox' }); + + const first = locators.checkboxInput(page, 0); + await expect(first).toBeChecked(); + + await test.step('Uncheck through the checkbox', async () => { + await locators.checkboxMark(page, 0).click(); + await expect(first).not.toBeChecked(); + }); + + await test.step('Check back through the label', async () => { + await page.locator('span[data-ui-name="LegendFlex.LegendItem"]').first().click(); + await expect(first).toBeChecked(); + }); + }); + + (['Circle', 'Pattern'] as const).forEach((shape) => { + test(`Verify ${shape} shape renders no checkbox`, { + tag: [TAG.PRIORITY_MEDIUM, '@d3-chart', '@chart-legend'], + }, async ({ page }) => { + await loadPage(page, FLEX_EXAMPLE, 'en', { shape, patterns: shape === 'Pattern' }); + + await locators.legendFlex(page).waitFor({ state: 'visible' }); + await expect(locators.checkboxInput(page)).toHaveCount(0); + }); + }); + + test('Verify highlightedItem dims every other item', { + tag: [TAG.PRIORITY_HIGH, '@d3-chart', '@chart-legend'], + }, async ({ page }) => { + await loadPage(page, FLEX_EXAMPLE, 'en', { highlightedItem: 0 }); + + const items = locators.flexItem(page); + const total = await items.count(); + expect(total).toBeGreaterThan(1); + + await expect(items.nth(0)).not.toHaveClass(/_transparent_/); + for (let i = 1; i < total; i++) { + await expect(items.nth(i)).toHaveClass(/_transparent_/); + } + }); + + test('Verify nothing is dimmed when highlightedItem is -1', { + tag: [TAG.PRIORITY_MEDIUM, '@d3-chart', '@chart-legend'], + }, async ({ page }) => { + await loadPage(page, FLEX_EXAMPLE, 'en', { highlightedItem: -1 }); + + await locators.legendFlex(page).waitFor({ state: 'visible' }); + await expect(locators.dimmed(page)).toHaveCount(0); + }); + + test('Verify the trend item renders next to the legend items', { + tag: [TAG.PRIORITY_MEDIUM, '@d3-chart', '@chart-legend'], + }, async ({ page }) => { + await loadPage(page, FLEX_EXAMPLE, 'en', { withTrend: true, trendLabel: 'Trend line' }); + + await expect(page.getByText('Trend line')).toBeVisible(); + }); + + test('Verify the suffix renders after the legend items', { + tag: [TAG.PRIORITY_MEDIUM, '@d3-chart', '@chart-legend'], + }, async ({ page }) => { + await loadPage(page, FLEX_EXAMPLE, 'en', { withSuffix: true }); + + await expect(page.getByText('Suffix')).toBeVisible(); + }); + }); + + test.describe('LegendTable', () => { + test('Verify the design data renders in both columns', { + tag: [TAG.PRIORITY_HIGH, '@d3-chart', '@chart-legend'], + }, async ({ page }) => { + await loadPage(page, TABLE_EXAMPLE, 'en', { columnsCount: 2 }); + + await expect(locators.tableColumn(page)).toHaveCount(12); + await expect(locators.tableColumn(page, 0)).toHaveText('8%'); + await expect(locators.tableColumn(page, 1)).toHaveText('6.3K'); + await expect(page.getByText('Other data')).toBeVisible(); + }); + + test('Verify a single value column renders one cell per row', { + tag: [TAG.PRIORITY_MEDIUM, '@d3-chart', '@chart-legend'], + }, async ({ page }) => { + await loadPage(page, TABLE_EXAMPLE, 'en', { columnsCount: 1 }); + + await expect(locators.tableColumn(page)).toHaveCount(6); + await expect(locators.tableColumn(page, 0)).toHaveText('6.3K'); + }); + + test('Verify a row is toggled by its checkbox', { + tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@d3-chart', '@chart-legend'], + }, async ({ page }) => { + await loadPage(page, TABLE_EXAMPLE, 'en', {}); + + const first = locators.checkboxInput(page, 0); + await expect(first).toBeChecked(); + + await locators.checkboxMark(page, 0).click(); + await expect(first).not.toBeChecked(); + }); + + test('Verify highlightedItem dims every other row label', { + tag: [TAG.PRIORITY_HIGH, '@d3-chart', '@chart-legend'], + }, async ({ page }) => { + await loadPage(page, TABLE_EXAMPLE, 'en', { highlightedItem: 0 }); + + const items = locators.tableItem(page); + const total = await items.count(); + expect(total).toBeGreaterThan(1); + + await expect(items.nth(0)).not.toHaveClass(/_transparent_/); + for (let i = 1; i < total; i++) { + await expect(items.nth(i)).toHaveClass(/_transparent_/); + } + }); + + /** + * A dimmed row has to fade as a whole. The label lives inside `SLegendItem` while the + * values are its grid siblings, so each side carries its own `transparent` rule and + * they are easy to let drift apart. + */ + test('Verify the value columns of a dimmed row are dimmed as well', { + tag: [TAG.PRIORITY_MEDIUM, '@d3-chart', '@chart-legend'], + }, async ({ page }) => { + await loadPage(page, TABLE_EXAMPLE, 'en', { highlightedItem: 0, columnsCount: 2 }); + + // Row 1 is dimmed, so both of its value cells (index 2 and 3) are dimmed too. + await expect(locators.tableColumn(page, 2)).toHaveClass(/_transparent_/); + await expect(locators.tableColumn(page, 3)).toHaveClass(/_transparent_/); + + // The highlighted row stays fully opaque. + await expect(locators.tableColumn(page, 0)).not.toHaveClass(/_transparent_/); + await expect(locators.tableColumn(page, 1)).not.toHaveClass(/_transparent_/); + }); + }); +}); diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-custom-shape-as-leged-item-1-chromium-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-Custom-rendering-Verify-custom-shape-as-legend-item-1-chromium-linux.png similarity index 100% rename from semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-custom-shape-as-leged-item-1-chromium-linux.png rename to semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-Custom-rendering-Verify-custom-shape-as-legend-item-1-chromium-linux.png diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-custom-shape-as-leged-item-1-firefox-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-Custom-rendering-Verify-custom-shape-as-legend-item-1-firefox-linux.png similarity index 100% rename from semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-custom-shape-as-leged-item-1-firefox-linux.png rename to semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-Custom-rendering-Verify-custom-shape-as-legend-item-1-firefox-linux.png diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-custom-shape-as-leged-item-1-webkit-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-Custom-rendering-Verify-custom-shape-as-legend-item-1-webkit-linux.png similarity index 100% rename from semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-custom-shape-as-leged-item-1-webkit-linux.png rename to semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-Custom-rendering-Verify-custom-shape-as-legend-item-1-webkit-linux.png diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-Custom-rendering-Verify-legend-table-view-1-chromium-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-Custom-rendering-Verify-legend-table-view-1-chromium-linux.png new file mode 100644 index 0000000000..55bbf7e79e Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-Custom-rendering-Verify-legend-table-view-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-Custom-rendering-Verify-legend-table-view-1-firefox-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-Custom-rendering-Verify-legend-table-view-1-firefox-linux.png new file mode 100644 index 0000000000..c74aa0a120 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-Custom-rendering-Verify-legend-table-view-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-Custom-rendering-Verify-legend-table-view-1-webkit-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-Custom-rendering-Verify-legend-table-view-1-webkit-linux.png new file mode 100644 index 0000000000..e827d36c93 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-Custom-rendering-Verify-legend-table-view-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-1-Checkbox-no-addon-m-row-no-patterns-no-highlight-1-chromium-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-1-Checkbox-no-addon-m-row-no-patterns-no-highlight-1-chromium-linux.png new file mode 100644 index 0000000000..fc2192da3d Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-1-Checkbox-no-addon-m-row-no-patterns-no-highlight-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-1-Checkbox-no-addon-m-row-no-patterns-no-highlight-1-firefox-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-1-Checkbox-no-addon-m-row-no-patterns-no-highlight-1-firefox-linux.png new file mode 100644 index 0000000000..e33cd3a48e Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-1-Checkbox-no-addon-m-row-no-patterns-no-highlight-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-1-Checkbox-no-addon-m-row-no-patterns-no-highlight-1-webkit-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-1-Checkbox-no-addon-m-row-no-patterns-no-highlight-1-webkit-linux.png new file mode 100644 index 0000000000..15733851be Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-1-Checkbox-no-addon-m-row-no-patterns-no-highlight-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-2-Checkbox-trend-l-column-patterns-highlight-0-1-chromium-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-2-Checkbox-trend-l-column-patterns-highlight-0-1-chromium-linux.png new file mode 100644 index 0000000000..39328f03cc Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-2-Checkbox-trend-l-column-patterns-highlight-0-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-2-Checkbox-trend-l-column-patterns-highlight-0-1-firefox-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-2-Checkbox-trend-l-column-patterns-highlight-0-1-firefox-linux.png new file mode 100644 index 0000000000..4f41ef2c01 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-2-Checkbox-trend-l-column-patterns-highlight-0-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-2-Checkbox-trend-l-column-patterns-highlight-0-1-webkit-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-2-Checkbox-trend-l-column-patterns-highlight-0-1-webkit-linux.png new file mode 100644 index 0000000000..b0ce044025 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-2-Checkbox-trend-l-column-patterns-highlight-0-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-3-Checkbox-suffix-m-column-patterns-no-highlight-1-chromium-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-3-Checkbox-suffix-m-column-patterns-no-highlight-1-chromium-linux.png new file mode 100644 index 0000000000..883c3a27cd Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-3-Checkbox-suffix-m-column-patterns-no-highlight-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-3-Checkbox-suffix-m-column-patterns-no-highlight-1-firefox-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-3-Checkbox-suffix-m-column-patterns-no-highlight-1-firefox-linux.png new file mode 100644 index 0000000000..bc5f7d834b Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-3-Checkbox-suffix-m-column-patterns-no-highlight-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-3-Checkbox-suffix-m-column-patterns-no-highlight-1-webkit-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-3-Checkbox-suffix-m-column-patterns-no-highlight-1-webkit-linux.png new file mode 100644 index 0000000000..7dff0a6311 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-3-Checkbox-suffix-m-column-patterns-no-highlight-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-4-Circle-no-addon-l-column-no-patterns-highlight-0-1-chromium-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-4-Circle-no-addon-l-column-no-patterns-highlight-0-1-chromium-linux.png new file mode 100644 index 0000000000..edd210bdef Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-4-Circle-no-addon-l-column-no-patterns-highlight-0-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-4-Circle-no-addon-l-column-no-patterns-highlight-0-1-firefox-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-4-Circle-no-addon-l-column-no-patterns-highlight-0-1-firefox-linux.png new file mode 100644 index 0000000000..06417b488a Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-4-Circle-no-addon-l-column-no-patterns-highlight-0-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-4-Circle-no-addon-l-column-no-patterns-highlight-0-1-webkit-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-4-Circle-no-addon-l-column-no-patterns-highlight-0-1-webkit-linux.png new file mode 100644 index 0000000000..48df4ee8c8 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-4-Circle-no-addon-l-column-no-patterns-highlight-0-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-5-Circle-trend-m-row-patterns-no-highlight-1-chromium-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-5-Circle-trend-m-row-patterns-no-highlight-1-chromium-linux.png new file mode 100644 index 0000000000..b20c4e1b54 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-5-Circle-trend-m-row-patterns-no-highlight-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-5-Circle-trend-m-row-patterns-no-highlight-1-firefox-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-5-Circle-trend-m-row-patterns-no-highlight-1-firefox-linux.png new file mode 100644 index 0000000000..36a0ded94d Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-5-Circle-trend-m-row-patterns-no-highlight-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-5-Circle-trend-m-row-patterns-no-highlight-1-webkit-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-5-Circle-trend-m-row-patterns-no-highlight-1-webkit-linux.png new file mode 100644 index 0000000000..7b717ebb22 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-5-Circle-trend-m-row-patterns-no-highlight-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-6-Circle-suffix-l-row-no-patterns-highlight-0-1-chromium-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-6-Circle-suffix-l-row-no-patterns-highlight-0-1-chromium-linux.png new file mode 100644 index 0000000000..00c2cc2c7b Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-6-Circle-suffix-l-row-no-patterns-highlight-0-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-6-Circle-suffix-l-row-no-patterns-highlight-0-1-firefox-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-6-Circle-suffix-l-row-no-patterns-highlight-0-1-firefox-linux.png new file mode 100644 index 0000000000..0a47d5f778 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-6-Circle-suffix-l-row-no-patterns-highlight-0-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-6-Circle-suffix-l-row-no-patterns-highlight-0-1-webkit-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-6-Circle-suffix-l-row-no-patterns-highlight-0-1-webkit-linux.png new file mode 100644 index 0000000000..1bc2229550 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-6-Circle-suffix-l-row-no-patterns-highlight-0-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-7-Pattern-no-addon-m-column-patterns-highlight-0-1-chromium-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-7-Pattern-no-addon-m-column-patterns-highlight-0-1-chromium-linux.png new file mode 100644 index 0000000000..2ac12596b6 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-7-Pattern-no-addon-m-column-patterns-highlight-0-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-7-Pattern-no-addon-m-column-patterns-highlight-0-1-firefox-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-7-Pattern-no-addon-m-column-patterns-highlight-0-1-firefox-linux.png new file mode 100644 index 0000000000..c07756e873 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-7-Pattern-no-addon-m-column-patterns-highlight-0-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-7-Pattern-no-addon-m-column-patterns-highlight-0-1-webkit-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-7-Pattern-no-addon-m-column-patterns-highlight-0-1-webkit-linux.png new file mode 100644 index 0000000000..9ca2ea5cda Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-7-Pattern-no-addon-m-column-patterns-highlight-0-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-8-Pattern-trend-l-row-no-patterns-no-highlight-1-chromium-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-8-Pattern-trend-l-row-no-patterns-no-highlight-1-chromium-linux.png new file mode 100644 index 0000000000..70f9126ed1 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-8-Pattern-trend-l-row-no-patterns-no-highlight-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-8-Pattern-trend-l-row-no-patterns-no-highlight-1-firefox-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-8-Pattern-trend-l-row-no-patterns-no-highlight-1-firefox-linux.png new file mode 100644 index 0000000000..c75d52f749 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-8-Pattern-trend-l-row-no-patterns-no-highlight-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-8-Pattern-trend-l-row-no-patterns-no-highlight-1-webkit-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-8-Pattern-trend-l-row-no-patterns-no-highlight-1-webkit-linux.png new file mode 100644 index 0000000000..7121681718 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-8-Pattern-trend-l-row-no-patterns-no-highlight-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-9-Pattern-suffix-m-row-patterns-highlight-0-1-chromium-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-9-Pattern-suffix-m-row-patterns-highlight-0-1-chromium-linux.png new file mode 100644 index 0000000000..9277cdaa25 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-9-Pattern-suffix-m-row-patterns-highlight-0-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-9-Pattern-suffix-m-row-patterns-highlight-0-1-firefox-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-9-Pattern-suffix-m-row-patterns-highlight-0-1-firefox-linux.png new file mode 100644 index 0000000000..7ea9b07817 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-9-Pattern-suffix-m-row-patterns-highlight-0-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-9-Pattern-suffix-m-row-patterns-highlight-0-1-webkit-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-9-Pattern-suffix-m-row-patterns-highlight-0-1-webkit-linux.png new file mode 100644 index 0000000000..770b79ed4e Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendFlex-Verify-pairwise-9-Pattern-suffix-m-row-patterns-highlight-0-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-1-m-no-highlight-1-column-narrow-1-chromium-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-1-m-no-highlight-1-column-narrow-1-chromium-linux.png new file mode 100644 index 0000000000..ea2eef704e Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-1-m-no-highlight-1-column-narrow-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-1-m-no-highlight-1-column-narrow-1-firefox-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-1-m-no-highlight-1-column-narrow-1-firefox-linux.png new file mode 100644 index 0000000000..89c49ce624 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-1-m-no-highlight-1-column-narrow-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-1-m-no-highlight-1-column-narrow-1-webkit-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-1-m-no-highlight-1-column-narrow-1-webkit-linux.png new file mode 100644 index 0000000000..1c13cae539 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-1-m-no-highlight-1-column-narrow-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-2-m-highlight-0-2-columns-wide-1-chromium-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-2-m-highlight-0-2-columns-wide-1-chromium-linux.png new file mode 100644 index 0000000000..8f927302d7 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-2-m-highlight-0-2-columns-wide-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-2-m-highlight-0-2-columns-wide-1-firefox-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-2-m-highlight-0-2-columns-wide-1-firefox-linux.png new file mode 100644 index 0000000000..1df91ae384 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-2-m-highlight-0-2-columns-wide-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-2-m-highlight-0-2-columns-wide-1-webkit-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-2-m-highlight-0-2-columns-wide-1-webkit-linux.png new file mode 100644 index 0000000000..9d4e1e4ba5 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-2-m-highlight-0-2-columns-wide-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-3-l-no-highlight-2-columns-wide-1-chromium-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-3-l-no-highlight-2-columns-wide-1-chromium-linux.png new file mode 100644 index 0000000000..f1148690eb Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-3-l-no-highlight-2-columns-wide-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-3-l-no-highlight-2-columns-wide-1-firefox-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-3-l-no-highlight-2-columns-wide-1-firefox-linux.png new file mode 100644 index 0000000000..87511a8cf8 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-3-l-no-highlight-2-columns-wide-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-3-l-no-highlight-2-columns-wide-1-webkit-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-3-l-no-highlight-2-columns-wide-1-webkit-linux.png new file mode 100644 index 0000000000..47b15323de Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-3-l-no-highlight-2-columns-wide-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-4-l-highlight-0-1-column-wide-1-chromium-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-4-l-highlight-0-1-column-wide-1-chromium-linux.png new file mode 100644 index 0000000000..b703703eb8 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-4-l-highlight-0-1-column-wide-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-4-l-highlight-0-1-column-wide-1-firefox-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-4-l-highlight-0-1-column-wide-1-firefox-linux.png new file mode 100644 index 0000000000..1d0153af75 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-4-l-highlight-0-1-column-wide-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-4-l-highlight-0-1-column-wide-1-webkit-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-4-l-highlight-0-1-column-wide-1-webkit-linux.png new file mode 100644 index 0000000000..52042f3804 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-4-l-highlight-0-1-column-wide-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-5-l-highlight-0-2-columns-narrow-1-chromium-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-5-l-highlight-0-2-columns-narrow-1-chromium-linux.png new file mode 100644 index 0000000000..a615001673 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-5-l-highlight-0-2-columns-narrow-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-5-l-highlight-0-2-columns-narrow-1-firefox-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-5-l-highlight-0-2-columns-narrow-1-firefox-linux.png new file mode 100644 index 0000000000..1579e6ddce Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-5-l-highlight-0-2-columns-narrow-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-5-l-highlight-0-2-columns-narrow-1-webkit-linux.png b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-5-l-highlight-0-2-columns-narrow-1-webkit-linux.png new file mode 100644 index 0000000000..ac90c57365 Binary files /dev/null and b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx-snapshots/-visual-LegendTable-Verify-pairwise-5-l-highlight-0-2-columns-narrow-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-1-chromium-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-1-chromium-linux.png index 284fc581f4..3aa7183f20 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-1-chromium-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-1-firefox-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-1-firefox-linux.png index a6078f3db1..42af73c0c2 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-1-firefox-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-1-webkit-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-1-webkit-linux.png index fed1ef7318..eea3bdd1ab 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-1-webkit-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-2-chromium-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-2-chromium-linux.png index 01cf665157..14d7000ecb 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-2-chromium-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-2-firefox-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-2-firefox-linux.png index cf8b46d53b..bce28a92b7 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-2-firefox-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-2-webkit-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-2-webkit-linux.png index 4e10a5724f..77893030ca 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-2-webkit-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-state-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-1-chromium-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-1-chromium-linux.png index 0c66cdc505..db3d690e92 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-1-chromium-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-1-firefox-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-1-firefox-linux.png index 75b4302c28..3eeb3b1cbd 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-1-firefox-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-1-webkit-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-1-webkit-linux.png index e4c82e974b..6f3717c041 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-1-webkit-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-2-chromium-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-2-chromium-linux.png index 96459ea412..6c57faec69 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-2-chromium-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-2-firefox-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-2-firefox-linux.png index f1cacf21ea..8a754176da 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-2-firefox-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-2-webkit-linux.png b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-2-webkit-linux.png index f5ba05ae41..fc20e14d6c 100644 Binary files a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-2-webkit-linux.png and b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx-snapshots/-visual-Verify-empty-values-2-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 895718af99..0310dbcbe6 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 ad1025f366..546bb82785 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 7df67f51b4..d77f7034f0 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 c09ce5eded..c23adbd198 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 04757d74f0..6c37425709 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 b7a83aeb43..d98eac445e 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 4c47c84d5d..f814566e08 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 a758152190..7b17878285 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 dd63ff851e..f318751692 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 e265ef7f1f..d79be7a6ab 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 d339acf372..62eb1969ca 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 9fe67d8f48..3d0c3b0b02 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 f37d90ddb5..85d12813cb 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 cf70b34f6e..3b1b9d9c93 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 232406d82e..e460abb21b 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 27f77a8e2b..359638391c 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 43621930de..5e9511264f 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 81274cc60c..6e239501ce 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 077cef6c37..86f0657704 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 0951c482cb..ceee66a294 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 2d740c7dba..a72b0760d8 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 03cfd82996..967e731c17 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 7b393d821d..7a84f39dc4 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 cbff77ef4b..6496e53620 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 2417d1ec05..812acf5be6 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 23998ebb0b..b1c32804df 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 e8a21e807b..8628d15e41 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 1fa116d87f..0224479368 100644 --- a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx +++ b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx @@ -1,6 +1,6 @@ import type { Page } from '@semcore/testing-utils/playwright'; import { expect, test } from '@semcore/testing-utils/playwright'; -import { loadPage } from '@semcore/testing-utils/shared/helpers'; +import { expectEachToHaveAttribute, loadPage } from '@semcore/testing-utils/shared/helpers'; import { TAG } from '@semcore/testing-utils/shared/tags'; export const locators = { @@ -44,11 +44,102 @@ export const locators = { const base = page.locator('[data-ui-name="Area.Dots"]'); return typeof index === 'number' ? base.nth(index) : base; }, - legendItem: (page: Page, text?: string, index?: number) => { - const base = text ? page.getByText(text) : page.locator('[data-ui-name="LegendFlex.LegendItem"]'); - return typeof index === 'number' ? base.nth(index) : base; - }, - legendFlex: (page: Page) => page.locator('[data-ui-name="LegendFlex"]'), + /** + * The hovered tick pill is rendered by plain svg tags, so it has no data-ui-name. + * It is the only rounded rect drawn inside the plot, which makes `rect[rx]` a + * stable structural anchor that survives style and class-name changes. + */ + hoveredTick: (page: Page) => page.locator('svg[data-ui-name="Plot"] g:has(> rect[rx])'), + hoveredTickRect: (page: Page) => locators.hoveredTick(page).locator('rect'), + hoveredTickText: (page: Page) => locators.hoveredTick(page).locator('text'), + diffUp: (page: Page) => page.locator('[data-ui-name="DiffUp"]'), + diffDown: (page: Page) => page.locator('[data-ui-name="DiffDown"]'), +}; + +const HOVERED_TICK_EXAMPLE = 'stories/components/d3-chart/tests/examples/d3-chart/hovered-tick.tsx'; +const AREA_CHART_EXAMPLE = 'stories/components/d3-chart/tests/examples/area-chart/basic-usage.tsx'; +const LINE_CHART_EXAMPLE = 'stories/components/d3-chart/tests/examples/line-chart/basic-usage.tsx'; +const BAR_CHART_EXAMPLE = 'stories/components/d3-chart/tests/examples/bar-chart/basic-usage.tsx'; +const DELTA_EDGE_CASES_EXAMPLE = 'stories/components/d3-chart/tests/examples/d3-chart/tooltip-delta-edge-cases.tsx'; + +/** + * `HoverLine.Tooltip` renders the hover line as the tooltip anchor (``), + * so on a high level chart the line carries `data-ui-name="Tooltip.Trigger"` and not + * `"HoverLine"`. Only a bare `` keeps its own name. + */ +const readHoverTrigger = async (page: Page) => { + const trigger = page.locator('svg[data-ui-name="Plot"] [data-ui-name="Tooltip.Trigger"]').first(); + await expect(trigger).toBeAttached(); + + return trigger.evaluate((el) => ({ + tag: el.tagName.toLowerCase(), + lines: Array.from(el.querySelectorAll('line')).map((l) => ({ + x1: Number(l.getAttribute('x1')), + y1: Number(l.getAttribute('y1')), + x2: Number(l.getAttribute('x2')), + y2: Number(l.getAttribute('y2')), + })), + })); +}; + +/** + * Asserts every match defines the given attributes, whatever their values. + * + * Like `expectEachToHaveAttribute`, it reads one DOM snapshot instead of walking the + * collection by index. The failure lists `#index.attribute` for each miss. + */ +const expectEachToDefineAttributes = async (locator: ReturnType, attributes: string[]) => { + await expect(locator).not.toHaveCount(0); + + const missing = await locator.evaluateAll( + (elements, names) => + elements.flatMap((element, index) => + names.filter((name) => element.getAttribute(name) === null).map((name) => `#${index}.${name}`), + ), + attributes, + ); + + expect(missing).toEqual([]); +}; + +const deltaProps = { + showDeltaPercentInTooltip: true, + showTotalInTooltip: false, + // Keep the built-in value formatter, so the assertions read raw numbers. + useCustomValueFormatter: false, + duration: 0, +}; + +const hoverPlotCenter = async (page: Page) => { + const plot = locators.plot(page).first(); + await plot.waitFor({ state: 'visible' }); + + const box = await plot.boundingBox(); + if (!box) throw new Error('Bounding box not found'); + + await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2); + + return box; +}; + +/** + * Dots give the exact position of a data point, so the hovered index needs no + * coordinate math. The first 10 dots belong to the first series, one per point. + * + * The move is driven through `page.mouse` rather than `locator.hover()`: the + * neighbouring area path is painted over the dots, so hover() would fail + * Playwright's actionability check even though the chart handles the event. + */ +const hoverAreaPoint = async (page: Page, index: number, expectedTitle: string) => { + await locators.plot(page).first().waitFor({ state: 'visible' }); + + const dot = await locators.areaDots(page, index).boundingBox(); + if (!dot) throw new Error(`Bounding box not found for dot ${index}`); + + await page.mouse.move(dot.x + dot.width / 2, dot.y + dot.height / 2); + + // Guards against a silent miss: every assertion below relies on the hovered point. + await expect(page.locator('[data-ui-name="HoverLine.Tooltip.Title"]')).toHaveText(expectedTitle); }; /* ===================================================== @@ -294,90 +385,35 @@ test.describe(`${TAG.VISUAL}`, () => { }); }); - test.describe('Chart legend', () => { - const legendPropsCombinations = [ - { - description: ' size M, Checkbox shape', - size: 'm', - shape: 'Checkbox', - }, - { - description: ' size L, Checkbox shape', - size: 'l', - shape: 'Checkbox', - }, - { - description: ' size M, Circle shape', - size: 'm', - shape: 'Circle', - }, - { - description: ' size L, Circle shape', - size: 'l', - shape: 'Circle', - }, - { - description: ' size M, Square shape', - size: 'm', - shape: 'Square', - }, - { - description: ' size L, Square shape', - size: 'l', - shape: 'Square', - }, - { - description: ' size M, Line shape', - size: 'm', - shape: 'Line', - }, - { - description: ' size L, Line shape', - size: 'l', - shape: 'Line', - }, - { - description: ' size M, Pattern shape', - size: 'm', - shape: 'Pattern', - }, - { - description: ' size L, Pattern shape', - size: 'l', - shape: 'Pattern', - }, - ]; - - legendPropsCombinations.forEach((props) => { - test(`Verify legend with ${props.description}`, { - tag: [TAG.PRIORITY_MEDIUM, '@d3-chart', '@chart-legend'], + test.describe('Hovered tick', () => { + (['Line', 'Rect'] as const).forEach((hoverType) => { + test(`Verify the tick pill appears under the hovered tick for Hover${hoverType}`, { + tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@d3-chart'], }, async ({ page }) => { - await loadPage( - page, - 'stories/components/d3-chart/tests/examples/chart-legend/customizable_legend.tsx', - 'en', - props, - ); + await loadPage(page, HOVERED_TICK_EXAMPLE, 'en', { hoverType }); - await test.step('Verify legend renders correctly', async () => { - await locators.legendFlex(page).waitFor({ state: 'visible' }); - await expect(page).toHaveScreenshot(); - }); + await hoverPlotCenter(page); + + await expect(locators.hoveredTickText(page)).toHaveCount(1); + await expect(locators.hoveredTickRect(page)).toHaveCount(1); + await expect(page).toHaveScreenshot(); }); }); + }); - test('Verify custom shape as leged item', { - tag: [TAG.PRIORITY_MEDIUM, '@d3-chart', '@chart-legend'], + test.describe('Tooltip percent delta', () => { + test('Verify upward deltas render with the DiffUp icon', { + tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@d3-chart'], }, async ({ page }) => { - await loadPage(page, 'stories/components/d3-chart/docs/examples/chart-legend/custom-shape-as-legenditem.tsx', 'en'); - await expect(page).toHaveScreenshot(); - }); + await loadPage(page, AREA_CHART_EXAMPLE, 'en', deltaProps); - test('Verify leged table view', { - tag: [TAG.PRIORITY_MEDIUM, '@d3-chart', '@chart-legend', '@typography'], - }, async ({ page }) => { - await loadPage(page, 'stories/components/d3-chart/docs/examples/chart-legend/table-view.tsx', 'en'); + // Point 3: line grows by 100%, line2 by 33.3%. + await hoverAreaPoint(page, 3, 'Tuesday, January 16, 2024'); + await expect(locators.diffUp(page)).toHaveCount(2); + await expect(locators.diffDown(page)).toHaveCount(0); + await expect(page.getByText('100%', { exact: true })).toBeVisible(); + await expect(page.getByText('33.3%', { exact: true })).toBeVisible(); await expect(page).toHaveScreenshot(); }); }); @@ -499,59 +535,19 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { }); await locators.plot(page).waitFor({ state: 'visible' }); - const ticks = locators.axisTicks(page); - const ticksCount = await ticks.count(); - expect(ticksCount).toBeGreaterThan(0); - - for (let i = 0; i < ticksCount; i++) { - const tick = ticks.nth(i); - await expect(tick).toHaveAttribute('aria-hidden', 'true'); - await expect(tick).toHaveAttribute('data-ui-name', 'Axis.Ticks'); - const x = await tick.getAttribute('x'); - const y = await tick.getAttribute('y'); - expect(x).not.toBeNull(); - expect(y).not.toBeNull(); - } + // `data-ui-name` is what every locator below already selects on, so asserting it + // again would only restate the query. + await expectEachToHaveAttribute(locators.axisTicks(page), 'aria-hidden', 'true'); + await expectEachToDefineAttributes(locators.axisTicks(page), ['x', 'y']); - const axes = locators.axis(page); - const axesCount = await axes.count(); - expect(axesCount).toBeGreaterThan(0); - - for (let i = 0; i < axesCount; i++) { - const axis = axes.nth(i); - await expect(axis).toHaveAttribute('aria-hidden', 'true'); - await expect(axis).toHaveAttribute('data-ui-name', 'Axis'); - const x1 = await axis.getAttribute('x1'); - const y1 = await axis.getAttribute('y1'); - expect(x1).not.toBeNull(); - expect(y1).not.toBeNull(); - } + await expectEachToHaveAttribute(locators.axis(page), 'aria-hidden', 'true'); + await expectEachToDefineAttributes(locators.axis(page), ['x1', 'y1']); - const titles = locators.axisTitle(page); - const titleCount = await titles.count(); - expect(titleCount).toBeGreaterThan(0); - - for (let i = 0; i < titleCount; i++) { - const title = titles.nth(i); - await expect(title).toHaveAttribute('aria-hidden', 'true'); - const x = await title.getAttribute('x'); - const y = await title.getAttribute('y'); - expect(x).not.toBeNull(); - expect(y).not.toBeNull(); - } + await expectEachToHaveAttribute(locators.axisTitle(page), 'aria-hidden', 'true'); + await expectEachToDefineAttributes(locators.axisTitle(page), ['x', 'y']); - const grids = locators.axisGrid(page); - const gridCount = await grids.count(); - expect(gridCount).toBeGreaterThan(0); - - for (let i = 0; i < gridCount; i++) { - const grid = grids.nth(i); - await expect(grid).toHaveAttribute('aria-hidden', 'true'); - const x1 = await grid.getAttribute('x1'); - const y1 = await grid.getAttribute('y1'); - expect(x1).not.toBeNull(); - expect(y1).not.toBeNull(); - } + await expectEachToHaveAttribute(locators.axisGrid(page), 'aria-hidden', 'true'); + await expectEachToDefineAttributes(locators.axisGrid(page), ['x1', 'y1']); }); test('Verify yHide=true hides at least one axis via display:none', { @@ -610,11 +606,15 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { await expect(pattern).toHaveAttribute('y', '0'); } - const patternDotsCount = await page.locator('[data-ui-name="Area.Dots"][svg]').count(); - for (let i = 0; i < patternDotsCount; i++) { - const patternDot = locators.areaDots(page, i); - await expect(patternDot).toHaveAttribute('aria-hidden', 'true'); - } + // The example draws no dots at rest (`showDots` is not set), so the hovered point is + // the only one that renders. With patterns on, a dot is a `` of the pattern + // symbol rather than a circle. + await hoverPlotCenter(page); + + const patternDots = page.locator('use[data-ui-name="Area.Dots"]'); + await expect(patternDots).not.toHaveCount(0); + await expectEachToHaveAttribute(patternDots, 'aria-hidden', 'true'); + await expectEachToDefineAttributes(patternDots, ['href', 'x', 'y']); }); }); @@ -631,26 +631,635 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { const dot = locators.lineDots(page, i); const radius = await dot.getAttribute('r'); expect(radius).not.toBeNull(); - expect(Number(radius)).toBeCloseTo(4, 1); + // Default base radius, see BASE_RADIUS in Dots.jsx. + expect(Number(radius)).toBeCloseTo(3.5, 1); } }); + + test('Verify hovered dot grows to the active radius', { + tag: [TAG.PRIORITY_MEDIUM, TAG.MOUSE, '@d3-chart', '@line-chart'], + }, async ({ page }) => { + await loadPage(page, 'stories/components/d3-chart/docs/examples/d3-chart/tooltip.tsx', 'en'); + + const plot = locators.plot(page).first(); + await plot.waitFor({ state: 'visible' }); + + const box = await plot.boundingBox(); + if (!box) throw new Error('Bounding box not found'); + + await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2); + + // Exactly one dot is active at a time and it uses ACTIVE_RADIUS. + const activeDots = page.locator('[data-ui-name="Line.Dots"][r="4.5"]'); + await expect(activeDots).toHaveCount(1); + }); + + /** + * `showDots` no longer gates the dots on or off, it is forwarded as `display`: + * `showDots={false}` hides the resting dots but the hovered point is still drawn, + * while `showDots` renders every dot. Both examples below plot two series. + */ + ([ + ['Chart.Line', LINE_CHART_EXAMPLE, '[data-ui-name="Line.Dots"]'], + ['Chart.Area', AREA_CHART_EXAMPLE, '[data-ui-name="Area.Dots"]'], + ] as const).forEach(([chart, example, dotSelector]) => { + test(`Verify ${chart} keeps the hovered dot when showDots is disabled`, { + tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage(page, example, 'en', { showDots: false, duration: 0 }); + + const dots = page.locator(dotSelector); + + await test.step('No dot rests on the chart', async () => { + await locators.plot(page).first().waitFor({ state: 'visible' }); + await expect(dots).toHaveCount(0); + }); + + await test.step('Hovering reveals one dot per series', async () => { + await hoverPlotCenter(page); + + await expect(dots).toHaveCount(2); + // Only the active point is drawn, so every visible dot uses ACTIVE_RADIUS. + await expect(dots.nth(0)).toHaveAttribute('r', '4.5'); + await expect(dots.nth(1)).toHaveAttribute('r', '4.5'); + }); + }); + + test(`Verify ${chart} renders every dot when showDots is enabled`, { + tag: [TAG.PRIORITY_MEDIUM, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage(page, example, 'en', { showDots: true, duration: 0 }); + + const dots = page.locator(dotSelector); + + await locators.plot(page).first().waitFor({ state: 'visible' }); + const resting = await dots.count(); + expect(resting).toBeGreaterThan(2); + + await hoverPlotCenter(page); + + // Hovering only grows the active dot of each series, it adds none. + await expect(dots).toHaveCount(resting); + await expect(page.locator(`${dotSelector}[r="4.5"]`)).toHaveCount(2); + }); + }); }); - test.describe('Chart legend', () => { - test('Verify checkbox roles and attributes', { - tag: [TAG.PRIORITY_MEDIUM, '@d3-chart', '@chart-legend'], + test.describe('Hovered tick', () => { + (['Line', 'Rect'] as const).forEach((hoverType) => { + test(`Verify hideTickHover removes the tick pill for Hover${hoverType}`, { + tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage(page, HOVERED_TICK_EXAMPLE, 'en', { hoverType, hideTickHover: true }); + + await hoverPlotCenter(page); + + await expect(locators.hoveredTickText(page)).toHaveCount(0); + await expect(locators.hoveredTickRect(page)).toHaveCount(0); + }); + + test(`Verify the tick pill is rendered on hover for Hover${hoverType}`, { + tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage(page, HOVERED_TICK_EXAMPLE, 'en', { hoverType }); + + await hoverPlotCenter(page); + + await expect(locators.hoveredTickText(page)).toHaveCount(1); + await expect(locators.hoveredTickRect(page)).toHaveCount(1); + }); + }); + + test('Verify the tick pill stays inside the plot on the first and the last tick', { + tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@d3-chart'], }, async ({ page }) => { - await loadPage(page, 'stories/components/d3-chart/tests/examples/chart-legend/customizable_legend.tsx', 'en'); + await loadPage( + page, + HOVERED_TICK_EXAMPLE, + 'en', + { hoverType: 'Line' }, + ); + + const plot = locators.plot(page).first(); + await plot.waitFor({ state: 'visible' }); - const checkboxes = page.locator('[data-ui-name="LegendFlex.LegendItem"][shape="Checkbox"]'); - const checkboxesInputs = checkboxes.locator('input'); - const inputsCount = await checkboxesInputs.count(); - expect(inputsCount).toBeGreaterThan(0); + const plotBox = await plot.boundingBox(); + if (!plotBox) throw new Error('Bounding box not found'); - for (let i = 0; i < inputsCount; i++) { - const checkboxInput = checkboxesInputs.nth(i); - await expect(checkboxInput).toHaveAttribute('aria-invalid', 'false'); + // The story is 500px wide with a 40px margin, so the scale range is [40, 460] + // and the edge ticks sit at 8% and 92% of the plot width. + for (const [name, ratio] of [['first', 0.08], ['last', 0.92]] as const) { + await test.step(`Verify the pill on the ${name} tick`, async () => { + await page.mouse.move(plotBox.x + plotBox.width * ratio, plotBox.y + plotBox.height / 2); + + const pill = locators.hoveredTickRect(page).first(); + await expect(pill).toBeVisible(); + + const pillBox = await pill.boundingBox(); + if (!pillBox) throw new Error('Pill bounding box not found'); + + expect(pillBox.x).toBeGreaterThanOrEqual(plotBox.x - 1); + expect(pillBox.x + pillBox.width).toBeLessThanOrEqual(plotBox.x + plotBox.width + 1); + }); } }); + + test('Verify the hover line renders notch caps on both ends', { + tag: [TAG.PRIORITY_MEDIUM, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage( + page, + HOVERED_TICK_EXAMPLE, + 'en', + { hoverType: 'Line' }, + ); + + await hoverPlotCenter(page); + + const hoverLine = page.locator('g[data-ui-name="HoverLine"]'); + await expect(hoverLine).toHaveAttribute('aria-hidden', 'true'); + // Two notch caps plus the line itself. + await expect(hoverLine.locator('line')).toHaveCount(3); + }); + + /** + * Caps belong to line and area charts only. Those two build their tooltip on + * `HoverLine`, while bar-shaped charts use `HoverRect`, so the split falls out of the + * component each chart picks rather than an explicit chart-type check. + */ + ([ + ['Chart.Line', LINE_CHART_EXAMPLE], + ['Chart.Area', AREA_CHART_EXAMPLE], + ] as const).forEach(([chart, example]) => { + test(`Verify ${chart} draws the hover line with a cap on each end`, { + tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage(page, example, 'en', { duration: 0 }); + + await hoverPlotCenter(page); + + const { tag, lines } = await readHoverTrigger(page); + + expect(tag).toBe('g'); + expect(lines).toHaveLength(3); + + const [bottomCap, line, topCap] = lines; + + // The middle segment is the vertical line itself. + expect(line.x1).toBe(line.x2); + expect(line.y1).not.toBe(line.y2); + + // Each cap is horizontal and sits at one end of the line. + [bottomCap, topCap].forEach((cap) => { + expect(cap.y1).toBe(cap.y2); + expect([line.y1, line.y2]).toContain(cap.y1); + // Centred on the line, 9px wide minus the stroke, see NOTCH_WIDTH in Hover.jsx. + expect((cap.x1 + cap.x2) / 2).toBeCloseTo(line.x1, 5); + expect(cap.x2 - cap.x1).toBeCloseTo(8.5, 5); + }); + + expect(bottomCap.y1).not.toBe(topCap.y1); + }); + }); + + test('Verify Chart.Bar hovers with a rect and gets no caps', { + tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage(page, BAR_CHART_EXAMPLE, 'en', { duration: 0 }); + + await hoverPlotCenter(page); + + const { tag, lines } = await readHoverTrigger(page); + + expect(tag).toBe('rect'); + expect(lines).toHaveLength(0); + }); + + test('Verify hideHoverLine removes the hover line and the tick pill', { + tag: [TAG.PRIORITY_MEDIUM, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage( + page, + HOVERED_TICK_EXAMPLE, + 'en', + { hoverType: 'Line', hideHoverLine: true }, + ); + + await hoverPlotCenter(page); + + await expect(page.locator('g[data-ui-name="HoverLine"]')).toHaveCount(0); + await expect(locators.hoveredTickText(page)).toHaveCount(0); + }); + + test('Verify hovering the axis area below the plot keeps the tooltip open', { + tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage( + page, + HOVERED_TICK_EXAMPLE, + 'en', + { hoverType: 'Rect' }, + ); + + const plot = locators.plot(page).first(); + await plot.waitFor({ state: 'visible' }); + + const box = await plot.boundingBox(); + if (!box) throw new Error('Bounding box not found'); + + // Below the value area but still inside the plot: the tick label zone. + await page.mouse.move(box.x + box.width / 2, box.y + box.height - 20); + + await expect(locators.hoveredTickText(page)).toHaveCount(1); + }); + }); + + /** + * Percent deltas are exercised on the area chart example, whose data already + * covers every common branch relative to the previous point: + * + * index 0 -> line 2, line2 3 : no previous point, both deltas are `null` + * index 1 -> line 4, line2 3 : +100% and an unchanged value (stable) + * index 3 -> line 6, line2 4 : +100% and +33.3%, both upward + * index 6 -> line 6, line2 2 : -14.3% and -60%, both downward + */ + test.describe('Tooltip percent delta', () => { + test('Verify upward deltas render with the DiffUp icon', { + tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage(page, AREA_CHART_EXAMPLE, 'en', deltaProps); + + await hoverAreaPoint(page, 3, 'Tuesday, January 16, 2024'); + + await expect(locators.diffUp(page)).toHaveCount(2); + await expect(locators.diffDown(page)).toHaveCount(0); + await expect(page.getByText('100%', { exact: true })).toBeVisible(); + await expect(page.getByText('33.3%', { exact: true })).toBeVisible(); + }); + + test('Verify downward deltas render with the DiffDown icon', { + tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage(page, AREA_CHART_EXAMPLE, 'en', deltaProps); + + await hoverAreaPoint(page, 6, 'Wednesday, January 31, 2024'); + + await expect(locators.diffDown(page)).toHaveCount(2); + await expect(locators.diffUp(page)).toHaveCount(0); + await expect(page.getByText('-14.3%', { exact: true })).toBeVisible(); + await expect(page.getByText('-60%', { exact: true })).toBeVisible(); + }); + + /** + * The diff carries predefined styles: green for growth, red for decline and the muted + * secondary colour when nothing changed. Those come from `chart-data-success` / + * `chart-data-critical`, so the check is on the hue family rather than an exact value — + * that survives a palette tweak but still catches the two being swapped. + */ + test('Verify the diff is green upwards, red downwards and muted when stable', { + tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage(page, AREA_CHART_EXAMPLE, 'en', deltaProps); + + const readTrendColours = () => + page.locator('[class*="STooltipDeltaWrapper"]').evaluateAll((els) => + els.map((el) => ({ + trend: Array.from(el.classList).find((c) => c.includes('_trend_'))?.match(/_trend_(\w+?)_/)?.[1], + color: getComputedStyle(el).color, + })), + ); + + // Jan 16: both series grow. Jan 6: one grows, the other stays put. + await hoverAreaPoint(page, 3, 'Tuesday, January 16, 2024'); + const upward = await readTrendColours(); + + await hoverAreaPoint(page, 6, 'Wednesday, January 31, 2024'); + const downward = await readTrendColours(); + + await hoverAreaPoint(page, 1, 'Saturday, January 6, 2024'); + const stable = (await readTrendColours()).find((d) => d.trend === 'stable'); + + expect(upward.every((d) => d.trend === 'upward')).toBe(true); + expect(downward.every((d) => d.trend === 'downward')).toBe(true); + expect(stable).toBeDefined(); + + // oklch keeps the hue as the third component: ~143 is green, ~22 is red. + const hueOf = (color: string) => Number(color.match(/oklch\([\d.]+ [\d.]+ ([\d.]+)/)?.[1]); + + expect(hueOf(upward[0].color)).toBeGreaterThan(90); + expect(hueOf(upward[0].color)).toBeLessThan(200); + expect(hueOf(downward[0].color)).toBeLessThan(60); + + // A stable diff is not coloured like a trend, it uses the tooltip's secondary text. + const titleColour = await page + .locator('[data-ui-name="HoverLine.Tooltip.Title"]') + .evaluate((el) => getComputedStyle(el).color); + + expect(stable!.color).toBe(titleColour); + expect(stable!.color).not.toBe(upward[0].color); + expect(stable!.color).not.toBe(downward[0].color); + }); + + /** + * Pins the behaviour of the awkward inputs, all read off the edge-case example. + * None of these is a crash, but two of them are judgement calls worth noticing if + * they ever change: a sub-0.05% move collapses into a stable "0", and a negative + * baseline turns growth into a red decline because the formula divides by it. + */ + test('Verify how the diff handles extreme and awkward values', { + tag: [TAG.PRIORITY_MEDIUM, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage(page, DELTA_EDGE_CASES_EXAMPLE, 'en', {}); + + const plot = locators.plot(page).first(); + await plot.waitFor({ state: 'visible' }); + + const box = await plot.boundingBox(); + if (!box) throw new Error('Bounding box not found'); + + // The example has two bands, the second one carries every case. + await page.mouse.move(box.x + box.width * 0.72, box.y + box.height / 2); + await expect(page.locator('[data-ui-name="HoverRect.Tooltip.Title"]')).toHaveText('after'); + + const rows = await page + .locator('[class*="STooltipChildrenWrapper"]') + .first() + .evaluate((el) => + Array.from(el.children).map((c) => ({ + text: c.textContent ?? '', + trend: Array.from(c.classList).find((x) => x.includes('_trend_'))?.match(/_trend_(\w+?)_/)?.[1] ?? null, + })), + ); + + const diffAfter = (label: string) => { + const at = rows.findIndex((c) => c.text === label); + expect(at, `series "${label}" not found`).toBeGreaterThan(-1); + return rows[at + 2]; + }; + + await test.step('Growth beyond 100% keeps its full value', async () => { + expect(diffAfter('overHundred')).toMatchObject({ text: '400%', trend: 'upward' }); + expect(diffAfter('huge')).toMatchObject({ text: '9900%', trend: 'upward' }); + }); + + await test.step('Fractions keep one decimal place', async () => { + expect(diffAfter('fraction')).toMatchObject({ text: '0.5%', trend: 'upward' }); + }); + + await test.step('A move below 0.05% collapses into a stable zero', async () => { + // 10000 -> 10004 is +0.04%, which rounds away and reads as no change at all. + // A stable delta still carries the percent sign, it just loses the icon. + expect(diffAfter('roundsToZero')).toMatchObject({ text: '0%', trend: 'stable' }); + }); + + await test.step('A negative baseline keeps the sign of the actual move', async () => { + // -10 -> -5 is an improvement, and dividing by |prev| keeps it a green +50% + // instead of flipping it into a red decline. + expect(diffAfter('negativeBase')).toMatchObject({ text: '50%', trend: 'upward' }); + }); + }); + + test('Verify an unchanged value renders a stable delta without an icon', { + tag: [TAG.PRIORITY_MEDIUM, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage(page, AREA_CHART_EXAMPLE, 'en', deltaProps); + + // line grows by 100%, line2 stays at 3. + await hoverAreaPoint(page, 1, 'Saturday, January 6, 2024'); + + await expect(locators.diffUp(page)).toHaveCount(1); + await expect(locators.diffDown(page)).toHaveCount(0); + }); + + test('Verify the first data point renders no delta column', { + tag: [TAG.PRIORITY_MEDIUM, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage(page, AREA_CHART_EXAMPLE, 'en', deltaProps); + + await hoverAreaPoint(page, 0, 'Monday, January 1, 2024'); + + await expect(locators.diffUp(page).or(locators.diffDown(page))).toHaveCount(0); + }); + + /** + * A single resolvable delta switches the tooltip to three columns, so every row has + * to fill all three even when its own delta is null: `renderTooltipPercentDelta` + * emits an empty wrapper for the `unknown` trend, which keeps the cell count a whole + * number of rows and stops CSS Grid from pulling the next label into the hole. + * + * With `withZeroValue` the `line` series has no delta on Jan 16 (its previous value + * is 0) while `line2` does, which is exactly the mixed case that would break. + */ + test('Verify rows stay aligned when only some series have a delta', { + tag: [TAG.PRIORITY_MEDIUM, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage(page, AREA_CHART_EXAMPLE, 'en', { ...deltaProps, withZeroValue: true }); + + await hoverAreaPoint(page, 3, 'Tuesday, January 16, 2024'); + + const grid = await page + .locator('[class*="STooltipChildrenWrapper"]') + .first() + .evaluate((el) => { + const columns = getComputedStyle(el).gridTemplateColumns.split(' ').length; + const cells = Array.from(el.children).map((c) => ({ + text: c.textContent ?? '', + x: Math.round(c.getBoundingClientRect().x), + })); + const firstColumnX = Math.min(...cells.map((c) => c.x)); + + return { + columns, + cellCount: cells.length, + // Series labels are the only cells that may sit in the leftmost column. + firstColumnTexts: cells.filter((c) => c.x === firstColumnX).map((c) => c.text), + }; + }); + + expect(grid.columns).toBe(3); + // A partially filled row would leave a hole, and the cell count would stop being a + // whole number of rows with everything after it shifted one column to the left. + expect(grid.cellCount % grid.columns).toBe(0); + // Both series labels must still start their own row. + expect(grid.firstColumnTexts).toEqual(['line', 'line2']); + }); + + test('Verify no delta is rendered when showDeltaPercentInTooltip is off', { + tag: [TAG.PRIORITY_MEDIUM, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage(page, AREA_CHART_EXAMPLE, 'en', { + ...deltaProps, + showDeltaPercentInTooltip: false, + }); + + await hoverAreaPoint(page, 3, 'Tuesday, January 16, 2024'); + + await expect(locators.diffUp(page).or(locators.diffDown(page))).toHaveCount(0); + }); + }); + + /** + * The pill under the hovered position highlights the X-axis value of that point. It is + * driven by the data rather than by the rendered axis, so it also appears for points the + * axis does not label, and both hover flavours get it: `HoverLine` on line/area charts + * and `HoverRect` on bar-shaped ones. + */ + test.describe('Hovered tick value', () => { + /** + * Labels of the X axis only. Each tick is its own `Axis.Ticks` element and the axis it + * belongs to shows up as a position modifier in its generated class, so the vertical + * axis (`_position_left`) has to be filtered out — its labels are numbers too and + * would otherwise be mistaken for X values. + */ + const readXAxisLabels = (page: Page) => + page + .locator('[data-ui-name="Axis.Ticks"][class*="_position_bottom"]') + .evaluateAll((els) => els.map((e) => e.textContent)); + + const hoverDot = async (page: Page, selector: string, index: number) => { + await locators.plot(page).first().waitFor({ state: 'visible' }); + + const dot = await page.locator(selector).nth(index).boundingBox(); + if (!dot) throw new Error(`Bounding box not found for dot ${index}`); + + await page.mouse.move(dot.x + dot.width / 2, dot.y + dot.height / 2); + }; + + test('Verify HoverLine highlights a value the axis does not label', { + tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage(page, LINE_CHART_EXAMPLE, 'en', { duration: 0 }); + + // The example plots x = 0..19 but the axis only labels every second value. + await hoverDot(page, '[data-ui-name="Line.Dots"]', 7); + + await expect(locators.hoveredTickText(page)).toHaveText('7'); + + const labels = await readXAxisLabels(page); + expect(labels).not.toContain('7'); + }); + + test('Verify HoverLine formats the value the same way the axis does', { + tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage(page, AREA_CHART_EXAMPLE, 'en', { duration: 0 }); + + // Jan 21 is both a data point and an axis label, so the two have to agree. + await hoverDot(page, '[data-ui-name="Area.Dots"]', 4); + + await expect(locators.hoveredTickText(page)).toHaveText('1/21/2024'); + + const labels = await readXAxisLabels(page); + expect(labels).toContain('1/21/2024'); + }); + + test('Verify HoverRect highlights the hovered category', { + tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage(page, BAR_CHART_EXAMPLE, 'en', { duration: 0 }); + + await hoverPlotCenter(page); + + // Bar charts hover through HoverRect, which has to highlight the tick all the same. + await expect(page.locator('[data-ui-name="Tooltip.Trigger"]').first()).toHaveJSProperty('tagName', 'rect'); + await expect(locators.hoveredTickText(page)).toHaveText('Category 2'); + }); + }); + + /** + * The tooltip is inverted, and `chart-palette-order-1` is a dark neutral that matches + * its background, so the 1px ring is the only thing separating the two. The unit tests + * cover which offset each colour is given; these check the other half of the chain — + * that the rule applies and the relative colour actually resolves in the browser. + */ + test.describe('Tooltip dot ring', () => { + const readDotRings = (page: Page) => + page.locator('[class*="SDotCircle"]').evaluateAll((els) => + els.map((el) => { + const cs = getComputedStyle(el); + const lightnessOf = (color: string) => Number(color.match(/oklch\(([\d.]+)/)?.[1]); + + return { + background: cs.backgroundColor, + shadow: cs.boxShadow, + // How much lighter the ring is than the dot it surrounds. + offset: lightnessOf(cs.boxShadow) - lightnessOf(cs.backgroundColor), + }; + }), + ); + + test('Verify each dot is ringed by a lighter shade of its own colour', { + tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage(page, LINE_CHART_EXAMPLE, 'en', { duration: 0 }); + + await hoverPlotCenter(page); + await expect(page.locator('[class*="SDotCircle"]')).toHaveCount(2); + + const rings = await readDotRings(page); + + rings.forEach((ring) => { + // A dropped rule or an unsupported relative colour would leave no shadow at all. + expect(ring.shadow).toContain('0px 0px 0px 1px'); + expect(ring.shadow).not.toBe('none'); + }); + + // chart-palette-order-1 is the dark one and gets the stronger offset. + expect(rings[0].offset).toBeCloseTo(0.35, 2); + expect(rings[1].offset).toBeCloseTo(0.15, 2); + }); + }); + + test.describe('Tooltip default formatting', () => { + test('Verify a Date group key is formatted through Intl for the given locale', { + tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage( + page, + 'stories/components/d3-chart/tests/examples/d3-chart/tooltip-default-format.tsx', + 'en', + { locale: 'de' }, + ); + + const plot = locators.plot(page).first(); + await plot.waitFor({ state: 'visible' }); + + const box = await plot.boundingBox(); + if (!box) throw new Error('Bounding box not found'); + + await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2); + + // Exact text: the weekday and the full month name both have to be there. + await expect(page.locator('[data-ui-name="HoverLine.Tooltip.Title"]')).toHaveText( + 'Freitag, 15. März 2024', + ); + }); + + test('Verify the default date carries the full weekday and month and no time', { + tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@d3-chart'], + }, async ({ page }) => { + await loadPage( + page, + 'stories/components/d3-chart/tests/examples/d3-chart/tooltip-default-format.tsx', + 'en', + ); + + const plot = locators.plot(page).first(); + await plot.waitFor({ state: 'visible' }); + + const box = await plot.boundingBox(); + if (!box) throw new Error('Bounding box not found'); + + await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2); + + const title = page.locator('[data-ui-name="HoverLine.Tooltip.Title"]'); + await expect(title).toHaveText('Friday, March 15, 2024'); + + const text = (await title.textContent()) ?? ''; + // A numeric date (3/15/2024) or a leftover clock (00:00) would both mean the + // long, time-less format was dropped. + expect(text).not.toMatch(/\d+\/\d+\/\d+/); + expect(text).not.toMatch(/\d{1,2}:\d{2}/); + }); }); }); diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-1-chromium-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-1-chromium-linux.png index 9a921a14eb..b481c65cf2 100644 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-1-chromium-linux.png and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-1-firefox-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-1-firefox-linux.png index 6fa7f51241..01859436df 100644 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-1-firefox-linux.png and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-1-webkit-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-1-webkit-linux.png index d522f290fb..71f983690f 100644 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-1-webkit-linux.png and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-2-chromium-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-2-chromium-linux.png index 8d8efc86eb..8b9f745837 100644 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-2-chromium-linux.png and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-2-firefox-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-2-firefox-linux.png index 9d36f93471..9b12be96b8 100644 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-2-firefox-linux.png and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-2-webkit-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-2-webkit-linux.png index 21d52e1550..15b379e19f 100644 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-2-webkit-linux.png and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Adaptive-chart-Verify-chart-looks-good-on-small-resolutions-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-leged-table-view-1-chromium-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-leged-table-view-1-chromium-linux.png deleted file mode 100644 index 6d234e9201..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-leged-table-view-1-chromium-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-leged-table-view-1-firefox-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-leged-table-view-1-firefox-linux.png deleted file mode 100644 index a642b2e55d..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-leged-table-view-1-firefox-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-leged-table-view-1-webkit-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-leged-table-view-1-webkit-linux.png deleted file mode 100644 index 2885633e21..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-leged-table-view-1-webkit-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Checkbox-shape-1-chromium-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Checkbox-shape-1-chromium-linux.png deleted file mode 100644 index dba3a019d9..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Checkbox-shape-1-chromium-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Checkbox-shape-1-firefox-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Checkbox-shape-1-firefox-linux.png deleted file mode 100644 index ba83f22489..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Checkbox-shape-1-firefox-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Checkbox-shape-1-webkit-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Checkbox-shape-1-webkit-linux.png deleted file mode 100644 index dbf393b035..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Checkbox-shape-1-webkit-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Circle-shape-1-chromium-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Circle-shape-1-chromium-linux.png deleted file mode 100644 index 511e043cf8..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Circle-shape-1-chromium-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Circle-shape-1-firefox-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Circle-shape-1-firefox-linux.png deleted file mode 100644 index 2d1d65807b..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Circle-shape-1-firefox-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Circle-shape-1-webkit-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Circle-shape-1-webkit-linux.png deleted file mode 100644 index 6170b4912f..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Circle-shape-1-webkit-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Line-shape-1-chromium-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Line-shape-1-chromium-linux.png deleted file mode 100644 index bd7cba2594..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Line-shape-1-chromium-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Line-shape-1-firefox-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Line-shape-1-firefox-linux.png deleted file mode 100644 index 71a08245e7..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Line-shape-1-firefox-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Line-shape-1-webkit-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Line-shape-1-webkit-linux.png deleted file mode 100644 index 52706983f2..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Line-shape-1-webkit-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Pattern-shape-1-chromium-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Pattern-shape-1-chromium-linux.png deleted file mode 100644 index f9322a7968..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Pattern-shape-1-chromium-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Pattern-shape-1-firefox-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Pattern-shape-1-firefox-linux.png deleted file mode 100644 index b8eefa900b..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Pattern-shape-1-firefox-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Pattern-shape-1-webkit-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Pattern-shape-1-webkit-linux.png deleted file mode 100644 index 4bcaaf31e7..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Pattern-shape-1-webkit-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Square-shape-1-chromium-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Square-shape-1-chromium-linux.png deleted file mode 100644 index e5aa86acfa..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Square-shape-1-chromium-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Square-shape-1-firefox-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Square-shape-1-firefox-linux.png deleted file mode 100644 index c2caf34017..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Square-shape-1-firefox-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Square-shape-1-webkit-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Square-shape-1-webkit-linux.png deleted file mode 100644 index 646acfd13a..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-L-Square-shape-1-webkit-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Checkbox-shape-1-chromium-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Checkbox-shape-1-chromium-linux.png deleted file mode 100644 index 0751d53d08..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Checkbox-shape-1-chromium-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Checkbox-shape-1-firefox-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Checkbox-shape-1-firefox-linux.png deleted file mode 100644 index 60488efa78..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Checkbox-shape-1-firefox-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Checkbox-shape-1-webkit-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Checkbox-shape-1-webkit-linux.png deleted file mode 100644 index 03cdbc6709..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Checkbox-shape-1-webkit-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Circle-shape-1-chromium-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Circle-shape-1-chromium-linux.png deleted file mode 100644 index 12827020b9..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Circle-shape-1-chromium-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Circle-shape-1-firefox-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Circle-shape-1-firefox-linux.png deleted file mode 100644 index 16ea9f1ee5..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Circle-shape-1-firefox-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Circle-shape-1-webkit-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Circle-shape-1-webkit-linux.png deleted file mode 100644 index 7701fb7116..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Circle-shape-1-webkit-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Line-shape-1-chromium-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Line-shape-1-chromium-linux.png deleted file mode 100644 index 189b029a82..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Line-shape-1-chromium-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Line-shape-1-firefox-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Line-shape-1-firefox-linux.png deleted file mode 100644 index 37b9ca1350..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Line-shape-1-firefox-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Line-shape-1-webkit-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Line-shape-1-webkit-linux.png deleted file mode 100644 index b5a4a78e9d..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Line-shape-1-webkit-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Pattern-shape-1-chromium-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Pattern-shape-1-chromium-linux.png deleted file mode 100644 index 01000ae61e..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Pattern-shape-1-chromium-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Pattern-shape-1-firefox-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Pattern-shape-1-firefox-linux.png deleted file mode 100644 index 825ff00c77..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Pattern-shape-1-firefox-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Pattern-shape-1-webkit-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Pattern-shape-1-webkit-linux.png deleted file mode 100644 index 5edccee364..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Pattern-shape-1-webkit-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Square-shape-1-chromium-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Square-shape-1-chromium-linux.png deleted file mode 100644 index 350d65d0ec..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Square-shape-1-chromium-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Square-shape-1-firefox-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Square-shape-1-firefox-linux.png deleted file mode 100644 index 14f598af9f..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Square-shape-1-firefox-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Square-shape-1-webkit-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Square-shape-1-webkit-linux.png deleted file mode 100644 index 016a2a40f8..0000000000 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Chart-legend-Verify-legend-with-size-M-Square-shape-1-webkit-linux.png and /dev/null differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-Tooltip-controlled-appearing-1-chromium-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-Tooltip-controlled-appearing-1-chromium-linux.png index db1dbd8f6d..8ece0499f7 100644 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-Tooltip-controlled-appearing-1-chromium-linux.png and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-Tooltip-controlled-appearing-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-Tooltip-controlled-appearing-1-firefox-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-Tooltip-controlled-appearing-1-firefox-linux.png index 64838c2480..ad04ca18f8 100644 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-Tooltip-controlled-appearing-1-firefox-linux.png and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-Tooltip-controlled-appearing-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-Tooltip-controlled-appearing-1-webkit-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-Tooltip-controlled-appearing-1-webkit-linux.png index fe29d1bd99..9d9d4f8829 100644 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-Tooltip-controlled-appearing-1-webkit-linux.png and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-Tooltip-controlled-appearing-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-synscronous-charts-by-EventEmitter-1-chromium-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-synscronous-charts-by-EventEmitter-1-chromium-linux.png index 39fc860cc4..9b2f54cba0 100644 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-synscronous-charts-by-EventEmitter-1-chromium-linux.png and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-synscronous-charts-by-EventEmitter-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-synscronous-charts-by-EventEmitter-1-firefox-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-synscronous-charts-by-EventEmitter-1-firefox-linux.png index 9822392516..41e9fd6f98 100644 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-synscronous-charts-by-EventEmitter-1-firefox-linux.png and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-synscronous-charts-by-EventEmitter-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-synscronous-charts-by-EventEmitter-1-webkit-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-synscronous-charts-by-EventEmitter-1-webkit-linux.png index 3778e92853..b761fbfb57 100644 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-synscronous-charts-by-EventEmitter-1-webkit-linux.png and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hover-Line-and-Tooltip-Verify-synscronous-charts-by-EventEmitter-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hovered-tick-Verify-the-tick-pill-appears-under-the-hovered-tick-for-HoverLine-1-chromium-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hovered-tick-Verify-the-tick-pill-appears-under-the-hovered-tick-for-HoverLine-1-chromium-linux.png new file mode 100644 index 0000000000..1ca0dcbf57 Binary files /dev/null and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hovered-tick-Verify-the-tick-pill-appears-under-the-hovered-tick-for-HoverLine-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hovered-tick-Verify-the-tick-pill-appears-under-the-hovered-tick-for-HoverLine-1-firefox-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hovered-tick-Verify-the-tick-pill-appears-under-the-hovered-tick-for-HoverLine-1-firefox-linux.png new file mode 100644 index 0000000000..aa8cf79b8c Binary files /dev/null and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hovered-tick-Verify-the-tick-pill-appears-under-the-hovered-tick-for-HoverLine-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hovered-tick-Verify-the-tick-pill-appears-under-the-hovered-tick-for-HoverLine-1-webkit-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hovered-tick-Verify-the-tick-pill-appears-under-the-hovered-tick-for-HoverLine-1-webkit-linux.png new file mode 100644 index 0000000000..fb6b2f039f Binary files /dev/null and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hovered-tick-Verify-the-tick-pill-appears-under-the-hovered-tick-for-HoverLine-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hovered-tick-Verify-the-tick-pill-appears-under-the-hovered-tick-for-HoverRect-1-chromium-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hovered-tick-Verify-the-tick-pill-appears-under-the-hovered-tick-for-HoverRect-1-chromium-linux.png new file mode 100644 index 0000000000..d78bf4e221 Binary files /dev/null and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hovered-tick-Verify-the-tick-pill-appears-under-the-hovered-tick-for-HoverRect-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hovered-tick-Verify-the-tick-pill-appears-under-the-hovered-tick-for-HoverRect-1-firefox-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hovered-tick-Verify-the-tick-pill-appears-under-the-hovered-tick-for-HoverRect-1-firefox-linux.png new file mode 100644 index 0000000000..5fc1fab57b Binary files /dev/null and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hovered-tick-Verify-the-tick-pill-appears-under-the-hovered-tick-for-HoverRect-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hovered-tick-Verify-the-tick-pill-appears-under-the-hovered-tick-for-HoverRect-1-webkit-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hovered-tick-Verify-the-tick-pill-appears-under-the-hovered-tick-for-HoverRect-1-webkit-linux.png new file mode 100644 index 0000000000..0d599da398 Binary files /dev/null and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Hovered-tick-Verify-the-tick-pill-appears-under-the-hovered-tick-for-HoverRect-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Pattern-fills-dots-and-lines-Verify-enforcing-patterns-1-chromium-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Pattern-fills-dots-and-lines-Verify-enforcing-patterns-1-chromium-linux.png index 98cfe30921..5e61d64bc2 100644 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Pattern-fills-dots-and-lines-Verify-enforcing-patterns-1-chromium-linux.png and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Pattern-fills-dots-and-lines-Verify-enforcing-patterns-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Pattern-fills-dots-and-lines-Verify-enforcing-patterns-1-firefox-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Pattern-fills-dots-and-lines-Verify-enforcing-patterns-1-firefox-linux.png index 0b49086a7a..952cb66e74 100644 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Pattern-fills-dots-and-lines-Verify-enforcing-patterns-1-firefox-linux.png and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Pattern-fills-dots-and-lines-Verify-enforcing-patterns-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Pattern-fills-dots-and-lines-Verify-enforcing-patterns-1-webkit-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Pattern-fills-dots-and-lines-Verify-enforcing-patterns-1-webkit-linux.png index 6608c9bae3..48aed1e851 100644 Binary files a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Pattern-fills-dots-and-lines-Verify-enforcing-patterns-1-webkit-linux.png and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Pattern-fills-dots-and-lines-Verify-enforcing-patterns-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Tooltip-percent-delta-Verify-upward-deltas-render-with-the-DiffUp-icon-1-chromium-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Tooltip-percent-delta-Verify-upward-deltas-render-with-the-DiffUp-icon-1-chromium-linux.png new file mode 100644 index 0000000000..139efcc32b Binary files /dev/null and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Tooltip-percent-delta-Verify-upward-deltas-render-with-the-DiffUp-icon-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Tooltip-percent-delta-Verify-upward-deltas-render-with-the-DiffUp-icon-1-firefox-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Tooltip-percent-delta-Verify-upward-deltas-render-with-the-DiffUp-icon-1-firefox-linux.png new file mode 100644 index 0000000000..ee0109ea64 Binary files /dev/null and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Tooltip-percent-delta-Verify-upward-deltas-render-with-the-DiffUp-icon-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Tooltip-percent-delta-Verify-upward-deltas-render-with-the-DiffUp-icon-1-webkit-linux.png b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Tooltip-percent-delta-Verify-upward-deltas-render-with-the-DiffUp-icon-1-webkit-linux.png new file mode 100644 index 0000000000..17bc99bdc1 Binary files /dev/null and b/semcore/d3-chart/__tests__/d3-chart-base.browser-test.tsx-snapshots/-visual-Tooltip-percent-delta-Verify-upward-deltas-render-with-the-DiffUp-icon-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx index c6a1d9879a..d41f7ce500 100644 --- a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx +++ b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx @@ -1,6 +1,6 @@ import type { Page } from '@semcore/testing-utils/playwright'; import { expect, test } from '@semcore/testing-utils/playwright'; -import { loadPage } from '@semcore/testing-utils/shared/helpers'; +import { expectEachToHaveAttribute, loadPage } from '@semcore/testing-utils/shared/helpers'; import { TAG } from '@semcore/testing-utils/shared/tags'; export const locators = { @@ -230,13 +230,8 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { await test.step('Verify pies have aria-hidden attribute in basic usage', async () => { await loadPage(page, 'stories/components/d3-chart/docs/examples/donut-chart/basic-usage.tsx', 'en'); await locators.plot(page).waitFor({ state: 'visible' }); - const pies = locators.pie(page); - const count = await pies.count(); - for (let i = 0; i < count; i++) { - const pie = pies.nth(i); - await expect(pie).toHaveAttribute('aria-hidden', 'true'); - } + await expectEachToHaveAttribute(locators.pie(page), 'aria-hidden', 'true'); }); await test.step('Verify pies and labels have aria-hidden attribute', async () => { @@ -246,19 +241,8 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { }); await locators.plot(page).waitFor({ state: 'visible' }); - const pies = locators.pie(page); - const pieCount = await pies.count(); - for (let i = 0; i < pieCount; i++) { - const pie = pies.nth(i); - await expect(pie).toHaveAttribute('aria-hidden', 'true'); - } - - const labels = locators.label(page); - const labelCount = await labels.count(); - for (let i = 0; i < labelCount; i++) { - const label = labels.nth(i); - await expect(label).toHaveAttribute('aria-hidden', 'true'); - } + await expectEachToHaveAttribute(locators.pie(page), 'aria-hidden', 'true'); + await expectEachToHaveAttribute(locators.label(page), 'aria-hidden', 'true'); }); }); diff --git a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Custom-radius-inner-and-outer-radius-variations-2-chromium-linux.png b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Custom-radius-inner-and-outer-radius-variations-2-chromium-linux.png index 6684687ae0..e072453ca3 100644 Binary files a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Custom-radius-inner-and-outer-radius-variations-2-chromium-linux.png and b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Custom-radius-inner-and-outer-radius-variations-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Custom-radius-inner-and-outer-radius-variations-2-firefox-linux.png b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Custom-radius-inner-and-outer-radius-variations-2-firefox-linux.png index 1cb62cefd2..5899fa61d9 100644 Binary files a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Custom-radius-inner-and-outer-radius-variations-2-firefox-linux.png and b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Custom-radius-inner-and-outer-radius-variations-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Custom-radius-inner-and-outer-radius-variations-2-webkit-linux.png b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Custom-radius-inner-and-outer-radius-variations-2-webkit-linux.png index f37c842dc7..80944bc23a 100644 Binary files a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Custom-radius-inner-and-outer-radius-variations-2-webkit-linux.png and b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Custom-radius-inner-and-outer-radius-variations-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Standard-default-with-tooltip-and-label-2-chromium-linux.png b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Standard-default-with-tooltip-and-label-2-chromium-linux.png index 7fe1e68150..45fc34555c 100644 Binary files a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Standard-default-with-tooltip-and-label-2-chromium-linux.png and b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Standard-default-with-tooltip-and-label-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Standard-default-with-tooltip-and-label-2-firefox-linux.png b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Standard-default-with-tooltip-and-label-2-firefox-linux.png index b85c9ce302..2487c7bb00 100644 Binary files a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Standard-default-with-tooltip-and-label-2-firefox-linux.png and b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Standard-default-with-tooltip-and-label-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Standard-default-with-tooltip-and-label-2-webkit-linux.png b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Standard-default-with-tooltip-and-label-2-webkit-linux.png index 87c2e254b0..3c3736fa2e 100644 Binary files a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Standard-default-with-tooltip-and-label-2-webkit-linux.png and b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-donut-chart-Standard-default-with-tooltip-and-label-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Custom-radius-innerRadius-and-paddingAngle-2-chromium-linux.png b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Custom-radius-innerRadius-and-paddingAngle-2-chromium-linux.png index 36fabf51da..b82c9a481b 100644 Binary files a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Custom-radius-innerRadius-and-paddingAngle-2-chromium-linux.png and b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Custom-radius-innerRadius-and-paddingAngle-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Custom-radius-innerRadius-and-paddingAngle-2-firefox-linux.png b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Custom-radius-innerRadius-and-paddingAngle-2-firefox-linux.png index e3629c5ca4..0a8fee5a7f 100644 Binary files a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Custom-radius-innerRadius-and-paddingAngle-2-firefox-linux.png and b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Custom-radius-innerRadius-and-paddingAngle-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Custom-radius-innerRadius-and-paddingAngle-2-webkit-linux.png b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Custom-radius-innerRadius-and-paddingAngle-2-webkit-linux.png index 8a2189eb3d..5c398dcc84 100644 Binary files a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Custom-radius-innerRadius-and-paddingAngle-2-webkit-linux.png and b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Custom-radius-innerRadius-and-paddingAngle-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Standard-halfsize-with-tooltip-and-label-2-chromium-linux.png b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Standard-halfsize-with-tooltip-and-label-2-chromium-linux.png index c55584900f..d40c03580e 100644 Binary files a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Standard-halfsize-with-tooltip-and-label-2-chromium-linux.png and b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Standard-halfsize-with-tooltip-and-label-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Standard-halfsize-with-tooltip-and-label-2-firefox-linux.png b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Standard-halfsize-with-tooltip-and-label-2-firefox-linux.png index e9fc239504..1d3c08ce54 100644 Binary files a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Standard-halfsize-with-tooltip-and-label-2-firefox-linux.png and b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Standard-halfsize-with-tooltip-and-label-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Standard-halfsize-with-tooltip-and-label-2-webkit-linux.png b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Standard-halfsize-with-tooltip-and-label-2-webkit-linux.png index 96aab464e6..46f1013c0b 100644 Binary files a/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Standard-halfsize-with-tooltip-and-label-2-webkit-linux.png and b/semcore/d3-chart/__tests__/donut-chart.browser-test.tsx-snapshots/-visual-Verify-semi-donut-Standard-halfsize-with-tooltip-and-label-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/index.test.tsx b/semcore/d3-chart/__tests__/index.test.tsx index d766dee664..0bb93a6a02 100644 --- a/semcore/d3-chart/__tests__/index.test.tsx +++ b/semcore/d3-chart/__tests__/index.test.tsx @@ -1,3 +1,4 @@ +import { I18nProvider } from '@semcore/core/lib/utils/enhances/WithI18n'; import Icon from '@semcore/icon/Video/m'; import { runDependencyCheckTests } from '@semcore/testing-utils/shared-tests'; import { render, fireEvent, cleanup, queryAllByAttribute, queryByAttribute, userEvent } from '@semcore/testing-utils/testing-library'; @@ -12,10 +13,12 @@ import { makeDataHintsContainer, Chart, ChartLegend, + HoverLine, // @ts-ignore } from '../src'; import { PlotA11yView } from '../src/a11y/PlotA11yView'; import { getIndexFromData } from '../src/utils'; +import { TextMeasurer } from '../src/utils/TextMeasurer'; const width = 500; const height = 500; @@ -137,8 +140,9 @@ describe('YAxis', () => { test( 'Should support call children function for Ticks how many ticks are passed', () => { - /* It's called 4 times since after the initial render, re-render is triggered to have an access to rootRef to calculate multiline lines */ - expect.assertions(4); + /* Called once per tick. Measuring multiline ticks no longer needs a rootRef, + so the extra re-render after the initial render is gone. */ + expect.assertions(2); render( @@ -813,3 +817,619 @@ describe('ChartLegend', () => { expect(onChangeHandler).toHaveBeenCalledTimes(3); }); }); + +describe('TextMeasurer', () => { + test('should measure text and reuse the cached result for the same text and font size', () => { + const measurer = new TextMeasurer(); + const appendSpy = vi.spyOn(document.body, 'appendChild'); + + const first = measurer.measure('Capybara'); + const second = measurer.measure('Capybara'); + + expect(second).toBe(first); + expect(appendSpy).toHaveBeenCalledTimes(1); + + measurer.measure('Capybara', 16); + expect(appendSpy).toHaveBeenCalledTimes(2); + + measurer.measure('Another label'); + expect(appendSpy).toHaveBeenCalledTimes(3); + + appendSpy.mockRestore(); + }); + + test('should not leave the temporary svg node in the document', () => { + const measurer = new TextMeasurer(); + const before = document.body.childElementCount; + + measurer.measure('Some tick label'); + + expect(document.body.childElementCount).toBe(before); + }); +}); + +/** + * `showDeltaPercentInTooltip` renders a third tooltip column with the percentage + * change relative to the previous data point. + * + * The data below is shaped so that every branch of `getPercentDelta` is reachable + * by hovering a specific bar (the chart is 500px wide and has 5 categories, so + * each band is ~100px): + * + * x=60 -> Point 0: no previous point, both deltas are `null` + * x=150 -> Point 1: `first` grows (+50%), `second` declines (-50%) + * x=250 -> Point 2: both values unchanged -> delta `0` + * x=350 -> Point 3: `first` drops to 0 (-100%), `second` grows (+20%) + * x=440 -> Point 4: previous `first` is 0 -> `null`, `second` unchanged -> `0` + */ +describe('Chart tooltip percent delta', () => { + const deltaData = [ + { category: 'Point 0', first: 100, second: 50 }, + { category: 'Point 1', first: 150, second: 25 }, + { category: 'Point 2', first: 150, second: 25 }, + { category: 'Point 3', first: 0, second: 30 }, + { category: 'Point 4', first: 75, second: 30 }, + ]; + + let rafSpy: ReturnType; + + beforeEach(() => { + cleanup(); + rafSpy = vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => (cb as any)()); + }); + + afterEach(() => { + rafSpy.mockRestore(); + }); + + const hoverBarChart = (clientX: number, props: Record = {}) => { + const { container } = render( + , + ); + + const plot = container.querySelector('svg[data-ui-name="Plot"]'); + expect(plot).not.toBeNull(); + + // Keep fireEvent: the hovered index is resolved from explicit SVG coordinates. + fireEvent.mouseMove(plot!, { clientX, clientY: 150 }); + + const tooltip = document.querySelector('[data-ui-name="HoverRect.Tooltip"]'); + expect(tooltip).not.toBeNull(); + + return tooltip!; + }; + + const getTitle = (tooltip: Element) => + tooltip.querySelector('[data-ui-name="HoverRect.Tooltip.Title"]')?.textContent; + + const getChildrenWrapper = (tooltip: Element) => + tooltip.querySelector('[class*="STooltipChildrenWrapper"]')!; + + const getColumnsCount = (tooltip: Element) => + Array.from(getChildrenWrapper(tooltip).classList) + .find((className) => className.includes('columnsCount')) + ?.match(/columnsCount_(\d)/)?.[1]; + + const getDeltas = (tooltip: Element) => + Array.from(tooltip.querySelectorAll('[class*="STooltipDeltaWrapper"]')).map((node) => ({ + trend: Array.from(node.classList) + .find((className) => className.includes('_trend_')) + ?.match(/_trend_(\w+?)_/)?.[1], + text: node.textContent, + icon: node.querySelector('svg')?.getAttribute('data-ui-name') ?? null, + })); + + test('should not render delta cells for the first data point and fall back to two columns', () => { + const tooltip = hoverBarChart(60); + + expect(getTitle(tooltip)).toBe('Point 0'); + expect(getColumnsCount(tooltip)).toBe('2'); + expect(getDeltas(tooltip)).toHaveLength(0); + }); + + test('should render upward and downward deltas with the matching icon and sign', () => { + const tooltip = hoverBarChart(150); + + expect(getTitle(tooltip)).toBe('Point 1'); + expect(getColumnsCount(tooltip)).toBe('3'); + expect(getDeltas(tooltip)).toEqual([ + { trend: 'upward', text: '50%', icon: 'DiffUp' }, + { trend: 'downward', text: '-50%', icon: 'DiffDown' }, + ]); + }); + + test('should render a -100% delta when the value drops to zero', () => { + const tooltip = hoverBarChart(350); + + expect(getTitle(tooltip)).toBe('Point 3'); + expect(getDeltas(tooltip)).toEqual([ + { trend: 'downward', text: '-100%', icon: 'DiffDown' }, + { trend: 'upward', text: '20%', icon: 'DiffUp' }, + ]); + }); + + test('should mark an unchanged value as stable and render it without an icon', () => { + const tooltip = hoverBarChart(250); + const deltas = getDeltas(tooltip); + + expect(getTitle(tooltip)).toBe('Point 2'); + expect(deltas).toHaveLength(2); + deltas.forEach((delta) => { + expect(delta.trend).toBe('stable'); + expect(delta.icon).toBeNull(); + }); + }); + + test('should not render delta cells at all when showDeltaPercentInTooltip is off', () => { + const tooltip = hoverBarChart(150, { showDeltaPercentInTooltip: false }); + + expect(getColumnsCount(tooltip)).toBe('2'); + expect(getDeltas(tooltip)).toHaveLength(0); + }); + + /** + * A stable delta keeps the percent sign: `renderTooltipPercentDelta` gates the label + * on the trend rather than on the value, so a delta of `0` cannot short-circuit into + * a bare number. + */ + test('should render a stable delta as "0%"', () => { + const tooltip = hoverBarChart(250); + + expect(getDeltas(tooltip).map((delta) => delta.text)).toEqual(['0%', '0%']); + }); + + /** + * A single resolvable delta switches the grid to three columns, and a series whose + * delta is `null` still has to fill its third cell — `renderTooltipPercentDelta` + * emits an empty wrapper for the `unknown` trend. At Point 4 the previous `first` + * value is 0 -> delta `null`, while `second` is unchanged -> delta `0`, which is the + * mixed row that would otherwise leave a hole and shift the grid. + */ + test('should keep every row aligned when only some series have a delta', () => { + const tooltip = hoverBarChart(440); + + expect(getTitle(tooltip)).toBe('Point 4'); + expect(getColumnsCount(tooltip)).toBe('3'); + // 2 series x 3 columns + expect(getChildrenWrapper(tooltip).children).toHaveLength(6); + }); +}); + +/** + * Without a custom `tooltipValueFormatter` the chart falls back to + * `AbstractChart.defaultTooltipFormatter`. + */ +describe('Chart tooltip default formatting', () => { + const formatData = [ + { time: new Date('2024-01-01T00:00:00Z'), integer: 10, fractional: 1234.5678 }, + { time: new Date('2024-03-15T00:00:00Z'), integer: 20, fractional: 0.049 }, + { time: new Date('2024-07-04T00:00:00Z'), integer: 30, fractional: 99.95 }, + ]; + + let rafSpy: ReturnType; + + beforeEach(() => { + cleanup(); + rafSpy = vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => (cb as any)()); + }); + + afterEach(() => { + rafSpy.mockRestore(); + }); + + const hoverLineChart = (props: Record = {}) => { + const { container } = render( + , + ); + + const plot = container.querySelector('svg[data-ui-name="Plot"]'); + // Keep fireEvent: the hovered index is resolved from explicit SVG coordinates. + fireEvent.mouseMove(plot!, { clientX: 250, clientY: 150 }); + + const tooltip = document.querySelector('[data-ui-name="HoverLine.Tooltip"]'); + expect(tooltip).not.toBeNull(); + + return tooltip!; + }; + + const getTitle = (tooltip: Element) => + tooltip.querySelector('[data-ui-name="HoverLine.Tooltip.Title"]')?.textContent; + + const getValues = (tooltip: Element) => + Array.from(tooltip.querySelectorAll('[data-ui-name="Text"]')).map((node) => node.textContent); + + /** + * The default date format spells out both the weekday and the month, and carries no + * time, in whatever locale is asked for. + */ + test.each([ + ['en', 'Friday, March 15, 2024'], + ['de', 'Freitag, 15. März 2024'], + ['ja', '2024年3月15日金曜日'], + ])('should format a Date group key through Intl for locale %s', (locale, expected) => { + expect(getTitle(hoverLineChart({ locale }))).toBe(expected); + }); + + test('should print the month name in full rather than a numeric date', () => { + const title = getTitle(hoverLineChart()); + + expect(title).toContain('March'); + // A numeric date such as 3/15/2024 would mean the long format was dropped. + expect(title).not.toMatch(/\d+\/\d+\/\d+/); + }); + + test('should drop the time from the date', () => { + expect(getTitle(hoverLineChart())).not.toMatch(/\d{1,2}:\d{2}/); + }); + + test('should print the full weekday name in the date', () => { + const expected = new Intl.DateTimeFormat('en', { + weekday: 'long', + month: 'long', + day: 'numeric', + year: 'numeric', + }).format(new Date('2024-03-15T00:00:00Z')); + + expect(expected).toBe('Friday, March 15, 2024'); + expect(getTitle(hoverLineChart())).toBe(expected); + }); + + /** + * The weekday is abbreviated in neither the name nor the punctuation: "Fri" or "Fri." + * would mean `weekday: 'short'` slipped into the options. + */ + test('should spell the weekday out rather than abbreviate it', () => { + const title = getTitle(hoverLineChart()); + + expect(title).toMatch(/^Friday, /); + expect(title).not.toMatch(/\bFri\b\.?/); + }); + + /** + * `locale` is documented as defaulting to `en`, and that default has to hold + * independently of the locale the host machine happens to run under — passing + * `undefined` straight to `Intl` would silently follow the system instead. + */ + test('should fall back to en rather than to the runtime locale', () => { + expect(getTitle(hoverLineChart())).toBe('Friday, March 15, 2024'); + }); + + test('should take the locale from the i18n context when no prop is given', () => { + const { container } = render( + + + , + ); + + const plot = container.querySelector('svg[data-ui-name="Plot"]'); + // Keep fireEvent: the hovered index is resolved from explicit SVG coordinates. + fireEvent.mouseMove(plot!, { clientX: 250, clientY: 150 }); + + const tooltip = document.querySelector('[data-ui-name="HoverLine.Tooltip"]'); + expect(getTitle(tooltip!)).toBe('Freitag, 15. März 2024'); + }); + + test('should render integers as is and round fractional values to one decimal', () => { + expect(getValues(hoverLineChart())).toEqual(['20', '0.0']); + }); + + /** + * The hovered point is the middle one, so only its values matter. + */ + const hoverValues = (first: number, second: number) => + getValues( + hoverLineChart({ + data: [ + { time: new Date('2024-01-01T00:00:00Z'), first: 0, second: 0 }, + { time: new Date('2024-03-15T00:00:00Z'), first, second }, + { time: new Date('2024-07-04T00:00:00Z'), first: 5, second: 5 }, + ], + }), + ); + + test('should round to one decimal place rather than truncate', () => { + // 7.899934 only reaches 7.9 by rounding; truncating would leave 7.8. + expect(hoverValues(1.739139, 7.899934)).toEqual(['1.7', '7.9']); + }); + + test('should round negative values away from zero the same way', () => { + expect(hoverValues(-1.739139, -7.899934)).toEqual(['-1.7', '-7.9']); + }); + + /** + * `Intl.NumberFormat` groups thousands by default, so the rounded value keeps the + * locale's group separator rather than being printed as a bare number. + */ + test('should round a value that carries more digits than the axis shows', () => { + expect(hoverValues(1234.5678, 0.96)).toEqual(['1,234.6', '1.0']); + }); + + test.each([ + ['en', '1,234.6'], + ['de', '1.234,6'], + ])('should group the thousands the way locale %s does', (locale, expected) => { + const values = getValues( + hoverLineChart({ + locale, + data: [ + { time: new Date('2024-01-01T00:00:00Z'), first: 0 }, + { time: new Date('2024-03-15T00:00:00Z'), first: 1234.5678 }, + { time: new Date('2024-07-04T00:00:00Z'), first: 5 }, + ], + }), + ); + + expect(values).toEqual([expected]); + }); + + test('should format a numeric group key in the title as well', () => { + const tooltip = hoverLineChart({ + groupKey: 'step', + data: [ + { step: 0, first: 1 }, + { step: 2.56, first: 2 }, + { step: 5, first: 3 }, + ], + }); + + expect(getTitle(tooltip)).toBe('2.6'); + }); + + test('should let tooltipValueFormatter override the built-in formatting', () => { + const tooltipValueFormatter = vi.fn(() => 'formatted'); + + expect(getValues(hoverLineChart({ tooltipValueFormatter }))).toEqual([ + 'formatted', + 'formatted', + ]); + expect(tooltipValueFormatter).toHaveBeenCalled(); + }); + + test('should run the total line through the value formatter', () => { + const tooltip = hoverLineChart({ showTotalInTooltip: true }); + + // 20 + 0.049 = 20.049 -> rounded to one decimal place. + expect(getValues(tooltip)).toContain('20.0'); + }); +}); + +/** + * The one decimal place default has to hold for every chart that renders a tooltip, not + * only for the ones built on `AbstractChart.getTooltipChildren`. Each chart type below + * owns its `renderTooltip`, so each needs its own guard against the formatter being + * dropped from it. + */ +describe('Chart tooltip numeric formatting across chart types', () => { + let rafSpy: ReturnType; + + beforeEach(() => { + cleanup(); + rafSpy = vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => (cb as any)()); + }); + + afterEach(() => { + rafSpy.mockRestore(); + }); + + const hoverFirstShape = (chart: React.ReactElement, selector: string) => { + const { container } = render(chart); + + const shape = container.querySelector(selector); + expect(shape, `nothing matched "${selector}"`).not.toBeNull(); + + // Keep fireEvent: these tooltips open on a raw svg mouse event, and the shapes are + // overlapped, so userEvent's actionability checks would reject the hover. + fireEvent.mouseMove(shape!); + fireEvent.mouseEnter(shape!); + + return container; + }; + + test('should round the Donut tooltip value to one decimal place', () => { + hoverFirstShape( + , + 'svg path', + ); + + const tooltip = document.querySelector('[data-ui-name="Donut.Tooltip"]'); + expect(tooltip?.textContent).toContain('1,234.6'); + expect(tooltip?.textContent).not.toContain('1234.5678'); + }); + + test('should round the ScatterPlot tooltip values to one decimal place', () => { + hoverFirstShape( + , + 'svg circle', + ); + + const text = Array.from(document.querySelectorAll('[data-ui-name="ScatterPlot.Tooltip"]')) + .map((node) => node.textContent) + .join(' '); + + expect(text).toContain('1.7'); + expect(text).toContain('7.9'); + expect(text).not.toContain('1.739139'); + expect(text).not.toContain('7.899934'); + }); +}); + +/** + * The tooltip dot is drawn in the series colour on an inverted (dark) tooltip. + * `chart-palette-order-1` is itself a dark neutral, so the only thing separating it + * from the tooltip background is the 1px ring drawn by + * `box-shadow: 0 0 0 1px oklch(from var(--color) calc(l + var(--lightness)) c h)`. + * That is why `chart-palette-order-1` gets a stronger lightness offset than the rest. + */ +describe('Tooltip.Dot ring lightness', () => { + const dotData = [ + { x: 0, y: 2 }, + { x: 1, y: 5 }, + { x: 2, y: 3 }, + { x: 3, y: 7 }, + ]; + + let rafSpy: ReturnType; + + beforeEach(() => { + cleanup(); + rafSpy = vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => (cb as any)()); + }); + + afterEach(() => { + rafSpy.mockRestore(); + }); + + /** + * The dot has to be read from inside a rendered Tooltip: `TooltipDotRenderContext` + * only resets its colour index when a Tooltip provides it, so a standalone + * `Tooltip.Dot` would inherit whatever index previous renders left behind. + */ + const hoverAndReadDots = (ui: React.ReactElement) => { + const { container } = render(ui); + + // Keep fireEvent: the hovered index is resolved from explicit SVG coordinates. + fireEvent.mouseMove(container.querySelector('svg[data-ui-name="Plot"]')!, { + clientX: 200, + clientY: 100, + }); + + const circles = document.querySelectorAll('[class*="SDotCircle"]'); + expect(circles.length).toBeGreaterThan(0); + + // sstyled passes `color` and `lightness` down as generated custom properties. + return Array.from(circles).map((circle) => { + const style = circle.getAttribute('style') ?? ''; + + return { + color: style.match(/--color_\w+:\s*([^;]+)/)?.[1]?.trim(), + lightness: style.match(/--lightness_\w+:\s*([^;]+)/)?.[1]?.trim(), + }; + }); + }; + + const hoverAndReadDot = (ui: React.ReactElement) => hoverAndReadDots(ui)[0]; + + const readHighLevelDot = () => + hoverAndReadDot( + , + ); + + const readLowLevelDot = () => { + const xScale = scaleLinear().range([40, 360]).domain([0, 3]); + const yScale = scaleLinear().range([160, 40]).domain([0, 10]); + + return hoverAndReadDot( + + + {({ xIndex }: any) => ({ + children: xIndex !== null + ? Line + : <>, + })} + + , + ); + }; + + test('should paint both the high and the low level dot in chart-palette-order-1', () => { + expect(readHighLevelDot().color).toContain('chart-palette-order-1'); + cleanup(); + expect(readLowLevelDot().color).toContain('chart-palette-order-1'); + }); + + test('should use the stronger ring when the chart passes the colour explicitly', () => { + expect(readHighLevelDot().lightness).toBe('0.35'); + }); + + /** + * Only `chart-palette-order-1` needs the stronger offset. Every other palette colour + * is light enough against the inverted tooltip to read with the default one. + */ + test('should use the default ring for every colour but chart-palette-order-1', () => { + const dots = hoverAndReadDots( + ({ ...d, second: d.y * 2 }))} + groupKey='x' + plotWidth={400} + plotHeight={200} + showTooltip + duration={0} + aria-label='Line chart' + />, + ); + + expect(dots).toHaveLength(2); + expect(dots[0]).toMatchObject({ lightness: '0.35' }); + expect(dots[1].color).toContain('chart-palette-order-2'); + expect(dots[1].lightness).toBe('0.15'); + }); + + /** + * The ring offset has to follow the colour the dot is painted with, not the `color` + * prop: `chart-palette-order-1` is a dark neutral that matches the inverted tooltip + * background, so the 1px ring is the only thing separating the two. Looking the offset + * up by the prop alone would drop a low-level `` (which falls back to that + * very colour) to the weaker 0.15 and make it disappear. + */ + test('should ring the implicit colour exactly like the explicit one', () => { + const lowLevel = readLowLevelDot(); + cleanup(); + const highLevel = readHighLevelDot(); + + expect(lowLevel.lightness).toBe('0.35'); + expect(lowLevel.lightness).toBe(highLevel.lightness); + }); +}); diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx index 6143c49543..60385327ba 100644 --- a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx +++ b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx @@ -1,6 +1,6 @@ import type { Page } from '@semcore/testing-utils/playwright'; import { expect, test } from '@semcore/testing-utils/playwright'; -import { loadPage } from '@semcore/testing-utils/shared/helpers'; +import { expectEachToHaveAttribute, loadPage } from '@semcore/testing-utils/shared/helpers'; import { TAG } from '@semcore/testing-utils/shared/tags'; export const locators = { @@ -57,14 +57,7 @@ test.describe(`${TAG.VISUAL}`, () => { await page.mouse.move(hoverX, hoverY); - const lines = locators.line(page); - const count = await lines.count(); - await expect(count).not.toBeNull(); - - for (let i = 0; i < count; i++) { - const line = lines.nth(i); - await expect(line.first()).toHaveAttribute('aria-hidden', 'true'); - } + await expectEachToHaveAttribute(locators.line(page), 'aria-hidden', 'true'); await expect(page).toHaveScreenshot(); }); }); diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-default-props-looks-good-1-chromium-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-default-props-looks-good-1-chromium-linux.png index bc14731f61..f1536f4e2f 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-default-props-looks-good-1-chromium-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-default-props-looks-good-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-default-props-looks-good-1-firefox-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-default-props-looks-good-1-firefox-linux.png index df1ce1753b..99ab6d1764 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-default-props-looks-good-1-firefox-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-default-props-looks-good-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-default-props-looks-good-1-webkit-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-default-props-looks-good-1-webkit-linux.png index 3d0f824c52..690d155921 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-default-props-looks-good-1-webkit-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-default-props-looks-good-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-with-empty-line-renders-and-looks-good-1-chromium-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-with-empty-line-renders-and-looks-good-1-chromium-linux.png index 7719255378..73846d7c6f 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-with-empty-line-renders-and-looks-good-1-chromium-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-with-empty-line-renders-and-looks-good-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-with-empty-line-renders-and-looks-good-1-firefox-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-with-empty-line-renders-and-looks-good-1-firefox-linux.png index f2a918e87b..e263fcf692 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-with-empty-line-renders-and-looks-good-1-firefox-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-with-empty-line-renders-and-looks-good-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-with-empty-line-renders-and-looks-good-1-webkit-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-with-empty-line-renders-and-looks-good-1-webkit-linux.png index 010ec3c8e6..d480573c27 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-with-empty-line-renders-and-looks-good-1-webkit-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-area-with-empty-line-renders-and-looks-good-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-curve-prop-1-chromium-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-curve-prop-1-chromium-linux.png index c0c1b42bc2..fa00d624f4 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-curve-prop-1-chromium-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-curve-prop-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-curve-prop-1-firefox-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-curve-prop-1-firefox-linux.png index 92e6cc11db..6ee49f4a47 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-curve-prop-1-firefox-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-curve-prop-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-curve-prop-1-webkit-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-curve-prop-1-webkit-linux.png index ec47f69342..bb285e8253 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-curve-prop-1-webkit-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-curve-prop-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-custom-tooltip-1-chromium-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-custom-tooltip-1-chromium-linux.png index 7c0bcd7b73..f86b65a7e2 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-custom-tooltip-1-chromium-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-custom-tooltip-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-custom-tooltip-1-firefox-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-custom-tooltip-1-firefox-linux.png index f5e37a04b5..d6ae9fc1de 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-custom-tooltip-1-firefox-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-custom-tooltip-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-custom-tooltip-1-webkit-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-custom-tooltip-1-webkit-linux.png index ba324f6d62..1f01f5673e 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-custom-tooltip-1-webkit-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-custom-tooltip-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-dots-partial-display-1-chromium-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-dots-partial-display-1-chromium-linux.png index 250a9abd53..e3cd3d1f1e 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-dots-partial-display-1-chromium-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-dots-partial-display-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-dots-partial-display-1-firefox-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-dots-partial-display-1-firefox-linux.png index afac72d75b..0d0d67ca3f 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-dots-partial-display-1-firefox-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-dots-partial-display-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-dots-partial-display-1-webkit-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-dots-partial-display-1-webkit-linux.png index ccc9e27b4b..5c77158cdc 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-dots-partial-display-1-webkit-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-dots-partial-display-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-renders-correctly-when-dots-can-be-hovered-1-chromium-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-renders-correctly-when-dots-can-be-hovered-1-chromium-linux.png index e4113ea5f1..8b002ab9b3 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-renders-correctly-when-dots-can-be-hovered-1-chromium-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-renders-correctly-when-dots-can-be-hovered-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-renders-correctly-when-dots-can-be-hovered-1-firefox-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-renders-correctly-when-dots-can-be-hovered-1-firefox-linux.png index 5a90d2e707..33ca173f90 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-renders-correctly-when-dots-can-be-hovered-1-firefox-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-renders-correctly-when-dots-can-be-hovered-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-renders-correctly-when-dots-can-be-hovered-1-webkit-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-renders-correctly-when-dots-can-be-hovered-1-webkit-linux.png index 26892b7291..c60f347b16 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-renders-correctly-when-dots-can-be-hovered-1-webkit-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-interpolation-renders-correctly-when-dots-can-be-hovered-1-webkit-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-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 b4aabdecae..23867b29d9 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 e09e802c76..ad3f41d320 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 fb9738d5f7..dd0bd7f717 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 b217cb42d1..f2d6f1ec18 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 8a34072d49..2a38f916ca 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 b69496b073..02d9446da9 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 e243d1fea7..e56b393d16 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 5665731bda..0220436023 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 2fa99395a7..0b8df97416 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 8b28cc2f0b..e7d378c460 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 5b99e29454..398c358488 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 987c933b83..a5a277ac4b 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 44b896a38f..da0eb751f8 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 b63ea57ac9..d07f07fc7d 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 3983304162..908386840d 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 48cd7d8e2d..87d7651523 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 6f60faf32e..c401422755 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 922b59f759..9560bcd39c 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__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-1-chromium-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-1-chromium-linux.png index c74fc81ebf..38d4659369 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-1-chromium-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-1-firefox-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-1-firefox-linux.png index 930b247696..9a4e6bd4f8 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-1-firefox-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-1-webkit-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-1-webkit-linux.png index c01c6b108b..7b88a2fd85 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-1-webkit-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-2-chromium-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-2-chromium-linux.png index c74fc81ebf..09767b626e 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-2-chromium-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-2-firefox-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-2-firefox-linux.png index 930b247696..9a4e6bd4f8 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-2-firefox-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-2-webkit-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-2-webkit-linux.png index c01c6b108b..7b88a2fd85 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-2-webkit-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-3-chromium-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-3-chromium-linux.png index 0837bf0146..c957893d81 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-3-chromium-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-3-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-3-firefox-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-3-firefox-linux.png index 2be1e54933..db1433cc10 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-3-firefox-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-3-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-3-webkit-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-3-webkit-linux.png index 1db650da87..291340a945 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-3-webkit-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-keyboard-interactions-3-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-1-chromium-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-1-chromium-linux.png index 26434443ec..3955fdfd6d 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-1-chromium-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-1-firefox-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-1-firefox-linux.png index 47baf4ce7b..798150b12c 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-1-firefox-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-1-webkit-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-1-webkit-linux.png index 2314161871..2ac370d970 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-1-webkit-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-2-chromium-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-2-chromium-linux.png index 461fcfeaa9..5bd1d86343 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-2-chromium-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-2-firefox-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-2-firefox-linux.png index bee50d401e..8fa0abc358 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-2-firefox-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-2-webkit-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-2-webkit-linux.png index 11a6406aff..a6efca0246 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-2-webkit-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-patterns-and-symbols-for-dots-mouse-interactions-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-render-and-interactions-with-Line-and-Dots-1-chromium-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-render-and-interactions-with-Line-and-Dots-1-chromium-linux.png index 2fba8a4b1d..658d69ee3a 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-render-and-interactions-with-Line-and-Dots-1-chromium-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-render-and-interactions-with-Line-and-Dots-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-render-and-interactions-with-Line-and-Dots-1-firefox-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-render-and-interactions-with-Line-and-Dots-1-firefox-linux.png index c3f35edfee..936b3189d3 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-render-and-interactions-with-Line-and-Dots-1-firefox-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-render-and-interactions-with-Line-and-Dots-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-render-and-interactions-with-Line-and-Dots-1-webkit-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-render-and-interactions-with-Line-and-Dots-1-webkit-linux.png index 13e7671609..2b110eecbb 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-render-and-interactions-with-Line-and-Dots-1-webkit-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-render-and-interactions-with-Line-and-Dots-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-1-chromium-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-1-chromium-linux.png index 99579eb178..8a119ee3e0 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-1-chromium-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-1-firefox-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-1-firefox-linux.png index 4159144424..5b00b62f6d 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-1-firefox-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-1-webkit-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-1-webkit-linux.png index 47f6df6edb..79348be7ce 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-1-webkit-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-2-chromium-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-2-chromium-linux.png index ca9022bf81..36f88fa609 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-2-chromium-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-2-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-2-firefox-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-2-firefox-linux.png index 24d6ae1bf0..2a96f18f65 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-2-firefox-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-2-webkit-linux.png b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-2-webkit-linux.png index 2d075e72e0..183209ccfc 100644 Binary files a/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-2-webkit-linux.png and b/semcore/d3-chart/__tests__/line-chart.browser-test.tsx-snapshots/-visual-Verify-time-scale-with-tooltip-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx b/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx index 312dcf204a..e7fbdc958d 100644 --- a/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx +++ b/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx @@ -1,6 +1,6 @@ import type { Page } from '@semcore/testing-utils/playwright'; import { expect, test } from '@semcore/testing-utils/playwright'; -import { loadPage } from '@semcore/testing-utils/shared/helpers'; +import { expectEachToHaveAttribute, loadPage } from '@semcore/testing-utils/shared/helpers'; import { TAG } from '@semcore/testing-utils/shared/tags'; export const locators = { @@ -231,35 +231,15 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { await test.step('Verify labels have aria-hidden attribute', async () => { await locators.plot(page).waitFor({ state: 'visible' }); - const labels = locators.polygonLabels(page); - const count = await labels.count(); - - for (let i = 0; i < count; i++) { - const label = labels.nth(i); - await expect(label.first()).toHaveAttribute('aria-hidden', 'true'); - } + await expectEachToHaveAttribute(locators.polygonLabels(page), 'aria-hidden', 'true'); }); await test.step('Verify Line.Polygon elements have aria-hidden attribute', async () => { - const linePolygons = locators.linePolygon(page); - const count = await linePolygons.count(); - expect(count).toBeGreaterThan(0); - - for (let i = 0; i < count; i++) { - const linePoly = linePolygons.nth(i); - await expect(linePoly.first()).toHaveAttribute('aria-hidden', 'true'); - } + await expectEachToHaveAttribute(locators.linePolygon(page), 'aria-hidden', 'true'); }); await test.step('Verify Polygon.Line elements have aria-hidden attribute', async () => { - const polygonLines = locators.polygonLine(page); - const count = await polygonLines.count(); - expect(count).toBeGreaterThan(0); - - for (let i = 0; i < count; i++) { - const polyLine = polygonLines.nth(i); - await expect(polyLine.first()).toHaveAttribute('aria-hidden', 'true'); - } + await expectEachToHaveAttribute(locators.polygonLine(page), 'aria-hidden', 'true'); }); }); diff --git a/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-Radar-Tooltip-1-chromium-linux.png b/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-Radar-Tooltip-1-chromium-linux.png index 0635ede3a2..1da78c1cbb 100644 Binary files a/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-Radar-Tooltip-1-chromium-linux.png and b/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-Radar-Tooltip-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-Radar-Tooltip-1-firefox-linux.png b/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-Radar-Tooltip-1-firefox-linux.png index 8e8857657b..e987037fbb 100644 Binary files a/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-Radar-Tooltip-1-firefox-linux.png and b/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-Radar-Tooltip-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-Radar-Tooltip-1-webkit-linux.png b/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-Radar-Tooltip-1-webkit-linux.png index d0bc78c2a6..467932188f 100644 Binary files a/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-Radar-Tooltip-1-webkit-linux.png and b/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-Radar-Tooltip-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-chromium-linux.png b/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-chromium-linux.png index 8d6266a396..e423f3c217 100644 Binary files a/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-chromium-linux.png and b/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-firefox-linux.png b/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-firefox-linux.png index af052dfeea..fbe0df8e10 100644 Binary files a/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-firefox-linux.png and b/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-webkit-linux.png b/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-webkit-linux.png index 311094c5f9..95c3813d51 100644 Binary files a/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-webkit-linux.png and b/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-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 6e7be4f6aa..010477756f 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__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-2-firefox-linux.png b/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-2-firefox-linux.png index 709fc7b8df..d89f08921a 100644 Binary files a/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-2-firefox-linux.png and b/semcore/d3-chart/__tests__/radar-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-2-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/radial-tree-chart.browser-test.tsx b/semcore/d3-chart/__tests__/radial-tree-chart.browser-test.tsx index 2b192c9c6f..89cff60ba8 100644 --- a/semcore/d3-chart/__tests__/radial-tree-chart.browser-test.tsx +++ b/semcore/d3-chart/__tests__/radial-tree-chart.browser-test.tsx @@ -1,6 +1,6 @@ import type { Page } from '@semcore/testing-utils/playwright'; import { expect, test } from '@semcore/testing-utils/playwright'; -import { loadPage } from '@semcore/testing-utils/shared/helpers'; +import { expectEachToHaveAttribute, loadPage } from '@semcore/testing-utils/shared/helpers'; import { TAG } from '@semcore/testing-utils/shared/tags'; export const locators = { @@ -115,36 +115,15 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { }); await test.step('Verify labels have aria-hidden attribute', async () => { - const labels = locators.label(page); - const count = await labels.count(); - expect(count).toBeGreaterThan(0); - - for (let i = 0; i < count; i++) { - const label = labels.nth(i); - await expect(label).toHaveAttribute('aria-hidden', 'true'); - } + await expectEachToHaveAttribute(locators.label(page), 'aria-hidden', 'true'); }); await test.step('Verify caps have aria-hidden attribute', async () => { - const caps = locators.cap(page); - const count = await caps.count(); - expect(count).toBeGreaterThan(0); - - for (let i = 0; i < count; i++) { - const cap = caps.nth(i); - await expect(cap).toHaveAttribute('aria-hidden', 'true'); - } + await expectEachToHaveAttribute(locators.cap(page), 'aria-hidden', 'true'); }); await test.step('Verify lines have aria-hidden attribute', async () => { - const lines = locators.line(page); - const count = await lines.count(); - expect(count).toBeGreaterThan(0); - - for (let i = 0; i < count; i++) { - const line = lines.nth(i); - await expect(line).toHaveAttribute('aria-hidden', 'true'); - } + await expectEachToHaveAttribute(locators.line(page), 'aria-hidden', 'true'); }); }); }); diff --git a/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx b/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx index 4a9ab92244..05a12da095 100644 --- a/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx +++ b/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx @@ -1,6 +1,6 @@ import type { Page } from '@semcore/testing-utils/playwright'; import { expect, test } from '@semcore/testing-utils/playwright'; -import { loadPage } from '@semcore/testing-utils/shared/helpers'; +import { expectEachToHaveAttribute, loadPage } from '@semcore/testing-utils/shared/helpers'; import { TAG } from '@semcore/testing-utils/shared/tags'; export const locators = { @@ -165,14 +165,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { await test.step('Verify venn circles have aria-hidden attribute', async () => { await locators.plot(page).first().waitFor({ state: 'visible' }); - const venns = locators.vennCircle(page); - const count = await venns.count(); - expect(count).toBeGreaterThan(0); - - for (let i = 0; i < count; i++) { - const venn = venns.nth(i); - await expect(venn.first()).toHaveAttribute('aria-hidden', 'true'); - } + await expectEachToHaveAttribute(locators.vennCircle(page), 'aria-hidden', 'true'); }); }); diff --git a/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-Venn-usage-1-chromium-linux.png b/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-Venn-usage-1-chromium-linux.png index f19df188f7..396d1db3a9 100644 Binary files a/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-Venn-usage-1-chromium-linux.png and b/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-Venn-usage-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-Venn-usage-1-firefox-linux.png b/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-Venn-usage-1-firefox-linux.png index 9da5e4b842..9bc2cee8ba 100644 Binary files a/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-Venn-usage-1-firefox-linux.png and b/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-Venn-usage-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-Venn-usage-1-webkit-linux.png b/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-Venn-usage-1-webkit-linux.png index f268ba8ed9..c6f1f866dd 100644 Binary files a/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-Venn-usage-1-webkit-linux.png and b/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-Venn-usage-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-chromium-linux.png b/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-chromium-linux.png index 25ab7961e2..300e571b51 100644 Binary files a/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-chromium-linux.png and b/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-firefox-linux.png b/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-firefox-linux.png index cd2abe854c..9b7b67d8fb 100644 Binary files a/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-firefox-linux.png and b/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-webkit-linux.png b/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-webkit-linux.png index 9793756d85..95e0d38ca5 100644 Binary files a/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-webkit-linux.png and b/semcore/d3-chart/__tests__/venn-chart.browser-test.tsx-snapshots/-visual-Verify-basic-usage-1-webkit-linux.png differ diff --git a/semcore/d3-chart/src/Axis.jsx b/semcore/d3-chart/src/Axis.jsx index 34d235ae12..4c4066cbc6 100644 --- a/semcore/d3-chart/src/Axis.jsx +++ b/semcore/d3-chart/src/Axis.jsx @@ -1,9 +1,10 @@ import { Component, sstyled } from '@semcore/core'; -import React, { useState, useEffect } from 'react'; +import React from 'react'; import createElement from './createElement'; import style from './style/axis.shadow.css'; import { scaleOfBandwidth } from './utils'; +import { TextMeasurer } from './utils/TextMeasurer'; const CUSTOM_0 = Symbol('custom_0'); const CUSTOM_1 = Symbol('custom_1'); @@ -186,53 +187,48 @@ function renderValue(value) { return value; } -function splitTextByWidth(root, text, maxWidth) { - if (!text || !maxWidth || maxWidth <= 0) return []; +function splitTextByWidth(measurer) { + return (text, maxWidth) => { + { + if (!text || !maxWidth || maxWidth <= 0) return []; - const words = text.split(/\s+/).filter((word) => word.length > 0); - if (words.length === 0) return []; + const words = text.split(/\s+/).filter((word) => word.length > 0); + if (words.length === 0) return []; - const lines = []; - let currentLine = words[0]; + const lines = []; + let currentLine = words[0]; - for (let i = 1; i < words.length; i++) { - const testLine = `${currentLine} ${words[i]}`.trim(); - const testWidth = measureTextWidth(root, testLine); + for (let i = 1; i < words.length; i++) { + const testLine = `${currentLine} ${words[i]}`.trim(); + const { width: testWidth } = measurer.measure(testLine); - if (testWidth <= maxWidth) { - currentLine = testLine; - } else { - if (currentLine) { - lines.push(currentLine); - } + if (testWidth <= maxWidth) { + currentLine = testLine; + } else { + if (currentLine) { + lines.push(currentLine); + } - currentLine = words[i]; + currentLine = words[i]; - if (measureTextWidth(root, currentLine) > maxWidth) { - lines.push(currentLine); - currentLine = ''; + const { width: currentLineWidth } = measurer.measure(currentLine); + if (currentLineWidth > maxWidth) { + lines.push(currentLine); + currentLine = ''; + } + } } - } - } - if (currentLine) { - lines.push(currentLine); - } + if (currentLine) { + lines.push(currentLine); + } - return lines; + return lines; + } + }; } -function measureTextWidth(rootRef, text, fontSize = 12) { - const textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - textEl.setAttribute('font-size', fontSize); - textEl.setAttribute('visibility', 'hidden'); - textEl.textContent = text; - - rootRef.appendChild(textEl); - const width = textEl.getComputedTextLength(); - rootRef.removeChild(textEl); - return width; -} +const measurer = new TextMeasurer(); class AxisRoot extends Component { static displayName = 'Axis'; @@ -260,6 +256,7 @@ class AxisRoot extends Component { ticks: this.ticks, indexScale, position, + splitTextByWidth: splitTextByWidth(measurer), }; } @@ -294,20 +291,15 @@ function Ticks(props) { dataHintsHandler, children, childrenPosition = 'inside', - rootRef, multiline, + splitTextByWidth, } = props; - const [rootRefElement, setRootRefElement] = useState(null); - - useEffect(() => { - if (rootRef.current) setRootRefElement(rootRef.current); - }, []); const tickBandwidth = scale[indexScale]?.bandwidth?.(); const ticksWithLines = ticks.map((tick) => ({ tick, - lines: typeof tick === 'string' && multiline && rootRefElement - ? splitTextByWidth(rootRefElement, tick, tickBandwidth) + lines: typeof tick === 'string' && multiline + ? splitTextByWidth(tick, tickBandwidth) : [], })); diff --git a/semcore/d3-chart/src/Dots.jsx b/semcore/d3-chart/src/Dots.jsx index 45cb3ef953..dde55a07a8 100644 --- a/semcore/d3-chart/src/Dots.jsx +++ b/semcore/d3-chart/src/Dots.jsx @@ -8,6 +8,8 @@ import { PatternSymbol, getPatternSymbolSize } from './Pattern'; import style from './style/dot.shadow.css'; import { eventToPoint, invert, interpolateValue, getChartDefaultColorName } from './utils'; +const BASE_RADIUS = 3.5; +const ACTIVE_RADIUS = 4.5; function Dots(props) { const { Element: SDot, @@ -23,7 +25,7 @@ function Dots(props) { scale, duration = 500, transparent, - radius: radiusBase = 4, + radius: radiusBase = BASE_RADIUS, resolveColor, patterns, onClick, @@ -97,7 +99,7 @@ function Dots(props) { typeof display === 'function' ? display(i, i === activeIndex, !isPrev && !isNext) : display || i === activeIndex || (!isPrev && !isNext); - const radius = radiusBase * (active ? 5 / 4 : 1); + const radius = active ? ACTIVE_RADIUS : radiusBase; if (!d3.defined()(d)) return acc; if (!visible) return acc; @@ -147,13 +149,15 @@ function Dots(props) { const SDots = 'g'; return sstyled(styles)( - + { patterns && ( + + ) } {dots} , ); diff --git a/semcore/d3-chart/src/Hover.jsx b/semcore/d3-chart/src/Hover.jsx index ba97698c32..1a9a13d835 100644 --- a/semcore/d3-chart/src/Hover.jsx +++ b/semcore/d3-chart/src/Hover.jsx @@ -8,7 +8,18 @@ import createElement from './createElement'; import style from './style/hover.shadow.css'; import Tooltip from './Tooltip'; import { scaleOfBandwidth, getIndexFromData, eventToPoint, invert, scaleToBand } from './utils'; +import { TextMeasurer } from './utils/TextMeasurer'; +const STROKE_WIDTH = 1; +const NOTCH_WIDTH = 9; +const NOTCH_DELTA = NOTCH_WIDTH / 2 - STROKE_WIDTH / 4; + +function formatValue(value) { + if (value instanceof Date) { + return value.toLocaleDateString(); + } + return value; +} class Hover extends Component { static style = style; @@ -17,9 +28,11 @@ class Hover extends Component { yIndex: null, }; + measurer = new TextMeasurer(); + virtualElement = canUseDOM() ? document.createElement('div') : {}; - handlerMouseMoveRoot = trottle((e, currentTarget) => { + handlerMouseMoveRoot = trottle((e, currentTarget, isTickUnder) => { const { eventEmitter, data, scale, x, y, rootRef, patterns, plotId } = this.asProps; const { clientX, clientY } = e; const [xScale, yScale] = scale; @@ -37,15 +50,23 @@ class Hover extends Component { const isRootTooltip = hasParent(e.target, rootRef.current); this.setState(state, () => { + let x, y; + if (isRootTooltip) { - eventEmitter.emit(`setTooltipPosition_${plotId}`, clientX, clientY); + x = clientX; + // preserve static vertical position if it's a move on a tick. + y = isTickUnder ? yRect + height / 2 : clientY; } else { const diff = clientY - yOriginal; const dimension = (diff / heightOriginal) * 100; - const heightValue = height / 100 * dimension; + const heightValue = (height / 100) * dimension; - eventEmitter.emit(`setTooltipPosition_${plotId}`, pX + xRect, yRect + heightValue); + x = pX + xRect; + // preserve static vertical position if it's a move on tick. + y = isTickUnder ? yRect + height / 2 : yRect + heightValue; } + + eventEmitter.emit(`setTooltipPosition_${plotId}`, x, y); eventEmitter.emit(`setTooltipRenderingProps_${plotId}`, {}, state); eventEmitter.emit(`setTooltipVisible_${plotId}`, xIndex !== null || yIndex !== null); }); @@ -64,9 +85,9 @@ class Hover extends Component { componentDidMount() { const { eventEmitter } = this.asProps; - this.unsubscribeMouseMoveRoot = eventEmitter.subscribe('onMouseMoveChart', (e) => { + this.unsubscribeMouseMoveRoot = eventEmitter.subscribe('onMouseMoveChart', (e, _, isTickUnder) => { e.persist(); - this.handlerMouseMoveRoot(e, e.currentTarget); + this.handlerMouseMoveRoot(e, e.currentTarget, isTickUnder); }); this.unsubscribeMouseLeaveRoot = eventEmitter.subscribe( 'onMouseLeaveChart', @@ -88,15 +109,8 @@ class HoverLineRoot extends Hover { static displayName = 'HoverLine'; render() { - const SHoverLine = this.Element; - const { styles, x, y, data, scale, hideHoverLine } = this.asProps; + const { hideHoverLine } = this.asProps; const { xIndex, yIndex } = this.state; - const [xScale, yScale] = scale; - - const xRange = xScale.range(); - const yRange = yScale.range(); - const x1 = xIndex !== null ? scaleOfBandwidth(xScale, data[xIndex][x]) : undefined; - const y1 = yIndex !== null ? scaleOfBandwidth(yScale, data[yIndex][y]) : undefined; const isHide = typeof hideHoverLine === 'function' ? hideHoverLine(xIndex, yIndex) : hideHoverLine; @@ -105,32 +119,47 @@ class HoverLineRoot extends Hover { return null; } + const SHoverLine = this.Element; + const { styles, x, y, data, scale, dataHints, hideTickHover } = this.asProps; + const [xScale, yScale] = scale; + + const xRange = xScale.range(); + const yRange = yScale.range(); + const x1 = xIndex !== null ? scaleOfBandwidth(xScale, data[xIndex][x]) : undefined; + const y1 = yIndex !== null ? scaleOfBandwidth(yScale, data[yIndex][y]) : undefined; + return sstyled(styles)( <> {xIndex !== null ? ( - + <> + + + + + + {!hideTickHover && ( + + )} + ) : null} {yIndex !== null ? ( - + + + + + ) : null} , @@ -142,8 +171,14 @@ class HoverRectRoot extends Hover { static displayName = 'HoverRect'; render() { + const { hideHoverLine } = this.asProps; + + if (hideHoverLine) { + return null; + } + const SHoverRect = this.Element; - const { styles, x, y, data, scale, hideHoverLine } = this.asProps; + const { styles, x, y, data, scale, dataHints, hideTickHover } = this.asProps; const { xIndex, yIndex } = this.state; const [xScale, yScale] = scale; @@ -152,43 +187,119 @@ class HoverRectRoot extends Hover { const xBand = scaleToBand(xScale); const yBand = scaleToBand(yScale); - if (hideHoverLine) { - return null; - } + const xStep = xBand.step(); + const xPaddingInner = xBand.paddingInner(); + const yStep = yBand.step(); + const yPaddingInner = yBand.paddingInner(); return sstyled(styles)( <> - {xIndex !== null - ? ( - + + {!hideTickHover && ( + - ) - : null} - {yIndex !== null - ? ( - - ) - : null} + )} + + )} + {yIndex !== null && ( + + )} , ); } } +const HOVERED_TICK_PADDING_X = 12; +const HOVERED_TICK_PADDING_Y = 4; +const HOVERED_TOCK_BORDER_RADIUS = 6; + +function HoveredTick(props) { + const { + paddingX = HOVERED_TICK_PADDING_X, + paddingY = HOVERED_TICK_PADDING_Y, + borderRadius = HOVERED_TOCK_BORDER_RADIUS, + tickFormatter, + value, + isFirstTick = false, + isLastTick = false, + textMeasurer, + styles, + x, + y, + } = props; + const STickWrapper = 'g'; + const STickHover = 'rect'; + const STick = 'text'; + + const formattedValue = tickFormatter(value); + + const { width: textWidth, height: textHeight } = formattedValue !== undefined + ? textMeasurer.measure(formattedValue) + : { width: 0, height: 0 }; + + const hoverX = isFirstTick + ? x - NOTCH_DELTA + : isLastTick + ? x - textWidth - paddingX * 2 + NOTCH_DELTA + : x - paddingX - textWidth / 2; + + const tickX = isFirstTick + ? x + paddingX + textWidth / 2 - NOTCH_DELTA + : isLastTick + ? x - textWidth / 2 - paddingX + NOTCH_DELTA + : x; + + const hoverPos = { + x: hoverX, + y: y + textHeight / 2 - paddingY / 2, + width: textWidth + paddingX * 2, + height: textHeight + paddingY * 2, + }; + + const tickPos = { + x: tickX, + y: y, + }; + + return sstyled(styles)( + + + + {formattedValue} + + , + ); +} + function HoverLineTooltip(props) { const SHoverLineTooltip = Root; return sstyled(props.styles)( diff --git a/semcore/d3-chart/src/Plot.jsx b/semcore/d3-chart/src/Plot.jsx index e5612f563b..164b4572a5 100644 --- a/semcore/d3-chart/src/Plot.jsx +++ b/semcore/d3-chart/src/Plot.jsx @@ -44,8 +44,10 @@ class PlotRoot extends Component { const [minX, maxX] = xScale.range(); const [maxY, minY] = yScale.range(); - if (pX >= minX && pX <= maxX && pY >= minY && pY <= maxY) { - this.eventEmitter.emit('onMouseMoveChart', e, this.rootRef.current); + if (pX >= minX && pX <= maxX && pY >= minY) { + const isTickUnder = pY >= maxY; + + this.eventEmitter.emit('onMouseMoveChart', e, this.rootRef.current, isTickUnder); } else { this.eventEmitter.emit('onMouseLeaveChart', e); } @@ -77,6 +79,7 @@ class PlotRoot extends Component { eventEmitter: this.eventEmitter, rootRef: this.rootRef, dataHintsHandler: this.dataHintsHandler, + dataHints: this.dataStructureHints, resolveColor, patterns, duration, diff --git a/semcore/d3-chart/src/Tooltip.jsx b/semcore/d3-chart/src/Tooltip.jsx index 967b0c2d3f..59e39ac22f 100644 --- a/semcore/d3-chart/src/Tooltip.jsx +++ b/semcore/d3-chart/src/Tooltip.jsx @@ -168,6 +168,10 @@ function Title(props) { } Title.style = style; +const CHART_PALETTE_ORDER_TO_LIGHTNESS = { + 'chart-palette-order-1': 0.35, + 'DEFAULT': 0.15, +}; function Dot(props) { const { styles, color, Children } = props; const resolveColor = useColorResolver(); @@ -183,12 +187,14 @@ function Dot(props) { const SDotGroup = Root; const SDot = Box; const SDotCircle = Box; + const SDotPattern = PatternSymbol; + return sstyled(styles)( {patterns ? ( - @@ -196,7 +202,10 @@ function Dot(props) { ) : ( - + )} diff --git a/semcore/d3-chart/src/component/Chart/AbstractChart.tsx b/semcore/d3-chart/src/component/Chart/AbstractChart.tsx index 0667111224..ab8a0ee634 100644 --- a/semcore/d3-chart/src/component/Chart/AbstractChart.tsx +++ b/semcore/d3-chart/src/component/Chart/AbstractChart.tsx @@ -6,11 +6,14 @@ 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 Divider from '@semcore/divider'; +import DiffDown from '@semcore/icon/DiffDown/m'; +import DiffUp from '@semcore/icon/DiffUp/m'; import { Text } from '@semcore/typography'; import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale'; import React, { Fragment } from 'react'; -import type { BaseChartProps, BaseLegendProps, ListData, ObjectData } from './AbstractChart.type'; +import type { BaseChartProps, BaseLegendProps, ListData, ObjectData, ObjectDataKey } from './AbstractChart.type'; // @ts-ignore import type { HoverLine, HoverRect } from '../..'; // @ts-ignore @@ -23,9 +26,11 @@ import type { LegendFlexProps } from '../ChartLegend/LegendFlex/LegendFlex.type' import type { LegendItem } from '../ChartLegend/LegendItem/LegendItem.type'; import type { LegendTableProps } from '../ChartLegend/LegendTable/LegendTable.type'; +type TooltipPercentDeltaTrend = 'upward' | 'downward' | 'stable' | 'unknown'; + export type ChartState = { dataDefinitions: Array; - highlightedLine: number; + highlightedItem: number; withTrend: boolean; plotWidth: number; @@ -65,7 +70,7 @@ export abstract class AbstractChart< this.observer = new ResizeObserver(this.handleResize); } - this.setHighlightedLine = this.setHighlightedLine.bind(this); + this.setHighlightedItem = this.setHighlightedItem.bind(this); this.handleChangeVisible = this.handleChangeVisible.bind(this); this.handleMouseEnter = this.handleMouseEnter.bind(this); this.handleMouseLeave = this.handleMouseLeave.bind(this); @@ -75,7 +80,7 @@ export abstract class AbstractChart< this.state = { dataDefinitions: this.getDefaultDataDefinitions(), - highlightedLine: -1, + highlightedItem: -1, withTrend: false, plotWidth: 0, plotHeight: 0, @@ -329,8 +334,8 @@ export abstract class AbstractChart< return valueScale; } - protected setHighlightedLine(index: number) { - this.setState({ highlightedLine: index }); + protected setHighlightedItem(index: number) { + this.setState({ highlightedItem: index }); } protected handleChangeVisible(id: string, isVisible: boolean) { @@ -352,25 +357,19 @@ export abstract class AbstractChart< } protected handleMouseEnter(id: string) { - this.setHighlightedLine(this.state.dataDefinitions.findIndex((line) => line.id === id)); + this.setHighlightedItem(this.state.dataDefinitions.findIndex((line) => line.id === id)); } protected handleMouseLeave() { - this.setHighlightedLine(-1); + this.setHighlightedItem(-1); } protected resolveColor(id: string, index: number) { return this.props.colorMap?.[id] ?? `chart-palette-order-${index + 1}`; } - protected tooltipValueFormatter( - value?: string | number | null | typeof interpolateValue | Date, - ): string { - const { tooltipValueFormatter } = this.asProps; - - if (tooltipValueFormatter) { - return tooltipValueFormatter(value); - } + protected defaultTooltipFormatter(value?: unknown): string { + const { locale } = this.asProps; if (value === undefined || value === interpolateValue) { return NOT_A_VALUE; @@ -381,12 +380,41 @@ export abstract class AbstractChart< } if (value instanceof Date) { - return value.toDateString(); + return new Intl.DateTimeFormat(locale, { + weekday: 'long', + month: 'long', + day: 'numeric', + year: 'numeric', + }).format(value); + } + + if (typeof value === 'number' && !Number.isNaN(value)) { + return new Intl.NumberFormat(locale, { + minimumFractionDigits: Number.isInteger(value) ? 0 : 1, + maximumFractionDigits: Number.isInteger(value) ? 0 : 1, + roundingMode: 'halfExpand', + }).format(value); } return value.toString(); } + protected tooltipValueFormatter(value?: unknown): string { + const { tooltipValueFormatter } = this.asProps; + + if (tooltipValueFormatter) return tooltipValueFormatter(value); + + return this.defaultTooltipFormatter(value); + } + + protected tooltipTitleFormatter(value?: unknown): string { + const { tooltipTitleFormatter } = this.asProps; + + if (tooltipTitleFormatter) return tooltipTitleFormatter(value); + + return this.defaultTooltipFormatter(value); + } + protected defaultLegendProps(): Partial { return { legendType: 'Flex', @@ -404,13 +432,14 @@ export abstract class AbstractChart< return null; } - const { dataDefinitions, withTrend } = this.state; + const { dataDefinitions, withTrend, highlightedItem } = this.state; const lProps = { ...this.defaultLegendProps(), ...legendProps, }; - const commonLegendProps: LegendFlexProps | LegendTableProps = { + const commonLegendProps: (LegendFlexProps | LegendTableProps) & { highlightedItem: State['highlightedItem'] } = { + highlightedItem, 'dataHints': this.dataHints, 'items': dataDefinitions, 'size': lProps.size, @@ -508,34 +537,70 @@ export abstract class AbstractChart< ); } + protected getPercentDelta(key: ObjectDataKey, index: number, data: Data) { + const { getPercentDelta: customGetPercenDelta } = this.asProps; + + if (customGetPercenDelta) { + const customDelta = customGetPercenDelta(key, index, data); + + if (customDelta === null) return null; + + return Number(customDelta.toFixed(1)); + } + + if (index === 0) return null; + + if (!Array.isArray(data)) return null; + + const prev = data[index - 1][key]; + const curr = data[index][key]; + + if (typeof prev !== 'number' || typeof curr !== 'number') return null; + + if (prev === 0) return curr === 0 ? 0 : null; + + const percent = ((curr - prev) / Math.abs(prev)) * 100; + + return Number(percent.toFixed(1)); + } + protected getTooltipChildren(options: { Tooltip: typeof HoverLine['Tooltip'] | typeof HoverRect['Tooltip']; dataItem: D; + index: number; }) { - const STooltipChildrenWrapper = Root; - const { Tooltip, dataItem } = options; + const STooltipChildrenWrapper = Box; + const { Tooltip, dataItem, index } = options; - const { styles, groupKey } = this.asProps; + const { styles, groupKey, showDeltaPercentInTooltip, data } = this.asProps; const { dataDefinitions } = this.state; - const title = dataItem[groupKey as keyof D]?.toString(); + const title = this.tooltipTitleFormatter(dataItem[groupKey as keyof D]); + + const percentDeltas = showDeltaPercentInTooltip + ? dataDefinitions.map(({ id }) => this.getPercentDelta(id, index, data)) + : []; + const hasPercentDeltas = percentDeltas.length > 0 && percentDeltas.some((value) => value !== null); + const columnsCount = hasPercentDeltas ? 3 : 2; return sstyled(styles)( { title && {title} } - {dataDefinitions.map((item) => { + {dataDefinitions.map((item, idx) => { + const delta = percentDeltas[idx] ?? null; + return ( item.checked && ( {item.label} - {this.tooltipValueFormatter(dataItem[item.id] as string)} + {this.tooltipValueFormatter(dataItem[item.id])} + {hasPercentDeltas && this.renderTooltipPercentDelta(delta)} ) ); @@ -547,26 +612,53 @@ export abstract class AbstractChart< ); } + private getTooltipPercentDeltaTrend(delta: number | null): TooltipPercentDeltaTrend { + if (delta === null) return 'unknown'; + if (delta > 0) return 'upward'; + if (delta < 0) return 'downward'; + return 'stable'; + } + + protected renderTooltipPercentDelta(delta: number | null) { + const { styles } = this.asProps; + const trend = this.getTooltipPercentDeltaTrend(delta); + const STooltipDeltaWrapper = Flex; + const STooltipDeltaIcon = trend === 'upward' ? DiffUp : DiffDown; + + return sstyled(styles)( + + {(trend === 'upward' || trend === 'downward') && } + {trend !== 'unknown' && {Math.abs(delta!)}%} + , + ); + } + protected renderTooltipTotalLine(dataItem: D) { - const { showTotalInTooltip } = this.asProps; + const { showTotalInTooltip, styles } = this.asProps; if (!showTotalInTooltip) { return null; } + const STooltipDivider = Divider; + const total = this.totalValue(dataItem); - return ( + return sstyled(styles)( <> - Total - {Number.isNaN(total) ? NOT_A_VALUE : total} - + + Total + {Number.isNaN(total) ? NOT_A_VALUE : this.tooltipValueFormatter(total)} + , ); } public render() { const SChart = Root; - const { styles, data, patterns, a11yAltTextConfig, duration, eventEmitter, showTooltip } = + const { styles, data, patterns, a11yAltTextConfig, duration, eventEmitter, showTooltip, locale } = this.asProps; const { plotWidth, plotHeight } = this; @@ -585,6 +677,7 @@ export abstract class AbstractChart< patterns={patterns} duration={duration} eventEmitter={eventEmitter} + locale={locale} {...extractedAriaProps} > {this.renderAxis()} diff --git a/semcore/d3-chart/src/component/Chart/AbstractChart.type.ts b/semcore/d3-chart/src/component/Chart/AbstractChart.type.ts index edcc2fef8e..35efaabc63 100644 --- a/semcore/d3-chart/src/component/Chart/AbstractChart.type.ts +++ b/semcore/d3-chart/src/component/Chart/AbstractChart.type.ts @@ -43,7 +43,8 @@ export type BaseLegendProps = BaseChartLegendProps & { } ); -export type ObjectData = Record; +export type ObjectDataKey = string; +export type ObjectData = Record; export type ListData = ObjectData[]; /** @@ -110,6 +111,14 @@ export type BaseChartProps = NSFlex.Props & { * Show sum of values for selected point in tooltip */ showTotalInTooltip?: boolean; + /** + * Show the percentage change from the previous point in the tooltip + */ + showDeltaPercentInTooltip?: boolean; + /** + * Overrides the default percentage delta calculation. + */ + getPercentDelta?: (key: ObjectDataKey, index: number, data: T) => number | null; /** * Scale for xAxis (see more in d3-scale) */ @@ -140,9 +149,13 @@ export type BaseChartProps = NSFlex.Props & { axisXValueFormatter?: (value: unknown) => string; axisYValueFormatter?: (value: unknown) => string; /** - * Function for format text for tooltip + * Function to format values in tooltip */ tooltipValueFormatter?: (value?: unknown) => string; + /** + * Function to format tooltip's title + */ + tooltipTitleFormatter?: (title?: unknown) => string; /** * Custom event emitter. Could be useful to handle event on few charts at the same time. */ @@ -171,6 +184,11 @@ export type BaseChartProps = NSFlex.Props & { * Props for Legend */ legendProps?: Partial; + /** + * Locale for displaying the days of a week and months, to be transferred to `Intl` + * @default en + * */ + locale?: NavigatorLanguage['language']; } & ( | { /** diff --git a/semcore/d3-chart/src/component/Chart/AreaChart.tsx b/semcore/d3-chart/src/component/Chart/AreaChart.tsx index 2c9a0203c0..80624f394c 100644 --- a/semcore/d3-chart/src/component/Chart/AreaChart.tsx +++ b/semcore/d3-chart/src/component/Chart/AreaChart.tsx @@ -27,6 +27,7 @@ class AreaChartComponent extends AbstractChart< showXAxis: true, showYAxis: true, showTooltip: true, + locale: 'en', } as const; get xScale() { @@ -49,7 +50,7 @@ class AreaChartComponent extends AbstractChart< } get yScale(): ScaleLinear { - const { yScale, marginX = 24, stacked } = this.asProps; + const { yScale, marginX = 32, stacked } = this.asProps; const { plotHeight } = this; if (yScale) { @@ -67,7 +68,7 @@ class AreaChartComponent extends AbstractChart< renderChart() { const { groupKey, curve, showDots, stacked, onClickArea } = this.asProps; - const { dataDefinitions, highlightedLine } = this.state; + const { dataDefinitions, highlightedItem } = this.state; if (stacked) { return ( @@ -80,11 +81,11 @@ class AreaChartComponent extends AbstractChart< y={item.id} key={item.id} color={item.color} - transparent={highlightedLine !== -1 && highlightedLine !== index} + transparent={highlightedItem !== -1 && highlightedItem !== index} curve={curve} onClick={onClickArea} > - {showDots && } + ) ); @@ -101,11 +102,11 @@ class AreaChartComponent extends AbstractChart< y={item.id} key={item.id} color={item.color} - transparent={highlightedLine !== -1 && highlightedLine !== index} + transparent={highlightedItem !== -1 && highlightedItem !== index} curve={curve} onClick={onClickArea} > - {showDots && } + ) ); @@ -124,6 +125,7 @@ class AreaChartComponent extends AbstractChart< children: this.getTooltipChildren({ Tooltip: HoverLine.Tooltip, dataItem, + index: xIndex, }), }; }} diff --git a/semcore/d3-chart/src/component/Chart/AreaChart.type.ts b/semcore/d3-chart/src/component/Chart/AreaChart.type.ts index edec722ed7..0697a682e2 100644 --- a/semcore/d3-chart/src/component/Chart/AreaChart.type.ts +++ b/semcore/d3-chart/src/component/Chart/AreaChart.type.ts @@ -30,6 +30,7 @@ export type AreaChartDefaultProps = { showXAxis: true; showYAxis: true; showTooltip: true; + locale: 'en'; }; export type AreaChartType = Intergalactic.Component & { showLegend?: boolean } & AriaNameProps>; diff --git a/semcore/d3-chart/src/component/Chart/BarChart.tsx b/semcore/d3-chart/src/component/Chart/BarChart.tsx index aa8e761a11..3b7eeadf81 100644 --- a/semcore/d3-chart/src/component/Chart/BarChart.tsx +++ b/semcore/d3-chart/src/component/Chart/BarChart.tsx @@ -30,6 +30,7 @@ class BarChartComponent extends AbstractChart< showXAxis: true, showYAxis: true, showTooltip: true, + locale: 'en', } as const; get xScale() { @@ -85,7 +86,7 @@ class BarChartComponent extends AbstractChart< renderChart() { const { groupKey, type = 'group', invertAxis } = this.asProps; - const { dataDefinitions, highlightedLine } = this.state; + const { dataDefinitions, highlightedItem } = this.state; if (dataDefinitions.length === 1) { const item = dataDefinitions[0]; @@ -116,7 +117,7 @@ class BarChartComponent extends AbstractChart< const commonBarComponentProps: BarProps = { color: item.color, - transparent: highlightedLine !== -1 && highlightedLine !== index, + transparent: highlightedItem !== -1 && highlightedItem !== index, onClick: this.handleClickBar, }; @@ -143,7 +144,7 @@ class BarChartComponent extends AbstractChart< const commonBarComponentProps: BarProps = { color: item.color, - transparent: highlightedLine !== -1 && highlightedLine !== index, + transparent: highlightedItem !== -1 && highlightedItem !== index, onClick: this.handleClickBar, }; @@ -182,6 +183,7 @@ class BarChartComponent extends AbstractChart< children: this.getTooltipChildren({ Tooltip: HoverRect.Tooltip, dataItem, + index, }), }; }} @@ -266,7 +268,7 @@ class BarChartComponent extends AbstractChart< private get categoryScale() { const { marginY = 40, - marginX = 24, + marginX = 32, invertAxis, data, groupKey, @@ -290,7 +292,7 @@ class BarChartComponent extends AbstractChart< } private get valueScale() { - const { marginY = 40, marginX = 24, invertAxis, type } = this.asProps; + const { marginY = 40, marginX = 32, 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/BarChart.type.ts b/semcore/d3-chart/src/component/Chart/BarChart.type.ts index 68f20b2935..f18d96012a 100644 --- a/semcore/d3-chart/src/component/Chart/BarChart.type.ts +++ b/semcore/d3-chart/src/component/Chart/BarChart.type.ts @@ -37,6 +37,7 @@ export type BarChartDefaultProps = { showXAxis: true; showYAxis: true; showTooltip: true; + locale: 'en'; }; export type BarChartType = Intergalactic.Component; diff --git a/semcore/d3-chart/src/component/Chart/BubbleChart.tsx b/semcore/d3-chart/src/component/Chart/BubbleChart.tsx index fde5fc39d7..5c4dc35132 100644 --- a/semcore/d3-chart/src/component/Chart/BubbleChart.tsx +++ b/semcore/d3-chart/src/component/Chart/BubbleChart.tsx @@ -1,4 +1,5 @@ -import { createComponent } from '@semcore/core'; +import { Box, Flex } from '@semcore/base-components'; +import { createComponent, sstyled } from '@semcore/core'; import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance'; import { Text } from '@semcore/typography'; import { scaleLinear, type ScaleLinear } from 'd3-scale'; @@ -29,6 +30,7 @@ class BubbleChartComponent extends AbstractChart< showXAxis: true, showYAxis: true, showTooltip: true, + locale: 'en', } as const; protected get dataKeys(): string[] { @@ -122,26 +124,25 @@ class BubbleChartComponent extends AbstractChart< return ( {({ index, data }: any) => { + const { styles } = this.asProps; + const STooltipChildrenWrapper = Box; + return { - children: ( - <> + children: sstyled(styles)( + Data - - X axis - {' '} - {data[index].x} - - - Y axis - {' '} - {data[index].y} - - - Value - {' '} - {data[index].value} - - + + X axis + {data[index].x} + Y axis + {data[index].y} + Value + {data[index].value} + + , ), }; }} diff --git a/semcore/d3-chart/src/component/Chart/BubbleChart.type.ts b/semcore/d3-chart/src/component/Chart/BubbleChart.type.ts index 3561b2ebf1..c33ba7d09a 100644 --- a/semcore/d3-chart/src/component/Chart/BubbleChart.type.ts +++ b/semcore/d3-chart/src/component/Chart/BubbleChart.type.ts @@ -19,7 +19,7 @@ export type BubbleChartData = Array<{ export type BubbleChartProps = Intergalactic.InternalTypings.EfficientOmit< BaseChartProps, - 'showTotalInTooltip' + 'showTotalInTooltip' | 'showDeltaPercentInTooltip' | 'getPercentDelta' > & { /** Field name that groups the data points */ groupKey?: never; @@ -36,6 +36,7 @@ export type BubbleChartDefaultProps = { showXAxis: true; showYAxis: true; showTooltip: true; + locale: 'en'; }; export type BubbleChartType = Intergalactic.Component; diff --git a/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx b/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx index 63716ad719..80bcbaf54e 100644 --- a/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx +++ b/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx @@ -58,6 +58,7 @@ class CigaretteChartComponent extends AbstractChart< showPercentValueInTooltip: false, minimalBarWidth: DEFAULT_MINIMAL_BAR_WIDTH, direction: invertAxis ? 'column' : 'row', + locale: 'en', } as const; }; @@ -242,7 +243,7 @@ class CigaretteChartComponent extends AbstractChart< renderChart() { const { invertAxis, data, uid, duration, patterns, onClick } = this.asProps; - const { dataDefinitions, highlightedLine } = this.state; + const { dataDefinitions, highlightedItem } = this.state; const { plotWidth, plotHeight } = this; this.offset = 0; @@ -321,7 +322,7 @@ class CigaretteChartComponent extends AbstractChart< direction={invertAxis ? 'horizontal' : 'vertical'} onClick={onClick} hovered={ - highlightedLine === index ? true : highlightedLine === -1 ? undefined : false + highlightedItem === index ? true : highlightedItem === -1 ? undefined : false } /> ); @@ -378,7 +379,7 @@ class CigaretteChartComponent extends AbstractChart< {item.label} - { showPercentColumn && {this.percentValue(data, item.id)} } + { showPercentColumn && {this.percentValue(data, item.id)} } {this.tooltipValueFormatter(data[item.id])} , ), @@ -388,9 +389,7 @@ class CigaretteChartComponent extends AbstractChart< return { children: sstyled(styles)( - {tooltipTitle && ( - {tooltipTitle} - )} + {tooltipTitle && ({this.tooltipTitleFormatter(tooltipTitle)})} {dataDefinitions.map((item) => { @@ -401,14 +400,14 @@ class CigaretteChartComponent extends AbstractChart< {item.label} - { showPercentColumn && {this.percentValue(data, item.id)} } + { showPercentColumn && {this.percentValue(data, item.id)} } {this.tooltipValueFormatter(data[item.id])} ) ); })} - {this.renderTooltipTotalLine(data)} + {this.renderTooltipTotalLine()} , ), @@ -439,21 +438,22 @@ class CigaretteChartComponent extends AbstractChart< return NOT_A_VALUE; } - protected override renderTooltipTotalLine(dataItem: D) { - const { showTotalInTooltip, showPercentValueInTooltip } = this.asProps; + protected override renderTooltipTotalLine() { + const { showTotalInTooltip, showPercentValueInTooltip, styles } = this.asProps; if (!showTotalInTooltip) { return null; } - + const STooltipDivider = Divider; const total = this.totalValue(); - return ( + return sstyled(styles)( <> - Total - { showPercentValueInTooltip && total !== 0 && {Number.isNaN(total) ? NOT_A_VALUE : '100%'} } - {Number.isNaN(total) ? NOT_A_VALUE : total} - + + Total + { showPercentValueInTooltip && total !== 0 && {Number.isNaN(total) ? NOT_A_VALUE : '100%'} } + {Number.isNaN(total) ? NOT_A_VALUE : this.tooltipValueFormatter(total)} + , ); } diff --git a/semcore/d3-chart/src/component/Chart/CigaretteChart.type.ts b/semcore/d3-chart/src/component/Chart/CigaretteChart.type.ts index 01f016423a..addcd57a8e 100644 --- a/semcore/d3-chart/src/component/Chart/CigaretteChart.type.ts +++ b/semcore/d3-chart/src/component/Chart/CigaretteChart.type.ts @@ -10,7 +10,7 @@ export type CigaretteChartData = Record, - 'xScale' | 'yScale' + 'xScale' | 'yScale' | 'showDeltaPercentInTooltip' | 'getPercentDelta' > & { /** Title text displayed in the tooltip */ tooltipTitle?: string; @@ -43,6 +43,7 @@ export type CigaretteChartDefaultProps = { plotHeight: CigaretteChartProps['plotHeight']; showPercentValueInTooltip: false; minimalBarWidth: 2; + locale: 'en'; }; export type CigaretteChartType = Intergalactic.Component<'div', CigaretteChartProps>; diff --git a/semcore/d3-chart/src/component/Chart/CompactHorizontalBarChart.tsx b/semcore/d3-chart/src/component/Chart/CompactHorizontalBarChart.tsx index 18871b75cc..35cbf9907e 100644 --- a/semcore/d3-chart/src/component/Chart/CompactHorizontalBarChart.tsx +++ b/semcore/d3-chart/src/component/Chart/CompactHorizontalBarChart.tsx @@ -31,6 +31,7 @@ class CompactHorizontalBarChartComponent extends AbstractChart< showYAxis: false, showTooltip: true, showLegend: false, + locale: 'en', } as const; static enhance = [i18nEnhance(localizedMessages)] as const; diff --git a/semcore/d3-chart/src/component/Chart/CompactHorizontalBarChart.type.ts b/semcore/d3-chart/src/component/Chart/CompactHorizontalBarChart.type.ts index 12e0850fa5..306bc98f10 100644 --- a/semcore/d3-chart/src/component/Chart/CompactHorizontalBarChart.type.ts +++ b/semcore/d3-chart/src/component/Chart/CompactHorizontalBarChart.type.ts @@ -11,7 +11,7 @@ export type CompactHorizontalBarChartData = Array, - 'showTotalInTooltip' + 'showTotalInTooltip' | 'showDeltaPercentInTooltip' | 'getPercentDelta' > & { /** Field name from data array for the x-axis values */ x: string; @@ -35,6 +35,7 @@ export type CompactHorizontalBarChartDefaultProps = { showYAxis: false; showTooltip: true; showLegend: false; + locale: 'en'; }; export type CompactHorizontalBarChartType = Intergalactic.Component< diff --git a/semcore/d3-chart/src/component/Chart/DonutChart.tsx b/semcore/d3-chart/src/component/Chart/DonutChart.tsx index 4cbf344fce..b4772608cc 100644 --- a/semcore/d3-chart/src/component/Chart/DonutChart.tsx +++ b/semcore/d3-chart/src/component/Chart/DonutChart.tsx @@ -27,6 +27,7 @@ class DonutChartComponent extends AbstractChart< innerRadius: 100, marginX: 0, marginY: 0, + locale: 'en', } as const; static enhance = [i18nEnhance(localizedMessages)] as const; @@ -59,7 +60,7 @@ class DonutChartComponent extends AbstractChart< renderChart() { const { innerRadius, halfsize, innerLabel, onClickPie } = this.asProps; - const { dataDefinitions, highlightedLine } = this.state; + const { dataDefinitions, highlightedItem } = this.state; const checkedLegendItems = dataDefinitions.filter((item) => item.checked); @@ -73,7 +74,7 @@ class DonutChartComponent extends AbstractChart< dataKey={item.id} name={item.label} color={item.color} - active={highlightedLine === index} + active={highlightedItem === index} /> ); })} @@ -94,7 +95,7 @@ class DonutChartComponent extends AbstractChart< return { children: ( <> - {title?.label || dataKey} + {this.tooltipTitleFormatter(title?.label || dataKey)} {this.tooltipValueFormatter(data[dataKey])} diff --git a/semcore/d3-chart/src/component/Chart/DonutChart.type.ts b/semcore/d3-chart/src/component/Chart/DonutChart.type.ts index d12edad65d..ed914aca7d 100644 --- a/semcore/d3-chart/src/component/Chart/DonutChart.type.ts +++ b/semcore/d3-chart/src/component/Chart/DonutChart.type.ts @@ -11,7 +11,7 @@ export type DonutChartData = Record; export type DonutChartProps = Intergalactic.InternalTypings.EfficientOmit< BaseChartProps, - 'showTotalInTooltip' + 'showTotalInTooltip' | 'showDeltaPercentInTooltip' | 'getPercentDelta' > & { /** Internal */ groupKey?: never; @@ -35,6 +35,7 @@ export type DonutChartDefaultProps = { innerRadius: 100; marginX: 0; marginY: 0; + locale: 'en'; }; export type DonutChartType = Intergalactic.Component; diff --git a/semcore/d3-chart/src/component/Chart/HistogramChart.tsx b/semcore/d3-chart/src/component/Chart/HistogramChart.tsx index 7bcdaf5ec6..4f02682259 100644 --- a/semcore/d3-chart/src/component/Chart/HistogramChart.tsx +++ b/semcore/d3-chart/src/component/Chart/HistogramChart.tsx @@ -27,6 +27,7 @@ class HistogramChartComponent extends AbstractChart< showXAxis: true, showYAxis: true, showTooltip: true, + locale: 'en', } as const; get xScale() { @@ -114,7 +115,7 @@ class HistogramChartComponent extends AbstractChart< renderChart() { const { groupKey, invertAxis } = this.asProps; - const { dataDefinitions, highlightedLine } = this.state; + const { dataDefinitions, highlightedItem } = this.state; if (this.isStack) { return ( @@ -124,7 +125,7 @@ class HistogramChartComponent extends AbstractChart< const commonBarComponentProps: BarProps = { color: item.color, - transparent: highlightedLine !== -1 && highlightedLine !== index, + transparent: highlightedItem !== -1 && highlightedItem !== index, }; if (invertAxis) { @@ -170,6 +171,7 @@ class HistogramChartComponent extends AbstractChart< children: this.getTooltipChildren({ Tooltip: HoverRect.Tooltip, dataItem, + index, }), }; }} diff --git a/semcore/d3-chart/src/component/Chart/HistogramChart.type.ts b/semcore/d3-chart/src/component/Chart/HistogramChart.type.ts index 4e9ee2e974..091b96689c 100644 --- a/semcore/d3-chart/src/component/Chart/HistogramChart.type.ts +++ b/semcore/d3-chart/src/component/Chart/HistogramChart.type.ts @@ -20,6 +20,7 @@ export type HistogramChartDefaultProps = { showXAxis: true; showYAxis: true; showTooltip: true; + locale: 'en'; }; export type HistogramChartType = Intergalactic.Component; diff --git a/semcore/d3-chart/src/component/Chart/LineChart.tsx b/semcore/d3-chart/src/component/Chart/LineChart.tsx index 18c199aa18..fc43b3dada 100644 --- a/semcore/d3-chart/src/component/Chart/LineChart.tsx +++ b/semcore/d3-chart/src/component/Chart/LineChart.tsx @@ -27,6 +27,7 @@ class LineChartComponent extends AbstractChart< showXAxis: true, showYAxis: true, showTooltip: true, + locale: 'en', } as const; protected get xScale() { @@ -49,7 +50,7 @@ class LineChartComponent extends AbstractChart< } protected get yScale(): ScaleLinear { - const { yScale, marginX = 30 } = this.asProps; + const { yScale, marginX = 32 } = this.asProps; const { plotHeight } = this; if (yScale) { @@ -68,7 +69,7 @@ class LineChartComponent extends AbstractChart< protected renderChart() { const { groupKey, curve, showDots, area, areaCurve, onClickLine } = this.asProps; - const { dataDefinitions, highlightedLine } = this.state; + const { dataDefinitions, highlightedItem } = this.state; return dataDefinitions.map((item, index) => { return ( @@ -78,11 +79,11 @@ class LineChartComponent extends AbstractChart< y={item.id} key={item.id} color={item.color} - transparent={highlightedLine !== -1 && highlightedLine !== index} + transparent={highlightedItem !== -1 && highlightedItem !== index} curve={curve} onClick={onClickLine} > - {showDots && } + {area?.[item.id] && ( )} @@ -104,6 +105,7 @@ class LineChartComponent extends AbstractChart< children: this.getTooltipChildren({ Tooltip: HoverLine.Tooltip, dataItem, + index: xIndex, }), }; }} diff --git a/semcore/d3-chart/src/component/Chart/LineChart.type.ts b/semcore/d3-chart/src/component/Chart/LineChart.type.ts index c932a8cdd0..2c0d233e11 100644 --- a/semcore/d3-chart/src/component/Chart/LineChart.type.ts +++ b/semcore/d3-chart/src/component/Chart/LineChart.type.ts @@ -39,6 +39,7 @@ export type LineChartDefaultProps = { showXAxis: true; showYAxis: true; showTooltip: true; + locale: 'en'; }; export type LineChartType = Intergalactic.Component; diff --git a/semcore/d3-chart/src/component/Chart/RadarChart.tsx b/semcore/d3-chart/src/component/Chart/RadarChart.tsx index 831394140c..7872ce2992 100644 --- a/semcore/d3-chart/src/component/Chart/RadarChart.tsx +++ b/semcore/d3-chart/src/component/Chart/RadarChart.tsx @@ -25,6 +25,7 @@ class RadarChartComponent extends AbstractChart< showXAxis: true, showYAxis: true, showTooltip: true, + locale: 'en', } as const; protected renderChart(): React.ReactNode { @@ -66,7 +67,7 @@ class RadarChartComponent extends AbstractChart< return { children: ( <> - {data[groupKey]?.[index]} + {this.tooltipTitleFormatter(data[groupKey]?.[index])} {dataDefinitions.map((item) => { const value = data[item.id]?.[index]; diff --git a/semcore/d3-chart/src/component/Chart/RadarChart.type.ts b/semcore/d3-chart/src/component/Chart/RadarChart.type.ts index 2d5746106e..251979c3fd 100644 --- a/semcore/d3-chart/src/component/Chart/RadarChart.type.ts +++ b/semcore/d3-chart/src/component/Chart/RadarChart.type.ts @@ -8,7 +8,7 @@ export type RadarChartData = Record; export type RadarChartProps = Intergalactic.InternalTypings.EfficientOmit< BaseChartProps, - 'showTotalInTooltip' | 'showPercentValueInTooltip' + 'showTotalInTooltip' | 'showPercentValueInTooltip' | 'showDeltaPercentInTooltip' | 'getPercentDelta' > & { groupKey: string; scale?: ScaleLinear; @@ -25,6 +25,7 @@ export type RadarChartDefaultProps = { showXAxis: true; showYAxis: true; showTooltip: true; + locale: 'en'; }; export type RadarChartType = Intergalactic.Component; diff --git a/semcore/d3-chart/src/component/Chart/ScatterPlotChart.tsx b/semcore/d3-chart/src/component/Chart/ScatterPlotChart.tsx index b690889335..bb6efd80f2 100644 --- a/semcore/d3-chart/src/component/Chart/ScatterPlotChart.tsx +++ b/semcore/d3-chart/src/component/Chart/ScatterPlotChart.tsx @@ -1,4 +1,5 @@ -import { createComponent } from '@semcore/core'; +import { Box } from '@semcore/base-components'; +import { createComponent, sstyled } from '@semcore/core'; import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance'; import { Text } from '@semcore/typography'; import { type ScaleLinear, scaleLinear, scaleTime } from 'd3-scale'; @@ -31,6 +32,7 @@ class ScatterPlotChartComponent extends AbstractChart< showYAxis: true, showTooltip: true, showLegend: false, + locale: 'en', } as const; static enhance = [i18nEnhance(localizedMessages)] as const; @@ -119,19 +121,24 @@ class ScatterPlotChartComponent extends AbstractChart< return ( {({ index, x, y }: any) => { + const { styles } = this.asProps; + const STooltipChildrenWrapper = Box; + return { - children: ( + children: sstyled(styles)( <> Data - - X axis - {this.tooltipValueFormatter(data[index][x])} - - - Y axis - {this.tooltipValueFormatter(data[index][y])} - - + + X axis + {this.tooltipValueFormatter(data[index][x])} + Y axis + {this.tooltipValueFormatter(data[index][y])} + + , ), }; }} diff --git a/semcore/d3-chart/src/component/Chart/ScatterPlotChart.type.ts b/semcore/d3-chart/src/component/Chart/ScatterPlotChart.type.ts index ab57525a9e..4f6c5f8819 100644 --- a/semcore/d3-chart/src/component/Chart/ScatterPlotChart.type.ts +++ b/semcore/d3-chart/src/component/Chart/ScatterPlotChart.type.ts @@ -9,7 +9,7 @@ export type ScatterPlotChartData = Array, - 'showTotalInTooltip' + 'showTotalInTooltip' | 'showDeltaPercentInTooltip' | 'getPercentDelta' > & { /** Field name that groups the data points */ groupKey: string; @@ -29,6 +29,7 @@ export type ScatterPlotChartDefaultProps = { showYAxis: true; showTooltip: true; showLegend: false; + locale: 'en'; }; export type ScatterPlotChartType = Intergalactic.Component; diff --git a/semcore/d3-chart/src/component/Chart/VennChart.tsx b/semcore/d3-chart/src/component/Chart/VennChart.tsx index a9c150a0b8..250008b7d8 100644 --- a/semcore/d3-chart/src/component/Chart/VennChart.tsx +++ b/semcore/d3-chart/src/component/Chart/VennChart.tsx @@ -27,6 +27,7 @@ class VennChartComponent extends AbstractChart< alignItems: 'flex-start', marginY: 0, marginX: 0, + locale: 'en', } as const; static enhance = [i18nEnhance(localizedMessages)] as const; @@ -71,7 +72,7 @@ class VennChartComponent extends AbstractChart< renderChart() { const { data, onClickVennItem } = this.asProps; - const { dataDefinitions, highlightedLine } = this.state; + const { dataDefinitions, highlightedItem } = this.state; const checkedLegendItems = dataDefinitions.filter((item) => item.checked); const checkedLegendItemsMap = checkedLegendItems.reduce>( @@ -102,7 +103,7 @@ class VennChartComponent extends AbstractChart< dataKey={item.id} name={item.label} color={item.color} - transparent={highlightedLine !== -1 && highlightedLine !== index} + transparent={highlightedItem !== -1 && highlightedItem !== index} /> ); })} @@ -137,8 +138,8 @@ class VennChartComponent extends AbstractChart< return { children: ( <> - {name} - {data[dataKey]} + {this.tooltipTitleFormatter(name)} + {this.tooltipValueFormatter(data[dataKey])} ), }; diff --git a/semcore/d3-chart/src/component/Chart/VennChart.type.ts b/semcore/d3-chart/src/component/Chart/VennChart.type.ts index e8166752db..da1bf14f3e 100644 --- a/semcore/d3-chart/src/component/Chart/VennChart.type.ts +++ b/semcore/d3-chart/src/component/Chart/VennChart.type.ts @@ -10,7 +10,7 @@ export type VennChartData = Record; export type VennChartProps = Intergalactic.InternalTypings.EfficientOmit< BaseChartProps, - 'showTotalInTooltip' + 'showTotalInTooltip' | 'showDeltaPercentInTooltip' | 'getPercentDelta' > & { /** Internal */ groupKey?: never; @@ -27,6 +27,7 @@ export type VennChartDefaultProps = { alignItems: 'flex-start'; marginY: 0; marginX: 0; + locale: 'en'; }; export type VennChartType = Intergalactic.Component; diff --git a/semcore/d3-chart/src/component/ChartLegend/BaseLegend.tsx b/semcore/d3-chart/src/component/ChartLegend/BaseLegend.tsx index 9ec2cdff53..c07d15bf7c 100644 --- a/semcore/d3-chart/src/component/ChartLegend/BaseLegend.tsx +++ b/semcore/d3-chart/src/component/ChartLegend/BaseLegend.tsx @@ -5,11 +5,14 @@ import type { LegendProps } from './BaseLegend.type'; import { type LegendItemKey, type LegendItemProps, type ShapeType } from './LegendItem/LegendItem.type'; import { makeDataHintsHandlers } from '../../a11y/hints'; +type InnerProps = { + highlightedItem?: number; +}; export abstract class BaseLegend< P extends LegendProps, E extends readonly ((...args: any[]) => any)[] = never[], DP extends Intergalactic.InternalTypings.ValidDefaultProps = never, -> extends Component { +> extends Component { componentDidMount() { this.setHints(); } @@ -43,7 +46,7 @@ export abstract class BaseLegend< _: {}, index: number, ): LegendItemProps & Intergalactic.InternalTypings.ComponentPropsNesting<'div'> { - const { shape = 'Checkbox', size = 'm', patterns } = this.asProps; + const { shape = 'Checkbox', size = 'm', patterns, highlightedItem } = this.asProps; const line = this.getItem(index); return { @@ -57,6 +60,7 @@ export abstract class BaseLegend< onMouseLeave: this.bindOnMouseLeaveItem(line.id), style: { gridRowStart: `${index + 1}`, gridRowEnd: `${index + 2}` }, patterns, + transparent: highlightedItem !== undefined && (highlightedItem !== -1 && highlightedItem !== index), }; } diff --git a/semcore/d3-chart/src/component/ChartLegend/BaseLegend.type.ts b/semcore/d3-chart/src/component/ChartLegend/BaseLegend.type.ts index 14f7dd1237..0adb63fc89 100644 --- a/semcore/d3-chart/src/component/ChartLegend/BaseLegend.type.ts +++ b/semcore/d3-chart/src/component/ChartLegend/BaseLegend.type.ts @@ -18,7 +18,7 @@ export type BaseChartLegendProps = NSFlex.Props & */ shape?: ShapeType; /** - * Handler for change visible for data items. Doesn't work if Shape one of 'Circle' | 'Line' | 'Square' + * Handler for change visible for data items. Doesn't work if `shape` is 'Circle'. */ onChangeVisibleItem?: (key: LegendItemKey, isVisible: boolean) => void; diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendFlex/legend-flex.shadow.css b/semcore/d3-chart/src/component/ChartLegend/LegendFlex/legend-flex.shadow.css index 7e981a8a7a..f62bebd282 100644 --- a/semcore/d3-chart/src/component/ChartLegend/LegendFlex/legend-flex.shadow.css +++ b/semcore/d3-chart/src/component/ChartLegend/LegendFlex/legend-flex.shadow.css @@ -2,11 +2,11 @@ SLegendFlex[direction='row'] { align-items: flex-start; align-content: flex-start; flex-wrap: wrap; - gap: 8px 16px; + gap: var(--intergalactic-spacing-content-gap-large, 8px) var(--intergalactic-spacing-content-gap-xxlarge, 16px); } SLegendFlex[direction='column'] { align-items: flex-start; flex-wrap: wrap; - gap: 8px; + gap: var(--intergalactic-spacing-content-gap-large, 8px); } diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendItem/LegendItem.tsx b/semcore/d3-chart/src/component/ChartLegend/LegendItem/LegendItem.tsx index 4a09ed6e6b..2735854135 100644 --- a/semcore/d3-chart/src/component/ChartLegend/LegendItem/LegendItem.tsx +++ b/semcore/d3-chart/src/component/ChartLegend/LegendItem/LegendItem.tsx @@ -52,8 +52,20 @@ class LegendItemRoot extends Component< } getShapeProps() { - const { checked, color, shape, label, id, size, resolveColor, patterns, onChangeLegendItem, onFocusLegendItem, onBlurLegendItem } = - this.asProps; + const { + checked, + color, + shape, + label, + id, + size, + resolveColor, + patterns, + onChangeLegendItem, + onFocusLegendItem, + onBlurLegendItem, + } = this.asProps; + return { label, shape, @@ -82,7 +94,7 @@ class LegendItemRoot extends Component< } getIconProps() { - const props = this.asProps; + const { onMouseEnter, onMouseLeave, ...props } = this.asProps; return { ...props, @@ -96,7 +108,7 @@ class LegendItemRoot extends Component< } getLabelProps() { - const { id, checked, color: _color, onChangeLegendItem, shape: _shape, ...props } = this.asProps; + const { id, checked, color: _color, onChangeLegendItem, shape: _shape, onMouseEnter, onMouseLeave, ...props } = this.asProps; return { ...props, diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendItem/LegendItem.type.ts b/semcore/d3-chart/src/component/ChartLegend/LegendItem/LegendItem.type.ts index ec211b3f25..8fdf3b274e 100644 --- a/semcore/d3-chart/src/component/ChartLegend/LegendItem/LegendItem.type.ts +++ b/semcore/d3-chart/src/component/ChartLegend/LegendItem/LegendItem.type.ts @@ -76,6 +76,8 @@ export type LegendItemProps = LegendItem & { * Handler for focus out legend item */ onBlurLegendItem: (id: LegendItemKey) => void; + /** Enables element transparency */ + transparent?: boolean; }; export type LegendItemDefaultProps = { @@ -96,7 +98,7 @@ export type ShapeProps = LegendItem & } ); -export const StaticShapes = ['Circle', 'Line', 'Square', 'Pattern'] as const; +export const StaticShapes = ['Circle', 'Pattern'] as const; export type ShapeType = 'Checkbox' | typeof StaticShapes[number]; diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css b/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css index df45417639..8edfe8659a 100644 --- a/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css +++ b/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css @@ -11,9 +11,13 @@ SLegendItem[disabled]:hover { cursor: default; } +SLegendItem[transparent] { + opacity: 0.3; +} + SPointShape[color] { background-color: var(--color); - margin-right: 8px; + margin-right: var(--intergalactic-spacing-content-gap-medium, 6px); flex-shrink: 0; } @@ -21,60 +25,32 @@ SPointShape[shape='Circle'][size='l'] { width: 16px; height: 16px; border-radius: 8px; - margin-top: 4px; + margin-top: var(--intergalactic-spacing-content-gap-small, 4px); } SPointShape[shape='Circle'][size='m'] { width: 12px; height: 12px; border-radius: 6px; - margin-top: 4px; -} - -SPointShape[shape='Line'][size='l'] { - width: 16px; - height: 4px; - border-radius: 3px; - margin-top: 9px; -} - -SPointShape[shape='Line'][size='m'] { - width: 12px; - height: 4px; - border-radius: 3px; - margin-top: 8px; -} - -SPointShape[shape='Square'][size='l'] { - width: 16px; - height: 16px; - border-radius: 2px; - margin-top: 4px; -} - -SPointShape[shape='Square'][size='m'] { - width: 12px; - height: 12px; - border-radius: 2px; - margin-top: 4px; + margin-top: var(--intergalactic-spacing-content-gap-small, 4px); } SPointShape[shape='Pattern'] { background-color: transparent; - margin-right: 4px; + margin-right: var(--intergalactic-spacing-content-gap-small, 4px); } SIcon { line-height: 0; - margin-right: 4px; + margin-right: var(--intergalactic-spacing-content-gap-small, 4px); } SIcon[size='l'] { - margin-top: 4px; + margin-top: var(--intergalactic-spacing-content-gap-small, 4px); } SIcon[size='m'] { - margin-top: 2px; + margin-top: var(--intergalactic-spacing-content-gap-xsmall, 2px); } SLabel { @@ -97,7 +73,7 @@ SCount[size='m'] { SAdditionalLabel, SCount { - margin-left: 4px; + margin-left: var(--intergalactic-spacing-content-gap-small, 4px); } SAdditionalLabel { @@ -113,7 +89,7 @@ SAdditionalLabel::before { height: 4px; width: 4px; border-radius: 2px; - margin-right: 4px; + margin-right: var(--intergalactic-spacing-content-gap-small, 4px); } SAdditionalLabel[size='l']::before { diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendTable/LegendTable.tsx b/semcore/d3-chart/src/component/ChartLegend/LegendTable/LegendTable.tsx index 103242df99..1a5420845c 100644 --- a/semcore/d3-chart/src/component/ChartLegend/LegendTable/LegendTable.tsx +++ b/semcore/d3-chart/src/component/ChartLegend/LegendTable/LegendTable.tsx @@ -17,19 +17,21 @@ class LegendTableRoot extends BaseLegend {items.map(({ id, columns = [] }, _index) => { + const isTransparent = highlightedItem !== undefined && (highlightedItem !== -1 && highlightedItem !== _index); + return ( {columns.map((item, index) => { return ( - + {item} diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendTable/LegendTable.type.ts b/semcore/d3-chart/src/component/ChartLegend/LegendTable/LegendTable.type.ts index 0bdb3771cd..d5b1a6d0e5 100644 --- a/semcore/d3-chart/src/component/ChartLegend/LegendTable/LegendTable.type.ts +++ b/semcore/d3-chart/src/component/ChartLegend/LegendTable/LegendTable.type.ts @@ -19,6 +19,8 @@ export type LegendTableDefaultProps = { export type LegendColumnProps = { index: number; size: LSize; + /** Enables element transparency */ + transparent?: boolean; }; export type LegendTableType = Intergalactic.Component & { diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendTable/legend-table.shadow.css b/semcore/d3-chart/src/component/ChartLegend/LegendTable/legend-table.shadow.css index 0dc37cee29..821a7b6bb4 100644 --- a/semcore/d3-chart/src/component/ChartLegend/LegendTable/legend-table.shadow.css +++ b/semcore/d3-chart/src/component/ChartLegend/LegendTable/legend-table.shadow.css @@ -4,8 +4,8 @@ SLegendTable[columns-count] { grid-template-columns: auto 0.2fr; align-items: center; height: fit-content; - grid-column-gap: 16px; - grid-row-gap: 8px; + grid-column-gap: var(--intergalactic-spacing-content-gap-large, 8px); + grid-row-gap: var(--intergalactic-spacing-content-gap-large, 8px); } SColumnItem[size='l'] { @@ -17,3 +17,7 @@ SColumnItem[size='m'] { font-size: var(--intergalactic-fs-200, 14px); text-align: right; } + +SColumnItem[transparent] { + opacity: 0.3; +} diff --git a/semcore/d3-chart/src/style/abstract-chart.shadow.css b/semcore/d3-chart/src/style/abstract-chart.shadow.css index 124b8494cb..1e5256a4a4 100644 --- a/semcore/d3-chart/src/style/abstract-chart.shadow.css +++ b/semcore/d3-chart/src/style/abstract-chart.shadow.css @@ -7,13 +7,43 @@ SChart { STooltipChildrenWrapper { display: grid; - column-gap: var(--intergalactic-spacing-2x, 8px); + gap: var(--intergalactic-spacing-content-gap-large, 8px); + align-items: center; &[columnsCount='2'] { grid-template-columns: auto minmax(28px, max-content); + + STooltipDivider { + grid-column: span 2; + } } &[columnsCount='3'] { grid-template-columns: auto minmax(28px, max-content) minmax(28px, max-content); + + STooltipDivider { + grid-column: span 3; + } + } +} + +STooltipDeltaWrapper { + gap: var(--intergalactic-spacing-content-gap-xsmall, 2px); + justify-content: flex-end; + + &[trend='upward'] { + color: var(--intergalactic-chart-data-success, oklch(0.82 0.19 143)); + } + + &[trend='downward'] { + color: var(--intergalactic-chart-data-critical, oklch(0.74 0.19 22)); + } + + &[trend='stable'] { + color: var(--intergalactic-text-secondary-invert, oklch(0.997 0.004 165.9 / 0.684)); + } + + STooltipDeltaIcon { + align-self: center; } } diff --git a/semcore/d3-chart/src/style/area.shadow.css b/semcore/d3-chart/src/style/area.shadow.css index 1673ec6ac1..27072527fa 100644 --- a/semcore/d3-chart/src/style/area.shadow.css +++ b/semcore/d3-chart/src/style/area.shadow.css @@ -2,7 +2,8 @@ SArea { fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)); - fill-opacity: 0.2; + fill-opacity: 0.1; + mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.48) 60%, transparent 100%); } SArea[color] { @@ -20,7 +21,7 @@ SArea[transparent] { SAreaLine { stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)); - stroke-width: 3; + stroke-width: 2; fill: transparent; } @@ -41,7 +42,7 @@ SAreaLine { SNull { fill: transparent; - stroke: var(--intergalactic-chart-grid-x-axis, oklch(0.88 0.002 175.6)); + stroke: var(--intergalactic-chart-palette-order-null, oklch(0.9 0.002 177)); stroke-dasharray: 4; } diff --git a/semcore/d3-chart/src/style/dot.shadow.css b/semcore/d3-chart/src/style/dot.shadow.css index b18b4d76f2..18534242fa 100644 --- a/semcore/d3-chart/src/style/dot.shadow.css +++ b/semcore/d3-chart/src/style/dot.shadow.css @@ -10,10 +10,16 @@ SDot { stroke-width: 1px; stroke: var(--intergalactic-chart-grid-border, #ffffff); fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)); - transition-property: cx, cy, x, y; + transition-property: cx, cy, x, y, filter; transition-timing-function: ease-in-out; } +SDot[active] { + filter: + drop-shadow(0 0 1px oklch(0.137 0.026 175.7 / 0.161)) + drop-shadow(0 1px 1px oklch(0.137 0.026 175.7 / 0.161)); +} + SDot[hide] { display: none; } diff --git a/semcore/d3-chart/src/style/hover.shadow.css b/semcore/d3-chart/src/style/hover.shadow.css index ce98501081..5f1d981942 100644 --- a/semcore/d3-chart/src/style/hover.shadow.css +++ b/semcore/d3-chart/src/style/hover.shadow.css @@ -7,3 +7,21 @@ SHoverRect, SHoverRect:focus-visible { outline: none; fill: var(--intergalactic-chart-grid-bar-chart-hover, oklch(0.177 0.033 175.6 / 0.042)); } + +STick { + font-size: var(--intergalactic-fs-100, 12px); + fill: var(--intergalactic-chart-grid-text-label, oklch(0.097 0.023 156.5 / 0.468)); + transform: translateY(12px); + text-anchor: middle; + dominant-baseline: hanging; + + tspan { + dominant-baseline: hanging; + } + + cursor: default; +} + +STickHover { + fill: var(--intergalactic-chart-x-axis-accent-tick, oklch(0.96 0.001 180)); +} diff --git a/semcore/d3-chart/src/style/line.shadow.css b/semcore/d3-chart/src/style/line.shadow.css index cc291b4b45..a5342370a5 100644 --- a/semcore/d3-chart/src/style/line.shadow.css +++ b/semcore/d3-chart/src/style/line.shadow.css @@ -2,7 +2,7 @@ SLine { fill: transparent; - stroke-width: 3; + stroke-width: 2; stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)); transition-property: d; transition-duration: var(--duration); @@ -23,7 +23,7 @@ SLine[transparent] { SNull { fill: transparent; - stroke: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + stroke: var(--intergalactic-chart-palette-order-null, oklch(0.9 0.002 177)); stroke-dasharray: 4; } diff --git a/semcore/d3-chart/src/style/scatterplot.shadow.css b/semcore/d3-chart/src/style/scatterplot.shadow.css index 77157433e3..214357a293 100644 --- a/semcore/d3-chart/src/style/scatterplot.shadow.css +++ b/semcore/d3-chart/src/style/scatterplot.shadow.css @@ -29,7 +29,7 @@ SScatterPlot[transparent] { SValue { text-anchor: middle; font-size: var(--intergalactic-fs-50, 10px); - stroke: var(--intergalactic-chart-palette-order-9, oklch(0.58 0.168 278.2)); + stroke: var(--intergalactic-chart-palette-order-9, oklch(0.53 0.157 279.2)); } SValue[color] { diff --git a/semcore/d3-chart/src/style/tooltip.shadow.css b/semcore/d3-chart/src/style/tooltip.shadow.css index 53ebfb40c2..b2559d26f3 100644 --- a/semcore/d3-chart/src/style/tooltip.shadow.css +++ b/semcore/d3-chart/src/style/tooltip.shadow.css @@ -3,18 +3,20 @@ STooltip { font-size: var(--intergalactic-fs-100, 12px); line-height: var(--intergalactic-lh-100, 1.3334); + font-variant-numeric: tabular-nums; position: relative; - background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + background-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140)); border-radius: var(--intergalactic-popper-rounded, 6px); - border: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); + border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.4 0.004 140)); box-sizing: border-box; box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.176 0.033 175.7 / 0.07)); - padding: var(--intergalactic-spacing-3x, 12px); + padding: var(--intergalactic-spacing-content-padding-medium, 12px); } STitle { - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); - margin-bottom: var(--intergalactic-spacing-2x, 8px); + color: var(--intergalactic-text-secondary-invert, oklch(0.997 0.004 165.9 / 0.684)); + margin-bottom: var(--intergalactic-spacing-content-gap-large, 8px); } SDotGroup { @@ -23,20 +25,27 @@ SDotGroup { } SDot { - margin-right: var(--intergalactic-spacing-2x, 8px); + margin-right: var(--intergalactic-spacing-content-gap-large, 8px); } -SDotCircle[color] { +SDotCircle[color][lightness] { background-color: var(--color); - width: 8px; - height: 8px; + width: 10px; + height: 10px; border-radius: 50%; + box-shadow: 0 0 0 1px oklch(from var(--color) calc(l + var(--lightness)) c h); } SFooter { - background: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180)); - padding: var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-3x, 12px); + background: var(--intergalactic-bg-secondary-invert, oklch(0.969 0.057 140 / 0.118)); + color: var(--intergalactic-text-secondary-invert, oklch(0.997 0.004 165.9 / 0.684)); + padding: var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-medium, 12px); border-radius: 0 0 var(--intergalactic-rounded-medium, 6px) var(--intergalactic-rounded-medium, 6px); - margin: var(--intergalactic-spacing-3x, 12px) calc(-1 * var(--intergalactic-spacing-3x, 12px)) calc(-1 * var(--intergalactic-spacing-3x, 12px)); -} \ No newline at end of file + margin: var(--intergalactic-spacing-content-gap-xlarge, 12px) calc(-1 * var(--intergalactic-spacing-content-gap-xlarge, 12px)) calc(-1 * var(--intergalactic-spacing-content-gap-xlarge, 12px)); +} + +SDotPattern { + stroke-width: 1px; + stroke: rgba(255, 255, 255, 0.35); +} diff --git a/semcore/d3-chart/src/types/Hover.d.ts b/semcore/d3-chart/src/types/Hover.d.ts index c578a1557d..bf28e4508e 100644 --- a/semcore/d3-chart/src/types/Hover.d.ts +++ b/semcore/d3-chart/src/types/Hover.d.ts @@ -13,6 +13,8 @@ export type HoverProps = Context & { x?: string; /** Field name from `data` array item for the YAxis */ y?: string; + /** Hide tick hover */ + hideTickHover?: boolean; }; type HoverTooltip = (( diff --git a/semcore/d3-chart/src/utils/TextMeasurer.ts b/semcore/d3-chart/src/utils/TextMeasurer.ts new file mode 100644 index 0000000000..c725118ab1 --- /dev/null +++ b/semcore/d3-chart/src/utils/TextMeasurer.ts @@ -0,0 +1,31 @@ +export class TextMeasurer { + private store = new Map(); + + measure(text: string, fontSize = 12) { + const key = `${text};${fontSize}`; + const storedValue = this.store.get(key); + + if (storedValue !== undefined) return storedValue; + + const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + const textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text'); + + svg.style.position = 'absolute'; + svg.style.visibility = 'hidden'; + svg.style.pointerEvents = 'none'; + + textEl.setAttribute('font-size', String(fontSize)); + textEl.textContent = text; + + svg.appendChild(textEl); + document.body.appendChild(svg); + + const bbox = textEl.getBBox(); + + this.store.set(key, bbox); + + svg.remove(); + + return bbox; + } +} diff --git a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-an-c64f1-component-inside-after-keyboard-interactions-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-an-c64f1-component-inside-after-keyboard-interactions-1-chromium-linux.png index c45a053690..c5c54c9e58 100644 Binary files a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-an-c64f1-component-inside-after-keyboard-interactions-1-chromium-linux.png and b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-an-c64f1-component-inside-after-keyboard-interactions-1-chromium-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-an-c64f1-component-inside-after-keyboard-interactions-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-an-c64f1-component-inside-after-keyboard-interactions-1-firefox-linux.png index 55e0c060df..1f6c86b68b 100644 Binary files a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-an-c64f1-component-inside-after-keyboard-interactions-1-firefox-linux.png and b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-an-c64f1-component-inside-after-keyboard-interactions-1-firefox-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-an-c64f1-component-inside-after-keyboard-interactions-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-an-c64f1-component-inside-after-keyboard-interactions-1-webkit-linux.png index ec42117b27..c3982c9a3d 100644 Binary files a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-an-c64f1-component-inside-after-keyboard-interactions-1-webkit-linux.png and b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-accordion-an-c64f1-component-inside-after-keyboard-interactions-1-webkit-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-56d75-ons-when-variant-default-and-sedeIndents-wide-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-56d75-ons-when-variant-default-and-sedeIndents-wide-1-chromium-linux.png index f37a3164f2..75faae6973 100644 Binary files a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-56d75-ons-when-variant-default-and-sedeIndents-wide-1-chromium-linux.png and b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-56d75-ons-when-variant-default-and-sedeIndents-wide-1-chromium-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-56d75-ons-when-variant-default-and-sedeIndents-wide-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-56d75-ons-when-variant-default-and-sedeIndents-wide-1-firefox-linux.png index e09a9b4fba..9ea34fc097 100644 Binary files a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-56d75-ons-when-variant-default-and-sedeIndents-wide-1-firefox-linux.png and b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-56d75-ons-when-variant-default-and-sedeIndents-wide-1-firefox-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-56d75-ons-when-variant-default-and-sedeIndents-wide-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-56d75-ons-when-variant-default-and-sedeIndents-wide-1-webkit-linux.png index ffba9b8199..20227f7698 100644 Binary files a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-56d75-ons-when-variant-default-and-sedeIndents-wide-1-webkit-linux.png and b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-56d75-ons-when-variant-default-and-sedeIndents-wide-1-webkit-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-622a0-n-variant-undefined-and-sedeIndents-undefined-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-622a0-n-variant-undefined-and-sedeIndents-undefined-1-chromium-linux.png index b715260d7d..f6dcce4627 100644 Binary files a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-622a0-n-variant-undefined-and-sedeIndents-undefined-1-chromium-linux.png and b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-622a0-n-variant-undefined-and-sedeIndents-undefined-1-chromium-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-622a0-n-variant-undefined-and-sedeIndents-undefined-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-622a0-n-variant-undefined-and-sedeIndents-undefined-1-firefox-linux.png index ab391086ea..7d41eea61c 100644 Binary files a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-622a0-n-variant-undefined-and-sedeIndents-undefined-1-firefox-linux.png and b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-622a0-n-variant-undefined-and-sedeIndents-undefined-1-firefox-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-622a0-n-variant-undefined-and-sedeIndents-undefined-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-622a0-n-variant-undefined-and-sedeIndents-undefined-1-webkit-linux.png index 8981078319..0062b3a8a7 100644 Binary files a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-622a0-n-variant-undefined-and-sedeIndents-undefined-1-webkit-linux.png and b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-622a0-n-variant-undefined-and-sedeIndents-undefined-1-webkit-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-d9027-hen-variant-default-and-sedeIndents-undefined-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-d9027-hen-variant-default-and-sedeIndents-undefined-1-chromium-linux.png index b715260d7d..f6dcce4627 100644 Binary files a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-d9027-hen-variant-default-and-sedeIndents-undefined-1-chromium-linux.png and b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-d9027-hen-variant-default-and-sedeIndents-undefined-1-chromium-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-d9027-hen-variant-default-and-sedeIndents-undefined-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-d9027-hen-variant-default-and-sedeIndents-undefined-1-firefox-linux.png index ab391086ea..7d41eea61c 100644 Binary files a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-d9027-hen-variant-default-and-sedeIndents-undefined-1-firefox-linux.png and b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-d9027-hen-variant-default-and-sedeIndents-undefined-1-firefox-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-d9027-hen-variant-default-and-sedeIndents-undefined-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-d9027-hen-variant-default-and-sedeIndents-undefined-1-webkit-linux.png index 8981078319..0062b3a8a7 100644 Binary files a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-d9027-hen-variant-default-and-sedeIndents-undefined-1-webkit-linux.png and b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-d9027-hen-variant-default-and-sedeIndents-undefined-1-webkit-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-ddb13-ctions-when-variant-card-and-sedeIndents-wide-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-ddb13-ctions-when-variant-card-and-sedeIndents-wide-1-chromium-linux.png index f37a3164f2..75faae6973 100644 Binary files a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-ddb13-ctions-when-variant-card-and-sedeIndents-wide-1-chromium-linux.png and b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-ddb13-ctions-when-variant-card-and-sedeIndents-wide-1-chromium-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-ddb13-ctions-when-variant-card-and-sedeIndents-wide-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-ddb13-ctions-when-variant-card-and-sedeIndents-wide-1-firefox-linux.png index e09a9b4fba..9ea34fc097 100644 Binary files a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-ddb13-ctions-when-variant-card-and-sedeIndents-wide-1-firefox-linux.png and b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-ddb13-ctions-when-variant-card-and-sedeIndents-wide-1-firefox-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-ddb13-ctions-when-variant-card-and-sedeIndents-wide-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-ddb13-ctions-when-variant-card-and-sedeIndents-wide-1-webkit-linux.png index ffba9b8199..20227f7698 100644 Binary files a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-ddb13-ctions-when-variant-card-and-sedeIndents-wide-1-webkit-linux.png and b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-ddb13-ctions-when-variant-card-and-sedeIndents-wide-1-webkit-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-f3025-s-when-variant-card-and-sedeIndents-undefined-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-f3025-s-when-variant-card-and-sedeIndents-undefined-1-chromium-linux.png index f37a3164f2..75faae6973 100644 Binary files a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-f3025-s-when-variant-card-and-sedeIndents-undefined-1-chromium-linux.png and b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-f3025-s-when-variant-card-and-sedeIndents-undefined-1-chromium-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-f3025-s-when-variant-card-and-sedeIndents-undefined-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-f3025-s-when-variant-card-and-sedeIndents-undefined-1-firefox-linux.png index e09a9b4fba..9ea34fc097 100644 Binary files a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-f3025-s-when-variant-card-and-sedeIndents-undefined-1-firefox-linux.png and b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-f3025-s-when-variant-card-and-sedeIndents-undefined-1-firefox-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-f3025-s-when-variant-card-and-sedeIndents-undefined-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-f3025-s-when-variant-card-and-sedeIndents-undefined-1-webkit-linux.png index ffba9b8199..20227f7698 100644 Binary files a/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-f3025-s-when-variant-card-and-sedeIndents-undefined-1-webkit-linux.png and b/semcore/data-table/__tests__/data-table-accordion.browser-test.tsx-snapshots/-visual-Accordion-in-table-Verify-checkbox-and-f3025-s-when-variant-card-and-sedeIndents-undefined-1-webkit-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-02273-t-defaul-use-secondary-and-compact-undefined-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-02273-t-defaul-use-secondary-and-compact-undefined-1-chromium-linux.png index 9dd5ed06c8..fba29d6a57 100644 Binary files a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-02273-t-defaul-use-secondary-and-compact-undefined-1-chromium-linux.png and b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-02273-t-defaul-use-secondary-and-compact-undefined-1-chromium-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-02273-t-defaul-use-secondary-and-compact-undefined-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-02273-t-defaul-use-secondary-and-compact-undefined-1-firefox-linux.png index e4d6093e60..5b9677b7f0 100644 Binary files a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-02273-t-defaul-use-secondary-and-compact-undefined-1-firefox-linux.png and b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-02273-t-defaul-use-secondary-and-compact-undefined-1-firefox-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-02273-t-defaul-use-secondary-and-compact-undefined-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-02273-t-defaul-use-secondary-and-compact-undefined-1-webkit-linux.png index 5972a338ed..1affff408e 100644 Binary files a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-02273-t-defaul-use-secondary-and-compact-undefined-1-webkit-linux.png and b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-02273-t-defaul-use-secondary-and-compact-undefined-1-webkit-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-07c78-riant-default-use-undefined-and-compact-true-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-07c78-riant-default-use-undefined-and-compact-true-1-chromium-linux.png index 353faa6c80..954133c2f2 100644 Binary files a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-07c78-riant-default-use-undefined-and-compact-true-1-chromium-linux.png and b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-07c78-riant-default-use-undefined-and-compact-true-1-chromium-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-07c78-riant-default-use-undefined-and-compact-true-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-07c78-riant-default-use-undefined-and-compact-true-1-firefox-linux.png index 874a639a12..39f4bb6318 100644 Binary files a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-07c78-riant-default-use-undefined-and-compact-true-1-firefox-linux.png and b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-07c78-riant-default-use-undefined-and-compact-true-1-firefox-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-07c78-riant-default-use-undefined-and-compact-true-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-07c78-riant-default-use-undefined-and-compact-true-1-webkit-linux.png index 1ea3a48ec6..9c578f53c7 100644 Binary files a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-07c78-riant-default-use-undefined-and-compact-true-1-webkit-linux.png and b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-07c78-riant-default-use-undefined-and-compact-true-1-webkit-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-45fa6--default-use-undefined-and-compact-undefined-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-45fa6--default-use-undefined-and-compact-undefined-1-chromium-linux.png index 431806f8c3..b24906b943 100644 Binary files a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-45fa6--default-use-undefined-and-compact-undefined-1-chromium-linux.png and b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-45fa6--default-use-undefined-and-compact-undefined-1-chromium-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-45fa6--default-use-undefined-and-compact-undefined-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-45fa6--default-use-undefined-and-compact-undefined-1-firefox-linux.png index 21baf4d017..fd478ceafb 100644 Binary files a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-45fa6--default-use-undefined-and-compact-undefined-1-firefox-linux.png and b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-45fa6--default-use-undefined-and-compact-undefined-1-firefox-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-45fa6--default-use-undefined-and-compact-undefined-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-45fa6--default-use-undefined-and-compact-undefined-1-webkit-linux.png index ca95ec0275..844e4cd310 100644 Binary files a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-45fa6--default-use-undefined-and-compact-undefined-1-webkit-linux.png and b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-45fa6--default-use-undefined-and-compact-undefined-1-webkit-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-4b0ca-ant-card-use-undefined-and-compact-undefined-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-4b0ca-ant-card-use-undefined-and-compact-undefined-1-chromium-linux.png index 711ae298d0..1a3602ba92 100644 Binary files a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-4b0ca-ant-card-use-undefined-and-compact-undefined-1-chromium-linux.png and b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-4b0ca-ant-card-use-undefined-and-compact-undefined-1-chromium-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-4b0ca-ant-card-use-undefined-and-compact-undefined-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-4b0ca-ant-card-use-undefined-and-compact-undefined-1-firefox-linux.png index 0758e05a9a..083a77bb6d 100644 Binary files a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-4b0ca-ant-card-use-undefined-and-compact-undefined-1-firefox-linux.png and b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-4b0ca-ant-card-use-undefined-and-compact-undefined-1-firefox-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-4b0ca-ant-card-use-undefined-and-compact-undefined-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-4b0ca-ant-card-use-undefined-and-compact-undefined-1-webkit-linux.png index 008b3de0e2..dd6922cb7f 100644 Binary files a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-4b0ca-ant-card-use-undefined-and-compact-undefined-1-webkit-linux.png and b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-4b0ca-ant-card-use-undefined-and-compact-undefined-1-webkit-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-69235--variant-card-use-undefined-and-compact-true-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-69235--variant-card-use-undefined-and-compact-true-1-chromium-linux.png index bb5732a2d7..b361cc5cfe 100644 Binary files a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-69235--variant-card-use-undefined-and-compact-true-1-chromium-linux.png and b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-69235--variant-card-use-undefined-and-compact-true-1-chromium-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-69235--variant-card-use-undefined-and-compact-true-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-69235--variant-card-use-undefined-and-compact-true-1-firefox-linux.png index 4476613e64..57c4deadab 100644 Binary files a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-69235--variant-card-use-undefined-and-compact-true-1-firefox-linux.png and b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-69235--variant-card-use-undefined-and-compact-true-1-firefox-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-69235--variant-card-use-undefined-and-compact-true-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-69235--variant-card-use-undefined-and-compact-true-1-webkit-linux.png index dc46ee97bf..352556bdad 100644 Binary files a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-69235--variant-card-use-undefined-and-compact-true-1-webkit-linux.png and b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-69235--variant-card-use-undefined-and-compact-true-1-webkit-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-f4f5e-ant-card-use-secondary-and-compact-undefined-1-chromium-linux.png b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-f4f5e-ant-card-use-secondary-and-compact-undefined-1-chromium-linux.png index a94c79b8f6..b2b6c61436 100644 Binary files a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-f4f5e-ant-card-use-secondary-and-compact-undefined-1-chromium-linux.png and b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-f4f5e-ant-card-use-secondary-and-compact-undefined-1-chromium-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-f4f5e-ant-card-use-secondary-and-compact-undefined-1-firefox-linux.png b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-f4f5e-ant-card-use-secondary-and-compact-undefined-1-firefox-linux.png index 8111489cda..d0c81b1662 100644 Binary files a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-f4f5e-ant-card-use-secondary-and-compact-undefined-1-firefox-linux.png and b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-f4f5e-ant-card-use-secondary-and-compact-undefined-1-firefox-linux.png differ diff --git a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-f4f5e-ant-card-use-secondary-and-compact-undefined-1-webkit-linux.png b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-f4f5e-ant-card-use-secondary-and-compact-undefined-1-webkit-linux.png index b1068aabe5..9cb4f6ca5e 100644 Binary files a/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-f4f5e-ant-card-use-secondary-and-compact-undefined-1-webkit-linux.png and b/semcore/data-table/__tests__/data-table-states.browser-test.tsx-snapshots/-visual-Card-variant-Verify-table-in-table-car-f4f5e-ant-card-use-secondary-and-compact-undefined-1-webkit-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-1-chromium-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-1-chromium-linux.png index 9547a49760..185bdea071 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-1-chromium-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-1-chromium-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-1-firefox-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-1-firefox-linux.png index b841a30d6e..46ad221f79 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-1-firefox-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-1-firefox-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-1-webkit-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-1-webkit-linux.png index 308e7cbaa2..86223f9f85 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-1-webkit-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-1-webkit-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-2-chromium-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-2-chromium-linux.png index ec55467e2a..ae7fb1954b 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-2-chromium-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-2-chromium-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-2-firefox-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-2-firefox-linux.png index f9cf1b62d1..15788d1a52 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-2-firefox-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-2-firefox-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-2-webkit-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-2-webkit-linux.png index 02e74d2919..79282421ed 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-2-webkit-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-2-webkit-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-3-chromium-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-3-chromium-linux.png index 99ac449e65..9f48370e5d 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-3-chromium-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-3-chromium-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-3-firefox-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-3-firefox-linux.png index 038b030034..f7ae26aa0a 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-3-firefox-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-3-firefox-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-3-webkit-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-3-webkit-linux.png index 57ddfc2dad..1919f46d88 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-3-webkit-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-bottom-3-webkit-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-1-chromium-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-1-chromium-linux.png index 1ec878cfe3..5f05cfd39e 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-1-chromium-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-1-chromium-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-1-firefox-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-1-firefox-linux.png index 1cb81acd74..ae26990ff5 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-1-firefox-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-1-firefox-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-1-webkit-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-1-webkit-linux.png index df4dfb4a2e..3977652d35 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-1-webkit-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-1-webkit-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-2-chromium-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-2-chromium-linux.png index 3a7d0ae58a..fb455e06da 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-2-chromium-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-2-chromium-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-2-firefox-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-2-firefox-linux.png index 82462021f9..6c432c1523 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-2-firefox-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-2-firefox-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-2-webkit-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-2-webkit-linux.png index 672509d359..76c14162d0 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-2-webkit-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-2-webkit-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-3-chromium-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-3-chromium-linux.png index 99ac449e65..9f48370e5d 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-3-chromium-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-3-chromium-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-3-firefox-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-3-firefox-linux.png index 038b030034..f7ae26aa0a 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-3-firefox-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-3-firefox-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-3-webkit-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-3-webkit-linux.png index 57ddfc2dad..1919f46d88 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-3-webkit-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-false-3-webkit-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-1-chromium-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-1-chromium-linux.png index e025e1088a..edca9752ba 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-1-chromium-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-1-chromium-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-1-firefox-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-1-firefox-linux.png index d3c7ac6a4b..8fed58abd0 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-1-firefox-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-1-firefox-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-1-webkit-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-1-webkit-linux.png index 2bb2d92721..b3d45aa2f3 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-1-webkit-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-1-webkit-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-2-chromium-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-2-chromium-linux.png index 2b08dc7990..1c48bc5c8d 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-2-chromium-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-2-chromium-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-2-firefox-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-2-firefox-linux.png index d18a609781..a07eae7f31 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-2-firefox-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-2-firefox-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-2-webkit-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-2-webkit-linux.png index 2e9e2e2b49..bae001aa99 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-2-webkit-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-2-webkit-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-3-chromium-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-3-chromium-linux.png index 99ac449e65..9f48370e5d 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-3-chromium-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-3-chromium-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-3-firefox-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-3-firefox-linux.png index 038b030034..f7ae26aa0a 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-3-firefox-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-3-firefox-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-3-webkit-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-3-webkit-linux.png index 57ddfc2dad..1919f46d88 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-3-webkit-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-left-3-webkit-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-1-chromium-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-1-chromium-linux.png index 248accfa1c..39f2e9d4d2 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-1-chromium-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-1-chromium-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-1-firefox-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-1-firefox-linux.png index 99a3a1815c..2967c7fb11 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-1-firefox-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-1-firefox-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-1-webkit-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-1-webkit-linux.png index 1fc102ca8c..0199b2e697 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-1-webkit-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-1-webkit-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-2-chromium-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-2-chromium-linux.png index 5c49a3149a..b689e410ea 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-2-chromium-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-2-chromium-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-2-firefox-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-2-firefox-linux.png index dd53419ed4..fd29cacc91 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-2-firefox-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-2-firefox-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-2-webkit-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-2-webkit-linux.png index b97b299350..7313fb2022 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-2-webkit-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-2-webkit-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-3-chromium-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-3-chromium-linux.png index 99ac449e65..9f48370e5d 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-3-chromium-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-3-chromium-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-3-firefox-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-3-firefox-linux.png index 038b030034..f7ae26aa0a 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-3-firefox-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-3-firefox-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-3-webkit-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-3-webkit-linux.png index 57ddfc2dad..1919f46d88 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-3-webkit-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-right-3-webkit-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-1-chromium-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-1-chromium-linux.png index 5085e28054..5f88875a7f 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-1-chromium-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-1-chromium-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-1-firefox-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-1-firefox-linux.png index fd023c268b..e72e90d3a2 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-1-firefox-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-1-firefox-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-1-webkit-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-1-webkit-linux.png index c78643df5c..eb7ba059fb 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-1-webkit-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-1-webkit-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-2-chromium-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-2-chromium-linux.png index ed5cacc64a..da4e1cab67 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-2-chromium-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-2-chromium-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-2-firefox-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-2-firefox-linux.png index be739238df..6fbd38addb 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-2-firefox-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-2-firefox-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-2-webkit-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-2-webkit-linux.png index 1065e4fca2..68e14ca3d8 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-2-webkit-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-2-webkit-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-3-chromium-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-3-chromium-linux.png index 99ac449e65..9f48370e5d 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-3-chromium-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-3-chromium-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-3-firefox-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-3-firefox-linux.png index 038b030034..f7ae26aa0a 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-3-firefox-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-3-firefox-linux.png differ diff --git a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-3-webkit-linux.png b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-3-webkit-linux.png index 57ddfc2dad..1919f46d88 100644 Binary files a/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-3-webkit-linux.png and b/semcore/drag-and-drop/__tests__/drag-and-drop.browser-test.tsx-snapshots/-visual-Verify-Dnd-when-drag-and-drop-marker-position-is-top-3-webkit-linux.png differ diff --git a/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-end-1-chromium-linux.png b/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-end-1-chromium-linux.png index 441889705a..87e1998088 100644 Binary files a/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-end-1-chromium-linux.png and b/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-end-1-chromium-linux.png differ diff --git a/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-end-1-firefox-linux.png b/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-end-1-firefox-linux.png index 6a874dee31..a8956c70ed 100644 Binary files a/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-end-1-firefox-linux.png and b/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-end-1-firefox-linux.png differ diff --git a/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-end-1-webkit-linux.png b/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-end-1-webkit-linux.png index d3adff6271..74fc0b0240 100644 Binary files a/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-end-1-webkit-linux.png and b/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-end-1-webkit-linux.png differ diff --git a/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-middle-1-chromium-linux.png b/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-middle-1-chromium-linux.png index a78611539c..1860917dce 100644 Binary files a/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-middle-1-chromium-linux.png and b/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-middle-1-chromium-linux.png differ diff --git a/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-middle-1-firefox-linux.png b/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-middle-1-firefox-linux.png index fbf5ede435..7a79c3e9a0 100644 Binary files a/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-middle-1-firefox-linux.png and b/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-middle-1-firefox-linux.png differ diff --git a/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-middle-1-webkit-linux.png b/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-middle-1-webkit-linux.png index 003b763c36..2c5b0b1a1e 100644 Binary files a/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-middle-1-webkit-linux.png and b/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx-snapshots/-visual-Verify-Ellipsis-in-table-cell-with-Link-and-trimType-middle-1-webkit-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-1-chromium-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-1-chromium-linux.png index ba463994cb..371b0921d6 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-1-chromium-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-1-chromium-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-1-firefox-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-1-firefox-linux.png index 61e2e987b3..84fe6ca57e 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-1-firefox-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-1-firefox-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-1-webkit-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-1-webkit-linux.png index f5a184202e..a7ea059d67 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-1-webkit-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-1-webkit-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-2-chromium-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-2-chromium-linux.png index e9c3cd378a..c5e43870e0 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-2-chromium-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-2-chromium-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-2-firefox-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-2-firefox-linux.png index 2353ec8ecd..d4f3e12667 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-2-firefox-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-2-firefox-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-2-webkit-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-2-webkit-linux.png index 099753fbc4..b003868b6c 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-2-webkit-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-DataTableFH-Verify-Data-table-styles-2-webkit-linux.png differ diff --git a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-5-webkit-linux.png b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-5-webkit-linux.png index ea195e0d75..6a4bbf92d9 100644 Binary files a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-5-webkit-linux.png and b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-5-webkit-linux.png differ diff --git a/semcore/icon/package.json b/semcore/icon/package.json index 0c60075cdb..c6de92aa1b 100644 --- a/semcore/icon/package.json +++ b/semcore/icon/package.json @@ -1508,6 +1508,26 @@ "import": "./lib/DesktopChart/m/index.mjs", "require": "./lib/DesktopChart/m/index.js" }, + "./DiffDown/l": { + "types": "./lib/DiffDown/l/index.d.ts", + "import": "./lib/DiffDown/l/index.mjs", + "require": "./lib/DiffDown/l/index.js" + }, + "./DiffDown/m": { + "types": "./lib/DiffDown/m/index.d.ts", + "import": "./lib/DiffDown/m/index.mjs", + "require": "./lib/DiffDown/m/index.js" + }, + "./DiffUp/l": { + "types": "./lib/DiffUp/l/index.d.ts", + "import": "./lib/DiffUp/l/index.mjs", + "require": "./lib/DiffUp/l/index.js" + }, + "./DiffUp/m": { + "types": "./lib/DiffUp/m/index.d.ts", + "import": "./lib/DiffUp/m/index.mjs", + "require": "./lib/DiffUp/m/index.js" + }, "./Document/l": { "types": "./lib/Document/l/index.d.ts", "import": "./lib/Document/l/index.mjs", @@ -4424,4 +4444,4 @@ "require": "./lib/ZoomPlus/m/index.js" } } -} +} \ No newline at end of file diff --git a/semcore/icon/svg/icon/DiffDown/l.svg b/semcore/icon/svg/icon/DiffDown/l.svg new file mode 100644 index 0000000000..c6482a1812 --- /dev/null +++ b/semcore/icon/svg/icon/DiffDown/l.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/semcore/icon/svg/icon/DiffDown/m.svg b/semcore/icon/svg/icon/DiffDown/m.svg new file mode 100644 index 0000000000..ecf60993f4 --- /dev/null +++ b/semcore/icon/svg/icon/DiffDown/m.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/semcore/icon/svg/icon/DiffUp/l.svg b/semcore/icon/svg/icon/DiffUp/l.svg new file mode 100644 index 0000000000..a756e66c82 --- /dev/null +++ b/semcore/icon/svg/icon/DiffUp/l.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/semcore/icon/svg/icon/DiffUp/m.svg b/semcore/icon/svg/icon/DiffUp/m.svg new file mode 100644 index 0000000000..5935ea280e --- /dev/null +++ b/semcore/icon/svg/icon/DiffUp/m.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/semcore/tag/src/style/tag.shadow.css b/semcore/tag/src/style/tag.shadow.css index 2d1061f30d..e4e70b49eb 100644 --- a/semcore/tag/src/style/tag.shadow.css +++ b/semcore/tag/src/style/tag.shadow.css @@ -220,7 +220,7 @@ STag[theme="secondary-invert"], STagContainerClose[theme="secondary-invert"] { background-color: var(--intergalactic-tag-secondary-bg-invert-normal, transparent); color: var(--intergalactic-tag-secondary-text-invert, oklch(0.997 0.004 165.9 / 0.684)); - border-color: var(--intergalactic-tag-secondary-border-invert, oklch(0.989 0.019 140 / 0.232)); + border-color: var(--intergalactic-tag-secondary-border-invert, oklch(0.994 0.011 140 / 0.283)); &::before, &::after { diff --git a/semcore/tooltip/src/style/tooltip.shadow.css b/semcore/tooltip/src/style/tooltip.shadow.css index fdb0beb37f..d10aaf151d 100644 --- a/semcore/tooltip/src/style/tooltip.shadow.css +++ b/semcore/tooltip/src/style/tooltip.shadow.css @@ -22,7 +22,7 @@ STooltip { STooltip[theme='invert'] { color: var(--intergalactic-tooltip-text-invert, oklch(0.999 0.001 180 / 0.949)); background-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140)); - border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.35 0.006 140)); + border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.4 0.004 140)); } STooltip[theme='warning'] { @@ -52,7 +52,7 @@ SArrow { } SArrow[theme='invert'] { - border-color: var(--intergalactic-tooltip-border-invert, oklch(0.35 0.006 140)); + border-color: var(--intergalactic-tooltip-border-invert, oklch(0.4 0.004 140)); &::before { border-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140)); 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 847f35eaca..b7f51f09da 100644 --- a/stories/components/d3-chart/docs/d3-chart.docs.stories.tsx +++ b/stories/components/d3-chart/docs/d3-chart.docs.stories.tsx @@ -7,7 +7,9 @@ import AxesTitlesExample from './examples/d3-chart/axes-titles'; import AxesValuesExample from './examples/d3-chart/axis-values'; import BaseExample from './examples/d3-chart/base'; import ChartLegendExample from './examples/d3-chart/chart-legend'; +import CustomDeltaPercentCalculationExample from './examples/d3-chart/custom-delta-percent-calculation'; import CustomPatternsExample from './examples/d3-chart/custom-patterns'; +import DefaultDeltaPercentCalculationExample from './examples/d3-chart/default-delta-percent-calculation'; import EnforcingPatternsExample from './examples/d3-chart/enforcing-patterns'; import ExportToImageExample from './examples/d3-chart/export-to-image'; import LowLevelComponentsUseExample from './examples/d3-chart/low-level-components-use'; @@ -101,3 +103,11 @@ export const Tooltip: StoryObj = { export const TooltipControl: StoryObj = { render: TooltipControlExample, }; + +export const DefaultDeltaPercentCalculation: StoryObj = { + render: DefaultDeltaPercentCalculationExample, +}; + +export const CustomDeltaPercentCalculation: StoryObj = { + render: CustomDeltaPercentCalculationExample, +}; diff --git a/stories/components/d3-chart/docs/examples/bar-chart/grouped-bars.tsx b/stories/components/d3-chart/docs/examples/bar-chart/grouped-bars.tsx index 4d84d299b1..f103686cab 100644 --- a/stories/components/d3-chart/docs/examples/bar-chart/grouped-bars.tsx +++ b/stories/components/d3-chart/docs/examples/bar-chart/grouped-bars.tsx @@ -36,11 +36,11 @@ const Demo = () => { <> {data[xIndex].category} - Bar 1 + Bar 1 {data[xIndex].bar1} - Bar 2 + Bar 2 {data[xIndex].bar2} diff --git a/stories/components/d3-chart/docs/examples/bar-chart/negative-values.tsx b/stories/components/d3-chart/docs/examples/bar-chart/negative-values.tsx index 85d02e665d..537c4c94aa 100644 --- a/stories/components/d3-chart/docs/examples/bar-chart/negative-values.tsx +++ b/stories/components/d3-chart/docs/examples/bar-chart/negative-values.tsx @@ -38,11 +38,11 @@ const Demo = () => { <> {data[xIndex].category} - Positive + Positive {data[xIndex].bar1} - Negative + Negative {data[xIndex].bar2} diff --git a/stories/components/d3-chart/docs/examples/bar-chart/trend-line.tsx b/stories/components/d3-chart/docs/examples/bar-chart/trend-line.tsx index 2ff5158f8a..9de28a557b 100644 --- a/stories/components/d3-chart/docs/examples/bar-chart/trend-line.tsx +++ b/stories/components/d3-chart/docs/examples/bar-chart/trend-line.tsx @@ -28,7 +28,7 @@ const Demo = () => { - + { <> {data[yIndex].category} - Bar 1 + Bar 1 {data[yIndex].bar1} - Bar 2 + Bar 2 {data[yIndex].bar2} diff --git a/stories/components/d3-chart/docs/examples/d3-chart/custom-delta-percent-calculation.tsx b/stories/components/d3-chart/docs/examples/d3-chart/custom-delta-percent-calculation.tsx new file mode 100644 index 0000000000..f400b242dd --- /dev/null +++ b/stories/components/d3-chart/docs/examples/d3-chart/custom-delta-percent-calculation.tsx @@ -0,0 +1,31 @@ +import { Chart } from '@semcore/ui/d3-chart'; +import React from 'react'; + +import AreaMockData from '../../../__mocks__/area'; + +const Demo = () => { + return ( + { + const first = data[0][key]; + const curr = data[index][key]; + + if (typeof first !== 'number' || typeof curr !== 'number') return null; + + if (first === 0) return curr === 0 ? 0 : null; + + return ((curr - first) / Math.abs(first)) * 100; + }} + /> + ); +}; + +const data = AreaMockData.Default; + +export default Demo; diff --git a/stories/components/d3-chart/docs/examples/d3-chart/default-delta-percent-calculation.tsx b/stories/components/d3-chart/docs/examples/d3-chart/default-delta-percent-calculation.tsx new file mode 100644 index 0000000000..0c2613440f --- /dev/null +++ b/stories/components/d3-chart/docs/examples/d3-chart/default-delta-percent-calculation.tsx @@ -0,0 +1,35 @@ +import { Chart } from '@semcore/ui/d3-chart'; +import { scaleTime } from 'd3-scale'; +import React from 'react'; + +const data = [ + { date: new Date(2024, 0, 7), traffic: 200, rounded: 300, zeroBaseline: 0 }, + { date: new Date(2024, 0, 14), traffic: 250, rounded: 301, zeroBaseline: 80 }, + { date: new Date(2024, 0, 21), traffic: 225, rounded: 404, zeroBaseline: 0 }, + { date: new Date(2024, 0, 28), traffic: 225, rounded: 455, zeroBaseline: 0 }, +]; + +const PLOT_WIDTH = 500; + +const xScale = scaleTime([data[0].date, data[data.length - 1].date], [40, PLOT_WIDTH - 30]); + +const formatDate = (value: unknown) => + new Intl.DateTimeFormat('en', { month: 'short', day: 'numeric' }).format(value as Date); + +const Demo = () => { + return ( + + ); +}; + +export default Demo; diff --git a/stories/components/d3-chart/docs/examples/d3-chart/tooltip-control.tsx b/stories/components/d3-chart/docs/examples/d3-chart/tooltip-control.tsx index d8a330f786..99a4557539 100644 --- a/stories/components/d3-chart/docs/examples/d3-chart/tooltip-control.tsx +++ b/stories/components/d3-chart/docs/examples/d3-chart/tooltip-control.tsx @@ -69,9 +69,6 @@ const Demo = () => { })} - - - {({ xIndex }) => { return { @@ -96,6 +93,9 @@ const Demo = () => { }; }} + + + ); }; diff --git a/stories/components/d3-chart/docs/examples/radar-chart/circle.tsx b/stories/components/d3-chart/docs/examples/radar-chart/circle.tsx index ac26ed9e6d..26cfb9115b 100644 --- a/stories/components/d3-chart/docs/examples/radar-chart/circle.tsx +++ b/stories/components/d3-chart/docs/examples/radar-chart/circle.tsx @@ -23,8 +23,8 @@ const Demo = () => { children: ( <> {data.categories[index]} - {data['data_1'][index]} - {data['data_2'][index]} + {data['data_1'][index]} + {data['data_2'][index]} ), }; diff --git a/stories/components/d3-chart/docs/examples/radar-chart/rotated.tsx b/stories/components/d3-chart/docs/examples/radar-chart/rotated.tsx index cf504aee83..8e713a6397 100644 --- a/stories/components/d3-chart/docs/examples/radar-chart/rotated.tsx +++ b/stories/components/d3-chart/docs/examples/radar-chart/rotated.tsx @@ -46,8 +46,8 @@ const Demo = () => { children: ( <> {data.categories[index]} - {data['data_1'][index]} - {data['data_2'][index]} + {data['data_1'][index]} + {data['data_2'][index]} ), }; diff --git a/stories/components/d3-chart/docs/examples/radar-chart/tooltip.tsx b/stories/components/d3-chart/docs/examples/radar-chart/tooltip.tsx index 349cd419f7..ddf00fe069 100644 --- a/stories/components/d3-chart/docs/examples/radar-chart/tooltip.tsx +++ b/stories/components/d3-chart/docs/examples/radar-chart/tooltip.tsx @@ -23,8 +23,8 @@ const Demo = () => { children: ( <> {data.categories[index]} - {data['data_1'][index]} - {data['data_2'][index]} + {data['data_1'][index]} + {data['data_2'][index]} ), }; diff --git a/stories/components/d3-chart/docs/examples/stacked-area-chart/stacked-area.tsx b/stories/components/d3-chart/docs/examples/stacked-area-chart/stacked-area.tsx index fdf57d332a..3b699d7c93 100644 --- a/stories/components/d3-chart/docs/examples/stacked-area-chart/stacked-area.tsx +++ b/stories/components/d3-chart/docs/examples/stacked-area-chart/stacked-area.tsx @@ -52,15 +52,15 @@ const Demo = () => { })} - Stack 1 + Stack 1 {data[xIndex].stack1} - Stack 2 + Stack 2 {data[xIndex].stack2} - Stack 3 + Stack 3 {data[xIndex].stack3} diff --git a/stories/components/d3-chart/docs/examples/stacked-bar-chart/stacked-grouped-bar.tsx b/stories/components/d3-chart/docs/examples/stacked-bar-chart/stacked-grouped-bar.tsx index 3b8e4d5165..0c1ca79da0 100644 --- a/stories/components/d3-chart/docs/examples/stacked-bar-chart/stacked-grouped-bar.tsx +++ b/stories/components/d3-chart/docs/examples/stacked-bar-chart/stacked-grouped-bar.tsx @@ -38,20 +38,20 @@ const Demo = () => { {data[xIndex].category} Group 1 - a + a {data[xIndex].a} - b + b {data[xIndex].b} Group 2 - c + c {data[xIndex].c} - d + d {data[xIndex].d} diff --git a/stories/components/d3-chart/docs/examples/stacked-horizontal-bar/horizontal-stacked-bar.tsx b/stories/components/d3-chart/docs/examples/stacked-horizontal-bar/horizontal-stacked-bar.tsx index c6185f2f1b..2608a6c9ac 100644 --- a/stories/components/d3-chart/docs/examples/stacked-horizontal-bar/horizontal-stacked-bar.tsx +++ b/stories/components/d3-chart/docs/examples/stacked-horizontal-bar/horizontal-stacked-bar.tsx @@ -37,11 +37,11 @@ const Demo = () => { <> {data[yIndex].bar} - Category 1 + Category 1 {data[yIndex].Category1} - Category 2 + Category 2 {data[yIndex].Category2} diff --git a/stories/components/d3-chart/tests/area-chart.stories.tsx b/stories/components/d3-chart/tests/area-chart.stories.tsx index b21df9cc8d..b03701f3a2 100644 --- a/stories/components/d3-chart/tests/area-chart.stories.tsx +++ b/stories/components/d3-chart/tests/area-chart.stories.tsx @@ -16,6 +16,9 @@ export const AnimatedDots: StoryObj = { export const BasicUsage = { render: BasicUsageExample, - argTypes: getChartArgTypes(), + argTypes: getChartArgTypes({ + useCustomValueFormatter: { control: 'boolean' }, + withZeroValue: { control: 'boolean' }, + }), args: areaExampleProps, }; diff --git a/stories/components/d3-chart/tests/bubble-chart.stories.tsx b/stories/components/d3-chart/tests/bubble-chart.stories.tsx index 4cf5f24ee6..af832389b1 100644 --- a/stories/components/d3-chart/tests/bubble-chart.stories.tsx +++ b/stories/components/d3-chart/tests/bubble-chart.stories.tsx @@ -14,7 +14,9 @@ export default meta; export const BasicUsage = { render: BasicUsageExample, - argTypes: getChartArgTypes(), + argTypes: getChartArgTypes({ + fractionalValues: { control: 'boolean' }, + }), args: BasicUsageProps, }; diff --git a/stories/components/d3-chart/tests/d3-chart-base.stories.tsx b/stories/components/d3-chart/tests/d3-chart-base.stories.tsx index bb7efa63a4..d85a93e752 100644 --- a/stories/components/d3-chart/tests/d3-chart-base.stories.tsx +++ b/stories/components/d3-chart/tests/d3-chart-base.stories.tsx @@ -1,9 +1,13 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import GridAxisPropsExample, { defaultProps as BasicUsageProps } from './examples/d3-chart/grid-axis-props'; +import HoveredTickExample, { defaultProps as HoveredTickProps } from './examples/d3-chart/hovered-tick'; import PlotAndA11yPropsExample from './examples/d3-chart/plot-props'; import ReferenceLinePropsExample from './examples/d3-chart/reference-line-props'; +import TooltipDefaultFormatExample, { defaultProps as TooltipDefaultFormatProps } from './examples/d3-chart/tooltip-default-format'; +import TooltipDeltaEdgeCasesExample, { defaultProps as TooltipDeltaEdgeCasesProps } from './examples/d3-chart/tooltip-delta-edge-cases'; import XAsisiRenderDelayedExample from './examples/d3-chart/xAxis-ticks-render-delayed'; +import { getChartArgTypes } from './examples/stories_props_helper'; const meta: Meta = { title: 'Components/d3Charts/Tests/D3-Chart', @@ -52,3 +56,32 @@ export const ReferenceLineProps: StoryObj = { export const XAsisiRenderDelayed: StoryObj = { render: XAsisiRenderDelayedExample, }; + +export const HoveredTick: StoryObj = { + render: HoveredTickExample, + argTypes: { + hoverType: { control: 'select', options: ['Line', 'Rect'] }, + hideTickHover: { control: 'boolean' }, + hideHoverLine: { control: 'boolean' }, + width: { control: { type: 'number' } }, + height: { control: { type: 'number' } }, + }, + args: HoveredTickProps, +}; + +export const TooltipDeltaEdgeCases = { + render: TooltipDeltaEdgeCasesExample, + argTypes: getChartArgTypes({ + deltaOverride: { + control: 'select', + options: ['off', 'custom', 'divideByZero', 'includesFirstPoint'], + }, + }), + args: TooltipDeltaEdgeCasesProps, +}; + +export const TooltipDefaultFormat = { + render: TooltipDefaultFormatExample, + argTypes: getChartArgTypes(), + args: TooltipDefaultFormatProps, +}; 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 e8f61049a8..675ff650e6 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 @@ -5,16 +5,29 @@ import React from 'react'; import { getChartProps, getPropsToChart } from '../stories_props_helper'; -function formatDate(value: any) { - const options = { - month: 'short' as const, - day: 'numeric' as const, - }; - - return new Intl.DateTimeFormat('en', options).format(value); +/** + * `tooltipValueFormatter` is applied to series values, not to the tooltip title, so it has + * to format numbers. The title is always rendered by the built-in formatter, which prints + * the `Date` group key as a date. + */ +function formatValue(value: any) { + return `${value} clicks`; } -const Demo = (props: AreaChartProps) => { +type AreaChartStoryProps = AreaChartProps & { + /** Set to true to replace the built-in tooltip value formatter with `formatValue`. */ + useCustomValueFormatter?: boolean; + /** + * Swaps in a dataset where `line` drops to 0 in the middle. + * + * `getPercentDelta` cannot divide by a previous value of 0, so that series has no + * delta on the next point while `line2` still has one. Together with + * `showDeltaPercentInTooltip` this is the mixed row that no other dataset produces. + */ + withZeroValue?: boolean; +}; + +const Demo = (props: AreaChartStoryProps) => { const onClickHandler = (index: number, event: React.SyntheticEvent) => { const clickedItem = data[index]; console.log('Clicked area chart point:'); @@ -22,7 +35,7 @@ const Demo = (props: AreaChartProps) => { console.log('→ Data item:', clickedItem); console.log('→ Event:', event); }; - const { plotWidth, plotHeight, ...chartProps } = getPropsToChart(props); + const { plotWidth, plotHeight, useCustomValueFormatter, withZeroValue, ...chartProps } = getPropsToChart(props); return ( { overflow='auto' > @@ -55,11 +69,35 @@ const data = [ { time: new Date('2024-02-15'), line: 10, line2: 8 }, ]; -export const defaultProps = getChartProps({ +/** + * Same shape as `data`, but `line` sits at 0 on Jan 11. + * + * Hovering Jan 16 then gives `line` no delta (its previous value is 0) while `line2` + * still has one, so the tooltip switches to three columns and the `line` row only fills + * two of them. + */ +const dataWithZeroValue = [ + { time: new Date('2024-01-01'), line: 2, line2: 3 }, + { time: new Date('2024-01-06'), line: 4, line2: 3 }, + { time: new Date('2024-01-11'), line: 0, line2: 3 }, + { time: new Date('2024-01-16'), line: 6, line2: 4 }, + { time: new Date('2024-01-21'), line: 5, line2: 3 }, + { time: new Date('2024-01-26'), line: 7, line2: 5 }, + { time: new Date('2024-01-31'), line: 6, line2: 2 }, + { time: new Date('2024-02-05'), line: 8, line2: 5 }, + { time: new Date('2024-02-10'), line: 9, line2: 7 }, + { time: new Date('2024-02-15'), line: 10, line2: 8 }, +]; + +export const defaultProps = getChartProps({ showDots: true, stacked: false, groupKey: 'time', data, + // Off by default: the tooltip then shows the date in the title and plain numbers in the + // values, which is what the built-in formatter does. + useCustomValueFormatter: false, + withZeroValue: false, }); Demo.defaultProps = defaultProps; 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 21861bbf83..5a8f4e37f3 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 @@ -5,8 +5,21 @@ import React from 'react'; import { getChartProps, getPropsToChart } from '../stories_props_helper'; -const Demo = (props: BubbleChartProps) => { - const { plotWidth, plotHeight, ...chartProps } = getPropsToChart(props); +type BubbleChartStoryProps = BubbleChartProps & { + /** + * Swaps in a dataset whose `x`, `y` and `value` all carry decimals. + * + * `BubbleChart.renderTooltip` prints `data[index].x`, `.y` and `.value` directly instead + * of running them through `AbstractChart.tooltipValueFormatter`, so the raw numbers reach + * the DOM: all three lines should be rounded to one decimal place and have their + * thousands grouped, and none of them is. The default dataset holds whole numbers only, + * which hides the defect entirely. + */ + fractionalValues?: boolean; +}; + +const Demo = (props: BubbleChartStoryProps) => { + const { plotWidth, plotHeight, fractionalValues, ...chartProps } = getPropsToChart(props); return ( { h={plotHeight} overflow='auto' > - + ); }; @@ -30,8 +47,32 @@ const data = [ { x: 9, y: 5, value: 7462, label: 'label 5' }, ]; -export const defaultProps = getChartProps({ +/** + * Same layout as `data` — the coordinates only gain a fractional tail, so the bubbles stay + * where they were. Hover each one and compare the three tooltip lines with the expectation: + * + * label | X axis | Y axis | Value + * --------------|--------------------|----------------------|-------------------------- + * fractions | 1.7391 -> 1.7 | 7.8999 -> 7.9 | 1234.5678 -> 1,234.6 + * rounds up | 0.96 -> 1.0 | 99.95 -> 100.0 | 45634.55 -> 45,634.6 + * long tail | 3.14159 -> 3.1 | 2.71828 -> 2.7 | 7462.999 -> 7,463.0 + * whole numbers | 6 -> 6 | 4 -> 4 | 5040 -> 5,040 + * + * The last row is the control: whole numbers look right today except for the missing + * thousands separator on `value`. + */ +const fractionalData = [ + { x: 1.7391, y: 7.8999, value: 1234.5678, label: 'fractions' }, + { x: 0.96, y: 99.95, value: 45634.55, label: 'rounds up' }, + { x: 3.14159, y: 2.71828, value: 7462.999, label: 'long tail' }, + { x: 6, y: 4, value: 5040, label: 'whole numbers' }, +]; + +export const defaultProps = getChartProps({ data, + // Off by default: the existing visual tests screenshot this story, and swapping the + // dataset would move every bubble. + fractionalValues: false, }); Demo.defaultProps = defaultProps; diff --git a/stories/components/d3-chart/tests/examples/chart-legend/customizable_legend.tsx b/stories/components/d3-chart/tests/examples/chart-legend/customizable_legend.tsx index 36bf804fe5..47586dfca8 100644 --- a/stories/components/d3-chart/tests/examples/chart-legend/customizable_legend.tsx +++ b/stories/components/d3-chart/tests/examples/chart-legend/customizable_legend.tsx @@ -1,12 +1,64 @@ import type { LegendFlexProps } from '@semcore/ui/d3-chart'; import { ChartLegend } from '@semcore/ui/d3-chart'; +import { Text } from '@semcore/ui/typography'; import React from 'react'; import { baseLegendProps } from '../stories_props_helper'; -const Demo = (props: LegendFlexProps) => { +type CustomizableLegendProps = LegendFlexProps & { + /** Renders a suffix element after the items. Mutually exclusive with `withTrend`. */ + withSuffix?: boolean; + /** + * Index of the highlighted item, every other item is dimmed. + * `-1` highlights nothing. Normally driven by the parent chart on item hover. + */ + highlightedItem?: number; + /** + * `LegendFlexProps` is a union (`suffix` XOR trend props), so trend fields cannot be read + * from it directly. The story declares them as optional controls of its own. + */ + trendIsVisible?: boolean; + onTrendIsVisibleChange?: (isVisible: boolean) => void; +}; + +const Demo = (props: CustomizableLegendProps) => { + const { withSuffix, withTrend, trendIsVisible, items, onChangeVisibleItem, ...rest } = props; + const [trendVisible, setTrendVisible] = React.useState(trendIsVisible ?? true); + // `checked` has to be owned here, otherwise the checkboxes render as controlled + // inputs that never toggle. + const [unchecked, setUnchecked] = React.useState>({}); + + React.useEffect(() => { + setTrendVisible(trendIsVisible ?? true); + }, [trendIsVisible]); + + const handleChangeVisibleItem = (id: string, isVisible: boolean) => { + setUnchecked((prev) => ({ ...prev, [id]: !isVisible })); + onChangeVisibleItem?.(id, isVisible); + }; + + const checkableItems = (items ?? []).map((item: LegendFlexProps['items'][number]) => ({ + ...item, + checked: !unchecked[item.id], + })); + + const addonProps = withTrend + ? { + withTrend: true, + trendIsVisible: trendVisible, + onTrendIsVisibleChange: setTrendVisible, + } + : withSuffix + ? { suffix: Suffix } + : {}; + return ( - + ); }; @@ -14,10 +66,18 @@ const data = [...Array(5).keys()].map((d, i) => ({ bar: `Bar ${i + 1}`, })); -export const defaultProps: LegendFlexProps = { - size: baseLegendProps.size, - shape: baseLegendProps.shape, - items: Array.from(data).map((item, index) => { +export const defaultProps = { + 'size': baseLegendProps.size, + 'shape': baseLegendProps.shape, + 'direction': 'row', + 'patterns': false, + 'withTrend': false, + 'withSuffix': false, + 'trendLabel': '', + 'trendIsVisible': true, + 'highlightedItem': -1, + 'aria-label': 'Chart legend', + 'items': Array.from(data).map((item, index) => { return { id: item.bar, label: `Category ${item.bar}`, @@ -26,7 +86,7 @@ export const defaultProps: LegendFlexProps = { additionalInfo: { count: index }, }; }), -} as LegendFlexProps; +} as unknown as CustomizableLegendProps; Demo.defaultProps = defaultProps; diff --git a/stories/components/d3-chart/tests/examples/chart-legend/legend-table-data.tsx b/stories/components/d3-chart/tests/examples/chart-legend/legend-table-data.tsx new file mode 100644 index 0000000000..3a057c48a6 --- /dev/null +++ b/stories/components/d3-chart/tests/examples/chart-legend/legend-table-data.tsx @@ -0,0 +1,81 @@ +import { Box } from '@semcore/ui/base-components'; +import { ChartLegendTable } from '@semcore/ui/d3-chart'; +import { Text } from '@semcore/ui/typography'; +import React from 'react'; + +type LegendTableStoryProps = { + size?: 'm' | 'l'; + /** Width of the legend, 185px in the design. */ + w?: number; + /** Index of the highlighted row, every other row is dimmed. `-1` highlights nothing. */ + highlightedItem?: number; + /** How many value columns to render: 1 renders the value, 2 adds the percent before it. */ + columnsCount?: 1 | 2; +}; + +/** + * Data from the design: five palette colours plus the muted "Other data" row. + * Percentages are derived from the values, so they stay consistent if the data changes + * (6.3 + 8.6 + 27.5 + 11.1 + 2.4 + 22.8 = 78.7K, which yields 8/11/35/14/3/29%). + */ +const rows = [ + { id: 'item-1', label: 'Label', color: 'chart-palette-order-1', value: 6300 }, + { id: 'item-2', label: 'Label', color: 'chart-palette-order-2', value: 8600 }, + { id: 'item-3', label: 'Label', color: 'chart-palette-order-3', value: 27500 }, + { id: 'item-4', label: 'Label', color: 'chart-palette-order-4', value: 11100 }, + { id: 'item-5', label: 'Label', color: 'chart-palette-order-5', value: 2400 }, + { id: 'other-data', label: 'Other data', color: 'chart-palette-order-other-data', value: 22800 }, +]; + +const total = rows.reduce((sum, row) => sum + row.value, 0); + +const formatValue = (value: number) => `${(value / 1000).toFixed(1)}K`; +const formatPercent = (value: number) => `${Math.round((value / total) * 100)}%`; + +const Demo = (props: LegendTableStoryProps) => { + const { size = 'm', w = 185, highlightedItem = -1, columnsCount = 2 } = props; + const [checked, setChecked] = React.useState>( + () => Object.fromEntries(rows.map((row) => [row.id, true])), + ); + + const onChangeVisibleItem = (id: string, isVisible: boolean) => { + setChecked((prev) => ({ ...prev, [id]: isVisible })); + }; + + const items = rows.map((row) => ({ + id: row.id, + label: row.label, + color: row.color, + checked: checked[row.id], + columns: columnsCount === 1 + ? [{formatValue(row.value)}] + : [ + {formatPercent(row.value)}, + {formatValue(row.value)}, + ], + })); + + return ( + + + + ); +}; + +export const defaultProps: LegendTableStoryProps = { + size: 'm', + w: 185, + highlightedItem: -1, + columnsCount: 2, +}; + +Demo.defaultProps = defaultProps; + +export default Demo; diff --git a/stories/components/d3-chart/tests/examples/d3-chart/hovered-tick.tsx b/stories/components/d3-chart/tests/examples/d3-chart/hovered-tick.tsx new file mode 100644 index 0000000000..6909c373a5 --- /dev/null +++ b/stories/components/d3-chart/tests/examples/d3-chart/hovered-tick.tsx @@ -0,0 +1,99 @@ +import { Bar, HoverLine, HoverRect, Line, Plot, XAxis, YAxis, minMax } from '@semcore/ui/d3-chart'; +import { scaleBand, scaleLinear } from 'd3-scale'; +import React from 'react'; + +type HoveredTickStoryProps = { + /** `Line` renders HoverLine (notched line + tick pill), `Rect` renders HoverRect. */ + hoverType?: 'Line' | 'Rect'; + /** Hides the tick pill rendered under the hovered tick. */ + hideTickHover?: boolean; + /** Hides the whole hover line / hover rect. */ + hideHoverLine?: boolean; + width?: number; + height?: number; +}; + +const MARGIN = 40; + +// Long labels on the edges make the first/last tick pill clamping visible. +const data = [ + { category: 'First long label', value: 3 }, + { category: 'Second', value: 7 }, + { category: 'Third', value: 4 }, + { category: 'Fourth', value: 9 }, + { category: 'Last long label', value: 5 }, +]; + +const linearData = data.map((item, index) => ({ ...item, x: index })); + +const Demo = (props: HoveredTickStoryProps) => { + const { + hoverType = 'Line', + hideTickHover = false, + hideHoverLine = false, + width = 500, + height = 300, + } = props; + + // `hideHoverLine` is read by `HoverLine`/`HoverRect` at runtime, but it is missing from the + // public `HoverProps` type (it is only declared on `HoverLine.Tooltip`), hence the cast. + const hoverProps = { hideTickHover, hideHoverLine } as { hideTickHover?: boolean }; + + const yScale = scaleLinear() + .range([height - MARGIN, MARGIN]) + .domain([0, 10]); + + if (hoverType === 'Rect') { + const xScale = scaleBand() + .range([MARGIN, width - MARGIN]) + .domain(data.map((item) => item.category)) + .paddingInner(0.4) + .paddingOuter(0.2); + + return ( + + + + + + + + + + + + ); + } + + const xScale = scaleLinear() + .range([MARGIN, width - MARGIN]) + .domain(minMax(linearData, 'x')); + + return ( + + + + + + + + + + + + + + ); +}; + +export const defaultProps: HoveredTickStoryProps = { + hoverType: 'Line', + hideTickHover: false, + hideHoverLine: false, + width: 500, + height: 300, +}; + +Demo.defaultProps = defaultProps; + +export default Demo; diff --git a/stories/components/d3-chart/tests/examples/d3-chart/tooltip-default-format.tsx b/stories/components/d3-chart/tests/examples/d3-chart/tooltip-default-format.tsx new file mode 100644 index 0000000000..ec253e0ae6 --- /dev/null +++ b/stories/components/d3-chart/tests/examples/d3-chart/tooltip-default-format.tsx @@ -0,0 +1,70 @@ +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'; + +/** + * Deliberately does NOT pass `tooltipValueFormatter`, so the chart falls back to + * `AbstractChart.defaultTooltipFormatter`: + * - `groupKey` is a Date -> formatted through `Intl.DateTimeFormat(locale, ...)` + * - integer values -> rendered as is + * - fractional values -> rounded to one decimal place + * - `null` -> rendered as `0`, not as `n/a` + * + * Each series is named after what its rounding demonstrates, so the tooltip can be read + * as a checklist. Hover any point and compare the raw value below with what is shown: + * + * | Jan 1 | Mar 15 | Jul 4 + * roundsDown | 1.739139 -> 1.7 | 3.14159 -> 3.1 | 9.8412 -> 9.8 + * roundsUp | 7.899934 -> 7.9 | 4.449 -> 4.4 | 0.96 -> 1.0 + * halfway | 2.55 -> 2.5 | 0.15 -> 0.1 | 8.25 -> 8.3 + * whole | 6 -> 6 | 3 -> 3 | 5 -> 5 + * sparse | 5 -> 5 | null -> 0 | 7 -> 7 + * + * `roundsUp` is the one that proves rounding rather than truncation: 7.899934 only + * reaches 7.9 if the value is rounded, truncating would show 7.8. + * + * `halfway` shows the one rough edge: 2.55 and 0.15 are stored as binary values a hair + * below the half, so `toFixed(1)` rounds them down while a reader expects 2.6 and 0.2. + * 8.25 is stored just above and does round up. + */ +const data = [ + { time: new Date('2024-01-01T00:00:00Z'), roundsDown: 1.739139, roundsUp: 7.899934, halfway: 2.55, whole: 6, sparse: 5 }, + { time: new Date('2024-03-15T00:00:00Z'), roundsDown: 3.14159, roundsUp: 4.449, halfway: 0.15, whole: 3, sparse: null }, + { time: new Date('2024-07-04T00:00:00Z'), roundsDown: 9.8412, roundsUp: 0.96, halfway: 8.25, whole: 5, sparse: 7 }, +]; + +const Demo = (props: LineChartProps) => { + const { plotWidth, plotHeight, ...chartProps } = getPropsToChart(props) as any; + + return ( + + + + ); +}; + +export const defaultProps = getChartProps({ + groupKey: 'time', + data, + showDots: true, + showLegend: true, + showTotalInTooltip: false, + duration: 0, +} as LineChartProps); + +Demo.defaultProps = defaultProps; + +export default Demo; diff --git a/stories/components/d3-chart/tests/examples/d3-chart/tooltip-delta-edge-cases.tsx b/stories/components/d3-chart/tests/examples/d3-chart/tooltip-delta-edge-cases.tsx new file mode 100644 index 0000000000..be345e6196 --- /dev/null +++ b/stories/components/d3-chart/tests/examples/d3-chart/tooltip-delta-edge-cases.tsx @@ -0,0 +1,183 @@ +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 { getChartProps, getPropsToChart } from '../stories_props_helper'; + +/** + * Edge cases of the tooltip percent delta, one per series. + * + * Only two points: `before` is the baseline and carries no delta at all (there is no + * previous point), `after` produces every case at once. Hover `after` and read the + * tooltip top to bottom. + * + * series | before | after | expected diff + * ---------------|--------|--------|------------------------------------------------ + * overHundred | 1 | 5 | +400% — growth past 100% + * huge | 1 | 100 | +9900% — does the column still fit? + * fraction | 100 | 100.5 | +0.5% — one decimal place + * roundsToZero | 10000 | 10004 | +0.04% rounds to 0 -> shown as a stable "0%" + * shrank | 100 | 50 | -50% + * droppedToZero | 100 | 0 | -100% + * fromZero | 0 | 7 | no diff — cannot divide by 0, cell stays empty + * zeroToZero | 0 | 0 | 0% — stable + * unchanged | 50 | 50 | 0% — stable + * negativeBase | -10 | -5 | +50% — dividing by |prev| keeps growth green + * + * Two rows are worth a decision: + * - `roundsToZero` turns a real change into "no change" once it rounds below 0.05%; + * - `fromZero` carries no percentage, because there is nothing to divide by. Its cell is + * still rendered, just empty, which is what keeps the three column grid aligned — + * every row below it has to start its own line. + */ +const data = [ + { + point: 'before', + overHundred: 1, + huge: 1, + fraction: 100, + roundsToZero: 10000, + shrank: 100, + droppedToZero: 100, + fromZero: 0, + zeroToZero: 0, + unchanged: 50, + negativeBase: -10, + }, + { + point: 'after', + overHundred: 5, + huge: 100, + fraction: 100.5, + roundsToZero: 10004, + shrank: 50, + droppedToZero: 0, + fromZero: 7, + zeroToZero: 0, + unchanged: 50, + negativeBase: -5, + }, +]; + +type DeltaData = (typeof data)[number]; + +/** + * Variants for the `getPercentDelta` prop, which replaces the built-in delta calculation. + * + * Every variant honours the declared contract — each one is annotated `: number | null` + * and TypeScript accepts it. What they show is what the chart does with returns that are + * valid yet unusable, and where an override stops matching the built-in behaviour. + * + * variant | what it demonstrates | hover + * -------------------|---------------------------------------------|------------- + * custom | a correct override, for reference | second group + * divideByZero | `NaN` and `Infinity` are valid numbers | second group + * includesFirstPoint | an override also runs for index 0 | FIRST group + */ +const deltaOverrides = { + custom: (key: string, index: number, chartData: DeltaData[]): number | null => { + if (index === 0) return null; + + const prev = chartData[index - 1]?.[key as keyof DeltaData]; + const curr = chartData[index]?.[key as keyof DeltaData]; + + if (typeof prev !== 'number' || typeof curr !== 'number' || prev === 0) return null; + + return ((curr - prev) / Math.abs(prev)) * 100; + }, + + /** + * The built-in formula written without the zero guard — the single most likely omission + * when someone reimplements it. The return type is still satisfied, because `NaN` and + * `Infinity` are both of type `number`, so neither TypeScript nor the chart rejects them. + * + * On the second group this dataset produces both: `zeroToZero` goes 0 -> 0, which is + * `0 / 0` -> `NaN`, and `fromZero` goes 0 -> 7, which is `7 / 0` -> `Infinity`. The + * tooltip prints them verbatim as `NaN%` and `Infinity%`, and `NaN` is additionally + * classified as the `stable` trend, so it is greyed out as though nothing had changed. + */ + divideByZero: (key: string, index: number, chartData: DeltaData[]): number | null => { + if (index === 0) return null; + + const prev = chartData[index - 1]?.[key as keyof DeltaData]; + const curr = chartData[index]?.[key as keyof DeltaData]; + + if (typeof prev !== 'number' || typeof curr !== 'number') return null; + + return ((curr - prev) / prev) * 100; + }, + + /** + * The built-in formula without its first-point guard, to show that the guard is not + * applied to overrides at all. + * + * The built-in path starts with `if (index === 0) return null`, but that line sits + * *after* the custom branch, so an override is called with `index === 0` too. Comparing + * the first point with itself yields a valid `0`, which is enough to make the difference + * visible: hover the FIRST group and every series shows `0%`, where `off` renders no + * delta column at all. + * + * On the second group this is identical to `off` by design — it is the same formula, and + * with a two point dataset there is nothing else it could differ on. The first group is + * the whole point of this variant. + */ + includesFirstPoint: (key: string, index: number, chartData: DeltaData[]): number | null => { + const previous = chartData[Math.max(index - 1, 0)]?.[key as keyof DeltaData]; + const curr = chartData[index]?.[key as keyof DeltaData]; + + if (typeof previous !== 'number' || typeof curr !== 'number' || previous === 0) return null; + + return ((curr - previous) / Math.abs(previous)) * 100; + }, +}; + +type DeltaEdgeCasesStoryProps = BarChartProps & { + /** + * `off` keeps the built-in calculation, the rest replace it. See `deltaOverrides` for + * what each one demonstrates and which bar group to hover. + */ + deltaOverride?: 'off' | keyof typeof deltaOverrides; +}; + +const Demo = (props: DeltaEdgeCasesStoryProps) => { + const { plotWidth, plotHeight, deltaOverride, ...chartProps } = getPropsToChart(props) as any; + + const getPercentDelta = + deltaOverride && deltaOverride !== 'off' + ? deltaOverrides[deltaOverride as keyof typeof deltaOverrides] + : undefined; + + return ( + + + + ); +}; + +export const defaultProps = getChartProps({ + groupKey: 'point', + data, + showDeltaPercentInTooltip: true, + showTotalInTooltip: false, + showLegend: false, + duration: 0, + // Off by default: the browser tests screenshot and assert this story, and the + // `returnsUndefined` variant deliberately throws. + deltaOverride: 'off', +} as DeltaEdgeCasesStoryProps); + +Demo.defaultProps = defaultProps; + +export default Demo; 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 index ea3d1872fc..f60e428477 100644 --- 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 @@ -6,21 +6,18 @@ 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); -}; +/** + * Only the X axis carries dates. The tooltip title is rendered by the built-in formatter + * from the `Date` group key, and the tooltip *values* are the numbers of each stack, so + * `tooltipValueFormatter` must never be handed a date formatter: `Intl.DateTimeFormat` + * reads a plain number as a millisecond timestamp and turns every value into + * "January 1, 1970". + */ +const formatAxisDate = (value: any) => + new Intl.DateTimeFormat('en', { + month: 'short', + day: 'numeric', + }).format(value); const Demo = (props: AreaChartProps) => { const { plotWidth, plotHeight, ...chartProps } = getPropsToChart(props); @@ -36,8 +33,7 @@ const Demo = (props: AreaChartProps) => { > diff --git a/stories/components/d3-chart/tests/examples/stories_props_helper.ts b/stories/components/d3-chart/tests/examples/stories_props_helper.ts index e024f32ae8..b2f4c4b036 100644 --- a/stories/components/d3-chart/tests/examples/stories_props_helper.ts +++ b/stories/components/d3-chart/tests/examples/stories_props_helper.ts @@ -23,6 +23,8 @@ export const baseChartProps: StoryChartProps> = { showYAxis: true, showTooltip: true, showTotalInTooltip: true, + showDeltaPercentInTooltip: false, + locale: 'en', xTicksCount: 10, yTicksCount: 10, multilineXTicks: false, @@ -75,7 +77,7 @@ export const getChartArgTypes = (additionalControls?: any) => { 'showLegend': { control: { type: 'boolean' } }, 'legendProps.size': { control: 'select', options: ['m', 'l'] }, - 'legendProps.shape': { control: 'select', options: ['Checkbox', 'Circle', 'Line', 'Square', 'Pattern'] }, + 'legendProps.shape': { control: 'select', options: ['Checkbox', 'Circle', 'Pattern'] }, 'legendProps.disableHoverItems': { control: 'boolean' }, 'legendProps.disableSelectItems': { control: 'boolean' }, 'legendProps.legendType': { control: 'select', options: ['Flex', 'Table'] }, @@ -84,6 +86,8 @@ export const getChartArgTypes = (additionalControls?: any) => { 'showTooltip': { control: { type: 'boolean' } }, 'showTotalInTooltip': { control: { type: 'boolean' } }, 'showPercentValueInTooltip': { control: { type: 'boolean' } }, + 'showDeltaPercentInTooltip': { control: { type: 'boolean' } }, + 'locale': { control: 'select', options: ['de', 'en', 'es', 'fr', 'it', 'ja', 'ko', 'nl', 'pl', 'pt', 'sv', 'tr', 'vi', 'zh', 'uk'] }, 'tooltipViewType': { control: 'select', options: ['all', 'single'] }, 'xTicksCount': { control: { type: 'number' } }, 'yTicksCount': { control: { type: 'number' } }, 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 482d1a5750..b82965dc2f 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 @@ -5,8 +5,20 @@ import React from 'react'; import { getChartProps, getPropsToChart } from '../stories_props_helper'; -const Demo = (props: VennChartProps) => { - const { plotWidth, plotHeight, ...chartProps } = getPropsToChart(props); +type VennChartStoryProps = VennChartProps & { + /** + * Swaps in a dataset whose areas carry decimals. + * + * `VennChart.renderTooltip` renders `data[dataKey]` directly instead of running it + * through `AbstractChart.tooltipValueFormatter`, so the raw number reaches the DOM: the + * value should be rounded to one decimal place and have its thousands grouped, and it is + * not. The default dataset holds whole numbers only, which hides the defect entirely. + */ + fractionalValues?: boolean; +}; + +const Demo = (props: VennChartStoryProps) => { + const { plotWidth, plotHeight, fractionalValues, ...chartProps } = getPropsToChart(props); return ( { overflow='auto' > ); @@ -36,6 +49,39 @@ const data = { 'G/F/C': 100, }; +/** + * `data` scaled by 10, with decimal tails added, so the diagram keeps the shape it has by + * default and only the numbers change. An intersection must never exceed the sets it + * belongs to, otherwise the layout degenerates into overlapping blobs — which is why the + * values cannot simply be replaced with arbitrary decimals. + * + * Hover each area and compare the value in the tooltip with the expectation: + * + * area | raw value | expected | actually shown + * --------|-----------|----------|---------------- + * G | 2004.5678 | 2,004.6 | 2004.5678 + * F | 2000.049 | 2,000.0 | 2000.049 + * C | 4999.95 | 5,000.0 | 4999.95 <- rounds across the thousand boundary + * U | 1.7391 | 1.7 | 1.7391 + * G/F | 1000.4999 | 1,000.5 | 1000.4999 + * G/C | 999.96 | 1,000.0 | 999.96 + * F/C | 1000.04 | 1,000.0 | 1000.04 + * G/F/C | 1000 | 1,000 | 1000 <- integer: only the grouping is missing + * + * The integer row is why the defect is easy to miss: a Venn chart built on whole numbers + * renders almost identically with and without the formatter. + */ +const fractionalData = { + 'G': 2004.5678, + 'F': 2000.049, + 'C': 4999.95, + 'U': 1.7391, + 'G/F': 1000.4999, + 'G/C': 999.96, + 'F/C': 1000.04, + 'G/F/C': 1000, +}; + const legendProps = { legendMap: { diff --git a/stories/components/d3-chart/tests/legend.stories.tsx b/stories/components/d3-chart/tests/legend.stories.tsx index 027393e4fb..81b5a89e5e 100644 --- a/stories/components/d3-chart/tests/legend.stories.tsx +++ b/stories/components/d3-chart/tests/legend.stories.tsx @@ -1,11 +1,42 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import CustomizableLegendExample, { defaultProps as args } from './examples/chart-legend/customizable_legend'; +import LegendTableDataExample, { defaultProps as legendTableArgs } from './examples/chart-legend/legend-table-data'; + const meta: Meta = { title: 'Components/d3Charts/tests/ChartLegend', }; + export default meta; + +export const LegendTableData: StoryObj = { + render: LegendTableDataExample, + argTypes: { + size: { control: 'select', options: ['m', 'l'] }, + w: { control: { type: 'number', min: 120, max: 400, step: 1 } }, + highlightedItem: { control: { type: 'number', min: -1, max: 5, step: 1 } }, + columnsCount: { control: 'select', options: [1, 2] }, + }, + args: legendTableArgs, +}; + export const CustomizableLegend = { render: CustomizableLegendExample, + argTypes: { + 'size': { control: 'select', options: ['m', 'l'] }, + 'shape': { control: 'select', options: ['Checkbox', 'Circle', 'Pattern'] }, + 'direction': { control: 'select', options: ['row', 'column'] }, + 'patterns': { control: 'boolean' }, + 'items': { control: 'object' }, + 'highlightedItem': { control: { type: 'number', min: -1, max: 4, step: 1 } }, + 'withTrend': { control: 'boolean' }, + 'trendLabel': { control: 'text' }, + 'trendIsVisible': { control: 'boolean' }, + 'withSuffix': { control: 'boolean' }, + 'aria-label': { control: 'text' }, + 'onChangeVisibleItem': { action: 'onChangeVisibleItem' }, + 'onMouseEnterItem': { action: 'onMouseEnterItem' }, + 'onMouseLeaveItem': { action: 'onMouseLeaveItem' }, + }, args, }; diff --git a/stories/components/d3-chart/tests/venn-chart.stories.tsx b/stories/components/d3-chart/tests/venn-chart.stories.tsx index a9d2eb5ef6..68a5b2538f 100644 --- a/stories/components/d3-chart/tests/venn-chart.stories.tsx +++ b/stories/components/d3-chart/tests/venn-chart.stories.tsx @@ -12,7 +12,9 @@ export default meta; export const BasicUsage = { render: BasicUsageExample, - argTypes: getChartArgTypes(), + argTypes: getChartArgTypes({ + fractionalValues: { control: 'boolean' }, + }), args: ShowLegendPropExampleProps, }; diff --git a/stories/patterns/core/tests/all-components/components/Dashboard/Dashboard.tsx b/stories/patterns/core/tests/all-components/components/Dashboard/Dashboard.tsx index d5f0581f2b..a28f2aa48a 100644 --- a/stories/patterns/core/tests/all-components/components/Dashboard/Dashboard.tsx +++ b/stories/patterns/core/tests/all-components/components/Dashboard/Dashboard.tsx @@ -329,7 +329,6 @@ export function Dashboard({ showPrimaryTableFooter = false }: DashboardProps) { showDots showLegend legendProps={dashboardAreaChart.legendProps} - tooltipValueFormatter={formatAreaAxis} axisXValueFormatter={formatAreaAxis} aria-label='Area chart' /> diff --git a/tools/testing-utils/shared/helpers.ts b/tools/testing-utils/shared/helpers.ts index f939ea3af8..f953fafb35 100644 --- a/tools/testing-utils/shared/helpers.ts +++ b/tools/testing-utils/shared/helpers.ts @@ -1,4 +1,5 @@ -import type { Page } from 'playwright'; +import { expect } from '@playwright/test'; +import type { Locator, Page } from 'playwright'; import { e2eStandToHtml } from '../e2e-stand'; @@ -14,3 +15,18 @@ export async function loadPage(page: Page, examplePath: string, lang: string, pr await page.setContent(htmlContent); } + +export async function expectEachToHaveAttribute( + locator: Locator, + attribute: string, + value: string, +) { + await expect(locator).not.toHaveCount(0); + + const actual = await locator.evaluateAll( + (elements, name) => elements.map((element) => element.getAttribute(name)), + attribute, + ); + + expect(actual).toEqual(actual.map(() => value)); +} diff --git a/tools/theme/src/colors/index.ts b/tools/theme/src/colors/index.ts index bfd88696fb..0897955b30 100644 --- a/tools/theme/src/colors/index.ts +++ b/tools/theme/src/colors/index.ts @@ -280,4 +280,4 @@ export const L_INV_ICON_SECONDARY = 0.45; /** Border primary | ⚠️ APCA 15+ on secondary bg */ export const L_INV_BORDER_PRIMARY = 0.46; // inputs, buttons, spin /** Border secondary */ -export const L_INV_BORDER_SECONDARY = 0.35; +export const L_INV_BORDER_SECONDARY = 0.4; diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index 60ebf85654..8e1d07ee1f 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -664,6 +664,34 @@ export const theme: Theme = { value: colors.orange['200'].value, description: 'Warning data color for charts.', }, + chart_data_new: { + value: colors.green['200'].value, + description: 'Color for the "New" data on the chart.', + }, + chart_data_lost: { + value: colors.red['300'].value, + description: 'Color for the "Lost" data on the chart.', + }, + chart_data_intent_commercial: { + value: colors.violet['300'].value, + description: 'Color for the commercial data intent on the chart.', + }, + chart_data_intent_informational: { + value: colors.blue['400'].value, + description: 'Color for the informational data intent on the chart.', + }, + chart_data_intent_navigational: { + value: colors.green['200'].value, + description: 'Color for the navigational data intent on the chart.', + }, + chart_data_intent_task: { + value: colors.pink['300'].value, + description: 'Color for the task data intent on the chart.', + }, + chart_data_intent_transactional: { + value: colors.yellow['200'].value, + description: 'Color for the transactional data intent on the chart.', + }, chart_grid_bar_chart_base_bg: { value: neutral.at(L_BG_LIGHT), description: 'Default background color of a bar in the BarChart.', @@ -688,10 +716,42 @@ export const theme: Theme = { value: neutral.at(L_BORDER_SECONDARY), description: 'Stripe color for diagonal pattern background.', }, - chart_grid_text_label: { + chart_grid_bg_good: { + value: 'linear-gradient(180deg, oklch(from {baseTokens.colors.green.200} l c h / 0.1) 0%, oklch(from {baseTokens.colors.green.200} l c h / 0.09) 12.677%, oklch(from {baseTokens.colors.green.200} l c h / 0.01) 87.981%)', + description: 'Background gradient for chart areas with positive dynamics.', + }, + chart_grid_bg_bad: { + value: 'linear-gradient(180deg, oklch(from {baseTokens.colors.red.300} l c h / 0.1) 0%, oklch(from {baseTokens.colors.red.300} l c h / 0.09) 12.677%, oklch(from {baseTokens.colors.red.300} l c h / 0.01) 87.981%)', + description: 'Background gradient for chart areas with negative dynamics.', + }, + chart_grid_bg_highlight: { + value: 'linear-gradient(180deg, {baseTokens.colors.gray.50} 0%, {baseTokens.colors.gray.50} 41.827%, {baseTokens.colors.transparent} 100%)', + description: 'Background gradient for highlighted chart areas.', + }, + chart_grid_bg_insight: { + value: 'linear-gradient(180deg, oklch(from {baseTokens.colors.violet.300} l c h / 0.1) 0%, oklch(from {baseTokens.colors.violet.300} l c h / 0.1) 12.677%, oklch(from {baseTokens.colors.violet.300} l c h / 0.01) 87.981%)', + description: 'Background gradient for insight chart areas.', + }, + chart_grid_bg_pattern: { + value: 'linear-gradient(0deg, oklch(from {baseTokens.colors.gray.800} l c h / 0.1) 8.532%, {baseTokens.colors.gray.800} 29.015%)', + description: 'Pattern gradient for chart grid backgrounds.', + }, + chart_grid_bg_potential: { + value: 'linear-gradient(180deg, oklch(0.941 0.018 177 / 0.4) 0%, oklch(0.909 0.041 309 / 0.4) 75%, {baseTokens.colors.transparent} 100%)', + description: 'Background gradient for potential chart areas.', + }, + chart_grid_line_forecast: { + value: 'linear-gradient(90deg, {baseTokens.colors.violet.300} 0%, {baseTokens.colors.green.100} 100%)', + description: 'Forecast line color on the chart grid.', + }, + chart_grid_text_label_DEFAULT: { value: neutral.opaqueAt(L_TEXT_SECONDARY), description: 'Text label on the chart grid.', }, + chart_grid_text_label_accent: { + value: neutral.opaqueAt(L_TEXT_PRIMARY), + description: 'Text label with accent on the chart grid.', + }, chart_grid_x_axis: { value: neutral.at(L_BORDER_PRIMARY), description: 'X-axis line on the chart grid.', @@ -731,9 +791,9 @@ export const theme: Theme = { chart_palette_order_8: { value: colors.mint['200'].value, description: '8 color in the default list of colors for charts.', - }, // stopped here + }, chart_palette_order_9: { - value: colors.blue['400'].value, + value: colors.blue['500'].value, description: '9 color in the default list of colors for charts.', }, chart_palette_order_10: { @@ -816,6 +876,10 @@ export const theme: Theme = { value: neutral.opaqueAt(L_BG_LIGHT), description: 'Background color for the clickable date on the X-axis of the chart grid.', }, + chart_x_axis_accent_tick: { + value: neutral.at(L_BG_SECONDARY_ACTIVE), + description: 'Background color for the accent tick on the X-axis.', + }, control_carousel_indicator_DEFAULT: { value: '{semanticTokens.colors.control_primary_info_DEFAULT}', description: 'Background color of the Carousel indicator.', @@ -2021,6 +2085,14 @@ export const theme: Theme = { value: `3px 3px 10px 0px ${neutral.opaqueAt(L_BORDER_SECONDARY)}`, description: 'Hover state for the shadow of the Card with hover state.', }, + box_shadow_chart_dot_elevated: { + value: `0px 0px 2px 0px ${neutral.opaqueAt(L_BORDER_PRIMARY)}, 0px 1px 2px 0px ${neutral.opaqueAt(L_BORDER_PRIMARY)}`, + description: 'Shadow of the elevated chart dot.', + }, + box_shadow_chart_elevated: { + value: '0px 0px 2px 0px oklch(from {baseTokens.colors.gray.800} l c h / 0.165), 0px 1px 2px 0px oklch(from {baseTokens.colors.gray.800} l c h / 0.165)', + description: 'Shadow of elevated elements on charts.', + }, box_shadow_control_elevated: { value: `0px 0px 1px 0px ${neutral.opaqueAt(L_BORDER_SECONDARY)}, 0px 1px 3px 0px ${neutral.opaqueAt(L_BORDER_SECONDARY)}`, description: 'Shadow of the Switch toggle.', @@ -3317,6 +3389,15 @@ type SemanticColors = { success: Value; warning: Value; critical: Value; + lost: Value; + new: Value; + intent: { + informational: Value; + navigational: Value; + commercial: Value; + transactional: Value; + task: Value; + }; }; palette: { order: { @@ -3355,6 +3436,7 @@ type SemanticColors = { }; grid: { line: Value; + line_forecast: Value; x: { axis: Value; }; @@ -3366,7 +3448,10 @@ type SemanticColors = { }; }; text: { - label: Value; + label: { + DEFAULT: Value; + accent: Value; + }; }; bar: { chart: { @@ -3380,11 +3465,20 @@ type SemanticColors = { bg: Value; pattern: Value; }; + bg: { + good: Value; + bad: Value; + highlight: Value; + insight: Value; + pattern: Value; + potential: Value; + }; border: Value; }; x: { axis: { accent: { + tick: Value; period: { active: Value; }; @@ -3499,6 +3593,12 @@ type SemanticShadows = { DEFAULT: Value; hover: Value; }; + chart: { + elevated: Value; + dot: { + elevated: Value; + }; + }; control: { elevated: Value; }; 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 8d5b3f16bf..8e57b93383 100644 --- a/website/docs/data-display/d3-chart/d3-chart-code.md +++ b/website/docs/data-display/d3-chart/d3-chart-code.md @@ -430,6 +430,53 @@ You can access `PatternFill` and `PatternSymbol` components for low level use. ::: +## Delta percentage + +Charts support displaying percentage delta values, allowing you to track how a metric changes between data points. + +By default, the percentage delta is calculated relative to the previous data point. You can customize this behavior using the `getPercentDelta` prop to define your own calculation logic. + +The calculation compares each data point with the preceding one: + +- The first data point returns `null` because there is no previous value to compare against. +- If either value is not a `number`, the delta returns `null`. +- If the previous value is `0`, the delta returns `0` when the current value is also `0`; otherwise, it returns `null`. +- Results are rounded to one decimal place. + +In the example below each series covers one of these rules: `traffic` shows growth, decline and an unchanged value, `rounded` shows the rounding to one decimal place, and `zeroBaseline` shows both outcomes of a zero previous value. Hovering the first point shows no delta for any series. + +::: sandbox + + + +::: + +### Customizing the calculation + +To customize how percentage deltas are calculated, pass a `getPercentDelta` callback. This allows you to change the reference point or implement custom calculation logic based on your data. + +The callback receives three parameters: + +| Parameter | Type | Description | +| --- | --- | --- | +| `key` | `ObjectDataKey` | The key of the data property being evaluated. | +| `index` | `number` | The index of the current data point. | +| `data` | `Data` | The complete chart data. | + +The callback must return a `number` representing the percentage delta or `null` when the delta cannot be calculated (for example, due to missing values or other edge cases). + +The following example calculates the percentage delta relative to the first data point instead of the previous one: + +::: sandbox + + + +::: + ## Accessible data summary ### Data formatting diff --git a/website/docs/style/design-tokens/base-tokens.json b/website/docs/style/design-tokens/base-tokens.json index f692273b78..cde749424d 100644 --- a/website/docs/style/design-tokens/base-tokens.json +++ b/website/docs/style/design-tokens/base-tokens.json @@ -877,7 +877,7 @@ }, { "name": "--intergalactic-border-tooltip-invert", - "value": "oklch(0.35 0.006 140)" + "value": "oklch(0.4 0.004 140)" }, { "name": "--intergalactic-border-table-accent", diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index a389ab77a2..0568e4a06e 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -355,7 +355,6 @@ "components": [ "accordion", "bulk-textarea", - "d3-chart", "drag-and-drop", "input", "notice", @@ -382,7 +381,9 @@ "name": "--intergalactic-bg-secondary-invert", "value": "oklch(0.969 0.057 140 / 0.118)", "description": "Inverted version of the secondary background of the interface which contains the main data and information.", - "components": [] + "components": [ + "d3-chart" + ] }, { "name": "--intergalactic-bg-secondary-success", @@ -538,7 +539,7 @@ }, { "name": "--intergalactic-border-secondary-invert", - "value": "oklch(0.989 0.019 140 / 0.232)", + "value": "oklch(0.994 0.011 140 / 0.283)", "description": "Inverted version of the neutral secondary border. Use it for borders on the dark or color background.", "components": [] }, @@ -652,13 +653,17 @@ "name": "--intergalactic-chart-data-critical", "value": "oklch(0.74 0.19 22)", "description": "Critical data color for charts.", - "components": [] + "components": [ + "d3-chart" + ] }, { "name": "--intergalactic-chart-data-success", "value": "oklch(0.82 0.19 143)", "description": "Success data color for charts.", - "components": [] + "components": [ + "d3-chart" + ] }, { "name": "--intergalactic-chart-data-warning", @@ -666,6 +671,48 @@ "description": "Warning data color for charts.", "components": [] }, + { + "name": "--intergalactic-chart-data-new", + "value": "oklch(0.82 0.15 170)", + "description": "Color for the \"New\" data on the chart.", + "components": [] + }, + { + "name": "--intergalactic-chart-data-lost", + "value": "oklch(0.74 0.19 22)", + "description": "Color for the \"Lost\" data on the chart.", + "components": [] + }, + { + "name": "--intergalactic-chart-data-intent-commercial", + "value": "oklch(0.74 0.17 303)", + "description": "Color for the commercial data intent on the chart.", + "components": [] + }, + { + "name": "--intergalactic-chart-data-intent-informational", + "value": "oklch(0.58 0.168 278.2)", + "description": "Color for the informational data intent on the chart.", + "components": [] + }, + { + "name": "--intergalactic-chart-data-intent-navigational", + "value": "oklch(0.82 0.15 170)", + "description": "Color for the navigational data intent on the chart.", + "components": [] + }, + { + "name": "--intergalactic-chart-data-intent-task", + "value": "oklch(0.74 0.225 330)", + "description": "Color for the task data intent on the chart.", + "components": [] + }, + { + "name": "--intergalactic-chart-data-intent-transactional", + "value": "oklch(0.82 0.18 80)", + "description": "Color for the transactional data intent on the chart.", + "components": [] + }, { "name": "--intergalactic-chart-grid-bar-chart-base-bg", "value": "oklch(0.96 0.001 180)", @@ -716,6 +763,48 @@ "d3-chart" ] }, + { + "name": "--intergalactic-chart-grid-bg-good", + "value": "linear-gradient(180deg, oklch(from oklch(0.82 0.15 170) l c h / 0.1) 0%, oklch(from oklch(0.82 0.15 170) l c h / 0.09) 12.677%, oklch(from oklch(0.82 0.15 170) l c h / 0.01) 87.981%)", + "description": "Background gradient for chart areas with positive dynamics.", + "components": [] + }, + { + "name": "--intergalactic-chart-grid-bg-bad", + "value": "linear-gradient(180deg, oklch(from oklch(0.74 0.19 22) l c h / 0.1) 0%, oklch(from oklch(0.74 0.19 22) l c h / 0.09) 12.677%, oklch(from oklch(0.74 0.19 22) l c h / 0.01) 87.981%)", + "description": "Background gradient for chart areas with negative dynamics.", + "components": [] + }, + { + "name": "--intergalactic-chart-grid-bg-highlight", + "value": "linear-gradient(180deg, oklch(0.97 0.001 180) 0%, oklch(0.97 0.001 180) 41.827%, rgb(0 0 0 / 0) 100%)", + "description": "Background gradient for highlighted chart areas.", + "components": [] + }, + { + "name": "--intergalactic-chart-grid-bg-insight", + "value": "linear-gradient(180deg, oklch(from oklch(0.74 0.17 303) l c h / 0.1) 0%, oklch(from oklch(0.74 0.17 303) l c h / 0.1) 12.677%, oklch(from oklch(0.74 0.17 303) l c h / 0.01) 87.981%)", + "description": "Background gradient for insight chart areas.", + "components": [] + }, + { + "name": "--intergalactic-chart-grid-bg-pattern", + "value": "linear-gradient(0deg, oklch(from oklch(0.23 0.01 140) l c h / 0.1) 8.532%, oklch(0.23 0.01 140) 29.015%)", + "description": "Pattern gradient for chart grid backgrounds.", + "components": [] + }, + { + "name": "--intergalactic-chart-grid-bg-potential", + "value": "linear-gradient(180deg, oklch(0.941 0.018 177 / 0.4) 0%, oklch(0.909 0.041 309 / 0.4) 75%, rgb(0 0 0 / 0) 100%)", + "description": "Background gradient for potential chart areas.", + "components": [] + }, + { + "name": "--intergalactic-chart-grid-line-forecast", + "value": "linear-gradient(90deg, oklch(0.74 0.17 303) 0%, oklch(0.9 0.11 175) 100%)", + "description": "Forecast line color on the chart grid.", + "components": [] + }, { "name": "--intergalactic-chart-grid-text-label", "value": "oklch(0.097 0.023 156.5 / 0.468)", @@ -724,6 +813,12 @@ "d3-chart" ] }, + { + "name": "--intergalactic-chart-grid-text-label-accent", + "value": "oklch(0.1 0.03 137 / 0.899)", + "description": "Text label with accent on the chart grid.", + "components": [] + }, { "name": "--intergalactic-chart-grid-x-axis", "value": "oklch(0.88 0.002 175.6)", @@ -795,7 +890,7 @@ }, { "name": "--intergalactic-chart-palette-order-9", - "value": "oklch(0.58 0.168 278.2)", + "value": "oklch(0.53 0.157 279.2)", "description": "9 color in the default list of colors for charts.", "components": [ "d3-chart" @@ -923,6 +1018,14 @@ "description": "Background color for the clickable date on the X-axis of the chart grid.", "components": [] }, + { + "name": "--intergalactic-chart-x-axis-accent-tick", + "value": "oklch(0.96 0.001 180)", + "description": "Background color for the accent tick on the X-axis.", + "components": [ + "d3-chart" + ] + }, { "name": "--intergalactic-control-carousel-indicator", "value": "oklch(0.23 0.01 140)", @@ -2781,7 +2884,7 @@ }, { "name": "--intergalactic-tag-secondary-border-invert", - "value": "oklch(0.989 0.019 140 / 0.232)", + "value": "oklch(0.994 0.011 140 / 0.283)", "description": "Inverted border color of the secondary Tag.", "components": [ "tag" @@ -3070,6 +3173,7 @@ "value": "oklch(0.999 0.001 180 / 0.949)", "description": "Inverted version of the primary text.", "components": [ + "d3-chart", "date-picker", "feature-highlight", "notice-bubble" @@ -3103,7 +3207,9 @@ "name": "--intergalactic-text-secondary-invert", "value": "oklch(0.997 0.004 165.9 / 0.684)", "description": "Inverted version of the secondary text.", - "components": [] + "components": [ + "d3-chart" + ] }, { "name": "--intergalactic-text-success", @@ -3131,6 +3237,7 @@ "description": "Inverted version of the default Tooltip background.", "components": [ "base-components", + "d3-chart", "tooltip" ] }, @@ -3144,10 +3251,11 @@ }, { "name": "--intergalactic-tooltip-border-invert", - "value": "oklch(0.35 0.006 140)", + "value": "oklch(0.4 0.004 140)", "description": "Border of the Tooltip with dark theme.", "components": [ "base-components", + "d3-chart", "tooltip" ] }, @@ -3262,6 +3370,18 @@ "description": "Hover state for the shadow of the Card with hover state.", "components": [] }, + { + "name": "--intergalactic-box-shadow-chart-dot-elevated", + "value": "0px 0px 2px 0px oklch(0.137 0.026 175.7 / 0.161), 0px 1px 2px 0px oklch(0.137 0.026 175.7 / 0.161)", + "description": "Shadow of the elevated chart dot.", + "components": [] + }, + { + "name": "--intergalactic-box-shadow-chart-elevated", + "value": "0px 0px 2px 0px oklch(from oklch(0.23 0.01 140) l c h / 0.165), 0px 1px 2px 0px oklch(from oklch(0.23 0.01 140) l c h / 0.165)", + "description": "Shadow of elevated elements on charts.", + "components": [] + }, { "name": "--intergalactic-box-shadow-control-elevated", "value": "0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 3px 0px oklch(0.176 0.033 175.7 / 0.07)", @@ -3400,6 +3520,7 @@ "base-components", "bulk-textarea", "counter", + "d3-chart", "data-table", "dropdown", "dropdown-menu", @@ -3450,6 +3571,7 @@ "bulk-textarea", "button", "card", + "d3-chart", "data-table", "dropdown", "fullscreen-modal", @@ -3526,6 +3648,7 @@ "components": [ "accordion", "color-picker", + "d3-chart", "data-table", "typography" ] @@ -3539,6 +3662,7 @@ "base-trigger", "bulk-textarea", "carousel", + "d3-chart", "data-table", "date-picker", "dropdown-menu", @@ -3559,6 +3683,7 @@ "button", "checkbox", "color-picker", + "d3-chart", "dropdown", "dropdown-menu", "input", @@ -3579,6 +3704,7 @@ "button", "carousel", "checkbox", + "d3-chart", "data-table", "date-picker", "dropdown", @@ -3599,6 +3725,7 @@ "components": [ "carousel", "color-picker", + "d3-chart", "data-table", "fullscreen-modal", "notice-bubble", @@ -3613,6 +3740,7 @@ "description": "2x large gap between elements, rows, or columns.", "components": [ "carousel", + "d3-chart", "pagination", "tab-line", "typography" diff --git a/website/docs/style/icon/icons-list.js b/website/docs/style/icon/icons-list.js index af6fecfb2b..3d0486e145 100644 --- a/website/docs/style/icon/icons-list.js +++ b/website/docs/style/icon/icons-list.js @@ -1166,6 +1166,34 @@ const iconsList = { 'платеж', ], }, + { + name: 'DiffUp', + size: ['l', 'm'], + group: 'Status', + tags: [ + 'diff', + 'up', + 'down', + 'arrow', + 'direction', + 'lost', + 'per cent', + ], + }, + { + name: 'DiffDown', + size: ['l', 'm'], + group: 'Status', + tags: [ + 'diff', + 'up', + 'down', + 'arrow', + 'direction', + 'lost', + 'per cent', + ], + }, { name: 'Education', size: ['l', 'm'],