Merge pull request #1706 from visualize-admin/feat/tab-labels

feat: Add chart and dashboard labels

app/charts/index.spec.ts

@@ -240,6 +240,12 @@ describe("chart type switch", () => {
           fr: "",
           it: "",
         },
+        label: {
+          en: "",
+          de: "",
+          fr: "",
+          it: "",
+        },
       },
       fields: {
         x: {

app/charts/index.ts

@@ -330,6 +330,12 @@ export const META: Meta = {
     fr: "",
     it: "",
   },
+  label: {
+    en: "",
+    de: "",
+    fr: "",
+    it: "",
+  },
 };
 
 type GetInitialConfigOptions = {

app/components/chart-selection-tabs.tsx

@@ -39,7 +39,7 @@ import { ChartTypeSelector } from "@/configurator/components/chart-type-selector
 import { getIconName } from "@/configurator/components/ui-helpers";
 import { useFlag } from "@/flags";
 import { Icon, IconName } from "@/icons";
-import { defaultLocale, useLocale } from "@/locales";
+import { useLocale } from "@/locales";
 import useEvent from "@/utils/use-event";
 
 type TabsState = {
@@ -92,19 +92,16 @@ export const ChartSelectionTabs = () => {
   }
 
   const chartConfig = getChartConfig(state);
-  const data: TabDatum[] = state.chartConfigs.map((d) => {
-    return {
-      key: d.key,
-      chartType: d.chartType,
-      active: d.key === chartConfig.key,
-      label:
-        d.meta.title[locale] !== ""
-          ? d.meta.title[locale]
-          : d.meta.title[defaultLocale] !== ""
-            ? d.meta.title[defaultLocale]
-            : undefined,
-    };
-  });
+  const data: TabDatum[] = state.chartConfigs.map(
+    ({ key, chartType, meta }) => {
+      return {
+        key,
+        chartType,
+        active: key === chartConfig.key,
+        label: meta.label[locale] !== "" ? meta.label[locale] : undefined,
+      };
+    }
+  );
 
   return (
     <TabsStateProvider>
@@ -620,6 +617,12 @@ const TabContent = (props: {
     onSwitchClick,
   } = props;
   const classes = useIconStyles({ active, dragging });
+  const [_, dispatch] = useConfiguratorState();
+  const showAddLabel = editable && !label;
+  const addLabel = t({
+    id: "chart-selection-tabs.add-label",
+    message: "Add label",
+  });
   return (
     <Flex className={classes.root}>
       <Button
@@ -629,24 +632,33 @@ const TabContent = (props: {
       >
         <Icon name={iconName} />
       </Button>
-      {label ? (
-        <Tooltip title={label} enterDelay={750}>
+      {label || showAddLabel ? (
+        <Tooltip title={label || addLabel} enterDelay={750}>
           <Button
             variant="text"
-            color="primary"
             className={classes.label}
-            onClick={onSwitchClick}
+            onClick={() => {
+              onSwitchClick?.();
+              if (editable) {
+                dispatch({
+                  type: "CHART_ACTIVE_FIELD_CHANGED",
+                  value: "label",
+                });
+              }
+            }}
+            sx={{
+              color: (t) =>
+                label ? "inherit" : `${t.palette.grey[500]} !important`,
+            }}
           >
-            {label}
+            {label || `[ ${addLabel} ]`}
           </Button>
         </Tooltip>
       ) : null}
       {editable && (
         <Button
           variant="text"
-          onClick={(e) => {
-            onChevronDownClick?.(e, chartKey);
-          }}
+          onClick={(e) => onChevronDownClick?.(e, chartKey)}
           className={classes.editIconWrapper}
         >
           <Icon name="chevronDown" />

app/config-types.ts

@@ -112,7 +112,6 @@ export const extractSingleFilters = (filters: Filters): SingleFilters => {
   ) as SingleFilters;
 };
 
-// Meta
 const Title = t.type({
   de: t.string,
   fr: t.string,
@@ -126,7 +125,19 @@ const Description = t.type({
   it: t.string,
   en: t.string,
 });
-const Meta = t.type({ title: Title, description: Description });
+export type Description = t.TypeOf<typeof Description>;
+const Label = t.type({
+  de: t.string,
+  fr: t.string,
+  it: t.string,
+  en: t.string,
+});
+export type Label = t.TypeOf<typeof Label>;
+const Meta = t.type({
+  title: Title,
+  description: Description,
+  label: Label,
+});
 export type Meta = t.TypeOf<typeof Meta>;
 export type MetaKey = keyof Meta;
 

app/configurator/components/add-dataset-dialog.mock.ts

@@ -23,6 +23,12 @@ export const photovoltaikChartStateMock: ConfiguratorStateConfiguringChart = {
         fr: "",
         it: "",
       },
+      label: {
+        de: "",
+        en: "",
+        fr: "",
+        it: "",
+      },
     },
   },
   chartConfigs: [
@@ -43,6 +49,12 @@ export const photovoltaikChartStateMock: ConfiguratorStateConfiguringChart = {
           fr: "",
           it: "",
         },
+        label: {
+          en: "",
+          de: "",
+          fr: "",
+          it: "",
+        },
       },
       cubes: [
         {

app/configurator/components/annotation-options.tsx

@@ -85,7 +85,7 @@ const AnnotationOptions = (props: AnnotationOptionsProps) => {
       tabIndex={-1}
       sx={{ overflowX: "hidden", overflowY: "auto" }}
     >
-      <ControlSection>
+      <ControlSection hideTopBorder>
         <SectionTitle>{getFieldLabel(activeField)}</SectionTitle>
         <ControlSectionContent gap="none">
           {orderedLocales.map((locale) => (

app/configurator/components/configurator.tsx

@@ -34,6 +34,7 @@ import {
   hasChartConfigs,
   initChartStateFromChartEdit,
   isConfiguring,
+  MetaKey,
   saveChartLocally,
   useConfiguratorState,
 } from "@/configurator";
@@ -115,8 +116,8 @@ export const BackButton = ({
 
 export const isAnnotationField = (
   field: string | undefined
-): field is "title" | "description" => {
-  return field === "title" || field === "description";
+): field is MetaKey => {
+  return field === "title" || field === "description" || field === "label";
 };
 
 const useAssureCorrectDataSource = (stateGuard: ConfiguratorState["state"]) => {

app/configurator/components/field-i18n.ts

@@ -28,6 +28,7 @@ const fieldLabels = {
     id: "controls.description",
     message: "Description",
   }),
+  "controls.label": defineMessage({ id: "controls.label", message: "Label" }),
   "controls.column.stacked": defineMessage({
     id: "controls.column.stacked",
     message: "Stacked",
@@ -262,6 +263,8 @@ export function getFieldLabel(field: string): string {
       return i18n._(fieldLabels["controls.title"]);
     case "description":
       return i18n._(fieldLabels["controls.description"]);
+    case "label":
+      return i18n._(fieldLabels["controls.label"]);
 
     // Encoding Options
     case "stacked":

app/configurator/configurator-state/initial.tsx

@@ -32,6 +32,12 @@ export const getInitialConfiguringConfigBasedOnCube = (props: {
           fr: "",
           it: "",
         },
+        label: {
+          de: "",
+          en: "",
+          fr: "",
+          it: "",
+        },
       },
       activeField: undefined,
     },

app/configurator/configurator-state/mocks.ts

@@ -99,6 +99,12 @@ export const configStateMock = {
           fr: "",
           it: "",
         },
+        label: {
+          de: "",
+          en: "",
+          fr: "",
+          it: "",
+        },
       },
     },
     chartConfigs: [
@@ -118,6 +124,12 @@ export const configStateMock = {
             fr: "",
             it: "",
           },
+          label: {
+            en: "",
+            de: "",
+            fr: "",
+            it: "",
+          },
         },
         cubes: [
           {
@@ -1116,6 +1128,7 @@ export const configJoinedCubes: Partial<
     meta: {
       title: { en: "", de: "", fr: "", it: "" },
       description: { en: "", de: "", fr: "", it: "" },
+      label: { en: "", de: "", fr: "", it: "" },
     },
     cubes: [
       {
@@ -1371,6 +1384,7 @@ export const configJoinedCubes: Partial<
     meta: {
       title: { en: "", de: "", fr: "", it: "" },
       description: { en: "", de: "", fr: "", it: "" },
+      label: { en: "", de: "", fr: "", it: "" },
     },
     cubes: [
       {

app/configurator/configurator-state/reducer.spec.tsx

@@ -560,6 +560,12 @@ describe("deriveFiltersFromFields", () => {
             "fr": "",
             "it": "",
           },
+          "label": Object {
+            "de": "",
+            "en": "",
+            "fr": "",
+            "it": "",
+          },
           "title": Object {
             "de": "",
             "en": "",

app/docs/charts.stories.tsx

@@ -63,6 +63,7 @@ const ColumnsStory = {
           meta: {
             title: { en: "", de: "", fr: "", it: "" },
             description: { en: "", de: "", fr: "", it: "" },
+            label: { en: "", de: "", fr: "", it: "" },
           },
           activeField: undefined,
         },
@@ -126,6 +127,7 @@ const ScatterplotStory = {
           meta: {
             title: { en: "", de: "", fr: "", it: "" },
             description: { en: "", de: "", fr: "", it: "" },
+            label: { en: "", de: "", fr: "", it: "" },
           },
           activeField: undefined,
         },

app/docs/columns.mock.ts

@@ -30,6 +30,12 @@ export const chartConfig: ColumnConfig = {
       fr: "",
       it: "",
     },
+    label: {
+      en: "",
+      de: "",
+      fr: "",
+      it: "",
+    },
   },
   cubes: [
     {

app/docs/fixtures.ts

@@ -23,6 +23,7 @@ export const states: ConfiguratorState[] = [
       meta: {
         title: { en: "", de: "", fr: "", it: "" },
         description: { en: "", de: "", fr: "", it: "" },
+        label: { en: "", de: "", fr: "", it: "" },
       },
       activeField: undefined,
     },
@@ -43,6 +44,12 @@ export const states: ConfiguratorState[] = [
             fr: "",
             it: "",
           },
+          label: {
+            en: "",
+            de: "",
+            fr: "",
+            it: "",
+          },
         },
         cubes: [
           {
@@ -893,6 +900,12 @@ export const tableConfig: TableConfig = {
       fr: "",
       it: "",
     },
+    label: {
+      en: "",
+      de: "",
+      fr: "",
+      it: "",
+    },
   },
   cubes: [
     {

app/docs/lines.mock.tsx

@@ -79,6 +79,12 @@ export const chartConfig: LineConfig = {
       fr: "",
       it: "",
     },
+    label: {
+      en: "",
+      de: "",
+      fr: "",
+      it: "",
+    },
   },
   cubes: [
     {

app/docs/lines.stories.tsx

@@ -41,6 +41,7 @@ const LineChartStory = () => (
         meta: {
           title: { en: "", de: "", fr: "", it: "" },
           description: { en: "", de: "", fr: "", it: "" },
+          label: { en: "", de: "", fr: "", it: "" },
         },
         activeField: undefined,
       },

app/docs/scatterplot.mock.ts

@@ -72,6 +72,12 @@ export const chartConfig: ScatterPlotConfig = {
       fr: "",
       it: "",
     },
+    label: {
+      en: "",
+      de: "",
+      fr: "",
+      it: "",
+    },
   },
   cubes: [
     {