sd-plotly v1.5.0

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

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.