Scrollable graph support

source/content.css

@@ -389,7 +389,7 @@ body {
   --vandal-modal-background-color: #f3f0ea;
 
   /* Input Calendar */
-  --vandal-input-months-background-color: #4d4c4c;
+  --vandal-input-months-background-color: #444;
 }
 
 .vandal,

source/libs/components/common/icon/index.js

@@ -155,7 +155,7 @@ const icons = {
     </svg>
   ),
   leftNav: ({ ...props }) => (
-    <svg viewBox="13 -1.7 68 107" {...props}>
+    <svg viewBox="13 -1.7 68 107" style={{ transform: "rotate(180deg)" }} {...props}>
       <title>{props.title}</title>
       <polygon points="40.6,70.6 37.9,67.7 56.3,50 37.9,32.3 40.6,29.4 62.1,50" />
     </svg>

source/libs/components/filter/graph/graph.module.css

@@ -5,11 +5,23 @@
 }
 
 .year__container {
+  position: relative;
   display: flex;
   justify-content: flex-end;
   max-height: 75px;
 }
 
+.scroll__wrapper {
+  display: flex;
+  width: 97%;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+}
+
+.scroll__wrapper::-webkit-scrollbar {
+  display: none;
+}
+
 .year {
   display: flex;
   flex: 0 0 48px;
@@ -204,3 +216,17 @@
   margin-top: 30px;
   background: none;
 }
+
+.left__scroll__button {
+  position: absolute;
+  left: 0;
+  width: 25px;
+  height: 100%;
+  background: #545454;
+  border: 0;
+  cursor: pointer;
+}
+
+.left__nav__icon {
+  fill: #fff;
+}

source/libs/components/filter/graph/index.js

@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import React, { memo, useRef } from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
 import _ from "lodash";
@@ -90,6 +90,7 @@ const GraphFilter = memo((props) => {
 
   let { sparkline } = props;
 
+  const scrollRef = useRef();
   const { theme } = useTheme();
 
   if (showSparkError || showCalendarError) {
@@ -150,32 +151,43 @@ const GraphFilter = memo((props) => {
   return (
     <div className={styles.root}>
       <div className={styles.year__container}>
-        {_.map(years, (y) => (
-          <div
-            role="button"
-            tabIndex={0}
-            className={cx({
-              [styles.year]: true,
-              [styles.year___selected]: theme !== "dark" && currentYear === y,
-              [styles.year___selected___dark]:
-                  theme === "dark" && currentYear === y
-            })}
-            key={`year-${y}`}
-            onClick={onYearChange(y)}
-          >
-            <span className={styles.year__value}>{y}</span>
-            <Spark
-              data={sparkline[y]}
-              margin={0}
-              width={48}
-              height={75}
-              min={0}
-              max={maxcount}
+        <button
+          type="button"
+          className={styles.left__scroll__button}
+          onClick={() => {
+            scrollRef.current.scrollLeft = 0;
+          }}
+        >
+          <Icon name="leftNav" className={styles.left__nav__icon} />
+        </button>
+        <div ref={scrollRef} className={styles.scroll__wrapper}>
+          {_.map(years, (y) => (
+            <div
+              role="button"
+              tabIndex={0}
+              className={cx({
+                [styles.year]: true,
+                [styles.year___selected]: theme !== "dark" && currentYear === y,
+                [styles.year___selected___dark]:
+                    theme === "dark" && currentYear === y
+              })}
+              key={`year-${y}`}
+              onClick={onYearChange(y)}
             >
-              <Bars theme={theme} />
-            </Spark>
-          </div>
-        ))}
+              <span className={styles.year__value}>{y}</span>
+              <Spark
+                data={sparkline[y]}
+                margin={0}
+                width={48}
+                height={75}
+                min={0}
+                max={maxcount}
+              >
+                <Bars theme={theme} />
+              </Spark>
+            </div>
+          ))}
+        </div>
       </div>
       {showCalendarLoader && !isOverCapacity && (
         <div className={styles.loader__container}>

source/libs/components/frame/frame.module.css

@@ -202,7 +202,6 @@
 .backward__nav__icon {
   width: 24px;
   height: 37px;
-  transform: rotate(180deg);
   fill: var(--vandal-primary-icon-color);
   stroke: var(--vandal-primary-icon-color);
   stroke-width: 3px;