chore: add context logging for chart cell

pinterest · Sep 24, 2024 · 328f604 · 328f604
1 parent 161b986
commit 328f604
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/querybook/webapp/components/DataDocChartCell/DataDocChartCell.tsx b/querybook/webapp/components/DataDocChartCell/DataDocChartCell.tsx
@@ -3,8 +3,10 @@ import React from 'react';
 
 import { QueryExecutionPicker } from 'components/ExecutionPicker/QueryExecutionPicker';
 import { StatementExecutionPicker } from 'components/ExecutionPicker/StatementExecutionPicker';
+import { ComponentType, ElementType } from 'const/analytics';
 import { IDataChartCellMeta } from 'const/datadoc';
 import { useChartSource } from 'hooks/chart/useChartSource';
+import { trackClick } from 'lib/analytics';
 import { transformData } from 'lib/chart/chart-data-transformation';
 import { getDataTransformationOptions } from 'lib/chart/chart-meta-processing';
 import { QueryExecutionResource } from 'resource/queryExecution';
@@ -228,7 +230,13 @@ export const DataDocChartCell = React.memo<IProps>(
                     <div className="flex-row">
                         <TextButton
                             title="Config Chart"
-                            onClick={() => setShowChartComposer(true)}
+                            onClick={() => {
+                                trackClick({
+                                    component: ComponentType.DATADOC_CHART_CELL,
+                                    element: ElementType.CHART_CONFIG_BUTTON,
+                                });
+                                setShowChartComposer(true);
+                            }}
                             size="small"
                             className="mr8"
                         />

diff --git a/querybook/webapp/components/DataDocChartCell/DataDocChartComposer.tsx b/querybook/webapp/components/DataDocChartCell/DataDocChartComposer.tsx
@@ -8,6 +8,7 @@ import Select from 'react-select';
 import { QueryExecutionPicker } from 'components/ExecutionPicker/QueryExecutionPicker';
 import { StatementExecutionPicker } from 'components/ExecutionPicker/StatementExecutionPicker';
 import { StatementResultTable } from 'components/StatementResultTable/StatementResultTable';
+import { ComponentType, ElementType } from 'const/analytics';
 import { ColorPalette } from 'const/chartColors';
 import { IDataChartCellMeta } from 'const/datadoc';
 import {
@@ -29,6 +30,7 @@ import {
 } from 'const/dataDocChart';
 import { StatementExecutionResultSizes } from 'const/queryResultLimit';
 import { useChartSource } from 'hooks/chart/useChartSource';
+import { trackClick } from 'lib/analytics';
 import { transformData } from 'lib/chart/chart-data-transformation';
 import { mapMetaToFormVals } from 'lib/chart/chart-meta-processing';
 import {
@@ -1046,7 +1048,13 @@ const DataDocChartComposerComponent: React.FunctionComponent<
                 {isEditable ? (
                     <div className="DataDocChartComposer-button">
                         <SoftButton
-                            onClick={() => handleSubmit()}
+                            onClick={() => {
+                                trackClick({
+                                    component: ComponentType.DATADOC_CHART_CELL,
+                                    element: ElementType.CHART_SAVE_BUTTON,
+                                });
+                                handleSubmit();
+                            }}
                             title="Save"
                             fullWidth
                             pushable={false}

diff --git a/querybook/webapp/const/analytics.ts b/querybook/webapp/const/analytics.ts
@@ -16,6 +16,7 @@ export enum ComponentType {
     DATADOC_PAGE = 'DATADOC_PAGE',
     ADHOC_QUERY = 'ADHOC_QUERY',
     DATADOC_QUERY_CELL = 'DATADOC_QUERY_CELL',
+    DATADOC_CHART_CELL = 'DATADOC_CHART_CELL',
     RIGHT_SIDEBAR = 'RIGHT_SIDEBAR',
     TABLE_DETAIL_VIEW = 'TABLE_DETAIL_VIEW',
     TABLE_NAVIGATOR_SEARCH = 'TABLE_NAVIGATOR_SEARCH',
@@ -88,6 +89,10 @@ export enum ElementType {
     RESULT_EXPORT_BUTTON = 'RESULT_EXPORT_BUTTON',
     INSERT_SNIPPET_BUTTON = 'INSERT_SNIPPET_BUTTON',
 
+    // Chart Cell
+    CHART_CONFIG_BUTTON = 'CHART_CONFIG_BUTTON',
+    CHART_SAVE_BUTTON = 'CHART_SAVE_BUTTON',
+
     // Table detail view
     OVERVIEW_TABLE_TAB = 'OVERVIEW_TABLE_TAB',
     COLUMNS_TABLE_TAB = 'COLUMNS_TABLE_TAB',