diff --git a/package-lock.json b/package-lock.json index 9eb0ba7..c5ccf42 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3073,6 +3073,99 @@ "web-vitals": "^3.1.1" } }, + "node_modules/@grafana/runtime": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/@grafana/runtime/-/runtime-11.1.0.tgz", + "integrity": "sha512-LK+itxAhoX67IwpWxrLBqT3QreVWPgkngEhH0sS/Jm0XgrBrXz92Gh04sY4F5NKHo7LR+/o46aYPZ3l8IpVCaw==", + "dependencies": { + "@grafana/data": "11.1.0", + "@grafana/e2e-selectors": "11.1.0", + "@grafana/faro-web-sdk": "^1.3.6", + "@grafana/schema": "11.1.0", + "@grafana/ui": "11.1.0", + "history": "4.10.1", + "lodash": "4.17.21", + "rxjs": "7.8.1", + "tslib": "2.6.3" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, + "node_modules/@grafana/runtime/node_modules/@braintree/sanitize-url": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-7.0.1.tgz", + "integrity": "sha512-URg8UM6lfC9ZYqFipItRSxYJdgpU5d2Z4KnjsJ+rj6tgAmGme7E+PQNCiud8g0HDaZKMovu2qjfa0f5Ge0Vlsg==" + }, + "node_modules/@grafana/runtime/node_modules/@grafana/data": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/@grafana/data/-/data-11.1.0.tgz", + "integrity": "sha512-kD8kLlpvl9oLStaprTPgy71u4Q+F9FyGGbNN5PuOfh+9Og8Gy5W77OFEhnrMbT0PxckKDmEjOaMkTlybF3yQjg==", + "dependencies": { + "@braintree/sanitize-url": "7.0.1", + "@grafana/schema": "11.1.0", + "@types/d3-interpolate": "^3.0.0", + "@types/string-hash": "1.1.3", + "d3-interpolate": "3.0.1", + "date-fns": "3.6.0", + "dompurify": "^3.0.0", + "eventemitter3": "5.0.1", + "fast_array_intersect": "1.1.0", + "history": "4.10.1", + "lodash": "4.17.21", + "marked": "12.0.2", + "marked-mangle": "1.1.7", + "moment": "2.30.1", + "moment-timezone": "0.5.45", + "ol": "7.4.0", + "papaparse": "5.4.1", + "react-use": "17.5.0", + "rxjs": "7.8.1", + "string-hash": "^1.1.3", + "tinycolor2": "1.6.0", + "tslib": "2.6.3", + "uplot": "1.6.30", + "xss": "^1.0.14" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, + "node_modules/@grafana/runtime/node_modules/@grafana/schema": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/@grafana/schema/-/schema-11.1.0.tgz", + "integrity": "sha512-HxKeMNrvRDkxBHfwExGZ9MdPYf68n8tctH3aCMFMf/csdlM5EEmgYOOJ1yVLVSxAqiZcb8y6TmL+2QOuP0RK3A==", + "dependencies": { + "tslib": "2.6.3" + } + }, + "node_modules/@grafana/runtime/node_modules/date-fns": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz", + "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, + "node_modules/@grafana/runtime/node_modules/marked": { + "version": "12.0.2", + "resolved": "https://registry.npmjs.org/marked/-/marked-12.0.2.tgz", + "integrity": "sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q==", + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 18" + } + }, + "node_modules/@grafana/runtime/node_modules/tslib": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz", + "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==" + }, "node_modules/@grafana/schema": { "version": "10.4.2", "resolved": "https://registry.npmjs.org/@grafana/schema/-/schema-10.4.2.tgz", @@ -22848,6 +22941,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", diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index ccf71ed..3ae1f50 100644 --- a/packages/components/CHANGELOG.md +++ b/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) diff --git a/packages/components/README.md b/packages/components/README.md index b56a6b7..9bb5e6f 100644 --- a/packages/components/README.md +++ b/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 diff --git a/packages/components/package.json b/packages/components/package.json index db49244..e6da93a 100644 --- a/packages/components/package.json +++ b/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" } diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs index 1e047eb..c590d81 100644 --- a/packages/components/rollup.config.mjs +++ b/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', diff --git a/packages/components/src/hooks/index.ts b/packages/components/src/hooks/index.ts index 408d920..dc5305e 100644 --- a/packages/components/src/hooks/index.ts +++ b/packages/components/src/hooks/index.ts @@ -1,2 +1,3 @@ +export * from './useDashboardTimeRange'; export * from './useData'; export * from './useFormBuilder'; diff --git a/packages/components/src/hooks/useDashboardTimeRange.ts b/packages/components/src/hooks/useDashboardTimeRange.ts new file mode 100644 index 0000000..463603b --- /dev/null +++ b/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>] => { + const [value, setValue] = useState(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]; +}; diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 1536c12..42bda7c 100644 --- a/packages/components/src/index.ts +++ b/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';