@chart-plugins/superset-indicator-chart/lib/controlPanel.js

Indicator chart plugin for Apache Superset

"use strict";

exports.__esModule = true;
exports.default = void 0;
var _core = require("@superset-ui/core");
var _chartControls = require("@superset-ui/chart-controls");
var _constants = require("./constants");
var _utils = require("./utils");
var _default = exports.default = {
  controlPanelSections: [{
    label: (0, _core.t)('Time'),
    expanded: true,
    description: (0, _core.t)('Time related form attributes'),
    controlSetRows: [['time_range']]
  }, {
    label: (0, _core.t)('Query'),
    expanded: true,
    tabOverride: 'data',
    controlSetRows: [['groupby'], ['metrics'], ['adhoc_filters'], ['row_limit'], ['sort_by_metric'], [{
      name: 'order_desc',
      config: {
        type: 'CheckboxControl',
        label: (0, _core.t)('Sort descending'),
        default: _constants.DEFAULT_FORM_DATA.order_desc,
        description: (0, _core.t)('Whether to sort descending or ascending')
      }
    }], [{
      name: 'data_color_mapper',
      config: (0, _utils.jsFunctionControl)((0, _core.t)('Advanced: JavaScript Color Mapper'), (0, _core.t)('Define a javascript function that receives the data object and is expected to return ' + 'a hex color code. This takes precedence over conditional formatting.'), null, 100, _constants.DEFAULT_FORM_DATA.data_color_mapper)
    }]]
  }, {
    label: (0, _core.t)('Display'),
    expanded: true,
    tabOverride: 'customize',
    controlSetRows: [[{
      name: 'text_color',
      config: {
        type: 'SelectControl',
        label: (0, _core.t)('Text Color'),
        choices: (0, _chartControls.formatSelectOptions)(['light', 'dark']),
        default: _constants.DEFAULT_FORM_DATA.text_color,
        renderTrigger: true
      }
    }], [{
      name: 'conditional_formatting',
      config: {
        type: 'ColorRangeControl',
        renderTrigger: true,
        label: (0, _core.t)('Conditional formatting'),
        description: (0, _core.t)('Apply conditional color formatting to metrics'),
        shouldMapStateToProps() {
          return true;
        },
        mapStateToProps(explore, _, chart) {
          var _explore$datasource, _explore$datasource2, _explore$datasource$c, _explore$datasource3, _chart$queriesRespons, _chart$queriesRespons2;
          const verboseMap = explore != null && (_explore$datasource = explore.datasource) != null && _explore$datasource.hasOwnProperty('verbose_map') ? explore == null || (_explore$datasource2 = explore.datasource) == null ? void 0 : _explore$datasource2.verbose_map : (_explore$datasource$c = explore == null || (_explore$datasource3 = explore.datasource) == null ? void 0 : _explore$datasource3.columns) != null ? _explore$datasource$c : {};
          const chartStatus = chart == null ? void 0 : chart.chartStatus;
          const {
            colnames,
            coltypes
          } = (_chart$queriesRespons = chart == null || (_chart$queriesRespons2 = chart.queriesResponse) == null ? void 0 : _chart$queriesRespons2[0]) != null ? _chart$queriesRespons : {};
          const numericColumns = Array.isArray(colnames) && Array.isArray(coltypes) ? colnames.filter((_, index) => coltypes[index] === _core.GenericDataType.Numeric).map(colname => {
            var _verboseMap;
            return {
              value: colname,
              label: (_verboseMap = verboseMap[colname]) != null ? _verboseMap : colname
            };
          }) : [];
          if (explore.form_data.compare_lag) numericColumns.push({
            value: 'сomparison_lag_value',
            label: (0, _core.t)('Period lag value')
          });
          return {
            removeIrrelevantConditions: chartStatus === 'success',
            columnOptions: numericColumns,
            verboseMap,
            colorFormat: 'hex'
          };
        }
      }
    }]]
  }, {
    label: (0, _core.t)('Chart Options'),
    expanded: true,
    controlSetRows: [[{
      name: 'markdown',
      config: {
        type: 'TextAreaControl',
        label: (0, _core.t)('Markdown'),
        default: _constants.DEFAULT_FORM_DATA.markdown,
        language: 'markdown',
        offerEditInModal: true,
        renderTrigger: true,
        description: (0, _core.t)('Use {{value}} or {{column_name}} for dynamic values')
      }
    }], [{
      name: 'number_format',
      config: {
        type: 'SelectControl',
        label: (0, _core.t)('Number format'),
        description: 'D3 format syntax: https://github.com/d3/d3-format',
        freeForm: true,
        renderTrigger: true,
        default: _constants.DEFAULT_FORM_DATA.number_format,
        choices: _chartControls.D3_FORMAT_OPTIONS
      }
    }], [{
      name: 'orientation',
      config: {
        type: 'SelectControl',
        label: (0, _core.t)('Orientation'),
        description: 'How to align multiple indicators',
        choices: (0, _chartControls.formatSelectOptions)(['horizontal', 'vertical']),
        default: _constants.DEFAULT_FORM_DATA.orientation,
        renderTrigger: true
      }
    }], [{
      name: 'rounded_corners',
      config: {
        type: 'CheckboxControl',
        label: (0, _core.t)('Rounded Corners'),
        default: _constants.DEFAULT_FORM_DATA.rounded_corners,
        renderTrigger: true
      }
    }]]
  }]
};