Dashboard statistics improvements [requires circulation #993] (#82)

* Provide additional statistics and slightly reorganize the dashboard.

* Factor individual dashboard stat into a component and introduce tooltip.

* Use custom hook and fix tests.

* Rename some inventory statistics properties.

package.json

@@ -20,6 +20,7 @@
     "test-js-list": "mocha --require lib/testHelper.js lib/__tests__/*.js lib/**/__tests__/*.js lib/**/**/__tests__/*.js --reporter ./testReporter.js",
     "test-ts": "npm run lint && mocha -r ts-node/register --require src/testHelper.ts src/__tests__/*.ts* src/**/__tests__/*.ts* src/**/**/__tests__/*.ts*",
     "test-file-ts": "npm run lint && mocha -r ts-node/register --require src/testHelper.ts",
+    "test-file-ts-nolint": "mocha -r ts-node/register --require src/testHelper.ts",
     "test": "npm run test-ts && npm run test-jest",
     "test-file": "npm run test-file-ts",
     "test-browser": "npm run test-chrome && npm run test-firefox",
@@ -57,7 +58,7 @@
     "react-dom": "^16.8.6",
     "react-redux": "^7.1.0",
     "react-router": "^3.2.0",
-    "recharts": "^1.0.1",
+    "recharts": "^1.8.6",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",
     "request": "^2.85.0",
@@ -76,6 +77,7 @@
     "@types/react": "^16.14.6",
     "@types/react-dom": "^16.9.8",
     "@types/react-redux": "^7.1.16",
+    "@types/redux-mock-store": "^1.0.3",
     "@typescript-eslint/eslint-plugin": "^5.46.0",
     "@typescript-eslint/parser": "^5.46.0",
     "chai": "4.2.0",
@@ -107,6 +109,7 @@
     "node-sass": "^8.0.0",
     "prettier": "2.1.2",
     "react-axe": "^3.3.0",
+    "redux-mock-store": "^1.5.4",
     "sass-lint": "^1.13.1",
     "sass-loader": "^13.2.0",
     "selenium-standalone": "^6.16.0",

src/__tests__/actions-test.ts

@@ -544,23 +544,23 @@ describe("actions", () => {
   describe("fetchStats", () => {
     it("dispatches request, load, and success", async () => {
       const dispatch = stub();
-      const statsData = "stats";
+      const statisticsApiResponseData = "stats";
       fetcher.testData = {
         ok: true,
         status: 200,
         json: () =>
           new Promise<any>((resolve, reject) => {
-            resolve(statsData);
+            resolve(statisticsApiResponseData);
           }),
       };
       fetcher.resolve = true;
 
-      const data = await actions.fetchStats()(dispatch);
+      const data = await actions.fetchStatistics()(dispatch);
       expect(dispatch.callCount).to.equal(3);
       expect(dispatch.args[0][0].type).to.equal(ActionCreator.STATS_REQUEST);
       expect(dispatch.args[1][0].type).to.equal(ActionCreator.STATS_SUCCESS);
       expect(dispatch.args[2][0].type).to.equal(ActionCreator.STATS_LOAD);
-      expect(data).to.deep.equal(statsData);
+      expect(data).to.deep.equal(statisticsApiResponseData);
     });
   });
 

src/actions.ts

@@ -5,7 +5,6 @@ import {
   GenreTree,
   ClassificationData,
   CirculationEventData,
-  StatsData,
   LibrariesData,
   CollectionsData,
   IndividualAdminsData,
@@ -31,6 +30,7 @@ import {
   DiagnosticsData,
   FeatureFlags,
   SitewideAnnouncementsData,
+  StatisticsData,
 } from "./interfaces";
 import { CollectionData } from "@thepalaceproject/web-opds-client/lib/interfaces";
 import DataFetcher from "@thepalaceproject/web-opds-client/lib/DataFetcher";
@@ -463,9 +463,9 @@ export default class ActionCreator extends BaseActionCreator {
     ).bind(this);
   }
 
-  fetchStats() {
+  fetchStatistics() {
     const url = "/admin/stats";
-    return this.fetchJSON<StatsData>(ActionCreator.STATS, url).bind(this);
+    return this.fetchJSON<StatisticsData>(ActionCreator.STATS, url).bind(this);
   }
 
   fetchLibraries() {

src/components/DashboardPage.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { Store } from "redux";
+import { RootState } from "../store";
 import * as PropTypes from "prop-types";
 import Header from "./Header";
 import Footer from "./Footer";
 import Stats from "./Stats";
 import CirculationEvents from "./CirculationEvents";
-import { RootState } from "../store";
 import title from "../utils/title";
 
 export interface DashboardPageProps extends React.Props<DashboardPageProps> {
@@ -27,7 +27,7 @@ export default class DashboardPage extends React.Component<DashboardPageProps> {
     editorStore: PropTypes.object.isRequired as React.Validator<Store>,
   };
 
-  static childContextTypes: React.ValidationMap<any> = {
+  static childContextTypes: React.ValidationMap<object> = {
     library: PropTypes.func,
   };
 
@@ -43,7 +43,7 @@ export default class DashboardPage extends React.Component<DashboardPageProps> {
       <div className="dashboard">
         <Header />
         <main className="body">
-          <Stats store={this.context.editorStore} library={library} />
+          <Stats library={library} />
           <CirculationEvents
             store={this.context.editorStore}
             library={library}