@siyahi/ui 0.1.9-next.25 → 0.1.9-next.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -18,13 +18,12 @@ const calculateLevel = (value, minValue, maxValue, levels, isNormalized) => {
|
|
|
18
18
|
const percentage = value / maxValue;
|
|
19
19
|
return Math.max(1, Math.min(steps, Math.ceil(percentage * steps)));
|
|
20
20
|
};
|
|
21
|
-
const getLevelFill = (level, levels, isNormalized,
|
|
21
|
+
const getLevelFill = (level, levels, isNormalized, colors) => {
|
|
22
22
|
const emptyColor = colors?.empty ?? "var(--color-secondary)";
|
|
23
23
|
const scaleColor = colors?.scale ?? "var(--color-chart-1)";
|
|
24
24
|
if (level === 0) return emptyColor;
|
|
25
25
|
const steps = colorStepCount(levels, isNormalized);
|
|
26
|
-
|
|
27
|
-
return `color-mix(in oklch, ${scaleColor} ${highlighted ? Math.round(opacity * .6) : opacity}%, transparent)`;
|
|
26
|
+
return `color-mix(in oklch, ${scaleColor} ${steps === 1 ? 100 : Math.round(20 + (level - 1) * 80 / (steps - 1))}%, transparent)`;
|
|
28
27
|
};
|
|
29
28
|
const DEFAULT_HOUR_LABELS = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, "0"));
|
|
30
29
|
const TWELVE_HOUR_LABELS = Array.from({ length: 24 }, (_, i) => {
|
|
@@ -259,7 +258,7 @@ const WeekdayHeatmapBlock = ({ ref, activity, extra, highlighted = false, select
|
|
|
259
258
|
"aria-pressed": onCellClick ? selected : void 0,
|
|
260
259
|
tabIndex: onCellClick ? 0 : -1,
|
|
261
260
|
"aria-label": ariaLabel,
|
|
262
|
-
className: cn("
|
|
261
|
+
className: cn("hover:stroke-foreground hover:stroke-1", highlighted && "stroke-foreground stroke-1", selected && "stroke-foreground stroke-2 hover:stroke-2", onCellClick && "cursor-pointer focus-visible:outline-none focus-visible:stroke-ring focus-visible:stroke-2", className),
|
|
263
262
|
"data-value": activity.value,
|
|
264
263
|
"data-weekday": isExtraRow ? "extra" : activity.weekday,
|
|
265
264
|
"data-hour": isExtraColumn ? "extra" : activity.hour,
|
|
@@ -273,11 +272,7 @@ const WeekdayHeatmapBlock = ({ ref, activity, extra, highlighted = false, select
|
|
|
273
272
|
x: xPosition,
|
|
274
273
|
y: yPosition,
|
|
275
274
|
style: {
|
|
276
|
-
fill: getLevelFill(level, levels, isNormalized,
|
|
277
|
-
...selected ? {
|
|
278
|
-
stroke: "var(--foreground)",
|
|
279
|
-
strokeWidth: 2
|
|
280
|
-
} : {},
|
|
275
|
+
fill: getLevelFill(level, levels, isNormalized, colors),
|
|
281
276
|
...styleProp
|
|
282
277
|
},
|
|
283
278
|
onClick: (event) => {
|
|
@@ -510,7 +505,7 @@ const WeekdayHeatmapLegend = ({ labels: labelsProp, className, children, ...prop
|
|
|
510
505
|
rx: blockRadius,
|
|
511
506
|
ry: blockRadius,
|
|
512
507
|
width: LEGEND_SWATCH,
|
|
513
|
-
style: { fill: getLevelFill(level, levels, isNormalized,
|
|
508
|
+
style: { fill: getLevelFill(level, levels, isNormalized, colors) }
|
|
514
509
|
})
|
|
515
510
|
}, `legend-level-${level}`)),
|
|
516
511
|
/* @__PURE__ */ jsx("span", {
|