@tduniec/backstage-plugin-time-saver/dist/components/TimeSaverPageComponent/TimeSaverPageComponent.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 React__default, { useState } from 'react';
import { Tabs, Tab, Grid, Typography, Divider, Paper } from '@material-ui/core';
import { Page, Content, ContentHeader, SupportButton, InfoCard } from '@backstage/core-components';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import { AllStatsBarChart } from '../AllStatsBarChartComponent/AllStatsBarChartComponent.esm.js';
import { ByTeamBarChart } from '../ByTeamBarCharComponent/ByTeamBarChartComponent.esm.js';
import { GroupDivisionPieChart } from '../GroupDivisionPieChartComponent/GroupDivisionPieChartComponent.esm.js';
import { DailyTimeSummaryLineChartTeamWise } from '../TeamWiseDailyTimeLinearComponent/TeamWiseDailyTimeLinearComponent.esm.js';
import { TeamWiseTimeSummaryLinearChart } from '../TeamWiseTimeSummaryLinearComponent/TeamWiseTimeSummaryLinearComponent.esm.js';
import TeamSelector from '../TeamSelectorComponent/TeamSelectorComponent.esm.js';
import { DailyTimeSummaryLineChartTemplateWise } from '../TemplateWiseDailyTimeLinearComponent/TemplateWiseWiseDailyTimeLinearComponent.esm.js';
import { TemplateWiseTimeSummaryLinearChart } from '../TemplateWiseTimeSummaryLinearComponent/TemplateWiseTimeSummaryLinearComponent.esm.js';
import TemplateAutocomplete from '../TemplateAutocompleteComponent/TemplateAutocompleteComponent.esm.js';
import { ByTemplateBarChart } from '../ByTemplateBarCharComponent/ByTemplateBarChartComponent.esm.js';
import StatsTable from '../Table/StatsTable.esm.js';
import { TemplateCountGauge } from '../Gauge/TemplatesTaskCountGauge.esm.js';
import { TimeSavedGauge } from '../Gauge/TimeSavedGauge.esm.js';
import { TeamsGauge } from '../Gauge/TeamsGauge.esm.js';
import { TemplatesGauge } from '../Gauge/TemplatesGauge.esm.js';
import { EmptyTimeSaver } from '../Gauge/EmptyDbContent.esm.js';
import { DateFiltersComponent } from '../DateFiltersComponent/DateFiltersComponent.esm.js';
import CustomHeader from '../TimeSaverHeader/TimeSaverHeaderComponent.esm.js';
import { useApi, configApiRef } from '@backstage/core-plugin-api';

const GaugesContainer = ({
  dates,
  hoursPerDay
}) => /* @__PURE__ */ React__default.createElement(
  Grid,
  {
    container: true,
    spacing: 4,
    direction: "row",
    justifyContent: "space-between",
    alignItems: "center",
    style: {
      marginTop: "12px",
      marginBottom: "12px"
    }
  },
  /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 6, sm: 6, md: 2 }, /* @__PURE__ */ React__default.createElement(Paper, { elevation: 0 }, /* @__PURE__ */ React__default.createElement(TemplateCountGauge, { dates }))),
  /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 6, sm: 6, md: 2 }, /* @__PURE__ */ React__default.createElement(Paper, { elevation: 0 }, /* @__PURE__ */ React__default.createElement(TimeSavedGauge, { heading: "Time Saved [hours]", dates }))),
  /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 6, sm: 6, md: 2 }, /* @__PURE__ */ React__default.createElement(Paper, { elevation: 0 }, /* @__PURE__ */ React__default.createElement(
    TimeSavedGauge,
    {
      number: hoursPerDay,
      heading: "Time Saved [days]",
      dates
    }
  ))),
  /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 6, sm: 6, md: 2 }, /* @__PURE__ */ React__default.createElement(Paper, { elevation: 0 }, /* @__PURE__ */ React__default.createElement(TeamsGauge, { dates }))),
  /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 6, sm: 6, md: 2 }, /* @__PURE__ */ React__default.createElement(Paper, { elevation: 0 }, /* @__PURE__ */ React__default.createElement(TemplatesGauge, { dates })))
);
const TimeSaverPageComponent = (props) => {
  const configApi = useApi(configApiRef);
  const hoursPerDay = configApi.getOptionalNumber("ts.frontend.table.hoursPerDay") ?? 8;
  const [selectedTab, setSelectedTab] = useState(0);
  const [selectedTeam, setSelectedTeam] = useState("");
  const [template, setTemplate] = useState("");
  const handleChange = (_event, _newValue) => {
    setSelectedTab(_newValue);
  };
  const handleTeamChange = (team) => {
    setSelectedTeam(team);
  };
  const handleTemplateChange = (templateUsed) => {
    setTemplate(templateUsed);
  };
  const handleClearTeam = () => {
    setSelectedTeam("");
  };
  return /* @__PURE__ */ React__default.createElement(LocalizationProvider, { dateAdapter: AdapterLuxon }, /* @__PURE__ */ React__default.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React__default.createElement(
    CustomHeader,
    {
      title: props.title,
      subtitle: props.subtitle,
      headerLabel: props.headerLabel
    }
  ), /* @__PURE__ */ React__default.createElement(Content, null, /* @__PURE__ */ React__default.createElement(ContentHeader, { title: "Time Saver" }, /* @__PURE__ */ React__default.createElement(Tabs, { value: selectedTab, onChange: handleChange, centered: false }, /* @__PURE__ */ React__default.createElement(Tab, { label: "All Stats" }), /* @__PURE__ */ React__default.createElement(Tab, { label: "By Team" }), /* @__PURE__ */ React__default.createElement(Tab, { label: "By Template" })), /* @__PURE__ */ React__default.createElement(SupportButton, null, "Time Saver plugin retrieves its config from template.metadata and groups it in a dedicated table, then it has a bunch of APIs for data queries")), /* @__PURE__ */ React__default.createElement(EmptyTimeSaver, null), /* @__PURE__ */ React__default.createElement(Grid, { container: true, spacing: 3, direction: "column" }, /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(InfoCard, { title: "Time statistics that you have saved using Backstage Templates" }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1" }, /* @__PURE__ */ React__default.createElement(Grid, { container: true, spacing: 3 }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(DateFiltersComponent, null, (dates) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, selectedTab === 0 && /* @__PURE__ */ React__default.createElement(Grid, { container: true, spacing: 2 }, /* @__PURE__ */ React__default.createElement(
    GaugesContainer,
    {
      dates,
      hoursPerDay
    }
  ), /* @__PURE__ */ React__default.createElement(Divider, { variant: "fullWidth" }), /* @__PURE__ */ React__default.createElement(Grid, { xs: 6 }, /* @__PURE__ */ React__default.createElement(AllStatsBarChart, { dates })), /* @__PURE__ */ React__default.createElement(Grid, { xs: 6 }, /* @__PURE__ */ React__default.createElement(StatsTable, { dates })), /* @__PURE__ */ React__default.createElement(Grid, { xs: 6 }, /* @__PURE__ */ React__default.createElement(
    DailyTimeSummaryLineChartTeamWise,
    {
      dates
    }
  )), /* @__PURE__ */ React__default.createElement(Grid, { xs: 6 }, /* @__PURE__ */ React__default.createElement(
    TeamWiseTimeSummaryLinearChart,
    {
      dates
    }
  )), /* @__PURE__ */ React__default.createElement(Grid, { xs: 6 }, /* @__PURE__ */ React__default.createElement(GroupDivisionPieChart, { dates }))), selectedTab === 1 && /* @__PURE__ */ React__default.createElement(Grid, { container: true, spacing: 3 }, /* @__PURE__ */ React__default.createElement(Grid, { xs: 12 }, /* @__PURE__ */ React__default.createElement(Grid, { xs: 6 }, /* @__PURE__ */ React__default.createElement(
    TeamSelector,
    {
      onTeamChange: handleTeamChange,
      onClearButtonClick: handleClearTeam
    }
  ), /* @__PURE__ */ React__default.createElement(Divider, { orientation: "vertical" }))), /* @__PURE__ */ React__default.createElement(Grid, { xs: 6 }, /* @__PURE__ */ React__default.createElement(
    ByTeamBarChart,
    {
      team: selectedTeam,
      dates
    }
  )), /* @__PURE__ */ React__default.createElement(Grid, { xs: 6 }, /* @__PURE__ */ React__default.createElement(
    StatsTable,
    {
      team: selectedTeam,
      dates
    }
  )), /* @__PURE__ */ React__default.createElement(Grid, { xs: 6 }, /* @__PURE__ */ React__default.createElement(
    DailyTimeSummaryLineChartTeamWise,
    {
      team: selectedTeam,
      dates
    }
  )), /* @__PURE__ */ React__default.createElement(Grid, { xs: 6 }, /* @__PURE__ */ React__default.createElement(
    TeamWiseTimeSummaryLinearChart,
    {
      team: selectedTeam,
      dates
    }
  ))), selectedTab === 2 && /* @__PURE__ */ React__default.createElement(Grid, { container: true, spacing: 3 }, /* @__PURE__ */ React__default.createElement(Grid, { xs: 12 }, /* @__PURE__ */ React__default.createElement(Grid, { xs: 6 }, /* @__PURE__ */ React__default.createElement(
    TemplateAutocomplete,
    {
      onTemplateChange: handleTemplateChange
    }
  ))), /* @__PURE__ */ React__default.createElement(Grid, { xs: 6 }, /* @__PURE__ */ React__default.createElement(
    ByTemplateBarChart,
    {
      templateName: template,
      dates
    }
  )), /* @__PURE__ */ React__default.createElement(Grid, { xs: 6 }, /* @__PURE__ */ React__default.createElement(
    StatsTable,
    {
      templateName: template,
      dates
    }
  )), /* @__PURE__ */ React__default.createElement(Grid, { xs: 6 }, /* @__PURE__ */ React__default.createElement(
    DailyTimeSummaryLineChartTemplateWise,
    {
      templateName: template,
      dates
    }
  )), /* @__PURE__ */ React__default.createElement(Grid, { xs: 6 }, /* @__PURE__ */ React__default.createElement(
    TemplateWiseTimeSummaryLinearChart,
    {
      templateName: template,
      dates
    }
  ))))))))))))));
};

export { TimeSaverPageComponent };
//# sourceMappingURL=TimeSaverPageComponent.esm.js.map