<commit_before><link rel="import" href="../../../../../bower_components/polymer/polymer-element.html">

<link rel="import" href="../../../styles/shared-styles.html">
<link rel="import" href="../../../styles/list-styles.html">
<link rel="import" href="../../../styles/grid-layout-styles.html">
<link rel="import" href="../../../styles/hact-graphs-styles.html">
<link rel="import" href="../../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../../../../bower_components/paper-styles/element-styles/paper-material-styles.html">
<link rel="import" href="../../../../../bower_components/iron-icon/iron-icon.html">

<link rel="import" href="../../../../../bower_components/google-chart/google-chart.html">
<link rel="import" href="../../../../../bower_components/google-chart/google-chart-loader.html">
<link rel="import" href="../../../../../bower_components/google-chart/charts-loader.html">

<link rel="import" href="../../../config/config.html">

<link rel="import" href="../../../mixins/redux-store-mixin.html">
<link rel="import" href="../../../config/config.html">
<link rel="import" href="../../../mixins/event-helper-mixin.html">


<dom-module id="hact-charts">
  <template>
    <style include="shared-styles list-styles grid-layout-styles hact-graph-styles paper-material-styles">
      :host {
        --divider-light-color: #E0E0E0;
        --assuranceChart: {
          height: 75px;
          width: auto;
        };
        --columnChart: {
          height: 400px;
        };
        font-size: 16px;
      }

      iron-icon {
        cursor: pointer;
      }
  
      .viz-col {
        width: 100%;
        height: 400px;
      }
      
  
      .hact-title {
        font-size: 16px;
        height: 56px;
      }
  
      .divider {
        background-color: rgba(0, 0, 0, 0.3);
        height: 1px;
      }
  
      .border-bottom {
        border-bottom: 1px solid var(--divider-light-color);
      }
  
      .hact-paper {
        padding: 0;
      }
  
      .component {
        padding: 16px 24px;
        box-sizing: border-box;
      }
  
      .border-right {
        border-right: 1px solid var(--divider-light-color);
      }
  
      .assurance-color {
        color: var(--secondary-text-color);
      }
  
      .assurance-data {
        margin-right: 48px;
      }
  
      .prog-visits {
        margin: 16px 0 0 24px;
      }
  
      .micro {
        margin: 0 0 16px 0;
      }
  
      .spot {
        padding-right: 0;
        margin-right: 24px;
      }
  
      .tuck-left-top {
        padding-left: 0;
        padding-top: 0
      }
  
      .tuck-left-bottom {
        padding-bottom: 0;
      }
  
      .viz {
        @apply --assuranceChart;
      }
    </style>
  
    <google-chart-loader id="google"></google-chart-loader>
  
    <!--Assurance Activities-->
    <div class="paper-material list-panel hact-paper layout  center-center"
         elevation="1">
      <div class="hact-title component">
        Assessment and Assurance Activities
      </div>
      <div class="divider"></div>
  
      <div class="layout-vertical">
  
        <div class="layout-horizontal">
  
          <div class="component flex-1 layout-horizontal center border-right border-bottom tuck-left-top prog-visits ">
            <div class="col-3 assurance-color">
              Programmatic
              <br>Visits
            </div>
            <div class="flex-1 layout-vertical">
              <google-chart id="progVisitsChart"
                            class="viz"
                            type="bar">
              </google-chart>
            </div>
  
          </div>
  
          <div class="component flex-1 layout-horizontal center border-bottom spot">
            <div class="col-3 assurance-color">
              Spot
              <br>Checks
            </div>
            <div class="flex-1 layout-vertical">
              <google-chart id="spotChecksChart"
                            class="viz"
                            type="bar">
              </google-chart>
            </div>
          </div>
  
        </div>
  
        <div class="layout-horizontal">
          <div class="component flex-1 layout-horizontal center border-right tuck-left-bottom micro ">
            <div class="col-3 assurance-color">
              Micro
              <br> Assessments
            </div>
            <div class="flex-1 layout-horizontal">
              <div class="assurance-data">
                <div class="completed">[[chartData.assurance_activities.micro_assessment]]</div>
                <div class="subheading assurance-color">Completed</div>
              </div>
              <div class="assurance-data">
                <div class="completed">[[chartData.assurance_activities.missing_micro_assessment]]</div>
                <div class="subheading assurance-color">Expiring</div>
              </div>
            </div>
          </div>
  
          <div class="component flex-1 layout-horizontal center ">
            <div class="col-3 assurance-color">
              Scheduled
              <br> Audits
            </div>
            <div class="flex-1 layout-horizontal">
              <div class="assurance-data">
                <div class="completed">[[chartData.assurance_activities.scheduled_audit]]
                  <a target="_blank"
                     href="[[schedAuditUrl]]">
                    <iron-icon class="dark"
                               icon="file-download"></iron-icon>
                  </a>
                </div>
                <div class="subheading assurance-color">Completed</div>
              </div>
            </div>
            <div class="col-2 assurance-color">
              Special
              <br> Audits
            </div>
            <div class="flex-1 layout-horizontal">
              <div class="assurance-data">
                <div class="completed">[[chartData.assurance_activities.special_audit]]
                    <a target="_blank"
                     href="[[specialAuditUrl]]">
                    <iron-icon class="dark"
                               icon="file-download"></iron-icon>
                  </a>
                </div>
                <div class="subheading assurance-color">Completed</div>
              </div>
            </div>
          </div>
        </div>
  
      </div>
    </div>
  
    <!--Assurance Coverage -->
    <div class="paper-material list-panel hact-paper layout center-center"
         elevation="1">
      <div class="hact-title component">
        Assurance Coverage
      </div>
      <div class="divider"></div>
      <div class="layout-vertical">
        <div class="layout-horizontal">
          <div class="flex-1 layout-column component border-right border-bottom tuck-left-top prog-visits">
            <div class="assurance-color">Coverage By Number of IPs</div>
      
            <google-chart id="coverageByIpChart"
                          class="coverage-pie"
                          type="pie">
            </google-chart>
          </div>
          <div class="flex-1 layout-column component border-bottom tuck-left-bottom">
            <div class="assurance-color">Coverage by Cash Transfers (USD)(Total)</div>
      
            <google-chart id="coverageCashChart"
                          class="coverage-pie"
                          type="pie">
            </google-chart>
          </div>
        </div>

        <div class="layout-horizontal">
          <div class="component flex-1 layout-horizontal center border-right tuck-left-bottom micro ">
            <div class="col-3 assurance-color">
              IPs Without
              <br> Assurance
            </div>
            <div class="flex-1 layout-horizontal">
              <div class="assurance-data">
                <div class="completed">[[chartData.assurance_coverage.table.2.value]]
                  <a target="_blank"
                     href="[[notProgVisitsUrl]]">
                    <iron-icon class="dark"
                               icon="file-download"></iron-icon>
                  </a>
                </div>
                <div class="subheading assurance-color">Programmatic Visits (PV)</div>
              </div>
              <div class="assurance-data">
                <div class="completed">[[chartData.assurance_coverage.table.1.value]]
                  <a target="_blank"
                     href="[[notSpotChecksUrl]]">
                    <iron-icon class="dark"
                               icon="file-download"></iron-icon>
                  </a>
                </div>
                <div class="subheading assurance-color">Spot Checks (SC)</div>
              </div>
              <div class="assurance-data">
                  <div class="completed">[[chartData.assurance_coverage.table.0.value]]
                    <a target="_blank"
                       href="[[notAssuranceUrl]]">
                      <iron-icon class="dark"
                                 icon="file-download"></iron-icon>
                    </a>
                  </div>
                  <div class="subheading assurance-color">Both PV & SC</div>
                </div>
            </div>
          </div>
          <div class="component flex-1"></div>
        </div>
      </div>
    </div>
  
    <!--Financial Findings -->
    <div class="paper-material list-panel hact-paper layout center-center"
         elevation="1">
      <div class="hact-title component">
        Financial Findings
      </div>
      <div class="divider"></div>
      <div class="layout-horizontal">
        <div class="financial-col label flex-1 layout-vertical">
          <template is="dom-repeat"
                    items="[[chartData.financial_findings]]">
            <div class$="layout-horizontal justified [[isHighlighted(item.highlighted)]]">
              <div class="fin-title flex-1">[[item.name]]</div>
              <div class="fin-amount">[[_numWithCommas(item.value)]]</div>
            </div>
          </template>
        </div>
  
        <div class="financial-col label flex-1 layout-vertical">
          <div class="layout-horizontal justified">
            <div class="fin-title flex-1">[[chartData.financial_findings_numbers.0.name]]</div>
            <div class="fin-amount">[[chartData.financial_findings_numbers.0.value]]</div>
          </div>
          <div class="layout-horizontal justified">
            <div class="fin-title flex-1">[[chartData.financial_findings_numbers.1.name]]</div>
            <div class="fin-amount">[[chartData.financial_findings_numbers.1.value]]</div>
          </div>
          <div class="layout-horizontal justified">
            <div class="fin-title flex-1">[[chartData.financial_findings_numbers.2.name]]</div>
            <div class="fin-amount">[[chartData.financial_findings_numbers.2.value]]</div>
          </div>
          <div class="layout-horizontal justified audit-line">
            <div class="fin-title flex-1">[[chartData.financial_findings_numbers.3.name]]</div>
          </div>
          <template is="dom-repeat"
                    items="[[chartData.financial_findings_numbers.3.value]]">
            <div class="layout-horizontal justified audit-line">
              <div class="fin-title flex-1 sub-col">[[_dashCapital(item.name)]]</div>
              <div class="fin-amount">[[item.value]]</div>
            </div>
          </template>
        </div>
      </div>
    </div>
  
  
  
    <!--Cash Transfer Amounts-->
    <div class="paper-material list-panel hact-paper layout center-center"
         elevation="1">
      <div class="hact-title component">
        Total Cash Transfer by Cash Transfer Ranges
      </div>
      <div class="divider"></div>
      <div class="layout-horizontal">
        <div class="col-8 component">
          <google-chart id="cash_transfers_amountsChart"
                        class="viz-col"
                        type="column">
          </google-chart>
        </div>
        <div class="col-3 component ratings-wrapper layout-vertical">
          <div class="layout-horizontal justified">
            <div class="risk-rating-title">Risk Ratings</div>
            <div class="risk-rating-title">Number of IPs</div>
          </div>
          <div class="layout-vertical risk-ratings label">
  
            <div class="layout-horizontal">
              <div class="marker risk-not-required"></div>
              <div class="flex-1 sub-col">Not Required</div>
              <div>[[riskRatings.0]]</div>
            </div>
  
            <div class="layout-horizontal">
              <div class="marker risk-low"></div>
              <div class="flex-1 sub-col">Low</div>
              <div>[[riskRatings.1]]</div>
            </div>
  
            <div class="layout-horizontal">
              <div class="marker risk-medium"></div>
              <div class="flex-1 sub-col">Medium</div>
              <div>[[riskRatings.2]]</div>
            </div>
  
            <div class="layout-horizontal">
              <div class="marker risk-significant"></div>
              <div class="flex-1 sub-col">Significant</div>
              <div>[[riskRatings.3]]</div>
            </div>
  
            <div class="layout-horizontal">
              <div class="marker risk-high"></div>
              <div class="flex-1 sub-col">High</div>
              <div>[[riskRatings.4]]</div>
            </div>
  
          </div>
        </div>
      </div>
    </div>
  
    <!--IP Risk Rating-->
    <div class="paper-material list-panel hact-paper layout center-center"
         elevation="1">
      <div class="hact-title component">
        Total Cash Transfers by IP Risk Rating
      </div>
      <div class="divider"></div>
      <div class="layout-horizontal">
        <div class="col-8 component">
          <google-chart id="cash_transfers_risk_ratingsChart"
                        class="viz-col"
                        type="column">
          </google-chart>
        </div>
        <div class="col-3 component ratings-wrapper layout-vertical">
          <div class="layout-horizontal justified">
            <div class="risk-rating-title">Risk Ratings</div>
            <div class="risk-rating-title">Number of IPs</div>
          </div>
          <div class="layout-vertical risk-ratings label">
  
            <div class="layout-horizontal">
              <div class="marker risk-not-required"></div>
              <div class="flex-1 sub-col">Not Required</div>
              <div>[[riskRatings.0]]</div>
            </div>
  
            <div class="layout-horizontal">
              <div class="marker risk-low"></div>
              <div class="flex-1 sub-col">Low</div>
              <div>[[riskRatings.1]]</div>
            </div>
  
            <div class="layout-horizontal">
              <div class="marker risk-medium"></div>
              <div class="flex-1 sub-col">Medium</div>
              <div>[[riskRatings.2]]</div>
            </div>
  
            <div class="layout-horizontal">
              <div class="marker risk-significant"></div>
              <div class="flex-1 sub-col">Significant</div>
              <div>[[riskRatings.3]]</div>
            </div>
  
            <div class="layout-horizontal">
              <div class="marker risk-high"></div>
              <div class="flex-1 sub-col">High</div>
              <div>[[riskRatings.4]]</div>
            </div>
  
          </div>
        </div>
      </div>
    </div>
  
    <!--PARTNER TYPE / SPOT CHECKS COMPLETED-->
    <div class="layout-horizontal flex-1">
  
      <div class="paper-material list-panel hact-paper half-paper layout center-center"
           elevation="1">
        <div class="hact-title component">
          Cash Transfers by Partner Type
        </div>
        <div class="divider"></div>
        <div class="layout-horizontal">
          <div class="flex-1 component">
            <google-chart id="cash_transfers_partner_typeChart"
                          class="viz-col"
                          type="column">
            </google-chart>
          </div>
  
        </div>
      </div>
  
      <div class="paper-material hact-paper half-paper layout center-center"
           elevation="1">
        <div class="hact-title component">
          Spot Checks Completed
        </div>
        <div class="divider"></div>
        <div class="layout-horizontal component">
          <div class="col-40">
            <google-chart id="spot_checks_completedChart"
                          class="viz-col"
                          type="pie">
            </google-chart>
          </div>
          <div class="flex-1">
            <div class="component ratings-wrapper spot-checks-table layout-vertical">
              <div class="risk-rating-title">Completed By</div>
              <div class="layout-vertical risk-ratings label">
  
                <div class="layout-horizontal">
                  <div class="marker risk-low"></div>
                  <div class="flex-1 sub-col">Staff</div>
                  <div>[[chartData.charts.spot_checks_completed.1.1]]</div>
                </div>
  
                <div class="layout-horizontal">
                  <div class="marker risk-medium"></div>
                  <div class="flex-1 sub-col">Service Providers</div>
                  <div>[[chartData.charts.spot_checks_completed.2.1]]</div>
                </div>
  
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
    'use strict';
    
    /**
     * @polymer
     * @mixinFunction
     * @appliesMixin EtoolsDashboard.Mixins.ReduxStore
     * @appliesMixin EtoolsDashboard.Mixins.EventHelper
     */
    const ChartsMixin = compose(
      EtoolsDashboard.Mixins.ReduxStore,
      EtoolsDashboard.Mixins.EventHelper
      )(Polymer.Element);
    const { baseSite } = EtoolsDashboard.Config;
    /**
    * @polymer
    * @customElement
    */
    class HactCharts extends ChartsMixin {
      static get is() { return 'hact-charts'; }

      static get properties() {
        return {
          notProgVisitsUrl: {
            type: String,
            value: `${baseSite}/api/v2/partners/not_programmatic_visit?format=csv`
          },
          notSpotChecksUrl: {
            type: String,
            value: `${baseSite}/api/v2/partners/not_spot_check/?format=csv`
          },
          notAssuranceUrl: {
            type: String,
            value: `${baseSite}/api/v2/partners/not_assurance/?format=csv`
          },
          specialAuditUrl: {
            type: String,
            value: `${baseSite}/api/v2/partners/special_audit_completed/?format=csv`
          },
          schedAuditUrl: {
            type: String,
            value: `${baseSite}/api/v2/partners/scheduled_audit_completed/?format=csv`
          },
          assuranceChartOptions: {
            type: Object,
            value: {
              legend: { position: 'none' },
              bars: 'horizontal',
              bar: { groupWidth: '100%' },
              colors: ['transparent'],
              chartArea: {
                top: '0',
                bottom: '0',
                left: '0',
                width: '85%'
              },
              annotations: {
                textStyle: {
                  color: '#000000',
                  auraColor: 'transparent',
                  opacity: '0.54'
                },
                datum: {
                  stem: {
                    color: 'transparent'
                  }
                },
                stem: {
                  color: 'none',
                  display: 'none',
                  length: 1
                },
                boxStyle: {
                  display: 'none'
                },
                alwaysOutside: true
              },
              hAxis: {
                baselineColor: 'none',
                ticks: [],
                textPosition: 'none'
              },
              vAxis: {
                baselineColor: 'none',
                ticks: [],
                display: 'none',
                textPosition: 'none'
              }
            }
          },
          cash_transfers_amountsOptions: {
            type: Object,
            value: {
              isStacked: true,
              legend: { position: 'none' },
              bar: { groupWidth: '35%' },
              chartArea: {
                top: '32',
                bottom: '150',
                right: '88',
                width: '65%',
                height: '55%'
              },
              colors: ['#D8D8D8', '#2BB0F2', '#FECC02', '#F05656', '#751010', '#000000'],
              hAxis: {
                title: 'Cash Transfer Ranges',
                format: 'currency',
                slantedText: true,
                slantedTextAngle: 315,
                textStyle: {
                  color: '#000000',
                  opacity: 0.54,
                  fontSize: 14,
                  bold: false,
                  italic: false
                }
              },
              vAxes: {
                0: {
                  title: 'Total Cash Transfers Jan - Dec (USD)',
                  format: 'currency',
                  titleTextStyle: {
                    color: '#000000',
                    opacity: 0.54,
                    fontSize: 14,
                    bold: false,
                    italic: false
                  },
                  textStyle: {
                    color: '#000000',
                    opacity: 0.54,
                    fontSize: 14,
                    bold: false,
                    italic: false
                  }
                },
                1: {
                  title: 'Number of IPs (All Risk Ratings)',
                  titleTextStyle: {
                    italic: false
                  }
                }
              },
              series: {
                5: {
                  targetAxisIndex: 1,
                  type: 'line'
                }
              }
            }
          },
          cash_transfers_risk_ratingsOptions: {
            type: Object,
            value: {
              legend: { position: 'none' },
              bar: { groupWidth: '35%' },
              chartArea: {
                top: '32',
                bottom: '150',
                right: '88',
                width: '65%',
                height: '55%'
              },
              hAxis: {
                title: 'Risk Rating',
                textStyle: {
                  color: '#000000',
                  opacity: 0.54,
                  fontSize: 14,
                  bold: false,
                  italic: false
                }
              },
              vAxes: {
                0: {
                  title: 'Total Cash Transfers Jan - Dec (USD)',
                  format: 'currency',
                  titleTextStyle: {
                    color: '#000000',
                    opacity: 0.54,
                    fontSize: 14,
                    bold: false,
                    italic: false
                  },
                  textStyle: {
                    color: '#000000',
                    opacity: 0.54,
                    fontSize: 14,
                    bold: false,
                    italic: false
                  }
                },
                1: {
                  title: 'Number of IPs (All Risk Ratings)',
                  titleTextStyle: {
                    italic: false
                  }
                }
              },
              series: {
                1: {
                  targetAxisIndex: 1,
                  type: 'line',
                  color: '#000000'
                }
              }
            }
          },
          cash_transfers_partner_typeOptions: {
            type: Object,
            value: {
              legend: { position: 'none' },
              bar: { groupWidth: '35%' },
              chartArea: {
                top: '32',
                bottom: '150',
                right: '88',
                width: '65%',
                height: '55%'
              },
              hAxis: {
                textStyle: {
                  color: '#000000',
                  opacity: 0.54,
                  fontSize: 14,
                  bold: false,
                  italic: false
                }
              },
              vAxes: {
                0: {
                  title: 'Total Cash Transfers Jan - Dec (USD)',
                  format: 'currency',
                  titleTextStyle: {
                    color: '#000000',
                    opacity: 0.54,
                    fontSize: 14,
                    bold: false,
                    italic: false
                  },
                  textStyle: {
                    color: '#000000',
                    opacity: 0.54,
                    fontSize: 14,
                    bold: false,
                    italic: false
                  }
                },
                1: {
                  title: 'Number of Partners',
                  titleTextStyle: {
                    italic: false
                  }
                }
              },
              series: {
                1: {
                  targetAxisIndex: 1,
                  type: 'line',
                  color: '#000000'
                }
              }
            }
          },
          spot_checks_completedOptions: {
            type: Object,
            value: {
              legend: 'none',
              slices: [{ color: '#2BB0F2' }, { color: '#FECC02' }],
              chartArea: {
                top: '64',
                height: '55%'
              }
            }
          },
          coverage_by_number_of_ipsOptions: {
            type: Object,
            value: {
              colors: ['#1D9D5D', '#2FB0F2', '#FFCC00'],
              pieSliceText: 'none',
              legend: {
                position: 'labeled',
                labeledValueText: 'both',
                textStyle: { fontSize: 12 }
              },
              chartArea: {
                right: '88',
                width: '80%',
                height: '75%',
                bottom: 24
              }
            }
          },
          coverage_by_cash_transferOptions: {
            type: Object,
            value: {
              colors: ['#1D9D5D', '#2FB0F2', '#FFCC00'],
              pieSliceText: 'none',
              legend: {
                position: 'labeled',
                labeledValueText: 'both',
                textStyle: { fontSize: 12 }
              },
              chartArea: {
                right: '88',
                width: '80%',
                height: '75%',
                bottom: 24
              }
            }
          },
          chartData: {
            type: Object,
            statePath: 'hactGraphs',
            observer: '_onChartDataChange'
          },
          riskRatings: {
            type: Array,
            value: []
          }
        };
      }

      static get observers() {
        return ['_init(active)'];
      }

      ready() {
        super.ready();
        log(baseSite);
      }
    

      _init(active) {
        if (active) {
          if (isEmpty(this.chartData)) {
            this.fireEvent('global-loading', { message: 'Loading chart data...', active: true });
          } else {
            this.fireEvent('global-loading', { loadingSource: 'hact-charts' });
            this._drawCharts();
          }
        }
      }

      _onChartDataChange(data) {
        if (!isEmpty(data)) {
          const riskRatings = tail(data.charts.cash_transfers_risk_ratings).map((r) => last(r));
          this.set('riskRatings', riskRatings);
          this._init(this.active);
        }
      }

      _formatChartData(data, chartName, options) {
        this.$.google.dataTable(data).then((dt) => {
          if (chartName==='coverageCashChart') {
            let formatter = new google.visualization.NumberFormat({
              prefix: '$' });
            formatter.format(dt, 1);
          }
          this.shadowRoot.querySelector('#' + chartName).options = options;
          this.shadowRoot.querySelector('#' + chartName).data = dt;
          this.updateStyles();
        });
      }

      _drawCharts() {
        if (this.chartData) {
          this.drawProgVisitsChart();
          this.drawCoverageCharts();
          keys(this.chartData.charts).map((chart) => {
            this.drawChart(chart);
          });
        }
      }

      AssuranceActivitiesBars(entity) {
        return [
          ['Data', 'Text', { role: 'annotation' }, 'Count', { role: 'style' }, { role: 'annotation' }],
          ['', 0, 'Completed', entity.completed,
            entity.completed >= entity.min_required ? '#1B9C5C' : '#F05454', entity.completed],
          ['', 0, 'Minimum Required', entity.min_required, '#A7A7A7', entity.min_required]
        ];
      }

      drawProgVisitsChart() {
          const { programmatic_visits: progVisits, spot_checks: spotChecks } = this.chartData.assurance_activities;
          const progVisitsData = this.AssuranceActivitiesBars(progVisits);
          const spotChecksData = this.AssuranceActivitiesBars(spotChecks);
          this._formatChartData(progVisitsData, 'progVisitsChart', this.assuranceChartOptions);
          this._formatChartData(spotChecksData, 'spotChecksChart', this.assuranceChartOptions);
      }

      drawCoverageCharts() {
        log('drawing coverage');
        const { coverage_by_number_of_ips: coverageIps, coverage_by_cash_transfer: coverageCash } = this.chartData.assurance_coverage;
        this._formatChartData(coverageIps, 'coverageByIpChart', this.coverage_by_number_of_ipsOptions);
        // let formatter = new this.googleVis.NumberFormat({
        //   prefix: '$',
        //   fractionDigits: '0'
        // });
        // formatter.format(coverageCash, 1);
        this._formatChartData(coverageCash, 'coverageCashChart', this.coverage_by_cash_transferOptions);
      }

      drawChart(dataName) {
        const data = this.chartData.charts[dataName];
        this._formatChartData(data, `${dataName}Chart`, this[`${dataName}Options`]);
      }
    

      isHighlighted(highlighted) {
        return highlighted ? 'financial-highlight' : '';
      }
<commit_msg>function name changes<commit_after><link rel="import" href="../../../../../bower_components/polymer/polymer-element.html">

<link rel="import" href="../../../styles/shared-styles.html">
<link rel="import" href="../../../styles/list-styles.html">
<link rel="import" href="../../../styles/grid-layout-styles.html">
<link rel="import" href="../../../styles/hact-graphs-styles.html">
<link rel="import" href="../../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../../../../bower_components/paper-styles/element-styles/paper-material-styles.html">
<link rel="import" href="../../../../../bower_components/iron-icon/iron-icon.html">

<link rel="import" href="../../../../../bower_components/google-chart/google-chart.html">
<link rel="import" href="../../../../../bower_components/google-chart/google-chart-loader.html">
<link rel="import" href="../../../../../bower_components/google-chart/charts-loader.html">

<link rel="import" href="../../../config/config.html">

<link rel="import" href="../../../mixins/redux-store-mixin.html">
<link rel="import" href="../../../config/config.html">
<link rel="import" href="../../../mixins/event-helper-mixin.html">


<dom-module id="hact-charts">
  <template>
    <style include="shared-styles list-styles grid-layout-styles hact-graph-styles paper-material-styles">
      :host {
        --divider-light-color: #E0E0E0;
        --assuranceChart: {
          height: 75px;
          width: auto;
        };
        --columnChart: {
          height: 400px;
        };
        font-size: 16px;
      }

      iron-icon {
        cursor: pointer;
      }
  
      .viz-col {
        width: 100%;
        height: 400px;
      }
      
  
      .hact-title {
        font-size: 16px;
        height: 56px;
      }
  
      .divider {
        background-color: rgba(0, 0, 0, 0.3);
        height: 1px;
      }
  
      .border-bottom {
        border-bottom: 1px solid var(--divider-light-color);
      }
  
      .hact-paper {
        padding: 0;
      }
  
      .component {
        padding: 16px 24px;
        box-sizing: border-box;
      }
  
      .border-right {
        border-right: 1px solid var(--divider-light-color);
      }
  
      .assurance-color {
        color: var(--secondary-text-color);
      }
  
      .assurance-data {
        margin-right: 48px;
      }
  
      .prog-visits {
        margin: 16px 0 0 24px;
      }
  
      .micro {
        margin: 0 0 16px 0;
      }
  
      .spot {
        padding-right: 0;
        margin-right: 24px;
      }
  
      .tuck-left-top {
        padding-left: 0;
        padding-top: 0
      }
  
      .tuck-left-bottom {
        padding-bottom: 0;
      }
  
      .viz {
        @apply --assuranceChart;
      }
    </style>
  
    <google-chart-loader id="google"></google-chart-loader>
  
    <!--Assurance Activities-->
    <div class="paper-material list-panel hact-paper layout  center-center"
         elevation="1">
      <div class="hact-title component">
        Assessment and Assurance Activities
      </div>
      <div class="divider"></div>
  
      <div class="layout-vertical">
  
        <div class="layout-horizontal">
  
          <div class="component flex-1 layout-horizontal center border-right border-bottom tuck-left-top prog-visits ">
            <div class="col-3 assurance-color">
              Programmatic
              <br>Visits
            </div>
            <div class="flex-1 layout-vertical">
              <google-chart id="progVisitsChart"
                            class="viz"
                            type="bar">
              </google-chart>
            </div>
  
          </div>
  
          <div class="component flex-1 layout-horizontal center border-bottom spot">
            <div class="col-3 assurance-color">
              Spot
              <br>Checks
            </div>
            <div class="flex-1 layout-vertical">
              <google-chart id="spotChecksChart"
                            class="viz"
                            type="bar">
              </google-chart>
            </div>
          </div>
  
        </div>
  
        <div class="layout-horizontal">
          <div class="component flex-1 layout-horizontal center border-right tuck-left-bottom micro ">
            <div class="col-3 assurance-color">
              Micro
              <br> Assessments
            </div>
            <div class="flex-1 layout-horizontal">
              <div class="assurance-data">
                <div class="completed">[[chartData.assurance_activities.micro_assessment]]</div>
                <div class="subheading assurance-color">Completed</div>
              </div>
              <div class="assurance-data">
                <div class="completed">[[chartData.assurance_activities.missing_micro_assessment]]</div>
                <div class="subheading assurance-color">Expiring</div>
              </div>
            </div>
          </div>
  
          <div class="component flex-1 layout-horizontal center ">
            <div class="col-3 assurance-color">
              Scheduled
              <br> Audits
            </div>
            <div class="flex-1 layout-horizontal">
              <div class="assurance-data">
                <div class="completed">[[chartData.assurance_activities.scheduled_audit]]
                  <a target="_blank"
                     href="[[schedAuditUrl]]">
                    <iron-icon class="dark"
                               icon="file-download"></iron-icon>
                  </a>
                </div>
                <div class="subheading assurance-color">Completed</div>
              </div>
            </div>
            <div class="col-2 assurance-color">
              Special
              <br> Audits
            </div>
            <div class="flex-1 layout-horizontal">
              <div class="assurance-data">
                <div class="completed">[[chartData.assurance_activities.special_audit]]
                    <a target="_blank"
                     href="[[specialAuditUrl]]">
                    <iron-icon class="dark"
                               icon="file-download"></iron-icon>
                  </a>
                </div>
                <div class="subheading assurance-color">Completed</div>
              </div>
            </div>
          </div>
        </div>
  
      </div>
    </div>
  
    <!--Assurance Coverage -->
    <div class="paper-material list-panel hact-paper layout center-center"
         elevation="1">
      <div class="hact-title component">
        Assurance Coverage
      </div>
      <div class="divider"></div>
      <div class="layout-vertical">
        <div class="layout-horizontal">
          <div class="flex-1 layout-column component border-right border-bottom tuck-left-top prog-visits">
            <div class="assurance-color">Coverage By Number of IPs</div>
      
            <google-chart id="coverageByIpChart"
                          class="coverage-pie"
                          type="pie">
            </google-chart>
          </div>
          <div class="flex-1 layout-column component border-bottom tuck-left-bottom">
            <div class="assurance-color">Coverage by Cash Transfers (USD)(Total)</div>
      
            <google-chart id="coverageCashChart"
                          class="coverage-pie"
                          type="pie">
            </google-chart>
          </div>
        </div>

        <div class="layout-horizontal">
          <div class="component flex-1 layout-horizontal center border-right tuck-left-bottom micro ">
            <div class="col-3 assurance-color">
              IPs Without
              <br> Assurance
            </div>
            <div class="flex-1 layout-horizontal">
              <div class="assurance-data">
                <div class="completed">[[chartData.assurance_coverage.table.2.value]]
                  <a target="_blank"
                     href="[[notProgVisitsUrl]]">
                    <iron-icon class="dark"
                               icon="file-download"></iron-icon>
                  </a>
                </div>
                <div class="subheading assurance-color">Programmatic Visits (PV)</div>
              </div>
              <div class="assurance-data">
                <div class="completed">[[chartData.assurance_coverage.table.1.value]]
                  <a target="_blank"
                     href="[[notSpotChecksUrl]]">
                    <iron-icon class="dark"
                               icon="file-download"></iron-icon>
                  </a>
                </div>
                <div class="subheading assurance-color">Spot Checks (SC)</div>
              </div>
              <div class="assurance-data">
                  <div class="completed">[[chartData.assurance_coverage.table.0.value]]
                    <a target="_blank"
                       href="[[notAssuranceUrl]]">
                      <iron-icon class="dark"
                                 icon="file-download"></iron-icon>
                    </a>
                  </div>
                  <div class="subheading assurance-color">Both PV & SC</div>
                </div>
            </div>
          </div>
          <div class="component flex-1"></div>
        </div>
      </div>
    </div>
  
    <!--Financial Findings -->
    <div class="paper-material list-panel hact-paper layout center-center"
         elevation="1">
      <div class="hact-title component">
        Financial Findings
      </div>
      <div class="divider"></div>
      <div class="layout-horizontal">
        <div class="financial-col label flex-1 layout-vertical">
          <template is="dom-repeat"
                    items="[[chartData.financial_findings]]">
            <div class$="layout-horizontal justified [[isHighlighted(item.highlighted)]]">
              <div class="fin-title flex-1">[[item.name]]</div>
              <div class="fin-amount">[[_numWithCommas(item.value)]]</div>
            </div>
          </template>
        </div>
  
        <div class="financial-col label flex-1 layout-vertical">
          <div class="layout-horizontal justified">
            <div class="fin-title flex-1">[[chartData.financial_findings_numbers.0.name]]</div>
            <div class="fin-amount">[[chartData.financial_findings_numbers.0.value]]</div>
          </div>
          <div class="layout-horizontal justified">
            <div class="fin-title flex-1">[[chartData.financial_findings_numbers.1.name]]</div>
            <div class="fin-amount">[[chartData.financial_findings_numbers.1.value]]</div>
          </div>
          <div class="layout-horizontal justified">
            <div class="fin-title flex-1">[[chartData.financial_findings_numbers.2.name]]</div>
            <div class="fin-amount">[[chartData.financial_findings_numbers.2.value]]</div>
          </div>
          <div class="layout-horizontal justified audit-line">
            <div class="fin-title flex-1">[[chartData.financial_findings_numbers.3.name]]</div>
          </div>
          <template is="dom-repeat"
                    items="[[chartData.financial_findings_numbers.3.value]]">
            <div class="layout-horizontal justified audit-line">
              <div class="fin-title flex-1 sub-col">[[_dashCapital(item.name)]]</div>
              <div class="fin-amount">[[item.value]]</div>
            </div>
          </template>
        </div>
      </div>
    </div>
  
  
  
    <!--Cash Transfer Amounts-->
    <div class="paper-material list-panel hact-paper layout center-center"
         elevation="1">
      <div class="hact-title component">
        Total Cash Transfer by Cash Transfer Ranges
      </div>
      <div class="divider"></div>
      <div class="layout-horizontal">
        <div class="col-8 component">
          <google-chart id="cash_transfers_amountsChart"
                        class="viz-col"
                        type="column">
          </google-chart>
        </div>
        <div class="col-3 component ratings-wrapper layout-vertical">
          <div class="layout-horizontal justified">
            <div class="risk-rating-title">Risk Ratings</div>
            <div class="risk-rating-title">Number of IPs</div>
          </div>
          <div class="layout-vertical risk-ratings label">
  
            <div class="layout-horizontal">
              <div class="marker risk-not-required"></div>
              <div class="flex-1 sub-col">Not Required</div>
              <div>[[riskRatings.0]]</div>
            </div>
  
            <div class="layout-horizontal">
              <div class="marker risk-low"></div>
              <div class="flex-1 sub-col">Low</div>
              <div>[[riskRatings.1]]</div>
            </div>
  
            <div class="layout-horizontal">
              <div class="marker risk-medium"></div>
              <div class="flex-1 sub-col">Medium</div>
              <div>[[riskRatings.2]]</div>
            </div>
  
            <div class="layout-horizontal">
              <div class="marker risk-significant"></div>
              <div class="flex-1 sub-col">Significant</div>
              <div>[[riskRatings.3]]</div>
            </div>
  
            <div class="layout-horizontal">
              <div class="marker risk-high"></div>
              <div class="flex-1 sub-col">High</div>
              <div>[[riskRatings.4]]</div>
            </div>
  
          </div>
        </div>
      </div>
    </div>
  
    <!--IP Risk Rating-->
    <div class="paper-material list-panel hact-paper layout center-center"
         elevation="1">
      <div class="hact-title component">
        Total Cash Transfers by IP Risk Rating
      </div>
      <div class="divider"></div>
      <div class="layout-horizontal">
        <div class="col-8 component">
          <google-chart id="cash_transfers_risk_ratingsChart"
                        class="viz-col"
                        type="column">
          </google-chart>
        </div>
        <div class="col-3 component ratings-wrapper layout-vertical">
          <div class="layout-horizontal justified">
            <div class="risk-rating-title">Risk Ratings</div>
            <div class="risk-rating-title">Number of IPs</div>
          </div>
          <div class="layout-vertical risk-ratings label">
  
            <div class="layout-horizontal">
              <div class="marker risk-not-required"></div>
              <div class="flex-1 sub-col">Not Required</div>
              <div>[[riskRatings.0]]</div>
            </div>
  
            <div class="layout-horizontal">
              <div class="marker risk-low"></div>
              <div class="flex-1 sub-col">Low</div>
              <div>[[riskRatings.1]]</div>
            </div>
  
            <div class="layout-horizontal">
              <div class="marker risk-medium"></div>
              <div class="flex-1 sub-col">Medium</div>
              <div>[[riskRatings.2]]</div>
            </div>
  
            <div class="layout-horizontal">
              <div class="marker risk-significant"></div>
              <div class="flex-1 sub-col">Significant</div>
              <div>[[riskRatings.3]]</div>
            </div>
  
            <div class="layout-horizontal">
              <div class="marker risk-high"></div>
              <div class="flex-1 sub-col">High</div>
              <div>[[riskRatings.4]]</div>
            </div>
  
          </div>
        </div>
      </div>
    </div>
  
    <!--PARTNER TYPE / SPOT CHECKS COMPLETED-->
    <div class="layout-horizontal flex-1">
  
      <div class="paper-material list-panel hact-paper half-paper layout center-center"
           elevation="1">
        <div class="hact-title component">
          Cash Transfers by Partner Type
        </div>
        <div class="divider"></div>
        <div class="layout-horizontal">
          <div class="flex-1 component">
            <google-chart id="cash_transfers_partner_typeChart"
                          class="viz-col"
                          type="column">
            </google-chart>
          </div>
  
        </div>
      </div>
  
      <div class="paper-material hact-paper half-paper layout center-center"
           elevation="1">
        <div class="hact-title component">
          Spot Checks Completed
        </div>
        <div class="divider"></div>
        <div class="layout-horizontal component">
          <div class="col-40">
            <google-chart id="spot_checks_completedChart"
                          class="viz-col"
                          type="pie">
            </google-chart>
          </div>
          <div class="flex-1">
            <div class="component ratings-wrapper spot-checks-table layout-vertical">
              <div class="risk-rating-title">Completed By</div>
              <div class="layout-vertical risk-ratings label">
  
                <div class="layout-horizontal">
                  <div class="marker risk-low"></div>
                  <div class="flex-1 sub-col">Staff</div>
                  <div>[[chartData.charts.spot_checks_completed.1.1]]</div>
                </div>
  
                <div class="layout-horizontal">
                  <div class="marker risk-medium"></div>
                  <div class="flex-1 sub-col">Service Providers</div>
                  <div>[[chartData.charts.spot_checks_completed.2.1]]</div>
                </div>
  
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
    'use strict';
    
    /**
     * @polymer
     * @mixinFunction
     * @appliesMixin EtoolsDashboard.Mixins.ReduxStore
     * @appliesMixin EtoolsDashboard.Mixins.EventHelper
     */
    const ChartsMixin = compose(
      EtoolsDashboard.Mixins.ReduxStore,
      EtoolsDashboard.Mixins.EventHelper
      )(Polymer.Element);
    const { baseSite } = EtoolsDashboard.Config;
    /**
    * @polymer
    * @customElement
    */
    class HactCharts extends ChartsMixin {
      static get is() { return 'hact-charts'; }

      static get properties() {
        return {
          notProgVisitsUrl: {
            type: String,
            value: `${baseSite}/api/v2/partners/not_programmatic_visit?format=csv`
          },
          notSpotChecksUrl: {
            type: String,
            value: `${baseSite}/api/v2/partners/not_spot_check/?format=csv`
          },
          notAssuranceUrl: {
            type: String,
            value: `${baseSite}/api/v2/partners/not_assurance/?format=csv`
          },
          specialAuditUrl: {
            type: String,
            value: `${baseSite}/api/v2/partners/special_audit_completed/?format=csv`
          },
          schedAuditUrl: {
            type: String,
            value: `${baseSite}/api/v2/partners/scheduled_audit_completed/?format=csv`
          },
          assuranceChartOptions: {
            type: Object,
            value: {
              legend: { position: 'none' },
              bars: 'horizontal',
              bar: { groupWidth: '100%' },
              colors: ['transparent'],
              chartArea: {
                top: '0',
                bottom: '0',
                left: '0',
                width: '85%'
              },
              annotations: {
                textStyle: {
                  color: '#000000',
                  auraColor: 'transparent',
                  opacity: '0.54'
                },
                datum: {
                  stem: {
                    color: 'transparent'
                  }
                },
                stem: {
                  color: 'none',
                  display: 'none',
                  length: 1
                },
                boxStyle: {
                  display: 'none'
                },
                alwaysOutside: true
              },
              hAxis: {
                baselineColor: 'none',
                ticks: [],
                textPosition: 'none'
              },
              vAxis: {
                baselineColor: 'none',
                ticks: [],
                display: 'none',
                textPosition: 'none'
              }
            }
          },
          cash_transfers_amountsOptions: {
            type: Object,
            value: {
              isStacked: true,
              legend: { position: 'none' },
              bar: { groupWidth: '35%' },
              chartArea: {
                top: '32',
                bottom: '150',
                right: '88',
                width: '65%',
                height: '55%'
              },
              colors: ['#D8D8D8', '#2BB0F2', '#FECC02', '#F05656', '#751010', '#000000'],
              hAxis: {
                title: 'Cash Transfer Ranges',
                format: 'currency',
                slantedText: true,
                slantedTextAngle: 315,
                textStyle: {
                  color: '#000000',
                  opacity: 0.54,
                  fontSize: 14,
                  bold: false,
                  italic: false
                }
              },
              vAxes: {
                0: {
                  title: 'Total Cash Transfers Jan - Dec (USD)',
                  format: 'currency',
                  titleTextStyle: {
                    color: '#000000',
                    opacity: 0.54,
                    fontSize: 14,
                    bold: false,
                    italic: false
                  },
                  textStyle: {
                    color: '#000000',
                    opacity: 0.54,
                    fontSize: 14,
                    bold: false,
                    italic: false
                  }
                },
                1: {
                  title: 'Number of IPs (All Risk Ratings)',
                  titleTextStyle: {
                    italic: false
                  }
                }
              },
              series: {
                5: {
                  targetAxisIndex: 1,
                  type: 'line'
                }
              }
            }
          },
          cash_transfers_risk_ratingsOptions: {
            type: Object,
            value: {
              legend: { position: 'none' },
              bar: { groupWidth: '35%' },
              chartArea: {
                top: '32',
                bottom: '150',
                right: '88',
                width: '65%',
                height: '55%'
              },
              hAxis: {
                title: 'Risk Rating',
                textStyle: {
                  color: '#000000',
                  opacity: 0.54,
                  fontSize: 14,
                  bold: false,
                  italic: false
                }
              },
              vAxes: {
                0: {
                  title: 'Total Cash Transfers Jan - Dec (USD)',
                  format: 'currency',
                  titleTextStyle: {
                    color: '#000000',
                    opacity: 0.54,
                    fontSize: 14,
                    bold: false,
                    italic: false
                  },
                  textStyle: {
                    color: '#000000',
                    opacity: 0.54,
                    fontSize: 14,
                    bold: false,
                    italic: false
                  }
                },
                1: {
                  title: 'Number of IPs (All Risk Ratings)',
                  titleTextStyle: {
                    italic: false
                  }
                }
              },
              series: {
                1: {
                  targetAxisIndex: 1,
                  type: 'line',
                  color: '#000000'
                }
              }
            }
          },
          cash_transfers_partner_typeOptions: {
            type: Object,
            value: {
              legend: { position: 'none' },
              bar: { groupWidth: '35%' },
              chartArea: {
                top: '32',
                bottom: '150',
                right: '88',
                width: '65%',
                height: '55%'
              },
              hAxis: {
                textStyle: {
                  color: '#000000',
                  opacity: 0.54,
                  fontSize: 14,
                  bold: false,
                  italic: false
                }
              },
              vAxes: {
                0: {
                  title: 'Total Cash Transfers Jan - Dec (USD)',
                  format: 'currency',
                  titleTextStyle: {
                    color: '#000000',
                    opacity: 0.54,
                    fontSize: 14,
                    bold: false,
                    italic: false
                  },
                  textStyle: {
                    color: '#000000',
                    opacity: 0.54,
                    fontSize: 14,
                    bold: false,
                    italic: false
                  }
                },
                1: {
                  title: 'Number of Partners',
                  titleTextStyle: {
                    italic: false
                  }
                }
              },
              series: {
                1: {
                  targetAxisIndex: 1,
                  type: 'line',
                  color: '#000000'
                }
              }
            }
          },
          spot_checks_completedOptions: {
            type: Object,
            value: {
              legend: 'none',
              slices: [{ color: '#2BB0F2' }, { color: '#FECC02' }],
              chartArea: {
                top: '64',
                height: '55%'
              }
            }
          },
          coverage_by_number_of_ipsOptions: {
            type: Object,
            value: {
              colors: ['#1D9D5D', '#2FB0F2', '#FFCC00'],
              pieSliceText: 'none',
              legend: {
                position: 'labeled',
                labeledValueText: 'both',
                textStyle: { fontSize: 12 }
              },
              chartArea: {
                right: '88',
                width: '80%',
                height: '75%',
                bottom: 24
              }
            }
          },
          coverage_by_cash_transferOptions: {
            type: Object,
            value: {
              colors: ['#1D9D5D', '#2FB0F2', '#FFCC00'],
              pieSliceText: 'none',
              legend: {
                position: 'labeled',
                labeledValueText: 'both',
                textStyle: { fontSize: 12 }
              },
              chartArea: {
                right: '88',
                width: '80%',
                height: '75%',
                bottom: 24
              }
            }
          },
          chartData: {
            type: Object,
            statePath: 'hactGraphs',
            observer: '_onChartDataChange'
          },
          riskRatings: {
            type: Array,
            value: []
          }
        };
      }

      static get observers() {
        return ['_init(active)'];
      }

      ready() {
        super.ready();
        log(baseSite);
      }
    

      _init(active) {
        if (active) {
          if (isEmpty(this.chartData)) {
            this.fireEvent('global-loading', { message: 'Loading chart data...', active: true });
          } else {
            this.fireEvent('global-loading', { loadingSource: 'hact-charts' });
            this._drawCharts();
          }
        }
      }

      _onChartDataChange(data) {
        if (!isEmpty(data)) {
          const riskRatings = tail(data.charts.cash_transfers_risk_ratings).map((r) => last(r));
          this.set('riskRatings', riskRatings);
          this._init(this.active);
        }
      }

      _formatChartData(data, chartName, options) {
        this.$.google.dataTable(data).then((dt) => {
          if (chartName==='coverageCashChart') {
            let formatter = new google.visualization.NumberFormat({
              prefix: '$' });
            formatter.format(dt, 1);
          }
          this.shadowRoot.querySelector('#' + chartName).options = options;
          this.shadowRoot.querySelector('#' + chartName).data = dt;
          this.updateStyles();
        });
      }

      _drawCharts() {
        if (this.chartData) {
          this.drawProgVisitsChart();
          this.drawCoverageCharts();
          keys(this.chartData.charts).map((chart) => {
            this.drawChart(chart);
          });
        }
      }

      getAssuranceActivitiesBars(entity) {
        return [
          ['Data', 'Text', { role: 'annotation' }, 'Count', { role: 'style' }, { role: 'annotation' }],
          ['', 0, 'Completed', entity.completed,
            entity.completed >= entity.min_required ? '#1B9C5C' : '#F05454', entity.completed],
          ['', 0, 'Minimum Required', entity.min_required, '#A7A7A7', entity.min_required]
        ];
      }

      drawProgVisitsChart() {
          const { programmatic_visits: progVisits, spot_checks: spotChecks } = this.chartData.assurance_activities;
          const progVisitsData = this.getAssuranceActivitiesBars(progVisits);
          const spotChecksData = this.getAssuranceActivitiesBars(spotChecks);
          this._formatChartData(progVisitsData, 'progVisitsChart', this.assuranceChartOptions);
          this._formatChartData(spotChecksData, 'spotChecksChart', this.assuranceChartOptions);
      }

      drawCoverageCharts() {
        const {
          coverage_by_number_of_ips: coverageIps,
          coverage_by_cash_transfer: coverageCash
        } = this.chartData.assurance_coverage;
        this._formatChartData(coverageIps, 'coverageByIpChart', this.coverage_by_number_of_ipsOptions);
        this._formatChartData(coverageCash, 'coverageCashChart', this.coverage_by_cash_transferOptions);
      }

      drawChart(dataName) {
        const data = this.chartData.charts[dataName];
        this._formatChartData(data, `${dataName}Chart`, this[`${dataName}Options`]);
      }
    

      isHighlighted(highlighted) {
        return highlighted ? 'financial-highlight' : '';
      }

{'fraction_non_alphanumeric': 0.13424879103467627, 'fraction_numerical': 0.013401772598986615, 'mean_word_length': 1.298820047805137, 'pattern_counts': {'":': 0, '<': 797, '<?xml version=': 0, '>': 805, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 12, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6336138', 'n_tokens_mistral': 17331, 'n_tokens_neox': 16081, 'n_words': 2985}