Line Charts

data = [
  {'month': 'Jan', 'value': 30},
  {'month': 'Feb', 'value': 45},
  {'month': 'Mar', 'value': 60},
];

CristalyseChart()
  .data(data)
  .mapping(x: 'month', y: 'value')
  .geomLine(strokeWidth: 2.0, color: Colors.blue)
  .scaleXOrdinal()
  .scaleYContinuous()
  .build();

data = [
  {'month': 'Jan', 'platform': 'iOS', 'users': 1200},
  {'month': 'Jan', 'platform': 'Android', 'users': 800},
  {'month': 'Feb', 'platform': 'iOS', 'users': 1350},
  {'month': 'Feb', 'platform': 'Android', 'users': 950},
];

CristalyseChart()
  .data(data)
  .mapping(x: 'month', y: 'users', color: 'platform')
  .geomLine(strokeWidth: 3.0)
  .geomPoint(size: 4.0)
  .scaleXOrdinal()
  .scaleYContinuous(min: 0)
  .theme(ChartTheme.defaultTheme())
  .build();

CristalyseChart()
  .data(data)
  .mapping(x: 'month', y: 'value')
  .geomLine(strokeWidth: 2.0)
  .animate(duration: Duration(milliseconds: 1500))
  .build();

CristalyseChart()
  .data(data)
  .mapping(x: 'month', y: 'value')
  .geomLine(
    strokeWidth: 3.0,
    style: LineStyle.dashed,
  )
  .build();

CristalyseChart()
  .data(data)
  .mapping(x: 'month', y: 'value')
  .geomLine(strokeWidth: 2.0)
  .geomPoint(size: 6.0, color: Colors.red)
  .build();

// Product launch performance tracking
final productColors = {
  'Premium Edition': const Color(0xFFAB47BC),    // Purple - luxury
  'Standard Edition': const Color(0xFF42A5F5),   // Blue - reliable
  'Lite Edition': const Color(0xFF66BB6A),       // Green - accessible
  'Beta Version': const Color(0xFFFF7043),       // Orange - experimental
};

CristalyseChart()
  .data(launchMetrics)
  .mapping(x: 'week', y: 'downloads', color: 'product')
  .geomLine(strokeWidth: 2.5)
  .geomPoint(size: 4.0)
  .customPalette(categoryColors: productColors)
  .build();

// Network latency by data center
final dcColors = {
  'US-East': const Color(0xFF1E88E5),      // Blue - primary
  'US-West': const Color(0xFF43A047),      // Green - secondary
  'EU-Central': const Color(0xFFE53935),   // Red - international
  'Asia-Pacific': const Color(0xFFFF9800), // Orange - distant
};

CristalyseChart()
  .data(latencyData)
  .mapping(x: 'timestamp', y: 'latency_ms', color: 'datacenter')
  .geomLine(strokeWidth: 2.0, alpha: 0.8)
  .customPalette(categoryColors: dcColors)
  .build();

CristalyseChart()
  .data(data)
  .mapping(x: 'month', y: 'value')
  .geomLine()
  .interaction(
    tooltip: TooltipConfig(
      builder: (point) {
        return Text(
          'Value: ${point.getDisplayValue('value')}',
          style: TextStyle(color: Colors.white),
        );
      },
    ),
  )
  .build();