Merge pull request #426 from edenia/fix/ui-ux-improvements-on-treasur…

…y-chart-425 fix(webapp): ui ux improvements on treasury chart
edenia · Jan 24, 2023 · 6213ee2 · 6213ee2
2 parents 8c9c204 + dc5f786
commit 6213ee2
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 11 deletions.
diff --git a/webapp/src/components/BarChartReport/custom-barChart.js b/webapp/src/components/BarChartReport/custom-barChart.js
@@ -60,7 +60,7 @@ const CustomBarChart = ({ typeData, selectedUSD, data, barRef }) => {
   return (
     <ResponsiveContainer width="100%" height={300} marginTop="16px">
       <ComposedChart
-        margin={{ left: -16, top: 8 }}
+        margin={{ top: 8, right: 16 }}
         height={300}
         data={data}
         ref={barRef}

diff --git a/webapp/src/components/LineChartReport/custom-lineChart.js b/webapp/src/components/LineChartReport/custom-lineChart.js
@@ -74,7 +74,7 @@ const CustomLineChart = ({ coinType, data, lineRef }) => {
       marginTop="16px"
     >
       <LineChart
-        margin={{ left: -16, top: 8, bottom: 8 }}
+        margin={{ top: 8, bottom: 24, right: 16 }}
         height={300}
         data={data}
         ref={lineRef}
@@ -121,6 +121,7 @@ const CustomLineChart = ({ coinType, data, lineRef }) => {
           width={width * 0.7}
           height={30}
           x={width / 6.2}
+          y={260}
           traveller={renderTraveller}
           travellerWidth={1}
           onChange={handleBrushChange}
@@ -139,7 +140,6 @@ const CustomLineChart = ({ coinType, data, lineRef }) => {
               stroke="#87cefa"
               strokeWidth={2}
               dot={false}
-              strokeDasharray={5}
             />
           </LineChart>
         </Brush>

diff --git a/webapp/src/components/LineChartReport/index.js b/webapp/src/components/LineChartReport/index.js
@@ -30,7 +30,7 @@ const LineChartReport = ({
 }) => {
   const classes = useStyles()
   const [getBarPng, { ref: lineRef }] = useCurrentPng()
-  const { t } = useTranslation()
+  const { t } = useTranslation('generalForm')
   const [selectedUSD, setSelected] = useState(false)
   const [coinType, setCoinType] = useState('EOS')
   const [viewSelected, setViewSelect] = useState('')
@@ -107,7 +107,7 @@ const LineChartReport = ({
           <FormGroup>
             <FormControlLabel
               control={<Switch checked={selectedUSD} onChange={handleChange} />}
-              label={t('switchInput', { ns: 'generalForm' })}
+              label={t('switchInput')}
               labelPlacement="start"
             />
           </FormGroup>
@@ -121,7 +121,7 @@ const LineChartReport = ({
             onClick={handleSelectElection}
             value="all"
           >
-            all
+            {t('AllSelectYear')}
           </Button>
 
           <Button
@@ -130,12 +130,12 @@ const LineChartReport = ({
             onClick={handleSelectElection}
             value="last"
           >
-            Estimated treasury
+            {t('estimated', { ns: 'incomeRoute' }).toUpperCase()}
           </Button>
         </div>
         <Select
           onChangeFunction={setElectionRoundSelect}
-          labelSelect={t('textElectionSelect', { ns: 'generalForm' })}
+          labelSelect={t('textElectionSelect')}
           values={historicElections.map(data => `${data.election}`)}
           actualValue={electionRoundSelect}
           width={110}

diff --git a/webapp/src/components/LineChartReport/styles.js b/webapp/src/components/LineChartReport/styles.js
@@ -7,6 +7,10 @@ export default theme => ({
     overflowY: 'hidden',
     [theme.breakpoints.down('sm')]: {
       overflowX: 'hidden'
+    },
+    '& .recharts-brush-texts': {
+      fontSize: 10,
+      fontWeight: 600
     }
   },
   title: {
@@ -15,6 +19,9 @@ export default theme => ({
       fontWeight: 500,
       lineHeight: 1.56,
       letterSpacing: '-0.4px'
+    },
+    [theme.breakpoints.down('sm')]: {
+      width: '100%'
     }
   },
   filter: {
@@ -23,12 +30,18 @@ export default theme => ({
       fontWeight: 300,
       lineHeight: 1.33,
       letterSpacing: '-0.26px'
+    },
+    [theme.breakpoints.down('sm')]: {
+      width: '100%'
     }
   },
   titleContainer: {
     display: 'flex',
     justifyContent: 'space-between',
-    alignItems: 'center'
+    alignItems: 'center',
+    [theme.breakpoints.down('sm')]: {
+      flexDirection: 'column'
+    }
   },
   chartLegent: {
     display: 'flex',

diff --git a/webapp/src/language/en.json b/webapp/src/language/en.json
@@ -94,7 +94,7 @@
     "trasury": "Projected Treasury Balance",
     "delegate": "Delegate",
     "balance": "Treasury Balance",
-    "estimated": "Estimated Treasury Balance"
+    "estimated": "Estimated Balance"
   },
   "expenseRoute": {
     "titleBarChart": "Expense per Election",

diff --git a/webapp/src/language/es.json b/webapp/src/language/es.json
@@ -95,7 +95,7 @@
     "trasury": "Balance de tesorería proyectado",
     "delegate": "Delegate",
     "balance": "Saldo de Tesorería",
-    "estimated": "Balance de Tesorería Estimado"
+    "estimated": "Balance Estimado"
   },
   "expenseRoute": {
     "titleBarChart": "Gasto por Elección",