heatmaps: part 1

website/scripts/_types.js

@@ -12,7 +12,7 @@
  *
  * @import { Color } from "./utils/colors.js"
  *
- * @import { Option, PartialChartOption, ChartOption, AnyPartialOption, ProcessedOptionAddons, OptionsTree, AnySeriesBlueprint, SeriesType, AnyFetchedSeriesBlueprint, ExplorerOption, UrlOption, PartialOptionsGroup, OptionsGroup, PartialOptionsTree, UtxoCohortObject, AddrCohortObject, CohortObject, CohortGroupObject, FetchedLineSeriesBlueprint, FetchedBaselineSeriesBlueprint, FetchedHistogramSeriesBlueprint, FetchedDotsBaselineSeriesBlueprint, PatternAll, PatternFull, PatternWithAdjusted, PatternWithPercentiles, PatternBasic, PatternBasicWithMarketCap, PatternBasicWithoutMarketCap, PatternWithoutRelative, CohortAll, CohortFull, CohortWithAdjusted, CohortWithPercentiles, CohortBasic, CohortBasicWithMarketCap, CohortBasicWithoutMarketCap, CohortWithoutRelative, CohortAddr, CohortLongTerm, CohortAgeRange, CohortAgeRangeWithMatured, CohortGroupFull, CohortGroupWithAdjusted, CohortGroupWithPercentiles, CohortGroupLongTerm, CohortGroupAgeRange, CohortGroupBasic, CohortGroupBasicWithMarketCap, CohortGroupBasicWithoutMarketCap, CohortGroupWithoutRelative, CohortGroupAddr, UtxoCohortGroupObject, AddrCohortGroupObject, FetchedDotsSeriesBlueprint, FetchedCandlestickSeriesBlueprint, FetchedPriceSeriesBlueprint, AnyPricePattern, AnyValuePattern } from "./options/partial.js"
+ * @import { Option, PartialChartOption, ChartOption, AnyPartialOption, ProcessedOptionAddons, OptionsTree, AnySeriesBlueprint, SeriesType, AnyFetchedSeriesBlueprint, ExplorerOption, UrlOption, PartialOptionsGroup, OptionsGroup, PartialOptionsTree, UtxoCohortObject, AddrCohortObject, CohortObject, CohortGroupObject, FetchedLineSeriesBlueprint, FetchedBaselineSeriesBlueprint, FetchedHistogramSeriesBlueprint, FetchedDotsBaselineSeriesBlueprint, PatternAll, PatternFull, PatternWithAdjusted, PatternWithPercentiles, PatternBasic, PatternBasicWithMarketCap, PatternBasicWithoutMarketCap, PatternWithoutRelative, CohortAll, CohortFull, CohortWithAdjusted, CohortWithPercentiles, CohortBasic, CohortBasicWithMarketCap, CohortBasicWithoutMarketCap, CohortWithoutRelative, CohortAddr, CohortLongTerm, CohortAgeRange, CohortAgeRangeWithMatured, CohortGroupFull, CohortGroupWithAdjusted, CohortGroupWithPercentiles, CohortGroupLongTerm, CohortGroupAgeRange, CohortGroupBasic, CohortGroupBasicWithMarketCap, CohortGroupBasicWithoutMarketCap, CohortGroupWithoutRelative, CohortGroupAddr, UtxoCohortGroupObject, AddrCohortGroupObject, FetchedDotsSeriesBlueprint, HeatmapOption, FetchedCandlestickSeriesBlueprint, FetchedPriceSeriesBlueprint, AnyPricePattern, AnyValuePattern } from "./options/partial.js"
  *
  *
  * @import { UnitObject as Unit } from "./utils/units.js"

website/scripts/main.js

@@ -8,6 +8,7 @@ import {
 } from "./panes/chart.js";
 import { init as initExplorer } from "./explorer/index.js";
 import { init as initSearch } from "./panes/search.js";
+import { init as initHeatmap } from "../src/heatmap/index.js";
 import { readStored, removeStored, writeToStorage } from "./utils/storage.js";
 import {
   asideElement,
@@ -20,6 +21,7 @@ import {
   navLabelElement,
   searchElement,
   layoutButtonElement,
+  heatmapElement,
   style,
 } from "./utils/elements.js";
 import { idle } from "./utils/timing.js";
@@ -125,12 +127,15 @@ function initSelected() {
 
     let previousElement = /** @type {HTMLElement | undefined} */ (undefined);
     let firstTimeLoadingChart = true;
+    let firstTimeLoadingHeatmap = true;
     let firstTimeLoadingExplorer = true;
 
     options.selected.onChange((option) => {
       /** @type {HTMLElement | undefined} */
       let element;
 
+      console.log(option);
+
       switch (option.kind) {
         case "explorer": {
           element = explorerElement;
@@ -142,7 +147,21 @@ function initSelected() {
 
           break;
         }
+        case "heatmap": {
+          console.log("heatmap");
+
+          element = heatmapElement;
+
+          if (firstTimeLoadingHeatmap) {
+            initHeatmap(option);
+          }
+          firstTimeLoadingHeatmap = false;
+
+          break;
+        }
         case "chart": {
+          console.log("chart");
+
           element = chartElement;
 
           if (firstTimeLoadingChart) {

website/scripts/options/full.js

@@ -311,6 +311,14 @@ export function initOptions() {
           option.kind = anyPartial.kind;
           option.path = [];
           option.name = name;
+        } else if ("kind" in anyPartial && anyPartial.kind === "heatmap") {
+          Object.assign(
+            option,
+            /** @satisfies {HeatmapOption} */ ({
+              ...anyPartial,
+              path,
+            }),
+          );
         } else if ("url" in anyPartial) {
           Object.assign(
             option,

website/scripts/options/partial.js

@@ -63,6 +63,7 @@ export function createPartialOptions() {
       kind: "explorer",
       title: "Explorer",
     },
+
     {
       name: "Charts",
       tree: [
@@ -295,6 +296,17 @@ export function createPartialOptions() {
       ],
     },
 
+    {
+      name: "Heatmaps",
+      tree: [
+        {
+          kind: "heatmap",
+          name: "name",
+          title: "name",
+        },
+      ],
+    },
+
     {
       name: "API",
       url: () => "/api",

website/scripts/options/types.js

@@ -104,6 +104,14 @@
  *
  * @typedef {Required<Omit<PartialChartOption, "top" | "bottom">> & ProcessedChartOptionAddons & ProcessedOptionAddons} ChartOption
  *
+ * @typedef {Object} PartialHeatmapOptionSpecific
+ * @property {"heatmap"} kind
+ * @property {string} title
+ *
+ * @typedef {PartialOption & PartialHeatmapOptionSpecific} PartialHeatmapOption
+ *
+ * @typedef {Required<PartialHeatmapOption> & ProcessedOptionAddons} HeatmapOption
+ *
  * @typedef {Object} PartialUrlOptionSpecific
  * @property {"link"} [kind]
  * @property {() => string} url
@@ -114,9 +122,9 @@
  *
  * @typedef {Required<PartialUrlOption> & ProcessedOptionAddons} UrlOption
  *
- * @typedef {PartialExplorerOption | PartialChartOption | PartialUrlOption} AnyPartialOption
+ * @typedef {PartialExplorerOption | PartialChartOption | PartialUrlOption | PartialHeatmapOption} AnyPartialOption
  *
- * @typedef {ExplorerOption | ChartOption | UrlOption} Option
+ * @typedef {ExplorerOption | ChartOption | UrlOption | HeatmapOption} Option
  *
  * @typedef {(AnyPartialOption | PartialOptionsGroup)[]} PartialOptionsTree
  *
@@ -324,7 +332,6 @@
  *
  * @typedef {UtxoCohortObject | AddrCohortObject | CohortWithoutRelative} CohortObject
  *
- *
  * @typedef {Object} AddrCohortGroupObject
  * @property {string} name
  * @property {string} title

website/scripts/utils/elements.js

@@ -11,6 +11,7 @@ export const searchElement = getElementById("search");
 export const navElement = getElementById("nav");
 export const chartElement = getElementById("chart");
 export const explorerElement = getElementById("explorer");
+export const heatmapElement = getElementById("heatmap");
 
 export const asideLabelElement = getElementById("aside-selector-label");
 export const navLabelElement = getElementById(`nav-selector-label`);