Skip to main content

DxScript integration

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

Install dx-script-platform-provider​

There is a separate dx-script-platform-provider package which implements the DxScriptProvider and DxScriptRunner interfaces (read Providers page)

Add the package dependency to start using it:

  {
    ...,
    "dependencies": {
      ...,
      "@dx-private/dxchart-dx-script-platform-provider": "^0.1.0",
    }
  }

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

Create DxScript chart data provider​

Now you need to create dx-script-platform-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 { createDxScriptDemoProvider } from '@dx-private/dxchart-dx-script-platform-provider/dist/provider/dx-script-provider';
import { createDxScriptRunner } from '@dx-private/dxchart-dx-script-platform-provider/dist/provider/dx-script-runner';
import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers/dist';
import BrowserOnly from '@docusaurus/BrowserOnly';
export const DxScriptIntegrationExample = () => {
    const dependencies: ChartAppDependencies = {
        ...CREATE_MOCK_PROVIDERS(),
        dxScriptProvider: createDxScriptDemoProvider({
            endpointUrl: 'https://webdev.prosp.devexperts.com:8095/api/script',
        }),
        dxScriptRunner: createDxScriptRunner({ endpointUrl: 'https://webdev.prosp.devexperts.com:8095/api/script' }),
    };
    return (
        <div style={{ height: '400px' }}>
            <BrowserOnly>{() => <ChartReactApp dependencies={dependencies} />}</BrowserOnly>
        </div>
    );
};

The result of the code above: