@backstage-community/plugin-cost-insights 0.15.2 → 0.16.0

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

@@ -1,4 +1,5 @@
-import React, { useState, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
 import { ResponsiveContainer, BarChart as BarChart$1, Tooltip, CartesianGrid, XAxis, YAxis, Bar } from 'recharts';
 import Box from '@material-ui/core/Box';
 import { useTheme } from '@material-ui/core/styles';
@@ -25,7 +26,7 @@ const defaultTooltip = (baseCurrency) => {
     if (isInvalid({ label, payload })) return null;
     const title = titleOf(label);
     const items = payload.map(tooltipItemOf(baseCurrency)).filter(notEmpty);
-    return /* @__PURE__ */ React.createElement(BarChartTooltip, { title }, items.map((item, index) => /* @__PURE__ */ React.createElement(BarChartTooltipItem, { key: `${item.label}-${index}`, item })));
+    return /* @__PURE__ */ jsx(BarChartTooltip, { title, children: items.map((item, index) => /* @__PURE__ */ jsx(BarChartTooltipItem, { item }, `${item.label}-${index}`)) });
   };
   return tooltip;
 };
@@ -73,93 +74,97 @@ const BarChart = (props) => {
     },
     [setStepWindow, resources, displayAmount]
   );
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     Box,
     {
       position: "relative",
       onMouseLeave: () => setActiveChart(false),
       onMouseEnter: () => setActiveChart(true),
-      "data-testid": "bar-chart-wrapper"
-    },
-    /* @__PURE__ */ React.createElement(
-      ResponsiveContainer,
-      {
-        height: styles.container.height,
-        width: responsive ? "100%" : styles.container.width
-      },
-      /* @__PURE__ */ React.createElement(
-        BarChart$1,
-        {
-          style: { cursor: onClick ? "pointer" : null },
-          onClick,
-          onMouseMove,
-          data: sortedResources,
-          margin: styles.barChart.margin,
-          barSize: 45,
-          "data-testid": "bar-chart"
-        },
-        tooltip && /* @__PURE__ */ React.createElement(
-          Tooltip,
-          {
-            filterNull: true,
-            cursor: styles.cursor,
-            animationDuration: 100,
-            content: tooltip
-          }
-        ),
-        /* @__PURE__ */ React.createElement(
-          CartesianGrid,
-          {
-            vertical: false,
-            stroke: styles.cartesianGrid.stroke
-          }
-        ),
-        /* @__PURE__ */ React.createElement(
-          XAxis,
+      "data-testid": "bar-chart-wrapper",
+      children: [
+        /* @__PURE__ */ jsx(
+          ResponsiveContainer,
           {
-            dataKey: DataKey.Name,
-            tickLine: false,
-            interval: 0,
-            height: styles.xAxis.height,
-            tick: BarChartTick
+            height: styles.container.height,
+            width: responsive ? "100%" : styles.container.width,
+            children: /* @__PURE__ */ jsxs(
+              BarChart$1,
+              {
+                style: { cursor: onClick ? "pointer" : null },
+                onClick,
+                onMouseMove,
+                data: sortedResources,
+                margin: styles.barChart.margin,
+                barSize: 45,
+                "data-testid": "bar-chart",
+                children: [
+                  tooltip && /* @__PURE__ */ jsx(
+                    Tooltip,
+                    {
+                      filterNull: true,
+                      cursor: styles.cursor,
+                      animationDuration: 100,
+                      content: tooltip
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    CartesianGrid,
+                    {
+                      vertical: false,
+                      stroke: styles.cartesianGrid.stroke
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    XAxis,
+                    {
+                      dataKey: DataKey.Name,
+                      tickLine: false,
+                      interval: 0,
+                      height: styles.xAxis.height,
+                      tick: BarChartTick
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    YAxis,
+                    {
+                      tickFormatter: currencyFormatter(baseCurrency).format,
+                      domain: [() => 0, globalResourcesMax],
+                      tick: styles.axis
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Bar,
+                    {
+                      dataKey: DataKey.Previous,
+                      name: data.previousName,
+                      fill: data.previousFill,
+                      isAnimationActive: false
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Bar,
+                    {
+                      dataKey: DataKey.Current,
+                      name: data.currentName,
+                      fill: data.currentFill,
+                      isAnimationActive: false
+                    }
+                  )
+                ]
+              }
+            )
           }
         ),
-        /* @__PURE__ */ React.createElement(
-          YAxis,
+        !disableStepper && /* @__PURE__ */ jsx(
+          BarChartStepper,
           {
-            tickFormatter: currencyFormatter(baseCurrency).format,
-            domain: [() => 0, globalResourcesMax],
-            tick: styles.axis
-          }
-        ),
-        /* @__PURE__ */ React.createElement(
-          Bar,
-          {
-            dataKey: DataKey.Previous,
-            name: data.previousName,
-            fill: data.previousFill,
-            isAnimationActive: false
-          }
-        ),
-        /* @__PURE__ */ React.createElement(
-          Bar,
-          {
-            dataKey: DataKey.Current,
-            name: data.currentName,
-            fill: data.currentFill,
-            isAnimationActive: false
+            steps,
+            disableScroll: !activeChart,
+            onChange: onStepChange
           }
         )
-      )
-    ),
-    !disableStepper && /* @__PURE__ */ React.createElement(
-      BarChartStepper,
-      {
-        steps,
-        disableScroll: !activeChart,
-        onChange: onStepChange
-      }
-    )
+      ]
+    }
   );
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"BarChart.esm.js","sources":["../../../src/components/BarChart/BarChart.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, { useState, useCallback } from 'react';\nimport {\n  Bar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  Tooltip as RechartsTooltip,\n  ResponsiveContainer,\n  XAxis,\n  YAxis,\n} from 'recharts';\nimport Box from '@material-ui/core/Box';\nimport { useTheme } from '@material-ui/core/styles';\nimport { BarChartTick } from './BarChartTick';\nimport { BarChartStepper } from './BarChartStepper';\nimport { BarChartTooltip } from './BarChartTooltip';\nimport { BarChartTooltipItem } from './BarChartTooltipItem';\nimport { currencyFormatter } from '../../utils/formatters';\nimport {\n  ResourceData,\n  DataKey,\n  CostInsightsTheme,\n  BarChartOptions,\n} from '../../types';\nimport { notEmpty } from '../../utils/assert';\nimport { useBarChartStyles } from '../../utils/styles';\nimport { resourceSort } from '../../utils/sort';\nimport { isInvalid, titleOf, tooltipItemOf } from '../../utils/graphs';\nimport { TooltipRenderer } from '../../types';\nimport { useConfig } from '../../hooks';\n\nconst defaultTooltip = (baseCurrency: Intl.NumberFormat) => {\n  const tooltip: TooltipRenderer = ({ label, payload = [] }) => {\n    if (isInvalid({ label, payload })) return null;\n\n    const title = titleOf(label);\n    const items = payload.map(tooltipItemOf(baseCurrency)).filter(notEmpty);\n    return (\n      <BarChartTooltip title={title}>\n        {items.map((item, index) => (\n          <BarChartTooltipItem key={`${item.label}-${index}`} item={item} />\n        ))}\n      </BarChartTooltip>\n    );\n  };\n  return tooltip;\n};\n\n/** @public */\nexport type BarChartProps = {\n  resources: ResourceData[];\n  responsive?: boolean;\n  displayAmount?: number;\n  options?: Partial<BarChartOptions>;\n  tooltip?: TooltipRenderer;\n  onClick?: (...args: any[]) => void;\n  onMouseMove?: (...args: any[]) => void;\n};\n\n/** @public */\nexport const BarChart = (props: BarChartProps) => {\n  const { baseCurrency } = useConfig();\n\n  const {\n    resources,\n    responsive = true,\n    displayAmount = 6,\n    options = {},\n    tooltip = defaultTooltip(baseCurrency),\n    onClick,\n    onMouseMove,\n  } = props;\n\n  const theme = useTheme<CostInsightsTheme>();\n  const styles = useBarChartStyles(theme);\n  const [activeChart, setActiveChart] = useState(false);\n  const [stepWindow, setStepWindow] = useState(() => [0, displayAmount]);\n\n  const data = Object.assign(\n    {\n      previousFill: theme.palette.lightBlue,\n      currentFill: theme.palette.darkBlue,\n      previousName: 'Previous',\n      currentName: 'Current',\n    },\n    options,\n  );\n\n  const [stepStart, stepEnd] = stepWindow;\n  const steps = Math.ceil(resources.length / displayAmount);\n  const disableStepper = resources.length <= displayAmount;\n\n  const sortedResources = resources\n    .sort(resourceSort)\n    .slice(stepStart, stepEnd);\n\n  // Pin the domain to the largest value in the series.\n  // Intentionally redundant - This could simply be derived from the first element in the already sorted list,\n  // but that may not be the case in the future when custom sorting is implemented.\n  const globalResourcesMax = resources.reduce(\n    (max, r: ResourceData) => Math.max(max, r.current, r.previous),\n    0,\n  );\n\n  const onStepChange = useCallback(\n    (activeStep: number) => {\n      const start = activeStep * displayAmount;\n      const end = start + displayAmount;\n      if (end > resources.length) {\n        setStepWindow([start, resources.length]);\n      } else {\n        setStepWindow([start, end]);\n      }\n    },\n    [setStepWindow, resources, displayAmount],\n  );\n\n  return (\n    <Box\n      position=\"relative\"\n      onMouseLeave={() => setActiveChart(false)}\n      onMouseEnter={() => setActiveChart(true)}\n      data-testid=\"bar-chart-wrapper\"\n    >\n      {/* Setting fixed values for height and width generates a console warning in testing but enables ResponsiveContainer to render its children. */}\n      <ResponsiveContainer\n        height={styles.container.height}\n        width={responsive ? '100%' : styles.container.width}\n      >\n        <RechartsBarChart\n          style={{ cursor: onClick ? 'pointer' : null }}\n          onClick={onClick}\n          onMouseMove={onMouseMove}\n          data={sortedResources}\n          margin={styles.barChart.margin}\n          barSize={45}\n          data-testid=\"bar-chart\"\n        >\n          {tooltip && (\n            <RechartsTooltip\n              filterNull\n              cursor={styles.cursor}\n              animationDuration={100}\n              content={tooltip}\n            />\n          )}\n          <CartesianGrid\n            vertical={false}\n            stroke={styles.cartesianGrid.stroke}\n          />\n          <XAxis\n            dataKey={DataKey.Name}\n            tickLine={false}\n            interval={0}\n            height={styles.xAxis.height}\n            tick={BarChartTick}\n          />\n          <YAxis\n            tickFormatter={currencyFormatter(baseCurrency).format}\n            domain={[() => 0, globalResourcesMax]}\n            tick={styles.axis}\n          />\n          <Bar\n            dataKey={DataKey.Previous}\n            name={data.previousName}\n            fill={data.previousFill}\n            isAnimationActive={false}\n          />\n          <Bar\n            dataKey={DataKey.Current}\n            name={data.currentName}\n            fill={data.currentFill}\n            isAnimationActive={false}\n          />\n        </RechartsBarChart>\n      </ResponsiveContainer>\n      {!disableStepper && (\n        <BarChartStepper\n          steps={steps}\n          disableScroll={!activeChart}\n          onChange={onStepChange}\n        />\n      )}\n    </Box>\n  );\n};\n"],"names":["RechartsBarChart","RechartsTooltip"],"mappings":"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"}
+{"version":3,"file":"BarChart.esm.js","sources":["../../../src/components/BarChart/BarChart.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 { useState, useCallback } from 'react';\nimport {\n  Bar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  Tooltip as RechartsTooltip,\n  ResponsiveContainer,\n  XAxis,\n  YAxis,\n} from 'recharts';\nimport Box from '@material-ui/core/Box';\nimport { useTheme } from '@material-ui/core/styles';\nimport { BarChartTick } from './BarChartTick';\nimport { BarChartStepper } from './BarChartStepper';\nimport { BarChartTooltip } from './BarChartTooltip';\nimport { BarChartTooltipItem } from './BarChartTooltipItem';\nimport { currencyFormatter } from '../../utils/formatters';\nimport {\n  ResourceData,\n  DataKey,\n  CostInsightsTheme,\n  BarChartOptions,\n} from '../../types';\nimport { notEmpty } from '../../utils/assert';\nimport { useBarChartStyles } from '../../utils/styles';\nimport { resourceSort } from '../../utils/sort';\nimport { isInvalid, titleOf, tooltipItemOf } from '../../utils/graphs';\nimport { TooltipRenderer } from '../../types';\nimport { useConfig } from '../../hooks';\n\nconst defaultTooltip = (baseCurrency: Intl.NumberFormat) => {\n  const tooltip: TooltipRenderer = ({ label, payload = [] }) => {\n    if (isInvalid({ label, payload })) return null;\n\n    const title = titleOf(label);\n    const items = payload.map(tooltipItemOf(baseCurrency)).filter(notEmpty);\n    return (\n      <BarChartTooltip title={title}>\n        {items.map((item, index) => (\n          <BarChartTooltipItem key={`${item.label}-${index}`} item={item} />\n        ))}\n      </BarChartTooltip>\n    );\n  };\n  return tooltip;\n};\n\n/** @public */\nexport type BarChartProps = {\n  resources: ResourceData[];\n  responsive?: boolean;\n  displayAmount?: number;\n  options?: Partial<BarChartOptions>;\n  tooltip?: TooltipRenderer;\n  onClick?: (...args: any[]) => void;\n  onMouseMove?: (...args: any[]) => void;\n};\n\n/** @public */\nexport const BarChart = (props: BarChartProps) => {\n  const { baseCurrency } = useConfig();\n\n  const {\n    resources,\n    responsive = true,\n    displayAmount = 6,\n    options = {},\n    tooltip = defaultTooltip(baseCurrency),\n    onClick,\n    onMouseMove,\n  } = props;\n\n  const theme = useTheme<CostInsightsTheme>();\n  const styles = useBarChartStyles(theme);\n  const [activeChart, setActiveChart] = useState(false);\n  const [stepWindow, setStepWindow] = useState(() => [0, displayAmount]);\n\n  const data = Object.assign(\n    {\n      previousFill: theme.palette.lightBlue,\n      currentFill: theme.palette.darkBlue,\n      previousName: 'Previous',\n      currentName: 'Current',\n    },\n    options,\n  );\n\n  const [stepStart, stepEnd] = stepWindow;\n  const steps = Math.ceil(resources.length / displayAmount);\n  const disableStepper = resources.length <= displayAmount;\n\n  const sortedResources = resources\n    .sort(resourceSort)\n    .slice(stepStart, stepEnd);\n\n  // Pin the domain to the largest value in the series.\n  // Intentionally redundant - This could simply be derived from the first element in the already sorted list,\n  // but that may not be the case in the future when custom sorting is implemented.\n  const globalResourcesMax = resources.reduce(\n    (max, r: ResourceData) => Math.max(max, r.current, r.previous),\n    0,\n  );\n\n  const onStepChange = useCallback(\n    (activeStep: number) => {\n      const start = activeStep * displayAmount;\n      const end = start + displayAmount;\n      if (end > resources.length) {\n        setStepWindow([start, resources.length]);\n      } else {\n        setStepWindow([start, end]);\n      }\n    },\n    [setStepWindow, resources, displayAmount],\n  );\n\n  return (\n    <Box\n      position=\"relative\"\n      onMouseLeave={() => setActiveChart(false)}\n      onMouseEnter={() => setActiveChart(true)}\n      data-testid=\"bar-chart-wrapper\"\n    >\n      {/* Setting fixed values for height and width generates a console warning in testing but enables ResponsiveContainer to render its children. */}\n      <ResponsiveContainer\n        height={styles.container.height}\n        width={responsive ? '100%' : styles.container.width}\n      >\n        <RechartsBarChart\n          style={{ cursor: onClick ? 'pointer' : null }}\n          onClick={onClick}\n          onMouseMove={onMouseMove}\n          data={sortedResources}\n          margin={styles.barChart.margin}\n          barSize={45}\n          data-testid=\"bar-chart\"\n        >\n          {tooltip && (\n            <RechartsTooltip\n              filterNull\n              cursor={styles.cursor}\n              animationDuration={100}\n              content={tooltip}\n            />\n          )}\n          <CartesianGrid\n            vertical={false}\n            stroke={styles.cartesianGrid.stroke}\n          />\n          <XAxis\n            dataKey={DataKey.Name}\n            tickLine={false}\n            interval={0}\n            height={styles.xAxis.height}\n            tick={BarChartTick}\n          />\n          <YAxis\n            tickFormatter={currencyFormatter(baseCurrency).format}\n            domain={[() => 0, globalResourcesMax]}\n            tick={styles.axis}\n          />\n          <Bar\n            dataKey={DataKey.Previous}\n            name={data.previousName}\n            fill={data.previousFill}\n            isAnimationActive={false}\n          />\n          <Bar\n            dataKey={DataKey.Current}\n            name={data.currentName}\n            fill={data.currentFill}\n            isAnimationActive={false}\n          />\n        </RechartsBarChart>\n      </ResponsiveContainer>\n      {!disableStepper && (\n        <BarChartStepper\n          steps={steps}\n          disableScroll={!activeChart}\n          onChange={onStepChange}\n        />\n      )}\n    </Box>\n  );\n};\n"],"names":["RechartsBarChart","RechartsTooltip"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import Box from '@material-ui/core/Box';
 import Typography from '@material-ui/core/Typography';
 import { useBarChartLabelStyles } from '../../utils/styles.esm.js';
@@ -13,7 +13,7 @@ const BarChartLabel = ({
 }) => {
   const classes = useBarChartLabelStyles();
   const translateX = width * -0.5;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "foreignObject",
     {
       className: classes.foreignObject,
@@ -21,9 +21,12 @@ const BarChartLabel = ({
       x,
       y,
       height,
-      width
-    },
-    /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column", justifyContent: "center" }, /* @__PURE__ */ React.createElement(Typography, { className: classes.label, gutterBottom: true }, children), details)
+      width,
+      children: /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", justifyContent: "center", children: [
+        /* @__PURE__ */ jsx(Typography, { className: classes.label, gutterBottom: true, children }),
+        details
+      ] })
+    }
   );
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"BarChartLabel.esm.js","sources":["../../../src/components/BarChart/BarChartLabel.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, { PropsWithChildren } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Typography from '@material-ui/core/Typography';\nimport { useBarChartLabelStyles } from '../../utils/styles';\n\ntype BarChartLabelProps = {\n  x: number;\n  y: number;\n  height: number;\n  width: number;\n  details?: JSX.Element;\n};\n\nexport const BarChartLabel = ({\n  x,\n  y,\n  height,\n  width,\n  details,\n  children,\n}: PropsWithChildren<BarChartLabelProps>) => {\n  const classes = useBarChartLabelStyles();\n  const translateX = width * -0.5;\n\n  return (\n    <foreignObject\n      className={classes.foreignObject}\n      style={{ transform: `translateX(${translateX}px)` }}\n      x={x}\n      y={y}\n      height={height}\n      width={width}\n    >\n      <Box display=\"flex\" flexDirection=\"column\" justifyContent=\"center\">\n        <Typography className={classes.label} gutterBottom>\n          {children}\n        </Typography>\n        {details}\n      </Box>\n    </foreignObject>\n  );\n};\n"],"names":[],"mappings":";;;;;AA6BO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,CAAA;AAAA,EACA,CAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA6C,KAAA;AAC3C,EAAA,MAAM,UAAU,sBAAuB,EAAA;AACvC,EAAA,MAAM,aAAa,KAAQ,GAAA,CAAA,GAAA;AAE3B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAQ,CAAA,aAAA;AAAA,MACnB,KAAO,EAAA,EAAE,SAAW,EAAA,CAAA,WAAA,EAAc,UAAU,CAAM,GAAA,CAAA,EAAA;AAAA,MAClD,CAAA;AAAA,MACA,CAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA,KAAA;AAAA,wCAEC,GAAI,EAAA,EAAA,OAAA,EAAQ,MAAO,EAAA,aAAA,EAAc,UAAS,cAAe,EAAA,QAAA,EAAA,kBACvD,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,WAAW,OAAQ,CAAA,KAAA,EAAO,cAAY,IAC/C,EAAA,EAAA,QACH,GACC,OACH;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"BarChartLabel.esm.js","sources":["../../../src/components/BarChart/BarChartLabel.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 { PropsWithChildren } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Typography from '@material-ui/core/Typography';\nimport { useBarChartLabelStyles } from '../../utils/styles';\n\ntype BarChartLabelProps = {\n  x: number;\n  y: number;\n  height: number;\n  width: number;\n  details?: JSX.Element;\n};\n\nexport const BarChartLabel = ({\n  x,\n  y,\n  height,\n  width,\n  details,\n  children,\n}: PropsWithChildren<BarChartLabelProps>) => {\n  const classes = useBarChartLabelStyles();\n  const translateX = width * -0.5;\n\n  return (\n    <foreignObject\n      className={classes.foreignObject}\n      style={{ transform: `translateX(${translateX}px)` }}\n      x={x}\n      y={y}\n      height={height}\n      width={width}\n    >\n      <Box display=\"flex\" flexDirection=\"column\" justifyContent=\"center\">\n        <Typography className={classes.label} gutterBottom>\n          {children}\n        </Typography>\n        {details}\n      </Box>\n    </foreignObject>\n  );\n};\n"],"names":[],"mappings":";;;;;AA6BO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,CAAA;AAAA,EACA,CAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA6C,KAAA;AAC3C,EAAA,MAAM,UAAU,sBAAuB,EAAA;AACvC,EAAA,MAAM,aAAa,KAAQ,GAAA,CAAA,GAAA;AAE3B,EACE,uBAAA,GAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAQ,CAAA,aAAA;AAAA,MACnB,KAAO,EAAA,EAAE,SAAW,EAAA,CAAA,WAAA,EAAc,UAAU,CAAM,GAAA,CAAA,EAAA;AAAA,MAClD,CAAA;AAAA,MACA,CAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MAEA,+BAAC,GAAI,EAAA,EAAA,OAAA,EAAQ,QAAO,aAAc,EAAA,QAAA,EAAS,gBAAe,QACxD,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,cAAW,SAAW,EAAA,OAAA,CAAQ,KAAO,EAAA,YAAA,EAAY,MAC/C,QACH,EAAA,CAAA;AAAA,QACC;AAAA,OACH,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Box from '@material-ui/core/Box';
 import { useTheme } from '@material-ui/core/styles';
 import { LegendItem } from '../LegendItem/LegendItem.esm.js';
@@ -26,21 +26,25 @@ const BarChartLegend = (props) => {
     },
     options
   );
-  return /* @__PURE__ */ React.createElement(Box, { className: classes.legend, display: "flex", flexDirection: "row" }, /* @__PURE__ */ React.createElement(Box, { marginRight: 2 }, /* @__PURE__ */ React.createElement(
-    LegendItem,
-    {
-      title: data.previousName,
-      markerColor: options.hideMarker ? void 0 : data.previousFill
-    },
-    currencyFormatter(baseCurrency).format(costStart)
-  )), /* @__PURE__ */ React.createElement(Box, { marginRight: 2 }, /* @__PURE__ */ React.createElement(
-    LegendItem,
-    {
-      title: data.currentName,
-      markerColor: options.hideMarker ? void 0 : data.currentFill
-    },
-    currencyFormatter(baseCurrency).format(costEnd)
-  )), children);
+  return /* @__PURE__ */ jsxs(Box, { className: classes.legend, display: "flex", flexDirection: "row", children: [
+    /* @__PURE__ */ jsx(Box, { marginRight: 2, children: /* @__PURE__ */ jsx(
+      LegendItem,
+      {
+        title: data.previousName,
+        markerColor: options.hideMarker ? void 0 : data.previousFill,
+        children: currencyFormatter(baseCurrency).format(costStart)
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Box, { marginRight: 2, children: /* @__PURE__ */ jsx(
+      LegendItem,
+      {
+        title: data.currentName,
+        markerColor: options.hideMarker ? void 0 : data.currentFill,
+        children: currencyFormatter(baseCurrency).format(costEnd)
+      }
+    ) }),
+    children
+  ] });
 };
 
 export { BarChartLegend };

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

@@ -1 +1 @@
-{"version":3,"file":"BarChartLegend.esm.js","sources":["../../../src/components/BarChart/BarChartLegend.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, { PropsWithChildren } from 'react';\nimport Box from '@material-ui/core/Box';\nimport { useTheme } from '@material-ui/core/styles';\nimport { LegendItem } from '../LegendItem';\nimport { currencyFormatter } from '../../utils/formatters';\nimport { CostInsightsTheme } from '../../types';\nimport { useBarChartLayoutStyles as useStyles } from '../../utils/styles';\nimport { useConfig } from '../../hooks';\n\n/** @public */\nexport type BarChartLegendOptions = {\n  previousName: string;\n  previousFill: string;\n  currentName: string;\n  currentFill: string;\n  hideMarker?: boolean;\n};\n\n/** @public */\nexport type BarChartLegendProps = {\n  costStart: number;\n  costEnd: number;\n  options?: Partial<BarChartLegendOptions>;\n};\n\n/** @public */\nexport const BarChartLegend = (\n  props: PropsWithChildren<BarChartLegendProps>,\n) => {\n  const { costStart, costEnd, options = {}, children } = props;\n\n  const theme = useTheme<CostInsightsTheme>();\n  const classes = useStyles();\n  const { baseCurrency } = useConfig();\n\n  const data = Object.assign(\n    {\n      previousName: 'Previous',\n      previousFill: theme.palette.lightBlue,\n      currentName: 'Current',\n      currentFill: theme.palette.darkBlue,\n    },\n    options,\n  );\n\n  return (\n    <Box className={classes.legend} display=\"flex\" flexDirection=\"row\">\n      <Box marginRight={2}>\n        <LegendItem\n          title={data.previousName}\n          markerColor={options.hideMarker ? undefined : data.previousFill}\n        >\n          {currencyFormatter(baseCurrency).format(costStart)}\n        </LegendItem>\n      </Box>\n      <Box marginRight={2}>\n        <LegendItem\n          title={data.currentName}\n          markerColor={options.hideMarker ? undefined : data.currentFill}\n        >\n          {currencyFormatter(baseCurrency).format(costEnd)}\n        </LegendItem>\n      </Box>\n      {children}\n    </Box>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;;;;;;AA0Ca,MAAA,cAAA,GAAiB,CAC5B,KACG,KAAA;AACH,EAAA,MAAM,EAAE,SAAW,EAAA,OAAA,EAAS,UAAU,EAAC,EAAG,UAAa,GAAA,KAAA;AAEvD,EAAA,MAAM,QAAQ,QAA4B,EAAA;AAC1C,EAAA,MAAM,UAAUA,uBAAU,EAAA;AAC1B,EAAM,MAAA,EAAE,YAAa,EAAA,GAAI,SAAU,EAAA;AAEnC,EAAA,MAAM,OAAO,MAAO,CAAA,MAAA;AAAA,IAClB;AAAA,MACE,YAAc,EAAA,UAAA;AAAA,MACd,YAAA,EAAc,MAAM,OAAQ,CAAA,SAAA;AAAA,MAC5B,WAAa,EAAA,SAAA;AAAA,MACb,WAAA,EAAa,MAAM,OAAQ,CAAA;AAAA,KAC7B;AAAA,IACA;AAAA,GACF;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,MAAQ,EAAA,OAAA,EAAQ,MAAO,EAAA,aAAA,EAAc,KAC3D,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,WAAA,EAAa,CAChB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAO,IAAK,CAAA,YAAA;AAAA,MACZ,WAAa,EAAA,OAAA,CAAQ,UAAa,GAAA,KAAA,CAAA,GAAY,IAAK,CAAA;AAAA,KAAA;AAAA,IAElD,iBAAkB,CAAA,YAAY,CAAE,CAAA,MAAA,CAAO,SAAS;AAAA,GAErD,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,aAAa,CAChB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAO,IAAK,CAAA,WAAA;AAAA,MACZ,WAAa,EAAA,OAAA,CAAQ,UAAa,GAAA,KAAA,CAAA,GAAY,IAAK,CAAA;AAAA,KAAA;AAAA,IAElD,iBAAkB,CAAA,YAAY,CAAE,CAAA,MAAA,CAAO,OAAO;AAAA,GAEnD,GACC,QACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"BarChartLegend.esm.js","sources":["../../../src/components/BarChart/BarChartLegend.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 { PropsWithChildren } from 'react';\nimport Box from '@material-ui/core/Box';\nimport { useTheme } from '@material-ui/core/styles';\nimport { LegendItem } from '../LegendItem';\nimport { currencyFormatter } from '../../utils/formatters';\nimport { CostInsightsTheme } from '../../types';\nimport { useBarChartLayoutStyles as useStyles } from '../../utils/styles';\nimport { useConfig } from '../../hooks';\n\n/** @public */\nexport type BarChartLegendOptions = {\n  previousName: string;\n  previousFill: string;\n  currentName: string;\n  currentFill: string;\n  hideMarker?: boolean;\n};\n\n/** @public */\nexport type BarChartLegendProps = {\n  costStart: number;\n  costEnd: number;\n  options?: Partial<BarChartLegendOptions>;\n};\n\n/** @public */\nexport const BarChartLegend = (\n  props: PropsWithChildren<BarChartLegendProps>,\n) => {\n  const { costStart, costEnd, options = {}, children } = props;\n\n  const theme = useTheme<CostInsightsTheme>();\n  const classes = useStyles();\n  const { baseCurrency } = useConfig();\n\n  const data = Object.assign(\n    {\n      previousName: 'Previous',\n      previousFill: theme.palette.lightBlue,\n      currentName: 'Current',\n      currentFill: theme.palette.darkBlue,\n    },\n    options,\n  );\n\n  return (\n    <Box className={classes.legend} display=\"flex\" flexDirection=\"row\">\n      <Box marginRight={2}>\n        <LegendItem\n          title={data.previousName}\n          markerColor={options.hideMarker ? undefined : data.previousFill}\n        >\n          {currencyFormatter(baseCurrency).format(costStart)}\n        </LegendItem>\n      </Box>\n      <Box marginRight={2}>\n        <LegendItem\n          title={data.currentName}\n          markerColor={options.hideMarker ? undefined : data.currentFill}\n        >\n          {currencyFormatter(baseCurrency).format(costEnd)}\n        </LegendItem>\n      </Box>\n      {children}\n    </Box>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;;;;;;AA0Ca,MAAA,cAAA,GAAiB,CAC5B,KACG,KAAA;AACH,EAAA,MAAM,EAAE,SAAW,EAAA,OAAA,EAAS,UAAU,EAAC,EAAG,UAAa,GAAA,KAAA;AAEvD,EAAA,MAAM,QAAQ,QAA4B,EAAA;AAC1C,EAAA,MAAM,UAAUA,uBAAU,EAAA;AAC1B,EAAM,MAAA,EAAE,YAAa,EAAA,GAAI,SAAU,EAAA;AAEnC,EAAA,MAAM,OAAO,MAAO,CAAA,MAAA;AAAA,IAClB;AAAA,MACE,YAAc,EAAA,UAAA;AAAA,MACd,YAAA,EAAc,MAAM,OAAQ,CAAA,SAAA;AAAA,MAC5B,WAAa,EAAA,SAAA;AAAA,MACb,WAAA,EAAa,MAAM,OAAQ,CAAA;AAAA,KAC7B;AAAA,IACA;AAAA,GACF;AAEA,EACE,uBAAA,IAAA,CAAC,OAAI,SAAW,EAAA,OAAA,CAAQ,QAAQ,OAAQ,EAAA,MAAA,EAAO,eAAc,KAC3D,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,GAAA,EAAA,EAAI,aAAa,CAChB,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAO,IAAK,CAAA,YAAA;AAAA,QACZ,WAAa,EAAA,OAAA,CAAQ,UAAa,GAAA,KAAA,CAAA,GAAY,IAAK,CAAA,YAAA;AAAA,QAElD,QAAkB,EAAA,iBAAA,CAAA,YAAY,CAAE,CAAA,MAAA,CAAO,SAAS;AAAA;AAAA,KAErD,EAAA,CAAA;AAAA,oBACA,GAAA,CAAC,GAAI,EAAA,EAAA,WAAA,EAAa,CAChB,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAO,IAAK,CAAA,WAAA;AAAA,QACZ,WAAa,EAAA,OAAA,CAAQ,UAAa,GAAA,KAAA,CAAA,GAAY,IAAK,CAAA,WAAA;AAAA,QAElD,QAAkB,EAAA,iBAAA,CAAA,YAAY,CAAE,CAAA,MAAA,CAAO,OAAO;AAAA;AAAA,KAEnD,EAAA,CAAA;AAAA,IACC;AAAA,GACH,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { 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';
@@ -32,58 +33,60 @@ const BarChartStepper = ({
       return prevStep + offset;
     });
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     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)
-      )
-    )
+      className: classes.paper,
+      children: [
+        /* @__PURE__ */ jsx(
+          Slide,
+          {
+            direction: "right",
+            in: !disableScroll && activeStep !== 0,
+            mountOnEnter: true,
+            unmountOnExit: true,
+            children: /* @__PURE__ */ jsx(
+              BarChartStepperButton,
+              {
+                name: "back",
+                className: classes.backButton,
+                onClick: handleBack,
+                children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          BarChartSteps,
+          {
+            steps: Math.min(10, stepsRemaining),
+            activeStep: displayedStep,
+            onClick: handleClick
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Slide,
+          {
+            direction: "left",
+            in: !disableScroll && activeStep < steps - 1,
+            mountOnEnter: true,
+            unmountOnExit: true,
+            children: /* @__PURE__ */ jsx(
+              BarChartStepperButton,
+              {
+                name: "next",
+                className: classes.nextButton,
+                onClick: handleNext,
+                children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+              }
+            )
+          }
+        )
+      ]
+    }
   );
 };
 

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

@@ -1 +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":";;;;;;;;;AA+BO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,KAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAA4B,KAAA;AAC1B,EAAA,MAAM,UAAU,wBAAyB,EAAA;AACzC,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,CAAC,CAAA;AAW9C,EAAA,MAAM,OAAO,KAAQ,GAAA,EAAA;AACrB,EAAA,MAAM,cAAiB,GAAA,KAAA,GAAQ,UAAc,IAAA,IAAA,GAAO,IAAO,GAAA,KAAA;AAC3D,EAAA,MAAM,gBAAgB,UAAa,GAAA,EAAA;AAEnC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,UAAU,CAAA;AAAA,GAClB,EAAA,CAAC,UAAY,EAAA,QAAQ,CAAC,CAAA;AAEzB,EAAA,MAAM,aAAa,MAAM;AACvB,IAAc,aAAA,CAAA,CAAA,QAAA,KAAY,WAAW,CAAC,CAAA;AAAA,GACxC;AAEA,EAAA,MAAM,aAAa,MAAM;AACvB,IAAc,aAAA,CAAA,CAAA,QAAA,KAAY,WAAW,CAAC,CAAA;AAAA,GACxC;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAkB,KAAA;AACrC,IAAA,aAAA,CAAc,CAAY,QAAA,KAAA;AACxB,MAAM,MAAA,MAAA,GAAS,QAAS,QAAW,GAAA,EAAA;AACnC,MAAA,OAAO,QAAW,GAAA,MAAA;AAAA,KACnB,CAAA;AAAA,GACH;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,mBAAA;AAAA,MACZ,MAAM,EAAA,IAAA;AAAA,MACN,SAAW,EAAA,CAAA;AAAA,MACX,WAAW,OAAQ,CAAA;AAAA,KAAA;AAAA,oBAEnB,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,OAAA;AAAA,QACV,EAAA,EAAI,CAAC,aAAA,IAAiB,UAAe,KAAA,CAAA;AAAA,QACrC,YAAY,EAAA,IAAA;AAAA,QACZ,aAAa,EAAA;AAAA,OAAA;AAAA,sBAEb,KAAA,CAAA,aAAA;AAAA,QAAC,qBAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,MAAA;AAAA,UACL,WAAW,OAAQ,CAAA,UAAA;AAAA,UACnB,OAAS,EAAA;AAAA,SAAA;AAAA,4CAER,eAAgB,EAAA,IAAA;AAAA;AACnB,KACF;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA,IAAA,CAAK,GAAI,CAAA,EAAA,EAAI,cAAc,CAAA;AAAA,QAClC,UAAY,EAAA,aAAA;AAAA,QACZ,OAAS,EAAA;AAAA;AAAA,KACX;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,MAAA;AAAA,QACV,EAAI,EAAA,CAAC,aAAiB,IAAA,UAAA,GAAa,KAAQ,GAAA,CAAA;AAAA,QAC3C,YAAY,EAAA,IAAA;AAAA,QACZ,aAAa,EAAA;AAAA,OAAA;AAAA,sBAEb,KAAA,CAAA,aAAA;AAAA,QAAC,qBAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,MAAA;AAAA,UACL,WAAW,OAAQ,CAAA,UAAA;AAAA,UACnB,OAAS,EAAA;AAAA,SAAA;AAAA,4CAER,gBAAiB,EAAA,IAAA;AAAA;AACpB;AACF,GACF;AAEJ;;;;"}
+{"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 { 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":";;;;;;;;;;AA+BO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,KAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAA4B,KAAA;AAC1B,EAAA,MAAM,UAAU,wBAAyB,EAAA;AACzC,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,CAAC,CAAA;AAW9C,EAAA,MAAM,OAAO,KAAQ,GAAA,EAAA;AACrB,EAAA,MAAM,cAAiB,GAAA,KAAA,GAAQ,UAAc,IAAA,IAAA,GAAO,IAAO,GAAA,KAAA;AAC3D,EAAA,MAAM,gBAAgB,UAAa,GAAA,EAAA;AAEnC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,UAAU,CAAA;AAAA,GAClB,EAAA,CAAC,UAAY,EAAA,QAAQ,CAAC,CAAA;AAEzB,EAAA,MAAM,aAAa,MAAM;AACvB,IAAc,aAAA,CAAA,CAAA,QAAA,KAAY,WAAW,CAAC,CAAA;AAAA,GACxC;AAEA,EAAA,MAAM,aAAa,MAAM;AACvB,IAAc,aAAA,CAAA,CAAA,QAAA,KAAY,WAAW,CAAC,CAAA;AAAA,GACxC;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAkB,KAAA;AACrC,IAAA,aAAA,CAAc,CAAY,QAAA,KAAA;AACxB,MAAM,MAAA,MAAA,GAAS,QAAS,QAAW,GAAA,EAAA;AACnC,MAAA,OAAO,QAAW,GAAA,MAAA;AAAA,KACnB,CAAA;AAAA,GACH;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,mBAAA;AAAA,MACZ,MAAM,EAAA,IAAA;AAAA,MACN,SAAW,EAAA,CAAA;AAAA,MACX,WAAW,OAAQ,CAAA,KAAA;AAAA,MAEnB,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,OAAA;AAAA,YACV,EAAA,EAAI,CAAC,aAAA,IAAiB,UAAe,KAAA,CAAA;AAAA,YACrC,YAAY,EAAA,IAAA;AAAA,YACZ,aAAa,EAAA,IAAA;AAAA,YAEb,QAAA,kBAAA,GAAA;AAAA,cAAC,qBAAA;AAAA,cAAA;AAAA,gBACC,IAAK,EAAA,MAAA;AAAA,gBACL,WAAW,OAAQ,CAAA,UAAA;AAAA,gBACnB,OAAS,EAAA,UAAA;AAAA,gBAET,8BAAC,eAAgB,EAAA,EAAA;AAAA;AAAA;AACnB;AAAA,SACF;AAAA,wBACA,GAAA;AAAA,UAAC,aAAA;AAAA,UAAA;AAAA,YACC,KAAO,EAAA,IAAA,CAAK,GAAI,CAAA,EAAA,EAAI,cAAc,CAAA;AAAA,YAClC,UAAY,EAAA,aAAA;AAAA,YACZ,OAAS,EAAA;AAAA;AAAA,SACX;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,MAAA;AAAA,YACV,EAAI,EAAA,CAAC,aAAiB,IAAA,UAAA,GAAa,KAAQ,GAAA,CAAA;AAAA,YAC3C,YAAY,EAAA,IAAA;AAAA,YACZ,aAAa,EAAA,IAAA;AAAA,YAEb,QAAA,kBAAA,GAAA;AAAA,cAAC,qBAAA;AAAA,cAAA;AAAA,gBACC,IAAK,EAAA,MAAA;AAAA,gBACL,WAAW,OAAQ,CAAA,UAAA;AAAA,gBACnB,OAAS,EAAA,UAAA;AAAA,gBAET,8BAAC,gBAAiB,EAAA,EAAA;AAAA;AAAA;AACpB;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}

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

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

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

@@ -1 +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;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,UAAUA,8BAAU,EAAA;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;AAAA,OAAA;AAAA,MAEH;AAAA,KACH;AAAA;AAGN;;;;"}
+{"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 { 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;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,UAAUA,8BAAU,EAAA;AAC1B,IACE,uBAAA,GAAA;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,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import { useBarChartStepperStyles } from '../../utils/styles.esm.js';
 
@@ -12,13 +12,13 @@ const BarChartSteps = ({
     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(
+  return /* @__PURE__ */ jsx("div", { className: classes.steps, children: [...new Array(steps)].map((_, index) => /* @__PURE__ */ jsx(ButtonBase, { centerRipple: true, onClick: handleOnClick(index), children: /* @__PURE__ */ jsx(
     "div",
     {
       "data-testid": "bar-chart-step",
       className: `${classes.step} ${index === activeStep ? classes.stepActive : ""}`
     }
-  ))));
+  ) }, index)) });
 };
 
 export { BarChartSteps };

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

@@ -1 +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;AACF,CAA0B,KAAA;AACxB,EAAA,MAAM,UAAUA,wBAAU,EAAA;AAC1B,EAAA,MAAM,aACJ,GAAA,CAAC,KACD,KAAA,CAAC,KAA2D,KAAA;AAC1D,IAAA,KAAA,CAAM,cAAe,EAAA;AACrB,IAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,GACf;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;AAAA;AAAA,GAEJ,CACD,CACH,CAAA;AAEJ;;;;"}
+{"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 * as 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;AACF,CAA0B,KAAA;AACxB,EAAA,MAAM,UAAUA,wBAAU,EAAA;AAC1B,EAAA,MAAM,aACJ,GAAA,CAAC,KACD,KAAA,CAAC,KAA2D,KAAA;AAC1D,IAAA,KAAA,CAAM,cAAe,EAAA;AACrB,IAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,GACf;AAEF,EACE,uBAAA,GAAA,CAAC,SAAI,SAAW,EAAA,OAAA,CAAQ,OACrB,QAAC,EAAA,CAAA,GAAG,IAAI,KAAA,CAAM,KAAK,CAAC,EAAE,GAAI,CAAA,CAAC,CAAG,EAAA,KAAA,qBAC5B,GAAA,CAAA,UAAA,EAAA,EAAuB,cAAY,IAAC,EAAA,OAAA,EAAS,aAAc,CAAA,KAAK,CAC/D,EAAA,QAAA,kBAAA,GAAA;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;AAAA;AAAA,GACF,EAAA,EANe,KAOjB,CACD,CACH,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { BarChartLabel } from './BarChartLabel.esm.js';
 
 const BarChartTick = ({
@@ -12,16 +12,16 @@ const BarChartTick = ({
 }) => {
   const gutterWidth = 5;
   const labelWidth = width / visibleTicksCount - gutterWidth * 2;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     BarChartLabel,
     {
       x,
       y,
       height,
       width: labelWidth,
-      details
-    },
-    !payload.value ? "Unlabeled" : payload.value
+      details,
+      children: !payload.value ? "Unlabeled" : payload.value
+    }
   );
 };
 

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

@@ -1 +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;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,WAAc,GAAA,CAAA;AACpB,EAAM,MAAA,UAAA,GAAa,KAAQ,GAAA,iBAAA,GAAoB,WAAc,GAAA,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;AAAA,KAAA;AAAA,IAEC,CAAC,OAAA,CAAQ,KAAQ,GAAA,WAAA,GAAc,OAAQ,CAAA;AAAA,GAC1C;AAEJ;;;;"}
+{"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 { 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":";;;AA8BO,MAAM,eAAe,CAAC;AAAA,EAC3B,CAAA;AAAA,EACA,CAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,WAAc,GAAA,CAAA;AACpB,EAAM,MAAA,UAAA,GAAa,KAAQ,GAAA,iBAAA,GAAoB,WAAc,GAAA,CAAA;AAC7D,EACE,uBAAA,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,CAAA;AAAA,MACA,CAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAO,EAAA,UAAA;AAAA,MACP,OAAA;AAAA,MAEC,QAAC,EAAA,CAAA,OAAA,CAAQ,KAAQ,GAAA,WAAA,GAAc,OAAQ,CAAA;AAAA;AAAA,GAC1C;AAEJ;;;;"}