feat(line-chart-native): add design property

- Add chart size design property to easily make chart grids visible inside a scroll container

Author: IIsaku

settings-native.json

@@ -1412,6 +1412,23 @@
                 ]
             }
         ],
+        "com.mendix.widget.native.linechart.LineChart": [
+            {
+                "name": "Chart size",
+                "type": "Dropdown",
+                "description": "Size of the chart.",
+                "options": [
+                    {
+                        "name": "Square",
+                        "class": "lineChartSquare"
+                    },
+                    {
+                        "name": "Maximum space",
+                        "class": "lineChartMaxSpace"
+                    }
+                ]
+            }
+        ],
         "com.mendix.widget.native.listviewswipe.ListViewSwipe": [
             {
                 "name": "Panel size",

styles/native/js/core/helpers/linechart.js

@@ -0,0 +1,11 @@
+export const lineChartSquare = {
+    chart: {
+        aspectRatio: 1
+    }
+};
+export const lineChartMaxSpace = {
+    chart: {
+        flex: 1,
+        aspectRatio: undefined
+    }
+};

styles/native/js/main.js

@@ -30,6 +30,7 @@ export * from "./core/helpers/images";
 export * from "./core/widgets/introscreen";
 export * from "./core/widgets/layoutgrid";
 export * from "./core/widgets/linechart";
+export * from "./core/helpers/linechart";
 export * from "./core/widgets/listviews";
 export * from "./core/helpers/listviews";
 export * from "./core/widgets/listviewswipe";

styles/native/ts/core/helpers/linechart.ts

@@ -0,0 +1,12 @@
+export const lineChartSquare = {
+    chart: {
+        aspectRatio: 1
+    }
+};
+
+export const lineChartMaxSpace = {
+    chart: {
+        flex: 1,
+        aspectRatio: undefined
+    }
+};

styles/native/ts/main.ts

@@ -30,6 +30,7 @@ export * from "./core/helpers/images";
 export * from "./core/widgets/introscreen";
 export * from "./core/widgets/layoutgrid";
 export * from "./core/widgets/linechart";
+export * from "./core/helpers/linechart";
 export * from "./core/widgets/listviews";
 export * from "./core/helpers/listviews";
 export * from "./core/widgets/listviewswipe";