From eace9bc87608b9feeb9717df955825ffc1565663 Mon Sep 17 00:00:00 2001 From: Mads Nedergaard Date: Fri, 13 Jan 2023 15:04:07 +0100 Subject: [PATCH] Adds overlay to breakdown chart (#148) --- web/src/features/charts/BreakdownChart.tsx | 57 +++++++++++++------ web/src/features/charts/CarbonChart.tsx | 1 - web/src/features/charts/ChartTitle.tsx | 9 +-- web/src/features/charts/EmissionChart.tsx | 1 - web/src/features/charts/PriceChart.tsx | 1 - .../features/charts/elements/AreaGraph.tsx | 4 +- web/src/features/panels/zone/Attribution.tsx | 8 +-- .../features/time/TimeControllerWrapper.tsx | 2 +- 8 files changed, 50 insertions(+), 33 deletions(-) diff --git a/web/src/features/charts/BreakdownChart.tsx b/web/src/features/charts/BreakdownChart.tsx index 6417c8a3b7..0834ab18f0 100644 --- 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,11 +18,15 @@ function BreakdownChart({ timeAverage, }: BreakdownChartProps) { const { data, mixMode } = useBreakdownChartData(); + const { __ } = useTranslation(); if (!data) { - return ; + return null; } + const isBreakdownGraphOverlayEnabled = + mixMode === Mode.CONSUMPTION && timeAverage !== TimeAverages.HOURLY; + const { chartData, valueAxisLabel, layerFill, layerKeys } = data; const titleDisplayMode = displayByEmissions ? 'emissions' : 'electricity'; @@ -30,22 +34,39 @@ function BreakdownChart({ return ( <> - +
+ {isBreakdownGraphOverlayEnabled && ( +
+
+
+ Temporarily disabled for consumption.
Switch to production view +
+
+ )} + + +
+ {isBreakdownGraphOverlayEnabled && ( +
+ )} ); } diff --git a/web/src/features/charts/CarbonChart.tsx b/web/src/features/charts/CarbonChart.tsx index 4468450c96..bca5985232 100644 --- 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 index 6d976c9b3f..972f47010d 100644 --- 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,7 +24,7 @@ export function ChartTitle({ translationKey }: Props) { */ return ( <> -

+

{localExists ? __(`${translationKey}.${timeAverage}`) : __( @@ -31,13 +32,13 @@ export function ChartTitle({ translationKey }: Props) { formatTimeRange(localDefaultExists ? i18n.language : 'en', timeAverage) )}

-
+
{__('country-history.Getdata')} diff --git a/web/src/features/charts/EmissionChart.tsx b/web/src/features/charts/EmissionChart.tsx index b70e1494f7..e6d397b8a6 100644 --- 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 index b33ca44e96..5623926ac2 100644 --- 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 index 472077e012..55675989c4 100644 --- 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 index 38b4897b79..a4475024f4 100644 --- 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 ( -