0.1.13

plotly · May 9, 2018 · fbcb73d · fbcb73d
1 parent dd792ee
commit fbcb73d
Show file tree

Hide file tree

Showing 27 changed files with 1,713 additions and 2 deletions.
diff --git a/dist/README.md b/dist/README.md
@@ -0,0 +1,165 @@
+# angular-plotly.js
+
+
+![plotly-react-logo](https://static1.squarespace.com/static/5a5adfdea9db09d594a841f3/t/5a5af2c5e2c48307ed4a21b6/1515975253370/)
+
+> A [plotly.js](https://github.com/plotly/plotly.js) Angular component from
+> [Plotly](https://plot.ly/).
+
+[![CircleCI](https://circleci.com/gh/plotly/angular-plotly.js.svg?style=svg)](https://circleci.com/gh/plotly/angular-plotly.js)
+[![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)
+
+---
+
+## Content
+
+* [Installation](#installation)
+* [Quick start](#quick-start)
+* [API](#api-reference)
+  * [Basic props](#basic-props)
+  * [Event handler props](#event-handler-props)
+* [Development](#development)
+
+## Installation
+
+```bash
+$ npm install angular-plotly.js plotly.js
+```
+
+Using the [angular CLI](https://cli.angular.io/) to start a new project
+```bash
+$ ng new my-project
+$ cd my-project
+$ npm install angular-plotly.js plotly.js --save
+```
+
+## Quick start
+
+Add the `PlotlyModule` into the main app module of your project
+```typescript
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { PlotlyModule } from 'angular-plotly.js';
+
+@NgModule({
+    imports: [CommonModule, PlotlyModule],
+    ...
+})
+export class AppModule { }
+```
+
+Then use the `<plotly-plot>` component to display the graph
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'plotly-example',
+    template: '<plotly-plot [data]="graph.data" [layout]="graph.layout"></plotly-plot>',
+})
+export class PlotlyExampleComponent {
+    public graph = {
+        data: [
+            { x: [1, 2, 3], y: [2, 6, 3], type: 'scatter', mode: 'lines+points', marker: {color: 'red'} },
+            { x: [1, 2, 3], y: [2, 5, 3], type: 'bar' },
+        ],
+        layout: {width: 320, height: 240, title: 'A Fancy Plot'}
+    };
+}
+```
+
+You should see a plot like this:
+
+<p align="center">
+    <img src="example.png" alt="Example plot" width="320" height="240">
+</p>
+
+
+For a full description of Plotly chart types and attributes see the following resources:
+
+* [Plotly JavaScript API documentation](https://plot.ly/javascript/)
+* [Full plotly.js attribute listing](https://plot.ly/javascript/reference/)
+
+## API Reference
+
+### Basic Props
+
+**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.
+
+| Prop               | Type                         | Default                                           | Description                                                                                                                                                           |
+| ------------------ | ---------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `data`             | `Array`                      | `[]`                                              | list of trace objects (see https://plot.ly/javascript/reference/)                                                                                                     |
+| `layout`           | `Object`                     | `undefined`                                       | layout object (see https://plot.ly/javascript/reference/#layout)                                                                                                      |
+| `frames`           | `Array`                      | `undefined`                                       | list of frame objects (see https://plot.ly/javascript/reference/)                                                                                                     |
+| `config`           | `Object`                     | `undefined`                                       | config object (see https://plot.ly/javascript/configuration-options/)                                                                                                 |
+| `revision`         | `Number`                     | `undefined`                                       | When provided, causes the plot to update _only_ when the revision is incremented.                                                                                     |
+| `onInitialized`    | `Function(figure, graphDiv)` | `undefined`                                       | Callback executed after plot is initialized. See below for parameter information.                                                                                     |
+| `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.                     |
+| `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.                |
+| `onError`          | `Function(err)`              | `undefined`                                       | Callback executed when a plotly.js API method rejects                                                                                                                 |
+| `divId`            | `string`                     | `undefined`                                       | id assigned to the `<div>` into which the plot is rendered.                                                                                                           |
+| `className`        | `string`                     | `undefined`                                       | applied to the `<div>` into which the plot is rendered                                                                                                                |
+| `style`            | `Object`                     | `{position: 'relative', display: 'inline-block'}` | used to style the `<div>` into which the plot is rendered                                                                                                             |
+| `debug`            | `Boolean`                    | `false`                                           | Assign the graph div to `window.gd` for debugging                                                                                                                     |
+| `useResizeHandler` | `Boolean`                    | `false`                                           | When true, adds a call to `Plotly.Plot.resize()` as a `window.resize` event handler                                                                                   |
+
+**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/
+
+### Event handler props
+
+Event handlers for specific [`plotly.js` events](https://plot.ly/javascript/plotlyjs-events/) may be attached through the following props:
+
+| Prop                      | Type       | Plotly Event                   |
+| ------------------------- | ---------- | ------------------------------ |
+| `(afterExport)`           | `Function` | `plotly_afterexport`           |
+| `(afterPlot)`             | `Function` | `plotly_afterplot`             |
+| `(animated)`              | `Function` | `plotly_animated`              |
+| `(animatingFrame)`        | `Function` | `plotly_animatingframe`        |
+| `(animationInterrupted)`  | `Function` | `plotly_animationinterrupted`  |
+| `(autoSize)`              | `Function` | `plotly_autosize`              |
+| `(beforeExport)`          | `Function` | `plotly_beforeexport`          |
+| `(buttonClicked)`         | `Function` | `plotly_buttonclicked`         |
+| `(click)`                 | `Function` | `plotly_click`                 |
+| `(clickAnnotation)`       | `Function` | `plotly_clickannotation`       |
+| `(deselect)`              | `Function` | `plotly_deselect`              |
+| `(doubleClick)`           | `Function` | `plotly_doubleclick`           |
+| `(framework)`             | `Function` | `plotly_framework`             |
+| `(hover)`                 | `Function` | `plotly_hover`                 |
+| `(legendClick)`           | `Function` | `plotly_legendclick`           |
+| `(legendDoubleClick)`     | `Function` | `plotly_legenddoubleclick`     |
+| `(relayout)`              | `Function` | `plotly_relayout`              |
+| `(restyle)`               | `Function` | `plotly_restyle`               |
+| `(redraw)`                | `Function` | `plotly_redraw`                |
+| `(selected)`              | `Function` | `plotly_selected`              |
+| `(selecting)`             | `Function` | `plotly_selecting`             |
+| `(sliderChange)`          | `Function` | `plotly_sliderchange`          |
+| `(sliderEnd)`             | `Function` | `plotly_sliderend`             |
+| `(sliderStart)`           | `Function` | `plotly_sliderstart`           |
+| `(transitioning)`         | `Function` | `plotly_transitioning`         |
+| `(transitionInterrupted)` | `Function` | `plotly_transitioninterrupted` |
+| `(unhover)`               | `Function` | `plotly_unhover`               |
+
+
+## Development
+
+To get started:
+
+```bash
+$ npm install
+```
+
+To see the demo app, run:
+
+```bash
+$ npm start
+```
+
+To run the tests:
+
+```bash
+$ npm run test
+```
+
+## License
+
+&copy; 2018 Plotly, Inc. MIT License.
diff --git a/dist/angular-plotly.js.d.ts b/dist/angular-plotly.js.d.ts
@@ -0,0 +1,4 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public_api';
diff --git a/dist/angular-plotly.js.metadata.json b/dist/angular-plotly.js.metadata.json
@@ -0,0 +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"}