├── .editorconfig ├── .github ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .prettierrc ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── package.json ├── src ├── attributes │ ├── base.ts │ ├── color.ts │ ├── opacity.ts │ ├── position.ts │ ├── shape.ts │ └── size.ts ├── factory.ts ├── index.ts └── interface.ts ├── tests └── unit │ ├── attrs-spec.ts │ ├── base-spec.ts │ └── index-spec.ts ├── tsconfig.json └── tslint.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | end_of_line = lf 9 | charset = utf-8 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | indent_style = space 13 | indent_size = 2 14 | 15 | [Makefile] 16 | indent_style = tab 17 | indent_size = 1 18 | 19 | [*.md] 20 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 16 | 17 | * **Link**: 18 | * **Platform**: 19 | * **Mini Showcase(like screenshots)**: 20 | 21 | 22 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 10 | 11 | ##### Checklist 12 | 13 | 14 | - [ ] `npm test` passes 15 | - [ ] tests and/or benchmarks are included 16 | - [ ] commit message follows commit guidelines 17 | 18 | ##### Description of change 19 | 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # lock 9 | package-lock.json 10 | 11 | # Runtime data 12 | pids 13 | *.pid 14 | *.seed 15 | *.pid.lock 16 | 17 | # Directory for instrumented libs generated by jscoverage/JSCover 18 | lib-cov 19 | 20 | # Coverage directory used by tools like istanbul 21 | coverage 22 | 23 | # nyc test coverage 24 | .nyc_output 25 | 26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 27 | .grunt 28 | 29 | # Bower dependency directory (https://bower.io/) 30 | bower_components 31 | 32 | # node-waf configuration 33 | .lock-wscript 34 | 35 | # Compiled binary addons (http://nodejs.org/api/addons.html) 36 | build/Release 37 | 38 | # Dependency directories 39 | node_modules/ 40 | jspm_packages/ 41 | 42 | # Typescript v1 declaration files 43 | typings/ 44 | 45 | # Optional npm cache directory 46 | .npm 47 | 48 | # Optional eslint cache 49 | .eslintcache 50 | 51 | # Optional REPL history 52 | .node_repl_history 53 | 54 | # Output of 'npm pack' 55 | *.tgz 56 | 57 | # Yarn Integrity file 58 | .yarn-integrity 59 | 60 | # dotenv environment variables file 61 | .env 62 | 63 | build 64 | dist 65 | temp 66 | .DS_Store 67 | .idea 68 | demos/assets/screenshots 69 | 70 | *.sw* 71 | *.un~ 72 | lib 73 | esm 74 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "singleQuote": true, 4 | "trailingComma": "es5", 5 | "bracketSpacing": true, 6 | "printWidth": 120, 7 | "arrowParens": "always" 8 | } 9 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - "8" 5 | 6 | env: 7 | matrix: 8 | - TEST_TYPE=ci 9 | 10 | addons: 11 | apt: 12 | packages: 13 | - xvfb 14 | 15 | install: 16 | - export DISPLAY=':99.0' 17 | - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 & 18 | - npm install 19 | 20 | script: 21 | - | 22 | if [ "$TEST_TYPE" = ci ]; then 23 | npm run test 24 | fi 25 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 0.3.1 (2020-01-10) 2 | 3 | - 使用 @antv/color-util 4 | - 测试框架迁移至 jest-electron 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 AntV team 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # @antv/attr 2 | 3 | > Mapping data to visual AES. 4 | 5 | 6 | ![](https://img.shields.io/badge/language-javascript-red.svg) 7 | ![](https://img.shields.io/badge/license-MIT-000000.svg) 8 | [![npm package](https://img.shields.io/npm/v/@antv/attr.svg)](https://www.npmjs.com/package/@antv/attr) 9 | [![NPM downloads](http://img.shields.io/npm/dm/@antv/attr.svg)](https://npmjs.org/package/@antv/attr) 10 | [![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/attr.svg)](http://isitmaintained.com/project/antvis/attr "Percentage of issues still open") 11 | 12 | 13 | ## Installing 14 | 15 | ```bash 16 | npm install @antv/attr 17 | ``` 18 | 19 | 20 | ## Usage 21 | 22 | 23 | ```js 24 | import { getAttribute } from '@antv/adjust'; 25 | 26 | // contains Color, Opacity, Position, Shape, Size 27 | const Color = getAttribute('color'); 28 | 29 | const color = new Color({/* ... */}); 30 | 31 | // mapping data to color 32 | const r = color.mapping('杭州'); 33 | ``` 34 | 35 | 36 | ## License 37 | 38 | MIT 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@antv/attr", 3 | "version": "0.3.5", 4 | "description": "The Attribute module for G2, F2.", 5 | "main": "lib/index.js", 6 | "module": "esm/index.js", 7 | "types": "lib/index.d.ts", 8 | "files": [ 9 | "src", 10 | "lib", 11 | "esm", 12 | "README.md", 13 | "LICENSE" 14 | ], 15 | "scripts": { 16 | "clean": "rimraf lib esm", 17 | "lint": "lint-staged", 18 | "test": "jest", 19 | "test-live": "DEBUG_MODE=1 jest --watch tests/unit", 20 | "coverage": "jest --coverage", 21 | "lib:cjs": "tsc -p tsconfig.json --target ES5 --module commonjs --outDir lib", 22 | "lib:esm": "tsc -p tsconfig.json --target ES5 --module ESNext --outDir esm", 23 | "lib": "run-p lib:*", 24 | "build": "run-s clean lib", 25 | "prepublishOnly": "run-s lint test build", 26 | "ci": "run-s build test", 27 | "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0" 28 | }, 29 | "dependencies": { 30 | "@antv/color-util": "^2.0.1", 31 | "@antv/scale": "^0.3.0", 32 | "@antv/util": "~2.0.0", 33 | "tslib": "^2.3.1" 34 | }, 35 | "devDependencies": { 36 | "@antv/scale": "^0.3.0", 37 | "@types/jest": "^24.0.18", 38 | "jest": "^24.9.0", 39 | "jest-electron": "^0.1.7", 40 | "jest-extended": "^0.11.2", 41 | "ts-jest": "^24.1.0", 42 | "husky": "^3.0.4", 43 | "lint-staged": "^9.2.3", 44 | "npm-run-all": "^4.1.5", 45 | "prettier": "^1.18.2", 46 | "rimraf": "^3.0.0", 47 | "tslint": "^5.18.0", 48 | "tslint-config-prettier": "^1.18.0", 49 | "typescript": "^4.1.5", 50 | "conventional-changelog-cli": "^2.0.28" 51 | }, 52 | "husky": { 53 | "hooks": { 54 | "pre-commit": "run-s lint build test" 55 | } 56 | }, 57 | "lint-staged": { 58 | "*.{js,css,json,md}": [ 59 | "prettier --write", 60 | "git add" 61 | ], 62 | "*.{ts}": [ 63 | "tslint -c tslint.json --fix", 64 | "prettier --write", 65 | "git add" 66 | ] 67 | }, 68 | "jest": { 69 | "runner": "jest-electron/runner", 70 | "testEnvironment": "jest-electron/environment", 71 | "preset": "ts-jest", 72 | "collectCoverage": false, 73 | "collectCoverageFrom": [ 74 | "src/**/*.{ts,js}", 75 | "!**/node_modules/**", 76 | "!**/vendor/**" 77 | ], 78 | "testRegex": "/tests/.*-spec\\.ts?$" 79 | }, 80 | "repository": { 81 | "type": "git", 82 | "url": "git@github.com:antvis/attr.git" 83 | }, 84 | "bugs": { 85 | "url": "https://github.com/antvis/attr/issues" 86 | }, 87 | "keywords": [ 88 | "antv", 89 | "attr", 90 | "g2", 91 | "f2" 92 | ], 93 | "author": "https://github.com/orgs/antvis/people", 94 | "license": "MIT" 95 | } 96 | -------------------------------------------------------------------------------- /src/attributes/base.ts: -------------------------------------------------------------------------------- 1 | import { each, identity, isArray, isNil, isString, mix } from '@antv/util'; 2 | import { AttributeCfg, CallbackType, Scale } from '../interface'; 3 | 4 | // todo 这个到底目的是什么？ 5 | const toScaleString = (scale: Scale, value: any): any => { 6 | if (isString(value)) { 7 | return value; 8 | } 9 | return scale.invert(scale.scale(value)); 10 | }; 11 | 12 | export type AttributeConstructor = new (cfg: any) => Attribute; 13 | 14 | /** 15 | * 所有视觉通道属性的基类 16 | * @class Base 17 | */ 18 | export default class Attribute { 19 | public type: string; 20 | public names: string[] = []; 21 | public scales: Scale[] = []; 22 | public linear: boolean = false; 23 | 24 | public values: any[] = []; 25 | 26 | constructor(cfg: AttributeCfg) { 27 | // 解析配置 28 | this._parseCfg(cfg); 29 | } 30 | public callback: CallbackType = () => []; 31 | 32 | /** 33 | * 映射的值组成的数组 34 | * @param params 对应 scale 顺序的值传入 35 | */ 36 | public mapping(...params: any[]): any[] { 37 | const values = params.map((param, idx) => { 38 | return this._toOriginParam(param, this.scales[idx]); 39 | }); 40 | 41 | return this.callback.apply(this, values); 42 | } 43 | 44 | /** 45 | * 如果进行线性映射，返回对应的映射值 46 | * @param percent 47 | */ 48 | public getLinearValue(percent: number): number | string { 49 | // 分段数量 50 | const steps = this.values.length - 1; 51 | 52 | const step = Math.floor(steps * percent); 53 | const leftPercent = steps * percent - step; 54 | 55 | // todo 不懂这个逻辑 56 | const start = this.values[step]; 57 | const end = step === steps ? start : this.values[step + 1]; 58 | 59 | // 线性方程 60 | return start + (end - start) * leftPercent; 61 | } 62 | 63 | /** 64 | * 根据度量获取属性名 65 | */ 66 | public getNames() { 67 | const scales = this.scales; 68 | const names = this.names; 69 | 70 | const length = Math.min(scales.length, names.length); 71 | const rst = []; 72 | for (let i = 0; i < length; i += 1) { 73 | rst.push(names[i]); 74 | } 75 | return rst; 76 | } 77 | 78 | /** 79 | * 获取所有的维度名 80 | */ 81 | public getFields() { 82 | return this.scales.map((scale) => scale.field); 83 | } 84 | 85 | /** 86 | * 根据名称获取度量 87 | * @param name 88 | */ 89 | public getScale(name: string) { 90 | return this.scales[this.names.indexOf(name)]; 91 | } 92 | 93 | /** 94 | * 默认的回调函数（用户没有自定义 callback，或者用户自定义 callback 返回空的时候，使用 values 映射） 95 | * @param params 96 | */ 97 | private defaultCallback(...params: any[]): any[] { 98 | // 没有 params 的情况，是指没有指定 fields，直接返回配置的 values 常量 99 | if (params.length === 0) { 100 | return this.values; 101 | } 102 | 103 | return params.map((param, idx) => { 104 | const scale = this.scales[idx]; 105 | 106 | return scale.type === 'identity' ? scale.values[0] : this._getAttributeValue(scale, param); 107 | }); 108 | } 109 | 110 | // 解析配置 111 | private _parseCfg(cfg: AttributeCfg) { 112 | const { type = 'base', names = [], scales = [], values = [], callback } = cfg; 113 | 114 | this.type = type; 115 | 116 | this.scales = scales; 117 | this.values = values; 118 | this.names = names; 119 | 120 | // 构造 callback 方法 121 | this.callback = (...params: any[]): any[] => { 122 | /** 123 | * 当用户设置的 callback 返回 null 时, 应该返回默认 callback 中的值 124 | */ 125 | if (callback) { 126 | // 使用用户返回的值处理 127 | const ret = callback(...params); 128 | if (!isNil(ret)) { 129 | return [ret]; 130 | } 131 | } 132 | 133 | // 没有 callback 或者用户 callback 返回值为空，则使用默认的逻辑处理 134 | return this.defaultCallback.apply(this, params); 135 | }; 136 | } 137 | 138 | // 获取属性值，将值映射到视觉通道 139 | private _getAttributeValue(scale: Scale, value: any) { 140 | // 如果是非线性的字段，直接从 values 中取值即可 141 | if (scale.isCategory && !this.linear) { 142 | // 离散 scale 变换成索引 143 | const idx = scale.translate(value) as number; 144 | return this.values[idx % this.values.length]; 145 | } 146 | 147 | // 线性则使用线性值 148 | const percent = scale.scale(value); 149 | return this.getLinearValue(percent); 150 | } 151 | 152 | /** 153 | * 通过 scale 拿到数据对应的原始的参数 154 | * @param param 155 | * @param scale 156 | * @private 157 | */ 158 | private _toOriginParam(param: any, scale: Scale) { 159 | // 是线性，直接返回 160 | // 非线性，使用 scale 变换 161 | return !scale.isLinear 162 | ? isArray(param) 163 | ? param.map((p: any) => toScaleString(scale, p)) 164 | : toScaleString(scale, param) 165 | : param; 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /src/attributes/color.ts: -------------------------------------------------------------------------------- 1 | import colorUtil from '@antv/color-util'; 2 | import { isString } from '@antv/util'; 3 | import { AttributeCfg } from '../interface'; 4 | import Attribute from './base'; 5 | 6 | export default class Color extends Attribute { 7 | public gradient: (percent: number) => string; 8 | 9 | constructor(cfg: AttributeCfg) { 10 | super(cfg); 11 | this.type = 'color'; 12 | this.names = ['color']; 13 | 14 | if (isString(this.values)) { 15 | this.linear = true; 16 | } 17 | 18 | this.gradient = colorUtil.gradient(this.values); 19 | } 20 | 21 | /** 22 | * @override 23 | */ 24 | public getLinearValue(percent: number): string { 25 | return this.gradient(percent); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/attributes/opacity.ts: -------------------------------------------------------------------------------- 1 | import { AttributeCfg } from '../interface'; 2 | import Attribute from './base'; 3 | 4 | export default class Opacity extends Attribute { 5 | constructor(cfg: AttributeCfg) { 6 | super(cfg); 7 | this.type = 'opacity'; 8 | this.names = ['opacity']; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/attributes/position.ts: -------------------------------------------------------------------------------- 1 | import { isArray, isNil } from '@antv/util'; 2 | import { AttributeCfg } from '../interface'; 3 | import Attribute from './base'; 4 | 5 | export type Value = number | string; 6 | export type MappingValue = Value[] | Value; 7 | 8 | export default class Position extends Attribute { 9 | constructor(cfg: AttributeCfg) { 10 | super(cfg); 11 | this.names = ['x', 'y']; 12 | this.type = 'position'; 13 | } 14 | 15 | public mapping(x: MappingValue, y: MappingValue) { 16 | const [scaleX, scaleY] = this.scales; 17 | 18 | if (isNil(x) || isNil(y)) { 19 | return []; 20 | } 21 | 22 | return [ 23 | isArray(x) ? x.map((xi) => scaleX.scale(xi)) : scaleX.scale(x), 24 | isArray(y) ? y.map((yi) => scaleY.scale(yi)) : scaleY.scale(y), 25 | ]; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/attributes/shape.ts: -------------------------------------------------------------------------------- 1 | import { AttributeCfg } from '../interface'; 2 | import Attribute from './base'; 3 | 4 | export default class Shape extends Attribute { 5 | constructor(cfg: AttributeCfg) { 6 | super(cfg); 7 | this.type = 'shape'; 8 | this.names = ['shape']; 9 | } 10 | 11 | /** 12 | * @override 13 | */ 14 | public getLinearValue(percent: number): string { 15 | const idx = Math.round((this.values.length - 1) * percent); 16 | return this.values[idx]; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/attributes/size.ts: -------------------------------------------------------------------------------- 1 | import { AttributeCfg } from '../interface'; 2 | import Attribute from './base'; 3 | 4 | export default class Size extends Attribute { 5 | constructor(cfg: AttributeCfg) { 6 | super(cfg); 7 | this.type = 'size'; 8 | this.names = ['size']; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/factory.ts: -------------------------------------------------------------------------------- 1 | import Attribute, { AttributeConstructor } from './attributes/base'; 2 | 3 | interface AttributeMapType { 4 | [key: string]: any; 5 | } 6 | 7 | // 所有的 attribute map 8 | const ATTRIBUTE_MAP: AttributeMapType = {}; 9 | 10 | /** 11 | * 通过类型获得 Attribute 类 12 | * @param type 13 | */ 14 | const getAttribute = (type: string) => { 15 | return ATTRIBUTE_MAP[type.toLowerCase()]; 16 | }; 17 | 18 | const registerAttribute = (type: string, ctor: AttributeConstructor) => { 19 | // 注册的时候，需要校验 type 重名，不区分大小写 20 | if (getAttribute(type)) { 21 | throw new Error(`Attribute type '${type}' existed.`); 22 | } 23 | // 存储到 map 中 24 | ATTRIBUTE_MAP[type.toLowerCase()] = ctor; 25 | }; 26 | 27 | export { getAttribute, registerAttribute, Attribute }; 28 | export * from './interface'; 29 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import Attribute from './attributes/base'; 2 | 3 | import Color from './attributes/color'; 4 | import Opacity from './attributes/opacity'; 5 | import Position from './attributes/position'; 6 | import Shape from './attributes/shape'; 7 | import Size from './attributes/size'; 8 | 9 | import { getAttribute, registerAttribute } from './factory'; 10 | 11 | registerAttribute('Color', Color); 12 | registerAttribute('Opacity', Opacity); 13 | registerAttribute('Position', Position); 14 | registerAttribute('Shape', Shape); 15 | registerAttribute('Size', Size); 16 | 17 | export { 18 | registerAttribute, 19 | getAttribute, 20 | Attribute, 21 | // 以下 export 是为了兼容，理论上是不需要的 22 | Color, 23 | Opacity, 24 | Position, 25 | Shape, 26 | Size, 27 | }; 28 | 29 | export * from './interface'; 30 | -------------------------------------------------------------------------------- /src/interface.ts: -------------------------------------------------------------------------------- 1 | import { Scale } from '@antv/scale'; 2 | 3 | export { Scale }; 4 | 5 | export type CallbackType = (...args) => any[]; 6 | 7 | export interface AttributeCfg { 8 | readonly type?: string; 9 | readonly scales: Scale[]; 10 | readonly values?: any; 11 | readonly callback?: CallbackType; 12 | readonly names?: string[]; 13 | } 14 | -------------------------------------------------------------------------------- /tests/unit/attrs-spec.ts: -------------------------------------------------------------------------------- 1 | import { getScale } from '@antv/scale'; 2 | import * as Attr from '../../src'; 3 | 4 | const Identity = getScale('identity'); 5 | const Category = getScale('category'); 6 | const Linear = getScale('linear'); 7 | 8 | describe('attr test color', () => { 9 | const scaleIdentity = new Identity({ 10 | field: 'type', 11 | values: ['red'], 12 | }); 13 | 14 | const scaleCat = new Category({ 15 | field: 'type', 16 | values: ['a', 'b', 'c', 'd'], 17 | }); 18 | 19 | const scaleLinear = new Linear({ 20 | field: 'age', 21 | min: 0, 22 | max: 10, 23 | }); 24 | 25 | describe('no callback category', () => { 26 | const color = new Attr.Color({ 27 | scales: [scaleCat, scaleLinear], 28 | values: ['c1', 'c2', 'c3'], 29 | }); 30 | it('init', () => { 31 | expect(color.type).toBe('color'); 32 | expect(color.getNames()).toEqual(['color']); 33 | }); 34 | 35 | it('mapping', () => { 36 | expect(color.mapping('a')[0]).toBe('c1'); 37 | expect(color.mapping('b')[0]).toBe('c2'); 38 | expect(color.mapping('c')[0]).toBe('c3'); 39 | expect(color.mapping('d')[0]).toBe('c1'); 40 | }); 41 | }); 42 | 43 | describe('no callback linear', () => { 44 | const color = new Attr.Color({ 45 | scales: [scaleLinear], 46 | values: ['#000000', '#0000ff', '#00ff00', '#ff0000', '#ffffff'], 47 | }); 48 | 49 | it('mapping', () => { 50 | expect(color.mapping(0)[0]).toBe('#000000'); 51 | expect(color.mapping(2.5)[0]).toBe('#0000ff'); 52 | expect(color.mapping(5)[0]).toBe('#00ff00'); 53 | expect(color.mapping(10)[0]).toBe('#ffffff'); 54 | expect(color.mapping(4)[0]).toBe('#009966'); 55 | }); 56 | }); 57 | 58 | describe('scale identity', () => { 59 | const color = new Attr.Color({ 60 | scales: [scaleIdentity], 61 | values: ['#000000', '#0000ff', '#00ff00', '#ff0000', '#ffffff'], 62 | }); 63 | it('mapping', () => { 64 | expect(color.mapping(0)[0]).toBe('red'); 65 | }); 66 | }); 67 | 68 | describe('color gradient', function() { 69 | const color = new Attr.Color({ 70 | scales: [scaleCat], 71 | values: '#000000-#0000ff', 72 | }); 73 | it('init', function() { 74 | expect(color.linear).toBe(true); 75 | }); 76 | it('mapping', function() { 77 | expect(color.mapping('a')[0]).toBe('#000000'); 78 | expect(color.mapping('b')[0]).toBe('#000055'); 79 | expect(color.mapping('c')[0]).toBe('#0000aa'); 80 | expect(color.mapping('d')[0]).toBe('#0000ff'); 81 | }); 82 | it('single color', function() { 83 | const colorAttr = new Attr.Color({ 84 | scales: [scaleCat], 85 | values: 'red', 86 | }); 87 | expect(colorAttr.mapping('a')[0]).toBe('#ff0000'); 88 | expect(colorAttr.mapping('b')[0]).toBe('#ff0000'); 89 | expect(colorAttr.mapping('c')[0]).toBe('#ff0000'); 90 | expect(colorAttr.mapping('d')[0]).toBe('#ff0000'); 91 | }); 92 | }); 93 | }); 94 | 95 | describe('attr test size & opacity', () => { 96 | const scaleCat = new Category({ 97 | field: 'type', 98 | values: ['a', 'b', 'c', 'd'], 99 | }); 100 | 101 | const scaleLinear = new Linear({ 102 | field: 'age', 103 | min: 0, 104 | max: 10, 105 | }); 106 | it('mapping size two size', () => { 107 | const size = new Attr.Size({ 108 | scales: [scaleLinear], 109 | values: [0, 100], 110 | }); 111 | expect(size.type).toBe('size'); 112 | expect(size.mapping(0)[0]).toBe(0); 113 | expect(size.mapping(10)[0]).toBe(100); 114 | expect(size.mapping(5)[0]).toBe(50); 115 | }); 116 | 117 | it('mapping size three size', () => { 118 | const size = new Attr.Size({ 119 | scales: [scaleLinear], 120 | values: [0, 10, 100], 121 | }); 122 | expect(size.mapping(0)[0]).toBe(0); 123 | expect(size.mapping(10)[0]).toBe(100); 124 | expect(size.mapping(4)[0]).toBe(8); 125 | expect(size.mapping(8)[0]).toBe(64); 126 | }); 127 | 128 | it('mapping size category', () => { 129 | const size = new Attr.Size({ 130 | scales: [scaleCat], 131 | values: [0, 10, 100], 132 | }); 133 | 134 | expect(size.mapping('a')[0]).toBe(0); 135 | expect(size.mapping('b')[0]).toBe(10); 136 | expect(size.mapping('c')[0]).toBe(100); 137 | }); 138 | 139 | it('mapping opacity', () => { 140 | const opactiy = new Attr.Opacity({ 141 | scales: [scaleLinear], 142 | values: [0, 1], 143 | }); 144 | expect(opactiy.type).toBe('opacity'); 145 | expect(opactiy.mapping(0)[0]).toBe(0); 146 | expect(opactiy.mapping(10)[0]).toBe(1); 147 | expect(opactiy.mapping(5)[0]).toBe(0.5); 148 | }); 149 | }); 150 | 151 | describe('attr test shape', () => { 152 | const scaleCat = new Category({ 153 | field: 'type', 154 | values: ['a', 'b', 'c', 'd'], 155 | }); 156 | 157 | const scaleLinear = new Linear({ 158 | field: 'age', 159 | min: 0, 160 | max: 10, 161 | }); 162 | 163 | it('init', function() { 164 | // @ts-ignore 165 | const shape = new Attr.Shape({}); 166 | 167 | expect(shape.type).toBe('shape'); 168 | expect(shape.getNames().length).toBe(0); 169 | }); 170 | it('test category mapping', function() { 171 | const shape = new Attr.Shape({ 172 | scales: [scaleCat], 173 | values: ['s1', 's2'], 174 | }); 175 | expect(shape.mapping('a')[0]).toBe('s1'); 176 | expect(shape.mapping('b')[0]).toBe('s2'); 177 | expect(shape.mapping('c')[0]).toBe('s1'); 178 | expect(shape.mapping('d')[0]).toBe('s2'); 179 | }); 180 | 181 | it('test linear mapping', function() { 182 | const shape = new Attr.Shape({ 183 | scales: [scaleLinear], 184 | values: ['s1', 's2'], 185 | }); 186 | expect(shape.mapping(0)[0]).toBe('s1'); 187 | expect(shape.mapping(4)[0]).toBe('s1'); 188 | expect(shape.mapping(9)[0]).toBe('s2'); 189 | expect(shape.mapping(10)[0]).toBe('s2'); 190 | }); 191 | }); 192 | 193 | describe('attr test position', () => { 194 | const scaleCat = new Category({ 195 | field: 'type', 196 | values: ['a', 'b', 'c', 'd', 'e'], 197 | }); 198 | 199 | const scaleLinear = new Linear({ 200 | field: 'age', 201 | min: 0, 202 | max: 10, 203 | }); 204 | 205 | const position = new Attr.Position({ 206 | scales: [scaleCat, scaleLinear], 207 | }); 208 | 209 | it('init', () => { 210 | expect(position.type).toBe('position'); 211 | expect(position.getNames().length).toBe(2); 212 | }); 213 | it('mapping x,y', () => { 214 | const rst = position.mapping('a', 3); 215 | expect(rst).toEqual([0, 0.3]); 216 | }); 217 | it('mapping x, [y1,y2]', () => { 218 | const rst = position.mapping('b', [4, 6]); 219 | expect(rst).toEqual([0.25, [0.4, 0.6]]); 220 | }); 221 | it('mapping [x1,x2], y', () => { 222 | const rst = position.mapping(['b', 'c'], 8); 223 | expect(rst).toEqual([[0.25, 0.5], 0.8]); 224 | }); 225 | it('mapping [x1,x2], [y1, y2]', () => { 226 | const rst = position.mapping(['b', 'c', 'd'], [4, 6, 10]); 227 | expect(rst).toEqual([ 228 | [0.25, 0.5, 0.75], 229 | [0.4, 0.6, 1], 230 | ]); 231 | }); 232 | it('mapping x, y 0', function() { 233 | const rst = position.mapping('a', 0); 234 | expect(rst).toEqual([0, 0]); 235 | }); 236 | }); 237 | -------------------------------------------------------------------------------- /tests/unit/base-spec.ts: -------------------------------------------------------------------------------- 1 | import { getScale } from '@antv/scale'; 2 | import { Attribute as Attr } from '../../src'; 3 | 4 | const Category = getScale('category'); 5 | const Linear = getScale('linear'); 6 | 7 | describe('attr base test', function() { 8 | const scale1 = new Linear({ 9 | field: 'dim1', 10 | min: 0, 11 | max: 100, 12 | }); 13 | const scale2 = new Category({ 14 | field: 'dim2', 15 | values: ['a', 'b', 'c', 'd'], 16 | }); 17 | it('test init', function() { 18 | const attr = new Attr({ 19 | type: 'test', 20 | names: ['t1', 't2'], 21 | scales: [scale1, scale2], 22 | }); 23 | expect(attr.type).toBe('test'); 24 | expect(attr.getNames()).toEqual(['t1', 't2']); 25 | }); 26 | it('test callback', function() { 27 | const attr = new Attr({ 28 | type: 'test', 29 | names: ['t1', 't2'], 30 | callback(v1, v2) { 31 | return v1 + v2; 32 | }, 33 | scales: [scale1, scale2], 34 | }); 35 | 36 | const rst = attr.mapping(10, 'a'); 37 | expect(rst[0]).toBe('10a'); 38 | }); 39 | 40 | it('test 0 as function callback', () => { 41 | const attr = new Attr({ 42 | type: 'test', 43 | names: ['t1', 't2'], 44 | callback: (v1, v2) => { 45 | return v2 === 'a' ? [0] : [1]; 46 | }, 47 | scales: [scale1, scale2], 48 | }); 49 | 50 | expect(attr.mapping(10, 'a')[0]).toEqual([0]); 51 | expect(attr.mapping(10, 'b')[0]).toEqual([1]); 52 | expect(attr.mapping(10, 'c')[0]).toEqual([1]); 53 | expect(attr.mapping(10, 'd')[0]).toEqual([1]); 54 | }); 55 | 56 | it('test linear scale with two values', function() { 57 | const attr = new Attr({ 58 | type: 'test', 59 | names: ['t1', 't2'], 60 | values: [0, 10], 61 | scales: [scale1, scale2], 62 | }); 63 | const rst = attr.mapping(10, 'a'); 64 | expect(rst[0]).toBe(1); 65 | }); 66 | 67 | it('test linear scale with three values', function() { 68 | const attr = new Attr({ 69 | type: 'test', 70 | names: ['t1', 't2'], 71 | values: [0, 10, 40], 72 | scales: [scale1, scale2], 73 | }); 74 | let rst = attr.mapping(40); 75 | expect(rst[0]).toBe(8); 76 | rst = attr.mapping(60); 77 | expect(Math.round(rst[0])).toBe(16); 78 | }); 79 | 80 | it('test cat scale with values', function() { 81 | const attr = new Attr({ 82 | type: 'test', 83 | names: ['t1', 't2'], 84 | values: ['red', 'blue'], 85 | scales: [scale2, scale1], 86 | }); 87 | let rst = attr.mapping('a'); 88 | expect(rst[0]).toBe('red'); 89 | rst = attr.mapping('b'); 90 | expect(rst[0]).toBe('blue'); 91 | }); 92 | }); 93 | -------------------------------------------------------------------------------- /tests/unit/index-spec.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Attribute, 3 | Color, 4 | getAttribute, 5 | Opacity, 6 | Position, 7 | registerAttribute, 8 | Shape, 9 | Size, 10 | } from '../../src'; 11 | 12 | import 'jest-extended'; 13 | 14 | describe('Attr', () => { 15 | it('Attr', () => { 16 | [Position, Shape, Color, Size, Opacity, Attribute, getAttribute, registerAttribute].forEach((each) => { 17 | expect(each).toBeDefined(); 18 | }); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES5", 4 | "module": "commonjs", 5 | "declaration": true, 6 | "sourceMap": true, 7 | "outDir": "lib", 8 | "importHelpers": true, 9 | "moduleResolution": "node", 10 | "allowSyntheticDefaultImports": true, 11 | "lib": ["dom", "esnext"] 12 | }, 13 | "include": ["src"], 14 | "exclude": ["node_modules", "**/node_modules/*"], 15 | "types": ["jest"] 16 | } 17 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultSeverity": "error", 3 | "extends": ["tslint:recommended", "tslint-config-prettier"], 4 | "jsRules": {}, 5 | "rules": { 6 | "interface-name": false, 7 | "variable-name": false, 8 | "no-bitwise": false, 9 | "only-arrow-functions": false, 10 | "object-literal-sort-keys": false, 11 | "no-empty": false, 12 | "no-console": false 13 | }, 14 | "rulesDirectory": [] 15 | } 16 | --------------------------------------------------------------------------------