style: custom analytics bar graph label overlapping (#2636)

* style: custom analytics bar graph label overlapping fix: Bar graph avatar image rendering & tooltip * fix: import
makeplane · Nov 3, 2023 · c233e6e · c233e6e
1 parent 0d2c399
commit c233e6e
Showing 1 changed file with 37 additions and 29 deletions.
diff --git a/web/components/analytics/custom-analytics/graph/index.tsx b/web/components/analytics/custom-analytics/graph/index.tsx
@@ -3,7 +3,7 @@ import { BarDatum } from "@nivo/bar";
 // components
 import { CustomTooltip } from "./custom-tooltip";
 // ui
-import { BarGraph } from "components/ui";
+import { BarGraph, Tooltip } from "components/ui";
 // helpers
 import { findStringWithMostCharacters } from "helpers/array.helper";
 import { generateBarColor, generateDisplayName } from "helpers/analytics.helper";
@@ -72,42 +72,50 @@ export const AnalyticsGraph: React.FC<Props> = ({ analytics, barGraphData, param
         renderTick:
           params.x_axis === "assignees__id"
             ? (datum) => {
-                const avatar = analytics.extras.assignee_details?.find(
-                  (a) => a?.assignees__display_name === datum?.value
-                )?.assignees__avatar;
+                const assignee = analytics.extras.assignee_details?.find((a) => a?.assignees__id === datum?.value);
 
-                if (avatar && avatar !== "")
+                if (assignee?.assignees__avatar && assignee?.assignees__avatar !== "")
                   return (
-                    <g transform={`translate(${datum.x},${datum.y})`}>
-                      <image
-                        x={-8}
-                        y={10}
-                        width={16}
-                        height={16}
-                        xlinkHref={avatar}
-                        style={{ clipPath: "circle(50%)" }}
-                      />
-                    </g>
+                    <Tooltip tooltipContent={assignee?.assignees__display_name}>
+                      <g transform={`translate(${datum.x},${datum.y})`}>
+                        <image
+                          x={-8}
+                          y={10}
+                          width={16}
+                          height={16}
+                          xlinkHref={assignee?.assignees__avatar}
+                          style={{ clipPath: "circle(50%)" }}
+                        />
+                      </g>
+                    </Tooltip>
                   );
                 else
                   return (
-                    <g transform={`translate(${datum.x},${datum.y})`}>
-                      <circle cy={18} r={8} fill="#374151" />
-                      <text x={0} y={21} textAnchor="middle" fontSize={9} fill="#ffffff">
-                        {params.x_axis === "assignees__id"
-                          ? datum.value && datum.value !== "None"
-                            ? generateDisplayName(datum.value, analytics, params, "x_axis")[0].toUpperCase()
-                            : "?"
-                          : datum.value && datum.value !== "None"
-                          ? `${datum.value}`.toUpperCase()[0]
-                          : "?"}
-                      </text>
-                    </g>
+                    <Tooltip tooltipContent={assignee?.assignees__display_name}>
+                      <g transform={`translate(${datum.x},${datum.y})`}>
+                        <circle cy={18} r={8} fill="#374151" />
+                        <text x={0} y={21} textAnchor="middle" fontSize={9} fill="#ffffff">
+                          {params.x_axis === "assignees__id"
+                            ? datum.value && datum.value !== "None"
+                              ? generateDisplayName(datum.value, analytics, params, "x_axis")[0].toUpperCase()
+                              : "?"
+                            : datum.value && datum.value !== "None"
+                            ? `${datum.value}`.toUpperCase()[0]
+                            : "?"}
+                        </text>
+                      </g>
+                    </Tooltip>
                   );
               }
             : (datum) => (
-                <g transform={`translate(${datum.x},${datum.y})`}>
-                  <text x={0} y={21} textAnchor="middle" fontSize={10}>
+                <g transform={`translate(${datum.x},${datum.y + 10})`}>
+                  <text
+                    x={0}
+                    y={datum.y}
+                    textAnchor="end"
+                    fontSize={10}
+                    className={`${barGraphData.data.length > 7 ? "-rotate-45" : ""}`}
+                  >
                     {generateDisplayName(datum.value, analytics, params, "x_axis")}
                   </text>
                 </g>