import * as React from 'react'; import Feature from 'app/components/acl/feature'; import OptionCheckboxSelector from 'app/components/charts/optionCheckboxSelector'; import OptionSelector from 'app/components/charts/optionSelector'; import { ChartControls, InlineContainer, SectionHeading, SectionValue, } from 'app/components/charts/styles'; import {t} from 'app/locale'; import {Organization, SelectValue} from 'app/types'; import {TOP_EVENT_MODES} from 'app/utils/discover/types'; type Props = { organization: Organization; total: number | null; yAxisValue: string[]; yAxisOptions: SelectValue[]; onAxisChange: (value: string[]) => void; displayMode: string; displayOptions: SelectValue[]; onDisplayChange: (value: string) => void; onTopEventsChange: (value: string) => void; topEvents: string; }; export default function ChartFooter({ organization, total, yAxisValue, yAxisOptions, onAxisChange, displayMode, displayOptions, onDisplayChange, onTopEventsChange, topEvents, }: Props) { const elements: React.ReactNode[] = []; elements.push({t('Total Events')}); elements.push( total === null ? ( ) : ( {total.toLocaleString()} ) ); const topEventOptions: SelectValue[] = []; for (let i = 1; i <= 10; i++) { topEventOptions.push({value: i.toString(), label: i.toString()}); } return ( {elements} {({hasFeature}) => { if (hasFeature && TOP_EVENT_MODES.includes(displayMode)) { return ( ); } else { return null; } }} {({hasFeature}) => { if (hasFeature) { return ( ); } else { return ( onAxisChange([value])} /> ); } }} ); }