Merge branch 'release/v1.7.0'

OpenBookPublishers · Sep 7, 2022 · 09ededb · 09ededb
2 parents f879301 + 0d4b62e
commit 09ededb
Show file tree

Hide file tree

Showing 14 changed files with 790 additions and 878 deletions.
diff --git a/lib/continent-chart.js b/lib/continent-chart.js
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import urlPropType from 'url-prop-type';
 import doiPropType from 'doi-prop-type';
 import {
-    backgroudColours, borderColours, compareNumbers, fallbackContent,
+    backgroundColours, borderColours, compareNumbers, fallbackContent,
 } from './utils';
 import Spinner from './spinner';
 import NoData from './nodata';
@@ -104,7 +104,7 @@ export default class ContinentsChart extends React.Component {
                     data: valuesPerContinent.map(
                         (continent) => continent.value,
                     ),
-                    backgroundColor: backgroudColours,
+                    backgroundColor: backgroundColours,
                     borderColor: borderColours,
                     borderWidth: 1,
                 },

diff --git a/lib/country-chart.js b/lib/country-chart.js
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import urlPropType from 'url-prop-type';
 import doiPropType from 'doi-prop-type';
 import {
-    backgroudColours, borderColours, compareNumbers, fallbackContent,
+    backgroundColours, borderColours, compareNumbers, fallbackContent,
 } from './utils';
 import Spinner from './spinner';
 import NoData from './nodata';
@@ -110,7 +110,7 @@ export default class CountryChart extends React.Component {
             datasets: [
                 {
                     data: top10Values.map((country) => country.value),
-                    backgroundColor: backgroudColours,
+                    backgroundColor: backgroundColours,
                     borderColor: borderColours,
                     borderWidth: 1,
                 },

diff --git a/lib/download-csv.js b/lib/download-csv.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import CsvDownload from 'react-json-to-csv';
-import { DocumentIcon } from '@heroicons/react/outline';
+import { DocumentIcon } from '@heroicons/react/24/outline';
 import PropTypes from 'prop-types';
 import { metricsDataPropType } from './utils';
 

diff --git a/lib/download-menu.js b/lib/download-menu.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Menu } from '@headlessui/react';
-import { DotsVerticalIcon } from '@heroicons/react/outline';
+import { EllipsisVerticalIcon } from '@heroicons/react/24/outline';
 import PropTypes from 'prop-types';
 import DownloadPNG from './download-png';
 import DownloadCSV from './download-csv';
@@ -19,7 +19,7 @@ export default function DownloadMenu(props) {
                     role="button"
                     aria-label="Download"
                 >
-                    <DotsVerticalIcon className="w-5 h-5" aria-label="Download" />
+                    <EllipsisVerticalIcon className="w-5 h-5" aria-label="Download" />
                 </Menu.Button>
             </div>
             <Menu.Items className="absolute right-0 w-56 mt-2 p-1 text-sm origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">

diff --git a/lib/download-png.js b/lib/download-png.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { saveAs } from 'file-saver';
-import { PhotographIcon } from '@heroicons/react/outline';
+import { PhotoIcon } from '@heroicons/react/24/outline';
 import PropTypes from 'prop-types';
 
 export default class DownloadPNG extends React.Component {
@@ -30,7 +30,7 @@ export default class DownloadPNG extends React.Component {
                 className="group flex rounded-md items-center w-full px-2 py-2 text-sm"
                 type="button"
             >
-                <PhotographIcon className="h-6 w-6 mr-2" aria-hidden />
+                <PhotoIcon className="h-6 w-6 mr-2" aria-hidden />
                 Download Image
             </button>
         );

diff --git a/lib/geo-chart.js b/lib/geo-chart.js
@@ -1,9 +1,11 @@
-import React, { Component } from 'react';
+import React, { Component, Suspense } from 'react';
 import { Switch } from '@headlessui/react';
 import urlPropType from 'url-prop-type';
 import doiPropType from 'doi-prop-type';
-import ContinentsChart from './continent-chart';
-import CountryChart from './country-chart';
+import Spinner from './spinner';
+
+const ContinentsChart = React.lazy(() => import('./continent-chart'));
+const CountryChart = React.lazy(() => import('./country-chart'));
 
 export default class GeoChart extends Component {
     constructor(props) {
@@ -62,20 +64,22 @@ export default class GeoChart extends Component {
                     </Switch>
                 </div>
                 <div className="h-5/6">
-                    {tab === 'continent' && (
-                        <ContinentsChart
-                            apiEndpoint={apiEndpoint}
-                            doi={doi}
-                            showTitle={false}
-                        />
-                    )}
-                    {tab === 'country' && (
-                        <CountryChart
-                            apiEndpoint={apiEndpoint}
-                            doi={doi}
-                            showTitle={false}
-                        />
-                    )}
+                    <Suspense fallback={Spinner}>
+                        {tab === 'continent' && (
+                            <ContinentsChart
+                                apiEndpoint={apiEndpoint}
+                                doi={doi}
+                                showTitle={false}
+                            />
+                        )}
+                        {tab === 'country' && (
+                            <CountryChart
+                                apiEndpoint={apiEndpoint}
+                                doi={doi}
+                                showTitle={false}
+                            />
+                        )}
+                    </Suspense>
                 </div>
             </div>
         );

diff --git a/lib/information.js b/lib/information.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Disclosure } from '@headlessui/react';
-import { ChevronUpIcon } from '@heroicons/react/solid';
+import { ChevronUpIcon } from '@heroicons/react/24/solid';
 import urlPropType from 'url-prop-type';
 import doiPropType from 'doi-prop-type';
 import dompurify from 'dompurify';

diff --git a/lib/measures-graph.js b/lib/measures-graph.js
@@ -12,7 +12,7 @@ import {
 import urlPropType from 'url-prop-type';
 import doiPropType from 'doi-prop-type';
 import {
-    backgroudColours, borderColours, fallbackContent, formatLabel,
+    backgroundColours, borderColours, fallbackContent, formatLabel,
 } from './utils';
 import DownloadMenu from './download-menu';
 
@@ -84,7 +84,7 @@ export default class MeasuresGraph extends React.Component {
             datasets: [
                 {
                     data: data.map((element) => `${element.value}`),
-                    backgroundColor: backgroudColours,
+                    backgroundColor: backgroundColours,
                     borderColor: borderColours,
                     borderWidth: 1,
                 },

diff --git a/lib/nodata.js b/lib/nodata.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ExclamationCircleIcon } from '@heroicons/react/outline';
+import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
 
 export default function NoData() {
     return (

diff --git a/lib/timeline-chart.js b/lib/timeline-chart.js
@@ -13,7 +13,7 @@ import {
 import urlPropType from 'url-prop-type';
 import doiPropType from 'doi-prop-type';
 import {
-    backgroudColours, borderColours, fallbackContent, formatLabel,
+    backgroundColours, borderColours, fallbackContent, formatLabel,
 } from './utils';
 import DownloadMenu from './download-menu';
 
@@ -89,7 +89,7 @@ export default class TimelineChart extends React.Component {
         let colourNumber = -1; // Use as an index to set colours for each dataset.
 
         const datasets = data.map((measure) => {
-            if (colourNumber < backgroudColours.length - 1) {
+            if (colourNumber < backgroundColours.length - 1) {
                 // Only check bg colour as border and bg has same number of elements
                 colourNumber += 1;
             } else {
@@ -106,7 +106,7 @@ export default class TimelineChart extends React.Component {
             return {
                 label: formatLabel(measure),
                 data: measureData,
-                backgroundColor: backgroudColours[colourNumber],
+                backgroundColor: backgroundColours[colourNumber],
                 borderColor: borderColours[colourNumber],
                 borderWidth: 2,
             };

diff --git a/lib/utils.js b/lib/utils.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import urlPropType from 'url-prop-type';
 
 // colour blind friendly colour scheme
-export const backgroudColours = [
+export const backgroundColours = [
     'rgba(17, 112, 170, 0.7)',
     'rgba(252, 125, 11, 0.7)',
     'rgba(163, 172, 185, 0.7)',

diff --git a/lib/widget.js b/lib/widget.js
@@ -1,18 +1,20 @@
-import React, { Component } from 'react';
+import React, { Component, Suspense } from 'react';
 import urlPropType from 'url-prop-type';
 import doiPropType from 'doi-prop-type';
 
 import {
     ChartBarIcon,
-    DocumentReportIcon,
-    GlobeIcon,
+    DocumentChartBarIcon,
+    GlobeEuropeAfricaIcon,
     InformationCircleIcon,
-    TrendingUpIcon,
-} from '@heroicons/react/outline';
-import MeasuresGraph from './measures-graph';
-import TimelineChart from './timeline-chart';
-import GeoChart from './geo-chart';
-import Information from './information';
+    ArrowTrendingUpIcon,
+} from '@heroicons/react/24/outline';
+import Spinner from './spinner';
+
+const MeasuresGraph = React.lazy(() => import('./measures-graph'));
+const TimelineChart = React.lazy(() => import('./timeline-chart'));
+const GeoChart = React.lazy(() => import('./geo-chart'));
+const Information = React.lazy(() => import('./information'));
 
 export default class MetricsWidget extends Component {
     constructor(props) {
@@ -71,30 +73,32 @@ export default class MetricsWidget extends Component {
                     </span>
                 </div>
                 <div className="p-2 h-96 w-full border-gray-200 dark:border-gray-400 border-t-2 border-b-2">
-                    {tab === 'measures' && (
-                        <MeasuresGraph
-                            apiEndpoint={apiEndpoint}
-                            doi={doi}
-                        />
-                    )}
-                    {tab === 'time' && (
-                        <TimelineChart
-                            apiEndpoint={apiEndpoint}
-                            doi={doi}
-                        />
-                    )}
-                    {tab === 'geo' && (
-                        <GeoChart
-                            apiEndpoint={apiEndpoint}
-                            doi={doi}
-                        />
-                    )}
-                    {tab === 'info' && (
-                        <Information
-                            apiEndpoint={apiEndpoint}
-                            doi={doi}
-                        />
-                    )}
+                    <Suspense fallback={Spinner}>
+                        {tab === 'measures' && (
+                            <MeasuresGraph
+                                apiEndpoint={apiEndpoint}
+                                doi={doi}
+                            />
+                        )}
+                        {tab === 'time' && (
+                            <TimelineChart
+                                apiEndpoint={apiEndpoint}
+                                doi={doi}
+                            />
+                        )}
+                        {tab === 'geo' && (
+                            <GeoChart
+                                apiEndpoint={apiEndpoint}
+                                doi={doi}
+                            />
+                        )}
+                        {tab === 'info' && (
+                            <Information
+                                apiEndpoint={apiEndpoint}
+                                doi={doi}
+                            />
+                        )}
+                    </Suspense>
                 </div>
                 <div className="flex bg-white dark:bg-gray-700">
                     <div className="flex-1 group">
@@ -137,7 +141,7 @@ export default class MetricsWidget extends Component {
                               group-hover:border-blue-600 dark:group-hover:border-blue-300`}
                         >
                             <span className="block px-1">
-                                <TrendingUpIcon
+                                <ArrowTrendingUpIcon
                                     className="h-8 w-8 lg:h-6 lg:w-6 pt-1 mb-1 mx-auto block"
                                     aria-label="Timeline"
                                 />
@@ -162,7 +166,7 @@ export default class MetricsWidget extends Component {
                               group-hover:border-blue-600 dark:group-hover:border-blue-300`}
                         >
                             <span className="block px-1">
-                                <GlobeIcon
+                                <GlobeEuropeAfricaIcon
                                     className="h-8 w-8 lg:h-6 lg:w-6 pt-1 mb-1 mx-auto block"
                                     aria-label="Geographical"
                                 />
@@ -208,7 +212,7 @@ export default class MetricsWidget extends Component {
                                            group-hover:border-blue-600 dark:group-hover:border-blue-300"
                             >
                                 <span className="block px-1">
-                                    <DocumentReportIcon
+                                    <DocumentChartBarIcon
                                         className="h-8 w-8 lg:h-6 lg:w-6 pt-1 mb-1 mx-auto block"
                                         aria-label="Full Report"
                                     />

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "metrics-widget",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Display book usage metrics",
   "main": "./dist/index.js",
   "scripts": {
@@ -29,14 +29,14 @@
   },
   "homepage": "https://github.com/OpenBookPublishers/metrics-widget#readme",
   "devDependencies": {
-    "@babel/cli": "^7.16.0",
-    "@babel/core": "^7.16.0",
+    "@babel/cli": "^7.18.10",
+    "@babel/core": "^7.19.0",
     "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.16.4",
-    "@babel/preset-react": "^7.16.0",
-    "autoprefixer": "^10.4.0",
-    "babel-loader": "^8.2.3",
-    "css-loader": "^6.5.1",
+    "@babel/preset-env": "^7.19.0",
+    "@babel/preset-react": "^7.18.6",
+    "autoprefixer": "^10.4.8",
+    "babel-loader": "^8.2.5",
+    "css-loader": "^6.7.1",
     "eslint": "^7.32.0 || ^8.2.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.25.3",
@@ -45,29 +45,29 @@
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "jest": "^29.0.2",
-    "mini-css-extract-plugin": "^2.4.5",
-    "postcss": "^8.4.13",
-    "postcss-loader": "^6.2.1",
+    "mini-css-extract-plugin": "^2.6.1",
+    "postcss": "^8.4.16",
+    "postcss-loader": "^7.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "style-loader": "^3.3.1",
-    "tailwindcss": "^3.0.24",
+    "tailwindcss": "^3.1.8",
     "webpack": "^5.74.0",
-    "webpack-cli": "^4.9.1"
+    "webpack-cli": "^4.10.0"
   },
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "dependencies": {
-    "@headlessui/react": "^1.4.2",
-    "@heroicons/react": "^1.0.5",
-    "chart.js": "^3.6.2",
+    "@headlessui/react": "^1.7.0",
+    "@heroicons/react": "^2.0.10",
+    "chart.js": "^3.9.1",
     "doi-prop-type": "^1.1.0",
     "dompurify": "^2.4.0",
     "file-saver": "^2.0.5",
     "prop-types": "^15.8.1",
-    "react-chartjs-2": "^4.0.0",
+    "react-chartjs-2": "^4.3.1",
     "react-json-to-csv": "^1.0.4",
     "spinners-react": "^1.0.7",
     "url-prop-type": "^1.2.4"