mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
daa3094911
* chore: dynamic position dropdown (#2138) * chore: dynamic position state dropdown for issue view * style: state select dropdown styling * fix: state icon attribute names * chore: state select dynamic dropdown * chore: member select dynamic dropdown * chore: label select dynamic dropdown * chore: priority select dynamic dropdown * chore: label select dropdown improvement * refactor: state dropdown location * chore: dropdown improvement and code refactor * chore: dynamic dropdown hook type added --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com> * fix: fields not getting selected in the create issue form (#2212) * fix: hydration error and draft issue workflow * fix: build error * fix: properties getting de-selected after create, module & cycle not getting auto-select on the form * fix: display layout, props being updated directly * chore: sub issues count in individual issue (#2221) * Implemented nested issues in the sub issues section in issue detail page (#2233) * feat: subissues infinte level * feat: updated UI for sub issues * feat: subissues new ui and nested sub issues in issue detail * chore: removed repeated code * refactor: product updates modal layout (#2225) * fix: handle no issues in custom analytics (#2226) * fix: activity label color (#2227) * fix: profile issues layout switch (#2228) * chore: update service imports * chore: update issue detail store to handle peek overview --------- Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Co-authored-by: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com> Co-authored-by: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com> Co-authored-by: guru_sainath <gurusainath007@gmail.com>
130 lines
3.9 KiB
TypeScript
130 lines
3.9 KiB
TypeScript
// nivo
|
|
import { BarDatum } from "@nivo/bar";
|
|
// components
|
|
import { CustomTooltip } from "./custom-tooltip";
|
|
// ui
|
|
import { BarGraph } from "components/ui";
|
|
// helpers
|
|
import { findStringWithMostCharacters } from "helpers/array.helper";
|
|
import { generateBarColor } from "helpers/analytics.helper";
|
|
// types
|
|
import { IAnalyticsParams, IAnalyticsResponse } from "types";
|
|
|
|
type Props = {
|
|
analytics: IAnalyticsResponse;
|
|
barGraphData: {
|
|
data: BarDatum[];
|
|
xAxisKeys: string[];
|
|
};
|
|
params: IAnalyticsParams;
|
|
yAxisKey: "count" | "estimate";
|
|
fullScreen: boolean;
|
|
};
|
|
|
|
export const AnalyticsGraph: React.FC<Props> = ({
|
|
analytics,
|
|
barGraphData,
|
|
params,
|
|
yAxisKey,
|
|
fullScreen,
|
|
}) => {
|
|
const renderAssigneeName = (assigneeId: string): string => {
|
|
const assignee = analytics.extras.assignee_details.find((a) => a.assignees__id === assigneeId);
|
|
|
|
if (!assignee) return "?";
|
|
|
|
return assignee.assignees__display_name || "?";
|
|
};
|
|
|
|
const generateYAxisTickValues = () => {
|
|
if (!analytics) return [];
|
|
|
|
let data: number[] = [];
|
|
|
|
if (params.segment)
|
|
// find the total no of issues in each segment
|
|
data = Object.keys(analytics.distribution).map((segment) => {
|
|
let totalSegmentIssues = 0;
|
|
|
|
analytics.distribution[segment].map((s) => {
|
|
totalSegmentIssues += s[yAxisKey] as number;
|
|
});
|
|
|
|
return totalSegmentIssues;
|
|
});
|
|
else data = barGraphData.data.map((d) => d[yAxisKey] as number);
|
|
|
|
return data;
|
|
};
|
|
|
|
const longestXAxisLabel = findStringWithMostCharacters(barGraphData.data.map((d) => `${d.name}`));
|
|
|
|
return (
|
|
<BarGraph
|
|
data={barGraphData.data}
|
|
indexBy="name"
|
|
keys={barGraphData.xAxisKeys}
|
|
colors={(datum) =>
|
|
generateBarColor(
|
|
params.segment ? `${datum.id}` : `${datum.indexValue}`,
|
|
analytics,
|
|
params,
|
|
params.segment ? "segment" : "x_axis"
|
|
)
|
|
}
|
|
customYAxisTickValues={generateYAxisTickValues()}
|
|
tooltip={(datum) => <CustomTooltip datum={datum} analytics={analytics} params={params} />}
|
|
height={fullScreen ? "400px" : "300px"}
|
|
margin={{
|
|
right: 20,
|
|
bottom: params.x_axis === "assignees__id" ? 50 : longestXAxisLabel.length * 5 + 20,
|
|
}}
|
|
axisBottom={{
|
|
tickSize: 0,
|
|
tickPadding: 10,
|
|
tickRotation: barGraphData.data.length > 7 ? -45 : 0,
|
|
renderTick:
|
|
params.x_axis === "assignees__id"
|
|
? (datum) => {
|
|
const avatar = analytics.extras.assignee_details?.find(
|
|
(a) => a?.assignees__display_name === datum?.value
|
|
)?.assignees__avatar;
|
|
|
|
if (avatar && 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>
|
|
);
|
|
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"
|
|
? renderAssigneeName(datum.value)[0].toUpperCase()
|
|
: "?"
|
|
: datum.value && datum.value !== "None"
|
|
? `${datum.value}`.toUpperCase()[0]
|
|
: "?"}
|
|
</text>
|
|
</g>
|
|
);
|
|
}
|
|
: undefined,
|
|
}}
|
|
theme={{
|
|
axis: {},
|
|
}}
|
|
/>
|
|
);
|
|
};
|