Skip to content

Commit

Permalink
Clean up
Browse files Browse the repository at this point in the history
  • Loading branch information
jacksongoode committed Aug 9, 2024
1 parent b9246f4 commit 81101a7
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 11 deletions.
40 changes: 31 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@

Render charts with [Plotly.js](https://plotly.com/javascript/).

- Export plot as an image (with specified resolution)
- Export plots image (with specified resolution and type)
- YAML/JSON support
- Automatic/manual timezone adjustment
- Apply `Data` configs across traces
- Expandable code editors
- Grafana variable substitution
- and more!
- Robust error handling
- ... and more!

[![Marketplace](https://img.shields.io/badge/dynamic/json?logo=grafana&color=F47A20&label=marketplace&prefix=v&query=%24.items%5B%3F%28%40.slug%20%3D%3D%20%22nline-plotlyjs-panel%22%29%5D.version&url=https%3A%2F%2Fgrafana.com%2Fapi%2Fplugins)](https://grafana.com/grafana/plugins/nline-plotlyjs-panel)
[![Downloads](https://img.shields.io/badge/dynamic/json?logo=grafana&color=F47A20&label=downloads&query=%24.items%5B%3F%28%40.slug%20%3D%3D%20%22nline-plotlyjs-panel%22%29%5D.downloads&url=https%3A%2F%2Fgrafana.com%2Fapi%2Fplugins)](https://grafana.com/grafana/plugins/nline-plotlyjs-panel)
Expand All @@ -17,16 +18,37 @@ Render charts with [Plotly.js](https://plotly.com/javascript/).

## Getting started

The **data**, **layout**, and **config** fields are required objects described in [Plotly's documentation](https://plotly.com/javascript/plotlyjs-function-reference/). They must be in JSON format and structured [by this schema](https://raw.githubusercontent.com/plotly/plotly.js/master/dist/plot-schema.json). However, they can be parsed and interpreted as YAML or JSON for ease of use in development. These fields are consumed by Plotly as `{ data: [traces], layout: layout, config: config }` and produce a Plotly graph within the panel.
The Plotly Panel is [nLine's](https://nline.io) attempt to have a little bit more control over how we render our analyses in Grafana. It provides a component-based approach in constructing a Plotly panel. This way you can modify static elements independently without the need to interact with dynamically through JavaScript.

### Structure

The **data**, **layout**, and **config** fields are required objects described in [Plotly's documentation](https://plotly.com/javascript/plotlyjs-function-reference/). They must be structured [by this schema](https://raw.githubusercontent.com/plotly/plotly.js/master/dist/plot-schema.json). However, they can be parsed and interpreted as YAML or JSON for ease of use in development. These fields are consumed by Plotly as `{ data: [traces], layout: layout, config: config }` and produce a Plotly graph within the panel.

Data provided by the data source can be transformed via a user-defined script before being delivered to the Plotly chart. This `script` section includes a few implicit variables that can be used:

- `data` - Data returned by the datasource query. See the example below for the object's schema.
- `variables` - Object that contains [Grafana's dashboard variables](https://grafana.com/docs/grafana/latest/variables/) available in the current dashboard (user variables as well as a few global variables: `__from`, `__to`, `__interval` and `__interval_ms`).
- `parameters` - The panel's data, layout, and config objects. This may be helpful in the case of applying static properties from the data panel (as one item rather than an array) across many traces via something like a merge.
- `timeZone` - The dashboard timezone
- `dayjs` - A [tiny timezone library](https://github.com/iamkun/dayjs)
- `matchTimezone` - A convenience function to wrap around timeseries data to convert data to the user's timezone.
#### `data`

Data returned by the datasource query. See the example below for the object's schema.

#### `variables`

Object that contains [Grafana's dashboard variables](https://grafana.com/docs/grafana/latest/variables/) available in the current dashboard (user variables as well as a few global variables: `__from`, `__to`, `__interval` and `__interval_ms`).

#### `parameters`

The panel's data, layout, and config objects. This may be helpful in the case of applying static properties from the data panel (as one item rather than an array) across many traces via something like a merge.

#### `timeZone`

The dashboard timezone

#### `dayjs`

A [tiny timezone library](https://github.com/iamkun/dayjs)

#### `matchTimezone`

A convenience function to wrap around timeseries data to convert data to the user's timezone.

The script must return an object with one or more of the following properties:

Expand Down
4 changes: 2 additions & 2 deletions src/module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel)
description: `
Script executed whenever new data is available.
Must return an object with one or more of the following properties:
data, layout, config, frames: f(data, variables){...}`,
data, layout, config, frames.`,
editor: PanelOptionCode,
category: ['Script Editor'],
settings: {
Expand All @@ -146,7 +146,7 @@ export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel)
path: 'onclick',
name: 'On-click Trigger',
description: `
Script executed when chart is clicked: f(data){...}`,
Script executed when chart is clicked.`,
editor: PanelOptionCode,
category: ['On-click Editor'],
settings: {
Expand Down

0 comments on commit 81101a7

Please sign in to comment.