@things-factory/spc 8.0.0-beta.9 → 8.0.0

package/client/bootstrap.ts

@@ -0,0 +1 @@
+export default function bootstrap() {}

package/client/pages/spc-chart-page.ts

@@ -0,0 +1,336 @@
+import '@material/web/icon/icon.js'
+
+import '@operato/app/filters-form.js'
+import '@operato/spc/ox-chart-xbar-r.js'
+import '@operato/spc/ox-chart-i-mr.js'
+import '@operato/spc/ox-chart-u.js'
+import '@operato/spc/ox-chart-c.js'
+import '@operato/spc/ox-chart-p.js'
+import '@operato/spc/ox-chart-np.js'
+
+import { ScrollbarStyles, CommonHeaderStyles } from '@operato/styles'
+import { PageView, store } from '@operato/shell'
+import { css, html, PropertyValues, nothing } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { isMobileDevice } from '@operato/utils'
+import { FilterConfig, FilterValue, OxFiltersFormBase } from '@operato/form'
+
+import { connect } from 'pwa-helpers/connect-mixin'
+import gql from 'graphql-tag'
+
+function formatDate(timestamp: number) {
+  const date = new Date(timestamp)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0') // 월은 0부터 시작하므로 1을 더함
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  const seconds = String(date.getSeconds()).padStart(2, '0')
+
+  return `${month}-${day} ${hours}:${minutes}`
+}
+
+@customElement('spc-chart-page')
+export class SpcChartPage extends connect(store)(localize(i18next)(PageView)) {
+  static styles = [
+    ScrollbarStyles,
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        width: 100%;
+      }
+
+      .chart {
+        flex: 1;
+        padding: var(--spacing-medium);
+      }
+    `
+  ]
+
+  @state() dataSetId?: string = ''
+  @state() variable?: string = ''
+  @state() chartType?: string = ''
+  @state() spcChart: any
+  @state() filtersValue?: FilterValue[]
+  @state() variables: { display: string; value: string }[] = []
+
+  @query('ox-filters-form-base') formBase!: OxFiltersFormBase
+
+  private get filtersConfig(): FilterConfig[] {
+    return [
+      {
+        name: 'dataSetId',
+        type: 'resource-id',
+        label: 'dataset',
+        operator: 'eq',
+        options: {
+          queryName: 'dataSets'
+        },
+        onchange: (value, formBase) => {
+          requestAnimationFrame(async () => {
+            const variableFilter = formBase.getFieldByName('variable') as HTMLInputElement
+            variableFilter.value = ''
+
+            this.variables = [
+              {
+                display: '',
+                value: ''
+              },
+              ...(await this.fetchVariables(value as string))
+            ]
+          })
+
+          this.dataSetId = value
+
+          return false /* whether filters-change event triggered or not */
+        }
+      },
+      {
+        name: 'variable',
+        type: 'select',
+        label: 'variable',
+        operator: 'eq',
+        options: () => this.variables,
+        onchange: value => (this.variable = value)
+      },
+      {
+        name: 'chartType',
+        type: 'select',
+        label: 'chart',
+        operator: 'eq',
+        options: ['Xbar-R', 'I-MR', 'C', 'U', 'P', 'NP'],
+        onchange: value => (this.chartType = value)
+      },
+      {
+        name: 'dateRange',
+        type: 'date',
+        label: 'date',
+        operator: 'between',
+        value: [
+          {
+            name: 'today',
+            params: {
+              relativeDays: -30
+            }
+          },
+          {
+            name: 'today',
+            params: {
+              relativeDays: -1
+            }
+          }
+        ]
+      }
+    ]
+  }
+
+  get context() {
+    return {
+      title: i18next.t('title.spc-chart'),
+      help: 'spc/spc-chart'
+    }
+  }
+
+  render() {
+    const { dataSet = {}, variable, charts = [] } = this.spcChart || {}
+
+    var plotters: { chart: string; data: any[] }[] = []
+
+    switch (this.chartType) {
+      case 'Xbar-R':
+        const xbar = charts.find(r => r.chartType == 'Xbar')
+        const r = charts.find(r => r.chartType == 'R')
+
+        plotters.push({ chart: 'xbar-r', data: xbar?.plots ?? [] })
+        break
+
+      case 'I-MR':
+        const i = charts.find(r => r.chartType == 'I')
+        const mr = charts.find(r => r.chartType == 'MR')
+
+        plotters.push({ chart: 'i-mr', data: i?.plots ?? [] })
+        break
+
+      case 'P':
+        const p = charts.find(r => r.chartType == 'P')
+        plotters.push({ chart: 'p', data: p?.plots ?? [] })
+        break
+
+      case 'NP':
+        const np = charts.find(r => r.chartType == 'NP')
+        plotters.push({ chart: 'np', data: np?.plots ?? [] })
+        break
+
+      case 'C':
+        const c = charts.find(r => r.chartType == 'C')
+        plotters.push({ chart: 'c', data: c?.plots ?? [] })
+        break
+
+      case 'U':
+        const u = charts.find(r => r.chartType == 'U')
+        plotters.push({ chart: 'u', data: u?.plots ?? [] })
+
+      default:
+    }
+
+    plotters = plotters.map(plotter => {
+      return {
+        ...plotter,
+        data: plotter.data.map(plot => {
+          return {
+            ...plot,
+            x: formatDate(Number(plot.x))
+          }
+        })
+      }
+    })
+
+    return html`
+      <div class="header">
+        <div class="title"><md-icon>apps</md-icon>${i18next.t('title.spc-chart')}</div>
+        <ox-filters-form-base
+          class="filters"
+          .value=${this.filtersValue}
+          .filters=${this.filtersConfig}
+          ?url-params-sensitive=${false}
+          @filters-change=${(e: CustomEvent) => {
+            this.fetchSpcChart()
+          }}
+        >
+        </ox-filters-form-base>
+      </div>
+
+      ${plotters.map(({ chart, data }) =>
+        chart == 'xbar-r'
+          ? html` <ox-chart-xbar-r class="chart" .plots=${data}></ox-chart-xbar-r> `
+          : chart == 'i-mr'
+            ? html` <ox-chart-i-mr class="chart" .plots=${data}></ox-chart-i-mr> `
+            : chart == 'u'
+              ? html` <ox-chart-u class="chart" .plots=${data}></ox-chart-u> `
+              : chart == 'c'
+                ? html` <ox-chart-c class="chart" .plots=${data}></ox-chart-c> `
+                : chart == 'p'
+                  ? html` <ox-chart-p class="chart" .plots=${data}></ox-chart-p> `
+                  : chart == 'np'
+                    ? html` <ox-chart-np class="chart" .plots=${data}></ox-chart-np> `
+                    : nothing
+      )}
+    `
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (!changes.has('spcChart')) {
+      this.fetchSpcChart()
+    }
+  }
+
+  async pageUpdated(changes: any, lifecycle: any) {
+    if (this.active) {
+      this.dataSetId = lifecycle.resourceId
+    }
+  }
+
+  async fetchSpcChart() {
+    const {
+      dataSetId,
+      dateRange: [fromDate, toDate],
+      variable,
+      chartType
+    } = (await this.formBase.getQueryFilters()).reduce((sum, field) => {
+      sum[field.name] = field.value
+      return sum
+    }, {} as any)
+
+    if (!(dataSetId && fromDate && toDate && variable && chartType)) {
+      return
+    }
+
+    const response = await client.query({
+      query: gql`
+        query spcChart(
+          $dataSetId: String!
+          $variable: String!
+          $chartType: String!
+          $fromDate: String!
+          $toDate: String!
+        ) {
+          spcChart(
+            dataSetId: $dataSetId
+            variable: $variable
+            chartType: $chartType
+            fromDate: $fromDate
+            toDate: $toDate
+          ) {
+            dataSet {
+              id
+              name
+            }
+            variable
+            charts {
+              chartType
+              controlLimits {
+                ucl
+                lcl
+                cl
+              }
+              specLimits {
+                usl
+                lsl
+                target
+              }
+              plots {
+                x
+                values
+                xbar
+                r
+                i
+                mr
+                n
+                defects
+              }
+            }
+          }
+        }
+      `,
+      variables: {
+        dataSetId,
+        variable,
+        chartType,
+        fromDate,
+        toDate
+      }
+    })
+
+    this.spcChart = response.data.spcChart
+  }
+
+  async fetchVariables(id: string): Promise<{ display: string; value: string }[]> {
+    const response = await client.query({
+      query: gql`
+        query dataSet($id: String!) {
+          dataSet(id: $id) {
+            dataItems {
+              name
+              tag
+            }
+          }
+        }
+      `,
+      variables: {
+        id
+      }
+    })
+
+    return response.data.dataSet.dataItems.map(dataItem => {
+      return {
+        display: dataItem.name,
+        value: dataItem.name
+      }
+    })
+  }
+}

package/client/route.ts

@@ -0,0 +1,7 @@
+export default function route(page) {
+  switch (page) {
+    case 'spc-chart':
+      import('./pages/spc-chart-page')
+      return page
+  }
+}

package/client/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig-base.json",
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "declaration": true,
+    "module": "esnext",
+    "outDir": "../dist-client",
+    "baseUrl": "./"
+  },
+  "include": ["./**/*"]
+}