vega_embed_flutter 0.6.3 copy "vega_embed_flutter: ^0.6.3" to clipboard
vega_embed_flutter: ^0.6.3 copied to clipboard

A Flutter widget to embed vega-lite charts to flutter web. Works only in Flutter web as of now. This could be adapted to be used with flutter webview widget.

pub package

vega_embed_flutter #

A Flutter widget to embed vega-lite charts to flutter web and flutter apps using webview_flutter. Works consistently in Flutter web as of now. SInternally it uses vega-embed js library to embed these specs using JS interops and HTMLElementView.

A Demo page with examples for different vega-embed options is available below.

https://abhilash-chandran.github.io/vega_embed_flutter/

A demo page

A full fledged demo page with various charts utilizing this package is avalaible here

Demo Page Gif

Since flutter web_view is still in developer preview, vega_embed_flutter's web_view support should also be considered as a developer preview. Flutter web view demo

Credits #

This widget is made possible only because of the great works done by the team behind vega-embed, vega-Lite and vega. For a detailed documentation of how visualize using Vega-lite specs please head to their doumentation page.

General Setup Steps for flutter web #

Start by adding the script tag for vega related java script files. For example.

Index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
    <title>vega_flutter</title>
  </head>
  <body>
    <script src="main.dart.js" type="application/javascript"></script>
  </body>
</html>

Add your vega lite specification files #

Vega-Lite and Vega defines its visualsation in the form of json file. So for you project it would be easy to maintain all this vega-lite spec files in a folder say vega_lite_specs folder. For example

$Project_root\vega_lite_specs
              |_ bart_chart.json
              |_ interactive_multiline_plot.json
              |_ interactive_splom.json

Add assets entry in pupspec.yaml #

In order for the web build to pick up the json schemas add it your pubspec.yaml. For e.g.

flutter:
  uses-material-design: true
  # This line includes all the files these directories during the build process
  # and placess them under build/web/assets folder.
  assets:
    - vega_lite_specs/

Import the file and use the widget #

Just import the vega_embed_flutter library as below

import 'package:vega_embed_flutter/vega_embed_flutter.dart';

Create a normal stateless/ful widget and use it as a normal stateless/ful widget.

class BarChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return VegaLiteEmbedder(
      viewFactoryId: 'MyBarChart',
      vegaLiteSpecLocation: '/assets/vega_lite_specs/bar_chart.json',
    );
  }
}

General set for normal flutter app #

Follow the Add your vega lite schema files section and Add assets entry in pupspec.yaml as mentioned above.

Import web view specific file and use the widget #

Import the vega embed view specific librarys as below import 'package:vega_embed_flutter/vega_embed_webview.dart';

Create a normal stateless/ful widget and use it as a normal stateless/ful widget.

class ExampleWebViewApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Center(
          child: Column(
            children: [
              Expanded(
                child: VegaLiteWebViewEmbedder(
                  vegaLiteSpecLocation: 'vega_lite_specs/bar_chart copy.json',
                ),
              ),
              Expanded(
                child: VegaLiteWebViewEmbedder(
                  vegaLiteSpecLocation:
                      'vega_lite_specs/interactive_index_chart.vl.json',
                  vegaEmbedOptions: VegaEmbedOptions(theme: 'dark'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

VegaEmbed Options [WIP](available only for web) #

Following vega-embed options are tested and are available as part of demo page. If you need further comprehensive options to be tested or enabled please do raise and issue so that I can spend time on options which are necessary.

For a detailed description of what each vega embed options check this page. https://github.com/vega/vega-embed#options

Embed Options Working Comments
mode 🚧 Avialble but not tested.
theme 💯 Check here for detials on the themes. Valid values are [excel, ggplot2, quartz, vox, fivethirtyeight , dark, latimes, urbaninstitute, googlecharts]
defaultStyle ✔️
renderer ✔️
logLevel 🚧
tooltip 🤔 Let me know if you need it
loader
patch
width ✔️ Note: ⚠️ width mentioned in spec overrides this.
height ✔️ Note: ⚠️ Height mentioned in spec overrides this.
padding ✔️
actions 🚧 Note: ⚠️ an example is shown to remove actions. But its not complete to spec.
scaleFactor ✔️ Note: This is a scale factor for the exported file, not the plot.
config 🤔 Let me know if you need it. Porting config object to dart will take lot of effort to test.
editorUrl 🚧 Avialble but not tested.
sourceHeader 🚧 Avialble but not tested.
sourceFooter 🚧 Avialble but not tested.
hover 🤔 Let me know if you need it.
i18n ✔️
downloadFileName ✔️
formatLocale 🚧 Avialble but not tested.
timeFormatLocale 🚧 Avialble but not tested.

Any kind of code, idea, suggestions are welcome. Please check the repository and file your feedbacks and bugs which is highly appreciated.

5
likes
40
pub points
21%
popularity

Publisher

verified publisherabhilash-chandran.com

A Flutter widget to embed vega-lite charts to flutter web. Works only in Flutter web as of now. This could be adapted to be used with flutter webview widget.

Repository (GitHub)
View/report issues

License

MIT (license)

Dependencies

flutter, freezed_annotation, js, pedantic, webview_flutter

More

Packages that depend on vega_embed_flutter