Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

remove tabler-charts.js, peity charts, apexcharts

Browse Source
This commit is contained in:
codecalm
2019-12-20 23:34:14 +01:00
parent b83202d7a4
commit 004cf028cd
23 changed files with 210 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.editorconfig
View File

@@ -3,7 +3,7 @@ charset=utf-8
end_of_line=lf end_of_line=lf
insert_final_newline=true insert_final_newline=true
indent_style=tab indent_style=tab
indent_size=3 tab_width=3
max_line_length=off max_line_length=off
[*.svg] [*.svg]
@@ -13,6 +13,7 @@ tab_width=3
[*.html] [*.html]
indent_style=tab indent_style=tab
indent_size=3 indent_size=3
tab_width=3
insert_final_newline=false insert_final_newline=false
[*.md] [*.md]

2
build/rollup.config.js
View File

@@ -38,7 +38,7 @@ module.exports = {
context: "window", context: "window",
input: { input: {
tabler: path.resolve(__dirname, '../js/tabler.js'), 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: { output: {
banner, banner,

173
js/tabler-charts.js
View File

@@ -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,
// },
// };
}

8
package.json
View File

@@ -125,14 +125,6 @@
"path": "./dist/css/tabler.min.css", "path": "./dist/css/tabler.min.css",
"maxSize": "45 kB" "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", "path": "./dist/css/tabler-flags.css",
"maxSize": "2 kB" "maxSize": "2 kB"

2
pages/_data/libs.json
View File

@@ -3,7 +3,7 @@
"jquery", "bootstrap" "jquery", "bootstrap"
], ],
"js": { "js": {
"jquery": "jquery/dist/jquery.min.js", "jquery": "jquery/dist/jquery.slim.min.js",
"bootstrap": "bootstrap/dist/js/bootstrap.bundle.min.js", "bootstrap": "bootstrap/dist/js/bootstrap.bundle.min.js",
"autosize": "autosize/dist/autosize.min.js", "autosize": "autosize/dist/autosize.min.js",
"imask": "imask/dist/imask.min.js", "imask": "imask/dist/imask.min.js",

14
pages/_includes/cards/small-stats.html
View File

@@ -14,22 +14,16 @@
</div> </div>
{% endif %} {% endif %}
<div class="mr-3"> <div class="mr-3 leading-tight">
<div> <div class="strong">
<strong>{{ include.count | default: 1700 | format_number }}</strong> {{ include.subtitle }} {{ include.count | default: 1700 | format_number }} {{ include.subtitle }}
{% if include.small-icon %} {% if include.small-icon %}
{% include_cached ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %} {% include_cached ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %}
{% endif %} {% endif %}
</div> </div>
<div class="text-muted text-h5">{{ include.description | default: "Users" }}</div> <div class="text-muted">{{ include.description | default: "Users" }}</div>
</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" %} {% if include.chart-data and chart-position=="right" %}
<div class="ml-auto"> <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 %} {% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}

6
pages/_includes/cards/user-card.html
View File

@@ -3,9 +3,11 @@
<a class="card card-link" href="#"> <a class="card card-link" href="#">
<div class="card-body"> <div class="card-body">
<div class="float-{% if include.right %}right{% else %}left mr-3{% endif %}"> <div class="float-{% if include.right %}right{% else %}left mr-3{% endif %}">
{% include ui/avatar.html person=person %} {% include ui/avatar.html person=person class="rounded" %}
</div> </div>
<div class="card-title mb-1">{{ person.full_name }}</div> <div class="leading-tight">
<div class="strong">{{ person.full_name }}</div>
<div class="text-muted">{{ person.job_title }}</div> <div class="text-muted">{{ person.job_title }}</div>
</div> </div>
</div>
</a> </a>

1
pages/_includes/layout/css.html
View File

@@ -12,4 +12,3 @@
<!-- Tabler Plugins --> <!-- 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-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"/>

3
pages/_includes/layout/js.html
View File

@@ -11,6 +11,3 @@
<!-- Tabler Core --> <!-- Tabler Core -->
<script src="{{ site.base }}/dist/js/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script> <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>

2
pages/_includes/layout/navbar.html
View File

@@ -15,7 +15,7 @@
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a href="#" data-toggle="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"> 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"> <span class="ml-2 d-none d-lg-block leading-none">
{{ person.full_name }} {{ person.full_name }}
<span class="text-muted d-block mt-1 text-h6">Administrator</span> <span class="text-muted d-block mt-1 text-h6">Administrator</span>

2
pages/_includes/ui/chart.html
View File

@@ -19,7 +19,7 @@
{% capture script %} {% capture script %}
<script> <script>
// @formatter:off // @formatter:off
document.addEventListener("DOMContentLoaded", function (event) { document.addEventListener("DOMContentLoaded", function () {
{% if jekyll.environment == 'development' %} {% if jekyll.environment == 'development' %}
window.tabler_chart = window.tabler_chart || {}; window.tabler_chart = window.tabler_chart || {};
{% endif %} {% endif %}

36
pages/_includes/ui/sparkline.html
View File

@@ -1,19 +1,23 @@
{% assign type = include.type %} {% assign type = include.type %}
{% assign square = false %} {% assign id = 0 | random_id %}
{% if type == "pie" or type == "donut" %} {% assign color = include.color | default: 'blue' %}
{% assign square = true %}
{% endif %}
{% append_lib peity %} {% 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="chart-sparkline{% if type == 'pie' %} chart-sparkline-square{% endif %}{% if include.wide %} chart-sparkline-wide{% endif %}" id="sparkline-{{ id }}"></div>
<div class="sparkline-label">
{{ include.label }} {% capture_global scripts %}
</div> <script>
{% endif %} document.addEventListener("DOMContentLoaded", function () {
{% if include.label-icon %} $().peity && $('#sparkline-{{ id }}').text("{{ include.data }}").peity("{{ type | default: 'bar' }}", {
<div class="sparkline-label"> width: {% if type == 'pie' %}40{% else %}64{% endif %},
{% include_cached ui/icon.html icon=include.label-icon color=include.color %} height: 40,
</div> stroke: "{{ color | tabler_color }}",
{% endif %} strokeWidth: 2,
</div> 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 %}

48
pages/snippets.html
View File

@@ -27,25 +27,42 @@ page-title-right: date
<div class="col-xl-6"> <div class="col-xl-6">
{% include cards/subscribe.html person-id=2 %} {% include cards/subscribe.html person-id=2 %}
</div> </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="dollar-sign" color="blue" count=132
<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> subtitle="Sales" description="12 waiting payments" %}
<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>
<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 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="pie"
<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> chart-data="56/100" color="blue" count=132 subtitle="Sales" description="12 waiting payments" %}
<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>
<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="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"> <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="line" chart-data="20,0,40,30,40,30,80,60" %}
{% 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,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="bar" chart-data="20,40,20,-10,-30,10,40,60,80,70" color="green"
{% include cards/small-stats.html chart-type="donut" chart-data="12/100" chart-label="12%" person-id=10 %} icon="github" %}
{% 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="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 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 color="green" person-id=4 %}
{% include cards/small-stats.html small-icon="trending-down" color="red" person-id=3 %} {% include cards/small-stats.html small-icon="trending-down" color="red" person-id=3 %}
{% include cards/code.html %} {% include cards/code.html %}
</div> </div>
@@ -55,7 +72,8 @@ page-title-right: date
{% include cards/small-stats-2.html title="Revenue" count="$58,924" growth=-3.1 color="red" light=true %} {% include cards/small-stats-2.html title="Revenue" count="$58,924" growth=-3.1 color="red" light=true %}
</div> </div>
<div class="col-md-6 col-lg-4"> <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 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/project-kanban.html title="Tabler React" value=80 offset=20 %}
{% include cards/user-info.html %} {% include cards/user-info.html %}
</div> </div>

5
pages/tmp.html
View File

@@ -4,7 +4,10 @@ tmp: true
<div class="row"> <div class="row">
<div class="col-md-6 col-xl-4"> <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> </div>
{% for chart in site.data.charts %} {% for chart in site.data.charts %}

2
scss/_debug.scss
View File

@@ -1,4 +1,4 @@
$debug: true; $debug: false;
@if $debug { @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); $colors: ("blue": $blue, "azure": $azure, "indigo": $indigo, "purple": $purple, "pink": $pink, "red": $red, "orange": $orange, "yellow": $yellow, "green": $green, "teal": $teal, "cyan": $cyan);

2
scss/_utilities.scss
View File

@@ -25,7 +25,7 @@ $utilities: (
class: leading, class: leading,
values: ( values: (
none: 1, none: 1,
tight: 1.25, tight: 1.3333334,
normal: $line-height-base, normal: $line-height-base,
loose: 2 !important, loose: 2 !important,
) )

4
scss/_variables.scss
View File

@@ -104,7 +104,7 @@ $colors: (
) !default; ) !default;
$avatar-sizes: ( $avatar-sizes: (
"sm": 1.25rem, "sm": 2rem,
"md": 3rem, "md": 3rem,
"lg": 4.5rem, "lg": 4.5rem,
"xl": 6rem "xl": 6rem
@@ -228,7 +228,7 @@ $card-status-size: $border-width-wide !default;
$card-group-margin: 1.5rem !default; $card-group-margin: 1.5rem !default;
$card-shadow: rgba($dark, .04) 0 2px 4px 0 !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
$close-font-weight: 400 !default; $close-font-weight: 400 !default;

1
scss/tabler.scss
View File

@@ -60,7 +60,6 @@
@import "vendor/selectize"; @import "vendor/selectize";
@import "vendor/jqvmap"; @import "vendor/jqvmap";
@import "vendor/apexcharts"; @import "vendor/apexcharts";
@import "vendor/sparkline";
@import "vendor/fullcalendar"; @import "vendor/fullcalendar";
@import "utils/border"; @import "utils/border";

6
scss/ui/_avatars.scss
View File

@@ -1,11 +1,11 @@
.avatar { .avatar {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 2rem; width: 2.5rem;
height: 2rem; height: 2.5rem;
line-height: 2.5rem;
font-size: .875rem; font-size: .875rem;
font-weight: 400; font-weight: 400;
line-height: 2rem;
color: $text-muted; color: $text-muted;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;

33
scss/ui/_charts.scss
View File

@@ -17,8 +17,35 @@
//outline: 1px solid red; //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%); .chart-sparkline {
background-size: 14.14px 14.14px; 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
View File

@@ -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;
}
}