Adyen
Lume
Lume is a combination of a set of design guidelines for creating data visualizations that tell stories, and a component library that implements them, built for Vue applications.
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.
About
What's different about Lume
🧑🎨 Backed by strong data visualization design principles, guidelines and patterns
🖼️ Leverages Vue for SVG rendering and reactivity
📦 Available for both Vue 2.7 and 3
Stack
Dependencies
Dev stack
- pnpm for package management
- 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
Getting started
Installation
To install Lume, run the following command:
Vue 2.7+
$ npm install @adyen/lumeVue 3
$ npm install @adyen/lume-vue3Components
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';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');Styles
For Lume to render as intended, you also need to import its styles.
CSS (global)
// app/index/main.ts
import Vue from 'vue';
import App from './my-app.vue';
// Main styles
import '@adyen/lume/styles';
// (Optional) Lume font
import '@adyen/lume/font';
const app = new Vue(App).$mount('#root');Sass (global)
// app/index/main.ts
import Vue from 'vue';
import App from './my-app.vue';
// Main styles
import '@adyen/lume/scss';
// (Optional) Lume font
import '@adyen/lume/font';
const app = new Vue(App).$mount('#root');CSS (SFC)
<template>...</template>
<script>
...
</script>
<!-- Main styles -->
<style src="@adyen/lume/styles"></style>
<!-- (Optional) Lume font -->
<style src="@adyen/lume/font"></style>Sass (SFC)
<template>...</template>
<script>
...
</script>
<!-- Main styles -->
<style lang="scss" src="@adyen/lume/scss"></style>
<!-- (Optional) Lume font -->
<style src="@adyen/lume/font"></style>Sass (with overrides)
<template>...</template>
<script>
...
</script>
<!-- Main styles -->
<style lang="scss">
@use '@adyen/lume/scss' with (
$lume-font-family: 'Times New Roman'
);
</style>Development
You can clone this repo and use pnpm to install dependencies. We use Storybook to develop our features.
Docker
To run the app inside a Docker container:
- Create a
.envfile with your Docker image URL:$ echo DOCKER_IMAGE={YOUR_IMAGE_HERE} >> .env - Start your container:
$ docker compose up -d - Attach to it in your terminal:
$ docker attach lume - Install
pnpm:$ npm i -g pnpm - (Optional, depends on your Docker image) Add the npm global directory to the
PATHvariable:$ export PATH="${PATH}:/root/local/bin"
About Vue versions
Lume ships two packages, one for each Vue version (2 and 3).
Development is done in Vue 3, keeping in mind that the same source code must work the same way on both Vue versions, so some of the new Vue 3 APIs are restricted, unless provided with a fallback.
Storybook
Storybook is available by running the following command:
$ pnpm run storybookEvery chart component should have its own .stories file, and it will be automatically loaded onto the Storybook manager.
Available addons
Releasing
To generate a release:
- Create a release branch and push it as upstream:
$ git checkout -b release-[VERSION] && git push -u origin release-[VERSION] - Run the release command:
$ npm run release - Create a PR for the release branch.
- After it's merged, publish the GitHub release. This will then publish the new release in NPM.
This will prompt you with an interactive CLI to create a new version, tag, changelog entry and release.
Roadmap
| Feature | Status |
|---|---|
| Charts | |
| Alluvial (sankey) diagram | ✅ |
| Single bar chart | ✅ |
| Grouped bar chart | ✅ |
| Stacked bar chart | ✅ |
| Horizontal orientation for all bar charts | ✅ |
| Line chart | ✅ |
| Sparkline chart | ✅ |
| Features | |
| A11y colors | 🚧 |
| A11y guidelines & impl. | ❌ |
| Dark theme | ❌ |
| Select dataset in legend | ❌ |
✅ - Done
🚧 - WIP
❌ - To do
Contacts
Maintainers
- Govind Srinidhi | @govind-srinidhi
- Joao Santos | @joao-m-santos
Contributors
- Lucas van Heerikhuizen | @Lucas1981
- Vivian Joseph | @vivy27