Add support for big number in the card and chart components

.vscode/settings.json

@@ -2,6 +2,6 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   }
 }

package.json

@@ -67,6 +67,7 @@
   "dependencies": {
     "@genexus/reporting-api": "~3.1.0",
     "@genexus/web-controls-library": "2.3.0",
+    "@genexus/web-standard-functions": "file:///C:/PROJECTS/genexus/web-standard-functions/dist/lib-esm",
     "date-fns": "^2.30.0",
     "highcharts": "^11.1.0",
     "jquery": "^3.7.1",

src/components/query-viewer-card/controller/card-utils.ts

@@ -11,6 +11,10 @@ import {
   QueryViewerTrendPeriod
 } from "@genexus/reporting-api";
 import { fromDateToString, fromStringToDateISO } from "../../../utils/date";
+import { GxBigNumber } from "@genexus/web-standard-functions/types/gxbignumber";
+import { divide } from "@genexus/web-standard-functions/math/divide";
+import { toStringBigNumber } from "@genexus/web-standard-functions/bigNumber/toString";
+import { multiply } from "@genexus/web-standard-functions/math/multiply";
 
 export type RegressionSeries = {
   LinearRegression: {
@@ -302,13 +306,15 @@ const showDataAsMapping: {
 // @todo Complete the implementation of this function by comparing it to the Web implementation
 export function valueOrPercentage(
   showDataAs: QueryViewerShowDataAs,
-  value: number,
+  value: GxBigNumber,
   datum: QueryViewerServiceMetaDataData
 ) {
-  const percentage = (value * 100) / datum.targetValue;
+  const multiplication = multiply(value, 100);
+  const percentage = divide(multiplication, datum.targetValue);
 
   return showDataAsMapping[showDataAs]({
-    value: value.toFixed(2),
-    percentage: percentage.toFixed(2) + "%"
+    value: toStringBigNumber(value, new GxBigNumber(), new GxBigNumber()),
+    percentage:
+      toStringBigNumber(percentage, new GxBigNumber(), new GxBigNumber()) + "%"
   });
 }

src/components/query-viewer-card/controller/query-viewer-card-controller.tsx

@@ -16,6 +16,7 @@ import {
 } from "@genexus/reporting-api";
 import { aggregateData } from "../../../utils/general";
 import { analyzeSeries, valueOrPercentage } from "./card-utils";
+import { GxBigNumber } from "@genexus/web-standard-functions/types/gxbignumber";
 
 type CardInformation = {
   title: string;
@@ -225,7 +226,7 @@ export class QueryViewerCard {
 
     cardInformation["value"] = valueOrPercentage(
       this.showDataAs,
-      parseFloat(lastRow[datum.dataField]),
+      new GxBigNumber(lastRow[datum.dataField]),
       datum
     );
 
@@ -279,14 +280,14 @@ export class QueryViewerCard {
       // MinValue @todo Update the implementation of the minValue using the Web implementation
       cardInformation["minValue"] = valueOrPercentage(
         this.showDataAs,
-        data.MinValue,
+        new GxBigNumber(data.MinValue),
         datum
       );
 
       // MaxValue @todo Update the implementation of the maxValue using the Web implementation
       cardInformation["maxValue"] = valueOrPercentage(
         this.showDataAs,
-        data.MaxValue,
+        new GxBigNumber(data.MaxValue),
         datum
       );
     }

src/components/query-viewer-chart/controller/highcharts-options.ts

@@ -16,10 +16,9 @@ import {
   PaneOptions,
   PlotOptions,
   PointMarkerOptionsObject,
-  SeriesLineOptions
+  SeriesLineOptions,
   // ExtremesObject,
   // SeriesLineOptions
-  ,
   SeriesOptionsType,
   SubtitleOptions,
   TooltipFormatterContextObject,
@@ -53,6 +52,7 @@ import {
   getChartGroup
 } from "./chart-utils";
 import { ChartMetadataAndData, XAxisDataType } from "./processDataAndMetadata";
+import { GxBigNumber } from "@genexus/web-standard-functions/types/gxbignumber";
 
 const DEFAULT_CHART_SPACING = 10;
 export const HOURS_PER_DAY = 24;
@@ -1524,7 +1524,7 @@ function groupPoints(
     dateStr: null,
     name: null
   };
-  let pointAdd: { x: string; y: number; name: string };
+  let pointAdd: { x: string; y: GxBigNumber; name: string };
   let currentYValues: number[] = [];
   let currentYQuantities: number[] = [];
   const points = [];
@@ -1566,7 +1566,11 @@ function groupPoints(
     } else {
       pointAdd = {
         x: lastStartPoint.dateStr,
-        y: aggregate(aggregation, currentYValues, currentYQuantities),
+        y: aggregate(
+          aggregation,
+          currentYValues.map(value => new GxBigNumber(value)),
+          currentYQuantities
+        ),
         name: lastStartPoint.name
       };
       points.push(pointAdd);
@@ -1578,7 +1582,11 @@ function groupPoints(
   if (currentYValues.length > 0 && currentYQuantities.length > 0) {
     pointAdd = {
       x: lastStartPoint.dateStr,
-      y: aggregate(aggregation, currentYValues, currentYQuantities),
+      y: aggregate(
+        aggregation,
+        currentYValues.map(value => new GxBigNumber(value)),
+        currentYQuantities
+      ),
       name: lastStartPoint.name
     };
     points.push(pointAdd);

src/components/query-viewer-chart/controller/processDataAndMetadata.ts

@@ -28,6 +28,7 @@ import {
   parseNumericPicture
 } from "../../../utils/general";
 import { ChartTypes, IS_CHART_TYPE, isDatetimeXAxis } from "./chart-types";
+import { GxBigNumber } from "@genexus/web-standard-functions/types/gxbignumber";
 
 export type ChartMetadataAndData = {
   Categories: QueryViewerChartCategories;
@@ -512,7 +513,7 @@ function aggregatePoints(chartSerie: QueryViewerChartSerie) {
   });
   const value = aggregate(
     chartSerie.Aggregation,
-    currentYValues,
+    currentYValues.map(val => new GxBigNumber(val)),
     currentYQuantities
   ).toString();
   chartSerie.Points = [{ Value: value, Value_N: value, Value_D: "1" }];