@operato/dataset 1.14.0 → 1.14.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/dataset",
   "description": "WebApplication dataset supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "1.14.0",
+  "version": "1.14.2",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -110,12 +110,12 @@
     "@material/mwc-icon-button": "^0.27.0",
     "@operato/data-grist": "^1.14.0",
     "@operato/graphql": "^1.12.9",
-    "@operato/grist-editor": "^1.14.0",
+    "@operato/grist-editor": "^1.14.1",
     "@operato/i18n": "^1.5.14",
     "@operato/input": "^1.13.14",
     "@operato/popup": "^1.13.9",
-    "@operato/property-editor": "^1.14.0",
-    "@operato/shell": "^1.13.9",
+    "@operato/property-editor": "^1.14.1",
+    "@operato/shell": "^1.14.1",
     "@operato/styles": "^1.12.3",
     "@operato/utils": "^1.13.9",
     "lit": "^2.5.0"
@@ -152,5 +152,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "b7a6a59d2bd40418ee530cd7a0561b52156d3ca7"
+  "gitHead": "0612202892166b995c92e75955269f2ae961b3bf"
 }

package/src/ox-data-ooc-brief-view.ts

@@ -15,7 +15,6 @@ export class OxDataOocBriefView extends LitElement {
     :host {
       display: flex;
       flex-direction: column;
-      background-color: var(--main-section-background-color);
 
       position: relative;
     }

package/src/ox-data-ooc-correction-part.ts

@@ -14,7 +14,6 @@ export class OxDataOocCorrectionPart extends LitElement {
     :host {
       display: flex;
       flex-direction: column;
-      background-color: var(--main-section-background-color);
 
       position: relative;
     }

package/src/ox-data-ooc-view.ts

@@ -19,7 +19,6 @@ export class OxDataOocView extends LitElement {
     :host {
       display: flex;
       flex-direction: column;
-      background-color: var(--main-section-background-color);
 
       position: relative;
     }

package/src/usecase/spc/index.ts

@@ -0,0 +1,10 @@
+/* Here, only the common module of client and server is imported/exported. Be careful not to use a module dedicated to client or server. */
+
+import { OxDataUseCase } from '../ox-data-use-case'
+import { OxDataUseCaseSPC } from './ox-data-use-case-spc'
+
+// OxPropertyEditor.register({
+//   'spc-limits': 'ox-property-editor-spc-limits'
+// })
+
+OxDataUseCase.registerUseCase('SPC', new OxDataUseCaseSPC())

package/src/usecase/spc/ox-data-use-case-spc.ts

@@ -0,0 +1,147 @@
+import i18next from 'i18next' // Since this is a common module, @operato/i18n was deliberately avoided.
+
+import { DataItem, EvaluationResult, UseCaseDefinition } from '../../types'
+import { OxDataUseCase } from '../ox-data-use-case.js'
+
+export class OxDataUseCaseSPC extends OxDataUseCase {
+  getSpecification(dataItem: DataItem): UseCaseDefinition {
+    return {
+      name: 'SPC',
+      description: 'Critical Control Point Data Spec',
+      help: '',
+      specs: [
+        {
+          type: 'spc-limits' /* A value which seperates acceptability from unacceptability */,
+          label: 'critical-limits',
+          name: 'criticalLimits',
+          property: dataItem
+        },
+        {
+          type: 'spc-limits',
+          label: 'target-limits',
+          name: 'targetLimits',
+          property: dataItem
+        }
+      ]
+    }
+  }
+
+  evaluate(spec: any, values: any | any[]): EvaluationResult | undefined {
+    if (!spec || typeof values === 'undefined') {
+      return
+    }
+
+    if (!(values instanceof Array)) {
+      values = [values]
+    }
+
+    const {
+      minimum: criticalMinimum,
+      maximum: criticalMaximum,
+      acceptables: criticalAcceptables
+    } = spec['criticalLimits'] || {}
+
+    const {
+      minimum: targetMinimum,
+      maximum: targetMaximum,
+      acceptables: targetAcceptables
+    } = spec['targetLimits'] || {}
+
+    var oos = false
+    var ooc = false
+
+    for (let i = 0; i < values.length; i++) {
+      const value = values[i]
+
+      if (criticalMinimum != null && value < criticalMinimum) {
+        oos = true
+        break
+      }
+
+      if (criticalMaximum != null && value > criticalMaximum) {
+        oos = true
+        break
+      }
+
+      if (criticalAcceptables != null && !criticalAcceptables.includes(value)) {
+        oos = true
+        break
+      }
+    }
+
+    for (let i = 0; i < values.length; i++) {
+      const value = values[i]
+
+      if (targetMinimum != null && value < targetMinimum) {
+        ooc = true
+        break
+      }
+
+      if (targetMaximum != null && value > targetMaximum) {
+        ooc = true
+        break
+      }
+
+      if (targetAcceptables != null && !targetAcceptables.includes(value)) {
+        ooc = true
+        break
+      }
+    }
+
+    return { oos, ooc }
+  }
+
+  elaborateUseCaseSpec(limits: any): string | undefined {
+    if (!limits) {
+      return
+    }
+
+    var text = ''
+
+    const {
+      minimum: criticalMinimum,
+      maximum: criticalMaximum,
+      acceptables: criticalAcceptables
+    } = limits['criticalLimits'] || {}
+
+    if (criticalMinimum != null || criticalMaximum != null || criticalAcceptables != null) {
+      text += `${i18next.t('label.critical-limits')}\n`
+    }
+
+    if (criticalMinimum != null) {
+      text += `\t${i18next.t('label.minimum value')} : ${criticalMinimum}\n`
+    }
+    if (criticalMaximum != null) {
+      text += `\t${i18next.t('label.maximum value')} : ${criticalMaximum}\n`
+    }
+    if (criticalAcceptables != null) {
+      text += `\t${i18next.t('label.acceptables')} : ${
+        criticalAcceptables instanceof Array ? criticalAcceptables.join(', ') : criticalAcceptables
+      }\n`
+    }
+
+    const {
+      minimum: targetMinimum,
+      maximum: targetMaximum,
+      acceptables: targetAcceptables
+    } = limits['targetLimits'] || {}
+
+    if (targetMinimum != null || targetMaximum != null || targetAcceptables != null) {
+      text += `${i18next.t('label.target-limits')}\n`
+    }
+
+    if (targetMinimum != null) {
+      text += `\t${i18next.t('label.minimum value')} : ${targetMinimum}\n`
+    }
+    if (targetMaximum != null) {
+      text += `\t${i18next.t('label.maximum value')} : ${targetMaximum}\n`
+    }
+    if (targetAcceptables != null) {
+      text += `\t${i18next.t('label.acceptables')} : ${
+        targetAcceptables instanceof Array ? targetAcceptables.join(', ') : targetAcceptables
+      }\n`
+    }
+
+    return text
+  }
+}

package/src/usecase/spc/ox-input-spc-limits.ts

@@ -0,0 +1,182 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, queryAll } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+
+export enum DataItemType {
+  number = 'number',
+  text = 'text',
+  boolean = 'boolean',
+  select = 'select',
+  file = 'file'
+}
+
+export type SpcLimitValue = {
+  minimum?: number
+  maximum?: number
+  acceptables?: string[] | boolean[]
+}
+
+/**
+ element for SPC limits
+ 
+ Example:
+ 
+   <ox-input-spc-limits
+     .value=${value}
+     .type=${type}>
+   </ox-input-spc-limits>
+ */
+@customElement('ox-input-spc-limits')
+export class OxInputSpcLimits extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-content: center;
+    }
+
+    label {
+      margin: 0 var(--margin-default) var(--margin-default) 0;
+    }
+
+    label div > * {
+      vertical-align: middle;
+    }
+
+    button {
+      width: 20px;
+      text-align: center;
+    }
+
+    div[name],
+    input[type='checkbox'] + span {
+      display: inline-block;
+      font: var(--label-font);
+      color: var(--label-color);
+      text-align: right;
+    }
+    input,
+    select {
+      border: var(--input-field-border);
+      border-radius: var(--input-field-border-radius);
+      padding: var(--input-field-padding);
+      font: var(--input-field-font);
+    }
+
+    input[type='checkbox'] {
+      width: initial;
+    }
+    input[checked] + span {
+      font-weight: bold;
+    }
+    [unit],
+    [value] {
+      display: inline-block;
+      opacity: 0.7;
+      font: var(--form-sublabel-font);
+    }
+    [properties] {
+      font: var(--input-field-font);
+      color: var(--label-color);
+    }
+  `
+
+  @property({ type: Object }) value: SpcLimitValue = {}
+  @property({ type: String }) type: DataItemType = DataItemType.number
+  @property({ type: String }) unit?: string
+  @property({ type: Object }) options: { options?: { text: string; value: string }[] } = {}
+
+  @query('[name=minimum]') minimum!: HTMLInputElement
+  @query('[name=maximum]') maximum!: HTMLInputElement
+  @queryAll('[type=checkbox]:checked') checkedAll!: NodeListOf<HTMLInputElement>
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this.onChange.bind(this))
+  }
+
+  render() {
+    const { minimum, maximum, acceptables = [] } = this.value || {}
+
+    return html`
+      <div>
+        ${this.type === DataItemType.number
+          ? html`
+              <label>
+                <div name>${i18next.t('text.minimum value')}</div>
+                <input type="number" name="minimum" .value=${String(minimum)} />
+                <div unit>${this.unit}</div>
+              </select>
+              </label>
+              <label>
+                <div name>${i18next.t('text.maximum value')}</div>
+                <input type="number" name="maximum" .value=${String(maximum)} />
+                <div unit>${this.unit}</div>
+              </label>
+            `
+          : this.type === DataItemType.select
+          ? html`
+              <!-- <div>Acceptables</div> -->
+              ${this.options?.options?.map(
+                option => html`
+                  <div>
+                    <input
+                      type="checkbox"
+                      data-value=${option.value}
+                      ?checked=${(acceptables as string[]).includes(option.value)}
+                    />
+                    <span>${option.text}</span>
+                    <span value>(${option.value})</span>
+                  </div>
+                `
+              )}
+            `
+          : this.type === DataItemType.boolean
+          ? html`
+              <div>
+                <input type="checkbox" data-value=${true} ?checked=${(acceptables as boolean[]).includes(true)} />
+                <span value>true</span>
+              </div>
+              <div>
+                <input type="checkbox" data-value=${false} ?checked=${(acceptables as boolean[]).includes(false)} />
+                <span value>false</span>
+              </div>
+            `
+          : html` <div properties>${i18next.t('text.no properties to set')}</div> `}
+      </div>
+    `
+  }
+
+  private onChange(e: Event) {
+    if (this.type === DataItemType.number) {
+      this.value = {
+        minimum: this.minimum.valueAsNumber,
+        maximum: this.maximum.valueAsNumber
+      }
+    } else if (this.type === DataItemType.select) {
+      this.value = {
+        acceptables: Array.from(this.checkedAll).map(checked => {
+          const x = checked.getAttribute('data-value')!
+          console.log(x)
+          return x
+        })
+      }
+    } else if (this.type === DataItemType.boolean) {
+      this.value = {
+        acceptables: Array.from(this.checkedAll).map(checked => {
+          const x = checked.getAttribute('data-value')! === 'true'
+          console.log(x)
+          return x
+        })
+      }
+    } else {
+      this.value = {}
+    }
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+}

package/src/usecase/spc/ox-property-editor-spc-limits.ts

@@ -0,0 +1,23 @@
+import './ox-input-spc-limits.js'
+
+import { html, TemplateResult } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'
+
+@customElement('ox-property-editor-spc-limits')
+export class OxPropertyEditorSpcLimits extends OxPropertyEditor {
+  editorTemplate(value: any, spec: PropertySpec): TemplateResult {
+    const { type, options, unit } = spec.property || {}
+
+    return html`
+      <ox-input-spc-limits
+        id="editor"
+        .value=${value}
+        .type=${type}
+        .unit=${unit}
+        .options=${options}
+      ></ox-input-spc-limits>
+    `
+  }
+}