Added in some logic to show and hide a custom tooltip when hovering o…

…ver the legend items in the traffic stops by stop purpose graph. Not working yet.

frontend/src/Components/Charts/TrafficStops/TrafficStops.js

@@ -7,6 +7,9 @@ import TrafficStopsStyled, {
 import * as S from '../ChartSections/ChartsCommon.styled';
 import { useTheme } from 'styled-components';
 import cloneDeep from 'lodash.clonedeep';
+import { usePopper } from 'react-popper';
+import { TooltipStyled } from '../../Elements/Tooltip/Tooltip.styled';
+import { tooltipLanguage } from '../../../util/tooltipLanguage';
 
 // Util
 import {
@@ -62,6 +65,31 @@ function TrafficStops(props) {
  const [pickerXAxis, setPickerXAxis] = useState(null);
  const [forcePickerRerender, setForcePickerRerender] = useState(false);
  const [reasonChartYearSet, setReasonChartYearSet] = useState(reasonChartState.yearSet);
+ const [referenceElement, setReferenceElement] = useState(null);
+ const [tooltipText, setTooltipText] = useState('');
+ const [popperElement, setPopperElement] = useState(null);
+ const { styles, attributes } = usePopper(referenceElement, popperElement, {
+ placement: 'top',
+ modifiers: [
+ {
+ name: 'offset',
+ options: {
+ offset: [0, 10],
+ },
+ },
+ ],
+ });
+
+ const showTooltip = (e) => {
+ setReferenceElement(e.currentTarget);
+ setTooltipText(tooltipLanguage(e.target.parentElement.id));
+ popperElement.setAttribute('data-show', true);
+ };
+
+ const hideTooltip = () => {
+ setTooltipText('');
+ popperElement.removeAttribute('data-show');
+ };
 
  const [year, setYear] = useState(YEARS_DEFAULT);
 
@@ -533,10 +561,31 @@ function TrafficStops(props) {
  />
  <LineWrapper>
  <StopGroupsContainer>
+ <TooltipStyled
+ ref={setPopperElement}
+ id="TooltipStyled"
+ style={{
+ ...styles.popper,
+ maxWidth: '500px',
+ zIndex: 1000,
+ display: tooltipText !== '' ? 'block' : 'none',
+ }}
+ {...attributes.popper}
+ >
+ {tooltipText}
+ </TooltipStyled>
  <LineChart
  data={stopPurposeGroupsData}
  title="Stop Purposes By Group"
  maintainAspectRatio={false}
+ options={{
+ plugins: {
+ legend: {
+ onHover: (e) => showTooltip(e),
+ onLeave: () => hideTooltip(),
+ },
+ },
+ }}
  />
  </StopGroupsContainer>
  </LineWrapper>

frontend/src/Components/NewCharts/LineChart.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Line } from 'react-chartjs-2';
+import { tooltipLanguage } from '../../util/tooltipLanguage';
 
 export default function LineChart({
  data,
@@ -10,6 +11,9 @@ export default function LineChart({
  yAxisMax = null,
  yAxisShowLabels = true,
 }) {
+ let hovering = false;
+ const styledtooltip = document.getElementById('TooltipStyled');
+ const tooltips = tooltipLanguage;
  const options = {
  responsive: true,
  maintainAspectRatio,
@@ -21,6 +25,19 @@ export default function LineChart({
  legend: {
  display: displayLegend,
  position: 'top',
+ onHover: function (event, legendItem) {
+ if (hovering) {
+ return;
+ }
+ hovering = true;
+ styledtooltip.innerHTML = tooltips[legendItem.datasetIndex];
+ styledtooltip.style.left = event.x + 'px';
+ styledtooltip.style.top = event.y + 'px';
+ },
+ onLeave: function () {
+ hovering = false;
+ styledtooltip.innerHTML = '';
+ },
  },
  tooltip: {
  mode: 'nearest',