diff --git a/app/charts/shared/axis-height-linear.tsx b/app/charts/shared/axis-height-linear.tsx index a0954c6e6..e7ae5f704 100644 --- a/app/charts/shared/axis-height-linear.tsx +++ b/app/charts/shared/axis-height-linear.tsx @@ -51,6 +51,9 @@ export const AxisHeightLinear = () => { textColor: labelColor, }); + const textIsOverlapping = axisTitleWidth > state.bounds.chartWidth; + const overlappingAmount = Math.ceil(axisTitleWidth / state.bounds.chartWidth); + return ( <> {state.chartType === "comboLineSingle" ? ( @@ -61,7 +64,10 @@ export const AxisHeightLinear = () => { {state.yAxisLabel} ) : ( - + {state.yAxisLabel} diff --git a/app/components/chart-footnotes.tsx b/app/components/chart-footnotes.tsx index 1d574e5e7..d0cd7de9e 100644 --- a/app/components/chart-footnotes.tsx +++ b/app/components/chart-footnotes.tsx @@ -292,7 +292,7 @@ const ChartFootnotesComboLineSingle = ({ ) : null; }; -const VisualizeLink = () => { +export const VisualizeLink = () => { const locale = useLocale(); return ( diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx index bfa429e0f..af885caac 100644 --- a/app/components/chart-published.tsx +++ b/app/components/chart-published.tsx @@ -10,7 +10,7 @@ import { extractChartConfigsComponentIris } from "@/charts/shared/chart-helpers" import { LoadingStateProvider } from "@/charts/shared/chart-loading-state"; import { isUsingImputation } from "@/charts/shared/imputation"; import { ChartErrorBoundary } from "@/components/chart-error-boundary"; -import { ChartFootnotes } from "@/components/chart-footnotes"; +import { ChartFootnotes, VisualizeLink } from "@/components/chart-footnotes"; import { ChartPanelLayout, ChartWrapper } from "@/components/chart-panel"; import { ChartControls, @@ -107,6 +107,9 @@ export const ChartPublished = (props: ChartPublishedProps) => { const { dataSource } = state; const locale = useLocale(); const metadataPanelStore = useMemo(() => createMetadataPanelStore(), []); + + const publishedChartClasses = usePublishedChartStyles({ shrink: true }); + const renderChart = useCallback( (chartConfig: ChartConfig) => ( { {state.layout.type === "dashboard" ? ( - <> + { )} - - - + + + + + ) : ( <> ( `calc(${theme.spacing(5)} + ${shrink ? DRAWER_WIDTH : 0}px)`, transition: "padding 0.25s ease", }, + dashboardBoxWrapper: { + [theme.breakpoints.up("xs")]: { + padding: theme.spacing(5, 4, 2, 4), + }, + [theme.breakpoints.up("md")]: { + padding: theme.spacing(5), + }, + [theme.breakpoints.up("lg")]: { + padding: theme.spacing(6), + }, + + backgroundColor: theme.palette.grey[200], + }, }) ); @@ -418,7 +436,10 @@ const ChartPublishedInnerImpl = (props: ChartPublishInnerProps) => { chartConfig={chartConfig} dashboardFilters={state.dashboardFilters} components={allComponents} - showVisualizeLink={state.chartConfigs.length === 1} + showVisualizeLink={ + state.chartConfigs.length === 1 && + state.layout.type !== "dashboard" + } />