arcgis-link-chart-layout-switcher | References | ArcGIS Maps SDK for JavaScript

ESM

import "@arcgis/map-components/components/arcgis-link-chart-layout-switcher";

Inheritance:: ArcgisLinkChartLayoutSwitcher→PublicLitElement

Since: ArcGIS Maps SDK for JavaScript 4.32

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`	`IconName \| undefined`
`label`	`label`	`string \| undefined`
`layout` readonly		`LayoutMode`
`messageOverrides`		`Record<string, unknown> \| undefined`
`preventExtentUpdate`	`prevent-extent-update`	`boolean`
`referenceElement`	`reference-element`	`ArcgisReferenceElement \| string \| undefined`
`state` readonly		`LinkChartLayoutSwitcherViewModelState`
`view`		`LinkChartView \| null \| undefined`

appearance

Property

Type: "dropdown" | "menu-bar"

Since: ArcGIS Maps SDK for JavaScript 4.33

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

Property

Type: boolean

If 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

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 4.33

When 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

Property

Type: IconName | undefined

Icon displayed in the component's button, when appearance is dropdown.

See also

Calcite Icon Search

Attribute: icon
Default value: "nodes-link"

label

Property

Type: string | undefined

The component's default label.

Attribute: label

layout

autocast readonly Property

Type: LayoutMode

The current selected link chart layout.

Default value: "organic-standard"

messageOverrides

Property

Type: Record<string, unknown> | undefined

Replace localized message strings with your own strings.

Note: Individual message keys may change between releases.

preventExtentUpdate

autocast Property

Type: boolean

Prevents extent from updating on changes to the layout.

Attribute: prevent-extent-update
Default value: false

referenceElement

Property

Type: ArcgisReferenceElement | string | undefined

By 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.

state

readonly Property

Type: LinkChartLayoutSwitcherViewModelState

The current state of the component.

Default value: "loading"

view

Property

Type: LinkChartView | null | undefined

The 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 view property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-link-chart-layout-switcher component will be associated with a map or scene component rather than using the view property.

Methods

Method	Signature
`componentOnReady` inherited	`componentOnReady(): Promise<this>`
`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

inherited Method

Signature: componentOnReady (): Promise<this>

Inherited from: PublicLitElement

Creates a promise that resolves once the component is fully loaded.

Returns: Promise<this>

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!");

destroy

Method

Signature: destroy (): Promise<void>

Permanently destroy the component.

Returns: Promise<void>

switchLayout

Method

Signature: 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	Description	Required
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

Name	Type
`arcgisPropertyChange`	CustomEvent<{ name: "state"; }>
`arcgisReady`	CustomEvent<void>
`arcgisSwitchLayout`	CustomEvent<LinkChartLayoutSwitcherViewModelEvents["switchLayout"]>

arcgisPropertyChange

Event

arcgisPropertyChange: CustomEvent<{ name: "state"; }>

Emitted when the value of a property is changed. Use this to listen to changes to properties.

arcgisReady

Event

arcgisReady: CustomEvent<void>

Emitted when the component associated with a map or scene view is ready to be interacted with.

arcgisSwitchLayout

Event

arcgisSwitchLayout: CustomEvent<LinkChartLayoutSwitcherViewModelEvents["switchLayout"]>

Fires when component has completed the layout switch

Example

layoutswitcher.addEventListener("arcgisSwitchLayout", (event) => {
  console.log("Layout Switched");
});