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

24
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,25 +72,26 @@ 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 (
<Tooltip tooltipContent={assignee?.assignees__display_name}>
<g transform={`translate(${datum.x},${datum.y})`}> <g transform={`translate(${datum.x},${datum.y})`}>
<image <image
x={-8} x={-8}
y={10} y={10}
width={16} width={16}
height={16} height={16}
xlinkHref={avatar} xlinkHref={assignee?.assignees__avatar}
style={{ clipPath: "circle(50%)" }} style={{ clipPath: "circle(50%)" }}
/> />
</g> </g>
</Tooltip>
); );
else else
return ( return (
<Tooltip tooltipContent={assignee?.assignees__display_name}>
<g transform={`translate(${datum.x},${datum.y})`}> <g transform={`translate(${datum.x},${datum.y})`}>
<circle cy={18} r={8} fill="#374151" /> <circle cy={18} r={8} fill="#374151" />
<text x={0} y={21} textAnchor="middle" fontSize={9} fill="#ffffff"> <text x={0} y={21} textAnchor="middle" fontSize={9} fill="#ffffff">
@ -103,11 +104,18 @@ export const AnalyticsGraph: React.FC<Props> = ({ analytics, barGraphData, param
: "?"} : "?"}
</text> </text>
</g> </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>