Code Improvements (#3)

* fix: refactor color utils

Signed-off-by: Mohamed Elkholy <mkh117@gmail.com>

* fix: fix node/npm version support

Signed-off-by: Mohamed Elkholy <mkh117@gmail.com>

* fix: refactor deprecated `String.substring` method

Signed-off-by: Mohamed Elkholy <mkh117@gmail.com>

* fix: remove repo count from sidebar

Signed-off-by: Mohamed Elkholy <mkh117@gmail.com>

---------

Signed-off-by: Mohamed Elkholy <mkh117@gmail.com>

README.md

@@ -17,8 +17,8 @@ but I originally used it because Angular Material was still in alpha at the time
 
 ### Prerequisites
 
-- Node >= 18.0
-- NPM >= 10.0
+- Node >= 18.19
+- NPM >= 10.2.3
 
 ```bash
 # Clone the repo

package.json

@@ -14,8 +14,8 @@
     "url": "https://github.com/awesomehub/app.git"
   },
   "engines": {
-    "node": ">=18.0.0",
-    "npm": ">=10.0.0"
+    "node": ">=18.19.0",
+    "npm": ">=10.2.3"
   },
   "scripts": {
     "ng": "ng",

src/app/lists/components/list-categories/list-categories.component.ts

@@ -11,7 +11,7 @@ import { List, ListCategory } from '@app/lists'
         [routerLink]="['/list', list.id, category.path]"
         (click)="navigate.emit(category)"
       >
-        {{ category.title }} <span class="category-count">{{ category.count.all | number }}</span>
+        {{ category.title }}
       </a>
       <ah-list-categories [list]="list" [depth]="depth + 1" [parent]="category.id" (navigate)="navigate.emit($event)">
       </ah-list-categories>

src/app/lists/components/list-repo-card/list-repo-card.component.ts

@@ -107,6 +107,6 @@ export class ListRepoCardComponent {
   public scoreColorLegend: string[]
 
   constructor(private repoScoreService: ListRepoScoreService) {
-    this.scoreColorLegend = repoScoreService.getScoreColors()
+    this.scoreColorLegend = repoScoreService.getScoreColorTheme()
   }
 }

src/app/lists/components/list-repos/list-repos.component.ts

@@ -17,7 +17,10 @@ import { ListRepo } from '@app/lists'
   selector: 'ah-list-repos',
   styleUrls: ['list-repos.component.css'],
   template: `
-    <h3 *ngIf="heading" class="content-heading">{{ heading }}</h3>
+    <h3 *ngIf="heading" class="content-heading">
+      {{ heading }}
+      <span *ngIf="count">({{ count | number }})</span>
+    </h3>
     <div *ngIf="sortable" class="repos-sort">
       <button #sortbtn class="mdl-button mdl-js-button">
         <span [ngSwitch]="recordset.sorting.by">
@@ -69,6 +72,7 @@ export class ListReposComponent implements AfterViewInit {
   @HostBinding('class') private class = 'list-repos'
 
   @Input() heading: string
+  @Input() count: number
   @Input() sortable = false
   @Input() infinite = false
   @Input() wide = true

src/app/lists/route-components/list-all/list-all.component.ts

@@ -12,6 +12,7 @@ import { List, ListRepo } from '@app/lists'
       <ah-list-repos
         class=""
         heading="All Repositories"
+        [count]="list.entries['repo.github'].length"
         [recordset]="recordset$ | async"
         (needMore)="recordset.paginate()"
         (sort)="recordset.sort($event)"

src/app/lists/route-components/list-categories/list-categories.component.css

@@ -1,8 +1,3 @@
-.list-navigation .category-count {
-  position: absolute;
-  right: 8px;
-}
-
 .list-navigation .level-1::before,
 .list-navigation .level-2::before {
   content: ' - ';

src/app/lists/route-components/list-categories/list-categories.component.ts

@@ -22,7 +22,7 @@ import { List } from '@app/lists'
         routerLinkActive="mdl-navigation__link--current"
         [routerLink]="['/list', list.id, 'all']"
         (click)="app.toggleDrawer()"
-        >All <span class="category-count">{{ allCount | number }}</span></a
+        >All</a
       >
       <ah-list-categories [list]="list" [parent]="0" (navigate)="app.toggleDrawer()"></ah-list-categories>
     </nav>
@@ -31,9 +31,8 @@ import { List } from '@app/lists'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ListCategoriesRouteComponent extends DrawerRouteComponent {
-  public title
+  public title: string
   public list: List
-  public allCount: number
 
   constructor(
     private route: ActivatedRoute,
@@ -45,7 +44,6 @@ export class ListCategoriesRouteComponent extends DrawerRouteComponent {
     this.route.data.forEach((data: { list: List }) => {
       this.list = data.list
       this.title = this.list.name
-      this.allCount = this.list.entries['repo.github'].length
     })
   }
 }

src/app/lists/route-components/list-category/list-category.component.ts

@@ -20,6 +20,7 @@ import { List, ListCategory, ListRepo } from '@app/lists'
     <ah-content transparent="true" layout="compact">
       <ah-list-repos
         [heading]="category.title"
+        [count]="category.count.all"
         [recordset]="recordset$ | async"
         (needMore)="recordset.paginate()"
         (sort)="recordset.sort($event)"

src/app/lists/route-components/list-search/list-search.component.ts

@@ -10,7 +10,8 @@ import { List, ListRepo } from '@app/lists'
   template: `
     <ah-content transparent="true" layout="compact">
       <ah-list-repos
-        heading="Search Results ({{ (recordset$ | async).set.length }})"
+        heading="Search Results"
+        [count]="(recordset$ | async).set.length"
         [recordset]="recordset$ | async"
         (needMore)="recordset.paginate()"
         (sort)="recordset.sort($event)"

src/app/lists/services/list-repo-score/list-repo-score.service.ts

@@ -11,10 +11,10 @@ export class ListRepoScoreService {
   constructor() {
     const { p, h, a, m } = config.lists.listRepoScoreScale
     this.colorScales = {
-      p: new ColorScale(this.theme, 0, p),
-      h: new ColorScale(this.theme, 0, h),
-      a: new ColorScale(this.theme, 0, a),
-      m: new ColorScale(this.theme, 0, m),
+      p: new ColorScale(this.theme, [0, p]),
+      h: new ColorScale(this.theme, [0, h]),
+      a: new ColorScale(this.theme, [0, a]),
+      m: new ColorScale(this.theme, [0, m]),
     }
   }
 
@@ -27,23 +27,22 @@ export class ListRepoScoreService {
   }
 
   getScoreColor(type: ListRepoScoreType, score: number): { bg: string; text: string } {
-    const legend = this.getScoreColors()
     const color = this.getScoreColorScale(type).getColor(score)
     return {
       bg: color,
-      text: this.isColorBright(color) ? legend[legend.length - 2] : legend[1],
+      text: this.isColorBright(color) ? this.theme[this.theme.length - 2] : this.theme[1],
     }
   }
 
-  getScoreColors(): string[] {
+  getScoreColorTheme(): string[] {
     return this.theme
   }
 
-  isColorBright(hex: string) {
-    hex = hex.replace('#', '')
-    const r = parseInt(hex.substr(0, 2), 16),
-      g = parseInt(hex.substr(2, 2), 16),
-      b = parseInt(hex.substr(4, 2), 16)
+  isColorBright(color: string) {
+    const hex = color.substring(color.length - 6, color.length)
+    const r = parseInt(hex.substring(0, 2), 16),
+      g = parseInt(hex.substring(2, 4), 16),
+      b = parseInt(hex.substring(4, 6), 16)
 
     return 150 < (r * 299 + g * 587 + b * 114) / 1000
   }

src/app/lists/util/color/gradient.ts

@@ -0,0 +1,74 @@
+/**
+ * Class representing a color gradient.
+ */
+export class ColorGradient {
+  private readonly start: string
+  private readonly end: string
+  private readonly min: number
+  private readonly max: number
+
+  /**
+   * Constructor for creating a color gradient within a specified domain and range.
+   */
+  constructor(range: [start: string, end: string], domain: [min: number, max: number]) {
+    // Set color domain
+    if (domain[0] >= domain[1]) {
+      throw new RangeError(`'Invalid color gradient domain provided "${domain}"`)
+    }
+    this.min = domain[0]
+    this.max = domain[1]
+
+    // Set start and end colors
+    this.start = this.getHexColor(range[0])
+    this.end = this.getHexColor(range[1])
+  }
+
+  /**
+   * Computes a color value at a given position between a start and end color.
+   */
+  getColor(position: number) {
+    return (
+      '#' +
+      this.calculateHex(position, [this.start.substring(0, 2), this.end.substring(0, 2)]) +
+      this.calculateHex(position, [this.start.substring(2, 4), this.end.substring(2, 4)]) +
+      this.calculateHex(position, [this.start.substring(4, 6), this.end.substring(4, 6)])
+    )
+  }
+
+  /**
+   * Extracts the hex color code from the provided string if it is valid.
+   */
+  private getHexColor(color: string) {
+    if (!this.isHexColor(color)) {
+      throw new TypeError(`Invalid hex color provided "${color}"`)
+    }
+
+    return color.substring(color.length - 6, color.length)
+  }
+
+  /**
+   * Checks if a string is a valid hexadecimal color code.
+   */
+  private isHexColor(color: string) {
+    return /^#?[0-9a-fA-F]{6}$/i.test(color)
+  }
+
+  /**
+   * Calculates the hexadecimal string representation of a position within a given range.
+   *
+   * @param position - The position for which the hexadecimal value should be calculated.
+   * @param range - The range within which the position falls, specified as an array containing the start and end hexadecimal values.
+   *
+   * @return The calculated hexadecimal string, zero-padded if necessary to ensure it is two characters long.
+   */
+  private calculateHex(position: number, range: [start: string, end: string]) {
+    const channelPosition = Math.min(Math.max(position, this.max), this.min)
+    const numRange = this.max - this.min
+    const channelStartBase10 = parseInt(range[0], 16)
+    const channelEndBase10 = parseInt(range[1], 16)
+    const channelPerUnit = (channelEndBase10 - channelStartBase10) / numRange
+    const channelBase10 = Math.round(channelPerUnit * (channelPosition - this.min) + channelStartBase10)
+    const channel = channelBase10.toString(16)
+    return channel.length === 1 ? '0' + channel : channel
+  }
+}