@red-hat-developer-hub/backstage-plugin-adoption-insights 0.0.4 → 0.2.0

package/dist/components/Header/Header.esm.js

@@ -1,4 +1,5 @@
-import React__default from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { Header } from '@backstage/core-components';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
@@ -14,11 +15,11 @@ import { subDays, format } from 'date-fns';
 import { getDateRange } from '../../utils/utils.esm.js';
 
 const InsightsHeader = ({ title }) => {
-  const [selectedOption, setSelectedOption] = React__default.useState("last-28-days");
-  const [anchorEl, setAnchorEl] = React__default.useState(null);
-  const [startDate, setStartDate] = React__default.useState(null);
-  const [endDate, setEndDate] = React__default.useState(null);
-  const [menuOpen, setMenuOpen] = React__default.useState(false);
+  const [selectedOption, setSelectedOption] = useState("last-28-days");
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [startDate, setStartDate] = useState(null);
+  const [endDate, setEndDate] = useState(null);
+  const [menuOpen, setMenuOpen] = useState(false);
   const {
     startDateRange,
     setStartDateRange,
@@ -26,12 +27,12 @@ const InsightsHeader = ({ title }) => {
     setEndDateRange,
     setIsDefaultDateRange
   } = useDateRange();
-  React__default.useEffect(() => {
+  useEffect(() => {
     const today = /* @__PURE__ */ new Date();
     setStartDateRange(subDays(today, 27));
     setEndDateRange(today);
   }, [setStartDateRange, setEndDateRange]);
-  const handleChange = React__default.useCallback(
+  const handleChange = useCallback(
     (event) => {
       const value = event.target.value;
       if (!value) return;
@@ -50,10 +51,10 @@ const InsightsHeader = ({ title }) => {
   const handleDateRangeClick = (event) => {
     setAnchorEl(event.currentTarget);
   };
-  const handleClose = React__default.useCallback(() => {
+  const handleClose = useCallback(() => {
     setAnchorEl(null);
   }, []);
-  const handleDateRange = React__default.useCallback(() => {
+  const handleDateRange = useCallback(() => {
     if (startDate && endDate) {
       setStartDateRange(startDate);
       setEndDateRange(endDate);
@@ -70,7 +71,7 @@ const InsightsHeader = ({ title }) => {
     handleClose,
     setIsDefaultDateRange
   ]);
-  const getLabel = React__default.useMemo(() => {
+  const getLabel = useMemo(() => {
     return (value) => {
       if (value === "dateRange" && startDateRange && endDateRange)
         return `${format(startDateRange, "PP")} - ${format(
@@ -81,113 +82,122 @@ const InsightsHeader = ({ title }) => {
       return option ? option.label : "Last 28 days";
     };
   }, [startDateRange, endDateRange]);
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsxs(
     Header,
     {
-      title: /* @__PURE__ */ React__default.createElement(
+      title: /* @__PURE__ */ jsx(
         Typography,
         {
           variant: "h3",
           color: "textPrimary",
-          sx: { fontWeight: "bold" }
-        },
-        title
+          sx: { fontWeight: "bold" },
+          children: title
+        }
       ),
-      style: { background: "none" }
-    },
-    /* @__PURE__ */ React__default.createElement(
-      Select,
-      {
-        displayEmpty: true,
-        open: menuOpen,
-        onOpen: () => setMenuOpen(true),
-        onClose: () => setMenuOpen(false),
-        value: selectedOption,
-        onChange: handleChange,
-        renderValue: (selected) => getLabel(selected),
-        sx: {
-          minWidth: 190,
-          marginRight: "10px"
-        },
-        MenuProps: {
-          PaperProps: {
+      style: { background: "none" },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            displayEmpty: true,
+            open: menuOpen,
+            onOpen: () => setMenuOpen(true),
+            onClose: () => setMenuOpen(false),
+            value: selectedOption,
+            onChange: handleChange,
+            renderValue: (selected) => getLabel(selected),
             sx: {
               minWidth: 190,
-              boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)",
-              border: (theme) => `1px solid ${theme.palette.grey[300]}`,
-              overflow: "hidden"
+              marginRight: "10px"
             },
-            disableScrollLock: true
-          },
-          MenuListProps: {
-            autoFocusItem: false,
-            sx: { display: "block", flexDirection: "column" }
-          }
-        }
-      },
-      DATE_RANGE_OPTIONS.map((option) => /* @__PURE__ */ React__default.createElement(
-        MenuItem,
-        {
-          key: option.value,
-          value: option.value,
-          sx: { height: "52px" }
-        },
-        option.label
-      )),
-      /* @__PURE__ */ React__default.createElement(Divider, null),
-      /* @__PURE__ */ React__default.createElement(
-        MenuItem,
-        {
-          sx: { height: "52px" },
-          onMouseDown: (event) => {
-            event.preventDefault();
-            handleDateRangeClick(event);
+            MenuProps: {
+              PaperProps: {
+                sx: {
+                  minWidth: 190,
+                  boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)",
+                  border: (theme) => `1px solid ${theme.palette.grey[300]}`,
+                  overflow: "hidden"
+                },
+                disableScrollLock: true
+              },
+              MenuListProps: {
+                autoFocusItem: false,
+                sx: { display: "block", flexDirection: "column" }
+              }
+            },
+            children: [
+              DATE_RANGE_OPTIONS.map((option) => /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  value: option.value,
+                  sx: { height: "52px" },
+                  children: option.label
+                },
+                option.value
+              )),
+              /* @__PURE__ */ jsx(Divider, {}),
+              /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  sx: { height: "52px" },
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    handleDateRangeClick(event);
+                  },
+                  children: "Date range..."
+                }
+              )
+            ]
           }
-        },
-        "Date range..."
-      )
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      Popover,
-      {
-        open: Boolean(anchorEl),
-        anchorEl,
-        onClose: handleClose,
-        anchorOrigin: { vertical: "top", horizontal: "left" },
-        transformOrigin: { vertical: "top", horizontal: "right" },
-        slotProps: {
-          paper: {
-            sx: { boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)" }
+        ),
+        /* @__PURE__ */ jsxs(
+          Popover,
+          {
+            open: Boolean(anchorEl),
+            anchorEl,
+            onClose: handleClose,
+            anchorOrigin: { vertical: "top", horizontal: "left" },
+            transformOrigin: { vertical: "top", horizontal: "right" },
+            slotProps: {
+              paper: {
+                sx: { boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)" }
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                DateRangePicker,
+                {
+                  startDate,
+                  setStartDate,
+                  endDate,
+                  setEndDate
+                }
+              ),
+              /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "flex-end", gap: 1, m: 2 }, children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: handleClose,
+                    color: "primary",
+                    sx: { textTransform: "none" },
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: handleDateRange,
+                    color: "primary",
+                    disabled: !(startDate && endDate),
+                    children: "OK"
+                  }
+                )
+              ] })
+            ]
           }
-        }
-      },
-      /* @__PURE__ */ React__default.createElement(
-        DateRangePicker,
-        {
-          startDate,
-          setStartDate,
-          endDate,
-          setEndDate
-        }
-      ),
-      /* @__PURE__ */ React__default.createElement(Box, { sx: { display: "flex", justifyContent: "flex-end", gap: 1, m: 2 } }, /* @__PURE__ */ React__default.createElement(
-        Button,
-        {
-          onClick: handleClose,
-          color: "primary",
-          sx: { textTransform: "none" }
-        },
-        "Cancel"
-      ), /* @__PURE__ */ React__default.createElement(
-        Button,
-        {
-          onClick: handleDateRange,
-          color: "primary",
-          disabled: !(startDate && endDate)
-        },
-        "OK"
-      ))
-    )
+        )
+      ]
+    }
   );
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Header.esm.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { Header } from '@backstage/core-components';\nimport MenuItem from '@mui/material/MenuItem';\nimport Select, { SelectChangeEvent } from '@mui/material/Select';\nimport Typography from '@mui/material/Typography';\nimport Divider from '@mui/material/Divider';\nimport Popover from '@mui/material/Popover';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\n\nimport DateRangePicker from './DateRangePicker';\nimport { useDateRange } from './DateRangeContext';\nimport { DATE_RANGE_OPTIONS } from '../../utils/constants';\nimport { format, subDays } from 'date-fns';\nimport { getDateRange } from '../../utils/utils';\n\ninterface InsightsHeaderProps extends React.HTMLProps<HTMLDivElement> {\n  title: string;\n}\n\nconst InsightsHeader: React.FC<InsightsHeaderProps> = ({ title }) => {\n  const [selectedOption, setSelectedOption] =\n    React.useState<string>('last-28-days');\n  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);\n  const [startDate, setStartDate] = React.useState<Date | null>(null);\n  const [endDate, setEndDate] = React.useState<Date | null>(null);\n  const [menuOpen, setMenuOpen] = React.useState(false);\n\n  const {\n    startDateRange,\n    setStartDateRange,\n    endDateRange,\n    setEndDateRange,\n    setIsDefaultDateRange,\n  } = useDateRange();\n\n  React.useEffect(() => {\n    const today = new Date();\n    setStartDateRange(subDays(today, 27));\n    setEndDateRange(today);\n  }, [setStartDateRange, setEndDateRange]);\n\n  const handleChange = React.useCallback(\n    (event: SelectChangeEvent<string>) => {\n      const value = event.target.value;\n      if (!value) return;\n\n      const { startDate: newStartDate, endDate: newEndDate } =\n        getDateRange(value);\n      if (newStartDate && newEndDate) {\n        setStartDateRange(new Date(newStartDate));\n        setEndDateRange(new Date(newEndDate));\n        setIsDefaultDateRange(false);\n      }\n      setStartDate(null);\n      setEndDate(null);\n\n      setSelectedOption(value);\n    },\n    [setStartDateRange, setEndDateRange, setIsDefaultDateRange],\n  );\n\n  const handleDateRangeClick = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = React.useCallback(() => {\n    setAnchorEl(null);\n  }, []);\n\n  const handleDateRange = React.useCallback(() => {\n    if (startDate && endDate) {\n      setStartDateRange(startDate);\n      setEndDateRange(endDate);\n      setIsDefaultDateRange(false);\n      setSelectedOption('dateRange');\n      handleClose();\n      setMenuOpen(false);\n    }\n  }, [\n    startDate,\n    endDate,\n    setStartDateRange,\n    setEndDateRange,\n    handleClose,\n    setIsDefaultDateRange,\n  ]);\n\n  const getLabel = React.useMemo(() => {\n    return (value: string) => {\n      if (value === 'dateRange' && startDateRange && endDateRange)\n        return `${format(startDateRange, 'PP')} - ${format(\n          endDateRange,\n          'PP',\n        )}`;\n\n      const option = DATE_RANGE_OPTIONS.find(opt => opt.value === value);\n      return option ? option.label : 'Last 28 days';\n    };\n  }, [startDateRange, endDateRange]);\n\n  return (\n    <Header\n      title={\n        <Typography\n          variant=\"h3\"\n          color=\"textPrimary\"\n          sx={{ fontWeight: 'bold' }}\n        >\n          {title}\n        </Typography>\n      }\n      style={{ background: 'none' }}\n    >\n      <Select\n        displayEmpty\n        open={menuOpen}\n        onOpen={() => setMenuOpen(true)}\n        onClose={() => setMenuOpen(false)}\n        value={selectedOption}\n        onChange={handleChange}\n        renderValue={(selected: string) => getLabel(selected)}\n        sx={{\n          minWidth: 190,\n          marginRight: '10px',\n        }}\n        MenuProps={{\n          PaperProps: {\n            sx: {\n              minWidth: 190,\n              boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.2)',\n              border: theme => `1px solid ${theme.palette.grey[300]}`,\n              overflow: 'hidden',\n            },\n            disableScrollLock: true,\n          },\n          MenuListProps: {\n            autoFocusItem: false,\n            sx: { display: 'block', flexDirection: 'column' },\n          },\n        }}\n      >\n        {DATE_RANGE_OPTIONS.map(option => (\n          <MenuItem\n            key={option.value}\n            value={option.value}\n            sx={{ height: '52px' }}\n          >\n            {option.label}\n          </MenuItem>\n        ))}\n        <Divider />\n        <MenuItem\n          sx={{ height: '52px' }}\n          onMouseDown={event => {\n            event.preventDefault();\n            handleDateRangeClick(event);\n          }}\n        >\n          Date range...\n        </MenuItem>\n      </Select>\n\n      <Popover\n        open={Boolean(anchorEl)}\n        anchorEl={anchorEl}\n        onClose={handleClose}\n        anchorOrigin={{ vertical: 'top', horizontal: 'left' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n        slotProps={{\n          paper: {\n            sx: { boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.2)' },\n          },\n        }}\n      >\n        <DateRangePicker\n          startDate={startDate}\n          setStartDate={setStartDate}\n          endDate={endDate}\n          setEndDate={setEndDate}\n        />\n\n        <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, m: 2 }}>\n          <Button\n            onClick={handleClose}\n            color=\"primary\"\n            sx={{ textTransform: 'none' }}\n          >\n            Cancel\n          </Button>\n          <Button\n            onClick={handleDateRange}\n            color=\"primary\"\n            disabled={!(startDate && endDate)}\n          >\n            OK\n          </Button>\n        </Box>\n      </Popover>\n    </Header>\n  );\n};\n\nexport default InsightsHeader;\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;AAoCA,MAAM,cAAgD,GAAA,CAAC,EAAE,KAAA,EAAY,KAAA;AACnE,EAAA,MAAM,CAAC,cAAgB,EAAA,iBAAiB,CACtC,GAAAA,cAAA,CAAM,SAAiB,cAAc,CAAA;AACvC,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAAA,cAAA,CAAM,SAA6B,IAAI,CAAA;AACvE,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAAA,cAAA,CAAM,SAAsB,IAAI,CAAA;AAClE,EAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAAA,cAAA,CAAM,SAAsB,IAAI,CAAA;AAC9D,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAAA,cAAA,CAAM,SAAS,KAAK,CAAA;AAEpD,EAAM,MAAA;AAAA,IACJ,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,MACE,YAAa,EAAA;AAEjB,EAAAA,cAAA,CAAM,UAAU,MAAM;AACpB,IAAM,MAAA,KAAA,uBAAY,IAAK,EAAA;AACvB,IAAkB,iBAAA,CAAA,OAAA,CAAQ,KAAO,EAAA,EAAE,CAAC,CAAA;AACpC,IAAA,eAAA,CAAgB,KAAK,CAAA;AAAA,GACpB,EAAA,CAAC,iBAAmB,EAAA,eAAe,CAAC,CAAA;AAEvC,EAAA,MAAM,eAAeA,cAAM,CAAA,WAAA;AAAA,IACzB,CAAC,KAAqC,KAAA;AACpC,MAAM,MAAA,KAAA,GAAQ,MAAM,MAAO,CAAA,KAAA;AAC3B,MAAA,IAAI,CAAC,KAAO,EAAA;AAEZ,MAAA,MAAM,EAAE,SAAW,EAAA,YAAA,EAAc,SAAS,UAAW,EAAA,GACnD,aAAa,KAAK,CAAA;AACpB,MAAA,IAAI,gBAAgB,UAAY,EAAA;AAC9B,QAAkB,iBAAA,CAAA,IAAI,IAAK,CAAA,YAAY,CAAC,CAAA;AACxC,QAAgB,eAAA,CAAA,IAAI,IAAK,CAAA,UAAU,CAAC,CAAA;AACpC,QAAA,qBAAA,CAAsB,KAAK,CAAA;AAAA;AAE7B,MAAA,YAAA,CAAa,IAAI,CAAA;AACjB,MAAA,UAAA,CAAW,IAAI,CAAA;AAEf,MAAA,iBAAA,CAAkB,KAAK,CAAA;AAAA,KACzB;AAAA,IACA,CAAC,iBAAmB,EAAA,eAAA,EAAiB,qBAAqB;AAAA,GAC5D;AAEA,EAAM,MAAA,oBAAA,GAAuB,CAAC,KAAyC,KAAA;AACrE,IAAA,WAAA,CAAY,MAAM,aAAa,CAAA;AAAA,GACjC;AAEA,EAAM,MAAA,WAAA,GAAcA,cAAM,CAAA,WAAA,CAAY,MAAM;AAC1C,IAAA,WAAA,CAAY,IAAI,CAAA;AAAA,GAClB,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,eAAA,GAAkBA,cAAM,CAAA,WAAA,CAAY,MAAM;AAC9C,IAAA,IAAI,aAAa,OAAS,EAAA;AACxB,MAAA,iBAAA,CAAkB,SAAS,CAAA;AAC3B,MAAA,eAAA,CAAgB,OAAO,CAAA;AACvB,MAAA,qBAAA,CAAsB,KAAK,CAAA;AAC3B,MAAA,iBAAA,CAAkB,WAAW,CAAA;AAC7B,MAAY,WAAA,EAAA;AACZ,MAAA,WAAA,CAAY,KAAK,CAAA;AAAA;AACnB,GACC,EAAA;AAAA,IACD,SAAA;AAAA,IACA,OAAA;AAAA,IACA,iBAAA;AAAA,IACA,eAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,QAAA,GAAWA,cAAM,CAAA,OAAA,CAAQ,MAAM;AACnC,IAAA,OAAO,CAAC,KAAkB,KAAA;AACxB,MAAI,IAAA,KAAA,KAAU,eAAe,cAAkB,IAAA,YAAA;AAC7C,QAAA,OAAO,CAAG,EAAA,MAAA,CAAO,cAAgB,EAAA,IAAI,CAAC,CAAM,GAAA,EAAA,MAAA;AAAA,UAC1C,YAAA;AAAA,UACA;AAAA,SACD,CAAA,CAAA;AAEH,MAAA,MAAM,SAAS,kBAAmB,CAAA,IAAA,CAAK,CAAO,GAAA,KAAA,GAAA,CAAI,UAAU,KAAK,CAAA;AACjE,MAAO,OAAA,MAAA,GAAS,OAAO,KAAQ,GAAA,cAAA;AAAA,KACjC;AAAA,GACC,EAAA,CAAC,cAAgB,EAAA,YAAY,CAAC,CAAA;AAEjC,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KACE,kBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,IAAA;AAAA,UACR,KAAM,EAAA,aAAA;AAAA,UACN,EAAA,EAAI,EAAE,UAAA,EAAY,MAAO;AAAA,SAAA;AAAA,QAExB;AAAA,OACH;AAAA,MAEF,KAAA,EAAO,EAAE,UAAA,EAAY,MAAO;AAAA,KAAA;AAAA,oBAE5BA,cAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,YAAY,EAAA,IAAA;AAAA,QACZ,IAAM,EAAA,QAAA;AAAA,QACN,MAAA,EAAQ,MAAM,WAAA,CAAY,IAAI,CAAA;AAAA,QAC9B,OAAA,EAAS,MAAM,WAAA,CAAY,KAAK,CAAA;AAAA,QAChC,KAAO,EAAA,cAAA;AAAA,QACP,QAAU,EAAA,YAAA;AAAA,QACV,WAAa,EAAA,CAAC,QAAqB,KAAA,QAAA,CAAS,QAAQ,CAAA;AAAA,QACpD,EAAI,EAAA;AAAA,UACF,QAAU,EAAA,GAAA;AAAA,UACV,WAAa,EAAA;AAAA,SACf;AAAA,QACA,SAAW,EAAA;AAAA,UACT,UAAY,EAAA;AAAA,YACV,EAAI,EAAA;AAAA,cACF,QAAU,EAAA,GAAA;AAAA,cACV,SAAW,EAAA,iCAAA;AAAA,cACX,QAAQ,CAAS,KAAA,KAAA,CAAA,UAAA,EAAa,MAAM,OAAQ,CAAA,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA;AAAA,cACrD,QAAU,EAAA;AAAA,aACZ;AAAA,YACA,iBAAmB,EAAA;AAAA,WACrB;AAAA,UACA,aAAe,EAAA;AAAA,YACb,aAAe,EAAA,KAAA;AAAA,YACf,EAAI,EAAA,EAAE,OAAS,EAAA,OAAA,EAAS,eAAe,QAAS;AAAA;AAClD;AACF,OAAA;AAAA,MAEC,kBAAA,CAAmB,IAAI,CACtB,MAAA,qBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,KAAK,MAAO,CAAA,KAAA;AAAA,UACZ,OAAO,MAAO,CAAA,KAAA;AAAA,UACd,EAAA,EAAI,EAAE,MAAA,EAAQ,MAAO;AAAA,SAAA;AAAA,QAEpB,MAAO,CAAA;AAAA,OAEX,CAAA;AAAA,mDACA,OAAQ,EAAA,IAAA,CAAA;AAAA,sBACTA,cAAA,CAAA,aAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAI,EAAE,MAAA,EAAQ,MAAO,EAAA;AAAA,UACrB,aAAa,CAAS,KAAA,KAAA;AACpB,YAAA,KAAA,CAAM,cAAe,EAAA;AACrB,YAAA,oBAAA,CAAqB,KAAK,CAAA;AAAA;AAC5B,SAAA;AAAA,QACD;AAAA;AAED,KACF;AAAA,oBAEAA,cAAA,CAAA,aAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,QAAQ,QAAQ,CAAA;AAAA,QACtB,QAAA;AAAA,QACA,OAAS,EAAA,WAAA;AAAA,QACT,YAAc,EAAA,EAAE,QAAU,EAAA,KAAA,EAAO,YAAY,MAAO,EAAA;AAAA,QACpD,eAAiB,EAAA,EAAE,QAAU,EAAA,KAAA,EAAO,YAAY,OAAQ,EAAA;AAAA,QACxD,SAAW,EAAA;AAAA,UACT,KAAO,EAAA;AAAA,YACL,EAAA,EAAI,EAAE,SAAA,EAAW,iCAAkC;AAAA;AACrD;AACF,OAAA;AAAA,sBAEAA,cAAA,CAAA,aAAA;AAAA,QAAC,eAAA;AAAA,QAAA;AAAA,UACC,SAAA;AAAA,UACA,YAAA;AAAA,UACA,OAAA;AAAA,UACA;AAAA;AAAA,OACF;AAAA,sBAECA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,cAAgB,EAAA,UAAA,EAAY,GAAK,EAAA,CAAA,EAAG,CAAG,EAAA,CAAA,EACjE,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,OAAS,EAAA,WAAA;AAAA,UACT,KAAM,EAAA,SAAA;AAAA,UACN,EAAA,EAAI,EAAE,aAAA,EAAe,MAAO;AAAA,SAAA;AAAA,QAC7B;AAAA,OAGD,kBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,OAAS,EAAA,eAAA;AAAA,UACT,KAAM,EAAA,SAAA;AAAA,UACN,QAAA,EAAU,EAAE,SAAa,IAAA,OAAA;AAAA,SAAA;AAAA,QAC1B;AAAA,OAGH;AAAA;AACF,GACF;AAEJ;;;;"}
+{"version":3,"file":"Header.esm.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useState, useMemo, useCallback, useEffect } from 'react';\nimport type { FC, HTMLProps, MouseEvent } from 'react';\n\nimport { Header } from '@backstage/core-components';\nimport MenuItem from '@mui/material/MenuItem';\nimport Select, { SelectChangeEvent } from '@mui/material/Select';\nimport Typography from '@mui/material/Typography';\nimport Divider from '@mui/material/Divider';\nimport Popover from '@mui/material/Popover';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\n\nimport DateRangePicker from './DateRangePicker';\nimport { useDateRange } from './DateRangeContext';\nimport { DATE_RANGE_OPTIONS } from '../../utils/constants';\nimport { format, subDays } from 'date-fns';\nimport { getDateRange } from '../../utils/utils';\n\ninterface InsightsHeaderProps extends HTMLProps<HTMLDivElement> {\n  title: string;\n}\n\nconst InsightsHeader: FC<InsightsHeaderProps> = ({ title }) => {\n  const [selectedOption, setSelectedOption] = useState<string>('last-28-days');\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const [startDate, setStartDate] = useState<Date | null>(null);\n  const [endDate, setEndDate] = useState<Date | null>(null);\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  const {\n    startDateRange,\n    setStartDateRange,\n    endDateRange,\n    setEndDateRange,\n    setIsDefaultDateRange,\n  } = useDateRange();\n\n  useEffect(() => {\n    const today = new Date();\n    setStartDateRange(subDays(today, 27));\n    setEndDateRange(today);\n  }, [setStartDateRange, setEndDateRange]);\n\n  const handleChange = useCallback(\n    (event: SelectChangeEvent<string>) => {\n      const value = event.target.value;\n      if (!value) return;\n\n      const { startDate: newStartDate, endDate: newEndDate } =\n        getDateRange(value);\n      if (newStartDate && newEndDate) {\n        setStartDateRange(new Date(newStartDate));\n        setEndDateRange(new Date(newEndDate));\n        setIsDefaultDateRange(false);\n      }\n      setStartDate(null);\n      setEndDate(null);\n\n      setSelectedOption(value);\n    },\n    [setStartDateRange, setEndDateRange, setIsDefaultDateRange],\n  );\n\n  const handleDateRangeClick = (event: MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = useCallback(() => {\n    setAnchorEl(null);\n  }, []);\n\n  const handleDateRange = useCallback(() => {\n    if (startDate && endDate) {\n      setStartDateRange(startDate);\n      setEndDateRange(endDate);\n      setIsDefaultDateRange(false);\n      setSelectedOption('dateRange');\n      handleClose();\n      setMenuOpen(false);\n    }\n  }, [\n    startDate,\n    endDate,\n    setStartDateRange,\n    setEndDateRange,\n    handleClose,\n    setIsDefaultDateRange,\n  ]);\n\n  const getLabel = useMemo(() => {\n    return (value: string) => {\n      if (value === 'dateRange' && startDateRange && endDateRange)\n        return `${format(startDateRange, 'PP')} - ${format(\n          endDateRange,\n          'PP',\n        )}`;\n\n      const option = DATE_RANGE_OPTIONS.find(opt => opt.value === value);\n      return option ? option.label : 'Last 28 days';\n    };\n  }, [startDateRange, endDateRange]);\n\n  return (\n    <Header\n      title={\n        <Typography\n          variant=\"h3\"\n          color=\"textPrimary\"\n          sx={{ fontWeight: 'bold' }}\n        >\n          {title}\n        </Typography>\n      }\n      style={{ background: 'none' }}\n    >\n      <Select\n        displayEmpty\n        open={menuOpen}\n        onOpen={() => setMenuOpen(true)}\n        onClose={() => setMenuOpen(false)}\n        value={selectedOption}\n        onChange={handleChange}\n        renderValue={(selected: string) => getLabel(selected)}\n        sx={{\n          minWidth: 190,\n          marginRight: '10px',\n        }}\n        MenuProps={{\n          PaperProps: {\n            sx: {\n              minWidth: 190,\n              boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.2)',\n              border: theme => `1px solid ${theme.palette.grey[300]}`,\n              overflow: 'hidden',\n            },\n            disableScrollLock: true,\n          },\n          MenuListProps: {\n            autoFocusItem: false,\n            sx: { display: 'block', flexDirection: 'column' },\n          },\n        }}\n      >\n        {DATE_RANGE_OPTIONS.map(option => (\n          <MenuItem\n            key={option.value}\n            value={option.value}\n            sx={{ height: '52px' }}\n          >\n            {option.label}\n          </MenuItem>\n        ))}\n        <Divider />\n        <MenuItem\n          sx={{ height: '52px' }}\n          onMouseDown={event => {\n            event.preventDefault();\n            handleDateRangeClick(event);\n          }}\n        >\n          Date range...\n        </MenuItem>\n      </Select>\n\n      <Popover\n        open={Boolean(anchorEl)}\n        anchorEl={anchorEl}\n        onClose={handleClose}\n        anchorOrigin={{ vertical: 'top', horizontal: 'left' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n        slotProps={{\n          paper: {\n            sx: { boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.2)' },\n          },\n        }}\n      >\n        <DateRangePicker\n          startDate={startDate}\n          setStartDate={setStartDate}\n          endDate={endDate}\n          setEndDate={setEndDate}\n        />\n\n        <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, m: 2 }}>\n          <Button\n            onClick={handleClose}\n            color=\"primary\"\n            sx={{ textTransform: 'none' }}\n          >\n            Cancel\n          </Button>\n          <Button\n            onClick={handleDateRange}\n            color=\"primary\"\n            disabled={!(startDate && endDate)}\n          >\n            OK\n          </Button>\n        </Box>\n      </Popover>\n    </Header>\n  );\n};\n\nexport default InsightsHeader;\n"],"names":[],"mappings":"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"}

package/dist/components/Plugins/Plugins.esm.js

@@ -1,4 +1,5 @@
-import React__default from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useCallback, useMemo } from 'react';
 import { ResponseErrorPanel } from '@backstage/core-components';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -20,97 +21,106 @@ import EmptyChartState from '../Common/EmptyChartState.esm.js';
 import { useDateRange } from '../Header/DateRangeContext.esm.js';
 
 const Plugins = () => {
-  const [page, setPage] = React__default.useState(0);
-  const [limit] = React__default.useState(20);
-  const [rowsPerPage, setRowsPerPage] = React__default.useState(3);
+  const [page, setPage] = useState(0);
+  const [limit] = useState(20);
+  const [rowsPerPage, setRowsPerPage] = useState(3);
   const { isDefaultDateRange } = useDateRange();
   const { plugins, loading, error } = usePlugins({ limit });
-  const handleChangePage = React__default.useCallback(
-    (_event, newPage) => {
-      setPage(newPage);
-    },
-    []
-  );
-  const handleChangeRowsPerPage = React__default.useCallback(
+  const handleChangePage = useCallback((_event, newPage) => {
+    setPage(newPage);
+  }, []);
+  const handleChangeRowsPerPage = useCallback(
     (event) => {
       setRowsPerPage(+event.target.value);
       setPage(0);
     },
     []
   );
-  const visiblePlugins = React__default.useMemo(() => {
+  const visiblePlugins = useMemo(() => {
     return plugins.data?.slice(
       page * rowsPerPage,
       page * rowsPerPage + rowsPerPage
     );
   }, [plugins, page, rowsPerPage]);
   if (error) {
-    return /* @__PURE__ */ React__default.createElement(CardWrapper, { title: "Top plugins" }, /* @__PURE__ */ React__default.createElement(ResponseErrorPanel, { error }));
+    return /* @__PURE__ */ jsx(CardWrapper, { title: "Top plugins", children: /* @__PURE__ */ jsx(ResponseErrorPanel, { error }) });
   }
   if (!visiblePlugins || visiblePlugins?.length === 0) {
-    return /* @__PURE__ */ React__default.createElement(CardWrapper, { title: "Top plugins" }, /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ jsx(CardWrapper, { title: "Top plugins", children: /* @__PURE__ */ jsx(
       Box,
       {
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        height: 200
-      },
-      /* @__PURE__ */ React__default.createElement(EmptyChartState, null)
-    ));
+        height: 200,
+        children: /* @__PURE__ */ jsx(EmptyChartState, {})
+      }
+    ) });
   }
-  return /* @__PURE__ */ React__default.createElement(CardWrapper, { title: `Top ${rowsPerPage} plugins` }, /* @__PURE__ */ React__default.createElement(Table, { "aria-labelledby": "Catalog entities", sx: { width: "100%" } }, /* @__PURE__ */ React__default.createElement(TableHead, null, /* @__PURE__ */ React__default.createElement(TableRow, null, PLUGINS_TABLE_HEADERS.map((header) => {
-    if (isDefaultDateRange && header.id === "percent") return null;
-    return /* @__PURE__ */ React__default.createElement(
-      TableCell,
+  return /* @__PURE__ */ jsx(CardWrapper, { title: `Top ${rowsPerPage} plugins`, children: /* @__PURE__ */ jsxs(Table, { "aria-labelledby": "Catalog entities", sx: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableRow, { children: PLUGINS_TABLE_HEADERS.map((header) => {
+      if (isDefaultDateRange && header.id === "percent") return null;
+      return /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          align: "left",
+          sx: {
+            borderBottom: (theme) => `1px solid ${theme.palette.grey[300]}`
+          },
+          children: header.title
+        },
+        header.id
+      );
+    }) }) }),
+    /* @__PURE__ */ jsx(TableBody, { children: loading ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: PLUGINS_TABLE_HEADERS.length, align: "center", children: /* @__PURE__ */ jsx(CircularProgress, {}) }) }) : visiblePlugins?.map((plugin) => /* @__PURE__ */ jsxs(
+      TableRow,
       {
-        key: header.id,
-        align: "left",
         sx: {
+          "&:nth-of-type(odd)": { backgroundColor: "inherit" },
           borderBottom: (theme) => `1px solid ${theme.palette.grey[300]}`
-        }
+        },
+        children: [
+          /* @__PURE__ */ jsx(TableCell, { sx: isDefaultDateRange ? {} : { width: "20%" }, children: plugin.plugin_id ?? "--" }),
+          /* @__PURE__ */ jsx(TableCell, { sx: { width: "40%" }, children: plugin.trend?.length > 0 ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: 250, height: 50, children: /* @__PURE__ */ jsx(LineChart, { data: plugin.trend, children: /* @__PURE__ */ jsx(
+            Line,
+            {
+              type: "monotone",
+              dataKey: "count",
+              stroke: "#9370DB",
+              strokeWidth: 2,
+              dot: false
+            }
+          ) }) }) : "--" }),
+          !isDefaultDateRange && /* @__PURE__ */ jsx(TableCell, { sx: isDefaultDateRange ? {} : { width: "20%" }, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            Math.round(Number(plugin.trend_percentage)) < 0 ? /* @__PURE__ */ jsx(TrendingDownIcon, { sx: { color: "red" } }) : /* @__PURE__ */ jsx(TrendingUpIcon, { sx: { color: "green" } }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+              Math.abs(Math.round(Number(plugin.trend_percentage))),
+              "%"
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableCell, { sx: isDefaultDateRange ? {} : { width: "20%" }, children: Number(plugin.visit_count).toLocaleString() ?? "--" })
+        ]
       },
-      header.title
-    );
-  }))), /* @__PURE__ */ React__default.createElement(TableBody, null, loading ? /* @__PURE__ */ React__default.createElement(TableRow, null, /* @__PURE__ */ React__default.createElement(TableCell, { colSpan: PLUGINS_TABLE_HEADERS.length, align: "center" }, /* @__PURE__ */ React__default.createElement(CircularProgress, null))) : visiblePlugins?.map((plugin) => /* @__PURE__ */ React__default.createElement(
-    TableRow,
-    {
-      key: plugin.plugin_id,
-      sx: {
-        "&:nth-of-type(odd)": { backgroundColor: "inherit" },
-        borderBottom: (theme) => `1px solid ${theme.palette.grey[300]}`
-      }
-    },
-    /* @__PURE__ */ React__default.createElement(TableCell, { sx: isDefaultDateRange ? {} : { width: "20%" } }, plugin.plugin_id ?? "--"),
-    /* @__PURE__ */ React__default.createElement(TableCell, { sx: { width: "40%" } }, plugin.trend?.length > 0 ? /* @__PURE__ */ React__default.createElement(ResponsiveContainer, { width: 250, height: 50 }, /* @__PURE__ */ React__default.createElement(LineChart, { data: plugin.trend }, /* @__PURE__ */ React__default.createElement(
-      Line,
-      {
-        type: "monotone",
-        dataKey: "count",
-        stroke: "#9370DB",
-        strokeWidth: 2,
-        dot: false
-      }
-    ))) : "--"),
-    !isDefaultDateRange && /* @__PURE__ */ React__default.createElement(TableCell, { sx: isDefaultDateRange ? {} : { width: "20%" } }, /* @__PURE__ */ React__default.createElement(Box, { sx: { display: "flex", alignItems: "center", gap: 1 } }, Math.round(Number(plugin.trend_percentage)) < 0 ? /* @__PURE__ */ React__default.createElement(TrendingDownIcon, { sx: { color: "red" } }) : /* @__PURE__ */ React__default.createElement(TrendingUpIcon, { sx: { color: "green" } }), /* @__PURE__ */ React__default.createElement(Typography, { variant: "body2" }, Math.abs(Math.round(Number(plugin.trend_percentage))), "%"))),
-    /* @__PURE__ */ React__default.createElement(TableCell, { sx: isDefaultDateRange ? {} : { width: "20%" } }, Number(plugin.visit_count).toLocaleString() ?? "--")
-  ))), /* @__PURE__ */ React__default.createElement(TableFooter, null, /* @__PURE__ */ React__default.createElement(TableRow, null, /* @__PURE__ */ React__default.createElement(
-    TableCell,
-    {
-      colSpan: PLUGINS_TABLE_HEADERS.length,
-      sx: { padding: 0 }
-    },
-    /* @__PURE__ */ React__default.createElement(
-      TableFooterPagination,
+      plugin.plugin_id
+    )) }),
+    /* @__PURE__ */ jsx(TableFooter, { children: /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+      TableCell,
       {
-        count: plugins.data?.length,
-        rowsPerPage,
-        page,
-        handleChangePage,
-        handleChangeRowsPerPage
+        colSpan: PLUGINS_TABLE_HEADERS.length,
+        sx: { padding: 0 },
+        children: /* @__PURE__ */ jsx(
+          TableFooterPagination,
+          {
+            count: plugins.data?.length,
+            rowsPerPage,
+            page,
+            handleChangePage,
+            handleChangeRowsPerPage
+          }
+        )
       }
-    )
-  )))));
+    ) }) })
+  ] }) });
 };
 
 export { Plugins as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Plugins.esm.js","sources":["../../../src/components/Plugins/Plugins.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { ResponseErrorPanel } from '@backstage/core-components';\nimport Table from '@mui/material/Table';\nimport TableBody from '@mui/material/TableBody';\nimport TableCell from '@mui/material/TableCell';\nimport TableFooter from '@mui/material/TableFooter';\nimport TableHead from '@mui/material/TableHead';\nimport TableRow from '@mui/material/TableRow';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport TrendingUpIcon from '@mui/icons-material/TrendingUp';\nimport TrendingDownIcon from '@mui/icons-material/TrendingDown';\nimport Typography from '@mui/material/Typography';\nimport Box from '@mui/material/Box';\n\nimport CardWrapper from '../CardWrapper';\nimport { PLUGINS_TABLE_HEADERS } from '../../utils/constants';\nimport { usePlugins } from '../../hooks/usePlugins';\nimport TableFooterPagination from '../CardFooter';\nimport { Line, LineChart, ResponsiveContainer } from 'recharts';\nimport EmptyChartState from '../Common/EmptyChartState';\nimport { useDateRange } from '../Header/DateRangeContext';\n\nconst Plugins = () => {\n  const [page, setPage] = React.useState(0);\n  const [limit] = React.useState(20);\n  const [rowsPerPage, setRowsPerPage] = React.useState(3);\n\n  const { isDefaultDateRange } = useDateRange();\n  const { plugins, loading, error } = usePlugins({ limit });\n\n  const handleChangePage = React.useCallback(\n    (_event: unknown, newPage: number) => {\n      setPage(newPage);\n    },\n    [],\n  );\n\n  const handleChangeRowsPerPage = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      setRowsPerPage(+event.target.value);\n      setPage(0);\n    },\n    [],\n  );\n\n  const visiblePlugins = React.useMemo(() => {\n    return plugins.data?.slice(\n      page * rowsPerPage,\n      page * rowsPerPage + rowsPerPage,\n    );\n  }, [plugins, page, rowsPerPage]);\n\n  if (error) {\n    return (\n      <CardWrapper title=\"Top plugins\">\n        <ResponseErrorPanel error={error} />\n      </CardWrapper>\n    );\n  }\n\n  if (!visiblePlugins || visiblePlugins?.length === 0) {\n    return (\n      <CardWrapper title=\"Top plugins\">\n        <Box\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          height={200}\n        >\n          <EmptyChartState />\n        </Box>\n      </CardWrapper>\n    );\n  }\n\n  return (\n    <CardWrapper title={`Top ${rowsPerPage} plugins`}>\n      <Table aria-labelledby=\"Catalog entities\" sx={{ width: '100%' }}>\n        <TableHead>\n          <TableRow>\n            {PLUGINS_TABLE_HEADERS.map(header => {\n              if (isDefaultDateRange && header.id === 'percent') return null;\n              return (\n                <TableCell\n                  key={header.id}\n                  align=\"left\"\n                  sx={{\n                    borderBottom: theme =>\n                      `1px solid ${theme.palette.grey[300]}`,\n                  }}\n                >\n                  {header.title}\n                </TableCell>\n              );\n            })}\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {loading ? (\n            <TableRow>\n              <TableCell colSpan={PLUGINS_TABLE_HEADERS.length} align=\"center\">\n                <CircularProgress />\n              </TableCell>\n            </TableRow>\n          ) : (\n            visiblePlugins?.map(plugin => (\n              <TableRow\n                key={plugin.plugin_id}\n                sx={{\n                  '&:nth-of-type(odd)': { backgroundColor: 'inherit' },\n                  borderBottom: theme => `1px solid ${theme.palette.grey[300]}`,\n                }}\n              >\n                <TableCell sx={isDefaultDateRange ? {} : { width: '20%' }}>\n                  {plugin.plugin_id ?? '--'}\n                </TableCell>\n                <TableCell sx={{ width: '40%' }}>\n                  {plugin.trend?.length > 0 ? (\n                    <ResponsiveContainer width={250} height={50}>\n                      <LineChart data={plugin.trend}>\n                        <Line\n                          type=\"monotone\"\n                          dataKey=\"count\"\n                          stroke=\"#9370DB\"\n                          strokeWidth={2}\n                          dot={false}\n                        />\n                      </LineChart>\n                    </ResponsiveContainer>\n                  ) : (\n                    '--'\n                  )}\n                </TableCell>\n                {!isDefaultDateRange && (\n                  <TableCell sx={isDefaultDateRange ? {} : { width: '20%' }}>\n                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n                      {Math.round(Number(plugin.trend_percentage)) < 0 ? (\n                        <TrendingDownIcon sx={{ color: 'red' }} />\n                      ) : (\n                        <TrendingUpIcon sx={{ color: 'green' }} />\n                      )}\n                      <Typography variant=\"body2\">\n                        {Math.abs(Math.round(Number(plugin.trend_percentage)))}%\n                      </Typography>\n                    </Box>\n                  </TableCell>\n                )}\n                <TableCell sx={isDefaultDateRange ? {} : { width: '20%' }}>\n                  {Number(plugin.visit_count).toLocaleString() ?? '--'}\n                </TableCell>\n              </TableRow>\n            ))\n          )}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell\n              colSpan={PLUGINS_TABLE_HEADERS.length}\n              sx={{ padding: 0 }}\n            >\n              <TableFooterPagination\n                count={plugins.data?.length}\n                rowsPerPage={rowsPerPage}\n                page={page}\n                handleChangePage={handleChangePage}\n                handleChangeRowsPerPage={handleChangeRowsPerPage}\n              />\n            </TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </CardWrapper>\n  );\n};\n\nexport default Plugins;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Plugins.esm.js","sources":["../../../src/components/Plugins/Plugins.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useState, useMemo, useCallback } from 'react';\nimport type { ChangeEvent } from 'react';\n\nimport { ResponseErrorPanel } from '@backstage/core-components';\nimport Table from '@mui/material/Table';\nimport TableBody from '@mui/material/TableBody';\nimport TableCell from '@mui/material/TableCell';\nimport TableFooter from '@mui/material/TableFooter';\nimport TableHead from '@mui/material/TableHead';\nimport TableRow from '@mui/material/TableRow';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport TrendingUpIcon from '@mui/icons-material/TrendingUp';\nimport TrendingDownIcon from '@mui/icons-material/TrendingDown';\nimport Typography from '@mui/material/Typography';\nimport Box from '@mui/material/Box';\n\nimport CardWrapper from '../CardWrapper';\nimport { PLUGINS_TABLE_HEADERS } from '../../utils/constants';\nimport { usePlugins } from '../../hooks/usePlugins';\nimport TableFooterPagination from '../CardFooter';\nimport { Line, LineChart, ResponsiveContainer } from 'recharts';\nimport EmptyChartState from '../Common/EmptyChartState';\nimport { useDateRange } from '../Header/DateRangeContext';\n\nconst Plugins = () => {\n  const [page, setPage] = useState(0);\n  const [limit] = useState(20);\n  const [rowsPerPage, setRowsPerPage] = useState(3);\n\n  const { isDefaultDateRange } = useDateRange();\n  const { plugins, loading, error } = usePlugins({ limit });\n\n  const handleChangePage = useCallback((_event: unknown, newPage: number) => {\n    setPage(newPage);\n  }, []);\n\n  const handleChangeRowsPerPage = useCallback(\n    (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      setRowsPerPage(+event.target.value);\n      setPage(0);\n    },\n    [],\n  );\n\n  const visiblePlugins = useMemo(() => {\n    return plugins.data?.slice(\n      page * rowsPerPage,\n      page * rowsPerPage + rowsPerPage,\n    );\n  }, [plugins, page, rowsPerPage]);\n\n  if (error) {\n    return (\n      <CardWrapper title=\"Top plugins\">\n        <ResponseErrorPanel error={error} />\n      </CardWrapper>\n    );\n  }\n\n  if (!visiblePlugins || visiblePlugins?.length === 0) {\n    return (\n      <CardWrapper title=\"Top plugins\">\n        <Box\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          height={200}\n        >\n          <EmptyChartState />\n        </Box>\n      </CardWrapper>\n    );\n  }\n\n  return (\n    <CardWrapper title={`Top ${rowsPerPage} plugins`}>\n      <Table aria-labelledby=\"Catalog entities\" sx={{ width: '100%' }}>\n        <TableHead>\n          <TableRow>\n            {PLUGINS_TABLE_HEADERS.map(header => {\n              if (isDefaultDateRange && header.id === 'percent') return null;\n              return (\n                <TableCell\n                  key={header.id}\n                  align=\"left\"\n                  sx={{\n                    borderBottom: theme =>\n                      `1px solid ${theme.palette.grey[300]}`,\n                  }}\n                >\n                  {header.title}\n                </TableCell>\n              );\n            })}\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {loading ? (\n            <TableRow>\n              <TableCell colSpan={PLUGINS_TABLE_HEADERS.length} align=\"center\">\n                <CircularProgress />\n              </TableCell>\n            </TableRow>\n          ) : (\n            visiblePlugins?.map(plugin => (\n              <TableRow\n                key={plugin.plugin_id}\n                sx={{\n                  '&:nth-of-type(odd)': { backgroundColor: 'inherit' },\n                  borderBottom: theme => `1px solid ${theme.palette.grey[300]}`,\n                }}\n              >\n                <TableCell sx={isDefaultDateRange ? {} : { width: '20%' }}>\n                  {plugin.plugin_id ?? '--'}\n                </TableCell>\n                <TableCell sx={{ width: '40%' }}>\n                  {plugin.trend?.length > 0 ? (\n                    <ResponsiveContainer width={250} height={50}>\n                      <LineChart data={plugin.trend}>\n                        <Line\n                          type=\"monotone\"\n                          dataKey=\"count\"\n                          stroke=\"#9370DB\"\n                          strokeWidth={2}\n                          dot={false}\n                        />\n                      </LineChart>\n                    </ResponsiveContainer>\n                  ) : (\n                    '--'\n                  )}\n                </TableCell>\n                {!isDefaultDateRange && (\n                  <TableCell sx={isDefaultDateRange ? {} : { width: '20%' }}>\n                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n                      {Math.round(Number(plugin.trend_percentage)) < 0 ? (\n                        <TrendingDownIcon sx={{ color: 'red' }} />\n                      ) : (\n                        <TrendingUpIcon sx={{ color: 'green' }} />\n                      )}\n                      <Typography variant=\"body2\">\n                        {Math.abs(Math.round(Number(plugin.trend_percentage)))}%\n                      </Typography>\n                    </Box>\n                  </TableCell>\n                )}\n                <TableCell sx={isDefaultDateRange ? {} : { width: '20%' }}>\n                  {Number(plugin.visit_count).toLocaleString() ?? '--'}\n                </TableCell>\n              </TableRow>\n            ))\n          )}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell\n              colSpan={PLUGINS_TABLE_HEADERS.length}\n              sx={{ padding: 0 }}\n            >\n              <TableFooterPagination\n                count={plugins.data?.length}\n                rowsPerPage={rowsPerPage}\n                page={page}\n                handleChangePage={handleChangePage}\n                handleChangeRowsPerPage={handleChangeRowsPerPage}\n              />\n            </TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </CardWrapper>\n  );\n};\n\nexport default Plugins;\n"],"names":[],"mappings":"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"}