open-index/open-npm huggingface dataset:
npm package: @lingxiteam/dashboard
Description: @lingxiteam/dashboard
Latest version: 0.8.30-alpha.1

# 零代码-仪表盘

## 仪表盘筛选功能(2022.7.21)

筛选组件需在 `筛选容器` 下放置。每个筛选组件需要配置数据来源，实现查询字段的配置，否则筛选能力不生效。

点击查询后每个图表组件会调用数据查询的接口，重新查询数据。筛选数据配置在入参的 `attr-filterList` 下。

下拉筛选目前暂不支持多选，放到下个版本实现。前端代码先屏蔽。

### 参数含义

#### dataType

```java
/** 数据类型 字符型 */
public static final String DATA_TYPE_1000 = "1000";
/** 数据类型 数字型 */
public static final String DATA_TYPE_2000 = "2000";
/** 数据类型 时间 */
public static final String DATA_TYPE_3000 = "3000";
/** 数据类型 浮点数 */
public static final String DATA_TYPE_4000 = "4000";
/** 数据类型 数组 */
public static final String DATA_TYPE_5000 = "5000";
```

#### conditionType

条件类型: 等于-equal,区间-between

目前只支持两种条件：相同和区间。

#### aggregateType

聚合计算类型枚举,可用值:SUM,COUNT,AVERAGE,MAX,MIN,EMPTY
npm package: @lingxiteam/dform
Description: 零成本上手的移动端动态表单库。
Latest version: 4.6.1-alpha.2

# @lingxiteam/dform

零成本上手的移动端动态表单库。

## 介绍

[官网文档](https://dform.alitajs.com/)

借鉴了 `antd@4` 的 `Form` 组件，针对表单使用的 `react-component/field-form` 库进行二次封装。

## 特性

- 🚀 UI 的快速实现。
- 🎉 实现一次性全部赋值。
- 🍁 表单提交取值。
- 💄 融合多类型组件表单。
- 🌈 支持动态表单。
- 🐠 公司内部数十个项目中得到锤炼，不断优化完善。

## 组件

`dform` 共提供 `17` 种组件。涵盖：

- 文本展示类型: `text`
- 输入类型: `input` 和 `area`
- 选择类型: `picker` 和 `select`
- 多选类型: `multiplePicker` 和 `checkbox`
- 开关类型: `switch`
- 时间选择类型: `date`
- 图片选择类型: `image`
- 选择地址类型: `addressPicker`
- Radio 按钮类型: `radio` 和 `coverRadio`
- Check 多选类型: `check`
- 时间区间选择类型: `rangeDatePicker`
- 高阶输入类型: `extraInput`

如果这么多的组件还不能满足需求，不着急。我们还提供 `自定义类型: custom` 组件，让用户自己实现，并在文档中提供教程。或者给我们提个 [issues](https://github.com/alitajs/DynamicForm/issues)，我们会根据评估结果进行开发和维护。

## 快速上手

```bash
npm install @lingxiteam/dform

or

yarn add @lingxiteam/dform
```

## 提效点

### 1、`picker` 组件：

`antd-mobile-5` 提供的 `Select` 组件涵盖了及联的类型，所以 `value` 出参以 `[]` 的形式。

但是在表单对象走接口时，每个字段的值很大情况下都是 `stirng` 或者 `number` 的形式进行传递，在 `[]` 情况下，还要对数据结构进行处理。

`dform` 提供了四种选址组件:

- `picker`: 单选类型，出参为 `string` 或者 `number`，不再需要对数据结构进行多一层的转化。
- `select`: `antd-mobile-5` 上的 `Select` 组件，出参入参设值保持一致。
- `multiplePicker`: 多选，出参以 list 的形式提供。
- `addressPicker`: 选址，更是帮你大大的提效(**舒服的写业务吧，剩下的事情交给我们**)。

### 2、一行代码配置样式

不同的项目，不同的 ui 设计师，针对表单的开发样式肯定不一样，比如：

- 标题的颜色和大小
- 值的颜色和大小
- placeholder 颜色
- ...

在 `.umirc.ts` 和 `config.ts` 下配置：`theme`

![theme](https://img-blog.csdnimg.cn/20200702171633257.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI3ODk3OQ==,size_16,color_FFFFFF,t_70)

一行代码帮你解决整个项目 `dform` 样式问题。**不香吗？**

### 3、不敲一行代码帮你配置 `data` 的 JSON 数据

如果你连 `JSON` 格式的 `data` 也懒得写，那么 `isDev` 字段开启开发者模式，让你鼠标点一点就能编辑好一串 `JSON`，视频会告诉你用起来多舒服。

视频若打不开请直接点开[@lingxiteam/dform 可视化开发者模式](https://v.qq.com/x/page/u3108c1l2o8.html)链接。

<video src="https://v.qq.com/x/page/u3108c1l2o8.html" controls="controls" width="500" height="300">您的浏览器不支持播放该视频！</video>

## 可视化编辑方案

方案灵感来源于 [ava](https://github.com/antvis/ava) 的 `autoChart`，用法和触发条件一致，都是 data 为空且在开发状态的时候，显示编辑表单按钮。用户可以强制设定 `isDev` 来在任意环境中使用。

![2020-01-20 17 16 23](https://user-images.githubusercontent.com/11746742/72713840-b37bc900-3ba8-11ea-8a94-d19cdd39be53.gif)

更多详情，请点击[dform 官网](https://dform.alitajs.com/) 欢迎交流。感谢！
npm package: @lingxiteam/engine-businesscomponent
Description: ## 网络日志记录 debugPrinter.networklog/debugPrinter.networkfinish
Author: LimMem
Latest version: 4.3.2-alpha.0

# 日志管理库内置的共享topic（事件）如下，请其他模块按此要求调用：

## 网络日志记录 debugPrinter.networklog/debugPrinter.networkfinish

开始时间/结束时间会由plog库内置按照networklog或networkfinish自行处理

```javascript
// 请求发起时
LogManager.trigger('debugPrinter.networklog', {
    reqSeq, // 请求的标识,必传，当触发networkfinish时需要以此来寻找对应请求，请求标识不限格式，也可以是某个自增序列，但需要保证唯一
    url, // 网络请求地址
    options, // 本次请求的fetch设置对象，包括method、header、param这些东西，供网络工具二次处理
    cmddata: { // 如果本次网络请求是由指令发起，可以传入额外的信息（用于定位是哪条指令），非必传
        cmd, // 本条指令记录对象
        appId, // 这些ID用于定位是哪个页面
        pageId,
        busiCompId,
    }
});

// 请求完成时
LogManager.trigger('debugPrinter.networkfinish', {
    reqSeq, // 请求的标识,必传，以对应发起时的请求 
    resultData,// 请求结果的数据,
    resultCode,// 请求结果状态，'success'或'error',
});
```

## 指令系统输出错误信息 cmdplayer.errorMsg

通用。指令系统本身输出的错误信息会统一抛出该事件。具体页面运行态监听这个事件来决定是弹出错误信息弹窗还是什么

```javascript
LogManager.trigger('cmdplayer.errorMsg', { ...errorOptions });
```
npm package: @lingxiteam/engine-plog
Description: ## 网络日志记录 debugPrinter.networklog/debugPrinter.networkfinish
Author: LimMem
Latest version: 4.3.2-alpha.0

# 日志管理库内置的共享topic（事件）如下，请其他模块按此要求调用：

## 网络日志记录 debugPrinter.networklog/debugPrinter.networkfinish

开始时间/结束时间会由plog库内置按照networklog或networkfinish自行处理

```javascript
// 请求发起时
LogManager.trigger('debugPrinter.networklog', {
    reqSeq, // 请求的标识,必传，当触发networkfinish时需要以此来寻找对应请求，请求标识不限格式，也可以是某个自增序列，但需要保证唯一
    url, // 网络请求地址
    options, // 本次请求的fetch设置对象，包括method、header、param这些东西，供网络工具二次处理
    cmddata: { // 如果本次网络请求是由指令发起，可以传入额外的信息（用于定位是哪条指令），非必传
        cmd, // 本条指令记录对象
        appId, // 这些ID用于定位是哪个页面
        pageId,
        busiCompId,
    }
});

// 请求完成时
LogManager.trigger('debugPrinter.networkfinish', {
    reqSeq, // 请求的标识,必传，以对应发起时的请求 
    resultData,// 请求结果的数据,
    resultCode,// 请求结果状态，'success'或'error',
});
```

## 指令系统输出错误信息 cmdplayer.errorMsg

通用。指令系统本身输出的错误信息会统一抛出该事件。具体页面运行态监听这个事件来决定是弹出错误信息弹窗还是什么

```javascript
LogManager.trigger('cmdplayer.errorMsg', { ...errorOptions });
```

## 指令系统执行引擎日志信息 cmdplayer.engineMsg

指令系统自身执行引擎产生信息时抛出。注意，符合`cmdplayer.errorMsg`的错误信息在此处也会重复抛出一次（暂定）
指令的“打印日志”则自行处理console.log

```javascript
LogManager.trigger('cmdplayer.engineMsg', { msg: any, cmd, type: 'info'|'warning'|'error' });
```
npm package: @lingxiteam/less-theme-change-webpack-plugin
Description: A webpack plugin for dynamically modifying less vars Online
Author: coderya
Latest version: 0.0.1-alpha.19

# less-theme-change-webpack-plugin
> Refer to the antd-theme-webpack-plugin for dynamically changing less theme and based on its own business scenarios in browser (mainly used to modify less variables).

This plugin will change the `index.html` file content by inserting:

 - A script that contains init the window.less
 - A script that import the less.js
 - A link that import the less theme style file output by this plugin

 
## Install
```shell
$ npm install -D @lingxiteam/less-theme-change-webpack-plugin

or

$ yarn add -D @lingxiteam/less-theme-change-webpack-plugin
```

## Usage

### Plugin init
```js
const LessThemeChangePlugin = require('@lingxiteam/less-theme-change-webpack-plugin');

const options = {
  htmlFilePath: 'index.html',
  themeFileEntryPath: '',
  themeFileOutputPath: 'theme.txt', // .txt file is smaller than .less
  lessJsFilePath: 'https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js',
  replaceContentsMapping: {
    'the content of theme style file ready to be replaced': 'the new content',
  }
};

const LessThemeChangePluginIns = new LessThemeChangePlugin(options);
```

### Coding
```js
// for Example: modify the antd less vars
window.less.modifyVars({
  '@primay-color': '#4477ee',
  '@success-color': '#33ee33',
  // ...
});
``` 

### Options
| Property | Type | Default | Descript |
| --- | --- | --- | --- |
| htmlFilePath | string | index.html | The project html file path |
| themeFileEntryPath | string | '' | The Entry of less theme style file to be bundled |
| themeFileOutputDir | string | '' | Specify the bundled less theme style file directory for additional output |
| bundleThemeFileOnly | boolean | false | Only output the bundled less theme style file
| bundleThemeFileName | string | theme.txt | The bundled less theme style file output to dist directory by plugin |
| publicPath | string | '' | The publicPath must be set as the publicPath of the project, and will be reflected in the path of introducing the bundled less theme style file in HTML| 
| lessJsFilePath | string | https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js |  less.js cdn or file path |
| nodeModulesPath | string | '' | Specify the path where the module is located (e.g. ~antd) |
| replaceContentsMapping | object | {} | The themeStyleFile content replace mapping { [key]: value } ( key is the replaced content, value is the new content, both are string )|