enhance(apps/analytics): add overview of element feedbacks on activities and instances

apps/frontend-manage/src/components/analytics/performance/PerformanceActivityTypeFilter.tsx → apps/frontend-manage/src/components/analytics/ActivityTypeFilter.tsx

@@ -3,12 +3,12 @@ import { SelectField } from '@uzh-bf/design-system'
 import { useTranslations } from 'next-intl'
 import { Dispatch, SetStateAction } from 'react'
 
-function PerformanceActivityTypeFilter({
+function ActivityTypeFilter({
   activityType,
   setActivityType,
 }: {
   activityType: ActivityType | 'all'
-  setActivityType: Dispatch<SetStateAction<'all' | ActivityType>>
+  setActivityType: Dispatch<SetStateAction<ActivityType | 'all'>>
 }) {
   const t = useTranslations()
 
@@ -33,4 +33,4 @@ function PerformanceActivityTypeFilter({
   )
 }
 
-export default PerformanceActivityTypeFilter
+export default ActivityTypeFilter

apps/frontend-manage/src/components/analytics/AnalyticsErrorView.tsx

@@ -1,7 +1,7 @@
 import { H1, UserNotification } from '@uzh-bf/design-system'
 import { useTranslations } from 'next-intl'
 import React from 'react'
-import Layout from '~/components/Layout'
+import Layout from '../Layout'
 
 function AnalyticsErrorView({
   title,

apps/frontend-manage/src/components/analytics/AnalyticsLoadingView.tsx

@@ -1,6 +1,6 @@
 import Loader from '@klicker-uzh/shared-components/src/Loader'
 import { useTranslations } from 'next-intl'
-import Layout from '~/components/Layout'
+import Layout from '../Layout'
 
 function AnalyticsLoadingView({
   title,

apps/frontend-manage/src/components/analytics/performance/PerformanceSearchField.tsx → apps/frontend-manage/src/components/analytics/AnalyticsSearchField.tsx

@@ -1,17 +1,17 @@
 import { TextField } from '@uzh-bf/design-system'
 import { useTranslations } from 'next-intl'
 
-interface PerformanceSearchFieldProps {
+interface AnalyticsSearchFieldProps {
   type: 'activity' | 'instance'
   value: string
   onChange: (value: string) => void
 }
 
-function PerformanceSearchField({
+function AnalyticsSearchField({
   type,
   value,
   onChange,
-}: PerformanceSearchFieldProps) {
+}: AnalyticsSearchFieldProps) {
   const t = useTranslations()
 
   return (
@@ -31,4 +31,4 @@ function PerformanceSearchField({
   )
 }
 
-export default PerformanceSearchField
+export default AnalyticsSearchField

apps/frontend-manage/src/components/analytics/performance/PerformanceElementTypeFilter.tsx → apps/frontend-manage/src/components/analytics/ElementTypeFilter.tsx

@@ -3,7 +3,7 @@ import { SelectField } from '@uzh-bf/design-system'
 import { useTranslations } from 'next-intl'
 import { Dispatch, SetStateAction } from 'react'
 
-function PerformanceElementTypeFilter({
+function ElementTypeFilter({
   elementType,
   setElementType,
 }: {
@@ -29,4 +29,4 @@ function PerformanceElementTypeFilter({
   )
 }
 
-export default PerformanceElementTypeFilter
+export default ElementTypeFilter

apps/frontend-manage/src/components/analytics/StackedBarChartLabel.tsx

@@ -0,0 +1,29 @@
+function StackedBarChartLabel({
+  value,
+  x,
+  width,
+  y,
+  height,
+}: {
+  value: number
+  x: number
+  y: number
+  width: number
+  height: number
+}) {
+  return (
+    <text
+      x={x + width / 2}
+      y={y + height / 2 + 1}
+      fill="white"
+      fontSize={14}
+      textAnchor="middle"
+      dominantBaseline="middle"
+      className="font-bold"
+    >
+      {value} %
+    </text>
+  )
+}
+
+export default StackedBarChartLabel

apps/frontend-manage/src/components/analytics/performance/PerformanceRates.tsx

@@ -12,12 +12,12 @@ import { Button, H2, UserNotification } from '@uzh-bf/design-system'
 import { useTranslations } from 'next-intl'
 import { useState } from 'react'
 import { Legend } from 'recharts'
-import ActivitiesElementsSwitch from './ActivitiesElementsSwitch'
-import PerformanceActivityTypeFilter from './PerformanceActivityTypeFilter'
+import ActivitiesElementsSwitch from '../ActivitiesElementsSwitch'
+import ActivityTypeFilter from '../ActivityTypeFilter'
+import AnalyticsSearchField from '../AnalyticsSearchField'
+import ElementTypeFilter from '../ElementTypeFilter'
 import PerformanceAttemptsFilter from './PerformanceAttemptsFilter'
-import PerformanceElementTypeFilter from './PerformanceElementTypeFilter'
 import PerformanceRatesBarChart from './PerformanceRatesBarChart'
-import PerformanceSearchField from './PerformanceSearchField'
 
 interface PerformanceRatesProps {
   activityPerformances: ActivityPerformance[]
@@ -79,7 +79,9 @@ function PerformanceRates({
           <ActivitiesElementsSwitch type={type} setType={setType} />
         </div>
         <Button
-          className={{ root: 'flex h-8 flex-row items-center gap-2' }}
+          className={{
+            root: 'py-0.25 flex h-8 flex-row items-center gap-2 px-2',
+          }}
           disabled={
             type === defaultFilters.type &&
             attemptsType === defaultFilters.attemptsType &&
@@ -105,11 +107,11 @@ function PerformanceRates({
             attemptsType={attemptsType}
             setAttemptsType={setAttemptsType}
           />
-          <PerformanceActivityTypeFilter
+          <ActivityTypeFilter
             activityType={activityType}
             setActivityType={setActivityType}
           />
-          <PerformanceSearchField
+          <AnalyticsSearchField
             type={type}
             value={activitySearch}
             onChange={(value) => setActivitySearch(value)}
@@ -121,11 +123,11 @@ function PerformanceRates({
             attemptsType={attemptsType}
             setAttemptsType={setAttemptsType}
           />
-          <PerformanceElementTypeFilter
+          <ElementTypeFilter
             elementType={elementType}
             setElementType={setElementType}
           />
-          <PerformanceSearchField
+          <AnalyticsSearchField
             type={type}
             value={instanceSearch}
             onChange={(value) => setInstanceSearch(value)}

apps/frontend-manage/src/components/analytics/performance/PerformanceRatesBarChart.tsx

@@ -1,30 +1,5 @@
 import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'
-
-const BarLabel = ({
-  value,
-  x,
-  width,
-  y,
-  height,
-}: {
-  value: number
-  x: number
-  y: number
-  width: number
-  height: number
-}) => (
-  <text
-    x={x + width / 2}
-    y={y + height / 2 + 1}
-    fill="white"
-    fontSize={14}
-    textAnchor="middle"
-    dominantBaseline="middle"
-    className="font-bold"
-  >
-    {value} %
-  </text>
-)
+import StackedBarChartLabel from '../StackedBarChartLabel'
 
 interface PerformanceRatesBarChartProps {
   title: string
@@ -61,7 +36,7 @@ function PerformanceRatesBarChart({
                 stackId="1"
                 fill={colors.incorrect}
                 label={(props) => (
-                  <BarLabel {...props} value={roundedErrorRate} />
+                  <StackedBarChartLabel {...props} value={roundedErrorRate} />
                 )}
               />
             )}
@@ -71,7 +46,7 @@ function PerformanceRatesBarChart({
                 stackId="1"
                 fill={colors.partial}
                 label={(props) => (
-                  <BarLabel {...props} value={roundedPartialRate} />
+                  <StackedBarChartLabel {...props} value={roundedPartialRate} />
                 )}
               />
             )}
@@ -81,7 +56,7 @@ function PerformanceRatesBarChart({
                 stackId="1"
                 fill={colors.correct}
                 label={(props) => (
-                  <BarLabel {...props} value={roundedCorrectRate} />
+                  <StackedBarChartLabel {...props} value={roundedCorrectRate} />
                 )}
               />
             )}