From 135dfe7c2d31b1d44f148e2dd8798fdd32f979d7 Mon Sep 17 00:00:00 2001 From: Mark Silverwood <3482679+SlicedSilver@users.noreply.github.com> Date: Mon, 9 Dec 2024 12:06:53 +0000 Subject: [PATCH] Update yield curves code for tree-shaken series --- src/api/ichart-api.ts | 3 -- src/api/iyield-chart-api.ts | 27 ++++++++++++++++- src/api/yield-chart-api.ts | 29 ++++++++++--------- src/model/iseries.ts | 1 + website/docs/chart-types.mdx | 6 ++-- .../demos/yield-curve-with-update-markers.js | 4 +-- 6 files changed, 47 insertions(+), 23 deletions(-) diff --git a/src/api/ichart-api.ts b/src/api/ichart-api.ts index 6d00b1d7aa..ad7e86ff80 100644 --- a/src/api/ichart-api.ts +++ b/src/api/ichart-api.ts @@ -125,9 +125,6 @@ export interface IChartApiBase { /** * 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. diff --git a/src/api/iyield-chart-api.ts b/src/api/iyield-chart-api.ts index e94447e899..41817f3178 100644 --- a/src/api/iyield-chart-api.ts +++ b/src/api/iyield-chart-api.ts @@ -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 {} +export interface IYieldCurveChartApi extends Omit, '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( + definition: SeriesDefinition, + options?: SeriesPartialOptionsMap[T], + paneIndex?: number + ): ISeriesApi | LineData>; +} diff --git a/src/api/yield-chart-api.ts b/src/api/yield-chart-api.ts index 32f18e07fb..33cdbbe9af 100644 --- a/src/api/yield-chart-api.ts +++ b/src/api/yield-chart-api.ts @@ -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'; @@ -88,25 +90,24 @@ export class YieldChartApi extends ChartApi implements IYieldCurveChartA this._initWhitespaceSeries(); } - public override addLineSeries(options?: DeepPartial | undefined, paneIndex?: number | undefined): ISeriesApi<'Line', number, WhitespaceData | LineData, LineSeriesOptions, DeepPartial> { - const optionOverrides = { - ...lineStyleDefaultOptionOverrides, - ...options, - }; - return super.addLineSeries(optionOverrides, paneIndex); - } - - public override addAreaSeries(options?: DeepPartial | undefined, paneIndex?: number | undefined): ISeriesApi<'Area', number, AreaData | WhitespaceData, AreaSeriesOptions, DeepPartial> { + public override addSeries( + definition: SeriesDefinition, + options: SeriesPartialOptionsMap[T] = {}, + paneIndex: number = 0 + ): ISeriesApi | LineData> { + 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 { diff --git a/src/model/iseries.ts b/src/model/iseries.ts index eadf39bb5a..6315b48c5b 100644 --- a/src/model/iseries.ts +++ b/src/model/iseries.ts @@ -52,4 +52,5 @@ export interface ISeries extends IPriceDataSource { barColorer(): ISeriesBarColorer; markerDataAtIndex(index: TimePointIndex): MarkerData | null; dataAt(time: TimePointIndex): SeriesDataAtTypeMap[SeriesType] | null; + fulfilledIndices(): readonly TimePointIndex[]; } diff --git a/website/docs/chart-types.mdx b/website/docs/chart-types.mdx index 445e75e2d2..caf2b36c71 100644 --- a/website/docs/chart-types.mdx +++ b/website/docs/chart-types.mdx @@ -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 }]; @@ -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 }]; @@ -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++) { diff --git a/website/tutorials/demos/yield-curve-with-update-markers.js b/website/tutorials/demos/yield-curve-with-update-markers.js index 5e85924fef..a4672af182 100644 --- a/website/tutorials/demos/yield-curve-with-update-markers.js +++ b/website/tutorials/demos/yield-curve-with-update-markers.js @@ -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, @@ -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,