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

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @red-hat-developer-hub/backstage-plugin-adoption-insights
 
+## 0.2.0
+
+### Minor Changes
+
+- 3a80c30: Backstage version bump to v1.39.1
+
+### Patch Changes
+
+- 3f93232: Updated dependency `@mui/icons-material` to `5.17.1`.
+  Updated dependency `@mui/material` to `5.17.1`.
+  Updated dependency `@red-hat-developer-hub/backstage-plugin-theme` to `^0.8.0`.
+- Updated dependencies [3a80c30]
+  - @red-hat-developer-hub/backstage-plugin-adoption-insights-common@0.3.0
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/components/ActiveUsers/ActiveUsers.esm.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ResponseErrorPanel } from '@backstage/core-components';
 import Box from '@mui/material/Box';
 import { useTheme } from '@mui/material/styles';
@@ -20,109 +20,126 @@ const ActiveUsers = () => {
   const { activeUsers, loading, error } = useActiveUsers();
   const { data, grouping = "daily" } = activeUsers;
   if (error) {
-    return /* @__PURE__ */ React__default.createElement(CardWrapper, { title: "Active users" }, /* @__PURE__ */ React__default.createElement(ResponseErrorPanel, { error }));
+    return /* @__PURE__ */ jsx(CardWrapper, { title: "Active users", children: /* @__PURE__ */ jsx(ResponseErrorPanel, { error }) });
   }
   if (!data || data?.length === 0 || !data?.[0] && !loading) {
-    return /* @__PURE__ */ React__default.createElement(CardWrapper, { title: "Active users" }, /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ jsx(CardWrapper, { title: "Active users", 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: "Active users", filter: /* @__PURE__ */ React__default.createElement(ExportCSVButton, null) }, loading ? /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(CardWrapper, { title: "Active users", filter: /* @__PURE__ */ jsx(ExportCSVButton, {}), children: loading ? /* @__PURE__ */ jsx(
     Box,
     {
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
-      height: 200
-    },
-    /* @__PURE__ */ React__default.createElement(CircularProgress, null)
-  ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Typography, { style: { margin: "20px 36px" } }, /* @__PURE__ */ React__default.createElement("b", null, `${Math.round(
-    getAverage(data, "total_users")
-  ).toLocaleString()} active users per ${grouping === "hourly" ? "hour" : "day"}`), " ", "were conducted during this period."), /* @__PURE__ */ React__default.createElement(Box, { sx: { height: 310, mt: 4, mb: 4, ml: 0, mr: 0 } }, /* @__PURE__ */ React__default.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React__default.createElement(
-    AreaChart,
-    {
-      data,
-      margin: { top: 10, right: 50, left: 20, bottom: 0 }
-    },
-    /* @__PURE__ */ React__default.createElement("defs", null, /* @__PURE__ */ React__default.createElement("linearGradient", { id: "new_users", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ React__default.createElement("stop", { offset: "5%", stopColor: "#1976d2", stopOpacity: 0.8 }), /* @__PURE__ */ React__default.createElement("stop", { offset: "95%", stopColor: "#1976d2", stopOpacity: 0.2 })), /* @__PURE__ */ React__default.createElement(
-      "linearGradient",
-      {
-        id: "returning_users",
-        x1: "0",
-        y1: "0",
-        x2: "0",
-        y2: "1"
-      },
-      /* @__PURE__ */ React__default.createElement("stop", { offset: "5%", stopColor: "#B8BBBE", stopOpacity: 0.8 }),
-      /* @__PURE__ */ React__default.createElement("stop", { offset: "95%", stopColor: "#B8BBBE", stopOpacity: 0.2 })
-    )),
-    /* @__PURE__ */ React__default.createElement(
-      CartesianGrid,
-      {
-        stroke: isDarkMode ? "#666" : "#E5E7EB",
-        strokeDasharray: 0,
-        vertical: false
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      XAxis,
-      {
-        dataKey: "date",
-        tickFormatter: (date) => getXAxisformat(date, grouping),
-        ticks: getXAxisTickValues(data, grouping),
-        tick: { fill: theme.palette.text.primary },
-        axisLine: false,
-        tickLine: false,
-        padding: { left: 30, right: 30 },
-        tickMargin: 10
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      YAxis,
-      {
-        tick: { fill: theme.palette.text.primary },
-        tickLine: false,
-        axisLine: false,
-        tickFormatter: (value) => value.toLocaleString(),
-        tickMargin: 20
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      Tooltip,
-      {
-        cursor: /* @__PURE__ */ React__default.createElement(CustomCursor, { cursorHeight: 250 }),
-        content: /* @__PURE__ */ React__default.createElement(CustomTooltip, { grouping })
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      Area,
-      {
-        type: "linear",
-        dataKey: "returning_users",
-        stroke: "#555",
-        fill: "url(#returning_users)",
-        strokeWidth: 1
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      Area,
+      height: 200,
+      children: /* @__PURE__ */ jsx(CircularProgress, {})
+    }
+  ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Typography, { style: { margin: "20px 36px" }, children: [
+      /* @__PURE__ */ jsx("b", { children: `${Math.round(
+        getAverage(data, "total_users")
+      ).toLocaleString()} active users per ${grouping === "hourly" ? "hour" : "day"}` }),
+      " ",
+      "were conducted during this period."
+    ] }),
+    /* @__PURE__ */ jsx(Box, { sx: { height: 310, mt: 4, mb: 4, ml: 0, mr: 0 }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+      AreaChart,
       {
-        type: "linear",
-        dataKey: "new_users",
-        stroke: "#1976d2",
-        fill: "url(#new_users)",
-        strokeWidth: 1
+        data,
+        margin: { top: 10, right: 50, left: 20, bottom: 0 },
+        children: [
+          /* @__PURE__ */ jsxs("defs", { children: [
+            /* @__PURE__ */ jsxs("linearGradient", { id: "new_users", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: "#1976d2", stopOpacity: 0.8 }),
+              /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: "#1976d2", stopOpacity: 0.2 })
+            ] }),
+            /* @__PURE__ */ jsxs(
+              "linearGradient",
+              {
+                id: "returning_users",
+                x1: "0",
+                y1: "0",
+                x2: "0",
+                y2: "1",
+                children: [
+                  /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: "#B8BBBE", stopOpacity: 0.8 }),
+                  /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: "#B8BBBE", stopOpacity: 0.2 })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            CartesianGrid,
+            {
+              stroke: isDarkMode ? "#666" : "#E5E7EB",
+              strokeDasharray: 0,
+              vertical: false
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: "date",
+              tickFormatter: (date) => getXAxisformat(date, grouping),
+              ticks: getXAxisTickValues(data, grouping),
+              tick: { fill: theme.palette.text.primary },
+              axisLine: false,
+              tickLine: false,
+              padding: { left: 30, right: 30 },
+              tickMargin: 10
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              tick: { fill: theme.palette.text.primary },
+              tickLine: false,
+              axisLine: false,
+              tickFormatter: (value) => value.toLocaleString(),
+              tickMargin: 20
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              cursor: /* @__PURE__ */ jsx(CustomCursor, { cursorHeight: 250 }),
+              content: /* @__PURE__ */ jsx(CustomTooltip, { grouping })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Area,
+            {
+              type: "linear",
+              dataKey: "returning_users",
+              stroke: "#555",
+              fill: "url(#returning_users)",
+              strokeWidth: 1
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Area,
+            {
+              type: "linear",
+              dataKey: "new_users",
+              stroke: "#1976d2",
+              fill: "url(#new_users)",
+              strokeWidth: 1
+            }
+          ),
+          /* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(CustomLegend, {}) })
+        ]
       }
-    ),
-    /* @__PURE__ */ React__default.createElement(Legend, { content: /* @__PURE__ */ React__default.createElement(CustomLegend, null) })
-  )))));
+    ) }) })
+  ] }) });
 };
 
 export { ActiveUsers as default };

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

@@ -1 +1 @@
-{"version":3,"file":"ActiveUsers.esm.js","sources":["../../../src/components/ActiveUsers/ActiveUsers.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 Box from '@mui/material/Box';\nimport { useTheme } from '@mui/material/styles';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport {\n  AreaChart,\n  CartesianGrid,\n  ResponsiveContainer,\n  XAxis,\n  YAxis,\n  Tooltip,\n  Area,\n  Legend,\n} from 'recharts';\n\nimport CardWrapper from '../CardWrapper';\nimport CustomTooltip from './CustomTooltip';\nimport CustomCursor from '../Common/CustomCursor';\nimport CustomLegend from './CustomLegend';\nimport {\n  getAverage,\n  getXAxisformat,\n  getXAxisTickValues,\n} from '../../utils/utils';\nimport { useActiveUsers } from '../../hooks/useActiveUsers';\nimport { Typography } from '@material-ui/core';\nimport ExportCSVButton from './ExportCSVButton';\nimport EmptyChartState from '../Common/EmptyChartState';\n\nconst ActiveUsers = () => {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n\n  const { activeUsers, loading, error } = useActiveUsers();\n  const { data, grouping = 'daily' } = activeUsers;\n\n  if (error) {\n    return (\n      <CardWrapper title=\"Active users\">\n        <ResponseErrorPanel error={error} />\n      </CardWrapper>\n    );\n  }\n\n  if (!data || data?.length === 0 || (!data?.[0] && !loading)) {\n    return (\n      <CardWrapper title=\"Active users\">\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=\"Active users\" filter={<ExportCSVButton />}>\n      {loading ? (\n        <Box\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          height={200}\n        >\n          <CircularProgress />\n        </Box>\n      ) : (\n        <>\n          <Typography style={{ margin: '20px 36px' }}>\n            <b>\n              {`${Math.round(\n                getAverage(data, 'total_users'),\n              ).toLocaleString()} active users per ${\n                grouping === 'hourly' ? 'hour' : 'day'\n              }`}\n            </b>{' '}\n            were conducted during this period.\n          </Typography>\n          <Box sx={{ height: 310, mt: 4, mb: 4, ml: 0, mr: 0 }}>\n            <ResponsiveContainer width=\"100%\" height=\"100%\">\n              <AreaChart\n                data={data}\n                margin={{ top: 10, right: 50, left: 20, bottom: 0 }}\n              >\n                <defs>\n                  <linearGradient id=\"new_users\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop offset=\"5%\" stopColor=\"#1976d2\" stopOpacity={0.8} />\n                    <stop offset=\"95%\" stopColor=\"#1976d2\" stopOpacity={0.2} />\n                  </linearGradient>\n                  <linearGradient\n                    id=\"returning_users\"\n                    x1=\"0\"\n                    y1=\"0\"\n                    x2=\"0\"\n                    y2=\"1\"\n                  >\n                    <stop offset=\"5%\" stopColor=\"#B8BBBE\" stopOpacity={0.8} />\n                    <stop offset=\"95%\" stopColor=\"#B8BBBE\" stopOpacity={0.2} />\n                  </linearGradient>\n                </defs>\n\n                <CartesianGrid\n                  stroke={isDarkMode ? '#666' : '#E5E7EB'}\n                  strokeDasharray={0}\n                  vertical={false}\n                />\n\n                <XAxis\n                  dataKey=\"date\"\n                  tickFormatter={date => getXAxisformat(date, grouping)}\n                  ticks={getXAxisTickValues(data, grouping)}\n                  tick={{ fill: theme.palette.text.primary }}\n                  axisLine={false}\n                  tickLine={false}\n                  padding={{ left: 30, right: 30 }}\n                  tickMargin={10}\n                />\n                <YAxis\n                  tick={{ fill: theme.palette.text.primary }}\n                  tickLine={false}\n                  axisLine={false}\n                  tickFormatter={value => value.toLocaleString()}\n                  tickMargin={20}\n                />\n                <Tooltip\n                  cursor={<CustomCursor cursorHeight={250} />}\n                  content={<CustomTooltip grouping={grouping} />}\n                />\n                <Area\n                  type=\"linear\"\n                  dataKey=\"returning_users\"\n                  stroke=\"#555\"\n                  fill=\"url(#returning_users)\"\n                  strokeWidth={1}\n                />\n                <Area\n                  type=\"linear\"\n                  dataKey=\"new_users\"\n                  stroke=\"#1976d2\"\n                  fill=\"url(#new_users)\"\n                  strokeWidth={1}\n                />\n                <Legend content={<CustomLegend />} />\n              </AreaChart>\n            </ResponsiveContainer>\n          </Box>\n        </>\n      )}\n    </CardWrapper>\n  );\n};\n\nexport default ActiveUsers;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"ActiveUsers.esm.js","sources":["../../../src/components/ActiveUsers/ActiveUsers.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 { ResponseErrorPanel } from '@backstage/core-components';\nimport Box from '@mui/material/Box';\nimport { useTheme } from '@mui/material/styles';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport {\n  AreaChart,\n  CartesianGrid,\n  ResponsiveContainer,\n  XAxis,\n  YAxis,\n  Tooltip,\n  Area,\n  Legend,\n} from 'recharts';\n\nimport CardWrapper from '../CardWrapper';\nimport CustomTooltip from './CustomTooltip';\nimport CustomCursor from '../Common/CustomCursor';\nimport CustomLegend from './CustomLegend';\nimport {\n  getAverage,\n  getXAxisformat,\n  getXAxisTickValues,\n} from '../../utils/utils';\nimport { useActiveUsers } from '../../hooks/useActiveUsers';\nimport { Typography } from '@material-ui/core';\nimport ExportCSVButton from './ExportCSVButton';\nimport EmptyChartState from '../Common/EmptyChartState';\n\nconst ActiveUsers = () => {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n\n  const { activeUsers, loading, error } = useActiveUsers();\n  const { data, grouping = 'daily' } = activeUsers;\n\n  if (error) {\n    return (\n      <CardWrapper title=\"Active users\">\n        <ResponseErrorPanel error={error} />\n      </CardWrapper>\n    );\n  }\n\n  if (!data || data?.length === 0 || (!data?.[0] && !loading)) {\n    return (\n      <CardWrapper title=\"Active users\">\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=\"Active users\" filter={<ExportCSVButton />}>\n      {loading ? (\n        <Box\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          height={200}\n        >\n          <CircularProgress />\n        </Box>\n      ) : (\n        <>\n          <Typography style={{ margin: '20px 36px' }}>\n            <b>\n              {`${Math.round(\n                getAverage(data, 'total_users'),\n              ).toLocaleString()} active users per ${\n                grouping === 'hourly' ? 'hour' : 'day'\n              }`}\n            </b>{' '}\n            were conducted during this period.\n          </Typography>\n          <Box sx={{ height: 310, mt: 4, mb: 4, ml: 0, mr: 0 }}>\n            <ResponsiveContainer width=\"100%\" height=\"100%\">\n              <AreaChart\n                data={data}\n                margin={{ top: 10, right: 50, left: 20, bottom: 0 }}\n              >\n                <defs>\n                  <linearGradient id=\"new_users\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop offset=\"5%\" stopColor=\"#1976d2\" stopOpacity={0.8} />\n                    <stop offset=\"95%\" stopColor=\"#1976d2\" stopOpacity={0.2} />\n                  </linearGradient>\n                  <linearGradient\n                    id=\"returning_users\"\n                    x1=\"0\"\n                    y1=\"0\"\n                    x2=\"0\"\n                    y2=\"1\"\n                  >\n                    <stop offset=\"5%\" stopColor=\"#B8BBBE\" stopOpacity={0.8} />\n                    <stop offset=\"95%\" stopColor=\"#B8BBBE\" stopOpacity={0.2} />\n                  </linearGradient>\n                </defs>\n\n                <CartesianGrid\n                  stroke={isDarkMode ? '#666' : '#E5E7EB'}\n                  strokeDasharray={0}\n                  vertical={false}\n                />\n\n                <XAxis\n                  dataKey=\"date\"\n                  tickFormatter={date => getXAxisformat(date, grouping)}\n                  ticks={getXAxisTickValues(data, grouping)}\n                  tick={{ fill: theme.palette.text.primary }}\n                  axisLine={false}\n                  tickLine={false}\n                  padding={{ left: 30, right: 30 }}\n                  tickMargin={10}\n                />\n                <YAxis\n                  tick={{ fill: theme.palette.text.primary }}\n                  tickLine={false}\n                  axisLine={false}\n                  tickFormatter={value => value.toLocaleString()}\n                  tickMargin={20}\n                />\n                <Tooltip\n                  cursor={<CustomCursor cursorHeight={250} />}\n                  content={<CustomTooltip grouping={grouping} />}\n                />\n                <Area\n                  type=\"linear\"\n                  dataKey=\"returning_users\"\n                  stroke=\"#555\"\n                  fill=\"url(#returning_users)\"\n                  strokeWidth={1}\n                />\n                <Area\n                  type=\"linear\"\n                  dataKey=\"new_users\"\n                  stroke=\"#1976d2\"\n                  fill=\"url(#new_users)\"\n                  strokeWidth={1}\n                />\n                <Legend content={<CustomLegend />} />\n              </AreaChart>\n            </ResponsiveContainer>\n          </Box>\n        </>\n      )}\n    </CardWrapper>\n  );\n};\n\nexport default ActiveUsers;\n"],"names":[],"mappings":"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"}

package/dist/components/ActiveUsers/CustomLegend.esm.js

@@ -1,11 +1,11 @@
-import React__default from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
 
 const CustomLegend = (props) => {
   const theme = useTheme();
   const { payload } = props;
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       style: {
@@ -14,43 +14,48 @@ const CustomLegend = (props) => {
         alignItems: "center",
         marginLeft: 50,
         paddingTop: 10
-      }
-    },
-    payload.map((entry) => /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        key: entry.value,
-        style: { display: "flex", alignItems: "center", gap: 4 }
       },
-      /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
+      children: payload.map((entry) => /* @__PURE__ */ jsxs(
         "div",
         {
-          style: {
-            width: 20,
-            height: 3,
-            backgroundColor: entry.color
-          }
-        }
-      ), /* @__PURE__ */ React__default.createElement(
-        "div",
-        {
-          style: {
-            width: 20,
-            height: 4,
-            backgroundColor: entry.color,
-            opacity: "0.4"
-          }
-        }
-      )),
-      /* @__PURE__ */ React__default.createElement(
-        Typography,
-        {
-          variant: "body2",
-          style: { color: theme.palette.text.primary, fontSize: "0.875rem" }
+          style: { display: "flex", alignItems: "center", gap: 4 },
+          children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: 20,
+                    height: 3,
+                    backgroundColor: entry.color
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: 20,
+                    height: 4,
+                    backgroundColor: entry.color,
+                    opacity: "0.4"
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "body2",
+                style: { color: theme.palette.text.primary, fontSize: "0.875rem" },
+                children: entry.value === "new_users" ? "New users" : "Returning users"
+              }
+            )
+          ]
         },
-        entry.value === "new_users" ? "New users" : "Returning users"
-      )
-    ))
+        entry.value
+      ))
+    }
   );
 };
 

package/dist/components/ActiveUsers/CustomLegend.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomLegend.esm.js","sources":["../../../src/components/ActiveUsers/CustomLegend.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 Typography from '@mui/material/Typography';\nimport { useTheme } from '@mui/material/styles';\n\nconst CustomLegend = (props: any) => {\n  const theme = useTheme();\n  const { payload } = props;\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        gap: 16,\n        alignItems: 'center',\n        marginLeft: 50,\n        paddingTop: 10,\n      }}\n    >\n      {payload.map((entry: any) => (\n        <div\n          key={entry.value}\n          style={{ display: 'flex', alignItems: 'center', gap: 4 }}\n        >\n          <div>\n            <div\n              style={{\n                width: 20,\n                height: 3,\n                backgroundColor: entry.color,\n              }}\n            />\n            <div\n              style={{\n                width: 20,\n                height: 4,\n                backgroundColor: entry.color,\n                opacity: '0.4',\n              }}\n            />\n          </div>\n          <Typography\n            variant=\"body2\"\n            style={{ color: theme.palette.text.primary, fontSize: '0.875rem' }}\n          >\n            {entry.value === 'new_users' ? 'New users' : 'Returning users'}\n          </Typography>\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default CustomLegend;\n"],"names":["React"],"mappings":";;;;AAoBM,MAAA,YAAA,GAAe,CAAC,KAAe,KAAA;AACnC,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EAAM,MAAA,EAAE,SAAY,GAAA,KAAA;AAEpB,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,OAAS,EAAA,MAAA;AAAA,QACT,GAAK,EAAA,EAAA;AAAA,QACL,UAAY,EAAA,QAAA;AAAA,QACZ,UAAY,EAAA,EAAA;AAAA,QACZ,UAAY,EAAA;AAAA;AACd,KAAA;AAAA,IAEC,OAAA,CAAQ,GAAI,CAAA,CAAC,KACZ,qBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,KAAK,KAAM,CAAA,KAAA;AAAA,QACX,OAAO,EAAE,OAAA,EAAS,QAAQ,UAAY,EAAA,QAAA,EAAU,KAAK,CAAE;AAAA,OAAA;AAAA,mDAEtD,KACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,KAAO,EAAA;AAAA,YACL,KAAO,EAAA,EAAA;AAAA,YACP,MAAQ,EAAA,CAAA;AAAA,YACR,iBAAiB,KAAM,CAAA;AAAA;AACzB;AAAA,OAEF,kBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,KAAO,EAAA;AAAA,YACL,KAAO,EAAA,EAAA;AAAA,YACP,MAAQ,EAAA,CAAA;AAAA,YACR,iBAAiB,KAAM,CAAA,KAAA;AAAA,YACvB,OAAS,EAAA;AAAA;AACX;AAAA,OAEJ,CAAA;AAAA,sBACAA,cAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,OAAA;AAAA,UACR,KAAA,EAAO,EAAE,KAAO,EAAA,KAAA,CAAM,QAAQ,IAAK,CAAA,OAAA,EAAS,UAAU,UAAW;AAAA,SAAA;AAAA,QAEhE,KAAA,CAAM,KAAU,KAAA,WAAA,GAAc,WAAc,GAAA;AAAA;AAC/C,KAEH;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"CustomLegend.esm.js","sources":["../../../src/components/ActiveUsers/CustomLegend.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 Typography from '@mui/material/Typography';\nimport { useTheme } from '@mui/material/styles';\n\nconst CustomLegend = (props: any) => {\n  const theme = useTheme();\n  const { payload } = props;\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        gap: 16,\n        alignItems: 'center',\n        marginLeft: 50,\n        paddingTop: 10,\n      }}\n    >\n      {payload.map((entry: any) => (\n        <div\n          key={entry.value}\n          style={{ display: 'flex', alignItems: 'center', gap: 4 }}\n        >\n          <div>\n            <div\n              style={{\n                width: 20,\n                height: 3,\n                backgroundColor: entry.color,\n              }}\n            />\n            <div\n              style={{\n                width: 20,\n                height: 4,\n                backgroundColor: entry.color,\n                opacity: '0.4',\n              }}\n            />\n          </div>\n          <Typography\n            variant=\"body2\"\n            style={{ color: theme.palette.text.primary, fontSize: '0.875rem' }}\n          >\n            {entry.value === 'new_users' ? 'New users' : 'Returning users'}\n          </Typography>\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default CustomLegend;\n"],"names":[],"mappings":";;;;AAkBM,MAAA,YAAA,GAAe,CAAC,KAAe,KAAA;AACnC,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EAAM,MAAA,EAAE,SAAY,GAAA,KAAA;AAEpB,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,OAAS,EAAA,MAAA;AAAA,QACT,GAAK,EAAA,EAAA;AAAA,QACL,UAAY,EAAA,QAAA;AAAA,QACZ,UAAY,EAAA,EAAA;AAAA,QACZ,UAAY,EAAA;AAAA,OACd;AAAA,MAEC,QAAA,EAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,KACZ,qBAAA,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,OAAO,EAAE,OAAA,EAAS,QAAQ,UAAY,EAAA,QAAA,EAAU,KAAK,CAAE,EAAA;AAAA,UAEvD,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,KACC,EAAA,EAAA,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,KAAO,EAAA;AAAA,oBACL,KAAO,EAAA,EAAA;AAAA,oBACP,MAAQ,EAAA,CAAA;AAAA,oBACR,iBAAiB,KAAM,CAAA;AAAA;AACzB;AAAA,eACF;AAAA,8BACA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,KAAO,EAAA;AAAA,oBACL,KAAO,EAAA,EAAA;AAAA,oBACP,MAAQ,EAAA,CAAA;AAAA,oBACR,iBAAiB,KAAM,CAAA,KAAA;AAAA,oBACvB,OAAS,EAAA;AAAA;AACX;AAAA;AACF,aACF,EAAA,CAAA;AAAA,4BACA,GAAA;AAAA,cAAC,UAAA;AAAA,cAAA;AAAA,gBACC,OAAQ,EAAA,OAAA;AAAA,gBACR,KAAA,EAAO,EAAE,KAAO,EAAA,KAAA,CAAM,QAAQ,IAAK,CAAA,OAAA,EAAS,UAAU,UAAW,EAAA;AAAA,gBAEhE,QAAA,EAAA,KAAA,CAAM,KAAU,KAAA,WAAA,GAAc,WAAc,GAAA;AAAA;AAAA;AAC/C;AAAA,SAAA;AAAA,QAzBK,KAAM,CAAA;AAAA,OA2Bd;AAAA;AAAA,GACH;AAEJ;;;;"}

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

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
@@ -14,7 +14,7 @@ const CustomTooltip = ({
   const theme = useTheme();
   if (active && payload?.length) {
     const date = label ? new Date(label) : /* @__PURE__ */ new Date();
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ jsxs(
       Paper,
       {
         elevation: 1,
@@ -22,62 +22,73 @@ const CustomTooltip = ({
           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, { display: "flex", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React__default.createElement(Box, { mr: 3 }, /* @__PURE__ */ React__default.createElement(
-        Typography,
-        {
-          sx: {
-            fontSize: "0.875rem",
-            fontWeight: 500,
-            color: theme.palette.text.secondary
-          }
-        },
-        "Returning users"
-      ), /* @__PURE__ */ React__default.createElement(
-        Typography,
-        {
-          sx: {
-            fontSize: "2.5rem",
-            fontWeight: 500,
-            color: "#009596",
-            lineHeight: 1.2
-          }
-        },
-        payload[0]?.value
-      )), /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(
-        Typography,
-        {
-          sx: {
-            fontSize: "0.875rem",
-            fontWeight: 500,
-            color: theme.palette.text.secondary
-          }
-        },
-        "New users"
-      ), /* @__PURE__ */ React__default.createElement(
-        Typography,
-        {
-          sx: {
-            fontSize: "2.5rem",
-            fontWeight: 500,
-            color: "#009596",
-            lineHeight: 1.2
-          }
-        },
-        payload[1]?.value
-      )))
+        children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              sx: {
+                fontSize: "0.875rem",
+                fontWeight: 500,
+                marginBottom: "12px"
+              },
+              children: grouping === "hourly" ? format(date, "MMMM dd, yyyy hh:mm a") : format(date, "MMMM, dd yyyy")
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [
+            /* @__PURE__ */ jsxs(Box, { mr: 3, children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  sx: {
+                    fontSize: "0.875rem",
+                    fontWeight: 500,
+                    color: theme.palette.text.secondary
+                  },
+                  children: "Returning users"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  sx: {
+                    fontSize: "2.5rem",
+                    fontWeight: 500,
+                    color: "#009596",
+                    lineHeight: 1.2
+                  },
+                  children: payload[0]?.value
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  sx: {
+                    fontSize: "0.875rem",
+                    fontWeight: 500,
+                    color: theme.palette.text.secondary
+                  },
+                  children: "New users"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  sx: {
+                    fontSize: "2.5rem",
+                    fontWeight: 500,
+                    color: "#009596",
+                    lineHeight: 1.2
+                  },
+                  children: payload[1]?.value
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
     );
   }
   return null;

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

@@ -1 +1 @@
-{"version":3,"file":"CustomTooltip.esm.js","sources":["../../../src/components/ActiveUsers/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 { useTheme } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\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 display=\"flex\" justifyContent=\"space-between\" alignItems=\"center\">\n          <Box mr={3}>\n            <Typography\n              sx={{\n                fontSize: '0.875rem',\n                fontWeight: 500,\n                color: theme.palette.text.secondary,\n              }}\n            >\n              Returning users\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\n          <Box>\n            <Typography\n              sx={{\n                fontSize: '0.875rem',\n                fontWeight: 500,\n                color: theme.palette.text.secondary,\n              }}\n            >\n              New users\n            </Typography>\n            <Typography\n              sx={{\n                fontSize: '2.5rem',\n                fontWeight: 500,\n                color: '#009596',\n                lineHeight: 1.2,\n              }}\n            >\n              {payload[1]?.value}\n            </Typography>\n          </Box>\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,OAAA,EAAQ,MAAO,EAAA,cAAA,EAAe,eAAgB,EAAA,UAAA,EAAW,QAC5D,EAAA,kBAAAA,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,CAEA,kBAAAA,cAAA,CAAA,aAAA,CAAC,GACC,EAAA,IAAA,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,CACF;AAAA,KACF;AAAA;AAGJ,EAAO,OAAA,IAAA;AACT;;;;"}
+{"version":3,"file":"CustomTooltip.esm.js","sources":["../../../src/components/ActiveUsers/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 Paper from '@mui/material/Paper';\nimport Typography from '@mui/material/Typography';\nimport { useTheme } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\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 display=\"flex\" justifyContent=\"space-between\" alignItems=\"center\">\n          <Box mr={3}>\n            <Typography\n              sx={{\n                fontSize: '0.875rem',\n                fontWeight: 500,\n                color: theme.palette.text.secondary,\n              }}\n            >\n              Returning users\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\n          <Box>\n            <Typography\n              sx={{\n                fontSize: '0.875rem',\n                fontWeight: 500,\n                color: theme.palette.text.secondary,\n              }}\n            >\n              New users\n            </Typography>\n            <Typography\n              sx={{\n                fontSize: '2.5rem',\n                fontWeight: 500,\n                color: '#009596',\n                lineHeight: 1.2,\n              }}\n            >\n              {payload[1]?.value}\n            </Typography>\n          </Box>\n        </Box>\n      </Paper>\n    );\n  }\n  return null;\n};\n\nexport default CustomTooltip;\n"],"names":[],"mappings":";;;;;;;AAqBA,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,uBAAA,IAAA;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,SAChB;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,EAAI,EAAA;AAAA,gBACF,QAAU,EAAA,UAAA;AAAA,gBACV,UAAY,EAAA,GAAA;AAAA,gBACZ,YAAc,EAAA;AAAA,eAChB;AAAA,cAEC,QAAA,EAAA,QAAA,KAAa,WACV,MAAO,CAAA,IAAA,EAAM,uBAAuB,CACpC,GAAA,MAAA,CAAO,MAAM,eAAe;AAAA;AAAA,WAClC;AAAA,+BAEC,GAAI,EAAA,EAAA,OAAA,EAAQ,QAAO,cAAe,EAAA,eAAA,EAAgB,YAAW,QAC5D,EAAA,QAAA,EAAA;AAAA,4BAAC,IAAA,CAAA,GAAA,EAAA,EAAI,IAAI,CACP,EAAA,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,UAAA;AAAA,gBAAA;AAAA,kBACC,EAAI,EAAA;AAAA,oBACF,QAAU,EAAA,UAAA;AAAA,oBACV,UAAY,EAAA,GAAA;AAAA,oBACZ,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA,mBAC5B;AAAA,kBACD,QAAA,EAAA;AAAA;AAAA,eAED;AAAA,8BACA,GAAA;AAAA,gBAAC,UAAA;AAAA,gBAAA;AAAA,kBACC,EAAI,EAAA;AAAA,oBACF,QAAU,EAAA,QAAA;AAAA,oBACV,UAAY,EAAA,GAAA;AAAA,oBACZ,KAAO,EAAA,SAAA;AAAA,oBACP,UAAY,EAAA;AAAA,mBACd;AAAA,kBAEC,QAAA,EAAA,OAAA,CAAQ,CAAC,CAAG,EAAA;AAAA;AAAA;AACf,aACF,EAAA,CAAA;AAAA,iCAEC,GACC,EAAA,EAAA,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,UAAA;AAAA,gBAAA;AAAA,kBACC,EAAI,EAAA;AAAA,oBACF,QAAU,EAAA,UAAA;AAAA,oBACV,UAAY,EAAA,GAAA;AAAA,oBACZ,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA,mBAC5B;AAAA,kBACD,QAAA,EAAA;AAAA;AAAA,eAED;AAAA,8BACA,GAAA;AAAA,gBAAC,UAAA;AAAA,gBAAA;AAAA,kBACC,EAAI,EAAA;AAAA,oBACF,QAAU,EAAA,QAAA;AAAA,oBACV,UAAY,EAAA,GAAA;AAAA,oBACZ,KAAO,EAAA,SAAA;AAAA,oBACP,UAAY,EAAA;AAAA,mBACd;AAAA,kBAEC,QAAA,EAAA,OAAA,CAAQ,CAAC,CAAG,EAAA;AAAA;AAAA;AACf,aACF,EAAA;AAAA,WACF,EAAA;AAAA;AAAA;AAAA,KACF;AAAA;AAGJ,EAAO,OAAA,IAAA;AACT;;;;"}