@things-factory/spc 7.0.0-alpha.6 → 7.0.0-alpha.7

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

@@ -1,40 +1,131 @@
-import '@operato/spc/ox-chart-xbar.js'
-import '@operato/spc/ox-chart-r.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 } from '@operato/styles'
+import { ScrollbarStyles, CommonHeaderStyles } from '@operato/styles'
 import { PageView, store } from '@operato/shell'
-import { css, html, PropertyValues } from 'lit'
+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%;
-
-        --grid-record-emphasized-background-color: #8b0000;
-        --grid-record-emphasized-color: #ff6b6b;
       }
 
       .chart {
         flex: 1;
+        padding: var(--padding-default);
       }
     `
   ]
 
-  @state() dataSetId?: string
-  @state() variable?: string
+  @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 {
@@ -44,15 +135,95 @@ export class SpcChartPage extends connect(store)(localize(i18next)(PageView)) {
   }
 
   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`
-      <ox-chart-xbar class="chart"></ox-chart-xbar>
-      <ox-chart-r class="chart"></ox-chart-r>
+      <div class="header">
+        <div class="title"><mwc-icon>summarize</mwc-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('dataSetId')) {
-      this.fetchSpcChart(this.dataSetId!, this.variable!)
+    if (!changes.has('spcChart')) {
+      this.fetchSpcChart()
     }
   }
 
@@ -62,44 +233,51 @@ export class SpcChartPage extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 
-  async fetchSpcChart(dataSetId: string, variable: string, startDate?: string, endDate?: string) {
+  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!, $startDate: String, $endDate: String, $variable: String) {
-          spcChart(dataSetId: $dataSetId, startDate: $startDate, endDate: $endDate, variable: $variable) {
+        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
             }
-            analysisResults {
+            variable
+            charts {
               chartType
-              variables {
-                name
-                stats {
-                  mean
-                  UCL
-                  LCL
-                  CL
-                  range
-                  proportion
-                  nonconforming
-                  count
-                  defectsPerUnit
-                  individualValue
-                  movingRange
-                }
-                samples {
-                  sampleId
-                  value
-                }
-                bins {
-                  binRange
-                  count
-                }
-                categories {
-                  category
-                  count
-                }
+              controlLimits {
+                ucl
+                lcl
+                cl
+              }
+              specLimits {
+                usl
+                lsl
+                target
+              }
+              plots {
+                x
+                values
+                xbar
+                r
+                i
+                mr
+                n
+                defects
               }
             }
           }
@@ -107,12 +285,38 @@ export class SpcChartPage extends connect(store)(localize(i18next)(PageView)) {
       `,
       variables: {
         dataSetId,
-        startDate,
-        endDate,
-        variable
+        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/dist-client/pages/spc-chart-page.d.ts

@@ -1,7 +1,13 @@
-import '@operato/spc/ox-chart-xbar.js';
-import '@operato/spc/ox-chart-r.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 { PageView } from '@operato/shell';
 import { PropertyValues } from 'lit';
+import { FilterValue, OxFiltersFormBase } from '@operato/form';
 declare const SpcChartPage_base: (new (...args: any[]) => {
     _storeUnsubscribe: import("redux").Unsubscribe;
     connectedCallback(): void;
@@ -13,7 +19,15 @@ export declare class SpcChartPage extends SpcChartPage_base {
     static styles: import("lit").CSSResult[];
     dataSetId?: string;
     variable?: string;
+    chartType?: string;
     spcChart: any;
+    filtersValue?: FilterValue[];
+    variables: {
+        display: string;
+        value: string;
+    }[];
+    formBase: OxFiltersFormBase;
+    private get filtersConfig();
     get context(): {
         title: string;
         help: string;
@@ -21,6 +35,10 @@ export declare class SpcChartPage extends SpcChartPage_base {
     render(): import("lit-html").TemplateResult<1>;
     updated(changes: PropertyValues<this>): void;
     pageUpdated(changes: any, lifecycle: any): Promise<void>;
-    fetchSpcChart(dataSetId: string, variable: string, startDate?: string, endDate?: string): Promise<void>;
+    fetchSpcChart(): Promise<void>;
+    fetchVariables(id: string): Promise<{
+        display: string;
+        value: string;
+    }[]>;
 }
 export {};