import 'package:flutter/material.dart';
import 'package:graphic/graphic.dart';

import 'data.dart';

class StatsPage extends StatefulWidget {
  const StatsPage({super.key});

  @override
  State<StatsPage> createState() => _StatsPage();
}

class _StatsPage extends State<StatsPage> {
  var _smooth = false;
  var _stepped = false;

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Center(
        child: Column(
          children: <Widget>[
            Container(
              margin: const EdgeInsets.only(top: 10),
              width: 350,
              height: 300,
              child: Chart(
                data: basicData,
                variables: {
                  'genre': Variable(
                    accessor: (Map map) => map['genre'] as String,
                  ),
                  'sold': Variable(accessor: (Map map) => map['sold'] as num),
                },
                marks: [
                  IntervalMark(
                    label: LabelEncode(
                      encoder: (tuple) => Label(tuple['sold'].toString()),
                    ),
                    elevation: ElevationEncode(
                      value: 0,
                      updaters: {
                        'tap': {true: (_) => 5},
                      },
                    ),
                    color: ColorEncode(
                      value: Defaults.primaryColor,
                      updaters: {
                        'tap': {false: (color) => color.withAlpha(100)},
                      },
                    ),
                  ),
                ],
                axes: [Defaults.horizontalAxis, Defaults.verticalAxis],
                selections: {'tap': PointSelection(dim: Dim.x)},
                tooltip: TooltipGuide(),
                crosshair: CrosshairGuide(),
              ),
            ),
            Container(
              padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),
              child: const Text(
                'Transposed Bar Chart',
                style: TextStyle(fontSize: 20),
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 10),
              width: 350,
              height: 300,
              child: Chart(
                data: basicData,
                variables: {
                  'genre': Variable(
                    accessor: (Map map) => map['genre'] as String,
                  ),
                  'sold': Variable(accessor: (Map map) => map['sold'] as num),
                },
                transforms: [Proportion(variable: 'sold', as: 'percent')],
                marks: [
                  IntervalMark(
                    position: Varset('percent') / Varset('genre'),
                    label: LabelEncode(
                      encoder: (tuple) => Label(tuple['sold'].toString()),
                    ),
                    color: ColorEncode(
                      variable: 'genre',
                      values: Defaults.colors10,
                    ),
                    modifiers: [StackModifier()],
                  ),
                ],
                coord: PolarCoord(transposed: true, dimCount: 1, dimFill: 1.05),
              ),
            ),
          ],
        ),
      ),
    );
  }
}