search

Allicce / engeto-hackethon-team-3

0 stars 0 forks source link

Create tabs and graphs component #14

Open Allicce opened 3 days ago

Allicce commented 3 days ago

Components: https://mui.com/x/react-charts/pie/ https://mui.com/material-ui/react-tabs/ https://mui.com/material-ui/react-button/

Icons

https://fonts.google.com/icons?selected=Material+Symbols+Outlined:error:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=error&icon.size=24&icon.color=%235f6368

For convert svg to react icon component use: https://react-svgr.com/playground/?typescript=true

No data:

if data doesn't exist - show text message instead of pie chart: No data is available for this period. || Custom message

Error state:

if data are corrupted or API return some error - show message Something went wrong. Please try again later. with button (variant text) reload || custom error

Props:

tabs: - string | React.ReactNode []

Description:

Specifies the content of the tabs. Each item in the array can be:

A string: Used as the tab's name (label). A React component: Rendered directly as the tab's name (label).

Behavior:

If an array of strings is provided, each string becomes the label of a corresponding tab. If an array of React components is provided, each component is rendered as the label of a corresponding tab.

Examples: 

tabs={['Home', 'Profile', 'Settings']}
tabs={[
    <span style={{ color: 'red' }}>Home</span>,
    <strong>Profile</strong>,
    <i>Settings</i>,
  ]}
tabs={[
    <span style={{ color: 'red' }}>Home</span>,
    <strong>Profile</strong>,
    'settings',
  ]}

if tabs are undefined - hide component

component will be use in transaction page, dashboard, budget planner

image

image

Allicce commented 3 days ago

@hanzbzz prosim ta ako backend budete vraciat data pre grafy co sa tyka kategorii a rozdelenia na expense, income, savings v jednom api calle ako jeden objekt kde to bude rozdelene alebo sa tam bude volat pre kazdku kategoriu api zvlast?

hanzbzz commented 2 days ago

tady je to popsane https://github.com/Allicce/engeto-hackethon-team-3/issues/7 bude endpoint pro celkovy cashflow, pak podle kategorie a pak subkategorie