{"spec_id":"dashboard-metrics-tiles","library":"matplotlib","language":"python","code":"\"\"\" anyplot.ai\ndashboard-metrics-tiles: Real-Time Dashboard Tiles\nLibrary: matplotlib 3.10.9 | Python 3.13.13\nQuality: 90/100 | Updated: 2026-05-21\n\"\"\"\n\nimport os\n\nimport matplotlib.pyplot as plt\nimport numpy as np\n\n\n# Theme tokens\nTHEME = os.getenv(\"ANYPLOT_THEME\", \"light\")\nPAGE_BG = \"#FAF8F1\" if THEME == \"light\" else \"#1A1A17\"\nELEVATED_BG = \"#FFFDF6\" if THEME == \"light\" else \"#242420\"\nINK = \"#1A1A17\" if THEME == \"light\" else \"#F0EFE8\"\nINK_SOFT = \"#4A4A44\" if THEME == \"light\" else \"#B8B7B0\"\n\n# Status colors — imprint semantic anchors (green / amber / red)\nSTATUS_COLORS = {\"good\": \"#009E73\", \"warning\": \"#DDCC77\", \"critical\": \"#AE3030\"}\nSTATUS_LABELS = {\"good\": \"GOOD\", \"warning\": \"WARNING\", \"critical\": \"CRITICAL\"}\n\n# Data\nnp.random.seed(42)\nmetrics = [\n    {\n        \"name\": \"CPU Usage\",\n        \"value\": 45,\n        \"unit\": \"%\",\n        \"history\": np.cumsum(np.random.randn(30) * 2) + 50,\n        \"change\": -5.2,\n        \"status\": \"good\",\n    },\n    {\n        \"name\": \"Memory\",\n        \"value\": 72,\n        \"unit\": \"%\",\n        \"history\": np.cumsum(np.random.randn(30) * 1.5) + 70,\n        \"change\": 8.1,\n        \"status\": \"warning\",\n    },\n    {\n        \"name\": \"Response Time\",\n        \"value\": 120,\n        \"unit\": \"ms\",\n        \"history\": np.cumsum(np.random.randn(30) * 10) + 130,\n        \"change\": -15.3,\n        \"status\": \"good\",\n    },\n    {\n        \"name\": \"Requests/s\",\n        \"value\": 2450,\n        \"unit\": \"\",\n        \"history\": np.cumsum(np.random.randn(30) * 50) + 2400,\n        \"change\": 12.7,\n        \"status\": \"good\",\n    },\n    {\n        \"name\": \"Error Rate\",\n        \"value\": 2.3,\n        \"unit\": \"%\",\n        \"history\": np.cumsum(np.random.randn(30) * 0.3) + 2,\n        \"change\": 45.0,\n        \"status\": \"critical\",\n    },\n    {\n        \"name\": \"Disk I/O\",\n        \"value\": 156,\n        \"unit\": \"MB/s\",\n        \"history\": np.cumsum(np.random.randn(30) * 8) + 150,\n        \"change\": -3.8,\n        \"status\": \"good\",\n    },\n]\n\n# Plot — 3×2 grid of dashboard tiles\nfig, axes = plt.subplots(2, 3, figsize=(8, 4.5), dpi=400, facecolor=PAGE_BG)\nfig.subplots_adjust(left=0.04, right=0.96, top=0.88, bottom=0.04, wspace=0.18, hspace=0.25)\n\nfig.suptitle(\n    \"dashboard-metrics-tiles · python · matplotlib · anyplot.ai\", fontsize=12, fontweight=\"medium\", color=INK, y=0.96\n)\n\nfor ax, metric in zip(axes.flat, metrics, strict=True):\n    ax.set_facecolor(ELEVATED_BG)\n    for spine in ax.spines.values():\n        spine.set_color(INK_SOFT)\n        spine.set_linewidth(0.8)\n    ax.set_xticks([])\n    ax.set_yticks([])\n\n    status_color = STATUS_COLORS[metric[\"status\"]]\n\n    # Status bar at top with accessibility text label\n    status_ax = ax.inset_axes([0, 0.91, 1, 0.09])\n    status_ax.set_facecolor(status_color)\n    status_ax.set_xticks([])\n    status_ax.set_yticks([])\n    for spine in status_ax.spines.values():\n        spine.set_visible(False)\n    status_ax.text(\n        0.5,\n        0.5,\n        STATUS_LABELS[metric[\"status\"]],\n        ha=\"center\",\n        va=\"center\",\n        fontsize=7,\n        fontweight=\"bold\",\n        color=\"white\",\n        transform=status_ax.transAxes,\n    )\n\n    # Metric name\n    ax.text(\n        0.5,\n        0.83,\n        metric[\"name\"],\n        ha=\"center\",\n        va=\"top\",\n        fontsize=10,\n        fontweight=\"bold\",\n        color=INK,\n        transform=ax.transAxes,\n    )\n\n    # Main value — prominent display\n    value_str = f\"{metric['value']}{metric['unit']}\"\n    ax.text(\n        0.5, 0.64, value_str, ha=\"center\", va=\"top\", fontsize=16, fontweight=\"bold\", color=INK, transform=ax.transAxes\n    )\n\n    # Change indicator with arrow — enlarged for better at-a-glance visibility\n    change = metric[\"change\"]\n    arrow = \"▲\" if change >= 0 else \"▼\"\n    if metric[\"name\"] in [\"Error Rate\", \"Response Time\"]:\n        change_color = STATUS_COLORS[\"good\"] if change < 0 else STATUS_COLORS[\"critical\"]\n    else:\n        change_color = STATUS_COLORS[\"good\"] if change >= 0 else STATUS_COLORS[\"critical\"]\n    ax.text(\n        0.5,\n        0.44,\n        f\"{arrow} {abs(change):.1f}%\",\n        ha=\"center\",\n        va=\"top\",\n        fontsize=12,\n        fontweight=\"bold\",\n        color=change_color,\n        transform=ax.transAxes,\n    )\n\n    # Sparkline\n    sparkline_ax = ax.inset_axes([0.08, 0.05, 0.84, 0.26])\n    sparkline_ax.set_facecolor(\"none\")\n    history = metric[\"history\"]\n    x_vals = range(len(history))\n    sparkline_ax.fill_between(x_vals, history, alpha=0.3, color=status_color)\n    sparkline_ax.plot(x_vals, history, linewidth=2.0, color=status_color)\n    sparkline_ax.set_xlim(0, len(history) - 1)\n    y_range = max(history) - min(history)\n    sparkline_ax.set_ylim(min(history) - 0.1 * y_range, max(history) + 0.1 * y_range)\n    sparkline_ax.axis(\"off\")\n\n# Save\nplt.savefig(f\"plot-{THEME}.png\", dpi=400, facecolor=PAGE_BG)\n"}