From 78576127d42aa17c7854d42cbdfc6d237b31857e Mon Sep 17 00:00:00 2001
From: clavay <clavayssiere@univ-pau.fr>
Date: Thu, 16 May 2024 11:51:49 +0200
Subject: [PATCH 1/3] move style to css file

---
 pyscada/hmi/static/pyscada/css/pyscada/pyscada-theme.css | 2 ++
 pyscada/hmi/templates/chart.html                         | 2 +-
 pyscada/hmi/templates/circular_gauge.html                | 2 +-
 pyscada/hmi/templates/pie.html                           | 2 +-
 4 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/pyscada/hmi/static/pyscada/css/pyscada/pyscada-theme.css b/pyscada/hmi/static/pyscada/css/pyscada/pyscada-theme.css
index fa6fda71..9a58b263 100644
--- a/pyscada/hmi/static/pyscada/css/pyscada/pyscada-theme.css
+++ b/pyscada/hmi/static/pyscada/css/pyscada/pyscada-theme.css
@@ -244,6 +244,8 @@ html,body {
 	position: relative;
 	min-height: 1px;
 	float: left;
+	height:450px;
+	width:100%;
 }
 .half-size-chart{
 	float: left;
diff --git a/pyscada/hmi/templates/chart.html b/pyscada/hmi/templates/chart.html
index 556ae31d..2c9c2955 100644
--- a/pyscada/hmi/templates/chart.html
+++ b/pyscada/hmi/templates/chart.html
@@ -1,6 +1,6 @@
 <div class="widget-body chart-body {{ widget_extra_css_class }}" id="widget-body-{{ widget_pk }}-ch-{{chart.pk}}">
     {% if chart.x_axis_var is not None %}<div class="hidden variable-config" data-name="{{ chart.x_axis_var.name }}" data-key="{{ chart.x_axis_var.id }}" data-init-type="1" data-type="variable"></div>{% endif %}
-    <div class="main-chart-area" style="height:450px; width:100%;">
+    <div class="main-chart-area">
         <div id="chart-container-{{ widget_pk }}-{{chart.pk}}" class="chart-container" style="width: 100%; height:100%;"
              data-xaxis='{"id":"{% if chart.x_axis_var is not None %}{{chart.x_axis_var.id}}{% else %}False{% endif %}","linlog":"{% if chart.x_axis_linlog %}True{% else %}False{% endif %}"}'
              data-xaxis-ticks='{{chart.x_axis_ticks}}'
diff --git a/pyscada/hmi/templates/circular_gauge.html b/pyscada/hmi/templates/circular_gauge.html
index 26c7b8f5..25fa5f8c 100644
--- a/pyscada/hmi/templates/circular_gauge.html
+++ b/pyscada/hmi/templates/circular_gauge.html
@@ -1,5 +1,5 @@
 <div class="widget-body gauge-body {{ widget_extra_css_class }}" id="widget-body-{{ widget_pk }}-gauge-{{ item.pk }}">
-    <div class="main-chart-area" style="height:450px; width:100%;">
+    <div class="main-chart-area">
         <div id="chart-container-{{ widget_pk }}-{{ item.pk }}" class="gauge-container" style="width: 100%; height:100%;" data-id="{{ item.web_id }}-{{ uuid }}" data-params='{{ item.gauge_params }}' >
             <div class="chart-placeholder"><div class="loading-gauge" style="vertical-align: middle;">Loading gauge...</div></div>
             <div class="gauge-title" style="display: none; text-align: center; font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; width: 100%; top: -14px; cursor: default;">{{ item.label }} ({{ item.unit }})</div>
diff --git a/pyscada/hmi/templates/pie.html b/pyscada/hmi/templates/pie.html
index 76262758..7646f356 100644
--- a/pyscada/hmi/templates/pie.html
+++ b/pyscada/hmi/templates/pie.html
@@ -1,5 +1,5 @@
 <div class="widget-body pie-body {{ widget_extra_css_class }}" id="widget-body-{{ widget_pk }}-pie-{{pie.pk}}">
-    <div class="main-chart-area" style="height:450px; width:100%;">
+    <div class="main-chart-area">
         <div id="chart-container-{{ widget_pk }}-{{pie.pk}}" class="pie-container" style="width: 100%; height:100%;" data-radius='{"radius":"{{pie.radius}}","innerRadius":"{{pie.innerRadius}}"}' >
             <div class="chartTitle">{{pie.title}}</div>
             <div class="chart-placeholder"></div>

From c01882f84bb85f28324b8fee12a8812fb9e5340d Mon Sep 17 00:00:00 2001
From: clavay <clavayssiere@univ-pau.fr>
Date: Thu, 16 May 2024 11:52:31 +0200
Subject: [PATCH 2/3] limit legend max height to the chart height

---
 pyscada/hmi/static/pyscada/css/pyscada/pyscada-theme.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/pyscada/hmi/static/pyscada/css/pyscada/pyscada-theme.css b/pyscada/hmi/static/pyscada/css/pyscada/pyscada-theme.css
index 9a58b263..93dbd2e1 100644
--- a/pyscada/hmi/static/pyscada/css/pyscada/pyscada-theme.css
+++ b/pyscada/hmi/static/pyscada/css/pyscada/pyscada-theme.css
@@ -314,6 +314,11 @@ html,body {
 
 }
 
+.legend-sidebar .legend {
+	max-height: 450px;
+	overflow-y: scroll;
+}
+
 .legendTitle {
 	font-size: 12px;
 }

From 3933df22a59d0b1dcc1306f94260ed4264721119 Mon Sep 17 00:00:00 2001
From: clavay <clavayssiere@univ-pau.fr>
Date: Tue, 21 May 2024 14:26:32 +0200
Subject: [PATCH 3/3] legend auto overflow

better than "scroll" to hide the scroll bar if not needed
---
 pyscada/hmi/static/pyscada/css/pyscada/pyscada-theme.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pyscada/hmi/static/pyscada/css/pyscada/pyscada-theme.css b/pyscada/hmi/static/pyscada/css/pyscada/pyscada-theme.css
index 93dbd2e1..12676d88 100644
--- a/pyscada/hmi/static/pyscada/css/pyscada/pyscada-theme.css
+++ b/pyscada/hmi/static/pyscada/css/pyscada/pyscada-theme.css
@@ -316,7 +316,7 @@ html,body {
 
 .legend-sidebar .legend {
 	max-height: 450px;
-	overflow-y: scroll;
+	overflow-y: auto;
 }
 
 .legendTitle {