Datasette plugin providing data dashboards from metadata

Try out a live demo at https://datasette-dashboards-demo.vercel.app

WARNING: this plugin is still experimental and not ready for production. Some breaking changes might happen between releases before reaching a stable version. Use it at your own risks!

Install this plugin in the same environment as Datasette:

$ datasette install datasette-dashboards

Define dashboards within metadata.yml / metadata.json:

plugins:
  datasette-dashboards:
    my-dashboard:
      title: My Dashboard
      description: Showing some nice metrics
      layout:
        - [analysis-note, events-count]
        - [analysis-note, events-source]
      filters:
        date_start:
          name: Date Start
          type: date
          default: "2021-01-01"
        date_end:
          name: Date End
          type: date
      charts:
        analysis-note:
          library: markdown
          display: |-
            # Analysis notes
            > A quick rundown of events statistics and KPIs

        events-count:
          title: Total number of events
          db: jobs
          query: SELECT count(*) as count FROM events
          library: metric
          display:
            field: count
            prefix:
            suffix:

        events-source:
          title: Number of events by source
          db: jobs
          query: SELECT source, count(*) as count FROM events WHERE TRUE [[ AND date >= date(:date_start) ]] [[ AND date <= date(:date_end) ]] GROUP BY source ORDER BY count DESC
          library: vega
          display:
            mark: { type: bar, tooltip: true }
            encoding:
              color: { field: source, type: nominal }
              theta: { field: count, type: quantitative }

A new menu entry is now available, pointing at /-/dashboards to access all defined dashboards.

Dashboard properties:

Dashboard filters:

Common chart properties for all chart types:

To define SQL queries using dashboard filters:

SELECT * FROM mytable [[ WHERE col >= :my_filter ]]

SELECT * FROM mytable WHERE TRUE [[ AND col1 = :my_filter_1 ]] [[ AND col2 = :my_filter_2 ]]

Available configuration for vega charts:

Notes about the display property:

• Requires a valid Vega specification object
• Some fields are pre-defined: $schema, title, width, view, config, data
• All fields are passed along as-is (overriding pre-defined fields if any)
• Only mark and encoding fields are required as the bare-minimum

Available configuration for markdown chart:

Note :

• Some common properties do not apply and can be omitted: title, db, query
• Markdown rendering is done by datasette-render-markdown
• To configure Markdown rendering, extensions can be enabled in metadata

Available configuration for metric chart:

Note:

• The display.field must reference a single-numerical value from the SQL query (e.g. numerical number field in SELECT count(*) as number FROM events)

The default dashboard layout will present two charts per row (one per row on mobile). To make use of custom dashboard layout using CSS Grid Layout, define the layout array property as a grid / matrix:

• Each entry represents a row of charts
• Each column is referring a chart by its property name

To set up this plugin locally, first checkout the code. Then create a new virtual environment and the required dependencies:

pipenv install -d
pipenv shell

To run the tests:

pytest

With the developmnent environment setup, you can run the demo locally:

datasette --metadata demo/metadata.yml demo/jobs.db

Licensed under Apache License, Version 2.0

Copyright (c) 2021 - present Romain Clement