{"spec_id":"dashboard-metrics-tiles","library":"makie","language":"julia","code":"# anyplot.ai\n# dashboard-metrics-tiles: Real-Time Dashboard Tiles\n# Library: makie 0.21.9 | Julia 1.11.9\n# Quality: 91/100 | Created: 2026-09-01\n\nusing CairoMakie\nusing Colors\nusing Random\n\nRandom.seed!(42)\n\n# --- Theme tokens -----------------------------------------------------------\nconst THEME       = get(ENV, \"ANYPLOT_THEME\", \"light\")\nconst PAGE_BG     = THEME == \"light\" ? colorant\"#FAF8F1\" : colorant\"#1A1A17\"\nconst ELEVATED_BG = THEME == \"light\" ? colorant\"#FFFDF6\" : colorant\"#242420\"\nconst INK         = THEME == \"light\" ? colorant\"#1A1A17\" : colorant\"#F0EFE8\"\nconst INK_SOFT    = THEME == \"light\" ? colorant\"#4A4A44\" : colorant\"#B8B7B0\"\n\n# Imprint palette — status colors use the semantic anchors + slot 5 (matte\n# red), since \"good / warning / critical\" is a labelled status field, not an\n# abstract category (see default-style-guide.md \"Semantic exception\").\nconst IMPRINT_GOOD    = colorant\"#009E73\"  # brand green — status: good\nconst IMPRINT_WARNING = colorant\"#DDCC77\"  # amber anchor — status: warning\nconst IMPRINT_BAD     = colorant\"#AE3030\"  # matte red — status: critical\n\n# --- Data ---------------------------------------------------------------\n# Six KPI tiles for an operations dashboard, arranged 3x2. Each tile carries\n# a current value, a 20-point recent-trend sparkline, and a change indicator\n# relative to the prior period.\nmetric_names   = [\"CPU Usage\", \"Memory Usage\", \"Response Time\", \"Error Rate\", \"Throughput\", \"Disk I/O\"]\nvalue_labels   = [\"45%\", \"72%\", \"120 ms\", \"2.3%\", \"1,450 req/s\", \"68%\"]\nbase_values    = [50.0, 65.0, 140.0, 1.5, 1350.0, 63.0]\nchange_percent = [-5.2, 8.4, -15.3, 12.1, 6.7, 3.1]\nstatuses       = [\"good\", \"warning\", \"good\", \"critical\", \"good\", \"warning\"]\nfavorable_up   = [false, false, false, false, true, false]  # true: rising is favorable for this metric\n\nn_points  = 20\nhistories = Vector{Vector{Float64}}(undef, length(metric_names))\nfor i in eachindex(metric_names)\n    drift = range(0.0, change_percent[i] / 100; length = n_points)\n    noise = randn(n_points) .* (0.035 * base_values[i])\n    histories[i] = base_values[i] .* (1.0 .+ drift) .+ noise\nend\n\n# --- Plot -----------------------------------------------------------------\ntitle_text = \"dashboard-metrics-tiles · julia · makie · anyplot.ai\"\n\nfig = Figure(\n    resolution = (1600, 900),\n    fontsize   = 14,\n    backgroundcolor = PAGE_BG,\n    figure_padding = 36,\n)\n\nLabel(fig[1, 1:3], title_text; fontsize = 22, color = INK, font = :bold, halign = :center)\n\nn_cols = 3\nfor i in eachindex(metric_names)\n    row = 2 + div(i - 1, n_cols)\n    col = 1 + mod(i - 1, n_cols)\n\n    status = statuses[i]\n    accent = status == \"good\" ? IMPRINT_GOOD : status == \"warning\" ? IMPRINT_WARNING : IMPRINT_BAD\n    rising = change_percent[i] >= 0\n    favorable = rising == favorable_up[i]\n    change_color = favorable ? IMPRINT_GOOD : IMPRINT_BAD\n    change_label = (rising ? \"+\" : \"\") * string(round(change_percent[i]; digits = 1)) * \"%\"\n    arrow_marker = rising ? :utriangle : :dtriangle\n\n    ax = Axis(\n        fig[row, col];\n        limits = (0, 1, 0, 1),\n        backgroundcolor = ELEVATED_BG,\n        topspinevisible = true,\n        rightspinevisible = true,\n        leftspinevisible = true,\n        bottomspinevisible = true,\n        topspinecolor = accent,\n        rightspinecolor = accent,\n        leftspinecolor = accent,\n        bottomspinecolor = accent,\n        spinewidth = 2.5,\n    )\n    hidedecorations!(ax)\n\n    # Value + metric name\n    text!(ax, 0.06, 0.92; text = value_labels[i], fontsize = 38, color = INK,\n          font = :bold, align = (:left, :top))\n    text!(ax, 0.06, 0.60; text = metric_names[i], fontsize = 16, color = INK_SOFT,\n          align = (:left, :top))\n\n    # Change indicator: triangle marker + signed percentage\n    scatter!(ax, [0.80], [0.90]; marker = arrow_marker, markersize = 16,\n             color = change_color, strokewidth = 0)\n    text!(ax, 0.85, 0.90; text = change_label, fontsize = 17, color = change_color,\n          font = :bold, align = (:left, :center))\n\n    # Sparkline in the lower band of the tile\n    history = histories[i]\n    lo, hi = extrema(history)\n    normed = (history .- lo) ./ (hi - lo)\n    xs = range(0.06, 0.94; length = n_points)\n    ys = 0.08 .+ 0.22 .* normed\n    lines!(ax, xs, ys; color = accent, linewidth = 3)\nend\n\ncolgap!(fig.layout, 28)\nrowgap!(fig.layout, 24)\nrowsize!(fig.layout, 1, Auto())\n\n# --- Save -------------------------------------------------------------------\nsave(\"plot-$(THEME).png\", fig; px_per_unit = 2)\n"}