@operato/chart 7.0.0-rc.9 → 7.0.1

package/.storybook/preview.js

@@ -1,4 +1,4 @@
-import i18n from 'i18next'
+import { i18next } from '@operato/i18n'
 
 export const globalTypes = {
   locale: {
@@ -15,14 +15,37 @@ export const globalTypes = {
       ],
       showName: true
     }
+  },
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    toolbar: {
+      icon: 'paintbrush',
+      items: [
+        { value: 'light', title: 'Light' },
+        { value: 'dark', title: 'Dark' }
+      ],
+      showName: true
+    }
   }
 }
 
 export const decorators = [
   (Story, context) => {
-    const { locale } = context.globals
+    const { locale, theme } = context.globals
+
+    if (locale) {
+      i18next.changeLanguage(locale)
+    }
 
-    i18n.changeLanguage(locale)
+    // Set the theme class for the document
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark')
+      document.documentElement.classList.remove('light')
+    } else {
+      document.documentElement.classList.add('light')
+      document.documentElement.classList.remove('dark')
+    }
 
     return Story()
   }

package/CHANGELOG.md

@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [7.0.1](https://github.com/hatiolab/operato/compare/v7.1.0...v7.0.1) (2024-07-01)
+
+
+### :bug: Bug Fix
+
+* chart inputs for scichart ([dc8d19f](https://github.com/hatiolab/operato/commit/dc8d19fb92ba62ac773d958dc5709f13b806cfde))
+
+
+
+## [7.0.0](https://github.com/hatiolab/operato/compare/v7.0.0-rc.13...v7.0.0) (2024-06-30)
+
+**Note:** Version bump only for package @operato/chart
+
+
+
+
+
+## [7.0.0-rc.13](https://github.com/hatiolab/operato/compare/v7.0.0-rc.12...v7.0.0-rc.13) (2024-06-30)
+
+
+### :bug: Bug Fix
+
+* storybook preview.js ([84d7682](https://github.com/hatiolab/operato/commit/84d7682af452554e8b0e83aa683bdc3726e264bb))
+* storybook preview.js ([8ed7305](https://github.com/hatiolab/operato/commit/8ed73059fd5b03718dc44e7b984cd47f4316c7da))
+
+
+
+## [7.0.0-rc.11](https://github.com/hatiolab/operato/compare/v7.0.0-rc.10...v7.0.0-rc.11) (2024-06-29)
+
+**Note:** Version bump only for package @operato/chart
+
+
+
+
+
+## [7.0.0-rc.10](https://github.com/hatiolab/operato/compare/v7.0.0-rc.9...v7.0.0-rc.10) (2024-06-29)
+
+**Note:** Version bump only for package @operato/chart
+
+
+
+
+
 ## [7.0.0-rc.9](https://github.com/hatiolab/operato/compare/v7.0.0-rc.8...v7.0.0-rc.9) (2024-06-29)
 
 

package/dist/src/chartjs/ox-chart-js.js

@@ -16,6 +16,9 @@ let OxChartJs = class OxChartJs extends LitElement {
     static { this.styles = css `
     :host {
       display: block;
+
+      background-color: var(--ox-chart-background-color, var(--md-sys-color-surface));
+      color: var(--ox-chart-color, var(--md-sys-color-on-surface));
     }
 
     canvas {

package/dist/src/chartjs/ox-chart-js.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-chart-js.js","sourceRoot":"","sources":["../../../src/chartjs/ox-chart-js.ts"],"names":[],"mappings":"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","sourcesContent":["import 'chartjs-plugin-datalabels'\n\nimport { LitElement, html, css } from 'lit'\nimport { property, query, state, customElement } from 'lit/decorators.js'\nimport { Chart, ChartConfiguration } from 'chart.js/auto'\nimport { convertConfigure } from './config-converter'\nimport { format as formatText } from '../utils/text-formatter'\n\n@customElement('ox-chart-js')\nexport class OxChartJs extends LitElement {\n  @property({ type: Object }) config: OperatoChart.ChartConfig | null = null\n  @property({ type: Array }) data: { [key: string]: any }[] = []\n  @property({ type: Number }) width!: number\n  @property({ type: Number }) height!: number\n\n  private chart: Chart | null = null\n  private chartjsConfig: ChartConfiguration | null = null\n\n  @query('canvas') canvas!: HTMLCanvasElement\n\n  static styles = css`\n    :host {\n      display: block;\n    }\n\n    canvas {\n      width: 100%;\n      height: 100%;\n    }\n  `\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    if (this.chart) {\n      this.chart.destroy()\n    }\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    var needUpdateData = false\n\n    if (changedProperties.has('width') || changedProperties.has('height')) {\n      this.updateChartSize()\n    }\n\n    if (changedProperties.has('config') && this.config) {\n      this.chartjsConfig = convertConfigure(this.config, {}) as any\n\n      this.chart && this.chart.destroy()\n      this.chart = new Chart(this.canvas, this.chartjsConfig!)\n\n      needUpdateData = true\n    }\n\n    if (changedProperties.has('data')) {\n      needUpdateData = true\n    }\n\n    if (needUpdateData) {\n      this.updateData()\n    }\n  }\n\n  updateData() {\n    if (!this.chart) {\n      return\n    }\n\n    var data = this.data\n\n    if (this.data[0]?.hasOwnProperty('__field1')) {\n      /* DEPRECATED 이 케이스는 앞으로 지원하지 않는 것이 좋다. 하위 호환성 때문에 제공함. 사용빈도 낮음. */\n      data = toObjectArrayValue(this.data) as { [key: string]: any }[]\n    }\n\n    const labelDataKey = this.config!.data.labelDataKey || ''\n\n    labelDataKey && (this.chart!.config.data!.labels = data.map((data: any) => data[labelDataKey]))\n\n    const datasets = this.chart!.config.data.datasets\n    for (let key in datasets) {\n      const dataset = datasets[Number(key)]\n      const dataKey = (dataset as any).dataKey\n      dataKey && (dataset.data = data.map(d => d[dataKey]) as any)\n    }\n\n    this.chart.update()\n  }\n\n  updateChartSize() {\n    const width = Math.floor(this.width)\n    const height = Math.floor(this.height)\n\n    this.canvas.style.width = `${width}px`\n    this.canvas.style.height = `${height}px`\n\n    const _ = () => {\n      if (this.canvas.offsetWidth == 0 || this.canvas.offsetHeight == 0) {\n        requestAnimationFrame(_)\n      } else {\n        /*\n        주의 : chart.resize() 내에서 pixel ratio를 감안해서, canvas 의 width, height를 설정하기때문에,\n        별도 처리가 필요하지 않다.\n        */\n        this.chart!.resize()\n      }\n    }\n\n    requestAnimationFrame(_)\n  }\n\n  render() {\n    return html`<canvas></canvas>`\n  }\n\n  attachPluginOptions(options: OperatoChart.ChartOptions) {\n    if (!options.plugins) {\n      options.plugins = {}\n    }\n\n    this.attachDatalabelPluginOptions(options.plugins)\n  }\n\n  attachDatalabelPluginOptions(pluginOptions: any) {\n    pluginOptions.datalabels = {\n      ...pluginOptions.datalabels,\n      display: function (context: any) {\n        return !!context.dataset.displayValue\n      },\n      anchor: function (context: any) {\n        return context.dataset.dataLabelAnchor || 'center'\n      },\n      color: function (context: any) {\n        return context.dataset?.defaultFontColor || '#000'\n      },\n      font: function (context: any) {\n        return {\n          size: context.dataset?.defaultFontSize,\n          family: context.chart.options?.defaultFontFamily\n        }\n      },\n      clamp: true,\n      formatter: function (value: string, context: any) {\n        var prefix = context.dataset.valuePrefix || ''\n        var suffix = context.dataset.valueSuffix || ''\n        var format = context.dataset.valueFormat || ''\n\n        if (value === undefined) {\n          return value\n        }\n\n        var stringValue = format ? formatText(format, Number(value)) : Number(value).toLocaleString()\n        return prefix + stringValue + suffix\n      }\n    }\n  }\n}\n\nfunction toObjectArrayValue(array: any[]): any[] | null {\n  if (!array || array.length === 0) {\n    return null\n  }\n\n  let indexKeyMap: any = {}\n  let value = []\n\n  for (let key in array[0]) {\n    indexKeyMap[key] = array[0][key]\n  }\n\n  for (var i = 1; i < array.length; i++) {\n    let object: any = {}\n    let thisObject = array[i]\n\n    for (let key in indexKeyMap) {\n      let k = indexKeyMap[key]\n      let v = thisObject[key]\n      object[k] = v\n    }\n\n    value.push(object)\n  }\n\n  return value\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ox-chart-js': OxChartJs\n  }\n}\n"]}
+{"version":3,"file":"ox-chart-js.js","sourceRoot":"","sources":["../../../src/chartjs/ox-chart-js.ts"],"names":[],"mappings":"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","sourcesContent":["import 'chartjs-plugin-datalabels'\n\nimport { LitElement, html, css } from 'lit'\nimport { property, query, state, customElement } from 'lit/decorators.js'\nimport { Chart, ChartConfiguration } from 'chart.js/auto'\nimport { convertConfigure } from './config-converter'\nimport { format as formatText } from '../utils/text-formatter'\n\n@customElement('ox-chart-js')\nexport class OxChartJs extends LitElement {\n  @property({ type: Object }) config: OperatoChart.ChartConfig | null = null\n  @property({ type: Array }) data: { [key: string]: any }[] = []\n  @property({ type: Number }) width!: number\n  @property({ type: Number }) height!: number\n\n  private chart: Chart | null = null\n  private chartjsConfig: ChartConfiguration | null = null\n\n  @query('canvas') canvas!: HTMLCanvasElement\n\n  static styles = css`\n    :host {\n      display: block;\n\n      background-color: var(--ox-chart-background-color, var(--md-sys-color-surface));\n      color: var(--ox-chart-color, var(--md-sys-color-on-surface));\n    }\n\n    canvas {\n      width: 100%;\n      height: 100%;\n    }\n  `\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    if (this.chart) {\n      this.chart.destroy()\n    }\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    var needUpdateData = false\n\n    if (changedProperties.has('width') || changedProperties.has('height')) {\n      this.updateChartSize()\n    }\n\n    if (changedProperties.has('config') && this.config) {\n      this.chartjsConfig = convertConfigure(this.config, {}) as any\n\n      this.chart && this.chart.destroy()\n      this.chart = new Chart(this.canvas, this.chartjsConfig!)\n\n      needUpdateData = true\n    }\n\n    if (changedProperties.has('data')) {\n      needUpdateData = true\n    }\n\n    if (needUpdateData) {\n      this.updateData()\n    }\n  }\n\n  updateData() {\n    if (!this.chart) {\n      return\n    }\n\n    var data = this.data\n\n    if (this.data[0]?.hasOwnProperty('__field1')) {\n      /* DEPRECATED 이 케이스는 앞으로 지원하지 않는 것이 좋다. 하위 호환성 때문에 제공함. 사용빈도 낮음. */\n      data = toObjectArrayValue(this.data) as { [key: string]: any }[]\n    }\n\n    const labelDataKey = this.config!.data.labelDataKey || ''\n\n    labelDataKey && (this.chart!.config.data!.labels = data.map((data: any) => data[labelDataKey]))\n\n    const datasets = this.chart!.config.data.datasets\n    for (let key in datasets) {\n      const dataset = datasets[Number(key)]\n      const dataKey = (dataset as any).dataKey\n      dataKey && (dataset.data = data.map(d => d[dataKey]) as any)\n    }\n\n    this.chart.update()\n  }\n\n  updateChartSize() {\n    const width = Math.floor(this.width)\n    const height = Math.floor(this.height)\n\n    this.canvas.style.width = `${width}px`\n    this.canvas.style.height = `${height}px`\n\n    const _ = () => {\n      if (this.canvas.offsetWidth == 0 || this.canvas.offsetHeight == 0) {\n        requestAnimationFrame(_)\n      } else {\n        /*\n        주의 : chart.resize() 내에서 pixel ratio를 감안해서, canvas 의 width, height를 설정하기때문에,\n        별도 처리가 필요하지 않다.\n        */\n        this.chart!.resize()\n      }\n    }\n\n    requestAnimationFrame(_)\n  }\n\n  render() {\n    return html`<canvas></canvas>`\n  }\n\n  attachPluginOptions(options: OperatoChart.ChartOptions) {\n    if (!options.plugins) {\n      options.plugins = {}\n    }\n\n    this.attachDatalabelPluginOptions(options.plugins)\n  }\n\n  attachDatalabelPluginOptions(pluginOptions: any) {\n    pluginOptions.datalabels = {\n      ...pluginOptions.datalabels,\n      display: function (context: any) {\n        return !!context.dataset.displayValue\n      },\n      anchor: function (context: any) {\n        return context.dataset.dataLabelAnchor || 'center'\n      },\n      color: function (context: any) {\n        return context.dataset?.defaultFontColor || '#000'\n      },\n      font: function (context: any) {\n        return {\n          size: context.dataset?.defaultFontSize,\n          family: context.chart.options?.defaultFontFamily\n        }\n      },\n      clamp: true,\n      formatter: function (value: string, context: any) {\n        var prefix = context.dataset.valuePrefix || ''\n        var suffix = context.dataset.valueSuffix || ''\n        var format = context.dataset.valueFormat || ''\n\n        if (value === undefined) {\n          return value\n        }\n\n        var stringValue = format ? formatText(format, Number(value)) : Number(value).toLocaleString()\n        return prefix + stringValue + suffix\n      }\n    }\n  }\n}\n\nfunction toObjectArrayValue(array: any[]): any[] | null {\n  if (!array || array.length === 0) {\n    return null\n  }\n\n  let indexKeyMap: any = {}\n  let value = []\n\n  for (let key in array[0]) {\n    indexKeyMap[key] = array[0][key]\n  }\n\n  for (var i = 1; i < array.length; i++) {\n    let object: any = {}\n    let thisObject = array[i]\n\n    for (let key in indexKeyMap) {\n      let k = indexKeyMap[key]\n      let v = thisObject[key]\n      object[k] = v\n    }\n\n    value.push(object)\n  }\n\n  return value\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ox-chart-js': OxChartJs\n  }\n}\n"]}

package/dist/src/editors/input-chart-styles.js

@@ -4,6 +4,9 @@ export const InputChartStyles = css `
     display: grid;
     grid-template-columns: repeat(10, 1fr);
     grid-gap: 5px;
+
+    background-color: var(--ox-input-background-color, var(--md-sys-color-surface));
+    color: var(--ox-input-color, var(--md-sys-color-on-surface));
   }
 
   :host > * {

package/dist/src/editors/input-chart-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-chart-styles.js","sourceRoot":"","sources":["../../../src/editors/input-chart-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoKlC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const InputChartStyles = css`\n  :host {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n  }\n\n  :host > * {\n    box-sizing: border-box;\n    grid-column: span 7;\n  }\n\n  :host > label {\n    box-sizing: border-box;\n    grid-column: span 3;\n  }\n\n  :host > legend {\n    box-sizing: border-box;\n    grid-column: 1 / -1;\n    color: var(--md-sys-color-on-secondary-container, #e46c2e);\n    font: var(--property-sidebar-fieldset-legend, bold 13px var(--theme-font));\n    text-transform: capitalize;\n  }\n\n  #series-properties-container {\n    display: grid;\n    grid-template-columns: 1fr 25px;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #series-properties-container > [tab-content] {\n    grid-column: span 2;\n  }\n\n  #tab-header {\n    display: grid;\n    grid-template-columns: 25px 1fr 25px;\n    grid-gap: 5px;\n    overflow: hidden;\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    border-bottom: 0;\n    background-color: var(--md-sys-color-surface-variant);\n    color: var(--md-sys-color-on-surface);\n    box-sizing: border-box;\n    padding-top: 3px;\n    align-items: center;\n  }\n\n  #tab-header > div {\n    height: 25px;\n  }\n\n  #tab-header md-icon[disabled] {\n    opacity: 0.1;\n  }\n\n  #tabs {\n    display: flex;\n    overflow: hidden;\n  }\n\n  #tab-header #tabs [tab] md-icon {\n    margin-left: 5px;\n    padding: 2px;\n    color: var(--md-sys-color-on-surface);\n\n    --md-icon-size: 12px;\n  }\n\n  #add-series-button-container {\n    height: 100%;\n    box-sizing: border-box;\n    align-items: center;\n    justify-content: center;\n    padding-top: 3px;\n    display: flex;\n    border-bottom: rgba(0, 0, 0, 0.2) 1px solid;\n  }\n\n  #add-series-button {\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    color: var(--md-sys-color-on-secondary-container);\n  }\n\n  .tab-content {\n    grid-column: 1 / -1;\n\n    background-color: rgba(255, 255, 255, 0.5);\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    border-width: 0 1px 1px 1px;\n    padding: 5px;\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n  }\n\n  .tab-content > * {\n    box-sizing: border-box;\n    grid-column: span 7;\n  }\n\n  label,\n  .tab-content > label {\n    grid-column: span 3;\n    text-align: right;\n    color: var(--md-sys-color-on-secondary-container);\n    font-size: 0.8em;\n    line-height: 2;\n    text-transform: capitalize;\n  }\n\n  input,\n  select {\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    border-radius: var(--spacing-small);\n  }\n\n  input[type='checkbox'],\n  .tab-content > input[type='checkbox'] {\n    grid-column: span 4;\n    justify-self: end;\n    align-self: center;\n  }\n\n  input[type='checkbox'] + label,\n  .tab-content > input[type='checkbox'] + label {\n    grid-column: span 6;\n\n    text-align: left;\n  }\n\n  [fullwidth] {\n    grid-column: 1 / -1;\n    margin: 0;\n    border: 0;\n  }\n\n  div[tab] {\n    display: flex;\n    align-items: center;\n    background-color: rgba(0, 0, 0, 0.2);\n    border-width: 1px 1px 0 1px;\n    padding: 0 5px;\n    color: var(--md-sys-color-on-surface);\n    box-sizing: border-box;\n    min-width: 45px;\n  }\n\n  div[tab][disabled] {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n\n  div[tab]:last-child {\n    border-width: 0;\n  }\n\n  div[tab][selected] {\n    background-color: var(--md-sys-color-surface);\n    color: var(--md-sys-color-on-surface);\n  }\n`\n"]}
+{"version":3,"file":"input-chart-styles.js","sourceRoot":"","sources":["../../../src/editors/input-chart-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuKlC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const InputChartStyles = css`\n  :host {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n\n    background-color: var(--ox-input-background-color, var(--md-sys-color-surface));\n    color: var(--ox-input-color, var(--md-sys-color-on-surface));\n  }\n\n  :host > * {\n    box-sizing: border-box;\n    grid-column: span 7;\n  }\n\n  :host > label {\n    box-sizing: border-box;\n    grid-column: span 3;\n  }\n\n  :host > legend {\n    box-sizing: border-box;\n    grid-column: 1 / -1;\n    color: var(--md-sys-color-on-secondary-container, #e46c2e);\n    font: var(--property-sidebar-fieldset-legend, bold 13px var(--theme-font));\n    text-transform: capitalize;\n  }\n\n  #series-properties-container {\n    display: grid;\n    grid-template-columns: 1fr 25px;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #series-properties-container > [tab-content] {\n    grid-column: span 2;\n  }\n\n  #tab-header {\n    display: grid;\n    grid-template-columns: 25px 1fr 25px;\n    grid-gap: 5px;\n    overflow: hidden;\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    border-bottom: 0;\n    background-color: var(--md-sys-color-surface-variant);\n    color: var(--md-sys-color-on-surface);\n    box-sizing: border-box;\n    padding-top: 3px;\n    align-items: center;\n  }\n\n  #tab-header > div {\n    height: 25px;\n  }\n\n  #tab-header md-icon[disabled] {\n    opacity: 0.1;\n  }\n\n  #tabs {\n    display: flex;\n    overflow: hidden;\n  }\n\n  #tab-header #tabs [tab] md-icon {\n    margin-left: 5px;\n    padding: 2px;\n    color: var(--md-sys-color-on-surface);\n\n    --md-icon-size: 12px;\n  }\n\n  #add-series-button-container {\n    height: 100%;\n    box-sizing: border-box;\n    align-items: center;\n    justify-content: center;\n    padding-top: 3px;\n    display: flex;\n    border-bottom: rgba(0, 0, 0, 0.2) 1px solid;\n  }\n\n  #add-series-button {\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    color: var(--md-sys-color-on-secondary-container);\n  }\n\n  .tab-content {\n    grid-column: 1 / -1;\n\n    background-color: rgba(255, 255, 255, 0.5);\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    border-width: 0 1px 1px 1px;\n    padding: 5px;\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n  }\n\n  .tab-content > * {\n    box-sizing: border-box;\n    grid-column: span 7;\n  }\n\n  label,\n  .tab-content > label {\n    grid-column: span 3;\n    text-align: right;\n    color: var(--md-sys-color-on-secondary-container);\n    font-size: 0.8em;\n    line-height: 2;\n    text-transform: capitalize;\n  }\n\n  input,\n  select {\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    border-radius: var(--spacing-small);\n  }\n\n  input[type='checkbox'],\n  .tab-content > input[type='checkbox'] {\n    grid-column: span 4;\n    justify-self: end;\n    align-self: center;\n  }\n\n  input[type='checkbox'] + label,\n  .tab-content > input[type='checkbox'] + label {\n    grid-column: span 6;\n\n    text-align: left;\n  }\n\n  [fullwidth] {\n    grid-column: 1 / -1;\n    margin: 0;\n    border: 0;\n  }\n\n  div[tab] {\n    display: flex;\n    align-items: center;\n    background-color: rgba(0, 0, 0, 0.2);\n    border-width: 1px 1px 0 1px;\n    padding: 0 5px;\n    color: var(--md-sys-color-on-surface);\n    box-sizing: border-box;\n    min-width: 45px;\n  }\n\n  div[tab][disabled] {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n\n  div[tab]:last-child {\n    border-width: 0;\n  }\n\n  div[tab][selected] {\n    background-color: var(--md-sys-color-surface);\n    color: var(--md-sys-color-on-surface);\n  }\n`\n"]}

package/dist/src/progress/ox-progress-circle.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { PropertyValues, LitElement } from 'lit';
+/**
+WEB Component for code-mirror code editor.
+
+Example:
+  <ox-progress-circle
+    .value=${70}
+    titleText="전체"
+    suffix="%"
+    fontSize="29px"
+    fontColor="#4E5055"
+    borderStyle="none"
+    innerCircleSize="28%"
+    circleColor="#0595E5"
+    shadow="#00000026 4px 4px 4px"
+    background="#eaf5fd"
+  ></ox-progress-circle>
+*/
+export declare class OxProgressCircle extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value: number;
+    suffix: string;
+    titleText: string;
+    fontSize: string;
+    fontColor: string;
+    borderStyle: string;
+    innerCircleSize: string;
+    shadow: string;
+    circleColor: string;
+    background: string;
+    circle: HTMLDivElement;
+    innerCircle: HTMLDivElement;
+    progressTitle?: HTMLSpanElement;
+    firstUpdated(): void;
+    updated(changes: PropertyValues<this>): void;
+    updateCircleBackground(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/progress/ox-progress-circle.js

@@ -0,0 +1,169 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+/**
+WEB Component for code-mirror code editor.
+
+Example:
+  <ox-progress-circle
+    .value=${70}
+    titleText="전체"
+    suffix="%"
+    fontSize="29px"
+    fontColor="#4E5055"
+    borderStyle="none"
+    innerCircleSize="28%"
+    circleColor="#0595E5"
+    shadow="#00000026 4px 4px 4px"
+    background="#eaf5fd"
+  ></ox-progress-circle>
+*/
+let OxProgressCircle = class OxProgressCircle extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = 0;
+        this.suffix = '';
+        this.titleText = '';
+        this.fontSize = '10px';
+        this.fontColor = '';
+        this.borderStyle = '';
+        this.innerCircleSize = '10%';
+        this.shadow = '';
+        this.circleColor = 'yellowgreen';
+        this.background = '';
+    }
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+      }
+
+      div[circle] {
+        font-size: 29px;
+        font-weight: bold;
+        width: 100%;
+        aspect-ratio: 1;
+        display: flex;
+        border-radius: 50%;
+        border: 1px solid #353b48;
+        position: relative;
+        background: conic-gradient(yellowgreen 0deg, white 0deg);
+        box-shadow: #00000026 5px 5px 5px;
+      }
+      div[inner-circle] {
+        width: 90%;
+        aspect-ratio: 1;
+        border-radius: inherit;
+        background-color: #353b48;
+        margin: auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        color: white;
+        justify-content: center;
+        box-shadow: inset #00000026 -2px 2px 8px;
+      }
+
+      div[inner-circle] span {
+        display: flex;
+        align-items: center;
+      }
+
+      span[progress-title] {
+        font-size: 0.65em;
+        margin-bottom: -5%;
+      }
+    `
+    ]; }
+    firstUpdated() {
+        if (this.fontSize) {
+            this.circle.style.fontSize = this.fontSize;
+        }
+        if (this.fontColor) {
+            this.innerCircle.style.color = this.fontColor;
+        }
+        if (this.borderStyle) {
+            this.circle.style.border = this.borderStyle;
+        }
+        if (this.innerCircleSize) {
+            this.innerCircle.style.width = `calc(100% - ${this.innerCircleSize})`;
+        }
+        if (this.shadow) {
+            this.circle.style.boxShadow = this.shadow;
+        }
+        if (this.background) {
+            this.innerCircle.style.background = this.background;
+        }
+        if (this.progressTitle && this.circleColor) {
+            this.progressTitle.style.color = this.circleColor;
+        }
+    }
+    updated(changes) {
+        if (changes.has('value')) {
+            this.updateCircleBackground();
+        }
+    }
+    updateCircleBackground() {
+        const position = this.value * 3.6; // 360 = 100%
+        this.circle.style.background = `conic-gradient(${this.circleColor} ${position}deg, ${this.background} 0deg)`;
+    }
+    render() {
+        return html `
+      <div circle>
+        <div inner-circle>
+          ${this.titleText ? html `<span progress-title>${this.titleText}</span>` : ''}
+          <span>${this.value}${this.suffix}</span>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], OxProgressCircle.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], OxProgressCircle.prototype, "suffix", void 0);
+__decorate([
+    property({ type: String })
+], OxProgressCircle.prototype, "titleText", void 0);
+__decorate([
+    property({ type: String })
+], OxProgressCircle.prototype, "fontSize", void 0);
+__decorate([
+    property({ type: String })
+], OxProgressCircle.prototype, "fontColor", void 0);
+__decorate([
+    property({ type: String })
+], OxProgressCircle.prototype, "borderStyle", void 0);
+__decorate([
+    property({ type: String })
+], OxProgressCircle.prototype, "innerCircleSize", void 0);
+__decorate([
+    property({ type: String })
+], OxProgressCircle.prototype, "shadow", void 0);
+__decorate([
+    property({ type: String })
+], OxProgressCircle.prototype, "circleColor", void 0);
+__decorate([
+    property({ type: String })
+], OxProgressCircle.prototype, "background", void 0);
+__decorate([
+    query('div[circle]')
+], OxProgressCircle.prototype, "circle", void 0);
+__decorate([
+    query('div[inner-circle]')
+], OxProgressCircle.prototype, "innerCircle", void 0);
+__decorate([
+    query('span[progress-title]')
+], OxProgressCircle.prototype, "progressTitle", void 0);
+OxProgressCircle = __decorate([
+    customElement('ox-progress-circle')
+], OxProgressCircle);
+export { OxProgressCircle };
+//# sourceMappingURL=ox-progress-circle.js.map

package/dist/src/progress/ox-progress-circle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-progress-circle.js","sourceRoot":"","sources":["../../../src/progress/ox-progress-circle.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { PropertyValues, LitElement, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\n/**\nWEB Component for code-mirror code editor.\n\nExample:\n  <ox-progress-circle\n    .value=${70}\n    titleText=\"전체\"\n    suffix=\"%\"\n    fontSize=\"29px\"\n    fontColor=\"#4E5055\"\n    borderStyle=\"none\"\n    innerCircleSize=\"28%\"\n    circleColor=\"#0595E5\"\n    shadow=\"#00000026 4px 4px 4px\"\n    background=\"#eaf5fd\"\n  ></ox-progress-circle>\n*/\n@customElement('ox-progress-circle')\nexport class OxProgressCircle extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      div[circle] {\n        font-size: 29px;\n        font-weight: bold;\n        width: 100%;\n        aspect-ratio: 1;\n        display: flex;\n        border-radius: 50%;\n        border: 1px solid #353b48;\n        position: relative;\n        background: conic-gradient(yellowgreen 0deg, white 0deg);\n        box-shadow: #00000026 5px 5px 5px;\n      }\n      div[inner-circle] {\n        width: 90%;\n        aspect-ratio: 1;\n        border-radius: inherit;\n        background-color: #353b48;\n        margin: auto;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        color: white;\n        justify-content: center;\n        box-shadow: inset #00000026 -2px 2px 8px;\n      }\n\n      div[inner-circle] span {\n        display: flex;\n        align-items: center;\n      }\n\n      span[progress-title] {\n        font-size: 0.65em;\n        margin-bottom: -5%;\n      }\n    `\n  ]\n\n  @property({ type: Number }) value: number = 0\n  @property({ type: String }) suffix: string = ''\n  @property({ type: String }) titleText: string = ''\n  @property({ type: String }) fontSize: string = '10px'\n  @property({ type: String }) fontColor: string = ''\n  @property({ type: String }) borderStyle: string = ''\n  @property({ type: String }) innerCircleSize: string = '10%'\n  @property({ type: String }) shadow: string = ''\n  @property({ type: String }) circleColor: string = 'yellowgreen'\n  @property({ type: String }) background: string = ''\n\n  @query('div[circle]') circle!: HTMLDivElement\n  @query('div[inner-circle]') innerCircle!: HTMLDivElement\n  @query('span[progress-title]') progressTitle?: HTMLSpanElement\n\n  firstUpdated() {\n    if (this.fontSize) {\n      this.circle.style.fontSize = this.fontSize\n    }\n    if (this.fontColor) {\n      this.innerCircle.style.color = this.fontColor\n    }\n    if (this.borderStyle) {\n      this.circle.style.border = this.borderStyle\n    }\n    if (this.innerCircleSize) {\n      this.innerCircle.style.width = `calc(100% - ${this.innerCircleSize})`\n    }\n    if (this.shadow) {\n      this.circle.style.boxShadow = this.shadow\n    }\n    if (this.background) {\n      this.innerCircle.style.background = this.background\n    }\n    if (this.progressTitle && this.circleColor) {\n      this.progressTitle.style.color = this.circleColor\n    }\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      this.updateCircleBackground()\n    }\n  }\n\n  updateCircleBackground() {\n    const position = this.value * 3.6 // 360 = 100%\n    this.circle.style.background = `conic-gradient(${this.circleColor} ${position}deg, ${this.background} 0deg)`\n  }\n\n  render() {\n    return html`\n      <div circle>\n        <div inner-circle>\n          ${this.titleText ? html`<span progress-title>${this.titleText}</span>` : ''}\n          <span>${this.value}${this.suffix}</span>\n        </div>\n      </div>\n    `\n  }\n}\n"]}

package/dist/src/scichart/ox-scichart.d.ts

@@ -13,7 +13,7 @@ declare class OxSciChart extends LitElement {
     attrX: string;
     attrY: string;
     private chart;
-    dataSeries?: any;
+    private dataSeries;
     container: HTMLDivElement;
     static styles: import("lit").CSSResult;
     firstUpdated(): void;
@@ -24,7 +24,7 @@ declare class OxSciChart extends LitElement {
     get dataSet(): {
         xValue: number;
         yValue: number;
-    }[];
+    }[][];
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/src/scichart/ox-scichart.js

@@ -10,6 +10,7 @@ let OxSciChart = class OxSciChart extends LitElement {
         this.attrX = 'x';
         this.attrY = 'y';
         this.chart = null;
+        this.dataSeries = [];
     }
     static { this.styles = css `
     :host {
@@ -59,35 +60,40 @@ let OxSciChart = class OxSciChart extends LitElement {
         }
     }
     updateDataSeries() {
-        if (!this.dataSeries)
+        if (!this.dataSeries?.length)
             return;
-        this.dataSeries.clear();
+        this.dataSeries.forEach(ds => ds.clear());
         const newData = this.dataSet;
-        this.dataSeries.appendRange(newData.map(d => d.xValue), newData.map(d => d.yValue));
+        newData.forEach((data, index) => {
+            this.dataSeries[index].appendRange(data.map(d => d.xValue), data.map(d => d.yValue));
+        });
         this.chart?.sciChartSurface.zoomExtents();
         this.chart?.sciChartSurface.invalidateElement();
     }
     get dataSet() {
-        const { attrX, attrY, data } = this;
+        const { attrX, data } = this;
+        const datasets = this.config?.data?.datasets || [];
         if (!(data instanceof Array)) {
             return [];
         }
-        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[attrY]
-            };
-        })
-            .filter(Boolean);
+        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);
+        });
     }
     render() {
         return html `<div id="container"></div>`;

package/dist/src/scichart/ox-scichart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-scichart.js","sourceRoot":"","sources":["../../../src/scichart/ox-scichart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { property, query, customElement } from 'lit/decorators.js'\nimport { buildSciChart } from './scichart-builder'\n\n// 전역 변수로 SciChart 로딩 상태 관리\ndeclare global {\n  interface Window {\n    sciChartLoaded: boolean\n    sciChartLoadingPromise: Promise<void>\n  }\n}\n\n@customElement('ox-scichart')\nclass OxSciChart extends LitElement {\n  @property({ type: Object }) config: OperatoChart.ChartConfig | null = null\n  @property({ type: Array }) data: { [attr: string]: any }[] = []\n  @property({ type: String, attribute: 'attr-x' }) attrX: string = 'x'\n  @property({ type: String, attribute: 'attr-y' }) attrY: string = 'y'\n\n  private chart: any = null\n  dataSeries?: any\n\n  @query('div#container') container!: HTMLDivElement\n\n  static styles = css`\n    :host {\n      display: block;\n    }\n\n    div {\n      width: 100%;\n      height: 100%;\n    }\n  `\n\n  firstUpdated() {\n    this.loadSciChart()\n  }\n\n  async loadSciChart() {\n    if (!window.sciChartLoaded) {\n      if (!window.sciChartLoadingPromise) {\n        window.sciChartLoadingPromise = new Promise<void>(resolve => {\n          const script = document.createElement('script')\n          script.src = 'https://cdn.jsdelivr.net/npm/scichart/index.min.js'\n          script.crossOrigin = 'anonymous'\n          script.onload = () => {\n            window.sciChartLoaded = true\n\n            SciChart.SciChartSurface.UseCommunityLicense()\n\n            resolve()\n          }\n          document.head.appendChild(script)\n        })\n      }\n\n      await window.sciChartLoadingPromise\n    }\n\n    this.initializeSciChart()\n  }\n\n  async initializeSciChart() {\n    const { chart, dataSeries } = (await buildSciChart(this.config, this.container, {})) || {}\n\n    this.chart = chart\n    this.dataSeries = dataSeries\n\n    this.updateDataSeries()\n  }\n\n  async updated(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has('config')) {\n      await this.initializeSciChart()\n    }\n\n    if (changedProperties.has('data')) {\n      this.updateDataSeries()\n      this.chart?.sciChartSurface.zoomExtents()\n    }\n  }\n\n  updateDataSeries() {\n    if (!this.dataSeries) return\n\n    this.dataSeries.clear()\n    const newData = this.dataSet\n\n    this.dataSeries.appendRange(\n      newData.map(d => d.xValue),\n      newData.map(d => d.yValue)\n    )\n\n    this.chart?.sciChartSurface.zoomExtents()\n    this.chart?.sciChartSurface.invalidateElement()\n  }\n\n  get dataSet(): { xValue: number; yValue: number }[] {\n    const { attrX, attrY, data } = this\n\n    if (!(data instanceof Array)) {\n      return []\n    }\n\n    return data\n      .map(item => {\n        if (!item || typeof item !== 'object') {\n          return\n        }\n\n        const xValue = new Date(item[attrX])\n        if (isNaN(xValue.getTime())) {\n          console.error('Invalid date:', item[attrX])\n          return\n        }\n\n        return {\n          xValue: xValue.getTime() / 1000,\n          yValue: item[attrY]\n        }\n      })\n      .filter(Boolean) as { xValue: number; yValue: number }[]\n  }\n\n  render() {\n    return html`<div id=\"container\"></div>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ox-scichart': OxSciChart\n  }\n}\n"]}
+{"version":3,"file":"ox-scichart.js","sourceRoot":"","sources":["../../../src/scichart/ox-scichart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { property, query, customElement } from 'lit/decorators.js'\nimport { buildSciChart } from './scichart-builder'\n\ndeclare global {\n  interface Window {\n    sciChartLoaded: boolean\n    sciChartLoadingPromise: Promise<void>\n  }\n}\n\n@customElement('ox-scichart')\nclass OxSciChart extends LitElement {\n  @property({ type: Object }) config: OperatoChart.ChartConfig | null = null\n  @property({ type: Array }) data: { [attr: string]: any }[] = []\n  @property({ type: String, attribute: 'attr-x' }) attrX: string = 'x'\n  @property({ type: String, attribute: 'attr-y' }) attrY: string = 'y'\n\n  private chart: any = null\n  private dataSeries: any[] = []\n\n  @query('div#container') container!: HTMLDivElement\n\n  static styles = css`\n    :host {\n      display: block;\n    }\n\n    div {\n      width: 100%;\n      height: 100%;\n    }\n  `\n\n  firstUpdated() {\n    this.loadSciChart()\n  }\n\n  async loadSciChart() {\n    if (!window.sciChartLoaded) {\n      if (!window.sciChartLoadingPromise) {\n        window.sciChartLoadingPromise = new Promise<void>(resolve => {\n          const script = document.createElement('script')\n          script.src = 'https://cdn.jsdelivr.net/npm/scichart/index.min.js'\n          script.crossOrigin = 'anonymous'\n          script.onload = () => {\n            window.sciChartLoaded = true\n\n            SciChart.SciChartSurface.UseCommunityLicense()\n\n            resolve()\n          }\n          document.head.appendChild(script)\n        })\n      }\n\n      await window.sciChartLoadingPromise\n    }\n\n    this.initializeSciChart()\n  }\n\n  async initializeSciChart() {\n    const { chart, dataSeries } = (await buildSciChart(this.config, this.container, {})) || {}\n\n    this.chart = chart\n    this.dataSeries = dataSeries!\n\n    this.updateDataSeries()\n  }\n\n  async updated(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has('config')) {\n      await this.initializeSciChart()\n    }\n\n    if (changedProperties.has('data')) {\n      this.updateDataSeries()\n      this.chart?.sciChartSurface.zoomExtents()\n    }\n  }\n\n  updateDataSeries() {\n    if (!this.dataSeries?.length) return\n\n    this.dataSeries.forEach(ds => ds.clear())\n    const newData = this.dataSet\n\n    newData.forEach((data, index) => {\n      this.dataSeries[index].appendRange(\n        data.map(d => d.xValue),\n        data.map(d => d.yValue)\n      )\n    })\n\n    this.chart?.sciChartSurface.zoomExtents()\n    this.chart?.sciChartSurface.invalidateElement()\n  }\n\n  get dataSet(): { xValue: number; yValue: number }[][] {\n    const { attrX, data } = this\n    const datasets = this.config?.data?.datasets || []\n\n    if (!(data instanceof Array)) {\n      return []\n    }\n\n    return datasets.map(dataset => {\n      return data\n        .map(item => {\n          if (!item || typeof item !== 'object') {\n            return\n          }\n\n          const xValue = new Date(item[attrX])\n          if (isNaN(xValue.getTime())) {\n            console.error('Invalid date:', item[attrX])\n            return\n          }\n\n          return {\n            xValue: xValue.getTime() / 1000,\n            yValue: item[dataset.dataKey!]\n          }\n        })\n        .filter(Boolean) as { xValue: number; yValue: number }[]\n    })\n  }\n\n  render() {\n    return html`<div id=\"container\"></div>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ox-scichart': OxSciChart\n  }\n}\n"]}

package/dist/src/scichart/scichart-builder.d.ts

@@ -4,5 +4,5 @@ export declare function buildSciChart(config: OperatoChart.ChartConfig | undefin
     fontColor?: string;
 }): Promise<{
     chart: any;
-    dataSeries: any;
+    dataSeries: any[];
 } | undefined>;