1import { Chart, Navigation, NavigationStack, RangeAreaChart, Script, VStack } from "scripting"
2
3const weatherData = [
4 { month: 'Jan', min: 0, max: 4 },
5 { month: 'Feb', min: 2, max: 6 },
6 { month: 'Mar', min: 3, max: 8 },
7 { month: 'Apr', min: 5, max: 10 },
8 { month: 'May', min: 7, max: 14 },
9 { month: 'Jun', min: 10, max: 25 },
10 { month: 'Jul', min: 15, max: 30 },
11 { month: 'Aug', min: 20, max: 33 },
12 { month: 'Sep', min: 24, max: 35 },
13 { month: 'Oct', min: 18, max: 30 },
14 { month: 'Nov', min: 10, max: 23 },
15 { month: 'Dec', min: 5, max: 10 },
16]
17
18function Example() {
19
20 return <NavigationStack>
21 <VStack
22 navigationTitle={"RangeAreaChart"}
23 navigationBarTitleDisplayMode={"inline"}
24 >
25 <Chart
26 frame={{
27 height: 300
28 }}
29 >
30 <RangeAreaChart
31 marks={weatherData.map(item => ({
32 label: item.month,
33 start: item.min,
34 end: item.max,
35 interpolationMethod: 'catmullRom'
36 }))}
37 />
38 </Chart>
39 </VStack>
40 </NavigationStack>
41}
42
43async function run() {
44 await Navigation.present({
45 element: <Example />
46 })
47
48 Script.exit()
49}
50
51run()
