GradientHarbor

Appearance

Cell Types ​

Dashboard cells are the building blocks of your layouts. There are three cell categories: query cells (tables and charts), input cells (filters), and text cells.

Query Cells ​

Query cells execute SQL against a connected database and display the results. Each query cell has a display type that controls how results are rendered.

Display Types ​

┌─────────────┬──────────────────────────────────────────┐
│ Display Type│ Best For                                 │
├─────────────┼──────────────────────────────────────────┤
│ Table       │ Detailed data, sortable rows, export     │
│ KPI         │ Single metric (revenue, count, rate)     │
│ Bar         │ Comparing values across categories       │
│ Line        │ Trends over time                         │
│ Area        │ Trends with volume emphasis              │
│ Pie         │ Proportions of a whole                   │
│ Scatter     │ Correlations between two variables       │
│ Radar       │ Multi-variable comparisons               │
│ Treemap     │ Hierarchical part-to-whole               │
└─────────────┴──────────────────────────────────────────┘

Table ​

Displays query results in a sortable, paginated grid.

Configuration options:

  • Max rows per page — Control pagination size
  • Sort column — Default sort column
  • Sort direction — Ascending or descending

Column configuration per column:

  • Type — string, number, date, or boolean (auto-detected)
  • Format — number, percentage, or currency
  • Currency — USD, EUR, GBP, JPY, CNY, and more
  • Decimal places — Precision control (0+)
  • Role — hidden to exclude from display

KPI ​

Displays a single key metric as a large, prominent number. Best for headline numbers like total revenue, active users, or conversion rate.

Example SQL:

sql
SELECT SUM(revenue) as total_revenue
FROM orders
WHERE created_at >= CURRENT_DATE - INTERVAL '30 days'

The first numeric column from the result is displayed as the KPI value. Column formatting (currency, percentage, decimal places) applies.

Charts (Bar, Line, Area, Pie, Scatter, Radar, Treemap) ​

All chart types share a common configuration:

Axis configuration:

  • X-axis column — Category or time dimension
  • X-axis label — Custom axis label
  • Y-axis label — Custom axis label
  • Show legend — Toggle legend visibility

Column roles (auto-detected or manual):

  • xAxis — The dimension/category column
  • dimension — Grouping column (creates multiple series)
  • measure — Numeric values to plot
  • hidden — Exclude from chart

Per-column styling:

  • Custom color (hex) for each series
  • Format — number, percentage, or currency display in tooltips

Trend Lines ​

Charts support overlay trend lines for data analysis:

┌─────────────────┬────────────────────────────────────┐
│ Model           │ Description                        │
├─────────────────┼────────────────────────────────────┤
│ Linear          │ Best-fit straight line (y = mx + b)│
│ Quadratic       │ Polynomial curve fit               │
│ Moving Average  │ Smoothed rolling average            │
└─────────────────┴────────────────────────────────────┘

Each trend line can be customized:

  • Line style — Solid, dashed, or dotted
  • Line width — Thickness in pixels
  • Color — Custom hex color
  • Label — Optional display label
  • Window — Window size (moving average only)

Input Cells (Filters) ​

Input cells create interactive controls that parameterize query cells. See Filters & Parameters for full details.

Text Cells ​

Text cells add static content to the dashboard — headers, descriptions, annotations, or instructions. Content supports rich text formatting.

Cell Layout ​

Cells are arranged in a 12-column grid. Each cell has a width property:

Width │ Grid Span │ Use Case
──────┼───────────┼──────────────────────
  2   │ 1/6       │ Small KPI
  3   │ 1/4       │ KPI, small filter
  4   │ 1/3       │ Standard KPI, filter
  6   │ 1/2       │ Chart, table
  8   │ 2/3       │ Wide chart
  9   │ 3/4       │ Wide table
 12   │ Full      │ Full-width table/chart

TIP

Cells narrower than half-width (< 6 columns) open the SQL editor in full-screen mode for comfortable editing.