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
35 lines
956 B
TypeScript
35 lines
956 B
TypeScript
// nivo
|
|
import { BarTooltipProps } from "@nivo/bar";
|
|
// types
|
|
import { IAnalyticsParams } from "types";
|
|
|
|
type Props = {
|
|
datum: BarTooltipProps<any>;
|
|
params: IAnalyticsParams;
|
|
};
|
|
|
|
export const CustomTooltip: React.FC<Props> = ({ datum, params }) => (
|
|
<div className="flex items-center gap-2 rounded-md border border-brand-base bg-brand-base p-2 text-xs">
|
|
<span
|
|
className="h-3 w-3 rounded"
|
|
style={{
|
|
backgroundColor: datum.color,
|
|
}}
|
|
/>
|
|
<span
|
|
className={`font-medium text-brand-secondary ${
|
|
params.segment
|
|
? params.segment === "priority" || params.segment === "state__group"
|
|
? "capitalize"
|
|
: ""
|
|
: params.x_axis === "priority" || params.x_axis === "state__group"
|
|
? "capitalize"
|
|
: ""
|
|
}`}
|
|
>
|
|
{params.segment ? datum.id : datum.id === "count" ? "Issue count" : "Effort"}:
|
|
</span>
|
|
<span>{datum.value}</span>
|
|
</div>
|
|
);
|