blog/themes/Ying/layouts/partials/heatmap.html

<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" "posts" }}
      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 if (window.optionalAssetUrls && window.optionalAssetUrls.echarts && window.loadScriptOnce) {
      window.loadScriptOnce(window.optionalAssetUrls.echarts, 'echarts', renderHeatmap);
  }

  // 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>