Status Tracker

A status tracker: a run of steps as a row of blocks, each in the colour of what was the case at it. The days a service was up, the builds that passed: where the bad ones are is seen at a glance, and which they were is read by pointing at them.

import com.pantrixui.components.chart.statustracker.PantrixStatusTracker

• The block pointed at. The name of the block under the pointer, or of the one that is touched, is written under the row beside its colour; the others are drawn faint. With a finger, another touch on the block that is pointed at lets go of it.
• The line under the row. With caption off the name is not written. The line's room is kept whether a block is pointed at or not: the row does not move.
• Pressing. onSelect gives the place of the block that is pressed, counted from nought.
• State. The block that is pointed at is kept in ChartState, as a selection whose x is the block's place.
• Direction. In a language read from right to left the first block stands at the right, and the arrows go the way they point.
• Export. export puts a button over the chart: the chart is made, as it is on the screen and without the part that is pointed at or its tooltip, into a PNG, an SVG or a PDF file and handed to the app.
• Automation. StatusTracker_<tagKey>; the row .Blocks, the blocks .Block_<number>, the line under the row .Caption.

Examples

The days of a service

The last thirty days of a service: up on the green days, slow on the yellow ones, down on the red one; the grey day has no record.

Move the pointer over a block, or touch it: the day's name is written under the row and the other days fade. On the keyboard the arrows go from day to day.

PantrixStatusTracker(
    blocks = uptimeDays(),
    description = "Status of the last thirty days",
    tagKey = "plain"
)

@Composable
private fun uptimeDays(): List<StatusBlock> {
    val colors = PantrixTheme.colors
    return List(30) { index ->
        val day = "Day ${index + 1}"
        when (index) {
            7, 21 -> StatusBlock("$day: Slow", colors.warning.color)
            13 -> StatusBlock("$day: Outage", colors.danger.color)
            26 -> StatusBlock("$day: No record")
            else -> StatusBlock("$day: No problems", colors.success.color)
        }
    }
}

Pressing a block

onSelect gives the place of the block that is pressed: press a day, or go to one with the keyboard and press Enter, and the line under the card writes what was pressed. The line of the name under the row is off here (caption = false).

val report = LocalExampleEvents.current
val days = uptimeDays()
PantrixStatusTracker(
    blocks = days,
    caption = false,
    description = "Status of the last thirty days",
    onSelect = { report(days[it].name) },
    tagKey = "pressed"
)

@Composable
private fun uptimeDays(): List<StatusBlock> {
    val colors = PantrixTheme.colors
    return List(30) { index ->
        val day = "Day ${index + 1}"
        when (index) {
            7, 21 -> StatusBlock("$day: Slow", colors.warning.color)
            13 -> StatusBlock("$day: Outage", colors.danger.color)
            26 -> StatusBlock("$day: No record")
            else -> StatusBlock("$day: No problems", colors.success.color)
        }
    }
}

Your own sizes

A row's own sizes: taller blocks (trackerHeight), wider gaps between them (barGap) and sharp corners (barRadius). A field that is not given stays the theme's.

PantrixStatusTracker(
    blocks = uptimeDays().take(14),
    description = "Status of the last two weeks",
    style = ChartStyle(trackerHeight = 48.dp, barGap = 6.dp, barRadius = 0.dp),
    tagKey = "own_look"
)

@Composable
private fun uptimeDays(): List<StatusBlock> {
    val colors = PantrixTheme.colors
    return List(30) { index ->
        val day = "Day ${index + 1}"
        when (index) {
            7, 21 -> StatusBlock("$day: Slow", colors.warning.color)
            13 -> StatusBlock("$day: Outage", colors.danger.color)
            26 -> StatusBlock("$day: No record")
            else -> StatusBlock("$day: No problems", colors.success.color)
        }
    }
}

Export

export = ChartExport(...) puts an export button over the chart: press it and choose the kind (PNG, SVG or PDF). The chart makes the file and hands it to onExport; below, its name and size show, and a PNG's picture, and "Save the file" hands it over in the platform's way.

The file has the row of blocks; the line under it, which names the block that is pointed at, is not in it.

var file by remember { mutableStateOf<ChartExportFile?>(null) }
PantrixStatusTracker(
    blocks = uptimeDays(),
    description = "Status of the last thirty days",
    tagKey = "exported",
    export = ChartExport(fileName = "last-thirty-days") { file = it }
)
ExportedFile(file, tagKey = "exported")

@Composable
private fun uptimeDays(): List<StatusBlock> {
    val colors = PantrixTheme.colors
    return List(30) { index ->
        val day = "Day ${index + 1}"
        when (index) {
            7, 21 -> StatusBlock("$day: Slow", colors.warning.color)
            13 -> StatusBlock("$day: Outage", colors.danger.color)
            26 -> StatusBlock("$day: No record")
            else -> StatusBlock("$day: No problems", colors.success.color)
        }
    }
}

API

blocks

A status tracker: a run of steps as a row of blocks, each in the colour of what was the case at it. The days a service was up, the builds that passed: where the bad ones are is seen at a glance, and which they were is read by pointing at them.

ChartStyle

A chart's geometry: how tall it is where nothing says, how thick its lines and how large its marks are, and the room between its parts; and whether its fills have textures besides their colours.

ChartColors

What a chart is painted with, for a chart that does not take the theme's colours: a colour that is set is used, and one that is left out stays the theme's.

Accessibility

• Keyboard. The row is one stop for Tab: the arrows go from block to block and stop at the ends, Home and End go to the first and the last block, Escape lets go, Enter and Space press the block that is pointed at.
• Screen reader. The row says its description, then each block by its name. A row of more than two hundred blocks is told by its description alone.