Skip to content

Commit 8e1ef4e

Browse files
adamdoeadamdoe
authored
fix metrics related issues (#2349)
* fix metrics related issues * fix: minor convention fixes
1 parent cfd28c9 commit 8e1ef4e

File tree

17 files changed

+143
-167
lines changed

17 files changed

+143
-167
lines changed

‎docs/COVE_EVENTS.md‎

Lines changed: 4 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ APP|VIZTYPE_VIZSUBTYPE|VIZ_TITLE|EVENT_TYPE|EVENT_ACTION|SPECIFICS
1414

1515
**Example Output:**
1616
```
17-
cove|map_us-county|Population Map|map_zoomed_in|click|zoom_level: 1.5, location: 40.71,-74.01
17+
cove|map_us-county|Population Map|map_hover|hover|location: california
1818
```
1919

2020
## Function Usage
@@ -26,11 +26,11 @@ import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
2626

2727
publishAnalyticsEvent({
2828
vizType: 'map', // Required: Visualization type
29-
eventType: 'map_ready', // Required: Event being tracked
30-
eventAction: 'load', // Optional: User action (default: 'unknown')
29+
eventType: 'map_hover', // Required: Event being tracked
30+
eventAction: 'hover', // Optional: User action (default: 'unknown')
3131
eventLabel: configUrl, // Optional: Typically config URL
3232
vizTitle: config?.title, // Optional: Visualization title
33-
specifics: 'additional details' // Optional: Extra context
33+
specifics: 'location: california' // Optional: Extra context
3434
})
3535
```
3636

@@ -50,18 +50,6 @@ publishAnalyticsEvent({
5050

5151
## Event Types Reference
5252

53-
### Visualization Lifecycle
54-
```
55-
// When visualizations finish loading
56-
cove|{vizType}|{title}|{vizType}_ready|load|no details
57-
58-
// Examples:
59-
cove|map|Population Map|map_ready|load|no details
60-
cove|chart|Sales Chart|chart_ready|load|no details
61-
cove|dashboard|Health Dashboard|dashboard_ready|load|no details
62-
cove|data-bite|Key Metric|data-bite_ready|load|no details
63-
```
64-
6553
### Data Management
6654
```
6755
// User downloads data
@@ -186,17 +174,6 @@ type ANALYTICS_EVENT_ACTIONS =
186174
187175
## Common Usage Patterns
188176
189-
### Visualization Ready
190-
```typescript
191-
publishAnalyticsEvent({
192-
vizType: 'chart',
193-
eventType: 'chart_ready',
194-
eventAction: 'load',
195-
eventLabel: interactionLabel,
196-
vizTitle: config?.title
197-
})
198-
```
199-
200177
### Filter Changes
201178
```typescript
202179
publishAnalyticsEvent({
@@ -249,7 +226,6 @@ publishAnalyticsEvent({
249226
## Output Examples
250227
251228
```
252-
cove|map_us-county|Population Map|map_ready|load|no details
253229
cove|dashboard|Health Dashboard|dashboard_filter_changed|change|key: state, value: california
254230
cove|chart_bar|Sales Chart|chart_legend_item_toggled|click|mode: highlight, item: Q1 Sales
255231
cove|map|State Map|map_hover|hover|location: california

‎packages/chart/index.html‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
<!-- <div class="react-container" data-config="/examples/test.json"></div> -->
5353
<!-- <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div> -->
5454
<!-- <div class="react-container" data-config="/examples/dev-8332.json"></div> -->
55-
<div class="react-container" data-config="/examples/private/f4.json"></div>
55+
<!-- <div class="react-container" data-config="/examples/private/f4.json"></div> -->
5656
<!-- <div class="react-container" data-config="/examples/feature/filters/url-filter.json"></div> -->
5757
<!-- <div class="react-container" data-config="/examples/feature/pie/planet-pie-example-config.json"></div> -->
5858
<!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Viz.json></div> -->
@@ -73,10 +73,9 @@
7373

7474
<!-- BAR -->
7575
<!-- <div class="react-container" data-config="/examples/feature/bar/planet-example-config.json"></div> -->
76-
<!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
7776
<!-- <div class="react-container" data-config="/examples/feature/bar/example-bar-chart.json"></div> -->
7877
<!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart-max-increase.json"></div> -->
79-
<!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart.json"></div> -->
78+
<div class="react-container" data-config="/examples/feature/bar/horizontal-chart.json"></div>
8079
<!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-stacked-bar-chart.json"></div> -->
8180
<!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
8281

@@ -107,10 +106,12 @@
107106
<!-- <div class="react-container" data-config="/examples/feature/tests-big-small/line-chart-max-increase.json"></div> -->
108107

109108
<!-- TESTS NONNUMERICS -->
110-
<div class="react-container"
111-
data-config="/examples/feature/tests-non-numerics/planet-pie-example-config-nonnumeric.json"></div>
112-
<!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-combo-bar-nonnumeric.json"></div> -->
113-
<!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-bar-chart-nonnumeric.json"></div> -->
109+
<!-- <div class="react-container"
110+
data-config="/examples/feature/tests-non-numerics/planet-pie-example-config-nonnumeric.json"></div> -->
111+
<!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-combo-bar-nonnumeric.json">
112+
</div> -->
113+
<!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-bar-chart-nonnumeric.json">
114+
</div> -->
114115
<!-- <div class="react-container" data-config="/examples/sparkline.json"></div> -->
115116
<!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/sparkline-chart-nonnumeric.json"></div> -->
116117
<!-- <div class="react-container" data-config="/examples/region-issue.json"></div> -->

‎packages/chart/src/CdcChartComponent.tsx‎

Lines changed: 29 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -485,17 +485,6 @@ const CdcChart: React.FC<CdcChartProps> = ({
485485
if (container && !isLoading && !_.isEmpty(config) && !coveLoadedEventRan) {
486486
publish('cove_loaded', { config: config })
487487
dispatch({ type: 'SET_LOADED_EVENT', payload: true })
488-
publishAnalyticsEvent({
489-
vizType: config?.type,
490-
vizSubType: getVizSubType(config),
491-
eventType: 'chart_ready',
492-
eventAction: 'load',
493-
eventLabel: interactionLabel,
494-
vizTitle: getVizTitle(config),
495-
...(config.visualizationType === 'Bar' && {
496-
specifics: `orientation: ${config.orientation === 'horizontal' ? 'horizontal' : 'vertical'}`
497-
})
498-
})
499488
}
500489
}, [container, config, isLoading]) // eslint-disable-line
501490

@@ -970,8 +959,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
970959
legend.position === 'top' ||
971960
visualizationType === 'Sankey' ||
972961
visualizationType === 'Spark Line'
973-
? 'w-100'
974-
: 'w-75'
962+
? 'w-100'
963+
: 'w-75'
975964
}
976965
>
977966
{/* All charts with LinearChart */}
@@ -1007,7 +996,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
1007996
const labelMargin = 120
1008997
const widthReduction =
1009998
config.showLineSeriesLabels &&
1010-
(config.legend.position !== 'right' || config.legend.hide)
999+
(config.legend.position !== 'right' || config.legend.hide)
10111000
? labelMargin
10121001
: 0
10131002
return (
@@ -1103,33 +1092,33 @@ const CdcChart: React.FC<CdcChartProps> = ({
11031092
config.visualizationType !== 'Spark Line' &&
11041093
config.visualizationType !== 'Sankey') ||
11051094
(config.visualizationType === 'Sankey' && config.table.show)) && (
1106-
<DataTable
1107-
/* changing the "key" will force the table to re-render
1095+
<DataTable
1096+
/* changing the "key" will force the table to re-render
11081097
when the default sort changes while editing */
1109-
key={dataTableDefaultSortBy}
1110-
config={pivotDynamicSeries(config)}
1111-
rawData={
1112-
config.visualizationType === 'Sankey'
1113-
? config?.data?.[0]?.tableData
1114-
: config.table.customTableConfig
1115-
? filterVizData(config.filters, config.data)
1116-
: config.data
1117-
}
1118-
runtimeData={getTableRuntimeData()}
1119-
expandDataTable={config.table.expanded}
1120-
columns={config.columns}
1121-
defaultSortBy={dataTableDefaultSortBy}
1122-
displayGeoName={name => name}
1123-
applyLegendToRow={applyLegendToRow}
1124-
tableTitle={config.table.label}
1125-
indexTitle={config.table.indexLabel}
1126-
vizTitle={title}
1127-
viewport={currentViewport}
1128-
tabbingId={handleChartTabbing(config, legendId)}
1129-
colorScale={colorScale}
1130-
interactionLabel={interactionLabel}
1131-
/>
1132-
)}
1098+
key={dataTableDefaultSortBy}
1099+
config={pivotDynamicSeries(config)}
1100+
rawData={
1101+
config.visualizationType === 'Sankey'
1102+
? config?.data?.[0]?.tableData
1103+
: config.table.customTableConfig
1104+
? filterVizData(config.filters, config.data)
1105+
: config.data
1106+
}
1107+
runtimeData={getTableRuntimeData()}
1108+
expandDataTable={config.table.expanded}
1109+
columns={config.columns}
1110+
defaultSortBy={dataTableDefaultSortBy}
1111+
displayGeoName={name => name}
1112+
applyLegendToRow={applyLegendToRow}
1113+
tableTitle={config.table.label}
1114+
indexTitle={config.table.indexLabel}
1115+
vizTitle={title}
1116+
viewport={currentViewport}
1117+
tabbingId={handleChartTabbing(config, legendId)}
1118+
colorScale={colorScale}
1119+
interactionLabel={interactionLabel}
1120+
/>
1121+
)}
11331122
{config?.annotations?.length > 0 && <Annotation.Dropdown />}
11341123
{/* show pdf or image button */}
11351124
{config?.legacyFootnotes && (

‎packages/chart/src/components/BarChart/components/BarChart.Horizontal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -371,7 +371,7 @@ export const BarChartHorizontal = () => {
371371
height: numbericBarHeight,
372372
x: barX,
373373
y: barHeight * bar.index,
374-
onMouseOver: e => onMouseOverBar(xAxisValue, bar.key, e, data),
374+
onMouseOver: e => onMouseOverBar(xAxisValue, bar.key, e, data, bar.value),
375375
onMouseLeave: onMouseLeaveBar,
376376
tooltipHtml: tooltip,
377377
tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`,

‎packages/chart/src/components/BarChart/components/BarChart.StackedHorizontal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ const BarChartStackedHorizontal = () => {
212212
height: bar.height,
213213
x: bar.x,
214214
y: bar.y,
215-
onMouseOver: e => onMouseOverBar(yAxisValue, bar.key, e, data),
215+
onMouseOver: e => onMouseOverBar(yAxisValue, bar.key, e, data, bar.bar.data[bar.key]),
216216
onMouseLeave: onMouseLeaveBar,
217217
tooltipHtml: tooltip,
218218
tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`,

‎packages/chart/src/components/BarChart/components/BarChart.StackedVertical.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ const BarChartStackedVertical = () => {
201201
height: bar.height,
202202
x: barX,
203203
y: bar.y,
204-
onMouseOver: e => onMouseOverBar(xAxisValue, bar.key, e, data),
204+
onMouseOver: e => onMouseOverBar(xAxisValue, bar.key, e, data, bar.bar.data[bar.key]),
205205
onMouseLeave: onMouseLeaveBar,
206206
tooltipHtml: tooltip,
207207
tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`,

‎packages/chart/src/components/BarChart/components/BarChart.Vertical.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -389,7 +389,7 @@ export const BarChartVertical = () => {
389389
height: barHeight,
390390
x: barX,
391391
y: barY,
392-
onMouseOver: e => onMouseOverBar(xAxisValue, bar.key, e, data),
392+
onMouseOver: e => onMouseOverBar(xAxisValue, bar.key, e, data, bar.value),
393393
onMouseLeave: onMouseLeaveBar,
394394
tooltipHtml: tooltip,
395395
tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`,

‎packages/chart/src/components/BarChart/helpers/useBarChart.ts‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@ import { ChartDispatchContext } from '../../../ConfigContext'
33
import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
44
import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
55
import { getPaletteColors } from '@cdc/core/helpers/palettes/utils'
6+
import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
7+
import { getVizSubType, getVizTitle } from '@cdc/core/helpers/metrics/utils'
68

79
export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, configContext) => {
8-
const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, seriesHighlight } = configContext
10+
const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, seriesHighlight, interactionLabel } =
11+
configContext
912
const { orientation } = config
1013
const dispatch = useContext(ChartDispatchContext)
1114
const [hoveredBar, setHoveredBar] = useState(null)
@@ -190,12 +193,30 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
190193
return additionalTooltipItems
191194
}
192195

193-
const onMouseOverBar = (categoryValue, barKey, event, data) => {
196+
const onMouseOverBar = (categoryValue, barKey, event, data, barValue) => {
194197
if (config.legend.highlightOnHover && config.legend.behavior === 'highlight' && barKey) {
195198
dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: [barKey] })
196199
}
197200
handleTooltipMouseOver(event, data)
198201
setHoveredBar(categoryValue)
202+
203+
if (config.tooltips.singleSeries) {
204+
const numericValue = barValue || 'none'
205+
publishAnalyticsEvent({
206+
vizType: config.type,
207+
vizSubType: getVizSubType(config),
208+
eventType: `chart_hover`,
209+
eventAction: 'hover',
210+
eventLabel: interactionLabel,
211+
vizTitle: getVizTitle(config),
212+
series: barKey || 'none',
213+
specifics: `series: ${barKey || 'none'}, yValue: ${
214+
orientation === 'horizontal' ? categoryValue : numericValue
215+
}, xValue: ${orientation === 'horizontal' ? numericValue : categoryValue}, orientation: ${
216+
orientation || 'none'
217+
}`
218+
})
219+
}
199220
}
200221
const onMouseLeaveBar = () => {
201222
if (config.legend.highlightOnHover && config.legend.behavior === 'highlight') {

‎packages/chart/src/components/ScatterPlot/ScatterPlot.jsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -86,18 +86,21 @@ const ScatterPlot = ({ xScale, yScale }) => {
8686
tabIndex={-1}
8787
onMouseEnter={() => {
8888
// Track hover analytics event if this is a new hover
89-
if (interactionLabel && (currentHover.dataIndex !== dataIndex || currentHover.seriesKey !== s)) {
89+
if ((currentHover.dataIndex !== dataIndex || currentHover.seriesKey !== s)) {
9090
const seriesName = config.runtime.seriesLabels?.[s] || s
9191
const safeSeriesName = String(seriesName).replace(/[^a-zA-Z0-9]/g, '_')
92+
const xAxisValue = item[config.xAxis.dataKey]
93+
const yAxisValue = item[s]
94+
9295
publishAnalyticsEvent({
9396
vizType: config?.type,
9497
vizSubType: getVizSubType(config),
9598
eventType: `chart_hover`,
9699
eventAction: 'hover',
97-
eventLabel: interactionLabel,
100+
eventLabel: interactionLabel || 'unknown',
98101
vizTitle: getVizTitle(config),
99102
series: seriesName,
100-
specifics: `hovered on: ${String(safeSeriesName).toLowerCase()}`
103+
specifics: `series: ${String(safeSeriesName).toLowerCase()}, ${config.xAxis.dataKey}: ${xAxisValue}, ${s}: ${yAxisValue}`
101104
})
102105
setCurrentHover({ dataIndex, seriesKey: s })
103106
}

0 commit comments

Comments
 (0)