From ae830bb6d7cdb79723047be06d4b7621b1eb7069 Mon Sep 17 00:00:00 2001
From: Laura Fuentes Grau <laurafuentesgrau@gmail.com>
Date: Tue, 12 May 2020 19:18:27 +0200
Subject: [PATCH 1/2] Label Widget: maxWidth now changes dynamically with text
 and textSize #12

---
 src/widget/edit-widget/edit-widget.js | 18 +++++++++++++++---
 src/widget/widget-factory.js          |  2 +-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/widget/edit-widget/edit-widget.js b/src/widget/edit-widget/edit-widget.js
index c8517bd..9a9778a 100644
--- a/src/widget/edit-widget/edit-widget.js
+++ b/src/widget/edit-widget/edit-widget.js
@@ -65,12 +65,24 @@ class EditWidgetDialog extends React.Component {
     return changeObject;
   }
 
+  getTextWidth(text, fontSize) {
+    let font = fontSize + "px ariel";
+    let canvas = this.getTextWidth.canvas || (this.getTextWidth.canvas = document.createElement("canvas"));
+    let context = canvas.getContext("2d");
+    context.font = font;
+    let metrics = context.measureText(text);
+    return metrics.width;
+  }
+
   setMaxWidth(changeObject){
     if(changeObject.type === 'Label'){
-      changeObject.customProperties.maxWidth = (changeObject.customProperties.textSize* 0.34) * changeObject.name.length;
+      changeObject.customProperties.maxWidth = Math.ceil(this.getTextWidth(changeObject.name, changeObject.customProperties.textSize));
     }
-    else if (changeObject.type === 'Value'){
-    //  changeObject.customProperties.maxWidth = (changeObject.customProperties.textSize* 0.5) * (changeObject.name.length+13);
+    /*else if (changeObject.type === 'Value'){
+      changeObject.customProperties.maxWidth = Math.ceil(this.getTextWidth(changeObject.name, changeObject.customProperties.textSize));
+    }*/
+    if(this.state.temporal.width > changeObject.customProperties.maxWidth){
+      changeObject.width = changeObject.customProperties.maxWidth;
     }
     return changeObject;
   }
diff --git a/src/widget/widget-factory.js b/src/widget/widget-factory.js
index 7fc407d..b1899c4 100644
--- a/src/widget/widget-factory.js
+++ b/src/widget/widget-factory.js
@@ -70,7 +70,7 @@ class WidgetFactory {
             case 'Value':
                 widget.minWidth = 70;
                 widget.minHeight = 20;
-                widget.width = 150;
+                widget.width = 110;
                 widget.height = 30;
                 widget.customProperties.textSize = 16;
                 widget.name = 'Value';

From bb08991e9cdf7b037383dfef9bb9aa7b4b134716 Mon Sep 17 00:00:00 2001
From: Laura Fuentes Grau <laurafuentesgrau@gmail.com>
Date: Tue, 12 May 2020 19:27:51 +0200
Subject: [PATCH 2/2] fix for issues while adding a new dashboard

---
 src/dashboard/new-dashboard.js |  2 +-
 src/scenario/scenario.js       | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/dashboard/new-dashboard.js b/src/dashboard/new-dashboard.js
index e71fdbc..6f4b9da 100644
--- a/src/dashboard/new-dashboard.js
+++ b/src/dashboard/new-dashboard.js
@@ -69,7 +69,7 @@ class NewDashboardDialog extends React.Component {
     return (
       <Dialog show={this.props.show} title="New Dashboard" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
         <form>
-          <FormGroup controlId="name" validationState={this.validateForm('name')}>
+          <FormGroup controlId="name" validationstate={this.validateForm('name')}>
             <FormLabel>Name</FormLabel>
             <FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
             <FormControl.Feedback />
diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js
index 1cd8706..ba55f34 100644
--- a/src/scenario/scenario.js
+++ b/src/scenario/scenario.js
@@ -292,12 +292,12 @@ class Scenario extends React.Component {
 
   closeNewDashboardModal(data) {
     this.setState({ newDashboardModal : false });
-    let newDashboard = data;
-    // add default grid value and scenarioID
-    newDashboard["grid"] = 15;
-    newDashboard["scenarioID"] = this.state.scenario.id;
-
     if (data) {
+      let newDashboard = data;
+      // add default grid value and scenarioID
+      newDashboard["grid"] = 15;
+      newDashboard["scenarioID"] = this.state.scenario.id;
+
       AppDispatcher.dispatch({
         type: 'dashboards/start-add',
         data,