seaside-plotlyjs

This library provides a wrapper, including a builder class and specific abstractions, to create Plotly.js plots from your Seaside canvas classes.

Sample code

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

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

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

| 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 with only the plots used, this wrapper doesn't provide a FileLibrary, and instead you have to link to the library, either by using a CDN or downloading it and linking to the file location.

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.

emaringolo / seaside-plotlyjs Goto Github PK