analytics-dashboard.component.html

  <div class="top-container" style="overflow-y: hidden;">
    <div class="container">
      <div class="title-container">
          <form #alyticsForm="ngForm">
            <!-- Page title and subtitle-->
            <div>
              <h1 class="text-muted mb-0">Dashboard</h1>
              <div class="dashboard-subtitle mb-0">Manage and track FOM information usage</div>
            </div>
            <!-- Filters -->
            <div class="filter-div">
              <div class="form-group me-2">
                <label for="startDate">Start date</label>
                <div class="input-group">
                  <input
                    #startDatePicker="bsDatepicker"
                    id="startDate"
                    name="startDate"
                    readonly
                    type="text"
                    (keydown)="$event.preventDefault()"
                    class="form-control readonly-normal"
                    placeholder="YYYY-MM-DD"
                    bsDatepicker
                    [minDate]="minDate"
                    [maxDate]="maxDate"
                    [(ngModel)]="startDate"
                    [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD', containerClass: 'theme-dark-blue', showWeekNumbers: false }"
                    (bsValueChange)="onDateChange('startDate', $event)"
                  />
                  <div class="input-group-append">
                    <button
                      class="btn btn-icon" type="button" tabindex="-1" (click)="startDatePicker.show()"
                      [attr.aria-expanded]="startDatePicker.isOpen">
                      <em class="material-icons">date_range</em>
                    </button>
                  </div>
                </div>
              </div>
              <div class="form-group me-2">
                <label for="endDate">End date</label>
                <div class="input-group">
                  <input
                    #endDatePicker="bsDatepicker"
                    id="endDate"
                    name="endDate"
                    type="text"
                    (keydown)="$event.preventDefault()"
                    class="form-control readonly-normal"
                    placeholder="YYYY-MM-DD"
                    bsDatepicker
                    [minDate]="minDate"
                    [maxDate]="maxDate"
                    [(ngModel)]="endDate"
                    [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD', containerClass: 'theme-dark-blue', showWeekNumbers: false }"
                    (bsValueChange)="onDateChange('endDate', $event)"
                  />
                  <div class="input-group-append">
                    <button
                      class="btn btn-icon" type="button" tabindex="-1" (click)="endDatePicker.show()"
                      [attr.aria-expanded]="endDatePicker.isOpen">
                      <em class="material-icons">date_range</em>
                    </button>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label for="plan-select">Show</label>
                <select id="plan-select" class="form-control" name="plan-select"
                  [(ngModel)]="selectedPlan"
                  (ngModelChange)="onPlanFilterChange($event)">
                  <option *ngFor="let opt of planFilterOptions" [value]="opt.value">{{ opt.label }}</option>
                </select>
              </div>
            </div>
          </form>
      </div>
    </div>
  </div>

  <div class="bottom-container">
    <!-- Public Engagement Overview -->
    <div class="container pb-0" id="public-engagement-overview">
      <div class="row"><p>Public Engagement Overview</p></div>
      <div class="row">
        <div class="grid-1-3">
          <div class="total-fom-box">
            <div class="total-fom-content-box">
              <div class="total-fom-content-title">
                Total FOMs published for public comments
              </div>
              <div class="total-fom-content-value">
                {{ analyticsData()?.nonInitialPublishedProjectCount || 0 }}
              </div>
            </div>
          </div>
          <div style="height: 100%;">
            <apx-chart
              #commentsByResponseCodeChart
              [series]="commentsByResponseCodeChartOptions.series"
              [chart]="commentsByResponseCodeChartOptions.chart"
              [dataLabels]="commentsByResponseCodeChartOptions.dataLabels"
              [plotOptions]="commentsByResponseCodeChartOptions.plotOptions"
              [xaxis]="commentsByResponseCodeChartOptions.xaxis"
              [yaxis]="commentsByResponseCodeChartOptions.yaxis"
              [fill]="commentsByResponseCodeChartOptions.fill"
              [title]="commentsByResponseCodeChartOptions.title"
              [theme]="commentsByResponseCodeChartOptions.theme"
            ></apx-chart>
          </div>
        </div>
        <div>
          <div id="most-commented-foms" class="mt-3">
            <apx-chart
              #topCommentedProjectsChart
              [series]="topCommentedProjectsChartOptions.series"
              [chart]="topCommentedProjectsChartOptions.chart"
              [dataLabels]="topCommentedProjectsChartOptions.dataLabels"
              [plotOptions]="topCommentedProjectsChartOptions.plotOptions"
              [xaxis]="topCommentedProjectsChartOptions.xaxis"
              [yaxis]="topCommentedProjectsChartOptions.yaxis"
              [theme]="topCommentedProjectsChartOptions.theme"
              [fill]="topCommentedProjectsChartOptions.fill"
              [title]="topCommentedProjectsChartOptions.title"
              [grid]="topCommentedProjectsChartOptions.grid"
            ></apx-chart>
          </div>
        </div>
      </div>
    </div>

    <!-- District-level insights -->
    <div class="container pb-0" id="district-level-insights">
      <div class="row"><p>District-level insights</p></div>
      <div class="row">
        <div>
          <div id="foms-by-district" class="mt-3">
            <apx-chart
              #fomsCountByDistrictChart
              [series]="fomsCountByDistrictChartOptions.series"
              [chart]="fomsCountByDistrictChartOptions.chart"
              [dataLabels]="fomsCountByDistrictChartOptions.dataLabels"
              [plotOptions]="fomsCountByDistrictChartOptions.plotOptions"
              [xaxis]="fomsCountByDistrictChartOptions.xaxis"
              [yaxis]="fomsCountByDistrictChartOptions.yaxis"
              [theme]="fomsCountByDistrictChartOptions.theme"
              [fill]="fomsCountByDistrictChartOptions.fill"
              [title]="fomsCountByDistrictChartOptions.title"
              [grid]="fomsCountByDistrictChartOptions.grid"
            ></apx-chart>
          </div>
        </div>
      </div>
    </div>

    <!-- Forest client activity -->
    <div class="container pb-0" id="forest-client-activity">
      <div class="row"><p>Forest client activity</p></div>
        <div class="unique-fc-box">
          <div>Unique forest clients submitting FOMs</div>
          <div class="unique-fc-vtxt">
            {{ analyticsData()?.uniqueForestClientCount || 0 }}
          </div>
        </div>
        <div id="foms-by-forest-client" class="mt-3">
          <div class="mb-2" style="width: 20%;">
            <label for="fc-select">Show</label>
            <select id="fc-select" class="form-control" name="fc-select"
              [(ngModel)]="selectedFcLimit"
              (ngModelChange)="onFcLimitChange($event)">
              <option *ngFor="let opt of fcLimitOptions" [value]="opt.value">{{ opt.label }}</option>
            </select>
          </div>
          <apx-chart
            #fomsCountByForestClientChart
            [series]="fomsCountByForestClientChartOptions.series"
            [chart]="fomsCountByForestClientChartOptions.chart"
            [dataLabels]="fomsCountByForestClientChartOptions.dataLabels"
            [plotOptions]="fomsCountByForestClientChartOptions.plotOptions"
            [xaxis]="fomsCountByForestClientChartOptions.xaxis"
            [yaxis]="fomsCountByForestClientChartOptions.yaxis"
            [theme]="fomsCountByForestClientChartOptions.theme"
            [fill]="fomsCountByForestClientChartOptions.fill"
            [title]="fomsCountByForestClientChartOptions.title"
            [grid]="fomsCountByForestClientChartOptions.grid"
          ></apx-chart>
        </div>
      </div>
  </div>