@things-factory/dataset 8.0.0-beta.9 → 8.0.2

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

@@ -0,0 +1,454 @@
+import '@material/web/icon/icon.js'
+import '@operato/data-grist'
+import '@operato/context/ox-context-page-toolbar.js'
+import '@operato/board/ox-board-viewer.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 { getRenderer, DataGrist, FetchOption } from '@operato/data-grist'
+import { OxDataUseCase } from '@operato/dataset'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { openPopup } from '@operato/layout'
+import { navigate, PageView, store } from '@operato/shell'
+import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
+import { encodeUrlParams } from '@operato/utils'
+
+import { provider } from '@things-factory/board-ui/dist-client'
+
+const USECASE_OPTIONS = () => {
+  return ['', ...OxDataUseCase.getUseCaseNames()].map(name => {
+    return {
+      display: name,
+      value: name
+    }
+  })
+}
+
+const showMonitorView = (columns, data, column, record, rowIndex) => {
+  const { id, name, monitorType, monitorView } = record
+  const title = `${name} - ${i18next.t('title.data-monitor-view')}`
+
+  switch (monitorType) {
+    case 'generated':
+      openPopup(html` <div style="background-color: white;">Under construction</div> `, {
+        backdrop: true,
+        size: 'large',
+        title
+      })
+      break
+
+    case 'board':
+      const board = {
+        id: monitorView
+      }
+      openPopup(
+        html`
+          <ox-board-viewer
+            style="background-color: white;"
+            .board=${board}
+            .provider=${provider}
+            hide-fullscreen
+            hide-navigation
+          ></ox-board-viewer>
+        `,
+        {
+          closable: true,
+          backdrop: true,
+          size: 'large',
+          title
+        }
+      )
+
+      // navigate(`board-viewer/${monitorView}?interactive=true&title=${title}`)
+      break
+
+    case 'custom-element':
+      break
+
+    case 'page':
+      navigate(monitorView)
+      break
+
+    case 'external':
+      window.open(monitorView, '_blank')
+      break
+  }
+}
+
+const showReportView = (columns, data, column, record, rowIndex) => {
+  const { id: datasetId, dataKeySet, name, reportType, reportView, reportTemplate } = record
+  const { id: dataKeySetId } = dataKeySet || { id: '' }
+  const title = `${name} - ${i18next.t('title.data-report-view')}`
+
+  switch (reportType) {
+    case 'generated':
+      openPopup(html` <div style="background-color: white;">Under construction</div> `, {
+        backdrop: true,
+        size: 'large',
+        title
+      })
+      break
+
+    case 'embed':
+      break
+
+    case 'custom-element':
+      break
+
+    case 'page':
+      break
+
+    case 'external':
+      window.open(reportView, '_blank')
+      break
+
+    case 'jasper':
+    case 'shiny':
+      const encodedUrlParams = encodeUrlParams({ datasetId, dataKeySetId, reportType, reportView, reportTemplate })
+      navigate(`/data-report-samples/?${encodedUrlParams}`)
+      break
+
+    default:
+      break
+  }
+}
+
+@customElement('data-report-list-page')
+export class DataReportListPage extends connect(store)(localize(i18next)(PageView)) {
+  static styles = [
+    ScrollbarStyles,
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+
+        width: 100%;
+
+        --grid-record-emphasized-background-color: #8b0000;
+        --grid-record-emphasized-color: #ff6b6b;
+      }
+
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+
+      .header {
+        grid-template-areas: 'filters actions';
+      }
+    `
+  ]
+
+  @state() gristConfig: any
+  @state() mode: 'CARD' | 'GRID' | 'LIST' = 'CARD'
+
+  @query('ox-grist') private grist!: DataGrist
+
+  get context() {
+    return {
+      title: i18next.t('title.data-report list'),
+      help: 'dataset/data-report-list',
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        value: this.grist?.searchText || ''
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
+      toolbar: false
+    }
+  }
+
+  render() {
+    const mode = 'CARD'
+
+    return html`
+      <ox-grist
+        .mode=${mode}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        ?url-params-sensitive=${this.active}
+      >
+        <div slot="headroom" class="header">
+          <div class="filters">
+            <ox-filters-form class="filter" autofocus without-search></ox-filters-form>
+          </div>
+
+          <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
+        </div>
+      </ox-grist>
+    `
+  }
+
+  async pageInitialized(lifecycle) {
+    this.gristConfig = {
+      list: {
+        thumbnail: 'monitorView',
+        fields: ['name', 'description'],
+        details: ['schedule', 'type', 'useCase', 'latestCollectedAt', 'prevSchedule', 'nextSchedule']
+      },
+      columns: [
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'newspaper',
+          iconOnly: false,
+          title: i18next.t('button.view-report'),
+          width: 100,
+          handlers: {
+            click: showReportView
+          }
+        },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'analytics',
+          iconOnly: false,
+          title: i18next.t('button.view-monitor'),
+          width: 110,
+          handlers: {
+            click: showMonitorView
+          }
+        },
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('field.name'),
+          record: {
+            editable: false
+          },
+          filter: 'search',
+          sortable: true,
+          width: 150
+        },
+        {
+          type: 'string',
+          name: 'description',
+          header: i18next.t('field.description'),
+          record: {
+            editable: false
+          },
+          filter: 'search',
+          width: 200
+        },
+        {
+          type: 'select',
+          name: 'type',
+          label: true,
+          header: i18next.t('field.type'),
+          record: {
+            editable: false,
+            options: [
+              {},
+              {
+                display: i18next.t('text.manually collected'),
+                value: 'manual'
+              },
+              {
+                display: i18next.t('text.automatically collected'),
+                value: 'automatic'
+              }
+            ]
+          },
+          sortable: true,
+          filter: true,
+          width: 60
+        },
+        {
+          type: 'select',
+          name: 'useCase',
+          label: true,
+          header: i18next.t('field.use-case'),
+          record: {
+            editable: false,
+            options: USECASE_OPTIONS
+          },
+          sortable: true,
+          filter: {
+            operator: 'eq',
+            options: USECASE_OPTIONS /* in case select options type is a function, filter should have its own options */
+          },
+          width: 80
+        },
+        {
+          type: 'crontab',
+          name: 'schedule',
+          label: true,
+          header: i18next.t('field.schedule'),
+          record: {
+            editable: false
+          },
+          width: 80
+        },
+        {
+          type: 'resource-object',
+          name: 'entryRole',
+          header: i18next.t('field.entry-role'),
+          record: {
+            editable: false
+          },
+          width: 120
+        },
+        {
+          type: 'resource-object',
+          name: 'supervisoryRole',
+          header: i18next.t('field.supervisory-role'),
+          record: {
+            editable: false
+          },
+          width: 120
+        },
+        {
+          type: 'datetime',
+          name: 'latestCollectedAt',
+          label: true,
+          header: i18next.t('field.latest-collected-at'),
+          record: {
+            editable: false
+          },
+          width: 180
+        },
+        {
+          type: 'datetime',
+          name: 'prevSchedule',
+          label: true,
+          header: i18next.t('field.prev-schedule'),
+          record: {
+            editable: false
+          },
+          width: 180
+        },
+        {
+          type: 'datetime',
+          name: 'nextSchedule',
+          label: true,
+          header: i18next.t('field.next-schedule'),
+          record: {
+            editable: false
+          },
+          width: 180
+        },
+        {
+          type: 'string',
+          name: 'monitorView',
+          hidden: true,
+          record: {
+            editable: false,
+            renderer: function (value, column, record, rowIndex, field) {
+              const type = record.monitorType !== 'board' ? 'string' : 'image'
+
+              let renderedValue
+
+              if (record.monitorType === 'board' && record.entryBoard?.thumbnail) {
+                renderedValue = record.entryBoard.thumbnail
+              } else {
+                renderedValue = html`<md-icon style="--md-icon-size: 64px;">newsmode</md-icon>`
+              }
+
+              return getRenderer(type)(renderedValue, column, record, rowIndex, field)
+            }
+          }
+        }
+      ],
+      rows: {
+        appendable: false,
+        selectable: {
+          multiple: false
+        },
+        handlers: {
+          click: showReportView
+        },
+        classifier: function (record, rowIndex) {}
+      },
+      sorters: [
+        {
+          name: 'name'
+        }
+      ]
+    }
+  }
+
+  async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {
+    const response = await client.query({
+      query: gql`
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          responses: dataSetsForReport(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              dataKeySet {
+                id
+                name
+              }
+              name
+              description
+              partitionKeys
+              active
+              type
+              useCase
+              schedule
+              timezone
+              entryRole {
+                id
+                name
+              }
+              supervisoryRole {
+                id
+                name
+              }
+              monitorType
+              monitorView
+              monitorBoard {
+                thumbnail
+              }
+              reportType
+              reportView
+              reportTemplate
+              updater {
+                id
+                name
+              }
+              updatedAt
+              dataItems {
+                name
+                description
+                active
+                hidden
+                tag
+                group
+                type
+                unit
+                options
+                quota
+                spec
+                stat
+              }
+              latestCollectedAt
+              nextSchedule
+              prevSchedule
+              nextSummarySchedule
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        filters,
+        pagination: { page, limit },
+        sortings
+      }
+    })
+
+    return {
+      total: response.data.responses.total || 0,
+      records: response.data.responses.items || []
+    }
+  }
+}

package/client/pages/data-report/data-report-samples-page.ts

@@ -0,0 +1,174 @@
+/**
+ * data sample report page from 'data-key-set-list-page'
+ * dateKeySetId is required
+ */
+import '@operato/data-grist'
+
+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 moment from '@operato/moment-timezone-es'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { PageView, store } from '@operato/shell'
+import { ScrollbarStyles } from '@operato/styles'
+import { encodeUrlParams } from '@operato/utils'
+import { FetchOption } from '@operato/data-grist'
+
+@customElement('data-report-samples-page')
+export class DataReportSamplesPage extends connect(store)(localize(i18next)(PageView)) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+      }
+
+      #container {
+        flex: 1;
+        padding: 0;
+        margin: 0;
+        border: 0;
+      }
+    `
+  ]
+
+  @state() dataKeySetId?: string
+  @state() dataKeySet: any
+  @query('iframe') container!: HTMLIFrameElement
+
+  get context() {
+    const yesterday = moment().subtract(1, 'day').format('YYYY-MM-DD')
+    const today = moment().format('YYYY-MM-DD')
+
+    const filters = [
+      {
+        name: 'workDateRange',
+        type: 'date',
+        label: i18next.t('field.work-date'),
+        operator: 'between',
+        value: [yesterday, today]
+      },
+      ...this.getDataKeyFilters()
+    ]
+
+    return {
+      title: i18next.t('title.data-report samples'),
+      help: 'dataset/data-report-samples',
+      filters
+    }
+  }
+
+  getDataKeyFilters() {
+    return (
+      this.dataKeySet?.dataKeyItems.map((item, index) => {
+        return {
+          type: 'string',
+          name: `key_0${index + 1}`,
+          label: i18next.t(item.tKey),
+          operator: 'i_like',
+          width: 120
+        }
+      }) || []
+    )
+  }
+
+  render() {
+    // clear if pre-loaded
+    this.container.src = ''
+
+    return html`
+      <ox-filters-form-base
+        .filters=${this.context.filters}
+        @filters-change=${e => {
+          console.log('filters changed', e.detail)
+          this.renderTemplate(e.detail.filters)
+        }}
+        ?url-params-sensitive=${this.active}
+      ></ox-filters-form-base>
+
+      <iframe></iframe>
+    `
+  }
+
+  renderTemplate(filters) {
+    const params = filters.reduce((acc, curr) => ((acc[curr.name] = curr.value), acc), {})
+    Object.assign(params, this.lifecycle.params)
+
+    const filterNames = this.getDataKeyFilters().map(x => x.name)
+    const dataKeyFilters = filters.filter(x => filterNames.includes(x.name))
+    const { workDateRange } = params
+
+    /** ignoring date conditions  */
+    if (!workDateRange[0] || !workDateRange[1] || workDateRange[0] > workDateRange[1]) {
+      return
+    }
+
+    /** urlencoded params including test values */
+    const urlParams = {
+      reportType: params.reportType,
+      reportView: params.reportView,
+      reportTemplate: params.reportTemplate,
+      table: 'samples',
+      datasetId: params.datasetId,
+      dataKeySetId: params.dataKeySetId,
+      startDate: workDateRange[0],
+      endDate: workDateRange[1],
+      dataKeySetItems: JSON.stringify(this.dataKeySet?.dataKeyItems || []),
+      dataKeyFilters: JSON.stringify(dataKeyFilters)
+    }
+
+    const encodedUrlParams = encodeUrlParams(urlParams)
+
+    const reportUrl = `/data-report/${urlParams.reportType}/`
+    this.container.src = `${reportUrl}?${encodedUrlParams}`
+  }
+
+  pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      const { dataKeySetId } = lifecycle.params
+      this.dataKeySetId = dataKeySetId
+      return
+    }
+  }
+
+  async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {}
+
+  async updated(changes) {
+    if (changes.has('dataKeySetId')) {
+      if (!this.dataKeySetId) {
+        this.dataKeySet = null
+        return
+      }
+
+      const response = await client.query({
+        query: gql`
+          query ($id: String!) {
+            dataKeySet(id: $id) {
+              id
+              name
+              description
+              reportType
+              reportView
+              dataKeyItems {
+                name
+                description
+                dataKey
+                tKey
+              }
+            }
+          }
+        `,
+        variables: {
+          id: this.dataKeySetId
+        }
+      })
+
+      this.dataKeySet = response.data.dataKeySet
+    }
+  }
+}