From da643f6c4d31cc1214f4eaee1e21d023d2bb1424 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Allen=20Zhang=20=28=E5=BC=A0=E6=B6=9B=29?= Date: Sun, 29 Sep 2024 16:30:27 +0800 Subject: [PATCH] feat: update --- packages/canyon-report/babel.config.js | 1 - packages/canyon-report/package.json | 3 +- packages/canyon-report/src/App.tsx | 2 +- .../src/components/Report/Report.tsx | 34 +++++- .../Report/components/SummaryHeader.tsx | 36 +++---- .../Report/components/SummaryListTable.tsx | 13 ++- .../Report/components/SummaryTreeTable.tsx | 100 ++++++++++++++++++ .../Report/components/TopControl.tsx | 21 ++-- .../src/components/helpers/index.ts | 4 + 9 files changed, 174 insertions(+), 40 deletions(-) create mode 100644 packages/canyon-report/src/components/Report/components/SummaryTreeTable.tsx diff --git a/packages/canyon-report/babel.config.js b/packages/canyon-report/babel.config.js index 810d48fb..6af7345a 100644 --- a/packages/canyon-report/babel.config.js +++ b/packages/canyon-report/babel.config.js @@ -4,5 +4,4 @@ module.exports = { "@babel/preset-react", "@babel/preset-typescript", ], - plugins: ["istanbul"], }; diff --git a/packages/canyon-report/package.json b/packages/canyon-report/package.json index 56ffc5d6..ccf5fcb6 100755 --- a/packages/canyon-report/package.json +++ b/packages/canyon-report/package.json @@ -1,6 +1,6 @@ { "name": "canyon-report", - "version": "0.0.8-beta-21", + "version": "0.0.8-beta-22", "description": "My webpack project", "main": "./lib/index.js", "bin": "./lib/cli.js", @@ -21,6 +21,7 @@ "@ant-design/icons": "^5.5.1", "antd": "^5.21.0", "axios": "^1.7.7", + "canyon-data": "0.1.1-alpha.8", "commander": "^12.1.0", "istanbul-lib-coverage": "^3.2.2", "react": "^18.3.1", diff --git a/packages/canyon-report/src/App.tsx b/packages/canyon-report/src/App.tsx index 40be4b51..e5874bda 100644 --- a/packages/canyon-report/src/App.tsx +++ b/packages/canyon-report/src/App.tsx @@ -44,7 +44,7 @@ function App() { }; return ( -
+
); diff --git a/packages/canyon-report/src/components/Report/Report.tsx b/packages/canyon-report/src/components/Report/Report.tsx index 598b12f2..668583a0 100644 --- a/packages/canyon-report/src/components/Report/Report.tsx +++ b/packages/canyon-report/src/components/Report/Report.tsx @@ -6,8 +6,13 @@ import TopControl from "./components/TopControl"; import FileCoverageDetail from "./components/FileCoverageDetail"; import { ReportProps } from "./types"; import { FileCoverageData } from "istanbul-lib-coverage"; - +import CanyonReportTreeTable from "./components/SummaryTreeTable"; +import { convertTreeDataSource } from "../helpers"; +import { genSummaryTreeItem } from "canyon-data"; const Report: FC = ({ dataSource, value, onSelect }) => { + // 1.展示模式//tree||list + const [showMode, setShowMode] = useState("tree"); + const isFile = useMemo(() => { return value.includes("."); }, [value]); @@ -35,9 +40,30 @@ const Report: FC = ({ dataSource, value, onSelect }) => { newonSelect(value); }, []); + const { treeDataSource } = useMemo(() => { + const summary = dataSource.reduce((acc: any, cur: any) => { + acc[cur.path] = cur; + return acc; + }, {}); + + const aaaa = genSummaryTreeItem(value, summary); + return { + treeDataSource: aaaa.children.map((item) => { + return { + path: item.path, + ...item.summary, + }; + }), + }; + }, [dataSource, value]); + return (
{ + setShowMode(val); + }} total={ dataSource.filter((item) => { return item.path.startsWith(value); @@ -48,6 +74,12 @@ const Report: FC = ({ dataSource, value, onSelect }) => { {isFile ? ( + ) : showMode === "tree" ? ( + ) : ( { +const SummaryNav: FC<{ + value: string; + onClick: (value: string) => void; +}> = ({ value, onClick }) => { console.log(value, "value"); return ( -
- {value.split("/").map((item, index) => { +
+ {("canyon/" + value).split("/").map((item, index) => { return ( - ); })} @@ -48,7 +48,7 @@ const SummaryMetric = () => {
{Object.entries(summaryTreeItem.summary).map(([key, value]) => { return ( -
+
{value.pct}% diff --git a/packages/canyon-report/src/components/Report/components/SummaryListTable.tsx b/packages/canyon-report/src/components/Report/components/SummaryListTable.tsx index 0ac9daca..94f8ca12 100644 --- a/packages/canyon-report/src/components/Report/components/SummaryListTable.tsx +++ b/packages/canyon-report/src/components/Report/components/SummaryListTable.tsx @@ -1,5 +1,4 @@ -// @ts-nocheck -import { Table, Progress } from "antd"; +import { Table, Progress, ConfigProvider } from "antd"; import React from "react"; import Highlighter from "react-highlight-words"; import { getColor } from "../../helpers"; @@ -8,7 +7,13 @@ import { getColor } from "../../helpers"; const t = (msg) => msg; const SummaryListTable = ({ dataSource, onSelect, value }) => { return ( -
+ { }, ])} /> - + ); }; diff --git a/packages/canyon-report/src/components/Report/components/SummaryTreeTable.tsx b/packages/canyon-report/src/components/Report/components/SummaryTreeTable.tsx new file mode 100644 index 00000000..dc27a377 --- /dev/null +++ b/packages/canyon-report/src/components/Report/components/SummaryTreeTable.tsx @@ -0,0 +1,100 @@ +import React from "react"; +import { FileOutlined, FolderFilled } from "@ant-design/icons"; +import { ConfigProvider, Progress, Space, Table } from "antd"; +import { getColor } from "../../helpers"; + +function checkSuffix() { + return true; +} + +const CanyonReportTreeTable = ({ + dataSource, + loading, + onSelect, +}) => { + const t = (res) => res; + return ( +
+ +
{ + onSelect(text); + }} + > + {text.includes(".") && checkSuffix(text) ? ( + + ) : ( + + )} + {text.split("/").at(-1)} + + ); + }, + }, + + { + title: t("Total"), + key: "total", + dataIndex: ["statements", "total"], + sorter(a, b) { + return a.statements.total - b.statements.total; + }, + }, + { + title: t("Covered"), + key: "covered", + dataIndex: ["statements", "covered"], + sorter(a, b) { + return a.statements.covered - b.statements.covered; + }, + }, + ].concat([ + { + title: t("Coverage") + " %", + width: "300px", + key: "c", + dataIndex: ["statements", "pct"], + sorter(a, b) { + return a.statements.pct - b.statements.pct; + }, + render(text) { + return ( + + ); + }, + }, + ])} + /> + + + ); +}; + +export default CanyonReportTreeTable; diff --git a/packages/canyon-report/src/components/Report/components/TopControl.tsx b/packages/canyon-report/src/components/Report/components/TopControl.tsx index f3ae7bb2..18101ac7 100644 --- a/packages/canyon-report/src/components/Report/components/TopControl.tsx +++ b/packages/canyon-report/src/components/Report/components/TopControl.tsx @@ -1,9 +1,8 @@ -// @ts-nocheck import React from "react"; -import Icon, { BarsOutlined, SearchOutlined } from "@ant-design/icons"; +import { BarsOutlined, SearchOutlined } from "@ant-design/icons"; import { Divider, Space, Segmented, Input } from "antd"; -const TopControl = ({total}) => { +const TopControl = ({ total, showMode, onChangeShowMode }) => { const t = (msg) => msg; return (
@@ -11,11 +10,11 @@ const TopControl = ({total}) => {
{ - // onChangeShowMode(v); - // }} + value={showMode} + defaultValue={showMode} + onChange={(v) => { + onChangeShowMode(v); + }} options={[ { label: "Code tree", @@ -32,10 +31,6 @@ const TopControl = ({total}) => { {total} total files - {/*{t("projects.detail.total.files", {msg: numberFiles})}*/} - {/*覆盖率提升优先级列表*/} - {/*转换生产流量为测试用例*/} - {/**/}
@@ -44,10 +39,8 @@ const TopControl = ({total}) => { } - // placeholder={t("projects.detail.search.placeholder")} className={"w-[240px]"} size={"small"} - // onChange={onChangeOnlyChangeKeywords} />
diff --git a/packages/canyon-report/src/components/helpers/index.ts b/packages/canyon-report/src/components/helpers/index.ts index 586e4a85..23aba49a 100644 --- a/packages/canyon-report/src/components/helpers/index.ts +++ b/packages/canyon-report/src/components/helpers/index.ts @@ -7,3 +7,7 @@ export const getColor = (pct: number) => { return "rgb(245,32,32)"; } }; + +export const convertTreeDataSource = (dataSource) => { + return dataSource; +};