1import { BarChart, BarChartProps, Button, Chart, Navigation, NavigationStack, Script, VStack, useMemo } from "scripting"
2
3const data = [
4 { color: "Green", type: "Cube", count: 2 },
5 { color: "Green", type: "Sphere", count: 0 },
6 { color: "Green", type: "Pyramid", count: 1 },
7 { color: "Purple", type: "Cube", count: 1 },
8 { color: "Purple", type: "Sphere", count: 1 },
9 { color: "Purple", type: "Pyramid", count: 1 },
10 { color: "Pink", type: "Cube", count: 1 },
11 { color: "Pink", type: "Sphere", count: 2 },
12 { color: "Pink", type: "Pyramid", count: 0 },
13 { color: "Yellow", type: "Cube", count: 1 },
14 { color: "Yellow", type: "Sphere", count: 1 },
15 { color: "Yellow", type: "Pyramid", count: 2 },
16]
17
18function View() {
19 // Access dismiss function.
20 const dismiss = Navigation.useDismiss()
21
22 const list = useMemo(() => {
23 return data.map(item => ({
24 label: item.type,
25 value: item.count,
26 positionBy: {
27 value: item.color,
28 axis: 'horizontal',
29 },
30 foregroundStyleBy: item.color,
31 cornerRadius: 8,
32 }) as BarChartProps["marks"][0])
33 }, [])
34
35 return <NavigationStack>
36 <VStack
37 navigationTitle="Page Title"
38 navigationBarTitleDisplayMode="inline"
39 toolbar={{
40 topBarLeading: <Button
41 title="Done"
42 action={dismiss}
43 />
44 }}
45 >
46 <Chart
47 frame={{
48 height: 400
49 }}
50 >
51 <BarChart
52 marks={list}
53 />
54 </Chart>
55 </VStack>
56 </NavigationStack>
57}
58
59async function run() {
60 // Present view.
61 await Navigation.present({
62 element: <View />
63 })
64
65 // Avoiding memory leaks.
66 Script.exit()
67}
68
69run()
