@backstage-community/plugin-cost-insights 0.12.24

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

@@ -0,0 +1,594 @@
+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