IDEMPIERE-5400 - Gauge Indicator Style and Color Improvement (#1470)

* IDEMPIERE-5400 - Gauge Indicator Style and Color Improvement

* IDEMPIERE-5400 - patch pr1470
This commit is contained in:
Peter Takács 2022-09-09 08:14:50 +02:00 committed by GitHub
parent 8589601b49
commit 27d01814e7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 126 additions and 14 deletions

View File

@ -0,0 +1,54 @@
-- IDEMPIERE-5400-style
SELECT register_migration_script('202209081125_IDEMPIERE-5400.sql') FROM dual;
SET SQLBLANKLINES ON
SET DEFINE OFF
-- Sep 8, 2022, 11:25:57 AM CEST
UPDATE AD_Field SET DisplayLogic='@AD_Chart_ID@ > 0 | @PA_Goal_ID@ > 0', SeqNo=170, AD_Reference_Value_ID=NULL, AD_Val_Rule_ID=NULL, IsToolbarButton=NULL,Updated=TO_TIMESTAMP('2022-09-08 11:25:57','YYYY-MM-DD HH24:MI:SS'),UpdatedBy=100 WHERE AD_Field_ID=207125
;
-- Sep 8, 2022, 11:26:22 AM CEST
UPDATE AD_Field SET SeqNo=170, AD_Reference_Value_ID=NULL, AD_Val_Rule_ID=NULL, IsToolbarButton=NULL,Updated=TO_TIMESTAMP('2022-09-08 11:26:22','YYYY-MM-DD HH24:MI:SS'),UpdatedBy=100 WHERE AD_Field_ID=207135
;
-- Sep 8, 2022, 11:26:22 AM CEST
UPDATE AD_Field SET IsDisplayed='Y', SeqNo=180, AD_Reference_Value_ID=NULL, AD_Val_Rule_ID=NULL, XPosition=2, IsToolbarButton=NULL,Updated=TO_TIMESTAMP('2022-09-08 11:26:22','YYYY-MM-DD HH24:MI:SS'),UpdatedBy=100 WHERE AD_Field_ID=207187
;
-- Sep 8, 2022, 11:26:22 AM CEST
UPDATE AD_Field SET IsDisplayed='Y', SeqNo=190, AD_Reference_Value_ID=NULL, AD_Val_Rule_ID=NULL, XPosition=4, IsToolbarButton=NULL,Updated=TO_TIMESTAMP('2022-09-08 11:26:22','YYYY-MM-DD HH24:MI:SS'),UpdatedBy=100 WHERE AD_Field_ID=207125
;
-- Sep 8, 2022, 11:26:22 AM CEST
UPDATE AD_Field SET SeqNo=200, AD_Reference_Value_ID=NULL, AD_Val_Rule_ID=NULL, IsToolbarButton=NULL,Updated=TO_TIMESTAMP('2022-09-08 11:26:22','YYYY-MM-DD HH24:MI:SS'),UpdatedBy=100 WHERE AD_Field_ID=56504
;
-- Sep 8, 2022, 11:26:22 AM CEST
UPDATE AD_Field SET SeqNo=210, AD_Reference_Value_ID=NULL, AD_Val_Rule_ID=NULL, IsToolbarButton=NULL,Updated=TO_TIMESTAMP('2022-09-08 11:26:22','YYYY-MM-DD HH24:MI:SS'),UpdatedBy=100 WHERE AD_Field_ID=200268
;
-- Sep 8, 2022, 12:14:11 PM CEST
INSERT INTO AD_PrintColor (CreatedBy,Created,AD_Client_ID,AD_PrintColor_ID,AD_Org_ID,IsDefault,Code,Name,IsActive,UpdatedBy,Updated,AD_PrintColor_UU) VALUES (100,TO_TIMESTAMP('2022-09-08 12:14:11','YYYY-MM-DD HH24:MI:SS'),0,200000,0,'N','14248035','Metabase Green','Y',100,TO_TIMESTAMP('2022-09-08 12:14:11','YYYY-MM-DD HH24:MI:SS'),'2d6610c2-cce4-4568-8e4a-827fe6cb2ae0')
;
-- Sep 8, 2022, 12:14:59 PM CEST
INSERT INTO AD_PrintColor (CreatedBy,Created,AD_Client_ID,AD_PrintColor_ID,AD_Org_ID,IsDefault,Code,Name,IsActive,UpdatedBy,Updated,AD_PrintColor_UU) VALUES (100,TO_TIMESTAMP('2022-09-08 12:14:59','YYYY-MM-DD HH24:MI:SS'),0,200001,0,'N','16042069','Metabase Yellow','Y',100,TO_TIMESTAMP('2022-09-08 12:14:59','YYYY-MM-DD HH24:MI:SS'),'00d930ae-eaf7-468b-a1a3-c913c23513af')
;
-- Sep 8, 2022, 12:15:35 PM CEST
UPDATE AD_PrintColor SET Name='Metabase Red',Updated=TO_TIMESTAMP('2022-09-08 12:15:35','YYYY-MM-DD HH24:MI:SS'),UpdatedBy=100 WHERE AD_PrintColor_ID=200000
;
-- Sep 8, 2022, 12:16:08 PM CEST
INSERT INTO AD_PrintColor (CreatedBy,Created,AD_Client_ID,AD_PrintColor_ID,AD_Org_ID,IsDefault,Code,Name,IsActive,UpdatedBy,Updated,AD_PrintColor_UU) VALUES (100,TO_TIMESTAMP('2022-09-08 12:16:08','YYYY-MM-DD HH24:MI:SS'),0,200002,0,'N','8564560','Metabase Green','Y',100,TO_TIMESTAMP('2022-09-08 12:16:08','YYYY-MM-DD HH24:MI:SS'),'9e2db602-f7bd-49b3-aea7-7920ea6c26d6')
;
-- Sep 8, 2022, 12:16:51 PM CEST
UPDATE PA_ColorSchema SET AD_PrintColor1_ID=200000, AD_PrintColor2_ID=200001, AD_PrintColor3_ID=200002,Updated=TO_TIMESTAMP('2022-09-08 12:16:51','YYYY-MM-DD HH24:MI:SS'),UpdatedBy=100 WHERE PA_ColorSchema_ID=100
;
-- Sep 8, 2022, 12:17:07 PM CEST
UPDATE PA_ColorSchema SET AD_PrintColor1_ID=200002, AD_PrintColor2_ID=200001, AD_PrintColor3_ID=200000,Updated=TO_TIMESTAMP('2022-09-08 12:17:07','YYYY-MM-DD HH24:MI:SS'),UpdatedBy=100 WHERE PA_ColorSchema_ID=101
;

View File

@ -0,0 +1,51 @@
-- IDEMPIERE-5400-style
SELECT register_migration_script('202209081125_IDEMPIERE-5400.sql') FROM dual;
-- Sep 8, 2022, 11:25:57 AM CEST
UPDATE AD_Field SET DisplayLogic='@AD_Chart_ID@ > 0 | @PA_Goal_ID@ > 0', SeqNo=170, AD_Reference_Value_ID=NULL, AD_Val_Rule_ID=NULL, IsToolbarButton=NULL,Updated=TO_TIMESTAMP('2022-09-08 11:25:57','YYYY-MM-DD HH24:MI:SS'),UpdatedBy=100 WHERE AD_Field_ID=207125
;
-- Sep 8, 2022, 11:26:22 AM CEST
UPDATE AD_Field SET SeqNo=170, AD_Reference_Value_ID=NULL, AD_Val_Rule_ID=NULL, IsToolbarButton=NULL,Updated=TO_TIMESTAMP('2022-09-08 11:26:22','YYYY-MM-DD HH24:MI:SS'),UpdatedBy=100 WHERE AD_Field_ID=207135
;
-- Sep 8, 2022, 11:26:22 AM CEST
UPDATE AD_Field SET IsDisplayed='Y', SeqNo=180, AD_Reference_Value_ID=NULL, AD_Val_Rule_ID=NULL, XPosition=2, IsToolbarButton=NULL,Updated=TO_TIMESTAMP('2022-09-08 11:26:22','YYYY-MM-DD HH24:MI:SS'),UpdatedBy=100 WHERE AD_Field_ID=207187
;
-- Sep 8, 2022, 11:26:22 AM CEST
UPDATE AD_Field SET IsDisplayed='Y', SeqNo=190, AD_Reference_Value_ID=NULL, AD_Val_Rule_ID=NULL, XPosition=4, IsToolbarButton=NULL,Updated=TO_TIMESTAMP('2022-09-08 11:26:22','YYYY-MM-DD HH24:MI:SS'),UpdatedBy=100 WHERE AD_Field_ID=207125
;
-- Sep 8, 2022, 11:26:22 AM CEST
UPDATE AD_Field SET SeqNo=200, AD_Reference_Value_ID=NULL, AD_Val_Rule_ID=NULL, IsToolbarButton=NULL,Updated=TO_TIMESTAMP('2022-09-08 11:26:22','YYYY-MM-DD HH24:MI:SS'),UpdatedBy=100 WHERE AD_Field_ID=56504
;
-- Sep 8, 2022, 11:26:22 AM CEST
UPDATE AD_Field SET SeqNo=210, AD_Reference_Value_ID=NULL, AD_Val_Rule_ID=NULL, IsToolbarButton=NULL,Updated=TO_TIMESTAMP('2022-09-08 11:26:22','YYYY-MM-DD HH24:MI:SS'),UpdatedBy=100 WHERE AD_Field_ID=200268
;
-- Sep 8, 2022, 12:14:11 PM CEST
INSERT INTO AD_PrintColor (CreatedBy,Created,AD_Client_ID,AD_PrintColor_ID,AD_Org_ID,IsDefault,Code,Name,IsActive,UpdatedBy,Updated,AD_PrintColor_UU) VALUES (100,TO_TIMESTAMP('2022-09-08 12:14:11','YYYY-MM-DD HH24:MI:SS'),0,200000,0,'N','14248035','Metabase Green','Y',100,TO_TIMESTAMP('2022-09-08 12:14:11','YYYY-MM-DD HH24:MI:SS'),'2d6610c2-cce4-4568-8e4a-827fe6cb2ae0')
;
-- Sep 8, 2022, 12:14:59 PM CEST
INSERT INTO AD_PrintColor (CreatedBy,Created,AD_Client_ID,AD_PrintColor_ID,AD_Org_ID,IsDefault,Code,Name,IsActive,UpdatedBy,Updated,AD_PrintColor_UU) VALUES (100,TO_TIMESTAMP('2022-09-08 12:14:59','YYYY-MM-DD HH24:MI:SS'),0,200001,0,'N','16042069','Metabase Yellow','Y',100,TO_TIMESTAMP('2022-09-08 12:14:59','YYYY-MM-DD HH24:MI:SS'),'00d930ae-eaf7-468b-a1a3-c913c23513af')
;
-- Sep 8, 2022, 12:15:35 PM CEST
UPDATE AD_PrintColor SET Name='Metabase Red',Updated=TO_TIMESTAMP('2022-09-08 12:15:35','YYYY-MM-DD HH24:MI:SS'),UpdatedBy=100 WHERE AD_PrintColor_ID=200000
;
-- Sep 8, 2022, 12:16:08 PM CEST
INSERT INTO AD_PrintColor (CreatedBy,Created,AD_Client_ID,AD_PrintColor_ID,AD_Org_ID,IsDefault,Code,Name,IsActive,UpdatedBy,Updated,AD_PrintColor_UU) VALUES (100,TO_TIMESTAMP('2022-09-08 12:16:08','YYYY-MM-DD HH24:MI:SS'),0,200002,0,'N','8564560','Metabase Green','Y',100,TO_TIMESTAMP('2022-09-08 12:16:08','YYYY-MM-DD HH24:MI:SS'),'9e2db602-f7bd-49b3-aea7-7920ea6c26d6')
;
-- Sep 8, 2022, 12:16:51 PM CEST
UPDATE PA_ColorSchema SET AD_PrintColor1_ID=200000, AD_PrintColor2_ID=200001, AD_PrintColor3_ID=200002,Updated=TO_TIMESTAMP('2022-09-08 12:16:51','YYYY-MM-DD HH24:MI:SS'),UpdatedBy=100 WHERE PA_ColorSchema_ID=100
;
-- Sep 8, 2022, 12:17:07 PM CEST
UPDATE PA_ColorSchema SET AD_PrintColor1_ID=200002, AD_PrintColor2_ID=200001, AD_PrintColor3_ID=200000,Updated=TO_TIMESTAMP('2022-09-08 12:17:07','YYYY-MM-DD HH24:MI:SS'),UpdatedBy=100 WHERE PA_ColorSchema_ID=101
;

View File

@ -43,11 +43,11 @@ public class WPAWidget extends Panel {
/************************************************************************** /**************************************************************************
* Constructor * Constructor
*/ */
public WPAWidget (MGoal goal, Options options) public WPAWidget (MGoal goal, Options options, boolean isShowTitle)
{ {
super(); super();
goal.updateGoal(false); goal.updateGoal(false);
init(goal, options); init(goal, options, isShowTitle);
} }
/** /**
@ -55,7 +55,7 @@ public class WPAWidget extends Panel {
* @param goal * @param goal
* @param options * @param options
*/ */
private void init(MGoal goal, Options options) private void init(MGoal goal, Options options, boolean isShowTitle)
{ {
Div div = new Div(); Div div = new Div();
appendChild(div); appendChild(div);
@ -63,10 +63,12 @@ public class WPAWidget extends Panel {
div.appendChild(pi); div.appendChild(pi);
if (goal.getMeasure() != null) if (goal.getMeasure() != null)
pi.addEventListener(Events.ON_CLICK, e -> new WPerformanceDetail(pi.getGoal())); //Action Listener for Drill Down pi.addEventListener(Events.ON_CLICK, e -> new WPerformanceDetail(pi.getGoal())); //Action Listener for Drill Down
Div titleDiv = new Div(); if(isShowTitle) {
titleDiv.setSclass("performance-indicator-title"); Div titleDiv = new Div();
Label label = new Label(pi.getTitle()); titleDiv.setSclass("gauge-indicator-title");
div.appendChild(titleDiv); Label label = new Label(pi.getTitle());
titleDiv.appendChild(label); div.appendChild(titleDiv);
titleDiv.appendChild(label);
}
} // init } // init
} }

View File

@ -13,6 +13,7 @@
*****************************************************************************/ *****************************************************************************/
package org.adempiere.webui.desktop; package org.adempiere.webui.desktop;
import java.awt.Color;
import java.io.BufferedReader; import java.io.BufferedReader;
import java.io.File; import java.io.File;
import java.io.InputStreamReader; import java.io.InputStreamReader;
@ -39,6 +40,7 @@ import org.adempiere.webui.apps.graph.IChartRendererService;
import org.adempiere.webui.apps.graph.WGraph; import org.adempiere.webui.apps.graph.WGraph;
import org.adempiere.webui.apps.graph.WPAWidget; import org.adempiere.webui.apps.graph.WPAWidget;
import org.adempiere.webui.apps.graph.WPerformanceDetail; import org.adempiere.webui.apps.graph.WPerformanceDetail;
import org.adempiere.webui.apps.graph.WPerformanceIndicator;
import org.adempiere.webui.apps.graph.model.ChartModel; import org.adempiere.webui.apps.graph.model.ChartModel;
import org.adempiere.webui.component.ToolBarButton; import org.adempiere.webui.component.ToolBarButton;
import org.adempiere.webui.dashboard.DashboardPanel; import org.adempiere.webui.dashboard.DashboardPanel;
@ -671,7 +673,10 @@ public class DashboardController implements EventListener<Event> {
String goalDisplay = dc.getGoalDisplay(); String goalDisplay = dc.getGoalDisplay();
MGoal goal = new MGoal(Env.getCtx(), PA_Goal_ID, null); MGoal goal = new MGoal(Env.getCtx(), PA_Goal_ID, null);
if(MDashboardContent.GOALDISPLAY_GaugeIndicator.equals(goalDisplay)) { if(MDashboardContent.GOALDISPLAY_GaugeIndicator.equals(goalDisplay)) {
WPAWidget paWidget = new WPAWidget(goal, null); WPerformanceIndicator.Options options = new WPerformanceIndicator.Options();
options.colorMap = new HashMap<String, Color>();
options.colorMap.put(WPerformanceIndicator.DIAL_BACKGROUND, new Color(224, 224, 224, 1));
WPAWidget paWidget = new WPAWidget(goal, options, dc.isShowTitle());
((HtmlBasedComponent)content).setSclass("performance-gadget"); ((HtmlBasedComponent)content).setSclass("performance-gadget");
content.appendChild(paWidget); content.appendChild(paWidget);
} }

View File

@ -231,7 +231,7 @@
width: 100%; width: 100%;
} }
.performance-indicator-title { .gauge-indicator-title {
text-align: center; text-align: center;
padding-top: 1px; padding-top: 1px;
padding-bottom: 1px; padding-bottom: 1px;

View File

@ -6,7 +6,7 @@
<language-name>xul/html</language-name> <language-name>xul/html</language-name>
<version> <version>
<version-class>org.idempiere.zk.billboard.Version</version-class> <version-class>org.idempiere.zk.billboard.Version</version-class>
<version-uid>3.5.1.20220905</version-uid> <version-uid>3.5.1.20220908</version-uid>
</version> </version>
<component> <component>
<component-name>billboard</component-name> <component-name>billboard</component-name>
@ -19,7 +19,7 @@
</component> </component>
<stylesheet href="~./js/zul/billboard/css/billboard.css" type="text/css"/> <stylesheet href="~./js/zul/billboard/css/billboard.css" type="text/css"/>
<javascript-module name="zul.billboard" version="3.5.1.20220905"/> <javascript-module name="zul.billboard" version="3.5.1.20220908"/>
<!-- this js module doesn't actually exists and it is here for billboard.css version --> <!-- this js module doesn't actually exists and it is here for billboard.css version -->
<javascript-module name="zul.billboard.css" version="3.5.1.20220905"/> <javascript-module name="zul.billboard.css" version="3.5.1.20220905"/>
</language-addon> </language-addon>

View File

@ -32,5 +32,5 @@ package org.idempiere.zk.billboard;
public class Version { public class Version {
/** Returns the version UID. /** Returns the version UID.
*/ */
public static final String UID = "3.5.1.20220905"; public static final String UID = "3.5.1.20220908";
} }

View File

@ -5,7 +5,7 @@ billboard.GaugeRenderer = function() {};
billboard.GaugeRenderer.prototype.render = function(wgt) { billboard.GaugeRenderer.prototype.render = function(wgt) {
var columns = [wgt.getSeriesData()[0], wgt.getSeriesData()[1]]; var columns = [wgt.getSeriesData()[0], wgt.getSeriesData()[1]];
var color = {}; var color = {};
var gauge = {units: "%"}; var gauge = {units: ""};
var rendererOptions = wgt._rendererOptions ? jq.evalJSON(wgt._rendererOptions) : null; var rendererOptions = wgt._rendererOptions ? jq.evalJSON(wgt._rendererOptions) : null;
if (rendererOptions) { if (rendererOptions) {
if (rendererOptions["intervalColors"]) { if (rendererOptions["intervalColors"]) {