@operato/dataset 2.0.0-alpha.2 → 2.0.0-alpha.21

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

@@ -1,7 +1,7 @@
 import '@operato/input/ox-input-file.js'
 import './ox-data-sample-subgroup-view.js'
 
-import { css, html, LitElement } from 'lit'
+import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
@@ -58,6 +58,7 @@ export class OxDataSampleView extends LitElement {
       font: var(--th-font);
       color: var(--th-color);
       text-align: left;
+      white-space: nowrap;
     }
     th[item] {
       min-width: 100px;
@@ -94,6 +95,12 @@ export class OxDataSampleView extends LitElement {
     pre {
       tab-size: 2;
     }
+
+    @media print {
+      :host {
+        display: block;
+      }
+    }
   `
 
   @property({ type: Object }) dataSample?: DataSample
@@ -128,36 +135,40 @@ export class OxDataSampleView extends LitElement {
       </p>
 
       <form>
-        <table>
-          <tr>
-            <th item>${i18next.t('field.item')}</th>
-            <th>${i18next.t('field.description')}</th>
-            <th>${i18next.t('field.stat-function')}</th>
-            <th>${i18next.t('field.unit')}</th>
-            <th value>${i18next.t('field.value')}</th>
-            <th>${i18next.t('field.spec')}</th>
-            <th>${i18next.t('field.ooc')}</th>
-            <th>${i18next.t('field.oos')}</th>
-          </tr>
-          ${nonGroupDataItems.map(dataItem => {
-            const { name = '', tag = '', description = '', stat, unit = '', spec = {}, type } = dataItem
-            const value = data[tag]
-            const { ooc, oos } = judgment?.[tag] || {}
-
-            return html`
-              <tr ?ooc=${ooc} ?oos=${oos}>
-                <td name>${name}</td>
-                <td>${description}</td>
-                <td>${stat}</td>
-                <td>${unit}</td>
-                <td>${this.buildValue(type, value)}</td>
-                <td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>
-                <td>${ooc ? html`<mwc-icon>done</mwc-icon>` : ''}</td>
-                <td>${oos ? html`<mwc-icon>done</mwc-icon>` : ''}</td>
-              </tr>
+        ${nonGroupDataItems.length > 0
+          ? html`
+              <table>
+                <tr>
+                  <th item>${i18next.t('field.item')}</th>
+                  <th>${i18next.t('field.description')}</th>
+                  <th>${i18next.t('field.finalizing-function')}</th>
+                  <th>${i18next.t('field.unit')}</th>
+                  <th value>${i18next.t('field.value')}</th>
+                  <th>${i18next.t('field.spec')}</th>
+                  <th>${i18next.t('field.ooc')}</th>
+                  <th>${i18next.t('field.oos')}</th>
+                </tr>
+                ${nonGroupDataItems.map(dataItem => {
+                  const { name = '', tag = '', description = '', stat, unit = '', spec = {}, type } = dataItem
+                  const value = data[tag]
+                  const { ooc, oos } = judgment?.[tag] || {}
+
+                  return html`
+                    <tr ?ooc=${ooc} ?oos=${oos}>
+                      <td name>${name}</td>
+                      <td>${description}</td>
+                      <td>${stat}</td>
+                      <td>${unit}</td>
+                      <td>${this.buildValue(type, value)}</td>
+                      <td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>
+                      <td>${ooc ? html`<mwc-icon>done</mwc-icon>` : ''}</td>
+                      <td>${oos ? html`<mwc-icon>done</mwc-icon>` : ''}</td>
+                    </tr>
+                  `
+                })}
+              </table>
             `
-          })}
-        </table>
+          : nothing}
         ${Object.keys(dataItemSubgroups).map(subgroup => {
           return html`
             <ox-data-sample-subgroup-view

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

@@ -116,7 +116,7 @@ export class OxDataSummaryView extends LitElement {
           <tr>
             <th item>${i18next.t('field.item')}</th>
             <th>${i18next.t('field.description')}</th>
-            <th>${i18next.t('field.stat-function')}</th>
+            <th>${i18next.t('field.finalizing-function')}</th>
             <th>${i18next.t('field.unit')}</th>
             <th value>${i18next.t('field.value')}</th>
             <th>${i18next.t('field.spec')}</th>

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

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

@@ -144,6 +144,7 @@ var dataOoc = {
   name: 'Data Sample Name',
   description: 'Data Sample이 어쩌구 저쩌구 그래서 중요합니다. 당연히 그래야죠.',
   useCase: 'CCP',
+  state: 'REVIEWED',
   judgment: {
     temp: {
       ooc: true,
@@ -247,6 +248,7 @@ var dataOoc = {
         name: 'shnam'
       },
       state: 'CORRECTED',
+      comment: '전량 폐기하였습니다',
       timestamp: Date.now()
     }
   ]

package/themes/grist-theme.css

@@ -37,7 +37,7 @@ body {
 
   --grid-record-background-color: var(--theme-white-color);
   --grid-record-odd-background-color: #f9f7f5;
-  --grid-record-padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);
+  --grid-record-padding: 0 5px 0 5px;
   --grid-record-color: var(--secondary-color);
   --grid-record-color-hover: var(--primary-color);
   --grid-record-wide-fontsize: var(--fontsize-small);

package/translations/en.json

@@ -17,6 +17,7 @@
   "field.entry-role": "entry role",
   "field.entry-type": "entry type",
   "field.entry-view": "entry view",
+  "field.finalizing-function": "finalizing func.",
   "field.hidden": "hidden",
   "field.item": "item",
   "field.latest-collected-at": "latest collected at",