Buidling a custom horz bar chart in superset and adding a custom item to customize chart

I have no react, typscript or d3 experience prior to this.

I am trying to build a horizontal bar chart where I can customize the colours of the bar depending on the value of the bar

I have gotten this far. See this chart:

I need to change the conditional formatting customization so the color is not entered from a drop down and is a text area where I can enter the hex code.

This is what I need to change and the condiditional formating I am talking about. It is on the table chart:

I have traced it back to the following code in controlPanel.tsx

  {
      label: t('Options'),
      expanded: true,
      controlSetRows: [
        [
          {
            name: 'conditional_formatting',
            config: {
              type: 'ConditionalFormattingControl',
              renderTrigger: true,
              label: t('Conditional formatting'),
              description: t(
                'Apply conditional color formatting to numeric columns',

The actual pop up where you enter the field and color you want to associate the colour appears to be in /superset/superset-frontend/src/explore/components/controls/ConditionalFormatingcontrol folder. So what I was hoping to do was to copy that, make my changes and call it. However I have no idea how I need to compile it and no idea how to call it

My guess was I could change the type below to the name of the copy of the component I created if I had compiled things correctly

        name: 'conditional_formatting',
        config: {
          type: 'ConditionalFormattingControl',

Can anyone help me?

Solution 1:

The available chart customization controls for a chart in superset set appear to be located in

/superset/superset-frontend/src/expore/components/controls

The list of chart customization controls exported that are available for list is in

/superset/superset-frontend/src/expore/components/controls/index.js

To customize one or to create a new component for customizing a custom chart in superset copy put in the directory listed above that you have copied and changed from the directory above or created and change the index.js file so that it is exported for use