Full working code #515
Comments
|
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. |
|
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> |
|
Any ideas how this would work on svelte I get an 'expression is not contrustable error.' |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
The text was updated successfully, but these errors were encountered: