https://pastein.ru/t/jIM
Загрузка данных
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 84d127a..42b9d47 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,18 @@
-# next
+# latest
+
+- `breaking change`: Добавлен необязательный параметр `instrumentName?: string` для отображения полного названия инструмента в легенде
+- `breaking change`: Добавлен необязательный параметр `instrumentTicker?: string` для отображения короткого тикера инструмента в ценовом лейбле
+
+# 0.1.12
- Добавлена поддержка хоткеев на элементы рисования (alt+t, alt+v, alt+h, alt+f, del, esc)
+# 0.1.11
+
+- Добавлен необязательный параметр `timeFormat?: TimeFormat` для настройки формата отображения времени
+- Добавлен необязательный параметр `dateFormat?: DateFormat` для настройки формата отображения даты
+- Добавлен необязательный параметр `interval?: Intervals | null` для задания начального интервала при инициализации графика
+
# 0.1.10
- Добавление логарифмической шкалы
diff --git a/src/components/CompareLegendRow/index.tsx b/src/components/CompareLegendRow/index.tsx
index c9e4eed..1ae903c 100644
--- a/src/components/CompareLegendRow/index.tsx
+++ b/src/components/CompareLegendRow/index.tsx
@@ -13,13 +13,13 @@ interface CompareLegendRowProps {
}
export function CompareLegendRow({ item, onRemove }: CompareLegendRowProps) {
- const { symbol, mode, value, color } = item;
+ const { symbol, instrumentName, mode, value, color } = item;
const handleDelete = () => onRemove?.(symbol, mode);
return (
<div className={styles.item}>
- <div className={styles.symbol}>{symbol}</div>
+ <div className={styles.symbol}>{instrumentName}</div>
<div className={styles.priceWrapper}>
<div
diff --git a/src/core/Chart.ts b/src/core/Chart.ts
index da4f387..afd034e 100644
--- a/src/core/Chart.ts
+++ b/src/core/Chart.ts
@@ -361,6 +361,8 @@ export class Chart implements ISerializable<ChartSnapshot> {
timeFormat,
interval,
symbol: this.activeSymbols[0],
+ instrumentName: this.eventManager.getInstrumentName(),
+ instrumentTicker: this.eventManager.getInstrumentTicker(),
};
}
diff --git a/src/core/CompareManager.ts b/src/core/CompareManager.ts
index c450389..390deee 100644
--- a/src/core/CompareManager.ts
+++ b/src/core/CompareManager.ts
@@ -10,15 +10,14 @@ import { IndicatorManager } from '@core/IndicatorManager';
import { PaneManager } from '@core/PaneManager';
import { PriceScale } from '@core/PriceScale';
import { COMPARE_COLOR_PALETTE } from '@src/theme';
-import { CompareItem, CompareMode, Direction, IndicatorConfig } from '@src/types';
+import { CompareInstrument, CompareItem, CompareMode, Direction, IndicatorConfig } from '@src/types';
import { IndicatorSnapshot } from '@src/types/snapshot';
import { createFallbackColor, normalizeColor, normalizeSymbol } from '@src/utils';
-interface CompareEntry {
+interface CompareEntry extends CompareItem {
key: string;
- symbol: string;
- mode: CompareMode;
symbol$: BehaviorSubject<string>;
+ instrumentTicker$: BehaviorSubject<string>;
entity: Indicator;
}
@@ -88,16 +87,21 @@ export class CompareManager {
public async setSymbolMode(
seriesType: SeriesType,
- symbolRaw: string,
+ value: string | CompareInstrument,
mode: CompareMode,
paneId?: number,
): Promise<void> {
- const symbol = normalizeSymbol(symbolRaw);
+ const instrument = typeof value === 'string' ? { symbol: value } : value;
+
+ const symbol = normalizeSymbol(instrument.symbol);
if (!symbol) {
return;
}
+ const instrumentName = instrument.instrumentName?.trim() || symbol;
+ const instrumentTicker = instrument.instrumentTicker?.trim() || symbol;
+
if (mode === CompareMode.NewScale && this.isNewScaleDisabled() && !this.restoringInitialIndicators) {
return;
}
@@ -109,6 +113,7 @@ export class CompareManager {
}
const symbol$ = new BehaviorSubject(symbol);
+ const instrumentTicker$ = new BehaviorSubject(instrumentTicker);
const entity = this.indicatorManager.addEntity<Indicator>((zIndex, moveUp, moveDown) => {
const usedColorsByCompare = this.entitiesSubject.value.map(
@@ -127,7 +132,7 @@ export class CompareManager {
const usedColorsByIndicators = flatten(usedColorsByIndicatorsRaw).filter((color) => color !== undefined);
const usedColors = usedColorsByCompare.concat(usedColorsByIndicators);
- const config = getDefaultCompareIndicatorConfig(symbol, usedColors);
+ const config = getDefaultCompareIndicatorConfig(seriesType, symbol, instrumentName, instrumentTicker, usedColors);
const associatedPane =
mode === CompareMode.NewPane
@@ -140,6 +145,7 @@ export class CompareManager {
id: key,
lwcChart: this.chart,
mainSymbol$: symbol$,
+ mainInstrumentTicker$: instrumentTicker$,
dataSource: this.dataSource,
associatedPane,
config: {
@@ -170,8 +176,11 @@ export class CompareManager {
this.entries.set(key, {
key,
symbol,
+ instrumentName,
+ instrumentTicker,
mode,
symbol$,
+ instrumentTicker$,
entity,
});
@@ -229,8 +238,10 @@ export class CompareManager {
}
public getAllEntities() {
- return Array.from(this.entries.values()).map(({ symbol, entity, mode }) => ({
+ return Array.from(this.entries.values()).map(({ symbol, instrumentName, instrumentTicker, entity, mode }) => ({
symbol,
+ instrumentName,
+ instrumentTicker,
entity,
mode,
}));
@@ -257,6 +268,14 @@ export class CompareManager {
}
const series = indicator.config.series[0];
+ const symbol = indicator.config.symbol ?? indicator.config.label;
+
+ if (!symbol) {
+ continue;
+ }
+
+ const instrumentName = indicator.config.instrumentName ?? indicator.config.label ?? symbol;
+ const instrumentTicker = indicator.config.instrumentTicker ?? symbol;
const compareMode =
series.seriesOptions?.priceScaleId === Direction.Left
@@ -266,7 +285,16 @@ export class CompareManager {
: CompareMode.Percentage;
// eslint-disable-next-line no-await-in-loop
- await this.setSymbolMode(series.name, indicator.config.label, compareMode, indicator.paneId);
+ await this.setSymbolMode(
+ series.name,
+ {
+ symbol,
+ instrumentName,
+ instrumentTicker,
+ },
+ compareMode,
+ indicator.paneId,
+ );
}
} finally {
this.restoringInitialIndicators = false;
@@ -284,6 +312,7 @@ export class CompareManager {
this.indicatorManager.removeEntity(entry.entity);
entry.entity.destroy();
entry.symbol$.complete();
+ entry.instrumentTicker$.complete();
return true;
}
@@ -301,6 +330,8 @@ export class CompareManager {
for (let index = 0; index < values.length; index += 1) {
items.push({
symbol: values[index].symbol,
+ instrumentName: values[index].instrumentName,
+ instrumentTicker: values[index].instrumentTicker,
mode: values[index].mode,
});
@@ -392,12 +423,21 @@ function getPaletteColorFromIndex(usedColors: Set<string>, startIndex: number):
return createFallbackColor(usedColors.size);
}
-const getDefaultCompareIndicatorConfig = (symbol: string, usedColors: string[]): IndicatorConfig => {
+const getDefaultCompareIndicatorConfig = (
+ seriesType: SeriesType,
+ symbol: string,
+ instrumentName: string,
+ instrumentTicker: string,
+ usedColors: string[],
+): IndicatorConfig => {
const reservedColors = new Set(usedColors.map(normalizeColor));
return {
+ symbol,
+ instrumentName,
+ instrumentTicker,
newPane: true,
- label: symbol,
+ label: instrumentName,
series: [
{
name: 'Line', // todo: change with enum
diff --git a/src/core/EventManager.ts b/src/core/EventManager.ts
index c99268d..c5a391c 100644
--- a/src/core/EventManager.ts
+++ b/src/core/EventManager.ts
@@ -13,6 +13,8 @@ interface EventManagerParams {
initialTimeframe: Timeframes;
initialSeries: ChartSeriesType;
initialSymbol: string;
+ initialInstrumentName?: string;
+ initialInstrumentTicker?: string;
initialTimeFormat?: TimeFormat;
initialDateFormat?: DateFormat;
initialInterval?: Intervals | null;
@@ -31,6 +33,8 @@ export class EventManager {
private timeframe$: BehaviorSubject<Timeframes>;
private seriesSelected$: BehaviorSubject<ChartSeriesType>;
private symbol$: BehaviorSubject<string>;
+ private instrumentName$: BehaviorSubject<string>;
+ private instrumentTicker$: BehaviorSubject<string>;
private timeFormat$: BehaviorSubject<TimeFormat>;
private dateFormat$: BehaviorSubject<DateFormat>;
private interval$: BehaviorSubject<Intervals | null>;
@@ -43,21 +47,27 @@ export class EventManager {
initialTimeframe,
initialSeries,
initialSymbol,
+ initialInstrumentName,
+ initialInstrumentTicker,
initialTimeFormat,
initialDateFormat,
initialInterval = null,
}: EventManagerParams) {
this.timeframe$ = new BehaviorSubject<Timeframes>(initialTimeframe);
- this.interval$ = new BehaviorSubject<Intervals | null>(initialInterval);
this.seriesSelected$ = new BehaviorSubject<ChartSeriesType>(initialSeries);
this.symbol$ = new BehaviorSubject<string>(initialSymbol);
+ this.instrumentName$ = new BehaviorSubject<string>(initialInstrumentName?.trim() || initialSymbol);
+ this.instrumentTicker$ = new BehaviorSubject<string>(initialInstrumentTicker?.trim() || initialSymbol);
this.timeFormat$ = new BehaviorSubject<TimeFormat>(initialTimeFormat ?? Defaults.timeFormat);
this.dateFormat$ = new BehaviorSubject<DateFormat>(initialDateFormat ?? Defaults.dateFormat);
+ this.interval$ = new BehaviorSubject<Intervals | null>(initialInterval);
this.undoRedo = new UndoRedo({
timeframe: (value) => this.timeframe$.next(value),
seriesSelected: (value) => this.seriesSelected$.next(value),
symbol: (value) => this.symbol$.next(value),
+ instrumentName: (value) => this.instrumentName$.next(value),
+ instrumentTicker: (value) => this.instrumentTicker$.next(value),
timeFormat: (value) => this.timeFormat$.next(value),
dateFormat: (value) => this.dateFormat$.next(value),
interval: (value) => this.interval$.next(value),
@@ -109,13 +119,46 @@ export class EventManager {
return this.interval$.asObservable();
}
- public setSymbol = (next: string, options?: SetWithHistoryOptions) =>
- this.setWithHistory('symbol', this.symbol$, next, options);
+ public setSymbol = (symbol: string, options?: SetWithHistoryOptions): void => {
+ this.setInstrument(symbol, undefined, undefined, options);
+ };
public getSymbol(): Observable<string> {
return this.symbol$.asObservable();
}
+ public setInstrument(
+ symbol: string,
+ instrumentName?: string,
+ instrumentTicker?: string,
+ options?: SetWithHistoryOptions,
+ ): void {
+ const nextInstrumentName = instrumentName?.trim() || symbol;
+ const nextInstrumentTicker = instrumentTicker?.trim() || symbol;
+
+ this.undoRedo.group(() => {
+ this.setWithHistory('instrumentName', this.instrumentName$, nextInstrumentName, options);
+ this.setWithHistory('instrumentTicker', this.instrumentTicker$, nextInstrumentTicker, options);
+ this.setWithHistory('symbol', this.symbol$, symbol, options);
+ });
+ }
+
+ public instrumentName(): Observable<string> {
+ return this.instrumentName$.asObservable();
+ }
+
+ public getInstrumentName(): string {
+ return this.instrumentName$.value;
+ }
+
+ public instrumentTicker(): Observable<string> {
+ return this.instrumentTicker$.asObservable();
+ }
+
+ public getInstrumentTicker(): string {
+ return this.instrumentTicker$.value;
+ }
+
public setTimeFormat = (next: TimeFormat, options?: SetWithHistoryOptions): void =>
this.setWithHistory('timeFormat', this.timeFormat$, next, options);
@@ -207,6 +250,7 @@ export class EventManager {
}
if (timeframe) {
this.setTimeframe(timeframe, setOptions);
+ return;
}
if (interval === null) {
this.resetInterval(setOptions);
@@ -220,6 +264,8 @@ export class EventManager {
this.controlBarVisible$.complete();
this.interval$.complete();
this.symbol$.complete();
+ this.instrumentName$.complete();
+ this.instrumentTicker$.complete();
this.seriesSelected$.complete();
}
}
diff --git a/src/core/Indicator.ts b/src/core/Indicator.ts
index b0d9ee7..d16b471 100644
--- a/src/core/Indicator.ts
+++ b/src/core/Indicator.ts
@@ -14,6 +14,7 @@ type IIndicator = DOMObject;
export interface IndicatorParams extends DOMObjectParams {
mainSymbol$: Observable<string>;
+ mainInstrumentTicker$?: Observable<string>;
lwcChart: IChartApi;
dataSource: DataSource;
associatedPane: Pane;
@@ -29,6 +30,7 @@ export class Indicator extends DOMObject implements ISerializable<IndicatorSnaps
private lwcChart: IChartApi;
private dataSource: DataSource;
private mainSymbol$: Observable<string>;
+ private mainInstrumentTicker$: Observable<string>;
private associatedPane: Pane;
private config: IndicatorConfig;
private settings: SettingsValues = {};
@@ -46,6 +48,7 @@ export class Indicator extends DOMObject implements ISerializable<IndicatorSnaps
moveUp,
moveDown,
mainSymbol$,
+ mainInstrumentTicker$,
associatedPane,
paneId,
config,
@@ -54,6 +57,7 @@ export class Indicator extends DOMObject implements ISerializable<IndicatorSnaps
this.lwcChart = lwcChart;
this.dataSource = dataSource;
this.mainSymbol$ = mainSymbol$;
+ this.mainInstrumentTicker$ = mainInstrumentTicker$ ?? mainSymbol$;
this.indicatorType = type;
this.config = config;
this.name = this.getLabel();
@@ -201,6 +205,7 @@ export class Indicator extends DOMObject implements ISerializable<IndicatorSnaps
seriesOptions,
priceScaleOptions,
mainSymbol$: this.mainSymbol$,
+ mainInstrumentTicker$: this.mainInstrumentTicker$,
mainSerie$: this.associatedPane.getMainSerie(),
showSymbolLabel: false,
paneIndex: this.associatedPane.paneIndex(),
diff --git a/src/core/Legend.ts b/src/core/Legend.ts
index b57a6b1..178a564 100644
--- a/src/core/Legend.ts
+++ b/src/core/Legend.ts
@@ -34,6 +34,7 @@ export interface Ohlc {
export interface CompareLegendItem {
symbol: string;
+ instrumentName: string;
mode: CompareMode;
value: string;
color: string;
@@ -80,7 +81,7 @@ export class Legend {
private config: OHLCConfig;
private mainSeries!: SeriesStrategies;
- private mainSymbol = '';
+ private mainInstrumentName = '';
private isChartHovered = false;
private model$ = new BehaviorSubject<LegendModel>([]);
private tooltipVisability = new BehaviorSubject<boolean>(false);
@@ -110,10 +111,8 @@ export class Legend {
this.openIndicatorSettings = openIndicatorSettings;
this.subscriptions.add(
- this.eventManager.symbol().subscribe((symbol) => {
- const symbolParts = symbol.split(':');
-
- this.mainSymbol = symbolParts[symbolParts.length - 1] || symbol;
+ this.eventManager.instrumentName().subscribe((instrumentName) => {
+ this.mainInstrumentName = instrumentName;
this.updateWithLastCandle();
}),
);
@@ -189,7 +188,7 @@ export class Legend {
model.push({
id: `main-series-${this.paneId}`,
- name: this.mainSymbol,
+ name: this.mainInstrumentName,
values: series as Partial<Record<keyof Ohlc, { value: number | string | Time; color: string; name: string }>>,
isIndicator: false,
});
@@ -266,7 +265,7 @@ export class Legend {
model.push({
id: `main-series-${this.paneId}`,
- name: this.mainSymbol,
+ name: this.mainInstrumentName,
values: series as Partial<Record<keyof Ohlc, { value: number | string | Time; color: string; name: string }>>,
isIndicator: false,
});
diff --git a/src/core/MoexChart.tsx b/src/core/MoexChart.tsx
index 7cf2b96..f1ff303 100644
--- a/src/core/MoexChart.tsx
+++ b/src/core/MoexChart.tsx
@@ -130,12 +130,15 @@ export class MoexChart implements ISerializable<MoexChartSnapshot> {
setPricePrecision(config.chartCollectionPreset.ohlc.precision);
- const { chartSeriesType, symbol, timeframe, interval, dateFormat, timeFormat } = config.snapshot.charts[0];
+ const { chartSeriesType, symbol, instrumentName, instrumentTicker, timeframe, interval, dateFormat, timeFormat } =
+ config.snapshot.charts[0];
this.eventManager = new EventManager({
initialTimeframe: timeframe,
initialSeries: chartSeriesType,
initialSymbol: symbol,
+ initialInstrumentName: instrumentName,
+ initialInstrumentTicker: instrumentTicker,
initialTimeFormat: timeFormat,
initialDateFormat: dateFormat,
initialInterval: interval,
@@ -272,10 +275,10 @@ export class MoexChart implements ISerializable<MoexChartSnapshot> {
return res;
}
- public setSymbol(symbol: string): void {
+ public setSymbol(symbol: string, instrumentName?: string, instrumentTicker?: string): void {
if (!symbol) return;
- this.eventManager.setSymbol(symbol);
+ this.eventManager.setInstrument(symbol, instrumentName, instrumentTicker);
}
private renderAttachments(config: IMoexChart, toggleToolbar: () => boolean) {
diff --git a/src/core/Pane.tsx b/src/core/Pane.tsx
index 2b228aa..7d1bc60 100644
--- a/src/core/Pane.tsx
+++ b/src/core/Pane.tsx
@@ -403,6 +403,7 @@ export class Pane implements ISerializable<PaneSnapshot> {
lwcChart,
dataSource,
mainSymbol$: this.eventManager.getSymbol(),
+ mainInstrumentTicker$: this.eventManager.instrumentTicker(),
mainSerie$: this.mainSeries,
});
diff --git a/src/core/PaneManager.ts b/src/core/PaneManager.ts
index 45a0c0c..69eb179 100644
--- a/src/core/PaneManager.ts
+++ b/src/core/PaneManager.ts
@@ -95,7 +95,7 @@ export class PaneManager implements ISerializable<PaneSnapshot[]> {
this.priceAxisLabels = new PriceAxisLabels({
mainSeries$: this.mainPane.getMainSerie().asObservable(),
- mainSymbol$: this.sharedPaneParams.eventManager.symbol(),
+ mainInstrumentTicker$: this.sharedPaneParams.eventManager.instrumentTicker(),
compareEntities$,
indicatorEntities$,
});
diff --git a/src/core/PriceAxisLabels/PriceAxisLabels.ts b/src/core/PriceAxisLabels/PriceAxisLabels.ts
index 6a7fdcb..a749c8c 100644
--- a/src/core/PriceAxisLabels/PriceAxisLabels.ts
+++ b/src/core/PriceAxisLabels/PriceAxisLabels.ts
@@ -24,7 +24,7 @@ type PriceAxisSide = Direction.Left | Direction.Right;
interface PriceAxisLabelsParams {
mainSeries$: Observable<SeriesStrategies | null>;
- mainSymbol$: Observable<string>;
+ mainInstrumentTicker$: Observable<string>;
compareEntities$: Observable<Indicator[]>;
indicatorEntities$: Observable<Indicator[]>;
}
@@ -146,16 +146,14 @@ export class PriceAxisLabels {
private visibleLogicalRange: LogicalRange | null = null;
private currentPriceLine: IPriceLine | null = null;
private currentPriceLineHost: SeriesStrategies | null = null;
- private mainSymbol = '';
+ private mainInstrumentTicker = '';
private isHistoryMode = false;
private updateFrame: number | null = null;
- constructor({ mainSeries$, mainSymbol$, compareEntities$, indicatorEntities$ }: PriceAxisLabelsParams) {
+ constructor({ mainSeries$, mainInstrumentTicker$, compareEntities$, indicatorEntities$ }: PriceAxisLabelsParams) {
this.subscriptions.add(
- mainSymbol$.subscribe((symbol) => {
- const symbolParts = symbol.split(':');
-
- this.mainSymbol = symbolParts[symbolParts.length - 1] || symbol;
+ mainInstrumentTicker$.subscribe((instrumentTicker) => {
+ this.mainInstrumentTicker = instrumentTicker;
this.applyDisplayMode();
this.scheduleUpdate();
@@ -427,7 +425,7 @@ export class PriceAxisLabels {
if (source.role === 'main') {
source.series.applyOptions({
lastValueVisible: this.isHistoryMode ? false : defaults.lastValueVisible,
- title: this.isHistoryMode ? '' : this.mainSymbol || defaults.title,
+ title: this.isHistoryMode ? '' : this.mainInstrumentTicker || defaults.title,
});
return;
@@ -673,7 +671,7 @@ export class PriceAxisLabels {
axisLabelVisible: true,
axisLabelColor: color,
axisLabelTextColor: getContrastTextColor(color),
- title: this.mainSymbol,
+ title: this.mainInstrumentTicker,
});
}
diff --git a/src/core/Series/BaseSeries.ts b/src/core/Series/BaseSeries.ts
index 74e19e0..7ee8926 100644
--- a/src/core/Series/BaseSeries.ts
+++ b/src/core/Series/BaseSeries.ts
@@ -69,6 +69,7 @@ export interface BaseSeriesParams<TSeries extends SeriesType = SeriesType> {
lwcChart: IChartApi;
dataSource: DataSource;
mainSymbol$: Observable<string>;
+ mainInstrumentTicker$?: Observable<string>;
mainSerie$: BehaviorSubject<SeriesStrategies | null>;
customFormatter?: (params: IndicatorDataFormatter<TSeries>) => SeriesDataItemTypeMap<Time>[TSeries][];
seriesOptions?: SeriesPartialOptionsMap[TSeries];
@@ -103,6 +104,7 @@ export abstract class BaseSeries<TSeries extends SeriesType> implements IBaseSer
protected lwcChart: IChartApi;
protected mainSymbol$: Observable<string>;
+ protected mainInstrumentTicker$: Observable<string>;
protected mainSerie$: BehaviorSubject<SeriesStrategies | null>;
protected paneIndex: number | null = null;
protected indicatorReference: Indicator | null = null;
@@ -115,6 +117,7 @@ export abstract class BaseSeries<TSeries extends SeriesType> implements IBaseSer
constructor({
lwcChart,
mainSymbol$,
+ mainInstrumentTicker$,
mainSerie$,
customFormatter,
seriesOptions,
@@ -133,6 +136,7 @@ export abstract class BaseSeries<TSeries extends SeriesType> implements IBaseSer
this.lwcChart = lwcChart;
this.customFormatter = customFormatter;
this.mainSymbol$ = mainSymbol$;
+ this.mainInstrumentTicker$ = mainInstrumentTicker$ ?? mainSymbol$;
this.mainSerie$ = mainSerie$;
this.showSymbolLabel = showSymbolLabel;
this.indicatorReference = indicatorReference ?? null;
@@ -383,18 +387,24 @@ export abstract class BaseSeries<TSeries extends SeriesType> implements IBaseSer
protected subscribeDataSource = (dataSource: DataSource): void => {
const minMove = getPricePrecisionStep();
+ this.lwcSeries.applyOptions({
+ priceFormat: {
+ type: 'custom',
+ minMove,
+ formatter: (price: number) => formatPrice(price) ?? String(price),
+ },
+ });
+
this.subscriptions.add(
- this.mainSymbol$.pipe(distinctUntilChanged()).subscribe((symbol) => {
+ this.mainInstrumentTicker$.pipe(distinctUntilChanged()).subscribe((instrumentTicker) => {
this.lwcSeries.applyOptions({
- // todo: на каждый апдейт dataSource сеттим options. Не оптимально
- title: this.showSymbolLabel ? symbol : '',
- priceFormat: {
- type: 'custom',
- minMove,
- formatter: (price: number) => formatPrice(price) ?? String(price),
- },
+ title: this.showSymbolLabel ? instrumentTicker : '',
});
+ }),
+ );
+ this.subscriptions.add(
+ this.mainSymbol$.pipe(distinctUntilChanged()).subscribe((symbol) => {
this.dataSub?.unsubscribe();
this.realtimeSub?.unsubscribe();
diff --git a/src/core/UndoRedo.ts b/src/core/UndoRedo.ts
index 581b616..2e01b93 100644
--- a/src/core/UndoRedo.ts
+++ b/src/core/UndoRedo.ts
@@ -7,6 +7,8 @@ interface UndoConfig {
timeframe: (value: Timeframes) => void;
seriesSelected: (value: ChartSeriesType) => void;
symbol: (value: string) => void;
+ instrumentName: (value: string) => void;
+ instrumentTicker: (value: string) => void;
timeFormat: (value: TimeFormat) => void;
dateFormat: (value: DateFormat) => void;
interval: (value: Intervals | null) => void;
diff --git a/src/types/compare.ts b/src/types/compare.ts
index b8ef60f..89f00f9 100644
--- a/src/types/compare.ts
+++ b/src/types/compare.ts
@@ -4,7 +4,11 @@ export enum CompareMode {
NewPane = 'PANE',
}
-export interface CompareItem {
+export interface CompareInstrument {
symbol: string;
+ instrumentName?: string;
+ instrumentTicker?: string;
+}
+export interface CompareItem extends Required<CompareInstrument> {
mode: CompareMode;
}
diff --git a/src/types/indicator.ts b/src/types/indicator.ts
index ca45dca..3dcddec 100644
--- a/src/types/indicator.ts
+++ b/src/types/indicator.ts
@@ -22,7 +22,7 @@ export type IndicatorType = 'SMA' | 'EMA' | 'RSI' | 'OHLC' | 'VOL';
export type MASource = 'open' | 'high' | 'low' | 'close';
-export type IndicatorLabel = (ReturnType<typeof indicatorLabelById>)[IndicatorsIds];
+export type IndicatorLabel = ReturnType<typeof indicatorLabelById>[IndicatorsIds];
export interface IndicatorStateConfig {
type: IndicatorType;
@@ -48,6 +48,9 @@ export interface IndicatorConfig {
series: IndicatorSerie[];
settings?: SettingField[];
newPane?: boolean;
+ symbol?: string;
+ instrumentName?: string;
+ instrumentTicker?: string;
label?: string;
seriesLabels?: Record<string, string>;
paletteStartIndex?: number;
diff --git a/src/types/snapshot.ts b/src/types/snapshot.ts
index 157346b..d24be1f 100644
--- a/src/types/snapshot.ts
+++ b/src/types/snapshot.ts
@@ -28,6 +28,8 @@ export interface ChartSnapshot {
timeframe: Timeframes;
chartSeriesType: ChartSeriesType;
symbol: string;
+ instrumentName?: string;
+ instrumentTicker?: string;
timeFormat?: TimeFormat;
dateFormat?: DateFormat;
interval?: Intervals | null;
diff --git a/stories/MB/MB.stories.tsx b/stories/MB/MB.stories.tsx
index e5b193d..2e78be9 100644
--- a/stories/MB/MB.stories.tsx
+++ b/stories/MB/MB.stories.tsx
@@ -5,7 +5,7 @@ import { DateFormat, IMoexChart, Locale, MoexChart, Timeframes } from '@lib';
import { Portal } from '@lib/components/Portal';
import { IndicatorsIds } from '@lib/constants';
import { CompareManager } from '@lib/core/CompareManager';
-import { CompareMode } from '@lib/types';
+import { CompareInstrument, CompareMode } from '@lib/types';
import { dataSourceProvider } from '../common';
@@ -183,6 +183,12 @@ export const MB: Story = {
},
};
+const COMPARE_ITEMS: CompareInstrument[] = [
+ { symbol: 'SBER', instrumentName: 'SBER', instrumentTicker: 'SBER' },
+ { symbol: 'APAX', instrumentName: 'APAX', instrumentTicker: 'APAX' },
+ { symbol: 'SOL', instrumentName: 'SOL', instrumentTicker: 'SOL' },
+];
+
const Modal = ({ onClose, compareManager }: { onClose: () => void; compareManager: CompareManager | null }) => {
const [isNewScaleDisabled, setIsNewScaleDisabled] = useState(false);
@@ -234,22 +240,22 @@ const Modal = ({ onClose, compareManager }: { onClose: () => void; compareManage
...containerStyles,
}}
>
- {['SBER', 'APAX', 'SOL'].map((symbol) => (
+ {COMPARE_ITEMS.map((instrument) => (
<div
- key={symbol}
+ key={instrument.symbol}
style={{ display: 'flex', justifyContent: 'space-between', gap: 16 }}
>
- <span>{symbol}</span>
+ <span>{instrument.instrumentTicker}</span>
<div style={{ display: 'flex', gap: 8 }}>
<button
- onClick={() => compareManager?.setSymbolMode('Line', symbol, CompareMode.Percentage)}
+ onClick={() => compareManager?.setSymbolMode('Line', instrument, CompareMode.Percentage)}
style={buttonStyles}
type="button"
>
%
</button>
<button
- onClick={() => compareManager?.setSymbolMode('Line', symbol, CompareMode.NewScale)}
+ onClick={() => compareManager?.setSymbolMode('Line', instrument, CompareMode.NewScale)}
style={{
backgroundColor: isNewScaleDisabled ? 'darkgray' : 'lightgray',
padding: '2px 8px',
@@ -261,7 +267,7 @@ const Modal = ({ onClose, compareManager }: { onClose: () => void; compareManage
Новая шкала
</button>
<button
- onClick={() => compareManager?.setSymbolMode('Line', symbol, CompareMode.NewPane)}
+ onClick={() => compareManager?.setSymbolMode('Line', instrument, CompareMode.NewPane)}
style={buttonStyles}
type="button"
>
diff --git a/stories/TradeRadar/TradeRadar.stories.tsx b/stories/TradeRadar/TradeRadar.stories.tsx
index 99f3b84..48c3c4e 100644
--- a/stories/TradeRadar/TradeRadar.stories.tsx
+++ b/stories/TradeRadar/TradeRadar.stories.tsx
@@ -5,7 +5,7 @@ import { createPortal } from 'react-dom';
import { CompareManager } from '@core/CompareManager';
import { DateFormat, IMoexChart, Locale, MoexChart, Timeframes } from '@lib';
import { IndicatorsIds } from '@lib/constants';
-import { CompareMode } from '@lib/types';
+import { CompareInstrument, CompareMode } from '@lib/types';
// import { argTypes } from '../argTypes';
@@ -219,6 +219,12 @@ export const TradeRadar: Story = {
},
};
+const COMPARE_ITEMS: CompareInstrument[] = [
+ { symbol: 'SBER', instrumentName: 'SBER', instrumentTicker: 'SBER' },
+ { symbol: 'APAX', instrumentName: 'APAX', instrumentTicker: 'APAX' },
+ { symbol: 'SOL', instrumentName: 'SOL', instrumentTicker: 'SOL' },
+];
+
const Modal = ({ onClose, compareManager }: { onClose: () => void; compareManager: CompareManager | null }) => {
const [isNewScaleDisabled, setIsNewScaleDisabled] = useState(false);
@@ -262,22 +268,22 @@ const Modal = ({ onClose, compareManager }: { onClose: () => void; compareManage
backgroundColor: 'white',
}}
>
- {['SBER', 'APAX', 'SOL'].map((symbol) => (
+ {COMPARE_ITEMS.map((instrument) => (
<div
- key={symbol}
+ key={instrument.symbol}
style={{ display: 'flex', justifyContent: 'space-between', gap: 16 }}
>
- <span>{symbol}</span>
+ <span>{instrument.instrumentTicker}</span>
<div style={{ display: 'flex', gap: 8 }}>
<button
- onClick={() => compareManager?.setSymbolMode('Line', symbol, CompareMode.Percentage)}
+ onClick={() => compareManager?.setSymbolMode('Line', instrument, CompareMode.Percentage)}
style={{ backgroundColor: 'lightgray', padding: '2px 8px' }}
type="button"
>
%
</button>
<button
- onClick={() => compareManager?.setSymbolMode('Line', symbol, CompareMode.NewScale)}
+ onClick={() => compareManager?.setSymbolMode('Line', instrument, CompareMode.NewScale)}
style={{
backgroundColor: isNewScaleDisabled ? 'darkgray' : 'lightgray',
padding: '2px 8px',
@@ -289,7 +295,7 @@ const Modal = ({ onClose, compareManager }: { onClose: () => void; compareManage
Новая шкала
</button>
<button
- onClick={() => compareManager?.setSymbolMode('Line', symbol, CompareMode.NewPane)}
+ onClick={() => compareManager?.setSymbolMode('Line', instrument, CompareMode.NewPane)}
style={{ backgroundColor: 'lightgray', padding: '2px 8px' }}
type="button"
>
