@operato/chart 7.0.4 → 7.0.6

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [7.0.6](https://github.com/hatiolab/operato/compare/v7.0.5...v7.0.6) (2024-07-04)
+
+
+### :bug: Bug Fix
+
+* wrong indexing for chart series tab ([aff16b7](https://github.com/hatiolab/operato/commit/aff16b76d19579bbf588f858443e2d8eac79437f))
+
+
+
+### [7.0.5](https://github.com/hatiolab/operato/compare/v7.0.4...v7.0.5) (2024-07-04)
+
+
+### :bug: Bug Fix
+
+* all number-formatter => @operato/utils ([1bdf7de](https://github.com/hatiolab/operato/commit/1bdf7de06096ed7c4c3adc189765b17f7d553ec8))
+* expose OperatoChart type from @operato/chart ([3db6359](https://github.com/hatiolab/operato/commit/3db635976a971758033636920c2f4d477365b54c))
+
+
+
 ### [7.0.4](https://github.com/hatiolab/operato/compare/v7.0.3...v7.0.4) (2024-07-03)
 
 

package/dist/src/chartjs/config-converter.js

@@ -1,5 +1,5 @@
 import { TinyColor } from '@ctrl/tinycolor';
-import { format as formatText } from '../utils/text-formatter';
+import { format as formatText } from '@operato/utils/format.js';
 function getBaseColorFromTheme(theme) {
     return new TinyColor(theme == 'dark' ? '#fff' : '#000');
 }

package/dist/src/chartjs/config-converter.js.map

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

package/dist/src/chartjs/ox-chart-js.js

@@ -3,8 +3,8 @@ import 'chartjs-plugin-datalabels';
 import { LitElement, html, css } from 'lit';
 import { property, query, customElement } from 'lit/decorators.js';
 import { Chart } from 'chart.js/auto';
+import { format as formatText } from '@operato/utils/format.js';
 import { convertConfigure } from './config-converter';
-import { format as formatText } from '../utils/text-formatter';
 let OxChartJs = class OxChartJs extends LitElement {
     constructor() {
         super(...arguments);

package/dist/src/chartjs/ox-chart-js.js.map

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

package/dist/src/editors/input-chart-abstract.d.ts

@@ -18,7 +18,7 @@ export declare class InputChartAbstract extends OxFormField {
     getDefaultAxisOptions(): OperatoChart.AxisOptions;
     onValuesChanged(e: Event): void;
     onTapAddTab(e: Event): void;
-    onTapRemoveCurrentTab(e: Event): void;
+    onTapRemoveCurrentTab(index: number): void;
     _getSeriesModel({ chartType, datasetsLength, lastSeriesColor }: {
         chartType: string;
         datasetsLength: number;

package/dist/src/editors/input-chart-abstract.js

@@ -245,17 +245,14 @@ export class InputChartAbstract extends OxFormField {
         configurer.currentSeriesIndex = lastSeriesIndex;
         this.value = { ...this.configurer.value };
     }
-    onTapRemoveCurrentTab(e) {
+    onTapRemoveCurrentTab(index) {
         const configurer = this.configurer;
-        if (!configurer.config.data.datasets)
+        if (!configurer.config.data.datasets) {
             return;
-        let currIndex = configurer.currentSeriesIndex;
-        this.configurer.data.datasets.splice(currIndex, 1);
-        currIndex--;
-        if (currIndex < 0)
-            currIndex = 0;
+        }
+        this.configurer.data.datasets.splice(index, 1);
         this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
-        configurer.currentSeriesIndex = currIndex;
+        configurer.currentSeriesIndex = Math.max(0, configurer.currentSeriesIndex - 1);
         this.requestUpdate();
     }
     _getSeriesModel({ chartType, datasetsLength, lastSeriesColor }) {

package/dist/src/editors/input-chart-abstract.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-chart-abstract.js","sourceRoot":"","sources":["../../../src/editors/input-chart-abstract.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { random as randomColor, TinyColor } from '@ctrl/tinycolor'\n\nimport { InputChartStyles } from './input-chart-styles'\nimport { Configurer } from './configurer'\nimport { OxFormField } from '@operato/input'\n\nexport class InputChartAbstract extends OxFormField {\n  static styles = [InputChartStyles]\n\n  @property({ type: Object }) value: OperatoChart.ChartConfig | null = null\n  @property({ type: String, attribute: 'chart-type' }) chartType: OperatoChart.ChartType\n\n  private _configurer?: Configurer\n\n  get configurer() {\n    if (!this._configurer) {\n      this._configurer = new Configurer(this.value, () => {\n        return this.value || this.getDefaultChartConfig(this.chartType, this.getDefaultDatasets())\n      })\n    }\n    return this._configurer\n  }\n\n  render() {\n    const configurer = this.configurer\n\n    return html`\n      <legend><ox-i18n msgid=\"label.chart\">Chart</ox-i18n></legend>\n\n      <label for=\"theme\"> <ox-i18n msgid=\"label.theme\">Theme</ox-i18n> </label>\n      <select id=\"theme\" value-key=\"theme\" class=\"select-content\" .value=${configurer.theme || 'light'}>\n        <option value=\"auto\">auto</option>\n        <option value=\"dark\">dark</option>\n        <option value=\"light\" checked>light</option>\n      </select>\n\n      <input id=\"tooltip\" type=\"checkbox\" value-key=\"tooltip\" ?checked=${configurer.tooltip} />\n      <label for=\"tooltip\"> <ox-i18n msgid=\"label.tooltip\">Tooltip</ox-i18n> </label>\n\n      <input id=\"animation\" type=\"checkbox\" value-key=\"animation\" ?checked=${configurer.animation} />\n      <label for=\"animation\"> <ox-i18n msgid=\"label.animation\">Animation</ox-i18n> </label>\n\n      <input id=\"display\" type=\"checkbox\" value-key=\"display\" ?checked=${configurer.display} />\n      <label for=\"display\"> <ox-i18n msgid=\"label.legend\">Legend</ox-i18n> </label>\n\n      <input id=\"stacked\" type=\"checkbox\" value-key=\"stacked\" ?checked=${configurer.stacked} />\n      <label for=\"stacked\"> <ox-i18n msgid=\"label.stacked\">Stacked</ox-i18n> </label>\n\n      ${configurer.display\n        ? html`\n            <label for=\"position\"> <ox-i18n msgid=\"label.position\">Position</ox-i18n> </label>\n            <select id=\"position\" value-key=\"position\" class=\"select-content\" .value=${configurer.position || ''}>\n              <option value=\"top\">top</option>\n              <option value=\"right\">right</option>\n              <option value=\"bottom\">bottom</option>\n              <option value=\"left\">left</option>\n            </select>\n          `\n        : html``}\n      ${this.subTemplate()}\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.renderRoot.addEventListener('change', this.onValuesChanged.bind(this))\n  }\n\n  displayValueTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <label for=\"value-format\"> <ox-i18n msgid=\"label.value-format\">Value Format</ox-i18n> </label>\n      <input\n        id=\"value-format\"\n        type=\"text\"\n        value-key=\"series.valueFormat\"\n        .value=${configurer.series.valueFormat || ''}\n        list=\"format-list\"\n      />\n      <datalist id=\"format-list\">\n        <option value=\"#,###.\"></option>\n        <option value=\"#,###.#\"></option>\n        <option value=\"#,###.0\"></option>\n        <option value=\"#,##0.#\"></option>\n        <option value=\"#,##0.0\"></option>\n        <option value=\"#,##0.0%\"></option>\n      </datalist>\n\n      <label for=\"value-prefix\"> <ox-i18n msgid=\"label.value-prefix\">Value Prefix</ox-i18n> </label>\n      <input\n        id=\"value-prefix\"\n        type=\"text\"\n        value-key=\"series.valuePrefix\"\n        .value=${configurer.series.valuePrefix || ''}\n      />\n\n      <label for=\"value-suffix\"> <ox-i18n msgid=\"label.value-suffix\">Value Suffix</ox-i18n> </label>\n      <input\n        id=\"value-suffix\"\n        type=\"text\"\n        value-key=\"series.valueSuffix\"\n        .value=${configurer.series.valueSuffix || ''}\n      />\n\n      <input\n        id=\"display-value\"\n        type=\"checkbox\"\n        value-key=\"series.displayValue\"\n        ?checked=${!!configurer.series.displayValue}\n      />\n      <label for=\"display-value\"> <ox-i18n msgid=\"label.value-display\">Value Display</ox-i18n> </label>\n\n      ${configurer.series.displayValue\n        ? html`\n            <label for=\"font-color\"> <ox-i18n msgid=\"label.font-color\">Font Color</ox-i18n> </label>\n            <ox-input-color\n              id=\"font-color\"\n              value-key=\"series.defaultFontColor\"\n              .value=${configurer.series.defaultFontColor || '#000'}\n            ></ox-input-color>\n            <label for=\"font-size\"> <ox-i18n msgid=\"label.font-size\">Font Size</ox-i18n> </label>\n            <input\n              id=\"font-size\"\n              type=\"number\"\n              value-key=\"series.defaultFontSize\"\n              value=${configurer.series.defaultFontSize || 10}\n            />\n            <label for=\"data-label-anchor\"> <ox-i18n msgid=\"label.position\">Position</ox-i18n> </label>\n            <select\n              id=\"data-label-anchor\"\n              value-key=\"series.dataLabelAnchor\"\n              value=${configurer.series.dataLabelAnchor || 'center'}\n            >\n              <option value=\"start\">Start</option>\n              <option value=\"center\" selected>Center</option>\n              <option value=\"end\">End</option>\n            </select>\n          `\n        : html``}\n    `\n  }\n\n  subTemplate() {\n    return html``\n  }\n\n  getDefaultDatasets(): OperatoChart.Dataset[] {\n    return [this.getDefaultDataset('bar')]\n  }\n\n  getDefaultDataset(seriesType: 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie'): OperatoChart.Dataset {\n    return {\n      label: 'Series 1',\n      data: [],\n      borderWidth: 1,\n      dataKey: '',\n      yAxisID: 'left',\n      color: randomColor({\n        hue: new TinyColor('#fff').clone().toString()\n      }).toRgbString(),\n      backgroundColor: '#FFFFFF',\n      type: seriesType,\n      stack: '',\n      fill: false,\n      lineTension: 0.4,\n      pointStyle: 'circle',\n      pointRadius: 3,\n      valuePrefix: '',\n      valueSuffix: '',\n      displayValue: false\n    }\n  }\n\n  getDefaultChartConfig(type: OperatoChart.ChartType, datasets?: OperatoChart.Dataset[]): OperatoChart.ChartConfig {\n    return {\n      data: {\n        datasets: datasets || [],\n        labelDataKey: ''\n      },\n      options: {\n        theme: 'light',\n        tooltip: true,\n        animation: true,\n        legend: {\n          display: true,\n          position: 'top'\n        },\n        scales: {\n          xAxes: [this.getDefaultAxisOptions()],\n          yAxes: [this.getDefaultAxisOptions()]\n        },\n        stacked: false,\n        xGridLine: true,\n        yGridLine: true,\n        y2ndGridLine: false,\n        multiAxis: false\n      },\n      type\n    }\n  }\n\n  getDefaultAxisOptions(): OperatoChart.AxisOptions {\n    return {\n      axisTitle: '',\n      barSpacing: 0,\n      categorySpacing: 0,\n      barPercentage: 0.9,\n      ticks: {\n        display: true,\n        autoMin: true,\n        autoMax: true,\n        min: undefined,\n        max: undefined,\n        stepSize: undefined\n      }\n    }\n  }\n\n  onValuesChanged(e: Event) {\n    e.stopPropagation()\n\n    const element = e.target as HTMLInputElement\n    let key = element.getAttribute('value-key')\n    let value = element.value\n\n    if (!key) {\n      return\n    }\n\n    value = this._getElementValue(element)\n\n    const attrs = key.split('.')\n    let attr = attrs.shift() || ''\n    let variable: any = this.configurer\n\n    while (attrs.length > 0) {\n      variable = variable[attr]\n      attr = attrs.shift() || ''\n    }\n\n    variable[attr] = value\n\n    this.value = { ...this.configurer.value }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    this.requestUpdate()\n  }\n\n  onTapAddTab(e: Event) {\n    const configurer = this.configurer\n\n    if (!configurer.config.data.datasets) return\n\n    const lastSeriesIndex = configurer.config.data.datasets.length\n    const chartType = configurer.series.type || configurer.config.type\n    const color = configurer.datasets[lastSeriesIndex - 1]?.backgroundColor\n    const lastSeriesColor = new TinyColor(Array.isArray(color) ? color[0] : color)\n\n    const seriesModel = this._getSeriesModel({\n      chartType: chartType!,\n      datasetsLength: lastSeriesIndex,\n      lastSeriesColor\n    })\n\n    configurer.config.data.datasets.push(seriesModel)\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    configurer.currentSeriesIndex = lastSeriesIndex\n\n    this.value = { ...this.configurer.value }\n  }\n\n  onTapRemoveCurrentTab(e: Event) {\n    const configurer = this.configurer\n\n    if (!configurer.config.data.datasets) return\n\n    let currIndex = configurer.currentSeriesIndex\n    this.configurer.data.datasets.splice(currIndex, 1)\n\n    currIndex--\n\n    if (currIndex < 0) currIndex = 0\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    configurer.currentSeriesIndex = currIndex\n\n    this.requestUpdate()\n  }\n\n  _getSeriesModel({\n    chartType,\n    datasetsLength,\n    lastSeriesColor\n  }: {\n    chartType: string\n    datasetsLength: number\n    lastSeriesColor: TinyColor\n  }) {\n    const addSeriesOption: any = {\n      label: `series ${datasetsLength + 1}`,\n      data: [],\n      borderWidth: 1,\n      dataKey: '',\n      yAxisID: 'left',\n      color: randomColor({\n        hue: lastSeriesColor.toHsv().h\n      }).toRgbString(),\n      stack: ''\n    }\n\n    addSeriesOption.type = addSeriesOption.chartType = chartType\n    return addSeriesOption\n  }\n\n  _getElementValue(element: HTMLElement) {\n    switch (element.tagName) {\n      case 'INPUT':\n        switch ((element as HTMLInputElement).type) {\n          case 'checkbox':\n            return (element as HTMLInputElement).checked\n          case 'number':\n            return Number((element as HTMLInputElement).value) || 0\n          case 'text':\n            return String((element as HTMLInputElement).value)\n        }\n      default:\n        return (element as any).value\n    }\n  }\n}\n"]}
+{"version":3,"file":"input-chart-abstract.js","sourceRoot":"","sources":["../../../src/editors/input-chart-abstract.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { random as randomColor, TinyColor } from '@ctrl/tinycolor'\n\nimport { InputChartStyles } from './input-chart-styles'\nimport { Configurer } from './configurer'\nimport { OxFormField } from '@operato/input'\n\nexport class InputChartAbstract extends OxFormField {\n  static styles = [InputChartStyles]\n\n  @property({ type: Object }) value: OperatoChart.ChartConfig | null = null\n  @property({ type: String, attribute: 'chart-type' }) chartType: OperatoChart.ChartType\n\n  private _configurer?: Configurer\n\n  get configurer() {\n    if (!this._configurer) {\n      this._configurer = new Configurer(this.value, () => {\n        return this.value || this.getDefaultChartConfig(this.chartType, this.getDefaultDatasets())\n      })\n    }\n    return this._configurer\n  }\n\n  render() {\n    const configurer = this.configurer\n\n    return html`\n      <legend><ox-i18n msgid=\"label.chart\">Chart</ox-i18n></legend>\n\n      <label for=\"theme\"> <ox-i18n msgid=\"label.theme\">Theme</ox-i18n> </label>\n      <select id=\"theme\" value-key=\"theme\" class=\"select-content\" .value=${configurer.theme || 'light'}>\n        <option value=\"auto\">auto</option>\n        <option value=\"dark\">dark</option>\n        <option value=\"light\" checked>light</option>\n      </select>\n\n      <input id=\"tooltip\" type=\"checkbox\" value-key=\"tooltip\" ?checked=${configurer.tooltip} />\n      <label for=\"tooltip\"> <ox-i18n msgid=\"label.tooltip\">Tooltip</ox-i18n> </label>\n\n      <input id=\"animation\" type=\"checkbox\" value-key=\"animation\" ?checked=${configurer.animation} />\n      <label for=\"animation\"> <ox-i18n msgid=\"label.animation\">Animation</ox-i18n> </label>\n\n      <input id=\"display\" type=\"checkbox\" value-key=\"display\" ?checked=${configurer.display} />\n      <label for=\"display\"> <ox-i18n msgid=\"label.legend\">Legend</ox-i18n> </label>\n\n      <input id=\"stacked\" type=\"checkbox\" value-key=\"stacked\" ?checked=${configurer.stacked} />\n      <label for=\"stacked\"> <ox-i18n msgid=\"label.stacked\">Stacked</ox-i18n> </label>\n\n      ${configurer.display\n        ? html`\n            <label for=\"position\"> <ox-i18n msgid=\"label.position\">Position</ox-i18n> </label>\n            <select id=\"position\" value-key=\"position\" class=\"select-content\" .value=${configurer.position || ''}>\n              <option value=\"top\">top</option>\n              <option value=\"right\">right</option>\n              <option value=\"bottom\">bottom</option>\n              <option value=\"left\">left</option>\n            </select>\n          `\n        : html``}\n      ${this.subTemplate()}\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.renderRoot.addEventListener('change', this.onValuesChanged.bind(this))\n  }\n\n  displayValueTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <label for=\"value-format\"> <ox-i18n msgid=\"label.value-format\">Value Format</ox-i18n> </label>\n      <input\n        id=\"value-format\"\n        type=\"text\"\n        value-key=\"series.valueFormat\"\n        .value=${configurer.series.valueFormat || ''}\n        list=\"format-list\"\n      />\n      <datalist id=\"format-list\">\n        <option value=\"#,###.\"></option>\n        <option value=\"#,###.#\"></option>\n        <option value=\"#,###.0\"></option>\n        <option value=\"#,##0.#\"></option>\n        <option value=\"#,##0.0\"></option>\n        <option value=\"#,##0.0%\"></option>\n      </datalist>\n\n      <label for=\"value-prefix\"> <ox-i18n msgid=\"label.value-prefix\">Value Prefix</ox-i18n> </label>\n      <input\n        id=\"value-prefix\"\n        type=\"text\"\n        value-key=\"series.valuePrefix\"\n        .value=${configurer.series.valuePrefix || ''}\n      />\n\n      <label for=\"value-suffix\"> <ox-i18n msgid=\"label.value-suffix\">Value Suffix</ox-i18n> </label>\n      <input\n        id=\"value-suffix\"\n        type=\"text\"\n        value-key=\"series.valueSuffix\"\n        .value=${configurer.series.valueSuffix || ''}\n      />\n\n      <input\n        id=\"display-value\"\n        type=\"checkbox\"\n        value-key=\"series.displayValue\"\n        ?checked=${!!configurer.series.displayValue}\n      />\n      <label for=\"display-value\"> <ox-i18n msgid=\"label.value-display\">Value Display</ox-i18n> </label>\n\n      ${configurer.series.displayValue\n        ? html`\n            <label for=\"font-color\"> <ox-i18n msgid=\"label.font-color\">Font Color</ox-i18n> </label>\n            <ox-input-color\n              id=\"font-color\"\n              value-key=\"series.defaultFontColor\"\n              .value=${configurer.series.defaultFontColor || '#000'}\n            ></ox-input-color>\n            <label for=\"font-size\"> <ox-i18n msgid=\"label.font-size\">Font Size</ox-i18n> </label>\n            <input\n              id=\"font-size\"\n              type=\"number\"\n              value-key=\"series.defaultFontSize\"\n              value=${configurer.series.defaultFontSize || 10}\n            />\n            <label for=\"data-label-anchor\"> <ox-i18n msgid=\"label.position\">Position</ox-i18n> </label>\n            <select\n              id=\"data-label-anchor\"\n              value-key=\"series.dataLabelAnchor\"\n              value=${configurer.series.dataLabelAnchor || 'center'}\n            >\n              <option value=\"start\">Start</option>\n              <option value=\"center\" selected>Center</option>\n              <option value=\"end\">End</option>\n            </select>\n          `\n        : html``}\n    `\n  }\n\n  subTemplate() {\n    return html``\n  }\n\n  getDefaultDatasets(): OperatoChart.Dataset[] {\n    return [this.getDefaultDataset('bar')]\n  }\n\n  getDefaultDataset(seriesType: 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie'): OperatoChart.Dataset {\n    return {\n      label: 'Series 1',\n      data: [],\n      borderWidth: 1,\n      dataKey: '',\n      yAxisID: 'left',\n      color: randomColor({\n        hue: new TinyColor('#fff').clone().toString()\n      }).toRgbString(),\n      backgroundColor: '#FFFFFF',\n      type: seriesType,\n      stack: '',\n      fill: false,\n      lineTension: 0.4,\n      pointStyle: 'circle',\n      pointRadius: 3,\n      valuePrefix: '',\n      valueSuffix: '',\n      displayValue: false\n    }\n  }\n\n  getDefaultChartConfig(type: OperatoChart.ChartType, datasets?: OperatoChart.Dataset[]): OperatoChart.ChartConfig {\n    return {\n      data: {\n        datasets: datasets || [],\n        labelDataKey: ''\n      },\n      options: {\n        theme: 'light',\n        tooltip: true,\n        animation: true,\n        legend: {\n          display: true,\n          position: 'top'\n        },\n        scales: {\n          xAxes: [this.getDefaultAxisOptions()],\n          yAxes: [this.getDefaultAxisOptions()]\n        },\n        stacked: false,\n        xGridLine: true,\n        yGridLine: true,\n        y2ndGridLine: false,\n        multiAxis: false\n      },\n      type\n    }\n  }\n\n  getDefaultAxisOptions(): OperatoChart.AxisOptions {\n    return {\n      axisTitle: '',\n      barSpacing: 0,\n      categorySpacing: 0,\n      barPercentage: 0.9,\n      ticks: {\n        display: true,\n        autoMin: true,\n        autoMax: true,\n        min: undefined,\n        max: undefined,\n        stepSize: undefined\n      }\n    }\n  }\n\n  onValuesChanged(e: Event) {\n    e.stopPropagation()\n\n    const element = e.target as HTMLInputElement\n    let key = element.getAttribute('value-key')\n    let value = element.value\n\n    if (!key) {\n      return\n    }\n\n    value = this._getElementValue(element)\n\n    const attrs = key.split('.')\n    let attr = attrs.shift() || ''\n    let variable: any = this.configurer\n\n    while (attrs.length > 0) {\n      variable = variable[attr]\n      attr = attrs.shift() || ''\n    }\n\n    variable[attr] = value\n\n    this.value = { ...this.configurer.value }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    this.requestUpdate()\n  }\n\n  onTapAddTab(e: Event) {\n    const configurer = this.configurer\n\n    if (!configurer.config.data.datasets) return\n\n    const lastSeriesIndex = configurer.config.data.datasets.length\n    const chartType = configurer.series.type || configurer.config.type\n    const color = configurer.datasets[lastSeriesIndex - 1]?.backgroundColor\n    const lastSeriesColor = new TinyColor(Array.isArray(color) ? color[0] : color)\n\n    const seriesModel = this._getSeriesModel({\n      chartType: chartType!,\n      datasetsLength: lastSeriesIndex,\n      lastSeriesColor\n    })\n\n    configurer.config.data.datasets.push(seriesModel)\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    configurer.currentSeriesIndex = lastSeriesIndex\n\n    this.value = { ...this.configurer.value }\n  }\n\n  onTapRemoveCurrentTab(index: number) {\n    const configurer = this.configurer\n\n    if (!configurer.config.data.datasets) {\n      return\n    }\n\n    this.configurer.data.datasets.splice(index, 1)\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    configurer.currentSeriesIndex = Math.max(0, configurer.currentSeriesIndex - 1)\n\n    this.requestUpdate()\n  }\n\n  _getSeriesModel({\n    chartType,\n    datasetsLength,\n    lastSeriesColor\n  }: {\n    chartType: string\n    datasetsLength: number\n    lastSeriesColor: TinyColor\n  }) {\n    const addSeriesOption: any = {\n      label: `series ${datasetsLength + 1}`,\n      data: [],\n      borderWidth: 1,\n      dataKey: '',\n      yAxisID: 'left',\n      color: randomColor({\n        hue: lastSeriesColor.toHsv().h\n      }).toRgbString(),\n      stack: ''\n    }\n\n    addSeriesOption.type = addSeriesOption.chartType = chartType\n    return addSeriesOption\n  }\n\n  _getElementValue(element: HTMLElement) {\n    switch (element.tagName) {\n      case 'INPUT':\n        switch ((element as HTMLInputElement).type) {\n          case 'checkbox':\n            return (element as HTMLInputElement).checked\n          case 'number':\n            return Number((element as HTMLInputElement).value) || 0\n          case 'text':\n            return String((element as HTMLInputElement).value)\n        }\n      default:\n        return (element as any).value\n    }\n  }\n}\n"]}

package/dist/src/editors/input-chart-multi-series-abstract.js

@@ -242,7 +242,7 @@ export class InputChartMultiSeriesAbstract extends InputChartAbstract {
                 >
                   ${index + 1}
                   ${!configurer.datasets || (configurer.datasets.length != 1 && configurer.currentSeriesIndex == index)
-            ? html ` <md-icon @tap="${(e) => this.onTapRemoveCurrentTab(e)}"> close </md-icon> `
+            ? html ` <md-icon @tap=${(e) => this.onTapRemoveCurrentTab(index)}> close </md-icon> `
             : html ``}
                 </div>
               `)}

package/dist/src/editors/input-chart-multi-series-abstract.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-chart-multi-series-abstract.js","sourceRoot":"","sources":["../../../src/editors/input-chart-multi-series-abstract.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { query } from 'lit/decorators.js'\n\nimport { MdIcon } from '@material/web/icon/icon.js'\n\nimport { InputChartAbstract } from './input-chart-abstract'\n\nexport class InputChartMultiSeriesAbstract extends InputChartAbstract {\n  static styles = [...InputChartAbstract.styles]\n\n  @query('#tabs') tabs!: HTMLElement\n  @query('#tab-nav-left-button') tabNavLeftButton!: MdIcon\n  @query('#tab-nav-right-button') tabNavRightButton!: MdIcon\n\n  get tabContainer(): HTMLElement | null | undefined {\n    return this.tabs\n  }\n\n  firstUpdated() {\n    this.tabContainer?.addEventListener('scroll', e => {\n      this._onTabScroll(e)\n    })\n  }\n\n  subTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <input id=\"multi-axis\" type=\"checkbox\" value-key=\"multiAxis\" ?checked=${configurer.multiAxis} />\n      <label for=\"multi-axis\"> <ox-i18n msgid=\"label.multi-axis\">Multi Axis</ox-i18n> </label>\n\n      <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n\n      ${this.multiSeriesTabTemplate()}\n\n      <legend><ox-i18n msgid=\"label.x-axes\">X Axes</ox-i18n></legend>\n\n      <label for=\"label-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n      <input id=\"label-data-key\" type=\"text\" value-key=\"labelDataKey\" .value=${configurer.labelDataKey || ''} />\n\n      <label for=\"axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input id=\"axis-title\" type=\"text\" value-key=\"xAxes0.axisTitle\" .value=${configurer.xAxes0.axisTitle || ''} />\n\n      <label for=\"x-axes0-thickness\"> <ox-i18n msgid=\"label.thickness\">Thickness</ox-i18n> </label>\n      <input\n        id=\"x-axes0-thickness\"\n        type=\"number\"\n        value-key=\"xAxes0.barPercentage\"\n        .value=${String(configurer.xAxes0.barPercentage || 0)}\n      />\n\n      <input\n        for=\"grid-line\"\n        type=\"checkbox\"\n        value-key=\"value.options.xGridLine\"\n        ?checked=${configurer.config.options?.xGridLine}\n      />\n      <label id=\"grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input\n        for=\"x-axes0-ticks-display\"\n        type=\"checkbox\"\n        value-key=\"xAxes0.ticks.display\"\n        ?checked=${configurer.xAxes0.ticks?.display}\n      />\n      <label id=\"x-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n      <legend><ox-i18n msgid=\"label.y-axes\">Y Axes</ox-i18n></legend>\n\n      <label for=\"y-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input\n        id=\"y-axes0-axis-title\"\n        type=\"text\"\n        value-key=\"yAxes0.axisTitle\"\n        .value=${configurer.yAxes0.axisTitle || ''}\n      />\n\n      <input\n        id=\"y-axes0-ticks-automin\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.autoMin\"\n        ?checked=${configurer.yAxes0.ticks?.autoMin}\n      />\n      <label for=\"y-axes0-ticks-automin\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n      <input\n        id=\"y-axes0-ticks-automax\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.autoMax\"\n        ?checked=${configurer.yAxes0.ticks?.autoMax}\n      />\n      <label for=\"y-axes0-ticks-automax\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n      ${!configurer.yAxes0.ticks?.autoMin\n        ? html`\n            <label for=\"y-axes0-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n            <input\n              id=\"y-axes0-ticks-min\"\n              type=\"number\"\n              value-key=\"yAxes0.ticks.min\"\n              .value=${String(configurer.yAxes0.ticks?.min)}\n            />\n          `\n        : html``}\n      ${!configurer.yAxes0.ticks?.autoMax\n        ? html`\n            <label for=\"y-axes0-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n            <input\n              id=\"y-axes0-ticks-max\"\n              type=\"number\"\n              value-key=\"yAxes0.ticks.max\"\n              .value=${String(configurer.yAxes0.ticks?.max)}\n            />\n          `\n        : html``}\n\n      <label for=\"y-axes0-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n      <input\n        id=\"y-axes0-ticks-step-size\"\n        type=\"number\"\n        value-key=\"yAxes0.ticks.stepSize\"\n        .value=${String(configurer.yAxes0.ticks?.stepSize)}\n      />\n\n      <input\n        id=\"y-grid-line\"\n        type=\"checkbox\"\n        value-key=\"value.options.yGridLine\"\n        ?checked=${configurer.config.options?.yGridLine}\n      />\n      <label for=\"y-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input\n        id=\"y-axes0-ticks-display\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.display\"\n        ?checked=${configurer.yAxes0.ticks?.display}\n      />\n      <label for=\"y-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n      ${configurer.config.options?.multiAxis\n        ? html`\n            <legend><ox-i18n msgid=\"label.y-2nd-axes\">Y 2nd Axes</ox-i18n></legend>\n\n            <label for=\"y-axes1.axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n            <input\n              id=\"y-axes1.axis-title\"\n              type=\"text\"\n              value-key=\"yAxes1.axisTitle\"\n              .value=${configurer.yAxes1.axisTitle || ''}\n            />\n\n            <input\n              id=\"axis-min-auto\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.autoMin\"\n              ?checked=${configurer.yAxes1.ticks?.autoMin}\n            />\n            <label for=\"axis-min-auto\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n            <input\n              id=\"axis-max-auto\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.autoMax\"\n              ?checked=${configurer.yAxes1.ticks?.autoMax}\n            />\n            <label for=\"axis-max-auto\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n            ${!configurer.yAxes1.ticks?.autoMin\n              ? html`\n                  <label for=\"y-axes1.ticks.min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n                  <input\n                    id=\"y-axes1.ticks.min\"\n                    type=\"number\"\n                    value-key=\"yAxes1.ticks.min\"\n                    .value=${String(configurer.yAxes1.ticks?.min)}\n                  />\n                `\n              : html``}\n            ${!configurer.yAxes1.ticks?.autoMax\n              ? html`\n                  <label for=\"y-axes1-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n                  <input\n                    id=\"y-axes1-ticks-max\"\n                    type=\"number\"\n                    value-key=\"yAxes1.ticks.max\"\n                    .value=${String(configurer.yAxes1.ticks?.max)}\n                  />\n                `\n              : html``}\n\n            <label for=\"y-axes1-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n            <input\n              id=\"y-axes1-ticks-step-size\"\n              type=\"number\"\n              value-key=\"yAxes1.ticks.stepSize\"\n              .value=${String(configurer.yAxes1.ticks?.stepSize)}\n            />\n\n            <input\n              id=\"y2nd-grid-line\"\n              type=\"checkbox\"\n              value-key=\"value.options.y2ndGridLine\"\n              ?checked=${configurer.config.options.y2ndGridLine}\n            />\n            <label for=\"y2nd-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n            <input\n              id=\"y-axes1.ticks.display\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.display\"\n              ?checked=${configurer.yAxes1.ticks?.display}\n            />\n            <label for=\"y-axes1.ticks.display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n          `\n        : html``}\n    `\n  }\n\n  multiSeriesTabTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <div id=\"series-properties-container\" fullwidth>\n        <div id=\"tab-header\">\n          <md-icon\n            id=\"tab-nav-left-button\"\n            @tap=${(e: Event) => {\n              this._onTabScrollNavLeft(e)\n            }}\n            disabled\n            >chevron_left</md-icon\n          >\n          <div\n            id=\"tabs\"\n            @change=${(e: Event) => {\n              configurer.currentSeriesIndex = (e.target as any).activeTabIndex\n            }}\n            active-tab-index=${configurer.currentSeriesIndex}\n            fit-container\n          >\n            ${configurer.datasets.map(\n              (dataset: any, index: number) => html`\n                <div\n                  data-series=${index + 1}\n                  data-tab-index=${index}\n                  tab\n                  ?selected=${index == configurer.currentSeriesIndex}\n                  @click=${(e: Event) => {\n                    const target = e.target as HTMLDivElement\n                    this.configurer.setCurrentSeriesIndex(Number(target.getAttribute('data-tab-index')))\n                    this.value = { ...this.configurer.value }\n                  }}\n                >\n                  ${index + 1}\n                  ${!configurer.datasets || (configurer.datasets.length != 1 && configurer.currentSeriesIndex == index)\n                    ? html` <md-icon @tap=\"${(e: Event) => this.onTapRemoveCurrentTab(e)}\"> close </md-icon> `\n                    : html``}\n                </div>\n              `\n            )}\n          </div>\n          <md-icon\n            id=\"tab-nav-right-button\"\n            @click=${(e: Event) => {\n              this._onTabScrollNavRight(e)\n            }}\n            disabled\n            >chevron_right</md-icon\n          >\n        </div>\n        <div id=\"add-series-button-container\">\n          <md-icon id=\"add-series-button\" @tap=${(e: Event) => this.onTapAddTab(e)}>add</md-icon>\n        </div>\n\n        <div class=\"tab-content\">\n          <label for=\"data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n          <input id=\"data-key\" type=\"text\" value-key=\"dataKey\" .value=${configurer.dataKey || ''} />\n\n          ${this.chartType == 'line' || this.chartType == 'bar'\n            ? html`\n                <label for=\"series-type\"> <ox-i18n msgid=\"label.series-type\">type</ox-i18n> </label>\n                <select\n                  id=\"series-type\"\n                  class=\"select-content\"\n                  value-key=\"series.type\"\n                  .value=${configurer.series.type || ''}\n                >\n                  <option value=\"bar\" selected>bar</option>\n                  <option value=\"line\">line</option>\n                </select>\n              `\n            : html``}\n\n          <label for=\"series-label\"> <ox-i18n msgid=\"label.label\">label</ox-i18n> </label>\n          <input id=\"series-label\" type=\"text\" value-key=\"series.label\" .value=${configurer.series.label || ''} />\n\n          ${configurer.series.type == 'line'\n            ? html`\n                <label for=\"series-line-tension\"> <ox-i18n msgid=\"label.line-tension\">line tension</ox-i18n> </label>\n                <select\n                  id=\"series-line-tension\"\n                  class=\"select-content\"\n                  value-key=\"series.lineTension\"\n                  .value=${String(configurer.series.lineTension || 0)}\n                >\n                  <option value=\"0.4\">smooth</option>\n                  <option value=\"0\">angled</option>\n                </select>\n              `\n            : html``}\n          ${configurer.series.type == 'line'\n            ? html`\n                <label for=\"series-border-width\"> <ox-i18n msgid=\"label.border-width\">border width</ox-i18n> </label>\n                <input\n                  id=\"series-border-width\"\n                  type=\"number\"\n                  value-key=\"series.borderWidth\"\n                  .value=${String(configurer.series.borderWidth || 0)}\n                />\n              `\n            : html``}\n\n          <label for=\"series-color\"> <ox-i18n msgid=\"label.color\">color</ox-i18n> </label>\n          <ox-input-color id=\"series-color\" value-key=\"color\" .value=${configurer.color}></ox-input-color>\n\n          ${configurer.series.type == 'line'\n            ? html`\n                <label for=\"series-point-style\"> <ox-i18n msgid=\"label.point-shape\">point shape</ox-i18n> </label>\n                <select\n                  id=\"series-point-style\"\n                  class=\"select-content\"\n                  value-key=\"series.pointStyle\"\n                  .value=${configurer.series.pointStyle || ''}\n                >\n                  <option value=\"circle\">⚬</option>\n                  <option value=\"triangle\">▵</option>\n                  <option value=\"rect\">□</option>\n                  <option value=\"rectRot\">◇</option>\n                  <option value=\"cross\">+</option>\n                  <option value=\"crossRot\">⨉</option>\n                  <option value=\"star\">✱</option>\n                  <option value=\"line\">―</option>\n                  <option value=\"dash\">┄</option>\n                </select>\n\n                <label for=\"series-point-radius\"> <ox-i18n msgid=\"label.point-size\">point size</ox-i18n> </label>\n                <input\n                  id=\"series-point-radius\"\n                  type=\"number\"\n                  value-key=\"series.pointRadius\"\n                  .value=${String(configurer.series.pointRadius || 0)}\n                />\n              `\n            : html``} <label for=\"series-stack\"> <ox-i18n msgid=\"label.stack-group\">Stack group</ox-i18n> </label>\n          <input id=\"series-stack\" type=\"text\" value-key=\"series.stack\" .value=${configurer.series.stack || ''} />\n          ${configurer.series.type == 'line'\n            ? html`\n                <input id=\"seires-fill\" type=\"checkbox\" value-key=\"series.fill\" ?checked=${configurer.series.fill} />\n                <label for=\"seires-fill\"> <ox-i18n msgid=\"label.fill\">fill</ox-i18n> </label>\n              `\n            : html``}\n          ${configurer.multiAxis\n            ? html`\n                <label for=\"series-y-axis-id\"> <ox-i18n msgid=\"label.target-axis\">target axis</ox-i18n> </label>\n                <select\n                  id=\"series-y-axis-id\"\n                  class=\"select-content\"\n                  value-key=\"series.yAxisID\"\n                  .value=${configurer.series.yAxisID || ''}\n                >\n                  <option value=\"left\">left</option>\n                  <option value=\"right\">right</option>\n                </select>\n              `\n            : html``}\n          ${this.displayValueTemplate()}\n        </div>\n      </div>\n    `\n  }\n\n  _onTabScroll(e: Event) {\n    if (!this.tabContainer) {\n      return\n    }\n\n    if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {\n      this.tabNavLeftButton.setAttribute('disabled', '')\n      this.tabNavRightButton.setAttribute('disabled', '')\n    }\n    // left-end\n    else if (this.tabContainer.scrollLeft == 0) {\n      this.tabNavLeftButton.setAttribute('disabled', '')\n      this.tabNavRightButton.removeAttribute('disabled')\n    }\n    // right-end\n    else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {\n      this.tabNavLeftButton.removeAttribute('disabled')\n      this.tabNavRightButton.setAttribute('disabled', '')\n    } else {\n      this.tabNavLeftButton.removeAttribute('disabled')\n      this.tabNavRightButton.removeAttribute('disabled')\n    }\n  }\n\n  _onTabScrollNavLeft(e: Event) {\n    if (!this.tabContainer) {\n      return\n    }\n\n    this.tabContainer.style.scrollBehavior = 'smooth'\n    this.tabContainer.scrollLeft -= this.tabContainer.clientWidth\n    this.tabContainer.style.scrollBehavior = 'auto'\n  }\n\n  _onTabScrollNavRight(e: Event) {\n    if (!this.tabContainer) {\n      return\n    }\n\n    this.tabContainer.style.scrollBehavior = 'smooth'\n    this.tabContainer.scrollLeft += this.tabContainer.clientWidth\n    this.tabContainer.style.scrollBehavior = 'auto'\n  }\n}\n"]}
+{"version":3,"file":"input-chart-multi-series-abstract.js","sourceRoot":"","sources":["../../../src/editors/input-chart-multi-series-abstract.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { query } from 'lit/decorators.js'\n\nimport { MdIcon } from '@material/web/icon/icon.js'\n\nimport { InputChartAbstract } from './input-chart-abstract'\n\nexport class InputChartMultiSeriesAbstract extends InputChartAbstract {\n  static styles = [...InputChartAbstract.styles]\n\n  @query('#tabs') tabs!: HTMLElement\n  @query('#tab-nav-left-button') tabNavLeftButton!: MdIcon\n  @query('#tab-nav-right-button') tabNavRightButton!: MdIcon\n\n  get tabContainer(): HTMLElement | null | undefined {\n    return this.tabs\n  }\n\n  firstUpdated() {\n    this.tabContainer?.addEventListener('scroll', e => {\n      this._onTabScroll(e)\n    })\n  }\n\n  subTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <input id=\"multi-axis\" type=\"checkbox\" value-key=\"multiAxis\" ?checked=${configurer.multiAxis} />\n      <label for=\"multi-axis\"> <ox-i18n msgid=\"label.multi-axis\">Multi Axis</ox-i18n> </label>\n\n      <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n\n      ${this.multiSeriesTabTemplate()}\n\n      <legend><ox-i18n msgid=\"label.x-axes\">X Axes</ox-i18n></legend>\n\n      <label for=\"label-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n      <input id=\"label-data-key\" type=\"text\" value-key=\"labelDataKey\" .value=${configurer.labelDataKey || ''} />\n\n      <label for=\"axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input id=\"axis-title\" type=\"text\" value-key=\"xAxes0.axisTitle\" .value=${configurer.xAxes0.axisTitle || ''} />\n\n      <label for=\"x-axes0-thickness\"> <ox-i18n msgid=\"label.thickness\">Thickness</ox-i18n> </label>\n      <input\n        id=\"x-axes0-thickness\"\n        type=\"number\"\n        value-key=\"xAxes0.barPercentage\"\n        .value=${String(configurer.xAxes0.barPercentage || 0)}\n      />\n\n      <input\n        for=\"grid-line\"\n        type=\"checkbox\"\n        value-key=\"value.options.xGridLine\"\n        ?checked=${configurer.config.options?.xGridLine}\n      />\n      <label id=\"grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input\n        for=\"x-axes0-ticks-display\"\n        type=\"checkbox\"\n        value-key=\"xAxes0.ticks.display\"\n        ?checked=${configurer.xAxes0.ticks?.display}\n      />\n      <label id=\"x-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n      <legend><ox-i18n msgid=\"label.y-axes\">Y Axes</ox-i18n></legend>\n\n      <label for=\"y-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input\n        id=\"y-axes0-axis-title\"\n        type=\"text\"\n        value-key=\"yAxes0.axisTitle\"\n        .value=${configurer.yAxes0.axisTitle || ''}\n      />\n\n      <input\n        id=\"y-axes0-ticks-automin\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.autoMin\"\n        ?checked=${configurer.yAxes0.ticks?.autoMin}\n      />\n      <label for=\"y-axes0-ticks-automin\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n      <input\n        id=\"y-axes0-ticks-automax\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.autoMax\"\n        ?checked=${configurer.yAxes0.ticks?.autoMax}\n      />\n      <label for=\"y-axes0-ticks-automax\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n      ${!configurer.yAxes0.ticks?.autoMin\n        ? html`\n            <label for=\"y-axes0-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n            <input\n              id=\"y-axes0-ticks-min\"\n              type=\"number\"\n              value-key=\"yAxes0.ticks.min\"\n              .value=${String(configurer.yAxes0.ticks?.min)}\n            />\n          `\n        : html``}\n      ${!configurer.yAxes0.ticks?.autoMax\n        ? html`\n            <label for=\"y-axes0-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n            <input\n              id=\"y-axes0-ticks-max\"\n              type=\"number\"\n              value-key=\"yAxes0.ticks.max\"\n              .value=${String(configurer.yAxes0.ticks?.max)}\n            />\n          `\n        : html``}\n\n      <label for=\"y-axes0-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n      <input\n        id=\"y-axes0-ticks-step-size\"\n        type=\"number\"\n        value-key=\"yAxes0.ticks.stepSize\"\n        .value=${String(configurer.yAxes0.ticks?.stepSize)}\n      />\n\n      <input\n        id=\"y-grid-line\"\n        type=\"checkbox\"\n        value-key=\"value.options.yGridLine\"\n        ?checked=${configurer.config.options?.yGridLine}\n      />\n      <label for=\"y-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input\n        id=\"y-axes0-ticks-display\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.display\"\n        ?checked=${configurer.yAxes0.ticks?.display}\n      />\n      <label for=\"y-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n      ${configurer.config.options?.multiAxis\n        ? html`\n            <legend><ox-i18n msgid=\"label.y-2nd-axes\">Y 2nd Axes</ox-i18n></legend>\n\n            <label for=\"y-axes1.axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n            <input\n              id=\"y-axes1.axis-title\"\n              type=\"text\"\n              value-key=\"yAxes1.axisTitle\"\n              .value=${configurer.yAxes1.axisTitle || ''}\n            />\n\n            <input\n              id=\"axis-min-auto\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.autoMin\"\n              ?checked=${configurer.yAxes1.ticks?.autoMin}\n            />\n            <label for=\"axis-min-auto\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n            <input\n              id=\"axis-max-auto\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.autoMax\"\n              ?checked=${configurer.yAxes1.ticks?.autoMax}\n            />\n            <label for=\"axis-max-auto\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n            ${!configurer.yAxes1.ticks?.autoMin\n              ? html`\n                  <label for=\"y-axes1.ticks.min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n                  <input\n                    id=\"y-axes1.ticks.min\"\n                    type=\"number\"\n                    value-key=\"yAxes1.ticks.min\"\n                    .value=${String(configurer.yAxes1.ticks?.min)}\n                  />\n                `\n              : html``}\n            ${!configurer.yAxes1.ticks?.autoMax\n              ? html`\n                  <label for=\"y-axes1-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n                  <input\n                    id=\"y-axes1-ticks-max\"\n                    type=\"number\"\n                    value-key=\"yAxes1.ticks.max\"\n                    .value=${String(configurer.yAxes1.ticks?.max)}\n                  />\n                `\n              : html``}\n\n            <label for=\"y-axes1-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n            <input\n              id=\"y-axes1-ticks-step-size\"\n              type=\"number\"\n              value-key=\"yAxes1.ticks.stepSize\"\n              .value=${String(configurer.yAxes1.ticks?.stepSize)}\n            />\n\n            <input\n              id=\"y2nd-grid-line\"\n              type=\"checkbox\"\n              value-key=\"value.options.y2ndGridLine\"\n              ?checked=${configurer.config.options.y2ndGridLine}\n            />\n            <label for=\"y2nd-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n            <input\n              id=\"y-axes1.ticks.display\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.display\"\n              ?checked=${configurer.yAxes1.ticks?.display}\n            />\n            <label for=\"y-axes1.ticks.display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n          `\n        : html``}\n    `\n  }\n\n  multiSeriesTabTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <div id=\"series-properties-container\" fullwidth>\n        <div id=\"tab-header\">\n          <md-icon\n            id=\"tab-nav-left-button\"\n            @tap=${(e: Event) => {\n              this._onTabScrollNavLeft(e)\n            }}\n            disabled\n            >chevron_left</md-icon\n          >\n          <div\n            id=\"tabs\"\n            @change=${(e: Event) => {\n              configurer.currentSeriesIndex = (e.target as any).activeTabIndex\n            }}\n            active-tab-index=${configurer.currentSeriesIndex}\n            fit-container\n          >\n            ${configurer.datasets.map(\n              (dataset: any, index: number) => html`\n                <div\n                  data-series=${index + 1}\n                  data-tab-index=${index}\n                  tab\n                  ?selected=${index == configurer.currentSeriesIndex}\n                  @click=${(e: Event) => {\n                    const target = e.target as HTMLDivElement\n                    this.configurer.setCurrentSeriesIndex(Number(target.getAttribute('data-tab-index')))\n                    this.value = { ...this.configurer.value }\n                  }}\n                >\n                  ${index + 1}\n                  ${!configurer.datasets || (configurer.datasets.length != 1 && configurer.currentSeriesIndex == index)\n                    ? html` <md-icon @tap=${(e: Event) => this.onTapRemoveCurrentTab(index)}> close </md-icon> `\n                    : html``}\n                </div>\n              `\n            )}\n          </div>\n          <md-icon\n            id=\"tab-nav-right-button\"\n            @click=${(e: Event) => {\n              this._onTabScrollNavRight(e)\n            }}\n            disabled\n            >chevron_right</md-icon\n          >\n        </div>\n        <div id=\"add-series-button-container\">\n          <md-icon id=\"add-series-button\" @tap=${(e: Event) => this.onTapAddTab(e)}>add</md-icon>\n        </div>\n\n        <div class=\"tab-content\">\n          <label for=\"data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n          <input id=\"data-key\" type=\"text\" value-key=\"dataKey\" .value=${configurer.dataKey || ''} />\n\n          ${this.chartType == 'line' || this.chartType == 'bar'\n            ? html`\n                <label for=\"series-type\"> <ox-i18n msgid=\"label.series-type\">type</ox-i18n> </label>\n                <select\n                  id=\"series-type\"\n                  class=\"select-content\"\n                  value-key=\"series.type\"\n                  .value=${configurer.series.type || ''}\n                >\n                  <option value=\"bar\" selected>bar</option>\n                  <option value=\"line\">line</option>\n                </select>\n              `\n            : html``}\n\n          <label for=\"series-label\"> <ox-i18n msgid=\"label.label\">label</ox-i18n> </label>\n          <input id=\"series-label\" type=\"text\" value-key=\"series.label\" .value=${configurer.series.label || ''} />\n\n          ${configurer.series.type == 'line'\n            ? html`\n                <label for=\"series-line-tension\"> <ox-i18n msgid=\"label.line-tension\">line tension</ox-i18n> </label>\n                <select\n                  id=\"series-line-tension\"\n                  class=\"select-content\"\n                  value-key=\"series.lineTension\"\n                  .value=${String(configurer.series.lineTension || 0)}\n                >\n                  <option value=\"0.4\">smooth</option>\n                  <option value=\"0\">angled</option>\n                </select>\n              `\n            : html``}\n          ${configurer.series.type == 'line'\n            ? html`\n                <label for=\"series-border-width\"> <ox-i18n msgid=\"label.border-width\">border width</ox-i18n> </label>\n                <input\n                  id=\"series-border-width\"\n                  type=\"number\"\n                  value-key=\"series.borderWidth\"\n                  .value=${String(configurer.series.borderWidth || 0)}\n                />\n              `\n            : html``}\n\n          <label for=\"series-color\"> <ox-i18n msgid=\"label.color\">color</ox-i18n> </label>\n          <ox-input-color id=\"series-color\" value-key=\"color\" .value=${configurer.color}></ox-input-color>\n\n          ${configurer.series.type == 'line'\n            ? html`\n                <label for=\"series-point-style\"> <ox-i18n msgid=\"label.point-shape\">point shape</ox-i18n> </label>\n                <select\n                  id=\"series-point-style\"\n                  class=\"select-content\"\n                  value-key=\"series.pointStyle\"\n                  .value=${configurer.series.pointStyle || ''}\n                >\n                  <option value=\"circle\">⚬</option>\n                  <option value=\"triangle\">▵</option>\n                  <option value=\"rect\">□</option>\n                  <option value=\"rectRot\">◇</option>\n                  <option value=\"cross\">+</option>\n                  <option value=\"crossRot\">⨉</option>\n                  <option value=\"star\">✱</option>\n                  <option value=\"line\">―</option>\n                  <option value=\"dash\">┄</option>\n                </select>\n\n                <label for=\"series-point-radius\"> <ox-i18n msgid=\"label.point-size\">point size</ox-i18n> </label>\n                <input\n                  id=\"series-point-radius\"\n                  type=\"number\"\n                  value-key=\"series.pointRadius\"\n                  .value=${String(configurer.series.pointRadius || 0)}\n                />\n              `\n            : html``} <label for=\"series-stack\"> <ox-i18n msgid=\"label.stack-group\">Stack group</ox-i18n> </label>\n          <input id=\"series-stack\" type=\"text\" value-key=\"series.stack\" .value=${configurer.series.stack || ''} />\n          ${configurer.series.type == 'line'\n            ? html`\n                <input id=\"seires-fill\" type=\"checkbox\" value-key=\"series.fill\" ?checked=${configurer.series.fill} />\n                <label for=\"seires-fill\"> <ox-i18n msgid=\"label.fill\">fill</ox-i18n> </label>\n              `\n            : html``}\n          ${configurer.multiAxis\n            ? html`\n                <label for=\"series-y-axis-id\"> <ox-i18n msgid=\"label.target-axis\">target axis</ox-i18n> </label>\n                <select\n                  id=\"series-y-axis-id\"\n                  class=\"select-content\"\n                  value-key=\"series.yAxisID\"\n                  .value=${configurer.series.yAxisID || ''}\n                >\n                  <option value=\"left\">left</option>\n                  <option value=\"right\">right</option>\n                </select>\n              `\n            : html``}\n          ${this.displayValueTemplate()}\n        </div>\n      </div>\n    `\n  }\n\n  _onTabScroll(e: Event) {\n    if (!this.tabContainer) {\n      return\n    }\n\n    if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {\n      this.tabNavLeftButton.setAttribute('disabled', '')\n      this.tabNavRightButton.setAttribute('disabled', '')\n    }\n    // left-end\n    else if (this.tabContainer.scrollLeft == 0) {\n      this.tabNavLeftButton.setAttribute('disabled', '')\n      this.tabNavRightButton.removeAttribute('disabled')\n    }\n    // right-end\n    else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {\n      this.tabNavLeftButton.removeAttribute('disabled')\n      this.tabNavRightButton.setAttribute('disabled', '')\n    } else {\n      this.tabNavLeftButton.removeAttribute('disabled')\n      this.tabNavRightButton.removeAttribute('disabled')\n    }\n  }\n\n  _onTabScrollNavLeft(e: Event) {\n    if (!this.tabContainer) {\n      return\n    }\n\n    this.tabContainer.style.scrollBehavior = 'smooth'\n    this.tabContainer.scrollLeft -= this.tabContainer.clientWidth\n    this.tabContainer.style.scrollBehavior = 'auto'\n  }\n\n  _onTabScrollNavRight(e: Event) {\n    if (!this.tabContainer) {\n      return\n    }\n\n    this.tabContainer.style.scrollBehavior = 'smooth'\n    this.tabContainer.scrollLeft += this.tabContainer.clientWidth\n    this.tabContainer.style.scrollBehavior = 'auto'\n  }\n}\n"]}

package/dist/src/editors/input-chart-styles.js

@@ -66,7 +66,7 @@ export const InputChartStyles = css `
   }
 
   #tab-header #tabs [tab] md-icon {
-    margin-left: 5px;
+    margin-left: auto;
     padding: 2px;
     color: var(--md-sys-color-on-surface);
 

package/dist/src/editors/input-chart-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-chart-styles.js","sourceRoot":"","sources":["../../../src/editors/input-chart-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuKlC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const InputChartStyles = css`\n  :host {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n\n    background-color: var(--ox-input-background-color, var(--md-sys-color-surface));\n    color: var(--ox-input-color, var(--md-sys-color-on-surface));\n  }\n\n  :host > * {\n    box-sizing: border-box;\n    grid-column: span 7;\n  }\n\n  :host > label {\n    box-sizing: border-box;\n    grid-column: span 3;\n  }\n\n  :host > legend {\n    box-sizing: border-box;\n    grid-column: 1 / -1;\n    color: var(--md-sys-color-on-secondary-container, #e46c2e);\n    font: var(--property-sidebar-fieldset-legend, bold 13px var(--theme-font));\n    text-transform: capitalize;\n  }\n\n  #series-properties-container {\n    display: grid;\n    grid-template-columns: 1fr 25px;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #series-properties-container > [tab-content] {\n    grid-column: span 2;\n  }\n\n  #tab-header {\n    display: grid;\n    grid-template-columns: 25px 1fr 25px;\n    grid-gap: 5px;\n    overflow: hidden;\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    border-bottom: 0;\n    background-color: var(--md-sys-color-surface-variant);\n    color: var(--md-sys-color-on-surface);\n    box-sizing: border-box;\n    padding-top: 3px;\n    align-items: center;\n  }\n\n  #tab-header > div {\n    height: 25px;\n  }\n\n  #tab-header md-icon[disabled] {\n    opacity: 0.1;\n  }\n\n  #tabs {\n    display: flex;\n    overflow: hidden;\n  }\n\n  #tab-header #tabs [tab] md-icon {\n    margin-left: 5px;\n    padding: 2px;\n    color: var(--md-sys-color-on-surface);\n\n    --md-icon-size: 12px;\n  }\n\n  #add-series-button-container {\n    height: 100%;\n    box-sizing: border-box;\n    align-items: center;\n    justify-content: center;\n    padding-top: 3px;\n    display: flex;\n    border-bottom: rgba(0, 0, 0, 0.2) 1px solid;\n  }\n\n  #add-series-button {\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    color: var(--md-sys-color-on-secondary-container);\n  }\n\n  .tab-content {\n    grid-column: 1 / -1;\n\n    background-color: rgba(255, 255, 255, 0.5);\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    border-width: 0 1px 1px 1px;\n    padding: 5px;\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n  }\n\n  .tab-content > * {\n    box-sizing: border-box;\n    grid-column: span 7;\n  }\n\n  label,\n  .tab-content > label {\n    grid-column: span 3;\n    text-align: right;\n    color: var(--md-sys-color-on-secondary-container);\n    font-size: 0.8em;\n    line-height: 2;\n    text-transform: capitalize;\n  }\n\n  input,\n  select {\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    border-radius: var(--spacing-small);\n  }\n\n  input[type='checkbox'],\n  .tab-content > input[type='checkbox'] {\n    grid-column: span 4;\n    justify-self: end;\n    align-self: center;\n  }\n\n  input[type='checkbox'] + label,\n  .tab-content > input[type='checkbox'] + label {\n    grid-column: span 6;\n\n    text-align: left;\n  }\n\n  [fullwidth] {\n    grid-column: 1 / -1;\n    margin: 0;\n    border: 0;\n  }\n\n  div[tab] {\n    display: flex;\n    align-items: center;\n    background-color: rgba(0, 0, 0, 0.2);\n    border-width: 1px 1px 0 1px;\n    padding: 0 5px;\n    color: var(--md-sys-color-on-surface);\n    box-sizing: border-box;\n    min-width: 45px;\n  }\n\n  div[tab][disabled] {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n\n  div[tab]:last-child {\n    border-width: 0;\n  }\n\n  div[tab][selected] {\n    background-color: var(--md-sys-color-surface);\n    color: var(--md-sys-color-on-surface);\n  }\n`\n"]}
+{"version":3,"file":"input-chart-styles.js","sourceRoot":"","sources":["../../../src/editors/input-chart-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuKlC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const InputChartStyles = css`\n  :host {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n\n    background-color: var(--ox-input-background-color, var(--md-sys-color-surface));\n    color: var(--ox-input-color, var(--md-sys-color-on-surface));\n  }\n\n  :host > * {\n    box-sizing: border-box;\n    grid-column: span 7;\n  }\n\n  :host > label {\n    box-sizing: border-box;\n    grid-column: span 3;\n  }\n\n  :host > legend {\n    box-sizing: border-box;\n    grid-column: 1 / -1;\n    color: var(--md-sys-color-on-secondary-container, #e46c2e);\n    font: var(--property-sidebar-fieldset-legend, bold 13px var(--theme-font));\n    text-transform: capitalize;\n  }\n\n  #series-properties-container {\n    display: grid;\n    grid-template-columns: 1fr 25px;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #series-properties-container > [tab-content] {\n    grid-column: span 2;\n  }\n\n  #tab-header {\n    display: grid;\n    grid-template-columns: 25px 1fr 25px;\n    grid-gap: 5px;\n    overflow: hidden;\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    border-bottom: 0;\n    background-color: var(--md-sys-color-surface-variant);\n    color: var(--md-sys-color-on-surface);\n    box-sizing: border-box;\n    padding-top: 3px;\n    align-items: center;\n  }\n\n  #tab-header > div {\n    height: 25px;\n  }\n\n  #tab-header md-icon[disabled] {\n    opacity: 0.1;\n  }\n\n  #tabs {\n    display: flex;\n    overflow: hidden;\n  }\n\n  #tab-header #tabs [tab] md-icon {\n    margin-left: auto;\n    padding: 2px;\n    color: var(--md-sys-color-on-surface);\n\n    --md-icon-size: 12px;\n  }\n\n  #add-series-button-container {\n    height: 100%;\n    box-sizing: border-box;\n    align-items: center;\n    justify-content: center;\n    padding-top: 3px;\n    display: flex;\n    border-bottom: rgba(0, 0, 0, 0.2) 1px solid;\n  }\n\n  #add-series-button {\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    color: var(--md-sys-color-on-secondary-container);\n  }\n\n  .tab-content {\n    grid-column: 1 / -1;\n\n    background-color: rgba(255, 255, 255, 0.5);\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    border-width: 0 1px 1px 1px;\n    padding: 5px;\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n  }\n\n  .tab-content > * {\n    box-sizing: border-box;\n    grid-column: span 7;\n  }\n\n  label,\n  .tab-content > label {\n    grid-column: span 3;\n    text-align: right;\n    color: var(--md-sys-color-on-secondary-container);\n    font-size: 0.8em;\n    line-height: 2;\n    text-transform: capitalize;\n  }\n\n  input,\n  select {\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    border-radius: var(--spacing-small);\n  }\n\n  input[type='checkbox'],\n  .tab-content > input[type='checkbox'] {\n    grid-column: span 4;\n    justify-self: end;\n    align-self: center;\n  }\n\n  input[type='checkbox'] + label,\n  .tab-content > input[type='checkbox'] + label {\n    grid-column: span 6;\n\n    text-align: left;\n  }\n\n  [fullwidth] {\n    grid-column: 1 / -1;\n    margin: 0;\n    border: 0;\n  }\n\n  div[tab] {\n    display: flex;\n    align-items: center;\n    background-color: rgba(0, 0, 0, 0.2);\n    border-width: 1px 1px 0 1px;\n    padding: 0 5px;\n    color: var(--md-sys-color-on-surface);\n    box-sizing: border-box;\n    min-width: 45px;\n  }\n\n  div[tab][disabled] {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n\n  div[tab]:last-child {\n    border-width: 0;\n  }\n\n  div[tab][selected] {\n    background-color: var(--md-sys-color-surface);\n    color: var(--md-sys-color-on-surface);\n  }\n`\n"]}

package/dist/src/editors/ox-input-chart-hbar.js

@@ -173,7 +173,7 @@ let OxInputChartHBar = class OxInputChartHBar extends InputChartMultiSeriesAbstr
                 >
                   ${index + 1}
                   ${!configurer.datasets || (configurer.datasets.length != 1 && configurer.currentSeriesIndex == index)
-            ? html ` <md-icon @tap="${(e) => this.onTapRemoveCurrentTab(e)}"> close </md-icon> `
+            ? html ` <md-icon @tap="${(e) => this.onTapRemoveCurrentTab(index)}"> close </md-icon> `
             : html ``}
                 </div>
               `)}

package/dist/src/editors/ox-input-chart-hbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-chart-hbar.js","sourceRoot":"","sources":["../../../src/editors/ox-input-chart-hbar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract'\n\n@customElement('ox-input-chart-hbar')\nexport class OxInputChartHBar extends InputChartMultiSeriesAbstract {\n  static styles = [...InputChartMultiSeriesAbstract.styles]\n\n  subTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n      ${this.multiSeriesTabTemplate()}\n\n      <legend><ox-i18n msgid=\"label.y-axes\">Y Axes</ox-i18n></legend>\n\n      <label for=\"label-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n      <input id=\"label-data-key\" type=\"text\" value-key=\"labelDataKey\" value=${ifDefined(configurer.labelDataKey)} />\n\n      <label for=\"y-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input\n        id=\"y-axes0-axis-title\"\n        type=\"text\"\n        value-key=\"yAxes0.axisTitle\"\n        value=${ifDefined(configurer.yAxes0.axisTitle)}\n      />\n\n      <label for=\"y-axes0-bar-spacing\"><ox-i18n msgid=\"label.bar-spacing\">Bar Spacing</ox-i18n></label>\n      <input\n        id=\"y-axes0-bar-spacing\"\n        type=\"number\"\n        min=\"0\"\n        max=\"1\"\n        step=\"0.1\"\n        value-key=\"yAxes0.barSpacing\"\n        value=${ifDefined(configurer.yAxes0.barSpacing)}\n      />\n      <label for=\"y-axes0-category-spacing\"><ox-i18n msgid=\"label.tick-spacing\">Tick Spacing</ox-i18n></label>\n      <input\n        id=\"y-axes0-category-spacing\"\n        type=\"number\"\n        min=\"0\"\n        max=\"1\"\n        step=\"0.1\"\n        value-key=\"yAxes0.categorySpacing\"\n        value=${ifDefined(configurer.yAxes0.categorySpacing)}\n      />\n\n      <input\n        id=\"x-grid-line\"\n        type=\"checkbox\"\n        value-key=\"value.options.xGridLine\"\n        ?checked=${configurer.config.options?.xGridLine}\n      />\n      <label for=\"x-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input\n        id=\"x-axes0-ticks-display\"\n        type=\"checkbox\"\n        value-key=\"xAxes0.ticks.display\"\n        ?checked=${configurer.xAxes0.ticks?.display}\n      />\n      <label for=\"x-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n      <legend><ox-i18n msgid=\"label.x-axes\">X Axes</ox-i18n></legend>\n\n      <label for=\"x-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input\n        id=\"x-axes0-axis-title\"\n        type=\"text\"\n        value-key=\"xAxes0.axisTitle\"\n        .value=${configurer.xAxes0.axisTitle || ''}\n      />\n\n      <input\n        id=\"x-axes0-axis-min-auto\"\n        type=\"checkbox\"\n        value-key=\"xAxes0.ticks.autoMin\"\n        ?checked=${configurer.xAxes0.ticks?.autoMin}\n      />\n      <label for=\"x-axes0-axis-min-auto\"> <ox-i18n msgid=\"label.axis-min-auto\">Axis Min Auto</ox-i18n> </label>\n\n      <input\n        id=\"x-axes0-ticks-auto-max\"\n        type=\"checkbox\"\n        value-key=\"xAxes0.ticks.autoMax\"\n        ?checked=${configurer.xAxes0.ticks?.autoMax}\n      />\n      <label for=\"x-axes0-ticks-auto-max\"> <ox-i18n msgid=\"label.axis-max-auto\">Axis Max Auto</ox-i18n> </label>\n\n      ${!configurer.xAxes0.ticks?.autoMin\n        ? html`\n            <label for=\"x-axes0-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Axis Min</ox-i18n> </label>\n            <input\n              id=\"x-axes0-ticks-min\"\n              type=\"number\"\n              value-key=\"xAxes0.ticks.min\"\n              value=${ifDefined(configurer.xAxes0.ticks?.min)}\n            />\n          `\n        : html``}\n      ${!configurer.xAxes0.ticks?.autoMax\n        ? html`\n            <label for=\"x-axes0-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Axis Max</ox-i18n> </label>\n            <input\n              id=\"x-axes0-ticks-max\"\n              type=\"number\"\n              value-key=\"xAxes0.ticks.max\"\n              value=${ifDefined(configurer.xAxes0.ticks?.max)}\n            />\n          `\n        : html``}\n\n      <label for=\"y-axes0-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">Axis Step Size</ox-i18n> </label>\n      <input\n        id=\"y-axes0-ticks-step-size\"\n        type=\"number\"\n        value-key=\"yAxes0.ticks.stepSize\"\n        value=${ifDefined(configurer.yAxes0.ticks?.stepSize)}\n      />\n\n      <input\n        id=\"y-grid-line\"\n        type=\"checkbox\"\n        value-key=\"value.options.yGridLine\"\n        ?checked=${configurer.config.options?.yGridLine}\n      />\n      <label for=\"y-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input\n        id=\"y-axes0-ticks-display\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.display\"\n        ?checked=${configurer.yAxes0.ticks?.display}\n      />\n      <label for=\"y-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n    `\n  }\n\n  multiSeriesTabTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <div id=\"series-properties-container\" fullwidth>\n        <div id=\"tab-header\">\n          <md-icon\n            id=\"tab-nav-left-button\"\n            @tap=${(e: Event) => {\n              this._onTabScrollNavLeft(e)\n            }}\n            disabled\n            >chevron_left</md-icon\n          >\n          <div\n            id=\"tabs\"\n            @change=${(e: Event) => {\n              configurer.currentSeriesIndex = (e.target as any).activeTabIndex\n            }}\n            active-tab-index=${configurer.currentSeriesIndex}\n            fit-container\n          >\n            ${configurer.datasets.map(\n              (dataset: any, index: number) => html`\n                <div\n                  data-series=${index + 1}\n                  data-tab-index=${index}\n                  tab\n                  ?selected=${index == configurer.currentSeriesIndex}\n                  @click=${(e: Event) => {\n                    const target = e.target as HTMLDivElement\n                    this.configurer.setCurrentSeriesIndex(Number(target.getAttribute('data-tab-index')))\n                    this.value = { ...this.configurer.value }\n                  }}\n                >\n                  ${index + 1}\n                  ${!configurer.datasets || (configurer.datasets.length != 1 && configurer.currentSeriesIndex == index)\n                    ? html` <md-icon @tap=\"${(e: Event) => this.onTapRemoveCurrentTab(e)}\"> close </md-icon> `\n                    : html``}\n                </div>\n              `\n            )}\n          </div>\n          <md-icon\n            id=\"tab-nav-right-button\"\n            @click=${(e: Event) => {\n              this._onTabScrollNavRight(e)\n            }}\n            disabled\n            >chevron_right</md-icon\n          >\n        </div>\n        <div id=\"add-series-button-container\">\n          <md-icon id=\"add-series-button\" @tap=${(e: Event) => this.onTapAddTab(e)}>add</md-icon>\n        </div>\n\n        <div class=\"tab-content\">\n          <label for=\"data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n          <input id=\"data-key\" type=\"text\" value-key=\"dataKey\" .value=${configurer.dataKey || ''} />\n          <label for=\"series-label\"> <ox-i18n msgid=\"label.label\">Label</ox-i18n> </label>\n          <input id=\"series-label\" type=\"text\" value-key=\"series.label\" .value=${configurer.series.label || ''} />\n          <label for=\"series-color\"> <ox-i18n msgid=\"label.color\">Color</ox-i18n> </label>\n          <ox-input-color id=\"series-color\" value-key=\"color\" .value=${configurer.color || '#000'}></ox-input-color>\n          <label for=\"series-stack\"> <ox-i18n msgid=\"label.stack-group\">Stack Group</ox-i18n> </label>\n          <input id=\"series-stack\" type=\"text\" value-key=\"series.stack\" .value=${configurer.series.stack || ''} />\n\n          ${this.displayValueTemplate()}\n        </div>\n      </div>\n    `\n  }\n\n  getDefaultDatasets(): OperatoChart.Dataset[] {\n    return [this.getDefaultDataset('horizontalBar')]\n  }\n}\n"]}
+{"version":3,"file":"ox-input-chart-hbar.js","sourceRoot":"","sources":["../../../src/editors/ox-input-chart-hbar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract'\n\n@customElement('ox-input-chart-hbar')\nexport class OxInputChartHBar extends InputChartMultiSeriesAbstract {\n  static styles = [...InputChartMultiSeriesAbstract.styles]\n\n  subTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n      ${this.multiSeriesTabTemplate()}\n\n      <legend><ox-i18n msgid=\"label.y-axes\">Y Axes</ox-i18n></legend>\n\n      <label for=\"label-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n      <input id=\"label-data-key\" type=\"text\" value-key=\"labelDataKey\" value=${ifDefined(configurer.labelDataKey)} />\n\n      <label for=\"y-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input\n        id=\"y-axes0-axis-title\"\n        type=\"text\"\n        value-key=\"yAxes0.axisTitle\"\n        value=${ifDefined(configurer.yAxes0.axisTitle)}\n      />\n\n      <label for=\"y-axes0-bar-spacing\"><ox-i18n msgid=\"label.bar-spacing\">Bar Spacing</ox-i18n></label>\n      <input\n        id=\"y-axes0-bar-spacing\"\n        type=\"number\"\n        min=\"0\"\n        max=\"1\"\n        step=\"0.1\"\n        value-key=\"yAxes0.barSpacing\"\n        value=${ifDefined(configurer.yAxes0.barSpacing)}\n      />\n      <label for=\"y-axes0-category-spacing\"><ox-i18n msgid=\"label.tick-spacing\">Tick Spacing</ox-i18n></label>\n      <input\n        id=\"y-axes0-category-spacing\"\n        type=\"number\"\n        min=\"0\"\n        max=\"1\"\n        step=\"0.1\"\n        value-key=\"yAxes0.categorySpacing\"\n        value=${ifDefined(configurer.yAxes0.categorySpacing)}\n      />\n\n      <input\n        id=\"x-grid-line\"\n        type=\"checkbox\"\n        value-key=\"value.options.xGridLine\"\n        ?checked=${configurer.config.options?.xGridLine}\n      />\n      <label for=\"x-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input\n        id=\"x-axes0-ticks-display\"\n        type=\"checkbox\"\n        value-key=\"xAxes0.ticks.display\"\n        ?checked=${configurer.xAxes0.ticks?.display}\n      />\n      <label for=\"x-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n      <legend><ox-i18n msgid=\"label.x-axes\">X Axes</ox-i18n></legend>\n\n      <label for=\"x-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input\n        id=\"x-axes0-axis-title\"\n        type=\"text\"\n        value-key=\"xAxes0.axisTitle\"\n        .value=${configurer.xAxes0.axisTitle || ''}\n      />\n\n      <input\n        id=\"x-axes0-axis-min-auto\"\n        type=\"checkbox\"\n        value-key=\"xAxes0.ticks.autoMin\"\n        ?checked=${configurer.xAxes0.ticks?.autoMin}\n      />\n      <label for=\"x-axes0-axis-min-auto\"> <ox-i18n msgid=\"label.axis-min-auto\">Axis Min Auto</ox-i18n> </label>\n\n      <input\n        id=\"x-axes0-ticks-auto-max\"\n        type=\"checkbox\"\n        value-key=\"xAxes0.ticks.autoMax\"\n        ?checked=${configurer.xAxes0.ticks?.autoMax}\n      />\n      <label for=\"x-axes0-ticks-auto-max\"> <ox-i18n msgid=\"label.axis-max-auto\">Axis Max Auto</ox-i18n> </label>\n\n      ${!configurer.xAxes0.ticks?.autoMin\n        ? html`\n            <label for=\"x-axes0-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Axis Min</ox-i18n> </label>\n            <input\n              id=\"x-axes0-ticks-min\"\n              type=\"number\"\n              value-key=\"xAxes0.ticks.min\"\n              value=${ifDefined(configurer.xAxes0.ticks?.min)}\n            />\n          `\n        : html``}\n      ${!configurer.xAxes0.ticks?.autoMax\n        ? html`\n            <label for=\"x-axes0-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Axis Max</ox-i18n> </label>\n            <input\n              id=\"x-axes0-ticks-max\"\n              type=\"number\"\n              value-key=\"xAxes0.ticks.max\"\n              value=${ifDefined(configurer.xAxes0.ticks?.max)}\n            />\n          `\n        : html``}\n\n      <label for=\"y-axes0-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">Axis Step Size</ox-i18n> </label>\n      <input\n        id=\"y-axes0-ticks-step-size\"\n        type=\"number\"\n        value-key=\"yAxes0.ticks.stepSize\"\n        value=${ifDefined(configurer.yAxes0.ticks?.stepSize)}\n      />\n\n      <input\n        id=\"y-grid-line\"\n        type=\"checkbox\"\n        value-key=\"value.options.yGridLine\"\n        ?checked=${configurer.config.options?.yGridLine}\n      />\n      <label for=\"y-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input\n        id=\"y-axes0-ticks-display\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.display\"\n        ?checked=${configurer.yAxes0.ticks?.display}\n      />\n      <label for=\"y-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n    `\n  }\n\n  multiSeriesTabTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <div id=\"series-properties-container\" fullwidth>\n        <div id=\"tab-header\">\n          <md-icon\n            id=\"tab-nav-left-button\"\n            @tap=${(e: Event) => {\n              this._onTabScrollNavLeft(e)\n            }}\n            disabled\n            >chevron_left</md-icon\n          >\n          <div\n            id=\"tabs\"\n            @change=${(e: Event) => {\n              configurer.currentSeriesIndex = (e.target as any).activeTabIndex\n            }}\n            active-tab-index=${configurer.currentSeriesIndex}\n            fit-container\n          >\n            ${configurer.datasets.map(\n              (dataset: any, index: number) => html`\n                <div\n                  data-series=${index + 1}\n                  data-tab-index=${index}\n                  tab\n                  ?selected=${index == configurer.currentSeriesIndex}\n                  @click=${(e: Event) => {\n                    const target = e.target as HTMLDivElement\n                    this.configurer.setCurrentSeriesIndex(Number(target.getAttribute('data-tab-index')))\n                    this.value = { ...this.configurer.value }\n                  }}\n                >\n                  ${index + 1}\n                  ${!configurer.datasets || (configurer.datasets.length != 1 && configurer.currentSeriesIndex == index)\n                    ? html` <md-icon @tap=\"${(e: Event) => this.onTapRemoveCurrentTab(index)}\"> close </md-icon> `\n                    : html``}\n                </div>\n              `\n            )}\n          </div>\n          <md-icon\n            id=\"tab-nav-right-button\"\n            @click=${(e: Event) => {\n              this._onTabScrollNavRight(e)\n            }}\n            disabled\n            >chevron_right</md-icon\n          >\n        </div>\n        <div id=\"add-series-button-container\">\n          <md-icon id=\"add-series-button\" @tap=${(e: Event) => this.onTapAddTab(e)}>add</md-icon>\n        </div>\n\n        <div class=\"tab-content\">\n          <label for=\"data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n          <input id=\"data-key\" type=\"text\" value-key=\"dataKey\" .value=${configurer.dataKey || ''} />\n          <label for=\"series-label\"> <ox-i18n msgid=\"label.label\">Label</ox-i18n> </label>\n          <input id=\"series-label\" type=\"text\" value-key=\"series.label\" .value=${configurer.series.label || ''} />\n          <label for=\"series-color\"> <ox-i18n msgid=\"label.color\">Color</ox-i18n> </label>\n          <ox-input-color id=\"series-color\" value-key=\"color\" .value=${configurer.color || '#000'}></ox-input-color>\n          <label for=\"series-stack\"> <ox-i18n msgid=\"label.stack-group\">Stack Group</ox-i18n> </label>\n          <input id=\"series-stack\" type=\"text\" value-key=\"series.stack\" .value=${configurer.series.stack || ''} />\n\n          ${this.displayValueTemplate()}\n        </div>\n      </div>\n    `\n  }\n\n  getDefaultDatasets(): OperatoChart.Dataset[] {\n    return [this.getDefaultDataset('horizontalBar')]\n  }\n}\n"]}

package/dist/src/editors/ox-property-editor-chart.js

@@ -43,7 +43,7 @@ let ChartEditor = class ChartEditor extends OxPropertyEditor {
     `
     ]; }
     editorTemplate(value, spec) {
-        switch (value) {
+        switch (value.type) {
             case 'line':
             case 'bar':
                 return html ` <ox-input-chart-mixed .value=${value} chart-type=${value} fullwidth></ox-input-chart-mixed> `;