chore(storybook): add SciChartReact examples with 3D, Pie Charts and …

…Typescript usage

src/stories/DocExamples/ChartUsageWithTypescript.tsx

@@ -0,0 +1,146 @@
+import { useContext } from "react";
+import {
+    XyDataSeries,
+    MountainAnimation,
+    EAutoRange,
+    NumberRange,
+    NumericAxis,
+    SciChartSurface,
+    SplineMountainRenderableSeries,
+    easing
+} from "scichart";
+import { SciChartReact, SciChartSurfaceContext, TResolvedReturnType } from "scichart-react";
+
+// get the TInitResult type specialization from initialization function using a helper utility type
+type TChartInitializationResult = TResolvedReturnType<typeof initializationFunction>;
+
+export const ChartUsageWithTypescript = () => (
+    <SciChartReact<SciChartSurface, TChartInitializationResult>
+        fallback={fallbackComponent}
+        initChart={initializationFunction}
+        onInit={(initResult: TChartInitializationResult) => {
+            // enable updating the chart when it is rendered
+            initResult.startUpdate();
+        }}
+        onDelete={(initResult: TChartInitializationResult) => {
+            // do a cleanup after the component unmounts
+            initResult.stopUpdate();
+        }}
+        style={{
+            aspectRatio: 2,
+            minWidth: "600px",
+            minHeight: "300px"
+        }}
+    >
+        <div style={{ display: "flex", justifyContent: "center" }}>
+            <StartButton />
+            <StopButton />
+        </div>
+    </SciChartReact>
+);
+
+const StartButton = () => {
+    const initResult = useContext(SciChartSurfaceContext) as TChartInitializationResult;
+    const handleClick = () => {
+        initResult.startUpdate();
+    };
+    return <input type="button" onClick={handleClick} value="Start Animation"></input>;
+};
+
+const StopButton = () => {
+    const initResult = useContext(SciChartSurfaceContext) as TChartInitializationResult;
+    const handleClick = () => {
+        initResult.stopUpdate();
+    };
+    return <input type="button" onClick={handleClick} value="Stop Animation"></input>;
+};
+
+const fallbackComponent = (
+    <div
+        style={{
+            aspectRatio: 2,
+            minWidth: "600px",
+            minHeight: "300px",
+            display: "flex",
+            alignItems: "center",
+            backgroundColor: "#242529",
+            top: 0,
+            left: 0,
+            width: 600,
+            height: 200,
+            fontSize: 30,
+            color: "grey",
+            textAlign: "center",
+            verticalAlign: "middle",
+            justifyContent: "stretch"
+        }}
+    >
+        <div style={{ flex: "auto" }}> Loading...</div>
+    </div>
+);
+
+const initializationFunction = async (rootElement: string | HTMLDivElement) => {
+    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement);
+
+    const xAxis = new NumericAxis(wasmContext, {
+        autoRange: EAutoRange.Never,
+        visibleRange: new NumberRange(0, 9)
+    });
+    const yAxis = new NumericAxis(wasmContext, {
+        autoRange: EAutoRange.Never,
+        visibleRange: new NumberRange(0, 12)
+    });
+
+    sciChartSurface.xAxes.add(xAxis);
+    sciChartSurface.yAxes.add(yAxis);
+
+    const mountainSeries = new SplineMountainRenderableSeries(wasmContext, {
+        dataSeries: new XyDataSeries(wasmContext, {
+            xValues: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+            yValues: [1, 4, 7, 3, 7, 6, 7, 4, 2, 5]
+        }),
+        fill: "#3ca832",
+        stroke: "#eb911c",
+        strokeThickness: 4,
+        opacity: 0.4
+    });
+
+    sciChartSurface.renderableSeries.add(mountainSeries);
+
+    // create a temp series for passing animation values
+    const animationSeries = new XyDataSeries(wasmContext);
+    // register this so it is deleted along with the main surface
+    sciChartSurface.addDeletable(animationSeries);
+
+    const updatePoints = () => {
+        const numberOfPoints = 10;
+        const xValues = new Array(numberOfPoints);
+        const yValues = new Array(numberOfPoints);
+
+        // Generate points
+        for (let j = 0; j < numberOfPoints; ++j) {
+            xValues[j] = j;
+            yValues[j] = Math.random() * 10 + 1;
+        }
+
+        // update points
+        animationSeries.clear();
+        animationSeries.appendRange(xValues, yValues);
+
+        mountainSeries.runAnimation(
+            new MountainAnimation({ duration: 300, ease: easing.outQuad, dataSeries: animationSeries })
+        );
+    };
+
+    let timerId;
+    const startUpdate = () => {
+        clearInterval(timerId);
+        timerId = setInterval(updatePoints, 400);
+    };
+
+    const stopUpdate = () => {
+        clearInterval(timerId);
+    };
+
+    return { sciChartSurface, startUpdate, stopUpdate };
+};

src/stories/DocExamples/ChartWith3dSurface.tsx

@@ -0,0 +1,111 @@
+import {
+    CameraController,
+    EDrawMeshAs,
+    GradientColorPalette,
+    MouseWheelZoomModifier3D,
+    NumberRange,
+    NumericAxis3D,
+    OrbitModifier3D,
+    ResetCamera3DModifier,
+    SciChart3DSurface,
+    SurfaceMeshRenderableSeries3D,
+    UniformGridDataSeries3D,
+    Vector3,
+    zeroArray2D
+} from "scichart";
+import { SciChartReact } from "scichart-react";
+
+export const ChartWith3dSurface = () => (
+    <SciChartReact
+        initChart={async rootElement => {
+            const { sciChart3DSurface, wasmContext } = await SciChart3DSurface.create(rootElement);
+
+            // Create and position the camera in the 3D world
+            sciChart3DSurface.camera = new CameraController(wasmContext, {
+                position: new Vector3(-200, 150, 200),
+                target: new Vector3(0, 50, 0)
+            });
+            // Set the worlddimensions, which defines the Axis cube size
+            sciChart3DSurface.worldDimensions = new Vector3(200, 100, 200);
+
+            // Add an X,Y and Z Axis
+            sciChart3DSurface.xAxis = new NumericAxis3D(wasmContext, { axisTitle: "X Axis" });
+            sciChart3DSurface.yAxis = new NumericAxis3D(wasmContext, {
+                axisTitle: "Y Axis",
+                visibleRange: new NumberRange(0, 0.3)
+            });
+            sciChart3DSurface.zAxis = new NumericAxis3D(wasmContext, { axisTitle: "Z Axis" });
+
+            // Create a 2D array using the helper function zeroArray2D
+            // and fill this with data
+            const zSize = 25;
+            const xSize = 25;
+            const heightmapArray = zeroArray2D([zSize, xSize]);
+            for (let z = 0; z < zSize; z++) {
+                for (let x = 0; x < xSize; x++) {
+                    const xVal = (x / xSize) * 25.0;
+                    const zVal = (z / zSize) * 25.0;
+                    const y = Math.sin(xVal * 0.2) / ((zVal + 1) * 2);
+                    heightmapArray[z][x] = y;
+                }
+            }
+
+            // Create a UniformGridDataSeries3D
+            const dataSeries = new UniformGridDataSeries3D(wasmContext, {
+                yValues: heightmapArray,
+                xStep: 1,
+                zStep: 1,
+                dataSeriesName: "Uniform Surface Mesh"
+            });
+
+            // Create the color map
+            const colorMap = new GradientColorPalette(wasmContext, {
+                gradientStops: [
+                    { offset: 1, color: "pink" },
+                    { offset: 0.9, color: "orange" },
+                    { offset: 0.7, color: "red" },
+                    { offset: 0.5, color: "green" },
+                    { offset: 0.3, color: "blue" },
+                    { offset: 0, color: "violet" }
+                ]
+            });
+
+            // Finally, create a SurfaceMeshRenderableSeries3D and add to the chart
+            const series = new SurfaceMeshRenderableSeries3D(wasmContext, {
+                dataSeries,
+                minimum: 0,
+                maximum: 0.5,
+                opacity: 0.9,
+                cellHardnessFactor: 1.0,
+                shininess: 0,
+                lightingFactor: 0.0,
+                highlight: 1.0,
+                stroke: "blue",
+                strokeThickness: 2.0,
+                contourStroke: "blue",
+                contourInterval: 2,
+                contourOffset: 0,
+                contourStrokeThickness: 2,
+                drawSkirt: false,
+                drawMeshAs: EDrawMeshAs.SOLID_WIREFRAME,
+                meshColorPalette: colorMap,
+                isVisible: true
+            });
+
+            sciChart3DSurface.renderableSeries.add(series);
+
+            // Optional: Add some interactivity modifiers
+            sciChart3DSurface.chartModifiers.add(new MouseWheelZoomModifier3D());
+            sciChart3DSurface.chartModifiers.add(new OrbitModifier3D());
+            sciChart3DSurface.chartModifiers.add(new ResetCamera3DModifier());
+
+            // the returned result should contain at least a reference to the created surface as `sciChartSurface`
+            return { sciChartSurface: sciChart3DSurface };
+        }}
+        style={{
+            aspectRatio: 2,
+            minWidth: "600px",
+            minHeight: "300px"
+        }}
+    />
+);

src/stories/DocExamples/ChartWithInitFunction.tsx

@@ -11,6 +11,7 @@ import { SciChartReact } from "scichart-react";
 
 export const ChartWithInitFunction = () => (
     <SciChartReact
+        // init function should use the `rootElement` param in an appropriate `create` method and then return an object with the surface reference
         initChart={async rootElement => {
             const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement);
 
@@ -36,6 +37,7 @@ export const ChartWithInitFunction = () => (
                 new ZoomExtentsModifier()
             );
 
+            // the returned result should contain at least a reference to the created surface
             return { sciChartSurface };
         }}
         style={{

src/stories/DocExamples/ChartWithPieSurface.tsx

@@ -0,0 +1,63 @@
+import { EColor, GradientParams, PieSegment, Point, SciChartPieSurface } from "scichart";
+import { SciChartReact } from "scichart-react";
+
+export const ChartWithPieSurface = () => (
+    <SciChartReact
+        initChart={async rootElement => {
+            const sciChartPieSurface = await SciChartPieSurface.create(rootElement);
+
+            const pieSegment1 = new PieSegment({
+                color: EColor.Green,
+                value: 10,
+                text: "Green",
+                delta: 10,
+                colorLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
+                    { color: "#1D976C", offset: 0 },
+                    { color: "#93F9B9", offset: 1 }
+                ])
+            });
+            pieSegment1.radiusAdjustment = 1.2;
+            const pieSegment2 = new PieSegment({
+                color: EColor.Red,
+                value: 20,
+                text: "Red",
+                delta: 20,
+                colorLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
+                    { color: "#DD5E89", offset: 0 },
+                    { color: "#F7BB97", offset: 1 }
+                ])
+            });
+            pieSegment2.radiusAdjustment = 0.7;
+            const pieSegment3 = new PieSegment({
+                color: EColor.Blue,
+                value: 30,
+                text: "Blue",
+                delta: 30,
+                colorLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
+                    { color: "#2b2828", offset: 0 },
+                    { color: "#656565", offset: 1 }
+                ])
+            });
+            const pieSegment4 = new PieSegment({
+                color: EColor.Yellow,
+                value: 40,
+                text: "Yellow",
+                delta: 40,
+                colorLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
+                    { color: "#F09819", offset: 0 },
+                    { color: "#EDDE5D", offset: 1 }
+                ])
+            });
+
+            sciChartPieSurface.pieSegments.add(pieSegment1, pieSegment2, pieSegment3, pieSegment4);
+
+            // the returned result should contain at least a reference to the created surface as `sciChartSurface`
+            return { sciChartSurface: sciChartPieSurface };
+        }}
+        style={{
+            aspectRatio: 2,
+            minWidth: "600px",
+            minHeight: "300px"
+        }}
+    />
+);