Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-02 08:25:32 +04:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dawid
2019-12-09 00:14:51 +01:00
parent 3c21078faa 13cde08e3a
commit 65cc440851
26 changed files with 275 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_data/charts.yml
+63 -28
View File
@@ -1,5 +1,43 @@
total-sales:
type: donut
demo: true
sparkline: true
hide-legend: true
name: Total sales
series:
- name: Direct
color: blue
data: 44
- name: Affilliate
color: green
data: 55
- name: Sponsored
color: red
data: 35
- name: E-mail
color: yellow
data: 12
campaigns:
name: Campaigns
demo: true
type: radialBar
sparkline: true
hide-legend: true
series:
- name: Total Sent
color: blue
data: 44
- 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]
@@ -36,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']
@@ -53,7 +91,7 @@ line:
line-stroke:
name: Line chart
display: true
demo: true
type: line
stroke-curve: straight
hide-legend: true
@@ -72,7 +110,7 @@ line-stroke:
stepline:
name: Stepline
display: true
demo: true
type: line
hide-legend: true
stroke-curve: stepline
@@ -84,7 +122,7 @@ stepline:
temperature:
name: Monthly Average Temperature
display: true
demo: true
type: line
show-labels: true
show-data-labels: true
@@ -103,7 +141,7 @@ temperature:
area:
name: Lorem ipsum
display: true
demo: true
type: area
hide-legend: true
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
@@ -118,7 +156,7 @@ area:
area-spline:
name: Lorem ipsum
display: true
demo: true
type: area
spline: true
hide-legend: true
@@ -134,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
@@ -152,7 +189,7 @@ area-spline-stacked:
spline:
name: Wind speed during two days
display: true
demo: true
type: line
spline: true
show-labels: true
@@ -169,7 +206,7 @@ spline:
spline-rotated:
name: Lorem ipsum
display: true
demo: true
type: line
spline: true
rotated: true
@@ -186,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']
@@ -200,7 +237,7 @@ bar:
bar-rotated:
name: Lorem ipsum
display: true
demo: true
type: bar
rotated: true
hide-legend: true
@@ -216,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:
@@ -233,7 +269,7 @@ bar-stacked:
pie:
name: Lorem ipsum
display: true
demo: true
type: pie
hide-legend: true
show-data-labels: true
@@ -241,35 +277,35 @@ pie:
series:
- name: A
color: blue-darker
data: [63]
data: 63
- name: B
color: blue
data: [44]
data: 44
- name: C
color: blue-light
data: [12]
data: 12
- name: D
color: blue-lighter
data: [14]
data: 14
donut:
name: Lorem ipsum
display: true
demo: true
type: donut
sparkline: true
hide-legend: true
series:
- name: Maximum
color: green
data: [63]
data: 63
- name: Minimum
color: green-light
data: [37]
data: 37
scatter:
name: Lorem ipsum
display: true
demo: true
type: scatter
hide-legend: true
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
@@ -284,7 +320,7 @@ scatter:
combination:
name: Combination chart
display: true
demo: true
type: bar
types:
2: 'line'
@@ -376,14 +412,13 @@ devices:
type: donut
sparkline: true
hide-legend: true
sparkline: true
series:
- name: a
color: blue-dark
data: [23]
data: 23
- name: b
color: blue
data: [54]
data: 54
- name: c
color: blue-light
data: [34]
data: 34
pages/_docs/avatars.md
+51 -32
View File
@@ -14,6 +14,50 @@ Create and group avatars of various shapes and sizes with one component.
{% include ui/avatar.html person-id=3 %}
{% endexample %}
### Avatar image
Set an image as the background.
{% example html wrapper=avatar-list %}
{% include ui/avatar.html person-id=1 %}
{% include ui/avatar.html person-id=3 %}
{% include ui/avatar.html person-id=4 %}
{% endexample %}
### Initials
You can easily use initials instead of images.
{% example html wrapper=avatar-list %}
{% include ui/avatar.html placeholder="AB" %}
{% include ui/avatar.html placeholder="CD" %}
{% include ui/avatar.html placeholder="EF" %}
{% include ui/avatar.html placeholder="GH" %}
{% include ui/avatar.html placeholder="IJ" %}
{% endexample %}
### Avatar icons
You can also use icons in avatars.
{% example html wrapper=avatar-list %}
{% include ui/avatar.html icon="user" %}
{% include ui/avatar.html icon="plus" %}
{% include ui/avatar.html icon="user-plus" %}
{% endexample %}
### Avatar initials color
Customize the color of the avatars' background. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example html wrapper=avatar-list %}
{% include ui/avatar.html placeholder="AB" color="green" %}
{% include ui/avatar.html placeholder="CD" color="red" %}
{% include ui/avatar.html placeholder="EF" color="yellow" %}
{% include ui/avatar.html placeholder="GH" color="blue" %}
{% include ui/avatar.html placeholder="IJ" color="purple" %}
{% endexample %}
### Avatar size
Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.
@@ -51,43 +95,18 @@ Change the shape of an avatar with the default Bootstrap image classes.
{% include ui/avatar.html person-id=21 shape="rounded-lg" %}
{% endexample %}
### Initials
{% example html wrapper=avatar-list %}
{% include ui/avatar.html placeholder="AB" size="xl" %}
{% include ui/avatar.html placeholder="CD" size="lg" %}
{% include ui/avatar.html placeholder="EF" size="md" %}
{% include ui/avatar.html placeholder="GH" %}
{% include ui/avatar.html placeholder="IJ" size="sm" %}
{% endexample %}
### Avatar initials color
[See more]({% docs_url colors %})
{% example html wrapper=avatar-list %}
{% include ui/avatar.html placeholder="AB" color="green" %}
{% include ui/avatar.html placeholder="CD" color="red" %}
{% include ui/avatar.html placeholder="EF" color="yellow" %}
{% include ui/avatar.html placeholder="GH" color="blue" %}
{% include ui/avatar.html placeholder="IJ" color="purple" %}
{% endexample %}
### Avatar initials icons
{% example html wrapper=avatar-list %}
{% include ui/avatar.html icon="user" %}
{% include ui/avatar.html icon="plus" %}
{% include ui/avatar.html icon="user-plus" %}
{% endexample %}
### Avatars list
You can easily create a list of avatars.
{% example %}
{% include ui/avatar-list.html %}
{% endexample %}
### Stacked list
Make the list stack when it reaches a certain length.
{% example %}
<div class="avatar-list avatar-list-stacked">
{% for person in site.data.people limit: 5 offset: 30 %}
@@ -95,4 +114,4 @@ Change the shape of an avatar with the default Bootstrap image classes.
{% endfor %}
<span class="avatar" element="a">+8</span>
</div>
{% endexample %}
{% endexample %}
pages/_docs/charts.md
+1 -1
View File
@@ -18,7 +18,7 @@ menu: docs.charts
<div id="{{ key }}" style="height: 16rem"></div>
</div>
</div>
{% include ui/chart.html id=key chart-id=data %}
{% include ui/chart.html id=key chart-id=data show-scripts=true %}
{% endexample %}
{% endif %}
{% endfor %}
pages/_docs/flags.md
+4
View File
@@ -15,6 +15,8 @@ done: true
### Flag sizes
Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up to different sizes based on what’s needed.
{% example html %}
{% include ui/flag.html flag="pl" class="flag-size-xl mr-1" %}
{% include ui/flag.html flag="pl" class="flag-size-lg mr-1" %}
@@ -24,6 +26,8 @@ done: true
### Types
To set the flag of the country you want add a class `flag-(country name)`. For example to create a flag of Andorra your class should look like this: `.flag-ad`.
<table>
{% for flag in site.data.flags %}
<tr>
pages/_docs/ribbons.md
+15
View File
@@ -12,24 +12,39 @@ new: true
### Ribbon position
You can easily change the position of a ribbon by adding a class to the element.
`ribbon-top` - moves it to the top
`ribbon-right` - moves it to the right
`ribbon-bottom` - moves it to the bottom
`ribbon-left` - moves it to the lefg
You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner.
{% example html columns=1 %}
{% include cards/ribbon.html top=true left=true %}
{% endexample %}
### Ribbon color
Customize the ribbon's background color. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example html columns=1 %}
{% include cards/ribbon.html color="red" %}
{% endexample %}
### Ribbon text
Set your own text in a ribbon.
{% example html columns=1 %}
{% include cards/ribbon.html color="green" text="-50%" %}
{% endexample %}
### Ribbon style
Change the style of a ribbon.
{% example html columns=1 %}
{% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}
{% endexample %}
pages/_includes/cards/charts/active-users.html
+1 -1
View File
@@ -13,6 +13,6 @@
</div>
</div>
{% include ui/chart.html chart-id="active-users" class="chart-sm" %}
{% include ui/chart.html chart-id="active-users" size="sm" %}
</div>
</div>
pages/_includes/cards/charts/card.html
-10
View File
@@ -1,10 +0,0 @@
{% 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>
pages/_includes/cards/charts/new-clients.html
+1 -1
View File
@@ -13,6 +13,6 @@
</div>
</div>
{% include ui/chart.html chart-id="new-clients" class="chart-sm" %}
{% include ui/chart.html chart-id="new-clients" size="sm" %}
</div>
</div>
pages/_includes/cards/charts/revenue.html
+1 -1
View File
@@ -13,5 +13,5 @@
</div>
</div>
</div>
{% include ui/chart.html chart-id="revenue-bg" class="card-chart" %}
{% include ui/chart.html chart-id="revenue-bg" size="sm" %}
</div>
pages/_includes/cards/charts/total-sales.html
+9
View File
@@ -0,0 +1,9 @@
<div class="card">
<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>
</div>
pages/_includes/cards/invoices.html
+1 -1
View File
@@ -3,7 +3,7 @@
<h3 class="card-title">Invoices</h3>
</div>
<div class="table-responsive">
<table class="table card-table table-vcenter text-nowrap datatable">
<table class="table card-table table-vcenter text-nowrap datatable overflow-hidden">
<thead>
<tr>
<th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
pages/_includes/layout/homepage.html
+2 -2
View File
@@ -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>
pages/_includes/ui/card-dropdown.html
+12
View File
@@ -0,0 +1,12 @@
{% assign menu = include.menu | default: 'Import,Export,Download,Another action' | split: ',' %}
{% assign icon = include.icon | default: 'more-horizontal' %}
<div class="dropdown float-right">
<a href="#" class="card-drop" data-toggle="dropdown" aria-expanded="false">
{% include_cached ui/icon.html icon=icon %}
</a>
<div class="dropdown-menu dropdown-menu-right">
{% for item in menu %}
<a href="#" class="dropdown-item">{{ item }}</a>
{% endfor %}
</div>
</div>
pages/_includes/ui/chart.html
+44 -32
View File
@@ -1,32 +1,38 @@
{% assign data = site.data.charts[include.chart-id] %}
{% assign id = include.id | default: include.chart-id %}
{% assign height = include.height %}
{% assign height = include.height | default: 10 %}
{% assign class = include.class | default: '' %}
{% if include['size'] == 'sm' %}
{% assign class = class | append: ' chart-sm' | strip %}
{% assign height = 2.5 %}
{% endif %}
{% if data %}
<div id="chart-{{ id }}"{% if include.class %} class="{{ include.class }}"{% endif %}{% if height %} style="height: {% if height == '100%' %}100%{% else %}{{ height }}rem{% endif %}"{% endif %}></div>
{% capture_global scripts %}
<div id="chart-{{ id }}"{% if class %} class="{{ class }}"{% endif %}></div>
{% capture script %}
<script>
document.addEventListener("DOMContentLoaded", function(event) {
{% if jekyll.environment == 'development' %}window.tabler_chart = window.tabler_chart || {};{% endif %}
var chartEl = document.getElementById('chart-{{ id }}');
window.ApexCharts && chartEl && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(chartEl, {
chart: {
type: '{{ data.type }}',
height: chartEl.offsetHeight,
{% if data.sparkline %}
sparkline: {
enabled: true
},
{% endif %}
{% if data.stacked %}
stacked: true,
{% endif %}
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
opacity: .16
},
{% endif %}
@@ -49,22 +55,18 @@ document.addEventListener("DOMContentLoaded", function(event) {
{% endif %}
{% if data.series %}
{% if data.type == 'pie' or data.type == 'donut' %}
series: [{% for serie in data.series %}{{ serie.data[0] }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
{% 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: ', '}}]
data: [{{ serie.data | join: ', '}}]
}{% unless forloop.last %},{% endunless %}{% endfor %}],
{% endif %}
{% endif %}
{% if data.type == 'pie' or data.type == 'donut' %}
pie: {
height: chartEl.offsetHeight
},
{% endif %}
{% if data.show-grid %}
grid: {
show: true,
@@ -103,7 +105,8 @@ document.addEventListener("DOMContentLoaded", function(event) {
{% endif %}
{% if data.series %}
colors: [ {% for serie in data.series %}
colors: [
{% for serie in data.series %}
{{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
],
{% endif %}
@@ -132,7 +135,16 @@ document.addEventListener("DOMContentLoaded", function(event) {
},
{% endif %}
})).render();
});
});
</script>
{% endcapture_global %}
{% endcapture %}
{% if include.show-scripts %}
{{ script }}
{% else %}
{% capture_global scripts %}
{{ script }}
{% endcapture_global %}
{% endif %}
{% endif %}
pages/_includes/ui/map.html
+10 -2
View File
@@ -5,7 +5,7 @@
{% if data %}
<div id="map-{{ id }}" style="height: {{ height }}rem"></div>
{% capture_global scripts %}
{% capture script %}
<script>
{% if jekyll.environment == 'development' %}window.tabler_map = window.tabler_map || {};{% endif %}
@@ -29,5 +29,13 @@
});
});
</script>
{% endcapture_global %}
{% endcapture %}
{% if include.show-scripts %}
{{ script }}
{% else %}
{% capture_global scripts %}
{{ script }}
{% endcapture_global %}
{% endif %}
{% endif %}
pages/_includes/ui/trending.html
+1 -1
View File
@@ -11,5 +11,5 @@
{% endif %}
<span class="text-{{ color }} d-inline-flex align-items-center leading-none{% if include.class %} {{ include.class }}{% endif %}">
{{ value }}% {% include_cached ui/icon.html icon=icon class="icon-thin" %}
{{ value }}% {% include_cached ui/icon.html icon=icon class="icon-thin" class="ml-1" %}
</span>
pages/charts.html
+13 -4
View File
@@ -1,16 +1,25 @@
---
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>
pages/tmp.html
+8
View File
@@ -1,6 +1,14 @@
---
---
<div class="row">
<div class="col-4">
{% include cards/charts/total-sales.html %}
</div>
<div class="col-8">
</div>
</div>
<div class="row">
<div class="col-md-6">
{% include cards/user-info.html %}