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