Merge pull request #716 from visualize-admin/fix/tooltip-description

visualize-admin · Sep 16, 2022 · be6bf24 · be6bf24 · vercel · Sep 16, 2022
2 parents a24cb55 + e8d53c5
commit be6bf24
Show file tree

Hide file tree

Showing 22 changed files with 281 additions and 155 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -2,6 +2,10 @@
   "extends": "next",
   "plugins": ["unused-imports", "import", "visualize-admin"],
   "rules": {
+    "no-restricted-imports": ["error", {
+      "name": "lodash",
+      "message": "Please use direct imports instead, ex: lodash/mapValues, lodash/groupBy."
+    }],
     "react/display-name": "off", 
     "visualize-admin/no-large-sx": "error",
     "visualize-admin/make-styles": "error",

diff --git a/app/charts/table/cell-desktop.tsx b/app/charts/table/cell-desktop.tsx
@@ -1,7 +1,7 @@
 import { Box, Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { hcl, ScaleLinear } from "d3";
-import * as React from "react";
+import React from "react";
 import { Cell } from "react-table";
 
 import { BAR_CELL_PADDING } from "@/charts/table/constants";
@@ -50,20 +50,18 @@ export const CellDesktop = ({
 }) => {
   const {
     columnComponentType,
-    type,
+
     textStyle,
     textColor,
     columnColor,
-    colorScale,
     barColorPositive,
     barColorNegative,
     barColorBackground,
     barShowBackground,
-    widthScale,
   } = columnMeta;
   const classes = useStyles();
 
-  switch (type) {
+  switch (columnMeta.type) {
     case "text":
       return (
         <Flex
@@ -82,32 +80,30 @@ export const CellDesktop = ({
         </Flex>
       );
     case "category":
+      const { colorScale: cColorScale } = columnMeta;
       return (
         <Flex
           sx={{ alignItems: "center", fontWeight: textStyle, pl: 1, pr: 3 }}
           {...cell.getCellProps()}
         >
-          <Tag tagColor={colorScale ? colorScale(cell.value) : "primaryLight"}>
+          <Tag tagColor={cColorScale(cell.value)}>
             {columnMeta.formatter(cell)}
           </Tag>
         </Flex>
       );
     case "heatmap":
+      const { colorScale: hColorScale } = columnMeta;
       const isNull = cell.value === null;
       return (
         <Flex
           className={classes.heatmapCell}
           sx={{
             color: isNull
               ? textColor
-              : hcl(colorScale ? colorScale(cell.value) : textColor).l < 55
+              : hcl(hColorScale(cell.value)).l < 55
               ? "#fff"
               : "#000",
-            backgroundColor: isNull
-              ? "grey.100"
-              : colorScale
-              ? colorScale(cell.value)
-              : "grey.100",
+            backgroundColor: isNull ? "grey.100" : hColorScale(cell.value),
             fontWeight: textStyle,
           }}
           {...cell.getCellProps()}
@@ -116,6 +112,7 @@ export const CellDesktop = ({
         </Flex>
       );
     case "bar":
+      const { widthScale } = columnMeta;
       return (
         <Flex
           sx={{
@@ -169,9 +166,9 @@ export const CellDesktop = ({
           sx={{
             justifyContent:
               columnComponentType === "Measure" ? "flex-end" : "flex-start",
+            textAlign: columnComponentType === "Measure" ? "right" : "left",
             color: textColor,
             backgroundColor: columnColor,
-            textAlign: columnComponentType === "Measure" ? "right" : "left",
             fontWeight: textStyle,
           }}
           {...cell.getCellProps()}

diff --git a/app/charts/table/cell-mobile.tsx b/app/charts/table/cell-mobile.tsx
@@ -108,19 +108,16 @@ export const DDContent = ({
 
   const {
     columnComponentType,
-    type,
-    textStyle,
     textColor,
-    colorScale,
     barShowBackground,
     barColorBackground,
     barColorNegative,
     barColorPositive,
-    widthScale,
   } = columnMeta;
 
-  switch (type) {
+  switch (columnMeta.type) {
     case "text":
+      const { textStyle } = columnMeta;
       return (
         <Box
           component="div"
@@ -136,29 +133,24 @@ export const DDContent = ({
         </Box>
       );
     case "category":
+      const { colorScale: cColorScale } = columnMeta;
       return (
-        <Tag
-          tagColor={colorScale ? colorScale(cell.value) : "primaryLight"}
-          small
-        >
+        <Tag tagColor={cColorScale(cell.value)} small>
           {cell.render("Cell")}
         </Tag>
       );
     case "heatmap":
       const isNull = cell.value === null;
+      const hColorScale = columnMeta.colorScale;
       return (
         <Box
           sx={{
             color: isNull
               ? textColor
-              : hcl(colorScale ? colorScale(cell.value) : textColor).l < 55
+              : hcl(hColorScale(cell.value)).l < 55
               ? "#fff"
               : "#000",
-            backgroundColor: isNull
-              ? "grey.100"
-              : colorScale
-              ? colorScale(cell.value)
-              : "grey.100",
+            backgroundColor: isNull ? "grey.100" : hColorScale(cell.value),
             fontWeight: textStyle,
             px: 1,
             width: "fit-content",
@@ -169,6 +161,7 @@ export const DDContent = ({
         </Box>
       );
     case "bar":
+      const { widthScale } = columnMeta;
       // Reset widthscale range based on current viewport
       widthScale?.range([0, chartWidth / 2]);
 

diff --git a/app/charts/table/group-header.tsx b/app/charts/table/group-header.tsx
@@ -24,8 +24,8 @@ export const GroupHeader = ({
     <>
       {/* Here we use `allCells` so that group headers are shown even if the column is hidden */}
       {row.allCells.map((cell, i) => {
-        const { type, colorScale, formatter } =
-          tableColumnsMeta[cell.column.id];
+        const colMeta = tableColumnsMeta[cell.column.id];
+        const { formatter } = colMeta;
         const bg = getGroupLevelBackgroundColor(groupingLevels - depth);
         return (
           <React.Fragment key={i}>
@@ -47,12 +47,8 @@ export const GroupHeader = ({
                     name={row.isExpanded ? "chevronDown" : "chevronRight"}
                   />
                 </Box>
-                {type === "category" ? (
-                  <Tag
-                    tagColor={
-                      colorScale ? colorScale(cell.value) : "primaryLight"
-                    }
-                  >
+                {colMeta.type === "category" ? (
+                  <Tag tagColor={colMeta.colorScale(cell.value)}>
                     {formatter(cell)}
                   </Tag>
                 ) : (

diff --git a/app/charts/table/table-content.tsx b/app/charts/table/table-content.tsx
@@ -1,6 +1,7 @@
-import { Box, TableSortLabel, Theme } from "@mui/material";
+import { Box, TableSortLabel, Theme, Tooltip } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-import * as React from "react";
+import clsx from "clsx";
+import React, { useMemo, useContext } from "react";
 import { HeaderGroup } from "react-table";
 
 import Flex from "../../components/flex";
@@ -27,7 +28,7 @@ export const TableContentProvider = ({
   totalColumnsWidth,
   children,
 }: TableContentProps & { children: React.ReactNode }) => {
-  const value = React.useMemo(() => {
+  const value = useMemo(() => {
     return {
       headerGroups,
       tableColumnsMeta,
@@ -55,11 +56,17 @@ const useStyles = makeStyles((theme: Theme) => ({
     fontSize: "0.875rem",
     backgroundColor: theme.palette.grey[100],
     color: theme.palette.grey[700],
+    minHeight: SORTING_ARROW_WIDTH,
+    alignItems: "center",
+    justifyContent: "flex-start",
+  },
+  headerGroupMeasure: {
+    justifyContent: "flex-end",
   },
 }));
 
 export const TableContent = ({ children }: { children: React.ReactNode }) => {
-  const ctx = React.useContext(TableContentContext);
+  const ctx = useContext(TableContentContext);
   const classes = useStyles();
 
   if (!ctx) {
@@ -78,35 +85,37 @@ 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, 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;
 
                 return (
                   // eslint-disable-next-line react/jsx-key
-                  <Box
-                    className={classes.headerGroup}
+                  <Flex
+                    className={clsx(
+                      classes.headerGroup,
+                      columnComponentType === "Measure"
+                        ? classes.headerGroupMeasure
+                        : undefined
+                    )}
                     {...column.getHeaderProps(column.getSortByToggleProps())}
                   >
-                    <Flex
-                      sx={{
-                        minHeight: SORTING_ARROW_WIDTH,
-                        alignItems: "center",
-                        justifyContent:
-                          columnComponentType === "Measure"
-                            ? "flex-end"
-                            : "flex-start",
-                      }}
+                    <TableSortLabel
+                      active={isCustomSorted}
+                      direction={column.isSortedDesc ? "desc" : "asc"}
                     >
-                      <TableSortLabel
-                        active={isCustomSorted}
-                        direction={column.isSortedDesc ? "desc" : "asc"}
-                      >
-                        <Box>{column.render("Header")}</Box>
-                      </TableSortLabel>
-                    </Flex>
-                  </Box>
+                      {description ? (
+                        <Tooltip arrow title={description}>
+                          <span style={{ textDecoration: "underline" }}>
+                            {column.render("Header")}
+                          </span>
+                        </Tooltip>
+                      ) : (
+                        column.render("Header")
+                      )}
+                    </TableSortLabel>
+                  </Flex>
                 );
               })}
             </Box>