@adyen/lume

Lume

Lume is a library for graphical representations of information and data. By using visual elements like charts, graphs, and maps, this repository provide an accessible way to see and understand trends, outliers, and patterns in data. We use Vue to all graphic elements and rely on d3.js for the calculations.

Design guidelines (Figma)

Stack

Dependencies

• D3.js for calculations
• Vue (v2.7) for rendering
• Popper.js for tooltip functionality
• Portal Vue for portalling (not available in Vue 2)

Dev stack

• Vite and Webpack for bundling
• Sass for complex/reusable styling
• TypeScript for type checking
• TypeScript ESLint for linting (with the help of eslint-plugin-vue)
• Storybook for developing/showcasing components
• Jest for unit testing

Getting started

Installation

To install Lume, run the following command:

$ npm install @adyen/lume

Plugin

The default export of Lume is a Vue plugin that you can install in your global Vue setup:

import Vue from 'vue';
import Lume from '@adyen/lume';

import App from './my-app.vue';

Vue.use(Lume);

const app = new Vue(App).$mount('#root');

Components

If, instead of using the Vue plugin, you rather import single components as you go, you can do that as well:

// SFC <script type="ts">

import { defineComponent } from 'vue';
import { LumeBarChart } from '@adyen/lume';

export default defineComponent({
  components: { LumeBarChart },
  ...
});

Development

Quick start

Follow these steps to quickly start developing amazing data-viz components locally:

1. Clone the repo

    $ git clone [e-mail]:Adyen/lume.git
   

2. Install npm packages

   $ npm i
   

3. Run the local server

   $ npm start
   

Storybook

Storybook is available by running the following command:

$ npm run storybook

Every chart component should have its own .stories file, and it will be automatically loaded onto the Storybook manager.

Available addons

• addon-essentials
• addon-storysource
• addon-a11y

Roadmap

The charts we wish to include:

V1

• Alluvial diagram
• Bar chart
  • Single
  • Stacked
  • Grouped
  • Horizontal orientation for all
• Line chart
• Sparkline chart

Next

The following are planned for future releases:

• Violin plot
• Box plot
• Mini bar chart (Bar sparkline)

Note: Components from this list can change, so being here doesn't mean it will land on the library for sure.

Contacts

This project is currently being developed & maintained by team Lume. This includes:

• Govind Srinidhi | @govind-srinidhi
• Joao Santos | @joao-m-santos
• Lucas van Heerikhuizen | @Lucas1981
• Vivian Joseph | @vivy27

Changelog

v0.1.6

23 November 2022

• 🐛 Add chart ID to fix portal names issue #100
• ✨ Add option to control line width #98
• ♻️ Use computed properties; Sort properties b2c6d29
• ♻️ Refactor showAxes option to withAxes 3d4f5a8
• 📝 Update legacy color references to new colors 0319e04