Merge pull request #1324 from visualize-admin/feat/improve-responsive…

…ness feat: Dashboards improvements
visualize-admin · Feb 2, 2024 · b4ae184 · b4ae184
2 parents cca9946 + 170989b
commit b4ae184
Show file tree

Hide file tree

Showing 16 changed files with 957 additions and 610 deletions.
diff --git a/app/charts/pie/chart-pie.tsx b/app/charts/pie/chart-pie.tsx
@@ -75,44 +75,42 @@ export const ChartPieVisualization = ({
   );
 };
 
-export const ChartPie = memo(
-  (props: ChartProps<PieConfig> & { published: boolean }) => {
-    const { chartConfig, observations, dimensions, published } = props;
-    const { fields, interactiveFiltersConfig } = chartConfig;
-    const somePositive = observations.some(
-      (d) => (d[fields?.y?.componentIri] as number) > 0
-    );
-    const filters = useChartConfigFilters(chartConfig);
+export const ChartPie = memo((props: ChartProps<PieConfig>) => {
+  const { chartConfig, observations, dimensions } = props;
+  const { fields, interactiveFiltersConfig } = chartConfig;
+  const somePositive = observations.some(
+    (d) => (d[fields?.y?.componentIri] as number) > 0
+  );
+  const filters = useChartConfigFilters(chartConfig);
 
-    if (!somePositive) {
-      return <OnlyNegativeDataHint />;
-    }
+  if (!somePositive) {
+    return <OnlyNegativeDataHint />;
+  }
 
-    return (
-      <PieChart aspectRatio={published ? 1 : 0.4} {...props}>
-        <ChartContainer>
-          <ChartSvg>
-            <Pie />
-          </ChartSvg>
-          <Tooltip type="single" />
-        </ChartContainer>
-        <ChartControlsContainer>
-          {fields.animation && (
-            <TimeSlider
-              filters={filters}
-              dimensions={dimensions}
-              {...fields.animation}
-            />
-          )}
-          <LegendColor
-            chartConfig={chartConfig}
-            symbol="square"
-            interactive={
-              fields.segment && interactiveFiltersConfig?.legend.active
-            }
+  return (
+    <PieChart aspectRatio={0.4} {...props}>
+      <ChartContainer>
+        <ChartSvg>
+          <Pie />
+        </ChartSvg>
+        <Tooltip type="single" />
+      </ChartContainer>
+      <ChartControlsContainer>
+        {fields.animation && (
+          <TimeSlider
+            filters={filters}
+            dimensions={dimensions}
+            {...fields.animation}
           />
-        </ChartControlsContainer>
-      </PieChart>
-    );
-  }
-);
+        )}
+        <LegendColor
+          chartConfig={chartConfig}
+          symbol="square"
+          interactive={
+            fields.segment && interactiveFiltersConfig?.legend.active
+          }
+        />
+      </ChartControlsContainer>
+    </PieChart>
+  );
+});
diff --git a/app/charts/scatterplot/chart-scatterplot.tsx b/app/charts/scatterplot/chart-scatterplot.tsx
@@ -87,44 +87,42 @@ export const ChartScatterplotVisualization = ({
   );
 };
 
-export const ChartScatterplot = memo(
-  (props: ChartProps<ScatterPlotConfig> & { published: boolean }) => {
-    const { chartConfig, dimensions, published } = props;
-    const { fields, interactiveFiltersConfig } = chartConfig;
-    const filters = useChartConfigFilters(chartConfig);
+export const ChartScatterplot = memo((props: ChartProps<ScatterPlotConfig>) => {
+  const { chartConfig, dimensions } = props;
+  const { fields, interactiveFiltersConfig } = chartConfig;
+  const filters = useChartConfigFilters(chartConfig);
 
-    return (
-      <ScatterplotChart aspectRatio={published ? 1 : 0.4} {...props}>
-        <ChartContainer>
-          <ChartSvg>
-            <AxisWidthLinear />
-            <AxisHeightLinear />
-            <AxisWidthLinearDomain />
-            <AxisHeightLinearDomain />
-            <Scatterplot />
-            <InteractionVoronoi />
-          </ChartSvg>
-          <Tooltip type="single" />
-        </ChartContainer>
-        {(fields.animation || fields.segment) && (
-          <ChartControlsContainer>
-            {fields.animation && (
-              <TimeSlider
-                filters={filters}
-                dimensions={dimensions}
-                {...fields.animation}
-              />
-            )}
-            {fields.segment && (
-              <LegendColor
-                chartConfig={chartConfig}
-                symbol="circle"
-                interactive={interactiveFiltersConfig?.legend.active}
-              />
-            )}
-          </ChartControlsContainer>
-        )}
-      </ScatterplotChart>
-    );
-  }
-);
+  return (
+    <ScatterplotChart aspectRatio={0.4} {...props}>
+      <ChartContainer>
+        <ChartSvg>
+          <AxisWidthLinear />
+          <AxisHeightLinear />
+          <AxisWidthLinearDomain />
+          <AxisHeightLinearDomain />
+          <Scatterplot />
+          <InteractionVoronoi />
+        </ChartSvg>
+        <Tooltip type="single" />
+      </ChartContainer>
+      {(fields.animation || fields.segment) && (
+        <ChartControlsContainer>
+          {fields.animation && (
+            <TimeSlider
+              filters={filters}
+              dimensions={dimensions}
+              {...fields.animation}
+            />
+          )}
+          {fields.segment && (
+            <LegendColor
+              chartConfig={chartConfig}
+              symbol="circle"
+              interactive={interactiveFiltersConfig?.legend.active}
+            />
+          )}
+        </ChartControlsContainer>
+      )}
+    </ScatterplotChart>
+  );
+});
diff --git a/app/charts/shared/chart-data-filters.tsx b/app/charts/shared/chart-data-filters.tsx
@@ -7,7 +7,6 @@ import { useClient } from "urql";
 
 import { useQueryFilters } from "@/charts/shared/chart-helpers";
 import { useLoadingState } from "@/charts/shared/chart-loading-state";
-import { ChartFiltersList } from "@/components/chart-filters-list";
 import Flex from "@/components/flex";
 import { Select } from "@/components/form";
 import { Loading } from "@/components/hint";
@@ -132,39 +131,41 @@ export const ChartDataFilters = (props: ChartDataFiltersProps) => {
       </Trans>
     </Typography>
   ) : (
-    <Flex sx={{ flexDirection: "column", my: 4 }}>
+    <Flex sx={{ flexDirection: "column", mt: 4 }}>
       <Flex
         sx={{
-          justifyContent: "space-between",
+          justifyContent: "flex-end",
           alignItems: "flex-start",
           gap: 3,
           minHeight: 20,
         }}
       >
-        <ChartFiltersList
-          dataSource={dataSource}
-          chartConfig={chartConfig}
-          dimensions={dimensions}
-          measures={measures}
-        />
-
         {componentIris.length > 0 && (
           <Button
             variant="text"
-            endIcon={<Icon name={filtersVisible ? "close" : "add"} size={15} />}
+            endIcon={
+              <Icon
+                name="add"
+                size={16}
+                style={{
+                  transform: filtersVisible ? "rotate(45deg)" : "rotate(0deg)",
+                  transition: "transform 0.2s ease-in-out",
+                }}
+              />
+            }
             sx={{
               display: "flex",
               fontSize: ["0.75rem", "0.75rem", "0.75rem"],
               alignItems: "center",
-              gap: 2,
               minWidth: "fit-content",
-              minHeight: 36,
-              px: 3,
+              minHeight: 0,
+              px: 2,
+              py: 1,
             }}
             onClick={() => setFiltersVisible(!filtersVisible)}
           >
             {loading && (
-              <span style={{ marginTop: "0.1rem" }}>
+              <span style={{ marginTop: "0.1rem", marginRight: "0.5rem" }}>
                 <LoadingIndicator />
               </span>
             )}

diff --git a/app/charts/shared/containers.tsx b/app/charts/shared/containers.tsx
@@ -4,6 +4,7 @@ import React, { ReactNode } from "react";
 
 import { useChartState } from "@/charts/shared/chart-state";
 import { CalculationToggle } from "@/charts/shared/interactive-filter-calculation-toggle";
+import { useAlignChartElements } from "@/components/chart-helpers";
 import { useTransitionStore } from "@/stores/transition";
 
 export const ChartContainer = ({ children }: { children: ReactNode }) => {
@@ -12,6 +13,7 @@ export const ChartContainer = ({ children }: { children: ReactNode }) => {
   const transitionDuration = useTransitionStore((state) => state.duration);
   const { bounds } = useChartState();
   const { width, height } = bounds;
+  const alignChartElements = useAlignChartElements();
 
   React.useEffect(() => {
     if (ref.current) {
@@ -27,8 +29,25 @@ export const ChartContainer = ({ children }: { children: ReactNode }) => {
     }
   }, [height, enableTransition, transitionDuration]);
 
+  React.useEffect(() => {
+    if (height > alignChartElements.maxChartHeight) {
+      alignChartElements.setMaxChartHeight(height);
+    }
+  }, [height, alignChartElements]);
+
   return (
-    <div ref={ref} aria-hidden="true" style={{ position: "relative", width }}>
+    <div
+      ref={ref}
+      aria-hidden="true"
+      style={{
+        position: "relative",
+        width,
+        marginBottom: `${Math.max(
+          alignChartElements.maxChartHeight - height,
+          0
+        )}px`,
+      }}
+    >
       {children}
     </div>
   );

diff --git a/app/components/chart-filters-list.tsx b/app/components/chart-filters-list.tsx
@@ -1,3 +1,4 @@
+import { Trans } from "@lingui/macro";
 import { Box, Typography } from "@mui/material";
 import React, { Fragment } from "react";
 
@@ -144,10 +145,19 @@ export const ChartFiltersList = (props: ChartFiltersListProps) => {
   return allFilters.length ? (
     <Typography
       component="div"
-      variant="body2"
-      sx={{ mb: 4, color: "grey.800" }}
+      variant="caption"
+      color="grey.600"
       data-testid="chart-filters-list"
     >
+      <Typography
+        component="span"
+        variant="inherit"
+        fontWeight="bold"
+        color="grey.600"
+        sx={{ mr: 2 }}
+      >
+        <Trans id="controls.section.data.filters">Filters</Trans>:
+      </Typography>
       {allFilters.map(({ dimension, value }, i) => (
         <Fragment key={dimension.iri}>
           <Box component="span" fontWeight="bold">

diff --git a/app/components/chart-footnotes.tsx b/app/components/chart-footnotes.tsx
@@ -7,6 +7,7 @@ import {
   extractChartConfigComponentIris,
   useQueryFilters,
 } from "@/charts/shared/chart-helpers";
+import { ChartFiltersList } from "@/components/chart-filters-list";
 import { useChartTablePreview } from "@/components/chart-table-preview";
 import { DataDownloadMenu, RunSparqlQuery } from "@/components/data-download";
 import { ChartConfig, DataSource } from "@/configurator";
@@ -112,7 +113,13 @@ export const ChartFootnotes = ({
   ] = useEmbedOptions();
 
   return (
-    <>
+    <div>
+      <ChartFiltersList
+        dataSource={dataSource}
+        chartConfig={chartConfig}
+        dimensions={dimensions}
+        measures={measures}
+      />
       {data?.dataCubesMetadata
         ? data.dataCubesMetadata.map((dataCubeMetadata) => {
             const cubeLink = makeOpenDataLink(locale, dataCubeMetadata);
@@ -274,7 +281,7 @@ export const ChartFootnotes = ({
             );
           })
         : null}
-    </>
+    </div>
   );
 };