@red-hat-developer-hub/backstage-plugin-adoption-insights 0.0.2

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

@@ -0,0 +1,160 @@
+import React__default from 'react';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import TextField from '@mui/material/TextField';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { PickersDay } from '@mui/x-date-pickers/PickersDay';
+import { isBefore, isAfter, isSameDay } from 'date-fns';
+import { DatePicker } from '@mui/x-date-pickers';
+import Divider from '@mui/material/Divider';
+import Typography from '@mui/material/Typography';
+
+const DateRangePicker = ({
+  startDate,
+  setStartDate,
+  endDate,
+  setEndDate
+}) => {
+  const handleDateChange = React__default.useCallback(
+    (date) => {
+      if (!date) return;
+      if (!startDate || startDate && endDate) {
+        setStartDate(date);
+        setEndDate(null);
+      } else if (isBefore(date, startDate)) {
+        setStartDate(date);
+      } else {
+        setEndDate(date);
+      }
+    },
+    [startDate, endDate, setStartDate, setEndDate]
+  );
+  const handleStartDateChange = React__default.useCallback(
+    (date) => {
+      if (!date) return;
+      if (date) {
+        const year = date.getFullYear();
+        if (year >= 1900 && year <= 2100) {
+          if (endDate && isAfter(date, endDate)) {
+            setEndDate(null);
+          }
+          setStartDate(date);
+        }
+      }
+    },
+    [endDate, setStartDate, setEndDate]
+  );
+  const handleEndDateChange = React__default.useCallback(
+    (date) => {
+      if (!date) return;
+      if (date) {
+        const year = date.getFullYear();
+        if (year >= 1900 && year <= 2100) {
+          if (startDate && isBefore(date, startDate)) {
+            setStartDate(null);
+          }
+          setEndDate(date);
+        }
+      }
+    },
+    [startDate, setStartDate, setEndDate]
+  );
+  const renderDay = (day, _value, pickersDayProps) => {
+    if (!startDate) return /* @__PURE__ */ React__default.createElement(PickersDay, { ...pickersDayProps, disableMargin: true });
+    const isStart = isSameDay(day, startDate);
+    const isEnd = endDate && isSameDay(day, endDate);
+    const inRange = startDate && endDate && isAfter(day, startDate) && isBefore(day, endDate);
+    if (isStart || isEnd) {
+      return /* @__PURE__ */ React__default.createElement(
+        PickersDay,
+        {
+          ...pickersDayProps,
+          sx: {
+            backgroundColor: (theme) => theme.palette.primary.main,
+            color: (theme) => theme.palette.primary.contrastText,
+            borderRadius: "50%",
+            margin: 0,
+            "&:focus": {
+              backgroundColor: (theme) => theme.palette.primary.dark
+            }
+          }
+        }
+      );
+    }
+    if (inRange) {
+      return /* @__PURE__ */ React__default.createElement(
+        PickersDay,
+        {
+          ...pickersDayProps,
+          sx: {
+            backgroundColor: (theme) => theme.palette.action.hover,
+            borderRadius: 0,
+            margin: 0
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ React__default.createElement(PickersDay, { ...pickersDayProps, disableMargin: true });
+  };
+  return /* @__PURE__ */ React__default.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns }, /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5", p: 2, pb: 0, fontWeight: "400" }, "Date range"), /* @__PURE__ */ React__default.createElement(Divider, { sx: { mt: 2 } }), /* @__PURE__ */ React__default.createElement(
+    Grid,
+    {
+      container: true,
+      justifyContent: "space-between",
+      sx: { width: "100%", margin: "unset" }
+    },
+    /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 6, sx: { padding: "16px 8px 16px 24px !important" } }, /* @__PURE__ */ React__default.createElement(
+      DatePicker,
+      {
+        label: "Start date",
+        value: startDate,
+        onChange: handleStartDateChange,
+        renderInput: (params) => /* @__PURE__ */ React__default.createElement(
+          TextField,
+          {
+            ...params,
+            sx: { width: 172 },
+            autoFocus: Boolean(!startDate)
+          }
+        ),
+        maxDate: /* @__PURE__ */ new Date(),
+        views: ["day"]
+      }
+    )),
+    /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 6, sx: { padding: "16px 24px 16px 8px !important" } }, /* @__PURE__ */ React__default.createElement(
+      DatePicker,
+      {
+        label: "End date",
+        value: endDate,
+        onChange: handleEndDateChange,
+        renderInput: (params) => /* @__PURE__ */ React__default.createElement(
+          TextField,
+          {
+            ...params,
+            sx: { width: 172 },
+            focused: Boolean(startDate && !endDate)
+          }
+        ),
+        maxDate: /* @__PURE__ */ new Date(),
+        views: ["day"]
+      }
+    ))
+  ), /* @__PURE__ */ React__default.createElement(
+    StaticDatePicker,
+    {
+      displayStaticWrapperAs: "desktop",
+      showDaysOutsideCurrentMonth: true,
+      maxDate: /* @__PURE__ */ new Date(),
+      views: ["day"],
+      renderInput: (params) => /* @__PURE__ */ React__default.createElement(TextField, { ...params }),
+      onChange: handleDateChange,
+      value: null,
+      renderDay
+    }
+  )));
+};
+
+export { DateRangePicker as default };
+//# sourceMappingURL=DateRangePicker.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.esm.js","sources":["../../../src/components/Header/DateRangePicker.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus */\n/*\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 Box from '@mui/material/Box';\nimport Grid from '@mui/material/Grid';\nimport TextField from '@mui/material/TextField';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\nimport { PickersDay, PickersDayProps } from '@mui/x-date-pickers/PickersDay';\nimport { isAfter, isBefore, isSameDay } from 'date-fns';\nimport { DatePicker } from '@mui/x-date-pickers';\nimport Divider from '@mui/material/Divider';\nimport Typography from '@mui/material/Typography';\n\ninterface DateRangePickerProps {\n  startDate: Date | null;\n  setStartDate: React.Dispatch<React.SetStateAction<Date | null>>;\n  endDate: Date | null;\n  setEndDate: React.Dispatch<React.SetStateAction<Date | null>>;\n}\n\nconst DateRangePicker: React.FC<DateRangePickerProps> = ({\n  startDate,\n  setStartDate,\n  endDate,\n  setEndDate,\n}) => {\n  const handleDateChange = React.useCallback(\n    (date: Date | null) => {\n      if (!date) return;\n\n      if (!startDate || (startDate && endDate)) {\n        setStartDate(date);\n        setEndDate(null);\n      } else if (isBefore(date, startDate)) {\n        setStartDate(date);\n      } else {\n        setEndDate(date);\n      }\n    },\n    [startDate, endDate, setStartDate, setEndDate],\n  );\n\n  const handleStartDateChange = React.useCallback(\n    (date: Date | null) => {\n      if (!date) return;\n\n      if (date) {\n        const year = date.getFullYear();\n        if (year >= 1900 && year <= 2100) {\n          if (endDate && isAfter(date, endDate)) {\n            setEndDate(null);\n          }\n          setStartDate(date);\n        }\n      }\n    },\n    [endDate, setStartDate, setEndDate],\n  );\n\n  const handleEndDateChange = React.useCallback(\n    (date: Date | null) => {\n      if (!date) return;\n\n      if (date) {\n        const year = date.getFullYear();\n        if (year >= 1900 && year <= 2100) {\n          if (startDate && isBefore(date, startDate)) {\n            setStartDate(null);\n          }\n          setEndDate(date);\n        }\n      }\n    },\n    [startDate, setStartDate, setEndDate],\n  );\n\n  const renderDay = (\n    day: Date,\n    _value: Date[],\n    pickersDayProps: PickersDayProps<Date>,\n  ) => {\n    if (!startDate) return <PickersDay {...pickersDayProps} disableMargin />;\n\n    const isStart = isSameDay(day, startDate);\n    const isEnd = endDate && isSameDay(day, endDate);\n    const inRange =\n      startDate && endDate && isAfter(day, startDate) && isBefore(day, endDate);\n\n    if (isStart || isEnd) {\n      return (\n        <PickersDay\n          {...pickersDayProps}\n          sx={{\n            backgroundColor: theme => theme.palette.primary.main,\n            color: theme => theme.palette.primary.contrastText,\n            borderRadius: '50%',\n            margin: 0,\n            '&:focus': {\n              backgroundColor: theme => theme.palette.primary.dark,\n            },\n          }}\n        />\n      );\n    }\n\n    if (inRange) {\n      return (\n        <PickersDay\n          {...pickersDayProps}\n          sx={{\n            backgroundColor: theme => theme.palette.action.hover,\n            borderRadius: 0,\n            margin: 0,\n          }}\n        />\n      );\n    }\n\n    return <PickersDay {...pickersDayProps} disableMargin />;\n  };\n\n  return (\n    <LocalizationProvider dateAdapter={AdapterDateFns}>\n      <Box>\n        <Typography variant=\"h5\" p={2} pb={0} fontWeight=\"400\">\n          Date range\n        </Typography>\n        <Divider sx={{ mt: 2 }} />\n        <Grid\n          container\n          justifyContent=\"space-between\"\n          sx={{ width: '100%', margin: 'unset' }}\n        >\n          <Grid item xs={6} sx={{ padding: '16px 8px 16px 24px !important' }}>\n            <DatePicker\n              label=\"Start date\"\n              value={startDate}\n              onChange={handleStartDateChange}\n              renderInput={params => (\n                <TextField\n                  {...params}\n                  sx={{ width: 172 }}\n                  autoFocus={Boolean(!startDate)}\n                />\n              )}\n              maxDate={new Date()}\n              views={['day']}\n            />\n          </Grid>\n\n          <Grid item xs={6} sx={{ padding: '16px 24px 16px 8px !important' }}>\n            <DatePicker\n              label=\"End date\"\n              value={endDate}\n              onChange={handleEndDateChange}\n              renderInput={params => (\n                <TextField\n                  {...params}\n                  sx={{ width: 172 }}\n                  focused={Boolean(startDate && !endDate)}\n                />\n              )}\n              maxDate={new Date()}\n              views={['day']}\n            />\n          </Grid>\n        </Grid>\n\n        <StaticDatePicker\n          displayStaticWrapperAs=\"desktop\"\n          showDaysOutsideCurrentMonth\n          maxDate={new Date()}\n          views={['day']}\n          renderInput={params => <TextField {...params} />}\n          onChange={handleDateChange}\n          value={null}\n          renderDay={renderDay}\n        />\n      </Box>\n    </LocalizationProvider>\n  );\n};\n\nexport default DateRangePicker;\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AAqCA,MAAM,kBAAkD,CAAC;AAAA,EACvD,SAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,mBAAmBA,cAAM,CAAA,WAAA;AAAA,IAC7B,CAAC,IAAsB,KAAA;AACrB,MAAA,IAAI,CAAC,IAAM,EAAA;AAEX,MAAI,IAAA,CAAC,SAAc,IAAA,SAAA,IAAa,OAAU,EAAA;AACxC,QAAA,YAAA,CAAa,IAAI,CAAA;AACjB,QAAA,UAAA,CAAW,IAAI,CAAA;AAAA,OACN,MAAA,IAAA,QAAA,CAAS,IAAM,EAAA,SAAS,CAAG,EAAA;AACpC,QAAA,YAAA,CAAa,IAAI,CAAA;AAAA,OACZ,MAAA;AACL,QAAA,UAAA,CAAW,IAAI,CAAA;AAAA;AACjB,KACF;AAAA,IACA,CAAC,SAAA,EAAW,OAAS,EAAA,YAAA,EAAc,UAAU;AAAA,GAC/C;AAEA,EAAA,MAAM,wBAAwBA,cAAM,CAAA,WAAA;AAAA,IAClC,CAAC,IAAsB,KAAA;AACrB,MAAA,IAAI,CAAC,IAAM,EAAA;AAEX,MAAA,IAAI,IAAM,EAAA;AACR,QAAM,MAAA,IAAA,GAAO,KAAK,WAAY,EAAA;AAC9B,QAAI,IAAA,IAAA,IAAQ,IAAQ,IAAA,IAAA,IAAQ,IAAM,EAAA;AAChC,UAAA,IAAI,OAAW,IAAA,OAAA,CAAQ,IAAM,EAAA,OAAO,CAAG,EAAA;AACrC,YAAA,UAAA,CAAW,IAAI,CAAA;AAAA;AAEjB,UAAA,YAAA,CAAa,IAAI,CAAA;AAAA;AACnB;AACF,KACF;AAAA,IACA,CAAC,OAAS,EAAA,YAAA,EAAc,UAAU;AAAA,GACpC;AAEA,EAAA,MAAM,sBAAsBA,cAAM,CAAA,WAAA;AAAA,IAChC,CAAC,IAAsB,KAAA;AACrB,MAAA,IAAI,CAAC,IAAM,EAAA;AAEX,MAAA,IAAI,IAAM,EAAA;AACR,QAAM,MAAA,IAAA,GAAO,KAAK,WAAY,EAAA;AAC9B,QAAI,IAAA,IAAA,IAAQ,IAAQ,IAAA,IAAA,IAAQ,IAAM,EAAA;AAChC,UAAA,IAAI,SAAa,IAAA,QAAA,CAAS,IAAM,EAAA,SAAS,CAAG,EAAA;AAC1C,YAAA,YAAA,CAAa,IAAI,CAAA;AAAA;AAEnB,UAAA,UAAA,CAAW,IAAI,CAAA;AAAA;AACjB;AACF,KACF;AAAA,IACA,CAAC,SAAW,EAAA,YAAA,EAAc,UAAU;AAAA,GACtC;AAEA,EAAA,MAAM,SAAY,GAAA,CAChB,GACA,EAAA,MAAA,EACA,eACG,KAAA;AACH,IAAI,IAAA,CAAC,WAAkB,uBAAAA,cAAA,CAAA,aAAA,CAAC,cAAY,GAAG,eAAA,EAAiB,eAAa,IAAC,EAAA,CAAA;AAEtE,IAAM,MAAA,OAAA,GAAU,SAAU,CAAA,GAAA,EAAK,SAAS,CAAA;AACxC,IAAA,MAAM,KAAQ,GAAA,OAAA,IAAW,SAAU,CAAA,GAAA,EAAK,OAAO,CAAA;AAC/C,IAAM,MAAA,OAAA,GACJ,aAAa,OAAW,IAAA,OAAA,CAAQ,KAAK,SAAS,CAAA,IAAK,QAAS,CAAA,GAAA,EAAK,OAAO,CAAA;AAE1E,IAAA,IAAI,WAAW,KAAO,EAAA;AACpB,MACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACE,GAAG,eAAA;AAAA,UACJ,EAAI,EAAA;AAAA,YACF,eAAiB,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA,IAAA;AAAA,YAChD,KAAO,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA,YAAA;AAAA,YACtC,YAAc,EAAA,KAAA;AAAA,YACd,MAAQ,EAAA,CAAA;AAAA,YACR,SAAW,EAAA;AAAA,cACT,eAAiB,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA;AAAA;AAClD;AACF;AAAA,OACF;AAAA;AAIJ,IAAA,IAAI,OAAS,EAAA;AACX,MACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACE,GAAG,eAAA;AAAA,UACJ,EAAI,EAAA;AAAA,YACF,eAAiB,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA,KAAA;AAAA,YAC/C,YAAc,EAAA,CAAA;AAAA,YACd,MAAQ,EAAA;AAAA;AACV;AAAA,OACF;AAAA;AAIJ,IAAA,uBAAQA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAY,GAAG,eAAA,EAAiB,eAAa,IAAC,EAAA,CAAA;AAAA,GACxD;AAEA,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,oBAAqB,EAAA,EAAA,WAAA,EAAa,cACjC,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,2BACEA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,IAAA,EAAK,CAAG,EAAA,CAAA,EAAG,IAAI,CAAG,EAAA,UAAA,EAAW,KAAM,EAAA,EAAA,YAEvD,CACA,kBAAAA,cAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,EAAA,EAAI,EAAE,EAAA,EAAI,CAAE,EAAA,EAAG,CACxB,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAS,EAAA,IAAA;AAAA,MACT,cAAe,EAAA,eAAA;AAAA,MACf,EAAI,EAAA,EAAE,KAAO,EAAA,MAAA,EAAQ,QAAQ,OAAQ;AAAA,KAAA;AAAA,oBAErCA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,GAAG,EAAI,EAAA,EAAE,OAAS,EAAA,+BAAA,EAC/B,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,YAAA;AAAA,QACN,KAAO,EAAA,SAAA;AAAA,QACP,QAAU,EAAA,qBAAA;AAAA,QACV,aAAa,CACX,MAAA,qBAAAA,cAAA,CAAA,aAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACE,GAAG,MAAA;AAAA,YACJ,EAAA,EAAI,EAAE,KAAA,EAAO,GAAI,EAAA;AAAA,YACjB,SAAA,EAAW,OAAQ,CAAA,CAAC,SAAS;AAAA;AAAA,SAC/B;AAAA,QAEF,OAAA,sBAAa,IAAK,EAAA;AAAA,QAClB,KAAA,EAAO,CAAC,KAAK;AAAA;AAAA,KAEjB,CAAA;AAAA,oBAEAA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,GAAG,EAAI,EAAA,EAAE,OAAS,EAAA,+BAAA,EAC/B,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,UAAA;AAAA,QACN,KAAO,EAAA,OAAA;AAAA,QACP,QAAU,EAAA,mBAAA;AAAA,QACV,aAAa,CACX,MAAA,qBAAAA,cAAA,CAAA,aAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACE,GAAG,MAAA;AAAA,YACJ,EAAA,EAAI,EAAE,KAAA,EAAO,GAAI,EAAA;AAAA,YACjB,OAAS,EAAA,OAAA,CAAQ,SAAa,IAAA,CAAC,OAAO;AAAA;AAAA,SACxC;AAAA,QAEF,OAAA,sBAAa,IAAK,EAAA;AAAA,QAClB,KAAA,EAAO,CAAC,KAAK;AAAA;AAAA,KAEjB;AAAA,GAGF,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,sBAAuB,EAAA,SAAA;AAAA,MACvB,2BAA2B,EAAA,IAAA;AAAA,MAC3B,OAAA,sBAAa,IAAK,EAAA;AAAA,MAClB,KAAA,EAAO,CAAC,KAAK,CAAA;AAAA,MACb,WAAa,EAAA,CAAA,MAAA,qBAAWA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAW,GAAG,MAAQ,EAAA,CAAA;AAAA,MAC9C,QAAU,EAAA,gBAAA;AAAA,MACV,KAAO,EAAA,IAAA;AAAA,MACP;AAAA;AAAA,GAEJ,CACF,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,195 @@
+import React__default from 'react';
+import { Header } from '@backstage/core-components';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import Popover from '@mui/material/Popover';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import DateRangePicker from './DateRangePicker.esm.js';
+import { useDateRange } from './DateRangeContext.esm.js';
+import { DATE_RANGE_OPTIONS } from '../../utils/constants.esm.js';
+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 {
+    startDateRange,
+    setStartDateRange,
+    endDateRange,
+    setEndDateRange,
+    setIsDefaultDateRange
+  } = useDateRange();
+  React__default.useEffect(() => {
+    const today = /* @__PURE__ */ new Date();
+    setStartDateRange(subDays(today, 27));
+    setEndDateRange(today);
+  }, [setStartDateRange, setEndDateRange]);
+  const handleChange = React__default.useCallback(
+    (event) => {
+      const value = event.target.value;
+      if (!value) return;
+      const { startDate: newStartDate, endDate: newEndDate } = getDateRange(value);
+      if (newStartDate && newEndDate) {
+        setStartDateRange(new Date(newStartDate));
+        setEndDateRange(new Date(newEndDate));
+        setIsDefaultDateRange(false);
+      }
+      setStartDate(null);
+      setEndDate(null);
+      setSelectedOption(value);
+    },
+    [setStartDateRange, setEndDateRange, setIsDefaultDateRange]
+  );
+  const handleDateRangeClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = React__default.useCallback(() => {
+    setAnchorEl(null);
+  }, []);
+  const handleDateRange = React__default.useCallback(() => {
+    if (startDate && endDate) {
+      setStartDateRange(startDate);
+      setEndDateRange(endDate);
+      setIsDefaultDateRange(false);
+      setSelectedOption("dateRange");
+      handleClose();
+      setMenuOpen(false);
+    }
+  }, [
+    startDate,
+    endDate,
+    setStartDateRange,
+    setEndDateRange,
+    handleClose,
+    setIsDefaultDateRange
+  ]);
+  const getLabel = React__default.useMemo(() => {
+    return (value) => {
+      if (value === "dateRange" && startDateRange && endDateRange)
+        return `${format(startDateRange, "PP")} - ${format(
+          endDateRange,
+          "PP"
+        )}`;
+      const option = DATE_RANGE_OPTIONS.find((opt) => opt.value === value);
+      return option ? option.label : "Last 28 days";
+    };
+  }, [startDateRange, endDateRange]);
+  return /* @__PURE__ */ React__default.createElement(
+    Header,
+    {
+      title: /* @__PURE__ */ React__default.createElement(
+        Typography,
+        {
+          variant: "h3",
+          color: "textPrimary",
+          sx: { fontWeight: "bold" }
+        },
+        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: {
+            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" }
+          }
+        }
+      },
+      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);
+          }
+        },
+        "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__ */ 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"
+      ))
+    )
+  );
+};
+
+export { InsightsHeader as default };
+//# sourceMappingURL=Header.esm.js.map

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

@@ -0,0 +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":"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"}

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

@@ -0,0 +1,6 @@
+import InsightsHeader from './Header.esm.js';
+
+
+
+export { InsightsHeader as default };
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -0,0 +1,113 @@
+import React__default from 'react';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableFooter from '@mui/material/TableFooter';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import CircularProgress from '@mui/material/CircularProgress';
+import TrendingUpIcon from '@mui/icons-material/TrendingUp';
+import TrendingDownIcon from '@mui/icons-material/TrendingDown';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import CardWrapper from '../CardWrapper/CardWrapper.esm.js';
+import { PLUGINS_TABLE_HEADERS } from '../../utils/constants.esm.js';
+import { usePlugins } from '../../hooks/usePlugins.esm.js';
+import TableFooterPagination from '../CardFooter/TableFooterPagination.esm.js';
+import { ResponsiveContainer, LineChart, Line } from 'recharts';
+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 { isDefaultDateRange } = useDateRange();
+  const { plugins, loading } = usePlugins({ limit });
+  const handleChangePage = React__default.useCallback(
+    (_event, newPage) => {
+      setPage(newPage);
+    },
+    []
+  );
+  const handleChangeRowsPerPage = React__default.useCallback(
+    (event) => {
+      setRowsPerPage(+event.target.value);
+      setPage(0);
+    },
+    []
+  );
+  const visiblePlugins = React__default.useMemo(() => {
+    return plugins.data?.slice(
+      page * rowsPerPage,
+      page * rowsPerPage + rowsPerPage
+    );
+  }, [plugins, page, rowsPerPage]);
+  if (!visiblePlugins || visiblePlugins?.length === 0) {
+    return /* @__PURE__ */ React__default.createElement(CardWrapper, { title: "Top plugins" }, /* @__PURE__ */ React__default.createElement(
+      Box,
+      {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: 200
+      },
+      /* @__PURE__ */ React__default.createElement(EmptyChartState, null)
+    ));
+  }
+  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,
+      {
+        key: header.id,
+        align: "left",
+        sx: {
+          borderBottom: (theme) => `1px solid ${theme.palette.grey[300]}`
+        }
+      },
+      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,
+      {
+        count: plugins.data?.length,
+        rowsPerPage,
+        page,
+        handleChangePage,
+        handleChangeRowsPerPage
+      }
+    )
+  )))));
+};
+
+export { Plugins as default };
+//# sourceMappingURL=Plugins.esm.js.map

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

@@ -0,0 +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 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 } = 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 (!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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"}

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

@@ -0,0 +1,6 @@
+import Plugins from './Plugins.esm.js';
+
+
+
+export { Plugins as default };
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/Searches/CustomTooltip.esm.js

@@ -0,0 +1,66 @@
+import React__default from 'react';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { useTheme } from '@mui/material/styles';
+import { format } from 'date-fns';
+
+const CustomTooltip = ({
+  active,
+  payload,
+  label,
+  grouping
+}) => {
+  const theme = useTheme();
+  if (active && payload?.length) {
+    const date = label ? new Date(label) : /* @__PURE__ */ new Date();
+    return /* @__PURE__ */ React__default.createElement(
+      Paper,
+      {
+        elevation: 1,
+        sx: {
+          padding: "12px 16px",
+          boxShadow: 4,
+          borderRadius: 2
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Typography,
+        {
+          sx: {
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            marginBottom: "12px"
+          }
+        },
+        grouping === "hourly" ? format(date, "MMMM dd, yyyy hh:mm a") : format(date, "MMMM, dd yyyy")
+      ),
+      /* @__PURE__ */ React__default.createElement(Box, { mr: 3 }, /* @__PURE__ */ React__default.createElement(
+        Typography,
+        {
+          sx: {
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            color: theme.palette.text.secondary
+          }
+        },
+        "Number of searches"
+      ), /* @__PURE__ */ React__default.createElement(
+        Typography,
+        {
+          sx: {
+            fontSize: "2.5rem",
+            fontWeight: 500,
+            color: "#009596",
+            lineHeight: 1.2
+          }
+        },
+        payload[0]?.value
+      ))
+    );
+  }
+  return null;
+};
+
+export { CustomTooltip as default };
+//# sourceMappingURL=CustomTooltip.esm.js.map

package/dist/components/Searches/CustomTooltip.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomTooltip.esm.js","sources":["../../../src/components/Searches/CustomTooltip.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 Paper from '@mui/material/Paper';\nimport Typography from '@mui/material/Typography';\nimport Box from '@mui/material/Box';\nimport { useTheme } from '@mui/material/styles';\nimport { format } from 'date-fns';\n\nconst CustomTooltip = ({\n  active,\n  payload,\n  label,\n  grouping,\n}: {\n  active?: boolean;\n  payload?: any[];\n  label?: string;\n  grouping?: string;\n}) => {\n  const theme = useTheme();\n\n  if (active && payload?.length) {\n    const date = label ? new Date(label) : new Date();\n    return (\n      <Paper\n        elevation={1}\n        sx={{\n          padding: '12px 16px',\n          boxShadow: 4,\n          borderRadius: 2,\n        }}\n      >\n        <Typography\n          sx={{\n            fontSize: '0.875rem',\n            fontWeight: 500,\n            marginBottom: '12px',\n          }}\n        >\n          {grouping === 'hourly'\n            ? format(date, 'MMMM dd, yyyy hh:mm a')\n            : format(date, 'MMMM, dd yyyy')}\n        </Typography>\n\n        <Box mr={3}>\n          <Typography\n            sx={{\n              fontSize: '0.875rem',\n              fontWeight: 500,\n              color: theme.palette.text.secondary,\n            }}\n          >\n            Number of searches\n          </Typography>\n          <Typography\n            sx={{\n              fontSize: '2.5rem',\n              fontWeight: 500,\n              color: '#009596',\n              lineHeight: 1.2,\n            }}\n          >\n            {payload[0]?.value}\n          </Typography>\n        </Box>\n      </Paper>\n    );\n  }\n  return null;\n};\n\nexport default CustomTooltip;\n"],"names":["React"],"mappings":";;;;;;;AAuBA,MAAM,gBAAgB,CAAC;AAAA,EACrB,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAKM,KAAA;AACJ,EAAA,MAAM,QAAQ,QAAS,EAAA;AAEvB,EAAI,IAAA,MAAA,IAAU,SAAS,MAAQ,EAAA;AAC7B,IAAA,MAAM,OAAO,KAAQ,GAAA,IAAI,KAAK,KAAK,CAAA,uBAAQ,IAAK,EAAA;AAChD,IACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,CAAA;AAAA,QACX,EAAI,EAAA;AAAA,UACF,OAAS,EAAA,WAAA;AAAA,UACT,SAAW,EAAA,CAAA;AAAA,UACX,YAAc,EAAA;AAAA;AAChB,OAAA;AAAA,sBAEAA,cAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,QAAU,EAAA,UAAA;AAAA,YACV,UAAY,EAAA,GAAA;AAAA,YACZ,YAAc,EAAA;AAAA;AAChB,SAAA;AAAA,QAEC,QAAA,KAAa,WACV,MAAO,CAAA,IAAA,EAAM,uBAAuB,CACpC,GAAA,MAAA,CAAO,MAAM,eAAe;AAAA,OAClC;AAAA,sBAEAA,cAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,CACP,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,QAAU,EAAA,UAAA;AAAA,YACV,UAAY,EAAA,GAAA;AAAA,YACZ,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA;AAC5B,SAAA;AAAA,QACD;AAAA,OAGD,kBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,QAAU,EAAA,QAAA;AAAA,YACV,UAAY,EAAA,GAAA;AAAA,YACZ,KAAO,EAAA,SAAA;AAAA,YACP,UAAY,EAAA;AAAA;AACd,SAAA;AAAA,QAEC,OAAA,CAAQ,CAAC,CAAG,EAAA;AAAA,OAEjB;AAAA,KACF;AAAA;AAGJ,EAAO,OAAA,IAAA;AACT;;;;"}