Namespace: cq-study-dialog

WebComponents. cq-study-dialog

Study Dialogs web component <cq-study-dialog>.

Creates and manages Study Dialogs based on the corresponding study library entry (title, inputs, outputs, parameters, etc).

Optional Attributes:

  • cq-study-axis : Displays UI for selecting the Y-axis position (left, right, etc), color and for inverting the Y-axis if not shared with the primary axis.
  • cq-study-panel : Displays UI for selecting the panel for the study (own, shared, etc) and if it will be rendered as an underlay (under the primary chart) or an overlay (over the primary chart).
Since:

  • • 5.2.0 Optional Attributes `cq-study-axis` and `cq-study-panel` are now available.
    • 6.3.0 `cq-study-axis` now also provides a check box allowing users to invert study Y-axis if not shared with the primary axis.

Example

Here is an example of how to create a study dialog. We set the `cq-study-axis` and `cq-study-panel` attributes to enable form fields used to control axis position, color, study panel, and underlay/overlay.

<cq-dialog>
	<cq-study-dialog cq-study-axis cq-study-panel>
		<h4 class="title">Study</h4>
		<cq-scroll cq-no-maximize>
			<cq-study-inputs>
				<template cq-study-input>
					<cq-study-input>
						<div class="ciq-heading"></div>
						<div class="stx-data">
							<template cq-menu>
								<cq-menu class="ciq-select">
									<cq-selected></cq-selected>
									<cq-menu-dropdown cq-lift></cq-menu-dropdown>
								</cq-menu>
							</template>
						</div>
					</cq-study-input>
				</template>
			</cq-study-inputs>
			<hr>
			<cq-study-outputs>
				<template cq-study-output>
					<cq-study-output>
						<div class="ciq-heading"></div>
						<cq-swatch cq-overrides="auto"></cq-swatch>
					</cq-study-output>
				</template>
			</cq-study-outputs>
			<hr>
			<cq-study-parameters>
				<template cq-study-parameters>
					<cq-study-parameter>
						<div class="ciq-heading"></div>
						<div class="stx-data"><cq-swatch cq-overrides="auto"></cq-swatch>
							<template cq-menu>
								<cq-menu class="ciq-select">
									<cq-selected></cq-selected>
									<cq-menu-dropdown cq-lift></cq-menu-dropdown>
								</cq-menu>
							</template>
						</div>
					</cq-study-parameter>
				</template>
			</cq-study-parameters>
		</cq-scroll>
		<div class="ciq-dialog-cntrls">
			<div class="ciq-btn" stxtap="close()">Done</div>
		</div>
	</cq-study-dialog>
</cq-dialog>

Methods


StudyDialog#setSelectOption(activator, section)

Accepts new menu (select box) selections

Parameters:
Name Type Description
activator object
section string

within the dialog ("inputs", "outputs", "parameters")

Since:
  • 5.2.0 added section argument