Perses Embed Example Application

Demo of Perses embedded dashboard and components functionality. See pages:

• https://perses-embed-example.vercel.app/dashboard
  • sample dashboard with core panel types (TimeSeriesChart, GaugeChart, StatChart) and custom panel plugin examples
• https://perses-embed-example.vercel.app/demo
  • custom chart component examples

Getting Started

To embed Perses dashboards, panels, and components, use the following steps:

• install @mui/material, @fontsource/lato
  • https://mui.com/material-ui/getting-started/installation/
• install Perses packages
  • npm i @perses-dev/components @perses-dev/core @perses-dev/dashboards @perses-dev/panels-plugin @perses-dev/plugin-system @perses-dev/prometheus-plugin
  • Note: CSS errors will be fixed as part of: perses/perses#894
  • see next.config.js transpilePackages to fix lodash-es, echarts ES module errors
• add Perses Providers: ChartsThemeProvider, QueryClientProvider, QueryParamProvider, PluginRegistry
• customize MUI theme (see createTheme)
• register custom plugins (see PluginLoader)
• customize ECHARTS_THEME_OVERRIDES
  • see ECharts theme builder, supported option properties

Plugin System

Custom plugin examples:

• Scatterplot panel plugin
• Image generation panel plugin (save image URLs from Replicate API)
• Image query plugin (Stable Diffusion)

Components Demo

See available components in @perses-dev/components README (Storybook support coming soon)

Note: The Perses LineChart.tsx component uses ECharts, but has a custom tooltip for improved performance. To use this component, a ChartsThemeProvider must also be used (Or else Error: No ChartsThemeContext found. Did you forget a Provider? will be thrown).