plane/apps/app/constants/analytics.ts
Aaryan Khandelwal 1a534a3c19
feat: plane analytics (#1029)
* 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
2023-05-11 17:38:46 +05:30

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))";
};