@decidables/detectable-elements 0.1.1 → 0.2.0

package/src/equations/mcr2fomr.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';
+
+/*
+  SDTEquationMCr2Fomr element
+  <sdt-equation-mcr2fomr>
+
+  Attributes:
+  Hits; Misses; Hit Rate;
+*/
+export default class SDTEquationMCr2Fomr extends SDTEquation {
+  static get properties() {
+    return {
+      m: {
+        attribute: 'misses',
+        type: Number,
+        reflect: true,
+      },
+      cr: {
+        attribute: 'correct-rejections',
+        type: Number,
+        reflect: true,
+      },
+      fomr: {
+        attribute: false,
+        type: Number,
+        reflect: false,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.m = 0;
+    this.cr = 0;
+    this.alignState();
+  }
+
+  alignState() {
+    this.fomr = SDTMath.mCr2Fomr(this.m, this.cr);
+  }
+
+  sendEvent() {
+    this.dispatchEvent(new CustomEvent('sdt-equation-mcr2fomr-change', {
+      detail: {
+        m: this.m,
+        cr: this.cr,
+        fomr: this.fomr,
+      },
+      bubbles: true,
+    }));
+  }
+
+  mInput(event) {
+    this.m = 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 m;
+    let cr;
+    let fomr;
+    if (this.numeric) {
+      m = html`
+        <decidables-spinner class="m" ?disabled=${!this.interactive} min="0" .value="${this.m}" @input=${this.mInput.bind(this)}>
+          <var>Misses</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>
+      `;
+      fomr = html`
+        <decidables-spinner class="fomr" disabled min="0" max="1" step=".001" .value="${+this.fomr.toFixed(3)}">
+          <var>False Omission Rate</var>
+        </decidables-spinner>
+      `;
+    } else {
+      m = html`<var class="m">Misses</var>`;
+      cr = html`<var class="cr">Correct Rejections</var>`;
+      fomr = html`<var class="fomr">False Omission Rate</var>`;
+    }
+    return html`
+      <div class="holder">
+        <table class="equation">
+          <tbody>
+            <tr>
+              <td rowspan="2">
+                ${fomr}<span class="equals">=</span>
+              </td>
+              <td class="underline">
+                ${m}
+              </td>
+            </tr>
+            <tr>
+              <td>
+                ${m}<span class="plus">+</span>${cr}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+}
+
+customElements.define('sdt-equation-mcr2fomr', SDTEquationMCr2Fomr);

package/src/equations/sdt-equation.js

@@ -45,6 +45,7 @@ export default class SDTEquation extends DetectableElement {
         /* Overall <table> */
         .equation {
           text-align: center;
+          white-space: nowrap;
 
           border-collapse: collapse;
 
@@ -64,6 +65,10 @@ export default class SDTEquation extends DetectableElement {
           font-style: normal;
         }
 
+        var {
+          border-radius: var(---border-radius);
+        }
+
         .tight {
           padding: 0;
         }
@@ -89,6 +94,8 @@ export default class SDTEquation extends DetectableElement {
           padding: 0.125rem 0.375rem 0.375rem;
 
           vertical-align: middle;
+
+          border-radius: var(---border-radius);
         }
 
         .bottom {
@@ -112,6 +119,14 @@ export default class SDTEquation extends DetectableElement {
           background: var(---color-fa-light);
         }
 
+        .ppv {
+          background: var(---color-present-light);
+        }
+
+        .fomr {
+          background: var(---color-absent-light);
+        }
+
         .acc {
           background: var(---color-acc-light);
         }

package/src/examples/index.js

@@ -3,4 +3,5 @@ export {default as SDTExampleDoubleInteractive} from './double-interactive';
 export {default as SDTExampleHuman} from './human';
 export {default as SDTExampleInteractive} from './interactive';
 export {default as SDTExampleModel} from './model';
+export {default as SDTExampleMultiple} from './multiple';
 export {default as SDTExampleUnequal} from './unequal';

package/src/examples/multiple.js

@@ -0,0 +1,76 @@
+
+import DecidablesConverterArray from '@decidables/decidables-elements/converter-array';
+
+import SDTExample from './sdt-example';
+
+/*
+  SDTExampleMulti element
+  <sdt-example-multi>
+*/
+export default class SDTExampleMultiple extends SDTExample {
+  static get properties() {
+    return {
+      variable: {
+        attribute: 'variable',
+        type: String,
+        reflect: true,
+      },
+      values: {
+        attribute: 'values',
+        converter: DecidablesConverterArray,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.variables = ['d', 'c'];
+    this.variable = 'd';
+    this.values = [0, 1];
+  }
+
+  firstUpdated(/* changedProperties */) {
+    this.detectableControl = this.querySelector('detectable-control');
+    this.rocSpace = this.querySelector('roc-space');
+    this.sdtModel = this.querySelector('sdt-model');
+
+    if (this.detectableControl) {
+      this.detectableControl.addEventListener('detectable-control-z-roc', (event) => {
+        this.rocSpace.zRoc = event.detail.zRoc;
+      });
+    }
+
+    if (this.rocSpace) {
+      this.rocSpace.setWithSDT(1, 0, 'default', '', 1);
+      if (this.variable === 'd') {
+        this.values.forEach((d, index) => {
+          this.rocSpace.setWithSDT(d, this.sdtModel.c, `point${index}`, index + 1, this.sdtModel.s);
+        });
+      } else if (this.variable === 'c') {
+        this.values.forEach((c, index) => {
+          this.rocSpace.setWithSDT(this.sdtModel.d, c, `point${index}`, index + 1, this.sdtModel.s);
+        });
+      }
+    }
+
+    if (this.sdtModel) {
+      this.sdtModel.addEventListener('sdt-model-change', (event) => {
+        if (this.rocSpace) {
+          this.rocSpace.setWithSDT(event.detail.d, event.detail.c, 'default', '', event.detail.s);
+          if (this.variable === 'd') {
+            this.values.forEach((d, index) => {
+              this.rocSpace.setWithSDT(d, event.detail.c, `point${index}`, index + 1, event.detail.s);
+            });
+          } else if (this.variable === 'c') {
+            this.values.forEach((c, index) => {
+              this.rocSpace.setWithSDT(event.detail.d, c, `point${index}`, index + 1, event.detail.s);
+            });
+          }
+        }
+      });
+    }
+  }
+}
+
+customElements.define('sdt-example-multiple', SDTExampleMultiple);

package/src/examples/sdt-example.js

@@ -13,12 +13,8 @@ export default class SDTExample extends DetectableElement {
       super.styles,
       css`
         :host {
-          ---border: var(--border, 1px solid var(---color-border));
           display: inline-block;
 
-          /* This makes IE11 happy */
-          width: 100%;
-
           margin-bottom: 1rem;
         }
 
@@ -37,7 +33,7 @@ export default class SDTExample extends DetectableElement {
           padding: 0.625rem;
 
           border: var(---border);
-          border-radius: 0.25rem;
+          border-radius: var(---border-radius);
         }
 
         .body ::slotted(*) {
@@ -63,7 +59,7 @@ export default class SDTExample extends DetectableElement {
     ];
   }
 
-  render() { // eslint-disable-line class-methods-use-this
+  render() { /* eslint-disable-line class-methods-use-this */
     return html`
       <div class="holder">
         <div class="body">

package/src/examples/unequal.js

@@ -20,15 +20,13 @@ export default class SDTExampleUnequal extends SDTExample {
 
     if (this.rocSpace) {
       this.rocSpace.setWithSDT(1, 0, 'default', '', 1); // Set 'default' to equal variance for contours
+
+      d3.range(-1.5, 1.6, 0.5).forEach((c, index) => {
+        this.rocSpace.setWithSDT(this.sdtModel.d, c, `point${index}`, '', this.sdtModel.s);
+      });
     }
 
     if (this.sdtModel) {
-      if (this.rocSpace) {
-        d3.range(-1.5, 1.6, 0.5).forEach((c, index) => {
-          this.rocSpace.setWithSDT(this.sdtModel.d, c, `point${index}`, '', this.sdtModel.s);
-        });
-      }
-
       this.sdtModel.addEventListener('sdt-model-change', (event) => {
         if (this.rocSpace) {
           d3.range(-1.5, 1.6, 0.5).forEach((c, index) => {