Add useDashboardTimeRange hook

packages/components/CHANGELOG.md

@@ -1,10 +1,11 @@
 # Change Log
 
-## 2.7.0 (IN PROGRESS)
+## 2.7.0 (2024-07-10)
 
 ### Features
 
 - Update to use auto-apply selectors (#49)
+- Add useDashboardTimeRange hook (#50)
 
 ## 2.6.0 (2024-06-12)
 

packages/components/README.md

@@ -12,6 +12,7 @@
 
 - `useFormBuilder` allows to create declarative forms.
 - `createUseDataHook` allows to create `useData` hook to get data through data source api.
+- `useDashboardTimeRange` allows to use actual dashboard time range.
 
 ### Utils
 

packages/components/package.json

@@ -3,6 +3,7 @@
   "dependencies": {
     "@emotion/css": "^11.11.2",
     "@grafana/data": "^11.1.0",
+    "@grafana/runtime": "^11.1.0",
     "@grafana/ui": "^11.1.0",
     "@volkovlabs/jest-selectors": "^1.4.1",
     "classnames": "^2.5.1",
@@ -87,5 +88,5 @@
     "typecheck": "tsc --emitDeclarationOnly false --noEmit"
   },
   "types": "dist/index.d.ts",
-  "version": "2.6.0"
+  "version": "2.7.0"
 }

packages/components/rollup.config.mjs

@@ -24,6 +24,7 @@ export default [
       '@emotion/react',
       'rc-tooltip',
       '@grafana/data',
+      '@grafana/runtime',
       'lodash',
       'rc-slider/assets/index.css',
       '@volkovlabs/jest-selectors',
@@ -44,6 +45,7 @@ export default [
       '@emotion/react',
       'rc-tooltip',
       '@grafana/data',
+      '@grafana/runtime',
       'lodash',
       'rc-slider/assets/index.css',
       '@volkovlabs/jest-selectors',

packages/components/src/hooks/index.ts

@@ -1,2 +1,3 @@
+export * from './useDashboardTimeRange';
 export * from './useData';
 export * from './useFormBuilder';

packages/components/src/hooks/useDashboardTimeRange.ts

@@ -0,0 +1,36 @@
+import { EventBus, TimeRange } from '@grafana/data';
+import { TimeRangeUpdatedEvent } from '@grafana/runtime';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+
+/**
+ * Use Dashboard Time Range
+ * @param timeRange
+ * @param eventBus
+ */
+export const useDashboardTimeRange = ({
+  initialTimeRange,
+  eventBus,
+}: {
+  initialTimeRange: TimeRange;
+  eventBus: EventBus;
+}): [TimeRange, Dispatch<SetStateAction<TimeRange>>] => {
+  const [value, setValue] = useState<TimeRange>(initialTimeRange);
+
+  /**
+   * Update on dashboard time range change
+   */
+  useEffect(() => {
+    /**
+     * On Time Range Updated
+     */
+    const subscriber = eventBus.getStream(TimeRangeUpdatedEvent).subscribe((event) => {
+      setValue(event.payload);
+    });
+
+    return () => {
+      subscriber.unsubscribe();
+    };
+  }, [eventBus]);
+
+  return [value, setValue];
+};

packages/components/src/index.ts

@@ -1,7 +1,7 @@
 import { TEST_IDS } from './constants';
 
 export * from './components';
-export { createUseDataHook, useFormBuilder } from './hooks';
+export { createUseDataHook, useDashboardTimeRange, useFormBuilder } from './hooks';
 export * from './types';
 export { CodeParameterItem, CodeParametersBuilder, FormBuilder } from './utils';