@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
• Getting started
• Development
• Contacts

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

Components

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 },
  ...
});

Plugin

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');

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
   

Docker

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
   

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

Releasing

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.

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.2.0

18 January 2023

• 🐛 Fix axis grid lines not updating on size change #138
• 💄 Add other colors (green, orange, red) #136
• 💚 Fix vitest config #140
• 🔧 Update release config to create draft Github releases #133
• ⬆️ Update vitest monorepo to ^0.27.0 #132
• ✨ Introduce script setup #121
• ⬆️ Update dependency d3 to v7.8.0 #118
• ⬆️ Update dependency vite-plugin-static-copy to ^0.13.0 #117
• ⬆️ Update vitest monorepo to ^0.26.0 #126
• ✨ add script setup to core components 3af8d6f
• ✨ add script setup to chart components 5abe8e7
• ✅ fix failing tests b713d44