diff --git a/packages/canyon-report/package.json b/packages/canyon-report/package.json index 35ceee67..b6ae6eed 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-24", + "version": "0.0.8-beta-25", "description": "My webpack project", "main": "./lib/index.js", "bin": "./lib/cli.js", diff --git a/packages/canyon-report/src/App.tsx b/packages/canyon-report/src/App.tsx index e5874bda..cee1dd90 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 668583a0..403b6e3d 100644 --- a/packages/canyon-report/src/components/Report/Report.tsx +++ b/packages/canyon-report/src/components/Report/Report.tsx @@ -7,7 +7,6 @@ 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 @@ -40,12 +39,15 @@ const Report: FC = ({ dataSource, value, onSelect }) => { newonSelect(value); }, []); - const { treeDataSource } = useMemo(() => { - const summary = dataSource.reduce((acc: any, cur: any) => { + const { treeDataSource, rootDataSource } = useMemo(() => { + // @ts-ignore + const summary = dataSource.reduce((acc: never, cur: never) => { + // @ts-ignore acc[cur.path] = cur; return acc; }, {}); + // @ts-ignore const aaaa = genSummaryTreeItem(value, summary); return { treeDataSource: aaaa.children.map((item) => { @@ -54,6 +56,10 @@ const Report: FC = ({ dataSource, value, onSelect }) => { ...item.summary, }; }), + rootDataSource: { + path: aaaa.path, + ...aaaa.summary, + }, }; }, [dataSource, value]); @@ -70,7 +76,11 @@ const Report: FC = ({ dataSource, value, onSelect }) => { }).length } /> - + {isFile ? ( diff --git a/packages/canyon-report/src/components/Report/components/FileCoverageDetail.tsx b/packages/canyon-report/src/components/Report/components/FileCoverageDetail.tsx index a56d4b43..27f3e7ac 100644 --- a/packages/canyon-report/src/components/Report/components/FileCoverageDetail.tsx +++ b/packages/canyon-report/src/components/Report/components/FileCoverageDetail.tsx @@ -1,9 +1,8 @@ -// @ts-nocheck -import React from "react"; +import React, { FC } from "react"; import { useEffect, useState } from "react"; import { createHighlighterCoreInstance } from "../../helpers/loadShiki"; -const FileCoverageDetail = ({ fileContent }) => { +const FileCoverageDetail: FC<{ fileContent: string }> = ({ fileContent }) => { const [htmlContent, setHtmlContent] = useState(""); useEffect(() => { createHighlighterCoreInstance().then((highlighter) => { diff --git a/packages/canyon-report/src/components/Report/components/SummaryHeader.tsx b/packages/canyon-report/src/components/Report/components/SummaryHeader.tsx index 6a6f4ca2..2bc44a90 100644 --- a/packages/canyon-report/src/components/Report/components/SummaryHeader.tsx +++ b/packages/canyon-report/src/components/Report/components/SummaryHeader.tsx @@ -1,6 +1,7 @@ import React, { FC } from "react"; import { Tag, Typography } from "antd"; import { getColor } from "../../helpers"; +import { CoverageSummaryData } from "istanbul-lib-coverage"; const { Text } = Typography; const SummaryNav: FC<{ value: string; @@ -24,7 +25,9 @@ const SummaryNav: FC<{ > {item} - {index === value.split("/").length ? null : /} + {index === value.split("/").length || !value ? null : ( + / + )}
); })} @@ -32,58 +35,62 @@ const SummaryNav: FC<{ ); }; -const SummaryMetric = () => { - const t = (key) => key; +const SummaryMetric: FC<{ + data: CoverageSummaryData & { path: string }; +}> = ({ data }) => { + const t = (key: string) => key; const summaryTreeItem = { - summary: { - files: { total: 1, covered: 1, pct: 100 }, - functions: { total: 1, covered: 1, pct: 100 }, - lines: { total: 1, covered: 1, pct: 100 }, - branches: { total: 1, covered: 1, pct: 100 }, - }, + summary: data, }; return (
- {Object.entries(summaryTreeItem.summary).map(([key, value]) => { - return ( -
- - {value.pct}% - - - {t(key)}: - - - {value.covered}/{value.total} - -
- ); - })} + {Object.entries(summaryTreeItem.summary) + .filter(([key]) => + ["statements", "branches", "functions", "lines"].includes(key), + ) + .map(([key, value]) => { + return ( +
+ + {value.pct}% + + + {t(key)}: + + + {value.covered}/{value.total} + +
+ ); + })}
); }; -const SummaryBar = () => { +const SummaryBar: FC<{ pct: number }> = ({ pct }) => { return (
); }; -const SummaryHeader = ({ value, onSelect }) => { - console.log(value, "value"); +const SummaryHeader: FC<{ + value: string; + onSelect: (value: string) => void; + data: CoverageSummaryData & { path: string }; +}> = ({ value, onSelect, data }) => { return (
- - + +
); }; diff --git a/packages/canyon-report/src/components/Report/components/SummaryListTable.tsx b/packages/canyon-report/src/components/Report/components/SummaryListTable.tsx index 94f8ca12..6182db96 100644 --- a/packages/canyon-report/src/components/Report/components/SummaryListTable.tsx +++ b/packages/canyon-report/src/components/Report/components/SummaryListTable.tsx @@ -1,11 +1,15 @@ import { Table, Progress, ConfigProvider } from "antd"; -import React from "react"; +import React, { FC } from "react"; import Highlighter from "react-highlight-words"; import { getColor } from "../../helpers"; +import { CoverageSummaryData } from "istanbul-lib-coverage"; -// import { getCOlor, percent } from "../helper"; -const t = (msg) => msg; -const SummaryListTable = ({ dataSource, onSelect, value }) => { +const t = (msg: string) => msg; +const SummaryListTable: FC<{ + dataSource: (CoverageSummaryData & { path: string })[]; + onSelect: (path: string) => void; + value: string; +}> = ({ dataSource, onSelect, value }) => { return ( { { - onSelect(text).then((res) => { - console.log(res); - }); + onSelect(text); }} > { return a.statements.covered - b.statements.covered; }, }, - ].concat([ { title: t("Coverage") + " %", width: "300px", @@ -86,7 +87,7 @@ const SummaryListTable = ({ dataSource, onSelect, value }) => { ); }, }, - ])} + ]} /> ); diff --git a/packages/canyon-report/src/components/Report/components/SummaryTreeTable.tsx b/packages/canyon-report/src/components/Report/components/SummaryTreeTable.tsx index dc27a377..95e9ef23 100644 --- a/packages/canyon-report/src/components/Report/components/SummaryTreeTable.tsx +++ b/packages/canyon-report/src/components/Report/components/SummaryTreeTable.tsx @@ -1,18 +1,19 @@ -import React from "react"; +import React, { FC } from "react"; import { FileOutlined, FolderFilled } from "@ant-design/icons"; -import { ConfigProvider, Progress, Space, Table } from "antd"; +import { ConfigProvider, Progress, Table } from "antd"; import { getColor } from "../../helpers"; +import { CoverageSummaryData } from "istanbul-lib-coverage"; -function checkSuffix() { +function checkSuffix(str: string) { + console.log(str); return true; } -const CanyonReportTreeTable = ({ - dataSource, - loading, - onSelect, -}) => { - const t = (res) => res; +const CanyonReportTreeTable: FC<{ + dataSource: (CoverageSummaryData & { path: string })[]; + onSelect: (path: string) => void; +}> = ({ dataSource, onSelect }) => { + const t = (res: string) => res; return (
diff --git a/packages/canyon-report/src/components/Report/components/TopControl.tsx b/packages/canyon-report/src/components/Report/components/TopControl.tsx index 18101ac7..7506c391 100644 --- a/packages/canyon-report/src/components/Report/components/TopControl.tsx +++ b/packages/canyon-report/src/components/Report/components/TopControl.tsx @@ -1,15 +1,20 @@ -import React from "react"; -import { BarsOutlined, SearchOutlined } from "@ant-design/icons"; +import React, { FC } from "react"; +import Icon, { BarsOutlined, SearchOutlined } from "@ant-design/icons"; import { Divider, Space, Segmented, Input } from "antd"; +import PhTreeViewIcon from "../icons/PhTreeView"; -const TopControl = ({ total, showMode, onChangeShowMode }) => { - const t = (msg) => msg; +const TopControl: FC<{ + total: number; + showMode: string; + onChangeShowMode: (v: string) => void; +}> = ({ total, showMode, onChangeShowMode }) => { return (
{ @@ -19,7 +24,7 @@ const TopControl = ({ total, showMode, onChangeShowMode }) => { { label: "Code tree", value: "tree", - // icon: , + icon: , }, { label: "File list", diff --git a/packages/canyon-report/src/components/Report/icons/PhTreeView.tsx b/packages/canyon-report/src/components/Report/icons/PhTreeView.tsx new file mode 100644 index 00000000..2b29aa81 --- /dev/null +++ b/packages/canyon-report/src/components/Report/icons/PhTreeView.tsx @@ -0,0 +1,18 @@ +import type { SVGProps } from "react"; +import React from "react"; +export default function PhTreeViewIcon(props: SVGProps) { + return ( + + + + ); +} diff --git a/packages/canyon-report/src/index.css b/packages/canyon-report/src/index.css index a106642d..38a67dd3 100644 --- a/packages/canyon-report/src/index.css +++ b/packages/canyon-report/src/index.css @@ -6,3 +6,8 @@ font-size: 12px; line-height: 20px; } + +a{ + color: #3182ce; + /*text-decoration: none;*/ +}