@cdc/dashboard

<CdcDashboard /> combines multiple visualizations into a single dashboard shell. The primary configuration reference is CONFIG.md.

Installation

npm install @cdc/dashboard

Quick Start

Use the package by passing a config object directly:

import CdcDashboard from '@cdc/dashboard'

const config = {
  type: 'dashboard',
  version: '4.26.4',
  dashboard: {
    theme: 'theme-blue',
    title: 'Dashboard Example',
    titleStyle: 'small',
    sharedFilters: []
  },
  data: [],
  rows: [
    {
      columns: [
        {
          width: 12,
          widget: 'markup-1'
        }
      ]
    }
  ],
  visualizations: {
    'markup-1': {
      type: 'markup-include',
      theme: 'theme-blue',
      contentEditor: {
        inlineHTML: '<p>Minimal dashboard example</p>',
        showHeader: true,
        srcUrl: '',
        title: 'Dashboard Example',
        useInlineHTML: true
      }
    }
  }
}

function App() {
  return <CdcDashboard config={config} />
}

export default App

Configuration

The primary reference for authoring configs is CONFIG.md.

If you are reading this in a context where relative Markdown links do not open correctly, use the GitHub copy of the dashboard config reference.

Properties

| Property | Type | Description | | --- | --- | --- | | config | object | Dashboard configuration object. Pass this or configUrl to initialize the dashboard. | | configUrl | string | URL to a JSON config file that will be fetched at runtime. |