discover.tsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406
  1. import type {SeriesOption} from 'echarts';
  2. import isArray from 'lodash/isArray';
  3. import XAxis from 'sentry/components/charts/components/xAxis';
  4. import AreaSeries from 'sentry/components/charts/series/areaSeries';
  5. import BarSeries from 'sentry/components/charts/series/barSeries';
  6. import LineSeries from 'sentry/components/charts/series/lineSeries';
  7. import {lightenHexToRgb} from 'sentry/components/charts/utils';
  8. import {t} from 'sentry/locale';
  9. import {EventsStats} from 'sentry/types';
  10. import {lightTheme as theme} from 'sentry/utils/theme';
  11. import {DEFAULT_FONT_FAMILY, slackChartDefaults, slackChartSize} from './slack';
  12. import {ChartType, RenderDescriptor} from './types';
  13. const discoverxAxis = XAxis({
  14. theme,
  15. splitNumber: 3,
  16. isGroupedByDate: true,
  17. axisLabel: {fontSize: 11, fontFamily: DEFAULT_FONT_FAMILY},
  18. });
  19. export const discoverCharts: RenderDescriptor<ChartType>[] = [];
  20. discoverCharts.push({
  21. key: ChartType.SLACK_DISCOVER_TOTAL_PERIOD,
  22. getOption: (
  23. data:
  24. | {seriesName: string; stats: EventsStats}
  25. | {stats: Record<string, EventsStats>; seriesName?: string}
  26. ) => {
  27. if (isArray(data.stats.data)) {
  28. const color = theme.charts.getColorPalette(data.stats.data.length - 2);
  29. const areaSeries = AreaSeries({
  30. name: data.seriesName,
  31. data: data.stats.data.map(([timestamp, countsForTimestamp]) => [
  32. timestamp * 1000,
  33. countsForTimestamp.reduce((acc, {count}) => acc + count, 0),
  34. ]),
  35. lineStyle: {color: color?.[0], opacity: 1, width: 0.4},
  36. areaStyle: {color: color?.[0], opacity: 1},
  37. });
  38. return {
  39. ...slackChartDefaults,
  40. useUTC: true,
  41. color,
  42. series: [areaSeries],
  43. };
  44. }
  45. const stats = Object.keys(data.stats).map(key =>
  46. Object.assign({}, {key}, data.stats[key])
  47. );
  48. const color = theme.charts.getColorPalette(stats.length - 2);
  49. const series = stats
  50. .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
  51. .map((s, i) =>
  52. AreaSeries({
  53. name: s.key,
  54. stack: 'area',
  55. data: s.data.map(([timestamp, countsForTimestamp]) => [
  56. timestamp * 1000,
  57. countsForTimestamp.reduce((acc, {count}) => acc + count, 0),
  58. ]),
  59. lineStyle: {color: color?.[i], opacity: 1, width: 0.4},
  60. areaStyle: {color: color?.[i], opacity: 1},
  61. })
  62. );
  63. return {
  64. ...slackChartDefaults,
  65. xAxis: discoverxAxis,
  66. useUTC: true,
  67. color,
  68. series,
  69. };
  70. },
  71. ...slackChartSize,
  72. });
  73. discoverCharts.push({
  74. key: ChartType.SLACK_DISCOVER_TOTAL_DAILY,
  75. getOption: (
  76. data:
  77. | {seriesName: string; stats: EventsStats}
  78. | {stats: Record<string, EventsStats>; seriesName?: string}
  79. ) => {
  80. if (isArray(data.stats.data)) {
  81. const color = theme.charts.getColorPalette(data.stats.data.length - 2);
  82. const barSeries = BarSeries({
  83. name: data.seriesName,
  84. data: data.stats.data.map(([timestamp, countsForTimestamp]) => ({
  85. value: [
  86. timestamp * 1000,
  87. countsForTimestamp.reduce((acc, {count}) => acc + count, 0),
  88. ],
  89. })),
  90. itemStyle: {color: color?.[0], opacity: 1},
  91. });
  92. return {
  93. ...slackChartDefaults,
  94. xAxis: discoverxAxis,
  95. useUTC: true,
  96. color,
  97. series: [barSeries],
  98. };
  99. }
  100. const stats = Object.keys(data.stats).map(key =>
  101. Object.assign({}, {key}, data.stats[key])
  102. );
  103. const color = theme.charts.getColorPalette(stats.length - 2);
  104. const series = stats
  105. .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
  106. .map((s, i) =>
  107. BarSeries({
  108. name: s.key,
  109. stack: 'area',
  110. data: s.data.map(([timestamp, countsForTimestamp]) => ({
  111. value: [
  112. timestamp * 1000,
  113. countsForTimestamp.reduce((acc, {count}) => acc + count, 0),
  114. ],
  115. })),
  116. itemStyle: {color: color?.[i], opacity: 1},
  117. })
  118. );
  119. return {
  120. ...slackChartDefaults,
  121. xAxis: discoverxAxis,
  122. useUTC: true,
  123. color,
  124. series,
  125. };
  126. },
  127. ...slackChartSize,
  128. });
  129. discoverCharts.push({
  130. key: ChartType.SLACK_DISCOVER_TOP5_PERIOD,
  131. getOption: (
  132. data: {stats: Record<string, EventsStats>} | {stats: EventsStats; seriesName?: string}
  133. ) => {
  134. if (isArray(data.stats.data)) {
  135. const color = theme.charts.getColorPalette(data.stats.data.length - 2);
  136. const areaSeries = AreaSeries({
  137. data: data.stats.data.map(([timestamp, countsForTimestamp]) => [
  138. timestamp * 1000,
  139. countsForTimestamp.reduce((acc, {count}) => acc + count, 0),
  140. ]),
  141. lineStyle: {color: color?.[0], opacity: 1, width: 0.4},
  142. areaStyle: {color: color?.[0], opacity: 1},
  143. });
  144. return {
  145. ...slackChartDefaults,
  146. useUTC: true,
  147. color,
  148. series: [areaSeries],
  149. };
  150. }
  151. const stats = Object.values(data.stats);
  152. const hasOther = Object.keys(data.stats).includes('Other');
  153. const color = theme.charts.getColorPalette(stats.length - 2 - (hasOther ? 1 : 0));
  154. if (hasOther) {
  155. color.push(theme.chartOther);
  156. }
  157. const series = stats
  158. .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
  159. .map((topSeries, i) =>
  160. AreaSeries({
  161. stack: 'area',
  162. data: topSeries.data.map(([timestamp, countsForTimestamp]) => [
  163. timestamp * 1000,
  164. countsForTimestamp.reduce((acc, {count}) => acc + count, 0),
  165. ]),
  166. lineStyle: {color: color?.[i], opacity: 1, width: 0.4},
  167. areaStyle: {color: color?.[i], opacity: 1},
  168. })
  169. );
  170. return {
  171. ...slackChartDefaults,
  172. xAxis: discoverxAxis,
  173. useUTC: true,
  174. color,
  175. series,
  176. };
  177. },
  178. ...slackChartSize,
  179. });
  180. discoverCharts.push({
  181. key: ChartType.SLACK_DISCOVER_TOP5_PERIOD_LINE,
  182. getOption: (
  183. data: {stats: Record<string, EventsStats>} | {stats: EventsStats; seriesName?: string}
  184. ) => {
  185. if (isArray(data.stats.data)) {
  186. const color = theme.charts.getColorPalette(data.stats.data.length - 2);
  187. const lineSeries = LineSeries({
  188. data: data.stats.data.map(([timestamp, countsForTimestamp]) => [
  189. timestamp * 1000,
  190. countsForTimestamp.reduce((acc, {count}) => acc + count, 0),
  191. ]),
  192. lineStyle: {color: color?.[0], opacity: 1},
  193. itemStyle: {color: color?.[0]},
  194. });
  195. return {
  196. ...slackChartDefaults,
  197. useUTC: true,
  198. color,
  199. series: [lineSeries],
  200. };
  201. }
  202. const stats = Object.values(data.stats);
  203. const hasOther = Object.keys(data.stats).includes('Other');
  204. const color = theme.charts.getColorPalette(stats.length - 2 - (hasOther ? 1 : 0));
  205. if (hasOther) {
  206. color.push(theme.chartOther);
  207. }
  208. const series = stats
  209. .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
  210. .map((topSeries, i) =>
  211. LineSeries({
  212. data: topSeries.data.map(([timestamp, countsForTimestamp]) => [
  213. timestamp * 1000,
  214. countsForTimestamp.reduce((acc, {count}) => acc + count, 0),
  215. ]),
  216. lineStyle: {color: color?.[i], opacity: 1},
  217. itemStyle: {color: color?.[i]},
  218. })
  219. );
  220. return {
  221. ...slackChartDefaults,
  222. xAxis: discoverxAxis,
  223. useUTC: true,
  224. color,
  225. series,
  226. };
  227. },
  228. ...slackChartSize,
  229. });
  230. discoverCharts.push({
  231. key: ChartType.SLACK_DISCOVER_TOP5_DAILY,
  232. getOption: (
  233. data: {stats: Record<string, EventsStats>} | {stats: EventsStats; seriesName?: string}
  234. ) => {
  235. if (isArray(data.stats.data)) {
  236. const color = theme.charts.getColorPalette(data.stats.data.length - 2);
  237. const areaSeries = AreaSeries({
  238. data: data.stats.data.map(([timestamp, countsForTimestamp]) => [
  239. timestamp * 1000,
  240. countsForTimestamp.reduce((acc, {count}) => acc + count, 0),
  241. ]),
  242. lineStyle: {color: color?.[0], opacity: 1, width: 0.4},
  243. areaStyle: {color: color?.[0], opacity: 1},
  244. });
  245. return {
  246. ...slackChartDefaults,
  247. useUTC: true,
  248. color,
  249. series: [areaSeries],
  250. };
  251. }
  252. const stats = Object.values(data.stats);
  253. const hasOther = Object.keys(data.stats).includes('Other');
  254. const color = theme.charts.getColorPalette(stats.length - 2 - (hasOther ? 1 : 0));
  255. if (hasOther) {
  256. color.push(theme.chartOther);
  257. }
  258. const series = stats
  259. .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
  260. .map((topSeries, i) =>
  261. BarSeries({
  262. stack: 'area',
  263. data: topSeries.data.map(([timestamp, countsForTimestamp]) => [
  264. timestamp * 1000,
  265. countsForTimestamp.reduce((acc, {count}) => acc + count, 0),
  266. ]),
  267. itemStyle: {color: color?.[i], opacity: 1},
  268. })
  269. );
  270. return {
  271. ...slackChartDefaults,
  272. xAxis: discoverxAxis,
  273. useUTC: true,
  274. color,
  275. series,
  276. };
  277. },
  278. ...slackChartSize,
  279. });
  280. discoverCharts.push({
  281. key: ChartType.SLACK_DISCOVER_PREVIOUS_PERIOD,
  282. getOption: (
  283. data:
  284. | {seriesName: string; stats: EventsStats}
  285. | {stats: Record<string, EventsStats>; seriesName?: string}
  286. ) => {
  287. if (isArray(data.stats.data)) {
  288. const dataMiddleIndex = Math.floor(data.stats.data.length / 2);
  289. const current = data.stats.data.slice(dataMiddleIndex);
  290. const previous = data.stats.data.slice(0, dataMiddleIndex);
  291. const color = theme.charts.getColorPalette(data.stats.data.length - 2);
  292. const areaSeries = AreaSeries({
  293. name: data.seriesName,
  294. data: current.map(([timestamp, countsForTimestamp]) => [
  295. timestamp * 1000,
  296. countsForTimestamp.reduce((acc, {count}) => acc + count, 0),
  297. ]),
  298. lineStyle: {color: color?.[0], opacity: 1, width: 0.4},
  299. areaStyle: {color: color?.[0], opacity: 1},
  300. });
  301. const previousPeriod = LineSeries({
  302. name: t('previous %s', data.seriesName),
  303. data: previous.map(([_, countsForTimestamp], i) => [
  304. current[i][0] * 1000,
  305. countsForTimestamp.reduce((acc, {count}) => acc + count, 0),
  306. ]),
  307. lineStyle: {color: theme.gray200, type: 'dotted'},
  308. itemStyle: {color: theme.gray200},
  309. });
  310. return {
  311. ...slackChartDefaults,
  312. useUTC: true,
  313. color,
  314. series: [areaSeries, previousPeriod],
  315. };
  316. }
  317. const stats = Object.keys(data.stats).map(key =>
  318. Object.assign({}, {key}, data.stats[key])
  319. );
  320. const color = theme.charts.getColorPalette(stats.length - 2);
  321. const previousPeriodColor = lightenHexToRgb(color);
  322. const areaSeries: SeriesOption[] = [];
  323. const lineSeries: SeriesOption[] = [];
  324. stats
  325. .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
  326. .forEach((s, i) => {
  327. const dataMiddleIndex = Math.floor(s.data.length / 2);
  328. const current = s.data.slice(dataMiddleIndex);
  329. const previous = s.data.slice(0, dataMiddleIndex);
  330. areaSeries.push(
  331. AreaSeries({
  332. name: s.key,
  333. stack: 'area',
  334. data: s.data
  335. .slice(dataMiddleIndex)
  336. .map(([timestamp, countsForTimestamp]) => [
  337. timestamp * 1000,
  338. countsForTimestamp.reduce((acc, {count}) => acc + count, 0),
  339. ]),
  340. lineStyle: {color: color?.[i], opacity: 1, width: 0.4},
  341. areaStyle: {color: color?.[i], opacity: 1},
  342. })
  343. );
  344. lineSeries.push(
  345. LineSeries({
  346. name: t('previous %s', s.key),
  347. stack: 'previous',
  348. data: previous.map(([_, countsForTimestamp], index) => [
  349. current[index][0] * 1000,
  350. countsForTimestamp.reduce((acc, {count}) => acc + count, 0),
  351. ]),
  352. lineStyle: {color: previousPeriodColor?.[i], type: 'dotted'},
  353. itemStyle: {color: previousPeriodColor?.[i]},
  354. })
  355. );
  356. });
  357. return {
  358. ...slackChartDefaults,
  359. xAxis: discoverxAxis,
  360. useUTC: true,
  361. color,
  362. series: [...areaSeries, ...lineSeries],
  363. };
  364. },
  365. ...slackChartSize,
  366. });