refactor(examples): replace direct core lib usage with SciChartReact

[jim-risen]

Checklist for converting folder structure and examples to a new format

Extracting chart setup logic

To reuse the same chart setup logic we need to extract it to a separate file - drawExample.ts.
Usually, the setup logic is contained within a drawExample function.
So we need to move it from index.tsx to the drawExample.ts and export it from there.
Then to allow the function to be passed to the SciChartReact we need to ensure it has the proper signature for input param and passes it to SciChartSurface.create method.

export const drawExample = async (rootElement: string | HTMLDivElement) => {
const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement, ...)

Also, it should return an object that contains at least the sciChartSurface property:

return { sciChartSurface }

Currently, most of the examples should already return the reference to a surface.
Also, they can return other properties that might be used by the consuming code, so should be handled accordingly if so.

---

Side Note The examples that have multiple charts might use a different approach. Please take a look at the Interactive Waterfall Example for reference.

---

SciChartReact Usage

After extracting the logic we can replace the root element for a chart with SciChartReact.
SciChartReact will call the drawExample function passed via initChart property and will manage the deletion of the surface returned by the drawExample as well. So these lines could be removed from the effect hook (and potentially the whole usage effect hook could be removed as well):

const chartInitializationPromise = drawExample().then((res) => {
    sciChartSurfaceRef.current = res.sciChartSurface;
});
//...

// check if chart is already initialized
if (sciChartSurfaceRef.current) {
    sciChartSurfaceRef.current.delete();
    return;
}

// else postpone deletion
chartInitializationPromise.then(() => {
    sciChartSurfaceRef.current.delete();
});

But if there is any other logic happening between those lines that is potentially need for the example, it is probably should be moved to the onInit / onDelete callbacks set on SciChartReact.

Usually, there are some properties exposed so they could be used within the UI controls.

Vanilla Typescript / Javascript Setup

The next step would be to provide a code setup with different frameworks including Vanilla TS / JS Currently we could open a Vanilla setup for a chart example via CodeSandbox. It requires vanilla.ts file to exist within a folder. To test it you need to have a server running since it uses server API to generate a redirect form. Potentially this could also be tested without redirecting to CodeSandbox by using /vanillaDemo endpoint. E.g. https://demo.scichart.com/vanillaDemo/mountain-chart/index.html?nav=1 But it seems to be broken at the moment.

[codesandbox[bot]]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview