Skip to content

T
Tabler

Dashboards / Tabler
10 个月 前同步成功

通知 0
Star 0
Fork 0
T
Tabler

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

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

Social referrals chart

上级 36190f30
隐藏空白更改
内联 并排
Showing with 167 addition and 110 deletion
pages/_data/charts.yml
浏览文件 @ 9c5888c7
social-referrals:
demo: false
type: line
datetime: true
height: 12
legend: true
show-x: true
series:
- name: Facebook
color: facebook
data: [13281, 8521, 15038, 9983, 15417, 8888, 7052, 14270, 5214, 9587, 5950, 16852, 17836, 12217, 17406, 12262, 9147, 14961, 18292, 15230, 13435, 10649, 5140, 13680, 4508, 13271, 13413, 5543, 18727, 18238, 18175, 6246, 5864, 17847, 9170, 6445, 12945, 8142, 8980, 10422, 15535, 11569, 10114, 17621, 16138, 13046, 6652, 9906, 14100, 16495, 6749]
- name: Twitter
color: twitter
data: [3680, 1862, 3070, 2252, 5348, 3091, 3000, 3984, 5176, 5325, 2420, 5474, 3098, 1893, 3748, 2879, 4197, 5186, 4213, 4334, 2807, 1594, 4863, 2030, 3752, 4856, 5341, 3954, 3461, 3097, 3404, 4949, 2283, 3227, 3630, 2360, 3477, 4675, 1901, 2252, 3347, 2954, 5029, 2079, 2830, 3292, 4578, 3401, 4104, 3749, 4457, 3734]
- name: Dribbble
color: dribbble
data: [722, 1866, 961, 1108, 1110, 561, 1753, 1815, 1985, 776, 859, 547, 1488, 766, 702, 621, 1599, 1372, 1620, 963, 759, 764, 739, 789, 1696, 1454, 1842, 734, 551, 1689, 1924, 1875, 908, 1675, 1541, 1953, 534, 502, 1524, 1867, 719, 1472, 1608, 1025, 889, 1150, 654, 1695, 1662, 1285, 1787]
mentions:
stacked: true
datetime: true
......
pages/_data/colors.yml
浏览文件 @ 9c5888c7
......@@ -53,16 +53,16 @@ pink-700: '#94415d'
pink-800: '#622c3e'
pink-900: '#31161f'
red: '#fa4654'
red-100: '#fedadd'
red-200: '#fdb5bb'
red-300: '#fc9098'
red-400: '#fb6b76'
red-500: '#fa4654'
red-600: '#c83843'
red-700: '#962a32'
red-800: '#641c22'
red-900: '#320e11'
red: '#cd201f'
red-100: '#f5d2d2'
red-200: '#eba6a5'
red-300: '#e17979'
red-400: '#d74d4c'
red-500: '#cd201f'
red-600: '#a41a19'
red-700: '#7b1313'
red-800: '#520d0c'
red-900: '#290606'
orange: '#ff922b'
orange-100: '#ffe9d5'
......@@ -74,6 +74,7 @@ orange-600: '#cc7522'
orange-700: '#99581a'
orange-800: '#663a11'
orange-900: '#331d09'
yellow: '#fab005'
yellow-100: '#feefcd'
yellow-200: '#fddf9b'
......@@ -140,5 +141,20 @@ gray-700: '#7a828f'
gray-800: '#545d6d'
gray-900: '#354052'
border-color: 'rgba(126, 133, 144, 0.24)'
text-muted: '#7e8590'
border-color: 'rgba(110, 117, 130, 0.2)'
text-muted: '#6e7582'
facebook: '#3b5998'
twitter: '#1da1f2'
google: '#dc4e41'
youtube: '#ff0000'
vimeo: '#1ab7ea'
dribbble: '#ea4c89'
github: '#181717'
instagram: '#e4405f'
pinterest: '#bd081c'
vk: '#6383a8'
rss: '#ffa500'
flickr: '#0063dc'
bitbucket: '#0052cc'
tabler: '#206bc4'
pages/_includes/cards/charts/active-users.html
浏览文件 @ 9c5888c7
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="subheader">Active users</div>
<div class="ml-auto lh-1">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-3 mr-2">2,986</div>
<div class="mr-auto">
{% include ui/trending.html value=4 %}
</div>
</div>
<div class="card-body">
<div class="d-flex align-items-center">
<div class="subheader">Active users</div>
<div class="ml-auto lh-1">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-3 mr-2">2,986</div>
<div class="mr-auto">
{% include ui/trending.html value=4 %}
</div>
</div>
{% include ui/chart.html chart-id="active-users" size="sm" %}
</div>
{% include ui/chart.html chart-id="active-users" size="sm" %}
</div>
</div>
pages/_includes/cards/charts/new-clients.html
浏览文件 @ 9c5888c7
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="subheader">New clients</div>
<div class="ml-auto lh-1">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-3 mr-2">6,782</div>
<div class="mr-auto">
{% include ui/trending.html value=0 %}
</div>
</div>
<div class="card-body">
<div class="d-flex align-items-center">
<div class="subheader">New clients</div>
<div class="ml-auto lh-1">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-3 mr-2">6,782</div>
<div class="mr-auto">
{% include ui/trending.html value=0 %}
</div>
</div>
{% include ui/chart.html chart-id="new-clients" size="sm" %}
</div>
{% include ui/chart.html chart-id="new-clients" size="sm" %}
</div>
</div>
pages/_includes/cards/charts/revenue.html
浏览文件 @ 9c5888c7
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="subheader">Revenue</div>
<div class="ml-auto lh-1">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-0 mr-2">$4,300</div>
<div class="mr-auto">
{% include ui/trending.html value=8 %}
</div>
</div>
</div>
{% include ui/chart.html chart-id="revenue-bg" size="sm" %}
<div class="card-body">
<div class="d-flex align-items-center">
<div class="subheader">Revenue</div>
<div class="ml-auto lh-1">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-0 mr-2">$4,300</div>
<div class="mr-auto">
{% include ui/trending.html value=8 %}
</div>
</div>
</div>
{% include ui/chart.html chart-id="revenue-bg" size="sm" %}
</div>
pages/_includes/cards/charts/sales.html
浏览文件 @ 9c5888c7
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="subheader">Sales</div>
<div class="ml-auto lh-1">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="h1 mb-3">75%</div>
<div class="d-flex mb-2">
<div>Conversion rate</div>
<div class="ml-auto">{% include ui/trending.html value=7 %}</div>
</div>
{% include ui/progress.html value=75 color="blue" size="sm" %}
</div>
<div class="card-body">
<div class="d-flex align-items-center">
<div class="subheader">Sales</div>
<div class="ml-auto lh-1">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="h1 mb-3">75%</div>
<div class="d-flex mb-2">
<div>Conversion rate</div>
<div class="ml-auto">{% include ui/trending.html value=7 %}</div>
</div>
{% include ui/progress.html value=75 color="blue" size="sm" %}
</div>
</div>
pages/_includes/cards/charts/total-sales.html
浏览文件 @ 9c5888c7
<div class="card">
<div class="card-body">
{% include ui/card-dropdown.html %}
<h3 class="card-title">Total sales</h3>
<div class="card-body">
{% include ui/card-dropdown.html %}
<h3 class="card-title">Total sales</h3>
{% include ui/chart.html chart-id="total-sales" height=15 %}
{% include ui/chart.html chart-id="campaigns" height=15 %}
</div>
{% include ui/chart.html chart-id="total-sales" height=15 %}
{% include ui/chart.html chart-id="campaigns" height=15 %}
</div>
</div>
pages/_includes/layout/homepage.html
浏览文件 @ 9c5888c7
......@@ -26,6 +26,20 @@
{% include cards/map.html title="Top countries" %}
</div>
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="d-flex">
<h3 class="card-title">Social referrals</h3>
<div class="ml-auto">
{% include parts/dropdown/days.html %}
</div>
</div>
{% include ui/chart.html chart-id="social-referrals" legend=true %}
</div>
</div>
</div>
<div class="col-lg-6">
<div class="row row-cards row-deck">
<div class="col-sm-6">
......
pages/_includes/ui/chart.html
浏览文件 @ 9c5888c7
{% assign data = site.data.charts[include.chart-id] %}
{% assign id = include.id | default: include.chart-id %}
{% assign height = include.height | default: 10 %}
{% assign height = include.height | default: data.height | default: 10 %}
{% assign class = include.class %}
{% if include['size'] == 'sm' %}
......@@ -16,7 +16,7 @@
{% assign data = site.data.charts[data.extend] | concat_objects: site.data.charts[include.chart-id] %}
{% endif %}
<div id="chart-{{ id }}" {% if class %} class="{{ class }}" {% endif %}{% if data.debug and jekyll.environment == 'development' %} style="outline: 1px solid red" {% endif %}></div>
<div id="chart-{{ id }}"{% if class %} class="{{ class }}"{% endif %}></div>
{% capture script %}
{% assign chart-type = data.type | default: 'bar' %}
......@@ -118,7 +118,7 @@
top: -20,
right: 0,
left: -4,
bottom: -8
bottom: -4
},
{% endunless %}
{% if data.hide-grid %}
......
pages/charts.html
浏览文件 @ 9c5888c7
......@@ -6,31 +6,29 @@ libs: apexcharts
---
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
{% include ui/chart.html chart-id="tasks-overview" height=20 %}
</div>
</div>
</div>
{% for chart in site.data.charts %}
{% if chart[1].demo %}
{% assign chart-id = chart[0] %}
<div class="col-lg-6 col-xl-4">
<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 class="col-12">
<div class="card">
<div class="card-body">
{% include ui/chart.html chart-id="tasks-overview" height=20 %}
</div>
</div>
</div>
{% for chart in site.data.charts %}
{% if chart[1].demo %}
{% assign chart-id = chart[0] %}
<div class="col-lg-6 col-xl-4">
<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>
scss/_debug.scss
浏览文件 @ 9c5888c7
......@@ -29,6 +29,10 @@ $debug: false;
@debug ("border-color: '#{$border-color}'");
@debug ("text-muted: '#{$text-muted}'");
@each $name, $color in $social-colors {
@debug ("#{$name}: '#{$color}'");
}
}
scss/ui/_cards.scss
浏览文件 @ 9c5888c7
......@@ -166,7 +166,7 @@
font-size: $h3-font-size;
font-weight: $headings-font-weight;
color: $headings-color;
line-height: (24/18);
line-height: 1.5rem;
@at-root a#{&}:hover {
color: inherit;
......
scss/ui/_dropdowns.scss
浏览文件 @ 9c5888c7
......@@ -20,6 +20,7 @@
display: flex;
align-items: center;
margin: 0;
line-height: $line-height-base;
}
.dropdown-item-icon {
......
scss/ui/_icons.scss
浏览文件 @ 9c5888c7
.icon {
width: 1em;
height: 1em;
font-size: 1em;
width: 1rem;
height: 1rem;
font-size: 1rem;
vertical-align: text-bottom;
&:hover {
text-decoration: none;
......
scss/vendor/_apexcharts.scss
浏览文件 @ 9c5888c7
......@@ -41,3 +41,8 @@
.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.
先完成此消息的编辑！
想要评论请 注册 或