Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/emaringolo/seaside-plotlyjs
Seaside wrappers for Plotly.js
https://github.com/emaringolo/seaside-plotlyjs
charts pharo plotlyjs plotting seaside smalltalk vastplatform web
Last synced: about 2 months ago
JSON representation
Seaside wrappers for Plotly.js
- Host: GitHub
- URL: https://github.com/emaringolo/seaside-plotlyjs
- Owner: eMaringolo
- License: mit
- Created: 2021-11-01T00:38:31.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T00:13:28.000Z (about 2 years ago)
- Last Synced: 2024-10-09T13:25:11.183Z (2 months ago)
- Topics: charts, pharo, plotlyjs, plotting, seaside, smalltalk, vastplatform, web
- Language: Smalltalk
- Homepage:
- Size: 68.4 KB
- Stars: 7
- Watchers: 4
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# seaside-plotlyjs
This library provides a wrapper, including a builder class and specific abstractions, to create [Plotly.js](https://plotly.com/javascript/) plots from your [Seaside](https://github.com/SeasideSt/Seaside) canvas classes.
## Sample code
```smalltalk
renderContentOn: html
| plotly |
html div id: 'plotContainer'.
plotly := html plotly: 'plotContainer'.
plotly
data:
{(PlotlyTrace scatter
name: 'Scatter series';
showlegend: true;
mode: 'markers';
x: (1 to: 10);
y: ((1 to: 10) collect: [ :each | 10 atRandom / 2 ]);
yourself).
(PlotlyTrace scatter
name: 'Line series';
showlegend: true;
x: (1 to: 10);
y: ((1 to: 10) collect: [ :each | 10 atRandom / 2 ]);
yourself)};
layout:
(PlotlyLayout new
title: (PlotlyText text: 'Simple plot');
width: 500 height: 300;
yourself).
plotly config beResponsive.
html document addLoadScript: plotly
```
```smalltalk
renderContentOn: html
| plotly |
html div id: 'plotContainer'.
plotly := html plotly: 'plotContainer'.
plotly
data:
{(PlotlyTrace pie
hole: 0.4;
values: #(19 , 26 , 55);
labels: #('Residential' , 'Non-Residential' , 'Utility'))};
layout:
(PlotlyLayout new
title: (PlotlyText text: 'Donut Chart');
width: 500 height: 300;
yourself).
plotly config beResponsive.
html document addLoadScript: plotly
```
## Installation
### Pharo 8.0 or newer
```smalltalk
Metacello new
repository: 'github://emaringolo/seaside-plotlyjs/src';
baseline: 'Plotly';
load.
```
### VAST Platform (VA Smalltalk) 10.0.02 or newer
* Load `ENVY/Image Tonel support` feature
* Load `ST: Server Smalltalk (SST) - Seaside` feature
* Clone this repository to a local drive
```smalltalk
| loader path |
path := (CfsPath named: 'path\to\repository'). "Path to the cloned repository"
loader := TonelLoader readFromPath: path.
loader
createsHookMethods: true;
beUnattended;
useGitVersion;
loadApplicationsForPackagesNamed: #('Seaside-Plotly-Core' 'Seaside-Plotly-Examples').
```
## Plotly.js library
Given that the full Plotly.js library is heavy (~3.5MB mimized) and it is common to [build a custom bundle](https://github.com/plotly/plotly.js/blob/master/CUSTOM_BUNDLE.md) with only the plots used, this wrapper doesn't provide a [FileLibrary](https://github.com/SeasideSt/Seaside/wiki/FileLibrary), and instead you have to link to the library, either by using a [CDN](https://plotly.com/javascript/getting-started/#plotlyjs-cdn) or downloading it and linking to the file location.
```smalltalk
updateRoot: anHtmlRoot
super updateRoot: anHtmlRoot.
anHtmlRoot script url: 'https://cdn.plot.ly/plotly-2.4.2.min.js'.
"..."
```
## Examples
After installing the default group, you can access `http://localhost:8080/plotly` to access an example component showing the different kind of plots, and the smalltalk code to produce them.
## Future steps
Add more examples about how to create other kind of plots (Surface, Mesh), and multiple plots, axis sharing, etc.