skysan87/heatmap.html

## heatmap.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <script src="https://unpkg.com/cal-heatmap/dist/cal-heatmap.min.js"></script>
  <script src="https://unpkg.com/cal-heatmap/dist/plugins/Legend.min.js"></script>
  <script src="https://unpkg.com/@popperjs/core@2"></script>
  <script src="https://unpkg.com/cal-heatmap/dist/plugins/Tooltip.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/cal-heatmap/dist/cal-heatmap.css">
  <title>Cal-Heatmap Sample</title>
</head>

<body>
  <div id="cal-heatmap"></div>
  <div id="ex-year-legend"></div>
</body>
<script type="module">
  const cal = new CalHeatmap()

  const data = [
    { date: '2023-07-31', value: 1 },
    { date: '2023-08-01', value: 2 },
    { date: '2023-08-02', value: 3 },
    { date: '2023-08-03', value: 4 },
    { date: '2023-10-02', value: 6 },
  ]

  const weekdays = ['日', '月', '火', '水', '木', '金', '土']

  cal.paint(
    {
      itemSelector: '#cal-heatmap',
      domain: {
        type: 'month',
        gutter: 5,
        label: {
          text: 'M月',
          textAlign: 'start',
          position: 'top'
        }
      },
      subDomain: {
        type: 'ghDay', // 月単位の塊ではなく、等間隔に並べる
        // type: 'day', // 月単位の塊で表示
        gutter: 3,
        width: 17,
        height: 17,
        // label: 'D' // debug
      },
      date: {
        start: new Date('2023-01-01')
      },
      data: {
        source: data,
        x: 'date',
        y: 'value'
      },
      scale: {
        // 重みづけ
        color: {
          type: 'threshold',
          range: ['#b0f5e5', '#35f2c6', '#0fbdb4', '#077485'],
          domain: [4, 6, 8]
        }
      }
    },
    [
      [
        Tooltip,
        {
          text: function (date, value, dayjsDate) {
            return (value ? `${value}回 on ` : '') + dayjsDate.format('M月D日') + `(${weekdays[dayjsDate.day()]})`
          }
        }
      ],
      [
        Legend,
        {
          tickSize: 2, // メモリの線を下へ伸ばす
          width: 150,
          itemSelector: '#ex-year-legend',
          label: '回数'
        }
      ]
    ]
  )
</script>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://d3js.org/d3.v7.min.js"></script>
	<script src="https://unpkg.com/cal-heatmap/dist/cal-heatmap.min.js"></script>
	<script src="https://unpkg.com/cal-heatmap/dist/plugins/Legend.min.js"></script>
	<script src="https://unpkg.com/@popperjs/core@2"></script>
	<script src="https://unpkg.com/cal-heatmap/dist/plugins/Tooltip.min.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/cal-heatmap/dist/cal-heatmap.css">
	<title>Cal-Heatmap Sample</title>
	</head>

	<body>
	<div id="cal-heatmap"></div>
	<div id="ex-year-legend"></div>
	</body>
	<script type="module">
	const cal = new CalHeatmap()

	const data = [
	{ date: '2023-07-31', value: 1 },
	{ date: '2023-08-01', value: 2 },
	{ date: '2023-08-02', value: 3 },
	{ date: '2023-08-03', value: 4 },
	{ date: '2023-10-02', value: 6 },
	]

	const weekdays = ['日', '月', '火', '水', '木', '金', '土']

	cal.paint(
	{
	itemSelector: '#cal-heatmap',
	domain: {
	type: 'month',
	gutter: 5,
	label: {
	text: 'M月',
	textAlign: 'start',
	position: 'top'
	}
	},
	subDomain: {
	type: 'ghDay', // 月単位の塊ではなく、等間隔に並べる
	// type: 'day', // 月単位の塊で表示
	gutter: 3,
	width: 17,
	height: 17,
	// label: 'D' // debug
	},
	date: {
	start: new Date('2023-01-01')
	},
	data: {
	source: data,
	x: 'date',
	y: 'value'
	},
	scale: {
	// 重みづけ
	color: {
	type: 'threshold',
	range: ['#b0f5e5', '#35f2c6', '#0fbdb4', '#077485'],
	domain: [4, 6, 8]
	}
	}
	},
	[
	[
	Tooltip,
	{
	text: function (date, value, dayjsDate) {
	return (value ? `${value}回 on ` : '') + dayjsDate.format('M月D日') + `(${weekdays[dayjsDate.day()]})`
	}
	}
	],
	[
	Legend,
	{
	tickSize: 2, // メモリの線を下へ伸ばす
	width: 150,
	itemSelector: '#ex-year-legend',
	label: '回数'
	}
	]
	]
	)
	</script>

	</html>