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

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

@@ -1,202 +0,0 @@
-import '@operato/i18n/ox-i18n.js'
-
-import { html, PropertyValues } from 'lit'
-import { property } from 'lit/decorators.js'
-
-import { random as randomColor, TinyColor } from '@ctrl/tinycolor'
-
-import { InputChartStyles } from './input-chart-styles'
-import { Configurer } from './configurer'
-import { OxFormField } from '@operato/input'
-
-export class InputChartAbstract extends OxFormField {
-  static styles = [InputChartStyles]
-
-  @property({ type: Object }) value: OperatoChart.ChartConfig | null = null
-  @property({ type: String, attribute: 'chart-type' }) chartType?: OperatoChart.ChartType
-
-  private _configurer?: Configurer
-
-  get configurer(): Configurer {
-    if (!this._configurer) {
-      this._configurer = new Configurer(this.value, () => {
-        return this.value || this.getDefaultChartConfig(this.chartType, this.getDefaultDatasets())
-      })
-    }
-    return this._configurer
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('value')) {
-      this.configurer.updateValue(this.value!)
-    }
-  }
-
-  render() {
-    const configurer = this.configurer
-
-    return html`
-      <legend><ox-i18n msgid="label.chart">Chart</ox-i18n></legend>
-
-      <label for="theme"> <ox-i18n msgid="label.theme">Theme</ox-i18n> </label>
-      <select id="theme" value-key="theme" class="select-content" .value=${configurer.theme || 'light'}>
-        <option value="auto">auto</option>
-        <option value="dark">dark</option>
-        <option value="light" checked>light</option>
-      </select>
-
-      <input id="tooltip" type="checkbox" value-key="tooltip" ?checked=${configurer.tooltip} />
-      <label for="tooltip"> <ox-i18n msgid="label.tooltip">Tooltip</ox-i18n> </label>
-
-      <input id="animation" type="checkbox" value-key="animation" ?checked=${configurer.animation} />
-      <label for="animation"> <ox-i18n msgid="label.animation">Animation</ox-i18n> </label>
-
-      <input id="display" type="checkbox" value-key="display" ?checked=${configurer.display} />
-      <label for="display"> <ox-i18n msgid="label.legend">Legend</ox-i18n> </label>
-
-      <input id="stacked" type="checkbox" value-key="stacked" ?checked=${configurer.stacked} />
-      <label for="stacked"> <ox-i18n msgid="label.stacked">Stacked</ox-i18n> </label>
-
-      ${configurer.display
-        ? html`
-            <label for="position"> <ox-i18n msgid="label.position">Position</ox-i18n> </label>
-            <select id="position" value-key="position" class="select-content" .value=${configurer.position || ''}>
-              <option value="top">top</option>
-              <option value="right">right</option>
-              <option value="bottom">bottom</option>
-              <option value="left">left</option>
-            </select>
-          `
-        : html``}
-      ${this.subTemplate()}
-    `
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    this.renderRoot.addEventListener('change', this.onValuesChanged.bind(this))
-  }
-
-  subTemplate() {
-    return html``
-  }
-
-  getDefaultDatasets(): OperatoChart.Dataset[] {
-    return [this.getDefaultDataset('bar')]
-  }
-
-  getDefaultDataset(seriesType: 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie'): OperatoChart.Dataset {
-    return {
-      label: 'Series 1',
-      data: [],
-      borderWidth: 1,
-      dataKey: '',
-      yAxisID: 'left',
-      color: randomColor({
-        hue: new TinyColor('#fff').clone().toString()
-      }).toRgbString(),
-      backgroundColor: '#FFFFFF',
-      type: seriesType,
-      stack: '',
-      fill: false,
-      lineTension: 0.4,
-      pointStyle: 'circle',
-      pointRadius: 3,
-      valuePrefix: '',
-      valueSuffix: '',
-      displayValue: false
-    }
-  }
-
-  getDefaultChartConfig(type?: OperatoChart.ChartType, datasets?: OperatoChart.Dataset[]): OperatoChart.ChartConfig {
-    return {
-      data: {
-        datasets: datasets || [],
-        labelDataKey: ''
-      },
-      options: {
-        theme: 'light',
-        tooltip: true,
-        animation: true,
-        legend: {
-          display: true,
-          position: 'top'
-        },
-        scales: {
-          xAxes: [this.getDefaultAxisOptions()],
-          yAxes: [this.getDefaultAxisOptions()]
-        },
-        stacked: false,
-        xGridLine: true,
-        yGridLine: true,
-        y2ndGridLine: false,
-        multiAxis: false
-      },
-      type
-    }
-  }
-
-  getDefaultAxisOptions(): OperatoChart.AxisOptions {
-    return {
-      axisTitle: '',
-      barSpacing: 0,
-      categorySpacing: 0,
-      barPercentage: 0.9,
-      ticks: {
-        display: true,
-        autoMin: true,
-        autoMax: true,
-        min: undefined,
-        max: undefined,
-        stepSize: undefined
-      }
-    }
-  }
-
-  onValuesChanged(e: Event) {
-    e.stopPropagation()
-
-    const element = e.target as HTMLInputElement
-    let key = element.getAttribute('value-key')
-    let value = element.value
-
-    if (!key) {
-      return
-    }
-
-    value = this._getElementValue(element)
-
-    const attrs = key.split('.')
-    let attr = attrs.shift() || ''
-    let variable: any = this.configurer
-
-    while (attrs.length > 0) {
-      variable = variable[attr]
-      attr = attrs.shift() || ''
-    }
-
-    variable[attr] = value
-
-    this.value = { ...this.configurer.value }
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-    this.requestUpdate()
-  }
-
-  _getElementValue(element: HTMLElement) {
-    switch (element.tagName) {
-      case 'INPUT':
-        switch ((element as HTMLInputElement).type) {
-          case 'checkbox':
-            return (element as HTMLInputElement).checked
-          case 'number':
-            return Number((element as HTMLInputElement).value) || 0
-          case 'text':
-            return String((element as HTMLInputElement).value)
-        }
-      default:
-        return (element as any).value
-    }
-  }
-}

package/src/editors/input-chart-styles.ts

@@ -1,206 +0,0 @@
-import { css } from 'lit'
-
-export const InputChartStyles = css`
-  :host {
-    display: grid;
-    grid-template-columns: repeat(10, 1fr);
-    grid-gap: 5px;
-
-    background-color: var(--ox-input-background-color, var(--md-sys-color-surface));
-    color: var(--ox-input-color, var(--md-sys-color-on-surface));
-  }
-
-  :host > * {
-    box-sizing: border-box;
-    grid-column: span 7;
-  }
-
-  :host > label {
-    box-sizing: border-box;
-    grid-column: span 3;
-  }
-
-  :host > legend {
-    box-sizing: border-box;
-    grid-column: 1 / -1;
-    color: var(--md-sys-color-on-secondary-container, #e46c2e);
-    font: var(--property-sidebar-fieldset-legend, bold 13px var(--theme-font));
-    text-transform: capitalize;
-  }
-
-  #series-properties-container,
-  #annotations-properties-container {
-    display: grid;
-    grid-template-columns: 1fr 25px;
-    align-items: center;
-    justify-content: center;
-  }
-
-  #series-properties-container > [tab-content],
-  #annotations-properties-container > [tab-content] {
-    grid-column: span 2;
-  }
-
-  #series-tab-header,
-  #annotations-tab-header {
-    display: grid;
-    grid-template-columns: 25px 1fr 25px;
-    grid-gap: 5px;
-    overflow: hidden;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-bottom: 0;
-    background-color: var(--md-sys-color-surface-variant);
-    color: var(--md-sys-color-on-surface);
-    box-sizing: border-box;
-    padding-top: 3px;
-    align-items: center;
-  }
-
-  #series-tab-header > div,
-  #annotations-tab-header > div {
-    height: 25px;
-  }
-
-  #series-tab-header md-icon[disabled],
-  #annotations-tab-header md-icon[disabled] {
-    opacity: 0.1;
-  }
-
-  #series-tabs,
-  #annotations-tabs {
-    display: flex;
-    overflow: hidden;
-  }
-
-  #series-tab-header #series-tabs [tab] md-icon,
-  #annotations-tab-header #annotations-tabs [tab] md-icon {
-    margin-left: auto;
-    padding: 2px;
-    color: var(--md-sys-color-on-surface);
-
-    --md-icon-size: 12px;
-  }
-
-  #add-series-button-container,
-  #add-annotation-button-container {
-    height: 100%;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: center;
-    padding-top: 3px;
-    display: flex;
-    border-bottom: rgba(0, 0, 0, 0.2) 1px solid;
-  }
-
-  #add-series-button,
-  #add-annotation-button {
-    width: 20px;
-    height: 20px;
-    padding: 0;
-    color: var(--md-sys-color-on-secondary-container);
-  }
-
-  .tab-content {
-    grid-column: 1 / -1;
-
-    background-color: rgba(255, 255, 255, 0.5);
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-width: 0 1px 1px 1px;
-    padding: 5px;
-    display: grid;
-    grid-template-columns: repeat(10, 1fr);
-    grid-gap: 5px;
-  }
-
-  .tab-content > * {
-    box-sizing: border-box;
-    grid-column: span 7;
-  }
-
-  label,
-  .tab-content > label {
-    grid-column: span 3;
-    text-align: right;
-    color: var(--md-sys-color-on-secondary-container);
-    font-size: 0.8em;
-    line-height: 2;
-    text-transform: capitalize;
-  }
-
-  input,
-  select {
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-radius: var(--spacing-small);
-  }
-
-  input[type='checkbox'],
-  .tab-content > input[type='checkbox'] {
-    grid-column: span 4;
-    justify-self: end;
-    align-self: center;
-  }
-
-  input[type='checkbox'] + label,
-  .tab-content > input[type='checkbox'] + label {
-    grid-column: span 6;
-
-    text-align: left;
-  }
-
-  [fullwidth] {
-    grid-column: 1 / -1;
-    margin: 0;
-    border: 0;
-  }
-
-  div[tab] {
-    display: flex;
-    align-items: center;
-    background-color: rgba(0, 0, 0, 0.2);
-    border-width: 1px 1px 0 1px;
-    padding: 0 5px;
-    color: var(--md-sys-color-on-surface);
-    box-sizing: border-box;
-    min-width: 45px;
-  }
-
-  div[tab][disabled] {
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-
-  div[tab]:last-child {
-    border-width: 0;
-  }
-
-  div[tab][selected] {
-    background-color: var(--md-sys-color-surface);
-    color: var(--md-sys-color-on-surface);
-  }
-
-  #display-value-container {
-    display: grid;
-    grid-template-columns: repeat(10, 1fr);
-    grid-gap: 5px;
-
-    background-color: var(--ox-input-background-color, var(--md-sys-color-surface));
-    color: var(--ox-input-color, var(--md-sys-color-on-surface));
-  }
-
-  #display-value-container > * {
-    box-sizing: border-box;
-    grid-column: span 7;
-  }
-
-  #display-value-container > label {
-    box-sizing: border-box;
-    grid-column: span 3;
-  }
-
-  #display-value-container > legend {
-    box-sizing: border-box;
-    grid-column: 1 / -1;
-    color: var(--md-sys-color-on-secondary-container, #e46c2e);
-    font: var(--property-sidebar-fieldset-legend, bold 13px var(--theme-font));
-    text-transform: capitalize;
-  }
-`

package/src/editors/ox-input-chart-hbar.ts

@@ -1,157 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/input/ox-input-color.js'
-import '@operato/i18n/ox-i18n.js'
-
-import { html } from 'lit'
-import { customElement } from 'lit/decorators.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
-
-import { InputChartAbstract } from './input-chart-abstract'
-
-import './templates/display-value'
-
-@customElement('ox-input-chart-hbar')
-export class OxInputChartHBar extends InputChartAbstract {
-  static styles = InputChartAbstract.styles
-
-  subTemplate() {
-    const configurer = this.configurer
-
-    return html`
-      <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
-      <ox-chart-series
-        .configurer=${configurer}
-        .chartType=${this.chartType}
-        value-key="datasets"
-        fullwidth
-      ></ox-chart-series>
-
-      <legend><ox-i18n msgid="label.y-axes">Y Axes</ox-i18n></legend>
-
-      <label for="label-data-key"> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
-      <input id="label-data-key" type="text" value-key="labelDataKey" value=${ifDefined(configurer.labelDataKey)} />
-
-      <label for="y-axes0-axis-title"> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
-      <input
-        id="y-axes0-axis-title"
-        type="text"
-        value-key="yAxes0.axisTitle"
-        value=${ifDefined(configurer.yAxes0.axisTitle)}
-      />
-
-      <label for="y-axes0-bar-spacing"><ox-i18n msgid="label.bar-spacing">Bar Spacing</ox-i18n></label>
-      <input
-        id="y-axes0-bar-spacing"
-        type="number"
-        min="0"
-        max="1"
-        step="0.1"
-        value-key="yAxes0.barSpacing"
-        value=${ifDefined(configurer.yAxes0.barSpacing)}
-      />
-      <label for="y-axes0-category-spacing"><ox-i18n msgid="label.tick-spacing">Tick Spacing</ox-i18n></label>
-      <input
-        id="y-axes0-category-spacing"
-        type="number"
-        min="0"
-        max="1"
-        step="0.1"
-        value-key="yAxes0.categorySpacing"
-        value=${ifDefined(configurer.yAxes0.categorySpacing)}
-      />
-
-      <input
-        id="x-grid-line"
-        type="checkbox"
-        value-key="value.options.xGridLine"
-        ?checked=${configurer.config.options?.xGridLine}
-      />
-      <label for="x-grid-line"> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
-
-      <input
-        id="x-axes0-ticks-display"
-        type="checkbox"
-        value-key="xAxes0.ticks.display"
-        ?checked=${configurer.xAxes0.ticks?.display}
-      />
-      <label for="x-axes0-ticks-display"> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
-
-      <legend><ox-i18n msgid="label.x-axes">X Axes</ox-i18n></legend>
-
-      <label for="x-axes0-axis-title"> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
-      <input
-        id="x-axes0-axis-title"
-        type="text"
-        value-key="xAxes0.axisTitle"
-        .value=${configurer.xAxes0.axisTitle || ''}
-      />
-
-      <input
-        id="x-axes0-axis-min-auto"
-        type="checkbox"
-        value-key="xAxes0.ticks.autoMin"
-        ?checked=${configurer.xAxes0.ticks?.autoMin}
-      />
-      <label for="x-axes0-axis-min-auto"> <ox-i18n msgid="label.axis-min-auto">Axis Min Auto</ox-i18n> </label>
-
-      <input
-        id="x-axes0-ticks-auto-max"
-        type="checkbox"
-        value-key="xAxes0.ticks.autoMax"
-        ?checked=${configurer.xAxes0.ticks?.autoMax}
-      />
-      <label for="x-axes0-ticks-auto-max"> <ox-i18n msgid="label.axis-max-auto">Axis Max Auto</ox-i18n> </label>
-
-      ${!configurer.xAxes0.ticks?.autoMin
-        ? html`
-            <label for="x-axes0-ticks-min"> <ox-i18n msgid="label.axis-min">Axis Min</ox-i18n> </label>
-            <input
-              id="x-axes0-ticks-min"
-              type="number"
-              value-key="xAxes0.ticks.min"
-              value=${ifDefined(configurer.xAxes0.ticks?.min)}
-            />
-          `
-        : html``}
-      ${!configurer.xAxes0.ticks?.autoMax
-        ? html`
-            <label for="x-axes0-ticks-max"> <ox-i18n msgid="label.axis-max">Axis Max</ox-i18n> </label>
-            <input
-              id="x-axes0-ticks-max"
-              type="number"
-              value-key="xAxes0.ticks.max"
-              value=${ifDefined(configurer.xAxes0.ticks?.max)}
-            />
-          `
-        : html``}
-
-      <label for="y-axes0-ticks-step-size"> <ox-i18n msgid="label.axis-step-size">Axis Step Size</ox-i18n> </label>
-      <input
-        id="y-axes0-ticks-step-size"
-        type="number"
-        value-key="yAxes0.ticks.stepSize"
-        value=${ifDefined(configurer.yAxes0.ticks?.stepSize)}
-      />
-
-      <input
-        id="y-grid-line"
-        type="checkbox"
-        value-key="value.options.yGridLine"
-        ?checked=${configurer.config.options?.yGridLine}
-      />
-      <label for="y-grid-line"> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
-
-      <input
-        id="y-axes0-ticks-display"
-        type="checkbox"
-        value-key="yAxes0.ticks.display"
-        ?checked=${configurer.yAxes0.ticks?.display}
-      />
-      <label for="y-axes0-ticks-display"> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
-    `
-  }
-
-  getDefaultDatasets(): OperatoChart.Dataset[] {
-    return [this.getDefaultDataset('horizontalBar')]
-  }
-}