####Table of Contents####
This is a project for a tutorial Microsoft Office Add-in for Excel. It interacts with data in Excel 2013 via Office.js, and renders a funnel chart on D3.js. This tutorial has been modified to use TypeScript. You can find the original here.
Funnel Tutorial/Funnel
| Name | Description |
|---|---|
| Funnel.xml | This is the add-in manifest file. This file declaratively describes how the add-in should be activated when an end user installs it. The html location needs to be set in tag <SourceLocation> and the width and height should be set in tags <RequestedWidth> and <RequestedHeight>. |
FunnelWeb
| Name | Description |
|---|---|
| App | This folder contains all of the code for the Home page, the visualization, and the add-in CSS and TypeScript. |
| App/Home | This folder contains the code for the Home html page, as well as all of the TypeScript logic for the add-in. |
| Scripts | This folder contains the jquery and Office.js files necessary to run the code and use the Office API. |
| Home.html | This file contains references to all of the necessary js and css files, and it lays out the elements seen when the add-in is run. |
| Home.ts | This file contains all of the specific logic for this add-in, including inserting sample data, retrieving selected data, parsing data to create the visualization, and custom settings. |
| App.ts | This file defines the notification messages in the add-in. |
| App.css | This file defines common styles for the add-in. |
| d3-funnel-charts.ts | This file contains the logic for creating an SVG visualization from data provided. |
| scripts | This folder contains all the files to handle UX & functional logic. |
| themes | This folder contains all the theme thumbnails and styles, and a JSON file that defines the theme properties. |
| typings | This folder contains TypeScript type declarations which allow you to get type coverage for JavaScript libraries |
| js | This folder contains the output JavaScript of your TypeScript compilation. You shouldn't need to look at these files. |
| tsconfig.json | This is where you can configure the settings of your TypeScript compilation. |
For more details of d3-funnel-charts visualization, go to the GitHub page
For more details of Office related APIs like Office.context.document.addHandlerAsync(), Office.select(), Office.context.document.bindings.addFromSelectionAsync(), Office.context.document.settings.set(key, value), go to the website JavaScript API for Office(v1.1).
For more details of d3 related APIs like d3.select(), selection.attr(), selection.remove(), or selection.transition(), go to the website D3 API Reference.
1. Prerequisites:
Install the following components before you get started:
a. Visual Studio 2013
b. Microsoft Excel 2013
2. Debug and run the app:
a. Launch Visual Studio 2013
b. Open the Funnel project
c. Add breakpoints in the typescript files and click Start Debugging or press F5 to start debugging