chore: add advanced example

Author: lpatiny

examples/data.json

@@ -1,14 +1,49 @@
-const gsd = require('../src/gsd');
-
-let X = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
-let Y = [0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0];
-let peaks = gsd(X, Y, {
-  noiseLevel: 0,
-  minMaxRatio: 0.00025, // Threshold to determine if a given peak should be considered as a noise
-  realTopDetection: true,
-  maxCriteria: true, // inverted:false
+/*
+install vscode plugin `liveserver` and right click on index.html and `Open with liveserver`
+
+ start this code with automatic reload using
+`npm run example``
+*/
+
+import { gsd, optimizePeaks } from '../src';
+import { writeFileSync } from 'fs'
+import { join } from 'path'
+import { generateSpectrum } from 'spectrum-generator'
+
+const peaks = [
+  { x: -0.1, y: 0.2, width: 0.3 },
+  { x: 0.1, y: 0.2, width: 0.1 },
+];
+
+const original = generateSpectrum(peaks, { from: -1, to: 1, nbPoints: 101 });
+
+
+let peakList = gsd(original, {
+  minMaxRatio: 0,
+  realTopDetection: false,
   smoothY: false,
-  sgOptions: { windowSize: 7, polynomial: 3 },
+  heightFactor: 1,
+  shape: { kind: 'gaussian' },
 });
 
-console.log(peaks);
+
+let optimizedPeaks = optimizePeaks(original, peakList);
+
+let labels = optimizedPeaks.map(peak => ({ x: peak.x, y: peak.y, dy: '-10px', dx: '3px', text: peak.x.toPrecision(4) + ' / ' + peak.y.toPrecision(4) }));
+let lines = optimizedPeaks.map(peak => ([{ x: peak.x, y: peak.y }, { x: peak.x, y: peak.y, dy: '-20px' }]));
+let polygons = [];
+for (const peak of optimizedPeaks) {
+  const peaksSpectrum = generateSpectrum([peak], { from: peak.x - peak.width * 5, to: peak.x + peak.width * 5, nbPoints: 501 });
+  const polygon = [];
+  for (let i = 0; i < peaksSpectrum.x.length; i++) {
+    polygon.push({ x: peaksSpectrum.x[i], y: peaksSpectrum.y[i] })
+  }
+  polygons.push(polygon);
+}
+
+
+
+original.x = Array.from(original.x)
+original.y = Array.from(original.y)
+
+writeFileSync(join(__dirname, 'data.json'), JSON.stringify({ data: original, labels, lines, polygons }), 'utf8')

examples/example.js

@@ -24,12 +24,14 @@ <h1>A spectrum-generator module usage example</h1>
 
     <script>
       // fetching data
+      const colors = ['red', 'green', 'blue'];
 
       createGraph();
 
       async function createGraph() {
-        var reponse = await fetch('./data.json');
-        var values = await reponse.json();
+        const response = await fetch('./data.json');
+        const json = await response.json();
+        const data = json.data || json;
 
         // options for zoom
         let options = {
@@ -65,28 +67,59 @@ <h1>A spectrum-generator module usage example</h1>
         graph.resize(800, 600); // Resizes the container
 
         let waveForm = Graph.newWaveform();
-        let arrayX = values.x;
-        let arrayY = values.y;
-        waveForm.setData(arrayY, arrayX);
+        waveForm.setData(data.y, data.x);
 
         graph
           .newSerie('line serie', {}, 'line') // Creates a new serie
           .autoAxis() // Assigns axes
           .setWaveform(waveForm);
 
-        var modifiers = []; // We can define a specific style for some points in the scatter plot
-        // modifiers[20] = { shape: 'circle', r: 12, fill: 'rgba(0, 100, 255, 0.3)', stroke: 'rgb(0, 150, 255)' };
+        if (false && json.labels) {
+          for (let label of json.labels) {
+            const shape = graph.newShape('label', {
+              label: {
+                text: label.text,
+                position: {
+                  x: label.x,
+                  y: label.y,
+                  dx: label.dx,
+                  dy: label.dy,
+                },
+              },
+            });
+            shape.draw();
+          }
+        }
 
-        /*
-        graph
-          .newSerie('scatter serie', {}, 'scatter') // Creates a new serie
-          .autoAxis() // Assigns axes
-          .setWaveform(waveForm)
-          .setStyle(
-            { shape: 'circle', r: 4, fill: 'red', stroke: 'blue' },
-            modifiers,
-          );
-*/
+        if (false && json.lines) {
+          for (let line of json.lines) {
+            const shape = graph.newShape('line', {
+              position: line,
+            });
+            console.log(line);
+            shape.draw();
+          }
+        }
+
+        if (json.polygons) {
+          for (let i = 0; i < json.polygons.length; i++) {
+            const polygon = json.polygons[i];
+            const shape = graph.newShape(
+              'polygon',
+              {
+                position: polygon,
+              },
+              false,
+              {
+                fillColor: colors[i % colors.length],
+                fillOpacity: 0.15,
+                strokeWidth: 1,
+                strokeColor: colors[i % colors.length],
+              },
+            );
+            shape.draw();
+          }
+        }
 
         graph.draw(); // Draw
       }

examples/index.html

@@ -13,6 +13,7 @@
   },
   "scripts": {
     "build": "rollup -c && cheminfo-build --entry src/index.js --root GSD",
+    "example": "nodemon -w src -w examples/example.js -r esm examples/example.js",
     "eslint": "eslint src --cache",
     "eslint-fix": "npm run eslint -- --fix",
     "compile": "rollup -c",
@@ -66,6 +67,7 @@
     "jest-matcher-deep-close-to": "^2.0.1",
     "mf-global": "^1.3.0",
     "ml-stat": "^1.3.3",
+    "nodemon": "^2.0.6",
     "prettier": "^2.2.1",
     "rollup": "^2.34.1",
     "spectrum-generator": "^4.4.2",