🪜 Other Chart Types (🚧 Under Construction 🚧)

Bar Chart

interface Bars {
  /* a particular csv or tabular file */
  prefix?: string

}

export interface BarChartProps extends BaseChartProps {
  data: BarDataPoint[];
  xLabel?: string;
  yLabel?: string;
  title?: string;
  grid?: boolean;
  gridColor?: string;
  orientation?: 'vertical' | 'horizontal';
  barColor?: string;
  barWidth?: number;
  label?: boolean;
  fontSize?: number;
  fontFamily?: string;
  yMin?: number;
  yMax?: number;
}

Image Display

export interface ImageProps extends BaseChartProps {
  src: string;
  alt?: string;
  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
  position?: string;
  caption?: string;
  loading?: 'lazy' | 'eager';
  onLoad?: () => void;
  onError?: () => void;
}

Video Display

export interface VideoSource {
  src: string;
  type?: string;
}

export interface VideoProps extends BaseChartProps {
  // Single source or pattern
  src?: string;
  sources?: VideoSource[];

  // Glob pattern support
  glob?: string;
  sortOrder?: SortOrder;

  // Video controls
  controls?: boolean;
  autoplay?: boolean;
  loop?: boolean;
  muted?: boolean;
  preload?: 'auto' | 'metadata' | 'none';

  // Appearance
  poster?: string;
  caption?: string;

  // Callbacks
  onPlay?: () => void;
  onPause?: () => void;
  onEnded?: () => void;
  onError?: () => void;
}

README Display

export interface ReadmeProps extends BaseChartProps {
  content?: string;
  url?: string;
  file?: string;

  // Rendering options
  theme?: 'light' | 'dark' | 'auto';
  syntaxHighlight?: boolean;

  // Display options
  showTOC?: boolean;
  maxWidth?: number;

  // Callbacks
  onLoad?: (content: string) => void;
  onError?: (error: Error) => void;
}

Text Display

export interface TextProps extends BaseChartProps {
  content: string;

  // Formatting
  format?: 'plain' | 'markdown' | 'html';
  wrap?: boolean;

  // Typography
  fontFamily?: string;
  fontSize?: number;
  lineHeight?: number;
  color?: string;

  // Layout
  align?: 'left' | 'center' | 'right' | 'justify';
  padding?: number;

  // Syntax highlighting (for code)
  language?: string;
  showLineNumbers?: boolean;
}

ANSI Terminal Display

export interface AnsiProps extends BaseChartProps {
  content: string;

  // Terminal appearance
  theme?: 'dark' | 'light' | 'monokai' | 'solarized-dark' | 'solarized-light';
  fontFamily?: string;
  fontSize?: number;
  lineHeight?: number;

  // Display options
  showPrompt?: boolean;
  promptText?: string;
  wrap?: boolean;

  // Interactive features
  copyable?: boolean;
  selectable?: boolean;
}

Chart Container

export interface ChartContainerProps {
  children: React.ReactNode;
  layout?: 'grid' | 'flex' | 'stack';
  columns?: number;
  gap?: number;
  padding?: number;
  backgroundColor?: string;
  className?: string;
}

Unified Chart Type

export type ChartType =
  | 'line'
  | 'bar'
  | 'image'
  | 'video'
  | 'readme'
  | 'text'
  | 'ansi';

export interface ChartConfig {
  type: ChartType;
  props:
    | LineChartProps
    | BarChartProps
    | ImageProps
    | VideoProps
    | ReadmeProps
    | TextProps
    | AnsiProps;
}

Utility Types

export interface Point {
  x: number;
  y: number;
}

export interface Bounds {
  minX: number;
  maxX: number;
  minY: number;
  maxY: number;
}

export interface Margin {
  top: number;
  right: number;
  bottom: number;
  left: number;
}

Default Values

export const DEFAULT_CHART_SIZE = {
  width: 325,
  height: 220,
};

export const DEFAULT_MARGIN: Margin = {
  top: 40,
  right: 20,
  bottom: 50,
  left: 60,
};

export const DEFAULT_COLORS = [
  '#0000ff', // blue
  '#00ff00', // green
  '#ff0000', // red
  '#00ffff', // cyan
  '#ff00ff', // magenta
  '#ffff00', // yellow
  '#000000', // black
];

export const MATPLOTLIB_FONT_FAMILY = 'Times New Roman, serif';
export const MATPLOTLIB_GRID_COLOR = '#b0b0b0';
export const MATPLOTLIB_LINE_WIDTH = 2;
export const MATPLOTLIB_FONT_SIZE = 12;

Data Container Patterns

[Add data container pattern examples here]

Examples

[Add examples here]