\r\n \r\n {label}\r\n \r\n
\r\n );\r\n}\r\n\r\nFormGroup.propTypes = {\r\n children: PropTypes.element.isRequired,\r\n id: PropTypes.string,\r\n label: PropTypes.string.isRequired,\r\n labelId: PropTypes.string,\r\n};\r\n\r\nFormGroup.defaultProps = {\r\n id: null,\r\n labelId: undefined,\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport { CampaignuiBaseColumn } from '@bingads-webui-campaign/campaignui-base-column';\r\nimport { InlineDownloadEmailFrequencyEditor } from '@bingads-webui-campaign/inline-download-email-frequency-editor';\r\nimport { InlineDownloadCronI18n } from '@bingads-webui-campaign/inline-download-cron-i18n';\r\nimport { SchemaI18n } from '@bingads-webui-universal/schema-i18n';\r\nimport reactPrompt from '../../inline-edit/react-prompt';\r\nimport { getCurrentUserId } from '../../util';\r\nimport FormGroup from './form-group';\r\n\r\nexport default class EmailFrequencyColumn extends CampaignuiBaseColumn {\r\n constructor(options) {\r\n const {\r\n allUsersType,\r\n config,\r\n view,\r\n loadUsers,\r\n } = options;\r\n const i18n = options.legacyI18n || options.i18n;\r\n const cronI18n = new InlineDownloadCronI18n({ i18n });\r\n\r\n super({\r\n name: 'EmailFrequency',\r\n property: ['NotificationDeliveryOption', 'Cron', 'StartTime', 'EndTime'],\r\n title: i18n.getString('InlineDownloadReports_Column_EmailFrequency'),\r\n });\r\n\r\n this.i18n = i18n;\r\n this.cronI18n = cronI18n;\r\n this.view = view;\r\n\r\n const Editor = props => (\r\n \r\n {children}\r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\n\r\nInsightDashboardOff.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n turnOnInsight: PropTypes.func,\r\n edm: PropTypes.func.isRequired,\r\n scope: PropTypes.shape({\r\n values: PropTypes.shape({\r\n tagId: PropTypes.string,\r\n }),\r\n }).isRequired,\r\n};\r\n\r\nInsightDashboardOff.defaultProps = {\r\n turnOnInsight: () => {},\r\n};\r\n\r\nexport default InsightDashboardOff;\r\n","import _ from 'underscore';\r\n\r\nexport const defaultNoDataNumber = -42;\r\n\r\nconst OperatorMap = {\r\n $StartsWith: 'StartsWith',\r\n $Equals: 'Equals',\r\n $Contains: 'Contains',\r\n $EndsWith: 'EndsWith',\r\n};\r\n\r\n// parse out the country code from \"Enum.Country'Country'\"\r\nconst parseCountryCode = (country) => {\r\n const countryName = country.split(\"Enum.Country'\")[1];\r\n const trimedCountryName = countryName.substring(0, countryName.length - 1);\r\n return trimedCountryName;\r\n};\r\n\r\n// parse out device code from \"Enum.Device'PC'\"\r\nconst parseDeviceCode = (device) => {\r\n const deviceCode = device.split(\"Enum.Device'\")[1];\r\n const trimedDeviceCode = deviceCode.substring(0, deviceCode.length - 1);\r\n return trimedDeviceCode;\r\n};\r\n\r\nexport const createPayload = (filter, startDate, endDate, timeZone) => {\r\n const filterPayload = {\r\n StartDate: startDate,\r\n EndDate: endDate,\r\n TimeZoneId: timeZone,\r\n CountryFilter: [],\r\n DeviceFilter: [],\r\n PageUrlFilters: [],\r\n };\r\n\r\n if (!filter || _.isEmpty(filter)) {\r\n filterPayload.CountryFilter = filterPayload.CountryFilter.join(',');\r\n filterPayload.DeviceFilter = filterPayload.DeviceFilter.join(',');\r\n return filterPayload;\r\n }\r\n\r\n const filterItemKey = Object.keys(filter)[0];\r\n const filterItems = filterItemKey === '$and' ? filter[filterItemKey] : [filter];\r\n\r\n _.each(filterItems, (item) => {\r\n // get key of object item\r\n const key = Object.keys(item)[0];\r\n const value = item[key];\r\n if (key === 'VisitedUrl') {\r\n const operator = Object.keys(value)[0];\r\n filterPayload.PageUrlFilters.push({\r\n Operator: OperatorMap[operator],\r\n Value: value[operator],\r\n });\r\n } else if (key === 'Country') {\r\n _.each(value.$in, (v) => {\r\n const countryCode = parseCountryCode(v);\r\n filterPayload.CountryFilter.push(countryCode);\r\n });\r\n } else {\r\n _.each(value.$in, (v) => {\r\n const deviceCode = parseDeviceCode(v);\r\n filterPayload.DeviceFilter.push(deviceCode);\r\n });\r\n }\r\n });\r\n\r\n filterPayload.CountryFilter = filterPayload.CountryFilter.join(',');\r\n filterPayload.DeviceFilter = filterPayload.DeviceFilter.join(',');\r\n\r\n return filterPayload;\r\n};\r\n\r\nexport const formatResponse = (response, itemName, valueName) => {\r\n if (!response) {\r\n return [];\r\n }\r\n\r\n const data = _.map(response, (value) => {\r\n const item = value[itemName];\r\n const itemValue = value[valueName];\r\n return {\r\n item,\r\n count: itemValue,\r\n };\r\n });\r\n\r\n return data;\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { HelpPopup } from '@bingads-webui-react/help-popup';\r\nimport { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';\r\nimport { defaultNoDataNumber } from '../data/util';\r\n\r\nconst MetricBlock = ({ metricData }) => {\r\n const {\r\n underlineColor,\r\n title,\r\n helpId,\r\n unit,\r\n count,\r\n isLoading,\r\n } = metricData;\r\n return (\r\n \r\n
\r\n\r\n {showModal && (\r\n \r\n 
\r\n
\r\n \r\n
\r\n {pageText.title}
\r\n\r\n
\r\n {pageText.description}
\r\n\r\n
\r\n \r\n { showModal(); }} />\r\n
\r\n \r\n {pageText.modalHeader}\r\n
\r\n \r\n {`${pageText.modalText} `}\r\n \r\n {i18n.getString(_TL_('Learn More'))}\r\n \r\n
\r\n \r\n { hideModal(); enableAllTags(); }} text={i18n.getString(_TL_('Confirm'))} />\r\n
\r\n \r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n {title}\r\n \r\n
\r\n \r\n {isLoading &&
\r\n \r\n {unit}\r\n
\r\n \r\n );\r\n};\r\n\r\nMetricBlock.propTypes = {\r\n metricData: PropTypes.shape({\r\n underlineColor: PropTypes.string,\r\n title: PropTypes.string,\r\n helpId: PropTypes.string,\r\n unit: PropTypes.string,\r\n count: PropTypes.number,\r\n }),\r\n isLoading: PropTypes.bool,\r\n};\r\n\r\nMetricBlock.defaultProps = {\r\n metricData: {\r\n underlineColor: 'grey',\r\n title: 'default title',\r\n helpId: '',\r\n unit: 'default unit',\r\n count: 42,\r\n },\r\n isLoading: false,\r\n};\r\n\r\nexport default MetricBlock;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { getStyles } from '../../styles';\r\nimport { useTotalSessionCountData } from '../data/useTotalSessionCountData';\r\nimport { useAverageActiveTimeData } from '../data/useAverageActiveTimeData';\r\nimport { useQuickbacksData } from '../data/useQuickData';\r\nimport MetricBlock from './metric-block';\r\nimport { defaultNoDataNumber } from '../data/util';\r\n\r\nconst Metrics = {\r\n totalSessionCount: {\r\n title: _TL_('Total session count'),\r\n unit: _TL_('count'),\r\n helpId: 'pop_BA_UET_Insights_TotalSessionCount',\r\n underlineColor: '#00188F',\r\n },\r\n AverageActiveTime: {\r\n title: _TL_('Average active time'),\r\n unit: _TL_('seconds'),\r\n helpId: 'pop_BA_UET_Insights_AvgActiveTime',\r\n underlineColor: '#E3008C',\r\n },\r\n Quickbacks: {\r\n title: _TL_('Quickbacks'),\r\n unit: _TL_('count'),\r\n helpId: 'pop_BA_UET_Insights_Quickbacks',\r\n underlineColor: '#4B003F',\r\n },\r\n};\r\n\r\n\r\nconst MetricGroup = (props) => {\r\n const {\r\n i18n, fetchTileData, instrumentation, isFilterReady,\r\n } = props;\r\n const classes = useDefaultStyles(getStyles);\r\n\r\n const {\r\n data: totalSessionCountData,\r\n isLoading: isTotelSessionCountDataLoading,\r\n } = useTotalSessionCountData({\r\n fetchTileData, instrumentation, isFilterReady,\r\n });\r\n\r\n const {\r\n data: AverageActiveTimeData,\r\n isLoading: isAverageActiveTimeDataLoading,\r\n } = useAverageActiveTimeData({\r\n fetchTileData, instrumentation, isFilterReady,\r\n });\r\n\r\n const {\r\n data: QuickbacksData,\r\n isLoading: isQuickbacksDataLoading,\r\n } = useQuickbacksData({\r\n fetchTileData, instrumentation, isFilterReady,\r\n });\r\n\r\n const isAverageTimeGreaterThan60 = AverageActiveTimeData !== defaultNoDataNumber && AverageActiveTimeData > 60;\r\n const AverageActiveTimeConverted = isAverageTimeGreaterThan60 ? Math.floor(AverageActiveTimeData / 60) : AverageActiveTimeData;\r\n const AverageActiveTimeUnit = isAverageTimeGreaterThan60 ? i18n.getString(_TL_('minutes')) : i18n.getString(_TL_('seconds'));\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nMetricGroup.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n};\r\n\r\nMetricGroup.defaultProps = {\r\n};\r\n\r\nexport default MetricGroup;\r\n","import { useEffect, useState, useCallback } from 'react';\r\nimport { defaultNoDataNumber } from './util';\r\n\r\nexport function useTotalSessionCountData({\r\n fetchTileData, instrumentation, isFilterReady,\r\n}) {\r\n const [data, setData] = useState(defaultNoDataNumber);\r\n const [isLoaded, setisLoaded] = useState(false);\r\n const [isLoading, setisLoading] = useState(false);\r\n\r\n const onError = useCallback((error) => {\r\n instrumentation.error('FetchFetchTotalSessionCount', error, 'Default.GetWebInsights');\r\n }, [instrumentation]);\r\n\r\n useEffect(() => {\r\n if (!fetchTileData) return undefined;\r\n setisLoading(true);\r\n setisLoaded(false);\r\n\r\n if (!isFilterReady) return undefined;\r\n\r\n const cachedFetchTileData = fetchTileData('TotalSessionCounts');\r\n instrumentation.log('FetchTotalSessionCount', 'Start fetching Total Session Count', 'Default.GetWebInsights');\r\n const totalSessionCountPromise = cachedFetchTileData.toPromise()\r\n .then((response) => {\r\n instrumentation.log('FetchTotalSessionCount', `Total Session Count fetched successfully res = ${response}`, 'Default.GetWebInsights');\r\n setData(response.TotalSessionCountsResult);\r\n });\r\n\r\n\r\n totalSessionCountPromise\r\n .catch(onError).finally(() => {\r\n setisLoading(false);\r\n setisLoaded(true);\r\n });\r\n\r\n return () => {\r\n cachedFetchTileData.invalidate();\r\n };\r\n }, [fetchTileData, instrumentation, isFilterReady, onError]);\r\n\r\n return {\r\n data,\r\n isLoaded,\r\n isLoading,\r\n };\r\n}\r\n","import { useEffect, useState, useCallback } from 'react';\r\nimport { defaultNoDataNumber } from './util';\r\n\r\nexport function useAverageActiveTimeData({\r\n fetchTileData, instrumentation, isFilterReady,\r\n}) {\r\n const [data, setData] = useState(defaultNoDataNumber);\r\n const [isLoaded, setisLoaded] = useState(false);\r\n const [isLoading, setisLoading] = useState(false);\r\n\r\n const onError = useCallback((error) => {\r\n instrumentation.error('FetchAverageActiveTime', error, 'Default.GetWebInsights');\r\n }, [instrumentation]);\r\n\r\n\r\n useEffect(() => {\r\n if (!fetchTileData) return undefined;\r\n\r\n setisLoading(true);\r\n setisLoaded(false);\r\n\r\n if (!isFilterReady) return undefined;\r\n\r\n const cachedFetchTileData = fetchTileData('AverageActiveTime');\r\n\r\n const AverageTimePromise = cachedFetchTileData.toPromise()\r\n .then((response) => {\r\n instrumentation.log('FetchAverageActiveTime', `Average Active Time fetched successfully res = ${response}`, 'Default.GetWebInsights');\r\n setData(response.AverageActiveTimeResult);\r\n });\r\n\r\n AverageTimePromise\r\n .catch(onError).finally(() => {\r\n setisLoading(false);\r\n setisLoaded(true);\r\n });\r\n\r\n return () => {\r\n cachedFetchTileData.invalidate();\r\n };\r\n }, [onError, fetchTileData, instrumentation, isFilterReady]);\r\n\r\n return {\r\n data,\r\n isLoaded,\r\n isLoading,\r\n };\r\n}\r\n","import { useEffect, useState, useCallback } from 'react';\r\nimport { defaultNoDataNumber } from './util';\r\n\r\nexport function useQuickbacksData({\r\n fetchTileData, instrumentation, isFilterReady,\r\n}) {\r\n const [data, setData] = useState(defaultNoDataNumber);\r\n const [isLoaded, setisLoaded] = useState(false);\r\n const [isLoading, setisLoading] = useState(true);\r\n\r\n const onError = useCallback((error) => {\r\n instrumentation.error('FetchQuickbacks', error, 'Default.GetWebInsights');\r\n }, [instrumentation]);\r\n\r\n\r\n useEffect(() => {\r\n if (!fetchTileData) return undefined;\r\n\r\n setisLoading(true);\r\n setisLoaded(false);\r\n\r\n if (!isFilterReady) return undefined;\r\n\r\n const cachedFetchTileData = fetchTileData('QuickBacks');\r\n\r\n const QuickBackPromise = cachedFetchTileData.toPromise()\r\n .then((response) => {\r\n instrumentation.log('FetchQuickbacks', `Quickbacks fetched successfully res = ${response}`, 'Default.GetWebInsights');\r\n setData(response.QuickBackResult);\r\n });\r\n\r\n QuickBackPromise\r\n .catch(onError).finally(() => {\r\n setisLoading(false);\r\n setisLoaded(true);\r\n });\r\n\r\n\r\n return () => {\r\n cachedFetchTileData.invalidate();\r\n };\r\n }, [onError, fetchTileData, instrumentation, isFilterReady]);\r\n\r\n return {\r\n data,\r\n isLoaded,\r\n isLoading,\r\n };\r\n}\r\n","import { getTheme } from '@fluentui/react';\r\n\r\nconst { palette } = getTheme();\r\n\r\n// TODO: Change to get color from palette\r\nexport const getTileStyles = () => {\r\n const cardContainer = {\r\n minHeight: '100px',\r\n width: '520px',\r\n border: 'solid 1px lightgray',\r\n fontSize: '14px',\r\n color: palette.neutralPrimary,\r\n display: 'grid',\r\n gridTemplateColumns: '100%',\r\n background: palette.white,\r\n 'box-shadow': '0px 0.3px 0.9px rgba(0, 0, 0, 0.108), 0px 1.6px 3.6px rgba(0, 0, 0, 0.132)',\r\n 'border-radius': '2px',\r\n };\r\n\r\n const wideCardContainer = {\r\n width: '100%',\r\n };\r\n\r\n const cardSection = {\r\n paddingLeft: '16px',\r\n paddingRight: '16px',\r\n };\r\n\r\n const headerBorder = {\r\n borderBottom: `solid 1px ${palette.neutralLight}`,\r\n };\r\n\r\n const headerContainer = {\r\n gridRow: '1',\r\n paddingTop: '12px',\r\n paddingBottom: '7px',\r\n height: '40px',\r\n };\r\n\r\n const headerContentContainer = {\r\n display: 'flex',\r\n };\r\n\r\n const dropdownContainer = {\r\n display: 'flex',\r\n };\r\n\r\n const closeButton = {\r\n color: palette.neutralSecondary,\r\n '&:hover': {\r\n color: palette.neutralSecondary,\r\n background: 'transparent',\r\n },\r\n };\r\n\r\n const contentContainer = {\r\n minHeight: '300px',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n marginTop: '0px',\r\n marginBottom: '8px',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n\r\n '& .chart-container': {\r\n width: '100%',\r\n },\r\n };\r\n\r\n const footerContainer = {\r\n gridRow: '3',\r\n 'margin-top': '8px',\r\n 'margin-bottom': '12px',\r\n };\r\n const footerContentContainer = {\r\n minHeight: '30px',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n '& a': {\r\n paddingLeft: '20px',\r\n paddingRight: '20px',\r\n fontWeight: 600,\r\n },\r\n };\r\n\r\n const footerButton = {\r\n backgroundColor: 'white',\r\n float: 'left',\r\n 'font-style': 'normal',\r\n 'font-weight': '600',\r\n 'font-size': '14px',\r\n 'line-height': '20px',\r\n };\r\n\r\n const footerLink = {\r\n textDecoration: 'underline',\r\n };\r\n\r\n const headerText = {\r\n fontWeight: '600',\r\n fontStyle: 'normal',\r\n display: 'inline-block',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n height: '100%',\r\n width: '100%',\r\n color: palette.neutralPrimary,\r\n };\r\n\r\n const smallHeaderText = {\r\n fontSize: '14px',\r\n 'line-height': '20px',\r\n whiteSpace: 'nowrap',\r\n };\r\n\r\n const largeHeaderText = {\r\n fontSize: '24px',\r\n };\r\n\r\n return {\r\n cardSection,\r\n headerBorder,\r\n headerContainer,\r\n headerContentContainer,\r\n headerText,\r\n smallHeaderText,\r\n largeHeaderText,\r\n dropdownContainer,\r\n closeButton,\r\n contentContainer,\r\n cardContainer,\r\n wideCardContainer,\r\n footerContainer,\r\n footerContentContainer,\r\n footerButton,\r\n footerLink,\r\n };\r\n};\r\n\r\nexport const cardStyles = {\r\n shimmerItem: { root: { marginBottom: '5px' } },\r\n};\r\n\r\n","import React, { Fragment } from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport { HighchartReactWrapper } from '@bingads-webui-react/highchart-react-wrapper';\r\n\r\nconst LegendGrid = ({ data }) => (\r\n {point.y:.0f}
',\r\n },\r\n };\r\n\r\n return (\r\n\r\n {\r\n _.map(dataToShow, item => (\r\n \r\n {item.name}\r\n
\r\n \r\n {\r\n shouldShowToggle &&\r\n setShouldShowMore(!shouldShowMore)}>\r\n {linkLabel}\r\n \r\n }\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default BarChart;\r\n\r\nBarChart.propTypes = {\r\n options: PropTypes.shape({\r\n height: PropTypes.number.isRequired,\r\n width: PropTypes.number.isRequired,\r\n data: PropTypes.arrayOf(PropTypes.shape({\r\n color: PropTypes.string.isRequired,\r\n y: PropTypes.number.isRequired,\r\n })).isRequired,\r\n }).isRequired,\r\n\r\n containerName: PropTypes.string,\r\n};\r\n\r\nBarChart.defaultProps = {\r\n containerName: 'chart-container',\r\n};\r\n","export const getCountryValues = i18n => ({\r\n Afghanistan: i18n.getString(_TL_('Afghanistan')),\r\n 'Åland Islands': i18n.getString(_TL_('Åland Islands')),\r\n Albania: i18n.getString(_TL_('Albania')),\r\n Algeria: i18n.getString(_TL_('Algeria')),\r\n 'American Samoa': i18n.getString(_TL_('American Samoa')),\r\n Andorra: i18n.getString(_TL_('Andorra')),\r\n Angola: i18n.getString(_TL_('Angola')),\r\n Anguilla: i18n.getString(_TL_('Anguilla')),\r\n Antarctica: i18n.getString(_TL_('Antarctica')),\r\n 'Antigua and Barbuda': i18n.getString(_TL_('Antigua and Barbuda')),\r\n Argentina: i18n.getString(_TL_('Argentina')),\r\n Armenia: i18n.getString(_TL_('Armenia')),\r\n Aruba: i18n.getString(_TL_('Aruba')),\r\n Australia: i18n.getString(_TL_('Australia')),\r\n Austria: i18n.getString(_TL_('Austria')),\r\n Azerbaijan: i18n.getString(_TL_('Azerbaijan')),\r\n Bahamas: i18n.getString(_TL_('Bahamas')),\r\n Bahrain: i18n.getString(_TL_('Bahrain')),\r\n Bangladesh: i18n.getString(_TL_('Bangladesh')),\r\n Barbados: i18n.getString(_TL_('Barbados')),\r\n Belarus: i18n.getString(_TL_('Belarus')),\r\n Belgium: i18n.getString(_TL_('Belgium')),\r\n Belize: i18n.getString(_TL_('Belize')),\r\n Benin: i18n.getString(_TL_('Benin')),\r\n Bermuda: i18n.getString(_TL_('Bermuda')),\r\n Bhutan: i18n.getString(_TL_('Bhutan')),\r\n Bolivia: i18n.getString(_TL_('Bolivia')),\r\n Bonaire: i18n.getString(_TL_('Bonaire')),\r\n 'Bosnia and Herzegovina': i18n.getString(_TL_('Bosnia and Herzegovina')),\r\n Botswana: i18n.getString(_TL_('Botswana')),\r\n 'Bouvet Island': i18n.getString(_TL_('Bouvet Island')),\r\n Brazil: i18n.getString(_TL_('Brazil')),\r\n 'British Indian Ocean Territory': i18n.getString(_TL_('British Indian Ocean Territory')),\r\n Brunei: i18n.getString(_TL_('Brunei')),\r\n Bulgaria: i18n.getString(_TL_('Bulgaria')),\r\n 'Burkina Faso': i18n.getString(_TL_('Burkina Faso')),\r\n Burundi: i18n.getString(_TL_('Burundi')),\r\n Cambodia: i18n.getString(_TL_('Cambodia')),\r\n Cameroon: i18n.getString(_TL_('Cameroon')),\r\n Canada: i18n.getString(_TL_('Canada')),\r\n 'Cape Verde': i18n.getString(_TL_('Cape Verde')),\r\n 'Cayman Islands': i18n.getString(_TL_('Cayman Islands')),\r\n 'Central African Republic': i18n.getString(_TL_('Central African Republic')),\r\n Chad: i18n.getString(_TL_('Chad')),\r\n Chile: i18n.getString(_TL_('Chile')),\r\n China: i18n.getString(_TL_('China')),\r\n 'Christmas Island': i18n.getString(_TL_('Christmas Island')),\r\n 'Cocos (Keeling) Islands': i18n.getString(_TL_('Cocos (Keeling) Islands')),\r\n Colombia: i18n.getString(_TL_('Colombia')),\r\n Comoros: i18n.getString(_TL_('Comoros')),\r\n Congo: i18n.getString(_TL_('Congo')),\r\n 'Congo (DRC)': i18n.getString(_TL_('Congo (DRC)')),\r\n 'Cook Islands': i18n.getString(_TL_('Cook Islands')),\r\n 'Costa Rica': i18n.getString(_TL_('Costa Rica')),\r\n \"Côte d'Ivoire\": i18n.getString(_TL_(\"Côte d'Ivoire\")),\r\n Croatia: i18n.getString(_TL_('Croatia')),\r\n Cuba: i18n.getString(_TL_('Cuba')),\r\n Curaçao: i18n.getString(_TL_('Curaçao')),\r\n Cyprus: i18n.getString(_TL_('Cyprus')),\r\n 'Czech Republic': i18n.getString(_TL_('Czech Republic')),\r\n Denmark: i18n.getString(_TL_('Denmark')),\r\n Djibouti: i18n.getString(_TL_('Djibouti')),\r\n Dominica: i18n.getString(_TL_('Dominica')),\r\n 'Dominican Republic': i18n.getString(_TL_('Dominican Republic')),\r\n Ecuador: i18n.getString(_TL_('Ecuador')),\r\n Egypt: i18n.getString(_TL_('Egypt')),\r\n 'El Salvador': i18n.getString(_TL_('El Salvador')),\r\n 'Equatorial Guinea': i18n.getString(_TL_('Equatorial Guinea')),\r\n Eritrea: i18n.getString(_TL_('Eritrea')),\r\n Estonia: i18n.getString(_TL_('Estonia')),\r\n Ethiopia: i18n.getString(_TL_('Ethiopia')),\r\n 'Falkland Islands': i18n.getString(_TL_('Falkland Islands')),\r\n 'Faroe Islands': i18n.getString(_TL_('Faroe Islands')),\r\n Fiji: i18n.getString(_TL_('Fiji')),\r\n Finland: i18n.getString(_TL_('Finland')),\r\n France: i18n.getString(_TL_('France')),\r\n 'French Guiana': i18n.getString(_TL_('French Guiana')),\r\n 'French Polynesia': i18n.getString(_TL_('French Polynesia')),\r\n 'French Southern Territories': i18n.getString(_TL_('French Southern Territories')),\r\n Gabon: i18n.getString(_TL_('Gabon')),\r\n Gambia: i18n.getString(_TL_('Gambia')),\r\n Georgia: i18n.getString(_TL_('Georgia')),\r\n Germany: i18n.getString(_TL_('Germany')),\r\n Ghana: i18n.getString(_TL_('Ghana')),\r\n Gibraltar: i18n.getString(_TL_('Gibraltar')),\r\n Greece: i18n.getString(_TL_('Greece')),\r\n Greenland: i18n.getString(_TL_('Greenland')),\r\n Grenada: i18n.getString(_TL_('Grenada')),\r\n Guadeloupe: i18n.getString(_TL_('Guadeloupe')),\r\n Guam: i18n.getString(_TL_('Guam')),\r\n Guatemala: i18n.getString(_TL_('Guatemala')),\r\n Guernsey: i18n.getString(_TL_('Guernsey')),\r\n Guinea: i18n.getString(_TL_('Guinea')),\r\n 'Guinea-Bissau': i18n.getString(_TL_('Guinea-Bissau')),\r\n Guyana: i18n.getString(_TL_('Guyana')),\r\n Haiti: i18n.getString(_TL_('Haiti')),\r\n 'Heard Island and McDonald Islands': i18n.getString(_TL_('Heard Island and McDonald Islands')),\r\n 'Holy See (Vatican City State)': i18n.getString(_TL_('Holy See (Vatican City State)')),\r\n Honduras: i18n.getString(_TL_('Honduras')),\r\n 'Hong Kong SAR': i18n.getString(_TL_('Hong Kong SAR')),\r\n Hungary: i18n.getString(_TL_('Hungary')),\r\n Iceland: i18n.getString(_TL_('Iceland')),\r\n India: i18n.getString(_TL_('India')),\r\n Indonesia: i18n.getString(_TL_('Indonesia')),\r\n Iran: i18n.getString(_TL_('Iran')),\r\n Iraq: i18n.getString(_TL_('Iraq')),\r\n Ireland: i18n.getString(_TL_('Ireland')),\r\n 'Isle of Man': i18n.getString(_TL_('Isle of Man')),\r\n Israel: i18n.getString(_TL_('Israel')),\r\n Italy: i18n.getString(_TL_('Italy')),\r\n Jamaica: i18n.getString(_TL_('Jamaica')),\r\n Japan: i18n.getString(_TL_('Japan')),\r\n Jersey: i18n.getString(_TL_('Jersey')),\r\n Jordan: i18n.getString(_TL_('Jordan')),\r\n Kazakhstan: i18n.getString(_TL_('Kazakhstan')),\r\n Kenya: i18n.getString(_TL_('Kenya')),\r\n Kiribati: i18n.getString(_TL_('Kiribati')),\r\n 'North Korea': i18n.getString(_TL_('North Korea')),\r\n Korea: i18n.getString(_TL_('Korea')),\r\n Kuwait: i18n.getString(_TL_('Kuwait')),\r\n Kyrgyzstan: i18n.getString(_TL_('Kyrgyzstan')),\r\n Laos: i18n.getString(_TL_('Laos')),\r\n Latvia: i18n.getString(_TL_('Latvia')),\r\n Lebanon: i18n.getString(_TL_('Lebanon')),\r\n Lesotho: i18n.getString(_TL_('Lesotho')),\r\n Liberia: i18n.getString(_TL_('Liberia')),\r\n Libya: i18n.getString(_TL_('Libya')),\r\n Liechtenstein: i18n.getString(_TL_('Liechtenstein')),\r\n Lithuania: i18n.getString(_TL_('Lithuania')),\r\n Luxembourg: i18n.getString(_TL_('Luxembourg')),\r\n 'Macao SAR': i18n.getString(_TL_('Macao SAR')),\r\n 'North Macedonia': i18n.getString(_TL_('North Macedonia')),\r\n Madagascar: i18n.getString(_TL_('Madagascar')),\r\n Malawi: i18n.getString(_TL_('Malawi')),\r\n Malaysia: i18n.getString(_TL_('Malaysia')),\r\n Maldives: i18n.getString(_TL_('Maldives')),\r\n Mali: i18n.getString(_TL_('Mali')),\r\n Malta: i18n.getString(_TL_('Malta')),\r\n 'Marshall Islands': i18n.getString(_TL_('Marshall Islands')),\r\n Martinique: i18n.getString(_TL_('Martinique')),\r\n Mauritania: i18n.getString(_TL_('Mauritania')),\r\n Mauritius: i18n.getString(_TL_('Mauritius')),\r\n Mayotte: i18n.getString(_TL_('Mayotte')),\r\n Mexico: i18n.getString(_TL_('Mexico')),\r\n Micronesia: i18n.getString(_TL_('Micronesia')),\r\n Moldova: i18n.getString(_TL_('Moldova')),\r\n Monaco: i18n.getString(_TL_('Monaco')),\r\n Mongolia: i18n.getString(_TL_('Mongolia')),\r\n Montenegro: i18n.getString(_TL_('Montenegro')),\r\n Montserrat: i18n.getString(_TL_('Montserrat')),\r\n Morocco: i18n.getString(_TL_('Morocco')),\r\n Mozambique: i18n.getString(_TL_('Mozambique')),\r\n Myanmar: i18n.getString(_TL_('Myanmar')),\r\n Namibia: i18n.getString(_TL_('Namibia')),\r\n Nauru: i18n.getString(_TL_('Nauru')),\r\n Nepal: i18n.getString(_TL_('Nepal')),\r\n Netherlands: i18n.getString(_TL_('Netherlands')),\r\n 'New Caledonia': i18n.getString(_TL_('New Caledonia')),\r\n 'New Zealand': i18n.getString(_TL_('New Zealand')),\r\n Nicaragua: i18n.getString(_TL_('Nicaragua')),\r\n Niger: i18n.getString(_TL_('Niger')),\r\n Nigeria: i18n.getString(_TL_('Nigeria')),\r\n Niue: i18n.getString(_TL_('Niue')),\r\n 'Norfolk Island': i18n.getString(_TL_('Norfolk Island')),\r\n 'Northern Mariana Islands': i18n.getString(_TL_('Northern Mariana Islands')),\r\n Norway: i18n.getString(_TL_('Norway')),\r\n Oman: i18n.getString(_TL_('Oman')),\r\n Pakistan: i18n.getString(_TL_('Pakistan')),\r\n Palau: i18n.getString(_TL_('Palau')),\r\n 'Palestinian Authority': i18n.getString(_TL_('Palestinian Authority')),\r\n Panama: i18n.getString(_TL_('Panama')),\r\n 'Papua New Guinea': i18n.getString(_TL_('Papua New Guinea')),\r\n Paraguay: i18n.getString(_TL_('Paraguay')),\r\n Peru: i18n.getString(_TL_('Peru')),\r\n Philippines: i18n.getString(_TL_('Philippines')),\r\n 'Pitcairn Islands': i18n.getString(_TL_('Pitcairn Islands')),\r\n Poland: i18n.getString(_TL_('Poland')),\r\n Portugal: i18n.getString(_TL_('Portugal')),\r\n 'Puerto Rico': i18n.getString(_TL_('Puerto Rico')),\r\n Qatar: i18n.getString(_TL_('Qatar')),\r\n Réunion: i18n.getString(_TL_('Réunion')),\r\n Romania: i18n.getString(_TL_('Romania')),\r\n Russia: i18n.getString(_TL_('Russia')),\r\n Rwanda: i18n.getString(_TL_('Rwanda')),\r\n 'Saint Barthélemy': i18n.getString(_TL_('Saint Barthélemy')),\r\n 'St Helena, Ascension, Tristan da Cunha': i18n.getString(_TL_('St Helena, Ascension, Tristan da Cunha')),\r\n 'Saint Kitts and Nevis': i18n.getString(_TL_('Saint Kitts and Nevis')),\r\n 'Saint Lucia': i18n.getString(_TL_('Saint Lucia')),\r\n 'Saint Martin': i18n.getString(_TL_('Saint Martin')),\r\n 'Saint Pierre and Miquelon': i18n.getString(_TL_('Saint Pierre and Miquelon')),\r\n 'Saint Vincent and the Grenadines': i18n.getString(_TL_('Saint Vincent and the Grenadines')),\r\n Samoa: i18n.getString(_TL_('Samoa')),\r\n 'San Marino': i18n.getString(_TL_('San Marino')),\r\n 'São Tomé and Príncipe': i18n.getString(_TL_('São Tomé and Príncipe')),\r\n 'Saudi Arabia': i18n.getString(_TL_('Saudi Arabia')),\r\n Senegal: i18n.getString(_TL_('Senegal')),\r\n Serbia: i18n.getString(_TL_('Serbia')),\r\n Seychelles: i18n.getString(_TL_('Seychelles')),\r\n 'Sierra Leone': i18n.getString(_TL_('Sierra Leone')),\r\n Singapore: i18n.getString(_TL_('Singapore')),\r\n 'Sint Maarten': i18n.getString(_TL_('Sint Maarten')),\r\n Slovakia: i18n.getString(_TL_('Slovakia')),\r\n Slovenia: i18n.getString(_TL_('Slovenia')),\r\n 'Solomon Islands': i18n.getString(_TL_('Solomon Islands')),\r\n Somalia: i18n.getString(_TL_('Somalia')),\r\n 'South Africa': i18n.getString(_TL_('South Africa')),\r\n 'South Georgia and South Sandwich Islands': i18n.getString(_TL_('South Georgia and South Sandwich Islands')),\r\n 'South Sudan': i18n.getString(_TL_('South Sudan')),\r\n Spain: i18n.getString(_TL_('Spain')),\r\n 'Sri Lanka': i18n.getString(_TL_('Sri Lanka')),\r\n Sudan: i18n.getString(_TL_('Sudan')),\r\n Suriname: i18n.getString(_TL_('Suriname')),\r\n Svalbard: i18n.getString(_TL_('Svalbard')),\r\n Eswatini: i18n.getString(_TL_('Eswatini')),\r\n Sweden: i18n.getString(_TL_('Sweden')),\r\n Switzerland: i18n.getString(_TL_('Switzerland')),\r\n Syria: i18n.getString(_TL_('Syria')),\r\n Taiwan: i18n.getString(_TL_('Taiwan')),\r\n Tajikistan: i18n.getString(_TL_('Tajikistan')),\r\n Tanzania: i18n.getString(_TL_('Tanzania')),\r\n Thailand: i18n.getString(_TL_('Thailand')),\r\n 'Timor-Leste': i18n.getString(_TL_('Timor-Leste')),\r\n Togo: i18n.getString(_TL_('Togo')),\r\n Tokelau: i18n.getString(_TL_('Tokelau')),\r\n Tonga: i18n.getString(_TL_('Tonga')),\r\n 'Trinidad and Tobago': i18n.getString(_TL_('Trinidad and Tobago')),\r\n Tunisia: i18n.getString(_TL_('Tunisia')),\r\n Turkey: i18n.getString(_TL_('Turkey')),\r\n Turkmenistan: i18n.getString(_TL_('Turkmenistan')),\r\n 'Turks and Caicos Islands': i18n.getString(_TL_('Turks and Caicos Islands')),\r\n Tuvalu: i18n.getString(_TL_('Tuvalu')),\r\n Uganda: i18n.getString(_TL_('Uganda')),\r\n Ukraine: i18n.getString(_TL_('Ukraine')),\r\n 'United Arab Emirates': i18n.getString(_TL_('United Arab Emirates')),\r\n 'United Kingdom': i18n.getString(_TL_('United Kingdom')),\r\n 'United States': i18n.getString(_TL_('United States')),\r\n 'U.S. Outlying Islands': i18n.getString(_TL_('U.S. Outlying Islands')),\r\n Uruguay: i18n.getString(_TL_('Uruguay')),\r\n Uzbekistan: i18n.getString(_TL_('Uzbekistan')),\r\n Vanuatu: i18n.getString(_TL_('Vanuatu')),\r\n Venezuela: i18n.getString(_TL_('Venezuela')),\r\n Vietnam: i18n.getString(_TL_('Vietnam')),\r\n 'British Virgin Islands': i18n.getString(_TL_('British Virgin Islands')),\r\n 'U.S. Virgin Islands': i18n.getString(_TL_('U.S. Virgin Islands')),\r\n 'Wallis and Futuna': i18n.getString(_TL_('Wallis and Futuna')), // TODO: disputed, ask about this to Clickhouse group\r\n 'Western Sahara': i18n.getString(_TL_('Western Sahara')),\r\n Yemen: i18n.getString(_TL_('Yemen')),\r\n Zambia: i18n.getString(_TL_('Zambia')),\r\n Zimbabwe: i18n.getString(_TL_('Zimbabwe')),\r\n});\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { Fragment, useMemo } from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport BarChart from './base-charts/bar-chart';\r\nimport { getCountryValues } from '../../data/country';\r\n\r\nconst CountriesChart = (props) => {\r\n const {\r\n i18n, data,\r\n } = props;\r\n\r\n const color = '#5C1B86';\r\n const countryValues = useMemo(() => getCountryValues(i18n), [i18n]);\r\n\r\n const formattedData = useMemo(() =>\r\n _.map(data, item => ({\r\n name: countryValues[item.item] ? countryValues[item.item] : item.item,\r\n y: item.count,\r\n color,\r\n })), [countryValues, data]);\r\n\r\n return (\r\n \r\n {/* Left Column */}\r\n
\r\n );\r\n};\r\n\r\nTileGroup.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n\r\n fetchTileData: PropTypes.func,\r\n};\r\n\r\nTileGroup.defaultProps = {\r\n fetchTileData: () => {},\r\n};\r\n\r\nexport default TileGroup;\r\n","import { useEffect, useState, useCallback } from 'react';\r\nimport { formatResponse } from './util';\r\n\r\nexport function usePagesByVisitsData({\r\n fetchTileData, instrumentation, isFilterReady,\r\n}) {\r\n const [data, setData] = useState([]);\r\n const [isLoaded, setisLoaded] = useState(false);\r\n const [isLoading, setisLoading] = useState(true);\r\n\r\n const onError = useCallback((error) => {\r\n instrumentation.error('FetchPopularPage', error, 'Default.GetWebInsights');\r\n }, [instrumentation]);\r\n\r\n\r\n useEffect(() => {\r\n if (!fetchTileData) return undefined;\r\n setisLoading(true);\r\n setisLoaded(false);\r\n if (!isFilterReady) return undefined;\r\n\r\n const cachedFetchTileData = fetchTileData('PopularPages');\r\n const PagesByVisitsPromise = cachedFetchTileData.toPromise().then((result) => {\r\n instrumentation.log('FetchPopularPage', result, 'Default.GetWebInsights');\r\n const res = formatResponse(result.PopularPagesResult, 'PopularPageURL', 'VisitorCount');\r\n setData(res);\r\n });\r\n\r\n PagesByVisitsPromise\r\n .catch(onError).finally(() => {\r\n setisLoading(false);\r\n setisLoaded(true);\r\n });\r\n\r\n\r\n return () => {\r\n cachedFetchTileData.invalidate();\r\n };\r\n }, [onError, fetchTileData, instrumentation, isFilterReady]);\r\n\r\n return {\r\n data,\r\n isLoaded,\r\n isLoading,\r\n };\r\n}\r\n","import { useEffect, useState, useCallback } from 'react';\r\nimport { formatResponse } from './util';\r\n\r\nexport function useDevicesData({\r\n fetchTileData, instrumentation, isFilterReady,\r\n}) {\r\n const [data, setData] = useState(0);\r\n const [isLoaded, setisLoaded] = useState(false);\r\n const [isLoading, setisLoading] = useState(true);\r\n\r\n const onError = useCallback((error) => {\r\n instrumentation.error('FetchDevicesData', error, 'Default.GetWebInsights');\r\n }, [instrumentation]);\r\n\r\n\r\n useEffect(() => {\r\n if (!fetchTileData) return undefined;\r\n setisLoading(true);\r\n setisLoaded(false);\r\n if (!isFilterReady) return undefined;\r\n\r\n const cachedFetchTileData = fetchTileData('Devices');\r\n const DevicesPromise = cachedFetchTileData.toPromise()\r\n .then((result) => {\r\n instrumentation.log('FetchDevicesData', result, 'Default.GetWebInsights');\r\n const res = formatResponse(result.DevicesResult, 'DeviceTypeName', 'VisitorCount');\r\n setData(res);\r\n });\r\n\r\n DevicesPromise\r\n .catch(onError).finally(() => {\r\n setisLoading(false);\r\n setisLoaded(true);\r\n });\r\n\r\n return () => {\r\n cachedFetchTileData.invalidate();\r\n };\r\n }, [onError, fetchTileData, instrumentation, isFilterReady]);\r\n\r\n return {\r\n data,\r\n isLoaded,\r\n isLoading,\r\n };\r\n}\r\n","import { useEffect, useState, useCallback } from 'react';\r\nimport { formatResponse } from './util';\r\n\r\nexport function useCountriesData({\r\n fetchTileData, instrumentation, isFilterReady,\r\n}) {\r\n const [data, setData] = useState([]);\r\n const [isLoaded, setisLoaded] = useState(false);\r\n const [isLoading, setisLoading] = useState(true);\r\n\r\n const onError = useCallback((error) => {\r\n instrumentation.error('FetchCoutriesData', error, 'Default.GetWebInsights');\r\n }, [instrumentation]);\r\n\r\n\r\n useEffect(() => {\r\n if (!fetchTileData) return undefined;\r\n setisLoading(true);\r\n setisLoaded(false);\r\n\r\n if (!isFilterReady) return undefined;\r\n\r\n const cachedFetchTileData = fetchTileData('Countries');\r\n const CountriesPromise = cachedFetchTileData.toPromise()\r\n .then((result) => {\r\n instrumentation.log('FetchCoutriesData', result, 'Default.GetWebInsights');\r\n const res = formatResponse(result.CountriesResult, 'CountryName', 'VisitorCount');\r\n setData(res);\r\n });\r\n\r\n CountriesPromise\r\n .catch(onError).finally(() => {\r\n setisLoading(false);\r\n setisLoaded(true);\r\n });\r\n\r\n return () => {\r\n cachedFetchTileData.invalidate();\r\n };\r\n }, [onError, fetchTileData, instrumentation, isFilterReady]);\r\n\r\n return {\r\n data,\r\n isLoaded,\r\n isLoading,\r\n };\r\n}\r\n","import React, { useCallback, useMemo, memo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { ToolbarContainer } from '@bingads-webui-grid/toolbar-container';\r\nimport { FilterViewManager } from '@bingads-webui/filter-view-manager';\r\nimport { getToolbarEditor } from '@bingads-webui-campaign-react/toolbar-plugin';\r\n\r\nimport { SchemaI18n } from '@bingads-webui-universal/schema-i18n';\r\n\r\nexport const WebInsightsToolbar = memo(({\r\n i18n,\r\n filterService,\r\n filterConfig,\r\n}) => {\r\n const [forceHideToolbar, setForceHideToolbar] = React.useState(false);\r\n const [showToolbarUnselected, setShowToolbarUnselected] = React.useState(true);\r\n\r\n const toolbarConfig = useMemo(() => {\r\n const toolbarUnselectedConfig = new Map();\r\n [\r\n ['predicate-list', {\r\n id: 'predicate-list',\r\n type: 'custom',\r\n }],\r\n ['expander', {\r\n type: 'expander',\r\n }],\r\n ].forEach(([key, value]) => {\r\n toolbarUnselectedConfig.set(key, value);\r\n });\r\n\r\n return {\r\n toolbarUnselectedConfig,\r\n toolbarSelectedConfig: new Map(),\r\n };\r\n }, []);\r\n const [toolbarUnselectedConfig, setToolbarUnselectedConfig] = React.useState(toolbarConfig.toolbarUnselectedConfig);\r\n\r\n const resetToolbarVisibility = ({ forceHideToolbar: forceHideToolbarUpdate }) => {\r\n setForceHideToolbar(forceHideToolbarUpdate);\r\n };\r\n\r\n const updateToolbar = useCallback((newItem) => {\r\n if (!newItem || !newItem.id) {\r\n return;\r\n }\r\n const toolbarUnselectedConfigUpdated = new Map(toolbarUnselectedConfig);\r\n toolbarUnselectedConfigUpdated.set(newItem.id, newItem);\r\n setToolbarUnselectedConfig(toolbarUnselectedConfigUpdated);\r\n setShowToolbarUnselected(true);\r\n }, [toolbarUnselectedConfig]);\r\n\r\n const toolbarEditor = getToolbarEditor({ updateToolbar, toolbarConfig });\r\n\r\n return (\r\n <>\r\n \r\n
\r\n {/* Right Column */}\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nInsightDashboardOn.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n preferenceService: PropTypes.shape({\r\n getAtUserLevel: PropTypes.func.isRequired,\r\n }).isRequired,\r\n serverContext: PropTypes.shape({\r\n CurrentAccount: PropTypes.shape({\r\n TimeZone: PropTypes.number,\r\n }),\r\n }).isRequired,\r\n};\r\n\r\nexport default InsightDashboardOn;\r\n","import React, { useMemo } from 'react';\r\nimport classnames from 'classnames';\r\nimport { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';\r\n\r\n\r\nconst InsightDashboardLoading = ({ i18n }) => {\r\n const loadingText = useMemo(() => ({\r\n loading: i18n.getString(_TL_('Loading')),\r\n }), [i18n]);\r\n\r\n return (\r\n \r\n {i18n.getString(dashboardTexts.DashboardHeader)}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {i18n.getString(dashboardTexts.DashboardFooter)}\r\n {` ${i18n.getString(_TL_('Learn more'))}`}\r\n \r\n
\r\n