Types Reference

HyVue Gantt exposes several TypeScript types and interfaces for use in your application. Here are the main types you'll work with:

Core Types

// Time Units
type TimeUnit = 'hour' | 'day' | 'week' | 'month';
type DayOptionLabel = "day" | "doy" | "name" | "number"

// Connection Types
type ConnectionType = 'bezier' | 'straight' | 'squared';
type ConnectionPattern = 'solid' | 'dot' | 'dash' | 'dashdot';
type ConnectionSpeed = 'slow' | 'normal' | 'fast';
type MarkerConnection = 'none' | 'forward' | 'bidirectional'
type ConnectionRelation = "FS" | "SS" | "FF" | "SF"

Bar Configuration

interface GanttBarConfig {
  id: string;
  label?: string;
  html?: string;
  hasHandles?: boolean;
  immobile?: boolean;
  bundle?: string;
  pushOnOverlap?: boolean;
  pushOnConnect?: boolean;
  dragLimitLeft?: number
  dragLimitRight?: number
  style?: CSSProperties;
  class?: string;
  connections?: GanttBarConnection[];
  milestoneId?: string;
  progress?: number;
  progressResizable?: boolean;
  progressStyle?: CSSProperties;
  plannedStyle?: CSSProperties;        // Styling for planned bars
}

interface GanttBarObject {
  [key: string]: any;
  ganttBarConfig: GanttBarConfig;
  start_planned?: string | Date;       // Planned start date
  end_planned?: string | Date;         // Planned end date
}

interface GanttBarConnection {
  targetId: string;
  type?: ConnectionType;
  color?: string;
  pattern?: ConnectionPattern;
  animated?: boolean;
  animationSpeed?: ConnectionSpeed;
  relation?: ConnectionRelation;
  label?: string;
  labelAlwaysVisible?: boolean;
  labelStyle?: ConnectionLabelStyle;
}

type GanttBarConfigWithoutStyles = Omit<
  GanttBarConfig,
  "style" | "progressStyle" | "connections"
> & {
  connections?: Omit<GanttBarConnection, "labelStyle">[]
}

interface GanttBarObjectWithoutStyles extends Omit<GanttBarObject, "ganttBarConfig"> {
  ganttBarConfig: GanttBarConfigWithoutStyles
}

Planned Bars Types

The planned bars feature introduces additional properties for displaying planned/expected dates alongside actual dates:

// Planned Bars Configuration
interface PlannedBarConfig {
  start_planned?: string | Date;       // Planned start date
  end_planned?: string | Date;         // Planned end date
  plannedStyle?: CSSProperties;        // Custom styling for planned bars
}

// Extended Bar Object with Planned Dates
interface GanttBarObjectWithPlanned extends GanttBarObject {
  start_planned?: string | Date;
  end_planned?: string | Date;
}

// Tooltip Data with Planned Information  
interface BarTooltipData {
  bar: GanttBarObject;
  barStart: string | Date;
  barEnd: string | Date;
  barStartPlanned?: string | Date;     // Available when showPlannedBars is true
  barEndPlanned?: string | Date;       // Available when showPlannedBars is true
}

Planned Bars Usage Example

const barsWithPlanning: GanttBarObject[] = [
  {
    start: '2024-02-15',           // Actual start
    end: '2024-02-28',             // Actual end  
    start_planned: '2024-02-01',   // Planned start
    end_planned: '2024-02-20',     // Planned end
    ganttBarConfig: {
      id: 'task-1',
      label: 'Development Task',
      // Styling for the actual bar
      style: {
        backgroundColor: '#2196f3',
        color: 'white'
      },
      // Styling for the planned bar (shown as overlay/underlay)
      plannedStyle: {
        backgroundColor: '#e3f2fd',
        border: '2px dashed #1976d2',
        opacity: 0.7
      }
    }
  }
]

Connection Label Styling

interface ConnectionLabelStyle {
  fill?: string;
  fontSize?: string;
  fontWeight?: string | number;
  fontFamily?: string;
  background?: string;
  borderRadius?: string;
  border?: string;
  opacity?: number;
  textTransform?: "none" | "uppercase" | "lowercase" | "capitalize";
  [key: string]: any;
}

Chart Data Types

interface ChartRow {
  id?: string | number
  label: string
  bars: GanttBarObject[]
  children?: ChartRow[]
}

interface GanttMilestone {
  id: string
  date: string
  name: string
  description?: string
  color?: string
}

interface TimeaxisEvent {
  id: string;              
  label: string;          
  startDate: string | Date; 
  endDate: string | Date;   
  color?: string;          
  backgroundColor?: string; 
  description?: string;    
}

Label Data Types

type LabelColumnField = "Id" | "Label" | "StartDate" | "EndDate" | "Duration" | "Progress"

type SortFunction = (a: ChartRow, b: ChartRow) => number
type SortDirection = "asc" | "desc" | "none"

interface LabelColumnConfig {
  field: LabelColumnField | string
  sortable?: boolean
  valueGetter?: (row: ChartRow) => string | number
  sortFn?: SortFunction
}

interface SortState {
  column: string;
  direction: SortDirection;
}

Export Types

interface ExportOptions {
  format: "pdf" | "png" | "svg" | "excel";
  quality?: number;
  timeRange?: { start: Date; end: Date };
  filename?: string;
  paperSize?: "a4" | "a3" | "letter" | "legal";
  orientation?: "portrait" | "landscape";
  scale?: number;
  margin?: number;
  exportColumnLabel?: boolean
}

interface ExportResult {
  success: boolean;
  data: Blob | null;
  error?: string;
  filename: string;
}

Style Types

interface ColorScheme {
  primary: string;
  secondary: string;
  ternary: string;
  quartenary: string;
  hoverHighlight: string;
  markerCurrentTime: string;
  text: string;
  background: string;
  toast?: string;
  commands?: string;
  rangeHighlight?: string;
  holidayHighlight?: string;
  barContainer?: string;
  rowContainer?: string;
  gridAndBorder?: string;
}