Charts

Description

Chart.js wrappers and chart card presenters for Enso UI.

Installation

Install the package:

yarn add @enso-ui/charts

This package is also available through the full enso-ui workspace bundle.

Features

• exports the low-level Chart component plus the shared color palette
• ships higher-level Bulma presenters such as ChartCard and EnsoChartCard for Enso dashboards
• registers Chart.js plugins for data labels and annotations out of the box
• supports runtime option mutation, dataset updates, SVG export, and responsive resizing

Usage

<script setup>
import { Chart, colors } from '@enso-ui/charts';

const data = {
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [{ label: 'Orders', data: [3, 7, 5], backgroundColor: colors.slice(0, 3) }],
};
</script>

<Chart type="bar" :data="data" />

API

Chart

Low-level Chart.js canvas wrapper.

Import: @enso-ui/charts

Props:

• data: object chart labels and datasets.
• display: function datalabel visibility strategy.
• shortNumbers: boolean = false enables short number formatting.
• valueFormatter: function value formatter for datalabels.
• scaleFormatter: function callback used to mutate scale config.
• options: object = {} chart options override.
• type: string one of line, bar, horizontalBar, radar, polarArea, pie, doughnut, bubble.

Methods:

• resize()
• svg()
• update()

colors

Default export palette array used by charts and cards.

Import: @enso-ui/charts

ChartCard

Bulma card wrapper around Chart that fetches its config from an HTTP source.

Import: @enso-ui/charts/src/bulma/ChartCard.vue

EnsoChartCard

Chart card variant wired to injected Enso i18n and errorHandler helpers.

Import: @enso-ui/charts/src/bulma/EnsoChartCard.vue

Companion Backend Package

• laravel-enso/charts ↗

The backend companion usually provides the HTTP endpoints and chart payloads consumed by ChartCard and EnsoChartCard.

Depends On

• @enso-ui/card ↗
• @enso-ui/directives ↗
• @enso-ui/mixins ↗
• chart.js
• chartjs-plugin-annotation
• chartjs-plugin-datalabels

Contributions

are welcome. Pull requests are great, but issues are good too.

Thank you to all the people who already contributed to Enso!

License

MIT