Plugins 〉Clock


Developer
Grafana Labs


Sign up to receive occasional product news and updates:



Panel
grafana

Clock

  • Overview
  • Installation
  • Change log
  • Related content

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:

  1. Clone the repository and cd to it
  2. make sure you have yarn installed
  3. install project dependencies: yarn install --pure-lockfile
  4. Start the "watch" task: yarn watch
  5. 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
  6. Check the logs to see that Grafana has started up: docker logs -f grafana-plugin-dev
  7. Open Grafana at http://localhost:3000/
  8. Log in with username "admin" and password "admin"
  9. Create new dashboard and add the plugin

To build a production build with minification: yarn build

Installing Clock on Grafana Cloud:

For more information, visit the docs on plugin installation.

Change Log

[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