Settings & menus

import { chartSettingsSchema, readChartSettings, applyChartSettings } from 'openalgo-charts';
 
const tabs   = chartSettingsSchema(chart);   // ChartSettingsTab[]: the dialog, described
const values = readChartSettings(chart);     // { 'symbol.upColor': '#26a69a', ... }
 
applyChartSettings(chart, { 'canvas.grid.vertColor': '#223047' });   // one key is a valid patch

{ key: 'canvas.grid.lineWidth', type: 'number', label: 'Width', default: 1,
  min: 1, max: 4, step: 1, group: 'Grid' }

[x] Body      [green] [red]
[x] Borders   [green] [red]
[x] Wick      [green] [red]

{
  key: 'symbol.borders',          // names the ROW. It is not a value key.
  type: 'colorPair',
  label: 'Borders',
  group: 'Candles',
  enabled: { key: 'symbol.borderVisible', default: true },
  up:      { key: 'symbol.borderUpColor',   label: 'Up',   default: '#26a69a' },
  down:    { key: 'symbol.borderDownColor', label: 'Down', default: '#ef5350' },
}

import { chartSettingsSchema, readChartSettings, applyChartSettings } from 'openalgo-charts';
 
/**
 * One widget, tagged with the flat key it writes so the form can be read back
 * without knowing which row a field came from. A paired-colour row therefore
 * contributes three ordinary fields and nothing downstream knows the pair exists.
 */
function inputField(host, key, kind, spec, value, onChange) {
  let field;
  if (kind === 'select') {
    field = document.createElement('select');
    for (const o of spec.options) {
      const opt = document.createElement('option');
      opt.value = o.value;
      opt.textContent = o.label;
      field.appendChild(opt);
    }
    field.value = String(value);
  } else if (kind === 'boolean') {
    field = document.createElement('input');
    field.type = 'checkbox';
    field.checked = Boolean(value);
  } else if (kind === 'color') {
    field = document.createElement('input');
    field.type = 'color';
    field.className = 'swatch';          // a 26px square, never a 140px block
    field.value = String(value ?? '#000000');
  } else {
    field = document.createElement('input');
    field.type = kind === 'number' ? 'number' : 'text';
    if (kind === 'number') {
      if (spec.min !== undefined) field.min = spec.min;
      if (spec.max !== undefined) field.max = spec.max;
      if (spec.step !== undefined) field.step = spec.step;
    }
    field.value = String(value ?? '');
  }
  field.id = host.id + '_' + key;        // namespaced: two dialogs can coexist
  field.dataset.key = key;
  field.dataset.kind = kind;
  for (const ev of ['input', 'change']) {
    field.addEventListener(ev, () => onChange(key, fieldValue(field)));
  }
  return field;
}
 
const fieldValue = (f) =>
  f.dataset.kind === 'number' ? Number(f.value)
  : f.dataset.kind === 'boolean' ? f.checked
  : f.value;
 
/** Three columns: switch slot, label, control. Booleans sit in the switch slot. */
function simpleRow(host, input, values, onChange) {
  const row = document.createElement('div');
  row.className = 'set-row';
  const label = document.createElement('label');
  label.textContent = input.label;
  label.htmlFor = host.id + '_' + input.key;
  const field = inputField(host, input.key, input.type, input, values[input.key], onChange);
  if (input.type === 'boolean') {
    field.classList.add('set-sw');
    row.append(field, label);
  } else {
    const ctl = document.createElement('div');
    ctl.className = 'set-ctl';
    ctl.appendChild(field);
    row.append(label, ctl);
  }
  return row;
}
 
/** The switch, the label and both swatches on one line. */
function colorPairRow(host, input, values, onChange) {
  const row = document.createElement('div');
  row.className = 'set-row';
  if (input.enabled) {
    const sw = inputField(host, input.enabled.key, 'boolean', input.enabled,
      values[input.enabled.key], onChange);
    sw.classList.add('set-sw');
    row.appendChild(sw);
  }
  const label = document.createElement('label');
  label.textContent = input.label;
  label.htmlFor = host.id + '_' + (input.enabled ? input.enabled.key : input.up.key);
  const ctl = document.createElement('div');
  ctl.className = 'set-ctl';
  for (const half of [input.up, input.down]) {
    const sw = inputField(host, half.key, 'color', half, values[half.key], onChange);
    // Which swatch is which is not obvious at 26px and the row has no space for
    // two more labels, so the name goes on the control itself.
    sw.title = half.label;
    ctl.appendChild(sw);
  }
  row.append(label, ctl);
  return row;
}
 
/** The whole form. `input.group` becomes a small uppercase sub-heading. */
export function renderInputRows(host, inputs, values, onChange) {
  host.innerHTML = '';
  let group = null;
  for (const input of inputs) {
    if (input.group && input.group !== group) {
      group = input.group;
      const h = document.createElement('div');
      h.className = 'set-group';
      h.textContent = group;
      host.appendChild(h);
    }
    host.appendChild(input.type === 'colorPair'
      ? colorPairRow(host, input, values, onChange)
      : simpleRow(host, input, values, onChange));
  }
}

function renderChartSettings(activeTabId) {
  const tabs = chartSettingsSchema(chart);
  // Re-read on every paint. Edits apply live, so switching tabs and coming back
  // has to show what the chart is actually drawing now, not a stale snapshot.
  const values = readChartSettings(chart);
  const tab = tabs.find((t) => t.id === activeTabId) ?? tabs[0];
 
  renderTabRail(tabs, activeTabId);
  renderInputRows(document.getElementById('cset-body'), tab.inputs, values, (key, value) => {
    dirty.add(key);                                  // for Cancel, see below
    applyChartSettings(chart, { [key]: value });
  });
}

function restoreTab(tabId) {
  const tab = chartSettingsSchema(chart).find((t) => t.id === tabId);
  const patch = {};
  for (const input of tab.inputs) {
    if (input.type === 'colorPair') {
      patch[input.up.key] = input.up.default;
      patch[input.down.key] = input.down.default;
      if (input.enabled) patch[input.enabled.key] = input.enabled.default;
    } else {
      patch[input.key] = input.default;
    }
  }
  // Marked dirty so Cancel still undoes it: a restore is an edit like any other,
  // not a new baseline.
  for (const key of Object.keys(patch)) dirty.add(key);
  applyChartSettings(chart, patch);
}

const before = readChartSettings(chart);   // when the dialog opened
const dirty = new Set();                   // keys the session wrote
 
function cancel() {
  const back = {};
  for (const key of dirty) back[key] = before[key];
  applyChartSettings(chart, back);
  dirty.clear();
}

applyChartSettings(chart, {
  'navigation.mousePan': 'both',
  'navigation.defaultVisibleBars': 120,
});
readChartSettings(chart)['navigation.defaultVisibleBars'];  // 120

chart.on('contextmenu', (e) => {
  e.preventDefault();                       // suppress the browser's own menu
  showMenu(e.point, e.target, e.price);
});

interface ContextMenuTarget {
  kind: ContextMenuTargetKind;
  id: string | null;
  instanceId?: string;          // kind === 'indicator'
  seriesType?: SeriesType;      // kind === 'series'
  side?: 'right' | 'left';      // kind === 'price-scale'
  scaleId?: PriceScaleId;       // kind === 'price-scale'
}

chart.on('contextmenu', (e) => {
  e.preventDefault();
  const t = e.target;
 
  // A price ladder gets its own menu. The chart is what knows a click landed on
  // an axis strip and which scale that strip draws, so this is the one branch
  // that cannot be worked out from the pointer alone.
  if (t.kind === 'price-scale') return openAxisMenu(e.point, e.paneIndex, t);
  if (t.kind === 'indicator')   return openIndicatorSettings(t.instanceId, e.point);
  if (t.kind === 'drawing')     return openDrawingMenu(t.id, e.point);
  if (t.kind === 'time-scale')  return openChartSettings('axes');
 
  openPlotMenu(e.point, { price: e.price, time: e.time });
});

const s = chart.priceAxisState(0, 'right');   // PriceAxisState | null

// Any Partial<PriceScaleOptions>: mode, inverted, margins, tick size.
chart.setPriceAxisOptions(pane, scaleId, { mode: 'logarithmic', inverted: false });
chart.setPriceAxisAutoFit(pane, scaleId, true);
const locked = chart.setPriceAxisLockRatio(pane, scaleId, true);   // returns success
const moved  = chart.movePriceAxis(pane, 'right', 'left');         // returns success

import { PRICE_SCALE_MODES } from 'openalgo-charts';
 
// PRICE_SCALE_MODES is the engine's order. The labels and the chords are ours.
const MODE_LABEL = {
  linear: 'Linear', logarithmic: 'Logarithmic',
  percentage: 'Percent', 'indexed-to-100': 'Indexed to 100',
};
const MODE_CHORD = {
  linear: 'Alt+R', logarithmic: 'Alt+L', percentage: 'Alt+P', 'indexed-to-100': 'Alt+1',
};
const AX_MODES = PRICE_SCALE_MODES.map((value) => ({
  value, label: MODE_LABEL[value], chord: MODE_CHORD[value],
}));
 
const menu = document.getElementById('axmenu');
// Which axis the menu acts on. The main pane's price ladder until a right-click
// names another, so the keyboard chords have a target with no pointer involved.
let target = { paneIndex: 0, scaleId: 'right' };
const axisState = () => chart.priceAxisState(target.paneIndex, target.scaleId);
 
function paintAxisMenu() {
  const s = axisState();
  menu.innerHTML = '';
  if (!s) return;
  const add = (o) => menu.appendChild(axRow(o));
 
  add({ label: 'Auto-fit to the data', on: s.autoFit, chord: 'Alt+A',
        onSelect: () => run(() => chart.setPriceAxisAutoFit(s.paneIndex, s.scaleId, !s.autoFit)) });
 
  add({ label: 'Invert', on: s.inverted, chord: 'Alt+I',
        onSelect: () => run(() => chart.setPriceAxisOptions(s.paneIndex, s.scaleId, { inverted: !s.inverted })) });
 
  // Our own words for holding the price-per-bar ratio while the time axis zooms.
  // Nothing has been measured on an empty pane, so there is no ratio to hold:
  // the row stays, greyed, saying why.
  add({ label: 'Pin price per bar', on: s.lockRatio, disabled: !s.scaled,
        note: s.scaled ? '' : 'nothing measured',
        onSelect: () => run(() => chart.setPriceAxisLockRatio(s.paneIndex, s.scaleId, !s.lockRatio)) });
 
  menu.appendChild(separator());
  menu.appendChild(heading('Scale'));
  for (const m of AX_MODES) {
    add({ mark: 'radio', label: m.label, on: s.mode === m.value, chord: m.chord,
          onSelect: () => run(() => chart.setPriceAxisOptions(s.paneIndex, s.scaleId, { mode: m.value })) });
  }
 
  menu.appendChild(separator());
  add({
    label: s.side === 'right' ? 'Move the scale to the left' : 'Move the scale to the right',
    disabled: !s.movable,
    // Why a row is dead is worth a word. An empty greyed row reads as a bug.
    note: s.movable ? '' : (s.active ? 'other side taken' : 'nothing on this side'),
    onSelect: () => run(() => {
      const to = s.side === 'right' ? 'left' : 'right';
      if (chart.movePriceAxis(s.paneIndex, s.side, to)) {
        target = { paneIndex: s.paneIndex, scaleId: to };   // the menu follows the axis
      }
    }),
  });
 
  menu.appendChild(separator());
  add({ label: 'Axis settings...', onSelect: () => openChartSettings('axes') });
}
 
/** Run an axis action, then repaint whatever is on screen showing its state. */
function run(action) {
  action();
  if (!menu.hidden) paintAxisMenu();
}

function openAxisMenu(point, paneIndex, hit) {
  // `??`, never `||`: the overlay scale's id is the empty string, and `||` would
  // fall through it to the side and drive the wrong scale on a volume pane.
  target = { paneIndex, scaleId: hit.scaleId ?? hit.side ?? 'right' };
  paintAxisMenu();
  menu.hidden = false;
  place(menu, point);
}

import { PriceLevels, PRICE_LEVEL_KINDS,
         lastPriceLevelFromSeriesStyle, seriesStyleForLastPriceLevel } from 'openalgo-charts';
 
const levels = new PriceLevels({ timezone: 'Asia/Kolkata' });
chart.addPrimitive(levels, 0);
 
/** Our own words, in the order the engine lists the kinds. */
const LEVEL_LABEL = {
  previousClose: 'Previous close', sessionHigh: 'Session high', sessionLow: 'Session low',
  lastPrice: 'Last price',
  preMarketOpen: 'Pre-market open', preMarketClose: 'Pre-market close',
  postMarketOpen: 'Post-market open', postMarketClose: 'Post-market close',
  bid: 'Bid', ask: 'Ask',
};
 
/**
 * The last price is the one level the core already owns: `priceLineVisible` and
 * `lastValueVisible` are this level's two halves under older names. Letting the
 * primitive draw it as well would put two lines on one price, so the row reads
 * and writes through the series instead, in the same shape as every other row.
 */
const isLastPrice = (kind) => kind === 'lastPrice';
 
const levelStyle = (kind) => isLastPrice(kind)
  ? lastPriceLevelFromSeriesStyle(chart.primarySeriesInfo()?.style ?? {})
  : levels.level(kind);
 
function setLevelHalf(kind, half, on) {
  if (isLastPrice(kind)) {
    const next = { ...levelStyle(kind), [half]: on };
    chart.primarySeries()?.applyOptions(seriesStyleForLastPriceLevel(next));
  } else {
    levels.setLevel(kind, { [half]: on });
  }
}
 
/** `half` is 'line' (lines on the plot) or 'label' (tags on the axis). */
function paintLevelFlyout(el, half) {
  el.innerHTML = '';
  el.appendChild(heading(half === 'line' ? 'Lines on the plot' : 'Tags on the axis'));
  for (const kind of PRICE_LEVEL_KINDS) {
    const style = levelStyle(kind);
    const ok = levels.available(kind);
    el.appendChild(axRow({
      label: LEVEL_LABEL[kind],
      on: style[half] === true,
      // Disabled, not hidden. "No previous session yet" and "no live quote" are
      // information; an absent checkbox is not. The switch keeps showing state.
      disabled: !ok,
      note: ok ? '' : 'no data',
      onSelect: () => run(() => setLevelHalf(kind, half, style[half] !== true)),
    }));
  }
}