@drodil/backstage-plugin-qeta-react 3.28.1 → 3.29.0

package/dist/components/SearchBar/SearchBar.esm.js

@@ -1,8 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
-import { makeStyles, Paper, IconButton, CircularProgress, InputBase } from '@material-ui/core';
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import { makeStyles, Paper, Tooltip, IconButton, CircularProgress, InputBase } from '@material-ui/core';
 import SearchIcon from '@material-ui/icons/Search';
 import CloseIcon from '@material-ui/icons/Close';
+import debounce from 'lodash/debounce';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -11,26 +14,83 @@ const useStyles = makeStyles(
       display: "flex",
       alignItems: "center",
       minWidth: 300,
-      boxShadow: "none"
+      boxShadow: "none",
+      border: `1px solid ${theme.palette.divider}`,
+      borderRadius: theme.shape.borderRadius,
+      transition: "all 0.2s ease-in-out",
+      "&:hover": {
+        borderColor: theme.palette.primary.main
+      },
+      "&:focus-within": {
+        borderColor: theme.palette.primary.main,
+        boxShadow: `0 0 0 2px ${theme.palette.primary.light}`
+      }
     },
     input: {
       marginLeft: theme.spacing(1),
-      flex: 1
+      flex: 1,
+      fontSize: "0.9rem"
     },
     iconButton: {
-      padding: 5
+      padding: 5,
+      "&:hover": {
+        backgroundColor: theme.palette.action.hover
+      }
     },
     divider: {
       height: 28,
       margin: 4
+    },
+    searchIcon: {
+      color: theme.palette.text.secondary
+    },
+    loadingIcon: {
+      color: theme.palette.primary.main
     }
   }),
   { name: "QetaSearchBar" }
 );
 const SearchBar = (props) => {
-  const { label, onSearch, loading } = props;
+  const {
+    label,
+    onSearch,
+    loading = false,
+    minSearchLength = 1,
+    debounceTime = 150
+  } = props;
   const [searchQuery, setSearchQuery] = useState("");
   const classes = useStyles();
+  const { t } = useTranslationRef(qetaTranslationRef);
+  const debouncedSearch = useCallback(
+    (query) => {
+      if (query.length >= minSearchLength || query.length === 0) {
+        onSearch(query);
+      }
+    },
+    [onSearch, minSearchLength]
+  );
+  const debouncedSearchCallback = useMemo(
+    () => debounce(debouncedSearch, debounceTime),
+    [debouncedSearch, debounceTime]
+  );
+  useEffect(() => {
+    return () => {
+      debouncedSearchCallback.cancel();
+    };
+  }, [debouncedSearchCallback]);
+  const handleSearch = (query) => {
+    setSearchQuery(query);
+    debouncedSearchCallback(query);
+  };
+  const handleClear = () => {
+    setSearchQuery("");
+    onSearch("");
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape") {
+      handleClear();
+    }
+  };
   return /* @__PURE__ */ jsxs(
     Paper,
     {
@@ -38,43 +98,38 @@ const SearchBar = (props) => {
       className: classes.root,
       onSubmit: (e) => e.preventDefault(),
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Tooltip, { title: t("common.search"), children: /* @__PURE__ */ jsx(
           IconButton,
           {
             type: "button",
             "aria-label": "search",
             className: classes.iconButton,
-            children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: "1em" }) : /* @__PURE__ */ jsx(SearchIcon, { color: "disabled" })
+            children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 24, className: classes.loadingIcon }) : /* @__PURE__ */ jsx(SearchIcon, { className: classes.searchIcon })
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsx(
           InputBase,
           {
             className: classes.input,
             placeholder: label,
             value: searchQuery,
+            onKeyDown: handleKeyDown,
             inputProps: {
               "aria-label": label,
-              onChange: (event) => {
-                onSearch(event.target.value);
-                setSearchQuery(event.target.value);
-              }
+              onChange: (event) => handleSearch(event.target.value)
             }
           }
         ),
-        searchQuery && /* @__PURE__ */ jsx(
+        searchQuery && /* @__PURE__ */ jsx(Tooltip, { title: t("common.clear"), children: /* @__PURE__ */ jsx(
           IconButton,
           {
             type: "button",
             "aria-label": "clear",
             className: classes.iconButton,
-            onClick: () => {
-              onSearch("");
-              setSearchQuery("");
-            },
+            onClick: handleClear,
             children: /* @__PURE__ */ jsx(CloseIcon, {})
           }
-        )
+        ) })
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.esm.js","sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import { ChangeEvent, useState } from 'react';\nimport {\n  CircularProgress,\n  IconButton,\n  InputBase,\n  makeStyles,\n  Paper,\n  Theme,\n} from '@material-ui/core';\nimport SearchIcon from '@material-ui/icons/Search';\nimport CloseIcon from '@material-ui/icons/Close';\n\nexport type QetaSearchBarClassKeys =\n  | 'root'\n  | 'input'\n  | 'iconButton'\n  | 'divider';\n\nconst useStyles = makeStyles(\n  (theme: Theme) => ({\n    root: {\n      padding: '2px 4px',\n      display: 'flex',\n      alignItems: 'center',\n      minWidth: 300,\n      boxShadow: 'none',\n    },\n    input: {\n      marginLeft: theme.spacing(1),\n      flex: 1,\n    },\n    iconButton: {\n      padding: 5,\n    },\n    divider: {\n      height: 28,\n      margin: 4,\n    },\n  }),\n  { name: 'QetaSearchBar' },\n);\n\nexport const SearchBar = (props: {\n  label: string;\n  onSearch: (query: string) => void;\n  loading?: boolean;\n}) => {\n  const { label, onSearch, loading } = props;\n  const [searchQuery, setSearchQuery] = useState('');\n  const classes = useStyles();\n\n  return (\n    <Paper\n      component=\"form\"\n      className={classes.root}\n      onSubmit={e => e.preventDefault()}\n    >\n      <IconButton\n        type=\"button\"\n        aria-label=\"search\"\n        className={classes.iconButton}\n      >\n        {loading ? (\n          <CircularProgress size=\"1em\" />\n        ) : (\n          <SearchIcon color=\"disabled\" />\n        )}\n      </IconButton>\n      <InputBase\n        className={classes.input}\n        placeholder={label}\n        value={searchQuery}\n        inputProps={{\n          'aria-label': label,\n          onChange: (\n            event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,\n          ) => {\n            onSearch(event.target.value);\n            setSearchQuery(event.target.value);\n          },\n        }}\n      />\n      {searchQuery && (\n        <IconButton\n          type=\"button\"\n          aria-label=\"clear\"\n          className={classes.iconButton}\n          onClick={() => {\n            onSearch('');\n            setSearchQuery('');\n          }}\n        >\n          <CloseIcon />\n        </IconButton>\n      )}\n    </Paper>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAC,KAAkB,MAAA;AAAA,IACjB,IAAM,EAAA;AAAA,MACJ,OAAS,EAAA,SAAA;AAAA,MACT,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,QAAU,EAAA,GAAA;AAAA,MACV,SAAW,EAAA;AAAA,KACb;AAAA,IACA,KAAO,EAAA;AAAA,MACL,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC3B,IAAM,EAAA;AAAA,KACR;AAAA,IACA,UAAY,EAAA;AAAA,MACV,OAAS,EAAA;AAAA,KACX;AAAA,IACA,OAAS,EAAA;AAAA,MACP,MAAQ,EAAA,EAAA;AAAA,MACR,MAAQ,EAAA;AAAA;AACV,GACF,CAAA;AAAA,EACA,EAAE,MAAM,eAAgB;AAC1B,CAAA;AAEa,MAAA,SAAA,GAAY,CAAC,KAIpB,KAAA;AACJ,EAAA,MAAM,EAAE,KAAA,EAAO,QAAU,EAAA,OAAA,EAAY,GAAA,KAAA;AACrC,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,EAAE,CAAA;AACjD,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,MAAA;AAAA,MACV,WAAW,OAAQ,CAAA,IAAA;AAAA,MACnB,QAAA,EAAU,CAAK,CAAA,KAAA,CAAA,CAAE,cAAe,EAAA;AAAA,MAEhC,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,IAAK,EAAA,QAAA;AAAA,YACL,YAAW,EAAA,QAAA;AAAA,YACX,WAAW,OAAQ,CAAA,UAAA;AAAA,YAElB,QAAA,EAAA,OAAA,uBACE,gBAAiB,EAAA,EAAA,IAAA,EAAK,OAAM,CAE7B,mBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAM,UAAW,EAAA;AAAA;AAAA,SAEjC;AAAA,wBACA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,WAAW,OAAQ,CAAA,KAAA;AAAA,YACnB,WAAa,EAAA,KAAA;AAAA,YACb,KAAO,EAAA,WAAA;AAAA,YACP,UAAY,EAAA;AAAA,cACV,YAAc,EAAA,KAAA;AAAA,cACd,QAAA,EAAU,CACR,KACG,KAAA;AACH,gBAAS,QAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAC3B,gBAAe,cAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA;AACnC;AACF;AAAA,SACF;AAAA,QACC,WACC,oBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,IAAK,EAAA,QAAA;AAAA,YACL,YAAW,EAAA,OAAA;AAAA,YACX,WAAW,OAAQ,CAAA,UAAA;AAAA,YACnB,SAAS,MAAM;AACb,cAAA,QAAA,CAAS,EAAE,CAAA;AACX,cAAA,cAAA,CAAe,EAAE,CAAA;AAAA,aACnB;AAAA,YAEA,8BAAC,SAAU,EAAA,EAAA;AAAA;AAAA;AACb;AAAA;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"SearchBar.esm.js","sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import { ChangeEvent, useState, useEffect, useCallback, useMemo } from 'react';\nimport {\n  CircularProgress,\n  IconButton,\n  InputBase,\n  makeStyles,\n  Paper,\n  Theme,\n  Tooltip,\n} from '@material-ui/core';\nimport SearchIcon from '@material-ui/icons/Search';\nimport CloseIcon from '@material-ui/icons/Close';\nimport debounce from 'lodash/debounce';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation';\n\nexport type QetaSearchBarClassKeys =\n  | 'root'\n  | 'input'\n  | 'iconButton'\n  | 'divider'\n  | 'searchIcon'\n  | 'loadingIcon';\n\nconst useStyles = makeStyles(\n  (theme: Theme) => ({\n    root: {\n      padding: '2px 4px',\n      display: 'flex',\n      alignItems: 'center',\n      minWidth: 300,\n      boxShadow: 'none',\n      border: `1px solid ${theme.palette.divider}`,\n      borderRadius: theme.shape.borderRadius,\n      transition: 'all 0.2s ease-in-out',\n      '&:hover': {\n        borderColor: theme.palette.primary.main,\n      },\n      '&:focus-within': {\n        borderColor: theme.palette.primary.main,\n        boxShadow: `0 0 0 2px ${theme.palette.primary.light}`,\n      },\n    },\n    input: {\n      marginLeft: theme.spacing(1),\n      flex: 1,\n      fontSize: '0.9rem',\n    },\n    iconButton: {\n      padding: 5,\n      '&:hover': {\n        backgroundColor: theme.palette.action.hover,\n      },\n    },\n    divider: {\n      height: 28,\n      margin: 4,\n    },\n    searchIcon: {\n      color: theme.palette.text.secondary,\n    },\n    loadingIcon: {\n      color: theme.palette.primary.main,\n    },\n  }),\n  { name: 'QetaSearchBar' },\n);\n\nexport const SearchBar = (props: {\n  label: string;\n  onSearch: (query: string) => void;\n  loading?: boolean;\n  minSearchLength?: number;\n  debounceTime?: number;\n}) => {\n  const {\n    label,\n    onSearch,\n    loading = false,\n    minSearchLength = 1,\n    debounceTime = 150,\n  } = props;\n  const [searchQuery, setSearchQuery] = useState('');\n  const classes = useStyles();\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const debouncedSearch = useCallback(\n    (query: string) => {\n      if (query.length >= minSearchLength || query.length === 0) {\n        onSearch(query);\n      }\n    },\n    [onSearch, minSearchLength],\n  );\n\n  const debouncedSearchCallback = useMemo(\n    () => debounce(debouncedSearch, debounceTime),\n    [debouncedSearch, debounceTime],\n  );\n\n  useEffect(() => {\n    return () => {\n      debouncedSearchCallback.cancel();\n    };\n  }, [debouncedSearchCallback]);\n\n  const handleSearch = (query: string) => {\n    setSearchQuery(query);\n    debouncedSearchCallback(query);\n  };\n\n  const handleClear = () => {\n    setSearchQuery('');\n    onSearch('');\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      handleClear();\n    }\n  };\n\n  return (\n    <Paper\n      component=\"form\"\n      className={classes.root}\n      onSubmit={e => e.preventDefault()}\n    >\n      <Tooltip title={t('common.search')}>\n        <IconButton\n          type=\"button\"\n          aria-label=\"search\"\n          className={classes.iconButton}\n        >\n          {loading ? (\n            <CircularProgress size={24} className={classes.loadingIcon} />\n          ) : (\n            <SearchIcon className={classes.searchIcon} />\n          )}\n        </IconButton>\n      </Tooltip>\n      <InputBase\n        className={classes.input}\n        placeholder={label}\n        value={searchQuery}\n        onKeyDown={handleKeyDown}\n        inputProps={{\n          'aria-label': label,\n          onChange: (\n            event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,\n          ) => handleSearch(event.target.value),\n        }}\n      />\n      {searchQuery && (\n        <Tooltip title={t('common.clear')}>\n          <IconButton\n            type=\"button\"\n            aria-label=\"clear\"\n            className={classes.iconButton}\n            onClick={handleClear}\n          >\n            <CloseIcon />\n          </IconButton>\n        </Tooltip>\n      )}\n    </Paper>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/StatsChart/StatsChart.esm.js

@@ -1,7 +1,7 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
-import { ResponsiveContainer, BarChart, Tooltip, Bar, CartesianGrid, XAxis, YAxis, Legend, LineChart, Line } from 'recharts';
-import { makeStyles, createStyles, Typography, ButtonGroup, IconButton } from '@material-ui/core';
+import { ResponsiveContainer, BarChart, Tooltip as Tooltip$1, Bar, CartesianGrid, XAxis, YAxis, Legend, LineChart, Line } from 'recharts';
+import { makeStyles, createStyles, Typography, Box, CircularProgress, ButtonGroup, Tooltip, IconButton } from '@material-ui/core';
 import ShowChartIcon from '@material-ui/icons/ShowChart';
 import BarChartIcon from '@material-ui/icons/BarChart';
 import { useIsDarkTheme } from '../../hooks/useIsDarkTheme.esm.js';
@@ -16,85 +16,131 @@ const useStyles = makeStyles(
     },
     tooltipWrapper: {
       backgroundColor: `${theme.palette.background.default} !important`,
-      border: "none !important"
+      border: "none !important",
+      padding: theme.spacing(1),
+      borderRadius: theme.shape.borderRadius,
+      boxShadow: theme.shadows[2]
     },
     xAxis: {
       color: `${theme.palette.text.primary} !important`
     },
     lineChart: {},
-    barChart: {}
+    barChart: {},
+    chartContainer: {
+      position: "relative",
+      width: "100%",
+      height: 500
+    },
+    loadingOverlay: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "rgba(255, 255, 255, 0.7)",
+      zIndex: 1
+    },
+    chartTypeButton: {
+      "&.Mui-selected": {
+        backgroundColor: theme.palette.action.selected
+      }
+    },
+    errorMessage: {
+      color: theme.palette.error.main,
+      textAlign: "center",
+      padding: theme.spacing(2)
+    },
+    legend: {
+      "& .recharts-legend-item-text": {
+        fontFamily: theme.typography.fontFamily,
+        fontSize: theme.typography.body2.fontSize,
+        color: theme.palette.text.primary
+      }
+    }
   }),
   { name: "QetaStatsChart" }
 );
-const DEFAULT_STATS = [
+const getDefaultStats = (isDark, t) => [
   {
     dataKey: "totalViews",
-    name: "Total views",
-    color: "#8884d8",
+    name: t("stats.totalViews"),
+    color: isDark ? "#a3bffa" : "#1e40af",
+    // blue-400 / blue-900
     enabled: false,
     globalStat: true,
     userStat: true
   },
   {
     dataKey: "totalQuestions",
-    name: "Total questions",
-    color: "#82ca9d",
+    name: t("stats.totalQuestions"),
+    color: isDark ? "#6ee7b7" : "#047857",
+    // green-300 / green-800
     enabled: true,
     globalStat: true,
     userStat: true
   },
   {
     dataKey: "totalAnswers",
-    name: "Total answers",
-    color: "#ff7300",
+    name: t("stats.totalAnswers"),
+    color: isDark ? "#fbbf24" : "#b45309",
+    // yellow-400 / yellow-800
     enabled: true,
     globalStat: true,
     userStat: true
   },
   {
     dataKey: "totalComments",
-    name: "Total comments",
-    color: "#739973",
+    name: t("stats.totalComments"),
+    color: isDark ? "#2dd4bf" : "#0e7490",
+    // teal-400 / cyan-800
     enabled: true,
     globalStat: true,
     userStat: true
   },
   {
     dataKey: "totalVotes",
-    name: "Total votes",
-    color: "#d88884",
+    name: t("stats.totalVotes"),
+    color: isDark ? "#f87171" : "#991b1b",
+    // red-400 / red-800
     enabled: true,
     globalStat: true,
     userStat: true
   },
   {
     dataKey: "totalUsers",
-    name: "Total users",
-    color: "#ff0000",
+    name: t("stats.totalUsers"),
+    color: isDark ? "#a78bfa" : "#6d28d9",
+    // purple-400 / purple-800
     enabled: true,
     globalStat: true,
     userStat: false
   },
   {
     dataKey: "totalTags",
-    name: "Total tags",
-    color: "#ff00ff",
+    name: t("stats.totalTags"),
+    color: isDark ? "#34d399" : "#065f46",
+    // emerald-400 / emerald-900
     enabled: true,
     globalStat: true,
     userStat: false
   },
   {
     dataKey: "totalArticles",
-    name: "Total articles",
-    color: "#00ff00",
+    name: t("stats.totalArticles"),
+    color: isDark ? "#60a5fa" : "#1d4ed8",
+    // blue-400 / blue-800
     enabled: true,
     globalStat: true,
     userStat: true
   },
   {
     dataKey: "totalFollowers",
-    name: "Total followers",
-    color: "#ff0000",
+    name: t("stats.totalFollowers"),
+    color: isDark ? "#f472b6" : "#be185d",
+    // pink-400 / pink-800
     enabled: true,
     globalStat: false,
     userStat: true
@@ -103,10 +149,11 @@ const DEFAULT_STATS = [
 const useChartState = (data) => {
   const styles = useStyles();
   const isDark = useIsDarkTheme();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const globalStats = isGlobalStat(data[0]);
   const isUserStats = isUserStat(data[0]);
   const [stats, setStats] = useState(
-    DEFAULT_STATS.filter((stat) => {
+    getDefaultStats(isDark, t).filter((stat) => {
       if (globalStats && !stat.globalStat) {
         return false;
       }
@@ -131,25 +178,63 @@ const useChartState = (data) => {
   );
   return { styles, isDark, toggleStat, stats, isDisabled };
 };
+const legendWrapperStyle = {
+  cursor: "pointer",
+  display: "flex",
+  gap: 16,
+  marginLeft: 48
+};
+const XAxisTick = (props) => {
+  const { x, y, payload, fill } = props;
+  return /* @__PURE__ */ jsx("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx(
+    "text",
+    {
+      x: -6,
+      y: -12,
+      dy: 16,
+      textAnchor: "end",
+      fill,
+      transform: "rotate(-90)",
+      fontSize: "12",
+      children: new Date(payload.value).toDateString()
+    }
+  ) });
+};
 const StatsBarChart = (props) => {
   const { styles, isDark, stats, toggleStat, isDisabled } = useChartState(
     props.data
   );
   const localStyles = useStyles();
-  return /* @__PURE__ */ jsx(ResponsiveContainer, { height: 400, width: "100%", children: /* @__PURE__ */ jsxs(
+  const { t } = useTranslationRef(qetaTranslationRef);
+  return /* @__PURE__ */ jsx(ResponsiveContainer, { height: 500, width: "100%", children: /* @__PURE__ */ jsxs(
     BarChart,
     {
       data: props.data,
-      width: 900,
-      height: 300,
+      width: 1e3,
+      height: 400,
+      margin: { bottom: 80, right: 30 },
       className: localStyles.barChart,
+      "aria-label": t("stats.barChart"),
       children: [
         /* @__PURE__ */ jsx(
-          Tooltip,
+          Tooltip$1,
           {
             labelClassName: styles.tooltipLabel,
             wrapperClassName: styles.tooltipWrapper,
-            cursor: { fill: isDark ? "#4f4f4f" : "#f5f5f5" }
+            cursor: { fill: isDark ? "#4f4f4f" : "#f5f5f5" },
+            content: ({ active, payload, label }) => {
+              if (active && payload && payload.length) {
+                return /* @__PURE__ */ jsxs("div", { role: "tooltip", "aria-label": t("stats.tooltip"), children: [
+                  /* @__PURE__ */ jsx("p", { children: new Date(label).toLocaleDateString() }),
+                  payload.map((entry) => /* @__PURE__ */ jsxs("p", { style: { color: entry.color }, children: [
+                    entry.name,
+                    ": ",
+                    entry.value
+                  ] }, entry.name))
+                ] });
+              }
+              return null;
+            }
           }
         ),
         stats.map((stat) => /* @__PURE__ */ jsx(
@@ -157,11 +242,12 @@ const StatsBarChart = (props) => {
           {
             dataKey: stat.enabled ? stat.dataKey : "hidden",
             name: stat.name,
-            fill: stat.color
+            fill: stat.color,
+            "aria-label": stat.name
           },
           stat.dataKey
         )),
-        /* @__PURE__ */ jsx(CartesianGrid, { stroke: "#ccc" }),
+        /* @__PURE__ */ jsx(CartesianGrid, { stroke: isDark ? "#4f4f4f" : "#e0e0e0" }),
         /* @__PURE__ */ jsx(
           XAxis,
           {
@@ -169,7 +255,10 @@ const StatsBarChart = (props) => {
             tickFormatter: (tick) => new Date(tick).toDateString(),
             axisLine: { stroke: isDark ? "white" : "black" },
             tickLine: { stroke: isDark ? "white" : "black" },
-            tick: { fill: isDark ? "white" : "black" }
+            tick: /* @__PURE__ */ jsx(XAxisTick, { fill: isDark ? "white" : "black" }),
+            angle: -90,
+            dy: 10,
+            "aria-label": t("stats.dateAxis")
           }
         ),
         /* @__PURE__ */ jsx(
@@ -178,7 +267,8 @@ const StatsBarChart = (props) => {
             allowDecimals: false,
             axisLine: { stroke: isDark ? "white" : "black" },
             tickLine: { stroke: isDark ? "white" : "black" },
-            tick: { fill: isDark ? "white" : "black" }
+            tick: { fill: isDark ? "white" : "black" },
+            "aria-label": t("stats.valueAxis")
           }
         ),
         /* @__PURE__ */ jsx(
@@ -186,7 +276,8 @@ const StatsBarChart = (props) => {
           {
             verticalAlign: "top",
             height: 36,
-            wrapperStyle: { cursor: "pointer" },
+            wrapperStyle: legendWrapperStyle,
+            className: localStyles.legend,
             formatter: (data) => {
               return isDisabled(data) ? `[ ] ${data}` : `[x] ${data}`;
             },
@@ -206,16 +297,18 @@ const StatsLineChart = (props) => {
     props.data
   );
   const localStyles = useStyles();
-  return /* @__PURE__ */ jsx(ResponsiveContainer, { height: 400, width: "100%", children: /* @__PURE__ */ jsxs(
+  const { t } = useTranslationRef(qetaTranslationRef);
+  return /* @__PURE__ */ jsx(ResponsiveContainer, { height: 500, width: "100%", children: /* @__PURE__ */ jsxs(
     LineChart,
     {
       data: props.data,
-      width: 900,
-      height: 300,
+      width: 1e3,
+      height: 400,
+      margin: { bottom: 80, right: 30 },
       className: localStyles.lineChart,
       children: [
         /* @__PURE__ */ jsx(
-          Tooltip,
+          Tooltip$1,
           {
             labelClassName: styles.tooltipLabel,
             wrapperClassName: styles.tooltipWrapper,
@@ -239,7 +332,10 @@ const StatsLineChart = (props) => {
             tickFormatter: (tick) => new Date(tick).toDateString(),
             axisLine: { stroke: isDark ? "white" : "black" },
             tickLine: { stroke: isDark ? "white" : "black" },
-            tick: { fill: isDark ? "white" : "black" }
+            tick: /* @__PURE__ */ jsx(XAxisTick, { fill: isDark ? "white" : "black" }),
+            angle: -45,
+            dy: 10,
+            "aria-label": t("stats.dateAxis")
           }
         ),
         /* @__PURE__ */ jsx(
@@ -256,7 +352,8 @@ const StatsLineChart = (props) => {
           {
             verticalAlign: "top",
             height: 36,
-            wrapperStyle: { cursor: "pointer" },
+            wrapperStyle: legendWrapperStyle,
+            className: localStyles.legend,
             formatter: (data) => {
               return isDisabled(data) ? `[ ] ${data}` : `[x] ${data}`;
             },
@@ -274,34 +371,49 @@ const StatsLineChart = (props) => {
 const StatsChart = (props) => {
   const { t } = useTranslationRef(qetaTranslationRef);
   const [chart, setChart] = useState("line");
+  const classes = useStyles();
+  if (props.error) {
+    return /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", className: classes.errorMessage, children: props.error });
+  }
   if (!props.data || props.data.length === 0) {
     return /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: t("stats.noStats") });
   }
   const data = props.data.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()).map((d) => ({ ...d, hidden: 0 }));
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Box, { className: classes.chartContainer, children: [
+    props.loading && /* @__PURE__ */ jsx("div", { className: classes.loadingOverlay, children: /* @__PURE__ */ jsx(CircularProgress, {}) }),
     chart === "line" ? /* @__PURE__ */ jsx(StatsLineChart, { data }) : /* @__PURE__ */ jsx(StatsBarChart, { data }),
-    /* @__PURE__ */ jsxs(ButtonGroup, { "aria-label": "Chart type", style: { float: "right" }, children: [
-      /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          "aria-label": "Line chart",
-          onClick: () => {
-            setChart("line");
-          },
-          children: /* @__PURE__ */ jsx(ShowChartIcon, {})
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          "aria-label": "Bar chart",
-          onClick: () => {
-            setChart("bar");
-          },
-          children: /* @__PURE__ */ jsx(BarChartIcon, {})
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsxs(
+      ButtonGroup,
+      {
+        "aria-label": t("stats.chartType"),
+        style: { float: "right" },
+        role: "radiogroup",
+        children: [
+          /* @__PURE__ */ jsx(Tooltip, { title: t("stats.lineChart"), children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "aria-label": t("stats.lineChart"),
+              onClick: () => setChart("line"),
+              className: classes.chartTypeButton,
+              "aria-checked": chart === "line",
+              role: "radio",
+              children: /* @__PURE__ */ jsx(ShowChartIcon, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: t("stats.barChart"), children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "aria-label": t("stats.barChart"),
+              onClick: () => setChart("bar"),
+              className: classes.chartTypeButton,
+              "aria-checked": chart === "bar",
+              role: "radio",
+              children: /* @__PURE__ */ jsx(BarChartIcon, {})
+            }
+          ) })
+        ]
+      }
+    )
   ] });
 };