${comparisonPoints[0].key}`;\r\n\r\n tempHtml = `${tempHtml}
`;\r\n\r\n _.each(comparisonPoints, (point, i) => {\r\n const divClass = (i === 0) ? 'movingaverage' : 'movingaverage-comparison';\r\n tempHtml = `${tempHtml}
${point.series.name} ${getToolTipValueHtml(point)}`;\r\n });\r\n }\r\n tempHtml = `${tempHtml}
`;\r\n\r\n return `
${tempHtml}
`;\r\n },\r\n })\r\n\r\n getFormattedSeries = (id, name, color, chartAdapter, series, granularityId) => {\r\n const data = _.map(series, entry =>\r\n [chartAdapter.formatDate(entry[2], granularityId),\r\n entry[1]]);\r\n\r\n return {\r\n id,\r\n name,\r\n color,\r\n data,\r\n };\r\n }\r\n\r\n getFormattedHighChart = (chartAdapter, options, allData) => {\r\n const seriesColor = _.isEmpty(options.seriesColors) ? defaultSeriesColor : options.seriesColors;\r\n const chart = { height: 143, width: options.chartWidth };\r\n const series = [];\r\n const title = { text: '' };\r\n let tooltip = {};\r\n\r\n const primaryMetricName = _.isUndefined(options.primaryMetric) ?\r\n ''\r\n : options.primaryMetric.value;\r\n const secondaryMetricName = _.isUndefined(options.secondaryMetric) ?\r\n ''\r\n : options.secondaryMetric.value;\r\n\r\n let seriesIndex = 0;\r\n const primarySeries = _.isUndefined(options.primaryMetric) ?\r\n null\r\n : allData[options.primaryMetric.id];\r\n\r\n if (!(_.isNull(primarySeries) || _.isUndefined(primarySeries))) {\r\n series[seriesIndex] = this.getFormattedSeries(\r\n 'primary',\r\n primaryMetricName,\r\n seriesColor.primary.original,\r\n chartAdapter,\r\n primarySeries.PrimaryData,\r\n options.granularityId\r\n );\r\n\r\n if (!_.isUndefined(primarySeries.ComparisonData)) {\r\n seriesIndex += 1;\r\n series[seriesIndex] = this.getFormattedSeries(\r\n 'primaryComparison',\r\n primaryMetricName,\r\n seriesColor.primary.comparative,\r\n chartAdapter,\r\n primarySeries.ComparisonData,\r\n options.granularityId\r\n );\r\n }\r\n }\r\n\r\n const secondarySeries = (_.isUndefined(options.primaryMetric) ||\r\n (options.secondaryMetric.id === -1)) ?\r\n null\r\n : allData[options.secondaryMetric.id];\r\n\r\n if (!(_.isNull(secondarySeries) || _.isUndefined(secondarySeries))) {\r\n seriesIndex += 1;\r\n series[seriesIndex] = this.getFormattedSeries(\r\n 'secondary',\r\n secondaryMetricName,\r\n seriesColor.secondary.original,\r\n chartAdapter,\r\n secondarySeries.PrimaryData,\r\n options.granularityId\r\n );\r\n series[seriesIndex].yAxis = 1;\r\n\r\n if (!_.isUndefined(secondarySeries.ComparisonData)) {\r\n seriesIndex += 1;\r\n series[seriesIndex] = this.getFormattedSeries(\r\n 'secondaryComparison',\r\n secondaryMetricName,\r\n seriesColor.secondary.comparative,\r\n chartAdapter,\r\n secondarySeries.ComparisonData,\r\n options.granularityId\r\n );\r\n series[seriesIndex].yAxis = 1;\r\n }\r\n }\r\n\r\n this.setSeriesMarker(series, options.isMovingAverageOn);\r\n\r\n tooltip = this.getFormattedToolTip(chartAdapter, options, seriesColor);\r\n\r\n _.extend(tooltip, {\r\n positioner: uiNextTooltipPositioner,\r\n });\r\n\r\n return {\r\n chart,\r\n series,\r\n title,\r\n tooltip,\r\n };\r\n }\r\n}\r\n","import _ from 'underscore';\r\n\r\nexport class ChartGranularityAdapter {\r\n constructor({ i18n, gridName, lowestSupportedGranularity } = {}) {\r\n this.i18n = i18n;\r\n this.gridName = gridName;\r\n this.granularityMap = [{\r\n id: 0,\r\n value: 'InlineChart_Granularity_Hourly',\r\n enumValue: 'Hour',\r\n disabled: false,\r\n dateFormat: { datetime: 'short' },\r\n }, {\r\n id: 1,\r\n value: 'InlineChart_Granularity_Daily',\r\n enumValue: 'Day',\r\n disabled: false,\r\n dateFormat: { skeleton: 'yMEd' },\r\n }, {\r\n id: 2,\r\n value: 'InlineChart_Granularity_Weekly',\r\n enumValue: 'Week',\r\n disabled: false,\r\n dateFormat: { skeleton: 'yMMMd' },\r\n }, {\r\n id: 3,\r\n value: 'InlineChart_Granularity_Monthly',\r\n enumValue: 'Month',\r\n disabled: false,\r\n dateFormat: { skeleton: 'yMMM' },\r\n }, {\r\n id: 4,\r\n value: 'InlineChart_Granularity_Quarterly',\r\n enumValue: 'Quarter',\r\n disabled: false,\r\n dateFormat: { skeleton: 'yQQQ' },\r\n }];\r\n this.lowestSupportedGranularity = lowestSupportedGranularity;\r\n }\r\n\r\n /**\r\n * Gets localized list of granularities for the current daterange.\r\n * @returns {object} localized list of granularity items as {id, value}\r\n */\r\n getGranularitiesList = () => _.reduce(this.granularityMap, (results, item) => {\r\n if (!item.disabled) {\r\n results.push({\r\n id: item.id,\r\n value: this.i18n.getString(item.value),\r\n });\r\n }\r\n return results;\r\n }, []);\r\n\r\n /**\r\n * Gets localized granularity item corresponding to the id.\r\n * @param {number} itemId - Id corresponding to the granularity item\r\n * @returns {object} localized list of granularity items as {id, value}\r\n */\r\n getGranularityItem = (itemId) => {\r\n if (itemId === undefined) {\r\n return itemId;\r\n }\r\n\r\n const item = _.findWhere(this.granularityMap, { id: itemId });\r\n return {\r\n id: item.id,\r\n value: this.i18n.getString(item.value),\r\n };\r\n };\r\n\r\n /**\r\n * Reconcile preferred granularity with available granularities.\r\n * @param {number} preferredId - granularity Id preference of the user\r\n * @returns {number} granularity id of the selected granularity\r\n */\r\n reconcileSelectedGranularity = (preferredId) => {\r\n const item = _.findWhere(this.granularityMap, { id: preferredId });\r\n\r\n // If the preferred granularity is not available for the current daterange, we fallback\r\n // to the lowest granularity level that is supported.\r\n if (!item || item.disabled) {\r\n return this.getLowestAvailableGranularityId();\r\n }\r\n\r\n // User preference is available in current granularity menu.\r\n return preferredId;\r\n };\r\n\r\n /**\r\n * Gets localized granularity item corresponding to the id.\r\n * @param {number} itemId - Id corresponding to the granularity item\r\n * @returns {object} localized list of granularity items as {id, value}\r\n */\r\n getLowestAvailableGranularityId = () => {\r\n const item = _.findWhere(this.granularityMap, { disabled: false });\r\n\r\n if (!item) {\r\n // All the granularities may be disabled (Eg. if current selected range is Today and\r\n // POP is same day last year, then only available granularity for Today which is 'hourly'\r\n // is not supported for period older than 6months rolling window. So in this case all\r\n // granularities will be in disabled state.)\r\n return undefined;\r\n }\r\n\r\n return item.id;\r\n };\r\n\r\n /**\r\n * Get the granularity item corresponding to the enum value.\r\n * (Enum value is being stored in the preference store.)\r\n * @param {string} enumVal - granularity enum\r\n * @returns {object} granularity item\r\n */\r\n getGranularityIdFromEnum = (enumVal) => {\r\n const item = _.findWhere(this.granularityMap, { enumValue: enumVal });\r\n return item.id;\r\n };\r\n\r\n /**\r\n * Get the granularity enum corresponding to the id value.\r\n * @param {number} itemId - granularity item id\r\n * @returns {object} granularity item\r\n */\r\n getGranularityEnumFromId = (itemId) => {\r\n const item = _.findWhere(this.granularityMap, { id: itemId });\r\n return item && item.enumValue;\r\n };\r\n\r\n /**\r\n * Set the granularity disabled status.\r\n * @param {number} itemId - granularity item id\r\n * @param {boolean} isDisabled flag\r\n * @returns {undefined}\r\n */\r\n setIsGranularityDisabled = (itemId, isDisabled) => {\r\n _.extend(_.findWhere(this.granularityMap, { id: itemId }), { disabled: isDisabled });\r\n };\r\n\r\n /**\r\n * Gets LDML date format corresponding to the granularity.\r\n * @param {number} itemId - granularity item id\r\n * @returns {object} LDML format option of granularity\r\n */\r\n getGranularityDateFormat = (itemId) => {\r\n const item = _.findWhere(this.granularityMap, { id: itemId });\r\n return item.dateFormat;\r\n };\r\n\r\n calculateDiff = (dateRange) => {\r\n if (dateRange) {\r\n const startDate = new Date(dateRange.start);\r\n const endDate = new Date(dateRange.end);\r\n const timeDiff = Math.abs(endDate.getTime() - startDate.getTime());\r\n\r\n return Math.round(timeDiff / (1000 * 3600 * 24));\r\n }\r\n return null;\r\n };\r\n\r\n calculateDisabled = (dateDiff, min, max) => dateDiff < min || dateDiff > max;\r\n\r\n updateAvailableGranularities = (dateRange) => {\r\n const mainDateDiff = this.calculateDiff(dateRange);\r\n const comparedDateDiff = this.calculateDiff(dateRange.compared);\r\n const now = new Date();\r\n // we only support hourly data for a sliding 6 months window\r\n const hourlyStartDate = new Date(now.setMonth(now.getMonth() - 6));\r\n // UP Smart Performance Grid doesn't support hourly per backend team\r\n let hourlyOptionDisabled = this.gridName === 'SmartPerformanceGrid' ||\r\n mainDateDiff > 0 ||\r\n (comparedDateDiff ? comparedDateDiff > 0 : false) ||\r\n !(dateRange.start > hourlyStartDate) ||\r\n !(dateRange.compared ? dateRange.compared.start > hourlyStartDate : true);\r\n\r\n if (this.lowestSupportedGranularity === 'Day') {\r\n hourlyOptionDisabled = true;\r\n }\r\n\r\n let dailyOptionDisabled = this.calculateDisabled(mainDateDiff, 1, 30) ||\r\n (comparedDateDiff ? this.calculateDisabled(comparedDateDiff, 1, 30) : false);\r\n\r\n if (this.lowestSupportedGranularity === 'Day') {\r\n dailyOptionDisabled = this.calculateDisabled(mainDateDiff, 0, 30) ||\r\n (comparedDateDiff ? this.calculateDisabled(comparedDateDiff, 0, 30) : false);\r\n }\r\n\r\n const weeklyOptionDisabled = this.calculateDisabled(mainDateDiff, 7, 210) ||\r\n (comparedDateDiff ? this.calculateDisabled(comparedDateDiff, 7, 210) : false);\r\n\r\n const monthlyOptionDisabled = this.calculateDisabled(mainDateDiff, 31, 900) ||\r\n (comparedDateDiff ? this.calculateDisabled(comparedDateDiff, 31, 900) : false);\r\n\r\n const quarterlyOptionDisabled = this.calculateDisabled(mainDateDiff, 90, Infinity) ||\r\n (comparedDateDiff ? this.calculateDisabled(comparedDateDiff, 90, Infinity) : false);\r\n\r\n this.setIsGranularityDisabled(0, hourlyOptionDisabled);\r\n this.setIsGranularityDisabled(1, dailyOptionDisabled);\r\n this.setIsGranularityDisabled(2, weeklyOptionDisabled);\r\n this.setIsGranularityDisabled(3, monthlyOptionDisabled);\r\n this.setIsGranularityDisabled(4, quarterlyOptionDisabled);\r\n };\r\n}\r\n","import _ from 'underscore';\r\nimport { partialConversionPairs } from '@bingads-webui-campaign/column-conversions';\r\n\r\nconst MetricNone = { id: -1, value: 'InlineChart_Metric_None', name: 'none' };\r\nconst stringNaN = '-';\r\n\r\nexport const ImpressionsID = 5;\r\nexport const ClicksID = 1;\r\nexport const SpentID = 6;\r\nexport const ConvID = 3;\r\nexport const PartialConvID = 34;\r\nexport const EventsID = 44;\r\nexport const VideoMetricColumns = [\r\n 'VideoViews',\r\n 'ViewThroughRate',\r\n 'AverageCPV',\r\n 'TotalWatchTimeInMS',\r\n 'AverageWatchTimePerImpression',\r\n 'AverageWatchTimePerVideoView',\r\n 'VideoViewsAt25Percent',\r\n 'VideoViewsAt50Percent',\r\n 'VideoViewsAt75Percent',\r\n 'CompletedVideoViews',\r\n 'VideoCompletionRate',\r\n];\r\n\r\nexport class ChartMetricsAdapter {\r\n constructor(i18n, campaignType) {\r\n this.i18n = i18n;\r\n this.campaignType = campaignType;\r\n this.metricsMap = [{\r\n id: ClicksID,\r\n value: 'ColumnName_Clicks',\r\n name: 'Clicks',\r\n formatter: this.formatToInteger,\r\n }, {\r\n id: 0,\r\n value: 'ColumnName_CostPerConversion',\r\n name: 'AverageCPC',\r\n formatter: this.formatCurrency,\r\n }, {\r\n id: 2,\r\n value: 'ColumnName_CPA',\r\n name: 'CPA',\r\n formatter: this.formatCurrency,\r\n }, {\r\n id: ConvID,\r\n value: 'ColumnName_Conversions',\r\n name: 'Conversions',\r\n formatter: this.formatToInteger,\r\n }, {\r\n id: 4,\r\n value: 'ColumnName_CTR',\r\n name: 'ClickThruRate',\r\n metricName: 'CTR',\r\n formatter: this.formatTo2DigitsPercent,\r\n }, {\r\n id: ImpressionsID,\r\n value: 'TrendAreaChart_AxisY',\r\n name: 'Impressions',\r\n formatter: this.formatToInteger,\r\n }, {\r\n id: SpentID,\r\n value: 'ColumnName_Spend',\r\n name: 'Spent',\r\n metricName: 'Spend',\r\n formatter: this.formatCurrency,\r\n }, {\r\n id: 7,\r\n value: 'Chart_AvgPosition',\r\n name: 'AveragePosition',\r\n formatter: this.formatTo2Digits,\r\n }, {\r\n id: 8,\r\n value: 'ColumnName_TopImpressionRate',\r\n name: 'TopImpressionRate',\r\n formatter: this.formatTo2DigitsPercent,\r\n }, {\r\n id: 9,\r\n value: 'ColumnName_AbsoluteTopImpressionRate',\r\n name: 'AbsoluteTopImpressionRate',\r\n formatter: this.formatTo2DigitsPercent,\r\n }, {\r\n id: 10,\r\n value: 'ColumnName_ConversionRate',\r\n name: 'ConversionRate',\r\n formatter: this.formatTo2DigitsPercent,\r\n }, {\r\n id: 11,\r\n value: 'ColumnName_Revenue',\r\n name: 'AdvertiserReportedRevenue',\r\n formatter: this.formatCurrency,\r\n }, {\r\n id: 12,\r\n value: 'ColumnName_ROAS',\r\n name: 'RevenueOnAdSpend',\r\n formatter: this.formatTo2DigitsPercent,\r\n }, {\r\n id: 13,\r\n value: 'ColumnName_AllConversionCPA',\r\n name: 'AllConversionCPA',\r\n formatter: this.formatCurrency,\r\n }, {\r\n id: 14,\r\n value: 'ColumnName_AllConversions',\r\n name: 'AllConversions',\r\n formatter: this.formatToInteger,\r\n }, {\r\n id: 15,\r\n value: 'ColumnName_AllConversionRate',\r\n name: 'AllConversionRate',\r\n formatter: this.formatTo2DigitsPercent,\r\n }, {\r\n id: 16,\r\n value: 'ColumnName_AllConversionAdvertiserReportedRevenue',\r\n name: 'AllConversionAdvertiserReportedRevenue',\r\n formatter: this.formatCurrency,\r\n }, {\r\n id: 17,\r\n value: 'ColumnName_AllConversionRevenueOnAdSpend',\r\n name: 'AllConversionRevenueOnAdSpend',\r\n formatter: this.formatTo2DigitsPercent,\r\n }, {\r\n id: 18,\r\n value: 'ColumnName_ViewThroughConversions',\r\n name: 'ViewThroughConversions',\r\n formatter: this.formatToInteger,\r\n }, {\r\n id: 19,\r\n value: 'ColumnName_VideoViews',\r\n name: 'VideoViews',\r\n formatter: this.formatToInteger,\r\n }, {\r\n id: 20,\r\n value: 'ColumnName_ViewThroughRate',\r\n name: 'ViewThroughRate',\r\n formatter: this.formatTo2DigitsPercent,\r\n }, {\r\n id: 21,\r\n value: 'ColumnName_AverageCPV',\r\n name: 'AverageCPV',\r\n formatter: this.formatCurrency,\r\n }, {\r\n id: 22,\r\n value: 'ColumnName_TotalWatchTimeInMS',\r\n name: 'TotalWatchTimeInMS',\r\n formatter: this.formatThousandthTo2Digits,\r\n }, {\r\n id: 23,\r\n value: 'ColumnName_AverageWatchTimePerImpression',\r\n name: 'AverageWatchTimePerImpression',\r\n formatter: this.formatTo2Digits,\r\n }, {\r\n id: 24,\r\n value: 'ColumnName_AverageWatchTimePerVideoView',\r\n name: 'AverageWatchTimePerVideoView',\r\n formatter: this.formatTo2Digits,\r\n }, {\r\n id: 25,\r\n value: 'ColumnName_VideoViewsAt25Percent',\r\n name: 'VideoViewsAt25Percent',\r\n formatter: this.formatToInteger,\r\n }, {\r\n id: 26,\r\n value: 'ColumnName_VideoViewsAt50Percent',\r\n name: 'VideoViewsAt50Percent',\r\n formatter: this.formatToInteger,\r\n }, {\r\n id: 27,\r\n value: 'ColumnName_VideoViewsAt75Percent',\r\n name: 'VideoViewsAt75Percent',\r\n formatter: this.formatToInteger,\r\n }, {\r\n id: 28,\r\n value: 'ColumnName_CompletedVideoViews',\r\n name: 'CompletedVideoViews',\r\n formatter: this.formatToInteger,\r\n }, {\r\n id: 29,\r\n value: 'ColumnName_VideoCompletionRate',\r\n name: 'VideoCompletionRate',\r\n formatter: this.formatTo2DigitsPercent,\r\n }, {\r\n id: 30,\r\n value: 'ColumnName_ViewThroughConversionsRevenue',\r\n name: 'ViewThroughConversionsRevenue',\r\n formatter: this.formatTo2Digits,\r\n }, {\r\n id: 31,\r\n value: 'ColumnName_ViewThroughConversionsCPA',\r\n name: 'ViewThroughConversionsCPA',\r\n formatter: this.formatTo2Digits,\r\n }, {\r\n id: 32,\r\n value: 'ColumnName_ViewThroughConversionsReturnOnAdSpend',\r\n name: 'ViewThroughConversionsReturnOnAdSpend',\r\n formatter: this.formatTo2DigitsPercent,\r\n }, {\r\n id: 33,\r\n value: 'ColumnName_ViewThroughConversionsRate',\r\n name: 'ViewThroughConversionsRate',\r\n formatter: this.formatTo2DigitsPercent,\r\n }, {\r\n id: PartialConvID,\r\n value: 'ColumnName_ConversionsCredit',\r\n name: 'ConversionsCredit',\r\n formatter: this.formatTo2Digits,\r\n }, {\r\n id: 35,\r\n value: 'ColumnName_AllConversionsCredit',\r\n name: 'AllConversionsCredit',\r\n formatter: this.formatTo2Digits,\r\n }, {\r\n id: 36,\r\n value: 'ColumnName_ViewThroughConversionsCredit',\r\n name: 'ViewThroughConversionsCredit',\r\n formatter: this.formatTo2Digits,\r\n }, {\r\n id: 37,\r\n value: 'ColumnName_PartialConversionCPA',\r\n name: 'PartialConversionCPA',\r\n formatter: this.formatCurrency,\r\n }, {\r\n id: 38,\r\n value: 'ColumnName_PartialConversionRate',\r\n name: 'PartialConversionRate',\r\n formatter: this.formatTo2DigitsPercent,\r\n }, {\r\n id: 39,\r\n value: 'ColumnName_AllPartialConversionCPA',\r\n name: 'AllPartialConversionCPA',\r\n formatter: this.formatCurrency,\r\n }, {\r\n id: 40,\r\n value: 'ColumnName_AllPartialConversionRate',\r\n name: 'AllPartialConversionRate',\r\n formatter: this.formatTo2DigitsPercent,\r\n }, {\r\n id: 41,\r\n value: 'ColumnName_ViewThroughPartialConversionsCPA',\r\n name: 'ViewThroughPartialConversionsCPA',\r\n formatter: this.formatTo2Digits,\r\n }, {\r\n id: 42,\r\n value: 'ColumnName_ViewThroughPartialConversionsRate',\r\n name: 'ViewThroughPartialConversionsRate',\r\n formatter: this.formatTo2DigitsPercent,\r\n }, {\r\n id: 43,\r\n value: 'ColumnName_AverageCPM',\r\n name: 'AverageCPM',\r\n formatter: this.formatCurrency,\r\n }, {\r\n id: 44,\r\n value: 'UETTags_Event_Grid_ColumnEvents',\r\n name: 'Events',\r\n formatter: this.formatToInteger,\r\n }, {\r\n id: 45,\r\n value: 'ColumnName_AverageCPS',\r\n name: 'AverageCPS',\r\n formatter: this.formatCurrency,\r\n }, {\r\n id: 46,\r\n value: 'ColumnName_SalesCount',\r\n name: 'SalesCount',\r\n formatter: this.formatToInteger,\r\n }, {\r\n id: 47,\r\n value: 'ColumnName_Installs',\r\n name: 'Installs',\r\n formatter: this.formatToInteger,\r\n }, {\r\n id: 48,\r\n value: 'ColumnName_CostPerInstall',\r\n name: 'CostPerInstall',\r\n formatter: this.formatCurrency,\r\n }, {\r\n id: 49,\r\n value: 'ColumnName_RevenuePerInstall',\r\n name: 'RevenuePerInstall',\r\n formatter: this.formatCurrency,\r\n },\r\n {\r\n id: 50,\r\n value: 'ColumnName_AdvertiserReportedRevenueAdjustment',\r\n name: 'AdvertiserReportedRevenueAdjustment',\r\n formatter: this.formatTo2Digits,\r\n },\r\n {\r\n id: 51,\r\n value: 'ColumnName_ViewThroughConversionsRevenueAdjustment',\r\n name: 'ViewThroughConversionsRevenueAdjustment',\r\n formatter: this.formatTo2Digits,\r\n },\r\n {\r\n id: 52,\r\n value: 'ColumnName_AllConversionAdvertiserReportedRevenueAdjustment',\r\n name: 'AllConversionAdvertiserReportedRevenueAdjustment',\r\n formatter: this.formatTo2Digits,\r\n },\r\n {\r\n id: 53,\r\n value: 'ColumnName_Downloads',\r\n name: 'Downloads',\r\n formatter: this.formatToInteger,\r\n },\r\n {\r\n id: 54,\r\n value: 'ColumnName_PostClickDownloadRate',\r\n name: 'PostClickDownloadRate',\r\n formatter: this.formatTo2DigitsPercent,\r\n },\r\n {\r\n id: 55,\r\n value: 'ColumnName_CostPerDownload',\r\n name: 'CostPerDownload',\r\n formatter: this.formatCurrency,\r\n },\r\n {\r\n id: 56,\r\n value: 'ColumnName_FirstLaunches',\r\n name: 'FirstLaunches',\r\n formatter: this.formatToInteger,\r\n },\r\n {\r\n id: 57,\r\n value: 'ColumnName_PostClickFirstLaunchRate',\r\n name: 'PostClickFirstLaunchRate',\r\n formatter: this.formatTo2DigitsPercent,\r\n },\r\n {\r\n id: 58,\r\n value: 'ColumnName_CostPerFirstLaunch',\r\n name: 'CostPerFirstLaunch',\r\n formatter: this.formatCurrency,\r\n },\r\n {\r\n id: 59,\r\n value: 'ColumnName_Purchases',\r\n name: 'Purchases',\r\n formatter: this.formatToInteger,\r\n },\r\n {\r\n id: 60,\r\n value: 'ColumnName_PostInstallPurchaseRate',\r\n name: 'PostInstallPurchaseRate',\r\n formatter: this.formatTo2DigitsPercent,\r\n },\r\n {\r\n id: 61,\r\n value: 'ColumnName_CostPerPurchase',\r\n name: 'CostPerPurchase',\r\n formatter: this.formatCurrency,\r\n },\r\n {\r\n id: 62,\r\n value: 'ColumnName_Subscriptions',\r\n name: 'Subscriptions',\r\n formatter: this.formatToInteger,\r\n },\r\n {\r\n id: 63,\r\n value: 'ColumnName_PostInstallSubscriptionRate',\r\n name: 'PostInstallSubscriptionRate',\r\n formatter: this.formatTo2DigitsPercent,\r\n },\r\n {\r\n id: 64,\r\n value: 'ColumnName_CostPerSubscription',\r\n name: 'CostPerSubscription',\r\n formatter: this.formatCurrency,\r\n },\r\n\r\n ];\r\n }\r\n\r\n /**\r\n * Gets localized list of metrics.\r\n * @param {boolean} hasNone - flag whether to include none in metriclist\r\n * @param {boolean} IsAllConvEnabled - flag whether all conv metrics enabled\r\n * @param {boolean} IsViewThroughConversionsEnabled - flag whether ViewThroughConversions enabled\r\n * @param {string} currentEntity - the current entity of the page\r\n * @returns {object} localized list of metric items as {id, value}\r\n */\r\n getMetricsList = ({\r\n hasNone = false,\r\n IsViewThroughConversionEnabled = false,\r\n IsAvgPositionDeprecationPhase1Enabled = false,\r\n IsAvgPositionDeprecationPhase2Enabled = false,\r\n IsVideoAdsForCampaignEnabled = false,\r\n IsVideoMetricsInPerformanceChartEnabled = false,\r\n IsViewThroughConversionsRevenueEnabled = false,\r\n dynamic: {\r\n ColumnConversion: IsColumnConversionEnabled,\r\n PartialConversions: IsPartialConversionsEnabled,\r\n CPSReporting: isCPSReportingEnabled,\r\n InstallPerformanceColumns,\r\n ConvValueRules: IsConvValueRulesEnabled,\r\n AppCampaignNewCampaignGridColumns,\r\n } = {},\r\n metricsFilter = null,\r\n customMetricNameList = [],\r\n currentEntity,\r\n } = {}) => {\r\n const isAppCampaign = AppCampaignNewCampaignGridColumns && (this.campaignType === 128 || this.campaignType === 'App');\r\n const isAllCampaigns = AppCampaignNewCampaignGridColumns && this.campaignType === 65535;\r\n let metricsList;\r\n if (customMetricNameList.length > 0) {\r\n const customMetrics = _.filter(this.metricsMap, metric => _.contains(customMetricNameList, metric.name));\r\n if (hasNone) {\r\n metricsList = [MetricNone, ...customMetrics];\r\n } else {\r\n metricsList = customMetrics;\r\n }\r\n return _.chain(metricsList)\r\n .map(item => ({\r\n id: item.id,\r\n value: this.i18n.getString(item.value),\r\n name: item.name,\r\n }))\r\n .value();\r\n }\r\n if (hasNone) {\r\n metricsList = [MetricNone, ...this.metricsMap];\r\n } else {\r\n metricsList = this.metricsMap;\r\n }\r\n\r\n const rejectionPredicates = [];\r\n const rejectedNames = [];\r\n\r\n if (!IsViewThroughConversionEnabled) {\r\n rejectedNames.push('ViewThroughConversions');\r\n rejectedNames.push('ViewThroughConversionsCredit');\r\n }\r\n\r\n if (!IsViewThroughConversionsRevenueEnabled) {\r\n rejectedNames.push(...[\r\n 'ViewThroughConversionsRevenue',\r\n 'ViewThroughConversionsCPA',\r\n 'ViewThroughPartialConversionsCPA',\r\n 'ViewThroughConversionsReturnOnAdSpend',\r\n 'ViewThroughConversionsRate',\r\n 'ViewThroughPartialConversionsRate',\r\n ]);\r\n }\r\n\r\n if (!IsAvgPositionDeprecationPhase1Enabled) {\r\n rejectedNames.push(...[\r\n 'TopImpressionRate',\r\n 'AbsoluteTopImpressionRate',\r\n ]);\r\n }\r\n\r\n if (IsAvgPositionDeprecationPhase2Enabled) {\r\n rejectedNames.push('AveragePosition');\r\n }\r\n\r\n if (!(IsVideoAdsForCampaignEnabled && IsVideoMetricsInPerformanceChartEnabled)) {\r\n rejectedNames.push(...VideoMetricColumns);\r\n }\r\n\r\n if (!IsVideoAdsForCampaignEnabled) {\r\n rejectedNames.push('AverageCPM');\r\n }\r\n\r\n if (!isCPSReportingEnabled) {\r\n rejectedNames.push(...[\r\n 'AverageCPS',\r\n 'SalesCount',\r\n ]);\r\n }\r\n\r\n if (!InstallPerformanceColumns) {\r\n rejectedNames.push(...[\r\n 'Installs',\r\n 'CostPerInstall',\r\n 'RevenuePerInstall',\r\n ]);\r\n }\r\n\r\n if (!IsConvValueRulesEnabled) {\r\n rejectedNames.push(...[\r\n 'AdvertiserReportedRevenueAdjustment',\r\n 'ViewThroughConversionsRevenueAdjustment',\r\n 'AllConversionAdvertiserReportedRevenueAdjustment',\r\n ]);\r\n }\r\n\r\n if (!isAppCampaign) {\r\n rejectedNames.push(...[\r\n 'PostClickDownloadRate',\r\n 'CostPerDownload',\r\n 'PostClickFirstLaunchRate',\r\n 'Purchases',\r\n 'PostInstallPurchaseRate',\r\n 'CostPerPurchase',\r\n 'Subscriptions',\r\n 'PostInstallSubscriptionRate',\r\n 'CostPerSubscription',\r\n ]);\r\n }\r\n\r\n if ((!isAllCampaigns && !isAppCampaign) || currentEntity !== 'Campaign') {\r\n rejectedNames.push(...[\r\n 'Downloads',\r\n 'FirstLaunches',\r\n 'CostPerFirstLaunch',\r\n ]);\r\n }\r\n\r\n\r\n rejectedNames.push('Events');\r\n\r\n rejectedNames.push(...IsColumnConversionEnabled && IsPartialConversionsEnabled ?\r\n _.keys(partialConversionPairs) :\r\n _.values(partialConversionPairs));\r\n\r\n if (!_.isEmpty(rejectedNames)) {\r\n rejectionPredicates.push(metric => _.contains(rejectedNames, metric.name));\r\n }\r\n\r\n if (_.isFunction(metricsFilter)) {\r\n rejectionPredicates.push(_.negate(metricsFilter));\r\n }\r\n\r\n const rejectionPredicate = value => _.any(rejectionPredicates, predicate => predicate(value));\r\n return _.chain(metricsList)\r\n .reject(rejectionPredicate)\r\n .map(item => ({\r\n id: item.id,\r\n value: this.i18n.getString(item.value),\r\n name: item.name,\r\n }))\r\n .value();\r\n };\r\n\r\n /**\r\n * Gets localized metric item corresponding to the id.\r\n * @param {number} itemId - Id corresponding to the metric item\r\n * @returns {object} localized list of metric items as {id, value}\r\n */\r\n getMetricItem = (itemId) => {\r\n const metricsList = [MetricNone, ...this.metricsMap];\r\n const item = _.findWhere(metricsList, { id: itemId });\r\n return {\r\n id: item.id,\r\n value: this.i18n.getString(item.value),\r\n name: item.name,\r\n };\r\n };\r\n\r\n /**\r\n * Gets localized metric name corresponding to the id.\r\n * @param {number} itemId - Id corresponding to the metric item\r\n * @returns {string} name of the metric\r\n */\r\n getMetricNameFromId = (itemId) => {\r\n const metricsList = [MetricNone, ...this.metricsMap];\r\n const item = _.findWhere(metricsList, { id: itemId });\r\n return item.metricName ? item.metricName : item.name;\r\n };\r\n\r\n /**\r\n * Gets localized metric item corresponding to the id.\r\n * @param {string} metricName - string representing internal name of the metric\r\n * @returns {number} id of the metric\r\n */\r\n getMetricIdFromName = (metricName) => {\r\n const metricsList = [MetricNone, ...this.metricsMap];\r\n const item = _.findWhere(metricsList, { name: metricName });\r\n return item ? item.id : -1;\r\n };\r\n\r\n /**\r\n * Gets formatter corresponding to the id.\r\n * @param {number} itemId - Id corresponding to the metric item\r\n * @returns {number} id of the metric\r\n */\r\n getMetricFormatter = (itemId) => {\r\n const item = _.findWhere(this.metricsMap, { id: itemId });\r\n return item.formatter;\r\n };\r\n\r\n /**\r\n * Format to integer value.\r\n *\r\n * @private\r\n * @param {number} number - value to be formatted\r\n * @param {options} options - format options\r\n * @returns {number} number with 2 digit fraction\r\n */\r\n formatToInteger = (number, options) => (_.isNumber(number) ?\r\n this.i18n.formatDecimal(number, _.extend({\r\n maximumFractionDigits: 0,\r\n minimumFractionDigits: 0,\r\n }, options)) :\r\n stringNaN);\r\n\r\n /**\r\n * Format to 2 fraction Digit value.\r\n *\r\n * @private\r\n * @param {number} number - value to be formatted\r\n * @param {options} options - format options (Eg. {compact: short, maximumFractionDigits: 0})\r\n * @returns {number} number with 2 digit fraction\r\n */\r\n formatTo2Digits = (number, options) => (_.isNumber(number) ?\r\n this.i18n.formatDecimal(number, _.extend({\r\n maximumFractionDigits: 2,\r\n minimumFractionDigits: 2,\r\n }, options)) :\r\n stringNaN);\r\n\r\n\r\n /**\r\n * Format to 2 fraction Digit value after dividing by 1000\r\n *\r\n * @private\r\n * @param {number} number - value to be formatted\r\n * @param {options} options - format options (Eg. {compact: short, maximumFractionDigits: 0})\r\n * @returns {number} number with 2 digit fraction\r\n */\r\n formatThousandthTo2Digits = (number, options) => (_.isNumber(number) ?\r\n this.i18n.formatDecimal(number / 1000, _.extend({\r\n maximumFractionDigits: 2,\r\n minimumFractionDigits: 2,\r\n }, options)) :\r\n stringNaN);\r\n\r\n /**\r\n * Format to 2 fraction Digit percentage value.\r\n *\r\n * @private\r\n * @param {number} number - value to be formatted\r\n * @param {options} options - format options (Eg. {compact: short, maximumFractionDigits: 0})\r\n * @returns {number} number with 2 digit fraction percentage\r\n */\r\n formatTo2DigitsPercent = (number, options) => (_.isNumber(number) ?\r\n this.i18n.formatPercent(number / 100, _.extend({\r\n maximumFractionDigits: 2,\r\n minimumFractionDigits: 2,\r\n }, options)) :\r\n stringNaN);\r\n\r\n /**\r\n * Format to global account's currency code.\r\n *\r\n * @private\r\n * @param {number} number - value to be formatted\r\n * @param {options} options - format options (Eg. {compact: short, maximumFractionDigits: 0})\r\n * @returns {number} number in currency format.\r\n */\r\n formatCurrency = (number, options) => (_.isNumber(number) ?\r\n // use global (account's) currency code\r\n this.i18n.formatCurrency(number, undefined, options) :\r\n stringNaN);\r\n}\r\n","import _ from 'underscore';\r\nimport { partialConversionPairs } from '@bingads-webui-campaign/column-conversions';\r\nimport { Defaults } from './constants';\r\nimport { ChartGranularityAdapter } from './chart-granularity-adapter';\r\nimport { ChartMetricsAdapter } from './chart-metrics-adapter';\r\n\r\nconst patchPreference = (metricsMap, permissions = {}) => {\r\n const {\r\n ColumnConversion: IsColumnConversionEnabled,\r\n PartialConversions: IsPartialConversionsEnabled,\r\n } = permissions.dynamic || {};\r\n\r\n const metricsMapIdIndex = _.indexBy(metricsMap, 'id');\r\n const metricsMapNameIndex = _.indexBy(metricsMap, 'name');\r\n const conversionPropertyMap = IsPartialConversionsEnabled ?\r\n partialConversionPairs :\r\n _.invert(partialConversionPairs);\r\n\r\n return IsColumnConversionEnabled ?\r\n (srcMetricId) => {\r\n if (_.has(metricsMapIdIndex, srcMetricId)) {\r\n const srcMetricName = metricsMapIdIndex[srcMetricId].name;\r\n if (_.has(conversionPropertyMap, srcMetricName)) {\r\n const targetMetricName = conversionPropertyMap[srcMetricName];\r\n const targetMetricId = metricsMapNameIndex[targetMetricName].id;\r\n return targetMetricId;\r\n }\r\n }\r\n return srcMetricId;\r\n } :\r\n _.identity;\r\n};\r\n\r\nexport class ChartDataAdapter {\r\n constructor({\r\n i18n, permissions = {}, gridName, lowestSupportedGranularity, campaignType,\r\n } = {}) {\r\n this.i18n = i18n;\r\n this.campaignType = campaignType;\r\n this.granularityAdapter = new ChartGranularityAdapter({ i18n, gridName, lowestSupportedGranularity });\r\n this.metricsAdapter = new ChartMetricsAdapter(i18n, campaignType);\r\n ({\r\n ColumnConversion: this.IsColumnConversionEnabled,\r\n PartialConversions: this.IsPartialConversionsEnabled,\r\n InlineChartColumnMerticsEnabled: this.inlineChartColumnMerticsEnabled,\r\n } = permissions.dynamic || {});\r\n this.patchPreference = patchPreference(this.metricsAdapter.metricsMap, permissions);\r\n }\r\n\r\n /**\r\n * Gets chart title.\r\n * @param {object} state - sate instance to get the current level.\r\n * @returns {string} localized chart title.\r\n */\r\n getChartTitle = (state) => {\r\n let currentLevel = 'BI_Chart_AccountLevel';\r\n if (state.get('adgroup_id')) {\r\n currentLevel = 'BI_Chart_AdGroupLevel';\r\n } else if (state.get('campaign_id')) {\r\n currentLevel = 'BI_Chart_CampaignLevel';\r\n }\r\n return this.i18n.getString(currentLevel);\r\n };\r\n\r\n /**\r\n * Gets localized text for no data text.\r\n * @param {boolean} isError - flag to return error string\r\n * @returns {string} localized no data text\r\n */\r\n getNoDataText = (isError = false) => (isError ?\r\n this.i18n.getString('BI_Chart_Error') :\r\n this.i18n.getString('BI_Chart_NoData'));\r\n\r\n /**\r\n * @param {object} data - series data from which start and end data\r\n * @returns {object} first data item\r\n */\r\n getFirstDataItem = data => _.values(data)[0];\r\n\r\n /**\r\n * @param {object} dataItem data item\r\n * @returns {boolean} is dataItem.PrimaryData available\r\n */\r\n isPrimaryDataAvailable = dataItem =>\r\n _.isObject(dataItem)\r\n && _.isArray(dataItem.PrimaryData)\r\n && !_.isEmpty(dataItem.PrimaryData)\r\n && _.every(dataItem.PrimaryData, primaryDataItem => _.isArray(primaryDataItem));\r\n\r\n /**\r\n * @param {object} dataItem data item\r\n * @returns {boolean} is dataItem.ComparisonData available\r\n */\r\n isComparisonDataAvailable = dataItem =>\r\n _.isObject(dataItem)\r\n && _.isArray(dataItem.ComparisonData)\r\n && !_.isEmpty(dataItem.ComparisonData)\r\n && _.every(dataItem.ComparisonData, comparisonDataItem => _.isArray(comparisonDataItem));\r\n\r\n /**\r\n * Gets localized chart start and end date labels. By default the\r\n * show lables will be true and further after aligning fluctuation, if\r\n * fluctuation data overlaps with start/end date, date will be hidden.\r\n * @param {object} data - series data from which start and end data\r\n * to be shown in label is extracted.\r\n * @param {number} granularityId - Id of the current grain selection.\r\n * @returns {object} localized chart label\r\n */\r\n getChartLabel = (data, granularityId) => {\r\n const firstDataItem = this.getFirstDataItem(data);\r\n const isComparisonDataAvailable = this.isComparisonDataAvailable(firstDataItem);\r\n const xAxisStartDate = firstDataItem.PrimaryData[0][2];\r\n const xAxisEndDate = this.getLastAvailableDate(firstDataItem.PrimaryData);\r\n const xAxisCompareStartDate = isComparisonDataAvailable ?\r\n firstDataItem.ComparisonData[0][2] :\r\n '';\r\n const xAxisCompareEndDate = isComparisonDataAvailable ?\r\n this.getLastAvailableDate(firstDataItem.ComparisonData) :\r\n '';\r\n\r\n return {\r\n primaryStartDate: this.formatDate(xAxisStartDate, granularityId),\r\n primaryEndDate: this.formatDate(xAxisEndDate, granularityId),\r\n comparisonStartDate: this.formatDate(xAxisCompareStartDate, granularityId),\r\n comparisonEndDate: this.formatDate(xAxisCompareEndDate, granularityId),\r\n };\r\n };\r\n\r\n /**\r\n * Gets last available date.\r\n * @param {object} data - series data from which start and end data\r\n * to be shown in label is extracted.\r\n * @returns {string} - latest available date within given data\r\n */\r\n getLastAvailableDate(data) {\r\n if (!data[data.length - 1][2]) {\r\n for (let i = data.length - 1; i > -1; i -= 1) {\r\n if (data[i][2]) {\r\n return data[i][2];\r\n }\r\n }\r\n }\r\n return data[data.length - 1][2];\r\n }\r\n\r\n /**\r\n * Gets localized list of metrics.\r\n * @param {object} permission the Persission obj\r\n * @param {function} metricsFilter the filter function of metricsList\r\n * @param {object} customMetricNameList the custom metrics list\r\n * @param {string} currentEntity the current entity of the page\r\n * @returns {object} localized list of metric items as {id, value}\r\n */\r\n getPrimaryMetricsList = (permission = {}, metricsFilter = null, customMetricNameList = [], currentEntity) =>\r\n this.metricsAdapter.getMetricsList(_.extend(permission, {\r\n hasNone: false,\r\n metricsFilter,\r\n customMetricNameList,\r\n currentEntity,\r\n }));\r\n\r\n /**\r\n * Gets localized list of metrics with none.\r\n * @param {object} permission the Persission obj\r\n * @param {function} metricsFilter the filter function of metricsList\r\n * @param {object} customMetricNameList the custom metrics list\r\n * @param {string} currentEntity the current entity of the page\r\n * @returns {object} localized list of metric items as {id, value}\r\n */\r\n getSecondaryMetricsList = (permission = {}, metricsFilter = null, customMetricNameList = [], currentEntity) =>\r\n this.metricsAdapter.getMetricsList(_.extend(permission, {\r\n hasNone: true,\r\n metricsFilter,\r\n customMetricNameList,\r\n currentEntity,\r\n }));\r\n\r\n /**\r\n * Gets localized metric item corresponding to the id.\r\n * @param {number} id - Id corresponding to the metric item\r\n * @returns {object} localized list of metric items as {id, value}\r\n */\r\n getMetricItem = id => this.metricsAdapter.getMetricItem(id);\r\n\r\n /**\r\n * Gets localized metric name corresponding to the id.\r\n * @param {number} id - Id corresponding to the metric item\r\n * @returns {object} localized list of metric items as {id, value}\r\n */\r\n getMetricName = id => this.metricsAdapter.getMetricNameFromId(id);\r\n\r\n /**\r\n * Gets localized metric value formatted using i18n based formatters.\r\n * @param {number} id - Id corresponding to the metric item\r\n * @param {number} value - value of the metric\r\n * @param {object} options - i18n formatting options\r\n * @returns {object} localized list of metric items as {id, value}\r\n */\r\n formatMetric = (id, value, options = {}) => {\r\n const formatter = this.metricsAdapter.getMetricFormatter(id);\r\n return formatter(value, options);\r\n };\r\n\r\n /**\r\n * Gets localized granularity item corresponding to the id.\r\n * @param {number} id - Id corresponding to the granularity item\r\n * @returns {object} localized list of granularity items as {id, value}\r\n */\r\n getGranularitySelection = id => this.granularityAdapter.getGranularityItem(id);\r\n\r\n /**\r\n * Gets localized list of granularities for the current daterange.\r\n * @returns {object} localized list of granularity items as {id, value}\r\n */\r\n getGranularitiesList = () => this.granularityAdapter.getGranularitiesList();\r\n\r\n /**\r\n * Gets selected granularity item enum\r\n * @param {number} id - Id corresponding to the granularity item\r\n * @returns {object} localized list of granularity items as {id, value}\r\n */\r\n getGranularityEnum = id => this.granularityAdapter.getGranularityEnumFromId(id);\r\n\r\n /**\r\n * Gets UI preferences like selected metrics, show chart etc. from preference store.\r\n * If not found in the preference store, a default value will be returned.\r\n * @param {object} preference - preference store to be used to fetch data\r\n * @param {object} pageContext - pagecontext to be used to get the current tab name\r\n * @returns {object} object containing preferences and defaults\r\n */\r\n getPreferencesAndDefaults = (preference, pageContext) =>\r\n preference.getInlineChartInfo().then((preferenceObject) => {\r\n const showChartPref = _.result(\r\n preferenceObject,\r\n `${pageContext.CurrentTabId}-showChart`,\r\n Defaults.showChart\r\n );\r\n\r\n const showMovingAverageInPref = _.result(\r\n preferenceObject,\r\n `${pageContext.CurrentTabId}-showMovingAverage`,\r\n Defaults.showMovingAverage\r\n );\r\n\r\n const granularityEnumInPref = _.result(\r\n preferenceObject,\r\n `${pageContext.CurrentTabId}-granularity`,\r\n Defaults.granularity\r\n );\r\n const granularityIdInPref =\r\n this.granularityAdapter.getGranularityIdFromEnum(granularityEnumInPref);\r\n\r\n let primaryIdInPref = Defaults.primaryMetricId;\r\n if (this.IsColumnConversionEnabled) {\r\n const primaryMetricPrefKey = `${pageContext.CurrentTabId}-primaryMetric`;\r\n if (_.has(preferenceObject, primaryMetricPrefKey)) {\r\n primaryIdInPref =\r\n this.patchPreference(preferenceObject[primaryMetricPrefKey]);\r\n }\r\n } else {\r\n primaryIdInPref = _.result(\r\n preferenceObject,\r\n `${pageContext.CurrentTabId}-primaryMetric`,\r\n Defaults.primaryMetricId\r\n );\r\n }\r\n\r\n let secondaryIdInPref = Defaults.secondaryMetricId;\r\n if (this.IsColumnConversionEnabled) {\r\n const secondaryMetricPrefKey = `${pageContext.CurrentTabId}-secondaryMetric`;\r\n if (_.has(preferenceObject, secondaryMetricPrefKey)) {\r\n secondaryIdInPref =\r\n this.patchPreference(preferenceObject[secondaryMetricPrefKey]);\r\n }\r\n } else {\r\n secondaryIdInPref = _.result(\r\n preferenceObject,\r\n `${pageContext.CurrentTabId}-secondaryMetric`,\r\n Defaults.secondaryMetricId\r\n );\r\n }\r\n\r\n return {\r\n showChart: showChartPref,\r\n showMovingAverage: showMovingAverageInPref,\r\n granularityId: granularityIdInPref,\r\n primaryMetricId: primaryIdInPref,\r\n secondaryMetricId: secondaryIdInPref,\r\n };\r\n });\r\n\r\n /**\r\n * Re-evaluate granularity list and selection based on preference and current daterange.\r\n * @param {object} dateRange - daterange provided by date picker\r\n * @param {number} preferredGranularityId - Granularity Id from preference store\r\n * @returns {number} granularity Id to be used in current selection\r\n */\r\n reevaluateGranularity = (dateRange, preferredGranularityId) => {\r\n this.granularityAdapter.updateAvailableGranularities(dateRange);\r\n return this.granularityAdapter.reconcileSelectedGranularity(preferredGranularityId);\r\n };\r\n\r\n /**\r\n * Extracts and normalizes chart data based on individual metric information.\r\n * @param {object} rawData flag to return error string\r\n * @returns {string} localized no data text\r\n */\r\n prepareData = (rawData) => {\r\n const transformChartPoints = (series) => {\r\n const ret = {};\r\n\r\n const convertData = (point, isPrimaryData) => {\r\n if (isPrimaryData) {\r\n ret.PrimaryData = ret.PrimaryData || [];\r\n } else {\r\n ret.ComparisonData = ret.ComparisonData || [];\r\n }\r\n\r\n const utcPoint = point;\r\n // Because the data-time is based on campaign time zone by default,\r\n // ideally, the format of data-time string in OData response should not\r\n // contain time zone part. In case it does, we should remove it.\r\n // e.g. \"2016-11-11T00:00:00-08:00\" -> \"2016-11-11T00:00:00\"\r\n utcPoint.DateTime = point.DateTime.substring(0, 19);\r\n\r\n const dateTime = new Date(utcPoint.DateTime);\r\n\r\n if (isPrimaryData) {\r\n ret.PrimaryData.push([dateTime.getTime(), utcPoint.Value, point.DateTime]);\r\n } else {\r\n ret.ComparisonData.push([dateTime.getTime(), utcPoint.Value, utcPoint.DateTime]);\r\n }\r\n };\r\n\r\n _.each(series.PrimaryDataPoints, (point) => {\r\n convertData(point, true);\r\n });\r\n\r\n _.each(series.ComparisonDataPoints, (point) => {\r\n convertData(point, false);\r\n });\r\n\r\n return ret;\r\n };\r\n\r\n const ret = {};\r\n\r\n _.each(rawData, (series) => {\r\n if (!series) {\r\n return;\r\n }\r\n const metricId = this.metricsAdapter.getMetricIdFromName(series.MetricName);\r\n\r\n ret[metricId] = {};\r\n ret[metricId] = transformChartPoints(series);\r\n });\r\n\r\n return ret;\r\n };\r\n\r\n /**\r\n * Compares two series and fills all the smaller series with null.\r\n * This is used mostly in POP scenarios with custom date range where the data\r\n * points are either fewer or more than the primary series.\r\n * Comparison start date is aligned to primary series start date.\r\n * @param {object} dataSet - inline chart data\r\n * @param {string} granularity - current granularity selection\r\n * @returns {object} aligned data\r\n */\r\n alignDataForComparison = (dataSet, granularity) => {\r\n const keys = Object.keys(dataSet);\r\n\r\n _.each(keys, (key) => {\r\n const metricData = dataSet[key];\r\n\r\n if (metricData.PrimaryData &&\r\n metricData.ComparisonData &&\r\n metricData.PrimaryData.length !== metricData.ComparisonData.length) {\r\n const shortermetricData =\r\n metricData.PrimaryData.length > metricData.ComparisonData.length ?\r\n metricData.ComparisonData :\r\n metricData.PrimaryData;\r\n\r\n const longermetricData =\r\n metricData.PrimaryData.length < metricData.ComparisonData.length ?\r\n metricData.ComparisonData :\r\n metricData.PrimaryData;\r\n\r\n const diff = Math.abs(metricData.PrimaryData.length - metricData.ComparisonData.length);\r\n\r\n for (let i = 0; i < diff; i++) { // eslint-disable-line no-plusplus\r\n const diff1 = longermetricData[shortermetricData.length][0]\r\n - longermetricData[shortermetricData.length - 1][0];\r\n const dayAfter = shortermetricData[shortermetricData.length - 1][0] + diff1;\r\n\r\n shortermetricData.push([dayAfter, null]);\r\n }\r\n }\r\n\r\n // Current Mt returns last day of month, instead of first day of month.\r\n // Because last day of month\r\n if (granularity === 'Month' || granularity === 'Quarter') {\r\n const dayInMillisec = 60 * 60 * 24 * 1000;\r\n\r\n // eslint-disable-next-line no-plusplus\r\n for (let i = 0; i < metricData.PrimaryData.length - 1; i++) {\r\n const primaryDataDateDiff =\r\n (metricData.PrimaryData[i + 1][0] - metricData.PrimaryData[i][0]) / dayInMillisec;\r\n const comparisonDataDateDiff =\r\n (metricData.ComparisonData[i + 1][0] - metricData.ComparisonData[i][0]) / dayInMillisec;\r\n\r\n if (comparisonDataDateDiff > primaryDataDateDiff) {\r\n metricData.PrimaryData[i + 1][0] += dayInMillisec;\r\n } else if (comparisonDataDateDiff < primaryDataDateDiff) {\r\n metricData.ComparisonData[i + 1][0] += dayInMillisec;\r\n }\r\n }\r\n }\r\n });\r\n };\r\n\r\n formatDate = (timestamp, granularityId) => {\r\n // fix prod err: granularityId can be undefined due to Merged PR 789653\r\n if (_.isUndefined(granularityId)) {\r\n return '';\r\n }\r\n\r\n const options = this.granularityAdapter.getGranularityDateFormat(granularityId);\r\n\r\n if (timestamp && options) {\r\n if (_.isUndefined(this.dateParser)) {\r\n this.dateParser = this.i18n.dateParser({ raw: 'yyyy-MM-ddTHH:mm:ss' });\r\n }\r\n\r\n if (_.isUndefined(this.dateFormatters)) {\r\n this.dateFormatters = {};\r\n }\r\n\r\n let dateFormatter = this.dateFormatters[granularityId];\r\n if (_.isUndefined(dateFormatter)) {\r\n const formatter = this.i18n.dateFormatter(options);\r\n dateFormatter = _.compose(formatter, this.dateParser);\r\n this.dateFormatters[granularityId] = dateFormatter;\r\n }\r\n\r\n return dateFormatter(timestamp);\r\n }\r\n\r\n return '';\r\n };\r\n\r\n /**\r\n * Deep compares two dates based on start -end and comparison dates.\r\n * Expects the inputs to be the object returned by date picker.\r\n * @param {object} date1 - daterange object one to be compared\r\n * @param {object} date2 - dateRange object two to be compared\r\n * @returns {boolean} if date ranges are different.\r\n */\r\n isDateRangeChanged = (date1, date2) => {\r\n if ((date1 === date2) ||\r\n (_.isEmpty(date1) && _.isEmpty(date2))) {\r\n return false;\r\n }\r\n\r\n // Check if any one of the dateRange is undefined or empty\r\n if (!date1 || !date2 || _.isEmpty(date1) || _.isEmpty(date2)) {\r\n return true;\r\n }\r\n\r\n // Check if start and end dates are different\r\n if ((date1.start.getTime() !== date2.start.getTime()) ||\r\n (date1.end.getTime() !== date2.end.getTime())) {\r\n return true;\r\n }\r\n\r\n // Check if comparison dates are different\r\n if (date1.compared && date2.compared) {\r\n if ((date1.compared.start.getTime() !== date2.compared.start.getTime()) ||\r\n (date1.compared.end.getTime() !== date2.compared.end.getTime())) {\r\n return true;\r\n }\r\n }\r\n\r\n // Check if any one has comparison date\r\n if ((date1.compared && !date2.compared) ||\r\n (date2.compared && !date1.compared)) {\r\n return true;\r\n }\r\n\r\n return false;\r\n };\r\n\r\n getMetricsQuery = (primaryMetricSelectionId, secondaryMetricSelectionId) => {\r\n if (!this.inlineChartColumnMerticsEnabled) {\r\n return 'All';\r\n }\r\n const primaryMetricName = this.getMetricName(primaryMetricSelectionId);\r\n const secondaryMetricName = this.getMetricName(secondaryMetricSelectionId);\r\n const metricNames = _.chain([primaryMetricName, secondaryMetricName])\r\n .filter(name => name !== 'none')\r\n .uniq()\r\n .value();\r\n return metricNames.join(',');\r\n };\r\n\r\n formatPreferenceValue = (dateRange, preferenceValue) => {\r\n const granularityId = this.reevaluateGranularity(dateRange, preferenceValue.granularityId);\r\n if (_.isUndefined(granularityId)) {\r\n return;\r\n }\r\n const granularity = this.getGranularityEnum(granularityId);\r\n const metrics = this.getMetricsQuery(\r\n preferenceValue.primaryMetricId,\r\n preferenceValue.secondaryMetricId\r\n );\r\n const movingAverage = preferenceValue.showMovingAverage;\r\n // eslint-disable-next-line consistent-return\r\n return {\r\n Granularity: granularity,\r\n Metrics: metrics,\r\n MovingAverage: (!dateRange.compared) &&\r\n (granularityId === Defaults.graunlarityId) && movingAverage,\r\n };\r\n };\r\n}\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\n/**\r\n * React component that renders flucutation bulb component. Fluctuation bulb appears\r\n * below the highchart component.\r\n * @param {Bool} val - Properties used to render the component.\r\n * @returns {Element} React element.\r\n */\r\nexport class FluctuationBulb extends React.PureComponent {\r\n render() {\r\n this.bulbElem = React.createRef();\r\n const divStyle = {\r\n left: `${this.props.left}px`,\r\n };\r\n const { isRed, isYellow } = this.props;\r\n const normalClass = isYellow ? 'balloonYellow' : 'balloon';\r\n const balloonClass = isRed ? 'balloonUnknown' : normalClass;\r\n const balloonPic =
;\r\n\r\n return (\r\n
\r\n {balloonPic}\r\n
\r\n );\r\n }\r\n}\r\n\r\nFluctuationBulb.propTypes = {\r\n id: PropTypes.string.isRequired,\r\n isRed: PropTypes.bool.isRequired,\r\n isYellow: PropTypes.bool.isRequired,\r\n left: PropTypes.number.isRequired,\r\n};\r\n","export const instrumentationSchema = {\r\n scenario: [{\r\n name: 'inlineChart',\r\n value: 'inlineChart',\r\n setting: {},\r\n activity: [\r\n {\r\n name: 'inlineChartFilter',\r\n value: 'inlineChartFilter',\r\n },\r\n {\r\n name: 'inlineChartAction',\r\n value: 'inlineChartAction',\r\n },\r\n {\r\n name: 'inlineChartError',\r\n value: 'inlineChartError',\r\n },\r\n ],\r\n }],\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { FluctuationPopup, FluctuationTypeKey, FluctuationType } from '@bingads-webui-campaign-react/fluctuation-popup';\r\nimport { ChartDataAdapter } from './chart-data-adapter';\r\nimport { FluctuationBulb } from './fluctuation-bulb';\r\nimport { instrumentationSchema } from './inline-chart-instr-schema';\r\nimport { ImpressionsID, ClicksID, SpentID, ConvID, PartialConvID } from './chart-metrics-adapter';\r\n\r\nfunction getFluctuationType(metricId) {\r\n switch (metricId) {\r\n case ImpressionsID:\r\n return FluctuationType[FluctuationTypeKey.Impression];\r\n case ClicksID:\r\n return FluctuationType[FluctuationTypeKey.Click];\r\n case SpentID:\r\n return FluctuationType[FluctuationTypeKey.Spend];\r\n case ConvID:\r\n case PartialConvID:\r\n return FluctuationType[FluctuationTypeKey.Conv];\r\n default:\r\n return null;\r\n }\r\n}\r\n\r\nexport class FluctuationPanel extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.initializeInstrumentation();\r\n this.chartDataAdapter = new ChartDataAdapter({\r\n i18n: this.props.deps.i18n,\r\n permissions: this.props.deps.context.Permissions,\r\n });\r\n this.bulbRefArr = [];\r\n\r\n this.state = {\r\n chart: null,\r\n openedFlucId: null,\r\n };\r\n }\r\n\r\n componentDidUpdate() {\r\n let finalStartAvail = true;\r\n let finalEndAvail = true;\r\n this.bulbRefArr.forEach((item) => {\r\n if (item.bulbElem.current) {\r\n const { isStartAvail, isEndAvail } =\r\n this.hideChartLabelIfApplicable(item.bulbElem.current);\r\n finalStartAvail = finalStartAvail && isStartAvail;\r\n finalEndAvail = finalEndAvail && isEndAvail;\r\n }\r\n });\r\n if (this.props.chartLabelStatus.isShowStartDateLabel !== finalStartAvail ||\r\n this.props.chartLabelStatus.isShowEndDateLabel !== finalEndAvail) {\r\n this.props.onChartLabelToggle({\r\n isShowStartDateLabel: finalStartAvail,\r\n isShowEndDateLabel: finalEndAvail,\r\n });\r\n }\r\n }\r\n\r\n onChartUpdated = (chart) => {\r\n this.setState({\r\n chart,\r\n });\r\n };\r\n\r\n initializeInstrumentation = () => {\r\n this.props.deps.instrumentation.addScenario(instrumentationSchema);\r\n\r\n const inlineChartScenario = this.props.deps.instrumentation.inlineChart.create();\r\n this.activities = {\r\n chartActionActivity: inlineChartScenario.inlineChartAction.create(),\r\n chartErrorActivity: inlineChartScenario.inlineChartError.create(),\r\n };\r\n };\r\n\r\n isTwoRectOverlapping = (elem1, elem2) =>\r\n // Check Leftoverlap, element 1 in element 2, element 2 inside element 1, right overlap\r\n ((elem1.left >= elem2.left && elem2.right >= elem1.left) ||\r\n (elem1.left >= elem2.left && elem1.right <= elem2.right) ||\r\n (elem2.left >= elem1.left && elem2.right <= elem1.right) ||\r\n (elem1.right >= elem2.left && elem2.right >= elem1.right));\r\n\r\n hideChartLabelIfApplicable = (bulbElem) => {\r\n const startLabelRef = this.props.chartLabelRef.current.startLabelRef.current;\r\n const endLabelRef = this.props.chartLabelRef.current.endLabelRef.current;\r\n const bulbClientRect = bulbElem.getBoundingClientRect();\r\n let isBulbOverlappingWithStart = false;\r\n let isBulbOverlappingWithEnd = false;\r\n\r\n if (startLabelRef) {\r\n const startDateRect = startLabelRef.getBoundingClientRect();\r\n isBulbOverlappingWithStart = this.isTwoRectOverlapping(startDateRect, bulbClientRect);\r\n }\r\n if (endLabelRef) {\r\n const lastDateRect = endLabelRef.getBoundingClientRect();\r\n isBulbOverlappingWithEnd = this.isTwoRectOverlapping(lastDateRect, bulbClientRect);\r\n }\r\n\r\n return {\r\n isStartAvail: !isBulbOverlappingWithStart,\r\n isEndAvail: !isBulbOverlappingWithEnd,\r\n };\r\n };\r\n\r\n logContext = (date, fluctuations) => {\r\n fluctuations.forEach((fluc) => {\r\n const logObject = {\r\n fluxId: fluc.UniqueId,\r\n PrimaryMetricId: this.props.primaryMetricId,\r\n SecondaryMetricId: this.props.secondaryMetricId,\r\n eventType: 'FluxShown',\r\n fluxContent: {\r\n actions: _.chain(fluc.Actions)\r\n .pluck('Message')\r\n .flatten().pluck('MessageId')\r\n .value(),\r\n rootCauses: _.chain(fluc.RootCauses)\r\n .pluck('Message')\r\n .flatten().pluck('MessageId')\r\n .value(),\r\n description: _.pluck(fluc.Description, 'MessageId'),\r\n },\r\n fluxDate: date,\r\n fluxKpi: fluc.FluctuationType,\r\n userId: this.props.deps.context.CurrentUser.Id,\r\n isInternal: this.props.deps.context.CurrentUser.IsInternal,\r\n customerId: fluc.CustomerId,\r\n accountId: fluc.AccountId,\r\n campaignId: fluc.CampaignId,\r\n };\r\n this.activities.chartActionActivity.trace(`Bulb Rendered for ${JSON.stringify(logObject)}`, 'FluctuationAction');\r\n });\r\n };\r\n\r\n render() {\r\n if (!this.state.chart || !this.props.fluctuations || this.props.fluctuations.length === 0\r\n || !this.state.chart.series) {\r\n return null;\r\n }\r\n this.bulbRefArr = [];\r\n const flucPlaceholders = [];\r\n this.props.fluctuations.forEach((fluc) => {\r\n if (fluc.FluctuationsPerDate.length === 0) {\r\n return;\r\n }\r\n this.state.chart.series[0].data.forEach((point, idx) => {\r\n if (point.name === fluc.formattedDate) {\r\n if (this.activities) {\r\n this.logContext(fluc.Date, fluc.FluctuationsPerDate);\r\n }\r\n\r\n // substract half bulb width from x to align the bulb center with chart points\r\n const bulbWidth = 28;\r\n const clientX = this.state.chart.series[0].points[idx].clientX +\r\n (this.state.chart.plotLeft - (bulbWidth / 2));\r\n const isRCUnknown = !_.isUndefined(_.find(\r\n fluc.FluctuationsPerDate,\r\n item =>\r\n item.RootCauses &&\r\n item.RootCauses[0] &&\r\n item.RootCauses[0].Message &&\r\n item.RootCauses[0].Message.MessageId === 'RCUnknown'\r\n ));\r\n\r\n const bulbElem = (\r\n
{\r\n if (ref) {\r\n this.bulbRefArr.push(ref);\r\n }\r\n }}\r\n isRed={isRCUnknown}\r\n isYellow\r\n left={clientX}\r\n imageSrc={`${this.props.deps.imagePath}fluctuation-bulb.png`}\r\n />\r\n );\r\n\r\n // there could be four series when moving range is checked\r\n // or two series if moving range is not checked\r\n // primary, (primaryComparison), secondary, (secondaryComparison)\r\n // send all available ones over for vNext\r\n // do not send comparison (moving average) to current UI\r\n const metrics = [];\r\n this.state.chart.series.forEach((series) => {\r\n const metricId = (series.userOptions.id.indexOf('primary') !== -1) ?\r\n this.props.primaryMetricId :\r\n this.props.secondaryMetricId;\r\n\r\n if (metricId !== -1 &&\r\n series.data.length > 0) {\r\n metrics.push({\r\n name: series.name,\r\n value: this.chartDataAdapter.formatMetric(\r\n metricId,\r\n series.data[idx].y\r\n ).toString(),\r\n line: series.userOptions.id,\r\n color: series.userOptions.color,\r\n });\r\n }\r\n });\r\n\r\n const fluctuationTypeIds = _.compact([\r\n getFluctuationType(this.props.primaryMetricId),\r\n getFluctuationType(this.props.secondaryMetricId),\r\n ]);\r\n\r\n // this.activities.chartActionActivity.trace('Fluctuation data populated on chart',\r\n // 'InlineChartAction');\r\n const isOpen = !_.isUndefined(_.find(fluc.FluctuationsPerDate, item =>\r\n item.UniqueId === this.state.openedFlucId));\r\n\r\n flucPlaceholders.push((\r\n \r\n {\r\n this.setState({\r\n openedFlucId: flucId,\r\n });\r\n this.flucPage = _.findIndex(fluc.FluctuationsPerDate, {\r\n UniqueId: flucId,\r\n });\r\n if (metricId !== this.props.primaryMetricId &&\r\n metricId !== this.props.secondaryMetricId) {\r\n this.props.onPrimaryMetricChange({\r\n id: metricId,\r\n });\r\n }\r\n }}\r\n deps={{\r\n i18n: this.props.deps.i18n,\r\n context: this.props.deps.context,\r\n instrumentation: this.props.deps.instrumentation,\r\n token: this.props.deps.token,\r\n imagePath: this.props.deps.imagePath,\r\n }}\r\n metrics={metrics}\r\n triggerButton={bulbElem}\r\n isOpen={isOpen}\r\n onFlucDismiss={this.props.onFlucDismiss}\r\n page={isOpen ? this.flucPage : 0}\r\n />\r\n
\r\n ));\r\n }\r\n });\r\n });\r\n return (\r\n \r\n {flucPlaceholders}\r\n
\r\n );\r\n }\r\n}\r\n\r\nFluctuationPanel.propTypes = {\r\n fluctuations: PropTypes.arrayOf(PropTypes.shape({\r\n Date: PropTypes.string.isRequired,\r\n formattedDate: PropTypes.string.isRequired,\r\n FluctuationsPerDate: PropTypes.arrayOf(PropTypes.shape({\r\n UniqueId: PropTypes.string.isRequired,\r\n })),\r\n })).isRequired,\r\n onFlucDismiss: PropTypes.func.isRequired,\r\n primaryMetricId: PropTypes.number.isRequired,\r\n secondaryMetricId: PropTypes.number.isRequired,\r\n chartLabelStatus: PropTypes.shape({\r\n isShowStartDateLabel: PropTypes.bool,\r\n isShowEndDateLabel: PropTypes.bool,\r\n }).isRequired,\r\n onChartLabelToggle: PropTypes.func.isRequired,\r\n onPrimaryMetricChange: PropTypes.func.isRequired,\r\n chartLabelRef: PropTypes.shape({\r\n current: PropTypes.shape({\r\n startLabelRef: PropTypes.shape({\r\n current: PropTypes.node,\r\n }),\r\n endLabelRef: PropTypes.shape({\r\n current: PropTypes.node,\r\n }),\r\n }),\r\n }).isRequired,\r\n deps: PropTypes.shape({\r\n token: PropTypes.string,\r\n imagePath: PropTypes.string,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n formatDate: PropTypes.func,\r\n }).isRequired,\r\n instrumentation: PropTypes.shape({\r\n addScenario: PropTypes.func,\r\n inlineChart: PropTypes.shape({\r\n create: PropTypes.func,\r\n }),\r\n fluctuation: PropTypes.shape({\r\n create: PropTypes.func,\r\n }),\r\n }),\r\n context: PropTypes.shape({\r\n CurrentCustomer: PropTypes.shape({\r\n Id: PropTypes.number,\r\n }),\r\n CurrentAccount: PropTypes.shape({\r\n Id: PropTypes.number,\r\n }),\r\n CurrentCampaign: PropTypes.shape({\r\n Id: PropTypes.number,\r\n }),\r\n CurrentUser: PropTypes.shape({\r\n Id: PropTypes.number,\r\n IsInternal: PropTypes.bool,\r\n }),\r\n Permissions: PropTypes.shape({\r\n IsABFluctuationBlubYellow: PropTypes.bool,\r\n }).isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n dateRange: PropTypes.shape({}).isRequired,\r\n updateFlucData: PropTypes.func.isRequired,\r\n updateLoadingStatus: PropTypes.func.isRequired,\r\n};\r\n","/**\r\n * Highchart Style definitions. This will be merged with chart data\r\n * and set on the highchart component.\r\n * For available attributes for highcharts please refer https://api.highcharts.com/highcharts/\r\n */\r\nexport const highchartsStyle = {\r\n plotOptions: {\r\n line: {\r\n dataLabels: {\r\n enabled: false,\r\n },\r\n enableMouseTracking: true,\r\n },\r\n },\r\n xAxis: {\r\n title: {\r\n text: '',\r\n },\r\n crosshair: {\r\n enabled: true,\r\n color: '#E66400',\r\n dashStyle: 'longdash',\r\n },\r\n showFirstLabel: false,\r\n showLastLabel: false,\r\n visible: true,\r\n lineWidth: 1,\r\n labels: {\r\n enabled: false,\r\n },\r\n tickLength: 0,\r\n },\r\n yAxis: [{\r\n title: {\r\n text: '',\r\n },\r\n tickPixelInterval: 30,\r\n gridLineDashStyle: 'dash',\r\n visible: true,\r\n showFirstLabel: false,\r\n showLastLabel: false,\r\n }, {\r\n title: {\r\n text: '',\r\n },\r\n tickPixelInterval: 30,\r\n gridLineDashStyle: 'dash',\r\n visible: true,\r\n showFirstLabel: false,\r\n showLastLabel: false,\r\n opposite: true,\r\n }],\r\n tooltip: {\r\n backgroundColor: '#ffffff',\r\n borderRadius: 0,\r\n borderColor: '#AAAAAA',\r\n borderWidth: 2,\r\n useHTML: true,\r\n shared: true,\r\n shadow: false,\r\n valueDecimals: 2,\r\n },\r\n chart: {\r\n spacingTop: 0,\r\n spacingLeft: 0,\r\n spacingRight: 0,\r\n spacingBottom: 20,\r\n },\r\n legend: {\r\n enabled: false,\r\n },\r\n credits: {\r\n enabled: false,\r\n },\r\n};\r\n\r\nexport const highchartsStyleVNextOverride = {\r\n chart: {\r\n height: 123,\r\n },\r\n xAxis: {\r\n crosshair: {\r\n color: 'rgba(0,0,0,0.1)',\r\n },\r\n },\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Promise from 'bluebird';\r\nimport _ from 'underscore';\r\nimport $ from 'jquery';\r\n\r\nimport { merge } from '@bingads-webui-universal/primitive-utilities';\r\nimport { HighchartReactWrapper } from '@bingads-webui-react/highchart-react-wrapper';\r\nimport { FluctuationTypeKey } from '@bingads-webui-campaign-react/fluctuation-popup';\r\nimport { UiBlocker } from '@bingads-webui-react/ui-blocker';\r\nimport { perfMarkerPropTypes } from '@bingads-webui/performance-marker';\r\nimport { getFilteredCampaignTypeFromRawFilter } from '@bingads-webui-campaign/campaign-ui-common';\r\nimport { withGlobalFilter } from '@bingads-webui-react/global-filter-context';\r\n\r\nimport { ChartLabel } from './chart-label';\r\nimport { ChartPanel } from './chart-panel';\r\nimport { ChartFormatter } from './chart-formatter';\r\nimport { FluctuationPanel } from './fluctuation-panel';\r\nimport { highchartsStyle, highchartsStyleVNextOverride } from '../style/js/highcharts-style';\r\nimport { Defaults } from './constants';\r\nimport { ChartDataAdapter } from './chart-data-adapter';\r\nimport { instrumentationSchema } from './inline-chart-instr-schema';\r\nimport { ImpressionsID, ClicksID, SpentID, ConvID, PartialConvID, VideoMetricColumns } from './chart-metrics-adapter';\r\n\r\nconst WaterfallFilterTypeCampaignType = 0;\r\n\r\nexport class InlineChartInternal extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n\r\n\r\n if (this.props.perfMarker) {\r\n this.perfMarker = this.props.perfMarker.createChild('Inline_Chart_Init_Load', { isActiveChild: false });\r\n this.perfMarker.willInit();\r\n }\r\n\r\n this.initializeInstrumentation();\r\n this.i18n = this.props.i18n;\r\n // Register date change handler.\r\n this.props.options.addDateChangeListener(this.onDateChangeHandler.bind(this));\r\n this.props.options.resizeChartListener(this.onResizeWindow.bind(this));\r\n\r\n this.campaignType = getFilteredCampaignTypeFromRawFilter(this.props[WaterfallFilterTypeCampaignType]);\r\n\r\n this.chartFormatter = new ChartFormatter();\r\n this.chartDataAdapter =\r\n new ChartDataAdapter({\r\n i18n: this.i18n,\r\n permissions: this.props.options.pageContext.Permissions,\r\n gridName: this.props.options.pageContext.CurrentGridName,\r\n lowestSupportedGranularity: this.props.options.lowestSupportedGranularity,\r\n campaignType: this.campaignType,\r\n });\r\n this.isInitialized = false;\r\n this.isOuterContainerInitialized = false;\r\n this.isPendingFetch = false;\r\n this.inlineChartColumnMerticsEnabled = false;\r\n\r\n if (this.props.serverContext && this.props.serverContext.DynamicPermissions) {\r\n this.inlineChartColumnMerticsEnabled =\r\n this.props.serverContext.DynamicPermissions.InlineChartColumnMerticsEnabled;\r\n }\r\n\r\n this.chartData = {};\r\n\r\n const permissions = this.props.options.pageContext.Permissions || {};\r\n ({\r\n dynamic: {\r\n ColumnConversion: this.IsColumnConversionEnabled,\r\n PartialConversions: this.IsPartialConversionsEnabled,\r\n } = {},\r\n } = permissions);\r\n\r\n this.withoutOpporCheck = permissions.dynamic && permissions.dynamic.FluctuationsWithoutRecCheck;\r\n\r\n this.state = {\r\n isLoading: true,\r\n isPopEnabled: false,\r\n isDataAvailable: false,\r\n isShowChart: true,\r\n isShowStartDateLabel: true,\r\n isShowEndDateLabel: true,\r\n flucData: [],\r\n chartMarginRight: 0,\r\n primaryMetricSelectionId: Defaults.primaryMetricId,\r\n secondaryMetricSelectionId: Defaults.secondaryMetricId,\r\n granularitySelectionId: Defaults.graunlarityId,\r\n // Used to only track moving average status. It may be enabled, but hidden if PoP is ON.\r\n isMovingAverageEnabled: Defaults.showMovingAverage,\r\n primaryMetricPercentage: '',\r\n secondaryMetricPercentage: '',\r\n chartLabelData: {},\r\n // Combine highchart data and style as highchart options\r\n noChartText: this.chartDataAdapter.getNoDataText(),\r\n dateRange: {},\r\n formattedHighChartOptions: {},\r\n fluctuationLoading: false,\r\n };\r\n\r\n const currentTab = this.props.options.gridCriterionType;\r\n const currentEntity = this.props.options.entityType;\r\n const { adGroupId } = (this.props.scope && this.props.scope.values) || {};\r\n\r\n const getMetricFilters = () => {\r\n const CPSAndInstallMetrics = ['AverageCPS', 'SalesCount', 'Installs', 'CostPerInstall', 'RevenuePerInstall'];\r\n const ConvValueRulesMetrics = ['AdvertiserReportedRevenueAdjustment', 'ViewThroughConversionsRevenueAdjustment', 'AllConversionAdvertiserReportedRevenueAdjustment'];\r\n const ConvValueRulesAllowedEntities = ['Account', 'Campaign', 'AdGroup', 'Ad', 'Keyword'];\r\n\r\n const fitlerMetrics = [];\r\n // only account/Perf, campaign, adgroup, ads and positive keyword can show Conversion Value Rule Metrics\r\n if (!ConvValueRulesAllowedEntities.includes(currentEntity)) {\r\n fitlerMetrics.push(...ConvValueRulesMetrics);\r\n }\r\n\r\n // for Demographics tab , CPA is no longer avaliable in Age and Gender grid\r\n if (currentTab === 'Age' || currentTab === 'Gender') {\r\n fitlerMetrics.push(...CPSAndInstallMetrics, 'CPA');\r\n }\r\n // for Keyword tab, hide video metrics\r\n if (currentEntity === 'Keyword') {\r\n fitlerMetrics.push(...CPSAndInstallMetrics, ...VideoMetricColumns);\r\n }\r\n\r\n const isCPSEntitiesCondition = ['Campaign', 'AdGroup', 'Account'].includes(currentEntity);\r\n const CPSProductgroupCondition = currentTab === 'ProductGroup' && !adGroupId;\r\n if (!(isCPSEntitiesCondition || CPSProductgroupCondition)) {\r\n fitlerMetrics.push(...CPSAndInstallMetrics);\r\n }\r\n\r\n const uniqueFilterMetrics = _.uniq(fitlerMetrics);\r\n if (!_.isEmpty(uniqueFilterMetrics)) {\r\n return metric => !uniqueFilterMetrics.includes(metric.name);\r\n }\r\n return null;\r\n };\r\n\r\n this.primaryMetricsList =\r\n this.chartDataAdapter.getPrimaryMetricsList(\r\n permissions,\r\n getMetricFilters(),\r\n this.props.options.customMetricNameList,\r\n currentEntity\r\n );\r\n\r\n this.secondaryMetricsList =\r\n this.chartDataAdapter.getSecondaryMetricsList(\r\n permissions,\r\n getMetricFilters(),\r\n this.props.options.customMetricNameList,\r\n currentEntity\r\n );\r\n }\r\n\r\n componentDidMount() {\r\n this.canceled = false;\r\n // get promise for current daterange, preferences\r\n Promise.all([\r\n this.props.options.pageState.getPromise('$daterange'),\r\n this.chartDataAdapter.getPreferencesAndDefaults(\r\n this.props.options.preference,\r\n this.props.options.pageContext\r\n )])\r\n .spread((dateRange, preferences) => {\r\n if (!this.canceled) {\r\n // Check if preference option loaded still available (might change due to pilot)\r\n const normalizedPreferences = this.normalizeWithAvailable(preferences);\r\n const selectedGranularityId = this.chartDataAdapter.reevaluateGranularity(\r\n dateRange,\r\n normalizedPreferences.granularityId\r\n );\r\n\r\n this.activities.chartActionActivity.trace(`Inline Chart reevaluated granularity\r\n preference granularity id ${normalizedPreferences.granularityId},\r\n new granularity id ${selectedGranularityId}`, 'InlineChartAction');\r\n\r\n this.isInitialized = true;\r\n // Update all the state that will be used by next render cycle to update UI.\r\n // Make sure both daterange and granularity are updated together.\r\n this.setState((prevState, newProps) =>\r\n this.updateState(dateRange, newProps, normalizedPreferences, selectedGranularityId));\r\n }\r\n });\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (!this.isInitialized || !this.isOuterContainerInitialized) {\r\n // We need to wait till we read the preference store and daterange\r\n // before acting on any updates. Keep the initial fetch as pending.\r\n this.isPendingFetch = true;\r\n return;\r\n }\r\n\r\n if (this.perfMarker && !this.perfMarker.isDone && !this.state.isLoading && this.isInitialized) {\r\n this.perfMarker.done();\r\n }\r\n\r\n if (prevProps.isShowChart !== this.props.isShowChart) {\r\n this.toggleChartState(!this.state.isShowChart);\r\n }\r\n\r\n if (this.chartDataAdapter.isDateRangeChanged(prevProps.dateRange, this.props.dateRange)) {\r\n // new date range is passed in as props\r\n // do not directly trigger refresh\r\n // instead call below handler to let it handle state update and refresh\r\n // chartDataAdapter.isDateRangeChanged takes care of null or undefined checks\r\n this.onDateChangeHandler(null, this.props.dateRange);\r\n return;\r\n }\r\n\r\n if (_.isUndefined(this.state.granularitySelectionId)) {\r\n // Skip fetch if granularity is not defined.\r\n return;\r\n }\r\n\r\n if (!this.state.isShowChart) {\r\n // Don't fetch in background if chart is hidden. Only fetch on show chart.\r\n this.isPendingFetch = true;\r\n return;\r\n }\r\n // As componentDidUpdate is invoked on update to any of the props or state, check\r\n // for changes that require fetch and conditionally trigger it.\r\n if (\r\n this.isPendingFetch ||\r\n (this.isFilterChanged(prevProps.filter, this.props.filter)) ||\r\n (this.isCustomFilterChanged(prevProps.customFilter, this.props.customFilter)) ||\r\n (this.chartDataAdapter.isDateRangeChanged(prevState.dateRange, this.state.dateRange)) ||\r\n (prevState.isPopEnabled !== this.state.isPopEnabled) ||\r\n // If this.props.gridDataSource is not undefined\r\n // Don't fetch data when granularity or movingAverage changes\r\n (!this.props.gridDataSource &&\r\n prevState.granularitySelectionId !== this.state.granularitySelectionId) ||\r\n (!this.props.gridDataSource &&\r\n prevState.isMovingAverageEnabled !== this.state.isMovingAverageEnabled)) {\r\n // Reset pending fetch.\r\n this.isPendingFetch = false;\r\n\r\n if (this.perfMarker) {\r\n this.perfMarker.willFetchData();\r\n }\r\n\r\n // Fetch performance time series\r\n this.fetchPerformanceAndFluctuation(\r\n this.state.dateRange,\r\n this.state.granularitySelectionId,\r\n // If this.props.gridDataSource is not undefined\r\n // Use grid data when we didn't show / hide inline chart\r\n this.props.gridDataSource && prevState.isShowChart === this.state.isShowChart\r\n );\r\n this.activities.chartActionActivity.trace('State Updated. Render starts', 'InlineChartAction');\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.canceled = true;\r\n }\r\n\r\n onDateChangeHandler = (e, newDateRange) => {\r\n if (!this.isInitialized) {\r\n // No data to compare yet. Wait till initialization finishes.\r\n return;\r\n }\r\n\r\n if (this.props.perfMarker) {\r\n this.actionPerfMarker = this.props.perfMarker.createChild('Inline_Chart_Action', { isActiveChild: false });\r\n this.actionPerfMarker.willInit();\r\n }\r\n\r\n this.activities.chartActionActivity.trace(`Inline Chart Date Change received\r\n ${JSON.stringify(newDateRange)}`, 'InlineChartAction');\r\n\r\n // Daterange object received through notification is different\r\n // Eg. title field string can differ. So we only compare, start,end,\r\n // compared start, end fields to determine time range change and proccess further.\r\n if (!this.chartDataAdapter.isDateRangeChanged(newDateRange, this.state.dateRange)) {\r\n this.activities.chartActionActivity.trace(`Inline Chart Date Change no change\r\n ${JSON.stringify(this.state.dateRange)}`, 'InlineChartAction');\r\n return;\r\n }\r\n\r\n // Update granularity selection and available granularity list\r\n const selectedGranularityId =\r\n this.chartDataAdapter.reevaluateGranularity(newDateRange, this.state.granularitySelectionId);\r\n\r\n this.activities.chartActionActivity.trace(`Inline Chart reevaluated granularity\r\n old granularity id ${this.state.granularitySelectionId},\r\n new granularity id ${selectedGranularityId}`, 'InlineChartAction');\r\n\r\n const newState = {\r\n granularitySelectionId: selectedGranularityId,\r\n dateRange: newDateRange,\r\n isPopEnabled: !!newDateRange.compared,\r\n chartLabelData: {},\r\n };\r\n\r\n if (_.isUndefined(selectedGranularityId)) {\r\n newState.isDataAvailable = false;\r\n }\r\n\r\n // Update all the state that will be used by next render cycle to update UI.\r\n this.setState(newState);\r\n };\r\n\r\n onResizeWindow = (newWidth) => {\r\n if (!newWidth || (this.chart && newWidth === this.chart.chartWidth)) {\r\n return;\r\n }\r\n\r\n this.isOuterContainerInitialized = true;\r\n\r\n let width = newWidth;\r\n const inlineChartContainer = $('.inline-chart-container');\r\n\r\n if (inlineChartContainer) {\r\n width -= (parseFloat(inlineChartContainer.css('paddingLeft')) +\r\n parseFloat(inlineChartContainer.css('paddingRight')));\r\n }\r\n\r\n this.props.options.resizeEventHandler();\r\n\r\n this.resizeChart(width);\r\n };\r\n\r\n onPrimaryMetricChange = (selection) => {\r\n if (selection.id === this.state.primaryMetricSelectionId) {\r\n // No op if selection is same metric as currently set.\r\n return;\r\n }\r\n\r\n if (this.props.perfMarker) {\r\n this.actionPerfMarker = this.props.perfMarker.createChild('Inline_Chart_Action', { isActiveChild: false });\r\n this.actionPerfMarker.willInit();\r\n }\r\n\r\n // Save to preference store\r\n this.saveToPrefrenceStore('primaryMetric', selection.id);\r\n\r\n if (this.inlineChartColumnMerticsEnabled) {\r\n this.setState({\r\n primaryMetricSelectionId: selection.id,\r\n }, () => {\r\n this.fetchPerformanceData(\r\n this.state.dateRange,\r\n this.state.granularitySelectionId\r\n );\r\n });\r\n } else {\r\n // Compute the new chart options\r\n const formattedOptions = this.getFormattedChartOptions(\r\n selection.id,\r\n this.state.secondaryMetricSelectionId\r\n );\r\n\r\n this.setState({\r\n primaryMetricSelectionId: selection.id,\r\n formattedHighChartOptions: formattedOptions,\r\n });\r\n }\r\n\r\n this.activities.chartActionActivity.trace(\r\n `Inline Chart primary metric changed: ${selection.id}`,\r\n 'InlineChartAction'\r\n );\r\n };\r\n\r\n onSecondaryMetricChange = (selection) => {\r\n if (selection.id === this.state.secondaryMetricSelectionId) {\r\n // No op if selection is same metric as currently set.\r\n return;\r\n }\r\n\r\n if (this.props.perfMarker) {\r\n this.actionPerfMarker = this.props.perfMarker.createChild('Inline_Chart_Action', { isActiveChild: false });\r\n this.actionPerfMarker.willInit();\r\n }\r\n\r\n // Save to preference store\r\n this.saveToPrefrenceStore('secondaryMetric', selection.id);\r\n\r\n if (this.inlineChartColumnMerticsEnabled) {\r\n this.setState({\r\n secondaryMetricSelectionId: selection.id,\r\n }, () => {\r\n this.fetchPerformanceData(\r\n this.state.dateRange,\r\n this.state.granularitySelectionId\r\n );\r\n });\r\n } else {\r\n // Compute the new chart options\r\n const formattedHighChartOptions = this.getFormattedChartOptions(\r\n this.state.primaryMetricSelectionId,\r\n selection.id\r\n );\r\n\r\n this.setState({\r\n secondaryMetricSelectionId: selection.id,\r\n formattedHighChartOptions,\r\n });\r\n }\r\n\r\n this.activities.chartActionActivity.trace(\r\n `Inline Chart secondary metric changed: ${selection.id}`,\r\n 'InlineChartAction'\r\n );\r\n };\r\n\r\n onGranularityChange = (selection) => {\r\n if (selection.id === this.state.granularitySelectionId) {\r\n // No op if selection is same granularity as currently set.\r\n return;\r\n }\r\n\r\n if (this.props.perfMarker) {\r\n this.actionPerfMarker = this.props.perfMarker.createChild('Inline_Chart_Action', { isActiveChild: false });\r\n this.actionPerfMarker.willInit();\r\n }\r\n\r\n // Save to preference store\r\n const granularityEnum = this.chartDataAdapter.getGranularityEnum(selection.id);\r\n this.saveToPrefrenceStore('granularity', granularityEnum);\r\n\r\n if (this.props.gridDataSource) {\r\n this.setState({\r\n granularitySelectionId: selection.id,\r\n chartLabelData: {},\r\n }, () => {\r\n this.fetchPerformanceAndFluctuation(\r\n this.state.dateRange,\r\n this.state.granularitySelectionId\r\n );\r\n });\r\n } else {\r\n this.setState({\r\n granularitySelectionId: selection.id,\r\n chartLabelData: {},\r\n });\r\n }\r\n\r\n this.activities.chartActionActivity.trace(\r\n `Inline Chart granularity changed: ${selection.id}`,\r\n 'InlineChartAction'\r\n );\r\n };\r\n\r\n onMovingAverageChange = (event) => {\r\n if (this.props.perfMarker) {\r\n this.actionPerfMarker = this.props.perfMarker.createChild('Inline_Chart_Action', { isActiveChild: false });\r\n this.actionPerfMarker.willInit();\r\n }\r\n\r\n // Save to preference store\r\n this.saveToPrefrenceStore('showMovingAverage', event.target.checked);\r\n\r\n // Compute the new chart options\r\n const formattedHighChartOptions = this.getFormattedChartOptions(\r\n this.state.primaryMetricSelectionId,\r\n this.state.secondaryMetricSelectionId\r\n );\r\n\r\n if (this.props.gridDataSource) {\r\n this.setState({\r\n isMovingAverageEnabled: event.target.checked,\r\n formattedHighChartOptions,\r\n }, () => {\r\n this.fetchPerformanceAndFluctuation(\r\n this.state.dateRange,\r\n this.state.granularitySelectionId\r\n );\r\n });\r\n } else {\r\n this.setState({\r\n isMovingAverageEnabled: event.target.checked,\r\n formattedHighChartOptions,\r\n });\r\n }\r\n\r\n this.activities.chartActionActivity.trace(\r\n `Inline Chart moving average changed: ${event.target.checked}`,\r\n 'InlineChartAction'\r\n );\r\n };\r\n\r\n onToggleLabel = ({ isShowStartDateLabel, isShowEndDateLabel }) => {\r\n this.setState({\r\n isShowStartDateLabel,\r\n isShowEndDateLabel,\r\n });\r\n };\r\n\r\n onChartRendered = (chart) => {\r\n this.activities.chartActionActivity.trace('Inline Chart chart render finished', 'InlineChartAction');\r\n this.chart = chart;\r\n this.resizeChart();\r\n\r\n if (this.props.options.isFluctuationsEnabled &&\r\n !(this.isFilterActive()) &&\r\n this.state.granularitySelectionId === 1 &&\r\n this.state.isDataAvailable &&\r\n this.fluctuationProm) {\r\n this.fluctuationProm.then((result) => {\r\n if (this.chart &&\r\n this.chart.series) {\r\n this.setState({\r\n chartMarginRight: chart.marginRight,\r\n });\r\n if (this.panelRef) {\r\n this.panelRef.onChartUpdated(chart);\r\n }\r\n this.activities.chartActionActivity.trace(`Chart shifted: ${this.state.chartMarginRight}`, 'InlineChartAction');\r\n }\r\n\r\n this.activities.chartActionActivity.trace(`Fluctuation data received ${result.length}`, 'InlineChartAction');\r\n this.activities.chartActionActivity.trace(`Inline Chart Shown with Fluctuations Date: ${JSON.stringify(_.extend(this.state.chartLabelData, {\r\n entity: this.props.options.entityType,\r\n startDate: this.chartFormatter.getRawDate(this.state.dateRange.start, this.i18n),\r\n endDate: this.chartFormatter.getRawDate(this.state.dateRange.end, this.i18n),\r\n }))}`, 'FluctuationAction');\r\n });\r\n } else {\r\n this.isFlucRenderNotRequired = true;\r\n if (!(this.state.isShowStartDateLabel) ||\r\n !(this.state.isShowEndDateLabel)) {\r\n this.setState({\r\n flucData: [],\r\n isShowStartDateLabel: true,\r\n isShowEndDateLabel: true,\r\n });\r\n }\r\n }\r\n\r\n if (this.actionPerfMarker && !this.actionPerfMarker.isDone) {\r\n this.actionPerfMarker.done();\r\n }\r\n };\r\n\r\n getFormattedChartOptions = (primaryMetricId, secondaryMetricId) => {\r\n const { seriesColors } = this.props.options;\r\n const primaryMetric =\r\n this.chartDataAdapter.getMetricItem(primaryMetricId);\r\n const secondaryMetric =\r\n this.chartDataAdapter.getMetricItem(secondaryMetricId);\r\n\r\n const highChartData = this.chartFormatter.getFormattedHighChart(\r\n this.chartDataAdapter,\r\n {\r\n primaryMetric,\r\n secondaryMetric,\r\n granularityId: this.state.granularitySelectionId,\r\n isMovingAverageOn: this.state.isMovingAverageEnabled && this.isMovingAverageVisible(),\r\n chartWidth: this.state.chartWidth,\r\n seriesColors,\r\n },\r\n this.chartData\r\n );\r\n\r\n merge(highchartsStyle, highchartsStyleVNextOverride);\r\n\r\n return merge(highChartData, highchartsStyle);\r\n };\r\n\r\n getChartElement() {\r\n let noDataOrLoading = this.state.isLoading ? (\r\n \r\n ) : null;\r\n\r\n /* eslint-disable react/no-danger */\r\n if (_.isUndefined(this.state.granularitySelectionId) ||\r\n (!this.state.isDataAvailable && !this.state.isLoading)) {\r\n noDataOrLoading = (\r\n \r\n \r\n
);\r\n }\r\n\r\n this.chartLabelRef = React.createRef();\r\n const chartLabelComponent = ();\r\n\r\n const chart = this.state.isDataAvailable && !this.state.isLoading ? (\r\n \r\n \r\n {chartLabelComponent}\r\n
)\r\n : (\r\n \r\n {noDataOrLoading}\r\n
);\r\n\r\n return chart;\r\n }\r\n\r\n getFluctuationMetric = (flucType) => {\r\n switch (flucType) {\r\n case FluctuationTypeKey.Impression:\r\n return ImpressionsID;\r\n case FluctuationTypeKey.Click:\r\n return ClicksID;\r\n case FluctuationTypeKey.Spend:\r\n return SpentID;\r\n case FluctuationTypeKey.Conversion:\r\n return this.IsColumnConversionEnabled && this.IsPartialConversionsEnabled ?\r\n PartialConvID : ConvID;\r\n default:\r\n this.activities.chartActionActivity\r\n .error(\r\n `Invalid Fluctuation Type: ${flucType}`,\r\n 'FluctuationError'\r\n );\r\n return null;\r\n }\r\n };\r\n\r\n setFluctuationFlag(fluxMetrics) {\r\n _.each(this.primaryMetricsList, (metric) => {\r\n /* eslint-disable no-param-reassign */\r\n // fix the bug drop down did not show the bulb icon\r\n metric.isFluctuation = metric.isFluctuation || _.contains(fluxMetrics, metric.id);\r\n });\r\n _.each(this.secondaryMetricsList, (metric) => {\r\n /* eslint-disable no-param-reassign */\r\n metric.isFluctuation = metric.isFluctuation || _.contains(fluxMetrics, metric.id);\r\n });\r\n }\r\n\r\n getMetricsName() {\r\n const { primaryMetricSelectionId, secondaryMetricSelectionId } = this.state;\r\n const metrics = this.chartDataAdapter.getMetricsQuery(\r\n primaryMetricSelectionId,\r\n secondaryMetricSelectionId\r\n );\r\n return metrics;\r\n }\r\n\r\n resizeChart(width) {\r\n if (width && this.chart && this.chart.options) {\r\n this.chart.setSize(width, null, false);\r\n }\r\n\r\n // always update state after chart is resized\r\n // so fluctuation panel can update itself based on new chart size\r\n if ((width > 0) &&\r\n width !== this.state.chartWidth) {\r\n this.setState({\r\n chartWidth: width,\r\n });\r\n }\r\n }\r\n\r\n initializeInstrumentation = () => {\r\n this.props.options.instrumentation.addScenario(instrumentationSchema);\r\n\r\n const inlineChartScenario = this.props.options.instrumentation.inlineChart.create();\r\n this.activities = {\r\n filterActivity: inlineChartScenario.inlineChartFilter.create(),\r\n chartActionActivity: inlineChartScenario.inlineChartAction.create(),\r\n chartErrorActivity: inlineChartScenario.inlineChartError.create(),\r\n };\r\n };\r\n\r\n toggleChartState(showChartState) {\r\n // Save to preference store\r\n this.saveToPrefrenceStore('showChart', showChartState);\r\n\r\n this.setState({\r\n isShowChart: showChartState,\r\n });\r\n this.activities.chartActionActivity.trace(`Inline Chart toggle show chart: ${showChartState}`, 'InlineChartAction');\r\n\r\n this.canceled = !showChartState;\r\n }\r\n\r\n updateState(period, props, preferences, granularityId) {\r\n let primaryMetricSelectionId;\r\n if (_.isNumber(props.options.defaultPrimaryMetric)) {\r\n primaryMetricSelectionId = props.options.defaultPrimaryMetric;\r\n } else if (_.isNumber(preferences.primaryMetricId)) {\r\n primaryMetricSelectionId = preferences.primaryMetricId;\r\n }\r\n return {\r\n isShowChart: props.isShowChart && preferences.showChart,\r\n isMovingAverageEnabled: preferences.showMovingAverage,\r\n primaryMetricSelectionId,\r\n secondaryMetricSelectionId: preferences.secondaryMetricId,\r\n granularitySelectionId: granularityId,\r\n dateRange: period,\r\n isPopEnabled: !!period.compared,\r\n };\r\n }\r\n\r\n // Normalize preference and default back if certain preference config is no longer available\r\n normalizeWithAvailable(preferences) {\r\n const normalizedPreferences = preferences;\r\n\r\n // Check and update primary metric selection\r\n if (!_.find(this.primaryMetricsList, { id: preferences.primaryMetricId })) {\r\n normalizedPreferences.primaryMetricId = Defaults.primaryMetricId;\r\n this.saveToPrefrenceStore('primaryMetric', normalizedPreferences.primaryMetricId);\r\n }\r\n\r\n // Check and update secondary metric selection\r\n if (!_.find(this.secondaryMetricsList, { id: preferences.secondaryMetricId })) {\r\n normalizedPreferences.secondaryMetricId = Defaults.secondaryMetricId;\r\n this.saveToPrefrenceStore('secondaryMetric', normalizedPreferences.secondaryMetricId);\r\n }\r\n\r\n if (this.props.options.disableMovingAverage) {\r\n preferences.showMovingAverage = false;\r\n }\r\n\r\n return normalizedPreferences;\r\n }\r\n\r\n saveToPrefrenceStore(suffix, value) {\r\n const prefObj = {};\r\n prefObj[`${this.props.options.pageContext.CurrentTabId}-${suffix}`] =\r\n value;\r\n this.props.options.preference.setInlineChartInfo(prefObj);\r\n }\r\n\r\n isMovingAverageVisible(\r\n granularityId = this.state.granularitySelectionId,\r\n popEnabled = this.state.isPopEnabled\r\n ) {\r\n if (this.props.options.disableMovingAverage) {\r\n return false;\r\n }\r\n return (!popEnabled) &&\r\n (granularityId === Defaults.graunlarityId);\r\n }\r\n\r\n isFilterActive() {\r\n const filterString = this.props.filter && this.props.filter.odataV4 ?\r\n this.props.filter.odataV4({ ignoreCase: false }) : '';\r\n return (!!filterString);\r\n }\r\n\r\n isFilterChanged(oldFilter, newFilter) {\r\n const oldFilterString = oldFilter && oldFilter.odataV4 ?\r\n oldFilter.odataV4({ ignoreCase: false }) : '';\r\n const newFilterString = newFilter && newFilter.odataV4 ?\r\n newFilter.odataV4({ ignoreCase: false }) : '';\r\n\r\n const result = oldFilterString !== newFilterString;\r\n return result;\r\n }\r\n\r\n isCustomFilterChanged(oldFilter, newFilter) {\r\n if (!oldFilter && !newFilter) {\r\n return false;\r\n }\r\n\r\n return !_.isEqual(oldFilter, newFilter);\r\n }\r\n\r\n proceedFluctuation() {\r\n // Allow fluctuations only for Account and Campaign levels.\r\n // At campaign level, restrict to pilot users only.\r\n return (this.props.options.pageContext.CurrentCampaign &&\r\n !this.props.options.pageContext.CurrentAdGroup) ||\r\n (!this.props.options.pageContext.CurrentCampaign &&\r\n !this.props.options.pageContext.CurrentAdGroup);\r\n }\r\n\r\n updateFlucData(data) {\r\n this.setState({\r\n flucData: data,\r\n });\r\n }\r\n\r\n updateLoadingStatus(loading) {\r\n this.setState({\r\n fluctuationLoading: loading,\r\n });\r\n }\r\n\r\n fetchFluctuation(dateRange, granularityId) {\r\n if (this.props.options.isFluctuationsEnabled) {\r\n this.activities.chartActionActivity.trace(\r\n `Fluctuation pilot enabled:\r\n user type ${this.props.options.pageContext.CurrentUser.IsInternal ? 'internal' : 'external'}`,\r\n 'InlineChartAction'\r\n );\r\n }\r\n\r\n if (!this.proceedFluctuation()) {\r\n return;\r\n }\r\n\r\n const isFilterActive = this.isFilterActive();\r\n this.activities.chartActionActivity.trace(\r\n `InlineChart filter: ${isFilterActive}`,\r\n 'InlineChartAction'\r\n );\r\n\r\n // Fetch fluctuations only if supported and granularity is 'Day'.\r\n // surfacingChannelId 0:default, 1:campaign, 2:adgroup, 3:keyword, 4:ad, 5:campaign_grid_overall\r\n if (granularityId === Defaults.graunlarityId && !isFilterActive) {\r\n if (this.props.options.isFluctuationsEnabled) {\r\n const FlucService = this.props.options.fluctuationService;\r\n const flucServiceIns = new FlucService({\r\n token: this.props.options.token,\r\n options: {\r\n userId: this.props.options.pageContext.CurrentUser.Id,\r\n customerId: this.props.options.pageContext.CurrentCustomer.Id,\r\n accountId: this.props.options.pageContext.CurrentAccount.Id,\r\n campaignId: this.props.options.pageContext.CurrentCampaign &&\r\n this.props.options.pageContext.CurrentCampaign.Id,\r\n granularity: Defaults.granularity,\r\n startDate: this.formatDateString(dateRange.start),\r\n endDate: this.formatDateString(dateRange.end),\r\n surfacingChannelId: this.props.options.entityType === 'Campaign' ? 1 : 0,\r\n isFluctuationsExperiementEnabled: this.props.options.isFluctuationsExperiementEnabled,\r\n },\r\n });\r\n\r\n this.logSummary();\r\n this.fluctuationProm = flucServiceIns.findAll({\r\n withoutOpporCheck: this.withoutOpporCheck,\r\n });\r\n this.fluctuationProm.then((result) => {\r\n this.setState({\r\n flucData: result,\r\n });\r\n this.activities.chartActionActivity.trace('Fluctuation Request Finished', 'InlineChartFetch');\r\n }, (errorResult) => {\r\n this.activities.chartErrorActivity.trace(\r\n `Fluctuation Request Failed ${JSON.stringify(errorResult)}`,\r\n 'InlineChartFetch'\r\n );\r\n this.setState({\r\n flucData: [],\r\n });\r\n });\r\n }\r\n }\r\n }\r\n\r\n fetchPerformanceAndFluctuation(dateRange, granularityId, useGridData) {\r\n this.fetchPerformanceData(dateRange, granularityId, useGridData).then(() => {\r\n if (this.perfMarker) {\r\n this.perfMarker.willRender();\r\n }\r\n\r\n if (this.props.onFetchPerfData) {\r\n this.props.onFetchPerfData();\r\n }\r\n });\r\n this.fetchFluctuation(dateRange, granularityId);\r\n }\r\n\r\n fetchPerformanceData = (dateRange, granularityId, useGridData) => {\r\n const loading = () => {\r\n this.setState({\r\n isLoading: true,\r\n isDataAvailable: false,\r\n });\r\n };\r\n\r\n this.activities.chartActionActivity.trace('Inline Chart Request Started', 'InlineChartFetch');\r\n\r\n const context = {\r\n filter: this.props.filter,\r\n period: dateRange,\r\n granularity: this.chartDataAdapter.getGranularityEnum(granularityId),\r\n // Moving average needs to be got only if Pop is not shown and granularity is 'day'\r\n isMovingAverageOn:\r\n this.isMovingAverageVisible(\r\n granularityId,\r\n this.state.popEnabled\r\n ) && this.state.isMovingAverageEnabled,\r\n refreshGridData: false,\r\n currentEntity: this.props.options.entityType,\r\n metric: this.getMetricsName(),\r\n };\r\n\r\n // Filter service, filter object includes circular reference causing JSON stringify to break.\r\n // Hence storing only filter query string in the log.\r\n const logContext = {\r\n filterQuery: context.filter ? context.filter.query : '',\r\n period: context.period,\r\n granularity: context.granularity,\r\n movingAverage: context.isMovingAverageOn,\r\n entity: context.currentEntity,\r\n campaignId: this.props.options.pageContext.CurrentCampaign &&\r\n this.props.options.pageContext.CurrentCampaign.Id,\r\n metric1: this.state.primaryMetricSelectionId,\r\n metric2: this.state.secondaryMetricSelectionId,\r\n isInternal: this.props.options.pageContext.CurrentUser.IsInternal,\r\n };\r\n this.activities.chartActionActivity.trace(`Fetch Performance Data: ${JSON.stringify(logContext)}`, 'InlineChartAction');\r\n\r\n if (this.actionPerfMarker) {\r\n this.actionPerfMarker.willFetchData();\r\n }\r\n\r\n return new Promise((resolve) => {\r\n const successCallback = (result) => {\r\n if (this.actionPerfMarker) {\r\n this.actionPerfMarker.willRender();\r\n }\r\n\r\n if (!this.canceled) {\r\n this.activities.chartActionActivity.trace('Inline Chart Request Finished', 'InlineChartFetch');\r\n const data = this.chartDataAdapter.prepareData(result);\r\n\r\n if (!_.every(data, this.chartDataAdapter.isPrimaryDataAvailable)) {\r\n // No preformance time series data\r\n this.setState({\r\n isLoading: false,\r\n isDataAvailable: false,\r\n });\r\n resolve();\r\n return;\r\n }\r\n\r\n // Cache the chart raw data.\r\n this.chartData = data;\r\n\r\n // Align chart series.\r\n if (_.every(data, this.chartDataAdapter.isComparisonDataAvailable)) {\r\n this.chartDataAdapter.alignDataForComparison(\r\n data,\r\n this.chartDataAdapter.getGranularityEnum(granularityId)\r\n );\r\n }\r\n\r\n // Update chart label based on chart data and current granularity\r\n const chartLabel =\r\n this.chartDataAdapter.getChartLabel(\r\n data,\r\n granularityId\r\n );\r\n\r\n const formattedHighChartOptions = this.getFormattedChartOptions(\r\n this.state.primaryMetricSelectionId,\r\n this.state.secondaryMetricSelectionId\r\n );\r\n\r\n this.setState({\r\n formattedHighChartOptions,\r\n isLoading: false,\r\n isDataAvailable: true,\r\n chartLabelData: chartLabel,\r\n });\r\n resolve();\r\n }\r\n };\r\n const errorCallback = (errorResult) => {\r\n this.activities.chartErrorActivity.trace(\r\n `PerformanceTimeSeries Request Failed ${JSON.stringify(errorResult)}`,\r\n 'InlineChartFetch'\r\n );\r\n this.setState({\r\n isLoading: false,\r\n isDataAvailable: false,\r\n });\r\n };\r\n if (useGridData &&\r\n typeof this.props.gridDataSource.onLoading === 'function' &&\r\n typeof this.props.gridDataSource.getChartData === 'function'\r\n ) {\r\n this.props.gridDataSource.onLoading(loading);\r\n this.props.gridDataSource.getChartData(successCallback, errorCallback);\r\n } else {\r\n loading();\r\n this.props.dataSource.findAll(context)\r\n .then((result) => {\r\n if (this.props.gridDataSource) {\r\n this.props.gridDataSource.updateChartData(result);\r\n }\r\n return result;\r\n })\r\n .then(successCallback, errorCallback);\r\n }\r\n });\r\n };\r\n\r\n formatDateString(dateStr) {\r\n const leftPadding = s => ((s.length === 1) ? `0${s}` : s);\r\n const dt = new Date(Date.parse(dateStr));\r\n const year = `${dt.getFullYear()}`;\r\n const month = `${dt.getMonth() + 1}`;\r\n const day = `${dt.getDate()}`;\r\n\r\n return `${year}-${leftPadding(month)}-${leftPadding(day)}`;\r\n }\r\n\r\n dismissFluc = ({ date, fluctuation }) => {\r\n const flucData = this.state.flucData.map((item) => {\r\n const flucItem = item;\r\n if (flucItem.Date === date) {\r\n flucItem.FluctuationsPerDate = _.without(\r\n flucItem.FluctuationsPerDate,\r\n _.findWhere(flucItem.FluctuationsPerDate, {\r\n UniqueId: fluctuation.UniqueId,\r\n })\r\n );\r\n }\r\n return flucItem;\r\n });\r\n\r\n this.setState({\r\n flucData,\r\n });\r\n };\r\n\r\n logSummary = () => {\r\n const logContext = {\r\n entity: this.props.options.entityType,\r\n campaignId: this.props.options.pageContext.CurrentCampaign &&\r\n this.props.options.pageContext.CurrentCampaign.Id,\r\n metric1: this.state.primaryMetricSelectionId,\r\n metric2: this.state.secondaryMetricSelectionId,\r\n metricRecommend: this.state.recommendMetricSelectionId,\r\n isInternal: this.props.options.pageContext.CurrentUser.IsInternal,\r\n };\r\n\r\n this.activities.chartActionActivity.trace('Fluctuation Request Started', 'InlineChartFetch');\r\n this.activities.chartActionActivity.trace(`Chart Summary: ${JSON.stringify(logContext)}`, 'InlineChartAction');\r\n };\r\n\r\n generateFlucData = () => (this.state.flucData ? this.state.flucData.map((item) => {\r\n const timeWithoutTimezone = item.Date.substring(0, 19);\r\n const availableFlucMetrics = [];\r\n let FluctuationsPerDate = [];\r\n let withoutOpporCheck = false;\r\n if (item.FluctuationsPerDate) {\r\n _.each(item.FluctuationsPerDate, (flucItem) => {\r\n availableFlucMetrics.push(this.getFluctuationMetric(flucItem.FluctuationType));\r\n });\r\n ({ FluctuationsPerDate } = item);\r\n } else if (item.FluctuationList) {\r\n FluctuationsPerDate = _.map(item.FluctuationList, (flucItem) => {\r\n availableFlucMetrics.push(this.getFluctuationMetric(flucItem.FluctuationType));\r\n return {\r\n FluctuationType: flucItem.FluctuationType,\r\n UniqueId: flucItem.FluctuationId,\r\n RootCauses: _.map(flucItem.RootCauses, cause => ({ Message: { MessageId: cause } })),\r\n };\r\n });\r\n withoutOpporCheck = true;\r\n }\r\n\r\n FluctuationsPerDate = FluctuationsPerDate.filter((fluc) => {\r\n const flucMetricId = this.getFluctuationMetric(fluc.FluctuationType);\r\n return flucMetricId === this.state.primaryMetricSelectionId ||\r\n flucMetricId === this.state.secondaryMetricSelectionId ||\r\n flucMetricId === this.state.recommendMetricSelectionId;\r\n });\r\n\r\n this.setFluctuationFlag(availableFlucMetrics);\r\n return {\r\n Date: item.Date,\r\n formattedDate: this.chartDataAdapter.formatDate(\r\n timeWithoutTimezone,\r\n this.state.granularitySelectionId\r\n ),\r\n FluctuationsPerDate,\r\n withoutOpporCheck,\r\n };\r\n }) : null);\r\n\r\n render() {\r\n const { options } = this.props;\r\n const granularityList = this.chartDataAdapter.getGranularitiesList();\r\n const primarySelection =\r\n this.chartDataAdapter.getMetricItem(this.state.primaryMetricSelectionId);\r\n const secondarySelection =\r\n this.chartDataAdapter.getMetricItem(this.state.secondaryMetricSelectionId);\r\n const granularitySelection =\r\n this.chartDataAdapter.getGranularitySelection(this.state.granularitySelectionId);\r\n\r\n const chart = this.getChartElement();\r\n\r\n const granularityOptions = {\r\n granularityList,\r\n selectedItem: granularitySelection,\r\n selectionChangeCallback: this.onGranularityChange,\r\n };\r\n\r\n const flucPanelEnabled = this.props.options.isFluctuationsEnabled &&\r\n !(this.isFilterActive()) &&\r\n this.state.granularitySelectionId === 1 &&\r\n this.state.isDataAvailable;\r\n\r\n this.activities.chartActionActivity.trace('Chart Render finishes', 'InlineChartAction');\r\n this.activities.chartActionActivity.trace(`Chart Width: ${this.state.chartWidth}`, 'InlineChartAction');\r\n\r\n this.panelRef = React.createRef();\r\n\r\n const primaryMetricOptions = {\r\n metricsList: this.primaryMetricsList,\r\n selectedItem: primarySelection,\r\n percentage: this.state.primaryMetricPercentage,\r\n selectionChangeCallback: this.onPrimaryMetricChange,\r\n };\r\n\r\n const secondaryMetricOptions = {\r\n metricsList: this.secondaryMetricsList,\r\n selectedItem: secondarySelection,\r\n percentage: this.state.secondaryMetricPercentage,\r\n selectionChangeCallback: this.onSecondaryMetricChange,\r\n };\r\n\r\n return this.state.isShowChart ? (\r\n \r\n \r\n {!this.props.options.hideChartPanel &&
}\r\n
\r\n {chart}\r\n {flucPanelEnabled ?\r\n { this.panelRef = r; }}\r\n fluctuations={this.generateFlucData()}\r\n updateFlucData={(data) => { this.updateFlucData(data); }}\r\n updateLoadingStatus={loading => this.updateLoadingStatus(loading)}\r\n chart={this.chart}\r\n primaryMetricId={this.state.primaryMetricSelectionId}\r\n secondaryMetricId={this.state.secondaryMetricSelectionId}\r\n onPrimaryMetricChange={this.onPrimaryMetricChange}\r\n chartLabelRef={this.chartLabelRef}\r\n chartLabelStatus={{\r\n isShowStartDateLabel: this.state.isShowStartDateLabel,\r\n isShowEndDateLabel: this.state.isShowEndDateLabel,\r\n }}\r\n onFlucDismiss={this.dismissFluc}\r\n onChartLabelToggle={this.onToggleLabel}\r\n dateRange={{\r\n startDate: this.state.dateRange.start,\r\n endDate: this.state.dateRange.end,\r\n }}\r\n deps={{\r\n i18n: this.props.i18n,\r\n context: this.props.options.pageContext,\r\n instrumentation: this.props.options.instrumentation,\r\n token: this.props.options.token,\r\n imagePath: this.props.options.imagePath,\r\n }}\r\n /> : null}\r\n
\r\n