Published
Edited
Oct 25, 2020
Importers
md`# Vega Chart`
function inputAxes(uuid){
let field = ['scale','title','orient','format','formatType','grid','tickCount']
let [scale,title,orient,format,formatType,grid,tickCount] = field.map(e=>`'${localStorage.getItem(`axe${e}0`)}'`||'')
let AxesInput = html`
<fieldset>
<legend>Axe:</legend>
${textInput(`axetitle${uuid}`,`Title:`,title,false)}
${textInput(`axescale${uuid}`,`Scale:`,scale,true)}
${optionInput(`axeorient${uuid}`,`Orient:`,orients,orient)}
${textInput(`axeformat${uuid}`,`Format:`,format,false)}
${optionInput(`axeformatType${uuid}`,`Format Type`,formattypes,formatType)}
${optionInput(`axegrid${uuid}`,`Grid:`,bol,new Boolean(grid))}
${textInput(`axetickCount${uuid}`,`TickCount:`,tickCount,false)}
${addAxe(uuid,field)}
</fieldset>
`
return AxesInput
}
function inputMark(uuid){
let field = ['name','type','from','encode']
let [name,type,from,encode] = field.map(e=>`'${localStorage.getItem(`mark${e}0`)}'`||'')
let MarksInput = html`
<fieldset>
<legend>Mark:</legend>
${textInput(`markname${uuid}`,`Name:`,name,true)}
${optionInput(`marktype${uuid}`,`Type:`,MarkTypes,type,true)}
${textInput(`markfrom${uuid}`,`From:`,from,false)}
${textInput(`markencode${uuid}`,`Encode:`,encode,false)}
${addMark(uuid,field)}
</fieldset>
`
return MarksInput
}
localStorage.getItem('marktype0')
html`${textInput('testid','Encode:',`'${localStorage.getItem('markencode0')}'`,false)}`
localStorage.getItem('markencode0')
Quantitative = ["linear", "log", "pow", "sqrt", "symlog", "time", "utc", "sequential"]
Discrete = ["ordinal","band","point"]
Discretizing = ["quantile","quantize","bin-ordinal"]
orients = ["left","right","top","bottom"]
MarkTypes = ["arc","area","image","group","line","path","rect","rule","shape","symbol","text","trail"]
bol = [true,false]
function addAxe(uuid,field){
let add = html`<input type="button" id="addAxe${uuid}" value="Add"><br>`
let con = html`<div>
${add}
<div id="listAxe${uuid}">${genTableAxe(uuid,field)}</div>
</div>`
add.addEventListener('click',event=>{
let v = {}
let [scale,title,orient,format,formatType,grid,tickCount] = field.map(e=>{
v[e]=getInputValue(`#axe${e}${uuid}`)
return v[e]
})
let i = parseInt(localStorage.getItem('axeedit'))//apakah ini existing data?
let f = axes.findIndex(e=>e.scale===scale)
if(i>=0){
if(f!==i&&f!==-1){
//debugger;
v['scale']+=i}
} else if(f>=0){
i=f}
else{
i=axes.length}
let axe = {}
for (const key of field){
debugger;
axe[key] = isStringContainObject(v[key])?JsonParse(v[key]):v[key]
localStorage.setItem(`axe${key}${i}`,v[key])
debugger;
}
axes[i]=axe
let tab = genTableAxe(uuid,field)
localStorage.setItem('axeedit',undefined)
})
return con
}
function addMark(uuid,field){
let add = html`<input type="button" id="addMark${uuid}" value="Add"><br>`
let con = html`<div>
${add}
<div id="listMark${uuid}">${genTableMark(uuid,field)}</div>
</div>`
add.addEventListener('click',event=>{
let v = {}
let [name,type,from,encode] = field.map(e=>{
v[e]=getInputValue(`#mark${e}${uuid}`)
return v[e]
})
let i = parseInt(localStorage.getItem('markedit'))//apakah ini existing data?
let f = marks.findIndex(e=>e.name===name)
if(i>=0){
if(f!==i&&f!==-1){
//debugger;
v['name']+=i}
} else if(f>=0){
i=f}
else{
i=marks.length}
let mark = {}
for (const key of field){
mark[key] = isStringContainObject(v[key])?JsonParse(v[key]):v[key]
localStorage.setItem(`mark${key}${i}`,v[key])
debugger;
}
marks[i]=mark
let tab = genTableMark(uuid,field)
localStorage.setItem('markedit',undefined)
})
return con
}
function delData(uuid){
let del = html`<input type="button" id="delData${uuid}" value="Del">`
del.addEventListener('click',event=>{
let gen = document.querySelector(`#genData${uuid}`)
removeAllChild(gen)
})
return del
}
function genTableData(uuid,con){
debugger;
let dN = 'data'
let tt =''
for (const [key] of Object.entries(datas[0])) {
tt+=`<td>${key}</td>`}
let r = html`<table><tbody><tr>
${tt}
<td>edit</td>
<td>delete</td>
</tr>${datas.map((e,i)=>{
let dd = ''
for (const [key, value] of Object.entries(e)) {
dd+=`<td>${localStorage.getItem(`data${key}${i}`)}</td>`
}
debugger;
return (`<tr id='${dN}${i}${uuid}'>
${dd}
<td>${editRow(i,uuid,datas,dN)}</td>
<td>${delRow(i,uuid,datas,dN)}</td>
</tr>`)
}).join('')}</tbody></table>`
if(!con){
con = document.querySelector(`#listData${uuid}`)
}
//debugger;
removeAllChild(con)
con.prepend(r)
}
function genTableScale(uuid,field){
let dN = 'scale'
let tt = ''
for(const key of field){
tt+=`<td>${key}</td>`
}
let r = html`<table><tbody><tr>
${tt}
<td>edit</td>
<td>delete</td>
</tr>${scales.map((e,i)=>{
let tt =''
debugger;
for(const key of field){
tt+=`<td>${localStorage.getItem(`scale${key}${i}`)}</td>`
}
return (`<tr id='${dN}${i}${uuid}'>
${tt}
<td>${editRow(i,uuid,scales,dN)}</td>
<td>${delRow(i,uuid,scales,dN)}</td>
</tr>`)
}).join('')}</tbody></table>`
let list = document.querySelector(`#listScale${uuid}`)
//debugger;
if(list){
removeAllChild(list)
list.prepend(r)
} else { return r}
}
function genTableAxe(uuid,field){
let dN = 'axe'
let tt = ''
for(const key of field){
tt+=`<td>${key}</td>`
}
let r = html`<table><tbody><tr>
${tt}
<td>edit</td>
<td>delete</td>
</tr>${axes.map((e,i)=>{
let tt =''
for(const key of field){
tt+=`<td>${localStorage.getItem(`axe${key}${i}`)}</td>`
}
return (`<tr id='${dN}${i}${uuid}'>
${tt}
<td>${editRow(i,uuid,axes,dN)}</td>
<td>${delRow(i,uuid,axes,dN)}</td>
</tr>`)
}).join('')}</tbody></table>`
let list = document.querySelector(`#listAxe${uuid}`)
//debugger;
if(list){
removeAllChild(list)
list.prepend(r)
} else { return r}
}
function genTableMark(uuid,field){
let dN = 'mark'
let tt = ''
for(const key of field){
tt+=`<td>${key}</td>`
}
let r = html`<table><tbody><tr>
${tt}
<td>edit</td>
<td>delete</td>
</tr>${marks.map((e,i)=>{
let tt =''
for(const key of field){
tt+=`<td>${localStorage.getItem(`mark${key}${i}`)}</td>`
}
debugger;
return (`<tr id='${dN}${i}${uuid}'>
${tt}
<td>${editRow(i,uuid,marks,dN)}</td>
<td>${delRow(i,uuid,marks,dN)}</td>
</tr>`)
}).join('')}</tbody></table>`
let list = document.querySelector(`#listMark${uuid}`)
if(list){
removeAllChild(list)
list.prepend(r)
} else { return r}
}
function delChart(uuid){
let id = `delChart${uuid}`
//let uuid = Date.now()
let del = `<input type="button" id="${id}" value="Delete Chart">`
//let delHtml = html`${del}`
document.addEventListener('click',event=>{
//debugger;
if(event.target==document.querySelector(`#${id}`)){
let r =document.querySelector(`#output${uuid}`)
removeAllChild(r)
}
//genTableData()
})
return del
}
function delRow(i,uuid,d,dN){
let id = `del${i}${dN}${uuid}`
//let uuid = Date.now()
let del = `<input type="button" id="${id}" value="del">`
//let delHtml = html`${del}`
document.addEventListener('click',event=>{
//debugger;
if(event.target==document.querySelector(`#${id}`)){
d.splice(i);
let r =document.querySelector(`#${dN}${i}${uuid}`)
r.remove()
}
//genTableData()
})
return del
}
function editRow(i,uuid,d,dN){
let id = `edit${i}${dN}${uuid}`
let edit = `<input type="button" id="${id}" value="edit">`
//let delHtml = html`${del}`
document.addEventListener('click',event=>{
//debugger;
if(event.target==document.querySelector(`#${id}`)){
localStorage.setItem(`${dN}edit`,i)
for(const [key,val] of Object.entries(d[i])){
let v = localStorage.getItem(`${dN}${key}${i}`)
//debugger;
v?setInputValue(`#${dN}${key}${uuid}`,v):null;
}
}
//genTableData()
})
return edit
}
localStorage.getItem('datavalues0')
datas=[]
scales = []
axes = []
marks = []
optionInput('me','test',scaletypes,'log')
scaletypes = ({"Quantitative":Quantitative,"Discrete":Discrete,"Discretizing":Discretizing})
formattypes = ['number','time','utc']
function JsonParse(obj){
//debugger;
return Function('"use strict";return (' + obj + ')')();
}
function isStringContainObject(s){
//debugger;
return s.includes('{') || s.includes('[') ||s.includes('true')||s.includes('false')||!isNaN(s)&&(s!=='')
}
function parseval(o){
return Function('"use strict"; let r ='+o+';return r' )();
}
parseval('{string:"string"}')
obj = ({'x':0,'y':2,'z':3})
jparse = JsonParse("{enter:{x:{scale:'u',field:'u'},y:{scale:'v',field:'v'},stroke:{value:'blue'},strokeWidth:{value:1}}}")
JsonParse('{values:"val"}')
jstring = JSON.stringify(jparse)
toObj = JsonParse(jstring)
JsonParse(jstring)
s = 'askdjhasd'
isObject(s)
isObject(obj)
varToString = varObj => Object.keys(varObj)[0]
import {VegaSpec, data, scales as sc, axes as ax,marks as mk} from '@binarmaya/top-level-vega-spec'
import {InspectData} from '@binarmaya/parse-transform-and-inspect-vega-data'
import {table} from '@binarmaya/table-from-array-of-data'
embed = require("vega-embed@6")
sampledata = {
let initdata = await InspectData('https://webapi.bps.go.id/v1/api/list?key=09174b1e41f8ffa9ed57d7700895b6ac&model=data&domain=3100&var=1&turtahun=1&tahun=117&vervar=205')
let i = 0
let parent = []
let child = {}
for(const [key,val] of Object.entries(initdata[0]['datacontent'])){
child['tahun'] = await initdata[0]['tahun'][i]['label']
debugger;
child['inflasi'] = val
i++
parent.push(child)
child = {}
}
return await {data:parent}
}
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.
