Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scatter Plot Panel #63

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
50 changes: 50 additions & 0 deletions packages/scatter-plot-panel/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
# Directus Scatter Plot Panel

Present a series of X and Y cooradinates as dots on a graph. You can also group data into categories which are presented in different colors.

![Scatter Plot Panel](https://raw.githubusercontent.com/directus-labs/extensions/main/packages/scatter-plot-panel/docs/directus-panel-scatter-plot.jpg)

## Usage

The graph will be rendered within the new panel. While small, the graph won't show legends or labels. Hover over data points to reveal the value (if enabled).

If you choose to group the data into different series, a legend will appear at the bottom. Hover over a series in the legend to highlight all data for that series. You can also toggle which series are visible by clicking the series label in the legend.

You can change the following options:

- Collection Selection
- Filters
- X Axis
- Y Axis
- Group
- Color
- Axis Labels
- Tooltips

## Requirements

- Directus 10.10.0+
- Integer, BigInteger, Float, Decimal, DateTime, Date or Timestamp field for X Axis
- Integer, BigInteger, Float or Decimal field for Y Axis
- X and Y values must be in the same table

## Installation

Refer to the [Official Guide](https://docs.directus.io/extensions/installing-extensions.html) for details on installing the extension from the Marketplace or manually.

## How to add this Panel

1. Create a new Panel and select **Scatter Plot** from the list
2. Choose the collection and the fields to use for the X and Y Axis
3. (Optional) Filter the data to your scope
4. (Optional) Select the field to Group data into series
5. (Optional) Use the header to create a name for this panel
6. Save the panel and position/resize as required
7. Save the dashboard

![Customise the panel](https://raw.githubusercontent.com/directus-labs/extensions/main/packages/scatter-plot-panel/docs/directus-panel-scatter-plot-customize.jpg)


## Permissions

This extension uses the current session permissions and will only show the permitted data.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading