diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx index 1383b7c643..daeb9af106 100644 --- a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx +++ b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx @@ -1,4 +1,4 @@ -import type { Page } from '@semcore/testing-utils/playwright'; +import type { Locator, Page } from '@semcore/testing-utils/playwright'; import { expect, test } from '@semcore/testing-utils/playwright'; import { loadPage } from '@semcore/testing-utils/shared/helpers'; import { TAG } from '@semcore/testing-utils/shared/tags'; @@ -55,6 +55,29 @@ export const locators = { tooltip: (page: Page) => page.locator('[data-ui-name="Bar.Tooltip"], [data-ui-name="HoverLine.Tooltip"], [data-ui-name="HoverRect.Tooltip"]'), }; +const getBarBoxes = async (locator: Locator, axis: 'x' | 'y' = 'x') => { + const boxes = await locator.evaluateAll((elements) => + elements.map((element) => { + const { x, y, width, height } = (element as unknown as SVGGraphicsElement).getBBox(); + return { x, y, width, height }; + }), + ); + + return boxes.sort((a, b) => a[axis] - b[axis]); +}; + +/** Gaps between neighbouring bars along the given axis. */ +const getGaps = ( + boxes: Array<{ x: number; y: number; width: number; height: number }>, + axis: 'x' | 'y' = 'x', +) => { + const size = axis === 'x' ? 'width' : 'height'; + + return boxes + .slice(1) + .map((box, index) => Number((box[axis] - (boxes[index][axis] + boxes[index][size])).toFixed(2))); +}; + /* ===================================================== @visual Visual states, hover and focus styles, paddings, margins, and snapshots. @@ -1343,4 +1366,207 @@ test.describe(`${TAG.FUNCTIONAL}`, () => { } }); }); + + const MAX_BAR_SIZE = 12; + + const groupedData = [ + { category: 'Category 0', bar1: 4, bar2: 7 }, + { category: 'Category 1', bar1: 3, bar2: 5 }, + { category: 'Category 2', bar1: 8, bar2: 2 }, + ]; + + const maxBarSizeVariations = [ + { + name: 'single series (vertical)', + locator: locators.groupBarBar, + axis: 'x' as const, + props: { + groupKey: 'category', + data: [ + { category: 'Category 0', bar: 4 }, + { category: 'Category 1', bar: 3 }, + { category: 'Category 2', bar: 8 }, + ], + }, + }, + { + name: 'grouped bars (vertical)', + locator: locators.groupBarBar, + axis: 'x' as const, + props: { groupKey: 'category', type: 'group', data: groupedData }, + }, + { + name: 'grouped bars (horizontal)', + locator: locators.groupBarHorizontalBar, + axis: 'y' as const, + // Needs a taller plot: at plotHeight 300 the group band is already thinner than 12px, + // so the cap would never kick in and the assertion would test nothing. + props: { + groupKey: 'category', + type: 'group', + invertAxis: true, + plotHeight: 500, + data: groupedData, + }, + }, + { + name: 'stacked bars (vertical)', + locator: locators.stackBarBar, + axis: 'x' as const, + props: { groupKey: 'category', type: 'stack', data: groupedData }, + }, + { + name: 'stacked bars (horizontal)', + locator: locators.stackBarHorizontalBar, + axis: 'y' as const, + props: { groupKey: 'category', type: 'stack', invertAxis: true, data: groupedData }, + }, + ]; + + maxBarSizeVariations.forEach((variant) => { + test(`Verify default maxBarSize limits ${variant.name} to ${MAX_BAR_SIZE}px`, { + tag: [TAG.PRIORITY_HIGH, '@bar-chart', '@d3-chart'], + }, async ({ page }) => { + await loadPage( + page, + 'stories/components/d3-chart/tests/examples/bar-chart/basic-usage.tsx', + 'en', + { ...variant.props, trend: undefined, duration: 0, maxBarSize: undefined }, + ); + + await locators.plot(page).first().waitFor({ state: 'visible' }); + + await test.step(`Verify every bar is at most ${MAX_BAR_SIZE}px thick`, async () => { + const boxes = await getBarBoxes(variant.locator(page), variant.axis); + expect(boxes.length).toBeGreaterThan(0); + + const sizes = boxes.map((box) => (variant.axis === 'x' ? box.width : box.height)); + + for (const size of sizes) { + expect(size).toBeLessThanOrEqual(MAX_BAR_SIZE); + } + + // The plot is wide enough for the cap to actually kick in, not just to fit by chance. + expect(Math.max(...sizes)).toBeCloseTo(MAX_BAR_SIZE, 1); + }); + }); + }); + + test('Verify custom maxBarSize overrides the default', { + tag: [TAG.PRIORITY_HIGH, '@bar-chart', '@d3-chart'], + }, async ({ page }) => { + await loadPage( + page, + 'stories/components/d3-chart/tests/examples/bar-chart/basic-usage.tsx', + 'en', + { + groupKey: 'category', + type: 'group', + data: groupedData, + trend: undefined, + duration: 0, + maxBarSize: 6, + }, + ); + + await locators.plot(page).first().waitFor({ state: 'visible' }); + + await test.step('Verify bars respect the explicitly passed value', async () => { + const boxes = await getBarBoxes(locators.groupBarBar(page)); + expect(boxes.length).toBeGreaterThan(0); + + for (const box of boxes) { + expect(box.width).toBeCloseTo(6, 1); + } + }); + }); + + test('Verify bars stay thinner than maxBarSize when the group has no room', { + tag: [TAG.PRIORITY_MEDIUM, '@bar-chart', '@d3-chart'], + }, async ({ page }) => { + await loadPage( + page, + 'stories/components/d3-chart/tests/examples/bar-chart/basic-usage.tsx', + 'en', + { + groupKey: 'category', + type: 'group', + plotWidth: 400, + trend: undefined, + duration: 0, + data: [ + { category: 'Category 0', bar1: 4, bar2: 7, bar3: 3, bar4: 5, bar5: 6, bar6: 2 }, + { category: 'Category 1', bar1: 3, bar2: 5, bar3: 8, bar4: 2, bar5: 4, bar6: 7 }, + { category: 'Category 2', bar1: 8, bar2: 2, bar3: 5, bar4: 6, bar5: 3, bar6: 4 }, + ], + }, + ); + + await locators.plot(page).first().waitFor({ state: 'visible' }); + + await test.step('Verify bars shrink below the cap instead of overflowing the group', async () => { + const boxes = await getBarBoxes(locators.groupBarBar(page)); + expect(boxes.length).toBe(18); + + for (const box of boxes) { + expect(box.width).toBeGreaterThan(0); + expect(box.width).toBeLessThan(MAX_BAR_SIZE); + } + }); + }); + + test('Verify histogram bar width is not limited by the bar chart default', { + tag: [TAG.PRIORITY_HIGH, '@bar-chart', '@d3-chart', '@histogram-chart'], + }, async ({ page }) => { + await loadPage( + page, + 'stories/components/d3-chart/docs/examples/histogram-chart/basic-usage.tsx', + 'en', + ); + + await locators.plot(page).first().waitFor({ state: 'visible' }); + + await test.step('Verify histogram bars keep their band width', async () => { + const boxes = await getBarBoxes(locators.bar(page)); + expect(boxes.length).toBeGreaterThan(0); + + // Histogram is explicitly excluded from the 12px cap - bars stay band-wide. + expect(Math.max(...boxes.map((box) => box.width))).toBeGreaterThan(MAX_BAR_SIZE); + }); + }); + + test.fixme('Verify the gap between bars inside a group is 2px', { + tag: [TAG.PRIORITY_HIGH, '@bar-chart', '@d3-chart'], + }, async ({ page }) => { + // Known issue (UIK-5880): GroupBar keeps paddingInner hardcoded to 0.1, so the gap is + // a share of the band step instead of a fixed 2px. Measured: 3.74px at plotWidth 500 + // and ~28px at plotWidth 800. + await loadPage( + page, + 'stories/components/d3-chart/tests/examples/bar-chart/basic-usage.tsx', + 'en', + { + groupKey: 'category', + type: 'group', + data: groupedData, + trend: undefined, + duration: 0, + }, + ); + + await locators.plot(page).first().waitFor({ state: 'visible' }); + + await test.step('Verify gaps within every group equal 2px', async () => { + const boxes = await getBarBoxes(locators.groupBarBar(page)); + expect(boxes.length).toBe(6); + + // 2 bars per group: even indexes are gaps inside a group, odd ones are between groups. + const gaps = getGaps(boxes); + const withinGroup = gaps.filter((_, index) => index % 2 === 0); + + for (const gap of withinGroup) { + expect(gap).toBeCloseTo(2, 1); + } + }); + }); }); 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 3536c01b3f..8d75d7ca17 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 822cb5b281..0c8c5b77b2 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 17b5487b2b..cf4bf5bc3b 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 feb324b577..62abf0deb2 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 642229e1a0..425135e297 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 7bfc981dba..6a14f0fd13 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 9a2f8b2c89..8f967a20cb 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 c09a95050a..898876f5d7 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 70a94847c1..96c2d78ccf 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Standard-all-features-enabled-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-bar-chart-Standard-all-features-enabled-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-chromium-linux.png index 4305bf7948..858d3e3d40 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-firefox-linux.png index 8cb7aa2ce7..866a7e2517 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-webkit-linux.png index 5b843ee62d..8299a983fe 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-2-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Horizontal-with-trend-2-chromium-linux.png index 21e21c2e5b..a806bc9aae 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 7ac6f53871..315c5cc243 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 de41b473ad..d07ec0817e 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 84f8155c13..d925c4d83b 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 0460169955..012cadccd1 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 af08c51bff..3f75be7104 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 1be8475174..8d0deae152 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 6dca285879..bd481f76c0 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 2bd2890bd9..2c046c6323 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-2-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-for-chart-Vertical-with-trend-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-chromium-linux.png index f8789f9972..911715b66b 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-firefox-linux.png index 8d132dafce..d9b05db9db 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-webkit-linux.png index 47b607cf58..d694178317 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-null-and-undefined-values-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-chromium-linux.png index f9a97631f0..4de6a57d67 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-firefox-linux.png index f0b53eee69..5ae441d5a6 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-webkit-linux.png index 28c99c4d91..6cf56a9815 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Data-variations-Verify-bar-chart-with-single-data-point-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-chromium-linux.png index 188064e609..90edecb6e2 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-firefox-linux.png index afbc46590c..e290a93095 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-webkit-linux.png index a078907ac4..ac1d37edb0 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-2-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-2-chromium-linux.png index f4a7ac314d..72dadcccf7 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 5d11742a21..20971ae9b3 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 77e478004e..5b456d03d1 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-2-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-horizontal-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-chromium-linux.png index b90c1cac9e..3367ab2273 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-firefox-linux.png index c8793f5f04..f21359d1d4 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-webkit-linux.png index ae003fa3b8..3476acce5b 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-2-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-2-chromium-linux.png index 5a37538922..2bfeef8855 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 95706919b1..3c67be55cf 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 5abbc30fa3..aee0d46df2 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-2-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-chromium-linux.png index 9e924eb875..aea803ffbb 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-firefox-linux.png index a91c1099cd..acff039e4b 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-webkit-linux.png index 2ba3c0d56d..38b3b5d55d 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-2-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-2-chromium-linux.png index 78e380c782..8792cbf518 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 e1428a0839..c1306eb306 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 160d29c95d..05804dba90 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-2-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-horizontal-2-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-chromium-linux.png index cbf8412486..bd567f2ed1 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-chromium-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-chromium-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-firefox-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-firefox-linux.png index abddf06b09..8efc58ee22 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-firefox-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-firefox-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-webkit-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-webkit-linux.png index 19913b430e..4f97de8b2e 100644 Binary files a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-webkit-linux.png and b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-webkit-linux.png differ diff --git a/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-2-chromium-linux.png b/semcore/d3-chart/__tests__/bar-chart.browser-test.tsx-snapshots/-visual-Grouped-and-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-2-chromium-linux.png index bee5960e16..f912c58ab8 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 bedb31a20b..aadfc5ba4a 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 79df4d31cf..50e2e30f0b 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/src/GroupBar.jsx b/semcore/d3-chart/src/GroupBar.jsx index 03bb0292e1..0c36c0efe6 100644 --- a/semcore/d3-chart/src/GroupBar.jsx +++ b/semcore/d3-chart/src/GroupBar.jsx @@ -12,7 +12,7 @@ class GroupBarRoot extends Component { static displayName = 'GroupBar'; getScaleGroup() { - const { Children, scale, scaleGroup, x } = this.asProps; + const { Children, scale, scaleGroup, x, maxBarSize } = this.asProps; // TODO: love that hack (by lsroman) ❤� const xyScale = x ? scale[0] : scale[1]; @@ -32,11 +32,16 @@ class GroupBarRoot extends Component { return acc; }, []); + const groupWidth = scaleToBand(xyScale).bandwidth(); + const paddingOuter = maxBarSize !== undefined && maxBarSize < groupWidth + ? 1 - (maxBarSize / groupWidth) + : 0.1; + return scaleBand() .range([0, scaleToBand(xyScale).bandwidth()]) .domain(domain) .paddingInner(0.1) - .paddingOuter(0.1); + .paddingOuter(paddingOuter); } getBarProps({ y }, index) { diff --git a/semcore/d3-chart/src/component/Chart/BarChart.tsx b/semcore/d3-chart/src/component/Chart/BarChart.tsx index 3b7eeadf81..44f44e9739 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, + maxBarSize: 12, locale: 'en', } as const; @@ -85,7 +86,7 @@ class BarChartComponent extends AbstractChart< } renderChart() { - const { groupKey, type = 'group', invertAxis } = this.asProps; + const { groupKey, type = 'group', invertAxis, maxBarSize } = this.asProps; const { dataDefinitions, highlightedItem } = this.state; if (dataDefinitions.length === 1) { @@ -101,6 +102,7 @@ class BarChartComponent extends AbstractChart< key={item.id} color={item.color} onClick={this.handleClickBar} + maxBarSize={maxBarSize} /> {this.renderTrend(item.id)} @@ -111,7 +113,7 @@ class BarChartComponent extends AbstractChart< if (type === 'group') { return ( <> - + {dataDefinitions.map((item, index) => { const BarComponent = invertAxis ? GroupBar.HorizontalBar : GroupBar.Bar; @@ -119,6 +121,7 @@ class BarChartComponent extends AbstractChart< color: item.color, transparent: highlightedItem !== -1 && highlightedItem !== index, onClick: this.handleClickBar, + maxBarSize, }; if (invertAxis) { @@ -146,6 +149,7 @@ class BarChartComponent extends AbstractChart< color: item.color, transparent: highlightedItem !== -1 && highlightedItem !== index, onClick: this.handleClickBar, + maxBarSize, }; if (invertAxis) { diff --git a/semcore/d3-chart/src/component/Chart/BarChart.type.ts b/semcore/d3-chart/src/component/Chart/BarChart.type.ts index f18d96012a..2a3a665463 100644 --- a/semcore/d3-chart/src/component/Chart/BarChart.type.ts +++ b/semcore/d3-chart/src/component/Chart/BarChart.type.ts @@ -30,6 +30,8 @@ export type BarChartProps = BaseChartProps & { onClickHoverRect?: (index: number, e: React.SyntheticEvent) => void; /** Handle click by Bar. */ onClickBar?: (barItem: number, barKey: BarKey, e: React.SyntheticEvent) => void; + /** The maximum width of a bar */ + maxBarSize?: number; }; export type BarChartDefaultProps = { @@ -37,6 +39,7 @@ export type BarChartDefaultProps = { showXAxis: true; showYAxis: true; showTooltip: true; + maxBarSize: 12; locale: 'en'; }; 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 f103686cab..d5c663d2bd 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 @@ -1,57 +1,21 @@ -import { Flex } from '@semcore/ui/base-components'; -import { Plot, GroupBar, YAxis, XAxis, HoverRect, colors } from '@semcore/ui/d3-chart'; -import { Text } from '@semcore/ui/typography'; -import { scaleLinear, scaleBand } from 'd3-scale'; +import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; import BarMockData from '../../../__mocks__/bar'; const Demo = () => { - const MARGIN = 40; const width = 500; const height = 300; - const xScale = scaleBand() - .range([MARGIN, width - MARGIN]) - .domain(data.map((d) => d.category)) - .paddingInner(0.4) - .paddingOuter(0.2); - - const yScale = scaleLinear() - .range([height - MARGIN, MARGIN]) - .domain([0, 10]); - return ( - - - - - - - - - - {({ xIndex }) => ({ - children: ( - <> - {data[xIndex].category} - - Bar 1 - {data[xIndex].bar1} - - - Bar 2 - {data[xIndex].bar2} - - - ), - })} - - - - - - + ); }; diff --git a/stories/components/d3-chart/tests/bar-chart.stories.tsx b/stories/components/d3-chart/tests/bar-chart.stories.tsx index cfb8815bb1..48e620eee6 100644 --- a/stories/components/d3-chart/tests/bar-chart.stories.tsx +++ b/stories/components/d3-chart/tests/bar-chart.stories.tsx @@ -22,7 +22,7 @@ export const BarProps: StoryObj = { hMin: { control: { type: 'number', min: 0, max: 50, step: 1 } }, hide: { control: 'boolean' }, transparent: { control: 'boolean' }, - maxBarSize: { control: { type: 'number', min: 10, max: 100, step: 5 } }, + maxBarSize: { control: { type: 'number', min: 0, max: 100, step: 1 } }, duration: { control: { type: 'number', min: 0, max: 2000, step: 100 } }, }, args: BarPropsDefaultProps, @@ -32,6 +32,7 @@ export const BasicUsage = { render: BasicUsageExample, argTypes: getChartArgTypes({ type: { control: 'select', options: ['stack', 'group'] }, + maxBarSize: { control: { type: 'number', min: 0, max: 100, step: 1 } }, }), args: BasicUsageProps, }; diff --git a/stories/components/d3-chart/tests/bar-horizontal.stories.tsx b/stories/components/d3-chart/tests/bar-horizontal.stories.tsx index 1cd85ef127..83884511a5 100644 --- a/stories/components/d3-chart/tests/bar-horizontal.stories.tsx +++ b/stories/components/d3-chart/tests/bar-horizontal.stories.tsx @@ -16,7 +16,7 @@ export const HorizontalBarProps: StoryObj = { barColor: { control: 'color' }, barRadius: { control: { type: 'number', min: 0, max: 20, step: 1 } }, barTransparent: { control: 'boolean' }, - maxBarSize: { control: { type: 'number', min: 10, max: 100, step: 5 } }, + maxBarSize: { control: { type: 'number', min: 0, max: 100, step: 1 } }, duration: { control: { type: 'number', min: 0, max: 2000, step: 100 } }, primaryText: { control: 'boolean' }, }, @@ -25,6 +25,8 @@ export const HorizontalBarProps: StoryObj = { export const BasicUsage = { render: BasicUsageExample, - argTypes: getChartArgTypes(), + argTypes: getChartArgTypes({ + maxBarSize: { control: { type: 'number', min: 0, max: 100, step: 1 } }, + }), args: BasicUsageProps, }; diff --git a/stories/components/d3-chart/tests/examples/bar-chart/basic-usage.tsx b/stories/components/d3-chart/tests/examples/bar-chart/basic-usage.tsx index 12dc9b6b79..dc15be87a1 100644 --- a/stories/components/d3-chart/tests/examples/bar-chart/basic-usage.tsx +++ b/stories/components/d3-chart/tests/examples/bar-chart/basic-usage.tsx @@ -37,6 +37,7 @@ export const defaultProps = getChartProps({ groupKey: 'category', type: 'group', data, + maxBarSize: 12, trend: { bar: [ { x: 'Category 0' as string, y: 2 as number }, diff --git a/stories/components/d3-chart/tests/examples/bar-horizontal/basic-usage.tsx b/stories/components/d3-chart/tests/examples/bar-horizontal/basic-usage.tsx index 5c50a7eca0..e22185f759 100644 --- a/stories/components/d3-chart/tests/examples/bar-horizontal/basic-usage.tsx +++ b/stories/components/d3-chart/tests/examples/bar-horizontal/basic-usage.tsx @@ -32,6 +32,7 @@ export const defaultProps = getChartProps({ groupKey: 'category', data, invertAxis: true, + maxBarSize: 12, }); Demo.defaultProps = defaultProps; diff --git a/stories/components/d3-chart/tests/examples/stacked-bar-chart/basic-usage.tsx b/stories/components/d3-chart/tests/examples/stacked-bar-chart/basic-usage.tsx index 4e163d63f6..b25a0610b5 100644 --- a/stories/components/d3-chart/tests/examples/stacked-bar-chart/basic-usage.tsx +++ b/stories/components/d3-chart/tests/examples/stacked-bar-chart/basic-usage.tsx @@ -32,6 +32,7 @@ export const defaultProps = getChartProps({ groupKey: 'bar', data, type: 'stack', + maxBarSize: 12, }); Demo.defaultProps = defaultProps; diff --git a/stories/components/d3-chart/tests/stacked-bar-chart.stories.tsx b/stories/components/d3-chart/tests/stacked-bar-chart.stories.tsx index 5ce11a7e39..c0e3102a4d 100644 --- a/stories/components/d3-chart/tests/stacked-bar-chart.stories.tsx +++ b/stories/components/d3-chart/tests/stacked-bar-chart.stories.tsx @@ -27,7 +27,7 @@ export const StackBarProps: StoryObj = { barRadius: { control: { type: 'number', min: 0, max: 20, step: 1 } }, barHMin: { control: { type: 'number', min: 0, max: 50, step: 1 } }, barTransparent: { control: 'boolean' }, - maxBarSize: { control: { type: 'number', min: 10, max: 100, step: 5 } }, + maxBarSize: { control: { type: 'number', min: 0, max: 100, step: 1 } }, duration: { control: { type: 'number', min: 0, max: 2000, step: 100 } }, }, args: StackBarPropsDefaultProps, @@ -37,6 +37,7 @@ export const BasicUsage = { render: BasicUsageExample, argTypes: getChartArgTypes({ type: { control: 'select', options: ['stack', 'group'] }, + maxBarSize: { control: { type: 'number', min: 0, max: 100, step: 1 } }, }), args: BasicUsageProps, };