Making a possibility to hide a trending line in a cost insights plugin

Signed-off-by: bnechyporenko <bnechyporenko@bol.com>

.changeset/yellow-forks-knock.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-cost-insights': patch
+---
+
+Making a possibility to hide a trending line in a cost insights plugin

plugins/cost-insights/api-report.md

@@ -316,7 +316,7 @@ const costInsightsPlugin: BackstagePlugin<
     unlabeledDataflowAlerts: RouteRef<undefined>;
   },
   {},
-  {}
+  CostInsightsInputPluginOptions
 >;
 export { costInsightsPlugin };
 export { costInsightsPlugin as plugin };

plugins/cost-insights/src/components/CostOverviewCard/CostOverviewChart.tsx

@@ -48,7 +48,8 @@ import { useCostOverviewStyles as useStyles } from '../../utils/styles';
 import { groupByDate, toDataMax, trendFrom } from '../../utils/charts';
 import { aggregationSort } from '../../utils/sort';
 import { CostOverviewLegend } from './CostOverviewLegend';
-import { TooltipRenderer } from '../../types/Tooltip';
+import { TooltipRenderer } from '../../types';
+import { useCostInsightsOptions } from '../../options';
 
 type CostOverviewChartProps = {
   metric: Maybe<Metric>;
@@ -132,6 +133,8 @@ export const CostOverviewChart = ({
     );
   };
 
+  const { showTrendLine } = useCostInsightsOptions();
+
   return (
     <Box display="flex" flexDirection="column">
       <CostOverviewLegend
@@ -177,15 +180,17 @@ export const CostOverviewChart = ({
             stroke="none"
             yAxisId={data.dailyCost.dataKey}
           />
-          <Line
-            activeDot={false}
-            dataKey="trend"
-            dot={false}
-            isAnimationActive={false}
-            strokeWidth={2}
-            stroke={theme.palette.blue}
-            yAxisId={data.dailyCost.dataKey}
-          />
+          {showTrendLine && (
+            <Line
+              activeDot={false}
+              dataKey="trend"
+              dot={false}
+              isAnimationActive={false}
+              strokeWidth={2}
+              stroke={theme.palette.blue}
+              yAxisId={data.dailyCost.dataKey}
+            />
+          )}
           {metric && (
             <Line
               dataKey={data.metric.dataKey}

plugins/cost-insights/src/options.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { usePluginOptions } from '@backstage/core-plugin-api';
+
+export type CostInsightsPluginOptions = {
+  showTrendLine: boolean;
+};
+
+/** @ignore */
+export type CostInsightsInputPluginOptions = {
+  showTrendLine: boolean;
+};
+
+export const useCostInsightsOptions = () =>
+  usePluginOptions<CostInsightsPluginOptions>();

plugins/cost-insights/src/plugin.ts

@@ -19,6 +19,10 @@ import {
   createRouteRef,
   createRoutableExtension,
 } from '@backstage/core-plugin-api';
+import {
+  CostInsightsInputPluginOptions,
+  CostInsightsPluginOptions,
+} from './options';
 
 export const rootRouteRef = createRouteRef({
   id: 'cost-insights',
@@ -41,6 +45,14 @@ export const costInsightsPlugin = createPlugin({
     growthAlerts: projectGrowthAlertRef,
     unlabeledDataflowAlerts: unlabeledDataflowAlertRef,
   },
+  __experimentalConfigure(
+    options?: CostInsightsInputPluginOptions,
+  ): CostInsightsPluginOptions {
+    const defaultOptions = {
+      showTrendLine: true,
+    };
+    return { ...defaultOptions, ...options };
+  },
 });
 
 /** @public */