@magmamath/students-features 1.8.0-rc.0-fluency-visuals → 1.8.0

package/src/features/fluency-teacher/components/drawer/DrawerOperatorStatCard.tsx

@@ -1,65 +1,65 @@
 import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
-import { COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
+import { BORDER_RADIUS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
+import { getOperatorBandColors } from '../../fluencyTeacher.helpers'
+import { FluencyOperator } from '../../fluencyTeacher.constants'
 
-export type DrawerOperatorStatCardProps = {
+type DrawerOperatorStatCardProps = {
   title: string
-  value: number | string
+  value: number
   symbol: string
-  color: string
+  operator: FluencyOperator
 }
 
 export const DrawerOperatorStatCard = ({
   title,
   value,
   symbol,
-  color,
-}: DrawerOperatorStatCardProps) => (
-  <View style={styles.container}>
-    <View style={[styles.iconContainer, { backgroundColor: color + '26' }]}>
-      <Text style={[styles.symbol, { color }]}>{symbol}</Text>
+  operator,
+}: DrawerOperatorStatCardProps) => {
+  const { background, border, text } = getOperatorBandColors(operator, value)
+  return (
+    <View style={[styles.container, { backgroundColor: background, borderColor: border }]}>
+      <View style={styles.titleRow}>
+        <Text style={[styles.symbol, { color: text }]}>{symbol}</Text>
+        <Text style={[styles.title, { color: text }]} numberOfLines={1}>
+          {title}
+        </Text>
+      </View>
+      <Text style={[styles.value, { color: text }]}>{value}%</Text>
     </View>
-    <View>
-      <Text style={styles.title}>{title}</Text>
-      <Text style={styles.value}>{value}%</Text>
-    </View>
-  </View>
-)
+  )
+}
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[300],
-    padding: SPACING[300],
-    borderRadius: SPACING[300],
+    justifyContent: 'center',
+    gap: SPACING[100],
+    padding: SPACING[200],
+    borderRadius: BORDER_RADIUS[200],
     borderWidth: 1,
-    borderColor: COLORS.NEUTRAL_4,
-    backgroundColor: COLORS.NEUTRAL_2,
   },
-  iconContainer: {
-    width: 32,
-    height: 32,
-    borderRadius: SPACING[200],
+  titleRow: {
+    flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center',
+    gap: SPACING[100],
   },
   symbol: {
+    width: 16,
     fontFamily: FONT_FAMILY.buenosAiresBold,
-    fontSize: 28,
-    marginBottom: 2,
+    fontSize: 16,
+    textAlign: 'center',
   },
   title: {
+    flexShrink: 1,
     fontFamily: FONT_FAMILY.buenosAires,
     fontWeight: '400',
-    fontSize: 12,
-    color: COLORS.NEUTRAL_7,
+    fontSize: 16,
   },
   value: {
-    fontFamily: FONT_FAMILY.buenosAiresBold,
-    fontWeight: '700',
-    fontSize: 18,
-    color: COLORS.NEUTRAL_10,
+    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
+    fontWeight: '600',
+    fontSize: 24,
   },
 })

package/src/features/fluency-teacher/components/drawer/DrawerStats.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { COLORS, SPACING } from '@magmamath/react-native-ui'
+import { SPACING } from '@magmamath/react-native-ui'
 import { useText } from '../../../../i18n/i18n'
+import { useTeacherFluency } from '../../context/TeacherFluencyContext'
 import { DrawerOperatorStatCard } from './DrawerOperatorStatCard'
 import type { StudentOperatorScores } from '../../fluencyTeacher.types'
 
-import { FluencyMathOperatorSymbol } from '../../fluencyTeacher.constants'
+import { OPERATOR_CARD_CONFIG, OPERATOR_TO_COLUMN } from '../../fluencyTeacher.constants'
+import { getOperatorsForGrade } from '../../fluencyTeacher.helpers'
 
 type DrawerStatsProps = {
   scores: StudentOperatorScores
@@ -13,32 +15,18 @@ type DrawerStatsProps = {
 
 export const DrawerStats = ({ scores }: DrawerStatsProps) => {
   const t = useText()
+  const { grade } = useTeacherFluency()
   return (
     <View style={styles.container}>
-      <DrawerOperatorStatCard
-        title={t('student.fluency.addition')}
-        symbol={FluencyMathOperatorSymbol.ADDITION}
-        color={COLORS.PRIMARY_GREEN}
-        value={scores.addition}
-      />
-      <DrawerOperatorStatCard
-        title={t('student.fluency.subtraction')}
-        symbol={FluencyMathOperatorSymbol.SUBTRACTION}
-        color={COLORS.PRIMARY_ORANGE}
-        value={scores.subtraction}
-      />
-      <DrawerOperatorStatCard
-        title={t('student.fluency.multiplication')}
-        symbol={FluencyMathOperatorSymbol.MULTIPLICATION}
-        color={COLORS.PRIMARY_BLUE}
-        value={scores.multiplication}
-      />
-      <DrawerOperatorStatCard
-        title={t('student.fluency.division')}
-        symbol={FluencyMathOperatorSymbol.DIVISION}
-        color={COLORS.PRIMARY_PURPLE}
-        value={scores.division}
-      />
+      {getOperatorsForGrade(grade).map((operator) => (
+        <DrawerOperatorStatCard
+          key={operator}
+          title={t(OPERATOR_CARD_CONFIG[operator].labelKey)}
+          symbol={OPERATOR_CARD_CONFIG[operator].symbol}
+          operator={operator}
+          value={scores[OPERATOR_TO_COLUMN[operator]]}
+        />
+      ))}
     </View>
   )
 }
@@ -46,7 +34,7 @@ export const DrawerStats = ({ scores }: DrawerStatsProps) => {
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    gap: SPACING[300],
-    paddingBottom: SPACING[300],
+    gap: SPACING[400],
+    paddingBottom: SPACING[400],
   },
 })

package/src/features/fluency-teacher/components/drawer/FluencyTeacherDrawer.tsx

@@ -7,9 +7,8 @@ import { DrawerHeader } from './DrawerHeader'
 import { DrawerStats } from './DrawerStats'
 import { DrawerMatrixes } from './DrawerMatrixes'
 import { useTeacherFluency } from '../../context/TeacherFluencyContext'
-import { DrawerMasteryLegend } from './DrawerMasteryLegend'
 
-const DRAWER_WIDTH = 700
+const DRAWER_WIDTH = 815
 const BACKDROP_COLOR = 'rgba(0, 0, 0, 0.2)'
 
 const backdropOpacity = new Animated.Value(0)
@@ -55,7 +54,6 @@ export const FluencyTeacherDrawer = () => {
             <DrawerStats scores={student.scores} />
             <ScrollView showsVerticalScrollIndicator={false}>
               <DrawerMatrixes />
-              <DrawerMasteryLegend />
             </ScrollView>
           </View>
         </Animated.View>
@@ -78,12 +76,13 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
     width: DRAWER_WIDTH,
+    maxWidth: '100%',
     backgroundColor: COLORS.NEUTRAL_1,
     ...SHADOWS[3],
   },
   content: {
     flex: 1,
-    paddingVertical: SPACING[500],
-    paddingHorizontal: SPACING[700],
+    paddingVertical: SPACING[200],
+    paddingHorizontal: SPACING[400],
   },
 })

package/src/features/fluency-teacher/components/matrix/DrawerMatrix.tsx

@@ -5,14 +5,15 @@ import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
 import { useText } from '../../../../i18n/i18n'
 import { MatrixHeaderRow } from './MatrixHeaderRow'
 import { MatrixRow } from './MatrixRow'
-import type { DrawerGrid } from '../../hooks/useDrawerGrid'
+import { MasteryLevel } from '../../fluencyTeacher.constants'
+import type { DrawerGrid } from '../../fluencyTeacher.types'
 
 type DrawerMatrixProps = {
   grid: DrawerGrid | null
   cellSize: number
   fontSize: number
   borderRadius: number
-  cellColorMap: Record<number, string>
+  cellColorMap: Record<MasteryLevel, string>
   onLayout: (e: LayoutChangeEvent) => void
 }
 

package/src/features/fluency-teacher/components/matrix/MatrixCell.tsx

@@ -1,27 +1,24 @@
 import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
+import { StyleSheet, View } from 'react-native'
 import { getCellColor } from '../../fluencyTeacher.helpers'
+import { MasteryLevel } from '../../fluencyTeacher.constants'
 
-export type MatrixCellProps = {
-  box: number | null
+type MatrixCellProps = {
+  box: MasteryLevel | null
   isEmpty: boolean
   cellSize: number
   borderRadius: number
-  colorMap: Record<number, string>
-  fontSize: number
+  colorMap: Record<MasteryLevel, string>
 }
 
-export const MatrixCell = ({ box, isEmpty, cellSize, borderRadius, colorMap, fontSize }: MatrixCellProps) => (
+export const MatrixCell = ({ box, isEmpty, cellSize, borderRadius, colorMap }: MatrixCellProps) => (
   <View
     style={[
       styles.cell,
       { width: cellSize, height: cellSize, borderRadius },
       { backgroundColor: isEmpty ? 'transparent' : getCellColor(box, colorMap) },
     ]}
-  >
-    {isEmpty && <Text style={[styles.label, { fontSize }]}>-</Text>}
-  </View>
+  />
 )
 
 const styles = StyleSheet.create({
@@ -29,10 +26,4 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  label: {
-    color: COLORS.NEUTRAL_7,
-    fontFamily: FONT_FAMILY.buenosAires,
-    fontWeight: '600',
-    textAlign: 'center',
-  },
 })

package/src/features/fluency-teacher/components/matrix/MatrixHeaderRow.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
 
-export type MatrixHeaderRowProps = {
+type MatrixHeaderRowProps = {
   colLabels: number[]
   cellSize: number
   fontSize: number

package/src/features/fluency-teacher/components/matrix/MatrixLegend.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
+import { useText } from '../../../../i18n/i18n'
+import {
+  FluencyOperator,
+  LEGEND_LEVELS,
+  MATRIX_CELL_COLORS,
+  MATRIX_NOT_STARTED_COLOR,
+  OPERATOR_PALETTES,
+} from '../../fluencyTeacher.constants'
+import { countFactsByMasteryLevel } from '../../fluencyTeacher.helpers'
+import type { DrawerGrid } from '../../fluencyTeacher.types'
+
+type MatrixLegendProps = {
+  operator: FluencyOperator
+  grid: DrawerGrid | null
+}
+
+export const MatrixLegend = ({ operator, grid }: MatrixLegendProps) => {
+  const t = useText()
+  const counts = countFactsByMasteryLevel(grid, operator)
+  const countColor = OPERATOR_PALETTES[operator].legendCount
+
+  return (
+    <View style={styles.container}>
+      {LEGEND_LEVELS.map(({ box, labelKey }) => (
+        <View key={labelKey} style={styles.item}>
+          <View style={styles.labelWrap}>
+            <View
+              style={[
+                styles.swatch,
+                {
+                  backgroundColor:
+                    box === null ? MATRIX_NOT_STARTED_COLOR : MATRIX_CELL_COLORS[operator][box],
+                },
+              ]}
+            />
+            <Text style={styles.label}>{t(labelKey)}:</Text>
+          </View>
+          <Text style={[styles.count, { color: countColor }]}>{counts.get(box) ?? 0}</Text>
+        </View>
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 130,
+    gap: SPACING[100],
+    paddingTop: SPACING[200],
+    paddingHorizontal: SPACING[100],
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  labelWrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[100],
+  },
+  swatch: {
+    width: 10,
+    height: 10,
+    borderRadius: 4,
+  },
+  label: {
+    fontFamily: FONT_FAMILY.buenosAires,
+    fontWeight: '400',
+    fontSize: 10,
+    color: COLORS.NEUTRAL_7,
+  },
+  count: {
+    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
+    fontWeight: '600',
+    fontSize: 13,
+  },
+})

package/src/features/fluency-teacher/components/matrix/MatrixRow.tsx

@@ -2,14 +2,15 @@ import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
 import { MatrixCell } from './MatrixCell'
-import type { DrawerGridCell } from '../../hooks/useDrawerGrid'
+import { MasteryLevel } from '../../fluencyTeacher.constants'
+import type { DrawerGridCell } from '../../fluencyTeacher.types'
 
-export type MatrixRowProps = {
+type MatrixRowProps = {
   label: number
   cells: DrawerGridCell[]
   cellSize: number
   borderRadius: number
-  colorMap: Record<number, string>
+  colorMap: Record<MasteryLevel, string>
   fontSize: number
 }
 
@@ -33,7 +34,6 @@ export const MatrixRow = ({
         cellSize={cellSize}
         borderRadius={borderRadius}
         colorMap={colorMap}
-        fontSize={fontSize}
       />
     ))}
   </View>

package/src/features/fluency-teacher/components/table/AllPupilsTableRow.tsx

@@ -10,21 +10,22 @@ import {
 import { useUnit } from 'effector-react'
 import { useText } from '../../../../i18n/i18n'
 import { useTeacherFluency } from '../../context/TeacherFluencyContext'
-import { toAverageLabel } from '../../fluencyTeacher.helpers'
-import { TABLE_OPERATOR_COLUMNS } from '../../fluencyTeacher.constants'
-import { TableRowAverageProgress } from './TableRowAverageProgress'
+import { COLUMN_TO_OPERATOR } from '../../fluencyTeacher.constants'
+import { getTableOperatorColumns } from '../../fluencyTeacher.helpers'
+import { AverageCell } from './AverageCell'
 import { OperatorBadge } from './OperatorBadge'
+import { tableCellStyles } from './tableCell.styles'
 
 export const AllPupilsTableRow = () => {
   const t = useText()
-  const { model } = useTeacherFluency()
+  const { model, grade } = useTeacherFluency()
   const stats = useUnit(model.table.$stats)
 
   if (!stats) return null
 
   return (
     <View style={styles.row}>
-      <View style={styles.name}>
+      <View style={tableCellStyles.name}>
         <View style={styles.icon}>
           <StudentsIcon size={25} color={COLORS.NEUTRAL_7} />
         </View>
@@ -33,20 +34,16 @@ export const AllPupilsTableRow = () => {
         </Typography>
       </View>
 
-      <View style={styles.average}>
-        <TableRowAverageProgress
-          percent={stats.classAverage}
-          label={t(toAverageLabel(stats.classAverage / 100))}
-        />
+      <View style={tableCellStyles.average}>
+        <AverageCell percent={stats.classAverage} />
       </View>
 
-      <View style={styles.operators}>
-        {TABLE_OPERATOR_COLUMNS.map(({ operator, badgeBg, badgeText }) => (
-          <View key={operator} style={styles.operator}>
+      <View style={tableCellStyles.operators}>
+        {getTableOperatorColumns(grade).map(({ operator }) => (
+          <View key={operator} style={tableCellStyles.operator}>
             <OperatorBadge
               value={stats.operatorAverages[operator]}
-              bgColor={badgeBg}
-              textColor={badgeText}
+              operator={COLUMN_TO_OPERATOR[operator]}
             />
           </View>
         ))}
@@ -64,14 +61,7 @@ const styles = StyleSheet.create({
     gap: SPACING[400],
     backgroundColor: COLORS.NEUTRAL_2,
     borderBottomWidth: 1,
-    borderBottomColor: COLORS.NEUTRAL_4,
-  },
-  name: {
-    width: 137,
-    height: 40,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 12,
+    borderBottomColor: COLORS.NEUTRAL_6,
   },
   icon: {
     width: 25,
@@ -83,21 +73,4 @@ const styles = StyleSheet.create({
     width: 100,
     color: COLORS.NEUTRAL_9,
   },
-  average: {
-    width: 145,
-    height: 40,
-    paddingHorizontal: 12,
-    justifyContent: 'center',
-  },
-  operators: {
-    flex: 1,
-    height: 40,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: SPACING[800],
-  },
-  operator: {
-    flex: 1,
-    alignItems: 'center',
-  },
 })

package/src/features/fluency-teacher/components/table/AverageCell.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { BORDER_RADIUS, COLORS, HeadingVariants, Typography } from '@magmamath/react-native-ui'
+
+type AverageCellProps = {
+  percent: number
+  height?: number
+  showPercent?: boolean
+}
+
+export const AverageCell = ({ percent, height = 32, showPercent = true }: AverageCellProps) => (
+  <View style={[styles.track, { height }]}>
+    <View style={[styles.fill, { width: `${percent}%` }]} />
+    {showPercent && (
+      <Typography variant={HeadingVariants.H9} style={styles.percent}>
+        {percent}%
+      </Typography>
+    )}
+  </View>
+)
+
+const styles = StyleSheet.create({
+  track: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: BORDER_RADIUS[200],
+    borderWidth: 1.5,
+    borderColor: COLORS.PRIMARY_YELLOW,
+    backgroundColor: COLORS.YELLOW_1,
+    overflow: 'hidden',
+  },
+  fill: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    backgroundColor: COLORS.PRIMARY_YELLOW,
+  },
+  percent: {
+    color: COLORS.YELLOW_9,
+    textTransform: 'uppercase',
+  },
+})

package/src/features/fluency-teacher/components/table/AverageSortButton.tsx

@@ -1,76 +1,22 @@
 import React from 'react'
-import { Pressable, StyleSheet, Text, View } from 'react-native'
-import {
-  CaretDownIcon,
-  CaretUpIcon,
-  COLORS,
-  FONT_FAMILY,
-  SHADOWS,
-  SPACING,
-  StudentsIcon,
-} from '@magmamath/react-native-ui'
 import { useText } from '../../../../i18n/i18n'
-import { SortDefaultIcon } from '../../assets/SortDefaultIcon'
 import type { SortState } from '../../fluencyTeacher.types'
-import { SortingDirection } from '../../../../shared/common.constants'
 import { FluencyTableColumn } from '../../fluencyTeacher.constants'
+import { TableColumnSortButton } from './TableColumnSortButton'
 
-export type AverageSortButtonProps = {
+type AverageSortButtonProps = {
   sort: SortState
   onPress: () => void
 }
 
 export const AverageSortButton = ({ sort, onPress }: AverageSortButtonProps) => {
   const t = useText()
-  const isActive = sort.column === FluencyTableColumn.AVERAGE
-  const color = isActive ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_7
-
-  const ActiveSortIcon = (() => {
-    return sort.direction === SortingDirection.DESC ? (
-      <CaretUpIcon size={12} color={color} />
-    ) : (
-      <CaretDownIcon size={12} color={color} />
-    )
-  })()
-
   return (
-    <Pressable onPress={onPress} style={[styles.button, isActive && styles.buttonActive]}>
-      <View style={styles.iconWrapper}>
-        <StudentsIcon size={16} color={color} />
-      </View>
-      <Text selectable={false} style={[styles.label, { color }]}>
-        {t('teacher.fluency.average')}
-      </Text>
-      {isActive ? ActiveSortIcon : <SortDefaultIcon size={10} color={color} />}
-    </Pressable>
+    <TableColumnSortButton
+      label={t('teacher.fluency.average')}
+      isActive={sort.column === FluencyTableColumn.AVERAGE}
+      direction={sort.direction}
+      onPress={onPress}
+    />
   )
 }
-
-const styles = StyleSheet.create({
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[100],
-    paddingLeft: 6,
-    paddingRight: SPACING[200],
-    paddingVertical: SPACING[100],
-    borderRadius: 6,
-    borderWidth: 0.5,
-    borderColor: COLORS.NEUTRAL_3,
-    backgroundColor: COLORS.NEUTRAL_1,
-    ...SHADOWS[2],
-  },
-  buttonActive: {
-    backgroundColor: COLORS.PRIMARY_YELLOW,
-    borderColor: COLORS.PRIMARY_YELLOW,
-  },
-  iconWrapper: {
-    marginHorizontal: SPACING[100],
-  },
-  label: {
-    fontFamily: FONT_FAMILY.buenosAiresBold,
-    fontSize: 12,
-    letterSpacing: 0.24,
-    textTransform: 'uppercase',
-  },
-})