https://github.com/seymoe/directus-extension-sparkline-display

directus-extension-sparkline-display
https://github.com/seymoe/directus-extension-sparkline-display

Last synced: about 2 months ago
JSON representation

directus-extension-sparkline-display

• Host: GitHub
• URL: https://github.com/seymoe/directus-extension-sparkline-display
• Owner: seymoe
• License: mit
• Created: 2022-04-07T14:53:17.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-02-25T12:14:50.000Z (10 months ago)
• Last Synced: 2024-04-27T01:03:05.371Z (8 months ago)
• Language: Vue
• Size: 504 KB
• Stars: 9
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-directus - SparkLine Display - A sparkline display with `apexcharts` for Directus 9. (Extensions / Community)

README

        
# SparkLine Display - Directus extension

A directus display extension with `apexcharts`, display the data of the field as a chart.

## Installation

In your Directus installation root

```

npm install directus-extension-sparkline-display

```

Restart directus

## Usage

To use this custom display into a data model, you have to:

- Add a simple field with **JSON** type, like:

  ```

  // Array Object, should set key "power"

  [

    {

      time: '2021',

      power: 10

    },

    {

      time: '2022',

      power: 20

    }

  ]

  // Array, don't need set key.

  [ 10, 2, 10, 30 ]

  ```

- Enjoy ! 🎉

## Building locally and contributing

You can also clone this repository and build it by yourself.

```

npm i

npm run build

```

Then use `index.js` in your custom `/extensions/displays` directory or in whatever you want.