130 lines
3.1 KiB
TypeScript
130 lines
3.1 KiB
TypeScript
import type { ChartData, ChartOptions } from "chart.js";
|
|
import { getCssVariableValue } from "@common/components";
|
|
import type { BoardStatistics } from "./board-statistics-interface";
|
|
|
|
export const chartData = {
|
|
day: (
|
|
data: BoardStatistics,
|
|
): {
|
|
data: ChartData<"line">;
|
|
options: ChartOptions<"line">;
|
|
} => {
|
|
return {
|
|
data: {
|
|
labels: data.bbsDailyList.map((item) => item.dayYmd),
|
|
datasets: [
|
|
{
|
|
type: "line",
|
|
label: "신규게시물",
|
|
data: data.bbsDailyList.map((item) => item.pstNewCnt),
|
|
borderColor: getCssVariableValue("--chart-1"),
|
|
backgroundColor: "rgba(59, 130, 246, 0.1)",
|
|
tension: 0.4,
|
|
},
|
|
{
|
|
type: "line",
|
|
label: "댓글수",
|
|
data: data.bbsDailyList.map((item) => item.pstCmntCnt),
|
|
borderColor: getCssVariableValue("--chart-2"),
|
|
backgroundColor: "rgba(236, 72, 153, 0.1)",
|
|
tension: 0.4,
|
|
},
|
|
{
|
|
type: "line",
|
|
label: "조회수",
|
|
data: data.bbsDailyList.map((item) => item.pstInqCnt),
|
|
borderColor: getCssVariableValue("--chart-3"),
|
|
backgroundColor: "rgba(168, 85, 247, 0.1)",
|
|
tension: 0.4,
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
position: "bottom",
|
|
},
|
|
},
|
|
scales: {
|
|
y: {
|
|
ticks: {
|
|
precision: 0,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
},
|
|
|
|
board: (
|
|
data: BoardStatistics,
|
|
): {
|
|
data: ChartData<"bar">;
|
|
options: ChartOptions<"bar">;
|
|
} => {
|
|
return {
|
|
data: {
|
|
labels: data.bbsPstCntList.map((item) => item.bbsNm),
|
|
datasets: [
|
|
{
|
|
type: "bar",
|
|
label: "게시판별 분포",
|
|
data: data.bbsPstCntList.map((item) => item.pstCnt),
|
|
backgroundColor: data.bbsPstCntList.map((_, index) =>
|
|
getCssVariableValue(`--chart-${(index % 5) + 1}`),
|
|
),
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
indexAxis: "y",
|
|
scales: {
|
|
x: {
|
|
ticks: {
|
|
precision: 0,
|
|
},
|
|
},
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
},
|
|
|
|
status: (
|
|
data: BoardStatistics,
|
|
): {
|
|
data: ChartData<"doughnut">;
|
|
options: ChartOptions<"doughnut">;
|
|
} => {
|
|
return {
|
|
data: {
|
|
labels: data.pstAnsList.map((item) => item.answerNm),
|
|
datasets: [
|
|
{
|
|
type: "doughnut",
|
|
data: data.pstAnsList.map((item) => item.ansCnt),
|
|
backgroundColor: data.pstAnsList.map((_, index) =>
|
|
getCssVariableValue(`--chart-${(index % 5) + 1}`),
|
|
),
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: "bottom",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
},
|
|
};
|