npm - @operato/chart - Versions diffs - 7.1.31 → 7.1.33 - Mend

@operato/chart 7.1.31 → 7.1.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/CHANGELOG.md +21 -0
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +9 -9
package/.editorconfig +0 -29
package/.storybook/main.js +0 -3
package/.storybook/preview.js +0 -52
package/.storybook/server.mjs +0 -8
package/demo/index.html +0 -33
package/src/chartjs/config-converter.ts +0 -341
package/src/chartjs/ox-chart-js.ts +0 -207
package/src/editors/configurer.ts +0 -336
package/src/editors/index.ts +0 -8
package/src/editors/input-chart-abstract.ts +0 -202
package/src/editors/input-chart-styles.ts +0 -206
package/src/editors/ox-input-chart-hbar.ts +0 -157
package/src/editors/ox-input-chart-mixed.ts +0 -241
package/src/editors/ox-input-chart-pie.ts +0 -69
package/src/editors/ox-input-chart-radar.ts +0 -56
package/src/editors/ox-input-chart-timeseries.ts +0 -279
package/src/editors/ox-property-editor-chart.ts +0 -72
package/src/editors/templates/annotations.ts +0 -295
package/src/editors/templates/display-value.ts +0 -111
package/src/editors/templates/series.ts +0 -316
package/src/index.ts +0 -0
package/src/progress/ox-progress-circle.ts +0 -133
package/src/scichart/ox-scichart.ts +0 -151
package/src/scichart/scichart-builder.ts +0 -490
package/stories/common.ts +0 -87
package/stories/ox-input-chart-bar.stories.ts +0 -188
package/stories/ox-input-chart-doughnut.stories.ts +0 -130
package/stories/ox-input-chart-hbar.stories.ts +0 -188
package/stories/ox-input-chart-line.stories.ts +0 -198
package/stories/ox-input-chart-pie.stories.ts +0 -130
package/stories/ox-input-chart-polar-area.stories.ts +0 -130
package/stories/ox-input-chart-radar.stories.ts +0 -141
package/stories/ox-input-chart-timeseries.stories.ts +0 -268
package/tsconfig.json +0 -25
package/web-dev-server.config.mjs +0 -27
package/web-test-runner.config.mjs +0 -41
/package/{src → types}/global.d.ts +0 -0
/package/{src → types}/types.d.ts +0 -0

package/.storybook/preview.js DELETED Viewed

@@ -1,52 +0,0 @@
-import { i18next } from '@operato/i18n'
-export const globalTypes = {
-  locale: {
-    name: 'Locale',
-    description: 'Internationalization locale',
-    toolbar: {
-      icon: 'globe',
-      items: [
-        { value: 'en', right: '🇺🇸', title: 'English' },
-        { value: 'ko', right: '🇰🇷', title: '한국어' },
-        { value: 'zh', right: '🇨🇳', title: '中文' },
-        { value: 'ja', right: '🇯🇵', title: '日本語' },
-        { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
-      ],
-      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, theme } = context.globals
-    if (locale) {
-      i18next.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/.storybook/server.mjs DELETED Viewed

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook'
-import baseConfig from '../web-dev-server.config.mjs'
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins]
-})

package/demo/index.html DELETED Viewed

@@ -1,33 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
-    <style>
-      body {
-        background: #fafafa;
-      }
-      a {
-        display: block;
-      }
-    </style>
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="/themes/input-theme.css" rel="stylesheet" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <a href="./index-select.html">select</a>
-  </body>
-</html>

package/src/chartjs/config-converter.ts DELETED Viewed

@@ -1,341 +0,0 @@
-import { TinyColor } from '@ctrl/tinycolor'
-import { format as formatText } from '@operato/utils/format.js'
-function getBaseColorFromTheme(theme?: 'light' | 'dark' | 'auto') {
-  return new TinyColor(theme == 'dark' ? '#fff' : '#000')
-}
-function getThemeFromBrowser() {
-  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-}
-export function convertConfigure(
-  config: OperatoChart.ChartConfig,
-  { fontSize, fontFamily, fontColor }: { fontSize?: number; fontFamily?: string; fontColor?: string }
-) {
-  if (!config) {
-    return
-  }
-  const { type: chartType, options, data: fromData } = config
-  var {
-    theme,
-    animation,
-    tooltip,
-    stacked,
-    legend,
-    scales: fromScales,
-    xGridLine,
-    yGridLine,
-    y2ndGridLine,
-    multiAxis
-  } = options || {}
-  const { datasets = [] } = fromData || {}
-  if (theme === 'auto') {
-    theme = getThemeFromBrowser()
-  }
-  const { xAxes = [], yAxes = [] } = fromScales || {}
-  const toScales = {} as any
-  chartType != 'pie' &&
-    xAxes.forEach((xAxis, index) => {
-      const { axisTitle, barSpacing, categorySpacing, barPercentage, ticks } = xAxis
-      const id = xAxes.length > 1 ? `x${index + 1}` : 'x'
-      toScales[id] = setupScale(
-        {
-          axis: 'x',
-          id,
-          position: 'bottom',
-          display: true,
-          title: {
-            display: !!axisTitle,
-            text: axisTitle
-          },
-          grid: {
-            display: xGridLine
-          },
-          beginAtZero: false,
-          ticks
-        },
-        { fontSize, fontFamily, fontColor, theme }
-      )
-    })
-  chartType != 'pie' &&
-    yAxes.forEach((yAxis, index) => {
-      const { axisTitle, barSpacing, categorySpacing, barPercentage, ticks } = yAxis
-      const id = yAxes.length > 1 ? `right` : 'left'
-      toScales[id] = setupScale(
-        {
-          axis: 'y',
-          id,
-          position: id,
-          display: true,
-          title: {
-            display: !!axisTitle,
-            text: axisTitle
-          },
-          grid: {
-            display: index == 0 ? yGridLine : y2ndGridLine
-          },
-          ticks,
-          stacked: stacked ? true : false
-        },
-        { fontSize, fontFamily, fontColor, theme }
-      )
-    })
-  // setup series configure
-  // for (let i in datasets) {
-  //   let series = datasets[i]
-  //
-  //   /*
-  //    * TODO from chartjs 2.9, categoryPercentage, barPercentage properties move to dataset.
-  //    * so need to move related properties - categorySpacing, barSpacing should be moved to series.
-  //    */
-  //   if (chartType == 'bar') {
-  //     let categorySpacing = (xAxes && xAxes[0].categorySpacing) || 0
-  //     let barSpacing = (xAxes && xAxes[0].barSpacing) || 0
-  //     series.categoryPercentage = 1 - categorySpacing || 1
-  //     series.barPercentage = 1 - barSpacing || 0.8
-  //   } else if (chartType == 'horizontalBar') {
-  //     let categorySpacing = (yAxes && yAxes[0].categorySpacing) || 0
-  //     let barSpacing = (yAxes && yAxes[0].barSpacing) || 0
-  //     series.categoryPercentage = 1 - categorySpacing || 1
-  //     series.barPercentage = 1 - barSpacing || 0.8
-  //   }
-  // }
-  const converted = {
-    type: chartType == 'horizontalBar' ? 'bar' : chartType,
-    options: {
-      animation,
-      stacked,
-      maintainAspectRatio: false,
-      // parsing: false /* recommendations for performance */,
-      // normalized: true /* recommendations for performance */,
-      plugins: {
-        legend: setupLegend(legend || {}, { fontSize, fontFamily, fontColor, theme }),
-        tooltip: setupTooltip(
-          {
-            enabled: tooltip,
-            mode: 'interpolate',
-            intersect: false
-          },
-          { fontSize, fontFamily }
-        ),
-        title: {
-          /* new option candidate - subtitle */
-          display: false,
-          text: 'Custom Chart Title'
-        },
-        subtitle: {
-          /* new option candidate - subtitle */
-          display: false,
-          text: 'Custom Chart Subtitle'
-        },
-        crosshair: {
-          line: {
-            color: '#F66', // crosshair line color
-            width: 1 // crosshair line width
-          },
-          sync: {
-            enabled: true, // enable trace line syncing with other charts
-            group: 1, // chart group
-            suppressTooltips: false // suppress tooltips when showing a synced tracer
-          },
-          zoom: {
-            enabled: true, // enable zooming
-            zoomboxBackgroundColor: 'rgba(66,133,244,0.2)', // background color of zoom box
-            zoomboxBorderColor: '#48F', // border color of zoom box
-            zoomButtonText: 'Reset Zoom', // reset zoom button text
-            zoomButtonClass: 'reset-zoom' // reset zoom button class
-          },
-          callbacks: {
-            beforeZoom: () =>
-              function (start: number, end: number) {
-                // called before zoom, return false to prevent zoom
-                return true
-              },
-            afterZoom: () =>
-              function (start: number, end: number) {
-                // called after zoom
-              }
-          }
-        }
-      },
-      scales: toScales,
-      indexAxis: chartType == 'horizontalBar' ? 'y' : chartType != 'pie' ? 'x' : ''
-    },
-    data: {
-      datasets: datasets.map((dataset, index) => {
-        return setupSeries(chartType!, {
-          ...dataset,
-          stack:
-            chartType == 'pie' || chartType == 'doughnut'
-              ? undefined
-              : stacked && !dataset.stack
-                ? '__all__'
-                : `__${index}__`,
-          type: dataset.type == 'horizontalBar' ? 'bar' : dataset.type
-        })
-      })
-    }
-  }
-  console.error('converted', config, converted)
-  return converted
-}
-function setupLegend(
-  legend: any,
-  {
-    fontSize,
-    fontFamily,
-    fontColor,
-    theme
-  }: { fontSize?: number; fontFamily?: string; fontColor?: string; theme?: 'light' | 'dark' | 'auto' }
-) {
-  legend.labels = legend.labels ? legend.labels : {}
-  if (fontSize) {
-    legend.labels.fontSize = fontSize
-  }
-  if (fontFamily) {
-    legend.labels.fontFamily = fontFamily
-  }
-  var baseColor = getBaseColorFromTheme(theme)
-  legend.labels = legend.labels ? legend.labels : {}
-  legend.labels.fontColor = fontColor ? fontColor : baseColor.clone().setAlpha(0.5).toString()
-  // legend.labels.usePointStyle = true
-  return legend
-}
-function setupTooltip(
-  tooltip: any,
-  {
-    fontSize,
-    fontFamily,
-    fontColor,
-    theme
-  }: { fontSize?: number; fontFamily?: string; fontColor?: string; theme?: 'light' | 'dark' }
-) {
-  if (fontSize) {
-    tooltip.titleFontSize = tooltip.bodyFontSize = tooltip.footerFontSize = fontSize
-  }
-  if (fontFamily) {
-    tooltip.titleFontFamily = tooltip.bodyFontFamily = tooltip.footerFontFamily = fontFamily
-  }
-  tooltip.mode = 'index'
-  tooltip.intersect = false
-  tooltip.callbacks = {
-    ...tooltip.callbacks,
-    label: function ({ dataset, label }: { dataset: any; label: any }) {
-      var prefix = dataset.valuePrefix || ''
-      var suffix = dataset.valueSuffix || ''
-      var format = dataset.valueFormat || ''
-      var stringValue = format ? formatText(format, Number(label)) : Number(label).toLocaleString()
-      return `${prefix + stringValue + suffix}`
-    }
-  }
-  return tooltip
-}
-function setupScale(
-  axis: any,
-  {
-    fontSize,
-    fontFamily,
-    fontColor,
-    theme
-  }: { fontSize?: number; fontFamily?: string; fontColor?: string; theme?: 'light' | 'dark' | 'auto' }
-) {
-  axis.ticks = axis.ticks ? axis.ticks : {}
-  if (fontSize) {
-    axis.ticks.fontSize = fontSize
-  }
-  if (fontFamily) {
-    axis.ticks.fontFamily = fontFamily
-  }
-  axis.pointLabels = {
-    fontSize,
-    fontFamily
-  }
-  /* TODO move min, max, autoMin, autoMax from ticks to axis */
-  const { min, max, autoMin, autoMax } = axis.ticks
-  axis.min = min
-  axis.max = max
-  if (autoMin) {
-    delete axis.min
-  }
-  if (autoMax) {
-    delete axis.max
-  }
-  var baseColor = getBaseColorFromTheme(theme)
-  axis.grid = axis.grid ? axis.grid : {}
-  if (axis.grid) {
-    axis.grid.tickColor = baseColor.clone().setAlpha(0.5).toString()
-    axis.grid.color = baseColor.clone().setAlpha(0.1).toString()
-  }
-  axis.ticks = axis.ticks ? axis.ticks : {}
-  axis.ticks.color = baseColor.clone().setAlpha(0.5).toString()
-  axis.ticks.textStrokeColor = fontColor ? fontColor : baseColor.clone().setAlpha(0.5).toString()
-  return axis
-}
-function setupSeries(chartType: string, series: OperatoChart.Dataset) {
-  var type = series.type || chartType
-  // series.parsing = {
-  //   yAxisKey: series.dataKey
-  // } /* 이 형식의 data는 잘 안되었음. */
-  var color = series.color ? series.color : series.backgroundColor
-  switch (type) {
-    case 'bar':
-    case 'horizontalBar':
-      series.borderColor = series.backgroundColor = color
-      break
-    case 'line':
-    case 'radar':
-      color = series.color ? series.color : series.borderColor
-      series.pointBackgroundColor = series.pointBorderColor = series.borderColor = series.backgroundColor = color
-      series.pointBorderWidth = (series.borderWidth as number) * 0.5
-      series.pointHoverRadius = series.pointRadius
-      if (series.fill == undefined) series.fill = false
-      break
-    default:
-      series.borderColor = series.backgroundColor = color
-      break
-  }
-  return series
-}

package/src/chartjs/ox-chart-js.ts DELETED Viewed

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