diff --git a/application/src/main/data/json/system/widget_bundles/charts.json b/application/src/main/data/json/system/widget_bundles/charts.json index 14c09d3fc4..07929028ff 100644 --- a/application/src/main/data/json/system/widget_bundles/charts.json +++ b/application/src/main/data/json/system/widget_bundles/charts.json @@ -2,16 +2,16 @@ "widgetsBundle": { "alias": "charts", "title": "Charts", - "image": "data:image/png;base64,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", + "image": "tb-image:Y2hhcnRzX3N5c3RlbV9idW5kbGVfaW1hZ2UucG5n:IkNoYXJ0cyIgc3lzdGVtIGJ1bmRsZSBpbWFnZQ==;data:image/png;base64,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", "description": "Display time series data using customizable line and bar charts. Use various pie charts to display the latest values.", "order": 1000, - "externalId": null, "name": "Charts" }, "widgetTypeFqns": [ "charts.basic_timeseries", "charts.state_chart", "range_chart", + "bar_chart_with_labels", "charts.timeseries_bars_flot", "cards.aggregated_value_card", "charts.bars", diff --git a/application/src/main/data/json/system/widget_types/bar_chart_with_labels.json b/application/src/main/data/json/system/widget_types/bar_chart_with_labels.json new file mode 100644 index 0000000000..06ee881c0a --- /dev/null +++ b/application/src/main/data/json/system/widget_types/bar_chart_with_labels.json @@ -0,0 +1,30 @@ +{ + "fqn": "bar_chart_with_labels", + "name": "Bar chart with labels", + "deprecated": false, + "image": "tb-image:QmFyLWNoYXJ0LXdpdGgtbGFiZWxzLnN2Zw==:IkJhciBjaGFydCB3aXRoIGxhYmVscyIgc3lzdGVtIHdpZGdldCBpbWFnZQ==;data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDEiIGhlaWdodD0iMTYwIiBmaWxsPSJub25lIj48cGF0aCBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii41IiBkPSJNMi44IDQuM1YxMGgtLjdWNS4ybC0xLjQuNXYtLjZsMi0uOGguMVptNS45IDIuNHYuOWwtLjEgMS4yLS40LjdjLS4yLjItLjMuNC0uNi40YTIgMiAwIDAgMS0uNy4ybC0uNi0uMWMtLjIgMC0uNC0uMS0uNS0uMy0uMiAwLS4zLS4yLS40LS40bC0uMi0uOC0uMS0xdi0uOGwuMS0xLjIuNC0uN2MuMS0uMi4zLS40LjUtLjRsLjgtLjIuNi4xYTEuNCAxLjQgMCAwIDEgLjkuN2wuMi43djFabS0uNyAxVjUuOWwtLjItLjVhMSAxIDAgMCAwLS4yLS4zbC0uMy0uMmExIDEgMCAwIDAtLjQgMCAxIDEgMCAwIDAtLjUgMGwtLjMuMy0uMi42djIuNmwuMS41LjIuMy4zLjJoLjlsLjMtLjMuMi0uNnYtLjhabTUuMy0xdjIuMWwtLjUuN2MtLjEuMi0uMy40LS41LjRhMiAyIDAgMCAxLS44LjJMMTEgMTBjLS4yIDAtLjMtLjEtLjUtLjNsLS4zLS40LS4zLS44di0zbC40LS43Yy4yLS4yLjQtLjQuNi0uNGwuNy0uMi42LjFhMS40IDEuNCAwIDAgMSAxIC43bC4xLjcuMSAxWm0tLjcgMVY1LjlsLS4yLS41YTEgMSAwIDAgMC0uMi0uM2wtLjMtLjJhMSAxIDAgMCAwLS40IDAgMSAxIDAgMCAwLS40IDBjLS4yIDAtLjMuMi0uNC4zbC0uMi42djIuNmwuMS41LjMuM2MwIC4xLjEuMi4zLjJoLjhsLjMtLjMuMi0uNi4xLS44Wm0xLjctMnYtLjNjMC0uMiAwLS40LjItLjYgMC0uMi4yLS4zLjQtLjRsLjYtLjJjLjMgMCAuNSAwIC42LjJsLjQuNC4yLjZ2LjNjMCAuMiAwIC40LS4yLjYgMCAuMi0uMi4zLS40LjRsLS42LjJjLS4yIDAtLjQgMC0uNi0uMmExIDEgMCAwIDEtLjQtLjRsLS4yLS42Wm0uNi0uM1Y2bC4zLjMuMy4xaC40TDE2IDZWNS4xYS42LjYgMCAwIDAtLjYtLjQuNi42IDAgMCAwLS41LjRsLS4xLjNaTTE3IDl2LS4zYzAtLjIgMC0uNC4yLS42IDAtLjIuMi0uMy40LS40bC42LS4yYy4yIDAgLjQgMCAuNi4ybC40LjQuMS42VjlsLS4xLjZjMCAuMi0uMi4zLS40LjRsLS42LjJjLS4zIDAtLjUgMC0uNi0uMi0uMiAwLS4zLS4yLS40LS40bC0uMi0uNlptLjYtLjN2LjdsLjIuMi40LjFoLjNsLjItLjMuMS0uNHYtLjZhLjYuNiAwIDAgMC0uNi0uNC42LjYgMCAwIDAtLjYuNHYuM1ptLjgtMy41LTIuOCA0LjUtLjQtLjNMMTggNWwuNC4yWk02IDM2YzAgLjQgMCAuNy0uMiAxbC0uNi41LTEgLjJjLS4zIDAtLjYgMC0uOS0uMi0uMi0uMS0uNS0uMy0uNi0uNi0uMi0uMi0uMy0uNS0uMy0uOGExLjUgMS41IDAgMCAxIDEuMS0xLjVsLjctLjFjLjQgMCAuNyAwIDEgLjIuMi4xLjUuMy42LjYuMi4yLjMuNS4zLjhabS0uNyAwLS4xLS41YTEgMSAwIDAgMC0uNC0uNGwtLjYtLjEtLjUuMWExIDEgMCAwIDAtLjQuNGwtLjEuNXYuNmwuNS40aDEuMWwuNC0uNC4xLS42Wm0uNi0yLjZjMCAuMyAwIC41LS4yLjctLjEuMy0uMy40LS42LjZsLS44LjJhMiAyIDAgMCAxLTEtLjJjLS4yLS4yLS40LS4zLS41LS42LS4yLS4yLS4yLS40LS4yLS43IDAtLjMgMC0uNi4yLS45LjEtLjIuMy0uNC42LS41bC44LS4yIDEgLjIuNS41Yy4yLjMuMi42LjIuOVptLS43IDAtLjEtLjVjLS4xLS4xLS4yLS4zLS40LS4zYTEgMSAwIDAgMC0uNS0uMiAxIDEgMCAwIDAtLjUuMWwtLjMuNC0uMS41LjEuNWMwIC4yLjIuMy40LjRoLjlsLjQtLjQuMS0uNVptNS41Ljl2LjlsLS4xIDEuMS0uNC44Yy0uMi4yLS4zLjQtLjYuNGEyIDIgMCAwIDEtLjcuMmwtLjYtLjFjLS4yIDAtLjQtLjEtLjUtLjMtLjIgMC0uMy0uMi0uNC0uNGwtLjItLjgtLjEtMXYtLjhsLjEtMS4yLjQtLjdjLjEtLjIuMy0uNC41LS40bC44LS4yLjYuMWExLjQgMS40IDAgMCAxIC45LjdsLjIuN3YxWm0tLjcgMXYtMS44bC0uMi0uNWExIDEgMCAwIDAtLjItLjNsLS4zLS4yYTEgMSAwIDAgMC0uNCAwIDEgMSAwIDAgMC0uNSAwbC0uMy4zLS4yLjZWMzZsLjEuNS4yLjMuMy4yaC45bC4zLS4zLjItLjZ2LS44Wm0xLjctMlYzM2wuMS0uNi40LS40LjctLjJjLjIgMCAuNCAwIC42LjJsLjQuNC4xLjZ2LjNsLS4xLjYtLjQuNC0uNi4yYy0uMyAwLS41IDAtLjctLjJhMSAxIDAgMCAxLS40LS40bC0uMS0uNlptLjUtLjN2LjNsLjEuM2MwIC4yLjEuMi4yLjNsLjQuMWguM2wuMi0uNFYzMi43YS42LjYgMCAwIDAtLjUtLjQuNi42IDAgMCAwLS42LjR2LjNabTIuMyAzLjV2LS4zbC4xLS42LjQtLjQuNi0uMmMuMyAwIC41IDAgLjcuMmwuNC40LjEuNnYuM2wtLjEuNi0uNC40LS43LjJjLS4yIDAtLjQgMC0uNi0uMi0uMiAwLS4zLS4yLS40LS40bC0uMS0uNlptLjUtLjN2LjdsLjMuMi4zLjFoLjRjMC0uMi4yLS4yLjItLjN2LTFhLjYuNiAwIDAgMC0uNi0uNC42LjYgMCAwIDAtLjUuNHYuM1ptLjgtMy41TDEzIDM3LjJsLS40LS4zIDIuOC00LjQuNC4yWk01LjIgNTkuNWguMXYuNmMtLjQgMC0uOCAwLTEgLjItLjMuMS0uNS4zLS42LjVhMiAyIDAgMCAwLS40Ljd2Mi4zbC4zLjUuMy4zaC45bC4zLS4zLjItLjRhMS44IDEuOCAwIDAgMCAwLTFjMC0uMiAwLS4zLS4yLS40YTEgMSAwIDAgMC0uNy0uNGwtLjYuMS0uNC40YTEgMSAwIDAgMC0uMi41aC0uNGwuMi0uNy40LS41Yy4xLS4yLjMtLjMuNS0uM2ExLjkgMS45IDAgMCAxIDEuMyAwbC41LjVjLjIuMS4zLjMuMy42QTIuNCAyLjQgMCAwIDEgNiA2NGwtLjMuNi0uNi40LS44LjJjLS4zIDAtLjUgMC0uOC0uMmwtLjUtLjUtLjQtLjd2LTIuM2wuNS0xYy4yLS40LjQtLjYuOC0uOGEzIDMgMCAwIDEgMS4zLS4zWm01LjUgMi40di45bC0uMSAxLjItLjQuN2MtLjIuMi0uMy40LS42LjRhMiAyIDAgMCAxLS43LjJsLS42LS4xYy0uMiAwLS40LS4xLS41LS4zLS4yIDAtLjMtLjItLjQtLjRsLS4yLS44LS4xLTFWNjJsLjEtMS4yLjQtLjdjLjEtLjIuMy0uNC41LS40bC44LS4yLjYuMWExLjQgMS40IDAgMCAxIC45LjdsLjIuN3YxWm0tLjcgMVY2MWwtLjItLjVhMSAxIDAgMCAwLS4yLS4zbC0uMy0uMmExIDEgMCAwIDAtLjQgMCAxIDEgMCAwIDAtLjUgMGwtLjMuMy0uMi42djIuNmwuMS41LjIuMy4zLjJoLjlsLjMtLjMuMi0uNlY2M1ptMS43LTJ2LS4zbC4xLS42LjQtLjQuNy0uMmMuMiAwIC40IDAgLjYuMmwuNC40LjEuNnYuM2wtLjEuNi0uNC40LS42LjJjLS4zIDAtLjUgMC0uNy0uMmExIDEgMCAwIDEtLjQtLjRsLS4xLS42Wm0uNS0uM3YuM2wuMS4zYzAgLjIuMS4yLjIuM2wuNC4xaC4zbC4yLS40VjYwLjNhLjYuNiAwIDAgMC0uNS0uNGwtLjQuMS0uMi4zdi4zWm0yLjMgMy41di0uM2wuMS0uNi40LS40LjYtLjJjLjMgMCAuNSAwIC43LjJsLjQuNC4xLjZ2LjNsLS4xLjYtLjQuNC0uNy4yYy0uMiAwLS40IDAtLjYtLjItLjIgMC0uMy0uMi0uNC0uNGwtLjEtLjZabS41LS4zdi43bC4zLjIuMy4xaC40YzAtLjIuMi0uMi4yLS4zdi0xYS42LjYgMCAwIDAtLjYtLjQuNi42IDAgMCAwLS41LjR2LjNabS44LTMuNUwxMyA2NC44bC0uNC0uMyAyLjgtNC40LjQuMlpNNi4zIDkwLjl2LjZoLTRWOTFsMi41LTRoLjVsLS42IDEuMkwzIDkwLjloMy4zWk01LjUgODd2NS43aC0uN3YtNS43aC43Wm01LjIgMi40di45bC0uMSAxLjEtLjQuOGMtLjIuMi0uMy40LS42LjRhMiAyIDAgMCAxLS43LjJsLS42LS4xYy0uMiAwLS40LS4xLS41LS4zLS4yIDAtLjMtLjItLjQtLjRsLS4yLS44LS4xLTF2LS44bC4xLTEuMi40LS43Yy4xLS4yLjMtLjQuNS0uNEw5IDg3bC42LjFhMS40IDEuNCAwIDAgMSAuOS43bC4yLjd2MVptLS43IDF2LTEuOGwtLjItLjVhMSAxIDAgMCAwLS4yLS4zbC0uMy0uMmExIDEgMCAwIDAtLjQgMCAxIDEgMCAwIDAtLjUgMGwtLjMuMy0uMi42djIuNmwuMS41LjIuMy4zLjJoLjlsLjMtLjMuMi0uNnYtLjhabTEuNy0ydi0uM2wuMS0uNi40LS40LjctLjJjLjIgMCAuNCAwIC42LjJsLjQuNC4xLjZ2LjNsLS4xLjYtLjQuNC0uNi4yYy0uMyAwLS41IDAtLjctLjJhMSAxIDAgMCAxLS40LS40bC0uMS0uNlptLjUtLjN2LjNsLjEuM2MwIC4yLjEuMi4yLjNsLjQuMWguM2wuMi0uNFY4OGEuNi42IDAgMCAwLS41LS40bC0uNC4xLS4yLjN2LjNabTIuMyAzLjV2LS4zbC4xLS42LjQtLjQuNi0uMmMuMyAwIC41IDAgLjcuMmwuNC40LjEuNnYuM2wtLjEuNi0uNC40LS43LjJjLS4yIDAtLjQgMC0uNi0uMi0uMiAwLS4zLS4yLS40LS40bC0uMS0uNlptLjUtLjN2LjdsLjMuMi4zLjFoLjRjMC0uMi4yLS4yLjItLjN2LTFhLjYuNiAwIDAgMC0uNi0uNC42LjYgMCAwIDAtLjUuNHYuM1ptLjgtMy41TDEzIDkyLjRsLS40LS4zIDIuOC00LjQuNC4yWk02LjIgMTE5Ljh2LjZIMi41di0uNWwxLjgtMiAuNi0uNy4yLS41LjEtLjUtLjEtLjUtLjMtLjNhMSAxIDAgMCAwLS42LS4yYy0uMiAwLS40IDAtLjYuMmExIDEgMCAwIDAtLjQuNGwtLjEuNmgtLjdjMC0uMyAwLS42LjItLjkuMS0uMy4zLS41LjYtLjZhMiAyIDAgMCAxIDEtLjNsMSAuMmMuMi4yLjQuMy41LjYuMi4yLjIuNC4yLjh2LjVsLS4zLjVhNy44IDcuOCAwIDAgMS0uOCAxbC0xLjUgMS42aDIuOVptNC41LTIuN3YuOWwtLjEgMS4yLS40LjdjLS4yLjItLjMuNC0uNi40YTIgMiAwIDAgMS0uNy4ybC0uNi0uMWMtLjIgMC0uNC0uMS0uNS0uMy0uMiAwLS4zLS4yLS40LS40bC0uMi0uOC0uMS0xdi0uOGwuMS0xLjIuNC0uN2MuMS0uMi4zLS40LjUtLjRsLjgtLjIuNi4xYTEuNCAxLjQgMCAwIDEgLjkuN2wuMi43djFabS0uNyAxdi0xLjhsLS4yLS41YTEgMSAwIDAgMC0uMi0uM2wtLjMtLjJhMSAxIDAgMCAwLS40IDAgMSAxIDAgMCAwLS41IDBsLS4zLjMtLjIuNnYyLjZsLjEuNS4yLjMuMy4yaC45bC4zLS4zLjItLjZ2LS44Wm0xLjctMnYtLjNsLjEtLjYuNC0uNC43LS4yYy4yIDAgLjQgMCAuNi4ybC40LjQuMS42di4zbC0uMS42LS40LjQtLjYuMmMtLjMgMC0uNSAwLS43LS4yYTEgMSAwIDAgMS0uNC0uNGwtLjEtLjZabS41LS4zdi4zbC4xLjNjMCAuMi4xLjIuMi4zbC40LjFoLjNsLjItLjRWMTE1LjVhLjYuNiAwIDAgMC0uNS0uNC42LjYgMCAwIDAtLjYuNHYuM1ptMi4zIDMuNXYtLjNsLjEtLjYuNC0uNC42LS4yYy4zIDAgLjUgMCAuNy4ybC40LjQuMS42di4zbC0uMS42LS40LjQtLjcuMmMtLjIgMC0uNCAwLS42LS4yLS4yIDAtLjMtLjItLjQtLjRsLS4xLS42Wm0uNS0uM3YuN2wuMy4yLjMuMWguNGMwLS4yLjItLjIuMi0uM3YtMWEuNi42IDAgMCAwLS42LS40LjYuNiAwIDAgMC0uNS40di4zWm0uOC0zLjVMMTMgMTIwbC0uNC0uMyAyLjgtNC40LjQuMlpNOC41IDE0NC43djIuMWwtLjQuN2MtLjIuMi0uNC40LS42LjRhMiAyIDAgMCAxLS44LjJsLS42LS4xLS41LS4zLS4zLS40LS4zLS44di0zbC40LS43Yy4yLS4yLjQtLjQuNi0uNGwuNy0uMi43LjFhMS40IDEuNCAwIDAgMSAuOC43bC4zLjd2MVptLS43IDF2LTEuOGwtLjItLjVhMSAxIDAgMCAwLS4yLS4zbC0uMy0uMmExIDEgMCAwIDAtLjQgMCAxIDEgMCAwIDAtLjQgMGwtLjQuMy0uMi42djIuNmwuMi41YzAgLjEgMCAuMi4yLjNsLjMuMmguOGwuMy0uMy4zLS42di0uOFptMS44LTJ2LS4zbC4xLS42YzAtLjIuMi0uMy40LS40bC42LS4yYy4zIDAgLjUgMCAuNi4yLjIuMS40LjIuNC40bC4yLjZ2LjNjMCAuMiAwIC40LS4yLjYgMCAuMi0uMi4zLS40LjRsLS42LjJjLS4yIDAtLjQgMC0uNi0uMmExIDEgMCAwIDEtLjQtLjRsLS4xLS42Wm0uNS0uM3YuNmwuMy4zLjMuMWguNGwuMi0uNFYxNDMuMWEuNi42IDAgMCAwLS42LS40LjYuNiAwIDAgMC0uNS40bC0uMS4zWm0yLjIgMy41di0uM2MwLS4yIDAtLjQuMi0uNiAwLS4yLjItLjMuNC0uNGwuNi0uMmMuMiAwIC40IDAgLjYuMmwuNC40LjIuNnYuM2MwIC4yIDAgLjQtLjIuNiAwIC4yLS4yLjMtLjQuNGwtLjYuMmMtLjIgMC0uNSAwLS42LS4yLS4yIDAtLjMtLjItLjQtLjRsLS4yLS42Wm0uNi0uM3YuN2wuMi4yLjQuMWguM2wuMy0uM3YtMWEuNi42IDAgMCAwLS42LS40LjYuNiAwIDAgMC0uNi40di4zWm0uOC0zLjUtMi44IDQuNS0uNC0uMyAyLjgtNC40LjQuMloiLz48cGF0aCBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS1vcGFjaXR5PSIuMSIgc3Ryb2tlLXdpZHRoPSIuNCIgZD0iTTI0LjIgNi44aDE3NS42TTI0LjIgMzQuNmgxNzUuNk0yNC4yIDYyLjRoMTc1LjZNMjQuMiA5MC4yaDE3NS42TTI0LjIgMTE4aDE3NS42Ii8+PHBhdGggc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2Utb3BhY2l0eT0iLjUiIHN0cm9rZS13aWR0aD0iLjQiIGQ9Ik0yNC4yIDE0NS44aDE3NS42Ii8+PHBhdGggZmlsbD0iIzdEOEVGRiIgZD0iTTMwIDI1LjVoMTh2MTIwSDMweiIvPjxwYXRoIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iLjkiIGQ9Ik00MC40IDEzNS40Yy40IDAgLjcgMCAxIC4ybC41LjcuMiAxYzAgLjMgMCAuNi0uMi45LS4xLjMtLjMuNS0uNi43bC0uOS4yYTEuNSAxLjUgMCAwIDEtMS0uNWwtLjQtLjYtLjEtLjhjMC0uMyAwLS43LjItMWwuNS0uNmMuMy0uMi41LS4yLjgtLjJabTAgLjlhMSAxIDAgMCAwLS41LjFsLS4zLjMtLjEuNXYuNWMuMS4yLjMuMy40LjNsLjUuMmMuMiAwIC40IDAgLjUtLjJsLjMtLjMuMS0uNXYtLjVsLS40LS4zYTEgMSAwIDAgMC0uNS0uMVptLTIuNi0uOGMuMyAwIC41IDAgLjguMmwuNS42LjIgMWMwIC4zIDAgLjYtLjIuOGwtLjUuNy0uOC4yYy0uMyAwLS42LS4xLS44LS4zLS4zLS4xLS41LS4zLS42LS42bC0uMi0uOS4yLS45LjYtLjYuOC0uMlptMCAxYTEgMSAwIDAgMC0uNCAwIC43LjcgMCAwIDAtLjQuN3YuNWwuNC4yLjQuMWguNWwuMy0uMy4xLS41LS4xLS40LS4zLS4zYTEgMSAwIDAgMC0uNSAwWm0xLjYtMy0uMi43LTIuOS0uM3YtM2guOHYyLjJsMS40LjJhMS44IDEuOCAwIDAgMS0uMi0xbC4xLS43YzAtLjIuMi0uNC40LS41LjEtLjIuMy0uMy42LS4zYTIuNSAyLjUgMCAwIDEgMS41IDBsLjYuMy40LjYuMi44LS4xLjctLjMuNmExLjYgMS42IDAgMCAxLTEuMi42di0xbC40LS4xYy4yIDAgLjMtLjIuMy0uM2wuMS0uNXYtLjRsLS4zLS4zYTEgMSAwIDAgMC0uNC0uMiAxLjggMS44IDAgMCAwLS45IDAgMSAxIDAgMCAwLS40LjJsLS4yLjR2LjlsLjMuM1oiLz48cGF0aCBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii41IiBkPSJNMzguOCAxMjMuOGguNnYzaC0uNnYtM1ptLTIuNSAzSDQydi43aC01Ljd2LS43Wm0wLTMuNkg0MnYuN2gtNS43di0uN1ptNC43LTRoLTMuMnYtLjdINDJ2LjdoLTFabS0uOSAwdi0uNGwuOC4xLjYuMy40LjUuMi44LS4xLjVhMS4xIDEuMSAwIDAgMS0uOC44SDM3Ljh2LS43SDQxbC4zLS4yLjEtLjN2LS4ybC0uMS0uOGExIDEgMCAwIDAtLjUtLjRoLS43Wm0tMS41LTIuNkg0MnYuN2gtNC4ydi0uNmguOFptMS4xLjJ2LjNsLS44LS4xYTIgMiAwIDAgMS0uNi0uM2wtLjUtLjYtLjEtLjd2LS42YTEuMSAxLjEgMCAwIDEgLjgtLjdINDJ2LjZoLTIuOGExIDEgMCAwIDAtLjUuMWwtLjMuNC0uMS40LjEuNi4zLjMuNS4yaC41Wm0tLjQtMi44LjIuNS0uNy0uMS0uNi0uMy0uNC0uNi0uMS0uN3YtLjZsLjQtLjQuNC0uM0g0MnYuNmgtMi44bC0uNS4xYy0uMi4xLS4zLjItLjMuNGExLjMgMS4zIDAgMCAwIDAgLjlsLjIuMy4zLjJoLjRabS0xLjUtNC42SDQydi44aC00LjJ2LS44Wm0tMS4xLjhoLS4zbC0uMi0uNGMwLS4xIDAtLjIuMi0uM2wuMy0uMWguMmwuMi40YzAgLjEgMCAuMi0uMi4zbC0uMi4xWm00LjUtNC43SDM2di0uN2g2di43aC0uOFptLTEuMyAyLjlhMyAzIDAgMCAxLTEtLjFsLS42LS40LS40LS41Yy0uMi0uMi0uMi0uNS0uMi0uN2wuMS0uNy40LS41Yy4yLS4xLjQtLjMuNy0uM2wuOC0uMmguNGMuMyAwIC42IDAgLjguMi4zIDAgLjUuMi42LjNsLjQuNWExLjcgMS43IDAgMCAxIDAgMS40YzAgLjItLjIuNC0uNC41bC0uNy40YTMgMyAwIDAgMS0uOSAwWm0wLS44aC42bC41LS4yYy4yLS4xLjMtLjIuMy0uNGwuMi0uNWMwLS4yIDAtLjQtLjItLjZsLS40LS4zLS41LS4zaC0xbC0uNC4yLS4zLjJhMSAxIDAgMCAwLS4zLjNsLS4xLjUuMS41LjQuNC41LjJoLjZabS0yLjEtNC44SDQydi43aC00LjJ2LS43Wm0tMS4xLjgtLjMtLjEtLjItLjNjMC0uMiAwLS4zLjItLjRoLjVsLjIuNHMwIC4yLS4yLjNoLS4yWm0xLTMuOGguNnYyLjNoLS41di0yLjNabS0xIDEuNXYtLjdINDFsLjMtLjEuMS0uMnYtLjJhMS4yIDEuMiAwIDAgMCAwLS4zaC42djFsLS40LjRoLTQuOVptNC45LTMuNi0zLjgtMS4ydi0uOGw0LjkgMS43YTIuNyAyLjcgMCAwIDEgLjYuNCAxLjIgMS4yIDAgMCAxIC40Ljl2LjRINDNhMS43IDEuNyAwIDAgMCAwLS43bC0uMy0uMi0uNC0uMi0uOC0uM1ptLTMuOC44IDMuMy0xIC43LS4zLjMuNi00LjMgMS41di0uOFoiLz48cGF0aCBmaWxsPSIjRjk2RkZGIiBkPSJNNDggNDguNWgxOHY5N0g0OHoiLz48cGF0aCBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii45IiBkPSJNNTQuMyAxMzUuM2guNWw1LjIgMi4zdjFsLTUtMi4zdjNoLS43di00Wm0yLjQtNC42aDFjLjQgMCAuNyAwIDEgLjIuNCAwIC42LjIuOC4zLjIuMi40LjQuNC42bC4yLjgtLjEuNmExLjUgMS41IDAgMCAxLS44IDFsLS42LjJoLTNhMiAyIDAgMCAxLS44LS41bC0uNC0uNS0uMi0uOC4xLS42YTEuNSAxLjUgMCAwIDEgLjgtMWwuNi0uMmgxWm0xIDFoLTEuMmE0IDQgMCAwIDAtLjYgMGwtLjQuMS0uMy4yLS4yLjN2LjdsLjMuMy41LjJoMi41bC41LS4xLjMtLjIuMi0uM3YtLjdsLS4zLS4zLS41LS4yYTQgNCAwIDAgMC0uOCAwWiIvPjxwYXRoIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iLjUiIGQ9Ik01OC42IDEyNC41YTEgMSAwIDAgMC0uNCAwbC0uMy4zLS4yLjQtLjIuNi0uMy44LS40LjYtLjQuNGgtLjZhMS40IDEuNCAwIDAgMS0xLjEtLjRjLS4yLS4yLS4zLS40LS4zLS43bC0uMi0uN2MwLS41LjEtLjguMy0xLjEuMS0uMy40LS42LjYtLjcuMy0uMi42LS4yLjktLjJ2LjdsLS42LjFhMSAxIDAgMCAwLS40LjVsLS4xLjd2LjZsLjQuNC41LjFoLjNsLjMtLjMuMi0uNC4yLS42LjMtLjhjLjEtLjMuMi0uNS40LS42LjEtLjIuMy0uMy41LS4zbC42LS4yYy4yIDAgLjQgMCAuNi4yLjIgMCAuMy4yLjUuNGwuMy42YTMgMyAwIDAgMSAwIDEuNmwtLjQuNy0uNS41LS43LjJ2LS44aC41YzAtLjIuMi0uMy4zLS40bC4yLS41YTIuMiAyLjIgMCAwIDAgMC0xLjFsLS40LS41YS44LjggMCAwIDAtLjQtLjFabS0uNy0xLjUtLjktLjFhMiAyIDAgMCAxLS43LS40bC0uNC0uNi0uMi0uOGMwLS4zIDAtLjYuMi0uOCAwLS4yLjItLjQuNC0uNmwuNy0uNC44LS4xaC4xbC45LjEuNy40YTEuOCAxLjggMCAwIDEgLjYgMS40YzAgLjMgMCAuNi0uMi44YTEuOCAxLjggMCAwIDEtMS4xIDFsLS45LjFabTAtLjdoLjZsLjUtLjMuNC0uNHYtMWExIDEgMCAwIDAtLjQtLjRsLS41LS4yLS42LS4xaC0uNmwtLjUuM2ExIDEgMCAwIDAtLjUuOWwuMS41LjQuNC41LjIuNS4xWm0tMi4xLTQuOUg2MHYuOGgtNC4ydi0uOFptLTEuMS44aC0uM2wtLjItLjRjMC0uMiAwLS4zLjItLjNsLjMtLjFoLjJsLjIuNGMwIC4xIDAgLjItLjIuM2wtLjIuMVptLS43LTIuOGg2di44aC02di0uOFptMi42LTRINjB2LjhoLTQuMnYtLjdoLjhabTEuMS4ydi4zSDU3YTIgMiAwIDAgMS0uNi0uNGwtLjUtLjUtLjEtLjh2LS41YTEuMSAxLjEgMCAwIDEgLjgtLjdsLjctLjFINjB2LjdoLTIuOGExIDEgMCAwIDAtLjUuMWwtLjMuMy0uMS41LjEuNWMwIC4yLjIuMy4zLjRsLjUuMmguNVptLS40LTIuNy4yLjVjLS4zIDAtLjUgMC0uNy0uMmwtLjYtLjMtLjQtLjUtLjEtLjd2LS42bC40LS41LjQtLjNINjB2LjdoLTIuOGwtLjUuMWMtLjIgMC0uMy4yLS4zLjNhMS4zIDEuMyAwIDAgMCAwIDFsLjIuMi4zLjJoLjRabS42LTMuNi0uOS0uMWEyIDIgMCAwIDEtLjctLjRsLS40LS42LS4yLS44YzAtLjMgMC0uNi4yLS44IDAtLjMuMi0uNS40LS42bC43LS40LjgtLjFoMWwuNy41YTEuOCAxLjggMCAwIDEgLjYgMS40YzAgLjMgMCAuNS0uMi44YTEuOCAxLjggMCAwIDEtMS4xIDFsLS45LjFabTAtLjcuNi0uMS41LS4yLjQtLjR2LTFhMSAxIDAgMCAwLS40LS40bC0uNS0uMi0uNi0uMWgtLjZsLS41LjNhMSAxIDAgMCAwLS41LjlsLjEuNS40LjQuNS4yaC41Wm0tMi4xLTQuOUg2MHYuN2gtNC4ydi0uN1ptLTEuMS44LS4zLS4xLS4yLS4zYzAtLjIgMC0uMy4yLS40aC41bC4yLjRjMCAuMSAwIC4yLS4yLjNoLS4yWm00LjItNC41LS4zLjEtLjMuMy0uMi42LS4xLjYtLjMuNWExIDEgMCAwIDEtLjguNCAxIDEgMCAwIDEtLjQgMEw1NiA5OGMtLjItLjEtLjItLjMtLjMtLjVhMiAyIDAgMCAxLS4xLS42YzAtLjQgMC0uNy4yLTFsLjUtLjUuNi0uMXYuN2gtLjNsLS4zLjQtLjEuNXYuNGwuMy4zYS42LjYgMCAwIDAgLjUgMGguMmwuMS0uNC4yLS41LjItLjguNC0uNS42LS4yYTEuMSAxLjEgMCAwIDEgMSAuNWwuMi41di42bC0uMSAxLS41LjYtLjcuMnYtLjhsLjUtLjEuMi0uNGExLjUgMS41IDAgMCAwIDAtMWwtLjItLjNoLS4zWm0tMy4xLTMuNWguNXYyLjNoLS41di0yLjNabS0xIDEuNXYtLjdoNC41bC4xLS4ydi0uMmExLjIgMS4yIDAgMCAwIDAtLjRoLjZ2MS4xbC0uNC4zLS43LjFoLTQuMlptNC4yLTVoLTMuMnYtLjdINjB2LjdoLTFabS0uOSAwdi0uNGwuOC4xLjYuMy40LjUuMi44LS4xLjVhMS4xIDEuMSAwIDAgMS0uOC44SDU1LjhWOTFINTlsLjMtLjIuMS0uM3YtLjNsLS4xLS43YTEgMSAwIDAgMC0uNS0uNGgtLjdabS0xLjctMi42SDYwdi44aC00LjJ2LS43aC42Wm0tLjYtMS4zaC42di44bC4zLjMuMy4zaC40bC4yLjMtLjgtLjFhMiAyIDAgMCAxLS41LS4zYy0uMiAwLS40LS4yLS41LS40YTEuMSAxLjEgMCAwIDEgMC0uOVptNC4zLTIuNGMwIC4zIDAgLjYtLjIuOGExLjggMS44IDAgMCAxLTEgMWwtLjkuMkg1OGMtLjQgMC0uNyAwLTEtLjJhMiAyIDAgMCAxLS42LS40IDEuOCAxLjggMCAwIDEtLjQtMmMwLS4zLjItLjUuNC0uNmwuNi0uMy45LS4xaC4zdjMuMWgtLjZ2LTIuNGwtLjYuMWExIDEgMCAwIDAtLjQuMyAxIDEgMCAwIDAtLjIuNiAxIDEgMCAwIDAgLjQuOGwuNS4zaDEuNGwuNS0uMy4zLS40VjgybC0uNS0uNC40LS41LjQuNC4zLjV2LjdaIi8+PHBhdGggZmlsbD0iI0ZGQTM4OSIgZD0iTTY2IDM0LjVoMTh2MTExSDY2eiIvPjxwYXRoIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iLjkiIGQ9Ik03Ni40IDEzNS40Yy40IDAgLjcgMCAxIC4ybC41LjcuMiAxYzAgLjMgMCAuNi0uMi45LS4xLjMtLjMuNS0uNi43bC0uOS4yYTEuNSAxLjUgMCAwIDEtMS0uNWwtLjQtLjYtLjEtLjhjMC0uMyAwLS43LjItMWwuNS0uNmMuMy0uMi41LS4yLjgtLjJabTAgLjlhMSAxIDAgMCAwLS41LjFsLS4zLjMtLjEuNXYuNWMuMS4yLjMuMy40LjNsLjUuMmMuMiAwIC40IDAgLjUtLjJsLjMtLjMuMS0uNXYtLjVsLS40LS4zYTEgMSAwIDAgMC0uNS0uMVptLTIuNi0uOGMuMyAwIC41IDAgLjguMmwuNS42LjIgMWMwIC4zIDAgLjYtLjIuOGwtLjUuNy0uOC4yYy0uMyAwLS42LS4xLS44LS4zLS4zLS4xLS41LS4zLS42LS42bC0uMi0uOS4yLS45LjYtLjYuOC0uMlptMCAxYTEgMSAwIDAgMC0uNCAwIC43LjcgMCAwIDAtLjQuN3YuNWwuNC4yLjQuMWguNWwuMy0uMy4xLS41LS4xLS40LS4zLS4zYTEgMSAwIDAgMC0uNSAwWm0uOS01LjhoMWMuNCAwIC43IDAgMSAuMi40IDAgLjYuMi44LjMuMi4yLjQuNC40LjZsLjIuOC0uMS42YTEuNSAxLjUgMCAwIDEtLjggMWwtLjYuMmgtM2EyIDIgMCAwIDEtLjgtLjVsLS40LS41LS4yLS44LjEtLjZhMS41IDEuNSAwIDAgMSAuOC0xbC42LS4yaDFabTEgMWgtMS4yYTQgNCAwIDAgMC0uNiAwbC0uNC4xLS4zLjItLjIuM3YuN2wuMy4zLjUuMmgyLjVsLjUtLjEuMy0uMi4yLS4zdi0uN2wtLjMtLjMtLjUtLjJhNCA0IDAgMCAwLS44IDBaIi8+PHBhdGggZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNSIgZD0iTTc3LjQgMTI0aC42djNoLS42di0zWm0tNSAyLjhINzh2LjdoLTUuN3YtLjdabTUuNy01LjNjMCAuMyAwIC42LS4yLjhhMS44IDEuOCAwIDAgMS0xIDFsLS45LjJINzZjLS40IDAtLjcgMC0xLS4yYTIgMiAwIDAgMS0uNi0uNCAxLjggMS44IDAgMCAxLS40LTJjMC0uMy4yLS41LjQtLjZsLjYtLjMuOS0uMWguM3YzLjFoLS42di0yLjRsLS42LjFhMSAxIDAgMCAwLS40LjMgMSAxIDAgMCAwLS4yLjYgMSAxIDAgMCAwIC40LjhsLjUuMi43LjFoLjdsLjUtLjNhMS4yIDEuMiAwIDAgMCAuNC0xYzAtLjIgMC0uNC0uMi0uNmwtLjQtLjQuNC0uNS40LjQuMy41di43Wm0tLjgtNWgtMi42Yy0uMi4xLS4zLjItLjMuNGwtLjEuNXYuNWwuMy4zaC4zdi44YTEgMSAwIDAgMS0uNC0uMWMtLjIgMC0uMy0uMi0uNC0uM2wtLjMtLjZhMiAyIDAgMCAxLS4xLS43YzAtLjMgMC0uNS4yLS44IDAtLjIuMi0uNC40LS41LjItLjIuNS0uMi44LS4yaDIuNGwuNC0uMmguMXYuOGgtLjdabS0xLjktLjFoLjV2LjdsLjEuNS4xLjQuMy4zaC43bC4zLS4zdi0uNGExLjIgMS4yIDAgMCAwLS40LTEgLjcuNyAwIDAgMC0uNC0uMmwuMy0uMy40LjJhMS43IDEuNyAwIDAgMSAuOCAxLjRjMCAuMyAwIC41LS4yLjdsLS40LjUtLjcuMi0uNi0uMS0uNC0uNC0uMy0uNnYtMS42Wm0yLjYtM3YuOGgtNC43Yy0uMyAwLS41IDAtLjctLjItLjMgMC0uNC0uMi0uNS0uNGwtLjItLjhhMiAyIDAgMCAxIDAtLjVoLjd2LjlsLjMuMkg3OFptLTQuMi0uOGguNXYyLjNoLS41di0yLjNabTMuNS00LTMuNS0xdi0uNWguN2wzLjUgMS4ydi40aC0uOFptLTMuNS44IDMuNS0xaC43di40bC00LjIgMS4zdi0uN1ptMy41LTMuNC0zLjUtLjl2LS43bDQuMiAxLjJ2LjVoLS43Wm0tMy41IDEgMy40LTEuMS44LS4xdi40bC0zLjUgMS4yaC0uN3YtLjRabTQuMy01LjFjMCAuMyAwIC41LS4yLjhhMS44IDEuOCAwIDAgMS0xIDFsLS45LjFINzZsLTEtLjFhMiAyIDAgMCAxLS42LS41IDEuOCAxLjggMCAwIDEtLjQtMmMwLS4yLjItLjQuNC0uNmwuNi0uM2gxLjJ2M2gtLjZWMTAxbC0uNi4yYTEgMSAwIDAgMC0uNC4zIDEgMSAwIDAgMC0uMi42IDEgMSAwIDAgMCAuNC44bC41LjJoMS40bC41LS4yLjMtLjR2LTEuMmwtLjUtLjUuNC0uNC40LjNjMCAuMi4yLjMuMy41di44Wm0tNC4zLTQuM2guNXYyLjJoLS41di0yLjJabS0xIDEuNXYtLjhoNC41bC4xLS4yVjk4YTEuMiAxLjIgMCAwIDAgMC0uNGguNnYxLjFjLS4xLjEtLjIuMy0uNC4zbC0uNy4yaC00LjJabTEuOS0zLjJINzh2LjhoLTQuMlY5NmguOVptMSAuMnYuM2wtLjgtLjFhMiAyIDAgMCAxLS42LS40IDEuNiAxLjYgMCAwIDEtLjYtMS4yVjk0bC4zLS40LjUtLjNINzh2LjdoLTMuM2wtLjMuMy0uMS41YTEgMSAwIDAgMCAuNC45IDEuNiAxLjYgMCAwIDAgMSAuM1ptMi40LTUuN2MwIC4zIDAgLjYtLjIuOGExLjggMS44IDAgMCAxLTEgMWwtLjkuMkg3NmMtLjQgMC0uNyAwLTEtLjJhMiAyIDAgMCAxLS42LS40IDEuOCAxLjggMCAwIDEtLjQtMmMwLS4zLjItLjUuNC0uNmwuNi0uMy45LS4xaC4zdjMuMWgtLjZ2LTIuNGwtLjYuMWExIDEgMCAwIDAtLjQuMyAxIDEgMCAwIDAtLjIuNiAxIDEgMCAwIDAgLjQuOGwuNS4zaDEuNGwuNS0uMy4zLS40di0xLjJsLS41LS40LjQtLjUuNC40LjMuNXYuN1ptLTEuMi01aC0uM2wtLjMuNC0uMi42LS4xLjYtLjMuNWExIDEgMCAwIDEtLjguNCAxIDEgMCAwIDEtLjQgMGwtLjQtLjRjLS4yLS4xLS4yLS4zLS4zLS41YTIgMiAwIDAgMS0uMS0uNmMwLS40IDAtLjcuMi0xIDAtLjIuMy0uMy41LS41bC42LS4ydi44aC0uM2wtLjMuNC0uMS41di40bC4zLjNhLjYuNiAwIDAgMCAuNSAwbC4yLS4xLjEtLjMuMi0uNS4yLS44LjQtLjUuNi0uMmExLjEgMS4xIDAgMCAxIDEgLjRsLjIuNnYuNmwtLjEgMS0uNS42LS43LjJ2LS44bC41LS4xLjItLjRhMS41IDEuNSAwIDAgMCAwLTFsLS4yLS4zaC0uM1ptMC00LjItLjMuMS0uMy4zLS4yLjYtLjEuNi0uMy41YTEgMSAwIDAgMS0uOC40IDEgMSAwIDAgMS0uNCAwbC0uNC0uNGMtLjItLjEtLjItLjMtLjMtLjVhMiAyIDAgMCAxLS4xLS42YzAtLjQgMC0uNy4yLS45IDAtLjIuMy0uNC41LS42bC42LS4xdi43aC0uM2wtLjMuNC0uMS41di41bC4zLjJhLjYuNiAwIDAgMCAuNSAwaC4ybC4xLS40LjItLjUuMi0uOC40LS41LjYtLjJhMS4xIDEuMSAwIDAgMSAxIC41bC4yLjV2LjZsLS4xIDEtLjUuNi0uNy4yVjgzbC41LS4xLjItLjRhMS41IDEuNSAwIDAgMCAwLTFsLS4yLS4zaC0uM1oiLz48cGF0aCBmaWxsPSIjRkZFRDUzIiBkPSJNODQgNTYuNWgxOHY4OUg4NHoiLz48cGF0aCBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii45IiBkPSJNOTAuMyAxMzYuMmguN2wuMi44YTEuNiAxLjYgMCAwIDAgMSAxbC44LjFoMS41bC41LS4zLjItLjMuMS0uNHYtLjNsLS4zLS4zLS40LS4yYTEuNyAxLjcgMCAwIDAtLjkgMGMtLjEgMC0uMyAwLS40LjJsLS4yLjItLjEuNC4xLjYuNC4zLjQuMi0uMS4zYTIgMiAwIDAgMS0uNy0uMWwtLjUtLjQtLjMtLjVWMTM2LjJsLjUtLjUuNi0uM2EyLjUgMi41IDAgMCAxIDEuNSAwYy4yIDAgLjQuMi42LjQuMi4xLjMuMy40LjZsLjIuN2MwIC4zIDAgLjYtLjIuOC0uMS4zLS4zLjUtLjUuNmwtLjcuNC0uOC4yaC0uNGwtMS4zLS4yYTMgMyAwIDAgMS0xLS41Yy0uMy0uMi0uNS0uNS0uNy0uOWEzIDMgMCAwIDEtLjItMS4zWm01LTUuNmguN3YzLjhoLS42bC0yLTEuOC0uNy0uNWEyIDIgMCAwIDAtLjQtLjIgMS4yIDEuMiAwIDAgMC0uOSAwbC0uMy4zLS4xLjQuMS42LjQuMy41LjF2MWwtLjktLjMtLjYtLjZhMiAyIDAgMCAxLS4zLTFsLjItMWMuMi0uMy4zLS41LjYtLjYuMi0uMi41LS4zLjgtLjNsLjUuMS42LjMuNS4zLjUuNSAxLjMgMS4ydi0yLjZaIi8+PHBhdGggZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNSIgZD0iTTk0LjIgMTI0di0uN2MuNCAwIC43LjIgMSAuNC4yLjEuNS40LjYuNy4yLjMuMy42LjMgMS4xIDAgLjMgMCAuNi0uMiAxYTIgMiAwIDAgMS0uNS42Yy0uMy4yLS41LjQtLjkuNWwtMSAuMWgtLjZsLTEuMS0uMS0uOC0uNWEyIDIgMCAwIDEtLjYtLjdsLS4yLTFjMC0uNC4xLS44LjMtMSAuMS0uNC40LS42LjYtLjdsMS0uNHYuOGwtLjYuMmExIDEgMCAwIDAtLjUuNGwtLjEuNy4xLjdjMCAuMi4yLjQuNC41bC42LjNoMi4yYy4zIDAgLjUtLjIuNy0uM2wuNC0uNC4yLS43YzAtLjMgMC0uNi0uMi0uOGExIDEgMCAwIDAtLjQtLjRsLS43LS4yWm0tNC4yLTIuNGg2di43aC02di0uN1ptNC0xaC0uMmMtLjMgMC0uNSAwLS44LS4yYTIgMiAwIDAgMS0uNy0uNGMtLjItLjEtLjMtLjMtLjQtLjYtLjItLjItLjItLjUtLjItLjggMC0uMyAwLS41LjItLjggMC0uMi4yLS40LjQtLjZsLjctLjRoMS44bC43LjRhMS44IDEuOCAwIDAgMSAuNiAxLjRjMCAuMyAwIC42LS4yLjhhMS44IDEuOCAwIDAgMS0xLjEgMWwtLjkuMlptLS4yLS44aC43Yy4yIDAgLjQtLjIuNS0uMy4yIDAgLjMtLjIuNC0uM1YxMThhMSAxIDAgMCAwLS40LS40bC0uNS0uMmgtMS4ybC0uNS4yYTEgMSAwIDAgMC0uNS45bC4xLjYuNC4zLjUuM2guNVptMS4yLTYuNmgtMy4ydi0uOEg5NnYuN2gtMVptLS45LS4ydi0uM2wuOC4xLjYuMy40LjUuMi44LS4xLjVhMS4xIDEuMSAwIDAgMS0uOC44SDkxLjh2LS43SDk1bC4zLS4yLjEtLjJ2LS4zbC0uMS0uOGExIDEgMCAwIDAtLjUtLjNsLS43LS4yWm0xLTQuNEg5MHYtLjdoNnYuN2gtLjhabS0xLjIgMi45YTMgMyAwIDAgMS0xLS4ybC0uNi0uMy0uNC0uNWMtLjItLjItLjItLjUtLjItLjdsLjEtLjcuNC0uNWMuMi0uMS40LS4zLjctLjNsLjgtLjJoLjRjLjMgMCAuNiAwIC44LjIuMyAwIC41LjIuNi4zbC40LjVhMS43IDEuNyAwIDAgMSAwIDEuNGMwIC4yLS4yLjQtLjQuNS0uMi4yLS41LjMtLjcuM2EzIDMgMCAwIDEtLjkuMlptMC0uOGguNmwuNS0uMmMuMi0uMS4zLS4yLjMtLjRsLjItLjVjMC0uMiAwLS40LS4yLS42bC0uNC0uMy0uNS0uM2gtMWEyIDIgMCAwIDAtLjQuMmwtLjMuMmExIDEgMCAwIDAtLjMuM2wtLjEuNS4xLjUuNC40LjUuMmguNlptMS42LTcuNy0uMS0uNWExIDEgMCAwIDAtLjMtLjMuOC44IDAgMCAwLS40LS4ydi0uN2wuNy4zYTEuNyAxLjcgMCAwIDEgLjcgMS40YzAgLjMgMCAuNi0uMi44LS4xLjMtLjMuNC0uNS42YTIgMiAwIDAgMS0uNi40SDkzYTIgMiAwIDAgMS0uNy0uNGwtLjQtLjZhMiAyIDAgMCAxLS4yLS44YzAtLjMgMC0uNi4yLS45bC41LS42LjgtLjJ2LjdhMSAxIDAgMCAwLS40LjEgMSAxIDAgMCAwLS41LjhsLjEuNi40LjQuNS4yaDEuMmwuNS0uMi40LS40di0uNVptLTEuNi0yLjQtLjktLjFhMiAyIDAgMCAxLS43LS40bC0uNC0uNmMtLjItLjItLjItLjUtLjItLjggMC0uMyAwLS42LjItLjggMC0uMi4yLS40LjQtLjZsLjctLjQuOC0uMWguMWwuOS4xLjcuNGExLjggMS44IDAgMCAxIC42IDEuNGMwIC4zIDAgLjYtLjIuOGExLjggMS44IDAgMCAxLTEuMSAxbC0uOS4xWm0wLS43aC42bC41LS4zYy4yIDAgLjMtLjIuNC0uNHYtMWExIDEgMCAwIDAtLjQtLjRsLS41LS4yaC0xLjJsLS41LjJhMSAxIDAgMCAwLS41LjlsLjEuNS40LjQuNS4yLjUuMVptMS40LTUuMy0zLjUtMS4ydi0uN2w0LjIgMS41di41bC0uNy0uMVptLTMuNSAxIDMuNi0xLjIuNi0uMXYuNWwtNC4yIDEuNXYtLjdabTQuMy01LjNjMCAuMiAwIC41LS4yLjhhMS44IDEuOCAwIDAgMS0xIDFsLS45LjFIOTRjLS40IDAtLjcgMC0xLS4yYTIgMiAwIDAgMS0uNi0uNCAxLjggMS44IDAgMCAxLS40LTJjMC0uMy4yLS40LjQtLjZsLjYtLjNoMS4ydjNoLS42di0yLjRsLS42LjFhMSAxIDAgMCAwLS40LjQgMSAxIDAgMCAwLS4yLjUgMSAxIDAgMCAwIC40LjlsLjUuMmgxLjRjLjIgMCAuMy0uMi41LS4zbC4zLS40di0xLjFsLS41LS41LjQtLjQuNC4zYzAgLjIuMi4zLjMuNXYuOFpNOTIuNCA4N0g5NnYuN2gtNC4yVjg3aC42Wm0tLjctMS4zaC43di44bC4zLjMuMy4yLjQuMS4yLjJoLS44YTIgMiAwIDAgMS0uNS0uM2wtLjUtLjRhMS4xIDEuMSAwIDAgMSAwLTFaIi8+PHBhdGggZmlsbD0iIzdEOEVGRiIgZD0iTTEyMyAzNi41aDE4djEwOWgtMTh6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuOSIgZD0iTTEyOS4zIDEzNS4zaC41bDUuMiAyLjN2MWwtNS0yLjN2M2gtLjd2LTRabTUtMS42di0uMWMwLS40IDAtLjctLjItLjlhMS40IDEuNCAwIDAgMC0xLS45aC0yLjNsLS41LjItLjIuMy0uMS40di4zbC4zLjMuNC4yYTEuOCAxLjggMCAwIDAgMSAwYy4xIDAgLjIgMCAuMy0uMmwuMy0uMi4xLS40YTEgMSAwIDAgMC0uMy0uOCAxLjEgMS4xIDAgMCAwLS43LS4zbC4xLS4zaC42YTEuOCAxLjggMCAwIDEgLjkgMWwuMS42LS4xLjctLjQuNS0uNy4zYTIuNSAyLjUgMCAwIDEtMS40IDAgMiAyIDAgMCAxLS43LS40Yy0uMi0uMS0uMy0uMy0uNC0uNmwtLjItLjdjMC0uNCAwLS42LjItLjlsLjUtLjUuNy0uNCAxLS4xaDEuM2wuOC40LjcuNS41LjguMSAxdi4yaC0uN1oiLz48cGF0aCBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii41IiBkPSJNMTMxLjggMTIzLjhoLjZ2M2gtLjZ2LTNabS0yLjUgM2g1Ljd2LjdoLTUuN3YtLjdabTAtMy42aDUuN3YuN2gtNS43di0uN1ptNC43LTRoLTMuMnYtLjdoNC4ydi43aC0xWm0tLjkgMHYtLjRsLjguMS42LjMuNC41LjIuOC0uMS41YTEuMSAxLjEgMCAwIDEtLjguOEgxMzAuOHYtLjdoMy4ybC4zLS4yLjEtLjN2LS4ybC0uMS0uOGExIDEgMCAwIDAtLjUtLjRoLS43Wm0tMS41LTIuNmgzLjR2LjdoLTQuMnYtLjZoLjhabTEuMS4ydi4zbC0uOC0uMS0uNi0uMy0uNS0uNi0uMS0uN3YtLjZhMS4xIDEuMSAwIDAgMSAuOC0uN2gzLjV2LjZoLTIuOGExIDEgMCAwIDAtLjUuMWwtLjMuNHYxbC4zLjMuNS4yaC41Wm0tLjQtMi44LjIuNS0uNy0uMS0uNi0uMy0uNC0uNi0uMS0uN3YtLjZsLjQtLjQuNC0uM2gzLjV2LjZoLTIuOGwtLjUuMWMtLjIuMS0uMy4yLS4zLjRhMS4yIDEuMiAwIDAgMCAwIC45bC4yLjNhMSAxIDAgMCAwIC43LjJabS0xLjUtNC42aDQuMnYuOGgtNC4ydi0uOFptLTEuMS44aC0uM2wtLjItLjRjMC0uMSAwLS4yLjItLjNsLjMtLjFoLjJsLjIuNGMwIC4xIDAgLjItLjIuM2wtLjIuMVptNC41LTQuN0gxMjl2LS43aDZ2LjdoLS44Wm0tMS4zIDIuOWEzIDMgMCAwIDEtMS0uMWwtLjYtLjRhMS41IDEuNSAwIDAgMS0uNi0xLjJsLjEtLjcuNC0uNWMuMi0uMS40LS4zLjctLjNsLjgtLjJoLjRjLjMgMCAuNiAwIC44LjIuMyAwIC41LjIuNi4zbC40LjVhMS43IDEuNyAwIDAgMSAwIDEuNGMwIC4yLS4yLjQtLjQuNWwtLjcuNGEzIDMgMCAwIDEtLjkgMFptMC0uOGguNmwuNS0uMmMuMi0uMS4zLS4yLjMtLjRsLjItLjVhMSAxIDAgMCAwLS42LTFsLS41LS4yaC0xbC0uNC4yLS4zLjJhMSAxIDAgMCAwLS4zLjN2MWwuNC40LjUuMmguNlptLTIuMS00LjhoNC4ydi43aC00LjJ2LS43Wm0tMS4xLjgtLjMtLjEtLjItLjNjMC0uMiAwLS4zLjItLjRoLjVsLjIuNHMwIC4yLS4yLjNoLS4yWm0xLTMuOGguNnYyLjNoLS41di0yLjNabS0xIDEuNXYtLjdoNC4zbC4zLS4xLjEtLjJ2LS41aC42YTEuOCAxLjggMCAwIDEgMCAuNXYuNWwtLjQuNGgtNC45Wm00LjktMy42LTMuOC0xLjJ2LS44bDQuOSAxLjdhMi43IDIuNyAwIDAgMSAuNi40bC4zLjRhMSAxIDAgMCAxIDAgLjd2LjJoLS41YTEuOSAxLjkgMCAwIDAgMC0uN2wtLjMtLjItLjQtLjItLjgtLjNabS0zLjguOCAzLjMtMSAuNy0uMy4zLjYtNC4zIDEuNXYtLjhaIi8+PHBhdGggZmlsbD0iI0Y5NkZGRiIgZD0iTTE0MSA3Ny41aDE4djY4aC0xOHoiLz48cGF0aCBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii45IiBkPSJtMTUwLjQgMTM4LS4yLjgtMi45LS4zdi0zaC44djIuMmwxLjQuMmExLjggMS44IDAgMCAxLS4yLS45bC4xLS43YzAtLjIuMi0uNC40LS42bC42LS4zYTIuNSAyLjUgMCAwIDEgMS41IDBsLjYuMy40LjYuMi44LS4xLjctLjMuNi0uNS40LS43LjJ2LTFoLjRsLjMtLjQuMS0uNXYtLjRsLS4zLS4yYTEgMSAwIDAgMC0uNC0uMiAxLjggMS44IDAgMCAwLTEgMCAxIDEgMCAwIDAtLjMuMmwtLjIuM3YxbC4zLjNabS0uNy03LjNoMWMuNCAwIC43IDAgMSAuMi40IDAgLjYuMi44LjNsLjQuNi4yLjgtLjEuNmExLjUgMS41IDAgMCAxLS44IDFsLS42LjJoLTNhMiAyIDAgMCAxLS44LS41bC0uNC0uNS0uMi0uOC4xLS42YTEuNSAxLjUgMCAwIDEgLjgtMWwuNi0uMmgxWm0xIDFoLTEuMmE0IDQgMCAwIDAtLjYgMGwtLjQuMS0uMy4yLS4yLjN2LjdsLjMuMy41LjJoMi41bC41LS4xLjMtLjIuMi0uM3YtLjdsLS4zLS4zLS41LS4yYTQgNCAwIDAgMC0uOCAwWiIvPjxwYXRoIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iLjUiIGQ9Ik0xNTEuNiAxMjQuNWExIDEgMCAwIDAtLjQgMGwtLjMuMy0uMi40LS4yLjYtLjMuOC0uNC42LS40LjRoLS42YTEuNCAxLjQgMCAwIDEtMS4xLS40Yy0uMi0uMi0uMy0uNC0uMy0uN2wtLjItLjdjMC0uNS4xLS44LjMtMS4xLjEtLjMuNC0uNi42LS43LjMtLjIuNi0uMi45LS4ydi43bC0uNi4xYTEgMSAwIDAgMC0uNC41bC0uMS43di42bC40LjQuNS4xaC4zbC4zLS4zLjItLjQuMi0uNi4zLS44Yy4xLS4zLjItLjUuNC0uNi4xLS4yLjMtLjMuNS0uM2wuNi0uMmMuMiAwIC40IDAgLjYuMi4yIDAgLjMuMi41LjRsLjMuNmEzIDMgMCAwIDEgMCAxLjZsLS40LjctLjUuNS0uNy4ydi0uOGguNWMwLS4yLjItLjMuMy0uNGwuMi0uNWEyLjIgMi4yIDAgMCAwIDAtMS4xbC0uNC0uNWEuOC44IDAgMCAwLS40LS4xWm0tLjctMS41LS45LS4xYTIgMiAwIDAgMS0uNy0uNGwtLjQtLjZjLS4yLS4yLS4yLS41LS4yLS44IDAtLjMgMC0uNi4yLS44IDAtLjIuMi0uNC40LS42bC43LS40LjgtLjFoLjFsLjkuMS43LjRhMS44IDEuOCAwIDAgMSAuNiAxLjRjMCAuMyAwIC42LS4yLjhhMS44IDEuOCAwIDAgMS0xLjEgMWwtLjkuMVptMC0uN2guNmwuNS0uMy40LS40di0xYTEgMSAwIDAgMC0uNC0uNGwtLjUtLjItLjYtLjFoLS42bC0uNS4zYTEgMSAwIDAgMC0uNS45bC4xLjUuNC40LjUuMi41LjFabS0yLjEtNC45aDQuMnYuOGgtNC4ydi0uOFptLTEuMS44aC0uM2wtLjItLjRjMC0uMiAwLS4zLjItLjNsLjMtLjFoLjJsLjIuNGMwIC4xIDAgLjItLjIuM2wtLjIuMVptLS43LTIuOGg2di44aC02di0uOFptMi42LTRoMy40di44aC00LjJ2LS43aC44Wm0xLjEuMnYuM2gtLjhsLS42LS40LS41LS41LS4xLS44di0uNWExLjEgMS4xIDAgMCAxIC44LS43bC43LS4xaDIuOHYuN2gtMi44YTEgMSAwIDAgMC0uNS4xbC0uMy4zdjFjMCAuMi4yLjMuMy40bC41LjJoLjVabS0uNC0yLjcuMi41Yy0uMyAwLS41IDAtLjctLjJsLS42LS4zLS40LS41LS4xLS43di0uNmwuNC0uNS40LS4zaDMuNXYuN2gtMi44bC0uNS4xYy0uMiAwLS4zLjItLjMuM2ExLjIgMS4yIDAgMCAwIDAgMWwuMi4yLjMuMmguNFptLjYtMy42LS45LS4xYTIgMiAwIDAgMS0uNy0uNGwtLjQtLjZjLS4yLS4zLS4yLS41LS4yLS44IDAtLjMgMC0uNi4yLS44IDAtLjMuMi0uNS40LS42bC43LS40LjgtLjFoMWwuNy41YTEuOCAxLjggMCAwIDEgLjYgMS40YzAgLjMgMCAuNS0uMi44YTEuOCAxLjggMCAwIDEtMS4xIDFsLS45LjFabTAtLjcuNi0uMS41LS4yLjQtLjR2LTFhMSAxIDAgMCAwLS40LS40bC0uNS0uMi0uNi0uMWgtLjZsLS41LjNhMSAxIDAgMCAwLS41LjlsLjEuNS40LjQuNS4yaC41Wm0tMi4xLTQuOWg0LjJ2LjdoLTQuMnYtLjdabS0xLjEuOC0uMy0uMS0uMi0uM2MwLS4yIDAtLjMuMi0uNGguNWwuMi40YzAgLjEgMCAuMi0uMi4zaC0uMlptNC4yLTQuNS0uMy4xLS4zLjMtLjIuNi0uMS42YzAgLjItLjIuNC0uMy41YTEgMSAwIDAgMS0uOC40IDEgMSAwIDAgMS0uNCAwbC0uNC0uNGMtLjItLjEtLjItLjMtLjMtLjVhMiAyIDAgMCAxLS4xLS42YzAtLjQgMC0uNy4yLTFsLjUtLjUuNi0uMXYuN2gtLjNsLS4zLjQtLjEuNXYuNGwuMy4zYS42LjYgMCAwIDAgLjUgMGguMmwuMS0uNC4yLS41LjItLjguNC0uNS42LS4yYTEuMSAxLjEgMCAwIDEgMSAuNWwuMi41di42bC0uMSAxLS41LjYtLjcuMnYtLjhsLjUtLjEuMi0uNGExLjUgMS41IDAgMCAwIDAtMWwtLjItLjNoLS4zWm0tMy4xLTMuNWguNXYyLjNoLS41di0yLjNabS0xIDEuNXYtLjdoNC41bC4xLS4yVjkyLjVoLjZhMS44IDEuOCAwIDAgMSAwIC42di41bC0uNC4zLS43LjFoLTQuMlptNC4yLTVoLTMuMnYtLjdoNC4ydi43aC0xWm0tLjkgMHYtLjRsLjguMS42LjMuNC41LjIuOC0uMS41YTEuMSAxLjEgMCAwIDEtLjguOEgxNDguOFY5MWgzLjJsLjMtLjIuMS0uM3YtLjNsLS4xLS43YTEgMSAwIDAgMC0uNS0uNGgtLjdabS0xLjctMi42aDMuNnYuOGgtNC4ydi0uN2guNlptLS43LTEuM2guN3YuOGwuMy4zLjMuM2guNGwuMi4zLS44LS4xYTIgMiAwIDAgMS0uNi0uM2wtLjQtLjRhMS4xIDEuMSAwIDAgMSAwLS45Wm00LjQtMi40YzAgLjMgMCAuNi0uMi44YTEuOCAxLjggMCAwIDEtMSAxbC0uOS4yaC0uMWMtLjQgMC0uNyAwLTEtLjJhMiAyIDAgMCAxLS42LS40IDEuOCAxLjggMCAwIDEtLjYtMS4zYzAtLjMgMC0uNS4yLS44IDAtLjIuMi0uNC40LS41bC42LS4zLjktLjFoLjN2My4xaC0uNnYtMi40bC0uNi4xYTEgMSAwIDAgMC0uNC4zIDEgMSAwIDAgMC0uMi42IDEgMSAwIDAgMCAuNC44bC41LjNoMS40bC41LS4zLjMtLjRWODJsLS41LS40LjQtLjUuNC40LjMuNXYuN1oiLz48cGF0aCBmaWxsPSIjRkZBMzg5IiBkPSJNMTU5IDQ3LjVoMTh2OThoLTE4eiIvPjxwYXRoIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iLjkiIGQ9Ik0xNjUuMyAxMzUuM2guNWw1LjIgMi4zdjFsLTUtMi4zdjNoLS43di00Wm0yLjQtNC42aDFjLjQgMCAuNyAwIDEgLjIuNCAwIC42LjIuOC4zbC40LjYuMi44LS4xLjZhMS41IDEuNSAwIDAgMS0uOCAxbC0uNi4yaC0zYTIgMiAwIDAgMS0uOC0uNWwtLjQtLjUtLjItLjguMS0uNmExLjUgMS41IDAgMCAxIC44LTFsLjYtLjJoMVptMSAxaC0xLjJhNCA0IDAgMCAwLS42IDBsLS40LjEtLjMuMi0uMi4zdi43bC4zLjMuNS4yaDIuNWwuNS0uMS4zLS4yLjItLjN2LS43bC0uMy0uMy0uNS0uMmE0IDQgMCAwIDAtLjggMFoiLz48cGF0aCBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii41IiBkPSJNMTcwLjQgMTI0aC42djNoLS42di0zWm0tNSAyLjhoNS42di43aC01Ljd2LS43Wm01LjctNS4zYzAgLjMgMCAuNi0uMi44YTEuOCAxLjggMCAwIDEtMSAxbC0uOS4yaC0uMWMtLjQgMC0uNyAwLTEtLjJhMiAyIDAgMCAxLS42LS40IDEuOCAxLjggMCAwIDEtLjQtMmMwLS4zLjItLjUuNC0uNmwuNi0uMy45LS4xaC4zdjMuMWgtLjZ2LTIuNGwtLjYuMWExIDEgMCAwIDAtLjQuMyAxIDEgMCAwIDAtLjIuNiAxIDEgMCAwIDAgLjQuOGwuNS4yLjcuMWguN2wuNS0uMy4zLS40di0xLjJsLS41LS40LjQtLjUuNC40LjMuNXYuN1ptLS44LTVoLTIuNmMtLjIuMS0uMy4yLS4zLjRsLS4xLjV2LjVsLjMuM2guM3YuOGExIDEgMCAwIDEtLjQtLjFjLS4yIDAtLjMtLjItLjQtLjNsLS4zLS42YTIgMiAwIDAgMS0uMS0uN2MwLS4zIDAtLjUuMi0uOCAwLS4yLjItLjQuNC0uNS4yLS4yLjUtLjIuOC0uMmgyLjRsLjQtLjJoLjF2LjhoLS43Wm0tMS45LS4xaC41di43bC4xLjUuMS40LjMuM2guN2wuMy0uM3YtLjRhMS4yIDEuMiAwIDAgMC0uNC0xIC43LjcgMCAwIDAtLjQtLjJsLjMtLjMuNC4yYTEuNyAxLjcgMCAwIDEgLjYgMi4xbC0uNC41LS43LjItLjYtLjEtLjQtLjQtLjMtLjZ2LTEuNlptMi42LTN2LjhoLTQuN2MtLjMgMC0uNSAwLS43LS4yLS4zIDAtLjQtLjItLjUtLjRsLS4yLS44YTIgMiAwIDAgMSAwLS41aC43di45bC4zLjJIMTcxWm0tNC4yLS44aC41djIuM2gtLjV2LTIuM1ptMy40LTQtMy40LTF2LS41aC43bDMuNSAxLjJ2LjRoLS44Wm0tMy40LjggMy41LTFoLjd2LjRsLTQuMiAxLjN2LS43Wm0zLjUtMy40LTMuNS0uOXYtLjdsNC4yIDEuMnYuNWgtLjdabS0zLjUgMSAzLjQtMS4xLjgtLjF2LjRsLTMuNSAxLjJoLS43di0uNFptNC4zLTUuMWMwIC4zIDAgLjUtLjIuOGExLjggMS44IDAgMCAxLTEgMWwtLjkuMWgtLjFsLTEtLjFhMiAyIDAgMCAxLS42LS41IDEuOCAxLjggMCAwIDEtLjQtMmMwLS4yLjItLjQuNC0uNmwuNi0uM2gxLjJ2M2gtLjZWMTAxbC0uNi4yYTEgMSAwIDAgMC0uNC4zIDEgMSAwIDAgMC0uMi42IDEgMSAwIDAgMCAuNC44bC41LjJoMS40bC41LS4yYzAtLjIuMi0uMy4zLS40di0xLjJsLS41LS41LjQtLjQuNC4zYzAgLjIuMi4zLjMuNXYuOFptLTQuMy00LjNoLjV2Mi4yaC0uNXYtMi4yWm0tMSAxLjV2LS44aDQuNWwuMS0uMlY5Ny41aC42YTEuOCAxLjggMCAwIDEgMCAuNnYuNWMtLjEuMS0uMi4zLS40LjNsLS43LjJoLTQuMlptMS45LTMuMmgzLjN2LjhoLTQuMlY5NmguOVptMSAuMnYuM2wtLjgtLjFhMiAyIDAgMCAxLS42LS40IDEuNiAxLjYgMCAwIDEtLjYtMS4yVjk0bC4zLS40LjUtLjNoMy41di43aC0zLjNsLS4zLjN2LjVhMSAxIDAgMCAwIC4zLjkgMS42IDEuNiAwIDAgMCAxIC4zWm0yLjQtNS43YzAgLjMgMCAuNi0uMi44YTEuOCAxLjggMCAwIDEtMSAxbC0uOS4yaC0uMWMtLjQgMC0uNyAwLTEtLjJhMiAyIDAgMCAxLS42LS40IDEuOCAxLjggMCAwIDEtLjYtMS4zYzAtLjMgMC0uNS4yLS44IDAtLjIuMi0uNC40LS41bC42LS4zLjktLjFoLjN2My4xaC0uNnYtMi40bC0uNi4xYTEgMSAwIDAgMC0uNC4zIDEgMSAwIDAgMC0uMi42IDEgMSAwIDAgMCAuNC44bC41LjNoMS40bC41LS4zLjMtLjR2LTEuMmwtLjUtLjQuNC0uNS40LjQuMy41di43Wm0tMS4yLTVoLS4zbC0uMy40LS4yLjYtLjEuNmMwIC4yLS4yLjQtLjMuNWExIDEgMCAwIDEtLjguNCAxIDEgMCAwIDEtLjQgMGwtLjQtLjRjLS4yLS4xLS4yLS4zLS4zLS41YTIgMiAwIDAgMS0uMS0uNmMwLS40IDAtLjcuMi0xIDAtLjIuMy0uMy41LS41bC42LS4ydi44aC0uM2wtLjMuNC0uMS41di40bC4zLjNhLjYuNiAwIDAgMCAuNSAwbC4yLS4xLjEtLjMuMi0uNS4yLS44LjQtLjUuNi0uMmExLjEgMS4xIDAgMCAxIDEgLjRsLjIuNnYuNmwtLjEgMS0uNS42LS43LjJ2LS44bC41LS4xLjItLjRhMS41IDEuNSAwIDAgMCAwLTFsLS4yLS4zaC0uM1ptMC00LjItLjMuMS0uMy4zLS4yLjYtLjEuNmMwIC4yLS4yLjQtLjMuNWExIDEgMCAwIDEtLjguNCAxIDEgMCAwIDEtLjQgMGwtLjQtLjRjLS4yLS4xLS4yLS4zLS4zLS41YTIgMiAwIDAgMS0uMS0uNmMwLS40IDAtLjcuMi0uOSAwLS4yLjMtLjQuNS0uNmwuNi0uMXYuN2gtLjNsLS4zLjQtLjEuNXYuNWwuMy4yYS42LjYgMCAwIDAgLjUgMGguMmwuMS0uNC4yLS41LjItLjguNC0uNS42LS4yYTEuMSAxLjEgMCAwIDEgMSAuNWwuMi41di42bC0uMSAxLS41LjYtLjcuMlY4M2wuNS0uMS4yLS40YTEuNSAxLjUgMCAwIDAgMC0xbC0uMi0uM2gtLjNaIi8+PHBhdGggZmlsbD0iI0ZGRUQ1MyIgZD0iTTE3NyA2Mi41aDE4djgzaC0xOHoiLz48cGF0aCBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii45IiBkPSJNMTgzLjMgMTM2LjJoLjdsLjIuOGExLjYgMS42IDAgMCAwIDEgMWwuOC4xaDEuNWwuNS0uMy4yLS4zLjEtLjR2LS4zbC0uMy0uMy0uNC0uMmExLjcgMS43IDAgMCAwLS45IDBjLS4xIDAtLjMgMC0uNC4ybC0uMi4yLS4xLjQuMS42LjQuMy40LjItLjEuM2EyIDIgMCAwIDEtLjctLjFsLS41LS40LS4zLS41VjEzNi4ybC41LS41LjYtLjNhMi41IDIuNSAwIDAgMSAxLjUgMGMuMiAwIC40LjIuNi40LjIuMS4zLjMuNC42bC4yLjdjMCAuMyAwIC42LS4yLjgtLjEuMy0uMy41LS41LjZsLS43LjQtLjguMmgtLjRsLTEuMy0uMmEzIDMgMCAwIDEtMS0uNWMtLjMtLjItLjUtLjUtLjctLjlhMyAzIDAgMCAxLS4yLTEuM1ptMi40LTUuNWgxYy40IDAgLjcgMCAxIC4yLjQgMCAuNi4yLjguM2wuNC42LjIuOC0uMS42YTEuNSAxLjUgMCAwIDEtLjggMWwtLjYuMmgtM2EyIDIgMCAwIDEtLjgtLjVsLS40LS41LS4yLS44LjEtLjZhMS41IDEuNSAwIDAgMSAuOC0xbC42LS4yaDFabTEgMWgtMS4yYTQgNCAwIDAgMC0uNiAwbC0uNC4xLS4zLjItLjIuM3YuN2wuMy4zLjUuMmgyLjVsLjUtLjEuMy0uMi4yLS4zdi0uN2wtLjMtLjMtLjUtLjJhNCA0IDAgMCAwLS44IDBaIi8+PHBhdGggZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNSIgZD0iTTE4Ny4yIDEyNHYtLjdjLjQgMCAuNy4yIDEgLjQuMi4xLjUuNC42LjcuMi4zLjMuNi4zIDEuMSAwIC4zIDAgLjYtLjIgMWEyIDIgMCAwIDEtLjUuNmwtLjkuNS0xIC4xaC0uNmwtMS4xLS4xLS44LS41YTIgMiAwIDAgMS0uNi0uN2wtLjItMWMwLS40LjEtLjguMy0xIC4xLS40LjQtLjYuNi0uN2wxLS40di44bC0uNi4yYTEgMSAwIDAgMC0uNS40bC0uMS43LjEuN2MwIC4yLjIuNC40LjVsLjYuM2gyLjJjLjMgMCAuNS0uMi43LS4zbC40LS40LjItLjdjMC0uMyAwLS42LS4yLS44YTEgMSAwIDAgMC0uNC0uNGwtLjctLjJabS00LjItMi40aDZ2LjdoLTZ2LS43Wm00LTFoLS4yYy0uMyAwLS41IDAtLjgtLjJhMiAyIDAgMCAxLS43LS40Yy0uMi0uMS0uMy0uMy0uNC0uNi0uMi0uMi0uMi0uNS0uMi0uOCAwLS4zIDAtLjUuMi0uOCAwLS4yLjItLjQuNC0uNmwuNy0uNGgxLjhsLjcuNGExLjggMS44IDAgMCAxIC42IDEuNGMwIC4zIDAgLjYtLjIuOGExLjggMS44IDAgMCAxLTEuMSAxbC0uOS4yWm0tLjItLjhoLjdjLjIgMCAuNC0uMi41LS4zLjIgMCAuMy0uMi40LS4zVjExOGExIDEgMCAwIDAtLjQtLjRsLS41LS4yaC0xLjJsLS41LjJhMSAxIDAgMCAwLS41LjlsLjEuNi40LjMuNS4zaC41Wm0xLjItNi42aC0zLjJ2LS44aDQuMnYuN2gtMVptLS45LS4ydi0uM2wuOC4xLjYuMy40LjUuMi44LS4xLjVhMS4xIDEuMSAwIDAgMS0uOC44SDE4NC44di0uN2gzLjJsLjMtLjIuMS0uMnYtLjNsLS4xLS44YTEgMSAwIDAgMC0uNS0uM2wtLjctLjJabTEtNC40SDE4M3YtLjdoNnYuN2gtLjhabS0xLjIgMi45YTMgMyAwIDAgMS0xLS4ybC0uNi0uM2ExLjUgMS41IDAgMCAxLS42LTEuMmwuMS0uNy40LS41Yy4yLS4xLjQtLjMuNy0uM2wuOC0uMmguNGMuMyAwIC42IDAgLjguMi4zIDAgLjUuMi42LjNsLjQuNWExLjcgMS43IDAgMCAxIDAgMS40YzAgLjItLjIuNC0uNC41LS4yLjItLjUuMy0uNy4zYTMgMyAwIDAgMS0uOS4yWm0wLS44aC42bC41LS4yYy4yLS4xLjMtLjIuMy0uNGwuMi0uNWExIDEgMCAwIDAtLjYtMWwtLjUtLjJoLTFhMiAyIDAgMCAwLS40LjJsLS4zLjJhMSAxIDAgMCAwLS40LjhsLjEuNS40LjQuNS4yaC42Wm0xLjYtNy43LS4xLS41YTEgMSAwIDAgMC0uMy0uMy44LjggMCAwIDAtLjQtLjJ2LS43bC43LjNhMS43IDEuNyAwIDAgMSAuNyAxLjRjMCAuMyAwIC42LS4yLjgtLjEuMy0uMy40LS41LjZhMiAyIDAgMCAxLS42LjRIMTg2YTIgMiAwIDAgMS0uNy0uNGwtLjQtLjZhMiAyIDAgMCAxLS4yLS44YzAtLjMgMC0uNi4yLS45bC41LS42LjgtLjJ2LjdhMSAxIDAgMCAwLS40LjEgMSAxIDAgMCAwLS41LjhsLjEuNi40LjQuNS4yaDEuMmwuNS0uMmMuMiAwIC4zLS4yLjQtLjR2LS41Wm0tMS42LTIuNC0uOS0uMWEyIDIgMCAwIDEtLjctLjRsLS40LS42Yy0uMi0uMi0uMi0uNS0uMi0uOCAwLS4zIDAtLjYuMi0uOCAwLS4yLjItLjQuNC0uNmwuNy0uNC44LS4xaC4xbC45LjEuNy40YTEuOCAxLjggMCAwIDEgLjYgMS40YzAgLjMgMCAuNi0uMi44IDAgLjItLjIuNC0uNC42YTIgMiAwIDAgMS0uNy40bC0uOS4xWm0wLS43aC42bC41LS4zYy4yIDAgLjMtLjIuNC0uNHYtMWExIDEgMCAwIDAtLjQtLjRsLS41LS4yaC0xLjJsLS41LjJhMSAxIDAgMCAwLS41LjlsLjEuNS40LjQuNS4yLjUuMVptMS40LTUuMy0zLjUtMS4ydi0uN2w0LjIgMS41di41bC0uNy0uMVptLTMuNSAxIDMuNi0xLjIuNi0uMXYuNWwtNC4yIDEuNXYtLjdabTQuMy01LjNjMCAuMiAwIC41LS4yLjhhMS44IDEuOCAwIDAgMS0xIDFsLS45LjFoLS4xYy0uNCAwLS43IDAtMS0uMmEyIDIgMCAwIDEtLjYtLjQgMS44IDEuOCAwIDAgMS0uNi0xLjNjMC0uMyAwLS41LjItLjcgMC0uMy4yLS40LjQtLjZsLjYtLjNoMS4ydjNoLS42di0yLjRsLS42LjFhMSAxIDAgMCAwLS40LjQgMSAxIDAgMCAwLS4yLjUgMSAxIDAgMCAwIC40LjlsLjUuMmgxLjRjLjIgMCAuMy0uMi41LS4zbC4zLS40di0xLjFsLS41LS41LjQtLjQuNC4zYzAgLjIuMi4zLjMuNXYuOFptLTMuNy0zLjNoMy42di43aC00LjJWODdoLjZabS0uNy0xLjNoLjd2LjhsLjMuMy4zLjIuNC4xLjIuMmgtLjhhMiAyIDAgMCAxLS42LS4zbC0uNC0uNGExLjEgMS4xIDAgMCAxIDAtMVpNNjEuNSAxNTQuM3YtNGguOHY0YzAgLjQgMCAuNy0uMiAxbC0uNy42YTIgMiAwIDAgMS0uOS4yYy0uMyAwLS43IDAtMS0uMmwtLjYtLjUtLjItMWguOHYuNmwuNS40YTEuMyAxLjMgMCAwIDAgMSAwbC40LS40LjEtLjdabTQuNiAxVjE1M2wtLjEtLjRjMC0uMi0uMi0uMy0uMy0uM2ExIDEgMCAwIDAtLjUtLjFoLS41bC0uMy4zLS4xLjNoLS43di0uNGwuNC0uNC42LS4zLjctLjFjLjMgMCAuNSAwIC44LjIuMiAwIC40LjIuNS40LjIuMi4yLjUuMi44djIuNGwuMi40di4xaC0uOHYtLjNsLS4xLS40Wm0uMS0xLjl2LjVoLS43bC0uNS4xLS41LjEtLjIuM3YuN2wuMy4zaC40YTEuMiAxLjIgMCAwIDAgMS0uNGwuMi0uNC4zLjMtLjIuNGExLjcgMS43IDAgMCAxLS44LjdINjQuMmwtLjUtLjVjLS4yLS4yLS4yLS40LS4yLS43bC4xLS42LjQtLjQuNi0uM2gxLjZabTIuNi0uN3YzLjNoLS43di00LjJoLjd2LjlabS0uMSAxaC0uM3YtLjhsLjQtLjZhMS42IDEuNiAwIDAgMSAxLjMtLjZoLjVsLjUuMy4yLjUuMS43djIuOGgtLjd2LTMuM2wtLjQtLjNhMSAxIDAgMCAwLS40IDAgMSAxIDAgMCAwLTEgLjMgMS42IDEuNiAwIDAgMC0uMiAxWk0xNTQgMTUwLjN2NS43aC0uOHYtNS43aC43Wm0yLjMgMi42di42aC0yLjZ2LS42aDIuNlptLjQtMi42di42aC0zdi0uNmgzWm0yLjYgNS44YTEuOCAxLjggMCAwIDEtMS44LTEuMmwtLjItLjl2LS4xYzAtLjQgMC0uNy4yLTFsLjQtLjZhMS44IDEuOCAwIDAgMSAyLS40Yy4zIDAgLjUuMi42LjRsLjMuNi4xLjl2LjNoLTMuMXYtLjZoMi40bC0uMS0uNmExIDEgMCAwIDAtLjMtLjQgMSAxIDAgMCAwLS42LS4yIDEgMSAwIDAgMC0uOC40bC0uMi41LS4xLjd2LjdsLjMuNS40LjNoMS4ybC40LS41LjUuNC0uNC40LS41LjNhMiAyIDAgMCAxLS43IDBabTIuNi02LjFoLjd2NmgtLjd2LTZabTMuNiAzLjktLjEuOS0uMy43LS41LjQtLjcuMmMtLjMgMC0uNiAwLS44LS4yLS4yIDAtLjMtLjItLjUtLjRhMiAyIDAgMCAxLS4zLS42IDQgNCAwIDAgMS0uMi0uOHYtLjRsLjItLjhjMC0uMy4yLS41LjMtLjdsLjUtLjQuNy0uMWMuMyAwIC41IDAgLjguMi4yIDAgLjMuMi41LjRsLjMuNy4xLjlabS0uNyAwdi0uNmwtLjMtLjVhMSAxIDAgMCAwLS44LS41bC0uNS4xYTEgMSAwIDAgMC0uNC4zbC0uMi4zLS4xLjR2MWwuMi41YzAgLjIuMi4zLjQuNGwuNi4yYy4yIDAgLjMgMCAuNS0uMmwuMy0uMy4yLS41di0uNloiLz48L3N2Zz4=", + "description": "Displays changes to time-series data over time visualized with value bars and labels — for example, daily water consumption for the last month.", + "descriptor": { + "type": "timeseries", + "sizeX": 8, + "sizeY": 5, + "resources": [], + "templateHtml": "\n", + "templateCss": ".legend {\n font-size: 13px;\n line-height: 10px;\n}\n\n.legend table { \n border-spacing: 0px;\n border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n cursor: crosshair; \n}\n\n", + "controllerScript": "self.onInit = function() {\n self.ctx.$scope.barChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n self.ctx.$scope.barChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n return {\n previewWidth: '80%',\n embedTitlePanel: true,\n hasAdditionalLatestDataKeys: false,\n defaultDataKeysFunction: function() {\n return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n }\n };\n}\n", + "settingsSchema": "{}", + "dataKeySettingsSchema": "{}", + "latestDataKeySettingsSchema": "{}", + "settingsDirective": "tb-bar-chart-with-labels-widget-settings", + "dataKeySettingsDirective": "", + "latestDataKeySettingsDirective": "", + "hasBasicMode": true, + "basicModeDirective": "tb-bar-chart-with-labels-basic-config", + "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Humidity\",\"color\":\"rgb(125, 142, 255)\",\"settings\":{},\"_hash\":0.8587686344902596,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nif (value < 50) {\\n\\tvalue = 50;\\n} else if (value > 80) {\\n\\tvalue = 80;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Soil moisture\",\"color\":\"rgb(249, 111, 255)\",\"settings\":{},\"_hash\":0.9111685461089025,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nif (value < 30) {\\n\\tvalue = 30;\\n} else if (value > 90) {\\n\\tvalue = 90;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Leaf wetness\",\"color\":\"rgb(255, 163, 137)\",\"settings\":{},\"_hash\":0.8487533373085416,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nif (value < 40) {\\n\\tvalue = 40;\\n} else if (value > 70) {\\n\\tvalue = 70;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Cloud cover\",\"color\":\"#FFED53\",\"settings\":{},\"_hash\":0.7690144858984289,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nif (value < 20) {\\n\\tvalue = 20;\\n} else if (value > 60) {\\n\\tvalue = 60;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"hideInterval\":false,\"hideLastInterval\":false,\"hideQuickInterval\":false,\"hideAggregation\":false,\"hideAggInterval\":false,\"hideTimezone\":false,\"selectedTab\":1,\"history\":{\"historyType\":2,\"timewindowMs\":60000,\"interval\":2592000000,\"fixedTimewindow\":{\"startTimeMs\":1704293713163,\"endTimeMs\":1704380113163},\"quickInterval\":\"CURRENT_HALF_YEAR\"},\"aggregation\":{\"type\":\"AVG\",\"limit\":25000},\"timezone\":null},\"showTitle\":true,\"backgroundColor\":\"rgba(0, 0, 0, 0)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"showBarLabel\":true,\"barLabelFont\":{\"family\":\"Roboto\",\"size\":12,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"400\",\"lineHeight\":\"12px\"},\"barLabelColor\":\"rgba(0, 0, 0, 0.54)\",\"showBarValue\":true,\"barValueFont\":{\"family\":\"Roboto\",\"size\":12,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"700\",\"lineHeight\":\"12px\"},\"barValueColor\":\"rgba(0, 0, 0, 0.76)\",\"showLegend\":true,\"legendPosition\":\"top\",\"legendLabelFont\":{\"family\":\"Roboto\",\"size\":12,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"400\",\"lineHeight\":\"16px\"},\"legendLabelColor\":\"rgba(0, 0, 0, 0.76)\",\"showTooltip\":true,\"tooltipValueFont\":{\"family\":\"Roboto\",\"size\":12,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"16px\"},\"tooltipValueColor\":\"rgba(0, 0, 0, 0.76)\",\"tooltipShowDate\":true,\"tooltipDateFormat\":{\"format\":\"MMMM y\",\"lastUpdateAgo\":false,\"custom\":true},\"tooltipDateFont\":{\"family\":\"Roboto\",\"size\":11,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"400\",\"lineHeight\":\"16px\"},\"tooltipDateColor\":\"rgba(0, 0, 0, 0.76)\",\"tooltipBackgroundColor\":\"rgba(255, 255, 255, 0.76)\",\"tooltipBackgroundBlur\":4,\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}}},\"title\":\"Bar chart with labels\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":null,\"mobileHeight\":null,\"configMode\":\"basic\",\"actions\":{},\"showTitleIcon\":false,\"titleIcon\":\"public\",\"iconColor\":\"#1F6BDD\",\"useDashboardTimewindow\":false,\"displayTimewindow\":true,\"titleFont\":{\"size\":16,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":\"normal\",\"lineHeight\":\"24px\"},\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"units\":\"%\",\"decimals\":0,\"noDataDisplayMessage\":\"\",\"timewindowStyle\":{\"showIcon\":false,\"iconSize\":\"24px\",\"icon\":null,\"iconPosition\":\"left\",\"font\":{\"size\":12,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"400\",\"style\":\"normal\",\"lineHeight\":\"16px\"},\"color\":\"rgba(0, 0, 0, 0.38)\",\"displayTypePrefix\":true},\"margin\":\"0px\",\"borderRadius\":\"0px\",\"iconSize\":\"24px\"}" + }, + "tags": [ + "bar chart", + "bar", + "bars" + ] +} \ No newline at end of file diff --git a/ui-ngx/src/app/core/api/data-aggregator.ts b/ui-ngx/src/app/core/api/data-aggregator.ts index 72a500e084..9351e410a8 100644 --- a/ui-ngx/src/app/core/api/data-aggregator.ts +++ b/ui-ngx/src/app/core/api/data-aggregator.ts @@ -136,6 +136,8 @@ const none: AggFunction = (aggData: AggData, value?: any) => { aggData.aggValue = value; }; +const MAX_INTERVAL_TIMEOUT = Math.pow(2,31)-1; + export class DataAggregator { constructor(private onDataCb: onAggregatedData, @@ -217,7 +219,7 @@ export class DataAggregator { this.aggregationTimeout = this.isLatestDataAgg ? 1000 : Math.max(this.subsTw.aggregation.interval, 1000); this.resetPending = true; this.updatedData = false; - this.intervalTimeoutHandle = setTimeout(this.onInterval.bind(this), this.aggregationTimeout); + this.intervalTimeoutHandle = setTimeout(this.onInterval.bind(this), Math.min(this.aggregationTimeout, MAX_INTERVAL_TIMEOUT)); } public destroy() { @@ -313,7 +315,7 @@ export class DataAggregator { this.updatedData = false; } if (!history) { - this.intervalTimeoutHandle = setTimeout(this.onInterval.bind(this), intervalTimeout); + this.intervalTimeoutHandle = setTimeout(this.onInterval.bind(this), Math.min(intervalTimeout, MAX_INTERVAL_TIMEOUT)); } } diff --git a/ui-ngx/src/app/core/services/time.service.ts b/ui-ngx/src/app/core/services/time.service.ts index f9ab858b4f..421b81f8bc 100644 --- a/ui-ngx/src/app/core/services/time.service.ts +++ b/ui-ngx/src/app/core/services/time.service.ts @@ -38,7 +38,7 @@ export interface TimeInterval { const MIN_INTERVAL = SECOND; const MAX_INTERVAL = 365 * 20 * DAY; -const MIN_LIMIT = 7; +const MIN_LIMIT = 1; const MAX_DATAPOINTS_LIMIT = 500; diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts index 5e95d162cd..95ce945259 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts @@ -88,6 +88,9 @@ import { import { RangeChartBasicConfigComponent } from '@home/components/widget/config/basic/chart/range-chart-basic-config.component'; +import { + BarChartWithLabelsBasicConfigComponent +} from '@home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component'; @NgModule({ declarations: [ @@ -115,7 +118,8 @@ import { CompassGaugeBasicConfigComponent, LiquidLevelCardBasicConfigComponent, DoughnutBasicConfigComponent, - RangeChartBasicConfigComponent + RangeChartBasicConfigComponent, + BarChartWithLabelsBasicConfigComponent ], imports: [ CommonModule, @@ -147,7 +151,8 @@ import { CompassGaugeBasicConfigComponent, LiquidLevelCardBasicConfigComponent, DoughnutBasicConfigComponent, - RangeChartBasicConfigComponent + RangeChartBasicConfigComponent, + BarChartWithLabelsBasicConfigComponent ] }) export class BasicWidgetConfigModule { @@ -173,5 +178,6 @@ export const basicWidgetConfigComponentsMap: {[key: string]: Type + + + + + + + +
+
widget-config.appearance
+
+ + {{ 'widget-config.title' | translate }} + +
+ + + + + + + +
+
+
+ + {{ 'widget-config.card-icon' | translate }} + +
+ + + + + + + + +
+
+
+
+
widgets.bar-chart.bar-appearance
+
+ + {{ 'widgets.bar-chart.label-on-bar' | translate }} + +
+ + + + +
+
+
+ + {{ 'widgets.bar-chart.value-on-bar' | translate }} + +
+ + + + +
+
+
+
widget-config.units-short
+ + +
+
+
widget-config.decimals-short
+ + + +
+
+
+ + + + + {{ 'widget-config.legend' | translate }} + + + + +
+
{{ 'legend.position' | translate }}
+ + + + {{ legendPositionTranslationMap.get(pos) | translate }} + + + +
+
+
{{ 'legend.label' | translate }}
+
+ + + + +
+
+ + +
+
+ + + + + {{ 'widget-config.tooltip' | translate }} + + + + +
+
{{ 'tooltip.value' | translate }}
+
+ + + + +
+
+
+ + {{ 'tooltip.date' | translate }} + +
+ + + + + +
+
+
+
{{ 'tooltip.background-color' | translate }}
+ + +
+
+
{{ 'tooltip.background-blur' | translate }}
+ + +
px
+ +
+ + +
+
+
widget-config.card-appearance
+
+
{{ 'widgets.background.background' | translate }}
+ + +
+
+
widget-config.show-card-buttons
+ + {{ 'fullscreen.fullscreen' | translate }} + +
+
+
{{ 'widget-config.card-border-radius' | translate }}
+ + + +
+
+ + + diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts new file mode 100644 index 0000000000..6b6929a36f --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts @@ -0,0 +1,323 @@ +/// +/// Copyright © 2016-2023 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { Component, Injector } from '@angular/core'; +import { UntypedFormBuilder, UntypedFormGroup, 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'; +import { WidgetConfigComponentData } from '@home/models/widget-component.models'; +import { + DataKey, + Datasource, + legendPositions, + legendPositionTranslationMap, + WidgetConfig, +} from '@shared/models/widget.models'; +import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; +import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; +import { + getTimewindowConfig, + setTimewindowConfig +} from '@home/components/widget/config/timewindow-config-panel.component'; +import { formatValue, isUndefined } from '@core/utils'; +import { + cssSizeToStrSize, + DateFormatProcessor, + DateFormatSettings, + resolveCssSize +} from '@shared/models/widget-settings.models'; +import { + barChartWithLabelsDefaultSettings, + BarChartWithLabelsWidgetSettings +} from '@home/components/widget/lib/chart/bar-chart-with-labels-widget.models'; + +@Component({ + selector: 'tb-bar-chart-with-labels-basic-config', + templateUrl: './bar-chart-with-labels-basic-config.component.html', + styleUrls: ['../basic-config.scss'] +}) +export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigComponent { + + public get datasource(): Datasource { + const datasources: Datasource[] = this.barChartWidgetConfigForm.get('datasources').value; + if (datasources && datasources.length) { + return datasources[0]; + } else { + return null; + } + } + + legendPositions = legendPositions; + + legendPositionTranslationMap = legendPositionTranslationMap; + + barChartWidgetConfigForm: UntypedFormGroup; + + tooltipValuePreviewFn = this._tooltipValuePreviewFn.bind(this); + + tooltipDatePreviewFn = this._tooltipDatePreviewFn.bind(this); + + constructor(protected store: Store, + protected widgetConfigComponent: WidgetConfigComponent, + private $injector: Injector, + private fb: UntypedFormBuilder) { + super(store, widgetConfigComponent); + } + + protected configForm(): UntypedFormGroup { + return this.barChartWidgetConfigForm; + } + + protected defaultDataKeys(configData: WidgetConfigComponentData): DataKey[] { + return [{ name: 'temperature', label: 'Temperature', type: DataKeyType.timeseries }]; + } + + protected onConfigSet(configData: WidgetConfigComponentData) { + const settings: BarChartWithLabelsWidgetSettings = {...barChartWithLabelsDefaultSettings, ...(configData.config.settings || {})}; + const iconSize = resolveCssSize(configData.config.iconSize); + this.barChartWidgetConfigForm = this.fb.group({ + timewindowConfig: [getTimewindowConfig(configData.config), []], + datasources: [configData.config.datasources, []], + series: [this.getSeries(configData.config.datasources), []], + + showTitle: [configData.config.showTitle, []], + title: [configData.config.title, []], + titleFont: [configData.config.titleFont, []], + titleColor: [configData.config.titleColor, []], + + showIcon: [configData.config.showTitleIcon, []], + iconSize: [iconSize[0], [Validators.min(0)]], + iconSizeUnit: [iconSize[1], []], + icon: [configData.config.titleIcon, []], + iconColor: [configData.config.iconColor, []], + + showBarLabel: [settings.showBarLabel, []], + barLabelFont: [settings.barLabelFont, []], + barLabelColor: [settings.barLabelColor, []], + showBarValue: [settings.showBarValue, []], + barValueFont: [settings.barValueFont, []], + barValueColor: [settings.barValueColor, []], + + units: [configData.config.units, []], + decimals: [configData.config.decimals, []], + + showLegend: [settings.showLegend, []], + legendPosition: [settings.legendPosition, []], + legendLabelFont: [settings.legendLabelFont, []], + legendLabelColor: [settings.legendLabelColor, []], + + showTooltip: [settings.showTooltip, []], + tooltipValueFont: [settings.tooltipValueFont, []], + tooltipValueColor: [settings.tooltipValueColor, []], + tooltipShowDate: [settings.tooltipShowDate, []], + tooltipDateFormat: [settings.tooltipDateFormat, []], + tooltipDateFont: [settings.tooltipDateFont, []], + tooltipDateColor: [settings.tooltipDateColor, []], + tooltipBackgroundColor: [settings.tooltipBackgroundColor, []], + tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []], + + background: [settings.background, []], + + cardButtons: [this.getCardButtons(configData.config), []], + borderRadius: [configData.config.borderRadius, []], + + actions: [configData.config.actions || {}, []] + }); + } + + protected prepareOutputConfig(config: any): WidgetConfigComponentData { + setTimewindowConfig(this.widgetConfig.config, config.timewindowConfig); + this.widgetConfig.config.datasources = config.datasources; + this.setSeries(config.series, this.widgetConfig.config.datasources); + + 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.showIcon; + this.widgetConfig.config.iconSize = cssSizeToStrSize(config.iconSize, config.iconSizeUnit); + this.widgetConfig.config.titleIcon = config.icon; + this.widgetConfig.config.iconColor = config.iconColor; + + this.widgetConfig.config.settings = this.widgetConfig.config.settings || {}; + + this.widgetConfig.config.settings.showBarLabel = config.showBarLabel; + this.widgetConfig.config.settings.barLabelFont = config.barLabelFont; + this.widgetConfig.config.settings.barLabelColor = config.barLabelColor; + this.widgetConfig.config.settings.showBarValue = config.showBarValue; + this.widgetConfig.config.settings.barValueFont = config.barValueFont; + this.widgetConfig.config.settings.barValueColor = config.barValueColor; + + this.widgetConfig.config.units = config.units; + this.widgetConfig.config.decimals = config.decimals; + + this.widgetConfig.config.settings.showLegend = config.showLegend; + this.widgetConfig.config.settings.legendPosition = config.legendPosition; + this.widgetConfig.config.settings.legendLabelFont = config.legendLabelFont; + this.widgetConfig.config.settings.legendLabelColor = config.legendLabelColor; + + this.widgetConfig.config.settings.showTooltip = config.showTooltip; + this.widgetConfig.config.settings.tooltipValueFont = config.tooltipValueFont; + this.widgetConfig.config.settings.tooltipValueColor = config.tooltipValueColor; + this.widgetConfig.config.settings.tooltipShowDate = config.tooltipShowDate; + this.widgetConfig.config.settings.tooltipDateFormat = config.tooltipDateFormat; + this.widgetConfig.config.settings.tooltipDateFont = config.tooltipDateFont; + this.widgetConfig.config.settings.tooltipDateColor = config.tooltipDateColor; + this.widgetConfig.config.settings.tooltipBackgroundColor = config.tooltipBackgroundColor; + this.widgetConfig.config.settings.tooltipBackgroundBlur = config.tooltipBackgroundBlur; + + this.widgetConfig.config.settings.background = config.background; + + this.setCardButtons(config.cardButtons, this.widgetConfig.config); + this.widgetConfig.config.borderRadius = config.borderRadius; + + this.widgetConfig.config.actions = config.actions; + return this.widgetConfig; + } + + protected validatorTriggers(): string[] { + return ['showTitle', 'showIcon', 'showBarLabel', 'showBarValue', 'showLegend', 'showTooltip', 'tooltipShowDate']; + } + + protected updateValidators(emitEvent: boolean, trigger?: string) { + const showTitle: boolean = this.barChartWidgetConfigForm.get('showTitle').value; + const showIcon: boolean = this.barChartWidgetConfigForm.get('showIcon').value; + const showBarLabel: boolean = this.barChartWidgetConfigForm.get('showBarLabel').value; + const showBarValue: boolean = this.barChartWidgetConfigForm.get('showBarValue').value; + const showLegend: boolean = this.barChartWidgetConfigForm.get('showLegend').value; + const showTooltip: boolean = this.barChartWidgetConfigForm.get('showTooltip').value; + const tooltipShowDate: boolean = this.barChartWidgetConfigForm.get('tooltipShowDate').value; + + if (showTitle) { + this.barChartWidgetConfigForm.get('title').enable(); + this.barChartWidgetConfigForm.get('titleFont').enable(); + this.barChartWidgetConfigForm.get('titleColor').enable(); + this.barChartWidgetConfigForm.get('showIcon').enable({emitEvent: false}); + if (showIcon) { + this.barChartWidgetConfigForm.get('iconSize').enable(); + this.barChartWidgetConfigForm.get('iconSizeUnit').enable(); + this.barChartWidgetConfigForm.get('icon').enable(); + this.barChartWidgetConfigForm.get('iconColor').enable(); + } else { + this.barChartWidgetConfigForm.get('iconSize').disable(); + this.barChartWidgetConfigForm.get('iconSizeUnit').disable(); + this.barChartWidgetConfigForm.get('icon').disable(); + this.barChartWidgetConfigForm.get('iconColor').disable(); + } + } else { + this.barChartWidgetConfigForm.get('title').disable(); + this.barChartWidgetConfigForm.get('titleFont').disable(); + this.barChartWidgetConfigForm.get('titleColor').disable(); + this.barChartWidgetConfigForm.get('showIcon').disable({emitEvent: false}); + this.barChartWidgetConfigForm.get('iconSize').disable(); + this.barChartWidgetConfigForm.get('iconSizeUnit').disable(); + this.barChartWidgetConfigForm.get('icon').disable(); + this.barChartWidgetConfigForm.get('iconColor').disable(); + } + + if (showBarLabel) { + this.barChartWidgetConfigForm.get('barLabelFont').enable(); + this.barChartWidgetConfigForm.get('barLabelColor').enable(); + } else { + this.barChartWidgetConfigForm.get('barLabelFont').disable(); + this.barChartWidgetConfigForm.get('barLabelColor').disable(); + } + + if (showBarValue) { + this.barChartWidgetConfigForm.get('barValueFont').enable(); + this.barChartWidgetConfigForm.get('barValueColor').enable(); + } else { + this.barChartWidgetConfigForm.get('barValueFont').disable(); + this.barChartWidgetConfigForm.get('barValueColor').disable(); + } + + if (showLegend) { + this.barChartWidgetConfigForm.get('legendPosition').enable(); + this.barChartWidgetConfigForm.get('legendLabelFont').enable(); + this.barChartWidgetConfigForm.get('legendLabelColor').enable(); + } else { + this.barChartWidgetConfigForm.get('legendPosition').disable(); + this.barChartWidgetConfigForm.get('legendLabelFont').disable(); + this.barChartWidgetConfigForm.get('legendLabelColor').disable(); + } + + if (showTooltip) { + this.barChartWidgetConfigForm.get('tooltipValueFont').enable(); + this.barChartWidgetConfigForm.get('tooltipValueColor').enable(); + this.barChartWidgetConfigForm.get('tooltipShowDate').enable({emitEvent: false}); + this.barChartWidgetConfigForm.get('tooltipBackgroundColor').enable(); + this.barChartWidgetConfigForm.get('tooltipBackgroundBlur').enable(); + if (tooltipShowDate) { + this.barChartWidgetConfigForm.get('tooltipDateFormat').enable(); + this.barChartWidgetConfigForm.get('tooltipDateFont').enable(); + this.barChartWidgetConfigForm.get('tooltipDateColor').enable(); + } else { + this.barChartWidgetConfigForm.get('tooltipDateFormat').disable(); + this.barChartWidgetConfigForm.get('tooltipDateFont').disable(); + this.barChartWidgetConfigForm.get('tooltipDateColor').disable(); + } + } else { + this.barChartWidgetConfigForm.get('tooltipValueFont').disable(); + this.barChartWidgetConfigForm.get('tooltipValueColor').disable(); + this.barChartWidgetConfigForm.get('tooltipShowDate').disable({emitEvent: false}); + this.barChartWidgetConfigForm.get('tooltipDateFormat').disable(); + this.barChartWidgetConfigForm.get('tooltipDateFont').disable(); + this.barChartWidgetConfigForm.get('tooltipDateColor').disable(); + this.barChartWidgetConfigForm.get('tooltipBackgroundColor').disable(); + this.barChartWidgetConfigForm.get('tooltipBackgroundBlur').disable(); + } + } + + private getSeries(datasources?: Datasource[]): DataKey[] { + if (datasources && datasources.length) { + return datasources[0].dataKeys || []; + } + return []; + } + + private setSeries(series: DataKey[], datasources?: Datasource[]) { + if (datasources && datasources.length) { + datasources[0].dataKeys = series; + } + } + + private getCardButtons(config: WidgetConfig): string[] { + const buttons: string[] = []; + if (isUndefined(config.enableFullscreen) || config.enableFullscreen) { + buttons.push('fullscreen'); + } + return buttons; + } + + private setCardButtons(buttons: string[], config: WidgetConfig) { + config.enableFullscreen = buttons.includes('fullscreen'); + } + + private _tooltipValuePreviewFn(): string { + const units: string = this.barChartWidgetConfigForm.get('units').value; + const decimals: number = this.barChartWidgetConfigForm.get('decimals').value; + return formatValue(22, decimals, units, false); + } + + private _tooltipDatePreviewFn(): string { + const dateFormat: DateFormatSettings = this.barChartWidgetConfigForm.get('tooltipDateFormat').value; + const processor = DateFormatProcessor.fromSettings(this.$injector, dateFormat); + processor.update(Date.now()); + return processor.formatted; + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.html index 00c4929f3c..c12cf02299 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.html @@ -145,14 +145,14 @@
{{ 'legend.position' | translate }}
- - {{ doughnutLegendPositionTranslationMap.get(pos) | translate }} + + {{ legendPositionTranslationMap.get(pos) | translate }}
-
{{ 'widgets.doughnut.legend-label' | translate }}
+
{{ 'legend.label' | translate }}
@@ -164,7 +164,7 @@
-
{{ 'widgets.doughnut.legend-value' | translate }}
+
{{ 'legend.value' | translate }}
@@ -184,13 +184,13 @@ - {{ 'widgets.doughnut.tooltip' | translate }} + {{ 'widget-config.tooltip' | translate }}
-
{{ 'widgets.doughnut.tooltip-value' | translate }}
+
{{ 'tooltip.value' | translate }}
@@ -213,14 +213,14 @@
-
{{ 'widgets.doughnut.tooltip-background-color' | translate }}
+
{{ 'tooltip.background-color' | translate }}
-
{{ 'widgets.doughnut.tooltip-background-blur' | translate }}
+
{{ 'tooltip.background-blur' | translate }}
px
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.ts index f8149bc97d..0ab89281bc 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.ts @@ -25,6 +25,8 @@ import { Datasource, datasourcesHasAggregation, datasourcesHasOnlyComparisonAggregation, + legendPositions, + legendPositionTranslationMap, WidgetConfig } from '@shared/models/widget.models'; import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; @@ -40,8 +42,6 @@ import { doughnutLayoutImages, doughnutLayouts, doughnutLayoutTranslations, - doughnutLegendPositions, - doughnutLegendPositionTranslations, DoughnutTooltipValueType, doughnutTooltipValueTypes, doughnutTooltipValueTypeTranslations, @@ -83,9 +83,9 @@ export class DoughnutBasicConfigComponent extends BasicWidgetConfigComponent { doughnutLayoutImageMap: Map; - doughnutLegendPositions = doughnutLegendPositions; + legendPositions = legendPositions; - doughnutLegendPositionTranslationMap = doughnutLegendPositionTranslations; + legendPositionTranslationMap = legendPositionTranslationMap; doughnutTooltipValueTypes = doughnutTooltipValueTypes; diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html index 66b4054df1..391007d155 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html @@ -49,7 +49,7 @@
- {{ 'widgets.value-chart-card.icon' | translate }} + {{ 'widget-config.card-icon' | translate }}
@@ -127,7 +127,7 @@
-
{{ 'widgets.range-chart.legend-label' | translate }}
+
{{ 'legend.label' | translate }}
@@ -147,13 +147,13 @@ - {{ 'widgets.range-chart.tooltip' | translate }} + {{ 'widget-config.tooltip' | translate }}
-
{{ 'widgets.range-chart.tooltip-value' | translate }}
+
{{ 'tooltip.value' | translate }}
@@ -166,7 +166,7 @@
- {{ 'widgets.range-chart.tooltip-date' | translate }} + {{ 'tooltip.date' | translate }}
@@ -180,14 +180,14 @@
-
{{ 'widgets.range-chart.tooltip-background-color' | translate }}
+
{{ 'tooltip.background-color' | translate }}
-
{{ 'widgets.range-chart.tooltip-background-blur' | translate }}
+
{{ 'tooltip.background-blur' | translate }}
px
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html index 4669bf5f82..9edf205d11 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html @@ -117,14 +117,14 @@ - {{ 'widgets.signal-strength.tooltip' | translate }} + {{ 'widget-config.tooltip' | translate }}
- {{ 'widgets.signal-strength.value' | translate }} + {{ 'tooltip.value' | translate }}
@@ -144,7 +144,7 @@
- {{ 'widgets.signal-strength.date' | translate }} + {{ 'tooltip.date' | translate }}
@@ -158,13 +158,13 @@
-
{{ 'widgets.signal-strength.background-color' | translate }}
+
{{ 'tooltip.background-color' | translate }}
-
widgets.signal-strength.background-blur
+
tooltip.background-blur
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.html new file mode 100644 index 0000000000..b490802022 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.html @@ -0,0 +1,36 @@ + +
+
+ +
+
+
+
+
+
+
+
{{ legendItem.label }}
+
+
+
+
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.scss new file mode 100644 index 0000000000..6e57a12d6c --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.scss @@ -0,0 +1,105 @@ +/** + * Copyright © 2016-2023 The Thingsboard Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.tb-bar-chart-panel { + width: 100%; + height: 100%; + position: relative; + display: flex; + flex-direction: column; + gap: 16px; + padding: 20px 24px 24px 24px; + > div:not(.tb-bar-chart-overlay) { + z-index: 1; + } + .tb-bar-chart-overlay { + position: absolute; + top: 12px; + left: 12px; + bottom: 12px; + right: 12px; + } + div.tb-widget-title { + padding: 0; + } + .tb-bar-chart-content { + flex: 1; + min-width: 0; + min-height: 0; + display: flex; + flex-direction: column; + gap: 16px; + &.legend-top { + flex-direction: column-reverse; + } + &.legend-right { + flex-direction: row; + } + &.legend-left { + flex-direction: row-reverse; + } + .tb-bar-chart-shape { + flex: 1; + min-width: 0; + min-height: 0; + display: flex; + align-items: center; + justify-content: center; + } + .tb-bar-chart-legend { + display: flex; + justify-content: center; + align-items: center; + align-self: stretch; + flex-wrap: wrap; + column-gap: 24px; + row-gap: 8px; + .tb-bar-chart-legend-item { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + user-select: none; + cursor: pointer; + .tb-bar-chart-legend-item-label { + display: flex; + align-items: center; + gap: 4px; + color: #ccc; + .tb-bar-chart-legend-item-label-circle { + width: 8px; + height: 8px; + border-radius: 50%; + background-color: #ccc; + } + } + } + } + &.legend-right, &.legend-left { + gap: 24px; + .tb-bar-chart-legend { + flex-direction: column-reverse; + justify-content: flex-end; + align-items: stretch; + .tb-bar-chart-legend-item { + flex-direction: row; + justify-content: space-between; + align-items: center; + } + } + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts new file mode 100644 index 0000000000..c325bb0e73 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts @@ -0,0 +1,483 @@ +/// +/// Copyright © 2016-2023 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { + AfterViewInit, + ChangeDetectorRef, + Component, + ElementRef, + Input, + OnDestroy, + OnInit, + Renderer2, + TemplateRef, + ViewChild, + ViewEncapsulation +} from '@angular/core'; +import { WidgetContext } from '@home/models/widget-component.models'; +import { + backgroundStyle, + ComponentStyle, + DateFormatProcessor, + overlayStyle, + textStyle +} from '@shared/models/widget-settings.models'; +import { ResizeObserver } from '@juggle/resize-observer'; +import { formatValue } from '@core/utils'; +import { DataKey } from '@shared/models/widget.models'; +import { Observable } from 'rxjs'; +import { ImagePipe } from '@shared/pipe/image.pipe'; +import { DomSanitizer } from '@angular/platform-browser'; +import { + barChartWithLabelsDefaultSettings, + BarChartWithLabelsWidgetSettings +} from '@home/components/widget/lib/chart/bar-chart-with-labels-widget.models'; + +import * as echarts from 'echarts/core'; +import { CustomSeriesOption } from 'echarts/charts'; +import { CallbackDataParams, CustomSeriesRenderItem, LabelLayoutOptionCallback } from 'echarts/types/dist/shared'; + +import { + ECharts, + echartsModule, + EChartsOption, + echartsTooltipFormatter, + NamedDataSet, + toNamedData +} from '@home/components/widget/lib/chart/echarts-widget.models'; + +interface BarChartDataItem { + id: string; + dataKey: DataKey; + data: NamedDataSet; + enabled: boolean; +} + +interface BarChartLegendItem { + id: string; + color: string; + label: string; + enabled: boolean; +} + +@Component({ + selector: 'tb-bar-chart-with-labels-widget', + templateUrl: './bar-chart-with-labels-widget.component.html', + styleUrls: ['./bar-chart-with-labels-widget.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class BarChartWithLabelsWidgetComponent implements OnInit, OnDestroy, AfterViewInit { + + @ViewChild('chartShape', {static: false}) + chartShape: ElementRef; + + settings: BarChartWithLabelsWidgetSettings; + + @Input() + ctx: WidgetContext; + + @Input() + widgetTitlePanel: TemplateRef; + + showLegend: boolean; + legendClass: string; + + backgroundStyle$: Observable; + overlayStyle: ComponentStyle = {}; + + legendItems: BarChartLegendItem[]; + legendLabelStyle: ComponentStyle; + disabledLegendLabelStyle: ComponentStyle; + + private shapeResize$: ResizeObserver; + + private decimals = 0; + private units = ''; + + private dataItems: BarChartDataItem[] = []; + + private drawChartPending = false; + private barChart: ECharts; + private barChartOptions: EChartsOption; + + private tooltipDateFormat: DateFormatProcessor; + + private barRenderItem: CustomSeriesRenderItem; + private barLabelLayoutCallback: LabelLayoutOptionCallback; + + constructor(private imagePipe: ImagePipe, + private sanitizer: DomSanitizer, + private renderer: Renderer2, + private cd: ChangeDetectorRef) { + } + + ngOnInit(): void { + this.ctx.$scope.barChartWidget = this; + this.settings = {...barChartWithLabelsDefaultSettings, ...this.ctx.settings}; + + this.decimals = this.ctx.decimals; + this.units = this.ctx.units; + + this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer); + this.overlayStyle = overlayStyle(this.settings.background.overlay); + + this.showLegend = this.settings.showLegend; + + if (this.showLegend) { + this.legendItems = []; + this.legendClass = `legend-${this.settings.legendPosition}`; + this.legendLabelStyle = textStyle(this.settings.legendLabelFont); + this.disabledLegendLabelStyle = textStyle(this.settings.legendLabelFont); + this.legendLabelStyle.color = this.settings.legendLabelColor; + } + let counter = 0; + if (this.ctx.datasources.length) { + for (const datasource of this.ctx.datasources) { + const dataKeys = datasource.dataKeys; + for (const dataKey of dataKeys) { + const id = counter++; + const datasourceData = this.ctx.data ? this.ctx.data.find(d => d.dataKey === dataKey) : null; + const namedData = datasourceData?.data ? toNamedData(datasourceData.data) : []; + this.dataItems.push({ + id: id+'', + dataKey, + data: namedData, + enabled: true + }); + if (this.showLegend) { + this.legendItems.push( + { + id: id+'', + label: dataKey.label, + color: dataKey.color, + enabled: true + } + ); + } + } + } + } + + if (this.settings.showTooltip && this.settings.tooltipShowDate) { + this.tooltipDateFormat = DateFormatProcessor.fromSettings(this.ctx.$injector, this.settings.tooltipDateFormat); + } + + const barValueStyle: ComponentStyle = textStyle(this.settings.barValueFont); + delete barValueStyle.lineHeight; + barValueStyle.fontSize = this.settings.barValueFont.size; + barValueStyle.fill = this.settings.barValueColor; + + const barLabelStyle: ComponentStyle = textStyle(this.settings.barLabelFont); + delete barLabelStyle.lineHeight; + barLabelStyle.fontSize = this.settings.barLabelFont.size; + barLabelStyle.fill = this.settings.barLabelColor; + + this.barRenderItem = (params, api) => { + + const interval = this.ctx.defaultSubscription.timeWindow.interval; + const enabledDataItems = this.dataItems.filter(d => d.enabled); + const barInterval = interval / (enabledDataItems.length + 1); + const intervalGap = barInterval / 2; + + const index = enabledDataItems.findIndex(d => d.id === params.seriesId); + const time = api.value(0) as number; + const value = api.value(1); + const start = time - interval / 2; + const startTime = start + intervalGap + barInterval * index; + const delta = barInterval; + const lowerLeft = api.coord([startTime, value]); + const height = api.size([delta, value])[1]; + const width = api.size([delta, 10])[0]; + + const coordSys: {x: number; y: number; width: number; height: number} = params.coordSys as any; + + const rectShape = echarts.graphic.clipRectByRect({ + x: lowerLeft[0], + y: lowerLeft[1], + width, + height + }, { + x: coordSys.x, + y: coordSys.y, + width: coordSys.width, + height: coordSys.height + }); + + const zeroPos = api.coord([0, 0]); + const labelParts: string[] = []; + if (this.settings.showBarValue) { + const labelValue = formatValue(value, this.decimals, '', false); + labelParts.push(`{value|${labelValue}}`); + } + if (this.settings.showBarLabel) { + labelParts.push(`{label|${params.seriesName}}`); + } + const barLabel = labelParts.join(' '); + return rectShape && { + type: 'rect', + id: time + '', + shape: rectShape, + style: { + fill: api.visual('color'), + text: barLabel, + textPosition: 'insideBottom', + textRotation: Math.PI / 2, + textDistance: 15, + textStrokeWidth: 0, + textAlign: 'left', + textVerticalAlign: 'middle', + rich: { + value: barValueStyle, + label: barLabelStyle + } + }, + focus: 'series', + transition: 'all', + enterFrom: { + style: { opacity: 0 }, + shape: { height: 0, y: zeroPos[1] } + } + }; + }; + + this.barLabelLayoutCallback = (params) => { + if (params.rect.width - params.labelRect.width < 2) { + return { + y: '1000%', + }; + } else { + return { + hideOverlap: true + }; + } + }; + } + + ngAfterViewInit() { + if (this.drawChartPending) { + this.drawChart(); + } + } + + ngOnDestroy() { + if (this.shapeResize$) { + this.shapeResize$.disconnect(); + } + if (this.barChart) { + this.barChart.dispose(); + } + } + + public onInit() { + const borderRadius = this.ctx.$widgetElement.css('borderRadius'); + this.overlayStyle = {...this.overlayStyle, ...{borderRadius}}; + if (this.chartShape) { + this.drawChart(); + } else { + this.drawChartPending = true; + } + this.cd.detectChanges(); + } + + public onDataUpdated() { + let minTime = this.ctx.defaultSubscription.timeWindow.minTime; + let maxTime = this.ctx.defaultSubscription.timeWindow.maxTime; + let dataMin = Number.MAX_VALUE; + let dataMax = Number.MIN_VALUE; + for (const item of this.dataItems) { + const datasourceData = this.ctx.data ? this.ctx.data.find(d => d.dataKey === item.dataKey) : null; + item.data = datasourceData?.data ? toNamedData(datasourceData.data) : []; + if (datasourceData.data.length) { + dataMin = Math.min(datasourceData.data[0][0], dataMin); + dataMax = Math.max(datasourceData.data[datasourceData.data.length-1][0], dataMax); + } + } + if (dataMin !== Number.MAX_VALUE) { + minTime = dataMin - this.ctx.defaultSubscription.timeWindow.interval / 2; + } + if (dataMax !== Number.MIN_VALUE) { + dataMax = dataMax + this.ctx.defaultSubscription.timeWindow.interval / 2; + maxTime = Math.max(dataMax, maxTime); + } + if (this.barChart) { + (this.barChartOptions.xAxis as any).min = minTime; + (this.barChartOptions.xAxis as any).max = maxTime; + (this.barChartOptions.xAxis as any).tbTimewindowInterval = this.ctx.defaultSubscription.timeWindow.interval; + this.barChartOptions.series = this.updateSeries(); + this.barChart.setOption(this.barChartOptions); + } + } + + private updateSeries(): Array { + const series: Array = []; + for (const item of this.dataItems) { + if (item.enabled) { + const seriesOption: CustomSeriesOption = { + type: 'custom', + id: item.id, + name: item.dataKey.label, + color: item.dataKey.color, + data: item.data, + renderItem: this.barRenderItem, + labelLayout: this.barLabelLayoutCallback + }; + series.push(seriesOption); + } + } + return series; + } + + + public onLegendItemEnter(item: BarChartLegendItem) { + this.barChart.dispatchAction({ + type: 'highlight', + seriesId: item.id + }); + } + + public onLegendItemLeave(item: BarChartLegendItem) { + this.barChart.dispatchAction({ + type: 'downplay', + seriesId: item.id + }); + } + + public toggleLegendItem(item: BarChartLegendItem) { + const enable = !item.enabled; + const dataItem = this.dataItems.find(d => d.id === item.id); + if (dataItem) { + dataItem.enabled = enable; + if (!enable) { + this.barChart.dispatchAction({ + type: 'downplay', + seriesId: item.id + }); + } + this.barChartOptions.series = this.updateSeries(); + this.barChart.setOption(this.barChartOptions, {replaceMerge: ['series']}); + item.enabled = enable; + if (enable) { + this.barChart.dispatchAction({ + type: 'highlight', + seriesId: item.id + }); + } + } + } + + private drawChart() { + echartsModule.init(); + this.barChart = echarts.init(this.chartShape.nativeElement, null, { + renderer: 'canvas', + }); + this.barChartOptions = { + tooltip: { + trigger: 'none' + }, + grid: { + containLabel: true, + top: '30', + left: 0, + right: 0, + bottom: 0 + }, + xAxis: { + type: 'time', + scale: true, + axisTick: { + show: false + }, + axisLabel: { + hideOverlap: true, + fontSize: 10 + }, + axisLine: { + onZero: false + }, + min: this.ctx.defaultSubscription.timeWindow.minTime - this.ctx.defaultSubscription.timeWindow.interval / 2, + max: this.ctx.defaultSubscription.timeWindow.maxTime + this.ctx.defaultSubscription.timeWindow.interval / 2 + }, + yAxis: { + type: 'value', + axisLabel: { + formatter: (value: any) => formatValue(value, this.decimals, this.units, false) + } + } + }; + + (this.barChartOptions.xAxis as any).tbTimewindowInterval = this.ctx.defaultSubscription.timeWindow.interval; + + this.barChartOptions.series = this.updateSeries(); + + if (this.settings.showTooltip) { + this.barChartOptions.tooltip = { + trigger: 'axis', + axisPointer: { + type: 'shadow' + }, + formatter: (params: CallbackDataParams[]) => { + const focusedSeriesIndex = this.focusedSeriesIndex(); + return echartsTooltipFormatter(this.renderer, this.tooltipDateFormat, + this.settings, params, this.decimals, this.units, focusedSeriesIndex); + }, + padding: [8, 12], + backgroundColor: this.settings.tooltipBackgroundColor, + borderWidth: 0, + extraCssText: `line-height: 1; backdrop-filter: blur(${this.settings.tooltipBackgroundBlur}px);` + }; + } + + this.barChart.setOption(this.barChartOptions); + + this.shapeResize$ = new ResizeObserver(() => { + this.onResize(); + }); + this.shapeResize$.observe(this.chartShape.nativeElement); + this.onResize(); + } + + private focusedSeriesIndex(): number { + let index = - 1; + const views: any[] = (this.barChart as any)._chartsViews; + if (views) { + const hasBlurredView = !!views.find(view => { + const graphicEls: any[] = view._data._graphicEls; + return !!graphicEls.find(el => el?.currentStates.includes('blur')); + }); + if (hasBlurredView) { + const focusedView = views.find(view => { + const graphicEls: any[] = view._data._graphicEls; + return !!graphicEls.find(el => !el?.currentStates.includes('blur')); + }); + if (focusedView) { + index = !!focusedView._model ? + focusedView._model.seriesIndex : (!!focusedView.__model ? focusedView.__model.seriesIndex : -1); + } + } + } + return index; + } + + private onResize() { + const width = this.barChart.getWidth(); + const height = this.barChart.getHeight(); + const shapeWidth = this.chartShape.nativeElement.offsetWidth; + const shapeHeight = this.chartShape.nativeElement.offsetHeight; + if (width !== shapeWidth || height !== shapeHeight) { + this.barChart.resize(); + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.models.ts new file mode 100644 index 0000000000..ecb5e8a667 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.models.ts @@ -0,0 +1,99 @@ +/// +/// Copyright © 2016-2023 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { BackgroundSettings, BackgroundType, customDateFormat, Font } from '@shared/models/widget-settings.models'; +import { LegendPosition } from '@shared/models/widget.models'; +import { EChartsTooltipWidgetSettings } from '@home/components/widget/lib/chart/echarts-widget.models'; + +export interface BarChartWithLabelsWidgetSettings extends EChartsTooltipWidgetSettings { + showBarLabel: boolean; + barLabelFont: Font; + barLabelColor: string; + showBarValue: boolean; + barValueFont: Font; + barValueColor: string; + showLegend: boolean; + legendPosition: LegendPosition; + legendLabelFont: Font; + legendLabelColor: string; + background: BackgroundSettings; +} + +export const barChartWithLabelsDefaultSettings: BarChartWithLabelsWidgetSettings = { + showBarLabel: true, + barLabelFont: { + family: 'Roboto', + size: 12, + sizeUnit: 'px', + style: 'normal', + weight: '400', + lineHeight: '12px' + }, + barLabelColor: 'rgba(0, 0, 0, 0.54)', + showBarValue: true, + barValueFont: { + family: 'Roboto', + size: 12, + sizeUnit: 'px', + style: 'normal', + weight: '700', + lineHeight: '12px' + }, + barValueColor: 'rgba(0, 0, 0, 0.76)', + showLegend: true, + legendPosition: LegendPosition.top, + legendLabelFont: { + family: 'Roboto', + size: 12, + sizeUnit: 'px', + style: 'normal', + weight: '400', + lineHeight: '16px' + }, + legendLabelColor: 'rgba(0, 0, 0, 0.76)', + showTooltip: true, + tooltipValueFont: { + family: 'Roboto', + size: 12, + sizeUnit: 'px', + style: 'normal', + weight: '500', + lineHeight: '16px' + }, + tooltipValueColor: 'rgba(0, 0, 0, 0.76)', + tooltipShowDate: true, + tooltipDateFormat: customDateFormat('MMMM y'), + tooltipDateFont: { + family: 'Roboto', + size: 11, + sizeUnit: 'px', + style: 'normal', + weight: '400', + lineHeight: '16px' + }, + tooltipDateColor: 'rgba(0, 0, 0, 0.76)', + tooltipBackgroundColor: 'rgba(255, 255, 255, 0.76)', + tooltipBackgroundBlur: 4, + background: { + type: BackgroundType.color, + color: '#fff', + overlay: { + enabled: false, + color: 'rgba(255,255,255,0.72)', + blur: 3 + } + } +}; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts index 928445d316..28550c339e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts @@ -30,7 +30,6 @@ import { import { doughnutDefaultSettings, DoughnutLayout, - DoughnutLegendPosition, DoughnutTooltipValueType, DoughnutWidgetSettings } from '@home/components/widget/lib/chart/doughnut-widget.models'; @@ -49,25 +48,11 @@ import { TranslateService } from '@ngx-translate/core'; import { PieDataItemOption } from 'echarts/types/src/chart/pie/PieSeries'; import { formatValue, isDefinedAndNotNull, isNumeric } from '@core/utils'; import { SVG, Svg, Text } from '@svgdotjs/svg.js'; -import { DataKey } from '@shared/models/widget.models'; -import { TooltipComponent, TooltipComponentOption } from 'echarts/components'; -import { PieChart, PieSeriesOption } from 'echarts/charts'; -import { SVGRenderer } from 'echarts/renderers'; +import { DataKey, LegendPosition } from '@shared/models/widget.models'; import { Observable } from 'rxjs'; import { ImagePipe } from '@shared/pipe/image.pipe'; import { DomSanitizer } from '@angular/platform-browser'; - -echarts.use([ - TooltipComponent, - PieChart, - SVGRenderer -]); - -type EChartsOption = echarts.ComposeOption< - | TooltipComponentOption - | PieSeriesOption ->; -type ECharts = echarts.ECharts; +import { ECharts, echartsModule, EChartsOption } from '@home/components/widget/lib/chart/echarts-widget.models'; const shapeSize = 134; const shapeSegmentWidth = 13.4; @@ -178,7 +163,7 @@ export class DoughnutWidgetComponent implements OnInit, OnDestroy, AfterViewInit if (this.showLegend) { this.legendItems = []; this.legendClass = `legend-${this.settings.legendPosition}`; - this.legendHorizontal = [DoughnutLegendPosition.left, DoughnutLegendPosition.right].includes(this.settings.legendPosition); + this.legendHorizontal = [LegendPosition.left, LegendPosition.right].includes(this.settings.legendPosition); this.legendLabelStyle = textStyle(this.settings.legendLabelFont); this.disabledLegendLabelStyle = textStyle(this.settings.legendLabelFont); this.legendLabelStyle.color = this.settings.legendLabelColor; @@ -387,6 +372,7 @@ export class DoughnutWidgetComponent implements OnInit, OnDestroy, AfterViewInit } private drawDoughnut() { + echartsModule.init(); const shapeWidth = this.doughnutShape.nativeElement.getBoundingClientRect().width; const shapeHeight = this.doughnutShape.nativeElement.getBoundingClientRect().height; const size = this.settings.autoScale ? shapeSize : Math.min(shapeWidth, shapeHeight); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.models.ts index 1771dbbb8a..52507dc2b5 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.models.ts @@ -21,6 +21,7 @@ import { constantColor, Font } from '@shared/models/widget-settings.models'; +import { LegendPosition } from '@shared/models/widget.models'; export enum DoughnutLayout { default = 'default', @@ -50,24 +51,6 @@ export const horizontalDoughnutLayoutImages = new Map( ] ); -export enum DoughnutLegendPosition { - top = 'top', - bottom = 'bottom', - left = 'left', - right = 'right' -} - -export const doughnutLegendPositions = Object.keys(DoughnutLegendPosition) as DoughnutLegendPosition[]; - -export const doughnutLegendPositionTranslations = new Map( - [ - [DoughnutLegendPosition.top, 'widgets.doughnut.legend-position-top'], - [DoughnutLegendPosition.bottom, 'widgets.doughnut.legend-position-bottom'], - [DoughnutLegendPosition.left, 'widgets.doughnut.legend-position-left'], - [DoughnutLegendPosition.right, 'widgets.doughnut.legend-position-right'] - ] -); - export enum DoughnutTooltipValueType { absolute = 'absolute', percentage = 'percentage' @@ -90,7 +73,7 @@ export interface DoughnutWidgetSettings { totalValueFont: Font; totalValueColor: ColorSettings; showLegend: boolean; - legendPosition: DoughnutLegendPosition; + legendPosition: LegendPosition; legendLabelFont: Font; legendLabelColor: string; legendValueFont: Font; @@ -120,7 +103,7 @@ export const doughnutDefaultSettings = (horizontal: boolean): DoughnutWidgetSett }, totalValueColor: constantColor('rgba(0, 0, 0, 0.87)'), showLegend: true, - legendPosition: horizontal ? DoughnutLegendPosition.right : DoughnutLegendPosition.bottom, + legendPosition: horizontal ? LegendPosition.right : LegendPosition.bottom, legendLabelFont: { family: 'Roboto', size: 12, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts new file mode 100644 index 0000000000..3587a246ae --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts @@ -0,0 +1,214 @@ +/// +/// Copyright © 2016-2023 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import * as echarts from 'echarts/core'; +import { Axis } from 'echarts'; +import AxisModel from 'echarts/types/src/coord/cartesian/AxisModel'; +import { formatValue, isNumber } from '@core/utils'; +import TimeScale from 'echarts/types/src/scale/Time'; +import { + DataZoomComponent, DataZoomComponentOption, + GridComponent, GridComponentOption, + MarkLineComponent, MarkLineComponentOption, + TooltipComponent, TooltipComponentOption, + VisualMapComponent, VisualMapComponentOption +} from 'echarts/components'; +import { + BarChart, + LineChart, + CustomChart, + CustomSeriesOption, + LineSeriesOption, + BarSeriesOption, PieSeriesOption, PieChart +} from 'echarts/charts'; +import { LabelLayout } from 'echarts/features'; +import { CanvasRenderer, SVGRenderer } from 'echarts/renderers'; +import { DataSet } from '@shared/models/widget.models'; +import { CallbackDataParams } from 'echarts/types/dist/shared'; +import { Renderer2 } from '@angular/core'; +import { DateFormatProcessor, DateFormatSettings, Font } from '@shared/models/widget-settings.models'; + +class EChartsModule { + private initialized = false; + + init() { + if (!this.initialized) { + const axisGetBandWidth = Axis.prototype.getBandWidth; + + Axis.prototype.getBandWidth = function(){ + const model: AxisModel = this.model; + const axisOption = model.option; + const tbTimewindowInterval = (axisOption as any).tbTimewindowInterval; + if (this.scale.type === 'time' && isNumber(tbTimewindowInterval)) { + const timeScale: TimeScale = this.scale; + const axisExtent: [number, number] = this._extent; + const dataExtent = timeScale.getExtent(); + const size = Math.abs(axisExtent[1] - axisExtent[0]); + return tbTimewindowInterval * (size / (dataExtent[1] - dataExtent[0])); + } else { + return axisGetBandWidth.call(this); + } + }; + + echarts.use([ + TooltipComponent, + GridComponent, + VisualMapComponent, + DataZoomComponent, + MarkLineComponent, + LineChart, + BarChart, + PieChart, + CustomChart, + LabelLayout, + CanvasRenderer, + SVGRenderer + ]); + + this.initialized = true; + } + } +} + +export const echartsModule = new EChartsModule(); + +export type EChartsOption = echarts.ComposeOption< + | TooltipComponentOption + | GridComponentOption + | VisualMapComponentOption + | DataZoomComponentOption + | MarkLineComponentOption + | LineSeriesOption + | CustomSeriesOption + | BarSeriesOption + | PieSeriesOption +>; + +export type ECharts = echarts.ECharts; + +export type NamedDataSet = {name: string; value: [number, any]}[]; + +export const toNamedData = (data: DataSet): NamedDataSet => { + if (!data?.length) { + return []; + } else { + return data.map(d => ({ + name: d[0] + '', + value: d + })); + } +}; + +export interface EChartsTooltipWidgetSettings { + showTooltip: boolean; + tooltipValueFont: Font; + tooltipValueColor: string; + tooltipShowDate: boolean; + tooltipDateFormat: DateFormatSettings; + tooltipDateFont: Font; + tooltipDateColor: string; + tooltipBackgroundColor: string; + tooltipBackgroundBlur: number; +} + +export const echartsTooltipFormatter = (renderer: Renderer2, + tooltipDateFormat: DateFormatProcessor, + settings: EChartsTooltipWidgetSettings, + params: CallbackDataParams[], + decimals: number, + units: string, + focusedSeriesIndex: number): null | HTMLElement => { + if (!params.length || !params[0]) { + return null; + } + const tooltipElement: HTMLElement = renderer.createElement('div'); + renderer.setStyle(tooltipElement, 'display', 'flex'); + renderer.setStyle(tooltipElement, 'flex-direction', 'column'); + renderer.setStyle(tooltipElement, 'align-items', 'flex-start'); + renderer.setStyle(tooltipElement, 'gap', '4px'); + if (settings.tooltipShowDate) { + const dateElement: HTMLElement = renderer.createElement('div'); + const ts = params[0].value[0]; + tooltipDateFormat.update(ts); + renderer.appendChild(dateElement, renderer.createText(tooltipDateFormat.formatted)); + renderer.setStyle(dateElement, 'font-family', settings.tooltipDateFont.family); + renderer.setStyle(dateElement, 'font-size', settings.tooltipDateFont.size + settings.tooltipDateFont.sizeUnit); + renderer.setStyle(dateElement, 'font-style', settings.tooltipDateFont.style); + renderer.setStyle(dateElement, 'font-weight', settings.tooltipDateFont.weight); + renderer.setStyle(dateElement, 'line-height', settings.tooltipDateFont.lineHeight); + renderer.setStyle(dateElement, 'color', settings.tooltipDateColor); + renderer.appendChild(tooltipElement, dateElement); + } + let seriesParams: CallbackDataParams = null; + if (focusedSeriesIndex > -1) { + seriesParams = params.find(param => param.seriesIndex === focusedSeriesIndex); + } + if (seriesParams) { + renderer.appendChild(tooltipElement, constructEchartsTooltipSeriesElement(renderer, settings, seriesParams, decimals, units)); + } else { + for (seriesParams of params) { + renderer.appendChild(tooltipElement, constructEchartsTooltipSeriesElement(renderer, settings, seriesParams, decimals, units)); + } + } + return tooltipElement; +}; + +const constructEchartsTooltipSeriesElement = (renderer: Renderer2, + settings: EChartsTooltipWidgetSettings, + seriesParams: CallbackDataParams, + decimals: number, + units: string): HTMLElement => { + const labelValueElement: HTMLElement = renderer.createElement('div'); + renderer.setStyle(labelValueElement, 'display', 'flex'); + renderer.setStyle(labelValueElement, 'flex-direction', 'row'); + renderer.setStyle(labelValueElement, 'align-items', 'center'); + renderer.setStyle(labelValueElement, 'align-self', 'stretch'); + renderer.setStyle(labelValueElement, 'gap', '12px'); + const labelElement: HTMLElement = renderer.createElement('div'); + renderer.setStyle(labelElement, 'display', 'flex'); + renderer.setStyle(labelElement, 'align-items', 'center'); + renderer.setStyle(labelElement, 'gap', '8px'); + renderer.appendChild(labelValueElement, labelElement); + const circleElement: HTMLElement = renderer.createElement('div'); + renderer.setStyle(circleElement, 'width', '8px'); + renderer.setStyle(circleElement, 'height', '8px'); + renderer.setStyle(circleElement, 'border-radius', '50%'); + renderer.setStyle(circleElement, 'background', seriesParams.color); + renderer.appendChild(labelElement, circleElement); + const labelTextElement: HTMLElement = renderer.createElement('div'); + renderer.appendChild(labelTextElement, renderer.createText(seriesParams.seriesName)); + renderer.setStyle(labelTextElement, 'font-family', 'Roboto'); + renderer.setStyle(labelTextElement, 'font-size', '12px'); + renderer.setStyle(labelTextElement, 'font-style', 'normal'); + renderer.setStyle(labelTextElement, 'font-weight', '400'); + renderer.setStyle(labelTextElement, 'line-height', '16px'); + renderer.setStyle(labelTextElement, 'letter-spacing', '0.4px'); + renderer.setStyle(labelTextElement, 'color', 'rgba(0, 0, 0, 0.76)'); + renderer.appendChild(labelElement, labelTextElement); + const valueElement: HTMLElement = renderer.createElement('div'); + const value = formatValue(seriesParams.value[1], decimals, units, false); + renderer.appendChild(valueElement, renderer.createText(value)); + renderer.setStyle(valueElement, 'flex', '1'); + renderer.setStyle(valueElement, 'text-align', 'end'); + renderer.setStyle(valueElement, 'font-family', settings.tooltipValueFont.family); + renderer.setStyle(valueElement, 'font-size', settings.tooltipValueFont.size + settings.tooltipValueFont.sizeUnit); + renderer.setStyle(valueElement, 'font-style', settings.tooltipValueFont.style); + renderer.setStyle(valueElement, 'font-weight', settings.tooltipValueFont.weight); + renderer.setStyle(valueElement, 'line-height', settings.tooltipValueFont.lineHeight); + renderer.setStyle(valueElement, 'color', settings.tooltipValueColor); + renderer.appendChild(labelValueElement, valueElement); + return labelValueElement; +}; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts index 4625e4a2a9..4ff9c53a71 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts @@ -32,7 +32,8 @@ import { backgroundStyle, ColorRange, ComponentStyle, - DateFormatProcessor, filterIncludingColorRanges, + DateFormatProcessor, + filterIncludingColorRanges, getDataKey, overlayStyle, sortedColorRange, @@ -41,46 +42,18 @@ import { import { ResizeObserver } from '@juggle/resize-observer'; import * as echarts from 'echarts/core'; import { formatValue, isDefinedAndNotNull, isNumber } from '@core/utils'; -import { - DataZoomComponent, - DataZoomComponentOption, - GridComponent, - GridComponentOption, - MarkLineComponent, - MarkLineComponentOption, - TooltipComponent, - TooltipComponentOption, - VisualMapComponent, - VisualMapComponentOption -} from 'echarts/components'; -import { LineChart, LineSeriesOption, } from 'echarts/charts'; -import { CanvasRenderer } from 'echarts/renderers'; import { rangeChartDefaultSettings, RangeChartWidgetSettings } from './range-chart-widget.models'; -import { DataSet } from '@shared/models/widget.models'; import { Observable } from 'rxjs'; import { ImagePipe } from '@shared/pipe/image.pipe'; import { DomSanitizer } from '@angular/platform-browser'; - -echarts.use([ - TooltipComponent, - GridComponent, - VisualMapComponent, - DataZoomComponent, - MarkLineComponent, - LineChart, - CanvasRenderer -]); - -type EChartsOption = echarts.ComposeOption< - | TooltipComponentOption - | GridComponentOption - | VisualMapComponentOption - | DataZoomComponentOption - | MarkLineComponentOption - | LineSeriesOption ->; - -type ECharts = echarts.ECharts; +import { + ECharts, + echartsModule, + EChartsOption, + echartsTooltipFormatter, + toNamedData +} from '@home/components/widget/lib/chart/echarts-widget.models'; +import { CallbackDataParams } from 'echarts/types/dist/shared'; interface VisualPiece { lt?: number; @@ -180,17 +153,6 @@ const toRangeItems = (colorRanges: Array): RangeItem[] => { return rangeItems; }; -const toNamedData = (data: DataSet): {name: string; value: [number, any]}[] => { - if (!data?.length) { - return []; - } else { - return data.map(d => ({ - name: d[0] + '', - value: d - })); - } -}; - const getMarkPoints = (ranges: Array): number[] => { const points = new Set(); for (const range of ranges) { @@ -346,6 +308,7 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn } private drawChart() { + echartsModule.init(); const dataKey = getDataKey(this.ctx.datasources); this.rangeChart = echarts.init(this.chartShape.nativeElement, null, { renderer: 'canvas', @@ -379,7 +342,7 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn yAxis: { type: 'value', axisLabel: { - formatter: value => formatValue(value, this.decimals, this.units, false) + formatter: (value: any) => formatValue(value, this.decimals, this.units, false) } }, series: [{ @@ -442,71 +405,11 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn if (this.settings.showTooltip) { this.rangeChartOptions.tooltip = { trigger: 'axis', - formatter: (params) => { - if (!params.length || !params[0]) { - return null; - } - const seriesParams = params[0]; - const value = formatValue(seriesParams.value[1], this.decimals, this.units, false); - const tooltipElement: HTMLElement = this.renderer.createElement('div'); - this.renderer.setStyle(tooltipElement, 'display', 'flex'); - this.renderer.setStyle(tooltipElement, 'flex-direction', 'column'); - this.renderer.setStyle(tooltipElement, 'align-items', 'flex-start'); - this.renderer.setStyle(tooltipElement, 'gap', '4px'); - if (this.settings.tooltipShowDate) { - const dateElement: HTMLElement = this.renderer.createElement('div'); - const ts = seriesParams.value[0]; - this.tooltipDateFormat.update(ts); - this.renderer.appendChild(dateElement, this.renderer.createText(this.tooltipDateFormat.formatted)); - this.renderer.setStyle(dateElement, 'font-family', this.settings.tooltipDateFont.family); - this.renderer.setStyle(dateElement, 'font-size', this.settings.tooltipDateFont.size + this.settings.tooltipDateFont.sizeUnit); - this.renderer.setStyle(dateElement, 'font-style', this.settings.tooltipDateFont.style); - this.renderer.setStyle(dateElement, 'font-weight', this.settings.tooltipDateFont.weight); - this.renderer.setStyle(dateElement, 'line-height', this.settings.tooltipDateFont.lineHeight); - this.renderer.setStyle(dateElement, 'color', this.settings.tooltipDateColor); - this.renderer.appendChild(tooltipElement, dateElement); - } - const labelValueElement: HTMLElement = this.renderer.createElement('div'); - this.renderer.setStyle(labelValueElement, 'display', 'flex'); - this.renderer.setStyle(labelValueElement, 'flex-direction', 'row'); - this.renderer.setStyle(labelValueElement, 'align-items', 'center'); - this.renderer.setStyle(labelValueElement, 'align-self', 'stretch'); - this.renderer.setStyle(labelValueElement, 'gap', '12px'); - this.renderer.appendChild(tooltipElement, labelValueElement); - const labelElement: HTMLElement = this.renderer.createElement('div'); - this.renderer.setStyle(labelElement, 'display', 'flex'); - this.renderer.setStyle(labelElement, 'align-items', 'center'); - this.renderer.setStyle(labelElement, 'gap', '8px'); - this.renderer.appendChild(labelValueElement, labelElement); - const circleElement: HTMLElement = this.renderer.createElement('div'); - this.renderer.setStyle(circleElement, 'width', '8px'); - this.renderer.setStyle(circleElement, 'height', '8px'); - this.renderer.setStyle(circleElement, 'border-radius', '50%'); - this.renderer.setStyle(circleElement, 'background', seriesParams.color); - this.renderer.appendChild(labelElement, circleElement); - const labelTextElement: HTMLElement = this.renderer.createElement('div'); - this.renderer.appendChild(labelTextElement, this.renderer.createText(seriesParams.seriesName)); - this.renderer.setStyle(labelTextElement, 'font-family', 'Roboto'); - this.renderer.setStyle(labelTextElement, 'font-size', '12px'); - this.renderer.setStyle(labelTextElement, 'font-style', 'normal'); - this.renderer.setStyle(labelTextElement, 'font-weight', '400'); - this.renderer.setStyle(labelTextElement, 'line-height', '16px'); - this.renderer.setStyle(labelTextElement, 'letter-spacing', '0.4px'); - this.renderer.setStyle(labelTextElement, 'color', 'rgba(0, 0, 0, 0.76)'); - this.renderer.appendChild(labelElement, labelTextElement); - const valueElement: HTMLElement = this.renderer.createElement('div'); - this.renderer.appendChild(valueElement, this.renderer.createText(value)); - this.renderer.setStyle(valueElement, 'font-family', this.settings.tooltipValueFont.family); - this.renderer.setStyle(valueElement, 'font-size', this.settings.tooltipValueFont.size + this.settings.tooltipValueFont.sizeUnit); - this.renderer.setStyle(valueElement, 'font-style', this.settings.tooltipValueFont.style); - this.renderer.setStyle(valueElement, 'font-weight', this.settings.tooltipValueFont.weight); - this.renderer.setStyle(valueElement, 'line-height', this.settings.tooltipValueFont.lineHeight); - this.renderer.setStyle(valueElement, 'color', this.settings.tooltipValueColor); - this.renderer.appendChild(labelValueElement, valueElement); - return tooltipElement; - }, + formatter: (params: CallbackDataParams[]) => echartsTooltipFormatter(this.renderer, this.tooltipDateFormat, + this.settings, params, this.decimals, this.units, 0), padding: [8, 12], backgroundColor: this.settings.tooltipBackgroundColor, + borderWidth: 0, extraCssText: `line-height: 1; backdrop-filter: blur(${this.settings.tooltipBackgroundBlur}px);` }; } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts index 6bcd0c1497..0c8bb73150 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts @@ -18,12 +18,13 @@ import { BackgroundSettings, BackgroundType, ColorRange, - DateFormatSettings, - Font, simpleDateFormat + Font, + simpleDateFormat } from '@shared/models/widget-settings.models'; import { LegendPosition } from '@shared/models/widget.models'; +import { EChartsTooltipWidgetSettings } from '@home/components/widget/lib/chart/echarts-widget.models'; -export interface RangeChartWidgetSettings { +export interface RangeChartWidgetSettings extends EChartsTooltipWidgetSettings { dataZoom: boolean; rangeColors: Array; outOfRangeColor: string; @@ -32,15 +33,6 @@ export interface RangeChartWidgetSettings { legendPosition: LegendPosition; legendLabelFont: Font; legendLabelColor: string; - showTooltip: boolean; - tooltipValueFont: Font; - tooltipValueColor: string; - tooltipShowDate: boolean; - tooltipDateFormat: DateFormatSettings; - tooltipDateFont: Font; - tooltipDateColor: string; - tooltipBackgroundColor: string; - tooltipBackgroundBlur: number; background: BackgroundSettings; } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html new file mode 100644 index 0000000000..5652d626ee --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html @@ -0,0 +1,150 @@ + + +
+
widgets.bar-chart.bar-chart-card-style
+
+ + {{ 'widgets.bar-chart.label-on-bar' | translate }} + +
+ + + + +
+
+
+ + {{ 'widgets.bar-chart.value-on-bar' | translate }} + +
+ + + + +
+
+
+ + + + + {{ 'widget-config.legend' | translate }} + + + + +
+
{{ 'legend.position' | translate }}
+ + + + {{ legendPositionTranslationMap.get(pos) | translate }} + + + +
+
+
{{ 'legend.label' | translate }}
+
+ + + + +
+
+ + +
+
+ + + + + {{ 'widget-config.tooltip' | translate }} + + + + +
+
{{ 'tooltip.value' | translate }}
+
+ + + + +
+
+
+ + {{ 'tooltip.date' | translate }} + +
+ + + + + +
+
+
+
{{ 'tooltip.background-color' | translate }}
+ + +
+
+
{{ 'tooltip.background-blur' | translate }}
+ + +
px
+ +
+ + +
+
+
{{ 'widgets.background.background' | translate }}
+ + +
+
+ diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.ts new file mode 100644 index 0000000000..3eee431476 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.ts @@ -0,0 +1,170 @@ +/// +/// Copyright © 2016-2023 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { Component, Injector } from '@angular/core'; +import { + legendPositions, + legendPositionTranslationMap, + WidgetSettings, + WidgetSettingsComponent +} from '@shared/models/widget.models'; +import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { formatValue } from '@core/utils'; +import { DateFormatProcessor, DateFormatSettings } from '@shared/models/widget-settings.models'; +import { + barChartWithLabelsDefaultSettings +} from '@home/components/widget/lib/chart/bar-chart-with-labels-widget.models'; + +@Component({ + selector: 'tb-bar-chart-with-labels-widget-settings', + templateUrl: './bar-chart-with-labels-widget-settings.component.html', + styleUrls: [] +}) +export class BarChartWithLabelsWidgetSettingsComponent extends WidgetSettingsComponent { + + legendPositions = legendPositions; + + legendPositionTranslationMap = legendPositionTranslationMap; + + barChartWidgetSettingsForm: UntypedFormGroup; + + tooltipValuePreviewFn = this._tooltipValuePreviewFn.bind(this); + + tooltipDatePreviewFn = this._tooltipDatePreviewFn.bind(this); + + constructor(protected store: Store, + private $injector: Injector, + private fb: UntypedFormBuilder) { + super(store); + } + + protected settingsForm(): UntypedFormGroup { + return this.barChartWidgetSettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return {...barChartWithLabelsDefaultSettings}; + } + + protected onSettingsSet(settings: WidgetSettings) { + this.barChartWidgetSettingsForm = this.fb.group({ + + showBarLabel: [settings.showBarLabel, []], + barLabelFont: [settings.barLabelFont, []], + barLabelColor: [settings.barLabelColor, []], + showBarValue: [settings.showBarValue, []], + barValueFont: [settings.barValueFont, []], + barValueColor: [settings.barValueColor, []], + + showLegend: [settings.showLegend, []], + legendPosition: [settings.legendPosition, []], + legendLabelFont: [settings.legendLabelFont, []], + legendLabelColor: [settings.legendLabelColor, []], + + showTooltip: [settings.showTooltip, []], + tooltipValueFont: [settings.tooltipValueFont, []], + tooltipValueColor: [settings.tooltipValueColor, []], + tooltipShowDate: [settings.tooltipShowDate, []], + tooltipDateFormat: [settings.tooltipDateFormat, []], + tooltipDateFont: [settings.tooltipDateFont, []], + tooltipDateColor: [settings.tooltipDateColor, []], + tooltipBackgroundColor: [settings.tooltipBackgroundColor, []], + tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []], + + background: [settings.background, []] + }); + } + + protected validatorTriggers(): string[] { + return ['showBarLabel', 'showBarValue', 'showLegend', 'showTooltip', 'tooltipShowDate']; + } + + protected updateValidators(emitEvent: boolean) { + const showBarLabel: boolean = this.barChartWidgetSettingsForm.get('showBarLabel').value; + const showBarValue: boolean = this.barChartWidgetSettingsForm.get('showBarValue').value; + const showLegend: boolean = this.barChartWidgetSettingsForm.get('showLegend').value; + const showTooltip: boolean = this.barChartWidgetSettingsForm.get('showTooltip').value; + const tooltipShowDate: boolean = this.barChartWidgetSettingsForm.get('tooltipShowDate').value; + + if (showBarLabel) { + this.barChartWidgetSettingsForm.get('barLabelFont').enable(); + this.barChartWidgetSettingsForm.get('barLabelColor').enable(); + } else { + this.barChartWidgetSettingsForm.get('barLabelFont').disable(); + this.barChartWidgetSettingsForm.get('barLabelColor').disable(); + } + + if (showBarValue) { + this.barChartWidgetSettingsForm.get('barValueFont').enable(); + this.barChartWidgetSettingsForm.get('barValueColor').enable(); + } else { + this.barChartWidgetSettingsForm.get('barValueFont').disable(); + this.barChartWidgetSettingsForm.get('barValueColor').disable(); + } + + if (showLegend) { + this.barChartWidgetSettingsForm.get('legendPosition').enable(); + this.barChartWidgetSettingsForm.get('legendLabelFont').enable(); + this.barChartWidgetSettingsForm.get('legendLabelColor').enable(); + } else { + this.barChartWidgetSettingsForm.get('legendPosition').disable(); + this.barChartWidgetSettingsForm.get('legendLabelFont').disable(); + this.barChartWidgetSettingsForm.get('legendLabelColor').disable(); + } + + if (showTooltip) { + this.barChartWidgetSettingsForm.get('tooltipValueFont').enable(); + this.barChartWidgetSettingsForm.get('tooltipValueColor').enable(); + this.barChartWidgetSettingsForm.get('tooltipShowDate').enable({emitEvent: false}); + this.barChartWidgetSettingsForm.get('tooltipBackgroundColor').enable(); + this.barChartWidgetSettingsForm.get('tooltipBackgroundBlur').enable(); + if (tooltipShowDate) { + this.barChartWidgetSettingsForm.get('tooltipDateFormat').enable(); + this.barChartWidgetSettingsForm.get('tooltipDateFont').enable(); + this.barChartWidgetSettingsForm.get('tooltipDateColor').enable(); + } else { + this.barChartWidgetSettingsForm.get('tooltipDateFormat').disable(); + this.barChartWidgetSettingsForm.get('tooltipDateFont').disable(); + this.barChartWidgetSettingsForm.get('tooltipDateColor').disable(); + } + } else { + this.barChartWidgetSettingsForm.get('tooltipValueFont').disable(); + this.barChartWidgetSettingsForm.get('tooltipValueColor').disable(); + this.barChartWidgetSettingsForm.get('tooltipShowDate').disable({emitEvent: false}); + this.barChartWidgetSettingsForm.get('tooltipDateFormat').disable(); + this.barChartWidgetSettingsForm.get('tooltipDateFont').disable(); + this.barChartWidgetSettingsForm.get('tooltipDateColor').disable(); + this.barChartWidgetSettingsForm.get('tooltipBackgroundColor').disable(); + this.barChartWidgetSettingsForm.get('tooltipBackgroundBlur').disable(); + } + } + + private _tooltipValuePreviewFn(): string { + const units: string = this.widgetConfig.config.units; + const decimals: number = this.widgetConfig.config.decimals; + return formatValue(22, decimals, units, false); + } + + private _tooltipDatePreviewFn(): string { + const dateFormat: DateFormatSettings = this.barChartWidgetSettingsForm.get('tooltipDateFormat').value; + const processor = DateFormatProcessor.fromSettings(this.$injector, dateFormat); + processor.update(Date.now()); + return processor.formatted; + } + +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.html index a0e76da09c..3975ee5f98 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.html @@ -70,14 +70,14 @@
{{ 'legend.position' | translate }}
- - {{ doughnutLegendPositionTranslationMap.get(pos) | translate }} + + {{ legendPositionTranslationMap.get(pos) | translate }}
-
{{ 'widgets.doughnut.legend-label' | translate }}
+
{{ 'legend.label' | translate }}
@@ -89,7 +89,7 @@
-
{{ 'widgets.doughnut.legend-value' | translate }}
+
{{ 'legend.value' | translate }}
@@ -109,13 +109,13 @@ - {{ 'widgets.doughnut.tooltip' | translate }} + {{ 'widget-config.tooltip' | translate }}
-
{{ 'widgets.doughnut.tooltip-value' | translate }}
+
{{ 'tooltip.value' | translate }}
@@ -138,14 +138,14 @@
-
{{ 'widgets.doughnut.tooltip-background-color' | translate }}
+
{{ 'tooltip.background-color' | translate }}
-
{{ 'widgets.doughnut.tooltip-background-blur' | translate }}
+
{{ 'tooltip.background-blur' | translate }}
px
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.ts index 220fc7c320..e9ad95be1b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.ts @@ -15,7 +15,12 @@ /// import { Component } from '@angular/core'; -import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; +import { + legendPositions, + legendPositionTranslationMap, + WidgetSettings, + WidgetSettingsComponent +} from '@shared/models/widget.models'; import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; @@ -26,8 +31,6 @@ import { doughnutLayoutImages, doughnutLayouts, doughnutLayoutTranslations, - doughnutLegendPositions, - doughnutLegendPositionTranslations, DoughnutTooltipValueType, doughnutTooltipValueTypes, doughnutTooltipValueTypeTranslations, @@ -55,9 +58,9 @@ export class DoughnutWidgetSettingsComponent extends WidgetSettingsComponent { doughnutLayoutImageMap: Map; - doughnutLegendPositions = doughnutLegendPositions; + legendPositions = legendPositions; - doughnutLegendPositionTranslationMap = doughnutLegendPositionTranslations; + legendPositionTranslationMap = legendPositionTranslationMap; doughnutTooltipValueTypes = doughnutTooltipValueTypes; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html index 155d09f53f..e3ce71491c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html @@ -62,7 +62,7 @@
-
{{ 'widgets.range-chart.legend-label' | translate }}
+
{{ 'legend.label' | translate }}
@@ -82,13 +82,13 @@ - {{ 'widgets.range-chart.tooltip' | translate }} + {{ 'widget-config.tooltip' | translate }}
-
{{ 'widgets.range-chart.tooltip-value' | translate }}
+
{{ 'tooltip.value' | translate }}
@@ -101,7 +101,7 @@
- {{ 'widgets.range-chart.tooltip-date' | translate }} + {{ 'tooltip.date' | translate }}
@@ -115,14 +115,14 @@
-
{{ 'widgets.range-chart.tooltip-background-color' | translate }}
+
{{ 'tooltip.background-color' | translate }}
-
{{ 'widgets.range-chart.tooltip-background-blur' | translate }}
+
{{ 'tooltip.background-blur' | translate }}
px
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.ts index 562001e3c4..3e7d328adf 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.ts @@ -27,7 +27,7 @@ import { import { PageComponent } from '@shared/components/page.component'; import { commonFonts, - ComponentStyle, + ComponentStyle, cssUnit, Font, fontStyles, fontStyleTranslations, @@ -73,6 +73,9 @@ export class FontSettingsPanelComponent extends PageComponent implements OnInit @coerceBoolean() disabledLineHeight = false; + @Input() + forceSizeUnit: cssUnit; + @Input() popover: TbPopoverComponent; @@ -106,7 +109,8 @@ export class FontSettingsPanelComponent extends PageComponent implements OnInit this.fontFormGroup = this.fb.group( { size: [{value: this.font?.size, disabled: this.autoScale}, [Validators.min(0)]], - sizeUnit: [{ value: (this.font?.sizeUnit || 'px'), disabled: this.autoScale}, []], + sizeUnit: [{ value: (!!this.forceSizeUnit ? + this.forceSizeUnit : (this.font?.sizeUnit || 'px')), disabled: this.autoScale || !!this.forceSizeUnit}, []], family: [this.font?.family, []], weight: [this.font?.weight, []], style: [this.font?.style, []], @@ -150,11 +154,14 @@ export class FontSettingsPanelComponent extends PageComponent implements OnInit } clearFont() { - this.fontFormGroup.reset({sizeUnit: 'px'}); + this.fontFormGroup.reset({sizeUnit: this.forceSizeUnit || 'px'}); this.fontFormGroup.markAsDirty(); } private updatePreviewStyle(font: Font) { + if (!!this.forceSizeUnit) { + font = {...font, ...{sizeUnit: this.forceSizeUnit}}; + } this.previewStyle = {...(this.initialPreviewStyle || {}), ...textStyle(font)}; } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings.component.ts index 0fc3b20da1..0530519c2d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings.component.ts @@ -16,7 +16,7 @@ import { Component, forwardRef, Input, OnInit, Renderer2, ViewContainerRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { ComponentStyle, Font } from '@shared/models/widget-settings.models'; +import { ComponentStyle, cssUnit, Font } from '@shared/models/widget-settings.models'; import { MatButton } from '@angular/material/button'; import { TbPopoverService } from '@shared/components/popover.service'; import { FontSettingsPanelComponent } from '@home/components/widget/lib/settings/common/font-settings-panel.component'; @@ -58,6 +58,9 @@ export class FontSettingsComponent implements OnInit, ControlValueAccessor { @coerceBoolean() disabledLineHeight = false; + @Input() + forceSizeUnit: cssUnit; + private modelValue: Font; private propagateChange = null; @@ -97,7 +100,8 @@ export class FontSettingsComponent implements OnInit, ControlValueAccessor { initialPreviewStyle: this.initialPreviewStyle, clearButton: this.clearButton, autoScale: this.autoScale, - disabledLineHeight: this.disabledLineHeight + disabledLineHeight: this.disabledLineHeight, + forceSizeUnit: this.forceSizeUnit }; if (isDefinedAndNotNull(this.previewText)) { const previewText = typeof this.previewText === 'string' ? this.previewText : this.previewText(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html index 808bbe11d9..19d3d98d5d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html @@ -70,14 +70,14 @@ - {{ 'widgets.signal-strength.tooltip' | translate }} + {{ 'widget-config.tooltip' | translate }}
- {{ 'widgets.signal-strength.value' | translate }} + {{ 'tooltip.value' | translate }}
- {{ 'widgets.signal-strength.date' | translate }} + {{ 'tooltip.date' | translate }}
@@ -105,13 +105,13 @@
-
{{ 'widgets.signal-strength.background-color' | translate }}
+
{{ 'tooltip.background-color' | translate }}
-
widgets.signal-strength.background-blur
+
tooltip.background-blur
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts index 5d1bce1745..ed53f82ffd 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts @@ -308,6 +308,9 @@ import { import { RangeChartWidgetSettingsComponent } from '@home/components/widget/lib/settings/chart/range-chart-widget-settings.component'; +import { + BarChartWithLabelsWidgetSettingsComponent +} from '@home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component'; @NgModule({ declarations: [ @@ -420,7 +423,8 @@ import { ProgressBarWidgetSettingsComponent, LiquidLevelCardWidgetSettingsComponent, DoughnutWidgetSettingsComponent, - RangeChartWidgetSettingsComponent + RangeChartWidgetSettingsComponent, + BarChartWithLabelsWidgetSettingsComponent ], imports: [ CommonModule, @@ -538,7 +542,8 @@ import { ProgressBarWidgetSettingsComponent, LiquidLevelCardWidgetSettingsComponent, DoughnutWidgetSettingsComponent, - RangeChartWidgetSettingsComponent + RangeChartWidgetSettingsComponent, + BarChartWithLabelsWidgetSettingsComponent ] }) export class WidgetSettingsModule { @@ -622,5 +627,6 @@ export const widgetSettingsComponentsMap: {[key: string]: Type max) { - newIntervalMs = max; + } else if (newIntervalMs >= max && updateToPreferred) { + newIntervalMs = this.timeService.boundMaxInterval(max / 7); } if (!this.advanced) { newIntervalMs = this.timeService.boundToPredefinedInterval(min, max, newIntervalMs); @@ -159,7 +159,7 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor { } } - updateView() { + updateView(updateToPreferred = false) { if (!this.rendered) { return; } @@ -178,7 +178,7 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor { } this.modelValue = value; this.propagateChange(this.modelValue); - this.boundInterval(); + this.boundInterval(updateToPreferred); } calculateIntervalMs(): number { diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 12de697bc8..de8d7706d5 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -3159,7 +3159,9 @@ "weeks": "(week ago)", "months": "(month ago)", "years": "(year ago)" - } + }, + "label": "Label", + "value": "Value" }, "login": { "login": "Login", @@ -4276,6 +4278,12 @@ "displayTypePrefix": "Display Realtime/History prefix", "preview": "Preview" }, + "tooltip": { + "value": "Value", + "date": "Date", + "background-color": "Background color", + "background-blur": "Background blur" + }, "unit": { "millimeter": "Millimeter", "centimeter": "Centimeter", @@ -5152,6 +5160,12 @@ "blur": "Blur", "preview": "Preview" }, + "bar-chart": { + "bar-appearance": "Bar appearance", + "label-on-bar": "Label on bar", + "value-on-bar": "Value on bar", + "bar-chart-card-style": "Bar chart card style" + }, "battery-level": { "layout": "Layout", "layout-vertical-solid": "Vertical. Solid", @@ -5177,9 +5191,6 @@ "date": "Date", "active-bars-color": "Active signal bars color", "inactive-bars-color": "Inactive signal bars color", - "tooltip": "Tooltip", - "background-color": "Background color", - "background-blur": "Background blur", "signal-strength-card-style": "Signal strength card style" }, "chart": { @@ -5422,18 +5433,8 @@ "clockwise-layout": "Clockwise layout", "sort-series": "Sort series by label", "central-total-value": "Central total value", - "legend-position-top": "Top", - "legend-position-bottom": "Bottom", - "legend-position-left": "Left", - "legend-position-right": "Right", - "legend-label": "Label", - "legend-value": "Value", - "tooltip": "Tooltip", - "tooltip-value": "Value", "tooltip-value-type-absolute": "Absolute", "tooltip-value-type-percentage": "Percentage", - "tooltip-background-color": "Background color", - "tooltip-background-blur": "Background blur", "doughnut-card-style": "Doughnut card style" }, "entities-hierarchy": { @@ -5915,12 +5916,6 @@ "range-colors": "Range colors", "out-of-range-color": "Out of range color", "fill-area": "Fill area", - "legend-label": "Label", - "tooltip": "Tooltip", - "tooltip-value": "Value", - "tooltip-date": "Date", - "tooltip-background-color": "Background color", - "tooltip-background-blur": "Background blur", "range-chart-card-style": "Range chart card style" }, "rpc": { diff --git a/ui-ngx/src/assets/locale/locale.constant-zh_CN.json b/ui-ngx/src/assets/locale/locale.constant-zh_CN.json index f0d07fa506..28c4d20f59 100644 --- a/ui-ngx/src/assets/locale/locale.constant-zh_CN.json +++ b/ui-ngx/src/assets/locale/locale.constant-zh_CN.json @@ -3087,7 +3087,9 @@ "weeks": "（一周前）", "months": "（一个月前）", "years": "（一年前）" - } + }, + "label": "标签", + "value": "值" }, "login": { "login": "登录", @@ -4197,6 +4199,12 @@ "displayTypePrefix": "显示实时/历史前缀", "preview": "预览" }, + "tooltip": { + "value": "值", + "date": "日期", + "background-color": "背景颜色", + "background-blur": "背景模糊" + }, "unit": { "millimeter": "mm", "centimeter": "cm", @@ -5082,9 +5090,6 @@ "date": "日期", "active-bars-color": "活动信号条颜色", "inactive-bars-color": "非活动信号条颜色", - "tooltip": "文字提示", - "background-color": "背景颜色", - "background-blur": "背景模糊", "signal-strength-card-style": "信号强度卡片样式" }, "chart": { @@ -5327,18 +5332,8 @@ "clockwise-layout": "顺时针布局", "sort-series": "按标签对系列排序", "central-total-value": "中央总计值", - "legend-position-top": "顶部", - "legend-position-bottom": "底部", - "legend-position-left": "左侧", - "legend-position-right": "右侧", - "legend-label": "标签", - "legend-value": "值", - "tooltip": "文字提示", - "tooltip-value": "值", "tooltip-value-type-absolute": "绝对值", "tooltip-value-type-percentage": "百分比", - "tooltip-background-color": "背景颜色", - "tooltip-background-blur": "背景模糊", "doughnut-card-style": "圆环样式" }, "entities-hierarchy": { @@ -5820,12 +5815,6 @@ "range-colors": "范围颜色", "out-of-range-color": "超出范围颜色", "fill-area": "填充区域", - "legend-label": "标签", - "tooltip": "文字提示", - "tooltip-value": "值", - "tooltip-date": "日期", - "tooltip-background-color": "背景颜色", - "tooltip-background-blur": "背景模糊", "range-chart-card-style": "范围图表卡片样式" }, "rpc": {