Gantt

/**
 * Gantt's pinned demo state (CSP-D3).
 *
 * Deliberately overlapping spans: `start`/`end` are quarter fractions on the
 * default four-column axis, and every pair of adjacent rows shares part of
 * its range, so the demo proves each row draws its own independent track
 * rather than a single shared timeline. `today` sits inside that overlap
 * (2.35 of 4 = 58.75%) so the marker rule lands mid-chart, not on a divider.
 *
 * `bar`, not `color`: the fixture set forbids a `color` key (it is one of the
 * theme-coupled names the proof test rejects), while `GanttRow`'s own field
 * is called `color`. `ganttRows()` below does that one rename, once, instead
 * of five demo files each spreading their own mapping.
 */
const ganttFixture = {
  id: "gantt",
  labelHeading: "Workstream",
  today: 2.35,
  rows: [
    { name: "Ledger v2 rewrite", sub: "platform", start: 0, end: 1.9, bar: "var(--accent)" },
    { name: "Billing migration", sub: "payments", start: 1.2, end: 2.8, bar: "var(--vs-info)" },
    { name: "Fraud rules engine", sub: "risk", start: 2.4, end: 4, bar: "var(--vs-warning)" },
    { name: "Partner API GA", sub: "integrations", start: 0.6, end: 3.2, bar: "var(--vs-success)" },
  ],
} satisfies {
  id: string;
  labelHeading: string;
  today: number;
  rows: { name: string; sub: string; start: number; end: number; bar: string }[];
};
 
/** Fixture rows in the shape every adapter's `rows` prop takes. */
function ganttRows(): {
  name: string;
  sub: string;
  start: number;
  end: number;
  color: string;
}[] {
  return ganttFixture.rows.map(({ bar, ...row }) => ({ ...row, color: bar }));
}
 
import { Gantt } from "@grassroot/ui-react/advanced";
 
export default function GanttDemo() {
  return (
    <div className="w-full min-w-0">
      <Gantt
        rows={ganttRows()}
        today={ganttFixture.today}
        labelHeading={ganttFixture.labelHeading}
      />
    </div>
  );
}

<script setup lang="ts">
/**
 * Gantt's pinned demo state (CSP-D3).
 *
 * Deliberately overlapping spans: `start`/`end` are quarter fractions on the
 * default four-column axis, and every pair of adjacent rows shares part of
 * its range, so the demo proves each row draws its own independent track
 * rather than a single shared timeline. `today` sits inside that overlap
 * (2.35 of 4 = 58.75%) so the marker rule lands mid-chart, not on a divider.
 *
 * `bar`, not `color`: the fixture set forbids a `color` key (it is one of the
 * theme-coupled names the proof test rejects), while `GanttRow`'s own field
 * is called `color`. `ganttRows()` below does that one rename, once, instead
 * of five demo files each spreading their own mapping.
 */
const ganttFixture = {
  id: "gantt",
  labelHeading: "Workstream",
  today: 2.35,
  rows: [
    { name: "Ledger v2 rewrite", sub: "platform", start: 0, end: 1.9, bar: "var(--accent)" },
    { name: "Billing migration", sub: "payments", start: 1.2, end: 2.8, bar: "var(--vs-info)" },
    { name: "Fraud rules engine", sub: "risk", start: 2.4, end: 4, bar: "var(--vs-warning)" },
    { name: "Partner API GA", sub: "integrations", start: 0.6, end: 3.2, bar: "var(--vs-success)" },
  ],
} satisfies {
  id: string;
  labelHeading: string;
  today: number;
  rows: { name: string; sub: string; start: number; end: number; bar: string }[];
};
 
/** Fixture rows in the shape every adapter's `rows` prop takes. */
function ganttRows(): {
  name: string;
  sub: string;
  start: number;
  end: number;
  color: string;
}[] {
  return ganttFixture.rows.map(({ bar, ...row }) => ({ ...row, color: bar }));
}
 
import { Gantt } from "@grassroot/ui-vue";
const rows = ganttRows();
</script>
 
<template>
  <div class="w-full min-w-0">
    <Gantt :rows="rows" :today="ganttFixture.today" :label-heading="ganttFixture.labelHeading" />
  </div>
</template>

import { Component } from "@angular/core";
/**
 * Gantt's pinned demo state (CSP-D3).
 *
 * Deliberately overlapping spans: `start`/`end` are quarter fractions on the
 * default four-column axis, and every pair of adjacent rows shares part of
 * its range, so the demo proves each row draws its own independent track
 * rather than a single shared timeline. `today` sits inside that overlap
 * (2.35 of 4 = 58.75%) so the marker rule lands mid-chart, not on a divider.
 *
 * `bar`, not `color`: the fixture set forbids a `color` key (it is one of the
 * theme-coupled names the proof test rejects), while `GanttRow`'s own field
 * is called `color`. `ganttRows()` below does that one rename, once, instead
 * of five demo files each spreading their own mapping.
 */
const ganttFixture = {
  id: "gantt",
  labelHeading: "Workstream",
  today: 2.35,
  rows: [
    { name: "Ledger v2 rewrite", sub: "platform", start: 0, end: 1.9, bar: "var(--accent)" },
    { name: "Billing migration", sub: "payments", start: 1.2, end: 2.8, bar: "var(--vs-info)" },
    { name: "Fraud rules engine", sub: "risk", start: 2.4, end: 4, bar: "var(--vs-warning)" },
    { name: "Partner API GA", sub: "integrations", start: 0.6, end: 3.2, bar: "var(--vs-success)" },
  ],
} satisfies {
  id: string;
  labelHeading: string;
  today: number;
  rows: { name: string; sub: string; start: number; end: number; bar: string }[];
};
 
/** Fixture rows in the shape every adapter's `rows` prop takes. */
function ganttRows(): {
  name: string;
  sub: string;
  start: number;
  end: number;
  color: string;
}[] {
  return ganttFixture.rows.map(({ bar, ...row }) => ({ ...row, color: bar }));
}
 
import { GrassrootGantt } from "@grassroot/ui-angular";
 
// Every input is a `[property]` binding, never a static attribute — Angular
// leaves static template attributes on the host element in the rendered DOM,
// where the other four frameworks have nothing.
@Component({
  selector: "app-gantt-demo",
  standalone: true,
  imports: [GrassrootGantt],
  host: { style: "display: contents" },
  template: `
    <div class="w-full min-w-0">
      <grassroot-gantt [rows]="rows" [today]="today" [labelHeading]="labelHeading" />
    </div>
  `,
})
export class GanttDemoComponent {
  protected readonly rows = ganttRows();
  protected readonly today = ganttFixture.today;
  protected readonly labelHeading = ganttFixture.labelHeading;
}
 
export default GanttDemoComponent;

<script lang="ts">
  /**
   * Gantt's pinned demo state (CSP-D3).
   *
   * Deliberately overlapping spans: `start`/`end` are quarter fractions on the
   * default four-column axis, and every pair of adjacent rows shares part of
   * its range, so the demo proves each row draws its own independent track
   * rather than a single shared timeline. `today` sits inside that overlap
   * (2.35 of 4 = 58.75%) so the marker rule lands mid-chart, not on a divider.
   *
   * `bar`, not `color`: the fixture set forbids a `color` key (it is one of the
   * theme-coupled names the proof test rejects), while `GanttRow`'s own field
   * is called `color`. `ganttRows()` below does that one rename, once, instead
   * of five demo files each spreading their own mapping.
   */
  const ganttFixture = {
    id: "gantt",
    labelHeading: "Workstream",
    today: 2.35,
    rows: [
      { name: "Ledger v2 rewrite", sub: "platform", start: 0, end: 1.9, bar: "var(--accent)" },
      { name: "Billing migration", sub: "payments", start: 1.2, end: 2.8, bar: "var(--vs-info)" },
      { name: "Fraud rules engine", sub: "risk", start: 2.4, end: 4, bar: "var(--vs-warning)" },
      { name: "Partner API GA", sub: "integrations", start: 0.6, end: 3.2, bar: "var(--vs-success)" },
    ],
  } satisfies {
    id: string;
    labelHeading: string;
    today: number;
    rows: { name: string; sub: string; start: number; end: number; bar: string }[];
  };
 
  /** Fixture rows in the shape every adapter's `rows` prop takes. */
  function ganttRows(): {
    name: string;
    sub: string;
    start: number;
    end: number;
    color: string;
  }[] {
    return ganttFixture.rows.map(({ bar, ...row }) => ({ ...row, color: bar }));
  }
 
  import { Gantt } from "@grassroot/ui-svelte";
</script>
 
<div class="w-full min-w-0">
  <Gantt rows={ganttRows()} today={ganttFixture.today} labelHeading={ganttFixture.labelHeading} />
</div>

/** @jsxImportSource solid-js */
/**
 * Gantt's pinned demo state (CSP-D3).
 *
 * Deliberately overlapping spans: `start`/`end` are quarter fractions on the
 * default four-column axis, and every pair of adjacent rows shares part of
 * its range, so the demo proves each row draws its own independent track
 * rather than a single shared timeline. `today` sits inside that overlap
 * (2.35 of 4 = 58.75%) so the marker rule lands mid-chart, not on a divider.
 *
 * `bar`, not `color`: the fixture set forbids a `color` key (it is one of the
 * theme-coupled names the proof test rejects), while `GanttRow`'s own field
 * is called `color`. `ganttRows()` below does that one rename, once, instead
 * of five demo files each spreading their own mapping.
 */
const ganttFixture = {
  id: "gantt",
  labelHeading: "Workstream",
  today: 2.35,
  rows: [
    { name: "Ledger v2 rewrite", sub: "platform", start: 0, end: 1.9, bar: "var(--accent)" },
    { name: "Billing migration", sub: "payments", start: 1.2, end: 2.8, bar: "var(--vs-info)" },
    { name: "Fraud rules engine", sub: "risk", start: 2.4, end: 4, bar: "var(--vs-warning)" },
    { name: "Partner API GA", sub: "integrations", start: 0.6, end: 3.2, bar: "var(--vs-success)" },
  ],
} satisfies {
  id: string;
  labelHeading: string;
  today: number;
  rows: { name: string; sub: string; start: number; end: number; bar: string }[];
};
 
/** Fixture rows in the shape every adapter's `rows` prop takes. */
function ganttRows(): {
  name: string;
  sub: string;
  start: number;
  end: number;
  color: string;
}[] {
  return ganttFixture.rows.map(({ bar, ...row }) => ({ ...row, color: bar }));
}
 
import { Gantt } from "@grassroot/ui-solid";
 
export default function GanttDemo() {
  return (
    <div class="w-full min-w-0">
      <Gantt
        rows={ganttRows()}
        today={ganttFixture.today}
        labelHeading={ganttFixture.labelHeading}
      />
    </div>
  );
}