@tduniec/backstage-plugin-time-saver/dist/components/ByTeamBarCharComponent/ByTeamBarChartComponent.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, useEffect } from 'react';
import { Chart, CategoryScale, LinearScale, BarElement, Title, Tooltip } from 'chart.js';
import { Bar } from 'react-chartjs-2';
import { useApi, configApiRef, fetchApiRef } from '@backstage/core-plugin-api';
import { createUrlWithDates, getRandomColor } from '../utils.esm.js';
import CircularProgress from '@material-ui/core/CircularProgress';
import { useTheme } from '@material-ui/core';

Chart.register(CategoryScale, LinearScale, BarElement, Title, Tooltip);
function ByTeamBarChart({
  team,
  dates
}) {
  const configApi = useApi(configApiRef);
  const fetchApi = useApi(fetchApiRef);
  const [data, setData] = useState(null);
  const theme = useTheme();
  useEffect(() => {
    fetchApi.fetch(
      createUrlWithDates(
        `${configApi.getString(
          "backend.baseUrl"
        )}/api/time-saver/getStats?team=${team} `,
        dates
      )
    ).then((response) => response.json()).then((dt) => setData(dt)).catch();
  }, [configApi, team, fetchApi, dates]);
  if (!data) {
    return /* @__PURE__ */ React__default.createElement(CircularProgress, null);
  }
  const options = {
    plugins: {
      title: {
        display: true,
        text: data.team || "",
        color: theme.palette.text.primary
      },
      legend: {
        display: true,
        labels: {
          color: theme.palette.text.primary
        }
      }
    },
    responsive: true,
    interaction: {
      mode: "index",
      intersect: false
    },
    scales: {
      x: {
        stacked: true,
        grid: {
          display: true
        },
        ticks: {
          color: theme.palette.text.primary
        }
      },
      y: {
        stacked: true,
        grid: {
          display: true
        },
        ticks: {
          color: theme.palette.text.primary
        }
      }
    }
  };
  const labels = Array.from(new Set(data.stats.map((stat) => stat.templateName)));
  const datasets = data.stats.map((stat) => stat.timeSaved);
  const backgroundColors = Array.from(
    { length: datasets.length },
    () => getRandomColor()
  );
  const dataAll = {
    labels,
    datasets: [
      {
        label: "Time Saved",
        data: datasets,
        backgroundColor: backgroundColors
      }
    ]
  };
  return /* @__PURE__ */ React__default.createElement(Bar, { options, data: dataAll });
}

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