deployment-timeline

Kész, scoped React idővonal (nem írja felül a host app globális stílusát).

Telepítés

npm install deployment-timeline

Peer: react, react-dom (18+)

Használat

import DeploymentTimeline from "deployment-timeline";

export function Page() {
  return (
    <div style={{ height: "100vh" }}>
      <DeploymentTimeline
        layout="fill"
        deployments={deployments}
        requests={requests}
        freezeWindows={freezeWindows}
        projectGroups={[
          { id: "platform", label: "Platform", projects: ["Core API", "Web UI"] },
        ]}
        theme={{
          primary: "#f59e0b",
          deployment: "#22c55e",
          request: "#eab308",
        }}
      />
    </div>
  );
}

Funkciók (0.3)

• Szűrő popup (OK alkalmazza, bezár)
• Projekt csoport legördülő
• Keresés minden mezőben, előző/következő találat
• Görgő zoom az időtengelyen
• Tooltip: verzió / projekt név (nem „deployment”)
• Státusz szín: telepítés / kérelem / sikeres / sikertelen
• Projekt összesítő a jobb panelen (kattints a sor nevére)
• theme prop — primary, deployment, request, stb.
• layout="auto" — a host oldal scrollozhat

Bővítés / forrás

A forrás TSX: GitHub repo src/. npm-en csak dist/ (bundle).

import {
  DeploymentTimelineChart,
  buildTimelineItems,
  buildSearchMatches,
  paletteToCssVars,
} from "deployment-timeline";

Fejlesztés

npm install
npm run dev
npm run build:lib
npm publish --otp=...