@drodil/backstage-plugin-qeta-react 3.28.2 → 3.29.1

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

@@ -1 +1 @@
-{"version":3,"file":"StatsChart.esm.js","sources":["../../../src/components/StatsChart/StatsChart.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { Stat } from '@drodil/backstage-plugin-qeta-common';\nimport {\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Legend,\n  Line,\n  LineChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from 'recharts';\nimport {\n  ButtonGroup,\n  createStyles,\n  IconButton,\n  makeStyles,\n  Theme,\n  Typography,\n} from '@material-ui/core';\nimport ShowChartIcon from '@material-ui/icons/ShowChart';\nimport BarChartIcon from '@material-ui/icons/BarChart';\nimport { useIsDarkTheme } from '../../hooks/useIsDarkTheme';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { isGlobalStat, isUserStat } from './util';\n\nexport type QetaStatsChartClassKey =\n  | 'tooltipLabel'\n  | 'tooltipWrapper'\n  | 'xAxis'\n  | 'lineChart'\n  | 'barChart';\n\nconst useStyles = makeStyles(\n  (theme: Theme) =>\n    createStyles({\n      tooltipLabel: {\n        color: theme.palette.text.primary,\n      },\n      tooltipWrapper: {\n        backgroundColor: `${theme.palette.background.default} !important`,\n        border: 'none !important',\n      },\n      xAxis: {\n        color: `${theme.palette.text.primary} !important`,\n      },\n      lineChart: {},\n      barChart: {},\n    }),\n  { name: 'QetaStatsChart' },\n);\n\ntype StatType = {\n  dataKey:\n    | 'totalViews'\n    | 'totalQuestions'\n    | 'totalAnswers'\n    | 'totalComments'\n    | 'totalVotes'\n    | 'totalUsers'\n    | 'totalTags'\n    | 'totalArticles'\n    | 'totalFollowers';\n  name: string;\n  color: string;\n  enabled: boolean;\n  globalStat: boolean;\n  userStat: boolean;\n};\n\nconst DEFAULT_STATS: StatType[] = [\n  {\n    dataKey: 'totalViews',\n    name: 'Total views',\n    color: '#8884d8',\n    enabled: false,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalQuestions',\n    name: 'Total questions',\n    color: '#82ca9d',\n    enabled: true,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalAnswers',\n    name: 'Total answers',\n    color: '#ff7300',\n    enabled: true,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalComments',\n    name: 'Total comments',\n    color: '#739973',\n    enabled: true,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalVotes',\n    name: 'Total votes',\n    color: '#d88884',\n    enabled: true,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalUsers',\n    name: 'Total users',\n    color: '#ff0000',\n    enabled: true,\n    globalStat: true,\n    userStat: false,\n  },\n  {\n    dataKey: 'totalTags',\n    name: 'Total tags',\n    color: '#ff00ff',\n    enabled: true,\n    globalStat: true,\n    userStat: false,\n  },\n  {\n    dataKey: 'totalArticles',\n    name: 'Total articles',\n    color: '#00ff00',\n    enabled: true,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalFollowers',\n    name: 'Total followers',\n    color: '#ff0000',\n    enabled: true,\n    globalStat: false,\n    userStat: true,\n  },\n];\n\nconst useChartState = (data: Stat[]) => {\n  const styles = useStyles();\n  const isDark = useIsDarkTheme();\n  const globalStats = isGlobalStat(data[0]);\n  const isUserStats = isUserStat(data[0]);\n  const [stats, setStats] = useState<StatType[]>(\n    DEFAULT_STATS.filter(stat => {\n      if (globalStats && !stat.globalStat) {\n        return false;\n      }\n      return !(isUserStats && !stat.userStat);\n    }),\n  );\n\n  const toggleStat = useCallback(\n    (name: string) => {\n      setStats(prev =>\n        prev.map(stat =>\n          stat.name === name ? { ...stat, enabled: !stat.enabled } : stat,\n        ),\n      );\n    },\n    [setStats],\n  );\n  const isDisabled = useCallback(\n    (name: string) => {\n      return stats.find(stat => stat.name === name)?.enabled === false;\n    },\n    [stats],\n  );\n\n  return { styles, isDark, toggleStat, stats, isDisabled };\n};\n\nconst StatsBarChart = (props: { data: Stat[] }) => {\n  const { styles, isDark, stats, toggleStat, isDisabled } = useChartState(\n    props.data,\n  );\n  const localStyles = useStyles();\n  return (\n    <ResponsiveContainer height={400} width=\"100%\">\n      <BarChart\n        data={props.data}\n        width={900}\n        height={300}\n        className={localStyles.barChart}\n      >\n        <Tooltip\n          labelClassName={styles.tooltipLabel}\n          wrapperClassName={styles.tooltipWrapper}\n          cursor={{ fill: isDark ? '#4f4f4f' : '#f5f5f5' }}\n        />\n        {stats.map(stat => (\n          <Bar\n            key={stat.dataKey}\n            dataKey={stat.enabled ? stat.dataKey : 'hidden'}\n            name={stat.name}\n            fill={stat.color}\n          />\n        ))}\n        <CartesianGrid stroke=\"#ccc\" />\n        <XAxis\n          dataKey=\"date\"\n          tickFormatter={(tick: string) => new Date(tick).toDateString()}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={{ fill: isDark ? 'white' : 'black' }}\n        />\n        <YAxis\n          allowDecimals={false}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={{ fill: isDark ? 'white' : 'black' }}\n        />\n        <Legend\n          verticalAlign=\"top\"\n          height={36}\n          wrapperStyle={{ cursor: 'pointer' }}\n          formatter={data => {\n            return isDisabled(data) ? `[ ] ${data}` : `[x] ${data}`;\n          }}\n          onClick={data => {\n            if (data.value) {\n              toggleStat(data.value as string);\n            }\n          }}\n        />\n      </BarChart>\n    </ResponsiveContainer>\n  );\n};\n\nconst StatsLineChart = (props: { data: Stat[] }) => {\n  const { styles, isDark, stats, toggleStat, isDisabled } = useChartState(\n    props.data,\n  );\n  const localStyles = useStyles();\n  return (\n    <ResponsiveContainer height={400} width=\"100%\">\n      <LineChart\n        data={props.data}\n        width={900}\n        height={300}\n        className={localStyles.lineChart}\n      >\n        <Tooltip\n          labelClassName={styles.tooltipLabel}\n          wrapperClassName={styles.tooltipWrapper}\n          cursor={{ fill: isDark ? '#4f4f4f' : '#f5f5f5' }}\n        />\n        {stats.map(stat => (\n          <Line\n            key={stat.dataKey}\n            dataKey={stat.enabled ? stat.dataKey : 'hidden'}\n            name={stat.name}\n            stroke={stat.color}\n          />\n        ))}\n        <CartesianGrid stroke=\"#ccc\" />\n        <XAxis\n          dataKey=\"date\"\n          tickFormatter={(tick: string) => new Date(tick).toDateString()}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={{ fill: isDark ? 'white' : 'black' }}\n        />\n        <YAxis\n          allowDecimals={false}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={{ fill: isDark ? 'white' : 'black' }}\n        />\n        <Legend\n          verticalAlign=\"top\"\n          height={36}\n          wrapperStyle={{ cursor: 'pointer' }}\n          formatter={data => {\n            return isDisabled(data) ? `[ ] ${data}` : `[x] ${data}`;\n          }}\n          onClick={data => {\n            if (data.value) {\n              toggleStat(data.value as string);\n            }\n          }}\n        />\n      </LineChart>\n    </ResponsiveContainer>\n  );\n};\n\nexport const StatsChart = (props: { data: Stat[] }) => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const [chart, setChart] = useState<'line' | 'bar'>('line');\n\n  if (!props.data || props.data.length === 0) {\n    return <Typography variant=\"subtitle1\">{t('stats.noStats')}</Typography>;\n  }\n  const data = props.data\n    .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())\n    .map(d => ({ ...d, hidden: 0 }));\n\n  return (\n    <>\n      {chart === 'line' ? (\n        <StatsLineChart data={data} />\n      ) : (\n        <StatsBarChart data={data} />\n      )}\n      <ButtonGroup aria-label=\"Chart type\" style={{ float: 'right' }}>\n        <IconButton\n          aria-label=\"Line chart\"\n          onClick={() => {\n            setChart('line');\n          }}\n        >\n          <ShowChartIcon />\n        </IconButton>\n        <IconButton\n          aria-label=\"Bar chart\"\n          onClick={() => {\n            setChart('bar');\n          }}\n        >\n          <BarChartIcon />\n        </IconButton>\n      </ButtonGroup>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"StatsChart.esm.js","sources":["../../../src/components/StatsChart/StatsChart.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { Stat } from '@drodil/backstage-plugin-qeta-common';\nimport {\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Legend,\n  Line,\n  LineChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from 'recharts';\nimport {\n  ButtonGroup,\n  createStyles,\n  IconButton,\n  makeStyles,\n  Theme,\n  Typography,\n  Tooltip as MuiTooltip,\n  CircularProgress,\n  Box,\n} from '@material-ui/core';\nimport ShowChartIcon from '@material-ui/icons/ShowChart';\nimport BarChartIcon from '@material-ui/icons/BarChart';\nimport { useIsDarkTheme } from '../../hooks/useIsDarkTheme';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { isGlobalStat, isUserStat } from './util';\n\nexport type QetaStatsChartClassKey =\n  | 'tooltipLabel'\n  | 'tooltipWrapper'\n  | 'xAxis'\n  | 'lineChart'\n  | 'barChart';\n\nconst useStyles = makeStyles(\n  (theme: Theme) =>\n    createStyles({\n      tooltipLabel: {\n        color: theme.palette.text.primary,\n      },\n      tooltipWrapper: {\n        backgroundColor: `${theme.palette.background.default} !important`,\n        border: 'none !important',\n        padding: theme.spacing(1),\n        borderRadius: theme.shape.borderRadius,\n        boxShadow: theme.shadows[2],\n      },\n      xAxis: {\n        color: `${theme.palette.text.primary} !important`,\n      },\n      lineChart: {},\n      barChart: {},\n      chartContainer: {\n        position: 'relative',\n        width: '100%',\n        height: 500,\n      },\n      loadingOverlay: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundColor: 'rgba(255, 255, 255, 0.7)',\n        zIndex: 1,\n      },\n      chartTypeButton: {\n        '&.Mui-selected': {\n          backgroundColor: theme.palette.action.selected,\n        },\n      },\n      errorMessage: {\n        color: theme.palette.error.main,\n        textAlign: 'center',\n        padding: theme.spacing(2),\n      },\n      legend: {\n        '& .recharts-legend-item-text': {\n          fontFamily: theme.typography.fontFamily,\n          fontSize: theme.typography.body2.fontSize,\n          color: theme.palette.text.primary,\n        },\n      },\n    }),\n  { name: 'QetaStatsChart' },\n);\n\ntype StatType = {\n  dataKey:\n    | 'totalViews'\n    | 'totalQuestions'\n    | 'totalAnswers'\n    | 'totalComments'\n    | 'totalVotes'\n    | 'totalUsers'\n    | 'totalTags'\n    | 'totalArticles'\n    | 'totalFollowers';\n  name: string;\n  color: string;\n  enabled: boolean;\n  globalStat: boolean;\n  userStat: boolean;\n};\n\nconst getDefaultStats = (isDark: boolean, t: any): StatType[] => [\n  {\n    dataKey: 'totalViews',\n    name: t('stats.totalViews'),\n    color: isDark ? '#a3bffa' : '#1e40af', // blue-400 / blue-900\n    enabled: false,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalQuestions',\n    name: t('stats.totalQuestions'),\n    color: isDark ? '#6ee7b7' : '#047857', // green-300 / green-800\n    enabled: true,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalAnswers',\n    name: t('stats.totalAnswers'),\n    color: isDark ? '#fbbf24' : '#b45309', // yellow-400 / yellow-800\n    enabled: true,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalComments',\n    name: t('stats.totalComments'),\n    color: isDark ? '#2dd4bf' : '#0e7490', // teal-400 / cyan-800\n    enabled: true,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalVotes',\n    name: t('stats.totalVotes'),\n    color: isDark ? '#f87171' : '#991b1b', // red-400 / red-800\n    enabled: true,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalUsers',\n    name: t('stats.totalUsers'),\n    color: isDark ? '#a78bfa' : '#6d28d9', // purple-400 / purple-800\n    enabled: true,\n    globalStat: true,\n    userStat: false,\n  },\n  {\n    dataKey: 'totalTags',\n    name: t('stats.totalTags'),\n    color: isDark ? '#34d399' : '#065f46', // emerald-400 / emerald-900\n    enabled: true,\n    globalStat: true,\n    userStat: false,\n  },\n  {\n    dataKey: 'totalArticles',\n    name: t('stats.totalArticles'),\n    color: isDark ? '#60a5fa' : '#1d4ed8', // blue-400 / blue-800\n    enabled: true,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalFollowers',\n    name: t('stats.totalFollowers'),\n    color: isDark ? '#f472b6' : '#be185d', // pink-400 / pink-800\n    enabled: true,\n    globalStat: false,\n    userStat: true,\n  },\n];\n\nconst useChartState = (data: Stat[]) => {\n  const styles = useStyles();\n  const isDark = useIsDarkTheme();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const globalStats = isGlobalStat(data[0]);\n  const isUserStats = isUserStat(data[0]);\n  const [stats, setStats] = useState<StatType[]>(\n    getDefaultStats(isDark, t).filter(stat => {\n      if (globalStats && !stat.globalStat) {\n        return false;\n      }\n      return !(isUserStats && !stat.userStat);\n    }),\n  );\n\n  const toggleStat = useCallback(\n    (name: string) => {\n      setStats(prev =>\n        prev.map(stat =>\n          stat.name === name ? { ...stat, enabled: !stat.enabled } : stat,\n        ),\n      );\n    },\n    [setStats],\n  );\n  const isDisabled = useCallback(\n    (name: string) => {\n      return stats.find(stat => stat.name === name)?.enabled === false;\n    },\n    [stats],\n  );\n\n  return { styles, isDark, toggleStat, stats, isDisabled };\n};\n\nconst legendWrapperStyle = {\n  cursor: 'pointer',\n  display: 'flex',\n  gap: 16,\n  marginLeft: 48,\n};\n\n// Custom tick renderer for angled date labels\nconst XAxisTick = (props: any) => {\n  const { x, y, payload, fill } = props;\n  return (\n    <g transform={`translate(${x},${y})`}>\n      <text\n        x={-6}\n        y={-12}\n        dy={16}\n        textAnchor=\"end\"\n        fill={fill}\n        transform=\"rotate(-90)\"\n        fontSize=\"12\"\n      >\n        {new Date(payload.value).toDateString()}\n      </text>\n    </g>\n  );\n};\n\nconst StatsBarChart = (props: { data: Stat[] }) => {\n  const { styles, isDark, stats, toggleStat, isDisabled } = useChartState(\n    props.data,\n  );\n  const localStyles = useStyles();\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  return (\n    <ResponsiveContainer height={500} width=\"100%\">\n      <BarChart\n        data={props.data}\n        width={1000}\n        height={400}\n        margin={{ bottom: 80, right: 30 }}\n        className={localStyles.barChart}\n        aria-label={t('stats.barChart')}\n      >\n        <Tooltip\n          labelClassName={styles.tooltipLabel}\n          wrapperClassName={styles.tooltipWrapper}\n          cursor={{ fill: isDark ? '#4f4f4f' : '#f5f5f5' }}\n          content={({ active, payload, label }) => {\n            if (active && payload && payload.length) {\n              return (\n                <div role=\"tooltip\" aria-label={t('stats.tooltip')}>\n                  <p>{new Date(label).toLocaleDateString()}</p>\n                  {payload.map((entry: any) => (\n                    <p key={entry.name} style={{ color: entry.color }}>\n                      {entry.name}: {entry.value}\n                    </p>\n                  ))}\n                </div>\n              );\n            }\n            return null;\n          }}\n        />\n        {stats.map(stat => (\n          <Bar\n            key={stat.dataKey}\n            dataKey={stat.enabled ? stat.dataKey : 'hidden'}\n            name={stat.name}\n            fill={stat.color}\n            aria-label={stat.name}\n          />\n        ))}\n        <CartesianGrid stroke={isDark ? '#4f4f4f' : '#e0e0e0'} />\n        <XAxis\n          dataKey=\"date\"\n          tickFormatter={(tick: string) => new Date(tick).toDateString()}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={<XAxisTick fill={isDark ? 'white' : 'black'} />}\n          angle={-90}\n          dy={10}\n          aria-label={t('stats.dateAxis')}\n        />\n        <YAxis\n          allowDecimals={false}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={{ fill: isDark ? 'white' : 'black' }}\n          aria-label={t('stats.valueAxis')}\n        />\n        <Legend\n          verticalAlign=\"top\"\n          height={36}\n          wrapperStyle={legendWrapperStyle}\n          className={localStyles.legend}\n          formatter={data => {\n            return isDisabled(data) ? `[ ] ${data}` : `[x] ${data}`;\n          }}\n          onClick={data => {\n            if (data.value) {\n              toggleStat(data.value as string);\n            }\n          }}\n        />\n      </BarChart>\n    </ResponsiveContainer>\n  );\n};\n\nconst StatsLineChart = (props: { data: Stat[] }) => {\n  const { styles, isDark, stats, toggleStat, isDisabled } = useChartState(\n    props.data,\n  );\n  const localStyles = useStyles();\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  return (\n    <ResponsiveContainer height={500} width=\"100%\">\n      <LineChart\n        data={props.data}\n        width={1000}\n        height={400}\n        margin={{ bottom: 80, right: 30 }}\n        className={localStyles.lineChart}\n      >\n        <Tooltip\n          labelClassName={styles.tooltipLabel}\n          wrapperClassName={styles.tooltipWrapper}\n          cursor={{ fill: isDark ? '#4f4f4f' : '#f5f5f5' }}\n        />\n        {stats.map(stat => (\n          <Line\n            key={stat.dataKey}\n            dataKey={stat.enabled ? stat.dataKey : 'hidden'}\n            name={stat.name}\n            stroke={stat.color}\n          />\n        ))}\n        <CartesianGrid stroke=\"#ccc\" />\n        <XAxis\n          dataKey=\"date\"\n          tickFormatter={(tick: string) => new Date(tick).toDateString()}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={<XAxisTick fill={isDark ? 'white' : 'black'} />}\n          angle={-45}\n          dy={10}\n          aria-label={t('stats.dateAxis')}\n        />\n        <YAxis\n          allowDecimals={false}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={{ fill: isDark ? 'white' : 'black' }}\n        />\n        <Legend\n          verticalAlign=\"top\"\n          height={36}\n          wrapperStyle={legendWrapperStyle}\n          className={localStyles.legend}\n          formatter={data => {\n            return isDisabled(data) ? `[ ] ${data}` : `[x] ${data}`;\n          }}\n          onClick={data => {\n            if (data.value) {\n              toggleStat(data.value as string);\n            }\n          }}\n        />\n      </LineChart>\n    </ResponsiveContainer>\n  );\n};\n\nexport const StatsChart = (props: {\n  data: Stat[];\n  loading?: boolean;\n  error?: string;\n}) => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const [chart, setChart] = useState<'line' | 'bar'>('line');\n  const classes = useStyles();\n\n  if (props.error) {\n    return (\n      <Typography variant=\"subtitle1\" className={classes.errorMessage}>\n        {props.error}\n      </Typography>\n    );\n  }\n\n  if (!props.data || props.data.length === 0) {\n    return <Typography variant=\"subtitle1\">{t('stats.noStats')}</Typography>;\n  }\n\n  const data = props.data\n    .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())\n    .map(d => ({ ...d, hidden: 0 }));\n\n  return (\n    <Box className={classes.chartContainer}>\n      {props.loading && (\n        <div className={classes.loadingOverlay}>\n          <CircularProgress />\n        </div>\n      )}\n      {chart === 'line' ? (\n        <StatsLineChart data={data} />\n      ) : (\n        <StatsBarChart data={data} />\n      )}\n      <ButtonGroup\n        aria-label={t('stats.chartType')}\n        style={{ float: 'right' }}\n        role=\"radiogroup\"\n      >\n        <MuiTooltip title={t('stats.lineChart')}>\n          <IconButton\n            aria-label={t('stats.lineChart')}\n            onClick={() => setChart('line')}\n            className={classes.chartTypeButton}\n            aria-checked={chart === 'line'}\n            role=\"radio\"\n          >\n            <ShowChartIcon />\n          </IconButton>\n        </MuiTooltip>\n        <MuiTooltip title={t('stats.barChart')}>\n          <IconButton\n            aria-label={t('stats.barChart')}\n            onClick={() => setChart('bar')}\n            className={classes.chartTypeButton}\n            aria-checked={chart === 'bar'}\n            role=\"radio\"\n          >\n            <BarChartIcon />\n          </IconButton>\n        </MuiTooltip>\n      </ButtonGroup>\n    </Box>\n  );\n};\n"],"names":["Tooltip","MuiTooltip"],"mappings":"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"}

package/dist/components/SuggestionsCard/SuggestionsCard.esm.js

@@ -16,16 +16,71 @@ import AssistantIcon from '@material-ui/icons/Assistant';
 import HelpOutlined from '@material-ui/icons/HelpOutlined';
 import Check from '@material-ui/icons/Check';
 import CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';
+import RefreshIcon from '@material-ui/icons/Refresh';
 import { useNavigate } from 'react-router-dom';
 import { questionRouteRef, articleRouteRef } from '../../routes.esm.js';
-import { Card, CardHeader, List, ListItem, ListItemIcon } from '@material-ui/core';
+import { makeStyles, Card, CardHeader, IconButton, Divider, CircularProgress, Typography, List, ListItem, ListItemIcon, ListItemText } from '@material-ui/core';
+import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js';
 
+const useStyles = makeStyles((theme) => ({
+  card: {
+    height: "100%"
+  },
+  header: {
+    paddingBottom: theme.spacing(1)
+  },
+  listItem: {
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover
+    },
+    transition: "background-color 0.2s ease",
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2)
+  },
+  listItemText: {
+    marginTop: theme.spacing(0.5),
+    paddingLeft: theme.spacing(2)
+  },
+  listItemIcon: {
+    minWidth: theme.spacing(5),
+    paddingLeft: theme.spacing(1)
+  },
+  timestamp: {
+    color: theme.palette.text.secondary
+  },
+  emptyState: {
+    padding: theme.spacing(3),
+    textAlign: "center",
+    color: theme.palette.text.secondary
+  },
+  loadingContainer: {
+    display: "flex",
+    justifyContent: "center",
+    padding: theme.spacing(3)
+  }
+}));
 const SuggestionListItem = (props) => {
   const navigate = useNavigate();
-  return /* @__PURE__ */ jsxs(ListItem, { button: true, onClick: () => navigate(props.href), children: [
-    props.icon && /* @__PURE__ */ jsx(ListItemIcon, { children: props.icon }),
-    props.children
-  ] });
+  const classes = useStyles();
+  return /* @__PURE__ */ jsxs(
+    ListItem,
+    {
+      button: true,
+      onClick: () => navigate(props.href),
+      className: classes.listItem,
+      children: [
+        props.icon && /* @__PURE__ */ jsx(ListItemIcon, { className: classes.listItemIcon, children: props.icon }),
+        /* @__PURE__ */ jsx(
+          ListItemText,
+          {
+            primary: props.children,
+            secondary: props.timestamp,
+            className: classes.listItemText
+          }
+        )
+      ]
+    }
+  );
 };
 const NoCorrectAnswerSuggestionItem = (props) => {
   const { suggestion } = props;
@@ -36,6 +91,7 @@ const NoCorrectAnswerSuggestionItem = (props) => {
     {
       href: questionRoute({ id: suggestion.question.id.toString(10) }),
       icon: /* @__PURE__ */ jsx(Check, {}),
+      timestamp: /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: suggestion.question.created }),
       children: t("suggestionsCard.noCorrectAnswer", {
         title: suggestion.question.title
       })
@@ -51,6 +107,7 @@ const NewQuestionSuggestionItem = (props) => {
     {
       href: questionRoute({ id: suggestion.question.id.toString(10) }),
       icon: /* @__PURE__ */ jsx(HelpOutlined, {}),
+      timestamp: /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: suggestion.question.created }),
       children: t("suggestionsCard.newQuestion", {
         title: suggestion.question.title
       })
@@ -66,6 +123,7 @@ const NewArticleSuggestionItem = (props) => {
     {
       href: articleRoute({ id: suggestion.article.id.toString(10) }),
       icon: /* @__PURE__ */ jsx(CollectionsBookmarkIcon, {}),
+      timestamp: /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: suggestion.article.created }),
       children: t("suggestionsCard.newArticle", {
         title: suggestion.article.title
       })
@@ -79,25 +137,44 @@ const suggestionTypeMap = {
 };
 const SuggestionsCard = () => {
   const { t } = useTranslationRef(qetaTranslationRef);
-  const { value: response } = useQetaApi((api) => api.getSuggestions(), []);
+  const classes = useStyles();
+  const {
+    value: response,
+    loading,
+    retry
+  } = useQetaApi((api) => api.getSuggestions(), []);
   const suggestions = response?.suggestions ?? [];
-  if (suggestions.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Card, { children: [
+  const handleRefresh = () => {
+    retry();
+  };
+  const renderContent = () => {
+    if (loading) {
+      return /* @__PURE__ */ jsx("div", { className: classes.loadingContainer, children: /* @__PURE__ */ jsx(CircularProgress, { size: 24 }) });
+    }
+    if (suggestions.length === 0) {
+      return /* @__PURE__ */ jsx("div", { className: classes.emptyState, children: /* @__PURE__ */ jsx(Typography, { variant: "body1", children: t("suggestionsCard.noSuggestions") }) });
+    }
+    return /* @__PURE__ */ jsx(List, { children: suggestions.map((suggestion, index) => {
+      const SuggestionComponent = suggestionTypeMap[suggestion.type];
+      return /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(SuggestionComponent, { suggestion }),
+        index < suggestions.length - 1 && /* @__PURE__ */ jsx(Divider, {})
+      ] }, suggestion.id);
+    }) });
+  };
+  return /* @__PURE__ */ jsxs(Card, { className: classes.card, children: [
     /* @__PURE__ */ jsx(
       CardHeader,
       {
-        style: { paddingBottom: "8px" },
+        className: classes.header,
         title: t("suggestionsCard.title"),
         avatar: /* @__PURE__ */ jsx(AssistantIcon, {}),
-        titleTypographyProps: { variant: "h5" }
+        titleTypographyProps: { variant: "h5" },
+        action: /* @__PURE__ */ jsx(IconButton, { onClick: handleRefresh, disabled: loading, children: /* @__PURE__ */ jsx(RefreshIcon, {}) })
       }
     ),
-    /* @__PURE__ */ jsx(List, { children: suggestions.map((suggestion) => {
-      const SuggestionComponent = suggestionTypeMap[suggestion.type];
-      return /* @__PURE__ */ jsx(SuggestionComponent, { suggestion }, suggestion.id);
-    }) })
+    /* @__PURE__ */ jsx(Divider, {}),
+    renderContent()
   ] });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"SuggestionsCard.esm.js","sources":["../../../src/components/SuggestionsCard/SuggestionsCard.tsx"],"sourcesContent":["import { useQetaApi } from '../../hooks';\nimport { ReactNode } from 'react';\nimport {\n  NewArticleSuggestion,\n  NewQuestionSuggestion,\n  NoCorrectAnswerSuggestion,\n  SuggestionType,\n} from '@drodil/backstage-plugin-qeta-common';\nimport AssistantIcon from '@material-ui/icons/Assistant';\nimport HelpOutlinedIcon from '@material-ui/icons/HelpOutlined';\nimport CheckIcon from '@material-ui/icons/Check';\nimport CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';\nimport { useNavigate } from 'react-router-dom';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { articleRouteRef, questionRouteRef } from '../../routes';\nimport {\n  Card,\n  CardHeader,\n  List,\n  ListItem,\n  ListItemIcon,\n} from '@material-ui/core';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nconst SuggestionListItem = (props: {\n  children: ReactNode;\n  href: string;\n  icon?: ReactNode;\n}) => {\n  const navigate = useNavigate();\n  return (\n    <ListItem button onClick={() => navigate(props.href)}>\n      {props.icon && <ListItemIcon>{props.icon}</ListItemIcon>}\n      {props.children}\n    </ListItem>\n  );\n};\n\nconst NoCorrectAnswerSuggestionItem = (props: {\n  suggestion: NoCorrectAnswerSuggestion;\n}) => {\n  const { suggestion } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const questionRoute = useRouteRef(questionRouteRef);\n  return (\n    <SuggestionListItem\n      href={questionRoute({ id: suggestion.question.id.toString(10) })}\n      icon={<CheckIcon />}\n    >\n      {t('suggestionsCard.noCorrectAnswer', {\n        title: suggestion.question.title,\n      })}\n    </SuggestionListItem>\n  );\n};\n\nconst NewQuestionSuggestionItem = (props: {\n  suggestion: NewQuestionSuggestion;\n}) => {\n  const { suggestion } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const questionRoute = useRouteRef(questionRouteRef);\n  return (\n    <SuggestionListItem\n      href={questionRoute({ id: suggestion.question.id.toString(10) })}\n      icon={<HelpOutlinedIcon />}\n    >\n      {t('suggestionsCard.newQuestion', {\n        title: suggestion.question.title,\n      })}\n    </SuggestionListItem>\n  );\n};\n\nconst NewArticleSuggestionItem = (props: {\n  suggestion: NewArticleSuggestion;\n}) => {\n  const { suggestion } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const articleRoute = useRouteRef(articleRouteRef);\n  return (\n    <SuggestionListItem\n      href={articleRoute({ id: suggestion.article.id.toString(10) })}\n      icon={<CollectionsBookmarkIcon />}\n    >\n      {t('suggestionsCard.newArticle', {\n        title: suggestion.article.title,\n      })}\n    </SuggestionListItem>\n  );\n};\n\nconst suggestionTypeMap: Record<SuggestionType, any> = {\n  noCorrectAnswer: NoCorrectAnswerSuggestionItem,\n  newQuestion: NewQuestionSuggestionItem,\n  newArticle: NewArticleSuggestionItem,\n};\n\nexport const SuggestionsCard = () => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { value: response } = useQetaApi(api => api.getSuggestions(), []);\n\n  const suggestions = response?.suggestions ?? [];\n  if (suggestions.length === 0) {\n    return null;\n  }\n\n  return (\n    <Card>\n      <CardHeader\n        style={{ paddingBottom: '8px' }}\n        title={t('suggestionsCard.title')}\n        avatar={<AssistantIcon />}\n        titleTypographyProps={{ variant: 'h5' }}\n      />\n      <List>\n        {suggestions.map(suggestion => {\n          const SuggestionComponent = suggestionTypeMap[suggestion.type];\n          return (\n            <SuggestionComponent key={suggestion.id} suggestion={suggestion} />\n          );\n        })}\n      </List>\n    </Card>\n  );\n};\n"],"names":["CheckIcon","HelpOutlinedIcon"],"mappings":"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"}
+{"version":3,"file":"SuggestionsCard.esm.js","sources":["../../../src/components/SuggestionsCard/SuggestionsCard.tsx"],"sourcesContent":["import { useQetaApi } from '../../hooks';\nimport { ReactNode } from 'react';\nimport {\n  NewArticleSuggestion,\n  NewQuestionSuggestion,\n  NoCorrectAnswerSuggestion,\n  SuggestionsResponse,\n  SuggestionType,\n} from '@drodil/backstage-plugin-qeta-common';\nimport AssistantIcon from '@material-ui/icons/Assistant';\nimport HelpOutlinedIcon from '@material-ui/icons/HelpOutlined';\nimport CheckIcon from '@material-ui/icons/Check';\nimport CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport { useNavigate } from 'react-router-dom';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { articleRouteRef, questionRouteRef } from '../../routes';\nimport {\n  Card,\n  CardHeader,\n  CircularProgress,\n  Divider,\n  IconButton,\n  List,\n  ListItem,\n  ListItemIcon,\n  ListItemText,\n  makeStyles,\n  Typography,\n} from '@material-ui/core';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\n\nconst useStyles = makeStyles(theme => ({\n  card: {\n    height: '100%',\n  },\n  header: {\n    paddingBottom: theme.spacing(1),\n  },\n  listItem: {\n    '&:hover': {\n      backgroundColor: theme.palette.action.hover,\n    },\n    transition: 'background-color 0.2s ease',\n    paddingLeft: theme.spacing(2),\n    paddingRight: theme.spacing(2),\n  },\n  listItemText: {\n    marginTop: theme.spacing(0.5),\n    paddingLeft: theme.spacing(2),\n  },\n  listItemIcon: {\n    minWidth: theme.spacing(5),\n    paddingLeft: theme.spacing(1),\n  },\n  timestamp: {\n    color: theme.palette.text.secondary,\n  },\n  emptyState: {\n    padding: theme.spacing(3),\n    textAlign: 'center',\n    color: theme.palette.text.secondary,\n  },\n  loadingContainer: {\n    display: 'flex',\n    justifyContent: 'center',\n    padding: theme.spacing(3),\n  },\n}));\n\nconst SuggestionListItem = (props: {\n  children: ReactNode;\n  href: string;\n  icon?: ReactNode;\n  timestamp?: ReactNode;\n}) => {\n  const navigate = useNavigate();\n  const classes = useStyles();\n  return (\n    <ListItem\n      button\n      onClick={() => navigate(props.href)}\n      className={classes.listItem}\n    >\n      {props.icon && (\n        <ListItemIcon className={classes.listItemIcon}>\n          {props.icon}\n        </ListItemIcon>\n      )}\n      <ListItemText\n        primary={props.children}\n        secondary={props.timestamp}\n        className={classes.listItemText}\n      />\n    </ListItem>\n  );\n};\n\nconst NoCorrectAnswerSuggestionItem = (props: {\n  suggestion: NoCorrectAnswerSuggestion;\n}) => {\n  const { suggestion } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const questionRoute = useRouteRef(questionRouteRef);\n  return (\n    <SuggestionListItem\n      href={questionRoute({ id: suggestion.question.id.toString(10) })}\n      icon={<CheckIcon />}\n      timestamp={\n        <RelativeTimeWithTooltip value={suggestion.question.created} />\n      }\n    >\n      {t('suggestionsCard.noCorrectAnswer', {\n        title: suggestion.question.title,\n      })}\n    </SuggestionListItem>\n  );\n};\n\nconst NewQuestionSuggestionItem = (props: {\n  suggestion: NewQuestionSuggestion;\n}) => {\n  const { suggestion } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const questionRoute = useRouteRef(questionRouteRef);\n  return (\n    <SuggestionListItem\n      href={questionRoute({ id: suggestion.question.id.toString(10) })}\n      icon={<HelpOutlinedIcon />}\n      timestamp={\n        <RelativeTimeWithTooltip value={suggestion.question.created} />\n      }\n    >\n      {t('suggestionsCard.newQuestion', {\n        title: suggestion.question.title,\n      })}\n    </SuggestionListItem>\n  );\n};\n\nconst NewArticleSuggestionItem = (props: {\n  suggestion: NewArticleSuggestion;\n}) => {\n  const { suggestion } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const articleRoute = useRouteRef(articleRouteRef);\n  return (\n    <SuggestionListItem\n      href={articleRoute({ id: suggestion.article.id.toString(10) })}\n      icon={<CollectionsBookmarkIcon />}\n      timestamp={<RelativeTimeWithTooltip value={suggestion.article.created} />}\n    >\n      {t('suggestionsCard.newArticle', {\n        title: suggestion.article.title,\n      })}\n    </SuggestionListItem>\n  );\n};\n\nconst suggestionTypeMap: Record<SuggestionType, any> = {\n  noCorrectAnswer: NoCorrectAnswerSuggestionItem,\n  newQuestion: NewQuestionSuggestionItem,\n  newArticle: NewArticleSuggestionItem,\n};\n\nexport const SuggestionsCard = () => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const classes = useStyles();\n  const {\n    value: response,\n    loading,\n    retry,\n  } = useQetaApi<SuggestionsResponse>(api => api.getSuggestions(), []);\n\n  const suggestions = response?.suggestions ?? [];\n\n  const handleRefresh = () => {\n    retry();\n  };\n\n  const renderContent = () => {\n    if (loading) {\n      return (\n        <div className={classes.loadingContainer}>\n          <CircularProgress size={24} />\n        </div>\n      );\n    }\n\n    if (suggestions.length === 0) {\n      return (\n        <div className={classes.emptyState}>\n          <Typography variant=\"body1\">\n            {t('suggestionsCard.noSuggestions')}\n          </Typography>\n        </div>\n      );\n    }\n\n    return (\n      <List>\n        {suggestions.map((suggestion, index) => {\n          const SuggestionComponent = suggestionTypeMap[suggestion.type];\n          return (\n            <div key={suggestion.id}>\n              <SuggestionComponent suggestion={suggestion} />\n              {index < suggestions.length - 1 && <Divider />}\n            </div>\n          );\n        })}\n      </List>\n    );\n  };\n\n  return (\n    <Card className={classes.card}>\n      <CardHeader\n        className={classes.header}\n        title={t('suggestionsCard.title')}\n        avatar={<AssistantIcon />}\n        titleTypographyProps={{ variant: 'h5' }}\n        action={\n          <IconButton onClick={handleRefresh} disabled={loading}>\n            <RefreshIcon />\n          </IconButton>\n        }\n      />\n      <Divider />\n      {renderContent()}\n    </Card>\n  );\n};\n"],"names":["CheckIcon","HelpOutlinedIcon"],"mappings":"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"}

package/dist/components/SummaryStatsGrid/SummaryStatsGrid.esm.js

@@ -1,91 +1,144 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import numeral from 'numeral';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { qetaTranslationRef } from '../../translation.esm.js';
 import { isGlobalStat, isUserStat } from '../StatsChart/util.esm.js';
-import { Typography, Grid, Card, CardContent } from '@material-ui/core';
+import { makeStyles, Typography, Grid, Card, CardContent } from '@material-ui/core';
+import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
+import CommentIcon from '@material-ui/icons/Comment';
+import DescriptionIcon from '@material-ui/icons/Description';
+import Visibility from '@material-ui/icons/Visibility';
+import ThumbUpIcon from '@material-ui/icons/ThumbUp';
+import PeopleIcon from '@material-ui/icons/People';
+import TagIcon from '@material-ui/icons/LocalOffer';
+import PersonIcon from '@material-ui/icons/Person';
 
+const useStyles = makeStyles((theme) => ({
+  root: {
+    padding: theme.spacing(2)
+  },
+  card: {
+    height: "100%",
+    transition: "transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out",
+    "&:hover": {
+      transform: "translateY(-4px)",
+      boxShadow: theme.shadows[4]
+    }
+  },
+  cardContent: {
+    display: "flex",
+    alignItems: "center",
+    padding: theme.spacing(2)
+  },
+  value: {
+    fontWeight: "bold",
+    marginRight: theme.spacing(1)
+  },
+  title: {
+    color: theme.palette.text.secondary
+  },
+  icon: {
+    marginRight: theme.spacing(2),
+    color: theme.palette.primary.main
+  },
+  gridItem: {
+    marginBottom: theme.spacing(1)
+  }
+}));
 const SummaryCard = (props) => {
-  const { title, value } = props;
+  const { title, value, icon } = props;
+  const classes = useStyles();
   if (value === void 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Typography, { variant: "h5", children: [
-    value >= 1e3 ? numeral(value).format("0.0 a") : value,
-    /* @__PURE__ */ jsx(Typography, { variant: "caption", style: { marginLeft: "1em" }, children: title })
-  ] }) }) });
+  return /* @__PURE__ */ jsx(Card, { className: classes.card, children: /* @__PURE__ */ jsxs(CardContent, { className: classes.cardContent, children: [
+    /* @__PURE__ */ jsx("div", { className: classes.icon, children: icon }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h5", className: classes.value, children: value }),
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: classes.title, children: title })
+    ] })
+  ] }) });
 };
 const SummaryStatsGrid = (props) => {
   const { stats } = props;
   const { t } = useTranslationRef(qetaTranslationRef);
+  const classes = useStyles();
   if (!stats.summary) {
     return /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: t("stats.noStats") });
   }
-  return /* @__PURE__ */ jsxs(Grid, { container: true, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: classes.root, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, className: classes.gridItem, children: /* @__PURE__ */ jsx(
       SummaryCard,
       {
         title: t("stats.questions"),
-        value: stats.summary.totalQuestions
+        value: stats.summary.totalQuestions,
+        icon: /* @__PURE__ */ jsx(QuestionAnswerIcon, {})
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, className: classes.gridItem, children: /* @__PURE__ */ jsx(
       SummaryCard,
       {
         title: t("stats.answers"),
-        value: stats.summary.totalAnswers
+        value: stats.summary.totalAnswers,
+        icon: /* @__PURE__ */ jsx(QuestionAnswerIcon, {})
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, className: classes.gridItem, children: /* @__PURE__ */ jsx(
       SummaryCard,
       {
         title: t("stats.articles"),
-        value: stats.summary.totalArticles
+        value: stats.summary.totalArticles,
+        icon: /* @__PURE__ */ jsx(DescriptionIcon, {})
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, className: classes.gridItem, children: /* @__PURE__ */ jsx(
       SummaryCard,
       {
         title: t("stats.comments"),
-        value: stats.summary.totalComments
+        value: stats.summary.totalComments,
+        icon: /* @__PURE__ */ jsx(CommentIcon, {})
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, className: classes.gridItem, children: /* @__PURE__ */ jsx(
       SummaryCard,
       {
         title: t("stats.views"),
-        value: stats.summary.totalViews
+        value: stats.summary.totalViews,
+        icon: /* @__PURE__ */ jsx(Visibility, {})
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, className: classes.gridItem, children: /* @__PURE__ */ jsx(
       SummaryCard,
       {
         title: t("stats.votes"),
-        value: stats.summary.totalVotes
+        value: stats.summary.totalVotes,
+        icon: /* @__PURE__ */ jsx(ThumbUpIcon, {})
       }
     ) }),
-    isGlobalStat(stats.summary) && /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    isGlobalStat(stats.summary) && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, className: classes.gridItem, children: /* @__PURE__ */ jsx(
       SummaryCard,
       {
         title: t("stats.users"),
-        value: stats.summary.totalUsers
+        value: stats.summary.totalUsers,
+        icon: /* @__PURE__ */ jsx(PeopleIcon, {})
       }
     ) }),
-    isGlobalStat(stats.summary) && /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    isGlobalStat(stats.summary) && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, className: classes.gridItem, children: /* @__PURE__ */ jsx(
       SummaryCard,
       {
         title: t("stats.tags"),
-        value: stats.summary.totalTags
+        value: stats.summary.totalTags,
+        icon: /* @__PURE__ */ jsx(TagIcon, {})
       }
     ) }),
-    isUserStat(stats.summary) && /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    isUserStat(stats.summary) && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, className: classes.gridItem, children: /* @__PURE__ */ jsx(
       SummaryCard,
       {
         title: t("stats.followers"),
-        value: stats.summary.totalFollowers
+        value: stats.summary.totalFollowers,
+        icon: /* @__PURE__ */ jsx(PersonIcon, {})
       }
     ) })
-  ] });
+  ] }) });
 };
 
 export { SummaryStatsGrid };

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

@@ -1 +1 @@
-{"version":3,"file":"SummaryStatsGrid.esm.js","sources":["../../../src/components/SummaryStatsGrid/SummaryStatsGrid.tsx"],"sourcesContent":["import {\n  GlobalStat,\n  StatisticsResponse,\n  UserStat,\n} from '@drodil/backstage-plugin-qeta-common';\nimport numeral from 'numeral';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { isGlobalStat, isUserStat } from '../StatsChart/util';\nimport { Card, CardContent, Grid, Typography } from '@material-ui/core';\n\nconst SummaryCard = (props: { title: string; value?: number }) => {\n  const { title, value } = props;\n  if (value === undefined) {\n    return null;\n  }\n  return (\n    <Card>\n      <CardContent>\n        <Typography variant=\"h5\">\n          {value >= 1000 ? numeral(value).format('0.0 a') : value}\n          <Typography variant=\"caption\" style={{ marginLeft: '1em' }}>\n            {title}\n          </Typography>\n        </Typography>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport const SummaryStatsGrid = (props: {\n  stats: StatisticsResponse<UserStat | GlobalStat>;\n}) => {\n  const { stats } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  if (!stats.summary) {\n    return <Typography variant=\"subtitle1\">{t('stats.noStats')}</Typography>;\n  }\n\n  return (\n    <Grid container>\n      <Grid item xs={4}>\n        <SummaryCard\n          title={t('stats.questions')}\n          value={stats.summary.totalQuestions}\n        />\n      </Grid>\n      <Grid item xs={4}>\n        <SummaryCard\n          title={t('stats.answers')}\n          value={stats.summary.totalAnswers}\n        />\n      </Grid>\n      <Grid item xs={4}>\n        <SummaryCard\n          title={t('stats.articles')}\n          value={stats.summary.totalArticles}\n        />\n      </Grid>\n      <Grid item xs={4}>\n        <SummaryCard\n          title={t('stats.comments')}\n          value={stats.summary.totalComments}\n        />\n      </Grid>\n      <Grid item xs={4}>\n        <SummaryCard\n          title={t('stats.views')}\n          value={stats.summary.totalViews}\n        />\n      </Grid>\n      <Grid item xs={4}>\n        <SummaryCard\n          title={t('stats.votes')}\n          value={stats.summary.totalVotes}\n        />\n      </Grid>\n      {isGlobalStat(stats.summary) && (\n        <Grid item xs={4}>\n          <SummaryCard\n            title={t('stats.users')}\n            value={stats.summary!.totalUsers}\n          />\n        </Grid>\n      )}\n      {isGlobalStat(stats.summary) && (\n        <Grid item xs={4}>\n          <SummaryCard\n            title={t('stats.tags')}\n            value={stats.summary!.totalTags}\n          />\n        </Grid>\n      )}\n      {isUserStat(stats.summary) && (\n        <Grid item xs={4}>\n          <SummaryCard\n            title={t('stats.followers')}\n            value={stats.summary!.totalFollowers}\n          />\n        </Grid>\n      )}\n    </Grid>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SummaryStatsGrid.esm.js","sources":["../../../src/components/SummaryStatsGrid/SummaryStatsGrid.tsx"],"sourcesContent":["import {\n  GlobalStat,\n  StatisticsResponse,\n  UserStat,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { isGlobalStat, isUserStat } from '../StatsChart/util';\nimport {\n  Card,\n  CardContent,\n  Grid,\n  Typography,\n  makeStyles,\n} from '@material-ui/core';\nimport QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';\nimport CommentIcon from '@material-ui/icons/Comment';\nimport DescriptionIcon from '@material-ui/icons/Description';\nimport VisibilityIcon from '@material-ui/icons/Visibility';\nimport ThumbUpIcon from '@material-ui/icons/ThumbUp';\nimport PeopleIcon from '@material-ui/icons/People';\nimport TagIcon from '@material-ui/icons/LocalOffer';\nimport PersonIcon from '@material-ui/icons/Person';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    padding: theme.spacing(2),\n  },\n  card: {\n    height: '100%',\n    transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',\n    '&:hover': {\n      transform: 'translateY(-4px)',\n      boxShadow: theme.shadows[4],\n    },\n  },\n  cardContent: {\n    display: 'flex',\n    alignItems: 'center',\n    padding: theme.spacing(2),\n  },\n  value: {\n    fontWeight: 'bold',\n    marginRight: theme.spacing(1),\n  },\n  title: {\n    color: theme.palette.text.secondary,\n  },\n  icon: {\n    marginRight: theme.spacing(2),\n    color: theme.palette.primary.main,\n  },\n  gridItem: {\n    marginBottom: theme.spacing(1),\n  },\n}));\n\nconst SummaryCard = (props: {\n  title: string;\n  value?: number;\n  icon: React.ReactNode;\n}) => {\n  const { title, value, icon } = props;\n  const classes = useStyles();\n\n  if (value === undefined) {\n    return null;\n  }\n\n  return (\n    <Card className={classes.card}>\n      <CardContent className={classes.cardContent}>\n        <div className={classes.icon}>{icon}</div>\n        <div>\n          <Typography variant=\"h5\" className={classes.value}>\n            {value}\n          </Typography>\n          <Typography variant=\"subtitle2\" className={classes.title}>\n            {title}\n          </Typography>\n        </div>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport const SummaryStatsGrid = (props: {\n  stats: StatisticsResponse<UserStat | GlobalStat>;\n}) => {\n  const { stats } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const classes = useStyles();\n\n  if (!stats.summary) {\n    return <Typography variant=\"subtitle1\">{t('stats.noStats')}</Typography>;\n  }\n\n  return (\n    <div className={classes.root}>\n      <Grid container spacing={2}>\n        <Grid item xs={12} sm={6} md={4} className={classes.gridItem}>\n          <SummaryCard\n            title={t('stats.questions')}\n            value={stats.summary.totalQuestions}\n            icon={<QuestionAnswerIcon />}\n          />\n        </Grid>\n        <Grid item xs={12} sm={6} md={4} className={classes.gridItem}>\n          <SummaryCard\n            title={t('stats.answers')}\n            value={stats.summary.totalAnswers}\n            icon={<QuestionAnswerIcon />}\n          />\n        </Grid>\n        <Grid item xs={12} sm={6} md={4} className={classes.gridItem}>\n          <SummaryCard\n            title={t('stats.articles')}\n            value={stats.summary.totalArticles}\n            icon={<DescriptionIcon />}\n          />\n        </Grid>\n        <Grid item xs={12} sm={6} md={4} className={classes.gridItem}>\n          <SummaryCard\n            title={t('stats.comments')}\n            value={stats.summary.totalComments}\n            icon={<CommentIcon />}\n          />\n        </Grid>\n        <Grid item xs={12} sm={6} md={4} className={classes.gridItem}>\n          <SummaryCard\n            title={t('stats.views')}\n            value={stats.summary.totalViews}\n            icon={<VisibilityIcon />}\n          />\n        </Grid>\n        <Grid item xs={12} sm={6} md={4} className={classes.gridItem}>\n          <SummaryCard\n            title={t('stats.votes')}\n            value={stats.summary.totalVotes}\n            icon={<ThumbUpIcon />}\n          />\n        </Grid>\n        {isGlobalStat(stats.summary) && (\n          <Grid item xs={12} sm={6} md={4} className={classes.gridItem}>\n            <SummaryCard\n              title={t('stats.users')}\n              value={stats.summary!.totalUsers}\n              icon={<PeopleIcon />}\n            />\n          </Grid>\n        )}\n        {isGlobalStat(stats.summary) && (\n          <Grid item xs={12} sm={6} md={4} className={classes.gridItem}>\n            <SummaryCard\n              title={t('stats.tags')}\n              value={stats.summary!.totalTags}\n              icon={<TagIcon />}\n            />\n          </Grid>\n        )}\n        {isUserStat(stats.summary) && (\n          <Grid item xs={12} sm={6} md={4} className={classes.gridItem}>\n            <SummaryCard\n              title={t('stats.followers')}\n              value={stats.summary!.totalFollowers}\n              icon={<PersonIcon />}\n            />\n          </Grid>\n        )}\n      </Grid>\n    </div>\n  );\n};\n"],"names":["VisibilityIcon"],"mappings":"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"}

package/dist/components/TagsAndEntities/EntityChip.esm.js

@@ -18,6 +18,7 @@ import { Tooltip, Chip, Grid, Box, Typography, Button } from '@material-ui/core'
 import VisibilityOff from '@material-ui/icons/VisibilityOff';
 import Visibility from '@material-ui/icons/Visibility';
 import { useNavigate } from 'react-router-dom';
+import { useTooltipStyles } from '../../hooks/useTooltipStyles.esm.js';
 
 const cache = /* @__PURE__ */ new Map();
 const EntityTooltip = (props) => {
@@ -92,6 +93,7 @@ const EntityChip = (props) => {
   const { primaryTitle, Icon } = useEntityPresentation(entity);
   const navigate = useNavigate();
   const entityRef = typeof entity === "string" ? entity : stringifyEntityRef(entity);
+  const classes = useTooltipStyles();
   return /* @__PURE__ */ jsx(
     Tooltip,
     {
@@ -99,11 +101,16 @@ const EntityChip = (props) => {
       arrow: true,
       enterDelay: 400,
       interactive: true,
+      classes: {
+        tooltip: classes.tooltip,
+        arrow: classes.tooltipArrow
+      },
       children: /* @__PURE__ */ jsx(
         Chip,
         {
           label: primaryTitle,
           size: "small",
+          style: props.style,
           icon: Icon ? /* @__PURE__ */ jsx(Icon, { fontSize: "small" }) : void 0,
           variant: "outlined",
           className: "qetaEntityChip",

package/dist/components/TagsAndEntities/EntityChip.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityChip.esm.js","sources":["../../../src/components/TagsAndEntities/EntityChip.tsx"],"sourcesContent":["import { Entity, stringifyEntityRef } from '@backstage/catalog-model';\nimport { useEffect, useState } from 'react';\nimport { useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { entityRouteRef } from '../../routes';\nimport { qetaApiRef } from '../../api';\nimport { EntityResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { useEntityFollow } from '../../hooks';\nimport {\n  Box,\n  Button,\n  Chip,\n  Grid,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport Visibility from '@material-ui/icons/Visibility';\nimport { useNavigate } from 'react-router-dom';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nconst cache: Map<string, EntityResponse> = new Map();\n\nconst EntityTooltip = (props: { entity: Entity | string }) => {\n  const { entity } = props;\n  const entityRef =\n    typeof entity === 'string' ? entity : stringifyEntityRef(entity);\n  const qetaApi = useApi(qetaApiRef);\n  const { primaryTitle, secondaryTitle, Icon } = useEntityPresentation(entity);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const entitiesFollow = useEntityFollow();\n  const [resp, setResp] = useState<undefined | EntityResponse>();\n\n  useEffect(() => {\n    if (cache.has(entityRef)) {\n      setResp(cache.get(entityRef));\n      return;\n    }\n\n    qetaApi.getEntity(entityRef).then(res => {\n      if (res) {\n        cache.set(entityRef, res);\n        setResp(res);\n      }\n    });\n  }, [qetaApi, entityRef]);\n\n  if (!resp) {\n    return null;\n  }\n\n  return (\n    <Grid container style={{ padding: '0.5em' }} spacing={1}>\n      <Grid item xs={12}>\n        <Box style={{ display: 'flex', alignItems: 'center' }}>\n          {Icon ? <Icon fontSize=\"small\" /> : null}\n          <Typography\n            variant=\"subtitle1\"\n            style={{\n              textOverflow: 'ellipsis',\n              overflow: 'hidden',\n              whiteSpace: 'nowrap',\n            }}\n          >\n            {primaryTitle}\n          </Typography>\n        </Box>\n        <Typography variant=\"subtitle2\">{secondaryTitle}</Typography>\n      </Grid>\n      <Grid item xs={12}>\n        <Typography variant=\"subtitle2\">\n          {t('common.posts', { count: resp.postsCount, itemType: 'post' })}\n          {' · '}\n          {t('common.followers', { count: resp.followerCount })}\n        </Typography>\n      </Grid>\n      {!entitiesFollow.loading && (\n        <Grid item xs={12}>\n          <Button\n            size=\"small\"\n            variant=\"outlined\"\n            color={\n              entitiesFollow.isFollowingEntity(entityRef)\n                ? 'secondary'\n                : 'primary'\n            }\n            onClick={() => {\n              if (entitiesFollow.isFollowingEntity(entityRef)) {\n                entitiesFollow.unfollowEntity(entityRef);\n              } else {\n                entitiesFollow.followEntity(entityRef);\n              }\n            }}\n            startIcon={\n              entitiesFollow.isFollowingEntity(entityRef) ? (\n                <VisibilityOff />\n              ) : (\n                <Visibility />\n              )\n            }\n          >\n            {entitiesFollow.isFollowingEntity(entityRef)\n              ? t('entityButton.unfollow')\n              : t('entityButton.follow')}\n          </Button>\n        </Grid>\n      )}\n    </Grid>\n  );\n};\n\nexport const EntityChip = (props: {\n  entity: Entity | string;\n  useHref?: boolean;\n}) => {\n  const { entity } = props;\n  const entityRoute = useRouteRef(entityRouteRef);\n  const { primaryTitle, Icon } = useEntityPresentation(entity);\n  const navigate = useNavigate();\n  const entityRef =\n    typeof entity === 'string' ? entity : stringifyEntityRef(entity);\n  return (\n    <Tooltip\n      title={<EntityTooltip entity={entity} />}\n      arrow\n      enterDelay={400}\n      interactive\n    >\n      <Chip\n        label={primaryTitle}\n        size=\"small\"\n        icon={Icon ? <Icon fontSize=\"small\" /> : undefined}\n        variant=\"outlined\"\n        className=\"qetaEntityChip\"\n        component=\"a\"\n        href={props.useHref ? entityRoute({ entityRef }) : undefined}\n        target={props.useHref ? '_blank' : undefined}\n        onClick={\n          !props.useHref\n            ? () => {\n                navigate(entityRoute({ entityRef }));\n              }\n            : undefined\n        }\n        clickable\n      />\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"EntityChip.esm.js","sources":["../../../src/components/TagsAndEntities/EntityChip.tsx"],"sourcesContent":["import { Entity, stringifyEntityRef } from '@backstage/catalog-model';\nimport { CSSProperties, useEffect, useState } from 'react';\nimport { useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { entityRouteRef } from '../../routes';\nimport { qetaApiRef } from '../../api';\nimport { EntityResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { useEntityFollow } from '../../hooks';\nimport {\n  Box,\n  Button,\n  Chip,\n  Grid,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport Visibility from '@material-ui/icons/Visibility';\nimport { useNavigate } from 'react-router-dom';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { useTooltipStyles } from '../../hooks/useTooltipStyles';\n\nconst cache: Map<string, EntityResponse> = new Map();\n\nconst EntityTooltip = (props: { entity: Entity | string }) => {\n  const { entity } = props;\n  const entityRef =\n    typeof entity === 'string' ? entity : stringifyEntityRef(entity);\n  const qetaApi = useApi(qetaApiRef);\n  const { primaryTitle, secondaryTitle, Icon } = useEntityPresentation(entity);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const entitiesFollow = useEntityFollow();\n  const [resp, setResp] = useState<undefined | EntityResponse>();\n\n  useEffect(() => {\n    if (cache.has(entityRef)) {\n      setResp(cache.get(entityRef));\n      return;\n    }\n\n    qetaApi.getEntity(entityRef).then(res => {\n      if (res) {\n        cache.set(entityRef, res);\n        setResp(res);\n      }\n    });\n  }, [qetaApi, entityRef]);\n\n  if (!resp) {\n    return null;\n  }\n\n  return (\n    <Grid container style={{ padding: '0.5em' }} spacing={1}>\n      <Grid item xs={12}>\n        <Box style={{ display: 'flex', alignItems: 'center' }}>\n          {Icon ? <Icon fontSize=\"small\" /> : null}\n          <Typography\n            variant=\"subtitle1\"\n            style={{\n              textOverflow: 'ellipsis',\n              overflow: 'hidden',\n              whiteSpace: 'nowrap',\n            }}\n          >\n            {primaryTitle}\n          </Typography>\n        </Box>\n        <Typography variant=\"subtitle2\">{secondaryTitle}</Typography>\n      </Grid>\n      <Grid item xs={12}>\n        <Typography variant=\"subtitle2\">\n          {t('common.posts', { count: resp.postsCount, itemType: 'post' })}\n          {' · '}\n          {t('common.followers', { count: resp.followerCount })}\n        </Typography>\n      </Grid>\n      {!entitiesFollow.loading && (\n        <Grid item xs={12}>\n          <Button\n            size=\"small\"\n            variant=\"outlined\"\n            color={\n              entitiesFollow.isFollowingEntity(entityRef)\n                ? 'secondary'\n                : 'primary'\n            }\n            onClick={() => {\n              if (entitiesFollow.isFollowingEntity(entityRef)) {\n                entitiesFollow.unfollowEntity(entityRef);\n              } else {\n                entitiesFollow.followEntity(entityRef);\n              }\n            }}\n            startIcon={\n              entitiesFollow.isFollowingEntity(entityRef) ? (\n                <VisibilityOff />\n              ) : (\n                <Visibility />\n              )\n            }\n          >\n            {entitiesFollow.isFollowingEntity(entityRef)\n              ? t('entityButton.unfollow')\n              : t('entityButton.follow')}\n          </Button>\n        </Grid>\n      )}\n    </Grid>\n  );\n};\n\nexport const EntityChip = (props: {\n  entity: Entity | string;\n  style?: CSSProperties;\n  useHref?: boolean;\n}) => {\n  const { entity } = props;\n  const entityRoute = useRouteRef(entityRouteRef);\n  const { primaryTitle, Icon } = useEntityPresentation(entity);\n  const navigate = useNavigate();\n  const entityRef =\n    typeof entity === 'string' ? entity : stringifyEntityRef(entity);\n  const classes = useTooltipStyles();\n  return (\n    <Tooltip\n      title={<EntityTooltip entity={entity} />}\n      arrow\n      enterDelay={400}\n      interactive\n      classes={{\n        tooltip: classes.tooltip,\n        arrow: classes.tooltipArrow,\n      }}\n    >\n      <Chip\n        label={primaryTitle}\n        size=\"small\"\n        style={props.style}\n        icon={Icon ? <Icon fontSize=\"small\" /> : undefined}\n        variant=\"outlined\"\n        className=\"qetaEntityChip\"\n        component=\"a\"\n        href={props.useHref ? entityRoute({ entityRef }) : undefined}\n        target={props.useHref ? '_blank' : undefined}\n        onClick={\n          !props.useHref\n            ? () => {\n                navigate(entityRoute({ entityRef }));\n              }\n            : undefined\n        }\n        clickable\n      />\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":"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"}