flexmonster · marviem · Aug 1, 2025 · Aug 4, 2025 · Aug 4, 2025 · Aug 4, 2025
diff --git a/ES6/README.md b/ES6/README.md
@@ -21,7 +21,7 @@ Table of contents:
 
 ## Prerequisites
 
-- [Node.js 14 or later](https://nodejs.org/en/)
+- [Node.js 20.19+ or 22.12+](https://nodejs.org/en/)
 
 ## Installation
 

diff --git a/ES6/package.json b/ES6/package.json
@@ -10,23 +10,23 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@amcharts/amcharts4": "^4.10.36",
-    "@amcharts/amcharts5": "^5.4.1",
-    "highcharts": "^11.1.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "@amcharts/amcharts4": "^4.10.40",
+    "@amcharts/amcharts5": "^5.13.4",
+    "highcharts-react-official": "^3.2.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "react-flexmonster": "latest",
-    "react-router-dom": "^6.14.2"
+    "react-router-dom": "^7.7.1"
   },
   "devDependencies": {
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^4.0.3",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "express": "^4.18.2",
-    "vite": "^4.4.5"
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^4.7.0",
+    "eslint": "^9.32.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "express": "^5.1.0",
+    "vite": "^7.0.6"
   }
 }
diff --git a/ES6/src/App.css b/ES6/src/App.css
@@ -31,7 +31,7 @@ body {
 }
 
 .chart-container {
-  margin-top: 70px;
+  margin-top: 50px;
 }
 
 .first-description-block {
@@ -78,6 +78,7 @@ body {
   margin: 5px 5px 5px 0;
   position: relative;
   width: auto;
+  appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   -webkit-box-sizing: border-box;

diff --git a/ES6/src/components/ReactFlexmonsterExamples/CustomizingGrid.jsx b/ES6/src/components/ReactFlexmonsterExamples/CustomizingGrid.jsx
@@ -1,86 +1,81 @@
-import React, { useRef } from "react";
+import { useRef } from "react";
 import * as FlexmonsterReact from "react-flexmonster";
 import ToggleButton from "../UIElements/ToggleButton";
 
 function CustomizingGrid() {
-    const pivotRef = useRef(null);
+  const pivotRef = useRef(null);
 
-    const customizeCellFunction = (cell, data) => {
-        if (data.measure && data.measure.uniqueName === "Price") {
-            let backgroundColor = "#00A45A";
-            let textShadowColor = "#095231";
-            let borderColor = "#009552";
-            cell.style["background-color"] = backgroundColor;
-            cell.style["color"] = "white";
-            cell.style["font-weight"] = "bold";
-            cell.style["text-shadow"] = `0px 2px 3px ${textShadowColor}`;
-            cell.style["border-bottom"] = `1px solid ${borderColor}`;
-            cell.style["border-right"] = `1px solid ${borderColor}`;
-        }
-    };
+  const customizeCellFunction = (cell, data) => {
+    if (data.measure && data.measure.uniqueName === "Price") {
+      let backgroundColor = "#00A45A";
+      let textShadowColor = "#095231";
+      let borderColor = "#009552";
+      cell.style["background-color"] = backgroundColor;
+      cell.style["color"] = "white";
+      cell.style["font-weight"] = "bold";
+      cell.style["text-shadow"] = `0px 2px 3px ${textShadowColor}`;
+      cell.style["border-bottom"] = `1px solid ${borderColor}`;
+      cell.style["border-right"] = `1px solid ${borderColor}`;
+    }
+  };
 
-    const controllCustomization = (isCustomized) => {
-        isCustomized ? applyCustomization() : removeCustomization();
-    };
+  const toggleCustomization = (isCustomized) => {
+    isCustomized ? applyCustomization() : removeCustomization();
+  };
 
-    const removeCustomization = () => {
-        pivotRef.current.flexmonster.customizeCell(null);
-    };
+  const removeCustomization = () => {
+    pivotRef.current.flexmonster.customizeCell(null);
+  };
 
-    const applyCustomization = () => {
-        //running grid customization using "customizeCellFunction"
-        pivotRef.current.flexmonster.customizeCell(customizeCellFunction);
-    };
+  const applyCustomization = () => {
+    pivotRef.current.flexmonster.customizeCell(customizeCellFunction);
+  };
 
-    return (
-        <>
-            <h1 className="page-title">Customizing the grid</h1>
+  return (
+    <>
+      <h1 className="page-title">Customizing the grid</h1>
 
-            <div className="description-blocks first-description-block">
-                <p>
-                    Style the grid by adding links, applying custom CSS, or formatting the
-                    cells. Check our docs for details:{" "}
-                    <a
-                        href="https://www.flexmonster.com/doc/customizing-grid/?r=rm_react"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="title-link"
-                    >
-                        Customizing the grid
-                    </a>
-                    .
-                </p>
-                <p>
-                    In this demo, the <strong>Price</strong> measure is customized.
-                </p>
-            </div>
+      <div className="description-blocks first-description-block">
+        <p>
+          Style the grid by adding links, applying custom CSS, or formatting the 
+          cells. Check our docs for details:{" "}
+          <a
+            href="https://www.flexmonster.com/doc/customizing-grid/?r=rm_react"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="title-link"
+          >Customizing the grid cells</a>.
+        </p>
+        <p>
+          In this demo, the <strong>Price</strong> measure is customized.
+        </p>
+      </div>
 
-            <div className="description-blocks">
-                <ToggleButton
-                    triggerFunction={controllCustomization}
-                    id="customizationToggle"
-                    labelChecked="The grid cells are customized"
-                    labelUnChecked="The grid cells are not customized"
-                />
-            </div>
+      <div className="description-blocks">
+        <ToggleButton
+          triggerFunction={toggleCustomization}
+          id="customizationToggle"
+          labelChecked="The grid cells are customized"
+          labelUnChecked="The grid cells are not customized"
+        />
+      </div>
 
-            <FlexmonsterReact.Pivot
-                ref={pivotRef}
-                toolbar={true}
-                beforetoolbarcreated={(toolbar) => {
-                    toolbar.showShareReportTab = true;
-                }}
-                shareReportConnection={{
-                    url: "https://olap.flexmonster.com:9500",
-                }}
-                width="100%"
-                height={600}
-                report="https://cdn.flexmonster.com/github/customizing-grid-report.json"
-                customizeCell={customizeCellFunction}
-                //licenseKey="XXXX-XXXX-XXXX-XXXX-XXXX"
-            />
-        </>
-    );
+      <FlexmonsterReact.Pivot
+        ref={pivotRef}
+        toolbar={true}
+        height={600}
+        report="https://cdn.flexmonster.com/github/customizing-grid-report.json"
+        beforetoolbarcreated={(toolbar) => {
+          toolbar.showShareReportTab = true;
+        }}
+        shareReportConnection={{
+          url: "https://olap.flexmonster.com:9500",
+        }}
+        customizeCell={customizeCellFunction}
+        //licenseKey="XXXX-XXXX-XXXX-XXXX-XXXX"
+      />
+    </>
+  );
 }
 
 export default CustomizingGrid;
diff --git a/ES6/src/components/ReactFlexmonsterExamples/CustomizingToolbar.jsx b/ES6/src/components/ReactFlexmonsterExamples/CustomizingToolbar.jsx
@@ -1,57 +1,62 @@
-import React, { useRef } from 'react';
-import * as FlexmonsterReact from 'react-flexmonster';
+import { useRef } from "react";
+import * as FlexmonsterReact from "react-flexmonster";
 
 function CustomizingToolbar() {
-    const pivotRef = useRef(null);
+  const pivotRef = useRef(null);
 
-    const showInfo = () => {
-        pivotRef.current.flexmonster.alert({
-            title: "Customizing Flexmonster",
-            message:
-                "How to customize the Toolbar: <a style='text-decoration:underline; color:#00A45A' target='blank' rel='noopener noreferrer' href='https://www.flexmonster.com/doc/customizing-toolbar/?r=rm_react'>https://www.flexmonster.com/doc/customizing-toolbar/</a> <br>",
-            type: "info",
-            blocking: false,
-        });
-    }
+  const showInfo = () => {
+    pivotRef.current.flexmonster.alert({
+      title: "Customizing Flexmonster",
+      message:
+        "How to customize the Toolbar: <a style='text-decoration:underline; color:#00A45A' target='blank' rel='noopener noreferrer' href='https://www.flexmonster.com/doc/customizing-toolbar/?r=rm_react'>https://www.flexmonster.com/doc/customizing-toolbar/</a> <br>",
+      type: "info",
+      blocking: false,
+    });
+  };
 
-    const customizeToolbar = (toolbar) => {
-        let tabs = toolbar.getTabs();
-        toolbar.getTabs = () => {
-            tabs = [];
-            // add new tab
-            tabs.push({
-                id: "fm-tab-newtab",
-                title: "New Tab",
-                handler: () => showInfo(),
-                icon: toolbar.icons.open,
-            });
-            return tabs;
-        };
-    }
+  const customizeToolbar = (toolbar) => {
+    let tabs = toolbar.getTabs();
+    toolbar.getTabs = () => {
+      tabs = [];
+      // Add a new tab
+      tabs.push({
+        id: "fm-tab-newtab",
+        title: "New Tab",
+        handler: () => showInfo(),
+        icon: toolbar.icons.open,
+      });
+      return tabs;
+    };
+  };
 
-    return (
-        <>
-            <h1 className="page-title">Customizing the Toolbar</h1>
+  return (
+    <>
+      <h1 className="page-title">Customizing the Toolbar</h1>
 
-            <div className="description-blocks first-description-block">
-                <p>You can add, remove, and update the Toolbar tabs.</p>
-                <p>In this demo, we’ve removed all the tabs and added a custom <strong>New Tab</strong>.
-                    See our docs to learn more about the Toolbar and its
-                    customization: <a href="https://www.flexmonster.com/doc/customizing-toolbar/?r=rm_react" target="_blank" rel="noopener noreferrer" className="title-link">Customizing the Toolbar</a>.
-                </p>
-            </div>
+      <div className="description-blocks first-description-block">
+        <p>You can add, remove, and update the Toolbar tabs.</p>
+        <p>
+          In this demo, we've removed all the tabs and added a custom <strong>New Tab</strong>.
+          See our docs to learn more about the Toolbar and its customization:{" "}
+          <a
+            href="https://www.flexmonster.com/doc/customizing-toolbar/?r=rm_react"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="title-link"
+          >Customizing the Toolbar</a>.
+        </p>
+      </div>
 
-            <FlexmonsterReact.Pivot
-                ref={pivotRef}
-                toolbar={true}
-                width="100%"
-                height={600}
-                report="https://cdn.flexmonster.com/github/demo-report.json"
-                beforetoolbarcreated={customizeToolbar}
-                //licenseKey="XXXX-XXXX-XXXX-XXXX-XXXX"
-            />
-        </>
-    );
-};
+      <FlexmonsterReact.Pivot
+        ref={pivotRef}
+        toolbar={true}
+        height={600}
+        report="https://cdn.flexmonster.com/github/demo-report.json"
+        beforetoolbarcreated={customizeToolbar}
+        //licenseKey="XXXX-XXXX-XXXX-XXXX-XXXX"
+      />
+    </>
+  );
+}
 
-export default CustomizingToolbar;
+export default CustomizingToolbar;