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

js charts refactoring

Browse Source
This commit is contained in:
chomik
2019-04-10 23:50:53 +02:00
parent 86ba97f5e5
commit 491aa237d7
11 changed files with 145 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.editorconfig
View File

@@ -19,7 +19,7 @@ tab_width=3
[*.js.map]
indent_style=tab
indent_size=2
indent_size=3
[{*.css,*.scss}]
indent_style=space

105
js/app/charts.js
View File

@@ -1,40 +1,85 @@
(function ($) {
$(document).ready(function () {
$(document).ready(function () {
$('[data-spark]').each(function () {
var $this = $(this),
data = $this.attr('data-spark'),
color = $this.attr('data-spark-color') || 'blue',
type = $this.attr('data-spark-type') || 'line';
$().peity && $('[data-spark]').each(function () {
var $this = $(this),
data = $this.attr('data-spark'),
color = $this.attr('data-spark-color') || 'blue',
type = $this.attr('data-spark-type') || 'line';
var $div = $('<div />').html(data);
$this.append($div);
var $div = $('<div />').html(data);
$this.append($div);
var strokeColor = uikit.colors[color],
fillColor = uikit.colors[color];
var strokeColor = tabler.colors[color],
fillColor = tabler.colors[color];
if (type === 'donut' || type === 'pie') {
fillColor = [fillColor, uikit.hexToRgbA(fillColor, .1)];
} else if (type === 'bar') {
fillColor = [fillColor];
} else if (type === 'line') {
fillColor = uikit.hexToRgbA(fillColor, .1);
}
if (type === 'donut' || type === 'pie') {
fillColor = [fillColor, tabler.hexToRgbA(fillColor, .1)];
} else if (type === 'bar') {
fillColor = [fillColor];
} else if (type === 'line') {
fillColor = tabler.hexToRgbA(fillColor, .1);
}
$div.peity(type, {
width: $this.width(),
height: $this.height(),
// max: 100,
// min: 0,
stroke: strokeColor,
strokeWidth: 2,
fill: fillColor,
padding: .2,
innerRadius: (type === 'donut') ? 17 : 0
});
$div.peity(type, {
width: $this.width(),
height: $this.height(),
// max: 100,
// min: 0,
stroke: strokeColor,
strokeWidth: 2,
fill: fillColor,
padding: .2,
innerRadius: (type === 'donut') ? 17 : 0
});
});
});
});
})(jQuery);
/*
Apexcharts default configuration
*/
if (window.Apex) {
Apex.grid = {
padding: {
right: 0,
left: 0
}
};
Apex.dataLabels = {
enabled: false
};
Apex.plotOptions = {
pie: {
expandOnClick: false,
donut: {
size: '10%'
}
},
};
Apex.chart = {
toolbar: {
show: false,
},
animations: {
enabled: false,
}
};
Apex.stroke = {
width: 2,
curve: 'smooth',
};
Apex.fill = {
type: 'solid',
opacity: 1
};
}

5
js/ui-kit.js
View File

@@ -1,8 +1,7 @@
var uikit = {
var tabler = {
colorVariation: function (color, variation) {
var colorValue = this.colors[color];
if (colorValue) {
switch (variation) {
case 'light':
@@ -112,4 +111,4 @@ $(document).ready(function () {
});
});
window.uikit = uikit;
window.tabler = tabler;

15
pages/_data/charts.yml
View File

@@ -321,3 +321,18 @@ traffic-out:
- name: Outbound
color: red
data: [3, 9, 7, 14, 4, 5, 9, 1, 7, 10, 14, 14, 2, 6]
devices:
type: donut
sparkline: true
hide-legend: true
series:
- name: a
color: blue-dark
data: [23]
- name: b
color: blue
data: [54]
- name: c
color: blue-light
data: [34]

10
pages/_includes/js/charts-heatmap.html
View File

@@ -34,28 +34,28 @@
from: 0,
to: 20,
name: "Low",
color: uikit.colors.green
color: tabler.colors.green
}, {
from: 21,
to: 50,
name: "Medium",
color: uikit.colors.blue
color: tabler.colors.blue
}, {
from: 51,
to: 75,
name: "High",
color: uikit.colors.yellow
color: tabler.colors.yellow
}, {
from: 76,
to: 100,
name: "Extreme",
color: uikit.colors.red
color: tabler.colors.red
}]
}
}
},
{% else %}
colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}uikit.colors.{{ color[0] }}, {% endfor %}{% endif %}],
colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}tabler.colors.{{ color[0] }}, {% endfor %}{% endif %}],
{% endif %}
series: [
{% for i in site.months_short limit: 12 %}

38
pages/_includes/js/charts.html
View File

@@ -4,13 +4,10 @@
{% if data %}
<script>
$(document).ready(function(){
(new ApexCharts(document.getElementById('{{ include.id }}'), {
window.ApexCharts && (new ApexCharts(document.getElementById('{{ include.id }}'), {
chart: {
type: '{{ data.type }}',
height: document.getElementById('{{ include.id }}').offsetHeight,
toolbar: {
show: false,
},
{% if data.sparkline %}
sparkline: {
enabled: true
@@ -19,38 +16,24 @@ $(document).ready(function(){
{% if data.stacked %}
stacked: true,
{% endif %}
animations: {
enabled: false,
}
},
{% if data.type == 'area' %}
fill: {
type: 'solid',
opacity: {% if data.type == 'area' %}.16{% else %}1{% endif %}
},
grid: {
padding: {
right: 0,
left: 0,
bottom: 0,
top: 0
}
opacity: .16
},
{% endif %}
{% if data.dashed-history %}
stroke: {
{% if data.dashed-history %}
width: [2, 1],
dashArray: [0, 3],
{% else %}
width: 2,
{% endif %}
curve: 'smooth',
},
{% endif %}
{% if data.series %}
{% if data.type == 'pie' or data.type == 'donut' %}
series: [44, 55, 13, 43, 22],
series: [{% for serie in data.series %}{{ serie.data[0] }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
{% else %}
series: [{% for serie in data.series %}{
name: '{{ serie.name }}',
@@ -66,10 +49,6 @@ $(document).ready(function(){
},
{% endif %}
dataLabels: {
enabled: false
},
{% if data.days-labels-count %}
labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-05-${n+1}`),
{% endif %}
@@ -84,14 +63,13 @@ $(document).ready(function(){
{% if data.series %}
colors: [ {% for serie in data.series %}
uikit.colors["{{ serie.color | default: 'blue' }}"]{% unless forloop.last %},{% endunless %}{% endfor %}
{{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
],
{% endif %}
{% if data.hide-legend %}
legend: {
show: false, //hide legend
},
{% endif %}

2
pages/_includes/layout/debug-footer.html
View File

@@ -82,7 +82,7 @@
return false;
})
.on('click', '[data-debug="fullscreen"]', function (e) {
uikit.toggleFullscreen();
tabler.toggleFullscreen();
e.preventDefault();
return false;

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

@@ -1,12 +1,13 @@
<!-- {{ site.title }} additional libs -->
<script src="{{ site.base }}/libs/jquery/jquery.js"></script>
<script src="{{ site.base }}/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="{{ site.base }}/libs/apexcharts/apexcharts.min.js"></script>
<script src="{{ site.base }}/libs/peity/jquery.peity.min.js"></script>
<script src="{{ site.base }}/libs/jqvmap/jquery.vmap.js"></script>
<script src="{{ site.base }}/libs/jqvmap/maps/jquery.vmap.world.js"></script>
<script src="{{ site.base }}/libs/jqvmap/maps/jquery.vmap.france.js"></script>
<!--<script src="{{ site.base }}/libs/jqvmap/jquery.vmap.js"></script>-->
<!--<script src="{{ site.base }}/libs/jqvmap/maps/jquery.vmap.world.js"></script>-->
<!--<script src="{{ site.base }}/libs/jqvmap/maps/jquery.vmap.france.js"></script>-->
{% if site.debug %}
{% if jekyll.environment == 'development' %}
@@ -19,7 +20,7 @@
<script src="{{ site.base }}/js/app/charts.js"></script>
<script>
window.uikit.colors = { {% for color in site.colors %}
window.tabler.colors = { {% for color in site.colors %}
'{{ color[0] }}': '{{ color[1].hex }}'{% unless forloop.last %},{% endunless %}{% endfor %}
};
</script>

12
pages/_plugins/jekyll-filters.rb
View File

@@ -67,6 +67,18 @@ module Jekyll
value = value.gsub(/ class="feather[^"]+"/, '')
value = value.gsub(/<svg /, '<svg class="icon ' + class_name.to_s + '" ')
end
def tabler_js_color(color)
color = color.split('-')
if color.size == 2
'tabler.colorVariation("'+ color[0] + '", "'+ color[1] + '")'
else
'tabler.colors["'+ color[0] + '"]'
end
end
end
end

16
pages/cards-stats.html
View File

@@ -128,6 +128,22 @@ layout: default
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card">
<div class="card-body">
<div>Traffic monitor</div>
<div class="row">
<div class="col-6">
Lorem ipsum dolor sit amet, consectetur
</div>
<div class="col-6">
<div class="chart-square" id="chart-devices"></div>
{% include js/charts.html id="chart-devices" chart-id="devices" %}
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">6</div>
<div class="col-sm-6 col-md-4 col-lg-3">7</div>
<div class="col-sm-6 col-md-4 col-lg-3">8</div>

5
scss/ui/_charts.scss
View File

@@ -11,6 +11,11 @@
height: 2.5rem;
}
.chart-square {
height: 5.75rem;
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;