plane/apps/app/components/workspace/activity-graph.tsx

35 lines
1.0 KiB
TypeScript
Raw Normal View History

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