clz/bill-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat🔫: 单个cls的label pie

Browse Source
This commit is contained in:
车厘子 2022-10-18 17:13:04 +08:00
parent d27e2d9aae
commit c4e66e2e52
3 changed files with 290 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/pages/Home/Home.module.scss
View File

@ -1,22 +1,21 @@
.home { .home {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.total { .total {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
gap: 10px; gap: 10px;
align-items: flex-start; align-items: flex-start;
} }
.monthBar { .monthBar {
height: 300px; height: 300px;
} }
.cards { .cards {
display: flex; display: grid;
flex-direction: row; grid: repeat(2, auto) / auto-flow auto;
justify-content: right; }
} }
}

258
src/pages/Home/Home.tsx
View File

@ -1,123 +1,137 @@
import styles from "./Home.module.scss" import styles from "./Home.module.scss"
import * as R from 'ramda' import * as R from 'ramda'
import { BillType, IBill } from "../../model" import { BillType, IBill } from "../../model"
import Bar from "../../components/charts/bar" import Bar from "../../components/charts/bar"
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { BillContext } from "../../store"; import { BillContext } from "../../store";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import Pie from "../../components/charts/pie"; import Pie from "../../components/charts/pie";
import { import {
Card, Card,
Modal, Modal,
DatePicker, DatePicker,
Radio, Radio,
Space, Space,
} from "antd"; } from "antd";
import moment from 'moment'; import moment from 'moment';
import 'moment/locale/zh-cn'; import 'moment/locale/zh-cn';
import dayjs from 'dayjs' import dayjs from 'dayjs'
const Home = () => { const Home = () => {
const billStore = useContext(BillContext) const billStore = useContext(BillContext)
const transformer = (record: Record<string, IBill[]>) => { const transformer = (record: Record<string, IBill[]>) => {
const funcs = R.compose( const funcs = R.compose(
R.sort((a: { x: string, y: number }, b) => { R.sort((a: { x: string, y: number }, b) => {
const date1 = dayjs(a.x).toDate().getTime() const date1 = dayjs(a.x).toDate().getTime()
const date2 = dayjs(b.x).toDate().getTime() const date2 = dayjs(b.x).toDate().getTime()
return date1 - date2 return date1 - date2
}), }),
R.map((key: string) => { R.map((key: string) => {
const moneys = record[key].map(bill => bill.money) const moneys = record[key].map(bill => bill.money)
return { return {
x: key, x: key,
y: Number(R.sum(moneys).toFixed(2)), y: Number(R.sum(moneys).toFixed(2)),
} }
})) }))
return funcs(R.keys(record)) return funcs(R.keys(record))
} }
const now = new Date(); const now = new Date();
const [year, setYear] = useState(now.getFullYear()) const [year, setYear] = useState(now.getFullYear())
const [month, setMonth] = useState(now.getMonth() + 1) const [month, setMonth] = useState(now.getMonth() + 1)
useEffect(() => { useEffect(() => {
billStore.fetch(year, month).then() billStore.fetch(year, month).then()
}, [year, month]) }, [year, month])
const changeDate = (date: moment.Moment | null, datestring: string) => { const changeDate = (date: moment.Moment | null, datestring: string) => {
const d = date?.toDate() ?? new Date() const d = date?.toDate() ?? new Date()
setYear(d.getFullYear()) setYear(d.getFullYear())
setMonth(d.getMonth() + 1) setMonth(d.getMonth() + 1)
} }
const typeOpt = [ const typeOpt = [
{ label: '支出', value: BillType.consume }, { label: '支出', value: BillType.consume },
{ label: '收入', value: BillType.income }, { label: '收入', value: BillType.income },
]; ];
const [billType, setBillType] = useState(BillType.consume) const [billType, setBillType] = useState(BillType.consume)
// 点击bar弹出当天pie // 点击bar弹出当天pie
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const [modalTitle, setModalTitle] = useState(""); const [modalTitle, setModalTitle] = useState("");
const [modalData, setModalData] = useState<{ const [modalData, setModalData] = useState<{
x: string x: string
y: number y: number
}[]>([]); }[]>([]);
return ( // 显示单个cls的饼状图，查看cls内部的label的消费情况，
<div className={styles.home}> // 这里有一个cls列表
<div className={styles.total}> const clsesForShow = ["餐饮", "恋爱"]
<Space align="start">
<DatePicker return (
picker="month" <div className={styles.home}>
value={moment(`${year}-${month}`, 'YYYY-MM')} <div className={styles.total}>
onChange={changeDate} <Space align="start">
/> <DatePicker
<Radio.Group picker="month"
options={typeOpt} value={moment(`${year}-${month}`, 'YYYY-MM')}
optionType="button" onChange={changeDate}
buttonStyle="solid" />
value={billType} <Radio.Group
onChange={e => setBillType(e.target.value)} options={typeOpt}
/> optionType="button"
<Card> buttonStyle="solid"
{"总金额"} value={billType}
￥{billStore.getTotalMoney(billType)} onChange={e => setBillType(e.target.value)}
</Card> />
</Space> <Card>
</div> {"总金额"}
<div className={styles.monthBar}> ￥{billStore.getTotalMoney(billType)}
<Bar </Card>
data={transformer(billStore.groupByDate(billType))} </Space>
onClickItem={date => { </div>
setIsModalOpen(true) <div className={styles.monthBar}>
setModalTitle(date) <Bar
setModalData(transformer(billStore.groupByClass(billType, date))) data={transformer(billStore.groupByDate(billType))}
}} onClickItem={date => {
/> setIsModalOpen(true)
</div> setModalTitle(date)
<div className={styles.cards}> setModalData(transformer(billStore.groupByClass(billType, date)))
<Card > }}
<Pie />
title="本月消费分类" </div>
data={transformer(billStore.groupByClass(billType))} <div className={styles.cards}>
/> <Card >
</Card> <Pie
</div> title="本月消费分类"
<Modal data={transformer(billStore.groupByClass(billType))}
visible={isModalOpen} />
onOk={() => setIsModalOpen(false)} </Card>
onCancel={() => setIsModalOpen(false)} {
title={modalTitle} clsesForShow.map(cls => {
> return (<Card>
<Pie <Pie
data={modalData} title={cls}
/> data={transformer(billStore.groupByLabelOfClass(cls))}
</Modal> />
</div> </Card>)
) })
} }
</div>
<Modal
visible={isModalOpen}
onOk={() => setIsModalOpen(false)}
onCancel={() => setIsModalOpen(false)}
title={modalTitle}
>
<Pie
data={modalData}
/>
</Modal>
</div>
)
}
export default observer(Home) export default observer(Home)

256
src/store/index.ts
View File

@ -1,123 +1,133 @@
import { makeAutoObservable, runInAction } from "mobx"; import { makeAutoObservable, runInAction } from "mobx";
import { createContext } from "react"; import { createContext } from "react";
import { createBill, getBills, getClass } from "../api/bills"; import { createBill, getBills, getClass } from "../api/bills";
import { BillType, IBill } from "../model"; import { BillType, IBill } from "../model";
import * as R from "ramda" import * as R from "ramda"
/** /**
* 仅存储一个月的数据 * 仅存储一个月的数据
*/ */
export class Bill { export class Bill {
private _bills: IBill[] = []; private _bills: IBill[] = [];
// _cls2label: IClass = {consume: new Map<string, string[]>(), income: []} // _cls2label: IClass = {consume: new Map<string, string[]>(), income: []}
private _cls2label: { consume: Record<string, string[]>, income: [] } = { consume: {}, income: [] } private _cls2label: { consume: Record<string, string[]>, income: [] } = { consume: {}, income: [] }
constructor() { constructor() {
makeAutoObservable(this) makeAutoObservable(this)
this.fetchClass().then() this.fetchClass().then()
} }
get bills() { get bills() {
return this._bills return this._bills
} }
get cls2label() { get cls2label() {
return this._cls2label return this._cls2label
} }
groupByDate(type?: BillType) { groupByDate(type?: BillType) {
const classFun = R.filter((bill: IBill) => R.of(bill.type).length === 0 || bill.type === type) const classFun = R.filter((bill: IBill) => R.of(bill.type).length === 0 || bill.type === type)
const functions = R.compose( const functions = R.compose(
R.groupBy((bill: IBill) => bill.date), R.groupBy((bill: IBill) => bill.date),
classFun, classFun,
) )
return functions(this._bills) return functions(this._bills)
} }
groupByClass(type?: BillType, date?: string) { groupByClass(type?: BillType, date?: string) {
const classFun = R.filter((bill: IBill) => R.of(bill.type).length === 0 || bill.type === type && (date ? bill.date === date : true)) const classFun = R.filter((bill: IBill) => R.of(bill.type).length === 0 || bill.type === type && (date ? bill.date === date : true))
const functions = R.compose( const functions = R.compose(
R.groupBy((bill: IBill) => bill.cls), R.groupBy((bill: IBill) => bill.cls),
classFun, classFun,
) )
return functions(this._bills) return functions(this._bills)
} }
get listDailyMoney() { groupByLabelOfClass(className: string) {
return this.groupByDate const classFun = R.filter((bill: IBill) => R.of(bill.type).length === 0 || bill.cls === className)
} const functions = R.compose(
R.groupBy((bill: IBill) => bill.label),
get totalMoney() { classFun,
const functions = R.compose( )
Number, return functions(this._bills)
(s: number) => s.toFixed(2), }
R.sum,
R.map((bill: IBill) => bill.money)
) get listDailyMoney() {
return functions(this._bills) return this.groupByDate
} }
get consumeMoney() { get totalMoney() {
const functions = R.compose( const functions = R.compose(
Number, Number,
(s: number) => s.toFixed(2), (s: number) => s.toFixed(2),
R.sum, R.sum,
R.map((bill: IBill) => bill.money), R.map((bill: IBill) => bill.money)
R.filter((bill: IBill) => bill.type === BillType.consume), )
) return functions(this._bills)
return functions(this._bills) }
}
get consumeMoney() {
get incomeMoney() { const functions = R.compose(
const functions = R.compose( Number,
Number, (s: number) => s.toFixed(2),
(s: number) => s.toFixed(2), R.sum,
R.sum, R.map((bill: IBill) => bill.money),
R.map((bill: IBill) => bill.money), R.filter((bill: IBill) => bill.type === BillType.consume),
R.filter((bill: IBill) => bill.type === BillType.income), )
) return functions(this._bills)
return functions(this._bills) }
}
get incomeMoney() {
getTotalMoney(type?: BillType) { const functions = R.compose(
switch (type) { Number,
case BillType.income: (s: number) => s.toFixed(2),
return this.incomeMoney R.sum,
case BillType.consume: R.map((bill: IBill) => bill.money),
return this.consumeMoney R.filter((bill: IBill) => bill.type === BillType.income),
default: )
return this.totalMoney return functions(this._bills)
} }
}
getTotalMoney(type?: BillType) {
get meanMoneyByDate() { switch (type) {
const days = Reflect.ownKeys(this.groupByDate).length case BillType.income:
if (days === 0) return 0 return this.incomeMoney
return this.totalMoney / days case BillType.consume:
} return this.consumeMoney
default:
return this.totalMoney
async add(bill: IBill) { }
const { id } = await createBill(bill) }
bill.id = id
runInAction(() => { get meanMoneyByDate() {
this._bills.push(bill); const days = Reflect.ownKeys(this.groupByDate).length
}) if (days === 0) return 0
} return this.totalMoney / days
}
async fetch(year: number, month: number) {
const data = await getBills(year, month)
runInAction(() => { async add(bill: IBill) {
this._bills = data const { id } = await createBill(bill)
}) bill.id = id
} runInAction(() => {
this._bills.push(bill);
async fetchClass() { })
const cls2label = await getClass() }
runInAction(() => {
this._cls2label = cls2label async fetch(year: number, month: number) {
}) const data = await getBills(year, month)
} runInAction(() => {
} this._bills = data
})
export const BillContext = createContext<Bill>(new Bill()); }
async fetchClass() {
const cls2label = await getClass()
runInAction(() => {
this._cls2label = cls2label
})
}
}
export const BillContext = createContext<Bill>(new Bill());