Published
Edited
Jun 28, 2020
4 stars
{
let element = document.getElementById("sheet1")
temp["sheet1"] = {}
element.innerHTML= ""
let sets = flatten(set1, "")
let style = flatten(cstyle, "")
let mysheet = cdg({...{parentNode: element}, ...{'style': style}, ...sets}); //flatten(csettings, "")
mysheet.style.height = '100%';
mysheet.style.width = '100%';
mysheet.addEventListener('datachanged', function (e) {
//console.log(e.data)
for (let i in e.data) {
for (let j in e.data[i]) {
//console.log(i,j,String.fromCharCode(65+parseInt(j)) +(1+parseInt(i)), e.data[i][j])
let res
try {
res = mathjs.evaluate(e.data[i][j].slice(1, e.data[i][j].length), temp["sheet1"])
} catch(f) {
res = e.data[i][j]
}
temp["sheet1"][ String.fromCharCode(65+parseInt(j)) +(1+parseInt(i))] = res
}
}
})
mysheet.data = [["Expression","Result","","","","","","","","","","","","","",""],
["cos(45 deg)","=cos(45 deg)"]
,["x = 7 / 2","=x = 7 / 2"]
,["x+3","=x+3"]
,["2 inch to cm","=2 inch to cm"],
["det([-1, 2; 3, 1])", "=det([-1, 2; 3, 1])"],
["{x: 2 + 1, y: 4}","={x: 2 + 1, y: 4}"],
["90 km/h to m/s","=90 km/h to m/s"],
["[0, 1, 0] m/s","=[0, 1, 0] m/s"],
["24 V / (6 mA)","=24 V / (6 mA)"],
["(9 / 3 + 2i)*(9 / 3 + 12i)","=(9 / 3 + 2i)*(9 / 3 + 12i)"],
["bigint(4349000000000000000000) + bigint(5249000000000000000000)","=bigint(4349000000000000000000) + bigint(5249000000000000000000)"],
["pi" ,"=pi"],
["e", "=e"],
["phi", "=phi"],
["identity(5)","=identity(5)"],
["B3 + B4", "=B3 + B4"],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]]
mysheet.addEventListener('afterrendercell', function (e) {
//console.log(e.cell.value)
if (e.cell.value && e.cell.value[0] === "=") {
e.cell.innerHTML = '<div style="border-top:6px solid #0aa;width:0px;height:0px;border-right:6px solid transparent;top:0px;right:0px" /><div style="font: 16px Roboto Condensed, sans-serif;margin-left:6px;top:-3px;">'
+ mathjs.evaluate(e.cell.value.slice(1,e.cell.value.length), temp["sheet1"])
+ '</div>';
}
});
mysheet.addEventListener('endedit', function (e) { // datachanged
//console.log(e, e.cell.data)
temp["sheet1"][e.cell.header.title+(e.cell.rowIndex + 1)] = e.value
});
}
sheet = require('xlsx@0.16.2/dist/xlsx.min.js')
temp = ({})
mathjs.import([
mathjs.factory('BigInt', ['typed'], function createBigInt ({ typed }) {
typed.addType({
name: 'BigInt',
test: (x) => typeof x === 'bigint' // eslint-disable-line
})
return BigInt // eslint-disable-line
}, { lazy: false }),
mathjs.factory('bigint', ['typed', 'BigInt'], function createBigint ({ typed, BigInt }) {
return typed('bigint', {
'number | string ': (x) => BigInt(x) // eslint-disable-line
})
}),
mathjs.factory('add', ['typed'], function createBigIntAdd ({ typed }) {
return typed('add', {
'BigInt, BigInt': (a, b) => a + b
})
}),
mathjs.factory('pow', ['typed'], function createBigIntPow ({ typed }) {
return typed('pow', {
'BigInt, BigInt': (a, b) => a ** b
})
})
])
function flatten(obj, path){
let ans = {}
//temp[id] = {}
for (let i in obj){
if (typeof obj[i] == "object") {
ans = {...ans, ...flatten(obj[i], path+i)}
} else {
ans[path+i] = obj[i]
//temp[id][path+i]
}
}
return ans
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
function colName(n) {
var ordA = 'a'.charCodeAt(0),
ordZ = 'z'.charCodeAt(0),
len = ordZ - ordA + 1,
s = '';
while (n >= 0) {
s = String.fromCharCode(n % len + ordA) + s;
n = Math.floor(n / len) - 1;
}
return s;
}
function colNumber(col) {
var ordA = 'a'.charCodeAt(0),
ordZ = 'z'.charCodeAt(0),
len = ordZ - ordA + 1
var tot = 0
for (let i in col){
console.log(i)
tot = tot + (col[i].charCodeAt(0) - ordA)*26**(col.length - i) + 1
}
return tot
}
cdg = require('canvas-datagrid@0.22.13/dist/canvas-datagrid.js')
function makeSettings(elementId, sobj){
let element = document.getElementById(elementId)
element.innerHTML= ""
let sets = flatten(set1, "")
let style = flatten(cstyle, "")
let mycdg = cdg({...{parentNode: element}, ...{'style': style}, ...sets}); //flatten(csettings, "")
mycdg.attributes.tree = true;
mycdg.style.height = '100%';
mycdg.style.width = '100%';
mycdg.data = dataFromObj2(sobj);
function expandTree(e) {
console.log(e)
if (e.data.Value[0] === "{") {
e.treeGrid.addEventListener('expandtree', expandTree);
e.treeGrid.attributes.tree = true;
let ob = JSON.parse(e.data.Value)
//console.log(ob)
e.treeGrid.addEventListener('endedit', function (e) { // datachanged
console.log(e, e.cell.data, e.cell.offsetParent)
});
e.treeGrid.data = dataFromObj2(ob);
} else {
e.preventDefault()
}
}
mycdg.addEventListener('expandtree', expandTree);
mycdg.addEventListener('afterrendercell', function (e) {
if (e.cell.value[0] === "=") {
e.cell.innerHTML = '<div style="font-family:Roboto;">'
+ mathjs.evaluate(e.cell.value.slice(1,e.cell.value.length)) + " taylor formula"
+ '</div>';
}
});
mycdg.addEventListener('endedit', function (e) { // datachanged
console.log(e, e.cell.data)
});
}
mathjs = require('mathjs@7.0.2/dist/math.min.js')
function dataFromObj2(obj){
var x, y , d = [], i=0;
for (let x in obj) {
if (typeof obj[x] == "object") {
d[i]={Variable: x, Value: JSON.stringify(obj[x])}
} else {
d[i]={Variable: x, Value: obj[x]}
}
i++
}
return d
}
makeSettings("grid", set1)
makeSettings("grid1", cstyle)
import {exports} from "@khron/hello-taylor"
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
