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.

Note: Lume ships two packages - one that is compatible with Vue 2.7, and another, with Vue 3. The second is published as @adyen/lume-vue3. Our examples import the Vue 2.7-compatible version, but if you're using Vue 3, just update the import name.

Design guidelines (Figma)

• Stack
• Getting started
• Development
• Contacts

• D3.js for calculations
• Vue for rendering
• Popper.js for tooltip functionality

• 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
• Vitest for unit testing

To install Lume, run the following command:

$ npm install @adyen/lume

$ npm install @adyen/lume-vue3

You can import Lume components to your Vue app:

// SFC <script type="ts">

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

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

// Composition <script setup type="ts">

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

You can also import Lume as a Vue plugin that you install in your global Vue setup:

import Vue from 'vue';
import LumePlugin from '@adyen/lume/plugin';

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

Vue.use(LumePlugin);

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

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

1. Clone the repo

    $ git clone [email protected]:Adyen/lume.git

2. Install npm packages

   $ npm i

3. Run the local server

   $ npm start

To run the app inside a Docker container:

1. Create a .env file with your Docker image URL:

     $ echo DOCKER_IMAGE={YOUR_IMAGE_HERE} >> .env

2. Start your container:

     $ docker compose up -d

3. Attach to it in your terminal:

     $ docker attach lume

4. Install pnpm:

     $ npm i -g pnpm

5. Add the npm global directory to the PATH variable:

     $ export PATH="${PATH}:/root/local/bin"

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.

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

To generate a release, run:

$ npm run release

This will prompt you with an interactive CLI to create a new version, tag, changelog entry and release.

The charts we wish to include:

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

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.

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