@backstage-community/plugin-cost-insights 0.12.25 → 0.12.26

package/dist/components/BarChart/BarChartStepper.esm.js

@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react';
+import Paper from '@material-ui/core/Paper';
+import Slide from '@material-ui/core/Slide';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import { BarChartStepperButton } from './BarChartStepperButton.esm.js';
+import { BarChartSteps } from './BarChartSteps.esm.js';
+import { useBarChartStepperStyles } from '../../utils/styles.esm.js';
+
+const BarChartStepper = ({
+  steps,
+  disableScroll,
+  onChange
+}) => {
+  const classes = useBarChartStepperStyles();
+  const [activeStep, setActiveStep] = useState(0);
+  const diff = steps % 10;
+  const stepsRemaining = steps - activeStep <= diff ? diff : steps;
+  const displayedStep = activeStep % 10;
+  useEffect(() => {
+    onChange(activeStep);
+  }, [activeStep, onChange]);
+  const handleNext = () => {
+    setActiveStep((prevStep) => prevStep + 1);
+  };
+  const handleBack = () => {
+    setActiveStep((prevStep) => prevStep - 1);
+  };
+  const handleClick = (index) => {
+    setActiveStep((prevStep) => {
+      const offset = index - prevStep % 10;
+      return prevStep + offset;
+    });
+  };
+  return /* @__PURE__ */ React.createElement(
+    Paper,
+    {
+      "data-testid": "bar-chart-stepper",
+      square: true,
+      elevation: 0,
+      className: classes.paper
+    },
+    /* @__PURE__ */ React.createElement(
+      Slide,
+      {
+        direction: "right",
+        in: !disableScroll && activeStep !== 0,
+        mountOnEnter: true,
+        unmountOnExit: true
+      },
+      /* @__PURE__ */ React.createElement(
+        BarChartStepperButton,
+        {
+          name: "back",
+          className: classes.backButton,
+          onClick: handleBack
+        },
+        /* @__PURE__ */ React.createElement(ChevronLeftIcon, null)
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      BarChartSteps,
+      {
+        steps: Math.min(10, stepsRemaining),
+        activeStep: displayedStep,
+        onClick: handleClick
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      Slide,
+      {
+        direction: "left",
+        in: !disableScroll && activeStep < steps - 1,
+        mountOnEnter: true,
+        unmountOnExit: true
+      },
+      /* @__PURE__ */ React.createElement(
+        BarChartStepperButton,
+        {
+          name: "next",
+          className: classes.nextButton,
+          onClick: handleNext
+        },
+        /* @__PURE__ */ React.createElement(ChevronRightIcon, null)
+      )
+    )
+  );
+};
+
+export { BarChartStepper };
+//# sourceMappingURL=BarChartStepper.esm.js.map

package/dist/components/BarChart/BarChartStepper.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChartStepper.esm.js","sources":["../../../src/components/BarChart/BarChartStepper.tsx"],"sourcesContent":["/*\n * Copyright 2020 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, { useEffect, useState } from 'react';\nimport Paper from '@material-ui/core/Paper';\nimport Slide from '@material-ui/core/Slide';\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\nimport { BarChartStepperButton } from './BarChartStepperButton';\nimport { BarChartSteps } from './BarChartSteps';\nimport { useBarChartStepperStyles } from '../../utils/styles';\n\ntype BarChartStepperProps = {\n  disableScroll: boolean;\n  steps: number;\n  onChange: (activeStep: number) => void;\n};\n\nexport const BarChartStepper = ({\n  steps,\n  disableScroll,\n  onChange,\n}: BarChartStepperProps) => {\n  const classes = useBarChartStepperStyles();\n  const [activeStep, setActiveStep] = useState(0);\n\n  /*\n   * This calc determines how many active steps to display in the stepper.\n   * If the chart is displaying a large amount of resources,\n   * the total dots are truncated to 10. As the user clicks forward,\n   * eventually, there might be resources \"left over\" in excess of the ten dot limit.\n   * Once the user has reached that threshold, the difference should appear constant\n   * as the user clicks through the remaining resources and no extra dots should be displayed.\n   */\n\n  const diff = steps % 10;\n  const stepsRemaining = steps - activeStep <= diff ? diff : steps;\n  const displayedStep = activeStep % 10;\n\n  useEffect(() => {\n    onChange(activeStep);\n  }, [activeStep, onChange]);\n\n  const handleNext = () => {\n    setActiveStep(prevStep => prevStep + 1);\n  };\n\n  const handleBack = () => {\n    setActiveStep(prevStep => prevStep - 1);\n  };\n\n  const handleClick = (index: number) => {\n    setActiveStep(prevStep => {\n      const offset = index - (prevStep % 10);\n      return prevStep + offset;\n    });\n  };\n\n  return (\n    <Paper\n      data-testid=\"bar-chart-stepper\"\n      square\n      elevation={0}\n      className={classes.paper}\n    >\n      <Slide\n        direction=\"right\"\n        in={!disableScroll && activeStep !== 0}\n        mountOnEnter\n        unmountOnExit\n      >\n        <BarChartStepperButton\n          name=\"back\"\n          className={classes.backButton}\n          onClick={handleBack}\n        >\n          <ChevronLeftIcon />\n        </BarChartStepperButton>\n      </Slide>\n      <BarChartSteps\n        steps={Math.min(10, stepsRemaining)}\n        activeStep={displayedStep}\n        onClick={handleClick}\n      />\n      <Slide\n        direction=\"left\"\n        in={!disableScroll && activeStep < steps - 1}\n        mountOnEnter\n        unmountOnExit\n      >\n        <BarChartStepperButton\n          name=\"next\"\n          className={classes.nextButton}\n          onClick={handleNext}\n        >\n          <ChevronRightIcon />\n        </BarChartStepperButton>\n      </Slide>\n    </Paper>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/BarChart/BarChartStepperButton.esm.js

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react';
+import ButtonBase from '@material-ui/core/ButtonBase';
+import { useBarChartStepperButtonStyles } from '../../utils/styles.esm.js';
+
+const BarChartStepperButton = forwardRef(
+  ({
+    name,
+    children,
+    ...buttonBaseProps
+  }, ref) => {
+    const classes = useBarChartStepperButtonStyles();
+    return /* @__PURE__ */ React.createElement(
+      ButtonBase,
+      {
+        ref,
+        classes,
+        disableRipple: true,
+        "data-testid": `bar-chart-stepper-button-${name}`,
+        ...buttonBaseProps
+      },
+      children
+    );
+  }
+);
+
+export { BarChartStepperButton };
+//# sourceMappingURL=BarChartStepperButton.esm.js.map

package/dist/components/BarChart/BarChartStepperButton.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChartStepperButton.esm.js","sources":["../../../src/components/BarChart/BarChartStepperButton.tsx"],"sourcesContent":["/*\n * Copyright 2020 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, { forwardRef, PropsWithChildren, Ref } from 'react';\nimport ButtonBase, { ButtonBaseProps } from '@material-ui/core/ButtonBase';\nimport { useBarChartStepperButtonStyles as useStyles } from '../../utils/styles';\n\ninterface BarChartStepperButtonProps extends ButtonBaseProps {\n  name: string;\n}\n\nexport const BarChartStepperButton = forwardRef(\n  (\n    {\n      name,\n      children,\n      ...buttonBaseProps\n    }: PropsWithChildren<BarChartStepperButtonProps>,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const classes = useStyles();\n    return (\n      <ButtonBase\n        ref={ref}\n        classes={classes}\n        disableRipple\n        data-testid={`bar-chart-stepper-button-${name}`}\n        {...buttonBaseProps}\n      >\n        {children}\n      </ButtonBase>\n    );\n  },\n);\n"],"names":["useStyles"],"mappings":";;;;AAwBO,MAAM,qBAAwB,GAAA,UAAA;AAAA,EACnC,CACE;AAAA,IACE,IAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG,eAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,UAAUA,8BAAU,EAAA,CAAA;AAC1B,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,OAAA;AAAA,QACA,aAAa,EAAA,IAAA;AAAA,QACb,aAAA,EAAa,4BAA4B,IAAI,CAAA,CAAA;AAAA,QAC5C,GAAG,eAAA;AAAA,OAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist/components/BarChart/BarChartSteps.esm.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import ButtonBase from '@material-ui/core/ButtonBase';
+import { useBarChartStepperStyles } from '../../utils/styles.esm.js';
+
+const BarChartSteps = ({
+  steps,
+  activeStep,
+  onClick
+}) => {
+  const classes = useBarChartStepperStyles();
+  const handleOnClick = (index) => (event) => {
+    event.preventDefault();
+    onClick(index);
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: classes.steps }, [...new Array(steps)].map((_, index) => /* @__PURE__ */ React.createElement(ButtonBase, { key: index, centerRipple: true, onClick: handleOnClick(index) }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-testid": "bar-chart-step",
+      className: `${classes.step} ${index === activeStep ? classes.stepActive : ""}`
+    }
+  ))));
+};
+
+export { BarChartSteps };
+//# sourceMappingURL=BarChartSteps.esm.js.map

package/dist/components/BarChart/BarChartSteps.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChartSteps.esm.js","sources":["../../../src/components/BarChart/BarChartSteps.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 from 'react';\nimport ButtonBase from '@material-ui/core/ButtonBase';\nimport { useBarChartStepperStyles as useStyles } from '../../utils/styles';\n\nexport type BarChartStepsProps = {\n  steps: number;\n  activeStep: number;\n  onClick: (index: number) => void;\n};\n\nexport const BarChartSteps = ({\n  steps,\n  activeStep,\n  onClick,\n}: BarChartStepsProps) => {\n  const classes = useStyles();\n  const handleOnClick =\n    (index: number) =>\n    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      event.preventDefault();\n      onClick(index);\n    };\n\n  return (\n    <div className={classes.steps}>\n      {[...new Array(steps)].map((_, index) => (\n        <ButtonBase key={index} centerRipple onClick={handleOnClick(index)}>\n          <div\n            data-testid=\"bar-chart-step\"\n            className={`${classes.step} ${\n              index === activeStep ? classes.stepActive : ''\n            }`}\n          />\n        </ButtonBase>\n      ))}\n    </div>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;AA0BO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,KAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AACF,CAA0B,KAAA;AACxB,EAAA,MAAM,UAAUA,wBAAU,EAAA,CAAA;AAC1B,EAAA,MAAM,aACJ,GAAA,CAAC,KACD,KAAA,CAAC,KAA2D,KAAA;AAC1D,IAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,IAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,GACf,CAAA;AAEF,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,KAAA,EAAA,EACrB,CAAC,GAAG,IAAI,KAAM,CAAA,KAAK,CAAC,CAAA,CAAE,IAAI,CAAC,CAAA,EAAG,KAC7B,qBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,GAAA,EAAK,KAAO,EAAA,YAAA,EAAY,IAAC,EAAA,OAAA,EAAS,aAAc,CAAA,KAAK,CAC/D,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,gBAAA;AAAA,MACZ,SAAA,EAAW,GAAG,OAAQ,CAAA,IAAI,IACxB,KAAU,KAAA,UAAA,GAAa,OAAQ,CAAA,UAAA,GAAa,EAC9C,CAAA,CAAA;AAAA,KAAA;AAAA,GAEJ,CACD,CACH,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/BarChart/BarChartTick.esm.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { BarChartLabel } from './BarChartLabel.esm.js';
+
+const BarChartTick = ({
+  x,
+  y,
+  height,
+  width,
+  payload,
+  visibleTicksCount,
+  details
+}) => {
+  const gutterWidth = 5;
+  const labelWidth = width / visibleTicksCount - gutterWidth * 2;
+  return /* @__PURE__ */ React.createElement(
+    BarChartLabel,
+    {
+      x,
+      y,
+      height,
+      width: labelWidth,
+      details
+    },
+    !payload.value ? "Unlabeled" : payload.value
+  );
+};
+
+export { BarChartTick };
+//# sourceMappingURL=BarChartTick.esm.js.map

package/dist/components/BarChart/BarChartTick.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChartTick.esm.js","sources":["../../../src/components/BarChart/BarChartTick.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 from 'react';\nimport { BarChartLabel } from './BarChartLabel';\n\ntype BarChartTickProps = {\n  x: number;\n  y: number;\n  height: number;\n  width: number;\n  payload: {\n    value: any;\n  };\n  visibleTicksCount: number;\n  details?: JSX.Element;\n};\n\nexport const BarChartTick = ({\n  x,\n  y,\n  height,\n  width,\n  payload,\n  visibleTicksCount,\n  details,\n}: BarChartTickProps) => {\n  const gutterWidth = 5;\n  const labelWidth = width / visibleTicksCount - gutterWidth * 2;\n  return (\n    <BarChartLabel\n      x={x}\n      y={y}\n      height={height}\n      width={labelWidth}\n      details={details}\n    >\n      {!payload.value ? 'Unlabeled' : payload.value}\n    </BarChartLabel>\n  );\n};\n"],"names":[],"mappings":";;;AA+BO,MAAM,eAAe,CAAC;AAAA,EAC3B,CAAA;AAAA,EACA,CAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,iBAAA;AAAA,EACA,OAAA;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,WAAc,GAAA,CAAA,CAAA;AACpB,EAAM,MAAA,UAAA,GAAa,KAAQ,GAAA,iBAAA,GAAoB,WAAc,GAAA,CAAA,CAAA;AAC7D,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,CAAA;AAAA,MACA,CAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAO,EAAA,UAAA;AAAA,MACP,OAAA;AAAA,KAAA;AAAA,IAEC,CAAC,OAAA,CAAQ,KAAQ,GAAA,WAAA,GAAc,OAAQ,CAAA,KAAA;AAAA,GAC1C,CAAA;AAEJ;;;;"}

package/dist/components/BarChart/BarChartTooltip.esm.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import classnames from 'classnames';
+import Box from '@material-ui/core/Box';
+import Divider from '@material-ui/core/Divider';
+import Typography from '@material-ui/core/Typography';
+import { useTooltipStyles } from '../../utils/styles.esm.js';
+
+const BarChartTooltip = (props) => {
+  const { title, content, subtitle, topRight, actions, children } = props;
+  const classes = useTooltipStyles();
+  const titleClassName = classnames(classes.truncate, {
+    [classes.maxWidth]: topRight === void 0
+  });
+  return /* @__PURE__ */ React.createElement(Box, { className: classes.tooltip, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "baseline",
+      px: 2,
+      pt: 2
+    },
+    /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column" }, /* @__PURE__ */ React.createElement(Typography, { className: titleClassName, variant: "h6" }, title), subtitle && /* @__PURE__ */ React.createElement(Typography, { className: classes.subtitle, variant: "subtitle1" }, subtitle)),
+    topRight && /* @__PURE__ */ React.createElement(Box, { ml: 2 }, topRight)
+  ), content && /* @__PURE__ */ React.createElement(Box, { px: 2, pt: 2, className: classes.maxWidth }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", paragraph: true }, content)), /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column", p: 2 }, children), actions && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Divider, { className: classes.divider, variant: "fullWidth" }), /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column", p: 2 }, actions)));
+};
+
+export { BarChartTooltip };
+//# sourceMappingURL=BarChartTooltip.esm.js.map

package/dist/components/BarChart/BarChartTooltip.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChartTooltip.esm.js","sources":["../../../src/components/BarChart/BarChartTooltip.tsx"],"sourcesContent":["/*\n * Copyright 2020 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, { ReactNode, PropsWithChildren } from 'react';\nimport classnames from 'classnames';\nimport Box from '@material-ui/core/Box';\nimport Divider from '@material-ui/core/Divider';\nimport Typography from '@material-ui/core/Typography';\nimport { useTooltipStyles as useStyles } from '../../utils/styles';\n\n/** @public */\nexport type BarChartTooltipProps = {\n  title: string;\n  content?: ReactNode | string;\n  subtitle?: ReactNode;\n  topRight?: ReactNode;\n  actions?: ReactNode;\n};\n\n/** @public */\nexport const BarChartTooltip = (\n  props: PropsWithChildren<BarChartTooltipProps>,\n) => {\n  const { title, content, subtitle, topRight, actions, children } = props;\n\n  const classes = useStyles();\n  const titleClassName = classnames(classes.truncate, {\n    [classes.maxWidth]: topRight === undefined,\n  });\n\n  return (\n    <Box className={classes.tooltip} display=\"flex\" flexDirection=\"column\">\n      <Box\n        display=\"flex\"\n        flexDirection=\"row\"\n        justifyContent=\"space-between\"\n        alignItems=\"baseline\"\n        px={2}\n        pt={2}\n      >\n        <Box display=\"flex\" flexDirection=\"column\">\n          <Typography className={titleClassName} variant=\"h6\">\n            {title}\n          </Typography>\n          {subtitle && (\n            <Typography className={classes.subtitle} variant=\"subtitle1\">\n              {subtitle}\n            </Typography>\n          )}\n        </Box>\n        {topRight && <Box ml={2}>{topRight}</Box>}\n      </Box>\n      {content && (\n        <Box px={2} pt={2} className={classes.maxWidth}>\n          <Typography variant=\"body1\" paragraph>\n            {content}\n          </Typography>\n        </Box>\n      )}\n      <Box display=\"flex\" flexDirection=\"column\" p={2}>\n        {children}\n      </Box>\n      {actions && (\n        <>\n          <Divider className={classes.divider} variant=\"fullWidth\" />\n          <Box display=\"flex\" flexDirection=\"column\" p={2}>\n            {actions}\n          </Box>\n        </>\n      )}\n    </Box>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;AAiCa,MAAA,eAAA,GAAkB,CAC7B,KACG,KAAA;AACH,EAAA,MAAM,EAAE,KAAO,EAAA,OAAA,EAAS,UAAU,QAAU,EAAA,OAAA,EAAS,UAAa,GAAA,KAAA,CAAA;AAElE,EAAA,MAAM,UAAUA,gBAAU,EAAA,CAAA;AAC1B,EAAM,MAAA,cAAA,GAAiB,UAAW,CAAA,OAAA,CAAQ,QAAU,EAAA;AAAA,IAClD,CAAC,OAAA,CAAQ,QAAQ,GAAG,QAAa,KAAA,KAAA,CAAA;AAAA,GAClC,CAAA,CAAA;AAED,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAI,SAAW,EAAA,OAAA,CAAQ,SAAS,OAAQ,EAAA,MAAA,EAAO,eAAc,QAC5D,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,MAAA;AAAA,MACR,aAAc,EAAA,KAAA;AAAA,MACd,cAAe,EAAA,eAAA;AAAA,MACf,UAAW,EAAA,UAAA;AAAA,MACX,EAAI,EAAA,CAAA;AAAA,MACJ,EAAI,EAAA,CAAA;AAAA,KAAA;AAAA,oBAEJ,KAAA,CAAA,aAAA,CAAC,OAAI,OAAQ,EAAA,MAAA,EAAO,eAAc,QAChC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAW,cAAgB,EAAA,OAAA,EAAQ,QAC5C,KACH,CAAA,EACC,QACC,oBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAW,QAAQ,QAAU,EAAA,OAAA,EAAQ,WAC9C,EAAA,EAAA,QACH,CAEJ,CAAA;AAAA,IACC,QAAY,oBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,KAAI,QAAS,CAAA;AAAA,GACrC,EACC,2BACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,IAAI,CAAG,EAAA,EAAA,EAAI,CAAG,EAAA,SAAA,EAAW,OAAQ,CAAA,QAAA,EAAA,sCACnC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAAQ,EAAA,SAAA,EAAS,IAClC,EAAA,EAAA,OACH,CACF,CAEF,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,OAAA,EAAQ,MAAO,EAAA,aAAA,EAAc,UAAS,CAAG,EAAA,CAAA,EAAA,EAC3C,QACH,CACC,EAAA,OAAA,8EAEI,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,SAAW,EAAA,OAAA,CAAQ,OAAS,EAAA,OAAA,EAAQ,aAAY,CACzD,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,OAAA,EAAQ,MAAO,EAAA,aAAA,EAAc,UAAS,CAAG,EAAA,CAAA,EAAA,EAC3C,OACH,CACF,CAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/BarChart/BarChartTooltipItem.esm.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import LensIcon from '@material-ui/icons/Lens';
+import { useTooltipStyles } from '../../utils/styles.esm.js';
+
+const BarChartTooltipItem = (props) => {
+  const { item } = props;
+  const classes = useTooltipStyles();
+  return /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      minHeight: 25
+    },
+    /* @__PURE__ */ React.createElement(Box, { display: "flex", alignContent: "center", marginRight: ".5em" }, /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center", marginRight: ".5em" }, /* @__PURE__ */ React.createElement(LensIcon, { className: classes.lensIcon, style: { fill: item.fill } })), /* @__PURE__ */ React.createElement(Typography, null, item.label)),
+    /* @__PURE__ */ React.createElement(Typography, { display: "block" }, item.value)
+  );
+};
+
+export { BarChartTooltipItem };
+//# sourceMappingURL=BarChartTooltipItem.esm.js.map

package/dist/components/BarChart/BarChartTooltipItem.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChartTooltipItem.esm.js","sources":["../../../src/components/BarChart/BarChartTooltipItem.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 from 'react';\nimport Box from '@material-ui/core/Box';\nimport Typography from '@material-ui/core/Typography';\nimport LensIcon from '@material-ui/icons/Lens';\nimport { useTooltipStyles as useStyles } from '../../utils/styles';\n\n/** @public */\nexport type TooltipItem = {\n  fill: string;\n  label?: string;\n  value?: string;\n};\n\n/** @public */\nexport type BarChartTooltipItemProps = {\n  item: TooltipItem;\n};\n\n/** @public */\nexport const BarChartTooltipItem = (props: BarChartTooltipItemProps) => {\n  const { item } = props;\n\n  const classes = useStyles();\n\n  return (\n    <Box\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      minHeight={25}\n    >\n      <Box display=\"flex\" alignContent=\"center\" marginRight=\".5em\">\n        <Box display=\"flex\" alignItems=\"center\" marginRight=\".5em\">\n          <LensIcon className={classes.lensIcon} style={{ fill: item.fill }} />\n        </Box>\n        <Typography>{item.label}</Typography>\n      </Box>\n      <Typography display=\"block\">{item.value}</Typography>\n    </Box>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;AAmCa,MAAA,mBAAA,GAAsB,CAAC,KAAoC,KAAA;AACtE,EAAM,MAAA,EAAE,MAAS,GAAA,KAAA,CAAA;AAEjB,EAAA,MAAM,UAAUA,gBAAU,EAAA,CAAA;AAE1B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,MAAA;AAAA,MACR,UAAW,EAAA,QAAA;AAAA,MACX,cAAe,EAAA,eAAA;AAAA,MACf,SAAW,EAAA,EAAA;AAAA,KAAA;AAAA,oBAEV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,OAAQ,EAAA,MAAA,EAAO,cAAa,QAAS,EAAA,WAAA,EAAY,MACpD,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,OAAA,EAAQ,MAAO,EAAA,UAAA,EAAW,UAAS,WAAY,EAAA,MAAA,EAAA,kBACjD,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,SAAW,EAAA,OAAA,CAAQ,QAAU,EAAA,KAAA,EAAO,EAAE,IAAM,EAAA,IAAA,CAAK,IAAK,EAAA,EAAG,CACrE,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAY,EAAA,IAAA,EAAA,IAAA,CAAK,KAAM,CAC1B,CAAA;AAAA,oBACC,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,OAAA,EAAA,EAAS,KAAK,KAAM,CAAA;AAAA,GAC1C,CAAA;AAEJ;;;;"}

package/dist/components/CopyUrlToClipboard/CopyUrlToClipboard.esm.js

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import useCopyToClipboard from 'react-use/esm/useCopyToClipboard';
+import Tooltip from '@material-ui/core/Tooltip';
+import IconButton from '@material-ui/core/IconButton';
+import AssignmentOutlinedIcon from '@material-ui/icons/AssignmentOutlined';
+import AssignmentTurnedInOutlinedIcon from '@material-ui/icons/AssignmentTurnedInOutlined';
+import SentimentVeryDissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';
+
+const ClipboardMessage = {
+  default: "Copy URL to clipboard",
+  success: "Copied!",
+  error: "Couldn't copy to clipboard"
+};
+const CopyUrlToClipboard = () => {
+  const location = useLocation();
+  const [state, copyToClipboard] = useCopyToClipboard();
+  const [copied, setCopied] = useState(false);
+  const origin = window.location.origin;
+  const pathname = location.pathname;
+  const search = location.search;
+  const url = `${origin}${pathname}${search}`;
+  useEffect(() => {
+    if (state.error) {
+      setCopied(false);
+    } else if (state.value) {
+      setCopied(true);
+      setTimeout(setCopied, 1500, false);
+    }
+  }, [state]);
+  let text = ClipboardMessage.default;
+  let Icon = AssignmentOutlinedIcon;
+  if (state.error) {
+    text = ClipboardMessage.error;
+    Icon = SentimentVeryDissatisfiedIcon;
+  } else if (copied) {
+    text = ClipboardMessage.success;
+    Icon = AssignmentTurnedInOutlinedIcon;
+  }
+  return /* @__PURE__ */ React.createElement(Tooltip, { title: text, arrow: true }, /* @__PURE__ */ React.createElement(IconButton, { onClick: () => copyToClipboard(url) }, /* @__PURE__ */ React.createElement(Icon, null)));
+};
+
+export { CopyUrlToClipboard };
+//# sourceMappingURL=CopyUrlToClipboard.esm.js.map

package/dist/components/CopyUrlToClipboard/CopyUrlToClipboard.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyUrlToClipboard.esm.js","sources":["../../../src/components/CopyUrlToClipboard/CopyUrlToClipboard.tsx"],"sourcesContent":["/*\n * Copyright 2020 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, { useEffect, useState } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport useCopyToClipboard from 'react-use/esm/useCopyToClipboard';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport IconButton from '@material-ui/core/IconButton';\nimport AssignmentOutlinedIcon from '@material-ui/icons/AssignmentOutlined';\nimport AssignmentTurnedInOutlinedIcon from '@material-ui/icons/AssignmentTurnedInOutlined';\nimport SentimentVeryDissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';\n\nconst ClipboardMessage = {\n  default: 'Copy URL to clipboard',\n  success: 'Copied!',\n  error: \"Couldn't copy to clipboard\",\n};\n\nexport const CopyUrlToClipboard = () => {\n  const location = useLocation();\n  const [state, copyToClipboard] = useCopyToClipboard();\n  const [copied, setCopied] = useState(false);\n\n  const origin = window.location.origin;\n  const pathname = location.pathname;\n  const search = location.search;\n  const url = `${origin}${pathname}${search}`;\n\n  useEffect(() => {\n    if (state.error) {\n      setCopied(false);\n    } else if (state.value) {\n      setCopied(true);\n      setTimeout(setCopied, 1500, false);\n    }\n  }, [state]);\n\n  let text = ClipboardMessage.default;\n  let Icon = AssignmentOutlinedIcon;\n\n  if (state.error) {\n    text = ClipboardMessage.error;\n    Icon = SentimentVeryDissatisfiedIcon;\n  } else if (copied) {\n    text = ClipboardMessage.success;\n    Icon = AssignmentTurnedInOutlinedIcon;\n  }\n\n  return (\n    <Tooltip title={text} arrow>\n      <IconButton onClick={() => copyToClipboard(url)}>\n        <Icon />\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAyBA,MAAM,gBAAmB,GAAA;AAAA,EACvB,OAAS,EAAA,uBAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,KAAO,EAAA,4BAAA;AACT,CAAA,CAAA;AAEO,MAAM,qBAAqB,MAAM;AACtC,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAA,MAAM,CAAC,KAAA,EAAO,eAAe,CAAA,GAAI,kBAAmB,EAAA,CAAA;AACpD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAE1C,EAAM,MAAA,MAAA,GAAS,OAAO,QAAS,CAAA,MAAA,CAAA;AAC/B,EAAA,MAAM,WAAW,QAAS,CAAA,QAAA,CAAA;AAC1B,EAAA,MAAM,SAAS,QAAS,CAAA,MAAA,CAAA;AACxB,EAAA,MAAM,MAAM,CAAG,EAAA,MAAM,CAAG,EAAA,QAAQ,GAAG,MAAM,CAAA,CAAA,CAAA;AAEzC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,MAAM,KAAO,EAAA;AACf,MAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,KACjB,MAAA,IAAW,MAAM,KAAO,EAAA;AACtB,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AACd,MAAW,UAAA,CAAA,SAAA,EAAW,MAAM,KAAK,CAAA,CAAA;AAAA,KACnC;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAEV,EAAA,IAAI,OAAO,gBAAiB,CAAA,OAAA,CAAA;AAC5B,EAAA,IAAI,IAAO,GAAA,sBAAA,CAAA;AAEX,EAAA,IAAI,MAAM,KAAO,EAAA;AACf,IAAA,IAAA,GAAO,gBAAiB,CAAA,KAAA,CAAA;AACxB,IAAO,IAAA,GAAA,6BAAA,CAAA;AAAA,aACE,MAAQ,EAAA;AACjB,IAAA,IAAA,GAAO,gBAAiB,CAAA,OAAA,CAAA;AACxB,IAAO,IAAA,GAAA,8BAAA,CAAA;AAAA,GACT;AAEA,EAAA,2CACG,OAAQ,EAAA,EAAA,KAAA,EAAO,IAAM,EAAA,KAAA,EAAK,wBACxB,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAS,EAAA,MAAM,gBAAgB,GAAG,CAAA,EAAA,kBAC3C,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAK,CACR,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/CostGrowth/CostGrowth.esm.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import classnames from 'classnames';
+import Typography from '@material-ui/core/Typography';
+import '../../types/Alert.esm.js';
+import { GrowthType } from '../../types/ChangeStatistic.esm.js';
+import { CurrencyType } from '../../types/CurrencyType.esm.js';
+import { rateOf } from '../../utils/currency.esm.js';
+import { growthOf } from '../../utils/change.esm.js';
+import { useCostGrowthStyles } from '../../utils/styles.esm.js';
+import { formatCurrency, formatPercent } from '../../utils/formatters.esm.js';
+import { indefiniteArticleOf } from '../../utils/grammar.esm.js';
+import { useConfig } from '../../hooks/useConfig.esm.js';
+import { useCurrency } from '../../hooks/useCurrency.esm.js';
+import '../../hooks/useFilters.esm.js';
+import '../../hooks/useGroups.esm.js';
+import '../../hooks/useLoading.esm.js';
+import '../../hooks/useScroll.esm.js';
+import '../../hooks/useLastCompleteBillingDate.esm.js';
+import { notEmpty } from '../../utils/assert.esm.js';
+
+const CostGrowth = (props) => {
+  const { change, duration } = props;
+  const styles = useCostGrowthStyles();
+  const { engineerCost, engineerThreshold } = useConfig();
+  const [currency] = useCurrency();
+  const amount = Math.abs(change.amount);
+  const ratio = Math.abs(change.ratio ?? NaN);
+  const rate = rateOf(engineerCost, duration);
+  const engineers = amount / rate;
+  const converted = amount / (currency.rate ?? rate);
+  const growth = notEmpty(change.ratio) ? growthOf({ ratio: change.ratio, amount: engineers }, engineerThreshold) : null;
+  const classes = classnames({
+    [styles.excess]: growth === GrowthType.Excess,
+    [styles.savings]: growth === GrowthType.Savings
+  });
+  if (engineers < engineerThreshold) {
+    return /* @__PURE__ */ React.createElement(Typography, { component: "span", className: classes }, "Negligible");
+  }
+  if (currency.kind === CurrencyType.USD) {
+    if (isNaN(ratio)) {
+      return /* @__PURE__ */ React.createElement(Typography, { component: "span", className: classes }, "~", currency.prefix, formatCurrency(converted));
+    }
+    return /* @__PURE__ */ React.createElement(Typography, { component: "span", className: classes }, formatPercent(ratio), " or ~", currency.prefix, formatCurrency(converted));
+  }
+  if (amount < 1) {
+    return /* @__PURE__ */ React.createElement(Typography, { component: "span", className: classes }, "less than ", indefiniteArticleOf(["a", "an"], currency.unit));
+  }
+  if (isNaN(ratio)) {
+    return /* @__PURE__ */ React.createElement(Typography, { component: "span", className: classes }, "~", formatCurrency(converted, currency.unit));
+  }
+  return /* @__PURE__ */ React.createElement(Typography, { component: "span", className: classes }, formatPercent(ratio), " or ~", formatCurrency(converted, currency.unit));
+};
+
+export { CostGrowth };
+//# sourceMappingURL=CostGrowth.esm.js.map

package/dist/components/CostGrowth/CostGrowth.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CostGrowth.esm.js","sources":["../../../src/components/CostGrowth/CostGrowth.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 from 'react';\nimport classnames from 'classnames';\nimport Typography from '@material-ui/core/Typography';\nimport { CurrencyType, Duration, GrowthType } from '../../types';\nimport { ChangeStatistic } from '@backstage-community/plugin-cost-insights-common';\nimport { rateOf } from '../../utils/currency';\nimport { growthOf } from '../../utils/change';\nimport { useCostGrowthStyles as useStyles } from '../../utils/styles';\nimport { formatPercent, formatCurrency } from '../../utils/formatters';\nimport { indefiniteArticleOf } from '../../utils/grammar';\nimport { useConfig, useCurrency } from '../../hooks';\nimport { notEmpty } from '../../utils/assert';\n\n/** @public */\nexport type CostGrowthProps = {\n  change: ChangeStatistic;\n  duration: Duration;\n};\n\n/** @public */\nexport const CostGrowth = (props: CostGrowthProps) => {\n  const { change, duration } = props;\n\n  const styles = useStyles();\n  const { engineerCost, engineerThreshold } = useConfig();\n  const [currency] = useCurrency();\n\n  // Only display costs in absolute values\n  const amount = Math.abs(change.amount);\n  const ratio = Math.abs(change.ratio ?? NaN);\n\n  const rate = rateOf(engineerCost, duration);\n  const engineers = amount / rate;\n  const converted = amount / (currency.rate ?? rate);\n\n  // If a ratio cannot be calculated, don't format.\n  const growth = notEmpty(change.ratio)\n    ? growthOf({ ratio: change.ratio, amount: engineers }, engineerThreshold)\n    : null;\n  // Determine if growth is significant enough to highlight\n  const classes = classnames({\n    [styles.excess]: growth === GrowthType.Excess,\n    [styles.savings]: growth === GrowthType.Savings,\n  });\n\n  if (engineers < engineerThreshold) {\n    return (\n      <Typography component=\"span\" className={classes}>\n        Negligible\n      </Typography>\n    );\n  }\n\n  if (currency.kind === CurrencyType.USD) {\n    // Do not display percentage if ratio cannot be calculated\n    if (isNaN(ratio)) {\n      return (\n        <Typography component=\"span\" className={classes}>\n          ~{currency.prefix}\n          {formatCurrency(converted)}\n        </Typography>\n      );\n    }\n\n    return (\n      <Typography component=\"span\" className={classes}>\n        {formatPercent(ratio)} or ~{currency.prefix}\n        {formatCurrency(converted)}\n      </Typography>\n    );\n  }\n\n  if (amount < 1) {\n    return (\n      <Typography component=\"span\" className={classes}>\n        less than {indefiniteArticleOf(['a', 'an'], currency.unit)}\n      </Typography>\n    );\n  }\n\n  // Do not display percentage if ratio cannot be calculated\n  if (isNaN(ratio)) {\n    return (\n      <Typography component=\"span\" className={classes}>\n        ~{formatCurrency(converted, currency.unit)}\n      </Typography>\n    );\n  }\n\n  return (\n    <Typography component=\"span\" className={classes}>\n      {formatPercent(ratio)} or ~{formatCurrency(converted, currency.unit)}\n    </Typography>\n  );\n};\n"],"names":["useStyles"],"mappings":"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"}

package/dist/components/CostGrowth/CostGrowthIndicator.esm.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import classnames from 'classnames';
+import Typography from '@material-ui/core/Typography';
+import ArrowDropUp from '@material-ui/icons/ArrowDropUp';
+import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
+import { growthOf } from '../../utils/change.esm.js';
+import '../../types/Alert.esm.js';
+import { GrowthType } from '../../types/ChangeStatistic.esm.js';
+import { useCostGrowthStyles } from '../../utils/styles.esm.js';
+import { useConfig } from '../../hooks/useConfig.esm.js';
+import '../../hooks/useCurrency.esm.js';
+import '../../hooks/useFilters.esm.js';
+import '../../hooks/useGroups.esm.js';
+import '../../hooks/useLoading.esm.js';
+import '../../hooks/useScroll.esm.js';
+import '../../hooks/useLastCompleteBillingDate.esm.js';
+
+const CostGrowthIndicator = (props) => {
+  const { engineerThreshold } = useConfig();
+  const { change, formatter, className, ...extraProps } = props;
+  const classes = useCostGrowthStyles();
+  const growth = growthOf(change, engineerThreshold);
+  const classNames = classnames(classes.indicator, className, {
+    [classes.excess]: growth === GrowthType.Excess,
+    [classes.savings]: growth === GrowthType.Savings
+  });
+  return /* @__PURE__ */ React.createElement(Typography, { className: classNames, component: "span", ...extraProps }, formatter ? formatter(change, { absolute: true }) : change.ratio, growth === GrowthType.Excess && /* @__PURE__ */ React.createElement(ArrowDropUp, { "aria-label": "excess" }), growth === GrowthType.Savings && /* @__PURE__ */ React.createElement(ArrowDropDown, { "aria-label": "savings" }));
+};
+
+export { CostGrowthIndicator };
+//# sourceMappingURL=CostGrowthIndicator.esm.js.map

package/dist/components/CostGrowth/CostGrowthIndicator.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CostGrowthIndicator.esm.js","sources":["../../../src/components/CostGrowth/CostGrowthIndicator.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 from 'react';\nimport classnames from 'classnames';\nimport Typography, { TypographyProps } from '@material-ui/core/Typography';\nimport { default as ArrowDropUp } from '@material-ui/icons/ArrowDropUp';\nimport { default as ArrowDropDown } from '@material-ui/icons/ArrowDropDown';\nimport { growthOf } from '../../utils/change';\nimport { GrowthType } from '../../types';\nimport { useCostGrowthStyles as useStyles } from '../../utils/styles';\nimport {\n  ChangeStatistic,\n  Maybe,\n} from '@backstage-community/plugin-cost-insights-common';\nimport { useConfig } from '../../hooks';\n\n/** @public */\nexport type CostGrowthIndicatorProps = TypographyProps & {\n  change: ChangeStatistic;\n  formatter?: (\n    change: ChangeStatistic,\n    options?: { absolute: boolean },\n  ) => Maybe<string>;\n};\n\n/** @public */\nexport const CostGrowthIndicator = (props: CostGrowthIndicatorProps) => {\n  const { engineerThreshold } = useConfig();\n  const { change, formatter, className, ...extraProps } = props;\n\n  const classes = useStyles();\n\n  const growth = growthOf(change, engineerThreshold);\n\n  const classNames = classnames(classes.indicator, className, {\n    [classes.excess]: growth === GrowthType.Excess,\n    [classes.savings]: growth === GrowthType.Savings,\n  });\n\n  return (\n    <Typography className={classNames} component=\"span\" {...extraProps}>\n      {formatter ? formatter(change, { absolute: true }) : change.ratio}\n      {growth === GrowthType.Excess && <ArrowDropUp aria-label=\"excess\" />}\n      {growth === GrowthType.Savings && <ArrowDropDown aria-label=\"savings\" />}\n    </Typography>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;;;;;;;;;AAwCa,MAAA,mBAAA,GAAsB,CAAC,KAAoC,KAAA;AACtE,EAAM,MAAA,EAAE,iBAAkB,EAAA,GAAI,SAAU,EAAA,CAAA;AACxC,EAAA,MAAM,EAAE,MAAQ,EAAA,SAAA,EAAW,SAAW,EAAA,GAAG,YAAe,GAAA,KAAA,CAAA;AAExD,EAAA,MAAM,UAAUA,mBAAU,EAAA,CAAA;AAE1B,EAAM,MAAA,MAAA,GAAS,QAAS,CAAA,MAAA,EAAQ,iBAAiB,CAAA,CAAA;AAEjD,EAAA,MAAM,UAAa,GAAA,UAAA,CAAW,OAAQ,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,IAC1D,CAAC,OAAA,CAAQ,MAAM,GAAG,WAAW,UAAW,CAAA,MAAA;AAAA,IACxC,CAAC,OAAA,CAAQ,OAAO,GAAG,WAAW,UAAW,CAAA,OAAA;AAAA,GAC1C,CAAA,CAAA;AAED,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAW,EAAA,UAAA,EAAY,WAAU,MAAQ,EAAA,GAAG,UACrD,EAAA,EAAA,SAAA,GAAY,SAAU,CAAA,MAAA,EAAQ,EAAE,QAAA,EAAU,MAAM,CAAA,GAAI,MAAO,CAAA,KAAA,EAC3D,MAAW,KAAA,UAAA,CAAW,MAAU,oBAAA,KAAA,CAAA,aAAA,CAAC,eAAY,YAAW,EAAA,QAAA,EAAS,CACjE,EAAA,MAAA,KAAW,WAAW,OAAW,oBAAA,KAAA,CAAA,aAAA,CAAC,aAAc,EAAA,EAAA,YAAA,EAAW,WAAU,CACxE,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/CostInsightsHeader/CostInsightsHeader.esm.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import useAsync from 'react-use/esm/useAsync';
+import { useCostInsightsStyles } from '../../utils/styles.esm.js';
+import { useApi, identityApiRef } from '@backstage/core-plugin-api';
+
+function useDisplayName() {
+  const identityApi = useApi(identityApiRef);
+  const state = useAsync(() => identityApi.getProfileInfo(), [identityApi]);
+  return state.loading ? "" : state.value?.displayName || "Mysterious Stranger";
+}
+const CostInsightsHeaderNoData = ({
+  groupId,
+  groups
+}) => {
+  const displayName = useDisplayName();
+  const classes = useCostInsightsStyles();
+  const hasMultipleGroups = groups.length > 1;
+  const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement(Typography, { component: "span", role: "img", "aria-label": "flushed-face" }, "\u{1F633}"), " ", "Well this is awkward"), /* @__PURE__ */ React.createElement(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement("b", null, "Hey, ", displayName, "!"), " ", /* @__PURE__ */ React.createElement("b", null, ownerName), " doesn't seem to have any cloud costs."), hasMultipleGroups && /* @__PURE__ */ React.createElement(Typography, { align: "center", gutterBottom: true }, "Maybe we picked the wrong team, choose another from the menu above?"));
+};
+const CostInsightsHeaderAlerts = ({
+  groupId,
+  groups,
+  alerts
+}) => {
+  const displayName = useDisplayName();
+  const classes = useCostInsightsStyles();
+  const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement(Typography, { component: "span", role: "img", "aria-label": "magnifying-glass" }, "\u{1F50E}"), " ", "You have ", alerts, " thing", alerts > 1 && "s", " to look into"), /* @__PURE__ */ React.createElement(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement("b", null, "Hey, ", displayName, "!"), " We've identified", " ", alerts > 1 ? "a few things " : "one thing ", /* @__PURE__ */ React.createElement("b", null, ownerName), " should look into next."));
+};
+const CostInsightsHeaderNoAlerts = ({
+  groupId,
+  groups
+}) => {
+  const displayName = useDisplayName();
+  const classes = useCostInsightsStyles();
+  const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", gutterBottom: true, align: "center" }, /* @__PURE__ */ React.createElement(Typography, { component: "span", role: "img", "aria-label": "thumbs-up" }, "\u{1F44D}"), " ", "Your team is doing great"), /* @__PURE__ */ React.createElement(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement("b", null, "Hey, ", displayName, "!"), " ", /* @__PURE__ */ React.createElement("b", null, ownerName), " is doing well. No major changes this month."));
+};
+const CostInsightsHeaderNoGroups = () => {
+  const displayName = useDisplayName();
+  const classes = useCostInsightsStyles();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement(Typography, { component: "span", role: "img", "aria-label": "flushed-face" }, "\u{1F633}"), " ", "Well this is awkward"), /* @__PURE__ */ React.createElement(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement("b", null, "Hey, ", displayName, "!"), " It doesn't look like you belong to any teams."));
+};
+const CostInsightsHeader = (props) => {
+  if (!props.hasCostData) {
+    return /* @__PURE__ */ React.createElement(CostInsightsHeaderNoData, { ...props });
+  }
+  if (props.alerts) {
+    return /* @__PURE__ */ React.createElement(CostInsightsHeaderAlerts, { ...props });
+  }
+  return /* @__PURE__ */ React.createElement(CostInsightsHeaderNoAlerts, { ...props });
+};
+
+export { CostInsightsHeader, CostInsightsHeaderNoGroups };
+//# sourceMappingURL=CostInsightsHeader.esm.js.map

package/dist/components/CostInsightsHeader/CostInsightsHeader.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CostInsightsHeader.esm.js","sources":["../../../src/components/CostInsightsHeader/CostInsightsHeader.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 from 'react';\nimport Typography from '@material-ui/core/Typography';\nimport useAsync from 'react-use/esm/useAsync';\nimport { useCostInsightsStyles } from '../../utils/styles';\nimport { Group } from '@backstage-community/plugin-cost-insights-common';\nimport { identityApiRef, useApi } from '@backstage/core-plugin-api';\n\nfunction useDisplayName(): string {\n  const identityApi = useApi(identityApiRef);\n  const state = useAsync(() => identityApi.getProfileInfo(), [identityApi]);\n  return state.loading ? '' : state.value?.displayName || 'Mysterious Stranger';\n}\n\ntype CostInsightsHeaderProps = {\n  groupId: string;\n  groups: Group[];\n  hasCostData: boolean;\n  alerts: number;\n};\n\nconst CostInsightsHeaderNoData = ({\n  groupId,\n  groups,\n}: CostInsightsHeaderProps) => {\n  const displayName = useDisplayName();\n  const classes = useCostInsightsStyles();\n  const hasMultipleGroups = groups.length > 1;\n  const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId;\n\n  return (\n    <>\n      <Typography variant=\"h4\" align=\"center\" gutterBottom>\n        <Typography component=\"span\" role=\"img\" aria-label=\"flushed-face\">\n          😳\n        </Typography>{' '}\n        Well this is awkward\n      </Typography>\n      <Typography className={classes.h6Subtle} align=\"center\" gutterBottom>\n        <b>Hey, {displayName}!</b> <b>{ownerName}</b> doesn't seem to have any\n        cloud costs.\n      </Typography>\n      {hasMultipleGroups && (\n        <Typography align=\"center\" gutterBottom>\n          Maybe we picked the wrong team, choose another from the menu above?\n        </Typography>\n      )}\n    </>\n  );\n};\n\nconst CostInsightsHeaderAlerts = ({\n  groupId,\n  groups,\n  alerts,\n}: CostInsightsHeaderProps) => {\n  const displayName = useDisplayName();\n  const classes = useCostInsightsStyles();\n  const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId;\n\n  return (\n    <>\n      <Typography variant=\"h4\" align=\"center\" gutterBottom>\n        <Typography component=\"span\" role=\"img\" aria-label=\"magnifying-glass\">\n          🔎\n        </Typography>{' '}\n        You have {alerts} thing{alerts > 1 && 's'} to look into\n      </Typography>\n      <Typography className={classes.h6Subtle} align=\"center\" gutterBottom>\n        <b>Hey, {displayName}!</b> We've identified{' '}\n        {alerts > 1 ? 'a few things ' : 'one thing '}\n        <b>{ownerName}</b> should look into next.\n      </Typography>\n    </>\n  );\n};\n\nconst CostInsightsHeaderNoAlerts = ({\n  groupId,\n  groups,\n}: CostInsightsHeaderProps) => {\n  const displayName = useDisplayName();\n  const classes = useCostInsightsStyles();\n  const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId;\n\n  return (\n    <>\n      <Typography variant=\"h4\" gutterBottom align=\"center\">\n        <Typography component=\"span\" role=\"img\" aria-label=\"thumbs-up\">\n          👍\n        </Typography>{' '}\n        Your team is doing great\n      </Typography>\n      <Typography className={classes.h6Subtle} align=\"center\" gutterBottom>\n        <b>Hey, {displayName}!</b> <b>{ownerName}</b> is doing well. No major\n        changes this month.\n      </Typography>\n    </>\n  );\n};\n\nexport const CostInsightsHeaderNoGroups = () => {\n  const displayName = useDisplayName();\n  const classes = useCostInsightsStyles();\n  return (\n    <>\n      <Typography variant=\"h4\" align=\"center\" gutterBottom>\n        <Typography component=\"span\" role=\"img\" aria-label=\"flushed-face\">\n          😳\n        </Typography>{' '}\n        Well this is awkward\n      </Typography>\n      <Typography className={classes.h6Subtle} align=\"center\" gutterBottom>\n        <b>Hey, {displayName}!</b> It doesn't look like you belong to any teams.\n      </Typography>\n    </>\n  );\n};\n\nexport const CostInsightsHeader = (props: CostInsightsHeaderProps) => {\n  if (!props.hasCostData) {\n    return <CostInsightsHeaderNoData {...props} />;\n  }\n  if (props.alerts) {\n    return <CostInsightsHeaderAlerts {...props} />;\n  }\n  return <CostInsightsHeaderNoAlerts {...props} />;\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CostInsightsLayout/CostInsightsLayout.esm.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { CostInsightsTabs } from '../CostInsightsTabs/CostInsightsTabs.esm.js';
+import { Page, Header } from '@backstage/core-components';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    gridArea: "pageContent"
+  },
+  header: {
+    boxShadow: "none"
+  },
+  content: {
+    padding: theme.spacing(4)
+  }
+}));
+const CostInsightsLayout = ({
+  title = "Cost Insights",
+  groups,
+  children
+}) => {
+  const classes = useStyles();
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      style: { boxShadow: "none" },
+      title: "Cost Insights",
+      pageTitleOverride: title,
+      type: "Tool"
+    }
+  ), /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(CostInsightsTabs, { groups }), /* @__PURE__ */ React.createElement("div", { className: classes.content }, children)));
+};
+
+export { CostInsightsLayout };
+//# sourceMappingURL=CostInsightsLayout.esm.js.map

package/dist/components/CostInsightsLayout/CostInsightsLayout.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CostInsightsLayout.esm.js","sources":["../../../src/components/CostInsightsLayout/CostInsightsLayout.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 */\nimport React, { PropsWithChildren } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Group } from '@backstage-community/plugin-cost-insights-common';\nimport { CostInsightsTabs } from '../CostInsightsTabs';\nimport { Header, Page } from '@backstage/core-components';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    gridArea: 'pageContent',\n  },\n  header: {\n    boxShadow: 'none',\n  },\n  content: {\n    padding: theme.spacing(4),\n  },\n}));\n\ntype CostInsightsLayoutProps = {\n  title?: string;\n  groups: Group[];\n};\n\nexport const CostInsightsLayout = ({\n  title = 'Cost Insights',\n  groups,\n  children,\n}: PropsWithChildren<CostInsightsLayoutProps>) => {\n  const classes = useStyles();\n  return (\n    <Page themeId=\"tool\">\n      <Header\n        style={{ boxShadow: 'none' }}\n        title=\"Cost Insights\"\n        pageTitleOverride={title}\n        type=\"Tool\"\n      />\n      <div className={classes.root}>\n        <CostInsightsTabs groups={groups} />\n        <div className={classes.content}>{children}</div>\n      </div>\n    </Page>\n  );\n};\n"],"names":[],"mappings":";;;;;AAqBA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,IAAM,EAAA;AAAA,IACJ,QAAU,EAAA,aAAA;AAAA,GACZ;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,SAAW,EAAA,MAAA;AAAA,GACb;AAAA,EACA,OAAS,EAAA;AAAA,IACP,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,GAC1B;AACF,CAAE,CAAA,CAAA,CAAA;AAOK,MAAM,qBAAqB,CAAC;AAAA,EACjC,KAAQ,GAAA,eAAA;AAAA,EACR,MAAA;AAAA,EACA,QAAA;AACF,CAAkD,KAAA;AAChD,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,SAAA,EAAW,MAAO,EAAA;AAAA,MAC3B,KAAM,EAAA,eAAA;AAAA,MACN,iBAAmB,EAAA,KAAA;AAAA,MACnB,IAAK,EAAA,MAAA;AAAA,KAAA;AAAA,qBAEN,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,wBACrB,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,EAAiB,MAAgB,EAAA,CAAA,sCACjC,KAAI,EAAA,EAAA,SAAA,EAAW,QAAQ,OAAU,EAAA,EAAA,QAAS,CAC7C,CACF,CAAA,CAAA;AAEJ;;;;"}