diff --git a/spotlight-client/src/MetricVizMapper/MetricVizMapper.tsx b/spotlight-client/src/MetricVizMapper/MetricVizMapper.tsx index e56ff06b..4c413914 100644 --- a/spotlight-client/src/MetricVizMapper/MetricVizMapper.tsx +++ b/spotlight-client/src/MetricVizMapper/MetricVizMapper.tsx @@ -67,7 +67,8 @@ const MetricVizMapper: React.FC = ({ metric }) => { if (metric instanceof ProgramParticipationCurrentMetric) { return ; } - // TODO: exhaustiveness check? + + // there are no other metric types, so this should only be reached when developing new ones throw new Error("unknown metric type"); }; diff --git a/spotlight-client/src/charts/TopologicalMap.tsx b/spotlight-client/src/charts/TopologicalMap.tsx index cc9a45c4..1c3dbc91 100644 --- a/spotlight-client/src/charts/TopologicalMap.tsx +++ b/spotlight-client/src/charts/TopologicalMap.tsx @@ -25,7 +25,6 @@ import { Marker, GeographyProps, } from "react-simple-maps"; -import { animated, useSpring } from "react-spring/web.cjs"; import { Spring } from "react-spring/renderprops.cjs"; import styled from "styled-components/macro"; import { mesh } from "topojson"; @@ -78,8 +77,8 @@ type MapProps = { }; /** - * Given a topology and a mapping of topological object IDs to values, - * draws a map and labels the topological objects with their values. + * Given a topojson topology and a mapping of topological object IDs to values, + * draws a map and labels the topological objects accordingly. */ export default function TopologicalMap({ aspectRatio, @@ -148,8 +147,7 @@ const RegionGeography = styled(Geography)` const RegionMarker = styled(Marker)``; -const RegionLabel = styled(animated.text)` - fill: ${colors.text}; +const RegionLabel = styled.text` font-size: ${rem(18)}; font-weight: 600; letter-spacing: -0.015em; @@ -167,19 +165,12 @@ const Region = ({ const { label, value } = data; const [hoverRegion, setHoverRegion] = useState(false); - const [labelStyles, setLabelStyles] = useSpring(() => ({ - from: { fill: colors.text }, - fill: colors.text, - })); - const setHover = () => { setHoverRegion(true); - setLabelStyles({ fill: colors.accent }); }; const clearHover = () => { setHoverRegion(false); - setLabelStyles({ fill: colors.text }); }; return ( @@ -193,29 +184,35 @@ const Region = ({ aria-label={`${label} value ${value}`} > {/* - using spring renderprops instead of hook because - the Geography `style` prop clobbers the `animated` wrapper + using spring renderprops instead of hook because react-simple-maps + components are not compatible with the `animated` wrapper */} {(props) => ( - + <> + + + {value} + + )} - - {value} - ); };