feat: update

packages/canyon-data/README.md

@@ -0,0 +1,10 @@
+新增代码行，需要传入文件路径
+
+```js
+const map = {
+    "/path":{
+        add:[0,0,1],
+        del:[0,0,1]
+    }
+}
+```

packages/canyon-data/src/index.ts

@@ -14,3 +14,86 @@ export const genSummaryMapByCoverageMap = (coverageMapData: CoverageMapData):Cov
   });
   return JSON.parse(JSON.stringify(summaryMap));
 }
+
+export const formatCoverageMap = (coverageMapData: CoverageMapData,icwd) => {
+  return Object.entries(coverageMapData).map(([key, value]) => {
+    return {
+      [key.replace(icwd,'~')]: {
+        ...value,
+        path: key.replace(icwd,'~'),
+      },
+    }
+
+  });
+}
+
+export const getSummaryByPath = (
+  path: string,
+  summary: CoverageSummaryMap,
+) => {
+  const summaryObj = libCoverage.createCoverageSummary();
+  const filterSummary = Object.keys(summary).reduce((pre: any, cur) => {
+    if (cur.indexOf(path) === 0) {
+      pre[cur] = summary[cur];
+    }
+    return pre;
+  }, {});
+
+  Object.keys(filterSummary).forEach((item) => {
+    summaryObj.merge(libCoverage.createCoverageSummary(filterSummary[item]));
+  });
+  return JSON.parse(JSON.stringify(summaryObj));
+};
+
+// summary 是总的
+export const genSummaryTreeItem = (
+  path: string,
+  summary: CoverageSummaryMap,
+) => {
+  function check(item: string, path: string) {
+    if (path === '') {
+      return true;
+    }
+    return item.includes(path);
+  }
+
+  if (Object.keys(summary).find((item) => item === path)) {
+    return {
+      path,
+      summary: getSummaryByPath(path, summary),
+      children: [],
+    };
+  }
+  // 如果是文件夹
+  const fileLists: string[] = [];
+  const folderLists: string[] = [];
+
+  Object.keys(summary).forEach((item) => {
+    const newpath = path === '' ? item : item.replace(path + '/', '');
+    if (check(item, path) && !newpath.includes('/')) {
+      fileLists.push(item);
+    }
+    if (check(item, path) && newpath.includes('/')) {
+      folderLists.push((path === '' ? '' : path + '/') + newpath.split('/')[0]);
+    }
+  });
+
+  return {
+    path,
+    summary: getSummaryByPath(path, summary),
+    children: [
+      ...[...new Set(fileLists)].map((item) => {
+        return {
+          path: item,
+          summary: getSummaryByPath(item, summary),
+        };
+      }),
+      ...[...new Set(folderLists)].map((item) => {
+        return {
+          path: item,
+          summary: getSummaryByPath(item, summary),
+        };
+      }),
+    ],
+  };
+};

packages/canyon-data/src/tests/genSummaryMapByCoverageMap.test.ts

@@ -1,8 +1,11 @@
 import { expect, test } from 'vitest'
-import { genSummaryMapByCoverageMap } from '../index'
+import { genSummaryMapByCoverageMap,formatCoverageMap } from '../index'
 import mockSummaryData from './mock-summary-data.json'
 import mockCoverageData from './mock-coverage-data.json'
-
+// import formatCoverageMap from './in'
 test('generate summary map by coverage map', () => {
+
+  console.log(formatCoverageMap(mockCoverageData,'/builds/canyon/canyon-demo'))
+
   expect(genSummaryMapByCoverageMap(mockCoverageData)).toMatchObject(mockSummaryData)
 })

packages/canyon-report/src/Report/components/IstanbulReport.tsx

@@ -1,9 +1,30 @@
-import { FC } from 'preact/compat';
+import { genSummaryTreeItem } from '@canyon/data';
+import { FC, useMemo } from 'preact/compat';
 import { useEffect, useState } from 'preact/hooks';
 
 import { IstanbulReportProps } from '../types';
+import { Dims, Item, Watermark } from '../types.ts';
+import Th from './Th.tsx';
+import Tr from './Tr.tsx';
 
-// const dims = ['statements', 'branches', 'functions', 'lines'];
+const capitalized = (word: string) =>
+  word.charAt(0).toUpperCase() + word.slice(1);
+
+const classForPercent = (type: Dims, value: number, _watermarks: any) => {
+  console.log(type,value,_watermarks)
+  const watermarks = _watermarks[type];
+  if (!watermarks) {
+    return 'unknown';
+  }
+  if (value < watermarks[0]) {
+    return 'low';
+  }
+  if (value >= watermarks[1]) {
+    return 'high';
+  }
+  return 'medium';
+};
+const dims = ['statements', 'branches', 'functions', 'lines'];
 const IstanbulReport: FC<IstanbulReportProps> = ({
   onSelectFile,
   watermarks,
@@ -12,6 +33,7 @@ const IstanbulReport: FC<IstanbulReportProps> = ({
   console.log(onSelectFile, watermarks);
   useEffect(() => {
     const handleSetOptionEvent = (e: { detail: any }) => {
+      console.log(e.detail, 'e.detail');
       setSummary(e.detail);
     };
 
@@ -22,8 +44,115 @@ const IstanbulReport: FC<IstanbulReportProps> = ({
       window.removeEventListener('setOptionEvent', handleSetOptionEvent);
     };
   }, []); // 空数组表示仅在组件挂载和卸载时运行
+  const [activePath, setActivePath] = useState('/builds/canyon/canyon-demo/src');
+
+  const summaryTreeItem = useMemo(() => {
+    return genSummaryTreeItem('/builds/canyon/canyon-demo/src', summary);
+  }, [activePath, summary]);
+  const paths = useMemo(() => {
+    return activePath
+      .split('/')
+      .reduce(
+        (pre: { path: string; name: string }[], cur, currentIndex, array) => {
+          if (currentIndex !== array.length - 1) {
+            pre.push({
+              path: array.slice(0, currentIndex + 1).join('/'),
+              name: cur,
+            });
+          }
+          return pre;
+        },
+        [],
+      );
+  }, [activePath]);
+  return (
+    <div id={'canyon-report'}>
+      <div className={'pad1'}>
+        <h1>
+          <a
+            onClick={() => {
+              setActivePath('');
+            }}
+          >
+            All files
+          </a>{' '}
+          /{' '}
+          <div className="pathnames" style="display: inline">
+            {paths.map(({ path, name }) => {
+              return (
+                <>
+                  <a
+                    onClick={() => {
+                      setActivePath(path);
+                    }}
+                  >
+                    {name}
+                  </a>
+                  &nbsp;/&nbsp;
+                </>
+              );
+            })}
+          </div>{' '}
+          <span className="filename">
+            {summaryTreeItem.path.split('/').at(-1)}
+          </span>
+        </h1>
+        <div className="clearfix">
+          {dims.map((dim) => (
+            <div className="fl pad1y space-right2">
+              <span className="strong">
+                {summaryTreeItem.summary[dim].pct}%
+              </span>
+              <span className="quiet">{capitalized(dim)}</span>
+              <span className="fraction">
+                {summaryTreeItem.summary.statements.covered}/
+                {summaryTreeItem.summary[dim].total}
+              </span>
+            </div>
+          ))}
+        </div>
+        <p className="quiet">
+          Press <em>n</em> or <em>j</em> to go to the next uncovered block,{' '}
+          <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
+        </p>
+        <div className="quiet">
+          Filter:
+          <input type="search" id="fileSearch" />
+        </div>
+      </div>
+      <div
+        className={`status-line ${classForPercent(
+          Dims.statements,
+          summaryTreeItem.summary.statements.pct,
+          watermarks,
+        )}`}
+      />
 
-  return <div id={'canyon-report'}>{JSON.stringify(summary)}</div>;
+      {summaryTreeItem.children.length > 0 ? (
+        <div className="pad1">
+          <table className="coverage-summary">
+            <Th />
+            <tbody>
+              {summaryTreeItem.children.map((item) => {
+                return (
+                  <Tr
+                    setActivePath={(p) => {
+                      setActivePath(p);
+                    }}
+                    path={item.path}
+                    item={item.summary}
+                    watermarks={watermarks}
+                  />
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <div>wu</div>
+      )}
+    </div>
+  );
 };
 
 export default IstanbulReport;

packages/canyon-report/src/Report/components/Th.tsx

@@ -0,0 +1,91 @@
+const Th = () => {
+  return (
+    <thead>
+      <tr>
+        <th
+          data-col="file"
+          data-fmt="html"
+          data-html="true"
+          className="file sorted"
+        >
+          File
+          <span className="sorter" />
+        </th>
+        <th
+          data-col="pic"
+          data-type="number"
+          data-fmt="html"
+          data-html="true"
+          className="pic"
+        >
+          <span className="sorter" />
+        </th>
+        <th
+          data-col="statements"
+          data-type="number"
+          data-fmt="pct"
+          className="pct"
+        >
+          Statements
+          <span className="sorter" />
+        </th>
+        <th
+          data-col="statements_raw"
+          data-type="number"
+          data-fmt="html"
+          className="abs"
+        >
+          <span className="sorter" />
+        </th>
+        <th
+          data-col="branches"
+          data-type="number"
+          data-fmt="pct"
+          className="pct"
+        >
+          Branches
+          <span className="sorter" />
+        </th>
+        <th
+          data-col="branches_raw"
+          data-type="number"
+          data-fmt="html"
+          className="abs"
+        >
+          <span className="sorter" />
+        </th>
+        <th
+          data-col="functions"
+          data-type="number"
+          data-fmt="pct"
+          className="pct"
+        >
+          Functions
+          <span className="sorter" />
+        </th>
+        <th
+          data-col="functions_raw"
+          data-type="number"
+          data-fmt="html"
+          className="abs"
+        >
+          <span className="sorter" />
+        </th>
+        <th data-col="lines" data-type="number" data-fmt="pct" className="pct">
+          Lines
+          <span className="sorter" />
+        </th>
+        <th
+          data-col="lines_raw"
+          data-type="number"
+          data-fmt="html"
+          className="abs"
+        >
+          <span className="sorter" />
+        </th>
+      </tr>
+    </thead>
+  );
+};
+
+export default Th;