@tduniec/backstage-plugin-time-saver/dist/components/TemplateWiseTimeSummaryLinearComponent/TemplateWiseTimeSummaryLinearComponent.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 { Chart, LineElement, PointElement, Title, Tooltip, Legend } from 'chart.js';
import { Line } 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(LineElement, PointElement, Title, Tooltip, Legend);
function TemplateWiseTimeSummaryLinearChart({
  templateName,
  dates
}) {
  const configApi = useApi(configApiRef);
  const fetchApi = useApi(fetchApiRef);
  const [data, setData] = useState(null);
  const theme = useTheme();
  useEffect(() => {
    const url = createUrlWithDates(
      `${configApi.getString(
        "backend.baseUrl"
      )}/api/time-saver/getTimeSummary/template`,
      dates
    );
    fetchApi.fetch(url).then((response) => response.json()).then((dt) => {
      dt.stats.sort(
        (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
      );
      setData(dt);
    }).catch();
  }, [configApi, templateName, fetchApi, dates]);
  if (!data) {
    return /* @__PURE__ */ jsx(CircularProgress, {});
  }
  let filteredData;
  if (templateName) {
    filteredData = {
      stats: data.stats.filter(
        (stat) => stat.templateName === templateName
      )
    };
  } else {
    filteredData = data;
  }
  const uniqueTemplates = Array.from(
    new Set(
      filteredData.stats.map(
        (stat) => stat.templateName
      )
    )
  );
  const options = {
    plugins: {
      title: {
        display: true,
        text: "Time Summary by Template",
        color: theme.palette.text.primary
      }
    },
    responsive: true,
    scales: {
      x: [
        {
          type: "time",
          time: {
            unit: "day",
            tooltipFormat: "YYYY-MM-DD",
            displayFormats: {
              day: "YYYY-MM-DD"
            },
            bounds: "data"
          },
          scaleLabel: {
            display: true,
            labelString: "Date"
          }
        }
      ],
      y: [
        {
          stacked: true,
          beginAtZero: true,
          scaleLabel: {
            display: true,
            labelString: "Total Time Saved"
          }
        }
      ]
    }
  };
  const uniqueDates = Array.from(new Set(data.stats.map((stat) => stat.date)));
  const allData = {
    labels: uniqueDates,
    datasets: uniqueTemplates.map((tn) => {
      const templateData = filteredData.stats.filter((stat) => stat.templateName === tn).map(
        (stat) => ({
          x: stat.date,
          y: stat.totalTimeSaved
        })
      );
      return {
        label: tn,
        // Fix: use tn instead of template_name
        data: templateData,
        fill: false,
        borderColor: getRandomColor()
      };
    })
  };
  return /* @__PURE__ */ jsx(Line, { options, data: allData });
}

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