From c33ffbf27d66b36d681baeac151a8ce54d69a35f Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 7 Aug 2023 11:24:37 +0300
Subject: [PATCH] Run demo of nivo/pie

---
 src/App.tsx | 242 +++++++++++++---------------------------------------
 1 file changed, 59 insertions(+), 183 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 92899866..2a425ab9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,199 +1,75 @@
- 
- 
-import {   TamaguiProvider } from 'tamagui'
 import './App.css'
-import {  Provider as StatusProvider  } from '@status-im/components'
+import { TamaguiProvider } from 'tamagui'
+import { Provider as StatusProvider } from '@status-im/components'
 import { ResponsivePie } from '@nivo/pie'
 
 import config from '../tamagui.config'
-const data  = [
-  {
-    "id": "php",
-    "label": "php",
-    "value": 127,
-    "color": "hsl(236, 70%, 50%)"
-  },
-  {
-    "id": "javascript",
-    "label": "javascript",
-    "value": 540,
-    "color": "hsl(249, 70%, 50%)"
-  },
-  {
-    "id": "java",
-    "label": "java",
-    "value": 240,
-    "color": "hsl(72, 70%, 50%)"
-  },
-  {
-    "id": "python",
-    "label": "python",
-    "value": 435,
-    "color": "hsl(122, 70%, 50%)"
-  },
-  {
-    "id": "scala",
-    "label": "scala",
-    "value": 197,
-    "color": "hsl(186, 70%, 50%)"
-  }
-]
+
 interface Data {
-  id: string;
-  label: string;
-  value: number;
-  color: string;
+  id: string
+  label: string
+  value: number
+  color: string
 }
 interface MyPieProps {
-  data: Data[];
+  data: Data[]
 }
 
-
-const MyResponsivePie = (props:MyPieProps) => {
-
-  const {data}= props;
-return(
-  <>
-  <ResponsivePie
-      data={data}
-      margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
-      innerRadius={0.5}
-      padAngle={0.7}
-      cornerRadius={3}
-      activeOuterRadiusOffset={8}
-      // borderWidth={1}
-      // borderColor={{
-      //   from: 'color',
-      //   modifiers: [
-      //     [
-      //       'darker',
-      //       0.2
-      //     ]
-      //   ]
-      // }}
-      // arcLinkLabelsSkipAngle={10}
-      // arcLinkLabelsTextColor="#333333"
-      // arcLinkLabelsThickness={2}
-      // arcLinkLabelsColor={{ from: 'color' }}
-      // arcLabelsSkipAngle={10}
-      // arcLabelsTextColor={{
-      //     from: 'color',
-      //     modifiers: [
-        //         [
-          //             'darker',
-          //             2
-          //         ]
-          //     ]
-          // }}
-          // defs={[
-            //     {
-              //         id: 'dots',
-              //         type: 'patternDots',
-              //         background: 'inherit',
-              //         color: 'rgba(255, 255, 255, 0.3)',
-              //         size: 4,
-              //         padding: 1,
-              //         stagger: true
-              //     },
-              //     {
-                //         id: 'lines',
-      //         type: 'patternLines',
-      //         background: 'inherit',
-      //         color: 'rgba(255, 255, 255, 0.3)',
-      //         rotation: -45,
-      //         lineWidth: 6,
-      //         spacing: 10
-      //     }
-      // ]}
-      // fill={[
-        //     {
-          //         match: {
-            //             id: 'ruby'
-            //         },
-      //         id: 'dots'
-      //     },
-      //     {
-        //         match: {
-          //             id: 'c'
-          //         },
-          //         id: 'dots'
-          //     },
-          //     {
-      //         match: {
-        //             id: 'go'
-        //         },
-        //         id: 'dots'
-        //     },
-        //     {
-          //         match: {
-            //             id: 'python'
-            //         },
-            //         id: 'dots'
-            //     },
-            //     {
-              //         match: {
-                //             id: 'scala'
-                //         },
-                //         id: 'lines'
-                //     },
-                //     {
-                  //         match: {
-                    //             id: 'lisp'
-                    //         },
-                    //         id: 'lines'
-                    //     },
-                    //     {
-                      //         match: {
-                        //             id: 'elixir'
-                        //         },
-                        //         id: 'lines'
-                        //     },
-                        //     {
-                          //         match: {
-                            //             id: 'javascript'
-                            //         },
-                            //         id: 'lines'
-                            //     }
-                            // ]}
-                            // legends={[
-                              //     {
-                                //         anchor: 'bottom',
-                                //         direction: 'row',
-                                //         justify: false,
-                                //         translateX: 0,
-                                //         translateY: 56,
-                                //         itemsSpacing: 0,
-                                //         itemWidth: 100,
-                                //         itemHeight: 18,
-                                //         itemTextColor: '#999',
-                                //         itemDirection: 'left-to-right',
-                                //         itemOpacity: 1,
-                                //         symbolSize: 18,
-                                //         symbolShape: 'circle',
-                                //         effects: [
-      //             {
-      //                 on: 'hover',
-      //                 style: {
-        //                     itemTextColor: '#000'
-        //                 }
-        //             }
-        //         ]
-        //     }
-        // ]}
-        />
-    </>)
-    }
- 
+const MyResponsivePie = (props: MyPieProps) => {
+  const { data } = props
+  return (
+    <>
+      <ResponsivePie
+        data={data}
+        innerRadius={0.5}
+        padAngle={0.7}
+        cornerRadius={3}
+        activeOuterRadiusOffset={8}
+      />
+    </>
+  )
+}
 
 function App() {
-  
+  const data: Data[] = [
+    {
+      id: 'php',
+      label: 'php',
+      value: 127,
+      color: 'hsl(236, 70%, 50%)',
+    },
+    {
+      id: 'javascript',
+      label: 'javascript',
+      value: 540,
+      color: 'hsl(249, 70%, 50%)',
+    },
+    {
+      id: 'java',
+      label: 'java',
+      value: 240,
+      color: 'hsl(72, 70%, 50%)',
+    },
+    {
+      id: 'python',
+      label: 'python',
+      value: 435,
+      color: 'hsl(122, 70%, 50%)',
+    },
+    {
+      id: 'scala',
+      label: 'scala',
+      value: 197,
+      color: 'hsl(186, 70%, 50%)',
+    },
+  ]
+
   return (
     <TamaguiProvider config={config}>
-      <StatusProvider >
-<div style={{height:'504px'}}>
-
-<MyResponsivePie data={data}/>
-</div>
+      <StatusProvider>
+        <div style={{ height: '500px', width: '300px' }}>
+          <MyResponsivePie data={data} />
+        </div>
       </StatusProvider>
     </TamaguiProvider>
   )