Refactoring examples with sci chart react

This PR includes:

Refactoring some of the examples with SciChartReact
Splitting examples source code into the chart setup and the UI logic modules

!!! Some of the examples are not updated yet

For trivial examples the result would look as following:

// drawExample.ts
import { appTheme } from "scichart-example-dependencies";
import { ... } from "scichart";

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

   // ... chart setup logic ...

    return { sciChartSurface };
};

// index.tsx
import * as React from "react";
import { appTheme } from "scichart-example-dependencies";
import { SciChartReact } from "scichart-react";
import classes from "../../../styles/Examples.module.scss";
import { drawExample } from "./drawExample";

// React component needed as our examples app is react.
// SciChart can be used in Angular, Vue, Blazor and vanilla JS! See our Github repo for more info
export default function ChartComponent() {
    return <SciChartReact initChart={drawExample} className={classes.ChartWrapper} />;
}

ABTSoftware / SciChart.JS.Examples

Refactoring examples with sci chart react #201

Review or Edit in CodeSandbox