Cycle Time Chart

A Rally Custom View widget that visualizes artifact cycle times as a scatter plot. Each data point represents one artifact: the x-axis shows when it reached the completed state, and the y-axis shows how long it spent in the tracked states (cycle time) in days or hours.

---

Legacy Reference

This widget is a React + TypeScript port of the CycleTimeChart ExtJS app.

	Link
Legacy source	code-viewer/dist/apps-html/cycle-time-chart-App-20260412-213615.html

---

Features

• Scatter plot — one dot per completed artifact, colored by interval period
• Multiple intervals — look back N days / weeks / months / years
• Configurable states — choose which states count toward cycle time and which state means "done"
• Percentile lines — optional 50th / 75th / 99th reference lines
• Std-deviation band — optional +/- 1 standard-deviation highlight band
• Configurable granularity — report in days or hours

---

Settings (Edit Mode)

Setting	Default	Description
Artifact Type	Story	HierarchicalRequirement, Defect, Task, or Feature
States	In-Progress,Completed	Comma-separated states that count as "in progress"
Completed State	Accepted	State that marks an artifact done
Number of Intervals	4	How many periods to look back
Interval Type	week	day / week / month / year
Granularity	day	Report cycle time in days or hours
Show Percentile Lines	true	Toggle 50 / 75 / 99th percentile lines
Show Std Deviation Band	false	Toggle the std-deviation y-axis band

---

Dev Setup

# From the monorepo root — installs and symlinks @customagile/widget-ai locally
npm install

# Start dev server (mock data, no Rally connection needed)
cd examples/cycle-time-chart
npm run dev
# → http://localhost:5175

# Live Rally data (requires ./auth.json)
# Open http://localhost:5175/?live=true

auth.json (not committed)

{
  "server": "https://rally1.rallydev.com",
  "apiKey": "_your_rally_api_key_"
}

---

Build

# Mock build (demo/UAT)
npm run build:mock

# Live build (deploy to Rally)
npm run build

Output: dist/app.js

---

What Changed vs Legacy

Aspect	Legacy (ExtJS)	This port (React)
Chart library	Highcharts (via Rally SDK)	Chart.js v4 via RallyChart
Data layer	Rally.data.lookback.SnapshotStore	queryLookback() from @customagile/widget-ai
Cycle time calculation	Lumenize TimeInStateCalculator	Native JS duration sum over state snapshots
Settings UI	Rally AppSettings panel	EditModePanel with SettingRow components
State management	ExtJS stores + events	React hooks + useWidgetSettings
Artifact type picker	rallycombobox against TypeDefinition	Static list of common types
Field picker	Dynamic rallyfieldcombobox	Fixed ScheduleState / State field selection per type