Add responsive width/height ratio, resolves responsive issue where the height is very small

Jelte Lagendijk · Jelte Lagendijk · commit 94b242a570bd · 2016-04-20T19:12:45.000+02:00
diff --git a/src/ChartJS/widgets/BarChart/BarChart.xml b/src/ChartJS/widgets/BarChart/BarChart.xml
@@ -37,6 +37,11 @@
             <category>Appearance</category>
 			<description>Initial height of the chart canvas, will be ignored when responsive property is set to 'Yes'</description>
         </property>
+        <property key="responsiveRatio" type="integer" required="true" defaultValue="0">
+            <caption>Responsive w/h ratio (%)</caption>
+            <category>Appearance</category>
+			<description>Responsive is set to 'true': Responsive width height ratio default value is 0, which means it will set the height of the chart the same height as the container. If you set this value to a certain number, it will create a chart where the height is a percentage of the width. So 100 means the height will be 100% of the width (a square)</description>
+        </property>
         <property key="labelFont" type="string" required="true" defaultValue="Helvetica Neue">
             <caption>Font</caption>
             <category>Appearance</category>
diff --git a/src/ChartJS/widgets/Core.js b/src/ChartJS/widgets/Core.js
@@ -51,6 +51,9 @@ define([
         // Template path
         templateString: _chartJSTemplate,
 
+        // Set in modeler
+        responsiveRatio: 0,
+
         // Internal variables
         _chartJS: null,
         _chart: null,
@@ -142,8 +145,10 @@ define([
 
             if (this._handle !== null) {
                 mx.data.unsubscribe(this._handle);
+                this._handle = null;
             }
-            if(this._mxObj) {
+
+            if (this._mxObj) {
                 this._handle = mx.data.subscribe({
                     guid: this._mxObj.getGuid(),
                     callback: lang.hitch(this, this._loadData)
@@ -155,9 +160,8 @@ define([
             } else {
                 domStyle.set(this.domNode, "display", "none");
             }
-            if (typeof callback !== "undefined") {
-                callback();
-            }
+
+            mendix.lang.nullExec(callback);
         },
 
         _loadData: function () {
@@ -285,16 +289,20 @@ define([
             var position = domGeom.position(this.domNode.parentElement, false);
             domAttr.set(this.canvasNode, "id", "canvasid_" + this.id);
 
-            logger.debug(this.id + ".createCtx", position);
-
             if (position.w > 0 && this.responsive) {
                 this.canvasNode.width = position.w;
             } else {
                 this.canvasNode.width = this.width;
             }
 
-            if (position.h > 0 && this.responsive) {
-                this.canvasNode.height = position.h;
+            if (this.responsive) {
+                if (this.responsiveRatio > 0) {
+                    this.canvasNode.height = Math.round(this.canvasNode.width * (this.responsiveRatio / 100));
+                } else if (position.h > 0) {
+                    this.canvasNode.height = position.h;
+                } else {
+                    this.canvasNode.height = this.height;
+                }
             } else {
                 this.canvasNode.height = this.height;
             }
diff --git a/src/ChartJS/widgets/DoughnutChart/DoughnutChart.xml b/src/ChartJS/widgets/DoughnutChart/DoughnutChart.xml
@@ -17,6 +17,11 @@
                 <category>Appearance</category>
 				<description>Initial height of the chart canvas, will be ignored when responsive property is set to 'Yes'</description>
             </property>
+            <property key="responsiveRatio" type="integer" required="true" defaultValue="0">
+                <caption>Responsive w/h ratio (%)</caption>
+                <category>Appearance</category>
+                <description>Responsive is set to 'true': Responsive width height ratio default value is 0, which means it will set the height of the chart the same height as the container. If you set this value to a certain number, it will create a chart where the height is a percentage of the width. So 100 means the height will be 100% of the width (a square)</description>
+            </property>
             <property key="labelFont" type="string" required="true" defaultValue="Helvetica Neue">
                 <caption>Font</caption>
                 <category>Appearance</category>
diff --git a/src/ChartJS/widgets/LineChart/LineChart.xml b/src/ChartJS/widgets/LineChart/LineChart.xml
@@ -44,6 +44,11 @@
             <category>Appearance</category>
 			<description>Initial height of the chart canvas, will be ignored when responsive property is set to 'Yes'</description>
         </property>
+        <property key="responsiveRatio" type="integer" required="true" defaultValue="0">
+            <caption>Responsive w/h ratio (%)</caption>
+            <category>Appearance</category>
+            <description>Responsive is set to 'true': Responsive width height ratio default value is 0, which means it will set the height of the chart the same height as the container. If you set this value to a certain number, it will create a chart where the height is a percentage of the width. So 100 means the height will be 100% of the width (a square)</description>
+        </property>
         <property key="labelFont" type="string" required="true" defaultValue="Helvetica Neue">
             <caption>Font</caption>
             <category>Appearance</category>
diff --git a/src/ChartJS/widgets/PieChart/PieChart.xml b/src/ChartJS/widgets/PieChart/PieChart.xml
@@ -20,6 +20,11 @@
             <category>Appearance</category>
 			<description>Initial height of the chart canvas, will be ignored when responsive property is set to 'Yes'</description>
         </property>
+        <property key="responsiveRatio" type="integer" required="true" defaultValue="0">
+            <caption>Responsive w/h ratio (%)</caption>
+            <category>Appearance</category>
+            <description>Responsive is set to 'true': Responsive width height ratio default value is 0, which means it will set the height of the chart the same height as the container. If you set this value to a certain number, it will create a chart where the height is a percentage of the width. So 100 means the height will be 100% of the width (a square)</description>
+        </property>
         <property key="labelFont" type="string" required="true" defaultValue="Helvetica Neue">
             <caption>Font</caption>
             <category>Appearance</category>
diff --git a/src/ChartJS/widgets/PolarChart/PolarChart.xml b/src/ChartJS/widgets/PolarChart/PolarChart.xml
@@ -17,6 +17,11 @@
 				<category>Appearance</category>
 				<description>Initial height of the chart canvas, will be ignored when responsive property is set to 'Yes'</description>
 			</property>
+            <property key="responsiveRatio" type="integer" required="true" defaultValue="0">
+                <caption>Responsive w/h ratio (%)</caption>
+                <category>Appearance</category>
+                <description>Responsive is set to 'true': Responsive width height ratio default value is 0, which means it will set the height of the chart the same height as the container. If you set this value to a certain number, it will create a chart where the height is a percentage of the width. So 100 means the height will be 100% of the width (a square)</description>
+            </property>
             <property key="labelFont" type="string" required="true" defaultValue="Helvetica Neue">
                 <caption>Font</caption>
                 <category>Appearance</category>
diff --git a/src/ChartJS/widgets/RadarChart/RadarChart.xml b/src/ChartJS/widgets/RadarChart/RadarChart.xml
@@ -17,6 +17,11 @@
             <category>Appearance</category>
 			<description>Initial height of the chart canvas, will be ignored when responsive property is set to 'Yes'</description>
         </property>
+        <property key="responsiveRatio" type="integer" required="true" defaultValue="0">
+            <caption>Responsive w/h ratio (%)</caption>
+            <category>Appearance</category>
+            <description>Responsive is set to 'true': Responsive width height ratio default value is 0, which means it will set the height of the chart the same height as the container. If you set this value to a certain number, it will create a chart where the height is a percentage of the width. So 100 means the height will be 100% of the width (a square)</description>
+        </property>
         <property key="labelFont" type="string" required="true" defaultValue="Helvetica Neue">
             <caption>Font</caption>
             <category>Appearance</category>
diff --git a/src/ChartJS/widgets/StackedBarChart/StackedBarChart.xml b/src/ChartJS/widgets/StackedBarChart/StackedBarChart.xml
@@ -17,6 +17,11 @@
 			<category>Appearance</category>
 			<description>Initial height of the chart canvas, will be ignored when responsive property is set to 'Yes'</description>
 		</property>
+        <property key="responsiveRatio" type="integer" required="true" defaultValue="0">
+            <caption>Responsive w/h ratio (%)</caption>
+            <category>Appearance</category>
+            <description>Responsive is set to 'true': Responsive width height ratio default value is 0, which means it will set the height of the chart the same height as the container. If you set this value to a certain number, it will create a chart where the height is a percentage of the width. So 100 means the height will be 100% of the width (a square)</description>
+        </property>
     <property key="xLabel" type="string" required="false" defaultValue="">
         <caption>X-axis label</caption>
         <category>Appearance</category>
diff --git a/test/[Test] ChartJS.mpr b/test/[Test] ChartJS.mpr
diff --git a/test/widgets/ChartJS.mpk b/test/widgets/ChartJS.mpk
