Charts and Visualization

​

Overview

​

Chart Types

​

Single Stock Charts

​

Multi-Stock Charts

• Synchronized Time Axis: All stocks share the same time scale
• Individual Scaling: Each stock maintains its own Y-axis scale
• Unified Legend: Single legend for the first chart only
• Consistent Formatting: Uniform styling across all charts

​

Chart Features

​

Interactive Elements

​

Real-time Updates

• Instant Rendering: New data appears immediately
• Smooth Transitions: Animated updates for better user experience
• Performance Optimization: Efficient re-rendering of only changed data
• Memory Management: Automatic cleanup of old data points

​

Chart Configuration

​

Data Formatting

// Number formatting examples
const formatNumber = (value: number): string => {
  const absValue = Math.abs(value);
  if (absValue >= 1e9) return `${(value / 1e9).toFixed(1)}B`;
  if (absValue >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
  if (absValue >= 1e3) return `${(value / 1e3).toFixed(1)}K`;
  return value.toFixed(0);
};

​

Time Units

• Days: Short-term simulations (< 100 days)
• Weeks: Medium-term analysis (weeks to months)
• Months: Seasonal and annual cycles
• Years: Long-term trend analysis

​

Color Schemes

• Baseline Data: Gray dashed lines (#6c757d)
• Scenario Data: Blue solid lines (#0d6efd)
• Stock-specific Colors: Unique colors for each stock
• Accessibility: High contrast and colorblind-friendly palettes

​

Comparison Mode

​

Baseline vs Scenario

​

Difference Analysis

• Absolute Differences: Raw value changes over time
• Percentage Changes: Relative changes from baseline
• Statistical Summary: Mean, max, min differences
• Trend Analysis: Direction and magnitude of changes

​

Chart Components

​

ChartArea Component

interface ChartAreaProps {
  chartData: {
    baseline: SeriesPoint[];
    scenario: SeriesPoint[];
  };
  stockName: string;
  timeUnit?: string;
  compareMode: boolean;
  onOpenTable?: () => void;
}

​

MultiStockChartArea Component

interface MultiStockChartAreaProps {
  multiStockData: {
    [stockName: string]: {
      baseline: SeriesPoint[];
      scenario: SeriesPoint[];
    };
  };
  timeUnit?: string;
  onOpenTable?: () => void;
}

​

Key Features

​

Data Export

​

Export Formats

​

Data Table Modal

• Sortable Columns: Click headers to sort by any column
• Filtering: Search and filter data by value ranges
• Pagination: Efficient handling of large datasets
• Copy/Paste: Easy data transfer to external tools

​

Customization Options

​

Styling

• Theme Integration: Matches application color scheme
• Custom Colors: Override default color palettes
• Typography: Configurable fonts and sizes
• Spacing: Adjustable margins and padding

​

Layout Options

• Chart Size: Configurable height and aspect ratio
• Margin Control: Customize spacing around charts
• Grid Options: Configure grid lines and styling
• Axis Configuration: Custom axis labels and formatting

​

Performance Considerations

​

Large Datasets

• Data Sampling: Intelligent point reduction for display
• Virtualization: Only render visible portions
• Lazy Loading: Progressive data loading
• Memory Management: Efficient cleanup and garbage collection

​

Real-time Updates

• Debounced Updates: Prevent excessive re-rendering
• Incremental Changes: Only update changed data series
• Animation Control: Configurable transition speeds
• Resource Monitoring: Track performance metrics

​

Integration Examples

​

Basic Chart Implementation

import { ChartArea } from './components/charts/ChartArea';

const MyModelResults = ({ simulationData }) => {
  return (
    <ChartArea
      chartData={simulationData}
      stockName="population"
      timeUnit="years"
      compareMode={true}
      onOpenTable={() => setShowDataTable(true)}
    />
  );
};

​

Multi-Stock Dashboard

import MultiStockChartArea from './components/MultiStockChartArea';

const ModelDashboard = ({ allStocksData }) => {
  return (
    <MultiStockChartArea
      multiStockData={allStocksData}
      timeUnit="months"
      onOpenTable={() => setShowTable(true)}
    />
  );
};

​

Best Practices

​

Chart Design

1. Clear Labels: Use descriptive axis labels and titles
2. Consistent Scaling: Maintain consistent scales for comparisons
3. Color Usage: Use colors meaningfully and consistently
4. Data Density: Avoid overcrowding charts with too much data

​

User Experience

1. Progressive Disclosure: Show overview first, details on demand
2. Context Preservation: Maintain user’s view state during updates
3. Performance: Optimize for smooth interactions
4. Accessibility: Ensure charts work with assistive technologies

​

Next Steps