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

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 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.2](https://github.com/hatiolab/operato/compare/v8.0.0-beta.1...v8.0.0-beta.2) (2025-01-08)
+
+
+### :bug: Bug Fix
+
+* typo .npmignore ([d9c0c8c](https://github.com/hatiolab/operato/commit/d9c0c8c79abc688c3c2cfb6c37fcb689483a5977))
+
+
+
+## [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.2",
   "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.2",
+    "@operato/property-editor": "^8.0.0-beta.2",
+    "@operato/styles": "^8.0.0-beta.2",
+    "@operato/utils": "^8.0.0-beta.2",
     "d3": "^7.8.5",
     "lit": "^3.1.2",
     "lodash-es": "^4.17.21",
@@ -119,5 +119,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
+  "gitHead": "ee1b5124995accb99272d3b5854f3df1d8746dda"
 }

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/demo/index.html

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

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