@backstage-community/plugin-cicd-statistics 0.5.0 → 0.7.0

package/dist/charts/zoom.esm.js

@@ -1,8 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
 import { throttle } from 'lodash';
-import React, { useState, useCallback, useMemo, useEffect, useContext, Fragment } from 'react';
+import { createContext, useState, useCallback, useMemo, useEffect, useContext, Fragment } from 'react';
 import { ReferenceArea } from 'recharts';
 
-const context = React.createContext(void 0);
+const context = createContext(void 0);
 function ZoomProvider({ children }) {
   const [registeredSelectors, setRegisteredSelectors] = useState([]);
   const [selectState, setSelectState] = useState({});
@@ -48,7 +49,7 @@ function ZoomProvider({ children }) {
     }),
     [registerSelection, setSelectState, zoomState, setZoomState, resetZoom]
   );
-  return /* @__PURE__ */ React.createElement(context.Provider, { value, children });
+  return /* @__PURE__ */ jsx(context.Provider, { value, children });
 }
 function useZoom() {
   const { zoomState, resetZoom } = useContext(context);
@@ -121,7 +122,7 @@ function useZoomArea() {
     return registerSelection(setState);
   }, [registerSelection, setState, showSelection]);
   const getZoomArea = useCallback(
-    (props) => /* @__PURE__ */ React.createElement(Fragment, { key: "zoom-area" }, showSelection && state.left && state.right ? /* @__PURE__ */ React.createElement(
+    (props) => /* @__PURE__ */ jsx(Fragment, { children: showSelection && state.left && state.right ? /* @__PURE__ */ jsx(
       ReferenceArea,
       {
         x1: state.left,
@@ -129,7 +130,7 @@ function useZoomArea() {
         strokeOpacity: 0.5,
         ...props
       }
-    ) : null),
+    ) : null }, "zoom-area"),
     [showSelection, state.left, state.right]
   );
   return {

package/dist/charts/zoom.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"zoom.esm.js","sources":["../../src/charts/zoom.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { throttle } from 'lodash';\nimport React, {\n  PropsWithChildren,\n  Dispatch,\n  SetStateAction,\n  Fragment,\n  useContext,\n  useState,\n  useCallback,\n  useMemo,\n  useEffect,\n} from 'react';\nimport { ReferenceArea } from 'recharts';\n\nimport type { Epoch } from './types';\n\ninterface ZoomState {\n  left?: number;\n  right?: number;\n}\n\ninterface ZoomContext {\n  registerSelection(setter: Dispatch<ZoomState>): void;\n  setSelectState: Dispatch<SetStateAction<ZoomState>>;\n\n  zoomState: ZoomState;\n  setZoomState: Dispatch<SetStateAction<ZoomState>>;\n\n  resetZoom: () => void;\n}\n\nconst context = React.createContext<ZoomContext>(undefined as any);\n\nexport function ZoomProvider({ children }: PropsWithChildren<{}>) {\n  const [registeredSelectors, setRegisteredSelectors] = useState<\n    Array<Dispatch<ZoomState>>\n  >([]);\n  const [selectState, setSelectState] = useState<ZoomState>({});\n  const [zoomState, setZoomState] = useState<ZoomState>({});\n\n  const registerSelection = useCallback(\n    (selector: Dispatch<ZoomState>) => {\n      setRegisteredSelectors(old => [...old, selector]);\n\n      return () => {\n        setRegisteredSelectors(old => old.filter(sel => sel === selector));\n      };\n    },\n    [setRegisteredSelectors],\n  );\n\n  const callSelectors = useCallback(\n    (state: ZoomState) => {\n      registeredSelectors.forEach(selector => {\n        selector(state);\n      });\n    },\n    [registeredSelectors],\n  );\n\n  const throttledCallSelectors = useMemo(\n    () => throttle(callSelectors, 200),\n    [callSelectors],\n  );\n\n  useEffect(() => {\n    throttledCallSelectors({\n      left: selectState.left,\n      right: selectState.right,\n    });\n  }, [selectState.left, selectState.right, throttledCallSelectors]);\n\n  const resetZoom = useCallback(() => {\n    setSelectState({});\n    setZoomState({});\n  }, [setSelectState, setZoomState]);\n\n  const value = useMemo(\n    (): ZoomContext => ({\n      registerSelection,\n      setSelectState,\n\n      zoomState,\n      setZoomState,\n\n      resetZoom,\n    }),\n    [registerSelection, setSelectState, zoomState, setZoomState, resetZoom],\n  );\n\n  return <context.Provider value={value} children={children} />;\n}\n\nexport function useZoom() {\n  const { zoomState, resetZoom } = useContext(context);\n\n  const zoomFilterValues = useCallback(\n    <T extends Epoch>(values: Array<T>): Array<T> => {\n      const { left, right } = zoomState;\n      return left === undefined || right === undefined\n        ? values\n        : values.filter(({ __epoch }) => __epoch > left && __epoch < right);\n    },\n    [zoomState],\n  );\n\n  return useMemo(\n    () => ({\n      resetZoom,\n      zoomState,\n      zoomFilterValues,\n    }),\n    [resetZoom, zoomState, zoomFilterValues],\n  );\n}\n\nexport interface ZoomAreaProps {\n  yAxisId?: number | string | undefined;\n}\n\nexport function useZoomArea() {\n  const [showSelection, setShowSelection] = useState(false);\n  const [state, setState] = useState<ZoomState>({});\n  const { setSelectState, setZoomState, registerSelection } =\n    useContext(context);\n\n  const onMouseDown = useCallback(\n    (e: any) => {\n      if (!e?.activeLabel) return;\n\n      setSelectState({ left: e.activeLabel });\n      setShowSelection(true);\n    },\n    [setSelectState, setShowSelection],\n  );\n\n  const onMouseMove = useCallback(\n    (e: any) => {\n      if (!e?.activeLabel) return;\n\n      setSelectState(area => {\n        if (!area.left) {\n          return area;\n        }\n        return { ...area, right: e.activeLabel };\n      });\n    },\n    [setSelectState],\n  );\n\n  const doZoom = useCallback(() => {\n    setSelectState(old => {\n      const { left, right } = old;\n\n      if (left === undefined || right === undefined || left === right) {\n        // Either is undefined or both are same - zoom out\n        setZoomState({});\n      } else if (left < right) {\n        setZoomState({ left, right });\n      } else if (left > right) {\n        setZoomState({ left: right, right: left });\n      }\n\n      return {};\n    });\n    setShowSelection(false);\n  }, [setSelectState, setZoomState, setShowSelection]);\n\n  const zoomProps = useMemo(\n    () => ({\n      onMouseDown,\n      onMouseMove,\n      onMouseUp: doZoom,\n    }),\n    [onMouseDown, onMouseMove, doZoom],\n  );\n\n  useEffect(() => {\n    if (!showSelection) {\n      return undefined;\n    }\n    return registerSelection(setState);\n  }, [registerSelection, setState, showSelection]);\n\n  const getZoomArea = useCallback(\n    (props?: ZoomAreaProps) => (\n      <Fragment key=\"zoom-area\">\n        {showSelection && state.left && state.right ? (\n          <ReferenceArea\n            x1={state.left}\n            x2={state.right}\n            strokeOpacity={0.5}\n            {...props}\n          />\n        ) : null}\n      </Fragment>\n    ),\n    [showSelection, state.left, state.right],\n  );\n\n  return {\n    zoomProps,\n    getZoomArea,\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"zoom.esm.js","sources":["../../src/charts/zoom.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { throttle } from 'lodash';\nimport {\n  createContext,\n  PropsWithChildren,\n  Dispatch,\n  SetStateAction,\n  Fragment,\n  useContext,\n  useState,\n  useCallback,\n  useMemo,\n  useEffect,\n} from 'react';\nimport { ReferenceArea } from 'recharts';\n\nimport type { Epoch } from './types';\n\ninterface ZoomState {\n  left?: number;\n  right?: number;\n}\n\ninterface ZoomContext {\n  registerSelection(setter: Dispatch<ZoomState>): void;\n  setSelectState: Dispatch<SetStateAction<ZoomState>>;\n\n  zoomState: ZoomState;\n  setZoomState: Dispatch<SetStateAction<ZoomState>>;\n\n  resetZoom: () => void;\n}\n\nconst context = createContext<ZoomContext>(undefined as any);\n\nexport function ZoomProvider({ children }: PropsWithChildren<{}>) {\n  const [registeredSelectors, setRegisteredSelectors] = useState<\n    Array<Dispatch<ZoomState>>\n  >([]);\n  const [selectState, setSelectState] = useState<ZoomState>({});\n  const [zoomState, setZoomState] = useState<ZoomState>({});\n\n  const registerSelection = useCallback(\n    (selector: Dispatch<ZoomState>) => {\n      setRegisteredSelectors(old => [...old, selector]);\n\n      return () => {\n        setRegisteredSelectors(old => old.filter(sel => sel === selector));\n      };\n    },\n    [setRegisteredSelectors],\n  );\n\n  const callSelectors = useCallback(\n    (state: ZoomState) => {\n      registeredSelectors.forEach(selector => {\n        selector(state);\n      });\n    },\n    [registeredSelectors],\n  );\n\n  const throttledCallSelectors = useMemo(\n    () => throttle(callSelectors, 200),\n    [callSelectors],\n  );\n\n  useEffect(() => {\n    throttledCallSelectors({\n      left: selectState.left,\n      right: selectState.right,\n    });\n  }, [selectState.left, selectState.right, throttledCallSelectors]);\n\n  const resetZoom = useCallback(() => {\n    setSelectState({});\n    setZoomState({});\n  }, [setSelectState, setZoomState]);\n\n  const value = useMemo(\n    (): ZoomContext => ({\n      registerSelection,\n      setSelectState,\n\n      zoomState,\n      setZoomState,\n\n      resetZoom,\n    }),\n    [registerSelection, setSelectState, zoomState, setZoomState, resetZoom],\n  );\n\n  return <context.Provider value={value} children={children} />;\n}\n\nexport function useZoom() {\n  const { zoomState, resetZoom } = useContext(context);\n\n  const zoomFilterValues = useCallback(\n    <T extends Epoch>(values: Array<T>): Array<T> => {\n      const { left, right } = zoomState;\n      return left === undefined || right === undefined\n        ? values\n        : values.filter(({ __epoch }) => __epoch > left && __epoch < right);\n    },\n    [zoomState],\n  );\n\n  return useMemo(\n    () => ({\n      resetZoom,\n      zoomState,\n      zoomFilterValues,\n    }),\n    [resetZoom, zoomState, zoomFilterValues],\n  );\n}\n\nexport interface ZoomAreaProps {\n  yAxisId?: number | string | undefined;\n}\n\nexport function useZoomArea() {\n  const [showSelection, setShowSelection] = useState(false);\n  const [state, setState] = useState<ZoomState>({});\n  const { setSelectState, setZoomState, registerSelection } =\n    useContext(context);\n\n  const onMouseDown = useCallback(\n    (e: any) => {\n      if (!e?.activeLabel) return;\n\n      setSelectState({ left: e.activeLabel });\n      setShowSelection(true);\n    },\n    [setSelectState, setShowSelection],\n  );\n\n  const onMouseMove = useCallback(\n    (e: any) => {\n      if (!e?.activeLabel) return;\n\n      setSelectState(area => {\n        if (!area.left) {\n          return area;\n        }\n        return { ...area, right: e.activeLabel };\n      });\n    },\n    [setSelectState],\n  );\n\n  const doZoom = useCallback(() => {\n    setSelectState(old => {\n      const { left, right } = old;\n\n      if (left === undefined || right === undefined || left === right) {\n        // Either is undefined or both are same - zoom out\n        setZoomState({});\n      } else if (left < right) {\n        setZoomState({ left, right });\n      } else if (left > right) {\n        setZoomState({ left: right, right: left });\n      }\n\n      return {};\n    });\n    setShowSelection(false);\n  }, [setSelectState, setZoomState, setShowSelection]);\n\n  const zoomProps = useMemo(\n    () => ({\n      onMouseDown,\n      onMouseMove,\n      onMouseUp: doZoom,\n    }),\n    [onMouseDown, onMouseMove, doZoom],\n  );\n\n  useEffect(() => {\n    if (!showSelection) {\n      return undefined;\n    }\n    return registerSelection(setState);\n  }, [registerSelection, setState, showSelection]);\n\n  const getZoomArea = useCallback(\n    (props?: ZoomAreaProps) => (\n      <Fragment key=\"zoom-area\">\n        {showSelection && state.left && state.right ? (\n          <ReferenceArea\n            x1={state.left}\n            x2={state.right}\n            strokeOpacity={0.5}\n            {...props}\n          />\n        ) : null}\n      </Fragment>\n    ),\n    [showSelection, state.left, state.right],\n  );\n\n  return {\n    zoomProps,\n    getZoomArea,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/components/button-switch.esm.js

@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
 import ButtonGroup from '@material-ui/core/ButtonGroup';
 import Button from '@material-ui/core/Button';
 import Tooltip from '@material-ui/core/Tooltip';
@@ -46,39 +47,39 @@ function ButtonSwitch(props) {
     }
     return props.selection === value;
   };
-  const tooltipify = (value, elem) => typeof value === "object" && value.tooltip ? /* @__PURE__ */ React.createElement(
+  const tooltipify = (value, elem) => typeof value === "object" && value.tooltip ? /* @__PURE__ */ jsx(
     Tooltip,
     {
-      key: value.value,
       TransitionComponent: Zoom,
       title: value.tooltip,
-      arrow: true
+      arrow: true,
+      children: elem
     },
-    elem
+    value.value
   ) : elem;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ButtonGroup,
     {
       disableElevation: true,
       orientation: vertical ? "vertical" : "horizontal",
       variant: "outlined",
-      size: "small"
-    },
-    values.map(
-      (value) => tooltipify(
-        value,
-        /* @__PURE__ */ React.createElement(
-          Button,
-          {
-            key: switchValue(value),
-            color: hasSelection(switchValue(value)) ? "primary" : "default",
-            variant: hasSelection(switchValue(value)) ? "contained" : "outlined",
-            onClick
-          },
-          switchText(value)
+      size: "small",
+      children: values.map(
+        (value) => tooltipify(
+          value,
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              color: hasSelection(switchValue(value)) ? "primary" : "default",
+              variant: hasSelection(switchValue(value)) ? "contained" : "outlined",
+              onClick,
+              children: switchText(value)
+            },
+            switchValue(value)
+          )
         )
       )
-    )
+    }
   );
 }
 

package/dist/components/button-switch.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-switch.esm.js","sources":["../../src/components/button-switch.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback, MouseEvent } from 'react';\nimport ButtonGroup from '@material-ui/core/ButtonGroup';\nimport Button from '@material-ui/core/Button';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Zoom from '@material-ui/core/Zoom';\n\nexport interface SwitchValueDetails<T extends string> {\n  value: T;\n  tooltip?: string;\n  text?: string | JSX.Element;\n}\n\nexport type SwitchValue<T extends string> = T | SwitchValueDetails<T>;\n\nexport interface ButtonSwitchPropsBase<T extends string> {\n  values: ReadonlyArray<SwitchValue<T>>;\n  vertical?: boolean;\n}\nexport interface ButtonSwitchPropsSingle<T extends string>\n  extends ButtonSwitchPropsBase<T> {\n  multi?: false;\n  selection: T;\n  onChange: (selected: T) => void;\n}\nexport interface ButtonSwitchPropsMulti<T extends string>\n  extends ButtonSwitchPropsBase<T> {\n  multi: true;\n  selection: ReadonlyArray<T>;\n  onChange: (selected: Array<T>) => void;\n}\n\nexport type ButtonSwitchProps<T extends string> =\n  | ButtonSwitchPropsSingle<T>\n  | ButtonSwitchPropsMulti<T>;\n\nfunction switchValue<T extends string>(value: SwitchValue<T>): T {\n  return typeof value === 'object' ? value.value : value;\n}\n\nfunction switchText<T extends string>(\n  value: SwitchValue<T>,\n): string | JSX.Element {\n  return typeof value === 'object' ? value.text ?? value.value : value;\n}\n\nfunction findParent(tagName: string, elem: HTMLElement): HTMLElement {\n  let node: HTMLElement | null = elem;\n  while (node.tagName !== tagName) {\n    node = node.parentElement;\n    if (!node) {\n      throw new Error(`Couldn't find ${tagName} parent`);\n    }\n  }\n  return node;\n}\n\nexport function ButtonSwitch<T extends string>(props: ButtonSwitchProps<T>) {\n  const { values, vertical = false } = props;\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLSpanElement>) => {\n      const btn = findParent('BUTTON', ev.target as HTMLElement);\n      const index = [...btn.parentElement!.children].findIndex(\n        child => child === btn,\n      );\n      const value = switchValue(values[index]);\n\n      if (props.multi) {\n        props.onChange(\n          props.selection.includes(value as T)\n            ? props.selection.filter(val => val !== value)\n            : [...props.selection, value as T],\n        );\n      } else {\n        props.onChange(value as T);\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [values, props.selection, props.multi, props.onChange],\n  );\n\n  const hasSelection = (value: T) => {\n    if (props.multi) {\n      return props.selection.includes(value);\n    }\n    return props.selection === value;\n  };\n\n  const tooltipify = (value: SwitchValue<T>, elem: JSX.Element) =>\n    typeof value === 'object' && value.tooltip ? (\n      <Tooltip\n        key={value.value}\n        TransitionComponent={Zoom}\n        title={value.tooltip}\n        arrow\n      >\n        {elem}\n      </Tooltip>\n    ) : (\n      elem\n    );\n\n  return (\n    <ButtonGroup\n      disableElevation\n      orientation={vertical ? 'vertical' : 'horizontal'}\n      variant=\"outlined\"\n      size=\"small\"\n    >\n      {values.map(value =>\n        tooltipify(\n          value,\n          <Button\n            key={switchValue(value)}\n            color={hasSelection(switchValue(value)) ? 'primary' : 'default'}\n            variant={\n              hasSelection(switchValue(value)) ? 'contained' : 'outlined'\n            }\n            onClick={onClick}\n          >\n            {switchText(value)}\n          </Button>,\n        ),\n      )}\n    </ButtonGroup>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"button-switch.esm.js","sources":["../../src/components/button-switch.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useCallback, MouseEvent } from 'react';\nimport ButtonGroup from '@material-ui/core/ButtonGroup';\nimport Button from '@material-ui/core/Button';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Zoom from '@material-ui/core/Zoom';\n\nexport interface SwitchValueDetails<T extends string> {\n  value: T;\n  tooltip?: string;\n  text?: string | JSX.Element;\n}\n\nexport type SwitchValue<T extends string> = T | SwitchValueDetails<T>;\n\nexport interface ButtonSwitchPropsBase<T extends string> {\n  values: ReadonlyArray<SwitchValue<T>>;\n  vertical?: boolean;\n}\nexport interface ButtonSwitchPropsSingle<T extends string>\n  extends ButtonSwitchPropsBase<T> {\n  multi?: false;\n  selection: T;\n  onChange: (selected: T) => void;\n}\nexport interface ButtonSwitchPropsMulti<T extends string>\n  extends ButtonSwitchPropsBase<T> {\n  multi: true;\n  selection: ReadonlyArray<T>;\n  onChange: (selected: Array<T>) => void;\n}\n\nexport type ButtonSwitchProps<T extends string> =\n  | ButtonSwitchPropsSingle<T>\n  | ButtonSwitchPropsMulti<T>;\n\nfunction switchValue<T extends string>(value: SwitchValue<T>): T {\n  return typeof value === 'object' ? value.value : value;\n}\n\nfunction switchText<T extends string>(\n  value: SwitchValue<T>,\n): string | JSX.Element {\n  return typeof value === 'object' ? value.text ?? value.value : value;\n}\n\nfunction findParent(tagName: string, elem: HTMLElement): HTMLElement {\n  let node: HTMLElement | null = elem;\n  while (node.tagName !== tagName) {\n    node = node.parentElement;\n    if (!node) {\n      throw new Error(`Couldn't find ${tagName} parent`);\n    }\n  }\n  return node;\n}\n\nexport function ButtonSwitch<T extends string>(props: ButtonSwitchProps<T>) {\n  const { values, vertical = false } = props;\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLSpanElement>) => {\n      const btn = findParent('BUTTON', ev.target as HTMLElement);\n      const index = [...btn.parentElement!.children].findIndex(\n        child => child === btn,\n      );\n      const value = switchValue(values[index]);\n\n      if (props.multi) {\n        props.onChange(\n          props.selection.includes(value as T)\n            ? props.selection.filter(val => val !== value)\n            : [...props.selection, value as T],\n        );\n      } else {\n        props.onChange(value as T);\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [values, props.selection, props.multi, props.onChange],\n  );\n\n  const hasSelection = (value: T) => {\n    if (props.multi) {\n      return props.selection.includes(value);\n    }\n    return props.selection === value;\n  };\n\n  const tooltipify = (value: SwitchValue<T>, elem: JSX.Element) =>\n    typeof value === 'object' && value.tooltip ? (\n      <Tooltip\n        key={value.value}\n        TransitionComponent={Zoom}\n        title={value.tooltip}\n        arrow\n      >\n        {elem}\n      </Tooltip>\n    ) : (\n      elem\n    );\n\n  return (\n    <ButtonGroup\n      disableElevation\n      orientation={vertical ? 'vertical' : 'horizontal'}\n      variant=\"outlined\"\n      size=\"small\"\n    >\n      {values.map(value =>\n        tooltipify(\n          value,\n          <Button\n            key={switchValue(value)}\n            color={hasSelection(switchValue(value)) ? 'primary' : 'default'}\n            variant={\n              hasSelection(switchValue(value)) ? 'contained' : 'outlined'\n            }\n            onClick={onClick}\n          >\n            {switchText(value)}\n          </Button>,\n        ),\n      )}\n    </ButtonGroup>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/chart-filters.esm.js

@@ -1,4 +1,5 @@
-import React, { useState, useCallback, useMemo, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useMemo, useEffect } from 'react';
 import Button from '@material-ui/core/Button';
 import Card from '@material-ui/core/Card';
 import CardHeader from '@material-ui/core/CardHeader';
@@ -103,8 +104,8 @@ const branchValues = [
   }
 ];
 const chartTypeValues = [
-  { value: "duration", text: /* @__PURE__ */ React.createElement(ShowChartIcon, null), tooltip: "Duration" },
-  { value: "count", text: /* @__PURE__ */ React.createElement(BarChartIcon, null), tooltip: "Count per day" }
+  { value: "duration", text: /* @__PURE__ */ jsx(ShowChartIcon, {}), tooltip: "Duration" },
+  { value: "count", text: /* @__PURE__ */ jsx(BarChartIcon, {}), tooltip: "Count per day" }
 ];
 function ChartFilters(props) {
   const {
@@ -221,158 +222,189 @@ function ChartFilters(props) {
     });
   }, [toDate, fromDate, branch, selectedStatus, updateFetchFilter]);
   const inrefferedStatuses = analysis?.statuses ?? selectedStatus;
-  return /* @__PURE__ */ React.createElement(MuiPickersUtilsProvider, { utils: LuxonUtils }, /* @__PURE__ */ React.createElement(Card, { className: classes.rootCard }, /* @__PURE__ */ React.createElement(
-    CardHeader,
-    {
-      action: /* @__PURE__ */ React.createElement(
-        Button,
+  return /* @__PURE__ */ jsxs(MuiPickersUtilsProvider, { utils: LuxonUtils, children: [
+    /* @__PURE__ */ jsxs(Card, { className: classes.rootCard, children: [
+      /* @__PURE__ */ jsx(
+        CardHeader,
         {
-          size: "small",
-          color: "secondary",
-          variant: "contained",
-          onClick: updateFilter,
-          disabled: !hasFetchFilterChanges
-        },
-        "Update"
+          action: /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              color: "secondary",
+              variant: "contained",
+              onClick: updateFilter,
+              disabled: !hasFetchFilterChanges,
+              children: "Update"
+            }
+          ),
+          title: /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: classes.header, children: "Fetching options" })
+        }
       ),
-      title: /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2", className: classes.header }, "Fetching options")
-    }
-  ), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
-    Typography,
-    {
-      variant: "subtitle2",
-      className: `${classes.title} ${classes.title}`
-    },
-    "Date range"
-  ), /* @__PURE__ */ React.createElement(
-    KeyboardDatePicker,
-    {
-      autoOk: true,
-      variant: "inline",
-      inputVariant: "outlined",
-      label: "From date",
-      format: "yyyy-MM-dd",
-      value: fromDate,
-      InputAdornmentProps: { position: "start" },
-      onChange: (date) => setFromDate(date?.toJSDate() ?? /* @__PURE__ */ new Date())
-    }
-  ), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement(FormControl, { component: "fieldset" }, /* @__PURE__ */ React.createElement(FormGroup, null, /* @__PURE__ */ React.createElement(
-    FormControlLabel,
-    {
-      control: /* @__PURE__ */ React.createElement(
-        Switch,
+      /* @__PURE__ */ jsxs(CardContent, { children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "subtitle2",
+            className: `${classes.title} ${classes.title}`,
+            children: "Date range"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          KeyboardDatePicker,
+          {
+            autoOk: true,
+            variant: "inline",
+            inputVariant: "outlined",
+            label: "From date",
+            format: "yyyy-MM-dd",
+            value: fromDate,
+            InputAdornmentProps: { position: "start" },
+            onChange: (date) => setFromDate(date?.toJSDate() ?? /* @__PURE__ */ new Date())
+          }
+        ),
+        /* @__PURE__ */ jsx("br", {}),
+        /* @__PURE__ */ jsx(FormControl, { component: "fieldset", children: /* @__PURE__ */ jsxs(FormGroup, { children: [
+          /* @__PURE__ */ jsx(
+            FormControlLabel,
+            {
+              control: /* @__PURE__ */ jsx(
+                Switch,
+                {
+                  checked: useNowAsToDate,
+                  onChange: toggleUseNowAsDate
+                }
+              ),
+              label: /* @__PURE__ */ jsx(Label, { children: "To today" })
+            }
+          ),
+          useNowAsToDate ? null : /* @__PURE__ */ jsx(
+            KeyboardDatePicker,
+            {
+              autoOk: true,
+              variant: "inline",
+              inputVariant: "outlined",
+              label: "To date",
+              format: "yyyy-MM-dd",
+              value: toDate,
+              InputAdornmentProps: { position: "start" },
+              onChange: (date) => setToDate(date?.toJSDate() ?? /* @__PURE__ */ new Date())
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "subtitle2",
+            className: `${classes.title} ${classes.title}`,
+            children: "Branch"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ButtonSwitch,
+          {
+            values: branchValues,
+            selection: branch,
+            onChange: setBranch
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "subtitle2",
+            className: `${classes.title} ${classes.title}`,
+            children: "Status"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ButtonSwitch,
+          {
+            values: statusValues,
+            multi: true,
+            vertical: true,
+            selection: selectedStatus,
+            onChange: setSelectedStatus
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { className: classes.rootCard, children: [
+      /* @__PURE__ */ jsx(
+        CardHeader,
         {
-          checked: useNowAsToDate,
-          onChange: toggleUseNowAsDate
+          title: /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: classes.header, children: "View options" })
         }
       ),
-      label: /* @__PURE__ */ React.createElement(Label, null, "To today")
-    }
-  ), useNowAsToDate ? null : /* @__PURE__ */ React.createElement(
-    KeyboardDatePicker,
-    {
-      autoOk: true,
-      variant: "inline",
-      inputVariant: "outlined",
-      label: "To date",
-      format: "yyyy-MM-dd",
-      value: toDate,
-      InputAdornmentProps: { position: "start" },
-      onChange: (date) => setToDate(date?.toJSDate() ?? /* @__PURE__ */ new Date())
-    }
-  ))), /* @__PURE__ */ React.createElement(
-    Typography,
-    {
-      variant: "subtitle2",
-      className: `${classes.title} ${classes.title}`
-    },
-    "Branch"
-  ), /* @__PURE__ */ React.createElement(
-    ButtonSwitch,
-    {
-      values: branchValues,
-      selection: branch,
-      onChange: setBranch
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Typography,
-    {
-      variant: "subtitle2",
-      className: `${classes.title} ${classes.title}`
-    },
-    "Status"
-  ), /* @__PURE__ */ React.createElement(
-    ButtonSwitch,
-    {
-      values: statusValues,
-      multi: true,
-      vertical: true,
-      selection: selectedStatus,
-      onChange: setSelectedStatus
-    }
-  ))), /* @__PURE__ */ React.createElement(Card, { className: classes.rootCard }, /* @__PURE__ */ React.createElement(
-    CardHeader,
-    {
-      title: /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2", className: classes.header }, "View options")
-    }
-  ), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
-    Toggle,
-    {
-      checked: viewOptions.lowercaseNames,
-      setChecked: setLowercaseNames
-    },
-    /* @__PURE__ */ React.createElement(
-      Tooltip,
-      {
-        arrow: true,
-        title: "Lowercasing names can reduce duplications when stage names have changed casing"
-      },
-      /* @__PURE__ */ React.createElement(Label, null, "Lowercase names")
-    )
-  ), /* @__PURE__ */ React.createElement(
-    Toggle,
-    {
-      checked: viewOptions.normalizeTimeRange,
-      setChecked: setNormalizeTimeRange
-    },
-    /* @__PURE__ */ React.createElement(
-      Tooltip,
-      {
-        arrow: true,
-        title: "All charts will use the same x-axis. This reduces confusion when stages have been altered over time and only appear in a part of the time range."
-      },
-      /* @__PURE__ */ React.createElement(Label, null, "Normalize time range")
-    )
-  ), /* @__PURE__ */ React.createElement(
-    DurationSlider,
-    {
-      header: "Hide under peak",
-      value: viewOptions.hideLimit,
-      setValue: setHideLimit
-    }
-  ), /* @__PURE__ */ React.createElement(
-    DurationSlider,
-    {
-      header: "Collapse under peak",
-      value: viewOptions.collapsedLimit,
-      setValue: setCollapseLimit
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Typography,
-    {
-      variant: "subtitle2",
-      className: `${classes.title} ${classes.title}`
-    },
-    "Chart styles"
-  ), inrefferedStatuses.map((status) => /* @__PURE__ */ React.createElement(Grid, { key: status, container: true, spacing: 0 }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
-    ButtonSwitch,
-    {
-      values: chartTypeValues,
-      selection: viewOptions.chartTypes[status],
-      onChange: setChartTypeSpecific[status],
-      multi: true
-    }
-  )), /* @__PURE__ */ React.createElement(Grid, { item: true, className: classes.buttonDescription }, /* @__PURE__ */ React.createElement("div", null, status)))))));
+      /* @__PURE__ */ jsxs(CardContent, { children: [
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            checked: viewOptions.lowercaseNames,
+            setChecked: setLowercaseNames,
+            children: /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                arrow: true,
+                title: "Lowercasing names can reduce duplications when stage names have changed casing",
+                children: /* @__PURE__ */ jsx(Label, { children: "Lowercase names" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            checked: viewOptions.normalizeTimeRange,
+            setChecked: setNormalizeTimeRange,
+            children: /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                arrow: true,
+                title: "All charts will use the same x-axis. This reduces confusion when stages have been altered over time and only appear in a part of the time range.",
+                children: /* @__PURE__ */ jsx(Label, { children: "Normalize time range" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DurationSlider,
+          {
+            header: "Hide under peak",
+            value: viewOptions.hideLimit,
+            setValue: setHideLimit
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DurationSlider,
+          {
+            header: "Collapse under peak",
+            value: viewOptions.collapsedLimit,
+            setValue: setCollapseLimit
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "subtitle2",
+            className: `${classes.title} ${classes.title}`,
+            children: "Chart styles"
+          }
+        ),
+        inrefferedStatuses.map((status) => /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 0, children: [
+          /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+            ButtonSwitch,
+            {
+              values: chartTypeValues,
+              selection: viewOptions.chartTypes[status],
+              onChange: setChartTypeSpecific[status],
+              multi: true
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Grid, { item: true, className: classes.buttonDescription, children: /* @__PURE__ */ jsx("div", { children: status }) })
+        ] }, status))
+      ] })
+    ] })
+  ] });
 }
 
 export { ChartFilters, getDefaultChartFilter, getDefaultViewOptions, useStyles };