1import { Chart, List, Navigation, NavigationStack, Picker, PointCategoryChart, Script, Text, useState, VStack } from "scripting"
2
3const favoriteFruitsData = [
4 { fruit: 'Apple', age: 10, count: 42 },
5 { fruit: 'Apple', age: 20, count: 37 },
6 { fruit: 'Apple', age: 30, count: 11 },
7
8 { fruit: 'Bananer', age: 10, count: 23 },
9 { fruit: 'Bananer', age: 20, count: 58 },
10 { fruit: 'Bananer', age: 30, count: 79 },
11
12 { fruit: 'Orange', age: 10, count: 36 },
13 { fruit: 'Orange', age: 20, count: 24 },
14 { fruit: 'Orange', age: 30, count: 62 },
15]
16
17function Example() {
18 const [representsDataUsing, setRepresentsDataUsing] = useState<string>('foregroundStyle')
19 const options: string[] = [
20 'foregroundStyle',
21 'symbol',
22 'symbolSize'
23 ]
24
25 return <NavigationStack>
26 <List
27 navigationTitle={"PointCategoryChart"}
28 navigationBarTitleDisplayMode={"inline"}
29 >
30 <Picker
31 title={"representsDataUsing"}
32 value={representsDataUsing}
33 onChanged={setRepresentsDataUsing}
34 pickerStyle={"menu"}
35 >
36 {options.map(option =>
37 <Text tag={option}>{option}</Text>
38 )}
39 </Picker>
40 <Chart
41 frame={{
42 height: 300
43 }}
44 >
45 <PointCategoryChart
46 representsDataUsing={representsDataUsing as any}
47 marks={favoriteFruitsData.map(item => ({
48 category: item.fruit,
49 x: item.age,
50 y: item.count,
51 }))}
52 />
53 </Chart>
54 </List>
55 </NavigationStack>
56}
57
58async function run() {
59 await Navigation.present({
60 element: <Example />
61 })
62
63 Script.exit()
64}
65
66run()
