The historical comparison dialog box web component, <cq-historical-comparison-dialog>
, is
used to add secondary curves to a cross section chart. The secondary curves plot the
instruments of the main curve using data from past dates.
The dialog box enables users to select past dates; it includes the following elements:
- Options group — Creates a group of radio buttons, each of which specifies a specific past date
- Date picker — Enables selection of custom dates
- Color swatch — Accesses a color picker used to select a color for the secondary curve
See the example below.
- Since:
-
7.5.0
Example
<cq-dialog>
<cq-historical-comparison-dialog>
<h4 class="title">Add Historical Comparison</h4>
<cq-close></cq-close>
<div class="ciq-dialog-color-option">
<div class="ciq-heading">Color</div>
<cq-swatch></cq-swatch>
</div>
<hr>
<div class="ciq-options-group" style="margin-top:10px;">
<cq-item stxtap="select()" class="ciq-active">1 Day Ago<span class="ciq-radio"><span></span></span></cq-item>
<cq-item stxtap="select()">1 Week Ago<span class="ciq-radio"><span></span></span></cq-item>
<cq-item stxtap="select()">1 Month Ago<span class="ciq-radio"><span></span></span></cq-item>
<cq-item stxtap="select()">1 Year Ago<span class="ciq-radio"><span></span></span></cq-item>
<cq-item stxtap="select()">3 Years Ago<span class="ciq-radio"><span></span></span></cq-item>
<cq-item stxtap="select('custom')">Custom...</cq-item>
</div>
<cq-datepicker>
<div class="datepicker comparison-datepicker"></div>
</cq-datepicker>
<div stxtap="done()" style="display:flex;justify-content:center;"><div class="ciq-btn">Done</div></div>
</cq-historical-comparison-dialog>
</cq-dialog>
Methods
-
calcDate()
-
Calculates the date specified by a radio button. Typically called when the dialog box closes and a radio button has been selected.
- Since:
-
7.5.0
-
done()
-
Closes the dialog box and adds a curve to the chart for the selected date.
- Since:
-
7.5.0
-
open( [params])
-
Opens the dialog box.
Parameters:
Name Type Argument Description params
Object <optional>
Optional parameters.
Properties
Name Type Argument Description context
CIQ.UI.Context <optional>
The chart context.
- Since:
-
7.5.0
-
select(node [, type])
-
Processes the
cq-item
options group member selected by the user. Sets the selected radio button as active or, if the custom date option has been selected, opens a date picker.Parameters:
Name Type Argument Description node
Object The selected
cq-item
options group member. Passed to the function by default.type
String <optional>
Indicates the type of option selected. If equal to "custom", indicates that the custom date option has been selected.
- Since:
-
7.5.0