@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
   

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

30 November 2022

• ✨ Make sure portals are scoped to component by using a unique id gene… #108
• ✨ Tooltip should have an option to format value #110
• ♻️ Rough setup to move out the logic from the line and line-group co… #103
• ✨ Introduce vitest for test #101
• ♻️ Use portal to broker for the chart legend in the lume chart compo… #97
• 📝 docs: add quick link for navigation #104
• ✨ Introduce format composable 44f50fa
• 🔥 remove jest and istanbul config files d75c882
• ♻️ Use portal to broker for the chart legend in the lume chart component #96 f8d5653