feat(frontend): render simple listen report

frontend/package-lock.json

@@ -1933,11 +1933,47 @@
         "@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",
+      "integrity": "sha512-LtD8EaNYCaBRzHzaAiIPrfcL3DdIysc81dkGlQvv7WQP3+YXV7b0JJTtR1U3bzeRieS603KF4wUo+ZkJVenh8w==",
+      "requires": {
+        "@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",
@@ -2101,6 +2137,11 @@
       "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",
@@ -2422,6 +2463,126 @@
         }
       }
     },
+    "@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",
@@ -3934,6 +4095,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -4603,6 +4769,80 @@
         "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",
+      "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
+    },
+    "d3-color": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
+      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
+    },
+    "d3-format": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.4.tgz",
+      "integrity": "sha512-TWks25e7t8/cqctxCmxpUuzZN11QxIA7YrMbram94zMQ0PXjE4LVIMe/f6a4+xxL8HQ3OsAFULOINQi1pE62Aw=="
+    },
+    "d3-interpolate": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+      "requires": {
+        "d3-color": "1"
+      }
+    },
+    "d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "d3-scale": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
+      "integrity": "sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==",
+      "requires": {
+        "d3-array": "^1.2.0",
+        "d3-collection": "1",
+        "d3-format": "1",
+        "d3-interpolate": "1",
+        "d3-time": "1",
+        "d3-time-format": "2"
+      },
+      "dependencies": {
+        "d3-array": {
+          "version": "1.2.4",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
+          "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
+        }
+      }
+    },
+    "d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "requires": {
+        "d3-path": "1"
+      }
+    },
+    "d3-time": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
+      "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
+    },
+    "d3-time-format": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.2.3.tgz",
+      "integrity": "sha512-RAHNnD8+XvC4Zc4d2A56Uw0yJoM7bsvOlJR33bclxq399Rak/b9bhvu/InjxdWhPtkgU53JJcleJTGkNRnN6IA==",
+      "requires": {
+        "d3-time": "1"
+      }
+    },
     "damerau-levenshtein": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz",
@@ -9689,6 +9929,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "math-expression-evaluator": {
+      "version": "1.2.22",
+      "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.22.tgz",
+      "integrity": "sha512-L0j0tFVZBQQLeEjmWOvDLoRciIY8gQGWahvkztXUal8jH8R5Rlqo9GCvgqvXcy9LQhEWdQCVvzqAbxgYNt4blQ=="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -12922,6 +13167,14 @@
         }
       }
     },
+    "reduce-function-call": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/reduce-function-call/-/reduce-function-call-1.0.3.tgz",
+      "integrity": "sha512-Hl/tuV2VDgWgCSEeWMLwxLZqX7OK59eU1guxXsRKTAyeYimivsKdtcV4fu3r710tpG5GmDKDhQ0HSZLExnNmyQ==",
+      "requires": {
+        "balanced-match": "^1.0.0"
+      }
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",

frontend/package.json

@@ -12,12 +12,21 @@
     "@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",
+    "@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",

frontend/src/App.tsx

@@ -2,9 +2,10 @@ import React from "react";
 import { Route, Switch } from "react-router-dom";
 import { LoginFailure } from "./components/LoginFailure";
 import { NavBar } from "./components/NavBar";
+import { RecentListens } from "./components/RecentListens";
+import { ReportListens } from "./components/ReportListens";
 import { useAuth } from "./hooks/use-auth";
 import "./tailwind/generated.css";
-import { RecentListens } from "./components/RecentListens";
 
 export function App() {
   const { isLoaded } = useAuth();
@@ -22,6 +23,7 @@ export function App() {
         <Route path="/" exact />
         <Route path="/login/failure" exact component={LoginFailure} />
         <Route path="/listens" exact component={RecentListens} />
+        <Route path="/reports/listens" exact component={ReportListens} />
       </Switch>
     </div>
   );

frontend/src/api/api.ts

@@ -1,4 +1,7 @@
+import { formatISO, parseISO } from "date-fns";
 import { Listen } from "./entities/listen";
+import { ListenReportItem } from "./entities/listen-report-item";
+import { ListenReportOptions } from "./entities/listen-report-options";
 import { Pagination } from "./entities/pagination";
 import { PaginationOptions } from "./entities/pagination-options";
 import { User } from "./entities/user";
@@ -67,3 +70,33 @@ export const getRecentListens = async (
   console.log("getRecentListens", { listens });
   return listens;
 };
+
+export const getListensReport = async (
+  options: ListenReportOptions
+): Promise<ListenReportItem[]> => {
+  const { timeFrame, timeStart, timeEnd } = options;
+
+  const res = await fetch(
+    `/api/v1/reports/listens?timeFrame=${timeFrame}&timeStart=${formatISO(
+      timeStart
+    )}&timeEnd=${formatISO(timeEnd)}`,
+    {
+      headers: getDefaultHeaders(),
+    }
+  );
+
+  switch (res.status) {
+    case 200: {
+      break;
+    }
+    case 401: {
+      throw new UnauthenticatedError(`No token or token expired`);
+    }
+    default: {
+      throw new Error(`Unable to getRecentListens: ${res.status}`);
+    }
+  }
+
+  const rawItems: { count: number; date: string }[] = (await res.json()).items;
+  return rawItems.map(({ count, date }) => ({ count, date: parseISO(date) }));
+};

frontend/src/api/entities/listen-report-item.ts

@@ -0,0 +1,4 @@
+export interface ListenReportItem {
+  date: Date;
+  count: number;
+}

frontend/src/api/entities/listen-report-options.ts

@@ -0,0 +1,5 @@
+export interface ListenReportOptions {
+  timeFrame: "day" | "week" | "month" | "year";
+  timeStart: Date;
+  timeEnd: Date;
+}

frontend/src/components/NavBar.tsx

@@ -22,6 +22,9 @@ export const NavBar: React.FC = () => {
               <Link to="/listens">
                 <NavItem>Your Listens</NavItem>
               </Link>
+              <Link to="/reports/listens">
+                <NavItem>Listens Report</NavItem>
+              </Link>
             </>
           )}
         </div>

frontend/src/components/ReportListens.tsx

@@ -0,0 +1,252 @@
+import { AxisBottom, AxisLeft } from "@vx/axis";
+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 { getListensReport } from "../api/api";
+import { ListenReportItem } from "../api/entities/listen-report-item";
+import { ListenReportOptions } from "../api/entities/listen-report-options";
+import { useAuth } from "../hooks/use-auth";
+
+export const ReportListens: React.FC = () => {
+  const { user } = useAuth();
+
+  const [reportOptions, setReportOptions] = useState<ListenReportOptions>({
+    timeFrame: "day",
+    timeStart: new Date("2020-05-01"),
+    timeEnd: new Date(),
+  });
+  const [report, setReport] = useState<ListenReportItem[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    (async () => {
+      setIsLoading(true);
+
+      try {
+        const reportFromApi = await getListensReport(reportOptions);
+        setReport(reportFromApi);
+      } catch (err) {
+        console.error("Error while fetching recent listens:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    })();
+  }, [reportOptions, setReport, setIsLoading]);
+
+  if (!user) {
+    return <Redirect to="/" />;
+  }
+
+  return (
+    <div className="md:flex md:justify-center p-4">
+      <div className="md:flex-shrink-0 min-w-full xl:min-w-0 xl:w-2/3 max-w-screen-lg">
+        <div className="flex justify-between">
+          <p className="text-2xl font-normal text-gray-700">Listen Report</p>
+        </div>
+        <div>
+          {isLoading && (
+            <div>
+              <span>Loading Listens</span>
+            </div>
+          )}
+          {report.length === 0 && (
+            <div>
+              <p>Report is emtpy! :(</p>
+            </div>
+          )}
+          {report.length > 0 && (
+            <div className="table-auto my-2 w-full text-gray-700">
+              <ReportGraph options={reportOptions} data={report} />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ReportGraph: React.FC<{
+  options: ListenReportOptions;
+  data: ListenReportItem[];
+  width?: number;
+  height?: number;
+  margin?: {
+    top: number;
+    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}>
+      <GradientLightgreenGreen
+        id="linear"
+        vertical={false}
+        fromOpacity={0.8}
+        toOpacity={0.8}
+      />
+      <Grid
+        top={margin.top}
+        left={margin.left}
+        xScale={xScaleTime}
+        yScale={yScale}
+        stroke="rgba(142, 32, 95, 0.9)"
+        width={xMax}
+        height={yMax}
+        numTicksRows={numTicksForHeight(height)}
+        numTicksColumns={numTicksForWidth(width)}
+      />
+      <Group top={margin.top} left={margin.left}>
+        <Area
+          data={data}
+          x={(d) => xScaleTime(x(d))}
+          y0={(d) => yScale.range()[0]}
+          y1={(d) => yScale(y(d))}
+          strokeWidth={2}
+          stroke={"transparent"}
+          fill={"url(#linear)"}
+          curve={curveBasis}
+        />
+        <LinePath
+          data={data}
+          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>
+  );
+};