chartFooter.tsx 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import Feature from 'sentry/components/acl/feature';
  4. import OptionSelector from 'sentry/components/charts/optionSelector';
  5. import {
  6. ChartControls,
  7. InlineContainer,
  8. SectionHeading,
  9. SectionValue,
  10. } from 'sentry/components/charts/styles';
  11. import Switch from 'sentry/components/switchButton';
  12. import {t} from 'sentry/locale';
  13. import {Organization, SelectValue} from 'sentry/types';
  14. import EventView from 'sentry/utils/discover/eventView';
  15. import {TOP_EVENT_MODES} from 'sentry/utils/discover/types';
  16. import {useMetricsCardinalityContext} from 'sentry/utils/performance/contexts/metricsCardinality';
  17. import {usesTransactionsDataset} from './utils';
  18. type Props = {
  19. displayMode: string;
  20. displayOptions: SelectValue<string>[];
  21. eventView: EventView;
  22. onAxisChange: (value: string[]) => void;
  23. onDisplayChange: (value: string) => void;
  24. onTopEventsChange: (value: string) => void;
  25. organization: Organization;
  26. setShowBaseline: (value: boolean) => void;
  27. showBaseline: boolean;
  28. topEvents: string;
  29. total: number | null;
  30. yAxisOptions: SelectValue<string>[];
  31. yAxisValue: string[];
  32. };
  33. export default function ChartFooter({
  34. total,
  35. yAxisValue,
  36. yAxisOptions,
  37. onAxisChange,
  38. displayMode,
  39. displayOptions,
  40. onDisplayChange,
  41. onTopEventsChange,
  42. topEvents,
  43. setShowBaseline,
  44. showBaseline,
  45. organization,
  46. eventView,
  47. }: Props) {
  48. const metricsCardinality = useMetricsCardinalityContext();
  49. const elements: React.ReactNode[] = [];
  50. elements.push(<SectionHeading key="total-label">{t('Total Events')}</SectionHeading>);
  51. elements.push(
  52. total === null ? (
  53. <SectionValue data-test-id="loading-placeholder" key="total-value">
  54. &mdash;
  55. </SectionValue>
  56. ) : (
  57. <SectionValue key="total-value">{total.toLocaleString()}</SectionValue>
  58. )
  59. );
  60. const topEventOptions: SelectValue<string>[] = [];
  61. for (let i = 1; i <= 10; i++) {
  62. topEventOptions.push({value: i.toString(), label: i.toString()});
  63. }
  64. return (
  65. <ChartControls>
  66. <InlineContainer>{elements}</InlineContainer>
  67. <InlineContainer>
  68. <Feature organization={organization} features={['discover-metrics-baseline']}>
  69. <Fragment>
  70. <SwitchLabel>{t('Processed events')}</SwitchLabel>
  71. <Switch
  72. data-test-id="processed-events-toggle"
  73. isActive={showBaseline}
  74. isDisabled={
  75. metricsCardinality.outcome?.forceTransactionsOnly ||
  76. displayMode !== 'default' ||
  77. !usesTransactionsDataset(eventView, yAxisValue)
  78. }
  79. size="lg"
  80. toggle={() => setShowBaseline(!showBaseline)}
  81. />
  82. </Fragment>
  83. </Feature>
  84. <OptionSelector
  85. title={t('Display')}
  86. selected={displayMode}
  87. options={displayOptions}
  88. onChange={onDisplayChange}
  89. />
  90. {TOP_EVENT_MODES.includes(displayMode) && (
  91. <OptionSelector
  92. title={t('Limit')}
  93. selected={topEvents}
  94. options={topEventOptions}
  95. onChange={onTopEventsChange}
  96. />
  97. )}
  98. {TOP_EVENT_MODES.includes(displayMode) ? (
  99. <OptionSelector
  100. title={t('Y-Axis')}
  101. selected={yAxisValue[0]}
  102. options={yAxisOptions}
  103. onChange={yAxis => onAxisChange([yAxis])}
  104. />
  105. ) : (
  106. <OptionSelector
  107. multiple
  108. isClearable
  109. menuTitle={
  110. yAxisOptions.length > 3 ? t('Select up to 3 options') : t('Y-axis')
  111. }
  112. title={t('Y-Axis')}
  113. selected={yAxisValue}
  114. options={yAxisOptions}
  115. onChange={onAxisChange}
  116. />
  117. )}
  118. </InlineContainer>
  119. </ChartControls>
  120. );
  121. }
  122. const SwitchLabel = styled('div')`
  123. padding-right: 4px;
  124. font-weight: bold;
  125. `;