Skip to content

Commit faefa66

Browse files
ImTheKaiImTheKai
authored
move chart colors to CSS variables (#93)
Replace hardcoded hex values in getChartColors() and chartSeries with reads from --color-chart-* CSS custom properties. Axis/UI colors include dark mode overrides; series palette colors are theme-neutral. Signed-off-by: Kai Wagner <kai.wagner@percona.com>
1 parent bb07bd4 commit faefa66

File tree

2 files changed

+113
-79
lines changed

2 files changed

+113
-79
lines changed

‎app/assets/stylesheets/colors.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,32 @@
9292
--color-note-soft: #fef9c3;
9393

9494
--shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
95+
96+
/* Chart colors */
97+
--color-chart-text: #0f172a;
98+
--color-chart-bg: #ffffff;
99+
--color-chart-border: #cdd5e7;
100+
101+
/* Chart series palette (Matplotlib/Tableau) */
102+
--color-chart-blue: #1f77b4;
103+
--color-chart-orange: #ff7f0e;
104+
--color-chart-green: #2ca02c;
105+
--color-chart-red: #d62728;
106+
--color-chart-purple: #9467bd;
107+
--color-chart-brown: #8c564b;
108+
--color-chart-pink: #e377c2;
109+
--color-chart-gray: #7f7f7f;
110+
--color-chart-yellow-green: #bcbd22;
111+
--color-chart-cyan: #17becf;
112+
--color-chart-light-red: #ff9896;
113+
--color-chart-light-purple: #c5b0d5;
114+
--color-chart-light-brown: #c49c94;
115+
--color-chart-light-blue: #aec7e8;
116+
--color-chart-light-gray: #9e9e9e;
117+
--color-chart-silver: #bdbdbd;
118+
--color-chart-steel-blue: #9ecae1;
119+
--color-chart-dark-gray: #636363;
120+
--color-chart-medium-blue: #3182bd;
95121
}
96122

97123
:root[data-theme="dark"] {
@@ -187,4 +213,9 @@
187213
--color-note-soft: #3a3216;
188214

189215
--shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
216+
217+
/* Chart colors */
218+
--color-chart-text: #e2e8f0;
219+
--color-chart-bg: #111827;
220+
--color-chart-border: #1f2937;
190221
}

‎app/views/stats/show.html.slim‎

Lines changed: 82 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -337,98 +337,110 @@
337337
const toEl = document.getElementById("stats-to");
338338
const applyRangeEl = document.getElementById("stats-apply-range");
339339
const customRangeEls = Array.from(document.querySelectorAll(".stats-custom-range"));
340+
function getCSSVar(name) {
341+
return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
342+
}
343+
344+
function getChartColors() {
345+
return {
346+
textColor: getCSSVar('--color-chart-text'),
347+
cardBg: getCSSVar('--color-chart-bg'),
348+
borderColor: getCSSVar('--color-chart-border')
349+
};
350+
}
351+
340352
const chartSeries = {
341353
main: [
342-
{ key: "participants_active", label: "Active participants", color: "#1f77b4" },
343-
{ key: "participants_new", label: "New participants", color: "#17becf" },
344-
{ key: "retained_365_participants", label: "Retained participants (365d+)", color: "#2ca02c" },
345-
{ key: "new_users_replied_to_others", label: "New participants replying to others", color: "#ff9896" },
346-
{ key: "topics_new", label: "New topics", color: "#9467bd" },
347-
{ key: "topics_new_by_new_users", label: "New topics by new users", color: "#c5b0d5" },
348-
{ key: "topics_new_with_attachments_by_new_users", label: "New topics with attachments by new users", color: "#c49c94" },
349-
{ key: "topics_active", label: "Active topics", color: "#8c564b" },
350-
{ key: "topics_new_with_contributor_activity", label: "New topics with contributor activity", color: "#e377c2" },
351-
{ key: "topics_new_without_contributor_activity", label: "New topics without contributor activity", color: "#7f7f7f" },
352-
{ key: "messages_total", label: "Total messages", color: "#ff7f0e" },
353-
{ key: "messages_committers", label: "Messages by committers", color: "#d62728" },
354-
{ key: "messages_contributors", label: "Messages by contributors", color: "#bcbd22" },
355-
{ key: "messages_new_participants", label: "Messages by new participants", color: "#aec7e8" },
356-
{ key: "topics_messages_avg", label: "Active topic avg msgs", color: "#1f77b4" },
357-
{ key: "topics_messages_median", label: "Active topic median msgs", color: "#ff7f0e" },
358-
{ key: "topics_messages_max", label: "Active topic max msgs", color: "#2ca02c" },
359-
{ key: "topics_created_messages_avg", label: "New topic avg msgs", color: "#1f77b4" },
360-
{ key: "topics_created_messages_median", label: "New topic median msgs", color: "#ff7f0e" },
361-
{ key: "topics_created_messages_max", label: "New topic max msgs", color: "#2ca02c" },
362-
{ key: "topic_longevity_avg_days", label: "Topic longevity avg days", color: "#9467bd" },
363-
{ key: "topic_longevity_median_days", label: "Topic longevity median days", color: "#8c564b" },
364-
{ key: "topic_longevity_max_days", label: "Topic longevity max days", color: "#d62728" },
365-
{ key: "new_participants_lifetime_avg_days", label: "New participant lifetime avg days", color: "#1f77b4" },
366-
{ key: "new_participants_lifetime_median_days", label: "New participant lifetime median days", color: "#ff7f0e" },
367-
{ key: "new_participants_lifetime_max_days", label: "New participant lifetime max days", color: "#2ca02c" },
368-
{ key: "retained_365_lifetime_avg_days", label: "Retained lifetime avg days", color: "#9467bd" },
369-
{ key: "retained_365_lifetime_median_days", label: "Retained lifetime median days", color: "#8c564b" },
370-
{ key: "new_participants_daily_avg_messages", label: "New participant daily avg msgs", color: "#1f77b4" },
371-
{ key: "retained_365_daily_avg_messages", label: "Retained daily avg msgs", color: "#ff7f0e" }
354+
{ key: "participants_active", label: "Active participants", color: getCSSVar('--color-chart-blue') },
355+
{ key: "participants_new", label: "New participants", color: getCSSVar('--color-chart-cyan') },
356+
{ key: "retained_365_participants", label: "Retained participants (365d+)", color: getCSSVar('--color-chart-green') },
357+
{ key: "new_users_replied_to_others", label: "New participants replying to others", color: getCSSVar('--color-chart-light-red') },
358+
{ key: "topics_new", label: "New topics", color: getCSSVar('--color-chart-purple') },
359+
{ key: "topics_new_by_new_users", label: "New topics by new users", color: getCSSVar('--color-chart-light-purple') },
360+
{ key: "topics_new_with_attachments_by_new_users", label: "New topics with attachments by new users", color: getCSSVar('--color-chart-light-brown') },
361+
{ key: "topics_active", label: "Active topics", color: getCSSVar('--color-chart-brown') },
362+
{ key: "topics_new_with_contributor_activity", label: "New topics with contributor activity", color: getCSSVar('--color-chart-pink') },
363+
{ key: "topics_new_without_contributor_activity", label: "New topics without contributor activity", color: getCSSVar('--color-chart-gray') },
364+
{ key: "messages_total", label: "Total messages", color: getCSSVar('--color-chart-orange') },
365+
{ key: "messages_committers", label: "Messages by committers", color: getCSSVar('--color-chart-red') },
366+
{ key: "messages_contributors", label: "Messages by contributors", color: getCSSVar('--color-chart-yellow-green') },
367+
{ key: "messages_new_participants", label: "Messages by new participants", color: getCSSVar('--color-chart-light-blue') },
368+
{ key: "topics_messages_avg", label: "Active topic avg msgs", color: getCSSVar('--color-chart-blue') },
369+
{ key: "topics_messages_median", label: "Active topic median msgs", color: getCSSVar('--color-chart-orange') },
370+
{ key: "topics_messages_max", label: "Active topic max msgs", color: getCSSVar('--color-chart-green') },
371+
{ key: "topics_created_messages_avg", label: "New topic avg msgs", color: getCSSVar('--color-chart-blue') },
372+
{ key: "topics_created_messages_median", label: "New topic median msgs", color: getCSSVar('--color-chart-orange') },
373+
{ key: "topics_created_messages_max", label: "New topic max msgs", color: getCSSVar('--color-chart-green') },
374+
{ key: "topic_longevity_avg_days", label: "Topic longevity avg days", color: getCSSVar('--color-chart-purple') },
375+
{ key: "topic_longevity_median_days", label: "Topic longevity median days", color: getCSSVar('--color-chart-brown') },
376+
{ key: "topic_longevity_max_days", label: "Topic longevity max days", color: getCSSVar('--color-chart-red') },
377+
{ key: "new_participants_lifetime_avg_days", label: "New participant lifetime avg days", color: getCSSVar('--color-chart-blue') },
378+
{ key: "new_participants_lifetime_median_days", label: "New participant lifetime median days", color: getCSSVar('--color-chart-orange') },
379+
{ key: "new_participants_lifetime_max_days", label: "New participant lifetime max days", color: getCSSVar('--color-chart-green') },
380+
{ key: "retained_365_lifetime_avg_days", label: "Retained lifetime avg days", color: getCSSVar('--color-chart-purple') },
381+
{ key: "retained_365_lifetime_median_days", label: "Retained lifetime median days", color: getCSSVar('--color-chart-brown') },
382+
{ key: "new_participants_daily_avg_messages", label: "New participant daily avg msgs", color: getCSSVar('--color-chart-blue') },
383+
{ key: "retained_365_daily_avg_messages", label: "Retained daily avg msgs", color: getCSSVar('--color-chart-orange') }
372384
],
373385
depth: [
374-
{ key: "topics_messages_avg", label: "Avg messages", color: "#1f77b4" },
375-
{ key: "topics_messages_median", label: "Median messages", color: "#ff7f0e" },
376-
{ key: "topics_messages_max", label: "Max messages", color: "#2ca02c" }
386+
{ key: "topics_messages_avg", label: "Avg messages", color: getCSSVar('--color-chart-blue') },
387+
{ key: "topics_messages_median", label: "Median messages", color: getCSSVar('--color-chart-orange') },
388+
{ key: "topics_messages_max", label: "Max messages", color: getCSSVar('--color-chart-green') }
377389
],
378390
created_depth: [
379-
{ key: "topics_created_messages_avg", label: "Avg messages", color: "#1f77b4" },
380-
{ key: "topics_created_messages_median", label: "Median messages", color: "#ff7f0e" },
381-
{ key: "topics_created_messages_max", label: "Max messages", color: "#2ca02c" }
391+
{ key: "topics_created_messages_avg", label: "Avg messages", color: getCSSVar('--color-chart-blue') },
392+
{ key: "topics_created_messages_median", label: "Median messages", color: getCSSVar('--color-chart-orange') },
393+
{ key: "topics_created_messages_max", label: "Max messages", color: getCSSVar('--color-chart-green') }
382394
],
383395
message_breakdown: [
384-
{ key: "messages_committers", label: "Committers", color: "#d62728" },
385-
{ key: "messages_contributors_non_committers", label: "Contributors (non-committers)", color: "#bcbd22" },
386-
{ key: "messages_new_participants", label: "New participants", color: "#aec7e8" },
387-
{ key: "messages_regular_participants", label: "Regular participants", color: "#7f7f7f" }
396+
{ key: "messages_committers", label: "Committers", color: getCSSVar('--color-chart-red') },
397+
{ key: "messages_contributors_non_committers", label: "Contributors (non-committers)", color: getCSSVar('--color-chart-yellow-green') },
398+
{ key: "messages_new_participants", label: "New participants", color: getCSSVar('--color-chart-light-blue') },
399+
{ key: "messages_regular_participants", label: "Regular participants", color: getCSSVar('--color-chart-gray') }
388400
],
389401
attachments: [
390-
{ key: "topics_new_no_attachments", label: "No attachments", color: "#9e9e9e" },
391-
{ key: "topics_new_with_attachments_no_commitfest", label: "Attachment, not commitfest", color: "#1f77b4" },
392-
{ key: "topics_new_commitfest_in_progress", label: "Commitfest in progress", color: "#ff7f0e" },
393-
{ key: "topics_new_commitfest_abandoned", label: "Commitfest rejected", color: "#d62728" },
394-
{ key: "topics_new_commitfest_committed", label: "Commitfest committed", color: "#2ca02c" }
402+
{ key: "topics_new_no_attachments", label: "No attachments", color: getCSSVar('--color-chart-light-gray') },
403+
{ key: "topics_new_with_attachments_no_commitfest", label: "Attachment, not commitfest", color: getCSSVar('--color-chart-blue') },
404+
{ key: "topics_new_commitfest_in_progress", label: "Commitfest in progress", color: getCSSVar('--color-chart-orange') },
405+
{ key: "topics_new_commitfest_abandoned", label: "Commitfest rejected", color: getCSSVar('--color-chart-red') },
406+
{ key: "topics_new_commitfest_committed", label: "Commitfest committed", color: getCSSVar('--color-chart-green') }
395407
],
396408
new_topic_attachments: [
397-
{ key: "topics_new_by_new_users_no_attachments", label: "New users, no attachments", color: "#bdbdbd" },
398-
{ key: "topics_new_by_new_users_with_attachments", label: "New users, attachments", color: "#9ecae1" },
399-
{ key: "topics_new_by_existing_users_no_attachments", label: "Existing users, no attachments", color: "#636363" },
400-
{ key: "topics_new_by_existing_users_with_attachments", label: "Existing users, attachments", color: "#3182bd" }
409+
{ key: "topics_new_by_new_users_no_attachments", label: "New users, no attachments", color: getCSSVar('--color-chart-silver') },
410+
{ key: "topics_new_by_new_users_with_attachments", label: "New users, attachments", color: getCSSVar('--color-chart-steel-blue') },
411+
{ key: "topics_new_by_existing_users_no_attachments", label: "Existing users, no attachments", color: getCSSVar('--color-chart-dark-gray') },
412+
{ key: "topics_new_by_existing_users_with_attachments", label: "Existing users, attachments", color: getCSSVar('--color-chart-medium-blue') }
401413
],
402414
longevity: [
403-
{ key: "topic_longevity_avg_days", label: "Avg days", color: "#9467bd" },
404-
{ key: "topic_longevity_median_days", label: "Median days", color: "#8c564b" },
405-
{ key: "topic_longevity_max_days", label: "Max days", color: "#d62728" }
415+
{ key: "topic_longevity_avg_days", label: "Avg days", color: getCSSVar('--color-chart-purple') },
416+
{ key: "topic_longevity_median_days", label: "Median days", color: getCSSVar('--color-chart-brown') },
417+
{ key: "topic_longevity_max_days", label: "Max days", color: getCSSVar('--color-chart-red') }
406418
],
407419
participant_lifetime: [
408-
{ key: "new_participants_lifetime_avg_days", label: "New avg days", color: "#1f77b4" },
409-
{ key: "new_participants_lifetime_median_days", label: "New median days", color: "#ff7f0e" },
410-
{ key: "new_participants_lifetime_max_days", label: "New max days", color: "#2ca02c" },
411-
{ key: "retained_365_lifetime_avg_days", label: "Retained avg days", color: "#9467bd" },
412-
{ key: "retained_365_lifetime_median_days", label: "Retained median days", color: "#8c564b" }
420+
{ key: "new_participants_lifetime_avg_days", label: "New avg days", color: getCSSVar('--color-chart-blue') },
421+
{ key: "new_participants_lifetime_median_days", label: "New median days", color: getCSSVar('--color-chart-orange') },
422+
{ key: "new_participants_lifetime_max_days", label: "New max days", color: getCSSVar('--color-chart-green') },
423+
{ key: "retained_365_lifetime_avg_days", label: "Retained avg days", color: getCSSVar('--color-chart-purple') },
424+
{ key: "retained_365_lifetime_median_days", label: "Retained median days", color: getCSSVar('--color-chart-brown') }
413425
],
414426
new_participant_rate: [
415-
{ key: "new_participants_daily_avg_messages", label: "New participants", color: "#1f77b4" },
416-
{ key: "retained_365_daily_avg_messages", label: "Retained 365d+", color: "#ff7f0e" }
427+
{ key: "new_participants_daily_avg_messages", label: "New participants", color: getCSSVar('--color-chart-blue') },
428+
{ key: "retained_365_daily_avg_messages", label: "Retained 365d+", color: getCSSVar('--color-chart-orange') }
417429
],
418430
participant_retention: [
419-
{ key: "retained_365_participants", label: "Retained 365d+", color: "#ff7f0e" },
420-
{ key: "participants_new_not_retained_365", label: "New (not retained)", color: "#1f77b4" }
431+
{ key: "retained_365_participants", label: "Retained 365d+", color: getCSSVar('--color-chart-orange') },
432+
{ key: "participants_new_not_retained_365", label: "New (not retained)", color: getCSSVar('--color-chart-blue') }
421433
],
422434
retention_milestones: [
423-
{ key: "retention_q1", label: "3m+", color: "#1f77b4" },
424-
{ key: "retention_q2", label: "6m+", color: "#ff7f0e" },
425-
{ key: "retention_q4", label: "1y+", color: "#2ca02c" },
426-
{ key: "retention_q6", label: "1.5y+", color: "#d62728" },
427-
{ key: "retention_q8", label: "2y+", color: "#9467bd" },
428-
{ key: "retention_q10", label: "2.5y+", color: "#8c564b" },
429-
{ key: "retention_q12", label: "3y+", color: "#e377c2" },
430-
{ key: "retention_q16", label: "4y+", color: "#7f7f7f" },
431-
{ key: "retention_q20", label: "5y+", color: "#17becf" }
435+
{ key: "retention_q1", label: "3m+", color: getCSSVar('--color-chart-blue') },
436+
{ key: "retention_q2", label: "6m+", color: getCSSVar('--color-chart-orange') },
437+
{ key: "retention_q4", label: "1y+", color: getCSSVar('--color-chart-green') },
438+
{ key: "retention_q6", label: "1.5y+", color: getCSSVar('--color-chart-red') },
439+
{ key: "retention_q8", label: "2y+", color: getCSSVar('--color-chart-purple') },
440+
{ key: "retention_q10", label: "2.5y+", color: getCSSVar('--color-chart-brown') },
441+
{ key: "retention_q12", label: "3y+", color: getCSSVar('--color-chart-pink') },
442+
{ key: "retention_q16", label: "4y+", color: getCSSVar('--color-chart-gray') },
443+
{ key: "retention_q20", label: "5y+", color: getCSSVar('--color-chart-cyan') }
432444
]
433445
};
434446

@@ -791,15 +803,6 @@
791803
return Math.max(320, Math.floor(width));
792804
}
793805

794-
function getChartColors() {
795-
const isDark = document.documentElement.dataset.theme === 'dark';
796-
return {
797-
textColor: isDark ? '#e2e8f0' : '#0f172a',
798-
cardBg: isDark ? '#111827' : '#ffffff',
799-
borderColor: isDark ? '#1f2937' : '#cdd5e7'
800-
};
801-
}
802-
803806
function buildLineSpec(intervals, width, height, enabledSeries) {
804807
const chartColors = getChartColors();
805808
const points = intervals.flatMap(row => (

0 commit comments

Comments
 (0)