mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
1da86b80b2
* fix: dashboard charts * fix: cycles new charts * chore: sidebar burn down chart and calendar graph * chore: update dashboard line and pie graph * chore: update axes width of burndown chart --------- Co-authored-by: Dakshesh Jain <dakshesh.jain14@gmail.com>
35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
// ui
|
|
import { CalendarGraph } from "components/ui";
|
|
// helpers
|
|
import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
|
|
// types
|
|
import { IUserActivity } from "types";
|
|
|
|
type Props = {
|
|
activities: IUserActivity[] | undefined;
|
|
};
|
|
|
|
export const ActivityGraph: React.FC<Props> = ({ activities }) => (
|
|
<CalendarGraph
|
|
data={
|
|
activities?.map((activity) => ({
|
|
day: activity.created_date,
|
|
value: activity.activity_count,
|
|
})) ?? []
|
|
}
|
|
from={activities?.length ? activities[0].created_date : new Date()}
|
|
to={activities?.length ? activities[activities.length - 1].created_date : new Date()}
|
|
height="200px"
|
|
margin={{ bottom: 0, left: 10, right: 10, top: 0 }}
|
|
tooltip={(datum) => (
|
|
<div className="rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
|
|
<span className="text-brand-secondary">{renderShortDateWithYearFormat(datum.day)}:</span>{" "}
|
|
{datum.value}
|
|
</div>
|
|
)}
|
|
theme={{
|
|
background: "rgb(var(--color-bg-base))",
|
|
}}
|
|
/>
|
|
);
|