@magmamath/students-features 1.3.4-rc.2 → 1.3.4

package/dist/typescript/module/shared/translation/model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/model.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAGlD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cACD,OAAO,oBAAoB,KAAK,YAAY,EACpE,CAAA;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMzB,CAAA"}
+{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/model.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAGlD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cACD,OAAO,oBAAoB,KAAK,YAAY,EACpE,CAAA;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMzB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "1.3.4-rc.2",
+  "version": "1.3.4",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",
@@ -18,52 +18,60 @@
     "release": "release-it"
   },
   "peerDependencies": {
-    "@magmamath/frontend-config": "1.1.0",
+    "@magmamath/frontend-config": "1.1.3",
     "@magmamath/react-native-ui": "*",
+    "@matteappen/skills-utils": "^3.7.1",
+    "@react-native-masked-view/masked-view": "*",
+    "d3-shape": "3.2.0",
     "effector": "^23.2.3",
+    "effector-action": "^1.2.2",
     "effector-react": "^23.2.1",
+    "effector-storage": "^8.0.0",
+    "expo": ">=52.0.47",
+    "expo-audio": "^1.1.1",
     "patronum": "^2.3.0",
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": "*",
+    "react-native-linear-gradient": "*",
     "react-native-modalfy": "*",
     "react-native-reanimated": ">=0.3.16",
-    "react-native-svg": "^15.10.0",
-    "expo-audio": "^1.1.1",
-    "expo": ">=52.0.47",
-    "@react-native-masked-view/masked-view": "*",
-    "react-native-linear-gradient": "*"
+    "react-native-svg": "^15.10.0"
   },
   "devDependencies": {
+    "@magmamath/frontend-config": "1.1.3",
     "@magmamath/react-native-ui": "0.4.83",
-    "@magmamath/frontend-config": "1.1.0",
+    "@matteappen/skills-utils": "^3.7.1",
+    "@react-native-masked-view/masked-view": "^0.3.2",
     "@react-native/eslint-config": "^0.73.1",
     "@release-it/conventional-changelog": "^9.0.2",
+    "@types/d3-shape": "3.1.7",
     "@types/jest": "^29.5.5",
     "@types/react": "^18.2.44",
+    "axios": "^1.13.5",
     "del-cli": "^5.1.0",
     "effector": "^23.2.3",
+    "effector-action": "1.2.2",
     "effector-react": "^23.2.1",
+    "effector-storage": "^8.0.0",
     "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
     "expo": "^52.0.47",
     "expo-audio": "^1.1.1",
     "jest": "^29.7.0",
-    "prettier": "^3.0.3",
     "patronum": "^2.3.0",
+    "prettier": "^3.0.3",
     "react": "18.3.1",
     "react-native": "0.76.3",
     "react-native-builder-bob": "^0.33.3",
     "react-native-gesture-handler": "^2.28.0",
+    "react-native-linear-gradient": "^2.8.3",
     "react-native-modalfy": "^3.7.0",
     "react-native-reanimated": "^3.17.2",
     "react-native-svg": "^15.10.0",
     "release-it": "^17.10.0",
-    "typescript": "^5.2.2",
-    "axios": "^1.13.5",
-    "@react-native-masked-view/masked-view": "^0.3.2",
-    "react-native-linear-gradient": "^2.8.3"
+    "typescript": "^5.2.2"
   },
   "resolutions": {
     "@types/react": "^18.2.44"

package/src/features/chatbot/components/ChatInput/ChatInput.tsx

@@ -6,6 +6,7 @@ import { useChatModel } from '../../context/ChatBotModelContext'
 import { ColorScheme } from '../../types/style.types'
 import { HintButtonVariant, RequestHintButton } from './RequestHintButton'
 import { FreeTextInputBlock } from './FreeText/FreeTextInputBlock'
+import { SPACING } from '@magmamath/react-native-ui'
 
 export type ChatInputProps = {
   hasMessages: boolean
@@ -82,6 +83,6 @@ const styles = StyleSheet.create({
     width: INPUT_WIDTH,
     alignItems: 'flex-end',
     justifyContent: 'center',
-    marginLeft: 6,
+    marginLeft: SPACING[150],
   },
 })

package/src/features/chatbot/components/ChatMessage/MessageContent.tsx

@@ -8,6 +8,7 @@ import { ColorScheme } from '../../types/style.types'
 import { MessageButtonsBlock } from './MessageButtonsBlock'
 import { getSpacerSize } from './helpers'
 import { MessageVariant } from '../../types/model.types'
+import { FONT_FAMILY } from '@magmamath/react-native-ui'
 
 type MessageContentProps = {
   text: string
@@ -100,7 +101,7 @@ const styles = StyleSheet.create({
     flex: 1,
     fontSize: 20,
     fontWeight: 400,
-    fontFamily: 'Buenos Aires',
+    fontFamily: FONT_FAMILY.buenosAires,
     color: '#33334D',
     width: '100%',
   },

package/src/features/endOfAssignment/components/AssessmentScoreCard/AssessmentScoreCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
-import { BORDER_RADIUS, COLORS, SHADOWS, SPACING } from '@magmamath/react-native-ui'
+import { BORDER_RADIUS, COLORS, FONT_FAMILY, SHADOWS, SPACING } from '@magmamath/react-native-ui'
 import { EOAModalText } from '@magmamath/students-features'
 
 type AssessmentScoreCardProps = {
@@ -38,6 +38,6 @@ const styles = StyleSheet.create({
     fontSize: 96,
     fontWeight: '700',
     color: COLORS.NEUTRAL_9,
-    fontFamily: 'Buenos Aires',
+    fontFamily: FONT_FAMILY.buenosAires,
   },
 })

package/src/features/pmProgress/PmProgress.tsx

@@ -0,0 +1,30 @@
+import React, { memo } from 'react'
+import { View, StyleSheet } from 'react-native'
+import { useGate } from 'effector-react'
+import { PmProgressHeader } from './components/header/PmProgressHeader'
+import { PmProgressContextValue, PmProgressProvider } from './context/PmProgressContext'
+import { User } from './shared/pmProgress.types'
+import { PmProgressContent } from './components/content/PmContent'
+
+type PmProgressProps = { user: User } & PmProgressContextValue
+
+export const PmProgress = memo(({ model, user, ...props }: PmProgressProps) => {
+  useGate(model.gate, { user })
+
+  return (
+    <PmProgressProvider value={{ model, ...props }}>
+      <View style={styles.container}>
+        <PmProgressHeader />
+        <PmProgressContent />
+      </View>
+    </PmProgressProvider>
+  )
+})
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    overflow: 'hidden',
+    height: '100%',
+  },
+})

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

@@ -0,0 +1,16 @@
+export const getSliceClipId = (index: number | string) => `slice-clip-${index}`
+
+export const dynamicInnerRadius = (sliceCount: number): number => {
+  if (sliceCount >= 5) return 14
+  if (sliceCount === 4) return 8
+  if (sliceCount === 3) return 6
+  if (sliceCount === 2) return 4
+  if (sliceCount === 1) return 0
+  return 30
+}
+
+export const dynamicCornerRadius = (fillPercent: number): number => {
+  if (fillPercent >= 30) return 8
+  if (fillPercent >= 5) return 6
+  return 4
+}

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

@@ -0,0 +1,37 @@
+export type SliceInputData = {
+  value: number
+  fillPercent?: number
+  backgroundColor?: string
+  fillColor: string
+  borderColor: string
+}
+
+export type SliceShape = {
+  index: number
+  startAngle: number
+  endAngle: number
+  fillPercent: number
+  backgroundColor: string
+  fillColor: string
+  borderColor: string
+  data: SliceInputData
+}
+
+export type PieChartManagerConfig = {
+  size: number
+  outerRadius: number
+  innerRadius: number | ((sliceCount: number) => number)
+  cornerRadius: number | ((fillPercent: number) => number)
+  gapBetweenSlices: number
+  borderWidth: number
+  pressOffset: number
+  outerArc: {
+    color: string
+    strokeWidth: number
+    dashWidth: number
+  }
+  colors: {
+    background: string
+    highlightedBackground: string
+  }
+}

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

@@ -0,0 +1,32 @@
+import React, { memo, useMemo } from 'react'
+import { StyleSheet, View } from 'react-native'
+import Svg, { G } from 'react-native-svg'
+import { PieChartManager } from '../model/PieChartManager'
+import { SlicesClipPaths } from './SlicesClipPaths'
+import { SlicesPaths } from './SlicesPaths'
+import type { PieChartManagerConfig, SliceInputData } from '../chart.types'
+
+type PracticeProgressPieChartProps = {
+  data: SliceInputData[]
+  config: PieChartManagerConfig
+}
+
+export const PracticeProgressPieChart = memo(({ data, config }: PracticeProgressPieChartProps) => {
+  const pieChartManager = useMemo(() => new PieChartManager(config), [config])
+  const center = pieChartManager.getCenter()
+
+  const slices = useMemo(() => {
+    return pieChartManager.shape.generateSlices(data)
+  }, [data, pieChartManager])
+
+  return (
+    <View>
+      <Svg width={config.size} height={config.size}>
+        <G x={center.x} y={center.y}>
+          <SlicesClipPaths slices={slices} pieChartManager={pieChartManager} />
+          <SlicesPaths slices={slices} pieChartManager={pieChartManager} config={config} />
+        </G>
+      </Svg>
+    </View>
+  )
+})

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

@@ -0,0 +1,22 @@
+import React 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) => {
+  return (
+    <Defs>
+      {slices.map((slice) => (
+        <ClipPath key={slice.index} id={getSliceClipId(slice.index)}>
+          <Path d={pieChartManager.shape.generateSlicePath(slice)} />
+        </ClipPath>
+      ))}
+    </Defs>
+  )
+}

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

@@ -0,0 +1,90 @@
+import React from 'react'
+import { Platform, StyleSheet, ViewStyle } from 'react-native'
+import { G, Path } from 'react-native-svg'
+import { useUnit } from 'effector-react'
+import { SliceBackgroundColor } from './layers/SliceBackgroundColor'
+import { SliceFillColor } from './layers/SliceFillColor'
+import { SliceArcPattern } from './layers/SliceArcPattern'
+import { usePmProgress } from '../../../context/PmProgressContext'
+import type { PieChartManagerConfig, SliceShape } from '../chart.types'
+import type { PieChartManager } from '../model/PieChartManager'
+
+type SlicesPathsProps = {
+  slices: SliceShape[]
+  pieChartManager: PieChartManager
+  config: PieChartManagerConfig
+}
+
+export const SlicesPaths = ({ slices, pieChartManager, config }: SlicesPathsProps) => {
+  const { model } = usePmProgress()
+  const [hoveredId, expandedId, domains] = useUnit([
+    model.highlight.$hoveredId,
+    model.highlight.$expandedId,
+    model.tree.$domains,
+  ])
+
+  const highlightedId = hoveredId ?? expandedId
+  const highlightedIndex = highlightedId
+    ? domains.findIndex(({ domainId }) => domainId === highlightedId)
+    : null
+
+  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>
+        )
+      })}
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...Platform.select({ web: { cursor: 'pointer' } as ViewStyle }),
+  },
+  visual: {
+    ...Platform.select({ web: { transition: 'transform 0.1s ease-in-out' } as ViewStyle }),
+  },
+})

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

@@ -0,0 +1,44 @@
+import React from 'react'
+import { G, Path } from 'react-native-svg'
+import { getSliceClipId } from '../../chart.helpers'
+import type { PieChartManagerConfig, SliceShape } from '../../chart.types'
+import type { PieChartManager } from '../../model/PieChartManager'
+
+type SliceArcPatternProps = {
+  clipPathId: string
+  slice: SliceShape
+  pieChartManager: PieChartManager
+  config: PieChartManagerConfig
+}
+
+export const SliceArcPattern = ({
+  clipPathId,
+  slice,
+  pieChartManager,
+  config,
+}: SliceArcPatternProps) => {
+  const patternSizes = pieChartManager.pattern.getPatternTrackSizes()
+
+  return (
+    <G clipPath={`url(#${getSliceClipId(clipPathId)})`}>
+      {patternSizes.map((radius, rowIndex) => {
+        const arcPath = pieChartManager.pattern.generateArcPath(slice, radius)
+        const dashWidth = pieChartManager.pattern.getDashWidthForRadius(radius)
+        const dashOffset = pieChartManager.pattern.getDashOffset(rowIndex, radius)
+
+        return (
+          <Path
+            key={rowIndex}
+            d={arcPath}
+            fill="none"
+            stroke={config.outerArc.color}
+            strokeWidth={config.outerArc.strokeWidth}
+            strokeDasharray={[dashWidth, dashWidth]}
+            strokeDashoffset={dashOffset}
+            strokeLinecap="butt"
+          />
+        )
+      })}
+    </G>
+  )
+}

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

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

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

@@ -0,0 +1,60 @@
+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 = 0,
+}: SliceFillColorProps) => {
+  const isFullyFilled = percent >= 100
+  const isPartiallyFilled = percent > 0
+  const hasBorder = borderColor != null && borderWidth != null && borderWidth > 0
+
+  if (!isPartiallyFilled && !isFullyFilled) return null
+
+  const sliceClipId = getSliceClipId(clipPathId)
+  const borderClipId = `${sliceClipId}-border`
+  const fillPath = isFullyFilled ? shapeSvg : fillSvg
+
+  return (
+    <>
+      {hasBorder && (
+        <Defs>
+          <ClipPath id={borderClipId}>
+            <Path d={fillBorderSvg} />
+          </ClipPath>
+        </Defs>
+      )}
+      <G clipPath={`url(#${sliceClipId})`}>
+        <Path d={fillPath} fill={color} />
+        {hasBorder && (
+          <G clipPath={`url(#${borderClipId})`}>
+            <Path
+              d={fillBorderSvg}
+              fill="none"
+              stroke={borderColor}
+              strokeWidth={borderWidth * 2}
+            />
+          </G>
+        )}
+      </G>
+    </>
+  )
+}

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,17 @@
+import { SliceShapeGenerator } from './SliceShapeGenerator'
+import { OuterArcPatternGenerator } from './ArcPatternGenerator'
+import type { PieChartManagerConfig } from '../chart.types'
+
+export class PieChartManager {
+  public readonly shape: SliceShapeGenerator
+  public readonly pattern: OuterArcPatternGenerator
+
+  constructor(public readonly config: PieChartManagerConfig) {
+    this.shape = new SliceShapeGenerator(config)
+    this.pattern = new OuterArcPatternGenerator(config)
+  }
+
+  public getCenter() {
+    return { x: this.config.size / 2, y: this.config.size / 2 }
+  }
+}

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
+  }
+}