{"version":3,"sources":["webpack:///./scripts/components/myProfileSummary.js"],"names":["d3","component","momentModule","window","moment","serviceHistoryGraph","document","getElementById","innerWidth","$myProfile","$","$onthispage","$callout","next","length","after","click","userStateManager","getUserProfileData","data","isNullUndefinedEmpty","ProfileInfo","apiProblemOccured","displayErrorMessage","parent","TotalLengthOfService","Tenures","graphData","slice","renderGraph","error","innerHTML","$allHistoryBtn","$allHistoryTable","$allHistoryAccordion","$allIncidentsBtn","$allIncidentsTable","$allIncidentsAccordion","on","e","attr","parents","addClass","removeAttr","totalServiceDays","arc","staticRings","map","item","index","innerRadius","outerRadius","startAngle","endAngle","Math","PI","serviceItemsArcs","xy","percent","LengthOfService","endAngleDegrees","floor","arcPath","indexOf","textCoords","split","coords","x","parseFloat","y","staticRingsHtml","content","getStaticRingHtml","join","serviceHistoryList","querySelector","listHtml","startDate","StartDate","endDateText","EndDate","year","durationRender","duration","humanize","ServiceTypeCode","getServiceHistoryItem","html","serviceHistoryItem","onServiceItemEnter","onServiceItemLeave","handleClickAndTouch","allArcPath","querySelectorAll","highlightServiceItem","highlightArcPath","onArcEnter","onArcLeave","event","historyItems","parseIndex","currentTarget","forEach","element","setAttribute","activeIndex","highlighSelectedItem","seriviceItems","dataIndex","classList","contains","serviceItem","getAttribute"],"mappings":"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","file":"21.766365177200fff18aa7.js","sourcesContent":["import { displayErrorMessage } from '../helpers/displayError';\nimport { isNullUndefinedEmpty } from '../helpers/helpers';\nimport userStateManager from '../helpers/stateManager';\n\nlet d3;\n\nexport const component = async () => {\n const momentModule = await import('moment-mini');\n window.moment = momentModule.default;\n\n d3 = await import('d3-shape');\n\n const serviceHistoryGraph = document.getElementById('service-history-graph');\n\n //move elements if mobile\n if (window.innerWidth < 768) {\n const $myProfile = $('.my-profile');\n const $onthispage = $('.on-this-page');\n const $callout = $myProfile.next('.callout-box');\n\n if ($myProfile.length && $onthispage.length) {\n $onthispage.after($callout).after($myProfile);\n }\n\n //service history should be open by default\n $('.my-profile__heading.-btn').click();\n }\n\n if (serviceHistoryGraph) {\n userStateManager.getUserProfileData(function (data) {\n if (!isNullUndefinedEmpty(data.ProfileInfo)) {\n if (data && data.apiProblemOccured) {\n displayErrorMessage($(serviceHistoryGraph).parent(), true, false);\n return;\n }\n\n if (!isNullUndefinedEmpty(data.ProfileInfo.TotalLengthOfService) && !isNullUndefinedEmpty(data.ProfileInfo.Tenures)) {\n try {\n const graphData = data.ProfileInfo.Tenures.slice(0, 3);\n renderGraph(serviceHistoryGraph, graphData, data.ProfileInfo.TotalLengthOfService);\n } catch (error) {\n console.error('There was an error setting up the service history graph: ', error);\n serviceHistoryGraph.innerHTML = '

There was an issue displaying this graph.

';\n }\n } else {\n }\n }\n });\n\n //Trigger expanding the accordions for anchor CTAs\n const $allHistoryBtn = $('.all-my-service-history-link');\n const $allHistoryTable = $('#my-service-history-table');\n const $allHistoryAccordion = $('#My-Service-History');\n const $allIncidentsBtn = $('.all-my-incidents-link');\n const $allIncidentsTable = $('#my-incidents-table');\n const $allIncidentsAccordion = $('#My-Incidents');\n\n $allHistoryBtn.on('click', function (e) {\n if ($allHistoryAccordion.attr('aria-expanded') === 'false') {\n $allHistoryAccordion.attr('aria-expanded', 'true');\n $allHistoryTable.parents('.collapse').addClass('in').removeAttr('style');\n }\n });\n\n $allIncidentsBtn.on('click', function (e) {\n if ($allIncidentsAccordion.attr('aria-expanded') === 'false') {\n $allIncidentsAccordion.attr('aria-expanded', 'true');\n $allIncidentsTable.parents('.collapse').addClass('in').removeAttr('style');\n }\n });\n }\n};\n\nfunction renderGraph(serviceHistoryGraph, graphData, totalServiceDays) {\n const arc = d3.arc(); // See d3 shapes repo for more details: https://github.com/d3/d3-shape\n\n //The first 3 rings are use for the background, these are full 360 rings and not arcs.\n //Render static bg rings for length of graph data\n var staticRings = graphData.map((item, index) => {\n return arc({\n innerRadius: 60 - index * 25,\n outerRadius: 80 - index * 25,\n startAngle: 0,\n endAngle: Math.PI * 2,\n });\n });\n\n // These arcs corresponds to the (up to three values), starting from the outer ring going down to the most innner.\n var serviceItemsArcs = graphData.map((item, index) => {\n // const startDate = moment(item.StartDate);\n // const endDate = (item.EndDate !== null) ? moment(item.EndDate) : moment();\n // const duration = moment.duration(endDate.diff(startDate)).asDays();\n const percent = item.LengthOfService / totalServiceDays;\n const endAngleDegrees = Math.floor(percent * 360);\n\n // console.log('Duration for this service: ', duration);\n // console.log('Percent for this service: ', percent);\n // console.log('endAngleDegrees for this service: ', endAngleDegrees);\n\n var arcPath = arc({\n innerRadius: 60 - index * 25,\n outerRadius: 80 - index * 25,\n startAngle: 0,\n endAngle: endAngleDegrees * (Math.PI / 180), //Convert degrees to radians\n });\n\n //Set up number label\n if (arcPath.indexOf('L') > 0) {\n const textCoords = arcPath.split('L')[1].split('A')[0]; //Get the position of the last line that closes the arc if it exists\n const coords = parseCoords(textCoords);\n\n return `\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t${index + 1}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t`;\n } else {\n return `\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t`;\n }\n });\n\n const staticRingsHtml = staticRings.map((content) => getStaticRingHtml(content));\n // adds the constructed SVG graph to the dom element that will be housing this graph.\n // NOTE: if you tweak the width and height, don't forget the transforms (by default the origin is 0, 0) so the circle\n // will sit in the corner, hence there is the transform=\"translate(x, y)\" on the paths to move it to the center.\n\n serviceHistoryGraph.innerHTML = `\n\t\t\n\t\t\tA graph representing your service history\n\t\t\t\n\t\t\t\t \n\t\t\t\t \n\t\t\t\t\n\t\t\t\t\t \n\t\t\t\t\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t\t\t \n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t${staticRingsHtml.join('')}\n\t\t\t\t${serviceItemsArcs.join('')}\n\t\t\t\n\t\t\n\t`;\n\n let activeIndex = 0; // used to hanlde hover of the service item and the arc values.\n const serviceHistoryList = document.querySelector('.service-history-list');\n\n if (serviceHistoryList && graphData.length) {\n //console.log(graphData);\n const listHtml = graphData.map((content, index) => getServiceHistoryItem(content, index));\n $(serviceHistoryList).html(listHtml);\n\n //List mouse events\n const serviceHistoryItem = $('.service-history-item');\n serviceHistoryItem.on('mouseenter', onServiceItemEnter);\n serviceHistoryItem.on('mouseleave', onServiceItemLeave);\n serviceHistoryItem.on('click touchend', handleClickAndTouch);\n\n //TODO - Some of these selectors are native and some are jQuery...\n const allArcPath = document.querySelectorAll('.arc-path');\n const historyItems = document.querySelectorAll('.service-history-item');\n highlightServiceItem(activeIndex, historyItems);\n highlightArcPath(activeIndex, allArcPath);\n\n //Path mouse events\n const arcPath = $('.arc-path');\n arcPath.on('mouseenter', onArcEnter);\n arcPath.on('mouseleave', onArcLeave);\n arcPath.on('click touchend', handleClickAndTouch);\n }\n}\n\nfunction handleClickAndTouch(event) {\n const index = parseIndex(event.currentTarget);\n removeAllActiveItems();\n highlighSelectedItem(index);\n}\n\nfunction getStaticRingHtml(content) {\n return ``;\n}\n\nfunction getServiceHistoryItem(content, index) {\n var startDate = moment(content.StartDate);\n\n var endDateText = content.EndDate !== null ? moment(content.EndDate).year() : 'Today';\n var durationRender = moment.duration(content.LengthOfService, 'days').humanize() + ': ' + startDate.year() + ' - ' + endDateText;\n\n return `\n\t\t
  • \n\t\t\t\n\t\t
    • \n\t\t`;\n}\n\n// Handle the interaction for mouse hover of the arc.\nfunction onArcEnter(event) {\n const seriviceItems = document.querySelectorAll('.service-history-item');\n const dataIndex = parseIndex(event.currentTarget);\n highlightServiceItem(dataIndex, seriviceItems);\n}\n\nfunction onArcLeave(event) {\n const seriviceItems = document.querySelectorAll('.service-history-item');\n const arcPath = event.currentTarget;\n const dataIndex = parseIndex(arcPath);\n\n if (arcPath.classList && !arcPath.classList.contains('active')) {\n seriviceItems[dataIndex].setAttribute('class', 'service-history-item');\n }\n}\n// Handle the interaction for mouse hover of the service history item.\nfunction onServiceItemEnter(event) {\n const allArcPath = document.querySelectorAll('.arc-path');\n const dataIndex = parseIndex(event.currentTarget);\n highlightArcPath(dataIndex, allArcPath);\n}\n\nfunction onServiceItemLeave(event) {\n const allArcPath = document.querySelectorAll('.arc-path');\n const serviceItem = event.currentTarget;\n const dataIndex = parseIndex(serviceItem);\n\n if (serviceItem.classList && !serviceItem.classList.contains('active')) {\n allArcPath[dataIndex].setAttribute('class', 'arc-path');\n }\n}\n\n// highlights the correct item that was clicked.\nfunction highlighSelectedItem(activeIndex) {\n const allArcPath = document.querySelectorAll('.arc-path');\n const historyItems = document.querySelectorAll('.service-history-item');\n highlightServiceItem(activeIndex, historyItems);\n highlightArcPath(activeIndex, allArcPath);\n}\n\n// Find all the items in both the arc and the service item list and remove the highlight via css 'active class\nfunction removeAllActiveItems() {\n const allArcPath = document.querySelectorAll('.arc-path');\n const historyItems = document.querySelectorAll('.service-history-item');\n // clear all active class on item.\n allArcPath.forEach((element) => element.setAttribute('class', 'arc-path'));\n historyItems.forEach((element) => element.setAttribute('class', 'service-history-item'));\n}\n\n// Find the arc-path that correspond to the service item clicked and highlight it using the 'active' css class.\nfunction highlightArcPath(index, allArcPath) {\n allArcPath[index].setAttribute('class', 'arc-path active');\n}\n\n// Find the history item based on the index and add the highlight colour via the 'active' class\nfunction highlightServiceItem(index, historyItems) {\n historyItems[index].setAttribute('class', 'service-history-item active');\n}\n\n// Find the data-index attribute value and return the integer version (base 10)\nfunction parseIndex(item) {\n return item.getAttribute('data-index', 10);\n}\n\nfunction parseCoords(str) {\n var xy = str.split(',');\n const coords = { x: parseFloat(xy[0]), y: parseFloat(xy[1]) };\n return coords;\n}\n"],"sourceRoot":""}