sd-plotly

React implementations of Plotly with Immutable for rendering logic

Installation and use

sd-plotly requires pandas-js DataFrame or Series objects for plotting in order to make rendering logic faster for API-based visualization.

npm install sd-plotly pandas-js

Importing BarPlot

import ReactDOM from 'react-dom'; 
import { BarPlot } from 'sd-plotly';
import { DataFrame } from 'pandas-js';
 
const component = <BarPlot 
    id="my-id-to-render-into"
    data={df}
    xName="x"
    yNames={["y"]}
    yType="$,.0f"
    yTicksFormat="$,.0f"
    xLabel="X"
    yLabel="Y"
    xTicks={[1, 2, 3]}
    title="Title"
    marginTop={50}
  />;
 
ReactDOM.render(component, myDocumentElement);

will create this bar chart:

Components

ScatterPlot

BarPlot

SDPlot

The base React Plotly component for plots

Props

Prop	Type	Description
bargap	number	Gap between the bars in barplot
barmode	union	Type of bar chart to plot
chartType	union	Type of chart
className	string	class to give to SDPlot div
configuration	signature	Plot.ly configuration object
data	union	Data to render in the plot
displayModeBar	boolean	Display the modebar?
fontColor	string	Color to use for the font
fontFamily	string	Name of the font family to use for text
fontScale	number	Scaling factor for the font, relative to 1
gridColor	string	Color to make horizontal/vertical lines on the chart
height	number	Height of plot, in pixels
horizontalLines	boolean	Display horizontal lines on the chart?
hoverinfo	string	Hover info format https://plot.ly/javascript/reference/#scatter-hoverinfo
id	string	Div id with which to render the SDPlot
legendBackgroundColor	string	Background color for the chart legend, if displayed
legendBorderColor	string	Border color for the chart legend, if displayed
legendLocation	union	Location of the chart legend, if displayed
marginBottom	number	Bottom margin for the plot
marginLeft	number	Left margin for the plot
marginRight	number	Right margin for the plot
marginTop	number	Top margin for the plot
opacity	number	Opacity of data points
orientation	union	Orientation of chart
padding	number	Padding in pixels
palette	Array	Array of colors to use for the traces
paperBackgroundColor	string	Color of paper background
plotBackgroundColor	string	Color of plot background
redrawDebounce	number	ms gap during which only the latest redraw requested should occur
resizeDebounce	number	ms gap during which only the latest window resize event should cause a redraw
secondaryAxis	boolean	Include a secondary axis?
showLegend	boolean	Display the legend for the chart?
title	string	Title of the chart
traceNames	Array	Names for each of the traces
traceTypes	Array	Types of each of the traces in the plot
verticalLines	boolean	Display vertical lines on the chart?
width	number	Width of plot, in pixels
xIsDate	boolean	x data is a datetime?
xLabel	string	Label for the x data series to display
xName	string	Name of the x data series
xRangemode	union	Type of range to use for the x axis
xShowTickLabels	boolean	Show x-axis tick labels?
xTickLabels	Array	Array of tick labels to use
xTicksFormat	string	d3 formatting string to format x ticks
xTicksPrefix	string	Prefix to use for x ticks
xTicksReverse	boolean	Reverse the x axis?
xTicksRotation	number	Rotation of x tick labels
xType	string	d3 formatting string to format x values
yHoverFormat	string	d3 formatting string to format y values on hover
yLabel	string	Label for the y data series to display
yNames	Array	Names of the y data series
yRangemode	union	Type of range to use for the y axis
yShowTickLabels	boolean	Show y-axis tick labels?
yTicksFormat	string	d3 formatting string to format y ticks
yTicksPrefix	string	Prefix to use for y ticks
yTicksReverse	boolean	Reverse the y axis?
yTicksRotation	number	Rotation of y tick labels
yType	string	d3 formatting string to format y values

Methods

toString

Returns

string

plotlyResize

Resize the plot on window resize events

_redraw

Redraw the chart when data is updated

layout

Plotly layout object

Returns

signature

{
  title: string,
  paper_bg_color: string,
  height?: number,
  width?: number,
  plot_bg_color: string,
  barmode?: 'relative' | 'group' | 'stack',
  bargap?: number,
  font: {family: string, size: number, color: string},
  xaxis: T_AXIS,
  yaxis: T_AXIS,
  legend: T_LEGEND,
  margin: T_MARGIN,
  showlegend: boolean,
  yaxis2?: T_AXIS_SECONDARY,
  height?: number,
  width?: number,
}

xAxisStyle

Plotly x-axis style object

Returns

signature

{
  title: string,
  autorange: 'reversed' | true,
  titlefont: {size: number},
  tickangle: number,
  tickfont: {size: number},
  gridcolor: string,
  tickprefix: string,
  type: string,
  tickformat: string,
  hoverformat?: string,
  rangemode: 'tozero' | 'nonnegative' | 'normal',
  showticklabels: boolean,
}

yAxisStyle

Plotly y-axis style object

Returns

signature

{
  title: string,
  autorange: 'reversed' | true,
  titlefont: {size: number},
  tickangle: number,
  tickfont: {size: number},
  gridcolor: string,
  tickprefix: string,
  type: string,
  tickformat: string,
  hoverformat?: string,
  rangemode: 'tozero' | 'nonnegative' | 'normal',
  showticklabels: boolean,
}

legend

Plotly legend style object

Returns

signature

{
  x: number,
  y: number,
  font: {size: number},
  bgcolor: string,
  bordercolor: string,
}

margin

Plotly margin style object

Returns

signature

{
  l: number,
  t: number,
  r: number,
  b: number,
  pad: number
}

secondaryAxis

Plotly secondary axis style object

Returns

intersection

T_AXIS & {
  overlaying: 'y',
  side: 'right',
}

chartData

Convert the Immutable.List passed in to the appropriate array format for Plotly.js

Returns

Array

Array<constants.T_TRACE>

chartDataMultiple

Convert the Immutable.List for multiple plot to the appropriate array format for Plotly.js

Returns

Array

Array<constants.T_TRACE>

Development

Testing and build

$ npm run test
$ npm run build

Testing uses Jest. Building requires the babel compiler.