Merge pull request #1909 from visualize-admin/feat/tooltip-for-disabled-chart-types

feat: Tooltip for disabled chart types

Author: bprusinowski

CHANGELOG.md

@@ -21,6 +21,7 @@ You can also check the
   - Improved default chart selection when adding a new cube (by default the
     application will try to use dual-line chart with measures from different
     cubes)
+  - Added tooltip that explains why a given chart type can't be selected
 - Fixes
   - Introduced a `componentId` concept which makes the dimensions and measures
     unique by adding an unversioned cube iri to the unversioned component iri on

app/browse/datatable.tsx

@@ -8,7 +8,6 @@ import {
   TableRow,
   TableSortLabel,
   Theme,
-  Tooltip,
   TooltipProps,
 } from "@mui/material";
 import { ascending, descending } from "d3-array";
@@ -19,7 +18,9 @@ import {
   useQueryFilters,
 } from "@/charts/shared/chart-helpers";
 import { Loading } from "@/components/hint";
+import { MaybeTooltip } from "@/components/maybe-tooltip";
 import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
+import { TooltipTitle } from "@/components/tooltip-utils";
 import {
   ChartConfig,
   DashboardFiltersConfig,
@@ -59,11 +60,14 @@ const ComponentLabel = (props: ComponentLabelProps) => {
       <span style={{ fontWeight: "bold" }}>{label}</span>
     </OpenMetadataPanelWrapper>
   ) : component.description ? (
-    <Tooltip title={component.description} arrow {...tooltipProps}>
+    <MaybeTooltip
+      title={<TooltipTitle text={component.description} />}
+      tooltipProps={tooltipProps}
+    >
       <span style={{ fontWeight: "bold", textDecoration: "underline" }}>
         {label}
       </span>
-    </Tooltip>
+    </MaybeTooltip>
   ) : (
     <span style={{ fontWeight: "bold" }}>{label}</span>
   );

app/charts/index.spec.ts

@@ -13,14 +13,19 @@ import forestAreaData from "../test/__fixtures/data/forest-area-by-production-re
 
 import {
   getChartConfigAdjustedToChartType,
+  getEnabledChartTypes,
   getInitialConfig,
-  getPossibleChartTypes,
 } from "./index";
 
 jest.mock("../rdf/extended-cube", () => ({
   ExtendedCube: jest.fn(),
 }));
 
+jest.mock("@lingui/macro", () => ({
+  defineMessage: (str: string) => str,
+  t: (str: string) => str,
+}));
+
 const mockDimensions: Record<string, Dimension> = {
   geoCoordinates: {
     __typename: "GeoCoordinatesDimension",
@@ -175,42 +180,51 @@ describe("initial config", () => {
   });
 });
 
-describe("possible chart types", () => {
+describe("enabled chart types", () => {
   it("should allow appropriate chart types based on available dimensions", () => {
     const expectedChartTypes = ["area", "column", "line", "pie", "table"];
-    const possibleChartTypes = getPossibleChartTypes({
+    const { enabledChartTypes, possibleChartTypesDict } = getEnabledChartTypes({
       dimensions: bathingWaterData.data.dataCubeByIri
         .dimensions as any as Dimension[],
       measures: bathingWaterData.data.dataCubeByIri
         .measures as any as Measure[],
       cubeCount: 1,
-    }).sort();
+    });
 
-    expect(possibleChartTypes).toEqual(expectedChartTypes);
+    expect(enabledChartTypes.sort()).toEqual(expectedChartTypes);
+    expect(possibleChartTypesDict["comboLineSingle"].message).toBeDefined();
+    expect(possibleChartTypesDict["comboLineDual"].message).toBeDefined();
+    expect(possibleChartTypesDict["map"].message).toBeDefined();
   });
 
   it("should only allow table if there are only measures available", () => {
-    const possibleChartTypes = getPossibleChartTypes({
+    const { enabledChartTypes, possibleChartTypesDict } = getEnabledChartTypes({
       dimensions: [],
       measures: [{ __typename: "NumericalMeasure" }] as any,
       cubeCount: 1,
     });
 
-    expect(possibleChartTypes).toEqual(["table"]);
+    expect(enabledChartTypes).toEqual(["table"]);
+    expect(
+      Object.entries(possibleChartTypesDict)
+        .filter(([k]) => k !== "table")
+        .every(([, { message }]) => !!message)
+    ).toBe(true);
   });
 
   it("should only allow column, map, pie and table if only geo dimensions are available", () => {
-    const possibleChartTypes = getPossibleChartTypes({
+    const { enabledChartTypes, possibleChartTypesDict } = getEnabledChartTypes({
       dimensions: [{ __typename: "GeoShapesDimension" }] as any,
       measures: [{ __typename: "NumericalMeasure" }] as any,
       cubeCount: 1,
-    }).sort();
+    });
 
-    expect(possibleChartTypes).toEqual(["column", "map", "pie", "table"]);
+    expect(enabledChartTypes.sort()).toEqual(["column", "map", "pie", "table"]);
+    expect(possibleChartTypesDict["line"].message).toBeDefined();
   });
 
   it("should not allow multiline chart if there are no several measures of the same unit", () => {
-    const possibleChartTypes = getPossibleChartTypes({
+    const { enabledChartTypes, possibleChartTypesDict } = getEnabledChartTypes({
       dimensions: [],
       measures: [
         { __typename: "NumericalMeasure", unit: "m" },
@@ -219,7 +233,8 @@ describe("possible chart types", () => {
       cubeCount: 1,
     });
 
-    expect(possibleChartTypes).not.toContain("comboLineSingle");
+    expect(enabledChartTypes).not.toContain("comboLineSingle");
+    expect(possibleChartTypesDict["comboLineSingle"].message).toBeDefined();
   });
 });
 

app/charts/index.ts

@@ -1,3 +1,4 @@
+import { t } from "@lingui/macro";
 import { ascending, descending, group, rollup, rollups } from "d3-array";
 import produce from "immer";
 import get from "lodash/get";
@@ -563,7 +564,7 @@ export const getInitialConfig = (
         ) as TableFields,
       };
     case "comboLineSingle": {
-      // It's guaranteed by getPossibleChartTypes that there are at least two units.
+      // It's guaranteed by getEnabledChartTypes that there are at least two units.
       const mostCommonUnit = rollups(
         numericalMeasures.filter((d) => d.unit),
         (v) => v.length,
@@ -597,7 +598,7 @@ export const getInitialConfig = (
       };
     }
     case "comboLineDual": {
-      // It's guaranteed by getPossibleChartTypes that there are at least two units.
+      // It's guaranteed by getEnabledChartTypes that there are at least two units.
       const [firstUnit, secondUnit] = Array.from(
         new Set(numericalMeasures.filter((d) => d.unit).map((d) => d.unit))
       );
@@ -634,7 +635,7 @@ export const getInitialConfig = (
       };
     }
     case "comboLineColumn": {
-      // It's guaranteed by getPossibleChartTypes that there are at least two units.
+      // It's guaranteed by getEnabledChartTypes that there are at least two units.
       const [firstUnit, secondUnit] = Array.from(
         new Set(numericalMeasures.filter((d) => d.unit).map((d) => d.unit))
       );
@@ -1948,17 +1949,22 @@ const adjustSegmentSorting = ({
   return newSorting;
 };
 
-export const getPossibleChartTypes = ({
+const categoricalEnabledChartTypes: RegularChartType[] = ["column", "pie"];
+const geoEnabledChartTypes: RegularChartType[] = ["column", "map", "pie"];
+const multipleNumericalMeasuresEnabledChartTypes: RegularChartType[] = [
+  "scatterplot",
+];
+const timeEnabledChartTypes: RegularChartType[] = ["area", "column", "line"];
+
+export const getEnabledChartTypes = ({
   dimensions,
   measures,
-  allowedChartTypes,
   cubeCount,
 }: {
   dimensions: Dimension[];
   measures: Measure[];
-  allowedChartTypes?: ChartType[];
   cubeCount: number;
-}): ChartType[] => {
+}) => {
   const numericalMeasures = measures.filter(isNumericalMeasure);
   const ordinalMeasures = measures.filter(isOrdinalMeasure);
   const categoricalDimensions = getCategoricalDimensions(dimensions);
@@ -1967,23 +1973,76 @@ export const getPossibleChartTypes = ({
     (d) => isTemporalDimension(d) || isTemporalEntityDimension(d)
   );
 
-  const categoricalEnabled: RegularChartType[] = ["column", "pie"];
-  const geoEnabled: RegularChartType[] = ["column", "map", "pie"];
-  const multipleNumericalMeasuresEnabled: RegularChartType[] = ["scatterplot"];
-  const timeEnabled: RegularChartType[] = ["area", "column", "line"];
+  const possibleChartTypesDict = Object.fromEntries(
+    chartTypes.map((chartType) => [
+      chartType,
+      {
+        enabled: chartType === "table",
+        message: undefined,
+      },
+    ])
+  ) as Record<
+    ChartType,
+    {
+      enabled: boolean;
+      message: string | undefined;
+    }
+  >;
+  const enableChartType = (chartType: ChartType) => {
+    possibleChartTypesDict[chartType] = {
+      enabled: true,
+      message: undefined,
+    };
+  };
+  const enableChartTypes = (chartTypes: ChartType[]) => {
+    for (const chartType of chartTypes) {
+      enableChartType(chartType);
+    }
+  };
+  const maybeDisableChartType = (chartType: ChartType, message: string) => {
+    if (
+      !possibleChartTypesDict[chartType].enabled &&
+      !possibleChartTypesDict[chartType].message
+    ) {
+      possibleChartTypesDict[chartType] = {
+        enabled: false,
+        message,
+      };
+    }
+  };
+  const maybeDisableChartTypes = (chartTypes: ChartType[], message: string) => {
+    for (const chartType of chartTypes) {
+      maybeDisableChartType(chartType, message);
+    }
+  };
 
-  const possibles: ChartType[] = ["table"];
   if (numericalMeasures.length > 0) {
     if (categoricalDimensions.length > 0) {
-      possibles.push(...categoricalEnabled);
+      enableChartTypes(categoricalEnabledChartTypes);
+    } else {
+      maybeDisableChartTypes(
+        categoricalEnabledChartTypes,
+        t({
+          id: "controls.chart.disabled.categorical",
+          message: "At least one categorical dimension is required.",
+        })
+      );
     }
 
     if (geoDimensions.length > 0) {
-      possibles.push(...geoEnabled);
+      enableChartTypes(geoEnabledChartTypes);
+    } else {
+      maybeDisableChartTypes(
+        geoEnabledChartTypes,
+        t({
+          id: "controls.chart.disabled.geographical",
+          message: "At least one geographical dimension is required.",
+        })
+      );
     }
 
     if (numericalMeasures.length > 1) {
-      possibles.push(...multipleNumericalMeasuresEnabled);
+      enableChartTypes(multipleNumericalMeasuresEnabledChartTypes);
 
       if (temporalDimensions.length > 0) {
         const measuresWithUnit = numericalMeasures.filter((d) => d.unit);
@@ -1992,7 +2051,16 @@ export const getPossibleChartTypes = ({
         );
 
         if (uniqueUnits.length > 1) {
-          possibles.push(...comboDifferentUnitChartTypes);
+          enableChartTypes(comboDifferentUnitChartTypes);
+        } else {
+          maybeDisableChartTypes(
+            comboDifferentUnitChartTypes,
+            t({
+              id: "controls.chart.disabled.different-unit",
+              message:
+                "At least two numerical measures with different units are required.",
+            })
+          );
         }
 
         const unitCounts = rollup(
@@ -2002,29 +2070,75 @@ export const getPossibleChartTypes = ({
         );
 
         if (Array.from(unitCounts.values()).some((d) => d > 1)) {
-          possibles.push(...comboSameUnitChartTypes);
+          enableChartTypes(comboSameUnitChartTypes);
+        } else {
+          maybeDisableChartTypes(
+            comboSameUnitChartTypes,
+            t({
+              id: "controls.chart.disabled.same-unit",
+              message:
+                "At least two numerical measures with the same unit are required.",
+            })
+          );
         }
+      } else {
+        maybeDisableChartTypes(
+          comboChartTypes,
+          t({
+            id: "controls.chart.disabled.temporal",
+            message: "At least one temporal dimension is required.",
+          })
+        );
       }
+    } else {
+      maybeDisableChartTypes(
+        [...multipleNumericalMeasuresEnabledChartTypes, ...comboChartTypes],
+        t({
+          id: "controls.chart.disabled.multiple-measures",
+          message: "At least two numerical measures are required.",
+        })
+      );
     }
 
     if (temporalDimensions.length > 0) {
-      possibles.push(...timeEnabled);
+      enableChartTypes(timeEnabledChartTypes);
+    } else {
+      maybeDisableChartTypes(
+        timeEnabledChartTypes,
+        t({
+          id: "controls.chart.disabled.temporal",
+          message: "At least one temporal dimension is required.",
+        })
+      );
     }
+  } else {
+    maybeDisableChartTypes(
+      chartTypes.filter((d) => d !== "table"),
+      t({
+        id: "controls.chart.disabled.numerical",
+        message: "At least one numerical measure is required.",
+      })
+    );
   }
 
   if (ordinalMeasures.length > 0 && geoDimensions.length > 0) {
-    possibles.push("map");
+    enableChartType("map");
+  } else {
+    maybeDisableChartType(
+      "map",
+      "At least one ordinal measure and one geographical dimension are required."
+    );
   }
 
   const chartTypesOrder = getChartTypeOrder({ cubeCount });
-
-  return chartTypes
-    .filter(
-      (d) =>
-        possibles.includes(d) &&
-        (!allowedChartTypes || allowedChartTypes.includes(d))
-    )
+  const enabledChartTypes = chartTypes
+    .filter((d) => possibleChartTypesDict[d].enabled)
     .sort((a, b) => chartTypesOrder[a] - chartTypesOrder[b]);
+
+  return {
+    enabledChartTypes,
+    possibleChartTypesDict,
+  };
 };
 
 export const getFieldComponentIds = (fields: ChartConfig["fields"]) => {