@php
  if (strpos(\App\Models\SplunkSearches::getNameForId($widget->id), 'for 6 months')) {
    $from = '-6mon@mon';
  }

  $xLabelModes = [
    \App\Models\SplunkSearches::X_TIME_LABEL_DAYS   => 'day',
    \App\Models\SplunkSearches::X_TIME_LABEL_MONTHS => 'month',
    \App\Models\SplunkSearches::X_TIME_LABEL_YEARS  => 'year',
    \App\Models\SplunkSearches::X_TIME_LABEL_HOURS  => 'hour',
  ];
  $xLabelMode = $xLabelModes[$widget->x_displaying_time_period] ?? 'auto';
@endphp
<script type="text/lazyload">
<script>
  window.buildTimeAxisLabels = window.buildTimeAxisLabels || function (times, mode) {
    var dayMs = 86400000;
    var minStep = Infinity;

    for (var i = 1; i < times.length; i++) {
      var diff = new Date(times[i]).getTime() - new Date(times[i - 1]).getTime();

      if (diff > 0 && diff < minStep) {
        minStep = diff;
      }
    }

    var scale = mode;

    if (scale === 'auto') {
      if (!isFinite(minStep)) {
        scale = 'day';
      } else {
        scale = minStep < dayMs ? 'hour' : (minStep >= dayMs * 28 ? 'month' : 'day');
      }
    }

    return times.map(function (time) {
      if (isNaN(new Date(time).getTime())) {
        return '';
      }

      if (scale === 'hour') {
        return formatDateTimeToHour(time);
      }

      if (scale === 'day') {
        return formatDateTimeToDay(time);
      }

      if (scale === 'year') {
        return String(formatDateTimeToYear(time));
      }

      if (mode === 'auto') {
        return formatDateTimeToMonth(time).substr(0, 3) + ' ' + formatDateTimeToYear(time);
      }

      return formatDateTimeToMonth(time);
    });
  };

  window.blankRepeatedLabels = window.blankRepeatedLabels || function (labels) {
    var seen = [];

    return labels.map(function (label) {
      if (seen.indexOf(label) !== -1) {
        return '';
      }

      seen.push(label);

      return label;
    });
  };

  window.timeAxisLabelInterpolation = window.timeAxisLabelInterpolation || function (selector, labels, horizontalPadding) {
    var minLabelWidth = 70;
    var positions = {};
    var filledCount = 0;

    labels.forEach(function (label, index) {
      if (label !== '' && label !== null && typeof label !== 'undefined') {
        positions[index] = filledCount;
        filledCount++;
      }
    });

    return function (value, index) {
      if (!positions.hasOwnProperty(index)) {
        return null;
      }

      var element = document.querySelector(selector);
      var width = Math.max(0, (element ? element.offsetWidth : 0) - horizontalPadding);
      var maxLabels = Math.max(1, Math.floor(width / minLabelWidth));
      var step = Math.ceil(filledCount / maxLabels);

      return positions[index] % step === 0 ? value : null;
    };
  };

  $(document).ready(function () {
    $("#element{{$widget->id}}").html('<div class="splunk-message-container "><div class="alert alert-info"><i class="icon-alert"></i>loading...</div></div>');

    getData();
@if(\Illuminate\Support\Str::contains(url()->current(),'threats'))
    setInterval(getData, 60000); // update chart every minute
@endif
    function getData() {
      $.ajax({
        url: '/get-widget-data',
        data: {
          '_token': tk,
          'id': {{$widget->id}},
          'from': "{{ $from }}",
          @if(Request::input('timerange_new'))
          'timerange': "{{ Request::input('timerange_new') }}",
          @endif
          'to': "{{ $to }}",
        },
        type: "post",
        dataType: "json",
        success: function (resp) {

          $("#element{{$widget->id}} .splunk-message-container").remove();

          if (resp.data) {
            $("#element{{$widget->id}}").html('');

            var series = [];
            var chartLabels = [];
            var chartData = [];

            if (resp.data_labels.length > 0) {
              series = resp.data_labels.filter(function (label) {
                return label.indexOf('_') !== 0;
              });
            }

            if (!$.isEmptyObject(resp.data) && series.length > 0) {
              $.each(series, function (i, seriesItem) {
                chartData[i] = {name: seriesItem, data: []};
              });

              var chartRows = [];
              var previousXLabelValue = '';

              $.each(resp.data, function (i, dataItem) {
                if (dataItem[0] != previousXLabelValue) {
                  previousXLabelValue = dataItem[0];
                  chartRows.push(dataItem);
                }
              });

              var xLabels = buildTimeAxisLabels(chartRows.map(function (dataItem) {
                return dataItem[0];
              }), '{{ $xLabelMode }}');

              @if(in_array($xLabelMode, ['month', 'year', 'hour']))
              chartLabels = blankRepeatedLabels(xLabels);
              @else
              chartLabels = xLabels;
              @endif

              $.each(chartRows, function (i, dataItem) {
                $.each(series, function (j, seriesItem) {
                  var seriesDataIndex = j + 1;

                  chartData[j].data.push(typeof dataItem[seriesDataIndex] !== typeof undefined
                    ? {meta: seriesItem + ' on ' + xLabels[i], value: dataItem[seriesDataIndex]}
                    : {meta: seriesItem + ' on ' + xLabels[i], value: 0}
                  );
                });
              });
            }

            var chart = new Chartist.Line('#element{{$widget->id}}', {
              labels: chartLabels,
              series: chartData
            }, {
              chartPadding: {
                top: 60,
                right: 45,
                bottom: 30,
                left: {{ $widget->id === 496 ? 0 : 20 }}
              },
              axisX: {
                labelInterpolationFnc: timeAxisLabelInterpolation('#element{{$widget->id}}', chartLabels, {{ ($widget->id === 496 ? 0 : 20) + 40 }})
              },
              @if($widget->id==34)
              axisY: {
                onlyInteger: false,
                labelInterpolationFnc: function (value) {
                  return value.toFixed(2) + ' {{$widget->y_suffix}}';
                }
              },
              @else
              axisY: {
                labelInterpolationFnc: function (value) {
                  return value + ' {{$widget->y_suffix}}';
                },
                @if($widget->scaling_values=='integer')
                onlyInteger: true
                @else
                onlyInteger: false
                @endif
              },
              @endif
              plugins: [
                Chartist.plugins.tooltip(),
                Chartist.plugins.legend(),
                Chartist.plugins.ctAxisTitle({
                  axisX: {
                    @if ($widget->x_name !== null)
                    axisTitle: '{{ $widget->x_name }}',
                    @else
                    axisTitle: ' ',
                    @endif
                    axisClass: 'ct-axis-title',
                    offset: {
                      x: 0,
                      y: 50
                    },
                    textAnchor: 'middle',
                    labelInterpolationFnc: function (value) {
                      return value + ' {{$widget->x_suffix}}';
                    }
                  },
                  axisY: {
                    @if($widget->scaling_values=='integer')
                    onlyInteger: true,
                    @else
                    onlyInteger: false,
                    @endif
                      @if ($widget->y_name !== null)
                    axisTitle: '{{ $widget->y_name }}',
                    @else
                    axisTitle: ' ',
                    @endif
                    axisClass: 'ct-axis-title',
                    offset: {
                      x: 0,
                      y: 0
                    },
                    textAnchor: 'middle',
                    flipTitle: false
                  }
                })
              ]
            });
          } else {
            /*  для виджета Cases_Activity_Histogram */
            if ({{ $widget->id==496?'true':'false' }}) {
              $("#element{{$widget->id}}").html('');

              var series = ["Answered", "Closed", "Open"];
              var chartLabels = [
                @for($i=7; $i>=0; $i--)
                  "{{ Carbon\Carbon::now()->subDays($i)->format('m/d/y') }}",
                @endfor
              ];
              var chartData = [];
              chartData[0] = {name: "Answered", data: ["0", "0", "0", "0", "0", "0", "0", "0"]};
              chartData[1] = {name: "Closed", data: ["0", "0", "0", "0", "0", "0", "0", "0"]};
              chartData[2] = {name: "Open", data: ["0", "0", "0", "0", "0", "0", "0", "0"]};

              var chart = new Chartist.Line('#element{{$widget->id}}', {
                labels: chartLabels,
                series: chartData
              }, {
                chartPadding: {
                  top: 60,
                  right: 0,
                  bottom: 30,
                  left: {{ $widget->id === 496 ? 0 : 30 }}
                },

                axisY: {
                  labelInterpolationFnc: function (value) {
                    return value + ' {{$widget->y_suffix}}';
                  },
                  @if($widget->scaling_values=='integer')
                  onlyInteger: true
                  @else
                  onlyInteger: false
                  @endif
                },

                plugins: [
                  Chartist.plugins.tooltip(),
                  Chartist.plugins.legend(),
                  Chartist.plugins.ctAxisTitle({
                    axisX: {
                      @if ($widget->x_name !== null)
                      axisTitle: '{{ $widget->x_name }}',
                      @else
                      axisTitle: ' ',
                      @endif
                      axisClass: 'ct-axis-title',
                      offset: {
                        x: 0,
                        y: 50
                      },
                      textAnchor: 'middle',
                      labelInterpolationFnc: function (value) {
                        return value + ' {{$widget->x_suffix}}';
                      }
                    },
                    axisY: {
                      @if($widget->scaling_values=='integer')
                      onlyInteger: true,
                      @else
                      onlyInteger: false,
                      @endif
                        @if ($widget->y_name !== null)
                      axisTitle: '{{ $widget->y_name }}',
                      @else
                      axisTitle: ' ',
                      @endif
                      axisClass: 'ct-axis-title',
                      offset: {
                        x: 0,
                        y: 0
                      },
                      textAnchor: 'middle',
                      flipTitle: false
                    }
                  })
                ]
              });
            } else {
              displayWidgetNoDataText(
                "#element{{ $widget->id }}",
                {{ $widget->use_no_data_text }},
                "{{ $widget->no_data_text }}"
              );
            }

          }
        }
      });
    }
  });
</script>