Add UI tweaks for final 2.1

llooker · Nov 22, 2021 · 8624f77 · 8624f77
1 parent d3c2779
commit 8624f77
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 19 deletions.
diff --git a/src/FilterBar.js b/src/FilterBar.js
@@ -54,11 +54,12 @@ export const FilterBar = ({ executeQuery, queryStatus }) => {
     })
   })
   initialCustomFields.map((customField, index) => {
-    let label = startCase(customField.substring(customField.lastIndexOf('.') + 1, customField.length).replaceAll("_", " "))
+    // let label = startCase(customField.substring(customField.lastIndexOf('.') + 1, customField.length).replaceAll("_", " "))
+    let label = startCase((customField.split("_").slice(-1)))
     customFieldsArr.push({
       key: customField,
-      label: label,
-      selected: index === 0 ? true : false
+      selected: index === 0 ? true : false,
+      label,
     })
   })
 
@@ -100,10 +101,9 @@ export const FilterBar = ({ executeQuery, queryStatus }) => {
       if (measure.selected) return measure.key
     }).filter(item => item !== undefined)
     let selectedCustomFields = customFields.map(customField => {
-      if (customField.selected) return customField.key
+      if (customField.selected) return customField.key //crucial
     }).filter(item => item !== undefined)
 
-
     let selectedDynamicFieldsDimensions = []
     selectedCustomFields.map(scf => {
       selectedDynamicFieldsDimensions.push(dynamicFieldsDimensions[scf])
@@ -121,7 +121,6 @@ export const FilterBar = ({ executeQuery, queryStatus }) => {
         measureArrForSelectedFields.push(measure)
 
         let label = startCase(sdfd.label + " " + sm.substring(sm.lastIndexOf('.') + 1, sm.length).replaceAll("_", " "))
-
         let copy = { ...dynamicFieldMeasureTemplate }
         copy.measure = measure;
         copy.based_on = sm;

diff --git a/src/Home.js b/src/Home.js
@@ -96,7 +96,8 @@ export const Home = () => {
               <SpaceVertical m="large"><Heading>Query executing!</Heading>
                 <ProgressCircular />
               </SpaceVertical>
-              : queryStatus === 'complete' && queryResults ? <FormattedTable queryResults={queryResults}></FormattedTable>
+              : queryStatus === 'complete' && queryResults ?
+                <FormattedTable queryResults={queryResults}></FormattedTable>
                 : ""
 
           }

diff --git a/src/Table.js b/src/Table.js
@@ -35,13 +35,15 @@ export const FormattedTable = ({ queryResults }) => {
   const sliceEndValue = currentPage == 1 ? 26 : (currentPage) * rowsPerPage + 1;
   const dataSubArray = data.slice(sliceStartValue, sliceEndValue)
   return (
-    <>
-      <Table>
-        <FormattedTableHead data={data} />
-        <FormattedTableBody data={dataSubArray} />
-      </Table >
+    <SpaceVertical style={{ width: "95%" }}>
+      <SpaceVertical m="large" style={{ maxHeight: "450px", overflow: "scroll" }}>
+        <Table >
+          <FormattedTableHead data={data} />
+          <FormattedTableBody data={dataSubArray} />
+        </Table >
+      </SpaceVertical>
       <TablePagination currentPage={currentPage} setCurrentPage={setCurrentPage} totalPages={totalPages} />
-    </>
+    </SpaceVertical>
   )
 }
 
@@ -67,7 +69,7 @@ const FormattedTableBody = ({ data }) => {
     <TableBody>
       {data.map((row, rowIndex) => {
         return (
-          <TableRow key={`TableRow-${rowIndex}`}>
+          <TableRow key={`TableRow-${rowIndex}`} style={rowIndex % 2 == 0 ? { backgroundColor: "#f2f2f2" } : {}}>
             {Object.keys(row).map((key, cellIndex) => {
               return (
                 <TableDataCell key={`TableDataCell-${rowIndex}-${cellIndex}`} >
@@ -84,10 +86,12 @@ const FormattedTableBody = ({ data }) => {
 
 const TablePagination = ({ currentPage, setCurrentPage, totalPages }) => {
   return (
-    <Pagination
-      current={currentPage}
-      pages={totalPages}
-      onChange={setCurrentPage}
-    />
+    <SpaceVertical align="end">
+      <Pagination
+        current={currentPage}
+        pages={totalPages}
+        onChange={setCurrentPage}
+      />
+    </SpaceVertical>
   )
 }