@tduniec/backstage-plugin-time-saver/dist/components/Table/StatsTable.esm.js

This plugin provides an implementation of charts and statistics related to your time savings that are coming from usage of your templates. Plugins is built from frontend and backend part. This part of plugin `frontend` is responsible of providing views wi

import { jsx } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import CircularProgress from '@material-ui/core/CircularProgress';
import { useApi, configApiRef, fetchApiRef } from '@backstage/core-plugin-api';
import { DataGrid } from '@mui/x-data-grid';
import { useTheme, Paper } from '@material-ui/core';
import { createUrlWithDates } from '../utils.esm.js';

const StatsTable = ({ team, templateName, dates }) => {
  const [data, setData] = useState(null);
  const [sortModel, setSortModel] = useState([
    { field: "sum", sort: "asc" }
  ]);
  const configApi = useApi(configApiRef);
  const fetchApi = useApi(fetchApiRef);
  const showTimeInDays = configApi.getOptionalBoolean("ts.frontend.table.showInDays") ?? false;
  const hoursPerDay = configApi.getOptionalNumber("ts.frontend.table.hoursPerDay") ?? 8;
  const theme = useTheme();
  useEffect(() => {
    let url = `${configApi.getString(
      "backend.baseUrl"
    )}/api/time-saver/getStats`;
    if (team) {
      url = `${url}?team=${team}`;
    } else if (templateName) {
      url = `${url}?templateName=${templateName}`;
    }
    fetchApi.fetch(createUrlWithDates(url, dates)).then((response) => response.json()).then((dt) => {
      const statsWithIds = dt.stats.map((stat, index) => ({
        ...stat,
        id: index.toString()
      }));
      setData(statsWithIds);
      setSortModel([{ field: "sum", sort: "desc" }]);
    }).catch();
  }, [configApi, team, templateName, fetchApi, dates]);
  if (!data) {
    return /* @__PURE__ */ jsx(CircularProgress, {});
  }
  const columns = [
    { field: "team", headerName: "Team", flex: 1, sortable: true },
    {
      field: "templateName",
      headerName: "Template Name",
      flex: 1,
      sortable: true
    },
    {
      field: "timeSaved",
      headerName: showTimeInDays ? "Saved Time [days]" : "Saved Time [hours]",
      flex: 1,
      sortable: true,
      valueGetter: (params) => {
        const timeInHours = params.row.timeSaved;
        if (showTimeInDays) {
          return (timeInHours / hoursPerDay).toFixed(0);
        }
        return timeInHours;
      }
    }
  ].filter((col) => data.some((row) => !!row[col.field]));
  return /* @__PURE__ */ jsx(
    Paper,
    {
      style: {
        height: 400,
        width: "100%",
        margin: "16px",
        padding: "16px",
        backgroundColor: theme.palette.background.paper
      },
      children: /* @__PURE__ */ jsx(
        DataGrid,
        {
          rows: data,
          columns,
          sortModel,
          onSortModelChange: (model) => setSortModel(model),
          sx: {
            color: theme.palette.text.primary,
            "& .MuiDataGrid-cell:hover": { color: theme.palette.text.secondary },
            "& .MuiDataGrid-footerContainer": {
              color: theme.palette.text.primary
            },
            "& .v5-MuiToolbar-root": {
              color: theme.palette.text.primary
            },
            "& .v5-MuiTablePagination-actions button": {
              color: theme.palette.text.primary
            }
          }
        }
      )
    }
  );
};

export { StatsTable as default };
//# sourceMappingURL=StatsTable.esm.js.map