Merge pull request X-lab2017#553 from frank-zsy/refactor/style-modify

[Refactor] Change report style
MaYangrui6 · May 10, 2021 · 1a6bc89 · 1a6bc89
2 parents e8ef893 + b95cb4d
commit 1a6bc89
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 27 deletions.
diff --git a/REPORT_TEMPLATE.html b/REPORT_TEMPLATE.html
@@ -10,7 +10,26 @@
       width: 80%;
       margin-left: 10%;
       margin-top: 20px;
-      background-color: bisque;
+      background-color: #212332;
+    }
+    * {
+      color: #D1E1F0;
+    }
+    .report-title-text {
+      font-size: 48px;
+      margin-bottom: 24px;
+    }
+    .component-title-text {
+      font-size: 36px;
+      margin-top: 42px;
+      margin-bottom: 42px;
+    }
+    .component-content-text {
+      font-size: 16px;
+      margin-bottom: 42px;
+    }
+    .figure-text {
+      font-size: 14px;
     }
     {{css}}
   </style>
@@ -19,18 +38,20 @@
 <body>
 
   <div class="text-center">
-    <h1>{{contentTitle}}</h1>
+    <text class="report-title-text">{{contentTitle}}</text>
   </div>
 
-  <div>
-    {{head}}  
+  <div class="component-content-text">
+    {{head}}
   </div>
 
   <div>
     {{html}}
   </div>
 
   <script type='text/javascript'>
+    const colors = ['#33B3FF', '#8B73FF', '#21D096', '#E17070', '#03FFFF', 'F4DD67', 'CC529B'];
+    const textColor = '#D1E1F0';
     {{js}}
   </script>
 </body>

diff --git a/case-study/sqls/overview/processor.js b/case-study/sqls/overview/processor.js
@@ -28,11 +28,15 @@ ORDER BY year ASC`;
   const maxRepo = repoCount.max;
 
   return {
-    html: `
-    <h3>GitHub log event data overview</h3>
-    <p>We collect GitHub log event from ${years[0]} to ${years[years.length - 1]} and the overview chart is shown below.</p>
-    <div id="overviewChart" style="width: 600px;height:400px;"></div>
-    ${dataError ? '<p>This is a sample data example due to render data error!</p>' : ''}`,
+    html: `${utils.genComponentTitle("GitHub log event data overview")}
+    <div class="row">
+      <div class="col-4">
+        ${utils.genComponentContent(`We collect GitHub log event from ${years[0]} to ${years[years.length - 1]} and the overview chart is shown as right.`)}
+      </div>
+      <div class="col-8">
+        <div id="overviewChart" style="width:100%;height:400px;"></div>
+      </div>
+    </div>`,
     css: '',
     js: `
   var overViewChart = echarts.init(document.getElementById('overviewChart'));
@@ -53,14 +57,23 @@ ORDER BY year ASC`;
       }
     },
     legend: {
-      data: ['日志量', '活跃用户', '活跃仓库']
+      data: ['日志量', '活跃用户', '活跃仓库'],
+      textStyle: {
+        color: textColor
+      }
     },
     xAxis: [
       {
         type: 'category',
         axisTick: {
           alignWithLabel: true
         },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: textColor
+          }
+        },
         data: [${years.join(',')}]
       }
     ],
@@ -73,6 +86,9 @@ ORDER BY year ASC`;
         position: 'left',
         axisLine: {
           show: true,
+          lineStyle: {
+            color: colors[0]
+          }
         },
         axisLabel: {
           formatter: '{value}${logCount.unit}'
@@ -87,6 +103,9 @@ ORDER BY year ASC`;
         offset: 50,
         axisLine: {
           show: true,
+          lineStyle: {
+            color: colors[1]
+          }
         },
         axisLabel: {
           formatter: '{value}${actorCount.unit}'
@@ -100,6 +119,9 @@ ORDER BY year ASC`;
         position: 'right',
         axisLine: {
           show: true,
+          lineStyle: {
+            color: colors[2]
+          }
         },
         axisLabel: {
           formatter: '{value}${repoCount.unit}'

diff --git a/global-study/config.yaml b/global-study/config.yaml
@@ -1,5 +1,5 @@
 pageTitle: OpenDigger Global Study Report
-contentTitle: OpenDigger global study report
+contentTitle: OpenDigger Global Study Report
 sqls:
   - overview
   - top-activity-repo

diff --git a/global-study/sqls/overview/processor.js b/global-study/sqls/overview/processor.js
@@ -67,10 +67,15 @@ ORDER BY year ASC`;
 
   return {
     html: `
-    <h3>GitHub log event data overview</h3>
-    <p>We collect GitHub log event from ${years[0]} to ${years[years.length - 1]} and the overview chart is shown below.</p>
-    <div id="overviewChart" style="width: 600px;height:400px;"></div>
-    ${dataError ? '<p>This is a sample data example due to render data error!</p>' : ''}`,
+    ${utils.genComponentTitle("GitHub log event data overview")}
+    <div class="row">
+      <div class="col-4">
+        ${utils.genComponentContent(`We collect GitHub log event from ${years[0]} to ${years[years.length - 1]} and the overview chart is shown as right.`)}
+      </div>
+      <div class="col-8">
+        <div id="overviewChart" style="width:100%;height:400px;"></div>
+      </div>
+    </div>`,
     css: '',
     js: `
   var overViewChart = echarts.init(document.getElementById('overviewChart'));
@@ -91,14 +96,23 @@ ORDER BY year ASC`;
       }
     },
     legend: {
-      data: ['日志量', '活跃用户', '活跃仓库']
+      data: ['日志量', '活跃用户', '活跃仓库'],
+      textStyle: {
+        color: textColor
+      }
     },
     xAxis: [
       {
         type: 'category',
         axisTick: {
           alignWithLabel: true
         },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: textColor
+          }
+        },
         data: [${years.join(',')}]
       }
     ],
@@ -111,6 +125,9 @@ ORDER BY year ASC`;
         position: 'left',
         axisLine: {
           show: true,
+          lineStyle: {
+            color: colors[0]
+          }
         },
         axisLabel: {
           formatter: '{value}${logCount.unit}'
@@ -125,6 +142,9 @@ ORDER BY year ASC`;
         offset: 50,
         axisLine: {
           show: true,
+          lineStyle: {
+            color: colors[1]
+          }
         },
         axisLabel: {
           formatter: '{value}${actorCount.unit}'
@@ -138,6 +158,9 @@ ORDER BY year ASC`;
         position: 'right',
         axisLine: {
           show: true,
+          lineStyle: {
+            color: colors[2]
+          }
         },
         axisLabel: {
           formatter: '{value}${repoCount.unit}'

diff --git a/global-study/sqls/repo-language-distribution/processor.js b/global-study/sqls/repo-language-distribution/processor.js
@@ -104,8 +104,8 @@ LIMIT ${topN_language}
 
   return {
     html: `
-    <h3>GitHub most used ${topN_language} languages</h3>
-    <p>We have collected activity statistics and the ranking of active repositories.</p>
+    ${utils.genComponentTitle(`GitHub most used ${topN_language} languages`)}
+    ${utils.genComponentContent(`We have collected activity statistics and the ranking of the most used languages.`)}
     ${utils.genTable({
       keys,
       data,

diff --git a/global-study/sqls/top-activity-developer/processor.js b/global-study/sqls/top-activity-developer/processor.js
@@ -104,8 +104,8 @@ LIMIT ${topN}`;
 
   return {
     html: `
-    <h3>GitHub most active ${topN} developer account</h3>
-    <p>We have collected activity statistics and the ranking of developer accounts.</p>
+    ${utils.genComponentTitle(`GitHub most active ${topN} developer account`)}
+    ${utils.genComponentContent(`We have collected activity statistics and the ranking of developer accounts.`)}
     ${utils.genTable({
       keys,
       data,

diff --git a/global-study/sqls/top-activity-repo/processor.js b/global-study/sqls/top-activity-repo/processor.js
@@ -107,8 +107,8 @@ LIMIT ${topN}`;
 
   return {
     html: `
-    <h3>GitHub most active ${topN} repositories</h3>
-    <p>We have collected activity statistics and the ranking of active repositories.</p>
+    ${utils.genComponentTitle(`GitHub most active ${topN} repositories`)}
+    ${utils.genComponentContent(`We have collected activity statistics and the ranking of active repositories.`)}
     ${utils.genTable({
       keys,
       data,

diff --git a/global-study/sqls/working-hour-distribution/processor.js b/global-study/sqls/working-hour-distribution/processor.js
@@ -30,10 +30,15 @@ module.exports = async function(config, utils) {
 
   return {
     html: `
-    <h3>GitHub global working hour distribution</h3>
-    <p>We analyze the working hour distribution for GitHub logs all over the world during year ${year}, we found that open source developers are predominantly European because local working hour period lays in UTC±1 as the image shows.</p>
-
-    <embed src="${config.baseUrl}svgrenderer/github/${config.owner}/${config.repo}?path=assets/working-hour-distribution.svg&data=${JSON.stringify(d)}" />`,
+    ${utils.genComponentTitle(`GitHub global working hour distribution`)}
+    <div class="row">
+      <div class="col-6">
+        <embed src="${config.baseUrl}svgrenderer/github/${config.owner}/${config.repo}?path=assets/working-hour-distribution.svg&data=${JSON.stringify(d)}" />
+      </div>
+      <div class="col-6">
+        ${utils.genComponentContent(`We analyze the working hour distribution for GitHub logs all over the world during year ${year}, we found that open source developers are predominantly European because local working hour period lays in UTC±1 as the image shows.`)}
+      </div>
+    </div>`,
     css: '',
     js: '',
   };

diff --git a/src/pageUtils.ts b/src/pageUtils.ts
@@ -62,6 +62,24 @@ export function genTable(config: genTableConfig): string {
     tableRow.push(s);
   }
   return `<table class="${config.tableClass ?? 'table table-striped'}">
-      ${tableRow.map(r => `<tr>${r}</tr>\n`).join('')}
+      ${tableRow.map((r, i) => `<tr ${i % 2 === 1 ? 'style="background-color: rgba(30, 161, 255, 0.1)"' : ''}>${r}</tr>\n`).join('')}
     </table>`
 }
+
+export function genComponentTitle(title: string): string {
+  return `<div class="component-title-text">
+  <text>${title}</text>
+  </div>`;
+}
+
+export function genComponentContent(content: string): string {
+  return `<div class="component-content-text">
+  <text>${content}</text>
+  </div>`;
+}
+
+export function genFigure(content: string): string {
+  return `<div class="figure-text">
+  <text>${content}</text>
+  </div>`;
+}