Skip to content

Commit a25c6e9

Browse files
andrefarzatandrefarzat
committed
Adding a nice README.md
1 parent 17394bf commit a25c6e9

File tree

3 files changed

+121
-0
lines changed

3 files changed

+121
-0
lines changed

‎README.md

+120
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,123 @@
88
99
[![CircleCI](https://circleci.com/gh/plotly/angular-plotly.js.svg?style=svg)](https://circleci.com/gh/plotly/angular-plotly.js)
1010
[![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+
* [Development](#development)
21+
22+
## Installation
23+
24+
```bash
25+
$ npm install angular-plotly.js plotly.js
26+
```
27+
28+
Using the [angular CLI](https://cli.angular.io/) to start a new project
29+
```bash
30+
$ ng new my-project
31+
$ cd my-project
32+
$ npm install angular-plotly.js plotly.js --save
33+
```
34+
35+
## Quick start
36+
37+
Add the `PlotlyModule` into the main app module of your project
38+
```typescript
39+
import { NgModule } from '@angular/core';
40+
import { CommonModule } from '@angular/common';
41+
42+
import { PlotlyModule } from 'angular-plotly.js';
43+
44+
@NgModule({
45+
imports: [CommonModule, PlotlyModule],
46+
...
47+
})
48+
export class AppModule { }
49+
```
50+
51+
Then use the `<plotly-plot>` component to display the graph
52+
```typescript
53+
import { Component } from '@angular/core';
54+
55+
@Component({
56+
selector: 'plotly-example',
57+
template: '<plotly-plot [data]="graph.data" [layout]="graph.layout"></plotly-plot>',
58+
})
59+
export class PlotlyExampleComponent {
60+
public graph = {
61+
data: [
62+
{ x: [1, 2, 3], y: [2, 6, 3], type: 'scatter', mode: 'lines+points', marker: {color: 'red'} },
63+
{ x: [1, 2, 3], y: [2, 5, 3], type: 'bar' },
64+
],
65+
layout: {width: 320, height: 240, title: 'A Fancy Plot'}
66+
};
67+
}
68+
```
69+
70+
You should see a plot like this:
71+
72+
<p align="center">
73+
<img src="example.png" alt="Example plot" width="320" height="240">
74+
</p>
75+
76+
77+
For a full description of Plotly chart types and attributes see the following resources:
78+
79+
* [Plotly JavaScript API documentation](https://plot.ly/javascript/)
80+
* [Full plotly.js attribute listing](https://plot.ly/javascript/reference/)
81+
82+
## API Reference
83+
84+
### Basic Props
85+
86+
**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.
87+
88+
| Prop | Type | Default | Description |
89+
| ------------------ | ---------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
90+
| `data` | `Array` | `[]` | list of trace objects (see https://plot.ly/javascript/reference/) |
91+
| `layout` | `Object` | `undefined` | layout object (see https://plot.ly/javascript/reference/#layout) |
92+
| `frames` | `Array` | `undefined` | list of frame objects (see https://plot.ly/javascript/reference/) |
93+
| `config` | `Object` | `undefined` | config object (see https://plot.ly/javascript/configuration-options/) |
94+
| `revision` | `Number` | `undefined` | When provided, causes the plot to update _only_ when the revision is incremented. |
95+
| `onInitialized` | `Function(figure, graphDiv)` | `undefined` | Callback executed after plot is initialized. See below for parameter information. |
96+
| `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. |
97+
| `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. |
98+
| `onError` | `Function(err)` | `undefined` | Callback executed when a plotly.js API method rejects |
99+
| `divId` | `string` | `undefined` | id assigned to the `<div>` into which the plot is rendered. |
100+
| `className` | `string` | `undefined` | applied to the `<div>` into which the plot is rendered |
101+
| `style` | `Object` | `{position: 'relative', display: 'inline-block'}` | used to style the `<div>` into which the plot is rendered |
102+
| `debug` | `Boolean` | `false` | Assign the graph div to `window.gd` for debugging |
103+
| `useResizeHandler` | `Boolean` | `false` | When true, adds a call to `Plotly.Plot.resize()` as a `window.resize` event handler |
104+
105+
**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/
106+
107+
108+
## Development
109+
110+
To get started:
111+
112+
```bash
113+
$ npm install
114+
```
115+
116+
To see the demo app, run:
117+
118+
```bash
119+
$ npm start
120+
```
121+
122+
To run the tests:
123+
124+
```bash
125+
$ npm run test
126+
```
127+
128+
## License
129+
130+
&copy; 2018 Plotly, Inc. MIT License.

‎example.png

8.44 KB
Loading

‎src/app/demo/linear-charts/linear-charts.component.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Component } from '@angular/core';
2+
import * as Plotly from '../../plotly/plotly';
23

34
@Component({
45
selector: 'plotly-line-charts',

0 commit comments

Comments
 (0)