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,5 +1,15 @@
|
||||
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
|
||||
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
|
||||
@@ -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,9 @@
|
||||
{% if site.data.libs %}
|
||||
{% if site.data.libs.css %}
|
||||
<!-- 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"/>
|
||||
{% 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 %}
|
||||
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
{% removeemptylines %}
|
||||
{{ site.capture_global.scripts }}
|
||||
{{ site.captured_global.scripts }}
|
||||
{% endremoveemptylines %}
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
<script>
|
||||
window.tabler_colors = { {% for color in site.colors %}
|
||||
'{{ color[0] }}': '{{ color[1].hex }}',{% endfor %}
|
||||
};
|
||||
</script>
|
||||
|
||||
{% if site.data.libs %}
|
||||
{% if site.data.libs.js and site.captured_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>
|
||||
{% 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 %}
|
||||
|
||||
|
||||
@@ -9,48 +9,72 @@
|
||||
{% 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>
|
||||
// @formatter:off
|
||||
document.addEventListener("DOMContentLoaded", function (event) {
|
||||
{% if jekyll.environment == 'development' %}window.tabler_chart = window.tabler_chart || {};{% endif %}
|
||||
{% 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 %}
|
||||
|
||||
@@ -59,9 +83,8 @@
|
||||
series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
|
||||
labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
|
||||
|
||||
{% else %}
|
||||
series: [{% for serie in data.series %}{
|
||||
name: '{{ serie.name }}',
|
||||
{% else %}series: [{% for serie in data.series %}{
|
||||
name: "{{ serie.name }}",
|
||||
data: [{{ serie.data | join: ', ' }}]
|
||||
}{% unless forloop.last %},{% endunless %}{% endfor %}],
|
||||
{% endif %}
|
||||
@@ -81,14 +104,12 @@
|
||||
|
||||
{% 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 %}
|
||||
|
||||
@@ -96,24 +117,13 @@
|
||||
labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n + 1}`),
|
||||
{% endif %}
|
||||
|
||||
{% if data.rotated %}
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
}
|
||||
},
|
||||
{% 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,6 +146,7 @@
|
||||
{% endif %}
|
||||
})).render();
|
||||
});
|
||||
// @formatter:on
|
||||
</script>
|
||||
{% endcapture %}
|
||||
|
||||
|
||||
@@ -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