🔨 (controls): add tracking labels to widgets

owid · Oct 10, 2023 · 053fe9a · 053fe9a
1 parent 329208e
commit 053fe9a
Show file tree

Hide file tree

Showing 10 changed files with 14 additions and 5 deletions.
diff --git a/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx b/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx
@@ -80,6 +80,7 @@ export class EntitySelectionToggle extends React.Component<{
                     onClick={(): void => {
                         this.props.manager.isSelectingData = !active
                     }}
+                    data-track-note="chart_add_entity"
                 >
                     {label.icon}
                     <label>

diff --git a/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.tsx b/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.tsx
@@ -9,10 +9,11 @@ export class LabeledSwitch extends React.Component<{
     value?: boolean
     label?: string
     tooltip?: string
+    tracking?: string
     onToggle: () => any
 }> {
     render(): JSX.Element {
-        const { label, value, tooltip } = this.props
+        const { label, value, tooltip, tracking } = this.props
 
         return (
             <div className="config-switch">
@@ -21,8 +22,9 @@ export class LabeledSwitch extends React.Component<{
                         type="checkbox"
                         checked={value}
                         onChange={this.props.onToggle}
+                        data-track-note={tracking}
                     />
-                    <div className="outer">
+                    <div data-track-note="" className="outer">
                         <div className="inner"></div>
                     </div>
                     {label}

diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
@@ -53,7 +53,6 @@ export interface SettingsMenuManager
         FacetStrategySelectionManager {
     base?: React.RefObject<SVGGElement | HTMLDivElement> // the root grapher element
     showConfigurationDrawer?: boolean
-    isInIFrame?: boolean
 
     // ArchieML directives
     hideFacetControl?: boolean
@@ -266,8 +265,6 @@ export class SettingsMenu extends React.Component<{
     }
 
     @computed get drawer(): Element | null {
-        // use a drop-down menu when embedded in an iframe
-        if (this.manager.isInIFrame) return null
         // use the drawer `<nav>` element if it exists, otherwise render into a drop-down menu
         return this.manager.base?.current?.closest(".related-charts")
             ? null // also use a drop-down menu within the Related Charts section
@@ -424,6 +421,7 @@ export class SettingsMenu extends React.Component<{
                 <button
                     className={classnames("menu-toggle", { active })}
                     onClick={this.toggleVisibility}
+                    data-track-note="chart_settings_menu_toggle"
                 >
                     <FontAwesomeIcon icon={faGear} />
                     <span className="label"> Settings</span>

diff --git a/packages/@ourworldindata/grapher/src/controls/settings/AbsRelToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/AbsRelToggle.tsx
@@ -48,6 +48,7 @@ export class AbsRelToggle extends React.Component<{
                 value={this.isRelativeMode}
                 tooltip={this.tooltip}
                 onToggle={this.onToggle}
+                tracking="chart_abs_rel_toggle"
             />
         )
     }

diff --git a/packages/@ourworldindata/grapher/src/controls/settings/AxisScaleToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/AxisScaleToggle.tsx
@@ -28,12 +28,14 @@ export class AxisScaleToggle extends React.Component<{
                     <button
                         className={classnames({ active: isLinear })}
                         onClick={(): void => this.setAxisScale(linear)}
+                        data-track-note="chart_toggle_scale"
                     >
                         {label}Linear
                     </button>
                     <button
                         className={classnames({ active: !isLinear })}
                         onClick={(): void => this.setAxisScale(log)}
+                        data-track-note="chart_toggle_scale"
                     >
                         {label}Logarithmic
                     </button>

diff --git a/packages/@ourworldindata/grapher/src/controls/settings/FacetStrategySelector.tsx b/packages/@ourworldindata/grapher/src/controls/settings/FacetStrategySelector.tsx
@@ -83,6 +83,7 @@ export class FacetStrategySelector extends React.Component<{
                                 onClick={(): void => {
                                     this.props.manager.facetStrategy = value
                                 }}
+                                data-track-note={`chart_facet_${option}`}
                             >
                                 <div className="faceting-icon">
                                     {range(value === "none" ? 1 : 6).map(

diff --git a/packages/@ourworldindata/grapher/src/controls/settings/FacetYDomainToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/FacetYDomainToggle.tsx
@@ -39,6 +39,7 @@ export class FacetYDomainToggle extends React.Component<{
                 tooltip="Use the same minimum and maximum values on all charts or scale axes to fit the data in each chart"
                 value={this.isYDomainShared}
                 onToggle={this.onToggle}
+                tracking="chart_facet_ydomain_toggle"
             />
         )
     }

diff --git a/packages/@ourworldindata/grapher/src/controls/settings/NoDataAreaToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/NoDataAreaToggle.tsx
@@ -26,6 +26,7 @@ export class NoDataAreaToggle extends React.Component<{
                 value={this.manager.showNoDataArea}
                 tooltip="Include entities for which ‘no data’ is available in the chart."
                 onToggle={this.onToggle}
+                tracking="chart_no_data_area_toggle"
             />
         )
     }

diff --git a/packages/@ourworldindata/grapher/src/controls/settings/TableFilterToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/TableFilterToggle.tsx
@@ -31,6 +31,7 @@ export class TableFilterToggle extends React.Component<{
                 tooltip={tooltip}
                 value={this.props.manager.showSelectionOnlyInDataTable}
                 onToggle={this.onToggle}
+                tracking="chart_filter_table_rows"
             />
         )
     }

diff --git a/packages/@ourworldindata/grapher/src/controls/settings/ZoomToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/ZoomToggle.tsx
@@ -24,6 +24,7 @@ export class ZoomToggle extends React.Component<{
                 tooltip="Scale axes to focus on the currently highlighted data points."
                 value={this.props.manager.zoomToSelection}
                 onToggle={this.onToggle}
+                tracking="chart_zoom_to_selection"
             />
         )
     }