# candy-data-matrix

> 数据矩阵

Latest version **0.1.0** (published 2021-05-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install candy-data-matrix
pnpm add candy-data-matrix
yarn add candy-data-matrix
bun add candy-data-matrix
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2021-05-29 |
| First published | 2020-09-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 62.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alex.Chen |
| Maintainers | ji.chen |

## Links

- npm: https://www.npmjs.com/package/candy-data-matrix
- npm.io page: https://npm.io/package/candy-data-matrix

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Recent versions

- 0.1.0 (latest) — 2021-05-29
- 0.0.5 — 2021-02-24
- 0.0.4 — 2021-01-29
- 0.0.3 — 2020-12-16
- 0.0.2 — 2020-10-29
- 0.0.1 — 2020-09-24

## README

# CandyDataMatrix

适用于Angular项目，构建矩阵显示。

## 使用样例

安装方式

```
npm i candy-data-matrix
```

在对应module.ts中：

```ts
import {CandyDataMatrixModule} from "candy-data-matrix";

@NgModule({
  imports: [
    ...
    CandyDataMatrixModule
  ]
})
```

在html中：

```html
    <candy-data-matrix #dataMatrix
        [rowData]="rowDataList" [columnData]="columnDataList"
        [matrixMapData]="matrixMappingData" 
        [buttonContentTemplate]="btnContent" [settingsContentTemplate]="dataSelectorBtn"
        (onMatrixDataSelected)="showRuleDetailModal($event)"
    ></candy-data-matrix>
```

![example1](images/example1.png)


用户需要传入 `rowData` 和 `columnData` 对应的数据来定义第一类和第一行对应的数据，同时设定 `matrixMapData` 来定义行列两两相交时候的关系数据

`buttonContentTemplate` 对应每组数据相交的时候按钮显示的内容
`settingsContentTemplate` 对应左上角第一格的位置，可用于显示设置按钮之类的内容。

 

## 配置项

| 参数 | 说明 | 类型 | 默认值 | 例子 |
| ---- | ---- | ---- | ---- | --- |
| [rowData] | 行对应的数据 | MatrixData[] | [] | 详情请见注意项1 |
| [columnData] | 列对应的数据 | MatrixData[] | [] | 详情请见注意项1 |
| [matrixMapData] | 行列相交的对象对应的数据 | MatrixMapData[] | [] | 详情请见注意项2 |
| [buttonContentTemplate] | 行列相交的对象按钮显示的内容 | `TemplateRef<{ $implicit: data }>` | null | |
| [settingsContentTemplate] | 行列相交的对象按钮显示的内容 | `TemplateRef<void>` | null | |
| (onMatrixDataSelected) | 行列相交的对象按钮点击的时候返回的数据 | `EventEmitter<any>` | null | 详情请见注意项3 |


## 注意事项

1. `MatrixData` 类型：

   ```ts
   export class MatrixData {
     id: number;
     name: string;
     metaData: any;
     constructor(data: any, id: any, name: string) {
       this.id = id;
       this.name = name;
       this.metaData = data;
     }
   }
   ```
   其中id用于限定数据唯一性，name用于矩阵中的显示内容，metaData代表元数据。

2. `MatrixMapData` 类型：

    ```ts
   export class MatrixMapData {
     rowId: number;
     columnId: number;
     metaData: any;
     constructor(data: any, rowId: any, columnId: number) {
       this.rowId = rowId;
       this.columnId = columnId;
       this.metaData = data;
     }
   }
    ```

    `MatrixMapData` 数据用于将行列数据关联起来，`rowId`对应行数据中的id, `columnId`对应列数据中的id；`metaData`用于表示两者相关的时候所需要的元数据
   
3. 数据返回的格式为 
    ```ts
    {
      row: rowData.metaData,
      column: columnData.metaData,
      mapData: matrixMapData.metaData : null
    }
    ```

---
_Source: https://npm.io/package/candy-data-matrix · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._