mirror of
https://github.com/tabler/tabler.git
synced 2025-12-26 11:16:12 +04:00
Merge branch 'dev' of https://github.com/tabler/tabler into dev
This commit is contained in:
Dawid
@@ -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
|
||||
|
||||
10
.github/no-response.yml
vendored
Normal file
10
.github/no-response.yml
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
# Configuration for probot-no-response - https://github.com/probot/no-response
|
||||
|
||||
daysUntilClose: 28
|
||||
|
||||
closeComment: >
|
||||
This issue has been automatically closed because there has been no response
|
||||
to our request for more information from the original author. With only the
|
||||
information that is currently in the issue, we don't have enough information
|
||||
to take action. Please reach out if you have or find the answers we need so
|
||||
that we can investigate further.
|
||||
@@ -12,7 +12,7 @@ Premium and Open Source dashboard template with responsive and high-quality UI.
|
||||
|
||||
<strong><a href="https://preview-dev.tabler.io">View Demo</a> | <a href="https://github.com/tabler/tabler-react">View React Version</a> | <a href="https://github.com/tabler/tabler/archive/master.zip">Download ZIP</a> | <a href="https://goo.gl/zJP2dT">Join us on Slack</a></strong>
|
||||
|
||||
|
||||
|
||||
|
||||
## Status
|
||||
|
||||
|
||||
@@ -84,6 +84,9 @@ if (window.Apex) {
|
||||
dataLabels: {
|
||||
minAngleToShowLabel: 10,
|
||||
},
|
||||
donut: {
|
||||
size: '80%'
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
14
package.json
14
package.json
@@ -53,6 +53,10 @@
|
||||
"bugs": {
|
||||
"url": "https://github.com/tabler/tabler/issues"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/codecalm"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
@@ -69,19 +73,19 @@
|
||||
"bundlesize": "0.18.0",
|
||||
"clean-css-cli": "4.3.0",
|
||||
"cross-env": "6.0.3",
|
||||
"eslint": "6.7.1",
|
||||
"eslint": "6.7.2",
|
||||
"eslint-config-xo": "0.27.2",
|
||||
"eslint-plugin-import": "2.18.2",
|
||||
"eslint-plugin-unicorn": "13.0.0",
|
||||
"eslint-plugin-unicorn": "14.0.1",
|
||||
"glob": "^7.1.6",
|
||||
"http-server": "0.11.1",
|
||||
"http-server": "0.12.0",
|
||||
"icon-font-generator": "2.1.10",
|
||||
"node-sass": "4.13.0",
|
||||
"node-sass-package-importer": "5.3.2",
|
||||
"nodemon": "^2.0.1",
|
||||
"npm-run-all": "4.1.5",
|
||||
"postcss-cli": "6.1.3",
|
||||
"rollup": "1.27.5",
|
||||
"rollup": "1.27.7",
|
||||
"rollup-plugin-babel": "4.3.3",
|
||||
"rollup-plugin-babel-minify": "9.1.1",
|
||||
"rollup-plugin-commonjs": "10.1.0",
|
||||
@@ -91,7 +95,7 @@
|
||||
"stylelint": "12.0.0",
|
||||
"stylelint-config-twbs-bootstrap": "1.0.0",
|
||||
"svgo": "1.3.2",
|
||||
"terser": "4.4.0",
|
||||
"terser": "4.4.1",
|
||||
"yaml": "1.7.2"
|
||||
},
|
||||
"dependencies": {
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 %}
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
9
pages/_includes/cards/charts/total-sales.html
Normal file
9
pages/_includes/cards/charts/total-sales.html
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
12
pages/_includes/ui/card-dropdown.html
Normal file
12
pages/_includes/ui/card-dropdown.html
Normal 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>
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
.card-cover {
|
||||
position: relative;
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
background: #666 no-repeat center/cover;
|
||||
background: #666666 no-repeat center/cover;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
@@ -198,6 +198,17 @@ Card optinos
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.card-drop {
|
||||
line-height: 1;
|
||||
color: $text-muted;
|
||||
|
||||
.icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
stroke-width: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Card status
|
||||
*/
|
||||
@@ -275,7 +286,7 @@ Card code
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
color: #ffffff;
|
||||
text-shadow: none;
|
||||
background: transparent;
|
||||
}
|
||||
@@ -304,7 +315,7 @@ Card profile
|
||||
max-width: 6rem;
|
||||
margin-top: -5rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 3px solid #fff;
|
||||
border: 3px solid #ffffff;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 533 KiB |
BIN
static/img/tabler-preview.png
Normal file
BIN
static/img/tabler-preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 187 KiB |
Reference in New Issue
Block a user