Heatmap

// Note: Chart.js doesn't have native heatmap support
// This is a custom implementation using matrix dataset
const config = {
  type: 'scatter',
  data: {
    datasets: [{
      label: 'Heatmap Data',
      data: [
        {x: 0, y: 0, v: 23}, {x: 1, y: 0, v: 45}, {x: 2, y: 0, v: 67}, {x: 3, y: 0, v: 34}, {x: 4, y: 0, v: 12}, {x: 5, y: 0, v: 78}, {x: 6, y: 0, v: 90},
        {x: 0, y: 1, v: 56}, {x: 1, y: 1, v: 78}, {x: 2, y: 1, v: 23}, {x: 3, y: 1, v: 89}, {x: 4, y: 1, v: 45}, {x: 5, y: 1, v: 67}, {x: 6, y: 1, v: 34},
        {x: 0, y: 2, v: 89}, {x: 1, y: 2, v: 34}, {x: 2, y: 2, v: 78}, {x: 3, y: 2, v: 23}, {x: 4, y: 2, v: 90}, {x: 5, y: 2, v: 12}, {x: 6, y: 2, v: 56},
        {x: 0, y: 3, v: 45}, {x: 1, y: 3, v: 67}, {x: 2, y: 3, v: 89}, {x: 3, y: 3, v: 56}, {x: 4, y: 3, v: 23}, {x: 5, y: 3, v: 78}, {x: 6, y: 3, v: 34},
        {x: 0, y: 4, v: 12}, {x: 1, y: 4, v: 90}, {x: 2, y: 4, v: 45}, {x: 3, y: 4, v: 67}, {x: 4, y: 4, v: 78}, {x: 5, y: 4, v: 23}, {x: 6, y: 4, v: 89},
        {x: 0, y: 5, v: 78}, {x: 1, y: 5, v: 23}, {x: 2, y: 5, v: 56}, {x: 3, y: 5, v: 90}, {x: 4, y: 5, v: 34}, {x: 5, y: 5, v: 45}, {x: 6, y: 5, v: 67},
        {x: 0, y: 6, v: 34}, {x: 1, y: 6, v: 56}, {x: 2, y: 6, v: 12}, {x: 3, y: 6, v: 78}, {x: 4, y: 6, v: 67}, {x: 5, y: 6, v: 89}, {x: 6, y: 6, v: 45}
      ],
      backgroundColor: function(context) {
        const value = context.parsed.v;
        const alpha = value / 100;
        return `rgba(59, 130, 246, ${alpha})`;
      },
      borderColor: 'rgba(59, 130, 246, 0.8)',
      pointRadius: 20,
      pointHoverRadius: 22
    }]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Website Activity Heatmap'
      },
      legend: {
        display: false
      },
      tooltip: {
        callbacks: {
          title: function() { return ''; },
          label: function(context) {
            return `Day ${context.parsed.x + 1}, Hour ${context.parsed.y + 1}: ${context.parsed.v} visits`;
          }
        }
      }
    },
    scales: {
      x: {
        type: 'linear',
        position: 'bottom',
        title: {
          display: true,
          text: 'Day of Week'
        },
        ticks: {
          stepSize: 1,
          callback: function(value) {
            const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
            return days[value] || value;
          }
        }
      },
      y: {
        type: 'linear',
        title: {
          display: true,
          text: 'Hour of Day'
        },
        ticks: {
          stepSize: 1,
          callback: function(value) {
            return value + ':00';
          }
        }
      }
    }
  }
};