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

fix🛠️: 日期排序bug & pie样式更改

Browse Source
This commit is contained in:
clz 2022-09-13 15:29:37 +08:00
parent 7afb38b831
commit 8460b89711
5 changed files with 65 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.css
View File

@ -1,6 +1,6 @@
#root {
height: 100%;
max-width: 1280px;
/* max-width: 1280px; */
margin: 0 auto;
/* padding: 2rem; */
/* text-align: center; */

26
src/components/charts/bar/index.tsx
View File

@ -1,10 +1,12 @@
import {
useRef,
useMemo,
useEffect
useEffect,
useCallback
} from 'react';
import echarts, { ECOption } from '../config';
import styles from "./indx.module.scss"
import dayjs from "dayjs"
type BarData = {
x: string | number
@ -21,6 +23,13 @@ export const Bar = (props: IProps) => {
const { data, title, subTitle } = props;
// 获取数据
const chartRef = useRef<HTMLDivElement>(null);
const colors = useCallback((value: number) => {
if (value < 50) { return "#008000" }
else if (value < 100) { return "#FFA500" }
else { return "#8B0000" }
}, [])
const option: ECOption = useMemo(() => {
return {
title: {
@ -30,20 +39,29 @@ export const Bar = (props: IProps) => {
},
xAxis: {
type: 'category',
data: data.map(item => item.x),
data: data.map(item => {
return dayjs(item.x).format("MM-DD")
}),
},
yAxis: {
type: "value"
},
series: [
{
data: data.map(item => item.y),
data: data.map(item => {
return {
value: item.y,
itemStyle: {
color: colors(item.y)
}
}
}),
type: "bar",
label: {
show: true,
position: "top",
margin: 8
}
},
},
],
tooltip: {

27
src/components/charts/pie/index.tsx
View File

@ -3,7 +3,7 @@ import {
useMemo,
useEffect
} from "react"
import echarts, {ECOption} from '../config';
import echarts, { ECOption } from '../config';
import styles from "./index.module.scss"
type PieData = {
@ -20,7 +20,7 @@ interface IProps {
export default function Pie(props: IProps) {
// 获取数据
const {data, title, subTitle} = props
const { data, title, subTitle } = props
const chartRef = useRef<HTMLDivElement>(null)
// 设置图标配置
@ -43,16 +43,13 @@ export default function Pie(props: IProps) {
{
// name: `${year}-${month}`,
type: "pie",
data: data.map(item => {
return {
name: item.x,
value: item.y
}
}),
radius: [20, 100],
roseType: "radius",
radius: ['40%', '70%'],
// roseType: "radius",
itemStyle: {
borderRadius: 5
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: true,
@ -65,6 +62,12 @@ export default function Pie(props: IProps) {
show: true
}
},
data: data.map(item => {
return {
name: item.x,
value: item.y
}
}),
},
],
}
@ -72,7 +75,7 @@ export default function Pie(props: IProps) {
// 挂载echarts
const pie = useMemo(() => {
return chartRef.current ? echarts.init(chartRef.current, undefined, {renderer: "svg"}) : null
return chartRef.current ? echarts.init(chartRef.current, undefined, { renderer: "svg" }) : null
}, [chartRef.current])
// 设置pie选项
useEffect(() => {

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

@ -1,26 +1,35 @@
import styles from "./Home.module.scss"
import * as R from 'ramda'
import {BillType, IBill} from "../../model"
import { BillType, IBill } from "../../model"
import Bar from "../../components/charts/bar"
import {useContext, useEffect, useState} from "react";
import {BillContext} from "../../store";
import {observer} from "mobx-react-lite";
import { useContext, useEffect, useState } from "react";
import { BillContext } from "../../store";
import { observer } from "mobx-react-lite";
import Pie from "../../components/charts/pie";
import {Card, DatePicker, Radio, Space} from "antd";
import { Card, DatePicker, Radio, Space } from "antd";
import moment from 'moment';
import 'moment/locale/zh-cn';
import dayjs from 'dayjs'
const Home = () => {
const billStore = useContext(BillContext)
const transformer = (record: Record<string, IBill[]>) => {
return R.map((key: string) => {
const moneys = record[key].map(bill => bill.money)
return {
x: key,
y: Number(R.sum(moneys).toFixed(2)),
}
})(R.keys(record))
const funcs = R.compose(
R.sort((a: { x: string, y: number }, b) => {
const date1 = dayjs(a.x).toDate().getTime()
const date2 = dayjs(b.x).toDate().getTime()
return date1 - date2
}),
R.map((key: string) => {
const moneys = record[key].map(bill => bill.money)
return {
x: key,
y: Number(R.sum(moneys).toFixed(2)),
}
}))
return funcs(R.keys(record))
}
const now = new Date();
@ -38,8 +47,8 @@ const Home = () => {
}
const typeOpt = [
{label: '支出', value: BillType.consume},
{label: '收入', value: BillType.income},
{ label: '支出', value: BillType.consume },
{ label: '收入', value: BillType.income },
];
const [billType, setBillType] = useState(BillType.consume)
@ -59,14 +68,14 @@ const Home = () => {
value={billType}
onChange={e => setBillType(e.target.value)}
/>
<Card>
<Card>
{"总金额"}
￥{billStore.getTotalMoney(billType)}
</Card>
</Space>
</div>
<Bar data={transformer(billStore.groupByDate(billType))}/>
<Pie data={transformer(billStore.groupByClass(billType))}/>
<Bar data={transformer(billStore.groupByDate(billType))} />
<Pie data={transformer(billStore.groupByClass(billType))} />
</div>
)
}

2
src/pages/Record/Record.tsx
View File

@ -1,6 +1,6 @@
import {Button, DatePicker, Input, InputNumber, message, Radio, Select, Space, Table, Tag} from "antd";
import {ArrowDownOutlined, CloudUploadOutlined, DeleteOutlined,} from "@ant-design/icons";
import {useCallback, useContext, useEffect, useMemo, useRef, useState} from "react";
import {useContext, useEffect, useRef, useState} from "react";
import {BillType, EmptyBill, IBill} from "../../model";
import moment from "moment/moment";
import {BillContext} from "../../store";