Plugins 〉Clock
Clock
Clock Panel Plugin for Grafana
The Clock Panel can show the current time or a countdown/countup and updates every second.
Show the time in another office or show a countdown/countup to an important event.
Plugin options
Options
Mode:
Default is time. If countdown is chosen then set the Countdown End Time to start the countdown. If countup is chosen then set the Countup Begin Time to start the countup.
12 or 24 hour:
Show time in the 12/24 hour format.
Timezone:
This timezones are supplied by the moment timezone library. Timezone can be set or left to default. Default is moment's guess (whatever that is on your computer). Timezone is also used to calculate countdown deadline in countdown mode.
Locale:
Locales for date-formatting are supplied by the moment library. The locale can be set or left to default. Default is moment's guess.
Countdown End Time:
Used in conjunction with the mode being set to countdown. Choose a date and time to count down to.
This field also supports dashboard (constant) variables (e.g.
${countdown_target}
) to dynamically set the countdown deadline for the Dashboard.Countdown End Text:
The text to show when the countdown ends. E.g. LIFTOFF
Countup Begin Time:
Used in conjunction with the mode being set to countup. Choose a date and time to count up from.
Countup End Text:
The text to show before the countup starts. E.g. LIFTOFF
Date/Time formatting options:
The font size, weight and date/time formatting can be customized here. If the seconds ticking annoys you then change the time format to HH:mm for the 24 hour clock or h:mm A for the 12 hour clock, or see the full list of formatting options.
Bg Color:
Choose a background color for the clock with the color picker.
Refresh
Sync:
The clock is paused and only updated when the dashboard refreshes - the clock will show the timestamp for the last refresh.
Screenshots
Development
Using Docker:
- Clone the repository and
cd
to it - make sure you have yarn installed
- install project dependencies:
yarn install --pure-lockfile
- Start the "watch" task:
yarn watch
- Run a local Grafana instance with the development version of the plugin:
docker run -p 3000:3000 -d --name grafana-plugin-dev --env GF_AUTH_ANONYMOUS_ORG_ROLE="Admin" --env GF_AUTH_ANONYMOUS_ENABLED="true" --env GF_AUTH_BASIC_ENABLED="false" --env GF_DEFAULT_APP_MODE="development" --volume $(pwd)/dist:/var/lib/grafana/plugins/clock-panel grafana/grafana
- Check the logs to see that Grafana has started up:
docker logs -f grafana-plugin-dev
- Open Grafana at http://localhost:3000/
- Log in with username "admin" and password "admin"
- Create new dashboard and add the plugin
To build a production build with minification: yarn build
Grafana Cloud Free
- Free tier: Limited to 3 users
- Paid plans: $55 / user / month above included usage
- Access to all Enterprise Plugins
- Fully managed service (not available to self-manage)
Self-hosted Grafana Enterprise
- Access to all Enterprise plugins
- All Grafana Enterprise features
- Self-manage on your own infrastructure
Grafana Cloud Free
- Free tier: Limited to 3 users
- Paid plans: $55 / user / month above included usage
- Access to all Enterprise Plugins
- Fully managed service (not available to self-manage)
Self-hosted Grafana Enterprise
- Access to all Enterprise plugins
- All Grafana Enterprise features
- Self-manage on your own infrastructure
Grafana Cloud Free
.h4 . .mb-0 }
- Free tier: Limited to 3 users
- Paid plans: $55 / user / month above included usage
- Access to all Enterprise Plugins
- Fully managed service (not available to self-manage)
Self-hosted Grafana Enterprise
- Access to all Enterprise plugins
- All Grafana Enterprise features
- Self-manage on your own infrastructure
Grafana Cloud Free
- Free tier: Limited to 3 users
- Paid plans: $55 / user / month above included usage
- Access to all Enterprise Plugins
- Fully managed service (not available to self-manage)
Self-hosted Grafana Enterprise
- Access to all Enterprise plugins
- All Grafana Enterprise features
- Self-manage on your own infrastructure
Grafana Cloud Free
- Free tier: Limited to 3 users
- Paid plans: $55 / user / month above included usage
- Access to all Enterprise Plugins
- Fully managed service (not available to self-manage)
Self-hosted Grafana Enterprise
- Access to all Enterprise plugins
- All Grafana Enterprise features
- Self-manage on your own infrastructure
Installing Clock on Grafana Cloud:
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
For more information, visit the docs on plugin installation.
Installing on a local Grafana:
For local instances, plugins are installed and updated via a simple CLI command. Plugins are not updated automatically, however you will be notified when updates are available right within your Grafana.
1. Install the Panel
Use the grafana-cli tool to install Clock from the commandline:
grafana-cli plugins install
The plugin will be installed into your grafana plugins directory; the default is /var/lib/grafana/plugins. More information on the cli tool.
Alternatively, you can manually download the .zip file for your architecture below and unpack it into your grafana plugins directory.
Alternatively, you can manually download the .zip file and unpack it into your grafana plugins directory.
2. Add the Panel to a Dashboard
Installed panels are available immediately in the Dashboards section in your Grafana main menu, and can be added like any other core panel in Grafana.
To see a list of installed panels, click the Plugins item in the main menu. Both core panels and installed panels will appear.
Change Log
2.1.8
- Improves migration handling for non-query panels to eliminate error message display
[2.1.7]
- Handles migration for non-query clock panels to eliminate error message display
- Fixes #186
- Fixes #189
- Cleans up any legacy (angular) settings in top level of panel json
- Adds tests for migrations
[2.1.2]
- Improving wrapping of the panel elements to be more responsive to different panel sizes https://github.com/grafana/clock-panel/pull/117
- Fixing a placeholder for the font size field https://github.com/grafana/clock-panel/pull/116
[2.1.1]
- Migrate to create-plugin instead of toolkit
- Small typo fixes
- Bump grafana packages / dependencies
[2.1.0]
- Added support to set timezone from template variable
[2.0.0]
- Prevent clock panel from crashing Grafana 9.x.x
- Drop support for Grafana 7.x.x
[1.3.1]
- Fixes error on AMG related to dependency imports
[1.3.0]
- Added support for count up mode
- Added support for template variables in count down/up time setting.
[1.2.0]
- Support local for date formats
- Support refresh with dashboard time
- Added dependency on Grafana 7.4+
[1.1.1]
- Improved background
[1.1.0]
- Support for Grafana 7+
- Built with @grafana/toolkit
v1.0.3
- Adds support for displaying timezones
v1.0.1
- Updates Lodash dependency to fix security warning
v1.0.0
- Dashboard sync/refresh feature - can show timestamp for last dashboard refresh.
- Tech - converted to TypeScript and Webpack.
v0.0.9
- Fixes bug with default properties not getting deep cloned #20
v0.0.8
- Remove extraneous comma when 1 second left in the countdown. PR from @linkslice