{"id":22170220,"url":"https://github.com/adyen/lume","last_synced_at":"2025-04-06T08:11:58.907Z","repository":{"id":212217808,"uuid":"543113448","full_name":"Adyen/lume","owner":"Adyen","description":"Lume is a component library for visual representations of data, built for Vue with D3.","archived":false,"fork":false,"pushed_at":"2025-03-31T22:07:20.000Z","size":12000,"stargazers_count":49,"open_issues_count":29,"forks_count":5,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-04-05T16:11:45.799Z","etag":null,"topics":["alluvial","charts","d3","d3js","data-visualization","lume","sankey-diagram","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://lumedataviz.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Adyen.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-29T12:34:44.000Z","updated_at":"2025-03-25T12:42:31.000Z","dependencies_parsed_at":"2024-01-28T20:22:26.014Z","dependency_job_id":"08391de5-7142-43cd-9e4a-e978ab1c01f9","html_url":"https://github.com/Adyen/lume","commit_stats":null,"previous_names":["adyen/lume"],"tags_count":62,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adyen%2Flume","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adyen%2Flume/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adyen%2Flume/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adyen%2Flume/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Adyen","download_url":"https://codeload.github.com/Adyen/lume/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247361700,"owners_count":20926643,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alluvial","charts","d3","d3js","data-visualization","lume","sankey-diagram","vue","vuejs"],"created_at":"2024-12-02T06:39:39.100Z","updated_at":"2025-04-06T08:11:58.889Z","avatar_url":"https://github.com/Adyen.png","language":"TypeScript","readme":"# Lume\n\n[![PR workflow](https://github.com/Adyen/lume/actions/workflows/pr.yml/badge.svg)](https://github.com/Adyen/lume/actions/workflows/pr.yml)\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=Adyen_lume\u0026metric=alert_status)](https://sonarcloud.io/summary/new_code?id=Adyen_lume)\n[![MIT License](https://img.shields.io/badge/license-MIT)](https://github.com/Adyen/lume/blob/main/LICENSE)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/a6c48bc7-b4d2-4be4-ad36-cbd353ab4f07/deploy-status)](https://app.netlify.com/sites/adyen-lume/deploys)\n\nLume 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.\n\n\u003e **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.\n\n**[Design guidelines (Website)](https://lumedataviz.com/)**\n\n- [About](#about)\n- [Getting started](#getting-started)\n- [Development](#development)\n- [Contacts](#contacts)\n\n## About\n\n### What's different about Lume\n\n🧑‍🎨 Backed by strong data visualization design principles, guidelines and patterns  \n🖼️ Leverages Vue for SVG rendering and reactivity  \n📦 Available for both Vue 2.7 and 3\n\n### Stack\n\n#### Dependencies\n\n- [D3.js](https://d3js.org/) for calculations\n- [Vue](https://vuejs.org/) for rendering\n- [Popper.js](https://popper.js.org/) for tooltip functionality\n\n#### Dev stack\n\n- [pnpm](https://pnpm.io/) for package management\n- [Vite](https://vitejs.dev/) and [Webpack](https://webpack.js.org/) for bundling\n- [Sass](https://sass-lang.com/) for complex/reusable styling\n- [TypeScript](https://www.typescriptlang.org/) for type checking\n- [TypeScript ESLint](https://typescript-eslint.io/) for linting _(with the help of [eslint-plugin-vue](https://eslint.vuejs.org/))_\n- [Storybook](https://storybook.js.org/) for developing/showcasing components\n- [Vitest](https://vitest.dev/) for unit testing\n\n## Getting started\n\n### Installation\n\nTo install Lume, run the following command:\n\n#### Vue 2.7+\n\n```shell\n$ npm install @adyen/lume\n```\n\n#### Vue 3\n\n```shell\n$ npm install @adyen/lume-vue3\n```\n\n### Components\n\nYou can import Lume components to your Vue app:\n\n```ts\n// SFC \u003cscript type=\"ts\"\u003e\n\nimport { defineComponent } from 'vue';\nimport { LumeBarChart } from '@adyen/lume';\n\nexport default defineComponent({\n  components: { LumeBarChart },\n  ...\n});\n```\n\n```ts\n// Composition \u003cscript setup type=\"ts\"\u003e\n\nimport { LumeBarChart } from '@adyen/lume';\n```\n\n### Plugin\n\nYou can also import Lume as a Vue plugin that you install in your global Vue setup:\n\n```ts\nimport Vue from 'vue';\nimport LumePlugin from '@adyen/lume/plugin';\n\nimport App from './my-app.vue';\n\nVue.use(LumePlugin);\n\nconst app = new Vue(App).$mount('#root');\n```\n\n### Styles\n\nFor Lume to render as intended, you also need to import its styles.\n\n#### CSS (global)\n\n```ts\n// app/index/main.ts\nimport Vue from 'vue';\nimport App from './my-app.vue';\n\n// Main styles\nimport '@adyen/lume/styles';\n// (Optional) Lume font\nimport '@adyen/lume/font';\n\nconst app = new Vue(App).$mount('#root');\n```\n\n#### Sass (global)\n\n```ts\n// app/index/main.ts\nimport Vue from 'vue';\nimport App from './my-app.vue';\n\n// Main styles\nimport '@adyen/lume/scss';\n// (Optional) Lume font\nimport '@adyen/lume/font';\n\nconst app = new Vue(App).$mount('#root');\n```\n\n#### CSS (SFC)\n\n```vue\n\u003ctemplate\u003e...\u003c/template\u003e\n\n\u003cscript\u003e\n...\n\u003c/script\u003e\n\n\u003c!-- Main styles --\u003e\n\u003cstyle src=\"@adyen/lume/styles\"\u003e\u003c/style\u003e\n\u003c!-- (Optional) Lume font --\u003e\n\u003cstyle src=\"@adyen/lume/font\"\u003e\u003c/style\u003e\n```\n\n#### Sass (SFC)\n\n```vue\n\u003ctemplate\u003e...\u003c/template\u003e\n\n\u003cscript\u003e\n...\n\u003c/script\u003e\n\n\u003c!-- Main styles --\u003e\n\u003cstyle lang=\"scss\" src=\"@adyen/lume/scss\"\u003e\u003c/style\u003e\n\u003c!-- (Optional) Lume font --\u003e\n\u003cstyle src=\"@adyen/lume/font\"\u003e\u003c/style\u003e\n```\n\n#### Sass (with overrides)\n\n```vue\n\u003ctemplate\u003e...\u003c/template\u003e\n\n\u003cscript\u003e\n...\n\u003c/script\u003e\n\n\u003c!-- Main styles --\u003e\n\u003cstyle lang=\"scss\"\u003e\n@use '@adyen/lume/scss' with (\n  $lume-font-family: 'Times New Roman'\n);\n\u003c/style\u003e\n```\n\n## Development\n\nYou can clone this repo and use `pnpm` to install dependencies. We use Storybook to develop our features.\n\n### Docker\n\nTo run the app inside a Docker container:\n\n1. Create a `.env` file with your Docker image URL:\n   ```shell\n     $ echo DOCKER_IMAGE={YOUR_IMAGE_HERE} \u003e\u003e .env\n   ```\n2. Start your container:\n   ```shell\n     $ docker build --build-arg DOCKER_IMAGE=$(cat .env | grep DOCKER_IMAGE | cut -d '=' -f2) -t lume .\n   ```\n3. Attach to it in your terminal:\n   ```shell\n     $ docker run -it -v ./:/home/node/lume -p 9002:9002 -p 9003:9003 lume\n   ```\n\n### About Vue versions\n\nLume ships two packages, one for each Vue version (2 and 3).\n\nDevelopment 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.\n\n#### Storybook\n\nStorybook is available by running the following command:\n\n```shell\n$ pnpm run storybook\n```\n\nEvery chart component should have its own `.stories` file, and it will be automatically loaded onto the Storybook manager.\n\n##### Available addons\n\n- [`addon-essentials`](https://www.npmjs.com/package/@storybook/addon-essentials)\n- [`addon-storysource`](https://www.npmjs.com/package/@storybook/addon-storysource)\n- [`addon-a11y`](https://www.npmjs.com/package/@storybook/addon-a11y)\n\n### Releasing\n\nTo generate a release:\n\n1. Create a release branch and push it as upstream:\n   ```shell\n     $ git checkout -b release-[VERSION] \u0026\u0026 git push -u origin release-[VERSION]\n   ```\n2. Run the release command:\n   ```shell\n     $ npm run release\n   ```\n3. Create a PR for the release branch.\n4. After it's merged, publish the GitHub release. This will then publish the new release in NPM.\n\nThis will prompt you with an interactive CLI to create a new version, tag, changelog entry and release.\n\n### Roadmap\n\n| Feature                                   | Status |\n| ----------------------------------------- | ------ |\n| **Charts**                                |        |\n| Alluvial (sankey) diagram                 | ✅     |\n| Single bar chart                          | ✅     |\n| Grouped bar chart                         | ✅     |\n| Stacked bar chart                         | ✅     |\n| Horizontal orientation for all bar charts | ✅     |\n| Line chart                                | ✅     |\n| Sparkline chart                           | ✅     |\n| **Features**                              |        |\n| A11y colors                               | 🚧     |\n| A11y guidelines \u0026 impl.                   | ❌     |\n| Dark theme                                | ❌     |\n| Select dataset in legend                  | ❌     |\n\n✅ - Done  \n🚧 - WIP  \n❌ - To do\n\n## Contacts\n\n### Maintainers\n\n- Govind Srinidhi | [@govind-srinidhi](https://github.com/govind-srinidhi)\n- Joao Santos | [@joao-m-santos](https://github.com/joao-m-santos)\n\n### Contributors\n\n- Lucas van Heerikhuizen | [@Lucas1981](https://github.com/Lucas1981)\n- Vivian Joseph | [@vivy27](https://github.com/vivy27)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadyen%2Flume","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadyen%2Flume","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadyen%2Flume/lists"}