1import { Chart, LineChart, 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={"LineChart"}
29 navigationBarTitleDisplayMode={"inline"}
30 >
31 <Section>
32 <Toggle
33 title={"labelOnYAxis"}
34 value={labelOnYAxis}
35 onChanged={setLabelOnYAxis}
36 />
37 </Section>
38 <Chart>
39 <LineChart
40 labelOnYAxis={labelOnYAxis}
41 marks={toysData.map(toy => ({
42 label: toy.type,
43 value: toy.count,
44 }))}
45 />
46 </Chart>
47 </List>
48 </NavigationStack>
49}
50
51async function run() {
52 await Navigation.present({
53 element: <Example />
54 })
55
56 Script.exit()
57}
58
59run()
