Initial commit/

1 files changed, 96 insertions, 0 deletions

diff --git a/frontend/app/components/charts/progessChart.js b/frontend/app/components/charts/progessChart.js
new file mode 100644
index 0000000..bd70dcf
--- /dev/null
+++ b/frontend/app/components/charts/progessChart.js
@@ -0,0 +1,96 @@
+import React from 'react';
+import { View } from 'react-native';
+import {
+  RkComponent,
+  RkText,
+  RkTheme,
+  RkStyleSheet,
+} from 'react-native-ui-kitten';
+import { VictoryPie } from 'victory-native';
+import { Svg, Text as SvgText } from 'react-native-svg';
+import { scale } from '../../utils/scale';
+
+export class ProgressChart extends RkComponent {
+  state = {
+    percents: 72,
+  };
+  size = 120;
+  fontSize = 25;
+
+  componentDidMount() {
+    this.setStateInterval = setInterval(this.updatePercent, 1500);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.setStateInterval);
+  }
+
+  updatePercent = () => {
+    let positive = Math.random() > 0.5;
+    if (this.state.percents > 95) {
+      positive = false;
+    } else if (this.state.percents < 60) {
+      positive = true;
+    }
+    this.setState({
+      percents: positive ? this.state.percents + 1 : this.state.percents - 1,
+    });
+  };
+
+  getChartData = () => [
+    { x: 1, y: this.state.percents },
+    { x: 2, y: 100 - this.state.percents },
+  ];
+
+  onChartFill = (data) => {
+    const themeColor = RkTheme.current.colors.charts.followersProgress;
+    return data.x === 1 ? themeColor : 'transparent';
+  };
+
+  render = () => (
+    <View>
+      <RkText rkType='header4'>FOLLOWERS</RkText>
+      <View style={styles.chartContainer}>
+        <Svg width={scale(this.size)} height={scale(this.size)}>
+          <VictoryPie
+            labels={[]}
+            padding={0}
+            standalone={false}
+            width={scale(this.size)}
+            height={scale(this.size)}
+            style={{ data: { fill: this.onChartFill } }}
+            data={this.getChartData()}
+            cornerRadius={scale(25)}
+            innerRadius={scale(40)}
+          />
+          <SvgText
+            textAnchor="middle"
+            verticalAnchor="middle"
+            x={scale(this.size / 2)}
+            y={scale(this.size / 2)}
+            height={scale(this.fontSize)}
+            fontSize={scale(this.fontSize)}
+            fontFamily={RkTheme.current.fonts.family.regular}
+            stroke={RkTheme.current.colors.text.base}
+            fill={RkTheme.current.colors.text.base}>
+            {`${this.state.percents}%`}
+          </SvgText>
+        </Svg>
+        <View>
+          <RkText rkType='header4'>REACH</RkText>
+          <RkText rkType='header2'>1 500 356</RkText>
+          <RkText rkType='secondary2'>+6 per day in average</RkText>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = RkStyleSheet.create(() => ({
+  chartContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    marginTop: 10,
+  },
+}));