The top of the statistics page is categorized as “income/Expenditure,” which is similar to the category on the accounting page, so you can use it directly.
Statistics page mainly shows: label, amount, (time), in order to convert the time into the format of year month day, need to introduce
yarn add dayjs
Copy the codeThe basic code is:
import Layout from ".. /components/Layout"; import React, {useState} from "react"; import {CategorySection} from "./money/CategorySection"; import {useRecords} from ".. /hooks/useRecords"; import {useTags} from ".. /hooks/useTags"; import day from "dayjs"; function Statistics() { const [category,setCategory]=useState<'-'|'+'>('-') const {records}=useRecords() const {getName}=useTags() return ( <Layout> <CategorySection value={category} onChange={(value) => setCategory(value)}/> <div> {records.map(r=>{ return <div> {r.tagIds.map(tagId=><span>{getName(tagId)}</span>)} <hr/> {r.amount} <hr/> {day(r.createdat). Format ('YYYY MM month DD day ')} </div>})} </div> </Layout>)} export default Statistics;Copy the codeIncome/expenditure classification
const selectedRecords = records.filter(r => r.category === category)
Copy the codeChange records to selectedRecords.
Statistics pages are grouped by time
Note: object order is not guaranteed, for example var o = {a:1, b:2, c:3} does not guarantee that the printed order will be ABC in different browsers, so we need to group the objects before sorting them
function Statistics() { const [category, setCategory] = useState<'-' | '+'>('-') const {records} = useRecords() const {getName} = useTags() const hash: { [K: string]: RecordItem[] } = {} const selectedRecords = records.filter(r => r.category === category) selectedRecords.map(r => { Const key = day(r.createdat). Format ('YYYY ') if (! (key in hash)) { hash[key] = [] } hash[key].push(r) }) const array = Object.entries(hash).sort((a, b) => { if (a[0] === b[0]) { return 0 } if (a[0] > b[0]) { return -1 } if (a[0] < b[0]) { return 1 } return 0 }) return ( <Layout> <CategorySection value={category} onChange={(value) => setCategory(value)}/> {array.map(([date, records]) => <div> <Header> {date} </Header> {records.map(r => { return <Item key={r.createdAt}> <div className="tags OneLine "> {r.tagids. map(tagId => < SPAN key={tagId}>{getName(tagId)}</ SPAN >) // Separate multiple labels with commas .reduce((result,span,index,array)=> result.concat(index<array.length-1? [span, ', ']:[span]),[] as ReactNode[]) } </div> {r.note && <div className="note">{r.note}</div>} <div ClassName ="amount">￥{r.mount}</div> </Item>})} </div>)} </Layout>)} export default Statistics;Copy the code