Skip to content

Commit fbcb73d

Browse files
andrefarzatandrefarzat
committed
0.1.13
1 parent dd792ee commit fbcb73d

27 files changed

+1713
-2
lines changed

‎dist/README.md

+165
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
# angular-plotly.js
2+
3+
4+
![plotly-react-logo](https://static1.squarespace.com/static/5a5adfdea9db09d594a841f3/t/5a5af2c5e2c48307ed4a21b6/1515975253370/)
5+
6+
> A [plotly.js](https://github.com/plotly/plotly.js) Angular component from
7+
> [Plotly](https://plot.ly/).
8+
9+
[![CircleCI](https://circleci.com/gh/plotly/angular-plotly.js.svg?style=svg)](https://circleci.com/gh/plotly/angular-plotly.js)
10+
[![Coverage Status](https://coveralls.io/repos/github/plotly/angular-plotly.js/badge.svg?branch=master)](https://coveralls.io/github/plotly/angular-plotly.js?branch=master)
11+
12+
---
13+
14+
## Content
15+
16+
* [Installation](#installation)
17+
* [Quick start](#quick-start)
18+
* [API](#api-reference)
19+
* [Basic props](#basic-props)
20+
* [Event handler props](#event-handler-props)
21+
* [Development](#development)
22+
23+
## Installation
24+
25+
```bash
26+
$ npm install angular-plotly.js plotly.js
27+
```
28+
29+
Using the [angular CLI](https://cli.angular.io/) to start a new project
30+
```bash
31+
$ ng new my-project
32+
$ cd my-project
33+
$ npm install angular-plotly.js plotly.js --save
34+
```
35+
36+
## Quick start
37+
38+
Add the `PlotlyModule` into the main app module of your project
39+
```typescript
40+
import { NgModule } from '@angular/core';
41+
import { CommonModule } from '@angular/common';
42+
43+
import { PlotlyModule } from 'angular-plotly.js';
44+
45+
@NgModule({
46+
imports: [CommonModule, PlotlyModule],
47+
...
48+
})
49+
export class AppModule { }
50+
```
51+
52+
Then use the `<plotly-plot>` component to display the graph
53+
```typescript
54+
import { Component } from '@angular/core';
55+
56+
@Component({
57+
selector: 'plotly-example',
58+
template: '<plotly-plot [data]="graph.data" [layout]="graph.layout"></plotly-plot>',
59+
})
60+
export class PlotlyExampleComponent {
61+
public graph = {
62+
data: [
63+
{ x: [1, 2, 3], y: [2, 6, 3], type: 'scatter', mode: 'lines+points', marker: {color: 'red'} },
64+
{ x: [1, 2, 3], y: [2, 5, 3], type: 'bar' },
65+
],
66+
layout: {width: 320, height: 240, title: 'A Fancy Plot'}
67+
};
68+
}
69+
```
70+
71+
You should see a plot like this:
72+
73+
<p align="center">
74+
<img src="example.png" alt="Example plot" width="320" height="240">
75+
</p>
76+
77+
78+
For a full description of Plotly chart types and attributes see the following resources:
79+
80+
* [Plotly JavaScript API documentation](https://plot.ly/javascript/)
81+
* [Full plotly.js attribute listing](https://plot.ly/javascript/reference/)
82+
83+
## API Reference
84+
85+
### Basic Props
86+
87+
**Warning**: for the time being, this component may _mutate_ its `layout` and `data` props in response to user input, going against React rules. This behaviour will change in the near future once https://github.com/plotly/plotly.js/issues/2389 is completed.
88+
89+
| Prop | Type | Default | Description |
90+
| ------------------ | ---------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
91+
| `data` | `Array` | `[]` | list of trace objects (see https://plot.ly/javascript/reference/) |
92+
| `layout` | `Object` | `undefined` | layout object (see https://plot.ly/javascript/reference/#layout) |
93+
| `frames` | `Array` | `undefined` | list of frame objects (see https://plot.ly/javascript/reference/) |
94+
| `config` | `Object` | `undefined` | config object (see https://plot.ly/javascript/configuration-options/) |
95+
| `revision` | `Number` | `undefined` | When provided, causes the plot to update _only_ when the revision is incremented. |
96+
| `onInitialized` | `Function(figure, graphDiv)` | `undefined` | Callback executed after plot is initialized. See below for parameter information. |
97+
| `onUpdate` | `Function(figure, graphDiv)` | `undefined` | Callback executed when when a plot is updated due to new data or layout, or when user interacts with a plot. See below for parameter information. |
98+
| `onPurge` | `Function(figure, graphDiv)` | `undefined` | Callback executed when component unmounts, before `Plotly.purge` strips the `graphDiv` of all private attributes. See below for parameter information. |
99+
| `onError` | `Function(err)` | `undefined` | Callback executed when a plotly.js API method rejects |
100+
| `divId` | `string` | `undefined` | id assigned to the `<div>` into which the plot is rendered. |
101+
| `className` | `string` | `undefined` | applied to the `<div>` into which the plot is rendered |
102+
| `style` | `Object` | `{position: 'relative', display: 'inline-block'}` | used to style the `<div>` into which the plot is rendered |
103+
| `debug` | `Boolean` | `false` | Assign the graph div to `window.gd` for debugging |
104+
| `useResizeHandler` | `Boolean` | `false` | When true, adds a call to `Plotly.Plot.resize()` as a `window.resize` event handler |
105+
106+
**Note**: To make a plot responsive, i.e. to fill its containing element and resize when the window is resized, use `style` or `className` to set the dimensions of the element (i.e. using `width: 100%; height: 100%` or some similar values) and set `useResizeHandler` to `true` while setting `layout.autosize` to `true` and leaving `layout.height` and `layout.width` undefined. This will implement the behaviour documented here: https://plot.ly/javascript/responsive-fluid-layout/
107+
108+
### Event handler props
109+
110+
Event handlers for specific [`plotly.js` events](https://plot.ly/javascript/plotlyjs-events/) may be attached through the following props:
111+
112+
| Prop | Type | Plotly Event |
113+
| ------------------------- | ---------- | ------------------------------ |
114+
| `(afterExport)` | `Function` | `plotly_afterexport` |
115+
| `(afterPlot)` | `Function` | `plotly_afterplot` |
116+
| `(animated)` | `Function` | `plotly_animated` |
117+
| `(animatingFrame)` | `Function` | `plotly_animatingframe` |
118+
| `(animationInterrupted)` | `Function` | `plotly_animationinterrupted` |
119+
| `(autoSize)` | `Function` | `plotly_autosize` |
120+
| `(beforeExport)` | `Function` | `plotly_beforeexport` |
121+
| `(buttonClicked)` | `Function` | `plotly_buttonclicked` |
122+
| `(click)` | `Function` | `plotly_click` |
123+
| `(clickAnnotation)` | `Function` | `plotly_clickannotation` |
124+
| `(deselect)` | `Function` | `plotly_deselect` |
125+
| `(doubleClick)` | `Function` | `plotly_doubleclick` |
126+
| `(framework)` | `Function` | `plotly_framework` |
127+
| `(hover)` | `Function` | `plotly_hover` |
128+
| `(legendClick)` | `Function` | `plotly_legendclick` |
129+
| `(legendDoubleClick)` | `Function` | `plotly_legenddoubleclick` |
130+
| `(relayout)` | `Function` | `plotly_relayout` |
131+
| `(restyle)` | `Function` | `plotly_restyle` |
132+
| `(redraw)` | `Function` | `plotly_redraw` |
133+
| `(selected)` | `Function` | `plotly_selected` |
134+
| `(selecting)` | `Function` | `plotly_selecting` |
135+
| `(sliderChange)` | `Function` | `plotly_sliderchange` |
136+
| `(sliderEnd)` | `Function` | `plotly_sliderend` |
137+
| `(sliderStart)` | `Function` | `plotly_sliderstart` |
138+
| `(transitioning)` | `Function` | `plotly_transitioning` |
139+
| `(transitionInterrupted)` | `Function` | `plotly_transitioninterrupted` |
140+
| `(unhover)` | `Function` | `plotly_unhover` |
141+
142+
143+
## Development
144+
145+
To get started:
146+
147+
```bash
148+
$ npm install
149+
```
150+
151+
To see the demo app, run:
152+
153+
```bash
154+
$ npm start
155+
```
156+
157+
To run the tests:
158+
159+
```bash
160+
$ npm run test
161+
```
162+
163+
## License
164+
165+
&copy; 2018 Plotly, Inc. MIT License.

‎dist/angular-plotly.js.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/**
2+
* Generated bundle index. Do not edit.
3+
*/
4+
export * from './public_api';

‎dist/angular-plotly.js.metadata.json

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"__symbolic":"module","version":4,"metadata":{"PlotlyModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":14}],"declarations":[{"__symbolic":"reference","name":"PlotComponent"}],"exports":[{"__symbolic":"reference","name":"PlotComponent"}]}]}],"members":{}},"PlotComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":23,"character":1},"arguments":[{"selector":"plotly-plot","template":"<div #plot [attr.id]=\"divId\" [className]=\"getClassName()\" [ngStyle]=\"style\"></div>","providers":[{"__symbolic":"reference","name":"PlotlyService"}]}]}],"members":{"plotEl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":36,"character":5},"arguments":["plot"]}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"layout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"divId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"revision":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"debug":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"useResizeHandler":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"initialized":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":49,"character":5}}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":50,"character":5}}]}],"purge":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":51,"character":5}}]}],"error":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":52,"character":5}}]}],"afterExport":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":5}}]}],"afterPlot":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":5}}]}],"animated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":5}}]}],"animatingFrame":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":57,"character":5}}]}],"animationInterrupted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":58,"character":5}}]}],"autoSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":59,"character":5}}]}],"beforeExport":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":60,"character":5}}]}],"buttonClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":61,"character":5}}]}],"click":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":62,"character":5}}]}],"clickAnnotation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":63,"character":5}}]}],"deselect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":64,"character":5}}]}],"doubleClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":65,"character":5}}]}],"framework":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":66,"character":5}}]}],"hover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":67,"character":5}}]}],"legendClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":68,"character":5}}]}],"legendDoubleClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":69,"character":5}}]}],"relayout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":70,"character":5}}]}],"restyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":71,"character":5}}]}],"redraw":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":72,"character":5}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":73,"character":5}}]}],"selecting":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":74,"character":5}}]}],"sliderChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":75,"character":5}}]}],"sliderEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":76,"character":5}}]}],"sliderStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":77,"character":5}}]}],"transitioning":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":78,"character":5}}]}],"transitionInterrupted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":79,"character":5}}]}],"unhover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":80,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"PlotlyService"},{"__symbolic":"reference","module":"@angular/core","name":"IterableDiffers","line":89,"character":32},{"__symbolic":"reference","module":"@angular/core","name":"KeyValueDiffers","line":90,"character":32}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"getWindow":[{"__symbolic":"method"}],"getClassName":[{"__symbolic":"method"}],"createPlot":[{"__symbolic":"method"}],"createFigure":[{"__symbolic":"method"}],"updatePlot":[{"__symbolic":"method"}],"updateWindowResizeHandler":[{"__symbolic":"method"}],"dataDifferTrackBy":[{"__symbolic":"method"}]}},"PlotlyService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":23,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"newPlot":[{"__symbolic":"method"}],"plot":[{"__symbolic":"method"}],"update":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method"}]}}},"origins":{"PlotlyModule":"./src/app/plotly/plotly.module","PlotComponent":"./src/app/plotly/plot/plot.component","PlotlyService":"./src/app/plotly/plotly.service"},"importAs":"angular-plotly.js"}

0 commit comments

Comments
 (0)