Merge branch 'release/v1.6.0'

OpenBookPublishers · Sep 7, 2022 · f879301 · f879301
2 parents f073e11 + 5625774
commit f879301
Show file tree

Hide file tree

Showing 21 changed files with 3,299 additions and 470 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,27 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    'jest/globals': true,
+  },
+  extends: [
+    'plugin:react/recommended',
+    'airbnb',
+  ],
+  overrides: [
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: [
+    'react',
+    'jest',
+  ],
+  rules: {
+    "indent": ["error", 4],
+    "react/jsx-indent": ["error", 4],
+    "react/jsx-indent-props": ["error", 4],
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+  },
+};
diff --git a/.github/workflows/build_test_and_check.yml b/.github/workflows/build_test_and_check.yml
@@ -0,0 +1,37 @@
+name: Build, test and lint
+on:
+  push:
+    branches:
+      - master
+      - develop
+  pull_request:
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16.x'
+      - run: yarn
+      - run: yarn dist
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16.x'
+      - run: yarn
+      - run: yarn test
+
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16.x'
+      - run: yarn
+      - run: yarn lint
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -10,9 +10,11 @@ jobs:
       # Setup .npmrc file to publish to npm
       - uses: actions/setup-node@v2
         with:
-          node-version: '12.x'
+          node-version: '16.x'
           registry-url: 'https://registry.npmjs.org'
       - run: yarn
+      - run: yarn test
+      - run: yarn lint
       - run: yarn dist
       - run: yarn publish
         env:

diff --git a/README.md b/README.md
@@ -1,5 +1,6 @@
 # Metrics Widget
 
+[![Build](https://github.com/OpenBookPublishers/metrics-widget/actions/workflows/build_test_and_check.yml/badge.svg)](https://github.com/OpenBookPublishers/metrics-widget/actions/workflows/build_test_and_check.yml)
 [![npm](https://img.shields.io/npm/v/metrics-widget.svg)](https://www.npmjs.com/package/metrics-widget)
 ![GitHub](https://img.shields.io/github/license/OpenBookPublishers/metrics-widget)
 

diff --git a/lib/continent-chart.js b/lib/continent-chart.js
@@ -1,18 +1,24 @@
-import React from "react";
-import { Chart as ChartJS, ArcElement, Title, Tooltip, Legend } from "chart.js";
-import { Doughnut } from "react-chartjs-2";
-import {backgroudColours, borderColours, compareNumbers, fallbackContent} from "./utils";
-import Spinner from "./spinner";
-import NoData from "./nodata";
-import { DownloadMenu } from "./download-menu";
+import React from 'react';
+import {
+    Chart as ChartJS, ArcElement, Title, Tooltip, Legend,
+} from 'chart.js';
+import { Doughnut } from 'react-chartjs-2';
+import PropTypes from 'prop-types';
+import urlPropType from 'url-prop-type';
+import doiPropType from 'doi-prop-type';
+import {
+    backgroudColours, borderColours, compareNumbers, fallbackContent,
+} from './utils';
+import Spinner from './spinner';
+import NoData from './nodata';
+import DownloadMenu from './download-menu';
 
 ChartJS.register(ArcElement, Title, Tooltip, Legend);
 
-export class ContinentsChart extends React.Component {
+export default class ContinentsChart extends React.Component {
     constructor(props) {
         super(props);
-        let params =
-            "events?aggregation=country_uri,measure_uri&filter=work_uri:info:doi:";
+        const params = 'events?aggregation=country_uri,measure_uri&filter=work_uri:info:doi:';
         this.url = new URL(`${params}${props.doi}`, props.apiEndpoint);
         this.state = {
             data: [],
@@ -34,71 +40,69 @@ export class ContinentsChart extends React.Component {
     render() {
         const { dataIsLoaded, data } = this.state;
         if (!dataIsLoaded) return <Spinner />;
-        if (data.length == 0) return <NoData />;
+        if (data.length === 0) return <NoData />;
 
-        const title = "Proportion of Usage by Continent";
+        const title = 'Proportion of Usage by Continent';
+        const { showTitle } = this.props;
 
         const continents = [
             ...new Set(
                 data
                     .map((country) => country.continent_code)
                     .filter((continent) => continent !== null)
-                    .flat()
+                    .flat(),
             ),
         ];
 
         const valuesPerContinent = continents.map((continent) => {
             let value = 0;
-            data.filter((country) => country.continent_code == continent).map(
-                (country) =>
-                    country.data.map(
-                        (countryData) => (value += countryData.value)
-                    )
+            data.filter((country) => country.continent_code === continent).map(
+                (country) => country.data.forEach((countryData) => {
+                    value += countryData.value;
+                }),
             );
             return {
-                continent: continent,
-                value: value,
+                continent,
+                value,
             };
         });
 
         // Sort from small to big with continents in place
         valuesPerContinent.sort(compareNumbers);
 
         // Get total for values
-        let totalValues = valuesPerContinent
+        const totalValues = valuesPerContinent
             .map((continent) => continent.value)
             .reduce((accumulator, currentValue) => accumulator + currentValue);
 
         // Get percentages
         // index needed or it will show undefined
-        let percentagesPerContinent = valuesPerContinent.map(
-            (continent, index) =>
-                `${Math.round((continent.value / totalValues) * 100)}%`
+        const percentagesPerContinent = valuesPerContinent.map(
+            (continent) => `${Math.round((continent.value / totalValues) * 100)}%`,
         );
 
         const continentNames = {
-            EU: "Europe",
-            AS: "Asia",
-            NA: "North America",
-            AF: "Africa",
-            SA: "South America",
-            OC: "Oceania",
-            AN: "Antarctica",
+            EU: 'Europe',
+            AS: 'Asia',
+            NA: 'North America',
+            AF: 'Africa',
+            SA: 'South America',
+            OC: 'Oceania',
+            AN: 'Antarctica',
         };
 
         const labels = valuesPerContinent.map(
-            (item, index) =>
-                `${continentNames[item.continent]} (${
-                    percentagesPerContinent[index]
-                })`
+            (item, index) => `${continentNames[item.continent]} (${
+                percentagesPerContinent[index]
+            })`,
         );
 
         const metrics = {
             labels,
             datasets: [
                 {
                     data: valuesPerContinent.map(
-                        (continent) => continent.value
+                        (continent) => continent.value,
                     ),
                     backgroundColor: backgroudColours,
                     borderColor: borderColours,
@@ -113,48 +117,46 @@ export class ContinentsChart extends React.Component {
             plugins: {
                 title: {
                     text: title,
-                    display: this.props.showTitle,
+                    display: showTitle,
                 },
                 tooltip: {
                     callbacks: {
                         label: (ttItem) => ttItem.label,
                     },
                 },
                 legend: {
-                    position: "left",
-                    align: "center",
+                    position: 'left',
+                    align: 'center',
                 },
             },
         };
 
         const csvData = data
             .map((item) => {
-                let obj = item.data.map((element) => {
-                    return {
-                        measure_uri: element.measure_uri,
-                        namespace: element.namespace,
-                        source: element.source,
-                        type: element.type,
-                        version: element.version,
-                        continent: item.continent_code,
-                        country: item.country_name,
-                        value: element.value,
-                    };
-                });
+                const obj = item.data.map((element) => ({
+                    measure_uri: element.measure_uri,
+                    namespace: element.namespace,
+                    source: element.source,
+                    type: element.type,
+                    version: element.version,
+                    continent: item.continent_code,
+                    country: item.country_name,
+                    value: element.value,
+                }));
                 return obj;
             })
             .flat();
 
         return (
-            <div className='h-full w-full relative'>
-                <div className='flex justify-end absolute right-0 -top-12'>
+            <div className="h-full w-full relative">
+                <div className="flex justify-end absolute right-0 -top-12">
                     <DownloadMenu
                         data={csvData}
-                        fileName='usage-by-continent'
+                        fileName="usage-by-continent"
                     />
                 </div>
                 <Doughnut
-                    id='canvas'
+                    id="canvas"
                     options={options}
                     data={metrics}
                     role="img"
@@ -165,3 +167,9 @@ export class ContinentsChart extends React.Component {
         );
     }
 }
+
+ContinentsChart.propTypes = {
+    apiEndpoint: urlPropType.isRequired,
+    doi: doiPropType.isRequired,
+    showTitle: PropTypes.bool.isRequired,
+};