Upgrade Recharts. (PP-1531)

package.json

@@ -60,7 +60,7 @@
     "react-dom": "^16.8.6",
     "react-redux": "^7.2.9",
     "react-router": "^3.2.0",
-    "recharts": "^1.8.6",
+    "recharts": "^2.12.7",
     "redux": "^4.2.1",
     "redux-thunk": "^2.4.2",
     "request": "^2.85.0",
@@ -119,6 +119,7 @@
     "react-axe": "^3.3.0",
     "react-test-renderer": "^16.14.0",
     "redux-mock-store": "^1.5.4",
+    "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.64.2",
     "sass-lint": "^1.13.1",
     "sass-loader": "^13.2.0",

src/components/ContextProvider.tsx

@@ -2,15 +2,19 @@ import * as React from "react";
 import { Store } from "@reduxjs/toolkit";
 import * as PropTypes from "prop-types";
 import buildStore, { RootState } from "../store";
-import { FeatureFlags, PathFor } from "../interfaces";
+import {
+  DashboardCollectionsBarChart,
+  FeatureFlags,
+  PathFor,
+} from "../interfaces";
 import Admin from "../models/Admin";
 import PathForProvider from "@thepalaceproject/web-opds-client/lib/components/context/PathForContext";
 import ActionCreator from "../actions";
 import AppContextProvider, { AppContextType } from "../context/appContext";
 
 // Note: Not all elements of these props make it into the `ContextProvider`.
 //  Some are exposed only through the `AppContextProvider` component (which
-//  this component wraps.
+//  this component wraps).
 // TODO: We should get this interface to the point where we can just extend
 //  the `ConfigurationSettings` interface.
 export interface ContextProviderProps extends React.Props<ContextProvider> {
@@ -25,6 +29,7 @@ export interface ContextProviderProps extends React.Props<ContextProvider> {
   }[];
   featureFlags: FeatureFlags;
   quicksightPagePath?: string;
+  dashboardCollectionsBarChart?: DashboardCollectionsBarChart;
 }
 
 /** Provides a redux store, configuration options, and a function to create URLs
@@ -109,6 +114,7 @@ export default class ContextProvider extends React.Component<
       admin: this.admin,
       featureFlags: this.props.featureFlags,
       quicksightPagePath: this.props.quicksightPagePath,
+      dashboardCollectionsBarChart: this.props.dashboardCollectionsBarChart,
     };
     return (
       <PathForProvider pathFor={this.pathFor}>

src/components/LibraryStats.tsx

@@ -31,7 +31,7 @@ export const inventoryKeyToLabelMap = {
 export const ALL_LIBRARIES_HEADING = "Dashboard for All Authorized Libraries";
 
 /** Displays statistics about patrons, licenses, and collections from the server,
- for a single library or all libraries the admin has access to. */
+ for a single library or all libraries to which the admin has access. */
 const LibraryStats = ({ stats, library }: LibraryStatsProps) => {
   const {
     name: libraryName,

src/components/StatsCollectionsBarChart.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
+import { useDashboardCollectionsBarChartSettings } from "../context/appContext";
 import { CollectionInventory } from "../interfaces";
+import { ValueType } from "recharts/types/component/DefaultTooltipContent";
 import {
   Bar,
   BarChart,
@@ -12,6 +14,17 @@ import {
 import { inventoryKeyToLabelMap } from "./LibraryStats";
 import { formatNumber } from "../utils/sharedFunctions";
 
+const stackId = "collections";
+const barSize = 50;
+const meteredColor = "#606060";
+const unlimitedColor = "#404040";
+const openAccessColor = "#202020";
+
+type Props = {
+  collections: CollectionInventory[];
+  ResponsiveContainer?: any;
+};
+
 const StatsCollectionsBarChart = ({ collections }: Props) => {
   const chartItems = collections
     ?.map(({ name, inventory, inventoryByMedium }) => ({
@@ -20,46 +33,49 @@ const StatsCollectionsBarChart = ({ collections }: Props) => {
       _by_medium: inventoryByMedium || {},
     }))
     .sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1));
+  const chartWidth = useDashboardCollectionsBarChartSettings()?.width || "100%";
 
   return (
-    <ResponsiveContainer height={chartItems.length * 100 + 75} width="100%">
+    <ResponsiveContainer
+      height={chartItems.length * 100 + 75}
+      width={chartWidth}
+    >
       <BarChart
         data={chartItems}
         layout="vertical"
-        margin={{ top: 5, right: 30, left: 0, bottom: 50 }}
+        margin={{ top: 5, right: 30, left: 10, bottom: 50 }}
       >
         <YAxis
           type="category"
           dataKey="name"
           interval={0}
-          angle={-45}
-          tick={{ dx: -20 }}
+          tick={{ dx: -5 }}
           padding={{ top: 0, bottom: 0 }}
           height={175}
           width={125}
         />
         <XAxis type="number" />
         <Tooltip content={<CustomTooltip />} />
         <Bar
-          stackId="collections"
+          stackId={stackId}
           name={inventoryKeyToLabelMap.meteredLicenseTitles}
           dataKey={"meteredLicenseTitles"}
-          barSize={50}
-          fill="#606060"
+          barSize={barSize}
+          fill={meteredColor}
         />
         <Bar
-          stackId="collections"
+          stackId={stackId}
           name={inventoryKeyToLabelMap.unlimitedLicenseTitles}
           dataKey={"unlimitedLicenseTitles"}
-          barSize={50}
-          fill="#404040"
+          barSize={barSize}
+          fill={unlimitedColor}
         />
         <Bar
-          stackId="collections"
+          stackId={stackId}
           name={inventoryKeyToLabelMap.openAccessTitles}
           dataKey={"openAccessTitles"}
-          barSize={50}
-          fill="#202020"
+          barSize={barSize}
+          fill={openAccessColor}
         />
       </BarChart>
     </ResponsiveContainer>
@@ -76,15 +92,12 @@ type chartTooltipData = {
   perMedium?: OneLevelStatistics;
 };
 
-type Props = {
-  collections: CollectionInventory[];
-};
 /* Customize the Rechart tooltip to provide additional information */
 export const CustomTooltip = ({
   active,
   payload,
   label: collectionName,
-}: TooltipProps) => {
+}: TooltipProps<ValueType, string>) => {
   if (!active) {
     return null;
   }

src/components/StatsUsageReportsGroup.tsx

@@ -1,10 +1,8 @@
 import React = require("react");
 import { Button } from "library-simplified-reusable-components";
 import StatsGroup from "./StatsGroup";
-import { InventoryStatistics } from "../interfaces";
 import InventoryReportRequestModal from "./InventoryReportRequestModal";
 import { useState } from "react";
-import { useAppContext } from "../context/appContext";
 
 type Props = {
   heading?: string;

src/components/__tests__/LibraryStats-test.tsx

@@ -25,6 +25,8 @@ const getAllProviders = ({ isSysAdmin = false } = {}) => {
   return componentWithProviders({ contextProviderProps });
 };
 
+global.ResizeObserver = require("resize-observer-polyfill");
+
 describe("LibraryStats", () => {
   // Convert from the API format to our in-app format.
   const statisticsData = normalizeStatistics(statisticsApiResponseData);

src/context/appContext.ts

@@ -1,5 +1,5 @@
 import { createContext, useContext } from "react";
-import { FeatureFlags } from "../interfaces";
+import { DashboardCollectionsBarChart, FeatureFlags } from "../interfaces";
 import Admin from "../models/Admin";
 
 export type AppContextType = {
@@ -8,6 +8,7 @@ export type AppContextType = {
   admin: Admin;
   featureFlags: FeatureFlags;
   quicksightPagePath: string;
+  dashboardCollectionsBarChart?: DashboardCollectionsBarChart;
 };
 
 // Don't export this, since we always want the error handling behavior of our hook.
@@ -16,7 +17,9 @@ const AppContext = createContext<AppContextType | undefined>(undefined);
 export const useAppContext = (): AppContextType => {
   const context = useContext(AppContext);
   if (context === undefined) {
-    throw new Error("useAppContext must be used within an AppContext povider.");
+    throw new Error(
+      "useAppContext must be used within an AppContext provider."
+    );
   }
   return context;
 };
@@ -25,5 +28,7 @@ export const useCsrfToken = () => useAppContext().csrfToken;
 export const useAppAdmin = () => useAppContext().admin;
 export const useAppEmail = () => useAppAdmin().email;
 export const useAppFeatureFlags = () => useAppContext().featureFlags;
+export const useDashboardCollectionsBarChartSettings = () =>
+  useAppContext().dashboardCollectionsBarChart;
 
 export default AppContext.Provider;

src/interfaces.ts

@@ -32,6 +32,17 @@ export interface ConfigurationSettings {
   /** `quickSightPagePath` contains the URL to the QuickSight dashboard page.
    Currently, this value does not change, so we can share it via fixed config. */
   quicksightPagePath: string;
+
+  /** Configuration for dashboard collections barchart. */
+  dashboardCollectionsBarChart?: DashboardCollectionsBarChart;
+}
+
+export interface DashboardCollectionsBarChart {
+  width?: number;
+}
+
+export interface TestingFlags {
+  [key: string]: boolean;
 }
 
 export interface FeatureFlags {

src/stylesheets/stats.scss

@@ -76,6 +76,7 @@
       text-align: left;
       font-style: italic;
       font-size: small;
+      text-wrap: balance;
     }
 
     .stat-usage-reports {
@@ -102,6 +103,7 @@
     h3 {
       font-weight: bolder;
       text-transform: uppercase;
+      text-wrap: balance;
       margin: 10px;
       margin-bottom: 2px;
     }