173 lines
3.2 KiB
TypeScript
173 lines
3.2 KiB
TypeScript
import { type ChartData, type ChartOptions } from "chart.js";
|
|
|
|
const commonData = {
|
|
labels: ["1", "2", "3", "4", "5", "6", "7"],
|
|
datasets: [
|
|
{
|
|
fill: true,
|
|
pointRadius: 0,
|
|
tension: 0.5,
|
|
},
|
|
],
|
|
};
|
|
|
|
const commonOptions = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
display: false,
|
|
},
|
|
y: {
|
|
display: false,
|
|
},
|
|
},
|
|
};
|
|
|
|
export const chartData: Record<
|
|
string,
|
|
{ data: ChartData<"line" | "bar">; options: ChartOptions<"line" | "bar"> }
|
|
> = {
|
|
memberChartData: {
|
|
data: {
|
|
...commonData,
|
|
datasets: [
|
|
{
|
|
...commonData.datasets[0],
|
|
data: [8, 10, 7, 12, 9, 13, 12],
|
|
borderColor: "rgba(255, 255, 255, 0.6)",
|
|
backgroundColor: "rgba(255, 255, 255, 0.1)",
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
...commonOptions,
|
|
scales: {
|
|
...commonOptions.scales,
|
|
y: {
|
|
...commonOptions.scales.y,
|
|
min: 5,
|
|
max: 15,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
postChartData: {
|
|
data: {
|
|
...commonData,
|
|
datasets: [
|
|
{
|
|
...commonData.datasets[0],
|
|
data: [5200, 5350, 5450, 5520, 5600, 5650, 5678],
|
|
borderColor: "rgba(86, 138, 255, 1)",
|
|
backgroundColor: "rgba(86, 138, 255, 0.1)",
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
...commonOptions,
|
|
},
|
|
},
|
|
visitorChartData: {
|
|
data: {
|
|
...commonData,
|
|
datasets: [
|
|
{
|
|
...commonData.datasets[0],
|
|
data: [1800, 2100, 1950, 2300, 2150, 2250, 2345],
|
|
borderColor: "rgba(149, 131, 252)",
|
|
backgroundColor: "rgba(149, 131, 252, 0.1)",
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
...commonOptions,
|
|
},
|
|
},
|
|
apiChartData: {
|
|
data: {
|
|
...commonData,
|
|
datasets: [
|
|
{
|
|
...commonData.datasets[0],
|
|
data: [41000, 42500, 43200, 44100, 44800, 45200, 45678],
|
|
borderColor: "rgba(220, 103, 206)",
|
|
backgroundColor: "rgba(220, 103, 206, 0.1)",
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
...commonOptions,
|
|
},
|
|
},
|
|
siteAccessChartData: {
|
|
data: {
|
|
labels: Array.from({ length: 24 }, (_, i) =>
|
|
i.toString().padStart(2, "0"),
|
|
),
|
|
datasets: [],
|
|
},
|
|
options: {
|
|
...commonOptions,
|
|
plugins: {
|
|
legend: {
|
|
position: "top",
|
|
},
|
|
tooltip: {
|
|
mode: "index",
|
|
intersect: false,
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
title: {
|
|
text: "시간대",
|
|
},
|
|
},
|
|
y: {
|
|
title: {
|
|
text: "접속자 수",
|
|
},
|
|
beginAtZero: true,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
menuAccessChartData: {
|
|
data: {
|
|
labels: [],
|
|
datasets: [],
|
|
},
|
|
options: {
|
|
...commonOptions,
|
|
plugins: {
|
|
legend: {
|
|
position: "top",
|
|
},
|
|
tooltip: {
|
|
mode: "index",
|
|
intersect: false,
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
title: {
|
|
text: "메뉴명",
|
|
},
|
|
},
|
|
y: {
|
|
title: {
|
|
text: "접속 횟수",
|
|
},
|
|
beginAtZero: true,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|