Merge pull request #387 from /issues/369/1

improved rendering data

.env.example → .env.local

@@ -1 +1 @@
-NEXT_PUBLIC_API_BASE_URL=https://webcompat-metrics.herokuapp.com/data
+NEXT_PUBLIC_API_BASE_URL=https://webcompat-metrics.herokuapp.com/data

README.md

@@ -40,6 +40,8 @@ npm run start
 
 You can create a `.env` file (or copy `.env.example`) and modify variables, make sure variables are all set.
 
+By default `.env.local` is loaded and injected through the [Next.js] configuration.
+
 ### Testing
 
 For testing DOM, React components, and other JavaScript, we use [Jest], [Enzyme] and [Sinon.JS].

src/components/BarChart/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Bar, Chart } from "react-chartjs-2";
+import { Bar } from "react-chartjs-2";
 
 import {
   propTypes,
@@ -8,47 +8,14 @@ import {
 } from "../../propTypes/ChartPropTypes.js";
 import { Container } from "../Chart";
 
-const pluginLabel = {
-  afterDraw: (chart) => {
-    const ctx = chart.ctx;
-    chart.data.datasets.forEach((dataset, i) => {
-      const meta = chart.getDatasetMeta(i);
-      if (!meta.hidden) {
-        meta.data.forEach((element, index) => {
-          // Draw the text in black, with the specified font
-          ctx.fillStyle = "rgb(0, 0, 0)";
-          const fontSize = "16";
-          const fontStyle = "normal";
-          const fontFamily =
-            "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', sans-serif";
-          ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
-          // Just naively convert to string for now
-          const dataString = dataset.data[index].toString();
-          // Make sure alignment settings are correct
-          ctx.textAlign = "center";
-          ctx.textBaseline = "middle";
-          const padding = 15;
-          const position = element.tooltipPosition();
-          ctx.fillText(dataString, position.x, position.y + padding);
-        });
-      }
-    });
-  },
-};
-
 const BarChart = (props) => {
   const data = {
     ...hydrateData(props),
   };
 
   return (
     <Container title={props.title} subtitle={props.subtitle}>
-      <Bar
-        data={data}
-        options={props.options}
-        legend={props.legend}
-        plugins={[pluginLabel]}
-      />
+      <Bar data={data} options={props.options} legend={props.legend} />
     </Container>
   );
 };

src/containers/WeeklyReports/index.js

@@ -8,14 +8,15 @@ import dayjs from "dayjs";
 import BarChart from "../../components/BarChart";
 import MetricsTemplate from "../MetricsTemplate";
 import { ObjectNested } from "../../libraries";
-import { mostAndLeast, normalize } from "../../modules/Chart";
+import { mostAndLeast } from "../../modules/Chart";
+import { weeklyReportsParse } from "../../modules/WeeklyReports";
 import Router from "../../routes";
 
 const handleData = (data) => {
   const localData = ObjectNested.get(data, "timeline", {});
   return {
     globalStats: mostAndLeast(localData),
-    chart: normalize(localData, "newIssues"),
+    chart: weeklyReportsParse(localData, "newIssues"),
   };
 };
 
@@ -35,23 +36,34 @@ const WeeklyReports = () => {
           title={"Issues Reported per Week"}
           fill={true}
           label={""}
-          labels={ObjectNested.get(data, "chart.dates", [])}
+          labels={ObjectNested.get(data, "chart.labels", [])}
           legend={{ display: false }}
           data={ObjectNested.get(data, "chart.newIssues", [])}
           options={{
-            tooltips: {
-              enabled: false,
+            parsing: {
+              xAxisKey: "timestamp",
+              yAxisKey: "count",
+            },
+            layout: {
+              padding: {
+                left: 20,
+                right: 20,
+                top: 20,
+              },
             },
             scales: {
               xAxes: [
                 {
-                  type: "time",
-                  distribution: "series",
-                  time: {
-                    unit: "week",
-                    isoWeekday: true,
+                  grid: {
+                    display: false,
+                  },
+                },
+              ],
+              yAxes: [
+                {
+                  ticks: {
+                    beginAtZero: true,
                   },
-                  stacked: true,
                 },
               ],
             },

src/modules/WeeklyReports/index.js

@@ -0,0 +1,5 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+export { default as weeklyReportsParse } from "./parse";

src/modules/WeeklyReports/parse.js

@@ -0,0 +1,43 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import dayjs from "dayjs";
+
+import { isEmptyObject } from "../../libraries";
+
+/**
+ * Normalize data relay on API and CHART
+ * @param {object} data
+ * @param {string} key
+ * @return {object}
+ */
+export default function parse(data = {}, key = null) {
+  if (isEmptyObject(data)) {
+    return {};
+  }
+  /* key */
+  if ("string" !== typeof key) {
+    throw new Error("Specify a string key.");
+  }
+
+  return Object.keys(data).reduce(
+    (accumulator, currentValue) => {
+      const stat = data[currentValue];
+      accumulator[key].push(stat.count);
+      accumulator.dates.push(new Date(stat.timestamp));
+      const endDate = stat.timestamp;
+      accumulator.labels.push(
+        `${dayjs(endDate).format("MMMM D, YYYY")} - ${dayjs(endDate)
+          .add(6, "day")
+          .format("MMMM D, YYYY")}`,
+      );
+      return accumulator;
+    },
+    {
+      [key]: [],
+      dates: [],
+      labels: [],
+    },
+  );
+}