egg/DashBoard
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity
Files
5b358d71c1bd2344ec57c0c50c65c69cf42893de
DashBoard/openspec/changes/archive/2026-02-13-query-tool-rewrite/specs/timeline-chart/spec.md
egg 5b358d71c1 feat(query-tool): rewrite frontend with ECharts tree, multi-select, and modular composables 
Replace the monolithic useQueryToolData composable and nested Vue component tree
with a modular architecture: useLotResolve, useLotLineage, useLotDetail, and
useEquipmentQuery. Introduce ECharts TreeChart (LR orthogonal layout) for lot
lineage visualization with multi-select support, subtree expansion, zoom/pan,
and serial number normalization. Add unified LineageEngine backend with split
descendant traversal and leaf serial number queries. Archive the query-tool-rewrite
openspec change and sync delta specs to main.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-13 15:25:00 +08:00

2.6 KiB
Raw Blame History

ADDED Requirements

Requirement: TimelineChart component SHALL render configurable Gantt-style timelines

A shared TimelineChart component SHALL accept structured track/event data and render a horizontal timeline with SVG/CSS.

Scenario: Basic track rendering

  • WHEN TimelineChart receives tracks with bars (each bar having start time, end time, type)
  • THEN it SHALL render a horizontal time axis and one row per track
  • THEN each bar SHALL be positioned proportionally along the time axis with width reflecting duration

Scenario: Color mapping

  • WHEN bars have different type values
  • THEN each type SHALL be rendered with a color from the provided colorMap prop
  • THEN a legend SHALL be displayed showing type-to-color mapping

Scenario: Event markers

  • WHEN the component receives events (point-in-time markers)
  • THEN each event SHALL render as a marker (diamond/triangle icon) at the corresponding time position on its track
  • THEN hovering over a marker SHALL display a tooltip with the event label and details

Scenario: Time axis adapts to data range

  • WHEN the timeline data spans hours
  • THEN the time axis SHALL show hour ticks (e.g., 06:00, 07:00, ...)
  • WHEN the timeline data spans days
  • THEN the time axis SHALL show date ticks (e.g., 02-10, 02-11, ...)

Scenario: Horizontal scroll for long timelines

  • WHEN the timeline data exceeds the visible width
  • THEN the component SHALL support horizontal scrolling
  • THEN track labels on the left SHALL remain fixed (sticky) during scroll

Scenario: Bar tooltip on hover

  • WHEN the user hovers over a bar segment
  • THEN a tooltip SHALL display the bar's label, start time, end time, and duration

Requirement: TimelineChart SHALL support multi-layer overlapping tracks

The component SHALL support rendering multiple bar layers on a single track row (e.g., status bars behind lot bars).

Scenario: Overlapping layers

  • WHEN a track has multiple layers (e.g., statusBars and lotBars)
  • THEN background layer bars SHALL render behind foreground layer bars
  • THEN both layers SHALL be visible (foreground bars shorter in height or semi-transparent)

Requirement: TimelineChart SHALL have no external charting dependencies

The component SHALL be implemented using only SVG elements and CSS, with no external charting library.

Scenario: Zero additional dependencies

  • WHEN the TimelineChart component is used
  • THEN it SHALL NOT require any npm package not already in the project
  • THEN rendering SHALL use inline SVG elements within the Vue template