talksik/nirvana
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

making it work but it's sort of a mess

Browse Source
This commit is contained in:
Arjun Patel
2022-01-10 22:51:06 -08:00
parent 91a01f7b7c
commit 81a7358452
1583 changed files with 26 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/js/custom/documentation/charts/flotcharts/axis.js
+179
View File
@@ -0,0 +1,179 @@
"use strict";
// Class definition
var KTFlotDemoAxis = function () {
// Private functions
var exampleAxis = function () {
function randValue() {
return (Math.floor(Math.random() * (1 + 40 - 20))) + 20;
}
var pageviews = [
[1, randValue()],
[2, randValue()],
[3, 2 + randValue()],
[4, 3 + randValue()],
[5, 5 + randValue()],
[6, 10 + randValue()],
[7, 15 + randValue()],
[8, 20 + randValue()],
[9, 25 + randValue()],
[10, 30 + randValue()],
[11, 35 + randValue()],
[12, 25 + randValue()],
[13, 15 + randValue()],
[14, 20 + randValue()],
[15, 45 + randValue()],
[16, 50 + randValue()],
[17, 65 + randValue()],
[18, 70 + randValue()],
[19, 85 + randValue()],
[20, 80 + randValue()],
[21, 75 + randValue()],
[22, 80 + randValue()],
[23, 75 + randValue()],
[24, 70 + randValue()],
[25, 65 + randValue()],
[26, 75 + randValue()],
[27, 80 + randValue()],
[28, 85 + randValue()],
[29, 90 + randValue()],
[30, 95 + randValue()]
];
var visitors = [
[1, randValue() - 5],
[2, randValue() - 5],
[3, randValue() - 5],
[4, 6 + randValue()],
[5, 5 + randValue()],
[6, 20 + randValue()],
[7, 25 + randValue()],
[8, 36 + randValue()],
[9, 26 + randValue()],
[10, 38 + randValue()],
[11, 39 + randValue()],
[12, 50 + randValue()],
[13, 51 + randValue()],
[14, 12 + randValue()],
[15, 13 + randValue()],
[16, 14 + randValue()],
[17, 15 + randValue()],
[18, 15 + randValue()],
[19, 16 + randValue()],
[20, 17 + randValue()],
[21, 18 + randValue()],
[22, 19 + randValue()],
[23, 20 + randValue()],
[24, 21 + randValue()],
[25, 14 + randValue()],
[26, 24 + randValue()],
[27, 25 + randValue()],
[28, 26 + randValue()],
[29, 27 + randValue()],
[30, 31 + randValue()]
];
var plot = $.plot($("#kt_docs_flot_axis"), [{
data: pageviews,
label: "Unique Visits",
lines: {
lineWidth: 1,
},
shadowSize: 0
}, {
data: visitors,
label: "Page Views",
lines: {
lineWidth: 1,
},
shadowSize: 0
}], {
series: {
lines: {
show: true,
lineWidth: 2,
fill: true,
fillColor: {
colors: [{
opacity: 0.05
}, {
opacity: 0.01
}]
}
},
points: {
show: true,
radius: 3,
lineWidth: 1
},
shadowSize: 2
},
grid: {
hoverable: true,
clickable: true,
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
borderColor: KTUtil.getCssVariableValue('--bs-light-dark'),
borderWidth: 1
},
colors: [KTUtil.getCssVariableValue('--bs-active-primary'), KTUtil.getCssVariableValue('--bs-active-danger')],
xaxis: {
ticks: 11,
tickDecimals: 0,
tickColor: KTUtil.getCssVariableValue('--bs-active-dark'),
},
yaxis: {
ticks: 11,
tickDecimals: 0,
tickColor: KTUtil.getCssVariableValue('--bs-active-dark'),
}
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 15,
border: '1px solid ' + KTUtil.getCssVariableValue('--bs-light-dark'),
padding: '4px',
color: + KTUtil.getCssVariableValue('--bs-active-dark'),
'border-radius': '3px',
'background-color': + KTUtil.getCssVariableValue('--bs-light-dark'),
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#chart_2").bind("plothover", function(event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y);
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
}
return {
// Public Functions
init: function () {
exampleAxis();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFlotDemoAxis.init();
});
public/assets/js/custom/documentation/charts/flotcharts/bar.js
+56
View File
@@ -0,0 +1,56 @@
"use strict";
// Class definition
var KTFlotDemoBar = function () {
// Private functions
var exampleBar = function () {
// horizontal bar chart:
var data1 = [
[10, 10],
[20, 20],
[30, 30],
[40, 40],
[50, 50],
[60, 60],
[70, 70],
[80, 80],
[90, 90],
[100, 100],
];
var options = {
colors: [KTUtil.getCssVariableValue('--bs-active-primary')],
series: {
bars: {
show: true
}
},
bars: {
horizontal: true,
barWidth: 6,
lineWidth: 0, // in pixels
shadowSize: 0,
align: 'left'
},
grid: {
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
borderColor: KTUtil.getCssVariableValue('--bs-light-dark'),
borderWidth: 1
}
};
$.plot($("#kt_docs_flot_bar"), [data1], options);
}
return {
// Public Functions
init: function () {
exampleBar();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFlotDemoBar.init();
});
public/assets/js/custom/documentation/charts/flotcharts/basic.js
+109
View File
@@ -0,0 +1,109 @@
"use strict";
// Class definition
var KTFlotDemoBasic = function () {
// Private functions
var exampleBasic = function () {
var data = [];
var totalPoints = 250;
// random data generator for plot charts
function getRandomData() {
if (data.length > 0) data = data.slice(1);
// do a random walk
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50;
var y = prev + Math.random() * 10 - 5;
if (y < 0) y = 0;
if (y > 100) y = 100;
data.push(y);
}
// zip the generated y values with the x values
var res = [];
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]]);
}
return res;
}
var d1 = [];
for (var i = 0; i < Math.PI * 2; i += 0.25)
d1.push([i, Math.sin(i)]);
var d2 = [];
for (var i = 0; i < Math.PI * 2; i += 0.25)
d2.push([i, Math.cos(i)]);
var d3 = [];
for (var i = 0; i < Math.PI * 2; i += 0.1)
d3.push([i, Math.tan(i)]);
$.plot($("#kt_docs_flot_basic"), [{
label: "sin(x)",
data: d1,
lines: {
lineWidth: 1,
},
shadowSize: 0
}, {
label: "cos(x)",
data: d2,
lines: {
lineWidth: 1,
},
shadowSize: 0
}, {
label: "tan(x)",
data: d3,
lines: {
lineWidth: 1,
},
shadowSize: 0
}], {
colors: [KTUtil.getCssVariableValue('--bs-active-success'), KTUtil.getCssVariableValue('--bs-active-primary'), KTUtil.getCssVariableValue('--bs-active-danger')],
series: {
lines: {
show: true,
},
points: {
show: true,
fill: true,
radius: 3,
lineWidth: 1
}
},
xaxis: {
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
ticks: [0, [Math.PI / 2, "\u03c0/2"],
[Math.PI, "\u03c0"],
[Math.PI * 3 / 2, "3\u03c0/2"],
[Math.PI * 2, "2\u03c0"]
]
},
yaxis: {
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
ticks: 10,
min: -2,
max: 2
},
grid: {
borderColor: KTUtil.getCssVariableValue('--bs-light-dark'),
borderWidth: 1
}
});
}
return {
// Public Functions
init: function () {
exampleBasic();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFlotDemoBasic.init();
});
public/assets/js/custom/documentation/charts/flotcharts/dynamic.js
+90
View File
@@ -0,0 +1,90 @@
"use strict";
// Class definition
var KTFlotDemoDynamic = function () {
// Private functions
var exampleDynamic = function () {
var data = [];
var totalPoints = 250;
// random data generator for plot charts
function getRandomData() {
if (data.length > 0) data = data.slice(1);
// do a random walk
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50;
var y = prev + Math.random() * 10 - 5;
if (y < 0) y = 0;
if (y > 100) y = 100;
data.push(y);
}
// zip the generated y values with the x values
var res = [];
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]]);
}
return res;
}
//server load
var options = {
colors: [KTUtil.getCssVariableValue('--bs-active-danger'), KTUtil.getCssVariableValue('--bs-active-primary')],
series: {
shadowSize: 1
},
lines: {
show: true,
lineWidth: 0.5,
fill: true,
fillColor: {
colors: [{
opacity: 0.1
}, {
opacity: 1
}]
}
},
yaxis: {
min: 0,
max: 100,
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
tickFormatter: function(v) {
return v + "%";
}
},
xaxis: {
show: false,
},
colors: [KTUtil.getCssVariableValue('--bs-active-primary')],
grid: {
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
borderWidth: 0,
}
};
var updateInterval = 30;
var plot = $.plot($("#kt_docs_flot_dynamic"), [getRandomData()], options);
function update() {
plot.setData([getRandomData()]);
plot.draw();
setTimeout(update, updateInterval);
}
update();
}
return {
// Public Functions
init: function () {
exampleDynamic();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFlotDemoDynamic.init();
});
public/assets/js/custom/documentation/charts/flotcharts/pie.js
+34
View File
@@ -0,0 +1,34 @@
"use strict";
// Class definition
var KTFlotDemoPie = function () {
// Private functions
var examplePie = function () {
var data = [
{ label: "CSS", data: 10, color: KTUtil.getCssVariableValue('--bs-active-primary') },
{ label: "HTML5", data: 40, color: KTUtil.getCssVariableValue('--bs-active-success') },
{ label: "PHP", data: 30, color: KTUtil.getCssVariableValue('--bs-active-danger') },
{ label: "Angular", data: 20, color: KTUtil.getCssVariableValue('--bs-active-warning') }
];
$.plot($("#kt_docs_flot_pie"), data, {
series: {
pie: {
show: true
}
}
});
}
return {
// Public Functions
init: function () {
examplePie();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFlotDemoPie.init();
});
public/assets/js/custom/documentation/charts/flotcharts/stack.js
+103
View File
@@ -0,0 +1,103 @@
"use strict";
// Class definition
var KTFlotDemoStack = function () {
// Private functions
var exampleStack = function () {
var d1 = [];
for (var i = 0; i <= 10; i += 1)
d1.push([i, parseInt(Math.random() * 30)]);
var d2 = [];
for (var i = 0; i <= 10; i += 1)
d2.push([i, parseInt(Math.random() * 30)]);
var d3 = [];
for (var i = 0; i <= 10; i += 1)
d3.push([i, parseInt(Math.random() * 30)]);
var stack = 0,
bars = true,
lines = false,
steps = false;
function plotWithOptions() {
$.plot($("#kt_docs_flot_stack"),
[{
label: "sales",
data: d1,
lines: {
lineWidth: 1,
},
shadowSize: 0
}, {
label: "tax",
data: d2,
lines: {
lineWidth: 1,
},
shadowSize: 0
}, {
label: "profit",
data: d3,
lines: {
lineWidth: 1,
},
shadowSize: 0
}], {
colors: [KTUtil.getCssVariableValue('--bs-active-danger'), KTUtil.getCssVariableValue('--bs-active-primary')],
series: {
stack: stack,
lines: {
show: lines,
fill: true,
steps: steps,
lineWidth: 0, // in pixels
},
bars: {
show: bars,
barWidth: 0.5,
lineWidth: 0, // in pixels
shadowSize: 0,
align: 'center'
}
},
grid: {
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
borderColor: KTUtil.getCssVariableValue('--bs-light-dark'),
borderWidth: 1
}
}
);
}
$(".stackControls input").click(function(e) {
e.preventDefault();
stack = $(this).val() == "With stacking" ? true : null;
plotWithOptions();
});
$(".graphControls input").click(function(e) {
e.preventDefault();
bars = $(this).val().indexOf("Bars") != -1;
lines = $(this).val().indexOf("Lines") != -1;
steps = $(this).val().indexOf("steps") != -1;
plotWithOptions();
});
plotWithOptions();
}
return {
// Public Functions
init: function () {
exampleStack();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFlotDemoStack.init();
});
public/assets/js/custom/documentation/charts/flotcharts/tracking.js
+105
View File
@@ -0,0 +1,105 @@
"use strict";
// Class definition
var KTFlotDemoTracking = function () {
// Private functions
var exampleTracking = function () {
var sin = [],
cos = [];
for (var i = 0; i < 14; i += 0.1) {
sin.push([i, Math.sin(i)]);
cos.push([i, Math.cos(i)]);
}
var plot = $.plot($("#kt_docs_flot_tracking"), [{
data: sin,
label: "sin(x) = -0.00",
lines: {
lineWidth: 1,
},
shadowSize: 0
}, {
data: cos,
label: "cos(x) = -0.00",
lines: {
lineWidth: 1,
},
shadowSize: 0
}], {
colors: [KTUtil.getCssVariableValue('--bs-active-primary'), KTUtil.getCssVariableValue('--bs-active-warning')],
series: {
lines: {
show: true
}
},
crosshair: {
mode: "x"
},
grid: {
hoverable: true,
autoHighlight: false,
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
borderColor: KTUtil.getCssVariableValue('--bs-light-dark'),
borderWidth: 1
},
yaxis: {
min: -1.2,
max: 1.2
}
});
var legends = $("#kt_docs_flot_tracking .legendLabel");
legends.each(function() {
// fix the widths so they don't jump around
$(this).css('width', $(this).width());
});
var updateLegendTimeout = null;
var latestPosition = null;
function updateLegend() {
updateLegendTimeout = null;
var pos = latestPosition;
var axes = plot.getAxes();
if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max || pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) return;
var i, j, dataset = plot.getData();
for (i = 0; i < dataset.length; ++i) {
var series = dataset[i];
// find the nearest points, x-wise
for (j = 0; j < series.data.length; ++j)
if (series.data[j][0] > pos.x) break;
// now interpolate
var y, p1 = series.data[j - 1],
p2 = series.data[j];
if (p1 == null) y = p2[1];
else if (p2 == null) y = p1[1];
else y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
}
}
$("#kt_docs_flot_tracking").bind("plothover", function(event, pos, item) {
latestPosition = pos;
if (!updateLegendTimeout) updateLegendTimeout = setTimeout(updateLegend, 50);
});
}
return {
// Public Functions
init: function () {
exampleTracking();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFlotDemoTracking.init();
});