Gantt

import { Gantt } from "@grassroot/ui-react/advanced";
 
const rows = [
  { name: "Ledger v2 rewrite", sub: "platform", start: 0, end: 1.6, color: "var(--accent)" },
  { name: "Billing migration", sub: "payments", start: 1.2, end: 2.5, color: "var(--vs-success)" },
];
 
<Gantt rows={rows} today={2.45} />

<script setup lang="ts">
import { Gantt } from "@grassroot/ui-vue";
 
const rows = [
  { name: "Ledger v2 rewrite", sub: "platform", start: 0, end: 1.6, color: "var(--accent)" },
  { name: "Billing migration", sub: "payments", start: 1.2, end: 2.5, color: "var(--vs-success)" },
];
</script>
 
<template>
  <Gantt :rows="rows" :today="2.45" />
</template>

import { Component } from "@angular/core";
import { GrassrootGantt } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootGantt],
  template: `
    <grassroot-gantt [rows]="rows" [today]="2.45" />
  `,
})
export class ExampleComponent {
  readonly rows = [
    { name: "Ledger v2 rewrite", sub: "platform", start: 0, end: 1.6, color: "var(--accent)" },
    { name: "Billing migration", sub: "payments", start: 1.2, end: 2.5, color: "var(--vs-success)" },
  ];
}

<script lang="ts">
  import { Gantt } from "@grassroot/ui-svelte";
 
  const rows = [
    { name: "Ledger v2 rewrite", sub: "platform", start: 0, end: 1.6, color: "var(--accent)" },
    { name: "Billing migration", sub: "payments", start: 1.2, end: 2.5, color: "var(--vs-success)" },
  ];
</script>
 
<Gantt rows={rows} today={2.45} />

import { Gantt } from "@grassroot/ui-solid";
 
const rows = [
  { name: "Ledger v2 rewrite", sub: "platform", start: 0, end: 1.6, color: "var(--accent)" },
  { name: "Billing migration", sub: "payments", start: 1.2, end: 2.5, color: "var(--vs-success)" },
];
 
export function Example() {
  return (
    <>
      <Gantt rows={rows} today={2.45} />
    </>
  );
}