clock-panel icon indicating copy to clipboard operation
clock-panel copied to clipboard

Daily count down

Open ammaar8 opened this issue 1 year ago • 2 comments

I have a use case where I want the panel to do a daily countdown to a specific time of day ("Time left for ..."). I don't think this is supported yet other than finding a way to set a dashboard variable to the specific time on today's date.

Example - Countdown to 23:30:00 UTC daily to show how much time is left for some daily tasks to complete.

I was thinking of just adding a toggle in the panel with the label "Time only" which when set will only consider the time in the format and display accordingly.

ammaar8 avatar Oct 03 '23 09:10 ammaar8

Hi, I know it's a bit late, but there is a solution now. With the new query feature and a static data source you can do daily countdowns.

How to:

  1. Make sure you have the latest versions of the clock and static plugins installed.
  2. Create a static datasource.
  3. Create a clock panel on your dashboard. On the right side you see the options. Under clock, set the mode to Countdown and under Countdown set the source to Query. Then set Calculation to Min Future.
  4. Now on the left you have the query tab. Change the Data source to the static data source you created in step two. Now you can set the Values Editor to JavaScript
  5. Create two fields. One string field named label and a Time field named datetime. Like: image
  6. Now paste this code into the JavaScript Values Editor
let today = new Date();
today.setUTCHours(23, 30, 0, 0);
let tomorrow = new Date(today + 86400000);
const result = {
  ...frame,
  fields: frame.fields.map((field) => {
    switch (field.name) {
      case 'label':
        return {
          ...field,
          values: ['Today', 'Tomorrow'],
        };
      case 'datetime':
        return {
          ...field,
          values: [today, tomorrow]
        };
    }
  })
}
return Promise.resolve(result);

The code creates two dates, for today 23:30 and tomorrow 23:30. Because after 23:31 the timer counts down to tomorrow. That is why we set Calculation to Min Future in step 3.

  1. Now, back on the right side under Countdown, set Field to datetime.

And just like that, the countdown should be displayed now. Just in case, here is my Panel JSON Hope this could help, Cheers!

Humbarrt avatar Jun 05 '24 11:06 Humbarrt

Hi, I know it's a bit late, but there is a solution now. With the new query feature and a static data source you can do daily countdowns.

Actually not a bad solution!! Thanks.

The only thing is it will fail if the "today" datetime already passed. I changed the following line:

let tomorrow = new Date(today.getTime() + 86400000);

RickyLam11 avatar Jun 06 '24 13:06 RickyLam11