Use external variable in a decorator lambda
import io.data2viz.charts.*
import io.data2viz.charts.dimension.*
import io.data2viz.charts.chart.*
import io.data2viz.charts.chart.mark.*
import io.data2viz.charts.viz.*
import io.data2viz.charts.core.*
import io.data2viz.charts.core.Zoom
import io.data2viz.charts.core.SelectionMode
import io.data2viz.charts.core.Datum
import io.data2viz.charts.layout.*
import io.data2viz.geom.*
import io.data2viz.color.*
import io.data2viz.math.*
import kotlin.random.Random
import kotlinx.browser.document
import org.w3c.dom.*
val numPoint = 200
val randomPoints = (1 .. numPoint).map{ Point(Random.nextDouble(), Random.nextDouble()) }.sortedBy { it.x }
val chartWidth = 700.0
val chartHeight = 500.0
private var displayWidth = chartWidth
private var displayHeight = chartHeight
lateinit var myChart: Chart<Point>
var zoom = Zoom.IDENTITY
fun main() {
var myValue = 1
// Creating a UI element on top of page, we'll use it to display information
val button1 = document.createElement("button")
button1.innerHTML = "blue"
button1.addEventListener("click", {
myValue = 1
myChart.pan(0.pct, 0.pct)
})
document.body!!.appendChild(button1)
// Creating a UI element on top of page, we'll use it to display information
val button2 = document.createElement("button")
button2.innerHTML = "red"
button2.addEventListener("click", {
myValue = 2
myChart.pan(0.pct, 0.pct)
})
document.body!!.appendChild(button2)
val vc = newVizContainer().apply {
size = Size(chartWidth, chartHeight)
}
myChart = vc.chart(randomPoints) {
config {
// Disable user-input highlight & selection from the chart
events {
zoomMode = ZoomMode.XY
panMode = PanMode.XY
selectionMode = SelectionMode.None
highlightMode = HighlightMode.None
}
// Display a red cursor
cursor {
show = true
strokeColor = Colors.Web.red
}
}
val xPosition = quantitative( { domain.x } )
val yPosition = quantitative( { domain.y } )
plot(xPosition, yPosition) {
markDecorator = { datum, position, drawingZone ->
if (myValue == 1) defaultMarkDecorator(datum, position, drawingZone)
else {
drawingZone.rect {
x = position.x - 2.0
y = position.y - 2.0
width = 4.0
height = 4.0
fill = Colors.Web.red
}
}
}
}
}
}
Sketch created by
pierre
comments