JavaScript::Google::Charts — prompts

Controls and Dashboards

Links: "Controls and Dashboards".

This Raku package produces HTML/JavaScript code for Google Charts via Raku code. 
I want to add controls and dashboards to the charts. 
I am not sure should these additions be made per char type (Scatter chart, Bar chart, etc.) or 
there is a possible universal Raku sub that can take, say, a JSON spec with the data, type of chart and the controls. 

Please review the Raku and outline a possible implementation plan. Do not implement anything yet.
Ok. This is a good plan. Proceed implementing it. 
Program the dashboard specific Raku code in "./lib/JavaScript/Google/Charts/Dashboard.rakumod",
the Google snippets can be in "CodeSnippets.rakumod". 
The top level sub `js-google-charts-dashboard` should be in "./lib/JavaScript/Google/Charts.rakumod".
Good. I have a Raku data of the form `[{x => 1.3, y => 3.3, index => 0, level => 1 }, ...]` 
make a Raku script in "./examples" that creates a dashboard with control for the index 
that scatter-plots all points with index up to slider's value.

Proper respect for column names

It looks like the named argument column-names is not respected in the calls of `js-google-charts`.
So, I am using `.subst` like in the code below. Any suggestions to fix this?

```raku
#% html
my @wide-data = @fin-data.kv.map(-> $i, @point {
    %(
        x => DateTime.new(Instant.from-posix(@point.head - $date-offset)),
        data => @point.tail,
        fit => @q-funcs[0](@point.head),
        anomaly => $i ∈ @pos ?? @point.tail !! Nil
    )
}).Array;

say deduce-type(@wide-data);

js-google-charts('Scatter', 
    @wide-data.map(*<x data fit anomaly>),
    title => 'Financial data, fit, and anomalies',
    :$titleTextStyle,
    series => { 
        0 => {color => 'Gray', pointSize => 2}, 
        1 => {color => 'SteelBlue', type => 'line', lineWidth => 3, pointSize => 0},
        2 => {color => 'Red', pointSize => 3},
    },
    legend => {
        position => 'right',
        textStyle => {
            color => '#dad5d5',
            fontSize => 12
        }
    },
    hAxis => {
        title => 'Date',
        format => 'yyyy-MM-dd'
    },
    :$backgroundColor, 
    :$chartArea, 
    :$format,
    :700width,
    :450height,
    div-id => 'fin-data-outliers'
)
.subst("data.addColumn('number', '1')", "data.addColumn('number', 'data')")
.subst("data.addColumn('number', '2')", "data.addColumn('number', 'fit')")
.subst("data.addColumn('number', '3')", "data.addColumn('number', 'anomaly')")
```

JavaScript::Google::Charts v0.1.1

Generation of JavaScript's Google Charts code for plots and charts.

Authors

  • Anton Antonov

License

Artistic-2.0

Dependencies

JSON::Fast:ver<0.17+>Hash::Merge:ver<2.0.0+>:api<2+>Data::TypeSystem:ver<0.1.4+>

Test Dependencies

Provides

  • JavaScript::Google::Charts
  • JavaScript::Google::Charts::CodeSnippets
  • JavaScript::Google::Charts::Dashboard
  • JavaScript::Google::Charts::DataTable

The Camelia image is copyright 2009 by Larry Wall. "Raku" is a trademark of the Yet Another Society. All rights reserved.

Built with Podlite — the markup and publishing tools behind this site.