{"version":3,"file":"oqHyDeh_.js","sources":["../../../../components/downDetector/DDProviderDayCrashes.vue"],"sourcesContent":["<template>\n  <div class=\"daycrashes d-flex\">\n    <div\n      class=\"daycrashes__main white--bg flex-grow\"\n      data-test=\"graphics-block\"\n    >\n      <div class=\"daycrashes__main-header d-flex justify-between\">\n        <p class=\"daycrashes__main-title headline-6\">\n          Сообщения о сбоях\n        </p>\n        <p class=\"daycrashes__main-subtitle title-5\">\n          Состояние на {{ currentTime }} (МСК{{ moscowTime }})\n        </p>\n      </div>\n      <Line\n        class=\"daycrashes__chart\"\n        :data=\"chartsData\"\n        :options=\"options\"\n      />\n    </div>\n\n    <div class=\"daycrashes__side d-flex flex-column\">\n      <div\n        v-if=\"monitoring\"\n        class=\"daycrashes__filter white--bg d-flex flex-column align-start\"\n        data-test=\"filters\"\n      >\n        <p class=\"daycrashes__filter-title headline-6\">\n          Фильтр сбоев\n        </p>\n        <template\n          v-for=\"filter in monitoring?.categories\"\n          :key=\"filter.id\"\n        >\n          <a\n            v-if=\"filter.choice === 'COMMON'\"\n            :href=\"`/downdetector/${monitoring?.slug}/${\n              filter.choice?.toLowerCase() === $route.query?.category\n                ? ''\n                : '?category=' + filter.choice?.toLowerCase()\n            }`\"\n            class=\"daycrashes__filter-item black--text\"\n            @click.prevent=\"goTo(filter.choice?.toLowerCase())\"\n          >\n            <span class=\"daycrashes__chbx d-flex align-center\">\n              <span\n                class=\"white--text d-flex\"\n                :class=\"filter.choice?.toLowerCase() === $route.query?.category ? 'primary--bg' : 'gray-p--bg'\"\n              >\n                <span\n                  class=\"mask-icon mask-size-md mask-ischecked\"\n                /></span>{{ filter.name }}</span>\n          </a>\n          <a\n            v-else\n            :href=\"`/downdetector/${monitoring?.slug}/${\n              filter.choice?.toLowerCase() === $route.params?.category\n                ? ''\n                : filter.choice?.toLowerCase() + '/'\n            }`\"\n            class=\"daycrashes__filter-item black--text\"\n            @click.prevent=\"goTo(filter.choice?.toLowerCase())\"\n          >\n            <span\n              class=\"daycrashes__chbx d-flex align-center\"\n              :class=\"{ active: filter.choice?.toLowerCase() === $route.params?.category }\"\n            >\n              <span\n                class=\"white--text d-flex\"\n                :class=\"filter.choice?.toLowerCase() === $route.params?.category ? 'primary--bg' : 'gray-p--bg'\"\n              >\n                <span\n                  v-show=\"filter.choice?.toLowerCase() === $route.params?.category\"\n                  class=\"mask-icon mask-size-md mask-ischecked\"\n                /></span>\n              {{ filter.name }}</span>\n          </a>\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { Line } from 'vue-chartjs'\nimport {\n  CategoryScale,\n  Chart as ChartJS,\n  Legend,\n  LinearScale,\n  LineElement,\n  PointElement,\n  TimeScale,\n  Title,\n  Tooltip,\n} from 'chart.js'\nimport { useMainStore } from '~/store/main/main.store'\n\nChartJS.register(\n  CategoryScale,\n  LinearScale,\n  PointElement,\n  LineElement,\n  Title,\n  Tooltip,\n  TimeScale,\n  Legend,\n)\n\nconst props = defineProps({\n  monitoring: {} as any,\n})\nconst emit = defineEmits(['updateCategory'])\n\nconst $router = useRouter()\nconst $route = useRoute()\nconst mainStore = useMainStore()\nconst disabledMobile = computed(() => mainStore.disabledMobile)\n\nconst moscowTime = computed(() => {\n  const timeZone = new Date().getTimezoneOffset()\n  const diff = (-180 - timeZone) / 60\n  const timeDiff = Number.isInteger(diff) ? diff : Math.floor(diff) + ':30'\n  return diff === 0 ? '' : (diff > 0 ? '+' : '') + timeDiff\n})\n\nconst currentTime = computed(() => {\n  const date = new Date()\n  const currentTime = `${date.getHours().toString().padStart(2, '0')}:${date\n    .getMinutes()\n    .toString()\n    .padStart(2, '0')}`\n  const currentDate = `${date.getDate()}.${\n    date.getMonth() + 1\n  }.${date.getFullYear()}`\n\n  return currentDate + ' ' + currentTime\n})\n\nconst goTo = (category: string) => {\n  if (category === 'common') {\n    $router.replace({\n      path: `/downdetector/${props.monitoring?.slug}/`,\n      query:\n        category === $route.query?.category\n          ? undefined\n          : {\n              category,\n            },\n    })\n  }\n  else {\n    $router.replace({\n      path: `/downdetector/${props.monitoring?.slug}/${\n        category === $route.params?.category ? '' : category + '/'\n      }`,\n    })\n  }\n  setTimeout(() => emit('updateCategory'), 10)\n}\nconst graphicCount = computed(() => {\n  return props.monitoring?.failuresByCategory?.graphic?.count\n})\nconst baseLineCount = computed(() => {\n  const arr = props.monitoring?.failuresByCategory?.baseline?.count\n  while (arr?.length < graphicCount.value?.length) {\n    arr.push(arr[arr.length - 1])\n  }\n  return arr\n})\n\nconst chartsData = computed(() => {\n  return {\n    labels: props.monitoring?.failuresByCategory?.graphic?.dt.map((el: any) => {\n      const timeZone = new Date().getTimezoneOffset()\n      const date = new Date(el)\n      date.setMinutes(date.getMinutes() - timeZone)\n      return `${date.getHours().toString().padStart(2, '0')}:${date\n        .getMinutes()\n        .toString()\n        .padStart(2, '0')}`\n    }),\n    datasets: [\n      {\n        label: 'Сообщений',\n        backgroundColor: '#1E4E9D',\n        data: graphicCount.value,\n      },\n      {\n        label: 'Среднее в это время',\n        borderDash: [10, 10],\n        backgroundColor: '#686868',\n        borderColor: '#686868',\n        data: baseLineCount.value,\n        spanGaps: false,\n        pointBorderWidth: 0,\n        pointRadius: 0,\n        pointHitRadius: 0,\n      },\n    ],\n  }\n})\n\nconst options = {\n  responsive: true,\n  spanGaps: 1000 * 60 * 60 * 24,\n  interaction: {\n    intersect: false,\n    mode: 'index',\n  },\n  aspectRatio: disabledMobile.value ? 3 : 1.5,\n  plugins: {\n    legend: {\n      display: false,\n    },\n    tooltip: {\n      enabled: true,\n    },\n    title: {\n      display: false,\n    },\n  },\n  scales: {\n    x: {\n      border: {\n        color: '#E9E9E9',\n      },\n      grid: {\n        color: '#E9E9E9',\n      },\n      display: true,\n      title: {\n        display: false,\n      },\n      ticks: {\n        maxTicksLimit: 8,\n        maxRotation: 0,\n        color: '#686868',\n      },\n    },\n    y: {\n      max: props.monitoring?.failuresByCategory?.maximum,\n      border: {\n        color: '#E9E9E9',\n      },\n      grid: {\n        color: '#E9E9E9',\n      },\n      ticks: {\n        color: '#686868',\n      },\n    },\n  },\n  elements: {\n    point: {\n      radius: 1,\n      hoverRadius: 3,\n      borderWidth: 0,\n      hoverBorderWidth: 0,\n    },\n    line: {\n      borderWidth: 2,\n      borderColor: '#1E4E9D',\n    },\n  },\n}\n</script>\n\n<style scoped lang=\"scss\">\n.daycrashes {\n  margin-bottom: 12px;\n  @media (max-width: getBreakpoint(desktop)) {\n    flex-direction: column-reverse;\n  }\n  .mask-ischecked {\n    mask-image: url('@/assets/images/svg/ischecked.svg');\n  }\n\n  &__main {\n    border-radius: 12px;\n    border: 1px solid color(gray-darker);\n    padding: 24px;\n    @media (max-width: getBreakpoint(tablet)) {\n      padding: 16px;\n      margin-left: -16px;\n      margin-right: -16px;\n      border-radius: 0;\n      border: none;\n    }\n    @media (max-width: getBreakpoint(mobile-md)) {\n      margin-left: -8px;\n      margin-right: -8px;\n    }\n\n    &-subtitle {\n      @media (max-width: getBreakpoint(tablet)) {\n        display: none;\n      }\n    }\n  }\n  &__side {\n    width: 280px;\n    min-width: 280px;\n    margin-left: 20px;\n    @media (max-width: getBreakpoint(desktop)) {\n      margin-left: 0;\n      width: 100%;\n      margin-bottom: 12px;\n    }\n  }\n  &__filter {\n    border-radius: 12px;\n    border: 1px solid color(gray-darker);\n    padding: 24px;\n    @media (max-width: getBreakpoint(tablet)) {\n      padding: 16px;\n    }\n\n    &-title {\n      margin-bottom: 24px;\n    }\n\n    &-item {\n      cursor: pointer;\n      margin-bottom: 16px;\n    }\n  }\n  &__chbx {\n    padding-left: 24px;\n    position: relative;\n    & > span {\n      position: absolute;\n      left: 0;\n      border-radius: 4px;\n      margin-right: 4px;\n      width: 20px;\n      height: 20px;\n    }\n  }\n}\n</style>\n"],"names":["ChartJS","CategoryScale","LinearScale","PointElement","LineElement","Title","Tooltip","TimeScale","Legend","props","__props","emit","__emit","$router","useRouter","$route","useRoute","mainStore","useMainStore","disabledMobile","computed","moscowTime","diff","timeDiff","currentTime","date","goTo","category","_a","_b","_c","_d","graphicCount","baseLineCount","arr","chartsData","el","timeZone","options"],"mappings":"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"}