@operato/dataset 2.0.0-alpha.6 → 2.0.0-alpha.61

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

@@ -0,0 +1,107 @@
+import '@operato/input/ox-input-file.js'
+import '@material/mwc-icon'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+
+import { DataOoc } from './types.js'
+
+@customElement('ox-data-ooc-correction-part')
+export class OxDataOocCorrectionPart extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+
+      position: relative;
+    }
+
+    h3 {
+      margin: var(--title-margin);
+      padding-top: 12px;
+      font: var(--title-font);
+      color: var(--title-text-color);
+      font-size: 20px;
+    }
+
+    mwc-icon {
+      font-size: 16px;
+    }
+
+    [field-state] {
+      border-radius: 2px;
+      background-color: var(--primary-color);
+      margin-left: var(--margin-default);
+      padding: 1px 2px;
+      font-size: 0.7rem;
+      color: var(--theme-white-color);
+    }
+
+    p {
+      background-color: var(--theme-white-color);
+      box-shadow: var(--box-shadow);
+      border-radius: var(--border-radius);
+      margin: var(--page-description-margin);
+      padding: var(--padding-default);
+      font: var(--page-description-font);
+      color: var(--secondary-color);
+    }
+
+    mwc-icon {
+      position: relative;
+      top: 3px;
+      margin: 0 2px 0 10px;
+    }
+
+    [field-info] {
+      opacity: 0.7;
+    }
+
+    strong {
+      display: block;
+      font-weight: bold;
+      font-size: 0.9rem;
+    }
+  `
+
+  @property({ type: Object }) dataOoc?: DataOoc
+
+  render() {
+    const {
+      correctiveInstruction = '',
+      correctiveAction = '',
+      reviewer,
+      reviewedAt,
+      corrector,
+      correctedAt
+    } = this.dataOoc || {}
+    const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
+
+    return html`
+      ${reviewer
+        ? html`
+            <h3>${i18next.t('label.corrective instruction')}</h3>
+            <p>
+              <span field-info
+                >${formatter.format(new Date(reviewedAt!))} <mwc-icon>account_circle</mwc-icon>${reviewer.name}</span
+              >
+              <strong>${correctiveInstruction}</strong>
+            </p>
+          `
+        : nothing}
+      ${corrector
+        ? html`
+            <h3>${i18next.t('label.corrective action')}</h3>
+            <p>
+              <span field-info
+                >${formatter.format(new Date(correctedAt!))} <mwc-icon>account_circle</mwc-icon>${corrector.name}</span
+              >
+              <strong>${correctiveAction}</strong>
+            </p>
+          `
+        : nothing}
+    `
+  }
+}

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

@@ -0,0 +1,74 @@
+import '@operato/input/ox-input-file.js'
+import './ox-data-sample-view'
+import '@material/mwc-icon'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { DataOoc } from './types.js'
+
+@customElement('ox-data-ooc-history')
+export class OxDataOocHistory extends LitElement {
+  static styles = css`
+    mwc-icon {
+      font-size: 16px;
+    }
+
+    [field-state] {
+      border-radius: 2px;
+      background-color: var(--primary-color);
+      margin-left: var(--margin-default);
+      padding: 1px 2px;
+      font-size: 0.7rem;
+      color: var(--theme-white-color);
+    }
+
+    p {
+      background-color: var(--theme-white-color);
+      box-shadow: var(--box-shadow);
+      border-radius: var(--border-radius);
+      margin: var(--page-description-margin);
+      padding: var(--padding-default);
+      font: var(--page-description-font);
+      color: var(--secondary-color);
+    }
+
+    mwc-icon {
+      position: relative;
+      top: 3px;
+      margin: 0 2px 0 10px;
+    }
+
+    [field-info] {
+      opacity: 0.7;
+    }
+
+    strong {
+      display: block;
+      font-weight: bold;
+      font-size: 0.9rem;
+    }
+  `
+
+  @property({ type: Object }) dataOoc?: DataOoc
+
+  render() {
+    const { history = [] } = this.dataOoc || {}
+    const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
+
+    return html`
+      ${history.map(
+        ({ user, state, comment, timestamp }) => html`
+          <p page-history>
+            <!--상태에 따라 추가로 danger, complete를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->
+            <span field-info
+              >${formatter.format(new Date(timestamp))} <mwc-icon>account_circle</mwc-icon>${user.name}</span
+            >
+            <span field-state>${state}</span>
+            <strong>${comment}</strong>
+          </p>
+        `
+      )}
+    `
+  }
+}

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

@@ -1,5 +1,6 @@
 import '@operato/input/ox-input-file.js'
 import './ox-data-sample-view'
+import './ox-data-ooc-history'
 import '@material/mwc-icon'
 
 import { css, html, LitElement } from 'lit'
@@ -18,88 +19,17 @@ export class OxDataOocView extends LitElement {
     :host {
       display: flex;
       flex-direction: column;
-      background-color: var(--main-section-background-color);
 
       position: relative;
     }
 
-    h3 {
-      margin: var(--title-margin);
-      padding-top: 12px;
-      font: var(--title-font);
-      color: var(--title-text-color);
-    }
-
-    h3[state] {
+    ox-data-ooc-badge {
       position: absolute;
+
       margin: 0;
       padding: 0;
       right: 10px;
       width: 90px;
-      text-align: center;
-    }
-
-    mwc-icon {
-      font-size: 16px;
-    }
-    [state] mwc-icon {
-      font-size: 80px;
-      opacity: 0.4;
-      color: var(--primary-background-color);
-    }
-
-    [state] div {
-      position: absolute;
-      top: 22px;
-      left: 0;
-      right: 0;
-      font-size: 10px;
-      color: var(--theme-white-color);
-    }
-    [state] [field-state] {
-      display: block;
-      border-radius: 4px;
-      background-color: var(--primary-color);
-      box-shadow: var(--box-shadow);
-      margin-top: var(--margin-narrow);
-      padding: 1px 3px;
-      font-size: 0.8rem;
-    }
-    [danger] [field-state] {
-      background-color: var(--status-danger-color);
-    }
-    [complete] [field-state] {
-      background-color: var(--status-info-color);
-    }
-    [page-history] [field-state] {
-      border-radius: 2px;
-      background-color: var(--primary-color);
-      margin-left: var(--margin-default);
-      padding: 1px 2px;
-      font-size: 0.7rem;
-      color: var(--theme-white-color);
-    }
-    [page-history] {
-      background-color: var(--theme-white-color);
-      box-shadow: var(--box-shadow);
-      border-radius: var(--border-radius);
-      margin: var(--page-description-margin);
-      padding: var(--padding-default);
-      font: var(--page-description-font);
-      color: var(--secondary-color);
-    }
-    [page-history] mwc-icon {
-      position: relative;
-      top: 3px;
-      margin: 0 2px 0 10px;
-    }
-    [field-info] {
-      opacity: 0.7;
-    }
-    [page-history] strong {
-      display: block;
-      font-weight: bold;
-      font-size: 0.9rem;
     }
   `
 
@@ -107,30 +37,15 @@ export class OxDataOocView extends LitElement {
   @property({ type: Object }) dataOoc?: DataOoc
 
   render() {
-    const { history = [], state } = this.dataOoc || {}
-    const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
+    const { state } = this.dataOoc || {}
 
     return html`
       <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>
 
-      <h3 state ?danger=${state != 'CORRECTED'} ?complete=${state == 'CORRECTED'}>
-        <mwc-icon>shield</mwc-icon>
-        <div>DATA OOC <span field-state>${state || ''}</span></div>
-      </h3>
+      <ox-data-ooc-badge .state=${state}></ox-data-ooc-badge>
 
       <h3>${i18next.t('title.history')}</h3>
-      ${history.map(
-        ({ user, state, comment, timestamp }) => html`
-          <p page-history>
-            <!--상태에 따라 추가로 danger, complete를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->
-            <span field-info
-              >${formatter.format(new Date(timestamp))} <mwc-icon>account_circle</mwc-icon>${user.name}</span
-            >
-            <span field-state>${state}</span>
-            <strong>${comment}</strong>
-          </p>
-        `
-      )}
+      <ox-data-ooc-history .dataOoc=${this.dataOoc}></ox-data-ooc-history>
     `
   }
 }

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

@@ -39,6 +39,7 @@ export class OxDataSampleSubgroupView extends LitElement {
       font-weight: bold;
       color: var(--th-color);
       text-align: center;
+      white-space: nowrap;
     }
 
     th.label,
@@ -75,7 +76,6 @@ export class OxDataSampleSubgroupView extends LitElement {
 
     pre {
       tab-size: 2;
-      text-wrap: wrap;
       text-align: left;
     }
   `

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,18 @@ export class OxDataSampleView extends LitElement {
     pre {
       tab-size: 2;
     }
+
+    @media print {
+      :host {
+        display: block;
+      }
+    }
+
+    @media screen and (max-width: 480px) {
+      th {
+        min-width: 50px;
+      }
+    }
   `
 
   @property({ type: Object }) dataSample?: DataSample
@@ -128,36 +141,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

@@ -93,6 +93,12 @@ export class OxDataSummaryView extends LitElement {
     pre {
       tab-size: 2;
     }
+
+    @media screen and (max-width: 480px) {
+      th {
+        min-width: 50px;
+      }
+    }
   `
 
   @property({ type: Object }) dataSummary?: DataSummary
@@ -116,7 +122,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())