API Reference
Namespaces
Classes
Events
Global
Externals

Namespace: cq-historical-comparison-dialog

WebComponents. cq-historical-comparison-dialog

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