From 4dbe6d350d3eb880c5f87d0be78f2b2ac8dc07bd Mon Sep 17 00:00:00 2001
From: Viet Anh Nguyen <nv.anh5@samsung.com>
Date: Tue, 6 Feb 2024 16:25:49 +0700
Subject: [PATCH] Format metrics
---
.../report-detail/report-overview-table.tsx | 21 +++++------
.../components/report-detail/report-table.tsx | 36 ++++++-------------
cope2n-fe/src/utils/metric-format.ts | 30 ++++++++++++++++
process_data.py | 3 ++
4 files changed, 55 insertions(+), 35 deletions(-)
create mode 100644 cope2n-fe/src/utils/metric-format.ts
create mode 100644 process_data.py
diff --git a/cope2n-fe/src/components/report-detail/report-overview-table.tsx b/cope2n-fe/src/components/report-detail/report-overview-table.tsx
index 243742b..c607be5 100644
--- a/cope2n-fe/src/components/report-detail/report-overview-table.tsx
+++ b/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)}
diff --git a/cope2n-fe/src/components/report-detail/report-table.tsx b/cope2n-fe/src/components/report-detail/report-table.tsx
index e74dcc6..07fd087 100644
--- a/cope2n-fe/src/components/report-detail/report-table.tsx
+++ b/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'] &&
diff --git a/cope2n-fe/src/utils/metric-format.ts b/cope2n-fe/src/utils/metric-format.ts
new file mode 100644
index 0000000..689ff10
--- /dev/null
+++ b/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;
+}
diff --git a/process_data.py b/process_data.py
new file mode 100644
index 0000000..873382c
--- /dev/null
+++ b/process_data.py
@@ -0,0 +1,3 @@
+import csv
+
+csv.DictReader(open('data.csv'))
\ No newline at end of file