feat: decimal points for table chart (#2349)

- decimal points for table chart.
- for pie chart, use decimal point in percentage label.

web/src/components/dashboards/addPanel/ConfigPanel.vue

@@ -99,10 +99,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     />
 
     <q-input
-      v-if="
-        dashboardPanelData.data.type != 'table' &&
-        dashboardPanelData.data.type != 'geomap'
-      "
+      v-if="dashboardPanelData.data.type != 'geomap'"
       type="number"
       v-model.number="dashboardPanelData.data.config.decimals"
       value="2"

web/src/utils/dashboard/convertDataIntoUnitValue.ts

@@ -212,9 +212,7 @@ export const getUnitValue = (
       return {
         value: isNaN(value)
           ? value
-          : Number.isInteger(value)
-          ? value
-          : value.toFixed(decimals),
+          : (+value).toFixed(decimals),
         unit: "",
       };
     }
@@ -222,9 +220,7 @@ export const getUnitValue = (
       return {
         value: isNaN(value)
           ? value
-          : typeof value === "string"
-          ? value
-          : value.toFixed(decimals),
+          : (+value).toFixed(decimals),
         unit: "",
       };
     }

web/src/utils/dashboard/convertPromQLData.ts

@@ -293,7 +293,7 @@ export const convertPromQLData = (
                   store.state.timezone != "UTC"
                     ? utcToZonedTime(value[0] * 1000, store.state.timezone)
                     : new Date(value[0] * 1000).toISOString().slice(0, -1),
-                  parseFloat(value[1]).toFixed(panelSchema?.config?.decimals),
+                  value[1],
                 ]),
                 ...getPropsByChartTypeForSeries(panelSchema.type),
               };
@@ -386,9 +386,7 @@ export const convertPromQLData = (
                   panelSchema.queries[index].config.promql_legend
                 ),
                 // taking first value for gauge
-                value: parseFloat(values[0][1]).toFixed(
-                  panelSchema.config?.decimals
-                ),
+                value: values[0][1],
                 detail: {
                   formatter: function (value: any) {
                     const unitValue = getUnitValue(

web/src/utils/dashboard/convertSQLData.ts

@@ -662,6 +662,7 @@ export const convertSQLData = (
             position: "inside", // You can adjust the position of the labels
             fontSize: 10,
           },
+          percentPrecision: panelSchema.config?.decimals ?? 2,
         };
         return seriesObj;
       });
@@ -711,6 +712,7 @@ export const convertSQLData = (
             position: "inside", // You can adjust the position of the labels
             fontSize: 10,
           },
+          percentPrecision: panelSchema.config?.decimals ?? 2,
         };
         return seriesObj;
       });

web/src/utils/dashboard/convertTableData.ts

@@ -46,6 +46,15 @@ export const convertTableData = (panelSchema: any, searchQueryData: any) => {
     return obj;
   });
 
+  // map on each columns, if align is right then need to use decimals config option in toFixed method
+  columns.map((col: any) => {
+    if (col.align === "right") {
+      const oldField = col["field"];
+      col["field"] = (row: any) =>
+        row[oldField].toFixed(panelSchema.config.decimals ?? 2);
+    }
+  });
+
   return {
     rows: searchQueryData[0],
     columns,