Implement scrolling to ganttchart

package-lock.json

@@ -1451,6 +1451,11 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.27.0.tgz",
       "integrity": "sha512-sj+J0Mo2p2X1e306MHq282WS4/A8Pz/95GIFcsPNMPMZVI3EUrAdSv90al1k+p74WGLCruMXk23bfEDZa71X9Q=="
     },
+    "debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -1532,6 +1537,11 @@
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.19.0.tgz",
       "integrity": "sha512-fRA+BaAWOR/yr/t7T9E9GJztHPeFjj8U35ajyAjCDtAAnTn1Rc1f6W6VGPJrO1tkQv9zWu+JRof7z6oQtiYVFQ=="
     },
+    "easy-bem": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.1.1.tgz",
+      "integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A=="
+    },
     "electron-to-chromium": {
       "version": "1.4.14",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.14.tgz",
@@ -3440,6 +3450,16 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-indiana-drag-scroll": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-indiana-drag-scroll/-/react-indiana-drag-scroll-2.1.0.tgz",
+      "integrity": "sha512-Tj94Dv9PkmoKqc9nxK/dzwhtE8pP7NTxmeHqkD8KN0zad1NNE+/JsvRcK4EdqE6CdA2nMESzqPMvv1AzRXdBew==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "debounce": "^1.2.0",
+        "easy-bem": "^1.1.1"
+      }
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

package.json

@@ -12,6 +12,7 @@
     "ramda": "^0.27.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-indiana-drag-scroll": "^2.1.0",
     "theme-ui": "^0.12.1"
   },
   "devDependencies": {

src/pages/honkai3rd/versions/index.tsx

@@ -20,6 +20,7 @@ import {
 } from '../../../data/honkai3rd/versions'
 import { getWeaponById, WeaponData } from '../../../data/honkai3rd/weapons'
 import { addDateToDateString, getDateString } from '../../../lib/string'
+import ScrollContainer from 'react-indiana-drag-scroll'
 
 interface VersionIndexPageProps {
   versionDataList: VersionData[]
@@ -109,38 +110,40 @@ const VersionIndexPage = ({
             Supply Events
           </Heading>
           <Box mb={4}>
-            <GanttChart
+            <ScrollContainer vertical={false}>
-              items={currentVersionSupplyEvents.map((supplyEventData) => {
+              <GanttChart
-                const imgSrc = getIconSrcFromItem(supplyEventData.featured[0])
+                items={currentVersionSupplyEvents.map((supplyEventData) => {
-                return {
+                  const imgSrc = getIconSrcFromItem(supplyEventData.featured[0])
-                  id: supplyEventData.id,
+                  return {
-                  label: (
+                    id: supplyEventData.id,
-                    <Flex sx={{ alignItems: 'center' }}>
+                    label: (
-                      {imgSrc != null && (
+                      <Flex sx={{ alignItems: 'center' }}>
-                        <SquareImageBox
+                        {imgSrc != null && (
-                          size={20}
+                          <SquareImageBox
-                          src={imgSrc}
+                            size={20}
-                          alt={supplyEventData.featured[0].id}
+                            src={imgSrc}
-                          mr={1}
+                            alt={supplyEventData.featured[0].id}
-                        />
+                            mr={1}
-                      )}
+                          />
-                      <Text>{supplyEventData.name}</Text>
+                        )}
-                    </Flex>
+                        <Text>{supplyEventData.name}</Text>
-                  ),
+                      </Flex>
-                  duration: supplyEventData.duration,
+                    ),
-                  row: supplyEventData.track,
+                    duration: supplyEventData.duration,
+                    row: supplyEventData.track,
+                  }
+                })}
+                today={getDateString(new Date())}
+                startDate={currentVersionData.duration[0]}
+                endDate={
+                  currentVersionData.duration[1] != null
+                    ? currentVersionData.duration[1]
+                    : addDateToDateString(currentVersionData.duration[0], {
+                        weeks: 6,
+                      })
                 }
-              })}
+              />
-              today={getDateString(new Date())}
+            </ScrollContainer>
-              startDate={currentVersionData.duration[0]}
-              endDate={
-                currentVersionData.duration[1] != null
-                  ? currentVersionData.duration[1]
-                  : addDateToDateString(currentVersionData.duration[0], {
-                      weeks: 6,
-                    })
-              }
-            />
           </Box>
           <Box>
             <NextLink