@decidables/detectable-elements 0.0.3

package/src/equations/hm2hr.js

@@ -0,0 +1,121 @@
+
+import {html} from 'lit';
+
+import '@decidables/decidables-elements/spinner';
+import SDTMath from '@decidables/detectable-math';
+
+import SDTEquation from './sdt-equation';
+
+/*
+  SDTEquationHM2Hr element
+  <sdt-equation-hm2hr>
+
+  Attributes:
+  Hits; Misses; Hit Rate;
+*/
+export default class SDTEquationHM2Hr extends SDTEquation {
+  static get properties() {
+    return {
+      h: {
+        attribute: 'hits',
+        type: Number,
+        reflect: true,
+      },
+      m: {
+        attribute: 'misses',
+        type: Number,
+        reflect: true,
+      },
+      hr: {
+        attribute: false,
+        type: Number,
+        reflect: false,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.h = 0;
+    this.m = 0;
+    this.alignState();
+  }
+
+  alignState() {
+    this.hr = SDTMath.hM2Hr(this.h, this.m);
+  }
+
+  sendEvent() {
+    this.dispatchEvent(new CustomEvent('sdt-equation-hm2hr-change', {
+      detail: {
+        h: this.h,
+        m: this.m,
+        hr: this.hr,
+      },
+      bubbles: true,
+    }));
+  }
+
+  hInput(event) {
+    this.h = parseInt(event.target.value, 10);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  mInput(event) {
+    this.m = parseInt(event.target.value, 10);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  render() {
+    this.alignState();
+    let h;
+    let m;
+    let hr;
+    if (this.numeric) {
+      h = html`
+        <decidables-spinner class="h" ?disabled=${!this.interactive} min="0" .value="${this.h}" @input=${this.hInput.bind(this)}>
+          <var>Hits</var>
+        </decidables-spinner>
+      `;
+      m = html`
+        <decidables-spinner class="m" ?disabled=${!this.interactive} min="0" .value="${this.m}" @input=${this.mInput.bind(this)}>
+          <var>Misses</var>
+        </decidables-spinner>
+      `;
+      hr = html`
+        <decidables-spinner class="hr" disabled min="0" max="1" step=".001" .value="${+this.hr.toFixed(3)}">
+          <var>Hit Rate</var>
+        </decidables-spinner>
+      `;
+    } else {
+      h = html`<var class="h">Hits</var>`;
+      m = html`<var class="m">Misses</var>`;
+      hr = html`<var class="hr">Hit Rate</var>`;
+    }
+    return html`
+      <div class="holder">
+        <table class="equation">
+          <tbody>
+            <tr>
+              <td rowspan="2">
+                ${hr}<span class="equals">=</span>
+              </td>
+              <td class="underline">
+                ${h}
+              </td>
+            </tr>
+            <tr>
+              <td>
+                ${h}<span class="plus">+</span>${m}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+}
+
+customElements.define('sdt-equation-hm2hr', SDTEquationHM2Hr);

package/src/equations/hmfacr2acc.js

@@ -0,0 +1,161 @@
+
+import {html} from 'lit';
+
+import '@decidables/decidables-elements/spinner';
+import SDTMath from '@decidables/detectable-math';
+
+import SDTEquation from './sdt-equation';
+
+/*
+  SDTEquationHMFaCr2Acc element
+  <sdt-equation-hmfacr2acc>
+
+  Attributes:
+  Hits; Misses; False Alarms; Correct Rejections; Accuracy;
+*/
+export default class SDTEquationHMFaCr2Acc extends SDTEquation {
+  static get properties() {
+    return {
+      h: {
+        attribute: 'hits',
+        type: Number,
+        reflect: true,
+      },
+      m: {
+        attribute: 'misses',
+        type: Number,
+        reflect: true,
+      },
+      fa: {
+        attribute: 'false-alarms',
+        type: Number,
+        reflect: true,
+      },
+      cr: {
+        attribute: 'correct-rejections',
+        type: Number,
+        reflect: true,
+      },
+      acc: {
+        attribute: false,
+        type: Number,
+        reflect: false,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.h = 0;
+    this.m = 0;
+    this.fa = 0;
+    this.cr = 0;
+    this.alignState();
+  }
+
+  alignState() {
+    this.acc = SDTMath.hMFaCr2Acc(this.h, this.m, this.fa, this.cr);
+  }
+
+  sendEvent() {
+    this.dispatchEvent(new CustomEvent('sdt-equation-hmfacr2acc-change', {
+      detail: {
+        h: this.h,
+        m: this.m,
+        fa: this.fa,
+        cr: this.cr,
+        acc: this.acc,
+      },
+      bubbles: true,
+    }));
+  }
+
+  hInput(event) {
+    this.h = parseInt(event.target.value, 10);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  mInput(event) {
+    this.m = parseInt(event.target.value, 10);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  faInput(event) {
+    this.fa = parseInt(event.target.value, 10);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  crInput(event) {
+    this.cr = parseInt(event.target.value, 10);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  render() {
+    this.alignState();
+    let h;
+    let m;
+    let fa;
+    let cr;
+    let acc;
+
+    if (this.numeric) {
+      h = html`
+        <decidables-spinner class="h" ?disabled=${!this.interactive} min="0" .value="${this.h}" @input=${this.hInput.bind(this)}>
+          <var>Hits</var>
+        </decidables-spinner>
+      `;
+      m = html`
+        <decidables-spinner class="m" ?disabled=${!this.interactive} min="0" .value="${this.m}" @input=${this.mInput.bind(this)}>
+          <var>Misses</var>
+        </decidables-spinner>
+      `;
+      fa = html`
+        <decidables-spinner class="fa" ?disabled=${!this.interactive} min="0" .value="${this.fa}" @input=${this.faInput.bind(this)}>
+          <var>False Alarms</var>
+        </decidables-spinner>
+      `;
+      cr = html`
+        <decidables-spinner class="cr" ?disabled=${!this.interactive} min="0" .value="${this.cr}" @input=${this.crInput.bind(this)}>
+          <var>Correct Rejections</var>
+        </decidables-spinner>
+      `;
+      acc = html`
+        <decidables-spinner class="acc" disabled min="0" max="1" step=".001" .value="${+this.acc.toFixed(3)}">
+          <var>Accuracy</var>
+        </decidables-spinner>
+      `;
+    } else {
+      h = html`<var class="h">Hits</var>`;
+      m = html`<var class="m">Misses</var>`;
+      fa = html`<var class="fa">False Alarms</var>`;
+      cr = html`<var class="cr">Correct Rejections</var>`;
+      acc = html`<var class="acc">Accuracy</var>`;
+    }
+    return html`
+      <div class="holder">
+        <table class="equation">
+          <tbody>
+            <tr>
+              <td rowspan="2">
+                ${acc}<span class="equals">=</span>
+              </td>
+              <td class="underline">
+                ${h}<span class="plus">+</span>${cr}
+              </td>
+            </tr>
+            <tr>
+              <td>
+                ${h}<span class="plus">+</span>${m}<span class="plus">+</span>${fa}<span class="plus">+</span>${cr}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>`;
+  }
+}
+
+customElements.define('sdt-equation-hmfacr2acc', SDTEquationHMFaCr2Acc);

package/src/equations/hrfar2c.js

@@ -0,0 +1,179 @@
+
+import {html} from 'lit';
+
+import '@decidables/decidables-elements/spinner';
+import SDTMath from '@decidables/detectable-math';
+
+import SDTEquation from './sdt-equation';
+
+/*
+  SDTEquationHrFar2C element
+  <sdt-equation-hrfar2c>
+
+  Attributes:
+  Hit Rate; False Alarm Rate; d';
+*/
+export default class SDTEquationHrFar2C extends SDTEquation {
+  static get properties() {
+    return {
+      unequal: {
+        attribute: 'unequal',
+        type: Boolean,
+        reflect: true,
+      },
+      hr: {
+        attribute: 'hit-rate',
+        type: Number,
+        reflect: true,
+      },
+      far: {
+        attribute: 'false-alarm-rate',
+        type: Number,
+        reflect: true,
+      },
+      s: {
+        attribute: 's',
+        type: Number,
+        reflect: true,
+      },
+
+      c: {
+        attribute: false,
+        type: Number,
+        reflect: false,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.unequal = false;
+    this.hr = 0;
+    this.far = 0;
+    this.s = 1;
+    this.alignState();
+  }
+
+  alignState() {
+    this.c = SDTMath.hrFar2C(this.hr, this.far, this.s);
+  }
+
+  sendEvent() {
+    this.dispatchEvent(new CustomEvent('sdt-equation-hrfar2c-change', {
+      detail: {
+        hr: this.hr,
+        far: this.far,
+        s: this.s,
+        c: this.c,
+      },
+      bubbles: true,
+    }));
+  }
+
+  hrInput(event) {
+    this.hr = parseFloat(event.target.value);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  farInput(event) {
+    this.far = parseFloat(event.target.value);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  sInput(event) {
+    this.s = parseFloat(event.target.value);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  render() {
+    this.alignState();
+    let hr;
+    let far;
+    let s;
+    let c;
+    if (this.numeric) {
+      hr = html`
+        <decidables-spinner class="hr bottom" ?disabled=${!this.interactive} min="0" max="1" step=".001" .value="${this.hr}" @input=${this.hrInput.bind(this)}>
+          <var>Hit Rate</var>
+        </decidables-spinner>
+      `;
+      far = html`
+        <decidables-spinner class="far bottom" ?disabled=${!this.interactive} min="0" max="1" step=".001" .value="${this.far}" @input=${this.farInput.bind(this)}>
+          <var>False Alarm Rate</var>
+        </decidables-spinner>
+      `;
+      s = html`
+        <decidables-spinner class="s bottom" ?disabled=${!this.interactive} min="0" step=".001" .value="${this.s}" @input=${this.sInput.bind(this)}>
+          <var class="math-var">σ</var>
+        </decidables-spinner>
+      `;
+      c = html`
+        <decidables-spinner class="c bottom" disabled step=".001" .value="${+this.c.toFixed(3)}">
+          <var class="math-var">c</var>
+        </decidables-spinner>
+      `;
+    } else {
+      hr = html`<var class="hr">Hit Rate</var>`;
+      far = html`<var class="far">False Alarm Rate</var>`;
+      s = html`<var class="math-var s">σ</var>`;
+      c = html`<var class="math-var c">c</var>`;
+    }
+    let equation;
+    if (this.unequal) {
+      equation = html`
+        <tr>
+          <td rowspan="2">
+            ${c}<span class="equals">=</span><span class="bracket tight">(</span>
+          </td>
+          <td class="underline bottom">
+            <span>1</span><span class="plus tight">+</span><span>${s}<sup class="exp">2</sup></span>
+          </td>
+          <td rowspan="2">
+            <span class="bracket tight">)<sup class="exp">−½</sup></span><span class="bracket tight">(</span>
+          </td>
+          <td class="underline bottom">
+            <span class="minus tight">−</span>${s}
+          </td>
+          <td rowspan="2">
+            <span class="bracket tight">)</span><span class="bracket">[</span><span class="tight"><var class="math-greek phi tight">Φ</var><sup class="exp">−1</sup></span><span class="paren tight">(</span>${hr}<span class="paren tight">)</span><span class="plus">+</span><span class="tight"><var class="math-greek phi tight">Φ</var><sup class="exp">−1</sup></span><span class="paren tight">(</span>${far}<span class="paren tight">)</span><span class="bracket">]</span>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span>2</span>
+          </td>
+          <td>
+            <span><span>1</span><span class="plus">+</span>${s}</span>
+          </td>
+        </tr>`;
+    } else {
+      equation = html`
+        <tr>
+          <td rowspan="2">
+            ${c}<span class="equals">=</span>
+          </td>
+          <td class="underline">
+            <span class="minus tight">−</span><span class="bracket tight">[</span><span class="tight"><var class="math-greek phi tight">Φ</var><sup class="exp">−1</sup></span><span class="paren tight">(</span>${hr}<span class="paren tight">)</span><span class="plus">+</span><span class="tight"><var class="math-greek phi tight">Φ</var><sup class="exp">−1</sup></span><span class="paren tight">(</span>${far}<span class="paren tight">)</span><span class="bracket tight">]</span>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span>2</span>
+          </td>
+        </tr>`;
+    }
+    return html`
+      <div class="holder">
+        <table class="equation">
+          <tbody>
+            ${equation}
+          </tbody>
+        </table>
+      </div>`;
+  }
+}
+
+customElements.define('sdt-equation-hrfar2c', SDTEquationHrFar2C);

package/src/equations/hrfar2d.js

@@ -0,0 +1,162 @@
+
+import {html} from 'lit';
+
+import '@decidables/decidables-elements/spinner';
+import SDTMath from '@decidables/detectable-math';
+
+import SDTEquation from './sdt-equation';
+
+/*
+  SDTEquationHrFar2D element
+  <sdt-equation-hrfar2d>
+
+  Attributes:
+  Hit Rate; False Alarm Rate; d';
+*/
+export default class SDTEquationHrFar2D extends SDTEquation {
+  static get properties() {
+    return {
+      unequal: {
+        attribute: 'unequal',
+        type: Boolean,
+        reflect: true,
+      },
+      hr: {
+        attribute: 'hit-rate',
+        type: Number,
+        reflect: true,
+      },
+      far: {
+        attribute: 'false-alarm-rate',
+        type: Number,
+        reflect: true,
+      },
+      s: {
+        attribute: 's',
+        type: Number,
+        reflect: true,
+      },
+
+      d: {
+        attribute: false,
+        type: Number,
+        reflect: false,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.unequal = false;
+    this.hr = 0;
+    this.far = 0;
+    this.s = 1;
+    this.alignState();
+  }
+
+  alignState() {
+    this.d = SDTMath.hrFar2D(this.hr, this.far, this.s);
+  }
+
+  sendEvent() {
+    this.dispatchEvent(new CustomEvent('sdt-equation-hrfar2d-change', {
+      detail: {
+        hr: this.hr,
+        far: this.far,
+        s: this.s,
+        d: this.d,
+      },
+      bubbles: true,
+    }));
+  }
+
+  hrInput(event) {
+    this.hr = parseFloat(event.target.value);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  farInput(event) {
+    this.far = parseFloat(event.target.value);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  sInput(event) {
+    this.s = parseFloat(event.target.value);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  render() {
+    this.alignState();
+    let hr;
+    let far;
+    let s;
+    let d;
+    if (this.numeric) {
+      hr = html`
+        <decidables-spinner class="hr bottom" ?disabled=${!this.interactive} min="0" max="1" step=".001" .value="${this.hr}" @input=${this.hrInput.bind(this)}>
+          <var>Hit Rate</var>
+        </decidables-spinner>
+      `;
+      far = html`
+        <decidables-spinner class="far bottom" ?disabled=${!this.interactive} min="0" max="1" step=".001" .value="${this.far}" @input=${this.farInput.bind(this)}>
+          <var>False Alarm Rate</var>
+        </decidables-spinner>
+      `;
+      s = html`
+        <decidables-spinner class="s bottom" ?disabled=${!this.interactive} min="0" step=".001" .value="${this.s}" @input=${this.sInput.bind(this)}>
+          <var class="math-var">σ</var>
+        </decidables-spinner>
+      `;
+      d = html`
+        <decidables-spinner class="d bottom" disabled step=".001" .value="${+this.d.toFixed(3)}">
+          <var class="math-var">d′</var>
+        </decidables-spinner>
+      `;
+    } else {
+      hr = html`<var class="hr">Hit Rate</var>`;
+      far = html`<var class="far">False Alarm Rate</var>`;
+      s = html`<var class="math-var s">σ</var>`;
+      d = html`<var class="math-var d">d′</var>`;
+    }
+    let equation;
+    if (this.unequal) {
+      equation = html`
+        <tr>
+          <td rowspan="2">
+            ${d}<span class="equals">=</span><span class="bracket tight">(</span>
+          </td>
+          <td class="underline bottom">
+            <span>1</span><span class="plus tight">+</span><span>${s}<sup class="exp">2</sup></span>
+          </td>
+          <td rowspan="2">
+            <span class="bracket tight">)<sup class="exp">−½</sup></span><span class="bracket">[</span>${s}<span class="tight"><var class="math-greek phi tight">Φ</var><sup class="exp">−1</sup></span><span class="paren tight">(</span>${hr}<span class="paren tight">)</span><span class="minus">−</span><span class="tight"><var class="math-greek phi tight">Φ</var><sup class="exp">−1</sup></span><span class="paren tight">(</span>${far}<span class="paren tight">)</span><span class="bracket">]</span>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span>2</span>
+          </td>
+        </tr>`;
+    } else {
+      equation = html`
+        <tr>
+          <td>
+              ${d}<span class="equals">=</span><span class="tight"><var class="math-greek phi tight">Φ</var><sup class="exp">−1</sup></span><span class="paren tight">(</span>${hr}<span class="paren tight">)</span><span class="minus">−</span><span class="tight"><var class="math-greek phi tight">Φ</var><sup class="exp">−1</sup></span><span class="paren tight">(</span>${far}<span class="paren tight">)</span>
+          </td>
+        </tr>`;
+    }
+    return html`
+      <div class="holder">
+        <table class="equation">
+          <tbody>
+            ${equation}
+          </tbody>
+        </table>
+      </div>`;
+  }
+}
+
+customElements.define('sdt-equation-hrfar2d', SDTEquationHrFar2D);

package/src/equations/index.js

@@ -0,0 +1,8 @@
+
+export {default as SDTEquationDC2Far} from './dc2far';
+export {default as SDTEquationDC2Hr} from './dc2hr';
+export {default as SDTEquationFaCr2Far} from './facr2far';
+export {default as SDTEquationHM2Hr} from './hm2hr';
+export {default as SDTEquationHMFaCr2Acc} from './hmfacr2acc';
+export {default as SDTEquationHrFar2C} from './hrfar2c';
+export {default as SDTEquationHrFar2D} from './hrfar2d';