@things-factory/dataset 5.0.0-alpha.40 → 5.0.0-alpha.43

package/README.md

@@ -1,13 +1,9 @@
 # dataset
-## partition keys
+## Architecture for data-samples
+![Architecture for data-samples](./assets/data-samples.jpg)
+## Partition Keys
 At the early stage, partition keys are desinged for dynamic partitioning for Athena. But It will be required so many AWS Glue crawlers also by each 'data-sets'.
-Now partition keys are fixed with some cases. Default is daily dataset, which has S3 Key like 'domain={domain}/datasetid={datasetid}/year=2022/month=3/day=25'. It will be set default with empty value in 'data-sets'.
 
-In another case, it is necessary to divide by hours or minutes and store them. This datetime item must be included in the S3 key. It will be required a new Glue Crawler and a Glue Catalog Table. For example if you need to separate directory hourly, you should add "%H" for 'hour' to partition_keys for this. and also should add a new crawler. And it would be needed a column to know it is daily or hourly or minutely for reporting client side. It's not developed yet.
-Look at the below picture for understanding.
-
-![Architecture for partitioning](./assets/data-samples.jpg)
-
-These tasks are related for S3 request limitations. 
+Partition keys are related for S3 request limitations. 
 > __3,500 PUT/COPY/POST/DELETE or 5,500 GET/HEAD requests per second per prefix in a bucket__
 - https://docs.aws.amazon.com/AmazonS3/latest/userguide/optimizing-performance.html

package/client/pages/data-ooc/data-ooc-list-page.js

@@ -9,20 +9,22 @@ import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { PageView, store } from '@operato/shell'
-import { ScrollbarStyles } from '@operato/styles'
+import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 
 export class DataOocListPage extends connect(store)(localize(i18next)(PageView)) {
   static get properties() {
     return {
       active: String,
-      gristConfig: Object
+      gristConfig: Object,
+      mode: String
     }
   }
 
   static get styles() {
     return [
       ScrollbarStyles,
+      CommonGristStyles,
       css`
         :host {
           display: flex;
@@ -35,18 +37,6 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
           overflow-y: auto;
           flex: 1;
         }
-
-        #filters {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-
-          background-color: white;
-        }
-
-        #filters > * {
-          padding: var(--padding-default) var(--padding-wide);
-        }
       `
     ]
   }
@@ -70,14 +60,42 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
   }
 
   render() {
+    const mode = this.mode || (isMobileDevice() ? 'LIST' : 'GRID')
+
     return html`
       <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .mode=${mode}
         .config=${this.gristConfig}
         .fetchHandler=${this.fetchHandler.bind(this)}
+        url-params-sensitive
       >
-        <div slot="headroom" id="filters">
-          <ox-filters-form></ox-filters-form>
+        <div slot="headroom">
+          <div id="filters">
+            <ox-filters-form></ox-filters-form>
+          </div>
+
+          <div id="sorters">
+            Sort
+            <mwc-icon
+              @click=${e => {
+                const target = e.currentTarget
+                this.renderRoot.querySelector('#sorter-control').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>
     `
@@ -87,30 +105,7 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
     return this.renderRoot.querySelector('ox-grist')
   }
 
-  // update with url params value
-  _updateSearchConfig(lifecycle) {
-    // this.searchConfig = this.searchConfig.map(conf => {
-    // if (conf.name in lifecycle.params) {
-    //   conf.value = lifecycle.params[conf.name]
-    // } else {
-    //   delete conf.value
-    // }
-    // return conf
-    // })
-  }
-
-  // set default field value to record with searchConfig
-  _setDefaultFieldsValue(fields) {
-    // this.searchConfig.forEach(conf => {
-    //   if (!fields[conf.name] && conf.value) {
-    //     fields[conf.name] = conf.value
-    //   }
-    // })
-  }
-
   async pageInitialized(lifecycle) {
-    this._updateSearchConfig(lifecycle)
-
     this.gristConfig = {
       list: {
         fields: ['dataSet', 'data', 'spec', 'correctiveAction', 'corrector', 'correctedAt', 'collectedAt', 'creator']
@@ -321,15 +316,15 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
     this.grist.fetch()
   }
 
-  async pageUpdated(changes, lifecycle) {
-    if (this.active) {
-      // update with url params value
-      this._updateSearchConfig(lifecycle)
-      await this.updateComplete
+  // async pageUpdated(changes, lifecycle) {
+  //   if (this.active) {
+  //     // update with url params value
+  //     this._updateSearchConfig(lifecycle)
+  //     await this.updateComplete
 
-      this.grist.fetch()
-    }
-  }
+  //     this.grist.fetch()
+  //   }
+  // }
 
   async fetchHandler({ page, limit, sortings = [], filters = [] }) {
     const response = await client.query({

package/client/pages/data-report/data-report-embed-page.js

@@ -0,0 +1,113 @@
+import { css, html } from 'lit'
+import '@operato/data-grist'
+import '@things-factory/form-ui'
+
+import { i18next, localize } from '@operato/i18n'
+import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
+import { PageView } from '@things-factory/shell'
+import { getCookie, encodeFormParams } from '@things-factory/utils'
+
+class DataReportEmbedPage extends localize(i18next)(PageView) {
+  static get properties() {
+    return {
+      _grnNo: String,
+      _status: String,
+      resourceId: String,
+      params: Object
+    }
+  }
+
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          padding: 0;
+        }
+
+        #container {
+          flex: 1;
+          padding: 0;
+          margin: 0;
+          border: 0;
+        }
+      `
+    ]
+  }
+
+  get context() {
+    const filters = [
+      {
+        name: 'workDateRange',
+        type: 'date',
+        label: 'date',
+        operator: 'between'
+      }
+    ]
+    var actions = [
+      {
+        title: i18next.t('button.print'),
+        action: () => {
+          this.renderRoot.querySelector('iframe').contentWindow.print()
+        },
+        ...CommonButtonStyles.print
+      }
+    ]
+    return {
+      title: 'jasper-report',
+      actions,
+      filters
+    }
+  }
+  render() {
+    return html`
+      <ox-filters-form-base
+        .filters=${this.context.filters}
+        @filters-change=${e => {
+          console.log('filters changed', e.detail)
+          this._reportTemplate(e.detail.filters)
+        }}
+        url-params-sensitive
+      ></ox-filters-form-base>
+      <iframe id="container" frameborder="0" style="border:0"></iframe>
+    `
+  }
+
+  async pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.updateContext()
+    }
+  }
+
+  async _reportTemplate(filters) {
+
+    // convert filters array to object
+    const params = filters.reduce((acc,curr) => (acc[curr.name] = curr.value, acc), {})
+    Object.assign(params, this.lifecycle.params)
+
+    const { workDateRange, workShift, reportView } = params
+
+    /** ignoring date conditions  */
+    if (!workDateRange[0] || !workDateRange[1] || (workDateRange[0] > workDateRange[1])) {
+      return
+    }
+    
+    /** urlencoded params including test values */
+    const urlParams = {
+      table: 'samples',
+      dataSetId: this.lifecycle.resourceId,
+      fromWorkDate: workDateRange[0],
+      toWorkDate: workDateRange[1],
+      token: getCookie('access_token'),
+      workShift
+    }
+    
+    const encodedUrlParams = encodeFormParams(urlParams)
+
+    this.shadowRoot.querySelector('#container').src = `${reportView}?params=${encodedUrlParams}`
+  }
+}
+
+window.customElements.define('data-report-embed-page', DataReportEmbedPage)

package/client/pages/data-report/data-report-list-page.js

@@ -25,7 +25,7 @@ const USECASE_OPTIONS = () => {
 }
 
 const showMonitorView = (columns, data, column, record, rowIndex) => {
-  const { name, monitorType, monitorView } = record
+  const { id, name, monitorType, monitorView } = record
   const title = `${name} - ${i18next.t('title.data-monitor-view')}`
 
   switch (monitorType) {
@@ -73,7 +73,7 @@ const showMonitorView = (columns, data, column, record, rowIndex) => {
 }
 
 const showReportView = (columns, data, column, record, rowIndex) => {
-  const { name, reportType, reportView } = record
+  const { id, name, reportType, reportView, reportTemplate } = record
   const title = `${name} - ${i18next.t('title.data-report-view')}`
 
   switch (reportType) {
@@ -85,21 +85,22 @@ const showReportView = (columns, data, column, record, rowIndex) => {
       })
       break
 
-    case 'custom':
+    case 'embed':
       const board = {
         id: reportView
       }
-      openPopup(html` <div style="background-color: white;">Under construction</div> `, {
-        closable: true,
-        backdrop: true,
-        size: 'large',
-        title
-      })
+      navigate(`/data-report-embed/${id}?reportView=${encodeURIComponent(reportView)}`)
+      // openPopup(html` <div style="background-color: white;">Under construction</div> `, {
+      //   closable: true,
+      //   backdrop: true,
+      //   size: 'large',
+      //   title
+      // })
 
       break
 
     case 'page':
-      navigate(reportView)
+      navigate(reportView + `/${id}?template=${encodeURIComponent(reportTemplate)}`)
       break
 
     case 'external':
@@ -421,6 +422,7 @@ export class DataReportListPage extends connect(store)(localize(i18next)(PageVie
               }
               reportType
               reportView
+              reportTemplate
               updater {
                 id
                 name

package/client/pages/data-report/jasper-report-oocs-page.js

@@ -0,0 +1,120 @@
+import { css, html } from 'lit'
+import '@operato/data-grist'
+import '@operato/form'
+
+import { i18next, localize } from '@operato/i18n'
+import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
+import { PageView } from '@things-factory/shell'
+
+class JasperReportOocsPage extends localize(i18next)(PageView) {
+  static get properties() {
+    return {
+      _grnNo: String,
+      _status: String,
+      resourceId: String,
+      params: Object
+    }
+  }
+
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          padding: 0;
+        }
+
+        #container {
+          flex: 1;
+          padding: 0;
+          margin: 0;
+          border: 0;
+        }
+      `
+    ]
+  }
+
+  get context() {
+    const filters = [
+      {
+        name: 'workDateRange',
+        type: 'date',
+        label: 'date',
+        operator: 'between'
+      }
+    ]
+    var actions = [
+      {
+        title: i18next.t('button.print'),
+        action: () => {
+          this.renderRoot.querySelector('iframe').contentWindow.print()
+        },
+        ...CommonButtonStyles.print
+      }
+    ]
+    return {
+      title: 'jasper-report',
+      actions,
+      filters
+    }
+  }
+
+  render() {
+    return html`
+      <ox-filters-form-base
+        .filters=${this.context.filters}
+        @filters-change=${e => {
+          console.log('filters changed', e.detail)
+          this._reportTemplate(e.detail.filters)
+        }}
+        url-params-sensitive
+      ></ox-filters-form-base>
+      <iframe id="container"></iframe>
+    `
+  }
+
+  get searchForm() {
+    return this.renderRoot.querySelector('ox-filters-form-base')
+  }
+  async pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.updateContext()
+    }
+  }
+
+  async _reportTemplate(filters) {
+    const params = filters.reduce((acc,curr) => (acc[curr.name] = curr.value, acc), {})
+    Object.assign(params, this.lifecycle.params)
+
+    const { workDateRange, workShift, template } = params
+
+    /** ignoring date conditions  */
+    if (!workDateRange[0] || !workDateRange[1] || (workDateRange[0] > workDateRange[1])) {
+      return
+    }
+    
+    /** urlencoded params including test values */
+    const urlParams = {
+      table: 'ooc',
+      dataSetId: this.lifecycle.resourceId,
+      fromWorkDate: workDateRange[0],
+      toWorkDate: workDateRange[1],
+      workShift,
+      template,
+      templateType: 'normal'
+    }
+    
+    const encodedUrlParams = Object.keys(urlParams).filter(key => {
+      // ignore empty
+      return !!urlParams[key]
+    }).map(key =>
+      `${key}=${encodeURIComponent(urlParams[key])}`
+    ).join('&')
+
+    this.shadowRoot.querySelector('#container').src = `/data-report/jasper?${encodedUrlParams}`
+  }
+}
+
+window.customElements.define('jasper-report-oocs-page', JasperReportOocsPage)

package/client/pages/data-report/jasper-report-samples-crosstab-page.js

@@ -0,0 +1,120 @@
+import { css, html } from 'lit'
+import '@operato/data-grist'
+import '@operato/form'
+
+import { i18next, localize } from '@operato/i18n'
+import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
+import { PageView } from '@things-factory/shell'
+
+class JasperReportSamplesCrosstabPage extends localize(i18next)(PageView) {
+  static get properties() {
+    return {
+      _grnNo: String,
+      _status: String,
+      resourceId: String,
+      params: Object
+    }
+  }
+
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          padding: 0;
+        }
+
+        #container {
+          flex: 1;
+          padding: 0;
+          margin: 0;
+          border: 0;
+        }
+      `
+    ]
+  }
+
+  get context() {
+    const filters = [
+      {
+        name: 'workDateRange',
+        type: 'date',
+        label: 'date',
+        operator: 'between'
+      }
+    ]
+    var actions = [
+      {
+        title: i18next.t('button.print'),
+        action: () => {
+          this.renderRoot.querySelector('iframe').contentWindow.print()
+        },
+        ...CommonButtonStyles.print
+      }
+    ]
+    return {
+      title: 'jasper-report',
+      actions,
+      filters
+    }
+  }
+
+  render() {
+    return html`
+      <ox-filters-form-base
+        .filters=${this.context.filters}
+        @filters-change=${e => {
+          console.log('filters changed', e.detail)
+          this._reportTemplate(e.detail.filters)
+        }}
+        url-params-sensitive
+      ></ox-filters-form-base>
+      <iframe id="container"></iframe>
+    `
+  }
+
+  get searchForm() {
+    return this.renderRoot.querySelector('ox-filters-form-base')
+  }
+  async pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.updateContext()
+    }
+  }
+
+  async _reportTemplate(filters) {
+    const params = filters.reduce((acc,curr) => (acc[curr.name] = curr.value, acc), {})
+    Object.assign(params, this.lifecycle.params)
+
+    const { workDateRange, workShift, template } = params
+
+    /** ignoring date conditions  */
+    if (!workDateRange[0] || !workDateRange[1] || (workDateRange[0] > workDateRange[1])) {
+      return
+    }
+    
+    /** urlencoded params including test values */
+    const urlParams = {
+      table: 'samples',
+      dataSetId: this.lifecycle.resourceId,
+      fromWorkDate: workDateRange[0],
+      toWorkDate: workDateRange[1],
+      workShift,
+      template,
+      templateType: 'crosstab'
+    }
+    
+    const encodedUrlParams = Object.keys(urlParams).filter(key => {
+      // ignore empty
+      return !!urlParams[key]
+    }).map(key =>
+      `${key}=${encodeURIComponent(urlParams[key])}`
+    ).join('&')
+
+    this.shadowRoot.querySelector('#container').src = `/data-report/jasper?${encodedUrlParams}`
+  }
+}
+
+window.customElements.define('jasper-report-samples-crosstab-page', JasperReportSamplesCrosstabPage)

package/client/pages/data-report/jasper-report-samples-page.js

@@ -0,0 +1,120 @@
+import { css, html } from 'lit'
+import '@operato/data-grist'
+import '@operato/form'
+
+import { i18next, localize } from '@operato/i18n'
+import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
+import { PageView } from '@things-factory/shell'
+
+class JasperReportSamplesPage extends localize(i18next)(PageView) {
+  static get properties() {
+    return {
+      _grnNo: String,
+      _status: String,
+      resourceId: String,
+      params: Object
+    }
+  }
+
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          padding: 0;
+        }
+
+        #container {
+          flex: 1;
+          padding: 0;
+          margin: 0;
+          border: 0;
+        }
+      `
+    ]
+  }
+
+  get context() {
+    const filters = [
+      {
+        name: 'workDateRange',
+        type: 'date',
+        label: 'date',
+        operator: 'between'
+      }
+    ]
+    var actions = [
+      {
+        title: i18next.t('button.print'),
+        action: () => {
+          this.renderRoot.querySelector('iframe').contentWindow.print()
+        },
+        ...CommonButtonStyles.print
+      }
+    ]
+    return {
+      title: 'jasper-report',
+      actions,
+      filters
+    }
+  }
+
+  render() {
+    return html`
+      <ox-filters-form-base
+        .filters=${this.context.filters}
+        @filters-change=${e => {
+          console.log('filters changed', e.detail)
+          this._reportTemplate(e.detail.filters)
+        }}
+        url-params-sensitive
+      ></ox-filters-form-base>
+      <iframe id="container"></iframe>
+    `
+  }
+
+  get searchForm() {
+    return this.renderRoot.querySelector('ox-filters-form-base')
+  }
+  async pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.updateContext()
+    }
+  }
+
+  async _reportTemplate(filters) {
+    const params = filters.reduce((acc,curr) => (acc[curr.name] = curr.value, acc), {})
+    Object.assign(params, this.lifecycle.params)
+
+    const { workDateRange, workShift, template } = params
+
+    /** ignoring date conditions  */
+    if (!workDateRange[0] || !workDateRange[1] || (workDateRange[0] > workDateRange[1])) {
+      return
+    }
+    
+    /** urlencoded params including test values */
+    const urlParams = {
+      table: 'samples',
+      dataSetId: this.lifecycle.resourceId,
+      fromWorkDate: workDateRange[0],
+      toWorkDate: workDateRange[1],
+      workShift,
+      template,
+      templateType: 'normal'
+    }
+    
+    const encodedUrlParams = Object.keys(urlParams).filter(key => {
+      // ignore empty
+      return !!urlParams[key]
+    }).map(key =>
+      `${key}=${encodeURIComponent(urlParams[key])}`
+    ).join('&')
+
+    this.shadowRoot.querySelector('#container').src = `/data-report/jasper?${encodedUrlParams}`
+  }
+}
+
+window.customElements.define('jasper-report-samples-page', JasperReportSamplesPage)