SmithChart

.gitignore

@@ -24,5 +24,6 @@ Examples/exampleInfo.*
 .aider*
 Examples/logs
 Examples/logs/all.log
-
+.sciclawd
+.claude
 /docs/

Examples/package.json

@@ -65,6 +65,7 @@
     "morgan": "^1.10.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-draggable": "^4.5.0",
     "react-fast-compare": "^3.2.2",
     "react-helmet": "^6.1.0",
     "react-markdown": "^9.0.3",

Examples/scripts/enforce-trailing-slashes.js

@@ -27,7 +27,7 @@ function processFile(filePath) {
         fs.writeFileSync(filePath, newContent, "utf8");
         console.log("- Updated:", filePath);
     } else {
-        // console.log("- No changes needed:", filePath); 
+        // console.log("- No changes needed:", filePath);
     }
 }
 

Examples/scripts/linkcheck.js

@@ -1,61 +1,63 @@
-const fs = require('fs');
-const path = require('path');
-const https = require('https');
-const http = require('http');
-const { URL } = require('url');
+const fs = require("fs");
+const path = require("path");
+const https = require("https");
+const http = require("http");
+const { URL } = require("url");
 
 // This script checks all links in markdown files within the 'Examples' directory and its subdirectories.
 // To run: "npm run linkcheck"
 
-const examplesDir = path.join(__dirname, '.', '../src');
+const examplesDir = path.join(__dirname, ".", "../src");
 const linkRegex = /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g; // markdown links: [text](url)
 
 let fileCount = 0;
 let linkCount = 0;
 let errorCount = 0;
 
 function walkDir(dir, callback) {
-    fs.readdirSync(dir).forEach(file => {
+    fs.readdirSync(dir).forEach((file) => {
         const fullPath = path.join(dir, file);
         if (fs.statSync(fullPath).isDirectory()) {
             walkDir(fullPath, callback);
-        } else if (fullPath.endsWith('.md') || fullPath.endsWith('.mdx') || fullPath.endsWith('.tsx')) {
+        } else if (fullPath.endsWith(".md") || fullPath.endsWith(".mdx") || fullPath.endsWith(".tsx")) {
             callback(fullPath);
         }
     });
 }
 
 function checkLink(url) {
     return new Promise((resolve) => {
-        let lib = url.startsWith('https') ? https : http;
+        let lib = url.startsWith("https") ? https : http;
         let req;
         try {
-            req = lib.request(url, { method: 'HEAD', timeout: 5000 }, res => {
+            req = lib.request(url, { method: "HEAD", timeout: 5000 }, (res) => {
                 resolve({ url, status: res.statusCode });
             });
-            req.on('error', () => {
+            req.on("error", () => {
                 // Try GET if HEAD fails (some servers don't support HEAD)
-                req = lib.get(url, { timeout: 5000 }, res => {
-                    resolve({ url, status: res.statusCode });
-                }).on('error', () => {
-                    resolve({ url, status: 'ERR' });
-                });
+                req = lib
+                    .get(url, { timeout: 5000 }, (res) => {
+                        resolve({ url, status: res.statusCode });
+                    })
+                    .on("error", () => {
+                        resolve({ url, status: "ERR" });
+                    });
             });
-            req.on('timeout', () => {
+            req.on("timeout", () => {
                 req.destroy();
-                resolve({ url, status: 'TIMEOUT' });
+                resolve({ url, status: "TIMEOUT" });
             });
             req.end();
         } catch (e) {
-            resolve({ url, status: 'ERR' });
+            resolve({ url, status: "ERR" });
         }
     });
 }
 
 async function checkLinksInFile(filePath) {
     fileCount++;
 
-    const content = fs.readFileSync(filePath, 'utf8');
+    const content = fs.readFileSync(filePath, "utf8");
     const links = [];
     let match;
     while ((match = linkRegex.exec(content)) !== null) {
@@ -75,10 +77,10 @@ async function checkLinksInFile(filePath) {
         if (status === 404) {
             console.log(`  ❌ 404 Not Found: ${url} (in file: ${filePath})`);
             errorCount++;
-        } else if (status === 'ERR') {
+        } else if (status === "ERR") {
             console.log(`  ⚠️  Error: ${url}`);
             errorCount++;
-        } else if (status === 'TIMEOUT') {
+        } else if (status === "TIMEOUT") {
             console.log(`   Timeout: ${url}`);
             errorCount++;
         } else {
@@ -93,16 +95,16 @@ async function checkLinksInFile(filePath) {
     console.log('Starting link checking in "/Examples/src" directory...');
 
     const files = [];
-    walkDir(examplesDir, file => files.push(file));
+    walkDir(examplesDir, (file) => files.push(file));
     for (const file of files) {
         await checkLinksInFile(file);
     }
-    console.log('\nLink check complete.');
+    console.log("\nLink check complete.");
     console.log(`Total files checked: ${fileCount}`);
     console.log(`Total links checked: ${linkCount}\n`);
     if (errorCount > 0) {
         console.error(`\x1b[31mTotal errors found: ${errorCount}\x1b[0m`);
     } else {
-        console.log('\x1b[32mAll links are valid!\x1b[0m');
+        console.log("\x1b[32mAll links are valid!\x1b[0m");
     }
 })();

Examples/src/components/AppFooter/AppFooter.module.scss

@@ -16,8 +16,8 @@
     .FooterBottomSection {
         @extend %CommonFooterGridConfigs;
     }
-    
-    h3, 
+
+    h3,
     h4,
     h5,
     h6 {

Examples/src/components/AppRouter/examplePaths.ts

@@ -14,7 +14,6 @@ export default [
     "../Examples/Charts2D/AxisLabelCustomization/MultiLineLabels",
     "../Examples/Charts2D/AxisLabelCustomization/RotatedLabels",
     "../Examples/Charts2D/BasicChartTypes/BandSeriesChart",
-    "../Examples/Charts2D/v4Charts/HeatmapOverMap",
     "../Examples/Charts2D/BasicChartTypes/BubbleChart",
     "../Examples/Charts2D/BasicChartTypes/CandlestickChart",
     "../Examples/Charts2D/BasicChartTypes/ColumnChart",
@@ -61,9 +60,9 @@ export default [
     "../Examples/Charts2D/Filters/PercentageChange",
     "../Examples/Charts2D/Filters/TrendMARatio",
     "../Examples/Charts2D/Legends/ChartLegendsAPI",
-    "../Examples/Charts2D/ModifyAxisBehavior/DiscontinuousDateAxisComparison",
     "../Examples/Charts2D/ModifyAxisBehavior/BaseValueAxes",
     "../Examples/Charts2D/ModifyAxisBehavior/CentralAxes",
+    "../Examples/Charts2D/ModifyAxisBehavior/DiscontinuousDateAxisComparison",
     "../Examples/Charts2D/ModifyAxisBehavior/DrawBehindAxes",
     "../Examples/Charts2D/ModifyAxisBehavior/LogarithmicAxis",
     "../Examples/Charts2D/ModifyAxisBehavior/MultipleXAxes",
@@ -129,6 +128,7 @@ export default [
     "../Examples/Charts2D/v4Charts/AnimatedColumns",
     "../Examples/Charts2D/v4Charts/BoxPlotChart",
     "../Examples/Charts2D/v4Charts/GanttChart",
+    "../Examples/Charts2D/v4Charts/HeatmapOverMap",
     "../Examples/Charts2D/v4Charts/HeatmapRectangle",
     "../Examples/Charts2D/v4Charts/HistogramChart",
     "../Examples/Charts2D/v4Charts/LinearGauges",
@@ -161,6 +161,7 @@ export default [
     "../Examples/FeaturedApps/ScientificCharts/LiDAR3DPointCloudDemo",
     "../Examples/FeaturedApps/ScientificCharts/PhasorDiagramChart",
     "../Examples/FeaturedApps/ScientificCharts/Semiconductors",
+    "../Examples/FeaturedApps/ScientificCharts/SmithChart",
     "../Examples/FeaturedApps/ScientificCharts/TenorCurves3D",
     "../Examples/FeaturedApps/ScientificCharts/WaferAnalysis",
     "../Examples/FeaturedApps/ShowCases/DynamicLayout",

Examples/src/components/AppRouter/examples.ts

@@ -41,6 +41,7 @@ export const MENU_ITEMS_FEATURED_APPS: TMenuItem[] = [
             EXAMPLES_PAGES.featuredApps_scientificCharts_PhasorDiagramChart,
             EXAMPLES_PAGES.featuredApps_scientificCharts_CorrelationPlot,
             EXAMPLES_PAGES.featuredApps_scientificCharts_Semiconductors,
+            EXAMPLES_PAGES.featuredApps_scientificCharts_SmithChart,
             EXAMPLES_PAGES.featuredApps_scientificCharts_WaferAnalysis,
         ],
     },

Examples/src/components/AppTopBar/AppBarTop.tsx

@@ -35,11 +35,7 @@ const AppBarTop: FC<TProps> = (props) => {
         theme === ETheme.navy ? "SciChartNavy" : theme === ETheme.light ? "SciChartLight" : "SciChartDark";
     const nextTheme = getNextTheme(theme);
     const nextThemeLabel =
-        nextTheme === ETheme.navy
-            ? "SciChartNavy"
-            : nextTheme === ETheme.light
-            ? "SciChartLight"
-            : "SciChartDark";
+        nextTheme === ETheme.navy ? "SciChartNavy" : nextTheme === ETheme.light ? "SciChartLight" : "SciChartDark";
 
     const baseGithubPath = "https://github.com/ABTSoftware/SciChart.JS.Examples/blob/master/Examples/src";
     const contextualGithub =
@@ -93,8 +89,8 @@ const AppBarTop: FC<TProps> = (props) => {
 
                             <Search />
                         </>
-                    )}.
-                    <div className={classes.FlexPlaceholder}></div>
+                    )}
+                    .<div className={classes.FlexPlaceholder}></div>
                     <Button
                         onClick={toggleTheme}
                         className={classes.ThemeButton}
@@ -128,13 +124,20 @@ const AppBarTop: FC<TProps> = (props) => {
                                 />
                             ) : (
                                 <>
-                                    <path strokeLinecap="round" strokeLinejoin="round" d="M4 15c2-2 4-2 6 0s4 2 6 0 4-2 6 0" />
-                                    <path strokeLinecap="round" strokeLinejoin="round" d="M4 11c2-2 4-2 6 0s4 2 6 0 4-2 6 0" />
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        d="M4 15c2-2 4-2 6 0s4 2 6 0 4-2 6 0"
+                                    />
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        d="M4 11c2-2 4-2 6 0s4 2 6 0 4-2 6 0"
+                                    />
                                 </>
                             )}
                         </svg>
                     </Button>
-
                     <Button
                         className={classes.BlueButton}
                         href="https://www.scichart.com/getting-started/scichart-javascript/"