oiupoyt/token-contribution
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

style: enlarge calendar tiles to 12.5px with comfortable 16px step and auto-scroll

Browse source
This commit is contained in:
katR 2026-10-09 23:34:07 +05:30
parent 2e3f1d8a25
commit 4b907b9dcd
4 changed files with 152 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
lib/client.js
View file

@ -70,6 +70,7 @@ function HeatmapView() {
const [selectedDate, setSelectedDate] = (0, import_react.useState)(null);
const [hoveredDay, setHoveredDay] = (0, import_react.useState)(null);
const [tooltipPos, setTooltipPos] = (0, import_react.useState)(null);
const scrollContainerRef = import_react.default.useRef(null);
const fetchStats = () => {
setLoading(true);
fetch("/api/dsh-token-heatmap/stats").then((r) => {
@ -86,6 +87,11 @@ function HeatmapView() {
(0, import_react.useEffect)(() => {
fetchStats();
}, []);
(0, import_react.useEffect)(() => {
if (scrollContainerRef.current) {
scrollContainerRef.current.scrollLeft = scrollContainerRef.current.scrollWidth;
}
}, [calendarGrid]);
const activeView = (0, import_react.useMemo)(() => {
if (!data) return null;
if (selectedSessionId === "all") {
@ -436,13 +442,25 @@ function HeatmapView() {
/* @__PURE__ */ import_react.default.createElement("span", null, "Contribution Calendar"),
summary.peakDay && /* @__PURE__ */ import_react.default.createElement("span", { style: { fontSize: 12, fontWeight: 400, color: "var(--dsw-alias-label-secondary)" } }, "Peak day: ", /* @__PURE__ */ import_react.default.createElement("strong", { style: { color: "var(--dsw-alias-label-primary)" } }, summary.peakDay.date), " (", formatNumber(summary.peakDay.tokens), " tokens)")
),
calendarGrid && /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "100%", overflow: "hidden" } }, /* @__PURE__ */ import_react.default.createElement(
"svg",
calendarGrid && /* @__PURE__ */ import_react.default.createElement(
"div",
{
viewBox: "0 0 740 112",
ref: scrollContainerRef,
style: {
width: "100%",
height: "auto",
overflowX: "auto",
WebkitOverflowScrolling: "touch",
paddingBottom: "8px"
}
},
/* @__PURE__ */ import_react.default.createElement(
"svg",
{
viewBox: "0 0 895 142",
style: {
width: "100%",
minWidth: "860px",
height: "142px",
display: "block",
overflow: "visible"
}
@ -451,42 +469,42 @@ function HeatmapView() {
"text",
{
key: i,
x: 30 + m.col * 13.2,
y: 10,
fontSize: 10,
x: 34 + m.col * 16,
y: 12,
fontSize: 11,
fill: "var(--dsw-alias-label-tertiary, #888888)",
fontFamily: "inherit"
},
m.label
)),
/* @__PURE__ */ import_react.default.createElement("text", { x: 2, y: 38, fontSize: 9, fill: "var(--dsw-alias-label-tertiary, #888888)", fontFamily: "inherit" }, "Mon"),
/* @__PURE__ */ import_react.default.createElement("text", { x: 2, y: 64, fontSize: 9, fill: "var(--dsw-alias-label-tertiary, #888888)", fontFamily: "inherit" }, "Wed"),
/* @__PURE__ */ import_react.default.createElement("text", { x: 2, y: 90, fontSize: 9, fill: "var(--dsw-alias-label-tertiary, #888888)", fontFamily: "inherit" }, "Fri"),
calendarGrid.map((week, colIdx) => /* @__PURE__ */ import_react.default.createElement("g", { key: colIdx, transform: `translate(${28 + colIdx * 13.2}, 16)` }, week.map((day, rowIdx) => {
/* @__PURE__ */ import_react.default.createElement("text", { x: 4, y: 49, fontSize: 10, fill: "var(--dsw-alias-label-tertiary, #888888)", fontFamily: "inherit" }, "Mon"),
/* @__PURE__ */ import_react.default.createElement("text", { x: 4, y: 81, fontSize: 10, fill: "var(--dsw-alias-label-tertiary, #888888)", fontFamily: "inherit" }, "Wed"),
/* @__PURE__ */ import_react.default.createElement("text", { x: 4, y: 113, fontSize: 10, fill: "var(--dsw-alias-label-tertiary, #888888)", fontFamily: "inherit" }, "Fri"),
calendarGrid.map((week, colIdx) => /* @__PURE__ */ import_react.default.createElement("g", { key: colIdx, transform: `translate(${34 + colIdx * 16}, 22)` }, week.map((day, rowIdx) => {
if (!day) return null;
const lvl = day.stats.level || 0;
const bg = DEEPSEEK_LEVELS[lvl];
const isSelected = selectedDate === day.date;
const isHovered = hoveredDay?.date === day.date;
const strokeColor = isSelected ? "#ffffff" : isHovered ? "#5686fe" : lvl === 0 ? "rgba(255, 255, 255, 0.05)" : "transparent";
const strokeWidth = isSelected ? 1.5 : isHovered ? 1.2 : 1;
const strokeColor = isSelected ? "#ffffff" : isHovered ? "#5686fe" : lvl === 0 ? "rgba(255, 255, 255, 0.06)" : "transparent";
const strokeWidth = isSelected ? 1.8 : isHovered ? 1.4 : 1;
return /* @__PURE__ */ import_react.default.createElement(
"rect",
{
key: rowIdx,
x: 0,
y: rowIdx * 13,
width: 10.5,
height: 10.5,
rx: 2,
ry: 2,
y: rowIdx * 16,
width: 12.5,
height: 12.5,
rx: 2.5,
ry: 2.5,
fill: bg,
stroke: strokeColor,
strokeWidth,
style: {
cursor: "pointer",
transition: "fill 0.12s ease, stroke 0.12s ease",
filter: isSelected ? "drop-shadow(0 0 6px rgba(86, 134, 254, 0.9))" : isHovered ? "drop-shadow(0 0 4px rgba(86, 134, 254, 0.7))" : lvl === 4 ? "drop-shadow(0 0 3px rgba(79, 133, 255, 0.5))" : "none"
filter: isSelected ? "drop-shadow(0 0 6px rgba(86, 134, 254, 0.9))" : isHovered ? "drop-shadow(0 0 4px rgba(86, 134, 254, 0.7))" : lvl === 4 ? "drop-shadow(0 0 4px rgba(79, 133, 255, 0.6))" : "none"
},
onClick: () => {
setSelectedDate(isSelected ? null : day.date);
@ -503,7 +521,8 @@ function HeatmapView() {
}
);
})))
), /* @__PURE__ */ import_react.default.createElement(
),
/* @__PURE__ */ import_react.default.createElement(
"div",
{
style: {
@ -521,16 +540,17 @@ function HeatmapView() {
{
key: i,
style: {
width: 10.5,
height: 10.5,
borderRadius: 2,
width: 12.5,
height: 12.5,
borderRadius: 2.5,
backgroundColor: c,
border: i === 0 ? "1px solid rgba(255, 255, 255, 0.05)" : "none",
border: i === 0 ? "1px solid rgba(255, 255, 255, 0.06)" : "none",
filter: i === 4 ? "drop-shadow(0 0 3px rgba(79, 133, 255, 0.5))" : "none"
}
}
)), /* @__PURE__ */ import_react.default.createElement("span", null, "More"))
))
)
)
),
selectedDate && /* @__PURE__ */ import_react.default.createElement(
"div",
@ -676,8 +696,8 @@ function HeatmapModal({ open, onClose }) {
style: {
position: "relative",
width: "100%",
maxWidth: "960px",
maxHeight: "90vh",
maxWidth: "1040px",
maxHeight: "92vh",
overflowY: "auto",
background: "var(--dsw-alias-bg-layer-1, #1e1e1e)",
border: "1px solid var(--dsw-alias-border-l2, #494949)",

4
lib/client.js.map
View file

File diff suppressed because one or more lines are too long

4
src/client/HeatmapModal.tsx
View file

@ -33,8 +33,8 @@ export function HeatmapModal({ open, onClose }: HeatmapModalProps) {
style={{
position: "relative",
width: "100%",
maxWidth: "960px",
maxHeight: "90vh",
maxWidth: "1040px",
maxHeight: "92vh",
overflowY: "auto",
background: "var(--dsw-alias-bg-layer-1, #1e1e1e)",
border: "1px solid var(--dsw-alias-border-l2, #494949)",

66
src/client/HeatmapView.tsx
View file

@ -86,6 +86,7 @@ export function HeatmapView() {
const [selectedDate, setSelectedDate] = useState<string | null>(null);
const [hoveredDay, setHoveredDay] = useState<{ date: string; stats: DayStats } | null>(null);
const [tooltipPos, setTooltipPos] = useState<{ x: number; y: number } | null>(null);
const scrollContainerRef = React.useRef<HTMLDivElement>(null);
const fetchStats = () => {
setLoading(true);
@ -108,6 +109,12 @@ export function HeatmapView() {
fetchStats();
}, []);
useEffect(() => {
if (scrollContainerRef.current) {
scrollContainerRef.current.scrollLeft = scrollContainerRef.current.scrollWidth;
}
}, [calendarGrid]);
// Compute active days & stats based on session filter
const activeView = useMemo(() => {
if (!data) return null;
@ -530,14 +537,23 @@ export function HeatmapView() {
)}
</div>
{/* Responsive GitHub-Style Calendar SVG (scales with container width) */}
{/* Comfortably sized GitHub-Style Calendar SVG with smooth horizontal scroll */}
{calendarGrid && (
<div style={{ width: "100%", overflow: "hidden" }}>
<svg
viewBox="0 0 740 112"
<div
ref={scrollContainerRef}
style={{
width: "100%",
height: "auto",
overflowX: "auto",
WebkitOverflowScrolling: "touch",
paddingBottom: "8px",
}}
>
<svg
viewBox="0 0 895 142"
style={{
width: "100%",
minWidth: "860px",
height: "142px",
display: "block",
overflow: "visible",
}}
@ -546,9 +562,9 @@ export function HeatmapView() {
{monthHeaders.map((m, i) => (
<text
key={i}
x={30 + m.col * 13.2}
y={10}
fontSize={10}
x={34 + m.col * 16}
y={12}
fontSize={11}
fill="var(--dsw-alias-label-tertiary, #888888)"
fontFamily="inherit"
>
@ -557,19 +573,19 @@ export function HeatmapView() {
))}
{/* Day of week labels */}
<text x={2} y={38} fontSize={9} fill="var(--dsw-alias-label-tertiary, #888888)" fontFamily="inherit">
<text x={4} y={49} fontSize={10} fill="var(--dsw-alias-label-tertiary, #888888)" fontFamily="inherit">
Mon
</text>
<text x={2} y={64} fontSize={9} fill="var(--dsw-alias-label-tertiary, #888888)" fontFamily="inherit">
<text x={4} y={81} fontSize={10} fill="var(--dsw-alias-label-tertiary, #888888)" fontFamily="inherit">
Wed
</text>
<text x={2} y={90} fontSize={9} fill="var(--dsw-alias-label-tertiary, #888888)" fontFamily="inherit">
<text x={4} y={113} fontSize={10} fill="var(--dsw-alias-label-tertiary, #888888)" fontFamily="inherit">
Fri
</text>
{/* Day Tiles */}
{/* Day Tiles: comfortable 12.5px size with 16px step */}
{calendarGrid.map((week, colIdx) => (
<g key={colIdx} transform={`translate(${28 + colIdx * 13.2}, 16)`}>
<g key={colIdx} transform={`translate(${34 + colIdx * 16}, 22)`}>
{week.map((day, rowIdx) => {
if (!day) return null;
@ -584,20 +600,20 @@ export function HeatmapView() {
: isHovered
? "#5686fe"
: lvl === 0
? "rgba(255, 255, 255, 0.05)"
? "rgba(255, 255, 255, 0.06)"
: "transparent";
const strokeWidth = isSelected ? 1.5 : isHovered ? 1.2 : 1;
const strokeWidth = isSelected ? 1.8 : isHovered ? 1.4 : 1;
return (
<rect
key={rowIdx}
x={0}
y={rowIdx * 13}
width={10.5}
height={10.5}
rx={2}
ry={2}
y={rowIdx * 16}
width={12.5}
height={12.5}
rx={2.5}
ry={2.5}
fill={bg}
stroke={strokeColor}
strokeWidth={strokeWidth}
@ -609,7 +625,7 @@ export function HeatmapView() {
: isHovered
? "drop-shadow(0 0 4px rgba(86, 134, 254, 0.7))"
: lvl === 4
? "drop-shadow(0 0 3px rgba(79, 133, 255, 0.5))"
? "drop-shadow(0 0 4px rgba(79, 133, 255, 0.6))"
: "none",
}}
onClick={() => {
@ -652,11 +668,11 @@ export function HeatmapView() {
<div
key={i}
style={{
width: 10.5,
height: 10.5,
borderRadius: 2,
width: 12.5,
height: 12.5,
borderRadius: 2.5,
backgroundColor: c,
border: i === 0 ? "1px solid rgba(255, 255, 255, 0.05)" : "none",
border: i === 0 ? "1px solid rgba(255, 255, 255, 0.06)" : "none",
filter: i === 4 ? "drop-shadow(0 0 3px rgba(79, 133, 255, 0.5))" : "none",
}}
/>