@operato/scene-chartjs 0.0.5

package/src/config-converter.ts

@@ -0,0 +1,401 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { TinyColor } from '@ctrl/tinycolor'
+
+export function convertConfigure(chart: SceneChart.ChartConfig) {
+  if (!chart) return
+
+  var data = chart.data || {}
+  var datasets = data.datasets || []
+  var options = chart.options || {}
+  var scales = options.scales || {}
+  var xAxes: Array<SceneChart.ChartXAxe>
+  var yAxes: Array<SceneChart.ChartYAxe>
+  var scale
+  var legend = options.legend || {}
+  var tooltips = (options.tooltips = options.tooltips || {})
+
+  var multiAxis = options.multiAxis
+  var stacked = false
+  var yStacked = [false, false]
+  var fontSize = Number(options.defaultFontSize)
+  var fontFamily = options.defaultFontFamily
+  var fontColor = options.defaultFontColor
+  var theme = options.theme
+
+  // backward compatible
+  _configureBackwardsCompatible(chart.type, options)
+
+  // setup series configure
+  for (let i in datasets) {
+    let series = datasets[i]
+
+    if (options.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 (chart.type == 'bar') {
+      let categorySpacing = (scales.xAxes && scales.xAxes[0].categorySpacing) || 0
+      let barSpacing = (scales.xAxes && scales.xAxes[0].barSpacing) || 0
+
+      series.categoryPercentage = 1 - categorySpacing || 1
+      series.barPercentage = 1 - barSpacing || 0.8
+    } else if (chart.type == 'horizontalBar') {
+      let categorySpacing = (scales.yAxes && scales.yAxes[0].categorySpacing) || 0
+      let barSpacing = (scales.yAxes && scales.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'
+    }
+  }
+
+  delete options.stacked
+
+  var leftSeries = datasets.filter(d => d.yAxisID == 'left')
+  var rightSeries = datasets.filter(d => d.yAxisID == 'right')
+
+  leftSeries.forEach(s => {
+    var filtered = leftSeries.filter(ss => s.stack == ss.stack)
+    if (filtered.length > 1) {
+      yStacked[0] = true
+      return
+    }
+  })
+
+  rightSeries.forEach(s => {
+    var filtered = rightSeries.filter(ss => s.stack == ss.stack)
+    if (filtered.length > 1) {
+      yStacked[1] = true
+      return
+    }
+  })
+
+  stacked = yStacked[0] || yStacked[1]
+
+  // setup options
+  // 1. setup scales
+  switch (chart.type) {
+    case 'line':
+    case 'bar':
+    case 'horizontalBar':
+      xAxes = scales.xAxes || []
+      yAxes = scales.yAxes || []
+
+      if (chart.type == 'horizontalBar') {
+        xAxes = scales.yAxes || []
+        yAxes = scales.xAxes || []
+      }
+
+      // 1-1. setup xAxes
+      for (let i in xAxes) {
+        let axis = xAxes[i]
+        _setStacked(axis, stacked)
+        _setScalesFont(axis, {
+          fontSize,
+          fontFamily
+        })
+        _setScalesAutoMinMax(axis)
+        _setScalesTickRotation(axis)
+        _setAxisTitle(axis)
+        _setScalesTheme(axis, theme, fontColor)
+        _appendTickCallback(axis.ticks)
+
+        axis.gridLines!.display = options.xGridLine
+      }
+
+      // 1-2. setup yAxes
+      for (let i in yAxes) {
+        let axis = yAxes[i]
+
+        //@ts-ignore
+        if (i == 1) {
+          _setMultiAxis(axis, multiAxis)
+        }
+        _setStacked(axis, yStacked[i])
+        _setScalesFont(axis, {
+          fontSize,
+          fontFamily
+        })
+        _setScalesAutoMinMax(axis)
+        _setAxisTitle(axis)
+        _setScalesTheme(axis, theme, fontColor)
+        _appendTickCallback(axis.ticks)
+
+        //@ts-ignore
+        if (i == 0) axis.gridLines.display = options.yGridLine
+
+        //@ts-ignore
+        if (i == 1) axis.gridLines.display = options.y2ndGridLine
+      }
+
+      break
+    case 'pie':
+    case 'doughnut':
+      break
+    default:
+      scale = options.scale || {}
+      _setScalesFont(scale, {
+        fontSize,
+        fontFamily
+      })
+      break
+  }
+
+  // 2. setup legend
+  _setLegendFont(legend, {
+    fontSize,
+    fontFamily
+  })
+  legend.labels && (legend.labels.boxWidth = 15)
+  _setLegendTheme(legend, theme, fontColor)
+
+  // 3. setup tooltips
+  _setTooltipFont(tooltips, {
+    fontSize,
+    fontFamily
+  })
+  _setTooltipCallback(tooltips)
+}
+
+function _configureBackwardsCompatible(type: string, options: SceneChart.ChartOptions) {
+  switch (type) {
+    case 'horizontalBar':
+      if (!options.scales) options.scales = {}
+      break
+    case 'radar':
+    case 'polarArea':
+      if (options.defaultFontColor) {
+        options.scale!.ticks!.fontColor = options.defaultFontColor
+        if (options.scale.pointLabels) {
+          options.scale.pointLabels.fontColor = options.defaultFontColor
+        } else {
+          options.scale.pointLabels = { fontColor: options.defaultFontColor }
+        }
+      }
+      options.scale!.ticks!.backdropColor = options.fillStyle ? options.fillStyle : '#00ff0000'
+      break
+    case 'line':
+    case 'bar':
+      if (!options.scales) options.scales = {}
+      if (!options.scales.yAxes) options.scales.yAxes = []
+
+      if (options.scales.yAxes.length === 1) {
+        let yAxes = options.scales.yAxes
+        yAxes.push({
+          position: 'right',
+          id: 'right',
+          display: options.multiAxis || false,
+          gridLines: {
+            display: (yAxes[0] && yAxes[0].gridLines && yAxes[0].gridLines.display) || false
+          },
+          ticks: {
+            beginAtZero: false,
+            callback: function (value: any, index: number, values: any[]) {
+              var returnValue = value
+              if (typeof returnValue == 'number') {
+                returnValue = returnValue.toLocaleString()
+              }
+
+              return returnValue
+            }
+          }
+        })
+      }
+      break
+    case 'pie':
+    case 'doughnut':
+      break
+    default:
+      if (!options.scale) options.scale = {}
+
+      break
+  }
+}
+
+function _setStacked(axis: SceneChart.ChartXAxe, stacked: boolean) {
+  axis.stacked = stacked
+}
+
+function _setMultiAxis(axis: SceneChart.ChartXAxe, multiAxis: boolean) {
+  axis.display = multiAxis
+}
+
+function _setAxisTitle(axis: SceneChart.ChartXAxe) {
+  if (!axis.scaleLabel) axis.scaleLabel = {}
+  axis.scaleLabel.labelString = axis.axisTitle
+  axis.scaleLabel.display = axis.axisTitle ? true : false
+}
+
+function _setScalesFont(
+  axis: SceneChart.ChartXAxe | SceneChart.RadialLinearScale,
+  { fontSize, fontFamily }: { fontSize: number; fontFamily: string }
+) {
+  axis.ticks = axis.ticks ? axis.ticks : {}
+  axis.ticks.fontSize = fontSize
+
+  if (fontFamily) {
+    axis.ticks.fontFamily = fontFamily
+  }
+
+  ;(axis as SceneChart.RadialLinearScale).pointLabels = {
+    fontSize,
+    fontFamily
+  }
+}
+
+function _setScalesAutoMinMax(axis: SceneChart.ChartXAxe) {
+  axis.ticks = axis.ticks ? axis.ticks : {}
+
+  let autoMin = axis.ticks.autoMin
+  let autoMax = axis.ticks.autoMax
+
+  if (autoMin === true) {
+    delete axis.ticks.min
+  }
+  if (autoMax === true) {
+    delete axis.ticks.max
+  }
+}
+
+function _setScalesTickRotation(axis: SceneChart.ChartXAxe) {
+  axis.ticks = axis.ticks ? axis.ticks : {}
+  // axis.ticks.maxRotation = 0
+}
+
+function _setScalesTheme(axis: SceneChart.ChartXAxe, theme: SceneChart.Theme, fontColor: string) {
+  var baseColor = _getBaseColorFromTheme(theme)
+
+  axis.gridLines = axis.gridLines ? axis.gridLines : {}
+  if (axis.gridLines) {
+    axis.gridLines.zeroLineColor = baseColor.clone().setAlpha(0.5).toString()
+    axis.gridLines.color = baseColor.clone().setAlpha(0.1).toString()
+  }
+
+  axis.ticks = axis.ticks ? axis.ticks : {}
+  axis.ticks.fontColor = fontColor ? fontColor : baseColor.clone().setAlpha(0.5).toString()
+}
+
+function _setLegendFont(
+  legend: SceneChart.ChartLegendOptions,
+  { fontFamily, fontSize }: { fontFamily: string; fontSize: number }
+) {
+  legend.labels = legend.labels ? legend.labels : {}
+  legend.labels.fontSize = fontSize
+  if (fontFamily) legend.labels.fontFamily = fontFamily
+}
+
+function _setLegendTheme(legend: SceneChart.ChartLegendOptions, theme: SceneChart.Theme, fontColor: string) {
+  var baseColor = _getBaseColorFromTheme(theme)
+
+  legend.labels = legend.labels ? legend.labels : {}
+  legend.labels.fontColor = fontColor ? fontColor : baseColor.clone().setAlpha(0.5).toString()
+}
+
+function _getBaseColorFromTheme(theme: SceneChart.Theme) {
+  let darkColor = '#000'
+  let lightColor = '#fff'
+
+  var baseColor
+
+  switch (theme) {
+    case 'light':
+      baseColor = lightColor
+      break
+    case 'dark':
+    default:
+      baseColor = darkColor
+      break
+  }
+
+  baseColor = new TinyColor(baseColor)
+
+  return baseColor
+}
+
+function _setSeriesConfigures(series: SceneChart.ChartDataSets, chart: SceneChart.ChartConfig) {
+  var type = series.type || chart.type
+  var stackGroup = `${type} ${series.yAxisID} ${series.stack || series.dataKey}`
+  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
+  }
+
+  series.stack = stackGroup
+}
+
+function _appendTickCallback(ticks: SceneChart.TickOptions | undefined) {
+  if (!ticks) {
+    return
+  }
+
+  ticks.callback = function (value, index, values) {
+    var returnValue
+    if (!Number.isNaN(Number(value))) {
+      returnValue = Number(value).toLocaleString()
+    } else {
+      returnValue = value
+    }
+
+    if (returnValue) return returnValue
+  }
+}
+
+function _setTooltipFont(
+  tooltips: SceneChart.ChartTooltipOptions,
+  { fontSize, fontFamily }: { fontSize: number; fontFamily: string }
+) {
+  tooltips.titleFontSize = tooltips.bodyFontSize = tooltips.footerFontSize = fontSize
+  if (fontFamily) tooltips.titleFontFamily = tooltips.bodyFontFamily = tooltips.footerFontFamily = fontFamily
+}
+
+function _setTooltipCallback(tooltips: SceneChart.ChartTooltipOptions) {
+  tooltips.callbacks = tooltips.callbacks || {}
+
+  tooltips.intersect = false
+  tooltips.mode = 'index'
+
+  tooltips.callbacks.label = function (tooltipItem: SceneChart.ChartTooltipItem, data: SceneChart.ChartData) {
+    var value = data.datasets?.[tooltipItem.datasetIndex || 0].data?.[tooltipItem.index || 0]
+    var datasetLabel = data.datasets?.[tooltipItem.datasetIndex || 0].label
+    var label = datasetLabel || data.labels?.[tooltipItem.index || 0]
+    var toNumValue = Number(value)
+
+    if (!isNaN(toNumValue)) {
+      value = toNumValue
+    }
+
+    var prefix = data.datasets?.[tooltipItem.datasetIndex || 0].valuePrefix || ''
+    var suffix = data.datasets?.[tooltipItem.datasetIndex || 0].valueSuffix || ''
+
+    return `${label}: ${prefix + value?.toLocaleString() + suffix}`
+  }
+}

package/src/editors/index.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import ChartJSEditor from './property-editor-chartjs'
+
+export default [
+  {
+    type: 'chartjs',
+    element: ChartJSEditor.is
+  }
+]

package/src/editors/property-editor-chartjs-abstract.ts

@@ -0,0 +1,301 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { html, LitElement } from 'lit'
+import { property } from 'lit/decorators.js'
+
+import { random as randomColor, TinyColor } from '@ctrl/tinycolor'
+
+import { PropertyEditorChartJSStyles } from './property-editor-chartjs-styles'
+
+export default class PropertyEditorChartJSAbstract extends LitElement {
+  static styles = [PropertyEditorChartJSStyles]
+
+  @property({ type: Object }) value: any = {}
+  @property({ type: Number }) currentSeriesIndex: number = 0
+
+  render() {
+    return html`
+      <legend><i18n-msg msgid="label.chart">Chart</i18n-msg></legend>
+
+      <label> <i18n-msg msgid="label.theme">theme</i18n-msg> </label>
+      <select value-key="theme" class="select-content" .value=${this.theme}>
+        <option value="dark">dark</option>
+        <option value="light">light</option>
+      </select>
+
+      <input type="checkbox" value-key="display" .checked=${this.display} />
+      <label> <i18n-msg msgid="label.legend">Legend</i18n-msg> </label>
+
+      ${this.display
+        ? html`
+            <label> <i18n-msg msgid="label.position">Position</i18n-msg> </label>
+            <select value-key="position" class="select-content" .value=${this.position}>
+              <option value="top">top</option>
+              <option value="right">right</option>
+              <option value="bottom">bottom</option>
+              <option value="left">left</option>
+            </select>
+          `
+        : html``}
+      ${this.editorTemplate(this)}
+    `
+  }
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this.onValuesChanged.bind(this))
+  }
+
+  displayValueTemplate() {
+    return html`
+      <label> <i18n-msg msgid="label.value-prefix">Value Prefix</i18n-msg> </label>
+      <input type="text" value-key="series.valuePrefix" .value=${this.series.valuePrefix || ''} />
+
+      <label> <i18n-msg msgid="label.value-suffix">Value suffix</i18n-msg> </label>
+      <input type="text" value-key="series.valueSuffix" .value=${this.series.valueSuffix || ''} />
+
+      <input type="checkbox" value-key="series.displayValue" .checked=${this.series.displayValue || false} />
+      <label> <i18n-msg msgid="label.value-display">Value Display</i18n-msg> </label>
+
+      ${this.series.displayValue
+        ? html`
+            <label> <i18n-msg msgid="label.font-color">Font Color</i18n-msg> </label>
+            <things-editor-color
+              value-key="series.defaultFontColor"
+              .value=${this.series.defaultFontColor || '#000'}
+            ></things-editor-color>
+            <label> <i18n-msg msgid="label.font-size">Font Size</i18n-msg> </label>
+            <input type="number" value-key="series.defaultFontSize" .value=${this.series.defaultFontSize || 10} />
+            <label> <i18n-msg msgid="label.position">Position</i18n-msg> </label>
+            <select value-key="series.dataLabelAnchor" .value=${this.series.dataLabelAnchor || 'center'}>
+              <option value="start">Start</option>
+              <option value="center" selected>Center</option>
+              <option value="end">End</option>
+            </select>
+          `
+        : html``}
+    `
+  }
+
+  editorTemplate(props: any) {
+    return html``
+  }
+
+  get data() {
+    return this.value.data
+  }
+
+  set data(data) {
+    this.value.data = data
+  }
+
+  get datasets() {
+    if (!this.data.datasets) this.data.datasets = []
+
+    return this.data.datasets
+  }
+
+  set datasets(datasets) {
+    this.datasets = datasets
+  }
+
+  get series() {
+    if (!this.datasets[this.currentSeriesIndex]) this.datasets[this.currentSeriesIndex] = {}
+    return this.datasets[this.currentSeriesIndex]
+  }
+
+  set series(series) {
+    !this.data ? (this.data = { dataset: [series] }) : (this.datasets[this.currentSeriesIndex] = series)
+  }
+
+  set dataKey(key) {
+    this.series.dataKey = key
+  }
+
+  get dataKey() {
+    return this.series.dataKey
+  }
+
+  get legend() {
+    !this.value.options && (this.value.options = {})
+    return this.value.options.legend
+  }
+
+  set legend(legend) {
+    this.value.options.legend = legend
+  }
+
+  get theme() {
+    return this.value.options && this.value.options.theme
+  }
+
+  set theme(theme) {
+    !this.value.options && (this.value.options = {})
+    this.value.options.theme = theme
+  }
+
+  get scales() {
+    return this.value.options.scales
+  }
+
+  set scales(scales) {
+    !this.value.options && (this.value.options = {})
+    this.value.options.scales = scales
+  }
+
+  get display() {
+    return this.legend && this.legend.display
+  }
+
+  set display(display) {
+    this.legend.display = display
+  }
+
+  get position() {
+    return this.legend.position
+  }
+
+  set position(position) {
+    this.legend.position = position
+  }
+
+  get stacked() {
+    return this.value.options.stacked
+  }
+
+  set stacked(stacked) {
+    this.value.options.stacked = stacked
+  }
+
+  get labelDataKey() {
+    return this.data && this.data.labelDataKey
+  }
+
+  set labelDataKey(labelDataKey) {
+    this.data.labelDataKey = labelDataKey
+  }
+
+  set options(options) {
+    this.value.options = options
+  }
+
+  get options() {
+    return this.value.options
+  }
+
+  onValuesChanged(e: Event) {
+    var element = e.target as HTMLInputElement
+    var key = element.getAttribute('value-key')
+    var value = element.value
+
+    if (!key) {
+      return
+    }
+
+    value = this._getElementValue(element)
+
+    var attrs = key.split('.')
+    var attr = attrs.shift() || ''
+    var variable = this
+
+    while (attrs.length > 0) {
+      //@ts-ignore
+      variable = variable[attr]
+      attr = attrs.shift() || ''
+    }
+
+    //@ts-ignore
+    variable[attr] = value
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+    this.requestUpdate()
+  }
+
+  onTapAddTab(e: Event) {
+    if (!this.value.data.datasets) return
+
+    var lastSeriesIndex = this.value.data.datasets.length
+    var chartType = this.series.type || this.value.type
+    var lastSeriesColor = new TinyColor(this.datasets[lastSeriesIndex - 1].backgroundColor)
+
+    var seriesModel = this._getSeriesModel({
+      chartType,
+      datasetsLength: lastSeriesIndex,
+      lastSeriesColor
+    })
+
+    this.value.data.datasets.push(seriesModel)
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+    this.currentSeriesIndex = lastSeriesIndex
+  }
+
+  onTapRemoveCurrentTab(e: Event) {
+    if (!this.value.data.datasets) return
+
+    var currIndex = this.currentSeriesIndex
+    this.value.data.datasets.splice(currIndex, 1)
+
+    currIndex--
+
+    if (currIndex < 0) currIndex = 0
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+    this.currentSeriesIndex = currIndex
+
+    this.requestUpdate()
+  }
+
+  _getSeriesModel({
+    chartType,
+    datasetsLength,
+    lastSeriesColor
+  }: {
+    chartType: any
+    datasetsLength: number
+    lastSeriesColor: TinyColor
+  }) {
+    var addSeriesOption: any = {
+      label: `series ${datasetsLength + 1}`,
+      data: [],
+      borderWidth: 1,
+      dataKey: '',
+      yAxisID: 'left',
+      color: randomColor({
+        hue: lastSeriesColor as any
+      }).toRgbString()
+    }
+
+    addSeriesOption.type = addSeriesOption.chartType = chartType
+    return addSeriesOption
+  }
+
+  _getElementValue(element: HTMLElement) {
+    switch (element.tagName) {
+      case 'INPUT':
+        switch ((element as HTMLInputElement).type) {
+          case 'checkbox':
+            return (element as HTMLInputElement).checked
+          case 'number':
+            return Number((element as HTMLInputElement).value) || 0
+          case 'text':
+            return String((element as HTMLInputElement).value)
+        }
+
+      case 'PAPER-BUTTON':
+        return (element as any).active
+
+      case 'PAPER-LISTBOX':
+        return (element as any).selected
+
+      case 'THINGS-EDITOR-MULTIPLE-COLOR':
+        return (element as any).values
+
+      case 'THINGS-EDITOR-ANGLE-INPUT':
+        return Number((element as any).radian) || 0
+
+      default:
+        return (element as any).value
+    }
+  }
+}