@magmamath/students-features 1.2.0 → 1.2.1-rc.10

package/src/features/pmProgress/components/chart/components/layers/SliceFillColor.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import { ClipPath, Defs, G, Path } from 'react-native-svg'
+import { getSliceClipId } from '../../chart.helpers'
+
+type SliceFillColorProps = {
+  clipPathId: string
+  shapeSvg: string
+  fillSvg: string
+  fillBorderSvg: string
+  color: string
+  percent: number
+  borderColor?: string
+  borderWidth?: number
+}
+
+export const SliceFillColor = ({
+  clipPathId,
+  shapeSvg,
+  fillSvg,
+  fillBorderSvg,
+  color,
+  percent,
+  borderColor,
+  borderWidth,
+}: SliceFillColorProps) => {
+  const isFullyFilled = percent >= 100
+  const isPartiallyFilled = percent > 0
+  const hasBorder = borderColor != null && borderWidth != null && borderWidth > 0
+
+  const sliceClipId = getSliceClipId(clipPathId)
+  const borderClipId = `${sliceClipId}-border`
+
+  if (isFullyFilled) {
+    return (
+      <>
+        {hasBorder && (
+          <Defs>
+            <ClipPath id={borderClipId}>
+              <Path d={fillBorderSvg} />
+            </ClipPath>
+          </Defs>
+        )}
+        <G clipPath={`url(#${sliceClipId})`}>
+          <Path d={shapeSvg} fill={color} />
+          {hasBorder && (
+            <G clipPath={`url(#${borderClipId})`}>
+              <Path
+                d={fillBorderSvg}
+                fill="none"
+                stroke={borderColor}
+                strokeWidth={borderWidth! * 2}
+              />
+            </G>
+          )}
+        </G>
+      </>
+    )
+  }
+
+  if (isPartiallyFilled) {
+    return (
+      <>
+        {hasBorder && (
+          <Defs>
+            <ClipPath id={borderClipId}>
+              <Path d={fillBorderSvg} />
+            </ClipPath>
+          </Defs>
+        )}
+        <G clipPath={`url(#${sliceClipId})`}>
+          <Path d={fillSvg} fill={color} />
+          {hasBorder && (
+            <G clipPath={`url(#${borderClipId})`}>
+              <Path
+                d={fillBorderSvg}
+                fill="none"
+                stroke={borderColor}
+                strokeWidth={borderWidth! * 2}
+              />
+            </G>
+          )}
+        </G>
+      </>
+    )
+  }
+
+  return null
+}

package/src/features/pmProgress/components/chart/model/ArcPatternGenerator.ts

@@ -0,0 +1,48 @@
+import type { PieChartManagerConfig, SliceShape } from '../chart.types'
+
+export class OuterArcPatternGenerator {
+  constructor(private readonly config: PieChartManagerConfig) {}
+
+  public generateArcPath(slice: SliceShape, radius: number) {
+    const gapAngle = this.config.gapBetweenSlices / (2 * radius)
+    const startAngle = slice.startAngle + gapAngle
+    const endAngle = slice.endAngle - gapAngle
+
+    const startPoint = this.polarToCartesian(radius, startAngle)
+    const endPoint = this.polarToCartesian(radius, endAngle)
+    const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0
+
+    return `M ${startPoint.x} ${startPoint.y} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endPoint.x} ${endPoint.y}`
+  }
+
+  /** Returns the sizes of the two rings where the checkerboard dashes are drawn. */
+  public getPatternTrackSizes(): [number, number] {
+    const { outerRadius, outerArc } = this.config
+    return [
+      outerRadius - outerArc.strokeWidth / 2,
+      outerRadius - outerArc.strokeWidth * 1.5,
+    ]
+  }
+
+  public getDashWidthForRadius(radius: number) {
+    return this.config.outerArc.dashWidth * (radius / this.config.outerRadius)
+  }
+
+  public getDashOffset(rowIndex: number, radius: number) {
+    const dashAngle = this.config.outerArc.dashWidth / this.config.outerRadius
+    const dashWidthAtRadius = dashAngle * radius
+    const baseOffset = dashWidthAtRadius / 2
+
+    if (rowIndex === 1) {
+      return baseOffset - dashWidthAtRadius
+    }
+    return baseOffset
+  }
+
+  private polarToCartesian(radius: number, angleInRadians: number) {
+    return {
+      x: radius * Math.sin(angleInRadians),
+      y: -radius * Math.cos(angleInRadians),
+    }
+  }
+}

package/src/features/pmProgress/components/chart/model/PieChartManager.ts

@@ -0,0 +1,20 @@
+import { SliceShapeGenerator } from './SliceShapeGenerator'
+import { OuterArcPatternGenerator } from './ArcPatternGenerator'
+import { SliceHighlight } from './SliceHighlight'
+import type { PieChartManagerConfig } from '../chart.types'
+
+export class PieChartManager {
+  public readonly shape: SliceShapeGenerator
+  public readonly pattern: OuterArcPatternGenerator
+  public readonly highlight: SliceHighlight
+
+  constructor(public readonly config: PieChartManagerConfig) {
+    this.shape = new SliceShapeGenerator(config)
+    this.pattern = new OuterArcPatternGenerator(config)
+    this.highlight = new SliceHighlight(config)
+  }
+
+  public getCenter() {
+    return { x: this.config.size / 2, y: this.config.size / 2 }
+  }
+}

package/src/features/pmProgress/components/chart/model/SliceHighlight.ts

@@ -0,0 +1,17 @@
+import { createEvent, createStore } from 'effector'
+import type { PieChartManagerConfig } from '../chart.types'
+
+export class SliceHighlight {
+  public readonly set = createEvent<number>()
+  public readonly reset = createEvent()
+
+  public readonly $highlightedIndex = createStore<number | null>(null)
+    .on(this.set, (_, index) => index)
+    .reset(this.reset)
+
+  constructor(private readonly config: PieChartManagerConfig) {}
+
+  public getTranslateY(isHighlighted: boolean): number {
+    return isHighlighted ? -this.config.pressOffset : 0
+  }
+}

package/src/features/pmProgress/components/chart/model/SliceShapeGenerator.ts

@@ -0,0 +1,90 @@
+import { arc, pie } from 'd3-shape'
+import type { PieChartManagerConfig, SliceInputData, SliceShape } from '../chart.types'
+
+export class SliceShapeGenerator {
+  private innerRadius = 0
+  private readonly d3Pie = pie<SliceInputData>()
+    .value(({ value }) => value)
+    .sort(null)
+
+  constructor(private readonly config: PieChartManagerConfig) {}
+
+  public generateSlices(data: SliceInputData[]): SliceShape[] {
+    this.innerRadius = this.getInnerRadius(data.length)
+
+    return this.d3Pie(data).map((datum, index) => ({
+      index,
+      startAngle: datum.startAngle,
+      endAngle: datum.endAngle,
+      fillPercent: datum.data.fillPercent ?? 0,
+      backgroundColor: datum.data.backgroundColor ?? this.config.colors.background,
+      fillColor: datum.data.fillColor,
+      borderColor: datum.data.borderColor,
+      data: datum.data,
+    }))
+  }
+
+  public generateSlicePath(slice: SliceShape): string {
+    return this.buildArc(slice, this.config.outerRadius, this.getCornerRadius(100))
+  }
+
+  public generateFillPath(slice: SliceShape): string {
+    const fillRadius = this.getFillRadius(slice)
+    const cornerRadius = this.getCornerRadius(slice.fillPercent)
+
+    // Build with innerRadius 0 so d3 only rounds the outer corners.
+    // The slice clip path will cut the inner edge to the correct boundary.
+    return arc()
+      .outerRadius(fillRadius)
+      .innerRadius(0)
+      .cornerRadius(cornerRadius)
+      .padAngle(this.padAngle)
+      .padRadius(this.config.outerRadius)({
+      startAngle: slice.startAngle,
+      endAngle: slice.endAngle,
+      innerRadius: 0,
+      outerRadius: fillRadius,
+    }) as string
+  }
+
+  public generateFillBorderPath(slice: SliceShape): string {
+    const fillRadius = this.getFillRadius(slice)
+    const cornerRadius = this.getCornerRadius(slice.fillPercent)
+    return this.buildArc(slice, fillRadius, cornerRadius)
+  }
+
+
+  private getFillRadius(slice: SliceShape): number {
+    return this.innerRadius + (this.config.outerRadius - this.innerRadius) * (slice.fillPercent / 100)
+  }
+
+  private getInnerRadius(sliceCount: number): number {
+    const { innerRadius } = this.config
+    return typeof innerRadius === 'function' ? innerRadius(sliceCount) : innerRadius
+  }
+
+  private getCornerRadius(fillPercent: number): number {
+    const { cornerRadius } = this.config
+    return typeof cornerRadius === 'function' ? cornerRadius(fillPercent) : cornerRadius
+  }
+
+  private get padAngle(): number {
+    return this.config.gapBetweenSlices / this.config.outerRadius
+  }
+
+  private buildArc(slice: SliceShape, outerRadius: number, cornerRadius: number): string {
+    const innerRadius = this.innerRadius
+
+    return arc()
+      .outerRadius(outerRadius)
+      .innerRadius(innerRadius)
+      .cornerRadius(cornerRadius)
+      .padAngle(this.padAngle)
+      .padRadius(this.config.outerRadius)({
+      startAngle: slice.startAngle,
+      endAngle: slice.endAngle,
+      innerRadius,
+      outerRadius,
+    }) as string
+  }
+}

package/src/features/pmProgress/components/header/PmProgressHeader.tsx

@@ -0,0 +1,187 @@
+import React, { useState } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Portal } from 'react-native-portalize'
+import {
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonVariant,
+  CaretDownIcon,
+  CaretUpIcon,
+  COLORS,
+  Dropdown,
+  HeadingVariants,
+  Menu,
+  PlayIcon,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { SketchArrowRight } from '../../../../shared/icons/SketchArrowRight'
+import { SliceDiamondIcon } from '../../../../shared/icons/SliceDiamondIcon'
+import { useText } from '../../../../shared/translation'
+import { useStoreMap, useUnit } from 'effector-react'
+import { usePmProgress } from '../../context/PmProgressContext'
+import { isFluencyDomain } from '../../shared/pmProgress.helpers'
+import { SolvingFlow } from '../../shared/pmProgress.constants'
+
+export const PmProgressHeader = () => {
+  const t = useText()
+  const { model, onStartPress } = usePmProgress()
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+
+  const grade = useUnit(model.tree.$grade)
+  const grades = useStoreMap(model.tree.$grades, (grades) =>
+    grades.map((grade) => ({
+      key: grade.value,
+      title: grade.name,
+      disabled: grade.isLocked,
+    })),
+  )
+
+  const nextUp = useStoreMap(model.tree.$domains, (domains) =>
+    domains.find((domain) => {
+      const isFluency = isFluencyDomain(domain.title)
+      const isCompleted = domain.skillsCount.achieved === domain.skillsCount.total
+      return !isFluency && !isCompleted
+    }),
+  )
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.title}>
+        <Typography variant={HeadingVariants.H2} style={styles.dark}>
+          {t('pmProgress.title')}
+        </Typography>
+        <Dropdown
+          isOpen={isDropdownOpen}
+          Portal={Portal}
+          onDismiss={() => setIsDropdownOpen(false)}
+          anchor={
+            <Button
+              variant={ButtonVariant.TERTIARY}
+              onPress={() => setIsDropdownOpen((prev) => !prev)}
+            >
+              <Typography variant={HeadingVariants.H8} style={styles.dark}>
+                {t('pmProgress.grade')} {grade}
+              </Typography>
+              <View style={styles.caret}>
+                {isDropdownOpen ? (
+                  <CaretUpIcon color={COLORS.NEUTRAL_9} />
+                ) : (
+                  <CaretDownIcon color={COLORS.NEUTRAL_9} />
+                )}
+              </View>
+            </Button>
+          }
+        >
+          <Menu
+            style={styles.menu}
+            items={grades}
+            onItemPress={(item) => model.tree.setGrade(item.key as number)}
+          />
+        </Dropdown>
+      </View>
+
+      <View style={styles.nextUp}>
+        <View style={styles.content}>
+          <View style={styles.subtitle}>
+            <Typography variant={HeadingVariants.H2} style={styles.dark}>
+              {t('pmProgress.nextUp')}
+            </Typography>
+          </View>
+          <View style={[styles.row, styles.tilted]}>
+            <Typography variant={HeadingVariants.H7} style={styles.muted}>
+              {nextUp?.title}
+            </Typography>
+            <View style={styles.diamond}>
+              <SliceDiamondIcon color={nextUp?.color} />
+            </View>
+          </View>
+        </View>
+        <View style={styles.arrow}>
+          <SketchArrowRight />
+        </View>
+        <Button
+          onPress={async () => {
+            const skill = await model.solving.start({ type: SolvingFlow.MAGMA })
+
+            // @ts-ignore
+            onStartPress?.(skill)
+          }}
+          icon={<PlayIcon size={16} color={COLORS.NEUTRAL_1} />}
+          variant={ButtonVariant.PRIMARY}
+          size={ButtonSize.LARGE}
+          colorScheme={ButtonColor.YELLOW}
+          raiseLevel={6}
+          style={{ container: styles.startButton }}
+        >
+          <Typography variant={HeadingVariants.H6} style={styles.startButtonText}>
+            {t('pmProgress.startButton')}
+          </Typography>
+        </Button>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: SPACING[400],
+  },
+  title: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[200],
+  },
+  dark: {
+    color: COLORS.NEUTRAL_9,
+  },
+  caret: {
+    marginLeft: SPACING[100],
+  },
+  menu: {
+    top: SPACING[100],
+    minWidth: 110,
+  },
+  nextUp: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[400],
+  },
+  content: {
+    alignItems: 'center',
+    gap: SPACING[100],
+  },
+  subtitle: {
+    transform: [{ rotate: '355deg' }],
+    marginRight: SPACING[300],
+  },
+  tilted: {
+    transform: [{ rotate: '355deg' }],
+  },
+  row: {
+    flexDirection: 'row',
+    gap: SPACING[100],
+  },
+  muted: {
+    color: COLORS.NEUTRAL_8,
+  },
+  diamond: {
+    bottom: 10,
+    transform: [{ rotate: '5deg' }],
+  },
+  arrow: {
+    transform: [{ rotate: '358deg' }],
+  },
+  startButton: {
+    minWidth: 145,
+  },
+  startButtonText: {
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    color: COLORS.NEUTRAL_1,
+  },
+})

package/src/features/pmProgress/components/insights/PmInsights.tsx

@@ -0,0 +1,60 @@
+import React, { useMemo, useState } from 'react'
+import { LayoutChangeEvent, StyleSheet, View } from 'react-native'
+import { BORDER_RADIUS, COLORS, SPACING } from '@magmamath/react-native-ui'
+import { useStoreMap } from 'effector-react'
+import { PracticeProgressPieChart } from '../chart/components/PracticeProgressPieChart'
+import { PmTimeframeStats } from './PmTimeframeStats'
+import { usePmProgress } from '../../context/PmProgressContext'
+import { createChartConfig } from '../../shared/pmProgress.helpers'
+import { STATS_MAX_HEIGHT } from '../../shared/pmProgress.constants'
+
+export const PmInsights = () => {
+  const { model } = usePmProgress()
+  const [chartSize, setChartSize] = useState(0)
+  const chartData = useStoreMap(model.tree.$domains, (domains) =>
+    domains.map((domain) => ({
+      value: 1,
+      fillPercent: Math.round(domain.scorePercentage),
+      fillColor: domain.color,
+      borderColor: domain.borderColor,
+      backgroundColor: domain.backgroundColor,
+    })),
+  )
+
+  const chartConfig = useMemo(() => {
+    const size = Math.max(0, chartSize - SPACING[400])
+    return createChartConfig(size)
+  }, [chartSize])
+
+  const measureLayout = (event: LayoutChangeEvent) => {
+    const height = event.nativeEvent.layout.height
+    const size = height - STATS_MAX_HEIGHT - SPACING[800]
+    setChartSize(size)
+  }
+
+  if (!chartData) return null
+
+  return (
+    <View style={styles.container} onLayout={measureLayout}>
+      <View style={[styles.chart, { width: chartSize, height: chartSize }]}>
+        <PracticeProgressPieChart data={chartData} config={chartConfig} />
+      </View>
+      <PmTimeframeStats />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+  },
+  chart: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderRadius: BORDER_RADIUS[250],
+    padding: SPACING[400],
+    marginBottom: SPACING[400],
+    marginTop: SPACING[400],
+  },
+})

package/src/features/pmProgress/components/insights/PmTimeframeStats.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import {
+  COLORS,
+  SelectGroup,
+  SelectOptionColor,
+  SelectOptionProps,
+  SPACING,
+} from '@magmamath/react-native-ui'
+import { StatsCard } from './StatsCard'
+import { StarIcon } from '../../../../shared/icons/StarIcon'
+import { TimerIcon } from '../../../../shared/icons/TimerIcon'
+import { BORDER_RADIUS } from '@magmamath/react-native-ui'
+import { useText } from '../../../../shared/translation'
+import { useUnit } from 'effector-react'
+import { formatTime } from '../../shared/pmProgress.helpers'
+import { InsightsTimeframe, STATS_MAX_HEIGHT } from '../../shared/pmProgress.constants'
+import { usePmProgress } from '../../context/PmProgressContext'
+
+export const PmTimeframeStats = () => {
+  const t = useText()
+  const { model } = usePmProgress()
+  const timeframe = useUnit(model.insights.$timeframe)
+  const insights = useUnit(model.insights.$insights)
+
+  const OPTIONS: SelectOptionProps[] = [
+    { key: InsightsTimeframe.WEEK, title: t('pmProgress.thisWeek') },
+    { key: InsightsTimeframe.LAST_WEEK, title: t('pmProgress.lastWeek') },
+    { key: InsightsTimeframe.ALL, title: t('pmProgress.allTime') },
+  ]
+
+  if (!insights) return null
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <View style={styles.cards}>
+          <StatsCard
+            value={insights.numberOfStars}
+            label={t('pmProgress.stars')}
+            color={COLORS.PRIMARY_YELLOW}
+            icon={<StarIcon />}
+          />
+          <StatsCard
+            value={formatTime(insights.timeInPracticeMs)}
+            label={t('pmProgress.time')}
+            color={COLORS.PRIMARY_PURPLE}
+            icon={<TimerIcon />}
+          />
+        </View>
+
+        <SelectGroup
+          color={SelectOptionColor.GREY}
+          options={OPTIONS}
+          selectedOptions={OPTIONS.filter(({ key }) => key === timeframe)}
+          onOptionChange={({ key }) => model.insights.setTimeframe(key as InsightsTimeframe)}
+        />
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    maxHeight: STATS_MAX_HEIGHT,
+    height: '100%',
+    padding: SPACING[200],
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderRadius: BORDER_RADIUS[300],
+    shadowColor: COLORS.NEUTRAL_9,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 2,
+  },
+  content: {
+    gap: SPACING[100],
+    marginBottom: 4,
+  },
+  cards: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: SPACING[300],
+  },
+})

package/src/features/pmProgress/components/insights/StatsCard.tsx

@@ -0,0 +1,53 @@
+import React, { ReactNode } from 'react'
+import { View, StyleSheet, Text, Platform } from 'react-native'
+import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
+
+type StatsCardProps = {
+  value: number | string
+  label: string
+  color: string
+  icon: ReactNode
+}
+
+export const StatsCard = ({ value, label, color, icon }: StatsCardProps) => {
+  return (
+    <View style={[styles.card, { borderColor: color }]}>
+      <View style={[styles.iconContainer, { backgroundColor: color }]}>{icon}</View>
+      <View>
+        <Text style={[styles.value, { color }]}>{value}</Text>
+        <Text style={styles.label}>{label}</Text>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    flex: 1,
+    height: 65,
+    alignItems: 'center',
+    flexDirection: 'row',
+    borderRadius: 12,
+    borderWidth: 4,
+    padding: 8,
+    gap: 8,
+  },
+  iconContainer: {
+    width: 42,
+    height: 42,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 100,
+  },
+  value: {
+    fontSize: 32,
+    fontWeight: '700',
+    fontFamily: FONT_FAMILY.buenosAires,
+  },
+  label: {
+    color: COLORS.NEUTRAL_8,
+    fontSize: 12,
+    fontFamily: FONT_FAMILY.buenosAires,
+    top: -6,
+  },
+})