Merge pull request #155 from GNS-Science/feature/mfd_tooltip

mfd plot accepts tooltip callback;
GNS-Science · Jul 19, 2023 · 5078266 · 5078266
2 parents ff7c89e + b431a85
commit 5078266
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gns-science/toshi-nest",
-  "version": "3.9.6",
+  "version": "3.9.7",
   "description": "The toshi-nest is for fledgling work e.g. reusable Node components to share across TUI and other projects",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

diff --git a/src/MfdPlot/MfdPlot.stories.tsx b/src/MfdPlot/MfdPlot.stories.tsx
@@ -6,7 +6,7 @@ import ColorBar from '../ColorBar/ColorBar';
 import { LatLngExpression } from 'leaflet';
 import LeafletMap from '../LeafletMap';
 import geojsonTestDataPGA from '../__tests__/testData/geoJson/geojsonTestDataPGA';
-import { Box } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 
 export default {
   title: 'Charts/MFDPlot',
@@ -150,6 +150,18 @@ const data = [
     cumulative_rate: 0,
   },
 ];
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const renderCustomTooltip = (tooltipData: any) => {
+  const datum = tooltipData?.nearestDatum?.datum as Datum;
+  console.log(tooltipData);
+  return (
+    <>
+      <Typography>Rate: {datum?.rate?.toExponential(2)}</Typography>
+      <Typography>Cumulative Rate: {datum?.cumulative_rate?.toExponential(2)}/yr</Typography>
+      <Typography>Magnitude: {datum?.bin_center.toPrecision(3)}/yr</Typography>
+    </>
+  );
+};
 
 const adjustedData: Datum[] = data.map((d) => {
   if (d.rate === 0) {
@@ -185,6 +197,7 @@ export const Primary = () => {
       yScaleDomain={[1e-6, 1e-1]}
       lineColours={['blue', 'red']}
       legendDomain={['rate', 'cumulative rate']}
+      renderCustomTooltip={renderCustomTooltip}
     />
   );
 };
@@ -255,6 +268,7 @@ export const HazardMapsLog = () => {
           yScaleDomain={[1e-7, 1e-1]}
           lineColours={['blue', 'red']}
           legendDomain={['rate', 'cumulative rate']}
+          renderCustomTooltip={renderCustomTooltip}
         />
         <ColorBar width={360} height={35} colors={colorsLog} tickValues={valuesLog} heading={'Participation rate'} linear={false} />
       </Box>

diff --git a/src/MfdPlot/MfdPlot.tsx b/src/MfdPlot/MfdPlot.tsx
@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
 import { Axis, AnimatedLineSeries, AnimatedBarSeries, Tooltip, XYChart } from '@visx/xychart';
-import { FormControlLabel, Menu, Radio, RadioGroup, MenuItem, IconButton, Typography } from '@mui/material';
+import { FormControlLabel, Menu, Radio, RadioGroup, MenuItem, IconButton } from '@mui/material';
 import { LegendOrdinal } from '@visx/legend';
 import { scaleOrdinal } from '@visx/scale';
 import { RectClipPath } from '@visx/clip-path';
 import { Group } from '@visx/group';
 import SettingsIcon from '@mui/icons-material/Settings';
 
-import { MfdPlotProps, Datum } from './MfdPlot.types';
+import { MfdPlotProps } from './MfdPlot.types';
+
 export const MfdPlot = ({
   data,
   width,
@@ -23,6 +24,7 @@ export const MfdPlot = ({
   yScaleDomain,
   legendDomain,
   defaultLinesVisible,
+  renderCustomTooltip,
 }: MfdPlotProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [linesToDisplay, setLinesToDisplay] = useState<string>(defaultLinesVisible || 'Both');
@@ -116,16 +118,8 @@ export const MfdPlot = ({
           snapTooltipToDatumY
           showVerticalCrosshair
           style={{ zIndex: 120000, position: 'absolute', backgroundColor: 'white', borderRadius: '4px', borderWidth: '1px', border: '2px solid rgba(0,0,0,0.2)', padding: 2 }}
-          renderTooltip={({ tooltipData }) => {
-            const datum = tooltipData?.nearestDatum?.datum as Datum;
-            return (
-              <>
-                <Typography>Rate: {datum?.rate?.toExponential(2)}</Typography>
-                <Typography>Cumulative Rate: {datum?.cumulative_rate?.toExponential(2)}</Typography>
-                <Typography>Magnitude: {datum?.bin_center.toPrecision(3)}</Typography>
-              </>
-            );
-          }}
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          renderTooltip={({ tooltipData }: any) => renderCustomTooltip(tooltipData)}
         />
       </XYChart>
       <LegendOrdinal

diff --git a/src/MfdPlot/MfdPlot.types.ts b/src/MfdPlot/MfdPlot.types.ts
@@ -24,4 +24,6 @@ export interface MfdPlotProps {
   };
   header?: string;
   defaultLinesVisible?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  renderCustomTooltip: any;
 }