Merge pull request #1241 from visualize-admin/style/combo-charts-ui-a…

…lignment

style: Combo charts UI alignments

app/charts/combo/chart-combo-line-single.tsx

@@ -80,9 +80,16 @@ export const ChartComboLineSingleVisualization = (
 
 export const ChartComboLineSingle = React.memo(
   (props: ChartProps<ComboLineSingleConfig>) => {
-    const { chartConfig } = props;
+    const { chartConfig, measures } = props;
     const { interactiveFiltersConfig } = chartConfig;
 
+    const getLegendItemDimension = React.useCallback(
+      (label) => {
+        return measures.find((measure) => measure.label === label);
+      },
+      [measures]
+    );
+
     return (
       <ComboLineSingleChart aspectRatio={0.4} {...props}>
         <ChartContainer>
@@ -97,7 +104,11 @@ export const ChartComboLineSingle = React.memo(
           <Tooltip type="multiple" />
         </ChartContainer>
         <ChartControlsContainer>
-          <LegendColor chartConfig={chartConfig} symbol="line" />
+          <LegendColor
+            chartConfig={chartConfig}
+            symbol="line"
+            getLegendItemDimension={getLegendItemDimension}
+          />
         </ChartControlsContainer>
       </ComboLineSingleChart>
     );

app/charts/shared/legend-color.tsx

@@ -10,6 +10,7 @@ import { rgbArrayToHex } from "@/charts/shared/colors";
 import { getLegendGroups } from "@/charts/shared/legend-color-helpers";
 import Flex from "@/components/flex";
 import { Checkbox, CheckboxProps } from "@/components/form";
+import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
 import {
   ChartConfig,
   DataSource,
@@ -208,11 +209,16 @@ const useLegendGroups = ({
 type LegendColorProps = {
   chartConfig: ChartConfig;
   symbol: LegendSymbol;
+  // If the legend is based on measures, this function can be used to get the
+  // corresponding measure to open the metadata panel.
+  getLegendItemDimension?: (
+    dimensionLabel: string
+  ) => DimensionMetadataFragment | undefined;
   interactive?: boolean;
 };
 
 export const LegendColor = memo(function LegendColor(props: LegendColorProps) {
-  const { chartConfig, symbol, interactive } = props;
+  const { chartConfig, symbol, getLegendItemDimension, interactive } = props;
   const { colors, getColorLabel } = useChartState() as ColorsChartState;
   const values = colors.domain();
   const groups = useLegendGroups({ chartConfig, values });
@@ -222,6 +228,7 @@ export const LegendColor = memo(function LegendColor(props: LegendColorProps) {
       groups={groups}
       getColor={(v) => colors(v)}
       getLabel={getColorLabel}
+      getItemDimension={getLegendItemDimension}
       symbol={symbol}
       interactive={interactive}
       numberOfOptions={values.length}
@@ -288,14 +295,24 @@ type LegendColorContentProps = {
   groups: ReturnType<typeof useLegendGroups>;
   getColor: (d: string) => string;
   getLabel: (d: string) => string;
+  getItemDimension?: (
+    dimensionLabel: string
+  ) => DimensionMetadataFragment | undefined;
   symbol: LegendSymbol;
   interactive?: boolean;
   numberOfOptions: number;
 };
 
 const LegendColorContent = (props: LegendColorContentProps) => {
-  const { groups, getColor, getLabel, symbol, interactive, numberOfOptions } =
-    props;
+  const {
+    groups,
+    getColor,
+    getLabel,
+    getItemDimension,
+    symbol,
+    interactive,
+    numberOfOptions,
+  } = props;
   const classes = useStyles();
   const categories = useInteractiveFilters((d) => d.categories);
   const addCategory = useInteractiveFilters((d) => d.addCategory);
@@ -358,6 +375,7 @@ const LegendColorContent = (props: LegendColorContentProps) => {
                       key={`${d}_${i}`}
                       item={label}
                       color={getColor(d)}
+                      dimension={getItemDimension?.(label)}
                       symbol={symbol}
                       interactive={interactive}
                       onToggle={handleToggle}
@@ -377,6 +395,7 @@ const LegendColorContent = (props: LegendColorContentProps) => {
 type LegendItemProps = {
   item: string;
   color: string;
+  dimension?: DimensionMetadataFragment;
   symbol: LegendSymbol;
   interactive?: boolean;
   onToggle?: CheckboxProps["onChange"];
@@ -389,6 +408,7 @@ export const LegendItem = (props: LegendItemProps) => {
   const {
     item,
     color,
+    dimension,
     symbol,
     interactive,
     onToggle,
@@ -424,7 +444,14 @@ export const LegendItem = (props: LegendItemProps) => {
     </MaybeTooltip>
   ) : (
     <Flex data-testid="legendItem" className={classes.legendItem}>
-      {item}
+      {dimension ? (
+        <OpenMetadataPanelWrapper dim={dimension}>
+          {/* Account for the added space, to align the symbol and label. */}
+          <span style={{ marginTop: 3 }}>{item}</span>
+        </OpenMetadataPanelWrapper>
+      ) : (
+        item
+      )}
     </Flex>
   );
 };

app/components/form.tsx

@@ -463,7 +463,9 @@ const DisabledMessageIcon = (props: DisabledMessageIconProps) => {
         </Typography>
       }
       placement="top"
-      componentsProps={{ tooltip: { sx: { width: 140, px: 2, py: 1 } } }}
+      componentsProps={{
+        tooltip: { sx: { width: 140, px: 2, py: 1, lineHeight: 1.2 } },
+      }}
       sx={{ opacity: 1, pointerEvents: "auto", ml: 1 }}
     >
       <Typography color="warning.main">

app/configurator/components/chart-controls/color-palette.tsx

@@ -147,7 +147,7 @@ export const ColorPalette = ({
         ))}
       </Select>
       {component && state.state === "CONFIGURING_CHART" && (
-        <ColorPaletteReset
+        <ColorPaletteControls
           field={field}
           component={component}
           state={state}
@@ -197,7 +197,7 @@ const ColorSquare = ({
   );
 };
 
-const ColorPaletteReset = ({
+const ColorPaletteControls = ({
   field,
   colorConfigPath,
   component,
@@ -252,14 +252,37 @@ const ColorPaletteReset = ({
       palette === "dimension";
 
     return (
-      <Button
-        disabled={same}
-        onClick={resetColorPalette}
-        variant="inline"
-        sx={{ mt: 1, px: 1 }}
-      >
-        <Trans id="controls.color.palette.reset">Reset color palette</Trans>
-      </Button>
+      <Box sx={{ display: "flex", alignItems: "center", gap: 1, mt: 1 }}>
+        <Button
+          disabled={same}
+          onClick={resetColorPalette}
+          variant="inline"
+          sx={{ px: 1 }}
+        >
+          <Trans id="controls.color.palette.reset">Reset color palette</Trans>
+        </Button>
+        <Typography color="secondary">•</Typography>
+        <Button
+          onClick={() => {
+            return dispatch({
+              type: "CHART_CONFIG_UPDATE_COLOR_MAPPING",
+              value: {
+                field,
+                colorConfigPath,
+                dimensionIri: component.iri,
+                values: component.values,
+                random: true,
+              },
+            });
+          }}
+          variant="inline"
+          sx={{ px: 1 }}
+        >
+          <Trans id="controls.filters.select.refresh-colors">
+            Shuffle colors
+          </Trans>
+        </Button>
+      </Box>
     );
   } else {
     return <Box mt={2} />;

app/configurator/components/chart-controls/color-picker.tsx

@@ -1,16 +1,8 @@
 import { Trans } from "@lingui/macro";
-import {
-  Box,
-  Button,
-  Input,
-  Popover,
-  styled,
-  Theme,
-  Typography,
-} from "@mui/material";
+import { Box, Button, Popover, styled, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { color as d3Color } from "d3";
-import React, { MouseEventHandler, useCallback, useRef, useState } from "react";
+import { MouseEventHandler, useRef } from "react";
 
 import useDisclosure from "@/components/use-disclosure";
 import VisuallyHidden from "@/components/visually-hidden";
@@ -75,43 +67,9 @@ const useColorPickerStyles = makeStyles((theme: Theme) => ({
     gap: 2,
     marginBottom: 2,
   },
-  input: {
-    color: theme.palette.grey[700],
-    borderColor: theme.palette.divider,
-    backgroundColor: theme.palette.grey[100],
-    fontSize: "0.875rem",
-    "&:focus": { outline: "none", borderColor: theme.palette.primary.main },
-  },
 }));
 
 export const ColorPicker = ({ selectedColor, colors, onChange }: Props) => {
-  const [inputColorValue, setInputColorValue] = useState(selectedColor);
-
-  const selectColor = useCallback(
-    (_color) => {
-      setInputColorValue(_color);
-      // Make sure onChange is only called with valid colors
-      const c = d3Color(_color);
-
-      if (c) {
-        onChange?.(_color);
-      }
-    },
-    [onChange, setInputColorValue]
-  );
-
-  const formatInputColor = useCallback(
-    (_color) => {
-      // Make sure onChange is only called with valid colors
-      const c = d3Color(_color);
-
-      if (c) {
-        setInputColorValue(_color);
-      }
-    },
-    [setInputColorValue]
-  );
-
   const classes = useColorPickerStyles();
 
   return (
@@ -122,24 +80,10 @@ export const ColorPicker = ({ selectedColor, colors, onChange }: Props) => {
             key={color}
             color={color}
             selected={color === selectedColor}
-            onClick={() => {
-              selectColor(color);
-            }}
+            onClick={() => onChange?.(color)}
           />
         ))}
       </Box>
-      <Box sx={{ position: "relative" }}>
-        <Input
-          className={classes.input}
-          value={inputColorValue}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            selectColor(e.currentTarget.value);
-          }}
-          onBlur={(e) => {
-            formatInputColor(e.currentTarget.value);
-          }}
-        />
-      </Box>
     </Box>
   );
 };

app/configurator/components/chart-options-selector.tsx

@@ -924,7 +924,7 @@ const ChartComboLineColumnYField = (
             sortOptions={false}
             label={t({
               id: "controls.chart.combo.y.column-measure",
-              message: "Column measure",
+              message: "Left axis (column)",
             })}
             value={y.columnComponentIri}
             onChange={(e) => {
@@ -939,40 +939,17 @@ const ChartComboLineColumnYField = (
                 },
               });
             }}
+            sx={{ mb: 2 }}
           />
 
-          <Box component="fieldset" mt={2} mb={4}>
-            <FieldSetLegend
-              legendTitle={
-                <Trans id="controls.chart.combo.y.axis-orientation">
-                  Axis orientation
-                </Trans>
-              }
-            />
-            <Flex sx={{ justifyContent: "flex-start" }}>
-              {[
-                { value: "right", label: t({ id: "left", message: "Left" }) },
-                { value: "left", label: t({ id: "right", message: "Right" }) },
-              ].map((d) => (
-                <ChartOptionRadioField
-                  key={d.value}
-                  label={d.label}
-                  field="y"
-                  path="lineAxisOrientation"
-                  value={d.value}
-                />
-              ))}
-            </Flex>
-          </Box>
-
           <Select
             id={`mesure-${y.lineComponentIri}`}
             options={[]}
             optionGroups={getOptionGroups("line")}
             sortOptions={false}
             label={t({
               id: "controls.chart.combo.y.line-measure",
-              message: "Line measure",
+              message: "Right axis (line)",
             })}
             value={y.lineComponentIri}
             onChange={(e) => {