Skip to content

Commit 3d67e5d

Browse files
sendyasendya
committed
reactor: v2
1 parent fd33711 commit 3d67e5d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+1484
-1663
lines changed

‎src/components/chart/Bar.vue renamed to ‎src/components/Charts/Bar.vue

File renamed without changes.

‎src/components/chart/ChartCard.vue renamed to ‎src/components/Charts/ChartCard.vue

Lines changed: 120 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,120 @@
1-
<template>
2-
<a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
3-
<div class="chart-card-header">
4-
<div class="meta">
5-
<span class="chart-card-title">
6-
<slot name="title">
7-
{{ title }}
8-
</slot>
9-
</span>
10-
<span class="chart-card-action">
11-
<slot name="action"></slot>
12-
</span>
13-
</div>
14-
<div class="total">
15-
<slot name="total">
16-
<span>{{ typeof total === 'function' && total() || total }}</span>
17-
</slot>
18-
</div>
19-
</div>
20-
<div class="chart-card-content">
21-
<div class="content-fix">
22-
<slot></slot>
23-
</div>
24-
</div>
25-
<div class="chart-card-footer">
26-
<div class="field">
27-
<slot name="footer"></slot>
28-
</div>
29-
</div>
30-
</a-card>
31-
</template>
32-
33-
<script>
34-
export default {
35-
name: 'ChartCard',
36-
props: {
37-
title: {
38-
type: String,
39-
default: ''
40-
},
41-
total: {
42-
type: [Function, Number, String],
43-
required: false,
44-
default: null
45-
},
46-
loading: {
47-
type: Boolean,
48-
default: false
49-
}
50-
}
51-
}
52-
</script>
53-
54-
<style lang="less" scoped>
55-
.chart-card-header {
56-
position: relative;
57-
overflow: hidden;
58-
width: 100%;
59-
60-
.meta {
61-
position: relative;
62-
overflow: hidden;
63-
width: 100%;
64-
color: rgba(0, 0, 0, .45);
65-
font-size: 14px;
66-
line-height: 22px;
67-
}
68-
}
69-
70-
.chart-card-action {
71-
cursor: pointer;
72-
position: absolute;
73-
top: 0;
74-
right: 0;
75-
}
76-
77-
.chart-card-footer {
78-
border-top: 1px solid #e8e8e8;
79-
padding-top: 9px;
80-
margin-top: 8px;
81-
82-
> * {
83-
position: relative;
84-
}
85-
86-
.field {
87-
white-space: nowrap;
88-
overflow: hidden;
89-
text-overflow: ellipsis;
90-
margin: 0;
91-
}
92-
}
93-
94-
.chart-card-content {
95-
margin-bottom: 12px;
96-
position: relative;
97-
height: 46px;
98-
width: 100%;
99-
100-
.content-fix {
101-
position: absolute;
102-
left: 0;
103-
bottom: 0;
104-
width: 100%;
105-
}
106-
}
107-
108-
.total {
109-
overflow: hidden;
110-
text-overflow: ellipsis;
111-
word-break: break-all;
112-
white-space: nowrap;
113-
color: #000;
114-
margin-top: 4px;
115-
margin-bottom: 0;
116-
font-size: 30px;
117-
line-height: 38px;
118-
height: 38px;
119-
}
120-
</style>
1+
<template>
2+
<a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
3+
<div class="chart-card-header">
4+
<div class="meta">
5+
<span class="chart-card-title">
6+
<slot name="title">
7+
{{ title }}
8+
</slot>
9+
</span>
10+
<span class="chart-card-action">
11+
<slot name="action"></slot>
12+
</span>
13+
</div>
14+
<div class="total">
15+
<slot name="total">
16+
<span>{{ typeof total === 'function' && total() || total }}</span>
17+
</slot>
18+
</div>
19+
</div>
20+
<div class="chart-card-content">
21+
<div class="content-fix">
22+
<slot></slot>
23+
</div>
24+
</div>
25+
<div class="chart-card-footer">
26+
<div class="field">
27+
<slot name="footer"></slot>
28+
</div>
29+
</div>
30+
</a-card>
31+
</template>
32+
33+
<script>
34+
export default {
35+
name: 'ChartCard',
36+
props: {
37+
title: {
38+
type: String,
39+
default: ''
40+
},
41+
total: {
42+
type: [Function, Number, String],
43+
required: false,
44+
default: null
45+
},
46+
loading: {
47+
type: Boolean,
48+
default: false
49+
}
50+
}
51+
}
52+
</script>
53+
54+
<style lang="less" scoped>
55+
.chart-card-header {
56+
position: relative;
57+
overflow: hidden;
58+
width: 100%;
59+
60+
.meta {
61+
position: relative;
62+
overflow: hidden;
63+
width: 100%;
64+
color: rgba(0, 0, 0, .45);
65+
font-size: 14px;
66+
line-height: 22px;
67+
}
68+
}
69+
70+
.chart-card-action {
71+
cursor: pointer;
72+
position: absolute;
73+
top: 0;
74+
right: 0;
75+
}
76+
77+
.chart-card-footer {
78+
border-top: 1px solid #e8e8e8;
79+
padding-top: 9px;
80+
margin-top: 8px;
81+
82+
> * {
83+
position: relative;
84+
}
85+
86+
.field {
87+
white-space: nowrap;
88+
overflow: hidden;
89+
text-overflow: ellipsis;
90+
margin: 0;
91+
}
92+
}
93+
94+
.chart-card-content {
95+
margin-bottom: 12px;
96+
position: relative;
97+
height: 46px;
98+
width: 100%;
99+
100+
.content-fix {
101+
position: absolute;
102+
left: 0;
103+
bottom: 0;
104+
width: 100%;
105+
}
106+
}
107+
108+
.total {
109+
overflow: hidden;
110+
text-overflow: ellipsis;
111+
word-break: break-all;
112+
white-space: nowrap;
113+
color: #000;
114+
margin-top: 4px;
115+
margin-bottom: 0;
116+
font-size: 30px;
117+
line-height: 38px;
118+
height: 38px;
119+
}
120+
</style>

‎src/components/chart/Liquid.vue renamed to ‎src/components/Charts/Liquid.vue

File renamed without changes.

‎src/components/chart/MiniArea.vue renamed to ‎src/components/Charts/MiniArea.vue

Lines changed: 55 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,56 @@
1-
<template>
2-
<div class="antv-chart-mini">
3-
<div class="chart-wrapper" :style="{ height: 46 }">
4-
<v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 0, 18, 0]">
5-
<v-tooltip />
6-
<v-smooth-area position="x*y" />
7-
</v-chart>
8-
</div>
9-
</div>
10-
</template>
11-
12-
<script>
13-
import moment from 'moment'
14-
const data = []
15-
const beginDay = new Date().getTime()
16-
17-
for (let i = 0; i < 10; i++) {
18-
data.push({
19-
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
20-
y: Math.round(Math.random() * 10)
21-
})
22-
}
23-
24-
const tooltip = [
25-
'x*y',
26-
(x, y) => ({
27-
name: x,
28-
value: y
29-
})
30-
]
31-
const scale = [{
32-
dataKey: 'x',
33-
min: 2
34-
}, {
35-
dataKey: 'y',
36-
title: '时间',
37-
min: 1,
38-
max: 22
39-
}]
40-
41-
export default {
42-
name: 'MiniArea',
43-
data () {
44-
return {
45-
data,
46-
tooltip,
47-
scale,
48-
height: 100
49-
}
50-
}
51-
}
52-
</script>
53-
54-
<style lang="less" scoped>
55-
@import "chart";
1+
<template>
2+
<div class="antv-chart-mini">
3+
<div class="chart-wrapper" :style="{ height: 46 }">
4+
<v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 0, 18, 0]">
5+
<v-tooltip />
6+
<v-smooth-area position="x*y" />
7+
</v-chart>
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script>
13+
import moment from 'moment'
14+
const data = []
15+
const beginDay = new Date().getTime()
16+
17+
for (let i = 0; i < 10; i++) {
18+
data.push({
19+
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
20+
y: Math.round(Math.random() * 10)
21+
})
22+
}
23+
24+
const tooltip = [
25+
'x*y',
26+
(x, y) => ({
27+
name: x,
28+
value: y
29+
})
30+
]
31+
const scale = [{
32+
dataKey: 'x',
33+
min: 2
34+
}, {
35+
dataKey: 'y',
36+
title: '时间',
37+
min: 1,
38+
max: 22
39+
}]
40+
41+
export default {
42+
name: 'MiniArea',
43+
data () {
44+
return {
45+
data,
46+
tooltip,
47+
scale,
48+
height: 100
49+
}
50+
}
51+
}
52+
</script>
53+
54+
<style lang="less" scoped>
55+
@import "chart";
5656
</style>

0 commit comments

Comments
 (0)