Basic implementation

Author: corradio

web/src/features/charts/OriginChart.tsx

@@ -1,4 +1,3 @@
-import EstimationBadge from 'components/EstimationBadge';
 import { max, sum } from 'd3-array';
 import { useAtomValue } from 'jotai';
 import { useEffect, useMemo, useState } from 'react';
@@ -11,7 +10,8 @@ import { isConsumptionAtom, isHourlyAtom } from 'utils/state/atoms';
 
 import { ChartSubtitle, ChartTitle } from './ChartTitle';
 import AreaGraph from './elements/AreaGraph';
-import { getBadgeTextAndIcon, getGenerationTypeKey, noop } from './graphUtils';
+import { EstimationLegendIcon } from './elements/EstimationMarkers';
+import { getGenerationTypeKey, noop } from './graphUtils';
 import useOriginChartData from './hooks/useOriginChartData';
 import { MissingExchangeDataDisclaimer } from './MissingExchangeData';
 import { NotEnoughDataMessage } from './NotEnoughDataMessage';
@@ -91,10 +91,6 @@ function OriginChart({ displayByEmissions, datetimes, timeRange }: OriginChartPr
 
   const hasEnoughDataToDisplay = datetimes?.length > 2;
 
-  const { text, icon } = getBadgeTextAndIcon(chartData, t);
-
-  const badge = <EstimationBadge text={text} Icon={icon} />;
-
   if (!hasEnoughDataToDisplay) {
     return (
       <NotEnoughDataMessage
@@ -115,12 +111,27 @@ function OriginChart({ displayByEmissions, datetimes, timeRange }: OriginChartPr
     return hasEstimationPill;
   });
 
+  // const { text, icon } = getBadgeTextAndIcon(chartData, t);
+  // const badge = <EstimationBadge text={text} Icon={icon} />;
+
+  const someEstimated = estimated.some(Boolean);
+
+  const badge = someEstimated ? (
+    <div
+      className="flex h-6 flex-row items-center gap-1 whitespace-nowrap px-2 py-1 text-xs font-semibold"
+      style={{ color: '#DB58FF' }}
+    >
+      <EstimationLegendIcon />
+      Preliminary
+    </div>
+  ) : undefined;
+
   return (
     <RoundedCard>
       <ChartTitle
         titleText={t(`country-history.${titleDisplayMode}${titleMixMode}.${timeRange}`)}
         badge={badge}
-        isEstimated={Boolean(text)}
+        isEstimated={someEstimated}
         unit={valueAxisLabel}
         id={Charts.ORIGIN_CHART}
         subtitle={<ChartSubtitle datetimes={datetimes} timeRange={timeRange} />}

web/src/features/charts/elements/AreaGraph.tsx

@@ -107,7 +107,7 @@ interface AreagraphProps {
   isDisabled?: boolean;
   height: string;
   datetimes: Date[];
-  estimated: boolean[];
+  estimated?: boolean[];
   selectedTimeRange: TimeRange;
   tooltip: (props: InnerAreaGraphTooltipProps) => JSX.Element | null;
   tooltipSize?: 'small' | 'large';
@@ -188,7 +188,7 @@ function AreaGraph({
     [datetimes, endTime]
   );
   const estimatedWithNext = useMemo(
-    () => (estimated ? [...estimated, estimated?.at(-1)] : estimated),
+    () => (estimated ? [...estimated, estimated?.at(-1) || false] : estimated),
     [estimated]
   );
 
@@ -295,6 +295,7 @@ function AreaGraph({
           datetimes={datetimesWithNext}
           estimated={estimatedWithNext}
           scaleWidth={containerWidth}
+          scaleHeight={containerHeight}
           transform={`translate(0 ${containerHeight})`}
           className="h-[22px] w-full overflow-visible"
         />

web/src/features/charts/elements/EstimationMarkers.tsx

@@ -1,10 +1,41 @@
 import { scaleTime } from 'd3-scale';
 import { area, curveStepAfter } from 'd3-shape';
+import { useDarkMode } from 'hooks/theme';
 import PulseLoader from 'react-spinners/PulseLoader';
 import useResizeObserver from 'use-resize-observer/polyfilled';
 
-function EstimationMarkers({ datetimes, scaleWidth, className, transform, estimated }) {
+const DARK_MODE_PATTERN_STROKE = '#404040';
+const LIGHT_MODE_PATTERN_STROKE = 'darkgray';
+const MARKER_COLOR = '#DB58FF';
+
+export function EstimationLegendIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12">
+      <rect width="24" height="24" fill="url(#pattern)" transform="scale(0.5)" />
+      <line x1="0" y1="11" x2="12" y2="11" stroke="#DB58FF" strokeWidth="2" />
+    </svg>
+  );
+}
+
+function EstimationMarkers({
+  datetimes,
+  scaleWidth,
+  scaleHeight,
+  className,
+  transform,
+  estimated,
+  markerHeight = 3,
+}: {
+  datetimes: any[] | undefined;
+  scaleWidth: number;
+  scaleHeight: number;
+  className?: string;
+  transform?: string;
+  estimated?: boolean[];
+  markerHeight?: number;
+}) {
   const { ref } = useResizeObserver<SVGSVGElement>();
+  const isDarkMode = useDarkMode();
 
   if (datetimes === undefined || estimated == null) {
     return (
@@ -16,25 +47,58 @@ function EstimationMarkers({ datetimes, scaleWidth, className, transform, estima
 
   const startDate = datetimes[0];
   const endDate = datetimes.at(-1);
+  if (!startDate || !endDate) {
+    return null; // No valid dates to render
+  }
   const timeScale = scaleTime().domain([startDate, endDate]).range([0, scaleWidth]);
 
-  const layerArea = area()
+  const markerPathData = area()
     // see https://github.com/d3/d3-shape#curveStep
     .curve(curveStepAfter)
-    .x(timeScale)
+    .x((d: any) => timeScale(d))
+    .y0(0)
+    .y1(markerHeight)
+    .defined((d, index) => Boolean(estimated?.at(index)));
+  const backgroundPathData = area()
+    .curve(curveStepAfter)
+    .x((d: any) => timeScale(d))
     .y0(0)
-    .y1(3)
-    .defined((d, index) => estimated?.at(index));
+    .y1(-scaleHeight)
+    .defined((d, index) => Boolean(estimated?.at(index)));
+
+  const patternStroke = isDarkMode ? DARK_MODE_PATTERN_STROKE : LIGHT_MODE_PATTERN_STROKE;
+  const patternBackground = isDarkMode ? 'black' : 'white';
 
   return (
     <svg className={className} ref={ref}>
+      <defs>
+        <pattern
+          id="pattern"
+          width="8"
+          height="8"
+          viewBox="0 0 8 8"
+          patternUnits="userSpaceOnUse"
+        >
+          <rect width="8" height="8" fill={patternBackground} />
+          <path d="M-5 13L15 -7" stroke={patternStroke} />
+          <path d="M-1 17L19 -3" stroke={patternStroke} />
+          <path d="M-10 10L10 -10" stroke={patternStroke} />
+        </pattern>
+      </defs>
       <g
-        fill="orange"
+        fill={MARKER_COLOR}
         textAnchor="middle"
         transform={transform}
         style={{ pointerEvents: 'none' }}
       >
-        <path d={layerArea(datetimes)} />
+        <path d={markerPathData(datetimes) || undefined} />
+      </g>
+      <g textAnchor="middle" transform={transform} style={{ pointerEvents: 'none' }}>
+        <path
+          d={backgroundPathData(datetimes) || undefined}
+          fill="url(#pattern)"
+          opacity={0.4}
+        />
       </g>
     </svg>
   );