hayun-vite 0.12.0 → 0.14.0

package/src/Tympanogram/Tympanogram.js

@@ -6,150 +6,175 @@ const svgNS = "http://www.w3.org/2000/svg";
 
 export default class Tympanogram {
     constructor({ container, side, dims }) {
-        this.pressure = { min: -600, max: +400, step: 200 };
-        this.compliance = { min: -0.50, max: 3, step: 0.50 };
-        this.padding = { right: 5, left: 8, top: 7, bottom: 14 };
         this.container = container;
         this.side = side
-        this.draw({dims})
+        this.dims = dims
+        this.draw({ dims })
     }
 
     draw({ dims }) {
-        let width = dims.width;
-        let height = dims.height;
+        // پاک کردن چارت قبلی اگر وجود دارد
+        this.chart && this.chart.remove()
+
+        // داده‌های یونتیت خوانده میشود و بعد داده‌های دیمز به آن اضافه می‌‌شودکه می‌تواند جایگزین داده‌های قبلی یونیتز شود
+        dims = { ...units, ...dims }
+
+        let { width, height } = dims
         let x = dims.margin.left;
         let y = dims.margin.top;
-        let style;
+        const { extraCompliance, compensated } = dims
 
-        const { pressure, compliance, padding } = {
-            pressure: this.pressure,
-            compliance: this.compliance,
-            padding: this.padding,
-        }
+        const { pressure, padding, styles } = units
+
+        const compliance = extraCompliance ? units.compliance.extra : units.compliance.normal
 
-        let { styles, vbWidth, vbHeight } = units;
+        let { vbWidth, vbHeight } = units;
 
         // کل چارت
+        let style
+        style = styles.svg
         vbHeight = (vbWidth * height) / width // متناسب سازی ارتفاع ویباکس با پهنا و ارتفاع ورودی
-        const viewBox = [-padding.left, -padding.top, vbWidth, vbHeight].join(' ');
-        const svg = putSVG({ x, y, width, height, viewBox })
+        const viewBox = [-padding.left, -padding.top, vbWidth, vbHeight].join(' ')
+        const svg = putSVG({ x, y, width, height, viewBox, style })
+        this.chart = svg;
         // این خط شد دو خط کد طلایی که مشکل سایز فونت در دیسپلی و کاغذ رو حل کرد
         width = vbWidth; // ثابت می‌ماند همیشه
         height = vbHeight // با نسبت پهنا و ارتفاع ورودی تغییر میکند 
 
         const pressureAxiosLength = {
             dapa: pressure.max - pressure.min,
-            mm: width - padding.left - padding.right
+            mm: width - (padding.left + padding.right)
         }
 
         const complianceAxiosLength = {
             ml: compliance.max - compliance.min,
-            mm: height - padding.top - padding.bottom
+            mm: height - (padding.top + padding.bottom)
+        }
+
+        this.chartInfo = {
+            pressure, compliance, padding,
+            pressureAxiosLength, complianceAxiosLength, compensated,
+        }
+
+        // point({ container: svg, x: getX(pressure.min), y: getY(compliance.max), color: 'red' })
+        // point({ container: svg, x: getX(pressure.max), y: getY(compliance.min), color: 'green' })
+        // point({ container: svg, x: getX(pressure.min), y: getY(compliance.min), color: 'brown' })
+
+
+        // Drawing Chart Lines
+        {
+            // Pressure Axios (Horizontal)
+            style = `
+                stroke-width: 0.15mm;
+                stroke: black;
+            `;
+            putLine({
+                x1: getX(pressure.min), y1: getY(compliance.min),
+                x2: getX(pressure.max), y2: getY(compliance.min), style
+            })
+
+            // Compliance Axios (Vertical)
+            putLine({
+                x1: getX(pressure.min), y1: getY(compliance.min),
+                x2: getX(pressure.min), y2: getY(compliance.max), style
+            })
+
+            // Pressure Zero Line
+            style = `
+                stroke-width: 0.07mm;
+                stroke: black;
+                stroke-dasharray: 0.4;
+                stroke-opacity: 0.5;
+            `;
+            putLine({
+                x1: getX(0), y1: getY(compliance.min),
+                x2: getX(0), y2: getY(compliance.max), style
+            })
+
+            // Compliance Zero Line
+            putLine({
+                x1: getX(pressure.min), y1: getY(0),
+                x2: getX(pressure.max), y2: getY(0), style
+            })
+        }
+
+        // Texts Chart (Captions & Labels)
+        {
+
+            // Captions:
+            style = styles.caption;
+
+            putText({
+                container: svg, value: "Compliance (ml)", style,
+                x: getX(pressure.min), y: getY(compliance.max), dx: 5, dy: -3
+            })
+
+            putText({
+                container: svg, value: "Pressure (dapa)", style: style,
+                x: getX(pressure.max), y: getY(compliance.min), dx: -8, dy: 6,
+            })
+
+            // Lables
+            style = styles.label;
+
+            putText({
+                container: svg, value: "ECV:", style: style,
+                x: getX(pressure.min), y: getY(compliance.min), dy: 10
+            })
+
+            putText({
+                container: svg, value: "MEP:", style,
+                x: getX(-300), y: getY(compliance.min), dy: 10
+            })
+
+            putText({
+                container: svg, value: "SC:", style: style,
+                x: getX(0), y: getY(compliance.min), dy: 10
+            });
+
+
+            putText({
+                container: svg, value: "G:", style,
+                x: getX(280), y: getY(compliance.min), dy: 10
+            });
+
+            style = styles.type;
+            putText({
+                container: svg, value: "Type", style: style,
+                x: getX(-500), y: getY(2.5),
+            });
         }
 
-        this.chartInfo = { pressure, compliance, padding, pressureAxiosLength, complianceAxiosLength }
-
-        // point({ this.container: svg, x: getX(pressure.min), y: getY(compliance.max), color: 'red' });
-        // point({ this.container: svg, x: getX(pressure.max), y: getY(compliance.min), color: 'green' });
-        // point({ this.container: svg, x: getX(pressure.min), y: getY(compliance.min), color: 'brown' });
-        // Pressure Axios (Horizontal)
-        style = `
-          stroke-width: 0.15mm;
-          stroke: black;
-        `;
-        putLine({
-            x1: getX(pressure.min), y1: getY(compliance.min),
-            x2: getX(pressure.max), y2: getY(compliance.min), style: style
-        })
-        // Compliance Axios (Vertical)
-        putLine({
-            x1: getX(pressure.min), y1: getY(compliance.min),
-            x2: getX(pressure.min), y2: getY(compliance.max), style: style
-        })
-        // Pressure Zero Line
-        style = `
-          stroke-width: 0.07mm;
-          stroke: black;
-          stroke-dasharray: 0.4;
-          stroke-opacity: 0.5;
-        `;
-        putLine({
-            x1: getX(0), y1: getY(compliance.min),
-            x2: getX(0), y2: getY(compliance.max), style: style
-        });
-
-        // Compliance Zero Line
-        putLine({
-            x1: getX(pressure.min), y1: getY(0),
-            x2: getX(pressure.max), y2: getY(0), style: style
-        });
-
-        // Captions:
-        style = styles.caption;
-
-        putText({
-            container: svg, value: "Compliance (ml)", style,
-            x: getX(pressure.min), y: getY(compliance.max), dx: 5, dy: -3
-        });
-
-        putText({
-            container: svg, value: "Pressure (dapa)", style: style,
-            x: getX(pressure.max), y: getY(compliance.min), dx: -8, dy: 6,
-        });
-
-        style = styles.label;
-        let color = (this.side === 'R') ? 'red' : 'blue';
-
-        putText({
-            container: svg, value: "ECV:", style: style,
-            x: getX(pressure.min), y: getY(compliance.min), dy: 10
-        });
-
-        putText({
-            container: svg, value: "", style: style + 'fill: ' + color, name: 'ECV',
-            x: getX(pressure.min), y: getY(compliance.min), dy: 10, dx: 11
-        });
-
-        putText({
-            container: svg, value: "MEP:", style: style,
-            x: getX(-300), y: getY(compliance.min), dy: 10
-        });
-
-        putText({
-            container: svg, value: "", style: style + 'fill: ' + color, name: 'MEP',
-            x: getX(-300), y: getY(compliance.min), dy: 10, dx: 11
-        });
-
-        putText({
-            container: svg, value: "SC:", style: style,
-            x: getX(0), y: getY(compliance.min), dy: 10
-        });
-
-        putText({
-            container: svg, value: "", style: style + 'fill: ' + color, name: 'SC',
-            x: getX(0), y: getY(compliance.min), dy: 10, dx: 8
-        });
-
-        putText({
-            container: svg, value: "G:", style: style,
-            x: getX(280), y: getY(compliance.min), dy: 10
-        });
-
-        putText({
-            container: svg, value: "", style: style + 'fill: ' + color, name: 'G',
-            x: getX(300), y: getY(compliance.min), dy: 10, dx: 4
-        });
-
-        style = styles.type;
-        putText({
-            container: svg, value: "Type", style: style + 'fill: ' + color,
-            x: getX(-500), y: getY(2.5),
-        });
-
-        putText({
-            container: svg, value: "", style: style + 'fill: ' + color, name: 'Type',
-            x: getX(-500), y: getY(2.5), dx: 9
-        });
+        // Tympanogram Values (Inputs)
+        {
+            let color = (this.side === 'R') ? 'red' : 'blue';
+            style = styles.input
+
+            putText({
+                container: svg, value: "", style: style + 'fill: ' + color, name: 'ECV',
+                x: getX(pressure.min), y: getY(compliance.min), dy: 10, dx: 11
+            })
+
+            putText({
+                container: svg, value: "", style: style + 'fill: ' + color, name: 'MEP',
+                x: getX(-300), y: getY(compliance.min), dy: 10, dx: 11
+            })
+
+            putText({
+                container: svg, value: "", style: style + 'fill: ' + color, name: 'SC',
+                x: getX(0), y: getY(compliance.min), dy: 10, dx: 8
+            })
+
+            putText({
+                container: svg, value: "", style: style + 'fill: ' + color, name: 'G',
+                x: getX(300), y: getY(compliance.min), dy: 10, dx: 4
+            })
+
+            putText({
+                container: svg, value: "", style: style + 'fill: ' + color, name: 'Type',
+                x: getX(-500), y: getY(2.5), dx: 9
+            })
+        }
 
         // Compliance Axios digits
         style = styles.compliance;
@@ -157,9 +182,9 @@ export default class Tympanogram {
         for (let c = compliance.min + compliance.step; c <= compliance.max; c += compliance.step) {
             c = Math.round(c * 10) / 10 // برای اون پدیده اعشاری غیرمنتظر
             putText({
-                container: svg, value: c,
+                container: svg, value: c.toFixed(1),
                 x, y: getY(c), dx: -1,
-                style: style,
+                style,
             });
         }
 
@@ -173,13 +198,13 @@ export default class Tympanogram {
             });
         }
 
-        // console.log(this.container);
         // مربع احاطه‌کننده کل جدول برای راهنمای توسعه
         style = 'fill: transparent; stroke: green; stroke-width: 0.5;';
         // یک بوردر راهنمای توسعه برای اس‌ وی جی به تمام پهنا و ارتفاع رسم می‌کنیم
         putRect({ container: svg, x: -padding.left, y: -padding.top, width, height, name: dims.name, style })
-        this.chart = svg;
         this.container.appendChild(svg);
+        // اگر آبجکت از قبل دیتایی دارد اون رو آپدیت کن
+        this.data && this.update(this.data)
 
         // بلاک توابع داخلی مورد نیاز تابع اصلی
         // توابع تبدیل فشار و کامپلیانس به مختصات میلیمتر
@@ -193,17 +218,13 @@ export default class Tympanogram {
 
         // تابع رسم خط
         function putLine({ x1, y1, x2, y2, style }) {
-
             let line = document.createElementNS(svgNS, "line");
             line.setAttribute("x1", x1);
             line.setAttribute("y1", y1);
             line.setAttribute("x2", x2);
             line.setAttribute("y2", y2);
             line.setAttribute("style", style)
-            // line.setAttribute("stroke", "black");
-            // line.setAttribute("stroke-width", "0.1px");
             svg.appendChild(line);
-
         }
 
         // تابع ایجاد و رسم نقطه نشانگر رنگی
@@ -218,13 +239,20 @@ export default class Tympanogram {
     }
 
     update(data) {
+        this.data = data
+        let { ECV, SC, MEP, G } = data
+
+        // تبدبل اعداد رشته ای به عدد با دو رقم اعشاری
+        ECV && (ECV = (+ECV).toFixed(2));
+        SC && (SC = (+SC).toFixed(2));
+        G && (G = (+G).toFixed(2));
 
         // جایگذاری مقادیر تمپانومتری در تکست‌باکس ها
-        this.chart.querySelector(`text[data-name="Type"]`).innerHTML = data?.Type || "";
-        this.chart.querySelector(`text[data-name="ECV"]`).innerHTML = data?.ECV || "";
-        this.chart.querySelector(`text[data-name="MEP"]`).innerHTML = data?.MEP || "";
-        this.chart.querySelector(`text[data-name="SC"]`).innerHTML = data?.SC || "";
-        this.chart.querySelector(`text[data-name="G"]`).innerHTML = data?.G || "";
+        this.chart.querySelector(`text[data-name="Type"]`).innerHTML = data?.Type || "-";
+        this.chart.querySelector(`text[data-name="ECV"]`).innerHTML = ECV || "-";
+        this.chart.querySelector(`text[data-name="MEP"]`).innerHTML = data?.MEP || "-";
+        this.chart.querySelector(`text[data-name="SC"]`).innerHTML = SC || "-";
+        this.chart.querySelector(`text[data-name="G"]`).innerHTML = G || "-";
         // پاک کردن منحنی قبلی از کانتینر جاری
         this.chart.querySelector(`path[data-name="curve"]`)?.remove();
         // رسم منحنی
@@ -233,79 +261,96 @@ export default class Tympanogram {
 
     // توابع داخلی
     drawCurve(data) {
+        let { Type, ECV, SC, MEP, G, expanded, cp, cpp } = data
+
         // Ensure to Convert to Numbers //
+        SC = +SC
+        ECV = +ECV
+        MEP = +MEP
+        G = +G
+        cp = +cp
+        cpp = +cpp
+
+        // اگر این مقادیر وجود نداشته باشه مقدار صفر میدیم بهشون که خطا در رسم منحنی نخوریم
+        SC || (SC = 0)
+        MEP || (MEP = 0)
+
         const container = this.chart
-        const { pressure, compliance, pressureAxiosLength, complianceAxiosLength } = this.chartInfo;
+        const { pressure, compliance, pressureAxiosLength, complianceAxiosLength, compensated } = this.chartInfo;
 
-        // تمرین پیدا کردن نقاط
-        point({ x: getX(-400), y: getY(5), color: 'green' })
+        let cmp = 0 // for non-compensated
+        compensated && (cmp = ECV)
 
         // مقداردهی دستی برای تست شکل منحنی
         // data.SC = 0.5;
         // data.MEP = -75;
         // با توجه به اندازه اس ‌سی میشه برای مقادیر زیر یک سری رل گذاشت با منحنی قشنگ تر باشد
-        let cp = 70; // جابجایی نقطه کنترل منحنی های راست و چپ روی محور افقی
+        // let cp = 70 // جابجایی نقطه کنترل منحنی های راست و چپ روی محور افقی
+        !cp && (cp = 70)
         // let k = 0.5; // width and height change [0, 1]
-        let cpp = 5; //جابجایی نقطه کنترل قله ها روی محور افقی
+        !cpp && (cpp = 5) //جابجایی نقطه کنترل قله ها روی محور افقی
         // رل‌هایی برای تغییر مقادیر بالا برای زیبایی بیشتر منحنی در نقطه قله
         // (data.SC <= 0.30)? k=0
-        let k = (+data.SC > 0.30) ? 0.5 : 0.1; // width and height change [0, 1]
-        k = (+data.SC > 1.0) ? 0.2 : k;
+        let k
+        k = (SC > 0.30) ? 0.5 : 0.1 // width and height change [0, 1]
+        k = (SC > 1.0) ? 0.2 : k
         // k = (data.SC < 1.0) ? 0 : k;
 
-        let pw = 20 * k; // نصف پهنای قله
-        let ph = 0.1 * k; // ارتفاع قله
+        let pw = 20 * k // نصف پهنای قله
+        let ph = 0.1 * k // ارتفاع قله
 
         let zone = {
             normal: { min: -300, max: 250 },
             expanded: { min: -600, max: 400 },
         }
         // تعیین کرانه‌های منحنی بر حسب فشار گوش میانی
-        let RV = zone.normal;
-        if (+data.MEP > -250 && +data.MEP < 200) { RV = zone.normal } else { RV = zone.expanded }
-
+        let RV = zone.normal
+        if (MEP <= -150 || MEP >= 100 || expanded) { RV = zone.expanded } else { RV = zone.normal }
 
-        const curve2 = {
+        const curve = {
             R: {
-                P1: { p: RV.max, c: 0 },
-                P2: { p: +data.MEP + pw, c: +data.SC - ph },
-                C: { p: +data.MEP + cp, c: 0 }
+                P1: { p: RV.max, c: cmp },
+                P2: { p: MEP + pw, c: cmp + SC - ph },
+                C: { p: MEP + cp, c: cmp }
             },
             RM: {
-                P2: { p: +data.MEP, c: +data.SC },
-                C: { p: +data.MEP + cpp, c: +data.SC }
+                P1: {}, // Define later
+                P2: { p: MEP, c: cmp + SC },
+                C: { p: MEP + cpp, c: cmp + SC }
             },
             LM: {
-                P2: { p: +data.MEP - pw, c: +data.SC - ph },
-                C: { p: +data.MEP - cpp, c: +data.SC }
+                P1: {}, // Define later
+                P2: { p: MEP - pw, c: cmp + SC - ph },
+                C: { p: MEP - cpp, c: cmp + SC }
             },
             L: {
-                P1: {},
-                P2: { p: RV.min, c: 0 },
-                C: { p: +data.MEP - cp, c: 0 }
+                P1: {}, // Define later
+                P2: { p: RV.min, c: cmp },
+                C: { p: MEP - cp, c: cmp }
             }
         }
 
         // به دست آوردن مختصات نقاط کنترل بر حسب مختصات پیک
-        curve2.RM.P1 = curve2.R.P2
-        curve2.LM.P1 = curve2.RM.P2
-        curve2.L.P1 = curve2.LM.P2
+        curve.RM.P1 = curve.R.P2
+        curve.LM.P1 = curve.RM.P2
+        curve.L.P1 = curve.LM.P2
+
+        let color = (this.side == "R") ? "red" : "blue";
         let path = document.createElementNS(svgNS, "path");
         path.setAttribute("fill", "none");
         path.setAttribute("data-name", "curve");
-        let color = (this.side == "R") ? "red" : "blue";
         path.setAttribute("stroke", color);
         path.setAttribute("stroke-width", "0.5px");
         path.setAttribute(
             "d", `
-            M ${ctg(curve2.R.P1)}
-            Q ${ctg(curve2.R.C)} ${ctg(curve2.R.P2)}
-            M ${ctg(curve2.RM.P1)}
-            Q ${ctg(curve2.RM.C)} ${ctg(curve2.RM.P2)}
-            M ${ctg(curve2.LM.P1)}
-            Q ${ctg(curve2.LM.C)} ${ctg(curve2.LM.P2)}
-            M ${ctg(curve2.L.P1)}
-            Q ${ctg(curve2.L.C)} ${ctg(curve2.L.P2)}
+            M ${ctg(curve.R.P1)}
+            Q ${ctg(curve.R.C)} ${ctg(curve.R.P2)}
+            M ${ctg(curve.RM.P1)}
+            Q ${ctg(curve.RM.C)} ${ctg(curve.RM.P2)}
+            M ${ctg(curve.LM.P1)}
+            Q ${ctg(curve.LM.C)} ${ctg(curve.LM.P2)}
+            M ${ctg(curve.L.P1)}
+            Q ${ctg(curve.L.C)} ${ctg(curve.L.P2)}
             `
         );
         container.appendChild(path);

package/src/Tympanogram/test.js

@@ -0,0 +1,85 @@
+import Tympanogram from "./Tympanogram";
+
+document.querySelector('#app').innerHTML = `
+    <div id="test"></div>
+    <p>Curve settings:</p>
+    <div>
+      <input type="range" id="cp" name="cp" min="10" max="150" value="70" step="5" />
+      <label for="cp">cp</label>
+      <input type="range" id="cpp" name="cpp" min="1" max="10" value="5" step="1" />
+      <label for="cpp">cpp</label>
+      <div>
+        <input type="checkbox" name="extra-sc" id="extra-sc">
+        <label for="extra-sc">Extra SC</label>
+      </div>
+      <div>
+        <input type="checkbox" name="compensated" id="compensated">
+        <label for="compensated">Compensated</label>
+      </div>
+    </div>
+`;
+let dims = {
+    "name": "RTympanogram",
+    "w": 100,
+    "h": 60,
+    "margin": {
+        "left": 2,
+        "top": 0,
+        "right": 2,
+        "bottom": 0
+    },
+    "display": "inline",
+    "width": 100 * 12,
+    "height": 60 * 12,
+}
+let data = {
+    Type: "An",
+    ECV: '1.30',
+    SC: '0.80',
+    MEP: '-130',
+    G: 0.2,
+    expanded: false, // by default is false for expand pressure from -600 to +400
+
+}
+let cp = 70, cpp = 5, extraCompliance, compensated
+
+document.querySelector("#compensated").addEventListener("input", e => {
+    compensated = e.target.checked
+    console.log(e.target.checked);
+    dims = { ...dims, compensated }
+    RTympanogram.draw({ dims })
+
+})
+
+document.querySelector("#extra-sc").addEventListener("input", e => {
+    extraCompliance = e.target.checked
+    console.log(e.target.checked);
+    dims = { ...dims, extraCompliance }
+    RTympanogram.draw({ dims })
+
+})
+
+document.querySelector("#cp")
+    .addEventListener("input", e => {
+        cp = e.target.value
+        console.log(cp);
+        data = {...data, cp}
+        
+        RTympanogram.update(data)
+    })
+
+
+document.querySelector("#cpp")
+    .addEventListener("input", e => {
+        cpp = e.target.value
+        console.log(cpp);
+        data = {...data, cpp}
+
+        RTympanogram.update(data)
+    })
+
+const container = document.getElementById('test')
+
+const RTympanogram = new Tympanogram({ container, dims, side: 'R' })
+RTympanogram.update(data)
+

package/src/Tympanogram/units.js

@@ -11,55 +11,46 @@ const units = {
     width: 100,
     height: 60,
 
-    // این فاصله خطوط محورهای بالا و چپ ادیوگرام از لبه ها هست
-    chartPadding: { left: 40, top: 40, right: 30, bottom: 20 },
-    symbolDims: { width: 55, height: 55 },
-    symbolsChart: {
-        width: 240, height: 60
+    pressure: { min: -600, max: +400, step: 200 },
+    compliance: {
+        normal: { min: -0.50, max: 3, step: 0.50 },
+        extra: { min: -0.50, max: 6, step: 0.50 }
     },
-    // virtual frequency 
-    mainFrequencies: [125, 250, 500, 1000, 2000, 4000, 8000],
-   
-    intensity: { min: -20, max: 130, step: 10 },
-    
+    padding: { right: 5, left: 8, top: 7, bottom: 14 },
+    extraCompliance: false, // default is false (0-3) | true (0-6)
+    compensated: false, // default is false | true
+
     styles: {
+        svg: 'user-select: none; direction: ltr !important; font-family: Vazir;',
         pressure: `
-            user-select: none;
-            direction: ltr !important;
-            font-family: Vazir;
             font-size: 3;
             text-anchor: middle; 
             dominant-baseline: hanging; 
         `,
         caption: `
-            user-select: none;
-            direction: ltr !important;
-            font-family: Vazir;
             font-size: 3;
             text-anchor: middle; 
             dominant-baseline: middle; 
         `,
         label: `
-            user-select: none;
-            direction: ltr !important;
-            font-family: Vazir;
-            font-size: 1mm;
+            font-size: 4.2;
+            font-weight: bold;
+            text-anchor: start;
+            dominant-baseline: middle;       
+        `,
+        input: `
+            font-size: 4.2;
+            font-weight: bold;
             text-anchor: start;
             dominant-baseline: middle;       
         `,
         type: `
-            user-select: none;
-            direction: ltr !important;
-            font-family: Vazir;
             font-size: 1mm;
             font-weight: bold;
             text-anchor: start;
             dominant-baseline: middle;   
         `,
         compliance: `
-            user-select: none;
-            direction: ltr !important;
-            font-family: Vazir;
             font-size: 0.7mm;
             text-anchor: end; 
             dominant-baseline: middle;