dxFeed integration

dxChart is data agnostic, but internally we integrate with dxFeed data provider a lot

This article will help you to connect chart-react with dx-feed-data-provider in your application

Install dx-feed-data-provider

There is a separate dx-feed-data-provider package which implements the ChartDataProvider interface (read Providers page)

Add the package dependency to start using it:

  {
    ...,
    "dependencies": {
      ...,
      "@dx-private/dxchart-dx-feed-data-provider": "^0.7.0",
    }
  }

If you have a ZIP with a package, you can utilize yarn/npm local package install. You can find an example here.

Create dxFeed chart data provider

Now you need to create dx-feed-data-provider instance and put it to ChartReactApp component dependencies.

Use the following code below as an example

import React from 'react';
import { ChartAppDependencies, ChartReactApp } from '@dx-private/dxchart5-react/dist/chart/chart-react-app';
import { createDxFeedProvider } from '@dx-private/dxchart-dx-feed-data-provider/dist/provider/dxfeed-data-provider';
import { createDxLinkAdapter } from '@dx-private/dxchart-dx-feed-data-provider/dist/dx-feed-adapter/dx-link/dx-link-data-adapter';
import { useEffect, useState } from 'react';
import { ChartDataProvider } from '@dx-private/dxchart5-react/dist/providers/chart-data-provider';
import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers/dist';
import BrowserOnly from '@docusaurus/BrowserOnly';
export const DxFeedIntegrationExample = () => {
    return <BrowserOnly>{() => <DxFeedIntegrationExampleBase />}</BrowserOnly>;
};
export const DxFeedIntegrationExampleBase = () => {
    const [chartDataProvider, setChartDataProvider] = useState<ChartDataProvider | undefined>(undefined);
    useEffect(() => {
        // you can pass options object as an argument
        // {
        //     endpointUrl: 'dxfeed-endpoint-url',
        //     authToken: 'dxfeed-auth-token',
        //     acceptAggregationPeriod: 1,
        // }
        createDxLinkAdapter().then(dxLinkAdapter => {
            const dxFeedProvider = createDxFeedProvider(dxLinkAdapter);
            setChartDataProvider(dxFeedProvider);
        });
    }, []);
    if (!chartDataProvider) {
        return null;
    }
    const dependencies: ChartAppDependencies = {
        ...CREATE_MOCK_PROVIDERS(),
        chartDataProvider,
    };
    return (
        <div style={{ height: '400px' }}>
            <ChartReactApp dependencies={dependencies} />
        </div>
    );
};

The result of the code above:

dxFeed Cryptocurrency Instruments Case

By default, dxFeed classifies cryptocurrency instruments as FOREX. As a result, the library also treats them as FOREX. To prevent this, you should change the instrument type to CRYPTO within the Symbol Suggest Provider implementation. Otherwise, the priceType option will be last instead of market.

Here's an example of such function:

export const requestIPFSinglePromiseExample = (
	url: string,
	symbol: string,
	headersData: HeadersAllowed,
): Promise<Instrument> => {
	const headers = new Headers();
	pipe(
		headersData,
		mapWithIndex((key, value) => headers.set(key, value)),
	);
	const query = `${url}?SYMBOL=${symbol}`;
	return fetch(query, { headers })
		.then(res => res.text())
		.then(parseIpfFile)
		.then(res => {
			if (either.isRight(res)) {
				return pipe(
					res.right,
					array.findFirst(item => item.symbol === symbol),
					option.fold(
						() => {
							if (res.right[0] !== undefined) {
								return res.right[0];
							} else {
								throw new Error('instrument not found');
							}
						},
						// change of type for crypto case
						instrument => (isCrypto(instrument.symbol) ? { ...instrument, type: 'CRYPTO' } : instrument),
					),
				);
			}
			throw res.left;
		});
};

export const isCrypto = (symbol: string) => /^[^:]+:CX.*$/.test(symbol);

Currently, this is the only solution due to the specifics of dxFeed instrument data