Skip to content

Commit 6d8b94b

Browse files
Fan-iXFan-iX
committed
Merge branch 'main' into demo
2 parents ee244a5 + c92f648 commit 6d8b94b

23 files changed

Lines changed: 897 additions & 486 deletions

‎example/action.vue‎

Lines changed: 46 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,57 @@
11
<script setup>
2-
import { useTemplateRef } from 'vue'
32
import { VVPlot, VVAxisX, VVAxisY, VVGeomPoint, VVAction } from '#base/components'
43
import iris from './data/iris.json'
5-
6-
const legend = useTemplateRef("legend")
74
</script>
85
<template>
9-
<div class="flex p-4">
10-
<VVPlot :data="iris" :width="600" :height="400" resize :legend-teleport="legend">
11-
<template #y-axis>
12-
<VVAxisY position="none" :min="0" :max="8" reverse />
13-
<VVAxisY position="left" secondary>
14-
<VVAction :zoom="{ max: 10, min: -2 }" :move="{ min: -2 }" :rescale="{ max: 10 }" />
15-
</VVAxisY>
16-
<VVAxisY position="right" secondary />
17-
</template>
18-
<template #x-axis>
19-
<VVAxisX position="none" :min="0" :max="8" :expand-add="1" />
20-
<VVAxisX position="bottom" secondary>
21-
<VVAction move :nudge="{ shift: true }" :min="-2" :max="10" />
22-
<VVAction :zoom="{ max: 10 }" :rescale="{ max: 10 }" :min-range="4" />
23-
</VVAxisX>
24-
</template>
6+
<div class="plot-container">
7+
<pre class="code">{{`<VVPlot :data="iris" resize>
8+
<VVAxisY :position="0" :extend="1">
9+
<VVAction :zoom="{ max: 10, min: -2 }" :move="{ min: -2 }" :rescale="{ max: 10 }" />
10+
</VVAxisY>
11+
<VVAxisX position="center" :extend="1">
12+
<VVAction move :nudge="{ shift: true }" :min="-2" :max="10" />
13+
<VVAction :zoom="{ min: -5 }" :rescale="{ max: 10 }" :min-range="4" />
14+
</VVAxisX>
15+
<VVGeomPoint :x="d => d.Petal_Width" :y="d => d.Sepal_Length" :color="d => d.Species" />
16+
</VVPlot>`}}</pre>
17+
<VVPlot :data="iris" resize>
18+
<VVAxisY :position="0" :extend="1">
19+
<VVAction :zoom="{ max: 10, min: -2 }" :move="{ min: -2 }" :rescale="{ max: 10 }" />
20+
</VVAxisY>
21+
<VVAxisX position="center" :extend="1">
22+
<VVAction move :nudge="{ shift: true }" :min="-2" :max="10" />
23+
<VVAction :zoom="{ min: -5 }" :rescale="{ max: 10 }" :min-range="4" />
24+
</VVAxisX>
25+
<VVGeomPoint :x="d => d.Petal_Width" :y="d => d.Sepal_Length" :color="d => d.Species" />
26+
</VVPlot>
27+
<hr>
28+
<pre class="code">{{`<VVPlot :data="iris" resize>
29+
<VVAxisX position="0%" :min="0" :max="8" :expand-add="1" :extend="2" />
30+
<VVAxisY position="0%" :min="0" :max="8" :extend="1" />
31+
<VVGeomPoint :x="d => d.Petal_Width" :y="d => d.Sepal_Length" :color="d => d.Species" />
32+
<template #action>
33+
<VVAction select />
34+
<VVAction nudge shift />
35+
<VVAction :move="{ button: 'right' }" :xmin="-2" :xmax="10" :ymin="-2" />
36+
<VVAction :zoom="{ xmin: -5, xmax: 10 }" :ymin="-2" :ymax="10" />
37+
</template>
38+
</VVPlot>`}}</pre>
39+
<VVPlot :data="iris" resize>
40+
<VVAxisX position="0%" :min="0" :max="8" :expand-add="1" :extend="2" />
41+
<VVAxisY position="0%" :min="0" :max="8" :extend="1" />
2542
<VVGeomPoint :x="d => d.Petal_Width" :y="d => d.Sepal_Length" :color="d => d.Species" />
2643
<template #action>
27-
<VVAction select x y />
28-
<VVAction nudge shift x y />
29-
<VVAction :move="{ button: 'right' }" x y :xmin="-2" :xmax="10" :ymin="-2" />
30-
<VVAction zoom x y :xmax="10" :ymin="-2" :ymax="10" />
44+
<VVAction select />
45+
<VVAction nudge x shift />
46+
<VVAction :move="{ button: 'right' }" :xmin="-2" :xmax="10" :ymin="-2" />
47+
<VVAction :zoom="{ xmin: -5, xmax: 10 }" :ymin="-2" :ymax="10" />
3148
</template>
3249
</VVPlot>
33-
<div ref="legend"></div>
3450
</div>
3551
</template>
52+
<style scoped>
53+
.vvplot {
54+
width: 600px;
55+
height: 400px;
56+
}
57+
</style>

‎example/axis.vue‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<script setup>
2+
import { VVPlot, VVAxisX, VVAxisY, VVGeomLine, VVGeomBar, VVGeomPoint, VVAction } from '#base/components'
3+
import vvbreak from '#base/js/break'
4+
import vvlabel from '#base/js/label'
5+
6+
import letters_txt from './data/sentences.txt?raw'
7+
const letters = letters_txt.toLowerCase().replace(/[^a-z]/g, "").split("")
8+
import economics_txt from './data/economics.csv?raw'
9+
const economics = parse_csv(economics_txt)
10+
11+
function parse_csv(text) {
12+
function parse_value(v) {
13+
if (!isNaN(v)) return +v
14+
if (/^\d{4}-\d{1,2}-\d{1,2}$/.test(v)) {
15+
let [y, m, d] = v.split('-').map(x => +x)
16+
return Date.UTC(y, m - 1, d)
17+
}
18+
return v
19+
}
20+
let [header, ...lines] = text.replace(/\r/g, '').split('\n').filter(l => l)
21+
header = header.split(',')
22+
return lines.map(l => Object.fromEntries(l.split(',').map((v, i) => [header[i], parse_value(v)])))
23+
}
24+
</script>
25+
<template>
26+
<div class="plot-container">
27+
<pre class="code">{{`<VVPlot :data="economics" :theme="{ plot: { margin_right: 50 } }">
28+
<VVAxisY :labels="v => \`\${v * 100}%\`" :expand-mult="{ min: 0.2, max: 0.1 }" title="unemployment rate"
29+
:theme="{ title_color: 'gray' }">
30+
<VVAction move rescale zoom />
31+
</VVAxisY>
32+
<VVAxisX position="10%"
33+
:theme="{ ticks_length: 3, title_position: 'right', title_size: 16, text_angle: 45, ticks_anchor_x: 0 }"
34+
:show-grid="false" title="date" :extend="0.5">
35+
<VVAction move rescale zoom />
36+
</VVAxisX>
37+
<VVGeomLine :x="d => new Date(d.date)" :y="d => d.unemploy / d.pop" />
38+
</VVPlot>`}}</pre>
39+
<VVPlot :data="economics" :theme="{ plot: { margin_right: 50 } }">
40+
<VVAxisY :labels="v => `${v * 100}%`" :expand-mult="{ min: 0.2, max: 0.1 }" title="unemployment rate"
41+
:theme="{ title_color: 'gray' }">
42+
<VVAction move rescale zoom />
43+
</VVAxisY>
44+
<VVAxisX position="10%"
45+
:theme="{ ticks_length: 3, title_position: 'right', title_size: 16, text_angle: 45, ticks_anchor_x: 0 }"
46+
:show-grid="false" title="date" :extend="0.5">
47+
<VVAction move rescale zoom />
48+
</VVAxisX>
49+
<VVGeomLine :x="d => new Date(d.date)" :y="d => d.unemploy / d.pop" />
50+
</VVPlot>
51+
<hr>
52+
<pre class="code">{{`<VVPlot :data="economics">
53+
<VVAxisX :labels="vvlabel.timestamp({ format: 'yyyy/MM' })" position="top" />
54+
<VVAxisY position="left" primary />
55+
<VVAxisY position="right" />
56+
<VVGeomLine :x="d => new Date(d.date)" :y="d => d.pop" />
57+
</VVPlot>`}}</pre>
58+
<VVPlot :data="economics">
59+
<VVAxisX :labels="vvlabel.timestamp({ format: 'yyyy/MM' })" position="top" />
60+
<VVAxisY position="left" primary />
61+
<VVAxisY position="right" />
62+
<VVGeomLine :x="d => new Date(d.date)" :y="d => d.pop" />
63+
</VVPlot>
64+
<hr>
65+
<pre class="code">{{`<VVPlot :data="economics">
66+
<VVAxisX :labels="vvlabel.timestamp()" :extend="2" :position="0" />
67+
<VVAxisY :labels="vvlabel.default()" :expand-mult="0" />
68+
<VVGeomLine :x="d => new Date(d.date)" :y="(d, i, data) => d.unemploy - (data[i - 1] ?? d)?.unemploy" color="#ccc" />
69+
</VVPlot>`}}</pre>
70+
<VVPlot :data="economics">
71+
<VVAxisX :labels="vvlabel.timestamp()" :extend="2" :position="0" />
72+
<VVAxisY :labels="vvlabel.default()" :expand-mult="0" />
73+
<VVGeomLine :x="d => new Date(d.date)" :y="(d, i, data) => d.unemploy - (data[i - 1] ?? d)?.unemploy"
74+
color="#ccc" />
75+
</VVPlot>
76+
<hr>
77+
<pre class="code">{{`<VVPlot :data="[{ x: 2, y: -1 }, { x: -1, y: 2 }]">
78+
<VVAxisX :position="0" :expand-mult="1" :breaks="vvbreak.number({ step: 1 })">
79+
<VVAction move rescale zoom />
80+
</VVAxisX>
81+
<VVAxisY :position="0" :expand-mult="1" :extend="1">
82+
<VVAction move rescale zoom />
83+
</VVAxisY>
84+
<VVGeomPoint :x="d => d.x" :y="d => d.y" />
85+
</VVPlot>`}}</pre>
86+
<VVPlot :data="[{ x: 2, y: -1 }, { x: -1, y: 2 }]">
87+
<VVAxisX :position="0" :expand-mult="1" :breaks="vvbreak.number({ step: 1 })">
88+
<VVAction move rescale zoom />
89+
</VVAxisX>
90+
<VVAxisY :position="0" :expand-mult="1" :extend="1">
91+
<VVAction move rescale zoom />
92+
</VVAxisY>
93+
<VVGeomPoint :x="d => d.x" :y="d => d.y" />
94+
</VVPlot>
95+
<hr>
96+
<pre class="code">{{`<VVPlot :data="letters">
97+
<VVAxisX :expand-add="1" :expand-mult="0" :levels="['x', 'y', 'z', '', 'a', 'b', 'c']" :position="0" />
98+
<VVAxisY position="center" :theme="{ ticks_anchor_y: 1 }" />
99+
<VVGeomBar :x="d => d" />
100+
</VVPlot>`}}</pre>
101+
<VVPlot :data="letters">
102+
<VVAxisX :expand-add="1" :expand-mult="0" :levels="['x', 'y', 'z', '', 'a', 'b', 'c']" :position="0" />
103+
<VVAxisY position="center" :theme="{ ticks_anchor_y: 1 }" />
104+
<VVGeomBar :x="d => d" />
105+
</VVPlot>
106+
</div>
107+
</template>
108+
<style scoped>
109+
.vvplot {
110+
width: 600px;
111+
height: 400px;
112+
}
113+
</style>

‎example/geom.vue‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -54,30 +54,25 @@ const render = ref('canvas')
5454
</VVPlot>
5555
<hr>
5656
<pre class="code">{{`<VVPlot :data="UCBAdmissions">
57-
<VVAxisX title="type" />
58-
<VVAxisY position="right" title="class" />
5957
<VVGeomTile :x="d => d.Gender + '_' + d.Admit" :y="d => d.Dept" :fill="d => d.Freq" :width="0.8"
60-
:height="0.8" :scales="{ fill: vvscale.color.gradient2({ midpoint: null }) }" :render />
61-
<VVGeomText :x="d => d.Gender + '_' + d.Admit" :y="d => d.Dept" :color="d => d.Freq" :label="d => d.Freq"
62-
:render />
58+
:height="0.8" :scales="{ fill: vvscale.color.gradient2({ midpoint: null }) }" />
59+
<VVGeomText :x="d => d.Gender + '_' + d.Admit" :y="d => d.Dept" :color="d => d.Freq" :label="d => d.Freq" />
6360
</VVPlot>`}}</pre>
6461
<VVPlot :data="UCBAdmissions">
65-
<VVAxisX title="type" />
66-
<VVAxisY position="right" title="class" />
6762
<VVGeomTile :x="d => d.Gender + '_' + d.Admit" :y="d => d.Dept" :fill="d => d.Freq" :width="0.8"
6863
:height="0.8" :scales="{ fill: vvscale.color.gradient2({ midpoint: null }) }" :render />
6964
<VVGeomText :x="d => d.Gender + '_' + d.Admit" :y="d => d.Dept" :color="d => d.Freq" :label="d => d.Freq"
7065
:render />
7166
</VVPlot>
7267
<hr>
7368
<pre class="code">{{`<VVPlot :data="economics">
74-
<VVAxisX title="unemployment rate" :min-range="0" />
69+
<VVAxisX title="unemployment rate" />
7570
<VVAxisY title="personal savings rate" />
7671
<VVGeomPath :x="d => d.unemploy / d.pop" :y="d => d.psavert" :color="(d, i) => i"
7772
:scales="{ color: vvscale.color.hue() }" />
7873
</VVPlot>`}}</pre>
7974
<VVPlot :data="economics">
80-
<VVAxisX title="unemployment rate" :min-range="0" />
75+
<VVAxisX title="unemployment rate" />
8176
<VVAxisY title="personal savings rate" />
8277
<VVGeomPath :x="d => d.unemploy / d.pop" :y="d => d.psavert" :color="(d, i) => i"
8378
:scales="{ color: vvscale.color.hue() }" :render />
@@ -97,8 +92,8 @@ const render = ref('canvas')
9792
<VVGeomHistogram :x="d => d.Petal_Width" :color="d => d.Species" :fill="d => d.Species" :alpha="0.5" :scales="{ color: vvscale.color.hue({ l: 45 }) }" />
9893
</VVPlot>`}}</pre>
9994
<VVPlot :data="iris">
100-
<VVGeomHistogram :x="d => d.Petal_Width" :color="d => d.Species" :fill="d => d.Species" :render :alpha="0.5"
101-
:scales="{ color: vvscale.color.hue({ l: 45 }) }" />
95+
<VVGeomHistogram :x="d => d.Petal_Width" :color="d => d.Species" :fill="d => d.Species" :alpha="0.5"
96+
:scales="{ color: vvscale.color.hue({ l: 45 }) }" :render />
10297
</VVPlot>
10398
<hr>
10499
<pre class="code">{{`<VVPlot :data="pigments">
@@ -107,8 +102,9 @@ const render = ref('canvas')
107102
</VVPlot>`}}</pre>
108103
<VVPlot :data="pigments">
109104
<VVGeomLine :x="d => d.wave_length" :y="d => d.molar_extinction" :color="d => d.pigment"
110-
:group="d => d.pigment" :render
111-
:scales="{ color: vvscale.color.manual({ values: { beta_carotene: 'orangered', chlorophyll_a: 'limegreen', chlorophyll_b: 'royalblue' } }) }" />
105+
:group="d => d.pigment"
106+
:scales="{ color: vvscale.color.manual({ values: { beta_carotene: 'orangered', chlorophyll_a: 'limegreen', chlorophyll_b: 'royalblue' } }) }"
107+
:render />
112108
</VVPlot>
113109
<hr>
114110
<pre class="code">{{`<VVPlot :data="iris">
@@ -117,7 +113,7 @@ const render = ref('canvas')
117113
{ x: d.Petal_Width, y: d.Sepal_Length - 0.1 },
118114
{ x: d.Petal_Width + 0.1, y: d.Sepal_Length },
119115
{ x: d.Petal_Width, y: d.Sepal_Length + 0.1 },
120-
]" :color="d => d.Species" :fill="d => d.Species" :render />
116+
]" :color="d => d.Species" :fill="d => d.Species" />
121117
</VVPlot>`}}</pre>
122118
<VVPlot :data="iris">
123119
<VVGeomPolygon :points="d => [

‎example/index.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ const page = ref('geom')
55
66
import geom from './geom.vue';
77
import theme from './theme.vue';
8-
import label from './label.vue';
8+
import axis from './axis.vue';
99
import action from './action.vue';
1010
11-
const pages = { geom, theme, label, action }
11+
const pages = { geom, theme, axis, action }
1212
</script>
1313
<template>
1414
<div class="content">
@@ -39,7 +39,7 @@ select {
3939
4040
hr {
4141
margin: 1em 0;
42-
border-top: 1px solid #ccc;
42+
color: #ccc;
4343
width: 80%;
4444
}
4545

‎example/label.vue‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎example/theme.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,22 @@ import iris from './data/iris.json'
1717
<VVPlot :data="iris" :theme="vvtheme.classic">
1818
<VVGeomPoint :x="d => d.Petal_Width" :y="d => d.Sepal_Length" :color="d => d.Species" />
1919
</VVPlot>
20+
<h4>gray</h4>
21+
<VVPlot :data="iris" :theme="vvtheme.gray">
22+
<VVGeomPoint :x="d => d.Petal_Width" :y="d => d.Sepal_Length" :color="d => d.Species" />
23+
</VVPlot>
24+
<h4>dark</h4>
25+
<VVPlot :data="iris" :theme="vvtheme.dark">
26+
<VVGeomPoint :x="d => d.Petal_Width" :y="d => d.Sepal_Length" :color="d => d.Species" />
27+
</VVPlot>
28+
<h4>linedraw</h4>
29+
<VVPlot :data="iris" :theme="vvtheme.linedraw">
30+
<VVGeomPoint :x="d => d.Petal_Width" :y="d => d.Sepal_Length" :color="d => d.Species" />
31+
</VVPlot>
32+
<h4>void</h4>
33+
<VVPlot :data="iris" :theme="vvtheme.void">
34+
<VVGeomPoint :x="d => d.Petal_Width" :y="d => d.Sepal_Length" :color="d => d.Species" />
35+
</VVPlot>
2036
</div>
2137
</template>
2238
<style scoped>

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
".": "./dist/index.js",
2020
"./components": "./dist/components.js",
2121
"./scale": "./dist/scale.js",
22+
"./break": "./dist/break.js",
2223
"./theme": "./dist/theme.js",
2324
"./label": "./dist/label.js",
2425
"./style.css": "./dist/style.css"

0 commit comments

Comments
 (0)