diff --git a/src/pages/ReviewResultPage/components/DoughnutChart/index.tsx b/src/pages/ReviewResultPage/components/DoughnutChart/index.tsx index 5c8b0f5c..54c4f82c 100644 --- a/src/pages/ReviewResultPage/components/DoughnutChart/index.tsx +++ b/src/pages/ReviewResultPage/components/DoughnutChart/index.tsx @@ -6,6 +6,26 @@ interface DoughnutChartProps { answers: string[] } +const splitStrings = (input: string[]): string[][] | string[] => { + const result: string[][] = [] + + for (const str of input) { + if (str.length <= 7) { + result.push([str]) + continue + } + + const chunks: string[] = [] + + for (let i = 0; i < str.length; i += 7) { + chunks.push(str.substring(i, i + 7).trim()) + } + result.push(chunks) + } + + return result +} + const DoughnutChart = ({ answers }: DoughnutChartProps) => { const { darkMode } = useDarkMode() @@ -15,9 +35,11 @@ const DoughnutChart = ({ answers }: DoughnutChartProps) => { answerMap.set(answer, (answerMap.get(answer) || 0) + 1) }) - const labels = Array.from(answerMap.keys()) + const labels = splitStrings(Array.from(answerMap.keys())) const data = Array.from(answerMap.values()) + console.log(labels) + const doughnutData: ChartData<'doughnut'> = { labels, datasets: [ @@ -47,9 +69,9 @@ const DoughnutChart = ({ answers }: DoughnutChartProps) => { position: 'right', display: true, labels: { - padding: 20, font: { - size: 12, + size: 13, + lineHeight: 1.5, }, color: darkMode ? '#fff' : '#000', usePointStyle: true, @@ -59,7 +81,7 @@ const DoughnutChart = ({ answers }: DoughnutChartProps) => { } return ( -