feat: Add layout annotations in published chart

visualize-admin · Dec 7, 2023 · df9e839 · df9e839
1 parent 73affe2
commit df9e839
Showing 1 changed file with 32 additions and 14 deletions.
diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
@@ -54,29 +54,47 @@ export const ChartPublished = (props: ChartPublishedProps) => {
   const { configKey } = props;
   const [state] = useConfiguratorState(isPublished);
   const { dataSource } = state;
-  const chartConfig = getChartConfig(state);
+  const locale = useLocale();
 
   return (
     <ChartTablePreviewProvider>
       {state.layout.type === "dashboard" ? (
-        <ChartPanelLayout type={state.layout.layout}>
-          {state.chartConfigs.map((chartConfig) => (
-            <ChartWrapper key={chartConfig.key} layout={state.layout}>
-              <ChartPublishedInner
-                dataSource={dataSource}
-                state={state}
-                chartConfig={chartConfig}
-                configKey={configKey}
-              />
-            </ChartWrapper>
-          ))}
-        </ChartPanelLayout>
+        <>
+          <Box
+            sx={{
+              mb:
+                state.layout.meta.title[locale] ||
+                state.layout.meta.description[locale]
+                  ? 4
+                  : 0,
+            }}
+          >
+            {state.layout.meta.title[locale] && (
+              <Title text={state.layout.meta.title[locale]} />
+            )}
+            {state.layout.meta.description[locale] && (
+              <Description text={state.layout.meta.description[locale]} />
+            )}
+          </Box>
+          <ChartPanelLayout type={state.layout.layout}>
+            {state.chartConfigs.map((chartConfig) => (
+              <ChartWrapper key={chartConfig.key} layout={state.layout}>
+                <ChartPublishedInner
+                  dataSource={dataSource}
+                  state={state}
+                  chartConfig={chartConfig}
+                  configKey={configKey}
+                />
+              </ChartWrapper>
+            ))}
+          </ChartPanelLayout>
+        </>
       ) : (
         <ChartWrapper layout={state.layout}>
           <ChartPublishedInner
             dataSource={dataSource}
             state={state}
-            chartConfig={chartConfig}
+            chartConfig={getChartConfig(state)}
             configKey={configKey}
           />
         </ChartWrapper>