import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class EntryValue {
  EntryValue(this.time, this.value);
  final DateTime time;
  final double value;
}

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({super.key, required this.title});
  final String title;
  final data = List<EntryValue>.generate(
    100,
    (i) => EntryValue(
      DateTime(2018, 10, 27).add(Duration(days: i)),
      100 + (i % 10) * 10.0,
    ),
  );

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SfCartesianChart(
              title: ChartTitle(text: "Why does Sunday 28.10 appear twice?"),
              // key: widget.chartKey,
              legend: Legend(
                isVisible: false,
                toggleSeriesVisibility: true,
                position: LegendPosition.top,
                overflowMode: LegendItemOverflowMode.wrap,
              ),
              primaryXAxis: DateTimeAxis(
                name: 'primaryXAxis',
                majorTickLines: const MajorTickLines(width: 1),
                minorTickLines: const MinorTickLines(width: 0),
                majorGridLines: const MajorGridLines(width: 1),
                minorGridLines: const MinorGridLines(width: 0.5),
                autoScrollingMode: AutoScrollingMode.end,
                autoScrollingDeltaType: DateTimeIntervalType.days,
                minimum: widget.data.first.time.subtract(Duration(days: 1)),
                maximum: widget.data.last.time.add(Duration(days: 1)),
                initialVisibleMinimum: widget.data.first.time,
                initialVisibleMaximum: widget.data.first.time.add(
                  Duration(days: 7),
                ),
                intervalType: DateTimeIntervalType.days,
                desiredIntervals: 7,
                minorTicksPerInterval: 1,
                labelAlignment: LabelAlignment.center,
                interval: 1,
                dateFormat: DateFormat('E\nd.M\nyyyy'),
              ),
              primaryYAxis: NumericAxis(
                minorTicksPerInterval: 1,
                minimum: 100,
                maximum: 200,
                interval: 10,
                majorTickLines: const MajorTickLines(width: 1),
                minorTickLines: const MinorTickLines(width: 0.5),
                majorGridLines: const MajorGridLines(width: 1),
                minorGridLines: const MinorGridLines(width: 0.2),
              ),
              series: <CartesianSeries>[
                SplineSeries<EntryValue, DateTime>(
                  xAxisName: "primaryXAxis",
                  animationDuration: 10,
                  animationDelay: 0,
                  isVisibleInLegend: true,
                  dataSource: widget.data,
                  xValueMapper: (EntryValue item, _) => item.time,
                  yValueMapper: (EntryValue item, _) => item.value,
                  markerSettings: const MarkerSettings(
                    isVisible: true,
                    width: 5,
                    height: 5,
                    shape: DataMarkerType.diamond,
                    color: Colors.orange,
                    borderColor: Colors.red,
                    borderWidth: 1,
                  ),
                  cardinalSplineTension: 0,
                  color: Colors.red,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}