@magmamath/students-features 1.3.24 → 1.3.25-rc.0

package/dist/typescript/module/features/pmProgress/components/chart/components/layers/SliceFillColor.d.ts

@@ -9,6 +9,6 @@ type SliceFillColorProps = {
     borderColor?: string;
     borderWidth?: number;
 };
-export declare const SliceFillColor: ({ clipPathId, shapeSvg, fillSvg, fillBorderSvg, color, percent, borderColor, borderWidth, }: SliceFillColorProps) => React.JSX.Element | null;
+export declare const SliceFillColor: React.MemoExoticComponent<({ clipPathId, shapeSvg, fillSvg, fillBorderSvg, color, percent, borderColor, borderWidth, }: SliceFillColorProps) => React.JSX.Element | null>;
 export {};
 //# sourceMappingURL=SliceFillColor.d.ts.map

package/dist/typescript/module/features/pmProgress/components/chart/components/layers/SliceFillColor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SliceFillColor.d.ts","sourceRoot":"","sources":["../../../../../../../../../src/features/pmProgress/components/chart/components/layers/SliceFillColor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,cAAc,gGASxB,mBAAmB,6BAmCrB,CAAA"}
+{"version":3,"file":"SliceFillColor.d.ts","sourceRoot":"","sources":["../../../../../../../../../src/features/pmProgress/components/chart/components/layers/SliceFillColor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAA;AAInC,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,cAAc,0HASxB,mBAAmB,8BAmCpB,CAAA"}

package/dist/typescript/module/features/pmProgress/components/chart/model/SliceShapeGenerator.d.ts

@@ -5,9 +5,9 @@ export declare class SliceShapeGenerator {
     private readonly d3Pie;
     constructor(config: PieChartManagerConfig);
     generateSlices(data: SliceInputData[]): SliceShape[];
-    generateSlicePath(slice: SliceShape): string;
-    generateFillPath(slice: SliceShape): string;
-    generateFillBorderPath(slice: SliceShape): string;
+    private buildShapePath;
+    private buildFillPath;
+    private buildFillBorderPath;
     private getFillRadius;
     private getInnerRadius;
     private getCornerRadius;

package/dist/typescript/module/features/pmProgress/components/chart/model/SliceShapeGenerator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SliceShapeGenerator.d.ts","sourceRoot":"","sources":["../../../../../../../../src/features/pmProgress/components/chart/model/SliceShapeGenerator.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAEvF,qBAAa,mBAAmB;IAMlB,OAAO,CAAC,QAAQ,CAAC,MAAM;IALnC,OAAO,CAAC,WAAW,CAAI;IACvB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAET;gBAEgB,MAAM,EAAE,qBAAqB;IAEnD,cAAc,CAAC,IAAI,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE;IAepD,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM;IAI5C,gBAAgB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM;IAmB3C,sBAAsB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM;IAOxD,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,eAAe;IAKvB,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,QAAQ;CAejB"}
+{"version":3,"file":"SliceShapeGenerator.d.ts","sourceRoot":"","sources":["../../../../../../../../src/features/pmProgress/components/chart/model/SliceShapeGenerator.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAIvF,qBAAa,mBAAmB;IAMlB,OAAO,CAAC,QAAQ,CAAC,MAAM;IALnC,OAAO,CAAC,WAAW,CAAI;IACvB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAET;gBAEgB,MAAM,EAAE,qBAAqB;IAEnD,cAAc,CAAC,IAAI,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE;IAwB3D,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,eAAe;IAKvB,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,QAAQ;CAejB"}

package/dist/typescript/module/features/pmProgress/components/standard/StandardTag.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
 import { PmProgressModel } from '@magmamath/students-features';
 type StandardTagProps = {
-    skillId: string;
     model: PmProgressModel;
+    skillId: string;
+    style?: StyleProp<ViewStyle>;
 };
-export declare const StandardTag: ({ skillId, model }: StandardTagProps) => React.JSX.Element | null;
+export declare const StandardTag: ({ model, skillId, style }: StandardTagProps) => React.JSX.Element | null;
 export {};
 //# sourceMappingURL=StandardTag.d.ts.map

package/dist/typescript/module/features/pmProgress/components/standard/StandardTag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StandardTag.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/pmProgress/components/standard/StandardTag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAgH9D,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,eAAe,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,WAAW,uBAAwB,gBAAgB,6BA6B/D,CAAA"}
+{"version":3,"file":"StandardTag.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/pmProgress/components/standard/StandardTag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAA0B,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAiH9D,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,eAAe,CAAA;IACtB,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,WAAW,8BAA+B,gBAAgB,6BAqCtE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "1.3.24",
+  "version": "1.3.25-rc.0",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",
@@ -19,7 +19,7 @@
     "pull-translations": "node scripts/pullTranslations.mjs"
   },
   "peerDependencies": {
-    "@magmamath/frontend-config": ">=1.3.5",
+    "@magmamath/frontend-config": ">=1.2.0",
     "@magmamath/react-native-draw-board": "*",
     "@magmamath/react-native-ui": "*",
     "@magmamath/students-qa": "*",
@@ -44,7 +44,7 @@
     "react-i18next": ">=15"
   },
   "devDependencies": {
-    "@magmamath/frontend-config": "1.3.5",
+    "@magmamath/frontend-config": "1.3.2",
     "@magmamath/react-native-draw-board": "1.8.2",
     "@magmamath/react-native-ui": "0.4.83",
     "@magmamath/students-qa": "0.1.0",

package/src/features/keyboard/constants/groups/currency.constants.ts

@@ -14,7 +14,4 @@ export const KEYBOARD_CURRENCY: Record<string, KeyboardGroup> = {
   EURO_DOLLAR_POUND: {
     keys: [MATH_CURRENCY_UNITS.EURO, MATH_CURRENCY_UNITS.DOLLAR, MATH_CURRENCY_UNITS.POUND],
   },
-  ZLOTY_GROSZ: {
-    keys: [MATH_CURRENCY_UNITS.ZLOTY, MATH_CURRENCY_UNITS.GROSZ],
-  },
 }

package/src/features/keyboard/constants/keyboard.helpers.ts

@@ -99,7 +99,6 @@ const CURRENCY_MAP: Record<KeyboardCurrencyVariant, KeyboardGroup> = {
   [KeyboardCurrencyVariant.POUND_PENCE]: KEYBOARD_CURRENCY.POUND_PENCE,
   [KeyboardCurrencyVariant.KRONE_EURO_POUND]: KEYBOARD_CURRENCY.KRONE_EURO_POUND,
   [KeyboardCurrencyVariant.EURO_DOLLAR_POUND]: KEYBOARD_CURRENCY.EURO_DOLLAR_POUND,
-  [KeyboardCurrencyVariant.ZLOTY_GROSZ]: KEYBOARD_CURRENCY.ZLOTY_GROSZ,
 }
 
 const TIME_MAP: Record<KeyboardTimeVariant, KeyboardGroup> = {

package/src/features/keyboard/constants/keys/units.constants.tsx

@@ -8,8 +8,6 @@ import { PoundIcon } from '../../../../shared/icons/keyboard/PoundIcon'
 import { YenIcon } from '../../../../shared/icons/keyboard/YenIcon'
 import { PesoIcon } from '../../../../shared/icons/keyboard/PesoIcon'
 import { CentIcon } from '../../../../shared/icons/keyboard/CentIcon'
-import { ZlotyIcon } from '../../../../shared/icons/keyboard/ZlotyIcon'
-import { GroszIcon } from '../../../../shared/icons/keyboard/GroszIcon'
 
 export const MATH_CURRENCY_UNITS: MathOperatorsGroup = {
   KRONE: {
@@ -48,16 +46,6 @@ export const MATH_CURRENCY_UNITS: MathOperatorsGroup = {
     mathliveValue: '¢',
     katexValue: '¢',
   },
-  ZLOTY: {
-    icon: <ZlotyIcon {...DEFAULT_KEY_ICON_PROPS} />,
-    mathliveValue: '\\mathrm{zł}',
-    katexValue: 'zł',
-  },
-  GROSZ: {
-    icon: <GroszIcon {...DEFAULT_KEY_ICON_PROPS} />,
-    mathliveValue: '\\mathrm{gr}',
-    katexValue: 'gr',
-  },
 } as const
 
 export const MATH_LENGTH_UNITS: MathOperatorsGroup = {

package/src/features/pmProgress/components/chart/chart.types.ts

@@ -14,6 +14,9 @@ export type SliceShape = {
   backgroundColor: string
   fillColor: string
   borderColor: string
+  shapeSvg: string
+  fillSvg: string
+  fillBorderSvg: string
   data: SliceInputData
 }
 

package/src/features/pmProgress/components/chart/components/PracticeProgressPieChart.tsx

@@ -23,7 +23,7 @@ export const PracticeProgressPieChart = memo(({ data, config }: PracticeProgress
     <View>
       <Svg width={config.size} height={config.size}>
         <G x={center.x} y={center.y}>
-          <SlicesClipPaths slices={slices} pieChartManager={pieChartManager} />
+          <SlicesClipPaths slices={slices} />
           <SlicesPaths slices={slices} pieChartManager={pieChartManager} config={config} />
         </G>
       </Svg>

package/src/features/pmProgress/components/chart/components/SlicesClipPaths.tsx

@@ -1,22 +1,31 @@
-import React from 'react'
+import React, { memo } from 'react'
 import { ClipPath, Defs, Path } from 'react-native-svg'
 import { getSliceClipId } from '../chart.helpers'
 import type { SliceShape } from '../chart.types'
-import type { PieChartManager } from '../model/PieChartManager'
 
 type SlicesClipPathsProps = {
   slices: SliceShape[]
-  pieChartManager: PieChartManager
 }
 
-export const SlicesClipPaths = ({ slices, pieChartManager }: SlicesClipPathsProps) => {
+export const SlicesClipPaths = ({ slices }: SlicesClipPathsProps) => {
   return (
     <Defs>
       {slices.map((slice) => (
-        <ClipPath key={slice.index} id={getSliceClipId(slice.index)}>
-          <Path d={pieChartManager.shape.generateSlicePath(slice)} />
-        </ClipPath>
+        <SliceClipPath key={slice.index} index={slice.index} shapeSvg={slice.shapeSvg} />
       ))}
     </Defs>
   )
 }
+
+type SliceClipPathProps = {
+  index: number
+  shapeSvg: string
+}
+
+const SliceClipPath = memo(({ index, shapeSvg }: SliceClipPathProps) => {
+  return (
+    <ClipPath id={getSliceClipId(index)}>
+      <Path d={shapeSvg} />
+    </ClipPath>
+  )
+})

package/src/features/pmProgress/components/chart/components/SlicesPaths.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo, useCallback } from 'react'
 import { Platform, StyleSheet, ViewStyle } from 'react-native'
 import { G, Path } from 'react-native-svg'
 import { useUnit } from 'effector-react'
@@ -28,58 +28,102 @@ export const SlicesPaths = ({ slices, pieChartManager, config }: SlicesPathsProp
     ? domains.findIndex(({ domainId }) => domainId === highlightedId)
     : null
 
+  const expand = useCallback(
+    (domainId: string) => model.highlight.expand(domainId),
+    [model],
+  )
+  const hover = useCallback(
+    (domainId: string | null) => model.highlight.hover(domainId),
+    [model],
+  )
+
   return (
     <>
-      {slices.map((slice) => {
-        const id = `${slice.index}`
-        const shapeSvg = pieChartManager.shape.generateSlicePath(slice)
-        const fillSvg = pieChartManager.shape.generateFillPath(slice)
-        const fillBorderSvg = pieChartManager.shape.generateFillBorderPath(slice)
-        const isHighlighted = highlightedIndex === slice.index
-        const translateY = isHighlighted ? -config.pressOffset : 0
-        const borderWidth = isHighlighted ? config.borderWidth : 0
-        const domainId = domains[slice.index]?.domainId
-
-        return (
-          <G
-            key={id}
-            style={styles.container}
-            onPress={() => domainId && model.highlight.expand(domainId)}
-            onMouseEnter={() => domainId && model.highlight.hover(domainId)}
-            onMouseLeave={() => model.highlight.hover(null)}
-          >
-            <Path d={shapeSvg} fill="transparent" />
-            <G style={styles.visual} transform={`translate(0, ${translateY})`}>
-              <SliceBackgroundColor
-                path={shapeSvg}
-                color={isHighlighted ? config.colors.highlightedBackground : slice.backgroundColor}
-              />
-
-              <SliceFillColor
-                clipPathId={id}
-                shapeSvg={shapeSvg}
-                fillSvg={fillSvg}
-                fillBorderSvg={fillBorderSvg}
-                color={slice.fillColor}
-                percent={slice.fillPercent}
-                borderColor={isHighlighted ? slice.borderColor : undefined}
-                borderWidth={borderWidth}
-              />
-
-              <SliceArcPattern
-                clipPathId={id}
-                slice={slice}
-                config={config}
-                pieChartManager={pieChartManager}
-              />
-            </G>
-          </G>
-        )
-      })}
+      {slices.map((slice) => (
+        <SliceItem
+          key={slice.index}
+          slice={slice}
+          isHighlighted={highlightedIndex === slice.index}
+          domainId={domains[slice.index]?.domainId}
+          pieChartManager={pieChartManager}
+          config={config}
+          onExpand={expand}
+          onHover={hover}
+        />
+      ))}
     </>
   )
 }
 
+type SliceItemProps = {
+  slice: SliceShape
+  isHighlighted: boolean
+  domainId: string | undefined
+  pieChartManager: PieChartManager
+  config: PieChartManagerConfig
+  onExpand: (domainId: string) => void
+  onHover: (domainId: string | null) => void
+}
+
+const SliceItem = memo(
+  ({
+    slice,
+    isHighlighted,
+    domainId,
+    pieChartManager,
+    config,
+    onExpand,
+    onHover,
+  }: SliceItemProps) => {
+    const id = `${slice.index}`
+    const translateY = isHighlighted ? -config.pressOffset : 0
+    const borderWidth = isHighlighted ? config.borderWidth : 0
+
+    const expandSlice = () => {
+      if (domainId) onExpand(domainId)
+    }
+    const hoverSlice = () => {
+      if (domainId) onHover(domainId)
+    }
+    const clearHover = () => onHover(null)
+
+    return (
+      <G
+        style={styles.container}
+        onPress={expandSlice}
+        onMouseEnter={hoverSlice}
+        onMouseLeave={clearHover}
+      >
+        <Path d={slice.shapeSvg} fill="transparent" />
+        <G style={styles.visual} transform={`translate(0, ${translateY})`}>
+          <SliceBackgroundColor
+            path={slice.shapeSvg}
+            color={isHighlighted ? config.colors.highlightedBackground : slice.backgroundColor}
+          />
+
+          <SliceFillColor
+            clipPathId={id}
+            shapeSvg={slice.shapeSvg}
+            fillSvg={slice.fillSvg}
+            fillBorderSvg={slice.fillBorderSvg}
+            color={slice.fillColor}
+            percent={slice.fillPercent}
+            borderColor={isHighlighted ? slice.borderColor : undefined}
+            borderWidth={borderWidth}
+          />
+
+          <SliceArcPattern
+            clipPathId={id}
+            slice={slice}
+            config={config}
+            pieChartManager={pieChartManager}
+          />
+        </G>
+      </G>
+    )
+  },
+)
+
 const styles = StyleSheet.create({
   container: {
     ...Platform.select({ web: { cursor: 'pointer' } as ViewStyle }),

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import { G, Path } from 'react-native-svg'
 import { getSliceClipId } from '../../chart.helpers'
 import type { PieChartManagerConfig, SliceShape } from '../../chart.types'
@@ -11,7 +11,7 @@ type SliceArcPatternProps = {
   config: PieChartManagerConfig
 }
 
-export const SliceArcPattern = ({
+export const SliceArcPattern = memo(({
   clipPathId,
   slice,
   pieChartManager,
@@ -41,4 +41,4 @@ export const SliceArcPattern = ({
       })}
     </G>
   )
-}
+})

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import { Path } from 'react-native-svg'
 
 type BackgroundLayerProps = {
@@ -6,6 +6,6 @@ type BackgroundLayerProps = {
   color: string
 }
 
-export const SliceBackgroundColor = ({ path, color }: BackgroundLayerProps) => {
+export const SliceBackgroundColor = memo(({ path, color }: BackgroundLayerProps) => {
   return <Path d={path} fill={color} />
-}
+})

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import { ClipPath, Defs, G, Path } from 'react-native-svg'
 import { getSliceClipId } from '../../chart.helpers'
 
@@ -13,7 +13,7 @@ type SliceFillColorProps = {
   borderWidth?: number
 }
 
-export const SliceFillColor = ({
+export const SliceFillColor = memo(({
   clipPathId,
   shapeSvg,
   fillSvg,
@@ -57,4 +57,4 @@ export const SliceFillColor = ({
       </G>
     </>
   )
-}
+})

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

@@ -1,6 +1,8 @@
 import { arc, pie } from 'd3-shape'
 import type { PieChartManagerConfig, SliceInputData, SliceShape } from '../chart.types'
 
+type SliceGeometry = Pick<SliceShape, 'startAngle' | 'endAngle' | 'fillPercent'>
+
 export class SliceShapeGenerator {
   private innerRadius = 0
   private readonly d3Pie = pie<SliceInputData>()
@@ -12,23 +14,32 @@ export class SliceShapeGenerator {
   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,
-    }))
+    return this.d3Pie(data).map((datum, index) => {
+      const base = {
+        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,
+      }
+
+      return {
+        ...base,
+        shapeSvg: this.buildShapePath(base),
+        fillSvg: this.buildFillPath(base),
+        fillBorderSvg: this.buildFillBorderPath(base),
+      }
+    })
   }
 
-  public generateSlicePath(slice: SliceShape): string {
+  private buildShapePath(slice: SliceGeometry): string {
     return this.buildArc(slice, this.config.outerRadius, this.getCornerRadius(100))
   }
 
-  public generateFillPath(slice: SliceShape): string {
+  private buildFillPath(slice: SliceGeometry): string {
     const fillRadius = this.getFillRadius(slice)
     const cornerRadius = this.getCornerRadius(slice.fillPercent)
 
@@ -47,14 +58,14 @@ export class SliceShapeGenerator {
     }) as string
   }
 
-  public generateFillBorderPath(slice: SliceShape): string {
+  private buildFillBorderPath(slice: SliceGeometry): string {
     const fillRadius = this.getFillRadius(slice)
     const cornerRadius = this.getCornerRadius(slice.fillPercent)
     return this.buildArc(slice, fillRadius, cornerRadius)
   }
 
 
-  private getFillRadius(slice: SliceShape): number {
+  private getFillRadius(slice: SliceGeometry): number {
     return this.innerRadius + (this.config.outerRadius - this.innerRadius) * (slice.fillPercent / 100)
   }
 
@@ -72,7 +83,7 @@ export class SliceShapeGenerator {
     return this.config.gapBetweenSlices / this.config.outerRadius
   }
 
-  private buildArc(slice: SliceShape, outerRadius: number, cornerRadius: number): string {
+  private buildArc(slice: SliceGeometry, outerRadius: number, cornerRadius: number): string {
     const innerRadius = this.innerRadius
 
     return arc()

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

@@ -131,9 +131,9 @@ const styles = StyleSheet.create({
   },
   menu: {
     top: SPACING[100],
-    minWidth: 110,
+    minWidth: 120,
     overflow: 'scroll',
-    maxHeight: MENU_MAX_HEIGHT,
+    maxHeight: isWeb ? MENU_MAX_HEIGHT : 490,
     ...Platform.select({ web: { scrollbarWidth: 'none' } }),
   },
 })

package/src/features/pmProgress/components/standard/StandardTag.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
-import { StyleSheet, View, Text } from 'react-native'
+import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native'
 import { PmProgressModel } from '@magmamath/students-features'
 import { SliceDiamondIcon } from '../../../../shared/icons/SliceDiamondIcon'
-import { COLORS, FONT_FAMILY, SHADOWS } from '@magmamath/react-native-ui'
+import { BORDER_RADIUS, COLORS, FONT_FAMILY, SHADOWS, SPACING } from '@magmamath/react-native-ui'
 import { useStoreMap } from 'effector-react'
 import { isWeb } from '../../../../shared/common.constants'
+import { findDomainBySkillId } from '../../shared/pmProgress.helpers'
 
 type ColorPreset = {
   background: string
@@ -113,36 +114,45 @@ const DOMAIN_COLOR_PRESETS: Record<string, ColorPreset> = {
 }
 
 type StandardTagProps = {
-  skillId: string
   model: PmProgressModel
+  skillId: string
+  style?: StyleProp<ViewStyle>
 }
 
-export const StandardTag = ({ skillId, model }: StandardTagProps) => {
+export const StandardTag = ({ model, skillId, style }: StandardTagProps) => {
   const standardInfo = useStoreMap({
-    store: model.tree.$domainsInGrade,
+    store: model.tree.$domains,
     keys: [skillId],
-    fn: (domains, [skillId]) => {
-      const domain = domains.find((d) => d.standards.some((s) => s.skillIds.includes(skillId)))
-      const standard = domain?.standards.find(({ skillIds }) => skillIds.includes(skillId))
-      if (!standard || !domain) return null
+    fn: (domainsByGrade, [skillId]) => {
+      const allDomains = Object.values(domainsByGrade).flat()
+      const domain = findDomainBySkillId(skillId, allDomains)
+      if (!domain) return null
+
+      const standard = domain.standards.find(({ skillIds }) => skillIds.includes(skillId))
+      if (!standard) return null
       return { title: standard.title, tag: standard.subtitle, color: domain.color }
     },
   })
 
   if (!standardInfo) return null
 
+  const hasStandardTag = !!standardInfo.tag
+  const isTagDifferentFromTitle = standardInfo.title !== standardInfo.tag
+
   const preset = DOMAIN_COLOR_PRESETS[standardInfo.color]
 
   return (
-    <View style={[styles.container, { backgroundColor: preset.background }]}>
+    <View style={[styles.container, { backgroundColor: preset.background }, style]}>
       <SliceDiamondIcon color={preset.tagColor} />
       <View style={styles.textContainer}>
         <Text numberOfLines={2} style={[styles.title, { color: preset.titleColor }]}>
           {standardInfo.title}
         </Text>
-        <Text numberOfLines={1} style={[styles.tag, { color: preset.tagColor }]}>
-          {standardInfo.tag}
-        </Text>
+        {hasStandardTag && isTagDifferentFromTitle && (
+          <Text numberOfLines={1} style={[styles.tag, { color: preset.tagColor }]}>
+            {standardInfo.tag}
+          </Text>
+        )}
       </View>
     </View>
   )
@@ -150,14 +160,14 @@ export const StandardTag = ({ skillId, model }: StandardTagProps) => {
 
 const styles = StyleSheet.create({
   container: {
-    minWidth: 110,
+    minWidth: 120,
     maxWidth: isWeb ? 350 : 280,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 12,
+    paddingHorizontal: SPACING[200],
+    paddingVertical: SPACING[100],
+    borderRadius: BORDER_RADIUS[300],
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 8,
+    gap: SPACING[200],
     alignSelf: 'flex-start',
     ...SHADOWS[1],
   },

package/dist/commonjs/shared/icons/keyboard/GroszIcon.js

@@ -1,34 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GroszIcon = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const GroszIcon = ({
-  size = 20,
-  color
-}) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
-    width: size,
-    height: size,
-    viewBox: "0 0 16 16",
-    fill: "none",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Text, {
-      x: "8",
-      y: "12",
-      fill: color,
-      fontSize: "10",
-      fontWeight: "600",
-      textAnchor: "middle",
-      children: "gr"
-    })
-  });
-};
-exports.GroszIcon = GroszIcon;
-//# sourceMappingURL=GroszIcon.js.map

package/dist/commonjs/shared/icons/keyboard/GroszIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNativeSvg","_interopRequireWildcard","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","GroszIcon","size","color","jsx","width","height","viewBox","fill","children","Text","x","y","fontSize","fontWeight","textAnchor","exports"],"sourceRoot":"../../../../../src","sources":["shared/icons/keyboard/GroszIcon.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,eAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAuD,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAd,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAI,UAAA,GAAAJ,CAAA,KAAAK,OAAA,EAAAL,CAAA;AAEhD,MAAMmB,SAAS,GAAGA,CAAC;EAAEC,IAAI,GAAG,EAAE;EAAEC;AAAiB,CAAC,KAAK;EAC5D,oBACE,IAAAvB,WAAA,CAAAwB,GAAA,EAAC1B,eAAA,CAAAS,OAAG;IAACkB,KAAK,EAAEH,IAAK;IAACI,MAAM,EAAEJ,IAAK;IAACK,OAAO,EAAC,WAAW;IAACC,IAAI,EAAC,MAAM;IAAAC,QAAA,eAC7D,IAAA7B,WAAA,CAAAwB,GAAA,EAAC1B,eAAA,CAAAgC,IAAO;MACNC,CAAC,EAAC,GAAG;MACLC,CAAC,EAAC,IAAI;MACNJ,IAAI,EAAEL,KAAM;MACZU,QAAQ,EAAC,IAAI;MACbC,UAAU,EAAC,KAAK;MAChBC,UAAU,EAAC,QAAQ;MAAAN,QAAA,EACpB;IAED,CAAS;EAAC,CACP,CAAC;AAEV,CAAC;AAAAO,OAAA,CAAAf,SAAA,GAAAA,SAAA","ignoreList":[]}