85 lines
1.6 KiB
TypeScript
85 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import React, { useMemo } from "react";
|
|
import { AgCharts } from "ag-charts-react";
|
|
import { AgChartOptions } from "ag-charts-community";
|
|
|
|
interface ChartData {
|
|
label: string;
|
|
value: number;
|
|
color?: string;
|
|
}
|
|
|
|
interface UserGrowthChartProps {
|
|
data: ChartData[];
|
|
title?: string;
|
|
}
|
|
|
|
export function UserGrowthChart({
|
|
data,
|
|
title = "User Growth",
|
|
}: UserGrowthChartProps) {
|
|
const chartOptions: AgChartOptions = useMemo(
|
|
() => ({
|
|
title: {
|
|
text: title,
|
|
fontSize: 18,
|
|
fontWeight: "bold",
|
|
},
|
|
data,
|
|
series: [
|
|
{
|
|
type: "line",
|
|
xKey: "label",
|
|
yKey: "value",
|
|
stroke: "#3b82f6",
|
|
strokeWidth: 3,
|
|
marker: {
|
|
size: 6,
|
|
fill: "#3b82f6",
|
|
stroke: "#ffffff",
|
|
strokeWidth: 2,
|
|
},
|
|
highlightStyle: {
|
|
item: {
|
|
fill: "#1d4ed8",
|
|
stroke: "#ffffff",
|
|
strokeWidth: 2,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
axes: [
|
|
{
|
|
type: "category",
|
|
position: "bottom",
|
|
title: {
|
|
text: "Time Period",
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
{
|
|
type: "number",
|
|
position: "left",
|
|
title: {
|
|
text: "Number of Users",
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
],
|
|
legend: {
|
|
enabled: false,
|
|
},
|
|
padding: {
|
|
top: 20,
|
|
right: 20,
|
|
bottom: 20,
|
|
left: 20,
|
|
},
|
|
}),
|
|
[data, title],
|
|
);
|
|
|
|
return <AgCharts options={chartOptions} />;
|
|
}
|