[fix] データの最大数の設定

NUTFes · Jun 8, 2023 · 4af7e67 · 4af7e67
1 parent 319fa13
commit 4af7e67
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 23 deletions.
diff --git a/view/src/components/common/ParkingCard/ParkingCard.tsx b/view/src/components/common/ParkingCard/ParkingCard.tsx
@@ -8,15 +8,17 @@ import { Line } from 'react-chartjs-2'
 import { ParkingCardProps } from './ParkingCard.type'
 import { Modal } from '../Modal'
 
-const ParkingCard = ({ name, maxCapacity, currentCapacity, data }: ParkingCardProps) => {
+const ParkingCard = ({ name, maxCapacity, currentCapacity, data, dataLimit }: ParkingCardProps) => {
   Chart.register(...registerables)
 
+  const RecentData = useMemo(() => (dataLimit ? data && data.slice(-dataLimit) : data), [data, dataLimit])
+
   const [isOpen, setIsOpen] = useState(false)
   const chartData = useMemo(
     () => ({
       labels:
-        data &&
-        data.map((d) =>
+        RecentData &&
+        RecentData.map((d) =>
           new Date(d.time).toLocaleString('ja-JP', {
             month: '2-digit',
             day: '2-digit',
@@ -28,11 +30,11 @@ const ParkingCard = ({ name, maxCapacity, currentCapacity, data }: ParkingCardPr
       datasets: [
         {
           label: name,
-          data: data && data.map((d) => d.count),
+          data: RecentData && RecentData.map((d) => d.count),
         },
       ],
     }),
-    [data, name],
+    [RecentData, name],
   )
 
   return (

diff --git a/view/src/components/common/ParkingCard/ParkingCard.type.ts b/view/src/components/common/ParkingCard/ParkingCard.type.ts
@@ -1,8 +1,9 @@
-import { Parking } from "@/type/parking.type"
+import { Parking } from '@/type/parking.type'
 
 export interface ParkingCardProps {
   name: string
   maxCapacity: number
   currentCapacity: number
   data?: Parking[]
+  dataLimit?: number
 }
diff --git a/view/src/pages/index.tsx b/view/src/pages/index.tsx
@@ -15,12 +15,12 @@ export const getServerSideProps = async () => {
     parkingNames.map(async (name) => {
       const url = `http://view:3000/api/parkings/${name}`
       const res = await fetch(url)
-      
+
       if (res.status !== 200) {
         throw new Error(`Failed to fetch ${url}`)
       }
-      const data = await res.json() as Parking[]
-      return { 
+      const data = (await res.json()) as Parking[]
+      return {
         name,
         data,
       }
@@ -58,7 +58,14 @@ export const Home: NextPage<Props> = ({ parkingData }: Props) => (
         </Typography>
         <div className='gird-cols-1 grid gap-5 md:grid-cols-3'>
           {parkingData.map(({ name, data }, index) => (
-            <ParkingCard key={name} name={name} currentCapacity={data[data.length-1].count} maxCapacity={parkingLimit[index]} data={data} />
+            <ParkingCard
+              key={name}
+              name={name}
+              currentCapacity={data[data.length - 1].count}
+              maxCapacity={parkingLimit[index]}
+              data={data}
+              dataLimit={20}
+            />
           ))}
         </div>
       </Card>

diff --git a/view/yarn.lock b/view/yarn.lock
@@ -608,10 +608,10 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
-"@types/react-dom@18.0.11":
-  version "18.0.11"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.11.tgz#321351c1459bc9ca3d216aefc8a167beec334e33"
-  integrity sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==
+"@types/react-dom@18.2.1":
+  version "18.2.1"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.1.tgz#663b2612feb5f6431a70207430d7c04881b87f29"
+  integrity sha512-8QZEV9+Kwy7tXFmjJrp3XUKQSs9LTnE0KnoUb0YCguWBiNW0Yfb2iBMYZ08WPg35IR6P3Z0s00B15SwZnO26+w==
   dependencies:
     "@types/react" "*"
 
@@ -638,10 +638,10 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@18.0.28":
-  version "18.0.28"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.28.tgz#accaeb8b86f4908057ad629a26635fe641480065"
-  integrity sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==
+"@types/react@18.2.0":
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.0.tgz#15cda145354accfc09a18d2f2305f9fc099ada21"
+  integrity sha512-0FLj93y5USLHdnhIhABk83rm8XEGA7kH3cr+YUlvxoUGp1xNt/DINUMvqPxLyOQMzLmZe8i4RTHbvb8MC7NmrA==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -773,11 +773,6 @@ acorn@^8.8.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
   integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
 
-add@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235"
-  integrity sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q==
-
 aggregate-error@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a"