New component - PieChart

demo/src/index.js

@@ -267,6 +267,9 @@ module.exports = {
       get Pinterest() {
         return require('./screens/realExamples/Pinterest').default;
       },
+      get PieChartScreen() {
+        return require('./screens/componentScreens/PieChartScreen.tsx').default;
+      },
       get ListActionsScreen() {
         return require('./screens/realExamples/ListActions/ListActionsScreen').default;
       },

demo/src/screens/MenuStructure.js

@@ -44,7 +44,8 @@ export const navigationData = {
         screen: 'unicorn.components.SharedTransitionScreen'
       },
       {title: 'Stack Aggregator', tags: 'stack aggregator', screen: 'unicorn.components.StackAggregatorScreen'},
-      {title: 'Marquee', tags: 'sliding text', screen: 'unicorn.components.MarqueeScreen'}
+      {title: 'Marquee', tags: 'sliding text', screen: 'unicorn.components.MarqueeScreen'},
+      {title: 'PieChart', tags: 'pie chart data', screen: 'unicorn.components.PieChartScreen'}
     ]
   },
   Form: {

demo/src/screens/componentScreens/PieChartScreen.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import {ScrollView} from 'react-native';
+import {View, PieChart, Card, Text, Badge, PieChartSegmentProps, Colors} from 'react-native-ui-lib';
+
+const SEGMENTS: PieChartSegmentProps[] = [
+  {
+    percentage: 40,
+    color: Colors.blue30
+  },
+  {
+    percentage: 30,
+    color: Colors.red30
+  },
+  {
+    percentage: 20,
+    color: Colors.green30
+  },
+  {
+    percentage: 10,
+    color: Colors.purple30
+  }
+];
+
+const MONOCHROME_SEGMENTS: PieChartSegmentProps[] = [
+  {
+    percentage: 40,
+    color: Colors.blue70
+  },
+  {
+    percentage: 30,
+    color: Colors.blue50
+  },
+  {
+    percentage: 20,
+    color: Colors.blue30
+  },
+  {
+    percentage: 10,
+    color: Colors.blue10
+  }
+];
+
+const PieChartScreen = () => {
+  const renderSegmentLabel = (segment: PieChartSegmentProps, text: string) => {
+    const {percentage, color} = segment;
+    return (
+      <View row gap-s1 marginB-s1 key={text}>
+        <Badge size={10} containerStyle={{justifyContent: 'center'}} backgroundColor={color}/>
+        <View>
+          <Text>{text}</Text>
+          <Text marginL-s1>{percentage}%</Text>
+        </View>
+      </View>
+    );
+  };
+
+  const renderPieChartCard = (segments: PieChartSegmentProps[]) => {
+    return (
+      <Card row spread paddingL-s2 paddingR-s10 paddingV-s2>
+        <View centerV>
+          <PieChart segments={segments} size={150}/>
+        </View>
+        <View height={'100%'} gap-s1>
+          {segments.map((segment, index) => renderSegmentLabel(segment, `Value ${index + 1}`))}
+        </View>
+      </Card>
+    );
+  };
+
+  return (
+    <ScrollView>
+      <View padding-page gap-s2>
+        <Text text50L marginB-s2>
+          PieChart
+        </Text>
+        {renderPieChartCard(SEGMENTS)}
+        <Text text50L marginV-s2>
+          Monochrome colors
+        </Text>
+        {renderPieChartCard(MONOCHROME_SEGMENTS)}
+      </View>
+    </ScrollView>
+  );
+};
+
+export default PieChartScreen;

demo/src/screens/componentScreens/index.js

@@ -1,5 +1,6 @@
 export function registerScreens(registrar) {
   registrar('unicorn.components.ActionSheetScreen', () => require('./ActionSheetScreen').default);
+  registrar('unicorn.components.PieChartScreen', () => require('./PieChartScreen').default);
   registrar('unicorn.components.ActionBarScreen', () => require('./ActionBarScreen').default);
   registrar('unicorn.components.AvatarsScreen', () => require('./AvatarsScreen').default);
   registrar('unicorn.components.AnimatedImageScreen', () => require('./AnimatedImageScreen').default);

src/components/piechart/PartialCircle.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import View from '../view';
+import {SvgPackage} from '../../optionalDependencies';
+const {Svg, Path} = SvgPackage;
+
+export type PartialCircleProps = {
+  percentage: number;
+  radius: number;
+  color: string;
+  startAngle?: number;
+  padding?: number;
+};
+
+const DEFAULT_DIVIDER_COLOR = '#FFFFFF';
+const DEFAULT_DIVIDER_WIDTH = 4;
+const DEFAULT_PADDING = 0;
+
+const PartialCircle = (props: PartialCircleProps) => {
+  const {percentage, radius, color, startAngle = 0, padding = DEFAULT_PADDING} = props;
+  const actualRadius = radius - padding;
+  const centerXAndY = radius;
+  const amountToCover = (percentage / 100) * 360;
+  const angleFromTop = startAngle - 90;
+
+  const startRad = (angleFromTop * Math.PI) / 180;
+  const endRad = startRad + (amountToCover * Math.PI) / 180;
+
+  const startX = centerXAndY + Math.cos(startRad) * actualRadius;
+  const startY = centerXAndY + Math.sin(startRad) * actualRadius;
+  const endX = centerXAndY + Math.cos(endRad) * actualRadius;
+  const endY = centerXAndY + Math.sin(endRad) * actualRadius;
+
+  const largeArcFlag = amountToCover > 180 ? 1 : 0;
+  const sweepFlag = 1;
+
+  const arcPath = `
+    M ${centerXAndY} ${centerXAndY}
+    L ${startX} ${startY}
+    A ${actualRadius} ${actualRadius} 0 ${largeArcFlag} ${sweepFlag} ${endX} ${endY}
+    Z
+  `;
+  const startBorderLine = `M ${centerXAndY} ${centerXAndY} L ${startX} ${startY}`;
+  const endBorderLine = `M ${centerXAndY} ${centerXAndY} L ${endX} ${endY}`;
+
+  const arc = <Path d={arcPath} fill={color}/>;
+  const borders = (
+    <Path
+      d={`${startBorderLine} ${endBorderLine}`}
+      fill="none"
+      stroke={DEFAULT_DIVIDER_COLOR}
+      strokeWidth={DEFAULT_DIVIDER_WIDTH / 2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  );
+  const totalSize = radius * 2 + padding;
+
+  return (
+    <View style={styles.container}>
+      <Svg width={totalSize} height={totalSize} viewBox={`0 0 ${totalSize} ${totalSize}`} style={styles.svg}>
+        {arc}
+        {borders}
+      </Svg>
+    </View>
+  );
+};
+
+export default PartialCircle;
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute'
+  },
+  svg: {
+    position: 'absolute'
+  }
+});

src/components/piechart/index.tsx

@@ -0,0 +1,41 @@
+import React, {useMemo} from 'react';
+import _ from 'lodash';
+import View from '../view';
+import PartialCircle, {PartialCircleProps} from './PartialCircle';
+
+export type PieChartSegmentProps = Pick<PartialCircleProps, 'percentage' | 'color'>;
+
+export type PieChartProps = {
+  segments: PieChartSegmentProps[];
+  size?: number;
+};
+
+const DEFAULT_SIZE = 144;
+
+const PieChart = (props: PieChartProps) => {
+  const {segments, size = DEFAULT_SIZE} = props;
+
+  const total = useMemo(() => {
+    return _.sum(segments.map(s => s.percentage));
+  }, [segments]);
+  if (total !== 100) {
+    throw new Error('PieChart segments must sum up to 100');
+  }
+
+  const renderPieSegments = () => {
+    let currentStartAngle = 0;
+
+    return segments.map((segment, index) => {
+      const startAngle = currentStartAngle;
+      currentStartAngle += (segment.percentage / 100) * 360;
+      return <PartialCircle key={index} {...segment} startAngle={startAngle} radius={size / 2}/>;
+    });
+  };
+  return (
+    <View width={size} height={size}>
+      {renderPieSegments()}
+    </View>
+  );
+};
+
+export default PieChart;

src/index.ts

@@ -82,6 +82,7 @@ export {default as HapticService, HapticType} from './services/HapticService';
 export {default as Hint, HintProps} from './components/hint';
 export {default as Icon, IconProps} from './components/icon';
 export {default as Image, ImageProps} from './components/image';
+export {default as PieChart, PieChartSegmentProps} from './components/piechart';
 // @ts-expect-error
 export {default as KeyboardAwareScrollView} from './components/KeyboardAwareScrollView/KeyboardAwareScrollView';
 // @ts-expect-error