diff --git a/CHANGELOG.md b/CHANGELOG.md index 04390d10..f39d69b1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Change Log +## 3.2.0 + +- Add `Digital` clock style + ## 3.1.0 - The Clock panel is now available in the following languages: diff --git a/package-lock.json b/package-lock.json index dd3466b6..d6cec2db 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "clock-panel", - "version": "3.0.1", + "version": "3.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "clock-panel", - "version": "3.0.1", + "version": "3.1.0", "license": "MIT", "dependencies": { "@emotion/css": "^11.13.5", @@ -23,7 +23,7 @@ "devDependencies": { "@grafana/eslint-config": "^9.0.0", "@grafana/eslint-plugin-plugins": "0.5.4", - "@grafana/plugin-e2e": "^3.0.0", + "@grafana/plugin-e2e": "^3.0.3", "@grafana/tsconfig": "^2.0.0", "@playwright/test": "1.56.1", "@stylistic/eslint-plugin-ts": "4.4.1", @@ -2076,13 +2076,13 @@ } }, "node_modules/@grafana/plugin-e2e": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@grafana/plugin-e2e/-/plugin-e2e-3.0.0.tgz", - "integrity": "sha512-vH7LX3ikoSxF7NCBIvBRNJBD7+LlZzTOfNfAVSdz+Z+00ENB86KgItOw0JmJYHBi+bXK/HXuSOSfXM+HzbJOSg==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@grafana/plugin-e2e/-/plugin-e2e-3.0.3.tgz", + "integrity": "sha512-k+UcV43ePtz3IjpG3SuAlNbn6BwWIYkf6Jxnd5lgnwga9eJ3khJwfdEHsjIIXD3OynlJeOJPyccRfoSsk5n7cw==", "dev": true, "license": "Apache-2.0", "dependencies": { - "@grafana/e2e-selectors": "^12.2.0-255920", + "@grafana/e2e-selectors": "^12.4.0-19890644192", "semver": "^7.5.4", "uuid": "^13.0.0", "yaml": "^2.3.4" @@ -2094,6 +2094,32 @@ "@playwright/test": "^1.52.0" } }, + "node_modules/@grafana/plugin-e2e/node_modules/@grafana/e2e-selectors": { + "version": "12.4.0-19948849188", + "resolved": "https://registry.npmjs.org/@grafana/e2e-selectors/-/e2e-selectors-12.4.0-19948849188.tgz", + "integrity": "sha512-qtrYNyqsVc32KSpFmNUL/0rnNQCGmoH3Du/GuicMmNmfH8f4ROvwucBkwNwCXkKh6vgGT8crqdQnSvRDPH20Pw==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "semver": "^7.7.0", + "tslib": "2.8.1", + "typescript": "5.9.2" + } + }, + "node_modules/@grafana/plugin-e2e/node_modules/typescript": { + "version": "5.9.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz", + "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, "node_modules/@grafana/runtime": { "version": "12.2.0", "resolved": "https://registry.npmjs.org/@grafana/runtime/-/runtime-12.2.0.tgz", diff --git a/package.json b/package.json index 54a241bb..95bd1492 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "clock-panel", - "version": "3.1.0", + "version": "3.2.0", "description": "Clock Panel Plugin for Grafana", "scripts": { "build": "webpack -c ./.config/webpack/webpack.config.ts --env production", @@ -32,7 +32,7 @@ "devDependencies": { "@grafana/eslint-config": "^9.0.0", "@grafana/eslint-plugin-plugins": "0.5.4", - "@grafana/plugin-e2e": "^3.0.0", + "@grafana/plugin-e2e": "^3.0.3", "@grafana/tsconfig": "^2.0.0", "@playwright/test": "1.56.1", "@stylistic/eslint-plugin-ts": "4.4.1", diff --git a/provisioning/dashboards/digital-sizes.json b/provisioning/dashboards/digital-sizes.json new file mode 100644 index 00000000..ef8ed608 --- /dev/null +++ b/provisioning/dashboards/digital-sizes.json @@ -0,0 +1,1025 @@ +{ + "annotations": { + "list": [ + { + "builtIn": 1, + "datasource": { + "type": "grafana", + "uid": "-- Grafana --" + }, + "enable": true, + "hide": true, + "iconColor": "rgba(0, 211, 255, 1)", + "name": "Annotations & Alerts", + "type": "dashboard" + } + ] + }, + "editable": true, + "fiscalYearStartMonth": 0, + "graphTooltip": 0, + "id": 3, + "links": [], + "panels": [ + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "gridPos": { + "h": 2, + "w": 4, + "x": 0, + "y": 0 + }, + "id": 1, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2025-12-04T15:01:37+01:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "countupSettings": { + "beginCountupTime": "2025-12-04T15:01:37+01:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": true + }, + "descriptionSettings": { + "descriptionText": "a description", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "source": "input" + }, + "digitalSettings": { + "fillColor": "orange", + "glowWidth": 0, + "strokeColor": "dark-orange", + "strokeWidth": 0 + }, + "fontMono": false, + "mode": "time", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": true, + "zoneFormat": "nameOffset" + } + }, + "pluginVersion": "3.0.0", + "targets": [ + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "refId": "A", + "scenarioId": "random_walk", + "seriesCount": 1 + } + ], + "title": "Panel Title", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "gridPos": { + "h": 3, + "w": 4, + "x": 4, + "y": 0 + }, + "id": 2, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2025-12-04T15:01:37+01:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "countupSettings": { + "beginCountupTime": "2025-12-04T15:01:37+01:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": true + }, + "descriptionSettings": { + "descriptionText": "a description", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "source": "input" + }, + "digitalSettings": { + "fillColor": "orange", + "glowWidth": 0, + "strokeColor": "dark-orange", + "strokeWidth": 0 + }, + "fontMono": false, + "mode": "time", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": true, + "zoneFormat": "nameOffset" + } + }, + "pluginVersion": "3.0.0", + "targets": [ + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "refId": "A", + "scenarioId": "random_walk", + "seriesCount": 1 + } + ], + "title": "Panel Title", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "gridPos": { + "h": 4, + "w": 4, + "x": 8, + "y": 0 + }, + "id": 3, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2025-12-04T15:01:37+01:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "countupSettings": { + "beginCountupTime": "2025-12-04T15:01:37+01:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": true + }, + "descriptionSettings": { + "descriptionText": "a description", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "source": "input" + }, + "digitalSettings": { + "fillColor": "orange", + "glowWidth": 0, + "strokeColor": "dark-orange", + "strokeWidth": 0 + }, + "fontMono": false, + "mode": "time", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": true, + "zoneFormat": "nameOffset" + } + }, + "pluginVersion": "3.0.0", + "targets": [ + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "refId": "A", + "scenarioId": "random_walk", + "seriesCount": 1 + } + ], + "title": "Panel Title", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "gridPos": { + "h": 5, + "w": 4, + "x": 12, + "y": 0 + }, + "id": 4, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2025-12-04T15:01:37+01:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "countupSettings": { + "beginCountupTime": "2025-12-04T15:01:37+01:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": true + }, + "descriptionSettings": { + "descriptionText": "a description", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "source": "input" + }, + "digitalSettings": { + "fillColor": "orange", + "glowWidth": 0, + "strokeColor": "dark-orange", + "strokeWidth": 0 + }, + "fontMono": false, + "mode": "time", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": true, + "zoneFormat": "nameOffset" + } + }, + "pluginVersion": "3.0.0", + "targets": [ + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "refId": "A", + "scenarioId": "random_walk", + "seriesCount": 1 + } + ], + "title": "Panel Title", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "gridPos": { + "h": 6, + "w": 4, + "x": 16, + "y": 0 + }, + "id": 5, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2025-12-04T15:01:37+01:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "countupSettings": { + "beginCountupTime": "2025-12-04T15:01:37+01:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": true + }, + "descriptionSettings": { + "descriptionText": "a description", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "source": "input" + }, + "digitalSettings": { + "fillColor": "orange", + "glowWidth": 0, + "strokeColor": "dark-orange", + "strokeWidth": 0 + }, + "fontMono": false, + "mode": "time", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": true, + "zoneFormat": "nameOffset" + } + }, + "pluginVersion": "3.0.0", + "targets": [ + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "refId": "A", + "scenarioId": "random_walk", + "seriesCount": 1 + } + ], + "title": "Panel Title", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "gridPos": { + "h": 7, + "w": 4, + "x": 20, + "y": 0 + }, + "id": 6, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2025-12-04T15:01:37+01:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "countupSettings": { + "beginCountupTime": "2025-12-04T15:01:37+01:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": true + }, + "descriptionSettings": { + "descriptionText": "a description", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "source": "input" + }, + "digitalSettings": { + "fillColor": "orange", + "glowWidth": 0, + "strokeColor": "dark-orange", + "strokeWidth": 0 + }, + "fontMono": false, + "mode": "time", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": true, + "zoneFormat": "nameOffset" + } + }, + "pluginVersion": "3.0.0", + "targets": [ + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "refId": "A", + "scenarioId": "random_walk", + "seriesCount": 1 + } + ], + "title": "Panel Title", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "gridPos": { + "h": 2, + "w": 4, + "x": 0, + "y": 2 + }, + "id": 7, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2030-12-04T15:01:37+01:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "countupSettings": { + "beginCountupTime": "2025-12-04T15:01:37+01:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": true + }, + "descriptionSettings": { + "descriptionText": "a description", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "source": "input" + }, + "digitalSettings": { + "fillColor": "orange", + "glowWidth": 0, + "strokeColor": "dark-orange", + "strokeWidth": 0 + }, + "fontMono": false, + "mode": "countdown", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": true, + "zoneFormat": "nameOffset" + } + }, + "pluginVersion": "3.0.0", + "targets": [ + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "refId": "A", + "scenarioId": "random_walk", + "seriesCount": 1 + } + ], + "title": "Panel Title", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "gridPos": { + "h": 3, + "w": 4, + "x": 4, + "y": 3 + }, + "id": 8, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2030-12-04T15:01:37+01:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "countupSettings": { + "beginCountupTime": "2025-12-04T15:01:37+01:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": true + }, + "descriptionSettings": { + "descriptionText": "a description", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "source": "input" + }, + "digitalSettings": { + "fillColor": "orange", + "glowWidth": 0, + "strokeColor": "dark-orange", + "strokeWidth": 0 + }, + "fontMono": false, + "mode": "countdown", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": true, + "zoneFormat": "nameOffset" + } + }, + "pluginVersion": "3.0.0", + "targets": [ + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "refId": "A", + "scenarioId": "random_walk", + "seriesCount": 1 + } + ], + "title": "Panel Title", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "gridPos": { + "h": 4, + "w": 4, + "x": 8, + "y": 4 + }, + "id": 9, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2030-12-04T15:01:37+01:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "countupSettings": { + "beginCountupTime": "2025-12-04T15:01:37+01:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": true + }, + "descriptionSettings": { + "descriptionText": "a description", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "source": "input" + }, + "digitalSettings": { + "fillColor": "orange", + "glowWidth": 0, + "strokeColor": "dark-orange", + "strokeWidth": 0 + }, + "fontMono": false, + "mode": "countdown", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": true, + "zoneFormat": "nameOffset" + } + }, + "pluginVersion": "3.0.0", + "targets": [ + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "refId": "A", + "scenarioId": "random_walk", + "seriesCount": 1 + } + ], + "title": "Panel Title", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "gridPos": { + "h": 5, + "w": 4, + "x": 12, + "y": 5 + }, + "id": 10, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2030-12-04T15:01:37+01:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "countupSettings": { + "beginCountupTime": "2025-12-04T15:01:37+01:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": true + }, + "descriptionSettings": { + "descriptionText": "a description", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "source": "input" + }, + "digitalSettings": { + "fillColor": "orange", + "glowWidth": 0, + "strokeColor": "dark-orange", + "strokeWidth": 0 + }, + "fontMono": false, + "mode": "countdown", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": true, + "zoneFormat": "nameOffset" + } + }, + "pluginVersion": "3.0.0", + "targets": [ + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "refId": "A", + "scenarioId": "random_walk", + "seriesCount": 1 + } + ], + "title": "Panel Title", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "gridPos": { + "h": 6, + "w": 4, + "x": 16, + "y": 6 + }, + "id": 11, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2030-12-04T15:01:37+01:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "countupSettings": { + "beginCountupTime": "2025-12-04T15:01:37+01:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": true + }, + "descriptionSettings": { + "descriptionText": "a description", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "source": "input" + }, + "digitalSettings": { + "fillColor": "orange", + "glowWidth": 0, + "strokeColor": "dark-orange", + "strokeWidth": 0 + }, + "fontMono": false, + "mode": "countdown", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": true, + "zoneFormat": "nameOffset" + } + }, + "pluginVersion": "3.0.0", + "targets": [ + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "refId": "A", + "scenarioId": "random_walk", + "seriesCount": 1 + } + ], + "title": "Panel Title", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "gridPos": { + "h": 7, + "w": 4, + "x": 20, + "y": 7 + }, + "id": 12, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2030-12-04T15:01:37+01:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "countupSettings": { + "beginCountupTime": "2025-12-04T15:01:37+01:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": true + }, + "descriptionSettings": { + "descriptionText": "a description", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "source": "input" + }, + "digitalSettings": { + "fillColor": "orange", + "glowWidth": 0, + "strokeColor": "dark-orange", + "strokeWidth": 0 + }, + "fontMono": false, + "mode": "countdown", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": true, + "zoneFormat": "nameOffset" + } + }, + "pluginVersion": "3.0.0", + "targets": [ + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "P11BF8370885DF93A" + }, + "refId": "A", + "scenarioId": "random_walk", + "seriesCount": 1 + } + ], + "title": "Panel Title", + "type": "grafana-clock-panel" + } + ], + "schemaVersion": 39, + "tags": [], + "templating": { + "list": [] + }, + "time": { + "from": "now-6h", + "to": "now" + }, + "timeRangeUpdatedDuringEditOrView": false, + "timepicker": {}, + "timezone": "browser", + "title": "Testing - Digital Style and Sizes", + "uid": "cf628oudd2gaoc", + "version": 11, + "weekStart": "" +} diff --git a/provisioning/dashboards/digital.json b/provisioning/dashboards/digital.json new file mode 100644 index 00000000..a3f2b92c --- /dev/null +++ b/provisioning/dashboards/digital.json @@ -0,0 +1,1407 @@ +{ + "annotations": { + "list": [ + { + "builtIn": 1, + "datasource": { + "type": "grafana", + "uid": "-- Grafana --" + }, + "enable": true, + "hide": true, + "iconColor": "rgba(0, 211, 255, 1)", + "name": "Annotations & Alerts", + "target": { + "limit": 100, + "matchAny": false, + "tags": [], + "type": "dashboard" + }, + "type": "dashboard" + } + ] + }, + "editable": true, + "fiscalYearStartMonth": 0, + "graphTooltip": 0, + "links": [], + "liveNow": false, + "panels": [ + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 6, + "w": 3, + "x": 0, + "y": 0 + }, + "id": 2, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2022-11-18T01:26:50+01:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "countupSettings": { + "beginCountupTime": "2022-11-18T01:26:50+01:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": false + }, + "descriptionSettings": { + "descriptionText": "", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "source": "none" + }, + "fontMono": false, + "mode": "time", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "44px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": false, + "zoneFormat": "offsetAbbv" + } + }, + "pluginVersion": "2.1.5", + "title": "Time in local timezone", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 6, + "w": 4, + "x": 3, + "y": 0 + }, + "id": 4, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2022-11-23T16:09:41+01:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "countupSettings": { + "beginCountupTime": "2022-11-23T16:09:41+01:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": false + }, + "descriptionSettings": { + "descriptionText": "", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "source": "none" + }, + "fontMono": false, + "mode": "time", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "39px", + "fontWeight": "bold" + }, + "timezone": "PST8PDT", + "timezoneSettings": { + "fontSize": "24px", + "fontWeight": "normal", + "showTimezone": true, + "zoneFormat": "abbv" + } + }, + "pluginVersion": "2.1.5", + "title": "Time in PST timezone", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 6, + "w": 5, + "x": 7, + "y": 0 + }, + "id": 6, + "options": { + "bgColor": "dark-green", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2025-12-31T00:00:00+01:00", + "endText": "Happy new year 2026!!", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "countupSettings": { + "beginCountupTime": "2022-11-23T16:11:28+01:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": false + }, + "descriptionSettings": { + "descriptionText": "", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "source": "none" + }, + "fontMono": false, + "mode": "countdown", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "23px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": true, + "zoneFormat": "abbv" + } + }, + "pluginVersion": "2.1.5", + "title": "Time until new years celebration 2026", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 6, + "w": 5, + "x": 12, + "y": 0 + }, + "id": 8, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2022-11-23T16:15:49+01:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "countupSettings": { + "beginCountupTime": "2022-10-30T03:00:01+01:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": false + }, + "descriptionSettings": { + "descriptionText": "", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "source": "none" + }, + "fontMono": false, + "mode": "countup", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "20px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": true, + "zoneFormat": "offsetAbbv" + } + }, + "pluginVersion": "2.1.5", + "title": "Time since day light saving ended in Sweden", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 6, + "w": 3, + "x": 0, + "y": 6 + }, + "id": 10, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2022-11-23T16:19:54+01:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "countupSettings": { + "beginCountupTime": "2022-11-23T16:19:54+01:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": false + }, + "descriptionSettings": { + "descriptionText": "", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "source": "none" + }, + "fontMono": false, + "mode": "time", + "refresh": "dashboard", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "Asia/Hong_Kong", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": true, + "zoneFormat": "offsetAbbv" + } + }, + "pluginVersion": "2.1.5", + "title": "Refresh: with dashboard", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 6, + "w": 4, + "x": 3, + "y": 6 + }, + "id": 12, + "options": { + "bgColor": "", + "clockType": "12 hour", + "countdownSettings": { + "endCountdownTime": "2022-11-23T16:21:45+01:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "countupSettings": { + "beginCountupTime": "2022-11-23T16:21:45+01:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": false + }, + "descriptionSettings": { + "descriptionText": "", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "source": "none" + }, + "fontMono": false, + "mode": "time", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": true, + "zoneFormat": "offsetAbbv" + } + }, + "pluginVersion": "2.1.5", + "title": "Time format: 12 hours", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 6, + "w": 5, + "x": 7, + "y": 6 + }, + "id": 14, + "options": { + "bgColor": "", + "clockType": "custom", + "countdownSettings": { + "endCountdownTime": "2022-11-23T16:22:42+01:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "countupSettings": { + "beginCountupTime": "2022-11-23T16:22:42+01:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": false + }, + "descriptionSettings": { + "descriptionText": "", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "source": "none" + }, + "fontMono": false, + "mode": "time", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "customFormat": "YYYY", + "fontSize": "25px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": false, + "zoneFormat": "offsetAbbv" + } + }, + "pluginVersion": "2.1.5", + "title": "Time Format: Custom (only year)", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 6, + "w": 5, + "x": 12, + "y": 6 + }, + "id": 15, + "options": { + "bgColor": "", + "clockType": "custom", + "countdownSettings": { + "endCountdownTime": "2022-11-23T16:22:42+01:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "countupSettings": { + "beginCountupTime": "2022-11-23T16:22:42+01:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": false + }, + "descriptionSettings": { + "descriptionText": "", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "source": "none" + }, + "fontMono": false, + "mode": "time", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "customFormat": "MMMM Do, YYYY", + "fontSize": "25px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": false, + "zoneFormat": "offsetAbbv" + } + }, + "pluginVersion": "2.1.5", + "title": "Time Format: Custom", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 5, + "w": 17, + "x": 0, + "y": 12 + }, + "id": 16, + "options": { + "bgColor": "", + "clockType": "custom", + "countdownSettings": { + "endCountdownTime": "2022-11-23T16:22:42+01:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "countupSettings": { + "beginCountupTime": "${__from:date}", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": false + }, + "descriptionSettings": { + "descriptionText": "", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "source": "none" + }, + "fontMono": false, + "mode": "countup", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "customFormat": "MMMM Do, YYYY", + "fontSize": "25px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": false, + "zoneFormat": "offsetAbbv" + } + }, + "pluginVersion": "2.1.5", + "title": "Template variable: countup since ${__from:date}", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "testdata", + "uid": "P11BF8370885DF93A" + }, + "gridPos": { + "h": 4, + "w": 8, + "x": 0, + "y": 17 + }, + "id": 21, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2024-05-14T19:31:20+02:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "queryField": "datetime", + "source": "query" + }, + "countupSettings": { + "beginCountupTime": "2024-05-14T19:31:20+02:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "first", + "queryField": "datetime", + "source": "query" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": false + }, + "descriptionSettings": { + "descriptionText": "", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "queryField": "label", + "source": "query" + }, + "fontMono": false, + "mode": "countup", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": false, + "zoneFormat": "offsetAbbv" + } + }, + "pluginVersion": "2.1.5", + "targets": [ + { + "csvContent": "datetime,label\n2021-01-01,New Year 2021\n2023-01-01,New Year 2023\n2020-01-01,New Year 2020\n2025-01-01,New Year 2025\n2022-01-01,New Year 2022\n2028-01-01,New Year 2028\n2024-01-01,New Year 2024\n2027-01-01,New Year 2027\n2030-01-01,New Year 2030\n2029-01-01,New Year 2029\n2026-01-01,New Year 2026", + "datasource": { + "type": "testdata", + "uid": "P11BF8370885DF93A" + }, + "refId": "A", + "scenarioId": "csv_content" + } + ], + "title": "Query first countup", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "testdata", + "uid": "P11BF8370885DF93A" + }, + "gridPos": { + "h": 4, + "w": 8, + "x": 8, + "y": 17 + }, + "id": 20, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2024-05-14T19:31:20+02:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "queryField": "datetime", + "source": "query" + }, + "countupSettings": { + "beginCountupTime": "2024-05-14T19:31:20+02:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": false + }, + "descriptionSettings": { + "descriptionText": "", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "queryField": "label", + "source": "query" + }, + "fontMono": false, + "mode": "countdown", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": false, + "zoneFormat": "offsetAbbv" + } + }, + "pluginVersion": "2.1.5", + "targets": [ + { + "csvContent": "datetime,label\n2021-01-01,New Year 2021\n2023-01-01,New Year 2023\n2020-01-01,New Year 2020\n2025-01-01,New Year 2025\n2022-01-01,New Year 2022\n2028-01-01,New Year 2028\n2024-01-01,New Year 2024\n2027-01-01,New Year 2027\n2030-01-01,New Year 2030\n2029-01-01,New Year 2029\n2026-01-01,New Year 2026", + "datasource": { + "type": "testdata", + "uid": "P11BF8370885DF93A" + }, + "refId": "A", + "scenarioId": "csv_content" + } + ], + "title": "Query last countdown", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "testdata", + "uid": "P11BF8370885DF93A" + }, + "gridPos": { + "h": 4, + "w": 8, + "x": 0, + "y": 21 + }, + "id": 22, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2024-05-14T19:31:20+02:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "minFuture", + "queryField": "datetime", + "source": "query" + }, + "countupSettings": { + "beginCountupTime": "2024-05-14T19:31:20+02:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "min", + "queryField": "datetime", + "source": "query" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": false + }, + "descriptionSettings": { + "descriptionText": "", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "queryField": "label", + "source": "query" + }, + "fontMono": false, + "mode": "countup", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": false, + "zoneFormat": "offsetAbbv" + } + }, + "pluginVersion": "2.1.5", + "targets": [ + { + "csvContent": "datetime,label\n2021-01-01,New Year 2021\n2023-01-01,New Year 2023\n2020-01-01,New Year 2020\n2025-01-01,New Year 2025\n2022-01-01,New Year 2022\n2028-01-01,New Year 2028\n2024-01-01,New Year 2024\n2027-01-01,New Year 2027\n2030-01-01,New Year 2030\n2029-01-01,New Year 2029\n2026-01-01,New Year 2026", + "datasource": { + "type": "testdata", + "uid": "P11BF8370885DF93A" + }, + "refId": "A", + "scenarioId": "csv_content" + } + ], + "title": "Query min countup", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "testdata", + "uid": "P11BF8370885DF93A" + }, + "gridPos": { + "h": 4, + "w": 8, + "x": 8, + "y": 21 + }, + "id": 23, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2024-05-14T19:31:20+02:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "minFuture", + "queryField": "datetime", + "source": "query" + }, + "countupSettings": { + "beginCountupTime": "2024-05-14T19:31:20+02:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": false + }, + "descriptionSettings": { + "descriptionText": "", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "queryField": "label", + "source": "query" + }, + "fontMono": false, + "mode": "countdown", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": false, + "zoneFormat": "offsetAbbv" + } + }, + "pluginVersion": "2.1.5", + "targets": [ + { + "csvContent": "datetime,label\n2021-01-01,New Year 2021\n2023-01-01,New Year 2023\n2020-01-01,New Year 2020\n2025-01-01,New Year 2025\n2022-01-01,New Year 2022\n2028-01-01,New Year 2028\n2024-01-01,New Year 2024\n2027-01-01,New Year 2027\n2030-01-01,New Year 2030\n2029-01-01,New Year 2029\n2026-01-01,New Year 2026", + "datasource": { + "type": "testdata", + "uid": "P11BF8370885DF93A" + }, + "refId": "A", + "scenarioId": "csv_content" + } + ], + "title": "Query min future countdown", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "testdata", + "uid": "P11BF8370885DF93A" + }, + "gridPos": { + "h": 4, + "w": 8, + "x": 0, + "y": 25 + }, + "id": 24, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2024-05-14T19:31:20+02:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "max", + "queryField": "datetime", + "source": "query" + }, + "countupSettings": { + "beginCountupTime": "2024-05-14T19:31:20+02:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": false + }, + "descriptionSettings": { + "descriptionText": "", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "queryField": "label", + "source": "query" + }, + "fontMono": false, + "mode": "countdown", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": false, + "zoneFormat": "offsetAbbv" + } + }, + "pluginVersion": "2.1.5", + "targets": [ + { + "csvContent": "datetime,label\n2021-01-01,New Year 2021\n2023-01-01,New Year 2023\n2020-01-01,New Year 2020\n2025-01-01,New Year 2025\n2022-01-01,New Year 2022\n2028-01-01,New Year 2028\n2024-01-01,New Year 2024\n2027-01-01,New Year 2027\n2030-01-01,New Year 2030\n2029-01-01,New Year 2029\n2026-01-01,New Year 2026", + "datasource": { + "type": "testdata", + "uid": "P11BF8370885DF93A" + }, + "refId": "A", + "scenarioId": "csv_content" + } + ], + "title": "Query max countdown", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "testdata", + "uid": "P11BF8370885DF93A" + }, + "gridPos": { + "h": 4, + "w": 8, + "x": 8, + "y": 25 + }, + "id": 25, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2024-05-14T19:31:20+02:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "minFuture", + "queryField": "datetime", + "source": "query" + }, + "countupSettings": { + "beginCountupTime": "2024-05-14T19:31:20+02:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "maxPast", + "queryField": "datetime", + "source": "query" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": false + }, + "descriptionSettings": { + "descriptionText": "", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "queryField": "label", + "source": "query" + }, + "fontMono": false, + "mode": "countup", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": false, + "zoneFormat": "offsetAbbv" + } + }, + "pluginVersion": "2.1.5", + "targets": [ + { + "csvContent": "datetime,label\n2021-01-01,New Year 2021\n2023-01-01,New Year 2023\n2020-01-01,New Year 2020\n2025-01-01,New Year 2025\n2022-01-01,New Year 2022\n2028-01-01,New Year 2028\n2024-01-01,New Year 2024\n2027-01-01,New Year 2027\n2030-01-01,New Year 2030\n2029-01-01,New Year 2029\n2026-01-01,New Year 2026", + "datasource": { + "type": "testdata", + "uid": "P11BF8370885DF93A" + }, + "refId": "A", + "scenarioId": "csv_content" + } + ], + "title": "Query max past countup", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "testdata", + "uid": "P11BF8370885DF93A" + }, + "gridPos": { + "h": 4, + "w": 8, + "x": 0, + "y": 29 + }, + "id": 27, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2024-05-14T19:31:20+02:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "minFuture", + "queryField": "datetime", + "source": "query" + }, + "countupSettings": { + "beginCountupTime": "2024-05-14T19:31:20+02:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "maxPast", + "queryField": "datetime", + "source": "query" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": false + }, + "descriptionSettings": { + "descriptionText": "", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "queryField": "label", + "source": "query" + }, + "fontMono": false, + "mode": "countup", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": false, + "zoneFormat": "offsetAbbv" + } + }, + "pluginVersion": "2.1.5", + "targets": [ + { + "datasource": { + "type": "testdata", + "uid": "P11BF8370885DF93A" + }, + "refId": "A", + "scenarioId": "no_data_points" + } + ], + "title": "Query with no data", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "testdata", + "uid": "P11BF8370885DF93A" + }, + "gridPos": { + "h": 4, + "w": 8, + "x": 8, + "y": 29 + }, + "id": 28, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2024-05-14T19:31:20+02:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "minFuture", + "queryField": "datetime", + "source": "query" + }, + "countupSettings": { + "beginCountupTime": "2024-05-14T19:31:20+02:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "first", + "queryField": "datetime", + "source": "query" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": false + }, + "descriptionSettings": { + "descriptionText": "", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "queryField": "label", + "source": "query" + }, + "fontMono": false, + "mode": "countup", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": false, + "zoneFormat": "offsetAbbv" + } + }, + "pluginVersion": "2.1.5", + "targets": [ + { + "csvContent": "datetime,label\nNaN,Description still works", + "datasource": { + "type": "testdata", + "uid": "P11BF8370885DF93A" + }, + "refId": "A", + "scenarioId": "csv_content" + } + ], + "title": "Query with invalid data", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "testdata", + "uid": "P11BF8370885DF93A" + }, + "gridPos": { + "h": 4, + "w": 8, + "x": 0, + "y": 33 + }, + "id": 26, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2024-05-14T19:31:20+02:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "minFuture", + "queryField": "datetime", + "source": "query" + }, + "countupSettings": { + "beginCountupTime": "2024-05-14T19:31:20+02:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "maxPast", + "queryField": "datetime", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "20px", + "fontWeight": "normal", + "locale": "", + "showDate": false + }, + "descriptionSettings": { + "descriptionText": "This is a static input", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "queryField": "label", + "source": "input" + }, + "fontMono": false, + "mode": "countup", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": false, + "zoneFormat": "offsetAbbv" + } + }, + "pluginVersion": "2.1.5", + "targets": [ + { + "csvContent": "datetime,label\n2021-01-01,New Year 2021\n2023-01-01,New Year 2023\n2020-01-01,New Year 2020\n2025-01-01,New Year 2025\n2022-01-01,New Year 2022\n2028-01-01,New Year 2028\n2024-01-01,New Year 2024\n2027-01-01,New Year 2027\n2030-01-01,New Year 2030\n2029-01-01,New Year 2029\n2026-01-01,New Year 2026", + "datasource": { + "type": "testdata", + "uid": "P11BF8370885DF93A" + }, + "refId": "A", + "scenarioId": "csv_content" + } + ], + "title": "Description with static input", + "type": "grafana-clock-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 2, + "w": 5, + "x": 0, + "y": 37 + }, + "id": 18, + "options": { + "bgColor": "", + "clockType": "24 hour", + "countdownSettings": { + "endCountdownTime": "2022-12-31T00:28:17+01:00", + "endText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "countupSettings": { + "beginCountupTime": "2022-12-31T00:28:17+01:00", + "beginText": "00:00:00", + "invalidValueText": "invalid value", + "noValueText": "no value found", + "queryCalculation": "last", + "source": "input" + }, + "dateSettings": { + "dateFormat": "YYYY-MM-DD", + "fontSize": "12px", + "fontWeight": "normal", + "locale": "", + "showDate": true + }, + "descriptionSettings": { + "descriptionText": "", + "fontSize": "12px", + "fontWeight": "normal", + "noValueText": "no description found", + "source": "none" + }, + "fontMono": false, + "mode": "time", + "refresh": "sec", + "style": "digital", + "timeSettings": { + "fontSize": "12px", + "fontWeight": "normal" + }, + "timezone": "", + "timezoneSettings": { + "fontSize": "12px", + "fontWeight": "normal", + "showTimezone": true, + "zoneFormat": "offsetAbbv" + } + }, + "pluginVersion": "2.1.5", + "title": "Should switch to one line based on height", + "type": "grafana-clock-panel" + } + ], + "schemaVersion": 37, + "style": "dark", + "tags": [], + "templating": { + "list": [] + }, + "time": { + "from": "now-6h", + "to": "now" + }, + "timepicker": {}, + "timezone": "", + "title": "Testing - Digital Clock Panels", + "uid": "digital", + "version": 2, + "weekStart": "" +} diff --git a/src/ClockPanel.test.tsx b/src/ClockPanel.test.tsx index 1fe261c7..aec53138 100644 --- a/src/ClockPanel.test.tsx +++ b/src/ClockPanel.test.tsx @@ -5,6 +5,7 @@ import { ClockMode, ClockRefresh, ClockSource, + ClockStyle, ClockType, CountdownQueryCalculation, CountupQueryCalculation, @@ -489,6 +490,7 @@ const getDefaultProps = () => { clockType: ClockType.H24, mode: ClockMode.time, refresh: ClockRefresh.sec, + style: ClockStyle.text, countdownSettings: { source: ClockSource.input, queryCalculation: CountdownQueryCalculation.lastNotNull, diff --git a/src/ClockPanel.tsx b/src/ClockPanel.tsx index 702c848c..d4423ce8 100644 --- a/src/ClockPanel.tsx +++ b/src/ClockPanel.tsx @@ -1,8 +1,6 @@ -import { css } from '@emotion/css'; import { PanelProps } from '@grafana/data'; -import { useTheme2 } from '@grafana/ui'; import React, { useEffect, useMemo, useState } from 'react'; -import { ClockOptions, ClockRefresh, DescriptionSource } from './types'; +import { ClockOptions, ClockRefresh, ClockStyle, DescriptionSource } from './types'; import { RenderDate } from 'components/RenderDate'; import { RenderTime } from 'components/RenderTime'; @@ -12,31 +10,20 @@ import { getMoment } from 'utils'; import './external/moment-duration-format'; import { CalculateClockOptions } from 'components/CalculateClockOptions'; import { RenderDescription } from 'components/RenderDescription'; +import { useInteraction } from 'hooks/useInteraction'; +import { useClockStyles } from 'hooks/useClockStyles'; interface Props extends PanelProps {} export function ClockPanel(props: Props) { const { options, width, height, data } = props; - const theme = useTheme2(); + const { panel } = useClockStyles(options); const { timezone: optionsTimezone, dateSettings, timezoneSettings } = options; - // notice the uppercase Z. const { timeZone: dashboardTimezone } = props; const timezoneToUse = optionsTimezone === 'dashboard' ? dashboardTimezone : (optionsTimezone ?? ''); const [now, setNow] = useState(getMoment(timezoneToUse)); - - const className = useMemo(() => { - return css` - display: flex; - align-items: center; - justify-content: center; - flex-flow: column wrap; - font-family: ${options.fontMono ? 'monospace' : ''}; - text-align: center; - background-color: ${!options.bgColor - ? theme.colors.background.primary - : theme.visualization.getColorByName(options.bgColor)}; - `; - }, [options.bgColor, options.fontMono, theme]); + const interaction = useMemo(() => ({ clock_style: options.style || ClockStyle.text }), [options.style]); + useInteraction('clock_panel_on_render', interaction); // Clock refresh only on dashboard refresh useEffect(() => { @@ -67,17 +54,19 @@ export function ClockPanel(props: Props) { return (
- {dateSettings.showDate ? : null} - - {timezoneSettings.showTimezone ? : null} + {dateSettings.showDate ? : null} + + {timezoneSettings.showTimezone ? ( + + ) : null} {props.options.descriptionSettings.source !== DescriptionSource.none ? ( - + ) : null}
); diff --git a/src/components/RenderDate.tsx b/src/components/RenderDate.tsx index b1e11e39..c29da27a 100644 --- a/src/components/RenderDate.tsx +++ b/src/components/RenderDate.tsx @@ -1,25 +1,33 @@ -import { css } from '@emotion/css'; import { Moment } from 'moment-timezone'; -import React, { useMemo } from 'react'; -import { ClockOptions } from 'types'; +import React from 'react'; +import { ClockOptions, ClockStyle } from '../types'; +import { DigitalTime } from './digital/DigitalTime'; +import { getHeights } from './digital/utils'; +import { useClockStyles } from 'hooks/useClockStyles'; -export function RenderDate({ options, now }: { options: ClockOptions; now: Moment }) { +export function RenderDate({ + options, + now, + width, + height, +}: { + options: ClockOptions; + now: Moment; + width: number; + height: number; +}) { + const { date } = useClockStyles(options); const { dateSettings } = options; - const className = useMemo(() => { - return css` - font-size: ${dateSettings.fontSize}; - font-weight: ${dateSettings.fontWeight}; - font-family: ${options.fontMono ? 'monospace' : ''}; - margin: 0; - `; - }, [dateSettings.fontSize, dateSettings.fontWeight, options.fontMono]); - const display = now.locale(dateSettings.locale || '').format(dateSettings.dateFormat); + if (options.style === ClockStyle.digital) { + return ; + } + return ( -

{display}

+

{display}

 ); } diff --git a/src/components/RenderDescription.tsx b/src/components/RenderDescription.tsx index 1d7203cc..667c94b1 100644 --- a/src/components/RenderDescription.tsx +++ b/src/components/RenderDescription.tsx @@ -1,22 +1,36 @@ -import { css } from '@emotion/css'; -import React, { useMemo } from 'react'; -import { ClockOptions } from 'types'; +import React from 'react'; +import { ClockOptions, ClockStyle } from 'types'; +import { DigitalTime } from './digital/DigitalTime'; +import { getHeights } from './digital/utils'; +import { useClockStyles } from 'hooks/useClockStyles'; -export function RenderDescription({ options, descriptionText }: { options: ClockOptions; descriptionText: string }) { - const { descriptionSettings } = options; +export function RenderDescription({ + options, + descriptionText, + width, + height, +}: { + options: ClockOptions; + descriptionText: string; + width: number; + height: number; +}) { + const { description } = useClockStyles(options); - const className = useMemo(() => { - return css` - font-size: ${descriptionSettings.fontSize}; - font-weight: ${descriptionSettings.fontWeight}; - font-family: ${options.fontMono ? 'monospace' : ''}; - margin: 0; - `; - }, [descriptionSettings.fontSize, descriptionSettings.fontWeight, options.fontMono]); + if (options.style === ClockStyle.digital) { + return ( + + ); + } return ( -

{descriptionText}

+

{descriptionText}

 ); } diff --git a/src/components/RenderTime.tsx b/src/components/RenderTime.tsx index 07245306..d2fbd9cb 100644 --- a/src/components/RenderTime.tsx +++ b/src/components/RenderTime.tsx @@ -1,8 +1,10 @@ -import { css } from '@emotion/css'; import { t } from '@grafana/i18n'; import moment, { Moment } from 'moment-timezone'; -import React, { useMemo } from 'react'; -import { ClockMode, ClockOptions, ClockType, TimeSettings } from 'types'; +import React from 'react'; +import { ClockMode, ClockOptions, ClockStyle, ClockType, TimeSettings } from 'types'; +import { DigitalTime } from './digital/DigitalTime'; +import { getHeights } from './digital/utils'; +import { useClockStyles } from 'hooks/useClockStyles'; function getStrings() { const oneYear = t('components.RenderTime.getStrings.oneYear', '1 year'); @@ -150,30 +152,22 @@ function getTimeFormat(clockType: ClockType, timeSettings: TimeSettings): string return 'HH:mm:ss'; } -export function RenderTime({ - now, - options, - targetTime, - err, -}: { +interface RenderTimeProps { now: moment.Moment; options: ClockOptions; targetTime: moment.Moment; err: string | null; -}) { + width: number; + height: number; +} + +export function RenderTime({ now, options, targetTime, err, width, height }: RenderTimeProps) { const { clockType, timeSettings, mode } = options; - const className = useMemo(() => { - return css` - font-size: ${timeSettings.fontSize}; - font-family: ${options.fontMono ? 'monospace' : ''}; - font-weight: ${timeSettings.fontWeight}; - margin: 0; - `; - }, [options.fontMono, timeSettings.fontSize, timeSettings.fontWeight]); + const { time } = useClockStyles(options); let display = ''; if (err !== null) { - return

{err}

; + return

{err}

; } switch (mode) { @@ -196,5 +190,9 @@ export function RenderTime({ break; } - return

{display}

; + if (options.style === ClockStyle.digital) { + return ; + } + + return

{display}

; } diff --git a/src/components/RenderZone.tsx b/src/components/RenderZone.tsx index 21c4a86d..7d8ed921 100644 --- a/src/components/RenderZone.tsx +++ b/src/components/RenderZone.tsx @@ -1,23 +1,28 @@ -import { css } from '@emotion/css'; import { Moment } from 'moment-timezone'; -import React, { useMemo } from 'react'; -import { ClockOptions, ZoneFormat } from 'types'; -import { getMoment } from 'utils'; +import React from 'react'; +import { ClockOptions, ClockStyle, ZoneFormat } from '../types'; +import { getMoment } from '../utils'; +import { DigitalTime } from './digital/DigitalTime'; +import { getHeights } from './digital/utils'; +import { useClockStyles } from 'hooks/useClockStyles'; -export function RenderZone({ options, now, timezone }: { options: ClockOptions; now: Moment; timezone: string }) { +export function RenderZone({ + options, + now, + timezone, + width, + height, +}: { + options: ClockOptions; + now: Moment; + timezone: string; + width: number; + height: number; +}) { + const styles = useClockStyles(options); const { timezoneSettings } = options; const { zoneFormat } = timezoneSettings; - const className = useMemo(() => { - return css` - font-size: ${timezoneSettings.fontSize}; - font-weight: ${timezoneSettings.fontWeight}; - font-family: ${options.fontMono ? 'monospace' : ''}; - line-height: 1.4; - margin: 0; - `; - }, [options.fontMono, timezoneSettings.fontSize, timezoneSettings.fontWeight]); - let zone = timezone; switch (zoneFormat) { @@ -38,8 +43,13 @@ export function RenderZone({ options, now, timezone }: { options: ClockOptions; } } + if (options.style === ClockStyle.digital) { + const text = zoneFormat === ZoneFormat.nameOffset ? `${zone}\n${now.format('Z z')}` : zone; + return ; + } + return ( -

+

{zone} {zoneFormat === ZoneFormat.nameOffset && ( <> diff --git a/src/components/digital/Colon.tsx b/src/components/digital/Colon.tsx new file mode 100644 index 00000000..922118dd --- /dev/null +++ b/src/components/digital/Colon.tsx @@ -0,0 +1,35 @@ +import React from 'react'; + +interface ColonProps { + char: string; + stroke: string; + strokeWidth: number; + fill: string; + filter: string; + x?: number; +} + +export function Colon({ char, fill, filter, stroke, strokeWidth, x = 0 }: ColonProps) { + const transform = `translate(${x}, 0)`; + + return ( + <> + + + + ); +} diff --git a/src/components/digital/Dash.tsx b/src/components/digital/Dash.tsx new file mode 100644 index 00000000..e1a44275 --- /dev/null +++ b/src/components/digital/Dash.tsx @@ -0,0 +1,25 @@ +import React from 'react'; + +interface DashProps { + char: string; + stroke: string; + strokeWidth: number; + fill: string; + filter: string; + x?: number; +} + +export function Dash({ char, fill, filter, stroke, strokeWidth, x = 0 }: DashProps) { + const transform = `translate(${x}, 0)`; + + return ( + + ); +} diff --git a/src/components/digital/Digit.tsx b/src/components/digital/Digit.tsx new file mode 100644 index 00000000..0176787a --- /dev/null +++ b/src/components/digital/Digit.tsx @@ -0,0 +1,70 @@ +import React from 'react'; + +type Placement = 'bottom' | 'bottom-left' | 'bottom-right' | 'middle' | 'top' | 'top-left' | 'top-right'; + +const paths: Record = { + top: `M 118.29731,25.5 L 103.08534,41 L 44.08535,41 L 28.56756,25.5 L 44.08535,10 L 103.08534,10 L 118.29731,25.5 z `, + 'top-right': `M 121.5,28.38513 L 137,43.59709 L 137,88.59708 L 121.5,104.11487 L 106,88.59708 L 106,43.59709 L 121.5,28.38513 z `, + 'bottom-right': `M 121.5,110.44257 L 137,125.65453 L 137,170.65452 L 121.5,186.1723 L 106,170.65452 L 106,125.65453 L 121.5,110.44257 z `, + bottom: `M 118.29731,189.05743 L 103.08534,204.55743 L 44.08535,204.55743 L 28.56756,189.05743 L 44.08535,173.55743 L 103.08534,173.55743 L 118.29731,189.05743 z `, + 'bottom-left': `M 25.5,110.44257 L 41,125.65453 L 41,170.65452 L 25.5,186.1723 L 10,170.65452 L 10,125.65453 L 25.5,110.44257 z `, + 'top-left': `M 25.5,28.38513 L 41,43.59709 L 41,88.59708 L 25.5,104.11487 L 10,88.59708 L 10,43.59709 L 25.5,28.38513 z `, + middle: `M 118.29731,107 L 103.08534,122.5 L 44.08535,122.5 L 28.56756,107 L 44.08535,91.5 L 103.08534,91.5 L 118.29731,107 z `, +}; + +const digits: Record = { + 0: [paths.bottom, paths['bottom-left'], paths['bottom-right'], paths.top, paths['top-left'], paths['top-right']], + 1: [paths['bottom-right'], paths['top-right']], + 2: [paths.bottom, paths['bottom-left'], paths.middle, paths.top, paths['top-right']], + 3: [paths.bottom, paths['bottom-right'], paths.middle, paths.top, paths['top-right']], + 4: [paths['bottom-right'], paths.middle, paths['top-right'], paths['top-left']], + 5: [paths.bottom, paths['bottom-right'], paths.middle, paths.top, paths['top-left']], + 6: [paths.bottom, paths['bottom-left'], paths['bottom-right'], paths.middle, paths.top, paths['top-left']], + 7: [paths['bottom-right'], paths.top, paths['top-right']], + 8: [ + paths.bottom, + paths['bottom-left'], + paths['bottom-right'], + paths.middle, + paths.top, + paths['top-left'], + paths['top-right'], + ], + 9: [paths['bottom'], paths['bottom-right'], paths.middle, paths.top, paths['top-left'], paths['top-right']], +}; + +interface DigitProps { + parentKey: string; + char: string; + stroke: string; + strokeWidth: number; + fill: string; + filter: string; + x?: number; +} + +export function Digit({ parentKey, char, fill, filter, stroke, strokeWidth, x = 0 }: DigitProps) { + const digit = parseInt(char, 10); + + if (!digits[digit]) { + return null; + } + + const transform = `translate(${x}, 0)`; + + return ( + <> + {digits[digit].map((d, index) => ( + + ))} + + ); +} diff --git a/src/components/digital/DigitalTime.tsx b/src/components/digital/DigitalTime.tsx new file mode 100644 index 00000000..b92fc2d9 --- /dev/null +++ b/src/components/digital/DigitalTime.tsx @@ -0,0 +1,127 @@ +import { useTheme2 } from '@grafana/ui'; +import React, { useId } from 'react'; +import { ClockOptions } from 'types'; +import { Digit } from './Digit'; +import { Colon } from './Colon'; +import { Text } from './Text'; +import { + DEFAULT_FILL_COLOR, + DEFAULT_STROKE_COLOR, + SVG_DIGITIZED, + SVG_VIEW_BOX_HEIGHT, + SVG_VIEW_BOX_WIDTH, +} from '../../constants'; +import { Dash } from './Dash'; +import { getWidth } from './utils'; + +interface RenderDigitalTimeProps { + text: string; + width: number; + height: number; + options: ClockOptions; +} + +export function DigitalTime({ text, width: panelWidth, height: panelHeight, options }: RenderDigitalTimeProps) { + const key = useId(); + const theme = useTheme2(); + const { digitalSettings } = options; + + const chars = Array.from(text.trim()); + const totalViewBoxWidth = chars.reduce((acc, curr, index) => { + acc += getWidth(curr, chars[index - 1]); + return acc; + }, 0); + + const fill = digitalSettings?.fillColor + ? theme.visualization.getColorByName(digitalSettings.fillColor) + : DEFAULT_FILL_COLOR; + const stroke = digitalSettings?.strokeColor + ? theme.visualization.getColorByName(digitalSettings.strokeColor) + : DEFAULT_STROKE_COLOR; + const strokeValue = isNaN(Number(digitalSettings?.strokeWidth)) ? 0 : digitalSettings!.strokeWidth; + const strokeWidth = strokeValue!; + const glowValue = isNaN(Number(digitalSettings?.glowSize)) ? 0 : digitalSettings!.glowSize; + const glow = glowValue; + const padding = 10; + const width = panelWidth - 4 * padding; + const filterId = `glow-${key}`; + let x = -SVG_VIEW_BOX_WIDTH; + + if (panelHeight <= 10) { + return null; + } + + return ( + + + + + + + + + + + {chars.map((char, charIndex) => { + x += getWidth(char, chars[charIndex - 1]); + const digit = parseInt(char, 10); + const isDigit = !isNaN(digit); + + return ( + <> + {isDigit && ( + + )} + {char === ':' && ( + + )} + {char === '-' && ( + + )} + {!SVG_DIGITIZED.includes(char) && ( + + )} + + ); + })} + + ); +} diff --git a/src/components/digital/Text.tsx b/src/components/digital/Text.tsx new file mode 100644 index 00000000..f0f70dd8 --- /dev/null +++ b/src/components/digital/Text.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { SVG_VIEW_BOX_HEIGHT, SVG_VIEW_BOX_WIDTH } from '../../constants'; + +interface TextProps { + char: string; + stroke: string; + strokeWidth: number; + fill: string; + filter: string; + x?: number; +} + +export function Text({ char, fill, filter, stroke, strokeWidth, x = 0 }: TextProps) { + const fontSize = SVG_VIEW_BOX_HEIGHT * 0.85; + + return ( + + {char} + + ); +} diff --git a/src/components/digital/utils.test.ts b/src/components/digital/utils.test.ts new file mode 100644 index 00000000..3e94d0f7 --- /dev/null +++ b/src/components/digital/utils.test.ts @@ -0,0 +1,140 @@ +import { ClockOptions, DescriptionSource } from 'types'; +import { getHeights, getWidth } from './utils'; + +describe('getWidth', () => { + it.each([ + { char: '', prevChar: undefined, expected: 83.5 }, + { char: ' ', prevChar: undefined, expected: 83.5 }, + { char: ',', prevChar: undefined, expected: 83.5 }, + { char: '.', prevChar: undefined, expected: 83.5 }, + { char: ';', prevChar: undefined, expected: 83.5 }, + { char: '1', prevChar: '-', expected: 83.5 }, + { char: '1', prevChar: undefined, expected: 83.5 }, + { char: '1', prevChar: ' ', expected: 167 }, + { char: 'a', prevChar: undefined, expected: 167 }, + ])(`when called with $char and $prevChar then the result should be $expected`, ({ char, prevChar, expected }) => { + expect(getWidth(char, prevChar)).toBe(expected); + }); +}); + +describe('getHeights', () => { + describe('when panelHeight is below 72', () => { + const panelHeight = 71; + + it('should calculate the correct time height', () => { + const options = {} as ClockOptions; + + expect(getHeights(panelHeight, options).time).toBe(71); + }); + + it('should have no date height when date is shown', () => { + const options = { dateSettings: { showDate: true } } as ClockOptions; + + expect(getHeights(panelHeight, options).date).toBe(0); + }); + + it('should have no description height when description is shown', () => { + const options = { descriptionSettings: { source: DescriptionSource.input } } as ClockOptions; + + expect(getHeights(panelHeight, options).description).toBe(0); + }); + + it('should have no zone height when timezone is shown', () => { + const options = { timezoneSettings: { showTimezone: true } } as ClockOptions; + + expect(getHeights(panelHeight, options).zone).toBe(0); + }); + }); + + describe('when panelHeight is 72', () => { + const panelHeight = 72; + + it('should calculate the correct time height', () => { + const options = {} as ClockOptions; + + expect(getHeights(panelHeight, options).time).toBe(72); + }); + + it('should have no date height when date options are missing', () => { + const options = {} as ClockOptions; + + expect(getHeights(panelHeight, options).date).toBe(0); + }); + + it('should have no date height when date is not shown', () => { + const options = { dateSettings: { showDate: false } } as ClockOptions; + + expect(getHeights(panelHeight, options).date).toBe(0); + }); + + it('should calculate the correct date height when date is shown', () => { + const options = { dateSettings: { showDate: true } } as ClockOptions; + + expect(getHeights(panelHeight, options).date).toBe(12); + }); + + it('should have no description height when description options are missing', () => { + const options = {} as ClockOptions; + + expect(getHeights(panelHeight, options).description).toBe(0); + }); + + it('should have no description height when description is not shown', () => { + const options = { descriptionSettings: { source: DescriptionSource.none } } as ClockOptions; + + expect(getHeights(panelHeight, options).description).toBe(0); + }); + + it('should calculate the description date height when description is shown', () => { + const options = { descriptionSettings: { source: DescriptionSource.input } } as ClockOptions; + + expect(getHeights(panelHeight, options).description).toBe(12); + }); + + it('should have no zone height when timezone options are missing', () => { + const options = {} as ClockOptions; + + expect(getHeights(panelHeight, options).zone).toBe(0); + }); + + it('should have no zone height when timezone is not shown', () => { + const options = { timezoneSettings: { showTimezone: false } } as ClockOptions; + + expect(getHeights(panelHeight, options).zone).toBe(0); + }); + + it('should calculate the zone date height when timezone is shown', () => { + const options = { timezoneSettings: { showTimezone: true } } as ClockOptions; + + expect(getHeights(panelHeight, options).zone).toBe(12); + }); + }); + + describe('when panelHeight is above 72', () => { + const panelHeight = 73; + + it('should calculate the correct time height', () => { + const options = {} as ClockOptions; + + expect(getHeights(panelHeight, options).time).toBe(73); + }); + + it('should calculate the correct date height when date is shown', () => { + const options = { dateSettings: { showDate: true } } as ClockOptions; + + expect(getHeights(panelHeight, options).date).toBe(12.166666666666666); + }); + + it('should calculate the description date height when description is shown', () => { + const options = { descriptionSettings: { source: DescriptionSource.input } } as ClockOptions; + + expect(getHeights(panelHeight, options).description).toBe(12.166666666666666); + }); + + it('should calculate the correct zone height when timezone is shown', () => { + const options = { timezoneSettings: { showTimezone: true } } as ClockOptions; + + expect(getHeights(panelHeight, options).zone).toBe(12.166666666666666); + }); + }); +}); diff --git a/src/components/digital/utils.ts b/src/components/digital/utils.ts new file mode 100644 index 00000000..80542cb2 --- /dev/null +++ b/src/components/digital/utils.ts @@ -0,0 +1,46 @@ +import { ClockOptions, DescriptionSource, Heights } from '../../types'; +import { SVG_VIEW_BOX_WIDTH } from '../../constants'; + +export function getWidth(char: string, prevChar?: string): number { + if (char.trim() === '') { + return SVG_VIEW_BOX_WIDTH * 0.5; + } + + if (char === ',' || char === '.' || char === ';') { + return SVG_VIEW_BOX_WIDTH * 0.5; + } + + if (prevChar === '-' && char === '1') { + return SVG_VIEW_BOX_WIDTH * 0.5; + } + + if (prevChar === undefined && char === '1') { + return SVG_VIEW_BOX_WIDTH * 0.5; + } + + return SVG_VIEW_BOX_WIDTH; +} + +export function getHeights(panelHeight: number, options: ClockOptions): Heights { + const showDate = options?.dateSettings?.showDate || false; + const showTimezone = options?.timezoneSettings?.showTimezone || false; + const hasSource = Boolean(options?.descriptionSettings?.source); + const showDescription = hasSource ? options?.descriptionSettings?.source !== DescriptionSource.none : false; + + const noOfShown = Number(showDate) + Number(showTimezone) + Number(showDescription); + const timePercentage = noOfShown === 0 || panelHeight < 72 ? 1 : 0.5; + const time = timePercentage * panelHeight; + const heightWithoutTime = panelHeight - time; + const distributedHeight = noOfShown === 0 ? 0 : heightWithoutTime / 3; + + const date = showDate ? distributedHeight : 0; + const description = showDescription ? distributedHeight : 0; + const zone = showTimezone ? distributedHeight : 0; + + return { + date, + description, + time, + zone, + }; +} diff --git a/src/constants.ts b/src/constants.ts new file mode 100644 index 00000000..690916d9 --- /dev/null +++ b/src/constants.ts @@ -0,0 +1,8 @@ +export const DEFAULT_FILL_COLOR = 'orange'; +export const DEFAULT_STROKE_COLOR = 'dark-orange'; + +export const SVG_VIEW_BOX_WIDTH = 167; +export const SVG_VIEW_BOX_HEIGHT = 234; +export const SVG_SEPARATORS = [':', '-']; +export const SVG_DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; +export const SVG_DIGITIZED = SVG_DIGITS.concat(SVG_SEPARATORS); diff --git a/src/hooks/useClockStyles.tsx b/src/hooks/useClockStyles.tsx new file mode 100644 index 00000000..873dd133 --- /dev/null +++ b/src/hooks/useClockStyles.tsx @@ -0,0 +1,67 @@ +import { css } from '@emotion/css'; +import { GrafanaTheme2 } from '@grafana/data'; +import { useStyles2 } from '@grafana/ui'; +import { ClockOptions, ClockStyle } from 'types'; + +export function useClockStyles(options: ClockOptions) { + return useStyles2(getStyles, options); +} + +const getStyles = (theme: GrafanaTheme2, options: ClockOptions) => { + const { + bgColor, + dateSettings, + descriptionSettings, + digitalSettings, + fontMono, + style, + timeSettings, + timezoneSettings, + } = options; + const fill = + style === ClockStyle.digital && digitalSettings?.fillColor + ? theme.visualization.getColorByName(digitalSettings.fillColor) + : ''; + const fontFamily = fontMono ? 'monospace' : ''; + + return { + panel: css` + display: flex; + align-items: center; + justify-content: center; + flex-flow: column wrap; + font-family: ${fontFamily}; + text-align: center; + background-color: ${!bgColor ? theme.colors.background.primary : theme.visualization.getColorByName(bgColor)}; + `, + date: css` + font-size: ${dateSettings.fontSize}; + font-weight: ${dateSettings.fontWeight}; + font-family: ${fontFamily}; + margin: 0; + color: ${fill}; + `, + description: css` + font-size: ${descriptionSettings.fontSize}; + font-weight: ${descriptionSettings.fontWeight}; + font-family: ${fontFamily}; + margin: 0; + color: ${fill}; + `, + time: css` + font-size: ${timeSettings.fontSize}; + font-family: ${fontFamily}; + font-weight: ${timeSettings.fontWeight}; + color: ${fill}; + margin: 0; + `, + zone: css` + font-size: ${timezoneSettings.fontSize}; + font-weight: ${timezoneSettings.fontWeight}; + font-family: ${fontFamily}; + line-height: 1.4; + color: ${fill}; + margin: 0; + `, + }; +}; diff --git a/src/hooks/useInteraction.tsx b/src/hooks/useInteraction.tsx new file mode 100644 index 00000000..7b7a7a20 --- /dev/null +++ b/src/hooks/useInteraction.tsx @@ -0,0 +1,18 @@ +import { useEffect } from 'react'; +import { config, reportInteraction } from '@grafana/runtime'; + +import pluginJson from '../plugin.json'; + +export function useInteraction(name: string, options: Record) { + useEffect(() => { + const interactionName = `grafana_plugin_${name}`; + const info = { + grafana_version: config.buildInfo.version, + plugin_type: String(pluginJson.type), + plugin_version: pluginJson.info.version, + plugin_id: pluginJson.id, + plugin_name: pluginJson.name, + }; + reportInteraction(interactionName, { ...options, ...info }); + }, [name, options]); +} diff --git a/src/locales/en-US/grafana-clock-panel.json b/src/locales/en-US/grafana-clock-panel.json index 1183b34f..0e78bf45 100644 --- a/src/locales/en-US/grafana-clock-panel.json +++ b/src/locales/en-US/grafana-clock-panel.json @@ -273,6 +273,20 @@ } } }, + "digitalSettings": { + "fillColor": { + "name": "Fill Color" + }, + "glowSize": { + "name": "Glow Size" + }, + "strokeColor": { + "name": "Stroke Color" + }, + "strokeWidth": { + "name": "Stroke Width" + } + }, "fontMono": { "name": "Font monospace" }, @@ -304,6 +318,17 @@ "source": { "name": "Source" }, + "style": { + "name": "Style", + "options": { + "digital": { + "label": "Digital" + }, + "legacy": { + "label": "Text" + } + } + }, "timeSettings": { "customFormat": { "name": "Time Format", diff --git a/src/options.ts b/src/options.ts index 1ae59a00..4aa3f6c1 100644 --- a/src/options.ts +++ b/src/options.ts @@ -11,11 +11,15 @@ import { CountdownQueryCalculation, CountupQueryCalculation, DescriptionSource, + ClockStyle, } from './types'; import { ColorEditor } from './ColorEditor'; import { getTemplateSrv } from '@grafana/runtime'; import { getTimeZoneNames } from 'utils'; import { t } from '@grafana/i18n'; +import { DEFAULT_FILL_COLOR, DEFAULT_STROKE_COLOR } from './constants'; + +const isTextStyle = (options: ClockOptions) => options.style === ClockStyle.text; export const optionsBuilder = ( builder: PanelOptionsEditorBuilder, @@ -35,6 +39,17 @@ export const optionsBuilder = ( }, defaultValue: ClockMode.time, }) + .addRadio({ + path: 'style', + name: t('module.ClockOptions.style.name', 'Style'), + settings: { + options: [ + { value: ClockStyle.text, label: t('module.ClockOptions.style.options.legacy.label', 'Text') }, + { value: ClockStyle.digital, label: t('module.ClockOptions.style.options.digital.label', 'Digital') }, + ], + }, + defaultValue: ClockStyle.text, + }) .addRadio({ path: 'refresh', name: t('module.ClockOptions.refresh.name', 'Refresh'), @@ -60,8 +75,10 @@ export const optionsBuilder = ( path: 'fontMono', name: t('module.ClockOptions.fontMono.name', 'Font monospace'), defaultValue: false, + showIf: (o) => isTextStyle(o), }); + addDigitalSettings(builder); addCountdown(builder); addCountup(builder); addDescription(builder); @@ -486,6 +503,7 @@ function addDescription(builder: PanelOptionsEditorBuilder) { ), }, defaultValue: '12px', + showIf: (o) => isTextStyle(o), }) .addRadio({ category, @@ -504,6 +522,7 @@ function addDescription(builder: PanelOptionsEditorBuilder) { ], }, defaultValue: FontWeight.normal, + showIf: (o) => isTextStyle(o), }); } @@ -536,7 +555,7 @@ function addTimeFormat(builder: PanelOptionsEditorBuilder) { placeholder: t('module.ClockOptions.timeSettings.customFormat.settings.placeholder', 'date format'), }, defaultValue: undefined, - showIf: (opts) => opts.clockType === ClockType.Custom, + showIf: (o) => o.clockType === ClockType.Custom, }) .addTextInput({ category, @@ -546,6 +565,7 @@ function addTimeFormat(builder: PanelOptionsEditorBuilder) { placeholder: t('module.ClockOptions.timeSettings.fontSize.settings.placeholder', 'Font size (e.g. 12px)'), }, defaultValue: '12px', + showIf: (o) => isTextStyle(o), }) .addRadio({ category, @@ -564,6 +584,7 @@ function addTimeFormat(builder: PanelOptionsEditorBuilder) { ], }, defaultValue: FontWeight.normal, + showIf: (o) => isTextStyle(o), }); } @@ -653,7 +674,7 @@ function addTimeZone(builder: PanelOptionsEditorBuilder) { ], }, defaultValue: ZoneFormat.offsetAbbv, - showIf: (s) => s.timezoneSettings?.showTimezone, + showIf: (o) => o.timezoneSettings?.showTimezone, }) .addTextInput({ category, @@ -663,7 +684,7 @@ function addTimeZone(builder: PanelOptionsEditorBuilder) { placeholder: t('module.ClockOptions.timezoneSettings.fontSize.settings.placeholder', 'font size'), }, defaultValue: '12px', - showIf: (s) => s.timezoneSettings?.showTimezone, + showIf: (o) => o.timezoneSettings?.showTimezone && isTextStyle(o), }) .addRadio({ category, @@ -682,7 +703,7 @@ function addTimeZone(builder: PanelOptionsEditorBuilder) { ], }, defaultValue: FontWeight.normal, - showIf: (s) => s.timezoneSettings?.showTimezone, + showIf: (o) => o.timezoneSettings?.showTimezone && isTextStyle(o), }); } @@ -707,7 +728,7 @@ function addDateFormat(builder: PanelOptionsEditorBuilder) { placeholder: t('module.ClockOptions.dateSettings.dateFormat.settings.placeholder', 'Enter date format'), }, defaultValue: 'YYYY-MM-DD', - showIf: (s) => s.dateSettings?.showDate, + showIf: (o) => o.dateSettings?.showDate, }) .addTextInput({ category, @@ -720,7 +741,7 @@ function addDateFormat(builder: PanelOptionsEditorBuilder) { ), }, defaultValue: '', - showIf: (s) => s.dateSettings?.showDate, + showIf: (o) => o.dateSettings?.showDate, }) .addTextInput({ category, @@ -730,7 +751,7 @@ function addDateFormat(builder: PanelOptionsEditorBuilder) { placeholder: t('module.ClockOptions.dateSettings.fontSize.settings.placeholder', 'date format'), }, defaultValue: '20px', - showIf: (s) => s.dateSettings?.showDate, + showIf: (o) => o.dateSettings?.showDate && isTextStyle(o), }) .addRadio({ category, @@ -749,6 +770,45 @@ function addDateFormat(builder: PanelOptionsEditorBuilder) { ], }, defaultValue: FontWeight.normal, - showIf: (s) => s.dateSettings?.showDate, + showIf: (o) => o.dateSettings?.showDate && isTextStyle(o), + }); +} + +function addDigitalSettings(builder: PanelOptionsEditorBuilder) { + const category = ['Digital Options']; + builder + .addCustomEditor({ + category, + id: 'digitalSettings.fillColor', + path: 'digitalSettings.fillColor', + name: t('module.ClockOptions.digitalSettings.fillColor.name', 'Fill Color'), + editor: ColorEditor, + defaultValue: DEFAULT_FILL_COLOR, + showIf: (o) => !isTextStyle(o), + }) + .addCustomEditor({ + category, + id: 'digitalSettings.strokeColor', + path: 'digitalSettings.strokeColor', + name: t('module.ClockOptions.digitalSettings.strokeColor.name', 'Stroke Color'), + editor: ColorEditor, + defaultValue: DEFAULT_STROKE_COLOR, + showIf: (o) => !isTextStyle(o), + }) + .addSliderInput({ + category, + path: 'digitalSettings.strokeWidth', + name: t('module.ClockOptions.digitalSettings.strokeWidth.name', 'Stroke Width'), + defaultValue: 0, + settings: { max: 20, min: 0 }, + showIf: (o) => !isTextStyle(o), + }) + .addSliderInput({ + category, + path: 'digitalSettings.glowSize', + name: t('module.ClockOptions.digitalSettings.glowSize.name', 'Glow Size'), + defaultValue: 0, + settings: { max: 20, min: 0 }, + showIf: (o) => !isTextStyle(o), }); } diff --git a/src/types.ts b/src/types.ts index 26abe79b..f96e64b1 100644 --- a/src/types.ts +++ b/src/types.ts @@ -11,6 +11,8 @@ export interface ClockOptions { dateSettings: DateSettings; timeSettings: TimeSettings; timezoneSettings: TimezoneSettings; + style?: ClockStyle; + digitalSettings?: DigitalSettings; } export enum ClockSource { @@ -51,6 +53,11 @@ export enum ClockMode { countup = 'countup', } +export enum ClockStyle { + text = 'text', + digital = 'digital', +} + export enum ClockRefresh { sec = 'sec', dashboard = 'dashboard', @@ -126,3 +133,17 @@ interface TimezoneSettings { fontSize: string; fontWeight: FontWeight; } + +export interface DigitalSettings { + fillColor?: string; + strokeColor?: string; + strokeWidth?: number; + glowSize?: number; +} + +export interface Heights { + date: number; + time: number; + zone: number; + description: number; +}