Skip to content

T
Tabler

Dashboards / Tabler
12 个月 前同步成功

通知 0
Star 0
Fork 0
T
Tabler

体验新版 GitCode，发现更多精彩内容 >>

提交 de867150 编写于 作者: C codecalm
浏览文件
操作

apexcharts, homepage charts

上级 c3b7aae8
隐藏空白更改
内联 并排
Showing with 184 addition and 75 deletion
pages/_data/charts.yml
浏览文件 @ de867150
mentions:
stacked: true
datetime: true
show-x: true
series:
- name: Web
data: [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 2, 12, 5, 8, 22, 6, 8, 6, 4, 1, 8, 24, 29, 51, 40, 47, 23, 26, 50, 26, 41, 22, 46, 47, 81, 46, 6]
color: blue
- name: Social
data: [2, 5, 4, 3, 3, 1, 4, 7, 5, 1, 2, 5, 3, 2, 6, 7, 7, 1, 5, 5, 2, 12, 4, 6, 18, 3, 5, 2, 13, 15, 20, 47, 18, 15, 11, 10, 0]
color: blue-300
- name: Other
data: [2, 9, 1, 7, 8, 3, 6, 5, 5, 4, 6, 4, 1, 9, 3, 6, 7, 5, 2, 8, 4, 9, 1, 2, 6, 7, 5, 1, 8, 3, 2, 3, 4, 9, 7, 1, 6]
color: green-200
completion-tasks:
demo: true
type: bar
days-labels-count: 7
datetime: true
debug: true
series:
- name: Tasks completion
......@@ -43,6 +57,8 @@ completion-tasks7:
completion-tasks8:
demo: true
datetime: true
type: bar
series:
- data: [155, 65, 465, 265, 225, 325, 80]
- data: [113, 42, 65, 54, 76, 65, 35]
......@@ -81,14 +97,14 @@ total-sales:
color: blue
data: 44
- name: Affilliate
color: green
color: blue-300
data: 55
- name: Sponsored
color: red
data: 35
- name: E-mail
color: yellow
color: green-200
data: 12
- name: Other
color: gray-300
data: 2
campaigns:
type: radialBar
......@@ -132,7 +148,7 @@ development-activity:
remove-padding: true
legend-position: 'top'
sparkline: true
days-labels-count: 30
datetime: true
series:
- name: 'Purchases'
color: blue
......@@ -140,7 +156,6 @@ development-activity:
line:
type: line
show-grid: true
categories: ['2013', '2014', '2015', '2016', '2017', '2018']
series:
- name: Development
......@@ -157,7 +172,6 @@ line-stroke:
demo: true
type: line
stroke-curve: straight
show-grid: true
categories: ['2013', '2014', '2015', '2016', '2017', '2018', '2019']
series:
- name: Development
......@@ -174,7 +188,6 @@ stepline:
demo: true
type: line
stroke-curve: stepline
show-grid: true
series:
- name: Development
color: orange
......@@ -186,7 +199,6 @@ temperature:
show-labels: true
show-data-labels: true
show-markers: true
show-grid: true
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
series:
- name: Tokyo
......@@ -320,7 +332,7 @@ combination:
revenue-bg:
type: area
days-labels-count: 30
datetime: true
sparkline: true
series:
- name: Profits
......@@ -328,7 +340,7 @@ revenue-bg:
new-clients:
type: line
days-labels-count: 30
datetime: true
sparkline: true
stroke-width: [2, 1]
stroke-dash: [0, 3]
......@@ -342,7 +354,7 @@ new-clients:
active-users:
type: bar
days-labels-count: 30
datetime: true
sparkline: true
series:
- name: Profits
......
pages/_includes/cards/charts/active-users.html
浏览文件 @ de867150
<div class="card">
<div class="card-body">
<div class="d-flex">
<div>Active users</div>
<div class="d-flex align-items-center">
<div class="subheader">Active users</div>
<div class="ml-auto">
{% include parts/dropdown/days.html %}
</div>
......
pages/_includes/cards/charts/new-clients.html
浏览文件 @ de867150
<div class="card">
<div class="card-body">
<div class="d-flex">
<div>New clients</div>
<div class="d-flex align-items-center">
<div class="subheader">New clients</div>
<div class="ml-auto">
{% include parts/dropdown/days.html %}
</div>
......
pages/_includes/cards/charts/revenue.html
浏览文件 @ de867150
<div class="card">
<div class="card-body">
<div class="d-flex">
<div>Revenue</div>
<div class="d-flex align-items-center">
<div class="subheader">Revenue</div>
<div class="ml-auto">
{% include parts/dropdown/days.html %}
</div>
......
pages/_includes/cards/charts/sales.html
浏览文件 @ de867150
<div class="card">
<div class="card-body">
<div class="d-flex">
<div>Sales</div>
<div class="d-flex align-items-center">
<div class="subheader">Sales</div>
<div class="ml-auto">
{% include parts/dropdown/days.html %}
</div>
......
pages/_includes/cards/map.html
浏览文件 @ de867150
{% assign map = include.map | default: "world" %}
<div class="card">
{% if include.title %}
<div class="card-header">
<h3 class="card-title">{{ include.title }}</h3>
</div>
{% endif %}
<div class="card-body">
{% include ui/map.html map-id=map color="blue" %}
</div>
<div class="card-body">
{% if include.title %}
<h3 class="card-title">{{ include.title }}</h3>
{% endif %}
{% include ui/map.html map-id=map color="blue" height=15 %}
</div>
</div>
pages/_includes/layout/homepage.html
浏览文件 @ de867150
......@@ -13,6 +13,19 @@
{% include cards/charts/active-users.html %}
</div>
<div class="col-7">
<div class="card">
<div class="card-body">
<h3 class="card-title">Traffic summary</h3>
{% include ui/chart.html chart-id="mentions" size="lg" legend=true %}
</div>
</div>
</div>
<div class="col-5">
{% include cards/map.html title="Top countries" %}
</div>
<div class="col-lg-6">
<div class="row row-cards">
<div class="col-sm-6">
......@@ -33,23 +46,10 @@
</div>
</div>
</div>
<div class="col-lg-6">
{% include cards/map.html title="Top users" %}
</div>
<div class="col-lg-6">
{% include cards/development-activity.html %}
</div>
<div class="col-lg-6">
<div class="row row-deck row-cards">
<div class="col-md-12">
{% comment %}{% include cards/charts/card.html chart-id="temperature" height=10 %}{% endcomment %}
</div>
<div class="col-md-12">
{% comment %}{% include cards/charts/card.html chart-id="donut" height=10 %}{% endcomment %}
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
{% include cards/small-stats.html color="blue" icon="dollar-sign" count="132" subtitle="Sales" description="12 waiting payments" %}
......
pages/_includes/ui/chart.html
浏览文件 @ de867150
......@@ -4,8 +4,11 @@
{% assign class = include.class %}
{% if include['size'] == 'sm' %}
{% assign class = class | append: ' chart-sm' | strip %}
{% assign height = 2.5 %}
{% assign class = class | append: ' chart-sm' | strip %}
{% assign height = 2.5 %}
{% elsif include['size'] == 'lg' %}
{% assign class = class | append: ' chart-lg' | strip %}
{% assign height = 15 %}
{% endif %}
{% if data %}
......@@ -17,16 +20,17 @@
{% append_lib apexcharts %}
{% capture script %}
{% assign chart-type = data.type | default: 'bar' %}
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
{% 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 | default: 'bar' }}",
type: "{{ chart-type }}",
fontFamily: 'inherit',
height: {{ height | times: 16 }},
......@@ -52,23 +56,28 @@
{% endif %}
},
{% if data.type == 'bar' and data.horizontal %}
{% if chart-type == 'bar' %}
plotOptions: {
bar: {
{% if data.horizontal %}
barHeight: '50%',
horizontal: true,
{% else %}
columnWidth: '50%',
{% endif %}
}
},
{% endif %}
{% if data.datalabels %}
{% if chart-type == 'bar' or chart-type == 'area' %}
dataLabels: {
enabled: true,
enabled: {% if data.datalabels %}true{% else %}false{% endif %},
},
{% endif %}
fill: {
opacity: {% if data.type == 'area' %}.16{% else %}1{% endif %},
{% if data.type == 'area' %}type: 'solid'{% endif %}
opacity: {% if chart-type == 'area' %}.16{% else %}1{% endif %},
{% if chart-type == 'area' %}type: 'solid'{% endif %}
},
{% if data.title %}
......@@ -83,7 +92,7 @@
},
{% endif %}
{% if data.type == 'area' or data.type == 'line' %}
{% if chart-type == 'area' or chart-type == 'line' %}
stroke: {
width: {% if data.stroke-width %}[{{ data.stroke-width | join: ', '}}]{% else %}2{% endif %},
{% if data.stroke-dash %}dashArray: [{{ data.stroke-dash | join: ', '}}],{% endif %}
......@@ -93,7 +102,7 @@
{% endif %}
{% if data.series %}
{% if data.type == 'pie' or data.type == 'donut' or data.type == 'radialBar' %}
{% if chart-type == 'pie' or chart-type == 'donut' or chart-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 %}],
......@@ -104,11 +113,28 @@
{% endif %}
{% endif %}
{% if data.show - grid %}
grid: {
show: true,
{% unless data.sparkline %}
padding: {
top: -20,
right: 0,
left: -4,
bottom: -8
},
{% endunless %}
{% if data.hide-grid %}
show: false,
{% else %}
strokeDashArray: 4,
{% if data.show-x %}
xaxis: {
lines: {
show: true
}
},
{% endif %}
{% endif %}
},
{% endif %}
{% if data.show-data-labels %}
dataLabels: {
......@@ -116,34 +142,83 @@
},
{% endif %}
{% if data.categories or data.days-labels-count %}
{% if data.categories or data.datetime %}
xaxis: {
labels: {
padding: 0
},
tooltip: {
enabled: false
},
{% if chart-type == 'area' or chart-type == 'bar' %}
axisBorder: {
show: false,
},
{% endif %}
{% if data.categories %}
categories: [{% for category in data.categories %}"{{ category }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
{% endif %}
{% endif %}
{% if data.days-labels-count %}
type: 'datetime', {% endif %}
{% if data.datetime %}
type: 'datetime',
{% endif %}
},
{% endif %}
{% if data.days-labels-count %}
labels: [...Array({{ data.days-labels-count }}).keys()].map(n => '2019-09-' + (n + 1)),
{% unless chart-type == 'pie' or chart-type == 'donut' or chart-type == 'radialBar' %}
yaxis: {
labels: {
padding: 4
},
{% if data.y-title %}
title: {
text: '{{ data.y-title | escape }}'
}
{% endif %}
},
{% endunless %}
{% if data.datetime %}
{% assign date = data.start-date | default: '2020-06-20' | date: "%s" %}
{% assign days-count = data.series[0].data.size %}
labels: [
{% for i in (1..days-count) %}{% assign date = date | plus: 86400 %}'{{ date | timestamp_to_date }}'{% unless forloop.last %}, {% endunless %}{% endfor %}
],
{% endif %}
{% if data.series %}
colors: [{% for serie in data.series %}{% assign color = serie.color | default: data.color | default: 'blue' %}"{{ color | tabler_color }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
{% endif %}
{% unless data.show-legend %}
legend: {
{% if include.legend %}
show: true,
position: 'bottom',
height: 32,
offsetY: -12,
markers: {
width: 8,
height: 8,
radius: 100,
},
itemMargin: {
horizontal: 8,
},
{% else %}
show: false,
{% endif %}
},
{% endunless %}
{% if data.hide-tooltip %}
{% if data.hide-tooltip or chart-type == 'pie' or chart-type == 'donut' %}
tooltip: {
enabled: false
{% if data.hide-tooltip %}
enabled: false,
{% endif %}
{% if chart-type == 'pie' or chart-type == 'donut' %}
fillSeriesColor: false
{% endif %}
},
{% endif %}
......
pages/_plugins/jekyll-filters.rb
浏览文件 @ de867150
require 'date'
module Jekyll
module JekyllFilter
def to_pretty_time(value)
......@@ -108,6 +110,10 @@ module Jekyll
def miliseconds_to_minutes(miliseconds)
seconds_to_minutes(miliseconds.to_i / 1000)
end
def timestamp_to_date(timestamp)
DateTime.strptime(timestamp.to_s, '%s').strftime('%F')
end
end
end
......
pages/tmp2.html
浏览文件 @ de867150
......@@ -5,17 +5,26 @@ page-title: Search results
<div class="row row-cards">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
{% include ui/chart.html chart-id="mentions" size="lg" legend=true %}
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut expedita fugit ipsa placeat quibusdam repellat soluta ut. Architecto cum cupiditate, distinctio fugit hic laboriosam magni optio quibusdam, quis, rem sed.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut expedita fugit ipsa placeat quibusdam repellat
soluta ut. Architecto cum cupiditate, distinctio fugit hic laboriosam magni optio quibusdam, quis, rem sed.
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut expedita fugit ipsa placeat quibusdam repellat soluta ut. Architecto cum cupiditate, distinctio fugit hic laboriosam magni optio quibusdam, quis, rem sed.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut expedita fugit ipsa placeat quibusdam repellat
soluta ut. Architecto cum cupiditate, distinctio fugit hic laboriosam magni optio quibusdam, quis, rem sed.
</div>
</div>
</div>
......
scss/ui/_charts.scss
浏览文件 @ de867150
......@@ -9,15 +9,19 @@
.chart-sm {
height: 2.5rem;
//outline: 1px solid red;
}
.chart-lg {
height: 15rem;
}
.chart-square {
height: 5.75rem;
//outline: 1px solid red;
}
/**
Chart sparkline
*/
.chart-sparkline {
position: relative;
width: 4rem;
......@@ -48,4 +52,4 @@
width: 1rem;
height: 1rem;
}
}
}
\ No newline at end of file
scss/vendor/_apexcharts.scss
浏览文件 @ de867150
......@@ -29,3 +29,9 @@
width: .5rem;
height: .5rem;
}
.apexcharts-gridline,
.apexcharts-ycrosshairs,
.apexcharts-xaxis-tick {
stroke: $gray-300;
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或