diff --git a/application/src/main/data/json/system/widget_types/horizontal_2_1_elliptical.json b/application/src/main/data/json/system/widget_types/horizontal_2_1_elliptical.json
index be83bb2a3e..93185e5e08 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_2_1_elliptical.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_2_1_elliptical.json
@@ -2,7 +2,7 @@
   "fqn": "horizontal_2_1_elliptical",
   "name": "Horizontal 2:1 elliptical",
   "deprecated": false,
-  "image": "data:image/png;base64,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",
+  "image": "data:image/png;base64,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",
   "description": "Widget indicates the level of liquid in Horizontal 2:1 elliptical tank.",
   "descriptor": {
     "type": "latest",
@@ -17,7 +17,7 @@
     "settingsDirective": "tb-liquid-level-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-liquid-level-card-basic-config",
-    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"return Math.floor(Math.random() * 101);\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"tankSelectionType\":\"Static\",\"selectedShape\":\"Horizontal 2:1 Elliptical\",\"shapeAttributeName\":\"tankShape\",\"tankColor\":{\"type\":\"range\",\"color\":\"#242770\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E73535DE\"},{\"from\":20,\"to\":null,\"color\":\"#242770\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E73535DE';\\n  }\\n}\\nreturn '#242770';\"},\"datasourceUnits\":\"%\",\"layout\":\"percentage\",\"volumeSource\":\"Static\",\"volumeConstant\":500,\"volumeAttributeName\":\"volume\",\"volumeUnits\":\"L\",\"volumeFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"volumeColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.18)\",\"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';\"},\"units\":\"%\",\"widgetUnitsSource\":\"Static\",\"widgetUnitsAttributeName\":\"units\",\"liquidColor\":{\"type\":\"range\",\"color\":\"#7A8BFF\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E27C7CDE\"},{\"from\":20,\"to\":null,\"color\":\"#7A8BFF\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"valueColor\":{\"type\":\"range\",\"color\":\"#000000DE\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FF0000DE\"},{\"from\":20,\"to\":null,\"color\":\"rgba(0,0,0,0.87)\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FF0000DE';\\n  }\\n}\\nreturn '#000000DE';\"},\"showBackgroundOverlay\":true,\"backgroundOverlayColor\":{\"type\":\"range\",\"color\":\"rgba(255, 255, 255, 0.76)\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FFEFEFDE\"},{\"from\":20,\"to\":null,\"color\":\"#FFFFFFC2\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FFEFEFDE';\\n  }\\n}\\nreturn '#FFFFFFC2';\"},\"showTooltip\":true,\"showTooltipLevel\":true,\"tooltipUnits\":\"%\",\"tooltipLevelDecimals\":0,\"tooltipLevelFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipLevelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.76)\",\"rangeList\":[],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"showTooltipDate\":true,\"tooltipDateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"tooltipDateFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipDateColor\":\"#000000C2\",\"tooltipBackgroundColor\":\"#FFFFFFC2\",\"tooltipBackgroundBlur\":3},\"title\":\"Liquid level\",\"useDashboardTimewindow\":true,\"displayTimewindow\":true,\"configMode\":\"basic\",\"titleFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"1.5\"},\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"showTitleIcon\":false,\"titleIcon\":\"water_drop\",\"iconColor\":\"#5469FF\",\"decimals\":0,\"enableDataExport\":false,\"enableFullscreen\":true,\"borderRadius\":null,\"actions\":{},\"iconSize\":\"24px\"}"
+    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"return Math.floor(Math.random() * 101);\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"tankSelectionType\":\"static\",\"selectedShape\":\"Horizontal 2:1 Elliptical\",\"shapeAttributeName\":\"tankShape\",\"tankColor\":{\"type\":\"range\",\"color\":\"#242770\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E73535DE\"},{\"from\":20,\"to\":null,\"color\":\"#242770\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E73535DE';\\n  }\\n}\\nreturn '#242770';\"},\"datasourceUnits\":\"%\",\"layout\":\"percentage\",\"volumeSource\":\"static\",\"volumeConstant\":500,\"volumeAttributeName\":\"volume\",\"volumeUnits\":\"L\",\"volumeFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"volumeColor\":\"rgba(0, 0, 0, 0.18)\",\"units\":\"%\",\"widgetUnitsSource\":\"static\",\"widgetUnitsAttributeName\":\"units\",\"liquidColor\":{\"type\":\"range\",\"color\":\"#7A8BFF\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E27C7CDE\"},{\"from\":20,\"to\":null,\"color\":\"#7A8BFF\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"valueColor\":{\"type\":\"range\",\"color\":\"#000000DE\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FF0000DE\"},{\"from\":20,\"to\":null,\"color\":\"rgba(0,0,0,0.87)\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FF0000DE';\\n  }\\n}\\nreturn '#000000DE';\"},\"showBackgroundOverlay\":true,\"backgroundOverlayColor\":{\"type\":\"range\",\"color\":\"rgba(255, 255, 255, 0.76)\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FFEFEFDE\"},{\"from\":20,\"to\":null,\"color\":\"#FFFFFFC2\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FFEFEFDE';\\n  }\\n}\\nreturn '#FFFFFFC2';\"},\"showTooltip\":true,\"showTooltipLevel\":true,\"tooltipUnits\":\"%\",\"tooltipLevelDecimals\":0,\"tooltipLevelFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipLevelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.76)\",\"rangeList\":[],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"showTooltipDate\":true,\"tooltipDateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"tooltipDateFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipDateColor\":\"rgba(0, 0, 0, 0.76)\",\"tooltipBackgroundColor\":\"rgba(255, 255, 255, 0.76)\",\"tooltipBackgroundBlur\":3,\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}}},\"title\":\"Liquid level\",\"useDashboardTimewindow\":true,\"displayTimewindow\":true,\"configMode\":\"basic\",\"titleFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"1.5\"},\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"showTitleIcon\":false,\"titleIcon\":\"water_drop\",\"iconColor\":\"#5469FF\",\"decimals\":0,\"enableDataExport\":false,\"enableFullscreen\":true,\"borderRadius\":null,\"actions\":{},\"iconSize\":\"24px\"}"
   },
   "externalId": null,
   "tags": null
diff --git a/application/src/main/data/json/system/widget_types/horizontal_capsule.json b/application/src/main/data/json/system/widget_types/horizontal_capsule.json
index 9bd6ffe5d1..a35a6b1803 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_capsule.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_capsule.json
@@ -17,7 +17,7 @@
     "settingsDirective": "tb-liquid-level-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-liquid-level-card-basic-config",
-    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"return Math.floor(Math.random() * 101);\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"tankSelectionType\":\"Static\",\"selectedShape\":\"Horizontal Capsule\",\"shapeAttributeName\":\"tankShape\",\"tankColor\":{\"type\":\"range\",\"color\":\"#242770\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E73535DE\"},{\"from\":20,\"to\":null,\"color\":\"#242770\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E73535DE';\\n  }\\n}\\nreturn '#242770';\"},\"datasourceUnits\":\"%\",\"layout\":\"percentage\",\"volumeSource\":\"Static\",\"volumeConstant\":500,\"volumeAttributeName\":\"volume\",\"volumeUnits\":\"L\",\"volumeFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"volumeColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.18)\",\"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';\"},\"units\":\"%\",\"widgetUnitsSource\":\"Static\",\"widgetUnitsAttributeName\":\"units\",\"liquidColor\":{\"type\":\"range\",\"color\":\"#7A8BFF\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E27C7CDE\"},{\"from\":20,\"to\":null,\"color\":\"#7A8BFF\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"valueColor\":{\"type\":\"range\",\"color\":\"#000000DE\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FF0000DE\"},{\"from\":20,\"to\":null,\"color\":\"rgba(0,0,0,0.87)\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FF0000DE';\\n  }\\n}\\nreturn '#000000DE';\"},\"showBackgroundOverlay\":true,\"backgroundOverlayColor\":{\"type\":\"range\",\"color\":\"#FFFFFFC2\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FFEFEFDE\"},{\"from\":20,\"to\":null,\"color\":\"#FFFFFFC2\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FFEFEFDE';\\n  }\\n}\\nreturn '#FFFFFFC2';\"},\"showTooltip\":true,\"showTooltipLevel\":true,\"tooltipUnits\":\"%\",\"tooltipLevelDecimals\":0,\"tooltipLevelFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipLevelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.76)\",\"rangeList\":[],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"showTooltipDate\":true,\"tooltipDateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"tooltipDateFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipDateColor\":\"#000000C2\",\"tooltipBackgroundColor\":\"#FFFFFFC2\",\"tooltipBackgroundBlur\":3},\"title\":\"Liquid level\",\"useDashboardTimewindow\":true,\"displayTimewindow\":true,\"configMode\":\"basic\",\"titleFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"1.5\"},\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"showTitleIcon\":false,\"titleIcon\":\"water_drop\",\"iconColor\":\"#5469FF\",\"decimals\":0,\"enableDataExport\":false,\"enableFullscreen\":true,\"borderRadius\":null,\"actions\":{},\"iconSize\":\"24px\"}"
+    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"return Math.floor(Math.random() * 101);\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"tankSelectionType\":\"static\",\"selectedShape\":\"Horizontal Capsule\",\"shapeAttributeName\":\"tankShape\",\"tankColor\":{\"type\":\"range\",\"color\":\"#242770\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E73535DE\"},{\"from\":20,\"to\":null,\"color\":\"#242770\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E73535DE';\\n  }\\n}\\nreturn '#242770';\"},\"datasourceUnits\":\"%\",\"layout\":\"percentage\",\"volumeSource\":\"static\",\"volumeConstant\":500,\"volumeAttributeName\":\"volume\",\"volumeUnits\":\"L\",\"volumeFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"volumeColor\":\"rgba(0, 0, 0, 0.18)\",\"units\":\"%\",\"widgetUnitsSource\":\"static\",\"widgetUnitsAttributeName\":\"units\",\"liquidColor\":{\"type\":\"range\",\"color\":\"#7A8BFF\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E27C7CDE\"},{\"from\":20,\"to\":null,\"color\":\"#7A8BFF\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"valueColor\":{\"type\":\"range\",\"color\":\"#000000DE\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FF0000DE\"},{\"from\":20,\"to\":null,\"color\":\"rgba(0,0,0,0.87)\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FF0000DE';\\n  }\\n}\\nreturn '#000000DE';\"},\"showBackgroundOverlay\":true,\"backgroundOverlayColor\":{\"type\":\"range\",\"color\":\"#FFFFFFC2\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FFEFEFDE\"},{\"from\":20,\"to\":null,\"color\":\"#FFFFFFC2\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FFEFEFDE';\\n  }\\n}\\nreturn '#FFFFFFC2';\"},\"showTooltip\":true,\"showTooltipLevel\":true,\"tooltipUnits\":\"%\",\"tooltipLevelDecimals\":0,\"tooltipLevelFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipLevelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.76)\",\"rangeList\":[],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"showTooltipDate\":true,\"tooltipDateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"tooltipDateFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipDateColor\":\"rgba(0, 0, 0, 0.76)\",\"tooltipBackgroundColor\":\"rgba(255, 255, 255, 0.76)\",\"tooltipBackgroundBlur\":3,\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}}},\"title\":\"Liquid level\",\"useDashboardTimewindow\":true,\"displayTimewindow\":true,\"configMode\":\"basic\",\"titleFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"1.5\"},\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"showTitleIcon\":false,\"titleIcon\":\"water_drop\",\"iconColor\":\"#5469FF\",\"decimals\":0,\"enableDataExport\":false,\"enableFullscreen\":true,\"borderRadius\":null,\"actions\":{},\"iconSize\":\"24px\"}"
   },
   "externalId": null,
   "tags": null
diff --git a/application/src/main/data/json/system/widget_types/horizontal_cylinder.json b/application/src/main/data/json/system/widget_types/horizontal_cylinder.json
index 285a4c11ef..c85fb8f839 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_cylinder.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_cylinder.json
@@ -17,7 +17,7 @@
     "settingsDirective": "tb-liquid-level-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-liquid-level-card-basic-config",
-    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"return Math.floor(Math.random() * 101);\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"tankSelectionType\":\"Static\",\"selectedShape\":\"Horizontal Cylinder\",\"shapeAttributeName\":\"tankShape\",\"tankColor\":{\"type\":\"range\",\"color\":\"#242770\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E73535DE\"},{\"from\":20,\"to\":null,\"color\":\"#242770\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E73535DE';\\n  }\\n}\\nreturn '#242770';\"},\"datasourceUnits\":\"%\",\"layout\":\"percentage\",\"volumeSource\":\"Static\",\"volumeConstant\":500,\"volumeAttributeName\":\"volume\",\"volumeUnits\":\"L\",\"volumeFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"volumeColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.18)\",\"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';\"},\"units\":\"%\",\"widgetUnitsSource\":\"Static\",\"widgetUnitsAttributeName\":\"units\",\"liquidColor\":{\"type\":\"range\",\"color\":\"#7A8BFF\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E27C7CDE\"},{\"from\":20,\"to\":null,\"color\":\"#7A8BFF\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"valueColor\":{\"type\":\"range\",\"color\":\"#000000DE\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FF0000DE\"},{\"from\":20,\"to\":null,\"color\":\"rgba(0,0,0,0.87)\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FF0000DE';\\n  }\\n}\\nreturn '#000000DE';\"},\"showBackgroundOverlay\":true,\"backgroundOverlayColor\":{\"type\":\"range\",\"color\":\"#FFFFFFC2\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FFEFEFDE\"},{\"from\":20,\"to\":null,\"color\":\"#FFFFFFC2\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FFEFEFDE';\\n  }\\n}\\nreturn '#FFFFFFC2';\"},\"showTooltip\":true,\"showTooltipLevel\":true,\"tooltipUnits\":\"%\",\"tooltipLevelDecimals\":0,\"tooltipLevelFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipLevelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.76)\",\"rangeList\":[],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"showTooltipDate\":true,\"tooltipDateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"tooltipDateFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipDateColor\":\"#000000C2\",\"tooltipBackgroundColor\":\"#FFFFFFC2\",\"tooltipBackgroundBlur\":3},\"title\":\"Liquid level\",\"useDashboardTimewindow\":true,\"displayTimewindow\":true,\"configMode\":\"basic\",\"titleFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"1.5\"},\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"showTitleIcon\":false,\"titleIcon\":\"water_drop\",\"iconColor\":\"#5469FF\",\"decimals\":0,\"enableDataExport\":false,\"enableFullscreen\":true,\"borderRadius\":null,\"actions\":{},\"iconSize\":\"24px\"}"
+    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"return Math.floor(Math.random() * 101);\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"tankSelectionType\":\"static\",\"selectedShape\":\"Horizontal Cylinder\",\"shapeAttributeName\":\"tankShape\",\"tankColor\":{\"type\":\"range\",\"color\":\"#242770\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E73535DE\"},{\"from\":20,\"to\":null,\"color\":\"#242770\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E73535DE';\\n  }\\n}\\nreturn '#242770';\"},\"datasourceUnits\":\"%\",\"layout\":\"percentage\",\"volumeSource\":\"static\",\"volumeConstant\":500,\"volumeAttributeName\":\"volume\",\"volumeUnits\":\"L\",\"volumeFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"volumeColor\":\"rgba(0, 0, 0, 0.18)\",\"units\":\"%\",\"widgetUnitsSource\":\"static\",\"widgetUnitsAttributeName\":\"units\",\"liquidColor\":{\"type\":\"range\",\"color\":\"#7A8BFF\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E27C7CDE\"},{\"from\":20,\"to\":null,\"color\":\"#7A8BFF\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"valueColor\":{\"type\":\"range\",\"color\":\"#000000DE\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FF0000DE\"},{\"from\":20,\"to\":null,\"color\":\"rgba(0,0,0,0.87)\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FF0000DE';\\n  }\\n}\\nreturn '#000000DE';\"},\"showBackgroundOverlay\":true,\"backgroundOverlayColor\":{\"type\":\"range\",\"color\":\"#FFFFFFC2\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FFEFEFDE\"},{\"from\":20,\"to\":null,\"color\":\"#FFFFFFC2\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FFEFEFDE';\\n  }\\n}\\nreturn '#FFFFFFC2';\"},\"showTooltip\":true,\"showTooltipLevel\":true,\"tooltipUnits\":\"%\",\"tooltipLevelDecimals\":0,\"tooltipLevelFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipLevelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.76)\",\"rangeList\":[],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"showTooltipDate\":true,\"tooltipDateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"tooltipDateFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipDateColor\":\"rgba(0, 0, 0, 0.76)\",\"tooltipBackgroundColor\":\"rgba(255, 255, 255, 0.76)\",\"tooltipBackgroundBlur\":3,\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}}},\"title\":\"Liquid level\",\"useDashboardTimewindow\":true,\"displayTimewindow\":true,\"configMode\":\"basic\",\"titleFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"1.5\"},\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"showTitleIcon\":false,\"titleIcon\":\"water_drop\",\"iconColor\":\"#5469FF\",\"decimals\":0,\"enableDataExport\":false,\"enableFullscreen\":true,\"borderRadius\":null,\"actions\":{},\"iconSize\":\"24px\"}"
   },
   "externalId": null,
   "tags": null
diff --git a/application/src/main/data/json/system/widget_types/horizontal_dish_ends.json b/application/src/main/data/json/system/widget_types/horizontal_dish_ends.json
index c791a1adac..ed4a350197 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_dish_ends.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_dish_ends.json
@@ -17,7 +17,7 @@
     "settingsDirective": "tb-liquid-level-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-liquid-level-card-basic-config",
-    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"return Math.floor(Math.random() * 101);\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"tankSelectionType\":\"Static\",\"selectedShape\":\"Horizontal Dish Ends\",\"shapeAttributeName\":\"tankShape\",\"tankColor\":{\"type\":\"range\",\"color\":\"#242770\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E73535DE\"},{\"from\":20,\"to\":null,\"color\":\"#242770\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E73535DE';\\n  }\\n}\\nreturn '#242770';\"},\"datasourceUnits\":\"%\",\"layout\":\"percentage\",\"volumeSource\":\"Static\",\"volumeConstant\":500,\"volumeAttributeName\":\"volume\",\"volumeUnits\":\"L\",\"volumeFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"volumeColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.18)\",\"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';\"},\"units\":\"%\",\"widgetUnitsSource\":\"Static\",\"widgetUnitsAttributeName\":\"units\",\"liquidColor\":{\"type\":\"range\",\"color\":\"#7A8BFF\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E27C7CDE\"},{\"from\":20,\"to\":null,\"color\":\"#7A8BFF\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"valueColor\":{\"type\":\"range\",\"color\":\"#000000DE\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FF0000DE\"},{\"from\":20,\"to\":null,\"color\":\"rgba(0,0,0,0.87)\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FF0000DE';\\n  }\\n}\\nreturn '#000000DE';\"},\"showBackgroundOverlay\":true,\"backgroundOverlayColor\":{\"type\":\"range\",\"color\":\"rgba(255, 255, 255, 0.76)\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FFEFEFDE\"},{\"from\":20,\"to\":null,\"color\":\"#FFFFFFC2\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FFEFEFDE';\\n  }\\n}\\nreturn '#FFFFFFC2';\"},\"showTooltip\":true,\"showTooltipLevel\":true,\"tooltipUnits\":\"%\",\"tooltipLevelDecimals\":0,\"tooltipLevelFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipLevelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.76)\",\"rangeList\":[],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"showTooltipDate\":true,\"tooltipDateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"tooltipDateFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipDateColor\":\"#000000C2\",\"tooltipBackgroundColor\":\"#FFFFFFC2\",\"tooltipBackgroundBlur\":3},\"title\":\"Liquid level\",\"useDashboardTimewindow\":true,\"displayTimewindow\":true,\"configMode\":\"basic\",\"titleFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"1.5\"},\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"showTitleIcon\":false,\"titleIcon\":\"water_drop\",\"iconColor\":\"#5469FF\",\"decimals\":0,\"enableDataExport\":false,\"enableFullscreen\":true,\"borderRadius\":null,\"actions\":{},\"iconSize\":\"24px\"}"
+    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"return Math.floor(Math.random() * 101);\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"tankSelectionType\":\"static\",\"selectedShape\":\"Horizontal Dish Ends\",\"shapeAttributeName\":\"tankShape\",\"tankColor\":{\"type\":\"range\",\"color\":\"#242770\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E73535DE\"},{\"from\":20,\"to\":null,\"color\":\"#242770\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E73535DE';\\n  }\\n}\\nreturn '#242770';\"},\"datasourceUnits\":\"%\",\"layout\":\"percentage\",\"volumeSource\":\"static\",\"volumeConstant\":500,\"volumeAttributeName\":\"volume\",\"volumeUnits\":\"L\",\"volumeFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"volumeColor\":\"rgba(0, 0, 0, 0.18)\",\"units\":\"%\",\"widgetUnitsSource\":\"static\",\"widgetUnitsAttributeName\":\"units\",\"liquidColor\":{\"type\":\"range\",\"color\":\"#7A8BFF\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E27C7CDE\"},{\"from\":20,\"to\":null,\"color\":\"#7A8BFF\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"valueColor\":{\"type\":\"range\",\"color\":\"#000000DE\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FF0000DE\"},{\"from\":20,\"to\":null,\"color\":\"rgba(0,0,0,0.87)\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FF0000DE';\\n  }\\n}\\nreturn '#000000DE';\"},\"showBackgroundOverlay\":true,\"backgroundOverlayColor\":{\"type\":\"range\",\"color\":\"rgba(255, 255, 255, 0.76)\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FFEFEFDE\"},{\"from\":20,\"to\":null,\"color\":\"#FFFFFFC2\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FFEFEFDE';\\n  }\\n}\\nreturn '#FFFFFFC2';\"},\"showTooltip\":true,\"showTooltipLevel\":true,\"tooltipUnits\":\"%\",\"tooltipLevelDecimals\":0,\"tooltipLevelFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipLevelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.76)\",\"rangeList\":[],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"showTooltipDate\":true,\"tooltipDateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"tooltipDateFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipDateColor\":\"rgba(0, 0, 0, 0.76)\",\"tooltipBackgroundColor\":\"rgba(255, 255, 255, 0.76)\",\"tooltipBackgroundBlur\":3,\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}}},\"title\":\"Liquid level\",\"useDashboardTimewindow\":true,\"displayTimewindow\":true,\"configMode\":\"basic\",\"titleFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"1.5\"},\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"showTitleIcon\":false,\"titleIcon\":\"water_drop\",\"iconColor\":\"#5469FF\",\"decimals\":0,\"enableDataExport\":false,\"enableFullscreen\":true,\"borderRadius\":null,\"actions\":{},\"iconSize\":\"24px\"}"
   },
   "externalId": null,
   "tags": null
diff --git a/application/src/main/data/json/system/widget_types/horizontal_ellipse.json b/application/src/main/data/json/system/widget_types/horizontal_ellipse.json
index 474a2d20a4..e815474e34 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_ellipse.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_ellipse.json
@@ -17,7 +17,7 @@
     "settingsDirective": "tb-liquid-level-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-liquid-level-card-basic-config",
-    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"return Math.floor(Math.random() * 101);\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"tankSelectionType\":\"Static\",\"selectedShape\":\"Horizontal Ellipse\",\"shapeAttributeName\":\"tankShape\",\"tankColor\":{\"type\":\"range\",\"color\":\"#242770\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E73535DE\"},{\"from\":20,\"to\":null,\"color\":\"#242770\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E73535DE';\\n  }\\n}\\nreturn '#242770';\"},\"datasourceUnits\":\"%\",\"layout\":\"percentage\",\"volumeSource\":\"Static\",\"volumeConstant\":500,\"volumeAttributeName\":\"volume\",\"volumeUnits\":\"L\",\"volumeFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"volumeColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.18)\",\"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';\"},\"units\":\"%\",\"widgetUnitsSource\":\"Static\",\"widgetUnitsAttributeName\":\"units\",\"liquidColor\":{\"type\":\"range\",\"color\":\"#7A8BFF\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E27C7CDE\"},{\"from\":20,\"to\":null,\"color\":\"#7A8BFF\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"valueColor\":{\"type\":\"range\",\"color\":\"#000000DE\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FF0000DE\"},{\"from\":20,\"to\":null,\"color\":\"rgba(0,0,0,0.87)\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FF0000DE';\\n  }\\n}\\nreturn '#000000DE';\"},\"showBackgroundOverlay\":true,\"backgroundOverlayColor\":{\"type\":\"range\",\"color\":\"#FFFFFFC2\",\"rangeList\":[{\"from\":0,\"to\":20,\"color\":\"#FFEFEFDE\"},{\"from\":20,\"to\":null,\"color\":\"#FFFFFFC2\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FFEFEFDE';\\n  }\\n}\\nreturn '#FFFFFFC2';\"},\"showTooltip\":true,\"showTooltipLevel\":true,\"tooltipUnits\":\"%\",\"tooltipLevelDecimals\":0,\"tooltipLevelFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipLevelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.76)\",\"rangeList\":[],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"showTooltipDate\":true,\"tooltipDateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"tooltipDateFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipDateColor\":\"#000000C2\",\"tooltipBackgroundColor\":\"#FFFFFFC2\",\"tooltipBackgroundBlur\":3},\"title\":\"Liquid level\",\"useDashboardTimewindow\":true,\"displayTimewindow\":true,\"configMode\":\"basic\",\"titleFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"1.5\"},\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"showTitleIcon\":false,\"titleIcon\":\"water_drop\",\"iconColor\":\"#5469FF\",\"decimals\":0,\"enableDataExport\":false,\"enableFullscreen\":true,\"borderRadius\":null,\"actions\":{},\"iconSize\":\"24px\"}"
+    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"return Math.floor(Math.random() * 101);\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"tankSelectionType\":\"Static\",\"selectedShape\":\"Horizontal Ellipse\",\"shapeAttributeName\":\"tankShape\",\"tankColor\":{\"type\":\"range\",\"color\":\"#242770\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E73535DE\"},{\"from\":20,\"to\":null,\"color\":\"#242770\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E73535DE';\\n  }\\n}\\nreturn '#242770';\"},\"datasourceUnits\":\"%\",\"layout\":\"percentage\",\"volumeSource\":\"static\",\"volumeConstant\":500,\"volumeAttributeName\":\"volume\",\"volumeUnits\":\"L\",\"volumeFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"volumeColor\":\"rgba(0, 0, 0, 0.18)\",\"units\":\"%\",\"widgetUnitsSource\":\"static\",\"widgetUnitsAttributeName\":\"units\",\"liquidColor\":{\"type\":\"range\",\"color\":\"#7A8BFF\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E27C7CDE\"},{\"from\":20,\"to\":null,\"color\":\"#7A8BFF\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"valueColor\":{\"type\":\"range\",\"color\":\"#000000DE\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FF0000DE\"},{\"from\":20,\"to\":null,\"color\":\"rgba(0,0,0,0.87)\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FF0000DE';\\n  }\\n}\\nreturn '#000000DE';\"},\"showBackgroundOverlay\":true,\"backgroundOverlayColor\":{\"type\":\"range\",\"color\":\"#FFFFFFC2\",\"rangeList\":[{\"from\":0,\"to\":20,\"color\":\"#FFEFEFDE\"},{\"from\":20,\"to\":null,\"color\":\"#FFFFFFC2\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FFEFEFDE';\\n  }\\n}\\nreturn '#FFFFFFC2';\"},\"showTooltip\":true,\"showTooltipLevel\":true,\"tooltipUnits\":\"%\",\"tooltipLevelDecimals\":0,\"tooltipLevelFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipLevelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.76)\",\"rangeList\":[],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"showTooltipDate\":true,\"tooltipDateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"tooltipDateFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipDateColor\":\"rgba(0, 0, 0, 0.76)\",\"tooltipBackgroundColor\":\"rgba(255, 255, 255, 0.76)\",\"tooltipBackgroundBlur\":3,\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}}},\"title\":\"Liquid level\",\"useDashboardTimewindow\":true,\"displayTimewindow\":true,\"configMode\":\"basic\",\"titleFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"1.5\"},\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"showTitleIcon\":false,\"titleIcon\":\"water_drop\",\"iconColor\":\"#5469FF\",\"decimals\":0,\"enableDataExport\":false,\"enableFullscreen\":true,\"borderRadius\":null,\"actions\":{},\"iconSize\":\"24px\"}"
   },
   "externalId": null,
   "tags": null
diff --git a/application/src/main/data/json/system/widget_types/horizontal_oval.json b/application/src/main/data/json/system/widget_types/horizontal_oval.json
index f248fc26d2..7bc50cda14 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_oval.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_oval.json
@@ -17,7 +17,7 @@
     "settingsDirective": "tb-liquid-level-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-liquid-level-card-basic-config",
-    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"return Math.floor(Math.random() * 101);\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"tankSelectionType\":\"Static\",\"selectedShape\":\"Horizontal Oval\",\"shapeAttributeName\":\"tankShape\",\"tankColor\":{\"type\":\"range\",\"color\":\"#242770\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E73535DE\"},{\"from\":20,\"to\":null,\"color\":\"#242770\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E73535DE';\\n  }\\n}\\nreturn '#242770';\"},\"datasourceUnits\":\"%\",\"layout\":\"percentage\",\"volumeSource\":\"Static\",\"volumeConstant\":500,\"volumeAttributeName\":\"volume\",\"volumeUnits\":\"L\",\"volumeFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"volumeColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.18)\",\"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';\"},\"units\":\"%\",\"widgetUnitsSource\":\"Static\",\"widgetUnitsAttributeName\":\"units\",\"liquidColor\":{\"type\":\"range\",\"color\":\"#7A8BFF\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E27C7CDE\"},{\"from\":20,\"to\":null,\"color\":\"#7A8BFF\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"valueColor\":{\"type\":\"range\",\"color\":\"#000000DE\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FF0000DE\"},{\"from\":20,\"to\":null,\"color\":\"rgba(0,0,0,0.87)\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FF0000DE';\\n  }\\n}\\nreturn '#000000DE';\"},\"showBackgroundOverlay\":true,\"backgroundOverlayColor\":{\"type\":\"range\",\"color\":\"rgba(255, 255, 255, 0.76)\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FFEFEFDE\"},{\"from\":20,\"to\":null,\"color\":\"#FFFFFFC2\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FFEFEFDE';\\n  }\\n}\\nreturn '#FFFFFFC2';\"},\"showTooltip\":true,\"showTooltipLevel\":true,\"tooltipUnits\":\"%\",\"tooltipLevelDecimals\":0,\"tooltipLevelFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipLevelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.76)\",\"rangeList\":[],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"showTooltipDate\":true,\"tooltipDateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"tooltipDateFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipDateColor\":\"#000000C2\",\"tooltipBackgroundColor\":\"#FFFFFFC2\",\"tooltipBackgroundBlur\":3},\"title\":\"Liquid level\",\"useDashboardTimewindow\":true,\"displayTimewindow\":true,\"configMode\":\"basic\",\"titleFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"1.5\"},\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"showTitleIcon\":false,\"titleIcon\":\"water_drop\",\"iconColor\":\"#5469FF\",\"decimals\":0,\"enableDataExport\":false,\"enableFullscreen\":true,\"borderRadius\":null,\"actions\":{},\"iconSize\":\"24px\"}"
+    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"return Math.floor(Math.random() * 101);\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"tankSelectionType\":\"static\",\"selectedShape\":\"Horizontal Oval\",\"shapeAttributeName\":\"tankShape\",\"tankColor\":{\"type\":\"range\",\"color\":\"#242770\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E73535DE\"},{\"from\":20,\"to\":null,\"color\":\"#242770\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E73535DE';\\n  }\\n}\\nreturn '#242770';\"},\"datasourceUnits\":\"%\",\"layout\":\"percentage\",\"volumeSource\":\"static\",\"volumeConstant\":500,\"volumeAttributeName\":\"volume\",\"volumeUnits\":\"L\",\"volumeFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"volumeColor\":\"rgba(0, 0, 0, 0.18)\",\"units\":\"%\",\"widgetUnitsSource\":\"static\",\"widgetUnitsAttributeName\":\"units\",\"liquidColor\":{\"type\":\"range\",\"color\":\"#7A8BFF\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E27C7CDE\"},{\"from\":20,\"to\":null,\"color\":\"#7A8BFF\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"valueColor\":{\"type\":\"range\",\"color\":\"#000000DE\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FF0000DE\"},{\"from\":20,\"to\":null,\"color\":\"rgba(0,0,0,0.87)\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FF0000DE';\\n  }\\n}\\nreturn '#000000DE';\"},\"showBackgroundOverlay\":true,\"backgroundOverlayColor\":{\"type\":\"range\",\"color\":\"rgba(255, 255, 255, 0.76)\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FFEFEFDE\"},{\"from\":20,\"to\":null,\"color\":\"#FFFFFFC2\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FFEFEFDE';\\n  }\\n}\\nreturn '#FFFFFFC2';\"},\"showTooltip\":true,\"showTooltipLevel\":true,\"tooltipUnits\":\"%\",\"tooltipLevelDecimals\":0,\"tooltipLevelFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipLevelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.76)\",\"rangeList\":[],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"showTooltipDate\":true,\"tooltipDateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"tooltipDateFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipDateColor\":\"rgba(0, 0, 0, 0.76)\",\"tooltipBackgroundColor\":\"rgba(255, 255, 255, 0.76)\",\"tooltipBackgroundBlur\":3,\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}}},\"title\":\"Liquid level\",\"useDashboardTimewindow\":true,\"displayTimewindow\":true,\"configMode\":\"basic\",\"titleFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"1.5\"},\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"showTitleIcon\":false,\"titleIcon\":\"water_drop\",\"iconColor\":\"#5469FF\",\"decimals\":0,\"enableDataExport\":false,\"enableFullscreen\":true,\"borderRadius\":null,\"actions\":{},\"iconSize\":\"24px\"}"
   },
   "externalId": null,
   "tags": null
diff --git a/application/src/main/data/json/system/widget_types/rectangle.json b/application/src/main/data/json/system/widget_types/rectangle.json
index 4cd788a408..b632ebd6a7 100644
--- a/application/src/main/data/json/system/widget_types/rectangle.json
+++ b/application/src/main/data/json/system/widget_types/rectangle.json
@@ -17,7 +17,7 @@
     "settingsDirective": "tb-liquid-level-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-liquid-level-card-basic-config",
-    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"return Math.floor(Math.random() * 101);\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"tankSelectionType\":\"Static\",\"selectedShape\":\"Rectangle\",\"shapeAttributeName\":\"tankShape\",\"tankColor\":{\"type\":\"range\",\"color\":\"#242770\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E73535DE\"},{\"from\":20,\"to\":null,\"color\":\"#242770\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E73535DE';\\n  }\\n}\\nreturn '#242770';\"},\"datasourceUnits\":\"%\",\"layout\":\"percentage\",\"volumeSource\":\"Static\",\"volumeConstant\":500,\"volumeAttributeName\":\"volume\",\"volumeUnits\":\"L\",\"volumeFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"volumeColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.18)\",\"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';\"},\"units\":\"%\",\"widgetUnitsSource\":\"Static\",\"widgetUnitsAttributeName\":\"units\",\"liquidColor\":{\"type\":\"range\",\"color\":\"#7A8BFF\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E27C7CDE\"},{\"from\":20,\"to\":null,\"color\":\"#7A8BFF\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"valueColor\":{\"type\":\"range\",\"color\":\"#000000DE\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FF0000DE\"},{\"from\":20,\"to\":null,\"color\":\"rgba(0,0,0,0.87)\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FF0000DE';\\n  }\\n}\\nreturn '#000000DE';\"},\"showBackgroundOverlay\":true,\"backgroundOverlayColor\":{\"type\":\"range\",\"color\":\"#FFFFFFC2\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FFEFEFDE\"},{\"from\":20,\"to\":null,\"color\":\"#FFFFFFC2\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FFEFEFDE';\\n  }\\n}\\nreturn '#FFFFFFC2';\"},\"showTooltip\":true,\"showTooltipLevel\":true,\"tooltipUnits\":\"%\",\"tooltipLevelDecimals\":0,\"tooltipLevelFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipLevelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.76)\",\"rangeList\":[],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"showTooltipDate\":true,\"tooltipDateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"tooltipDateFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipDateColor\":\"#000000C2\",\"tooltipBackgroundColor\":\"rgba(255, 255, 255, 0.76)\",\"tooltipBackgroundBlur\":3},\"title\":\"Liquid level\",\"useDashboardTimewindow\":true,\"displayTimewindow\":true,\"configMode\":\"advanced\",\"titleFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"1.5\"},\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"showTitleIcon\":false,\"titleIcon\":\"water_drop\",\"iconColor\":\"#5469FF\",\"decimals\":0,\"enableDataExport\":false,\"enableFullscreen\":true,\"borderRadius\":null,\"actions\":{},\"iconSize\":\"24px\"}"
+    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"return Math.floor(Math.random() * 101);\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"tankSelectionType\":\"static\",\"selectedShape\":\"Rectangle\",\"shapeAttributeName\":\"tankShape\",\"tankColor\":{\"type\":\"range\",\"color\":\"#242770\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E73535DE\"},{\"from\":20,\"to\":null,\"color\":\"#242770\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E73535DE';\\n  }\\n}\\nreturn '#242770';\"},\"datasourceUnits\":\"%\",\"layout\":\"percentage\",\"volumeSource\":\"static\",\"volumeConstant\":500,\"volumeAttributeName\":\"volume\",\"volumeUnits\":\"L\",\"volumeFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"volumeColor\":\"rgba(0, 0, 0, 0.18)\",\"units\":\"%\",\"widgetUnitsSource\":\"static\",\"widgetUnitsAttributeName\":\"units\",\"liquidColor\":{\"type\":\"range\",\"color\":\"#7A8BFF\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E27C7CDE\"},{\"from\":20,\"to\":null,\"color\":\"#7A8BFF\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"valueColor\":{\"type\":\"range\",\"color\":\"#000000DE\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FF0000DE\"},{\"from\":20,\"to\":null,\"color\":\"rgba(0,0,0,0.87)\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FF0000DE';\\n  }\\n}\\nreturn '#000000DE';\"},\"showBackgroundOverlay\":true,\"backgroundOverlayColor\":{\"type\":\"range\",\"color\":\"#FFFFFFC2\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FFEFEFDE\"},{\"from\":20,\"to\":null,\"color\":\"#FFFFFFC2\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FFEFEFDE';\\n  }\\n}\\nreturn '#FFFFFFC2';\"},\"showTooltip\":true,\"showTooltipLevel\":true,\"tooltipUnits\":\"%\",\"tooltipLevelDecimals\":0,\"tooltipLevelFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipLevelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.76)\",\"rangeList\":[],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"showTooltipDate\":true,\"tooltipDateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"tooltipDateFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipDateColor\":\"rgba(0, 0, 0, 0.76)\",\"tooltipBackgroundColor\":\"rgba(255, 255, 255, 0.76)\",\"tooltipBackgroundBlur\":3,\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}}},\"title\":\"Liquid level\",\"useDashboardTimewindow\":true,\"displayTimewindow\":true,\"configMode\":\"basic\",\"titleFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"1.5\"},\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"showTitleIcon\":false,\"titleIcon\":\"water_drop\",\"iconColor\":\"#5469FF\",\"decimals\":0,\"enableDataExport\":false,\"enableFullscreen\":true,\"borderRadius\":null,\"actions\":{},\"iconSize\":\"24px\"}"
   },
   "externalId": null,
   "tags": null
diff --git a/application/src/main/data/json/system/widget_types/vertical_capsule.json b/application/src/main/data/json/system/widget_types/vertical_capsule.json
index 108228be37..6a27401b9d 100644
--- a/application/src/main/data/json/system/widget_types/vertical_capsule.json
+++ b/application/src/main/data/json/system/widget_types/vertical_capsule.json
@@ -17,7 +17,7 @@
     "settingsDirective": "tb-liquid-level-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-liquid-level-card-basic-config",
-    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"return Math.floor(Math.random() * 101);\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"tankSelectionType\":\"Static\",\"selectedShape\":\"Vertical Capsule\",\"shapeAttributeName\":\"tankShape\",\"tankColor\":{\"type\":\"range\",\"color\":\"#242770\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E73535DE\"},{\"from\":20,\"to\":null,\"color\":\"#242770\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E73535DE';\\n  }\\n}\\nreturn '#242770';\"},\"datasourceUnits\":\"%\",\"layout\":\"percentage\",\"volumeSource\":\"Static\",\"volumeConstant\":500,\"volumeAttributeName\":\"volume\",\"volumeUnits\":\"L\",\"volumeFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"volumeColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.18)\",\"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';\"},\"units\":\"%\",\"widgetUnitsSource\":\"Static\",\"widgetUnitsAttributeName\":\"units\",\"liquidColor\":{\"type\":\"range\",\"color\":\"#7A8BFF\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E27C7CDE\"},{\"from\":20,\"to\":null,\"color\":\"#7A8BFF\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"valueColor\":{\"type\":\"range\",\"color\":\"#000000DE\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FF0000DE\"},{\"from\":20,\"to\":null,\"color\":\"rgba(0,0,0,0.87)\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FF0000DE';\\n  }\\n}\\nreturn '#000000DE';\"},\"showBackgroundOverlay\":true,\"backgroundOverlayColor\":{\"type\":\"range\",\"color\":\"#FFFFFFC2\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FFEFEFDE\"},{\"from\":20,\"to\":null,\"color\":\"#FFFFFFC2\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FFEFEFDE';\\n  }\\n}\\nreturn '#FFFFFFC2';\"},\"showTooltip\":true,\"showTooltipLevel\":true,\"tooltipUnits\":\"%\",\"tooltipLevelDecimals\":0,\"tooltipLevelFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipLevelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.76)\",\"rangeList\":[],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"showTooltipDate\":true,\"tooltipDateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"tooltipDateFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipDateColor\":\"#000000C2\",\"tooltipBackgroundColor\":\"#FFFFFFC2\",\"tooltipBackgroundBlur\":3},\"title\":\"Liquid level\",\"useDashboardTimewindow\":true,\"displayTimewindow\":true,\"configMode\":\"basic\",\"titleFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"1.5\"},\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"showTitleIcon\":false,\"titleIcon\":\"water_drop\",\"iconColor\":\"#5469FF\",\"decimals\":0,\"enableDataExport\":false,\"enableFullscreen\":true,\"borderRadius\":null,\"actions\":{},\"iconSize\":\"24px\"}"
+    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"return Math.floor(Math.random() * 101);\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"tankSelectionType\":\"static\",\"selectedShape\":\"Vertical Capsule\",\"shapeAttributeName\":\"tankShape\",\"tankColor\":{\"type\":\"range\",\"color\":\"#242770\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E73535DE\"},{\"from\":20,\"to\":null,\"color\":\"#242770\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E73535DE';\\n  }\\n}\\nreturn '#242770';\"},\"datasourceUnits\":\"%\",\"layout\":\"percentage\",\"volumeSource\":\"static\",\"volumeConstant\":500,\"volumeAttributeName\":\"volume\",\"volumeUnits\":\"L\",\"volumeFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"volumeColor\":\"rgba(0, 0, 0, 0.18)\",\"units\":\"%\",\"widgetUnitsSource\":\"static\",\"widgetUnitsAttributeName\":\"units\",\"liquidColor\":{\"type\":\"range\",\"color\":\"#7A8BFF\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E27C7CDE\"},{\"from\":20,\"to\":null,\"color\":\"#7A8BFF\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"valueColor\":{\"type\":\"range\",\"color\":\"#000000DE\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FF0000DE\"},{\"from\":20,\"to\":null,\"color\":\"rgba(0,0,0,0.87)\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FF0000DE';\\n  }\\n}\\nreturn '#000000DE';\"},\"showBackgroundOverlay\":true,\"backgroundOverlayColor\":{\"type\":\"range\",\"color\":\"#FFFFFFC2\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FFEFEFDE\"},{\"from\":20,\"to\":null,\"color\":\"#FFFFFFC2\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FFEFEFDE';\\n  }\\n}\\nreturn '#FFFFFFC2';\"},\"showTooltip\":true,\"showTooltipLevel\":true,\"tooltipUnits\":\"%\",\"tooltipLevelDecimals\":0,\"tooltipLevelFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipLevelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.76)\",\"rangeList\":[],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"showTooltipDate\":true,\"tooltipDateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"tooltipDateFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipDateColor\":\"rgba(0, 0, 0, 0.76)\",\"tooltipBackgroundColor\":\"rgba(255, 255, 255, 0.76)\",\"tooltipBackgroundBlur\":3,\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}}},\"title\":\"Liquid level\",\"useDashboardTimewindow\":true,\"displayTimewindow\":true,\"configMode\":\"basic\",\"titleFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"1.5\"},\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"showTitleIcon\":false,\"titleIcon\":\"water_drop\",\"iconColor\":\"#5469FF\",\"decimals\":0,\"enableDataExport\":false,\"enableFullscreen\":true,\"borderRadius\":null,\"actions\":{},\"iconSize\":\"24px\"}"
   },
   "externalId": null,
   "tags": null
diff --git a/application/src/main/data/json/system/widget_types/vertical_cylinder.json b/application/src/main/data/json/system/widget_types/vertical_cylinder.json
index 8e254df8d2..ef9f9fdd1a 100644
--- a/application/src/main/data/json/system/widget_types/vertical_cylinder.json
+++ b/application/src/main/data/json/system/widget_types/vertical_cylinder.json
@@ -17,7 +17,7 @@
     "settingsDirective": "tb-liquid-level-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-liquid-level-card-basic-config",
-    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"return Math.floor(Math.random() * 101);\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"tankSelectionType\":\"Static\",\"selectedShape\":\"Vertical Cylinder\",\"shapeAttributeName\":\"tankShape\",\"tankColor\":{\"type\":\"range\",\"color\":\"#242770\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E73535DE\"},{\"from\":20,\"to\":null,\"color\":\"#242770\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E73535DE';\\n  }\\n}\\nreturn '#242770';\"},\"datasourceUnits\":\"%\",\"layout\":\"percentage\",\"volumeSource\":\"Static\",\"volumeConstant\":500,\"volumeAttributeName\":\"volume\",\"volumeUnits\":\"L\",\"volumeFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"volumeColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.18)\",\"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';\"},\"units\":\"%\",\"widgetUnitsSource\":\"Static\",\"widgetUnitsAttributeName\":\"units\",\"liquidColor\":{\"type\":\"range\",\"color\":\"#7A8BFF\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E27C7CDE\"},{\"from\":20,\"to\":null,\"color\":\"#7A8BFF\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"valueColor\":{\"type\":\"range\",\"color\":\"#000000DE\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FF0000DE\"},{\"from\":20,\"to\":null,\"color\":\"rgba(0,0,0,0.87)\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FF0000DE';\\n  }\\n}\\nreturn '#000000DE';\"},\"showBackgroundOverlay\":true,\"backgroundOverlayColor\":{\"type\":\"range\",\"color\":\"rgba(255, 255, 255, 0.76)\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FFEFEFDE\"},{\"from\":20,\"to\":null,\"color\":\"#FFFFFFC2\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FFEFEFDE';\\n  }\\n}\\nreturn '#FFFFFFC2';\"},\"showTooltip\":true,\"showTooltipLevel\":true,\"tooltipUnits\":\"%\",\"tooltipLevelDecimals\":0,\"tooltipLevelFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipLevelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.76)\",\"rangeList\":[],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"showTooltipDate\":true,\"tooltipDateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"tooltipDateFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipDateColor\":\"#000000C2\",\"tooltipBackgroundColor\":\"#FFFFFFC2\",\"tooltipBackgroundBlur\":3},\"title\":\"Liquid level\",\"useDashboardTimewindow\":true,\"displayTimewindow\":true,\"configMode\":\"basic\",\"titleFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"1.5\"},\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"showTitleIcon\":false,\"titleIcon\":\"water_drop\",\"iconColor\":\"#5469FF\",\"decimals\":0,\"enableDataExport\":false,\"enableFullscreen\":true,\"borderRadius\":null,\"actions\":{},\"iconSize\":\"24px\"}"
+    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"return Math.floor(Math.random() * 101);\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"tankSelectionType\":\"static\",\"selectedShape\":\"Vertical Cylinder\",\"shapeAttributeName\":\"tankShape\",\"tankColor\":{\"type\":\"range\",\"color\":\"#242770\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E73535DE\"},{\"from\":20,\"to\":null,\"color\":\"#242770\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E73535DE';\\n  }\\n}\\nreturn '#242770';\"},\"datasourceUnits\":\"%\",\"layout\":\"percentage\",\"volumeSource\":\"static\",\"volumeConstant\":500,\"volumeAttributeName\":\"volume\",\"volumeUnits\":\"L\",\"volumeFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"volumeColor\":\"rgba(255, 255, 255, 0.18)\",\"units\":\"%\",\"widgetUnitsSource\":\"static\",\"widgetUnitsAttributeName\":\"units\",\"liquidColor\":{\"type\":\"range\",\"color\":\"#7A8BFF\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E27C7CDE\"},{\"from\":20,\"to\":null,\"color\":\"#7A8BFF\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"valueColor\":{\"type\":\"range\",\"color\":\"#000000DE\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FF0000DE\"},{\"from\":20,\"to\":null,\"color\":\"rgba(0,0,0,0.87)\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FF0000DE';\\n  }\\n}\\nreturn '#000000DE';\"},\"showBackgroundOverlay\":true,\"backgroundOverlayColor\":{\"type\":\"range\",\"color\":\"rgba(255, 255, 255, 0.76)\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FFEFEFDE\"},{\"from\":20,\"to\":null,\"color\":\"#FFFFFFC2\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FFEFEFDE';\\n  }\\n}\\nreturn '#FFFFFFC2';\"},\"showTooltip\":true,\"showTooltipLevel\":true,\"tooltipUnits\":\"%\",\"tooltipLevelDecimals\":0,\"tooltipLevelFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipLevelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.76)\",\"rangeList\":[],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"showTooltipDate\":true,\"tooltipDateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"tooltipDateFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipDateColor\":\"rgba(0, 0, 0, 0.76)\",\"tooltipBackgroundColor\":\"rgba(255, 255, 255, 0.76)\",\"tooltipBackgroundBlur\":3,\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}}},\"title\":\"Liquid level\",\"useDashboardTimewindow\":true,\"displayTimewindow\":true,\"configMode\":\"basic\",\"titleFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"1.5\"},\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"showTitleIcon\":false,\"titleIcon\":\"water_drop\",\"iconColor\":\"#5469FF\",\"decimals\":0,\"enableDataExport\":false,\"enableFullscreen\":true,\"borderRadius\":null,\"actions\":{},\"iconSize\":\"24px\"}"
   },
   "externalId": null,
   "tags": null
diff --git a/application/src/main/data/json/system/widget_types/vertical_oval.json b/application/src/main/data/json/system/widget_types/vertical_oval.json
index 98834e2006..f272a92416 100644
--- a/application/src/main/data/json/system/widget_types/vertical_oval.json
+++ b/application/src/main/data/json/system/widget_types/vertical_oval.json
@@ -17,7 +17,7 @@
     "settingsDirective": "tb-liquid-level-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-liquid-level-card-basic-config",
-    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"return Math.floor(Math.random() * 101);\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"tankSelectionType\":\"Static\",\"selectedShape\":\"Vertical Oval\",\"shapeAttributeName\":\"tankShape\",\"tankColor\":{\"type\":\"range\",\"color\":\"#242770\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E73535DE\"},{\"from\":20,\"to\":null,\"color\":\"#242770\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E73535DE';\\n  }\\n}\\nreturn '#242770';\"},\"datasourceUnits\":\"%\",\"layout\":\"percentage\",\"volumeSource\":\"Static\",\"volumeConstant\":500,\"volumeAttributeName\":\"volume\",\"volumeUnits\":\"L\",\"volumeFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"volumeColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.18)\",\"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';\"},\"units\":\"%\",\"widgetUnitsSource\":\"Static\",\"widgetUnitsAttributeName\":\"units\",\"liquidColor\":{\"type\":\"range\",\"color\":\"#7A8BFF\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E27C7CDE\"},{\"from\":20,\"to\":null,\"color\":\"#7A8BFF\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"valueColor\":{\"type\":\"range\",\"color\":\"#000000DE\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FF0000DE\"},{\"from\":20,\"to\":null,\"color\":\"rgba(0,0,0,0.87)\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FF0000DE';\\n  }\\n}\\nreturn '#000000DE';\"},\"showBackgroundOverlay\":true,\"backgroundOverlayColor\":{\"type\":\"range\",\"color\":\"rgba(255, 255, 255, 0.76)\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FFEFEFDE\"},{\"from\":20,\"to\":null,\"color\":\"#FFFFFFC2\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FFEFEFDE';\\n  }\\n}\\nreturn '#FFFFFFC2';\"},\"showTooltip\":true,\"showTooltipLevel\":true,\"tooltipUnits\":\"%\",\"tooltipLevelDecimals\":0,\"tooltipLevelFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipLevelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.76)\",\"rangeList\":[],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"showTooltipDate\":true,\"tooltipDateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"tooltipDateFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipDateColor\":\"#000000C2\",\"tooltipBackgroundColor\":\"#FFFFFFC2\",\"tooltipBackgroundBlur\":3},\"title\":\"Liquid level\",\"useDashboardTimewindow\":true,\"displayTimewindow\":true,\"configMode\":\"basic\",\"titleFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"1.5\"},\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"showTitleIcon\":false,\"titleIcon\":\"water_drop\",\"iconColor\":\"#5469FF\",\"decimals\":0,\"enableDataExport\":false,\"enableFullscreen\":true,\"borderRadius\":null,\"actions\":{},\"iconSize\":\"24px\"}"
+    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"return Math.floor(Math.random() * 101);\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"tankSelectionType\":\"static\",\"selectedShape\":\"Vertical Oval\",\"shapeAttributeName\":\"tankShape\",\"tankColor\":{\"type\":\"range\",\"color\":\"#242770\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E73535DE\"},{\"from\":20,\"to\":null,\"color\":\"#242770\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E73535DE';\\n  }\\n}\\nreturn '#242770';\"},\"datasourceUnits\":\"%\",\"layout\":\"percentage\",\"volumeSource\":\"static\",\"volumeConstant\":500,\"volumeAttributeName\":\"volume\",\"volumeUnits\":\"L\",\"volumeFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"volumeColor\":\"rgba(0, 0, 0, 0.18)\",\"units\":\"%\",\"widgetUnitsSource\":\"static\",\"widgetUnitsAttributeName\":\"units\",\"liquidColor\":{\"type\":\"range\",\"color\":\"#7A8BFF\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#E27C7CDE\"},{\"from\":20,\"to\":null,\"color\":\"#7A8BFF\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"valueColor\":{\"type\":\"range\",\"color\":\"#000000DE\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FF0000DE\"},{\"from\":20,\"to\":null,\"color\":\"rgba(0,0,0,0.87)\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FF0000DE';\\n  }\\n}\\nreturn '#000000DE';\"},\"showBackgroundOverlay\":true,\"backgroundOverlayColor\":{\"type\":\"range\",\"color\":\"rgba(255, 255, 255, 0.76)\",\"rangeList\":[{\"from\":null,\"to\":20,\"color\":\"#FFEFEFDE\"},{\"from\":20,\"to\":null,\"color\":\"#FFFFFFC2\"}],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#FFEFEFDE';\\n  }\\n}\\nreturn '#FFFFFFC2';\"},\"showTooltip\":true,\"showTooltipLevel\":true,\"tooltipUnits\":\"%\",\"tooltipLevelDecimals\":0,\"tooltipLevelFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipLevelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.76)\",\"rangeList\":[],\"colorFunction\":\"var percent = value;\\nif (typeof percent !== undefined) {\\n  if (percent < 20) {\\n      return '#E27C7CDE';\\n  }\\n}\\nreturn '#7A8BFF';\"},\"showTooltipDate\":true,\"tooltipDateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"tooltipDateFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"100%\"},\"tooltipDateColor\":\"rgba(0, 0, 0, 0.76)\",\"tooltipBackgroundColor\":\"rgba(255, 255, 255, 0.76)\",\"tooltipBackgroundBlur\":3,\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}}},\"title\":\"Liquid level\",\"useDashboardTimewindow\":true,\"displayTimewindow\":true,\"configMode\":\"basic\",\"titleFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"1.5\"},\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"showTitleIcon\":false,\"titleIcon\":\"water_drop\",\"iconColor\":\"#5469FF\",\"decimals\":0,\"enableDataExport\":false,\"enableFullscreen\":true,\"borderRadius\":null,\"actions\":{},\"iconSize\":\"24px\"}"
   },
   "externalId": null,
   "tags": null
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
index c5bc78bd9a..9b6274586b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
@@ -67,16 +67,13 @@
       <div fxFlex fxLayout="row" style="width: 100%;" fxLayoutAlign="space-between center">
         <div class="fixed-title-width"  translate>widgets.liquid-level-card.shape</div>
         <tb-toggle-select formControlName="tankSelectionType">
-          <tb-toggle-option [value]="shapeSelectOptions.static">
-            {{ 'widgets.liquid-level-card.static' | translate }}
-          </tb-toggle-option>
-          <tb-toggle-option [value]="shapeSelectOptions.attribute">
-            {{ 'widgets.liquid-level-card.attribute' | translate }}
+          <tb-toggle-option *ngFor="let type of DataSourceTypes" [value]="type">
+            {{ DataSourceTypeTranslations.get(type) | translate }}
           </tb-toggle-option>
         </tb-toggle-select>
       </div>
       <tb-image-cards-select #shapesImageCardsSelect
-                             [fxShow]="levelCardWidgetConfigForm.get('tankSelectionType').value === shapeSelectOptions.static"
+                             [fxShow]="levelCardWidgetConfigForm.get('tankSelectionType').value === DataSourceType.static"
                              rowHeight="{{ '1:1' }}"
                              [cols]="5"
                              [colsLtMd]="2"
@@ -84,41 +81,41 @@
                              label="{{ 'widgets.liquid-level-card.shape-type' | translate }}" formControlName="selectedShape">
         <tb-image-cards-select-option *ngFor="let shape of shapes"
                                       [value]="shape"
-                                      [image]="createShape(shapesImageMap.get(shape), this.levelCardLayouts.simple)">
-          {{ shapesTranslationMap.get(shape) | translate }}
+                                      [image]="createShape(shapesImageMap.get(shape), LevelCardLayout.simple)">
+          {{ ShapesTranslationMap.get(shape) | translate }}
         </tb-image-cards-select-option>
       </tb-image-cards-select>
-      <div class="tb-form-row space-between" style="width: 100%;"
-           *ngIf="levelCardWidgetConfigForm.get('tankSelectionType').value === shapeSelectOptions.attribute">
-        <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.shape-attribute-name</div>
-        <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
-                                [required]="isRequired('shapeAttributeName')"
-                                [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
-                                style="flex: 1"
-                                formControlName="shapeAttributeName">
-        </tb-string-autocomplete>
-      </div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="space-between center" style="width: 100%;"
-           *ngIf="levelCardWidgetConfigForm.get('tankSelectionType').value === shapeSelectOptions.attribute">
-        <div class="tb-hint" style="padding: 0;" translate>widgets.liquid-level-card.shape-by-attribute</div>
-        <div class="see-example"
-             [tb-help-popup]="'widget/lib/indicator/shape_attribute_fn'"
-             tb-help-popup-placement="left"
-             trigger-style="font-size: 12px"
-             [tb-help-popup-style]="{maxWidth: '820px'}"
-             trigger-text="{{ 'widgets.liquid-level-card.see-examples' | translate }}">
+      <ng-container *ngIf="levelCardWidgetConfigForm.get('tankSelectionType').value === DataSourceType.attribute">
+        <div class="tb-form-row space-between" style="width: 100%;">
+          <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.shape-attribute-name</div>
+          <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
+                                  [required]="isRequired('shapeAttributeName')"
+                                  [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
+                                  style="flex: 1"
+                                  formControlName="shapeAttributeName">
+          </tb-string-autocomplete>
         </div>
-      </div>
+        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center" style="width: 100%;">
+          <div class="tb-hint" style="padding: 0;" translate>widgets.liquid-level-card.shape-by-attribute</div>
+          <div class="see-example"
+               [tb-help-popup]="'widget/lib/indicator/shape_attribute_fn'"
+               tb-help-popup-placement="left"
+               trigger-style="font-size: 12px"
+               [tb-help-popup-style]="{maxWidth: '820px'}"
+               trigger-text="{{ 'widgets.liquid-level-card.see-examples' | translate }}">
+          </div>
+        </div>
+      </ng-container>
     </div>
     <tb-image-cards-select #layoutsImageCardsSelect rowHeight="{{ '1:1' }}"
                            [cols]="3"
                            [colsLtMd]="3"
                            label="{{ 'widgets.liquid-level-card.layout' | translate }}" formControlName="layout">
       <tb-image-cards-select-option
-        *ngFor="let layout of [levelCardLayouts.simple, levelCardLayouts.percentage, levelCardLayouts.absolute]"
+        *ngFor="let layout of LevelCardLayouts"
         [value]="layout"
         [image]="createShape(shapesImageMap.get(levelCardWidgetConfigForm.get('selectedShape').value), layout)">
-        {{ levelCardLayoutTranslationMap.get(layout) | translate }}
+        {{ LevelCardLayoutTranslationMap.get(layout) | translate }}
       </tb-image-cards-select-option>
     </tb-image-cards-select>
   </div>
@@ -134,29 +131,30 @@
         </tb-unit-input>
       </div>
     </div>
-    <div class="tb-form-row space-between" [fxShow]="widgetUnitsInput">
+    <div class="tb-form-row space-between" *ngIf="levelCardWidgetConfigForm.get('layout').value === LevelCardLayout.absolute">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.widget-units</div>
       <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
           <mat-select formControlName="widgetUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
-            <mat-option *ngFor="let option of [levelOptions.static, levelOptions.attribute]" [value]="option">
-              {{ option }}
+            <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
+              {{ DataSourceTypeTranslations.get(type) | translate }}
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <tb-unit-input [fxShow]="levelCardWidgetConfigForm.get('widgetUnitsSource').value !== levelOptions.attribute"
-                       class="flex"
+        <tb-unit-input *ngIf="levelCardWidgetConfigForm.get('widgetUnitsSource').value === DataSourceType.static; else selectUnitsAttributes"
+                       class="flex" required
                        [tagFilter]="unitsType.capacity"
                        [required]="isRequired('units')"
                        formControlName="units">
         </tb-unit-input>
-        <tb-string-autocomplete [fxShow]="levelCardWidgetConfigForm.get('widgetUnitsSource').value === levelOptions.attribute"
-                                [fetchOptionsFn]="fetchOptions.bind(this)"
-                                [required]="isRequired('widgetUnitsAttributeName')"
-                                [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
-                                style="flex: 1"
-                                formControlName="widgetUnitsAttributeName">
-        </tb-string-autocomplete>
+        <ng-template #selectUnitsAttributes>
+          <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
+                                  [required]="isRequired('widgetUnitsAttributeName')"
+                                  [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
+                                  style="flex: 1"
+                                  formControlName="widgetUnitsAttributeName">
+          </tb-string-autocomplete>
+        </ng-template>
       </div>
     </div>
     <div class="tb-form-row" [fxShow]="volumeInput">
@@ -164,12 +162,12 @@
       <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
           <mat-select formControlName="volumeSource" placeholder="{{ 'widget-config.set' | translate }}">
-            <mat-option *ngFor="let option of [levelOptions.static, levelOptions.attribute]" [value]="option">
-              {{ option }}
+            <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
+              {{ DataSourceTypeTranslations.get(type) | translate }}
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field [fxShow]="levelCardWidgetConfigForm.get('volumeSource').value === levelOptions.static"
+        <mat-form-field *ngIf="levelCardWidgetConfigForm.get('volumeSource').value === DataSourceType.static; else volumeAttributes"
                         appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput formControlName="volumeConstant" type="number"
                  min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -182,13 +180,14 @@
             warning
           </mat-icon>
         </mat-form-field>
-        <tb-string-autocomplete [fxShow]="levelCardWidgetConfigForm.get('volumeSource').value === levelOptions.attribute"
-                                [fetchOptionsFn]="fetchOptions.bind(this)"
-                                [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
-                                [required]="isRequired('volumeAttributeName')"
-                                style="flex: 1"
-                                formControlName="volumeAttributeName">
-        </tb-string-autocomplete>
+        <ng-template #volumeAttributes>
+          <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
+                                  [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
+                                  [required]="isRequired('volumeAttributeName')"
+                                  style="flex: 1"
+                                  formControlName="volumeAttributeName">
+          </tb-string-autocomplete>
+        </ng-template>
         <tb-unit-input [tagFilter]="unitsType.capacity"
                        [required]="isRequired('volumeUnits')"
                        style="max-width: 25%" class="flex"
@@ -210,7 +209,7 @@
       </tb-color-settings>
     </div>
     <div class="tb-form-row space-between"
-         *ngIf="levelCardWidgetConfigForm.get('layout').value !== this.levelCardLayouts.simple">
+         *ngIf="levelCardWidgetConfigForm.get('layout').value !== LevelCardLayout.simple">
       <div class="fixed-title-width" translate>widgets.liquid-level-card.value</div>
       <div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
         <mat-form-field style="max-width: 40%;" appearance="outline" class="flex number" subscriptSizing="dynamic">
@@ -225,14 +224,14 @@
         </tb-color-settings>
       </div>
     </div>
-    <div class="tb-form-row" [fxShow]="volumeInput">
+    <div class="tb-form-row" *ngIf="levelCardWidgetConfigForm.get('layout').value === LevelCardLayout.absolute">
       <div class="fixed-title-width" translate>widgets.liquid-level-card.total-volume</div>
       <div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
         <tb-font-settings formControlName="volumeFont"
                           [previewText]="totalVolumeValuePreviewFn">
         </tb-font-settings>
-        <tb-color-settings formControlName="volumeColor" settingsKey="{{'widgets.liquid-level-card.total-volume' | translate }}">
-        </tb-color-settings>
+        <tb-color-input asBoxInput colorClearButton formControlName="volumeColor">
+        </tb-color-input>
       </div>
     </div>
   </div>
@@ -303,8 +302,8 @@
     <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.background.background' | translate }}</div>
-      <tb-color-input asBoxInput colorClearButton formControlName="backgroundColor">
-      </tb-color-input>
+      <tb-background-settings formControlName="background">
+      </tb-background-settings>
     </div>
     <div class="tb-form-row space-between column-lt-md">
       <div translate>widget-config.show-card-buttons</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts
index 760e93374b..de11ad1067 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts
@@ -15,7 +15,7 @@
 ///
 
 import { ChangeDetectorRef, Component, Injector, ViewChild } from '@angular/core';
-import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
@@ -48,11 +48,13 @@ import {
   LevelCardLayout,
   levelCardLayoutTranslations,
   LevelCardWidgetSettings,
-  LevelSelectOptions,
+  LiquidWidgetDataSourceType,
+  LiquidWidgetDataSourceTypeTranslations,
   loadSvgShapesMapping,
   optionsFilter,
   Shapes,
-  shapesTranslations
+  ShapesTranslations,
+  updatedFormSettingsValidators
 } from '@home/components/widget/lib/indicator/liquid-level-widget.models';
 import { UnitsType } from '@shared/models/unit.models';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
@@ -73,7 +75,7 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
 
   @ViewChild('shapesImageCardsSelect', { static: false }) shapesImageCardsSelect: ImageCardsSelectComponent;
 
-  public get datasource(): Datasource {
+  private get datasource(): Datasource {
     if (this.widgetConfig.config.datasources && this.widgetConfig.config.datasources) {
       return this.widgetConfig.config.datasources[0];
     } else {
@@ -93,12 +95,6 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
     return !(datasourceUnits === CapacityUnits.percent && units === CapacityUnits.percent);
   }
 
-  public get widgetUnitsInput(): boolean {
-    const layout: LevelCardLayout = this.levelCardWidgetConfigForm.get('layout').value;
-
-    return layout === LevelCardLayout.absolute;
-  }
-
   public get displayTimewindowConfig(): boolean {
     const datasources = this.levelCardWidgetConfigForm.get('datasources').value;
     return datasourcesHasAggregation(datasources);
@@ -109,22 +105,21 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
     return datasourcesHasOnlyComparisonAggregation(datasources);
   }
 
-  levelCardLayouts = LevelCardLayout;
-
-  shapes: Shapes[] = [];
+  LevelCardLayout = LevelCardLayout;
+  LevelCardLayouts = Object.values(LevelCardLayout) as LevelCardLayout[];
+  LevelCardLayoutTranslationMap = levelCardLayoutTranslations;
 
-  levelOptions = LevelSelectOptions;
+  DataSourceType = LiquidWidgetDataSourceType;
+  DataSourceTypes = Object.values(LiquidWidgetDataSourceType) as LiquidWidgetDataSourceType[];
+  DataSourceTypeTranslations = LiquidWidgetDataSourceTypeTranslations;
 
-  shapeSelectOptions = LevelSelectOptions;
-
-  levelCardLayoutTranslationMap = levelCardLayoutTranslations;
-
-  shapesTranslationMap = shapesTranslations;
+  shapes = Object.values(Shapes) as Shapes[];
   shapesImageMap: Map<Shapes, string> = new Map();
+  ShapesTranslationMap = ShapesTranslations;
 
   unitsType = UnitsType;
 
-  levelCardWidgetConfigForm: UntypedFormGroup;
+  levelCardWidgetConfigForm: FormGroup;
 
   valuePreviewFn = this._valuePreviewFn.bind(this);
 
@@ -134,35 +129,30 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
 
   datePreviewFn = this._datePreviewFn.bind(this);
 
-  keySearchText: string;
-
-  latestKeySearchTextResult: Array<string>;
-
-  datasources: Array<Datasource>;
-
-  functionTypeKeys: Array<DataKey> = [];
+  private keySearchText: string;
+  private latestKeySearchTextResult: Array<string>;
 
-  lastKeysId: string;
+  private functionTypeKeys: Array<DataKey> = [];
 
-  lastFetchedKeys: Array<DataKey>;
+  private lastKeysId: string;
+  private lastFetchedKeys: Array<DataKey>;
 
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private cd: ChangeDetectorRef,
               private $injector: Injector,
-              private fb: UntypedFormBuilder,
+              private fb: FormBuilder,
               private resourcesService: ResourcesService,
               private sanitizer: DomSanitizer,
               private utils: UtilsService) {
     super(store, widgetConfigComponent);
   }
 
-  protected configForm(): UntypedFormGroup {
+  protected configForm(): FormGroup {
     return this.levelCardWidgetConfigForm;
   }
 
   protected setupConfig(widgetConfig: WidgetConfigComponentData) {
-    this.shapes = Object.values(Shapes);
     this.createSvgShapesMapping();
 
     for (const type of this.utils.getPredefinedFunctionsList()) {
@@ -179,29 +169,30 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
   }
 
   protected onConfigSet(configData: WidgetConfigComponentData) {
-    const settings: LevelCardWidgetSettings = {...configData.config, ...levelCardDefaultSettings(), ...(configData.config.settings || {})};
+    const settings: LevelCardWidgetSettings = {...levelCardDefaultSettings, ...(configData.config.settings || {})};
     const iconSize = resolveCssSize(configData.config.iconSize);
 
     this.levelCardWidgetConfigForm = this.fb.group({
       timewindowConfig: [getTimewindowConfig(configData.config), []],
       datasources: [configData.config.datasources, []],
 
+      layout: [settings.layout, []],
       tankSelectionType: [settings.tankSelectionType, []],
       selectedShape: [settings.selectedShape, [Validators.required]],
       shapeAttributeName: [settings.shapeAttributeName, [Validators.required]],
       tankColor: [settings.tankColor, []],
       datasourceUnits: [settings.datasourceUnits, [Validators.required]],
 
-      layout: [settings.layout, []],
       showTitle: [configData.config.showTitle, []],
-      title: [settings.title, []],
-      titleFont: [settings.titleFont, []],
-      titleColor: [settings.titleColor, []],
+      title: [configData.config.title, []],
+      titleFont: [configData.config.titleFont, []],
+      titleColor: [configData.config.titleColor, []],
       showTitleIcon: [configData.config.showTitleIcon, []],
       iconSize: [iconSize[0], [Validators.min(0)]],
       iconSizeUnit: [iconSize[1], []],
-      titleIcon: [settings.titleIcon, []],
-      iconColor: [settings.iconColor, []],
+      titleIcon: [configData.config.titleIcon, []],
+      iconColor: [configData.config.iconColor, []],
+
       volumeSource: [settings.volumeSource, []],
       volumeConstant: [settings.volumeConstant, [Validators.required]],
       volumeAttributeName: [settings.volumeAttributeName, [Validators.required]],
@@ -211,7 +202,7 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
       units: [settings.units, [Validators.required]],
       widgetUnitsSource: [settings.widgetUnitsSource, [Validators.required]],
       widgetUnitsAttributeName: [settings.widgetUnitsAttributeName, [Validators.required]],
-      decimals: [settings.decimals, []],
+      decimals: [configData.config.decimals, []],
       liquidColor: [settings.liquidColor, []],
       valueFont: [settings.valueFont, []],
       valueColor: [settings.valueColor, []],
@@ -229,7 +220,7 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
       tooltipBackgroundColor: [settings.tooltipBackgroundColor, []],
       tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []],
 
-      backgroundColor: [settings.backgroundColor, []],
+      background: [settings.background],
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
 
@@ -246,23 +237,28 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
     setTimewindowConfig(this.widgetConfig.config, config.timewindowConfig);
     this.widgetConfig.config.datasources = config.datasources;
 
-    this.widgetConfig.config.settings = this.widgetConfig.config.settings || {};
-
-    this.widgetConfig.config.settings.tankSelectionType = config.tankSelectionType;
-    this.widgetConfig.config.settings.selectedShape = config.selectedShape;
-    this.widgetConfig.config.settings.shapeAttributeName = config.shapeAttributeName;
-    this.widgetConfig.config.settings.tankColor = config.tankColor;
-    this.widgetConfig.config.settings.datasourceUnits = config.datasourceUnits;
-
-    this.widgetConfig.config.settings.layout = config.layout;
     this.widgetConfig.config.showTitle = config.showTitle;
     this.widgetConfig.config.title = config.title;
     this.widgetConfig.config.titleFont = config.titleFont;
     this.widgetConfig.config.titleColor = config.titleColor;
+
     this.widgetConfig.config.showTitleIcon = config.showTitleIcon;
     this.widgetConfig.config.iconSize = cssSizeToStrSize(config.iconSize, config.iconSizeUnit);
     this.widgetConfig.config.titleIcon = config.titleIcon;
     this.widgetConfig.config.iconColor = config.iconColor;
+
+    this.widgetConfig.config.decimals = config.decimals;
+
+    this.widgetConfig.config.settings = this.widgetConfig.config.settings || {};
+
+    this.widgetConfig.config.settings.layout = config.layout;
+
+    this.widgetConfig.config.settings.tankSelectionType = config.tankSelectionType;
+    this.widgetConfig.config.settings.selectedShape = config.selectedShape;
+    this.widgetConfig.config.settings.shapeAttributeName = config.shapeAttributeName;
+    this.widgetConfig.config.settings.tankColor = config.tankColor;
+    this.widgetConfig.config.settings.datasourceUnits = config.datasourceUnits;
+
     this.widgetConfig.config.settings.volumeSource = config.volumeSource;
     this.widgetConfig.config.settings.volumeConstant = config.volumeConstant;
     this.widgetConfig.config.settings.volumeAttributeName = config.volumeAttributeName;
@@ -272,7 +268,6 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
     this.widgetConfig.config.settings.units = config.units;
     this.widgetConfig.config.settings.widgetUnitsSource = config.widgetUnitsSource;
     this.widgetConfig.config.settings.widgetUnitsAttributeName = config.widgetUnitsAttributeName;
-    this.widgetConfig.config.decimals = config.decimals;
     this.widgetConfig.config.settings.liquidColor = config.liquidColor;
     this.widgetConfig.config.settings.valueFont = config.valueFont;
     this.widgetConfig.config.settings.valueColor = config.valueColor;
@@ -290,7 +285,7 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
     this.widgetConfig.config.settings.tooltipBackgroundColor = config.tooltipBackgroundColor;
     this.widgetConfig.config.settings.tooltipBackgroundBlur = config.tooltipBackgroundBlur;
 
-    this.widgetConfig.config.backgroundColor = config.backgroundColor;
+    this.widgetConfig.config.settings.background = config.background;
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
 
@@ -310,84 +305,16 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
   }
 
   protected updateValidators(emitEvent: boolean, trigger?: string) {
-    const emitEventFields = [];
+    updatedFormSettingsValidators(this.levelCardWidgetConfigForm);
 
-    const datasourceUnits: string = this.levelCardWidgetConfigForm.get('datasourceUnits').value;
-    const layout: LevelCardLayout = this.levelCardWidgetConfigForm.get('layout').value;
-    const showTitleIcon: AbstractControl<boolean> = this.levelCardWidgetConfigForm.get('showTitleIcon');
+    const showTitleIcon: boolean = this.levelCardWidgetConfigForm.get('showTitleIcon').value;
     const showTitle: boolean = this.levelCardWidgetConfigForm.get('showTitle').value;
-    const volumeSource: AbstractControl<LevelSelectOptions> = this.levelCardWidgetConfigForm.get('volumeSource');
-    const units: AbstractControl<string> = this.levelCardWidgetConfigForm.get('units');
-    const tooltipUnits: AbstractControl<string> = this.levelCardWidgetConfigForm.get('tooltipUnits');
-    const widgetUnitsSource: AbstractControl<LevelSelectOptions> = this.levelCardWidgetConfigForm.get('widgetUnitsSource');
-    const showTooltipLevel: AbstractControl<boolean> = this.levelCardWidgetConfigForm.get('showTooltipLevel');
-    const showTooltipDate: AbstractControl<boolean> = this.levelCardWidgetConfigForm.get('showTooltipDate');
-    const showTooltip: boolean = this.levelCardWidgetConfigForm.get('showTooltip').value;
-
-    if (trigger === 'tankSelectionType') {
-      const tankSelectionType: LevelSelectOptions = this.levelCardWidgetConfigForm.get('tankSelectionType').value;
-      if (tankSelectionType === LevelSelectOptions.static) {
-        this.levelCardWidgetConfigForm.get('selectedShape').enable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('shapeAttributeName').disable({emitEvent: false});
-      } else {
-        this.levelCardWidgetConfigForm.get('selectedShape').disable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('shapeAttributeName').enable({emitEvent: false});
-      }
-      emitEventFields.push('selectedShape', 'shapeAttributeName');
-    }
-
-    if (trigger === 'datasourceUnits' || trigger === 'layout' || trigger === 'units') {
-      if (
-        datasourceUnits === CapacityUnits.percent &&
-        layout !== LevelCardLayout.absolute &&
-        (!units?.value || units?.value === CapacityUnits.percent)
-      ) {
-        volumeSource.disable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('volumeConstant').disable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('volumeAttributeName').disable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('volumeUnits').disable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('volumeFont').disable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('volumeColor').disable({emitEvent: false});
-      } else {
-        volumeSource.enable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('volumeConstant').enable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('volumeAttributeName').enable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('volumeUnits').enable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('volumeFont').enable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('volumeColor').enable({emitEvent: false});
-      }
-      emitEventFields.push('volumeSource', 'volumeConstant', 'volumeAttributeName', 'volumeFont', 'volumeColor', 'volumeUnits');
-    } else if (trigger === 'volumeSource') {
-      if((datasourceUnits !== CapacityUnits.percent) ||
-        (layout === LevelCardLayout.absolute && units?.value !== CapacityUnits.percent)) {
-        if (volumeSource.value === LevelSelectOptions.static) {
-          this.levelCardWidgetConfigForm.get('volumeConstant').enable({emitEvent: false});
-          this.levelCardWidgetConfigForm.get('volumeAttributeName').disable({emitEvent: false});
-        } else {
-          this.levelCardWidgetConfigForm.get('volumeConstant').disable({emitEvent: false});
-          this.levelCardWidgetConfigForm.get('volumeAttributeName').enable({emitEvent: false});
-        }
-        emitEventFields.push('volumeConstant', 'volumeAttributeName');
-      }
-    }
-
-    if (trigger === 'showTitle' || !trigger) {
-      if (showTitle) {
-        this.levelCardWidgetConfigForm.get('title').enable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('titleFont').enable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('titleColor').enable({emitEvent: false});
-        showTitleIcon.enable({emitEvent: false});
-      } else {
-        this.levelCardWidgetConfigForm.get('title').disable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('titleFont').disable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('titleColor').disable({emitEvent: false});
-        showTitleIcon.disable({emitEvent: false});
-      }
-      emitEventFields.push('title', 'titleFont', 'titleColor', 'showTitleIcon');
-    }
-
-    if (trigger === 'showTitleIcon' || !trigger) {
-      if (showTitleIcon?.value && !showTitleIcon.disabled && showTitle) {
+    if (showTitle) {
+      this.levelCardWidgetConfigForm.get('title').enable({emitEvent: false});
+      this.levelCardWidgetConfigForm.get('titleFont').enable({emitEvent: false});
+      this.levelCardWidgetConfigForm.get('titleColor').enable({emitEvent: false});
+      this.levelCardWidgetConfigForm.get('showTitleIcon').enable({emitEvent: false});
+      if (showTitleIcon) {
         this.levelCardWidgetConfigForm.get('titleIcon').enable({emitEvent: false});
         this.levelCardWidgetConfigForm.get('iconColor').enable({emitEvent: false});
         this.levelCardWidgetConfigForm.get('iconSize').enable({emitEvent: false});
@@ -398,104 +325,15 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
         this.levelCardWidgetConfigForm.get('iconSize').disable({emitEvent: false});
         this.levelCardWidgetConfigForm.get('iconSizeUnit').disable({emitEvent: false});
       }
-      emitEventFields.push('titleIcon', 'iconColor', 'iconSize', 'iconSizeUnit');
-    }
-
-    if (trigger === 'showTooltip') {
-      if (showTooltip) {
-        showTooltipLevel.enable({emitEvent: false});
-        showTooltipDate.enable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('tooltipBackgroundColor').enable();
-        this.levelCardWidgetConfigForm.get('tooltipBackgroundBlur').enable();
-      } else {
-        showTooltipLevel.disable({emitEvent: false});
-        showTooltipDate.disable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('tooltipBackgroundColor').disable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('tooltipBackgroundBlur').disable({emitEvent: false});
-      }
-      emitEventFields.push('showTooltipLevel', 'showTooltipDate', 'tooltipBackgroundColor', 'tooltipBackgroundBlur');
-    }
-
-    if (trigger === 'showTooltipLevel') {
-      if (showTooltipLevel?.value && !showTooltipLevel.disabled) {
-        tooltipUnits.enable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('tooltipLevelDecimals').enable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('tooltipLevelFont').enable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('tooltipLevelColor').enable({emitEvent: false});
-      } else {
-        tooltipUnits.disable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('tooltipLevelDecimals').disable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('tooltipLevelFont').disable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('tooltipLevelColor').disable({emitEvent: false});
-      }
-      emitEventFields.push('tooltipUnits', 'tooltipLevelDecimals', 'tooltipLevelFont', 'tooltipLevelColor');
-    }
-
-    if (trigger === 'showTooltipDate') {
-      if (showTooltipDate?.value && !showTooltipDate.disabled) {
-        this.levelCardWidgetConfigForm.get('tooltipDateFormat').enable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('tooltipDateFont').enable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('tooltipDateColor').enable({emitEvent: false});
-      } else {
-        this.levelCardWidgetConfigForm.get('tooltipDateFormat').disable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('tooltipDateFont').disable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('tooltipDateColor').disable({emitEvent: false});
-      }
-      emitEventFields.push('tooltipDateFormat', 'tooltipDateFont', 'tooltipDateColor');
-    }
-
-    if (trigger === 'layout' || trigger === 'datasourceUnits') {
-      if (layout === LevelCardLayout.simple) {
-        units.disable({emitEvent: false});
-        tooltipUnits.disable({emitEvent: false});
-        widgetUnitsSource.setValue(LevelSelectOptions.static, {emitEvent: false});
-        widgetUnitsSource.disable({emitEvent: false});
-
-        this.levelCardWidgetConfigForm.get('decimals').disable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('valueFont').disable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('valueColor').disable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('widgetUnitsAttributeName').disable({emitEvent: false});
-      } else if (layout === LevelCardLayout.percentage) {
-        if (units.value !== CapacityUnits.percent) {
-          units.setValue(CapacityUnits.percent, {emitEvent: false});
-        }
-        widgetUnitsSource.setValue(LevelSelectOptions.static, {emitEvent: false});
-        units.disable({emitEvent: false});
-        widgetUnitsSource.disable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('widgetUnitsAttributeName').disable({emitEvent: false});
-
-        if (tooltipUnits.value !== CapacityUnits.percent) {
-          tooltipUnits.setValue(CapacityUnits.percent, {emitEvent: false});
-        }
-        tooltipUnits.disable({emitEvent: false});
-      } else {
-        units.enable({emitEvent: false});
-        tooltipUnits.enable({emitEvent: false});
-        widgetUnitsSource.enable({emitEvent: false});
-
-        this.levelCardWidgetConfigForm.get('decimals').enable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('valueFont').enable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('valueColor').enable({emitEvent: false});
-        this.levelCardWidgetConfigForm.get('widgetUnitsAttributeName').enable({emitEvent: false});
-      }
-      emitEventFields.push('units', 'tooltipUnits', 'decimals', 'valueFont', 'valueColor', 'widgetUnitsSource', 'widgetUnitsAttributeName');
-    } else if (trigger === 'widgetUnitsSource') {
-      if (layout !== LevelCardLayout.percentage) {
-        if (widgetUnitsSource.value === LevelSelectOptions.static) {
-          units.enable({emitEvent: false});
-          this.levelCardWidgetConfigForm.get('widgetUnitsAttributeName').disable({emitEvent: false});
-        } else {
-          units.disable({emitEvent: false});
-          this.levelCardWidgetConfigForm.get('widgetUnitsAttributeName').enable({emitEvent: false});
-        }
-        emitEventFields.push('units', 'widgetUnitsAttributeName');
-      }
-    }
-
-    for (const controlKey in this.levelCardWidgetConfigForm.controls) {
-      if (emitEventFields.includes(controlKey)) {
-        this.levelCardWidgetConfigForm.controls[controlKey].updateValueAndValidity({emitEvent});
-      }
+    } else {
+      this.levelCardWidgetConfigForm.get('title').disable({emitEvent: false});
+      this.levelCardWidgetConfigForm.get('titleFont').disable({emitEvent: false});
+      this.levelCardWidgetConfigForm.get('titleColor').disable({emitEvent: false});
+      this.levelCardWidgetConfigForm.get('showTitleIcon').disable({emitEvent: false});
+      this.levelCardWidgetConfigForm.get('titleIcon').disable({emitEvent: false});
+      this.levelCardWidgetConfigForm.get('iconColor').disable({emitEvent: false});
+      this.levelCardWidgetConfigForm.get('iconSize').disable({emitEvent: false});
+      this.levelCardWidgetConfigForm.get('iconSizeUnit').disable({emitEvent: false});
     }
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts
index 876e2eeb59..c97bca3f9d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts
@@ -27,7 +27,7 @@ import {
   levelCardDefaultSettings,
   LevelCardLayout,
   LevelCardWidgetSettings,
-  LevelSelectOptions,
+  LiquidWidgetDataSourceType,
   Shapes,
   SvgInfo,
   SvgLimits,
@@ -66,7 +66,6 @@ export class LiquidLevelWidgetComponent implements OnInit {
   private settings: LevelCardWidgetSettings;
 
   private tankColor: ColorProcessor;
-  private volumeColor: ColorProcessor;
   private valueColor: ColorProcessor;
   private liquidColor: ColorProcessor;
   private backgroundOverlayColor: ColorProcessor;
@@ -83,7 +82,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
 
   ngOnInit(): void {
     this.ctx.$scope.liquidLevelWidget = this;
-    this.settings = {...levelCardDefaultSettings(), ...this.ctx.widgetConfig, ...this.ctx.settings};
+    this.settings = {...levelCardDefaultSettings, ...this.ctx.settings};
     this.declareStyles();
 
     this.getData().subscribe(data => {
@@ -117,7 +116,6 @@ export class LiquidLevelWidgetComponent implements OnInit {
 
   private declareStyles(): void {
     this.tankColor = ColorProcessor.fromSettings(this.settings.tankColor);
-    this.volumeColor = ColorProcessor.fromSettings(this.settings.volumeColor);
     this.valueColor = ColorProcessor.fromSettings(this.settings.valueColor);
     this.liquidColor =  ColorProcessor.fromSettings(this.settings.liquidColor);
     this.backgroundOverlayColor = ColorProcessor.fromSettings(this.settings.backgroundOverlayColor);
@@ -264,7 +262,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
   }
 
   private getShape(entityId: EntityId): Observable<Shapes> {
-    if (this.settings.tankSelectionType === LevelSelectOptions.attribute && entityId.id !== NULL_UUID) {
+    if (this.settings.tankSelectionType === LiquidWidgetDataSourceType.attribute && entityId.id !== NULL_UUID) {
       return this.ctx.attributeService.getEntityAttributes(entityId, null,
         [this.settings.shapeAttributeName]).pipe(
         map(attributes =>
@@ -296,10 +294,10 @@ export class LiquidLevelWidgetComponent implements OnInit {
 
   private prepareAttributeNames(): string[] {
     const names = [];
-    if (this.settings.volumeSource !== LevelSelectOptions.static) {
+    if (this.settings.volumeSource !== LiquidWidgetDataSourceType.static) {
       names.push(this.settings.volumeAttributeName);
     }
-    if (this.settings.widgetUnitsSource !== LevelSelectOptions.static) {
+    if (this.settings.widgetUnitsSource !== LiquidWidgetDataSourceType.static) {
       names.push(this.settings.widgetUnitsAttributeName);
     }
     return names;
@@ -398,10 +396,9 @@ export class LiquidLevelWidgetComponent implements OnInit {
       const volumeInLiters: number = convertLiters(this.volume, this.settings.volumeUnits as CapacityUnits, ConversionType.to);
       const volume = convertLiters(volumeInLiters, this.widgetUnits as CapacityUnits, ConversionType.from)
         .toFixed(this.settings.decimals || 0);
-      this.volumeColor.update(volume);
 
       const volumeTextStyle = cssTextFromInlineStyle({...inlineTextStyle(this.settings.volumeFont),
-                                                             color: this.volumeColor.color});
+                                                             color: this.settings.volumeColor});
 
       container = jQueryContainerElement.find('.absolute-value-container');
       content = createAbsoluteLayout({inputValue: value, volume},
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts
index efbff1f24d..b722852fd6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts
@@ -15,6 +15,8 @@
 ///
 
 import {
+  BackgroundSettings,
+  BackgroundType,
   ColorSettings,
   constantColor,
   cssTextFromInlineStyle,
@@ -32,6 +34,7 @@ import { EntityService } from '@core/http/entity.service';
 import { IAliasController } from '@core/api/widget-api.models';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { ResourcesService } from '@core/services/resources.service';
+import { FormGroup } from '@angular/forms';
 
 export interface SvgInfo {
   svg: string;
@@ -44,21 +47,21 @@ export interface SvgLimits {
 }
 
 export interface LevelCardWidgetSettings extends WidgetConfig {
-  tankSelectionType: LevelSelectOptions;
+  tankSelectionType: LiquidWidgetDataSourceType;
   selectedShape: Shapes;
   shapeAttributeName: string;
   tankColor: ColorSettings;
   datasourceUnits: CapacityUnits;
   layout: LevelCardLayout;
-  volumeSource: LevelSelectOptions;
+  volumeSource: LiquidWidgetDataSourceType;
   volumeConstant: number;
   volumeAttributeName: string;
   volumeUnits: CapacityUnits;
   volumeFont: Font;
-  volumeColor: ColorSettings;
+  volumeColor: string;
   liquidColor: ColorSettings;
   valueFont: Font;
-  widgetUnitsSource: LevelSelectOptions;
+  widgetUnitsSource: LiquidWidgetDataSourceType;
   widgetUnitsAttributeName: string;
   valueColor: ColorSettings;
   showBackgroundOverlay: boolean;
@@ -75,6 +78,7 @@ export interface LevelCardWidgetSettings extends WidgetConfig {
   tooltipDateColor: string;
   tooltipBackgroundColor: string;
   tooltipBackgroundBlur: number;
+  background: BackgroundSettings;
 }
 
 export enum Shapes {
@@ -115,9 +119,9 @@ export enum LevelCardLayout {
   absolute = 'absolute'
 }
 
-export enum LevelSelectOptions {
-  attribute = 'Attribute',
-  static = 'Static'
+export enum LiquidWidgetDataSourceType {
+  static = 'static',
+  attribute = 'attribute'
 }
 
 export enum ConversionType {
@@ -208,7 +212,14 @@ export const levelCardLayoutTranslations = new Map<LevelCardLayout, string>(
   ]
 );
 
-export const shapesTranslations = new Map<Shapes, string>(
+export const LiquidWidgetDataSourceTypeTranslations = new Map<LiquidWidgetDataSourceType, string>(
+  [
+    [LiquidWidgetDataSourceType.static, 'widgets.liquid-level-card.static'],
+    [LiquidWidgetDataSourceType.attribute, 'widgets.liquid-level-card.attribute']
+  ]
+);
+
+export const ShapesTranslations = new Map<Shapes, string>(
   [
     [Shapes.vOval, 'widgets.liquid-level-card.v-oval'],
     [Shapes.vCylinder, 'widgets.liquid-level-card.v-cylinder'],
@@ -223,8 +234,8 @@ export const shapesTranslations = new Map<Shapes, string>(
   ]
 );
 
-export const levelCardDefaultSettings = (): LevelCardWidgetSettings => ({
-  tankSelectionType: LevelSelectOptions.static,
+export const levelCardDefaultSettings: LevelCardWidgetSettings = {
+  tankSelectionType: LiquidWidgetDataSourceType.static,
   selectedShape: Shapes.vCylinder,
   shapeAttributeName: 'tankShape',
   tankColor: constantColor('#242770'),
@@ -244,7 +255,7 @@ export const levelCardDefaultSettings = (): LevelCardWidgetSettings => ({
   showTitleIcon: false,
   titleIcon: 'water_drop',
   iconColor: '#5469FF',
-  volumeSource: LevelSelectOptions.static,
+  volumeSource: LiquidWidgetDataSourceType.static,
   volumeConstant: 500,
   volumeUnits: CapacityUnits.liters,
   volumeAttributeName: 'volume',
@@ -256,9 +267,9 @@ export const levelCardDefaultSettings = (): LevelCardWidgetSettings => ({
     weight: '500',
     lineHeight: '100%'
   },
-  volumeColor: constantColor('rgba(0, 0, 0, 0.18)'),
+  volumeColor: 'rgba(0, 0, 0, 0.18)',
   units: CapacityUnits.percent as string,
-  widgetUnitsSource: LevelSelectOptions.static,
+  widgetUnitsSource: LiquidWidgetDataSourceType.static,
   widgetUnitsAttributeName: 'units',
   decimals: 0,
   liquidColor: constantColor('#7A8BFF'),
@@ -298,8 +309,17 @@ export const levelCardDefaultSettings = (): LevelCardWidgetSettings => ({
   },
   tooltipDateColor: 'rgba(0, 0, 0, 0.76)',
   tooltipBackgroundColor: 'rgba(255, 255, 255, 0.76)',
-  tooltipBackgroundBlur: 3
-});
+  tooltipBackgroundBlur: 3,
+  background: {
+    type: BackgroundType.color,
+    color: '#fff',
+    overlay: {
+      enabled: false,
+      color: 'rgba(255,255,255,0.72)',
+      blur: 3
+    }
+  }
+};
 
 export const convertLiters = (value: number, units: CapacityUnits, conversionType: ConversionType): number => {
   let factor: number;
@@ -470,3 +490,143 @@ export const loadSvgShapesMapping = (resourcesService: ResourcesService): Observ
     })
   );
 };
+
+export const updatedFormSettingsValidators = (formGroup: FormGroup) => {
+  const datasourceUnits: string = formGroup.get('datasourceUnits').value;
+  const layout: LevelCardLayout = formGroup.get('layout').value;
+  const volumeSource: LiquidWidgetDataSourceType = formGroup.get('volumeSource').value;
+  const widgetUnitsSource: LiquidWidgetDataSourceType = formGroup.get('widgetUnitsSource').value;
+  const showTooltipLevel: boolean = formGroup.get('showTooltipLevel').value;
+  const showTooltipDate: boolean = formGroup.get('showTooltipDate').value;
+  const showTooltip: boolean = formGroup.get('showTooltip').value;
+  const tankSelectionType: LiquidWidgetDataSourceType = formGroup.get('tankSelectionType').value;
+
+  if (tankSelectionType === LiquidWidgetDataSourceType.static) {
+    formGroup.get('selectedShape').enable({emitEvent: false});
+    formGroup.get('shapeAttributeName').disable({emitEvent: false});
+  } else {
+    formGroup.get('selectedShape').disable({emitEvent: false});
+    formGroup.get('shapeAttributeName').enable({emitEvent: false});
+  }
+
+  switch (layout) {
+    case LevelCardLayout.simple:
+    case LevelCardLayout.percentage:
+      formGroup.get('widgetUnitsSource').disable({emitEvent: false});
+      formGroup.get('units').disable({emitEvent: false});
+      formGroup.get('widgetUnitsAttributeName').disable({emitEvent: false});
+
+      if (datasourceUnits !== CapacityUnits.percent) {
+        formGroup.get('volumeSource').enable({emitEvent: false});
+        formGroup.get('volumeUnits').enable({emitEvent: false});
+        if (volumeSource === LiquidWidgetDataSourceType.static) {
+          formGroup.get('volumeConstant').enable({emitEvent: false});
+          formGroup.get('volumeAttributeName').disable({emitEvent: false});
+        } else {
+          formGroup.get('volumeConstant').disable({emitEvent: false});
+          formGroup.get('volumeAttributeName').enable({emitEvent: false});
+        }
+      } else {
+        formGroup.get('volumeSource').disable({emitEvent: false});
+        formGroup.get('volumeConstant').disable({emitEvent: false});
+        formGroup.get('volumeAttributeName').disable({emitEvent: false});
+        formGroup.get('volumeUnits').disable({emitEvent: false});
+      }
+
+      if (layout === LevelCardLayout.simple) {
+        if (formGroup.get('decimals')) {
+          formGroup.get('decimals').disable({emitEvent: false});
+        }
+        formGroup.get('valueFont').disable({emitEvent: false});
+        formGroup.get('valueColor').disable({emitEvent: false});
+      } else {
+        if (formGroup.get('decimals')) {
+          formGroup.get('decimals').enable({emitEvent: false});
+        }
+        formGroup.get('valueFont').enable({emitEvent: false});
+        formGroup.get('valueColor').enable({emitEvent: false});
+      }
+
+      formGroup.get('volumeFont').disable({emitEvent: false});
+      formGroup.get('volumeColor').disable({emitEvent: false});
+
+      break;
+    case LevelCardLayout.absolute:
+      formGroup.get('widgetUnitsSource').enable({emitEvent: false});
+      if (widgetUnitsSource === LiquidWidgetDataSourceType.static) {
+        formGroup.get('units').enable({emitEvent: false});
+        formGroup.get('widgetUnitsAttributeName').disable({emitEvent: false});
+      } else {
+        formGroup.get('units').disable({emitEvent: false});
+        formGroup.get('widgetUnitsAttributeName').enable({emitEvent: false});
+      }
+
+      formGroup.get('volumeSource').enable({emitEvent: false});
+      formGroup.get('volumeUnits').enable({emitEvent: false});
+      if (volumeSource === LiquidWidgetDataSourceType.static) {
+        formGroup.get('volumeConstant').enable({emitEvent: false});
+        formGroup.get('volumeAttributeName').disable({emitEvent: false});
+      } else {
+        formGroup.get('volumeConstant').disable({emitEvent: false});
+        formGroup.get('volumeAttributeName').enable({emitEvent: false});
+      }
+
+      if (formGroup.get('decimals')) {
+        formGroup.get('decimals').enable({emitEvent: false});
+      }
+      formGroup.get('valueFont').enable({emitEvent: false});
+      formGroup.get('valueColor').enable({emitEvent: false});
+
+      formGroup.get('volumeFont').enable({emitEvent: false});
+      formGroup.get('volumeColor').enable({emitEvent: false});
+
+      break;
+  }
+
+  if (showTooltip) {
+    formGroup.get('showTooltipLevel').enable({emitEvent: false});
+    formGroup.get('showTooltipDate').enable({emitEvent: false});
+    formGroup.get('tooltipBackgroundColor').enable({emitEvent: false});
+    formGroup.get('tooltipBackgroundBlur').enable({emitEvent: false});
+
+    if (showTooltipLevel) {
+      formGroup.get('tooltipLevelDecimals').enable({emitEvent: false});
+      formGroup.get('tooltipLevelFont').enable({emitEvent: false});
+      formGroup.get('tooltipLevelColor').enable({emitEvent: false});
+      if (layout === LevelCardLayout.simple) {
+        formGroup.get('tooltipUnits').disable({emitEvent: false});
+      } else {
+        formGroup.get('tooltipUnits').enable({emitEvent: false});
+      }
+    } else {
+      formGroup.get('tooltipUnits').disable({emitEvent: false});
+      formGroup.get('tooltipLevelDecimals').disable({emitEvent: false});
+      formGroup.get('tooltipLevelFont').disable({emitEvent: false});
+      formGroup.get('tooltipLevelColor').disable({emitEvent: false});
+    }
+
+    if (showTooltipDate) {
+      formGroup.get('tooltipDateFormat').enable({emitEvent: false});
+      formGroup.get('tooltipDateFont').enable({emitEvent: false});
+      formGroup.get('tooltipDateColor').enable({emitEvent: false});
+    } else {
+      formGroup.get('tooltipDateFormat').disable({emitEvent: false});
+      formGroup.get('tooltipDateFont').disable({emitEvent: false});
+      formGroup.get('tooltipDateColor').disable({emitEvent: false});
+    }
+  } else {
+    formGroup.get('showTooltipLevel').disable({emitEvent: false});
+    formGroup.get('showTooltipDate').disable({emitEvent: false});
+    formGroup.get('tooltipBackgroundColor').disable({emitEvent: false});
+    formGroup.get('tooltipBackgroundBlur').disable({emitEvent: false});
+
+    formGroup.get('tooltipUnits').disable({emitEvent: false});
+    formGroup.get('tooltipLevelDecimals').disable({emitEvent: false});
+    formGroup.get('tooltipLevelFont').disable({emitEvent: false});
+    formGroup.get('tooltipLevelColor').disable({emitEvent: false});
+
+    formGroup.get('tooltipDateFormat').disable({emitEvent: false});
+    formGroup.get('tooltipDateFont').disable({emitEvent: false});
+    formGroup.get('tooltipDateColor').disable({emitEvent: false});
+  }
+};
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
index a03fea0dc0..cdf96f7f89 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
@@ -22,16 +22,13 @@
         <div fxFlex fxLayout="row" style="width: 100%;" fxLayoutAlign="space-between center">
           <div class="fixed-title-width"  translate>widgets.liquid-level-card.shape</div>
           <tb-toggle-select formControlName="tankSelectionType">
-            <tb-toggle-option [value]="shapeSelectOptions.static">
-              {{ 'widgets.liquid-level-card.static' | translate }}
-            </tb-toggle-option>
-            <tb-toggle-option [value]="shapeSelectOptions.attribute">
-              {{ 'widgets.liquid-level-card.attribute' | translate }}
+            <tb-toggle-option *ngFor="let type of DataSourceTypes" [value]="type">
+              {{ DataSourceTypeTranslations.get(type) | translate }}
             </tb-toggle-option>
           </tb-toggle-select>
         </div>
         <tb-image-cards-select #shapesImageCardsSelect
-                               [fxShow]="levelCardWidgetSettingsForm.get('tankSelectionType').value === shapeSelectOptions.static"
+                               [fxShow]="levelCardWidgetSettingsForm.get('tankSelectionType').value === DataSourceType.static"
                                rowHeight="{{ '1:1' }}"
                                [cols]="5"
                                [colsLtMd]="2"
@@ -39,31 +36,31 @@
                                label="{{ 'widgets.liquid-level-card.shape-type' | translate }}" formControlName="selectedShape">
           <tb-image-cards-select-option *ngFor="let shape of shapes"
                                         [value]="shape"
-                                        [image]="createShape(shapesImageMap.get(shape), this.levelCardLayouts.simple)">
-            {{ shapesTranslationMap.get(shape) | translate }}
+                                        [image]="createShape(shapesImageMap.get(shape), LevelCardLayout.simple)">
+            {{ ShapesTranslationMap.get(shape) | translate }}
           </tb-image-cards-select-option>
         </tb-image-cards-select>
-        <div class="tb-form-row space-between" style="width: 100%;"
-             *ngIf="levelCardWidgetSettingsForm.get('tankSelectionType').value === shapeSelectOptions.attribute">
-          <div class="fixed-title-width" translate>widgets.liquid-level-card.shape-attribute-name</div>
-          <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
-                                  [required]="isRequired('shapeAttributeName')"
-                                  [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
-                                  style="flex: 1"
-                                  formControlName="shapeAttributeName">
-          </tb-string-autocomplete>
-        </div>
-        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center" style="width: 100%;"
-             *ngIf="levelCardWidgetSettingsForm.get('tankSelectionType').value === shapeSelectOptions.attribute">
-          <div class="tb-hint" style="padding: 0;" translate>widgets.liquid-level-card.shape-by-attribute</div>
-          <div class="see-example"
-               [tb-help-popup]="'widget/lib/indicator/shape_attribute_fn'"
-               tb-help-popup-placement="left"
-               trigger-style="font-size: 12px"
-               [tb-help-popup-style]="{maxWidth: '820px'}"
-               trigger-text="{{ 'widgets.liquid-level-card.see-examples' | translate }}">
+        <ng-container *ngIf="levelCardWidgetSettingsForm.get('tankSelectionType').value === DataSourceType.attribute">
+          <div class="tb-form-row space-between" style="width: 100%;">
+            <div class="fixed-title-width" translate>widgets.liquid-level-card.shape-attribute-name</div>
+            <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
+                                    [required]="isRequired('shapeAttributeName')"
+                                    [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
+                                    style="flex: 1"
+                                    formControlName="shapeAttributeName">
+            </tb-string-autocomplete>
           </div>
-        </div>
+          <div fxFlex fxLayout="row" fxLayoutAlign="space-between center" style="width: 100%;">
+            <div class="tb-hint" style="padding: 0;" translate>widgets.liquid-level-card.shape-by-attribute</div>
+            <div class="see-example"
+                 [tb-help-popup]="'widget/lib/indicator/shape_attribute_fn'"
+                 tb-help-popup-placement="left"
+                 trigger-style="font-size: 12px"
+                 [tb-help-popup-style]="{maxWidth: '820px'}"
+                 trigger-text="{{ 'widgets.liquid-level-card.see-examples' | translate }}">
+            </div>
+          </div>
+        </ng-container>
       </div>
     </div>
     <div class="tb-form-panel">
@@ -74,10 +71,10 @@
                              [colsLtMd]="3"
                              label="{{ 'widgets.liquid-level-card.layout' | translate }}" formControlName="layout">
         <tb-image-cards-select-option
-          *ngFor="let layout of [levelCardLayouts.simple, levelCardLayouts.percentage, levelCardLayouts.absolute]"
+          *ngFor="let layout of LevelCardLayouts"
           [value]="layout"
           [image]="createShape(shapesImageMap.get(levelCardWidgetSettingsForm.get('selectedShape').value), layout)">
-          {{ levelCardLayoutTranslationMap.get(layout) | translate }}
+          {{ LevelCardLayoutTranslationMap.get(layout) | translate }}
         </tb-image-cards-select-option>
       </tb-image-cards-select>
     </div>
@@ -91,42 +88,43 @@
                        formControlName="datasourceUnits">
         </tb-unit-input>
       </div>
-      <div class="tb-form-row space-between" [fxShow]="widgetUnitsInput">
+      <div class="tb-form-row space-between" *ngIf="levelCardWidgetSettingsForm.get('layout').value === LevelCardLayout.absolute">
         <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.widget-units</div>
         <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
           <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
             <mat-select formControlName="widgetUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
-              <mat-option *ngFor="let option of [volumeOptions.static, volumeOptions.attribute]" [value]="option">
-                {{ option }}
+              <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
+                {{ DataSourceTypeTranslations.get(type) | translate }}
               </mat-option>
             </mat-select>
           </mat-form-field>
-          <tb-unit-input *ngIf="levelCardWidgetSettingsForm.get('widgetUnitsSource').value !== volumeOptions.attribute"
+          <tb-unit-input *ngIf="levelCardWidgetSettingsForm.get('widgetUnitsSource').value !== DataSourceType.attribute; else selectUnitsAttributes"
                          class="flex"
                          [tagFilter]="unitsType.capacity"
                          [required]="isRequired('units')"
                          formControlName="units">
           </tb-unit-input>
-          <tb-string-autocomplete *ngIf="levelCardWidgetSettingsForm.get('widgetUnitsSource').value === volumeOptions.attribute"
-                                  [fetchOptionsFn]="fetchOptions.bind(this)"
-                                  [required]="isRequired('widgetUnitsAttributeName')"
-                                  [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
-                                  style="flex: 1"
-                                  formControlName="widgetUnitsAttributeName">
-          </tb-string-autocomplete>
+          <ng-template #selectUnitsAttributes>
+            <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
+                                    [required]="isRequired('widgetUnitsAttributeName')"
+                                    [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
+                                    style="flex: 1"
+                                    formControlName="widgetUnitsAttributeName">
+            </tb-string-autocomplete>
+          </ng-template>
         </div>
       </div>
-      <div class="tb-form-row" [fxShow]="volumeInput">
+      <div class="tb-form-row" *ngIf="volumeInput">
         <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume</div>
         <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
           <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
             <mat-select formControlName="volumeSource" placeholder="{{ 'widget-config.set' | translate }}">
-              <mat-option *ngFor="let option of [volumeOptions.static, volumeOptions.attribute]" [value]="option">
-                {{ option }}
+              <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
+                {{ DataSourceTypeTranslations.get(type) | translate }}
               </mat-option>
             </mat-select>
           </mat-form-field>
-          <mat-form-field *ngIf="levelCardWidgetSettingsForm.get('volumeSource').value === volumeOptions.static"
+          <mat-form-field *ngIf="levelCardWidgetSettingsForm.get('volumeSource').value ===  DataSourceType.static; else volumeAttributes"
                           appearance="outline" class="flex number" subscriptSizing="dynamic">
             <input matInput formControlName="volumeConstant" type="number"
                    min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -139,13 +137,14 @@
               warning
             </mat-icon>
           </mat-form-field>
-          <tb-string-autocomplete *ngIf="levelCardWidgetSettingsForm.get('volumeSource').value === volumeOptions.attribute"
-                                  [fetchOptionsFn]="fetchOptions.bind(this)"
-                                  [required]="isRequired('volumeAttributeName')"
-                                  [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
-                                  style="flex: 1"
-                                  formControlName="volumeAttributeName">
-          </tb-string-autocomplete>
+          <ng-template #volumeAttributes>
+            <tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)"
+                                    [required]="isRequired('volumeAttributeName')"
+                                    [errorText]="'widgets.liquid-level-card.attribute-name-required' | translate"
+                                    style="flex: 1"
+                                    formControlName="volumeAttributeName">
+            </tb-string-autocomplete>
+          </ng-template>
           <tb-unit-input [tagFilter]="unitsType.capacity"
                          [required]="isRequired('volumeUnits')"
                          style="max-width: 25%" class="flex"
@@ -166,8 +165,13 @@
         <tb-color-settings formControlName="liquidColor" settingsKey="{{'widgets.liquid-level-card.liquid-color' | translate }}">
         </tb-color-settings>
       </div>
+      <div class="tb-form-row space-between">
+        <div>{{ 'widgets.background.background' | translate }}</div>
+        <tb-background-settings formControlName="background">
+        </tb-background-settings>
+      </div>
       <div class="tb-form-row space-between"
-           *ngIf="levelCardWidgetSettingsForm.get('layout').value !== this.levelCardLayouts.simple">
+           *ngIf="levelCardWidgetSettingsForm.get('layout').value !== LevelCardLayout.simple">
         <div class="fixed-title-width" translate>widgets.liquid-level-card.value</div>
         <div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
           <tb-font-settings formControlName="valueFont"
@@ -177,17 +181,18 @@
           </tb-color-settings>
         </div>
       </div>
-      <div class="tb-form-row" [fxShow]="volumeInput">
+      <div class="tb-form-row" *ngIf="levelCardWidgetSettingsForm.get('layout').value === LevelCardLayout.absolute">
         <div class="fixed-title-width" translate>widgets.liquid-level-card.total-volume</div>
         <div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
           <tb-font-settings formControlName="volumeFont"
                             [previewText]="totalVolumeValuePreviewFn">
           </tb-font-settings>
-          <tb-color-settings formControlName="volumeColor" settingsKey="{{'widgets.liquid-level-card.total-volume' | translate }}">
-          </tb-color-settings>
+          <tb-color-input asBoxInput colorClearButton formControlName="volumeColor">
+          </tb-color-input>
         </div>
       </div>
-      <div class="tb-form-row space-between">
+      <div class="tb-form-row space-between"
+           *ngIf="levelCardWidgetSettingsForm.get('layout').value !== LevelCardLayout.simple">
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBackgroundOverlay">
           {{ 'widgets.liquid-level-card.background-overlay' | translate }}
         </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.ts
index 23088aac81..ab7acb2c7b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.ts
@@ -22,7 +22,7 @@ import {
   WidgetSettings,
   WidgetSettingsComponent
 } from '@shared/models/widget.models';
-import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { formatValue, isDefined } from '@core/utils';
@@ -36,11 +36,13 @@ import {
   levelCardDefaultSettings,
   LevelCardLayout,
   levelCardLayoutTranslations,
-  LevelSelectOptions,
+  LiquidWidgetDataSourceType,
+  LiquidWidgetDataSourceTypeTranslations,
   loadSvgShapesMapping,
   optionsFilter,
   Shapes,
-  shapesTranslations
+  ShapesTranslations,
+  updatedFormSettingsValidators
 } from '@home/components/widget/lib/indicator/liquid-level-widget.models';
 import { UnitsType } from '@shared/models/unit.models';
 import { ImageCardsSelectComponent } from '@home/components/widget/lib/settings/common/image-cards-select.component';
@@ -75,13 +77,7 @@ export class LiquidLevelCardWidgetSettingsComponent extends WidgetSettingsCompon
     return !(datasourceUnits === CapacityUnits.percent && widgetUnits === CapacityUnits.percent);
   }
 
-  public get widgetUnitsInput(): boolean {
-    const layout: LevelCardLayout = this.levelCardWidgetSettingsForm.get('layout').value;
-
-    return layout === LevelCardLayout.absolute;
-  }
-
-  public get datasource(): Datasource {
+  private get datasource(): Datasource {
     if (this.widgetConfig.config.datasources && this.widgetConfig.config.datasources) {
       return this.widgetConfig.config.datasources[0];
     } else {
@@ -89,22 +85,21 @@ export class LiquidLevelCardWidgetSettingsComponent extends WidgetSettingsCompon
     }
   }
 
-  shapeSelectOptions = LevelSelectOptions;
-
-  shapes: Shapes[] = [];
-
-  shapesTranslationMap = shapesTranslations;
-
-  unitsType = UnitsType;
+  LevelCardLayout = LevelCardLayout;
+  LevelCardLayouts = Object.values(LevelCardLayout) as LevelCardLayout[];
+  LevelCardLayoutTranslationMap = levelCardLayoutTranslations;
 
-  levelCardLayouts = LevelCardLayout;
+  DataSourceType = LiquidWidgetDataSourceType;
+  DataSourceTypes = Object.values(LiquidWidgetDataSourceType) as LiquidWidgetDataSourceType[];
+  DataSourceTypeTranslations = LiquidWidgetDataSourceTypeTranslations;
 
-  levelCardLayoutTranslationMap = levelCardLayoutTranslations;
+  shapes = Object.values(Shapes) as Shapes[];
   shapesImageMap: Map<Shapes, string> = new Map();
+  ShapesTranslationMap = ShapesTranslations;
 
-  volumeOptions = LevelSelectOptions;
+  unitsType = UnitsType;
 
-  levelCardWidgetSettingsForm: UntypedFormGroup;
+  levelCardWidgetSettingsForm: FormGroup;
 
   valuePreviewFn = this._valuePreviewFn.bind(this);
 
@@ -114,21 +109,17 @@ export class LiquidLevelCardWidgetSettingsComponent extends WidgetSettingsCompon
 
   datePreviewFn = this._datePreviewFn.bind(this);
 
-  keySearchText: string;
-
-  latestKeySearchTextResult: Array<string>;
-
-  datasources: Array<Datasource>;
+  private keySearchText: string;
+  private latestKeySearchTextResult: Array<string>;
 
-  functionTypeKeys: Array<DataKey> = [];
+  private functionTypeKeys: Array<DataKey> = [];
 
-  lastKeysId: string;
-
-  lastFetchedKeys: Array<DataKey>;
+  private lastKeysId: string;
+  private lastFetchedKeys: Array<DataKey>;
 
   constructor(protected store: Store<AppState>,
               private $injector: Injector,
-              private fb: UntypedFormBuilder,
+              private fb: FormBuilder,
               private resourcesService: ResourcesService,
               private sanitizer: DomSanitizer,
               private cd: ChangeDetectorRef,
@@ -137,12 +128,11 @@ export class LiquidLevelCardWidgetSettingsComponent extends WidgetSettingsCompon
     super(store);
   }
 
-  protected settingsForm(): UntypedFormGroup {
+  protected settingsForm(): FormGroup {
     return this.levelCardWidgetSettingsForm;
   }
 
   protected onWidgetConfigSet(widgetConfig: WidgetConfigComponentData) {
-    this.shapes = Object.values(Shapes);
     this.createSvgShapesMapping();
 
     for (const type of this.utils.getPredefinedFunctionsList()) {
@@ -154,7 +144,7 @@ export class LiquidLevelCardWidgetSettingsComponent extends WidgetSettingsCompon
   }
 
   protected defaultSettings(): WidgetSettings {
-    return levelCardDefaultSettings();
+    return levelCardDefaultSettings;
   }
 
   protected onSettingsSet(settings: WidgetSettings) {
@@ -182,6 +172,7 @@ export class LiquidLevelCardWidgetSettingsComponent extends WidgetSettingsCompon
       backgroundOverlayColor: [settings.backgroundOverlayColor, []],
 
       liquidColor: [settings.liquidColor, []],
+      background: [settings.background],
 
       showTooltip: [settings.showTooltip, []],
       showTooltipLevel: [settings.showTooltipLevel, []],
@@ -214,176 +205,12 @@ export class LiquidLevelCardWidgetSettingsComponent extends WidgetSettingsCompon
   }
 
   protected updateValidators(emitEvent: boolean, trigger?: string) {
-    const emitEventFields = [];
-
-    const datasourceUnits: string = this.levelCardWidgetSettingsForm.get('datasourceUnits').value;
-    const layout: LevelCardLayout = this.levelCardWidgetSettingsForm.get('layout').value;
-    const volumeSource: AbstractControl<LevelSelectOptions> = this.levelCardWidgetSettingsForm.get('volumeSource');
-    const widgetUnits: AbstractControl<string> = this.levelCardWidgetSettingsForm.get('units');
-    const tooltipUnits: AbstractControl<string> = this.levelCardWidgetSettingsForm.get('tooltipUnits');
-    const widgetUnitsSource: AbstractControl<LevelSelectOptions> = this.levelCardWidgetSettingsForm.get('widgetUnitsSource');
-    const showTooltipLevel: AbstractControl<boolean> = this.levelCardWidgetSettingsForm.get('showTooltipLevel');
-    const showTooltipDate: AbstractControl<boolean> = this.levelCardWidgetSettingsForm.get('showTooltipDate');
-    const showTooltip: boolean = this.levelCardWidgetSettingsForm.get('showTooltip').value;
-
-    if (trigger === 'tankSelectionType') {
-      const tankSelectionType: LevelSelectOptions = this.levelCardWidgetSettingsForm.get('tankSelectionType').value;
-      if (tankSelectionType === LevelSelectOptions.static) {
-        this.levelCardWidgetSettingsForm.get('selectedShape').enable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('shapeAttributeName').disable({emitEvent: false});
-      } else {
-        this.levelCardWidgetSettingsForm.get('selectedShape').disable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('shapeAttributeName').enable({emitEvent: false});
-      }
-      emitEventFields.push('selectedShape', 'shapeAttributeName');
-    }
-
-    if (trigger === 'datasourceUnits' || trigger === 'layout' || trigger === 'units') {
-      if (
-        datasourceUnits === CapacityUnits.percent &&
-        layout !== LevelCardLayout.absolute &&
-        (!widgetUnits?.value || widgetUnits?.value === CapacityUnits.percent)
-      ) {
-        volumeSource.disable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('volumeConstant').disable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('volumeAttributeName').disable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('volumeUnits').disable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('volumeFont').disable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('volumeColor').disable({emitEvent: false});
-      } else {
-        volumeSource.enable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('volumeConstant').enable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('volumeAttributeName').enable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('volumeUnits').enable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('volumeFont').enable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('volumeColor').enable({emitEvent: false});
-      }
-
-      if (layout === LevelCardLayout.simple && datasourceUnits === CapacityUnits.percent) {
-        this.levelCardWidgetSettingsForm.get('valueFont').disable();
-        this.levelCardWidgetSettingsForm.get('valueColor').disable();
-      } else {
-        this.levelCardWidgetSettingsForm.get('valueFont').enable();
-        this.levelCardWidgetSettingsForm.get('valueColor').enable();
-      }
-      emitEventFields.push('volumeSource', 'volumeConstant', 'volumeAttributeName', 'volumeFont', 'volumeColor', 'volumeUnits');
-    } else if (trigger === 'volumeSource') {
-      if((datasourceUnits !== CapacityUnits.percent) ||
-        (layout === LevelCardLayout.absolute && widgetUnits?.value !== CapacityUnits.percent)) {
-        if (volumeSource.value === LevelSelectOptions.static) {
-          this.levelCardWidgetSettingsForm.get('volumeConstant').enable({emitEvent: false});
-          this.levelCardWidgetSettingsForm.get('volumeAttributeName').disable({emitEvent: false});
-        } else {
-          this.levelCardWidgetSettingsForm.get('volumeConstant').disable({emitEvent: false});
-          this.levelCardWidgetSettingsForm.get('volumeAttributeName').enable({emitEvent: false});
-        }
-        emitEventFields.push('volumeConstant', 'volumeAttributeName');
-      }
-    }
-
-    if (trigger === 'showBackgroundOverlay') {
-      const showBackgroundOverlay: boolean = this.levelCardWidgetSettingsForm.get('showBackgroundOverlay').value;
-      if (showBackgroundOverlay) {
-        this.levelCardWidgetSettingsForm.get('backgroundOverlayColor').enable({emitEvent: false});
-      } else {
-        this.levelCardWidgetSettingsForm.get('backgroundOverlayColor').disable({emitEvent: false});
-      }
-      emitEventFields.push('backgroundOverlayColor');
-    }
-
-    if (trigger === 'showTooltip') {
-      if (showTooltip) {
-        showTooltipLevel.enable({emitEvent: false});
-        showTooltipDate.enable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('tooltipBackgroundColor').enable();
-        this.levelCardWidgetSettingsForm.get('tooltipBackgroundBlur').enable();
-      } else {
-        showTooltipLevel.disable({emitEvent: false});
-        showTooltipDate.disable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('tooltipBackgroundColor').disable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('tooltipBackgroundBlur').disable({emitEvent: false});
-      }
-      emitEventFields.push('showTooltipLevel', 'showTooltipDate', 'tooltipBackgroundColor', 'tooltipBackgroundBlur');
-    }
-
-    if (trigger === 'showTooltipLevel') {
-      if (showTooltipLevel?.value && !showTooltipLevel.disabled) {
-        this.levelCardWidgetSettingsForm.get('tooltipUnits').enable();
-        this.levelCardWidgetSettingsForm.get('tooltipLevelDecimals').enable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('tooltipLevelFont').enable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('tooltipLevelColor').enable({emitEvent: false});
-      } else {
-        this.levelCardWidgetSettingsForm.get('tooltipUnits').disable();
-        this.levelCardWidgetSettingsForm.get('tooltipLevelDecimals').disable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('tooltipLevelFont').disable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('tooltipLevelColor').disable({emitEvent: false});
-      }
-      emitEventFields.push('tooltipUnits', 'tooltipLevelDecimals', 'tooltipLevelFont', 'tooltipLevelColor');
-    }
-
-    if (trigger === 'showTooltipDate') {
-      if (showTooltipDate?.value && !showTooltipDate.disabled) {
-        this.levelCardWidgetSettingsForm.get('tooltipDateFormat').enable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('tooltipDateFont').enable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('tooltipDateColor').enable({emitEvent: false});
-      } else {
-        this.levelCardWidgetSettingsForm.get('tooltipDateFormat').disable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('tooltipDateFont').disable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('tooltipDateColor').disable({emitEvent: false});
-      }
-      emitEventFields.push('tooltipDateFormat', 'tooltipDateFont', 'tooltipDateColor');
-    }
-
-    if (trigger === 'layout' || trigger === 'datasourceUnits') {
-      if (layout === LevelCardLayout.simple) {
-        widgetUnits.disable({emitEvent: false});
-        tooltipUnits.disable({emitEvent: false});
-        widgetUnitsSource.setValue(LevelSelectOptions.static, {emitEvent: false});
-        widgetUnitsSource.disable({emitEvent: false});
-
-        this.levelCardWidgetSettingsForm.get('valueFont').disable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('valueColor').disable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('widgetUnitsAttributeName').disable({emitEvent: false});
-      } else if (layout === LevelCardLayout.percentage) {
-        if (widgetUnits.value !== CapacityUnits.percent) {
-          widgetUnits.setValue(CapacityUnits.percent, {emitEvent: false});
-          widgetUnitsSource.setValue(LevelSelectOptions.static, {emitEvent: false});
-        }
-        widgetUnits.disable({emitEvent: false});
-        widgetUnitsSource.disable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('widgetUnitsAttributeName').disable({emitEvent: false});
-
-        if (tooltipUnits.value !== CapacityUnits.percent) {
-          tooltipUnits.setValue(CapacityUnits.percent, {emitEvent: false});
-        }
-        tooltipUnits.disable({emitEvent: false});
-      } else {
-        widgetUnits.enable({emitEvent: false});
-        tooltipUnits.enable({emitEvent: false});
-        widgetUnitsSource.enable({emitEvent: false});
-
-        this.levelCardWidgetSettingsForm.get('valueFont').enable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('valueColor').enable({emitEvent: false});
-        this.levelCardWidgetSettingsForm.get('widgetUnitsAttributeName').enable({emitEvent: false});
-      }
-      emitEventFields.push('units', 'tooltipUnits', 'valueFont', 'valueColor', 'widgetUnitsSource', 'widgetUnitsAttributeName');
-    } else if (trigger === 'widgetUnitsSource') {
-      if (layout !== LevelCardLayout.percentage) {
-        if (widgetUnitsSource.value === LevelSelectOptions.static) {
-          widgetUnits.enable({emitEvent: false});
-          this.levelCardWidgetSettingsForm.get('widgetUnitsAttributeName').disable({emitEvent: false});
-        } else {
-          widgetUnits.disable({emitEvent: false});
-          this.levelCardWidgetSettingsForm.get('widgetUnitsAttributeName').enable({emitEvent: false});
-        }
-        emitEventFields.push('units', 'widgetUnitsAttributeName');
-      }
-    }
+    updatedFormSettingsValidators(this.levelCardWidgetSettingsForm);
 
-    for (const controlKey in this.levelCardWidgetSettingsForm.controls) {
-      if (emitEventFields.includes(controlKey)) {
-        this.levelCardWidgetSettingsForm.controls[controlKey].updateValueAndValidity({emitEvent});
-      }
+    if (this.levelCardWidgetSettingsForm.get('showBackgroundOverlay').value) {
+      this.levelCardWidgetSettingsForm.get('backgroundOverlayColor').enable({emitEvent: false});
+    } else {
+      this.levelCardWidgetSettingsForm.get('backgroundOverlayColor').disable({emitEvent: false});
     }
   }