@php
  $cadAssetArray = \App\Models\CAD\Asset::where('account_id', account()->id)->pluck('id','ip_address')->toArray();
@endphp
<script>
  var cadAssetArray = <br />
<b>Notice</b>:  Undefined variable: cadAssetArray in <b>/home/andrey.golovin/intranetapp/releases/20250507090209/resources/views/code_generator/HEAT_MAP.blade.php</b> on line <b>6</b><br />
null;
</script>
<!--<script type="text/lazyload">-->
<script type="text/javascript">
  $(function () {
    const widgetId = {{ $widget->id }}

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

    $.ajax({
      url: '/get-widget-data',
      data: {
        '_token': tk,
        'id': {{$widget->id}},
        'from': "{{ $from }}",
        @if(request()->has('timerange_new'))
        'timerange': "{{ request()->input('timerange_new') }}",
        @endif
        'to': "{{ $to }}"
      },
      type: "post",
      dataType: "json",
      success: function (resp) {
        document.getElementById('element{{ $widget->id }}').innerHTML = '';

        if (resp.data) {
          var series = [];

          $.each(resp.data, function (i, row) {
            var set = {"name": row[0], "data": []};

            for (var j = 1; j < resp.data_labels.length; j++) {
              var value = typeof row[j] !== typeof undefined
                ? row[j] : 0;

              set.data.push({"x": resp.data_labels[j], "y": row[j]});
            }

            series.push(set);
          });

          for (var i = 0; i < series.length; i++) {
            var total = 0;

            for (var j = 0; j < series[i].data.length; j++) {
              total += (series[i].data[j].y * 1);
            }

            for (var j = 0; j < series[i].data.length; j++) {
              series[i].data[j].y = Math.round(series[i].data[j].y * 100 / total);
            }
          }

          var chart = new ApexCharts(document.querySelector("#element{{ $widget->id }}"), {
            series: series,
            chart: {
              height: 450,
              type: 'heatmap',
              toolbar: {
                show: false
              }
            },
            dataLabels: {
              enabled: true,
              formatter: function (val, opt) {
                opt.w.globals.seriesPercent[opt.seriesIndex][opt.dataPointIndex] = val;

                if (
                  typeof resp.data[opt.seriesIndex] !== typeof undefined
                  &&
                  typeof resp.data[opt.seriesIndex][opt.dataPointIndex + 1] !== typeof undefined
                ) {
                  return resp.data[opt.seriesIndex][opt.dataPointIndex + 1] + " (" + val + "%)";
                } else {
                  return val + "%";
                }
              },
              style: {
                colors: ['#0A1422']
              }
            },
            noData: {
              text: 'n/a'
            },
            plotOptions: {
              heatmap: {
                useFillColorAsStroke: false,
                colorScale: {
                  ranges: widgetId === 468
                    ? [
                      {
                        from: -1,
                        to: 0,
                        color: '#a6a6a6'
                      },
                      {
                        from: 1,
                        to: 50,
                        color: '#ffd500'
                      },
                      {
                        from: 51,
                        to: 100,
                        color: '#e60000'
                      },
                    ]
                    : [
                      {
                        from: -1,
                        to: 0,
                        color: '#323944',
                        name: '1'
                      },
                      {
                        from: 1,
                        to: 20,
                        color: '#F63C41',
                        name: '2'
                      },
                      {
                        from: 21,
                        to: 40,
                        color: '#F1202B',
                        name: '3'
                      },
                      {
                        from: 41,
                        to: 60,
                        color: '#D31122',
                        name: '4'
                      },
                      {
                        from: 61,
                        to: 80,
                        color: '#BD1628',
                        name: '5'
                      },
                      {
                        from: 81,
                        to: 100,
                        color: '#A91622',
                        name: '6'
                      },
                      {
                        from: 101,
                        to: 1000000,
                        color: '#8F111D',
                        name: '6'
                      }
                    ],
                  inverse: false
                }
              }
            },
            stroke: {
              show: true,
              width: 2,
              colors: ['#0A1422']
            },
            legend: {
              show: false
            },
            tooltip: {
              theme: 'dark',
              y: {
                formatter: function (value, {series, seriesIndex, dataPointIndex, w}) {
                  var formattedString = '';

                  if (
                    typeof resp.data[seriesIndex] !== typeof undefiend
                    &&
                    typeof resp.data[seriesIndex][dataPointIndex + 1] !== typeof undefined
                  ) {
                    formattedString = resp.data[seriesIndex][dataPointIndex + 1] + " (" + value + "%)";
                  } else {
                    formattedString = value + "%";
                  }

                  return formattedString;
                }
              }
            },
            xaxis: {
              labels: {
                show: true,
                style: {
                  colors: '#CCCCCC'
                }
              }
            },
            yaxis: {
              labels: {
                show: true,
                style: {
                  colors: '#CCCCCC'
                }
              }
            }
          });
          chart.render().then(() => {
            setInterval(() => {
              $(".apexcharts-xaxis-label, .apexcharts-yaxis-label").each(function() {
                let labelText = $(this).text();
                let labelHalf = labelText.substr(0, Math.floor(labelText.length / 2));
                if (labelText in cadAssetArray || labelHalf in cadAssetArray) {
                  $(this).attr("fill", "#3bafda");
                }
              });
            }, 500);
          });

        } else {
          displayWidgetNoDataText(
            "#element{{ $widget->id }}",
            {{ $widget->use_no_data_text }},
            "{{ $widget->no_data_text }}"
          );
        }
      }
    });


    $("body").on("click", ".apexcharts-xaxis-label, .apexcharts-yaxis-label", function() {
      var label = $(this).text();
      var label_half = label.substr(0, Math.floor(label.length / 2));
      if(label in cadAssetArray) {
        window.open("/cad-asset/" + cadAssetArray[label], "_blank");
      }
      if(label_half in cadAssetArray) {
        window.open("/cad-asset/" + cadAssetArray[label_half], "_blank");
      }
     // console.log(label, label_half)
    });
  });
</script>
</script>