Format metrics

cope2n-fe/src/components/report-detail/report-overview-table.tsx

@@ -1,6 +1,7 @@
 import type { TableColumnsType } from 'antd';
 import { Table } from 'antd';
 import React from 'react';
+import { formatPercent, ensureMin, ensureMax } from 'utils/metric-format';
 
 interface DataType {
   key: React.Key;
@@ -113,10 +114,10 @@ const columns: TableColumnsType<DataType> = [
         key: 'badPercentage',
         width: '60px',
         render: (_, record) => {
-          const isAbnormal = record.badPercentage * 100 > 10;
+          const isAbnormal = ensureMax(record.badPercentage, 0.1);
           return (
             <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {(record.badPercentage * 100)?.toFixed(2)}
+              {formatPercent(record.badPercentage)}
             </span>
           );
         },
@@ -133,10 +134,10 @@ const columns: TableColumnsType<DataType> = [
         key: 'snImeiAAR',
         width: '130px',
         render: (_, record) => {
-          const isAbnormal = record.snImeiAAR * 100 < 95;
+          const isAbnormal = ensureMin(record.snImeiAAR, 0.95)
           return (
             <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {(record.snImeiAAR * 100)?.toFixed(2)}
+              {formatPercent(record.snImeiAAR)}
             </span>
           );
         },
@@ -147,10 +148,10 @@ const columns: TableColumnsType<DataType> = [
         key: 'purchaseDateAAR',
         width: '130px',
         render: (_, record) => {
-          const isAbnormal = record.purchaseDateAAR * 100 < 98;
+          const isAbnormal = ensureMin(record.purchaseDateAAR, 0.95);
           return (
             <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {(record.purchaseDateAAR * 100).toFixed(2)}
+              {formatPercent(record.purchaseDateAAR)}
             </span>
           );
         },
@@ -161,10 +162,10 @@ const columns: TableColumnsType<DataType> = [
         key: 'retailerNameAAR',
         width: '130px',
         render: (_, record) => {
-          const isAbnormal = record.retailerNameAAR * 100 < 98;
+          const isAbnormal = ensureMin(record.retailerNameAAR, 0.95);
           return (
             <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {(record.retailerNameAAR * 100)?.toFixed(2)}
+              {formatPercent(record.retailerNameAAR)}
             </span>
           );
         },
@@ -179,7 +180,7 @@ const columns: TableColumnsType<DataType> = [
         dataIndex: 'snImeiAPT',
         key: 'snImeiAPT',
         render: (_, record) => {
-          const isAbnormal = record.snImeiAPT > 2;
+          const isAbnormal = ensureMax(record.snImeiAPT, 2);
           return (
             <span style={{ color: isAbnormal ? 'red' : '' }}>
               {record?.snImeiAPT?.toFixed(2)}
@@ -192,7 +193,7 @@ const columns: TableColumnsType<DataType> = [
         dataIndex: 'invoiceAPT',
         key: 'invoiceAPT',
         render: (_, record) => {
-          const isAbnormal = record.invoiceAPT > 2;
+          const isAbnormal = ensureMax(record.invoiceAPT, 2);
           return (
             <span style={{ color: isAbnormal ? 'red' : '' }}>
               {record?.invoiceAPT?.toFixed(2)}

cope2n-fe/src/components/report-detail/report-table.tsx

@@ -5,6 +5,8 @@ import { useReportList } from 'queries/report';
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { downloadReport } from 'request/report';
+import { formatPercent, ensureMin, ensureMax } from 'utils/metric-format';
+
 
 const ReportTable: React.FC = () => {
   const { isLoading, data: reportData } = useReportList({
@@ -92,11 +94,10 @@ const ReportTable: React.FC = () => {
       dataIndex: 'Purchase Date Acc',
       key: 'Purchase Date Acc',
       render: (_, record) => {
-        const isAbnormal = record['Purchase Date Acc'] * 100 < 98;
+        const isAbnormal = ensureMin(record['Purchase Date Acc'], 0.95);
         return (
           <span style={{ color: isAbnormal ? 'red' : '' }}>
-            {record['Purchase Date Acc'] &&
-              (Number(record['Purchase Date Acc']) * 100)?.toFixed(2)}
+            {formatPercent(record['Purchase Date Acc'])}
           </span>
         );
       },
@@ -107,11 +108,10 @@ const ReportTable: React.FC = () => {
       dataIndex: 'Retailer Acc',
       key: 'Retailer Acc',
       render: (_, record) => {
-        const isAbnormal = record['Retailer Acc'] * 100 < 98;
+        const isAbnormal = ensureMin(record['Retailer Acc'], 0.95);
         return (
           <span style={{ color: isAbnormal ? 'red' : '' }}>
-            {record['Retailer Acc'] &&
-              (Number(record['Retailer Acc']) * 100)?.toFixed(2)}
+            {formatPercent(record['Retailer Acc'])}
           </span>
         );
       },
@@ -121,11 +121,11 @@ const ReportTable: React.FC = () => {
       dataIndex: 'IMEI Acc',
       key: 'IMEI Acc',
       render: (_, record) => {
-        const isAbnormal = record['IMEI Acc'] * 100 < 98;
+        const isAbnormal = ensureMin(record['IMEI Acc'], 0.95);
         return (
           <span style={{ color: isAbnormal ? 'red' : '' }}>
             {record['IMEI Acc'] &&
-              (Number(record['IMEI Acc']) * 100)?.toFixed(2)}
+              formatPercent(Number(record['IMEI Acc']))}
           </span>
         );
       },
@@ -135,35 +135,21 @@ const ReportTable: React.FC = () => {
       dataIndex: 'Avg. Accuracy',
       key: 'Avg. Accuracy',
       render: (_, record) => {
-        const isAbnormal = record['Avg. Accuracy'] * 100 < 98;
+        const isAbnormal = ensureMin(record['Avg. Accuracy'], 0.95);
         return (
           <span style={{ color: isAbnormal ? 'red' : '' }}>
             {record['Avg. Accuracy'] &&
-              (Number(record['Avg. Accuracy']) * 100)?.toFixed(2)}
+              formatPercent(Number(record['Avg. Accuracy']))}
           </span>
         );
       },
     },
-    // {
-    //   title: 'Avg Client Request Time',
-    //   dataIndex: 'Avg. Client Request Time',
-    //   key: 'Avg. Client Request Time',
-    //   render: (_, record) => {
-    //     const isAbnormal = record['Avg Client Request Time'] > 2;
-    //     return (
-    //       <span style={{ color: isAbnormal ? 'red' : '' }}>
-    //         {record['Avg Client Request Time'] &&
-    //           Number(record['Avg Client Request Time'])?.toFixed(2)}
-    //       </span>
-    //     );
-    //   },
-    // },
     {
       title: 'Avg. OCR Processing Time',
       dataIndex: 'Avg. OCR Processing Time',
       key: 'Avg. OCR Processing Time',
       render: (_, record) => {
-        const isAbnormal = record['Avg. OCR Processing Time'] > 2;
+        const isAbnormal = ensureMax(record['Avg. OCR Processing Time'], 2);
         return (
           <span style={{ color: isAbnormal ? 'red' : '' }}>
             {record['Avg. OCR Processing Time'] &&

cope2n-fe/src/utils/metric-format.ts

@@ -0,0 +1,30 @@
+export const formatPercent = (value: number) => {
+    console.log(value)
+    if (value === 0) {
+        return '-';
+    }
+    if (value < 100.0) {
+        value = value * 100;
+    }
+    return value.toFixed(2);
+}
+
+export const ensureMin = (value: number, min: number, skipZero: boolean = true) => {
+    if (skipZero && value === 0) {
+        return false;
+    }
+    if (value < min) {
+        return true;
+    }
+    return false;
+}
+
+export const ensureMax = (value: number, max: number, skipZero: boolean = true) => {
+    if (skipZero && value === 0) {
+        return false;
+    }
+    if (value > max) {
+        return true;
+    }
+    return false;
+}

process_data.py

@@ -0,0 +1,3 @@
+import csv
+
+csv.DictReader(open('data.csv'))