Published
Edited
Dec 22, 2020
3 stars
Insert cell
Insert cell
XLSX = require('xlsx')
Insert cell
ws_name = "SheetJS"
Insert cell
/* make worksheet */
ws = XLSX.utils.aoa_to_sheet([
["S", "h", "e", "e", "t", "J", "S"],
[1, 2, 3, 4, 5],
[1, 2, 3, 4, 5]
])
Insert cell
Infinity === Infinity
Insert cell
wb = {
/* Add the worksheet to the workbook */
var wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, ws_name);
return wb;
}
Insert cell
XLSX.utils.sheet_to_json(ws)
Insert cell
XLSX.utils.json_to_sheet([{ S: 1, h: 2, e: 3, e_1: 4, t: 5 }])
Insert cell
Insert cell
id_counter = ({ value: 5 })
Insert cell
id_counter
Insert cell
custom_element_name = {
id_counter.value = id_counter.value + 1;
let name = `popup-infov${id_counter.value}`;
customElements.define(name, WordCount);
return name;
}
Insert cell
data = btoa(
JSON.stringify({
x: 10,
y: 20
})
)
Insert cell
html`
<${custom_element_name}
body=${data}
src="http://localhost:1234/notebook/123/bond/x"
>
<span slot="error">Pluto not loaded</span>
</popup-info>
`
Insert cell
url = new URL("http://localhost:1234/notebook/123/bond/x")
Insert cell
url.pathname
Insert cell
html`
<fake-element
body=${data}
src="http://localhost:1234/notebook/123/bond/x"
>
<span slot="error">Pluto not loaded</span>
</popup-info>
`
Insert cell
Insert cell
Insert cell
class WordCount extends HTMLElement {
constructor() {
// Always call super first in constructor
super();

// Element functionality written in here
// Create a shadow root
this.attachShadow({ mode: 'open' }); // sets and returns 'this.shadowRoot'

let body = JSON.parse(atob(this.getAttribute('body')));

let inspected = htl`<div></div>`;
this.inspector = new Inspector(inspected);

// Create (nested) span elements
let wrapper = htl`
<link rel="stylesheet" href="https://unpkg.com/@observablehq/inspector@3.2.1/dist/inspector.css" />
<span class="wrapper">
<span class="icon" tabindex=0>
${inspected}
</span>

<slot name="error" />
</span>
`;

// attach the created elements to the shadow DOM
this.shadowRoot.append(wrapper);
}

connectedCallback() {
console.log('HEY');
let body = JSON.parse(atob(this.getAttribute('body')));
this.inspector.fulfilled(body);
}

disconnectedCallback() {
console.log("BYE");
}
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more