mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
remove tabler-charts.js, peity charts, apexcharts
This commit is contained in:
codecalm
@@ -3,7 +3,7 @@ charset=utf-8
|
||||
end_of_line=lf
|
||||
insert_final_newline=true
|
||||
indent_style=tab
|
||||
indent_size=3
|
||||
tab_width=3
|
||||
max_line_length=off
|
||||
|
||||
[*.svg]
|
||||
@@ -13,6 +13,7 @@ tab_width=3
|
||||
[*.html]
|
||||
indent_style=tab
|
||||
indent_size=3
|
||||
tab_width=3
|
||||
insert_final_newline=false
|
||||
|
||||
[*.md]
|
||||
|
||||
@@ -38,7 +38,7 @@ module.exports = {
|
||||
context: "window",
|
||||
input: {
|
||||
tabler: path.resolve(__dirname, '../js/tabler.js'),
|
||||
'tabler-charts': path.resolve(__dirname, '../js/tabler-charts.js'),
|
||||
// 'tabler-charts': path.resolve(__dirname, '../js/tabler-charts.js'),
|
||||
},
|
||||
output: {
|
||||
banner,
|
||||
|
||||
@@ -1,173 +0,0 @@
|
||||
(function ($) {
|
||||
$(document).ready(function () {
|
||||
$().peity &&
|
||||
$('[data-spark]').each(function () {
|
||||
const $this = $(this),
|
||||
data = $this.attr('data-spark'),
|
||||
color = $this.attr('data-spark-color') || 'blue',
|
||||
bgColor = $this.attr('data-spark-color-bg') || 'blue-100',
|
||||
type = $this.attr('data-spark-type') || 'line';
|
||||
|
||||
const $div = $('<div/>').html(data);
|
||||
$this.append($div);
|
||||
|
||||
let fillColor;
|
||||
|
||||
if (type === 'donut' || type === 'pie') {
|
||||
fillColor = [color, bgColor];
|
||||
} else if (type === 'bar') {
|
||||
fillColor = [color];
|
||||
} else if (type === 'line') {
|
||||
fillColor = bgColor;
|
||||
}
|
||||
|
||||
$div.peity(type, {
|
||||
width: $this.width(),
|
||||
height: $this.height(),
|
||||
// max: 100,
|
||||
// min: 0,
|
||||
stroke: color,
|
||||
strokeWidth: 2,
|
||||
fill: fillColor,
|
||||
padding: 0.2,
|
||||
innerRadius: type === 'donut' ? 17 : 0,
|
||||
});
|
||||
});
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
/*
|
||||
charts default configuration
|
||||
*/
|
||||
if (window.Apex) {
|
||||
// const borderColor = 'rgba(0, 0, 0, 0.09)';
|
||||
// const mutedColor = '#888e9a';
|
||||
|
||||
// window.Apex = {
|
||||
// chart: {
|
||||
// // fontFamily: 'inherit',
|
||||
// // foreColor: 'currentColor',
|
||||
// toolbar: {
|
||||
// show: false,
|
||||
// },
|
||||
// zoom: {
|
||||
// enabled: false,
|
||||
// },
|
||||
// animations: {
|
||||
// enabled: false,
|
||||
// },
|
||||
// },
|
||||
//
|
||||
// grid: {
|
||||
// show: true,
|
||||
// borderColor: borderColor,
|
||||
// padding: {
|
||||
// right: 0,
|
||||
// bottom: 0,
|
||||
// left: 0,
|
||||
// top: 0,
|
||||
// },
|
||||
// },
|
||||
//
|
||||
// dataLabels: {
|
||||
// enabled: false,
|
||||
// dropShadow: {
|
||||
// enabled: false,
|
||||
// },
|
||||
// },
|
||||
//
|
||||
// plotOptions: {
|
||||
// pie: {
|
||||
// customScale: 1,
|
||||
// expandOnClick: false,
|
||||
// dataLabels: {
|
||||
// minAngleToShowLabel: 10,
|
||||
// },
|
||||
// donut: {
|
||||
// size: '80%'
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
//
|
||||
// stroke: {
|
||||
// width: 2,
|
||||
// curve: 'smooth',
|
||||
// lineCap: "round",
|
||||
// },
|
||||
//
|
||||
// fill: {
|
||||
// type: 'solid',
|
||||
// opacity: 1,
|
||||
// },
|
||||
//
|
||||
// markers: {
|
||||
// size: 0,
|
||||
// strokeWidth: 1,
|
||||
// radius: 2,
|
||||
// hover: {
|
||||
// size: 4,
|
||||
// },
|
||||
// },
|
||||
//
|
||||
// legend: {
|
||||
// show: true,
|
||||
// fontSize: '14px',
|
||||
// markers: {
|
||||
// width: 8,
|
||||
// height: 8,
|
||||
// },
|
||||
// itemMargin: {
|
||||
// horizontal: 0,
|
||||
// vertical: 8,
|
||||
// },
|
||||
// },
|
||||
//
|
||||
// title: {
|
||||
// margin: 0,
|
||||
// floating: true,
|
||||
// offsetX: 10,
|
||||
// style: {
|
||||
// fontSize: '18px',
|
||||
// },
|
||||
// },
|
||||
//
|
||||
// subtitle: {
|
||||
// margin: 0,
|
||||
// },
|
||||
//
|
||||
// tooltip: {
|
||||
// fillSeriesColor: false,
|
||||
// },
|
||||
|
||||
// xaxis: {
|
||||
// labels: {
|
||||
// style: {
|
||||
// colors: mutedColor,
|
||||
// fontSize: '12px',
|
||||
// },
|
||||
// datetimeFormatter: {
|
||||
// year: 'yyyy',
|
||||
// month: 'MMM \'yy',
|
||||
// day: 'd MMM',
|
||||
// hour: 'HH:mm'
|
||||
// }
|
||||
// },
|
||||
// tooltip: {
|
||||
// enabled: false,
|
||||
// },
|
||||
// axisBorder: {
|
||||
// color: borderColor,
|
||||
// height: 0,
|
||||
// },
|
||||
// axisTicks: {
|
||||
// show: true,
|
||||
// height: 4,
|
||||
// color: borderColor,
|
||||
// },
|
||||
// },
|
||||
//
|
||||
// yaxis: {
|
||||
// show: true,
|
||||
// },
|
||||
// };
|
||||
}
|
||||
@@ -125,14 +125,6 @@
|
||||
"path": "./dist/css/tabler.min.css",
|
||||
"maxSize": "45 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-charts.css",
|
||||
"maxSize": "2 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-charts.min.css",
|
||||
"maxSize": "2 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-flags.css",
|
||||
"maxSize": "2 kB"
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
"jquery", "bootstrap"
|
||||
],
|
||||
"js": {
|
||||
"jquery": "jquery/dist/jquery.min.js",
|
||||
"jquery": "jquery/dist/jquery.slim.min.js",
|
||||
"bootstrap": "bootstrap/dist/js/bootstrap.bundle.min.js",
|
||||
"autosize": "autosize/dist/autosize.min.js",
|
||||
"imask": "imask/dist/imask.min.js",
|
||||
|
||||
@@ -1,39 +1,33 @@
|
||||
{% assign chart-type = include.chart-type | default: 'line' %}
|
||||
{% assign chart-position = include.chart-position | default: 'right' %}
|
||||
<div class="card">
|
||||
<div class="card-body p-3 d-flex align-items-center">
|
||||
{% if include.icon %}
|
||||
<span class="{% if include.color %}bg-{{ include.color }} text-white{% endif %} stamp mr-3">{% include_cached ui/icon.html icon=include.icon %}</span>
|
||||
{% elsif include.person-id %}
|
||||
{% include ui/avatar.html person-id=include.person-id class="mr-3 rounded" %}
|
||||
{% endif %}
|
||||
<div class="card-body p-3 d-flex align-items-center">
|
||||
{% if include.icon %}
|
||||
<span class="{% if include.color %}bg-{{ include.color }} text-white{% endif %} stamp mr-3">{% include_cached ui/icon.html icon=include.icon %}</span>
|
||||
{% elsif include.person-id %}
|
||||
{% include ui/avatar.html person-id=include.person-id class="mr-3 rounded" %}
|
||||
{% endif %}
|
||||
|
||||
{% if include.chart-data and chart-position=="left" %}
|
||||
<div class="mr-3">
|
||||
{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if include.chart-data and chart-position == "left" %}
|
||||
<div class="mr-3">
|
||||
{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="mr-3">
|
||||
<div>
|
||||
<strong>{{ include.count | default: 1700 | format_number }}</strong> {{ include.subtitle }}
|
||||
{% if include.small-icon %}
|
||||
{% include_cached ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="text-muted text-h5">{{ include.description | default: "Users" }}</div>
|
||||
</div>
|
||||
<div class="mr-3 leading-tight">
|
||||
<div class="strong">
|
||||
{{ include.count | default: 1700 | format_number }} {{ include.subtitle }}
|
||||
{% if include.small-icon %}
|
||||
{% include_cached ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="text-muted">{{ include.description | default: "Users" }}</div>
|
||||
</div>
|
||||
|
||||
{% if include.second-icon %}
|
||||
<div class="ml-auto">
|
||||
{% include_cached ui/icon.html icon=include.second-icon color=include.color class="icon-lg icon-thin" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if include.chart-data and chart-position=="right" %}
|
||||
<div class="ml-auto">
|
||||
{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if include.chart-data and chart-position=="right" %}
|
||||
<div class="ml-auto">
|
||||
{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,35 +1,35 @@
|
||||
{% assign person-id = include.person-id | default: 0 %}
|
||||
{% assign person = site.data.people[person-id] %}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row row-sm align-items-center">
|
||||
<div class="col-auto">
|
||||
{% include ui/avatar.html person=person size="lg" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
<h4 class="card-title m-0">
|
||||
<a href="#">{{ person.full_name }}</a>
|
||||
</h4>
|
||||
<div class="text-muted">
|
||||
Working in {{ person.company }}
|
||||
</div>
|
||||
<div class="small mt-1">
|
||||
<span class="text-success">●</span> Online
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<a href="#" class="btn btn-sm btn-secondary d-none d-md-inline-block">
|
||||
Subscribe
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="dropdown">
|
||||
<button class="btn-options" type="button" data-toggle="dropdown">
|
||||
{% include_cached ui/icon.html icon="more-vertical" %}
|
||||
</button>
|
||||
{% include_cached ui/dropdown-menu.html right=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row row-sm align-items-center">
|
||||
<div class="col-auto">
|
||||
{% include ui/avatar.html person=person size="lg" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
<h4 class="card-title m-0">
|
||||
<a href="#">{{ person.full_name }}</a>
|
||||
</h4>
|
||||
<div class="text-muted">
|
||||
Working in {{ person.company }}
|
||||
</div>
|
||||
<div class="small mt-1">
|
||||
<span class="text-success">●</span> Online
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<a href="#" class="btn btn-sm btn-secondary d-none d-md-inline-block">
|
||||
Subscribe
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="dropdown">
|
||||
<button class="btn-options" type="button" data-toggle="dropdown">
|
||||
{% include_cached ui/icon.html icon="more-vertical" %}
|
||||
</button>
|
||||
{% include_cached ui/dropdown-menu.html right=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
{% assign person-id = include.person-id | default: 0 %}
|
||||
{% assign person = site.data.people[person-id] %}
|
||||
<a class="card card-link" href="#">
|
||||
<div class="card-body">
|
||||
<div class="float-{% if include.right %}right{% else %}left mr-3{% endif %}">
|
||||
{% include ui/avatar.html person=person %}
|
||||
</div>
|
||||
<div class="card-title mb-1">{{ person.full_name }}</div>
|
||||
<div class="text-muted">{{ person.job_title }}</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="float-{% if include.right %}right{% else %}left mr-3{% endif %}">
|
||||
{% include ui/avatar.html person=person class="rounded" %}
|
||||
</div>
|
||||
<div class="leading-tight">
|
||||
<div class="strong">{{ person.full_name }}</div>
|
||||
<div class="text-muted">{{ person.job_title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@@ -12,4 +12,3 @@
|
||||
|
||||
<!-- Tabler Plugins -->
|
||||
<link href="{{ site.base }}/dist/css/tabler-flags{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
|
||||
<link href="{{ site.base }}/dist/css/tabler-charts{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
|
||||
|
||||
@@ -11,6 +11,3 @@
|
||||
|
||||
<!-- Tabler Core -->
|
||||
<script src="{{ site.base }}/dist/js/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
|
||||
|
||||
<!-- Tabler Plugins -->
|
||||
<script src="{{ site.base }}/dist/js/tabler-charts{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" data-toggle="dropdown"
|
||||
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
|
||||
{% include ui/avatar.html src=person.photo %}
|
||||
{% include ui/avatar.html src=person.photo size="sm" %}
|
||||
<span class="ml-2 d-none d-lg-block leading-none">
|
||||
{{ person.full_name }}
|
||||
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
|
||||
|
||||
@@ -2,18 +2,18 @@
|
||||
{% assign src = include.src %}
|
||||
{% assign placeholder = include.placeholder %}
|
||||
{% if include.person-id %}
|
||||
{% assign person-id = include.person-id | minus: 1 %}
|
||||
{% assign person = site.data.people[person-id] %}
|
||||
{% assign src = person.photo %}
|
||||
{% unless src %}
|
||||
{% assign placeholder = person.full_name | first_letters %}
|
||||
{% endunless %}
|
||||
{% elsif include.person %}
|
||||
{% assign person = include.person %}
|
||||
{% assign src = person.photo %}
|
||||
{% unless src %}
|
||||
{% assign placeholder = person.full_name | first_letters %}
|
||||
{% endunless %}
|
||||
{% assign person-id = include.person-id | minus: 1 %}
|
||||
{% assign person = site.data.people[person-id] %}
|
||||
{% assign src = person.photo %}
|
||||
{% unless src %}
|
||||
{% assign placeholder = person.full_name | first_letters %}
|
||||
{% endunless %}
|
||||
{% elsif include.person %}
|
||||
{% assign person = include.person %}
|
||||
{% assign src = person.photo %}
|
||||
{% unless src %}
|
||||
{% assign placeholder = person.full_name | first_letters %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% assign link = include.link | default: false %}
|
||||
{% assign el = 'span' %}
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
{% capture script %}
|
||||
<script>
|
||||
// @formatter:off
|
||||
document.addEventListener("DOMContentLoaded", function (event) {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
{% if jekyll.environment == 'development' %}
|
||||
window.tabler_chart = window.tabler_chart || {};
|
||||
{% endif %}
|
||||
|
||||
@@ -1,19 +1,23 @@
|
||||
{% assign type = include.type %}
|
||||
{% assign square = false %}
|
||||
{% if type == "pie" or type == "donut" %}
|
||||
{% assign square = true %}
|
||||
{% endif %}
|
||||
{% assign id = 0 | random_id %}
|
||||
{% assign color = include.color | default: 'blue' %}
|
||||
|
||||
{% append_lib peity %}
|
||||
<div class="sparkline{% if square %} sparkline-square{% endif %}{% if include.wide %} sparkline-wide{% endif %}" data-spark="{{ include.data }}" data-spark-type="{{ include.type }}" {% if include.color %}data-spark-color="{{ include.color | default: 'blue' | tabler_color }}" data-spark-color-bg="{{ include.color | tabler_color: '100' }}"{% endif %}>
|
||||
{% if include.label %}
|
||||
<div class="sparkline-label">
|
||||
{{ include.label }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if include.label-icon %}
|
||||
<div class="sparkline-label">
|
||||
{% include_cached ui/icon.html icon=include.label-icon color=include.color %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="chart-sparkline{% if type == 'pie' %} chart-sparkline-square{% endif %}{% if include.wide %} chart-sparkline-wide{% endif %}" id="sparkline-{{ id }}"></div>
|
||||
|
||||
{% capture_global scripts %}
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
$().peity && $('#sparkline-{{ id }}').text("{{ include.data }}").peity("{{ type | default: 'bar' }}", {
|
||||
width: {% if type == 'pie' %}40{% else %}64{% endif %},
|
||||
height: 40,
|
||||
stroke: "{{ color | tabler_color }}",
|
||||
strokeWidth: 2,
|
||||
fill: {% if type == 'pie' %}["{{ color | default: 'blue' | tabler_color }}", "{{ 'border-color' | tabler_color }}"]{% elsif type == 'bar' %}["{{ color | tabler_color }}"]{% else %}"transparent"{% endif %},
|
||||
padding: .2,
|
||||
innerRadius: 16,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endcapture_global %}
|
||||
@@ -5,58 +5,76 @@ page-title-right: date
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card.html person-id=5 %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card.html person-id=6 %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card.html person-id=7 right=true %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card.html person-id=8 right=true %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card.html person-id=5 %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card.html person-id=6 %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card.html person-id=7 right=true %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card.html person-id=8 right=true %}</div>
|
||||
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card-big.html person-id=15 %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card-big.html person-id=16 %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card-big.html person-id=17 %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card-big.html person-id=18 %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card-big.html person-id=15 %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card-big.html person-id=16 %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card-big.html person-id=17 %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card-big.html person-id=18 %}</div>
|
||||
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card-bg.html person-id=25 %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card-bg.html person-id=26 %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card-bg.html person-id=27 blurred=true %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card-bg.html person-id=28 blurred=true %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card-bg.html person-id=25 %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card-bg.html person-id=26 %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card-bg.html person-id=27 blurred=true %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/user-card-bg.html person-id=28 blurred=true %}</div>
|
||||
|
||||
|
||||
<div class="col-xl-6">
|
||||
{% include cards/subscribe.html person-id=0 %}
|
||||
</div>
|
||||
<div class="col-xl-6">
|
||||
{% include cards/subscribe.html person-id=2 %}
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html icon="dollar-sign" color="blue" count=132 subtitle="Sales" description="12 waiting payments" %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html icon="shopping-bag" color="green" count=78 subtitle="Orders" description="32 shipped" %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html icon="users" color="red" count=1352 subtitle="Members" description="163 registered today" %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html icon="message-square" color="yellow" count=132 subtitle="Comments" description="16 waitings" %}</div>
|
||||
<div class="col-xl-6">
|
||||
{% include cards/subscribe.html person-id=0 %}
|
||||
</div>
|
||||
<div class="col-xl-6">
|
||||
{% include cards/subscribe.html person-id=2 %}
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html icon="dollar-sign" color="blue" count=132
|
||||
subtitle="Sales" description="12 waiting payments" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html icon="shopping-bag" color="green" count=78
|
||||
subtitle="Orders" description="32 shipped" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html icon="users" color="red" count=1352
|
||||
subtitle="Members" description="163 registered today" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html icon="message-square" color="yellow" count=132
|
||||
subtitle="Comments" description="16 waitings" %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56/100" color="blue" count=132 subtitle="Sales" description="12 waiting payments" %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56/100" color="green" count=78 subtitle="Orders" description="32 shipped" %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="pie" chart-data="56/100" color="red" count=1352 subtitle="Members" description="163 registered today" %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="pie" chart-data="56/100" color="yellow" count=132 subtitle="Comments" description="16 waitings" %}</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="pie"
|
||||
chart-data="56/100" color="blue" count=132 subtitle="Sales" description="12 waiting payments" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="pie"
|
||||
chart-data="56/100" color="green" count=78 subtitle="Orders" description="32 shipped" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="pie"
|
||||
chart-data="56/100" color="red" count=1352 subtitle="Members" description="163 registered today" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="pie"
|
||||
chart-data="56/100" color="yellow" count=132 subtitle="Comments" description="16 waitings" %}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
{% include cards/small-stats.html chart-type="line" chart-data="20,40,30,40,60,80,100" color="yellow" %}
|
||||
{% include cards/small-stats.html chart-type="bar" chart-data="20,40,30,40,60,80,70" color="red" icon="heart" %}
|
||||
{% include cards/small-stats.html chart-type="bar" chart-data="20,40,20,-10,-30,10,40,60,80,70" color="green" icon="github" %}
|
||||
{% include cards/small-stats.html chart-type="donut" chart-data="12/100" chart-label="12%" person-id=10 %}
|
||||
{% include cards/small-stats.html chart-type="donut" chart-data="12/100" chart-label-icon="trending-up" person-id=11 %}
|
||||
{% include cards/small-stats.html chart-type="pie" chart-data="56/100" person-id=1 %}
|
||||
{% include cards/small-stats.html second-icon="trending-up" color="green" person-id=4 %}
|
||||
{% include cards/small-stats.html small-icon="trending-down" color="red" person-id=3 %}
|
||||
{% include cards/code.html %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
{% include cards/small-stats-2.html title="Customers" count="1,950" growth=5.2 color="yellow" %}
|
||||
{% include cards/small-stats-2.html title="Orders" count="8256" growth=0 color="green" %}
|
||||
{% include cards/small-stats-2.html title="Revenue" count="$58,924" growth=-3.1 color="red" light=true %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
{% include cards/project-kanban.html title="Tabler UI" badge="v1.0" value=30 percentage-color="red" limit=4 offset=0 due="72 days" %}
|
||||
{% include cards/project-kanban.html title="Tabler React" value=80 offset=20 %}
|
||||
{% include cards/user-info.html %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
{% include cards/small-stats.html chart-type="line" chart-data="20,0,40,30,40,30,80,60" %}
|
||||
{% include cards/small-stats.html chart-type="bar" chart-data="20,40,30,10,40,60,80,70" color="red" icon="heart" %}
|
||||
{% include cards/small-stats.html chart-type="bar" chart-data="20,40,20,-10,-30,10,40,60,80,70" color="green"
|
||||
icon="github" %}
|
||||
{% include cards/small-stats.html chart-type="pie" chart-data="12/100" person-id=10 %}
|
||||
{% include cards/small-stats.html chart-type="pie" chart-data="12/100" person-id=11 %}
|
||||
{% include cards/small-stats.html chart-type="pie" chart-data="56/100" person-id=1 %}
|
||||
{% include cards/small-stats.html color="green" person-id=4 %}
|
||||
{% include cards/small-stats.html small-icon="trending-down" color="red" person-id=3 %}
|
||||
{% include cards/code.html %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
{% include cards/small-stats-2.html title="Customers" count="1,950" growth=5.2 color="yellow" %}
|
||||
{% include cards/small-stats-2.html title="Orders" count="8256" growth=0 color="green" %}
|
||||
{% include cards/small-stats-2.html title="Revenue" count="$58,924" growth=-3.1 color="red" light=true %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
{% include cards/project-kanban.html title="Tabler UI" badge="v1.0" value=30 percentage-color="red" limit=4 offset=0
|
||||
due="72 days" %}
|
||||
{% include cards/project-kanban.html title="Tabler React" value=80 offset=20 %}
|
||||
{% include cards/user-info.html %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,10 @@ tmp: true
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-xl-4">
|
||||
{% include cards/small-stats.html chart-position="right" %}
|
||||
{% include cards/small-stats.html chart-type="bar" chart-data="20,40,30,40,60,80,70" color="red" icon="heart" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-4">
|
||||
{% include cards/small-stats.html chart-type="bar" chart-data="5,8,2,5,-1,3,5,3" color="blue" icon="heart" %}
|
||||
</div>
|
||||
|
||||
{% for chart in site.data.charts %}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
$debug: true;
|
||||
$debug: false;
|
||||
|
||||
@if $debug {
|
||||
$colors: ("blue": $blue, "azure": $azure, "indigo": $indigo, "purple": $purple, "pink": $pink, "red": $red, "orange": $orange, "yellow": $yellow, "green": $green, "teal": $teal, "cyan": $cyan);
|
||||
|
||||
@@ -25,7 +25,7 @@ $utilities: (
|
||||
class: leading,
|
||||
values: (
|
||||
none: 1,
|
||||
tight: 1.25,
|
||||
tight: 1.3333334,
|
||||
normal: $line-height-base,
|
||||
loose: 2 !important,
|
||||
)
|
||||
|
||||
@@ -104,7 +104,7 @@ $colors: (
|
||||
) !default;
|
||||
|
||||
$avatar-sizes: (
|
||||
"sm": 1.25rem,
|
||||
"sm": 2rem,
|
||||
"md": 3rem,
|
||||
"lg": 4.5rem,
|
||||
"xl": 6rem
|
||||
@@ -228,7 +228,7 @@ $card-status-size: $border-width-wide !default;
|
||||
$card-group-margin: 1.5rem !default;
|
||||
|
||||
$card-shadow: rgba($dark, .04) 0 2px 4px 0 !default;
|
||||
$card-shadow-hover: rgba($dark, .08) 0 2px 12px 0 !default;
|
||||
$card-shadow-hover: rgba($dark, .16) 0 2px 16px 0 !default;
|
||||
|
||||
//close
|
||||
$close-font-weight: 400 !default;
|
||||
|
||||
@@ -60,7 +60,6 @@
|
||||
@import "vendor/selectize";
|
||||
@import "vendor/jqvmap";
|
||||
@import "vendor/apexcharts";
|
||||
@import "vendor/sparkline";
|
||||
@import "vendor/fullcalendar";
|
||||
|
||||
@import "utils/border";
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
.avatar {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
font-size: .875rem;
|
||||
font-weight: 400;
|
||||
line-height: 2rem;
|
||||
color: $text-muted;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
@@ -17,8 +17,35 @@
|
||||
//outline: 1px solid red;
|
||||
}
|
||||
|
||||
.chart-placeholder {
|
||||
background-image: linear-gradient(135deg, $border-color 25%, transparent 25%, transparent 50%, $border-color 50%, $border-color 75%, transparent 75%, transparent 100%);
|
||||
background-size: 14.14px 14.14px;
|
||||
|
||||
.chart-sparkline {
|
||||
position: relative;
|
||||
width: 4rem;
|
||||
height: 2.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.chart-sparkline-square {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.chart-sparkline-wide {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.chart-sparkline-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $h6-font-size;
|
||||
|
||||
.icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
31
scss/vendor/_sparkline.scss
vendored
31
scss/vendor/_sparkline.scss
vendored
@@ -1,31 +0,0 @@
|
||||
.sparkline {
|
||||
position: relative;
|
||||
width: 4rem;
|
||||
height: 2.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.sparkline-square {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.sparkline-wide {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.sparkline-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $h6-font-size;
|
||||
|
||||
.icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user