78 lines
1.5 KiB
TypeScript
78 lines
1.5 KiB
TypeScript
'use client'
|
|
|
|
import React, { useMemo } from 'react'
|
|
import { AgChartsReact } 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 <AgChartsReact options={chartOptions} />
|
|
} |