{"version":3,"file":"AlertsCustomVisualizationChart-c096e9f9.js","sources":["../../../app/javascript/components/alerts/custom/visualization/AlertsCustomVisualizationChart.vue"],"sourcesContent":["<template>\n  <div v-if=\"!empty(series)\">\n    <div class=\"h-full w-full rounded border border-gray-800 bg-gray-800/25\">\n      <BaseLineChart :options=\"chartOptions\" :series=\"series.series\" />\n    </div>\n  </div>\n\n  <div v-else class=\"flex w-full flex-col\">\n    <div class=\"m-auto\">\n      <div class=\"flex h-5 w-full items-center space-x-2\">\n        <CustomIcons icon=\"candle-chart\" class=\"h-4 w-4 text-gray-400\" />\n        <span class=\"block text-xs\">Select Metrics to Visualize</span>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { formatNumber, formatPrice } from '@/composeables/filters';\nimport { useStore } from 'vuex';\nimport isEmpty from 'lodash/isEmpty';\nimport { multiColorSeries } from '@/components/chart/utils/ChartBaseTheming.js';\nimport { timeframes } from '@/components/alerts/custom/visualization/AlertsCustomVisualizationTimeframes.js';\nimport { DateTime } from 'luxon';\nimport CustomIcons from '@/components/CustomIcons.vue';\n\nimport colors from 'tailwindcss/colors';\nimport BaseLineChart from '@/components/chart/BaseLineChart.vue';\n\nconst props = defineProps({\n  series: { type: Object, required: true },\n  alertData: { type: Object, default: null },\n  metrics: { type: Array, default: null },\n  alertCoins: { type: Array, default: null },\n  width: { type: [Number, String], default: 400 },\n  height: { type: [Number, String], default: 400 },\n  selectedTimeframe: { type: String, default: '6M' }\n});\n\nconst thresholdLineConfig = color => {\n  return {\n    background: color,\n    color: colors.white['900'],\n    fontSize: '12px',\n    fontWeight: 400,\n    fontFamily: undefined,\n    padding: {\n      left: 5,\n      right: 5,\n      top: 0,\n      bottom: 2\n    }\n  };\n};\n\nfunction empty(object) {\n  return isEmpty(object);\n}\n\nfunction getYAxisMin(metric) {\n  const series_data = props.series.series.filter(e => e.metric_id == metric.id)[0]?.data.map(e => e[1]);\n  const metric_values = props.alertData.metrics\n    .filter(e => e.id == metric.id && ![null, ''].includes(e.value))\n    .map(e => e.value);\n  if (!series_data?.length || (!series_data?.length && !metric_values?.length)) return 0;\n  const series_min = Math.min(...series_data);\n  const metric_min = Math.min(...metric_values);\n  const min = !metric_values.length ? series_min : Math.min(metric_min, series_min);\n  return min;\n}\n\nfunction getYAxisMax(metric) {\n  const series_data = props.series.series.filter(e => e.metric_id == metric.id)[0]?.data.map(e => e[1]);\n  const metric_values = props.alertData.metrics\n    .filter(e => e.id == metric.id && ![null, ''].includes(e.value))\n    .map(e => e.value);\n  if (!series_data?.length || (!series_data?.length && !metric_values?.length)) return 0;\n  const series_max = Math.max(...series_data);\n  const metric_max = Math.max(...metric_values);\n  const max = !metric_values.length ? series_max : Math.max(metric_max, series_max);\n  return max;\n}\n\nconst metricsThreshold = (metric, lineColor, i) => {\n  return [\n    {\n      color: lineColor,\n      yAxis: i,\n      dashStyle: 'ShortDash',\n      width: 2,\n      value: metric.value,\n      label: {\n        x: -10,\n        y: 0,\n        useHTML: true,\n        formatter: function () {\n          const formatType = metric.type;\n          let pointVal =\n            formatType?.includes('price') && metric.value < 1 ? formatPrice(metric.value) : formatNumber(metric.value);\n          let prefix = formatType?.includes('price') || formatType?.includes('dollar') ? '$' : '';\n          let suffix = formatType?.includes('percent') ? '%' : '';\n          return `<div><div class=\"flex border-none space-y-1 py-1 px-2 text-xxs rounded-full align-items\" style=\"background: ${lineColor}\"><span class=\"font-bold pr-1\">${\n            metric.name\n          }</span> ${prefix + pointVal + suffix}</div>`;\n        }\n      }\n    }\n  ];\n};\n\nconst yAxisOptions = computed(() => {\n  const metrics = props.metrics;\n  if (metrics.length) {\n    return metrics.map((metric, i) => {\n      const lineColor = multiColorSeries(i);\n      const formatType = metric.type;\n      let suffix = formatType?.includes('percent')\n        ? ' (%)'\n        : formatType?.includes('price') || formatType?.includes('dollar')\n        ? ' (usd)'\n        : '';\n      return {\n        seriesName: metric.name,\n        min: getYAxisMin(metric),\n        max: getYAxisMax(metric),\n        plotLines: metricsThreshold(metric, lineColor, i),\n        opposite: i % 2 != 0,\n        title: {\n          style: {\n            color: lineColor\n          },\n          text: metric.name + suffix\n        },\n        labels: {\n          formatter: function () {\n            return formatType?.includes('price') && this.value < 1 ? formatPrice(this.value) : formatNumber(this.value);\n          }\n        }\n      };\n    });\n  } else {\n    return {\n      labels: {\n        formatter: function () {\n          return formatNumber(this.value);\n        }\n      }\n    };\n  }\n});\n\nconst chartOptions = computed(() => {\n  const timeframe = timeframes.find(e => e.id == props.selectedTimeframe);\n  const date = new Date();\n  return {\n    chart: {\n      id: 'alerts-create-visualization-chart'\n    },\n    xAxis: {\n      type: 'datetime',\n      title: {\n        text: 'Date'\n      },\n      max: DateTime.fromISO(date).ts,\n      min: DateTime.fromISO(new Date(date.getTime() - timeframe.time).toISOString()).ts\n    },\n    yAxis: yAxisOptions.value,\n    tooltip: {\n      selectedTimeframe: timeframe\n    }\n  };\n});\n</script>\n"],"names":["empty","object","isEmpty","getYAxisMin","metric","series_data","_a","props","e","metric_values","series_min","metric_min","getYAxisMax","series_max","metric_max","metricsThreshold","lineColor","formatType","pointVal","formatPrice","formatNumber","prefix","suffix","yAxisOptions","computed","metrics","multiColorSeries","chartOptions","timeframe","timeframes","date","DateTime"],"mappings":"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"}