Skip to content

T
tabler

知鸟1号 / tabler
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
T
tabler

体验新版 GitCode，发现更多精彩内容 >>

提交 526818e8 编写于 作者: C codecalm
浏览文件
操作

charts refactor, libs refactor

上级 e5ea4d1a
隐藏空白更改
内联 并排
Showing with 592 addition and 486 deletion
.editorconfig
浏览文件 @ 526818e8
......@@ -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
build/copy-libs.js
浏览文件 @ 526818e8
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)
});
js/tabler-charts.js
浏览文件 @ 526818e8
......@@ -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';
window.Apex = {
chart: {
fontFamily: 'inherit',
foreColor: 'currentColor',
toolbar: {
show: false,
},
zoom: {
enabled: false,
},
animations: {
enabled: 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,
},
};
// 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,
// },
// };
}
js/tabler.js
浏览文件 @ 526818e8
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 (
......
pages/_data/charts.yml
浏览文件 @ 526818e8
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
pages/_data/colors.yml 0 → 100644
浏览文件 @ 526818e8
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'
pages/_data/libs.json
浏览文件 @ 526818e8
{
"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",
"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",
"@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"
"global-libs": [
"jquery", "bootstrap"
],
"css": [
"jqvmap/dist/jqvmap.min.css",
"selectize/dist/css/selectize.css",
"@fullcalendar/core/main.min.css",
"@fullcalendar/daygrid/main.min.css",
"@fullcalendar/timegrid/main.min.css",
"@fullcalendar/list/main.min.css"
]
"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": "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": "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"
]
}
}
pages/_data/maps.yml
浏览文件 @ 526818e8
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
......
pages/_includes/layout/css.html
浏览文件 @ 526818e8
{% 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 -->
......
pages/_includes/layout/js-capture.html
浏览文件 @ 526818e8
{% removeemptylines %}
{{ site.capture_global.scripts }}
{{ site.captured_global.scripts }}
{% endremoveemptylines %}
pages/_includes/layout/js.html
浏览文件 @ 526818e8
<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 -->
......
pages/_includes/ui/chart.html
浏览文件 @ 526818e8
......@@ -4,147 +4,158 @@
{% 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 %}
window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
chart: {
type: '{{ data.type }}',
height: {{ height | times: 16 }},
{% if data.sparkline %}
sparkline: {
enabled: true
},
{% endif %}
{% if data.stacked %}
stacked: true,
{% endif %}
},
{% if data.type == 'area' %}
fill: {
opacity: .16
},
{% endif %}
{% if data.title %}
title: {
text: '{{ data.title | escape }}'
},
{% endif %}
{% if data.dashed-history or data.stroke-curve %}
stroke: {
{% if data.dashed-history %}
width: [2, 1],
dashArray: [0, 3],
{% endif %}
{% if data.stroke-curve %}
curve: '{{ data.stroke-curve }}',
{% endif %}
},
{% 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 %}],
{% 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 %}
grid: {
show: true,
},
{% endif %}
{% if data.show-data-labels %}
dataLabels: {
enabled: true,
},
{% endif %}
{% 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 %}
},
{% endif %}
{% if data.auto-min %}
yaxis: {
min: function(min) { return min },
},
{% 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,
}
},
{% endif %}
{% if data.series %}
colors: [
{% for serie in data.series %}
{{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
],
{% endif %}
{% if data.hide-legend %}
legend: {
show: false, //hide legend
},
{% endif %}
{% if data.hide-tooltip %}
tooltip: {
enabled: false
},
{% endif %}
{% if data.hide-points %}
point: {
show: false
},
{% endif %}
{% if data.show-markers %}
markers: {
size: 2
},
{% endif %}
})).render();
});
// @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 }}'), {
chart: {
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 %}
},
fill: {
opacity: {% if data.type == 'area' %}.16{% else %}1{% endif %},
{% if data.type == 'area' %}type: 'solid'{% endif %}
},
{% if data.title %}
title: {
text: "{{ data.title | escape }}",
margin: 0,
floating: true,
offsetX: 10,
style: {
fontSize: '18px',
},
},
{% endif %}
{% if data.type == 'area' or data.type == 'line' %}
stroke: {
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 %}],
{% 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 %}
grid: {
show: true,
},
{% endif %}
{% if data.show-data-labels %}
dataLabels: {
enabled: true,
},
{% endif %}
{% 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 %}
},
{% endif %}
{% if data.days-labels-count %}
labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n + 1}`),
{% endif %}
{% if data.series %}
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,
},
{% endif %}
{% if data.hide-tooltip %}
tooltip: {
enabled: false
},
{% endif %}
{% if data.hide-points %}
point: {
show: false
},
{% endif %}
{% if data.show-markers %}
markers: {
size: 2
},
{% 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 %}
pages/_includes/ui/map.html
浏览文件 @ 526818e8
......@@ -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) {
......
pages/_includes/ui/sparkline.html
浏览文件 @ 526818e8
......@@ -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 }}
......
pages/_layouts/base.html
浏览文件 @ 526818e8
......@@ -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' %}
......
pages/_plugins/jekyll-capture.rb
浏览文件 @ 526818e8
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)
pages/_plugins/jekyll-filters.rb
浏览文件 @ 526818e8
......@@ -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
......
pages/tmp.html
浏览文件 @ 526818e8
......@@ -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">
......
scss/_debug.scss 0 → 100644
浏览文件 @ 526818e8
$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}'");
scss/_variables.scss
浏览文件 @ 526818e8
......@@ -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;
......
scss/mixins/_functions.scss
浏览文件 @ 526818e8
@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: "") {
......
scss/tabler.scss
浏览文件 @ 526818e8
......@@ -73,3 +73,7 @@
@import "dark";
@import "rtl";
@import "debug";
scss/utils/_colors.scss
浏览文件 @ 526818e8
......@@ -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%); }
}
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或