133 lines
2.0 KiB
TypeScript
133 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { AgCharts } from "ag-charts-react";
|
|
import {
|
|
AgBarSeriesOptions,
|
|
AgChartOptions,
|
|
AgLineSeriesOptions,
|
|
AgPieSeriesOptions,
|
|
} from "ag-charts-community";
|
|
|
|
export function BarChart({
|
|
data,
|
|
xKey,
|
|
yKey,
|
|
color = "#3c82e6",
|
|
height = 300,
|
|
}: {
|
|
data: any[];
|
|
xKey: string;
|
|
yKey: string;
|
|
color?: string;
|
|
height?: number;
|
|
}) {
|
|
const options: AgChartOptions = {
|
|
data,
|
|
series: [
|
|
{
|
|
type: "bar",
|
|
xKey,
|
|
yKey,
|
|
fill: color,
|
|
} as AgBarSeriesOptions,
|
|
],
|
|
height,
|
|
};
|
|
|
|
return <AgCharts options={options} />;
|
|
}
|
|
|
|
export function LineChart({
|
|
data,
|
|
xKey,
|
|
yKey,
|
|
color = "#3b82f6",
|
|
height = 300,
|
|
}: {
|
|
data: any[];
|
|
xKey: string;
|
|
yKey: string;
|
|
color?: string;
|
|
height?: number;
|
|
}) {
|
|
const options: AgChartOptions = {
|
|
data,
|
|
series: [
|
|
{
|
|
type: "line",
|
|
xKey,
|
|
yKey,
|
|
stroke: color,
|
|
strokeWidth: 3,
|
|
marker: {
|
|
size: 6,
|
|
fill: color,
|
|
stroke: "#ffffff",
|
|
strokeWidth: 2,
|
|
},
|
|
} as AgLineSeriesOptions,
|
|
],
|
|
height,
|
|
};
|
|
|
|
return <AgCharts options={options} />;
|
|
}
|
|
|
|
export function PieChart({
|
|
data,
|
|
labelKey,
|
|
valueKey,
|
|
height = 300,
|
|
}: {
|
|
data: any[];
|
|
labelKey: string;
|
|
valueKey: string;
|
|
height?: number;
|
|
}) {
|
|
const options: AgChartOptions = {
|
|
data,
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
labelKey,
|
|
angleKey: valueKey,
|
|
} as AgPieSeriesOptions,
|
|
],
|
|
height,
|
|
};
|
|
|
|
return <AgCharts options={options} />;
|
|
}
|
|
|
|
export function AreaChart({
|
|
data,
|
|
xKey,
|
|
yKey,
|
|
color = "#3b82f6",
|
|
height = 300,
|
|
}: {
|
|
data: any[];
|
|
xKey: string;
|
|
yKey: string;
|
|
color?: string;
|
|
height?: number;
|
|
}) {
|
|
const options: AgChartOptions = {
|
|
data,
|
|
series: [
|
|
{
|
|
type: "area",
|
|
xKey,
|
|
yKey,
|
|
fill: color,
|
|
stroke: color,
|
|
strokeWidth: 2,
|
|
},
|
|
],
|
|
height,
|
|
};
|
|
|
|
return <AgCharts options={options} />;
|
|
}
|