Merge pull request #111 from mendix/develop

Atlas 2.6.7 release

package.json

@@ -1,6 +1,6 @@
 {
     "name": "atlas-ui-framework",
-    "version": "2.6.5",
+    "version": "2.6.7",
     "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

@@ -1482,6 +1482,23 @@
                 ]
             }
         ],
+        "com.mendix.widget.native.barchart.BarChart": [
+            {
+                "name": "Chart size",
+                "type": "Dropdown",
+                "description": "Size of the chart.",
+                "options": [
+                    {
+                        "name": "Square",
+                        "class": "barChartSquare"
+                    },
+                    {
+                        "name": "Maximum space",
+                        "class": "barChartMaxSpace"
+                    }
+                ]
+            }
+        ],
         "com.mendix.widget.native.progressbar.ProgressBar": [
             {
                 "name": "Progress bar style",

styles/native/js/core/helpers/barchart.js

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

styles/native/js/core/manifest.json

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

styles/native/js/core/widgets/barchart.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_barchart_BarChart = {
+    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)
+              -  padding (number)
+              -  paddingBottom (number)
+              -  paddingHorizontal (number)
+              -  paddingLeft (number)
+              -  paddingRight (number)
+              -  paddingTop (number)
+              -  paddingVertical (number)
+              -  width (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)
+              -  width (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)
+              -  width (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"
+        },
+    },
+    bars: {
+        /*
+            Allowed properties:
+                -  barColorPalette (string with array of colors separated by ';')
+                -  barsOffset (number)
+
+        */
+        barColorPalette: Object.values(brand)
+            .map((color, index, brandColors) => (index === brandColors.length - 1 ? color : `${color};`))
+            .join(""),
+        barsOffset: 20,
+        customBarStyles: {
+            your_static_or_dynamic_attribute_value: {
+                bar: {
+                /*
+                Allowed properties:
+                  -  ending (number)
+                  -  barColor (string)
+                  -  width (number)
+            */
+                },
+                label: {
+                /*
+                Allowed properties:
+                  -  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")
+                */
+                }
+            }
+        }
+    },
+    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

@@ -31,6 +31,8 @@ export * from "./core/widgets/introscreen";
 export * from "./core/widgets/layoutgrid";
 export * from "./core/widgets/linechart";
 export * from "./core/helpers/linechart";
+export * from "./core/widgets/barchart";
+export * from "./core/helpers/barchart";
 export * from "./core/widgets/listviews";
 export * from "./core/helpers/listviews";
 export * from "./core/widgets/listviewswipe";

styles/native/ts/core/helpers/barchart.ts

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

styles/native/ts/core/manifest.json

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