Feature/colored numbes

src/components/configuration-modal-form.tsx

@@ -15,6 +15,7 @@ const ConfigurationModalFormComponent: React.FC<
   columnKeys,
   selectOptions,
   handleSetConfigurations,
+  isLoading,
 }) => {
   return (
     <>
@@ -82,6 +83,7 @@ const ConfigurationModalFormComponent: React.FC<
               type="primary"
               onClick={handleSetConfigurations}
               className="addColumnButton"
+              loading={isLoading}
             >
               Generate Datagrid
             </Button>

src/components/datagrid-widget.tsx

@@ -17,6 +17,26 @@ const DatagridWidgetComponent: React.FC<DatagridWidgetComponentProps> = ({
     setSortedInfo(sorter);
   };
 
+  //change color of negative values to red
+  const renderIntegerColumn = (value: number) => {
+    const textStyle = {
+      color: value < 0 ? "red" : "blue",
+    };
+    return <span style={textStyle}>{value}</span>;
+  };
+  //updated column definition for antd table
+  const updatedColumns = columns.map((column) => {
+    const dataIndex = column.dataIndex;
+    const fetchedDataType = typeof data[0][dataIndex];
+    if (fetchedDataType === "number") {
+      return {
+        ...column,
+        render: (text: any) => renderIntegerColumn(text),
+      };
+    }
+    return column;
+  });
+
   const sortedData = React.useMemo(() => {
     if (!sortedInfo.columnKey || !sortedInfo.order) {
       return data;
@@ -71,7 +91,30 @@ const DatagridWidgetComponent: React.FC<DatagridWidgetComponentProps> = ({
         dataSource={dataList}
         renderItem={(item) => (
           <List.Item key={item.key}>
-            <List.Item.Meta title={item.title} description={item.subtitle} />
+            <List.Item.Meta
+              title={
+                typeof item.title === "number" ? (
+                  item.title > 0 ? (
+                    <span style={{ color: "blue" }}>{item.title}</span>
+                  ) : (
+                    <span style={{ color: "red" }}>{item.title}</span>
+                  )
+                ) : (
+                  <span>{item.title}</span>
+                )
+              }
+              description={
+                typeof item.subtitle === "number" ? (
+                  item.subtitle > 0 ? (
+                    <span style={{ color: "blue" }}>{item.subtitle}</span>
+                  ) : (
+                    <span style={{ color: "red" }}>{item.subtitle}</span>
+                  )
+                ) : (
+                  <span>{item.subtitle}</span>
+                )
+              }
+            />
           </List.Item>
         )}
       />
@@ -81,7 +124,7 @@ const DatagridWidgetComponent: React.FC<DatagridWidgetComponentProps> = ({
   return (
     <div>
       <Table
-        columns={columns}
+        columns={updatedColumns}
         dataSource={sortedData}
         scroll={{ x: "max-content" }}
         onChange={handleTableChange}

src/containers/configuration-modal-form.tsx

@@ -18,7 +18,7 @@ const ConfigurationModalForm: React.FC<ConfigurationModalFormProps> = ({
   const [columnsData, setColumnsData] = useState<dataArray[]>([]);
   const [apiURL, setApiURL] = useState("");
   const [errorVisible, setErrorVisible] = useState(false);
-
+  const [isLoading, setIsLoading]= useState(false);
   const handleAddColumn = () => {
     setDisplayTable(false);
     setColumnId((prevCount) => prevCount + 1);
@@ -75,6 +75,7 @@ const ConfigurationModalForm: React.FC<ConfigurationModalFormProps> = ({
       return;
     }
     try {
+      setIsLoading(true);
       const fetchedData = await FetchAPIData({
         APIURL: apiURL,
         columns: columnsData,
@@ -84,6 +85,9 @@ const ConfigurationModalForm: React.FC<ConfigurationModalFormProps> = ({
     } catch (error) {
       console.error("Error fetching data:", error);
     }
+    finally{
+      setIsLoading(false);
+    }
   };
 
   useEffect(() => {
@@ -123,6 +127,7 @@ const ConfigurationModalForm: React.FC<ConfigurationModalFormProps> = ({
       columnKeys={columnKeys}
       selectOptions={selectOptions}
       handleSetConfigurations={handleSetConfigurations}
+      isLoading={isLoading}
     />
   );
 };

src/containers/datagrid-widget.tsx

@@ -36,6 +36,7 @@ const DatagridWidget: React.FC<DatagridWidgetProps> = ({
       title: config.label,
       dataIndex: config.key,
       key: config.key,
+      type: config.type, //add data type to table columns data
       sorter: true,
     }));
     setColumns(tableColumns);

src/services/fetch-API-data.ts

@@ -10,7 +10,7 @@ interface FetchAPIDataProps {
 
 const FetchAPIData = async ({ APIURL, columns }: FetchAPIDataProps) => {
   try {
-    const response = await axios.get(APIURL);
+    const response = await axios.get(APIURL, {timeout: 10000});
     const data = response.data;
     const processedData: Record<string, any[]> = {};
     const mismatchedDataTypes: string[] = [];

src/types/configuration-modal-form-type.ts

@@ -17,4 +17,5 @@ export interface ConfigurationModalFormComponentProps {
   columnKeys: number[];
   selectOptions: any;
   handleSetConfigurations: () => void;
+  isLoading: boolean;
 }