Updated build and deploy instructions, added tfx dependency

analytics-example-widget/README.md

@@ -5,14 +5,20 @@ The purpose of this example is to provide a working VSTS Widget Extension, exerc
 
 
 # Getting Started
-From the repo directory:
+From this directory:
 
-1. (Command Line) npm install
-2. Override the publisher in vss-extension.json with your publisher Id. Learn to create a publisher.
-3. (Command Line: Create your extension) tfx extension create --manifest-globs vss-extension.json --rev-version
-4. Publish your extension from Marketplace
-5. Share your extension to your test account
-6. From your account, "Manage Extensions", select "Analytics example widget" and "Install" it
+1. (Command Line: Set up your environment) 
+```
+npm install
+npm install -g typescript
+```
+2. Override the publisher in vss-extension.json with your publisher Id. [Learn to create a publisher](https://docs.microsoft.com/en-us/vsts/extend/publish/integration?view=vsts#steps
+)
+3. (Command Line: Build your extension) `tsc`
+3. (Command Line: Create your extension) `.\node_modules\.bin\tfx extension create --manifest-globs vss-extension.json --rev-version`
+4. Publish your extension from Marketplace 
+5. Share your extension to your test VSTS account
+6. Install the widget: from your VSTS account, click "Manage Extensions", select "Analytics example widget" and "Install" it
 
 # More Information
 See our [documentation page](https://docs.microsoft.com/en-us/vsts/report/extend-analytics/example-analytics-widget) for more pointers on [Analytics](https://docs.microsoft.com/en-us/vsts/report/extend-analytics/), [Widgets](https://docs.microsoft.com/en-us/vsts/report/dashboards/index) and [Charting](https://docs.microsoft.com/en-us/vsts/extend/develop/add-chart).

analytics-example-widget/package.json

@@ -17,5 +17,7 @@
     "gallery-publish": "tfx extension publish --rev-version --token YOURPERSONALAUTHTOKENHERE",
     "clean": "rimraf ./dist && rimraf ./*.vsix"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "tfx-cli": "^0.5.10"
+  }
 }

analytics-example-widget/scripts/components/ChartComponent.tsx

@@ -23,7 +23,7 @@ export class ChartComponent extends React.Component<ChartComponentProps, any> {
     private $wrappedContainer: JQuery;
 
     //Track mount state, due to async chart creation.
-    private isMounted: boolean;
+    private isChartMounted: boolean;
 
 
     public render() {
@@ -33,14 +33,14 @@ export class ChartComponent extends React.Component<ChartComponentProps, any> {
     }
 
     public componentDidMount(): void {
-        this.isMounted = true;
+        this.isChartMounted = true;
         this.ensureChartIsInstantiated(this.props.chartOptions);
 
     }
 
     public componentWillUnmount(): void {
         this.ensurePriorInstancesAreCleared();
-        this.isMounted = false;
+        this.isChartMounted = false;
     }
 
     public componentDidUpdate(): void {
@@ -52,7 +52,7 @@ export class ChartComponent extends React.Component<ChartComponentProps, any> {
         this.chartServicePromise.then((chartService) => {
             this.ensurePriorInstancesAreCleared();
 
-            if(this.isMounted){
+            if(this.isChartMounted){
                 let container = ReactDOM.findDOMNode(this);
                 if(container){
                     this.$wrappedContainer = $(container);