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.* 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 startDates = listOf(Date(), Date(), Date()) val steps = listOf(timeSecond, timeHour, timeDay) var secondsCounter = 0 val cellWidths = listOf(200.0, 140.0, 140.0, 140.0, 140.0) val cellHeight = 30.0 val scale = ScalesChromatic.Discrete.category10<Date> { domain = startDates } val startYOffset = 15.0 val tableRows = formats.size val tableColumns = startDates.size + 2 val vizWidth = cellWidths.sum() val vizHeight = (formats.size) * cellHeight fun main() { viz { size = size(vizWidth, vizHeight) drawTable(this) val columns = startDates.mapIndexed { dateIndex, date -> formats.mapIndexed { formatIndex, formatSpec -> text { x = 70.0 + cellWidths.subList(0, dateIndex + 2).sum() y = startYOffset + (formatIndex * cellHeight) textColor = scale(date) textAlign = textAlign(TextHAlign.MIDDLE, TextVAlign.MIDDLE) textContent = format(formatSpec.spec)(date) } } } animation { timerInMs: Double -> // update one time per second if (timerInMs / 1000 > secondsCounter) { secondsCounter++ startDates.forEachIndexed { index, startDate -> columns[index].forEachIndexed { rowIndex, text -> text.textContent = format(formats[rowIndex].spec)(steps[index].offset(startDate, secondsCounter.toLong())) } } } } }.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}" } } } }
pierre avatar

Sketch created by

pierre