website: snapshot

website/scripts/chart/index.js

@@ -1550,13 +1550,10 @@ export function createChart({ parent, id: chartId, brk, fitContent }) {
     if (!td) return;
 
     // Remove previous if any
-    td.querySelector(".scale-selector")?.remove();
+    td.querySelector(":scope > .field")?.remove();
 
     /** @type {HTMLTableCellElement} */ (td).style.position = "relative";
 
-    const wrapper = window.document.createElement("div");
-    wrapper.classList.add("scale-selector");
-
     const radios = createRadios({
       choices: /** @type {const} */ (["lin", "log"]),
       id: stringToId(`${id} ${paneIndex}`),
@@ -1570,8 +1567,7 @@ export function createChart({ parent, id: chartId, brk, fitContent }) {
         } catch {}
       },
     });
-    wrapper.append(radios);
-    td.append(wrapper);
+    td.append(radios);
   }
 
   const blueprints = {
@@ -1738,13 +1734,7 @@ export function createChart({ parent, id: chartId, brk, fitContent }) {
   /** @type {HTMLElement | null} */
   let indexField = null;
 
-  const indexWrapper = window.document.createElement("div");
-  indexWrapper.classList.add("index-selector");
-
   const lastTr = ichart.chartElement().querySelector("table > tr:last-child");
-  if (lastTr) {
-    lastTr.append(indexWrapper);
-  }
 
   const chart = {
     index,
@@ -1770,7 +1760,7 @@ export function createChart({ parent, id: chartId, brk, fitContent }) {
         choices,
         id: "index",
       });
-      indexWrapper.append(indexField);
+      if (lastTr) lastTr.append(indexField);
     },
 
     /**

website/scripts/options/distribution/valuation.js

@@ -112,7 +112,6 @@ export function createValuationSection({ cohort, title }) {
           baseline({
             metric: tree.realized.realizedPriceExtra.ratio,
             name: "MVRV",
-            color,
             unit: Unit.ratio,
             base: 1,
           }),
@@ -175,7 +174,11 @@ export function createGroupedValuationSection({ list, all, title }) {
  * @param {{ list: readonly (CohortAll | CohortFull | CohortWithPercentiles)[], all: CohortAll, title: (metric: string) => string }} args
  * @returns {PartialOptionsGroup}
  */
-export function createGroupedValuationSectionWithOwnMarketCap({ list, all, title }) {
+export function createGroupedValuationSectionWithOwnMarketCap({
+  list,
+  all,
+  title,
+}) {
   return {
     name: "Valuation",
     tree: [

website/styles/components.css

@@ -417,19 +417,33 @@ fieldset {
       }
     }
 
-    .scale-selector {
+    td:last-child > .field {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       z-index: 10;
       display: flex;
-      flex-direction: column;
-      pointer-events: none;
+      font-size: var(--font-size-xs);
+      gap: 0.25rem;
+      background-color: var(--background-color);
+      align-items: center;
+      text-transform: uppercase;
+      padding-left: 0.625rem;
+      padding-top: 0.125rem;
+      padding-bottom: 0.25rem;
+
+      label {
+        margin: -0.25rem;
+        padding: 0.25rem;
+      }
 
       &::before {
         content: "";
-        width: 100%;
+        position: absolute;
+        bottom: 100%;
+        left: 0;
+        right: 0;
         height: 2rem;
         background-image: linear-gradient(
           to bottom,
@@ -437,37 +451,9 @@ fieldset {
           var(--background-color)
         );
       }
-
-      > div:has(label) {
-        display: flex;
-        font-size: var(--font-size-xs);
-        gap: 0.25rem;
-        background-color: var(--background-color);
-        align-content: center;
-        align-items: center;
-        text-transform: uppercase;
-        padding-left: 0.625rem;
-        padding-top: 0.125rem;
-        padding-bottom: 0.25rem;
-
-        label {
-          margin: -0.25rem;
-          padding: 0.25rem;
-        }
-      }
-
-      > fieldset {
-        pointer-events: auto;
-        background-color: var(--background-color);
-        width: 100%;
-        justify-content: center;
-        padding-bottom: 0.25rem;
-        font-size: var(--font-size-xs);
-        line-height: var(--line-height-xs);
-      }
     }
 
-    .index-selector {
+    table > tr:last-child > div:has(> select) {
       position: absolute;
       left: 0;
       top: 0;
@@ -479,26 +465,22 @@ fieldset {
       font-size: var(--font-size-xs);
       line-height: var(--line-height-xs);
       text-transform: uppercase;
+      background-color: var(--background-color);
+      padding-left: var(--main-padding);
+      padding-right: 0.25rem;
+      margin-top: 0.5px;
 
-      > div {
-        background-color: var(--background-color);
-        padding-left: var(--main-padding);
-        padding-right: 0.25rem;
-        height: 100%;
-        margin-top: 1px;
-        display: flex;
-        align-items: center;
-
-        > select {
-          width: auto;
-          background: none;
-        }
+      > select {
+        width: auto;
+        background: none;
       }
 
       &::after {
         content: "";
-        height: 100%;
-        margin-top: 1px;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 100%;
         width: var(--main-padding);
         background-image: linear-gradient(
           to right,
@@ -512,7 +494,7 @@ fieldset {
       position: absolute;
       top: 0.5rem;
       right: 0.5rem;
-      z-index: 10;
+      z-index: 50;
       font-size: var(--font-size-xs);
       line-height: var(--line-height-xs);
       color: var(--off-color);

website/styles/panes/chart.css

@@ -23,6 +23,7 @@
     h1 {
       font-size: 1.375rem;
       letter-spacing: 0.05rem;
+      font-weight: 300;
     }
   }