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

package/dist/components/CostOverviewCard/CostOverviewChart.esm.js

@@ -1,10 +1,11 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { DateTime } from 'luxon';
 import Box from '@material-ui/core/Box';
 import { useTheme } from '@material-ui/core/styles';
 import { ResponsiveContainer, ComposedChart, CartesianGrid, XAxis, YAxis, Area, Line, Tooltip } from 'recharts';
 import '../../types/Alert.esm.js';
 import { DEFAULT_DATE_FORMAT } from '../../types/DateFormat.esm.js';
+import 'react';
 import '@material-ui/core/Typography';
 import { useCostOverviewStyles } from '../../utils/styles.esm.js';
 import '@material-ui/core/Paper';
@@ -73,84 +74,96 @@ const CostOverviewChart = ({
       value: p.dataKey === data.dailyCost.dataKey ? formatGraphValueWith(Number(p.value), i, data.dailyCost.format) : formatGraphValueWith(Number(p.value), i, data.metric.format),
       fill: p.dataKey === data.dailyCost.dataKey ? theme.palette.blue : theme.palette.magenta
     }));
-    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}`)) });
   };
   const localizedTickFormatter = formatGraphValue(baseCurrency);
-  return /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column" }, /* @__PURE__ */ React.createElement(
-    CostOverviewLegend,
-    {
-      dailyCostData,
-      metric,
-      metricData
-    }
-  ), /* @__PURE__ */ React.createElement(
-    ResponsiveContainer,
-    {
-      width: responsive ? "100%" : styles.container.width,
-      height: styles.container.height,
-      className: "cost-overview-chart"
-    },
-    /* @__PURE__ */ React.createElement(ComposedChart, { margin: styles.chart.margin, data: chartData }, /* @__PURE__ */ React.createElement(CartesianGrid, { stroke: styles.cartesianGrid.stroke }), /* @__PURE__ */ React.createElement(
-      XAxis,
-      {
-        dataKey: "date",
-        domain: ["dataMin", "dataMax"],
-        tickFormatter: overviewGraphTickFormatter,
-        tickCount: 6,
-        type: "number",
-        stroke: styles.axis.fill
-      }
-    ), /* @__PURE__ */ React.createElement(
-      YAxis,
-      {
-        domain: [() => 0, "dataMax"],
-        tick: { fill: styles.axis.fill },
-        tickFormatter: localizedTickFormatter,
-        width: styles.yAxis.width,
-        yAxisId: data.dailyCost.dataKey
-      }
-    ), metric && /* @__PURE__ */ React.createElement(
-      YAxis,
-      {
-        domain: ["auto", "auto"],
-        width: styles.yAxis.width,
-        yAxisId: data.metric.dataKey,
-        tickFormatter: (value, index) => localizedTickFormatter(value, index, data.metric.format),
-        orientation: "right"
-      }
-    ), /* @__PURE__ */ React.createElement(
-      Area,
-      {
-        dataKey: data.dailyCost.dataKey,
-        isAnimationActive: false,
-        fill: theme.palette.blue,
-        fillOpacity: 0.4,
-        stroke: "none",
-        yAxisId: data.dailyCost.dataKey
-      }
-    ), !hideTrendLine && /* @__PURE__ */ React.createElement(
-      Line,
+  return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", children: [
+    /* @__PURE__ */ jsx(
+      CostOverviewLegend,
       {
-        activeDot: false,
-        dataKey: "trend",
-        dot: false,
-        isAnimationActive: false,
-        strokeWidth: 2,
-        stroke: theme.palette.blue,
-        yAxisId: data.dailyCost.dataKey
+        dailyCostData,
+        metric,
+        metricData
       }
-    ), metric && /* @__PURE__ */ React.createElement(
-      Line,
+    ),
+    /* @__PURE__ */ jsx(
+      ResponsiveContainer,
       {
-        dataKey: data.metric.dataKey,
-        dot: false,
-        isAnimationActive: false,
-        strokeWidth: 2,
-        stroke: theme.palette.magenta,
-        yAxisId: data.metric.dataKey
+        width: responsive ? "100%" : styles.container.width,
+        height: styles.container.height,
+        className: "cost-overview-chart",
+        children: /* @__PURE__ */ jsxs(ComposedChart, { margin: styles.chart.margin, data: chartData, children: [
+          /* @__PURE__ */ jsx(CartesianGrid, { stroke: styles.cartesianGrid.stroke }),
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: "date",
+              domain: ["dataMin", "dataMax"],
+              tickFormatter: overviewGraphTickFormatter,
+              tickCount: 6,
+              type: "number",
+              stroke: styles.axis.fill
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              domain: [() => 0, "dataMax"],
+              tick: { fill: styles.axis.fill },
+              tickFormatter: localizedTickFormatter,
+              width: styles.yAxis.width,
+              yAxisId: data.dailyCost.dataKey
+            }
+          ),
+          metric && /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              domain: ["auto", "auto"],
+              width: styles.yAxis.width,
+              yAxisId: data.metric.dataKey,
+              tickFormatter: (value, index) => localizedTickFormatter(value, index, data.metric.format),
+              orientation: "right"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Area,
+            {
+              dataKey: data.dailyCost.dataKey,
+              isAnimationActive: false,
+              fill: theme.palette.blue,
+              fillOpacity: 0.4,
+              stroke: "none",
+              yAxisId: data.dailyCost.dataKey
+            }
+          ),
+          !hideTrendLine && /* @__PURE__ */ jsx(
+            Line,
+            {
+              activeDot: false,
+              dataKey: "trend",
+              dot: false,
+              isAnimationActive: false,
+              strokeWidth: 2,
+              stroke: theme.palette.blue,
+              yAxisId: data.dailyCost.dataKey
+            }
+          ),
+          metric && /* @__PURE__ */ jsx(
+            Line,
+            {
+              dataKey: data.metric.dataKey,
+              dot: false,
+              isAnimationActive: false,
+              strokeWidth: 2,
+              stroke: theme.palette.magenta,
+              yAxisId: data.metric.dataKey
+            }
+          ),
+          /* @__PURE__ */ jsx(Tooltip, { content: tooltipRenderer, animationDuration: 100 })
+        ] })
       }
-    ), /* @__PURE__ */ React.createElement(Tooltip, { content: tooltipRenderer, animationDuration: 100 }))
-  ));
+    )
+  ] });
 };
 
 export { CostOverviewChart };

package/dist/components/CostOverviewCard/CostOverviewChart.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CostOverviewChart.esm.js","sources":["../../../src/components/CostOverviewCard/CostOverviewChart.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 from 'react';\nimport { DateTime } from 'luxon';\nimport Box from '@material-ui/core/Box';\nimport { useTheme } from '@material-ui/core/styles';\nimport {\n  ComposedChart,\n  XAxis,\n  YAxis,\n  Tooltip as RechartsTooltip,\n  CartesianGrid,\n  Area,\n  Line,\n  ResponsiveContainer,\n} from 'recharts';\nimport { ChartData, DEFAULT_DATE_FORMAT, CostInsightsTheme } from '../../types';\nimport {\n  Cost,\n  Maybe,\n  Metric,\n  MetricData,\n} from '@backstage-community/plugin-cost-insights-common';\nimport {\n  BarChartTooltip as Tooltip,\n  BarChartTooltipItem as TooltipItem,\n} from '../BarChart';\nimport {\n  overviewGraphTickFormatter,\n  formatGraphValue,\n  isInvalid,\n} from '../../utils/graphs';\nimport { useCostOverviewStyles as useStyles } from '../../utils/styles';\nimport { groupByDate, trendFrom } from '../../utils/charts';\nimport { aggregationSort } from '../../utils/sort';\nimport { CostOverviewLegend } from './CostOverviewLegend';\nimport { TooltipRenderer } from '../../types';\nimport { useConfig } from '../../hooks';\n\ntype CostOverviewChartProps = {\n  metric: Maybe<Metric>;\n  metricData: Maybe<MetricData>;\n  dailyCostData: Cost;\n  responsive?: boolean;\n};\n\nexport const CostOverviewChart = ({\n  dailyCostData,\n  metric,\n  metricData,\n  responsive = true,\n}: CostOverviewChartProps) => {\n  const theme = useTheme<CostInsightsTheme>();\n  const styles = useStyles(theme);\n  const { baseCurrency, hideTrendLine } = useConfig();\n\n  const data = {\n    dailyCost: {\n      dataKey: 'dailyCost',\n      name: `Daily Cost`,\n      format: 'currency',\n      data: dailyCostData,\n    },\n    metric: {\n      dataKey: metric?.kind ?? 'Unknown',\n      name: metric?.name ?? 'Unknown',\n      format: metricData?.format ?? 'number',\n      data: metricData,\n    },\n  };\n\n  const metricsByDate = data.metric.data\n    ? data.metric.data.aggregation.reduce(groupByDate, {})\n    : {};\n\n  const chartData: ChartData[] = data.dailyCost.data.aggregation\n    .slice()\n    .sort(aggregationSort)\n    .map(entry => ({\n      date: Date.parse(entry.date),\n      trend: trendFrom(data.dailyCost.data.trendline!, Date.parse(entry.date)),\n      dailyCost: entry.amount,\n      ...(metric && data.metric.data\n        ? { [data.metric.dataKey]: metricsByDate[`${entry.date}`] }\n        : {}),\n    }));\n\n  const tooltipRenderer: TooltipRenderer = ({ label, payload = [] }) => {\n    if (isInvalid({ label, payload })) return null;\n\n    const dataKeys = [data.dailyCost.dataKey, data.metric.dataKey];\n    const date =\n      typeof label === 'number'\n        ? DateTime.fromMillis(label)\n        : DateTime.fromISO(label!);\n    const title = date.toUTC().toFormat(DEFAULT_DATE_FORMAT);\n    const formatGraphValueWith = formatGraphValue(baseCurrency);\n    const items = payload\n      .filter(p => dataKeys.includes(p.dataKey as string))\n      .map((p, i) => ({\n        label:\n          p.dataKey === data.dailyCost.dataKey\n            ? data.dailyCost.name\n            : data.metric.name,\n        value:\n          p.dataKey === data.dailyCost.dataKey\n            ? formatGraphValueWith(Number(p.value), i, data.dailyCost.format)\n            : formatGraphValueWith(Number(p.value), i, data.metric.format),\n        fill:\n          p.dataKey === data.dailyCost.dataKey\n            ? theme.palette.blue\n            : theme.palette.magenta,\n      }));\n\n    return (\n      <Tooltip title={title}>\n        {items.map((item, index) => (\n          <TooltipItem key={`${item.label}-${index}`} item={item} />\n        ))}\n      </Tooltip>\n    );\n  };\n\n  const localizedTickFormatter = formatGraphValue(baseCurrency);\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\">\n      <CostOverviewLegend\n        dailyCostData={dailyCostData}\n        metric={metric}\n        metricData={metricData}\n      />\n      <ResponsiveContainer\n        width={responsive ? '100%' : styles.container.width}\n        height={styles.container.height}\n        className=\"cost-overview-chart\"\n      >\n        <ComposedChart margin={styles.chart.margin} data={chartData}>\n          <CartesianGrid stroke={styles.cartesianGrid.stroke} />\n          <XAxis\n            dataKey=\"date\"\n            domain={['dataMin', 'dataMax']}\n            tickFormatter={overviewGraphTickFormatter}\n            tickCount={6}\n            type=\"number\"\n            stroke={styles.axis.fill}\n          />\n          <YAxis\n            domain={[() => 0, 'dataMax']}\n            tick={{ fill: styles.axis.fill }}\n            tickFormatter={localizedTickFormatter}\n            width={styles.yAxis.width}\n            yAxisId={data.dailyCost.dataKey}\n          />\n          {metric && (\n            <YAxis\n              domain={['auto', 'auto']}\n              width={styles.yAxis.width}\n              yAxisId={data.metric.dataKey}\n              tickFormatter={(value: any, index: number) =>\n                localizedTickFormatter(value, index, data.metric.format)\n              }\n              orientation=\"right\"\n            />\n          )}\n          <Area\n            dataKey={data.dailyCost.dataKey}\n            isAnimationActive={false}\n            fill={theme.palette.blue}\n            fillOpacity={0.4}\n            stroke=\"none\"\n            yAxisId={data.dailyCost.dataKey}\n          />\n          {!hideTrendLine && (\n            <Line\n              activeDot={false}\n              dataKey=\"trend\"\n              dot={false}\n              isAnimationActive={false}\n              strokeWidth={2}\n              stroke={theme.palette.blue}\n              yAxisId={data.dailyCost.dataKey}\n            />\n          )}\n          {metric && (\n            <Line\n              dataKey={data.metric.dataKey}\n              dot={false}\n              isAnimationActive={false}\n              strokeWidth={2}\n              stroke={theme.palette.magenta}\n              yAxisId={data.metric.dataKey}\n            />\n          )}\n          <RechartsTooltip content={tooltipRenderer} animationDuration={100} />\n        </ComposedChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n};\n"],"names":["useStyles","Tooltip","TooltipItem","RechartsTooltip"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DO,MAAM,oBAAoB,CAAC;AAAA,EAChC,aAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAa,GAAA;AACf,CAA8B,KAAA;AAC5B,EAAA,MAAM,QAAQ,QAA4B,EAAA;AAC1C,EAAM,MAAA,MAAA,GAASA,sBAAU,KAAK,CAAA;AAC9B,EAAA,MAAM,EAAE,YAAA,EAAc,aAAc,EAAA,GAAI,SAAU,EAAA;AAElD,EAAA,MAAM,IAAO,GAAA;AAAA,IACX,SAAW,EAAA;AAAA,MACT,OAAS,EAAA,WAAA;AAAA,MACT,IAAM,EAAA,CAAA,UAAA,CAAA;AAAA,MACN,MAAQ,EAAA,UAAA;AAAA,MACR,IAAM,EAAA;AAAA,KACR;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,OAAA,EAAS,QAAQ,IAAQ,IAAA,SAAA;AAAA,MACzB,IAAA,EAAM,QAAQ,IAAQ,IAAA,SAAA;AAAA,MACtB,MAAA,EAAQ,YAAY,MAAU,IAAA,QAAA;AAAA,MAC9B,IAAM,EAAA;AAAA;AACR,GACF;AAEA,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,IAAA,GAC9B,IAAK,CAAA,MAAA,CAAO,IAAK,CAAA,WAAA,CAAY,MAAO,CAAA,WAAA,EAAa,EAAE,IACnD,EAAC;AAEL,EAAM,MAAA,SAAA,GAAyB,IAAK,CAAA,SAAA,CAAU,IAAK,CAAA,WAAA,CAChD,KAAM,EAAA,CACN,IAAK,CAAA,eAAe,CACpB,CAAA,GAAA,CAAI,CAAU,KAAA,MAAA;AAAA,IACb,IAAM,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,CAAM,IAAI,CAAA;AAAA,IAC3B,KAAA,EAAO,SAAU,CAAA,IAAA,CAAK,SAAU,CAAA,IAAA,CAAK,WAAY,IAAK,CAAA,KAAA,CAAM,KAAM,CAAA,IAAI,CAAC,CAAA;AAAA,IACvE,WAAW,KAAM,CAAA,MAAA;AAAA,IACjB,GAAI,MAAU,IAAA,IAAA,CAAK,OAAO,IACtB,GAAA,EAAE,CAAC,IAAK,CAAA,MAAA,CAAO,OAAO,GAAG,cAAc,CAAG,EAAA,KAAA,CAAM,IAAI,CAAE,CAAA,CAAA,KACtD;AAAC,GACL,CAAA,CAAA;AAEJ,EAAA,MAAM,kBAAmC,CAAC,EAAE,OAAO,OAAU,GAAA,IAAS,KAAA;AACpE,IAAA,IAAI,UAAU,EAAE,KAAA,EAAO,OAAQ,EAAC,GAAU,OAAA,IAAA;AAE1C,IAAA,MAAM,WAAW,CAAC,IAAA,CAAK,UAAU,OAAS,EAAA,IAAA,CAAK,OAAO,OAAO,CAAA;AAC7D,IAAM,MAAA,IAAA,GACJ,OAAO,KAAA,KAAU,QACb,GAAA,QAAA,CAAS,WAAW,KAAK,CAAA,GACzB,QAAS,CAAA,OAAA,CAAQ,KAAM,CAAA;AAC7B,IAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,KAAM,EAAA,CAAE,SAAS,mBAAmB,CAAA;AACvD,IAAM,MAAA,oBAAA,GAAuB,iBAAiB,YAAY,CAAA;AAC1D,IAAA,MAAM,KAAQ,GAAA,OAAA,CACX,MAAO,CAAA,CAAA,CAAA,KAAK,QAAS,CAAA,QAAA,CAAS,CAAE,CAAA,OAAiB,CAAC,CAAA,CAClD,GAAI,CAAA,CAAC,GAAG,CAAO,MAAA;AAAA,MACd,KAAA,EACE,CAAE,CAAA,OAAA,KAAY,IAAK,CAAA,SAAA,CAAU,UACzB,IAAK,CAAA,SAAA,CAAU,IACf,GAAA,IAAA,CAAK,MAAO,CAAA,IAAA;AAAA,MAClB,KAAA,EACE,CAAE,CAAA,OAAA,KAAY,IAAK,CAAA,SAAA,CAAU,UACzB,oBAAqB,CAAA,MAAA,CAAO,CAAE,CAAA,KAAK,CAAG,EAAA,CAAA,EAAG,KAAK,SAAU,CAAA,MAAM,CAC9D,GAAA,oBAAA,CAAqB,MAAO,CAAA,CAAA,CAAE,KAAK,CAAG,EAAA,CAAA,EAAG,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA,MACjE,IAAA,EACE,CAAE,CAAA,OAAA,KAAY,IAAK,CAAA,SAAA,CAAU,UACzB,KAAM,CAAA,OAAA,CAAQ,IACd,GAAA,KAAA,CAAM,OAAQ,CAAA;AAAA,KACpB,CAAA,CAAA;AAEJ,IAAA,2CACGC,eAAQ,EAAA,EAAA,KAAA,EAAA,EACN,MAAM,GAAI,CAAA,CAAC,MAAM,KAChB,qBAAA,KAAA,CAAA,aAAA,CAACC,uBAAY,GAAK,EAAA,CAAA,EAAG,KAAK,KAAK,CAAA,CAAA,EAAI,KAAK,CAAI,CAAA,EAAA,IAAA,EAAY,CACzD,CACH,CAAA;AAAA,GAEJ;AAEA,EAAM,MAAA,sBAAA,GAAyB,iBAAiB,YAAY,CAAA;AAE5D,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,OAAQ,EAAA,MAAA,EAAO,eAAc,QAChC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACC,aAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA;AAAA,GAEF,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,UAAA,GAAa,MAAS,GAAA,MAAA,CAAO,SAAU,CAAA,KAAA;AAAA,MAC9C,MAAA,EAAQ,OAAO,SAAU,CAAA,MAAA;AAAA,MACzB,SAAU,EAAA;AAAA,KAAA;AAAA,oBAET,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA,EAAc,MAAQ,EAAA,MAAA,CAAO,MAAM,MAAQ,EAAA,IAAA,EAAM,SAChD,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,aAAc,EAAA,EAAA,MAAA,EAAQ,MAAO,CAAA,aAAA,CAAc,QAAQ,CACpD,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,MAAA;AAAA,QACR,MAAA,EAAQ,CAAC,SAAA,EAAW,SAAS,CAAA;AAAA,QAC7B,aAAe,EAAA,0BAAA;AAAA,QACf,SAAW,EAAA,CAAA;AAAA,QACX,IAAK,EAAA,QAAA;AAAA,QACL,MAAA,EAAQ,OAAO,IAAK,CAAA;AAAA;AAAA,KAEtB,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,MAAQ,EAAA,CAAC,MAAM,CAAA,EAAG,SAAS,CAAA;AAAA,QAC3B,IAAM,EAAA,EAAE,IAAM,EAAA,MAAA,CAAO,KAAK,IAAK,EAAA;AAAA,QAC/B,aAAe,EAAA,sBAAA;AAAA,QACf,KAAA,EAAO,OAAO,KAAM,CAAA,KAAA;AAAA,QACpB,OAAA,EAAS,KAAK,SAAU,CAAA;AAAA;AAAA,OAEzB,MACC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAQ,CAAC,MAAA,EAAQ,MAAM,CAAA;AAAA,QACvB,KAAA,EAAO,OAAO,KAAM,CAAA,KAAA;AAAA,QACpB,OAAA,EAAS,KAAK,MAAO,CAAA,OAAA;AAAA,QACrB,aAAA,EAAe,CAAC,KAAY,EAAA,KAAA,KAC1B,uBAAuB,KAAO,EAAA,KAAA,EAAO,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA,QAEzD,WAAY,EAAA;AAAA;AAAA,KAGhB,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,KAAK,SAAU,CAAA,OAAA;AAAA,QACxB,iBAAmB,EAAA,KAAA;AAAA,QACnB,IAAA,EAAM,MAAM,OAAQ,CAAA,IAAA;AAAA,QACpB,WAAa,EAAA,GAAA;AAAA,QACb,MAAO,EAAA,MAAA;AAAA,QACP,OAAA,EAAS,KAAK,SAAU,CAAA;AAAA;AAAA,KAC1B,EACC,CAAC,aACA,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,KAAA;AAAA,QACX,OAAQ,EAAA,OAAA;AAAA,QACR,GAAK,EAAA,KAAA;AAAA,QACL,iBAAmB,EAAA,KAAA;AAAA,QACnB,WAAa,EAAA,CAAA;AAAA,QACb,MAAA,EAAQ,MAAM,OAAQ,CAAA,IAAA;AAAA,QACtB,OAAA,EAAS,KAAK,SAAU,CAAA;AAAA;AAAA,OAG3B,MACC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,KAAK,MAAO,CAAA,OAAA;AAAA,QACrB,GAAK,EAAA,KAAA;AAAA,QACL,iBAAmB,EAAA,KAAA;AAAA,QACnB,WAAa,EAAA,CAAA;AAAA,QACb,MAAA,EAAQ,MAAM,OAAQ,CAAA,OAAA;AAAA,QACtB,OAAA,EAAS,KAAK,MAAO,CAAA;AAAA;AAAA,uBAGxB,KAAA,CAAA,aAAA,CAAAC,OAAA,EAAA,EAAgB,SAAS,eAAiB,EAAA,iBAAA,EAAmB,KAAK,CACrE;AAAA,GAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CostOverviewChart.esm.js","sources":["../../../src/components/CostOverviewCard/CostOverviewChart.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 { DateTime } from 'luxon';\nimport Box from '@material-ui/core/Box';\nimport { useTheme } from '@material-ui/core/styles';\nimport {\n  ComposedChart,\n  XAxis,\n  YAxis,\n  Tooltip as RechartsTooltip,\n  CartesianGrid,\n  Area,\n  Line,\n  ResponsiveContainer,\n} from 'recharts';\nimport { ChartData, DEFAULT_DATE_FORMAT, CostInsightsTheme } from '../../types';\nimport {\n  Cost,\n  Maybe,\n  Metric,\n  MetricData,\n} from '@backstage-community/plugin-cost-insights-common';\nimport {\n  BarChartTooltip as Tooltip,\n  BarChartTooltipItem as TooltipItem,\n} from '../BarChart';\nimport {\n  overviewGraphTickFormatter,\n  formatGraphValue,\n  isInvalid,\n} from '../../utils/graphs';\nimport { useCostOverviewStyles as useStyles } from '../../utils/styles';\nimport { groupByDate, trendFrom } from '../../utils/charts';\nimport { aggregationSort } from '../../utils/sort';\nimport { CostOverviewLegend } from './CostOverviewLegend';\nimport { TooltipRenderer } from '../../types';\nimport { useConfig } from '../../hooks';\n\ntype CostOverviewChartProps = {\n  metric: Maybe<Metric>;\n  metricData: Maybe<MetricData>;\n  dailyCostData: Cost;\n  responsive?: boolean;\n};\n\nexport const CostOverviewChart = ({\n  dailyCostData,\n  metric,\n  metricData,\n  responsive = true,\n}: CostOverviewChartProps) => {\n  const theme = useTheme<CostInsightsTheme>();\n  const styles = useStyles(theme);\n  const { baseCurrency, hideTrendLine } = useConfig();\n\n  const data = {\n    dailyCost: {\n      dataKey: 'dailyCost',\n      name: `Daily Cost`,\n      format: 'currency',\n      data: dailyCostData,\n    },\n    metric: {\n      dataKey: metric?.kind ?? 'Unknown',\n      name: metric?.name ?? 'Unknown',\n      format: metricData?.format ?? 'number',\n      data: metricData,\n    },\n  };\n\n  const metricsByDate = data.metric.data\n    ? data.metric.data.aggregation.reduce(groupByDate, {})\n    : {};\n\n  const chartData: ChartData[] = data.dailyCost.data.aggregation\n    .slice()\n    .sort(aggregationSort)\n    .map(entry => ({\n      date: Date.parse(entry.date),\n      trend: trendFrom(data.dailyCost.data.trendline!, Date.parse(entry.date)),\n      dailyCost: entry.amount,\n      ...(metric && data.metric.data\n        ? { [data.metric.dataKey]: metricsByDate[`${entry.date}`] }\n        : {}),\n    }));\n\n  const tooltipRenderer: TooltipRenderer = ({ label, payload = [] }) => {\n    if (isInvalid({ label, payload })) return null;\n\n    const dataKeys = [data.dailyCost.dataKey, data.metric.dataKey];\n    const date =\n      typeof label === 'number'\n        ? DateTime.fromMillis(label)\n        : DateTime.fromISO(label!);\n    const title = date.toUTC().toFormat(DEFAULT_DATE_FORMAT);\n    const formatGraphValueWith = formatGraphValue(baseCurrency);\n    const items = payload\n      .filter(p => dataKeys.includes(p.dataKey as string))\n      .map((p, i) => ({\n        label:\n          p.dataKey === data.dailyCost.dataKey\n            ? data.dailyCost.name\n            : data.metric.name,\n        value:\n          p.dataKey === data.dailyCost.dataKey\n            ? formatGraphValueWith(Number(p.value), i, data.dailyCost.format)\n            : formatGraphValueWith(Number(p.value), i, data.metric.format),\n        fill:\n          p.dataKey === data.dailyCost.dataKey\n            ? theme.palette.blue\n            : theme.palette.magenta,\n      }));\n\n    return (\n      <Tooltip title={title}>\n        {items.map((item, index) => (\n          <TooltipItem key={`${item.label}-${index}`} item={item} />\n        ))}\n      </Tooltip>\n    );\n  };\n\n  const localizedTickFormatter = formatGraphValue(baseCurrency);\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\">\n      <CostOverviewLegend\n        dailyCostData={dailyCostData}\n        metric={metric}\n        metricData={metricData}\n      />\n      <ResponsiveContainer\n        width={responsive ? '100%' : styles.container.width}\n        height={styles.container.height}\n        className=\"cost-overview-chart\"\n      >\n        <ComposedChart margin={styles.chart.margin} data={chartData}>\n          <CartesianGrid stroke={styles.cartesianGrid.stroke} />\n          <XAxis\n            dataKey=\"date\"\n            domain={['dataMin', 'dataMax']}\n            tickFormatter={overviewGraphTickFormatter}\n            tickCount={6}\n            type=\"number\"\n            stroke={styles.axis.fill}\n          />\n          <YAxis\n            domain={[() => 0, 'dataMax']}\n            tick={{ fill: styles.axis.fill }}\n            tickFormatter={localizedTickFormatter}\n            width={styles.yAxis.width}\n            yAxisId={data.dailyCost.dataKey}\n          />\n          {metric && (\n            <YAxis\n              domain={['auto', 'auto']}\n              width={styles.yAxis.width}\n              yAxisId={data.metric.dataKey}\n              tickFormatter={(value: any, index: number) =>\n                localizedTickFormatter(value, index, data.metric.format)\n              }\n              orientation=\"right\"\n            />\n          )}\n          <Area\n            dataKey={data.dailyCost.dataKey}\n            isAnimationActive={false}\n            fill={theme.palette.blue}\n            fillOpacity={0.4}\n            stroke=\"none\"\n            yAxisId={data.dailyCost.dataKey}\n          />\n          {!hideTrendLine && (\n            <Line\n              activeDot={false}\n              dataKey=\"trend\"\n              dot={false}\n              isAnimationActive={false}\n              strokeWidth={2}\n              stroke={theme.palette.blue}\n              yAxisId={data.dailyCost.dataKey}\n            />\n          )}\n          {metric && (\n            <Line\n              dataKey={data.metric.dataKey}\n              dot={false}\n              isAnimationActive={false}\n              strokeWidth={2}\n              stroke={theme.palette.magenta}\n              yAxisId={data.metric.dataKey}\n            />\n          )}\n          <RechartsTooltip content={tooltipRenderer} animationDuration={100} />\n        </ComposedChart>\n      </ResponsiveContainer>\n    </Box>\n  );\n};\n"],"names":["useStyles","Tooltip","TooltipItem","RechartsTooltip"],"mappings":"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"}

package/dist/components/CostOverviewCard/CostOverviewHeader.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 Typography from '@material-ui/core/Typography';
 
@@ -6,7 +6,7 @@ const CostOverviewHeader = ({
   title,
   subtitle,
   children
-}) => /* @__PURE__ */ React.createElement(
+}) => /* @__PURE__ */ jsxs(
   Box,
   {
     mt: 2,
@@ -15,10 +15,15 @@ const CostOverviewHeader = ({
     display: "flex",
     flexDirection: "row",
     justifyContent: "space-between",
-    alignItems: "center"
-  },
-  /* @__PURE__ */ React.createElement(Box, { minHeight: 40, paddingRight: 5 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5", gutterBottom: true }, title), !!subtitle && /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2", color: "textSecondary", component: "div" }, subtitle)),
-  /* @__PURE__ */ React.createElement(Box, { minHeight: 40, maxHeight: 60, display: "flex" }, children)
+    alignItems: "center",
+    children: [
+      /* @__PURE__ */ jsxs(Box, { minHeight: 40, paddingRight: 5, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", gutterBottom: true, children: title }),
+        !!subtitle && /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", color: "textSecondary", component: "div", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsx(Box, { minHeight: 40, maxHeight: 60, display: "flex", children })
+    ]
+  }
 );
 
 export { CostOverviewHeader };

package/dist/components/CostOverviewCard/CostOverviewHeader.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CostOverviewHeader.esm.js","sources":["../../../src/components/CostOverviewCard/CostOverviewHeader.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 Box from '@material-ui/core/Box';\nimport Typography from '@material-ui/core/Typography';\n\ntype CostOverviewHeaderProps = {\n  title: string;\n  subtitle?: string;\n};\n\nexport const CostOverviewHeader = ({\n  title,\n  subtitle,\n  children,\n}: PropsWithChildren<CostOverviewHeaderProps>) => (\n  <Box\n    mt={2}\n    ml={1}\n    mb={1}\n    display=\"flex\"\n    flexDirection=\"row\"\n    justifyContent=\"space-between\"\n    alignItems=\"center\"\n  >\n    <Box minHeight={40} paddingRight={5}>\n      <Typography variant=\"h5\" gutterBottom>\n        {title}\n      </Typography>\n      {!!subtitle && (\n        <Typography variant=\"subtitle2\" color=\"textSecondary\" component=\"div\">\n          {subtitle}\n        </Typography>\n      )}\n    </Box>\n    <Box minHeight={40} maxHeight={60} display=\"flex\">\n      {children}\n    </Box>\n  </Box>\n);\n"],"names":[],"mappings":";;;;AAwBO,MAAM,qBAAqB,CAAC;AAAA,EACjC,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CACE,qBAAA,KAAA,CAAA,aAAA;AAAA,EAAC,GAAA;AAAA,EAAA;AAAA,IACC,EAAI,EAAA,CAAA;AAAA,IACJ,EAAI,EAAA,CAAA;AAAA,IACJ,EAAI,EAAA,CAAA;AAAA,IACJ,OAAQ,EAAA,MAAA;AAAA,IACR,aAAc,EAAA,KAAA;AAAA,IACd,cAAe,EAAA,eAAA;AAAA,IACf,UAAW,EAAA;AAAA,GAAA;AAAA,kBAEX,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,SAAA,EAAW,EAAI,EAAA,YAAA,EAAc,CAChC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,IAAK,EAAA,YAAA,EAAY,IAClC,EAAA,EAAA,KACH,GACC,CAAC,CAAC,QACD,oBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,WAAY,EAAA,KAAA,EAAM,eAAgB,EAAA,SAAA,EAAU,KAC7D,EAAA,EAAA,QACH,CAEJ,CAAA;AAAA,kBACA,KAAA,CAAA,aAAA,CAAC,OAAI,SAAW,EAAA,EAAA,EAAI,WAAW,EAAI,EAAA,OAAA,EAAQ,UACxC,QACH;AACF;;;;"}
+{"version":3,"file":"CostOverviewHeader.esm.js","sources":["../../../src/components/CostOverviewCard/CostOverviewHeader.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 { PropsWithChildren } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Typography from '@material-ui/core/Typography';\n\ntype CostOverviewHeaderProps = {\n  title: string;\n  subtitle?: string;\n};\n\nexport const CostOverviewHeader = ({\n  title,\n  subtitle,\n  children,\n}: PropsWithChildren<CostOverviewHeaderProps>) => (\n  <Box\n    mt={2}\n    ml={1}\n    mb={1}\n    display=\"flex\"\n    flexDirection=\"row\"\n    justifyContent=\"space-between\"\n    alignItems=\"center\"\n  >\n    <Box minHeight={40} paddingRight={5}>\n      <Typography variant=\"h5\" gutterBottom>\n        {title}\n      </Typography>\n      {!!subtitle && (\n        <Typography variant=\"subtitle2\" color=\"textSecondary\" component=\"div\">\n          {subtitle}\n        </Typography>\n      )}\n    </Box>\n    <Box minHeight={40} maxHeight={60} display=\"flex\">\n      {children}\n    </Box>\n  </Box>\n);\n"],"names":[],"mappings":";;;;AAwBO,MAAM,qBAAqB,CAAC;AAAA,EACjC,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CACE,qBAAA,IAAA;AAAA,EAAC,GAAA;AAAA,EAAA;AAAA,IACC,EAAI,EAAA,CAAA;AAAA,IACJ,EAAI,EAAA,CAAA;AAAA,IACJ,EAAI,EAAA,CAAA;AAAA,IACJ,OAAQ,EAAA,MAAA;AAAA,IACR,aAAc,EAAA,KAAA;AAAA,IACd,cAAe,EAAA,eAAA;AAAA,IACf,UAAW,EAAA,QAAA;AAAA,IAEX,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,GAAI,EAAA,EAAA,SAAA,EAAW,EAAI,EAAA,YAAA,EAAc,CAChC,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,IAAK,EAAA,YAAA,EAAY,MAClC,QACH,EAAA,KAAA,EAAA,CAAA;AAAA,QACC,CAAC,CAAC,QAAA,oBACA,GAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,WAAA,EAAY,KAAM,EAAA,eAAA,EAAgB,SAAU,EAAA,KAAA,EAC7D,QACH,EAAA,QAAA,EAAA;AAAA,OAEJ,EAAA,CAAA;AAAA,sBACA,GAAA,CAAC,OAAI,SAAW,EAAA,EAAA,EAAI,WAAW,EAAI,EAAA,OAAA,EAAQ,QACxC,QACH,EAAA;AAAA;AAAA;AACF;;;;"}

package/dist/components/CostOverviewCard/CostOverviewLegend.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx, Fragment } 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';
@@ -34,20 +34,26 @@ const CostOverviewLegend = ({
     duration,
     lastCompleteBillingDate
   ) : null;
-  return /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "row" }, dailyCostData.change && /* @__PURE__ */ React.createElement(Box, { mr: 2 }, /* @__PURE__ */ React.createElement(LegendItem, { title: "Cost Trend", markerColor: theme.palette.blue }, formatChange(dailyCostData.change))), metricData && metric && comparedChange && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { mr: 2 }, /* @__PURE__ */ React.createElement(
-    LegendItem,
-    {
-      title: `${metric.name} Trend`,
-      markerColor: theme.palette.magenta
-    },
-    formatChange(metricData.change)
-  )), /* @__PURE__ */ React.createElement(
-    LegendItem,
-    {
-      title: choose(["Your Savings", "Your Excess"], comparedChange)
-    },
-    /* @__PURE__ */ React.createElement(CostGrowth, { change: comparedChange, duration })
-  )));
+  return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "row", children: [
+    dailyCostData.change && /* @__PURE__ */ jsx(Box, { mr: 2, children: /* @__PURE__ */ jsx(LegendItem, { title: "Cost Trend", markerColor: theme.palette.blue, children: formatChange(dailyCostData.change) }) }),
+    metricData && metric && comparedChange && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Box, { mr: 2, children: /* @__PURE__ */ jsx(
+        LegendItem,
+        {
+          title: `${metric.name} Trend`,
+          markerColor: theme.palette.magenta,
+          children: formatChange(metricData.change)
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        LegendItem,
+        {
+          title: choose(["Your Savings", "Your Excess"], comparedChange),
+          children: /* @__PURE__ */ jsx(CostGrowth, { change: comparedChange, duration })
+        }
+      )
+    ] })
+  ] });
 };
 
 export { CostOverviewLegend };

package/dist/components/CostOverviewCard/CostOverviewLegend.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CostOverviewLegend.esm.js","sources":["../../../src/components/CostOverviewCard/CostOverviewLegend.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 { CostInsightsTheme } from '../../types';\nimport {\n  MetricData,\n  Maybe,\n  Cost,\n  Metric,\n} from '@backstage-community/plugin-cost-insights-common';\nimport { useLastCompleteBillingDate, useFilters } from '../../hooks';\nimport { getComparedChange, choose } from '../../utils/change';\nimport { mapFiltersToProps } from './selector';\nimport { formatChange } from '../../utils/formatters';\nimport { CostGrowth } from '../CostGrowth';\n\ntype CostOverviewLegendProps = {\n  metric: Maybe<Metric>;\n  metricData: Maybe<MetricData>;\n  dailyCostData: Cost;\n};\n\nexport const CostOverviewLegend = ({\n  dailyCostData,\n  metric,\n  metricData,\n}: PropsWithChildren<CostOverviewLegendProps>) => {\n  const theme = useTheme<CostInsightsTheme>();\n  const { duration } = useFilters(mapFiltersToProps);\n  const lastCompleteBillingDate = useLastCompleteBillingDate();\n\n  const comparedChange = metricData\n    ? getComparedChange(\n        dailyCostData,\n        metricData,\n        duration,\n        lastCompleteBillingDate,\n      )\n    : null;\n\n  return (\n    <Box display=\"flex\" flexDirection=\"row\">\n      {dailyCostData.change && (\n        <Box mr={2}>\n          <LegendItem title=\"Cost Trend\" markerColor={theme.palette.blue}>\n            {formatChange(dailyCostData.change)}\n          </LegendItem>\n        </Box>\n      )}\n      {metricData && metric && comparedChange && (\n        <>\n          <Box mr={2}>\n            <LegendItem\n              title={`${metric.name} Trend`}\n              markerColor={theme.palette.magenta}\n            >\n              {formatChange(metricData.change)}\n            </LegendItem>\n          </Box>\n          <LegendItem\n            title={choose(['Your Savings', 'Your Excess'], comparedChange)}\n          >\n            <CostGrowth change={comparedChange} duration={duration} />\n          </LegendItem>\n        </>\n      )}\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuCO,MAAM,qBAAqB,CAAC;AAAA,EACjC,aAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAkD,KAAA;AAChD,EAAA,MAAM,QAAQ,QAA4B,EAAA;AAC1C,EAAA,MAAM,EAAE,QAAA,EAAa,GAAA,UAAA,CAAW,iBAAiB,CAAA;AACjD,EAAA,MAAM,0BAA0B,0BAA2B,EAAA;AAE3D,EAAA,MAAM,iBAAiB,UACnB,GAAA,iBAAA;AAAA,IACE,aAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GAEF,GAAA,IAAA;AAEJ,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,OAAQ,EAAA,MAAA,EAAO,eAAc,KAC/B,EAAA,EAAA,aAAA,CAAc,MACb,oBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,CACP,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,KAAM,EAAA,YAAA,EAAa,WAAa,EAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,EAAA,EACvD,YAAa,CAAA,aAAA,CAAc,MAAM,CACpC,CACF,CAED,EAAA,UAAA,IAAc,UAAU,cACvB,oBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,IAAI,CACP,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAG,EAAA,MAAA,CAAO,IAAI,CAAA,MAAA,CAAA;AAAA,MACrB,WAAA,EAAa,MAAM,OAAQ,CAAA;AAAA,KAAA;AAAA,IAE1B,YAAA,CAAa,WAAW,MAAM;AAAA,GAEnC,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAO,MAAO,CAAA,CAAC,cAAgB,EAAA,aAAa,GAAG,cAAc;AAAA,KAAA;AAAA,oBAE5D,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,MAAQ,EAAA,cAAA,EAAgB,QAAoB,EAAA;AAAA,GAE5D,CAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CostOverviewLegend.esm.js","sources":["../../../src/components/CostOverviewCard/CostOverviewLegend.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 { CostInsightsTheme } from '../../types';\nimport {\n  MetricData,\n  Maybe,\n  Cost,\n  Metric,\n} from '@backstage-community/plugin-cost-insights-common';\nimport { useLastCompleteBillingDate, useFilters } from '../../hooks';\nimport { getComparedChange, choose } from '../../utils/change';\nimport { mapFiltersToProps } from './selector';\nimport { formatChange } from '../../utils/formatters';\nimport { CostGrowth } from '../CostGrowth';\n\ntype CostOverviewLegendProps = {\n  metric: Maybe<Metric>;\n  metricData: Maybe<MetricData>;\n  dailyCostData: Cost;\n};\n\nexport const CostOverviewLegend = ({\n  dailyCostData,\n  metric,\n  metricData,\n}: PropsWithChildren<CostOverviewLegendProps>) => {\n  const theme = useTheme<CostInsightsTheme>();\n  const { duration } = useFilters(mapFiltersToProps);\n  const lastCompleteBillingDate = useLastCompleteBillingDate();\n\n  const comparedChange = metricData\n    ? getComparedChange(\n        dailyCostData,\n        metricData,\n        duration,\n        lastCompleteBillingDate,\n      )\n    : null;\n\n  return (\n    <Box display=\"flex\" flexDirection=\"row\">\n      {dailyCostData.change && (\n        <Box mr={2}>\n          <LegendItem title=\"Cost Trend\" markerColor={theme.palette.blue}>\n            {formatChange(dailyCostData.change)}\n          </LegendItem>\n        </Box>\n      )}\n      {metricData && metric && comparedChange && (\n        <>\n          <Box mr={2}>\n            <LegendItem\n              title={`${metric.name} Trend`}\n              markerColor={theme.palette.magenta}\n            >\n              {formatChange(metricData.change)}\n            </LegendItem>\n          </Box>\n          <LegendItem\n            title={choose(['Your Savings', 'Your Excess'], comparedChange)}\n          >\n            <CostGrowth change={comparedChange} duration={duration} />\n          </LegendItem>\n        </>\n      )}\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuCO,MAAM,qBAAqB,CAAC;AAAA,EACjC,aAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAkD,KAAA;AAChD,EAAA,MAAM,QAAQ,QAA4B,EAAA;AAC1C,EAAA,MAAM,EAAE,QAAA,EAAa,GAAA,UAAA,CAAW,iBAAiB,CAAA;AACjD,EAAA,MAAM,0BAA0B,0BAA2B,EAAA;AAE3D,EAAA,MAAM,iBAAiB,UACnB,GAAA,iBAAA;AAAA,IACE,aAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GAEF,GAAA,IAAA;AAEJ,EAAA,uBACG,IAAA,CAAA,GAAA,EAAA,EAAI,OAAQ,EAAA,MAAA,EAAO,eAAc,KAC/B,EAAA,QAAA,EAAA;AAAA,IAAA,aAAA,CAAc,0BACZ,GAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EACP,8BAAC,UAAW,EAAA,EAAA,KAAA,EAAM,YAAa,EAAA,WAAA,EAAa,MAAM,OAAQ,CAAA,IAAA,EACvD,uBAAa,aAAc,CAAA,MAAM,GACpC,CACF,EAAA,CAAA;AAAA,IAED,UAAA,IAAc,MAAU,IAAA,cAAA,oBAErB,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,GAAA,EAAA,EAAI,IAAI,CACP,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,CAAG,EAAA,MAAA,CAAO,IAAI,CAAA,MAAA,CAAA;AAAA,UACrB,WAAA,EAAa,MAAM,OAAQ,CAAA,OAAA;AAAA,UAE1B,QAAA,EAAA,YAAA,CAAa,WAAW,MAAM;AAAA;AAAA,OAEnC,EAAA,CAAA;AAAA,sBACA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAO,MAAO,CAAA,CAAC,cAAgB,EAAA,aAAa,GAAG,cAAc,CAAA;AAAA,UAE7D,QAAC,kBAAA,GAAA,CAAA,UAAA,EAAA,EAAW,MAAQ,EAAA,cAAA,EAAgB,QAAoB,EAAA;AAAA;AAAA;AAC1D,KACF,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/CurrencySelect/CurrencySelect.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import InputLabel from '@material-ui/core/InputLabel';
 import Select from '@material-ui/core/Select';
 import FormControl from '@material-ui/core/FormControl';
@@ -24,28 +24,31 @@ const CurrencySelect = ({
   };
   const renderValue = (value) => {
     const option = getOption(value);
-    return /* @__PURE__ */ React.createElement("b", null, option.label);
+    return /* @__PURE__ */ jsx("b", { children: option.label });
   };
-  return /* @__PURE__ */ React.createElement(FormControl, { variant: "outlined" }, /* @__PURE__ */ React.createElement(InputLabel, { shrink: true }, "Convert to:"), /* @__PURE__ */ React.createElement(
-    Select,
-    {
-      className: classes.select,
-      variant: "outlined",
-      labelWidth: 100,
-      onChange: handleOnChange,
-      value: currency.kind || NULL_VALUE,
-      renderValue
-    },
-    currencies.map((c) => /* @__PURE__ */ React.createElement(
-      MenuItem,
+  return /* @__PURE__ */ jsxs(FormControl, { variant: "outlined", children: [
+    /* @__PURE__ */ jsx(InputLabel, { shrink: true, children: "Convert to:" }),
+    /* @__PURE__ */ jsx(
+      Select,
       {
-        className: classes.menuItem,
-        key: c.kind || NULL_VALUE,
-        value: c.kind || NULL_VALUE
-      },
-      /* @__PURE__ */ React.createElement(Typography, { component: "span", role: "img", "aria-label": c.label }, c.label)
-    ))
-  ));
+        className: classes.select,
+        variant: "outlined",
+        labelWidth: 100,
+        onChange: handleOnChange,
+        value: currency.kind || NULL_VALUE,
+        renderValue,
+        children: currencies.map((c) => /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            className: classes.menuItem,
+            value: c.kind || NULL_VALUE,
+            children: /* @__PURE__ */ jsx(Typography, { component: "span", role: "img", "aria-label": c.label, children: c.label })
+          },
+          c.kind || NULL_VALUE
+        ))
+      }
+    )
+  ] });
 };
 
 export { CurrencySelect };

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

@@ -1 +1 @@
-{"version":3,"file":"CurrencySelect.esm.js","sources":["../../../src/components/CurrencySelect/CurrencySelect.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 InputLabel from '@material-ui/core/InputLabel';\nimport Select, { SelectProps } from '@material-ui/core/Select';\nimport FormControl from '@material-ui/core/FormControl';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Typography from '@material-ui/core/Typography';\nimport { Currency, CurrencyType } from '../../types';\nimport { findAlways } from '../../utils/assert';\nimport { useSelectStyles as useStyles } from '../../utils/styles';\n\nconst NULL_VALUE = 'engineers';\n\ntype CurrencySelectProps = {\n  currency: Currency;\n  currencies: Currency[];\n  onSelect: (currency: Currency) => void;\n};\n\nexport const CurrencySelect = ({\n  currency,\n  currencies,\n  onSelect,\n}: CurrencySelectProps) => {\n  const classes = useStyles();\n\n  const getOption = (value: unknown) => {\n    const kind = (value === NULL_VALUE ? null : value) as CurrencyType;\n    return findAlways(currencies, c => c.kind === kind);\n  };\n\n  const handleOnChange: SelectProps['onChange'] = e => {\n    const option = getOption(e.target.value);\n    onSelect(option);\n  };\n\n  const renderValue: SelectProps['renderValue'] = value => {\n    const option = getOption(value);\n    return <b>{option.label}</b>;\n  };\n\n  return (\n    <FormControl variant=\"outlined\">\n      <InputLabel shrink>Convert to:</InputLabel>\n      <Select\n        className={classes.select}\n        variant=\"outlined\"\n        labelWidth={100}\n        onChange={handleOnChange}\n        value={currency.kind || NULL_VALUE}\n        renderValue={renderValue}\n      >\n        {currencies.map((c: Currency) => (\n          <MenuItem\n            className={classes.menuItem}\n            key={c.kind || NULL_VALUE}\n            value={c.kind || NULL_VALUE}\n          >\n            <Typography component=\"span\" role=\"img\" aria-label={c.label}>\n              {c.label}\n            </Typography>\n          </MenuItem>\n        ))}\n      </Select>\n    </FormControl>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;AA0BA,MAAM,UAAa,GAAA,WAAA;AAQZ,MAAM,iBAAiB,CAAC;AAAA,EAC7B,QAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAA2B,KAAA;AACzB,EAAA,MAAM,UAAUA,eAAU,EAAA;AAE1B,EAAM,MAAA,SAAA,GAAY,CAAC,KAAmB,KAAA;AACpC,IAAM,MAAA,IAAA,GAAQ,KAAU,KAAA,UAAA,GAAa,IAAO,GAAA,KAAA;AAC5C,IAAA,OAAO,UAAW,CAAA,UAAA,EAAY,CAAK,CAAA,KAAA,CAAA,CAAE,SAAS,IAAI,CAAA;AAAA,GACpD;AAEA,EAAA,MAAM,iBAA0C,CAAK,CAAA,KAAA;AACnD,IAAA,MAAM,MAAS,GAAA,SAAA,CAAU,CAAE,CAAA,MAAA,CAAO,KAAK,CAAA;AACvC,IAAA,QAAA,CAAS,MAAM,CAAA;AAAA,GACjB;AAEA,EAAA,MAAM,cAA0C,CAAS,KAAA,KAAA;AACvD,IAAM,MAAA,MAAA,GAAS,UAAU,KAAK,CAAA;AAC9B,IAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,IAAA,EAAA,MAAA,CAAO,KAAM,CAAA;AAAA,GAC1B;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,eAAY,OAAQ,EAAA,UAAA,EAAA,sCAClB,UAAW,EAAA,EAAA,MAAA,EAAM,IAAC,EAAA,EAAA,aAAW,CAC9B,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAQ,CAAA,MAAA;AAAA,MACnB,OAAQ,EAAA,UAAA;AAAA,MACR,UAAY,EAAA,GAAA;AAAA,MACZ,QAAU,EAAA,cAAA;AAAA,MACV,KAAA,EAAO,SAAS,IAAQ,IAAA,UAAA;AAAA,MACxB;AAAA,KAAA;AAAA,IAEC,UAAA,CAAW,GAAI,CAAA,CAAC,CACf,qBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAQ,CAAA,QAAA;AAAA,QACnB,GAAA,EAAK,EAAE,IAAQ,IAAA,UAAA;AAAA,QACf,KAAA,EAAO,EAAE,IAAQ,IAAA;AAAA,OAAA;AAAA,sBAEjB,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAU,MAAO,EAAA,IAAA,EAAK,OAAM,YAAY,EAAA,CAAA,CAAE,KACnD,EAAA,EAAA,CAAA,CAAE,KACL;AAAA,KAEH;AAAA,GAEL,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CurrencySelect.esm.js","sources":["../../../src/components/CurrencySelect/CurrencySelect.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 InputLabel from '@material-ui/core/InputLabel';\nimport Select, { SelectProps } from '@material-ui/core/Select';\nimport FormControl from '@material-ui/core/FormControl';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Typography from '@material-ui/core/Typography';\nimport { Currency, CurrencyType } from '../../types';\nimport { findAlways } from '../../utils/assert';\nimport { useSelectStyles as useStyles } from '../../utils/styles';\n\nconst NULL_VALUE = 'engineers';\n\ntype CurrencySelectProps = {\n  currency: Currency;\n  currencies: Currency[];\n  onSelect: (currency: Currency) => void;\n};\n\nexport const CurrencySelect = ({\n  currency,\n  currencies,\n  onSelect,\n}: CurrencySelectProps) => {\n  const classes = useStyles();\n\n  const getOption = (value: unknown) => {\n    const kind = (value === NULL_VALUE ? null : value) as CurrencyType;\n    return findAlways(currencies, c => c.kind === kind);\n  };\n\n  const handleOnChange: SelectProps['onChange'] = e => {\n    const option = getOption(e.target.value);\n    onSelect(option);\n  };\n\n  const renderValue: SelectProps['renderValue'] = value => {\n    const option = getOption(value);\n    return <b>{option.label}</b>;\n  };\n\n  return (\n    <FormControl variant=\"outlined\">\n      <InputLabel shrink>Convert to:</InputLabel>\n      <Select\n        className={classes.select}\n        variant=\"outlined\"\n        labelWidth={100}\n        onChange={handleOnChange}\n        value={currency.kind || NULL_VALUE}\n        renderValue={renderValue}\n      >\n        {currencies.map((c: Currency) => (\n          <MenuItem\n            className={classes.menuItem}\n            key={c.kind || NULL_VALUE}\n            value={c.kind || NULL_VALUE}\n          >\n            <Typography component=\"span\" role=\"img\" aria-label={c.label}>\n              {c.label}\n            </Typography>\n          </MenuItem>\n        ))}\n      </Select>\n    </FormControl>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;AAyBA,MAAM,UAAa,GAAA,WAAA;AAQZ,MAAM,iBAAiB,CAAC;AAAA,EAC7B,QAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAA2B,KAAA;AACzB,EAAA,MAAM,UAAUA,eAAU,EAAA;AAE1B,EAAM,MAAA,SAAA,GAAY,CAAC,KAAmB,KAAA;AACpC,IAAM,MAAA,IAAA,GAAQ,KAAU,KAAA,UAAA,GAAa,IAAO,GAAA,KAAA;AAC5C,IAAA,OAAO,UAAW,CAAA,UAAA,EAAY,CAAK,CAAA,KAAA,CAAA,CAAE,SAAS,IAAI,CAAA;AAAA,GACpD;AAEA,EAAA,MAAM,iBAA0C,CAAK,CAAA,KAAA;AACnD,IAAA,MAAM,MAAS,GAAA,SAAA,CAAU,CAAE,CAAA,MAAA,CAAO,KAAK,CAAA;AACvC,IAAA,QAAA,CAAS,MAAM,CAAA;AAAA,GACjB;AAEA,EAAA,MAAM,cAA0C,CAAS,KAAA,KAAA;AACvD,IAAM,MAAA,MAAA,GAAS,UAAU,KAAK,CAAA;AAC9B,IAAO,uBAAA,GAAA,CAAC,GAAG,EAAA,EAAA,QAAA,EAAA,MAAA,CAAO,KAAM,EAAA,CAAA;AAAA,GAC1B;AAEA,EACE,uBAAA,IAAA,CAAC,WAAY,EAAA,EAAA,OAAA,EAAQ,UACnB,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,MAAM,EAAA,IAAA,EAAC,QAAW,EAAA,aAAA,EAAA,CAAA;AAAA,oBAC9B,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAQ,CAAA,MAAA;AAAA,QACnB,OAAQ,EAAA,UAAA;AAAA,QACR,UAAY,EAAA,GAAA;AAAA,QACZ,QAAU,EAAA,cAAA;AAAA,QACV,KAAA,EAAO,SAAS,IAAQ,IAAA,UAAA;AAAA,QACxB,WAAA;AAAA,QAEC,QAAA,EAAA,UAAA,CAAW,GAAI,CAAA,CAAC,CACf,qBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,WAAW,OAAQ,CAAA,QAAA;AAAA,YAEnB,KAAA,EAAO,EAAE,IAAQ,IAAA,UAAA;AAAA,YAEjB,QAAA,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAU,MAAO,EAAA,IAAA,EAAK,OAAM,YAAY,EAAA,CAAA,CAAE,KACnD,EAAA,QAAA,EAAA,CAAA,CAAE,KACL,EAAA;AAAA,WAAA;AAAA,UALK,EAAE,IAAQ,IAAA;AAAA,SAOlB;AAAA;AAAA;AACH,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/EntityCosts/EntityCosts.esm.js

@@ -1,4 +1,5 @@
-import React, { useCallback, useState, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useCallback, useState, useEffect } from 'react';
 import { CostOverviewCard } from '../CostOverviewCard/CostOverviewCard.esm.js';
 import { ConfigProvider } from '../../hooks/useConfig.esm.js';
 import { CurrencyProvider } from '../../hooks/useCurrency.esm.js';
@@ -75,20 +76,20 @@ const EntityCostsCard = () => {
     lastCompleteBillingDate
   ]);
   if (loadingInitial) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
+    return /* @__PURE__ */ jsx(Progress, {});
   }
   if (error) {
-    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, error.message);
+    return /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message });
   }
   if (!dailyCost || !dailyCost.aggregation.length) {
-    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, "No daily costs");
+    return /* @__PURE__ */ jsx(Alert, { severity: "error", children: "No daily costs" });
   }
-  return /* @__PURE__ */ React.createElement(CostOverviewCard, { dailyCostData: dailyCost, metricData: null });
+  return /* @__PURE__ */ jsx(CostOverviewCard, { dailyCostData: dailyCost, metricData: null });
 };
 const EntityCosts = () => {
   const client = useApi(costInsightsApiRef);
   if (!client.getCatalogEntityDailyCost) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       WarningPanel,
       {
         title: "Could display costs for entity",
@@ -96,7 +97,7 @@ const EntityCosts = () => {
       }
     );
   }
-  return /* @__PURE__ */ React.createElement(CostInsightsThemeProvider, null, /* @__PURE__ */ React.createElement(ConfigProvider, null, /* @__PURE__ */ React.createElement(LoadingProvider, null, /* @__PURE__ */ React.createElement(GroupsProvider, null, /* @__PURE__ */ React.createElement(BillingDateProvider, null, /* @__PURE__ */ React.createElement(FilterProvider, null, /* @__PURE__ */ React.createElement(ScrollProvider, null, /* @__PURE__ */ React.createElement(CurrencyProvider, null, /* @__PURE__ */ React.createElement(EntityCostsCard, null)))))))));
+  return /* @__PURE__ */ jsx(CostInsightsThemeProvider, { children: /* @__PURE__ */ jsx(ConfigProvider, { children: /* @__PURE__ */ jsx(LoadingProvider, { children: /* @__PURE__ */ jsx(GroupsProvider, { children: /* @__PURE__ */ jsx(BillingDateProvider, { children: /* @__PURE__ */ jsx(FilterProvider, { children: /* @__PURE__ */ jsx(ScrollProvider, { children: /* @__PURE__ */ jsx(CurrencyProvider, { children: /* @__PURE__ */ jsx(EntityCostsCard, {}) }) }) }) }) }) }) }) });
 };
 
 export { EntityCosts, EntityCostsCard };

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

@@ -1 +1 @@
-{"version":3,"file":"EntityCosts.esm.js","sources":["../../../src/components/EntityCosts/EntityCosts.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { CostOverviewCard } from '../CostOverviewCard';\nimport {\n  BillingDateProvider,\n  ConfigProvider,\n  CurrencyProvider,\n  FilterProvider,\n  GroupsProvider,\n  LoadingProvider,\n  ScrollProvider,\n  useFilters,\n  useLastCompleteBillingDate,\n  useLoading,\n} from '../../hooks';\nimport { CostInsightsThemeProvider } from '../CostInsightsPage/CostInsightsThemeProvider';\nimport { Progress, WarningPanel } from '@backstage/core-components';\nimport { default as MaterialAlert } from '@material-ui/lab/Alert';\nimport { mapLoadingToProps } from '../CostInsightsPage/selector';\nimport { intervalsOf } from '../../utils/duration';\nimport { costInsightsApiRef } from '../../api';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { useEntity } from '@backstage/plugin-catalog-react';\nimport { Cost, Maybe } from '@backstage-community/plugin-cost-insights-common';\nimport { stringifyEntityRef } from '@backstage/catalog-model';\n\nexport const EntityCostsCard = () => {\n  const client = useApi(costInsightsApiRef);\n  const { entity } = useEntity();\n\n  const {\n    loadingActions,\n    loadingGroups,\n    loadingBillingDate,\n    loadingInitial,\n    dispatchInitial,\n    dispatchInsights,\n    dispatchNone,\n  } = useLoading(mapLoadingToProps);\n\n  /* eslint-disable react-hooks/exhaustive-deps */\n  // The dispatchLoading functions are derived from loading state using mapLoadingToProps, to\n  // provide nicer props for the component. These are re-derived whenever loading state changes,\n  // which causes an infinite loop as product panels load and re-trigger the useEffect below.\n  // Since the functions don't change, we can memoize - but we trigger the same loop if we satisfy\n  // exhaustive-deps by including the function itself in dependencies.\n\n  const dispatchLoadingInitial = useCallback(dispatchInitial, []);\n  const dispatchLoadingInsights = useCallback(dispatchInsights, []);\n  const dispatchLoadingNone = useCallback(dispatchNone, []);\n  /* eslint-enable react-hooks/exhaustive-deps */\n\n  const lastCompleteBillingDate = useLastCompleteBillingDate();\n  const [dailyCost, setDailyCost] = useState<Maybe<Cost>>(null);\n  const [error, setError] = useState<Maybe<Error>>(null);\n  const { pageFilters } = useFilters(p => p);\n\n  useEffect(() => {\n    async function getInsights() {\n      setError(null);\n      try {\n        dispatchLoadingInsights(true);\n        const intervals = intervalsOf(\n          pageFilters.duration,\n          lastCompleteBillingDate,\n        );\n\n        const fetchedDailyCost = await client.getCatalogEntityDailyCost!(\n          stringifyEntityRef(entity),\n          intervals,\n        );\n        setDailyCost(fetchedDailyCost);\n      } catch (e) {\n        setError(e);\n        dispatchLoadingNone(loadingActions);\n      } finally {\n        dispatchLoadingNone(loadingActions);\n        dispatchLoadingInitial(false);\n        dispatchLoadingInsights(false);\n      }\n    }\n\n    // Wait for metadata to finish loading\n    if (!loadingBillingDate) {\n      getInsights();\n    }\n  }, [\n    client,\n    entity,\n    pageFilters,\n    loadingActions,\n    loadingGroups,\n    loadingBillingDate,\n    dispatchLoadingInsights,\n    dispatchLoadingInitial,\n    dispatchLoadingNone,\n    lastCompleteBillingDate,\n  ]);\n\n  if (loadingInitial) {\n    return <Progress />;\n  }\n\n  if (error) {\n    return <MaterialAlert severity=\"error\">{error.message}</MaterialAlert>;\n  }\n\n  if (!dailyCost || !dailyCost.aggregation.length) {\n    return <MaterialAlert severity=\"error\">No daily costs</MaterialAlert>;\n  }\n\n  return <CostOverviewCard dailyCostData={dailyCost} metricData={null} />;\n};\n\nexport const EntityCosts = () => {\n  const client = useApi(costInsightsApiRef);\n\n  if (!client.getCatalogEntityDailyCost) {\n    return (\n      <WarningPanel\n        title=\"Could display costs for entity\"\n        message=\"The getCatalogEntityDailyCost() method is not implemented by the costInsightsApi.\"\n      />\n    );\n  }\n\n  return (\n    <CostInsightsThemeProvider>\n      <ConfigProvider>\n        <LoadingProvider>\n          <GroupsProvider>\n            <BillingDateProvider>\n              <FilterProvider>\n                <ScrollProvider>\n                  <CurrencyProvider>\n                    <EntityCostsCard />\n                  </CurrencyProvider>\n                </ScrollProvider>\n              </FilterProvider>\n            </BillingDateProvider>\n          </GroupsProvider>\n        </LoadingProvider>\n      </ConfigProvider>\n    </CostInsightsThemeProvider>\n  );\n};\n"],"names":["MaterialAlert"],"mappings":"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"}
+{"version":3,"file":"EntityCosts.esm.js","sources":["../../../src/components/EntityCosts/EntityCosts.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useCallback, useEffect, useState } from 'react';\nimport { CostOverviewCard } from '../CostOverviewCard';\nimport {\n  BillingDateProvider,\n  ConfigProvider,\n  CurrencyProvider,\n  FilterProvider,\n  GroupsProvider,\n  LoadingProvider,\n  ScrollProvider,\n  useFilters,\n  useLastCompleteBillingDate,\n  useLoading,\n} from '../../hooks';\nimport { CostInsightsThemeProvider } from '../CostInsightsPage/CostInsightsThemeProvider';\nimport { Progress, WarningPanel } from '@backstage/core-components';\nimport { default as MaterialAlert } from '@material-ui/lab/Alert';\nimport { mapLoadingToProps } from '../CostInsightsPage/selector';\nimport { intervalsOf } from '../../utils/duration';\nimport { costInsightsApiRef } from '../../api';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { useEntity } from '@backstage/plugin-catalog-react';\nimport { Cost, Maybe } from '@backstage-community/plugin-cost-insights-common';\nimport { stringifyEntityRef } from '@backstage/catalog-model';\n\nexport const EntityCostsCard = () => {\n  const client = useApi(costInsightsApiRef);\n  const { entity } = useEntity();\n\n  const {\n    loadingActions,\n    loadingGroups,\n    loadingBillingDate,\n    loadingInitial,\n    dispatchInitial,\n    dispatchInsights,\n    dispatchNone,\n  } = useLoading(mapLoadingToProps);\n\n  /* eslint-disable react-hooks/exhaustive-deps */\n  // The dispatchLoading functions are derived from loading state using mapLoadingToProps, to\n  // provide nicer props for the component. These are re-derived whenever loading state changes,\n  // which causes an infinite loop as product panels load and re-trigger the useEffect below.\n  // Since the functions don't change, we can memoize - but we trigger the same loop if we satisfy\n  // exhaustive-deps by including the function itself in dependencies.\n\n  const dispatchLoadingInitial = useCallback(dispatchInitial, []);\n  const dispatchLoadingInsights = useCallback(dispatchInsights, []);\n  const dispatchLoadingNone = useCallback(dispatchNone, []);\n  /* eslint-enable react-hooks/exhaustive-deps */\n\n  const lastCompleteBillingDate = useLastCompleteBillingDate();\n  const [dailyCost, setDailyCost] = useState<Maybe<Cost>>(null);\n  const [error, setError] = useState<Maybe<Error>>(null);\n  const { pageFilters } = useFilters(p => p);\n\n  useEffect(() => {\n    async function getInsights() {\n      setError(null);\n      try {\n        dispatchLoadingInsights(true);\n        const intervals = intervalsOf(\n          pageFilters.duration,\n          lastCompleteBillingDate,\n        );\n\n        const fetchedDailyCost = await client.getCatalogEntityDailyCost!(\n          stringifyEntityRef(entity),\n          intervals,\n        );\n        setDailyCost(fetchedDailyCost);\n      } catch (e) {\n        setError(e);\n        dispatchLoadingNone(loadingActions);\n      } finally {\n        dispatchLoadingNone(loadingActions);\n        dispatchLoadingInitial(false);\n        dispatchLoadingInsights(false);\n      }\n    }\n\n    // Wait for metadata to finish loading\n    if (!loadingBillingDate) {\n      getInsights();\n    }\n  }, [\n    client,\n    entity,\n    pageFilters,\n    loadingActions,\n    loadingGroups,\n    loadingBillingDate,\n    dispatchLoadingInsights,\n    dispatchLoadingInitial,\n    dispatchLoadingNone,\n    lastCompleteBillingDate,\n  ]);\n\n  if (loadingInitial) {\n    return <Progress />;\n  }\n\n  if (error) {\n    return <MaterialAlert severity=\"error\">{error.message}</MaterialAlert>;\n  }\n\n  if (!dailyCost || !dailyCost.aggregation.length) {\n    return <MaterialAlert severity=\"error\">No daily costs</MaterialAlert>;\n  }\n\n  return <CostOverviewCard dailyCostData={dailyCost} metricData={null} />;\n};\n\nexport const EntityCosts = () => {\n  const client = useApi(costInsightsApiRef);\n\n  if (!client.getCatalogEntityDailyCost) {\n    return (\n      <WarningPanel\n        title=\"Could display costs for entity\"\n        message=\"The getCatalogEntityDailyCost() method is not implemented by the costInsightsApi.\"\n      />\n    );\n  }\n\n  return (\n    <CostInsightsThemeProvider>\n      <ConfigProvider>\n        <LoadingProvider>\n          <GroupsProvider>\n            <BillingDateProvider>\n              <FilterProvider>\n                <ScrollProvider>\n                  <CurrencyProvider>\n                    <EntityCostsCard />\n                  </CurrencyProvider>\n                </ScrollProvider>\n              </FilterProvider>\n            </BillingDateProvider>\n          </GroupsProvider>\n        </LoadingProvider>\n      </ConfigProvider>\n    </CostInsightsThemeProvider>\n  );\n};\n"],"names":["MaterialAlert"],"mappings":"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"}