@things-factory/dataset 6.0.81 → 6.0.83

package/client/pages/data-summary/data-summary-period-page.ts

@@ -0,0 +1,436 @@
+import '@operato/input/ox-input-select-buttons.js'
+import '@operato/data-grist'
+import './data-summary-view.js'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin'
+
+import {
+  getEditor,
+  getRenderer,
+  ColumnConfig,
+  DataGrist,
+  FetchOption,
+  SortersControl,
+  GristRecord
+} from '@operato/data-grist'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { openPopup } from '@operato/layout'
+import { PageView, store } from '@operato/shell'
+import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
+import { OxPopup } from '@operato/popup'
+import { DataItem } from '@operato/dataset'
+
+enum DataSetSummaryGroupType {
+  Today = 'today',
+  ThisMonth = 'this month',
+  ThirtyDays = '30 days',
+  ThisYear = 'this year',
+  TwelveMonths = '12 months'
+}
+
+@customElement('data-summary-period-page')
+export class DataSummaryGroupPage extends connect(store)(localize(i18next)(PageView)) {
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        overflow: hidden;
+      }
+
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+    `
+  ]
+
+  @state() dataSetId?: string
+  @state() period?: string = DataSetSummaryGroupType.ThisMonth
+
+  @state() dataSet: any
+  @state() dataKeySet: any
+  @state() dataItems?: DataItem[]
+
+  @state() filters: string[] = ['this month']
+
+  @state() gristConfig: any
+  @state() mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
+
+  @query('ox-grist') private grist!: DataGrist
+  @query('#sorter-control') private sortersControl!: OxPopup
+
+  get context() {
+    return {
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        placeholder: i18next.t('title.data-summary period'),
+        value: this.grist.searchText
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
+      help: 'dataset/data-summary-period',
+      actions: [],
+      exportable: {
+        name: i18next.t('title.data-summary period'),
+        data: this._exportableData.bind(this)
+      }
+    }
+  }
+
+  render() {
+    const mode = this.mode || (isMobileDevice() ? 'LIST' : 'GRID')
+
+    return html`
+      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom">
+          <div id="filters">
+            <ox-input-select-buttons
+              .value=${this.period}
+              .options=${[
+                {
+                  display: '이번달',
+                  value: 'this month'
+                },
+                {
+                  display: '최근 30일',
+                  value: '30 days'
+                },
+                {
+                  display: '올해',
+                  value: 'this year'
+                },
+                {
+                  display: '최근 12개월',
+                  value: '12 months'
+                },
+                {
+                  display: '오늘',
+                  value: 'toay'
+                }
+              ]}
+              @change=${(e: CustomEvent) => {
+                this.period = (e.currentTarget as any)?.value
+                this.grist.fetch()
+              }}
+            ></ox-input-select-buttons>
+          </div>
+
+          <div id="sorters">
+            Sort
+            <mwc-icon
+              @click=${e => {
+                const target = e.currentTarget
+                this.sortersControl.open({
+                  right: 0,
+                  top: target.offsetTop + target.offsetHeight
+                })
+              }}
+              >expand_more</mwc-icon
+            >
+            <ox-popup id="sorter-control">
+              <ox-sorters-control> </ox-sorters-control>
+            </ox-popup>
+          </div>
+
+          <div id="modes">
+            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+          </div>
+        </div>
+      </ox-grist>
+    `
+  }
+
+  pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.dataSetId = lifecycle.resourceId
+      return
+    }
+  }
+
+  async updated(changes) {
+    if (changes.has('dataSetId')) {
+      const response = await client.query({
+        query: gql`
+          query ($id: String!) {
+            dataSet(id: $id) {
+              id
+              name
+              summaryPeriod
+              dataItems {
+                name
+                description
+                active
+                hidden
+                tag
+                type
+                unit
+                options
+                quota
+                spec
+                stat
+              }
+              dataKeySet {
+                id
+                name
+                description
+                dataKeyItems {
+                  name
+                  description
+                  dataKey
+                  tKey
+                }
+              }
+            }
+          }
+        `,
+        variables: {
+          id: this.dataSetId
+        }
+      })
+
+      this.dataSet = response.data?.dataSet
+      this.dataKeySet = this.dataSet?.dataKeySet || {}
+      this.dataItems = this.dataSet?.dataItems || []
+
+      this.refreshGristConfig()
+
+      this.grist.fetch()
+    }
+  }
+
+  getKeyColumns() {
+    return (
+      this.dataKeySet?.dataKeyItems.map((item, index) => {
+        return {
+          type: 'string',
+          name: `key0${index + 1}`,
+          header: i18next.t(item.tKey),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          filter: 'i_like',
+          width: 120,
+          imex: true
+        }
+      }) || []
+    )
+  }
+
+  getDataColumns() {
+    return (
+      this.dataItems
+        ?.filter(dataItem => dataItem.active && dataItem.stat)
+        .map((item, index) => {
+          return {
+            type: 'number',
+            name: `data0${index + 1}`,
+            header: i18next.t(item.name),
+            record: {
+              editable: false
+            },
+            width: 120,
+            imex: true
+          }
+        }) || []
+    )
+  }
+
+  refreshGristConfig() {
+    this.gristConfig = {
+      list: { fields: ['dataSet', 'data', 'updater', 'updatedAt'] },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'assignment',
+          title: i18next.t('title.open data summary view'),
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              openPopup(
+                html`
+                  <data-summary-view data-summary-id=${record.id} style="background-color: white;"></data-summary-view>
+                `,
+                {
+                  backdrop: true,
+                  size: 'large',
+                  title: i18next.t('title.data-summary view')
+                }
+              )
+            }
+          }
+        },
+        {
+          type: 'string',
+          name: 'month',
+          header: i18next.t('field.month'),
+          sortable: true,
+          width: 80,
+          imex: true
+        },
+        {
+          type: 'string',
+          name: 'date',
+          header: i18next.t('field.date'),
+          sortable: true,
+          width: 80,
+          imex: true
+        },
+        ...this.getKeyColumns(),
+        ...this.getDataColumns(),
+        {
+          type: 'number',
+          name: 'count',
+          header: i18next.t('field.count'),
+          record: {
+            editable: false
+          },
+          width: 30
+        },
+        {
+          type: 'number',
+          name: 'countOoc',
+          header: i18next.t('field.count-ooc'),
+          record: {
+            editable: false
+          },
+          width: 30
+        },
+        {
+          type: 'number',
+          name: 'countOos',
+          header: i18next.t('field.count-oos'),
+          record: {
+            editable: false
+          },
+          width: 30
+        }
+      ].filter(Boolean),
+      rows: {
+        appendable: false,
+        selectable: {
+          multiple: true
+        }
+      },
+      sorters: [
+        {
+          name: 'date',
+          desc: true
+        }
+      ]
+    }
+  }
+
+  async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {
+    if (!this.dataSetId) {
+      return { records: [], total: 0 }
+    }
+
+    const response = await client.query({
+      query: gql`
+        query (
+          $dataSetName: String!
+          $period: String!
+          $filters: [Filter!]
+          $pagination: Pagination
+          $sortings: [Sorting!]
+        ) {
+          dataSummaryByPeriod(
+            dataSetName: $dataSetName
+            period: $period
+            filters: $filters
+            pagination: $pagination
+            sortings: $sortings
+          ) {
+            name
+            description
+            month
+            date
+            period
+            key01
+            key02
+            key03
+            key04
+            key05
+            data01
+            data02
+            data03
+            data04
+            data05
+            count
+            countOoc
+            countOos
+          }
+        }
+      `,
+      variables: {
+        dataSetName: this.dataSet.name,
+        period: this.period,
+        filters,
+        pagination: { page, limit },
+        sortings
+      }
+    })
+
+    return {
+      records: response.data.dataSummaryByPeriod || []
+    }
+  }
+
+  _exportableData() {
+    let records = [] as GristRecord[]
+    if (this.grist.selected && this.grist.selected.length > 0) {
+      records = this.grist.selected
+    } else {
+      records = this.grist.data.records
+    }
+
+    var headerSetting = this.grist.compiledConfig.columns
+      .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
+      .map(column => {
+        return column.imex === true
+          ? {
+              header: column.header.renderer(column),
+              key: column.name,
+              width: column.width,
+              type: column.type
+            }
+          : column.imex
+      })
+
+    var data = records.map(item => {
+      return {
+        id: item.id,
+        ...this.gristConfig.columns
+          .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
+          .reduce((record, column) => {
+            const key = column.imex === true ? column.name : column.imex.key
+            record[key] = key
+              .split('.')
+              .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
+            return record
+          }, {})
+      }
+    })
+
+    return { header: headerSetting, data: data }
+  }
+}

package/client/pages/data-summary/data-summary-search-page.ts

@@ -330,18 +330,6 @@ export class DataSummarySearchPage extends connect(store)(localize(i18next)(Page
         appendable: false,
         selectable: {
           multiple: true
-        },
-        classifier: function (record, rowIndex) {
-          var emphasized
-          if (record['oos']) {
-            emphasized = ['red']
-          } else if (record['ooc']) {
-            emphasized = 'orange'
-          }
-
-          return {
-            emphasized
-          }
         }
       },
       sorters: [

package/client/route.ts

@@ -24,6 +24,10 @@ export default function route(page) {
       import('./pages/data-summary/data-summary-search-page.js')
       return page
 
+    case 'data-summary-period':
+      import('./pages/data-summary/data-summary-period-page.js')
+      return page
+
     case 'data-report-samples':
       import('./pages/data-report/data-report-samples-page.js')
       return page

package/dist-client/pages/data-summary/data-summary-group-page.d.ts

@@ -0,0 +1,82 @@
+import '@operato/input/ox-input-select-buttons.js';
+import '@operato/data-grist';
+import './data-summary-view.js';
+import { FetchOption } from '@operato/data-grist';
+import { PageView } from '@operato/shell';
+import { DataItem } from '@operato/dataset';
+declare const DataSummaryGroupPage_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 DataSummaryGroupPage extends DataSummaryGroupPage_base {
+    static styles: import("lit").CSSResult[];
+    dataSetId?: string;
+    period?: string;
+    dataSet: any;
+    dataKeySet: any;
+    dataItems?: DataItem[];
+    filters: string[];
+    gristConfig: any;
+    mode: 'CARD' | 'GRID' | 'LIST';
+    private grist;
+    private sortersControl;
+    get context(): {
+        search: {
+            handler: (search: string) => void;
+            placeholder: string;
+            value: string;
+        };
+        filter: {
+            handler: () => void;
+        };
+        help: string;
+        actions: never[];
+        exportable: {
+            name: string;
+            data: () => {
+                header: (false | {
+                    header: any;
+                    key: string;
+                    width: string | number | import("@operato/data-grist").ColumnWidthCallback | undefined;
+                    type: string;
+                } | undefined)[];
+                data: any[];
+            };
+        };
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    pageUpdated(changes: any, lifecycle: any): void;
+    updated(changes: any): Promise<void>;
+    getKeyColumns(): any;
+    getDataColumns(): {
+        type: string;
+        name: string;
+        header: string;
+        record: {
+            editable: boolean;
+        };
+        width: number;
+        imex: boolean;
+    }[];
+    refreshGristConfig(): void;
+    fetchHandler({ page, limit, sortings, filters }: FetchOption): Promise<{
+        records: never[];
+        total: number;
+    } | {
+        records: any;
+        total?: undefined;
+    }>;
+    _exportableData(): {
+        header: (false | {
+            header: any;
+            key: string;
+            width: string | number | import("@operato/data-grist").ColumnWidthCallback | undefined;
+            type: string;
+        } | undefined)[];
+        data: any[];
+    };
+}
+export {};