From 3f96ddc2e659d5e02973ae0a2bb85f3a209939d6 Mon Sep 17 00:00:00 2001 From: Silke Bonnen <95029552+silkeholmebonnen@users.noreply.github.com> Date: Tue, 16 Apr 2024 09:09:11 +0200 Subject: [PATCH] Move all graphs to cards (#6642) * WIP * graphcard * small fix * small fix * fix overflow and border instead of border-[1px] * fix padding * add icons to graphs * add icon to breakdowngraph * fix graph units --------- Co-authored-by: Viktor Andersson <30777521+VIKTORVAV99@users.noreply.github.com> --- web/src/features/charts/BreakdownChart.tsx | 7 +++++-- web/src/features/charts/CarbonChart.tsx | 7 +++++-- web/src/features/charts/ChartTitle.tsx | 8 ++++++-- web/src/features/charts/EmissionChart.tsx | 12 ++++++++--- web/src/features/charts/NetExchangeChart.tsx | 8 +++++--- web/src/features/charts/PriceChart.tsx | 15 +++++++++----- .../bar-breakdown/BarBreakdownChart.tsx | 9 +++++++-- .../charts/bar-breakdown/GraphCard.tsx | 20 +++++++++++++++++++ .../charts/bar-breakdown/constants.ts | 2 +- .../bar-breakdown/elements/BySource.tsx | 6 +++++- web/src/features/panels/LeftPanel.tsx | 2 +- .../panels/zone/AreaGraphContainer.tsx | 2 +- web/src/features/panels/zone/ZoneDetails.tsx | 5 ++--- web/src/icons/circleBoltIcon.tsx | 18 +++++++++++++++++ web/src/icons/cloudArrowUpIcon.tsx | 18 +++++++++++++++++ web/src/icons/coinsIcon.tsx | 18 +++++++++++++++++ web/src/icons/exchangeIcon.tsx | 18 +++++++++++++++++ web/src/icons/plugCircleBoltIcon.tsx | 18 +++++++++++++++++ 18 files changed, 167 insertions(+), 26 deletions(-) create mode 100644 web/src/features/charts/bar-breakdown/GraphCard.tsx create mode 100644 web/src/icons/circleBoltIcon.tsx create mode 100644 web/src/icons/cloudArrowUpIcon.tsx create mode 100644 web/src/icons/coinsIcon.tsx create mode 100644 web/src/icons/exchangeIcon.tsx create mode 100644 web/src/icons/plugCircleBoltIcon.tsx diff --git a/web/src/features/charts/BreakdownChart.tsx b/web/src/features/charts/BreakdownChart.tsx index 066dc18ef0..143438e0db 100644 --- a/web/src/features/charts/BreakdownChart.tsx +++ b/web/src/features/charts/BreakdownChart.tsx @@ -1,8 +1,10 @@ import { max, sum } from 'd3-array'; +import { CircleBoltIcon } from 'icons/circleBoltIcon'; import { useTranslation } from 'react-i18next'; import { Mode, TimeAverages } from 'utils/constants'; import { formatCo2 } from 'utils/formatting'; +import { GraphCard } from './bar-breakdown/GraphCard'; import { ChartTitle } from './ChartTitle'; import AreaGraph from './elements/AreaGraph'; import { getBadgeText, noop } from './graphUtils'; @@ -54,10 +56,11 @@ function BreakdownChart({ } return ( - <> + } />
{isBreakdownGraphOverlayEnabled && ( @@ -93,7 +96,7 @@ function BreakdownChart({ dangerouslySetInnerHTML={{ __html: t('country-panel.exchangesAreMissing') }} /> )} - + ); } diff --git a/web/src/features/charts/CarbonChart.tsx b/web/src/features/charts/CarbonChart.tsx index 14d69d916a..17a6c71159 100644 --- a/web/src/features/charts/CarbonChart.tsx +++ b/web/src/features/charts/CarbonChart.tsx @@ -1,6 +1,8 @@ +import { CloudArrowUpIcon } from 'icons/cloudArrowUpIcon'; import { useTranslation } from 'react-i18next'; import { TimeAverages } from 'utils/constants'; +import { GraphCard } from './bar-breakdown/GraphCard'; import { ChartTitle } from './ChartTitle'; import AreaGraph from './elements/AreaGraph'; import { getBadgeText, noop } from './graphUtils'; @@ -31,10 +33,11 @@ function CarbonChart({ datetimes, timeAverage }: CarbonChartProps) { return ; } return ( - <> + } /> - + ); } diff --git a/web/src/features/charts/ChartTitle.tsx b/web/src/features/charts/ChartTitle.tsx index 38ded5fa9c..5a8423586e 100644 --- a/web/src/features/charts/ChartTitle.tsx +++ b/web/src/features/charts/ChartTitle.tsx @@ -8,9 +8,10 @@ type Props = { translationKey: string; hasLink?: boolean; badgeText?: string; + icon?: JSX.Element; }; -export function ChartTitle({ translationKey, badgeText = undefined }: Props) { +export function ChartTitle({ translationKey, badgeText = undefined, icon }: Props) { const { t } = useTranslation(); const [timeAverage] = useAtom(timeAverageAtom); /* @@ -18,7 +19,10 @@ export function ChartTitle({ translationKey, badgeText = undefined }: Props) { */ return (
-

{t(`${translationKey}.${timeAverage}`)}

+
+ {icon &&
{icon}
} +

{t(`${translationKey}.${timeAverage}`)}

+
{badgeText != undefined && }
); diff --git a/web/src/features/charts/EmissionChart.tsx b/web/src/features/charts/EmissionChart.tsx index f6d1a6b971..8a7e027221 100644 --- a/web/src/features/charts/EmissionChart.tsx +++ b/web/src/features/charts/EmissionChart.tsx @@ -1,7 +1,9 @@ +import { CloudArrowUpIcon } from 'icons/cloudArrowUpIcon'; import { useTranslation } from 'react-i18next'; import { TimeAverages } from 'utils/constants'; import { formatCo2 } from 'utils/formatting'; +import { GraphCard } from './bar-breakdown/GraphCard'; import { ChartTitle } from './ChartTitle'; import AreaGraph from './elements/AreaGraph'; import { getBadgeText, noop } from './graphUtils'; @@ -28,8 +30,12 @@ function EmissionChart({ timeAverage, datetimes }: EmissionChartProps) { const badgeText = getBadgeText(chartData, t); return ( - <> - + + } + /> - + ); } diff --git a/web/src/features/charts/NetExchangeChart.tsx b/web/src/features/charts/NetExchangeChart.tsx index 06f4134b5c..d67544672f 100644 --- a/web/src/features/charts/NetExchangeChart.tsx +++ b/web/src/features/charts/NetExchangeChart.tsx @@ -1,8 +1,10 @@ +import { ExchangeIcon } from 'icons/exchangeIcon'; import { useAtom } from 'jotai'; import { TimeAverages } from 'utils/constants'; import { formatCo2 } from 'utils/formatting'; import { displayByEmissionsAtom, productionConsumptionAtom } from 'utils/state/atoms'; +import { GraphCard } from './bar-breakdown/GraphCard'; import { ChartTitle } from './ChartTitle'; import AreaGraph from './elements/AreaGraph'; import { noop } from './graphUtils'; @@ -37,8 +39,8 @@ function NetExchangeChart({ datetimes, timeAverage }: NetExchangeChartProps) { } return ( - <> - + + } />
- + ); } diff --git a/web/src/features/charts/PriceChart.tsx b/web/src/features/charts/PriceChart.tsx index 72c475f344..f238cf6093 100644 --- a/web/src/features/charts/PriceChart.tsx +++ b/web/src/features/charts/PriceChart.tsx @@ -1,6 +1,8 @@ +import { CoinsIcon } from 'icons/coinsIcon'; import { useTranslation } from 'react-i18next'; import { TimeAverages } from 'utils/constants'; +import { GraphCard } from './bar-breakdown/GraphCard'; import { ChartTitle } from './ChartTitle'; import AreaGraph from './elements/AreaGraph'; import { noop } from './graphUtils'; @@ -51,12 +53,15 @@ function PriceChart({ datetimes, timeAverage }: PriceChartProps) { } return ( - <> - -
+ + } + /> +
{isPriceDisabled && (
-
+
{t(`country-panel.disabledPriceReasons.${priceDisabledReason}`)}
@@ -79,7 +84,7 @@ function PriceChart({ datetimes, timeAverage }: PriceChartProps) { tooltip={PriceChartTooltip} />
- + ); } diff --git a/web/src/features/charts/bar-breakdown/BarBreakdownChart.tsx b/web/src/features/charts/bar-breakdown/BarBreakdownChart.tsx index c7e7dba84e..1e54cbe71f 100644 --- a/web/src/features/charts/bar-breakdown/BarBreakdownChart.tsx +++ b/web/src/features/charts/bar-breakdown/BarBreakdownChart.tsx @@ -1,6 +1,7 @@ import * as Portal from '@radix-ui/react-portal'; import Accordion from 'components/Accordion'; import { getOffsetTooltipPosition } from 'components/tooltips/utilities'; +import Divider from 'features/panels/zone/Divider'; import { IndustryIcon } from 'icons/industryIcon'; import { UtilityPoleIcon } from 'icons/utilityPoleIcon'; import { WindTurbineIcon } from 'icons/windTurbineIcon'; @@ -102,7 +103,10 @@ function BarBreakdownChart({ .sort(); return ( -
+
)} -
+ +
{ trackEvent('Data Sources Clicked', { chart: 'bar-breakdown-chart' }); diff --git a/web/src/features/charts/bar-breakdown/GraphCard.tsx b/web/src/features/charts/bar-breakdown/GraphCard.tsx new file mode 100644 index 0000000000..ec0ccd6f2a --- /dev/null +++ b/web/src/features/charts/bar-breakdown/GraphCard.tsx @@ -0,0 +1,20 @@ +import { twMerge } from 'tailwind-merge'; + +export function GraphCard({ + children, + className, +}: { + children: React.ReactNode; + className?: string; +}) { + return ( +
+ {children} +
+ ); +} diff --git a/web/src/features/charts/bar-breakdown/constants.ts b/web/src/features/charts/bar-breakdown/constants.ts index 2c85f78e19..ab219246c3 100644 --- a/web/src/features/charts/bar-breakdown/constants.ts +++ b/web/src/features/charts/bar-breakdown/constants.ts @@ -2,7 +2,7 @@ export const LABEL_MAX_WIDTH = 130; export const TEXT_ADJUST_Y = 11; export const ROW_HEIGHT = 13; export const PADDING_Y = 7; -export const PADDING_X = 5; +export const PADDING_X = 25; export const RECT_OPACITY = 0.8; export const X_AXIS_HEIGHT = 15; export const DEFAULT_FLAG_SIZE = 16; diff --git a/web/src/features/charts/bar-breakdown/elements/BySource.tsx b/web/src/features/charts/bar-breakdown/elements/BySource.tsx index 0a351b5956..e3cca8cd3b 100644 --- a/web/src/features/charts/bar-breakdown/elements/BySource.tsx +++ b/web/src/features/charts/bar-breakdown/elements/BySource.tsx @@ -1,5 +1,6 @@ import EstimationBadge from 'components/EstimationBadge'; import { TFunction } from 'i18next'; +import { PlugCircleBoltIcon } from 'icons/plugCircleBoltIcon'; import { useAtom } from 'jotai'; import { useTranslation } from 'react-i18next'; import { TimeAverages } from 'utils/constants'; @@ -51,7 +52,10 @@ export default function BySource({
- {text} +
+ + {text} +
{hasEstimationPill && ( -
{children}
+
{children}
); diff --git a/web/src/features/panels/zone/AreaGraphContainer.tsx b/web/src/features/panels/zone/AreaGraphContainer.tsx index 7a226ebe87..91958a9fd8 100644 --- a/web/src/features/panels/zone/AreaGraphContainer.tsx +++ b/web/src/features/panels/zone/AreaGraphContainer.tsx @@ -17,7 +17,7 @@ export default function AreaGraphContainer({ displayByEmissions: boolean; }) { return ( -
+
{displayByEmissions ? ( ) : ( diff --git a/web/src/features/panels/zone/ZoneDetails.tsx b/web/src/features/panels/zone/ZoneDetails.tsx index 101008b148..5713feb287 100644 --- a/web/src/features/panels/zone/ZoneDetails.tsx +++ b/web/src/features/panels/zone/ZoneDetails.tsx @@ -19,7 +19,6 @@ import { useBreakpoint } from 'utils/styling'; import AreaGraphContainer from './AreaGraphContainer'; import Attribution from './Attribution'; import DisplayByEmissionToggle from './DisplayByEmissionToggle'; -import Divider from './Divider'; import EstimationCard from './EstimationCard'; import NoInformationMessage from './NoInformationMessage'; import { getHasSubZones, getZoneDataStatus, ZoneDataStatus } from './util'; @@ -74,7 +73,7 @@ export default function ZoneDetails(): JSX.Element { return ( <> -
+
{cardType != 'none' && zoneDataStatus !== ZoneDataStatus.NO_INFORMATION && zoneDataStatus !== ZoneDataStatus.AGGREGATE_DISABLED && ( @@ -96,8 +95,8 @@ export default function ZoneDetails(): JSX.Element { zoneDataStatus={zoneDataStatus} > -