Skip to content

Commit 7ac968c

Browse files
hunter-jihunter-ji
committed
refactor: update class names and CSS variables for heatmap components
1 parent 41db672 commit 7ac968c

2 files changed

Lines changed: 56 additions & 56 deletions

File tree

‎calendar-heatmap/index.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -275,7 +275,7 @@
275275
function createLabels(options, languageConfig, locale) {
276276
if (typeof document === 'undefined') return null;
277277
const labels = document.createElement('div');
278-
labels.className = 'ch-labels';
278+
labels.className = 'easy-tracker-heatmap-labels';
279279
const customWeekdays = Array.isArray(languageConfig.weekdays) && languageConfig.weekdays.length === 7 ? languageConfig.weekdays : null;
280280
const formatter = customWeekdays ? null : new Intl.DateTimeFormat(locale, { weekday: 'short' });
281281
for (let i = 0; i < 7; i += 1) {
@@ -296,13 +296,13 @@
296296
if (typeof document === 'undefined') return null;
297297
const scale = Array.isArray(colors) && colors.length ? colors : DEFAULT_COLORS;
298298
const legend = document.createElement('div');
299-
legend.className = 'ch-legend';
299+
legend.className = 'easy-tracker-heatmap-legend';
300300
const captionLow = document.createElement('span');
301301
captionLow.textContent = legendTexts.less;
302302
legend.appendChild(captionLow);
303303
scale.forEach((color, index) => {
304304
const swatch = document.createElement('span');
305-
swatch.className = 'ch-swatch';
305+
swatch.className = 'easy-tracker-heatmap-swatch';
306306
swatch.dataset.level = String(index);
307307
legend.appendChild(swatch);
308308
});
@@ -315,12 +315,12 @@
315315
function attachTooltip(root, formatter) {
316316
if (typeof document === 'undefined') return;
317317
let tooltip = document.createElement('div');
318-
tooltip.className = 'ch-tooltip';
318+
tooltip.className = 'easy-tracker-heatmap-tooltip';
319319
tooltip.style.display = 'none';
320320
document.body.appendChild(tooltip);
321321

322322
const handleMouseMove = (event) => {
323-
const target = event.target.closest('.ch-day');
323+
const target = event.target.closest('.easy-tracker-heatmap-day');
324324
if (!target || !root.contains(target)) {
325325
tooltip.style.display = 'none';
326326
return;
@@ -388,16 +388,16 @@
388388
const maxValue = this.options.maxValue != null ? this.options.maxValue : values.reduce((acc, value) => Math.max(acc, value), 0);
389389

390390
const root = document.createElement('div');
391-
root.className = 'ch-root';
391+
root.className = 'easy-tracker-heatmap-root';
392392

393393
// Inject custom colors as CSS variables to override defaults in styles.css
394394
if (Array.isArray(this.options.colorScale)) {
395395
this.options.colorScale.forEach((color, index) => {
396-
root.style.setProperty(`--ch-color-level-${index}`, color);
396+
root.style.setProperty(`--easy-tracker-heatmap-color-level-${index}`, color);
397397
});
398398
}
399-
root.style.setProperty('--ch-size', `${this.options.squareSize}px`);
400-
root.style.setProperty('--ch-gap', `${this.options.squareGap}px`);
399+
root.style.setProperty('--easy-tracker-heatmap-size', `${this.options.squareSize}px`);
400+
root.style.setProperty('--easy-tracker-heatmap-gap', `${this.options.squareGap}px`);
401401

402402
const gridWrapper = document.createElement('div');
403403
gridWrapper.style.display = 'flex';
@@ -408,7 +408,7 @@
408408
}
409409

410410
const grid = document.createElement('div');
411-
grid.className = 'ch-grid';
411+
grid.className = 'easy-tracker-heatmap-grid';
412412

413413
// Track week columns for grouping.
414414
let currentWeek = [];
@@ -440,7 +440,7 @@
440440
const weekdayIndex = (dayDate.getDay() - weekStart + 7) % 7;
441441

442442
const dayNode = document.createElement('div');
443-
dayNode.className = 'ch-day';
443+
dayNode.className = 'easy-tracker-heatmap-day';
444444
dayNode.dataset.level = String(level);
445445
dayNode.dataset.value = String(value);
446446
dayNode.dataset.date = key;
@@ -499,7 +499,7 @@
499499

500500
function buildWeekColumn(days) {
501501
const column = document.createElement('div');
502-
column.className = 'ch-week';
502+
column.className = 'easy-tracker-heatmap-week';
503503
days.forEach((day) => {
504504
column.appendChild(day);
505505
});

‎styles.css‎

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -144,61 +144,61 @@
144144
}
145145
/* Calendar Heatmap */
146146

147-
.ch-root {
147+
.easy-tracker-heatmap-root {
148148
font-family: var(--font-interface);
149-
--ch-size: 14px;
150-
--ch-gap: 2px;
149+
--easy-tracker-heatmap-size: 14px;
150+
--easy-tracker-heatmap-gap: 2px;
151151

152152
/* Default Colors (Light) */
153-
--ch-color-level-0: #ebedf0;
154-
--ch-color-level-1: #9be9a8;
155-
--ch-color-level-2: #40c463;
156-
--ch-color-level-3: #30a14e;
157-
--ch-color-level-4: #216e39;
153+
--easy-tracker-heatmap-color-level-0: #ebedf0;
154+
--easy-tracker-heatmap-color-level-1: #9be9a8;
155+
--easy-tracker-heatmap-color-level-2: #40c463;
156+
--easy-tracker-heatmap-color-level-3: #30a14e;
157+
--easy-tracker-heatmap-color-level-4: #216e39;
158158
}
159159

160-
.theme-dark .ch-root {
160+
.theme-dark .easy-tracker-heatmap-root {
161161
/* Default Colors (Dark) */
162-
--ch-color-level-0: #161b22;
163-
--ch-color-level-1: #0e4429;
164-
--ch-color-level-2: #006d32;
165-
--ch-color-level-3: #26a641;
166-
--ch-color-level-4: #39d353;
162+
--easy-tracker-heatmap-color-level-0: #161b22;
163+
--easy-tracker-heatmap-color-level-1: #0e4429;
164+
--easy-tracker-heatmap-color-level-2: #006d32;
165+
--easy-tracker-heatmap-color-level-3: #26a641;
166+
--easy-tracker-heatmap-color-level-4: #39d353;
167167
}
168168

169-
.ch-grid {
169+
.easy-tracker-heatmap-grid {
170170
display: grid;
171171
grid-auto-flow: column;
172172
grid-auto-columns: max-content;
173-
column-gap: var(--ch-gap);
173+
column-gap: var(--easy-tracker-heatmap-gap);
174174
}
175175

176-
.ch-week {
176+
.easy-tracker-heatmap-week {
177177
display: grid;
178178
grid-template-rows: repeat(7, 1fr);
179-
row-gap: var(--ch-gap);
179+
row-gap: var(--easy-tracker-heatmap-gap);
180180
}
181181

182-
.ch-day {
183-
width: var(--ch-size);
184-
height: var(--ch-size);
182+
.easy-tracker-heatmap-day {
183+
width: var(--easy-tracker-heatmap-size);
184+
height: var(--easy-tracker-heatmap-size);
185185
box-sizing: border-box;
186186
border-radius: 2px;
187-
background-color: var(--ch-color-level-0);
187+
background-color: var(--easy-tracker-heatmap-color-level-0);
188188
position: relative;
189189
border: 1px solid rgba(27, 31, 35, 0.06);
190190
}
191-
.theme-dark .ch-day {
191+
.theme-dark .easy-tracker-heatmap-day {
192192
border: 1px solid rgba(255, 255, 255, 0.05);
193193
}
194194

195-
.ch-day[data-level="0"] { background-color: var(--ch-color-level-0); }
196-
.ch-day[data-level="1"] { background-color: var(--ch-color-level-1); }
197-
.ch-day[data-level="2"] { background-color: var(--ch-color-level-2); }
198-
.ch-day[data-level="3"] { background-color: var(--ch-color-level-3); }
199-
.ch-day[data-level="4"] { background-color: var(--ch-color-level-4); }
195+
.easy-tracker-heatmap-day[data-level="0"] { background-color: var(--easy-tracker-heatmap-color-level-0); }
196+
.easy-tracker-heatmap-day[data-level="1"] { background-color: var(--easy-tracker-heatmap-color-level-1); }
197+
.easy-tracker-heatmap-day[data-level="2"] { background-color: var(--easy-tracker-heatmap-color-level-2); }
198+
.easy-tracker-heatmap-day[data-level="3"] { background-color: var(--easy-tracker-heatmap-color-level-3); }
199+
.easy-tracker-heatmap-day[data-level="4"] { background-color: var(--easy-tracker-heatmap-color-level-4); }
200200

201-
.ch-tooltip {
201+
.easy-tracker-heatmap-tooltip {
202202
position: absolute;
203203
pointer-events: none;
204204
z-index: 9999;
@@ -211,7 +211,7 @@
211211
border: 1px solid var(--background-modifier-border);
212212
}
213213

214-
.ch-legend {
214+
.easy-tracker-heatmap-legend {
215215
display: flex;
216216
align-items: center;
217217
gap: 4px;
@@ -220,26 +220,26 @@
220220
color: var(--text-muted);
221221
}
222222

223-
.ch-legend .ch-swatch {
223+
.easy-tracker-heatmap-legend .easy-tracker-heatmap-swatch {
224224
display: inline-block;
225-
width: var(--ch-size);
226-
height: var(--ch-size);
225+
width: var(--easy-tracker-heatmap-size);
226+
height: var(--easy-tracker-heatmap-size);
227227
border-radius: 2px;
228-
background-color: var(--ch-color-level-0);
228+
background-color: var(--easy-tracker-heatmap-color-level-0);
229229
}
230230

231-
.ch-legend .ch-swatch[data-level="0"] { background-color: var(--ch-color-level-0); }
232-
.ch-legend .ch-swatch[data-level="1"] { background-color: var(--ch-color-level-1); }
233-
.ch-legend .ch-swatch[data-level="2"] { background-color: var(--ch-color-level-2); }
234-
.ch-legend .ch-swatch[data-level="3"] { background-color: var(--ch-color-level-3); }
235-
.ch-legend .ch-swatch[data-level="4"] { background-color: var(--ch-color-level-4); }
231+
.easy-tracker-heatmap-legend .easy-tracker-heatmap-swatch[data-level="0"] { background-color: var(--easy-tracker-heatmap-color-level-0); }
232+
.easy-tracker-heatmap-legend .easy-tracker-heatmap-swatch[data-level="1"] { background-color: var(--easy-tracker-heatmap-color-level-1); }
233+
.easy-tracker-heatmap-legend .easy-tracker-heatmap-swatch[data-level="2"] { background-color: var(--easy-tracker-heatmap-color-level-2); }
234+
.easy-tracker-heatmap-legend .easy-tracker-heatmap-swatch[data-level="3"] { background-color: var(--easy-tracker-heatmap-color-level-3); }
235+
.easy-tracker-heatmap-legend .easy-tracker-heatmap-swatch[data-level="4"] { background-color: var(--easy-tracker-heatmap-color-level-4); }
236236

237-
.ch-labels {
237+
.easy-tracker-heatmap-labels {
238238
display: grid;
239-
grid-template-rows: repeat(7, var(--ch-size));
240-
row-gap: var(--ch-gap);
239+
grid-template-rows: repeat(7, var(--easy-tracker-heatmap-size));
240+
row-gap: var(--easy-tracker-heatmap-gap);
241241
margin-right: 6px;
242242
font-size: 10px;
243243
color: var(--text-muted);
244-
line-height: var(--ch-size);
245-
}
244+
line-height: var(--easy-tracker-heatmap-size);
245+
}

0 commit comments

Comments
 (0)