fixed bug

themes/Ying/layouts/partials/heatmap.html

@@ -0,0 +1,200 @@
+<style>
+.heatmap-scroll-wrapper {
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+.heatmap-scroll-wrapper::-webkit-scrollbar {
+    display: none;
+}
+</style>
+
+<div id="heatmap-wrapper" class="heatmap-scroll-wrapper">
+  <div id="heatmap" style="max-width: 800px; height: 160px; margin: 0 auto 0px auto; padding: 10px; border-radius: 10px; transition: all 0.3s ease; display: block !important; visibility: visible !important; min-width: 300px;"></div>
+</div>
+
+<script type="text/javascript">
+  function renderHeatmap() {
+    if (!window.echarts) {
+        console.warn("ECharts not loaded yet, retrying...");
+        setTimeout(renderHeatmap, 500);
+        return;
+    }
+    var chartDom = document.getElementById('heatmap');
+    if (!chartDom) {
+        console.warn("Heatmap DOM not found");
+        return;
+    }
+    
+    // Dispose existing instance if any
+    var existing = echarts.getInstanceByDom(chartDom);
+    if (existing) {
+      existing.dispose();
+    }
+    
+    var myChart = echarts.init(chartDom, null, { renderer: 'svg' });
+    
+    // Check mobile state
+    var isMobile = window.innerWidth < 768;
+
+    // Handle resize with debouncing and re-render for responsive range
+    var resizeTimer;
+    window.addEventListener('resize', function() {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(function() {
+        var newIsMobile = window.innerWidth < 768;
+        if (newIsMobile !== isMobile) {
+            // Re-render if switching between mobile/desktop to update range
+            renderHeatmap();
+        } else {
+            myChart.resize();
+        }
+      }, 100);
+    });
+
+    // Data Processing
+    var dataMap = new Map();
+    {{ range where .Site.RegularPages "Type" "post" }}
+      var key = "{{ .Date.Format "2006-01-02" }}";
+      var link = "{{ .RelPermalink }}";
+      var title = "{{ .Title }}";
+      var wordCount = {{ .WordCount }};
+      
+      if (!dataMap.has(key)) {
+        dataMap.set(key, []);
+      }
+      dataMap.get(key).push({link, title, wordCount});
+    {{- end -}}
+
+    var data = [];
+    for (const [key, value] of dataMap.entries()) {
+      data.push([key, value.length]);
+    }
+
+    // Date Range Logic
+    var endDate = new Date();
+    var startDate = new Date();
+    
+    if (isMobile) {
+        // Mobile: Show last 5 months to fit screen
+        startDate.setMonth(startDate.getMonth() - 5);
+    } else {
+        // Desktop: Show last 12 months
+        startDate.setFullYear(startDate.getFullYear() - 1);
+    }
+    
+    var startDateStr = echarts.format.formatTime('yyyy-MM-dd', startDate);
+    var endDateStr = echarts.format.formatTime('yyyy-MM-dd', endDate);
+
+    // Theme Logic
+    var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+    
+    // Minimalist Monochrome Colors (Black/White/Gray)
+    // Light: Light Gray -> Black
+    var colorLight = ['#f0f0f0', '#d9d9d9', '#a6a6a6', '#737373', '#000000'];
+    // Dark: Dark Gray -> White
+    var colorDark = ['#1f1f1f', '#404040', '#737373', '#a6a6a6', '#ffffff'];
+    
+    var rangeColors = isDark ? colorDark : colorLight;
+    var calendarLabelColor = isDark ? '#a6a6a6' : '#737373';
+    
+    var option = {
+      tooltip: {
+        padding: 10,
+        backgroundColor: isDark ? '#2d2d2d' : '#ffffff',
+        borderColor: isDark ? '#444' : '#eee',
+        borderWidth: 1,
+        textStyle: {
+          color: isDark ? '#eee' : '#333',
+          fontSize: 12
+        },
+        formatter: function (p) {
+          const date = p.data[0];
+          const posts = dataMap.get(date);
+          if (!posts) return;
+          
+          var content = `<div style="font-weight:bold; margin-bottom:5px;">${date}</div>`;
+          content += `<div style="max-height:150px; overflow-y:auto;">`;
+          for (const post of posts) {
+            content += `<div style="margin-bottom:2px;">`;
+            content += `<a href="${post.link}" target="_blank" style="color:${isDark ? '#fff' : '#000'}; text-decoration:none;">${post.title}</a>`;
+            content += `</div>`;
+          }
+          content += `</div>`;
+          return content;
+        }
+      },
+      visualMap: {
+        min: 0,
+        max: 4,
+        type: 'piecewise',
+        orient: 'horizontal',
+        left: 'center',
+        top: 0,
+        show: false,
+        inRange: {
+          color: rangeColors.slice(1)
+        }
+      },
+      calendar: {
+        top: 30,
+        left: 'center',
+        range: [startDateStr, endDateStr],
+        cellSize: ['auto', 13],
+        splitLine: { show: false },
+        itemStyle: {
+          color: isDark ? '#1f1f1f' : '#f0f0f0',
+          borderWidth: 2,
+          borderColor: isDark ? '#121212' : '#ffffff'
+        },
+        yearLabel: { show: false },
+        monthLabel: {
+          nameMap: 'CN',
+          color: calendarLabelColor,
+          fontSize: 12
+        },
+        dayLabel: {
+          show: true,
+          firstDay: 1,
+          nameMap: ['日', '一', '二', '三', '四', '五', '六'],
+          color: calendarLabelColor,
+          fontSize: 10
+        }
+      },
+      series: {
+        type: 'heatmap',
+        coordinateSystem: 'calendar',
+        data: data,
+        itemStyle: {
+           borderRadius: 2
+        }
+      }
+    };
+
+    myChart.setOption(option);
+  }
+
+  // Initial render
+  if (window.echarts) {
+      renderHeatmap();
+  } else {
+      // Retry a few times if script is still loading
+      setTimeout(renderHeatmap, 500);
+      setTimeout(renderHeatmap, 1500);
+      setTimeout(renderHeatmap, 3000);
+  }
+
+  // Re-render on theme change
+  var observer = new MutationObserver(function(mutations) {
+    mutations.forEach(function(mutation) {
+      if (mutation.type == "attributes" && mutation.attributeName == "data-theme") {
+        renderHeatmap();
+      }
+    });
+  });
+  observer.observe(document.documentElement, {
+    attributes: true
+  });
+</script>