missing telemetry

AJIXuMuK · AJIXuMuK · commit e1dc03dd241c · 2021-01-05T16:29:26.000-08:00
diff --git a/docs/documentation/docs/controls/ListView.ContextualMenu.md b/docs/documentation/docs/controls/ListView.ContextualMenu.md
@@ -106,3 +106,5 @@ The result will look like the following:
 Once you click on an action, you will see the alert:
 
 ![ContextualMenu_clicked](../assets/ListView.ContextualMenu_clicked.png)
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ListViewContextualMenu)
diff --git a/docs/documentation/docs/controls/Pagination.md b/docs/documentation/docs/controls/Pagination.md
@@ -51,3 +51,5 @@ The Pagination control can be configured with the following properties:
 | hideFirstPageJump | boolean | no | Hide the quick jump to the first page | false |
 | hideLastPageJump | boolean | no | Hide the quick jump to the last page | false |
 | limiterIcon | string | no | Limitir icon form Fluent IU | More |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Pagination)
diff --git a/docs/documentation/docs/controls/TaxonomyPicker.md b/docs/documentation/docs/controls/TaxonomyPicker.md
@@ -229,4 +229,4 @@ Enum `UpdateType`
 | disableTerm |
 | selectTerm |
 
-![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Placeholder)
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/TaxonomyPicker)
diff --git a/docs/documentation/docs/controls/TreeView.md b/docs/documentation/docs/controls/TreeView.md
@@ -250,4 +250,4 @@ items: [
 private skypeCheckIcon: IIconProps = { iconName: 'SkypeCheck' };
 ```
 
-
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/TreeView)
diff --git a/docs/documentation/docs/controls/charts/BarChart.md b/docs/documentation/docs/controls/charts/BarChart.md
@@ -380,3 +380,6 @@ The following configuration options are specific to bar charts:
 ## For More Information
 
 For more information on what options are available with Bar charts, refer to the [Bar Chart documentation](https://www.chartjs.org/docs/latest/charts/bar.html) on [Chart.js](https://www.chartjs.org).
+
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/charts/BarChart)
diff --git a/docs/documentation/docs/controls/charts/BubbleChart.md b/docs/documentation/docs/controls/charts/BubbleChart.md
@@ -107,3 +107,5 @@ The `data` property of each dataset item consists of an `x`, `y`, and `r` coordi
 ## For More Information
 
 For more information on what options are available with Bubble charts, refer to the [Bubble Chart documentation](https://www.chartjs.org/docs/latest/charts/bubble.html) on [Chart.js](https://www.chartjs.org).
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/charts/BubbleChart)
diff --git a/docs/documentation/docs/controls/charts/DoughnutChart.md b/docs/documentation/docs/controls/charts/DoughnutChart.md
@@ -101,3 +101,5 @@ The following configuration options are specific to doughnut charts:
 ## For More Information
 
 For more information on what options are available with Doughnut charts, refer to the [Doughnut and Pie documentation](https://www.chartjs.org/docs/latest/charts/doughnut.html) on [Chart.js](https://www.chartjs.org).
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/charts/DoughnutChart)
diff --git a/docs/documentation/docs/controls/charts/LineChart.md b/docs/documentation/docs/controls/charts/LineChart.md
@@ -452,3 +452,5 @@ The following configuration options are specific to line charts:
 ## For More Information
 
 For more information on what options are available with Line charts, refer to the [Line Chart documentation](https://www.chartjs.org/docs/latest/charts/line.html) on [Chart.js](https://www.chartjs.org).
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/charts/LineChart)
diff --git a/docs/documentation/docs/controls/charts/PieChart.md b/docs/documentation/docs/controls/charts/PieChart.md
@@ -177,3 +177,5 @@ The following configuration options are specific to pie charts:
 ## For More Information
 
 For more information on what options are available with Pie charts, refer to the [Doughtnut and Pie documentation](https://www.chartjs.org/docs/latest/charts/doughnut.html) on [Chart.js](https://www.chartjs.org).
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/charts/PieChart)
diff --git a/docs/documentation/docs/controls/charts/PolarAreaChart.md b/docs/documentation/docs/controls/charts/PolarAreaChart.md
@@ -99,3 +99,5 @@ The following configuration options are specific to polar area charts:
 ## For More Information
 
 For more information on what options are available with Polar Area charts, refer to the [Polar Area documentation](https://www.chartjs.org/docs/latest/charts/polar.html) on [Chart.js](https://www.chartjs.org).
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/charts/PolarAreaChart)
diff --git a/docs/documentation/docs/controls/charts/RadarChart.md b/docs/documentation/docs/controls/charts/RadarChart.md
@@ -119,3 +119,5 @@ data: [20, 10, 33, 47]
 ## For More Information
 
 For more information on what options are available with Radar charts, refer to the [Radar documentation](https://www.chartjs.org/docs/latest/charts/radar.html) on [Chart.js](https://www.chartjs.org).
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/charts/RadarChart)
diff --git a/docs/documentation/docs/controls/charts/ScatterChart.md b/docs/documentation/docs/controls/charts/ScatterChart.md
@@ -229,3 +229,5 @@ You can also control point configurations at the dataset level.
 ## For More Information
 
 For more information on what options are available with Scatter charts, refer to the [Scatter documentation](https://www.chartjs.org/docs/latest/charts/scatter.html) on [Chart.js](https://www.chartjs.org).
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/charts/ScatterChart)
diff --git a/docs/documentation/docs/guides/contributing.md b/docs/documentation/docs/guides/contributing.md
@@ -52,3 +52,5 @@ Before contributing:
 - **DO NOT** surprise us with big PR's. Instead file an issue & start a discussion so we can agree on a direction before you invest a large amount of time.
 - **DO NOT** commit code you didn't write.
 - **DO NOT** submit PR's that refactor existing code without a discussion first.
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/guides/Contributing)
diff --git a/docs/documentation/docs/guides/index.md b/docs/documentation/docs/guides/index.md
@@ -6,3 +6,5 @@ Following is an overview of guides for this project. If you're considering contr
 - [Minimal Path to Awesome](./mpa.md) - setup your development environment
 - [Submitting a PR](./submitting-pr.md) - how to submit a PR
 - [Migrating from V1](./migrate-from-v1.md) - how to migrate from v1
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/guides)
diff --git a/docs/documentation/docs/guides/migrate-from-v1.md b/docs/documentation/docs/guides/migrate-from-v1.md
@@ -84,3 +84,5 @@ The easiest way to upgrade the SharePoint Framework solution is to use [Office36
   ```typescript
   import { FolderPicker } from '@pnp/spfx-controls-react/lib/FolderPicker';
   ```
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/guides/MigrateFromV1)
diff --git a/docs/documentation/docs/guides/mpa.md b/docs/documentation/docs/guides/mpa.md
@@ -25,3 +25,5 @@ Once you have MkDocs installed on your machine, in the command line:
 
 - run `cd ./docs/documentation` to change directory to where the manual pages are stored
 - run `mkdocs serve` to start the local web server with MkDocs and view the documentation in the web browser
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/guides/mpa)
diff --git a/docs/documentation/docs/guides/submitting-pr.md b/docs/documentation/docs/guides/submitting-pr.md
@@ -27,3 +27,5 @@ We appreciate your initiative and would love to integrate your work with the res
 - let us know what's in the PR: is it a new command, bug fix or a minor update in the docs? The clearer the information you provide, the quicker your PR can be verified and merged
 - ideally 1 PR = 1 commit - this makes it easier to keep the log clear for everyone and track what's changed. If you're new to working with git, we'll squash your commits for you when merging your changes into the main repo
 - don't worry about changing the version or adding yourself to the list of contributors in `package.json`. We'll do that for you when merging your changes.
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/guides/SubmittingPR)
diff --git a/src/common/telemetry/index.ts b/src/common/telemetry/index.ts
@@ -1,6 +1,7 @@
 import PnPTelemetry from "@pnp/telemetry-js";
 import { version } from './version';
 import { Environment, EnvironmentType } from "@microsoft/sp-core-library";
+import * as React from 'react';
 
 const CONTROL_TYPE = "react";
 
@@ -20,3 +21,14 @@ export function track(componentName: string, properties: any = {}): void {
     ...properties
   });
 }
+
+export const useTelemetry = (componentName: string, properties: any = {}) => {
+  const [hasBeenCalled, setHasBeenCalled] = React.useState<boolean>(false);
+
+  if (hasBeenCalled) {
+    return;
+  }
+
+  track(componentName, properties);
+  setHasBeenCalled(true);
+};
diff --git a/src/controls/accessibleAccordion/components/AccordionContext.tsx b/src/controls/accessibleAccordion/components/AccordionContext.tsx
@@ -4,6 +4,8 @@ import "../css/AccordionStylesOverride.css";
 
 import * as React from "react";
 
+import * as telemetry from '../../../common/telemetry';
+
 import AccordionStore, {
   InjectedButtonAttributes,
   InjectedHeadingAttributes,
@@ -55,6 +57,12 @@ export class Provider extends React.PureComponent<
         allowZeroExpanded: this.props.allowZeroExpanded,
     });
 
+    constructor (props: ProviderProps) {
+      super(props);
+
+      telemetry.track('ReactAccessibleAccordion', {});
+    }
+
     private toggleExpanded = (key: UUID): void => {
         this.setState(
             (state: Readonly<ProviderState>) => state.toggleExpanded(key),
diff --git a/src/controls/dashboard/Dashboard.tsx b/src/controls/dashboard/Dashboard.tsx
@@ -15,6 +15,7 @@ import { Toolbar } from "../toolbar";
 import { IWidget } from "./widget/IWidget";
 import { IToolbarProps } from "../toolbar/Toolbar";
 import styles from "./Dashboard.module.scss";
+import { useTelemetry } from "../../common/telemetry";
 
 /**
  * Dashboard component props
@@ -45,6 +46,8 @@ export function Dashboard({
   toolbarProps }: IDashboardProps) {
   const [stateWidgets, setWidgets] = React.useState(widgets);
 
+  useTelemetry('ReactDashboard', {});
+
   React.useEffect(() => {
     setWidgets(widgets);
   }, [widgets]);
diff --git a/src/controls/folderPicker/FolderPicker.tsx b/src/controls/folderPicker/FolderPicker.tsx
@@ -8,6 +8,7 @@ import { Link } from 'office-ui-fabric-react/lib/Link';
 import { getId } from 'office-ui-fabric-react/lib/Utilities';
 import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';
 import { FolderExplorer } from '../folderExplorer/FolderExplorer';
+import * as telemetry from '../../common/telemetry';
 
 
 export class FolderPicker extends React.Component<IFolderPickerProps, IFolderPickerState> {
@@ -18,6 +19,8 @@ export class FolderPicker extends React.Component<IFolderPickerProps, IFolderPic
   constructor(props: IFolderPickerProps) {
     super(props);
 
+    telemetry.track('ReactFolderPicker', {});
+
     this.state = {
       showPanel: false,
       selectedFolder: this.props.defaultFolder
diff --git a/src/controls/iFramePanel/IFramePanel.tsx b/src/controls/iFramePanel/IFramePanel.tsx
@@ -3,12 +3,15 @@ import { Panel } from 'office-ui-fabric-react/lib/Panel';
 import omit from 'lodash/omit';
 import { IFramePanelContent } from './IFramePanelContent';
 import { IIFramePanelProps, IIFramePanelState } from '.';
+import * as telemetry from '../../common/telemetry';
 
 export class IFramePanel extends React.Component<IIFramePanelProps, IIFramePanelState> {
 
   constructor(props: IIFramePanelProps) {
     super(props);
 
+    telemetry.track('ReactIFramePanel', {});
+
     this.state = {};
   }
 
diff --git a/src/controls/listItemAttachments/ListItemAttachments.tsx b/src/controls/listItemAttachments/ListItemAttachments.tsx
@@ -21,6 +21,7 @@ import { TooltipHost, DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip
 import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
 import utilities from './utilities';
 import { Placeholder } from "../placeholder";
+import * as telemetry from '../../common/telemetry';
 
 interface IPreviewImageCollection {
   [fileName: string]: IDocumentCardPreviewImage;
@@ -34,6 +35,8 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
   constructor(props: IListItemAttachmentsProps) {
     super(props);
 
+    telemetry.track('ReactListItemAttachments', {});
+
     this.state = {
       file: null,
       hideDialog: true,
diff --git a/src/controls/pagination/Pagination.tsx b/src/controls/pagination/Pagination.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import styles from "./Pagination.module.scss";
 import { isEqual } from "lodash";
+import * as telemetry from '../../common/telemetry';
 
 export interface IPaginationProps {
     /**
@@ -44,6 +45,8 @@ export class Pagination extends React.Component<IPaginationProps, IPaginationSta
     constructor(props: Readonly<IPaginationProps>) {
         super(props);
 
+        telemetry.track('ReactPagination');
+
         const paginationElements = this.preparePaginationElements(props.totalPages);
 
         this.state = {
diff --git a/src/controls/toolbar/Toolbar.tsx b/src/controls/toolbar/Toolbar.tsx
@@ -20,6 +20,7 @@ import { Icon } from "office-ui-fabric-react/lib/components/Icon/Icon";
 import { InFlowToolbarItem, toolbarMenuProps } from "./InFlowToolbarItem";
 import styles from "./Toolbar.module.scss";
 import { flattenedActions, getInFlowToolbarItems, getOverflowToolbarItems, TActionGroups, TFilters, TToolbarItems, TToolbarLayout } from "./ToolbarActionsUtils";
+import { useTelemetry } from "../../common/telemetry";
 
 /**
  * Toolbar props
@@ -70,6 +71,8 @@ export const Toolbar = (props: IToolbarProps) => {
     );
   };
 
+  useTelemetry('ReactToolbar');
+
   React.useLayoutEffect(() => {
     layoutQuery.current = window.matchMedia("(min-width: 640px)");
     layoutQuery.current.addEventListener("change", onChangeLayout);
