forked from github/plane
1a534a3c19
* 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
147 lines
3.1 KiB
TypeScript
147 lines
3.1 KiB
TypeScript
// nivo
|
|
import { BarDatum, ComputedDatum } from "@nivo/bar";
|
|
// types
|
|
import {
|
|
IAnalyticsData,
|
|
IAnalyticsParams,
|
|
IAnalyticsResponse,
|
|
TXAxisValues,
|
|
TYAxisValues,
|
|
} from "types";
|
|
import { STATE_GROUP_COLORS } from "./state";
|
|
|
|
export const ANALYTICS_X_AXIS_VALUES: { value: TXAxisValues; label: string }[] = [
|
|
{
|
|
value: "state__name",
|
|
label: "State Name",
|
|
},
|
|
{
|
|
value: "state__group",
|
|
label: "State Group",
|
|
},
|
|
{
|
|
value: "priority",
|
|
label: "Priority",
|
|
},
|
|
{
|
|
value: "labels__name",
|
|
label: "Label",
|
|
},
|
|
{
|
|
value: "assignees__email",
|
|
label: "Assignee",
|
|
},
|
|
{
|
|
value: "estimate_point",
|
|
label: "Estimate",
|
|
},
|
|
{
|
|
value: "issue_cycle__cycle__name",
|
|
label: "Cycle",
|
|
},
|
|
{
|
|
value: "issue_module__module__name",
|
|
label: "Module",
|
|
},
|
|
{
|
|
value: "completed_at",
|
|
label: "Completed date",
|
|
},
|
|
{
|
|
value: "target_date",
|
|
label: "Due date",
|
|
},
|
|
{
|
|
value: "start_date",
|
|
label: "Start Date",
|
|
},
|
|
{
|
|
value: "created_at",
|
|
label: "Created date",
|
|
},
|
|
];
|
|
|
|
export const ANALYTICS_Y_AXIS_VALUES: { value: TYAxisValues; label: string }[] = [
|
|
{
|
|
value: "issue_count",
|
|
label: "Issue Count",
|
|
},
|
|
{
|
|
value: "effort",
|
|
label: "Effort",
|
|
},
|
|
];
|
|
|
|
export const convertResponseToBarGraphData = (
|
|
response: IAnalyticsData | undefined,
|
|
segmented: boolean,
|
|
yAxis: TYAxisValues
|
|
): { data: BarDatum[]; xAxisKeys: string[] } => {
|
|
if (!response || !(typeof response === "object") || Object.keys(response).length === 0)
|
|
return { data: [], xAxisKeys: [] };
|
|
|
|
const data: BarDatum[] = [];
|
|
|
|
let xAxisKeys: string[] = [];
|
|
const yAxisKey = yAxis === "issue_count" ? "count" : "effort";
|
|
|
|
Object.keys(response).forEach((key) => {
|
|
const segments: { [key: string]: number } = {};
|
|
|
|
if (segmented) {
|
|
response[key].map((item: any) => {
|
|
segments[item.segment ?? "None"] = item[yAxisKey] ?? 0;
|
|
|
|
// store the segment in the xAxisKeys array
|
|
if (!xAxisKeys.includes(item.segment ?? "None")) xAxisKeys.push(item.segment ?? "None");
|
|
});
|
|
|
|
data.push({
|
|
name: key,
|
|
...segments,
|
|
});
|
|
} else {
|
|
xAxisKeys = [yAxisKey];
|
|
|
|
const item = response[key][0];
|
|
|
|
data.push({
|
|
name: item.dimension ?? "None",
|
|
[yAxisKey]: item[yAxisKey] ?? 0,
|
|
});
|
|
}
|
|
});
|
|
|
|
return { data, xAxisKeys };
|
|
};
|
|
|
|
export const generateBarColor = (
|
|
value: string,
|
|
analytics: IAnalyticsResponse,
|
|
params: IAnalyticsParams,
|
|
type: "x_axis" | "segment"
|
|
): string => {
|
|
let color: string | undefined = "rgb(var(--color-accent))";
|
|
|
|
if (!analytics) return color;
|
|
|
|
if (params[type] === "state__name" || params[type] === "labels__name")
|
|
color = analytics?.extras?.colors.find((c) => c.name === value)?.color;
|
|
|
|
if (params[type] === "state__group") color = STATE_GROUP_COLORS[value];
|
|
|
|
if (params[type] === "priority")
|
|
color =
|
|
value === "urgent"
|
|
? "#ef4444"
|
|
: value === "high"
|
|
? "#f97316"
|
|
: value === "medium"
|
|
? "#eab308"
|
|
: value === "low"
|
|
? "#22c55e"
|
|
: "#ced4da";
|
|
|
|
return color ?? "rgb(var(--color-accent))";
|
|
};
|