feat(web): add 5 min data to the app (#8251)

* wip

* set major tick to every hour

* use ff to hide or show 5 min granularity

* use correct ff name

* add translations

* show tic every 4 hours

* use 5 min atom

* remove 24 hour check in routing

* use isFineGranularity instead of isHourly

* add five minute to allowed historical

* remove console log print

* remove some ticks

* navigate to 72h if five min ff is not on

* fix midnight marker

* adjust minor ticks

* review feedback

---------

Co-authored-by: Samo Seljak <[email protected]>
Co-authored-by: Viktor Andersson <[email protected]>

Author: 3 people

mockserver/public/v10/meta.json

@@ -1,5 +1,5 @@
 {
-    "features": {
+  "features": {
     "72-hours": true,
     "consumption-only": false,
     "feedback-micro-survey": false,
@@ -8,7 +8,11 @@
     "historical-storytelling-popover": true,
     "more-options-dropdown": true,
     "query-materialized-view": true,
-    "share-button": true
+    "share-button": true,
+    "five-minute-granularity": true
   },
-  "callerLocation": [138, 36]
+  "callerLocation": [
+    138,
+    36
+  ]
 }

web/src/api/helpers.ts

@@ -96,6 +96,7 @@ export function isValidDate(dateString: string) {
 }
 
 export const TIME_RANGE_TO_TIME_AVERAGE: Record<TimeRange, string> = {
+  [TimeRange.H24]: 'five_minutes',
   [TimeRange.H72]: 'hourly',
   [TimeRange.M3]: 'daily',
   [TimeRange.M12]: 'monthly',
@@ -104,6 +105,7 @@ export const TIME_RANGE_TO_TIME_AVERAGE: Record<TimeRange, string> = {
 } as const;
 
 export const TIME_RANGE_TO_BACKEND_PATH: Record<TimeRange, string> = {
+  [TimeRange.H24]: 'five_minutes',
   [TimeRange.H72]: 'hourly',
   [TimeRange.M3]: 'daily',
   [TimeRange.M12]: 'monthly',

web/src/components/TimeRangeSelector.tsx

@@ -1,4 +1,5 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { useFeatureFlag } from 'features/feature-flags/api';
 import { TFunction } from 'i18next';
 import { ChevronsUpDown } from 'lucide-react';
 import { memo, useMemo } from 'react';
@@ -21,13 +22,22 @@ export interface TimeRangeSelectorProps {
 function TimeRangeSelector({ timeRange, onToggleGroupClick }: TimeRangeSelectorProps) {
   const { t } = useTranslation();
   const { isOpen, onToggleDropdown } = useDropdownCtl();
+  const is5MinGranularityEnabled = useFeatureFlag('five-minute-granularity');
 
   const options = useMemo(
-    () => Object.values(TimeRange).map((value) => createOption(value, t)),
-    [t]
+    () =>
+      Object.values(TimeRange)
+        .filter((value) => {
+          if (!is5MinGranularityEnabled && value === TimeRange.H24) {
+            return false;
+          }
+          return true;
+        })
+        .map((value) => createOption(value, t)),
+    [t, is5MinGranularityEnabled]
   );
 
-  const selectedLabel = options.find((opt) => opt.value === timeRange)!.label;
+  const selectedLabel = options.find((opt) => opt.value === timeRange)?.label;
 
   return (
     <DropdownMenu.Root onOpenChange={onToggleDropdown} open={isOpen} modal={false}>

web/src/components/TimeSlider.tsx

@@ -7,7 +7,7 @@ import { ChevronsLeftRight, Moon, Sun } from 'lucide-react';
 import { ReactElement } from 'react';
 import { useParams } from 'react-router-dom';
 import { RouteParameters } from 'types';
-import { isHourlyAtom } from 'utils/state/atoms';
+import { isFiveMinuteOrHourlyGranularityAtom } from 'utils/state/atoms';
 
 type NightTimeSet = number[];
 
@@ -139,8 +139,8 @@ export function TimeSliderWithNight(props: TimeSliderProps) {
 
 function TimeSlider(props: TimeSliderProps) {
   const { zoneId } = useParams<RouteParameters>();
-  const isHourly = useAtomValue(isHourlyAtom);
-  const showNightTime = zoneId && isHourly;
+  const isFineGranularity = useAtomValue(isFiveMinuteOrHourlyGranularityAtom);
+  const showNightTime = zoneId && isFineGranularity;
 
   return showNightTime ? (
     <TimeSliderWithNight {...props} />

web/src/features/charts/CarbonChart.tsx

@@ -3,7 +3,7 @@ import { useCo2ColorScale } from 'hooks/theme';
 import { useAtomValue } from 'jotai';
 import { useTranslation } from 'react-i18next';
 import { Charts, TimeRange } from 'utils/constants';
-import { isHourlyAtom } from 'utils/state/atoms';
+import { isFiveMinuteOrHourlyGranularityAtom } from 'utils/state/atoms';
 
 import { ChartSubtitle, ChartTitle } from './ChartTitle';
 import AreaGraph from './elements/AreaGraph';
@@ -24,7 +24,7 @@ function CarbonChart({ datetimes, timeRange }: CarbonChartProps) {
   const { data, isLoading, isError } = useCarbonChartData();
   const { t } = useTranslation();
   const co2ColorScale = useCo2ColorScale();
-  const isHourly = useAtomValue(isHourlyAtom);
+  const isFineGranularity = useAtomValue(isFiveMinuteOrHourlyGranularityAtom);
   const { estimated, estimationMethod, someEstimated } = useEstimationData(
     data?.chartData
   );
@@ -58,7 +58,7 @@ function CarbonChart({ datetimes, timeRange }: CarbonChartProps) {
       />
       {someEstimated && (
         <EstimationLegend
-          isAggregated={!isHourly}
+          isAggregated={!isFineGranularity}
           estimationMethod={estimationMethod}
           valueAxisLabel={valueAxisLabel}
         />

web/src/features/charts/EmissionChart.tsx

@@ -2,7 +2,7 @@ import { useAtomValue } from 'jotai';
 import { useTranslation } from 'react-i18next';
 import { Charts, TimeRange } from 'utils/constants';
 import { formatCo2 } from 'utils/formatting';
-import { isHourlyAtom } from 'utils/state/atoms';
+import { isFiveMinuteOrHourlyGranularityAtom } from 'utils/state/atoms';
 
 import { ChartSubtitle, ChartTitle } from './ChartTitle';
 import AreaGraph from './elements/AreaGraph';
@@ -20,7 +20,7 @@ interface EmissionChartProps {
 
 function EmissionChart({ timeRange, datetimes }: EmissionChartProps) {
   const { data, isLoading, isError } = useEmissionChartData();
-  const isHourly = useAtomValue(isHourlyAtom);
+  const isFineGranularity = useAtomValue(isFiveMinuteOrHourlyGranularityAtom);
   const { estimated, estimationMethod, someEstimated } = useEstimationData(
     data?.chartData
   );
@@ -46,7 +46,7 @@ function EmissionChart({ timeRange, datetimes }: EmissionChartProps) {
       />
       {someEstimated && (
         <EstimationLegend
-          isAggregated={!isHourly}
+          isAggregated={!isFineGranularity}
           estimationMethod={estimationMethod}
           valueAxisLabel={valueAxisLabel}
         />

web/src/features/charts/LoadChart.tsx

@@ -1,7 +1,7 @@
 import { useAtomValue } from 'jotai';
 import { useTranslation } from 'react-i18next';
 import { Charts, TimeRange } from 'utils/constants';
-import { isHourlyAtom } from 'utils/state/atoms';
+import { isFiveMinuteOrHourlyGranularityAtom } from 'utils/state/atoms';
 
 import { ChartSubtitle, ChartTitle } from './ChartTitle';
 import AreaGraph from './elements/AreaGraph';
@@ -21,7 +21,7 @@ interface LoadChartProps {
 function LoadChart({ datetimes, timeRange }: LoadChartProps) {
   const { data, isLoading, isError } = useLoadChartData();
   const { t } = useTranslation();
-  const isHourly = useAtomValue(isHourlyAtom);
+  const isFineGranularity = useAtomValue(isFiveMinuteOrHourlyGranularityAtom);
   const { estimated, estimationMethod, someEstimated } = useEstimationData(
     data?.chartData
   );
@@ -58,7 +58,7 @@ function LoadChart({ datetimes, timeRange }: LoadChartProps) {
       <div className="relative">
         {someEstimated && (
           <EstimationLegend
-            isAggregated={!isHourly}
+            isAggregated={!isFineGranularity}
             estimationMethod={estimationMethod}
             valueAxisLabel={valueAxisLabel}
           />

web/src/features/charts/NetExchangeChart.tsx

@@ -4,7 +4,7 @@ import { Charts, TimeRange } from 'utils/constants';
 import { formatCo2 } from 'utils/formatting';
 import {
   displayByEmissionsAtom,
-  isHourlyAtom,
+  isFiveMinuteOrHourlyGranularityAtom,
   productionConsumptionAtom,
 } from 'utils/state/atoms';
 
@@ -27,7 +27,7 @@ function NetExchangeChart({ datetimes, timeRange }: NetExchangeChartProps) {
   const { data, isLoading, isError } = useNetExchangeChartData();
   const productionConsumption = useAtomValue(productionConsumptionAtom);
   const displayByEmissions = useAtomValue(displayByEmissionsAtom);
-  const isHourly = useAtomValue(isHourlyAtom);
+  const isFineGranularity = useAtomValue(isFiveMinuteOrHourlyGranularityAtom);
   const { t } = useTranslation();
   const { estimated, estimationMethod, someEstimated } = useEstimationData(
     data?.chartData
@@ -64,7 +64,7 @@ function NetExchangeChart({ datetimes, timeRange }: NetExchangeChartProps) {
       <div className="relative">
         {someEstimated && (
           <EstimationLegend
-            isAggregated={!isHourly}
+            isAggregated={!isFineGranularity}
             estimationMethod={estimationMethod}
             valueAxisLabel={valueAxisLabel}
           />

web/src/features/charts/OriginChart.tsx

@@ -5,7 +5,10 @@ import { useTranslation } from 'react-i18next';
 import { ElectricityModeType } from 'types';
 import { Charts, TimeRange } from 'utils/constants';
 import { formatCo2 } from 'utils/formatting';
-import { isConsumptionAtom, isHourlyAtom } from 'utils/state/atoms';
+import {
+  isConsumptionAtom,
+  isFiveMinuteOrHourlyGranularityAtom,
+} from 'utils/state/atoms';
 
 import { ChartSubtitle, ChartTitle } from './ChartTitle';
 import AreaGraph from './elements/AreaGraph';
@@ -70,7 +73,7 @@ function OriginChart({ displayByEmissions, datetimes, timeRange }: OriginChartPr
   const { data } = useOriginChartData();
   const isConsumption = useAtomValue(isConsumptionAtom);
   const { t } = useTranslation();
-  const isHourly = useAtomValue(isHourlyAtom);
+  const isFineGranularity = useAtomValue(isFiveMinuteOrHourlyGranularityAtom);
   const selectedData = useSelectedData(displayByEmissions);
   const { estimated, estimationMethod, someEstimated } = useEstimationData(
     data?.chartData
@@ -80,7 +83,7 @@ function OriginChart({ displayByEmissions, datetimes, timeRange }: OriginChartPr
     return null;
   }
 
-  const isConsumptionAndAggregatedResolution = isConsumption && !isHourly;
+  const isConsumptionAndAggregatedResolution = isConsumption && !isFineGranularity;
 
   const { chartData, valueAxisLabel, layerFill, layerKeys } = data;
 
@@ -115,7 +118,7 @@ function OriginChart({ displayByEmissions, datetimes, timeRange }: OriginChartPr
       <div className="relative">
         {someEstimated && (
           <EstimationLegend
-            isAggregated={!isHourly}
+            isAggregated={!isFineGranularity}
             estimationMethod={estimationMethod}
             valueAxisLabel={valueAxisLabel}
           />

web/src/features/charts/bar-breakdown/BarBreakdownChart.tsx

@@ -20,7 +20,7 @@ import { round } from 'utils/helpers';
 import {
   displayByEmissionsAtom,
   isConsumptionAtom,
-  isHourlyAtom,
+  isFiveMinuteOrHourlyGranularityAtom,
   productionConsumptionAtom,
   timeRangeAtom,
 } from 'utils/state/atoms';
@@ -55,15 +55,21 @@ function BarBreakdownChart({
   const { ref, width: observerWidth = 0 } = useResizeObserver<HTMLDivElement>();
   const { t } = useTranslation();
   const isBiggerThanMobile = useBreakpoint('sm');
-  const isHourly = useAtomValue(isHourlyAtom);
+  const isFineGranularity = useAtomValue(isFiveMinuteOrHourlyGranularityAtom);
   const isConsumption = useAtomValue(isConsumptionAtom);
   const width = observerWidth + X_PADDING;
   const isMobile = useIsMobile();
   const graphUnit = useMemo(
     () =>
       currentZoneDetail &&
-      determineUnit(displayByEmissions, currentZoneDetail, isConsumption, isHourly, t),
-    [currentZoneDetail, displayByEmissions, isConsumption, isHourly, t]
+      determineUnit(
+        displayByEmissions,
+        currentZoneDetail,
+        isConsumption,
+        isFineGranularity,
+        t
+      ),
+    [currentZoneDetail, displayByEmissions, isConsumption, isFineGranularity, t]
   );
   const { zoneId } = useParams<RouteParameters>();
   const { data } = useGetZone();
@@ -83,7 +89,7 @@ function BarBreakdownChart({
   const pillText = getEstimationOrAggregationTranslation(
     t,
     'pill',
-    !isHourly,
+    !isFineGranularity,
     estimationMethod,
     currentZoneDetail?.estimatedPercentage
   );
@@ -154,7 +160,7 @@ function BarBreakdownChart({
       <div className="mb-4">
         <ZoneHeaderGauges zoneKey={currentZoneDetail.zoneKey} />
       </div>
-      {!displayByEmissions && isHourly && (
+      {!displayByEmissions && isFineGranularity && (
         <CapacityLegend
           text={t('country-panel.graph-legends.installed-capacity')}
           unit={graphUnit}