Move mock data utils

plugins/cost-insights/src/client.ts

@@ -20,9 +20,7 @@ import { CostInsightsApi, ProductInsightsOptions } from '../src/api';
 import {
   Alert,
   Cost,
-  DateAggregation,
   DEFAULT_DATE_FORMAT,
-  Duration,
   Entity,
   Group,
   MetricData,
@@ -34,52 +32,12 @@ import {
   ProjectGrowthAlert,
   UnlabeledDataflowAlert,
 } from '../src/utils/alerts';
-import { inclusiveStartDateOf } from '../src/utils/duration';
-import { trendlineOf, changeOf, getGroupedProducts } from './utils/mockData';
-
-type IntervalFields = {
-  duration: Duration;
-  endDate: string;
-};
-
-function parseIntervals(intervals: string): IntervalFields {
-  const match = intervals.match(
-    /\/(?<duration>P\d+[DM])\/(?<date>\d{4}-\d{2}-\d{2})/,
-  );
-  if (Object.keys(match?.groups || {}).length !== 2) {
-    throw new Error(`Invalid intervals: ${intervals}`);
-  }
-  const { duration, date } = match!.groups!;
-  return {
-    duration: duration as Duration,
-    endDate: date,
-  };
-}
-
-export function aggregationFor(
-  intervals: string,
-  baseline: number,
-): DateAggregation[] {
-  const { duration, endDate } = parseIntervals(intervals);
-  const days = dayjs(endDate).diff(
-    inclusiveStartDateOf(duration, endDate),
-    'day',
-  );
-
-  return [...Array(days).keys()].reduce(
-    (values: DateAggregation[], i: number): DateAggregation[] => {
-      const last = values.length ? values[values.length - 1].amount : baseline;
-      values.push({
-        date: dayjs(inclusiveStartDateOf(duration, endDate))
-          .add(i, 'day')
-          .format(DEFAULT_DATE_FORMAT),
-        amount: Math.max(0, last + (baseline / 20) * (Math.random() * 2 - 1)),
-      });
-      return values;
-    },
-    [],
-  );
-}
+import {
+  trendlineOf,
+  changeOf,
+  getGroupedProducts,
+  aggregationFor,
+} from './utils/mockData';
 
 export class ExampleCostInsightsClient implements CostInsightsApi {
   private request(_: any, res: any): Promise<any> {

plugins/cost-insights/src/components/BarChart/BarChartLegend.tsx

@@ -21,11 +21,12 @@ import { currencyFormatter } from '../../utils/formatters';
 import { CostInsightsTheme } from '../../types';
 import { useBarChartLayoutStyles as useStyles } from '../../utils/styles';
 
-type BarChartLegendOptions = {
+export type BarChartLegendOptions = {
   previousName: string;
   previousFill: string;
   currentName: string;
   currentFill: string;
+  hideMarker?: boolean;
 };
 
 export type BarChartLegendProps = {
@@ -56,12 +57,18 @@ export const BarChartLegend = ({
   return (
     <Box className={classes.legend} display="flex" flexDirection="row">
       <Box marginRight={2}>
-        <LegendItem title={data.previousName} markerColor={data.previousFill}>
+        <LegendItem
+          title={data.previousName}
+          markerColor={options.hideMarker ? undefined : data.previousFill}
+        >
           {currencyFormatter.format(costStart)}
         </LegendItem>
       </Box>
       <Box marginRight={2}>
-        <LegendItem title={data.currentName} markerColor={data.currentFill}>
+        <LegendItem
+          title={data.currentName}
+          markerColor={options.hideMarker ? undefined : data.currentFill}
+        >
           {currencyFormatter.format(costEnd)}
         </LegendItem>
       </Box>

plugins/cost-insights/src/utils/styles.ts

@@ -103,9 +103,10 @@ export const useCostOverviewStyles = (theme: CostInsightsTheme) => ({
 export const useOverviewTabsStyles = makeStyles<CostInsightsTheme>(
   (theme: CostInsightsTheme) => ({
     default: {
-      padding: theme.spacing(2, 2),
-      fontWeight: 'bold',
+      padding: theme.spacing(2),
+      fontWeight: theme.typography.fontWeightBold,
       color: theme.palette.text.secondary,
+      textTransform: 'uppercase',
     },
     selected: {
       color: theme.palette.text.primary,