<commit_before><link rel="import" href="../../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../../bower_components/etools-data-table/etools-data-table.html">
<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../../../scripts/lodash/lodash.html">
<link rel="import" href="../../static-common-data/redux-behaviors/common-static-data-redux-behavior.html">
<link rel="import" href="../../../../styles/grid-layout-styles.html">

<dom-module id="applied-indicator">
  <template strip-whitespace>
    <style include="grid-layout-styles data-table-styles">
      :host {
        --list-row-wrapper: {
          padding: 0px 0px !important;
        };
        --list-row-collapse-wrapper: {
          padding: 16px 24px 16px 24px;
        };

        --icon-wrapper: {
          padding-left: 0px;
        };
        --list-second-bg-color: #dfdfdf;
        --list-icon-color: blue;
      }

      etools-data-table-row {
        @apply --layout-center;
      }
      .header-text {
        font-size: 12px;
        color: var(--list-secondary-text-color, #757575);
        font-weight: bold;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      .stretch {
        width: 100%;
      }
      .divider {
        height: 24px;
      }
      .padd-left {
        padding-left: 16px;
      }
    </style>

    <etools-data-table-row>
      <div slot="row-data">
        <!-- <div class="indicator-nr">
          <strong>[[_getIndicatorNr(indicatorIndex)]]</strong>
          <paper-icon-button class="edit-indicator"
                             on-tap="_editIndicator"
                             data-ind-index$="[[indicatorIndex]]"
                             data-result-index$="[[index]]"
                             icon="create"
                             disabled$="[[!editMode]]"
                             hidden$="[[!editMode]]"></paper-icon-button>
        </div> -->

        <div class="col-9">
            [[_getIndicatorType(indicator.indicator.unit)]][[_getIndicatorTitle(indicator)]]
        </div>
        <div class="col-1 right-align">
            [[_displayIndicatorValue(indicator.baseline)]]
        </div>
        <div class="col-2 right-align">
            [[_displayIndicatorValue(indicator.target)]]
        </div>
      </div>

      <div slot="row-data-details">
        <div class="layout-horizontal stretch">
          <div class="col-4">
            <div class="header-text">Section / Cluster</div>
            <div>[[getSectionName(indicator.section, sections)]] / [[getClusterName(indicator.cluster_name)]]</div>
            <div class="divider"></div>
            <div class="header-text">Disaggregation</div>
            <template is="dom-repeat" items="[[disaggregationNames]]">
                <div>[[item]]</div>
            </template>
          </div>
          <div class="col-8 padd-left">
              <div class="header-text">Locations</div>
              <template is="dom-repeat" items="[[locationNames]]">
                  <div>[[item]]</div>
              </template>

          </div>
        </div>
      </div>
      </etools-data-table-row>
  </template>
  <script>
    (function() {
      'use strict';

      Polymer({
        is: 'applied-indicator',
        properties: {
          indicator: {
            type: Object
          },
          locations: {
            type: Array,
            statePath: 'locations',
            observer: '_setLocationNames'
          },
          locationNames: {
            type: Array,
            value: ['-']
          },
          sections: {
            type: Array,
            statePath: 'sections'
          },
          disaggregations: {
            type: Array,
            statePath: 'disaggregations'
          },
          disaggregationNames: {
            type: Array,
            value: ['-']
          }
        },
        behaviors: [
          EtoolsPmpApp.Behaviors.EtoolsDataReduxStore,
        ],
        observers: [
          'setDisaggregationNames(disaggregations, indicator)'
        ],
        _setLocationNames: function() {
          if (!this.locations) {
            return;
          }
          let locations = this.locations.filter(function(loc) {<commit_msg>Conditional bg color for indicator collapse arrow<commit_after><link rel="import" href="../../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../../bower_components/etools-data-table/etools-data-table.html">
<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../../../scripts/lodash/lodash.html">
<link rel="import" href="../../static-common-data/redux-behaviors/common-static-data-redux-behavior.html">
<link rel="import" href="../../../../styles/grid-layout-styles.html">

<dom-module id="applied-indicator">
  <template strip-whitespace>
    <style include="grid-layout-styles data-table-styles">
      :host {
        --list-row-wrapper: {
          padding: 0px 0px !important;
        };
        --list-row-collapse-wrapper: {
          padding: 16px 24px 16px 24px;
        };

        --icon-wrapper: {
          padding: 0px 0px;
          margin-right: 16px;
          background-color:var(--collapse-icon-bg-color, var(--primary-color));
        };
        --list-second-bg-color: #dfdfdf;
        --list-icon-color: white;
      }

      .header-text {
        font-size: 12px;
        color: var(--list-secondary-text-color, #757575);
        font-weight: bold;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      .stretch {
        width: 100%;
      }
      .divider {
        height: 24px;
      }
      .padd-left {
        padding-left: 16px;
      }
    </style>

    <etools-data-table-row>
      <div slot="row-data">
        <!-- <div class="indicator-nr">
          <strong>[[_getIndicatorNr(indicatorIndex)]]</strong>
          <paper-icon-button class="edit-indicator"
                             on-tap="_editIndicator"
                             data-ind-index$="[[indicatorIndex]]"
                             data-result-index$="[[index]]"
                             icon="create"
                             disabled$="[[!editMode]]"
                             hidden$="[[!editMode]]"></paper-icon-button>
        </div> -->

        <div class="col-data col-9">
            [[_getIndicatorType(indicator.indicator.unit)]][[_getIndicatorTitle(indicator)]]
        </div>
        <div class="col-data col-1 right-align">
            [[_displayIndicatorValue(indicator.baseline)]]
        </div>
        <div class="col-data col-2 right-align">
            [[_displayIndicatorValue(indicator.target)]]
        </div>
      </div>

      <div slot="row-data-details">
        <div class="layout-horizontal stretch">
          <div class="col-4">
            <div class="header-text">Section / Cluster</div>
            <div>[[getSectionName(indicator.section, sections)]] / [[getClusterName(indicator.cluster_name)]]</div>
            <div class="divider"></div>
            <div class="header-text">Disaggregation</div>
            <template is="dom-repeat" items="[[disaggregationNames]]">
                <div>[[item]]</div>
            </template>
          </div>
          <div class="col-8 padd-left">
              <div class="header-text">Locations</div>
              <template is="dom-repeat" items="[[locationNames]]">
                  <div>[[item]]</div>
              </template>

          </div>
        </div>
      </div>
      </etools-data-table-row>
  </template>
  <script>
    (function() {
      'use strict';

      Polymer({
        is: 'applied-indicator',
        properties: {
          indicator: {
            type: Object,
            observer: '_indicatorChanged'
          },
          locations: {
            type: Array,
            statePath: 'locations',
            observer: '_setLocationNames'
          },
          locationNames: {
            type: Array,
            value: ['-']
          },
          sections: {
            type: Array,
            statePath: 'sections'
          },
          disaggregations: {
            type: Array,
            statePath: 'disaggregations'
          },
          disaggregationNames: {
            type: Array,
            value: ['-']
          }
        },
        behaviors: [
          EtoolsPmpApp.Behaviors.EtoolsDataReduxStore,
        ],
        observers: [
          'setDisaggregationNames(disaggregations, indicator)'
        ],
        _indicatorChanged: function(indicator) {
          if (indicator.cluster_indicator_id) {
            this.customStyle['--collapse-icon-bg-color'] = 'green';
          } else {
            this.customStyle['--collapse-icon-bg-color'] = 'var(--primary-color)';
          }

          this.updateStyles();
        },
        _setLocationNames: function() {
          if (!this.locations) {
            return;
          }
          let locations = this.locations.filter(function(loc) {
{'fraction_non_alphanumeric': 0.16149674620390456, 'fraction_numerical': 0.0070498915401301515, 'mean_word_length': 1.6196022727272728, 'pattern_counts': {'":': 0, '<': 113, '<?xml version=': 0, '>': 113, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2277860', 'n_tokens_mistral': 2739, 'n_tokens_neox': 2645, 'n_words': 403}