mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
charts refactor, libs refactor
This commit is contained in:
codecalm
@@ -2,8 +2,9 @@
|
||||
charset=utf-8
|
||||
end_of_line=lf
|
||||
insert_final_newline=true
|
||||
indent_style=space
|
||||
indent_size=2
|
||||
indent_style=tab
|
||||
indent_size=3
|
||||
max_line_length=off
|
||||
|
||||
[*.svg]
|
||||
indent_style=tab
|
||||
@@ -18,6 +19,10 @@ insert_final_newline=false
|
||||
indent_style=tab
|
||||
tab_width=3
|
||||
|
||||
[{*.rb,*.yml}]
|
||||
indent_style=space
|
||||
indent_size=2
|
||||
|
||||
[*.js.map]
|
||||
indent_style=tab
|
||||
indent_size=3
|
||||
|
||||
@@ -1,11 +1,22 @@
|
||||
const libs = require('../pages/_data/libs'),
|
||||
const all_libs = require('../pages/_data/libs'),
|
||||
path = require('path'),
|
||||
{ exec } = require('child_process');
|
||||
|
||||
const all_libs = libs.js.concat(libs.css);
|
||||
let files = [];
|
||||
|
||||
Object.keys(all_libs.js).forEach(function (lib) {
|
||||
files.push(Array.isArray(all_libs.js[lib]) ? all_libs.js[lib] : [all_libs.js[lib]]);
|
||||
});
|
||||
|
||||
Object.keys(all_libs.css).forEach(function (lib) {
|
||||
files.push(Array.isArray(all_libs.css[lib]) ? all_libs.css[lib] : [all_libs.css[lib]]);
|
||||
});
|
||||
|
||||
files = files.flat();
|
||||
|
||||
files.forEach(function (file) {
|
||||
let dirname = path.dirname(file).replace('@', '');
|
||||
let cmd = `mkdir -p "dist/libs/${dirname}" && cp -r node_modules/${file} dist/libs/${file.replace('@', '')}`;
|
||||
|
||||
all_libs.forEach(function (lib) {
|
||||
let dirname = path.dirname(lib).replace('@', '');
|
||||
let cmd = `mkdir -p "dist/libs/${dirname}" && cp -r node_modules/${lib} dist/libs/${lib.replace('@', '')}`;
|
||||
exec(cmd)
|
||||
});
|
||||
|
||||
@@ -5,20 +5,20 @@
|
||||
const $this = $(this),
|
||||
data = $this.attr('data-spark'),
|
||||
color = $this.attr('data-spark-color') || 'blue',
|
||||
bgColor = $this.attr('data-spark-color-bg') || 'blue',
|
||||
type = $this.attr('data-spark-type') || 'line';
|
||||
|
||||
const $div = $('<div/>').html(data);
|
||||
$this.append($div);
|
||||
|
||||
let strokeColor = tabler.colors[color],
|
||||
fillColor = tabler.colors[color];
|
||||
let fillColor;
|
||||
|
||||
if (type === 'donut' || type === 'pie') {
|
||||
fillColor = [fillColor, tabler.hexToRgbA(fillColor, 0.1)];
|
||||
fillColor = [color, bgColor];
|
||||
} else if (type === 'bar') {
|
||||
fillColor = [fillColor];
|
||||
fillColor = [color];
|
||||
} else if (type === 'line') {
|
||||
fillColor = tabler.hexToRgbA(fillColor, 0.1);
|
||||
fillColor = bgColor;
|
||||
}
|
||||
|
||||
$div.peity(type, {
|
||||
@@ -26,7 +26,7 @@
|
||||
height: $this.height(),
|
||||
// max: 100,
|
||||
// min: 0,
|
||||
stroke: strokeColor,
|
||||
stroke: color,
|
||||
strokeWidth: 2,
|
||||
fill: fillColor,
|
||||
padding: 0.2,
|
||||
@@ -40,135 +40,134 @@
|
||||
charts default configuration
|
||||
*/
|
||||
if (window.Apex) {
|
||||
const borderColor = 'rgba(0, 0, 0, 0.09)';
|
||||
const mutedColor = '#888e9a';
|
||||
// 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,
|
||||
},
|
||||
},
|
||||
// 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,
|
||||
// },
|
||||
|
||||
grid: {
|
||||
show: false,
|
||||
position: 'back',
|
||||
borderColor: borderColor,
|
||||
padding: {
|
||||
right: 0,
|
||||
left: 0,
|
||||
bottom: 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: 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,
|
||||
// },
|
||||
// };
|
||||
}
|
||||
|
||||
59
js/tabler.js
59
js/tabler.js
@@ -1,29 +1,4 @@
|
||||
const tabler = {
|
||||
colorVariation: function(color, variation) {
|
||||
const colorValue = this.colors[color];
|
||||
|
||||
if (colorValue) {
|
||||
switch (variation) {
|
||||
case 'light':
|
||||
return this.mixColors(colorValue, '#ffffff', 70);
|
||||
case 'lighten':
|
||||
return this.mixColors(colorValue, '#ffffff', 30);
|
||||
case 'lightest':
|
||||
return this.mixColors(colorValue, '#ffffff', 10);
|
||||
case 'dark':
|
||||
return this.mixColors(colorValue, '#000000', 80);
|
||||
case 'darken':
|
||||
return this.mixColors(colorValue, '#000000', 40);
|
||||
case 'darkest':
|
||||
return this.mixColors(colorValue, '#000000', 20);
|
||||
}
|
||||
|
||||
return colorValue;
|
||||
}
|
||||
|
||||
throw new Error('Wrong color: ' + color);
|
||||
},
|
||||
|
||||
hexToRgbA: function(hex, opacity) {
|
||||
let c;
|
||||
|
||||
@@ -40,40 +15,6 @@ const tabler = {
|
||||
throw new Error('Bad Hex');
|
||||
},
|
||||
|
||||
mixColors: function(color_1, color_2, weight) {
|
||||
color_1 = color_1.substr(1);
|
||||
color_2 = color_2.substr(1);
|
||||
|
||||
function d2h(d) {
|
||||
return d.toString(16);
|
||||
}
|
||||
|
||||
function h2d(h) {
|
||||
return parseInt(h, 16);
|
||||
}
|
||||
|
||||
weight = typeof weight !== 'undefined' ? weight : 50;
|
||||
|
||||
let color = '#';
|
||||
|
||||
for (let i = 0; i <= 5; i += 2) {
|
||||
let v1 = h2d(color_1.substr(i, 2)),
|
||||
v2 = h2d(color_2.substr(i, 2));
|
||||
|
||||
let val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0)));
|
||||
|
||||
while (val.length < 2) {
|
||||
val = '0' + val;
|
||||
}
|
||||
|
||||
color += val;
|
||||
}
|
||||
|
||||
return color;
|
||||
},
|
||||
|
||||
colors: (window.tabler_colors || []),
|
||||
|
||||
toggleFullscreen: function(elem) {
|
||||
elem = elem || document.documentElement;
|
||||
if (
|
||||
|
||||
@@ -1,6 +1,16 @@
|
||||
completion-tasks:
|
||||
type: bar
|
||||
days-labels-count: 7
|
||||
debug: true
|
||||
series:
|
||||
- name: Tasks completion
|
||||
data: [155, 65, 465, 265, 225, 325, 80]
|
||||
|
||||
|
||||
tasks-overview:
|
||||
type: bar
|
||||
categories: ['Sprint 1','Sprint 2','Sprint 3','Sprint 4','Sprint 5','Sprint 6','Sprint 7','Sprint 8','Sprint 9','Sprint 10','Sprint 11','Sprint 12','Sprint 13','Sprint 14','Sprint 15','Sprint 16','Sprint 17','Sprint 18','Sprint 19','Sprint 20','Sprint 21','Sprint 22','Sprint 23','Sprint 24']
|
||||
debug: true
|
||||
categories: ['Sprint 1', 'Sprint 2', 'Sprint 3', 'Sprint 4', 'Sprint 5', 'Sprint 6', 'Sprint 7', 'Sprint 8', 'Sprint 9', 'Sprint 10', 'Sprint 11', 'Sprint 12', 'Sprint 13', 'Sprint 14', 'Sprint 15', 'Sprint 16', 'Sprint 17', 'Sprint 18', 'Sprint 19', 'Sprint 20', 'Sprint 21', 'Sprint 22', 'Sprint 23', 'Sprint 24']
|
||||
series:
|
||||
- name: A
|
||||
data: [44, 32, 48, 72, 60, 16, 44, 32, 78, 50, 68, 34, 26, 48, 72, 60, 84, 64, 74, 52, 62, 50, 32, 22]
|
||||
@@ -36,10 +46,10 @@ campaigns:
|
||||
color: blue
|
||||
data: 44
|
||||
- name: Reached
|
||||
color: blue-light
|
||||
color: blue-300
|
||||
data: 36
|
||||
- name: Opened
|
||||
color: blue-lighten
|
||||
color: blue-100
|
||||
data: 18
|
||||
|
||||
tasks:
|
||||
@@ -211,67 +221,6 @@ spline:
|
||||
data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
|
||||
|
||||
|
||||
spline-rotated:
|
||||
name: Lorem ipsum
|
||||
demo: true
|
||||
type: line
|
||||
spline: true
|
||||
rotated: true
|
||||
hide-legend: true
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
series:
|
||||
- name: Maximum
|
||||
color: blue
|
||||
data: [11, 8, 15, 18, 19, 17]
|
||||
- name: Minimum
|
||||
color: pink
|
||||
data: [7, 7, 5, 7, 9, 12]
|
||||
|
||||
|
||||
bar:
|
||||
name: Lorem ipsum
|
||||
demo: true
|
||||
type: bar
|
||||
hide-legend: true
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
series:
|
||||
- name: Maximum
|
||||
color: blue
|
||||
data: [11, 8, 15, 18, 19, 17]
|
||||
- name: Minimum
|
||||
color: pink
|
||||
data: [7, 7, 5, 7, 9, 12]
|
||||
|
||||
bar-rotated:
|
||||
name: Lorem ipsum
|
||||
demo: true
|
||||
type: bar
|
||||
rotated: true
|
||||
hide-legend: true
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
series:
|
||||
- name: Maximum
|
||||
color: blue
|
||||
data: [11, 8, 15, 18, 19, 17]
|
||||
- name: Minimum
|
||||
color: pink
|
||||
data: [7, 7, 5, 7, 9, 12]
|
||||
|
||||
|
||||
bar-stacked:
|
||||
name: Lorem ipsum
|
||||
demo: true
|
||||
type: bar
|
||||
stacked: true
|
||||
hide-legend: true
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
series:
|
||||
- name: Maximum
|
||||
color: blue
|
||||
data: [11, 8, 15, 18, 19, 17]
|
||||
- name: Minimum
|
||||
color: pink
|
||||
data: [7, 7, 5, 7, 9, 12]
|
||||
|
||||
|
||||
pie:
|
||||
@@ -283,16 +232,16 @@ pie:
|
||||
sparkline: true
|
||||
series:
|
||||
- name: A
|
||||
color: blue-darker
|
||||
color: blue-700
|
||||
data: 63
|
||||
- name: B
|
||||
color: blue
|
||||
data: 44
|
||||
- name: C
|
||||
color: blue-light
|
||||
color: blue-300
|
||||
data: 12
|
||||
- name: D
|
||||
color: blue-lighter
|
||||
color: blue-100
|
||||
data: 14
|
||||
|
||||
donut:
|
||||
@@ -306,7 +255,7 @@ donut:
|
||||
color: green
|
||||
data: 63
|
||||
- name: Minimum
|
||||
color: green-light
|
||||
color: green-300
|
||||
data: 37
|
||||
|
||||
|
||||
@@ -361,14 +310,15 @@ new-clients:
|
||||
type: line
|
||||
days-labels-count: 30
|
||||
sparkline: true
|
||||
dashed-history: true
|
||||
stroke-width: [2, 1]
|
||||
stroke-dash: [0, 3]
|
||||
hide-legend: true
|
||||
series:
|
||||
- name: May
|
||||
color: blue
|
||||
data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 4, 46, 39, 62, 51, 35, 41, 67]
|
||||
- name: April
|
||||
color: gray
|
||||
color: gray-600
|
||||
data: [93, 54, 51, 24, 35, 35, 31, 67, 19, 43, 28, 36, 62, 61, 27, 39, 35, 41, 27, 35, 51, 46, 62, 37, 44, 53, 41, 65, 39, 37]
|
||||
|
||||
active-users:
|
||||
@@ -408,7 +358,6 @@ traffic-out:
|
||||
usd-eur:
|
||||
type: line
|
||||
days-labels-count: 30
|
||||
auto-min: true
|
||||
stroke-curve: straight
|
||||
series:
|
||||
- name: USD/EUR
|
||||
@@ -421,11 +370,11 @@ devices:
|
||||
hide-legend: true
|
||||
series:
|
||||
- name: a
|
||||
color: blue-dark
|
||||
color: blue-700
|
||||
data: 23
|
||||
- name: b
|
||||
color: blue
|
||||
data: 54
|
||||
- name: c
|
||||
color: blue-light
|
||||
color: blue-300
|
||||
data: 34
|
||||
|
||||
123
pages/_data/colors.yml
Normal file
123
pages/_data/colors.yml
Normal file
@@ -0,0 +1,123 @@
|
||||
blue: '#206bc4'
|
||||
blue-100: '#d2e1f3'
|
||||
blue-200: '#a6c4e7'
|
||||
blue-300: '#79a6dc'
|
||||
blue-400: '#4d89d0'
|
||||
blue-500: '#206bc4'
|
||||
blue-600: '#1a569d'
|
||||
blue-700: '#134076'
|
||||
blue-800: '#0d2b4e'
|
||||
blue-900: '#061527'
|
||||
|
||||
indigo: '#6574cd'
|
||||
indigo-100: '#e0e3f5'
|
||||
indigo-200: '#c1c7eb'
|
||||
indigo-300: '#a3ace1'
|
||||
indigo-400: '#8490d7'
|
||||
indigo-500: '#6574cd'
|
||||
indigo-600: '#515da4'
|
||||
indigo-700: '#3d467b'
|
||||
indigo-800: '#282e52'
|
||||
indigo-900: '#141729'
|
||||
|
||||
purple: '#a55eea'
|
||||
purple-100: '#eddffb'
|
||||
purple-200: '#dbbff7'
|
||||
purple-300: '#c99ef2'
|
||||
purple-400: '#b77eee'
|
||||
purple-500: '#a55eea'
|
||||
purple-600: '#844bbb'
|
||||
purple-700: '#63388c'
|
||||
purple-800: '#42265e'
|
||||
purple-900: '#21132f'
|
||||
|
||||
pink: '#f66d9b'
|
||||
pink-100: '#fde2eb'
|
||||
pink-200: '#fbc5d7'
|
||||
pink-300: '#faa7c3'
|
||||
pink-400: '#f88aaf'
|
||||
pink-500: '#f66d9b'
|
||||
pink-600: '#c5577c'
|
||||
pink-700: '#94415d'
|
||||
pink-800: '#622c3e'
|
||||
pink-900: '#31161f'
|
||||
|
||||
red: '#fa4654'
|
||||
red-100: '#fedadd'
|
||||
red-200: '#fdb5bb'
|
||||
red-300: '#fc9098'
|
||||
red-400: '#fb6b76'
|
||||
red-500: '#fa4654'
|
||||
red-600: '#c83843'
|
||||
red-700: '#962a32'
|
||||
red-800: '#641c22'
|
||||
red-900: '#320e11'
|
||||
|
||||
orange: '#ff922b'
|
||||
orange-100: '#ffe9d5'
|
||||
orange-200: '#ffd3aa'
|
||||
orange-300: '#ffbe80'
|
||||
orange-400: '#ffa855'
|
||||
orange-500: '#ff922b'
|
||||
orange-600: '#cc7522'
|
||||
orange-700: '#99581a'
|
||||
orange-800: '#663a11'
|
||||
orange-900: '#331d09'
|
||||
|
||||
yellow: '#fab005'
|
||||
yellow-100: '#feefcd'
|
||||
yellow-200: '#fddf9b'
|
||||
yellow-300: '#fcd069'
|
||||
yellow-400: '#fbc037'
|
||||
yellow-500: '#fab005'
|
||||
yellow-600: '#c88d04'
|
||||
yellow-700: '#966a03'
|
||||
yellow-800: '#644602'
|
||||
yellow-900: '#322301'
|
||||
|
||||
green: '#5eba00'
|
||||
green-100: '#dff1cc'
|
||||
green-200: '#bfe399'
|
||||
green-300: '#9ed666'
|
||||
green-400: '#7ec833'
|
||||
green-500: '#5eba00'
|
||||
green-600: '#4b9500'
|
||||
green-700: '#387000'
|
||||
green-800: '#264a00'
|
||||
green-900: '#132500'
|
||||
|
||||
teal: '#2bcbba'
|
||||
teal-100: '#d5f5f1'
|
||||
teal-200: '#aaeae3'
|
||||
teal-300: '#80e0d6'
|
||||
teal-400: '#55d5c8'
|
||||
teal-500: '#2bcbba'
|
||||
teal-600: '#22a295'
|
||||
teal-700: '#1a7a70'
|
||||
teal-800: '#11514a'
|
||||
teal-900: '#092925'
|
||||
|
||||
cyan: '#17a2b8'
|
||||
cyan-100: '#d1ecf1'
|
||||
cyan-200: '#a2dae3'
|
||||
cyan-300: '#74c7d4'
|
||||
cyan-400: '#45b5c6'
|
||||
cyan-500: '#17a2b8'
|
||||
cyan-600: '#128293'
|
||||
cyan-700: '#0e616e'
|
||||
cyan-800: '#09414a'
|
||||
cyan-900: '#052025'
|
||||
|
||||
gray: '#adb5bd'
|
||||
gray-100: '#f8f9fa'
|
||||
gray-200: '#e9ecef'
|
||||
gray-300: '#dee2e6'
|
||||
gray-400: '#ced4da'
|
||||
gray-500: '#adb5bd'
|
||||
gray-600: '#868e96'
|
||||
gray-700: '#495057'
|
||||
gray-800: '#343a40'
|
||||
gray-900: '#212529'
|
||||
|
||||
border-color: '#dce3e9'
|
||||
text-muted: '#8a91a5'
|
||||
@@ -1,32 +1,37 @@
|
||||
{
|
||||
"js": [
|
||||
"jquery/dist/jquery.min.js",
|
||||
"bootstrap/dist/js/bootstrap.bundle.min.js",
|
||||
"autosize/dist/autosize.min.js",
|
||||
"imask/dist/imask.min.js",
|
||||
|
||||
"selectize/dist/js/standalone/selectize.min.js",
|
||||
"apexcharts/dist/apexcharts.min.js",
|
||||
"global-libs": [
|
||||
"jquery", "bootstrap"
|
||||
],
|
||||
"js": {
|
||||
"jquery": "jquery/dist/jquery.min.js",
|
||||
"bootstrap": "bootstrap/dist/js/bootstrap.bundle.min.js",
|
||||
"autosize": "autosize/dist/autosize.min.js",
|
||||
"imask": "imask/dist/imask.min.js",
|
||||
"selectize": "selectize/dist/js/standalone/selectize.min.js",
|
||||
"apexcharts": "apexcharts/dist/apexcharts.min.js",
|
||||
"jqvmap": [
|
||||
"jqvmap/dist/jquery.vmap.min.js",
|
||||
"jqvmap/dist/maps/jquery.vmap.world.js",
|
||||
"jqvmap/dist/maps/jquery.vmap.usa.js",
|
||||
"jqvmap/dist/maps/continents/jquery.vmap.europe.js",
|
||||
"peity/jquery.peity.min.js",
|
||||
"selectize/dist/js/selectize.min.js",
|
||||
|
||||
"jqvmap/dist/maps/continents/jquery.vmap.europe.js"
|
||||
],
|
||||
"peity": "peity/jquery.peity.min.js",
|
||||
"fullcalendar": [
|
||||
"@fullcalendar/core/main.min.js",
|
||||
"@fullcalendar/daygrid/main.min.js",
|
||||
"@fullcalendar/interaction/main.min.js",
|
||||
"@fullcalendar/timegrid/main.min.js",
|
||||
"@fullcalendar/list/main.min.js"
|
||||
],
|
||||
"css": [
|
||||
"jqvmap/dist/jqvmap.min.css",
|
||||
"selectize/dist/css/selectize.css",
|
||||
|
||||
]
|
||||
},
|
||||
"css": {
|
||||
"jqvmap": "jqvmap/dist/jqvmap.min.css",
|
||||
"selectize": "selectize/dist/css/selectize.css",
|
||||
"fullcalendar": [
|
||||
"@fullcalendar/core/main.min.css",
|
||||
"@fullcalendar/daygrid/main.min.css",
|
||||
"@fullcalendar/timegrid/main.min.css",
|
||||
"@fullcalendar/list/main.min.css"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
world:
|
||||
title: World map
|
||||
map: world_en
|
||||
values: '{"af":16,"al":11,"dz":158,"ao":85,"ag":1,"ar":351,"am":8,"au":1219,"at":366,"az":52,"bs":7,"bh":21,"bd":105,"bb":3,"by":52,"be":461,"bz":1,"bj":6,"bt":1,"bo":19,"ba":16,"bw":12,"br":2023,"bn":11,"bg":44,"bf":8,"bi":1,"kh":11,"cm":21,"ca":1563,"cv":1,"cf":2,"td":7,"cl":199,"cn":5745,"co":283,"km":0,"cd":12,"cg":11,"cr":35,"ci":22,"hr":59,"cy":22,"cz":195,"dk":304,"dj":1,"dm":0,"do":50,"ec":61,"eg":216,"sv":21,"gq":14,"er":2,"ee":19,"et":30,"fj":3,"fi":231,"fr":2555,"ga":12,"gm":1,"ge":11,"de":3305,"gh":18,"gr":305,"gd":0,"gt":40,"gn":4,"gw":0,"gy":2,"ht":6,"hn":15,"hk":226,"hu":132,"is":12,"in":1430,"id":695,"ir":337,"iq":84,"ie":204,"il":201,"it":2036,"jm":13,"jp":5390,"jo":27,"kz":129,"ke":32,"ki":0,"kr":986,"undefined":5,"kw":117,"kg":4,"la":6,"lv":23,"lb":39,"ls":1,"lr":0,"ly":77,"lt":35,"lu":52,"mk":9,"mg":8,"mw":5,"my":218,"mv":1,"ml":9,"mt":7,"mr":3,"mu":9,"mx":1004,"md":5,"mn":5,"me":3,"ma":91,"mz":10,"mm":35,"na":11,"np":15,"nl":770,"nz":138,"ni":6,"ne":5,"ng":206,"no":413,"om":53,"pk":174,"pa":27,"pg":8,"py":17,"pe":153,"ph":189,"pl":438,"pt":223,"qa":126,"ro":158,"ru":1476,"rw":5,"ws":0,"st":0,"sa":434,"sn":12,"rs":38,"sc":0,"sl":1,"sg":217,"sk":86,"si":46,"sb":0,"za":354,"es":1374,"lk":48,"kn":0,"lc":1,"vc":0,"sd":65,"sr":3,"sz":3,"se":444,"ch":522,"sy":59,"tw":426,"tj":5,"tz":22,"th":312,"tl":0,"tg":3,"to":0,"tt":21,"tn":43,"tr":729,"tm":0,"ug":17,"ua":136,"ae":239,"gb":2258,"us":4624,"uy":40,"uz":37,"vu":0,"ve":285,"vn":101,"ye":30,"zm":15,"zw":5}'
|
||||
values: '{"af":16, "al":11, "dz":158, "ao":85, "ag":1, "ar":351, "am":8, "au":1219, "at":366, "az":52, "bs":7, "bh":21, "bd":105, "bb":3, "by":52, "be":461, "bz":1, "bj":6, "bt":1, "bo":19, "ba":16, "bw":12, "br":2023, "bn":11, "bg":44, "bf":8, "bi":1, "kh":11, "cm":21, "ca":1563, "cv":1, "cf":2, "td":7, "cl":199, "cn":5745, "co":283, "km":0, "cd":12, "cg":11, "cr":35, "ci":22, "hr":59, "cy":22, "cz":195, "dk":304, "dj":1, "dm":0, "do":50, "ec":61, "eg":216, "sv":21, "gq":14, "er":2, "ee":19, "et":30, "fj":3, "fi":231, "fr":2555, "ga":12, "gm":1, "ge":11, "de":3305, "gh":18, "gr":305, "gd":0, "gt":40, "gn":4, "gw":0, "gy":2, "ht":6, "hn":15, "hk":226, "hu":132, "is":12, "in":1430, "id":695, "ir":337, "iq":84, "ie":204, "il":201, "it":2036, "jm":13, "jp":5390, "jo":27, "kz":129, "ke":32, "ki":0, "kr":986, "undefined":5, "kw":117, "kg":4, "la":6, "lv":23, "lb":39, "ls":1, "lr":0, "ly":77, "lt":35, "lu":52, "mk":9, "mg":8, "mw":5, "my":218, "mv":1, "ml":9, "mt":7, "mr":3, "mu":9, "mx":1004, "md":5, "mn":5, "me":3, "ma":91, "mz":10, "mm":35, "na":11, "np":15, "nl":770, "nz":138, "ni":6, "ne":5, "ng":206, "no":413, "om":53, "pk":174, "pa":27, "pg":8, "py":17, "pe":153, "ph":189, "pl":438, "pt":223, "qa":126, "ro":158, "ru":1476, "rw":5, "ws":0, "st":0, "sa":434, "sn":12, "rs":38, "sc":0, "sl":1, "sg":217, "sk":86, "si":46, "sb":0, "za":354, "es":1374, "lk":48, "kn":0, "lc":1, "vc":0, "sd":65, "sr":3, "sz":3, "se":444, "ch":522, "sy":59, "tw":426, "tj":5, "tz":22, "th":312, "tl":0, "tg":3, "to":0, "tt":21, "tn":43, "tr":729, "tm":0, "ug":17, "ua":136, "ae":239, "gb":2258, "us":4624, "uy":40, "uz":37, "vu":0, "ve":285, "vn":101, "ye":30, "zm":15, "zw":5}'
|
||||
|
||||
europe:
|
||||
title: Map of Europe
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
{% if site.data.libs %}
|
||||
<!-- Libs CSS -->
|
||||
{% for lib in site.data.libs.css %}
|
||||
<link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ lib | replace: '@', '' }}{% else %}{{ lib }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet"/>
|
||||
{% endfor %}
|
||||
{% if site.data.libs.css %}
|
||||
<!-- Libs CSS -->
|
||||
{% for lib in site.data.libs.css %}
|
||||
{% for file in lib[1] %}
|
||||
<link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet"/>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Tabler Core -->
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
{% removeemptylines %}
|
||||
{{ site.capture_global.scripts }}
|
||||
{{ site.captured_global.scripts }}
|
||||
{% endremoveemptylines %}
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
<script>
|
||||
window.tabler_colors = { {% for color in site.colors %}
|
||||
'{{ color[0] }}': '{{ color[1].hex }}',{% endfor %}
|
||||
};
|
||||
</script>
|
||||
|
||||
{% if site.data.libs %}
|
||||
<!-- Libs JS -->
|
||||
{% for lib in site.data.libs.js %}
|
||||
<script src="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ lib | replace: '@', '' }}{% else %}{{ lib }}{% endif %}?{{ site.time | date: '%s' }}"></script>
|
||||
{% endfor %}
|
||||
{% if site.data.libs.js and site.captured_libs %}
|
||||
<!-- Libs JS -->
|
||||
{% for lib in site.data.libs.js %}
|
||||
{% if site.captured_libs contains lib[0] or site.data.libs.global-libs contains lib[0] %}
|
||||
{% for file in lib[1] %}
|
||||
<script src="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}?{{ site.time | date: '%s' }}"></script>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Tabler Core -->
|
||||
|
||||
@@ -4,70 +4,93 @@
|
||||
{% assign class = include.class | default: '' %}
|
||||
|
||||
{% if include['size'] == 'sm' %}
|
||||
{% assign class = class | append: ' chart-sm' | strip %}
|
||||
{% assign height = 2.5 %}
|
||||
{% assign class = class | append: ' chart-sm' | strip %}
|
||||
{% assign height = 2.5 %}
|
||||
{% endif %}
|
||||
|
||||
{% if data %}
|
||||
<div id="chart-{{ id }}"{% if class %} class="{{ class }}"{% endif %}></div>
|
||||
<div id="chart-{{ id }}" {% if class %} class="{{ class }}" {% endif %}{% if data.debug %}
|
||||
style="outline: 1px solid red" {% endif %}></div>
|
||||
|
||||
{% append_lib apexcharts %}
|
||||
{% capture script %}
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
{% if jekyll.environment == 'development' %}window.tabler_chart = window.tabler_chart || {};{% endif %}
|
||||
// @formatter:off
|
||||
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 }}'), {
|
||||
window.ApexCharts && ({% if jekyll.environment == 'development' %}
|
||||
window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}
|
||||
new ApexCharts(document.getElementById('chart-{{ id }}'), {
|
||||
chart: {
|
||||
type: '{{ data.type }}',
|
||||
type: "{{ data.type }}",
|
||||
{% if data.title %}
|
||||
fontFamily: 'inherit',
|
||||
{% endif %}
|
||||
height: {{ height | times: 16 }},
|
||||
|
||||
{% if data.sparkline %}
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
{% else %}
|
||||
toolbar: {
|
||||
show: true,
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% unless data.animations %}
|
||||
animations: {
|
||||
enabled: false
|
||||
},
|
||||
{% endunless %}
|
||||
|
||||
{% if data.stacked %}
|
||||
stacked: true,
|
||||
{% endif %}
|
||||
},
|
||||
|
||||
{% if data.type == 'area' %}
|
||||
fill: {
|
||||
opacity: .16
|
||||
opacity: {% if data.type == 'area' %}.16{% else %}1{% endif %},
|
||||
{% if data.type == 'area' %}type: 'solid'{% endif %}
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.title %}
|
||||
title: {
|
||||
text: '{{ data.title | escape }}'
|
||||
text: "{{ data.title | escape }}",
|
||||
margin: 0,
|
||||
floating: true,
|
||||
offsetX: 10,
|
||||
style: {
|
||||
fontSize: '18px',
|
||||
},
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.dashed-history or data.stroke-curve %}
|
||||
{% if data.type == 'area' or data.type == 'line' %}
|
||||
stroke: {
|
||||
{% if data.dashed-history %}
|
||||
width: [2, 1],
|
||||
dashArray: [0, 3],
|
||||
{% endif %}
|
||||
{% if data.stroke-curve %}
|
||||
curve: '{{ data.stroke-curve }}',
|
||||
{% endif %}
|
||||
width: {% if data.stroke-width %}[{{ data.stroke-width | join: ', '}}]{% else %}2{% endif %},
|
||||
{% if data.stroke-dash %}dashArray: [{{ data.stroke-dash | join: ', '}}],{% endif %}
|
||||
lineCap: "round",
|
||||
curve: "{{ data.stroke-curve | default: 'smooth' }}",
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.series %}
|
||||
{% 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 %}],
|
||||
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: ', '}}]
|
||||
{% else %}series: [{% for serie in data.series %}{
|
||||
name: "{{ serie.name }}",
|
||||
data: [{{ serie.data | join: ', ' }}]
|
||||
}{% unless forloop.last %},{% endunless %}{% endfor %}],
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if data.show-grid %}
|
||||
{% if data.show - grid %}
|
||||
grid: {
|
||||
show: true,
|
||||
},
|
||||
@@ -81,39 +104,26 @@
|
||||
|
||||
{% if data.categories or data.days-labels-count %}
|
||||
xaxis: {
|
||||
{% if data.categories %}categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],{% endif %}
|
||||
{% if data.days-labels-count %}type: 'datetime',{% endif %}
|
||||
},
|
||||
{% if data.categories %}
|
||||
categories: [{% for category in data.categories %}"{{ category }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
|
||||
{% endif %}
|
||||
|
||||
{% if data.auto-min %}
|
||||
yaxis: {
|
||||
min: function(min) { return min },
|
||||
{% if data.days-labels-count %}
|
||||
type: 'datetime', {% endif %}
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.days-labels-count %}
|
||||
labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n+1}`),
|
||||
{% endif %}
|
||||
|
||||
{% if data.rotated %}
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
}
|
||||
},
|
||||
labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n + 1}`),
|
||||
{% endif %}
|
||||
|
||||
{% if data.series %}
|
||||
colors: [
|
||||
{% for serie in data.series %}
|
||||
{{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
|
||||
],
|
||||
colors: [{% for serie in data.series %}{% assign color = serie.color | default: data.color | default: 'blue' %}"{{ color | tabler_color }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
|
||||
{% endif %}
|
||||
|
||||
{% if data.hide-legend %}
|
||||
legend: {
|
||||
show: false, //hide legend
|
||||
show: false,
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
@@ -136,15 +146,16 @@
|
||||
{% endif %}
|
||||
})).render();
|
||||
});
|
||||
// @formatter:on
|
||||
</script>
|
||||
{% endcapture %}
|
||||
|
||||
{% if include.show-scripts %}
|
||||
{{ script }}
|
||||
{{ script }}
|
||||
{% else %}
|
||||
{% capture_global scripts %}
|
||||
{{ script }}
|
||||
{% endcapture_global %}
|
||||
{% capture_global scripts %}
|
||||
{{ script }}
|
||||
{% endcapture_global %}
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
@@ -5,6 +5,8 @@
|
||||
|
||||
{% if data %}
|
||||
<div id="map-{{ id }}" style="height: {{ height }}rem"></div>
|
||||
|
||||
{% append_lib jqvmap %}
|
||||
{% capture script %}
|
||||
<script>
|
||||
{% if jekyll.environment == 'development' %}window.tabler_map = window.tabler_map || {};{% endif %}
|
||||
@@ -17,7 +19,8 @@
|
||||
borderColor: 'transparent',
|
||||
{% if data.zoom %}enableZoom: true,{% endif %}
|
||||
{% if data.values %}
|
||||
scaleColors: [tabler.colorVariation('{{ color }}', 'lightest'), tabler.colors.{{ color }}],
|
||||
{% assign color-light = color | append: "-100" %}
|
||||
scaleColors: ["{{ color | tabler_color: '100' }}", "{{ color | tabler_color }}"],
|
||||
normalizeFunction: 'polynomial',
|
||||
values: (chart_data = {{ data.values }}),
|
||||
onLabelShow: function (event, label, code) {
|
||||
|
||||
@@ -4,7 +4,8 @@
|
||||
{% assign square = true %}
|
||||
{% endif %}
|
||||
|
||||
<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 }}"{% endif %}>
|
||||
{% 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 | tabler_color }}" data-spark-color-bg="{{ include.color | tabler_color: '100' }}"{% endif %}>
|
||||
{% if include.label %}
|
||||
<div class="sparkline-label">
|
||||
{{ include.label }}
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
|
||||
<meta http-equiv="Content-Language" content="en"/>
|
||||
|
||||
<meta name="msapplication-TileColor" content="{{ site.colors.blue.hex }}"/>
|
||||
<meta name="theme-color" content="{{ site.colors.blue.hex }}"/>
|
||||
<meta name="msapplication-TileColor" content="{{ site.data.colors.blue }}"/>
|
||||
<meta name="theme-color" content="{{ site.data.colors.blue }}"/>
|
||||
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||||
@@ -37,7 +37,7 @@
|
||||
|
||||
{{ content }}
|
||||
|
||||
{% include_cached layout/js.html %}
|
||||
{% include layout/js.html %}
|
||||
{% include layout/js-capture.html %}
|
||||
|
||||
{% if site.debug and jekyll.environment == 'development' %}
|
||||
|
||||
@@ -1,38 +1,54 @@
|
||||
module Jekyll
|
||||
|
||||
module Tags
|
||||
|
||||
class CaptureGlobal < Liquid::Block
|
||||
|
||||
def initialize(tag_name, text, tokens)
|
||||
super
|
||||
@text = text.strip
|
||||
end
|
||||
|
||||
def render(context)
|
||||
if $capture_global[@text] === nil
|
||||
$capture_global[@text] = '';
|
||||
if $captured_global[@text] === nil
|
||||
$captured_global[@text] = '';
|
||||
end
|
||||
|
||||
$capture_global[@text] += super.strip + "\n\n"
|
||||
$captured_global[@text] += super.strip + "\n\n"
|
||||
|
||||
''
|
||||
end
|
||||
end
|
||||
|
||||
class CaptureScripts < Liquid::Tag
|
||||
def initialize(tag_name, text, tokens)
|
||||
super
|
||||
@text = text.strip
|
||||
end
|
||||
|
||||
def render(context)
|
||||
unless $captured_libs.include? @text
|
||||
$captured_libs.push(@text)
|
||||
end
|
||||
|
||||
''
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
Jekyll::Hooks.register :site, :after_init do |page, jekyll|
|
||||
$capture_global = {}
|
||||
$captured_global = {}
|
||||
$captured_libs = []
|
||||
end
|
||||
|
||||
Jekyll::Hooks.register :pages, :pre_render do |page, jekyll|
|
||||
jekyll.site['capture_global'] = $capture_global
|
||||
jekyll.site['captured_global'] = $captured_global
|
||||
jekyll.site['captured_libs'] = $captured_libs
|
||||
end
|
||||
|
||||
Jekyll::Hooks.register :pages, :post_render do |page, jekyll|
|
||||
$capture_global = {}
|
||||
$captured_global = {}
|
||||
$captured_libs = []
|
||||
end
|
||||
end
|
||||
|
||||
Liquid::Template.register_tag('capture_global', Jekyll::Tags::CaptureGlobal)
|
||||
Liquid::Template.register_tag('append_lib', Jekyll::Tags::CaptureScripts)
|
||||
|
||||
|
||||
@@ -69,16 +69,6 @@ module Jekyll
|
||||
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
|
||||
|
||||
def replace_regex(input, reg_str, repl_str)
|
||||
re = Regexp.new reg_str
|
||||
|
||||
@@ -89,6 +79,15 @@ module Jekyll
|
||||
r, g, b = color.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/).captures
|
||||
"rgb(#{r.hex}, #{g.hex}, #{b.hex})"
|
||||
end
|
||||
|
||||
def tabler_color(color, variation = false)
|
||||
if variation
|
||||
color = color + '-' + variation
|
||||
end
|
||||
|
||||
Jekyll.sites.first.data['colors'][color]
|
||||
end
|
||||
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
@@ -3,6 +3,13 @@ tmp: true
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include ui/chart.html chart-id="completion-tasks" height=15 %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
|
||||
32
scss/_debug.scss
Normal file
32
scss/_debug.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
$debug: false;
|
||||
|
||||
@if $debug {
|
||||
$colors: ("blue": $blue, "indigo": $indigo, "purple": $purple, "pink": $pink, "red": $red, "orange": $orange, "yellow": $yellow, "green": $green, "teal": $teal, "cyan": $cyan);
|
||||
|
||||
@each $name, $color in $colors {
|
||||
@debug ("#{$name}: '#{$color}'");
|
||||
@debug ("#{$name}-100: '#{tint-color($color, 8)}'");
|
||||
@debug ("#{$name}-200: '#{tint-color($color, 6)}'");
|
||||
@debug ("#{$name}-300: '#{tint-color($color, 4)}'");
|
||||
@debug ("#{$name}-400: '#{tint-color($color, 2)}'");
|
||||
@debug ("#{$name}-500: '#{$color}'");
|
||||
@debug ("#{$name}-600: '#{shade-color($color, 2)}'");
|
||||
@debug ("#{$name}-700: '#{shade-color($color, 4)}'");
|
||||
@debug ("#{$name}-800: '#{shade-color($color, 6)}'");
|
||||
@debug ("#{$name}-900: '#{shade-color($color, 8)}'");
|
||||
}
|
||||
|
||||
@debug ("gray: '#{$gray-500}'");
|
||||
@debug ("gray-100: '#{$gray-100}'");
|
||||
@debug ("gray-200: '#{$gray-200}'");
|
||||
@debug ("gray-300: '#{$gray-300}'");
|
||||
@debug ("gray-400: '#{$gray-400}'");
|
||||
@debug ("gray-500: '#{$gray-500}'");
|
||||
@debug ("gray-600: '#{$gray-600}'");
|
||||
@debug ("gray-700: '#{$gray-700}'");
|
||||
@debug ("gray-800: '#{$gray-800}'");
|
||||
@debug ("gray-900: '#{$gray-900}'");
|
||||
}
|
||||
|
||||
@debug ("border-color: '#{$border-color}'");
|
||||
@debug ("text-muted: '#{$text-muted}'");
|
||||
@@ -14,6 +14,8 @@ $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
|
||||
$icon-fonts: () !default;
|
||||
|
||||
// COLORS
|
||||
$theme-color-interval: 10% !default;
|
||||
|
||||
$light-black: rgba(0, 0, 0, .4) !default;
|
||||
$light-white: rgba(255, 255, 255, .4) !default;
|
||||
$min-black: rgba(135, 150, 165, .032) !default;
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
@function alpha-attribute($color, $background) {
|
||||
$percent: alpha($color) * 100%;
|
||||
$opaque: opacify($color, 1);
|
||||
|
||||
@return mix($opaque, $background, $percent);
|
||||
}
|
||||
//@function alpha-attribute($color, $background) {
|
||||
// $percent: alpha($color) * 100%;
|
||||
// $opaque: opacify($color, 1);
|
||||
//
|
||||
// @return mix($opaque, $background, $percent);
|
||||
//}
|
||||
|
||||
@function theme-color-lighter($color) {
|
||||
@return rgba($color, .2);
|
||||
@return tint-color($color, 8);
|
||||
}
|
||||
|
||||
@function str-replace($string, $search, $replace: "") {
|
||||
|
||||
@@ -73,3 +73,7 @@
|
||||
|
||||
@import "dark";
|
||||
@import "rtl";
|
||||
|
||||
@import "debug";
|
||||
|
||||
|
||||
|
||||
@@ -5,12 +5,10 @@ COLORS VARIATIONS
|
||||
*/
|
||||
@if $enable-color-hues {
|
||||
@each $color, $value in $colors {
|
||||
.bg-#{$color}-lightest { background: mix($value, #fff, 10%); }
|
||||
.bg-#{$color}-lighter { background: mix($value, #fff, 30%); }
|
||||
.bg-#{$color}-light { background: mix($value, #fff, 70%); }
|
||||
.bg-#{$color}-dark { background: mix($value, #000, 80%); }
|
||||
.bg-#{$color}-darker { background: mix($value, #000, 40%); }
|
||||
.bg-#{$color}-darkest { background: mix($value, #000, 20%); }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user