@devgateway/dvz-ui-react
Version:
A modular, embeddable React component library for data visualization and UI, built with TypeScript. Provides reusable components for charts, maps, dashboards, and more, with built-in support for internationalization and Redux integration.
156 lines (155 loc) • 3.66 kB
JavaScript
const c = [
{
value: "blues",
label: "blues",
startColor: "#f7fbff",
endColor: "#08306b"
},
{
value: "greens",
label: "greens",
startColor: "#f7fcf5",
endColor: "#00441b"
},
{
value: "greys",
label: "greys",
startColor: "#ffffff",
endColor: "#000000"
},
{
value: "oranges",
label: "oranges",
startColor: "#fff5eb",
endColor: "#7f2704"
},
{
value: "purples",
label: "purples",
startColor: "#fcfbfd",
endColor: "#3f007d"
},
{
value: "reds",
label: "reds",
startColor: "#fff5f0",
endColor: "#67000d"
},
{
value: "blue_green",
label: "blue_green",
startColor: "#f7fcfd",
endColor: "#00441b"
},
{
value: "blue_purple",
label: "blue_purple",
startColor: "#f7fcfd",
endColor: "#4d004b"
},
{
value: "green_blue",
label: "green_blue",
startColor: "#f7fcf0",
endColor: "#084081"
},
{
value: "orange_red",
label: "orange_red",
startColor: "#fff7ec",
endColor: "#7f0000"
},
{
value: "purple_blue_green",
label: "purple_blue_green",
startColor: "#fff7fb",
endColor: "#014636"
},
{
value: "purple_blue",
label: "purple_blue",
startColor: "#fff7fb",
endColor: "#023858"
},
{
value: "purple_red",
label: "purple_red",
startColor: "#f7f4f9",
endColor: "#67001f"
},
{
value: "red_purple",
label: "red_purple",
startColor: "#fff7f3",
endColor: "#49006a"
},
{
value: "yellow_green_blue",
label: "yellow_green_blue",
startColor: "#ffffd9",
endColor: "#081d58"
},
{
value: "yellow_green",
label: "yellow_green",
startColor: "#ffffe5",
endColor: "#004529"
},
{
value: "yellow_orange_brown",
label: "yellow_orange_brown",
startColor: "#ffffe5",
endColor: "#662506"
},
{
value: "yellow_orange_red",
label: "yellow_orange_red",
startColor: "#ffffcc",
endColor: "#800026"
}
];
class _ {
constructor(s) {
const { gradientScheme: r, gradientReverse: o, data: t = [], defaultFillColor: u, measure: f } = s;
this.defaultFillColor = u, this.measure = f, this.valueColors = this.createGradient(r, t, o), this.getColor = this.getColor.bind(this);
}
createGradient(s, r, o) {
const t = c.find((e) => e.value == s) || {
startColor: "#ffffff",
endColor: "#000000"
}, u = r.slice().sort((e, l) => e[this.measure] - l[this.measure]);
function f(e) {
return e = e.replace(/^#/, ""), e.length === 3 && (e = e.split("").map((l) => l + l).join("")), {
r: parseInt(e.substr(0, 2), 16),
g: parseInt(e.substr(2, 2), 16),
b: parseInt(e.substr(4, 2), 16)
};
}
function i({ r: e, g: l, b: C }) {
const n = (b) => b.toString(16).padStart(2, "0");
return `#${n(e)}${n(l)}${n(C)}`;
}
const a = f(o ? t.endColor : t.startColor), d = f(o ? t.startColor : t.endColor), g = [];
for (let e = 0; e < r.length; e++) {
const l = e / (r.length - 1), C = Math.round(a.r + (d.r - a.r) * l), n = Math.round(a.g + (d.g - a.g) * l), b = Math.round(a.b + (d.b - a.b) * l);
g.push({ value: u[e][this.measure], color: i({ r: C, g: n, b }) });
}
return g;
}
getColor(s) {
if (this.valueColors.length > 0) {
const r = this.valueColors.find((o) => o.value == s);
return (r == null ? void 0 : r.color) || this.defaultFillColor;
}
return this.defaultFillColor;
}
getStartColor() {
return this.valueColors[0].color;
}
getEndColor() {
return this.valueColors.at(-1).color;
}
}
export {
_ as default
};