export default function DateHistogramPanel()

in public/pages/CreateTransform/components/TransformOptions/Panels/DateHistogramPanel/DateHistogramPanel.tsx [20:109]
86 lines of code
2 McCabe index (conditional complexity)

export default function DateHistogramPanel({ name, handleGroupSelectionChange, closePopover, intervalType }: DateHistogramPanelProps) {
  const [dateHistogramInterval, setDateHistogramInterval] = useState(1);
  const [dateHistogramTimeunit, setDateHistogramTimeunit] = useState("m");

  let timeunitOptions, intervalDefinition;
  if (intervalType === IntervalType.FIXED) {
    intervalDefinition = (
      <EuiFieldNumber
        value={dateHistogramInterval}
        onChange={(e) => setDateHistogramInterval(e.target.valueAsNumber)}
        data-test-subj="dateHistogramValueInput"
      />
    );
    timeunitOptions = FixedTimeunitOptions;
  } else {
    intervalDefinition = (
      <div>
        <EuiSpacer size="s" />
        <EuiText size="m">Every 1</EuiText>
      </div>
    );
    timeunitOptions = CalendarTimeunitOptions;
  }

  return (
    <EuiPanel>
      <EuiFlexGroup>
        <EuiFlexItem grow={false} style={{ width: 100 }}>
          <EuiText size="xs">
            <h4>Interval</h4>
          </EuiText>
        </EuiFlexItem>
        <EuiFlexItem>
          <EuiText size="xs">
            <h4>Timeunit</h4>
          </EuiText>
        </EuiFlexItem>
      </EuiFlexGroup>
      <EuiFlexGroup>
        <EuiFlexItem grow={false} style={{ width: 100 }}>
          {intervalDefinition}
        </EuiFlexItem>
        <EuiFlexItem>
          <EuiSelect
            options={timeunitOptions}
            value={dateHistogramTimeunit}
            onChange={(e) => setDateHistogramTimeunit(e.target.value)}
            data-test-subj="dateHistogramTimeunitSelect"
          />
        </EuiFlexItem>
      </EuiFlexGroup>
      <EuiSpacer size="m" />
      <EuiFlexGroup justifyContent={"flexEnd"} gutterSize={"m"}>
        <EuiFlexItem grow={false}>
          <EuiButton
            fullWidth={false}
            onClick={() => closePopover()}
            style={{ minWidth: 84 }}
            data-test-subj="dateHistogramPanelCancelButton"
          >
            Cancel
          </EuiButton>
        </EuiFlexItem>
        <EuiFlexItem grow={false}>
          <EuiButton
            fill
            fullWidth={false}
            onClick={() => {
              const targetFieldName = `${name} _${GROUP_TYPES.dateHistogram}_${dateHistogramInterval}_${dateHistogramTimeunit}_${intervalType}`;

              //Switch between fixed interval and calendar interval by checking timeunit
              const dateHistogramGroupItem = getDateHistogramGroupItem(
                name,
                targetFieldName,
                dateHistogramInterval,
                dateHistogramTimeunit,
                intervalType
              );
              handleGroupSelectionChange(dateHistogramGroupItem, TRANSFORM_AGG_TYPE.date_histogram, targetFieldName);
            }}
            style={{ minWidth: 55 }}
            data-test-subj="dateHistogramPanelOKButton"
          >
            OK
          </EuiButton>
        </EuiFlexItem>
      </EuiFlexGroup>
    </EuiPanel>
  );
}