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

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')]
-  }
-}

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

@@ -1,241 +0,0 @@
-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/series'
-
-@customElement('ox-input-chart-mixed')
-export class OxInputChartMixed extends InputChartAbstract {
-  static styles = InputChartAbstract.styles
-
-  subTemplate() {
-    const configurer = this.configurer
-
-    return html`
-      <input id="multi-axis" type="checkbox" value-key="multiAxis" ?checked=${configurer.multiAxis} />
-      <label for="multi-axis"> <ox-i18n msgid="label.multi-axis">Multi Axis</ox-i18n> </label>
-
-      <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.x-axes">X Axes</ox-i18n></legend>
-
-      <label for="series-data-key"> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
-      <input id="series-data-key" type="text" value-key="labelDataKey" value=${ifDefined(configurer.labelDataKey)} />
-
-      <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=${ifDefined(configurer.xAxes0.axisTitle)}
-      />
-
-      ${this._hasBarSeries(configurer.value)
-        ? html`
-            <label for="bar-spacing"><ox-i18n msgid="label.bar-spacing">Bar Spacing</ox-i18n></label>
-            <input
-              id="bar-spacing"
-              type="number"
-              min="0"
-              max="1"
-              step="0.1"
-              value-key="xAxes0.barSpacing"
-              value=${ifDefined(configurer.xAxes0.barSpacing)}
-            />
-            <label for="tick-spacing"><ox-i18n msgid="label.tick-spacing">Tick Spacing</ox-i18n></label>
-            <input
-              id="tick-spacing"
-              type="number"
-              min="0"
-              max="1"
-              step="0.1"
-              value-key="xAxes0.categorySpacing"
-              value=${ifDefined(configurer.xAxes0.categorySpacing)}
-            />
-          `
-        : html``}
-
-      <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.y-axes">Y Axes</ox-i18n></legend>
-
-      <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=${configurer.yAxes0.axisTitle || ''}
-      />
-
-      <input
-        id="axis-min-auto"
-        type="checkbox"
-        value-key="yAxes0.ticks.autoMin"
-        ?checked=${configurer.yAxes0.ticks?.autoMin}
-      />
-      <label for="axis-min-auto"> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
-
-      <input
-        id="axis-max-auto"
-        type="checkbox"
-        value-key="yAxes0.ticks.autoMax"
-        ?checked=${configurer.yAxes0.ticks?.autoMax}
-      />
-      <label for="axis-max-auto"> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
-
-      ${!configurer.yAxes0.ticks?.autoMin
-        ? html`
-            <label for="y-axes0-ticks-min"> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
-            <input
-              id="y-axes0-ticks-min"
-              type="number"
-              value-key="yAxes0.ticks.min"
-              value=${ifDefined(configurer.yAxes0.ticks?.min)}
-            />
-          `
-        : html``}
-      ${!configurer.yAxes0.ticks?.autoMax
-        ? html`
-            <label for="y-axes0-ticks-max"> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
-            <input
-              id="y-axes0-ticks-max"
-              type="number"
-              value-key="yAxes0.ticks.max"
-              value=${ifDefined(configurer.yAxes0.ticks?.max)}
-            />
-          `
-        : html``}
-
-      <label for="y-axes0-ticks-step-size"> <ox-i18n msgid="label.axis-step-size">StepSize</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>
-
-      ${configurer.config.options?.multiAxis
-        ? html`
-            <legend><ox-i18n msgid="label.y-2nd-axes">Y 2nd Axes</ox-i18n></legend>
-
-            <label for="y-axes1.axis-title"> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
-            <input
-              id="y-axes1.axis-title"
-              type="text"
-              value-key="yAxes1.axisTitle"
-              value=${ifDefined(configurer.yAxes1?.axisTitle)}
-            />
-
-            <input
-              id="y-axes1-ticks-auto-min"
-              type="checkbox"
-              value-key="yAxes1.ticks.autoMin"
-              ?checked=${configurer.yAxes1?.ticks?.autoMin}
-            />
-            <label for="y-axes1-ticks-auto-min"> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
-
-            <input
-              id="y-axes1-ticks-auto-max"
-              type="checkbox"
-              value-key="yAxes1.ticks.autoMax"
-              ?checked=${configurer.yAxes1?.ticks?.autoMax}
-            />
-            <label for="y-axes1-ticks-auto-max"> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
-
-            ${!configurer.yAxes1?.ticks?.autoMin
-              ? html`
-                  <label for="y-axes1-ticks-min"> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
-                  <input
-                    id="y-axes1-ticks-min"
-                    type="number"
-                    value-key="yAxes1.ticks.min"
-                    value=${ifDefined(configurer.yAxes1?.ticks?.min)}
-                  />
-                `
-              : html``}
-            ${!configurer.yAxes1?.ticks?.autoMax
-              ? html`
-                  <label for="y-axes1-ticks-max"> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
-                  <input
-                    id="y-axes1-ticks-max"
-                    type="number"
-                    value-key="yAxes1.ticks.max"
-                    value=${ifDefined(configurer.yAxes1?.ticks?.max)}
-                  />
-                `
-              : html``}
-
-            <label for="y-axes1-ticks-step-size"> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
-            <input
-              id="y-axes1-ticks-step-size"
-              type="number"
-              value-key="yAxes1.ticks.stepSize"
-              value=${ifDefined(configurer.yAxes1?.ticks?.stepSize)}
-            />
-
-            <input
-              id="y-2nd-grid-line"
-              type="checkbox"
-              value-key="value.options.y2ndGridLine"
-              ?checked=${configurer.config.options?.y2ndGridLine}
-            />
-            <label for="y-2nd-grid-line"> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
-
-            <input
-              id="y-axes1-ticks-display"
-              type="checkbox"
-              value-key="yAxes1.ticks.display"
-              ?checked=${configurer.yAxes1?.ticks?.display}
-            />
-            <label for="y-axes1-ticks-display"> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
-          `
-        : html``}
-    `
-  }
-
-  _hasBarSeries(config: any) {
-    var hasBarSeries = false
-    hasBarSeries = config.data.datasets?.some((s: any) => s.type == 'bar')
-
-    return hasBarSeries
-  }
-}

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

@@ -1,69 +0,0 @@
-import '@operato/i18n/ox-i18n.js'
-import '@operato/input/ox-input-multiple-colors.js'
-
-import { html } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { InputChartAbstract } from './input-chart-abstract'
-import './templates/display-value'
-
-@customElement('ox-input-chart-pie')
-export default class OxInputChartPie extends InputChartAbstract {
-  static styles = InputChartAbstract.styles
-
-  subTemplate() {
-    const configurer = this.configurer
-
-    return html`
-      <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
-
-      <label for="series-data-key"> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
-      <input id="series-data-key" type="text" value-key="dataKey" .value=${configurer.series.dataKey || ''} />
-
-      <label for="series-colors"> <ox-i18n msgid="label.color">Color</ox-i18n> </label>
-      <ox-input-multiple-colors
-        id="series-colors"
-        value-key="color"
-        .value=${configurer.color || []}
-      ></ox-input-multiple-colors>
-
-      <label></label>
-      <ox-chart-display-value .configurer=${configurer} fullwidth></ox-chart-display-value>
-
-      <legend><ox-i18n msgid="label.axes">Axes</ox-i18n></legend>
-
-      <label for="series-data-key"> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
-      <input id="series-data-key" type="text" value-key="labelDataKey" .value=${configurer.labelDataKey || ''} />
-    `
-  }
-
-  getDefaultChartConfig(type: OperatoChart.ChartType, datasets?: OperatoChart.Dataset[]): OperatoChart.ChartConfig {
-    return {
-      type: 'pie',
-      data: {
-        labels: [],
-        datasets: this.getDefaultDatasets(),
-        labelDataKey: 'label'
-      },
-      options: {
-        theme: 'dark',
-        legend: {
-          display: true,
-          position: 'top'
-        }
-      }
-    }
-  }
-
-  getDefaultDatasets(): OperatoChart.Dataset[] {
-    return [this.getDefaultDataset('pie')]
-  }
-
-  getDefaultDataset(seriesType: OperatoChart.SeriesType): OperatoChart.Dataset {
-    return {
-      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
-      borderWidth: 0,
-      dataKey: 'value'
-    }
-  }
-}