Skip to content

Commit 6b4143a

Browse files
davidctjdavidctj
committed
init commit
0 parents  commit 6b4143a

File tree

8 files changed

+303
-0
lines changed

8 files changed

+303
-0
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
npm-debug.log
2+
.idea
3+
node_modules

‎.npmignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
npm-debug.log
2+
tsconfig.json

‎README.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
# React-PlotlyJS-Typescript
2+
3+
Inspired by [React-PlotlyJS](https://github.com/benjeffery/react-plotlyjs), many thanks!
4+
5+
A react-typescript component for Plotly.JS graphs.
6+
7+
Self-redraw when props changed.
8+
9+
## Usage
10+
11+
```typescript
12+
import PlotlyChart from 'PlotlyChart';
13+
14+
...
15+
16+
17+
18+
render(){
19+
20+
const data = [
21+
{
22+
type: 'scatter', // all "scatter" attributes: https://plot.ly/javascript/reference/#scatter
23+
x: [1, 2, 3], // more about "x": #scatter-x
24+
y: [6, 2, 3], // #scatter-y
25+
marker: { // marker is an object, valid marker keys: #scatter-marker
26+
color: 'rgb(16, 32, 77)' // more about "marker.color": #scatter-marker-color
27+
}
28+
},
29+
{
30+
type: 'bar', // all "bar" chart attributes: #bar
31+
x: [1, 2, 3], // more about "x": #bar-x
32+
y: [6, 2, 3], // #bar-y
33+
name: 'bar chart example' // #bar-name
34+
}
35+
];
36+
const layout = { // all "layout" attributes: #layout
37+
title: 'simple example', // more about "layout.title": #layout-title
38+
xaxis: { // all "layout.xaxis" attributes: #layout-xaxis
39+
title: 'time' // more about "layout.xaxis.title": #layout-xaxis-title
40+
},
41+
annotations: [ // all "annotation" attributes: #layout-annotations
42+
{
43+
text: 'simple annotation', // #layout-annotations-text
44+
x: 0, // #layout-annotations-x
45+
xref: 'paper', // #layout-annotations-xref
46+
y: 0, // #layout-annotations-y
47+
yref: 'paper' // #layout-annotations-yref
48+
}
49+
]
50+
};
51+
52+
return (
53+
<PlotlyChart data={data} layout={layout} />
54+
)
55+
}
56+
57+
58+
```

‎dist/index.d.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/// <reference types="react" />
2+
import * as React from 'react';
3+
export interface IPlotlyChartProps {
4+
data: any[];
5+
layout?: any;
6+
config?: any;
7+
onClick?: (data: any) => any;
8+
onBeforeHover?: (data: any) => any;
9+
onHover?: (data: any) => any;
10+
onUnHover?: (data: any) => any;
11+
onSelected?: (data: any) => any;
12+
}
13+
/***
14+
* Usage:
15+
* <PlotlyChart data={toJS(this.model_data)}
16+
* layout={layout}
17+
* onClick={({points, event}) => console.log(points, event)}>
18+
*/
19+
declare class PlotlyChart extends React.Component<IPlotlyChartProps, any> {
20+
container: any;
21+
attachListeners(): void;
22+
resize: () => void;
23+
draw: (props: IPlotlyChartProps) => void;
24+
componentWillReceiveProps(nextProps: IPlotlyChartProps): void;
25+
componentDidMount(): void;
26+
componentWillUnmount(): void;
27+
render(): JSX.Element;
28+
}
29+
export default PlotlyChart;

‎dist/index.js

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
"use strict";
2+
var __extends = (this && this.__extends) || (function () {
3+
var extendStatics = Object.setPrototypeOf ||
4+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
5+
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
6+
return function (d, b) {
7+
extendStatics(d, b);
8+
function __() { this.constructor = d; }
9+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
10+
};
11+
})();
12+
var __assign = (this && this.__assign) || Object.assign || function(t) {
13+
for (var s, i = 1, n = arguments.length; i < n; i++) {
14+
s = arguments[i];
15+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
16+
t[p] = s[p];
17+
}
18+
return t;
19+
};
20+
var __rest = (this && this.__rest) || function (s, e) {
21+
var t = {};
22+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
23+
t[p] = s[p];
24+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
25+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
26+
t[p[i]] = s[p[i]];
27+
return t;
28+
};
29+
Object.defineProperty(exports, "__esModule", { value: true });
30+
var React = require("react");
31+
var plotlyInstance = require("plotly.js/dist/plotly.js");
32+
var lodash_1 = require("lodash");
33+
/***
34+
* Usage:
35+
* <PlotlyChart data={toJS(this.model_data)}
36+
* layout={layout}
37+
* onClick={({points, event}) => console.log(points, event)}>
38+
*/
39+
var PlotlyChart = /** @class */ (function (_super) {
40+
__extends(PlotlyChart, _super);
41+
function PlotlyChart() {
42+
var _this = _super !== null && _super.apply(this, arguments) || this;
43+
_this.container = null;
44+
_this.resize = function () {
45+
plotlyInstance.Plots.resize(_this.container);
46+
};
47+
_this.draw = function (props) {
48+
var data = props.data, layout = props.layout, config = props.config;
49+
// We clone the layout as plotly mutates it.
50+
plotlyInstance.newPlot(_this.container, data, lodash_1.cloneDeep(layout), config);
51+
_this.attachListeners();
52+
};
53+
return _this;
54+
}
55+
PlotlyChart.prototype.attachListeners = function () {
56+
if (this.props.onClick) {
57+
this.container.on('plotly_click', this.props.onClick);
58+
}
59+
if (this.props.onBeforeHover) {
60+
this.container.on('plotly_beforehover', this.props.onBeforeHover);
61+
}
62+
if (this.props.onHover) {
63+
this.container.on('plotly_hover', this.props.onHover);
64+
}
65+
if (this.props.onUnHover) {
66+
this.container.on('plotly_unhover', this.props.onUnHover);
67+
}
68+
if (this.props.onSelected) {
69+
this.container.on('plotly_selected', this.props.onSelected);
70+
}
71+
window.addEventListener('resize', this.resize);
72+
};
73+
PlotlyChart.prototype.componentWillReceiveProps = function (nextProps) {
74+
this.draw(nextProps);
75+
};
76+
PlotlyChart.prototype.componentDidMount = function () {
77+
this.draw(this.props);
78+
};
79+
PlotlyChart.prototype.componentWillUnmount = function () {
80+
plotlyInstance.purge(this.container);
81+
window.removeEventListener('resize', this.resize);
82+
};
83+
PlotlyChart.prototype.render = function () {
84+
var _this = this;
85+
var _a = this.props, data = _a.data, layout = _a.layout, config = _a.config, onClick = _a.onClick, onBeforeHover = _a.onBeforeHover, onHover = _a.onHover, onSelected = _a.onSelected, onUnHover = _a.onUnHover, other = __rest(_a, ["data", "layout", "config", "onClick", "onBeforeHover", "onHover", "onSelected", "onUnHover"]);
86+
return React.createElement("div", __assign({}, other, { ref: function (node) { return _this.container = node; } }));
87+
};
88+
return PlotlyChart;
89+
}(React.Component));
90+
;
91+
exports.default = PlotlyChart;

‎package.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "react-plotlyjs-ts",
3+
"version": "1.0.0",
4+
"description": "Typescript-React component for Plotly.js",
5+
"main": "dist/index.js",
6+
"types": "dist/index.d.ts",
7+
"author": "caitengjiao1987@gmail.com",
8+
"license": "MIT",
9+
"scripts": {
10+
"build": "tsc"
11+
},
12+
"dependencies": {
13+
"lodash": "^4.17.4",
14+
"plotly.js": "^1.30.0",
15+
"react": "^15.6.1",
16+
"react-dom": "^15.6.1",
17+
"typescript": "^2.5.2"
18+
},
19+
"devDependencies": {
20+
"@types/lodash": "^4.14.74",
21+
"@types/plotly.js": "^1.28.4",
22+
"@types/react": "^16.0.5",
23+
"@types/react-dom": "^15.5.4"
24+
}
25+
}

‎src/index.tsx

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import * as React from 'react';
2+
import * as plotlyInstance from 'plotly.js/dist/plotly.js';
3+
import {cloneDeep} from 'lodash';
4+
5+
export interface IPlotlyChartProps {
6+
data: any[];
7+
layout?: any;
8+
config?: any;
9+
onClick?: (data: any) => any;
10+
onBeforeHover?: (data: any) => any;
11+
onHover?: (data: any) => any;
12+
onUnHover?: (data: any) => any;
13+
onSelected?: (data: any) => any;
14+
}
15+
16+
/***
17+
* Usage:
18+
* <PlotlyChart data={toJS(this.model_data)}
19+
* layout={layout}
20+
* onClick={({points, event}) => console.log(points, event)}>
21+
*/
22+
class PlotlyChart extends React.Component<IPlotlyChartProps, any> {
23+
24+
container: any = null;
25+
26+
attachListeners() {
27+
if (this.props.onClick) {
28+
this.container.on('plotly_click', this.props.onClick);
29+
}
30+
if (this.props.onBeforeHover) {
31+
this.container.on('plotly_beforehover', this.props.onBeforeHover);
32+
}
33+
if (this.props.onHover) {
34+
this.container.on('plotly_hover', this.props.onHover);
35+
}
36+
if (this.props.onUnHover) {
37+
this.container.on('plotly_unhover', this.props.onUnHover);
38+
}
39+
if (this.props.onSelected) {
40+
this.container.on('plotly_selected', this.props.onSelected);
41+
}
42+
window.addEventListener('resize', this.resize);
43+
}
44+
45+
resize = () => {
46+
plotlyInstance.Plots.resize(this.container);
47+
}
48+
49+
draw = (props: IPlotlyChartProps) => {
50+
const {data, layout, config} = props;
51+
// We clone the layout as plotly mutates it.
52+
plotlyInstance.newPlot(this.container, data, cloneDeep(layout), config);
53+
this.attachListeners();
54+
}
55+
56+
57+
componentWillReceiveProps(nextProps: IPlotlyChartProps) {
58+
this.draw(nextProps);
59+
}
60+
61+
componentDidMount() {
62+
this.draw(this.props);
63+
}
64+
65+
componentWillUnmount() {
66+
plotlyInstance.purge(this.container);
67+
window.removeEventListener('resize', this.resize);
68+
}
69+
70+
render() {
71+
const {data, layout, config, onClick, onBeforeHover, onHover, onSelected, onUnHover, ...other} = this.props;
72+
return <div {...other} ref={(node) => this.container = node}/>;
73+
}
74+
};
75+
76+
export default PlotlyChart;

‎tsconfig.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"compilerOptions": {
3+
"declaration": true,
4+
"outDir": "dist",
5+
"strictNullChecks": true,
6+
"module": "commonjs",
7+
"target": "es5",
8+
"jsx": "react"
9+
},
10+
"include": [
11+
"./src/"
12+
],
13+
"lib": [
14+
"es2015",
15+
"es2016",
16+
"es2017",
17+
"dom"
18+
]
19+
}

0 commit comments

Comments
 (0)