Skip to content

Commit

Permalink
feat: upd
Browse files Browse the repository at this point in the history
  • Loading branch information
Allen Zhang (张涛) committed Oct 7, 2024
1 parent e962960 commit 4236a54
Show file tree
Hide file tree
Showing 7 changed files with 2,417 additions and 16 deletions.
1 change: 0 additions & 1 deletion packages/canyon-platform/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,6 @@
"postcss": "^8.4.47",
"prettier": "^3.3.3",
"tailwindcss": "^3.4.13",
"tailwindcss-animate": "^1.0.7",
"typescript": "^5.6.2",
"unplugin-auto-import": "^0.18.3",
"unplugin-auto-import-antd": "^0.0.2",
Expand Down
9 changes: 6 additions & 3 deletions packages/canyon-platform/tailwind.config.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import type { Config } from "tailwindcss";
import tailwindcssAnimate from "tailwindcss-animate";

const config = {
darkMode: "class",
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
"../canyon-report/src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [tailwindcssAnimate],
plugins: [],
corePlugins: {
preflight: false,
},
Expand Down

Large diffs are not rendered by default.

13 changes: 11 additions & 2 deletions packages/canyon-report/src/components/Report/Report.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import { FileCoverageData } from "istanbul-lib-coverage";
import CanyonReportTreeTable from "./components/SummaryTreeTable";
import { genSummaryTreeItem } from "canyon-data";
import { Spin } from "antd";
import { genFileDetailLines, ggggggfn } from "../helpers/file";
// import { genFileDetailLines } from "../helpers";

const Report: FC<ReportProps> = ({
dataSource,
value,
Expand All @@ -24,7 +27,7 @@ const Report: FC<ReportProps> = ({
return value.includes(".");
}, [value]);

const [, setFileCoverage] = useState<FileCoverageData>({
const [fileCoverage, setFileCoverage] = useState<FileCoverageData>({
path: "",
statementMap: {},
fnMap: {},
Expand Down Expand Up @@ -107,7 +110,13 @@ const Report: FC<ReportProps> = ({

{isFile ? (
<Spin spinning={loading}>
{!loading && <FileCoverageDetail fileContent={fileContent} />}
{!loading && (
<FileCoverageDetail
dsss={ggggggfn(fileCoverage, fileContent)}
fileContent={fileContent}
lines={genFileDetailLines(fileCoverage, fileContent)}
/>
)}
</Spin>
) : showMode === "tree" ? (
<CanyonReportTreeTable
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,78 @@ import React, { FC } from "react";
import { useEffect, useState } from "react";
import { createHighlighterCoreInstance } from "../../helpers/loadShiki";

const FileCoverageDetail: FC<{ fileContent: string }> = ({ fileContent }) => {
function jisuanColor(coun) {
if (coun === 0) {
return "rgba(255, 0, 0, 0.5)";
}
if (coun > 0) {
return "rgba(255, 255, 0, 0.5)";
}
if (coun < 0) {
return "unset";
}
}

const FileCoverageDetail: FC<{
fileContent: string;
lines: { count: number }[];
dsss: any[];
}> = ({ fileContent, lines, dsss }) => {
const [htmlContent, setHtmlContent] = useState("");
useEffect(() => {
createHighlighterCoreInstance().then((highlighter) => {
const html = highlighter.codeToHtml(fileContent || "", {
lang: "javascript",
theme: "light-plus",
decorations: dsss,
});
setHtmlContent(html);
});
console.log(dsss);
}, [fileContent]);

const lines = fileContent.split("\n");
return (
<div className={"flex"}>
{/*行号*/}
<div>
{lines.map((lin, index) => {
return (
<div
className={"h-[24px]"}
key={index}
className={"h-[24px] text-right text-[#0071c2]"}
style={{ lineHeight: "24px", fontSize: "12px" }}
>
{index + 1}
</div>
);
})}
</div>

<div className={"w-[16px]"}></div>
{/*执行次数*/}
<div
style={{
backgroundColor: "rgb(234, 234, 234)",
}}
>
{lines.map((lin, index) => {
return (
<div
key={index}
className={"h-[24px] px-[5px]"}
style={{
lineHeight: "24px",
fontSize: "12px",
backgroundColor: jisuanColor(lin.count),
color: "rgba(0, 0, 0, 0.5)",
textAlign: "right",
}}
>
{lin.count > 0 ? lin.count + "x" : ""}
</div>
);
})}
</div>
<div className={"w-[12px]"}></div>
<div
dangerouslySetInnerHTML={{
__html: htmlContent,
Expand Down
163 changes: 163 additions & 0 deletions packages/canyon-report/src/components/helpers/file.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
// 获取numberOfRows
// 获取行覆盖率
function getLineCoverage(data) {
const statementMap = data.statementMap;
const statements = data.s;
const lineMap = Object.create(null);
Object.entries(statements).forEach(([st, count]) => {
if (!statementMap[st]) {
return;
}
const { line } = statementMap[st].start;
const prevVal = lineMap[line];
if (prevVal === undefined || prevVal < count) {
lineMap[line] = count;
}
});
return lineMap;
}
export const genFileDetailLines = (fileCoverage, fileContent) => {
// console.log(coverage)
const totalLines = fileContent.split("\n").length;
const lineStats = getLineCoverage(fileCoverage);
console.log(lineStats);
return Array.from({ length: totalLines }, (_, index) => {
return {
count: lineStats[index + 1],
};
});
};

export function mergeIntervals(intervals) {
// 如果输入为空,直接返回空列表
if (intervals.length === 0) {
return [];
}

// 将所有线段按起始位置进行排序
intervals.sort((a, b) => a[0] - b[0]);

// 初始化结果列表
const merged = [];
let [currentStart, currentEnd] = intervals[0];

for (const [start, end] of intervals.slice(1)) {
if (start <= currentEnd) {
// 当前线段与前一个线段有重叠
currentEnd = Math.max(currentEnd, end); // 更新结束位置
} else {
// 当前线段与前一个线段没有重叠
merged.push([currentStart, currentEnd]); // 将前一个线段加入结果列表
[currentStart, currentEnd] = [start, end]; // 更新当前线段的起始和结束位置
}
}

// 添加最后一个线段
merged.push([currentStart, currentEnd]);

return merged;
}

export const ggggggfn = (filecoverage, fileContent) => {
const statementStats = filecoverage.s;
const statementMeta = filecoverage.statementMap;
const structuredText = fileContent
.split("\n")
.reduce((previousValue, currentValue, currentIndex) => {
return {
...previousValue,
[currentIndex]: currentValue,
};
}, {});
const statementDecorations = [];

Object.entries(statementStats).forEach(([stName, count]) => {
const meta = statementMeta[stName];
if (meta) {
const type = count > 0 ? "yes" : "no";
const startCol = meta.start.column;
let endCol = meta.end.column + 1;
const startLine = meta.start.line;
const endLine = meta.end.line;

if (type === "no" && structuredText[startLine]) {
if (endLine !== startLine) {
endCol = structuredText[startLine].length;
}
// 转化为字符的起始

let start = 0;
let end = 0;

for (let i = 0; i < startLine - 1; i++) {
start += structuredText[i].length + 1;
}
for (let i = 0; i < endLine - 1; i++) {
end += structuredText[i].length + 1;
}

start += startCol;
end += endCol;
statementDecorations.push([start, end]);
}
}
});

const fnDecorations = [];
const fnStats = filecoverage.f;
const fnMeta = filecoverage.fnMap;
Object.entries(fnStats).forEach(([fName, count]) => {
const meta = fnMeta[fName];
if (meta) {
const type = count > 0 ? "yes" : "no";
// Some versions of the instrumenter in the wild populate 'func'
// but not 'decl':
const decl = meta.decl || meta.loc;
const startCol = decl.start.column;
let endCol = decl.end.column + 1;
const startLine = decl.start.line;
const endLine = decl.end.line;

if (type === "no" && structuredText[startLine]) {
if (endLine !== startLine) {
endCol = structuredText[startLine].length;
}

// 转化为字符的起始

let start = 0;
let end = 0;

for (let i = 0; i < startLine - 1; i++) {
start += structuredText[i].length + 1;
}
for (let i = 0; i < endLine - 1; i++) {
end += structuredText[i].length + 1;
}

start += startCol;
end += endCol;
fnDecorations.push([start, end]);
}
}
});

return mergeIntervals(
[...statementDecorations, ...fnDecorations].filter((item) => {
// defaultValue
if (item[0] >= item[1]) {
return false;
} else if (item[1] > fileContent.length) {
return false;
} else {
return item[0] < item[1];
}
}),
).map(([start, end]) => {
return {
start,
end,
properties: { class: "content-class-no-found" },
};
});
};
9 changes: 4 additions & 5 deletions packages/canyon-report/src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,16 @@
line-height: 24px;
}

.line{
/*background-color: #0071c2;*/
}

a{
color: #3182ce;
/*text-decoration: none;*/
}

.YourHighlightClass{
padding: 0 !important;
color: white !important;
background: rgb(244, 176, 27) !important;
}

.content-class-no-found{
background-color: pink;
}

0 comments on commit 4236a54

Please sign in to comment.