Cycle-Line Charts
The cycle-line charts visualise a per-step, per-cycle detail view of force / moment signals around the currently-selected step. They are re-fetched whenever SelectedStepInfoHub pushes a new step, so the operator can zoom into one spindle revolution (or the configured cycle window) as they scrub through the mission timeline on the strip charts.
The anatomy covers four cycle-line charts in the webservice, all sharing BaseCycleLineChart.vue:
| Chart | Source Data | Notes |
|---|---|---|
| Force Cycle-Line Chart | MachiningStep.ForceToWorkpieceOnProgramCoordinate or ForceToToolOnToolRunningCoordinate |
Header dropdown picks between the two flag values; swaps the fetcher prop so BaseCycleLineChart refetches. |
| Sim Spindle Moment Cycle-Line Chart | MachiningStep.MomentsToToolAboutObservationPointOnSpindleRotationCoordinate_Nm |
Simulated moment from the physics model. |
| Sensor Spindle Moment Cycle-Line Chart | IMomentShot via MachiningProject.TimeMapping.GetShots(stepIndex) |
Sensor-measured moment. Rendered as a sibling card to the sim chart, not a twin overlay (see Deferred). |
| Dynamometer Force Cycle-Line Chart | IForceShot via TimeMapping.GetShots(stepIndex) |
Sensor-measured force. Returns empty shape when no dynamometer data. |
Key Model: MachiningProject.TimeMapping + the selected MachiningStep.
Layout
Each cycle-line chart is a card:
- Header Row
- Title label.
- Flag picker (Force chart only) —
<q-btn-dropdown>betweenForceToWorkpieceOnProgramCoordinate(default) andForceToToolOnToolRunningCoordinate.
- Body —
UplotChart.vuerendering three series (X / Y / Z channels) over a shared time axists. - Empty-state overlay — when
hasData=false(no selection, no shots), a placeholder is shown; the underlying series still carry a shape-preservingts=[0,360],xs/ys/zs=[NaN,NaN]payload so the canvas does not jump.
Behavior
- Step-driven refetch.
BaseCycleLineChartaccepts afetcher: () => Promise<CycleLineResponse>prop. OnSelectedStepInfoHub.StepChangedthe fetcher is re-invoked and the chart re-renders. - Server-resolved step. Cycle-line endpoints resolve “currently-selected step” from
LocalProjectService.ClStrip.GetSelectedPos()rather than acceptingstepIndexas a query parameter. This keeps the contract simple and aligns with the event-driven model used by the rest of the player plumbing. - Toolbar slot. The optional
#toolbarslot lets callers embed per-chart controls (e.g. the Force chart's flag picker) without subclassing.
Source Code Path
See HiNC App Anatomy for git repository links.
WPF Application Source Code Path
- Not implemented.
Web Page Application Source Code Path
HiNC-2025-webservice (Quasar CLI SPA):
wwwroot-src/src/components/player/charts/BaseCycleLineChart.vue— shared cycle-line skeleton.wwwroot-src/src/components/player/charts/UplotChart.vue— uplot wrapper (shared with strip charts).wwwroot-src/src/components/player/charts/ForceCycleLineChart.vue— force cycle-line chart with flag picker.wwwroot-src/src/components/player/charts/SimSpindleMomentCycleLineChart.vue— simulated spindle moment.wwwroot-src/src/components/player/charts/SensorSpindleMomentCycleLineChart.vue— sensor-measured spindle moment.wwwroot-src/src/components/player/charts/DynamometerForceCycleLineChart.vue— dynamometer force.Players/PlayerChartsController.cs— cycle-line endpoints:GET /api/player/cycle-line/force?flag=ForceToWorkpieceOnProgramCoordinate|ForceToToolOnToolRunningCoordinateGET /api/player/cycle-line/sim-spindle-momentGET /api/player/cycle-line/sensor-spindle-momentGET /api/player/cycle-line/dynamometer-force
All four endpoints return { hasData, ts, xs, ys, zs } flattened for direct uplot consumption. Empty payloads use a shape-preserving ts=[0,360], xs/ys/zs=[NaN,NaN] fill.
Deferred
- True twin overlay (two series on one canvas) for Sim + Sensor Spindle Moment. Currently rendered as two sibling cards sharing the same chart grid, which keeps the uplot instances independent. Revisit if operators ask for overlap.
Related Pages
- Strip Charts — windowed mission-timeline charts that share the same
uplotengine and drive step selection. - Player Panel — top-level layout that hosts the charts.