diff --git a/packages/pluggableWidgets/area-chart-web/CHANGELOG.md b/packages/pluggableWidgets/area-chart-web/CHANGELOG.md index 51cc6f0a39..09b7911891 100644 --- a/packages/pluggableWidgets/area-chart-web/CHANGELOG.md +++ b/packages/pluggableWidgets/area-chart-web/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Fixed + +- We fixed an issue where the chart in design mode overlapped other widgets on the page. The design mode preview now follows the configured width and height and stays within its parent. + ## [6.2.1] - 2025-07-15 ### Changed diff --git a/packages/pluggableWidgets/bar-chart-web/CHANGELOG.md b/packages/pluggableWidgets/bar-chart-web/CHANGELOG.md index 482886e036..9ecf58a574 100644 --- a/packages/pluggableWidgets/bar-chart-web/CHANGELOG.md +++ b/packages/pluggableWidgets/bar-chart-web/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Fixed + +- We fixed an issue where the chart in design mode overlapped other widgets on the page. The design mode preview now follows the configured width and height and stays within its parent. + ## [6.2.1] - 2025-07-15 ### Changed diff --git a/packages/pluggableWidgets/bubble-chart-web/CHANGELOG.md b/packages/pluggableWidgets/bubble-chart-web/CHANGELOG.md index a9cdfe0c0a..b77a009094 100644 --- a/packages/pluggableWidgets/bubble-chart-web/CHANGELOG.md +++ b/packages/pluggableWidgets/bubble-chart-web/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Fixed + +- We fixed an issue where the chart in design mode overlapped other widgets on the page. The design mode preview now follows the configured width and height and stays within its parent. + ## [6.2.1] - 2025-07-15 ### Changed diff --git a/packages/pluggableWidgets/column-chart-web/CHANGELOG.md b/packages/pluggableWidgets/column-chart-web/CHANGELOG.md index 87a8314a72..be6566a424 100644 --- a/packages/pluggableWidgets/column-chart-web/CHANGELOG.md +++ b/packages/pluggableWidgets/column-chart-web/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Fixed + +- We fixed an issue where the chart in design mode overlapped other widgets on the page. The design mode preview now follows the configured width and height and stays within its parent. + ## [6.2.1] - 2025-07-15 ### Changed diff --git a/packages/pluggableWidgets/heatmap-chart-web/CHANGELOG.md b/packages/pluggableWidgets/heatmap-chart-web/CHANGELOG.md index 870a698e66..f448e7c86d 100644 --- a/packages/pluggableWidgets/heatmap-chart-web/CHANGELOG.md +++ b/packages/pluggableWidgets/heatmap-chart-web/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Fixed + +- We fixed an issue where the chart in design mode overlapped other widgets on the page. The design mode preview now follows the configured width and height and stays within its parent. + ## [6.2.1] - 2025-07-15 ### Fixed diff --git a/packages/pluggableWidgets/line-chart-web/CHANGELOG.md b/packages/pluggableWidgets/line-chart-web/CHANGELOG.md index fc4fdb00a0..12bdb4f29b 100644 --- a/packages/pluggableWidgets/line-chart-web/CHANGELOG.md +++ b/packages/pluggableWidgets/line-chart-web/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Fixed + +- We fixed an issue where the chart in design mode overlapped other widgets on the page. The design mode preview now follows the configured width and height and stays within its parent. + ## [6.2.1] - 2025-07-15 ### Changed diff --git a/packages/pluggableWidgets/pie-doughnut-chart-web/CHANGELOG.md b/packages/pluggableWidgets/pie-doughnut-chart-web/CHANGELOG.md index 014c035684..42c168a09f 100644 --- a/packages/pluggableWidgets/pie-doughnut-chart-web/CHANGELOG.md +++ b/packages/pluggableWidgets/pie-doughnut-chart-web/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Fixed + +- We fixed an issue where the chart in design mode overlapped other widgets on the page. The design mode preview now follows the configured width and height and stays within its parent. + ## [6.2.1] - 2025-07-15 ### Changed diff --git a/packages/pluggableWidgets/time-series-chart-web/CHANGELOG.md b/packages/pluggableWidgets/time-series-chart-web/CHANGELOG.md index 24cbd06650..5670f07398 100644 --- a/packages/pluggableWidgets/time-series-chart-web/CHANGELOG.md +++ b/packages/pluggableWidgets/time-series-chart-web/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Fixed + +- We fixed an issue where the chart in design mode overlapped other widgets on the page. The design mode preview now follows the configured width and height and stays within its parent. + ## [6.2.1] - 2025-07-15 ### Changed diff --git a/packages/shared/charts/src/components/ChartPreview.tsx b/packages/shared/charts/src/components/ChartPreview.tsx index 44b17af8fc..cab26a4531 100644 --- a/packages/shared/charts/src/components/ChartPreview.tsx +++ b/packages/shared/charts/src/components/ChartPreview.tsx @@ -1,8 +1,12 @@ -import { ComponentType, ReactElement, ReactNode } from "react"; +import { ComponentType, CSSProperties, ReactElement, ReactNode } from "react"; export interface ChartPreviewProps { class: string; showLegend: boolean; + widthUnit: "percentage" | "pixels"; + width: number | null; + heightUnit: "percentageOfWidth" | "pixels" | "percentageOfParent"; + height: number | null; playground: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> }; showPlaygroundSlot?: boolean; image: ReactNode; @@ -12,7 +16,7 @@ export interface ChartPreviewProps { export function ChartPreview(props: ChartPreviewProps): ReactElement { const { renderer: PlaygroundSlot } = props.playground ?? { renderer: () => null }; return ( -
+
{ - return {props.alt}; + return ( + {props.alt} + ); }; ChartPreview.PlotLegend = (props: { src: string; alt: string }) => { - return {props.alt}; + return {props.alt}; }; +// Mirrors the runtime dimensions, but never lets the preview grow past its parent. +function getPreviewDimensions(props: ChartPreviewProps): CSSProperties { + const style: CSSProperties = { + display: "flex", + overflow: "hidden", + boxSizing: "border-box", + maxWidth: "100%", + maxHeight: "100%" + }; + + if (props.width) { + style.width = props.widthUnit === "percentage" ? `${props.width}%` : `${props.width}px`; + } + + if (props.height) { + if (props.heightUnit === "percentageOfWidth") { + style.aspectRatio = `100 / ${props.height}`; + } else if (props.heightUnit === "pixels") { + style.height = `${props.height}px`; + } else { + style.height = `${props.height}%`; + } + } + + return style; +} + function Chart(props: ChartPreviewProps): ReactElement { return ( -
+
{props.image} {props.showLegend ? props.legend : null}
diff --git a/packages/shared/charts/src/components/__tests__/ChartPreview.spec.tsx b/packages/shared/charts/src/components/__tests__/ChartPreview.spec.tsx new file mode 100644 index 0000000000..5e85921f15 --- /dev/null +++ b/packages/shared/charts/src/components/__tests__/ChartPreview.spec.tsx @@ -0,0 +1,62 @@ +import { render } from "@testing-library/react"; +import { ChartPreview, ChartPreviewProps } from "../ChartPreview"; + +function renderChart(props: Partial = {}): HTMLElement { + const { container } = render( + null }} + widthUnit="percentage" + width={100} + heightUnit="percentageOfWidth" + height={75} + image={} + legend={} + {...props} + /> + ); + return container.querySelector(".chart-under-test")!; +} + +describe("ChartPreview", () => { + it("never grows past its parent", () => { + const chart = renderChart({ widthUnit: "pixels", width: 2000, heightUnit: "pixels", height: 2000 }); + + expect(chart.style.maxWidth).toBe("100%"); + expect(chart.style.maxHeight).toBe("100%"); + expect(chart.parentElement!.style.display).toBe("flex"); + expect(chart.parentElement!.style.maxWidth).toBe("100%"); + }); + + it("applies percentage width", () => { + expect(renderChart({ widthUnit: "percentage", width: 50 }).style.width).toBe("50%"); + }); + + it("applies pixel width and height", () => { + const chart = renderChart({ widthUnit: "pixels", width: 400, heightUnit: "pixels", height: 250 }); + + expect(chart.style.width).toBe("400px"); + expect(chart.style.height).toBe("250px"); + }); + + it("applies height as percentage of parent", () => { + expect(renderChart({ heightUnit: "percentageOfParent", height: 60 }).style.height).toBe("60%"); + }); + + it("leaves height to the aspect ratio when height is a percentage of width", () => { + expect(renderChart({ heightUnit: "percentageOfWidth", height: 50 }).style.height).toBe(""); + }); + + it("lets the plot image shrink with the chart", () => { + const image = renderChart().querySelector("img[alt='Plot']")!; + + expect(image.style.width).toBe(""); + expect(image.style.minWidth).toBe("0"); + }); + + it("renders the legend only when enabled", () => { + expect(renderChart({ showLegend: false }).querySelector("img[alt='Legend']")).toBeNull(); + expect(renderChart({ showLegend: true }).querySelector("img[alt='Legend']")).not.toBeNull(); + }); +});