@operato/chart 2.0.0-beta.25

package/src/chartjs/config-converter.ts

@@ -0,0 +1,307 @@
+import { TinyColor } from '@ctrl/tinycolor'
+
+const _data = [
+  { year: 2010, count: 10 },
+  { year: 2011, count: 20 },
+  { year: 2012, count: 15 },
+  { year: 2013, count: 25 },
+  { year: 2014, count: 22 },
+  { year: 2015, count: 30 },
+  { year: 2016, count: 28 }
+]
+
+function getBaseColorFromTheme(theme?: 'light' | 'dark') {
+  return new TinyColor(theme == 'dark' ? '#fff' : '#000')
+}
+
+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
+  const {
+    theme,
+    animation,
+    tooltip,
+    stacked,
+    legend,
+    scales: fromScales,
+    xGridLine,
+    yGridLine,
+    y2ndGridLine,
+    multiAxis
+  } = options || {}
+  const { datasets = [] } = fromData || {}
+
+  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]
+
+  //   if (stacked && !series.stack) {
+  //     series.stack = 'A'
+  //   }
+
+  //   /*
+  //    * 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
+  //   }
+
+  //   // _setSeriesConfigures(series, chart)
+
+  //   if (!multiAxis) {
+  //     if (series.yAxisID == 'right') series.yAxisID = 'left'
+  //   }
+  // }
+
+  const converted = {
+    type: chartType == 'horizontalBar' ? 'bar' : chartType,
+    options: {
+      animation,
+      stacked,
+      plugins: {
+        legend: setupLegend(legend || {}, { fontSize, fontFamily, fontColor, theme }),
+        tooltip: setupTooltip({ enabled: tooltip }, { fontSize, fontFamily }),
+        title: {
+          /* new option candidate - subtitle */
+          display: false,
+          text: 'Custom Chart Title'
+        },
+        subtitle: {
+          /* new option candidate - subtitle */
+          display: false,
+          text: 'Custom Chart Subtitle'
+        }
+      },
+      scales: toScales,
+      indexAxis: chartType == 'horizontalBar' ? 'y' : chartType != 'pie' ? 'x' : ''
+    },
+    data: {
+      labels: _data.map(row => row.year),
+      datasets: datasets.map(dataset => {
+        return setupSeries(chartType!, {
+          ...dataset,
+          stack:
+            chartType == 'pie' || chartType == 'doughnut'
+              ? undefined
+              : stacked && !dataset.stack
+                ? 'A'
+                : `${dataset.yAxisID} ${dataset.stack || dataset.dataKey}`,
+          type: dataset.type == 'horizontalBar' ? 'bar' : dataset.type,
+          data: _data.map(row => row.count)
+        })
+      })
+    }
+  }
+
+  console.error('converted', config, converted)
+  return converted
+}
+
+function setupLegend(
+  legend: any,
+  {
+    fontSize,
+    fontFamily,
+    fontColor,
+    theme
+  }: { fontSize?: number; fontFamily?: string; fontColor?: string; theme?: 'light' | 'dark' }
+) {
+  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()
+
+  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 || ''
+
+      return `${prefix + label + suffix}`
+    }
+  }
+
+  return tooltip
+}
+
+function setupScale(
+  axis: any,
+  {
+    fontSize,
+    fontFamily,
+    fontColor,
+    theme
+  }: { fontSize?: number; fontFamily?: string; fontColor?: string; theme?: 'light' | 'dark' }
+) {
+  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
+
+  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

@@ -0,0 +1,46 @@
+import { LitElement, html, css } from 'lit'
+import { property, query, customElement } from 'lit/decorators.js'
+import { Chart, ChartConfiguration } from 'chart.js/auto'
+
+@customElement('ox-chart-js')
+class OxChartJs extends LitElement {
+  @property({ type: Object }) config: ChartConfiguration | null = null
+  private chart: Chart | null = null
+
+  @query('canvas') canvas!: HTMLCanvasElement
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    canvas {
+      width: 100%;
+      height: 100%;
+    }
+  `
+
+  firstUpdated() {
+    if (this.config) {
+      this.chart = new Chart(this.canvas, this.config)
+    }
+  }
+
+  updated(changedProperties: Map<string | number | symbol, unknown>) {
+    if (changedProperties.has('config') && this.config) {
+      this.chart && this.chart.destroy()
+      this.chart = new Chart(this.canvas, this.config)
+      console.log('new chart', this.chart)
+    }
+  }
+
+  render() {
+    return html`<canvas></canvas>`
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ox-chart-js': OxChartJs
+  }
+}

package/src/editors/configurer.ts

@@ -0,0 +1,243 @@
+export class Configurer {
+  public value: OperatoChart.ChartConfig
+  public currentSeriesIndex: number = 0
+  public initializer: () => OperatoChart.ChartConfig
+
+  constructor(value: OperatoChart.ChartConfig | null, initializer: () => OperatoChart.ChartConfig) {
+    this.initializer = initializer
+    this.value = value || initializer.call(this)
+  }
+
+  setCurrentSeriesIndex(currentSeriesIndex: number) {
+    this.currentSeriesIndex = currentSeriesIndex
+    this.series = this.datasets[this.currentSeriesIndex]!
+  }
+
+  get series() {
+    console.log('series', this.datasets[this.currentSeriesIndex]!)
+    return this.datasets[this.currentSeriesIndex]!
+  }
+
+  set series(series) {
+    if (!this.data) {
+      this.config.data = { datasets: [series] }
+    } else {
+      this.datasets[this.currentSeriesIndex] = series
+    }
+  }
+
+  get config() {
+    if (!this.value) {
+      this.value = this.initializer.call(this)
+    }
+    return this.value
+  }
+
+  get data() {
+    return this.config.data
+  }
+
+  set data(data) {
+    this.config.data = data
+  }
+
+  get datasets() {
+    if (!this.data.datasets) {
+      this.data.datasets = []
+    }
+    return this.data.datasets
+  }
+
+  set datasets(datasets) {
+    this.datasets = datasets
+  }
+
+  set dataKey(key) {
+    if (this.series) {
+      this.series!.dataKey = key
+    }
+  }
+
+  get dataKey() {
+    return this.series.dataKey
+  }
+
+  get legend() {
+    !this.config.options && (this.config.options = {})
+    return this.config.options.legend
+  }
+
+  set legend(legend) {
+    if (!this.config.options) {
+      this.config.options = {}
+    }
+    this.config.options.legend = legend
+  }
+
+  get theme() {
+    return this.config.options && this.config.options.theme
+  }
+
+  set theme(theme) {
+    !this.config.options && (this.config.options = {})
+    this.config.options.theme = theme
+  }
+
+  get tooltip() {
+    return !this.config.options || this.config.options.tooltip !== false
+  }
+
+  set tooltip(tooltip) {
+    if (!this.config.options) {
+      this.config.options = {}
+    }
+    this.config.options.tooltip = tooltip
+  }
+
+  get animation() {
+    return !this.config.options || this.config.options.animation !== false
+  }
+
+  set animation(animation) {
+    if (!this.config.options) {
+      this.config.options = {}
+    }
+    this.config.options.animation = animation
+  }
+
+  get scales() {
+    if (!this.config.options) {
+      this.config.options = {}
+    }
+    return this.config.options.scales
+  }
+
+  set scales(scales) {
+    !this.config.options && (this.config.options = {})
+    this.config.options.scales = scales
+  }
+
+  get display() {
+    return this.legend && this.legend.display
+  }
+
+  set display(display) {
+    if (!this.legend) {
+      this.legend = {}
+    }
+    this.legend.display = display
+  }
+
+  get position() {
+    if (!this.legend) {
+      this.legend = {}
+    }
+    return this.legend.position
+  }
+
+  set position(position) {
+    if (!this.legend) {
+      this.legend = {}
+    }
+    this.legend.position = position
+  }
+
+  get stacked() {
+    if (!this.config.options) {
+      this.config.options = {}
+    }
+    return this.config.options.stacked
+  }
+
+  set stacked(stacked) {
+    if (!this.config.options) {
+      this.config.options = {}
+    }
+    this.config.options.stacked = stacked
+  }
+
+  get labelDataKey() {
+    return this.data && this.data.labelDataKey
+  }
+
+  set labelDataKey(labelDataKey) {
+    this.data.labelDataKey = labelDataKey
+  }
+
+  set options(options) {
+    this.config.options = options
+  }
+
+  get options() {
+    return this.config.options
+  }
+
+  get color() {
+    var oldVersionColor = this.series.backgroundColor
+    if (this.series.type == 'line') oldVersionColor = this.series.borderColor
+    if (this.series.type == 'radar') oldVersionColor = this.series.borderColor
+    return this.series.color || oldVersionColor
+  }
+
+  set color(color) {
+    this.series.color = color // Array.isArray(color) ? color[0] : color
+    delete this.series.backgroundColor
+    delete this.series.borderColor
+  }
+
+  get xAxes0() {
+    return this.scales!.xAxes![0]
+  }
+
+  set xAxes0(xAxes0) {
+    this.scales!.xAxes![0] = xAxes0
+  }
+
+  get yAxes0() {
+    return this.scales!.yAxes![0]
+  }
+
+  set yAxes0(yAxes0) {
+    this.scales!.yAxes![0] = yAxes0
+  }
+
+  get yAxes1() {
+    return this.scales!.yAxes![1]
+  }
+
+  set yAxes1(yAxes1) {
+    this.scales!.yAxes![1] = yAxes1
+  }
+
+  get multiAxis() {
+    return this.config.options!.multiAxis
+  }
+
+  set multiAxis(multiAxis) {
+    this.config.options!.multiAxis = multiAxis
+  }
+
+  get valuePrefix() {
+    return this.series.valuePrefix
+  }
+
+  set valuePrefix(valuePrefix) {
+    this.series.valuePrefix = valuePrefix
+  }
+
+  get valueSuffix() {
+    return this.series.valueSuffix
+  }
+
+  set valueSuffix(valueSuffix) {
+    this.series.valueSuffix = valueSuffix
+  }
+
+  get displayValue() {
+    return this.series.displayValue
+  }
+
+  set displayValue(displayValue) {
+    this.series.displayValue = displayValue
+  }
+}

package/src/editors/index.ts

@@ -0,0 +1,8 @@
+import './ox-property-editor-chart'
+
+export default [
+  {
+    type: 'chart',
+    element: 'property-editor-chart'
+  }
+]