From 51163455f022e7eedc4c3447f8ec93991b3ffc13 Mon Sep 17 00:00:00 2001 From: magsout Date: Tue, 4 May 2021 21:07:43 +0200 Subject: [PATCH 1/3] Issue #369 - improved rendering data --- src/containers/WeeklyReports/index.js | 32 ++++++++++++-------- src/modules/WeeklyReports/index.js | 5 ++++ src/modules/WeeklyReports/parse.js | 43 +++++++++++++++++++++++++++ 3 files changed, 67 insertions(+), 13 deletions(-) create mode 100644 src/modules/WeeklyReports/index.js create mode 100644 src/modules/WeeklyReports/parse.js diff --git a/src/containers/WeeklyReports/index.js b/src/containers/WeeklyReports/index.js index 50ac7880..753ee68c 100644 --- a/src/containers/WeeklyReports/index.js +++ b/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,25 +36,30 @@ 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, - }, - stacked: true, + x: { + grid: { + display: false, }, - ], + }, }, }} /> diff --git a/src/modules/WeeklyReports/index.js b/src/modules/WeeklyReports/index.js new file mode 100644 index 00000000..91569cb9 --- /dev/null +++ b/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"; diff --git a/src/modules/WeeklyReports/parse.js b/src/modules/WeeklyReports/parse.js new file mode 100644 index 00000000..182bb89d --- /dev/null +++ b/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: [], + }, + ); +} From 67c3bbb4d30ef28f97ce5e84e7516bf7719c683c Mon Sep 17 00:00:00 2001 From: magsout Date: Tue, 4 May 2021 21:10:21 +0200 Subject: [PATCH 2/3] fixed default env configuration --- .env.example => .env.local | 2 +- README.md | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) rename .env.example => .env.local (91%) diff --git a/.env.example b/.env.local similarity index 91% rename from .env.example rename to .env.local index cd6459a7..452891de 100644 --- a/.env.example +++ b/.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 \ No newline at end of file diff --git a/README.md b/README.md index 85b4e83c..7d2f1c5f 100644 --- a/README.md +++ b/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]. From 35f925ebd47261a111c8a5b65b801b48d1232661 Mon Sep 17 00:00:00 2001 From: magsout Date: Wed, 5 May 2021 08:08:16 +0200 Subject: [PATCH 3/3] Issue #369 - improved rendering - removed number - begins at 0 --- src/components/BarChart/index.js | 37 ++------------------------- src/containers/WeeklyReports/index.js | 20 ++++++++++----- 2 files changed, 15 insertions(+), 42 deletions(-) diff --git a/src/components/BarChart/index.js b/src/components/BarChart/index.js index 9ab30746..63e8666b 100644 --- a/src/components/BarChart/index.js +++ b/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,34 +8,6 @@ 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), @@ -43,12 +15,7 @@ const BarChart = (props) => { return ( - + ); }; diff --git a/src/containers/WeeklyReports/index.js b/src/containers/WeeklyReports/index.js index 753ee68c..ac232a14 100644 --- a/src/containers/WeeklyReports/index.js +++ b/src/containers/WeeklyReports/index.js @@ -40,9 +40,6 @@ const WeeklyReports = () => { legend={{ display: false }} data={ObjectNested.get(data, "chart.newIssues", [])} options={{ - tooltips: { - enabled: false, - }, parsing: { xAxisKey: "timestamp", yAxisKey: "count", @@ -55,11 +52,20 @@ const WeeklyReports = () => { }, }, scales: { - x: { - grid: { - display: false, + xAxes: [ + { + grid: { + display: false, + }, }, - }, + ], + yAxes: [ + { + ticks: { + beginAtZero: true, + }, + }, + ], }, }} />