From 239d210e0e6ac1d0de47be1682051315d4b1dc20 Mon Sep 17 00:00:00 2001 From: Tim DiLauro Date: Fri, 9 Aug 2024 13:26:27 -0400 Subject: [PATCH] Configured collections refactor. --- src/components/LibraryStats.tsx | 318 +++++------------- src/components/SingleStatListItem.tsx | 4 +- src/components/StatsCollectionsBarChart.tsx | 189 +++++++++++ src/components/StatsCollectionsList.tsx | 24 ++ .../__tests__/LibraryStats-test.tsx | 59 +++- src/stylesheets/stats.scss | 41 ++- src/utils/sharedFunctions.ts | 26 ++ tests/jest/components/Stats.test.tsx | 11 +- 8 files changed, 427 insertions(+), 245 deletions(-) create mode 100644 src/components/StatsCollectionsBarChart.tsx create mode 100644 src/components/StatsCollectionsList.tsx diff --git a/src/components/LibraryStats.tsx b/src/components/LibraryStats.tsx index 5f2755efc..d45a0a74b 100644 --- a/src/components/LibraryStats.tsx +++ b/src/components/LibraryStats.tsx @@ -1,41 +1,27 @@ import * as React from "react"; import { useState } from "react"; -import * as numeral from "numeral"; import { + CollectionInventory, InventoryStatistics, LibraryStatistics, PatronStatistics, } from "../interfaces"; -import { - Bar, - BarChart, - ResponsiveContainer, - Tooltip, - TooltipProps, - XAxis, - YAxis, -} from "recharts"; import { Button } from "library-simplified-reusable-components"; import InventoryReportRequestModal from "./InventoryReportRequestModal"; import SingleStatListItem from "./SingleStatListItem"; -import { useAppAdmin, useAppFeatureFlags } from "../context/appContext"; +import { + useMayRequestInventoryReports, + useMayViewCollectionBarChart, +} from "../businessRules/roleBasedAccess"; +import StatsCollectionsBarChart from "./StatsCollectionsBarChart"; +import StatsCollectionsList from "./StatsCollectionsList"; export interface LibraryStatsProps { stats: LibraryStatistics; library?: string; } -type OneLevelStatistics = { [key: string]: number }; -type TwoLevelStatistics = { [key: string]: OneLevelStatistics }; -type chartTooltipData = { - dataKey: string; - name?: string; - value: number | string; - color?: string; - perMedium?: OneLevelStatistics; -}; - -const inventoryKeyToLabelMap = { +export const inventoryKeyToLabelMap = { titles: "Titles", availableTitles: "Available Titles", openAccessTitles: "Open Access Titles", @@ -47,13 +33,11 @@ const inventoryKeyToLabelMap = { selfHostedTitles: "Self-Hosted Titles", }; +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. */ -const LibraryStats = (props: LibraryStatsProps) => { - const admin = useAppAdmin(); - const { reportsOnlyForSysadmins } = useAppFeatureFlags(); - - const { stats, library } = props; +const LibraryStats = ({ stats, library }: LibraryStatsProps) => { const { name: libraryName, key: libraryKey, @@ -62,25 +46,16 @@ const LibraryStats = (props: LibraryStatsProps) => { patronStatistics: patrons, } = stats || {}; - // A feature flag controls whether to show the inventory report form. - const inventoryReportRequestEnabled = - !reportsOnlyForSysadmins || admin.isSystemAdmin(); - - const chartItems = collections - ?.map(({ name, inventory, inventoryByMedium }) => ({ - name, - ...inventory, - _by_medium: inventoryByMedium || {}, - })) - .sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1)); - + const showBarChart = useMayViewCollectionBarChart({ library }); + const inventoryReportRequestEnabled = useMayRequestInventoryReports({ + library, + }); + const dashboardTitle = library + ? `${libraryName || libraryKey} Dashboard` + : ALL_LIBRARIES_HEADING; return (
- {library ? ( -

{libraryName || libraryKey} Statistics

- ) : ( -

Statistics for All Libraries

- )} +

{dashboardTitle}

@@ -102,9 +77,14 @@ const LibraryStats = (props: LibraryStatsProps) => { const renderPatronsGroup = (patrons: PatronStatistics) => { return ( <> -

- Patrons -

+
+

+ Patrons +

+
+ Patrons currently registered in Palace +
+