@things-factory/spc 7.0.0-alpha.18

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
+and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+<!-- ## [Unreleased] -->

package/client/bootstrap.ts

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

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

@@ -0,0 +1,322 @@
+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(--padding-default);
+      }
+    `
+  ]
+
+  @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"><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('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": ["./**/*"]
+}

package/dist-client/bootstrap.d.ts

@@ -0,0 +1 @@
+export default function bootstrap(): void;

package/dist-client/bootstrap.js

@@ -0,0 +1,2 @@
+export default function bootstrap() { }
+//# sourceMappingURL=bootstrap.js.map

package/dist-client/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,SAAS,KAAI,CAAC","sourcesContent":["export default function bootstrap() {}\n"]}

package/dist-client/index.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.js.map

package/dist-client/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"","sourcesContent":[""]}

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

@@ -0,0 +1,44 @@
+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;
+    disconnectedCallback(): void;
+    stateChanged(_state: unknown): void;
+    readonly isConnected: boolean;
+}) & (new (...args: any[]) => import("lit").LitElement) & typeof PageView;
+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;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changes: PropertyValues<this>): void;
+    pageUpdated(changes: any, lifecycle: any): Promise<void>;
+    fetchSpcChart(): Promise<void>;
+    fetchVariables(id: string): Promise<{
+        display: string;
+        value: string;
+    }[]>;
+}
+export {};