@forgecharts/sdk 1.1.23 → 1.1.27

package/src/react/canvas/ChartContextMenu.tsx

@@ -0,0 +1,60 @@
+/**
+ * ChartContextMenu — right-click context menu for the chart canvas.
+ *
+ * Placed at fixed (x, y) on screen. Clicking outside dismisses it via the
+ * transparent backdrop. The parent is responsible for calling onClose.
+ */
+
+type Props = {
+  x: number;
+  y: number;
+  onClose: () => void;
+  onSettings: () => void;
+  onClearDrawings: () => void;
+  onClearIndicators: () => void;
+  onResetView: () => void;
+};
+
+export function ChartContextMenu({
+  x,
+  y,
+  onClose,
+  onSettings,
+  onClearDrawings,
+  onClearIndicators,
+  onResetView,
+}: Props) {
+  return (
+    <>
+      <div className="chart-ctx-backdrop" onClick={onClose} onContextMenu={(e) => { e.preventDefault(); onClose(); }} />
+      <div className="chart-ctx-menu" style={{ left: x, top: y }}>
+        <button
+          className="chart-ctx-item"
+          onClick={() => { onSettings(); onClose(); }}
+        >
+          Settings…
+        </button>
+        <div className="chart-ctx-divider" />
+        <button
+          className="chart-ctx-item"
+          onClick={() => { onResetView(); onClose(); }}
+        >
+          Reset Chart View
+        </button>
+        <div className="chart-ctx-divider" />
+        <button
+          className="chart-ctx-item chart-ctx-item--danger"
+          onClick={() => { onClearIndicators(); onClose(); }}
+        >
+          Clear Indicators
+        </button>
+        <button
+          className="chart-ctx-item chart-ctx-item--danger"
+          onClick={() => { onClearDrawings(); onClose(); }}
+        >
+          Clear Drawings
+        </button>
+      </div>
+    </>
+  );
+}

package/src/react/canvas/ChartSettingsDialog.tsx

@@ -0,0 +1,133 @@
+/**
+ * ChartSettingsDialog — canvas settings modal.
+ *
+ * Sections (sidebar nav):
+ *  • Canvas — background color, grid visibility, grid color
+ *
+ * Additional sections can be added by extending SECTIONS and adding a matching
+ * content renderer in renderContent().
+ *
+ * The parent passes `initialSettings` and receives the final values via `onApply`.
+ * Nothing is persisted here; persistence (localStorage / DB) lives in the parent.
+ */
+
+import { useState } from 'react';
+
+export type CanvasSettings = {
+  background: string;
+  gridColor: string;
+  gridVisible: boolean;
+};
+
+type Section = 'canvas';
+
+const SECTIONS: { id: Section; label: string }[] = [
+  { id: 'canvas', label: 'Canvas' },
+];
+
+type Props = {
+  initialSettings: CanvasSettings;
+  onApply: (settings: CanvasSettings) => void;
+  onClose: () => void;
+};
+
+export function ChartSettingsDialog({ initialSettings, onApply, onClose }: Props) {
+  const [activeSection, setActiveSection] = useState<Section>('canvas');
+  const [settings, setSettings] = useState<CanvasSettings>(initialSettings);
+
+  const update = <K extends keyof CanvasSettings>(key: K, value: CanvasSettings[K]) =>
+    setSettings((prev) => ({ ...prev, [key]: value }));
+
+  const handleApply = () => {
+    onApply(settings);
+    onClose();
+  };
+
+  return (
+    <div className="csettings-backdrop" onClick={onClose}>
+      <div className="csettings-dialog" onClick={(e) => e.stopPropagation()}>
+
+        {/* ── Header ──────────────────────────────────────────────────── */}
+        <div className="csettings-header">
+          <span className="csettings-title">Chart Settings</span>
+          <button className="csettings-close" onClick={onClose} aria-label="Close">✕</button>
+        </div>
+
+        <div className="csettings-body">
+          {/* ── Sidebar ─────────────────────────────────────────────── */}
+          <nav className="csettings-sidebar">
+            {SECTIONS.map(({ id, label }) => (
+              <button
+                key={id}
+                className={`csettings-nav-item${activeSection === id ? ' is-active' : ''}`}
+                onClick={() => setActiveSection(id)}
+              >
+                {label}
+              </button>
+            ))}
+          </nav>
+
+          {/* ── Content ─────────────────────────────────────────────── */}
+          <div className="csettings-content">
+            {activeSection === 'canvas' && (
+              <div className="csettings-section">
+
+                <div className="csettings-row">
+                  <label className="csettings-label">Background</label>
+                  <div className="csettings-color-wrap">
+                    <input
+                      type="color"
+                      className="csettings-color-input"
+                      value={settings.background}
+                      onChange={(e) => update('background', e.target.value)}
+                    />
+                    <span className="csettings-color-hex">{settings.background}</span>
+                  </div>
+                </div>
+
+                <div className="csettings-row">
+                  <label className="csettings-label">Grid Lines</label>
+                  <label className="csettings-toggle">
+                    <input
+                      type="checkbox"
+                      checked={settings.gridVisible}
+                      onChange={(e) => update('gridVisible', e.target.checked)}
+                    />
+                    <span className="csettings-toggle-track" />
+                  </label>
+                </div>
+
+                {settings.gridVisible && (
+                  <div className="csettings-row">
+                    <label className="csettings-label">Grid Color</label>
+                    <div className="csettings-color-wrap">
+                      <input
+                        type="color"
+                        className="csettings-color-input"
+                        value={settings.gridColor}
+                        onChange={(e) => update('gridColor', e.target.value)}
+                      />
+                      <span className="csettings-color-hex">{settings.gridColor}</span>
+                    </div>
+                  </div>
+                )}
+
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* ── Footer ──────────────────────────────────────────────────── */}
+        <div className="csettings-footer">
+          <button className="csettings-btn csettings-btn--ghost" onClick={onClose}>
+            Cancel
+          </button>
+          <button className="csettings-btn csettings-btn--primary" onClick={handleApply}>
+            Apply
+          </button>
+        </div>
+
+      </div>
+    </div>
+  );
+}

package/src/react/canvas/IndicatorLabel.tsx

@@ -0,0 +1,347 @@
+/**
+ * IndicatorLabel — hover-menu label rendered over a chart pane.
+ *
+ * Shows the indicator display name in the top-left of a pane.
+ * On hover a gear (configure) and × (remove) button appear inline, giving the
+ * appearance that the menu is part of the label pill.
+ */
+
+import { useState } from 'react';
+import type { IndicatorConfig, IndicatorInstance } from '@forgecharts/types';
+
+// ─── Script title extractor ────────────────────────────────────────────────────
+
+function _scriptTitle(src: string): string {
+  const m = src.match(/indicator\s*\(\s*["']([^"']+)["']/);
+  return m ? m[1]! : 'Script';
+}
+
+// ─── Display name helper ──────────────────────────────────────────────────────
+
+export function indicatorDisplayName(config: IndicatorConfig): string {
+  const p = (config.params ?? {}) as Record<string, unknown>;
+  switch (config.type) {
+    case 'sma':        return `SMA(${p['period'] ?? 20})`;
+    case 'ema':        return `EMA(${p['period'] ?? 20})`;
+    case 'wma':        return `WMA(${p['period'] ?? 20})`;
+    case 'rsi':        return `RSI(${p['period'] ?? 14})`;
+    case 'macd':       return `MACD(${p['fast'] ?? 12},${p['slow'] ?? 26},${p['signal'] ?? 9})`;
+    case 'bbands':     return `BB(${p['period'] ?? 20},${p['multiplier'] ?? 2})`;
+    case 'stochastic': return `Stoch(${p['k'] ?? 14},${p['d'] ?? 3})`;
+    case 'atr':        return `ATR(${p['period'] ?? 14})`;
+    case 'obv':        return 'OBV';
+    case 'volume':     return 'Volume';
+    case 'script':     return config.script ? _scriptTitle(config.script) : 'Script';
+    default:           return (config.type as string).toUpperCase();
+  }
+}
+
+// ─── Param definitions for config dialog ─────────────────────────────────────
+
+type ParamDef = { key: string; label: string; min?: number; step?: number };
+
+const PARAM_DEFS: Record<string, ParamDef[]> = {
+  sma:        [{ key: 'period',     label: 'Period',     min: 1 }],
+  ema:        [{ key: 'period',     label: 'Period',     min: 1 }],
+  wma:        [{ key: 'period',     label: 'Period',     min: 1 }],
+  rsi:        [{ key: 'period',     label: 'Period',     min: 1 }],
+  macd:       [
+    { key: 'fast',       label: 'Fast',       min: 1 },
+    { key: 'slow',       label: 'Slow',       min: 1 },
+    { key: 'signal',     label: 'Signal',     min: 1 },
+  ],
+  bbands:     [
+    { key: 'period',     label: 'Period',     min: 1 },
+    { key: 'multiplier', label: 'Multiplier', min: 0.1, step: 0.1 },
+  ],
+  stochastic: [
+    { key: 'k',          label: 'K Period',   min: 1 },
+    { key: 'd',          label: 'D Period',   min: 1 },
+  ],
+  atr:        [{ key: 'period',     label: 'Period',     min: 1 }],
+};
+
+// ─── IndicatorLabel ────────────────────────────────────────────────────────────
+
+export function IndicatorLabel({
+  indicator,
+  color,
+  onRemove,
+  onConfigure,
+}: {
+  indicator: IndicatorInstance;
+  color?: string;
+  onRemove: () => void;
+  onConfigure: () => void;
+}) {
+  const [hovered, setHovered] = useState(false);
+  const name = indicatorDisplayName(indicator.config);
+  const hasDefs = Boolean(PARAM_DEFS[indicator.config.type]);
+
+  const btnStyle: React.CSSProperties = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 18,
+    height: '100%',
+    border: 'none',
+    borderLeft: '1px solid rgba(255,255,255,0.08)',
+    background: 'transparent',
+    color: '#787b86',
+    cursor: 'pointer',
+    fontSize: 10,
+    padding: 0,
+    lineHeight: 1,
+    flexShrink: 0,
+  };
+
+  return (
+    <div
+      style={{
+        display: 'inline-flex',
+        alignItems: 'stretch',
+        height: 18,
+        borderRadius: 3,
+        overflow: 'hidden',
+        background: 'rgba(0,0,0,0.5)',
+        cursor: 'default',
+        userSelect: 'none',
+      }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      {/* Name */}
+      <span
+        style={{
+          color: color ?? '#d1d4dc',
+          fontSize: 11,
+          fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
+          fontWeight: 500,
+          padding: '0 5px',
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        {name}
+      </span>
+
+      {/* Hover actions */}
+      {hovered && (
+        <>
+          {hasDefs && (
+            <button
+              onClick={(e) => { e.stopPropagation(); onConfigure(); }}
+              title="Configure"
+              style={btnStyle}
+            >
+              ⚙
+            </button>
+          )}
+          <button
+            onClick={(e) => { e.stopPropagation(); onRemove(); }}
+            title="Remove"
+            style={{ ...btnStyle, borderRadius: '0 3px 3px 0' }}
+          >
+            ✕
+          </button>
+        </>
+      )}
+    </div>
+  );
+}
+
+// ─── IndicatorConfigDialog ─────────────────────────────────────────────────────
+
+export function IndicatorConfigDialog({
+  indicator,
+  onSave,
+  onClose,
+}: {
+  indicator: IndicatorInstance;
+  onSave: (newConfig: IndicatorConfig) => void;
+  onClose: () => void;
+}) {
+  const defs = PARAM_DEFS[indicator.config.type] ?? [];
+  const [values, setValues] = useState<Record<string, string>>(() => {
+    const p = (indicator.config.params ?? {}) as Record<string, unknown>;
+    return Object.fromEntries(defs.map((d) => [d.key, String(p[d.key] ?? '')]));
+  });
+
+  const handleSave = () => {
+    const newParams: Record<string, number | string | boolean> = {
+      ...(indicator.config.params ?? {}),
+    };
+    for (const def of defs) {
+      const v = parseFloat(values[def.key] ?? '');
+      if (!isNaN(v)) newParams[def.key] = v;
+    }
+    onSave({ ...indicator.config, params: newParams });
+  };
+
+  const name = indicatorDisplayName(indicator.config);
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: 1000,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {/* Backdrop */}
+      <div
+        onClick={onClose}
+        style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.55)' }}
+      />
+
+      {/* Panel */}
+      <div
+        style={{
+          position: 'relative',
+          background: '#1c2030',
+          border: '1px solid #2a2e39',
+          borderRadius: 8,
+          padding: '20px 24px',
+          minWidth: 280,
+          zIndex: 1,
+          boxShadow: '0 8px 32px rgba(0,0,0,0.6)',
+        }}
+      >
+        {/* Header */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: 20,
+          }}
+        >
+          <span
+            style={{
+              color: '#d1d4dc',
+              fontSize: 14,
+              fontWeight: 600,
+              fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
+            }}
+          >
+            {name}
+          </span>
+          <button
+            onClick={onClose}
+            style={{
+              background: 'transparent',
+              border: 'none',
+              color: '#787b86',
+              cursor: 'pointer',
+              fontSize: 16,
+              lineHeight: 1,
+              padding: 0,
+            }}
+          >
+            ✕
+          </button>
+        </div>
+
+        {/* Fields */}
+        {defs.map((def) => (
+          <div key={def.key} style={{ marginBottom: 14 }}>
+            <label
+              style={{
+                display: 'block',
+                color: '#787b86',
+                fontSize: 11,
+                marginBottom: 4,
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+                fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
+              }}
+            >
+              {def.label}
+            </label>
+            <input
+              type="number"
+              value={values[def.key] ?? ''}
+              min={def.min}
+              step={def.step ?? 1}
+              onChange={(e) =>
+                setValues((v) => ({ ...v, [def.key]: e.target.value }))
+              }
+              style={{
+                width: '100%',
+                background: '#131722',
+                border: '1px solid #2a2e39',
+                borderRadius: 4,
+                padding: '6px 8px',
+                color: '#d1d4dc',
+                fontSize: 13,
+                outline: 'none',
+                boxSizing: 'border-box',
+                fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
+              }}
+            />
+          </div>
+        ))}
+
+        {defs.length === 0 && (
+          <p
+            style={{
+              color: '#787b86',
+              fontSize: 12,
+              margin: '0 0 16px',
+              fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
+            }}
+          >
+            No configurable parameters.
+          </p>
+        )}
+
+        {/* Actions */}
+        <div
+          style={{
+            display: 'flex',
+            gap: 8,
+            justifyContent: 'flex-end',
+            marginTop: defs.length > 0 ? 8 : 0,
+          }}
+        >
+          <button
+            onClick={onClose}
+            style={{
+              background: 'transparent',
+              border: '1px solid #2a2e39',
+              borderRadius: 4,
+              color: '#787b86',
+              padding: '6px 16px',
+              cursor: 'pointer',
+              fontSize: 13,
+              fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
+            }}
+          >
+            Cancel
+          </button>
+          {defs.length > 0 && (
+            <button
+              onClick={handleSave}
+              style={{
+                background: '#2962ff',
+                border: 'none',
+                borderRadius: 4,
+                color: '#fff',
+                padding: '6px 16px',
+                cursor: 'pointer',
+                fontSize: 13,
+                fontWeight: 500,
+                fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
+              }}
+            >
+              Apply
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}