1import { BarChart, Chart, List, Navigation, NavigationStack, Script, Section, Toggle, useState, } from "scripting"
2
3type ToyShape = {
4 type: string
5 count: number
6}
7
8const toysData: ToyShape[] = [
9 {
10 type: "Cube",
11 count: 5,
12 },
13 {
14 type: "Sphere",
15 count: 4,
16 },
17 {
18 type: "Pyramid",
19 count: 4
20 }
21]
22
23function Example() {
24 const [labelOnYAxis, setLabelOnYAxis] = useState(false)
25
26 return <NavigationStack>
27 <List
28 navigationTitle={"BarChart"}
29 navigationBarTitleDisplayMode={"inline"}
30 >
31 <Section>
32 <Toggle
33 title={"labelOnYAxis"}
34 value={labelOnYAxis}
35 onChanged={setLabelOnYAxis}
36 />
37 </Section>
38 <Chart
39 chartXVisibleDomain={10}
40 frame={{
41 height: 400
42 }}
43 >
44 <BarChart
45 labelOnYAxis={labelOnYAxis}
46 marks={toysData.map(toy => ({
47 label: toy.type,
48 value: toy.count,
49 }))}
50 />
51 </Chart>
52 </List>
53 </NavigationStack>
54}
55
56async function run() {
57 await Navigation.present({
58 element: <Example />
59 })
60
61 Script.exit()
62}
63
64run()
