From 81101a7d581e265febdb086e814082518455a3c7 Mon Sep 17 00:00:00 2001 From: Jackson Goode Date: Fri, 9 Aug 2024 11:37:20 -0700 Subject: [PATCH] Clean up --- README.md | 40 +++++++++++++++++++++++++++++++--------- src/module.ts | 4 ++-- 2 files changed, 33 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 92d5e45..f7d96cd 100644 --- a/README.md +++ b/README.md @@ -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) @@ -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: diff --git a/src/module.ts b/src/module.ts index dd28f99..9b0a3bd 100644 --- a/src/module.ts +++ b/src/module.ts @@ -133,7 +133,7 @@ export const plugin = new PanelPlugin(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: { @@ -146,7 +146,7 @@ export const plugin = new PanelPlugin(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: {