import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/sparkcharts.dart';

class MySparkLineChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Spark Line Chart')),
      body: Center(
        child: Container(
          height: 100,
          padding: EdgeInsets.all(16),
          child: SfSparkLineChart(
            data: <double>[
              5, 6, 5, 7, 4, 3, 9, 5, 6, 5, 7, 8, 4, 5, 3, 4, 11, 10, 2, 12, 4, 7, 6, 8
            ],
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/sparkcharts.dart';

class SparkBarWithColors extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SfSparkBarChart(
      data: <double>[
        10, 6, 8, -5, 11, 5, -2, 7, -3, 6, 8, 10
      ],
      highPointColor: Colors.red,
      lowPointColor: Colors.green,
      firstPointColor: Colors.orange,
      lastPointColor: Colors.orange,
      negativePointColor: Colors.purple,
    );
  }
}

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/sparkcharts.dart';

class SparkWinLossChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SfSparkWinLossChart(
      data: <double>[
        12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10
      ],
      color: Colors.blue,
      negativePointColor: Colors.red,
      tiePointColor: Colors.grey,
    );
  }
}

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/sparkcharts.dart';

class SparkLineWithTrackball extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SfSparkLineChart(
      axisLineWidth: 0,
      trackball: SparkChartTrackball(
        backgroundColor: Colors.blue.withOpacity(0.8),
        borderColor: Colors.blue.withOpacity(0.8),
        borderWidth: 2,
        color: Colors.blue,
        labelStyle: TextStyle(color: Colors.white),
        activationMode: SparkChartActivationMode.tap,
      ),
      marker: SparkChartMarker(
        displayMode: SparkChartMarkerDisplayMode.all,
      ),
      data: <double>[
        5, 6, 5, 7, 4, 3, 9, 5, 6, 5, 7, 8, 4, 5, 3, 4, 11, 10, 2, 12, 4, 7, 6, 8
      ],
    );
  }
}

// Compact KPI card with sparkline
class KPICard extends StatelessWidget {
  final String title;
  final String value;
  final List<double> trendData;
  final Color trendColor;

  const KPICard({
    required this.title,
    required this.value,
    required this.trendData,
    this.trendColor = Colors.blue,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(title, style: TextStyle(fontSize: 14, color: Colors.grey)),
            SizedBox(height: 8),
            Text(value, style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
            SizedBox(height: 12),
            Container(
              height: 50,
              child: SfSparkLineChart(
                axisLineWidth: 0,
                data: trendData,
                color: trendColor,
                width: 2,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// Table row with sparkline trend
class DataRowWithSparkline extends StatelessWidget {
  final String label;
  final List<double> data;

  const DataRowWithSparkline({
    required this.label,
    required this.data,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          flex: 2,
          child: Text(label),
        ),
        Expanded(
          flex: 3,
          child: Container(
            height: 30,
            child: SfSparkLineChart(
              axisLineWidth: 0,
              data: data,
              highPointColor: Colors.green,
              lowPointColor: Colors.red,
            ),
          ),
        ),
      ],
    );
  }
}

// Display win-loss record with chart
class WinLossRecord extends StatelessWidget {
  final List<double> results; // 1 for win, -1 for loss, 0 for tie

  const WinLossRecord({required this.results});

  @override
  Widget build(BuildContext context) {
    int wins = results.where((r) => r > 0).length;
    int losses = results.where((r) => r < 0).length;
    int ties = results.where((r) => r == 0).length;

    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Text('W: $wins', style: TextStyle(color: Colors.green)),
            Text('L: $losses', style: TextStyle(color: Colors.red)),
            Text('T: $ties', style: TextStyle(color: Colors.grey)),
          ],
        ),
        SizedBox(height: 8),
        Container(
          height: 40,
          child: SfSparkWinLossChart(
            data: results,
            color: Colors.green,
            negativePointColor: Colors.red,
            tiePointColor: Colors.grey,
          ),
        ),
      ],
    );
  }
}

// Highlight threshold zones with plot band
class ThresholdSparkLine extends StatelessWidget {
  final List<double> data;
  final double thresholdMin;
  final double thresholdMax;

  const ThresholdSparkLine({
    required this.data,
    this.thresholdMin = 5.0,
    this.thresholdMax = 10.0,
  });

  @override
  Widget build(BuildContext context) {
    return SfSparkLineChart(
      axisLineWidth: 1,
      axisLineColor: Colors.grey[300],
      data: data,
      color: Colors.blue,
      plotBand: SparkChartPlotBand(
        start: thresholdMin,
        end: thresholdMax,
        color: Colors.green.withOpacity(0.2),
        borderColor: Colors.green,
        borderWidth: 1,
      ),
    );
  }
}