Skip to content

Commit

Permalink
Update yield curves code for tree-shaken series
Browse files Browse the repository at this point in the history
  • Loading branch information
SlicedSilver committed Dec 9, 2024
1 parent 8e6c307 commit 135dfe7
Show file tree
Hide file tree
Showing 6 changed files with 47 additions and 23 deletions.
3 changes: 0 additions & 3 deletions src/api/ichart-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -125,9 +125,6 @@ export interface IChartApiBase<HorzScaleItem = Time> {
/**
* Creates a series with specified parameters.
*
* A custom series is a generic series which can be extended with a custom renderer to
* implement chart types which the library doesn't support by default.
*
* @param definition - A series definition.
* @param customOptions - Customization parameters of the series being created.
* @param paneIndex - An index of the pane where the series should be created.
Expand Down
27 changes: 26 additions & 1 deletion src/api/iyield-chart-api.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,31 @@
import { LineData, WhitespaceData } from '../model/data-consumer';
import { SeriesPartialOptionsMap } from '../model/series-options';
import { SeriesDefinition } from '../model/series/series-def';

import { IChartApiBase } from './ichart-api';
import { ISeriesApi } from './iseries-api';

export type YieldCurveSeriesType = 'Area' | 'Line';

/**
* The main interface of a single yield curve chart.
*/
export interface IYieldCurveChartApi extends IChartApiBase<number> {}
export interface IYieldCurveChartApi extends Omit<IChartApiBase<number>, 'addSeries'> {
/**
* Creates a series with specified parameters.
*
* Note that the Yield Curve chart only supports the Area and Line series types.
*
* @param definition - A series definition for either AreaSeries or LineSeries.
* @param customOptions - Customization parameters of the series being created.
* @param paneIndex - An index of the pane where the series should be created.
* ```js
* const series = chart.addSeries(LineSeries, { lineWidth: 2 });
* ```
*/
addSeries<T extends YieldCurveSeriesType>(
definition: SeriesDefinition<T>,
options?: SeriesPartialOptionsMap[T],
paneIndex?: number
): ISeriesApi<T, number, WhitespaceData<number> | LineData<number>>;
}
29 changes: 15 additions & 14 deletions src/api/yield-chart-api.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import { DeepPartial, merge } from '../helpers/strict-type-checks';

import { AreaData, LineData, WhitespaceData } from '../model/data-consumer';
import { LineData, WhitespaceData } from '../model/data-consumer';
import {
AreaSeriesOptions,
AreaStyleOptions,
LineSeriesOptions,
LineStyleOptions,
SeriesOptionsCommon,
SeriesPartialOptionsMap,
SeriesType,
} from '../model/series-options';
import { lineSeries } from '../model/series/line-series';
import { SeriesDefinition } from '../model/series/series-def';
import { YieldCurveChartOptions, YieldCurveOptions } from '../model/yield-curve-horz-scale-behavior/yield-curve-chart-options';
import { YieldCurveHorzScaleBehavior } from '../model/yield-curve-horz-scale-behavior/yield-curve-horz-scale-behavior';

Expand Down Expand Up @@ -88,25 +90,24 @@ export class YieldChartApi extends ChartApi<number> implements IYieldCurveChartA
this._initWhitespaceSeries();
}

public override addLineSeries(options?: DeepPartial<LineStyleOptions & SeriesOptionsCommon> | undefined, paneIndex?: number | undefined): ISeriesApi<'Line', number, WhitespaceData<number> | LineData<number>, LineSeriesOptions, DeepPartial<LineStyleOptions & SeriesOptionsCommon>> {
const optionOverrides = {
...lineStyleDefaultOptionOverrides,
...options,
};
return super.addLineSeries(optionOverrides, paneIndex);
}

public override addAreaSeries(options?: DeepPartial<AreaStyleOptions & SeriesOptionsCommon> | undefined, paneIndex?: number | undefined): ISeriesApi<'Area', number, AreaData<number> | WhitespaceData<number>, AreaSeriesOptions, DeepPartial<AreaStyleOptions & SeriesOptionsCommon>> {
public override addSeries<T extends SeriesType>(
definition: SeriesDefinition<T>,
options: SeriesPartialOptionsMap[T] = {},
paneIndex: number = 0
): ISeriesApi<T, number, WhitespaceData<number> | LineData<number>> {
if (definition.isBuiltIn && ['Area', 'Line'].includes(definition.type) === false) {
throw new Error('Yield curve only support Area and Line series');
}
const optionOverrides = {
...lineStyleDefaultOptionOverrides,
...options,
};
return super.addAreaSeries(optionOverrides, paneIndex);
return super.addSeries(definition, optionOverrides, paneIndex);
}

private _initWhitespaceSeries(): void {
const horzBehaviour = this._horzScaleBehavior as YieldCurveHorzScaleBehavior;
const whiteSpaceSeries = this.addLineSeries();
const whiteSpaceSeries = this.addSeries(lineSeries);

let currentWhitespaceHash: string;
function updateWhitespace(lastIndex: number): void {
Expand Down
1 change: 1 addition & 0 deletions src/model/iseries.ts
Original file line number Diff line number Diff line change
Expand Up @@ -52,4 +52,5 @@ export interface ISeries<T extends SeriesType> extends IPriceDataSource {
barColorer(): ISeriesBarColorer<T>;
markerDataAtIndex(index: TimePointIndex): MarkerData | null;
dataAt(time: TimePointIndex): SeriesDataAtTypeMap[SeriesType] | null;
fulfilledIndices(): readonly TimePointIndex[];
}
6 changes: 3 additions & 3 deletions website/docs/chart-types.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ This chart type uses time values for the horizontal scale and is ideal for most
import CodeBlock from '@theme/CodeBlock';
export const timeBasedExample = `const chartOptions = { layout: { textColor: CHART_TEXT_COLOR, background: { type: 'solid', color: CHART_BACKGROUND_COLOR } } };
const chart = createChart(document.getElementById('container'), chartOptions);
const areaSeries = chart.addAreaSeries({ lineColor: LINE_LINE_COLOR, topColor: AREA_TOP_COLOR, bottomColor: AREA_BOTTOM_COLOR });
const areaSeries = chart.addSeries(AreaSeries, { lineColor: LINE_LINE_COLOR, topColor: AREA_TOP_COLOR, bottomColor: AREA_BOTTOM_COLOR });
const data = [{ value: 0, time: 1642425322 }, { value: 8, time: 1642511722 }, { value: 10, time: 1642598122 }, { value: 20, time: 1642684522 }, { value: 3, time: 1642770922 }, { value: 43, time: 1642857322 }, { value: 41, time: 1642943722 }, { value: 43, time: 1643030122 }, { value: 56, time: 1643116522 }, { value: 46, time: 1643202922 }];
Expand Down Expand Up @@ -60,7 +60,7 @@ export const yieldCurveExample = `const chartOptions = {
};
const chart = createYieldCurveChart(document.getElementById('container'), chartOptions);
const lineSeries = chart.addLineSeries({ color: LINE_LINE_COLOR });
const lineSeries = chart.addSeries(LineSeries, { color: LINE_LINE_COLOR });
const curve = [{ time: 1, value: 5.378 }, { time: 2, value: 5.372 }, { time: 3, value: 5.271 }, { time: 6, value: 5.094 }, { time: 12, value: 4.739 }, { time: 24, value: 4.237 }, { time: 36, value: 4.036 }, { time: 60, value: 3.887 }, { time: 84, value: 3.921 }, { time: 120, value: 4.007 }, { time: 240, value: 4.366 }, { time: 360, value: 4.290 }];
Expand Down Expand Up @@ -91,7 +91,7 @@ export const optionsExample = `const chartOptions = {
};
const chart = createOptionsChart(document.getElementById('container'), chartOptions);
const lineSeries = chart.addLineSeries({ color: LINE_LINE_COLOR });
const lineSeries = chart.addSeries(LineSeries, { color: LINE_LINE_COLOR });
const data = [];
for (let i = 0; i < 1000; i++) {
Expand Down
4 changes: 2 additions & 2 deletions website/tutorials/demos/yield-curve-with-update-markers.js
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const chartOptions = {
const container = document.getElementById('container');
const chart = createYieldCurveChart(container, chartOptions);

const series1 = chart.addLineSeries({
const series1 = chart.addSeries(LineSeries, {
lineType: 2,
color: '#26c6da',
pointMarkersVisible: true,
Expand All @@ -70,7 +70,7 @@ const priceChangeMarkers = new UpDownMarkersPrimitive();
series1.attachPrimitive(priceChangeMarkers);
priceChangeMarkers.setData(curve1);

const series2 = chart.addLineSeries({
const series2 = chart.addSeries(LineSeries, {
lineType: 2,
color: 'rgb(164, 89, 209)',
pointMarkersVisible: true,
Expand Down

0 comments on commit 135dfe7

Please sign in to comment.