thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

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

Browse Source 
* style: custom analytics bar graph label overlapping

fix: Bar graph avatar image rendering & tooltip

* fix: import
This commit is contained in:
Lakhan Baheti 2023-11-03 19:18:24 +05:30 committed by GitHub
parent 0d2c399555
commit c233e6e3b6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 37 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
web/components/analytics/custom-analytics/graph/index.tsx
View File

@ -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>