activator-oce-exporter/test/activator/shared/src/fusion/slide/chart-data/index.js

Extract Activator binder and convert it to valid OCE mono pacakge

import { html } from '@polymer/lit-element';
import { FusionBase } from '../../base';
import { FusionApi } from '../../api';
import { applyMixins, ModeTrackable, SlideComponent } from '../../mixins';

class FusionChartData extends applyMixins(FusionBase, [ModeTrackable, SlideComponent]) {
  static get properties() {
    return {
      legend: {
        type: String,
        fieldType: 'String',
        value: 'Placebo',
        prop: true,
      },
      values: {
        type: String,
        fieldType: 'String',
        value: '0.085,0.18,0.145,0.2,0.23,0.22,0.21,0.2,0.2,0.185',
        prop: true,
      },
      type: {
        type: String,
        fieldType: 'Select',
        value: 'bar',
        prop: true,
        selectOptions: [
          'area',
          'area-spline',
          'area-step',
          'bar',
          'donut',
          'gauge',
          'line',
          'pie',
          'scatter',
          'spline',
          'step',
        ],
      },
      'chart-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(0, 86, 250, 1)',
      },
      groups: {
        type: Boolean,
        fieldType: 'Boolean',
        value: false,
        prop: true,
      },
    };
  }

  static get options() {
    return {
      componentName: 'fusion-chart-data',
      componentUIName: 'Chart Data',
      componentScope: 'standard',
      componentType: 'static',
      componentCategory: 'data',
      componentDescription: 'Provides chart component with configurable data values',
      componentDomain: 'slide',
      isTextEdit: false,
      isRootNested: false,
      nestedTypes: [],
      nestedComponents: [],
      defaultTemplate: '',
      resizable: false,
      draggable: false,
      rotatable: false,
      sortable: false,
    };
  }

  connectedCallback() {
    super.connectedCallback();
    this.connectedActions();
  }

  connectedActions() {
    if (!this.hasAttribute('chart-data-id')) {
      this.setAttribute('chart-data-id', FusionApi.generateId());
    }
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this.emitCustomEvent('remove');
  }

  firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
  }

  update(changedProps) {
    super.update(changedProps);
    this.emitCustomEvent('update');
  }

  static getStyle() {
    const styleRoot = super.getStyle();
    return `
      ${styleRoot}
        :host(.${ModeTrackable.EditModeClassName}) {
          position: relative;
          display: inline-block;
          width: 40px;
          height: 30px;
          z-index: 2;
        }
        :host(.${ModeTrackable.EditModeClassName}):before {
          content: '';
          position: absolute;
          width: 30px;
          height: 100%;
          left: 50%;
          background: var(--chart-color);
          transform: translateX(-50%);
        }
      `;
  }

  render() {
    super.render();
    return html`
      <style>
        ${FusionChartData.getStyle()}
      </style>
      ${FusionChartData.getSystemSlotTemplate()}
    `;
  }
}

export { FusionChartData };