cal-heatmap Full working code

It would be very useful to have a full working HTML file in the docs. The current getting started page is quite good, but the single steps do not add up to a working page (they use the render function, which is never imported or defined).

So it's difficult to get started with the library without prior knowledge.

Apr 02 '24 18:04 silvioba

Funny, I am hitting the same issue, I don't understand what to use for render! I am migrating from a VERY OLD version of this library.

Apr 11 '24 14:04 epugh

~~Javascript doesn't support render(<div id="cal-heatmap"></div>); ?~~

edit: I use VITE and doesn't need render. Here is working code.

main.js

import CalHeatmap from 'cal-heatmap';
import 'cal-heatmap/cal-heatmap.css';
import Legend from 'cal-heatmap/plugins/Legend'
import Tooltip from 'cal-heatmap/plugins/Tooltip';
import CalendarLabel from 'cal-heatmap/plugins/CalendarLabel';

// Instantiate CalHeatmap
const cal = new CalHeatmap();

const m_Data = {
    source: 'https://raw.githubusercontent.com/vega/vega/main/docs/data/seattle-weather.csv',
    type: 'csv',
    x: 'date',
    y: d => +d['temp_max'],
    groupY: 'max',
}


cal.paint({
    theme: 'dark',
    data: m_Data,
    date: {
        locale: `id`,
        start: new Date('2012-01-01')
    },
    range: 1,
    scale: { color: { type: 'linear', scheme: 'PRGn', domain: [0, 40] } },
    domain: {
        type: 'year',
        label: { text: null },
    },
    subDomain: { type: 'day', radius: 2 },

}, [
    [Tooltip, {
        text: function (date, value, dayjsDate) {
            return (
                (value ? value + '°C' : 'No data') + ' on ' + dayjsDate.format('LL')
            );
        },

    }],
    [Legend,
        {
            tickSize: 0,
            width: 150,
            itemSelector: '#ex-year-legend',
            label: 'Seattle max temperature °C',
        },
    ],
    [CalendarLabel,
        {
            width: 30,
            textAlign: 'start',
            text: () => dayjs.weekdaysShort().map((d, i) => (i % 2 == 0 ? '' : d)),
        },
    ],

]);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cal-Heatmap Example</title>
    <link rel="stylesheet" href="/node_modules/cal-heatmap/dist/cal-heatmap.css">
</head>
<body>
    <h1>Hello World</h1>
    <div id="cal-heatmap"></div>
    <script type="module" src="main.js"></script>
</body>
</html>

Jul 30 '24 14:07 restush

Any ideas how this would work on svelte I get an 'expression is not contrustable error.'

Sep 10 '24 01:09 Michael-Obele

cal-heatmap cal-heatmap copied to clipboard

Full working code

cal-heatmap
cal-heatmap copied to clipboard