{"version":3,"file":"ChartPriceMktSentiment-9d9c8f73.js","sources":["../../../app/javascript/components/chart/ChartPriceMktSentiment.vue"],"sourcesContent":["<template>\n  <div class=\"relative flex h-full w-full items-center justify-center\">\n    <BaseLoader v-if=\"loading\" />\n    <NoDataFound v-else-if=\"noChart\" />\n    <BaseLineChart v-else :options=\"chartOptions\" :series=\"chartSeries\" />\n  </div>\n</template>\n<script setup>\nimport useEmitter from '@/composeables/emitter';\nimport { formatNumber } from '@/composeables/filters';\nimport { usdCryptoPrice } from '@/composeables/filters';\nimport colors from 'tailwindcss/colors';\nimport { ref, computed, nextTick, watch, onMounted } from 'vue';\nimport BaseLineChart from '@/components/chart/BaseLineChart.vue';\nimport isEmpty from 'lodash/isEmpty';\n\nconst $emitter = useEmitter();\n\nconst props = defineProps({\n  series: { type: Object, default: () => ({}) },\n  loading: { type: Boolean, default: false }\n});\nconst chartId = ref(`price-mkt-${Math.random()}`);\n\nonMounted(() => {\n  $emitter.$on('reflow-highchart', () => {\n    resetChart();\n  });\n});\nconst noChart = computed(() => {\n  return !props.loading && isEmpty(props.series);\n});\nconst priceSeries = computed(() => {\n  return props.series.price ? props.series.price : [];\n});\nconst sentimentSeries = computed(() => {\n  return props.series.sentiment ? props.series.sentiment : [];\n});\nconst event = computed(() => {\n  return props.series.event ? props.series.event : [];\n});\nconst tweetVolumeSeries = computed(() => {\n  return props.series.tweet_volume ? props.series.tweet_volume : [];\n});\n\nconst chartOptions = computed(() => {\n  return {\n    chart: {\n      id: chartId.value\n    },\n    xAxis: {\n      type: 'datetime',\n      title: { text: '' },\n      plotLines: [\n        {\n          color: colors['blue']['700'],\n          width: 2,\n          value: event.value,\n          zIndex: 5\n        }\n      ],\n      labels: {\n        style: {\n          color: colors['gray']['400']\n        }\n      }\n    },\n    yAxis: [\n      {\n        title: {\n          text: (tweetVolumeSeries.value || []).length ? 'Tweet Volume' : '',\n          style: { color: colors['gray']['400'] }\n        },\n        labels: {\n          style: { color: colors['gray']['400'] },\n          formatter() {\n            const formattedVal = this.value;\n            if (this.axis.series[0].name == 'Market Cap') {\n              return formatNumber(this.value, 5);\n            }\n            return formattedVal;\n          }\n        }\n      },\n      {\n        title: {\n          text: 'Price',\n          style: { color: colors['blue']['400'] }\n        },\n        labels: {\n          style: { color: colors['blue']['400'] }\n        },\n        opposite: true\n      },\n      ...((sentimentSeries.value || []).length\n        ? [\n            {\n              gridLineWidth: 0,\n              title: {\n                text: 'Sentiment',\n                style: { color: colors['red']['400'] }\n              },\n              labels: {\n                style: { color: colors['red']['400'] }\n              },\n              opposite: true\n            }\n          ]\n        : [])\n    ],\n    legend: { enabled: false },\n    tooltip: {\n      pointFormatter: function () {\n        let y = this.y;\n        if (['Market Cap', 'Price'].includes(this.series.name)) {\n          y = usdCryptoPrice(this.y);\n        } else {\n          y = Math.round(this.y);\n        }\n        return `<div class=\"\">\n                  <div class=\"flex items-center w-full space-x-1\">\n                  <span style=\"color:${this.color}\">●</span>\n                  <span class=\"text-xxs text-gray-400\">${this.series.name}</span><br />\n                </div>\n                <div>\n                  <span class=\" text-gray-200\">${y}</span>\n                </div>\n                </div>`;\n      }\n    }\n  };\n});\n\nconst chartSeries = computed(() => {\n  return [\n    {\n      data: tweetVolumeSeries.value,\n      name: 'Tweet Volume',\n      yAxis: 0,\n      color: colors.gray[400],\n      opacity: 0.4,\n      borderColor: colors.gray[400],\n      type: 'column',\n      zIndex: 0\n    },\n    {\n      data: priceSeries.value.length ? priceSeries.value : props.series.market_cap,\n      name: priceSeries.value.length ? 'Price' : 'Market Cap',\n      color: colors.blue[400],\n      type: 'spline',\n      lineWidth: 3,\n      yAxis: 1,\n      zIndex: 2\n    },\n    ...((sentimentSeries.value || []).length\n      ? [\n          {\n            type: 'spline',\n            data: sentimentSeries.value,\n            name: 'Sentiment',\n            yAxis: 2,\n            lineWidth: 2,\n            color: colors.green[400],\n            negativeColor: colors.red[400],\n            threshold: 50,\n            zIndex: 1\n          }\n        ]\n      : [])\n  ];\n});\n\nwatch(\n  () => props.series,\n  () => {\n    resetChart();\n  }\n);\nfunction resetChart() {\n  nextTick(() => {\n    chartId.value = `price-mkt-${Math.random()}`;\n  });\n}\n</script>\n"],"names":["$emitter","useEmitter","chartId","ref","onMounted","resetChart","noChart","computed","props","isEmpty","priceSeries","sentimentSeries","event","tweetVolumeSeries","chartOptions","colors","formattedVal","formatNumber","y","usdCryptoPrice","chartSeries","watch","nextTick"],"mappings":"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"}