clock-panel
clock-panel copied to clipboard
Daily count down
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.
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:
- Make sure you have the latest versions of the clock and static plugins installed.
- Create a static datasource.
- 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 toQuery
. Then set Calculation toMin Future
. - 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 toJavaScript
- Create two fields. One string field named
label
and a Time field nameddatetime
. Like: - 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.
- 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!
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);