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

charts refactor, libs refactor

Browse Source
This commit is contained in:
codecalm
2019-12-18 21:26:31 +01:00
parent e5ea4d1a97
commit 526818e858
23 changed files with 573 additions and 467 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
js/tabler-charts.js
View File

@@ -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
View File

@@ -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 (