1import { Chart, DonutChart, Navigation, NavigationStack, Script, VStack } from "scripting"
2
3let data = [
4 { name: "Cachapa", sales: 9631 },
5 { name: "Crêpe", sales: 6959 },
6 { name: "Injera", sales: 4891 },
7 { name: "Jian Bing", sales: 2506 },
8 { name: "American", sales: 1777 },
9 { name: "Dosa", sales: 625 },
10]
11
12function Example() {
13 return <NavigationStack>
14 <VStack
15 navigationTitle={"DonutChart"}
16 navigationBarTitleDisplayMode={"inline"}
17 >
18 <Chart
19 frame={{
20 height: 300
21 }}
22 >
23 <DonutChart
24 marks={
25 data.map(item => ({
26 category: item.name,
27 value: item.sales,
28 innerRadius: {
29 type: 'ratio',
30 value: 0.618
31 },
32 outerRadius: {
33 type: 'inset',
34 value: 10,
35 },
36 angularInset: 1,
37 }))
38 }
39 />
40 </Chart>
41 </VStack>
42 </NavigationStack>
43}
44
45async function run() {
46 await Navigation.present({
47 element: <Example />
48 })
49
50 Script.exit()
51}
52
53run()
