Adds overlay to breakdown chart (electricitymaps#148)

VIKTORVAV99 · Jan 13, 2023 · eace9bc · eace9bc
1 parent 4d24d96
commit eace9bc
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 33 deletions.
diff --git a/web/src/features/charts/BreakdownChart.tsx b/web/src/features/charts/BreakdownChart.tsx
@@ -1,4 +1,4 @@
-import { PulseLoader } from 'react-spinners';
+import { useTranslation } from 'translation/translation';
 import { Mode, TimeAverages } from 'utils/constants';
 import { ChartTitle } from './ChartTitle';
 import AreaGraph from './elements/AreaGraph';
@@ -18,34 +18,55 @@ function BreakdownChart({
   timeAverage,
 }: BreakdownChartProps) {
   const { data, mixMode } = useBreakdownChartData();
+  const { __ } = useTranslation();
 
   if (!data) {
-    return <PulseLoader />;
+    return null;
   }
 
+  const isBreakdownGraphOverlayEnabled =
+    mixMode === Mode.CONSUMPTION && timeAverage !== TimeAverages.HOURLY;
+
   const { chartData, valueAxisLabel, layerFill, layerKeys } = data;
 
   const titleDisplayMode = displayByEmissions ? 'emissions' : 'electricity';
   const titleMixMode = mixMode === Mode.CONSUMPTION ? 'origin' : 'production';
   return (
     <>
       <ChartTitle translationKey={`country-history.${titleDisplayMode}${titleMixMode}`} />
-      <AreaGraph
-        testId="history-mix-graph"
-        data={chartData}
-        layerKeys={layerKeys}
-        layerFill={layerFill}
-        valueAxisLabel={valueAxisLabel}
-        markerUpdateHandler={noop}
-        markerHideHandler={noop}
-        isMobile={false} // Todo: test on mobile https://linear.app/electricitymaps/issue/ELE-1498/test-and-improve-charts-on-mobile
-        height="10em"
-        isOverlayEnabled={false} // TODO: create overlay https://linear.app/electricitymaps/issue/ELE-1499/implement-chart-overlay-for-unavailable-data
-        datetimes={datetimes}
-        selectedTimeAggregate={timeAverage}
-        tooltip={BreakdownChartTooltip}
-        tooltipSize={displayByEmissions ? 'small' : 'large'}
-      />
+      <div className="relative">
+        {isBreakdownGraphOverlayEnabled && (
+          <div className="absolute top-0 h-full w-full">
+            <div className=" h-full w-full bg-white opacity-50" />
+            <div className="absolute top-[50%] left-[50%] z-10 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-sm bg-gray-200 p-2 text-center text-sm shadow-sm dark:bg-gray-900">
+              Temporarily disabled for consumption. <br /> Switch to production view
+            </div>
+          </div>
+        )}
+
+        <AreaGraph
+          testId="history-mix-graph"
+          data={chartData}
+          layerKeys={layerKeys}
+          layerFill={layerFill}
+          valueAxisLabel={valueAxisLabel}
+          markerUpdateHandler={noop}
+          markerHideHandler={noop}
+          isMobile={false} // Todo: test on mobile https://linear.app/electricitymaps/issue/ELE-1498/test-and-improve-charts-on-mobile
+          height="10em"
+          isOverlayEnabled={isBreakdownGraphOverlayEnabled}
+          datetimes={datetimes}
+          selectedTimeAggregate={timeAverage}
+          tooltip={BreakdownChartTooltip}
+          tooltipSize={displayByEmissions ? 'small' : 'large'}
+        />
+      </div>
+      {isBreakdownGraphOverlayEnabled && (
+        <div
+          className="prose my-1 rounded bg-gray-200 p-2 text-sm leading-snug"
+          dangerouslySetInnerHTML={{ __html: __('country-panel.exchangesAreMissing') }}
+        />
+      )}
     </>
   );
 }

diff --git a/web/src/features/charts/CarbonChart.tsx b/web/src/features/charts/CarbonChart.tsx
@@ -31,7 +31,6 @@ function CarbonChart({ datetimes, timeAverage }: CarbonChartProps) {
         markerUpdateHandler={noop}
         markerHideHandler={noop}
         isMobile={false}
-        isOverlayEnabled={false}
         height="8em"
         datetimes={datetimes}
         selectedTimeAggregate={timeAverage}

diff --git a/web/src/features/charts/ChartTitle.tsx b/web/src/features/charts/ChartTitle.tsx
@@ -1,8 +1,9 @@
+/* eslint-disable react/jsx-no-target-blank */
 import { useAtom } from 'jotai';
+import { HiOutlineArrowDownTray } from 'react-icons/hi2';
 import { useTranslation } from 'translation/translation';
 import { formatTimeRange } from 'utils/formatting';
 import { timeAverageAtom } from 'utils/state/atoms';
-import { HiOutlineArrowDownTray } from 'react-icons/hi2';
 
 type Props = {
   translationKey: string;
@@ -23,21 +24,21 @@ export function ChartTitle({ translationKey }: Props) {
   */
   return (
     <>
-      <h3 className="text-md font-bold">
+      <h3 className="mt-3 text-md font-bold">
         {localExists
           ? __(`${translationKey}.${timeAverage}`)
           : __(
               `${translationKey}.default`,
               formatTimeRange(localDefaultExists ? i18n.language : 'en', timeAverage)
             )}
       </h3>
-      <div className=" flex flex-row items-center pb-2 text-center text-sm  ">
+      <div className="flex flex-row items-center pb-2 text-center text-[0.7rem]">
         <HiOutlineArrowDownTray className="min-w-[12px]" size={12} />
         <a
           href="https://electricitymaps.com/?utm_source=app.electricitymaps.com&utm_medium=referral&utm_campaign=country_panel"
           target="_blank"
           rel="noreferrer"
-          className="whitespace-nowrap pl-0.5 text-sky-600 no-underline hover:underline  dark:invert"
+          className="pl-0.5 text-left text-[#4178ac] no-underline hover:underline dark:invert"
         >
           {__('country-history.Getdata')}
         </a>

diff --git a/web/src/features/charts/EmissionChart.tsx b/web/src/features/charts/EmissionChart.tsx
@@ -31,7 +31,6 @@ function EmissionChart({ timeAverage, datetimes }: EmissionChartProps) {
         valueAxisLabel="tCO₂eq / min"
         markerUpdateHandler={noop}
         markerHideHandler={noop}
-        isOverlayEnabled={false}
         datetimes={datetimes}
         isMobile={false}
         selectedTimeAggregate={timeAverage}

diff --git a/web/src/features/charts/PriceChart.tsx b/web/src/features/charts/PriceChart.tsx
@@ -41,7 +41,6 @@ function PriceChart({ datetimes, timeAverage }: PriceChartProps) {
         height="6em"
         datetimes={datetimes}
         selectedTimeAggregate={timeAverage}
-        isOverlayEnabled={false}
         tooltip={PriceChartTooltip}
       />
     </>

diff --git a/web/src/features/charts/elements/AreaGraph.tsx b/web/src/features/charts/elements/AreaGraph.tsx
@@ -76,7 +76,7 @@ interface AreagraphProps {
   markerUpdateHandler: any;
   markerHideHandler: any;
   isMobile: boolean;
-  isOverlayEnabled: boolean;
+  isOverlayEnabled?: boolean;
   height: string;
   datetimes: Date[];
   selectedTimeAggregate: TimeAverages; // TODO: Graph does not need to know about this
@@ -99,7 +99,7 @@ function AreaGraph({
   valueAxisLabel,
   isMobile,
   height = '10em',
-  isOverlayEnabled,
+  isOverlayEnabled = false,
   selectedTimeAggregate,
   datetimes,
   tooltip,

diff --git a/web/src/features/panels/zone/Attribution.tsx b/web/src/features/panels/zone/Attribution.tsx
@@ -36,7 +36,7 @@ export default function Attribution({
   }, [dataSources, i18n.language]);
 
   return (
-    <div className="whitespace-nowrap text-sm ">
+    <div className="text-sm">
       <span>{__('country-panel.source')}:</span>
       <a
         style={{ textDecoration: 'none' }}
@@ -64,9 +64,7 @@ export default function Attribution({
       </small>
       {'  '}
       {__('country-panel.helpfrom')}
-      <div className="flex flex-wrap gap-1">
-        <ContributorList zoneId={zoneId} />
-      </div>
+      <ContributorList zoneId={zoneId} />
     </div>
   );
 }
@@ -78,7 +76,7 @@ function ContributorList({ zoneId }: { zoneId: string }) {
   }
 
   return (
-    <div className="flex flex-wrap gap-1">
+    <div className="mt-1 flex flex-wrap gap-1">
       {contributors.map((contributor) => {
         return (
           <a

diff --git a/web/src/features/time/TimeControllerWrapper.tsx b/web/src/features/time/TimeControllerWrapper.tsx
@@ -32,7 +32,7 @@ function BottomSheetWrappedTimeController() {
 
 function FloatingTimeController() {
   return (
-    <div className="fixed bottom-3 left-3 z-20 w-[calc(14vw_+_16rem)] rounded-xl bg-white px-5 py-3 shadow-lg dark:bg-gray-900  md:w-[calc((14vw_+_16rem)_-_30px)]">
+    <div className="fixed bottom-3 left-3 z-20 w-[calc(14vw_+_16rem)] rounded-xl bg-white px-5 py-3 shadow-[0px_10px_30px_rgb(0_0_0/0.3)] dark:bg-gray-900  md:w-[calc((14vw_+_16rem)_-_30px)]">
       <TimeController />
     </div>
   );