UI: Outdoor Environment: Flooding level widgets.

3 years ago · 98cc9ee188
11 changed files with 315 additions and 1 deletions
--- a/application/src/main/data/json/system/widget_bundles/outdoor_environment.json
+++ b/application/src/main/data/json/system/widget_bundles/outdoor_environment.json
@ -145,6 +145,16 @@
    "co2_chart_card",
    "co2_chart_card_with_background",
    "simple_co2_chart_card",
-    "simple_co2_chart_card_with_background"
+    "simple_co2_chart_card_with_background",
+    "flooding_level_card",
+    "flooding_level_card_with_background",
+    "horizontal_flooding_level_card",
+    "horizontal_flooding_level_card_with_background",
+    "flooding_level_chart_card",
+    "flooding_level_chart_card_with_background",
+    "simple_flooding_level_chart_card",
+    "simple_flooding_level_chart_card_with_background",
+    "flooding_level_progress_bar",
+    "flooding_level_progress_bar_with_background"
  ]
 }
--- a/application/src/main/data/json/system/widget_types/flooding_level_card.json
+++ b/application/src/main/data/json/system/widget_types/flooding_level_card.json
@ -0,0 +1,29 @@
+{
+  "fqn": "flooding_level_card",
+  "name": "Flooding level card",
+  "deprecated": false,
+  "image": "data:image/png;base64,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",
+  "description": "Displays a latest flooding level telemetry data in a box layout.",
+  "descriptor": {
+    "type": "latest",
+    "sizeX": 3,
+    "sizeY": 3,
+    "resources": [],
+    "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
+    "templateCss": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsSchema": "",
+    "dataKeySettingsSchema": "",
+    "settingsDirective": "tb-value-card-widget-settings",
+    "hasBasicMode": true,
+    "basicModeDirective": "tb-value-card-basic-config",
+    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Flooding level\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.2392660816082064,\"funcBody\":\"var value = prevValue + Math.random() * 2 - 1;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 5) {\\n\\tvalue = 5;\\n}\\nreturn value;\\n\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgba(0, 0, 0, 0)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"labelPosition\":\"top\",\"layout\":\"square\",\"showLabel\":true,\"labelFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\"},\"labelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"showIcon\":true,\"iconSize\":40,\"iconSizeUnit\":\"px\",\"icon\":\"flood\",\"iconColor\":{\"type\":\"range\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"rangeList\":[{\"from\":null,\"to\":1,\"color\":\"#234CC7\"},{\"from\":1,\"to\":3,\"color\":\"#F36900\"},{\"from\":3,\"to\":null,\"color\":\"#D81838\"}],\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"valueFont\":{\"size\":36,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":\"normal\"},\"valueColor\":{\"type\":\"range\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\",\"rangeList\":[{\"from\":null,\"to\":1,\"color\":\"#234CC7\"},{\"from\":1,\"to\":3,\"color\":\"#F36900\"},{\"from\":3,\"to\":null,\"color\":\"#D81838\"}]},\"showDate\":true,\"dateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"dateFont\":{\"family\":\"Roboto\",\"size\":12,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\"},\"dateColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.38)\",\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}},\"autoScale\":true},\"title\":\"Flooding level card\",\"dropShadow\":true,\"enableFullscreen\":false,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"units\":\"m\",\"decimals\":1,\"useDashboardTimewindow\":true,\"showLegend\":false,\"widgetStyle\":{},\"actions\":{},\"configMode\":\"basic\",\"displayTimewindow\":true,\"margin\":\"0px\",\"borderRadius\":\"0px\",\"widgetCss\":\"\",\"pageSize\":1024,\"noDataDisplayMessage\":\"\",\"showTitleIcon\":false,\"titleTooltip\":\"\",\"titleFont\":{\"size\":12,\"sizeUnit\":\"px\",\"family\":null,\"weight\":null,\"style\":null,\"lineHeight\":\"1.6\"},\"titleIcon\":\"\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"14px\",\"timewindowStyle\":{\"showIcon\":true,\"iconSize\":\"14px\",\"icon\":\"query_builder\",\"iconPosition\":\"left\",\"font\":{\"size\":12,\"sizeUnit\":\"px\",\"family\":null,\"weight\":null,\"style\":null,\"lineHeight\":\"1\"},\"color\":null}}"
+  },
+  "externalId": null,
+  "tags": [
+    "weather",
+    "environment",
+    "flood",
+    "flooding"
+  ]
+}
--- a/application/src/main/data/json/system/widget_types/flooding_level_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/flooding_level_card_with_background.json
--- a/application/src/main/data/json/system/widget_types/flooding_level_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/flooding_level_chart_card.json
--- a/application/src/main/data/json/system/widget_types/flooding_level_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/flooding_level_chart_card_with_background.json
--- a/application/src/main/data/json/system/widget_types/flooding_level_progress_bar.json
+++ b/application/src/main/data/json/system/widget_types/flooding_level_progress_bar.json
@ -0,0 +1,30 @@
+{
+  "fqn": "flooding_level_progress_bar",
+  "name": "Flooding level progress bar",
+  "deprecated": false,
+  "image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAACgCAMAAAB+IdObAAAAnFBMVEXg4ODf39/g4ODg4OAAAAD////g4OD19fUjTMchISGsrKw9PT3j4+PIyMh0dHSQkJDx8fEvLy+CgoLI0vGenp7k6PhaeNVYWFjy9Pu6urqtvOqRpeM+Ys7V1dUwV8vv7+9KSkqsu+qDmt/X3vS6x+5LbdF1j9yGhoZmZmb39/efseePj4+5ubmpqamXl5dohNkxV8rCwsLj6fjk6fgljp4SAAAABXRSTlPvIL+vAC9A4IoAAARWSURBVHja7M9JEQAwCAPAUI43DvDvsjYCk3WwCHuo7dwChsn1GgbvPGAeKk/AlUgpQkYRNoqwUYSNImwUYaMIG0U+u2WvKjkMQ+HqFEeWfzGYFIaUKfL+z7eRcwMhy+xslaS4H8ygWFKsD2zI2/gVeRu/Im/jHyKrDBSO+IjlfFB8IFLwmUB/h4jjQL6KLFxfLuJ1I30V0Y6Xi+gRYENCmWD4EkT3oKjl1qjosdvjWA5Faz2LWAe2EuuXuHdOD4mkmTkz2GwWOAWEdCT3eYRbAXO3/FaQ3UlkdMxI2w9qf8EW4o0iVUT8LlJs44UCpUuIbLbs0fMhYstWpCZZeRLRPVXRqBBWCBeg0d972dsuMjMBngsKZeSSPVhwiERgYkBlBXAWGR3KZaQWKho7zOjmy27BMRndz+aNOrFcRTyDjX4RCRw0pNyQm/UM4iN3JGdgnPLA9RAJ/ytSZGOyrpVynFnpj4g021PG0YmAZgdlA5CvIlaDdBapLAAU1p+pVj8B6HhExNPVamMkxyIzo7kFWXgRsXyQdhYZKzELkPKQ78xVAvsjIhBHOttXZzLXn6DNVxGoI8NZBNpIlgSrFGx4N15xl8gVVewkTUeAv0nQpJwxuHYA5853f/220n1jxBfeLxK5EfCN94v8YYcOUgCCwgAIr/56iZWUkA3W7n87CsUGy3k13w1moqyKMj5lEPKLIYbkwhAaQ2gMoTGExhAaQ2gMoTGExhAaQ2gMoTGExhAaQ2gMoTGE5iNkqusmHppLGyivIfOYdusjZUmnPlDeQrp0GO7zxwxDNvbroMVBGAjD8Gnwuw+GIYZAownUS5f2//+3TVdddNl1m5MjzXOp0Etfpk7UwTNJt/3NwM1+6UmVnZABSNMMPujbXd0o/g8JAM+fPS0YGEijnRADtJSNwGU9Jpa2JXX2Q+jJrkM6IHrAqft/lYYEzAzpUhpiox9FrAMsqVIYsuB5JLYdu4G46w6/a/ZD5K+QZSfDhQQTO+eEDrQfcpu3VvfbxnUAZc9vQo6Qw5fyC+dIWp0jj5TsZiKcQ83z4kIH2g9hIFDm4GghcwAD5jQh5ICRJEw9g3ftNJ5bS+wAe54QXj/9mukhSxwmgc4TQhwB+CSUjfA9ZffkAfiRzhRCJNzLcik06/nwU+N939nPo4ZoU0O0qSHa1BBtaog2NUSbNwh5GKzFvlGhPCRiyzQqXItD8FOjQ3GIwVZsVCifyD1izei4R65vvLVOpoZoU0M+27t7FIZhGAzDzs/nQEihlCwejEZhjA2+/+XqExS8fXH1nkAPGjSKLYOw9QPScg1gqqlqG4eICirVukoUSeOQeAOBaiX1EmAc8ipskKxZZQbIBZznDJCer+MQ+Ry4I3g6+kCtjEMQNFcwFTRnwTgEKYEs+e/L/qwMwpZB2DIIWwZhyyBsGYQtg7BlELYMwpZB2JoI4jBF3q0TvJ4G3ptb3ATPp6Uz9mXzT8+ty/4FsaeuueShPysAAAAASUVORK5CYII=",
+  "description": "Displays flooding level reading as a horizontal progress bar. Allows to configure value range, bar colors, and other settings.",
+  "descriptor": {
+    "type": "latest",
+    "sizeX": 3,
+    "sizeY": 2,
+    "resources": [],
+    "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
+    "templateCss": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsSchema": "",
+    "dataKeySettingsSchema": "",
+    "settingsDirective": "tb-progress-bar-widget-settings",
+    "hasBasicMode": true,
+    "basicModeDirective": "tb-progress-bar-basic-config",
+    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Flooding level\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.2392660816082064,\"funcBody\":\"var value = prevValue + Math.random() * 2 - 1;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 5) {\\n\\tvalue = 5;\\n}\\nreturn value;\\n\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"rgba(0, 0, 0, 0)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"layout\":\"default\",\"autoScale\":true,\"showValue\":true,\"valueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"32px\"},\"valueColor\":{\"type\":\"range\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"rangeList\":[{\"from\":null,\"to\":1,\"color\":\"#234CC7\"},{\"from\":1,\"to\":3,\"color\":\"#F36900\"},{\"from\":3,\"to\":null,\"color\":\"#D81838\"}],\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"tickMin\":0,\"tickMax\":5,\"showTicks\":true,\"ticksFont\":{\"family\":\"Roboto\",\"size\":11,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"400\",\"lineHeight\":\"16px\"},\"ticksColor\":\"rgba(0,0,0,0.54)\",\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}},\"barColor\":{\"type\":\"range\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\",\"rangeList\":[{\"from\":null,\"to\":1,\"color\":\"#234CC7\"},{\"from\":1,\"to\":3,\"color\":\"#F36900\"},{\"from\":3,\"to\":null,\"color\":\"#D81838\"}]},\"barBackground\":\"rgba(0, 0, 0, 0.04)\"},\"title\":\"Flooding level\",\"dropShadow\":true,\"enableFullscreen\":false,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"units\":\"m\",\"decimals\":1,\"useDashboardTimewindow\":true,\"showLegend\":false,\"widgetStyle\":{},\"actions\":{},\"configMode\":\"basic\",\"displayTimewindow\":true,\"margin\":\"0px\",\"borderRadius\":\"0px\",\"widgetCss\":\"\",\"pageSize\":1024,\"noDataDisplayMessage\":\"\",\"showTitleIcon\":false,\"titleTooltip\":\"\",\"titleFont\":{\"size\":16,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":\"normal\",\"lineHeight\":\"24px\"},\"titleIcon\":\"flood\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"18px\",\"timewindowStyle\":{\"showIcon\":true,\"iconSize\":\"14px\",\"icon\":\"query_builder\",\"iconPosition\":\"left\",\"font\":{\"size\":12,\"sizeUnit\":\"px\",\"family\":null,\"weight\":null,\"style\":null,\"lineHeight\":\"1\"},\"color\":null},\"titleColor\":\"rgba(0, 0, 0, 0.87)\"}"
+  },
+  "externalId": null,
+  "tags": [
+    "progress",
+    "weather",
+    "environment",
+    "flood",
+    "flooding"
+  ]
+}
--- a/application/src/main/data/json/system/widget_types/flooding_level_progress_bar_with_background.json
+++ b/application/src/main/data/json/system/widget_types/flooding_level_progress_bar_with_background.json
--- a/application/src/main/data/json/system/widget_types/horizontal_flooding_level_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_flooding_level_card.json
@ -0,0 +1,29 @@
+{
+  "fqn": "horizontal_flooding_level_card",
+  "name": "Horizontal flooding level card",
+  "deprecated": false,
+  "image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAACgCAMAAAB+IdObAAAAn1BMVEUAAADf39/f39/g4ODg4ODf39/////k5OQjTMfg4OCRpePk6fisrKzx8fHIyMg9PT11j9zOzs7y9PuQkJD09PT5+fmtvOqsvOpYWFjI0vHV1dXb29u3t7c+Ys4wV8vCwsK8vLy6x+5aedXn5+dohNlmZmaDmt+enp5aeNUrKyt0dHSfsedMbtGdnZ0/Ys6CgoJLS0vW3fTW3fUxV8pKSkpA7yNPAAAABnRSTlMAIEDfv1C6kOEmAAADcUlEQVR42u3a53KbQBSGYUV2DivKUgQSRTR1F9lOuf9ry9kVUkjGQyyT8WDN91iGBVx4h93xD3kEAAAAAAAAAAAAAAAAAAAAAAAAAAAA8JG+fHo6Y3xjfHaTm6/cYUT06YXGeHQb0hWIbkcTugoThAwMQoYGIUODkKFByNC8FmI9egm12dOpLW1quaep0z40qEV/aX/9Q3IhRD636CzeydSekqNu1+AAx3HpwCM11CddQ503+Ihf3E29BA9m67fXM+0dIVtxtJ6fQ2zDsadGvIlpunGl8bK5I5fce9dWQx0yjV0ZGwfbjn9WPUPmguXnkqXQLg8xxVn+0IRs7iVPrx3F6R3JDQ9c/WFPn3moQ+7s5/vDLjZeprtNvxBLiOS7KZbUeBLveyKJOFvu6yZEqnVyUCHuXyH2KWQhDeclJnehZmG/B+LxthAWHYmcfgusIEhqvvRtlnSHWHkrhKgdYvCD4an1M+XBXROihjrk4G4kxTbZbrzrF+IJNQ/WYk5aIPZktabLWt1grebbY1dI0HQUa978COhPjv7Um4ZRSfd0sbXvFzJvtto38aMQwgvO896crTli9lCIuiNkK/bNSit4n9C/OPZzSp36hxTbbS6W5yeiHpKw1K2aHSHW3BKM+z3ebamv/iEUBETWacmYegEJoYadIexJzUGimV4kvfUPYXrJXBaSLAuhrWvB5gF9uK1e7EuRnP4eWvqwvizkSazVItmrtV54efPTQnpF6Px9IqT/IRFLPZfUjNJd5numVh0QJbOEyJrNeFhbpCx0DL+cjLQoomjiqxMTivh4Za8oyrLjBT7RKykXnvmo1ue8SVKHHl0WQsGsJm6prSboFJKmfialz6OSyqysokXpp6n0K8evIiJ/FVZVRqGvL/iyovez1JzYBipkzYffczXTgwtDtoUQuae/dalWu/U7ZBFKf+UfQ1ZpxmM+t8r8UuqQSZZxiKxWMuTcMqQeAis47luHr+laI/t6novCTDxRbBOzSEix/az0F6ksQ/VE/CorF+FC+nzO4Rv3SYVE6omsKltdSMuSPpgOuVi26riYyozeYBAhUdR1MaS3GETIECFkaBAyNAgZGoQMzWR0ewVvsxOFt6OxcQVvtEfGeDT6ejMxPrub8TX9Uw0AAAAAAAAAAAAAAAAAAAAAAAAAAADAB/kFV7oA4xEmmqQAAAAASUVORK5CYII=",
+  "description": "Displays a latest flooding level telemetry data in a horizontal layout.",
+  "descriptor": {
+    "type": "latest",
+    "sizeX": 5,
+    "sizeY": 1,
+    "resources": [],
+    "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
+    "templateCss": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsSchema": "",
+    "dataKeySettingsSchema": "",
+    "settingsDirective": "tb-value-card-widget-settings",
+    "hasBasicMode": true,
+    "basicModeDirective": "tb-value-card-basic-config",
+    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Flooding level\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.2392660816082064,\"funcBody\":\"var value = prevValue + Math.random() * 2 - 1;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 5) {\\n\\tvalue = 5;\\n}\\nreturn value;\\n\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgba(0, 0, 0, 0)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"labelPosition\":\"top\",\"layout\":\"horizontal\",\"showLabel\":true,\"labelFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\"},\"labelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"showIcon\":true,\"iconSize\":40,\"iconSizeUnit\":\"px\",\"icon\":\"flood\",\"iconColor\":{\"type\":\"range\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"rangeList\":[{\"from\":null,\"to\":1,\"color\":\"#234CC7\"},{\"from\":1,\"to\":3,\"color\":\"#F36900\"},{\"from\":3,\"to\":null,\"color\":\"#D81838\"}],\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"valueFont\":{\"size\":36,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":\"normal\"},\"valueColor\":{\"type\":\"range\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\",\"rangeList\":[{\"from\":null,\"to\":1,\"color\":\"#234CC7\"},{\"from\":1,\"to\":3,\"color\":\"#F36900\"},{\"from\":3,\"to\":null,\"color\":\"#D81838\"}]},\"showDate\":true,\"dateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"dateFont\":{\"family\":\"Roboto\",\"size\":12,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\"},\"dateColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.38)\",\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}},\"autoScale\":true},\"title\":\"Horizontal flooding level card\",\"dropShadow\":true,\"enableFullscreen\":false,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"units\":\"m\",\"decimals\":1,\"useDashboardTimewindow\":true,\"showLegend\":false,\"widgetStyle\":{},\"actions\":{},\"configMode\":\"basic\",\"displayTimewindow\":true,\"margin\":\"0px\",\"borderRadius\":\"0px\",\"widgetCss\":\"\",\"pageSize\":1024,\"noDataDisplayMessage\":\"\",\"showTitleIcon\":false,\"titleTooltip\":\"\",\"titleFont\":{\"size\":12,\"sizeUnit\":\"px\",\"family\":null,\"weight\":null,\"style\":null,\"lineHeight\":\"1.6\"},\"titleIcon\":\"\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"14px\",\"timewindowStyle\":{\"showIcon\":true,\"iconSize\":\"14px\",\"icon\":\"query_builder\",\"iconPosition\":\"left\",\"font\":{\"size\":12,\"sizeUnit\":\"px\",\"family\":null,\"weight\":null,\"style\":null,\"lineHeight\":\"1\"},\"color\":null}}"
+  },
+  "externalId": null,
+  "tags": [
+    "weather",
+    "environment",
+    "flood",
+    "flooding"
+  ]
+}
--- a/application/src/main/data/json/system/widget_types/horizontal_flooding_level_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_flooding_level_card_with_background.json
--- a/application/src/main/data/json/system/widget_types/simple_flooding_level_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_flooding_level_chart_card.json
@ -0,0 +1,32 @@
+{
+  "fqn": "simple_flooding_level_chart_card",
+  "name": "Simple flooding level chart card",
+  "deprecated": false,
+  "image": "data:image/png;base64,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",
+  "description": "Displays historical flooding level values as a simplified chart. Optionally may display the corresponding latest flooding level value.",
+  "descriptor": {
+    "type": "timeseries",
+    "sizeX": 4.5,
+    "sizeY": 2,
+    "resources": [],
+    "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
+    "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flooding', label: 'Flooding level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'flooding', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsSchema": "{}",
+    "dataKeySettingsSchema": "{}",
+    "latestDataKeySettingsSchema": "{}",
+    "settingsDirective": "tb-value-chart-card-widget-settings",
+    "dataKeySettingsDirective": "",
+    "latestDataKeySettingsDirective": "",
+    "hasBasicMode": true,
+    "basicModeDirective": "tb-value-chart-card-basic-config",
+    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Flooding level\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"settings\":{},\"_hash\":0.8587686344902596,\"funcBody\":\"var value = prevValue + Math.random() * 2 - 1;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 5) {\\n\\tvalue = 5;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]},\"latestDataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Latest\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"settings\":{},\"_hash\":0.8587686344902596,\"funcBody\":\"var value = prevValue + Math.random() * 2 - 1;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 5) {\\n\\tvalue = 5;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}]}],\"showTitle\":true,\"backgroundColor\":\"rgba(0, 0, 0, 0)\",\"color\":null,\"padding\":\"0\",\"settings\":{\"layout\":\"left\",\"autoScale\":true,\"showValue\":true,\"valueFont\":{\"family\":\"Roboto\",\"size\":28,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"32px\"},\"valueColor\":{\"type\":\"range\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"rangeList\":[{\"from\":null,\"to\":1,\"color\":\"#234CC7\"},{\"from\":1,\"to\":3,\"color\":\"#F36900\"},{\"from\":3,\"to\":null,\"color\":\"#D81838\"}],\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}}},\"title\":\"Flooding level\",\"dropShadow\":true,\"enableFullscreen\":false,\"titleStyle\":null,\"mobileHeight\":null,\"configMode\":\"basic\",\"actions\":{},\"showTitleIcon\":true,\"titleIcon\":\"flood\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"titleFont\":{\"size\":16,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":\"normal\",\"lineHeight\":\"24px\"},\"iconSize\":\"18px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"noDataDisplayMessage\":\"\",\"useDashboardTimewindow\":true,\"decimals\":1,\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"borderRadius\":null,\"units\":\"m\",\"displayTimewindow\":true,\"timewindow\":{\"hideInterval\":false,\"hideLastInterval\":false,\"hideQuickInterval\":false,\"hideAggregation\":false,\"hideAggInterval\":false,\"hideTimezone\":false,\"selectedTab\":1,\"history\":{\"historyType\":2,\"timewindowMs\":60000,\"interval\":43200000,\"fixedTimewindow\":{\"startTimeMs\":1697382151041,\"endTimeMs\":1697468551041},\"quickInterval\":\"CURRENT_MONTH_SO_FAR\"},\"aggregation\":{\"type\":\"AVG\",\"limit\":25000}},\"timewindowStyle\":{\"showIcon\":false,\"iconSize\":\"24px\",\"icon\":\"query_builder\",\"iconPosition\":\"left\",\"font\":{\"size\":12,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"400\",\"style\":\"normal\",\"lineHeight\":\"16px\"},\"color\":\"rgba(0, 0, 0, 0.38)\",\"displayTypePrefix\":true}}"
+  },
+  "externalId": null,
+  "tags": [
+    "weather",
+    "environment",
+    "flood",
+    "flooding"
+  ]
+}
--- a/application/src/main/data/json/system/widget_types/simple_flooding_level_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_flooding_level_chart_card_with_background.json