wa0x6e / cal-heatmap

Cal-Heatmap is a javascript charting library to create a time-series calendar heatmap
http://cal-heatmap.com
MIT License
2.72k stars 297 forks source link

Year template goes wrong before the date 1894-01-01 #384

Open dHumanities opened 1 year ago

dHumanities commented 1 year ago

I tried to create a heatmap with with a data source

data :{source: [{date:new Date('1893-12-01'), value:1}]}

in the following template setting

domain: {type: 'year'},
subDomain: {type:'month'}

The result on the year label will goes wrong (1893 will turn into 1892) and if the date is "1832-10-01". Then the Tooltip of that month will also goes wrong.

Here is the sample html can reproduce the problems.

<html>
    <head>
        <script src="https://d3js.org/d3.v7.min.js"></script>
        <script src="https://unpkg.com/cal-heatmap/dist/cal-heatmap.min.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/cal-heatmap/dist/cal-heatmap.css">
        <script src="https://unpkg.com/@popperjs/core@2"></script>
        <script src="https://unpkg.com/cal-heatmap/dist/plugins/Tooltip.min.js"></script>
    </head>
    <body>
        <div id="cal-heatmap"></div>
        <script>
            const data = [{date: new Date('1832-10-01'),value:10}
            // ,{date: new Date('1893-04-01'),count:10},{date: new Date('1893-12-01'),count:10},{date: new Date('1894-01-01'),count:1}
        ];
            const cal = new CalHeatmap();
            cal.paint({
    locale: 'en',
    animationDuration: 0,
  itemSelector: `#cal-heatmap`,
  range: 12,
          date: {start: new Date('1832-10-01'),
          min: new Date('1832-10-01'),
          max: new Date('1894-04-01') },
  domain: { type: 'year' },
  subDomain: { type: 'month', label: '', width: 7, height: 45, radius:10 },
  scale: { color: { type: 'linear', scheme: 'Reds', domain: [0, 50] } },
  data: {
        source: data,
        x: 'date',
        y: 'value',
        defaultValue: null,
        groupY: 'sum'
      }
}, [[Tooltip, {text: (timestamp, value, dayjsDate) => `${value || 0} - ${dayjs(timestamp).format('YYYY-MM')}`}]])
        </script>
    </body>
</html>
wa0x6e commented 10 months ago

Very weird behavior indeed, may be due to timezone and dst not available for date with negative timestamp.

Will investigate