Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
49 changed files
with
1,029 additions
and
36 deletions.
There are no files selected for viewing
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { G2Spec } from '../../../src'; | ||
|
||
export function liquidCircle(): G2Spec { | ||
return { | ||
type: 'liquid', | ||
data: 0.3, | ||
style: { | ||
shape: 'circle', | ||
}, | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import { G2Spec } from '../../../src'; | ||
|
||
export function liquidCustomShape(): G2Spec { | ||
return { | ||
type: 'liquid', | ||
autoFit: true, | ||
data: 0.3, | ||
style: { | ||
shape: (x, y, r) => { | ||
const path = [] as any; | ||
const w = r * 2; | ||
for (let i = 0; i < 5; i++) { | ||
path.push([ | ||
i === 0 ? 'M' : 'L', | ||
(Math.cos(((18 + i * 72) * Math.PI) / 180) * w) / 2 + x, | ||
(-Math.sin(((18 + i * 72) * Math.PI) / 180) * w) / 2 + y, | ||
]); | ||
path.push([ | ||
'L', | ||
(Math.cos(((54 + i * 72) * Math.PI) / 180) * w) / 4 + x, | ||
(-Math.sin(((54 + i * 72) * Math.PI) / 180) * w) / 4 + y, | ||
]); | ||
} | ||
path.push(['Z']); | ||
return path; | ||
}, | ||
outlineBorder: 4, | ||
outlineDistance: 8, | ||
waveLength: 128, | ||
}, | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { G2Spec } from '../../../src'; | ||
|
||
export function liquidDefault(): G2Spec { | ||
return { | ||
type: 'liquid', | ||
autoFit: true, | ||
data: 0.3, | ||
style: { | ||
outlineBorder: 4, | ||
outlineDistance: 8, | ||
waveLength: 128, | ||
}, | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { G2Spec } from '../../../src'; | ||
|
||
export function liquidDiamond(): G2Spec { | ||
return { | ||
type: 'liquid', | ||
data: 0.3, | ||
style: { | ||
shape: 'diamond', | ||
}, | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { G2Spec } from '../../../src'; | ||
|
||
export function liquidPin(): G2Spec { | ||
return { | ||
type: 'liquid', | ||
data: 0.7, | ||
style: { | ||
shape: 'pin', | ||
textFill: '#fff', | ||
outlineBorder: 4, | ||
outlineDistance: 8, | ||
waveLength: 128, | ||
}, | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { G2Spec } from '../../../src'; | ||
|
||
export function liquidRect(): G2Spec { | ||
return { | ||
type: 'liquid', | ||
data: 0.3, | ||
style: { | ||
shape: 'rect', | ||
}, | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { G2Spec } from '../../../src'; | ||
|
||
export function liquidTriangle(): G2Spec { | ||
return { | ||
type: 'liquid', | ||
data: 0.3, | ||
style: { | ||
shape: 'triangle', | ||
}, | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import { G2Spec } from '../../../src'; | ||
|
||
export function mockIntervalLine(): G2Spec { | ||
return { | ||
type: 'view', | ||
children: [ | ||
{ | ||
type: 'interval', | ||
data: [ | ||
{ time: '2019-03', value: 350, type: 'uv' }, | ||
{ time: '2019-04', value: 900, type: 'uv' }, | ||
{ time: '2019-05', value: 300, type: 'uv' }, | ||
{ time: '2019-06', value: 450, type: 'uv' }, | ||
{ time: '2019-07', value: 470, type: 'uv' }, | ||
{ time: '2019-03', value: 220, type: 'bill' }, | ||
{ time: '2019-04', value: 300, type: 'bill' }, | ||
{ time: '2019-05', value: 250, type: 'bill' }, | ||
{ time: '2019-06', value: 220, type: 'bill' }, | ||
{ time: '2019-07', value: 362, type: 'bill' }, | ||
], | ||
encode: { x: 'time', y: 'value', color: 'type' }, | ||
transform: [{ type: 'dodgeX' }], | ||
axis: { y: { labelFormatter: '.0%' } }, | ||
}, | ||
{ | ||
type: 'line', | ||
data: [ | ||
{ time: '2019-03', count: 800 }, | ||
{ time: '2019-04', count: 600 }, | ||
{ time: '2019-05', count: 400 }, | ||
{ time: '2019-06', count: 380 }, | ||
{ time: '2019-07', count: 220 }, | ||
], | ||
encode: { x: 'time', y: 'count', color: () => 'line' }, | ||
axis: { y: { labelFormatter: '.0%' } }, | ||
}, | ||
], | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { Chart, CompositionNode, MarkNode } from '../../../src'; | ||
|
||
describe('types', () => { | ||
const chart = new Chart(); | ||
|
||
test('CompositionNode', () => { | ||
const rect: CompositionNode = chart.facetRect(); | ||
rect.boxplot(); | ||
}); | ||
|
||
test('MarkNode', () => { | ||
const interval: MarkNode = chart.interval(); | ||
interval.encode('x', 'name'); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
--- | ||
title: liquid | ||
order: 1 | ||
--- | ||
|
||
<embed src="@/docs/spec/mark/liquid.zh.md"></embed> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
--- | ||
title: liquid | ||
order: 1 | ||
--- | ||
|
||
水波图 | ||
|
||
## 开始使用 | ||
|
||
<img alt="liquid" src="https://mdn.alipayobjects.com/huamei_za7we3/afts/img/A*cHArRaizyBsAAAAAAAAAAAAADo2bAQ/original | ||
" width="600" /> | ||
|
||
```js | ||
import { Chart } from '@antv/g2'; | ||
|
||
const chart = new Chart({ | ||
container: 'container', | ||
autoFit: true, | ||
}); | ||
|
||
chart | ||
.liquid() | ||
.data(.3) | ||
.style({ | ||
outlineBorder: 4, | ||
outlineDistance: 8, | ||
waveLength: 128, | ||
}); | ||
|
||
chart.render(); | ||
``` | ||
|
||
## 选项 | ||
|
||
| 属性 | 描述 | 类型 | 默认值 | | ||
| ----- | ---------------------- | ----------- | ------ | | ||
| data | 数据 | `GaugeData` | - | | ||
| style | 配置图形样式和标签样式 | - | - | | ||
|
||
## style | ||
|
||
对水波图中的三个部分 | ||
|
||
| 属性 | 描述 | 类型 | 默认值 | | ||
| --------------- | -------- | -------- | ------ | | ||
| outlineBorder | 边框宽度 | `number` | - | | ||
| outlineDistance | 内间距 | `number` | - | | ||
| outlineStroke | 边框颜色 | `string` | - | | ||
| waveLength | 波长 | `number` | - | | ||
| backgroundFill | 背景颜色 | `string` | - | | ||
| textFill | 文本颜色 | `string` | - | | ||
| textFontSize | 文本大小 | `string` | - | | ||
|
||
## shape | ||
|
||
目前 liquid 有以下几个内置 shape 图形,默认为 `circle`。 | ||
|
||
| 图形 | 描述 | 示例 | | ||
| -------- | ---- | ---- | | ||
| rect | 矩形 | | | ||
| circle | 圆形 | | | ||
| pin | 水滴 | | | ||
| triangle | 三角 | | | ||
|
||
为自定义 shape 形状提供回调, `(x, y, r, w, h) => string`, 传入参数分别为 x y 中心点坐标, r 图表可画圆最大半径, w h 图表可画宽高。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { Chart } from '@antv/g2'; | ||
|
||
const chart = new Chart({ | ||
container: 'container', | ||
autoFit: true, | ||
}); | ||
|
||
chart | ||
.liquid() | ||
.data(0.3) | ||
.style({ | ||
backgroundFill: 'pink', | ||
}); | ||
|
||
chart.render(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import { Chart } from '@antv/g2'; | ||
|
||
const chart = new Chart({ | ||
container: 'container', | ||
autoFit: true, | ||
}); | ||
|
||
chart | ||
.liquid() | ||
.data(0.3) | ||
.style({ | ||
shape: (x, y, r) => { | ||
const path = []; | ||
const w = r * 2; | ||
|
||
for (let i = 0; i < 5; i++) { | ||
path.push([ | ||
i === 0 ? 'M' : 'L', | ||
(Math.cos(((18 + i * 72) * Math.PI) / 180) * w) / 2 + x, | ||
(-Math.sin(((18 + i * 72) * Math.PI) / 180) * w) / 2 + y, | ||
]); | ||
path.push([ | ||
'L', | ||
(Math.cos(((54 + i * 72) * Math.PI) / 180) * w) / 4 + x, | ||
(-Math.sin(((54 + i * 72) * Math.PI) / 180) * w) / 4 + y, | ||
]); | ||
} | ||
path.push(['Z']); | ||
return path; | ||
}, | ||
outlineBorder: 4, | ||
outlineDistance: 8, | ||
waveLength: 128, | ||
}); | ||
|
||
chart.render(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { Chart } from '@antv/g2'; | ||
|
||
const chart = new Chart({ | ||
container: 'container', | ||
autoFit: true, | ||
}); | ||
|
||
chart | ||
.liquid() | ||
.data(0.3) | ||
.style({ | ||
outlineBorder: 4, | ||
outlineDistance: 8, | ||
waveLength: 128, | ||
}); | ||
|
||
chart.render(); |
Oops, something went wrong.