Skip to content

Commit

Permalink
feat: Update chart elements alignment on window resize
Browse files Browse the repository at this point in the history
  • Loading branch information
bprusinowski committed Feb 1, 2024
1 parent bf76983 commit 58b390e
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 9 deletions.
10 changes: 10 additions & 0 deletions app/components/chart-helpers.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import debounce from "lodash/debounce";
import React from "react";

type AlignChartElementsContext = {
Expand Down Expand Up @@ -42,6 +43,15 @@ export const AlignChartElementsProvider = ({
setMaxChartHeight(0);
}, []);

React.useEffect(() => {
const resizeReset = debounce(reset, 100);
window.addEventListener("resize", resizeReset);

return () => {
window.removeEventListener("resize", resizeReset);
};
}, [reset]);

return (
<AlignChartElementsContext.Provider
value={{
Expand Down
14 changes: 8 additions & 6 deletions app/components/chart-preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -348,11 +348,13 @@ export const ChartPreviewInner = (props: ChartPreviewInnerProps) => {
height: "100%",
}}
>
<Box style={{ height: "100%" }}>
<Box
<div style={{ height: "100%" }}>
<div
ref={headerRef}
sx={{ mb: `${headerMarginBottom}px` }}
data-X={headerMarginBottom}
style={{
marginBottom: `${headerMarginBottom}px`,
transition: "margin-bottom 0.2s ease-in-out",
}}
>
<Flex
sx={{
Expand Down Expand Up @@ -420,7 +422,7 @@ export const ChartPreviewInner = (props: ChartPreviewInnerProps) => {
measures={measures}
/>
)}
</Box>
</div>
<Box
ref={containerRef}
height={containerHeight.current}
Expand All @@ -442,7 +444,7 @@ export const ChartPreviewInner = (props: ChartPreviewInnerProps) => {
/>
)}
</Box>
</Box>
</div>
<ChartFootnotes
dataSource={dataSource}
chartConfig={chartConfig}
Expand Down
9 changes: 6 additions & 3 deletions app/components/chart-published.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -298,9 +298,12 @@ const ChartPublishedInner = (props: ChartPublishInnerProps) => {
)}
<LoadingStateProvider>
<InteractiveFiltersProvider>
<Box
<div
ref={headerRef}
sx={{ marginBottom: `${headerMarginBottom}px` }}
style={{
marginBottom: `${headerMarginBottom}px`,
transition: "margin-bottom 0.2s ease-in-out",
}}
>
<Flex
sx={{
Expand Down Expand Up @@ -331,7 +334,7 @@ const ChartPublishedInner = (props: ChartPublishInnerProps) => {
measures={measures}
/>
)}
</Box>
</div>
<Flex
flexDirection="column"
ref={containerRef}
Expand Down

0 comments on commit 58b390e

Please sign in to comment.