website: snapshot

website/scripts/options/market/indicators/bands.js

@@ -45,17 +45,19 @@ export function createBandsSection(ctx, { range, movingAverage }) {
           },
         ].map(({ id, title, min, max }) => ({
           name: id,
-          title: `Bitcoin Price ${title} MinMax Bands`,
+          title: `${title} MinMax`,
           top: [
             line({
               metric: min,
               name: "Min",
+              key: `price-min`,
               color: colors.red,
               unit: Unit.usd,
             }),
             line({
               metric: max,
               name: "Max",
+              key: `price-max`,
               color: colors.green,
               unit: Unit.usd,
             }),

website/scripts/options/market/indicators/momentum.js

@@ -1,6 +1,7 @@
 /** Momentum indicators (RSI, StochRSI, Stochastic, MACD) */
 
 import { Unit } from "../../../utils/units.js";
+import { priceLine, priceLines } from "../../constants.js";
 import { line, histogram } from "../../series.js";
 
 /**
@@ -9,14 +10,14 @@ import { line, histogram } from "../../series.js";
  * @param {Market["indicators"]} indicators
  */
 export function createMomentumSection(ctx, indicators) {
-  const { colors, createPriceLine } = ctx;
+  const { colors } = ctx;
 
   return {
     name: "Momentum",
     tree: [
       {
         name: "RSI",
-        title: "Relative Strength Index (14d)",
+        title: "RSI (14d)",
         bottom: [
           line({
             metric: indicators.rsi14d,
@@ -38,13 +39,14 @@ export function createMomentumSection(ctx, indicators) {
             defaultActive: false,
             unit: Unit.index,
           }),
-          createPriceLine({ unit: Unit.index, number: 70 }),
-          createPriceLine({
+          priceLine({ ctx, unit: Unit.index, number: 70 }),
+          priceLine({
+            ctx,
             unit: Unit.index,
             number: 50,
             defaultActive: false,
           }),
-          createPriceLine({ unit: Unit.index, number: 30 }),
+          priceLine({ ctx, unit: Unit.index, number: 30 }),
         ],
       },
       {
@@ -69,8 +71,7 @@ export function createMomentumSection(ctx, indicators) {
             color: colors.orange,
             unit: Unit.index,
           }),
-          createPriceLine({ unit: Unit.index, number: 80 }),
-          createPriceLine({ unit: Unit.index, number: 20 }),
+          ...priceLines({ ctx, unit: Unit.index, numbers: [80, 20] }),
         ],
       },
       // {
@@ -79,13 +80,12 @@ export function createMomentumSection(ctx, indicators) {
       //   bottom: [
       //     line({ metric: indicators.stochK, name: "K", color: colors.blue, unit: Unit.index }),
       //     line({ metric: indicators.stochD, name: "D", color: colors.orange, unit: Unit.index }),
-      //     createPriceLine({ unit: Unit.index, number: 80 }),
-      //     createPriceLine({ unit: Unit.index, number: 20 }),
+      //     priceLines({ ctx, unit: Unit.index, numbers: [80, 20] }),
       //   ],
       // },
       {
         name: "MACD",
-        title: "Moving Average Convergence Divergence",
+        title: "MACD",
         bottom: [
           line({
             metric: indicators.macdLine,
@@ -104,7 +104,7 @@ export function createMomentumSection(ctx, indicators) {
             name: "Histogram",
             unit: Unit.usd,
           }),
-          createPriceLine({ unit: Unit.usd }),
+          priceLine({ ctx, unit: Unit.usd }),
         ],
       },
     ],

website/scripts/options/market/indicators/onchain.js

@@ -1,7 +1,8 @@
 /** On-chain indicators (Pi Cycle, Puell, NVT, Gini) */
 
 import { Unit } from "../../../utils/units.js";
-import { line } from "../../series.js";
+import { priceLine } from "../../constants.js";
+import { baseline, line } from "../../series.js";
 
 /**
  * Create On-chain section
@@ -11,14 +12,14 @@ import { line } from "../../series.js";
  * @param {Market["movingAverage"]} args.movingAverage
  */
 export function createOnchainSection(ctx, { indicators, movingAverage }) {
-  const { colors, createPriceLine } = ctx;
+  const { colors } = ctx;
 
   return {
     name: "On-chain",
     tree: [
       {
         name: "Pi Cycle",
-        title: "Pi Cycle Top Indicator",
+        title: "Pi Cycle",
         top: [
           line({
             metric: movingAverage.price111dSma.price,
@@ -34,13 +35,13 @@ export function createOnchainSection(ctx, { indicators, movingAverage }) {
           }),
         ],
         bottom: [
-          line({
+          baseline({
             metric: indicators.piCycle,
             name: "Pi Cycle",
-            color: colors.purple,
             unit: Unit.ratio,
+            base: 1,
           }),
-          createPriceLine({ unit: Unit.ratio, number: 1 }),
+          priceLine({ ctx, unit: Unit.ratio, number: 1 }),
         ],
       },
       {
@@ -57,7 +58,7 @@ export function createOnchainSection(ctx, { indicators, movingAverage }) {
       },
       {
         name: "NVT",
-        title: "Network Value to Transactions Ratio",
+        title: "NVT Ratio",
         bottom: [
           line({
             metric: indicators.nvt,

website/scripts/options/market/indicators/volatility.js

@@ -1,6 +1,7 @@
 /** Volatility indicators (Index, True Range, Choppiness, Sharpe, Sortino) */
 
 import { Unit } from "../../../utils/units.js";
+import { priceLine, priceLines } from "../../constants.js";
 import { line } from "../../series.js";
 
 /**
@@ -11,14 +12,14 @@ import { line } from "../../series.js";
  * @param {Market["range"]} args.range
  */
 export function createVolatilitySection(ctx, { volatility, range }) {
-  const { colors, createPriceLine } = ctx;
+  const { colors } = ctx;
 
   return {
     name: "Volatility",
     tree: [
       {
         name: "Index",
-        title: "Bitcoin Price Volatility Index",
+        title: "Volatility Index",
         bottom: [
           line({
             metric: volatility.price1wVolatility,
@@ -42,7 +43,7 @@ export function createVolatilitySection(ctx, { volatility, range }) {
       },
       {
         name: "True Range",
-        title: "Bitcoin Price True Range",
+        title: "True Range",
         bottom: [
           line({
             metric: range.priceTrueRange,
@@ -54,7 +55,7 @@ export function createVolatilitySection(ctx, { volatility, range }) {
       },
       {
         name: "Choppiness",
-        title: "Bitcoin Price Choppiness Index",
+        title: "Choppiness Index",
         bottom: [
           line({
             metric: range.price2wChoppinessIndex,
@@ -62,8 +63,7 @@ export function createVolatilitySection(ctx, { volatility, range }) {
             color: colors.red,
             unit: Unit.index,
           }),
-          createPriceLine({ unit: Unit.index, number: 61.8 }),
-          createPriceLine({ unit: Unit.index, number: 38.2 }),
+          ...priceLines({ ctx, unit: Unit.index, numbers: [61.8, 38.2] }),
         ],
       },
       {
@@ -88,7 +88,7 @@ export function createVolatilitySection(ctx, { volatility, range }) {
             color: colors.lime,
             unit: Unit.ratio,
           }),
-          createPriceLine({ unit: Unit.ratio }),
+          priceLine({ ctx, unit: Unit.ratio }),
         ],
       },
       {
@@ -113,7 +113,7 @@ export function createVolatilitySection(ctx, { volatility, range }) {
             color: colors.lime,
             unit: Unit.ratio,
           }),
-          createPriceLine({ unit: Unit.ratio }),
+          priceLine({ ctx, unit: Unit.ratio }),
         ],
       },
     ],