鲁姆

Lume是一组用于创建能讲述故事的数据可视化设计指南,以及用于执行故事的组件库的组合,为Vue应用程序所建.

说明: 轻船 两个 软件包 - 一个兼容Vue 2.7,另一个兼容Vue 3. 第二项公布为: @adyen/lume-vue3。我们的例子导入 Vue 2.7 兼容的版本,但如果您使用 Vue 3,只需更新导入名称.

设计准则(网站)

• 关于
• 开始
• 发展
• 联系人

关于

露梅有什么不一样的

得到强有力的数据可视化设计原则、准则和模式的支持
用于 SVG 渲染和反应的 Leverages Vue
第2.7和3段都有

堆栈

依赖关系

• D3.js (英语) 用于计算
• 阴道 用于渲染
• 波普尔.js (英语) 用于工具提示功能

Dev 堆栈

• 小时 软件包管理
• 维特 财务报告和审定财务报表 网络软件包 用于捆绑
• 萨斯 用于复杂/可重复使用的样式
• 类型脚本 类型检查
• 类型脚本 ESLint 折叠 (在 斯林特- 插图- vue(中文(简体) )
• 故事书 用于开发/展示组件
• 维特 单位测试

开始

安装

要安装 Lume, 请运行以下命令 :

第 2.7 号+

$ npm install @adyen/lume

第3组

$ npm install @adyen/lume-vue3

构成部分

您可以将 Lume 组件导入您的 Vue 应用程序 :

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

插件

您也可以将 Lume 导入为您在全球 Vue 设置中安装的 Vue 插件 :

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

样式

为了让Lume如愿以偿,你还需要导入它的风格.

CSS(全球)

// 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( 全球)

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

中央支助系统(SFC)

<template>...</template>

<script>
...
</script>

<!-- Main styles -->
<style src="@adyen/lume/styles"></style>
<!-- (Optional) Lume font -->
<style src="@adyen/lume/font"></style>

萨斯语( 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( 带有覆盖)

<template>...</template>

<script>
...
</script>

<!-- Main styles -->
<style lang="scss">
@use '@adyen/lume/scss' with (
  $lume-font-family: 'Times New Roman'
);
</style>

发展

您可以复制此 repo 并使用 pnpm 以安装依赖。 我们用"故事书"来发展我们的特点.

夹克

在 Docker 容器内运行应用程序 :

1. 创建一个 .env 带有 Docker 图像 URL 的文件 :

     $ echo DOCKER_IMAGE={YOUR_IMAGE_HERE} >> .env
   

2. 启动您的容器 :

     $ docker compose up -d
   

3. 附加在您的终端中 :

     $ docker attach lume
   

4. 安装 pnpm数字 :

     $ npm i -g pnpm@11
   

5. (可选,取决于您的多克图像) 将 npm 全局目录添加到 PATH 变量 :

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

关于 Vue 版本

露梅船有2个包,每个Vue版本一个(2和3).

开发是在Vue 3中完成的,同时牢记同一源代码必须在两个Vue版本上同样发挥作用,因此一些新的Vue 3 API被限制,除非提供倒置.

故事书

可通过运行以下命令提供故事本:

$ pnpm run storybook

每个图表组件都应该有自己的 .stories 文件,并将自动加载到故事本管理器.

可用加词

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

释放

要生成发布 :

1. 创建释放分支并把它推向上游:

     $ git checkout -b release-[VERSION] && git push -u origin release-[VERSION]
   

2. 运行释放命令 :

     $ npm run release
   

3. 为发布分支创建 PR .
4. 合并后再出"GitHub"发行. 这之后将在国家预防机制公布新的释放.

这将提示您使用交互的 CLI 创建新版本、 标签、 更改日志条目和发布 .

路线图

- 写好了
- 妇女信息方案
- 来做

联系人

维护者

• 戈文德·斯里尼迪 @ govind-srinidhi (英语)
• 乔奥·桑托斯 @joao-m-santos (英语)

贡献者

• 卢卡斯·范海利克胡伊曾 @卢卡斯1981
• 薇薇安·约瑟夫 @vivy27 (英语)