Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Dashboards
Tabler
提交
b1af6143
T
Tabler
项目概览
Dashboards
/
Tabler
12 个月 前同步成功
通知
0
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
T
Tabler
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
b1af6143
编写于
2月 21, 2021
作者:
C
codecalm
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
charts docs
上级
1ba76551
变更
11
显示空白变更内容
内联
并排
Showing
11 changed file
with
208 addition
and
153 deletion
+208
-153
src/pages/_data/charts.yml
src/pages/_data/charts.yml
+86
-32
src/pages/_data/menu.yml
src/pages/_data/menu.yml
+0
-3
src/pages/_docs/charts.md
src/pages/_docs/charts.md
+51
-17
src/pages/_includes/docs/chart.html
src/pages/_includes/docs/chart.html
+19
-0
src/pages/_includes/example.html
src/pages/_includes/example.html
+22
-13
src/pages/_includes/ui/chart-heatmap.html
src/pages/_includes/ui/chart-heatmap.html
+18
-5
src/pages/_includes/ui/chart.html
src/pages/_includes/ui/chart.html
+11
-11
src/pages/charts-heatmap.html
src/pages/charts-heatmap.html
+0
-22
src/scss/demo/_examples.scss
src/scss/demo/_examples.scss
+1
-1
src/scss/tabler-vendors.scss
src/scss/tabler-vendors.scss
+0
-1
src/scss/vendor/_apexcharts.scss
src/scss/vendor/_apexcharts.scss
+0
-48
未找到文件。
src/pages/_data/charts.yml
浏览文件 @
b1af6143
demo-pie
:
type
:
donut
demo
:
true
sparkline
:
true
legend
:
true
series
:
-
name
:
Direct
color
:
blue
data
:
44
-
name
:
Affilliate
color
:
blue-300
data
:
55
-
name
:
E-mail
color
:
blue-100
data
:
12
-
name
:
Other
color
:
gray-300
data
:
2
demo-bar
:
type
:
bar
legend
:
true
horizontal
:
true
stacked
:
true
categories
:
[
2008
,
2009
,
2010
,
2011
,
2012
,
2013
,
2014
]
x-formatter
:
'
val
+
"K"'
series
:
-
name
:
Container for a Fanta
color
:
purple
data
:
[
44
,
55
,
41
,
37
,
22
,
43
,
21
]
-
name
:
Strange sunglasses
color
:
green
data
:
[
53
,
32
,
33
,
52
,
13
,
43
,
32
]
-
name
:
Pen Pineapple Apple Pen
color
:
yellow
data
:
[
12
,
17
,
11
,
9
,
15
,
11
,
20
]
-
name
:
Binoculars
color
:
red
data
:
[
9
,
7
,
5
,
8
,
6
,
9
,
4
]
-
name
:
Magical notebook
color
:
blue
data
:
[
25
,
12
,
19
,
32
,
25
,
24
,
10
]
demo-area
:
type
:
area
legend
:
true
datetime
:
true
series
:
-
name
:
series1
color
:
blue
data
:
[
56
,
40
,
39
,
47
,
34
,
48
,
44
]
-
name
:
series2
color
:
purple
data
:
[
45
,
43
,
30
,
23
,
38
,
39
,
54
]
demo-line
:
type
:
line
datetime
:
true
stroke-curve
:
straight
legend
:
true
series
:
-
name
:
Session Duration
color
:
yellow
data
:
[
117
,
92
,
94
,
98
,
75
,
110
,
69
,
80
,
109
,
113
,
115
,
95
]
-
name
:
Page Views
color
:
green
data
:
[
59
,
80
,
61
,
66
,
70
,
84
,
87
,
64
,
94
,
56
,
55
,
67
]
-
name
:
Total Visits
color
:
blue
data
:
[
53
,
51
,
52
,
41
,
46
,
60
,
45
,
43
,
30
,
50
,
58
,
59
]
social-referrals
:
demo
:
false
type
:
line
...
...
@@ -5,6 +76,7 @@ social-referrals:
height
:
12
legend
:
true
show-x
:
true
name
:
Social referrals
series
:
-
name
:
Facebook
color
:
facebook
...
...
@@ -40,41 +112,41 @@ completion-tasks:
-
name
:
Tasks completion
data
:
[
155
,
65
,
465
,
265
,
225
,
325
,
80
]
completion-tasks2
:
completion-tasks
-
2
:
demo
:
true
extend
:
completion-tasks
type
:
line
completion-tasks3
:
completion-tasks
-
3
:
demo
:
true
extend
:
completion-tasks
type
:
area
completion-tasks4
:
completion-tasks
-
4
:
demo
:
true
extend
:
completion-tasks
stroke-curve
:
straight
type
:
line
completion-tasks5
:
completion-tasks
-
5
:
demo
:
true
extend
:
completion-tasks
stroke-curve
:
stepline
type
:
line
completion-tasks6
:
completion-tasks
-
6
:
demo
:
true
extend
:
completion-tasks
type
:
bar
horizontal
:
true
completion-tasks7
:
completion-tasks
-
7
:
demo
:
true
extend
:
completion-tasks
type
:
line
datalabels
:
true
completion-tasks8
:
completion-tasks
-
8
:
demo
:
true
datetime
:
true
type
:
bar
...
...
@@ -83,19 +155,19 @@ completion-tasks8:
-
data
:
[
113
,
42
,
65
,
54
,
76
,
65
,
35
]
color
:
red
completion-tasks9
:
completion-tasks
-
9
:
demo
:
true
extend
:
completion-tasks8
extend
:
completion-tasks
-
8
stacked
:
true
completion-tasks10
:
completion-tasks
-
10
:
demo
:
true
extend
:
completion-tasks8
extend
:
completion-tasks
-
8
type
:
area
completion-tasks11
:
completion-tasks
-
11
:
demo
:
true
extend
:
completion-tasks8
extend
:
completion-tasks
-
8
type
:
area
stacked
:
true
...
...
@@ -107,23 +179,7 @@ tasks-overview:
-
name
:
A
data
:
[
44
,
32
,
48
,
72
,
60
,
16
,
44
,
32
,
78
,
50
,
68
,
34
,
26
,
48
,
72
,
60
,
84
,
64
,
74
,
52
,
62
,
50
,
32
,
22
]
total-sales
:
type
:
donut
demo
:
true
sparkline
:
true
series
:
-
name
:
Direct
color
:
blue
data
:
44
-
name
:
Affilliate
color
:
blue-300
data
:
55
-
name
:
E-mail
color
:
green-200
data
:
12
-
name
:
Other
color
:
gray-300
data
:
2
campaigns
:
type
:
radialBar
...
...
@@ -148,7 +204,6 @@ tasks:
fill
:
true
remove-padding
:
true
hide-tooltip
:
true
legend-position
:
'
top'
series
:
-
name
:
'
New'
color
:
blue
...
...
@@ -165,7 +220,6 @@ development-activity:
groups
:
[
1
,
2
,
3
]
hide-points
:
true
remove-padding
:
true
legend-position
:
'
top'
sparkline
:
true
datetime
:
true
series
:
...
...
src/pages/_data/menu.yml
浏览文件 @
b1af6143
...
...
@@ -53,9 +53,6 @@ base:
charts
:
url
:
charts.html
title
:
Charts
charts-heatmap
:
url
:
charts-heatmap.html
title
:
Charts heatmap
pagination
:
url
:
pagination.html
title
:
Pagination
...
...
src/pages/_docs/charts.md
浏览文件 @
b1af6143
---
title
:
Charts
menu
:
docs.plugins.charts
libs
:
apexcharts
description
:
Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
---
[
ApexCharts
](
https://apexcharts.com/
)
documentation.
## Default markup
## Line Chart
Line charts are a typical pictorial representation that depicts trends and behaviors over time.
{% capture code %}
{% include docs/chart.html chart="demo-line" %}
{% endcapture %}
{% include example.html code=code columns=1 %}
## Area Chart
Area charts are used to represent quantitative variations.
{% capture code %}
{% include docs/chart.html chart="demo-area" %}
{% endcapture %}
{% include example.html code=code columns=1 %}
## Bar Chart
A bar chart is the best tool for displaying comparisons between categories of data.
{% capture code %}
{% include docs/chart.html chart="demo-bar" %}
{% endcapture %}
{% include example.html code=code columns=2 %}
## Pie Chart
Pie charts are an instrumental visualization tool useful in expressing data and information in terms of percentages, ratio.
{% capture code %}
{% include docs/chart.html chart="demo-pie" %}
{% endcapture %}
{% include example.html code=code columns=1 %}
# Heatmap Chart
Heatmap is a visualization tool that employs color the way a bar chart employs height and width in representing data.
{% capture code %}
{% include docs/chart.html chart="heatmap-basic" heatmap=true %}
{% endcapture %}
{% include example.html code=code columns=2 %}
# Advanced example
{% for chart in site.data.charts %}
{% if chart[1].display %}
{% capture code %}
{% assign data = chart[0] %}
{% assign key = 'chart-' | append: data %}
<div
class=
"card"
>
<div
class=
"card-header"
>
<h3
class=
"card-title"
>
{{ chart[1].name }} {{ chart[0] }}
</h3>
</div>
<div
class=
"card-body"
>
<div
id=
"{{ key }}"
style=
"height: 16rem"
></div>
</div>
</div>
{% include ui/chart.html id=key chart-id=data show-scripts=true %}
{% include docs/chart.html chart="social-referrals" %}
{% endcapture %}
{% include example.html code=code %}
{% endif %}
{% endfor %}
{% include example.html code=code columns=2 %}
\ No newline at end of file
src/pages/_includes/docs/chart.html
0 → 100644
浏览文件 @
b1af6143
{% assign chart-id = include.chart %}
{% assign data = site.data.charts[chart-id] %}
{% if data or include.heatmap %}
<div
class=
"card"
>
{% if include.title %}
<div
class=
"card-header"
>
<h3
class=
"card-title"
>
{{ include.title }}
</h3>
</div>
{% endif %}
<div
class=
"card-body"
>
{% if include.heatmap %}
{% include ui/chart-heatmap.html chart-id=chart-id show-scripts=true size="lg" %}
{% else %}
{% include ui/chart.html chart-id=chart-id show-scripts=true size="lg" %}
{% endif %}
</div>
</div>
{% endif %}
\ No newline at end of file
src/pages/_includes/example.html
浏览文件 @
b1af6143
{% assign code = code | replace_regex: '// @formatter:(off|on)', '' %}
{% assign demo-code = code %}
{% assign demo-code = demo-code | replace_regex: '\{% (end)?hide %\}', '' %}
{% assign demo-code = demo-code | replace_regex: 'href="#"', 'href="javascript:void(0)"' %}
...
...
@@ -19,23 +17,34 @@
</div>
</div>
{% assign code = code | strip %}
{% capture html %}
{{ code }}
{% removeemptylines %}
{{ site.captured_global.scripts | last }}
{% endremoveemptylines %}
{% endcapture %}
{% assign html = html | strip %}
{% assign html = html | replace_regex: '// @formatter:(off|on)', '' %}
{% capture new_line %}
{% endcapture %}
{% assign
code = code
| replace_regex: "\n\n+", new_line %}
{% assign
html = html
| replace_regex: "\n\n+", new_line %}
{% unless include.show-svg %}
{% assign code = code
| replace_regex: '
<svg
[^
>
]*class="icon ([^"]+)"[^>]*>.*?
<
\/
svg
>
', '
<!-- SVG icon code with class="\1" -->
' %}
{% assign code = code
| replace_regex: '
<svg
[^
>
]*>.*?
<
\/
svg
>
', '
<!-- SVG icon code -->
' %}
{% assign html = html
| replace_regex: '
<svg
[^
>
]*class="icon ([^"]+)"[^>]*>.*?
<
\/
svg
>
', '
<!-- SVG icon code with class="\1" -->
' %}
{% assign html = html
| replace_regex: '
<svg
[^
>
]*>.*?
<
\/
svg
>
', '
<!-- SVG icon code -->
' %}
{% endunless %}
{% assign code = code | replace_regex: 'url\(([^\)]+)\)', 'url(...)' %}
{% assign code = code | replace_regex: 'src="([^"]+)"', 'src="..."' %}
{% assign code = code | replace_regex: 'href="([^#][^"]+)"', 'href="#"' %}
{% assign code = code | replace_regex: '\{% hide %\}.*?\{% endhide %\}', '' %}
{% assign code = code | htmlbeautifier %}
{% assign html = html | replace_regex: 'url\(([^\)]+)\)', 'url(...)' %}
{% assign html = html | replace_regex: 'src="([^"]+)"', 'src="..."' %}
{% assign html = html | replace_regex: 'href="([^#][^"]+)"', 'href="#"' %}
{% assign html = html | replace_regex: '\{% hide %\}.*?\{% endhide %\}', '' %}
{% assign html = html | htmlbeautifier %}
<div
class=
"example-code"
>
{% highlight html %}{{
code
}}{% endhighlight %}
{% highlight html %}{{
html
}}{% endhighlight %}
</div>
src/pages/_includes/ui/chart-heatmap.html
浏览文件 @
b1af6143
...
...
@@ -58,17 +58,30 @@
],
xaxis
:
{
type
:
"
category
"
}
},
legend
:
{
{
%
if
include
.
legend
%
}
show
:
true
,
position
:
'
bottom
'
,
offsetY
:
8
,
markers
:
{
width
:
10
,
height
:
10
,
radius
:
100
,
},
itemMargin
:
{
horizontal
:
8
,
},
{
%
else
%
}
show
:
false
,
{
%
endif
%
}
},
};
(
new
ApexCharts
(
document
.
querySelector
(
"
#chart-{{ id }}
"
),
options
)).
render
();
</script>
{% endcapture %}
{% if include.show-scripts %}
{{ script }}
{% else %}
{% capture_global scripts %}
{{ script }}
{% endcapture_global %}
{% endif %}
src/pages/_includes/ui/chart.html
浏览文件 @
b1af6143
...
...
@@ -144,7 +144,12 @@
{
%
if
data
.
categories
or
data
.
datetime
%
}
xaxis
:
{
labels
:
{
padding
:
0
padding
:
0
,
{
%
if
data
.
x
-
formatter
%
}
formatter
:
function
(
val
)
{
return
{{
data
.
x
-
formatter
}}
},
{
%
endif
%
}
},
tooltip
:
{
enabled
:
false
...
...
@@ -155,7 +160,7 @@
},
{
%
endif
%
}
{
%
if
data
.
categories
%
}
categories
:
[{
%
for
category
in
data
.
categories
%
}
"
{{ category }}
"
{
%
unless
forloop
.
last
%
},
{
%
endunless
%
}{
%
endfor
%
}],
categories
:
[{
%
for
category
in
data
.
categories
%
}
'
{{ category }}
'
{
%
unless
forloop
.
last
%
},
{
%
endunless
%
}{
%
endfor
%
}],
{
%
endif
%
}
{
%
if
data
.
datetime
%
}
...
...
@@ -191,14 +196,13 @@
{
%
endif
%
}
legend
:
{
{
%
if
include
.
legend
%
}
{
%
if
data
.
legend
%
}
show
:
true
,
position
:
'
bottom
'
,
height
:
32
,
offsetY
:
8
,
markers
:
{
width
:
8
,
height
:
8
,
width
:
10
,
height
:
10
,
radius
:
100
,
},
itemMargin
:
{
...
...
@@ -238,12 +242,8 @@
</script>
{% endcapture %}
{% if include.show-scripts %}
{{ script }}
{% else %}
{% capture_global scripts %}
{{ script }}
{% endcapture_global %}
{% endif %}
{% endif %}
src/pages/charts-heatmap.html
已删除
100644 → 0
浏览文件 @
1ba76551
---
title: Heatmap Charts
page-header: Heatmap Charts
libs: apexcharts
---
<div
class=
"row row-cards"
>
<div
class=
"col-xl-6"
>
{% include cards/charts/heatmap.html id="heatmap-basic" title="Basic Heatmap - Single Series" %}
</div>
{% unless jekyll.environment == 'development' %}
<div
class=
"col-xl-6"
>
{% include cards/charts/heatmap.html id="heatmap-multiple" title="Heatmap - Multiple series" colors=12 %}
</div>
<div
class=
"col-xl-6"
>
{% include cards/charts/heatmap.html id="heatmap-labels" title="Heatmap - Labels included" labels=true %}
</div>
<div
class=
"col-xl-6"
>
{% include cards/charts/heatmap.html id="heatmap-colors" title="Heatmap - Color range" scale=true %}
</div>
{% endunless %}
</div>
src/scss/demo/_examples.scss
浏览文件 @
b1af6143
.example
{
padding
:
2rem
;
margin
:
2rem
0
;
margin
:
1rem
0
2rem
;
border
:
1px
solid
$border-color
;
border-radius
:
3px
3px
0
0
;
position
:
relative
;
...
...
src/scss/tabler-vendors.scss
浏览文件 @
b1af6143
@import
"config"
;
@import
"vendor/apexcharts"
;
@import
"vendor/nouislider"
;
@import
"vendor/litepicker"
;
@import
"vendor/choices"
;
\ No newline at end of file
src/scss/vendor/_apexcharts.scss
已删除
100644 → 0
浏览文件 @
1ba76551
.apexcharts-title-text
{
font-weight
:
$font-weight-bold
!
important
;
}
.apexcharts-tooltip-title
{
font-weight
:
$font-weight-bold
!
important
;
padding-bottom
:
.25rem
!
important
;
}
.apexcharts-gridline
,
.apexcharts-ycrosshairs
,
.apexcharts-xaxis-tick
{
stroke
:
$border-color
!
important
;
}
.apexcharts-tooltip
{
line-height
:
1
;
color
:
$white
;
background
:
$dark
!
important
;
border
:
0
!
important
;
border-radius
:
3px
!
important
;
}
.apexcharts-tooltip-title
{
margin
:
0
!
important
;
background
:
transparent
!
important
;
border
:
0
!
important
;
}
.apexcharts-tooltip-series-group
{
padding
:
0
8px
!
important
;
}
.apexcharts-tooltip-marker
{
width
:
.5rem
;
height
:
.5rem
;
}
.apexcharts-gridline
,
.apexcharts-ycrosshairs
,
.apexcharts-xaxis-tick
{
stroke
:
$gray-300
;
}
.apexcharts-yaxis-label
,
.apexcharts-xaxis-label
{
fill
:
$text-muted
;
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录