Add tooltip to barbreakdown chart and style zonedetails a bit (electr…

…icitymaps#87) * Add tooltip functionality * style zonedetails * rename variable
VIKTORVAV99 · Dec 21, 2022 · 40b252e · 40b252e
1 parent 936a1e2
commit 40b252e
Show file tree

Hide file tree

Showing 12 changed files with 86 additions and 37 deletions.
diff --git a/web/src/components/tooltips/utilities.ts b/web/src/components/tooltips/utilities.ts
@@ -28,18 +28,18 @@ export const getOffsetTooltipPosition = ({
   mousePositionX,
   mousePositionY,
   tooltipHeight,
-  isMinSM,
+  isBiggerThanMobile,
 }: {
   mousePositionX: number;
   mousePositionY: number;
   tooltipHeight: number;
-  isMinSM: boolean;
+  isBiggerThanMobile: boolean;
 }) => {
   const xOffset = 10;
   const yOffset = tooltipHeight - 40;
 
   // For smaller screens we translate the tooltip to the top
-  if (!isMinSM) {
+  if (!isBiggerThanMobile) {
     return {
       x: 0,
       y: 40, // Provides space for the header to still be visible

diff --git a/web/src/features/charts/BreakdownChart.tsx b/web/src/features/charts/BreakdownChart.tsx
@@ -28,7 +28,7 @@ function BreakdownChart({
   const titleDisplayMode = displayByEmissions ? 'emissions' : 'electricity';
   const titleMixMode = mixMode === Mode.CONSUMPTION ? 'origin' : 'production';
   return (
-    <div className="ml-4">
+    <>
       <ChartTitle translationKey={`country-history.${titleDisplayMode}${titleMixMode}`} />
       <AreaGraph
         testId="history-mix-graph"
@@ -46,7 +46,7 @@ function BreakdownChart({
         tooltip={BreakdownChartTooltip}
         tooltipSize={displayByEmissions ? 'small' : 'large'}
       />
-    </div>
+    </>
   );
 }
 

diff --git a/web/src/features/charts/CarbonChart.tsx b/web/src/features/charts/CarbonChart.tsx
@@ -20,7 +20,7 @@ function CarbonChart({ datetimes, timeAverage }: CarbonChartProps) {
   const { chartData, layerFill, layerKeys } = data;
 
   return (
-    <div className="ml-4">
+    <>
       <ChartTitle translationKey="country-history.carbonintensity" />
       <AreaGraph
         testId="history-carbon-graph"
@@ -37,7 +37,7 @@ function CarbonChart({ datetimes, timeAverage }: CarbonChartProps) {
         selectedTimeAggregate={timeAverage}
         tooltip={CarbonChartTooltip}
       />
-    </div>
+    </>
   );
 }
 

diff --git a/web/src/features/charts/EmissionChart.tsx b/web/src/features/charts/EmissionChart.tsx
@@ -21,7 +21,7 @@ function EmissionChart({ timeAverage, datetimes }: EmissionChartProps) {
   const { chartData, layerFill, layerKeys } = data;
 
   return (
-    <div className="ml-4">
+    <>
       <ChartTitle translationKey="country-history.emissions" />
       <AreaGraph
         testId="history-emissions-graph"
@@ -38,7 +38,7 @@ function EmissionChart({ timeAverage, datetimes }: EmissionChartProps) {
         height="8em"
         tooltip={EmissionChartTooltip}
       />
-    </div>
+    </>
   );
 }
 

diff --git a/web/src/features/charts/PriceChart.tsx b/web/src/features/charts/PriceChart.tsx
@@ -23,7 +23,7 @@ function PriceChart({ datetimes, timeAverage }: PriceChartProps) {
     data;
 
   return (
-    <div className="ml-4">
+    <>
       <ChartTitle translationKey="country-history.electricityprices" />
       <AreaGraph
         testId="history-prices-graph"
@@ -42,7 +42,7 @@ function PriceChart({ datetimes, timeAverage }: PriceChartProps) {
         isOverlayEnabled={false}
         tooltip={PriceChartTooltip}
       />
-    </div>
+    </>
   );
 }
 

diff --git a/web/src/features/charts/bar-breakdown/BarBreakdownChart.tsx b/web/src/features/charts/bar-breakdown/BarBreakdownChart.tsx
@@ -1,8 +1,14 @@
+import * as Portal from '@radix-ui/react-portal';
+import { getOffsetTooltipPosition } from 'components/tooltips/utilities';
 import { useAtom } from 'jotai';
+import React, { useState } from 'react';
 import { useTranslation } from 'translation/translation';
+import { ZoneDetail } from 'types';
 import { displayByEmissionsAtom } from 'utils/state/atoms';
+import { useBreakpoint } from 'utils/styling';
 import { useReferenceWidthHeightObserver } from 'utils/viewport';
 import useBarBreakdownChartData from '../hooks/useBarBreakdownProductionChartData';
+import BreakdownChartTooltip from '../tooltips/BreakdownChartTooltip';
 import BarBreakdownEmissionsChart from './BarBreakdownEmissionsChart';
 import BarBreakdownProductionChart from './BarBreakdownProductionChart';
 import BySource from './BySource';
@@ -20,6 +26,13 @@ function BarBreakdownChart() {
   const [displayByEmissions] = useAtom(displayByEmissionsAtom);
   const { ref, width } = useReferenceWidthHeightObserver();
   const { __ } = useTranslation();
+  const isBiggerThanMobile = useBreakpoint('sm');
+
+  const [tooltipData, setTooltipData] = useState<{
+    selectedLayerKey: string;
+    x: number;
+    y: number;
+  } | null>(null);
 
   if (isLoading) {
     return null;
@@ -38,29 +51,53 @@ function BarBreakdownChart() {
     );
   }
 
-  // TODO: Show CountryTableOverlayIfNoData when required
+  const onMouseOver = (layerKey: string, _: ZoneDetail, event: React.MouseEvent) => {
+    const { clientX, clientY } = event;
+
+    const position = getOffsetTooltipPosition({
+      mousePositionX: clientX || 0,
+      mousePositionY: clientY || 0,
+      tooltipHeight: displayByEmissions ? 190 : 360,
+      isBiggerThanMobile,
+    });
 
-  const todoHandler = () => {
-    console.warn('TODO: Handle tooltips');
-    // see countrytable.jsx
-    // handleProductionRowMouseOver
-    //handleProductionRowMouseOut
-    //handleExchangeRowMouseOver
-    //handleExchangeRowMouseOut
+    setTooltipData({
+      selectedLayerKey: layerKey,
+      x: position.x,
+      y: position.y,
+    });
+  };
+
+  const onMouseOut = () => {
+    setTooltipData(null);
   };
 
   return (
-    <div className="relative w-full text-md " ref={ref}>
+    <div className="text-sm" ref={ref}>
       <BySource />
+      {tooltipData && (
+        <Portal.Root
+          className="absolute left-0 top-0 h-full w-full bg-black/20 p-2 sm:h-0 sm:w-0 sm:p-0"
+          style={{
+            left: tooltipData?.x,
+            top: tooltipData?.y,
+          }}
+        >
+          <BreakdownChartTooltip
+            selectedLayerKey={tooltipData?.selectedLayerKey}
+            zoneDetail={currentZoneDetail}
+          />
+        </Portal.Root>
+      )}
       {displayByEmissions ? (
         <BarBreakdownEmissionsChart
           data={currentZoneDetail}
           productionData={productionData}
           exchangeData={exchangeData}
-          onProductionRowMouseOver={todoHandler}
-          onProductionRowMouseOut={todoHandler}
-          onExchangeRowMouseOver={todoHandler}
-          onExchangeRowMouseOut={todoHandler}
+          onProductionRowMouseOver={onMouseOver}
+          onProductionRowMouseOut={onMouseOut}
+          onExchangeRowMouseOver={onMouseOver}
+          onExchangeRowMouseOut={onMouseOut}
           width={width}
           height={height}
           isMobile={false}
@@ -71,10 +108,10 @@ function BarBreakdownChart() {
           currentData={currentZoneDetail}
           productionData={productionData}
           exchangeData={exchangeData}
-          onProductionRowMouseOver={todoHandler}
-          onProductionRowMouseOut={todoHandler}
-          onExchangeRowMouseOver={todoHandler}
-          onExchangeRowMouseOut={todoHandler}
+          onProductionRowMouseOver={onMouseOver}
+          onProductionRowMouseOut={onMouseOut}
+          onExchangeRowMouseOver={onMouseOver}
+          onExchangeRowMouseOut={onMouseOut}
           width={width}
           height={height}
           isMobile={false}

diff --git a/web/src/features/charts/bar-breakdown/BarBreakdownEmissionsChart.tsx b/web/src/features/charts/bar-breakdown/BarBreakdownEmissionsChart.tsx
@@ -19,9 +19,17 @@ interface BarBreakdownEmissionsChartProps {
   exchangeData: ExchangeDataType[];
   productionData: ProductionDataType[];
   isMobile: boolean;
-  onProductionRowMouseOver: (data: ZoneDetail) => void;
+  onProductionRowMouseOver: (
+    mode: string,
+    data: ZoneDetail,
+    event: React.MouseEvent<SVGPathElement, MouseEvent>
+  ) => void;
   onProductionRowMouseOut: () => void;
-  onExchangeRowMouseOver: (data: ZoneDetail) => void;
+  onExchangeRowMouseOver: (
+    mode: string,
+    data: ZoneDetail,
+    event: React.MouseEvent<SVGPathElement, MouseEvent>
+  ) => void;
   onExchangeRowMouseOut: () => void;
 }
 

diff --git a/web/src/features/charts/elements/AreaGraph.tsx b/web/src/features/charts/elements/AreaGraph.tsx
@@ -114,7 +114,7 @@ function AreaGraph({
 
   const [selectedDate] = useAtom(selectedDatetimeIndexAtom);
   const [tooltipData, setTooltipData] = useState<TooltipData | null>(null);
-  const isMinSM = useBreakpoint('sm');
+  const isBiggerThanMobile = useBreakpoint('sm');
 
   // Build layers
   const layers = useMemo(
@@ -267,7 +267,7 @@ function AreaGraph({
             selectedLayerIndex !== null ? layerKeys[selectedLayerIndex] : undefined
           }
           tooltipSize={tooltipSize}
-          isMinSM={isMinSM}
+          isBiggerThanMobile={isBiggerThanMobile}
         >
           {(props) => tooltip(props)}
         </AreaGraphTooltip>

diff --git a/web/src/features/panels/zone/DisplayByEmissionToggle.tsx b/web/src/features/panels/zone/DisplayByEmissionToggle.tsx
@@ -25,7 +25,7 @@ export default function EmissionToggle(): ReactElement {
   };
 
   return (
-    <div className="px-2 pt-3 pb-4 xl:px-10">
+    <div className="px-2 pt-3 xl:px-10">
       <ToggleButton
         options={options}
         selectedOption={displayByEmissions.toString()}

diff --git a/web/src/features/panels/zone/NoInformationMessage.tsx b/web/src/features/panels/zone/NoInformationMessage.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'translation/translation';
 export default function NoInformationMessage() {
   const { __ } = useTranslation();
   return (
-    <div data-test-id="no-parser-message" className="text-base">
+    <div data-test-id="no-parser-message" className="pt-4 text-base">
       <span
         className="message"
         dangerouslySetInnerHTML={{

diff --git a/web/src/features/panels/zone/ZoneDetails.tsx b/web/src/features/panels/zone/ZoneDetails.tsx
@@ -38,7 +38,7 @@ export default function ZoneDetails(): JSX.Element {
     <>
       <ZoneHeader zoneId={zoneId} {...selectedData} />
       <DisplayByEmissionToggle />
-      <div className="h-[calc(100%-290px)] overflow-y-scroll pb-48">
+      <div className="h-[calc(100%-290px)] overflow-y-scroll p-4 pt-0 pb-48">
         <ZoneDetailsContent
           isLoading={isLoading}
           isError={isError}

diff --git a/web/src/features/time/TimeControllerWrapper.tsx b/web/src/features/time/TimeControllerWrapper.tsx
@@ -33,6 +33,10 @@ function FloatingTimeController() {
 }
 
 export default function TimeControllerWrapper() {
-  const isMinSM = useBreakpoint('sm');
-  return isMinSM ? <FloatingTimeController /> : <BottomSheetWrappedTimeController />;
+  const isBiggerThanMobile = useBreakpoint('sm');
+  return isBiggerThanMobile ? (
+    <FloatingTimeController />
+  ) : (
+    <BottomSheetWrappedTimeController />
+  );
 }