Merge pull request #432 from edenia/dev

Production Release
edenia · Feb 6, 2023 · 3fd94e6 · 3fd94e6
2 parents d05962e + 4a8e2ad
commit 3fd94e6
Show file tree

Hide file tree

Showing 8 changed files with 213 additions and 150 deletions.
diff --git a/webapp/src/components/BarChartReport/custom-barChart.js b/webapp/src/components/BarChartReport/custom-barChart.js
@@ -4,16 +4,18 @@ import { makeStyles } from '@mui/styles'
 import PropTypes from 'prop-types'
 import { Box } from '@mui/system'
 import {
-  ComposedChart,
-  Bar,
-  XAxis,
-  YAxis,
+  ResponsiveContainer,
   CartesianGrid,
+  ComposedChart,
   Tooltip,
   Legend,
-  ResponsiveContainer
+  XAxis,
+  YAxis,
+  Bar
 } from 'recharts'
 
+import Loader from '../Loader'
+
 import CustomTooltipBarChart from './custom-tooltip-barChart'
 import styles from './styles'
 
@@ -59,43 +61,49 @@ const CustomBarChart = ({ typeData, selectedUSD, data, barRef }) => {
 
   return (
     <ResponsiveContainer width="100%" height={300} marginTop="16px">
-      <ComposedChart
-        margin={{ top: 8, right: 16 }}
-        height={300}
-        data={data}
-        ref={barRef}
-      >
-        <CartesianGrid stroke="#f0f0f0" />
-        <XAxis
-          tick={{ fontSize: 10, stroke: '#000', strokeWidth: 0.5 }}
-          dataKey="election"
-          scale="auto"
-        />
-        <YAxis tick={{ fontSize: '10px', stroke: '#000', strokeWidth: 0.1 }} />
-        <Tooltip
-          wrapperStyle={{
-            outline: 'none',
-            borderRadius: '4px',
-            backgroundColor: '#F9F9F9',
-            fontSize: '14px',
-            padding: '8px'
-          }}
-          content={
-            <CustomTooltipBarChart coinType={coinType} category={category} />
-          }
-        />
-        <Legend content={<RenderChartLegend data={category} />} />
-        {legentsList.map(({ color, label }) => (
-          <Bar
-            key={`key-${label + category}-bar`}
-            dataKey={`${coinType}_${label.toLocaleUpperCase()}${
-              label === 'total' ? '' : category.toLocaleUpperCase()
-            }`}
-            barSize={35}
-            fill={color}
+      {data.length < 1 ? (
+        <Loader />
+      ) : (
+        <ComposedChart
+          margin={{ top: 8, right: 16 }}
+          height={300}
+          data={data}
+          ref={barRef}
+        >
+          <CartesianGrid stroke="#f0f0f0" />
+          <XAxis
+            tick={{ fontSize: 10, stroke: '#000', strokeWidth: 0.5 }}
+            dataKey="election"
+            scale="auto"
+          />
+          <YAxis
+            tick={{ fontSize: '10px', stroke: '#000', strokeWidth: 0.1 }}
+          />
+          <Tooltip
+            wrapperStyle={{
+              outline: 'none',
+              borderRadius: '4px',
+              backgroundColor: '#F9F9F9',
+              fontSize: '14px',
+              padding: '8px'
+            }}
+            content={
+              <CustomTooltipBarChart coinType={coinType} category={category} />
+            }
           />
-        ))}
-      </ComposedChart>
+          <Legend content={<RenderChartLegend data={category} />} />
+          {legentsList.map(({ color, label }) => (
+            <Bar
+              key={`key-${label + category}-bar`}
+              dataKey={`${coinType}_${label.toLocaleUpperCase()}${
+                label === 'total' ? '' : category.toLocaleUpperCase()
+              }`}
+              barSize={35}
+              fill={color}
+            />
+          ))}
+        </ComposedChart>
+      )}
     </ResponsiveContainer>
   )
 }

diff --git a/webapp/src/components/LineChartReport/custom-lineChart.js b/webapp/src/components/LineChartReport/custom-lineChart.js
@@ -11,6 +11,8 @@ import {
   Brush
 } from 'recharts'
 
+import Loader from '../Loader'
+
 import CustomTooltipLineChart from './custom-tooltip-lineChart'
 
 const renderTraveller = props => {
@@ -73,77 +75,81 @@ const CustomLineChart = ({ coinType, data, lineRef }) => {
       height={300}
       marginTop="16px"
     >
-      <LineChart
-        margin={{ top: 8, bottom: 24, right: 16 }}
-        height={300}
-        data={data}
-        ref={lineRef}
-      >
-        <CartesianGrid stroke="#f0f0f0" />
-        <XAxis
-          tick={{ fontSize: 10, stroke: '#000', strokeWidth: 0.5 }}
-          dataKey="date"
-          scale="auto"
-          interval={xAxisData}
-          allowDataOverflow={false}
-        />
-        <YAxis
-          tick={{ fontSize: '10px', stroke: '#000', strokeWidth: 0.1 }}
-          scale="linear"
-        />
-        <Tooltip
-          wrapperStyle={{
-            outline: 'none',
-            borderRadius: '4px',
-            backgroundColor: '#F9F9F9',
-            fontSize: '14px',
-            padding: '8px'
-          }}
-          content={<CustomTooltipLineChart coinType={coinType} />}
-        />
-        <Line
-          type="monotone"
-          dataKey={`${coinType}_BALANCE`}
-          stroke="#3866eb"
-          strokeWidth={2}
-          activeDot={{ r: 8 }}
-        />
-        <Line
-          type="monotone"
-          dataKey={`${coinType}_VALUED`}
-          stroke="#3866eb"
-          strokeWidth={2}
-          activeDot={{ r: 8 }}
-          strokeDasharray={5}
-        />
-        <Brush
-          dataKey={'date'}
-          width={width * 0.7}
-          height={30}
-          x={width / 6.2}
-          y={260}
-          traveller={renderTraveller}
-          travellerWidth={1}
-          onChange={handleBrushChange}
+      {data.length < 1 ? (
+        <Loader />
+      ) : (
+        <LineChart
+          margin={{ top: 8, bottom: 24, right: 16 }}
+          height={300}
+          data={data}
+          ref={lineRef}
         >
-          <LineChart data={data}>
-            <Line
-              type="monotone"
-              dataKey={`${coinType}_BALANCE`}
-              stroke="#87cefa"
-              strokeWidth={2}
-              dot={false}
-            />
-            <Line
-              type="monotone"
-              dataKey={`${coinType}_VALUED`}
-              stroke="#87cefa"
-              strokeWidth={2}
-              dot={false}
-            />
-          </LineChart>
-        </Brush>
-      </LineChart>
+          <CartesianGrid stroke="#f0f0f0" />
+          <XAxis
+            tick={{ fontSize: 10, stroke: '#000', strokeWidth: 0.5 }}
+            dataKey="date"
+            scale="auto"
+            interval={xAxisData}
+            allowDataOverflow={false}
+          />
+          <YAxis
+            tick={{ fontSize: '10px', stroke: '#000', strokeWidth: 0.1 }}
+            scale="linear"
+          />
+          <Tooltip
+            wrapperStyle={{
+              outline: 'none',
+              borderRadius: '4px',
+              backgroundColor: '#F9F9F9',
+              fontSize: '14px',
+              padding: '8px'
+            }}
+            content={<CustomTooltipLineChart coinType={coinType} />}
+          />
+          <Line
+            type="monotone"
+            dataKey={`${coinType}_BALANCE`}
+            stroke="#3866eb"
+            strokeWidth={2}
+            activeDot={{ r: 8 }}
+          />
+          <Line
+            type="monotone"
+            dataKey={`${coinType}_VALUED`}
+            stroke="#3866eb"
+            strokeWidth={2}
+            activeDot={{ r: 8 }}
+            strokeDasharray={5}
+          />
+          <Brush
+            dataKey={'date'}
+            width={width * 0.7}
+            height={30}
+            x={width / 6.2}
+            y={260}
+            traveller={renderTraveller}
+            travellerWidth={1}
+            onChange={handleBrushChange}
+          >
+            <LineChart data={data}>
+              <Line
+                type="monotone"
+                dataKey={`${coinType}_BALANCE`}
+                stroke="#87cefa"
+                strokeWidth={2}
+                dot={false}
+              />
+              <Line
+                type="monotone"
+                dataKey={`${coinType}_VALUED`}
+                stroke="#87cefa"
+                strokeWidth={2}
+                dot={false}
+              />
+            </LineChart>
+          </Brush>
+        </LineChart>
+      )}
     </ResponsiveContainer>
   )
 }

diff --git a/webapp/src/components/LineChartReport/index.js b/webapp/src/components/LineChartReport/index.js
@@ -66,26 +66,29 @@ const LineChartReport = ({
   }, [selectedUSD])
 
   useEffect(() => {
-    if (viewSelected === 'last') {
-      const count = historicElections.length - 2 || 0
-      const date = historicElections?.at(count)?.date_election.split('T')[0]
-      const subData = data?.filter(obj => obj.date >= date)
-      setDataChart(subData)
-    }
+    if (!viewSelected) return
+
+    if (viewSelected === 'last') setDataChart([data.at(-2), data.at(-1)])
+
     if (viewSelected === 'all') setDataChart(data)
+
+    setElectionRoundSelect('')
   }, [viewSelected])
 
   useEffect(() => {
     if (!electionRoundSelect) return
+
     const index = historicElections.findIndex(
       election => Number(election.election) === Number(electionRoundSelect)
     )
+
     const subData = data?.filter(
       objt =>
         objt.date >= historicElections[index].date_election &&
-        objt.date <= historicElections[index + 1]?.date_election
+        objt.date <= (historicElections[index + 1]?.date_election || objt.date)
     )
-    setViewSelect(electionRoundSelect)
+
+    setViewSelect('')
 
     setDataChart(subData)
   }, [electionRoundSelect])
@@ -130,7 +133,7 @@ const LineChartReport = ({
             onClick={handleSelectElection}
             value="last"
           >
-            {t('estimated', { ns: 'incomeRoute' }).toUpperCase()}
+            {t('estimated', { ns: 'incomeRoute' })}
           </Button>
         </div>
         <Select

diff --git a/webapp/src/components/LineChartReport/styles.js b/webapp/src/components/LineChartReport/styles.js
@@ -33,14 +33,19 @@ export default theme => ({
     },
     [theme.breakpoints.down('sm')]: {
       width: '100%'
+    },
+    [theme.breakpoints.down(418)]: {
+      position: 'absolute',
+      top: 42
     }
   },
   titleContainer: {
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
     [theme.breakpoints.down('sm')]: {
-      flexDirection: 'column'
+      flexDirection: 'column',
+      position: 'relative'
     }
   },
   chartLegent: {
@@ -67,10 +72,11 @@ export default theme => ({
   },
   buttonFilter: {
     display: 'flex',
-    alignItems: 'center',
+    alignItems: 'end',
     justifyContent: 'end',
+    marginBottom: theme.spacing(1),
     '& button': {
-      margin: 8,
+      margin: theme.spacing(1, 1, 1, 0),
       borderRadius: 0,
       boxShadow: 'none',
       backgroundColor: '#2563eb'