Merge pull request #6 from ABTSoftware/dev

NestedLegend. onInit Cleanup Callback. Minor fbug-fixes

.storybook/stories/DocExamples/ChartWrapperStyling.tsx

@@ -0,0 +1,76 @@
+import {
+    SciChartSurface,
+    NumericAxis,
+    SplineMountainRenderableSeries,
+    XyDataSeries,
+    ZoomPanModifier,
+    MouseWheelZoomModifier,
+    ZoomExtentsModifier,
+    SciChartJSDarkTheme,
+    SciChartJSLightTheme
+} from "scichart";
+import { SciChartReact } from "scichart-react";
+
+export const ChartWrapperStyling = () => (
+    <SciChartReact
+        initChart={async rootElement => {
+            const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
+                disableAspect: true
+            });
+
+            sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
+            sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
+
+            sciChartSurface.renderableSeries.add(
+                new SplineMountainRenderableSeries(wasmContext, {
+                    dataSeries: new XyDataSeries(wasmContext, {
+                        xValues: [1, 2, 3, 4],
+                        yValues: [1, 4, 7, 3]
+                    }),
+                    fill: "#3ca832",
+                    stroke: "#eb911c",
+                    strokeThickness: 4,
+                    opacity: 0.4
+                })
+            );
+
+            sciChartSurface.chartModifiers.add(
+                new ZoomPanModifier({ enableZoom: true }),
+                new MouseWheelZoomModifier(),
+                new ZoomExtentsModifier()
+            );
+
+            const toggleChartTheme = () => {
+                sciChartSurface.applyTheme(
+                    sciChartSurface.themeProvider.isLightBackground
+                        ? new SciChartJSDarkTheme()
+                        : new SciChartJSLightTheme()
+                );
+            };
+
+            return { sciChartSurface, toggleChartTheme };
+        }}
+        style={{
+            aspectRatio: 2,
+            minWidth: "600px",
+            minHeight: "300px",
+            boxSizing: "border-box",
+            backgroundColor: "darkslategrey",
+            padding: 10
+        }}
+        innerContainerProps={{
+            style: { backgroundColor: "darkgrey", boxSizing: "border-box", height: "80%", padding: 10 }
+        }}
+    >
+        {/* The child components will be rendered only after the surface initialization */}
+        <NestedComponent />
+    </SciChartReact>
+);
+
+const NestedComponent = () => {
+    return (
+        <div style={{ background: "lightgrey", height: "20%", width: "100%", textAlign: "center" }}>
+            Nested Component Content
+        </div>
+    );
+};

.storybook/stories/SciChartReact.stories.tsx

@@ -8,6 +8,7 @@ import ChartWithNestedComponentsSrcCode from "!!raw-loader!./DocExamples/ChartWi
 import ChartUsageWithTypescriptSrcCode from "!!raw-loader!./DocExamples/ChartUsageWithTypescript";
 import ChartWith3dSurfaceSrcCode from "!!raw-loader!./DocExamples/ChartWith3dSurface";
 import ChartWithPieSurfaceSrcCode from "!!raw-loader!./DocExamples/ChartWithPieSurface";
+import ChartWrapperStylingSrcCode from "!!raw-loader!./DocExamples/ChartWrapperStyling";
 import { PrimaryChartExample as PrimaryChartExampleRenderer } from "./DocExamples/PrimaryChartExample";
 import { ChartWithConfig as ChartWithConfigRenderer } from "./DocExamples/ChartWithConfig";
 import { ChartWithInitFunction as ChartWithInitFunctionRenderer } from "./DocExamples/ChartWithInitFunction";
@@ -17,6 +18,7 @@ import { ChartWithNestedComponents as ChartWithNestedComponentsRenderer } from "
 import { ChartUsageWithTypescript as ChartUsageWithTypescriptRenderer } from "./DocExamples/ChartUsageWithTypescript";
 import { ChartWith3dSurface as ChartWith3dSurfaceRenderer } from "./DocExamples/ChartWith3dSurface";
 import { ChartWithPieSurface as ChartWithPieSurfaceRenderer } from "./DocExamples/ChartWithPieSurface";
+import { ChartWrapperStyling as ChartWrapperStylingRenderer } from "./DocExamples/ChartWrapperStyling";
 import { SciChart3DSurface, SciChartSurface } from "scichart";
 import { SciChartReact } from "../../src/SciChart";
 import { Title, Subtitle, Description, Primary, Controls, Stories, ArgTypes } from "@storybook/blocks";
@@ -78,12 +80,31 @@ export const ChartWithInitFunction: Story = {
 
 /**
  * A component provided via `fallback` prop is rendered while the initialization is in progress.
+ * If no fallback provided, the chart will use a default one.
  */
 export const ChartWithFallback: Story = {
     parameters: { docs: { source: { type: "dynamic", language: "tsx", code: ChartWithFallbackSrcCode } } },
     render: ChartWithFallbackRenderer
 };
 
+/**
+ * To properly apply sizing and positioning to the component (or any CSS styles) consider these implementation details:
+ * - SciChartReact uses several HTML elements over the basic ones required for SciChart.JS.
+ * - The inner component tree looks like following
+ *   - **outer**: the component propagates it props to this container element.
+ *   - **inner**: rendered within `outer` container; its default styles could be overridden using the `innerContainerProps`
+ *   - **rootElement**: an element created implicitly within the `inner` container and then passed to the chart initialization function;
+ *     SciChart adds other required drawing layers to this element;
+ *     It could  be accessed by ref via `sciChartSurface.domChartRoot`.
+ *   - **children**: elements passed via children props rendered within `outer` container; These elements are provided with `SciChartSurfaceContext`.
+ *   - **fallback**: rendered within `outer` container; it is displayed over the `inner` container and `children` during initialization.
+ * - consider passing `disableAspect` option when creating a chart to prevent the default sizing applied by SciChart.
+ */
+export const ChartWrapperStyling: Story = {
+    parameters: { docs: { source: { type: "dynamic", language: "tsx", code: ChartWrapperStylingSrcCode } } },
+    render: ChartWrapperStylingRenderer
+};
+
 /**
  * `onInit` and `onDelete` are executed when a chart is initialized and when it is deleted respectively.
  */

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 SciChart's official Github repository (formerly ABT Software)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README_NPM.md

@@ -25,7 +25,7 @@ SciChart.js requires additional WASM modules to work (`scichart2d.wasm` + `scich
 The library will try to fetch the appropriate files asynchronously during runtime.
 Find detailed info at [Deploying Wasm Docs](https://www.scichart.com/documentation/js/current/Deploying%20Wasm%20or%20WebAssembly%20and%20Data%20Files%20with%20your%20app.html)
 
-By default SciChartReact applies the following configuration:
+**Notice that by default SciChartReact applies the following configuration:**
 
 ```typescript
 SciChartSurface.configure({
@@ -39,6 +39,20 @@ SciChart3DSurface.configure({
 });
 ```
 
+**which is different from the core library configuration:**
+
+```typescript
+SciChartSurface.configure({
+    wasmUrl: undefined,
+    dataUrl: undefined
+});
+
+SciChart3DSurface.configure({
+    wasmUrl: undefined,
+    dataUrl: undefined
+});
+```
+
 ### Using
 
 **<span style="color: black;background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">For detailed examples of all provided components check out [Docs](https://abtsoftware.github.io/scichart-react/?path=/docs/example-scichartreact--docs).</span>**

demos/electron/.eslintrc.json

@@ -0,0 +1,16 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true,
+        "node": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/electron",
+        "plugin:import/typescript"
+    ],
+    "parser": "@typescript-eslint/parser"
+}

demos/electron/.gitignore

@@ -0,0 +1,92 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+.DS_Store
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# Webpack
+.webpack/
+
+# Vite
+.vite/
+
+# Electron-Forge
+out/

demos/electron/forge.config.ts

@@ -0,0 +1,52 @@
+import type { ForgeConfig } from "@electron-forge/shared-types";
+import { MakerSquirrel } from "@electron-forge/maker-squirrel";
+import { MakerZIP } from "@electron-forge/maker-zip";
+import { MakerDeb } from "@electron-forge/maker-deb";
+import { MakerRpm } from "@electron-forge/maker-rpm";
+import { AutoUnpackNativesPlugin } from "@electron-forge/plugin-auto-unpack-natives";
+import { WebpackPlugin } from "@electron-forge/plugin-webpack";
+import { FusesPlugin } from "@electron-forge/plugin-fuses";
+import { FuseV1Options, FuseVersion } from "@electron/fuses";
+
+import { mainConfig } from "./webpack.main.config";
+import { rendererConfig } from "./webpack.renderer.config";
+
+const config: ForgeConfig = {
+    packagerConfig: {
+        asar: true
+    },
+    rebuildConfig: {},
+    makers: [new MakerSquirrel({}), new MakerZIP({}, ["darwin"]), new MakerRpm({}), new MakerDeb({})],
+    plugins: [
+        new AutoUnpackNativesPlugin({}),
+        new WebpackPlugin({
+            mainConfig,
+            renderer: {
+                config: rendererConfig,
+                entryPoints: [
+                    {
+                        html: "./src/index.html",
+                        js: "./src/renderer.ts",
+                        name: "main_window",
+                        preload: {
+                            js: "./src/preload.ts"
+                        }
+                    }
+                ]
+            }
+        }),
+        // Fuses are used to enable/disable various Electron functionality
+        // at package time, before code signing the application
+        new FusesPlugin({
+            version: FuseVersion.V1,
+            [FuseV1Options.RunAsNode]: false,
+            [FuseV1Options.EnableCookieEncryption]: true,
+            [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
+            [FuseV1Options.EnableNodeCliInspectArguments]: false,
+            [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
+            [FuseV1Options.OnlyLoadAppFromAsar]: true
+        })
+    ]
+};
+
+export default config;