8.2.0 to 8.3.0

Version 8.3.0 replaces Term Structure with a new, more advanced Cross Section plug-in and makes related configuration changes.

Configuration

crossSection

The Term Structure plug-in has been replaced by a new Cross Section plug-in (see Cross section below). As a result, the termStructure property of the plugins object in the default chart config object has been renamed to crossSection. Change any references you've made to config.plugins.termStructure to config.plugins.crossSection.

enableTimeSeries

The value of the config.plugins.crossSection property is an object that contains configuration information for the Cross Section plug-in. A new enableTimeSeries property has been added to the crossSection object. The new boolean property specifies whether time series charts related to cross section data can be displayed from within cross section charts.

In 8.2.0, access to time series charts from term structures was controlled by the cq-time-series attribute of the curve context menu. For example, here's the markup from the sample-template-term-structure.html template:

<cq-dialog>
	<cq-curve-context cq-time-series="true">
		<div stxtap="CurveEdit.launchTimeSeries()">Launch Time Series</div>
	</cq-curve-context>
</cq-dialog>

In 8.3.0, the config.plugins.crossSection.enableTimeSeries property overrides the cq-time-series attribute. The markup is still required to create the context menu that appears when users right-click a term structure (or cross section) data point and ultimately open a time series chart, but the cq-time-series attribute can be removed.

For more information, see CIQ.UI.CurveEdit and the Chart Configuration tutorial.

Cross section

Version 8.3.0 takes ChartIQ beyond financial charting with new cross-sectional charting capabilities. A new Cross Section plug-in provides the functionality, replacing the Term Structure plug-in that has been part of the library since version 7.3.0.

Term structures are now a use case of the Cross Section plug-in, so your term structure applications will work after the upgrade just as they did before.

Files

The Cross Section plug-in renamed and revised most of the Term Structure plug-in files. You do not need to make any changes to the files unless you customized them.

Here are the essential differences between 8.2.0 and 8.3.0:

Templates

sample-time-series-instant-chart.html

The sample-time-series-instant-chart.html template is in the 8.2.0 plugins/termstructure (or 8.3.0 plugins/crosssection) folder of your library.

To upgrade the 8.2.0 template, change:

<cq-instant-chart tmpl-src="plugins/termstructure/partials/sample-template-time-series-context.html" no-save symbol="">
</cq-instant-chart>

to:

<cq-instant-chart tmpl-src="plugins/crosssection/partials/sample-template-time-series-context.html" no-save symbol="">
</cq-instant-chart>

sample-template-term-structure.html

The sample-template-term-structure.html template is in the examples/templates folder of your library.

To upgrade the 8.2.0 template, replace the following link element in the document head element:

<link rel="stylesheet" type="text/css" href="plugins/termstructure/termstructureSample.css">

with:

<link rel="stylesheet" type="text/css" href="plugins/crosssection/sample.css" />

Replace the following imports:

import "./plugins/termstructure/termstructureCore.js";
import "./plugins/termstructure/datepicker.js";
import "./plugins/termstructure/termstructureDataSimulator.js";
import "./plugins/termstructure/termstructureUI.js";

with:

import "./plugins/crosssection/core.js";
import "./plugins/crosssection/datepicker.js";
import "./plugins/crosssection/ui.js";
import "./examples/feeds/termstructureDataSimulator.js";

See the Files section above for information on the imported files.

Preferences menu

In 8.2.0, the items on the preferences menu (or cog wheel menu) of term structure charts were hard coded; for example (from the 8.2.0 sample-template-term-structure.html template file):

<cq-menu-dropdown-section class="chart-preferences">
	<cq-heading>Options</cq-heading>
	<cq-item>
		<div stxsetget="Layout.Shading()" class="ciq-active">Shading<span class="ciq-checkbox ciq-active"><span></span></span></div>
	</cq-item>
	<cq-item>
		<div stxsetget="Layout.XAxisScaling()" class="ciq-active">X-Axis Scaling<span class="ciq-checkbox ciq-active"><span></span></span></div>
	</cq-item>
	<cq-item>
		<div stxsetget="Layout.UpdateAnimations()">Update Animations<span class="ciq-checkbox ciq-active"><span></span></span></div>
	</cq-item>
	<cq-item>
		<div stxsetget="Layout.UpdateStamp()">Show Update Stamp<span class="ciq-checkbox ciq-active"><span></span></span></div>
	</cq-item>
	<cq-item>
		<span class="ciq-edit" stxtap="Layout.showFreshnessEdit()"></span>
		<div stxsetget="Layout.FreshPoints()">Recent Updates<span class="ciq-checkbox ciq-active"><span></span></span></div>
	</cq-item>
	<cq-separator></cq-separator>
</cq-menu-dropdown-section>

In 8.3.0, the menu items are created at runtime from data in the chart configuration object.

To upgrade your application (or 8.2.0 sample-template-term-structure.html template file), replace the following preferences menu items:

<cq-item>
    <div stxsetget="Layout.Shading()" class="ciq-active">Shading<span class="ciq-checkbox ciq-active"><span></span></span></div>
</cq-item>
<cq-item>
    <div stxsetget="Layout.XAxisScaling()" class="ciq-active">X-Axis Scaling<span class="ciq-checkbox ciq-active"><span></span></span></div>
</cq-item>
<cq-item>
    <div stxsetget="Layout.UpdateAnimations()">Update Animations<span class="ciq-checkbox ciq-active"><span></span></span></div>
</cq-item>
<cq-item>
    <div stxsetget="Layout.UpdateStamp()">Show Update Stamp<span class="ciq-checkbox ciq-active"><span></span></span></div>
</cq-item>
<cq-item>
    <span class="ciq-edit" stxtap="Layout.showFreshnessEdit()"></span>
    <div stxsetget="Layout.FreshPoints()">Recent Updates<span class="ciq-checkbox ciq-active"><span></span></span></div>
</cq-item>

with:

<cq-menu-container cq-name="menuChartPreferences"></cq-menu-container>

Then add the following configuration settings to your app (or sample-template-term-structure.html):

config.menuChartPreferences = [
	{ type: "checkbox", label: "Shading", cmd: "Layout.Shading()" },
	{ type: "checkbox", label: "X-Axis Scaling", cmd: "Layout.XAxisScaling()" },
	{
		type: "checkbox",
		label: "Update Animations",
		cmd: "Layout.UpdateAnimations()"
	},
	{ type: "checkbox", label: "Show Update Stamp", cmd: "Layout.UpdateStamp()" },
	{
		type: "checkboxOptions",
		label: "Recent Updates",
		cmd: "Layout.FreshPoints()",
		options: "Layout.showFreshnessEdit()"
	}
];

See the Customization section of the Chart Configuration tutorial for information on how to incorporate settings into the default configuration object.

Timeline Date Selector

The Timeline Date Selector is a new, 8.3.0 feature of term structure charts that enables users to easily examine the history of yield and price spreads of debt instruments (see the Timeline Date Selector section of the 8.3.0 Release Notes for more information).

To add the Timeline Date Selector to your term structure application, add the following import:

import "./plugins/crosssection/timelineDateSelector.js";

Then add the following JSON object to the menuChartPreferences property of the chart configuration object (see Preferences menu above):

{
	type: "checkbox",
	label: "Timeline Date Selector",
	cmd: "Layout.TimelineDateSelector()"
}

For example:

config.menuChartPreferences = [
	{
		.
		.
		.
	},
	{
		type: "checkbox",
		label: "Timeline Date Selector",
		cmd: "Layout.TimelineDateSelector()"
	}
];

You should now be able to open the Timeline Date Selector from your application's preferences menu.

Classes and methods

All of the Term Structure classes and methods have been renamed as Cross Section classes and methods. For the most part, function signatures and implementations have remained the same (see ^† and ^‡ below); and so, after they are renamed in your application, contructors and methods should work in 8.3.0 as they did in 8.2.0.

If you've used the Term Structure classes and methods in custom code, rename all occurrences of the classes and methods as follows: