提交 5af2a5b4 编写于 作者: D Dawid Harat

Merge branch 'dev-doc-datatables' of https://github.com/tabler/tabler into dev-doc-datatables

......@@ -10,8 +10,8 @@ indent_style=tab
tab_width=3
[*.html]
indent_style=space
indent_size=3
insert_final_newline=false
[*.md]
indent_style=tab
......@@ -20,12 +20,3 @@ tab_width=3
[*.js.map]
indent_style=tab
indent_size=3
[{*.css,*.scss}]
indent_style=space
indent_size=2
insert_final_newline = true
[{*.yml,*.yaml}]
indent_style=space
indent_size=2
total-sales:
type: donut
demo: true
sparkline: true
hide-legend: true
name: Total sales
series:
- name: Direct
color: blue
......@@ -16,26 +18,26 @@ total-sales:
color: yellow
data: 12
total-sales2:
type: radalBar
campaigns:
name: Campaigns
demo: true
type: radialBar
sparkline: true
hide-legend: true
series:
- name: Direct
- name: Total Sent
color: blue
data: 44
- name: Affilliate
color: green
data: 55
- name: Sponsored
color: red
data: 35
- name: E-mail
color: yellow
data: 12
- name: Reached
color: blue-light
data: 36
- name: Opened
color: blue-lighten
data: 18
tasks:
name: Tasks
demo: true
type: line
categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W']
groups: [1, 2, 3]
......@@ -72,7 +74,7 @@ development-activity:
line:
name: Employment Growth
display: true
demo: true
type: line
show-grid: true
categories: ['2013', '2014', '2015', '2016', '2017', '2018']
......@@ -89,7 +91,7 @@ line:
line-stroke:
name: Line chart
display: true
demo: true
type: line
stroke-curve: straight
hide-legend: true
......@@ -108,7 +110,7 @@ line-stroke:
stepline:
name: Stepline
display: true
demo: true
type: line
hide-legend: true
stroke-curve: stepline
......@@ -120,7 +122,7 @@ stepline:
temperature:
name: Monthly Average Temperature
display: true
demo: true
type: line
show-labels: true
show-data-labels: true
......@@ -139,7 +141,7 @@ temperature:
area:
name: Lorem ipsum
display: true
demo: true
type: area
hide-legend: true
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
......@@ -154,7 +156,7 @@ area:
area-spline:
name: Lorem ipsum
display: true
demo: true
type: area
spline: true
hide-legend: true
......@@ -170,12 +172,11 @@ area-spline:
area-spline-stacked:
name: Lorem ipsum
display: true
demo: true
type: area
spline: true
hide-legend: true
stacked: true
# groups: [1, 2]
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
series:
- name: Maximum
......@@ -188,7 +189,7 @@ area-spline-stacked:
spline:
name: Wind speed during two days
display: true
demo: true
type: line
spline: true
show-labels: true
......@@ -205,7 +206,7 @@ spline:
spline-rotated:
name: Lorem ipsum
display: true
demo: true
type: line
spline: true
rotated: true
......@@ -222,7 +223,7 @@ spline-rotated:
bar:
name: Lorem ipsum
display: true
demo: true
type: bar
hide-legend: true
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
......@@ -236,7 +237,7 @@ bar:
bar-rotated:
name: Lorem ipsum
display: true
demo: true
type: bar
rotated: true
hide-legend: true
......@@ -252,10 +253,9 @@ bar-rotated:
bar-stacked:
name: Lorem ipsum
display: true
demo: true
type: bar
stacked: true
# groups: [1, 2]
hide-legend: true
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
series:
......@@ -269,7 +269,7 @@ bar-stacked:
pie:
name: Lorem ipsum
display: true
demo: true
type: pie
hide-legend: true
show-data-labels: true
......@@ -290,7 +290,7 @@ pie:
donut:
name: Lorem ipsum
display: true
demo: true
type: donut
sparkline: true
hide-legend: true
......@@ -305,7 +305,7 @@ donut:
scatter:
name: Lorem ipsum
display: true
demo: true
type: scatter
hide-legend: true
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
......@@ -320,7 +320,7 @@ scatter:
combination:
name: Combination chart
display: true
demo: true
type: bar
types:
2: 'line'
......
{% assign data = site.data.charts[include.chart-id] %}
{% assign height = include.height | default: 10 %}
<div class="card">
<div class="card-body">
{% if include.title %}
<h3 class="card-title">{{ include.title }}</h3>
{% endif %}
{% include ui/chart.html height=height chart-id=include.chart-id %}
</div>
</div>
......@@ -4,6 +4,6 @@
<h3 class="card-title">Total sales</h3>
{% include ui/chart.html chart-id="total-sales" height=15 %}
{% include ui/chart.html chart-id="total-sales2" height=15 %}
{% include ui/chart.html chart-id="campaigns" height=15 %}
</div>
</div>
......@@ -2,7 +2,7 @@
<div class="card-header">
<h3 class="card-title">Invoices</h3>
</div>
<div class="card-body d-flex justify-content-between flex-nowrap table-responsive border-bottom text-nowrap">
<div class="card-body d-flex justify-content-between flex-nowrap table-responsive border-bottom text-nowrap overflow-hidden">
<div class="mb-0">
Show
......
......@@ -43,10 +43,10 @@
<div class="col-lg-6">
<div class="row row-deck">
<div class="col-md-12">
{% include cards/charts/card.html chart-id="temperature" height=10 %}
{% comment %}{% include cards/charts/card.html chart-id="temperature" height=10 %}{% endcomment %}
</div>
<div class="col-md-12">
{% include cards/charts/card.html chart-id="donut" height=10 %}
{% comment %}{% include cards/charts/card.html chart-id="donut" height=10 %}{% endcomment %}
</div>
</div>
</div>
......
......@@ -13,130 +13,129 @@
{% capture script %}
<script>
document.addEventListener("DOMContentLoaded", function(event) {
{% if jekyll.environment == 'development' %}window.tabler_chart = window.tabler_chart || {};{% endif %}
window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
chart: {
type: '{{ data.type }}',
height: {{ height | times: 16 }},
{% if data.sparkline %}
sparkline: {
enabled: true
},
{% endif %}
{% if data.stacked %}
stacked: true,
{% endif %}
},
{% if data.type == 'area' %}
fill: {
opacity: .16
},
{% endif %}
{% if data.title %}
title: {
text: '{{ data.title | escape }}'
},
{% endif %}
{% if data.dashed-history or data.stroke-curve %}
stroke: {
{% if data.dashed-history %}
width: [2, 1],
dashArray: [0, 3],
{% endif %}
{% if data.stroke-curve %}
curve: '{{ data.stroke-curve }}',
{% endif %}
},
{% endif %}
{% if data.series %}
{% if data.type == 'pie' or data.type == 'donut' %}
series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %},{% endunless %}{% endfor %}],
{% else %}
series: [{% for serie in data.series %}{
name: '{{ serie.name }}',
data: [{{ serie.data | join: ', '}}]
}{% unless forloop.last %},{% endunless %}{% endfor %}],
{% endif %}
{% endif %}
{% if data.show-grid %}
grid: {
show: true,
},
{% endif %}
{% if data.show-data-labels %}
dataLabels: {
enabled: true,
},
{% endif %}
{% if data.categories or data.days-labels-count %}
xaxis: {
{% if data.categories %}categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],{% endif %}
{% if data.days-labels-count %}type: 'datetime',{% endif %}
},
{% endif %}
{% if data.auto-min %}
yaxis: {
min: function(min) { return min },
},
{% endif %}
{% if data.days-labels-count %}
labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n+1}`),
{% endif %}
{% if data.rotated %}
plotOptions: {
bar: {
horizontal: true,
}
},
{% endif %}
{% if data.series %}
colors: [ //chart colors
{% for serie in data.series %}
{{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
],
{% endif %}
{% if data.hide-legend %}
legend: {
show: false, //hide legend
},
{% endif %}
{% if data.hide-tooltip %}
tooltip: {
enabled: false
},
{% endif %}
{% if data.hide-points %}
point: {
show: false
},
{% endif %}
{% if data.show-markers %}
markers: {
size: 2
},
{% endif %}
})).render();
});
document.addEventListener("DOMContentLoaded", function(event) {
{% if jekyll.environment == 'development' %}window.tabler_chart = window.tabler_chart || {};{% endif %}
window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
chart: {
type: '{{ data.type }}',
height: {{ height | times: 16 }},
{% if data.sparkline %}
sparkline: {
enabled: true
},
{% endif %}
{% if data.stacked %}
stacked: true,
{% endif %}
},
{% if data.type == 'area' %}
fill: {
opacity: .16
},
{% endif %}
{% if data.title %}
title: {
text: '{{ data.title | escape }}'
},
{% endif %}
{% if data.dashed-history or data.stroke-curve %}
stroke: {
{% if data.dashed-history %}
width: [2, 1],
dashArray: [0, 3],
{% endif %}
{% if data.stroke-curve %}
curve: '{{ data.stroke-curve }}',
{% endif %}
},
{% endif %}
{% if data.series %}
{% if data.type == 'pie' or data.type == 'donut' or data.type == 'radialBar' %}
series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %},{% endunless %}{% endfor %}],
{% else %}
series: [{% for serie in data.series %}{
name: '{{ serie.name }}',
data: [{{ serie.data | join: ', '}}]
}{% unless forloop.last %},{% endunless %}{% endfor %}],
{% endif %}
{% endif %}
{% if data.show-grid %}
grid: {
show: true,
},
{% endif %}
{% if data.show-data-labels %}
dataLabels: {
enabled: true,
},
{% endif %}
{% if data.categories or data.days-labels-count %}
xaxis: {
{% if data.categories %}categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],{% endif %}
{% if data.days-labels-count %}type: 'datetime',{% endif %}
},
{% endif %}
{% if data.auto-min %}
yaxis: {
min: function(min) { return min },
},
{% endif %}
{% if data.days-labels-count %}
labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n+1}`),
{% endif %}
{% if data.rotated %}
plotOptions: {
bar: {
horizontal: true,
}
},
{% endif %}
{% if data.series %}
colors: [
{% for serie in data.series %}
{{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
],
{% endif %}
{% if data.hide-legend %}
legend: {
show: false, //hide legend
},
{% endif %}
{% if data.hide-tooltip %}
tooltip: {
enabled: false
},
{% endif %}
{% if data.hide-points %}
point: {
show: false
},
{% endif %}
{% if data.show-markers %}
markers: {
size: 2
},
{% endif %}
})).render();
});
</script>
{% endcapture %}
......
---
title: Charts
page-title: Charts
menu: charts
---
<div class="row">
{% for chart in site.data.charts %}
{% if chart[1].display %}
{% assign chart-name = chart[0] %}
{% if chart[1].demo %}
{% assign chart-id = chart[0] %}
<div class="col-lg-6 col-xl-4">
{% include cards/charts/card.html chart-id=chart-name %}
<div class="card">
{% if chart[1].name %}
<div class="card-header">
<h3 class="card-title">{{ chart[1].name }}</h3>
</div>
{% endif %}
<div class="card-body">
{% include ui/chart.html chart-id=chart-id height=15 %}
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册