diff --git a/static/app/utils/discover/types.tsx b/static/app/utils/discover/types.tsx index 246af231e7c64c..74761287e065a0 100644 --- a/static/app/utils/discover/types.tsx +++ b/static/app/utils/discover/types.tsx @@ -10,6 +10,7 @@ export enum DisplayModes { DAILY = 'daily', DAILYTOP5 = 'dailytop5', WORLDMAP = 'worldmap', + BAR = 'bar', } export const TOP_EVENT_MODES: string[] = [DisplayModes.TOP5, DisplayModes.DAILYTOP5]; @@ -21,6 +22,7 @@ export const DISPLAY_MODE_OPTIONS: SelectValue[] = [ {value: DisplayModes.DAILY, label: t('Total Daily')}, {value: DisplayModes.DAILYTOP5, label: t('Top 5 Daily')}, {value: DisplayModes.WORLDMAP, label: t('World Map')}, + {value: DisplayModes.BAR, label: t('Bar Chart')}, ]; /** @@ -37,6 +39,7 @@ export const DISPLAY_MODE_FALLBACK_OPTIONS = { [DisplayModes.DAILY]: DisplayModes.DEFAULT, [DisplayModes.DAILYTOP5]: DisplayModes.DAILY, [DisplayModes.WORLDMAP]: DisplayModes.DEFAULT, + [DisplayModes.BAR]: DisplayModes.DEFAULT, }; // default list of yAxis options @@ -49,4 +52,5 @@ export const MULTI_Y_AXIS_SUPPORTED_DISPLAY_MODES = [ DisplayModes.DEFAULT, DisplayModes.DAILY, DisplayModes.PREVIOUS, + DisplayModes.BAR, ]; diff --git a/static/app/views/eventsV2/miniGraph.tsx b/static/app/views/eventsV2/miniGraph.tsx index 53cae6cd4e673e..3a57ffe4463b75 100644 --- a/static/app/views/eventsV2/miniGraph.tsx +++ b/static/app/views/eventsV2/miniGraph.tsx @@ -63,7 +63,8 @@ class MiniGraph extends React.Component { const field = isTopEvents ? apiPayload.field : undefined; const topEvents = isTopEvents ? TOP_N : undefined; const orderby = isTopEvents ? decodeScalar(apiPayload.sort) : undefined; - const interval = isDaily ? '1d' : getInterval({start, end, period}, 'high'); + const intervalFidelity = display === 'bar' ? 'low' : 'high'; + const interval = isDaily ? '1d' : getInterval({start, end, period}, intervalFidelity); return { organization, @@ -82,6 +83,7 @@ class MiniGraph extends React.Component { showDaily: isDaily, expired: eventView.expired, name: eventView.name, + display, }; } @@ -131,6 +133,7 @@ class MiniGraph extends React.Component { showDaily, expired, name, + display, } = this.getRefreshProps(this.props); return ( @@ -171,11 +174,14 @@ class MiniGraph extends React.Component { } const allSeries = timeseriesData ?? results ?? []; - const chartType = this.getChartType({ - showDaily, - yAxis: Array.isArray(yAxis) ? yAxis[0] : yAxis, - timeseriesData: allSeries, - }); + const chartType = + display === 'bar' + ? display + : this.getChartType({ + showDaily, + yAxis: Array.isArray(yAxis) ? yAxis[0] : yAxis, + timeseriesData: allSeries, + }); const data = allSeries.map(series => ({ ...series, lineStyle: { diff --git a/static/app/views/eventsV2/resultsChart.tsx b/static/app/views/eventsV2/resultsChart.tsx index d8808be062efc4..558fb142cfdadd 100644 --- a/static/app/views/eventsV2/resultsChart.tsx +++ b/static/app/views/eventsV2/resultsChart.tsx @@ -6,7 +6,9 @@ import isEqual from 'lodash/isEqual'; import {Client} from 'app/api'; import AreaChart from 'app/components/charts/areaChart'; +import BarChart from 'app/components/charts/barChart'; import EventsChart from 'app/components/charts/eventsChart'; +import {getInterval} from 'app/components/charts/utils'; import WorldMapChart from 'app/components/charts/worldMapChart'; import {getParams} from 'app/components/organizations/globalSelectionHeader/getParams'; import {Panel} from 'app/components/panels'; @@ -83,9 +85,23 @@ class ResultsChart extends Component { const chartComponent = display === DisplayModes.WORLDMAP ? WorldMapChart + : display === DisplayModes.BAR + ? BarChart : hasConnectDiscoverAndDashboards && yAxisValue.length > 1 && !isDaily ? AreaChart : undefined; + const interval = + display === DisplayModes.BAR + ? getInterval( + { + start, + end, + period: globalSelection.datetime.period, + utc: utc === 'true', + }, + 'low' + ) + : eventView.interval; return ( @@ -106,7 +122,7 @@ class ResultsChart extends Component { disablePrevious={!isPrevious} disableReleases={!isPeriod} field={isTopEvents ? apiPayload.field : undefined} - interval={eventView.interval} + interval={interval} showDaily={isDaily} topEvents={isTopEvents ? topEvents : undefined} orderby={isTopEvents ? decodeScalar(apiPayload.sort) : undefined} @@ -205,9 +221,7 @@ class ResultsChartContainer extends Component { } if ( yAxis.length > 1 && - ![DisplayModes.DEFAULT, DisplayModes.DAILY, DisplayModes.PREVIOUS].includes( - opt.value as DisplayModes - ) + !MULTI_Y_AXIS_SUPPORTED_DISPLAY_MODES.includes(opt.value as DisplayModes) ) { return { ...opt, diff --git a/tests/js/spec/views/eventsV2/miniGraph.spec.tsx b/tests/js/spec/views/eventsV2/miniGraph.spec.tsx index 14b1ca07162c4c..4e9b2342823312 100644 --- a/tests/js/spec/views/eventsV2/miniGraph.spec.tsx +++ b/tests/js/spec/views/eventsV2/miniGraph.spec.tsx @@ -47,4 +47,21 @@ describe('EventsV2 > MiniGraph', function () { const eventsRequestProps = wrapper.find('EventsRequest').props(); expect(eventsRequestProps.yAxis).toEqual(yAxis); }); + + it('uses low fidelity interval for bar charts', async function () { + const yAxis = ['count()', 'failure_count()']; + eventView.display = 'bar'; + const wrapper = mountWithTheme( + , + initialData.routerContext + ); + const eventsRequestProps = wrapper.find('EventsRequest').props(); + expect(eventsRequestProps.interval).toEqual('12h'); + }); }); diff --git a/tests/js/spec/views/eventsV2/resultsChart.spec.tsx b/tests/js/spec/views/eventsV2/resultsChart.spec.tsx index a520105a011430..de05d650b52f02 100644 --- a/tests/js/spec/views/eventsV2/resultsChart.spec.tsx +++ b/tests/js/spec/views/eventsV2/resultsChart.spec.tsx @@ -34,7 +34,7 @@ describe('EventsV2 > ResultsChart', function () { eventView = EventView.fromSavedQueryOrLocation(undefined, location); }); - it('only allows default, daily, and previous period display modes when multiple y axis are selected', async function () { + it('only allows default, daily, previous period, and bar display modes when multiple y axis are selected', async function () { const wrapper = mountWithTheme( ResultsChart', function () { const displayOptions = wrapper.find('ChartFooter').props().displayOptions; displayOptions.forEach(({value, disabled}) => { if ( - ![DisplayModes.DEFAULT, DisplayModes.DAILY, DisplayModes.PREVIOUS].includes(value) + ![ + DisplayModes.DEFAULT, + DisplayModes.DAILY, + DisplayModes.PREVIOUS, + DisplayModes.BAR, + ].includes(value) ) { expect(disabled).toBe(true); } @@ -83,7 +88,7 @@ describe('EventsV2 > ResultsChart', function () { ); }); - it('disables other y-axis options when not in default, daily, or previous period display mode', async function () { + it('disables other y-axis options when not in default, daily, previous period, or bar display mode', async function () { eventView.display = DisplayModes.WORLDMAP; const wrapper = mountWithTheme(