redash/client/app/visualizations/choropleth/choropleth-editor.html

<div>
  <ul class="tab-nav">
    <li ng-class="{active: $ctrl.currentTab == 'general'}">
      <a ng-click="$ctrl.setCurrentTab('general')">General</a>
    </li>
    <li ng-class="{active: $ctrl.currentTab == 'colors'}">
      <a ng-click="$ctrl.setCurrentTab('colors')">Colors</a>
    </li>
    <li ng-class="{active: $ctrl.currentTab == 'bounds'}">
      <a ng-click="$ctrl.setCurrentTab('bounds')">Bounds</a>
    </li>
  </ul>
  <div ng-if="$ctrl.currentTab == 'general'" class="m-t-10 m-b-10">
    <div class="row">
      <div class="col-xs-6">
        <div class="form-group">
          <label>Map Type</label>
          <select ng-options="key as value for (key, value) in $ctrl.mapTypes"
            ng-model="$ctrl.options.mapType" class="form-control"></select>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-6">
        <div class="form-group">
          <label>Key column</label>
          <select ng-options="col.name as col.name for col in $ctrl.data.columns"
            ng-model="$ctrl.options.countryCodeColumn" class="form-control"></select>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="form-group">
          <label>Key type</label>
          <select ng-options="key as value for (key, value) in $ctrl.countryCodeTypes"
            ng-model="$ctrl.options.countryCodeType" class="form-control"></select>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-6">
        <div class="form-group">
          <label>Value column</label>
          <select ng-options="col.name as col.name for col in $ctrl.data.columns"
            ng-model="$ctrl.options.valueColumn" class="form-control"></select>
        </div>
      </div>

      <div class="col-xs-6">
        <div class="form-group">
          <label for="legend-value-format">
            Value format
            <span class="m-l-5"
              uib-popover-html="'Format <a href=&quot;https://redash.io/help/user-guide/visualizations/formatting-numbers&quot; target=&quot;_blank&quot;>specs.</a>'"
              popover-trigger="'click outsideClick'"><i class="fa fa-question-circle"></i></span>
          </label>
          <input class="form-control" id="legend-value-format"
            ng-model="$ctrl.options.valueFormat" ng-model-options="{ allowInvalid: true, debounce: 200 }">
        </div>
      </div>

      <div class="col-xs-6">
        <div class="form-group">
          <label for="legend-value-placeholder">Value placeholder</label>
          <input class="form-control" id="legend-value-placeholder"
            ng-model="$ctrl.options.noValuePlaceholder" ng-model-options="{ allowInvalid: true, debounce: 200 }">
        </div>
      </div>
    </div>

    <div class="form-group">
      <label><input type="checkbox" ng-model="$ctrl.options.legend.visible"> Show legend</label>
    </div>
    <div class="row">
      <div class="col-xs-6">
        <div class="form-group">
          <label for="legend-position">Legend position</label>
          <select class="form-control" id="legend-position"
            ng-options="key as value for (key, value) in $ctrl.legendPositions"
            ng-model="$ctrl.options.legend.position"
            ng-disabled="!$ctrl.options.legend.visible"
          ></select>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="form-group">
          <label for="legend-position">Legend text alignment</label>
          <div class="btn-group d-flex">
            <button type="button" class="btn btn-default btn-md flex-fill"
              ng-click="$ctrl.options.legend.alignText = 'left'"
              ng-class="{active: $ctrl.options.legend.alignText == 'left'}"><i class="fa fa-align-left"></i></button>
            <button type="button" class="btn btn-default btn-md flex-fill"
              ng-click="$ctrl.options.legend.alignText = 'center'"
              ng-class="{active: $ctrl.options.legend.alignText == 'center'}"><i class="fa fa-align-center"></i></button>
            <button type="button" class="btn btn-default btn-md flex-fill"
              ng-click="$ctrl.options.legend.alignText = 'right'"
              ng-class="{active: $ctrl.options.legend.alignText == 'right'}"><i class="fa fa-align-right"></i></button>
          </div>
        </div>
      </div>
    </div>

    <label><input type="checkbox" ng-model="$ctrl.options.tooltip.enabled"> Show tooltip</label>
    <div class="form-group">
      <label for="tooltip-template">Tooltip template</label>
      <input class="form-control" id="tooltip-template"
        ng-model="$ctrl.options.tooltip.template" ng-model-options="{ allowInvalid: true, debounce: 200 }"
        ng-disabled="!$ctrl.options.tooltip.enabled">
    </div>

    <label><input type="checkbox" ng-model="$ctrl.options.popup.enabled"> Show popup</label>
    <div class="form-group">
      <label for="popup-template">Popup template</label>
      <textarea class="form-control resize-vertical" id="popup-template" rows="3"
        ng-model="$ctrl.options.popup.template" ng-model-options="{ allowInvalid: true, debounce: 200 }"
        ng-disabled="!$ctrl.options.popup.enabled"></textarea>
    </div>

    <div class="form-group">
      <label class="ui-sortable-bypass text-muted" style="font-weight: normal; cursor: pointer;"
        uib-popover-html="$ctrl.templateHint"
        popover-trigger="'click outsideClick'" popover-placement="top-left">
        Format specs <i class="fa fa-question-circle m-l-5"></i>
      </label>
    </div>
  </div>

  <div ng-if="$ctrl.currentTab == 'colors'" class="m-t-10 m-b-10">
    <div class="row">
      <div class="col-xs-6">
        <div class="form-group">
          <label>Steps</label>
          <input type="number" min="3" max="11" class="form-control"
            ng-model="$ctrl.options.steps">
        </div>
      </div>
      <div class="col-xs-6">
        <div class="form-group">
          <label>Clustering mode</label>
          <select ng-options="key as value for (key, value) in $ctrl.clusteringModes"
            ng-model="$ctrl.options.clusteringMode" class="form-control"></select>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-6">
        <div class="form-group">
          <label>Min color</label>
          <ui-select ng-model="$ctrl.options.colors.min">
            <ui-select-match>
              <color-box color="$select.selected.value"></color-box>
              <span ng-bind-html="$select.selected.key | capitalize"></span>
            </ui-select-match>
            <ui-select-choices repeat="color.value as (key, color) in $ctrl.colors">
              <color-box color="color.value"></color-box>
              <span ng-bind-html="color.key | capitalize | highlight: $select.search"></span>
            </ui-select-choices>
          </ui-select>
        </div>
      </div>

      <div class="col-xs-6">
        <div class="form-group">
          <label>Max color</label>
          <ui-select ng-model="$ctrl.options.colors.max">
            <ui-select-match>
              <color-box color="$select.selected.value"></color-box>
              <span ng-bind-html="$select.selected.key | capitalize"></span>
            </ui-select-match>
            <ui-select-choices repeat="color.value as (key, color) in $ctrl.colors">
              <color-box color="color.value"></color-box>
              <span ng-bind-html="color.key | capitalize | highlight: $select.search"></span>
            </ui-select-choices>
          </ui-select>
        </div>
      </div>

      <div class="col-xs-6">
        <div class="form-group">
          <label>No value color</label>
          <ui-select ng-model="$ctrl.options.colors.noValue">
            <ui-select-match>
              <color-box color="$select.selected.value"></color-box>
              <span ng-bind-html="$select.selected.key | capitalize"></span>
            </ui-select-match>
            <ui-select-choices repeat="color.value as (key, color) in $ctrl.colors">
              <color-box color="color.value"></color-box>
              <span ng-bind-html="color.key | capitalize | highlight: $select.search"></span>
            </ui-select-choices>
          </ui-select>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-6">
        <div class="form-group">
          <label>Background color</label>
          <ui-select ng-model="$ctrl.options.colors.background">
            <ui-select-match>
              <color-box color="$select.selected.value"></color-box>
              <span ng-bind-html="$select.selected.key | capitalize"></span>
            </ui-select-match>
            <ui-select-choices repeat="color.value as (key, color) in $ctrl.colors">
              <color-box color="color.value"></color-box>
              <span ng-bind-html="color.key | capitalize | highlight: $select.search"></span>
            </ui-select-choices>
          </ui-select>
        </div>
      </div>

      <div class="col-xs-6">
        <div class="form-group">
          <label>Borders color</label>
          <ui-select ng-model="$ctrl.options.colors.borders">
            <ui-select-match>
              <color-box color="$select.selected.value"></color-box>
              <span ng-bind-html="$select.selected.key | capitalize"></span>
            </ui-select-match>
            <ui-select-choices repeat="color.value as (key, color) in $ctrl.colors">
              <color-box color="color.value"></color-box>
              <span ng-bind-html="color.key | capitalize | highlight: $select.search"></span>
            </ui-select-choices>
          </ui-select>
        </div>
      </div>
    </div>
  </div>

  <div ng-if="$ctrl.currentTab == 'bounds'" class="m-t-10 m-b-10">
    <div class="form-group">
      <label>North-East latitude and longitude</label>
      <div class="row">
        <div class="col-xs-6">
          <input class="form-control" type="text"
            ng-model="$ctrl.options.bounds[1][0]" ng-model-options="{ allowInvalid: true, debounce: 200 }">
        </div>
        <div class="col-xs-6">
          <input class="form-control" type="text"
            ng-model="$ctrl.options.bounds[1][1]" ng-model-options="{ allowInvalid: true, debounce: 200 }">
        </div>
      </div>
    </div>

    <div class="form-group">
      <label>South-West latitude and longitude</label>
      <div class="row">
        <div class="col-xs-6">
          <input class="form-control" type="text"
            ng-model="$ctrl.options.bounds[0][0]" ng-model-options="{ allowInvalid: true, debounce: 200 }">
        </div>
        <div class="col-xs-6">
          <input class="form-control" type="text"
            ng-model="$ctrl.options.bounds[0][1]" ng-model-options="{ allowInvalid: true, debounce: 200 }">
        </div>
      </div>
    </div>
  </div>
</div>