@grafana/scenes 1.16.0 → 1.17.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.17.0 (Wed Oct 11 2023)
+
+#### 🚀 Enhancement
+
+- SceneTimePicker: Add posibility to navigate backwards/forwards an absolute time range [#408](https://github.com/grafana/scenes/pull/408) ([@kaydelaney](https://github.com/kaydelaney))
+
+#### Authors: 1
+
+- kay delaney ([@kaydelaney](https://github.com/kaydelaney))
+
+---
+
 # v1.16.0 (Wed Oct 11 2023)
 
 #### 🚀 Enhancement

package/dist/esm/components/SceneTimePicker.js

@@ -16,6 +16,16 @@ class SceneTimePicker extends SceneObjectBase {
       const timeRange = sceneGraph.getTimeRange(this);
       timeRange.setState({ fiscalYearStartMonth: month });
     };
+    this.onMoveBackward = () => {
+      const timeRange = sceneGraph.getTimeRange(this);
+      const { state: { value: range } } = timeRange;
+      timeRange.onTimeRangeChange(getShiftedTimeRange(TimeRangeDirection.Backward, range, Date.now()));
+    };
+    this.onMoveForward = () => {
+      const timeRange = sceneGraph.getTimeRange(this);
+      const { state: { value: range } } = timeRange;
+      timeRange.onTimeRangeChange(getShiftedTimeRange(TimeRangeDirection.Forward, range, Date.now()));
+    };
   }
 }
 SceneTimePicker.Component = SceneTimePickerRenderer;
@@ -33,10 +43,8 @@ function SceneTimePickerRenderer({ model }) {
     onChange: timeRange.onTimeRangeChange,
     timeZone,
     fiscalYearStartMonth: timeRangeState.fiscalYearStartMonth,
-    onMoveBackward: () => {
-    },
-    onMoveForward: () => {
-    },
+    onMoveBackward: model.onMoveBackward,
+    onMoveForward: model.onMoveForward,
     onZoom: model.onZoom,
     onChangeTimeZone: timeRange.onTimeZoneChange,
     onChangeFiscalYearStartMonth: model.onChangeFiscalYearStartMonth
@@ -50,6 +58,36 @@ function getZoomedTimeRange(timeRange, factor) {
   const from = center - newTimespan / 2;
   return { from: toUtc(from), to: toUtc(to), raw: { from: toUtc(from), to: toUtc(to) } };
 }
+var TimeRangeDirection = /* @__PURE__ */ ((TimeRangeDirection2) => {
+  TimeRangeDirection2[TimeRangeDirection2["Backward"] = 0] = "Backward";
+  TimeRangeDirection2[TimeRangeDirection2["Forward"] = 1] = "Forward";
+  return TimeRangeDirection2;
+})(TimeRangeDirection || {});
+function getShiftedTimeRange(dir, timeRange, upperLimit) {
+  const oldTo = timeRange.to.valueOf();
+  const oldFrom = timeRange.from.valueOf();
+  const halfSpan = (oldTo - oldFrom) / 2;
+  let fromRaw;
+  let toRaw;
+  if (dir === 0 /* Backward */) {
+    fromRaw = oldFrom - halfSpan;
+    toRaw = oldTo - halfSpan;
+  } else {
+    fromRaw = oldFrom + halfSpan;
+    toRaw = oldTo + halfSpan;
+    if (toRaw > upperLimit && oldTo < upperLimit) {
+      toRaw = upperLimit;
+      fromRaw = oldFrom;
+    }
+  }
+  const from = toUtc(fromRaw);
+  const to = toUtc(toRaw);
+  return {
+    from,
+    to,
+    raw: { from, to }
+  };
+}
 
-export { SceneTimePicker, getZoomedTimeRange };
+export { SceneTimePicker, TimeRangeDirection, getShiftedTimeRange, getZoomedTimeRange };
 //# sourceMappingURL=SceneTimePicker.js.map

package/dist/esm/components/SceneTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"SceneTimePicker.js","sources":["../../../src/components/SceneTimePicker.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TimeRangePicker } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneComponentProps, SceneObjectState } from '../core/types';\nimport { TimeRange, toUtc } from '@grafana/data';\n\nexport interface SceneTimePickerState extends SceneObjectState {\n  hidePicker?: boolean;\n  isOnCanvas?: boolean;\n}\n\nexport class SceneTimePicker extends SceneObjectBase<SceneTimePickerState> {\n  public static Component = SceneTimePickerRenderer;\n\n  public onZoom = () => {\n    const timeRange = sceneGraph.getTimeRange(this);\n    const zoomedTimeRange = getZoomedTimeRange(timeRange.state.value, 2);\n    timeRange.onTimeRangeChange(zoomedTimeRange);\n  };\n\n  public onChangeFiscalYearStartMonth = (month: number) => {\n    const timeRange = sceneGraph.getTimeRange(this);\n    timeRange.setState({ fiscalYearStartMonth: month });\n  };\n}\n\nfunction SceneTimePickerRenderer({ model }: SceneComponentProps<SceneTimePicker>) {\n  const { hidePicker, isOnCanvas } = model.useState();\n  const timeRange = sceneGraph.getTimeRange(model);\n  const timeZone = timeRange.getTimeZone();\n  const timeRangeState = timeRange.useState();\n\n  if (hidePicker) {\n    return null;\n  }\n\n  return (\n    <TimeRangePicker\n      isOnCanvas={isOnCanvas ?? true}\n      value={timeRangeState.value}\n      onChange={timeRange.onTimeRangeChange}\n      timeZone={timeZone}\n      fiscalYearStartMonth={timeRangeState.fiscalYearStartMonth}\n      onMoveBackward={() => {}}\n      onMoveForward={() => {}}\n      onZoom={model.onZoom}\n      onChangeTimeZone={timeRange.onTimeZoneChange}\n      onChangeFiscalYearStartMonth={model.onChangeFiscalYearStartMonth}\n    />\n  );\n}\n\nexport function getZoomedTimeRange(timeRange: TimeRange, factor: number): TimeRange {\n  const timespan = timeRange.to.valueOf() - timeRange.from.valueOf();\n  const center = timeRange.to.valueOf() - timespan / 2;\n  // If the timepsan is 0, zooming out would do nothing, so we force a zoom out to 30s\n  const newTimespan = timespan === 0 ? 30000 : timespan * factor;\n\n  const to = center + newTimespan / 2;\n  const from = center - newTimespan / 2;\n\n  return { from: toUtc(from), to: toUtc(to), raw: { from: toUtc(from), to: toUtc(to) } };\n}\n"],"names":[],"mappings":";;;;;;AAcO,MAAM,wBAAwB,eAAsC,CAAA;AAAA,EAApE,WAAA,GAAA;AAAA,IAAA,KAAA,CAAA,GAAA,SAAA,CAAA,CAAA;AAGL,IAAA,IAAA,CAAO,SAAS,MAAM;AACpB,MAAM,MAAA,SAAA,GAAY,UAAW,CAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAC9C,MAAA,MAAM,eAAkB,GAAA,kBAAA,CAAmB,SAAU,CAAA,KAAA,CAAM,OAAO,CAAC,CAAA,CAAA;AACnE,MAAA,SAAA,CAAU,kBAAkB,eAAe,CAAA,CAAA;AAAA,KAC7C,CAAA;AAEA,IAAO,IAAA,CAAA,4BAAA,GAA+B,CAAC,KAAkB,KAAA;AACvD,MAAM,MAAA,SAAA,GAAY,UAAW,CAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAC9C,MAAA,SAAA,CAAU,QAAS,CAAA,EAAE,oBAAsB,EAAA,KAAA,EAAO,CAAA,CAAA;AAAA,KACpD,CAAA;AAAA,GAAA;AACF,CAAA;AAba,eAAA,CACG,SAAY,GAAA,uBAAA,CAAA;AAc5B,SAAS,uBAAA,CAAwB,EAAE,KAAA,EAA+C,EAAA;AAChF,EAAA,MAAM,EAAE,UAAA,EAAY,UAAW,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AAClD,EAAM,MAAA,SAAA,GAAY,UAAW,CAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAC/C,EAAM,MAAA,QAAA,GAAW,UAAU,WAAY,EAAA,CAAA;AACvC,EAAM,MAAA,cAAA,GAAiB,UAAU,QAAS,EAAA,CAAA;AAE1C,EAAA,IAAI,UAAY,EAAA;AACd,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,IACC,YAAY,UAAc,IAAA,IAAA,GAAA,UAAA,GAAA,IAAA;AAAA,IAC1B,OAAO,cAAe,CAAA,KAAA;AAAA,IACtB,UAAU,SAAU,CAAA,iBAAA;AAAA,IACpB,QAAA;AAAA,IACA,sBAAsB,cAAe,CAAA,oBAAA;AAAA,IACrC,gBAAgB,MAAM;AAAA,KAAC;AAAA,IACvB,eAAe,MAAM;AAAA,KAAC;AAAA,IACtB,QAAQ,KAAM,CAAA,MAAA;AAAA,IACd,kBAAkB,SAAU,CAAA,gBAAA;AAAA,IAC5B,8BAA8B,KAAM,CAAA,4BAAA;AAAA,GACtC,CAAA,CAAA;AAEJ,CAAA;AAEgB,SAAA,kBAAA,CAAmB,WAAsB,MAA2B,EAAA;AAClF,EAAA,MAAM,WAAW,SAAU,CAAA,EAAA,CAAG,SAAY,GAAA,SAAA,CAAU,KAAK,OAAQ,EAAA,CAAA;AACjE,EAAA,MAAM,MAAS,GAAA,SAAA,CAAU,EAAG,CAAA,OAAA,KAAY,QAAW,GAAA,CAAA,CAAA;AAEnD,EAAA,MAAM,WAAc,GAAA,QAAA,KAAa,CAAI,GAAA,GAAA,GAAQ,QAAW,GAAA,MAAA,CAAA;AAExD,EAAM,MAAA,EAAA,GAAK,SAAS,WAAc,GAAA,CAAA,CAAA;AAClC,EAAM,MAAA,IAAA,GAAO,SAAS,WAAc,GAAA,CAAA,CAAA;AAEpC,EAAA,OAAO,EAAE,IAAM,EAAA,KAAA,CAAM,IAAI,CAAG,EAAA,EAAA,EAAI,MAAM,EAAE,CAAA,EAAG,KAAK,EAAE,IAAA,EAAM,MAAM,IAAI,CAAA,EAAG,IAAI,KAAM,CAAA,EAAE,GAAI,EAAA,CAAA;AACvF;;;;"}
+{"version":3,"file":"SceneTimePicker.js","sources":["../../../src/components/SceneTimePicker.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TimeRangePicker } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneComponentProps, SceneObjectState } from '../core/types';\nimport { TimeRange, toUtc } from '@grafana/data';\n\nexport interface SceneTimePickerState extends SceneObjectState {\n  hidePicker?: boolean;\n  isOnCanvas?: boolean;\n}\n\nexport class SceneTimePicker extends SceneObjectBase<SceneTimePickerState> {\n  public static Component = SceneTimePickerRenderer;\n\n  public onZoom = () => {\n    const timeRange = sceneGraph.getTimeRange(this);\n    const zoomedTimeRange = getZoomedTimeRange(timeRange.state.value, 2);\n    timeRange.onTimeRangeChange(zoomedTimeRange);\n  };\n\n  public onChangeFiscalYearStartMonth = (month: number) => {\n    const timeRange = sceneGraph.getTimeRange(this);\n    timeRange.setState({ fiscalYearStartMonth: month });\n  };\n\n  public onMoveBackward = () => {\n    const timeRange = sceneGraph.getTimeRange(this);\n    const { state: { value: range } }  = timeRange;\n\n    timeRange.onTimeRangeChange(getShiftedTimeRange(TimeRangeDirection.Backward, range, Date.now()));\n  };\n\n  public onMoveForward = () => {\n    const timeRange = sceneGraph.getTimeRange(this);\n    const { state: { value: range } }  = timeRange;\n\n    timeRange.onTimeRangeChange(getShiftedTimeRange(TimeRangeDirection.Forward, range, Date.now()));\n  };\n}\n\nfunction SceneTimePickerRenderer({ model }: SceneComponentProps<SceneTimePicker>) {\n  const { hidePicker, isOnCanvas } = model.useState();\n  const timeRange = sceneGraph.getTimeRange(model);\n  const timeZone = timeRange.getTimeZone();\n  const timeRangeState = timeRange.useState();\n\n  if (hidePicker) {\n    return null;\n  }\n\n  return (\n    <TimeRangePicker\n      isOnCanvas={isOnCanvas ?? true}\n      value={timeRangeState.value}\n      onChange={timeRange.onTimeRangeChange}\n      timeZone={timeZone}\n      fiscalYearStartMonth={timeRangeState.fiscalYearStartMonth}\n      onMoveBackward={model.onMoveBackward}\n      onMoveForward={model.onMoveForward}\n      onZoom={model.onZoom}\n      onChangeTimeZone={timeRange.onTimeZoneChange}\n      onChangeFiscalYearStartMonth={model.onChangeFiscalYearStartMonth}\n    />\n  );\n}\n\nexport function getZoomedTimeRange(timeRange: TimeRange, factor: number): TimeRange {\n  const timespan = timeRange.to.valueOf() - timeRange.from.valueOf();\n  const center = timeRange.to.valueOf() - timespan / 2;\n  // If the timepsan is 0, zooming out would do nothing, so we force a zoom out to 30s\n  const newTimespan = timespan === 0 ? 30000 : timespan * factor;\n\n  const to = center + newTimespan / 2;\n  const from = center - newTimespan / 2;\n\n  return { from: toUtc(from), to: toUtc(to), raw: { from: toUtc(from), to: toUtc(to) } };\n}\n\nexport enum TimeRangeDirection {\n  Backward,\n  Forward\n}\n\nexport function getShiftedTimeRange(dir: TimeRangeDirection, timeRange: TimeRange, upperLimit: number): TimeRange {\n  const oldTo = timeRange.to.valueOf();\n  const oldFrom = timeRange.from.valueOf();\n  const halfSpan = (oldTo - oldFrom) / 2;\n\n  let fromRaw: number;\n  let toRaw: number;\n  if (dir === TimeRangeDirection.Backward) {\n    fromRaw = oldFrom - halfSpan;\n    toRaw = oldTo - halfSpan;\n  } else {\n    fromRaw = oldFrom + halfSpan;\n    toRaw = oldTo + halfSpan;\n\n    if (toRaw > upperLimit && oldTo < upperLimit) {\n      toRaw = upperLimit;\n      fromRaw = oldFrom;\n    }\n  }\n\n  const from = toUtc(fromRaw);\n  const to = toUtc(toRaw);\n  return {\n    from,\n    to,\n    raw: { from, to }\n  };\n}\n"],"names":["TimeRangeDirection"],"mappings":"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"}

package/dist/index.d.ts

@@ -1346,6 +1346,8 @@ declare class SceneTimePicker extends SceneObjectBase<SceneTimePickerState> {
     static Component: typeof SceneTimePickerRenderer;
     onZoom: () => void;
     onChangeFiscalYearStartMonth: (month: number) => void;
+    onMoveBackward: () => void;
+    onMoveForward: () => void;
 }
 declare function SceneTimePickerRenderer({ model }: SceneComponentProps<SceneTimePicker>): JSX.Element | null;
 

package/dist/index.js

@@ -7124,6 +7124,16 @@ class SceneTimePicker extends SceneObjectBase {
       const timeRange = sceneGraph.getTimeRange(this);
       timeRange.setState({ fiscalYearStartMonth: month });
     };
+    this.onMoveBackward = () => {
+      const timeRange = sceneGraph.getTimeRange(this);
+      const { state: { value: range } } = timeRange;
+      timeRange.onTimeRangeChange(getShiftedTimeRange(TimeRangeDirection.Backward, range, Date.now()));
+    };
+    this.onMoveForward = () => {
+      const timeRange = sceneGraph.getTimeRange(this);
+      const { state: { value: range } } = timeRange;
+      timeRange.onTimeRangeChange(getShiftedTimeRange(TimeRangeDirection.Forward, range, Date.now()));
+    };
   }
 }
 SceneTimePicker.Component = SceneTimePickerRenderer;
@@ -7141,10 +7151,8 @@ function SceneTimePickerRenderer({ model }) {
     onChange: timeRange.onTimeRangeChange,
     timeZone,
     fiscalYearStartMonth: timeRangeState.fiscalYearStartMonth,
-    onMoveBackward: () => {
-    },
-    onMoveForward: () => {
-    },
+    onMoveBackward: model.onMoveBackward,
+    onMoveForward: model.onMoveForward,
     onZoom: model.onZoom,
     onChangeTimeZone: timeRange.onTimeZoneChange,
     onChangeFiscalYearStartMonth: model.onChangeFiscalYearStartMonth
@@ -7158,6 +7166,36 @@ function getZoomedTimeRange(timeRange, factor) {
   const from = center - newTimespan / 2;
   return { from: data.toUtc(from), to: data.toUtc(to), raw: { from: data.toUtc(from), to: data.toUtc(to) } };
 }
+var TimeRangeDirection = /* @__PURE__ */ ((TimeRangeDirection2) => {
+  TimeRangeDirection2[TimeRangeDirection2["Backward"] = 0] = "Backward";
+  TimeRangeDirection2[TimeRangeDirection2["Forward"] = 1] = "Forward";
+  return TimeRangeDirection2;
+})(TimeRangeDirection || {});
+function getShiftedTimeRange(dir, timeRange, upperLimit) {
+  const oldTo = timeRange.to.valueOf();
+  const oldFrom = timeRange.from.valueOf();
+  const halfSpan = (oldTo - oldFrom) / 2;
+  let fromRaw;
+  let toRaw;
+  if (dir === 0 /* Backward */) {
+    fromRaw = oldFrom - halfSpan;
+    toRaw = oldTo - halfSpan;
+  } else {
+    fromRaw = oldFrom + halfSpan;
+    toRaw = oldTo + halfSpan;
+    if (toRaw > upperLimit && oldTo < upperLimit) {
+      toRaw = upperLimit;
+      fromRaw = oldFrom;
+    }
+  }
+  const from = data.toUtc(fromRaw);
+  const to = data.toUtc(toRaw);
+  return {
+    from,
+    to,
+    raw: { from, to }
+  };
+}
 
 var __defProp$4 = Object.defineProperty;
 var __defProps$2 = Object.defineProperties;