Custom Components

Pre-built UI components that save time and ensure consistency across dashboards.

Component Hierarchy

ds_dash_support
├── Themes
│   ├── Looker
│   │   ├── Container ← Main layout wrapper
│   │   ├── Graph ← Plotly visualization with theme
│   │   └── Components ← Theme-specific components
│
├── Tiles
│   ├── GraphTile ← Chart with header + export
│   ├── DsTableTile ← Table with header + export
│
└── Components
    ├── DsTable ← Advanced data table
    └── Other UI components

Core Components

Container (Layout Wrapper)

from ds_dash_support.themes.looker import Container

layout = Container([
    html.H1("My Page"),
    dbc.Row([
        dbc.Col([...], lg=6),
        dbc.Col([...], lg=6),
    ]),
])

Graph (Plotly with Theme)

from ds_dash_support.themes.looker import Graph
import plotly.express as px

graph = Graph(
    id="my-chart",
    config={"displayModeBar": False},
)

@callback(Output("my-chart", "figure"))
def update():
    return px.line(df, x='year', y='value')

DsTable (Advanced Data Table)

from ds_table import DsTable

table = DsTable(
    id="my-table",
    columns=[
        {
            "accessorKey": "name",
            "header": "Name",
            "filterFn": "contains",
            "size": 200,
        },
        {
            "accessorKey": "year",
            "header": "Year",
            "size": 100,
        },
    ],
    data=[
        {"name": "Study 1", "year": 2023},
        {"name": "Study 2", "year": 2024},
    ],
)

Tile Components

GraphTile

from ds_dash_support import GraphTile
from ds_dash_support.themes.looker import Graph

my_tile = GraphTile(
    content=[Graph(id="my-chart")],
    id="my-tile",
    heading="Chart Title",
    subheading="Subtitle explaining the data",
    export_src_id="my-chart",
    image_export_filename="chart_name",
)

DsTableTile

from ds_dash_support import DsTableTile
from ds_table import DsTable

table_tile = DsTableTile(
    content=[DsTable(id="my-table", columns=[...], data=[...])],
    id="table-tile",
    heading="Data Table",
    subheading="List of important items",
    export_src_id="my-table",
)

Layout Patterns

Two Column Layout

layout = Container([
    html.H1("Dashboard Title"),
    dbc.Row([
        dbc.Col([chart_tile], lg=6),
        dbc.Col([table_tile], lg=6),
    ], className="mb-3 g-3"),
])

Responsive Layout

DsCol(
    lg=6,   # Large screens: half width
    md=12,  # Medium screens: full width
    sm=12,  # Small screens: full width
    children=[...]
)

Themes & Styling

Looker Theme

The Looker theme provides consistent colors, fonts, and spacing across the dashboard:

# In app.py
from dash import Dash
import dash_bootstrap_components as dbc

app = Dash(
    __name__,
    external_stylesheets=[
        dbc.themes.BOOTSTRAP,
        'assets/styles.css',
        'assets/dimensions_styles.css'  # Looker brand colors
    ]
)

Looker Brand Colors:

:root {
  --looker-primary: #1A73E8;      /* Looker blue */
  --looker-secondary: #34A853;    /* Green */
  --looker-warning: #FBBC04;      /* Amber */
  --looker-error: #EA4335;        /* Red */
  --looker-gray: #5F6368;         /* Gray */
  --looker-light-gray: #F8F9FA;   /* Light gray */
}

Custom Styling

Inline Styles:

DsCol(
    size=6,
    style={
        'padding': '15px',
        'backgroundColor': 'var(--looker-light-gray)',
        'borderRadius': '5px',
        'boxShadow': '0 2px 4px rgba(0,0,0,0.1)'
    },
    children=[component]
)

CSS Classes:

/* In assets/styles.css */
.dashboard-container {
    padding: 20px;
    background-color: var(--looker-light-gray);
}

.tile-container {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 15px;
}