@ng-vcl/plotly

Usage

import { VCLPlotlyModule } from '@ng-vcl/plotly';

@NgModule({
    ...
    imports: [
      VCLPlotlyModule
    ]
    ...
})
export class AppModule {}

<vcl-plotly
  [elementId]="'myDiv1'"
  [data]="data"
  [layout]="layout"
  [configuration]="configuration"
  [events]="events"
  [plotClass]="'customClass'">
</vcl-plotly>

Attaching custom events

The 'events' field is an object just like 'layout' and 'configuration'. To attach your custom events to the plotly plot, see the possible event handlers and create them like so:

const events = {
  plotly_click: (data: any, event: any, plotId: string, plot: any, Plotly: any) => {
    ...
  }
}

Debug

It's also possible to enable the debug flag to output information in the console.

<vcl-plotly
  ...
  [debug]="true"
  ...>
</vcl-plotly>

Importing plotly

if you want to use plotly in combination with zone.js, you must include plotly before zone.js in your project!

import '@ng-vcl/plotly';

import 'zone.js/dist/zone';

See also: https://github.com/plotly/plotly.js/issues/955.

Changelog

0.1.0 (2017-02-15)

Notes

• Packages are now published via npm and are semver compliant!
• The npm scope for all packages is @ng-vcl
• The core package is @ng-vcl/ng-vcl
• Some components were outsourced in own packages
• @ng-vcl packages are now aot ready and provide sources in the esm format

Links

• @ng-vcl/ng-vcl README
• Complete list of packages

Breaking Changes

• components moved to packages:
  • json-editor moved to @ng-vcl/json-editor package
  • store store moved to @ng-vcl/store package
  • jss-form moved to @ng-vcl/jss-form package
  • adv-http moved to @ng-vcl/adv-http package
  • plotly moved to @ng-vcl/plotly package
• vcl-tab-nav:
  • removed vcl-tab-content directive
• vcl-token:
  • renamed events from 'onChange' to 'change'
  • renamed events from 'onRemove' to 'remove'
• vcl-popover
  • state is now open and accepts boolean
  • tether is removed, do not use custom parameters of tether.js
  • input for target and attachment-positions changed into seperate variable for X and Y
• vcl-input:
  • Input 'value' is removed, use ngModel like you would with a regular input
  • removed event-emitters since they are not needed
• vcl-flip-switch:
  • switched to 2-way-binding
• vcl-button:
  • rename vcl-button-content to vclButtonStateContent
  • merge vclButtonStateContent attribute with state attribute
  • remove busyLabel, prepIconBusy and appIconBusy (use vclButtonStateContent instead)
• vclBusy:
  • Renamed [vcl-busy] to [vclBusy]
• offClick
  • Renamed [off-click] to [offClick]
• wormhole:
  • Refactoring: see readme
• vcl-layer:
  • Added @Layer directives
  • Removed ComponentLayer subclass props