JSFiddle - React, Tailwind, and code Playground
HTML
<div id="placeholder"></div>
CSS
#placeholder {
height: 300px;
width: 300px;
}
JavaScript
// customized flot plugin
/*! Javascript plotting library for jQuery, v. 0.7.
*
* Released under the MIT license by IOLA, December 2007.
*
*/
// first an inline dependency, jquery.colorhelpers.js, we inline it here
// for convenience
/* Plugin for jQuery for working with colors.
*
* Version 1.1.
*
* Inspiration from jQuery color animation plugin by John Resig.
*
* Released under the MIT license by Ole Laursen, October 2009.
*
* Examples:
*
* $.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString()
* var c = $.color.extract($("#mydiv"), 'background-color');
* console.log(c.r, c.g, c.b, c.a);
* $.color.make(100, 50, 25, 0.4).toString() // returns "rgba(100,50,25,0.4)"
*
* Note that .scale() and .add() return the same modified object
* instead of making a new one.
*
* V. 1.1: Fix error handling so e.g. parsing an empty string does
* produce a color rather than just crashing.
*/
(function(B) {
B.color = {};
B.color.make = function(F, E, C, D) {
var G = {};
G.r = F || 0;
G.g = E || 0;
G.b = C || 0;
G.a = D != null ? D : 1;
G.add = function(J, I) {
for (var H = 0; H < J.length; ++H) {
G[J.charAt(H)] += I
}
return G.normalize()
};
G.scale = function(J, I) {
for (var H = 0; H < J.length; ++H) {
G[J.charAt(H)] *= I
}
return G.normalize()
};
G.toString = function() {
if (G.a >= 1) {
return "rgb(" + [G.r, G.g, G.b].join(",") + ")"
} else {
return "rgba(" + [G.r, G.g, G.b, G.a].join(",") + ")"
}
};
G.normalize = function() {
function H(J, K, I) {
return K < J ? J : (K > I ? I : K)
}
G.r = H(0, parseInt(G.r), 255);
G.g = H(0, parseInt(G.g), 255);
G.b = H(0, parseInt(G.b), 255);
G.a = H(0, G.a, 1);
return G
};
G.clone = function() {
return B.color.make(G.r, G.b, G.g, G.a)
};
return G.normalize()
};
B.color.extract =...