forked from github/plane
37bb183bf0
* chore: global bar graph component * chore: global pie graph component * chore: global line graph component * chore: removed unnecessary file * chore: refactored global chart components to accept all props * chore: function to convert response to chart data * chore: global calendar graph component added * chore: global scatter plot graph component * feat: analytics boilerplate created * chore: null value for segment and project * chore: clean up file * chore: change project query param key * chore: export, refresh buttons, analytics table * fix: analytics fetch key error * chore: show only integer values in the y-axis * chore: custom x-axis tick values and bar colors * refactor: divide analytics page into granular components * chore: convert analytics page to modal, save analytics modal * fix: build error * fix: modal overflow issues, analytics loading screen * chore: custom tooltip, refactor: graphs folder structure * refactor: folder structure, chore: x-axis tick values for larger data * chore: code cleanup * chore: remove unnecessary files * fix: refresh analytics button on error * feat: scope and demand analytics * refactor: scope and demand and custom analytics folder structure * fix: dynamic import type * chore: minor updates * feat: project, cycle and module level analytics * style: project analytics modal * fix: merge conflicts * style: new scope and demand ui, user avatars in bar graph * fix: default analytics types * chore: new values when dimensioned by date * chore: update table and tooltip content when dimensioned or segmented by dates
78 lines
2.0 KiB
TypeScript
78 lines
2.0 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";
|
|
// constants
|
|
|
|
type Props = {
|
|
analytics: IAnalyticsResponse;
|
|
barGraphData: {
|
|
data: BarDatum[];
|
|
xAxisKeys: string[];
|
|
};
|
|
params: IAnalyticsParams;
|
|
yAxisKey: "effort" | "count";
|
|
fullScreen: boolean;
|
|
};
|
|
|
|
export const AnalyticsGraph: React.FC<Props> = ({
|
|
analytics,
|
|
barGraphData,
|
|
params,
|
|
yAxisKey,
|
|
fullScreen,
|
|
}) => {
|
|
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} params={params} />}
|
|
height={fullScreen ? "400px" : "300px"}
|
|
margin={{ right: 20, bottom: longestXAxisLabel.length * 5 + 20 }}
|
|
theme={{
|
|
axis: {},
|
|
}}
|
|
/>
|
|
);
|
|
};
|