fix: charts components

eliasrosa · Nov 25, 2023 · 6e92ee5 · 6e92ee5
1 parent 95494ed
commit 6e92ee5
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 50 deletions.
diff --git a/src/components/common/Card.tsx b/src/components/common/Card.tsx
@@ -11,7 +11,7 @@ interface Props {
 export function Card({ title, subtitle, children, ...props }: Props) {
   return (
     <CardTremor {...props}>
-      <Title className="justify-between">
+      <Title className="justify-between mb-2">
         <span data-testid="title">{title}</span>
         <span data-testid="subtitle" className="text-gray-500 text-sm">
           {subtitle}

diff --git a/src/components/common/Title.tsx b/src/components/common/Title.tsx
@@ -7,7 +7,7 @@ export function Title({ children, ...props }: TitleProps) {
   return (
     <TitleTremor
       className={cn(
-        'border-b text-gray-600 border-b-gray-400 flex flex-col pb-2',
+        'border-b text-gray-600 border-b-gray-400 flex flex-col',
         'sm:flex-row sm:justify-between',
         props.className,
       )}

diff --git a/src/components/pages/home/history-chart/Chart.tsx b/src/components/pages/home/history-chart/Chart.tsx
@@ -1,5 +1,5 @@
 import { toCurrency } from '@/helpers/currency'
-import { LineChart } from '@tremor/react'
+import { AreaChart } from '@tremor/react'
 
 interface Props {
   data: any[]
@@ -12,12 +12,15 @@ export function Chart({ data = [], categories = [] }: Props) {
   }
 
   return (
-    <LineChart
+    <AreaChart
       data={data}
       index="date"
       categories={categories}
       valueFormatter={toCurrency}
       yAxisWidth={85}
+      startEndOnly={true}
+      autoMinValue={true}
+      curveType="step"
       colors={[
         'red',
         'blue',

diff --git a/src/components/pages/home/history-chart/index.tsx b/src/components/pages/home/history-chart/index.tsx
@@ -37,7 +37,15 @@ const convertData = (
     return mergeArrayOfObjects(rowData)
   })
 
-  return data.reverse()
+  return data.reverse().filter((row) => {
+    return Object.values(row).every((value) => {
+      if (String(value).includes('/')) {
+        return true
+      }
+
+      return value !== 0
+    })
+  })
 }
 
 const getCategories = (tickers: TickerData[]) => {
@@ -61,20 +69,33 @@ export function HistoryCard({ report, title, subtitle, metric }: Props) {
   if (isLoading || !tickersData) {
     return (
       <Card title={title} subtitle={subtitle}>
-        Carregando...
+        <p className="text-gray-500 text-sm text-center mt-6">Carregando...</p>
       </Card>
     )
   }
 
   if (error) {
     return (
       <Card title={title} subtitle={subtitle}>
-        Erro...
+        <p className="text-gray-500 text-sm text-center mt-6">
+          Ocorreu um erro ao carregar os dados!
+        </p>
+      </Card>
+    )
+  }
+
+  if (tickersData.length === 0) {
+    return (
+      <Card title={title} subtitle={subtitle}>
+        <p className="text-gray-500 text-sm text-center mt-6">
+          Adicione os ativos na cateira para visualizar
+        </p>
       </Card>
     )
   }
 
   const data = convertData(dateList, tickersData, report, metric)
+
   const categories = getCategories(tickersData)
 
   return (

diff --git a/src/components/pages/home/tickers-table/Table.tsx b/src/components/pages/home/tickers-table/Table.tsx
@@ -23,23 +23,34 @@ export function Table() {
   const { tickers } = usePortfolios()
 
   return (
-    <TremorTable>
-      <TableHead>
-        <TableRow data-testid="header-portfolio">
-          <HeaderCell title="" />
-          <HeaderCell title="Papel" helper={<HelperTicker />} />
-          <HeaderCell title="Valor Atual" helper={<HelperPrice />} />
-          <HeaderCell title="PV/P" helper={<HelperPVP />} />
-          <HeaderCell title="DY 12M" helper={<HelperDY />} />
-          <HeaderCell title="Últ. Rend." helper={<HelperLastDividend />} />
-          <HeaderCell title="Últ. Rend. 12M" helper={<HelperSumDividends />} />
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {tickers.map((t) => (
-          <Row key={t.ticker} ticker={t} />
-        ))}
-      </TableBody>
-    </TremorTable>
+    <>
+      <TremorTable>
+        <TableHead>
+          <TableRow data-testid="header-portfolio">
+            <HeaderCell title="" />
+            <HeaderCell title="Papel" helper={<HelperTicker />} />
+            <HeaderCell title="Valor Atual" helper={<HelperPrice />} />
+            <HeaderCell title="PV/P" helper={<HelperPVP />} />
+            <HeaderCell title="DY 12M" helper={<HelperDY />} />
+            <HeaderCell title="Últ. Rend." helper={<HelperLastDividend />} />
+            <HeaderCell
+              title="Últ. Rend. 12M"
+              helper={<HelperSumDividends />}
+            />
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {tickers.map((t) => (
+            <Row key={t.ticker} ticker={t} />
+          ))}
+        </TableBody>
+      </TremorTable>
+
+      {tickers.length === 0 && (
+        <p className="text-gray-500 text-sm text-center mt-6">
+          Adicione os ativos na cateira para visualizar
+        </p>
+      )}
+    </>
   )
 }
diff --git a/src/components/pages/simulator/chart/index.tsx b/src/components/pages/simulator/chart/index.tsx
@@ -1,6 +1,6 @@
 import { toCurrency } from '@/helpers/currency'
 import { SimulatorResult } from '@/helpers/simulatorCalculate'
-import { LineChart } from '@tremor/react'
+import { AreaChart } from '@tremor/react'
 
 interface Props {
   results: SimulatorResult[]
@@ -18,12 +18,15 @@ export function Chart({ results = [] }: Props) {
   }))
 
   return (
-    <LineChart
+    <AreaChart
       data={data}
       index="Mês"
       categories={['Total Investido', 'Total Acumulado']}
       valueFormatter={toCurrency}
       yAxisWidth={105}
+      startEndOnly={true}
+      autoMinValue={true}
+      curveType="natural"
       colors={['blue', 'green']}
     />
   )

diff --git a/src/services/TickerService.test.ts b/src/services/TickerService.test.ts
@@ -11,9 +11,9 @@ describe('TickerService', () => {
     expect(result).toBeDefined()
     expect(result.ticker).toBe(ticker)
     expect(result.pvp).toBe(1.05)
-    expect(result.dy12).toBe(8.21)
+    expect(result.dy12).toBe(8.5)
     expect(result.price).toBe(107)
-    expect(result.dividend12).toBe(8.79)
+    expect(result.dividend12).toBe(9.1)
     expect(result.lastDividend).toBe(0.74)
     expect(result.dividendsHistory.length).toBe(12)
     expect(result.pricesHistory.length).toBeTruthy()
@@ -45,25 +45,15 @@ describe('TickerService', () => {
     expect(result.dividendsHistory.length).toBe(12)
 
     expect(result.dividendsHistory[0]).toEqual({
-      kind: 'cash',
-      currency: 'brl',
-      isin_code: 'BRXPLGCTF002',
-      label: 'Rendimento',
       amount: 0.78,
-      approved_in: '2023-10-31',
-      traded_until: '2023-10-31',
-      payment_date: '2023-11-16',
+      date: 'Nov/23',
+      timestamp: 1700103600000,
     })
 
     expect(result.dividendsHistory[11]).toEqual({
-      kind: 'cash',
-      currency: 'brl',
-      isin_code: 'BRXPLGCTF002',
-      label: 'Rendimento',
       amount: 0.74,
-      approved_in: '2023-03-31',
-      traded_until: '2023-03-31',
-      payment_date: '2023-04-17',
+      date: 'Dec/22',
+      timestamp: 1670986800000,
     })
   })
 

diff --git a/src/services/TickerService.ts b/src/services/TickerService.ts
@@ -104,7 +104,7 @@ export class TickerService {
       throw new Error(dividends.message)
     }
 
-    dividends
+    return dividends
       .filter((result: any) => {
         const tickerCode = `BR${symbol.substring(0, 4)}CTF`
         return (
@@ -121,8 +121,7 @@ export class TickerService {
 
         return { timestamp, amount, date }
       })
-
-    return dividends.splice(0, 12)
+      .splice(0, 12)
   }
 
   private async fetchPricesHistory(symbol: string) {

diff --git a/src/storage/tickersInitialState.ts b/src/storage/tickersInitialState.ts
@@ -1,10 +1,10 @@
 import { Ticker } from '@/@types/TickersTypes'
-// import { config } from '@/config'
+import { config } from '@/config'
 
-// const portfolioId = '5a31ee47-6b2f-4586-8fb9-983010149ec7'
+const portfolioId = '5a31ee47-6b2f-4586-8fb9-983010149ec7'
 
 export const tickersInitialState: Ticker[] = [
-  // { ...config.defaults.ticker, portfolioId, ticker: 'XPLG11' },
-  // { ...config.defaults.ticker, portfolioId, ticker: 'XPML11' },
+  { ...config.defaults.ticker, portfolioId, ticker: 'XPLG11' },
+  { ...config.defaults.ticker, portfolioId, ticker: 'XPML11' },
   // { ...config.defaults.ticker, portfolioId, ticker: 'SARE11' },
 ]