hayun-vite 0.12.0 → 0.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/index.html +4 -1
  2. package/index.js +2 -0
  3. package/package.json +1 -1
  4. package/src/Forms/Forms.js +5 -4
  5. package/src/Tympanogram/Tympanogram.js +195 -160
  6. package/src/Tympanogram/test.js +34 -0
  7. package/src/Tympanogram/units.js +16 -26
  8. package/src/main.js +0 -1
package/index.html CHANGED
@@ -3,11 +3,14 @@
3
3
  <head>
4
4
  <meta charset="UTF-8" />
5
5
  <link rel="icon" type="image/svg+xml" href="vite.svg" />
6
+ <link rel="stylesheet" href="/src/styles.css">
6
7
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
+
7
9
  <title>hayun</title>
8
10
  </head>
9
11
  <body>
10
12
  <div id="app"></div>
11
- <script type="module" src="/src/main.js"></script>
13
+ <!-- <script type="module" src="/src/main.js"></script> -->
14
+ <script type="module" src="/src/Tympanogram/test.js"></script>
12
15
  </body>
13
16
  </html>
package/index.js CHANGED
@@ -3,6 +3,8 @@ import dims from './src/Audiogram/dims'
3
3
  import { officeData, patientData } from './assets/data/sampleData'
4
4
  import Forms from './src/Forms/Forms'
5
5
  import combo_template from './assets/templates/template_combo'
6
+ import './src/styles.css'
7
+
6
8
  // import rasa_aud_template from './assets/templates/rasa_audiometry'
7
9
  // import rasa_tymp_reflex_template from './assets/templates/rasa_tymp_reflex'
8
10
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "hayun-vite",
3
3
  "private": false,
4
- "version": "0.12.0",
4
+ "version": "0.13.0",
5
5
  "type": "module",
6
6
  "scripts": {
7
7
  "dev": "vite",
package/src/Forms/Forms.js CHANGED
@@ -1,15 +1,16 @@
1
- const svgNS = "http://www.w3.org/2000/svg";
2
-
1
+ // import '../styles.css' // برای تست منتقل شد به فایل ایندکس اصلی اچ‌تی‌ام‌ال و برای توسعه منتقل شده به ایندکس جی اس
2
+ import putLine from "../common/putLine.js";
3
3
  import printForm from "./printForm.js";
4
4
  import Form from "../Form/Form.js";
5
+
6
+ const svgNS = "http://www.w3.org/2000/svg";
7
+
5
8
  // import combo from "./templates/combo.js"; // این در حقیقیت یک تمپلت هست
6
9
  // import rasaAud from "./templates/rasa_audiometry.js";
7
10
  // import rasaTymp from './templates/rasa_tymp_reflex.js'
8
11
 
9
12
  // خط کد زیر لازم هست
10
13
  // import '/fonts/webfonts/Vazirmatn-Regular.woff2'
11
- import '../styles.css'
12
- import putLine from "../common/putLine.js";
13
14
 
14
15
  // کلاس جدید که فرم‌های مختلف را نمایش میدهد
15
16
  export default class Forms {
package/src/Tympanogram/Tympanogram.js CHANGED
@@ -6,150 +6,166 @@ const svgNS = "http://www.w3.org/2000/svg";
6
6
 
7
7
  export default class Tympanogram {
8
8
  constructor({ container, side, dims }) {
9
- this.pressure = { min: -600, max: +400, step: 200 };
10
- this.compliance = { min: -0.50, max: 3, step: 0.50 };
11
- this.padding = { right: 5, left: 8, top: 7, bottom: 14 };
12
9
  this.container = container;
13
10
  this.side = side
14
- this.draw({dims})
11
+ this.dims = dims
12
+ this.draw({ dims })
15
13
  }
16
14
 
17
- draw({ dims }) {
15
+ draw({ dims, extraCompliance = false }) {
18
16
  let width = dims.width;
19
17
  let height = dims.height;
20
18
  let x = dims.margin.left;
21
19
  let y = dims.margin.top;
22
20
  let style;
23
21
 
24
- const { pressure, compliance, padding } = {
25
- pressure: this.pressure,
26
- compliance: this.compliance,
27
- padding: this.padding,
28
- }
22
+ const { pressure, padding, styles } = units
23
+
24
+ const compliance = extraCompliance ? units.compliance.extra : units.compliance.normal
29
25
 
30
- let { styles, vbWidth, vbHeight } = units;
26
+
27
+ let { vbWidth, vbHeight } = units;
31
28
 
32
29
  // کل چارت
30
+ style = styles.svg
33
31
  vbHeight = (vbWidth * height) / width // متناسب سازی ارتفاع ویباکس با پهنا و ارتفاع ورودی
34
- const viewBox = [-padding.left, -padding.top, vbWidth, vbHeight].join(' ');
35
- const svg = putSVG({ x, y, width, height, viewBox })
32
+ const viewBox = [-padding.left, -padding.top, vbWidth, vbHeight].join(' ')
33
+ const svg = putSVG({ x, y, width, height, viewBox, style })
36
34
  // این خط شد دو خط کد طلایی که مشکل سایز فونت در دیسپلی و کاغذ رو حل کرد
37
35
  width = vbWidth; // ثابت می‌ماند همیشه
38
36
  height = vbHeight // با نسبت پهنا و ارتفاع ورودی تغییر میکند
39
37
 
40
38
  const pressureAxiosLength = {
41
39
  dapa: pressure.max - pressure.min,
42
- mm: width - padding.left - padding.right
40
+ mm: width - (padding.left + padding.right)
43
41
  }
44
42
 
45
43
  const complianceAxiosLength = {
46
44
  ml: compliance.max - compliance.min,
47
- mm: height - padding.top - padding.bottom
45
+ mm: height - (padding.top + padding.bottom)
48
46
  }
49
47
 
50
48
  this.chartInfo = { pressure, compliance, padding, pressureAxiosLength, complianceAxiosLength }
51
49
 
52
- // point({ this.container: svg, x: getX(pressure.min), y: getY(compliance.max), color: 'red' });
53
- // point({ this.container: svg, x: getX(pressure.max), y: getY(compliance.min), color: 'green' });
54
- // point({ this.container: svg, x: getX(pressure.min), y: getY(compliance.min), color: 'brown' });
55
- // Pressure Axios (Horizontal)
56
- style = `
57
- stroke-width: 0.15mm;
58
- stroke: black;
59
- `;
60
- putLine({
61
- x1: getX(pressure.min), y1: getY(compliance.min),
62
- x2: getX(pressure.max), y2: getY(compliance.min), style: style
63
- })
64
- // Compliance Axios (Vertical)
65
- putLine({
66
- x1: getX(pressure.min), y1: getY(compliance.min),
67
- x2: getX(pressure.min), y2: getY(compliance.max), style: style
68
- })
69
- // Pressure Zero Line
70
- style = `
71
- stroke-width: 0.07mm;
72
- stroke: black;
73
- stroke-dasharray: 0.4;
74
- stroke-opacity: 0.5;
75
- `;
76
- putLine({
77
- x1: getX(0), y1: getY(compliance.min),
78
- x2: getX(0), y2: getY(compliance.max), style: style
79
- });
80
-
81
- // Compliance Zero Line
82
- putLine({
83
- x1: getX(pressure.min), y1: getY(0),
84
- x2: getX(pressure.max), y2: getY(0), style: style
85
- });
86
-
87
- // Captions:
88
- style = styles.caption;
89
-
90
- putText({
91
- container: svg, value: "Compliance (ml)", style,
92
- x: getX(pressure.min), y: getY(compliance.max), dx: 5, dy: -3
93
- });
94
-
95
- putText({
96
- container: svg, value: "Pressure (dapa)", style: style,
97
- x: getX(pressure.max), y: getY(compliance.min), dx: -8, dy: 6,
98
- });
99
-
100
- style = styles.label;
101
- let color = (this.side === 'R') ? 'red' : 'blue';
102
-
103
- putText({
104
- container: svg, value: "ECV:", style: style,
105
- x: getX(pressure.min), y: getY(compliance.min), dy: 10
106
- });
107
-
108
- putText({
109
- container: svg, value: "", style: style + 'fill: ' + color, name: 'ECV',
110
- x: getX(pressure.min), y: getY(compliance.min), dy: 10, dx: 11
111
- });
112
-
113
- putText({
114
- container: svg, value: "MEP:", style: style,
115
- x: getX(-300), y: getY(compliance.min), dy: 10
116
- });
117
-
118
- putText({
119
- container: svg, value: "", style: style + 'fill: ' + color, name: 'MEP',
120
- x: getX(-300), y: getY(compliance.min), dy: 10, dx: 11
121
- });
122
-
123
- putText({
124
- container: svg, value: "SC:", style: style,
125
- x: getX(0), y: getY(compliance.min), dy: 10
126
- });
127
-
128
- putText({
129
- container: svg, value: "", style: style + 'fill: ' + color, name: 'SC',
130
- x: getX(0), y: getY(compliance.min), dy: 10, dx: 8
131
- });
132
-
133
- putText({
134
- container: svg, value: "G:", style: style,
135
- x: getX(280), y: getY(compliance.min), dy: 10
136
- });
137
-
138
- putText({
139
- container: svg, value: "", style: style + 'fill: ' + color, name: 'G',
140
- x: getX(300), y: getY(compliance.min), dy: 10, dx: 4
141
- });
142
-
143
- style = styles.type;
144
- putText({
145
- container: svg, value: "Type", style: style + 'fill: ' + color,
146
- x: getX(-500), y: getY(2.5),
147
- });
148
-
149
- putText({
150
- container: svg, value: "", style: style + 'fill: ' + color, name: 'Type',
151
- x: getX(-500), y: getY(2.5), dx: 9
152
- });
50
+ // point({ container: svg, x: getX(pressure.min), y: getY(compliance.max), color: 'red' })
51
+ // point({ container: svg, x: getX(pressure.max), y: getY(compliance.min), color: 'green' })
52
+ // point({ container: svg, x: getX(pressure.min), y: getY(compliance.min), color: 'brown' })
53
+
54
+
55
+ // Drawing Chart Lines
56
+ {
57
+ // Pressure Axios (Horizontal)
58
+ style = `
59
+ stroke-width: 0.15mm;
60
+ stroke: black;
61
+ `;
62
+ putLine({
63
+ x1: getX(pressure.min), y1: getY(compliance.min),
64
+ x2: getX(pressure.max), y2: getY(compliance.min), style
65
+ })
66
+
67
+ // Compliance Axios (Vertical)
68
+ putLine({
69
+ x1: getX(pressure.min), y1: getY(compliance.min),
70
+ x2: getX(pressure.min), y2: getY(compliance.max), style
71
+ })
72
+
73
+ // Pressure Zero Line
74
+ style = `
75
+ stroke-width: 0.07mm;
76
+ stroke: black;
77
+ stroke-dasharray: 0.4;
78
+ stroke-opacity: 0.5;
79
+ `;
80
+ putLine({
81
+ x1: getX(0), y1: getY(compliance.min),
82
+ x2: getX(0), y2: getY(compliance.max), style
83
+ })
84
+
85
+ // Compliance Zero Line
86
+ putLine({
87
+ x1: getX(pressure.min), y1: getY(0),
88
+ x2: getX(pressure.max), y2: getY(0), style
89
+ })
90
+ }
91
+
92
+ // Texts Chart (Captions & Labels)
93
+ {
94
+
95
+ // Captions:
96
+ style = styles.caption;
97
+
98
+ putText({
99
+ container: svg, value: "Compliance (ml)", style,
100
+ x: getX(pressure.min), y: getY(compliance.max), dx: 5, dy: -3
101
+ })
102
+
103
+ putText({
104
+ container: svg, value: "Pressure (dapa)", style: style,
105
+ x: getX(pressure.max), y: getY(compliance.min), dx: -8, dy: 6,
106
+ })
107
+
108
+ // Lables
109
+ style = styles.label;
110
+
111
+ putText({
112
+ container: svg, value: "ECV:", style: style,
113
+ x: getX(pressure.min), y: getY(compliance.min), dy: 10
114
+ })
115
+
116
+ putText({
117
+ container: svg, value: "MEP:", style,
118
+ x: getX(-300), y: getY(compliance.min), dy: 10
119
+ })
120
+
121
+ putText({
122
+ container: svg, value: "SC:", style: style,
123
+ x: getX(0), y: getY(compliance.min), dy: 10
124
+ });
125
+
126
+
127
+ putText({
128
+ container: svg, value: "G:", style,
129
+ x: getX(280), y: getY(compliance.min), dy: 10
130
+ });
131
+
132
+ style = styles.type;
133
+ putText({
134
+ container: svg, value: "Type", style: style,
135
+ x: getX(-500), y: getY(2.5),
136
+ });
137
+ }
138
+
139
+ // Tympanogram Values (Inputs)
140
+ {
141
+ let color = (this.side === 'R') ? 'red' : 'blue';
142
+ style = styles.input
143
+
144
+ putText({
145
+ container: svg, value: "", style: style + 'fill: ' + color, name: 'ECV',
146
+ x: getX(pressure.min), y: getY(compliance.min), dy: 10, dx: 11
147
+ })
148
+
149
+ putText({
150
+ container: svg, value: "", style: style + 'fill: ' + color, name: 'MEP',
151
+ x: getX(-300), y: getY(compliance.min), dy: 10, dx: 11
152
+ })
153
+
154
+ putText({
155
+ container: svg, value: "", style: style + 'fill: ' + color, name: 'SC',
156
+ x: getX(0), y: getY(compliance.min), dy: 10, dx: 8
157
+ })
158
+
159
+ putText({
160
+ container: svg, value: "", style: style + 'fill: ' + color, name: 'G',
161
+ x: getX(300), y: getY(compliance.min), dy: 10, dx: 4
162
+ })
163
+
164
+ putText({
165
+ container: svg, value: "", style: style + 'fill: ' + color, name: 'Type',
166
+ x: getX(-500), y: getY(2.5), dx: 9
167
+ })
168
+ }
153
169
 
154
170
  // Compliance Axios digits
155
171
  style = styles.compliance;
@@ -157,7 +173,7 @@ export default class Tympanogram {
157
173
  for (let c = compliance.min + compliance.step; c <= compliance.max; c += compliance.step) {
158
174
  c = Math.round(c * 10) / 10 // برای اون پدیده اعشاری غیرمنتظر
159
175
  putText({
160
- container: svg, value: c,
176
+ container: svg, value: c.toFixed(1),
161
177
  x, y: getY(c), dx: -1,
162
178
  style: style,
163
179
  });
@@ -173,7 +189,6 @@ export default class Tympanogram {
173
189
  });
174
190
  }
175
191
 
176
- // console.log(this.container);
177
192
  // مربع احاطه‌کننده کل جدول برای راهنمای توسعه
178
193
  style = 'fill: transparent; stroke: green; stroke-width: 0.5;';
179
194
  // یک بوردر راهنمای توسعه برای اس‌ وی جی به تمام پهنا و ارتفاع رسم می‌کنیم
@@ -193,17 +208,13 @@ export default class Tympanogram {
193
208
 
194
209
  // تابع رسم خط
195
210
  function putLine({ x1, y1, x2, y2, style }) {
196
-
197
211
  let line = document.createElementNS(svgNS, "line");
198
212
  line.setAttribute("x1", x1);
199
213
  line.setAttribute("y1", y1);
200
214
  line.setAttribute("x2", x2);
201
215
  line.setAttribute("y2", y2);
202
216
  line.setAttribute("style", style)
203
- // line.setAttribute("stroke", "black");
204
- // line.setAttribute("stroke-width", "0.1px");
205
217
  svg.appendChild(line);
206
-
207
218
  }
208
219
 
209
220
  // تابع ایجاد و رسم نقطه نشانگر رنگی
@@ -218,13 +229,25 @@ export default class Tympanogram {
218
229
  }
219
230
 
220
231
  update(data) {
232
+ let { ECV, SC, MEP, G, extraCompliance } = data
233
+
234
+ // اگر اکسترا کامپلیانس بود چارت دوباره باید رسم شود و چارت قبلی پاک شود
235
+ if (extraCompliance) {
236
+ this.chart.remove()
237
+ this.draw({ dims: this.dims, extraCompliance })
238
+ }
239
+
240
+ // تبدبل اعداد رشته ای به عدد با دو رقم اعشاری
241
+ ECV && (ECV = (+ECV).toFixed(2));
242
+ SC && (SC = (+SC).toFixed(2));
243
+ G && (G = (+G).toFixed(2));
221
244
 
222
245
  // جایگذاری مقادیر تمپانومتری در تکست‌باکس ها
223
- this.chart.querySelector(`text[data-name="Type"]`).innerHTML = data?.Type || "";
224
- this.chart.querySelector(`text[data-name="ECV"]`).innerHTML = data?.ECV || "";
225
- this.chart.querySelector(`text[data-name="MEP"]`).innerHTML = data?.MEP || "";
226
- this.chart.querySelector(`text[data-name="SC"]`).innerHTML = data?.SC || "";
227
- this.chart.querySelector(`text[data-name="G"]`).innerHTML = data?.G || "";
246
+ this.chart.querySelector(`text[data-name="Type"]`).innerHTML = data?.Type || "-";
247
+ this.chart.querySelector(`text[data-name="ECV"]`).innerHTML = ECV || "-";
248
+ this.chart.querySelector(`text[data-name="MEP"]`).innerHTML = data?.MEP || "-";
249
+ this.chart.querySelector(`text[data-name="SC"]`).innerHTML = SC || "-";
250
+ this.chart.querySelector(`text[data-name="G"]`).innerHTML = G || "-";
228
251
  // پاک کردن منحنی قبلی از کانتینر جاری
229
252
  this.chart.querySelector(`path[data-name="curve"]`)?.remove();
230
253
  // رسم منحنی
@@ -233,79 +256,91 @@ export default class Tympanogram {
233
256
 
234
257
  // توابع داخلی
235
258
  drawCurve(data) {
259
+ let { Type, ECV, SC, MEP, G, expanded } = data
260
+
261
+
236
262
  // Ensure to Convert to Numbers //
263
+ SC = +SC;
264
+ ECV = +ECV;
265
+ MEP = +MEP;
266
+ G = +G;
267
+
268
+ // اگر این مقادیر وجود نداشته باشه مقدار صفر میدیم بهشون که خطا در رسم منحنی نخوریم
269
+ SC || (SC = 0)
270
+ MEP || (MEP = 0)
271
+
272
+
237
273
  const container = this.chart
238
274
  const { pressure, compliance, pressureAxiosLength, complianceAxiosLength } = this.chartInfo;
239
275
 
240
- // تمرین پیدا کردن نقاط
241
- point({ x: getX(-400), y: getY(5), color: 'green' })
242
-
243
276
  // مقداردهی دستی برای تست شکل منحنی
244
277
  // data.SC = 0.5;
245
278
  // data.MEP = -75;
246
279
  // با توجه به اندازه اس ‌سی میشه برای مقادیر زیر یک سری رل گذاشت با منحنی قشنگ تر باشد
247
- let cp = 70; // جابجایی نقطه کنترل منحنی های راست و چپ روی محور افقی
280
+ let cp = 70 // جابجایی نقطه کنترل منحنی های راست و چپ روی محور افقی
248
281
  // let k = 0.5; // width and height change [0, 1]
249
- let cpp = 5; //جابجایی نقطه کنترل قله ها روی محور افقی
282
+ let cpp = 5 //جابجایی نقطه کنترل قله ها روی محور افقی
250
283
  // رل‌هایی برای تغییر مقادیر بالا برای زیبایی بیشتر منحنی در نقطه قله
251
284
  // (data.SC <= 0.30)? k=0
252
- let k = (+data.SC > 0.30) ? 0.5 : 0.1; // width and height change [0, 1]
253
- k = (+data.SC > 1.0) ? 0.2 : k;
285
+ let k = (SC > 0.30) ? 0.5 : 0.1 // width and height change [0, 1]
286
+ k = (SC > 1.0) ? 0.2 : k
254
287
  // k = (data.SC < 1.0) ? 0 : k;
255
288
 
256
- let pw = 20 * k; // نصف پهنای قله
257
- let ph = 0.1 * k; // ارتفاع قله
289
+ let pw = 20 * k // نصف پهنای قله
290
+ let ph = 0.1 * k // ارتفاع قله
258
291
 
259
292
  let zone = {
260
293
  normal: { min: -300, max: 250 },
261
294
  expanded: { min: -600, max: 400 },
262
295
  }
263
296
  // تعیین کرانه‌های منحنی بر حسب فشار گوش میانی
264
- let RV = zone.normal;
265
- if (+data.MEP > -250 && +data.MEP < 200) { RV = zone.normal } else { RV = zone.expanded }
266
-
297
+ let RV = zone.normal
298
+ if (MEP <= -150 || MEP >= 100 || expanded) { RV = zone.expanded } else { RV = zone.normal }
267
299
 
268
- const curve2 = {
300
+ const curve = {
269
301
  R: {
270
302
  P1: { p: RV.max, c: 0 },
271
- P2: { p: +data.MEP + pw, c: +data.SC - ph },
272
- C: { p: +data.MEP + cp, c: 0 }
303
+ P2: { p: MEP + pw, c: SC - ph },
304
+ C: { p: MEP + cp, c: 0 }
273
305
  },
274
306
  RM: {
275
- P2: { p: +data.MEP, c: +data.SC },
276
- C: { p: +data.MEP + cpp, c: +data.SC }
307
+ P1: {}, // Define later
308
+ P2: { p: MEP, c: SC },
309
+ C: { p: MEP + cpp, c: SC }
277
310
  },
278
311
  LM: {
279
- P2: { p: +data.MEP - pw, c: +data.SC - ph },
280
- C: { p: +data.MEP - cpp, c: +data.SC }
312
+ P1: {}, // Define later
313
+ P2: { p: MEP - pw, c: SC - ph },
314
+ C: { p: MEP - cpp, c: SC }
281
315
  },
282
316
  L: {
283
- P1: {},
317
+ P1: {}, // Define later
284
318
  P2: { p: RV.min, c: 0 },
285
- C: { p: +data.MEP - cp, c: 0 }
319
+ C: { p: MEP - cp, c: 0 }
286
320
  }
287
321
  }
288
322
 
289
323
  // به دست آوردن مختصات نقاط کنترل بر حسب مختصات پیک
290
- curve2.RM.P1 = curve2.R.P2
291
- curve2.LM.P1 = curve2.RM.P2
292
- curve2.L.P1 = curve2.LM.P2
324
+ curve.RM.P1 = curve.R.P2
325
+ curve.LM.P1 = curve.RM.P2
326
+ curve.L.P1 = curve.LM.P2
327
+
328
+ let color = (this.side == "R") ? "red" : "blue";
293
329
  let path = document.createElementNS(svgNS, "path");
294
330
  path.setAttribute("fill", "none");
295
331
  path.setAttribute("data-name", "curve");
296
- let color = (this.side == "R") ? "red" : "blue";
297
332
  path.setAttribute("stroke", color);
298
333
  path.setAttribute("stroke-width", "0.5px");
299
334
  path.setAttribute(
300
335
  "d", `
301
- M ${ctg(curve2.R.P1)}
302
- Q ${ctg(curve2.R.C)} ${ctg(curve2.R.P2)}
303
- M ${ctg(curve2.RM.P1)}
304
- Q ${ctg(curve2.RM.C)} ${ctg(curve2.RM.P2)}
305
- M ${ctg(curve2.LM.P1)}
306
- Q ${ctg(curve2.LM.C)} ${ctg(curve2.LM.P2)}
307
- M ${ctg(curve2.L.P1)}
308
- Q ${ctg(curve2.L.C)} ${ctg(curve2.L.P2)}
336
+ M ${ctg(curve.R.P1)}
337
+ Q ${ctg(curve.R.C)} ${ctg(curve.R.P2)}
338
+ M ${ctg(curve.RM.P1)}
339
+ Q ${ctg(curve.RM.C)} ${ctg(curve.RM.P2)}
340
+ M ${ctg(curve.LM.P1)}
341
+ Q ${ctg(curve.LM.C)} ${ctg(curve.LM.P2)}
342
+ M ${ctg(curve.L.P1)}
343
+ Q ${ctg(curve.L.C)} ${ctg(curve.L.P2)}
309
344
  `
310
345
  );
311
346
  container.appendChild(path);
package/src/Tympanogram/test.js ADDED
@@ -0,0 +1,34 @@
1
+ import Tympanogram from "./Tympanogram";
2
+
3
+ document.querySelector('#app').innerHTML = `
4
+ <div id="test"></div>
5
+ `;
6
+
7
+ const container = document.getElementById('test')
8
+
9
+ const dims = {
10
+ "name": "RTympanogram",
11
+ "w": 100,
12
+ "h": 60,
13
+ "margin": {
14
+ "left": 2,
15
+ "top": 0,
16
+ "right": 2,
17
+ "bottom": 0
18
+ },
19
+ "display": "inline",
20
+ "width": 100 * 12,
21
+ "height": 60 * 12
22
+ }
23
+ const RTympanogram = new Tympanogram({ container, dims, side: 'R' })
24
+ RTympanogram.update({
25
+ Type: "An",
26
+ ECV: '3',
27
+ SC: '1.5',
28
+ MEP: '-150',
29
+ G: 0.2,
30
+ expanded: false, // by default is false for expand pressure from -600 to +400
31
+ // extraCompliance: true // by default is false (0 - 3) and true is: (0 - 6)
32
+
33
+
34
+ })
package/src/Tympanogram/units.js CHANGED
@@ -11,55 +11,45 @@ const units = {
11
11
  width: 100,
12
12
  height: 60,
13
13
 
14
- // این فاصله خطوط محورهای بالا و چپ ادیوگرام از لبه ها هست
15
- chartPadding: { left: 40, top: 40, right: 30, bottom: 20 },
16
- symbolDims: { width: 55, height: 55 },
17
- symbolsChart: {
18
- width: 240, height: 60
14
+ pressure: { min: -600, max: +400, step: 200 },
15
+ compliance: {
16
+ normal: { min: -0.50, max: 3, step: 0.50 },
17
+ extra: { min: -0.50, max: 6, step: 0.50 }
19
18
  },
20
- // virtual frequency
21
- mainFrequencies: [125, 250, 500, 1000, 2000, 4000, 8000],
22
-
23
- intensity: { min: -20, max: 130, step: 10 },
24
-
19
+ padding: { right: 5, left: 8, top: 7, bottom: 14 },
20
+
21
+
25
22
  styles: {
23
+ svg: 'user-select: none; direction: ltr !important; font-family: Vazir;',
26
24
  pressure: `
27
- user-select: none;
28
- direction: ltr !important;
29
- font-family: Vazir;
30
25
  font-size: 3;
31
26
  text-anchor: middle;
32
27
  dominant-baseline: hanging;
33
28
  `,
34
29
  caption: `
35
- user-select: none;
36
- direction: ltr !important;
37
- font-family: Vazir;
38
30
  font-size: 3;
39
31
  text-anchor: middle;
40
32
  dominant-baseline: middle;
41
33
  `,
42
34
  label: `
43
- user-select: none;
44
- direction: ltr !important;
45
- font-family: Vazir;
46
- font-size: 1mm;
35
+ font-size: 4.2;
36
+ font-weight: bold;
37
+ text-anchor: start;
38
+ dominant-baseline: middle;
39
+ `,
40
+ input: `
41
+ font-size: 4.2;
42
+ font-weight: bold;
47
43
  text-anchor: start;
48
44
  dominant-baseline: middle;
49
45
  `,
50
46
  type: `
51
- user-select: none;
52
- direction: ltr !important;
53
- font-family: Vazir;
54
47
  font-size: 1mm;
55
48
  font-weight: bold;
56
49
  text-anchor: start;
57
50
  dominant-baseline: middle;
58
51
  `,
59
52
  compliance: `
60
- user-select: none;
61
- direction: ltr !important;
62
- font-family: Vazir;
63
53
  font-size: 0.7mm;
64
54
  text-anchor: end;
65
55
  dominant-baseline: middle;
package/src/main.js CHANGED
@@ -9,7 +9,6 @@ import Reflex from "./Reflex/Reflex.js";
9
9
  import MultiText from "./MultiText/MultiText.js";
10
10
 
11
11
 
12
-
13
12
  document.querySelector('#app').innerHTML = `
14
13
  <div id="test"></div>
15
14
  <div id="audiogram-div"></div>