Feat: #238 Update total count section styling in Developer Traffic Ta…

…ble (#279) * fix: Fix developer traffic chart loading issues * fix: Remove redundant codes * fix: Update testing snapshots * fix: Revert admin stats test snapshot * feat: #238 - Fix ui issues in analytics page * feat: #238 - Add total traffic count label * feat: #238 - Update test - Fix general UI issues * feat: #238 - Update analytics page test * feat: #238 - Add test for anonymous funcs - Update hooks lint rules * feat: #238 - Temporarily disabled rules of hooks lint * feat: #238 - Update api traffic table styling
reapit · Feb 14, 2020 · 8490a99 · 8490a99
1 parent 6294f77
commit 8490a99
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 8 deletions.
diff --git a/packages/elements/src/components/Table/index.tsx b/packages/elements/src/components/Table/index.tsx
@@ -61,8 +61,11 @@ export const Table = ({
               prepareRow(row) || (
                 <tr {...row.getRowProps()}>
                   {row.cells.map((cell, index) => {
+                    const {
+                      column: { columnProps },
+                    } = cell
                     return (
-                      <td key={index} {...cell.getCellProps()}>
+                      <td key={index} {...cell.getCellProps()} {...columnProps}>
                         {cell.render('Cell')}
                       </td>
                     )

diff --git a/...es/marketplace/src/components/ui/__tests__/__snapshots__/developer-traffic-table.tsx.snap b/...es/marketplace/src/components/ui/__tests__/__snapshots__/developer-traffic-table.tsx.snap
@@ -25,6 +25,9 @@ exports[`DeveloperTrafficTable should match a snapshot 1`] = `
         Object {
           "Header": "Total API Calls",
           "accessor": "requests",
+          "columnProps": Object {
+            "width": 300,
+          },
         },
       ]
     }
@@ -45,11 +48,15 @@ exports[`DeveloperTrafficTable should match a snapshot 1`] = `
     loading={false}
     scrollable={true}
   />
-  <Component
+  <div
     className="undefined is-pulled-right"
   >
-    Total API Calls: 
-    5
-  </Component>
+    <Component
+      className="undefined is-pulled-left"
+    >
+      Total API Calls: 
+      5
+    </Component>
+  </div>
 </div>
 `;
diff --git a/packages/marketplace/src/components/ui/developer-traffic-table.tsx b/packages/marketplace/src/components/ui/developer-traffic-table.tsx
@@ -41,6 +41,9 @@ export const generateUsageStatsColumns = () => () => {
     {
       Header: 'Total API Calls',
       accessor: 'requests',
+      columnProps: {
+        width: 300,
+      },
     },
   ]
 }
@@ -61,9 +64,11 @@ const DeveloperTrafficTable: React.FC<DeveloperAppTrafficProps> = ({ stats, apps
 
   const renderTotalRequest = () => {
     return (
-      <H4 className={`${styles.totalCount} is-pulled-right`}>
-        Total API Calls: {calculateTotalRequest(usageStatsData)}
-      </H4>
+      <div className={`${styles.totalApiCountWrapper} is-pulled-right`}>
+        <H4 className={`${styles.totalCount} is-pulled-left`}>
+          Total API Calls: {calculateTotalRequest(usageStatsData)}
+        </H4>
+      </div>
     )
   }
 

diff --git a/packages/marketplace/src/styles/pages/analytics.scss b/packages/marketplace/src/styles/pages/analytics.scss
@@ -12,3 +12,8 @@
   font-size: 1rem;
   margin: 1rem 0;
 }
+.totalApiCountWrapper {
+  @media (min-width: 480px) {
+    width: 300px;
+  }
+}