@archbase/components 3.0.0

package/src/charts/vis-timeline/ArchbaseVisTimeline.tsx

@@ -0,0 +1,401 @@
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { Box, Paper, Center, LoadingOverlay, Alert, Stack, Text, ActionIcon, Group } from '@mantine/core';
+import { IconZoomIn, IconZoomOut, IconRefresh, IconAlertCircle } from '@tabler/icons-react';
+import { useArchbaseTranslation } from '@archbase/core';
+import type {
+  ArchbaseVisTimelineProps,
+  TimelineItem,
+  TimelineGroup,
+} from './ArchbaseVisTimeline.types';
+import {
+  mergeTimelineOptions,
+  normalizeTimelineItems,
+  normalizeTimelineGroups,
+  normalizeDate,
+  normalizeRange,
+  formatTimelineDate,
+  formatDuration,
+} from './utils/timelineOptions';
+
+/**
+ * Componente wrapper para vis-timeline
+ * Implementação leve usando vis-timeline diretamente
+ */
+export function ArchbaseVisTimeline<T extends TimelineItem = TimelineItem>({
+  items = [],
+  groups = [],
+  options: customOptions,
+  start,
+  end,
+  range,
+  width = '100%',
+  height = 500,
+  minHeight = 300,
+  orientation = 'bottom',
+  layout = 'box',
+  editable = false,
+  selectable = true,
+  multiselect = true,
+  zoomable = true,
+  moveable = true,
+  showCurrentTime = true,
+  showCustomTime = false,
+  showMajorLabels = true,
+  showMinorLabels = true,
+  style,
+  className,
+  backgroundColor,
+  itemColor,
+  groupColor,
+  disabled = false,
+  loading,
+  error,
+  noData,
+  onLoad,
+  onError,
+  on,
+  ariaLabel,
+  title,
+  timelineRef,
+}: ArchbaseVisTimelineProps<T>) {
+  const { t } = useArchbaseTranslation();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const timelineInstanceRef = useRef<any>(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [currentRange, setCurrentRange] = useState<{ start: Date; end: Date } | null>(null);
+  const [selectedItems, setSelectedItems] = useState<any[]>([]);
+
+  // Merge options
+  const options = useMemo(() => {
+    const merged = mergeTimelineOptions({
+      ...customOptions,
+      height,
+      width,
+      minHeight,
+      orientation,
+      layout,
+      editable,
+      selectable,
+      multiselect,
+      showCurrentTime,
+      // @ts-ignore - zoomable is valid but not in the type definition
+      zoomable: typeof zoomable === 'boolean' ? zoomable : true,
+      // @ts-ignore - moveable is valid but not in the type definition
+      moveable: typeof moveable === 'boolean' ? moveable : true,
+    } as any);
+
+    return merged;
+  }, [
+    customOptions,
+    height,
+    width,
+    minHeight,
+    orientation,
+    layout,
+    editable,
+    selectable,
+    multiselect,
+    showCurrentTime,
+    zoomable,
+    moveable,
+  ]);
+
+  // Normalize items
+  const normalizedItems = useMemo(() => {
+    return normalizeTimelineItems(items);
+  }, [items]);
+
+  // Normalize groups
+  const normalizedGroups = useMemo(() => {
+    return groups.length > 0 ? normalizeTimelineGroups(groups) : undefined;
+  }, [groups]);
+
+  // Calculate initial range
+  const initialRange = useMemo(() => {
+    if (range) {
+      return normalizeRange(range);
+    }
+    if (start && end) {
+      return [normalizeDate(start), normalizeDate(end)];
+    }
+    if (normalizedItems.length > 0) {
+      const dates = normalizedItems.map((item) => item.start.getTime());
+      const minDate = new Date(Math.min(...dates));
+      const maxDate = new Date(Math.max(...dates));
+      // Add padding
+      minDate.setDate(minDate.getDate() - 1);
+      maxDate.setDate(maxDate.getDate() + 1);
+      return [minDate, maxDate];
+    }
+    return undefined;
+  }, [range, start, end, normalizedItems]);
+
+  // Load vis-timeline dynamically
+  useEffect(() => {
+    let mounted = true;
+
+    const loadTimeline = async () => {
+      if (!containerRef.current || disabled) return;
+
+      try {
+        // Try to import vis-timeline - will be bundled separately
+        // @ts-ignore - Dynamic import for optional peer dependency
+        const visModule = await import('vis-timeline');
+        const { Timeline } = visModule;
+        // @ts-ignore - DataSet might be exported differently
+        const DataSet = (visModule as any).DataSet || visModule.default?.DataSet;
+
+        if (!mounted || !containerRef.current) return;
+
+        // Create datasets
+        const itemsDataset = new DataSet(normalizedItems);
+        const groupsDataset = normalizedGroups ? new DataSet(normalizedGroups) : undefined;
+
+        // Create timeline
+        const timeline = new Timeline(
+          containerRef.current,
+          itemsDataset,
+          (groupsDataset ? { groups: groupsDataset, ...options } : options) as any,
+          initialRange ? { start: initialRange[0], end: initialRange[1] } : undefined
+        );
+
+        timelineInstanceRef.current = timeline;
+
+        // Expose timeline instance via ref
+        if (timelineRef) {
+          if (typeof timelineRef === 'function') {
+            timelineRef(timeline);
+          } else if ('current' in timelineRef) {
+            (timelineRef as any).current = timeline;
+          }
+        }
+
+        // Set up event listeners
+        timeline.on('select', (properties: any) => {
+          setSelectedItems(properties.items);
+          on?.onSelect?.(properties.items);
+        });
+
+        timeline.on('rangechanged', (properties: any) => {
+          setCurrentRange({
+            start: new Date(properties.start),
+            end: new Date(properties.end),
+          });
+          on?.onRangeChange?.(new Date(properties.start), new Date(properties.end));
+        });
+
+        timeline.on('click', (properties: any) => {
+          if (properties.item) {
+            on?.onItemClick?.(properties.item);
+          } else if (properties.time) {
+            on?.onCanvasClick?.(new Date(properties.time));
+          }
+        });
+
+        timeline.on('doubleClick', (properties: any) => {
+          if (properties.item) {
+            on?.onItemDoubleClick?.(properties.item);
+          } else {
+            on?.onCanvasDoubleClick?.(new Date(properties.time));
+          }
+        });
+
+        setIsLoaded(true);
+        onLoad?.();
+      } catch (e) {
+        console.error('Failed to load vis-timeline:', e);
+        onError?.(e instanceof Error ? e : new Error('Failed to load timeline'));
+      }
+    };
+
+    loadTimeline();
+
+    return () => {
+      mounted = false;
+      if (timelineInstanceRef.current) {
+        timelineInstanceRef.current.destroy();
+        timelineInstanceRef.current = null;
+      }
+    };
+    // Only run on mount for stability
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Update items when they change
+  useEffect(() => {
+    if (timelineInstanceRef.current && isLoaded) {
+      const itemsDataset = timelineInstanceRef.current.itemsData;
+      if (itemsDataset) {
+        itemsDataset.clear();
+        itemsDataset.add(normalizedItems);
+      }
+    }
+  }, [normalizedItems, isLoaded]);
+
+  // Update groups when they change
+  useEffect(() => {
+    if (timelineInstanceRef.current && isLoaded && normalizedGroups) {
+      timelineInstanceRef.current.setGroups(normalizedGroups);
+    }
+  }, [normalizedGroups, isLoaded]);
+
+  // Zoom controls
+  const handleZoomIn = () => {
+    if (timelineInstanceRef.current) {
+      const range = timelineInstanceRef.current.getWindow();
+      const interval = range.end.getTime() - range.start.getTime();
+      const newInterval = interval * 0.7;
+      timelineInstanceRef.current.setWindow(
+        new Date(range.start.getTime() - (interval - newInterval) / 2),
+        new Date(range.end.getTime() + (interval - newInterval) / 2)
+      );
+    }
+  };
+
+  const handleZoomOut = () => {
+    if (timelineInstanceRef.current) {
+      const range = timelineInstanceRef.current.getWindow();
+      const interval = range.end.getTime() - range.start.getTime();
+      const newInterval = interval * 1.3;
+      timelineInstanceRef.current.setWindow(
+        new Date(range.start.getTime() - (newInterval - interval) / 2),
+        new Date(range.end.getTime() + (newInterval - interval) / 2)
+      );
+    }
+  };
+
+  const handleFit = () => {
+    if (timelineInstanceRef.current) {
+      timelineInstanceRef.current.fit();
+    }
+  };
+
+  const handleToday = () => {
+    if (timelineInstanceRef.current) {
+      const now = new Date();
+      timelineInstanceRef.current.moveTo(now);
+    }
+  };
+
+  // Render loading state
+  if (!isLoaded && loading) {
+    return (
+      <Paper
+        withBorder
+        p="xl"
+        style={{ width, height, minHeight }}
+        className={className}
+      >
+        <Center h="100%">
+          <Stack align="center">
+            <LoadingOverlay visible />
+            {typeof loading === 'string' ? <Text>{loading}</Text> : loading}
+          </Stack>
+        </Center>
+      </Paper>
+    );
+  }
+
+  // Render error state
+  if (error && typeof error !== 'boolean') {
+    return (
+      <Paper
+        withBorder
+        p="xl"
+        style={{ width, height, minHeight }}
+        className={className}
+      >
+        <Center h="100%">
+          <Alert icon={<IconAlertCircle size={16} />} color="red" title="Error">
+            {typeof error === 'string' ? error : 'Failed to load timeline'}
+          </Alert>
+        </Center>
+      </Paper>
+    );
+  }
+
+  // Render no data state
+  if (items.length === 0 && noData) {
+    return (
+      <Paper
+        withBorder
+        p="xl"
+        style={{ width, height, minHeight }}
+        className={className}
+      >
+        <Center h="100%">
+          <Text c="dimmed">
+            {typeof noData === 'string' ? noData : t('No items to display') as ReactNode}
+          </Text>
+        </Center>
+      </Paper>
+    );
+  }
+
+  return (
+    <Paper
+      withBorder
+      shadow="sm"
+      style={{ width, ...style }}
+      className={className}
+    >
+      {/* Toolbar */}
+      {!disabled && (
+        <Group justify="flex-end" p="xs" style={{ borderBottom: '1px solid var(--mantine-color-gray-3)' }}>
+          <ActionIcon size="sm" variant="subtle" onClick={handleZoomIn} title={String(t('Zoom in'))}>
+            <IconZoomIn size={16} />
+          </ActionIcon>
+          <ActionIcon size="sm" variant="subtle" onClick={handleZoomOut} title={String(t('Zoom out'))}>
+            <IconZoomOut size={16} />
+          </ActionIcon>
+          <ActionIcon size="sm" variant="subtle" onClick={handleFit} title={String(t('Fit to items'))}>
+            <IconRefresh size={16} />
+          </ActionIcon>
+          <ActionIcon size="sm" variant="subtle" onClick={handleToday} title={String(t('Go to today'))}>
+            <IconRefresh size={16} />
+          </ActionIcon>
+
+          {/* Current range info */}
+          {currentRange && (
+            <Text size="xs" c="dimmed" ml="auto">
+              {formatTimelineDate(currentRange.start)} - {formatTimelineDate(currentRange.end)}
+              {currentRange.end && currentRange.start && (
+                <Text span ml="xs" inherit>
+                  ({formatDuration(currentRange.start, currentRange.end)})
+                </Text>
+              )}
+            </Text>
+          )}
+
+          {/* Selected items info */}
+          {selectedItems.length > 0 && (
+            <Text size="xs" c="blue">
+              {selectedItems.length} {t('selected') as ReactNode}
+            </Text>
+          )}
+        </Group>
+      )}
+
+      {/* Timeline container */}
+      <Box
+        ref={containerRef}
+        style={{
+          height: typeof height === 'number' ? height : undefined,
+          minHeight,
+          backgroundColor,
+        }}
+        aria-label={ariaLabel || title || 'Timeline'}
+      />
+
+      {disabled && (
+        <Box
+          pos="absolute"
+          inset={0}
+          style={{ backgroundColor: 'rgba(0,0,0,0.05)', cursor: 'not-allowed' }}
+        />
+      )}
+    </Paper>
+  );
+}
+
+ArchbaseVisTimeline.displayName = 'ArchbaseVisTimeline';

package/src/charts/vis-timeline/ArchbaseVisTimeline.types.ts

@@ -0,0 +1,294 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { DataGroup, DataItem, IdType } from 'vis-timeline/peer';
+
+/**
+ * Tipos de dados para itens da timeline
+ */
+export type TimelineItemType = 'box' | 'point' | 'range' | 'background';
+
+/**
+ * Item básico da timeline
+ */
+export interface TimelineItem {
+  /** ID único do item */
+  id: string | number;
+  /** Conteúdo a ser exibido */
+  content: string | ReactNode;
+  /** Data/hora de início */
+  start: Date | string | number;
+  /** Data/hora de fim (para ranges) */
+  end?: Date | string | number;
+  /** Tipo do item */
+  type?: TimelineItemType;
+  /** Grupo ao qual pertence */
+  group?: string | number;
+  /** ClassName customizado */
+  className?: string;
+  /** Estilo inline */
+  style?: CSSProperties;
+  /** Tooltip */
+  title?: string;
+  /** Editável */
+  editable?: boolean;
+  /** Dados adicionais */
+  data?: any;
+}
+
+/**
+ * Grupo da timeline
+ */
+export interface TimelineGroup {
+  /** ID único do grupo */
+  id: string | number;
+  /** Conteúdo do grupo */
+  content: string | ReactNode;
+  /** Order do grupo */
+  order?: number;
+  /** ClassName customizado */
+  className?: string;
+  /** Estilo inline */
+  style?: CSSProperties;
+  /** Título */
+  title?: string;
+}
+
+/**
+ * Opções de zoom da timeline
+ */
+export interface TimelineZoomOptions {
+  /** Zoom mínimo (ms por pixel) */
+  min?: number;
+  /** Zoom máximo (ms por pixel) */
+  max?: number;
+  /** Habilitar zoom com scroll */
+  zoomKey?: string | null;
+}
+
+/**
+ * Opções de movimento (pan)
+ */
+export interface TimelineMoveOptions {
+  /** Habilitar movimento arrastando */
+  moveable?: boolean;
+  /** Habilitar movimento com setas */
+  moveOnKey?: boolean;
+}
+
+/**
+ * Configuração de orientação da timeline
+ */
+export type TimelineOrientation = 'bottom' | 'top' | 'none' | 'both';
+
+/**
+ * Modo de layout
+ */
+export type TimelineLayout = 'box' | 'list';
+
+/**
+ * Opções de formatação de data
+ */
+export interface TimelineDateFormatOptions {
+  /** Formato para datas longas */
+  long?: string;
+  /** Formato para datas curtas */
+  short?: string;
+  /** Locale para formatação */
+  locale?: string;
+}
+
+/**
+ * Eventos da timeline
+ */
+export interface TimelineEvents {
+  /** Ao clicar em um item */
+  onItemClick?: (item: TimelineItem) => void;
+  /** Ao clicar duas vezes em um item */
+  onItemDoubleClick?: (item: TimelineItem) => void;
+  /** Ao clicar no fundo */
+  onCanvasClick?: (time: Date) => void;
+  /** Ao clicar duas vezes no fundo */
+  onCanvasDoubleClick?: (time: Date) => void;
+  /** Ao alterar a seleção */
+  onSelect?: (items: TimelineItem[] | TimelineGroup[]) => void;
+  /** Ao mudar o range visível */
+  onRangeChange?: (start: Date, end: Date) => void;
+  /** Ao arrastar um item */
+  onItemDrag?: (item: TimelineItem, callback: () => void) => void;
+  /** Ao mover um item */
+  onItemMove?: (item: TimelineItem, callback: () => void) => void;
+  /** Ao remover um item */
+  onItemRemove?: (item: TimelineItem, callback: () => void) => void;
+  /** Ao adicionar um item */
+  onItemAdd?: (item: TimelineItem, callback: () => void) => void;
+  /** Ao mudar os grupos */
+  onGroupDrag?: (group: TimelineGroup, callback: () => void) => void;
+}
+
+/**
+ * Props do componente ArchbaseVisTimeline
+ */
+export interface ArchbaseVisTimelineProps<T extends TimelineItem = TimelineItem> {
+  /** Itens da timeline */
+  items?: T[];
+  /** Grupos da timeline */
+  groups?: TimelineGroup[];
+  /** Opções da timeline */
+  options?: TimelineOptions;
+
+  /** --- Dados --- */
+  /** Período inicial */
+  start?: Date | string | number;
+  /** Período final */
+  end?: Date | string | number;
+  /** Período inicial e final */
+  range?: [Date | string | number, Date | string | number];
+
+  /** --- Layout --- */
+  /** Largura */
+  width?: string | number;
+  /** Altura */
+  height?: string | number;
+  /** Altura mínima */
+  minHeight?: string | number;
+  /** Orientação da timeline */
+  orientation?: TimelineOrientation;
+  /** Modo de layout */
+  layout?: TimelineLayout;
+
+  /** --- Funcionalidades --- */
+  /** Habilitar edição de itens */
+  editable?: boolean | { updateTime?: boolean; updateGroup?: boolean; add?: boolean; remove?: boolean };
+  /** Habilitar seleção */
+  selectable?: boolean;
+  /** Seleção múltipla */
+  multiselect?: boolean;
+  /** Habilitar zoom */
+  zoomable?: boolean | TimelineZoomOptions;
+  /** Habilitar movimento */
+  moveable?: boolean | TimelineMoveOptions;
+  /** Mostrar linha de tempo atual */
+  showCurrentTime?: boolean;
+  /** Mostrar barra de zoom personalizada */
+  showCustomTime?: boolean;
+  /** Mostrar dados em milissegundos */
+  showMajorLabels?: boolean;
+  /** Mostrar labels menores */
+  showMinorLabels?: boolean;
+
+  /** --- Estilização --- */
+  style?: CSSProperties;
+  className?: string;
+  /** Cor de fundo */
+  backgroundColor?: string;
+  /** Cor dos itens */
+  itemColor?: string;
+  /** Cor dos grupos */
+  groupColor?: string;
+
+  /** --- Estados --- */
+  disabled?: boolean;
+  loading?: ReactNode;
+  error?: ReactNode;
+  noData?: ReactNode;
+
+  /** --- Eventos --- */
+  onLoad?: () => void;
+  onError?: (error: Error) => void;
+  /** Eventos customizados da timeline */
+  on?: TimelineEvents;
+
+  /** --- Acessibilidade --- */
+  ariaLabel?: string;
+  title?: string;
+
+  /** --- Outros --- */
+  /** Ref para o elemento da timeline */
+  timelineRef?: React.RefObject<any> | ((instance: any) => void);
+}
+
+/**
+ * Opções completas da timeline (estilo vis-timeline)
+ */
+export interface TimelineOptions {
+  /** Altura */
+  height?: string | number;
+  /** Largura */
+  width?: string | number;
+  /** Altura mínima */
+  minHeight?: string | number;
+  /** Largura mínima */
+  minWidth?: string | number;
+  /** Orientação */
+  orientation?: TimelineOrientation;
+  /** Direção */
+  direction?: 'past' | 'future';
+  /** Auto-redimensionar */
+  autoResize?: boolean;
+  /** Modo de layout */
+  layout?: TimelineLayout;
+  /** Margem entre itens */
+  margin?: {
+    item?: { horizontal: number; vertical: number };
+    axis?: number;
+  };
+  /** Padding */
+  padding?: number;
+  /** Scrollbars */
+  showTooltips?: boolean;
+  /** Tooltip follows mouse */
+  tooltipOnItemUpdateTime?: boolean | { followMouse: boolean };
+  /** Zoom */
+  zoomKey?: string;
+  /** Zoom min/max */
+  zoomMin?: number;
+  zoomMax?: number;
+  /** Move */
+  moveable?: boolean;
+  /** Move on key */
+  moveOnKey?: boolean;
+  /** Group editável */
+  groupEditable?: boolean;
+  /** Edições */
+  editable?: boolean | {
+    add?: boolean;
+    remove?: boolean;
+    updateTime?: boolean;
+    updateGroup?: boolean;
+    overrideItems?: boolean;
+  };
+  /** Seleção */
+  selectable?: boolean;
+  /** Seleção múltipla */
+  multiselect?: boolean;
+  /** Multi select por grupos */
+  multiselectPerGroup?: boolean;
+  /** Linha de tempo atual */
+  showCurrentTime?: boolean;
+  /** Tempo customizado */
+  showCustomTime?: boolean;
+  /** Locale */
+  locale?: string;
+  /** Formatos de data */
+  format?: TimelineDateFormatOptions | {
+    minorLabels: any;
+    majorLabels: any;
+  };
+  /** Moment locale */
+  moment?: (locale: string) => any;
+  /** Click para usar */
+  clickToUse?: boolean;
+  /** Show background para grupos */
+  groupOrder?: string | ((a: any, b: any) => number);
+  /** Snap */
+  snap?: ((date: Date, scale: string, step: number) => Date) | null;
+  /** Stack */
+  stack?: boolean;
+  /** Throttle redrawing */
+  throttleRedraw?: number;
+  /** Visible frame template */
+  visibleFrameTemplate?: (item: any) => string;
+  /** Horizontal scroll */
+  horizontalScroll?: boolean;
+  /** Vertical scroll */
+  verticalScroll?: boolean;
+}