@opengeoweb/time-series 20.2.0-nightly-20261029 → 21.0.0

package/dist/index.esm.js

@@ -7950,6 +7950,177 @@ function getPlotCharts(plotsWithData) {
   return plotCharts;
 }
 
+/** One clock per view; standalone charts can use their own clock. Times are milliseconds. */
+var useCurrentTime = function useCurrentTime(enabled) {
+  if (enabled === void 0) {
+    enabled = true;
+  }
+  var _React$useState = React.useState(Date.now),
+    now = _React$useState[0],
+    setNow = _React$useState[1];
+  React.useEffect(function () {
+    if (!enabled) {
+      return undefined;
+    }
+    var update = function update() {
+      return setNow(Date.now());
+    };
+    update();
+    var timer = window.setInterval(update, 60000);
+    return function () {
+      return window.clearInterval(timer);
+    };
+  }, [enabled]);
+  return now;
+};
+/** Fractional category index, preserving the spacing of the chart's time axis. */
+var getCurrentTimeIndex = function getCurrentTimeIndex(timestamps, currentTime) {
+  if (!Number.isFinite(currentTime) || !timestamps.length || currentTime < timestamps[0] || currentTime > timestamps[timestamps.length - 1]) {
+    return undefined;
+  }
+  var next = timestamps.findIndex(function (time) {
+    return time >= currentTime;
+  });
+  if (next < 0) {
+    return undefined;
+  }
+  if (next === 0 || timestamps[next] === currentTime) {
+    return next;
+  }
+  return next - 1 + (currentTime - timestamps[next - 1]) / (timestamps[next] - timestamps[next - 1]);
+};
+var getCurrentTimeLines = function getCurrentTimeLines(instance, currentTime, showPlots, showZoom) {
+  if (instance.isDisposed()) {
+    return [];
+  }
+  var api = instance;
+  var model = api.getModel();
+  if (!model) {
+    return [];
+  }
+  var lines = [];
+  model.eachComponent('xAxis', function (axis) {
+    var timestamps = axis.getCategories().map(function (time) {
+      return Date.parse(time);
+    });
+    var index = getCurrentTimeIndex(timestamps, currentTime);
+    if (index === undefined) {
+      return;
+    }
+    var _axis$axis$scale$getE = axis.axis.scale.getExtent(),
+      min = _axis$axis$scale$getE[0],
+      max = _axis$axis$scale$getE[1];
+    if (showPlots && index >= min && index <= max) {
+      var _model$getComponent;
+      var rect = (_model$getComponent = model.getComponent('grid', axis.get('gridIndex'))) == null || (_model$getComponent = _model$getComponent.coordinateSystem) == null ? void 0 : _model$getComponent.getRect();
+      var lower = Math.floor(index);
+      var upper = Math.ceil(index);
+      var left = instance.convertToPixel({
+        xAxisIndex: axis.componentIndex
+      }, lower);
+      var right = instance.convertToPixel({
+        xAxisIndex: axis.componentIndex
+      }, upper);
+      var x = left + (right - left) * (index - lower);
+      if (rect && Number.isFinite(x) && x >= rect.x && x <= rect.x + rect.width) {
+        lines.push({
+          id: "plot-" + axis.componentIndex,
+          x: x,
+          y: rect.y,
+          height: rect.height
+        });
+      }
+    }
+    if (showZoom && axis.componentIndex === 0) {
+      var _displayables$sliderG;
+      var zoom = model.getComponent('dataZoom', 0);
+      var view = zoom && zoom.get('show') && api.getViewOfComponentModel(zoom);
+      var _ref = view || {},
+        displayables = _ref._displayables;
+      var background = displayables == null || (_displayables$sliderG = displayables.sliderGroup) == null ? void 0 : _displayables$sliderG.childAt(0);
+      if (background) {
+        background.getComputedTransform();
+        var start = background.transformCoordToGlobal(0, 0);
+        var end = background.transformCoordToGlobal(background.shape.width, background.shape.height);
+        var fraction = timestamps.length === 1 ? 0.5 : index / (timestamps.length - 1);
+        lines.push({
+          id: 'zoom',
+          x: start[0] + fraction * (end[0] - start[0]),
+          y: Math.min(start[1], end[1]),
+          height: Math.abs(end[1] - start[1])
+        });
+      }
+    }
+  });
+  return lines;
+};
+var CurrentTime = function CurrentTime(_ref2) {
+  var instance = _ref2.instance,
+    currentTime = _ref2.currentTime,
+    showPlots = _ref2.showPlots,
+    showZoom = _ref2.showZoom;
+  var theme = useTheme();
+  var _React$useState2 = React.useState([]),
+    lines = _React$useState2[0],
+    setLines = _React$useState2[1];
+  React.useEffect(function () {
+    if (!instance) {
+      return undefined;
+    }
+    var update = function update() {
+      var next = getCurrentTimeLines(instance, currentTime, showPlots, showZoom);
+      setLines(function (previous) {
+        return JSON.stringify(previous) === JSON.stringify(next) ? previous : next;
+      });
+    };
+    update();
+    instance.on('rendered', update);
+    return function () {
+      if (!instance.isDisposed()) {
+        instance.off('rendered', update);
+      }
+    };
+  }, [instance, currentTime, showPlots, showZoom]);
+  var _theme$palette$geoweb = theme.palette.geowebColors.timeSlider,
+    playerNeedleTime = _theme$palette$geoweb.playerNeedleTime,
+    playerNeedleTimeTop = _theme$palette$geoweb.playerNeedleTimeTop;
+  return jsx("svg", {
+    "aria-hidden": "true",
+    "data-testid": "CurrentTime",
+    style: {
+      position: 'absolute',
+      inset: 0,
+      width: '100%',
+      height: '100%',
+      pointerEvents: 'none',
+      overflow: 'hidden'
+    },
+    children: lines.map(function (_ref3) {
+      var id = _ref3.id,
+        x = _ref3.x,
+        y = _ref3.y,
+        height = _ref3.height;
+      return jsxs("g", {
+        children: [jsx("line", {
+          stroke: playerNeedleTime.rgba,
+          strokeWidth: 7,
+          x1: x,
+          x2: x,
+          y1: y,
+          y2: y + height
+        }), jsx("line", {
+          stroke: playerNeedleTimeTop.rgba,
+          strokeWidth: 2,
+          x1: x,
+          x2: x,
+          y1: y,
+          y2: y + height
+        })]
+      }, id);
+    })
+  });
+};
+
 // Guard: mocked ReactECharts (forwardRef) has no real prototype chain.
 var reactEChartsProto = ReactECharts.prototype;
 var echartsReactCoreProto = reactEChartsProto ? Object.getPrototypeOf(reactEChartsProto) : null;
@@ -8194,7 +8365,12 @@ var TimeSeriesChart = function TimeSeriesChart(_ref3) {
     shouldShowZoom = _ref3$shouldShowZoom === void 0 ? true : _ref3$shouldShowZoom,
     controlsOnly = _ref3.controlsOnly,
     synchronization = _ref3.synchronization,
-    sharedTimesteps = _ref3.sharedTimesteps;
+    sharedTimesteps = _ref3.sharedTimesteps,
+    currentTime = _ref3.currentTime;
+  var now = useCurrentTime(currentTime === undefined && controlsOnly !== 'legend');
+  var _React$useState2 = React.useState(null),
+    indicatorInstance = _React$useState2[0],
+    setIndicatorInstance = _React$useState2[1];
   var theme = useTheme();
   var isDark = theme.palette.mode === 'dark';
   var containerRef = React.useRef(null);
@@ -8315,18 +8491,21 @@ var TimeSeriesChart = function TimeSeriesChart(_ref3) {
       return observer.disconnect();
     };
   }, [observesContainer, updateHeight]);
-  return option ? jsx("div", {
+  return option ? jsxs("div", {
     "data-testid": controlsOnly ? {
       legend: 'TimeSeriesLegend',
       zoom: 'TimeSeriesZoom'
     }[controlsOnly] : 'TimeSeriesChart',
     ref: containerRef,
     style: fitToContainer ? {
+      position: 'relative',
       height: '100%',
       width: '100%',
       minHeight: 0
-    } : undefined,
-    children: jsx(ReactECharts, {
+    } : {
+      position: 'relative'
+    },
+    children: [jsx(ReactECharts, {
       autoResize: !observesContainer,
       notMerge: true,
       onChartReady: function onChartReady(instance) {
@@ -8338,6 +8517,7 @@ var TimeSeriesChart = function TimeSeriesChart(_ref3) {
           synchronization == null || synchronization.register(instance, controlsOnly !== 'zoom');
         }
         updateHeight(instance);
+        setIndicatorInstance(instance);
       },
       // noop, prevent flickering when toggling legend
       onEvents: {
@@ -8385,7 +8565,12 @@ var TimeSeriesChart = function TimeSeriesChart(_ref3) {
         minWidth: fitToContainer ? 0 : MIN_GRAPH_WIDTH
       },
       theme: isDark ? EChartsDarkTheme : EChartsLightTheme
-    })
+    }), controlsOnly !== 'legend' && jsx(CurrentTime, {
+      currentTime: currentTime != null ? currentTime : now,
+      instance: indicatorInstance,
+      showPlots: !controlsOnly,
+      showZoom: controlsOnly === 'zoom' || shouldShowZoom
+    })]
   }) : null;
 };
 
@@ -8538,7 +8723,8 @@ var TimeSeriesPlot = function TimeSeriesPlot(_ref) {
   var plot = _ref.plot,
     parametersFailingInAllPlots = _ref.parametersFailingInAllPlots,
     synchronization = _ref.synchronization,
-    sharedTimesteps = _ref.sharedTimesteps;
+    sharedTimesteps = _ref.sharedTimesteps,
+    currentTime = _ref.currentTime;
   var _useTimeseriesTransla = useTimeseriesTranslation(),
     t = _useTimeseriesTransla.t;
   var commonKeys = new Set(parametersFailingInAllPlots.map(getParameterKey));
@@ -8566,6 +8752,7 @@ var TimeSeriesPlot = function TimeSeriesPlot(_ref) {
         minHeight: 0
       },
       children: jsx(TimeSeriesChart, {
+        currentTime: currentTime,
         fitToContainer: true,
         plotsWithData: [plot],
         sharedTimesteps: sharedTimesteps,
@@ -8590,6 +8777,7 @@ var TimeSeriesView = /*#__PURE__*/React.memo(function (_ref2) {
   var _useTimeseriesTransla2 = useTimeseriesTranslation(),
     t = _useTimeseriesTransla2.t;
   var synchronization = useChartSynchronization();
+  var currentTime = useCurrentTime();
   var _useGetPlotsWithData = useGetPlotsWithData(plotPreset, selectedLocation, services, splitGeoJsonByCollection, t, syncgroupTimeState),
     plotsWithData = _useGetPlotsWithData.data,
     isFetchingPlots = _useGetPlotsWithData.isFetching;
@@ -8652,6 +8840,7 @@ var TimeSeriesView = /*#__PURE__*/React.memo(function (_ref2) {
       return item.plotId === plotId;
     });
     return plot ? jsx(TimeSeriesPlot, {
+      currentTime: currentTime,
       parametersFailingInAllPlots: parametersFailingInAllPlots,
       plot: plot,
       sharedTimesteps: sharedTimesteps,
@@ -8710,6 +8899,7 @@ var TimeSeriesView = /*#__PURE__*/React.memo(function (_ref2) {
       },
       children: jsx(TimeSeriesChart, {
         controlsOnly: "zoom",
+        currentTime: currentTime,
         plotsWithData: plotsWithData,
         sharedTimesteps: sharedTimesteps,
         shouldShowLegend: false,

package/dist/src/lib/components/TimeSeries/CurrentTime/CurrentTime.d.ts

@@ -0,0 +1,20 @@
+import type { EChartsInstance } from 'echarts-for-react';
+import React from 'react';
+/** One clock per view; standalone charts can use their own clock. Times are milliseconds. */
+export declare const useCurrentTime: (enabled?: boolean) => number;
+/** Fractional category index, preserving the spacing of the chart's time axis. */
+export declare const getCurrentTimeIndex: (timestamps: number[], currentTime: number) => number | undefined;
+interface IndicatorLine {
+    id: string;
+    x: number;
+    y: number;
+    height: number;
+}
+export declare const getCurrentTimeLines: (instance: EChartsInstance, currentTime: number, showPlots: boolean, showZoom: boolean) => IndicatorLine[];
+export declare const CurrentTime: React.FC<{
+    instance: EChartsInstance | null;
+    currentTime: number;
+    showPlots: boolean;
+    showZoom: boolean;
+}>;
+export {};

package/dist/src/lib/components/TimeSeries/CurrentTime/index.d.ts

@@ -0,0 +1 @@
+export * from './CurrentTime';

package/dist/src/lib/components/TimeSeries/TimeSeriesChart.d.ts

@@ -52,5 +52,6 @@ export declare const TimeSeriesChart: React.FC<{
     controlsOnly?: 'legend' | 'zoom';
     synchronization?: ReturnType<typeof useChartSynchronization>;
     sharedTimesteps?: Date[];
+    currentTime?: number;
 }>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@opengeoweb/time-series",
-    "version": "20.2.0-nightly-20261029",
+    "version": "21.0.0",
     "description": "GeoWeb time-series library for the opengeoweb project",
     "license": "Apache-2.0",
     "repository": {
@@ -21,26 +21,26 @@
     },
     "dependencies": {
         "immer": "^10.0.3",
-        "@opengeoweb/shared": "20.2.0-nightly-20261029",
+        "@opengeoweb/shared": "21.0.0",
         "@reduxjs/toolkit": "^2.6.1",
         "react-redux": "^9.2.0",
-        "@opengeoweb/webmap": "20.2.0-nightly-20261029",
-        "@opengeoweb/webmap-react": "20.2.0-nightly-20261029",
+        "@opengeoweb/webmap": "21.0.0",
+        "@opengeoweb/webmap-react": "21.0.0",
         "lodash": "^4.18.1",
-        "@opengeoweb/api": "20.2.0-nightly-20261029",
-        "@opengeoweb/authentication": "20.2.0-nightly-20261029",
-        "@opengeoweb/theme": "20.2.0-nightly-20261029",
-        "@opengeoweb/store": "20.2.0-nightly-20261029",
+        "@opengeoweb/api": "21.0.0",
+        "@opengeoweb/authentication": "21.0.0",
+        "@opengeoweb/theme": "21.0.0",
+        "@opengeoweb/store": "21.0.0",
         "echarts-for-react": "^3.0.6",
         "echarts": "^6.1.0",
         "react-sortablejs": "^6.1.4",
-        "@opengeoweb/snackbar": "20.2.0-nightly-20261029",
+        "@opengeoweb/snackbar": "21.0.0",
         "react-window": "^2.2.6",
         "msw": "^2.7.3",
         "i18next": "^25.0.1",
         "react-i18next": "^15.1.1",
-        "@opengeoweb/core": "20.2.0-nightly-20261029",
-        "@opengeoweb/form-fields": "20.2.0-nightly-20261029",
+        "@opengeoweb/core": "21.0.0",
+        "@opengeoweb/form-fields": "21.0.0",
         "@mui/material": "^9.0.1",
         "react-hook-form": "^7.61.1",
         "uuid": "^11.1.1",