diff --git a/analytics-example-widget/README.md b/analytics-example-widget/README.md index 0e73a08..4c397b3 100644 --- a/analytics-example-widget/README.md +++ b/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). \ No newline at end of file diff --git a/analytics-example-widget/package.json b/analytics-example-widget/package.json index af234d9..b98f96a 100644 --- a/analytics-example-widget/package.json +++ b/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" + } } diff --git a/analytics-example-widget/scripts/components/ChartComponent.tsx b/analytics-example-widget/scripts/components/ChartComponent.tsx index 3fbf68b..f369788 100644 --- a/analytics-example-widget/scripts/components/ChartComponent.tsx +++ b/analytics-example-widget/scripts/components/ChartComponent.tsx @@ -23,7 +23,7 @@ export class ChartComponent extends React.Component { 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 { } 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 { this.chartServicePromise.then((chartService) => { this.ensurePriorInstancesAreCleared(); - if(this.isMounted){ + if(this.isChartMounted){ let container = ReactDOM.findDOMNode(this); if(container){ this.$wrappedContainer = $(container);