Update scichart-react to 2.0.0-alpha.2 (Examples + react boilerplates)

BoilerPlates/react-vite/package.json

@@ -13,8 +13,8 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "scichart": "6.0.0-alpha.145",
-    "scichart-react": "^0.1.13",
+    "scichart": "6.0.0-alpha.164",
+    "scichart-react": "2.0.0-alpha.2",
     "vite-plugin-static-copy": "^4.1.1"
   },
   "devDependencies": {

BoilerPlates/react-vite/src/App.tsx

@@ -67,8 +67,9 @@ function App() {
       <h1>SciChart with React + Vite</h1>
 
       <SciChartReact
-        style={{ width: 900 }}
-        // This is for our useBuilderAPI config (uncomment and comment `initChart` to see)
+        style={{ width: 900, height: 600 }}
+        // To create a chart from a Builder API config instead, render <SciChartDeclarative/>
+        // (imported from "scichart-react") with a `config` prop like this:
         // config={{
         //   type: ESciChartSurfaceType.Default2D,
         //   xAxes: [{ type: EAxisType.NumericAxis }],

BoilerPlates/react-vite/vite.config.ts

@@ -8,22 +8,11 @@ export default defineConfig({
     react(),
     viteStaticCopy({
       targets: [
+        // WebAssembly modules copied to the output root, e.g. served at /scichart.wasm
         {
-          src: "node_modules/scichart/_wasm/scichart2d.wasm",
-          dest: "",
-        },
-        {
-          src: "node_modules/scichart/_wasm/scichart2d-nosimd.wasm",
-          dest: "",
-        },
-        // same for 3d if needed:
-        {
-          src: "node_modules/scichart/_wasm/scichart3d.wasm",
-          dest: "",
-        },
-        {
-          src: "node_modules/scichart/_wasm/scichart3d-nosimd.wasm",
+          src: "node_modules/scichart/_wasm/*",
           dest: "",
+          rename: { stripBase: true },
         },
       ],
     }),

BoilerPlates/scichart-react/Readme.md

@@ -18,7 +18,7 @@ npm install scichart scichart-react
 
 ## Step 2: Wasm file deployment
 
-SciChart.js uses WebAssembly files which must be served. The easiest way to do this is to copy the wasm files from the node_modules/scichart/\_wasm folder to your output folder.
+SciChart.js uses WebAssembly modules which must be served. The easiest way to do this is to copy everything from the node_modules/scichart/\_wasm folder to your output folder.
 
 e.g. with webpack.config.js:
 
@@ -27,22 +27,74 @@ e.g. with webpack.config.js:
     new CopyPlugin({
       patterns: [
         { from: "src/index.html", to: "" },
-        { from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" },
-        { from: "node_modules/scichart/_wasm/scichart3d.wasm", to: "" },
+        { from: "node_modules/scichart/_wasm/", to: "" },
       ],
     })
   ],
 ```
 
 > Note: you can load wasm from CDN to simplify getting started `SciChartSurface.useWasmFromCDN();`
 
-## Step 3: Creating the chart
+## Step 3: Creating the chart with an init function
 
-After that, you can define a config object to create a SciChartSurface like this.
+The recommended way to create a chart is the `SciChartReact` component with an `initChart` function, which creates a SciChartSurface on the provided root element:
 
 ```javascript
 import React from "react";
 import { SciChartReact } from "scichart-react";
+import {
+  SciChartSurface,
+  NumericAxis,
+  NumberRange,
+  XyDataSeries,
+  FastLineRenderableSeries,
+  MouseWheelZoomModifier,
+  ZoomPanModifier,
+  ZoomExtentsModifier,
+} from "scichart";
+
+async function initChart(rootElement) {
+  const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement);
+
+  sciChartSurface.xAxes.add(
+    new NumericAxis(wasmContext, { axisTitle: "X Axis", growBy: new NumberRange(0.1, 0.1) })
+  );
+  sciChartSurface.yAxes.add(
+    new NumericAxis(wasmContext, { axisTitle: "Y Axis", growBy: new NumberRange(0.1, 0.1) })
+  );
+
+  sciChartSurface.renderableSeries.add(
+    new FastLineRenderableSeries(wasmContext, {
+      dataSeries: new XyDataSeries(wasmContext, {
+        xValues: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+        yValues: [0, 0.0998, 0.1986, 0.2955, 0.3894, 0.4794, 0.5646, 0.6442, 0.7173, 0.7833],
+      }),
+      stroke: "steelblue",
+      strokeThickness: 3,
+    })
+  );
+
+  sciChartSurface.chartModifiers.add(
+    new MouseWheelZoomModifier(),
+    new ZoomPanModifier({ enableZoom: true }),
+    new ZoomExtentsModifier()
+  );
+
+  return { sciChartSurface };
+}
+
+function App() {
+  return <SciChartReact initChart={initChart} style={{ maxWidth: 900 }} />;
+}
+```
+
+## Step 4: Alternative - declarative chart from a Builder API config
+
+Alternatively, you can define a Builder API config object and render it with the `SciChartDeclarative` component. This is the approach used in this boilerplate's `src/App.jsx`.
+
+```javascript
+import React from "react";
+import { SciChartDeclarative } from "scichart-react";
 import {
   SweepAnimation,
   SciChartJsNavyTheme,
@@ -119,9 +171,7 @@ const chartConfig = {
 };
 ```
 
-## Step 4: Create a React Component
-
-Charts can be initialized with the SciChartReact Component using the `config` property.
+Then render it with the SciChartDeclarative Component using the `config` property.
 
 ```javascript
 function App() {
@@ -145,7 +195,7 @@ function App() {
           scichart-react to create a simple chart with one X and Y axis
         </p>
       </header>
-      <SciChartReact config={chartConfig} style={{ maxWidth: 900 }} />
+      <SciChartDeclarative config={chartConfig} style={{ maxWidth: 900 }} />
     </div>
   );
 }

BoilerPlates/scichart-react/package.json

@@ -23,10 +23,10 @@
   "dependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "scichart": "^5.0.0-alpha.135",
-    "scichart-react": "^0.2.0-beta.2"
+    "scichart": "6.0.0-alpha.164",
+    "scichart-react": "2.0.0-alpha.2"
   },
   "overrides": {
-    "scichart": "^5.0.0-alpha.135"
+    "scichart": "$scichart"
   }
 }

BoilerPlates/scichart-react/src/App.jsx

@@ -8,7 +8,7 @@ import {
   EPointMarkerType,
 } from "scichart";
 import React from "react";
-import { SciChartReact } from "scichart-react";
+import { SciChartDeclarative } from "scichart-react";
 
 const chartConfig = {
   surface: {
@@ -101,7 +101,7 @@ function App() {
           scichart-react to create a simple chart with one X and Y axis
         </p>
       </header>
-      <SciChartReact
+      <SciChartDeclarative
         config={chartConfig}
         onInit={onInit}
         style={{ maxWidth: 900, height: 600 }}

BoilerPlates/scichart-react/webpack.config.js

@@ -30,14 +30,9 @@ module.exports = {
     new CopyPlugin({
       patterns: [
         { from: "src/index.html", to: "" },
-        // Required for scichart to load wasm files for 2D charts
+        // Required for scichart to load its WebAssembly modules
         // Loading from CDN is also possible by calling SciChartSurface.loadWasmFromCDN()
-        { from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" },
-        // This one also needed to work in browsers without SIMD support
-        { from: "node_modules/scichart/_wasm/scichart2d-nosimd.wasm", to: "" },
-        // Optional: if including 3D charts copy these files
-        { from: "node_modules/scichart/_wasm/scichart3d.wasm", to: "" },
-        { from: "node_modules/scichart/_wasm/scichart3d-nosimd.wasm", to: "" },
+        { from: "node_modules/scichart/_wasm/", to: "" },
       ],
     }),
   ],

Examples/package.json

@@ -79,6 +79,7 @@
     "rxjs": "^7.5.6",
     "scichart": "6.0.0-alpha.169",
     "scichart-financial-tools": "6.0.0-alpha.169",
+    "scichart-react": "2.0.0-alpha.2",
     "socket.io": "^4.5.2",
     "socket.io-client": "^4.7.5",
     "websocket-ts": "^1.1.1",

Examples/src/components/Examples/BuilderApi/CustomTypes/drawExample.ts

@@ -32,7 +32,7 @@ registerAllTypes();
 
 // Define a custom PaletteProvider
 export class ExampleMountainPaletteProvider implements IStrokePaletteProvider, IFillPaletteProvider {
-    public static Name: "ExampleMountain";
+    public static Name = "ExampleMountain";
     public readonly strokePaletteMode = EStrokePaletteMode.SOLID;
     public readonly fillPaletteMode = EFillPaletteMode.SOLID;
     private readonly palettedStroke: number;

Examples/src/components/Examples/BuilderApi/FullChart/exampleInfo.tsx

@@ -29,7 +29,7 @@ const metaData: IExampleMetadata =
                 metaDescription:
                     "Demonstrates how to use the Builder Api to configure axes, series, annotations and modifiers using a definition object. The builder api is designed to make it easier to discover the types and options available in SciChart JS.",
                 markdownContent:
-                    "## Full Chart Using Builder API with React\n\n### Overview\nThis example demonstrates how to integrate SciChart.js with React using the Builder API. The chart is fully configured via a JSON object that specifies axes, series, annotations, and interaction modifiers, making it simple to construct complex, high-performance charts. Developers can refer to the [Builder API documentation](https://www.scichart.com/documentation/js/v5/2d-charts/builder-api/builder-api-overview/) for more details on this approach.\n\n### Technical Implementation\nThe implementation leverages the Builder API to define all chart components as JSON data. The React integration is achieved using the <SciChartReact> component, which calls the asynchronous draw function to initialize the chart. This function sets up a categorical X-Axis, two numeric Y-Axes, and multiple series, including a spline mountain series with a gradient fill and a bubble series featuring custom point markers. For additional information on multi-axis configuration, see the [Adding Multiple Axis tutorial](https://www.scichart.com/documentation/js/v5/get-started/tutorials-js-npm-webpack/tutorial-08-adding-multiple-axis/), and for custom series implementation, explore the [JavaScript Bubble Chart example](https://www.scichart.com/example/javascript-chart/javascript-bubble-chart/).\n\n### Features and Capabilities\nThis example not only demonstrates the creation of a fully configured chart but also highlights advanced features such as gradient fills, custom point markers, and flexible annotation placement using both data and relative coordinate modes. Interaction modifiers like rollover, mouse wheel zoom, and zoom extents add an extra layer of interactivity. Annotations are precisely configured, as detailed in the [Adding Annotations tutorial](https://www.scichart.com/documentation/js/v5/get-started/tutorials-js-npm-webpack/tutorial-06-adding-annotations/), providing clear insight into how text and coordinate modes can enhance data visualization.\n\n### Integration and Best Practices\nSeamless React integration is a key aspect of this example. By wrapping the chart initialization within a React component, developers can manage the chart’s lifecycle alongside other React components. This design follows best practices for performance and maintainability. For further insights on integrating SciChart.js into React projects, check out the [React Charts with SciChart.js: Introducing “SciChart React”](https://www.scichart.com/blog/react-charts-with-scichart-js/) article. Additionally, performance optimization techniques discussed in [Performance Optimisation of JavaScript Applications & Charts](https://www.scichart.com/blog/performance-optimisation-of-javascript-applications-charts/) can help ensure efficient rendering even with complex configurations.",
+                    "## Full Chart Using Builder API with React\n\n### Overview\nThis example demonstrates how to integrate SciChart.js with React using the Builder API. The chart is fully configured via a JSON object that specifies axes, series, annotations, and interaction modifiers, making it simple to construct complex, high-performance charts. Developers can refer to the [Builder API documentation](https://www.scichart.com/documentation/js/v5/2d-charts/builder-api/builder-api-overview/) for more details on this approach.\n\n### Technical Implementation\nThe implementation leverages the Builder API to define all chart components as JSON data. The React integration is achieved using the `<SciChartReact/>` component, which calls the asynchronous draw function to initialize the chart. This function sets up a categorical X-Axis, two numeric Y-Axes, and multiple series, including a spline mountain series with a gradient fill and a bubble series featuring custom point markers. For additional information on multi-axis configuration, see the [Adding Multiple Axis tutorial](https://www.scichart.com/documentation/js/v5/get-started/tutorials-js-npm-webpack/tutorial-08-adding-multiple-axis/), and for custom series implementation, explore the [JavaScript Bubble Chart example](https://www.scichart.com/example/javascript-chart/javascript-bubble-chart/).\n\n### Features and Capabilities\nThis example not only demonstrates the creation of a fully configured chart but also highlights advanced features such as gradient fills, custom point markers, and flexible annotation placement using both data and relative coordinate modes. Interaction modifiers like rollover, mouse wheel zoom, and zoom extents add an extra layer of interactivity. Annotations are precisely configured, as detailed in the [Adding Annotations tutorial](https://www.scichart.com/documentation/js/v5/get-started/tutorials-js-npm-webpack/tutorial-06-adding-annotations/), providing clear insight into how text and coordinate modes can enhance data visualization.\n\n### Integration and Best Practices\nSeamless React integration is a key aspect of this example. By wrapping the chart initialization within a React component, developers can manage the chart’s lifecycle alongside other React components. This design follows best practices for performance and maintainability. For further insights on integrating SciChart.js into React projects, check out the [React Charts with SciChart.js: Introducing “SciChart React”](https://www.scichart.com/blog/react-charts-with-scichart-js/) article. Additionally, performance optimization techniques discussed in [Performance Optimisation of JavaScript Applications & Charts](https://www.scichart.com/blog/performance-optimisation-of-javascript-applications-charts/) can help ensure efficient rendering even with complex configurations.",
             },
             angular: {
                 subtitle:

Examples/src/components/Examples/Charts2D/StylingAndTheming/UsingThemeManager/drawExample.ts

@@ -113,20 +113,20 @@ export const getChartsInitializationAPI = () => {
 };
 
 // Create a custom theme based on light theme + some modifications
-const customTheme: IThemeProvider = {
-    ...new SciChartJSLightTheme(),
-    axisBandsFill: "#83D2F511",
-    axisBorder: "#1F3D68",
-    gridBackgroundBrush: "white",
-    gridBorderBrush: "white",
-    loadingAnimationForeground: "#6495ED77",
-    loadingAnimationBackground: "#E4F5FC",
-    majorGridLineBrush: "#264B9322",
-    minorGridLineBrush: "#264B9306",
-    sciChartBackground: "#E4F5FC",
-    tickTextBrush: "#1F3D68",
-    axisTitleColor: "#1F3D68",
-    // auto / default colour palette for lines and fills
-    strokePalette: ["#264B93", "#A16DAE", "#C52E60"],
-    fillPalette: ["#264B9333", "#A16DAE33", "#C52E6033"],
-};
+// (modifying a constructed theme instance, as SciChartSurface.create expects an IThemeProvider instance)
+const customTheme: IThemeProvider = new SciChartJSLightTheme();
+
+customTheme.axisBandsFill = "#83D2F511";
+customTheme.axisBorder = "#1F3D68";
+customTheme.gridBackgroundBrush = "white";
+customTheme.gridBorderBrush = "white";
+customTheme.loadingAnimationForeground = "#6495ED77";
+customTheme.loadingAnimationBackground = "#E4F5FC";
+customTheme.majorGridLineBrush = "#264B9322";
+customTheme.minorGridLineBrush = "#264B9306";
+customTheme.sciChartBackground = "#E4F5FC";
+customTheme.tickTextBrush = "#1F3D68";
+customTheme.axisTitleColor = "#1F3D68";
+// auto / default colour palette for lines and fills
+customTheme.strokePalette = ["#264B93", "#A16DAE", "#C52E60"];
+customTheme.fillPalette = ["#264B9333", "#A16DAE33", "#C52E6033"];