Resource of CalHeatmap not found
when testing app in Electron. I check on my vscode that clicked new CalHeatmap();
will jump into the source file, so it should be work, but when try to npm start
the resource not found.
Notes:
- In load.js focus on
imports
and focus on line<script type="module" src="./load.js"></script>
in index.html. Let me know if you still need info. - I already manage to get work of cal-heatmap in VITE then I try to make into Electron. In VITE project all it’s fine, but in Electron project it’s not.
- If you need more information, let me know in the comment.
load.js
import CalHeatmap from './node_modules/cal-heatmap';
import './node_modules/cal-heatmap/cal-heatmap.css';
// Instantiate CalHeatmap
const cal = new CalHeatmap();
const _data = {
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',
},
date: { start: new Date('2012-01-01') },
range: 12,
scale: {
color: {
type: 'threshold',
range: ['#14432a', '#166b34', '#37a446', '#4dd05a'],
domain: [10, 20, 30],
},
},
domain: {
type: 'month',
gutter: 4,
label: { text: 'MMM', textAlign: 'start', position: 'top' },
},
subDomain: { type: 'ghDay', radius: 2, width: 11, height: 11, gutter: 4 },
}
cal.paint(_data);
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
<p>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</p>
<div id="cal-heatmap"></div>
<script type="module" src="./load.js"></script>
</body>
</html>