highchartjs 0.0.2

A wrapper implementation for Highcharts.js

example/lib/main.dart

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:highchartjs/highchartjs.dart';
import 'package:timeago/timeago.dart' as timeago;
import 'constants.dart';

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

String getFormattedDateTime(double recordingTimeSecs) {
  return timeago.format(
    DateTime.fromMillisecondsSinceEpoch(recordingTimeSecs.toInt()),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Highcharts with Interaction',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ChartPage(),
    );
  }
}

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

  @override
  ChartPageState createState() => ChartPageState();
}

class ChartPageState extends State<ChartPage> {
  final GlobalKey<HighChartsState> _chartKey = GlobalKey<HighChartsState>();

  // Using ValueNotifier for selectedCommentId to avoid rebuilding the entire widget
  final ValueNotifier<int?> selectedCommentIdNotifier =
      ValueNotifier<int?>(null);

  @override
  Widget build(BuildContext context) {
    // Construct the chart options using the model
    HighchartsChartOptions chartOptions = HighchartsChartOptions(
      chartType: 'line',
      title: HighchartsTitle(text: 'Blood Glucose vs Blood Lectate Over Time'),
      yAxis: HighchartsYAxis(
        title: HighchartsAxisTitle(text: 'Blood Glucose (mg/dL)'),
      ),
      xAxis: HighchartsXAxis(
        type: 'datetime',
        title: HighchartsAxisTitle(text: 'Date'),
        labels: HighchartsAxisLabels(
          format: '{value:%Y-%m-%d}',
        ),
      ),
      series: datapoints,
    );

    return Scaffold(
      appBar: AppBar(
        title: const Text("Highcharts Integration Demo"),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: HighCharts(
              key: _chartKey,
              options: chartOptions,
              size: const Size(600, 400),
              scripts: const [
                "https://code.highcharts.com/highcharts.js",
                'https://code.highcharts.com/modules/networkgraph.js',
                'https://code.highcharts.com/modules/exporting.js',
              ],
              onEventTriggered: (eventData) {
                final decoded = jsonDecode(eventData) as Map<String, dynamic>;
                final commentId = decoded['custom']['comment_id'] as int;

                // Update the ValueNotifier instead of using setState
                selectedCommentIdNotifier.value = commentId;
              },
            ),
          ),
          Expanded(
            child: ValueListenableBuilder<int?>(
              valueListenable: selectedCommentIdNotifier,
              builder: (context, selectedCommentId, _) {
                return ListView(
                  children: comments.map((comment) {
                    return ListTile(
                      leading: const Icon(Icons.account_circle),
                      title: Text(comment.content),
                      subtitle: Text(
                        getFormattedDateTime(comment.timestamp),
                      ),
                      selected: comment.id == selectedCommentId,
                      onTap: () {
                        final indices = getIndices(comment.id);
                        if (indices != null && indices.isNotEmpty) {
                          _chartKey.currentState
                              ?.triggerTooltip(indices[0], indices[1]);
                        }
                        // Update the ValueNotifier instead of using setState
                        selectedCommentIdNotifier.value = comment.id;
                      },
                    );
                  }).toList(),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}