Merge pull request #430 from BloomBooks/BL-10970Maps

BL-10970 Country Location Map
BloomBooks · Mar 7, 2022 · 6d5d188 · 6d5d188
2 parents e9c85ea + fd03638
commit 6d5d188
Show file tree

Hide file tree

Showing 10 changed files with 14,753 additions and 237 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -6,6 +6,7 @@
         "bloomd",
         "bloomlibrary",
         "Blorg",
+        "Choropleth",
         "Contentful",
         "domtoimage",
         "epub",

diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
         "analyze": "source-map-explorer build/static/js/*chunk.*",
         "lint": "eslint \"src/**/!(*.d).ts{,x}\"",
         "prepare": "husky install",
-        "postinstall": "husky install && shx rm -rf .git/hooks && shx ln -s ../.husky .git/hooks"
+        "postinstall": "patch-package && husky install && shx rm -rf .git/hooks && shx ln -s ../.husky .git/hooks"
     },
     "dependencies": {
         "@contentful/rich-text-react-renderer": "^13.4.0",
@@ -32,7 +32,9 @@
         "@material-ui/icons": "^4.9.1",
         "@material-ui/lab": "^4.0.0-alpha.43",
         "@material-ui/styles": "^4.9.0",
-        "@nivo/bar": "^0.62.0",
+        "@nivo/bar": "^0.69.1",
+        "@nivo/core": "^0.69.0",
+        "@nivo/geo": "^0.69.0",
         "@sentry/browser": "^6.0.0",
         "@use-hooks/axios": "^1.3.1",
         "axios-hooks": "^2.2.0",
@@ -63,6 +65,7 @@
         "react-storage-hooks": "^4.0.0",
         "react-tooltip-lite": "^1.12.0",
         "react-truncate-markup": "^5.0.0",
+        "svgsaver": "^0.9.0",
         "swiper": "^6.4.5",
         "title-case": "^2.1.1",
         "use-media": "^1.4.0",
@@ -126,6 +129,8 @@
         "jest-teamcity-reporter": "^0.9.0",
         "lint-staged": "^10.5.4",
         "ncp": "^2.0.0",
+        "patch-package": "^6.4.7",
+        "postinstall-postinstall": "^2.1.0",
         "prettier": "^2.2.1",
         "pretty-quick": "^3.1.0",
         "react-select": "^3.0.8",

diff --git a/patches/@nivo+geo+0.69.0.patch b/patches/@nivo+geo+0.69.0.patch
@@ -0,0 +1,20 @@
+diff --git a/node_modules/@nivo/geo/index.d.ts b/node_modules/@nivo/geo/index.d.ts
+index 5bb799a..56a0d34 100644
+--- a/node_modules/@nivo/geo/index.d.ts
++++ b/node_modules/@nivo/geo/index.d.ts
+@@ -1,6 +1,6 @@
+ import * as React from 'react'
+ import { Dimensions, Theme, Box, BoxAlign } from '@nivo/core'
+-
++import { LegendProps } from '@nivo/legends'
+ declare module '@nivo/geo' {
+     ///////////////////////////////////////////////////////////////////////////
+     // Common
+@@ -113,6 +113,7 @@ declare module '@nivo/geo' {
+         borderColor?: string | FeatureAccessor<ChoroplethBoundFeature, number>
+
+         tooltip?: ChoroplethTooltip
++        legends?: LegendProps[]
+
+         onMouseEnter?: ChoroplethEventHandler
+         onMouseMove?: ChoroplethEventHandler
diff --git a/src/components/statistics/CollectionStatsPage.tsx b/src/components/statistics/CollectionStatsPage.tsx
@@ -19,6 +19,7 @@ import Button from "@material-ui/core/Button";
 import { saveAs } from "file-saver";
 import DownloadPngIcon from "./download-png.svg";
 import DownloadCsvIcon from "../../export/download-csv.svg";
+import DownloadSvgIcon from "./download-svg.svg";
 import {
     IStatsProps,
     IScreenOption,
@@ -38,6 +39,7 @@ import { ICollectionStatsPageProps } from "./CollectionStatsPageCodeSplit";
 import { PageNotFound } from "../PageNotFound";
 import { StatsCredits } from "./StatsCredits";
 import { StatsLocationScreen } from "./StatsLocationScreen";
+const SvgSaver = require("svgsaver"); // note: domtoimage has svg export also, but there are problems with what it produces (figma can't load)
 
 export const Pretend: React.FunctionComponent<IStatsProps> = (props) => {
     return <h1>Pretend</h1>;
@@ -129,6 +131,11 @@ export const CollectionStatsPage: React.FunctionComponent<ICollectionStatsPagePr
         }
     );
 
+    // this will normally be undefined. It gets defined if there is an svg we want to make downloadable
+    const svgForDownloading = document.querySelector(
+        "#svg-wrapper svg"
+    )! as HTMLElement;
+
     // they come back from localStorage as strings.
     if (typeof dateRange.startDate === "string") {
         dateRange.startDate = new Date(dateRange.startDate);
@@ -304,6 +311,27 @@ export const CollectionStatsPage: React.FunctionComponent<ICollectionStatsPagePr
                         justify-content: flex-end;
                     `}
                 >
+                    {svgForDownloading && (
+                        <Button
+                            onClick={() => {
+                                svgForDownloading.setAttribute(
+                                    "title",
+                                    `${props.collectionName}-${screens[currentScreenIndex].label}`
+                                );
+                                const svgsaver = new SvgSaver();
+                                svgsaver.asSvg(svgForDownloading);
+                            }}
+                            aria-label="download SVG map"
+                        >
+                            <img
+                                alt={l10n.formatMessage({
+                                    id: "stats.download.svgIcon",
+                                    defaultMessage: "download SVG map",
+                                })}
+                                src={DownloadSvgIcon}
+                            />
+                        </Button>
+                    )}
                     <Button
                         onClick={() => {
                             downloadAsPng(