import "@arcgis/map-components/components/arcgis-link-chart-layout-switcher";A component for use in link charts that allows users to switch between different layouts. See documentation on layouts for more details.
Note: Sign in to access the data in this demo, U/P: viewer01/I68VGU^nMurF
Demo
Properties
| Property | Attribute | Type |
|---|---|---|
appearance | appearance | "dropdown" | "menu-bar" |
autoDestroyDisabled | auto-destroy-disabled | boolean |
closeOnSelectDisabled | close-on-select-disabled | boolean |
icon | icon | string |
label | label | string |
layoutreadonly | | "basic-grid" | "chronological-mono-timeline" | "chronological-multi-timeline" | "geographic-organic-standard" | "hierarchical-bottom-to-top" | "organic-community" | "organic-standard" | "radial-root-centric" | "tree-left-to-right" |
messageOverrides | | Record<string, unknown> |
positiondeprecatedreflected | position | "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing" |
preventExtentUpdate | prevent-extent-update | boolean |
referenceElement | reference-element | HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string |
statereadonlyreflected | state | "disabled" | "loading" | "ready" |
view | | LinkChartView |
appearance
appearance: "dropdown" | "menu-bar"The appearance of the layout switcher. dropdown displays a button that is clicked to reveal a dropdown menu, while menu-bar displays a menu bar.
- Attribute
- appearance
- Default value
- "dropdown"
autoDestroyDisabled
autoDestroyDisabled: booleanIf true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporarily hide it. If this is set, make sure to call the destroy method when you are done to prevent memory leaks.
- Attribute
- auto-destroy-disabled
- Default value
- false
closeOnSelectDisabled
closeOnSelectDisabled: booleanWhen true, the layout menu will not close when a layout is selected. Only applicable when appearance is dropdown.
- Attribute
- close-on-select-disabled
- Default value
- false
icon
icon: stringIcon displayed in the component's button, when appearance is dropdown.
- See also
- Attribute
- icon
- Default value
- "nodes-link"
layout
layout: "basic-grid" | "chronological-mono-timeline" | "chronological-multi-timeline" | "geographic-organic-standard" | "hierarchical-bottom-to-top" | "organic-community" | "organic-standard" | "radial-root-centric" | "tree-left-to-right"The current selected link chart layout.
- Default value
- "organic-standard"
messageOverrides
messageOverrides: Record<string, unknown>Replace localized message strings with your own strings.
Note: Individual message keys may change between releases.
position
position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"slot instead.- Attribute
- position
preventExtentUpdate
preventExtentUpdate: booleanPrevents extent from updating on changes to the layout.
- Attribute
- prevent-extent-update
- Default value
- false
referenceElement
referenceElement: HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | stringBy assigning the id attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
See also:
- Attribute
- reference-element
state
state: "disabled" | "loading" | "ready"The current state of the component.
- Attribute
- state
- Default value
- "loading"
view
view: LinkChartViewThe view associated with the component.
Note: The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this
viewproperty which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the Link Chart Layout Switcher component will be associated with a map or scene component rather than using theviewproperty.
Methods
| Method | Signature |
|---|---|
componentOnReady | componentOnReady(): Promise<void> |
destroy | destroy(): Promise<void> |
switchLayout | switchLayout(newLayout: "basic-grid" | "chronological-mono-timeline" | "chronological-multi-timeline" | "geographic-organic-standard" | "hierarchical-bottom-to-top" | "organic-community" | "organic-standard" | "radial-root-centric" | "tree-left-to-right"): Promise<void> |
componentOnReady
componentOnReady(): Promise<void>Create a promise that resolves once component is fully loaded.
Example
const arcgisLinkChartLayoutSwitcher = document.querySelector("arcgis-link-chart-layout-switcher");
document.body.append(arcgisLinkChartLayoutSwitcher);
await arcgisLinkChartLayoutSwitcher.componentOnReady();
console.log("arcgis-link-chart-layout-switcher is ready to go!");- Returns
- Promise<void>
switchLayout
switchLayout(newLayout: "basic-grid" | "chronological-mono-timeline" | "chronological-multi-timeline" | "geographic-organic-standard" | "hierarchical-bottom-to-top" | "organic-community" | "organic-standard" | "radial-root-centric" | "tree-left-to-right"): Promise<void>Switches the layout of the link chart to the value provided.
Parameters
| Parameter | Type | Optional? |
|---|---|---|
| newLayout | "basic-grid" | "chronological-mono-timeline" | "chronological-multi-timeline" | "geographic-organic-standard" | "hierarchical-bottom-to-top" | "organic-community" | "organic-standard" | "radial-root-centric" | "tree-left-to-right" |
- Returns
- Promise<void>
Events
| Event | Type |
|---|---|
arcgisPropertyChange | CustomEvent<{ name: "state"; }> |
arcgisReady | CustomEvent<void> |
arcgisSwitchLayout | CustomEvent<LinkChartLayoutSwitcherViewModelSwitchLayoutEvent> |
arcgisPropertyChange
arcgisPropertyChange: CustomEvent<{ name: "state"; }>Emitted when the value of a property is changed. Use this to listen to changes to properties.
arcgisReady
arcgisReady: CustomEvent<void>Emitted when the component associated with a map or scene view is ready to be interacted with.
arcgisSwitchLayout
arcgisSwitchLayout: CustomEvent<LinkChartLayoutSwitcherViewModelSwitchLayoutEvent>Fires when component has completed the layout switch
Example
layoutswitcher.addEventListener("arcgisSwitchLayout", (event) => {
console.log("Layout Switched");
});