Subchart Wrappers

demos/features/subchart-wrappers/README.md

@@ -0,0 +1,8 @@
+# SciChartGroup Demo
+
+The component is intended to allow easily distinguishing when all of the child SciChartReact components are initialized.
+This allows to set a callback for _all initialized_ event and capture the init results of all of the charts within group.
+
+# Project config Config
+
+This demo imports the lib source files directly.

demos/features/subchart-wrappers/package.json

@@ -0,0 +1,31 @@
+{
+    "name": "scichart-react-group-demo",
+    "version": "1.0.0",
+    "description": "SciChart demo with react, webpack, and typescript. Uses the lib and dependencies from parent folder",
+    "main": "index.js",
+    "scripts": {
+        "build": "webpack --mode production",
+        "start": "ts-node server",
+        "tsc": "tsc",
+        "dev": "webpack-dev-server --mode development"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "dependencies": {
+        "css-loader": "^6.8.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "style-loader": "^3.3.3"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.15",
+        "@types/react-dom": "^18.2.7",
+        "copy-webpack-plugin": "^11.0.0",
+        "prettier": "^2.4.1",
+        "ts-loader": "^9.4.2",
+        "webpack": "^5.59.0",
+        "webpack-cli": "^5.0.1",
+        "webpack-dev-server": "^4.11.1"
+    }
+}

demos/features/subchart-wrappers/server.ts

@@ -0,0 +1,11 @@
+import * as express from "express";
+
+const app = express();
+const port = parseInt(process.env.PORT || "3000", 10);
+const host = process.env.HOST || "localhost";
+
+app.use(express.static("build"));
+
+app.listen(port, () => {
+    console.log(`Example app listening at http://${host}:${port}`);
+});

demos/features/subchart-wrappers/src/App.tsx

@@ -0,0 +1,220 @@
+import {
+    CursorModifier,
+    EAutoRange,
+    EAxisType,
+    ECoordinateMode,
+    EThemeProviderType,
+    EXyDirection,
+    FastLineRenderableSeries,
+    MouseWheelZoomModifier,
+    NumberRange,
+    NumericAxis,
+    Rect,
+    SciChartDefaults,
+    SciChartSubSurface,
+    SciChartSurface,
+    TSciChart,
+    XyDataSeries,
+    XyScatterRenderableSeries,
+    ZoomPanModifier,
+    chartBuilder
+} from "scichart";
+import { IInitResult, SciChartGroup, SciChartReact, TResolvedReturnType } from "../../../../src";
+import { BottomSection, LeftSection, RightSection, SubChart, TopSection } from "../../../../src/SubChart";
+import "./styles.css";
+
+// SciChart core lib requires asynchronously loaded WASM module.
+// It could be loaded from CDN or by specified path.
+// check out SciChart.JS Docs for configuration info
+SciChartSurface.useWasmFromCDN();
+SciChartDefaults.performanceWarnings = false;
+
+export function App() {
+    return (
+        <div className="App">
+            <SciChartReact<SciChartSurface>
+                style={{ width: 1080, height: 720 }}
+                fallback={<div className="fallback">Data fetching & Chart Initialization in progress</div>}
+                initChart={chartInitializationFunction}
+                onInit={(initResult: TResolvedReturnType<typeof chartInitializationFunction>) => {
+                    console.log("Chart 1 onInit");
+                }}
+                onDelete={(initResult: TResolvedReturnType<typeof chartInitializationFunction>) => {
+                    console.log("Chart 1 onDelete");
+                }}
+            >
+                <SubChart
+                    options={{
+                        coordinateMode: ECoordinateMode.Relative,
+                        position: new Rect(0.2, 0.2, 0.7, 0.7)
+                    }}
+                    onInit={initSubChart}
+                    onDelete={surface => {
+                        /* cleanup anything not surface related */
+                    }}
+                >
+                    <LeftSection
+                        style={{
+                            width: "20%",
+                            height: "100%",
+                            color: "white",
+                            backgroundColor: "green",
+                            opacity: 0.7
+                        }}
+                    >
+                        Left Section Content.
+                        <hr />
+                        Your Ad could go here
+                    </LeftSection>
+                    <RightSection
+                        style={{
+                            width: "20%",
+                            height: "100%",
+                            color: "white",
+                            backgroundColor: "blue",
+                            opacity: 0.7
+                        }}
+                    >
+                        Left Section Content.
+                        <hr />
+                        Your Ad could go here
+                    </RightSection>
+                    <TopSection
+                        style={{
+                            width: "60%",
+                            height: "20%",
+                            marginLeft: "20%",
+                            color: "white",
+                            backgroundColor: "brown",
+                            opacity: 0.7
+                        }}
+                    >
+                        Top Section Content.
+                        <hr />
+                        Your Ad could go here
+                    </TopSection>
+                    <BottomSection
+                        style={{
+                            width: "60%",
+                            height: "20%",
+                            marginLeft: "20%",
+                            color: "white",
+                            backgroundColor: "pink",
+                            opacity: 0.7
+                        }}
+                    >
+                        Bottom Section Content.
+                        <hr />
+                        Your Ad could go here
+                    </BottomSection>
+                </SubChart>
+            </SciChartReact>
+        </div>
+    );
+}
+function getData(wasmContext: TSciChart, chartNumber: number, points: number) {
+    const xValues = Array.from(Array(points).keys());
+    const yValues = xValues.map(x => Math.sin(x * 0.3 + chartNumber * 0.1));
+
+    const xyDataSeries = new XyDataSeries(wasmContext, { xValues, yValues, containsNaN: false });
+    return xyDataSeries;
+}
+
+const chartInitializationFunction = async (rootElement: string | HTMLDivElement) => {
+    const createChart = async () => {
+        console.log("createChart");
+        // for demonstration purposes, here we have used Builder API explicitly
+        const { sciChartSurface } = await chartBuilder.build2DChart(rootElement, {
+            xAxes: {
+                type: EAxisType.NumericAxis,
+                options: {
+                    autoRange: EAutoRange.Once,
+                    growBy: new NumberRange(0.2, 0.2)
+                }
+            },
+            yAxes: {
+                type: EAxisType.NumericAxis,
+                options: { autoRange: EAutoRange.Never }
+            },
+            surface: {
+                disableAspect: true,
+                theme: { type: EThemeProviderType.Dark },
+                title: "Scatter Chart",
+                titleStyle: {
+                    fontSize: 20
+                }
+            }
+        });
+
+        return sciChartSurface;
+    };
+
+    // a function that simulates an async data fetching
+    const getData = async () => {
+        await new Promise(resolve => {
+            setTimeout(() => resolve({}), 1500);
+        });
+
+        return { xValues: [0, 1, 2, 3, 4], yValues: [3, 6, 1, 5, 2] };
+    };
+
+    const [sciChartSurface] = await Promise.all([createChart()]);
+
+    const wasmContext = sciChartSurface.webAssemblyContext2D;
+
+    // sciChartSurface.renderableSeries.add(
+    //     new XyScatterRenderableSeries(wasmContext, {
+    //         dataSeries: new XyDataSeries(wasmContext, {
+    //             ...data
+    //         }),
+    //         strokeThickness: 4,
+    //         stroke: "#216939"
+    //     })
+    // );
+    return { sciChartSurface };
+};
+
+const initSubChart = (sub: SciChartSubSurface) => {
+    const wasmContext = sub.webAssemblyContext2D;
+    sub.xAxes.add(
+        new NumericAxis(wasmContext, {
+            isVisible: true,
+            drawMajorGridLines: true,
+            drawMajorBands: false,
+            drawMajorTickLines: false,
+            drawMinorTickLines: false,
+            drawMinorGridLines: false,
+            drawLabels: true,
+            growBy: new NumberRange(0, 0.2),
+            labelStyle: { fontSize: 10 }
+        })
+    );
+    sub.xAxes.get(0).labelProvider.useNativeText = true;
+    sub.xAxes.get(0).labelProvider.useSharedCache = true;
+    sub.yAxes.add(
+        new NumericAxis(wasmContext, {
+            isVisible: true,
+            drawMajorGridLines: true,
+            drawMajorBands: false,
+            drawMajorTickLines: false,
+            drawMinorTickLines: false,
+            drawMinorGridLines: false,
+            drawLabels: true,
+            growBy: new NumberRange(0.05, 0.05),
+            labelStyle: { fontSize: 10 }
+        })
+    );
+
+    sub.renderableSeries.add(
+        new FastLineRenderableSeries(wasmContext, {
+            stroke: "SteelBlue",
+            strokeThickness: 2,
+            dataSeries: getData(wasmContext, 2, 100)
+        })
+    );
+    sub.chartModifiers.add(
+        new ZoomPanModifier({ xyDirection: EXyDirection.XDirection }),
+        new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection }),
+        new CursorModifier({ showTooltip: true })
+    );
+};

demos/features/subchart-wrappers/src/index.html

@@ -0,0 +1,11 @@
+<html lang="en-us">
+    <head>
+        <meta charset="utf-8" />
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+        <title>SciChart demo with webpack and typescript</title>
+        <script async type="text/javascript" src="bundle.js"></script>
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>

demos/features/subchart-wrappers/src/index.tsx

@@ -0,0 +1,11 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import { SciChartMemoryDebugWrapper } from "../../../../src";
+
+// Clear the existing HTML content
+document.body.innerHTML = '<div id="app"></div>';
+
+// Render your React component instead
+const root = createRoot(document.getElementById("app") as HTMLElement);
+root.render(<App />);

demos/features/subchart-wrappers/src/styles.css

@@ -0,0 +1,54 @@
+.App {
+    font-family: sans-serif;
+    text-align: center;
+}
+
+.flex-container {
+    display: flex;
+    width: 800px;
+}
+
+.fallback {
+    display: flex;
+    align-items: center;
+    background-color: #242529;
+    width: 100%;
+    height: 300px;
+    font-size: 30px;
+    color: grey;
+}
+
+.fallback > div {
+    flex: auto;
+    text-wrap: pretty;
+}
+
+.data-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(7, 1fr);
+
+    background: black;
+    color: grey;
+
+    width: 50%;
+    gap: 4;
+}
+
+.grid-header {
+    grid-area: 1 / 1 / 2 / 3;
+}
+
+.colum-header {
+    grid-row: 2 / 3;
+}
+
+.grid-cell {
+    grid-row-end: span 1;
+    display: flex;
+    align-items: center;
+}
+
+.grid-cell > div {
+    flex: auto;
+}

demos/features/subchart-wrappers/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "./build",
+        "lib": ["es2020", "DOM"],
+        "moduleResolution": "node",
+        "module": "CommonJS",
+        "resolveJsonModule": true,
+        "allowJs": true,
+        "checkJs": true,
+        "strict": true,
+        "target": "ES2015",
+        "declarationDir": "types",
+        "jsx": "react-jsx",
+        "declaration": true
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules"]
+}