Merge pull request #1745 from visualize-admin/style/improve-dashboard…

…-embed style: Improved dashboard embed style & Overlapping Axis Title for Single Line Charts
visualize-admin · Sep 16, 2024 · f18afec · f18afec
2 parents 05efbb2 + facb3bc
commit f18afec
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 12 deletions.
diff --git 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}
         </text>
       ) : (
-        <foreignObject width={axisTitleWidth} height={axisLabelFontSize * 2}>
+        <foreignObject
+          width={textIsOverlapping ? state.bounds.chartWidth : axisTitleWidth}
+          height={(axisLabelFontSize + TICK_PADDING) * overlappingAmount * 2}
+        >
           <OpenMetadataPanelWrapper component={state.yMeasure}>
             <span style={{ fontSize: axisLabelFontSize }}>
               {state.yAxisLabel}

diff --git 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 (
     <Typography variant="caption" color="grey.600">

diff --git 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) => (
       <ChartPublishedIndividualChart
@@ -125,7 +128,7 @@ export const ChartPublished = (props: ChartPublishedProps) => {
     <MetadataPanelStoreContext.Provider value={metadataPanelStore}>
       <InteractiveFiltersProvider chartConfigs={state.chartConfigs}>
         {state.layout.type === "dashboard" ? (
-          <>
+          <Box className={publishedChartClasses.dashboardBoxWrapper}>
             <Box
               sx={{
                 mb:
@@ -142,13 +145,15 @@ export const ChartPublished = (props: ChartPublishedProps) => {
                 <Description text={state.layout.meta.description[locale]} />
               )}
             </Box>
-
-            <ChartPanelLayout
-              layoutType={state.layout.layout}
-              chartConfigs={state.chartConfigs}
-              renderChart={renderChart}
-            />
-          </>
+            <Flex sx={{ flexDirection: "column", gap: 4 }}>
+              <ChartPanelLayout
+                layoutType={state.layout.layout}
+                chartConfigs={state.chartConfigs}
+                renderChart={renderChart}
+              />
+              <VisualizeLink />
+            </Flex>
+          </Box>
         ) : (
           <>
             <Flex
@@ -199,6 +204,19 @@ const usePublishedChartStyles = makeStyles<Theme, { shrink: boolean }>(
         `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"
+              }
             />
           </InteractiveFiltersChartProvider>
         </LoadingStateProvider>