Dashboard Block Pattern Reference

// This source code is subject to the terms of the Mozilla Public License 2.0 at https://mozilla.org/MPL/2.0/
// © dashboard-block-pattern

//@version=6
// Runnable reference for the professional stats-dashboard + gradient-coloring
// patterns described in references/design-system.md. Copy the table.new()/
// cell() pattern into your own indicator/strategy — this file demonstrates it
// standalone so it can be previewed and lint-checked on its own.
indicator("Dashboard Block Pattern Reference", overlay=true)

// ————— Constants (see references/snippets/palette.pine for the full palette)
color BULL_COLOR    = #089981
color BEAR_COLOR    = #f23645
color TEXT_COLOR    = #d1d4dc
color MUTED_COLOR   = #b2b5be
color PANEL_COLOR   = #131722

// ————— Inputs
int  lengthInput        = input.int(14, "Length", minval=1, maxval=2000, group="Settings")
bool showDashboardInput = input.bool(true, "Show Dashboard", group="Appearance")

// ————— Function declarations
// @function One label/value row. Taking both colors as required arguments is
// what prevents a cell shipping without text_color — Pine defaults cell text to
// BLACK, which is invisible on a dark panel or a dark chart.
dashRow(table t, int row, string label, string value, color valueCol) =>
    table.cell(t, 0, row, label, text_color=MUTED_COLOR, text_size=size.small,
         text_halign=text.align_left)
    table.cell(t, 1, row, value, text_color=valueCol, text_size=size.small,
         text_halign=text.align_right)

// ————— Calculations
float maValue  = ta.sma(close, lengthInput)
float rsiValue = ta.rsi(close, lengthInput)
bool  trendUp  = close > maValue
// A gradient turns a number into a reading — but one gradient per pane is the
// limit before the chart starts looking like a heat map.
color rsiColor = color.from_gradient(rsiValue, 30, 70, BEAR_COLOR, BULL_COLOR)

// ————— Visuals
plot(maValue, "MA", color=trendUp ? BULL_COLOR : BEAR_COLOR, linewidth=2)

// Three text weights carry the hierarchy: a normal-size title, muted small
// labels, and primary-color small values. Transparency stays low (15) so the
// candles behind the panel never compete with the numbers.
var table dashboard = table.new(
     position.top_right, 2, 4,
     bgcolor=color.new(PANEL_COLOR, 15), border_width=1,
     border_color=color.new(PANEL_COLOR, 100),
     frame_color=color.new(MUTED_COLOR, 70), frame_width=1)

if showDashboardInput and barstate.islast
    table.cell(dashboard, 0, 0, "DASHBOARD", text_color=TEXT_COLOR,
         text_size=size.normal, text_halign=text.align_center)
    table.cell(dashboard, 1, 0, "", text_color=TEXT_COLOR)
    table.merge_cells(dashboard, 0, 0, 1, 0)
    dashRow(dashboard, 1, "Trend", trendUp ? "Bullish" : "Bearish",
         trendUp ? BULL_COLOR : BEAR_COLOR)
    dashRow(dashboard, 2, "MA", str.tostring(maValue, format.mintick), TEXT_COLOR)
    dashRow(dashboard, 3, "RSI", str.tostring(rsiValue, "#.#"), rsiColor)