v2.65 击键、速度、码长

KyleBing · Sep 26, 2022 · 4a2b31b · 4a2b31b
1 parent 22e0828
commit 4a2b31b
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 51 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # CHANGELOG
 
+### v2.65 `2022-09-26`
+- 击键的柱状图展示
+
 ### v2.64 `2022-09-23`
 - 展示当前跟打类型的统计数据
 

diff --git a/index.html b/index.html
@@ -196,6 +196,42 @@
          </div>
       </div>
 
+
+      <!--SCORE CHART-->
+      <div class="score-statistics-container info-panel">
+         <div class="title">击键</div>
+         <div class="score-statistics-list">
+            <div class="score-statistics-item hitrate level-1"><div class="chart-bar"><div class="process"></div></div><div class="label">1</div></div>
+            <div class="score-statistics-item hitrate level-2"><div class="chart-bar"><div class="process"></div></div><div class="label">2</div></div>
+            <div class="score-statistics-item hitrate level-3"><div class="chart-bar"><div class="process"></div></div><div class="label">3</div></div>
+            <div class="score-statistics-item hitrate level-4"><div class="chart-bar"><div class="process"></div></div><div class="label">4</div></div>
+            <div class="score-statistics-item hitrate level-5"><div class="chart-bar"><div class="process"></div></div><div class="label">5</div></div>
+            <div class="score-statistics-item hitrate level-6"><div class="chart-bar"><div class="process"></div></div><div class="label">6</div></div>
+            <div class="score-statistics-item hitrate level-7"><div class="chart-bar"><div class="process"></div></div><div class="label">7</div></div>
+            <div class="score-statistics-item hitrate level-8"><div class="chart-bar"><div class="process"></div></div><div class="label">8</div></div>
+            <div class="score-statistics-item hitrate level-9"><div class="chart-bar"><div class="process"></div></div><div class="label">9</div></div>
+            <div class="score-statistics-item hitrate level-10"><div class="chart-bar"><div class="process"></div></div><div class="label">10</div></div>
+            <div class="score-statistics-item hitrate level-11"><div class="chart-bar"><div class="process"></div></div><div class="label">11</div></div>
+            <div class="score-statistics-item hitrate level-12"><div class="chart-bar"><div class="process"></div></div><div class="label">12</div></div>
+         </div>
+      </div>
+      <!--CODE LENGTH CHART-->
+      <div class="score-statistics-container info-panel">
+         <div class="title">码长</div>
+         <div class="score-statistics-list">
+            <div class="score-statistics-item codelength level-1"><div class="chart-bar"><div class="process"></div></div><div class="label">1</div></div>
+            <div class="score-statistics-item codelength level-2"><div class="chart-bar"><div class="process"></div></div><div class="label">2</div></div>
+            <div class="score-statistics-item codelength level-3"><div class="chart-bar"><div class="process"></div></div><div class="label">3</div></div>
+            <div class="score-statistics-item codelength level-4"><div class="chart-bar"><div class="process"></div></div><div class="label">4</div></div>
+            <div class="score-statistics-item codelength level-5"><div class="chart-bar"><div class="process"></div></div><div class="label">5</div></div>
+            <div class="score-statistics-item codelength level-6"><div class="chart-bar"><div class="process"></div></div><div class="label">6</div></div>
+            <div class="score-statistics-item codelength level-7"><div class="chart-bar"><div class="process"></div></div><div class="label">7</div></div>
+            <div class="score-statistics-item codelength level-8"><div class="chart-bar"><div class="process"></div></div><div class="label">8</div></div>
+            <div class="score-statistics-item codelength level-9"><div class="chart-bar"><div class="process"></div></div><div class="label">9</div></div>
+            <div class="score-statistics-item codelength level-10"><div class="chart-bar"><div class="process"></div></div><div class="label">10</div></div>
+         </div>
+      </div>
+
       <!--SCORE SUMMERY-->
       <div class="score-info info-panel">
          <div class="title">单字</div>
@@ -257,42 +293,6 @@
          </div>
       </div>
 
-      <!--SCORE CHART-->
-      <div class="score-statistics-container info-panel">
-         <div class="title">击键</div>
-         <div class="score-statistics-list">
-            <div class="score-statistics-item hitrate level-1"><div class="chart-bar"><div class="process"></div></div><div class="label">1</div></div>
-            <div class="score-statistics-item hitrate level-2"><div class="chart-bar"><div class="process"></div></div><div class="label">2</div></div>
-            <div class="score-statistics-item hitrate level-3"><div class="chart-bar"><div class="process"></div></div><div class="label">3</div></div>
-            <div class="score-statistics-item hitrate level-4"><div class="chart-bar"><div class="process"></div></div><div class="label">4</div></div>
-            <div class="score-statistics-item hitrate level-5"><div class="chart-bar"><div class="process"></div></div><div class="label">5</div></div>
-            <div class="score-statistics-item hitrate level-6"><div class="chart-bar"><div class="process"></div></div><div class="label">6</div></div>
-            <div class="score-statistics-item hitrate level-7"><div class="chart-bar"><div class="process"></div></div><div class="label">7</div></div>
-            <div class="score-statistics-item hitrate level-8"><div class="chart-bar"><div class="process"></div></div><div class="label">8</div></div>
-            <div class="score-statistics-item hitrate level-9"><div class="chart-bar"><div class="process"></div></div><div class="label">9</div></div>
-            <div class="score-statistics-item hitrate level-10"><div class="chart-bar"><div class="process"></div></div><div class="label">10</div></div>
-            <div class="score-statistics-item hitrate level-11"><div class="chart-bar"><div class="process"></div></div><div class="label">11</div></div>
-            <div class="score-statistics-item hitrate level-12"><div class="chart-bar"><div class="process"></div></div><div class="label">12</div></div>
-         </div>
-      </div>
-      <!--CODE LENGTH CHART-->
-      <div class="score-statistics-container info-panel">
-         <div class="title">码长</div>
-         <div class="score-statistics-list">
-            <div class="score-statistics-item codelength level-1"><div class="chart-bar"><div class="process"></div></div><div class="label">1</div></div>
-            <div class="score-statistics-item codelength level-2"><div class="chart-bar"><div class="process"></div></div><div class="label">2</div></div>
-            <div class="score-statistics-item codelength level-3"><div class="chart-bar"><div class="process"></div></div><div class="label">3</div></div>
-            <div class="score-statistics-item codelength level-4"><div class="chart-bar"><div class="process"></div></div><div class="label">4</div></div>
-            <div class="score-statistics-item codelength level-5"><div class="chart-bar"><div class="process"></div></div><div class="label">5</div></div>
-            <div class="score-statistics-item codelength level-6"><div class="chart-bar"><div class="process"></div></div><div class="label">6</div></div>
-            <div class="score-statistics-item codelength level-7"><div class="chart-bar"><div class="process"></div></div><div class="label">7</div></div>
-            <div class="score-statistics-item codelength level-8"><div class="chart-bar"><div class="process"></div></div><div class="label">8</div></div>
-            <div class="score-statistics-item codelength level-9"><div class="chart-bar"><div class="process"></div></div><div class="label">9</div></div>
-            <div class="score-statistics-item codelength level-10"><div class="chart-bar"><div class="process"></div></div><div class="label">10</div></div>
-            <div class="score-statistics-item codelength level-11"><div class="chart-bar"><div class="process"></div></div><div class="label">11</div></div>
-            <div class="score-statistics-item codelength level-12"><div class="chart-bar"><div class="process"></div></div><div class="label">12</div></div>
-         </div>
-      </div>
 
       <!--ABOUT INFO-->
       <div class="info-panel">

diff --git a/js/class/Engine.js b/js/class/Engine.js
@@ -863,17 +863,17 @@ define(
          else if  (this.record.hitRate >= 14   && this.record.hitRate < 15   )  { this.score[this.config.articleType].hitRate14++}
          else if  (this.record.hitRate >= 15   && this.record.hitRate < 16   )  { this.score[this.config.articleType].hitRate15++}
 
-         // KEY LENGTH FILTER
-         if       (this.record.keyLength >= 0  && this.record.keyLength < 2  )  { this.score[this.config.articleType].keyLength1++}
-         else if  (this.record.keyLength >= 2  && this.record.keyLength < 3  )  { this.score[this.config.articleType].keyLength2++}
-         else if  (this.record.keyLength >= 3  && this.record.keyLength < 4  )  { this.score[this.config.articleType].keyLength3++}
-         else if  (this.record.keyLength >= 4  && this.record.keyLength < 5  )  { this.score[this.config.articleType].keyLength4++}
-         else if  (this.record.keyLength >= 5  && this.record.keyLength < 6  )  { this.score[this.config.articleType].keyLength5++}
-         else if  (this.record.keyLength >= 6  && this.record.keyLength < 7  )  { this.score[this.config.articleType].keyLength6++}
-         else if  (this.record.keyLength >= 7  && this.record.keyLength < 8  )  { this.score[this.config.articleType].keyLength7++}
-         else if  (this.record.keyLength >= 8  && this.record.keyLength < 9  )  { this.score[this.config.articleType].keyLength8++}
-         else if  (this.record.keyLength >= 9  && this.record.keyLength < 10 )  { this.score[this.config.articleType].keyLength9++}
-         else if  (this.record.keyLength >= 10 && this.record.keyLength < 11 )  { this.score[this.config.articleType].keyLength10++}
+         // CODE LENGTH FILTER
+         if       (this.record.codeLength >= 0  && this.record.codeLength < 2  )  { this.score[this.config.articleType].codeLength1++}
+         else if  (this.record.codeLength >= 2  && this.record.codeLength < 3  )  { this.score[this.config.articleType].codeLength2++}
+         else if  (this.record.codeLength >= 3  && this.record.codeLength < 4  )  { this.score[this.config.articleType].codeLength3++}
+         else if  (this.record.codeLength >= 4  && this.record.codeLength < 5  )  { this.score[this.config.articleType].codeLength4++}
+         else if  (this.record.codeLength >= 5  && this.record.codeLength < 6  )  { this.score[this.config.articleType].codeLength5++}
+         else if  (this.record.codeLength >= 6  && this.record.codeLength < 7  )  { this.score[this.config.articleType].codeLength6++}
+         else if  (this.record.codeLength >= 7  && this.record.codeLength < 8  )  { this.score[this.config.articleType].codeLength7++}
+         else if  (this.record.codeLength >= 8  && this.record.codeLength < 9  )  { this.score[this.config.articleType].codeLength8++}
+         else if  (this.record.codeLength >= 9  && this.record.codeLength < 10 )  { this.score[this.config.articleType].codeLength9++}
+         else if  (this.record.codeLength >= 10 && this.record.codeLength < 11 )  { this.score[this.config.articleType].codeLength10++}
 
          // RECORD COUNT
          this.score[this.config.articleType].recordCount++
@@ -993,7 +993,11 @@ define(
          hitRateScoreArray.forEach((hitRateScore, index) => {
             let hitRate = currentArticleTypeScore[`hitRate${index+1}`]
             $(`.score-statistics-item.hitrate.level-${index+1} .process`).style.backgroundColor = generateColorForChart(hitRate, 0, 20)
-            $(`.score-statistics-item.hitrate.level-${index+1} .process`).style.height = `${hitRate * 60 / hitRateMax}px`
+            if (hitRateMax === 0){
+               $(`.score-statistics-item.hitrate.level-${index+1} .process`).style.height = 0
+            } else {
+               $(`.score-statistics-item.hitrate.level-${index+1} .process`).style.height = `${hitRate * 60 / hitRateMax}px`
+            }
          })
 
          // CODE LENGTH 图表展示
@@ -1006,7 +1010,11 @@ define(
          codeLengthScoreArray.forEach((hitRateScore, index) => {
             let codeLength = currentArticleTypeScore[`codeLength${index+1}`]
             $(`.score-statistics-item.codelength.level-${index+1} .process`).style.backgroundColor = generateColorForChart(codeLength, 0, 20)
-            $(`.score-statistics-item.codelength.level-${index+1} .process`).style.height = `${codeLength * 60 / hitRateMax}px`
+            if(codeLengthMax === 0){
+               $(`.score-statistics-item.codelength.level-${index+1} .process`).style.height = 0
+            } else {
+               $(`.score-statistics-item.codelength.level-${index+1} .process`).style.height = `${codeLength * 60 / codeLengthMax}px`
+            }
          })
 
       }

diff --git a/scss/mixin/_black.scss b/scss/mixin/_black.scss
@@ -292,6 +292,22 @@ body.black {
   }
 
 
+  .score-statistics-container{
+    .title{
+    }
+    .score-statistics-list{
+      .score-statistics-item{
+        .chart-bar{
+          background-color: lighten($black-bg, 2%);
+        }
+        .label{
+        }
+      }
+    }
+  }
+
+
+
   // TEXT
   $colors  : (
           'green'      : $green,

diff --git a/scss/mixin/_score.scss b/scss/mixin/_score.scss
@@ -34,6 +34,9 @@
 }
 
 .score-statistics-container{
+  .title{
+    margin-bottom: 5px;
+  }
   .score-statistics-list{
     display: flex;
     justify-content: space-evenly;
@@ -49,7 +52,7 @@
         @include border-radius(1px);
         overflow: hidden;
         width: 100%;
-        background-color: $bg-body;
+        background-color: transparentize(black, 0.95);
         height: 60px;
         position: relative;
         .process{
@@ -61,6 +64,7 @@
         }
       }
       .label{
+        margin-top: 2px;
         font-size: 8px;
       }
     }

diff --git a/scss/typepad.css b/scss/typepad.css
@@ -1117,6 +1117,9 @@ body.black .score-info-item .score {
 body.black .score-info-item .desc {
   color: #595959;
 }
+body.black .score-statistics-container .score-statistics-list .score-statistics-item .chart-bar {
+  background-color: #20242a;
+}
 body.black .text-green {
   color: #166f47 !important;
 }
@@ -1338,6 +1341,9 @@ body.black .text-black {
   font-size: 10px;
 }
 
+.score-statistics-container .title {
+  margin-bottom: 5px;
+}
 .score-statistics-container .score-statistics-list {
   display: flex;
   justify-content: space-evenly;
@@ -1357,7 +1363,7 @@ body.black .text-black {
   border-radius: 1px;
   overflow: hidden;
   width: 100%;
-  background-color: #EBEBEB;
+  background-color: rgba(0, 0, 0, 0.05);
   height: 60px;
   position: relative;
 }
@@ -1371,6 +1377,7 @@ body.black .text-black {
   right: 0;
 }
 .score-statistics-container .score-statistics-list .score-statistics-item .label {
+  margin-top: 2px;
   font-size: 8px;
 }