@electrolux-oss/plugin-infrawallet 0.1.11 → 0.1.12

package/dist/components/CostReportsTableComponent/CostReportsTableComponent.esm.js

@@ -1,25 +1,11 @@
 import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
 import Box from '@mui/material/Box';
+import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
 import { DataGrid, GridToolbarContainer, GridToolbarExport } from '@mui/x-data-grid';
-import humanFormat from 'human-format';
 import React from 'react';
-import { extractAccountInfo, getPreviousMonth } from '../../api/functions.esm.js';
+import { extractAccountInfo, formatCurrency, getPreviousMonth, getPreviousDay } from '../../api/functions.esm.js';
 import { getProviderIcon } from '../ProviderIcons/ProviderIcons.esm.js';
-import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
 
-const useStyles = makeStyles({
-  increase: {
-    color: "red"
-  },
-  decrease: {
-    color: "green"
-  },
-  container: {
-    display: "flex",
-    alignItems: "center"
-  }
-});
 function CustomToolbar() {
   return /* @__PURE__ */ React.createElement(GridToolbarContainer, null, /* @__PURE__ */ React.createElement(
     GridToolbarExport,
@@ -30,46 +16,44 @@ function CustomToolbar() {
   ));
 }
 const CostReportsTableComponent = ({ reports, aggregatedBy, periods }) => {
-  const classes = useStyles();
-  const customScale = humanFormat.Scale.create(["", "K", "M", "B"], 1e3);
-  const formatCostValue = (params, period) => {
-    const value = params.value;
-    if (typeof value === "number") {
-      const previousPeriod = period.length === 7 ? getPreviousMonth(params.field) : "";
-      const formattedValue = humanFormat(value, {
-        scale: customScale,
-        separator: "",
-        decimals: 2
-      });
-      if (periods.includes(previousPeriod) && params.row.reports[previousPeriod] > 0) {
-        const diff = params.row.reports[params.field] - params.row.reports[previousPeriod];
-        const percentage = Math.round(diff / params.row.reports[previousPeriod] * 100);
-        const mark = diff > 0 ? "+" : "";
-        if (percentage >= 1 || percentage <= -1) {
-          return `$${formattedValue} (${mark}${percentage}%)`;
+  let rows = reports;
+  const columns = [];
+  const columnTotals = {};
+  const columnGroupingModel = [];
+  if (reports && aggregatedBy !== "none") {
+    for (const period of periods) {
+      for (const report of reports) {
+        if (columnTotals[period] === void 0) {
+          columnTotals[period] = 0;
         }
+        columnTotals[period] += report.reports[period] || 0;
       }
-      return `$${formattedValue}`;
     }
-    return "-";
-  };
-  const columns = [];
+    rows = [...reports, { id: "Total", reports: columnTotals }];
+  }
   if (["account", "provider", "service"].includes(aggregatedBy)) {
     columns.push({
-      field: "PROVIDER",
+      field: "icon",
       headerName: "",
       width: 30,
+      display: "flex",
       disableExport: true,
+      sortable: false,
       renderCell: (params) => {
-        return getProviderIcon(params.row.provider);
+        if (params.id === "Total") {
+          return void 0;
+        }
+        return /* @__PURE__ */ React.createElement("div", null, getProviderIcon(params.row.provider));
       }
     });
   }
   columns.push(
+    // groupBy column
     {
       field: aggregatedBy,
-      headerName: aggregatedBy.toLocaleUpperCase("en-US"),
+      headerName: aggregatedBy === "none" ? "" : aggregatedBy.charAt(0).toUpperCase() + aggregatedBy.slice(1),
       minWidth: 200,
+      display: "flex",
       flex: 2,
       renderCell: (params) => {
         let formattedValue = params.formattedValue;
@@ -81,18 +65,29 @@ const CostReportsTableComponent = ({ reports, aggregatedBy, periods }) => {
             const account = extractAccountInfo(formattedValue);
             const accountName = account.accountName;
             const accountId = account.accountId;
-            return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "body2", className: classes.container }, accountName), /* @__PURE__ */ React.createElement(Typography, { variant: "caption", className: classes.container, color: "textSecondary" }, accountId));
+            return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, accountName), /* @__PURE__ */ React.createElement(Typography, { variant: "caption", color: "textSecondary" }, accountId));
           }
         }
-        return /* @__PURE__ */ React.createElement(Typography, { variant: "body2", component: "div", className: classes.container }, formattedValue);
+        if (params.id === "Total") {
+          return /* @__PURE__ */ React.createElement("div", { style: { fontWeight: "bold" } }, "Total");
+        }
+        return /* @__PURE__ */ React.createElement("div", null, formattedValue);
+      },
+      sortComparator: (value1, value2, params1, params2) => {
+        if (params1.id === "Total" || params2.id === "Total") {
+          return 0;
+        }
+        return value1 - value2;
       }
     },
+    // trend line column
     {
-      field: "TREND",
-      headerName: "TREND",
+      field: "trend",
+      headerName: "Trend",
       width: 100,
+      display: "flex",
       disableExport: true,
-      hideSortIcons: true,
+      sortable: false,
       renderCell: (params) => /* @__PURE__ */ React.createElement(SparkLineChart, { data: params.value ? params.value[0] : null, plotType: "bar" }),
       valueGetter: (_, row) => [
         periods.map((period) => row.reports[period] !== void 0 ? row.reports[period] : null)
@@ -100,65 +95,120 @@ const CostReportsTableComponent = ({ reports, aggregatedBy, periods }) => {
     }
   );
   periods.forEach((period) => {
-    columns.push({
-      field: period,
-      headerName: period,
+    columns.push(
+      // cost column
+      {
+        field: `cost-${period}`,
+        headerName: "Cost",
+        type: "number",
+        valueGetter: (_, row) => {
+          return row.reports[period] ? row.reports[period] : null;
+        },
+        renderCell: (params) => {
+          const value = params.value;
+          let cost = "-";
+          if (typeof value === "number") {
+            cost = formatCurrency(value);
+          }
+          return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { style: { fontWeight: params.id === "Total" ? "bold" : "normal" } }, cost));
+        },
+        sortComparator: (value1, value2, params1, params2) => {
+          if (params1.id === "Total" || params2.id === "Total") {
+            return 0;
+          }
+          return value1 - value2;
+        }
+      },
+      // change% column
+      {
+        field: `change-${period}`,
+        headerName: "Change",
+        disableExport: true,
+        sortable: false,
+        renderCell: (params) => {
+          let percentage = void 0;
+          const previousPeriod = period.length === 7 ? getPreviousMonth(period) : getPreviousDay(period);
+          if (params.row.reports[period] && periods.includes(previousPeriod) && params.row.reports[previousPeriod] > 0) {
+            const diff = params.row.reports[period] - params.row.reports[previousPeriod];
+            percentage = Math.round(diff / params.row.reports[previousPeriod] * 100);
+          }
+          if (percentage === void 0) {
+            return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", null, "-"));
+          }
+          let color = "#0052cc";
+          let backgroundColor = "#e9f2ff";
+          let mark = "";
+          if (percentage < 0) {
+            color = "#216e4e";
+            backgroundColor = "#dcfff1";
+            mark = "\u25BC";
+          } else if (percentage > 0) {
+            color = "#ae2e24";
+            backgroundColor = "#ffeceb";
+            mark = "\u25B2";
+          }
+          return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              style: {
+                fontSize: "0.82em",
+                paddingInline: "2px",
+                borderRadius: "4px",
+                color,
+                backgroundColor
+              }
+            },
+            mark,
+            Math.abs(percentage).toLocaleString(),
+            "%"
+          ));
+        }
+      }
+    );
+    columnGroupingModel.push({
+      groupId: period,
+      children: [{ field: `cost-${period}` }, { field: `change-${period}` }]
+    });
+  });
+  columns.push(
+    // total column
+    {
+      field: "total",
+      headerName: "Total",
       type: "number",
       minWidth: 150,
-      flex: 1,
       valueGetter: (_, row) => {
-        return row.reports[period] ? row.reports[period] : null;
+        let total = 0;
+        periods.forEach((period) => {
+          total += row.reports[period] ? row.reports[period] : 0;
+        });
+        return total;
       },
       renderCell: (params) => {
-        const formattedValue = formatCostValue(params, period);
-        let className = "";
-        const percentageIndex = formattedValue.indexOf("(");
-        const costStr = percentageIndex === -1 ? formattedValue : formattedValue.substring(0, percentageIndex);
-        let percentageStr = percentageIndex === -1 ? "" : formattedValue.substring(percentageIndex);
-        if (percentageStr.includes("-")) {
-          className = classes.decrease;
-          percentageStr = percentageStr.replace("-", "\u25BC");
-        } else if (percentageStr.includes("+")) {
-          className = classes.increase;
-          percentageStr = percentageStr.replace("+", "\u25B2");
+        let formattedValue = "-";
+        if (typeof params.value === "number") {
+          formattedValue = formatCurrency(params.value);
         }
-        return /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, costStr, /* @__PURE__ */ React.createElement(Typography, { variant: "inherit", className }, percentageStr));
-      }
-    });
-  });
-  columns.push({
-    field: "TOTAL",
-    headerName: "TOTAL",
-    type: "number",
-    minWidth: 150,
-    flex: 1,
-    valueGetter: (_, row) => {
-      let total = 0;
-      periods.forEach((period) => {
-        total += row.reports[period] ? row.reports[period] : 0;
-      });
-      return total;
-    },
-    renderCell: (params) => {
-      let formattedValue = "-";
-      if (typeof params.value === "number") {
-        formattedValue = `$${humanFormat(params.value, {
-          scale: customScale,
-          separator: "",
-          decimals: 2
-        })}`;
+        return /* @__PURE__ */ React.createElement("div", { style: { fontWeight: "bold" } }, formattedValue);
+      },
+      sortComparator: (value1, value2, params1, params2) => {
+        if (params1.id === "Total" || params2.id === "Total") {
+          return 0;
+        }
+        return value1 - value2;
       }
-      return /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, formattedValue);
     }
-  });
-  return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
+  );
+  return /* @__PURE__ */ React.createElement(Box, { sx: { height: 700 } }, /* @__PURE__ */ React.createElement(
     DataGrid,
     {
-      rows: reports,
+      loading: rows === void 0,
+      rows,
       columns,
+      columnGroupingModel,
       initialState: {
         sorting: {
-          sortModel: [{ field: "TOTAL", sort: "desc" }]
+          sortModel: [{ field: "total", sort: "desc" }]
         },
         pagination: {
           paginationModel: {
@@ -168,6 +218,12 @@ const CostReportsTableComponent = ({ reports, aggregatedBy, periods }) => {
       },
       pageSizeOptions: [15],
       slots: { toolbar: CustomToolbar },
+      slotProps: {
+        loadingOverlay: {
+          variant: "skeleton",
+          noRowsVariant: "skeleton"
+        }
+      },
       disableRowSelectionOnClick: true,
       disableColumnMenu: true,
       density: aggregatedBy === "account" ? "standard" : "compact"

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

@@ -1 +1 @@
-{"version":3,"file":"CostReportsTableComponent.esm.js","sources":["../../../src/components/CostReportsTableComponent/CostReportsTableComponent.tsx"],"sourcesContent":["import Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Box from '@mui/material/Box';\nimport { DataGrid, GridColDef, GridRenderCellParams, GridToolbarContainer, GridToolbarExport } from '@mui/x-data-grid';\nimport humanFormat from 'human-format';\nimport React, { FC } from 'react';\nimport { extractAccountInfo, getPreviousMonth } from '../../api/functions';\nimport { CostReportsTableComponentProps } from '../types';\nimport { getProviderIcon } from '../ProviderIcons';\nimport { SparkLineChart } from '@mui/x-charts/SparkLineChart';\n\nconst useStyles = makeStyles({\n  increase: {\n    color: 'red',\n  },\n  decrease: {\n    color: 'green',\n  },\n  container: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\nfunction CustomToolbar() {\n  return (\n    <GridToolbarContainer>\n      <GridToolbarExport\n        csvOptions={{ fileName: 'InfraWallet-export' }}\n        printOptions={{ disableToolbarButton: true }}\n      />\n    </GridToolbarContainer>\n  );\n}\n\nexport const CostReportsTableComponent: FC<CostReportsTableComponentProps> = ({ reports, aggregatedBy, periods }) => {\n  const classes = useStyles();\n  const customScale = humanFormat.Scale.create(['', 'K', 'M', 'B'], 1000);\n\n  const formatCostValue = (params: GridRenderCellParams, period: string): string => {\n    const value = params.value;\n    if (typeof value === 'number') {\n      const previousPeriod = period.length === 7 ? getPreviousMonth(params.field) : '';\n      const formattedValue = humanFormat(value, {\n        scale: customScale,\n        separator: '',\n        decimals: 2,\n      });\n      if (periods.includes(previousPeriod) && params.row.reports[previousPeriod] > 0) {\n        const diff = params.row.reports[params.field] - params.row.reports[previousPeriod];\n        const percentage = Math.round((diff / params.row.reports[previousPeriod]) * 100);\n        const mark = diff > 0 ? '+' : '';\n        // only display percentage change if it is larger than 1% or less than -1%\n        if (percentage >= 1 || percentage <= -1) {\n          return `$${formattedValue} (${mark}${percentage}%)`;\n        }\n      }\n      return `$${formattedValue}`;\n    }\n    return '-';\n  };\n\n  const columns: GridColDef[] = [];\n  if (['account', 'provider', 'service'].includes(aggregatedBy)) {\n    columns.push({\n      field: 'PROVIDER',\n      headerName: '',\n      width: 30,\n      disableExport: true,\n      renderCell: (params: GridRenderCellParams): React.ReactNode => {\n        return getProviderIcon(params.row.provider);\n      },\n    });\n  }\n\n  columns.push(\n    {\n      field: aggregatedBy,\n      headerName: aggregatedBy.toLocaleUpperCase('en-US'),\n      minWidth: 200,\n      flex: 2,\n      renderCell: (params: GridRenderCellParams): React.ReactNode => {\n        let formattedValue = params.formattedValue;\n\n        if (aggregatedBy === 'service' || aggregatedBy === 'account') {\n          // remove provider names\n          if (params.formattedValue !== undefined && params.formattedValue.indexOf('/') !== -1) {\n            formattedValue = params.formattedValue.split('/')[1];\n          }\n\n          if (aggregatedBy === 'account' && formattedValue) {\n            const account = extractAccountInfo(formattedValue);\n            const accountName = account.accountName;\n            const accountId = account.accountId;\n\n            return (\n              <div>\n                <Typography variant=\"body2\" className={classes.container}>\n                  {accountName}\n                </Typography>\n                <Typography variant=\"caption\" className={classes.container} color=\"textSecondary\">\n                  {accountId}\n                </Typography>\n              </div>\n            );\n          }\n        }\n\n        return (\n          <Typography variant=\"body2\" component=\"div\" className={classes.container}>\n            {formattedValue}\n          </Typography>\n        );\n      },\n    },\n    {\n      field: 'TREND',\n      headerName: 'TREND',\n      width: 100,\n      disableExport: true,\n      hideSortIcons: true,\n      renderCell: (params: GridRenderCellParams) => (\n        <SparkLineChart data={params.value ? params.value[0] : null} plotType=\"bar\" />\n      ),\n      valueGetter: (_, row) => [\n        periods.map(period => (row.reports[period] !== undefined ? row.reports[period] : null)),\n      ],\n    },\n  );\n\n  periods.forEach(period => {\n    columns.push({\n      field: period,\n      headerName: period,\n      type: 'number',\n      minWidth: 150,\n      flex: 1,\n      valueGetter: (_, row) => {\n        return row.reports[period] ? row.reports[period] : null;\n      },\n      renderCell: (params: GridRenderCellParams): React.ReactNode => {\n        const formattedValue = formatCostValue(params, period);\n        let className = '';\n        const percentageIndex = formattedValue.indexOf('(');\n        const costStr = percentageIndex === -1 ? formattedValue : formattedValue.substring(0, percentageIndex);\n        let percentageStr = percentageIndex === -1 ? '' : formattedValue.substring(percentageIndex);\n        if (percentageStr.includes('-')) {\n          className = classes.decrease;\n          percentageStr = percentageStr.replace('-', '▼');\n        } else if (percentageStr.includes('+')) {\n          className = classes.increase;\n          percentageStr = percentageStr.replace('+', '▲');\n        }\n\n        return (\n          <Typography variant=\"body2\">\n            {costStr}\n            <Typography variant=\"inherit\" className={className}>\n              {percentageStr}\n            </Typography>\n          </Typography>\n        );\n      },\n    });\n  });\n\n  columns.push({\n    field: 'TOTAL',\n    headerName: 'TOTAL',\n    type: 'number',\n    minWidth: 150,\n    flex: 1,\n    valueGetter: (_, row) => {\n      let total = 0;\n      periods.forEach(period => {\n        total += row.reports[period] ? row.reports[period] : 0;\n      });\n      return total;\n    },\n    renderCell: (params: GridRenderCellParams): React.ReactNode => {\n      let formattedValue = '-';\n      if (typeof params.value === 'number') {\n        formattedValue = `$${humanFormat(params.value, {\n          scale: customScale,\n          separator: '',\n          decimals: 2,\n        })}`;\n      }\n      return <Typography variant=\"body2\">{formattedValue}</Typography>;\n    },\n  });\n\n  return (\n    <Box>\n      <DataGrid\n        rows={reports}\n        columns={columns}\n        initialState={{\n          sorting: {\n            sortModel: [{ field: 'TOTAL', sort: 'desc' }],\n          },\n          pagination: {\n            paginationModel: {\n              pageSize: 15,\n            },\n          },\n        }}\n        pageSizeOptions={[15]}\n        slots={{ toolbar: CustomToolbar }}\n        disableRowSelectionOnClick\n        disableColumnMenu\n        density={aggregatedBy === 'account' ? 'standard' : 'compact'}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CostReportsTableComponent.esm.js","sources":["../../../src/components/CostReportsTableComponent/CostReportsTableComponent.tsx"],"sourcesContent":["import Typography from '@material-ui/core/Typography';\nimport Box from '@mui/material/Box';\nimport { SparkLineChart } from '@mui/x-charts/SparkLineChart';\nimport {\n  DataGrid,\n  GridColDef,\n  GridColumnGroupingModel,\n  GridRenderCellParams,\n  GridToolbarContainer,\n  GridToolbarExport,\n} from '@mui/x-data-grid';\nimport React, { FC } from 'react';\nimport { extractAccountInfo, formatCurrency, getPreviousDay, getPreviousMonth } from '../../api/functions';\nimport { getProviderIcon } from '../ProviderIcons';\nimport { CostReportsTableComponentProps } from '../types';\n\nfunction CustomToolbar() {\n  return (\n    <GridToolbarContainer>\n      <GridToolbarExport\n        csvOptions={{ fileName: 'InfraWallet-export' }}\n        printOptions={{ disableToolbarButton: true }}\n      />\n    </GridToolbarContainer>\n  );\n}\n\nexport const CostReportsTableComponent: FC<CostReportsTableComponentProps> = ({ reports, aggregatedBy, periods }) => {\n  let rows: any[] | undefined = reports;\n  const columns: GridColDef[] = [];\n  const columnTotals: { [key: string]: number } = {};\n  const columnGroupingModel: GridColumnGroupingModel = [];\n\n  if (reports && aggregatedBy !== 'none') {\n    for (const period of periods) {\n      for (const report of reports) {\n        if (columnTotals[period] === undefined) {\n          columnTotals[period] = 0;\n        }\n\n        columnTotals[period] += report.reports[period] || 0;\n      }\n    }\n\n    rows = [...reports, { id: 'Total', reports: columnTotals }];\n  }\n\n  if (['account', 'provider', 'service'].includes(aggregatedBy)) {\n    // provider icon column\n    columns.push({\n      field: 'icon',\n      headerName: '',\n      width: 30,\n      display: 'flex',\n      disableExport: true,\n      sortable: false,\n      renderCell: (params: GridRenderCellParams): React.ReactNode => {\n        if (params.id === 'Total') {\n          return undefined;\n        }\n\n        return <div>{getProviderIcon(params.row.provider)}</div>;\n      },\n    });\n  }\n\n  columns.push(\n    // groupBy column\n    {\n      field: aggregatedBy,\n      headerName: aggregatedBy === 'none' ? '' : aggregatedBy.charAt(0).toUpperCase() + aggregatedBy.slice(1),\n      minWidth: 200,\n      display: 'flex',\n      flex: 2,\n      renderCell: (params: GridRenderCellParams): React.ReactNode => {\n        let formattedValue = params.formattedValue;\n\n        if (aggregatedBy === 'service' || aggregatedBy === 'account') {\n          // remove provider names\n          if (params.formattedValue !== undefined && params.formattedValue.indexOf('/') !== -1) {\n            formattedValue = params.formattedValue.split('/')[1];\n          }\n\n          if (aggregatedBy === 'account' && formattedValue) {\n            const account = extractAccountInfo(formattedValue);\n            const accountName = account.accountName;\n            const accountId = account.accountId;\n\n            return (\n              <div>\n                <Typography variant=\"body2\">{accountName}</Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {accountId}\n                </Typography>\n              </div>\n            );\n          }\n        }\n\n        if (params.id === 'Total') {\n          return <div style={{ fontWeight: 'bold' }}>Total</div>;\n        }\n\n        return <div>{formattedValue}</div>;\n      },\n      sortComparator: (value1, value2, params1, params2) => {\n        if (params1.id === 'Total' || params2.id === 'Total') {\n          return 0;\n        }\n        return value1 - value2;\n      },\n    },\n    // trend line column\n    {\n      field: 'trend',\n      headerName: 'Trend',\n      width: 100,\n      display: 'flex',\n      disableExport: true,\n      sortable: false,\n      renderCell: (params: GridRenderCellParams) => (\n        <SparkLineChart data={params.value ? params.value[0] : null} plotType=\"bar\" />\n      ),\n      valueGetter: (_, row) => [\n        periods.map(period => (row.reports[period] !== undefined ? row.reports[period] : null)),\n      ],\n    },\n  );\n\n  periods.forEach(period => {\n    columns.push(\n      // cost column\n      {\n        field: `cost-${period}`,\n        headerName: 'Cost',\n        type: 'number',\n        valueGetter: (_, row) => {\n          return row.reports[period] ? row.reports[period] : null;\n        },\n        renderCell: (params: GridRenderCellParams): React.ReactNode => {\n          const value = params.value;\n          let cost = '-';\n\n          if (typeof value === 'number') {\n            cost = formatCurrency(value);\n          }\n\n          return (\n            <div>\n              <span style={{ fontWeight: params.id === 'Total' ? 'bold' : 'normal' }}>{cost}</span>\n            </div>\n          );\n        },\n        sortComparator: (value1, value2, params1, params2) => {\n          if (params1.id === 'Total' || params2.id === 'Total') {\n            return 0;\n          }\n          return value1 - value2;\n        },\n      },\n      // change% column\n      {\n        field: `change-${period}`,\n        headerName: 'Change',\n        disableExport: true,\n        sortable: false,\n        renderCell: (params: GridRenderCellParams): React.ReactNode => {\n          let percentage = undefined;\n          const previousPeriod = period.length === 7 ? getPreviousMonth(period) : getPreviousDay(period);\n          if (\n            params.row.reports[period] &&\n            periods.includes(previousPeriod) &&\n            params.row.reports[previousPeriod] > 0\n          ) {\n            const diff = params.row.reports[period] - params.row.reports[previousPeriod];\n            percentage = Math.round((diff / params.row.reports[previousPeriod]) * 100);\n          }\n\n          if (percentage === undefined) {\n            return (\n              <div>\n                <span>-</span>\n              </div>\n            );\n          }\n\n          let color = '#0052cc';\n          let backgroundColor = '#e9f2ff';\n          let mark = '';\n          if (percentage < 0) {\n            color = '#216e4e';\n            backgroundColor = '#dcfff1';\n            mark = '▼';\n          } else if (percentage > 0) {\n            color = '#ae2e24';\n            backgroundColor = '#ffeceb';\n            mark = '▲';\n          }\n\n          return (\n            <div>\n              <span\n                style={{\n                  fontSize: '0.82em',\n                  paddingInline: '2px',\n                  borderRadius: '4px',\n                  color: color,\n                  backgroundColor: backgroundColor,\n                }}\n              >\n                {mark}\n                {Math.abs(percentage).toLocaleString()}%\n              </span>\n            </div>\n          );\n        },\n      },\n    );\n\n    columnGroupingModel.push({\n      groupId: period,\n      children: [{ field: `cost-${period}` }, { field: `change-${period}` }],\n    });\n  });\n\n  columns.push(\n    // total column\n    {\n      field: 'total',\n      headerName: 'Total',\n      type: 'number',\n      minWidth: 150,\n      valueGetter: (_, row) => {\n        let total = 0;\n        periods.forEach(period => {\n          total += row.reports[period] ? row.reports[period] : 0;\n        });\n        return total;\n      },\n      renderCell: (params: GridRenderCellParams): React.ReactNode => {\n        let formattedValue = '-';\n        if (typeof params.value === 'number') {\n          formattedValue = formatCurrency(params.value);\n        }\n        return <div style={{ fontWeight: 'bold' }}>{formattedValue}</div>;\n      },\n      sortComparator: (value1, value2, params1, params2) => {\n        if (params1.id === 'Total' || params2.id === 'Total') {\n          return 0;\n        }\n        return value1 - value2;\n      },\n    },\n  );\n\n  return (\n    <Box sx={{ height: 700 }}>\n      <DataGrid\n        loading={rows === undefined}\n        rows={rows}\n        columns={columns}\n        columnGroupingModel={columnGroupingModel}\n        initialState={{\n          sorting: {\n            sortModel: [{ field: 'total', sort: 'desc' }],\n          },\n          pagination: {\n            paginationModel: {\n              pageSize: 15,\n            },\n          },\n        }}\n        pageSizeOptions={[15]}\n        slots={{ toolbar: CustomToolbar }}\n        slotProps={{\n          loadingOverlay: {\n            variant: 'skeleton',\n            noRowsVariant: 'skeleton',\n          },\n        }}\n        disableRowSelectionOnClick\n        disableColumnMenu\n        density={aggregatedBy === 'account' ? 'standard' : 'compact'}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/EntityInfraWalletCard/EntityInfraWalletCard.esm.js

@@ -0,0 +1,254 @@
+import { Progress, InfoCard } from '@backstage/core-components';
+import { useApi } from '@backstage/core-plugin-api';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import { Tabs, Tab, Box, Typography, Table, TableHead, TableRow, TableCell, TableBody } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Alert from '@mui/material/Alert';
+import React, { useState, useEffect } from 'react';
+import { ResponsiveContainer, LineChart, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Line } from 'recharts';
+import { infraWalletApiRef } from '../../api/InfraWalletApi.esm.js';
+
+const useStyles = makeStyles({
+  increase: {
+    color: "#ae2e24",
+    backgroundColor: "#ffeceb",
+    borderRadius: "4px",
+    padding: "2px 4px",
+    fontSize: "0.82em",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Open Sans", "Helvetica Neue", sans-serif'
+  },
+  decrease: {
+    color: "#216e4e",
+    backgroundColor: "#dcfff1",
+    borderRadius: "4px",
+    padding: "2px 4px",
+    fontSize: "0.82em",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Open Sans", "Helvetica Neue", sans-serif'
+  },
+  noChange: {
+    color: "#0052cc",
+    backgroundColor: "#e9f2ff",
+    borderRadius: "4px",
+    padding: "2px 4px",
+    fontSize: "0.82em",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Open Sans", "Helvetica Neue", sans-serif'
+  },
+  regular: {
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Open Sans", "Helvetica Neue", sans-serif'
+  },
+  bold: {
+    fontWeight: "bold",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Open Sans", "Helvetica Neue", sans-serif'
+  }
+});
+const COLORS = [
+  "#8884d8",
+  "#82ca9d",
+  "#ffc658",
+  "#ff7300",
+  "#413ea0",
+  "#ff0000",
+  "#00ff00",
+  "#0000ff",
+  "#ff00ff",
+  "#00ffff"
+];
+const EntityInfraWalletCard = () => {
+  var _a, _b;
+  const classes = useStyles();
+  const { entity } = useEntity();
+  const infrawalletApi = useApi(infraWalletApiRef);
+  const [costData, setCostData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [tabIndex, setTabIndex] = useState(0);
+  useEffect(() => {
+    const fetchCostData = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const annotations = entity.metadata.annotations || {};
+        const annotationKeys = [
+          "infrawallet.io/project",
+          "infrawallet.io/account",
+          "infrawallet.io/service",
+          "infrawallet.io/category",
+          "infrawallet.io/provider"
+        ];
+        const filtersObj = {};
+        annotationKeys.forEach((key) => {
+          if (annotations[key]) {
+            const shortKey = key.replace("infrawallet.io/", "");
+            const values = annotations[key].split(",").map((v) => v.trim()).filter((v) => v.length > 0);
+            filtersObj[shortKey] = values;
+          }
+        });
+        if (annotations["infrawallet.io/extra-filters"]) {
+          const extraFilters = annotations["infrawallet.io/extra-filters"];
+          extraFilters.split(",").forEach((pair) => {
+            const [key, value] = pair.split(":").map((s) => s.trim());
+            if (key && value) {
+              const values = value.split("|").map((v) => v.trim()).filter((v) => v.length > 0);
+              filtersObj[key] = values;
+            }
+          });
+        }
+        const filtersArray = Object.entries(filtersObj).map(([key, values]) => {
+          if (values.length === 1) {
+            return `${key}:${values[0]}`;
+          }
+          const valuesString = values.join("|");
+          return `${key}:(${valuesString})`;
+        });
+        const filters = `(${filtersArray.join(",")})`;
+        const tags = [];
+        const groups = "";
+        const granularity = "monthly";
+        const endTime = /* @__PURE__ */ new Date();
+        const startTime = /* @__PURE__ */ new Date();
+        startTime.setMonth(endTime.getMonth() - 2);
+        const costReportsResponse = await infrawalletApi.getCostReports(
+          filters,
+          tags,
+          groups,
+          granularity,
+          startTime,
+          endTime
+        );
+        if (costReportsResponse.status !== 200) {
+          throw new Error("Failed to fetch cost reports");
+        }
+        setCostData(costReportsResponse.data || null);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Unknown error occurred");
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchCostData();
+  }, [entity, infrawalletApi]);
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  if (error) {
+    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, error);
+  }
+  if (!costData || costData.length === 0) {
+    return /* @__PURE__ */ React.createElement(Alert, { severity: "info" }, "No cost data available for this entity.");
+  }
+  const periods = /* @__PURE__ */ new Set();
+  costData.forEach((report) => {
+    Object.keys(report.reports).forEach((period) => periods.add(period));
+  });
+  const sortedPeriods = Array.from(periods).sort();
+  const totalCostsByPeriod = sortedPeriods.map((period) => {
+    const total = costData.reduce((sum, report) => {
+      return sum + (report.reports[period] || 0);
+    }, 0);
+    return { period, total };
+  });
+  const currentPeriod = sortedPeriods[sortedPeriods.length - 1];
+  const previousPeriod = sortedPeriods.length > 1 ? sortedPeriods[sortedPeriods.length - 2] : null;
+  const totalCost = ((_a = totalCostsByPeriod.find((item) => item.period === currentPeriod)) == null ? void 0 : _a.total) || 0;
+  const previousTotalCost = previousPeriod ? ((_b = totalCostsByPeriod.find((item) => item.period === previousPeriod)) == null ? void 0 : _b.total) || 0 : 0;
+  const percentageChange = previousTotalCost !== 0 ? (totalCost - previousTotalCost) / previousTotalCost * 100 : 0;
+  const percentageChangeFormatted = Math.abs(percentageChange).toFixed(2);
+  let mark = "";
+  if (percentageChange < 0) {
+    mark = "\u25BC";
+  } else if (percentageChange > 0) {
+    mark = "\u25B2";
+  }
+  const projects = Array.from(
+    new Set(
+      costData.map((report) => {
+        const project = report.project;
+        return typeof project === "string" ? project : void 0;
+      }).filter((project) => !!project)
+    )
+  );
+  if (projects.length === 0) {
+    return /* @__PURE__ */ React.createElement(Alert, { severity: "warning" }, "No project data available to display in the chart.");
+  }
+  const chartData = sortedPeriods.map((period) => {
+    const dataPoint = { period };
+    projects.forEach((project) => {
+      const projectReports = costData.filter((report) => report.project === project);
+      const total = projectReports.reduce((sum, report) => {
+        return sum + (report.reports[period] || 0);
+      }, 0);
+      dataPoint[project] = total;
+    });
+    return dataPoint;
+  });
+  const perServiceCosts = costData.reduce((acc, report) => {
+    const service = report.service;
+    const cost = report.reports[currentPeriod] || 0;
+    if (typeof service === "string") {
+      if (!acc[service]) {
+        acc[service] = 0;
+      }
+      acc[service] += cost;
+    }
+    return acc;
+  }, {});
+  const prevPerServiceCosts = previousPeriod ? costData.reduce((acc, report) => {
+    const service = report.service;
+    const cost = report.reports[previousPeriod] || 0;
+    if (typeof service === "string") {
+      if (!acc[service]) {
+        acc[service] = 0;
+      }
+      acc[service] += cost;
+    }
+    return acc;
+  }, {}) : {};
+  const serviceRows = Object.entries(perServiceCosts).map(([service, cost]) => {
+    const prevCost = prevPerServiceCosts[service] || 0;
+    const change = prevCost !== 0 ? (cost - prevCost) / prevCost * 100 : 0;
+    return {
+      service,
+      cost,
+      change
+    };
+  });
+  const getChangeClass = (change) => {
+    if (change > 0) {
+      return classes.increase;
+    }
+    if (change === 0) {
+      return classes.noChange;
+    }
+    return classes.decrease;
+  };
+  const getChangeMark = (change) => {
+    if (change < 0) {
+      return "\u25BC";
+    }
+    if (change > 0) {
+      return "\u25B2";
+    }
+    return "";
+  };
+  const handleTabChange = (_event, newValue) => {
+    setTabIndex(newValue);
+  };
+  return /* @__PURE__ */ React.createElement(InfoCard, { title: "InfraWallet" }, /* @__PURE__ */ React.createElement(Tabs, { value: tabIndex, onChange: handleTabChange, "aria-label": "Cost Tabs" }, /* @__PURE__ */ React.createElement(Tab, { label: "Total Cost" }), /* @__PURE__ */ React.createElement(Tab, { label: "Service Breakdown" })), tabIndex === 0 && /* @__PURE__ */ React.createElement(Box, { p: 2 }, /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center" }, previousTotalCost > 0 && /* @__PURE__ */ React.createElement(Box, { className: getChangeClass(percentageChange), mr: 1 }, mark, " ", percentageChangeFormatted, "%"), /* @__PURE__ */ React.createElement(Typography, { variant: "h6", className: classes.bold }, "Current Month: $", totalCost.toFixed(2))), /* @__PURE__ */ React.createElement(ResponsiveContainer, { width: "100%", height: 300 }, /* @__PURE__ */ React.createElement(LineChart, { data: chartData }, /* @__PURE__ */ React.createElement(CartesianGrid, { strokeDasharray: "3 3" }), /* @__PURE__ */ React.createElement(XAxis, { dataKey: "period" }), /* @__PURE__ */ React.createElement(YAxis, null), /* @__PURE__ */ React.createElement(Tooltip, null), /* @__PURE__ */ React.createElement(Legend, null), projects.map((project, index) => /* @__PURE__ */ React.createElement(
+    Line,
+    {
+      key: project,
+      type: "monotone",
+      dataKey: project,
+      stroke: COLORS[index % COLORS.length],
+      activeDot: { r: 8 }
+    }
+  ))))), tabIndex === 1 && /* @__PURE__ */ React.createElement(Box, { p: 2 }, /* @__PURE__ */ React.createElement(Table, { size: "small" }, /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, null, /* @__PURE__ */ React.createElement(TableCell, { className: classes.bold }, "Service"), /* @__PURE__ */ React.createElement(TableCell, { align: "right", className: classes.bold }, "Monthly Cost"), /* @__PURE__ */ React.createElement(TableCell, { align: "right", className: classes.bold }, "Monthly Change"))), /* @__PURE__ */ React.createElement(TableBody, null, serviceRows.map((row) => {
+    const serviceChangeClass = getChangeClass(row.change);
+    const serviceMark = getChangeMark(row.change);
+    const changeFormatted = Math.abs(row.change).toFixed(2);
+    return /* @__PURE__ */ React.createElement(TableRow, { key: row.service }, /* @__PURE__ */ React.createElement(TableCell, { component: "th", scope: "row" }, row.service), /* @__PURE__ */ React.createElement(TableCell, { align: "right" }, "$", row.cost.toFixed(2)), /* @__PURE__ */ React.createElement(TableCell, { align: "right" }, /* @__PURE__ */ React.createElement(Box, { className: serviceChangeClass, display: "inline" }, serviceMark, " ", changeFormatted, "%")));
+  })))));
+};
+
+export { EntityInfraWalletCard };
+//# sourceMappingURL=EntityInfraWalletCard.esm.js.map