58 lines
1.5 KiB
Nim
58 lines
1.5 KiB
Nim
import karax / [kbase, vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils, jjson]
|
|
|
|
type
|
|
Views = enum
|
|
Customers, Products
|
|
|
|
var
|
|
currentView = Customers
|
|
|
|
type
|
|
EChart* = ref object
|
|
|
|
proc echartsInit(n: Element): EChart {.importc: "echarts.init".}
|
|
proc setOption(x: EChart; option: JsonNode) {.importcpp.}
|
|
|
|
proc postRender(data: RouterData) =
|
|
if currentView == Products:
|
|
let myChart = echartsInit(kdom.getElementById("echartSection"))
|
|
# specify chart configuration item and data
|
|
let option = %*{
|
|
"title": {
|
|
"text": "ECharts entry example"
|
|
},
|
|
"tooltip": {},
|
|
"legend": {
|
|
"data": ["Sales"]
|
|
},
|
|
"xAxis": {
|
|
"data": ["shirt","cardign","chiffon shirt","pants","heels","socks"]
|
|
},
|
|
"yAxis": {},
|
|
"series": [{
|
|
"name": "Sales",
|
|
"type": "bar",
|
|
"data": [5, 20, 36, 10, 10, 20]
|
|
}]
|
|
}
|
|
myChart.setOption(option)
|
|
|
|
proc createDom(data: RouterData): VNode =
|
|
let hash = data.hashPart
|
|
if hash == cstring"#/Products": currentView = Products
|
|
else: currentView = Customers
|
|
|
|
result = buildHtml(tdiv):
|
|
ul(class = "tabs"):
|
|
for v in low(Views)..high(Views):
|
|
li:
|
|
a(href = "#/" & $v):
|
|
text cstring($v)
|
|
|
|
if currentView == Products:
|
|
tdiv(id = "echartSection", style = style((width, kstring"600px"), (height, kstring"400px")))
|
|
tdiv:
|
|
text "other section"
|
|
|
|
setRenderer createDom, "ROOT", postRender
|
|
setForeignNodeId "echartSection"
|