diff --git a/static/app/components/charts/baseChart.tsx b/static/app/components/charts/baseChart.tsx index 080476692b56f..16f8732ed1c86 100644 --- a/static/app/components/charts/baseChart.tsx +++ b/static/app/components/charts/baseChart.tsx @@ -111,6 +111,10 @@ interface TooltipOption name: string, seriesParams?: TooltipComponentFormatterCallback ) => string; + /** + * If true does not display sublabels with a value of 0. + */ + skipZeroValuedSubLabels?: boolean; /** * Array containing data that is used to display indented sublabels. */ diff --git a/static/app/components/charts/components/tooltip.tsx b/static/app/components/charts/components/tooltip.tsx index d80becccada85..66e65beb91fc7 100644 --- a/static/app/components/charts/components/tooltip.tsx +++ b/static/app/components/charts/components/tooltip.tsx @@ -118,6 +118,10 @@ export type FormatterOptions = Pick< * Limit the number of series rendered in the tooltip and display "+X more". */ limit?: number; + /** + * If true does not display sublabels with a value of 0. + */ + skipZeroValuedSubLabels?: boolean; /** * Array containing data that is used to display indented sublabels. */ @@ -138,6 +142,7 @@ export function getFormatter({ subLabels = [], addSecondsToTimeFormat = false, limit, + skipZeroValuedSubLabels, }: FormatterOptions): TooltipComponentFormatterCallback { const getFilter = (seriesParam: any) => { // Series do not necessarily have `data` defined, e.g. releases don't have `data`, but rather @@ -255,13 +260,17 @@ export function getFormatter({ for (const subLabel of filteredSubLabels) { const serieValue = subLabel.data[serie.dataIndex].value; + if (skipZeroValuedSubLabels && serieValue === 0) { + continue; + } + labelWithSubLabels.push( `
${ subLabel.label } ${valueFormatter(serieValue)}
` ); - acc.total = acc.total + subLabel.data[serie.dataIndex].value; + acc.total = acc.total + serieValue; } acc.series.push(labelWithSubLabels.join('')); @@ -336,6 +345,7 @@ export function computeChartTooltip( hideDelay, subLabels, chartId, + skipZeroValuedSubLabels, ...props }: Props, theme: Theme @@ -355,6 +365,7 @@ export function computeChartTooltip( nameFormatter, markerFormatter, subLabels, + skipZeroValuedSubLabels, }); return { diff --git a/static/app/views/organizationStats/index.spec.tsx b/static/app/views/organizationStats/index.spec.tsx index dee37c3a0229b..8c67e74f03377 100644 --- a/static/app/views/organizationStats/index.spec.tsx +++ b/static/app/views/organizationStats/index.spec.tsx @@ -115,7 +115,7 @@ describe('OrganizationStats', function () { UsageStatsOrg: { statsPeriod: DEFAULT_STATS_PERIOD, interval: '1h', - groupBy: ['category', 'outcome'], + groupBy: ['category', 'outcome', 'reason'], project: [-1], field: ['sum(quantity)'], }, @@ -314,7 +314,7 @@ describe('OrganizationStats', function () { query: { statsPeriod: DEFAULT_STATS_PERIOD, interval: '1h', - groupBy: ['category', 'outcome'], + groupBy: ['category', 'outcome', 'reason'], project: selectedProjects, field: ['sum(quantity)'], }, @@ -355,7 +355,7 @@ describe('OrganizationStats', function () { query: { statsPeriod: DEFAULT_STATS_PERIOD, interval: '1h', - groupBy: ['category', 'outcome'], + groupBy: ['category', 'outcome', 'reason'], project: selectedProject, field: ['sum(quantity)'], }, diff --git a/static/app/views/organizationStats/usageChart/index.tsx b/static/app/views/organizationStats/usageChart/index.tsx index 178c38eead9b9..e2ee2109f8228 100644 --- a/static/app/views/organizationStats/usageChart/index.tsx +++ b/static/app/views/organizationStats/usageChart/index.tsx @@ -118,7 +118,7 @@ export const CHART_OPTIONS_DATA_TRANSFORM: SelectValue[] = [ }, ]; -const enum SeriesTypes { +export const enum SeriesTypes { ACCEPTED = 'Accepted', DROPPED = 'Dropped', PROJECTED = 'Projected', diff --git a/static/app/views/organizationStats/usageStatsOrg.tsx b/static/app/views/organizationStats/usageStatsOrg.tsx index 23d4dd25a316d..e4a0716f2ee7c 100644 --- a/static/app/views/organizationStats/usageStatsOrg.tsx +++ b/static/app/views/organizationStats/usageStatsOrg.tsx @@ -4,9 +4,11 @@ import type {WithRouterProps} from 'react-router'; import styled from '@emotion/styled'; import * as Sentry from '@sentry/react'; import isEqual from 'lodash/isEqual'; +import startCase from 'lodash/startCase'; import moment from 'moment'; import {navigateTo} from 'sentry/actionCreators/navigation'; +import type {TooltipSubLabel} from 'sentry/components/charts/components/tooltip'; import OptionSelector from 'sentry/components/charts/optionSelector'; import {InlineContainer, SectionHeading} from 'sentry/components/charts/styles'; import type {DateTimeObject} from 'sentry/components/charts/utils'; @@ -30,7 +32,11 @@ import { } from './usageChart/utils'; import type {UsageSeries, UsageStat} from './types'; import type {ChartStats, UsageChartProps} from './usageChart'; -import UsageChart, {CHART_OPTIONS_DATA_TRANSFORM, ChartDataTransform} from './usageChart'; +import UsageChart, { + CHART_OPTIONS_DATA_TRANSFORM, + ChartDataTransform, + SeriesTypes, +} from './usageChart'; import UsageStatsPerMin from './usageStatsPerMin'; import {formatUsageWithUnits, getFormatUsageOptions, isDisplayUtc} from './utils'; @@ -115,7 +121,7 @@ class UsageStatsOrganization< return { ...queryDatetime, interval: getSeriesApiInterval(dataDatetime), - groupBy: ['category', 'outcome'], + groupBy: ['category', 'outcome', 'reason'], project: projectIds, field: ['sum(quantity)'], }; @@ -136,6 +142,7 @@ class UsageStatsOrganization< chartDateTimezoneDisplay: string; chartDateUtc: boolean; chartStats: ChartStats; + chartSubLabels: TooltipSubLabel[]; chartTransform: ChartDataTransform; dataError?: Error; } { @@ -232,6 +239,7 @@ class UsageStatsOrganization< chartDateEnd, chartDateUtc, chartTransform, + chartSubLabels, } = this.chartData; const hasError = error || !!dataError; @@ -249,6 +257,10 @@ class UsageStatsOrganization< usageDateShowUtc: chartDateUtc, usageDateInterval: chartDateInterval, usageStats: chartStats, + chartTooltip: { + subLabels: chartSubLabels, + skipZeroValuedSubLabels: true, + }, } as UsageChartProps; return chartProps; @@ -318,6 +330,7 @@ class UsageStatsOrganization< total?: string; }; chartStats: ChartStats; + chartSubLabels: TooltipSubLabel[]; dataError?: Error; } { const cardStats = { @@ -332,9 +345,10 @@ class UsageStatsOrganization< projected: [], filtered: [], }; + const chartSubLabels: TooltipSubLabel[] = []; if (!orgStats) { - return {cardStats, chartStats}; + return {cardStats, chartStats, chartSubLabels}; } try { @@ -383,20 +397,63 @@ class UsageStatsOrganization< count[outcome] += group.totals['sum(quantity)']; group.series['sum(quantity)'].forEach((stat, i) => { - switch (outcome) { - case Outcome.ACCEPTED: - case Outcome.FILTERED: - usageStats[i][outcome] += stat; - return; - case Outcome.DROPPED: - case Outcome.RATE_LIMITED: - case Outcome.CARDINALITY_LIMITED: - case Outcome.INVALID: - usageStats[i].dropped.total += stat; - // TODO: add client discards to dropped? + const dataObject = { + name: orgStats.intervals[i], + value: stat, + }; + + const reason = String(group.by.reason ?? ''); + const label = startCase(reason.replace(/-|_/g, ' ')); + const existingSubLabel = chartSubLabels.find( + subLabel => subLabel.label === label + ); + + if (outcome === Outcome.FILTERED) { + usageStats[i][outcome] += stat; + + if (existingSubLabel) { + existingSubLabel.data.push({ + ...dataObject, + value: dataObject.value, + }); return; - default: + } + + chartSubLabels.push({ + parentLabel: SeriesTypes.FILTERED, + label, + data: [dataObject], + }); + + return; + } + + if (outcome === Outcome.ACCEPTED) { + usageStats[i][outcome] += stat; + return; + } + + if ( + outcome === Outcome.DROPPED || + outcome === Outcome.RATE_LIMITED || + outcome === Outcome.CARDINALITY_LIMITED || + outcome === Outcome.INVALID + ) { + usageStats[i].dropped.total += stat; + + if (existingSubLabel) { + existingSubLabel.data.push({ + ...dataObject, + value: dataObject.value, + }); return; + } + + chartSubLabels.push({ + parentLabel: SeriesTypes.DROPPED, + label, + data: [dataObject], + }); } }); }); @@ -441,6 +498,7 @@ class UsageStatsOrganization< ), }, chartStats, + chartSubLabels, }; } catch (err) { Sentry.withScope(scope => { @@ -452,6 +510,7 @@ class UsageStatsOrganization< return { cardStats, chartStats, + chartSubLabels, dataError: new Error('Failed to parse stats data'), }; }