<!--
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<div class="option lightBold" style="overflow: visible;"
   ng-if="getResultType()=='TABLE' && getGraphMode()!='table'
   && paragraph.config.graph.optionOpen && !asIframe && !viewOnly">

  <div ng-include src="'app/notebook/paragraph/paragraph-graphOptions.html'"></div>

  All fields:
  <div class="allFields row">
    <ul class="noDot">
      <li class="liVertical" ng-repeat="col in paragraph.result.columnNames">
        <div class="btn btn-default btn-xs"
             data-drag="true"
             data-jqyoui-options="{revert: 'invalid', helper: 'clone'}"
             ng-model="paragraph.result.columnNames"
             jqyoui-draggable="{index: {{$index}}, placeholder: 'keep'}">
           {{col.name | limitTo: 30}}{{col.name.length > 30 ? '...' : ''}}
        </div>
      </li>
    </ul>
  </div>

  <div class="row" ng-if="getGraphMode()!='scatterChart'">
    <div class="col-md-4">
      <span class="columns lightBold">
        Keys
        <ul data-drop="true"
            ng-model="paragraph.config.graph.keys"
            jqyoui-droppable="{multiple:true, onDrop:'onGraphOptionChange()'}"
            class="list-unstyled">
          <li ng-repeat="item in paragraph.config.graph.keys">
            <div class="btn btn-primary btn-xs">
              {{item.name}} <span class="fa fa-close" ng-click="removeGraphOptionKeys($index)"></span>
            </div>
          </li>
        </ul>
      </span>
    </div>
    <div class="col-md-4">
      <span class="columns lightBold">
        Groups
        <ul data-drop="true"
            ng-model="paragraph.config.graph.groups"
            jqyoui-droppable="{multiple:true, onDrop:'onGraphOptionChange()'}"
            class="list-unstyled">
          <li ng-repeat="item in paragraph.config.graph.groups">
            <div class="btn btn-success btn-xs">
              {{item.name}} <span class="fa fa-close" ng-click="removeGraphOptionGroups($index)"></span>
            </div>
          </li>
        </ul>
      </span>
    </div>
    <div class="col-md-4">
      <span class="columns lightBold">
        Values
        <ul data-drop="true"
            ng-model="paragraph.config.graph.values"
            jqyoui-droppable="{multiple:true, onDrop:'onGraphOptionChange()'}"
            class="list-unstyled">
          <li ng-repeat="item in paragraph.config.graph.values">
            <div class="btn-group">
              <div class="btn btn-info btn-xs dropdown-toggle"
                   type="button"
                   data-toggle="dropdown">
                {{item.name | limitTo: 30}}{{item.name.length > 30 ? '...' : ''}}
                <font style="color:#EEEEEE;"><span class="lightBold" style="text-transform: uppercase;">{{item.aggr}}</span></font>
                <span class="fa fa-close" ng-click="removeGraphOptionValues($index)"></span>
              </div>
              <ul class="dropdown-menu" role="menu">
                <li ng-click="setGraphOptionValueAggr($index, 'sum')"><a>sum</a></li>
                <li ng-click="setGraphOptionValueAggr($index, 'count')"><a>count</a></li>
                <li ng-click="setGraphOptionValueAggr($index, 'avg')"><a>avg</a></li>
                <li ng-click="setGraphOptionValueAggr($index, 'min')"><a>min</a></li>
                <li ng-click="setGraphOptionValueAggr($index, 'max')"><a>max</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </span>
    </div>
  </div>

  <div class="row" ng-if="getGraphMode()=='scatterChart'">
    <div class="col-md-3">
      <span class="columns lightBold">
        xAxis
        <ul data-drop="true"
            ng-model="paragraph.config.graph.scatter.xAxis"
            jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
            class="list-unstyled"
            style="height:36px">
          <li ng-if="paragraph.config.graph.scatter.xAxis">
            <div class="btn btn-primary btn-xs">
              {{paragraph.config.graph.scatter.xAxis.name}} <span class="fa fa-close" ng-click="removeScatterOptionXaxis($index)"></span>
            </div>
          </li>
        </ul>
      </span>
    </div>
    <div class="col-md-3">
      <span class="columns lightBold">
        yAxis
        <ul data-drop="true"
            ng-model="paragraph.config.graph.scatter.yAxis"
            jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
            class="list-unstyled"
            style="height:36px">
          <li ng-if="paragraph.config.graph.scatter.yAxis">
            <div class="btn btn-success btn-xs">
              {{paragraph.config.graph.scatter.yAxis.name}} <span class="fa fa-close" ng-click="removeScatterOptionYaxis($index)"></span>
            </div>
          </li>
        </ul>
      </span>
    </div>
    <div class="col-md-3">
      <span class="columns lightBold">
        group
        <ul data-drop="true"
            ng-model="paragraph.config.graph.scatter.group"
            jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
            class="list-unstyled"
            style="height:36px">
          <li ng-if="paragraph.config.graph.scatter.group">
            <div class="btn btn-info btn-xs">
              {{paragraph.config.graph.scatter.group.name}} <span class="fa fa-close" ng-click="removeScatterOptionGroup($index)"></span>
            </div>
          </li>
        </ul>
      </span>
    </div>
    <div class="col-md-3">
      <span class="columns lightBold">
        size
        <a tabindex="0" class="fa fa-info-circle" role="button" popover-placement="top"
           popover-trigger="focus"
           popover-html-unsafe="<li>Size option is valid only when you drop numeric field here.</li>
                                <li>When data in each axis are discrete, 'number of values in corresponding coordinate' will be used as size.</li>
                                <li>Zeppelin consider values as discrete when the values contain string value or the number of distinct values are bigger than 5% of total number of values.</li>
                                <li>Size field button turns to grey when the option you chose is not valid.</li>"></a>
        <ul data-drop="true"
            ng-model="paragraph.config.graph.scatter.size"
            jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
            class="list-unstyled"
            style="height:36px">
          <li ng-if="paragraph.config.graph.scatter.size">
            <div class="btn btn-xs" style="color:white" ng-class="{'btn-warning': isValidSizeOption(paragraph.config.graph.scatter, paragraph.result.rows)}">
              {{paragraph.config.graph.scatter.size.name}} <span class="fa fa-close" ng-click="removeScatterOptionSize($index)"></span>
            </div>
          </li>
        </ul>
      </span>
    </div>
  </div>
</div>
