added new option logo

CHANGELOG.md

@@ -1,5 +1,8 @@
 ## Changelog
 
+* 2.9.11
+  - added new option `logo`
+
 * 2.9.10
   - fixed UI highlight
   - fixed UI icons

lib/default/options.js

@@ -5,6 +5,9 @@ module.exports = () => ({
     // the report name
     name: '',
 
+    // image url (supports data url)
+    logo: null,
+
     // the output html file path (relative process.cwd)
     outputFile: './monocart-report/index.html',
 

lib/generate-data.js

@@ -144,6 +144,7 @@ const generateData = async (results) => {
     const reportData = {
         // for report title
         name: reportName,
+        logo: options.logo,
 
         date,
         dateH,

lib/index.d.ts

@@ -51,6 +51,12 @@ export type MonocartReporterOptions = {
     /** the report name */
     name?: string;
 
+    /** 
+     * image url, supports data url:
+     * `data:image/png;base64,${fs.readFileSync('path-to/your-logo.png').toString('base64')}`
+    */
+    logo?: string;
+
     /** the output file path (relative process.cwd) */
     outputFile?: string;
 

lib/merge-data.js

@@ -333,6 +333,7 @@ const mergeDataList = async (dataList, options) => {
     });
 
     const reportName = options.name || mergedData.name;
+    const reportLogo = options.logo || mergedData.logo;
 
     const date = Math.min.apply(null, startDates);
     const dateH = new Date(date).toLocaleString();
@@ -342,6 +343,7 @@ const mergeDataList = async (dataList, options) => {
 
     Object.assign(mergedData, {
         name: reportName,
+        logo: reportLogo,
 
         date,
         dateH,

packages/app/src/app.vue

@@ -498,6 +498,7 @@ const init = async () => {
     state.columns = cloneColumns;
 
     state.title = reportData.name;
+    state.logo = reportData.logo;
     state.date = reportData.dateH;
     state.duration = reportData.durationH;
     state.mermaid = reportData.mermaid;
@@ -654,6 +655,13 @@ window.addEventListener('message', (e) => {
         gap="10px"
         wrap
       >
+        <img
+          v-if="state.logo"
+          class="mcr-logo"
+          :src="state.logo"
+          alt=""
+        >
+
         <div class="mcr-title">
           <a href="./">{{ state.title }}</a>
         </div>
@@ -1174,6 +1182,12 @@ a:not([href], [class]):hover {
     color: #fff;
     background-color: #24292f;
 
+    .mcr-logo {
+        display: block;
+        max-height: 32px;
+        overflow: hidden;
+    }
+
     .mcr-title {
         height: 22px;
         font-size: 18px;

tests/playwright.config.js

@@ -1,4 +1,5 @@
 const EC = require('eight-colors');
+const fs = require('fs');
 
 // for local test
 process.env.PASSWORD = 'my-password';
@@ -91,6 +92,9 @@ module.exports = {
 
             zip: '.temp/monocart-zip/mr.zip',
 
+            // image url (supports data url)
+            logo: `data:image/png;base64,${fs.readFileSync('docs/logo.png').toString('base64')}`,
+
             attachmentPath: (currentPath, extras) => {
                 // console.log(currentPath, extras);
                 // return `https://cenfun.github.io/monocart-reporter/${relativePath}`;