Edit Velocity

Name

Also known as (comma separated)

Brief definition Rate at which work is completed.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "teamName", "type": "text", "label": "Team name", "default": "Platform" }, { "id": "trend", "type": "select", "label": "Trend", "default": "improving", "options": [ "improving", "steady", "declining" ] }, { "id": "accent", "type": "color", "label": "Baseline colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "showValues", "type": "toggle", "label": "Show value labels", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"velocity{{#unless showValues}} velocity--hide-values{{/unless}}\" data-trend=\"{{trend}}\">\n <div class=\"velocity__header\">\n <span class=\"velocity__title\">{{teamName}} velocity</span>\n <span class=\"velocity__trend-label\" data-trend=\"{{trend}}\">{{trend}}</span>\n </div>\n <svg class=\"velocity__chart\" viewBox=\"0 0 260 130\" width=\"260\" height=\"130\" role=\"img\" aria-label=\"Velocity across the last five sprints, trend {{trend}}\">\n <line x1=\"4\" y1=\"110\" x2=\"256\" y2=\"110\" stroke=\"{{accent}}\" stroke-width=\"1\"></line>\n <g class=\"velocity__series velocity__series--improving\">\n <rect x=\"10\" y=\"74\" width=\"28\" height=\"36\" fill=\"#BFD9F2\"></rect><text class=\"velocity__value-text\" x=\"24\" y=\"68\" font-size=\"9\" text-anchor=\"middle\">18</text><text x=\"24\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S1</text>\n <rect x=\"58\" y=\"62\" width=\"28\" height=\"48\" fill=\"#BFD9F2\"></rect><text class=\"velocity__value-text\" x=\"72\" y=\"56\" font-size=\"9\" text-anchor=\"middle\">24</text><text x=\"72\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S2</text>\n <rect x=\"106\" y=\"50\" width=\"28\" height=\"60\" fill=\"#BFD9F2\"></rect><text class=\"velocity__value-text\" x=\"120\" y=\"44\" font-size=\"9\" text-anchor=\"middle\">30</text><text x=\"120\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S3</text>\n <rect x=\"154\" y=\"38\" width=\"28\" height=\"72\" fill=\"#A8E6C1\"></rect><text class=\"velocity__value-text\" x=\"168\" y=\"32\" font-size=\"9\" text-anchor=\"middle\">36</text><text x=\"168\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S4</text>\n <rect x=\"202\" y=\"26\" width=\"28\" height=\"84\" fill=\"#A8E6C1\"></rect><text class=\"velocity__value-text\" x=\"216\" y=\"20\" font-size=\"9\" text-anchor=\"middle\">42</text><text x=\"216\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S5</text>\n </g>\n <g class=\"velocity__series velocity__series--steady\">\n <rect x=\"10\" y=\"54\" width=\"28\" height=\"56\" fill=\"#BFD9F2\"></rect><text class=\"velocity__value-text\" x=\"24\" y=\"48\" font-size=\"9\" text-anchor=\"middle\">28</text><text x=\"24\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S1</text>\n <rect x=\"58\" y=\"48\" width=\"28\" height=\"62\" fill=\"#BFD9F2\"></rect><text class=\"velocity__value-text\" x=\"72\" y=\"42\" font-size=\"9\" text-anchor=\"middle\">31</text><text x=\"72\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S2</text>\n <rect x=\"106\" y=\"52\" width=\"28\" height=\"58\" fill=\"#BFD9F2\"></rect><text class=\"velocity__value-text\" x=\"120\" y=\"46\" font-size=\"9\" text-anchor=\"middle\">29</text><text x=\"120\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S3</text>\n <rect x=\"154\" y=\"46\" width=\"28\" height=\"64\" fill=\"#BFD9F2\"></rect><text class=\"velocity__value-text\" x=\"168\" y=\"40\" font-size=\"9\" text-anchor=\"middle\">32</text><text x=\"168\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S4</text>\n <rect x=\"202\" y=\"50\" width=\"28\" height=\"60\" fill=\"#BFD9F2\"></rect><text class=\"velocity__value-text\" x=\"216\" y=\"44\" font-size=\"9\" text-anchor=\"middle\">30</text><text x=\"216\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S5</text>\n </g>\n <g class=\"velocity__series velocity__series--declining\">\n <rect x=\"10\" y=\"42\" width=\"28\" height=\"68\" fill=\"#D9C8F0\"></rect><text class=\"velocity__value-text\" x=\"24\" y=\"36\" font-size=\"9\" text-anchor=\"middle\">34</text><text x=\"24\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S1</text>\n <rect x=\"58\" y=\"52\" width=\"28\" height=\"58\" fill=\"#D9C8F0\"></rect><text class=\"velocity__value-text\" x=\"72\" y=\"46\" font-size=\"9\" text-anchor=\"middle\">29</text><text x=\"72\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S2</text>\n <rect x=\"106\" y=\"62\" width=\"28\" height=\"48\" fill=\"#D9C8F0\"></rect><text class=\"velocity__value-text\" x=\"120\" y=\"56\" font-size=\"9\" text-anchor=\"middle\">24</text><text x=\"120\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S3</text>\n <rect x=\"154\" y=\"72\" width=\"28\" height=\"38\" fill=\"#F5C2E0\"></rect><text class=\"velocity__value-text\" x=\"168\" y=\"66\" font-size=\"9\" text-anchor=\"middle\">19</text><text x=\"168\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S4</text>\n <rect x=\"202\" y=\"82\" width=\"28\" height=\"28\" fill=\"#F5C2E0\"></rect><text class=\"velocity__value-text\" x=\"216\" y=\"76\" font-size=\"9\" text-anchor=\"middle\">14</text><text x=\"216\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S5</text>\n </g>\n </svg>\n <p class=\"velocity__summary\">\n <span class=\"velocity__summary-text velocity__summary-text--improving\">Trending up: last sprint closed at 42 points, up from 18 five sprints ago.</span>\n <span class=\"velocity__summary-text velocity__summary-text--steady\">Holding steady around 30 points per sprint for the last five sprints.</span>\n <span class=\"velocity__summary-text velocity__summary-text--declining\">Trending down: last sprint closed at 14 points, down from 34 five sprints ago.</span>\n </p>\n</div>\n<style>\n.velocity { font-family: system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 10px; max-width: 300px; box-sizing: border-box; }\n.velocity__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }\n.velocity__title { font-weight: 700; font-size: 14px; }\n.velocity__trend-label { font-size: 11px; font-weight: 700; text-transform: capitalize; padding: 2px 8px; border-radius: 999px; }\n.velocity__trend-label[data-trend=\"improving\"] { background: #A8E6C150; color: #1c5c34; }\n.velocity__trend-label[data-trend=\"steady\"] { background: #BFD9F250; color: #1a3a5c; }\n.velocity__trend-label[data-trend=\"declining\"] { background: #F5C2E050; color: #8a1050; }\n.velocity__chart { display: block; }\n.velocity__series { display: none; }\n.velocity[data-trend=\"improving\"] .velocity__series--improving { display: inline; }\n.velocity[data-trend=\"steady\"] .velocity__series--steady { display: inline; }\n.velocity[data-trend=\"declining\"] .velocity__series--declining { display: inline; }\n.velocity--hide-values .velocity__value-text { display: none; }\n.velocity__summary { margin: 8px 0 0; font-size: 12px; }\n.velocity__summary-text { display: none; }\n.velocity[data-trend=\"improving\"] .velocity__summary-text--improving { display: inline; }\n.velocity[data-trend=\"steady\"] .velocity__summary-text--steady { display: inline; }\n.velocity[data-trend=\"declining\"] .velocity__summary-text--declining { display: inline; }\n</style>", "tailwind": "<div class=\"velocity-tw{{#unless showValues}} velocity-tw--hide-values{{/unless}} font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-[10px] max-w-[300px] box-border\" data-trend=\"{{trend}}\">\n <div class=\"flex items-baseline justify-between mb-1.5\">\n <span class=\"font-bold text-sm\">{{teamName}} velocity</span>\n <span class=\"velocity-tw__trend-label text-[11px] font-bold capitalize px-2 py-0.5 rounded-full\" data-trend=\"{{trend}}\">{{trend}}</span>\n </div>\n <svg class=\"block\" viewBox=\"0 0 260 130\" width=\"260\" height=\"130\" role=\"img\" aria-label=\"Velocity across the last five sprints, trend {{trend}}\">\n <line x1=\"4\" y1=\"110\" x2=\"256\" y2=\"110\" stroke=\"{{accent}}\" stroke-width=\"1\"></line>\n <g class=\"velocity-tw__series velocity-tw__series--improving\">\n <rect x=\"10\" y=\"74\" width=\"28\" height=\"36\" fill=\"#BFD9F2\"></rect><text class=\"velocity-tw__value-text\" x=\"24\" y=\"68\" font-size=\"9\" text-anchor=\"middle\">18</text><text x=\"24\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S1</text>\n <rect x=\"58\" y=\"62\" width=\"28\" height=\"48\" fill=\"#BFD9F2\"></rect><text class=\"velocity-tw__value-text\" x=\"72\" y=\"56\" font-size=\"9\" text-anchor=\"middle\">24</text><text x=\"72\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S2</text>\n <rect x=\"106\" y=\"50\" width=\"28\" height=\"60\" fill=\"#BFD9F2\"></rect><text class=\"velocity-tw__value-text\" x=\"120\" y=\"44\" font-size=\"9\" text-anchor=\"middle\">30</text><text x=\"120\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S3</text>\n <rect x=\"154\" y=\"38\" width=\"28\" height=\"72\" fill=\"#A8E6C1\"></rect><text class=\"velocity-tw__value-text\" x=\"168\" y=\"32\" font-size=\"9\" text-anchor=\"middle\">36</text><text x=\"168\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S4</text>\n <rect x=\"202\" y=\"26\" width=\"28\" height=\"84\" fill=\"#A8E6C1\"></rect><text class=\"velocity-tw__value-text\" x=\"216\" y=\"20\" font-size=\"9\" text-anchor=\"middle\">42</text><text x=\"216\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S5</text>\n </g>\n <g class=\"velocity-tw__series velocity-tw__series--steady\">\n <rect x=\"10\" y=\"54\" width=\"28\" height=\"56\" fill=\"#BFD9F2\"></rect><text class=\"velocity-tw__value-text\" x=\"24\" y=\"48\" font-size=\"9\" text-anchor=\"middle\">28</text><text x=\"24\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S1</text>\n <rect x=\"58\" y=\"48\" width=\"28\" height=\"62\" fill=\"#BFD9F2\"></rect><text class=\"velocity-tw__value-text\" x=\"72\" y=\"42\" font-size=\"9\" text-anchor=\"middle\">31</text><text x=\"72\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S2</text>\n <rect x=\"106\" y=\"52\" width=\"28\" height=\"58\" fill=\"#BFD9F2\"></rect><text class=\"velocity-tw__value-text\" x=\"120\" y=\"46\" font-size=\"9\" text-anchor=\"middle\">29</text><text x=\"120\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S3</text>\n <rect x=\"154\" y=\"46\" width=\"28\" height=\"64\" fill=\"#BFD9F2\"></rect><text class=\"velocity-tw__value-text\" x=\"168\" y=\"40\" font-size=\"9\" text-anchor=\"middle\">32</text><text x=\"168\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S4</text>\n <rect x=\"202\" y=\"50\" width=\"28\" height=\"60\" fill=\"#BFD9F2\"></rect><text class=\"velocity-tw__value-text\" x=\"216\" y=\"44\" font-size=\"9\" text-anchor=\"middle\">30</text><text x=\"216\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S5</text>\n </g>\n <g class=\"velocity-tw__series velocity-tw__series--declining\">\n <rect x=\"10\" y=\"42\" width=\"28\" height=\"68\" fill=\"#D9C8F0\"></rect><text class=\"velocity-tw__value-text\" x=\"24\" y=\"36\" font-size=\"9\" text-anchor=\"middle\">34</text><text x=\"24\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S1</text>\n <rect x=\"58\" y=\"52\" width=\"28\" height=\"58\" fill=\"#D9C8F0\"></rect><text class=\"velocity-tw__value-text\" x=\"72\" y=\"46\" font-size=\"9\" text-anchor=\"middle\">29</text><text x=\"72\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S2</text>\n <rect x=\"106\" y=\"62\" width=\"28\" height=\"48\" fill=\"#D9C8F0\"></rect><text class=\"velocity-tw__value-text\" x=\"120\" y=\"56\" font-size=\"9\" text-anchor=\"middle\">24</text><text x=\"120\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S3</text>\n <rect x=\"154\" y=\"72\" width=\"28\" height=\"38\" fill=\"#F5C2E0\"></rect><text class=\"velocity-tw__value-text\" x=\"168\" y=\"66\" font-size=\"9\" text-anchor=\"middle\">19</text><text x=\"168\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S4</text>\n <rect x=\"202\" y=\"82\" width=\"28\" height=\"28\" fill=\"#F5C2E0\"></rect><text class=\"velocity-tw__value-text\" x=\"216\" y=\"76\" font-size=\"9\" text-anchor=\"middle\">14</text><text x=\"216\" y=\"122\" font-size=\"9\" text-anchor=\"middle\">S5</text>\n </g>\n </svg>\n <p class=\"mt-2 text-xs\">\n <span class=\"velocity-tw__summary-text velocity-tw__summary-text--improving\">Trending up: last sprint closed at 42 points, up from 18 five sprints ago.</span>\n <span class=\"velocity-tw__summary-text velocity-tw__summary-text--steady\">Holding steady around 30 points per sprint for the last five sprints.</span>\n <span class=\"velocity-tw__summary-text velocity-tw__summary-text--declining\">Trending down: last sprint closed at 14 points, down from 34 five sprints ago.</span>\n </p>\n</div>\n<style>\n.velocity-tw__trend-label[data-trend=\"improving\"] { background: #A8E6C150; color: #1c5c34; }\n.velocity-tw__trend-label[data-trend=\"steady\"] { background: #BFD9F250; color: #1a3a5c; }\n.velocity-tw__trend-label[data-trend=\"declining\"] { background: #F5C2E050; color: #8a1050; }\n.velocity-tw__series { display: none; }\n.velocity-tw[data-trend=\"improving\"] .velocity-tw__series--improving { display: inline; }\n.velocity-tw[data-trend=\"steady\"] .velocity-tw__series--steady { display: inline; }\n.velocity-tw[data-trend=\"declining\"] .velocity-tw__series--declining { display: inline; }\n.velocity-tw--hide-values .velocity-tw__value-text { display: none; }\n.velocity-tw__summary-text { display: none; }\n.velocity-tw[data-trend=\"improving\"] .velocity-tw__summary-text--improving { display: inline; }\n.velocity-tw[data-trend=\"steady\"] .velocity-tw__summary-text--steady { display: inline; }\n.velocity-tw[data-trend=\"declining\"] .velocity-tw__summary-text--declining { display: inline; }\n</style>", "react": "export function Velocity({\n teamName = \"{{teamName}}\",\n trend = \"{{trend}}\",\n accent = \"{{accent}}\",\n showValues = {{showValues}},\n}) {\n const series = {\n improving: { values: [18, 24, 30, 36, 42], colors: [\"#BFD9F2\", \"#BFD9F2\", \"#BFD9F2\", \"#A8E6C1\", \"#A8E6C1\"],\n summary: \"Trending up: last sprint closed at 42 points, up from 18 five sprints ago.\" },\n steady: { values: [28, 31, 29, 32, 30], colors: [\"#BFD9F2\", \"#BFD9F2\", \"#BFD9F2\", \"#BFD9F2\", \"#BFD9F2\"],\n summary: \"Holding steady around 30 points per sprint for the last five sprints.\" },\n declining: { values: [34, 29, 24, 19, 14], colors: [\"#D9C8F0\", \"#D9C8F0\", \"#D9C8F0\", \"#F5C2E0\", \"#F5C2E0\"],\n summary: \"Trending down: last sprint closed at 14 points, down from 34 five sprints ago.\" },\n }[trend];\n const trendColor = {\n improving: { background: \"#A8E6C150\", color: \"#1c5c34\" },\n steady: { background: \"#BFD9F250\", color: \"#1a3a5c\" },\n declining: { background: \"#F5C2E050\", color: \"#8a1050\" },\n }[trend];\n const baseline = 110;\n const bars = series.values.map((v, i) => ({\n x: 10 + i * 48,\n height: v * 2,\n y: baseline - v * 2,\n value: v,\n color: series.colors[i],\n label: \"S\" + (i + 1),\n }));\n return (\n <div style={{ fontFamily: \"system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 16,\n borderRadius: 10, maxWidth: 300, boxSizing: \"border-box\" }}>\n <div style={{ display: \"flex\", alignItems: \"baseline\", justifyContent: \"space-between\", marginBottom: 6 }}>\n <span style={{ fontWeight: 700, fontSize: 14 }}>{teamName} velocity</span>\n <span style={{ fontSize: 11, fontWeight: 700, textTransform: \"capitalize\", padding: \"2px 8px\", borderRadius: 999, ...trendColor }}>{trend}</span>\n </div>\n <svg viewBox=\"0 0 260 130\" width=\"260\" height=\"130\" role=\"img\" aria-label={\"Velocity across the last five sprints, trend \" + trend} style={{ display: \"block\" }}>\n <line x1=\"4\" y1={baseline} x2=\"256\" y2={baseline} stroke={accent} strokeWidth=\"1\" />\n {bars.map((bar) => (\n <g key={bar.label}>\n <rect x={bar.x} y={bar.y} width=\"28\" height={bar.height} fill={bar.color} />\n {showValues && <text x={bar.x + 14} y={bar.y - 6} fontSize=\"9\" textAnchor=\"middle\">{bar.value}</text>}\n <text x={bar.x + 14} y=\"122\" fontSize=\"9\" textAnchor=\"middle\">{bar.label}</text>\n </g>\n ))}\n </svg>\n <p style={{ margin: \"8px 0 0\", fontSize: 12 }}>{series.summary}</p>\n </div>\n );\n}" }