@operato/dataset 2.0.0-alpha.11 → 2.0.0-alpha.110

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

@@ -39,7 +39,7 @@ export class OxDataSummaryView extends LitElement {
     [page-description] * {
       vertical-align: middle;
     }
-    [page-description] mwc-icon {
+    [page-description] md-icon {
       margin-top: -2px;
       font-size: 0.9rem;
       color: var(--page-description-color);
@@ -86,13 +86,19 @@ export class OxDataSummaryView extends LitElement {
     td[name] {
       font-weight: bold;
     }
-    td mwc-icon {
+    td md-icon {
       color: var(--status-danger-color);
     }
 
     pre {
       tab-size: 2;
     }
+
+    @media screen and (max-width: 480px) {
+      th {
+        min-width: 50px;
+      }
+    }
   `
 
   @property({ type: Object }) dataSummary?: DataSummary
@@ -107,8 +113,8 @@ export class OxDataSummaryView extends LitElement {
 
     return html` <h2>${name}</h2>
       <p page-description>
-        <mwc-icon>info_outline</mwc-icon> ${description}<br />
-        <mwc-icon>alarm</mwc-icon> ${i18next.t('field.date')}: ${date} ${period}
+        <md-icon>info</md-icon> ${description}<br />
+        <md-icon>alarm</md-icon> ${i18next.t('field.date')}: ${date} ${period}
       </p>
 
       <form>

package/src/types.ts

@@ -1,10 +1,24 @@
-export type SelectOption = { text: string; value: string }
+/**
+ * Represents a selectable option with a text label and a value.
+ */
+export type SelectOption = {
+  text: string
+  value: string
+}
+/**
+ * An array of selectable options.
+ */
 export type SelectOptions = SelectOption[]
+/**
+ * Defines the options and additional properties for a type.
+ */
 export type TypeOptions = {
   options?: SelectOptions
   [prop: string]: any
 }
-
+/**
+ * Describes the structure and properties of a data item.
+ */
 export type DataItem = {
   name: string
   description: string
@@ -24,7 +38,9 @@ export type DataItem = {
     }
   }
 }
-
+/**
+ * Defines the structure of a dataset, including its name, description, type, use case, and data items.
+ */
 export type DataSet = {
   name: string
   description: string
@@ -32,59 +48,82 @@ export type DataSet = {
   useCase: string
   active: boolean
   dataItems: DataItem[]
-  spec: { [dataItem: string]: { [useCase: string]: any } }
+  spec: {
+    [dataItem: string]: {
+      [useCase: string]: any
+    }
+  }
 }
-
+/**
+ * Describes the definition of a data specification, including its type, label, name, and optional properties.
+ */
 export type DataSpecDefinition = {
   type: string
   label: string
   name: string
-  property?: { [option: string]: any }
+  property?: {
+    [option: string]: any
+  }
 }
-
+/**
+ * Describes a use case definition, including its name, description, help text, and specifications.
+ */
 export type UseCaseDefinition = {
   name: string
   description: string
   help: string
   specs: DataSpecDefinition[]
 }
-
+/**
+ * Represents the limits for a data specification.
+ */
 export type DataSpecLimit = {
   [limit: string]: number | string | string[] | boolean
 }
-
+/**
+ * A set of data specification limits, keyed by use case.
+ */
 export type DataSpecLimitSet = {
   [useCase: string]: DataSpecLimit
 }
-
+/**
+ * Represents a collection of data, keyed by a tag.
+ */
 export type DataCollection = {
   [tag: string]: any
 }
-
+/**
+ * Represents a judgment on data, indicating if it is out of control or out of specification.
+ */
 export type Judgment = {
   [tag: string]: {
     ooc: boolean
     oos: boolean
   }
 }
-
+/**
+ * Describes a data sample, including its name, description, use case, and associated data and judgments.
+ */
 export type DataSample = {
-  name: string
-  description: string
-  useCase: string
+  name?: string
+  description?: string
+  useCase?: string
   data?: DataCollection
   judgment?: Judgment
   dataItems?: DataItem[]
-  quota: number
-  workDate: string
-  workShift: string
-  collectedAt: Date
+  quota?: number
+  workDate?: string
+  workShift?: string
+  collectedAt?: Date
+  reviewActivityInstance?: any
+  dataOoc?: DataOoc
 }
-
 export type DataOocState = 'ISSUED' | 'REVIEWED' | 'CORRECTED'
-
+/**
+ * Extends DataSample with additional fields specific to an out of control state, including state, corrective actions, and review history.
+ */
 export type DataOoc = DataSample & {
-  state: DataOocState
+  state?: DataOocState
   correctiveInstruction?: string
   correctiveAction?: string
   reviewer?: {
@@ -97,7 +136,7 @@ export type DataOoc = DataSample & {
     name: string
   }
   correctedAt?: Date
-  history: {
+  history?: {
     user: {
       id: string
       name: string
@@ -106,8 +145,11 @@ export type DataOoc = DataSample & {
     comment: string
     timestamp: number
   }[]
+  resolveActivityInstance?: any
 }
-
+/**
+ * Describes a summary of data, including its name, description, relevant data items, and key metrics.
+ */
 export type DataSummary = {
   name: string
   description: string
@@ -123,7 +165,14 @@ export type DataSummary = {
   countOoc?: number
   countOos?: number
   useCase?: string
-  summary?: { [key: string]: any }
+  summary?: {
+    [key: string]: any
+  }
+}
+/**
+ * Represents the result of an evaluation, indicating if data is out of specification or out of control.
+ */
+export type EvaluationResult = {
+  oos: boolean
+  ooc: boolean
 }
-
-export type EvaluationResult = { oos: boolean; ooc: boolean }

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>
+    `
+  }
+}