';\n // case 'BudgetResults':\n // return '
+ New Plan ';\n // }\n // }\n\n componentDidMount = async () =>\n {\n await this.fetchData()\n if (this.props.gridtype === \"recentBudgetPlans\")\n {\n var colDefs = await this.getColumnDefs(this.props.apiData)\n this.setState({columnDefs: colDefs})\n }\n }\n\n componentDidUpdate = async (prevProps, prevState) =>\n {\n if ((this.props.accountId !== prevProps.accountId) || (this.props.selectedBudgetOutputId !== prevProps.selectedBudgetOutputId))\n {\n await this.fetchData()\n }\n\n if (this.props.gridtype === \"recentBudgetPlans\" && this.props.isBudgetRecommendation)\n {\n await this.fetchData()\n }\n\n // if(JSON.stringify(prevProps.apiData) !== JSON.stringify(this.props.apiData) && this.props.gridtype === \"recentBudgetPlans\")\n // {\n \n // var colDefs = await this.getColumnDefs(this.props.apiData)\n // this.setState({columnDefs: colDefs})\n\n // }\n \n //side menu swap conditionals for later use\n //((this.props.accountId !== prevProps.accountId) || (this.props.selectedBudgetOutputId !== prevProps.selectedBudgetOutputId)) \n if (this.props.gridtype === \"timeSeriesGrid\" && ((JSON.stringify(prevProps.timeSeriesCost) !== JSON.stringify(this.props.timeSeriesCost) && this.props.timeSeriesCost.length > 0) || prevState.isConvertToWideActive !== this.state.isConvertToWideActive || JSON.stringify(this.props.timeSeriesParams) !== JSON.stringify(this.state.timeSeriesParams)))\n {\n var isConvertToWideActive;\n if ((this.props.accountId !== prevProps.accountId) || (this.props.selectedBudgetOutputId !== prevProps.selectedBudgetOutputId))\n isConvertToWideActive = false;\n else\n isConvertToWideActive = this.state.isConvertToWideActive;\n var json = await this.props.fetchData(isConvertToWideActive)\n var colDefs = await this.getColumnDefs(json)\n this.setState({\n apiData: json,\n accountId: clonedeep(this.props.accountId),\n selectedBudgetOutputId: clonedeep(this.props.selectedBudgetOutputId),\n isConvertToWideActive : isConvertToWideActive,\n timeSeriesParams: clonedeep(this.props.timeSeriesParams),\n columnDefs: colDefs\n });\n }\n }\n\n \n toggleSwitch = (e) => {\n var isChecked = !this.state.isChecked\n var constraints = isChecked ? \"Dollar Constraints\" : \"Perc. Constraints\"\n if (isChecked)\n {\n this.state.gridColumnApi.setColumnVisible('max_spend', true);\n this.state.gridColumnApi.setColumnVisible('min_spend', true);\n this.state.gridColumnApi.setColumnVisible('max_percent', false);\n this.state.gridColumnApi.setColumnVisible('min_percent', false);\n }\n else\n {\n this.state.gridColumnApi.setColumnVisible('max_spend', false);\n this.state.gridColumnApi.setColumnVisible('min_spend', false);\n this.state.gridColumnApi.setColumnVisible('max_percent', true);\n this.state.gridColumnApi.setColumnVisible('min_percent', true);\n }\n this.setState({isChecked: isChecked, constraints: constraints})\n };\n\n\n fetchData = async() =>\n {\n if (this.props.isBudgetRecommendation)\n {\n await this.props.fetchBudgetSweepData();\n }\n else if (this.props.pagetype === \"BudgetResults\")\n {\n if (this.props.accountId !== \"\")\n {\n var apiData = await this.props.fetchData();\n var colDefs = await this.getColumnDefs(apiData)\n this.setState({columnDefs: colDefs, apiData:apiData})\n }\n }\n else \n {\n await this.props.fetchData();\n }\n }\n\n onGridReady = (params) => {\n params.api.DisableGroup = this.DisableGroup\n params.api.EnableGroup = this.EnableGroup\n this.setState({\n gridApi : params.api,\n gridColumnApi : params.columnApi\n })\n };\n\n /* pinAddNewButton = () =>\n {\n if (this.props.pagetype === 'BudgetPlanner' || this.props.pagetype === 'BudgetResults')\n {\n if(this.state.gridApi != null)\n {\n var pinnedRow = [];\n var firstElement = Object.create(null);\n pinnedRow.push(firstElement)\n pinnedRow[0].fullWidth = true;\n return pinnedRow;\n }\n }\n }; */\n\n onAddRowClick = (event) => {\n if (event.data.fullWidth)\n {\n this.state.gridApi.updateRowData({\n add: [{ }], addIndex:0 });\n this.state.gridApi.paginationGoToFirstPage()\n this.state.gridApi.startEditingCell({rowIndex:0, colKey:'A'});\n }\n }\n\n createData = (count) => {\n var rowData = [];\n if (this.props.apiData != null)\n {\n for (var i = 0; i < this.props.apiData.length; i++)\n {\n rowData.push(this.props.apiData[i])\n }\n }\n return rowData;\n }\n\n toTitles = (s) => { s = s.replace(/\\w\\S*/g, function(t) { return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase(); }); if (s === 'Rec Kpi'){s = 'Rec KPI'}; return s;}\n \n getConversionCalculatedHeader = () =>\n {\n //remove this later\n if(this.props.selectedBudgetOutputId === 78)\n {\n return \"KPI / Spend\"\n }\n switch (this.props.conversionType)\n {\n case \"Revenue\":\n return \"ROAS\";\n case \"Conversions\":\n return \"CPA\";\n case \"Reach\":\n return \"KPI / Spend\";\n case \"New Visitors\":\n return \"NV / Spend\";\n case \"CPM\":\n return \"CPM\";\n case \"Impressions\":\n return \"CPM\"\n case \"Views\":\n return \"CPM\"\n case \"ThruPlays\":\n return \"CPM\"\n case \"Leads\":\n return \"CPL\"\n case \"Purchases\":\n return \"Cost Per. Purchase\"\n case \"Sales\":\n return \"Cost Per. Sale\";\n case \"Landing Page Views\":\n return \"CPLPV\";\n case \"Link Clicks\":\n return \"CPLC\";\n case \"Free Trials\":\n return \"CPFT\";\n case \"Installs\":\n return \"Cost Per. Install\";\n case \"Referrals\":\n return \"Cost Per. Referrals\";\n case \"Signups\":\n return \"Cost Per. Signup\";\n case \"Clicks\":\n return \"CPC\";\n case \"Bookings\":\n return \"Cost Per. Booking\";\n }\n }\n\n\n getColumnDefs = async (apiData) => {\n if(apiData === null)\n {\n apiData = clonedeep(this.props.apiData)\n }\n var columnDefs = [];\n var colDef = null;\n if (apiData != null)\n {\n var columnApiData = Object.keys(apiData[0]);\n for(var i = 0; i < columnApiData.length; i++)\n {\n colDef = null;\n if(columnApiData[i] !== \"min_percent\" && columnApiData[i] !== \"max_percent\" && columnApiData[i] !== \"max_spend\" && columnApiData[i] !== \"min_spend\" && columnApiData[i] !== \"warnings\" && columnApiData[i] !== \"enabled\")\n {\n var headerName = \"\"\n switch (columnApiData[i])\n {\n case \"est_roi\":\n headerName = this.getConversionCalculatedHeader()\n break;\n case \"rec_kpi\":\n headerName = this.props.conversionType\n break;\n case \"rec_budget\":\n headerName = \"Rec. Spend\"\n break;\n case \"adj_spend\":\n headerName = \"% Adj. Spend\"\n break;\n case \"TimeSeriesKPI\":\n headerName = this.props.conversionType\n break;\n case \"TimeSeriesMetricCalculated\":\n headerName = this.getConversionCalculatedHeader()\n break;\n default:\n headerName = this.toTitles(columnApiData[i].replaceAll('_', ' '))\n }\n \n colDef = \n {\n headerName: headerName,\n field: columnApiData[i],\n editable: this.props.gridtype === \"recentBudgetPlans\" ? false : true,\n valueFormatter: columnApiData[i] === \"est_roi\" || columnApiData[i] === \"TimeSeriesMetricCalculated\" ? /*this.formatROI.bind(this)*/ \"\": this.formatNumber.bind(this) ,\n width: 150,\n sortable: this.props.gridtype === \"recentBudgetPlans\" ? true : false,\n comparator: (valueA, valueB) => {\n // Convert the values to numbers for numerical sorting\n const numA = parseFloat(valueA);\n const numB = parseFloat(valueB);\n \n if (numA < numB) return -1;\n if (numA > numB) return 1;\n return 0;\n },\n };\n }\n \n switch(columnApiData[i])\n {\n case 'name':\n colDef.cellRenderer = this.props.gridtype === \"recentBudgetPlans\" ? '' : 'budgetResultScenarioCellRenderer'\n colDef.accountId = clonedeep(this.props.accountId) \n colDef.width = this.props.gridtype === \"recentBudgetPlans\" ? this.props.columnWidth : \"750px\"\n colDef.tooltipField = columnApiData[i]\n colDef.tooltipComponent = 'customTooltip'\n break\n case 'status':\n colDef.cellEditor = 'budgetResultStatusCellEditor'\n colDef.cellClass = 'status-cell'\n colDef.hide = true\n break\n case 'campaign_grouping_id_id':\n colDef.hide = true\n break\n case 'id':\n colDef.hide = true\n break\n case 'model_frequency':\n colDef.hide = true\n break;\n case 'analysis_type':\n colDef.editable = false\n colDef.valueFormatter = function(params) {\n return params.value === '' ? '' : params.value;\n };\n break;\n case 'active':\n colDef.hide = true\n break;\n case 'upper_quant_bounds_budget':\n colDef.hide = true\n break\n }\n if (colDef !== null)\n {\n columnDefs.push(colDef)\n }\n }\n if (this.props.gridtype === \"recentBudgetPlans\")\n {\n var colDefMinPerc = \n {\n headerName: \"Min Perc.\",\n field: \"min_percent\",\n editable:true,\n hide: this.state.isChecked,\n cellRenderer: \"minCellRenderer\",\n tooltipComponent: \"minMaxCustomTooltip\",\n tooltipField: 'min_percent',\n sortable: true,\n comparator: (valueA, valueB) => {\n // Convert the values to numbers for numerical sorting\n const numA = parseFloat(valueA);\n const numB = parseFloat(valueB);\n \n if (numA < numB) return -1;\n if (numA > numB) return 1;\n return 0;\n },\n valueFormatter: this.percentageFormatter.bind(this),\n onCellValueChanged: this.minMaxChange.bind(),\n };\n var colDefMaxPerc = \n {\n headerName: \"Max Perc.\",\n field: \"max_percent\",\n editable:true,\n hide: this.state.isChecked,\n cellRenderer: \"maxCellRenderer\",\n tooltipComponent: \"minMaxCustomTooltip\",\n tooltipField: 'max_percent',\n sortable: true,\n comparator: (valueA, valueB) => {\n // Convert the values to numbers for numerical sorting\n const numA = parseFloat(valueA);\n const numB = parseFloat(valueB);\n \n if (numA < numB) return -1;\n if (numA > numB) return 1;\n return 0;\n },\n valueFormatter: this.percentageFormatter.bind(this),\n onCellValueChanged: this.minMaxChange.bind()\n };\n var colDefMinSpend = \n {\n headerName: \"Min Spend\",\n field: \"min_spend\",\n editable:true,\n hide: !this.state.isChecked,\n cellRenderer: \"minCellRenderer\",\n tooltipComponent: \"minMaxCustomTooltip\",\n tooltipField: 'min_spend',\n sortable: true,\n comparator: (valueA, valueB) => {\n // Convert the values to numbers for numerical sorting\n const numA = parseFloat(valueA);\n const numB = parseFloat(valueB);\n \n if (numA < numB) return -1;\n if (numA > numB) return 1;\n return 0;\n },\n onCellValueChanged: this.minMaxSpendChange.bind() \n };\n var colDefMaxSpend = \n {\n headerName: \"Max Spend\",\n field: \"max_spend\",\n hide: !this.state.isChecked,\n editable:true,\n cellRenderer: \"maxCellRenderer\",\n tooltipComponent: \"minMaxCustomTooltip\",\n tooltipField: 'max_spend',\n sortable: true,\n comparator: (valueA, valueB) => {\n // Convert the values to numbers for numerical sorting\n const numA = parseFloat(valueA);\n const numB = parseFloat(valueB);\n \n if (numA < numB) return -1;\n if (numA > numB) return 1;\n return 0;\n },\n onCellValueChanged: this.minMaxSpendChange.bind()\n };\n var colDefWarnings = \n {\n headerName: \"Warnings\",\n field: \"warnings\",\n editable:false,\n valueFormatter: this.arrayTextFormatter.bind(this),\n hide:true\n };\n var colDefEnabled = {\n headerName: 'Enabled',\n field: 'enabled',\n cellRenderer: 'enableCampaignGroup',\n editable: false,\n width: 100,\n suppressSizeToFit: true,\n cellClass: 'enable-cell',\n };\n columnDefs.push(colDefMinPerc);\n columnDefs.push(colDefMaxPerc);\n columnDefs.push(colDefMinSpend);\n columnDefs.push(colDefMaxSpend);\n columnDefs.push(colDefWarnings);\n columnDefs.push(colDefEnabled);\n }\n }\n \n //custom colums added on front end for min/max perc.\n return columnDefs;\n }\n\n minMaxChange = async () =>\n {\n for (var i = 0; i < this.state.gridApi.getDisplayedRowCount(); i++)\n {\n if ((parseInt(this.state.gridApi.getRowNode(i).data.min_percent) > parseInt(this.state.gridApi.getRowNode(i).data.max_percent)) || parseInt((this.state.gridApi.getRowNode(i).data.max_percent) < parseInt(this.state.gridApi.getRowNode(i).data.min_percent)))\n {\n var error = this.state.gridApi.getRowNode(i).data.min_percent > this.state.gridApi.getRowNode(i).data.max_percent ? \"Min Percent cannot be greater than Max Percent\" : \"Max Percent cannot be less than Min Percent\"\n this.setState({show:true, errorMsg:error})\n return \n }\n }\n await this.props.setBudgetOptimizationParams(this.state.gridApi, this.state.isChecked, null, null)\n await this.props.refreshBudgetRecommendation()\n //await this.fetchData()\n \n }\n\n minMaxSpendChange = async () =>\n {\n for (var i = 0; i < this.state.gridApi.getDisplayedRowCount(); i++)\n {\n if ((parseInt(this.state.gridApi.getRowNode(i).data.min_spend) > parseInt(this.state.gridApi.getRowNode(i).data.max_spend)) || parseInt((this.state.gridApi.getRowNode(i).data.max_spend) < parseInt(this.state.gridApi.getRowNode(i).data.min_spend)))\n {\n var error = this.state.gridApi.getRowNode(i).data.min_spend > this.state.gridApi.getRowNode(i).data.max_spend ? \"Min Spend cannot be greater than Max Spend\" : \"Max Spend cannot be less than Min Spend\"\n this.setState({show:true, errorMsg:error})\n return \n }\n }\n await this.props.setBudgetOptimizationParams(this.state.gridApi, null, null)\n await this.props.refreshBudgetRecommendation()\n //await this.fetchData()\n \n }\n\n onFirstDataRendered = async () =>\n {\n if (this.state.gridApi !== null && this.props.gridtype === \"recentBudgetPlans\")\n {\n //this.state.gridApi.sizeColumnsToFit({defaultMinWidth: 150});\n await this.props.setBudgetOptimizationParams(this.state.gridApi, this.state.isChecked, null, null);\n }\n }\n\n percentageFormatter = (params) =>\n {\n if (!isNaN(params.value))\n return params.value*100 + \"%\";\n }\n\n arrayTextFormatter = (params) =>\n {\n if (params.length > 1)\n {\n return JSON.stringify(params)\n }\n }\n\n formatNumber = (params) => {\n if (!isNaN(params.value))\n {\n return Math.floor(params.value)\n .toString()\n .replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,');\n }\n }\n\n formatROI = (params) => {\n return Math.ceil(params.value * 100) / 100\n }\n\n exportToExcel = () =>\n {\n var fileName = \"\"\n switch(this.props.gridtype)\n {\n case \"timeSeriesGrid\":\n fileName = \"timeseries_\"\n break;\n case \"recentBudgetPlans\":\n fileName = \"recentBudgetPlans_\"\n break;\n default:\n fileName = \"grid_export_\"\n\n }\n var params = {fileName: fileName + Date.now()}\n this.state.gridApi.exportDataAsCsv(params);\n }\n\n convertToWide = (e) =>\n {\n if (!this.state.isConvertToWideActive)\n this.setState({isConvertToWideActive: true})\n else\n this.setState({isConvertToWideActive: false})\n }\n\n handleClose = () =>\n {\n this.setState({show: false, errorMsg: \"\"})\n }\n\n DisableGroup = async (groupId, name, index, maxSpend) => {\n await this.props.setBudgetOptimizationParams(this.state.gridApi, this.state.isChecked, groupId, 'disable', name, index, maxSpend)\n await this.props.refreshBudgetRecommendation()\n //await this.fetchData()\n };\n\n EnableGroup = async (groupId, name, index, maxSpend) => {\n await this.props.setBudgetOptimizationParams(this.state.gridApi, this.state.isChecked, groupId, 'enable', name, index, maxSpend)\n await this.props.refreshBudgetRecommendation()\n //await this.fetchData()\n };\n\n render() {\n return (\n <>
{this.props.gridtype === 'timeSeriesGrid' ?\n (Convert to wide Export
)\n :\n (\"\")}\n {this.props.gridtype === 'recentBudgetPlans' ? {this.state.constraints} Export \n
\n \n Constraint Error \n \n {this.state.errorMsg} \n \n \n Close\n \n \n \n \n );\n }\n}\n\nexport default MainGridComponent","import React, { Component } from \"react\";\nimport fetchApi from '../FetchApi';\nimport ReactGA from \"react-ga4\";\n\nReactGA.initialize(\"G-YQ7D35VK7L\")\n\nexport class AccountsDropdown extends Component {\n constructor(props) {\n super(props);\n\n this.state =\n {\n apiData: [{name: [], id: []}],\n }\n };\n\n componentDidMount = async () =>\n { \n var apiData = await fetchApi(\"ACCOUNTS\", null)\n ReactGA.event({category: apiData[0].name, action: \"Budget Plan List\"})\n this.setState({apiData: apiData})\n if (this.props.redirectAccountId !== 0) {\n // Find the index of the account with the matching ID in the apiData array\n const index = apiData.findIndex(item => item.id === this.props.redirectAccountId);\n if (index !== -1) {\n // Set the selected account ID in the state\n this.props.setAccountId(apiData[index].id);\n }\n }\n else\n this.props.setAccountId(apiData[0].id)\n }\n\n setAccountId = (e) =>\n {\n ReactGA.event({category: e.target.options[e.target.selectedIndex].text, action: \"Budget Plan List\"})\n this.props.setAccountId(e.target.value) \n }\n\n render() {\n return (\n
\n \n {this.state.apiData !== null ? this.state.apiData.map((item) =>({item.name} ) ) : \"\" }\n \n
\n );\n }\n}\n\nexport default AccountsDropdown\n","import React, { Component } from 'react';\nimport MainGridComponent from './MainGridComponent';\nimport '../css/main.css';\nimport AccountsDropdown from './AccountsDropdown';\nimport fetchApi from '../FetchApi';\n\nexport class BudgetResults extends Component {\n static displayName = BudgetResults.name;\n\n constructor(props) {\n super(props);\n this.setAccountId = this.setAccountId.bind(this)\n var redirectAccountId = 0\n if (this.props.location.state !== undefined)\n redirectAccountId = parseInt(this.props.location.state.accountId)\n\n this.state = {\n accountId: \"\",\n redirectAccountId: redirectAccountId,\n recentBudgetInputs: null,\n apiData: null\n };\n }\n \n fetchData = async() =>\n {\n if (this.state.accountId !== \"\")\n {\n var apiData = await fetchApi(\"BUDGET_RESULTS\", [this.state.accountId])\n apiData = apiData.filter(x => x.active.toLowerCase() === \"active\" || x.active === \"\")\n return apiData;\n }\n\n return []\n }\n\n setAccountId = (accountid) =>\n {\n this.setState({accountId: accountid, redirectAccountId: 0 })\n }\n\n render() {\n return(\n <>\n
\n
\n
\n Recent Budget Output \n
\n
\n \n );\n }\n}\n\nexport default BudgetResults","import React, { Component } from \"react\";\nimport ApexCharts from 'react-apexcharts';\nimport fetchApi from '../FetchApi';\n\nexport class GroupedBarChart extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n spendShareSeries: [],\n effectShareSeries: [],\n campaignGrouping: [],\n roi: [],\n selectedBudgetPlanId: this.props.selectedBudgetPlanId\n }\n\n };\n\n componentDidMount = async () =>\n { \n \n await this.fetchData();\n await this.adjustSvgHeight();\n }\n\n componentDidUpdate = async () =>\n {\n await this.adjustSvgHeight();\n if (this.props.selectedBudgetPlanId !== this.state.selectedBudgetPlanId)\n {\n await this.fetchData();\n }\n }\n\n fetchData = async () =>\n {\n var json = await fetchApi(\"SPEND_EFFECT_SHARE\", [this.props.selectedBudgetPlanId])\n var apiSpendShareSeries = []\n var apiEffectShareSeries = []\n var apiCampaignGrouping = []\n var apiRoi = []\n for (var i = 0; i < json.length; i++)\n {\n apiSpendShareSeries.push(json[i].spend_share)\n apiEffectShareSeries.push(json[i].effect_share)\n apiCampaignGrouping.push(json[i].name)\n apiRoi.push(json[i].kpi_efficiency_value)\n }\n \n this.setState({\n spendShareSeries: apiSpendShareSeries,\n effectShareSeries: apiEffectShareSeries,\n campaignGrouping: apiCampaignGrouping,\n selectedBudgetPlanId : this.props.selectedBudgetPlanId,\n roi: apiRoi\n });\n }\n\n adjustSvgHeight = async() => {\n const svgElement = this.chart.chart.ctx.el.getElementsByTagName('svg')[0];\n svgElement.setAttribute('height', '800'); // Adjust the height value as needed\n }\n\n render() {\n var conversionType = \"\"\n switch (this.props.conversionType)\n {\n case \"Revenue\":\n conversionType = \"ROAS\";\n break;\n case \"Reach\":\n conversionType = \"KPI / Spend\";\n break;\n case \"Conversions\":\n conversionType = \"CPA\";\n break;\n case \"New Visitors\":\n conversionType = \"NV / Spend\";\n break;\n case \"CPM\":\n conversionType = \"CPM\";\n break;\n case \"Impressions\":\n conversionType = \"CPM\";\n break;\n case \"Views\":\n conversionType = \"CPM\";\n break;\n case \"ThruPlays\":\n conversionType = \"CPM\";\n break;\n case \"Leads\":\n conversionType = \"CPL\";\n break;\n case \"Purchases\":\n conversionType = \"Cost Per. Purchase\";\n break;\n case \"Sales\":\n conversionType = \"Cost Per. Sale\";\n break;\n case \"Landing Page Views\":\n conversionType = \"CPLPV\";\n break;\n case \"Link Clicks\":\n conversionType = \"CPLC\";\n break;\n case \"Free Trials\":\n conversionType = \"CPFT\";\n break;\n case \"Installs\":\n conversionType = \"Cost Per. Install\";\n break;\n case \"Referrals\":\n conversionType = \"Cost Per. Referrals\";\n break;\n case \"Signups\":\n conversionType = \"Cost Per. Signup\";\n break;\n case \"Clicks\":\n conversionType = \"CPC\";\n break;\n case \"Bookings\":\n conversionType = \"Cost Per. Booking\";\n break;\n\n }\n\n var series = [{name: this.props.conversionType + \" %\", type: 'column', data: this.state.effectShareSeries},{name: \"Spend %\", data: this.state.spendShareSeries, type: 'column'}, {name: conversionType , data: this.state.roi, type: 'line'}]\n var options = {\n chart: {\n type: 'line',\n offsetY: 10,\n \n toolbar:{\n show: true,\n tools:\n {\n selection: false,\n zoom: false,\n zoomin: false,\n zoomout: false,\n pan: false,\n reset: false\n },\n export: {\n csv: {\n filename: \"GroupedBarChart_CSV_\" + Date.now(),\n },\n png: {\n filename: \"GroupedBarChart_PNG_\" + Date.now(),\n },\n svg: {\n filename: \"GroupedBarChart_SVG_\" + Date.now(),\n }\n }\n },\n },\n colors: ['#A8DADC', '#1D3557', '#ff0000'],\n dataLabels: {\n enabled: true,\n enabledOnSeries: [2]\n },\n \n stroke: {\n show: true,\n width: [0, 0, 2],\n curve: 'smooth',\n },\n yaxis: [\n {\n seriesName: this.props.conversionType + \" %\",\n title: {\n text: \"Percent\"\n },\n },\n {\n seriesName: \"Spend %\",\n show:false\n },\n {\n opposite:true,\n seriesName: conversionType,\n title: {\n text: conversionType,\n style:{\n color: \"red\"\n }\n }\n },\n ],\n tooltip: {\n shared: true,\n intersect: false\n },\n xaxis: {\n categories: this.state.campaignGrouping,\n labels: {\n rotate: -45,\n rotateAlways: true,\n hideOverlappingLabels: false,\n offsetX: 11,\n style: {\n fontSize: '10px', // Adjust font size if needed\n \n },\n }\n },\n legend: {\n position: 'top', // Move legend to the top of the chart\n },\n \n }\n return (\n
this.chart = chart} options={options} series={series} type=\"line\" />\n );\n }\n}\n\nexport default GroupedBarChart","export default __webpack_public_path__ + \"static/media/circle.24597bee.png\";","import React, { Component } from \"react\";\nimport ApexChartsAPI, { exec } from 'apexcharts';\nimport ApexCharts from 'react-apexcharts';\nimport circle from '../images/circle.png';\nimport square from '../images/square.png'; \nimport clonedeep from 'lodash/cloneDeep';\nimport moment from '@date-io/moment';\n\nclass LineChart extends React.Component {\n constructor(props) {\n super(props);\n\n var chartOptions = {}\n switch(this.props.chartType)\n {\n case \"ResponseCurves\":\n chartOptions = this.setResponseCurvesChartOptions()\n break;\n case \"MarginalROAS\":\n chartOptions = this.setChartOptions()\n break;\n case \"MarginalROASOverall\":\n chartOptions = this.setChartOptions()\n break;\n case \"OverallResponseCurve\":\n chartOptions = this.setChartOptions()\n break;\n case \"TimeSeries\":\n chartOptions = this.setTimeSeriesChartOptions();\n break;\n }\n\n this.state = {\n revenueSeries : [],\n costSeries: [],\n campaignGrouping: [],\n campaignGroupingIds: [],\n selectedBudgetPlanId: this.props.selectedBudgetPlanId,\n recommendedBudget: [],\n marginalROASSeries: [],\n isAnnotationToggled: true,\n chartOptions: chartOptions,\n marginalROASOverallSeries: [],\n overallSeries: [],\n timeSeries: [],\n timeSeriesKPI: [],\n chartOptions: chartOptions,\n timeSeriesParameters: {},\n };\n }\n\n componentDidMount = async () =>\n { \n if ((this.props.chartType === \"ResponseCurves\" || this.props.chartType === \"MarginalROAS\") && this.props.viewType !== \"Campaign\")\n {\n this.fetchData(false);\n }\n\n if ((this.props.chartType === \"MarginalROASOverall\" || this.props.chartType === \"OverallResponseCurve\") && this.props.viewType !== \"Campaign\")\n {\n this.fetchMarginalData(false)\n }\n }\n\n static getDerivedStateFromProps(props, state)\n {\n return {selectedBudgetPlanId: props.selectedBudgetPlanId}\n }\n\n componentDidUpdate = async (prevProps, prevState) =>\n { \n var recommendedBudget = this.props.recommendedBudget.map(x => x.rec_budget)\n if ((prevProps.selectedBudgetPlanId !== this.props.selectedBudgetPlanId && (this.props.chartType === \"ResponseCurves\" || this.props.chartType === \"MarginalROAS\" )))\n {\n this.fetchData(false);\n return;\n }\n\n if ((prevProps.selectedBudgetPlanId !== this.props.selectedBudgetPlanId && (this.props.chartType === \"MarginalROASOverall\" || this.props.chartType === \"OverallResponseCurve\")))\n {\n this.fetchMarginalData(false);\n return;\n }\n\n if (JSON.stringify(prevProps.selectedCampaignGroupings) !== JSON.stringify(this.props.selectedCampaignGroupings) && this.props.viewType === \"Campaign\")\n {\n var isOptimized = false\n if (!recommendedBudget.every(e => e === 0))\n isOptimized = true\n switch (this.props.chartType)\n {\n case \"ResponseCurves\":\n this.fetchData(isOptimized)\n break;\n case \"MarginalROAS\":\n this.fetchData(isOptimized)\n break;\n }\n return;\n }\n\n if (JSON.stringify(prevProps.recommendedBudget) !== JSON.stringify(this.props.recommendedBudget) && JSON.stringify(this.props.recommendedBudget) !== '[]')\n {\n var allAreZero = recommendedBudget.every(e => e === 0)\n if (!allAreZero)\n {\n switch (this.props.chartType)\n {\n case \"ResponseCurves\":\n this.fetchData(true)\n break;\n case \"MarginalROAS\":\n this.fetchData(true)\n break;\n case \"MarginalROASOverall\":\n this.fetchMarginalData(true)\n break;\n case \"OverallResponseCurve\":\n this.fetchMarginalData(true)\n break;\n }\n }\n }\n\n if (JSON.stringify(prevProps.recommendedBudget) !== JSON.stringify(this.props.recommendedBudget) && this.props.chartType === \"TimeSeries\")\n {\n var allAreZero = recommendedBudget.every(e => e === 0)\n if (!allAreZero)\n {\n this.props.fetchDataTimeSeriesLineChart()\n return;\n }\n }\n\n if (this.props.chartType === \"TimeSeries\")\n {\n if ((JSON.stringify(this.props.timeSeriesParams) !== JSON.stringify(this.state.timeSeriesParameters)) || JSON.stringify(this.state.timeSeriesKPI) !== JSON.stringify(this.props.timeSeriesKPI))\n {\n this.setTimeSeriesChartData();\n }\n }\n }\n\n fetchMarginalData = async (isOptimized) =>\n {\n var marginalOverallParams = await this.props.fetchMarginalOverallData(isOptimized)\n var costArray = marginalOverallParams[0]\n var kpiArray = marginalOverallParams[1]\n var marginalKpiArray = marginalOverallParams[2]\n if (this.props.chartType === \"MarginalROASOverall\")\n {\n this.setOverallMarginalROASChartData(costArray, marginalKpiArray, isOptimized);\n }\n\n if (this.props.chartType === \"OverallResponseCurve\")\n {\n this.setOverallResponseCurveChartData(costArray, kpiArray, isOptimized);\n }\n }\n\n setMarginalROASChartData = (json, isOptimized) =>\n {\n if (json.length !== 0)\n {\n var apiCostSeries = [];\n var apiCampaignGrouping = [];\n var marginalROASSeries = [];\n var data = json;\n\n for (var i = 0; i < data.length; i++)\n {\n apiCostSeries.push(data[i].cost)\n apiCampaignGrouping.push(data[i].campaign_group_name)\n }\n \n //get unique campaign groupings\n apiCampaignGrouping = apiCampaignGrouping.filter((v, i, a) => a.indexOf(v) === i);\n\n for (var x = 0; x < apiCampaignGrouping.length; x++)\n {\n\n var filteredData = data.filter(item => item.campaign_group_name === apiCampaignGrouping[x])\n var costDiff = filteredData[1].cost - filteredData[0].cost\n \n marginalROASSeries.push({\n name: apiCampaignGrouping[x],\n data: filteredData.map((item) => {\n // Check if cost is within bounds\n if (parseFloat(item.cost) >= (parseFloat(item.lower_quant_bounds_budget)+(costDiff)) && parseFloat(item.cost) <= (parseFloat(item.upper_quant_bounds_budget)+costDiff)) {\n return item.marginal_kpi;\n } else {\n \n return null;\n }\n })\n });\n \n }\n \n // sort the cost series for X axis and get unique values\n apiCostSeries.sort(function(a,b){return a-b;})\n apiCostSeries = apiCostSeries.filter((v, i, a) => a.indexOf(v) === i)\n //apiCostSeries = apiCostSeries.filter(x => {if(parseFloat(x) !== NaN){return x}})\n\n\n //apiCostSeries = this.multiplyDataSet(apiCostSeries)\n var options = this.setChartOptions(apiCostSeries, isOptimized)\n \n this.setState({\n campaignGrouping: apiCampaignGrouping,\n selectedBudgetPlanId: this.props.selectedBudgetPlanId,\n marginalROASSeries: marginalROASSeries,\n chartOptions: options\n }); \n }\n }\n\n // simpleMovingAverage = (data, window) => {\n // if (!data || data.length < window) {\n // return [];\n // }\n // let index = window - 1;\n // const length = data.length + 1;\n // const simpleMovingAverages = [];\n // while (++index < length) {\n // const windowSlice = data.slice(index - window, index);\n // const sum = windowSlice.reduce((prev, curr) => prev + curr, 0);\n // simpleMovingAverages.push(sum / window);\n // }\n // return simpleMovingAverages;\n // }\n\n setOverallMarginalROASChartData = (costArray, marginalKpiArray, isOptimized) =>\n {\n //var roas = []\n var marginalROASOverallSeries = []\n\n // for (var i = 1; i < kpiArray.length; i++)\n // {\n // //change this later to be dynamic based on covnersion type\n // if (this.props.converstionType !== 'Revenue')\n // roas.push((costArray[i] - costArray[i-1]) / (kpiArray[i] - kpiArray[i-1]));\n // else\n // roas.push((kpiArray[i] - kpiArray[i-1]) / (costArray[i] - costArray[i-1]));\n // }\n //roas = this.simpleMovingAverage(roas, 3)\n marginalROASOverallSeries.push({name: \"Marginal KPI Efficiency\", data: marginalKpiArray})\n\n costArray.sort(function(a,b){return a-b;})\n costArray = costArray.filter((v, i, a) => a.indexOf(v) === i) \n //costArray = this.multiplyDataSet(costArray)\n var options = this.setChartOptions(costArray, isOptimized)\n \n this.setState({\n marginalROASOverallSeries: marginalROASOverallSeries,\n chartOptions: options,\n }); \n }\n\n setOverallResponseCurveChartData = (costArray, kpiArray, isOptimized) =>\n {\n var overallSeries = []\n overallSeries.push({name: \"OverallResponseSeries\", data: kpiArray}) //this.multiplyDataSet(kpiArray)})\n\n costArray.sort(function(a,b){return a-b;})\n costArray = costArray.filter((v, i, a) => a.indexOf(v) === i) \n //costArray = this.multiplyDataSet(costArray)\n var options = this.setChartOptions(costArray, isOptimized)\n \n this.setState({\n overallSeries: overallSeries,\n chartOptions: options,\n }); \n }\n\n setTimeSeriesChartData = () =>\n {\n var uniqueDates = this.props.timeSeriesDate.filter((v, i, a) => a.indexOf(v) === i);\n //Each index in this array represents a full week.\n var weeksArray = [];\n var timeSeriesWeeklyData = [];\n if (this.props.timeSeriesParams[\"timeSeriesSegment\"] === \"Monthly\")\n {\n uniqueDates = uniqueDates.map((x) => {var date = x.split('-'); return date[1] + '-' + date[2] + '-' + date[0] })\n uniqueDates = uniqueDates.map((x) => {return new Date(x).toLocaleDateString('en-US', {month: 'short'})})\n uniqueDates = uniqueDates.filter((v, i, a) => a.indexOf(v) === i);\n }\n if (this.props.timeSeriesParams[\"timeSeriesSegment\"].includes(\"Weekly\"))\n {\n var weeklySegment = this.props.timeSeriesParams[\"timeSeriesSegment\"].includes(\"(Sunday - Saturday)\") ? 6 : 7\n timeSeriesWeeklyData = this.props.setTimeSeriesWeeklyData(weeklySegment, uniqueDates)\n weeksArray = timeSeriesWeeklyData[0];\n uniqueDates = timeSeriesWeeklyData[1];\n }\n var timeSeries = []\n var options = this.setTimeSeriesChartOptions(uniqueDates)\n timeSeries = this.props.timeSeriesParams[\"timeSeriesSegment\"].includes(\"Weekly\") ? this.createWeeklyTimeSeriesData(weeksArray) : this.createTimeSeriesData(uniqueDates, this.props.timeSeriesParams[\"timeSeriesSegment\"])\n\n this.setState({\n timeSeries: timeSeries,\n timeSeriesKPI: this.props.timeSeriesKPI,\n chartOptions: options,\n previousData: this.props.data,\n timeSeriesParameters: clonedeep(this.props.timeSeriesParams)\n }); \n } \n\n createWeeklyTimeSeriesData = (weeksArray) =>\n {\n var timeSeriesCostData = [];\n var timeSeriesKPIData = [];\n var indexArray = [];\n var timeSeriesDate = this.props.timeSeriesDate;\n var timeSeriesCostArray = this.props.timeSeriesCost;\n var timeSeriesKPIArray = this.props.timeSeriesKPI;\n var timeSeriesCost = 0;\n var timeSeriesKPI = 0;\n\n if (this.props.timeSeriesParams[\"timeSeriesCampaignGrouping\"] !== \"All\")\n {\n var timeSeriesCampaignGroupingData = this.props.timesSeriesCampaignFilter()\n timeSeriesDate = timeSeriesCampaignGroupingData[0];\n timeSeriesCostArray = timeSeriesCampaignGroupingData[1];\n timeSeriesKPIArray = timeSeriesCampaignGroupingData[2];\n }\n\n for (var x = 0; x < weeksArray.length; x++)\n {\n for (var y = 0; y < weeksArray[x].length; y++)\n {\n indexArray = timeSeriesDate.map((e, index) => e === weeksArray[x][y] ? index : '').filter(String);\n var timeSeriesCalculationResult = this.props.timeSeriesCalculation(indexArray, timeSeriesCostArray, timeSeriesKPIArray)\n timeSeriesCost = timeSeriesCost + timeSeriesCalculationResult[0]\n timeSeriesKPI = timeSeriesKPI + timeSeriesCalculationResult[1]\n }\n timeSeriesCostData.push(timeSeriesCost)\n timeSeriesKPIData.push(timeSeriesKPI)\n timeSeriesCost = 0;\n timeSeriesKPI = 0;\n }\n return [{name: \"Spend\", data:timeSeriesCostData}, {name: \"KPI\", data:timeSeriesKPIData}]\n }\n\n createTimeSeriesData = (uniqueDates, segment) =>\n {\n var timeSeriesCostData = [];\n var timeSeriesKPIData = [];\n var indexArray = [];\n var timeSeriesDate = this.props.timeSeriesDate;\n var timeSeriesCostArray = this.props.timeSeriesCost;\n var timeSeriesKPIArray = this.props.timeSeriesKPI;\n\n if (this.props.timeSeriesParams[\"timeSeriesCampaignGrouping\"] !== \"All\")\n {\n var timeSeriesCampaignGroupingData = this.props.timesSeriesCampaignFilter()\n timeSeriesDate = timeSeriesCampaignGroupingData[0];\n timeSeriesCostArray = timeSeriesCampaignGroupingData[1];\n timeSeriesKPIArray = timeSeriesCampaignGroupingData[2];\n }\n \n for (var i = 0; i < uniqueDates.length; i++)\n {\n //get all indexs for the given dates\n switch (segment)\n {\n case \"Daily\":\n indexArray = timeSeriesDate.map((e, index) => e === uniqueDates[i] ? index : '').filter(String);\n break;\n case \"Monthly\":\n indexArray = timeSeriesDate.map((e, index) => new Date(e).toLocaleDateString('default', {month: 'short'}) === uniqueDates[i] ? index : '').filter(String);\n }\n \n var timeSeriesCalculationResult = this.props.timeSeriesCalculation(indexArray, timeSeriesCostArray, timeSeriesKPIArray)\n timeSeriesCostData.push(timeSeriesCalculationResult[0])\n timeSeriesKPIData.push(timeSeriesCalculationResult[1])\n }\n\n return [{name: \"Spend\", data:timeSeriesCostData}, {name: \"KPI\", data:timeSeriesKPIData}]\n }\n\n setRecommendedBudget()\n {\n var selectedCampaignGroupIds = []\n var recommendedBudget = []\n if (this.props.viewType === \"Campaign\")\n {\n selectedCampaignGroupIds = this.props.selectedCampaignGroupings.map(x => x.value)\n var recommendedBudgetIds = this.props.recommendedBudget.map(x => x.id)\n\n for (var x = 0; x < selectedCampaignGroupIds.length; x++)\n {\n if (recommendedBudgetIds.includes(selectedCampaignGroupIds[x]))\n recommendedBudget.push(this.props.recommendedBudget.find((e) => e.id === selectedCampaignGroupIds[x]).rec_budget)\n }\n }\n else\n recommendedBudget = this.props.recommendedBudget.map(x => x.rec_budget)\n\n return recommendedBudget\n }\n\n // gets the value from the series thats closest to the historical spend.\n getAnnotationCoordinates = (series, historicalSpend = 0) =>\n {\n if (series.length > 0 && historicalSpend > 0)\n {\n return series.reduce(function(prev, curr) {\n return (Math.abs(curr - historicalSpend) < Math.abs(prev -historicalSpend) ? curr : prev);\n });\n }\n\n return 0;\n }\n\n setBudgetAnnotation = (options, historicalSpend, annotationYAxis, annotationXAxis, annotationYAxisRecBudget, annotationXAxisRecBudget) =>\n {\n var recommendedBudget = this.setRecommendedBudget()\n \n var annotationList = {points: []}\n for (var i = 0; i < historicalSpend.length; i++)\n {\n annotationList.points.push({y: annotationYAxis[i], x: annotationXAxis[i], marker:{shape: \"circle\", size:5}, label: {text: Number(historicalSpend[i]).toFixed(2).toString()}})\n }\n \n for (var i = 0; i < recommendedBudget.length; i++)\n {\n var x = annotationXAxisRecBudget.length === 0 ? '0' : annotationXAxisRecBudget[i]\n var y = annotationYAxisRecBudget.length === 0 ? '0' : annotationYAxisRecBudget[i]\n annotationList.points.push({y: y, x: x, marker:{shape: \"square\", radius: 0, size:7}, label: {text: Number(recommendedBudget[i]).toFixed(2).toString()}})\n }\n options.annotations = annotationList;\n return options;\n }\n updateResponseCurveDataAndAnnotations = (json, chart, revenueSeries, costSeries, chartOptions, campaignGrouping, campaignGroupingIds, isAnnotationToggled) =>\n {\n var recommendedBudget = this.setRecommendedBudget()\n if (recommendedBudget.length > 0 && recommendedBudget.every(e => e !== 0))\n {\n if(JSON.stringify(recommendedBudget).includes('undefined'))\n {return;}\n // var multipliedDataSet = this.multiplyDataSetResponseCurve(chartOptions, revenueSeries, costSeries);\n //chartOptions = multipliedDataSet[2]\n // chartOptions.xaxis.categories = multipliedDataSet[0]\n chartOptions.xaxis.categories = costSeries\n\n // for (var i = 0; i < campaignGrouping.length; i++)\n // {\n // var filteredJson = json.filter(item => item.campaign_group_name === campaignGrouping[i])\n // chartOptions.annotations.points[i + (chartOptions.annotations.points.length / 2)].x = this.getAnnotationCoordinates(costSeries/*multipliedDataSet[0]*/, recommendedBudget[i])\n // var YAxisAnnotationCoordinate = filteredJson.find(({cost}) => {return (parseFloat(cost) /** multipliedDataSet[3]*/).toFixed(2).toString() === chartOptions.annotations.points[i + (chartOptions.annotations.points.length / 2)].x});\n // if (YAxisAnnotationCoordinate)\n // {\n // chartOptions.annotations.points[i + (chartOptions.annotations.points.length / 2)].y = YAxisAnnotationCoordinate.kpi_value /** multipliedDataSet[3]*/\n // }\n // chartOptions.annotations.points[i + (chartOptions.annotations.points.length / 2)].label.text = Number(recommendedBudget[i]).toFixed(0).toString()\n // }\n \n chart.updateOptions(chartOptions)\n //chart.updateSeries(multipliedDataSet[1])\n chart.updateSeries(revenueSeries)\n this.setState({\n chartOptions : chartOptions,\n revenueSeries: revenueSeries,//multipliedDataSet[1],\n costSeries : costSeries, //multipliedDataSet[0],\n campaignGrouping: campaignGrouping,\n campaignGroupingIds: campaignGroupingIds,\n isAnnotationToggled: isAnnotationToggled\n }) \n }\n }\n\n // multiplyDataSetResponseCurve = (chartOptions, revenueSeries, costSeries) =>\n // {\n // var daysDiff = (Math.abs(new Date(this.props.selectedDateEnd) - new Date(this.props.selectedDateStart))) / (1000*60*60*24);\n // costSeries = costSeries.map(x =>(parseFloat(x) * (daysDiff + 1)).toFixed(2))\n // for (var i = 0; i < revenueSeries.length; i++)\n // {\n // revenueSeries[i].data = revenueSeries[i].data.map(x => (parseFloat(x) * (daysDiff + 1)).toFixed(2).toString())\n // }\n // for (i = 0; i < chartOptions.annotations.points.length / 2; i++)\n // {\n // chartOptions.annotations.points[i].x = (parseFloat(chartOptions.annotations.points[i].x) * (daysDiff + 1)).toFixed(2).toString()\n // chartOptions.annotations.points[i].y = (parseFloat(chartOptions.annotations.points[i].y) * (daysDiff + 1)).toFixed(2).toString()\n // chartOptions.annotations.points[i].label.text = (parseFloat(chartOptions.annotations.points[i].label.text) * (daysDiff + 1)).toFixed(0).toString() \n // }\n\n // return [costSeries, revenueSeries, chartOptions, daysDiff + 1]\n // }\n\n // multiplyDataSet = (series) =>\n // {\n // if (this.props.selectedDateEnd !== null && this.props.selectedDateStart !== null)\n // {\n // var daysDiff = (Math.abs(new Date(this.props.selectedDateEnd) - new Date(this.props.selectedDateStart))) / (1000*60*60*24);\n // series = series.map(x =>(parseFloat(x) * (daysDiff + 1)).toFixed(2))\n // }\n // return series;\n // }\n\n toggleAnnotations = () =>\n {\n var chart = ApexChartsAPI.getChartByID(\"ResponseCurves\");\n var points = clonedeep(chart.annotations.pointsAnnotations.w.config.annotations.points);\n if (this.state.isAnnotationToggled)\n {\n points.map(val => val.label.style.cssClass = \"hide-annotation\");\n points.map(val => val.marker.size = 0);\n chart.annotations.pointsAnnotations.w.config.annotations.points = points;\n chart.updateOptions({});\n this.setState({isAnnotationToggled: false})\n }\n else\n {\n for (var i = 0; i < chart.series.w.globals.series.length; i++)\n {\n if (chart.series.w.globals.series[i].length > 0)\n {\n points[i].label.style.cssClass = \"show-annotation\";\n points[i].marker.size = 5;\n points[i + (points.length / 2)].label.style.cssClass = \"show-annotation\";\n points[i + (points.length / 2)].marker.size = 7;\n }\n }\n chart.annotations.pointsAnnotations.w.config.annotations.points = points;\n chart.updateOptions({});\n this.setState({isAnnotationToggled: true})\n }\n }\n\n fetchData = async (isOptimized) =>\n {\n //TODO\n //Change this to this.props.selectedGroupingsIds when passing to fetchResponseCurveData\n var json = await this.props.fetchResponseCurveData(this.props.selectedCampaignGroupings, this.props.selectedBudgetPlanId, isOptimized)\n if (this.props.chartType === \"ResponseCurves\")\n {\n var responseCurveSetupParams = await this.setResponseCurveData(json, isOptimized)\n \n if(isOptimized)\n {\n for (var i = 0; i < this.state.campaignGrouping.length; i++)\n {\n var chart = ApexChartsAPI.getChartByID(\"ResponseCurves\");\n chart.showSeries(this.state.campaignGrouping[i])\n }\n await this.updateResponseCurveDataAndAnnotations(json, chart, responseCurveSetupParams[0], responseCurveSetupParams[5], responseCurveSetupParams[3], responseCurveSetupParams[1], responseCurveSetupParams[2], responseCurveSetupParams[4])\n }\n\n else\n {\n this.setState({\n revenueSeries: responseCurveSetupParams[0],\n campaignGrouping: responseCurveSetupParams[1],\n campaignGroupingIds: responseCurveSetupParams[2],\n chartOptions: responseCurveSetupParams[3],\n isAnnotationToggled: responseCurveSetupParams[4],\n costSeries: responseCurveSetupParams[5]\n }); \n }\n }\n \n else\n this.setMarginalROASChartData(json, isOptimized);\n }\n\n setResponseCurveData = async (json, isOptimized) =>\n {\n if (json.length > 0)\n {\n var apiRevenueSeries = []\n var apiCostSeries = []\n var apiCampaignGrouping = []\n var apiCampaignAvgHistoricalSpend = []\n var apiAnnotationXAxis = []\n var apiAnnotationYAxis = []\n var apiAnnotiationXAxisRecBudget = []\n var apiAnnotiationYAxisRecBudget = []\n var apiCampaignGroupingIds = []\n\n for (var i = 0; i < json.length; i++)\n {\n apiCostSeries.push({cost:json[i].cost, campaignGroupingName: json[i].campaign_group_name})\n apiCampaignGrouping.push(json[i].campaign_group_name)\n apiCampaignGroupingIds.push(json[i].campaign_group_id)\n apiCampaignAvgHistoricalSpend.push(json[i].avg_hist_spend)\n }\n // sort the cost series for X axis\n apiCostSeries = apiCostSeries.sort(function(a,b){return a.cost-b.cost;})\n // get unique values for campaign avg_hist_spend\n apiCampaignAvgHistoricalSpend = apiCampaignAvgHistoricalSpend.filter((v, i, a) => a.indexOf(v) === i)\n // get unique values for campaign groupings\n apiCampaignGrouping = apiCampaignGrouping.filter((v, i, a) => a.indexOf(v) === i);\n apiCampaignGroupingIds = apiCampaignGroupingIds.filter((v, i, a) => a.indexOf(v) === i);\n var recommendedBudget = this.setRecommendedBudget()\n // for each campaign group, get the revenue data for that campaign group\n for (i = 0; i < apiCampaignGrouping.length; i++)\n {\n var filteredJson = json.filter(item => item.campaign_group_name === apiCampaignGrouping[i])\n var costDiff = filteredJson[1].cost - filteredJson[0].cost\n apiRevenueSeries.push({\n name: apiCampaignGrouping[i],\n data: filteredJson.map((item) => {\n // Check if cost is within bounds\n if (/*parseFloat(item.cost) >= (parseFloat(item.lower_quant_bounds_budget)-costDiff) && */ parseFloat(item.cost) <= (parseFloat(item.upper_quant_bounds_budget)+costDiff)) {\n return item.kpi_value;\n } else {\n \n return null;\n }\n })\n });\n // get X and Y axis for annotating historical spend & recommended budget\n var costSeries = apiCostSeries.filter(x => {if(x.campaignGroupingName === apiCampaignGrouping[i]){return x}}).map(x => x.cost)\n apiAnnotationXAxis.push(this.getAnnotationCoordinates(costSeries, apiCampaignAvgHistoricalSpend[i]))\n apiAnnotationYAxis.push(filteredJson.find(({cost}) => cost === apiAnnotationXAxis[i]).kpi_value)\n if (recommendedBudget.every(e => e !== 0) && recommendedBudget.length > 0 && recommendedBudget.length === apiCampaignGrouping.length)\n {\n apiAnnotiationXAxisRecBudget.push(this.getAnnotationCoordinates(costSeries, recommendedBudget[i]))\n apiAnnotiationYAxisRecBudget.push(filteredJson.find(({cost}) => cost === apiAnnotiationXAxisRecBudget[i]).kpi_value)\n }\n }\n apiCostSeries = apiCostSeries.filter((v, i, a) => i === a.findIndex((t) => (t.cost === v.cost))).map(x => x.cost) \n var options = this.setResponseCurvesChartOptions(apiCostSeries, isOptimized)\n options = this.setBudgetAnnotation(options, apiCampaignAvgHistoricalSpend, apiAnnotationYAxis, apiAnnotationXAxis, apiAnnotiationYAxisRecBudget, apiAnnotiationXAxisRecBudget)\n return [apiRevenueSeries, apiCampaignGrouping, apiCampaignGroupingIds, options, true, apiCostSeries]\n } \n }\n\n setChartOptions = (seriesXAxis, isOptimized) =>\n {\n var titleText = \"\"\n var xAxisText = \"\"\n var yAxisText = \"\"\n var filename = \"\"\n switch (this.props.conversionType)\n {\n case 'Revenue':\n yAxisText = 'Marginal ROAS' + (isOptimized ? \"\" : \" (\" + this.props.modelFrequency + \")\")\n break;\n case 'Conversions':\n yAxisText = 'Marginal CPA' + (isOptimized ? \"\" : \" (\" + this.props.modelFrequency + \")\")\n break;\n case 'Reach':\n yAxisText = 'Marginal KPI / Spend' + (isOptimized ? \"\" : \" (\" + this.props.modelFrequency + \")\")\n break;\n case 'New Visitors':\n yAxisText = 'Marginal NV / Spend' + (isOptimized ? \"\" : \" (\" + this.props.modelFrequency + \")\")\n break;\n case \"CPM\":\n yAxisText = yAxisText = 'Marginal CPM' + (isOptimized ? \"\" : \" (\" + this.props.modelFrequency + \")\")\n break;\n case \"Impressions\":\n yAxisText = yAxisText = 'Marginal CPM' + (isOptimized ? \"\" : \" (\" + this.props.modelFrequency + \")\")\n break;\n case \"Views\":\n yAxisText = yAxisText = 'Marginal CPM' + (isOptimized ? \"\" : \" (\" + this.props.modelFrequency + \")\")\n break;\n case \"ThruPlays\":\n yAxisText = yAxisText = 'Marginal CPM' + (isOptimized ? \"\" : \" (\" + this.props.modelFrequency + \")\")\n break;\n case \"Leads\":\n yAxisText = yAxisText = 'Marginal CPL' + (isOptimized ? \"\" : \" (\" + this.props.modelFrequency + \")\")\n break;\n case \"Purchases\":\n yAxisText = yAxisText = 'Marginal Cost Per. Purchase' + (isOptimized ? \"\" : \" (\" + this.props.modelFrequency + \")\")\n break;\n case \"Sales\":\n yAxisText = yAxisText = 'Marginal Cost Per. Sale' + (isOptimized ? \"\" : \" (\" + this.props.modelFrequency + \")\")\n break;\n case \"Landing Page Views\":\n yAxisText = yAxisText = 'Marginal CPLPV' + (isOptimized ? \"\" : \" (\" + this.props.modelFrequency + \")\")\n break;\n case \"Link Clicks\":\n yAxisText = yAxisText = 'Marginal CPLC' + (isOptimized ? \"\" : \" (\" + this.props.modelFrequency + \")\")\n break;\n case \"Free Trials\":\n yAxisText = yAxisText = 'Marginal CPFT' + (isOptimized ? \"\" : \" (\" + this.props.modelFrequency + \")\")\n break;\n case \"Installs\":\n yAxisText = yAxisText = 'Marginal Cost Per. Install' + (isOptimized ? \"\" : \" (\" + this.props.modelFrequency + \")\")\n break;\n case \"Referrals\":\n yAxisText = yAxisText = 'Marginal Cost Per. Referrals' + (isOptimized ? \"\" : \" (\" + this.props.modelFrequency + \")\")\n break;\n case \"Signups\":\n yAxisText = yAxisText = 'Marginal Cost Per. Signup' + (isOptimized ? \"\" : \" (\" + this.props.modelFrequency + \")\")\n break;\n case \"Clicks\":\n yAxisText = yAxisText = 'Marginal CPC' + (isOptimized ? \"\" : \" (\" + this.props.modelFrequency + \")\")\n break;\n case \"Bookings\":\n yAxisText = yAxisText = 'Marginal Cost Per. Booking' + (isOptimized ? \"\" : \" (\" + this.props.modelFrequency + \")\")\n break;\n }\n switch(this.props.chartType)\n {\n case \"MarginalROAS\":\n titleText = 'Marginal KPI Efficiency by Grouping'\n xAxisText = 'Cost'\n filename = 'marginal_by_grouping_'\n break;\n case \"MarginalROASOverall\":\n titleText = 'Marginal KPI Efficiency Overall'\n xAxisText = 'Spend'\n filename = 'marginal_roas_overall_'\n break;\n case \"OverallResponseCurve\":\n filename = 'overall_'\n titleText = 'Overall Response Curve'\n xAxisText = 'Spend'\n yAxisText = this.props.conversionType + (isOptimized ? \"\" : \" (\" + this.props.modelFrequency + \")\")\n break;\n } \n var options = {\n chart: {\n height: 430,\n type: 'line',\n id: this.props.chartType,\n animations:{\n enabled:false\n },\n dropShadow: {\n enabled: true,\n color: '#000',\n top: 18,\n left: 7,\n blur: 10,\n opacity: 0.2,\n },\n toolbar:{\n show: true,\n tools:\n {\n selection: true,\n zoom: true,\n zoomin: true,\n zoomout: true,\n pan: true,\n reset: true\n },\n export: {\n csv: {\n filename: filename + \"_csv_\" + Date.now(),\n },\n png: {\n filename:filename + \"_png_\" + Date.now(),\n },\n svg: {\n filename: filename + \"_svg_\" + Date.now(),\n }\n }\n }, \n },\n colors: ['#e63946', '#fcbf49', '#a8dadc', '#457b9d', '#1d3557'],\n dataLabels: {\n enabled: false,\n },\n \n title: {\n text: titleText,\n align: 'left',\n style: {\n fontFamily:\"'Inter', sans-serif\",\n fontSize:\"18px\",\n color:\"#3C3C3C\",\n fontWeight:\"600\",\n }\n },\n grid: {\n borderColor: '#e7e7e7',\n row: {\n colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns\n opacity: 0.5\n },\n },\n markers: {\n size: 0\n },\n xaxis: {\n categories: seriesXAxis,\n title: {\n text: xAxisText\n },\n tickAmount: 10,\n labels:\n {\n formatter: function(value){return Intl.NumberFormat('en-US', {style:'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits:0}).format(value)}\n },\n },\n yaxis: {\n title: {\n text: yAxisText\n },\n decimalsInFloat: 2\n },\n legend: {\n position: 'top',\n horizontalAlign: 'right',\n floating: false,\n offsetY: -25,\n offsetX: -5\n }\n }\n\n return options;\n }\n\n setTimeSeriesChartOptions = (seriesXAxis) =>\n {\n var yAxisText = this.props.conversionType\n if(this.props.selectedBudgetPlanId === 78)\n {\n yAxisText = 'Reach';\n }\n var options = {\n chart: {\n height: 430,\n type: 'line',\n id: this.props.chartType,\n animations:{\n enabled:false\n },\n dropShadow: {\n enabled: true,\n color: '#000',\n top: 18,\n left: 7,\n blur: 10,\n opacity: 0.2,\n },\n toolbar:{\n show: true,\n tools:\n {\n selection: true,\n zoom: true,\n zoomin: true,\n zoomout: true,\n pan: true,\n reset: true\n },\n export: {\n csv: {\n filename: \"TimeSeries_CSV_\" + Date.now(),\n },\n png: {\n filename: \"TimeSeries_PNG_\" + Date.now(),\n },\n svg: {\n filename: \"TimeSeries_SVG_\" + Date.now(),\n }\n }\n },\n },\n colors: ['#457b9d','#e63946'],\n dataLabels: {\n enabled: false,\n },\n stroke: {\n curve: 'smooth', \n },\n title: {\n text: \"Time Series\",\n align: 'left',\n style: {\n fontFamily:\"'Inter', sans-serif\",\n fontSize:\"18px\",\n color:\"#3C3C3C\",\n fontWeight:\"600\",\n }\n },\n grid: {\n borderColor: '#e7e7e7',\n row: {\n colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns\n opacity: 0.5\n },\n },\n markers: {\n size: 0\n },\n xaxis: {\n categories: seriesXAxis,\n title: {\n text: \"Date\"\n },\n tickAmount: 15\n },\n yaxis: [{\n title: {\n text: 'Spend'\n },\n decimalsInFloat: 2\n },\n {\n opposite: true,\n title: {\n text: yAxisText\n },\n decimalsInFloat: 2\n }],\n legend: {\n position: 'top',\n horizontalAlign: 'right',\n floating: false,\n offsetY: -25,\n offsetX: -5\n }\n }\n\n return options;\n }\n\n setResponseCurvesChartOptions = (costSeries, isOptimized) =>\n {\n var self = this;\n var yAxisText = this.props.conversionType + (isOptimized ? \"\" : \" (\" + this.props.modelFrequency + \")\")\n if(this.props.selectedBudgetPlanId === 78)\n {\n yAxisText = 'KPI / Spend' + (isOptimized ? \"\" : \" (\" + this.props.modelFrequency + \")\")\n }\n var options = {\n chart: {\n height: 430,\n type: 'line',\n id: \"ResponseCurves\",\n animations:{\n enabled:false\n },\n dropShadow: {\n enabled: true,\n color: '#000',\n top: 18,\n left: 7,\n blur: 10,\n opacity: 0.2,\n },\n toolbar:{\n show: true,\n tools:\n {\n selection: true,\n zoom: true,\n zoomin: true,\n zoomout: true,\n pan: true,\n reset: true\n },\n export: {\n csv: {\n filename: \"ResponseCurves_CSV_\" + Date.now(),\n },\n png: {\n filename: \"ResponseCurves_PNG_\" + Date.now(),\n },\n svg: {\n filename: \"ResponseCurves_SVG_\" + Date.now(),\n }\n }\n },\n events:\n {\n legendClick: function(chartContext, seriesIndex, config)\n {\n if (self.state.isAnnotationToggled)\n {\n if (config.config.annotations.points[seriesIndex].marker.size !== 0)\n {\n config.config.annotations.points[seriesIndex].marker.size = 0;\n config.config.annotations.points[seriesIndex + (config.config.annotations.points.length / 2)].marker.size = 0;\n var configItem = clonedeep(config.config.annotations.points[seriesIndex]);\n var configItemTwo = clonedeep(config.config.annotations.points[seriesIndex + (config.config.annotations.points.length / 2)]);\n configItem.label.style.cssClass = \"hide-annotation\"\n configItemTwo.label.style.cssClass = \"hide-annotation\"\n config.config.annotations.points[seriesIndex] = configItem\n config.config.annotations.points[seriesIndex + (config.config.annotations.points.length / 2)] = configItemTwo\n }\n else\n {\n config.config.annotations.points[seriesIndex].marker.size = 5;\n config.config.annotations.points[seriesIndex + (config.config.annotations.points.length / 2)].marker.size = 7;\n var configItem = clonedeep(config.config.annotations.points[seriesIndex]);\n var configItemTwo = clonedeep(config.config.annotations.points[seriesIndex + (config.config.annotations.points.length / 2)]);\n configItem.label.style.cssClass = \"show-annotation\"\n configItemTwo.label.style.cssClass = \"show-annotation\"\n config.config.annotations.points[seriesIndex] = configItem\n config.config.annotations.points[seriesIndex + (config.config.annotations.points.length / 2)] = configItemTwo\n }\n }\n }\n }\n },\n colors: ['#e63946', '#fcbf49', '#a8dadc', '#457b9d', '#1d3557'],\n dataLabels: {\n enabled: false,\n },\n title: {\n text: 'Response Curves',\n align: 'left',\n style: {\n fontFamily:\"'Inter', sans-serif\",\n fontSize:\"18px\",\n color:\"#3C3C3C\",\n fontWeight:\"600\",\n }\n },\n grid: {\n borderColor: '#e7e7e7',\n row: {\n colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns\n opacity: 0.5\n },\n },\n markers: {\n size: 0\n },\n xaxis: {\n type: 'category',\n //range: costSeries !== undefined ? [0, 200000] : [0,0],\n categories: costSeries,\n title: {\n text: 'Spend'\n },\n tickAmount: 10,\n },\n yaxis: {\n title: {\n text: yAxisText\n },\n },\n legend: {\n position: 'top',\n horizontalAlign: 'right',\n floating: false,\n offsetY: -25,\n offsetX: -5\n },\n }\n\n return options;\n }\n\n render() {\n var series = [];\n switch(this.props.chartType)\n {\n case \"ResponseCurves\":\n series = this.state.revenueSeries;\n break;\n case \"MarginalROAS\":\n series = this.state.marginalROASSeries;\n break;\n case \"MarginalROASOverall\":\n series = this.state.marginalROASOverallSeries;\n break;\n case \"TimeSeries\":\n series = this.state.timeSeries;\n break;\n case \"OverallResponseCurve\":\n series = this.state.overallSeries;\n break;\n }\n var isResponseCurve = this.props.chartType === \"ResponseCurves\" ? true : false;\n var toggleAnnotationsText = this.state.isAnnotationToggled ? \"Annotations: ON\" : \"Annotations: OFF\"\n \n return (\n \n
\n {isResponseCurve ? \n (<>\n
: Average Historical Spend
{toggleAnnotationsText}
\n
: Recommended Spend
\n ) : \n (\"\") }\n
\n {/* Wrapping */}\n {props.children}\n {active && (\n \n {/* Content */}\n {props.content}\n
\n )}\n \n );\n};\n\nexport default Tooltip;\n","import React, { Component } from 'react';\nimport '../css/main.css';\nimport InfoIcon from '@material-ui/icons/Info';\nimport Tooltip from './Tooltip';\nimport {MuiPickersUtilsProvider, DatePicker} from '@material-ui/pickers';\nimport MomentUtils from \"@date-io/moment\"\nimport \"date-fns\";\n\n\nexport class BudgetRecommendationParameters extends Component {\n \n constructor(props) {\n super(props);\n this.handleDateChangeStart = this.handleDateChangeStart.bind(this);\n this.handleDateChangeEnd = this.handleDateChangeEnd.bind(this);\n this.state = {\n selectedDateStart: null,\n selectedDateEnd: null,\n targetValue: '',\n target: \"Budget\"\n };\n };\n\n componentDidUpdate = () =>\n {\n if (this.props.resetBudgetParameters)\n {\n this.setState({\n selectedDateStart: null,\n selectedDateEnd: null,\n targetValue: '',\n target: \"Budget\"\n });\n\n this.props.didBudgetParamatersReset()\n }\n }\n\n handleDateChangeStart(date) {\n this.props.handleDateChangeStart(date, this.state.selectedDateEnd, this.state.targetValue)\n this.setState({\n selectedDateStart: date\n })\n }\n\n handleDateChangeEnd(date) {\n this.props.handleDateChangeEnd(this.state.selectedDateStart, date, this.state.targetValue)\n this.setState({\n selectedDateEnd: date\n }) \n }\n\n targetValueChange = (e) =>\n {\n this.props.targetValueChange(this.state.selectedDateStart, this.state.selectedDateEnd, this.state.targetValue)\n }\n\n targetDropDownChange = (e) =>\n {\n var targetDropDown = e.target.value.replace(/\\s/g, '_').replace('/', 'per').replace(\"_(e.g._ROAS)\", \"\").replace(\"_(e.g._CPA)\", \"\")\n this.props.targetDropDownChange(this.state.selectedDateStart, this.state.selectedDateEnd, this.state.targetValue, targetDropDown)\n this.setState({\n target: targetDropDown\n })\n \n }\n\n resetRecommendationValues = () =>\n {\n this.props.resetRecommendationValues()\n this.setState({isBudgetRecommendation:false, resetBudget:true, selectedDateStart: null, selectedDateEnd: null, targetValue: ''})\n }\n\n render() {\n let targetTooltip = [\"Specify a budget, KPI, or efficiency target. Budget target example:\" ,
, \"setting a budget target of 1,000,000 (dollars) will output\" ,
, \"the most efficient way to allocate the investment (meeting your constraints) over the specified time period.\" ,
, \"KPI target example: setting a KPI target of 5,000 (e.g. leads), will output the minimum budget required to meet that goal, optimally allocated across your initiatives.\" ,
, \"KPI / Spend and Spend / KPI example: specify this if you have no maximum budget, but have an efficiency target, such as an ROAS of 2.\" ,
,\" The output will display the maximum investment that can be made while not exceeding this efficiency goal. Note, KPI / Spend would be applicable to a metric such as ROAS, while Spend / KPI would be applicable to a metric such as cost per lead.\"];\n let dateRangeTooltip = \"Specify the time period (start and end dates) the budget plan should generate budget allocation recommendations and forecasts for. For example, to understand how to best allocate one million dollars for your initiatives next month, enter 1,000,000 into the Target field with Budget selected, then select the first day of next month (start) and last day of next month (end) in the Date Range module.\";\n return(\n
\n \n
\n
Target
\n
\n \n Budget \n KPI \n KPI / Spend (e.g. ROAS) \n Spend / KPI (e.g. CPA) \n \n
\n
\n RESET \n
\n
\n
\n
Date Range
\n
\n \n Start End \n
\n
\n
\n );\n }\n}\n\nexport default BudgetRecommendationParameters\n\n\n\n\n","import React, { Component } from 'react';\nimport MainGridComponent from './../MainGridComponent';\nimport '../../css/main.css';\nimport GroupedBarChart from './../GroupedBarChart';\nimport LineChart from './../LineChart';\nimport BudgetRecommendationParameters from './../BudgetRecommendationParameters';\nimport fetchApi from '../../FetchApi';\n\nexport class CampaignGroupingTemplate extends Component {\n constructor(props) {\n super(props);\n this.state = {\n selectedBudgetOutput: this.props.selectedBudgetOutput,\n accountId: this.props.accountId,\n selectedBudgetOutputId: this.props.selectedBudgetOutputId,\n conversionType: this.props.conversionType,\n modelFrequency: this.props.modelFrequency,\n lowerBound: this.props.lowerBound,\n upperBound: this.props.upperBound,\n lowerEfficiency: this.props.lowerEfficiency,\n upperEfficiency: this.props.upperEfficiency,\n campaignGrouping: [],\n apiData: null,\n disabledCampaignGroupIds: [],\n disabledRows: [],\n recentBudgetInputs : [{}],\n isBudgetRecommendation: false,\n resetBudget: false,\n selectedDateStart: null,\n selectedDateEnd: null,\n targetValue: '',\n target: \"Budget\",\n columnWidth: \"300px\",\n resetBudgetParameters: false,\n recommendedBudget: [],\n apiData: null,\n isOptimized: false,\n isError:false, \n errorMessage: '',\n timeSeriesDate: [],\n timeSeriesCost: [],\n timeSeriesKPI: [],\n timeSeriesCampaignGrouping: [],\n timeSeriesParams : {timeSeriesCampaignGrouping: \"All\", timeSeriesSegment: \"Weekly (Sunday - Saturday)\"},\n budgetOptimizationAPIParams: {maxPercentArray : [], minPercentArray : [], maxSpendArray : [], minSpendArray : [], campaignGroupingArray : [], isDollarConstraint: false, disabledIds: []},\n };\n };\n\n handleDateChangeStart = (selectedDateStart, selectedDateEnd, targetValue) => {\n\n if (selectedDateEnd !== null && targetValue !== '')\n {\n this.setState({ selectedDateStart: selectedDateStart.format(\"MM/DD/YYYY\"), isBudgetRecommendation: true });\n }\n \n else\n {\n this.setState({ selectedDateStart: selectedDateStart.format(\"MM/DD/YYYY\"), isBudgetRecommendation: false});\n }\n \n }\n\n handleDateChangeEnd = (selectedDateStart, selectedDateEnd, targetValue) => {\n if (selectedDateStart !== null && targetValue !== '')\n {\n this.setState({ selectedDateEnd: selectedDateEnd.format(\"MM/DD/YYYY\"), isBudgetRecommendation: true});\n }\n \n else\n {\n this.setState({ selectedDateEnd: selectedDateEnd.format(\"MM/DD/YYYY\"), isBudgetRecommendation: false});\n }\n \n }\n\n targetValueChange = (selectedDateStart, selectedDateEnd, targetValue) =>\n {\n if (selectedDateStart !== null && selectedDateEnd !== null)\n {\n this.setState({ targetValue: targetValue, isBudgetRecommendation: true });\n }\n \n else\n {\n this.setState({ targetValue: targetValue, isBudgetRecommendation: false });\n }\n \n }\n\n //fix this later not to set state so many times\n targetDropDownChange = (selectedDateStart, selectedDateEnd, targetValue, target) =>\n {\n this.setState({ target: target, isBudgetRecommendation: false });\n if (selectedDateStart !== null && selectedDateEnd !== null && targetValue !== '')\n {\n this.setState({isBudgetRecommendation: true})\n }\n \n }\n\n componentDidMount = async() =>\n {\n var apiData = await fetchApi(\"BUDGET_RESULTS\", [this.state.accountId])\n\n var recentBudgetInputs = []\n\n for (var i = 0; i < 3; i++)\n {\n if (i === apiData.length)\n break;\n var recentBudgetInputItem = {id: apiData[i].id, name: apiData[i].name, campaignGroupCount: apiData[i].campaign_group_count, conversionType: apiData[i].conversion_type, modelFrequency: apiData[i].model_frequency}\n recentBudgetInputs.push(recentBudgetInputItem)\n }\n \n this.setState({recentBudgetInputs : recentBudgetInputs})\n }\n\n componentDidUpdate = async(prevProps, prevState) =>\n {\n if (this.props.selectedBudgetOutputId !== prevProps.selectedBudgetOutputId)\n {\n var apiData = await fetchApi(\"BUDGET_RESULTS\", [this.state.accountId])\n\n var recentBudgetInputs = []\n\n for (var i = 0; i < 3; i++)\n {\n if (i === apiData.length)\n break;\n var recentBudgetInputItem = {id: apiData[i].id, name: apiData[i].name, campaignGroupCount: apiData[i].campaign_group_count, conversionType: apiData[i].conversion_type, modelFrequency: apiData[i].model_frequency}\n recentBudgetInputs.push(recentBudgetInputItem)\n }\n \n this.setState({modelFrequency: this.props.modelFrequency, conversionType: this.props.conversionType, selectedBudgetOutputId: this.props.selectedBudgetOutputId, selectedBudgetOutput: this.props.selectedBudgetOutput, resetBudgetParameters: true, recommendedBudget : [], isBudgetRecommendation:false, selectedDateStart: null, selectedDateEnd: null, targetValue: '', json: [], isError:false, errorMessage: '', recentBudgetInputs : recentBudgetInputs})\n }\n }\n\n fetchData = async() =>\n {\n var apiRecommendedBudget = []\n var apiData = await fetchApi(\"RECENT_BUDGET_RECOMMENDATIONS\", [this.state.selectedBudgetOutputId])\n for (var x = 0; x < apiData.length; x++)\n {\n apiData[x].rec_budget = 0\n apiData[x].avg_hist_spend = 0\n apiData[x].adj_spend = 0\n apiData[x].rec_kpi = 0\n apiData[x].est_roi = 0\n apiData[x].min_spend = \"0\"\n apiData[x].max_spend = \"0\"\n apiData[x].enabled = true\n \n }\n //apiData = apiData.map(obj => {return {...obj, max_spend:obj.upper_quant_bounds_budget}})\n for (var i = 0; i < apiData.length; i++)\n {\n apiRecommendedBudget.push({rec_budget: apiData[i].rec_budget, id:apiData[i].id})\n }\n var campaignNames = apiData.map(x => x.name).filter((value, index, self) => self.indexOf(value) === index)\n var columnWidth = this.getColumnWidth(campaignNames);\n this.setState({columnWidth: columnWidth, apiData: apiData, resetBudget:false, resetBudgetParameters:false, recommendedBudget: apiRecommendedBudget})\n }\n\n getColumnWidth = (campaignNames) =>\n {\n var longestString = Math.max(...(campaignNames.map(el => el.length)));\n if (longestString <= 10)\n return \"200px\";\n if (longestString <= 20)\n return \"250px\";\n if (longestString <= 30)\n return \"300px\";\n if (longestString <= 40)\n return \"350px\";\n if (longestString <= 60)\n return \"400px\";\n if (longestString <= 70)\n return \"550px\";\n if (longestString <= 80)\n return \"600px\";\n if (longestString <= 90)\n return \"650px\";\n if (longestString <= 100)\n return \"700px\";\n if (longestString <= 110)\n return \"750px\";\n }\n\n fetchDataTimeSeriesLineChart = async () =>\n {\n var timeSeriesDate = []\n var timeSeriesCost = []\n var timeSeriesKPI = []\n var timeSeriesCampaignGrouping = []\n var apiData = await fetchApi(\"TIME_SERIES_OPTIMIZED\", [this.state.selectedBudgetOutputId, this.state.accountId, this.state.budgetOptimizationAPIParams.campaignGroupingArray, this.state.selectedDateStart, this.state.selectedDateEnd, this.state.target.toLowerCase(), this.state.targetValue, this.state.budgetOptimizationAPIParams.minPercentArray, this.state.budgetOptimizationAPIParams.maxPercentArray, this.state.budgetOptimizationAPIParams.minSpendArray, this.state.budgetOptimizationAPIParams.maxSpendArray,this.state.budgetOptimizationAPIParams.isDollarConstraint, this.state.budgetOptimizationAPIParams.disabledIds ])\n var timeSeriesCampaignGrouping = apiData.map(e => e.campaign_grouping).sort()\n var unique_campaign_groupings = timeSeriesCampaignGrouping.filter((v, i, a) => a.indexOf(v) === i);\n for (var x = 0; x < unique_campaign_groupings.length; x++)\n {\n var filteredData = apiData.filter(e => {if(e.campaign_grouping === unique_campaign_groupings[x]){return e}})\n timeSeriesCost = [...timeSeriesCost, ...filteredData.map(e => e.spend)]\n timeSeriesKPI = [...timeSeriesKPI, ...filteredData.map(e => e.response)]\n timeSeriesDate = [...timeSeriesDate, ...filteredData.map(e => e.date)]\n }\n \n this.setState({\n timeSeriesDate : timeSeriesDate,\n timeSeriesCost : timeSeriesCost,\n timeSeriesKPI : timeSeriesKPI,\n timeSeriesCampaignGrouping: timeSeriesCampaignGrouping\n })\n\n }\n\n getConversionCalculatedHeader = () =>\n {\n //remove this later\n if(this.state.selectedBudgetOutputId === 78)\n {\n return \"KPI / Spend\"\n }\n switch (this.state.conversionType)\n {\n case \"Revenue\":\n return \"ROAS\";\n case \"Conversions\":\n return \"CPA\";\n case \"Reach\":\n return \"KPI / Spend\";\n case \"New Visitors\":\n return \"NV / Spend\";\n case \"CPM\":\n return \"CPM\";\n case \"Impressions\":\n return \"CPM\"\n case \"Views\":\n return \"CPM\"\n case \"ThruPlays\":\n return \"CPM\"\n case \"Leads\":\n return \"CPL\"\n case \"Purchases\":\n return \"Cost Per. Purchase\"\n case \"Sales\":\n return \"Cost Per. Sale\";\n case \"Landing Page Views\":\n return \"CPLPV\";\n case \"Link Clicks\":\n return \"CPLC\";\n case \"Free Trials\":\n return \"CPFT\";\n case \"Installs\":\n return \"Cost Per. Install\";\n case \"Referrals\":\n return \"Cost Per. Referrals\";\n case \"Signups\":\n return \"Cost Per. Signup\";\n case \"Clicks\":\n return \"CPC\";\n case \"Bookings\":\n return \"Cost Per. Booking\";\n }\n }\n\n setTimeSeriesWeeklyData = (weeklySegment, uniqueDates) =>\n {\n const createDateFromDateString = (dateString) => {\n const [year, month, day] = dateString.split('-');\n return new Date(2000, month - 1, day); // Using a fixed year (2000) to avoid conflicts\n };\n var modifiedUniqueDates = [];\n if (uniqueDates.length > 0)\n {\n // Generate a range of dates between selectedDateStart and selectedDateEnd\n for (let date = new Date(this.state.selectedDateStart); date <= new Date(this.state.selectedDateEnd); date.setDate(date.getDate() + 1)) {\n const month = date.getMonth() + 1;\n const day = date.getDate();\n \n // Get the month and day without the year\n const monthDayString = `${month}-${day}`;\n \n // Find the corresponding date in uniqueDates and modify the year\n const correspondingDateString = uniqueDates.find((uniqueDate) => {\n const uniqueDateObj = createDateFromDateString(uniqueDate);\n const uniqueMonth = uniqueDateObj.getMonth() + 1;\n const uniqueDay = uniqueDateObj.getDate();\n return `${uniqueMonth}-${uniqueDay}` === monthDayString;\n });\n \n if (correspondingDateString) {\n const modifiedDateString = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;\n modifiedUniqueDates.push(modifiedDateString);\n }\n }\n var weeksArray = [];\n // calculate the index of the first week because you never know which day the data starts at\n // skip if the first index is a sunday\n var weeklyEndingIndex = weeklySegment - new Date(modifiedUniqueDates[0]+\"T00:00:00\").getDay();\n var skipFirstWeek = true;\n // if the first day is a sunday, set skipFirstWeek to false which ignores the week skip in the for loop.\n if (weeklyEndingIndex === -1)\n {\n weeklyEndingIndex = 0\n skipFirstWeek = false\n } \n //calculate how many weeks are in the array\n var weeks = Math.ceil(modifiedUniqueDates.length / 7);\n var x = 0;\n for (var i = 0; i < weeks; i++)\n {\n var weeklyDateArray = []\n //if weeklysegment is 6, that means its sun-saturday. weeklysegment 7 = sunday-monday\n if (weeklySegment === 6 )\n {\n for (x; x <= (7 * (i === 0 ? 1 : i) + (skipFirstWeek ? 0 : weeklyEndingIndex !== 0 ? 7 - weeklyEndingIndex : 0)); x++)\n {\n if(uniqueDates[x] === undefined)\n {\n break;\n }\n weeklyDateArray.push(uniqueDates[x])\n if (x === weeklyEndingIndex && skipFirstWeek)\n {\n x++;\n break;\n }\n }\n }\n else\n {\n for (x; x <= (7 * (i === 0 ? 1 : i+1) - (skipFirstWeek ? 0 : weeklyEndingIndex !== 0 ? 7 - weeklyEndingIndex : 0)); x++)\n {\n if(uniqueDates[x] === undefined)\n {\n break;\n }\n weeklyDateArray.push(uniqueDates[x])\n if (x === weeklyEndingIndex && skipFirstWeek)\n {\n x++;\n break;\n }\n }\n }\n weeksArray.push(weeklyDateArray.filter(function (e){return e !== undefined}))\n skipFirstWeek = false;\n }\n //setup uniqueDates as weekly chunks\n modifiedUniqueDates = [];\n for (i = 0; i < weeksArray.length; i++) \n {\n modifiedUniqueDates[i] = weeksArray[i][0].slice(5) + \" - \" + weeksArray[i][weeksArray[i].length - 1].slice(5);\n }\n return [weeksArray, modifiedUniqueDates];\n }\n return [[], []]\n }\n\n setMonthlyDataTimeSeriesGrid = (dates, isConvertToWideActive) =>\n {\n var json = []\n var timeSeriesGridWideParams = []\n var metrics = [\"Spend\"]\n metrics.push(this.state.conversionType)\n metrics.push(this.getConversionCalculatedHeader())\n for (var i = 0; i < dates.length; i++)\n {\n var timeSeriesCostGrid = 0\n var timeSeriesKPIGrid = 0\n var timeSeriesMetricCalculationGrid = 0\n var timeSeriesDate = this.state.timeSeriesDate.map((x) => {return new Date(x).toLocaleDateString('en-US', {timeZone:'UTC',month: 'short'})})\n if (this.state.timeSeriesParams[\"timeSeriesCampaignGrouping\"] === \"All\")\n {\n for (var x = 0; x < timeSeriesDate.length; x++)\n {\n if (timeSeriesDate[x] !== dates[i])\n continue;\n timeSeriesCostGrid = parseInt(timeSeriesCostGrid) + parseInt(this.state.timeSeriesCost[x])\n timeSeriesKPIGrid = parseInt(timeSeriesKPIGrid) + parseInt(this.state.timeSeriesKPI[x])\n }\n }\n \n else\n { \n var campaignGroupingIndexArray = this.state.timeSeriesCampaignGrouping.map((e, index) => e === this.state.timeSeriesParams[\"timeSeriesCampaignGrouping\"] ? index : '').filter(String);\n for (var x = 0; x < campaignGroupingIndexArray.length; x++)\n {\n if (timeSeriesDate[campaignGroupingIndexArray[x]] !== dates[i])\n continue;\n timeSeriesCostGrid = parseInt(timeSeriesCostGrid) + parseInt(this.state.timeSeriesCost[campaignGroupingIndexArray[x]])\n timeSeriesKPIGrid = parseInt(timeSeriesKPIGrid) + parseInt(this.state.timeSeriesKPI[campaignGroupingIndexArray[x]])\n }\n }\n \n if (this.state.conversionType === \"Revenue\" || this.state.conversionType === \"Reach\")\n timeSeriesMetricCalculationGrid = ((timeSeriesKPIGrid / timeSeriesCostGrid)).toFixed(2).toString();\n else if (this.state.conversionType === \"CPM\" || this.state.conversionType === \"Impressions\" || this.state.conversionType === \"Views\" || this.state.conversionType === \"ThruPlays\")\n timeSeriesMetricCalculationGrid = ((timeSeriesCostGrid / (timeSeriesKPIGrid/1000) )).toFixed(2).toString();\n else\n timeSeriesMetricCalculationGrid = ((timeSeriesCostGrid / timeSeriesKPIGrid )).toFixed(2).toString();\n \n if (!isConvertToWideActive)\n json.push({Month: dates[i], Spend: timeSeriesCostGrid, TimeSeriesKPI: timeSeriesKPIGrid, TimeSeriesMetricCalculated: timeSeriesMetricCalculationGrid})\n \n else\n {\n timeSeriesGridWideParams.push({Spend: timeSeriesCostGrid, [this.state.conversionType]:timeSeriesKPIGrid, [this.getConversionCalculatedHeader()]: timeSeriesMetricCalculationGrid})\n }\n \n }\n\n if (isConvertToWideActive)\n {\n for (i = 0; i < metrics.length; i++)\n {\n json.push({Metric: metrics[i]})\n for (x = 0; x < dates.length; x++)\n {\n json[i][dates[x]] = timeSeriesGridWideParams[x][metrics[i]];\n }\n }\n }\n \n return json;\n }\n\n timeSeriesCalculation = (indexArray, timeSeriesCostArray, timeSeriesKPIArray) =>\n {\n var timeSeriesCost = 0\n var timeSeriesKPI = 0\n for (var i = 0; i < indexArray.length; i++)\n {\n timeSeriesCost = parseInt(timeSeriesCost) + parseInt(timeSeriesCostArray[indexArray[i]])\n timeSeriesKPI = parseInt(timeSeriesKPI) + parseInt(timeSeriesKPIArray[indexArray[i]])\n }\n\n return [timeSeriesCost, timeSeriesKPI];\n }\n\n \n timesSeriesCampaignFilter = () =>\n {\n var timeSeriesDate = []\n var timeSeriesCostArray = []\n var timeSeriesKPIArray = []\n //get all indexes for given campaignGrouping\n var campaignGroupingIndexArray = this.state.timeSeriesCampaignGrouping.map((e, index) => e === this.state.timeSeriesParams[\"timeSeriesCampaignGrouping\"] ? index : '').filter(String);\n for (var y = 0; y < campaignGroupingIndexArray.length; y++)\n {\n timeSeriesDate.push(this.state.timeSeriesDate[campaignGroupingIndexArray[y]])\n timeSeriesCostArray.push(this.state.timeSeriesCost[campaignGroupingIndexArray[y]])\n timeSeriesKPIArray.push(this.state.timeSeriesKPI[campaignGroupingIndexArray[y]])\n }\n\n return [timeSeriesDate, timeSeriesCostArray, timeSeriesKPIArray]\n }\n\n createWeeklyTimeSeriesData = (weeksArray, uniqueWeeks, isConvertToWideActive) =>\n {\n var metrics = [\"Spend\"]\n metrics.push(this.state.conversionType)\n metrics.push(this.getConversionCalculatedHeader())\n var indexArray = [];\n var timeSeriesDate = this.state.timeSeriesDate;\n var timeSeriesCostArray = this.state.timeSeriesCost;\n var timeSeriesKPIArray = this.state.timeSeriesKPI;\n var timeSeriesCost = 0;\n var timeSeriesKPI = 0;\n var timeSeriesMetricCalculated = 0\n var json = [];\n var timeSeriesGridWideParams = [];\n\n if (this.state.timeSeriesParams[\"timeSeriesCampaignGrouping\"] !== \"All\")\n {\n var timeSeriesCampaignGroupingData = this.timesSeriesCampaignFilter()\n timeSeriesDate = timeSeriesCampaignGroupingData[0];\n timeSeriesCostArray = timeSeriesCampaignGroupingData[1];\n timeSeriesKPIArray = timeSeriesCampaignGroupingData[2];\n }\n\n for (var x = 0; x < weeksArray.length; x++)\n {\n for (var y = 0; y < weeksArray[x].length; y++)\n {\n indexArray = timeSeriesDate.map((e, index) => e === weeksArray[x][y] ? index : '').filter(String);\n var timeSeriesCalculationResult = this.timeSeriesCalculation(indexArray, timeSeriesCostArray, timeSeriesKPIArray)\n timeSeriesCost = timeSeriesCost + timeSeriesCalculationResult[0]\n timeSeriesKPI = timeSeriesKPI + timeSeriesCalculationResult[1]\n }\n\n if (this.state.conversionType === \"Revenue\" || this.state.conversionType === \"Reach\")\n timeSeriesMetricCalculated = ((timeSeriesKPI / timeSeriesCost)).toFixed(2).toString()\n else if (this.state.conversionType === \"CPM\" || this.state.conversionType === \"Impressions\" || this.state.conversionType === \"Views\" || this.state.conversionType === \"ThruPlays\")\n timeSeriesMetricCalculated = ((timeSeriesCost / (timeSeriesKPI/1000) )).toFixed(2).toString();\n else\n timeSeriesMetricCalculated = ((timeSeriesCost / timeSeriesKPI )).toFixed(2).toString()\n\n if (!isConvertToWideActive)\n json.push({Weeks: uniqueWeeks[x], Spend: timeSeriesCost, TimeSeriesKPI: timeSeriesKPI, TimeSeriesMetricCalculated: timeSeriesMetricCalculated}) \n else\n {\n timeSeriesGridWideParams.push({Spend: timeSeriesCost, [this.state.conversionType]:timeSeriesKPI, [this.getConversionCalculatedHeader()]: timeSeriesMetricCalculated})\n }\n timeSeriesCost = 0;\n timeSeriesKPI = 0; \n timeSeriesMetricCalculated = 0\n }\n\n \n if (isConvertToWideActive)\n {\n for (var i = 0; i < metrics.length; i++)\n {\n json.push({Metric: metrics[i]})\n for (var x = 0; x < uniqueWeeks.length; x++)\n {\n json[i][uniqueWeeks[x]] = timeSeriesGridWideParams[x][metrics[i]];\n }\n }\n }\n return json\n }\n\n fetchDataTimeSeriesGrid = (isConvertToWideActive) =>\n {\n if (this.state.timeSeriesCost.length !== 0)\n {\n var timeSeriesGridDates = this.state.timeSeriesDate.filter((v, i, a) => a.indexOf(v) === i);\n var dates = timeSeriesGridDates.filter((v, i, a) => a.indexOf(v) === i);\n if (this.state.timeSeriesParams[\"timeSeriesSegment\"] === \"Monthly\")\n {\n dates = dates.map((x) => {return new Date(x).toLocaleDateString('en-US', {timeZone:'UTC',month: 'short'})})\n dates = dates.filter((v, i, a) => a.indexOf(v) === i);\n return this.setMonthlyDataTimeSeriesGrid(dates, isConvertToWideActive)\n }\n\n if (this.state.timeSeriesParams[\"timeSeriesSegment\"].includes(\"Weekly\"))\n {\n var weeklySegment = this.state.timeSeriesParams[\"timeSeriesSegment\"].includes(\"(Sunday - Saturday)\") ? 6 : 7\n var timeSeriesWeeklyData = this.setTimeSeriesWeeklyData(weeklySegment, dates)\n var weeksArray = timeSeriesWeeklyData[0];\n var uniqueWeeks = timeSeriesWeeklyData[1];\n var weeklyTimeSeriesDataGrid = this.createWeeklyTimeSeriesData(weeksArray, uniqueWeeks, isConvertToWideActive)\n return weeklyTimeSeriesDataGrid;\n }\n }\n }\n\n fetchBudgetSweepData = async() =>\n {\n this.setState({isBudgetRecommendation: false})\n var apiRecommendedBudget = []\n var apiData = await fetchApi(\"BUDGET_OPTIMIZATION\", [this.state.selectedBudgetOutputId, this.state.selectedDateStart, this.state.selectedDateEnd, this.state.target.toLowerCase(), this.state.targetValue, this.state.budgetOptimizationAPIParams.minPercentArray, this.state.budgetOptimizationAPIParams.maxPercentArray,this.state.budgetOptimizationAPIParams.minSpendArray, this.state.budgetOptimizationAPIParams.maxSpendArray, this.state.accountId, this.state.budgetOptimizationAPIParams.campaignGroupingArray, this.state.budgetOptimizationAPIParams.isDollarConstraint, this.state.budgetOptimizationAPIParams.disabledIds])\n if (apiData.message !== undefined || apiData.error !== undefined)\n {\n if (!this.state.isError)\n await this.setState({isError:true, errorMessage: apiData.message === undefined ? apiData.error : apiData.message})\n }\n else\n {\n for (var x = 0; x < apiData.length; x++)\n {\n apiData[x].adj_spend = (((parseFloat(apiData[x].rec_budget) - parseFloat(apiData[x].avg_hist_spend)) / parseFloat(apiData[x].avg_hist_spend))*100).toFixed(0).toString() + \"%\"\n\n if (this.state.conversionType === \"Revenue\" || this.state.conversionType === \"Reach\")\n apiData[x].est_roi = (parseFloat(apiData[x].rec_kpi) / parseFloat(apiData[x].rec_budget)).toFixed(2)\n else if (this.state.conversionType === \"CPM\" || this.state.conversionType === \"Impressions\" || this.state.conversionType === \"Views\" || this.state.conversionType === \"ThruPlays\")\n apiData[x].est_roi = (parseFloat(apiData[x].rec_budget) / (parseFloat(apiData[x].rec_kpi)/1000)).toFixed(2)\n else\n apiData[x].est_roi = (parseFloat(apiData[x].rec_budget)/ parseFloat(apiData[x].rec_kpi)).toFixed(2) \n }\n \n //filter out any potential disabled rows, incase of race conditions\n apiData = apiData.filter(item => !this.state.disabledCampaignGroupIds.includes(item.id));\n\n for (var i = 0; i < apiData.length; i++)\n {\n apiData[i].enabled = true\n }\n\n for (var i = 0; i < apiData.length; i++)\n {\n apiRecommendedBudget.push({rec_budget: apiData[i].rec_budget, id:apiData[i].id})\n }\n\n //add back any disabled rows with 0 values\n for (var i = 0; i < this.state.disabledRows.length; i++)\n {\n apiData.splice(this.state.disabledRows[i].rowIndex, 0, {adj_spend:'0', avg_hist_spend:'0', est_roi:'0', id:this.state.disabledRows[i].id, max_percent:\"0.80\", max_spend:this.state.disabledRows[i].maxSpend, min_percent:\"0.00\", min_spend:\"0.00\", name:this.state.disabledRows[i].campaignName, rec_budget:0, rec_kpi:0, warnings: [], enabled: false})\n }\n\n \n \n\n await this.setState({recommendedBudget: apiRecommendedBudget, isError:false, errorMessage: '', apiData: apiData})\n }\n }\n\n fetchResponseCurveData = async (campaignGroupingArray, selectedBudgetPlanId, isOptimized) =>\n {\n var apiData = []\n if (!isOptimized)\n apiData = await fetchApi(\"RESPONSE_CURVES\", [selectedBudgetPlanId])\n else\n apiData = await fetchApi(\"RESPONSE_CURVES_OPTIMIZED\", [this.state.budgetOptimizationAPIParams.campaignGroupingArray.filter(x => !this.state.disabledCampaignGroupIds.includes(x)), this.state.selectedDateStart, this.state.selectedDateEnd])\n apiData = apiData.map(x => {if(x.kpi_value < 0){x.kpi_value = 0}return x;})\n //apiData = apiData.sort((a, b) => a.campaign_group_name.toString().localeCompare(b.campaign_group_name) || a.cost - b.cost);\n return apiData;\n }\n\n fetchMarginalOverallData = async (isOptimized) =>\n {\n var apiData = []\n if (!isOptimized)\n var apiData = await fetchApi(\"OVERALL_MARGINAL\", [this.state.selectedBudgetOutputId])\n else\n var apiData = await fetchApi(\"OVERALL_MARGINAL_OPTIMIZED\", [this.state.selectedDateStart, this.state.selectedDateEnd, this.state.budgetOptimizationAPIParams.minPercentArray, this.state.budgetOptimizationAPIParams.maxPercentArray,this.state.budgetOptimizationAPIParams.minSpendArray, this.state.budgetOptimizationAPIParams.maxSpendArray, this.state.budgetOptimizationAPIParams.isDollarConstraint, this.state.target.toLowerCase(), this.state.targetValue, this.state.budgetOptimizationAPIParams.campaignGroupingArray, this.state.budgetOptimizationAPIParams.disabledIds])\n\n var costArray = apiData.map(e => e.cost)\n var kpiArray = apiData.map(e => e.kpi_value)\n var marginalKpiArray = apiData.map(e => e.marginal_kpi)\n return [costArray, kpiArray, marginalKpiArray]\n //return apiData;\n }\n\n // promisedSetState = async(newState) =>\n // {\n // new Promise(resolve => this.setState(newState, resolve));\n // }\n\n setBudgetOptimizationParams = async (gridApi, isDollarConstraint, groupId, type, campaignName, rowIndex, maxSpend) => \n {\n var disabledCampaignGroupIds = this.state.disabledCampaignGroupIds\n var disabledRows = this.state.disabledRows\n if (type === \"enable\")\n {\n disabledRows = disabledRows.filter(x => x.id !== groupId)\n disabledCampaignGroupIds = disabledCampaignGroupIds.filter(id => id !== groupId);\n }\n \n \n else if (type === \"disable\")\n {\n disabledRows.push({rowIndex: rowIndex, campaignName: campaignName, id: groupId, maxSpend: maxSpend})\n disabledCampaignGroupIds.push(groupId)\n }\n \n \n if(gridApi)\n {\n var budgetOptimizationAPIParams = {maxPercentArray : [], minPercentArray : [], maxSpendArray : [], minSpendArray : [], campaignGroupingArray : [], isDollarConstraint: isDollarConstraint, disabledIds: disabledCampaignGroupIds}\n for (var i = 0; i < gridApi.getDisplayedRowCount(); i++)\n {\n \n budgetOptimizationAPIParams.minSpendArray.push(gridApi.getRowNode(i).data.min_spend)\n budgetOptimizationAPIParams.maxSpendArray.push(gridApi.getRowNode(i).data.max_spend)\n budgetOptimizationAPIParams.minPercentArray.push(gridApi.getRowNode(i).data.min_percent)\n budgetOptimizationAPIParams.maxPercentArray.push(gridApi.getRowNode(i).data.max_percent)\n budgetOptimizationAPIParams.campaignGroupingArray.push(gridApi.getRowNode(i).data.id)\n \n \n }\n if (JSON.stringify(budgetOptimizationAPIParams) === JSON.stringify(this.state.budgetOptimizationAPIParams))\n return;\n this.setState({\n budgetOptimizationAPIParams : budgetOptimizationAPIParams,\n disabledCampaignGroupIds: disabledCampaignGroupIds,\n disabledRows: disabledRows\n })\n }\n }\n\n refreshBudgetRecommendation = () =>\n {\n if (this.state.selectedDateStart !== null && this.state.selectedDateEnd !== null && this.state.targetValue !== null)\n {\n this.setState({isBudgetRecommendation: true})\n }\n }\n\n switchBudgetOutputResult = (e) =>\n {\n this.props.switchBudgetOutputResult(e, this.state.recentBudgetInputs)\n }\n\n didBudgetParamatersReset = (e) =>\n {\n this.setState({resetBudgetParameters: false})\n }\n\n resetRecommendationValues = async () =>\n {\n this.setState({isBudgetRecommendation:false, resetBudget:true, selectedDateStart: null, selectedDateEnd: null, targetValue: '', isError:false, errorMessage: '', json: []})\n await this.fetchData();\n }\n\n changeTimeSeriesParams = (e) =>\n {\n var timeSeriesParams = this.state.timeSeriesParams\n timeSeriesParams[e.target.id] = e.target.value\n this.setState({timeSeriesParams: timeSeriesParams})\n }\n\n backToBudgetResults = () =>\n {\n this.props.backToBudgetResults()\n }\n\n render() {\n let targetTooltip = [\"Specify a budget, KPI, or efficiency target. Budget target example:\" ,
, \"setting a budget target of 1,000,000 (dollars) will output\" ,
, \"the most efficient way to allocate the investment (meeting your constraints) over the specified time period.\" ,
, \"KPI target example: setting a KPI target of 5,000 (e.g. leads), will output the minimum budget required to meet that goal, optimally allocated across your initiatives.\" ,
, \"KPI / Spend and Spend / KPI example: specify this if you have no maximum budget, but have an efficiency target, such as an ROAS of 2.\" ,
,\" The output will display the maximum investment that can be made while not exceeding this efficiency goal. Note, KPI / Spend would be applicable to a metric such as ROAS, while Spend / KPI would be applicable to a metric such as cost per lead.\"];\n let dateRangeTooltip = \"Specify the time period (start and end dates) the budget plan should generate budget allocation recommendations and forecasts for. For example, to understand how to best allocate one million dollars for your initiatives next month, enter 1,000,000 into the Target field with Budget selected, then select the first day of next month (start) and last day of next month (end) in the Date Range module.\";\n var {isError, errorMessage} = this.state\n return(\n
\n \n Back to Budget Results \n
\n \n \n {/*
\n
Recent Budget Inputs \n
\n {\n Object.keys(this.state.recentBudgetInputs).map((key) => {\n return {this.state.recentBudgetInputs[key].name ? this.state.recentBudgetInputs[key].name : \"\"} ;\n })}\n \n
*/}\n
\n {this.state.selectedBudgetOutput} \n
\n
\n
\n
\n \n
\n
Scenario Planner \n {\n isError ? \n
{errorMessage}
:\n
\n }\n
\n
\n
\n
\n
\n \n
\n \n
\n
\n Segment: \n \n Weekly (Sunday - Saturday) \n Weekly (Monday - Sunday) \n Monthly \n \n Campaign Grouping: \n \n All \n {this.state.timeSeriesCampaignGrouping.filter((v, i, a) => a.indexOf(v) === i).map((e) => {return {e} })}\n \n
\n
\n
Time Series Grid \n
\n
\n \n
\n );\n }\n}\n\nexport default CampaignGroupingTemplate\n","import React, { Component } from 'react';\nimport MainGridComponent from './../MainGridComponent';\nimport '../../css/main.css';\nimport LineChart from './../LineChart';\nimport BudgetRecommendationParameters from './../BudgetRecommendationParameters';\nimport fetchApi from '../../FetchApi';\nimport Select from 'react-select';\n\nexport class CampaignTemplate extends Component {\n constructor(props) {\n super(props);\n this.state = {\n selectedBudgetOutput: this.props.selectedBudgetOutput,\n accountId: this.props.accountId,\n selectedBudgetOutputId: this.props.selectedBudgetOutputId,\n conversionType: this.props.conversionType,\n modelFrequency: this.props.modelFrequency,\n campaignGroupings: [],\n selectedCampaignGroupings: [],\n selectedCampaignGroupingsToPassToLineChart: [],\n disabledCampaignGroupIds: [],\n disabledRows: [],\n apiData: null,\n recentBudgetInputs : [{}],\n isBudgetRecommendation: false,\n resetBudget: false,\n selectedDateStart: null,\n selectedDateEnd: null,\n targetValue: '',\n target: \"Budget\",\n columnWidth: \"300px\",\n resetBudgetParameters: false,\n recommendedBudget: [],\n apiData: null,\n isOptimized: false,\n isError:false, \n errorMessage: '',\n budgetOptimizationAPIParams: {maxPercentArray : [], minPercentArray : [], maxSpendArray : [], minSpendArray : [], campaignGroupingArray : [], isDollarConstraint: false}\n };\n };\n\n handleDateChangeStart = (selectedDateStart, selectedDateEnd, targetValue) => {\n\n if (selectedDateEnd !== null && targetValue !== '')\n {\n this.setState({ selectedDateStart: selectedDateStart.format(\"MM/DD/YYYY\"), isBudgetRecommendation: true });\n }\n \n else\n {\n this.setState({ selectedDateStart: selectedDateStart.format(\"MM/DD/YYYY\"), isBudgetRecommendation: false});\n }\n \n }\n\n handleDateChangeEnd = (selectedDateStart, selectedDateEnd, targetValue) => {\n if (selectedDateStart !== null && targetValue !== '')\n {\n this.setState({ selectedDateEnd: selectedDateEnd.format(\"MM/DD/YYYY\"), isBudgetRecommendation: true});\n }\n \n else\n {\n this.setState({ selectedDateEnd: selectedDateEnd.format(\"MM/DD/YYYY\"), isBudgetRecommendation: false});\n }\n \n }\n\n targetValueChange = (selectedDateStart, selectedDateEnd, targetValue) =>\n {\n if (selectedDateStart !== null && selectedDateEnd !== null)\n {\n this.setState({ targetValue: targetValue, isBudgetRecommendation: true });\n }\n \n else\n {\n this.setState({ targetValue: targetValue, isBudgetRecommendation: false });\n }\n \n }\n\n //fix this later not to set state so many times\n targetDropDownChange = (selectedDateStart, selectedDateEnd, targetValue, target) =>\n {\n this.setState({ target: target, isBudgetRecommendation: false });\n if (selectedDateStart !== null && selectedDateEnd !== null && targetValue !== '')\n {\n this.setState({isBudgetRecommendation: true})\n }\n \n }\n componentDidMount = async() =>\n {\n var apiData = await fetchApi(\"BUDGET_RESULTS\", [this.state.accountId])\n var campaign_grouping_data = await fetchApi(\"GET_CAMPAIGN_GROUPS_FOR_DROPDOWN\", [this.state.selectedBudgetOutputId])\n var campaignGroupings = []\n var selectedCampaignGroupings = []\n for (var i = 0; i < campaign_grouping_data.length; i++)\n {\n campaignGroupings.push({value:campaign_grouping_data[i].id, label:campaign_grouping_data[i].name})\n if (i < 5)\n selectedCampaignGroupings.push({value:campaign_grouping_data[i].id, label:campaign_grouping_data[i].name})\n }\n \n var recentBudgetInputs = []\n\n for (var i = 0; i < 3; i++)\n {\n if (i === apiData.length)\n break;\n var recentBudgetInputItem = {id: apiData[i].id, name: apiData[i].name, campaignGroupCount: apiData[i].campaign_group_count, conversionType: apiData[i].conversion_type, modelFrequency: apiData[i].model_frequency}\n recentBudgetInputs.push(recentBudgetInputItem)\n }\n \n this.setState({recentBudgetInputs : recentBudgetInputs, campaignGroupings: campaignGroupings, selectedCampaignGroupings: selectedCampaignGroupings, selectedCampaignGroupingsToPassToLineChart: selectedCampaignGroupings})\n }\n\n componentDidUpdate = async(prevProps, prevState) =>\n {\n if (this.props.selectedBudgetOutputId !== prevProps.selectedBudgetOutputId)\n {\n var apiData = await fetchApi(\"BUDGET_RESULTS\", [this.state.accountId])\n var campaign_grouping_data = await fetchApi(\"GET_CAMPAIGN_GROUPS_FOR_DROPDOWN\", [this.props.selectedBudgetOutputId])\n var campaignGroupings = []\n var selectedCampaignGroupings = []\n for (var i = 0; i < campaign_grouping_data.length; i++)\n {\n campaignGroupings.push({value:campaign_grouping_data[i].id, label:campaign_grouping_data[i].name})\n if (i < 5)\n selectedCampaignGroupings.push({value:campaign_grouping_data[i].id, label:campaign_grouping_data[i].name})\n }\n \n var recentBudgetInputs = []\n \n for (var i = 0; i < 3; i++)\n {\n if (i === apiData.length)\n break;\n var recentBudgetInputItem = {id: apiData[i].id, name: apiData[i].name, campaignGroupCount: apiData[i].campaign_group_count, conversionType: apiData[i].conversion_type, modelFrequency: apiData[i].model_frequency}\n recentBudgetInputs.push(recentBudgetInputItem)\n }\n \n this.setState({ modelFrequency: this.props.modelFrequency, conversionType: this.props.conversionType, selectedBudgetOutputId: this.props.selectedBudgetOutputId, selectedBudgetOutput: this.props.selectedBudgetOutput, resetBudgetParameters: true, recommendedBudget : [], isBudgetRecommendation:false, selectedDateStart: null, selectedDateEnd: null, targetValue: '', json: [], isError:false, errorMessage: '', recentBudgetInputs : recentBudgetInputs, campaignGroupings: campaignGroupings, selectedCampaignGroupings: selectedCampaignGroupings, selectedCampaignGroupingsToPassToLineChart: selectedCampaignGroupings})\n }\n }\n\n switchBudgetOutputResult = (e) =>\n {\n this.props.switchBudgetOutputResult(e, this.state.recentBudgetInputs)\n }\n\n fetchData = async() =>\n {\n var apiRecommendedBudget = []\n var apiData = await fetchApi(\"RECENT_BUDGET_RECOMMENDATIONS\", [this.state.selectedBudgetOutputId])\n for (var x = 0; x < apiData.length; x++)\n {\n apiData[x].rec_budget = 0\n apiData[x].avg_hist_spend = 0\n apiData[x].adj_spend = 0\n apiData[x].rec_kpi = 0\n apiData[x].est_roi = 0\n apiData[x].min_spend = \"0\"\n apiData[x].max_spend = \"0\"\n apiData[x].enabled = true\n }\n for (var i = 0; i < apiData.length; i++)\n {\n apiRecommendedBudget.push({rec_budget: apiData[i].rec_budget, id:apiData[i].id})\n }\n //apiData = apiData.map(obj => {return {...obj, max_spend:obj.upper_quant_bounds_budget}})\n var campaignNames = apiData.map(x => x.name).filter((value, index, self) => self.indexOf(value) === index)\n var columnWidth = this.getColumnWidth(campaignNames);\n this.setState({columnWidth: columnWidth, apiData: apiData, resetBudget:false, resetBudgetParameters:false, recommendedBudget: apiRecommendedBudget})\n }\n\n getColumnWidth = (campaignNames) =>\n {\n var longestString = Math.max(...(campaignNames.map(el => el.length)));\n if (longestString <= 10)\n return \"200px\";\n if (longestString <= 20)\n return \"250px\";\n if (longestString <= 30)\n return \"300px\";\n if (longestString <= 40)\n return \"350px\";\n if (longestString <= 60)\n return \"400px\";\n if (longestString <= 70)\n return \"550px\";\n if (longestString <= 80)\n return \"600px\";\n if (longestString <= 90)\n return \"650px\";\n if (longestString <= 100)\n return \"700px\";\n if (longestString <= 110)\n return \"750px\";\n }\n\n getConversionCalculatedHeader = () =>\n {\n switch (this.state.conversionType)\n {\n case \"Revenue\":\n return \"ROAS\";\n case \"Conversions\":\n return \"CPA\";\n case \"Reach\":\n return \"KPI / Spend\";\n case \"New Visitors\":\n return \"NV / Spend\";\n case \"CPM\":\n return \"CPM\";\n case \"Impressions\":\n return \"CPM\"\n case \"Views\":\n return \"CPM\"\n case \"ThruPlays\":\n return \"CPM\"\n case \"Leads\":\n return \"CPL\"\n case \"Purchases\":\n return \"Cost Per. Purchase\"\n case \"Sales\":\n return \"Cost Per. Sale\";\n case \"Landing Page Views\":\n return \"CPLPV\";\n case \"Link Clicks\":\n return \"CPLC\";\n case \"Free Trials\":\n return \"CPFT\";\n case \"Installs\":\n return \"Cost Per. Install\";\n case \"Referrals\":\n return \"Cost Per. Referrals\";\n case \"Signups\":\n return \"Cost Per. Signup\";\n case \"Clicks\":\n return \"CPC\";\n case \"Bookings\":\n return \"Cost Per. Booking\";\n }\n }\n\n\n fetchBudgetSweepData = async() =>\n {\n this.setState({isBudgetRecommendation: false})\n var apiRecommendedBudget = []\n var apiData = await fetchApi(\"BUDGET_OPTIMIZATION\", [this.state.selectedBudgetOutputId, this.state.selectedDateStart, this.state.selectedDateEnd, this.state.target.toLowerCase(), this.state.targetValue, this.state.budgetOptimizationAPIParams.minPercentArray, this.state.budgetOptimizationAPIParams.maxPercentArray,this.state.budgetOptimizationAPIParams.minSpendArray, this.state.budgetOptimizationAPIParams.maxSpendArray, this.state.accountId, this.state.budgetOptimizationAPIParams.campaignGroupingArray, this.state.budgetOptimizationAPIParams.isDollarConstraint, this.state.budgetOptimizationAPIParams.disabledIds])\n if (apiData.message !== undefined || apiData.error !== undefined)\n {\n if (!this.state.isError)\n await this.setState({isError:true, errorMessage: apiData.message === undefined ? apiData.error : apiData.message})\n }\n else\n {\n for (var x = 0; x < apiData.length; x++)\n {\n apiData[x].adj_spend = (((parseFloat(apiData[x].rec_budget) - parseFloat(apiData[x].avg_hist_spend)) / parseFloat(apiData[x].avg_hist_spend))*100).toFixed(0).toString() + \"%\"\n if (this.state.conversionType === \"Revenue\" || this.state.conversionType === \"Reach\")\n apiData[x].est_roi = (parseFloat(apiData[x].rec_kpi) / parseFloat(apiData[x].rec_budget)).toFixed(2)\n else if (this.state.conversionType === \"CPM\" || this.state.conversionType === \"Impressions\" || this.state.conversionType === \"Views\" || this.state.conversionType === \"ThruPlays\")\n apiData[x].est_roi = (parseFloat(apiData[x].rec_budget) / (parseFloat(apiData[x].rec_kpi)/1000)).toFixed(2)\n else\n apiData[x].est_roi = (parseFloat(apiData[x].rec_budget)/ parseFloat(apiData[x].rec_kpi)).toFixed(2) \n }\n \n\n //filter out any potential disabled rows, incase of race conditions\n apiData = apiData.filter(item => !this.state.disabledCampaignGroupIds.includes(item.id));\n\n for (var i = 0; i < apiData.length; i++)\n {\n apiData[i].enabled = true\n }\n\n for (var i = 0; i < apiData.length; i++)\n {\n apiRecommendedBudget.push({rec_budget: apiData[i].rec_budget, id:apiData[i].id})\n }\n \n for (var i = 0; i < this.state.disabledRows.length; i++)\n {\n apiData.splice(this.state.disabledRows[i].rowIndex, 0, {adj_spend:'0', avg_hist_spend:'0', est_roi:'0', id:this.state.disabledRows[i].id, max_percent:\"0.80\", max_spend:this.state.disabledRows[i].maxSpend, min_percent:\"0.00\", min_spend:\"0.00\", name:this.state.disabledRows[i].campaignName, rec_budget:0, rec_kpi:0, warnings: [], enabled: false})\n }\n\n \n\n await this.setState({recommendedBudget: apiRecommendedBudget, isError:false, errorMessage: '', apiData: apiData})\n }\n }\n\n fetchResponseCurveData = async (campaignGroupingArray, selectedBudgetPlanId, isOptimized) =>\n {\n var apiData = []\n var selectedCampaignGroupIds = this.state.selectedCampaignGroupings.map(x => x.value)\n if (!isOptimized)\n apiData = await fetchApi(\"RESPONSE_CURVES_CAMPAIGN_LEVEL\", [selectedBudgetPlanId, selectedCampaignGroupIds])\n else{\n apiData = await fetchApi(\"RESPONSE_CURVES_OPTIMIZED\", [campaignGroupingArray.map(x => x.value).filter(x => !this.state.disabledCampaignGroupIds.includes(x)), this.state.selectedDateStart, this.state.selectedDateEnd])\n }\n \n apiData = apiData.map(x => {if(x.kpi_value < 0){x.kpi_value = 0}return x;})\n //apiData = apiData.sort((a, b) => a.campaign_group_name.toString().localeCompare(b.campaign_group_name) || a.cost - b.cost);\n return apiData;\n }\n\n fetchMarginalOverallData = async (isOptimized) =>\n {\n var apiData = []\n if (!isOptimized)\n var apiData = await fetchApi(\"OVERALL_MARGINAL\", [this.state.selectedBudgetOutputId])\n else\n var apiData = await fetchApi(\"OVERALL_MARGINAL_OPTIMIZED\", [this.state.selectedDateStart, this.state.selectedDateEnd, this.state.budgetOptimizationAPIParams.minPercentArray, this.state.budgetOptimizationAPIParams.maxPercentArray,this.state.budgetOptimizationAPIParams.minSpendArray, this.state.budgetOptimizationAPIParams.maxSpendArray, this.state.budgetOptimizationAPIParams.isDollarConstraint, this.state.target.toLowerCase(), this.state.targetValue, this.state.budgetOptimizationAPIParams.campaignGroupingArray])\n\n var costArray = apiData.map(e => e.cost)\n var kpiArray = apiData.map(e => e.kpi_value)\n var marginalKpiArray = apiData.map(e => e.marginal_kpi)\n return [costArray, kpiArray, marginalKpiArray]\n }\n\n setBudgetOptimizationParams = async (gridApi, isDollarConstraint, groupId, type, campaignName, rowIndex, maxSpend) => \n {\n var disabledCampaignGroupIds = this.state.disabledCampaignGroupIds\n var disabledRows = this.state.disabledRows\n if (type === \"enable\")\n {\n disabledRows = disabledRows.filter(x => x.id !== groupId)\n disabledCampaignGroupIds = disabledCampaignGroupIds.filter(id => id !== groupId);\n }\n \n \n else if (type === \"disable\")\n {\n disabledRows.push({rowIndex: rowIndex, campaignName: campaignName, id: groupId, maxSpend: maxSpend})\n disabledCampaignGroupIds.push(groupId)\n }\n \n \n if(gridApi)\n {\n var budgetOptimizationAPIParams = {maxPercentArray : [], minPercentArray : [], maxSpendArray : [], minSpendArray : [], campaignGroupingArray : [], isDollarConstraint: isDollarConstraint, disabledIds: disabledCampaignGroupIds}\n for (var i = 0; i < gridApi.getDisplayedRowCount(); i++)\n {\n \n budgetOptimizationAPIParams.minSpendArray.push(gridApi.getRowNode(i).data.min_spend)\n budgetOptimizationAPIParams.maxSpendArray.push(gridApi.getRowNode(i).data.max_spend)\n budgetOptimizationAPIParams.minPercentArray.push(gridApi.getRowNode(i).data.min_percent)\n budgetOptimizationAPIParams.maxPercentArray.push(gridApi.getRowNode(i).data.max_percent)\n budgetOptimizationAPIParams.campaignGroupingArray.push(gridApi.getRowNode(i).data.id)\n \n \n }\n if (JSON.stringify(budgetOptimizationAPIParams) === JSON.stringify(this.state.budgetOptimizationAPIParams))\n return;\n this.setState({\n budgetOptimizationAPIParams : budgetOptimizationAPIParams,\n disabledCampaignGroupIds: disabledCampaignGroupIds,\n disabledRows: disabledRows\n })\n }\n }\n\n handleCampaignSelection = (selectedOptions) =>\n {\n if(selectedOptions.length === 0)\n selectedOptions = this.state.selectedCampaignGroupings\n\n this.setState({selectedCampaignGroupings: selectedOptions, selectedCampaignGroupingsToPassToLineChart: selectedOptions})\n }\n\n fetchSelectedCampaignData = () =>\n {\n var selectedOptions = this.state.selectedCampaignGroupings\n this.setState({selectedCampaignGroupingsToPassToLineChart: selectedOptions})\n }\n\n refreshBudgetRecommendation = () =>\n {\n if (this.state.selectedDateStart !== null && this.state.selectedDateEnd !== null && this.state.targetValue !== null)\n {\n this.setState({isBudgetRecommendation: true})\n }\n }\n\n \n\n didBudgetParamatersReset = (e) =>\n {\n this.setState({resetBudgetParameters: false})\n }\n\n resetRecommendationValues = async () =>\n {\n this.setState({isBudgetRecommendation:false, resetBudget:true, selectedDateStart: null, selectedDateEnd: null, targetValue: '', isError:false, errorMessage: '', json: []})\n await this.fetchData()\n }\n\n backToBudgetResults = () =>\n {\n this.props.backToBudgetResults()\n }\n\n render() {\n let targetTooltip = [\"Specify a budget, KPI, or efficiency target. Budget target example:\" ,
, \"setting a budget target of 1,000,000 (dollars) will output\" ,
, \"the most efficient way to allocate the investment (meeting your constraints) over the specified time period.\" ,
, \"KPI target example: setting a KPI target of 5,000 (e.g. leads), will output the minimum budget required to meet that goal, optimally allocated across your initiatives.\" ,
, \"KPI / Spend and Spend / KPI example: specify this if you have no maximum budget, but have an efficiency target, such as an ROAS of 2.\" ,
,\" The output will display the maximum investment that can be made while not exceeding this efficiency goal. Note, KPI / Spend would be applicable to a metric such as ROAS, while Spend / KPI would be applicable to a metric such as cost per lead.\"];\n let dateRangeTooltip = \"Specify the time period (start and end dates) the budget plan should generate budget allocation recommendations and forecasts for. For example, to understand how to best allocate one million dollars for your initiatives next month, enter 1,000,000 into the Target field with Budget selected, then select the first day of next month (start) and last day of next month (end) in the Date Range module.\";\n var {isError, errorMessage} = this.state\n return(\n
\n \n Back to Budget Results \n
\n \n {/*
\n
Recent Budget Inputs \n
\n {\n Object.keys(this.state.recentBudgetInputs).map((key) => {\n return {this.state.recentBudgetInputs[key].name ? this.state.recentBudgetInputs[key].name : \"\"} ;\n })}\n \n
*/}\n
\n
\n
\n
{this.state.selectedBudgetOutput} \n
Response curve selector
\n
this.state.selectedCampaignGroupings.length >= 5}\n isClearable = {false}\n />\n
\n
\n
\n
\n \n
\n
\n \n
\n
Scenario Planner \n {\n isError ? \n
{errorMessage}
:\n
\n }\n
\n
\n \n
\n
\n
\n
\n );\n }\n}\n\nexport default CampaignTemplate\n","import React, { Component } from 'react';\nimport CampaignGroupingTemplate from './BudgetResultsOutputTemplates/CampaignGroupingTemplate';\nimport CampaignTemplate from './BudgetResultsOutputTemplates/CampaignTemplate';\nimport ReactGA from \"react-ga4\";\nimport { Redirect } from \"react-router-dom\";\n\nReactGA.initialize(\"G-YQ7D35VK7L\")\n\nexport class BudgetResultsOutput extends Component {\n static displayName = BudgetResultsOutput.name;\n\n constructor(props) {\n super(props);\n\n this.state =\n {\n selectedBudgetOutput: this.props.location.state.selectedBudgetOutput,\n accountId: this.props.location.state.accountId,\n selectedBudgetOutputId: this.props.location.state.selectedBudgetOutputId,\n conversionType: this.props.location.state.conversionType,\n modelFrequency: this.props.location.state.modelFrequency,\n campaignGroupingsAmount: this.props.location.state.campaignGroupingsAmount,\n isRedirect: false\n }\n \n };\n\n componentDidMount = () =>\n {\n ReactGA.event({category: this.props.location.state.accountName, action: \"Budget Plan List\", label: this.props.location.state.selectedBudgetOutput})\n }\n\n switchBudgetOutputResult = (e, recentBudgetInputs) =>\n {\n var selectedBudget = recentBudgetInputs.filter(x => x.id.toString() === e._targetInst.key )\n this.setState({campaignGroupingsAmount: selectedBudget[0].campaignGroupCount, conversionType: selectedBudget[0].conversionType, modelFrequency: selectedBudget[0].modelFrequency, selectedBudgetOutput: e.target.textContent, selectedBudgetOutputId: e._targetInst.key})\n }\n\n backToBudgetResults = () =>\n {\n this.setState({isRedirect:true})\n }\n\n render() {\n return(\n\n this.state.isRedirect ? \n \n
:\n\n parseInt(this.state.campaignGroupingsAmount) < 15 ? \n
\n :\n
\n \n );\n }\n}\n\nexport default BudgetResultsOutput\n","import React, { Component } from 'react';\nimport '../css/main.css';\n\nexport class Documentation extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n \n };\n }\n\n scrollToSection = (id) => {\n const element = document.getElementById(id);\n if (element) {\n element.scrollIntoView({ behavior: 'smooth' });\n }\n }\n\n render() {\n return(\n <>\n
\n
\n
\n
\n
\n
\n
Overview \n
Understand the basics of Caliper by watching a within-channel walkthrough. Note, cross-channel analyses use the same modules, therefore this will be applicable to cross-channel users as well.
\n
\n
\n VIDEO \n
\n
\n
\n
\n
\n
\n
Investment Optimization \n
This walkthrough will help users get started with investment optimization, whether using a budget, KPI or KPI efficiency target. Additionally it will let you know how to start small by first addressing the largest allocation opportunities.
\n
\n
\n VIDEO \n
\n
\n
\n
\n
\n
\n
Optimal Investment Level \n
If you are looking to find the optimal investment level for your client this tutorial will walk you through two approaches based on whether or not your client has provided an efficiency target.
\n
\n
\n VIDEO \n
\n
\n
\n
\n
\n
\n
Flighting \n
Performing annual or quarterly planning and need to know how much investment to recommend by month or week? This tutorial will walk you through how to obtain those answers in a matter of seconds.
\n
\n
\n VIDEO \n
\n
\n
\n \n );\n }\n}\n","import React, { Component } from 'react';\nimport { Route } from 'react-router';\nimport { Layout } from './components/Layout';\nimport { BudgetResults } from './components/BudgetResults';\nimport { BudgetResultsOutput } from './components/BudgetResultsOutput';\nimport { Documentation } from './components/Documentation';\nimport './custom.css'\n\nexport default class App extends Component {\n static displayName = App.name;\n\n constructor(props) {\n super(props);\n if (window.location.href.includes('localhost'))\n //localStorage.setItem(\"API_BASE_URL\", \"http://10.106.24.93:8107/\")\n localStorage.setItem(\"API_BASE_URL\", \"http://127.0.0.1:8000/\")\n else if (window.location.href.includes('staging'))\n localStorage.setItem(\"API_BASE_URL\", \"https://jsmdl9b407.execute-api.us-east-1.amazonaws.com/pre-prod/\")\n else\n localStorage.setItem(\"API_BASE_URL\", \"https://3l7clrkrpl.execute-api.us-east-1.amazonaws.com/dev/\")\n };\n\n render () {\n return (\n
\n \n );\n }\n}\n","// In production, we register a service worker to serve assets from local cache.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on the \"N+1\" visit to a page, since previously\n// cached resources are updated in the background.\n\n// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.\n// This link also includes instructions on opting out of this behavior.\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport default function register () {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Lets check if a service worker still exists or not.\n checkValidServiceWorker(swUrl);\n } else {\n // Is not local host. Just register service worker\n registerValidSW(swUrl);\n }\n });\n }\n}\n\nfunction registerValidSW (swUrl) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the old content will have been purged and\n // the fresh content will have been added to the cache.\n // It's the perfect time to display a \"New content is\n // available; please refresh.\" message in your web app.\n console.log('New content is available; please refresh.');\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker (swUrl) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n if (\n response.status === 404 ||\n response.headers.get('content-type').indexOf('javascript') === -1\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister () {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}\n","import 'bootstrap/dist/css/bootstrap.css';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { BrowserRouter } from 'react-router-dom';\nimport App from './App';\nimport registerServiceWorker from './registerServiceWorker';\n\nconst baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');\nconst rootElement = document.getElementById('root');\n\nReactDOM.render(\n
\n ,\n rootElement);\n\nregisterServiceWorker();\n\n"],"sourceRoot":""}