-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
12 improve tables design and functionality in results page (#16)
* 12 Rework Global Statistics component to be Table, and added headers to both tables * 12 Rework the whole Results screen and Statistics components to better visualise data --------- Co-authored-by: Anton Arnaudov <anton.arnaudov@audienceplatform.tv>
- Loading branch information
1 parent
e6358ca
commit 704396a
Showing
9 changed files
with
229 additions
and
207 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import {styled} from "@mui/material/styles"; | ||
| import TableRow from "@mui/material/TableRow"; | ||
|
|
||
| export const ZebraStyleTableRow = styled(TableRow)(() => ({ | ||
| '&:nth-of-type(odd)': { | ||
| backgroundColor: '#e6e6e6', | ||
| }, | ||
| // hide last border | ||
| '&:last-child td, &:last-child th': { | ||
| border: 0, | ||
| }, | ||
| })); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,143 +1,34 @@ | ||
| import React from "react"; | ||
|
|
||
| import {Stack} from "@mui/material"; | ||
|
|
||
| import {DefaultTextField} from "../design/TextFeld"; | ||
| import {LevInputAdornment} from "../design/InputAdornment"; | ||
|
|
||
| import {getGlobalStatistics} from "../../data/local-storage"; | ||
|
|
||
| import TableRow from "@mui/material/TableRow"; | ||
| import TableCell from "@mui/material/TableCell"; | ||
|
|
||
| export const GlobalStatistics = () => { | ||
| const globalStatistics = getGlobalStatistics() | ||
|
|
||
| return ( | ||
| <div className="global-statistics"> | ||
| {/*Global Results*/} | ||
| <Stack | ||
| id='global-statistics-box' | ||
| className="global-statistics-box" | ||
| direction="row" | ||
| justifyContent="space-evenly" | ||
| alignItems="center" | ||
| spacing={2} | ||
| > | ||
| {/* Global Info */} | ||
| <Stack direction="column" spacing={5}> | ||
| {/* Shop Name */} | ||
| <DefaultTextField | ||
| disabled | ||
| className="global-name" | ||
| defaultValue='Global Statistics' | ||
| ></DefaultTextField> | ||
|
|
||
| {/* Shops Count */} | ||
| <DefaultTextField | ||
| disabled | ||
| id="global-shops-count" | ||
| label="Total Shops Count" | ||
| defaultValue={globalStatistics.total_shops_count} | ||
| ></DefaultTextField> | ||
|
|
||
| {/* Products Count */} | ||
| <DefaultTextField | ||
| disabled | ||
| id="global-products-count" | ||
| label="Total Products Count" | ||
| defaultValue={globalStatistics.total_products_count} | ||
| ></DefaultTextField> | ||
| </Stack> | ||
|
|
||
| {/* Total Values */} | ||
| <Stack direction="column" spacing={5}> | ||
| {/* Total Commission */} | ||
| <DefaultTextField | ||
| disabled | ||
| id="global-total-commission" | ||
| label="Total Commission" | ||
| defaultValue={globalStatistics.total_commission} | ||
| InputProps={{startAdornment: <LevInputAdornment/>}} | ||
| ></DefaultTextField> | ||
|
|
||
| {/* Total Commission */} | ||
| <DefaultTextField | ||
| disabled | ||
| id="global-total-discount" | ||
| label="Total Discount" | ||
| defaultValue={globalStatistics.total_discount} | ||
| InputProps={{startAdornment: <LevInputAdornment/>}} | ||
| ></DefaultTextField> | ||
|
|
||
| {/* Total Commission */} | ||
| <DefaultTextField | ||
| disabled | ||
| id="global-total-shops-profit" | ||
| label="Total Shops Profit" | ||
| defaultValue={globalStatistics.total_shop_profit} | ||
| InputProps={{startAdornment: <LevInputAdornment/>}} | ||
| ></DefaultTextField> | ||
| </Stack> | ||
|
|
||
| {/* Average Values */} | ||
| <Stack direction="column" spacing={5}> | ||
| {/* Avg Commission */} | ||
| <DefaultTextField | ||
| disabled | ||
| id="global-avg-commission" | ||
| label="Average Commission" | ||
| defaultValue={globalStatistics.avg_commission} | ||
| InputProps={{startAdornment: <LevInputAdornment/>}} | ||
| ></DefaultTextField> | ||
|
|
||
| {/* Avg Commission */} | ||
| <DefaultTextField | ||
| disabled | ||
| id="global-avg-discount" | ||
| label="Average Discount" | ||
| defaultValue={globalStatistics.avg_discount} | ||
| InputProps={{startAdornment: <LevInputAdornment/>}} | ||
| ></DefaultTextField> | ||
|
|
||
| {/* Avg Commission */} | ||
| <DefaultTextField | ||
| disabled | ||
| id="global-avg-shops-profit" | ||
| label="Average Shops Profit" | ||
| defaultValue={globalStatistics.avg_shop_profit} | ||
| InputProps={{startAdornment: <LevInputAdornment/>}} | ||
| ></DefaultTextField> | ||
| </Stack> | ||
|
|
||
| {/* Commission Breakdown */} | ||
| <Stack direction="column" spacing={5}> | ||
| {/* Products Commissioned */} | ||
| <DefaultTextField | ||
| disabled | ||
| id="global-products-commissioned" | ||
| label="Total Products Commissioned" | ||
| defaultValue={globalStatistics.total_products_commissioned} | ||
| InputProps={{startAdornment: <LevInputAdornment/>}} | ||
| ></DefaultTextField> | ||
|
|
||
| {/* Pure Commission */} | ||
| <DefaultTextField | ||
| disabled | ||
| id="global-pure-commission" | ||
| label="Total Pure Commission" | ||
| defaultValue={globalStatistics.total_pure_commission} | ||
| InputProps={{startAdornment: <LevInputAdornment/>}} | ||
| ></DefaultTextField> | ||
|
|
||
| {/* Min Profit */} | ||
| <DefaultTextField | ||
| disabled | ||
| id="global-min-profit" | ||
| label="Total Min Profit" | ||
| defaultValue={globalStatistics.total_min_profit} | ||
| InputProps={{startAdornment: <LevInputAdornment/>}} | ||
| ></DefaultTextField> | ||
| </Stack> | ||
| </Stack> | ||
| </div> | ||
| <React.Fragment> | ||
| <TableRow className='global-statistics'> | ||
| {/* Info */} | ||
| <TableCell className='table-cell' >{globalStatistics.total_shops_count}</TableCell> | ||
| <TableCell className='table-cell'>{globalStatistics.total_products_count}</TableCell> | ||
|
|
||
| {/* Commission Breakdown */} | ||
| <TableCell className='border-left-dark table-cell'>{globalStatistics.total_products_commissioned}</TableCell> | ||
| <TableCell className='table-cell'>{globalStatistics.total_pure_commission} лв</TableCell> | ||
| <TableCell className='table-cell'>{globalStatistics.total_min_profit} лв</TableCell> | ||
|
|
||
| {/* Average Values */} | ||
| <TableCell className='border-left-dark table-cell'>{globalStatistics.avg_commission} лв</TableCell> | ||
| <TableCell className='table-cell'>{globalStatistics.avg_discount} лв</TableCell> | ||
| <TableCell className='table-cell'>{globalStatistics.avg_shop_profit} лв</TableCell> | ||
|
|
||
| {/* Total Values */} | ||
| <TableCell className='border-left-dark table-cell'>{globalStatistics.total_commission} лв</TableCell> | ||
| <TableCell className='table-cell'>{globalStatistics.total_discount} лв</TableCell> | ||
| <TableCell className='table-cell'>{globalStatistics.total_shop_profit} лв</TableCell> | ||
| </TableRow> | ||
| </React.Fragment> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.