So for a project that i’m working on, i need to use IDOM inside panel with some existing JS code. I tried to make a little test project based on the IDOM documentation . What i have tried to do is adapt the code in the “import javascript bundles” example so that I can take the IDOM component and run it inside the panel.pane.IDOM function. I have 2 scripts: 1 containing JS code and 1 containing the python code
from pathlib import Path
import idom
import panel as pn
pn.extension()
@idom.component
def chart():
# we use this to make writing our React code a bit easier
pn.pane.IDOM.install("htm")
path_to_source_file = Path(__file__).parent / "JSTestFile"
ssc = idom.Module("JSTestFile", source_file=path_to_source_file)
return lambda: ssc.SuperSimpleChart(
{
"data": [
{"x": 1, "y": 2},
{"x": 2, "y": 4},
{"x": 3, "y": 7},
{"x": 4, "y": 3},
{"x": 5, "y": 5},
{"x": 6, "y": 9}, {"x": 7, "y": 6},
],
"height": 300,
"width": 500,
"color": "royalblue",
"lineWidth": 4,
"axisColor": "silver",
}
)
c = pn.pane.IDOM(chart)
c.servable()
import React from "./react.js";
import htm from "./htm.js";
const html = htm.bind(React.createElement);
export function SuperSimpleChart(props) {
const data = props.data;
const lastDataIndex = data.length - 1;
const options = {
height: props.height || 100,
width: props.width || 100,
color: props.color || "blue",
lineWidth: props.lineWidth || 2,
axisColor: props.axisColor || "black",
};
const xData = data.map((point) => point.x);
const yData = data.map((point) => point.y);
const domain = {
xMin: Math.min(...xData),
xMax: Math.max(...xData),
yMin: Math.min(...yData),
yMax: Math.max(...yData),
};
return html`<svg
width="${options.width}px"
height="${options.height}px"
viewBox="0 0 ${options.width} ${options.height}"
>
${makePath(props, domain, data, options)} ${makeAxis(props, options)}
</svg>`;
}
function makePath(props, domain, data, options) {
const { xMin, xMax, yMin, yMax } = domain;
const { width, height } = options;
const getSvgX = (x) => ((x - xMin) / (xMax - xMin)) * width;
const getSvgY = (y) => height - ((y - yMin) / (yMax - yMin)) * height;
let pathD = "M " + getSvgX(data[0].x) + " " + getSvgY(data[0].y) + " ";
pathD += data.map((point, i) => {
return "L " + getSvgX(point.x) + " " + getSvgY(point.y) + " ";
});
return html`<path
d="${pathD}"
style=${{
stroke: options.color,
strokeWidth: options.lineWidth,
fill: "none",
}}
/>`;
}
function makeAxis(props, options) {
return html`<g>
<line
x1="0"
y1=${options.height}
x2=${options.width}
y2=${options.height}
style=${{ stroke: options.axisColor, strokeWidth: options.lineWidth * 2 }}
/>
<line
x1="0"
y1="0"
x2="0"
y2=${options.height}
style=${{ stroke: options.axisColor, strokeWidth: options.lineWidth * 2 }}
/>
</g>`;
}
Note that the JS code is exactly the same as the example code in the IDOM documentation
When i try out this code, I get the following log in my console:
:
Does anyone know how i can resolve this issue?