chartFooter.tsx 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. import * as React from 'react';
  2. import OptionSelector from 'app/components/charts/optionSelector';
  3. import {
  4. ChartControls,
  5. InlineContainer,
  6. SectionHeading,
  7. SectionValue,
  8. } from 'app/components/charts/styles';
  9. import {t} from 'app/locale';
  10. import {SelectValue} from 'app/types';
  11. type Props = {
  12. total: number | null;
  13. yAxisValue: string;
  14. yAxisOptions: SelectValue<string>[];
  15. onAxisChange: (value: string) => void;
  16. displayMode: string;
  17. displayOptions: SelectValue<string>[];
  18. onDisplayChange: (value: string) => void;
  19. };
  20. export default function ChartFooter({
  21. total,
  22. yAxisValue,
  23. yAxisOptions,
  24. onAxisChange,
  25. displayMode,
  26. displayOptions,
  27. onDisplayChange,
  28. }: Props) {
  29. const elements: React.ReactNode[] = [];
  30. elements.push(<SectionHeading key="total-label">{t('Total Events')}</SectionHeading>);
  31. elements.push(
  32. total === null ? (
  33. <SectionValue data-test-id="loading-placeholder" key="total-value">
  34. &mdash;
  35. </SectionValue>
  36. ) : (
  37. <SectionValue key="total-value">{total.toLocaleString()}</SectionValue>
  38. )
  39. );
  40. return (
  41. <ChartControls>
  42. <InlineContainer>{elements}</InlineContainer>
  43. <InlineContainer>
  44. <OptionSelector
  45. title={t('Display')}
  46. selected={displayMode}
  47. options={displayOptions}
  48. onChange={onDisplayChange}
  49. menuWidth="170px"
  50. />
  51. <OptionSelector
  52. title={t('Y-Axis')}
  53. selected={yAxisValue}
  54. options={yAxisOptions}
  55. onChange={onAxisChange}
  56. />
  57. </InlineContainer>
  58. </ChartControls>
  59. );
  60. }