feat: Add tooltips for description in chart tables

visualize-admin · Sep 16, 2022 · f287d08 · f287d08
1 parent db83180
commit f287d08
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 9 deletions.
diff --git a/app/charts/table/table-content.tsx b/app/charts/table/table-content.tsx
@@ -1,7 +1,7 @@
-import { Box, TableSortLabel, Theme } from "@mui/material";
+import { Box, TableSortLabel, Theme, Tooltip } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import clsx from "clsx";
-import * as React from "react";
+import React, { useMemo, useContext } from "react";
 import { HeaderGroup } from "react-table";
 
 import Flex from "../../components/flex";
@@ -28,7 +28,7 @@ export const TableContentProvider = ({
   totalColumnsWidth,
   children,
 }: TableContentProps & { children: React.ReactNode }) => {
-  const value = React.useMemo(() => {
+  const value = useMemo(() => {
     return {
       headerGroups,
       tableColumnsMeta,
@@ -66,7 +66,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 }));
 
 export const TableContent = ({ children }: { children: React.ReactNode }) => {
-  const ctx = React.useContext(TableContentContext);
+  const ctx = useContext(TableContentContext);
   const classes = useStyles();
 
   if (!ctx) {
@@ -85,8 +85,8 @@ export const TableContent = ({ children }: { children: React.ReactNode }) => {
             // eslint-disable-next-line react/jsx-key
             <Box {...headerGroup.getHeaderGroupProps()}>
               {headerGroup.headers.map((column) => {
-                const { columnComponentType } = tableColumnsMeta[column.id];
-
+                const { columnComponentType, iri, description } =
+                  tableColumnsMeta[column.id];
                 // We assume that the customSortCount items are at the beginning of the sorted array, so any item with a lower index must be a custom sorted one
                 const isCustomSorted = column.sortedIndex < customSortCount;
 
@@ -105,7 +105,15 @@ export const TableContent = ({ children }: { children: React.ReactNode }) => {
                       active={isCustomSorted}
                       direction={column.isSortedDesc ? "desc" : "asc"}
                     >
-                      {column.render("Header")}
+                      {description ? (
+                        <Tooltip arrow title={description}>
+                          <span style={{ textDecoration: "underline" }}>
+                            {column.render("Header")}
+                          </span>
+                        </Tooltip>
+                      ) : (
+                        column.render("Header")
+                      )}
                     </TableSortLabel>
                   </Flex>
                 );

diff --git a/app/charts/table/table-state.tsx b/app/charts/table/table-state.tsx
@@ -43,6 +43,7 @@ import { estimateTextWidth } from "@/utils/estimate-text-width";
 export type MKColumnMeta<T> = {
   iri: string;
   slugifiedIri: string;
+  description?: string;
   columnComponentType: ComponentType;
   formatter: (cell: Cell<Observation, any>) => string;
   textStyle?: string;
@@ -256,6 +257,9 @@ const useTableState = ({
    * It is not used by react-table, only for custom styling.
    */
   const tableColumnsMeta = useMemo<TableChartState["tableColumnsMeta"]>(() => {
+    const allColumnsByIri = Object.fromEntries(
+      [...dimensions, ...measures].map((x) => [x.iri, x])
+    );
     return mapKeys(
       mapValues(fields, (columnMeta, iri) => {
         const slugifiedIri = getSlugifiedIri(iri);
@@ -264,11 +268,11 @@ const useTableState = ({
         const columnComponentType = columnMeta.componentType;
         const formatter = formatters[iri];
         const cellFormatter = (x: Cell<Observation>) => formatter(x.value);
-
         const common = {
           iri,
           slugifiedIri,
           columnComponentType,
+          description: allColumnsByIri[iri]?.description || undefined,
           formatter: cellFormatter,
           ...columnStyle,
         };
@@ -357,7 +361,14 @@ const useTableState = ({
       }),
       (v) => v.slugifiedIri
     );
-  }, [data, dimensions, fields, formatters, theme.palette.primary.main]);
+  }, [
+    data,
+    dimensions,
+    fields,
+    formatters,
+    measures,
+    theme.palette.primary.main,
+  ]);
 
   return {
     chartType: "table",