fix(frontend): improve reporting charts

frontend/package-lock.json

@@ -1933,34 +1933,16 @@
         "@babel/types": "^7.3.0"
       }
     },
-    "@types/classnames": {
-      "version": "2.2.10",
-      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.10.tgz",
-      "integrity": "sha512-1UzDldn9GfYYEsWWnn/P4wkTlkZDH7lDb0wBMGbtIQc9zXEQq7FlKBdZUn6OBqD8sKZZ2RQO2mAjGpXiDGoRmQ=="
-    },
     "@types/color-name": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
       "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ=="
     },
-    "@types/d3-array": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-2.0.0.tgz",
-      "integrity": "sha512-rGqfPVowNDTszSFvwoZIXvrPG7s/qKzm9piCRIH6xwTTRu7pPZ3ootULFnPkTt74B6i5lN0FpLQL24qGOw1uZA=="
-    },
     "@types/d3-path": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.8.tgz",
       "integrity": "sha512-AZGHWslq/oApTAHu9+yH/Bnk63y9oFOMROtqPAtxl5uB6qm1x2lueWdVEjsjjV3Qc2+QfuzKIwIR5MvVBakfzA=="
     },
-    "@types/d3-scale": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-2.2.0.tgz",
-      "integrity": "sha512-oQFanN0/PiR2oySHfj+zAAkK1/p4LD32Nt1TMVmzk+bYHk7vgIg/iTXQWitp1cIkDw4LMdcgvO63wL+mNs47YA==",
-      "requires": {
-        "@types/d3-time": "*"
-      }
-    },
     "@types/d3-shape": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.2.tgz",
@@ -1969,11 +1951,6 @@
         "@types/d3-path": "*"
       }
     },
-    "@types/d3-time": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-1.0.10.tgz",
-      "integrity": "sha512-aKf62rRQafDQmSiv1NylKhIMmznsjRN+MnXRXTqHoqm0U/UZzVpdrtRnSIfdiLS616OuC1soYeX1dBg2n1u8Xw=="
-    },
     "@types/eslint-visitor-keys": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
@@ -2137,11 +2114,6 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.4.tgz",
       "integrity": "sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA=="
     },
-    "@types/lodash": {
-      "version": "4.14.150",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.150.tgz",
-      "integrity": "sha512-kMNLM5JBcasgYscD9x/Gvr6lTAv2NVgsKtet/hm93qMyf/D1pt+7jeEZklKJKxMVmXjxbRVQQGfqDSfipYCO6w=="
-    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -2203,6 +2175,21 @@
         "@types/react-router": "*"
       }
     },
+    "@types/recharts": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmjs.org/@types/recharts/-/recharts-1.8.10.tgz",
+      "integrity": "sha512-XHVagR/eJFTTeYGygNuZIiMhNpwGjjf5+8clc6ST27sReecEZN7YTRWlZVvMyN0sJRIhABTLnhoIU+5Gts9+yQ==",
+      "requires": {
+        "@types/d3-shape": "*",
+        "@types/react": "*",
+        "@types/recharts-scale": "*"
+      }
+    },
+    "@types/recharts-scale": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/recharts-scale/-/recharts-scale-1.0.0.tgz",
+      "integrity": "sha512-HR/PrCcxYb2YHviTqH7CMdL1TUhUZLTUKzfrkMhxm1HTa5mg/QtP8XMiuSPz6dZ6wecazAOu8aYZ5DqkNlgHHQ=="
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -2463,126 +2450,6 @@
         }
       }
     },
-    "@vx/axis": {
-      "version": "0.0.196",
-      "resolved": "https://registry.npmjs.org/@vx/axis/-/axis-0.0.196.tgz",
-      "integrity": "sha512-AtVjoDXCmecKRp671ATV9Qky/MpQY1pV/O1VWULxhq5dujKXWPj0GtnuRR7I7VgB0XCoKpEh12gVTi7dUq2FhQ==",
-      "requires": {
-        "@types/classnames": "^2.2.9",
-        "@types/react": "*",
-        "@vx/group": "0.0.196",
-        "@vx/point": "0.0.196",
-        "@vx/shape": "0.0.196",
-        "@vx/text": "0.0.196",
-        "classnames": "^2.2.5",
-        "prop-types": "^15.6.0"
-      }
-    },
-    "@vx/curve": {
-      "version": "0.0.196",
-      "resolved": "https://registry.npmjs.org/@vx/curve/-/curve-0.0.196.tgz",
-      "integrity": "sha512-uGucJuuAOa0ezrSTqQE8BHkyNPAwGV1bNB8BP1V5Ln1GA7o0LBkqwHOdzShkFzsVoeDadRRGy2mNga6gHDGh8A==",
-      "requires": {
-        "@types/d3-shape": "^1.3.1",
-        "d3-shape": "^1.0.6"
-      }
-    },
-    "@vx/gradient": {
-      "version": "0.0.196",
-      "resolved": "https://registry.npmjs.org/@vx/gradient/-/gradient-0.0.196.tgz",
-      "integrity": "sha512-euz0GRKIMXil7cx3Bx9lVmgfncz3M2Yv2+AEMyRiBe3Ln3Y04rTP2W6o94bvQ+TXWRD5U18LPQQg7Myr6cnFDA==",
-      "requires": {
-        "@types/react": "*",
-        "prop-types": "^15.5.7"
-      }
-    },
-    "@vx/grid": {
-      "version": "0.0.196",
-      "resolved": "https://registry.npmjs.org/@vx/grid/-/grid-0.0.196.tgz",
-      "integrity": "sha512-u9zqpRA+k2qfickspWHCAgpqg/Sq55T3e3crPUvuAOsqiX/7doOd+LKbJJv0LRq6PVufdVRUBthTsW5F5qffrg==",
-      "requires": {
-        "@types/classnames": "^2.2.9",
-        "@types/react": "*",
-        "@vx/group": "0.0.196",
-        "@vx/point": "0.0.196",
-        "@vx/shape": "0.0.196",
-        "classnames": "^2.2.5",
-        "prop-types": "^15.6.2"
-      }
-    },
-    "@vx/group": {
-      "version": "0.0.196",
-      "resolved": "https://registry.npmjs.org/@vx/group/-/group-0.0.196.tgz",
-      "integrity": "sha512-neWYucGoyrWloEali12yEn//5pRVwSBtKpuzKlQ43yYTav8OLa869DtCSVeRlDG8TIcPvg9YWfWKKhGWKXRCtg==",
-      "requires": {
-        "@types/classnames": "^2.2.9",
-        "@types/react": "*",
-        "classnames": "^2.2.5",
-        "prop-types": "^15.6.2"
-      }
-    },
-    "@vx/point": {
-      "version": "0.0.196",
-      "resolved": "https://registry.npmjs.org/@vx/point/-/point-0.0.196.tgz",
-      "integrity": "sha512-dya1cwMwqQtRP+oQwC5x0N2bCiKENGqDd6Y4IuAKwkWMvxpjOAPoOlglZ9QKLDPzftUqLFxrjrsT5RlHTxyKnw=="
-    },
-    "@vx/scale": {
-      "version": "0.0.196",
-      "resolved": "https://registry.npmjs.org/@vx/scale/-/scale-0.0.196.tgz",
-      "integrity": "sha512-s3lVbwEni0F9AGACaJG3m071uXVryoOgogiU6+yXv1O1gUoZMMm6AjzCndcz9jq1sCFDNcIrxyf5LomOA2tQaQ==",
-      "requires": {
-        "@types/d3-scale": "^2.1.1",
-        "d3-scale": "^2.2.2"
-      }
-    },
-    "@vx/shape": {
-      "version": "0.0.196",
-      "resolved": "https://registry.npmjs.org/@vx/shape/-/shape-0.0.196.tgz",
-      "integrity": "sha512-09s4yv0IKmUrB/z/bRLW936DzbhbsxExHv0ocowh2Zv3zgObAaeyf0MkkLyr1nDTqKDCZlfwOEM+1moOyBFQBA==",
-      "requires": {
-        "@types/classnames": "^2.2.9",
-        "@types/d3-path": "^1.0.8",
-        "@types/d3-shape": "^1.3.1",
-        "@types/react": "*",
-        "@vx/curve": "0.0.196",
-        "@vx/group": "0.0.196",
-        "classnames": "^2.2.5",
-        "d3-path": "^1.0.5",
-        "d3-shape": "^1.2.0",
-        "prop-types": "^15.5.10"
-      }
-    },
-    "@vx/text": {
-      "version": "0.0.196",
-      "resolved": "https://registry.npmjs.org/@vx/text/-/text-0.0.196.tgz",
-      "integrity": "sha512-KhhOtQyzqcZvO/cgYdMrsLLf0LYFT0u1cqJ4j8RVD8JcmTrhHmzFvL9lE6OXADroZxTSOFY3mNIbAPlshIabpw==",
-      "requires": {
-        "@types/classnames": "^2.2.9",
-        "@types/lodash": "^4.14.146",
-        "@types/react": "*",
-        "classnames": "^2.2.5",
-        "lodash": "^4.17.15",
-        "prop-types": "^15.7.2",
-        "reduce-css-calc": "^1.3.0"
-      },
-      "dependencies": {
-        "balanced-match": {
-          "version": "0.4.2",
-          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
-          "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg="
-        },
-        "reduce-css-calc": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz",
-          "integrity": "sha1-dHyRTgSWFKTJz7umKYca0dKSdxY=",
-          "requires": {
-            "balanced-match": "^0.4.2",
-            "math-expression-evaluator": "^1.2.14",
-            "reduce-function-call": "^1.0.1"
-          }
-        }
-      }
-    },
     "@webassemblyjs/ast": {
       "version": "1.8.5",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
@@ -4769,11 +4636,6 @@
         "type": "^1.0.1"
       }
     },
-    "d3-array": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.4.0.tgz",
-      "integrity": "sha512-KQ41bAF2BMakf/HdKT865ALd4cgND6VcIztVQZUTt0+BH3RWy6ZYnHghVXf6NFjt2ritLr8H1T8LreAAlfiNcw=="
-    },
     "d3-collection": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
@@ -4896,6 +4758,11 @@
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
       "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
     },
+    "decimal.js-light": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.0.tgz",
+      "integrity": "sha512-b3VJCbd2hwUpeRGG3Toob+CRo8W22xplipNhP3tN7TSVB/cyMX71P1vM2Xjc9H74uV6dS2hDDmo/rHq8L87Upg=="
+    },
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
@@ -5182,6 +5049,14 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -9798,6 +9673,11 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -9825,6 +9705,11 @@
         "lodash._reinterpolate": "^3.0.0"
       }
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "lodash.toarray": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
@@ -12899,6 +12784,22 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-resize-detector": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-2.3.0.tgz",
+      "integrity": "sha512-oCAddEWWeFWYH5FAcHdBYcZjAw9fMzRUK9sWSx6WvSSOPVRxcHd5zTIGy/mOus+AhN/u6T4TMiWxvq79PywnJQ==",
+      "requires": {
+        "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.6.0",
+        "resize-observer-polyfill": "^1.5.0"
+      }
+    },
     "react-router": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz",
@@ -13034,6 +12935,28 @@
         }
       }
     },
+    "react-smooth": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-1.0.5.tgz",
+      "integrity": "sha512-eW057HT0lFgCKh8ilr0y2JaH2YbNcuEdFpxyg7Gf/qDKk9hqGMyXryZJ8iMGJEuKH0+wxS0ccSsBBB3W8yCn8w==",
+      "requires": {
+        "lodash": "~4.17.4",
+        "prop-types": "^15.6.0",
+        "raf": "^3.4.0",
+        "react-transition-group": "^2.5.0"
+      }
+    },
+    "react-transition-group": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
+      "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+      "requires": {
+        "dom-helpers": "^3.4.0",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -13134,6 +13057,54 @@
         "util.promisify": "^1.0.0"
       }
     },
+    "recharts": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-1.8.5.tgz",
+      "integrity": "sha512-tM9mprJbXVEBxjM7zHsIy6Cc41oO/pVYqyAsOHLxlJrbNBuLs0PHB3iys2M+RqCF0//k8nJtZF6X6swSkWY3tg==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "core-js": "^2.6.10",
+        "d3-interpolate": "^1.3.0",
+        "d3-scale": "^2.1.0",
+        "d3-shape": "^1.2.0",
+        "lodash": "^4.17.5",
+        "prop-types": "^15.6.0",
+        "react-resize-detector": "^2.3.0",
+        "react-smooth": "^1.0.5",
+        "recharts-scale": "^0.4.2",
+        "reduce-css-calc": "^1.3.0"
+      },
+      "dependencies": {
+        "balanced-match": {
+          "version": "0.4.2",
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
+          "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg="
+        },
+        "core-js": {
+          "version": "2.6.11",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
+          "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
+        },
+        "reduce-css-calc": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz",
+          "integrity": "sha1-dHyRTgSWFKTJz7umKYca0dKSdxY=",
+          "requires": {
+            "balanced-match": "^0.4.2",
+            "math-expression-evaluator": "^1.2.14",
+            "reduce-function-call": "^1.0.1"
+          }
+        }
+      }
+    },
+    "recharts-scale": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.3.tgz",
+      "integrity": "sha512-t8p5sccG9Blm7c1JQK/ak9O8o95WGhNXD7TXg/BW5bYbVlr6eCeRBNpgyigD4p6pSSMehC5nSvBUPj6F68rbFA==",
+      "requires": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
     "recursive-readdir": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
@@ -13395,6 +13366,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.17.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",

frontend/package.json

@@ -12,21 +12,13 @@
     "@testing-library/jest-dom": "5.5.0",
     "@testing-library/react": "10.0.4",
     "@testing-library/user-event": "10.1.0",
-    "@types/d3-array": "2.0.0",
     "@types/jest": "25.2.1",
     "@types/node": "12.12.38",
     "@types/react": "16.9.34",
     "@types/react-dom": "16.9.7",
     "@types/react-router-dom": "5.1.5",
-    "@vx/axis": "0.0.196",
+    "@types/recharts": "1.8.10",
-    "@vx/curve": "0.0.196",
-    "@vx/gradient": "0.0.196",
-    "@vx/grid": "0.0.196",
-    "@vx/group": "0.0.196",
-    "@vx/scale": "0.0.196",
-    "@vx/shape": "0.0.196",
     "autoprefixer": "9.7.6",
-    "d3-array": "2.4.0",
     "date-fns": "2.13.0",
     "npm-run-all": "4.1.5",
     "postcss-cli": "7.1.1",
@@ -35,6 +27,7 @@
     "react-dom": "16.13.1",
     "react-router-dom": "5.1.2",
     "react-scripts": "3.4.1",
+    "recharts": "1.8.5",
     "tailwindcss": "1.4.5",
     "typescript": "3.8.3"
   },

frontend/src/components/ReportListens.tsx

@@ -1,13 +1,15 @@
-import { AxisBottom, AxisLeft } from "@vx/axis";
+import { format, getTime } from "date-fns";
-import { curveBasis } from "@vx/curve";
-import { GradientLightgreenGreen } from "@vx/gradient";
-import { Grid } from "@vx/grid";
-import { Group } from "@vx/group";
-import { scaleLinear, scaleTime } from "@vx/scale";
-import { Area, Line, LinePath } from "@vx/shape";
-import { extent } from "d3-array";
 import React, { useEffect, useState } from "react";
 import { Redirect } from "react-router-dom";
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
 import { getListensReport } from "../api/api";
 import { ListenReportItem } from "../api/entities/listen-report-item";
 import { ListenReportOptions } from "../api/entities/listen-report-options";
@@ -74,179 +76,47 @@ export const ReportListens: React.FC = () => {
 const ReportGraph: React.FC<{
   options: ListenReportOptions;
   data: ListenReportItem[];
-  width?: number;
+}> = ({ options, data }) => {
-  height?: number;
+  const dataLocal = data.map(({ date, ...other }) => ({
-  margin?: {
+    ...other,
-    top: number;
+    date: getTime(date),
-    right: number;
+  }));
-    bottom: number;
-    left: number;
-  };
-}> = ({
-  options,
-  data,
-  width = 900,
-  height = 500,
-  margin = { left: 70, right: 70, top: 20, bottom: 80 },
-}) => {
-  // Then we'll create some bounds
-  const xMax = width - margin.left - margin.right;
-  const yMax = height - margin.top - margin.bottom;
-
-  // We'll make some helpers to get at the data we want
-  const x = (d: ListenReportItem) => d.date;
-  const y = (d: ListenReportItem) => d.count;
-
-  // responsive utils for axis ticks
-  const numTicksForHeight = (heightT: number): number => {
-    if (heightT <= 300) return 3;
-    if (300 < heightT && heightT <= 600) return 5;
-    return 10;
-  };
-
-  const numTicksForWidth = (widthT: number): number => {
-    if (widthT <= 300) return 2;
-    if (300 < widthT && widthT <= 400) return 5;
-    return 10;
-  };
-
-  // And then scale the graph by our data
-  const xScaleTime = scaleTime<number>({
-    range: [0, xMax],
-    domain: extent(data, x) as [Date, Date],
-  });
-
-  /*
-  const xScaleBand = scaleBand({
-     range: [0, xMax],
-     domain: extent(data, x) as [Date, Date],
-     padding: 0.2,
-   });
-   */
-  const yScale = scaleLinear({
-    range: [yMax, 0],
-    domain: [0, Math.max(...data.map(y))],
-    nice: true,
-  });
-
-  // Compose together the scale and accessor functions to get point functions
-  const compose = (scale: any, accessor: any) => (d: ListenReportItem) =>
-    scale(accessor(d));
-  const xPoint = compose(xScaleTime, x);
-  const yPoint = compose(yScale, y);
 
   return (
-    <svg width={width} height={height}>
+    <ResponsiveContainer width="90%" height={400}>
-      <GradientLightgreenGreen
+      <AreaChart
-        id="linear"
+        data={dataLocal}
-        vertical={false}
+        margin={{
-        fromOpacity={0.8}
+          top: 5,
-        toOpacity={0.8}
+          right: 30,
-      />
+          left: 20,
-      <Grid
+          bottom: 5,
-        top={margin.top}
+        }}
-        left={margin.left}
+      >
-        xScale={xScaleTime}
+        <defs>
-        yScale={yScale}
+          <linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
-        stroke="rgba(142, 32, 95, 0.9)"
+            <stop offset="5%" stopColor="#48bb78" stopOpacity={0.8} />
-        width={xMax}
+            <stop offset="90%" stopColor="#48bb78" stopOpacity={0.1} />
-        height={yMax}
+          </linearGradient>
-        numTicksRows={numTicksForHeight(height)}
+        </defs>
-        numTicksColumns={numTicksForWidth(width)}
+        <CartesianGrid vertical={false} />
-      />
+        <XAxis
-      <Group top={margin.top} left={margin.left}>
+          scale="time"
+          type="number"
+          domain={["auto", "auto"]}
+          dataKey="date"
+          tickFormatter={(date) => format(date, "P")}
+        />
+        <YAxis />
+        <Tooltip separator=": " formatter={(value) => [value, "Listens"]} />
         <Area
-          data={data}
+          type="monotone"
-          x={(d) => xScaleTime(x(d))}
+          dataKey="count"
-          y0={(d) => yScale.range()[0]}
+          stroke="#48bb78"
-          y1={(d) => yScale(y(d))}
+          fillOpacity={1}
-          strokeWidth={2}
+          fill="url(#colorPv)"
-          stroke={"transparent"}
-          fill={"url(#linear)"}
-          curve={curveBasis}
         />
-        <LinePath
+      </AreaChart>
-          data={data}
+    </ResponsiveContainer>
-          x={(d) => xScaleTime(x(d))}
-          y={(d) => yScale(y(d))}
-          stroke={"url('#linear')"}
-          strokeWidth={2}
-          curve={curveBasis}
-        />
-      </Group>
-      <Group left={margin.left}>
-        <AxisLeft
-          top={margin.top}
-          left={0}
-          scale={yScale}
-          hideZero
-          numTicks={numTicksForHeight(height)}
-          label="Axis Left Label"
-          labelProps={{
-            fill: "#8e205f",
-            textAnchor: "middle",
-            fontSize: 12,
-          }}
-          stroke="#1b1a1e"
-          tickStroke="#8e205f"
-          tickLabelProps={(value, index) => ({
-            fill: "#8e205f",
-            textAnchor: "end",
-            fontSize: 10,
-            dx: "-0.25em",
-            dy: "0.25em",
-          })}
-          tickComponent={({ formattedValue, ...tickProps }) => (
-            <text {...tickProps}>{formattedValue}</text>
-          )}
-        />
-        />
-        <AxisBottom
-          top={height - margin.bottom}
-          left={0}
-          scale={xScaleTime}
-          numTicks={numTicksForWidth(width)}
-          label="Time"
-        >
-          {(axis) => {
-            const tickLabelSize = 10;
-            const tickRotate = 45;
-            const tickColor = "#8e205f";
-            const axisCenter = (axis.axisToPoint.x - axis.axisFromPoint.x) / 2;
-            return (
-              <g className="my-custom-bottom-axis">
-                {axis.ticks.map((tick, i) => {
-                  const tickX = tick.to.x;
-                  const tickY = tick.to.y + tickLabelSize + axis.tickLength;
-                  return (
-                    <Group
-                      key={`vx-tick-${tick.value}-${i}`}
-                      className={"vx-axis-tick"}
-                    >
-                      <Line from={tick.from} to={tick.to} stroke={tickColor} />
-                      <text
-                        transform={`translate(${tickX}, ${tickY}) rotate(${tickRotate})`}
-                        fontSize={tickLabelSize}
-                        textAnchor="middle"
-                        fill={tickColor}
-                      >
-                        {tick.formattedValue}
-                      </text>
-                    </Group>
-                  );
-                })}
-                <text
-                  textAnchor="middle"
-                  transform={`translate(${axisCenter}, 50)`}
-                  fontSize="8"
-                >
-                  {axis.label}
-                </text>
-              </g>
-            );
-          }}
-        </AxisBottom>
-      </Group>
-    </svg>
   );
 };