chartFooter.tsx 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. import IntervalSelector from 'sentry/components/charts/intervalSelector';
  2. import OptionSelector from 'sentry/components/charts/optionSelector';
  3. import {
  4. ChartControls,
  5. InlineContainer,
  6. SectionHeading,
  7. SectionValue,
  8. } from 'sentry/components/charts/styles';
  9. import {t} from 'sentry/locale';
  10. import {SelectValue} from 'sentry/types';
  11. import EventView from 'sentry/utils/discover/eventView';
  12. import {TOP_EVENT_MODES} from 'sentry/utils/discover/types';
  13. export const PROCESSED_BASELINE_TOGGLE_KEY = 'show-processed-baseline';
  14. type Props = {
  15. displayMode: string;
  16. displayOptions: SelectValue<string>[];
  17. eventView: EventView;
  18. onAxisChange: (value: string[]) => void;
  19. onDisplayChange: (value: string) => void;
  20. onIntervalChange: (value: string | undefined) => void;
  21. onTopEventsChange: (value: string) => void;
  22. topEvents: string;
  23. total: number | null;
  24. yAxisOptions: SelectValue<string>[];
  25. yAxisValue: string[];
  26. };
  27. export default function ChartFooter({
  28. total,
  29. yAxisValue,
  30. yAxisOptions,
  31. onAxisChange,
  32. displayMode,
  33. displayOptions,
  34. onDisplayChange,
  35. onTopEventsChange,
  36. onIntervalChange,
  37. topEvents,
  38. eventView,
  39. }: Props) {
  40. const elements: React.ReactNode[] = [];
  41. elements.push(<SectionHeading key="total-label">{t('Event Count')}</SectionHeading>);
  42. elements.push(
  43. total === null ? (
  44. <SectionValue data-test-id="loading-placeholder" key="total-value">
  45. &mdash;
  46. </SectionValue>
  47. ) : (
  48. <SectionValue key="total-value">{total.toLocaleString()}</SectionValue>
  49. )
  50. );
  51. const topEventOptions: SelectValue<string>[] = [];
  52. for (let i = 1; i <= 10; i++) {
  53. topEventOptions.push({value: i.toString(), label: i.toString()});
  54. }
  55. return (
  56. <ChartControls>
  57. <InlineContainer>{elements}</InlineContainer>
  58. <InlineContainer>
  59. <IntervalSelector
  60. displayMode={displayMode}
  61. eventView={eventView}
  62. onIntervalChange={onIntervalChange}
  63. />
  64. <OptionSelector
  65. title={t('Display')}
  66. selected={displayMode}
  67. options={displayOptions}
  68. onChange={onDisplayChange}
  69. />
  70. {TOP_EVENT_MODES.includes(displayMode) && (
  71. <OptionSelector
  72. title={t('Limit')}
  73. selected={topEvents}
  74. options={topEventOptions}
  75. onChange={onTopEventsChange}
  76. />
  77. )}
  78. {TOP_EVENT_MODES.includes(displayMode) ? (
  79. <OptionSelector
  80. title={t('Y-Axis')}
  81. selected={yAxisValue[0]}
  82. options={yAxisOptions}
  83. onChange={yAxis => onAxisChange([yAxis])}
  84. />
  85. ) : (
  86. <OptionSelector
  87. multiple
  88. clearable
  89. menuTitle={
  90. yAxisOptions.length > 3 ? t('Select up to 3 options') : t('Y-axis')
  91. }
  92. title={t('Y-Axis')}
  93. selected={yAxisValue}
  94. options={yAxisOptions}
  95. onChange={onAxisChange}
  96. />
  97. )}
  98. </InlineContainer>
  99. </ChartControls>
  100. );
  101. }