feat(webapp): linechart treasury balance on income

edenia · Jan 6, 2023 · 961f790 · 961f790
1 parent f1bf5e4
commit 961f790
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 31 deletions.
diff --git a/webapp/src/components/LineChartReport/index.js b/webapp/src/components/LineChartReport/index.js
@@ -59,36 +59,22 @@ RenderChartLegend.propTypes = {
 const CustomTooltip = ({ payload = [], label = '', coinType = '' }) => {
   const { t } = useTranslation()
   label = label + ''
-  const arrayLabel = label.split(' ')
 
   return (
     <div>
-      <strong>
-        {`${t(arrayLabel[0].toLocaleLowerCase(), { ns: 'generalForm' })} ${
-          arrayLabel[1]
-        }`}
-      </strong>
       {payload &&
         payload.map((data, i) => (
           <div key={`${i}-tooltip`}>
             <div>
               {i === 0 &&
-                data.payload?.date &&
-                `${
-                  data.payload.date ? t('date', { ns: 'generalForm' }) : ''
-                }: ${
-                  data.payload.date ? data.payload.date.split('T')[0] : ''
+                `${t('date', { ns: 'generalForm' })}: ${
+                  data.payload.date.split('T')[0]
                 } `}
             </div>
             <div>
-              {`${t(
-                data.payload.category
-                  ? `${data.dataKey
-                      .split('_')[1]
-                      .toLocaleLowerCase()}${data.payload.category.toLocaleLowerCase()}`
-                  : data.dataKey.split('_')[1].toLocaleLowerCase(),
-                { ns: 'generalForm' }
-              )}: ${formatWithThousandSeparator(
+              {`${t('balance', {
+                ns: 'incomeRoute'
+              })}: ${formatWithThousandSeparator(
                 data.payload[data.dataKey],
                 4
               )} ${coinType}`}
@@ -105,18 +91,14 @@ CustomTooltip.propTypes = {
   coinType: PropTypes.string
 }
 
-const LineChartReport = ({
-  data,
-  keyTranslation,
-  pathTranslation,
-  showLegend
-}) => {
+const LineChartReport = ({ data, keyTranslation, pathTranslation }) => {
   console.log(data)
   const classes = useStyles()
   const [getBarPng, { ref: lineRef }] = useCurrentPng()
   const { t } = useTranslation()
   const [selectedUSD, setSelected] = useState(false)
   const [coinType, setCoinType] = useState('EOS')
+  const [dataKey, setDataKey] = useState('balance')
 
   const handleChange = event => {
     setSelected(event.target.checked)
@@ -131,7 +113,13 @@ const LineChartReport = ({
   }, [getBarPng])
 
   useEffect(() => {
-    selectedUSD ? setCoinType('USD') : setCoinType('EOS')
+    if (selectedUSD) {
+      setCoinType('USD')
+      setDataKey('usd_total')
+    } else {
+      setDataKey('balance')
+      setCoinType('EOS')
+    }
   }, [selectedUSD])
 
   return (
@@ -185,7 +173,7 @@ const LineChartReport = ({
 
             <Line
               type="monotone"
-              dataKey="eos_exchange"
+              dataKey={dataKey}
               stroke="#8884d8"
               activeDot={{ r: 8 }}
             />
@@ -199,8 +187,7 @@ const LineChartReport = ({
 LineChartReport.propTypes = {
   data: PropTypes.array,
   keyTranslation: PropTypes.string,
-  pathTranslation: PropTypes.string,
-  showLegend: PropTypes.bool
+  pathTranslation: PropTypes.string
 }
 
 export default memo(LineChartReport)
diff --git a/webapp/src/gql/eden-income.gql.js b/webapp/src/gql/eden-income.gql.js
@@ -18,6 +18,16 @@ export const GET_TOTAL_INCOME_BY_ALL_ELECTIONS = gql`
   }
 `
 
+export const GET_TREASURY = gql`
+  query getTreasury {
+    eden_treasury(order_by: { date: asc }) {
+      balance
+      usd_total
+      date
+    }
+  }
+`
+
 export const GET_TOTAL_DELEGATE_INCOME_BY_ELECTION = gql`
   query getTotalDelegateIncomeByElection($where: historic_incomes_bool_exp) {
     historic_incomes(where: $where) {

diff --git a/webapp/src/hooks/customHooks/useIncomeReportState.js b/webapp/src/hooks/customHooks/useIncomeReportState.js
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 
 import {
+  GET_TREASURY,
   GET_ELECTIONS,
   GET_TOTAL_INCOME_BY_DELEGATE,
   GET_TOTAL_INCOME_BY_ALL_ELECTIONS,
@@ -18,8 +19,10 @@ const useIncomeReportState = () => {
   const [incomeByElectionsList, setIncomeByElectionsList] = useState([])
   const [electionsList, setelectionsList] = useState([])
   const [delegatesList, setDelegatesList] = useState([])
+  const [treasuryList, setTreasuryList] = useState([])
 
   const loadIncomesByDelegate = useImperativeQuery(GET_TOTAL_INCOME_BY_DELEGATE)
+  const loadTreasuryBalance = useImperativeQuery(GET_TREASURY)
   const loadElections = useImperativeQuery(GET_ELECTIONS)
   const loadIncomeByElections = useImperativeQuery(
     GET_TOTAL_INCOME_BY_ALL_ELECTIONS
@@ -33,6 +36,10 @@ const useIncomeReportState = () => {
 
     const { data: electionsData } = await loadElections()
 
+    const { data: treasuryData } = await loadTreasuryBalance()
+
+    setTreasuryList(treasuryData.eden_treasury)
+
     setElectionRoundSelect(electionsData.eden_election[0]?.election)
 
     setelectionsList(electionsData.eden_election || [])
@@ -71,6 +78,7 @@ const useIncomeReportState = () => {
       incomeByElectionsList,
       electionsList,
       delegatesList,
+      treasuryList,
       electionRoundSelect,
       showElectionRadio
     },

diff --git a/webapp/src/language/en.json b/webapp/src/language/en.json
@@ -69,6 +69,7 @@
   "incomeRoute": {
     "titleBarChart": "Income per Election",
     "titlePieChart": "Delegate Income",
+    "titleLineChart": "Treasury Balance Over Time",
     "titleTable": "Amounts Claimed and Unclaimed by Election",
     "titleTable2": "Amounts Claimed and Unclaimed by all Elections",
     "tableElectionHeader": "Term",
@@ -81,7 +82,8 @@
     "tableHeader7": "Claimed %",
     "tableHeader8": "Unclaimed %",
     "claimedCategory": "Claimed",
-    "unclaimedCategory": "Unclaimed"
+    "unclaimedCategory": "Unclaimed",
+    "balance": "Treasury Balance"
   },
   "expenseRoute": {
     "titleBarChart": "Expense per Election",

diff --git a/webapp/src/language/es.json b/webapp/src/language/es.json
@@ -69,6 +69,7 @@
   "incomeRoute": {
     "titleBarChart": "Ingresos por Elección",
     "titlePieChart": "Ingresos de los Delegados",
+    "titleLineChart": "Saldo de tesorería en el tiempo",
     "titleTable": "Montos Reclamados y No Reclamados por Elección",
     "titleTable2": "Montos Reclamados y No Reclamados de Todas las Elecciones",
     "tableElectionHeader": "Periodo",
@@ -81,7 +82,8 @@
     "tableHeader7": "% Reclamado",
     "tableHeader8": "% No reclamado",
     "claimedCategory": "Reclamado",
-    "unclaimedCategory": "No reclamado"
+    "unclaimedCategory": "No reclamado",
+    "balance": "Saldo de Tesorería"
   },
   "expenseRoute": {
     "titleBarChart": "Gasto por Elección",

diff --git a/webapp/src/routes/IncomeReport/index.js b/webapp/src/routes/IncomeReport/index.js
@@ -12,6 +12,7 @@ import {
 
 import useIncomeReportState from '../../hooks/customHooks/useIncomeReportState'
 import BarChartReport from '../../components/BarChartReport'
+import LineChartReport from '../../components/LineChartReport'
 import TreasuryBalance from '../../components/TreasuryBalance'
 import PieChartReport from '../../components/PieChartReport'
 import { formatWithThousandSeparator } from '../../utils'
@@ -34,6 +35,7 @@ const IncomeReport = () => {
       incomeByElectionsList,
       electionsList,
       delegatesList,
+      treasuryList,
       electionRoundSelect,
       showElectionRadio
     },
@@ -97,6 +99,11 @@ const IncomeReport = () => {
       <div id="treasury-container-id">
         <TreasuryBalance />
       </div>
+      <LineChartReport
+        data={treasuryList}
+        keyTranslation={'titleLineChart'}
+        pathTranslation={'incomeRoute'}
+      />
       <BarChartReport
         data={incomeByElectionsList}
         keyTranslation={'titleBarChart'}