clients: snapshot

websites/bitview/scripts/chart/index.js

@@ -569,6 +569,7 @@ export function createChartElement({
      * @param {AnyMetricPattern} [args.metric]
      * @param {Accessor<CandlestickData[]>} [args.data]
      * @param {number} [args.paneIndex]
+     * @param {[Color, Color]} [args.colors] - [upColor, downColor] for legend
      * @param {boolean} [args.defaultActive]
      * @param {boolean} [args.inverse]
      * @param {SetDataCallback} [args.setDataCallback]
@@ -580,24 +581,27 @@ export function createChartElement({
       unit,
       order,
       paneIndex = 0,
+      colors: customColors,
       defaultActive,
       setDataCallback,
       data,
       inverse,
       options,
     }) {
-      const green = inverse ? colors.red : colors.green;
-      const red = inverse ? colors.green : colors.red;
+      const defaultGreen = inverse ? colors.red : colors.green;
+      const defaultRed = inverse ? colors.green : colors.red;
+      const upColor = customColors?.[0] ?? defaultGreen;
+      const downColor = customColors?.[1] ?? defaultRed;
 
       /** @type {CandlestickISeries} */
       const iseries = /** @type {any} */ (
         ichart.addSeries(
           /** @type {SeriesDefinition<'Candlestick'>} */ (CandlestickSeries),
           {
-            upColor: green(),
-            downColor: red(),
-            wickUpColor: green(),
-            wickDownColor: red(),
+            upColor: upColor(),
+            downColor: downColor(),
+            wickUpColor: upColor(),
+            wickDownColor: downColor(),
             borderVisible: false,
             visible: defaultActive !== false,
             ...options,
@@ -607,7 +611,7 @@ export function createChartElement({
       );
 
       return addSeries({
-        colors: [green, red],
+        colors: [upColor, downColor],
         iseries,
         name,
         order,

websites/bitview/scripts/options/context.js

@@ -1,5 +1,6 @@
 import {
   line,
+  candlestick,
   baseline,
   histogram,
   fromBlockCount,
@@ -37,6 +38,7 @@ export function createContext({ colors, brk }) {
 
     // Series helpers
     line,
+    candlestick,
     baseline,
     histogram,
     fromBlockCount: (pattern, title, color) =>

websites/bitview/scripts/options/market/index.js

@@ -1,5 +1,6 @@
 /** Market section - Main entry point */
 
+import { localhost } from "../../utils/env.js";
 import { Unit } from "../../utils/units.js";
 import { buildAverages, createAveragesSection } from "./averages.js";
 import { createPerformanceSection } from "./performance.js";
@@ -12,8 +13,8 @@ import { createInvestingSection } from "./investing.js";
  * @returns {PartialOptionsGroup}
  */
 export function createMarketSection(ctx) {
-  const { colors, brk, line } = ctx;
-  const { market, supply } = brk.metrics;
+  const { colors, brk, line, candlestick } = ctx;
+  const { market, supply, price } = brk.metrics;
   const {
     movingAverage,
     ath,
@@ -34,6 +35,16 @@ export function createMarketSection(ctx) {
       {
         name: "Price",
         title: "Bitcoin Price",
+        ...(localhost && {
+          top: [
+            candlestick({
+              metric: price.oracle.ohlcDollars,
+              name: "Oracle",
+              unit: Unit.usd,
+              colors: [colors.cyan, colors.purple],
+            }),
+          ],
+        }),
       },
 
       // Capitalization

websites/bitview/scripts/options/series.js

@@ -24,6 +24,29 @@ export function line({ metric, name, color, defaultActive, unit, options }) {
   };
 }
 
+/**
+ * Create a Candlestick series
+ * @param {Object} args
+ * @param {AnyMetricPattern} args.metric
+ * @param {string} args.name
+ * @param {Unit} args.unit
+ * @param {[Color, Color]} [args.colors] - [upColor, downColor] for legend
+ * @param {boolean} [args.defaultActive]
+ * @param {CandlestickSeriesPartialOptions} [args.options]
+ * @returns {FetchedCandlestickSeriesBlueprint}
+ */
+export function candlestick({ metric, name, colors, defaultActive, unit, options }) {
+  return {
+    type: /** @type {const} */ ("Candlestick"),
+    metric,
+    title: name,
+    colors,
+    unit,
+    defaultActive,
+    options,
+  };
+}
+
 /**
  * Create a Baseline series
  * @param {Object} args

websites/bitview/scripts/panes/chart/index.js

@@ -293,6 +293,11 @@ export function init({
           return field;
         },
       });
+    } else {
+      // Clean up bottom pane when new option has no bottom series
+      seriesListBottom.forEach((series) => series.remove());
+      seriesListBottom.length = 0;
+      chart.legendBottom.removeFrom(0);
     }
 
     chart.addFieldsetIfNeeded({
@@ -468,7 +473,19 @@ export function init({
                   break;
                 }
                 case "Candlestick": {
-                  throw Error("TODO");
+                  seriesList.push(
+                    chart.addCandlestickSeries({
+                      metric: blueprint.metric,
+                      name: blueprint.title,
+                      unit,
+                      colors: blueprint.colors,
+                      defaultActive: blueprint.defaultActive,
+                      paneIndex,
+                      options,
+                      order,
+                    }),
+                  );
+                  break;
                 }
                 case "Line":
                 case undefined: