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

package/dist/esm/selector-D7iXJwd9.esm.js

@@ -1,594 +0,0 @@
-import React, { useRef, useEffect, useState } from 'react';
-import Box from '@material-ui/core/Box';
-import { capitalize } from '@material-ui/core/utils';
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
-import Divider from '@material-ui/core/Divider';
-import Tab from '@material-ui/core/Tab';
-import Tabs from '@material-ui/core/Tabs';
-import { useTheme } from '@material-ui/core/styles';
-import { DateTime } from 'luxon';
-import { ResponsiveContainer, ComposedChart, CartesianGrid, XAxis, YAxis, Area, Line, Tooltip, AreaChart } from 'recharts';
-import { f as useScroll, e as useFilters, d as useLastCompleteBillingDate, g as getComparedChange, h as LegendItem, j as formatChange, k as choose, l as CostGrowth, m as useCostOverviewStyles, n as useConfig, o as aggregationSort, p as overviewGraphTickFormatter, q as isInvalid, D as DEFAULT_DATE_FORMAT, r as BarChartTooltip, s as BarChartTooltipItem, t as formatGraphValue, v as getPreviousPeriodTotalCost, w as formatPeriod, x as BarChartLegend, y as useSelectStyles, z as Duration, E as formatLastTwoLookaheadQuarters, H as findAlways, I as useOverviewTabsStyles, J as DefaultNavigation, K as DefaultLoadingAction, M as getResetState, N as getResetStateWithoutInitial } from './index-BFM2mP6Z.esm.js';
-import Typography from '@material-ui/core/Typography';
-import '@material-ui/core/Paper';
-import '@material-ui/core/Slide';
-import '@material-ui/icons/ChevronLeft';
-import '@material-ui/icons/ChevronRight';
-import '@material-ui/core/ButtonBase';
-import 'pluralize';
-import '@material-ui/core/Tooltip';
-import '@material-ui/icons/Lens';
-import '@material-ui/icons/HelpOutlineOutlined';
-import 'classnames';
-import '@material-ui/icons/ArrowDropUp';
-import '@material-ui/icons/ArrowDropDown';
-import { emphasize } from '@material-ui/core/styles/colorManipulator';
-import FullScreenIcon from '@material-ui/icons/Fullscreen';
-import InputLabel from '@material-ui/core/InputLabel';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
-
-const ScrollAnchor = ({
-  id,
-  left = 0,
-  top = -20,
-  block = "start",
-  inline = "nearest",
-  behavior = "smooth"
-}) => {
-  const divRef = useRef(null);
-  const [scroll, setScroll] = useScroll();
-  useEffect(() => {
-    function scrollIntoView() {
-      if (divRef.current && scroll === id) {
-        divRef.current.scrollIntoView({
-          block,
-          inline,
-          behavior
-        });
-        setScroll(null);
-      }
-    }
-    scrollIntoView();
-  }, [scroll, setScroll, id, behavior, block, inline]);
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      ref: divRef,
-      style: { position: "absolute", height: 0, width: 0, top, left },
-      "data-testid": `scroll-test-${id}`
-    }
-  );
-};
-
-function trendFrom(trendline, date) {
-  return trendline.slope * (date / 1e3) + trendline.intercept;
-}
-function groupByDate(acc, entry) {
-  return { ...acc, [entry.date]: entry.amount };
-}
-
-const mapFiltersToProps = ({
-  pageFilters,
-  setPageFilters
-}) => ({
-  ...pageFilters,
-  project: pageFilters.project || "all",
-  setDuration: (duration) => setPageFilters({
-    ...pageFilters,
-    duration
-  }),
-  setProject: (project) => setPageFilters({
-    ...pageFilters,
-    project: project === "all" ? null : project
-  }),
-  setMetric: (metric) => setPageFilters({
-    ...pageFilters,
-    metric
-  })
-});
-
-const CostOverviewLegend = ({
-  dailyCostData,
-  metric,
-  metricData
-}) => {
-  const theme = useTheme();
-  const { duration } = useFilters(mapFiltersToProps);
-  const lastCompleteBillingDate = useLastCompleteBillingDate();
-  const comparedChange = metricData ? getComparedChange(
-    dailyCostData,
-    metricData,
-    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 })
-  )));
-};
-
-const CostOverviewChart = ({
-  dailyCostData,
-  metric,
-  metricData,
-  responsive = true
-}) => {
-  var _a, _b, _c;
-  const theme = useTheme();
-  const styles = useCostOverviewStyles(theme);
-  const { baseCurrency, hideTrendLine } = useConfig();
-  const data = {
-    dailyCost: {
-      dataKey: "dailyCost",
-      name: `Daily Cost`,
-      format: "currency",
-      data: dailyCostData
-    },
-    metric: {
-      dataKey: (_a = metric == null ? void 0 : metric.kind) != null ? _a : "Unknown",
-      name: (_b = metric == null ? void 0 : metric.name) != null ? _b : "Unknown",
-      format: (_c = metricData == null ? void 0 : metricData.format) != null ? _c : "number",
-      data: metricData
-    }
-  };
-  const metricsByDate = data.metric.data ? data.metric.data.aggregation.reduce(groupByDate, {}) : {};
-  const chartData = data.dailyCost.data.aggregation.slice().sort(aggregationSort).map((entry) => ({
-    date: Date.parse(entry.date),
-    trend: trendFrom(data.dailyCost.data.trendline, Date.parse(entry.date)),
-    dailyCost: entry.amount,
-    ...metric && data.metric.data ? { [data.metric.dataKey]: metricsByDate[`${entry.date}`] } : {}
-  }));
-  const tooltipRenderer = ({ label, payload = [] }) => {
-    if (isInvalid({ label, payload }))
-      return null;
-    const dataKeys = [data.dailyCost.dataKey, data.metric.dataKey];
-    const date = typeof label === "number" ? DateTime.fromMillis(label) : DateTime.fromISO(label);
-    const title = date.toUTC().toFormat(DEFAULT_DATE_FORMAT);
-    const formatGraphValueWith = formatGraphValue(baseCurrency);
-    const items = payload.filter((p) => dataKeys.includes(p.dataKey)).map((p, i) => ({
-      label: p.dataKey === data.dailyCost.dataKey ? data.dailyCost.name : data.metric.name,
-      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 })));
-  };
-  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,
-      {
-        activeDot: false,
-        dataKey: "trend",
-        dot: false,
-        isAnimationActive: false,
-        strokeWidth: 2,
-        stroke: theme.palette.blue,
-        yAxisId: data.dailyCost.dataKey
-      }
-    ), metric && /* @__PURE__ */ React.createElement(
-      Line,
-      {
-        dataKey: data.metric.dataKey,
-        dot: false,
-        isAnimationActive: false,
-        strokeWidth: 2,
-        stroke: theme.palette.magenta,
-        yAxisId: data.metric.dataKey
-      }
-    ), /* @__PURE__ */ React.createElement(Tooltip, { content: tooltipRenderer, animationDuration: 100 }))
-  ));
-};
-
-const aggregationSum = (aggregation) => aggregation.reduce((total, curAgg) => total + curAgg.amount, 0);
-
-const LOW_COST_THRESHOLD = 0.1;
-const CostOverviewBreakdownChart = ({
-  costBreakdown,
-  responsive = true
-}) => {
-  const theme = useTheme();
-  const classes = useCostOverviewStyles(theme);
-  const { baseCurrency } = useConfig();
-  const lastCompleteBillingDate = useLastCompleteBillingDate();
-  const { duration } = useFilters(mapFiltersToProps);
-  const [isExpanded, setExpanded] = useState(false);
-  if (!costBreakdown) {
-    return null;
-  }
-  const flattenedAggregation = costBreakdown.map((cost) => cost.aggregation).flat();
-  const totalCost = aggregationSum(flattenedAggregation);
-  const previousPeriodTotal = getPreviousPeriodTotalCost(
-    flattenedAggregation,
-    duration,
-    lastCompleteBillingDate
-  );
-  const currentPeriodTotal = totalCost - previousPeriodTotal;
-  const canExpand = costBreakdown.length >= 8;
-  const otherCategoryIds = [];
-  const breakdownsByDate = costBreakdown.reduce(
-    (breakdownByDate, breakdown) => {
-      const breakdownTotal = aggregationSum(breakdown.aggregation);
-      const isOtherCategory = canExpand && breakdownTotal < totalCost * LOW_COST_THRESHOLD;
-      const updatedBreakdownByDate = { ...breakdownByDate };
-      if (isOtherCategory) {
-        otherCategoryIds.push(breakdown.id);
-      }
-      breakdown.aggregation.forEach((curAggregation) => {
-        const costsForDate = updatedBreakdownByDate[curAggregation.date] || {};
-        updatedBreakdownByDate[curAggregation.date] = {
-          ...costsForDate,
-          [breakdown.id]: (costsForDate[breakdown.id] || 0) + curAggregation.amount
-        };
-      });
-      return updatedBreakdownByDate;
-    },
-    {}
-  );
-  const chartData = Object.keys(breakdownsByDate).map((date) => {
-    const costsForDate = Object.keys(breakdownsByDate[date]).reduce(
-      (dateCosts, breakdown) => {
-        const cost = breakdownsByDate[date][breakdown];
-        const breakdownCost = !isExpanded && otherCategoryIds.includes(breakdown) ? { Other: (dateCosts.Other || 0) + cost } : { [breakdown]: cost };
-        return { ...dateCosts, ...breakdownCost };
-      },
-      {}
-    );
-    return {
-      ...costsForDate,
-      date: Date.parse(date)
-    };
-  }).sort((a, b) => a.date - b.date);
-  const sortedBreakdowns = costBreakdown.sort(
-    (a, b) => aggregationSum(a.aggregation) - aggregationSum(b.aggregation)
-  );
-  const renderAreas = () => {
-    const separatedBreakdowns = sortedBreakdowns.filter(
-      (breakdown) => breakdown.id !== "Other" && !otherCategoryIds.includes(breakdown.id)
-    ).map((breakdown) => breakdown.id);
-    const breakdownsToDisplay = isExpanded ? sortedBreakdowns.map((breakdown) => breakdown.id) : ["Other", ...separatedBreakdowns];
-    return breakdownsToDisplay.map((breakdown, i) => {
-      const color = theme.palette.dataViz[(breakdownsToDisplay.length - 1 - i) % (theme.palette.dataViz.length - 1)];
-      return /* @__PURE__ */ React.createElement(
-        Area,
-        {
-          key: breakdown,
-          dataKey: breakdown,
-          isAnimationActive: false,
-          stackId: "1",
-          stroke: color,
-          fill: color,
-          onClick: () => setExpanded(true),
-          style: {
-            cursor: breakdown === "Other" && !isExpanded ? "pointer" : void 0
-          }
-        }
-      );
-    });
-  };
-  const tooltipRenderer = ({ label, payload = [] }) => {
-    if (isInvalid({ label, payload }))
-      return null;
-    const date = typeof label === "number" ? DateTime.fromMillis(label) : DateTime.fromISO(label);
-    const dateTitle = date.toUTC().toFormat(DEFAULT_DATE_FORMAT);
-    const formatGraphValueWith = formatGraphValue(baseCurrency);
-    const items = payload.map((p, i) => ({
-      label: p.dataKey,
-      value: formatGraphValueWith(Number(p.value), i),
-      fill: p.color
-    }));
-    const expandText = /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
-      Divider,
-      {
-        style: {
-          backgroundColor: emphasize(theme.palette.divider, 1),
-          margin: "10px 0"
-        }
-      }
-    ), /* @__PURE__ */ React.createElement(Box, { display: "flex", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React.createElement(FullScreenIcon, null), /* @__PURE__ */ React.createElement(Typography, null, "Click to expand")));
-    return /* @__PURE__ */ React.createElement(BarChartTooltip, { title: dateTitle }, items.reverse().map((item, index) => /* @__PURE__ */ React.createElement(BarChartTooltipItem, { key: `${item.label}-${index}`, item })), canExpand && !isExpanded ? expandText : null);
-  };
-  const options = {
-    previousName: formatPeriod(duration, lastCompleteBillingDate, false),
-    currentName: formatPeriod(duration, lastCompleteBillingDate, true),
-    hideMarker: true
-  };
-  return /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column" }, /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "row" }, /* @__PURE__ */ React.createElement(
-    BarChartLegend,
-    {
-      costStart: previousPeriodTotal,
-      costEnd: currentPeriodTotal,
-      options
-    }
-  )), /* @__PURE__ */ React.createElement(
-    ResponsiveContainer,
-    {
-      width: responsive ? "100%" : classes.container.width,
-      height: classes.container.height
-    },
-    /* @__PURE__ */ React.createElement(
-      AreaChart,
-      {
-        data: chartData,
-        margin: {
-          top: 16,
-          right: 30,
-          bottom: 40
-        }
-      },
-      /* @__PURE__ */ React.createElement(CartesianGrid, { stroke: classes.cartesianGrid.stroke }),
-      /* @__PURE__ */ React.createElement(
-        XAxis,
-        {
-          dataKey: "date",
-          domain: ["dataMin", "dataMax"],
-          tickFormatter: overviewGraphTickFormatter,
-          tickCount: 6,
-          type: "number",
-          stroke: classes.axis.fill
-        }
-      ),
-      /* @__PURE__ */ React.createElement(
-        YAxis,
-        {
-          domain: [() => 0, "dataMax"],
-          tick: { fill: classes.axis.fill },
-          tickFormatter: formatGraphValue(baseCurrency),
-          width: classes.yAxis.width
-        }
-      ),
-      renderAreas(),
-      /* @__PURE__ */ React.createElement(Tooltip, { content: tooltipRenderer, animationDuration: 100 })
-    )
-  ));
-};
-
-const CostOverviewHeader = ({
-  title,
-  subtitle,
-  children
-}) => /* @__PURE__ */ React.createElement(
-  Box,
-  {
-    mt: 2,
-    ml: 1,
-    mb: 1,
-    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)
-);
-
-const MetricSelect = ({
-  metric,
-  metrics,
-  onSelect
-}) => {
-  const classes = useSelectStyles();
-  function onChange(e) {
-    if (e.target.value === "none") {
-      onSelect(null);
-    } else {
-      onSelect(e.target.value);
-    }
-  }
-  return /* @__PURE__ */ React.createElement(FormControl, { variant: "outlined" }, /* @__PURE__ */ React.createElement(InputLabel, { shrink: true, id: "metric-select-label" }, "Compare to:"), /* @__PURE__ */ React.createElement(
-    Select,
-    {
-      id: "metric-select",
-      labelId: "metric-select-label",
-      labelWidth: 100,
-      className: classes.select,
-      value: metric != null ? metric : "none",
-      onChange
-    },
-    /* @__PURE__ */ React.createElement(MenuItem, { className: classes.menuItem, key: "none", value: "none" }, /* @__PURE__ */ React.createElement("em", null, "None")),
-    metrics.map((m) => /* @__PURE__ */ React.createElement(MenuItem, { className: classes.menuItem, key: m.kind, value: m.kind }, /* @__PURE__ */ React.createElement("b", null, m.name)))
-  ));
-};
-
-function getDefaultOptions(lastCompleteBillingDate) {
-  return [
-    {
-      value: Duration.P90D,
-      label: "Past 6 Months"
-    },
-    {
-      value: Duration.P30D,
-      label: "Past 60 Days"
-    },
-    {
-      value: Duration.P3M,
-      label: formatLastTwoLookaheadQuarters(lastCompleteBillingDate)
-    }
-  ];
-}
-const PeriodSelect = ({
-  duration,
-  onSelect,
-  options
-}) => {
-  const classes = useSelectStyles();
-  const lastCompleteBillingDate = useLastCompleteBillingDate();
-  const optionsOrDefault = options != null ? options : getDefaultOptions(lastCompleteBillingDate);
-  const handleOnChange = (e) => {
-    onSelect(e.target.value);
-  };
-  const renderValue = (value) => {
-    const option = findAlways(optionsOrDefault, (o) => o.value === value);
-    return /* @__PURE__ */ React.createElement("b", null, option.label);
-  };
-  return /* @__PURE__ */ React.createElement(
-    Select,
-    {
-      className: classes.select,
-      variant: "outlined",
-      onChange: handleOnChange,
-      value: duration,
-      renderValue,
-      "data-testid": "period-select"
-    },
-    optionsOrDefault.map((option) => /* @__PURE__ */ React.createElement(
-      MenuItem,
-      {
-        className: classes.menuItem,
-        key: option.value,
-        value: option.value,
-        "data-testid": `period-select-option-${option.value}`
-      },
-      option.label
-    ))
-  );
-};
-
-const CostOverviewCard = ({
-  dailyCostData,
-  metricData
-}) => {
-  var _a;
-  const theme = useTheme();
-  const styles = useOverviewTabsStyles(theme);
-  const config = useConfig();
-  const [tabIndex, setTabIndex] = useState(0);
-  const { setDuration, setProject, setMetric, ...filters } = useFilters(mapFiltersToProps);
-  useEffect(() => {
-    var _a2;
-    const lastIndex = Object.keys((_a2 = dailyCostData.groupedCosts) != null ? _a2 : {}).length;
-    if (tabIndex > lastIndex) {
-      setTabIndex(0);
-    }
-  }, [dailyCostData, tabIndex, setTabIndex]);
-  const metric = filters.metric ? findAlways(config.metrics, (m) => m.kind === filters.metric) : null;
-  const breakdownTabs = Object.keys((_a = dailyCostData.groupedCosts) != null ? _a : {}).map(
-    (key) => ({
-      id: key,
-      label: `Breakdown by ${key}`,
-      title: `Cloud Cost By ${capitalize(key)}`
-    })
-  );
-  const tabs = [
-    { id: "overview", label: "Total cost", title: "Cloud Cost" }
-  ].concat(breakdownTabs);
-  const safeTabIndex = tabIndex > tabs.length - 1 ? 0 : tabIndex;
-  const OverviewTabs = () => {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-      Tabs,
-      {
-        indicatorColor: "primary",
-        onChange: (_, index) => setTabIndex(index),
-        value: safeTabIndex
-      },
-      tabs.map((tab, index) => /* @__PURE__ */ React.createElement(
-        Tab,
-        {
-          className: styles.default,
-          label: tab.label,
-          key: tab.id,
-          value: index,
-          classes: { selected: styles.selected }
-        }
-      ))
-    ));
-  };
-  const showMetricSelect = metricData && config.metrics.length && safeTabIndex === 0;
-  return /* @__PURE__ */ React.createElement(Card, { style: { position: "relative", overflow: "visible" } }, /* @__PURE__ */ React.createElement(ScrollAnchor, { id: DefaultNavigation.CostOverviewCard }), /* @__PURE__ */ React.createElement(CardContent, null, dailyCostData.groupedCosts && /* @__PURE__ */ React.createElement(OverviewTabs, null), /* @__PURE__ */ React.createElement(CostOverviewHeader, { title: tabs[safeTabIndex].title }, /* @__PURE__ */ React.createElement(PeriodSelect, { duration: filters.duration, onSelect: setDuration })), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(Box, { ml: 2, my: 1, display: "flex", flexDirection: "column" }, safeTabIndex === 0 ? /* @__PURE__ */ React.createElement(
-    CostOverviewChart,
-    {
-      dailyCostData,
-      metric,
-      metricData
-    }
-  ) : /* @__PURE__ */ React.createElement(
-    CostOverviewBreakdownChart,
-    {
-      costBreakdown: dailyCostData.groupedCosts[tabs[safeTabIndex].id]
-    }
-  )), /* @__PURE__ */ React.createElement(Box, { display: "flex", justifyContent: "flex-end", alignItems: "center" }, showMetricSelect && /* @__PURE__ */ React.createElement(
-    MetricSelect,
-    {
-      metric: filters.metric,
-      metrics: config.metrics,
-      onSelect: setMetric
-    }
-  ))));
-};
-
-const mapLoadingToProps = ({ state, actions, dispatch }) => ({
-  loadingActions: actions,
-  loadingGroups: state[DefaultLoadingAction.UserGroups],
-  loadingBillingDate: state[DefaultLoadingAction.LastCompleteBillingDate],
-  loadingInitial: state[DefaultLoadingAction.CostInsightsInitial],
-  dispatchInitial: (isLoading) => dispatch({ [DefaultLoadingAction.CostInsightsInitial]: isLoading }),
-  dispatchInsights: (isLoading) => dispatch({ [DefaultLoadingAction.CostInsightsPage]: isLoading }),
-  dispatchNone: (loadingActions) => dispatch(getResetState(loadingActions)),
-  dispatchReset: (loadingActions) => dispatch(getResetStateWithoutInitial(loadingActions))
-});
-
-export { CostOverviewCard as C, PeriodSelect as P, ScrollAnchor as S, mapLoadingToProps as m };
-//# sourceMappingURL=selector-D7iXJwd9.esm.js.map