-
-
Notifications
You must be signed in to change notification settings - Fork 76
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
WIP: Add JSXGraph and Plotly.js graph output to Plots.
- Loading branch information
Showing
10 changed files
with
282 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| ################################################################################ | ||
| # WeBWorK Online Homework Delivery System | ||
| # Copyright © 2000-2023 The WeBWorK Project, https://github.com/openwebwork | ||
| # | ||
| # This program is free software; you can redistribute it and/or modify it under | ||
| # the terms of either: (a) the GNU General Public License as published by the | ||
| # Free Software Foundation; either version 2, or (at your option) any later | ||
| # version, or (b) the "Artistic License" which comes with this package. | ||
| # | ||
| # This program is distributed in the hope that it will be useful, but WITHOUT | ||
| # ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS | ||
| # FOR A PARTICULAR PURPOSE. See either the GNU General Public License or the | ||
| # Artistic License for more details. | ||
| ################################################################################ | ||
|
|
||
| =head1 DESCRIPTION | ||
| This is the code that takes a C<Plots::Plot> and creates a jsxgraph graph of the plot. | ||
| See L<plots.pl> for more details. | ||
| =cut | ||
|
|
||
| package Plots::JSX; | ||
|
|
||
| use strict; | ||
| use warnings; | ||
|
|
||
| sub new { | ||
| my ($class, $pgplot) = @_; | ||
|
|
||
| $pgplot->insert_css('node_modules/jsxgraph/distrib/jsxgraph.css'); | ||
| $pgplot->insert_js('node_modules/jsxgraph/distrib/jsxgraphcore.js'); | ||
|
|
||
| return bless { pgplot => $pgplot }, $class; | ||
| } | ||
|
|
||
| sub pgplot { | ||
| my $self = shift; | ||
| return $self->{pgplot}; | ||
| } | ||
|
|
||
| sub HTML { | ||
| my $self = shift; | ||
| my $board = $self->{board}; | ||
| my $JS = $self->{JS}; | ||
|
|
||
| return <<END_HTML; | ||
| $board | ||
| <script> | ||
| (() => { | ||
| const draw_board = () => { | ||
| $JS | ||
| } | ||
| if (document.readyState === 'loading') window.addEventListener('DOMContentLoaded', draw_board); | ||
| else draw_board(); | ||
| })(); | ||
| </script> | ||
| END_HTML | ||
| } | ||
|
|
||
| sub init_graph { | ||
| my $self = shift; | ||
| my $pgplot = $self->pgplot; | ||
| my $axes = $pgplot->axes; | ||
| my $grid = $axes->grid; | ||
| my $name = $self->{name}; | ||
| my $title = $axes->style('title'); | ||
| my ($xmin, $ymin, $xmax, $ymax) = $axes->bounds; | ||
| my ($height, $width) = $pgplot->size; | ||
| my $style = 'display: inline-block; margin: 5px; text-align: center;'; | ||
|
|
||
| $title = "<strong>$title</strong>" if $title; | ||
| $self->{board} = <<END_HTML; | ||
| <div style="$style">$title | ||
| <div id="board_$name" class="jxgbox" style="width: ${width}px; height: ${height}px;"></div> | ||
| </div> | ||
| END_HTML | ||
| $self->{JS} = <<END_JS; | ||
| const board_$name = JXG.JSXGraph.initBoard( | ||
| 'board_$name', | ||
| { | ||
| boundingbox: [$xmin, $ymax, $xmax, $ymin], | ||
| axis: true, | ||
| showNavigation: false, | ||
| showCopyright: false, | ||
| } | ||
| ); | ||
| END_JS | ||
| } | ||
|
|
||
| sub draw { | ||
| my $self = shift; | ||
| my $pgplot = $self->pgplot; | ||
| my $name = $pgplot->get_image_name =~ s/-/_/gr; | ||
| $self->{name} = $name; | ||
|
|
||
| $self->init_graph; | ||
|
|
||
| # Plot Data | ||
| for my $data ($pgplot->data('function', 'dataset')) { | ||
| $data->gen_data; | ||
| $self->{JS} .= | ||
| "\n\t\tboard_$name.create('curve', [[" . (join(',', $data->x)) . "],[" . (join(',', $data->y)) . "]]);"; | ||
| } | ||
| return $self->HTML; | ||
| } | ||
| 1; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| ################################################################################ | ||
| # WeBWorK Online Homework Delivery System | ||
| # Copyright © 2000-2023 The WeBWorK Project, https://github.com/openwebwork | ||
| # | ||
| # This program is free software; you can redistribute it and/or modify it under | ||
| # the terms of either: (a) the GNU General Public License as published by the | ||
| # Free Software Foundation; either version 2, or (at your option) any later | ||
| # version, or (b) the "Artistic License" which comes with this package. | ||
| # | ||
| # This program is distributed in the hope that it will be useful, but WITHOUT | ||
| # ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS | ||
| # FOR A PARTICULAR PURPOSE. See either the GNU General Public License or the | ||
| # Artistic License for more details. | ||
| ################################################################################ | ||
|
|
||
| =head1 DESCRIPTION | ||
| This is the code that takes a C<Plots::Plot> and creates a Plotly.js graph of the plot. | ||
| See L<plots.pl> for more details. | ||
| =cut | ||
|
|
||
| package Plots::Plotly; | ||
|
|
||
| use strict; | ||
| use warnings; | ||
|
|
||
| sub new { | ||
| my ($class, $pgplot) = @_; | ||
|
|
||
| $pgplot->insert_js('node_modules/plotly.js-dist-min/plotly.min.js'); | ||
|
|
||
| return bless { pgplot => $pgplot, plots => [] }, $class; | ||
| } | ||
|
|
||
| sub pgplot { | ||
| my $self = shift; | ||
| return $self->{pgplot}; | ||
| } | ||
|
|
||
| sub HTML { | ||
| my $self = shift; | ||
| my $pgplot = $self->pgplot; | ||
| my $axes = $pgplot->axes; | ||
| my $grid = $axes->grid; | ||
| my $name = $pgplot->get_image_name =~ s/-/_/gr; | ||
| my $title = $axes->style('title'); | ||
| my $plots = ''; | ||
| my ($xmin, $ymin, $xmax, $ymax) = $axes->bounds; | ||
| my ($height, $width) = $pgplot->size; | ||
| my $style = 'border: solid 2px; display: inline-block; margin: 5px; text-align: center;'; | ||
|
|
||
| $title = "<strong>$title</strong>" if $title; | ||
| for (@{ $self->{plots} }) { | ||
| $plots .= $_; | ||
| } | ||
|
|
||
| return <<END_HTML; | ||
| <div style="$style">$title | ||
| <div id="plotlyDiv_$name" style="width: ${width}px; height: ${height}px;"></div> | ||
| </div> | ||
| <script> | ||
| (() => { | ||
| const draw_graph = () => { | ||
| const plotlyData = []; | ||
| $plots | ||
| Plotly.newPlot('plotlyDiv_$name', plotlyData); | ||
| } | ||
| if (document.readyState === 'loading') window.addEventListener('DOMContentLoaded', draw_graph); | ||
| else draw_graph(); | ||
| })(); | ||
| </script> | ||
| END_HTML | ||
| } | ||
|
|
||
| sub draw { | ||
| my $self = shift; | ||
| my $pgplot = $self->pgplot; | ||
|
|
||
| # Plot Data | ||
| for my $data ($pgplot->data('function', 'dataset')) { | ||
| $data->gen_data; | ||
|
|
||
| my $x_points = join(',', $data->x); | ||
| my $y_points = join(',', $data->y); | ||
| my $plot = <<END_JS; | ||
| plotlyData.push({ | ||
| x: [$x_points], | ||
| y: [$y_points], | ||
| mode: 'lines' | ||
| }); | ||
| END_JS | ||
| push(@{ $self->{plots} }, $plot); | ||
| } | ||
|
|
||
| return $self->HTML; | ||
| } | ||
|
|
||
| 1; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.