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 // components
import { CustomTooltip } from "./custom-tooltip"; import { CustomTooltip } from "./custom-tooltip";
// ui // ui
import { BarGraph } from "components/ui"; import { BarGraph, Tooltip } from "components/ui";
// helpers // helpers
import { findStringWithMostCharacters } from "helpers/array.helper"; import { findStringWithMostCharacters } from "helpers/array.helper";
import { generateBarColor, generateDisplayName } from "helpers/analytics.helper"; import { generateBarColor, generateDisplayName } from "helpers/analytics.helper";
@ -72,42 +72,50 @@ export const AnalyticsGraph: React.FC<Props> = ({ analytics, barGraphData, param
renderTick: renderTick:
params.x_axis === "assignees__id" params.x_axis === "assignees__id"
? (datum) => { ? (datum) => {
const avatar = analytics.extras.assignee_details?.find( const assignee = analytics.extras.assignee_details?.find((a) => a?.assignees__id === datum?.value);
(a) => a?.assignees__display_name === datum?.value
)?.assignees__avatar;
if (avatar && avatar !== "") if (assignee?.assignees__avatar && assignee?.assignees__avatar !== "")
return ( return (
<g transform={`translate(${datum.x},${datum.y})`}> <Tooltip tooltipContent={assignee?.assignees__display_name}>
<image <g transform={`translate(${datum.x},${datum.y})`}>
x={-8} <image
y={10} x={-8}
width={16} y={10}
height={16} width={16}
xlinkHref={avatar} height={16}
style={{ clipPath: "circle(50%)" }} xlinkHref={assignee?.assignees__avatar}
/> style={{ clipPath: "circle(50%)" }}
</g> />
</g>
</Tooltip>
); );
else else
return ( return (
<g transform={`translate(${datum.x},${datum.y})`}> <Tooltip tooltipContent={assignee?.assignees__display_name}>
<circle cy={18} r={8} fill="#374151" /> <g transform={`translate(${datum.x},${datum.y})`}>
<text x={0} y={21} textAnchor="middle" fontSize={9} fill="#ffffff"> <circle cy={18} r={8} fill="#374151" />
{params.x_axis === "assignees__id" <text x={0} y={21} textAnchor="middle" fontSize={9} fill="#ffffff">
? datum.value && datum.value !== "None" {params.x_axis === "assignees__id"
? generateDisplayName(datum.value, analytics, params, "x_axis")[0].toUpperCase() ? datum.value && datum.value !== "None"
: "?" ? generateDisplayName(datum.value, analytics, params, "x_axis")[0].toUpperCase()
: datum.value && datum.value !== "None" : "?"
? `${datum.value}`.toUpperCase()[0] : datum.value && datum.value !== "None"
: "?"} ? `${datum.value}`.toUpperCase()[0]
</text> : "?"}
</g> </text>
</g>
</Tooltip>
); );
} }
: (datum) => ( : (datum) => (
<g transform={`translate(${datum.x},${datum.y})`}> <g transform={`translate(${datum.x},${datum.y + 10})`}>
<text x={0} y={21} textAnchor="middle" fontSize={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")} {generateDisplayName(datum.value, analytics, params, "x_axis")}
</text> </text>
</g> </g>