{"version":3,"file":"ChartBaseTheming-090718ad.js","sources":["../../../app/javascript/components/chart/utils/ChartBaseTheming.js"],"sourcesContent":["import colors from 'tailwindcss/colors';\nimport { formatNumber, formatPrice } from '@/composeables/filters';\nimport Highcharts from 'highcharts';\n\nexport const baseColors = (i = null) => {\n const color_series = [colors.blue[500], colors.slate[500]];\n if (i == null) return color_series;\n return color_series[i % (color_series.length - 1)];\n};\n\nexport const baseColorPos = (i = null) => {\n const color_series = colors.blue[500];\n if (i == null) return color_series;\n return color_series[i % (color_series.length - 1)];\n};\n\nexport const baseColorNeg = (i = null) => {\n const color_series = colors.blue[500];\n if (i == null) return color_series;\n return color_series[i % (color_series.length - 1)];\n};\n\nexport const baseColorMuted = (i = null) => {\n return colors.slate[700];\n};\n\nexport const multiColorSeries = (i = null) => {\n const color_series = [\n colors.blue[600],\n colors.red[600],\n colors.emerald[600],\n colors.yellow[600],\n colors.pink[600],\n colors.orange[600],\n '#C026D3', // Extended Fuschia 600\n colors.sky[300],\n colors.emerald[800],\n colors.pink[500]\n ];\n if (i == null) return color_series;\n return color_series[i % (color_series.length - 1)];\n};\n\nexport const multiColorSeriesMuted = (i = null) => {\n const color_series = [\n colors.blue[400],\n colors.emerald[300],\n colors.pink[400],\n '#E879F9', // Extended Fuschia 400\n colors.orange[300],\n colors.yellow[200],\n '#F87171' // Extended Red 400\n ];\n if (i == null) return color_series;\n return color_series[i % (color_series.length - 1)];\n};\n\nexport const monoChromeSeries = (color = 'blue', i = null) => {\n const color_series = [\n colors[color][500],\n colors[color][700],\n colors[color][300],\n colors[color][200],\n colors[color][900],\n colors[color][100]\n ];\n if (i == null) return color_series;\n return color_series[i % (color_series.length - 1)];\n};\n\nexport const baseHighchartsTheme = () => {\n let chartColors = baseColors();\n return {\n // colors: chartColors,\n colors: [colors.blue[600], colors.slate[400], colors.amber[600], colors.amber[400]],\n chart: {\n animation: false,\n backgroundColor: 'transparent',\n spacingTop: 20,\n zoomType: '',\n style: {\n fontFamily: 'Inter'\n }\n },\n title: {\n text: undefined,\n style: {\n color: colors.slate[400]\n }\n },\n credits: {\n enabled: false\n },\n exporting: {\n enabled: false,\n fallbackToExportServer: false,\n chartOptions: {\n chart: {\n backgroundColor: colors.slate[900]\n },\n title: {\n style: {\n color: colors.slate[300],\n fontWeight: 'bold',\n fontSize: '14px'\n }\n }\n }\n },\n xAxis: {\n lineColor: colors.slate[800],\n tickLength: 6,\n tickWidth: 1,\n tickColor: colors.slate[700],\n title: {\n style: {\n color: colors.slate[400],\n fontSize: '10px'\n }\n },\n labels: {\n enabled: true,\n style: {\n color: colors.slate[400],\n fontSize: '10px'\n }\n },\n crosshair: {\n color: colors.slate[600],\n // dashStyle: 'Dash',\n width: 1\n }\n },\n time: {\n useUTC: false\n },\n yAxis: {\n gridLineColor: colors.slate[800],\n lineColor: colors.slate[600],\n scaleShowLabels: true,\n maxPadding: 0,\n title: {\n text: '',\n style: {\n color: colors.slate[400],\n fontSize: '10px'\n }\n },\n labels: {\n enabled: true,\n style: {\n color: colors.slate[400],\n fontSize: '10px'\n }\n }\n },\n legend: {\n margin: 0,\n symbolWidth: 6,\n symbolHeight: 6,\n symbolRadius: 3,\n itemStyle: {\n fontSize: '10px',\n fontWeight: 'light',\n color: colors.slate[100]\n },\n itemHiddenStyle: {\n fontSize: '10px',\n color: colors.slate[500]\n },\n itemHoverStyle: {\n fontSize: '10px',\n color: colors.slate[300]\n }\n },\n plotOptions: {\n area: {\n stacking: 'normal',\n marker: false,\n turboThreshold: 100000\n },\n column: {\n borderWidth: 0\n },\n heatmap: {\n dataLabels: {\n enabled: true,\n backgroundColor: 'transparent',\n borderWidth: 0,\n style: {\n color: colors.slate[300],\n fontSize: '10px',\n textOutline: 'transparent'\n },\n formatter: function () {\n return Highcharts.numberFormat(this.point.value, 0, null, ',');\n }\n }\n },\n histogram: {\n pointPadding: 0.1,\n borderWidth: 0\n // binWidth: 0.2\n },\n line: {\n lineWidth: 2,\n marker: {\n enabled: false\n }\n },\n pie: {\n // opacity: 0.9,\n size: '100%',\n allowPointSelect: true,\n cursor: 'pointer',\n animation: false,\n startAngle: 120,\n dataLabels: {\n enabled: true,\n distance: -30,\n color: colors.slate[300],\n style: {\n textOutline: false\n },\n formatter: function () {\n return '' + this.point.name + ':
' + this.point.y;\n }\n },\n showInLegend: true,\n borderWidth: 0,\n shadow: false\n },\n series: {\n crisp: true,\n marker: {\n radius: 1\n },\n connectNulls: true,\n animation: false,\n bar: {\n borderWidth: 0\n },\n states: {\n hover: {\n lineWidth: 2\n }\n }\n }\n },\n turboThreshold: 10000000000000,\n tooltip: {\n shared: true,\n followPointer: true,\n useHTML: true,\n borderWidth: 0,\n backgroundColor: 'transparent',\n shadow: false,\n style: {\n zIndex: 100,\n color: colors.slate[200],\n pointerEvents: 'auto'\n },\n headerFormat: `