@operato/scene-scichart 7.0.7 → 7.1.1

package/schema.graphql

@@ -1598,6 +1598,9 @@ type Mutation {
   """To create new ApprovalLine for current user"""
   createMyApprovalLine(approvalLine: NewApprovalLine!): ApprovalLine!
 
+  """To create my new PagePreference"""
+  createMyPagePreference(pagePreference: NewPagePreference!): PagePreference!
+
   """To create new Notification"""
   createNotification(notification: NewNotification!): Notification!
 
@@ -1639,6 +1642,9 @@ type Mutation {
 
   """To create new user"""
   createUser(user: NewUser!): User!
+
+  """To create new UserPreference"""
+  createUserPreference(preference: NewUserPreference!): UserPreference!
   deleteAppBinding(id: String!): Boolean!
 
   """To delete appliance"""
@@ -1779,6 +1785,12 @@ type Mutation {
   """To delete multiple ApprovalLines for current user"""
   deleteMyApprovalLines(ids: [String!]!): Boolean!
 
+  """To delete my PagePreference"""
+  deleteMyPagePreference(element: String!, page: String!): Boolean!
+
+  """To delete my preference"""
+  deleteMyUserPreference(element: String!, key: String!): Boolean!
+
   """To delete Notification"""
   deleteNotification(id: String!): Boolean!
 
@@ -1797,6 +1809,12 @@ type Mutation {
   """To delete multiple Oauth2Clients"""
   deleteOauth2Clients(ids: [String!]!): Boolean!
 
+  """To delete PagePreference"""
+  deletePagePreference(id: String!): Boolean!
+
+  """To delete multiple PagePreferences"""
+  deletePagePreferences(ids: [String!]!): Boolean!
+
   """To delete multiple partnerSettings"""
   deletePartnerSettings(ids: [String!]!): Boolean!
 
@@ -1860,6 +1878,12 @@ type Mutation {
   """To delete a user"""
   deleteUser(email: EmailAddress!): Boolean!
 
+  """To delete UserPreference"""
+  deleteUserPreference(id: String!): Boolean!
+
+  """To delete multiple UserPreferences"""
+  deleteUserPreferences(ids: [String!]!): Boolean!
+
   """To delete some users"""
   deleteUsers(emails: [String!]!): Boolean!
 
@@ -2177,6 +2201,12 @@ type Mutation {
   """To modify ApprovalLine information for current user"""
   updateMyApprovalLine(id: String!, patch: ApprovalLinePatch!): ApprovalLine!
 
+  """To create or update my PagePreference"""
+  updateMyPagePreference(element: String!, page: String!, preference: Object!): PagePreference!
+
+  """To create or update my preference"""
+  updateMyUserPreference(key: String!, preference: Object!): UserPreference!
+
   """To modify Notification information"""
   updateNotification(id: String!, patch: NotificationPatch!): Notification!
 
@@ -2231,6 +2261,9 @@ type Mutation {
   """To modify user information"""
   updateUser(email: EmailAddress!, patch: UserPatch!): User!
 
+  """To modify UserPreference information"""
+  updateUserPreference(id: String!, patch: UserPreferencePatch!): UserPreference!
+
   """To update roles for a user"""
   updateUserRoles(availableRoles: [ObjectRef!]!, selectedRoles: [ObjectRef!]!, userId: String!): User!
 }
@@ -2630,6 +2663,13 @@ input NewOauth2Client {
   webhook: String
 }
 
+input NewPagePreference {
+  element: String
+  page: String
+  preference: Object!
+  user: ObjectRef!
+}
+
 input NewPayloadLog {
   description: String
   name: String!
@@ -2755,6 +2795,12 @@ input NewUserByDomainWizardInput {
   roles: [NewRole!]!
 }
 
+input NewUserPreference {
+  key: String!
+  preference: Object!
+  user: ObjectRef!
+}
+
 """Entity for Notification"""
 type Notification {
   body: String
@@ -2978,6 +3024,25 @@ enum OrgMemberTargetType {
   Role
 }
 
+"""Entity for PagePreference"""
+type PagePreference {
+  createdAt: DateTimeISO
+  creator: User
+  domain: Domain!
+  element: String
+  id: ID!
+  page: String
+  preference: Object
+  updatedAt: DateTimeISO
+  updater: User
+  user: User!
+}
+
+type PagePreferenceList {
+  items: [PagePreference!]!
+  total: Int!
+}
+
 input Pagination {
   limit: Int
   page: Int
@@ -3461,9 +3526,24 @@ type Query {
   """To fetch my notifications"""
   myNotifications(filters: [Filter!], inherited: InheritedValueType, pagination: Pagination, sortings: [Sorting!]): NotificationList!
 
+  """To fetch a User's own PagePreference"""
+  myPageAllPreferences(page: String!): [PagePreference!]
+
+  """To fetch a User's own PagePreference"""
+  myPagePreference(element: String!, page: String!): PagePreference
+
+  """To fetch multiple PagePreferences"""
+  myPagePreferences(filters: [Filter!], inherited: InheritedValueType, pagination: Pagination, sortings: [Sorting!]): PagePreferenceList!
+
   """To fetch roles of current user"""
   myRoles: [Role!]!
 
+  """To fetch a User's own UserPreference"""
+  myUserPreference(element: String!, key: String!): UserPreference
+
+  """To fetch multiple UserPreferences"""
+  myUserPreferences(filters: [Filter!], inherited: InheritedValueType, pagination: Pagination, sortings: [Sorting!]): UserPreferenceList!
+
   """To fetch a Notification"""
   notification(id: String!): Notification
 
@@ -3482,6 +3562,9 @@ type Query {
   """To fetch multiple Oauth2Clients"""
   oauth2Clients(filters: [Filter!], inherited: InheritedValueType, pagination: Pagination, sortings: [Sorting!]): Oauth2ClientList!
 
+  """To fetch a PagePreference"""
+  pagePreference(id: String!): PagePreference
+
   """To fetch specific domain's CommonCodes by given name"""
   partnerCommonCode(name: String!, partnerDomainId: String!): CommonCode!
 
@@ -3507,6 +3590,9 @@ type Query {
   """To fetch multiple PlayGroups"""
   playGroups(filters: [Filter!], inherited: InheritedValueType, pagination: Pagination, sortings: [Sorting!]): PlayGroupList!
 
+  """To fetch a UserPreference"""
+  preference(id: String!): UserPreference
+
   """To fetch a PrinterDevice"""
   printerDevice(id: String!): PrinterDevice!
 
@@ -4074,6 +4160,32 @@ input UserPatch {
   userType: String
 }
 
+"""Entity for UserPreference"""
+type UserPreference {
+  createdAt: DateTimeISO
+  creator: User
+  domain: Domain
+  id: ID!
+  key: String
+  preference: Object
+  updatedAt: DateTimeISO
+  updater: User
+  user: User!
+}
+
+type UserPreferenceList {
+  items: [UserPreference!]!
+  total: Int!
+}
+
+input UserPreferencePatch {
+  cuFlag: String
+  id: ID
+  key: String!
+  preference: Object!
+  user: ObjectRef!
+}
+
 type UserRole {
   assigned: Boolean
   description: String

package/src/charts/axis-synchronizer.ts

@@ -0,0 +1,37 @@
+import { AxisBase2D, EventHandler, NumberRange, VisibleRangeChangedArgs } from 'scichart'
+
+export class AxisSynchroniser {
+  public visibleRange: NumberRange
+  private axes: AxisBase2D[] = []
+  public visibleRangeChanged: EventHandler<VisibleRangeChangedArgs> = new EventHandler<VisibleRangeChangedArgs>()
+
+  public constructor(initialRange: NumberRange, axes?: AxisBase2D[]) {
+    this.visibleRange = initialRange
+    this.publishChange = this.publishChange.bind(this)
+    if (axes) {
+      axes.forEach(a => this.addAxis(a))
+    }
+  }
+
+  public publishChange(data?: VisibleRangeChangedArgs) {
+    this.visibleRange = data!.visibleRange
+    this.axes.forEach(a => (a.visibleRange = this.visibleRange))
+    this.visibleRangeChanged.raiseEvent(data)
+  }
+
+  public addAxis(axis: AxisBase2D) {
+    if (!this.axes.includes(axis)) {
+      this.axes.push(axis)
+      axis.visibleRange = this.visibleRange
+      axis.visibleRangeChanged.subscribe(this.publishChange)
+    }
+  }
+
+  public removeAxis(axis: AxisBase2D) {
+    const index = this.axes.findIndex(a => a === axis)
+    if (index >= 0) {
+      this.axes.splice(index, 1)
+      axis.visibleRangeChanged.unsubscribe(this.publishChange)
+    }
+  }
+}

package/src/charts/ox-scichart-multiple.ts

@@ -0,0 +1,362 @@
+import { LitElement, html, css } from 'lit'
+import { property, query, customElement } from 'lit/decorators.js'
+import { keyed } from 'lit/directives/keyed.js'
+
+import { buildSciChart, buildSciChartOverview } from './scichart-builder'
+import { AxisSynchroniser } from './axis-synchronizer'
+import { NumberRange, scaleAxes, SciChartVerticalGroup } from 'scichart'
+
+import { ScrollbarStyles } from '@operato/styles'
+
+@customElement('ox-scichart-multiple')
+export class OxSciChartMultiple extends LitElement {
+  @property({ type: Object }) config: OperatoChart.ChartConfig | null = null
+  @property({ type: Array }) data: { [attr: string]: any }[] = []
+  @property({ type: Array }) visibleSeries: string[] = []
+  @property({ type: Boolean, attribute: 'show-overview' }) showOverview: boolean = true
+
+  private synchronizer: AxisSynchroniser = new AxisSynchroniser(new NumberRange(200, 500))
+  private verticalGroup: SciChartVerticalGroup = new SciChartVerticalGroup()
+
+  private isInitializing: boolean = false
+  private overviewChart: any = null
+  private overviewDataSeries: any[] = []
+  private groupCharts: {
+    dataKey: string
+    sciChartSurface: any
+    dataSeries: any[]
+  }[] = []
+
+  /*
+  [주의]
+   ox-scichart container의 id를 글로벌 유니크하게 해야한다. 
+   SciChart가 특별히 container의 id를 기반으로 하위 컴포넌트를 구성하고 있기 때문이다.
+   shadowDom 안에 있는 container 이더라도, 글로벌 유니크한 id를 제공해야 한다.
+   그렇지 않으면, 단 하나의 차트만 제대로 렌더링된다.
+   */
+  private containerId: string = 'ox-scichart-multiple' + ++OxSciChartMultiple.idx
+
+  @query('.overview') overviewContainer!: HTMLDivElement
+
+  static idx: number = 0
+
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        width: 100%;
+        height: 100%;
+      }
+
+      .overview {
+        height: 80px;
+      }
+
+      #chart-group {
+        flex: 1;
+
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+      }
+
+      .grouped-chart {
+        flex: 1;
+
+        min-height: 25%;
+      }
+
+      [hidden] {
+        display: none;
+      }
+    `
+  ]
+
+  async initializeSciChart() {
+    this.cleanup()
+
+    const { chart, dataSeries } =
+      (await buildSciChartOverview(this.config, this.overviewContainer, {}, this.synchronizer)) || {}
+
+    this.verticalGroup.addSurfaceToGroup(chart.sciChartSurface)
+
+    this.overviewChart = chart
+    this.overviewDataSeries = dataSeries!
+  }
+
+  async updated(changedProperties: Map<string | number | symbol, unknown>) {
+    var needDataUpdate = false
+
+    if (changedProperties.has('config') && this.config) {
+      this.isInitializing = true
+      await this.initializeSciChart()
+      this.isInitializing = false
+      needDataUpdate = true
+    }
+
+    if (changedProperties.has('visibleSeries')) {
+      if (this.isInitializing) {
+        await this.ensureInitialization()
+      }
+      await this.updateSeries(this.visibleSeries, changedProperties.get('visibleSeries') as string[])
+      needDataUpdate = true
+    }
+
+    if (changedProperties.has('data')) {
+      needDataUpdate = true
+    }
+
+    if (needDataUpdate) {
+      await this.updateDataSeries()
+    }
+  }
+
+  private async ensureInitialization() {
+    while (this.isInitializing) {
+      await new Promise(resolve => setTimeout(resolve, 100)) // Check every 100ms
+    }
+  }
+
+  cleanup() {
+    this.cleanupGroup()
+
+    if (this.overviewChart) {
+      this.overviewChart.sciChartSurface?.delete()
+      this.overviewChart = null
+    }
+  }
+
+  cleanupGroup() {
+    this.groupCharts.forEach(chart => {
+      if (chart.sciChartSurface) {
+        this.synchronizer.removeAxis(chart.sciChartSurface.xAxes.get(0))
+        this.verticalGroup.removeSurface(chart.sciChartSurface)
+        chart.sciChartSurface.delete()
+      }
+    })
+
+    this.groupCharts.length = 0
+  }
+
+  async updateDataSeries() {
+    const { config, data } = this
+    const { datasets = [], labelDataKey: attrX } = config?.data || {}
+
+    if (!(data instanceof Array) || !attrX) {
+      return []
+    }
+
+    const newData = this.dataSet
+
+    ;(this.groupCharts || []).forEach(({ dataKey, sciChartSurface, dataSeries }) => {
+      try {
+        dataSeries.forEach(ds => ds.clear())
+        const dataSet = newData.filter((data, index) => dataKey == datasets[index].dataKey!)
+
+        dataSet.forEach((data, index) => {
+          dataSeries[index].appendRange(
+            data.map(d => d.xValue),
+            data.map(d => d.yValue)
+          )
+        })
+      } catch (error) {
+        console.log(error)
+      }
+
+      sciChartSurface.zoomExtents()
+      sciChartSurface.invalidateElement()
+    })
+
+    try {
+      this.overviewDataSeries.forEach(ds => ds.clear())
+
+      newData.forEach((data, index) => {
+        if (this.visibleSeries.includes(datasets[index].dataKey!)) {
+          this.overviewDataSeries[index].appendRange(
+            data.map(d => d.xValue),
+            data.map(d => d.yValue)
+          )
+        }
+      })
+
+      this.overviewChart?.sciChartSurface.zoomExtents()
+      this.overviewChart?.sciChartSurface.invalidateElement()
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  get dataSet(): { xValue: number; yValue: number }[][] {
+    const { config, data } = this
+    const { datasets = [], labelDataKey: attrX } = config?.data || {}
+
+    if (!(data instanceof Array) || !attrX) {
+      return []
+    }
+
+    return datasets.map(dataset => {
+      return data
+        .map(item => {
+          if (!item || typeof item !== 'object') {
+            return
+          }
+
+          const xValue = new Date(item[attrX])
+          if (isNaN(xValue.getTime())) {
+            console.error('Invalid date:', item[attrX])
+            return
+          }
+
+          return {
+            xValue: xValue.getTime() / 1000,
+            yValue: item[dataset.dataKey!]
+          }
+        })
+        .filter(Boolean) as { xValue: number; yValue: number }[]
+    })
+  }
+
+  render() {
+    const { datasets = [] } = this.config?.data || {}
+
+    return html`
+      <div id=${this.containerId + '-overview'} class="overview" ?hidden=${!this.showOverview}></div>
+      <div id="chart-group">
+        ${datasets.map(({ dataKey }) =>
+          keyed(
+            dataKey,
+            html`
+              <div
+                id=${this.containerId + '-' + dataKey}
+                class="grouped-chart"
+                ?hidden=${!this.visibleSeries.includes(dataKey!)}
+              ></div>
+            `
+          )
+        )}
+      </div>
+    `
+  }
+
+  async buildChartGroup() {
+    this.cleanupGroup()
+
+    const { config } = this
+    const { datasets = [] } = config?.data || {}
+
+    await Promise.all(
+      datasets
+        .filter(dataset => this.visibleSeries.includes(dataset.dataKey!))
+        .map(async dataset => {
+          await this.addChart(dataset.dataKey!)
+        })
+    )
+  }
+
+  async updateSeries(after: string[], before: string[]) {
+    /* 기존 시리즈와 새로운 시리즈의 차이를 비교해서, before에는 있는데, after에는 없으면 await removeChart(string)를 호출하고, after에는 있는데, before에는 없으면, addChart(string) 한다. */
+    // before에는 있는데 after에는 없는 시리즈를 제거합니다.
+    for (const series of before || []) {
+      if (!after.includes(series)) {
+        await this.removeChart(series)
+      }
+    }
+
+    // after에는 있는데 before에는 없는 시리즈를 추가합니다.
+    for (const series of after || []) {
+      if (!before || !before.includes(series)) {
+        await this.addChart(series)
+      }
+    }
+  }
+
+  async addChart(dataKey: string) {
+    const groupedChart = {
+      dataKey: '',
+      sciChartSurface: undefined,
+      dataSeries: [] as any[]
+    }
+
+    const { data = {}, options = {} } = this.config || {}
+    const { datasets = [] } = data as OperatoChart.ChartData
+    const dataset = datasets.find(dataset => dataset.dataKey == dataKey)
+
+    if (!dataset) {
+      return
+    }
+
+    const { scales } = options
+    const { yAxes = [] } = scales || {}
+    const yAxis = {
+      ...yAxes[0],
+      axisTitle: dataset?.label
+    }
+
+    const config = {
+      ...this.config,
+      data: {
+        datasets: [dataset]
+      },
+      options: {
+        ...options,
+        scales: {
+          ...scales,
+          yAxes: [yAxis]
+        }
+      }
+    }
+
+    const container = this.renderRoot.querySelector(`#${this.containerId + '-' + dataKey}`)
+    var { chart, dataSeries } = (await buildSciChart(
+      config,
+      container,
+      { fontSize: 14, fontFamily: 'Roboto', fontColor: undefined },
+      this.containerId
+    ))!
+
+    this.verticalGroup.addSurfaceToGroup(chart.sciChartSurface)
+    this.synchronizer.addAxis(chart.sciChartSurface.xAxes.get(0))
+
+    groupedChart.dataKey = config.data.datasets[0]!.dataKey!
+    groupedChart.sciChartSurface = chart.sciChartSurface
+    groupedChart.dataSeries = dataSeries
+
+    this.groupCharts = this.groupSorter([...this.groupCharts, groupedChart])
+  }
+
+  removeChart(dataKey: string) {
+    const index = this.groupCharts.findIndex((chart: any) => chart.dataKey == dataKey)
+    const [groupedChart] = this.groupCharts.splice(index, 1)
+
+    if (!groupedChart) {
+      return
+    }
+
+    this.verticalGroup.removeSurface(groupedChart.sciChartSurface)
+    this.synchronizer.removeAxis(groupedChart.sciChartSurface.xAxes.get(0))
+
+    groupedChart.sciChartSurface.delete()
+    groupedChart.sciChartSurface = undefined
+
+    this.groupCharts = this.groupSorter(this.groupCharts)
+  }
+
+  groupSorter(group: any[]) {
+    return group.sort(
+      (a, b) =>
+        this.visibleSeries.findIndex((s: any) => s.dataKey == a.dataKey) -
+        this.visibleSeries.findIndex((s: any) => s.dataKey == b.dataKey)
+    )
+  }
+
+  async appendData(appendum: { [attr: string]: any }[]) {}
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ox-scichart-multiple': OxSciChartMultiple
+  }
+}

package/src/charts/ox-scichart.ts

@@ -7,7 +7,7 @@ export class OxSciChart extends LitElement {
   @property({ type: Object }) config: OperatoChart.ChartConfig | null = null
   @property({ type: Array }) data: { [attr: string]: any }[] = []
 
-  private chart: any = null
+  public chart: any = null
   private dataSeries: any[] = []
   /*
   [주의]
@@ -117,6 +117,8 @@ export class OxSciChart extends LitElement {
     })
   }
 
+  async appendData(appendum: { [attr: string]: any }[]) {}
+
   render() {
     return html` <div id=${this.containerId} class="chart-container"></div> `
   }