1import { AreaStackChart, Chart, ChartMarkStackingMethod, Navigation, NavigationStack, Picker, Script, Text, useState, VStack } from "scripting"
2
3const data = [
4 { name: "Burger", price: 0.07, year: 1960 },
5 { name: "Cheese", price: 0.03, year: 1960 },
6 { name: "Bun", price: 0.05, year: 1960 },
7
8 { name: "Burger", price: 0.10, year: 1970 },
9 { name: "Cheese", price: 0.04, year: 1970 },
10 { name: "Bun", price: 0.06, year: 1970 },
11
12 { name: "Burger", price: 0.15, year: 1980 },
13 { name: "Cheese", price: 0.10, year: 1980 },
14 { name: "Bun", price: 0.1, year: 1980 },
15
16 { name: "Burger", price: 0.23, year: 1990 },
17 { name: "Cheese", price: 0.12, year: 1990 },
18 { name: "Bun", price: 0.13, year: 1990 },
19
20 { name: "Burger", price: 0.32, year: 2000 },
21 { name: "Cheese", price: 0.15, year: 2000 },
22 { name: "Bun", price: 0.15, year: 2000 },
23
24 { name: "Burger", price: 0.49, year: 2010 },
25 { name: "Cheese", price: 0.20, year: 2010 },
26 { name: "Bun", price: 0.19, year: 2010 },
27
28 { name: "Burger", price: 0.60, year: 2020 },
29 { name: "Cheese", price: 0.26, year: 2020 },
30 { name: "Bun", price: 0.24, year: 2020 },
31]
32
33const stackings: ChartMarkStackingMethod[] = [
34 'center',
35 'normalized',
36 'standard',
37 'unstacked'
38]
39
40function Example() {
41 const [stacking, setStacking] = useState<ChartMarkStackingMethod>('standard')
42
43 return <NavigationStack>
44 <VStack
45 navigationTitle={"AreaStackChart"}
46 navigationBarTitleDisplayMode={"inline"}
47 >
48 <Picker
49 title={"StackingMethod"}
50 value={stacking}
51 onChanged={setStacking as any}
52 pickerStyle={"menu"}
53 >
54 {stackings.map(item =>
55 <Text tag={item}>{item}</Text>
56 )}
57 </Picker>
58 <Chart
59 frame={{
60 height: 300
61 }}
62 >
63 <AreaStackChart
64 marks={data.map(item => ({
65 category: item.name,
66 label: item.year.toString(),
67 value: item.price,
68 stacking: stacking,
69 }))}
70 />
71 </Chart>
72 </VStack>
73 </NavigationStack>
74}
75
76async function run() {
77 await Navigation.present({
78 element: <Example />
79 })
80
81 Script.exit()
82}
83
84run()
