[MOO-1630]: Fix chart rendering issue 9.24 (#239)

Author: UrazAkgultan

packages/jsActions/mobile-resources-native/package.json

@@ -53,4 +53,4 @@
     "rimraf": "^2.7.1",
     "rollup": "^2.68.0"
   }
-}
+}

packages/pluggableWidgets/bar-chart-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We have resolved an issue preventing Bar chart from rendering correctly.
+
 ## [3.0.1] - 2023-5-17
 
 ### Fixed

packages/pluggableWidgets/bar-chart-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bar-chart-native",
   "widgetName": "BarChart",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "license": "Apache-2.0",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "repository": {

packages/pluggableWidgets/bar-chart-native/src/components/BarChart.tsx

@@ -58,7 +58,7 @@ export function BarChart({
     style,
     warningPrefix
 }: BarChartProps): ReactElement | null {
-    const [chartDimensions, setChartDimensions] = useState<{ height: number; width: number }>();
+    const [chartDimensions, setChartDimensions] = useState<{ height?: number; width?: number }>();
 
     const warningMessagePrefix = useMemo(() => (warningPrefix ? warningPrefix + "i" : "I"), [warningPrefix]);
 
@@ -133,16 +133,7 @@ export function BarChart({
         }
 
         return <VictoryStack colorScale={normalizedBarColors}>{bars}</VictoryStack>;
-    }, [
-        dataTypesResult,
-        series,
-        style,
-        warningMessagePrefix,
-        sortProps,
-        showLabels,
-        normalizedBarColors,
-        presentation
-    ]);
+    }, [dataTypesResult, series, style, sortProps, showLabels, normalizedBarColors, presentation]);
 
     const [firstSeries] = series;
 
@@ -195,8 +186,8 @@ export function BarChart({
         (event: LayoutChangeEvent) => {
             const { height, width } = event.nativeEvent.layout;
             setChartDimensions({
-                height: height <= 0 ? -1 : height,
-                width: width <= 0 ? -1 : width
+                height: height <= 0 ? undefined : height,
+                width: width <= 0 ? undefined : width
             });
         },
         [setChartDimensions]
@@ -222,8 +213,8 @@ export function BarChart({
                                     // horizontal charts.
                                     <VictoryChart
                                         domainPadding={{ x: style.domain?.padding?.y, y: style.domain?.padding?.x }}
-                                        height={chartDimensions?.height}
-                                        width={chartDimensions?.width}
+                                        height={chartDimensions.height}
+                                        width={chartDimensions.width}
                                         padding={aggregateGridPadding(style.grid)}
                                         scale={
                                             dataTypesResult

packages/pluggableWidgets/bar-chart-native/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="BarChart" version="3.0.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="BarChart" version="3.0.2" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="BarChart.xml" />
         </widgetFiles>

packages/pluggableWidgets/column-chart-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We have resolved an issue preventing Column chart from rendering correctly
+
 ## [2.0.1] - 2023-5-17
 
 ### Fixed

packages/pluggableWidgets/column-chart-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "column-chart-native",
   "widgetName": "ColumnChart",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "license": "Apache-2.0",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "repository": {

packages/pluggableWidgets/column-chart-native/src/components/ColumnChart.tsx

@@ -66,7 +66,7 @@ export function ColumnChart({
         return sortSeriesDataPoints(series, sortOrder, dataTypesResult);
     }, [sortOrder, series, dataTypesResult]);
 
-    const [chartDimensions, setChartDimensions] = useState<{ height: number; width: number }>();
+    const [chartDimensions, setChartDimensions] = useState<{ height?: number; width?: number }>();
 
     // Column Chart user-styling may be missing for certain series. A palette is passed, any missing colours
     // fallback to a colour from the palette.
@@ -153,8 +153,8 @@ export function ColumnChart({
         (event: LayoutChangeEvent) => {
             const { height, width } = event.nativeEvent.layout;
             setChartDimensions({
-                height: height <= 0 ? -1 : height,
-                width: width <= 0 ? -1 : width
+                height: height <= 0 ? undefined : height,
+                width: width <= 0 ? undefined : width
             });
         },
         [setChartDimensions]
@@ -178,10 +178,8 @@ export function ColumnChart({
                                 {chartDimensions ? (
                                     <VictoryChart
                                         domainPadding={{ x: style.domain?.padding?.x, y: style.domain?.padding?.y }}
-                                        // width and height can't be zero
-                                        // TODO: this needs to be checked for bar chart
-                                        height={chartDimensions?.height || undefined}
-                                        width={chartDimensions?.width || undefined}
+                                        height={chartDimensions.height}
+                                        width={chartDimensions.width}
                                         padding={aggregateGridPadding(style.grid)}
                                         scale={
                                             dataTypesResult

packages/pluggableWidgets/column-chart-native/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="ColumnChart" version="2.0.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="ColumnChart" version="2.0.2" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="ColumnChart.xml" />
         </widgetFiles>

packages/pluggableWidgets/line-chart-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We have resolved an issue preventing Line chart from rendering correctly
+
 ## [3.0.1] - 2023-5-17
 
 ### Fixed

packages/pluggableWidgets/line-chart-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "line-chart-native",
   "widgetName": "LineChart",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

packages/pluggableWidgets/line-chart-native/src/components/LineChart.tsx

@@ -177,12 +177,12 @@ export function LineChart(props: LineChartProps): ReactElement | null {
     const xAxisLabelComponent = xAxisLabel ? <Text style={axisLabelStyles.xAxisLabelStyle}>{xAxisLabel}</Text> : null;
     const yAxisLabelComponent = yAxisLabel ? <Text style={axisLabelStyles.yAxisLabelStyle}>{yAxisLabel}</Text> : null;
 
-    const [chartDimensions, setChartDimensions] = useState<{ height: number; width: number }>();
+    const [chartDimensions, setChartDimensions] = useState<{ height?: number; width?: number }>();
 
     const updateChartDimensions = useCallback(
         (event: LayoutChangeEvent) => {
             const { height, width } = event.nativeEvent.layout;
-            setChartDimensions({ height: height <= 0 ? -1 : height, width: width <= 0 ? -1 : width });
+            setChartDimensions({ height: height <= 0 ? undefined : height, width: width <= 0 ? undefined : width });
         },
         [setChartDimensions]
     );
@@ -205,8 +205,8 @@ export function LineChart(props: LineChartProps): ReactElement | null {
                             <View onLayout={updateChartDimensions} style={{ flex: 1 }}>
                                 {chartDimensions ? (
                                     <VictoryChart
-                                        height={chartDimensions?.height}
-                                        width={chartDimensions?.width}
+                                        height={chartDimensions.height}
+                                        width={chartDimensions.width}
                                         padding={aggregateGridPadding(style.grid)}
                                         scale={
                                             dataTypesResult

packages/pluggableWidgets/line-chart-native/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="LineChart" version="3.0.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="LineChart" version="3.0.2" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="LineChart.xml" />
         </widgetFiles>

packages/pluggableWidgets/pie-doughnut-chart-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We have resolved an issue preventing Pie chart from rendering correctly
+
 ## [2.0.1] - 2023-5-17
 
 ### Fixed

packages/pluggableWidgets/pie-doughnut-chart-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pie-doughnut-chart-native",
   "widgetName": "PieDoughnutChart",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "license": "Apache-2.0",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "repository": {

packages/pluggableWidgets/pie-doughnut-chart-native/src/components/PieDoughnutChart.tsx

@@ -28,7 +28,7 @@ export interface Slice<X extends string, Y extends number> {
 
 export function PieDoughnutChart({ name, presentation, series, style, showLabels }: ChartProps): ReactElement | null {
     // due to the nature of the chart type, we only reply on the width, as the chart is always a square
-    const [chartDimensions, setChartDimensions] = useState<{ width: number }>();
+    const [chartDimensions, setChartDimensions] = useState<{ width?: number }>();
     // Chart user-styling may be missing for certain slices. A palette is passed, any missing colours
     // fallback to a colour from the palette or the default color.
     const normalizedSliceColors: string[] = useMemo(() => {
@@ -56,7 +56,7 @@ export function PieDoughnutChart({ name, presentation, series, style, showLabels
         (event: LayoutChangeEvent) => {
             const { width } = event.nativeEvent.layout;
             setChartDimensions({
-                width: width <= 0 ? -1 : width
+                width: width <= 0 ? undefined : width
             });
         },
         [setChartDimensions]
@@ -89,7 +89,7 @@ export function PieDoughnutChart({ name, presentation, series, style, showLabels
                         }}
                         labels={({ datum }) => (showLabels ? datum.x : undefined)}
                         innerRadius={
-                            presentation === "doughnut"
+                            presentation === "doughnut" && chartDimensions.width && chartDimensions.width > 0
                                 ? style.slices?.innerRadius ?? chartDimensions.width / DEFAULT_INNER_RADIUS_RATIO
                                 : undefined
                         }

packages/pluggableWidgets/pie-doughnut-chart-native/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="PieDoughnutChart" version="2.0.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="PieDoughnutChart" version="2.0.2" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="PieDoughnutChart.xml" />
         </widgetFiles>