import 'package:flutter/material.dart';
import 'package:date_format/date_format.dart';
import 'package:fl_chart/fl_chart.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: FundDetails(),
    );
  }
}

class FundDetails extends StatefulWidget {
  @override
  _FundDetailsState createState() => _FundDetailsState();
}
class _FundDetailsState extends State<FundDetails> {
  @override
  void initState() {
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child:ListView(
            padding: EdgeInsets.symmetric(horizontal: 17),
            children: [
              _fundDetailView(),
            ],
          )
        )
    );
  }
  Widget _fundDetailView() {
    return Container(
      margin: EdgeInsets.only(top: 20),
      padding: EdgeInsets.symmetric(vertical: 10),
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(
            color: Color.fromRGBO(83, 75, 255, 0.2),
            blurRadius: 5.0,
          )
        ],
        borderRadius: BorderRadius.all(Radius.circular(20)),
        color: Colors.white
      ),
      child: Column(
        children: <Widget>[
          _contentChart(), // 图表
        ],
      ),
    );
  }
  Widget _contentChart() {
    return AspectRatio(
      aspectRatio: 1.4,
      child: Container(
        child: LineChart(mainData([[1571184000000.0,100.0000000000000000],[1571270400000.0,100.0000000000000000],[1571356800000.0,100.0000000000000000],[1571443200000.0,100.0000000000000000],[1571529600000.0,100.0000000000000000],[1571616000000.0,100.0000000000000000],[1571702400000.0,100.0000000000000000],[1571788800000.0,100.0000000000000000],[1571875200000.0,100.0000000000000000],[1571961600000.0,100.0000000000000000],[1572048000000.0,100.0627393523492811],[1572134400000.0,100.0627161091860813],[1572220800000.0,100.0627183915574731],[1572307200000.0,100.0627263955307099],[1572393600000.0,100.0627461764242253],[1572480000000.0,100.5293898275533098],[1572566400000.0,100.4407267117080339],[1572652800000.0,100.4755815282014865],[1572739200000.0,100.3316240132237727],[1572825600000.0,100.4161674297245682],[1572912000000.0,100.3781055520074819],[1572998400000.0,100.1933577155741067],[1573084800000.0,100.2331401486804290],[1573171200000.0,100.3345663343550124],[1573257600000.0,100.0744385513269899],[1573344000000.0,100.3878996453965290],[1573430400000.0,100.0126406862375916],[1573516800000.0,100.2678207386322092],[1573603200000.0,100.3313325956094319],[1573689600000.0,100.6297790325812605],[1573776000000.0,100.2831576440166553],[1573862400000.0,100.3752786133184471],[1573948800000.0,100.7602983435129214],[1574035200000.0,100.7708718718803506],[1574121600000.0,100.7855753599534450],[1574208000000.0,100.9353393680607506],[1574294400000.0,99.9291085586467752],[1574380800000.0,99.9323748720583576],[1574467200000.0,100.2780302874188251],[1574553600000.0,100.6909203373372683],[1574640000000.0,100.1928460351215344],[1574726400000.0,100.4513804632275000],[1574812800000.0,100.9453707623025000],[1574899200000.0,100.3406715022950000],[1574985600000.0,99.9432729805650000],[1575072000000.0,100.2888967847966417],[1575158400000.0,100.4137177735448350],[1575244800000.0,99.8165820314538715],[1575331200000.0,99.6197022965446593],[1575417600000.0,100.3604212634811412],[1575504000000.0,100.0898291309232904],[1575590400000.0,100.6987369279574329],[1575676800000.0,100.1275646671325839],[1575763200000.0,100.6507758228790306],[1575849600000.0,100.0143265754101295],[1575936000000.0,99.8668852754555244],[1576022400000.0,97.6977245683050542],[1576108800000.0,100.2889945633957030],[1576195200000.0,99.9282619535362420],[1576281600000.0,99.9294276686246443],[1576368000000.0,101.3739423305997305],[1576454400000.0,99.9301180775821008],[1576540800000.0,100.3805374096460123],[1576627200000.0,100.8141688605030659],[1576713600000.0,100.7593223958590559],[1576800000000.0,100.5956012302150679],[1576886400000.0,100.3017714583869146],[1576972800000.0,100.4749671001993830],[1577059200000.0,100.1311830219379899],[1577145600000.0,101.17191477248163270223825714]], true)),
      ),
    );
  }
}
LineChartData mainData(lineList, [hasTouch]) {
  var max = lineList[0][1];
  var min = lineList[0][1];
  var isTouch = hasTouch==null || hasTouch == false?false:true;
  List<FlSpot> spot = List<FlSpot>.from(lineList.map((item) {
    if (item[1].toDouble() > max) {
      max = item[1].toDouble();
    }
    if (item[1].toDouble() < min) {
      min = item[1].toDouble();
    }
    return FlSpot(item[0].toDouble(), item[1].toDouble());
  }
  ).toList());
  return LineChartData(
    minY: min.toDouble()*0.995,
    maxY: max.toDouble()*1.005,
    clipToBorder: true,
    lineTouchData: LineTouchData(
        enabled: isTouch,
        touchTooltipData: LineTouchTooltipData(
          getTooltipItems: (touchedSpots) {
            return touchedSpots.map((LineBarSpot touchedSpot) {
              if (touchedSpot == null) {
                return null;
              }
              final TextStyle textStyle = TextStyle(
                color: Color.fromRGBO(19, 23, 125, 1),
                fontWeight: FontWeight.bold,
                fontSize: 14,
              );
              return LineTooltipItem(formatDate(DateTime.fromMicrosecondsSinceEpoch(touchedSpot.x.toInt() * 1000), [yyyy, '-', mm, '-', dd]) + '\n' + touchedSpot.y.toStringAsFixed(2), textStyle);
            }).toList();
          }
        )
    ),
    extraLinesData: ExtraLinesData(
        showHorizontalLines: false,
        horizontalLines: [
          HorizontalLine(
              x: 2,
              strokeWidth: 1
          )
        ]
    ),  // 额外的基准线
    gridData: FlGridData(
      show: false,  // 网格是否展示
    ),
    titlesData: FlTitlesData(
      show: false,  // 是否展示X 和Y 轴的说明
      bottomTitles: SideTitles(
        showTitles: false,
        reservedSize: 22,
        textStyle: TextStyle(
            color: const Color(0xff68737d),
            fontWeight: FontWeight.bold,
            fontSize: 16
        ),
        margin: 8,
        interval: 1000.0,
        getTitles: (value) {
          if (value.toInt() == lineList[0][0].toInt() || value.toInt() == lineList[lineList.length-1][0].toInt()) {
             return formatDate(DateTime.fromMicrosecondsSinceEpoch(value.toInt() * 1000), [yyyy, '/', mm, '/', dd]);
          } else {
            
          }
          return '';
        },
      ),
      leftTitles: SideTitles(
        showTitles: true,
        textStyle: TextStyle(
          color: const Color(0xff67727d),
          fontWeight: FontWeight.bold,
          fontSize: 8,
        ),
        reservedSize: 14,
        margin: 0,
        getTitles: (value) {
            return value.toInt().toString();
        },
      ),
    ),
    borderData: FlBorderData(
        show: false,
        border: Border.all(color: const Color(0xff37434d), width: 1)
    ),  // 是否有边框
    lineBarsData: [
      LineChartBarData(
        spots: spot,
        isCurved: true,
        colors: [
          Color.fromRGBO(0, 184, 255, 1)
        ],
        barWidth: 1.5,
        isStrokeCapRound: true,
        dotData: const FlDotData(
          show: false,
        ),
        belowBarData: BarAreaData(
          show: true,
          colors: [
            Color.fromRGBO(0, 184, 255, 0.3),
            Color.fromRGBO(0, 184, 255, 0.0)
          ],
          gradientFrom: const Offset(0, 0),
          gradientTo: const Offset(0, 1),
          gradientColorStops: [
            0, 100
          ],
        ),
      ),
    ],
  );
}