feat(line-chart-native): change styling interface

- Rename 'lineStyles' to 'lines', because we refer to elements in the root of style objects for widgets.
- Add style property 'lineColorPalette' and 'customLineStyles' to 'lines' style property.
- 'customLineStyles' contains self named line style properties whose values adhere to the line style interface.
- Change 'lineColorPalette' to a string, because array style properties are concatenated by the Mendix native client instead of being overridden.

Author: IIsaku

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

@@ -109,27 +109,38 @@ export const com_mendix_widget_native_linechart_LineChart = {
             relativePositionGrid: "top"
         },
     },
-    lineStyles: {
-        line: {
+    lines: {
         /*
             Allowed properties:
-              -  dashArray (string)
-              -  ending ("flat" or "round")
-              -  lineColor (string)
-              -  width (number)
-        */
-        },
-        marker: {
-        /*
-            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")
+              -  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)
+                      -  width (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: {
@@ -154,6 +165,5 @@ export const com_mendix_widget_native_linechart_LineChart = {
             fontSize: font.sizeSmall,
             fontWeight: font.weightNormal,
         },
-    },
-    lineColorPalette: Object.values(brand),
+    }
 };

styles/native/ts/core/widgets/linechart.ts

@@ -111,27 +111,38 @@ export const com_mendix_widget_native_linechart_LineChart: LineChartType = {
             relativePositionGrid: "top"
         },
     },
-    lineStyles: {
-        line: {
-            /*
-                Allowed properties:
-                  -  dashArray (string)
-                  -  ending ("flat" or "round")
-                  -  lineColor (string)
-                  -  width (number)
-            */
-        },
-        marker: {
-            /*
-                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")
-            */
-        },
+    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)
+                          -  width (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: {
@@ -156,6 +167,5 @@ export const com_mendix_widget_native_linechart_LineChart: LineChartType = {
             fontSize: font.sizeSmall,
             fontWeight: font.weightNormal,
         },
-    },
-    lineColorPalette: Object.values(brand), // Array of color strings
+    }
 };

styles/native/ts/types/widgets.d.ts

@@ -273,7 +273,7 @@ export interface LayoutGridType {
 }
 
 // Line chart
-export interface LineChartGridStyle {
+interface LineChartGridStyle {
     backgroundColor?: string;
     dashArray?: string;
     lineColor?: string;
@@ -333,8 +333,12 @@ export interface LineChartType {
     xAxis?: LineChartAxisStyle<"X">;
     yAxis?: LineChartAxisStyle<"Y">;
     legend?: LineChartLegendStyle;
-    lineStyles?: { [key: string]: LineChartLineStyle };
-    lineColorPalette?: string[];
+    lines?: {
+        lineColorPalette?: string;
+        customLineStyles?: {
+            [key: string]: LineChartLineStyle;
+        };
+    };
 }
 
 // List view