IntervalChart

import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { IntervalChart } from '@silverpoint/react/interval-chart';

const data = [
  { crew: 'North crew', task: 'Signage', from: '2026-03-15', to: '2026-03-21' },
  { crew: 'North crew', task: 'Grading', from: '2026-02-17', to: '2026-03-07' },
  { crew: 'North crew', task: 'Signage', from: '2026-03-09', to: '2026-03-31' },
  { crew: 'North crew', task: 'Drainage', from: '2026-02-19', to: '2026-02-24' },
  { crew: 'North crew', task: 'Grading', from: '2026-02-21', to: '2026-03-16' },
  { crew: 'South crew', task: 'Fencing', from: '2026-02-20', to: '2026-03-05' },
  { crew: 'South crew', task: 'Paving', from: '2026-01-02', to: '2026-01-16' },
  { crew: 'South crew', task: 'Paving', from: '2026-03-03', to: '2026-03-09' },
  { crew: 'South crew', task: 'Formwork', from: '2026-03-06', to: '2026-03-10' },
  { crew: 'Bridge team', task: 'Lighting', from: '2026-01-26', to: '2026-02-08' },
  { crew: 'Bridge team', task: 'Drainage', from: '2026-02-26', to: '2026-03-16' },
  { crew: 'Bridge team', task: 'Fencing', from: '2026-02-04', to: '2026-02-19' },
  // … 4 more rows of the same shape
];

export default function App() {
  return (
    <div style={{ width: 480 }}>
      <IntervalChart
        data={data}
        laneKey="crew"
        startKey="from"
        endKey="to"
        labelKey="task"
        axis="date"
        title="Crew schedule"
      />
    </div>
  );
}

<script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { SpIntervalChart } from '@silverpoint/vue/interval-chart';

const data = [
  { crew: 'North crew', task: 'Signage', from: '2026-03-15', to: '2026-03-21' },
  { crew: 'North crew', task: 'Grading', from: '2026-02-17', to: '2026-03-07' },
  { crew: 'North crew', task: 'Signage', from: '2026-03-09', to: '2026-03-31' },
  { crew: 'North crew', task: 'Drainage', from: '2026-02-19', to: '2026-02-24' },
  { crew: 'North crew', task: 'Grading', from: '2026-02-21', to: '2026-03-16' },
  { crew: 'South crew', task: 'Fencing', from: '2026-02-20', to: '2026-03-05' },
  { crew: 'South crew', task: 'Paving', from: '2026-01-02', to: '2026-01-16' },
  { crew: 'South crew', task: 'Paving', from: '2026-03-03', to: '2026-03-09' },
  { crew: 'South crew', task: 'Formwork', from: '2026-03-06', to: '2026-03-10' },
  { crew: 'Bridge team', task: 'Lighting', from: '2026-01-26', to: '2026-02-08' },
  { crew: 'Bridge team', task: 'Drainage', from: '2026-02-26', to: '2026-03-16' },
  { crew: 'Bridge team', task: 'Fencing', from: '2026-02-04', to: '2026-02-19' },
  // … 4 more rows of the same shape
];
</script>

<template>
  <div style="width: 480px">
    <SpIntervalChart
      :data="data"
      lane-key="crew"
      start-key="from"
      end-key="to"
      label-key="task"
      axis="date"
      title="Crew schedule"
    />
  </div>
</template>

// src/styles.css:
//   @import '@silverpoint/fonts/fonts.css';
//   @import '@silverpoint/grounds/styles.css';

import { Component } from '@angular/core';
import { SpIntervalChart } from '@silverpoint/angular/interval-chart';

@Component({
  selector: 'app-root',
  imports: [SpIntervalChart],
  template: `
    <div style="width: 480px">
      <sp-interval-chart
        [data]="data"
        laneKey="crew"
        startKey="from"
        endKey="to"
        labelKey="task"
        axis="date"
        title="Crew schedule"
      />
    </div>
  `,
})
export class App {
  protected readonly data = [
    { crew: 'North crew', task: 'Signage', from: '2026-03-15', to: '2026-03-21' },
    { crew: 'North crew', task: 'Grading', from: '2026-02-17', to: '2026-03-07' },
    { crew: 'North crew', task: 'Signage', from: '2026-03-09', to: '2026-03-31' },
    { crew: 'North crew', task: 'Drainage', from: '2026-02-19', to: '2026-02-24' },
    { crew: 'North crew', task: 'Grading', from: '2026-02-21', to: '2026-03-16' },
    { crew: 'South crew', task: 'Fencing', from: '2026-02-20', to: '2026-03-05' },
    { crew: 'South crew', task: 'Paving', from: '2026-01-02', to: '2026-01-16' },
    { crew: 'South crew', task: 'Paving', from: '2026-03-03', to: '2026-03-09' },
    { crew: 'South crew', task: 'Formwork', from: '2026-03-06', to: '2026-03-10' },
    { crew: 'Bridge team', task: 'Lighting', from: '2026-01-26', to: '2026-02-08' },
    { crew: 'Bridge team', task: 'Drainage', from: '2026-02-26', to: '2026-03-16' },
    { crew: 'Bridge team', task: 'Fencing', from: '2026-02-04', to: '2026-02-19' },
    // … 4 more rows of the same shape
  ];
}

import reflex as rx
from reflex_silverpoint_react import interval_chart

DATA = [
    {"crew": "North crew", "task": "Signage", "from": "2026-03-15", "to": "2026-03-21"},
    {"crew": "North crew", "task": "Grading", "from": "2026-02-17", "to": "2026-03-07"},
    {"crew": "North crew", "task": "Signage", "from": "2026-03-09", "to": "2026-03-31"},
    {"crew": "North crew", "task": "Drainage", "from": "2026-02-19", "to": "2026-02-24"},
    {"crew": "North crew", "task": "Grading", "from": "2026-02-21", "to": "2026-03-16"},
    {"crew": "South crew", "task": "Fencing", "from": "2026-02-20", "to": "2026-03-05"},
    {"crew": "South crew", "task": "Paving", "from": "2026-01-02", "to": "2026-01-16"},
    {"crew": "South crew", "task": "Paving", "from": "2026-03-03", "to": "2026-03-09"},
    {"crew": "South crew", "task": "Formwork", "from": "2026-03-06", "to": "2026-03-10"},
    {"crew": "Bridge team", "task": "Lighting", "from": "2026-01-26", "to": "2026-02-08"},
    {"crew": "Bridge team", "task": "Drainage", "from": "2026-02-26", "to": "2026-03-16"},
    {"crew": "Bridge team", "task": "Fencing", "from": "2026-02-04", "to": "2026-02-19"},
    # … 4 more rows of the same shape
]


def index() -> rx.Component:
    return rx.box(
        interval_chart(
            data=DATA,
            lane_key="crew",
            start_key="from",
            end_key="to",
            label_key="task",
            axis="date",
            title="Crew schedule",
        ),
        width="480px",
    )


app = rx.App()
app.add_page(index)