sjs/spirit-tracker
1
0
Fork 0
mirror of https://github.com/samsonjs/spirit-tracker.git synced 2026-03-25 09:25:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

UX Improvements

Browse source
This commit is contained in:
Brennan Wilkes (Text Groove) 2026-02-05 17:24:19 -08:00
parent 8531eba4e3
commit 1216ec7fe0
1 changed files with 177 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

337
viz/app/storeColors.js
View file

@ -1,166 +1,183 @@
function normalizeId(s) { function normalizeId(s) {
return String(s || "").toLowerCase().replace(/[^a-z0-9]+/g, ""); return String(s || "").toLowerCase().replace(/[^a-z0-9]+/g, "");
} }
// Your pinned colors (exact / “roughly right”) // Map normalized store *labels* to canonical ids used by OVERRIDES
const OVERRIDES = { const ALIASES = {
strath: "#76B7FF", strathliquor: "strath",
bsw: "#E9DF7A", vesselliquor: "vessel",
kensingtonwinemarket: "#F2C200", tudorhouse: "tudor",
vessel: "#FFFFFF", coopworldofwhisky: "coop",
gullliquor: "#6B0F1A",
kegncork: "#111111", kensingtonwinemarket: "kensingtonwinemarket",
legacyliquor: "#7B4A12", gullliquor: "gullliquor",
vintagespirits: "#E34A2C", legacyliquor: "legacyliquor",
vintagespirits: "vintagespirits",
craftcellars: "#E31B23", // bright red kegncork: "kegncork",
maltsandgrains: "#A67C52", // faded brown
// short forms
// aliases gull: "gullliquor",
gull: "#6B0F1A", legacy: "legacyliquor",
legacy: "#7B4A12", vintage: "vintagespirits",
vintage: "#E34A2C", kwm: "kensingtonwinemarket",
kwm: "#F2C200", };
};
// Your pinned colors
// High-contrast qualitative palette (distinct hues). const OVERRIDES = {
// (Avoids whites/blacks/yellows that clash w/ your overrides by filtering below.) strath: "#76B7FF",
const PALETTE = [ bsw: "#E9DF7A",
"#1F77B4", "#FF7F0E", "#2CA02C", "#D62728", "#9467BD", kensingtonwinemarket: "#F2C200",
"#8C564B", "#E377C2", "#7F7F7F", "#17BECF", "#BCBD22", vessel: "#FFFFFF",
"#AEC7E8", "#FFBB78", "#98DF8A", "#FF9896", "#C5B0D5", gullliquor: "#6B0F1A",
"#C49C94", "#F7B6D2", "#C7C7C7", "#9EDAE5", "#DBDB8D", kegncork: "#111111",
// extras to reduce wrap risk legacyliquor: "#7B4A12",
"#393B79", "#637939", "#8C6D31", "#843C39", "#7B4173", vintagespirits: "#E34A2C",
"#3182BD", "#31A354", "#756BB1", "#636363", "#E6550D",
]; craftcellars: "#E31B23",
maltsandgrains: "#A67C52",
function uniq(arr) {
return [...new Set(arr)]; // aliases
} gull: "#6B0F1A",
legacy: "#7B4A12",
function buildUniverse(base, extra) { vintage: "#E34A2C",
const a = Array.isArray(base) ? base : []; kwm: "#F2C200",
const b = Array.isArray(extra) ? extra : []; };
return uniq([...a, ...b].map(normalizeId).filter(Boolean));
} // High-contrast qualitative palette
const PALETTE = [
// Default known ids (keeps mapping stable even if a page only sees a subset) "#1F77B4", "#FF7F0E", "#2CA02C", "#D62728", "#9467BD",
const DEFAULT_UNIVERSE = buildUniverse(Object.keys(OVERRIDES), [ "#8C564B", "#E377C2", "#7F7F7F", "#17BECF", "#BCBD22",
"bcl", "#AEC7E8", "#FFBB78", "#98DF8A", "#FF9896", "#C5B0D5",
"bsw", "#C49C94", "#F7B6D2", "#C7C7C7", "#9EDAE5", "#DBDB8D",
"coop", "#393B79", "#637939", "#8C6D31", "#843C39", "#7B4173",
"craftcellars", "#3182BD", "#31A354", "#756BB1", "#636363", "#E6550D",
"gullliquor", ];
"gull",
"kegncork", function uniq(arr) {
"kwm", return [...new Set(arr)];
"kensingtonwinemarket", }
"legacy",
"legacyliquor", function canonicalId(s) {
"maltsandgrains", const id = normalizeId(s);
"sierrasprings", return ALIASES[id] || id;
"strath", }
"tudor",
"vessel", function buildUniverse(base, extra) {
"vintage", const a = Array.isArray(base) ? base : [];
"vintagespirits", const b = Array.isArray(extra) ? extra : [];
"willowpark", return uniq([...a, ...b].map(canonicalId).filter(Boolean));
]); }
function isWhiteHex(c) { // Keep mapping stable even if page sees a subset
return String(c || "").trim().toUpperCase() === "#FFFFFF"; const DEFAULT_UNIVERSE = buildUniverse(Object.keys(OVERRIDES), [
} "bcl",
"bsw",
export function buildStoreColorMap(extraUniverse = []) { "coop",
const universe = buildUniverse(DEFAULT_UNIVERSE, extraUniverse).sort(); "craftcellars",
"gullliquor",
const used = new Set(); "gull",
const map = new Map(); "kegncork",
"kwm",
// pin overrides first "kensingtonwinemarket",
for (const id of universe) { "legacy",
const c = OVERRIDES[id]; "legacyliquor",
if (c) { "maltsandgrains",
map.set(id, c); "sierrasprings",
used.add(String(c).toUpperCase()); "strath",
} "tudor",
} "vessel",
"vintage",
// filter palette to avoid exact collisions with overrides (and keep white reserved for Vessel) "vintagespirits",
const palette = PALETTE "willowpark",
.map((c) => String(c).toUpperCase()) ]);
.filter((c) => !used.has(c) && c !== "#FFFFFF" && c !== "#111111");
function isWhiteHex(c) {
let pi = 0; return String(c || "").trim().toUpperCase() === "#FFFFFF";
for (const id of universe) { }
if (map.has(id)) continue;
if (pi >= palette.length) { export function buildStoreColorMap(extraUniverse = []) {
// If you ever exceed palette size, just reuse (rare). Still deterministic. const universe = buildUniverse(DEFAULT_UNIVERSE, extraUniverse).sort();
pi = 0;
} const used = new Set();
const c = palette[pi++]; const map = new Map();
// Pin overrides first
for (const id of universe) {
const c = OVERRIDES[id];
if (c) {
map.set(id, c); map.set(id, c);
used.add(c); used.add(String(c).toUpperCase());
} }
return map;
} }
export function storeColor(storeKeyOrLabel, colorMap) { // Filter palette to avoid collisions and keep white/black reserved
const id = normalizeId(storeKeyOrLabel); const palette = PALETTE
if (!id) return "#7F7F7F"; .map((c) => String(c).toUpperCase())
.filter((c) => !used.has(c) && c !== "#FFFFFF" && c !== "#111111");
const forced = OVERRIDES[id];
if (forced) return forced; let pi = 0;
for (const id of universe) {
if (colorMap && typeof colorMap.get === "function") { if (map.has(id)) continue;
const c = colorMap.get(id); if (pi >= palette.length) pi = 0;
if (c) return c; const c = palette[pi++];
} map.set(id, c);
used.add(c);
// fallback: deterministic but not “no conflicts”
return PALETTE[(id.length + id.charCodeAt(0)) % PALETTE.length];
} }
export function datasetStrokeWidth(color) { return map;
return isWhiteHex(color) ? 2.5 : 1.5; }
export function storeColor(storeKeyOrLabel, colorMap) {
const id = canonicalId(storeKeyOrLabel);
if (!id) return "#7F7F7F";
const forced = OVERRIDES[id];
if (forced) return forced;
if (colorMap && typeof colorMap.get === "function") {
const c = colorMap.get(id);
if (c) return c;
} }
export function datasetPointRadius(color) { return PALETTE[(id.length + id.charCodeAt(0)) % PALETTE.length];
return isWhiteHex(color) ? 2.8 : 2.2; }
}
export function datasetStrokeWidth(color) {
function clamp(v, lo, hi) { return isWhiteHex(color) ? 2.5 : 1.5;
return Math.max(lo, Math.min(hi, v)); }
}
export function datasetPointRadius(color) {
function hexToRgb(hex) { return isWhiteHex(color) ? 2.8 : 2.2;
const m = String(hex).replace("#", ""); }
if (m.length !== 6) return null;
const n = parseInt(m, 16); function clamp(v, lo, hi) {
return { return Math.max(lo, Math.min(hi, v));
r: (n >> 16) & 255, }
g: (n >> 8) & 255,
b: n & 255, function hexToRgb(hex) {
}; const m = String(hex).replace("#", "");
} if (m.length !== 6) return null;
const n = parseInt(m, 16);
function rgbToHex({ r, g, b }) { return {
const h = (x) => clamp(Math.round(x), 0, 255).toString(16).padStart(2, "0"); r: (n >> 16) & 255,
return `#${h(r)}${h(g)}${h(b)}`; g: (n >> 8) & 255,
} b: n & 255,
};
// lighten by mixing with white (amount 0–1) }
export function lighten(hex, amount = 0.25) {
const rgb = hexToRgb(hex); function rgbToHex({ r, g, b }) {
if (!rgb) return hex; const h = (x) =>
return rgbToHex({ clamp(Math.round(x), 0, 255).toString(16).padStart(2, "0");
r: rgb.r + (255 - rgb.r) * amount, return `#${h(r)}${h(g)}${h(b)}`;
g: rgb.g + (255 - rgb.g) * amount, }
b: rgb.b + (255 - rgb.b) * amount,
}); // Lighten by mixing with white (0–1)
} export function lighten(hex, amount = 0.25) {
const rgb = hexToRgb(hex);
if (!rgb) return hex;
return rgbToHex({
r: rgb.r + (255 - rgb.r) * amount,
g: rgb.g + (255 - rgb.g) * amount,
b: rgb.b + (255 - rgb.b) * amount,
});
}