export function NotificationsHistogram()

in dashboards-notifications/public/pages/Notifications/components/NotificationsHistogram/NotificationsHistogram.tsx [32:85]

53 lines of code
1 McCabe index (conditional complexity)


export function NotificationsHistogram(props: NotificationsHistogramProps) {
  const formatter = timeFormatter(niceTimeFormatByDay(1));
  return (
    <>
      <ContentPanel
        actions={
          <ContentPanelActions
            actions={[
              {
                component: (
                  <HistogramControls
                    histogramType={props.histogramType}
                    setHistogramType={props.setHistogramType}
                  />
                ),
              },
            ]}
          />
        }
        bodyStyles={{ padding: 'initial' }}
        title={`Notifications by ${_.get(
          HISTOGRAM_TYPE,
          props.histogramType,
          Object.values(HISTOGRAM_TYPE)[0]
        ).toLowerCase()}`}
        titleSize="m"
      >
        <EuiSpacer />
        <Chart size={{ height: 250 }}>
          <Settings
            theme={{
              colors: {
                vizColors: euiPaletteColorBlind({ sortBy: 'natural' }),
              },
            }}
            showLegend={true}
          />
          <BarSeries
            id="status"
            name="Status"
            data={props.histogramData}
            xAccessor={'x'}
            yAccessors={['y']}
            splitSeriesAccessors={['g']}
            stackAccessors={['g']}
            xScaleType={ScaleType.Time}
          />
          <Axis id="bottom-axis" position="bottom" tickFormat={formatter} />
          <Axis id="left-axis" position="left" showGridLines />
        </Chart>
      </ContentPanel>
    </>
  );
}