(ui) fixed heights and font sizes on progress

kevincobain2000 · May 29, 2024 · 62f1bff · 62f1bff
1 parent f743f74
commit 62f1bff
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 14 deletions.
diff --git a/app/frontend/src/components/partials/readme_dashboard/progress.astro b/app/frontend/src/components/partials/readme_dashboard/progress.astro
@@ -20,14 +20,19 @@
             <img
               class="inline select-none rounded-xl p-1"
               is:raw
-              :src="`//${url}/progress?org=${org}&repo=${repo}&branch=${branch}&type=${t.name}`"
+              :src="`//${url}/progress?org=${org}&repo=${repo}&branch=${branch}&type=${t.name}&theme=dark&style=bar`"
+            />
+            <img
+              class="inline select-none rounded-xl p-10 mb-5"
+              is:raw
+              :src="`//${url}/progress?org=${org}&repo=${repo}&branch=${branch}&type=${t.name}&theme=dark&style=circle`"
             />
           </div>
           <code class="font-mono text-slate-500 break-words text-sm">
             ![<span x-text="t.name"></span>](https://<span x-text="url"
             ></span>/progress?org=<span x-text="org"></span>&repo=<span
               x-text="repo"></span>&branch=<span x-text="branch"
-            ></span>&type=<span x-text="t.name"></span>)
+            ></span>&type=<span x-text="t.name"></span>&theme=dark&style=bar)
           </code>
         </dd>
       </div>

diff --git a/app/frontend/src/components/partials/readme_dashboard/quick_docs.astro b/app/frontend/src/components/partials/readme_dashboard/quick_docs.astro
@@ -116,7 +116,8 @@
           </tr>
         </tbody>
       </table>
-      <h3 class="font-bold text-slate-300 pt-3 pb-1">Charts</h3>
+      <hr class="w-12 h-1 mx-auto my-4 bg-gray-700 border-0 rounded md:my-10" />
+      <h3 class="font-bold text-slate-300 pb-1">Charts</h3>
       <table class="w-full">
         <tbody class="text-left">
           <tr>
@@ -146,6 +147,16 @@
           </tr>
         </tbody>
       </table>
+      <h3 class="font-bold text-slate-300 pt-3 pb-1">Progress</h3>
+      <table class="w-full">
+        <tbody class="text-left">
+          <tr>
+            <th class="text-slate-400 font-mono text-sm">&style</th>
+            <th class="text-slate-400 font-mono text-sm">=</th>
+            <td class="font-mono text-sm">circle or bar</td>
+          </tr>
+        </tbody>
+      </table>
     </div>
     <div
       class="sm:col-span-4 bg-gradient-to-b from-slate-900 to-slate-800 rounded-md p-5 select-none"

diff --git a/app/frontend/src/components/partials/readme_dashboard/sidebar.astro b/app/frontend/src/components/partials/readme_dashboard/sidebar.astro
@@ -44,21 +44,21 @@
     <a
       href="#comparison-charts-types"
       class="text-violet-400 font-semibold hover:text-violet-300"
-      ><span class="text-slate-500">#</span> Types</a
+      ><span class="text-slate-500">#</span> Types Charts</a
     >
   </li>
   <li class="pt-1">
     <a
       href="#comparison-charts-branches"
       class="text-violet-400 font-semibold hover:text-violet-300"
-      ><span class="text-slate-500">#</span> Branches</a
+      ><span class="text-slate-500">#</span> Branches Charts</a
     >
   </li>
   <li class="pt-1">
     <a
       href="#comparison-charts-users"
       class="text-violet-400 font-semibold hover:text-violet-300"
-      ><span class="text-slate-500">#</span> Users</a
+      ><span class="text-slate-500">#</span> Users Charts</a
     >
   </li>
 </ul>

diff --git a/app/pkg/progress.go b/app/pkg/progress.go
@@ -30,26 +30,46 @@ func (b *Progress) Get(req *ProgressRequest, t *models.Type) ([]byte, error) {
 	switch req.Theme {
 	case "dark":
 		circleColor = "#333333"
-		textColor = "#FFFFFF"
-		backgroundColor = "#000000"
-		captionColor = "gray"
+		textColor = "#36454F"
 	case "light":
 		circleColor = "#DDDDDD"
 		textColor = "#36454F"
-		backgroundColor = "#FFFFFF"
-		captionColor = "gray"
 	}
 
 	switch {
-	case ret.Score > 70:
+	case ret.Score > 50:
 		progressColor = "#77DD77" // pastel green
+		captionColor = "#00FF00"
+		backgroundColor = "#D1E2C4"
 	case ret.Score >= 30:
 		progressColor = "#FFB347" // pastel yellow
+		captionColor = "#FFA500"
+		backgroundColor = "#FFD1A4"
 	default:
 		progressColor = "#FF6961" // pastel red
+		captionColor = "#FF0000"
+		backgroundColor = "#FFD1A4"
+	}
+	if req.Style == "bar" {
+		bar, err := gps.NewBar(func(o *gps.BarOptions) error {
+			o.Progress = int(ret.Score)
+			o.Width = 180
+			o.Height = 40
+			o.ProgressColor = progressColor
+			o.TextColor = textColor
+			o.TextSize = 14
+			o.ShowPercentage = true
+			o.Caption = t.Name
+			o.CaptionSize = 14
+			o.CaptionColor = captionColor
+			o.BackgroundColor = backgroundColor
+			o.CornerRadius = 10
+			return nil
+		})
+		return []byte(bar.SVG()), err
 	}
 
-	circular, err := gps.NewCircular(func(o *gps.CircularOptions) error {
+	circle, err := gps.NewCircular(func(o *gps.CircularOptions) error {
 		o.Progress = int(ret.Score)
 		o.Size = 120
 		o.CircleWidth = 15
@@ -67,5 +87,5 @@ func (b *Progress) Get(req *ProgressRequest, t *models.Type) ([]byte, error) {
 		return nil
 	})
 
-	return []byte(circular.SVG()), err
+	return []byte(circle.SVG()), err
 }
diff --git a/app/pkg/progress_handler.go b/app/pkg/progress_handler.go
@@ -23,6 +23,7 @@ type ProgressRequest struct {
 	Branch string `json:"branch" query:"branch" validate:"required,ascii" message:"ascii branch is required"`
 	Type   string `json:"type" query:"type" validate:"ascii,required,excludes=/" message:"ascii type is required"`
 	Theme  string `json:"theme" query:"theme" default:"light" validate:"oneof=light dark" message:"theme must be light or dark"`
+	Style  string `json:"style" query:"style" default:"circle" validate:"oneof=circle bar" message:"style must be circle"`
 }
 
 func (h *ProgressHandler) Get(c echo.Context) error {