import * as React from "react" ; import * as ReactDOM from "react-dom" ; import * as Chart_Contracts from "Charts/Contracts" ; import * as Chart_Service from "Charts/Services" ; /**
 * Stateless parameters (creation-time) for constructing a ChartComponent.
 */ export class ChartComponentProps { chartOptions : Chart_Contracts . CommonChartOptions ; } /**
 * This Component class deals with Interop to the existing VSTS Charting API, which consumes a parent JQuery element to render.
 * As the chart Service Promise has latency to fulfill, there is an async risk with rendering here, currently.
 * Chart SDK will be updated to directly support this scenario.
 */ export class ChartComponent extends React . Component < ChartComponentProps , any > { private chartServicePromise : IPromise < Chart_Service . IChartsService > = Chart_Service . ChartsService . getService ( ) ; private $wrappedContainer : JQuery ; private isMounted : boolean ; public render ( ) { return ( < div className = "chart-component" > < /div>); } public componentDidMount ( ) { this . isMounted = true ; this . ensureChartIsInstantiated ( this . props . chartOptions ) ; } public componentWillUnmount ( ) { this . ensurePriorInstancesAreCleared ( ) ; this . isMounted = false ; } public componentDidUpdate ( ) { this . ensureChartIsInstantiated ( this . props . chartOptions ) ; } private ensureChartIsInstantiated ( chartOptions ) { this . chartServicePromise . then ( ( chartService ) => { this . ensurePriorInstancesAreCleared ( ) ; if ( this . isMounted ) { let container = ReactDOM . findDOMNode ( this ) ; if ( container ) { this . $wrappedContainer = $ ( container ) ; if ( chartOptions ) { chartOptions = this . updateChartOptions ( chartOptions ) ; chartService . createChart ( this . $wrappedContainer , chartOptions ) ; } } } } ) ; } /**
     * This step is neccessary to remove the chart content
     */ private ensurePriorInstancesAreCleared ( ) { if ( this . $wrappedContainer ) { this . $wrappedContainer . empty ( ) ; } } /** Extensibility hook for derived type to modify chart options. */ protected updateChartOptions ( chartOptions ) { return chartOptions ; } } /** Renders Chart as with ChartComponent, while overriding specific settings for presentational chrome to make the best of limited space:
 * 1- suppress axis labels & ticks.
 * 2- suppress legends.
 * 3- tooltips only show a compact single row.
 *  Any other options around these settings remain unmodified. */ export class ChromelessChartComponent extends ChartComponent { protected updateChartOptions ( chartOptions ) { chartOptions . xAxis = chartOptions . xAxis || { } ; chartOptions . xAxis . labelsEnabled = false ; chartOptions . xAxis . markingsEnabled = false ; chartOptions . yAxis = chartOptions . yAxis || { } ; chartOptions . yAxis . labelsEnabled = false ; chartOptions . yAxis . markingsEnabled = false ; chartOptions . legend = chartOptions . legend || { } ; chartOptions . legend . enabled = false ; chartOptions . tooltip = chartOptions . tooltip || { } ; chartOptions . tooltip . onlyShowFocusedSeries = true ; return chartOptions ; } }