feat: improved layout

rei1024 · Oct 21, 2024 · bdb312e · bdb312e
1 parent b78313a
commit bdb312e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -77,27 +77,28 @@ <h2>
       <div id="map-box" class="box" style="display: none">
         <h2>Map</h2>
         <div>
-          <label for="map-period-select" style="user-select: none">
-            <input
-              id="map-period-select"
-              value="period"
-              name="map-type-select"
-              type="radio"
-              checked
-            />
-            Period
-          </label>
-
-          <label for="map-frequency-select" style="user-select: none">
-            <input
-              id="map-frequency-select"
-              value="frequency"
-              name="map-type-select"
-              type="radio"
-            />
-            Frequency
-          </label>
+          <span style="margin-right: 16px">
+            <label for="map-period-select" style="user-select: none">
+              <input
+                id="map-period-select"
+                value="period"
+                name="map-type-select"
+                type="radio"
+                checked
+              />
+              Period
+            </label>
 
+            <label for="map-frequency-select" style="user-select: none">
+              <input
+                id="map-frequency-select"
+                value="frequency"
+                name="map-type-select"
+                type="radio"
+              />
+              Frequency
+            </label>
+          </span>
           <label style="user-select: none" for="show-animation-checkbox">
             <input id="show-animation-checkbox" type="checkbox" checked />
             Show animation

diff --git a/src/app.ts b/src/app.ts
@@ -27,10 +27,16 @@ const frequencyList = [
 
 export function dataToColor(list: number[], data: number) {
   const index = list.findIndex((t) => t === data) ?? 0;
+  const value = index / list.length;
+
   // 80% 0.1
-  return `oklch(92% 0.35 ${(index * 360) / list.length})`;
-  // return `lch(70% 70 ${(index * 360) / list.length})`;
-  // return `hsl(${(index * 360) / list.length} 100% 70%)`;
+  return `oklch(92% 0.35 ${value * 360})`;
+  // return `lch(70% 70 ${value * 360})`;
+  // return `hsl(${value * 360} 100% 70%)`;
+
+  // Heap map
+  // const h = value * 240;
+  // return "hsl(" + h + " 100% 50%)";
 }
 
 export class App {