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

Indicator chart plugin for Apache Superset

import { GenericDataType, t } from '@superset-ui/core';
import { formatSelectOptions, D3_FORMAT_OPTIONS } from '@superset-ui/chart-controls';
import { DEFAULT_FORM_DATA } from './constants';
import { jsFunctionControl } from './utils';
export default {
  controlPanelSections: [{
    label: t('Time'),
    expanded: true,
    description: t('Time related form attributes'),
    controlSetRows: [['time_range']]
  }, {
    label: t('Query'),
    expanded: true,
    tabOverride: 'data',
    controlSetRows: [['groupby'], ['metrics'], ['adhoc_filters'], ['row_limit'], ['sort_by_metric'], [{
      name: 'order_desc',
      config: {
        type: 'CheckboxControl',
        label: t('Sort descending'),
        default: DEFAULT_FORM_DATA.order_desc,
        description: t('Whether to sort descending or ascending')
      }
    }], [{
      name: 'data_color_mapper',
      config: jsFunctionControl(t('Advanced: JavaScript Color Mapper'), 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, DEFAULT_FORM_DATA.data_color_mapper)
    }]]
  }, {
    label: t('Display'),
    expanded: true,
    tabOverride: 'customize',
    controlSetRows: [[{
      name: 'text_color',
      config: {
        type: 'SelectControl',
        label: t('Text Color'),
        choices: formatSelectOptions(['light', 'dark']),
        default: DEFAULT_FORM_DATA.text_color,
        renderTrigger: true
      }
    }], [{
      name: 'conditional_formatting',
      config: {
        type: 'ColorRangeControl',
        renderTrigger: true,
        label: t('Conditional formatting'),
        description: 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] === 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: t('Period lag value')
          });
          return {
            removeIrrelevantConditions: chartStatus === 'success',
            columnOptions: numericColumns,
            verboseMap,
            colorFormat: 'hex'
          };
        }
      }
    }]]
  }, {
    label: t('Chart Options'),
    expanded: true,
    controlSetRows: [[{
      name: 'markdown',
      config: {
        type: 'TextAreaControl',
        label: t('Markdown'),
        default: DEFAULT_FORM_DATA.markdown,
        language: 'markdown',
        offerEditInModal: true,
        renderTrigger: true,
        description: t('Use {{value}} or {{column_name}} for dynamic values')
      }
    }], [{
      name: 'number_format',
      config: {
        type: 'SelectControl',
        label: t('Number format'),
        description: 'D3 format syntax: https://github.com/d3/d3-format',
        freeForm: true,
        renderTrigger: true,
        default: DEFAULT_FORM_DATA.number_format,
        choices: D3_FORMAT_OPTIONS
      }
    }], [{
      name: 'orientation',
      config: {
        type: 'SelectControl',
        label: t('Orientation'),
        description: 'How to align multiple indicators',
        choices: formatSelectOptions(['horizontal', 'vertical']),
        default: DEFAULT_FORM_DATA.orientation,
        renderTrigger: true
      }
    }], [{
      name: 'rounded_corners',
      config: {
        type: 'CheckboxControl',
        label: t('Rounded Corners'),
        default: DEFAULT_FORM_DATA.rounded_corners,
        renderTrigger: true
      }
    }]]
  }]
};