@decidables/detectable-elements 0.0.3

package/src/detectable-element.js

@@ -0,0 +1,121 @@
+
+import {
+  css,
+  unsafeCSS,
+} from 'lit';
+import * as d3 from 'd3';
+
+import {DecidablesElement} from '@decidables/decidables-elements';
+
+/*
+  DetectableElement Base Class - Not intended for instantiation!
+  <detectable-element>
+*/
+export default class DetectableElement extends DecidablesElement {
+  static get properties() {
+    return {
+      interactive: {
+        attribute: 'interactive',
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.interactive = false;
+  }
+
+  static get colors() {
+    return {
+      h: d3.schemeSet1[2],
+      m: d3.schemeSet1[4],
+      fa: d3.schemeSet1[1],
+      cr: d3.schemeSet1[0],
+      hr: d3.schemeSet1[5],
+      far: d3.schemeSet1[3],
+      acc: d3.schemeSet1[8],
+      d: d3.schemeSet1[7],
+      c: d3.schemeSet1[6],
+      s: '#4545d0',
+      present: '#f032e6',
+      absent: '#10dbc9',
+      correct: '#ffffff',
+      error: '#000000',
+      nr: '#cccccc',
+    };
+  }
+
+  static get lights() {
+    return Object.keys(DetectableElement.colors).reduce((acc, cur) => {
+      acc[cur] = d3.interpolateRgb(DetectableElement.colors[cur], '#ffffff')(0.5);
+      return acc;
+    }, {});
+  }
+
+  static get darks() {
+    return Object.keys(DetectableElement.colors).reduce((acc, cur) => {
+      acc[cur] = d3.interpolateRgb(DetectableElement.colors[cur], '#000000')(0.5);
+      return acc;
+    }, {});
+  }
+
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          ---color-h: var(--color-h, ${unsafeCSS(this.colors.h)});
+          ---color-m: var(--color-m, ${unsafeCSS(this.colors.m)});
+          ---color-fa: var(--color-fa, ${unsafeCSS(this.colors.fa)});
+          ---color-cr: var(--color-cr, ${unsafeCSS(this.colors.cr)});
+          ---color-hr: var(--color-hr, ${unsafeCSS(this.colors.hr)});
+          ---color-far: var(--color-far, ${unsafeCSS(this.colors.far)});
+          ---color-acc: var(--color-acc, ${unsafeCSS(this.colors.acc)});
+          ---color-d: var(--color-d, ${unsafeCSS(this.colors.d)});
+          ---color-c: var(--color-c, ${unsafeCSS(this.colors.c)});
+          ---color-s: var(--color-s, ${unsafeCSS(this.colors.s)});
+          ---color-present: var(--color-present, ${unsafeCSS(this.colors.present)});
+          ---color-absent: var(--color-absent, ${unsafeCSS(this.colors.absent)});
+          ---color-correct: var(--color-correct, ${unsafeCSS(this.colors.correct)});
+          ---color-error: var(--color-error, ${unsafeCSS(this.colors.error)});
+          ---color-nr: var(--color-nr, ${unsafeCSS(this.colors.nr)});
+
+          ---color-h-light: var(--color-h-light, ${unsafeCSS(this.lights.h)});
+          ---color-m-light: var(--color-m-light, ${unsafeCSS(this.lights.m)});
+          ---color-fa-light: var(--color-fa-light, ${unsafeCSS(this.lights.fa)});
+          ---color-cr-light: var(--color-cr-light, ${unsafeCSS(this.lights.cr)});
+          ---color-hr-light: var(--color-hr-light, ${unsafeCSS(this.lights.hr)});
+          ---color-far-light: var(--color-far-light, ${unsafeCSS(this.lights.far)});
+          ---color-acc-light: var(--color-acc-light, ${unsafeCSS(this.lights.acc)});
+          ---color-d-light: var(--color-d-light, ${unsafeCSS(this.lights.d)});
+          ---color-c-light: var(--color-c-light, ${unsafeCSS(this.lights.c)});
+          ---color-s-light: var(--color-s-light, ${unsafeCSS(this.lights.s)});
+          ---color-present-light: var(--color-present-light, ${unsafeCSS(this.lights.present)});
+          ---color-absent-light: var(--color-absent-light, ${unsafeCSS(this.lights.absent)});
+          ---color-correct-light: var(--color-correct-light, ${unsafeCSS(this.lights.correct)});
+          ---color-error-light: var(--color-error-light, ${unsafeCSS(this.lights.error)});
+          ---color-nr-light: var(--color-nr-light, ${unsafeCSS(this.lights.nr)});
+
+          ---color-h-dark: var(--color-h-dark, ${unsafeCSS(this.darks.h)});
+          ---color-m-dark: var(--color-m-dark, ${unsafeCSS(this.darks.m)});
+          ---color-fa-dark: var(--color-fa-dark, ${unsafeCSS(this.darks.fa)});
+          ---color-cr-dark: var(--color-cr-dark, ${unsafeCSS(this.darks.cr)});
+          ---color-hr-dark: var(--color-hr-dark, ${unsafeCSS(this.darks.hr)});
+          ---color-far-dark: var(--color-far-dark, ${unsafeCSS(this.darks.far)});
+          ---color-acc-dark: var(--color-acc-dark, ${unsafeCSS(this.darks.acc)});
+          ---color-d-dark: var(--color-d-dark, ${unsafeCSS(this.darks.d)});
+          ---color-c-dark: var(--color-c-dark, ${unsafeCSS(this.darks.c)});
+          ---color-s-dark: var(--color-s-dark, ${unsafeCSS(this.darks.s)});
+          ---color-present-dark: var(--color-present-dark, ${unsafeCSS(this.darks.present)});
+          ---color-absent-dark: var(--color-absent-dark, ${unsafeCSS(this.darks.absent)});
+          ---color-correct-dark: var(--color-correct-dark, ${unsafeCSS(this.darks.correct)});
+          ---color-error-dark: var(--color-error-dark, ${unsafeCSS(this.darks.error)});
+          ---color-nr-dark: var(--color-nr-dark, ${unsafeCSS(this.darks.nr)});
+        }
+      `,
+    ];
+  }
+}

package/src/equations/dc2far.js

@@ -0,0 +1,182 @@
+
+import {html} from 'lit';
+
+import '@decidables/decidables-elements/spinner';
+import SDTMath from '@decidables/detectable-math';
+
+import SDTEquation from './sdt-equation';
+
+/*
+  SDTEquationDC2Far element
+  <sdt-equation-dc2far>
+
+  Attributes:
+  d'; c; False Alarm Rate;
+*/
+export default class SDTEquationDC2Far extends SDTEquation {
+  static get properties() {
+    return {
+      unequal: {
+        attribute: 'unequal',
+        type: Boolean,
+        reflect: true,
+      },
+      d: {
+        attribute: 'd',
+        type: Number,
+        reflect: true,
+      },
+      c: {
+        attribute: 'c',
+        type: Number,
+        reflect: true,
+      },
+      s: {
+        attribute: 's',
+        type: Number,
+        reflect: true,
+      },
+
+      far: {
+        attribute: false,
+        type: Number,
+        reflect: false,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.unequal = false;
+    this.d = 0;
+    this.c = 0;
+    this.s = 1;
+    this.alignState();
+  }
+
+  alignState() {
+    this.far = SDTMath.dC2Far(this.d, this.c, this.s);
+  }
+
+  sendEvent() {
+    this.dispatchEvent(new CustomEvent('sdt-equation-dc2far-change', {
+      detail: {
+        d: this.d,
+        c: this.c,
+        s: this.s,
+        far: this.far,
+      },
+      bubbles: true,
+    }));
+  }
+
+  dInput(event) {
+    this.d = parseFloat(event.target.value);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  cInput(event) {
+    this.c = parseFloat(event.target.value);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  sInput(event) {
+    this.s = parseFloat(event.target.value);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  render() {
+    this.alignState();
+    let d;
+    let c;
+    let s;
+    let far;
+    if (this.numeric) {
+      d = html`
+        <decidables-spinner class="d bottom" ?disabled=${!this.interactive} step=".001" .value="${this.d}" @input=${this.dInput.bind(this)}>
+          <var class="math-var">d′</var>
+        </decidables-spinner>
+      `;
+      c = html`
+        <decidables-spinner class="c bottom" ?disabled=${!this.interactive} step=".001" .value="${this.c}" @input=${this.cInput.bind(this)}>
+          <var class="math-var">c</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>
+      `;
+      far = html`
+        <decidables-spinner class="far bottom" disabled min="0" max="1" step=".001" .value="${+this.far.toFixed(3)}">
+          <var>False Alarm Rate</var>
+        </decidables-spinner>
+      `;
+    } else {
+      d = html`<var class="math-var d">d′</var>`;
+      c = html`<var class="math-var c">c</var>`;
+      s = html`<var class="math-var s">σ</var>`;
+      far = html`<var class="far">False Alarm Rate</var>`;
+    }
+    let equation;
+    if (this.unequal) {
+      equation = html`
+        <tr>
+          <td rowspan="2">
+            ${far}<span class="equals">=</span><var class="math-greek phi tight">Φ</var><span class="paren tight">(</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">
+            <span class="minus tight">−</span>${d}
+          </td>
+          <td rowspan="2">
+            <span class="minus">−</span>${c}<span class="bracket tight">]</span><span class="paren tight">)</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">
+            ${far}<span class="equals">=</span><var class="math-greek phi tight">Φ</var><span class="paren tight">(</span><span class="minus tight">−</span>
+          </td>
+          <td class="underline">
+            ${d}
+          </td>
+          <td rowspan="2">
+            <span class="minus">−</span>${c}<span class="paren 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-dc2far', SDTEquationDC2Far);

package/src/equations/dc2hr.js

@@ -0,0 +1,191 @@
+
+import {html} from 'lit';
+
+import '@decidables/decidables-elements/spinner';
+import SDTMath from '@decidables/detectable-math';
+
+import SDTEquation from './sdt-equation';
+
+/*
+  SDTEquationDC2Hr element
+  <sdt-equation-dc2hr>
+
+  Attributes:
+  d'; c; Hit Rate;
+*/
+export default class SDTEquationDC2Hr extends SDTEquation {
+  static get properties() {
+    return {
+      unequal: {
+        attribute: 'unequal',
+        type: Boolean,
+        reflect: true,
+      },
+      d: {
+        attribute: 'd',
+        type: Number,
+        reflect: true,
+      },
+      c: {
+        attribute: 'c',
+        type: Number,
+        reflect: true,
+      },
+      s: {
+        attribute: 's',
+        type: Number,
+        reflect: true,
+      },
+
+      hr: {
+        attribute: false,
+        type: Number,
+        reflect: false,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.unequal = false;
+    this.d = 0;
+    this.c = 0;
+    this.s = 1;
+    this.alignState();
+  }
+
+  alignState() {
+    this.hr = SDTMath.dC2Hr(this.d, this.c, this.s);
+  }
+
+  sendEvent() {
+    this.dispatchEvent(new CustomEvent('sdt-equation-dc2hr-change', {
+      detail: {
+        d: this.d,
+        c: this.c,
+        s: this.s,
+        hr: this.hr,
+      },
+      bubbles: true,
+    }));
+  }
+
+  dInput(event) {
+    this.d = parseFloat(event.target.value);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  cInput(event) {
+    this.c = parseFloat(event.target.value);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  sInput(event) {
+    this.s = parseFloat(event.target.value);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  render() {
+    this.alignState();
+    let d;
+    let c;
+    let s;
+    let hr;
+    if (this.numeric) {
+      d = html`
+        <decidables-spinner class="d bottom" ?disabled=${!this.interactive} step=".001" .value="${this.d}" @input=${this.dInput.bind(this)}>
+          <var class="math-var">d′</var>
+        </decidables-spinner>
+      `;
+      c = html`
+        <decidables-spinner class="c bottom" ?disabled=${!this.interactive} step=".001" .value="${this.c}" @input=${this.cInput.bind(this)}>
+          <var class="math-var">c</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>
+      `;
+      hr = html`
+        <decidables-spinner class="hr bottom" disabled min="0" max="1" step=".001" .value="${+this.hr.toFixed(3)}">
+          <var>Hit Rate</var>
+        </decidables-spinner>
+      `;
+    } else {
+      d = html`<var class="math-var d">d′</var>`;
+      c = html`<var class="math-var c">c</var>`;
+      s = html`<var class="math-var s">σ</var>`;
+      hr = html`<var class="hr">Hit Rate</var>`;
+    }
+    let equation;
+    if (this.unequal) {
+      equation = html`
+        <tr>
+          <td rowspan="2">
+            ${hr}<span class="equals">=</span><var class="math-greek phi tight">Φ</var><span class="paren tight">(</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">
+            ${d}
+          </td>
+          <td rowspan="2">
+            <span class="minus">−</span>
+          </td>
+          <td class="underline">
+            ${c}
+          </td>
+          <td rowspan="2">
+            <span class="bracket tight">]</span><span class="paren tight">)</span>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span>2</span>
+          </td>
+          <td>
+            <span><span>1</span><span class="plus">+</span>${s}</span>
+          </td>
+          <td>
+            ${s}
+          </td>
+        </tr>`;
+    } else {
+      equation = html`
+        <tr>
+          <td rowspan="2">
+            ${hr}<span class="equals">=</span><var class="math-greek phi tight">Φ</var><span class="paren tight">(</span>
+          </td>
+          <td class="underline">
+            ${d}
+          </td>
+          <td rowspan="2">
+            <span class="minus">−</span>${c}<span class="paren 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-dc2hr', SDTEquationDC2Hr);

package/src/equations/facr2far.js

@@ -0,0 +1,120 @@
+
+import {html} from 'lit';
+
+import '@decidables/decidables-elements/spinner';
+import SDTMath from '@decidables/detectable-math';
+
+import SDTEquation from './sdt-equation';
+
+/*
+  SDTEquationFaCr2Far element
+  <sdt-equation-facr2far>
+
+  Attributes:
+  False Alarms; Correct Rejections; False Alarm Rate;
+*/
+export default class SDTEquationFaCr2Far extends SDTEquation {
+  static get properties() {
+    return {
+      fa: {
+        attribute: 'false-alarms',
+        type: Number,
+        reflect: true,
+      },
+      cr: {
+        attribute: 'correct-rejections',
+        type: Number,
+        reflect: true,
+      },
+      far: {
+        attribute: false,
+        type: Number,
+        reflect: false,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.fa = 0;
+    this.cr = 0;
+    this.alignState();
+  }
+
+  alignState() {
+    this.far = SDTMath.faCr2Far(this.fa, this.cr);
+  }
+
+  sendEvent() {
+    this.dispatchEvent(new CustomEvent('sdt-equation-facr2far-change', {
+      detail: {
+        fa: this.fa,
+        cr: this.cr,
+        far: this.far,
+      },
+      bubbles: true,
+    }));
+  }
+
+  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 fa;
+    let cr;
+    let far;
+    if (this.numeric) {
+      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>
+      `;
+      far = html`
+        <decidables-spinner class="far" disabled min="0" max="1" step=".001" .value="${+this.far.toFixed(3)}">
+          <var>False Alarm Rate</var>
+        </decidables-spinner>
+      `;
+    } else {
+      fa = html`<var class="fa">False Alarms</var>`;
+      cr = html`<var class="cr">Correct Rejections</var>`;
+      far = html`<var class="far">False Alarm Rate</var>`;
+    }
+    return html`
+      <div class="holder">
+        <table class="equation">
+          <tbody>
+            <tr>
+              <td rowspan="2">
+                ${far}<span class="equals">=</span>
+              </td>
+              <td class="underline">
+                ${fa}
+              </td>
+            </tr>
+            <tr>
+              <td>
+                ${fa}<span class="plus">+</span>${cr}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>`;
+  }
+}
+
+customElements.define('sdt-equation-facr2far', SDTEquationFaCr2Far);