1 | <h1 align="center">
|
2 | <b>@antv/scale</b>
|
3 | </h1>
|
4 |
|
5 | <div align="center">
|
6 |
|
7 | > Toolkit for mapping abstract data into visual representation. [Living Demo](https://observablehq.com/@pearmini/antv-scale) · [中文文档](./README.md)
|
8 |
|
9 | ![scale mapping](https://user-images.githubusercontent.com/7856674/116353528-85644a80-a829-11eb-85e4-3463a29000a9.png)
|
10 |
|
11 | [![Build Status](https://github.com/antvis/scale/workflows/build/badge.svg?branch=master)](https://github.com/antvis/scale/actions)
|
12 | [![Coverage Status](https://img.shields.io/coveralls/github/antvis/scale/master.svg)](https://coveralls.io/github/antvis/scale?branch=master)
|
13 | [![npm Version](https://img.shields.io/npm/v/@antv/scale.svg)](https://www.npmjs.com/package/@antv/scale)
|
14 | [![npm Download](https://img.shields.io/npm/dm/@antv/scale.svg)](https://www.npmjs.com/package/@antv/scale)
|
15 | [![npm License](https://img.shields.io/npm/l/@antv/scale.svg)](https://www.npmjs.com/package/@antv/scale)
|
16 |
|
17 | </div>
|
18 |
|
19 | ## ✨ Features
|
20 |
|
21 | - **Powerful**: Ability to customize tickMethod are offered with abundant kinds of scales.
|
22 | - **High performance**: Use different methods to cache some state of scales to improve performance.
|
23 | - **Fully embrace TypeScript**: All code are written in TypeScript and complete type definition files are provided.
|
24 |
|
25 | ![scale examples](https://gw.alipayobjects.com/mdn/rms_40052e/afts/img/A*Usg2S685JQkAAAAAAAAAAAAAARQnAQ)
|
26 |
|
27 | ## 📦 Installation
|
28 |
|
29 | ```bash
|
30 | $ npm install @antv/scale
|
31 | ```
|
32 |
|
33 | ## 🔨 Getting Started
|
34 |
|
35 | - Basic usage
|
36 |
|
37 | ```ts
|
38 | import { Linear, LinearOptions } from '@antv/scale';
|
39 |
|
40 | const options: LinearOptions = {
|
41 | domain: [0, 10],
|
42 | range: [0, 100],
|
43 | };
|
44 | const x = new Linear(options);
|
45 |
|
46 | x.map(2); // 20
|
47 | x.invert(20); // 2
|
48 | x.getTicks(); // [0, 2.5, 5, 7.5, 10]
|
49 | ```
|
50 |
|
51 | - Customize tickMethod
|
52 |
|
53 | ```ts
|
54 | import { Linear } from '@antv/scale';
|
55 |
|
56 | const x = new Linear({
|
57 | domain: [0, 10],
|
58 | range: [0, 100],
|
59 | tickCount: 3,
|
60 | tickMethod: () => [0, 5, 10],
|
61 | });
|
62 |
|
63 | x.getTicks(); // [0, 5, 10]
|
64 | ```
|
65 |
|
66 | ## 📎 Links
|
67 |
|
68 | - [Introduction](https://observablehq.com/@pearmini/antv-scale)
|
69 | - [API Reference](./docs/api/readme.md)
|
70 |
|
71 | ## 📮 Contribution
|
72 |
|
73 | ```bash
|
74 | $ git clone git@github.com:antvis/scale.git
|
75 |
|
76 | $ cd scale
|
77 |
|
78 | $ npm i
|
79 |
|
80 | $ npm t
|
81 | ```
|
82 |
|
83 | Then send a pull request after coding.
|
84 |
|
85 | ## 📄 License
|
86 |
|
87 | MIT@[AntV](https://github.com/antvis).
|