@operato/chart 8.0.0-beta.0 → 8.0.0-beta.1

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.0.0-beta.1](https://github.com/hatiolab/operato/compare/v8.0.0-beta.0...v8.0.0-beta.1) (2025-01-08)
+
+
+### :bug: Bug Fix
+
+* missing .npmignore ([be05985](https://github.com/hatiolab/operato/commit/be05985abfae4af53501f718dd52932099f7fbcb))
+
+
+
 ## [8.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.56...v8.0.0-beta.0) (2025-01-07)
 
 **Note:** Version bump only for package @operato/chart

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/chart",
   "description": "Webcomponents for chart following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.1",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "src/types.d.ts",
@@ -72,10 +72,10 @@
   "dependencies": {
     "@ctrl/tinycolor": "^4.1.0",
     "@material/web": "^2.0.0",
-    "@operato/input": "^8.0.0-beta.0",
-    "@operato/property-editor": "^8.0.0-beta.0",
-    "@operato/styles": "^8.0.0-beta.0",
-    "@operato/utils": "^8.0.0-beta.0",
+    "@operato/input": "^8.0.0-beta.1",
+    "@operato/property-editor": "^8.0.0-beta.1",
+    "@operato/styles": "^8.0.0-beta.1",
+    "@operato/utils": "^8.0.0-beta.1",
     "d3": "^7.8.5",
     "lit": "^3.1.2",
     "lodash-es": "^4.17.21",
@@ -119,5 +119,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
+  "gitHead": "d5b28a2e9deb632c0dc80132f6a7196dd6fe4220"
 }

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.storybook/main.js

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}']
-}

package/.storybook/preview.js

@@ -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

@@ -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/src/chartjs/config-converter.ts

@@ -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

@@ -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
-  }
-}