Merge pull request #109 from mendix/develop

Merge dev to release for 8.17

package.json

@@ -1,6 +1,6 @@
 {
     "name": "atlas-ui-framework",
-    "version": "2.6.4",
+    "version": "2.6.5",
     "description": "Mendix Atlas UI is the foundation of making beautiful apps with Mendix. For more information about the framework go to https://atlas.mendix.com.",
     "main": "",
     "scripts": {

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/core/manifest.json

@@ -1,4 +1,4 @@
 {
     "name": "Atlas-UI-Framework",
-    "version": "2.6.4"
+    "version": "2.6.5"
 }

styles/native/js/core/widgets/linechart.js

@@ -0,0 +1,169 @@
+import { border, brand, font, spacing } from "../variables";
+/*
+
+DISCLAIMER:
+Do not change this file because it is core styling.
+Customizing core files will make updating Atlas much more difficult in the future.
+To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten.
+
+==========================================================================
+    Line Chart
+
+    Default Class For Mendix Line Chart Widget
+========================================================================== */
+// eslint-disable-next-line @typescript-eslint/camelcase
+export const com_mendix_widget_native_linechart_LineChart = {
+    container: {
+    // All ViewStyle properties are allowed
+    },
+    errorMessage: {
+        // All TextStyle properties are allowed
+        fontFamily: font.family,
+        fontSize: font.sizeSmall,
+        fontWeight: font.weightNormal,
+    },
+    chart: {
+    // All ViewStyle properties are allowed
+    },
+    grid: {
+        /*
+            Allowed properties:
+              -  backgroundColor (string)
+              -  dashArray (string)
+              -  lineColor (string)
+              -  lineWidth (number)
+              -  padding (number)
+              -  paddingBottom (number)
+              -  paddingHorizontal (number)
+              -  paddingLeft (number)
+              -  paddingRight (number)
+              -  paddingTop (number)
+              -  paddingVertical (number)
+        */
+        lineColor: border.color,
+        paddingBottom: 32,
+        paddingLeft: 32,
+        paddingRight: 8,
+        paddingTop: 8,
+    },
+    xAxis: {
+        /*
+            Allowed properties:
+              -  color (string)
+              -  dashArray (string)
+              -  fontFamily (string)
+              -  fontSize (number)
+              -  fontStyle ("normal" or "italic")
+              -  fontWeight ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900")
+              -  lineColor (string)
+              -  lineWidth (number)
+        */
+        color: font.color,
+        fontFamily: font.family,
+        fontSize: font.sizeSmall,
+        fontWeight: font.weightNormal,
+        lineColor: border.color,
+        label: {
+            /*
+                All TextStyle properties are allowed and:
+                  -  relativePositionGrid ("bottom" or "right")
+            */
+            color: font.color,
+            alignSelf: "center",
+            marginHorizontal: 0,
+            marginVertical: spacing.smallest,
+            fontFamily: font.family,
+            fontSize: font.sizeSmall,
+            fontWeight: font.weightNormal,
+            relativePositionGrid: "bottom"
+        },
+    },
+    yAxis: {
+        /*
+            Allowed properties:
+              -  color (string)
+              -  dashArray (string)
+              -  fontFamily (string)
+              -  fontSize (number)
+              -  fontStyle ("normal" or "italic")
+              -  fontWeight ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900")
+              -  lineColor (string)
+              -  lineWidth (number)
+        */
+        color: font.color,
+        fontFamily: font.family,
+        fontSize: font.sizeSmall,
+        fontWeight: font.weightNormal,
+        lineColor: border.color,
+        label: {
+            /*
+               All TextStyle properties are allowed and:
+                 -  relativePositionGrid ("top" or "left")
+           */
+            color: font.color,
+            marginHorizontal: 0,
+            marginVertical: spacing.smallest,
+            fontFamily: font.family,
+            fontSize: font.sizeSmall,
+            fontWeight: font.weightNormal,
+            relativePositionGrid: "top"
+        },
+    },
+    lines: {
+        /*
+            Allowed properties:
+              -  lineColorPalette (string with array of colors separated by ';')
+        */
+        lineColorPalette: Object.values(brand)
+            .map((color, index, brandColors) => (index === brandColors.length - 1 ? color : `${color};`))
+            .join(""),
+        customLineStyles: {
+            any_custom_line_style_name: {
+                line: {
+                /*
+                    Allowed properties:
+                      -  dashArray (string)
+                      -  ending ("flat" or "round")
+                      -  lineColor (string)
+                      -  lineWidth (number)
+                */
+                },
+                markers: {
+                /*
+                    Allowed properties:
+                      -  backgroundColor (string)
+                      -  borderColor (string)
+                      -  borderWidth (number)
+                      -  display ("false" or "underneath" or "onTop")
+                      -  size (number)
+                      -  symbol ("circle" or "diamond" or "plus" or "minus" or "square" or "star" or "triangleDown" or "triangleUp")
+                */
+                }
+            }
+        }
+    },
+    legend: {
+        container: {
+            // All ViewStyle properties are allowed
+            justifyContent: "flex-start",
+            marginHorizontal: 0,
+            marginVertical: spacing.smallest,
+        },
+        item: {
+            // All ViewStyle properties are allowed
+            padding: 0,
+            paddingRight: spacing.smaller,
+        },
+        indicator: {
+            // All ViewStyle properties are allowed
+            marginRight: spacing.smallest,
+        },
+        label: {
+            // All TextStyle properties are allowed
+            color: font.color,
+            fontFamily: font.family,
+            fontSize: font.sizeSmall,
+            fontWeight: font.weightNormal,
+        },
+    }
+};

styles/native/js/main.js

@@ -29,6 +29,8 @@ export * from "./core/widgets/images";
 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/core/manifest.json

@@ -1,4 +1,4 @@
 {
     "name": "Atlas-UI-Framework",
-    "version": "2.6.4"
+    "version": "2.6.5"
 }