add analytics summary

Author: nanocloudx

scatter/report/app/global.css

@@ -2,7 +2,7 @@ body {
   font-family: 'Roboto', 'Noto Sans JP', sans-serif;
   margin: 0;
   border: 0;
-  background: linear-gradient(to bottom right, #f9c8a0, #f7c5da);
+  background: linear-gradient(to right, #f9c8a0, #f7c5da);
   padding: 1rem 0;
   min-height: 100vh;
   text-align: justify;

scatter/report/components/Analysis.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import {Result} from '@/type'
-import {Box, Button, Heading, HStack, Separator, Text} from '@chakra-ui/react'
+import {Box, Button, Heading, HStack, Icon, Separator, Text, VStack} from '@chakra-ui/react'
 import {
   TimelineConnector,
   TimelineContent,
@@ -10,7 +10,12 @@ import {
   TimelineRoot,
   TimelineTitle
 } from '@/components/ui/timeline'
-import {CircleArrowDownIcon} from 'lucide-react'
+import {
+  ChevronRightIcon,
+  CircleArrowDownIcon, ClipboardCheckIcon,
+  MessageCircleIcon,
+  MessagesSquareIcon,
+} from 'lucide-react'
 import {
   DrawerBackdrop, DrawerBody,
   DrawerContent, DrawerFooter,
@@ -30,8 +35,27 @@ export function Analysis({result}: ReportProps) {
 
   return (
     <Box mx={'auto'} maxW={'750px'} mb={12}>
-      <Separator my={12} />
+      <Separator mt={20} mb={12} />
       <Heading textAlign={'center'} fontSize={'xl'} mb={5}>Analysis</Heading>
+      <HStack mb={5} justify={'center'}>
+        <VStack gap={0} w={'200px'}>
+          <Icon mb={2}><MessageCircleIcon size={'30px'} /></Icon>
+          <Text fontSize={'3xl'} fontWeight={'bold'} lineHeight={1} mb={1}>{Object.keys(result.comments).length.toLocaleString()}</Text>
+          <Text fontSize={'xs'}>意見が含まれるコメント数</Text>
+        </VStack>
+        <ChevronRightIcon />
+        <VStack gap={0} w={'200px'}>
+          <Icon mb={2}><MessagesSquareIcon size={'30px'} /></Icon>
+          <Text fontSize={'3xl'} fontWeight={'bold'} lineHeight={1} mb={1}>{result.arguments.length.toLocaleString()}</Text>
+          <Text fontSize={'xs'}>AIが抽出した意見数</Text>
+        </VStack>
+        <ChevronRightIcon />
+        <VStack gap={0} w={'200px'}>
+          <Icon mb={2}><ClipboardCheckIcon size={'30px'} /></Icon>
+          <Text fontSize={'3xl'} fontWeight={'bold'} lineHeight={1} mb={1}>{result.clusters.length.toLocaleString()}</Text>
+          <Text fontSize={'xs'}>AIが集約したクラスター数</Text>
+        </VStack>
+      </HStack>
       <Text mb={5}>{result.config.intro}</Text>
       <Box>
         <Heading fontSize={'md'} mb={5}>分析手順</Heading>

scatter/report/components/ClientContainer.tsx

@@ -77,7 +77,7 @@ export function ClientContainer({resultSize, meta, children}: PropsWithChildren<
     return (
       <>
         <LoadingBar loaded={loadedSize} max={resultSize} />
-        <Skeleton height="516px" mb={5} mx={'auto'} w={'100%'} maxW={'1200px'} />
+        <Skeleton height="534px" mb={5} mx={'auto'} w={'100%'} maxW={'1200px'} />
         { children }
         <LoadingBar loaded={loadedSize} max={resultSize} />
       </>

scatter/report/components/ClusterOverview.tsx

@@ -1,6 +1,6 @@
 import {Cluster} from '@/type'
 import {Box, Heading, Icon, Text} from '@chakra-ui/react'
-import {MessageSquareIcon} from 'lucide-react'
+import {MessagesSquareIcon} from 'lucide-react'
 
 type Props = {
   cluster: Cluster
@@ -11,7 +11,7 @@ export function ClusterOverview({cluster}: Props) {
     <Box mx={'auto'} maxW={'750px'} mb={12}>
       <Box mb={2}>
         <Heading fontSize={'2xl'} className={'headingColor'} mb={1}>{cluster.label}</Heading>
-        <Text fontWeight={'bold'}><Icon mr={1}><MessageSquareIcon size={20} /></Icon>{cluster.value}コメント</Text>
+        <Text fontWeight={'bold'}><Icon mr={1}><MessagesSquareIcon size={20} /></Icon>{cluster.value}意見</Text>
       </Box>
       <Text>{cluster.takeaway}</Text>
     </Box>

scatter/report/components/Overview.tsx

@@ -1,5 +1,6 @@
-import {Box, Heading} from '@chakra-ui/react'
+import {Box, Heading, Icon, Text} from '@chakra-ui/react'
 import {Result} from '@/type'
+import {MessagesSquareIcon} from 'lucide-react'
 
 type Props = {
   result: Result
@@ -9,7 +10,8 @@ export function Overview({result}: Props) {
   return (
     <Box mx={'auto'} maxW={'750px'} mb={5}>
       <Heading textAlign={'center'} fontSize={'xl'} mb={5}>Report</Heading>
-      <Heading as={'h2'} size={'4xl'} mb={5} className={'headingColor'}>{result.config.question}</Heading>
+      <Heading as={'h2'} size={'4xl'} mb={2} className={'headingColor'}>{result.config.question}</Heading>
+      <Text fontWeight={'bold'} fontSize={'xl'} mb={2}><Icon mr={1}><MessagesSquareIcon size={20} /></Icon>{result.arguments.length}意見</Text>
       <p>{result.overview}</p>
     </Box>
   )