diff --git a/website/scripts/chart/index.js b/website/scripts/chart/index.js index 53806dd87..f225ae83d 100644 --- a/website/scripts/chart/index.js +++ b/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); }, /** diff --git a/website/scripts/options/distribution/valuation.js b/website/scripts/options/distribution/valuation.js index 0dce39a0f..b86869d2a 100644 --- a/website/scripts/options/distribution/valuation.js +++ b/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: [ diff --git a/website/styles/components.css b/website/styles/components.css index 2531e5652..730f53766 100644 --- a/website/styles/components.css +++ b/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); diff --git a/website/styles/panes/chart.css b/website/styles/panes/chart.css index 83d38d58a..233983744 100644 --- a/website/styles/panes/chart.css +++ b/website/styles/panes/chart.css @@ -23,6 +23,7 @@ h1 { font-size: 1.375rem; letter-spacing: 0.05rem; + font-weight: 300; } }