update

Author: sirmmo

src/app/components/Map/VectorWrapperLayer.tsx

@@ -18,8 +18,15 @@ export const VectorWrapperLayer = (props: any) => {
   const [refReady, setRefReady] = useState(false);
   let popupRef: any = useRef();
 
-  const { selectCallback, selectedPoint, openCharts, unit, precision, mode } =
-    props;
+  const {
+    selectCallback,
+    selectedPoint,
+    openCharts,
+    unit,
+    precision,
+    mode,
+    ap,
+  } = props;
   const map = useMap();
   const context = useLeafletContext();
 
@@ -122,6 +129,7 @@ export const VectorWrapperLayer = (props: any) => {
                 currentTimeserie={currentTimeSerie}
                 unit={unit}
                 precision={precision}
+                ap={ap}
               ></MapPopup>
             </Box>
           </Popup>

src/app/components/Map/index.tsx

@@ -377,6 +377,7 @@ const Map = (props: MapProps) => {
         zIndex={600}
         mode={mode}
         data={data}
+        ap={currentMap.aggregation_period}
         ref={vectorWrapperRef}
         selectCallback={point => setPoint(point)}
         selectedPoint={selectedPoint}

src/app/components/MapSearch/index.tsx

@@ -56,6 +56,7 @@ export interface MapPopupProps {
   precision: number;
   mode?: string;
   data?: string;
+  ap?: string;
 }
 
 export const ValueRenderer = ({ time, value, unit }) => {
@@ -351,13 +352,13 @@ export const MapPopup: React.FunctionComponent<MapPopupProps> = props => {
     currentTimeserie,
     mode,
     data,
+    ap,
   } = props;
   //const { cities, selected_map } = useSelector((state: any) => state.map);
 
   const [timeserie, setTimeSerie] = useState<any[]>([]);
   const map = useMap();
   const context = useLeafletContext();
-  const [sp, setSearchParams] = useSearchParams();
   const { t } = useTranslation();
 
   let [tt, setTt] = useState(2035);
@@ -372,8 +373,6 @@ export const MapPopup: React.FunctionComponent<MapPopupProps> = props => {
   let oyr = 0;
   let otsindex = 0;
 
-  const [ap, setAp] = useState<string>('30yr');
-
   useEffect(() => {
     if (currentTimeserie && currentTimeserie.values) {
       setTimeSerie([...currentTimeserie.values]);
@@ -461,16 +460,6 @@ export const MapPopup: React.FunctionComponent<MapPopupProps> = props => {
     });
   }, [baseYear]);
 
-  useEffect(() => {
-    let url = new URL(window.location.href);
-    if (url.searchParams.has('aggregation_period')) {
-      //@ts-ignore
-      setAp(url.searchParams.get('aggregation_period'));
-    } else {
-      setAp('30yr');
-    }
-  }, [sp]);
-
   useEffect(() => {
     let ctt = timeserie[tsIndex]?.datetime;
     let ctv = timeserie[tsIndex]?.value;
@@ -482,8 +471,7 @@ export const MapPopup: React.FunctionComponent<MapPopupProps> = props => {
   return (
     <div style={{ display: 'flex', flexDirection: 'row' }}>
       {timeserie &&
-        (mode !== 'simple' ||
-          (mode === 'simple' && (data === 'past' || ap === '30yr'))) && (
+        (mode !== 'simple' || (mode === 'simple' && ap !== 'annual')) && (
           <CompactValueRenderer
             time={tt}
             value={tv}