feat🔫: 单个cls的label pie

src/pages/Home/Home.module.scss

@@ -15,8 +15,7 @@
   }
 
   .cards {
-    display: flex;
+    display: grid;
-    flex-direction: row;
+    grid: repeat(2, auto) / auto-flow auto;
-    justify-content: right;
   }
 }

src/pages/Home/Home.tsx

@@ -66,6 +66,10 @@ const Home = () => {
         y: number
     }[]>([]);
 
+    // 显示单个cls的饼状图，查看cls内部的label的消费情况，
+    // 这里有一个cls列表
+    const clsesForShow = ["餐饮", "恋爱"]
+
     return (
         <div className={styles.home}>
             <div className={styles.total}>
@@ -105,6 +109,16 @@ const Home = () => {
                         data={transformer(billStore.groupByClass(billType))}
                     />
                 </Card>
+                {
+                    clsesForShow.map(cls => {
+                        return (<Card>
+                            <Pie
+                                title={cls}
+                                data={transformer(billStore.groupByLabelOfClass(cls))}
+                            />
+                        </Card>)
+                    })
+                }
             </div>
             <Modal
                 visible={isModalOpen}

src/store/index.ts

@@ -43,6 +43,16 @@ export class Bill {
         return functions(this._bills)
     }
 
+    groupByLabelOfClass(className: string) {
+        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),
+            classFun,
+        )
+        return functions(this._bills)
+    }
+
+
     get listDailyMoney() {
         return this.groupByDate
     }