Time Formats table
import io.data2viz.color.*
import io.data2viz.geom.*
import io.data2viz.math.*
import io.data2viz.scale.*
import io.data2viz.viz.*
import io.data2viz.time.*
import io.data2viz.timeFormat.*
import kotlinx.datetime.*
data class Formatting(val name:String, val spec:String)
val formats = listOf(
Formatting("Raw date", "%d.%m.%Y, %H:%M:%S"),
Formatting("Hour:Minute:Second", "%H:%M:%S"),
Formatting("Day.Month.Year", "%d.%m.%Y"),
Formatting("Locale date, locale time", "%x, %X"),
Formatting("Month/Day/Year (no \"0\" padding)", "%-m/%-d/%Y"),
Formatting("AM / PM indicator", "%-I:%M:%S %p"),
Formatting("Abbreviated weekday name", "%a"),
Formatting("Full month name", "%B")
)
val cellWidths = listOf(200.0, 140.0, 140.0)
val cellHeight = 30.0
val startYOffset = 15.0
val tableRows = formats.size
val tableColumns = 3
val vizWidth = cellWidths.sum()
val vizHeight = (formats.size) * cellHeight
fun main() {
viz {
size = size(vizWidth, vizHeight)
drawTable(this)
val textsDate = formats.mapIndexed { index, formatSpec ->
text {
x = 410.0
y = startYOffset + (index * cellHeight)
textAlign = textAlign(TextHAlign.MIDDLE, TextVAlign.MIDDLE)
textColor = Colors.Web.black
textContent = format(formatSpec.spec)(Clock.System.now())
}
}
animation {
textsDate.forEachIndexed { index, text ->
val curDate = Clock.System.now()
text.textContent = format(formats[index].spec)(curDate)
}
}
}.bindRendererOnNewCanvas()
}
private fun drawTable(viz:Viz) {
viz.apply {
// TABLE LAYOUT
for (i in 0..tableRows) {
line {
x1 = 0.0
x2 = vizWidth
y1 = i * cellHeight - 1
y2 = i * cellHeight - 1
}
}
for (i in 0..tableColumns) {
line {
x1 = cellWidths.subList(0, i).sum() - 1
x2 = cellWidths.subList(0, i).sum() - 1
y1 = 0.0
y2 = vizHeight
}
}
// ROW HEADERS
formats.mapIndexed { formatIndex, format ->
text {
x = 100.0
y = startYOffset + (formatIndex * cellHeight)
textAlign = textAlign(TextHAlign.MIDDLE, TextVAlign.MIDDLE)
textContent = "${format.name}"
fontWeight = FontWeight.BOLD
}
text {
x = 270.0
y = startYOffset + (formatIndex * cellHeight)
textAlign = textAlign(TextHAlign.MIDDLE, TextVAlign.MIDDLE)
textContent = "${format.spec}"
}
}
}
}
Sketch created by
pierre
comments