that contains just the radio button\nconst StyledButton = styled.div`\n &::before {\n content: \"${({selected}) => selected ? charSelected : charUnselected}\";\n }\n\n color: ${\n ({disabled,selected,theme}) =>\n disabled\n ? theme.colors.palette.grey.silver\n : selected\n ? theme.colors.palette.blue.awesome\n : theme.colors.palette.grey.manatee\n };\n\n cursor: ${({disabled}) => disabled ? 'default' : 'pointer'};\n display: flex;\n font-family: \"vorne-icon\";\n font-size: ${fontSize}px;\n padding-bottom: ${standardPadding}px;\n padding-top: ${standardPadding}px;\n /* Give mobile users a nice big touch target*/\n @media (hover: none) and (pointer: coarse) {\n padding-bottom: ${touchTargetPadding}px;\n padding-top: ${touchTargetPadding}px;\n }\n`;\n\n// Styled
that contains just the optional text\nconst StyledLabel = styled.div`\n color: ${\n ({disabled,theme}) =>\n disabled ? theme.colors.darkText.disabled : theme.colors.darkText.highEmphasis\n };\n\n cursor: ${({disabled}) => disabled ? 'default' : 'pointer'};\n padding-left: ${leftPadding}px;\n`;\n\n// The actual control that displays the radio button and optional text\nexport default function RadioButton({\n children, // Text to the right of the radio button\n className,\n disabled, // Is the radio button disabled?\n selected, // Is the radio button selected?\n value, // Key identifying this radio button\n onChange // Callback when control is clicked\n}) {\n function handleClick() {\n if (!disabled) {\n onChange({ target: { value } });\n }\n }\n\n return (\n
\n \n {\n disabled ?\n (\n {children}\n )\n :\n (\n {children}\n )\n }\n \n );\n}\n\nRadioButton.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n disabled: PropTypes.bool,\n selected: PropTypes.bool,\n value: PropTypes.string.isRequired,\n onChange: PropTypes.func\n};\n\nRadioButton.defaultProps = {\n disabled: false,\n selected: false,\n onChange: () => {}\n};\n","/**\n * The RadioButtonGroup component displays a group of RadioButton components. The RadioButton\n * matching {value} will initially be selected. Clicking on one selects it and deselects the\n * others. Specifying {disabled} disables all of the grouped RadioButton controls. Clicking on an\n * enabled button or its adjacent text will invoke the provided {onChange} callback and pass it the\n * following object:\n * \n * target {\n * value: {value} // String used to identify the button\n * }\n * \n * Sample usage:\n * \n *
{}}>\n * Option A\n * Option B\n * Option C\n * \n */\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { RadioButton } from 'Common/components/RadioButton';\n\nexport default function RadioButtonGroup({\n children, // List of RadioButton components\n className,\n disabled, // Is the radio button group disabled?\n value, // Key identifying the selected RadioButton component\n onChange // Callback when control is clicked\n}) {\n if (React.Children.count(children) <= 0) {\n return null;\n }\n\n const jsxChildren = React.Children.map(children, (child) => {\n if (child.type == RadioButton) {\n const childProps = {\n ...child.props,\n disabled: disabled,\n selected: (child.props.value === value),\n value: child.props.value,\n onChange: onChange\n };\n\n return React.cloneElement(child, childProps);\n }\n else {\n return child;\n }\n });\n\n return (\n
\n {jsxChildren}\n
\n );\n}\n\nRadioButtonGroup.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n disabled: PropTypes.bool,\n value: PropTypes.string,\n onChange: PropTypes.func\n};\n\nRadioButtonGroup.defaultProps = {\n disabled: false,\n value: '',\n onChange: () => {}\n};\n","import styled from 'styled-components';\nimport { Body7 } from 'Common/components/typography';\n\nconst InlineError = styled(Body7)`\n display: inline-block;\n\n color: ${({theme}) => theme.colors.palette.error.red};\n`;\n\nexport default InlineError;\n","import isNumber from 'lodash/isNumber';\n\nfunction log(val, base) {\n return Math.log(val) / Math.log(base);\n}\n\nexport function magnitude(val) {\n var rv = Math.abs(log(Math.abs(val), 10));\n rv = val < 1 ? -Math.ceil(rv) : Math.floor(rv);\n return val === 0 ? 0 : rv;\n}\n\nexport function constrain(number, a, b) {\n var min = Math.min(a, b);\n var max = Math.max(a, b);\n\n number = number < min ? min : number;\n number = number > max ? max : number;\n\n return number;\n}\n\nexport function trunc(n, precision) {\n var rv,\n factor,\n scaledN,\n truncN;\n\n if (precision) {\n factor = Math.pow(10, precision);\n scaledN = n * factor;\n truncN = trunc(scaledN);\n rv = truncN / factor;\n }\n else {\n rv = n < 0 ? Math.ceil(n) : Math.floor(n);\n }\n\n return rv;\n}\n\n/**\n * Get the fractional part of `n` without floating-point error.\n *\n * @param {Number} n The number to get\n * @return {Number} The portion of `n` after the decimal; 0 if `n` is integral.\n */\nexport function getFractionalPiece(n) {\n var str = n.toString(),\n point = str.indexOf('.'),\n fract = 0;\n\n if (point !== -1) {\n fract = parseFloat('0' + str.slice(point));\n }\n\n return fract;\n}\n\n/**\n * Returns an object that contains the slope and intercept of the linear regression of the\n * data. The calculation is based on the formula:\n *\n * y = m*x + b\n * m = (n*sum(xy) - sum(x)*sum(y))/(n*sum(x**2) - (sum(x))**2)\n * b = (sum(y) - m*sum(x))/n\n *\n * Values not included in the data are not included in the calculation.\n *\n * @param {Number[][]} data An array of X,Y pairs.\n * @param {Function} getXYFunction function taking (value, index) as parameters, and returning\n * {x: ..., y: ...} to be used in calculating the trend line.\n * @return {Object} Trend line definition\n * @return {Number} return.slope The slope of the trend line\n * @return {Number} return.intercept The Y at first data point. If 2-dimensional line is used,\n * the intercept is not Y intercept, but intercept at X value of first point.\n * @private\n */\nfunction trend2D(data, getXYFunction) {\n var rv = null;\n\n var getXY = getXYFunction || function(value, index) {\n return {\n x: index,\n y: value\n };\n };\n\n // At least two points are needed for linear regression analysis.\n if (data.length >= 2) {\n var sum_of_x = 0;\n var sum_of_y = 0;\n var sum_of_xy = 0;\n var sum_of_x2 = 0;\n\n var firstX = getXY(data[0][1], data[0][0]).x;\n\n data.forEach(function(value, index) {\n var xy = getXY(value[1], value[0]),\n x = xy.x - firstX,\n y = xy.y;\n\n sum_of_x += x;\n sum_of_y += y;\n sum_of_xy += x * y;\n sum_of_x2 += x * x;\n }, this);\n\n // Get the slope of the linear regression.\n var slope_divisor = data.length * sum_of_x2 - sum_of_x * sum_of_x;\n // Check the value of slope divisor to prevent \"divide by zero\" error.\n if (slope_divisor !== 0) {\n var slope_dividend = data.length * sum_of_xy - sum_of_x * sum_of_y;\n // Get the value of slope\n var m = slope_dividend / slope_divisor;\n\n // Continue the calculation to get the intercept.\n var b = (sum_of_y - m * sum_of_x) / data.length;\n\n rv = {\n slope: m,\n intercept: b\n };\n }\n }\n\n return rv;\n}\n\n/**\n * Returns an object that contains the slope and intercept of the linear regression of the\n * data. The calculation is based on the formula:\n *\n * y = m*x + b\n * m = (n*sum(xy) - sum(x)*sum(y))/(n*sum(x**2) - (sum(x))**2)\n * b = (sum(y) - m*sum(x))/n\n *\n * Values not included in the data are not included in the calculation.\n *\n * @param {Number[]/Number[][]} data An array of numbers representing Y values for a set\n * of continuous X values or an array of X,Y pairs.\n * @param {Function} getXYFunction function taking (value, index) as parameters, and returning\n * {x: ..., y: ...} to be used in calculating the trend line.\n * @return {Object} Trend line definition\n * @return {Number} return.slope The slope of the trend line\n * @return {Number} return.intercept The Y at first data point. If 2-dimensional line is used,\n * the intercept is not Y intercept, but intercept at X value of first point.\n */\nexport function trend(data, getXYFunction) {\n var rv = null;\n\n if (isNumber(data[0])) {\n var data2DArray = [];\n\n var index2D = 0;\n\n //Build 2-Dimensional Array from data\n data.forEach(function(value, index) {\n if (value || value === 0) {\n data2DArray[index2D++] = [index, value];\n }\n }, this);\n\n //Get trend based on 2-Dimensional Array\n rv = trend2D(data2DArray, getXYFunction);\n }\n else {\n rv = trend2D(data, getXYFunction);\n }\n\n return rv;\n}\n\nexport function numericContains(value, low, high) {\n value = parseFloat(value);\n low = parseFloat(low);\n high = parseFloat(high);\n\n var isNumeric = !isNaN(value) && !isNaN(low) && !isNaN(high);\n\n return isNumeric && value >= low && value <= high;\n}\n\nexport function trendPercent(data, getXYFunction) {\n // need at least 2 points of data to compute a trend\n if (data.length < 2) {\n return null;\n }\n\n // The data we're given here has been known to be out of order.\n // Make sure all the pairs are sorted chronologically.\n var sorted_data = data.sort(function(a, b) { return a[0] - b[0]; });\n\n var baseTrend = trend(sorted_data, getXYFunction),\n first,\n last,\n percentChange = 0,\n delta_x;\n\n if (baseTrend) {\n delta_x = sorted_data[sorted_data.length - 1][0] - sorted_data[0][0];\n first = baseTrend.intercept;\n\n last = (baseTrend.slope * delta_x) + baseTrend.intercept;\n if (baseTrend.slope === 0) {\n percentChange = 0;\n }\n else if (first !== 0) {\n percentChange = (last - first) / Math.abs(first);\n }\n else {\n percentChange = Number.MAX_VALUE;\n }\n }\n\n return percentChange;\n}\n\nexport function getPlacesForNumericRange(range, defaultPlaces) {\n var places = defaultPlaces;\n if (range && (range.start || range.start === 0) && (range.end || range.end === 0)) {\n var diff = range.end - range.start,\n mag = magnitude(diff / 2);\n\n if (mag < 0) {\n places = Math.abs(mag) - 2;\n }\n }\n return places < 0 ? 0 : places;\n}\n","import escape from 'lodash/escape';\nconst variableRegEx = /\\{([\\w.]*)\\}/g;\n\n///-----------------------------------------------------------------------------------------\n/// Applies named arguments to the given string.\n/// Returns a formatted version of the string argument and does not modify the original.\n///\n/// PARAMETERS\n/// [String] fmt: a string with embedded format-specifications\n/// [Object] args: an object of strings with members named similarly to the\n// embedded specifiers. Member values will be inserted into the string\n// in place of the specifiers.\n/// [Object] opts: (optional) Contains any of the following formatting options:\n/// escapeHTML: if true, special HTML characters will be replaced with their proper\n/// escape sequence\n///\n/// EXAMPLE\n/// > exformat(\"{foo} -> {bar}\", { foo: 22, bar: 33 });\n/// \"{22 -> 33}\"\n///-----------------------------------------------------------------------------------------\n\nexport function exformat(fmt, args, opts) {\n if (typeof args !== 'object') {\n throw new Error('exformat: args must be an object');\n }\n\n opts = opts || { };\n\n return fmt.replace(variableRegEx, function(m, i) {\n var rv = args[i];\n\n // Undefined values are skipped over.\n if (typeof(rv) === 'undefined') {\n rv = '';\n }\n\n if (typeof(rv) !== 'string') {\n rv = String(rv);\n }\n\n if (opts.escapeHTML) {\n rv = escape(rv);\n }\n\n return rv;\n });\n}\n\n/**\n * Convenience alias to exformat, but ensures the escapeHTML option\n * is enabled so the values of the args may safely be used in HTML.\n */\nexport function exformatHTML(fmt, args, opts) {\n opts = opts || { };\n opts.escapeHTML = true;\n\n return exformat(fmt, args, opts);\n}\n\nexport function countSymbols(str) {\n return Array.from(str).length;\n}\n\nexport function toUtf8(str) {\n // [FUTUREHACK] may not be the most complete, efficient method.\n return unescape(encodeURI(str));\n}\n\nexport function toTitleCase(s) {\n return s.charAt(0).toUpperCase() + s.substr(1);\n}\n\nexport function getVariables(str) {\n var variables = str.match(variableRegEx) || [];\n // Get rid of the braces.\n return variables.map(function(v) {\n return v.slice(1, -1);\n });\n}\n","import { isDate } from 'lodash';\nimport moment from 'moment';\n\nconst DAYS = 'days';\nconst HOURS = 'hours';\nconst MINUTES = 'minutes';\nconst SECONDS = 'seconds';\n\n// We used to base our device-side dates on 1900. Now it's 1970.\nconst OLD_BASE_DATE = new Date(Date.parse(\"January 1, 1900\"));\nconst BASE_DATE = new Date(0);\n\n// Seconds and milliseconds per hour.\nexport const S_PER_HOUR = 60 * 60;\nexport const MS_PER_HOUR = S_PER_HOUR * 1000;\n\n// Seconds and milliseconds per day.\nexport const S_PER_DAY = S_PER_HOUR * 24;\nexport const MS_PER_DAY = S_PER_DAY * 1000;\n\n// Julian Day of 1/1/1970.\nexport const EPOCH_JULIAN_DAY = 2440588;\n\nfunction add(dt, portion, value) {\n return moment(dt).add(value, portion).toDate();\n}\n\nexport function addSeconds (dt, value) { return add(dt, SECONDS, value); }\nexport function addMinutes (dt, value) { return add(dt, MINUTES, value); }\nexport function addHours (dt, value) { return add(dt, HOURS, value); }\nexport function addDays (dt, value) { return add(dt, DAYS, value); }\n\n function subtractMinutes (dt, value) { return addMinutes (dt, -value); }\nexport function subtractHours (dt, value) { return addHours (dt, -value); }\nexport function subtractDays (dt, value) { return addDays (dt, -value); }\n\n// Is the given year a leap year? Expects a four digit year.\nfunction isLeapYear(year) {\n return (year % 400 === 0) || (year % 4 === 0 && year % 100 !== 0);\n}\n\nexport function fromEpochSeconds(s) {\n const dt = new Date(BASE_DATE.getTime() + s * 1000);\n return dt;\n}\n\nexport function from1900EpochSeconds(s) {\n const dt = new Date(OLD_BASE_DATE.getTime() + s * 1000);\n return dt;\n}\n\nexport function toEpochSeconds(date) {\n return date.getTime() / 1000;\n}\n\nexport function toEpochDays(date) {\n return Math.floor(toEpochSeconds(date) / (24 * 3600));\n}\n\nexport function dateToJSON(dt, opts) {\n opts = opts || {};\n\n if (opts.relative) {\n dt = subtractMinutes(dt, dt.getTimezoneOffset());\n }\n\n let rv = dt.toJSON(),\n parts = rv.split('T'),\n stripZ = opts.relative;\n\n if (opts.selector === 'date') {\n rv = parts[0];\n stripZ = false;\n }\n else if (opts.selector === 'time') {\n rv = parts[1];\n stripZ = true;\n }\n\n if (stripZ) {\n rv = rv.slice(0, rv.length - 1);\n }\n\n return rv;\n}\n\nexport function isDateValid(date) {\n return isDate(date) && !isNaN(date.getTime());\n}\n\n/**\n * zero based month (0 = January)\n */\nexport function getDaysInMonth(year, month) {\n const days = [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\n return days[month];\n}\n\n/**\n * compute the Julian day for a given year, month, and day of month. Computation will not\n * match Gregorian calendar before 1582-10-15 so beware.\n *\n * ref: http://en.wikipedia.org/wiki/Julian_day#Converting_Julian_or_Gregorian_calendar_date_to_Julian_Day_Number\n */\nexport function toJulianDay(year, month, day) {\n if (year instanceof Date) {\n return toJulianDay(year.getFullYear(), year.getMonth() + 1, year.getDate());\n }\n return moment.utc([year, month-1, day]).diff(moment.utc([1970]), 'days') + EPOCH_JULIAN_DAY;\n}\n\n/**\n * converts a Julian Number to an array of Year, Month, and Day\n * Months are 1-12 - not zero based like JavaScript Date\n */\nexport function fromJulianDay(J) {\n const details = moment.utc([1970]).add(J - EPOCH_JULIAN_DAY, 'days').toArray();\n details[1]++;\n return details.slice(0,3);\n}\n\nexport function addToJulianDay(julianDay, portion, value) {\n let details = fromJulianDay(julianDay);\n details[1]--;\n details = moment.utc(details).add(value, portion).toArray();\n details[1]++;\n return toJulianDay.apply(null, (details.slice(0,3)));\n}\n\n/**\n * convert a Julian number to day of week. Zero is Sunday.\n *\n * @param {Number} julianNumber (see http://en.wikipedia.org/wiki/Julian_day)\n *\n * @ref https://en.wikipedia.org/wiki/Julian_day#Finding_day_of_week_given_Julian_day_number\n *\n */\nexport function getJulianDayOfWeek(julianNumber) {\n return (julianNumber + 1) % 7;\n}\n\n/**\n * Converts a JS Date to a filename-friendly string\n *\n * @param {Date} the date to convert\n */\nexport function dateToFilenameString(date) {\n return moment(date).format('YYYY-MM-DD-HHmm');\n}\n\nexport function clearTime(date) {\n if (!isDateValid(date)) {\n throw new Error('Not a valid date');\n }\n\n const year = date.getFullYear(),\n month = date.getMonth(),\n day = date.getDate();\n\n date.setMilliseconds(0);\n date.setSeconds(0);\n date.setMinutes(0);\n date.setHours(0);\n date.setFullYear(year);\n date.setMonth(month);\n date.setDate(day);\n\n return date;\n}\n\nfunction compareDates(l, r) {\n l = l || new Date(r.getTime() - 1);\n r = r || new Date(l.getTime() - 1);\n\n return l.getTime() - r.getTime();\n}\n\nexport function areDatesEqual(l, r) {\n return compareDates(l, r) === 0;\n}\n\n/**\n * gets the week number associated with this date\n * @param {Date} dt the date to get the week number for\n * @param Number startDOW the day of week to use as week start 0=Sunday\n */\nexport function getWeekNumber(dt) {\n return moment(dt).isoWeek();\n}\n\nexport function getQuarter(d) {\n const q = [ 1, 2, 3, 4];\n return q[Math.floor(d.getMonth() / 3)];\n}\n\nconst DAYS_OF_WEEK = Object.freeze([\n 'sunday',\n 'monday',\n 'tuesday',\n 'wednesday',\n 'thursday',\n 'friday',\n 'saturday'\n]);\n\nexport function getDayOfWeekForDay(dayNumber) {\n let rv = DAYS_OF_WEEK[dayNumber];\n\n if (rv) {\n return rv;\n }\n else {\n throw new Error(`Invalid day number: ${dayNumber}`);\n }\n}\n\nexport const DAYS_OF_WEEK_NUMBERS = Object.freeze({\n sunday: 0,\n monday: 1,\n tuesday: 2,\n wednesday: 3,\n thursday: 4,\n friday: 5,\n saturday: 6\n});\n\nexport function getDayOfWeekIndexForDayOfWeek(dayName) {\n let rv = DAYS_OF_WEEK_NUMBERS[dayName];\n\n if (Number.isFinite(rv)) {\n return rv;\n }\n else {\n throw new Error(`Invalid day of week: ${dayName}`);\n }\n}\n\n// http://stackoverflow.com/questions/542938/how-do-i-get-the-number-of-days-between-two-dates-in-javascript\n// JavaScript date calculations are tricky because Date objects store times internally in UTC, not local time. For example,\n// 3/10/2013 12:00 AM Pacific Standard Time (UTC-08:00) is stored as 3/10/2013 8:00 AM UTC, and\n// 3/11/2013 12:00 AM Pacific Daylight Time (UTC-07:00) is stored as 3/11/2013 7:00 AM UTC. On this day, midnight to\n// midnight local time is only 23 hours in UTC!\n//\n// Although a day in local time can have more or less than 24 hours, a day in UTC is always exactly 24 hours (JavaScript\n// ignores leap seconds). The _daysBetween method takes advantage of this fact by first calling _treatAsUTC to adjust both\n// local times to midnight UTC, before subtracting and dividing.\n//\nexport function daysBetween(startDate, endDate) {\n const julianStart = toJulianDay(startDate),\n julianEnd = toJulianDay(endDate);\n\n return julianEnd - julianStart;\n}\n\n/**\n * Get the seconds between two Dates.\n *\n * @param {Date} startDate\n * @param {Date} endDate\n * @returns {Number} Positive if startDate is before endDate, otherwise negative.\n */\nexport function secondsBetween(startDate, endDate) {\n const start = moment(startDate);\n const end = moment(endDate);\n\n // `diff` returns milliseconds, so convert it.\n return end.diff(start) / 1000;\n}\n","import { addMinutes } from 'Common/util/language/date';\nimport moment from 'moment';\n\nfunction configFromString(iso8601) {\n var date = new Date(Date.parse(iso8601)),\n offsetMinutes,\n m = /\\d+-\\d+-\\d+T\\d+:\\d+:\\d+(?:\\.\\d+)?(?:([+-]\\d{2}):?(\\d{2})?|Z)/.exec(iso8601);\n\n if (!m) {\n throw 'Could not parse date string ' + iso8601;\n }\n\n offsetMinutes = 0;\n if (m[1]) {\n offsetMinutes = parseInt(m[1], 10) * 60;\n }\n if (m[2]) {\n // if initial offset is less than zero than we must subtract here\n if (offsetMinutes < 0) {\n offsetMinutes -= parseInt(m[2], 10);\n }\n else {\n offsetMinutes += parseInt(m[2], 10);\n }\n }\n\n return {\n date: date,\n offsetMinutes: offsetMinutes\n };\n}\n\nfunction configFromDate(dt, offsetMinutes) {\n return { date: dt, offsetMinutes: offsetMinutes || 0 };\n}\n\nfunction configFromOffsetDate(src) {\n return configFromDate(new Date(src.getDate()), src.getOffsetMinutes());\n}\n\n/**\n * maintains a javascript Date object plus the offset that was used to create that date. Note the\n * javascript date object will always be in terms of the browser's time zone. The offset stored is\n * used to convert back to the device time zone.\n */\nexport class OffsetDate {\n static fromDate = function(dt, offsetMinutes) {\n return new OffsetDate(dt, offsetMinutes);\n };\n static fromOffsetDate = function(src) {\n return new OffsetDate(src);\n };\n static fromString = function(str) {\n return new OffsetDate(str);\n };\n\n constructor(config, offsetMinutes) {\n if (typeof config === 'string') {\n config = configFromString(config);\n }\n else if (config instanceof Date) {\n config = configFromDate(config, offsetMinutes);\n }\n else if (config instanceof OffsetDate) {\n config = configFromOffsetDate(config);\n }\n\n this._date = config.date;\n this._offsetMinutes = config.offsetMinutes;\n }\n\n /**\n * get the date, this date will be in the browser's time zone\n */\n getDate() {\n return this._date;\n }\n\n /**\n * get the number of minutes date was offset with when created\n */\n getOffsetMinutes() {\n return this._offsetMinutes;\n }\n\n /**\n * creates a java script date object adjusting the time to match the set offset minutes\n *\n * @returns {Date}\n */\n getOffsetDate() {\n return this.convertDateToOffset(this._date);\n }\n\n /**\n * creates a javascript date from a javascript date offset to this object's offset\n */\n convertDateToOffset(dt) {\n return addMinutes(dt, this.getOffsetMinutes() + dt.getTimezoneOffset());\n }\n\n /**\n * returns a string of form [+-]HHMM representing the hours and minutes offset\n */\n getOffsetString(forceMinutes) {\n var rv = '';\n if (this._offsetMinutes !== (this._date.getTimezoneOffset() * -1)) {\n var hours = Math.floor(Math.abs(this._offsetMinutes) / 60);\n if (this._offsetMinutes >= 0) {\n rv += '+';\n }\n else {\n rv += '-';\n }\n\n if (Math.abs(hours) < 10) {\n rv += '0';\n }\n\n rv += hours;\n\n var minutes = Math.abs(this._offsetMinutes) % 60;\n if (minutes > 0 || forceMinutes) {\n if (minutes < 10) {\n rv += '0';\n }\n rv += minutes;\n }\n }\n return rv;\n }\n /**\n * Convert the OffsetDate into a string in the format returned by the API,\n * which contains fractional seconds and a timezone offset.\n *\n * Exampe: 2022-09-16T09:07:45.757825-05:00\n *\n * @returns {String}\n */\n toRawString() {\n // Format the date string (in the timezone of the offset)\n const dateStr = moment(this.getOffsetDate()).format('YYYY-MM-DD[T]HH:mm:ss.SSSSSS');\n\n const offsetSign = this.getOffsetMinutes() > 0 ? '+' : '-';\n\n const offsetMinutesAbs = Math.abs(this.getOffsetMinutes());\n\n let offsetHoursStr = String(Math.floor(offsetMinutesAbs / 60));\n // Pad the hours with an extra 0, if needed.\n if (offsetHoursStr.length === 1) {\n offsetHoursStr = '0' + offsetHoursStr;\n }\n\n let offsetMinutesStr = String(offsetMinutesAbs % 60);\n // Pad the minutes with an extra 0, if needed.\n if (offsetMinutesStr.length === 1) {\n offsetMinutesStr = '0' + offsetMinutesStr;\n }\n\n return `${dateStr}${offsetSign}${offsetHoursStr}:${offsetMinutesStr}`;\n }\n}\n","import { fromISODateString } from 'Common/util/format';\nimport { exformat } from 'Common/util/language/string';\nimport {\n EPOCH_JULIAN_DAY,\n fromJulianDay, toJulianDay, addToJulianDay, getJulianDayOfWeek,\n clearTime,\n getWeekNumber as getWeekNumberFromDate\n} from 'Common/util/language/date';\nimport isArray from 'lodash/isArray';\nimport isDate from 'lodash/isDate';\nimport isString from 'lodash/isString';\nimport isNumber from 'lodash/isNumber';\n\nconst YEARS = 'years',\n QUARTERS = 'quarters',\n MONTHS = 'months',\n WEEKS = 'weeks',\n DAYS = 'days';\n\n/**\n * Get a production day number from a julian day.\n * @param {Number} julianDay\n * @return {Number}\n */\nfunction getNumberFromJulianDay(julianDay) {\n return julianDay - EPOCH_JULIAN_DAY;\n}\n\n/**\n * Get a production day number from a year, month, day tuple\n * @param {Number} year\n * @param {Number} month\n * @param {Number} day\n * @return {Number}\n */\nfunction getNumberFromYMD(year, month, day) {\n return getNumberFromJulianDay(toJulianDay(year, month, day));\n}\n\n/**\n * Get a production day number from an ISO string\n * @param {String} str\n * @return {Number}\n */\nfunction getNumberFromISOString(str) {\n var matcher = RegExp(/(\\d+)-(\\d+)-(\\d+)/);\n\n if (!matcher.test(str)) {\n throw new Error(`Expected YYYY-MM-DD, but got \"${str}\"`);\n }\n\n var m = matcher.exec(str),\n year = parseInt(m[1], 10),\n month = parseInt(m[2], 10),\n date = parseInt(m[3], 10);\n\n return getNumberFromYMD(year, month, date);\n}\n\n/**\n * @class ProductionDay\n *\n * Represents a day of production that is linked with (but not necessarily entirely coincident with)\n * a particular calendar day.\n */\nexport class ProductionDay {\n /**\n * Create a production day from one of a number of sets of arguments:\n *\n * * 1-argument form can be:\n * * {ProductionDay} - copy constructor\n * * {Number[]} - treats the items of the array as year, month, and day\n * * {Date} - selects the production day associated with this JS Date\n * * {String} - an ISO 8601 date string\n * * {Number} - the number of the production day\n *\n * * 2-argument form:\n * * {Number}, {String} - if the second argument is \"julian\", the first argument is treated\n * as a julian day, otherwise it is treated as a production day number (as the 1-argument)\n *\n * * 3-argument form:\n * * {Number}, {Number}, {Number} - treats the arguments as year, month, and day\n */\n constructor(arg1, arg2, arg3) {\n /* eslint-disable no-use-before-define */\n if (arg1 instanceof CalendarDay) {\n this._number = getNumberFromISOString(arg1.toDate().toISOString());\n }\n /* eslint-enable no-use-before-define */\n else if (arg1 instanceof ProductionDay) {\n this._number = arg1.getProductionDayNumber();\n }\n else if (isArray(arg1)) {\n this._number = getNumberFromYMD(arg1[0], arg1[1], arg1[2]);\n }\n else if (arguments.length === 3) {\n this._number = getNumberFromYMD(arg1, arg2, arg3);\n }\n else if (isDate(arg1)) {\n this._number = getNumberFromISOString(arg1.toISOString());\n }\n else if (isString(arg1)) {\n this._number = getNumberFromISOString(arg1);\n }\n else if (isNumber(arg1)) {\n if (arg2 === 'julian') {\n this._number = getNumberFromJulianDay(arg1);\n }\n else {\n this._number = arg1;\n }\n }\n else {\n throw new Error(`Unsupported constructor argument \"${String(arg1)}\"`);\n }\n }\n /**\n * Convert to a year, month, day tuple\n * @return {Number[]}\n */\n toYearMonthDay() {\n return fromJulianDay(this.toJulianDay());\n }\n /**\n * Convert to an ISO 8601 date string.\n * @return {String}\n */\n toString() {\n var ymd = this.toYearMonthDay();\n\n return exformat('{Y}-{Mz}{M}-{Dz}{D}', {\n Y: ymd[0],\n Mz: ymd[1] < 10 ? '0' : '',\n M: ymd[1],\n Dz: ymd[2] < 10 ? '0' : '',\n D: ymd[2]\n });\n }\n /**\n * Convert to a JS Date\n * @return {Date}\n */\n toDate() {\n return fromISODateString(this.toString());\n }\n /**\n * Convert to a julian day\n * @return {Number}\n */\n toJulianDay() {\n return this._number + EPOCH_JULIAN_DAY;\n }\n /**\n * Get the year associated with this day.\n * @return {Number}\n */\n getYear() {\n return this.toYearMonthDay()[0];\n }\n /**\n * Get the quarter (1-4) associated with this day.\n * @return {Number}\n */\n getQuarter() {\n return Math.floor((this.getMonth() - 1) / 3) + 1;\n }\n /**\n * Get the month (1-12) associated with this day.\n * @return {Number}\n */\n getMonth() {\n return this.toYearMonthDay()[1];\n }\n /**\n * Get the day of month (1-31) associated with this day\n * @return {Number}\n */\n getDate() {\n return this.toYearMonthDay()[2];\n }\n /**\n * Get the production day number associated with this day\n * @return {Number}\n */\n getProductionDayNumber() {\n return this._number;\n }\n /**\n * Get the day of week associated wtih this day.\n *\n * @param {Number} [productionWeekStartsOn=1] JS day of week for when the production week\n * starts.\n * @return {Number} JS day of week\n */\n getDayOfWeek(productionWeekStartsOn) {\n productionWeekStartsOn = isNumber(productionWeekStartsOn) ? productionWeekStartsOn : 1;\n\n var dow = getJulianDayOfWeek(this.toJulianDay());\n\n if (productionWeekStartsOn > 0) {\n dow = (dow - productionWeekStartsOn + 7) % 7;\n }\n\n return dow;\n }\n /**\n * gets the week number associated with this day\n * @param Number startDOW the day of week to use as week start 0=Sunday\n */\n getWeekNumber() {\n var dt = new Date(),\n ymd = this.toYearMonthDay();\n\n clearTime(dt);\n dt.setHours(12);\n // setMonth() does something weird if the date is the 31st and you try to change to a month\n // without 31 days, so set the date to something innocuous before we try that.\n dt.setDate(2);\n\n dt.setFullYear(ymd[0]);\n dt.setMonth(ymd[1] - 1);\n dt.setDate(ymd[2]);\n\n return getWeekNumberFromDate(dt);\n }\n /**\n * @private\n * Set the year, month, and day of this production day.\n * Zero or a negative number means \"leave it alone\"\n *\n * @param {Number} year\n * @param {Number} month\n * @param {Number} day\n */\n _setYearMonthDay(year, month, day) {\n var ymd = this.toYearMonthDay();\n if (year > 0) { ymd[0] = year; }\n if (month > 0) { ymd[1] = month; }\n if (day > 0) { ymd[2] = day; }\n\n this._number = getNumberFromYMD(ymd[0], ymd[1], ymd[2]);\n }\n /**\n * Set the day of month (1-31) associated with this day.\n * @param {Number} newDay\n * @return {ProductionDay} this; allows chaining\n */\n setDate(newDay) {\n this._setYearMonthDay(-1, -1, newDay);\n return this;\n }\n /**\n * Set the month (1-12) associated with this day.\n * @param {Number} newMonth\n * @return {ProductionDay} this; allows chaining\n */\n setMonth(newMonth) {\n this._setYearMonthDay(-1, newMonth, -1);\n return this;\n }\n /**\n * Adds a value to the production day. This returns a new production day, and does not\n * mutate `this`.\n *\n * @param {String} portion the name of the portion (e.g., 'years', 'weeks', 'days')\n * @param {Number} value how many of portion to add\n * @return {ProductionDay} A new production day with the appropriate amount added\n */\n add(portion, value) {\n var jd = this.toJulianDay(),\n newJd = addToJulianDay(jd, portion, value);\n\n return new ProductionDay(newJd, 'julian');\n }\n /**\n * Subtracts a value from this production day. See `add` for details.\n */\n subtract(portion, value) {\n return this.add(portion, -value);\n }\n addDays(value) {\n return this.add('days', value);\n }\n subtractDays(value) {\n return this.add('days', -value);\n }\n addWeeks(value) {\n return this.add('weeks', value);\n }\n subtractWeeks(value) {\n return this.add('weeks', -value);\n }\n /**\n * Get the distance (in days) between `this` and `that`\n * @param {Variant} that 1-argument constructible to a production day\n * @return {Number} > 0 if `this` is before `that`\n */\n getDistanceTo(that) {\n that = new ProductionDay(that);\n return that.getProductionDayNumber() - this.getProductionDayNumber();\n }\n /**\n * Compare two production days\n * @param {Variant} that 1-argument constructible to a production day\n * @return {Number} negative number: this < that; 0: this === that; positive number: this > that\n */\n compare(that) {\n // The sign here is reversed from `getDistanceTo`. That's the only difference.\n //\n return -this.getDistanceTo(that);\n }\n /**\n * Are these two things equal?\n *\n * @param {Variant} that Anything constructible (with one argument) to a ProductionDay\n * @return {Boolean}\n */\n equals(that) {\n return this.compare(that) === 0;\n }\n /**\n * Are these two things unequal?\n *\n * @param {Variant} that Anything constructible (with one argument) to a ProductionDay\n * @return {Boolean}\n */\n notEquals(that) {\n return this.compare(that) !== 0;\n }\n /**\n * Does this occur after that?\n *\n * @param {Variant} that Anything constructible (with one argument) to a ProductionDay\n * @return {Boolean}\n */\n isAfter(that) {\n return this.compare(that) > 0;\n }\n\n /**\n * Does this occur on or after that?\n */\n isOnOrAfter(that) {\n return this.compare(that) >= 0;\n }\n\n /**\n * Does this occur before that?\n *\n * @param {Variant} that Anything constructible (with one argument) to a ProductionDay\n * @return {Boolean}\n */\n isBefore(that) {\n return this.compare(that) < 0;\n }\n\n /**\n * Does this occur on or before that?\n *\n * @param {Variant} that Anything constructible (with one argument) to a ProductionDay\n * @return {Boolean}\n */\n isOnOrBefore(that) {\n return this.compare(that) <= 0;\n }\n}\n\n/**\n * @class CalendarDay\n *\n * In addition to ProductionDay (which needn't necessarily transition at midnight) we also\n * support the concept of CalendarDay (which does). It can also be represented as a number,\n * and supports the same methods, but exists just for reasons of type safety.\n */\nexport class CalendarDay extends ProductionDay {\n getProductionDayNumber() {\n // We're trying to avoid confusion, so don't allow getProductionDayNumber.\n throw new Error('CalendarDay does not support getProductionDayNumber.');\n }\n\n /**\n * Get the calendar day number associated with this day\n * @return {Number}\n */\n getCalendarDayNumber() {\n return this._number;\n }\n}\n\n/**\n * Given a production day, return an array indicating the production days of the\n * various time-ish boundaries\n *\n * @param {ProductionDay|Number} pd\n * @param {String} category\n *\n * @return {Object}\n * @return {Array}[0] start epoch day of category bound\n * @return {Array}[1] end epoch day of category bound\n *\n */\n export function getCategoryBounds(pd, category) {\n let rv, end, portion;\n\n let start = new ProductionDay(pd);\n\n if (category === 'day' || category === 'hour' || category === 'shift_hour') {\n // Don't do anything -- since no portion is set, start will === end.\n }\n else if (category === 'week') {\n start = start.add(DAYS, -start.getDayOfWeek());\n portion = WEEKS;\n }\n else if (category === 'month') {\n start.setDate(1);\n portion = MONTHS;\n }\n else if (category === 'quarter') {\n start.setMonth(start.getQuarter() * 3 - 2);\n start.setDate(1);\n\n portion = QUARTERS;\n }\n else if (category === 'year') {\n start.setMonth(1);\n start.setDate(1);\n\n portion = YEARS;\n }\n\n // We subtract a day here so that if `start` is at the beginning of a period (e.g.\n // (e.g., 2015-1-1), `end` is at the end of that period (e.g., 2015-12-31) instead of\n // at the beginning of the next period (e.g., 2016-1-1).\n //\n end = portion\n ? start.add(portion, 1).add(DAYS, -1)\n : start;\n\n rv = [\n start.getProductionDayNumber(),\n end.getProductionDayNumber()\n ];\n\n return rv;\n}\n\n/**\n * takes a numeric production day number and converts it to a production week number each week starts on\n * Monday.\n *\n * @param {Number} production day number\n * @return {Number} a production week number\n */\nexport function productionDayToProductionWeek(pd) {\n return Math.trunc((pd + 3) / 7).toString();\n}\n\n/**\n * takes a numeric production week number and creates a ProductionDay object representing the first\n * day of that production week (hard coded as Monday for now).\n * each week starts on Monday\n *\n * @param {Number} a production week number\n * @return {Number} production day number representing the first day of the sent production week\n */\nexport function productionWeekToProductionDay(week) {\n return new ProductionDay(week * 7 - 3);\n}\n\n/**\n * takes a numeric production day and converts it to a production month of form Year,Month.\n *\n * @param {Number} production day number\n * @return {string} production month of the form \"YYYY,MM\"\n */\nexport function productionDayToProductionMonth(pd) {\n const pdObj = new ProductionDay(pd);\n let month = pdObj.getMonth();\n\n // pad with leading zeros so string sorting of numbers will work\n month = month.toString().padStart(2, '0');\n\n return `${pdObj.getYear()},${month}`;\n}\n\n/**\n * takes a numeric production day and converts it to a production Quarter of form Year,Quarter.\n *\n * @param {Number} production day number\n * @return {string} production Quarter of the form \"YYYY,Q\"\n */\nexport function productionDayToProductionQuarter(pd) {\n const pdObj = new ProductionDay(pd);\n return `${pdObj.getYear()},${pdObj.getQuarter()}`;\n}\n","import { trunc } from 'Common/util/language/math';\nimport { exformat } from 'Common/util/language/string';\nimport { dateToJSON, fromEpochSeconds } from 'Common/util/language/date';\nimport { cloneDeep, extend, keys, pick } from 'lodash';\nimport moment from 'moment';\nimport { OffsetDate } from 'Common/data/date/OffsetDate';\nimport { ProductionDay } from 'Common/data/date/ProductionDay';\n\n/**\n * Get the decimal separator for the current or specified locale.\n *\n * @param {String} [locale] Defaults to global locale setting\n */\nfunction getDecimalSeparator(locale) {\n const numberWithDecimalSeparator = 1.1;\n\n // NOTE: While Intl.NumberFormat.prototype.formatToParts would be a much\n // nicer way to do this IE11 does not support it. This workaround\n // still does the trick though as all locales use a one character\n // decimal separator.\n //\n return numberWithDecimalSeparator\n .toLocaleString(locale)\n .substring(1, 2);\n}\n\nfunction getFormatString(s) {\n if (s && /\\{:.*\\}/.test(s)) {\n s = s.slice(2, -1);\n }\n\n return s;\n}\n\nexport function preprocessOptions(opts) {\n opts = opts ? cloneDeep(opts) : {};\n opts.pattern = getFormatString(opts.pattern);\n opts.datePattern = getFormatString(opts.datePattern);\n opts.timePattern = getFormatString(opts.timePattern);\n\n // This en-DE locale is funny... Coerce all its formatting to German.\n if (opts.locale === 'en-DE') {\n opts.locale = 'de-DE';\n }\n\n return opts;\n}\n\n/**\n * IE11's Intl likes to add lots of extraneous left-to-right markers,\n * which interferes with a lot of things like string comparison.\n */\nexport function stripDirectionalityMarkers(string) {\n return string.replace(/\\u200e/g, '');\n}\n\n/**\n * Similarly, IE11 loves adding spaces to percent values.\n * When we expect \"14.56%\", IE11 will give us \"14.56 %\".\n */\nfunction stripSpaceFromPercent(percentString) {\n return percentString.replace(/\\s%/, '%');\n}\n\nfunction parseNumberPattern(pattern) {\n var pieces = pattern.split('.'),\n wholeText = pieces[0],\n fractText = pieces[1],\n hasComma = wholeText.indexOf(',') !== -1,\n whole = {\n required: 0,\n extra: wholeText.replace(/,/g, '').match('#*(0*)(%)?(.*)?')\n },\n fract = {\n required: 0,\n optional: 0\n },\n hasPercent = false,\n extraText = '',\n opts = {};\n\n if (whole.extra) {\n opts.minDigits = whole.extra[1].length;\n hasPercent = whole.extra[2];\n extraText = whole.extra[3];\n }\n\n if (fractText) {\n fract.extra = fractText.match(/(0*)(#*)(%)?(.*)$/);\n fract.required = fract.extra[1].length;\n fract.optional = fract.extra[2].length;\n hasPercent = fract.extra[3];\n extraText = fract.extra[4];\n hasComma = wholeText.indexOf(',') !== -1;\n }\n\n opts.useGrouping = !!hasComma;\n\n if (hasPercent) {\n opts.style = 'percent';\n }\n if (extraText) {\n opts.format = '{value}' + extraText;\n }\n\n opts.minimumFractionDigits = fract.required;\n opts.maximumFractionDigits = fract.required + fract.optional;\n\n return opts;\n}\n\nfunction preprocessNumberOptions(opts) {\n opts = preprocessOptions(opts);\n\n opts.style = opts.type;\n\n if (opts.places || opts.places === 0) {\n opts.minimumFractionDigits = opts.places;\n opts.maximumFractionDigits = opts.places;\n }\n\n if (opts.pattern) {\n opts = extend(opts, parseNumberPattern(opts.pattern));\n }\n\n return opts;\n}\n\n/**\n * Format a JavaScript number.\n *\n * @param {Number} n the number to format\n * @param {Object} [opts] (optional) various controls over the formatting output.\n *\n * @param {Boolean} [opts.round = false] If true round to the nearest whole number\n * @param {Number} [opts.minimumFractionDigits] Min number of decimal places to show.\n * @param {Number} [opts.maximumFractionDigits] Max number of decimal places to show.\n * @param {Number} [opts.places] Fixed number of decimal places to show, replaces both\n * minimumFractionDigits and maximumFractionDigits opts.\n * @param {Number} [opts.minDigits] Min digits to show for the left side of the decimal, pad with 0's\n * if needed.\n * @param {String} [opts.type = 'decimal'] choose a format type based on the locale from the following:\n * decimal, percent, currency.\n * @param {String} [opts.locale] The locale to use, defaults to global locale setting.\n * @param {String} [opts.currency] (required if type is currency, ignored otherwise)\n * an ISO4217 currency code, a three letter sequence like \"USD\"\n * \n * @param {String} [opts.pattern] (Deprecated) Legacy regex-like pattern for number formatting, not\n * recommended for use.\n *\n */\nexport function formatNumber(n, opts) {\n let fmt;\n let truncPlaces;\n let value;\n\n opts = preprocessNumberOptions(opts);\n\n if (opts.round === false) {\n // If we're formatting a percent, we up the truncation places by 2, since the number\n // formatter will (I guess depending on locale... sigh) multiply by 100.\n //\n truncPlaces = (opts.maximumFractionDigits || 0) + (opts.style === 'percent' ? 2 : 0);\n n = trunc(n, truncPlaces);\n }\n\n try {\n fmt = new Intl.NumberFormat(opts.locale, opts);\n }\n catch (e) {\n fmt = new Intl.NumberFormat('en', opts);\n }\n\n value = fmt.format(n);\n value = stripDirectionalityMarkers(value);\n\n if (opts.style === 'percent') {\n value = stripSpaceFromPercent(value);\n }\n\n if (opts.minDigits) {\n const isNegative = value.startsWith('-');\n\n if (isNegative) {\n // Remove the negative sign for now and add it back at the end\n // once the padding has been added.\n //\n value = value.replace(/^-/, '');\n }\n\n const whole = value.split(getDecimalSeparator(opts.locale))[0];\n\n let padding = opts.minDigits - whole.length;\n\n while (padding > 0) {\n value = '0' + value;\n --padding;\n }\n\n value = isNegative ? `-${value}` : value;\n }\n\n if (opts.format) {\n value = exformat(opts.format, { value: value });\n }\n if (opts.template) {\n value = exformat(opts.template, { value: value });\n }\n\n return value;\n}\n\nconst formatItems = {\n selectors: {\n time: ['hour', 'minute', 'second', 'timeZoneName'],\n date: ['weekday', 'era', 'year', 'month', 'day']\n },\n dateFormatItems: {\n MMMd: {\n month: 'short',\n day: 'numeric'\n },\n 'MMM yyyy': {\n month: 'short',\n year: 'numeric'\n },\n 'MMMd yyyy': {\n month: 'short',\n day: 'numeric',\n year: 'numeric'\n },\n },\n timeFormatItems: {\n ha: {\n hour: 'numeric',\n minute: 'numeric'\n },\n hms: {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric'\n }\n },\n canned: {\n short: {\n year: '2-digit',\n month: 'numeric',\n day: 'numeric',\n hour: 'numeric',\n minute: 'numeric'\n },\n medium: {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric'\n },\n full: {\n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric'\n }\n }\n};\n\nfunction preprocessDateOptions(opts) {\n var rv = {},\n selectorItems = formatItems.selectors[opts.selector],\n timeKey = opts.timeFormatItem || opts.timePattern,\n dateKey = opts.dateFormatItem || opts.datePattern,\n timeFormatItem = formatItems.timeFormatItems[timeKey] || {},\n dateFormatItem = formatItems.dateFormatItems[dateKey] || {};\n\n if (opts.formatLength) {\n rv = extend({}, formatItems.canned[opts.formatLength]);\n }\n\n rv = extend(rv, timeFormatItem);\n rv = extend(rv, dateFormatItem);\n\n // Default to \"short\"\n //\n if (keys(rv).length === 0) {\n rv = extend({}, formatItems.canned.short);\n }\n\n rv = extend(rv, opts);\n\n // If a selector was specified, only use items belonging to that selector.\n //\n if (selectorItems) {\n rv = pick(rv, selectorItems);\n }\n\n return rv;\n}\n\n///---------------------------------------------------------------------------------------------\n///\n/// Format a JavaScript Date object.\n///\n/// PARAMETERS:\n/// [Date] date: the date/time to format\n/// [Object] opts: (optional) various controls over the formatting output. 'fooPattern' options\n/// will be used if present, then 'fooFormatItem' options, then 'formatLength'\n///\n/// [String] datePattern: (optional) override the pattern for the time format with this string\n/// [String] timePattern: (optional) override the pattern for the date format with this string\n/// [String] dateFormatItem: (optional) A CLDR dateFormatItem string (See notes for a list)\n/// [String] timeFormatItem: (optional) override the pattern for the date format with this string\n/// [String] formatLength: (optional: 'short') choice of long, short, medium or full.\n/// [String] selector: (optional: both used) choice of 'time','date'\n///\n/// --------------------------------------------------------------------------------------------\n\nconst defaultLocal = 'en';\n\nexport function formatDate(d, opts) {\n opts = preprocessOptions(opts);\n\n var formatOpts = preprocessDateOptions(opts),\n fmt,\n rv;\n\n if (opts.locale) {\n try {\n fmt = new Intl.DateTimeFormat(opts.locale, formatOpts);\n }\n catch (e) {\n fmt = new Intl.DateTimeFormat(defaultLocal, formatOpts);\n }\n }\n else {\n fmt = new Intl.DateTimeFormat(defaultLocal, formatOpts);\n }\n\n if (typeof d === 'string') {\n // Use moment.js instead of Date.parse here. It'll try some ISO 8601\n // matching first, and if that fails, it'll fall back to Date.parse.\n d = moment(d).toDate();\n }\n else if (typeof d === 'number') {\n d = fromEpochSeconds(d);\n }\n else if (moment.isMoment(d)) {\n d = d.toDate();\n }\n else if (d instanceof OffsetDate) {\n d = d.getOffsetDate();\n }\n else if (d instanceof ProductionDay) {\n d = d.toDate();\n }\n else if (!(d instanceof Date)) {\n throw new TypeError(d + ' is not convertible to Date');\n }\n\n if (opts.iso) {\n rv = dateToJSON(d, extend({}, opts, { relative: true }));\n }\n else {\n if (fmt.formatToParts) {\n const formattedParts = fmt.formatToParts(d);\n\n rv = formattedParts.map(({type, value}) => {\n if (type === 'dayPeriod') {\n // We want to lowercase the AM or PM bit by default\n value = value.toLocaleLowerCase();\n }\n\n return value;\n }).join('');\n }\n else {\n rv = fmt.format(d);\n rv = stripDirectionalityMarkers(rv);\n }\n }\n\n if (('commaSeparator' in opts) && !opts.commaSeparator) {\n rv = rv.replace(/,/, '');\n }\n\n return rv;\n}\n\n/**\n * Convert a string in the format 'YYYY-MM-DD' to a Date object.\n *\n * @param {String} dateString\n * @return {Date}\n */\nexport function fromISODateString(str) {\n // Use moment to ensure JavaScript doesn't try and apply the\n // locale timezone to the date after parsing.\n //\n return moment(str).toDate();\n}\n","import { formatNumber } from 'Common/util/format';\nimport { getFractionalPiece } from 'Common/util/language/math';\nimport { isFunction, isObject } from 'lodash';\n\nfunction sortDurationFormatterItems(l, r) {\n const rv = l.getOrder() - r.getOrder();\n return isNaN(rv) ? Infinity : rv;\n}\n\nclass DurationFormatterItem {\n constructor(config) {\n this.text = config.text;\n this.code = this.text.charAt(0).toLowerCase();\n this.locale = config.locale;\n }\n\n getOrder() {\n return Infinity;\n }\n\n format(units) {\n switch (this.code) {\n case '\"': case \"'\":\n return this.text.slice(1, -1);\n case '.':\n // Figure out what our decimal separator is, and return it.\n return formatNumber(0, { places: 1, locale: this.locale })[1];\n default:\n return this.text;\n }\n }\n}\n\nclass DurationFormatterUnitItem extends DurationFormatterItem {\n static orderMap = { d: 1, h: 2, m: 3, s: 4 };\n\n static handle = (code, text) => {\n const code2 = text.charAt(1).toLowerCase();\n return this.orderMap[code] || (code === ',' && this.orderMap[code2]);\n };\n\n constructor(config) {\n super(config);\n\n if (this.code === ',') {\n this.code = this.text.charAt(1).toLowerCase();\n }\n\n this.hasComma = /,/.test(this.text);\n this.text = this.text.toLowerCase();\n this.text = this.text.replace(/,/, '');\n this.fmt = '#' + this.text.replace(new RegExp(this.code, 'g'), '0');\n }\n\n getOrder() {\n return DurationFormatterUnitItem.orderMap[this.code];\n }\n\n format(units) {\n const value = units.getValue(this.code);\n const rv = this.hasComma\n ? formatNumber(value, { places: 0, locale: this.locale })\n : formatNumber(value, { pattern: this.fmt, locale: this.locale });\n\n return rv;\n }\n}\n\nexport class DurationFormatterUnits {\n constructor(config) {\n const formatItems = config.items.filter(function(item) {\n return (item instanceof DurationFormatterUnitItem);\n }).sort(sortDurationFormatterItems);\n\n this.d = { scalar: 60 * 60 * 24 };\n this.h = { scalar: 60 * 60 };\n this.m = { scalar: 60 };\n this.s = { scalar: 1 };\n\n const largeUnit = this[formatItems[0].code];\n const smallUnit = this[formatItems[formatItems.length - 1].code];\n\n this._setDuration(config.duration, largeUnit, smallUnit);\n }\n\n _order = [ 'd', 'h', 'm', 's' ];\n\n _setDuration(duration, largeUnit, smallUnit) {\n this._duration = (isObject(duration) && isFunction(duration.getRawValue))\n ? duration.getRawValue()\n : duration;\n\n let fractional = getFractionalPiece(this._duration);\n let soak = 0;\n this._order.forEach(function(unit) {\n unit = this[unit];\n let value = Math.trunc(this._duration / unit.scalar);\n this._duration = this._duration % unit.scalar;\n\n if (unit.scalar > largeUnit.scalar) {\n soak += value * unit.scalar;\n value = 0;\n }\n else if (unit.scalar === largeUnit.scalar) {\n value += Math.trunc(soak / unit.scalar);\n }\n\n if (unit.scalar < smallUnit.scalar) {\n fractional += value * unit.scalar;\n value = 0;\n }\n\n unit.value = value;\n\n this._fractional = fractional / smallUnit.scalar;\n }, this);\n }\n\n getFractionalValue(unit) {\n return this._fractional;\n }\n\n getValue(unit) {\n unit = unit.charAt(0).toLowerCase();\n unit = this[unit];\n return unit.value;\n }\n\n isUnit(str) {\n return !!this[str.charAt(0).toLowerCase()];\n }\n}\n\nclass FractionalItemFormatter extends DurationFormatterItem {\n static handle = (code, text) => {\n return code === '.';\n };\n\n format(units) {\n const value = units.getFractionalValue();\n const pattern = '0' + this.text;\n const rv = formatNumber(value, { pattern: pattern, round: false, locale: this.locale });\n\n return rv.slice(1);\n }\n}\n\nexport function createItem(text, index, items, locale) {\n const code = text.charAt(0).toLowerCase();\n let rv = null;\n\n let formatters = [\n DurationFormatterUnitItem,\n FractionalItemFormatter\n ];\n\n formatters.some((item) => {\n if (item !== this && item.handle && item.handle(code, text)) {\n rv = new item({\n text: items[index],\n locale,\n });\n return true;\n }\n });\n\n return rv || new DurationFormatterItem({\n text: items[index],\n locale,\n });\n}\n","import { preprocessOptions } from 'Common/util/format.js';\nimport { exformat } from 'Common/util/language/string.js';\n\nimport { createItem, DurationFormatterUnits } from './DurationFormatter';\n\nconst SPECIAL_FORMATS = {\n 'vorne-s': 's{s}',\n 'vorne-ms': 'm{m} s{s}',\n 'vorne-hm': 'h{h} m{m}',\n 'vorne-hms': 'h{h} m{m} s{s}',\n 'vorne-hms.sss': 'h{h} m{m} s.000{s}'\n};\n\nfunction getSpecialFormat(formatName, translator) {\n let specialFormat = SPECIAL_FORMATS[formatName];\n\n if (specialFormat) {\n specialFormat = exformat(specialFormat, {\n h: '\"' + translator('hours_abbreviation') + '\"',\n m: '\"' + translator('minutes_abbreviation') + '\"',\n s: '\"' + translator('seconds_abbreviation') + '\"'\n });\n }\n\n return specialFormat;\n}\n\nexport default function formatDuration(duration, opts) {\n opts = preprocessOptions(opts);\n let pattern = opts.pattern ||\n getSpecialFormat(opts.formatItem, opts.translator) ||\n 'h:mm:ss',\n re = /(,?([Dd]+|[Hh]+|[Mm]+|[Ss]+)|\\s+|[:]|\".*?\"|'.*?'|\\.0*[0#]#*)/g,\n negative = duration < 0,\n items = pattern.match(re).map((...mapArgs) => createItem(...mapArgs, opts.locale)),\n units, rv;\n\n duration = negative ? -duration : duration;\n\n units = new DurationFormatterUnits({\n duration: duration,\n items: items\n });\n\n rv = items.map(function(item) {\n return item.format(units);\n });\n\n return (negative ? '-' : '') + rv.join('');\n}\n\n/**\n * Provides a convenient default formatter for the '_h __m __s' (e.g. 1h 22m 15s) that\n * we often use. This formatter also truncates the least significant 0 values. So what\n * would be \"1h 23m 00s\" would instead be \"1h 23m\".\n *\n * @param {Number} duration The duration to format in seconds\n * @param {Object} opts\n * @param {Function} opts.translator A text translator function such as cpe.t to\n * translate the h, m, and s abbreviations.\n * @param {Number} [opts.maxSignificantValues = 3] The max number of significant values\n * to include. For example if set to 2 \"1h 22m 15s\" would instead be \"1h 22m\".\n * @param {String} [opts.locale] The locale string for the duration formatter\n */\nexport function formatHMSDuration(duration, { translator, maxSignificantValues = 3, locale }) {\n const hmsDuration = formatDuration(duration, { pattern: \"[d]:[h]:[m]:[s]\", locale, translator }).split(':');\n const patternTranslations = ['days_abbreviation', 'hours_abbreviation', 'minutes_abbreviation', 'seconds_abbreviation'];\n\n const hmsDurationFormatted = hmsDuration.reduce((agg, val, index) => {\n if (val !== '0' && agg.length < maxSignificantValues) {\n agg.push(`${val}${translator(patternTranslations[index])} `);\n }\n\n return agg;\n }, []).join('').trim();\n\n return hmsDurationFormatted;\n}\n","import { formatDate, formatNumber } from 'Common/util/format';\nimport formatDuration from 'Common/util/formatDuration';\nimport { getPlacesForNumericRange } from 'Common/util/language/math';\n\nfunction _commonRate(range, locale, translator, template) {\n return function(data, opts) {\n opts = {\n type: 'decimal',\n places: 1,\n template: translator(template),\n locale,\n ...opts,\n };\n\n return formatNumber(data, opts);\n };\n}\n\nconst DEFAULT_FORMATTERS = {\n boolean: function(range, locale, translator) {\n return function(data, opts) {\n return data ? translator('yes_literal') : translator('no_literal');\n };\n },\n date_time: function(range, locale, translator) {\n return function(data, opts) {\n opts = {\n formatLength: 'short',\n timeFormatItem: 'hms',\n locale,\n ...opts,\n };\n\n return !data ? '' : formatDate(data, opts);\n };\n },\n time_span: function(range, locale, translator) {\n return function(data, opts) {\n opts = { locale, translator, ...opts };\n // Avoid truncating '.9999999' down to zero by first rounding it up.\n data = Number.parseFloat(data).toFixed(4);\n\n return formatDuration(data, opts);\n };\n },\n cycle: function(range, locale, translator) {\n return function(data, opts) {\n // We round to the nearest hundredth for display\n const roundedData = Number(Number(data).toFixed(2));\n\n // We do not care to show decimals for larger cycle counts as it is\n // often unnecessary precision which makes it harder to read.\n //\n const noDecimal = Number.isInteger(roundedData) || roundedData >= 1000;\n\n opts = {\n locale,\n type: 'decimal',\n places: noDecimal ? 0 : 1,\n ...opts,\n };\n\n return formatNumber(roundedData, opts);\n };\n },\n cycle_time: function(range, locale, translator) {\n return function(data, opts) {\n // this function is sometimes called with no opts parameter, so initialize the defaults\n // call with an empty object\n opts = {\n locale,\n translator,\n pattern: 'h:mm:ss.00',\n ...opts,\n };\n\n // As with time_span, avoid truncating '0.49999999' down to '0.49' by first rounding up.\n data = Number.parseFloat(data).toFixed(4);\n\n return formatDuration(data, opts);\n };\n },\n count: function(range, locale, translator) {\n return function(data, opts) {\n opts = {\n locale,\n type: 'decimal',\n places: 0,\n round: false,\n ...opts,\n };\n\n return formatNumber(data, opts);\n };\n },\n double: function(range, locale, translator) {\n return function(data, opts) {\n opts = {\n locale,\n type: 'decimal',\n places: 1,\n round: false,\n ...opts,\n };\n\n return formatNumber(data, opts);\n };\n },\n percent: function(range, locale, translator) {\n return function(data, opts) {\n opts = {\n type: 'percent',\n // percentages are limited to at most 1 decimal place (possibly zero)\n places: Math.min(1, getPlacesForNumericRange(range, 1)),\n locale,\n ...opts,\n };\n\n return formatNumber(data, opts);\n };\n },\n rate: function(range, locale, translator) {\n return _commonRate(range, locale, translator, 'rpm_format_template');\n },\n rate_per_hour: function(range, locale, translator) {\n return _commonRate(range, locale, translator, 'rph_format_template');\n },\n string: function(range, locale, translator) {\n // replace \\n with new lines\n return function(data, opts) {\n return data.replace(/\\n/g, '
');\n };\n },\n id_array: function(range, locale, translator) {\n return function(data, opts) {\n // Treat nulls like an empty array\n data = data || [];\n data = Array.isArray(data) ? data : [data];\n\n opts = {\n locale,\n type: 'decimal',\n places: 0,\n round: false,\n ...opts,\n };\n\n return formatNumber(String(data.length), opts);\n };\n },\n invalid: function(range, locale, translator) {\n return function(data, opts) {\n if (opts?.react) {\n return translator('unknown_field_format_not_escaped');\n }\n else {\n return translator('unknown_field_format_escaped');\n }\n };\n },\n uint64: function(range, locale, translator) {\n return function (data, opts) {\n opts = {\n locale,\n type: 'decimal',\n places: 0,\n round: false,\n ...opts,\n };\n\n return formatNumber(data, opts);\n };\n }\n};\n\nexport function getDefaultFormatter({\n type,\n locale,\n translator,\n range,\n}) {\n return DEFAULT_FORMATTERS[type]\n ? DEFAULT_FORMATTERS[type](range, locale, translator)\n : null;\n}\n","import ParamTypes, { paramTest, paramTypeToPropType } from 'Common/util/ParamTypes/ParamTypes';\nimport { getDefaultFormatter } from 'Common/data/defaultFormatters';\n\nexport const FILTER_COMBINE_TYPE_AND = 'and';\nexport const FILTER_COMBINE_TYPE_OR = 'or';\nexport const FILTER_TYPE_GROUP = 'group';\nexport const FILTER_TYPE_SLICE = 'slice';\nconst GROUP_FILTER_COMPARE_TYPES = {\n gt: (rawValue, filterValue) => { return rawValue > filterValue; },\n ge: (rawValue, filterValue) => { return rawValue >= filterValue; },\n lt: (rawValue, filterValue) => { return rawValue < filterValue; },\n le: (rawValue, filterValue) => { return rawValue <= filterValue; },\n ne: (rawValue, filterValue) => { return rawValue !== filterValue; },\n eq: (rawValue, filterValue) => { return rawValue === filterValue; },\n};\n\nconst SLICE_FILTER_COMPARE_TYPES = {\n eq: (rawValue, filterValue, plainCategory) => { \n let validFilter = false;\n filterValue.forEach((dimensionValue) => {\n if (dimensionValue === rawValue || plainCategory[dimensionValue] === rawValue) {\n validFilter = true; \n }\n });\n return validFilter;\n },\n ne: (rawValue, filterValue, plainCategory) => { \n let validFilter = false;\n filterValue.forEach((dimensionValue) => {\n if (dimensionValue !== rawValue && plainCategory[dimensionValue] !== rawValue) {\n validFilter = true; \n }\n });\n return validFilter;\n },\n};\n\n\n\nfunction getColumnsFromSliceFilters(sliceFilters) {\n const columns = [];\n\n const expressions = sliceFilters.expressions;\n\n expressions.forEach(({ lhs }) => {\n columns.push(lhs.name);\n });\n\n return columns;\n}\n\nfunction getColumnsFromGroupFilters(groupFilters) {\n const columns = [];\n\n const expressions = groupFilters.expressions;\n\n expressions.forEach(({ lhs }) => {\n columns.push(lhs.name);\n });\n\n return columns;\n}\n\nfunction getCategoryValuesFromSliceFilters(sliceFilters) {\n const categoryValues = [];\n\n const expressions = sliceFilters.expressions;\n\n expressions.forEach(({ lhs, rhs }) => {\n const rhsArray = rhs\n ? (Array.isArray(rhs) ? rhs : [ rhs ])\n : [];\n\n rhsArray.forEach((categoryValueName) => {\n categoryValues.push({\n category: lhs.name,\n categoryValue: categoryValueName,\n });\n });\n });\n\n return categoryValues;\n}\n\nfunction convertSliceFilterExpressionToDisplayValues({\n expression,\n columnConfigs,\n categoryValueConfigs,\n}) {\n const { lhs, rhs } = expression;\n\n const lhsItemColumnConfig = columnConfigs[lhs.name];\n const lhsString = lhsItemColumnConfig.displayName;\n\n const rhsArray = rhs\n ? (Array.isArray(rhs) ? rhs : [ rhs ])\n : [];\n\n const rhsStringArray = rhsArray.map((categoryValueName) => {\n return categoryValueConfigs[lhs.name][categoryValueName].displayName;\n });\n\n return {\n ...expression,\n lhs: lhsString,\n rhs: rhsStringArray,\n };\n}\n\nfunction convertGroupFilterExpressionToDisplayValues({\n expression,\n locale,\n translator,\n columnConfigs,\n}) {\n const { lhs, rhs } = expression;\n\n const lhsItemColumnConfig = columnConfigs[lhs.name];\n const lhsString = lhsItemColumnConfig.displayName;\n\n let rhsFormatter = getDefaultFormatter({\n type: lhsItemColumnConfig.formatType,\n locale,\n translator,\n });\n\n if (!rhsFormatter) {\n console.error('missing formatter for formatType', lhsItemColumnConfig.formatType);\n rhsFormatter = (name) => name;\n }\n\n const rhsString = rhsFormatter(rhs, {react: true});\n\n return {\n ...expression,\n lhs: lhsString,\n rhs: rhsString,\n };\n}\n\nfunction isSliceExpressionActive(expression) {\n return Array.isArray(expression.rhs)\n ? expression.rhs.length > 0\n : false;\n}\n\nfunction isGroupExpressionActive(expression) {\n return expression.rhs !== undefined && expression.rhs !== null;\n}\n\n/**\n * A set of utility functions using the standard filter object.\n */\nexport default class Filters {\n //\n // ParamTypes:\n //\n\n static sliceFilterExpressionParamType = ParamTypes.shape({\n lhs: ParamTypes.shape({\n channel: ParamTypes.string.isRequired,\n name: ParamTypes.string.isRequired,\n }),\n op: ParamTypes.string,\n rhs: ParamTypes.oneOfType([\n ParamTypes.arrayOf(\n ParamTypes.string\n ),\n ParamTypes.string,\n ])\n });\n\n static groupFilterExpressionParamType = ParamTypes.shape({\n lhs: ParamTypes.shape({\n channel: ParamTypes.string.isRequired,\n name: ParamTypes.string.isRequired,\n }),\n op: ParamTypes.string,\n rhs: ParamTypes.any,\n });\n\n static sliceFiltersParamType = ParamTypes.shape({\n combine_type: ParamTypes.oneOf([FILTER_COMBINE_TYPE_AND, FILTER_COMBINE_TYPE_OR]),\n expressions: ParamTypes.arrayOf(\n Filters.sliceFilterExpressionParamType,\n ),\n });\n\n static groupFiltersParamType = ParamTypes.shape({\n combine_type: ParamTypes.oneOf([FILTER_COMBINE_TYPE_AND, FILTER_COMBINE_TYPE_OR]),\n expressions: ParamTypes.arrayOf(\n Filters.groupFilterExpressionParamType,\n ),\n });\n\n static paramType = ParamTypes.shape({\n slice: Filters.sliceFiltersParamType,\n group: Filters.groupFiltersParamType,\n });\n\n //\n // PropTypes:\n //\n\n static sliceFilterExpressionPropType = paramTypeToPropType(\n Filters.sliceFilterExpressionParamType\n );\n\n static groupFilterExpressionPropType = paramTypeToPropType(\n Filters.groupFilterExpressionParamType\n );\n\n static sliceFiltersPropType = paramTypeToPropType(\n Filters.sliceFiltersParamType\n );\n\n static groupFiltersPropType = paramTypeToPropType(\n Filters.groupFiltersParamType\n );\n\n static propType = paramTypeToPropType(\n Filters.paramType\n );\n\n static validate(filters) {\n paramTest(filters, Filters.paramType, 'Filters');\n }\n\n /**\n * Extract all the column names used by the filters\n *\n * @param {Object} filters\n * @returns {String[]} Column names\n */\n static getColumnsFromFilters(filters) {\n Filters.validate(filters);\n\n let columnNames = [];\n\n if (filters.slice) {\n columnNames = columnNames.concat(\n getColumnsFromSliceFilters(filters.slice)\n );\n }\n\n if (filters.group) {\n columnNames = columnNames.concat(\n getColumnsFromGroupFilters(filters.group)\n );\n }\n\n return columnNames;\n }\n\n /**\n * Extract all the category values used by the filters.\n *\n * @param {Object} filters\n * @returns {Object[]} Category value identifiers in the form of\n * { category: '', categoryValue: '' }\n */\n static getCategoryValuesFromFilters(filters) {\n Filters.validate(filters);\n\n let categoryValueIdentifiers = [];\n\n // Only slice filters have category values\n if (filters.slice) {\n categoryValueIdentifiers = categoryValueIdentifiers.concat(\n getCategoryValuesFromSliceFilters(filters.slice)\n );\n }\n\n return categoryValueIdentifiers;\n }\n\n /**\n * Convert filters from the standard format into where all expressions' lhs\n * values are converted to display name strings, and all rhs values are\n * converted to either formatted numbers or category value display names.\n *\n * Useful for preparing filters to be rendered as plain text.\n *\n * @param {Object} filters\n * @param {Object} columnConfigs An object of column configs, keyed by\n * column name.\n * @param {Object} categoryValueConfigs A two-layer object of category value\n * configs. Keyed by category name, then category value name.\n * @param {Function} translator\n * @param {*} locale\n * @returns {Object} Filters with values converted to display strings.\n */\n static convertToDisplayValues(filters, columnConfigs, categoryValueConfigs, translator, locale) {\n Filters.validate(filters);\n\n const convertedFilters = {};\n\n if (filters.slice) {\n convertedFilters.slice = {\n ...filters.slice,\n expressions: filters.slice.expressions.map((expression) => {\n return convertSliceFilterExpressionToDisplayValues({\n expression,\n columnConfigs,\n categoryValueConfigs,\n });\n }),\n };\n }\n\n if (filters.group) {\n convertedFilters.group = {\n ...filters.group,\n expressions: filters.group.expressions.map((expression) => {\n return convertGroupFilterExpressionToDisplayValues({\n expression,\n translator,\n locale,\n columnConfigs,\n });\n }),\n };\n }\n\n return {\n ...filters,\n ...convertedFilters,\n };\n }\n\n /**\n * Get the number of active expressions. This means they have valid rhs values.\n * \n * @param {Object} filters\n * @returns {Number} number of active expressions\n */\n static countActiveExpressions(filters) {\n Filters.validate(filters);\n\n let count = 0;\n\n (filters?.slice?.expressions || []).forEach((expression) => {\n if (isSliceExpressionActive(expression)) {\n count++;\n }\n });\n\n (filters?.group?.expressions || []).forEach((expression) => {\n if (isGroupExpressionActive(expression)) {\n count++;\n }\n });\n \n return count;\n }\n\n /**\n * Are there any slice filters? This includes inactive filters.\n *\n * @param {object} filters\n * @returns {boolean}\n */\n static hasAnySliceFilters(filters) {\n Filters.validate(filters);\n const sliceExpressions = filters?.slice?.expressions || [];\n\n return sliceExpressions.length;\n }\n\n static validateAndonFilter(pageFitlers, widgetFilters, row, plainCategories = {}) {\n // merge filters also does filter validation\n const filters = this.mergeFilters(pageFitlers, widgetFilters);\n let validFilter = true;\n\n // This is a list of two filter types, Dimension and Metrics\n filters.forEach(filterType => {\n // check if any of the dimension or metric filters failed validation\n if (!validFilter) {\n return;\n }\n // check if the filter is and / or to use the proper comparison functions\n const compareType = filterType.type === FILTER_TYPE_SLICE ? \n SLICE_FILTER_COMPARE_TYPES : GROUP_FILTER_COMPARE_TYPES;\n \n const subFilterResults = filterType?.expressions?.map(filter => {\n // Handle Slice Filters\n if (filterType.type === FILTER_TYPE_SLICE) {\n // Some rawValues in row are returned as a list. \n let rowValue = Array.isArray(row[filter.lhs.name].rawValue) ? row[filter.lhs.name].rawValue[0] : row[filter.lhs.name].rawValue;\n\n if (rowValue?.name) {\n return compareType[filter.op](rowValue.name, filter.rhs, {});\n }\n else {\n return compareType[filter.op](rowValue.displayName, filter.rhs, plainCategories[filter.lhs.name]);\n }\n }\n // Handle Group Filters\n else {\n if (Array.isArray(row[filter.lhs.name].rawValue)) {\n // This is only for occurrence Metrics. \n // We pass in the length of the list of events instead of the actual values in the list.\n return compareType[filter.op](row[filter.lhs.name].rawValue.length, filter.rhs);\n }\n else if (Number.isFinite(row[filter.lhs.name].rawValue)) {\n return compareType[filter.op](row[filter.lhs.name].rawValue, filter.rhs);\n }\n else {\n return false;\n }\n }\n });\n validFilter = filterType.combine_type === FILTER_COMBINE_TYPE_AND ? \n !subFilterResults.some((result) => result === false) \n : !subFilterResults.every(result => result === false);\n });\n return validFilter;\n }\n\n /**\n * Merge together two filters (mostly widget and page filters). These are anded together if they exist.\n * This also handles excluding 'non-active' filters. Filters who don't have a right hand side.\n */\n static mergeFilters(filtersA, filtersB) {\n Filters.validate(filtersA);\n Filters.validate(filtersB);\n let filters = [];\n\n [\n { filter: filtersA.slice, type: FILTER_TYPE_SLICE },\n { filter: filtersA.group, type: FILTER_TYPE_GROUP },\n { filter: filtersB.slice, type: FILTER_TYPE_SLICE },\n { filter: filtersB.group, type: FILTER_TYPE_GROUP }\n ]\n .forEach(({filter, type}) => {\n if (filter) {\n const activeExpressions = filter.expressions.filter((expression) => {\n return Array.isArray(expression.rhs)\n ? expression.rhs.length > 0\n : expression.rhs !== null && expression.rhs !== undefined;\n });\n if (activeExpressions.length) {\n filters.push({ ...filter, expressions: activeExpressions, type });\n }\n }\n });\n \n return filters;\n }\n}\n\n","import React, {\n useState,\n useCallback,\n useMemo\n} from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { Primary5, Secondary5 } from 'Common/components/typography';\nimport { RadioButton, RadioButtonGroup } from 'Common/components/RadioButton';\nimport Button from 'Common/components/Button';\nimport InlineError from 'Common/components/Error/InlineError';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport Filters from 'Common/types/Filters/Filters';\n\nconst Root = styled.div`\n padding: 5px 14px 5px 14px;\n`;\n\nconst Instructions = styled(Secondary5).attrs({ as: 'div' })`\n padding-bottom: 8px;\n`;\n\nconst IncludeLabel = styled(Primary5).attrs({ as: 'div' })`\n margin-bottom: 5px;\n`;\n\nconst StyledRadioButtonGroup = styled(RadioButtonGroup)`\n padding-left: 10px;\n`;\n\nconst ApplyContainer = styled.div`\n display: flex;\n justify-content: flex-end;\n`;\n\nconst StyledInlineError = styled(InlineError)`\n max-width: 275px;\n`;\n\nconst INCLUDE_ALL_COMMENTS = 'includeAllComments';\nconst INCLUDE_EVENT_COMMENTS = 'includeEventComments';\n\nfunction getRadioValue(includeAllComments) {\n return includeAllComments ? INCLUDE_ALL_COMMENTS : INCLUDE_EVENT_COMMENTS;\n}\n\nfunction getIncludeAllCommentsValue(radioValue) {\n if (radioValue !== INCLUDE_ALL_COMMENTS && radioValue !== INCLUDE_EVENT_COMMENTS) {\n throw new Error(`Invalid radioValue: \"${radioValue}\"`);\n }\n\n // includeAllComments is a boolean parameter in the CommentListColumn config\n return radioValue === INCLUDE_ALL_COMMENTS;\n}\n\nfunction hasChanges(initialValue, radioValue) {\n if (initialValue) {\n const initialRadioValue = getRadioValue(initialValue.commentList.includeAllComments);\n\n return initialRadioValue !== radioValue;\n }\n else {\n // No initial value? Well anything is change then\n return true;\n }\n\n}\n\nfunction validateCommentList(translator, value, filters) {\n let error = null;\n\n const includeAllComments = value?.commentList?.includeAllComments;\n\n if (includeAllComments && Filters.hasAnySliceFilters(filters)) {\n if (filters.slice.expressions.some((expression) => expression.rhs !== null)) {\n error = translator('control.column.comment_list.invalid_with_filters');\n }\n }\n\n return error;\n}\n\n/**\n * A component containing all that is needed to add a Comment Column\n * as a column on a table (the column and what types of comments it shows).\n *\n */\nfunction CommentListColumnSelector({\n fieldOptions,\n selectedColumnIndex,\n selectedColumns,\n onChange,\n startingValue,\n filterValue\n}) {\n const translator = useTranslator();\n const initialValue = useMemo(() => {\n // There is only one option for CommentLists, and that serves as our default\n return Number.isFinite(selectedColumnIndex) ? selectedColumns[selectedColumnIndex] : startingValue || { ...fieldOptions.comment_list[0] };\n }, [selectedColumnIndex, selectedColumns, startingValue, fieldOptions]);\n\n const [value, setValue] = useState(initialValue);\n\n const onRadioGroupChange = useCallback((event) => {\n const newRadioValue = event.target.value;\n\n if (hasChanges(value, newRadioValue)) {\n const newValue = {\n ...value,\n commentList: {\n includeAllComments: getIncludeAllCommentsValue(newRadioValue),\n },\n };\n\n setValue(newValue);\n }\n }, [value]);\n\n const error = validateCommentList(translator, value, filterValue);\n\n const onApply = useCallback(() => {\n let newSelectedColumns = selectedColumns;\n if (Number.isFinite(selectedColumnIndex)) {\n if (selectedColumns.length < selectedColumnIndex) {\n console.warn(`Can not update column at index ${selectedColumnIndex} there are only ${selectedColumns.length} columns.`);\n }\n else {\n newSelectedColumns = [].concat(selectedColumns);\n newSelectedColumns.splice(selectedColumnIndex, 1, value);\n }\n \n }\n else {\n newSelectedColumns = selectedColumns.concat([value]);\n }\n onChange({\n target: {\n value: newSelectedColumns\n }\n });\n }, [value, selectedColumns, onChange, selectedColumnIndex]);\n\n const canApplyChanges = useMemo(() => {\n return initialValue?.commentList?.includeAllComments !== value?.commentList?.includeAllComments || !Number.isFinite(selectedColumnIndex);\n }, [initialValue, value, selectedColumnIndex]);\n\n return (\n
\n \n {translator('control.column.comment_list.instructions')}\n \n \n {translator('control.column.comment_list.include_label')}\n \n \n \n {translator('control.column.comment_list.include_all_comments')}\n \n \n {translator('control.column.comment_list.include_event_comments')}\n \n \n {error && ({error})}\n \n \n {translator('apply_literal')}\n \n \n \n );\n}\n\nconst commentListPropType = PropTypes.shape({\n includeAllComments: PropTypes.bool.isRequired,\n});\n\nconst commentListColumnPropType = PropTypes.shape({\n name: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n commentList: commentListPropType.isRequired,\n});\n\nCommentListColumnSelector.propTypes = {\n fieldOptions: PropTypes.shape({\n comment_list: PropTypes.arrayOf(commentListColumnPropType),\n }).isRequired,\n selectedColumnIndex: PropTypes.number,\n selectedColumns: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n commentList: commentListPropType,\n }),\n ).isRequired,\n startingValue: commentListColumnPropType,\n filterValue: Filters.propType,\n onChange: PropTypes.func.isRequired,\n};\n\nexport default CommentListColumnSelector;\n","import React, { useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport MetricAndMetricSetOption from 'Common/components/ColumnControl/MetricAndMetricSetOption';\n\nconst MetricListColumnSelect = (props) => {\n const {\n fieldOptions,\n metricListMetrics,\n metricListAddMetrics\n } = props;\n\n const handleOnChange = useCallback((event) => {\n const newColumns = event.target.value;\n const metricSetChosenAsFirstMetric = metricListMetrics.length === 0 && newColumns.length > 1;\n if (metricSetChosenAsFirstMetric) {\n let foundMetricSet;\n fieldOptions.metric_set.find(group => {\n return group.entries.find(metricSet => {\n const isFound = metricSet.columns.length === newColumns.length\n && metricSet.columns.every((col, index) => (col.name === newColumns[index].name));\n\n if (isFound) {\n foundMetricSet = metricSet;\n }\n return isFound;\n });\n });\n metricListAddMetrics({\n target: {\n value: {\n columns: newColumns,\n displayName: foundMetricSet?.displayName || ''\n }\n }\n });\n }\n else {\n metricListAddMetrics({\n target: {\n value: {\n columns: newColumns\n }\n }\n });\n }\n }, [metricListMetrics, metricListAddMetrics, fieldOptions]);\n\n return (\n
\n );\n};\n\nMetricListColumnSelect.propTypes = {\n fieldOptions: PropTypes.shape({\n metric: PropTypes.arrayOf(\n PropTypes.shape({\n entries: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n channel: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n fieldType: PropTypes.string.isRequired,\n }),\n ).isRequired,\n }),\n ),\n metric_set: PropTypes.arrayOf(\n PropTypes.shape({\n entries: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n channel: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n fieldType: PropTypes.string.isRequired,\n }),\n ).isRequired,\n }),\n ),\n }).isRequired,\n metricListMetrics: PropTypes.array.isRequired,\n\n metricListAddMetrics: PropTypes.func.isRequired,\n};\n\nexport default MetricListColumnSelect;\n","import React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { Heading5, Body5 } from 'Common/components/typography';\n\nconst Container = styled.div`\n border-radius: 3px;\n background-color: ${props => props.theme.colors.palette.grey.cloud};\n color: ${props => props.theme.colors.palette.grey.manatee};\n padding: 10px;\n display: flex;\n flex-direction: column;\n`;\n\n/**\n * A default for showing no data/error message in widget/table.\n *\n */\nfunction NoDataMessage({ title, message }) {\n\n return (\n
\n {title}\n {message}\n \n );\n}\n\nNoDataMessage.propTypes = {\n title: PropTypes.string,\n message: PropTypes.string,\n};\n\nNoDataMessage.defaultProps = {\n title: '',\n message: '',\n};\n\nexport default NoDataMessage;\n","// options for showAs\nexport const SHOW_AS_BAR_CHART = 'barChart';\nexport const SHOW_AS_TEXT_ONLY = 'text';\nexport const SHOW_WITH_HEAT_MAP_INDICATORS = 'heatMapIndicator';\n\n// metric list type\nexport const METRIC_LIST_TYPE = 'metric_list';\n","import React, { Fragment, useCallback, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport some from 'lodash/some';\nimport isEqual from 'lodash/isEqual';\n\nimport Button from 'Common/components/Button';\nimport FieldBuilder from 'Common/components/FieldBuilder/FieldBuilder';\nimport TextField from 'Common/components/TextField';\nimport InlineError from 'Common/components/Error/InlineError';\nimport ListButton from 'Common/components/ListButton';\nimport MetricListColumnSelect from './MetricListColumnSelect';\nimport NoDataMessage from 'Common/components/NoDataMessage/NoDataMessage.js';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport { v4 as uuid } from 'uuid';\n\nimport { elideTextCss } from 'Common/util/cssSnippets';\nimport { Primary5 } from 'Common/components/typography';\nimport { RadioButton, RadioButtonGroup } from 'Common/components/RadioButton';\n\nimport { METRIC_LIST_TYPE, SHOW_AS_BAR_CHART, SHOW_AS_TEXT_ONLY , SHOW_WITH_HEAT_MAP_INDICATORS } from \"Common/util/MetricListColumnConstants\";\n\nconst MetricListColumnEditorContainer = styled.div`\n padding: 0px 10px;\n`;\n\nconst ApplyContainer = styled.div`\n padding: 3px 10px 10px 10px;\n display: flex;\n justify-content: flex-end;\n`;\n\nconst HorizontalSeparator = styled.div`\n width: 100%;\n height: 1px;\n margin-top: 6px;\n border-bottom: 1px solid ${({theme}) => theme.colors.palette.grey.silver};\n`;\n\nconst IncludeLabel = styled(Primary5).attrs({ as: 'div' })`\n margin: 10px 0px 5px 0px;\n`;\n\nconst DisplayNameContainer = styled.span`\n ${elideTextCss};\n align-items: center;\n display:flex;\n flex-direction: row;\n margin: 10px 0;\n`;\n\nconst DisplayNameLabel = styled(Primary5).attrs({ as: 'div' })`\n padding-right: 12px;\n`;\n\nconst RadioButtonGroupContainer = styled.div`\n padding-left: 12px;\n`;\n\nconst AddButtonContainer = styled.div`\n padding: 0 4px;\n padding-bottom: 4px;\n border-bottom: 1px solid ${({theme}) => theme.colors.palette.grey.silver };\n`;\n\nconst Container = styled.div`\n overflow-y: auto;\n flex: 1 1 auto;\n`;\n\nconst EmptyMetricsMessageContainer = styled.div`\n padding: 10px;\n`;\n\nconst FieldBuilderContainer = styled.div`\n padding-top: 5px;\n`;\n\nfunction hasChanges(initialValue, value) {\n // It's considered a change if initialValue or value is falsy (such as undefined).\n if (!initialValue || !value) {\n return true;\n }\n\n // Check to see if any Object property indexed by key has changed.\n return some(['columns','displayName','showAs'], (key) => {\n switch (typeof initialValue[key])\n {\n case 'string':\n return (initialValue[key] !== value[key]);\n\n case 'object':\n return !isEqual(initialValue[key], value[key]);\n\n default:\n throw 'Unexpected shape';\n }\n });\n}\n\nfunction isCompatibleColumn(colA, colB) {\n if (colA.type === colB.type) {\n if (colA.subType === colB.subType) {\n // [FUTUREHACK]\n // these are mixed with some other double rates that are all ppm which seem should be separate\n return (colA.name.endsWith('_per_labor_hour') == colB.name.endsWith('_per_labor_hour'));\n }\n // both don't have a subType\n if (!colA.subType && !colB.subType) {\n return true;\n }\n }\n\n // Otherwise, do a lookup in our set of equivalent type/subType combinations.\n const typeKeyA = colA.type + (colA.subType ? '/' + colA.subType : '');\n const typeKeyB = colB.type + (colB.subType ? '/' + colB.subType : '');\n\n const equivalences = {\n 'double/cycle': true, 'uint64': true // All these can be cross-compared.\n };\n\n return equivalences[typeKeyA] && equivalences[typeKeyB];\n}\n\nfunction getErrors(translator, value) {\n let errors = {};\n\n if (!value || value.columns.length === 0) {\n errors.columns = translator('widget.table.column_control.errors.must_have_metrics');\n }\n\n if (!value.displayName) {\n errors.displayName = translator('widget.table.column_control.errors.must_have_header_text');\n }\n\n if (value.showAs === SHOW_AS_BAR_CHART) {\n const hasIncompatiableColumn = value.columns.some(col => {\n return !isCompatibleColumn(col, value.columns[0]) || col.type === 'date_time';\n });\n\n if (hasIncompatiableColumn) {\n errors.showAs = translator('widget.table.column_control.errors.incompatible_metrics');\n }\n }\n\n return Object.keys(errors).length > 0 ? errors : null;\n}\n\nfunction getShowMetricListWithValue(radioValue) {\n switch (radioValue) {\n case SHOW_AS_BAR_CHART:\n case SHOW_AS_TEXT_ONLY:\n case SHOW_WITH_HEAT_MAP_INDICATORS:\n break;\n\n default:\n throw new Error(`Invalid radioValue: \"${radioValue}\"`);\n }\n\n return radioValue;\n}\n\n/**\n * A component containing all that is needed to add a Metric List Column\n * as a column on a table (the column and additional display info).\n *\n */\nfunction MetricListColumnEditor(props) {\n const {\n selectedColumnIndex,\n selectedColumns,\n startingValue,\n title,\n\n onChange,\n transitionForward,\n transitionBackward,\n } = props;\n\n const translator = useTranslator();\n\n const initialValue = useMemo(() => {\n // this means we are editing an existing selectedColumn\n if (Number.isFinite(selectedColumnIndex)) {\n return selectedColumns[selectedColumnIndex];\n }\n else if (startingValue?.initialValue) {\n let initialStartingValue = startingValue.initialValue;\n if (!initialStartingValue.name) {\n initialStartingValue = { ...startingValue.initialValue, name: `mlist_${uuid()}` };\n }\n return initialStartingValue;\n }\n else {\n return {\n name: `mlist_${uuid()}`,\n channel: 'production_metric',\n columns: [],\n showAs: SHOW_AS_TEXT_ONLY,\n displayName: translator('metric_list'),\n fieldType: METRIC_LIST_TYPE,\n type: METRIC_LIST_TYPE\n };\n }\n },[selectedColumnIndex, startingValue, selectedColumns, translator]);\n\n // We will store the current value in persistedControlState\n const [value, setValue] = useState(startingValue?.value || initialValue);\n\n const errors = useMemo(() => {\n return getErrors(translator, value);\n }, [translator, value]);\n\n const onApply = useCallback(() => {\n let newSelectedColumns = selectedColumns;\n if (Number.isFinite(selectedColumnIndex)) {\n if (selectedColumns.length < selectedColumnIndex) {\n console.warn(`Can not update column at index ${selectedColumnIndex} there are only ${selectedColumns.length} columns.`);\n }\n else {\n newSelectedColumns = [].concat(selectedColumns);\n newSelectedColumns.splice(selectedColumnIndex, 1, value);\n }\n \n }\n else {\n newSelectedColumns = selectedColumns.concat([value]);\n }\n onChange({\n target: {\n value: newSelectedColumns\n }\n });\n }, [value, selectedColumns, onChange, selectedColumnIndex]);\n\n const canApplyChanges = useMemo(() => {\n return !errors && (hasChanges(initialValue, value) || !Number.isFinite(selectedColumnIndex));\n }, [initialValue, value, selectedColumnIndex, errors]);\n\n const handleFieldBuilderChange = useCallback((event) => {\n const newFieldValue = event.target.value;\n setValue(previousValue => {\n if (hasChanges(previousValue, { columns: newFieldValue })) {\n const newValue = {\n ...previousValue,\n columns: newFieldValue,\n };\n \n return newValue;\n }\n else {\n return previousValue;\n }\n });\n }, []);\n\n const handleHeaderChange = useCallback((event) => {\n const newHeaderValue = event.target.value;\n setValue(previousValue => {\n if (newHeaderValue != previousValue.displayName) {\n return { ...previousValue, displayName: newHeaderValue };\n }\n else {\n return previousValue;\n }\n });\n }, []);\n\n const handleRadioGroupChange = useCallback((event) => {\n const newRadioValue = getShowMetricListWithValue(event.target.value);\n setValue(previousValue => {\n if (newRadioValue !== previousValue.showAs) {\n return { ...previousValue, showAs: newRadioValue };\n }\n else {\n return previousValue;\n }\n });\n }, []);\n\n const handleAddMetric = useCallback((e) => {\n let propsForCurrentControl = { selectedColumnIndex, startingValue: { value, initialValue }};\n let propsForNextControl = {\n metricListMetrics:value.columns,\n metricListAddMetrics:(event) => {\n const newValue = event.target.value;\n const updatedPropsForCurrentControl = { \n selectedColumnIndex, \n startingValue: {\n initialValue,\n value: { ...value, columns: newValue.columns, displayName: newValue.displayName || value.displayName }\n }\n };\n transitionBackward();\n transitionForward(\n null,\n { control: MetricListColumnEditor, props: updatedPropsForCurrentControl, title }\n );\n }\n };\n\n transitionForward(\n { control: MetricListColumnSelect, props: propsForNextControl, title: translator('add_field_template', { field: translator('metric_literal')}) },\n { control: MetricListColumnEditor, props: propsForCurrentControl, title },\n );\n }, [selectedColumnIndex, value, initialValue, transitionForward, translator, title, transitionBackward]);\n\n return (\n
\n \n \n \n {translator('add_field_template', { field: translator('metric_literal')})}\n \n \n \n \n \n {value.columns.length === 0\n ? (\n \n \n \n )\n : null\n }\n \n \n\n \n \n {translator('widget.table.column_control.header_text')}\n \n \n \n\n \n {translator('widget.table.column_control.show_metric_list_with.label')}\n \n\n \n \n \n {translator('widget.table.column_control.show_metric_list_with.only_text')}\n \n \n {translator('widget.table.column_control.show_metric_list_with.heat_map_indicators')}\n \n \n {translator('widget.table.column_control.show_metric_list_with.bar_chart')}\n \n \n \n {errors?.showAs\n ? (\n \n {errors.showAs}\n \n )\n : null\n }\n \n \n \n \n {translator('apply_literal')}\n \n \n \n );\n}\n\nconst metricListColumnPropType = PropTypes.shape({\n name: PropTypes.string,\n columns: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n type: PropTypes.string,\n subType: PropTypes.string,\n })\n ).isRequired,\n displayName: PropTypes.string.isRequired,\n showAs: PropTypes.oneOf([\n '', SHOW_AS_BAR_CHART,SHOW_WITH_HEAT_MAP_INDICATORS,SHOW_AS_TEXT_ONLY\n ]),\n});\n\nMetricListColumnEditor.propTypes = {\n selectedColumnIndex: PropTypes.number,\n selectedColumns: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n columns: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n type: PropTypes.string,\n subType: PropTypes.string,\n })\n ),\n displayName: PropTypes.string.isRequired,\n showAs: PropTypes.oneOf([\n '', SHOW_AS_BAR_CHART,SHOW_WITH_HEAT_MAP_INDICATORS,SHOW_AS_TEXT_ONLY\n ]),\n }),\n ).isRequired,\n startingValue: PropTypes.shape({\n initialValue: metricListColumnPropType,\n value: metricListColumnPropType,\n }),\n title: PropTypes.string.isRequired,\n\n transitionForward: PropTypes.func.isRequired,\n transitionBackward: PropTypes.func.isRequired,\n onChange: PropTypes.func.isRequired,\n};\n\nexport default MetricListColumnEditor;\n","import React, {\n useState,\n useCallback,\n useMemo\n} from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { Body5 } from 'Common/components/typography';\nimport { useTranslator } from 'Common/hooks/useTranslation';\n\nimport Button from 'Common/components/Button';\nimport BasicSelectField from 'Common/components/BasicSelectField/BasicSelectField';\nimport { filterFields } from 'Common/components/FieldBuilder/FieldBuilder';\n\nconst limitOptions = [\n { displayName:'1', value:'1' },\n { displayName:'2', value:'2' },\n { displayName:'3', value:'3' },\n { displayName:'4', value:'4' },\n { displayName:'5', value:'5' },\n];\n\nconst emptyValue = {\n attentionList: { limit: 3 }\n};\n\nfunction getColumnLimit(column) {\n return column.attentionList.limit;\n}\n\n// return a new column with limit updated\nfunction setColumnLimit(column, limit) {\n let newAttentionListPortion = {\n ...column.attentionList,\n limit\n };\n\n return { ...column, attentionList: newAttentionListPortion };\n}\n\nfunction hasChanges(initialValue, value) {\n // its considered change if theres no value or initialValue\n if (!initialValue || !value) {\n return true;\n }\n const sameLimit = getColumnLimit(initialValue) === getColumnLimit(value);\n const sameColumn = initialValue.name === value.name;\n return !sameColumn || !sameLimit;\n}\n\nconst verticalPadding = 5;\n\nconst ListDropdownContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 14px ${verticalPadding}px 14px;\n`;\n\nconst LimitContainer = styled.div`\n padding: 0 14px ${verticalPadding}px 14px;\n`;\n\nconst LimitLabelContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: ${verticalPadding}px 0;\n`;\n\nconst AttentionListLabel = styled.div`\n width: 35%;\n flex: 0 0 auto;\n padding-right: 10px;\n color: ${({theme}) => theme.colors.palette.grey.manatee};\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nconst AttentionListContainer = styled.div`\n min-width: 1px;\n flex: 1 1 auto;\n`;\n\nconst HelperTextContainer = styled(Body5).attrs({ as: 'div' })`\n color: ${({ theme }) => theme.colors.darkText.mediumEmphasis };\n padding: 0 14px 10px;\n`;\n\nconst ApplyContainer = styled.div`\n display: flex;\n justify-content: flex-end;\n`;\n\n/**\n * A component containing all that is needed to add an Attention List Column\n * as a column on a table (the column and the limit).\n *\n */\nfunction AttentionListColumnSelector(props) {\n const {\n fieldOptions,\n selectedColumnIndex,\n selectedColumns,\n onChange,\n startingValue\n } = props;\n\n const translator = useTranslator();\n\n // always provide a value for sort to be stored into\n const initialValue = Number.isFinite(selectedColumnIndex) ? selectedColumns[selectedColumnIndex] : startingValue || emptyValue;\n\n const [value, setValue] = useState(initialValue);\n\n const options = useMemo(() => {\n const unselectableColumns = initialValue\n ? selectedColumns.filter(col => col.name !== initialValue.name)\n : selectedColumns;\n return filterFields(fieldOptions.attention_list || [], unselectableColumns);\n }, [fieldOptions, selectedColumns, initialValue]);\n\n const handleColumnChange = useCallback((event) => {\n let newValue = value;\n const { name: targetName, value: targetValue } = event.target;\n\n if (targetName === 'limit') {\n newValue = setColumnLimit(value, Number(targetValue.value));\n }\n else {\n // Use the new target to find the actual option selected\n const nextColumn = options.find((option) => (option.name === targetValue.value));\n newValue = setColumnLimit(nextColumn, getColumnLimit(value));\n }\n\n if (!hasChanges(initialValue, newValue)) {\n newValue = initialValue;\n }\n\n setValue(newValue);\n }, [value, initialValue, options]);\n\n const onApply = useCallback(() => {\n let newSelectedColumns = selectedColumns;\n if (Number.isFinite(selectedColumnIndex)) {\n if (selectedColumns.length < selectedColumnIndex) {\n console.warn(`Can not update column at index ${selectedColumnIndex} there are only ${selectedColumns.length} columns.`);\n }\n else {\n newSelectedColumns = [].concat(selectedColumns);\n newSelectedColumns.splice(selectedColumnIndex, 1, value);\n }\n \n }\n else {\n newSelectedColumns = selectedColumns.concat([value]);\n }\n onChange({\n target: {\n value: newSelectedColumns\n }\n });\n }, [value, selectedColumns, onChange, selectedColumnIndex]);\n\n const canApplyChanges = useMemo(() => {\n return (hasChanges(initialValue, value) || value === startingValue) && value.name;\n }, [initialValue, value, startingValue]);\n\n return (\n
\n \n {translator('widget.table.column_control.attention_list_helper_text')}\n \n \n {translator('widget.table.column_control.attention_list_dropdown_label')}\n \n {\n return {\n displayName: option.displayName,\n value: option.name,\n };\n })}\n selectedValue={value?.name || ''}\n selectedDisplayName={value?.displayName || translator('widget.table.column_control.attention_list_dropdown_placeholder')}\n />\n \n \n\n \n \n {translator('widget.table.column_control.attention_list_limit_label')}\n \n \n \n \n {translator('apply_literal')}\n \n \n \n \n );\n}\n\nconst attentionListPropType = PropTypes.shape({\n limit: PropTypes.number.isRequired,\n});\n\nconst attentionListColumnPropType = PropTypes.shape({\n name: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n attentionList: attentionListPropType.isRequired,\n});\n\nAttentionListColumnSelector.propTypes = {\n fieldOptions: PropTypes.shape({\n attention_list: PropTypes.arrayOf(attentionListColumnPropType).isRequired,\n }).isRequired,\n selectedColumnIndex: PropTypes.number,\n selectedColumns: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n attentionList: attentionListPropType,\n }),\n ).isRequired,\n startingValue: attentionListColumnPropType,\n\n onChange: PropTypes.func.isRequired,\n};\n\nexport default AttentionListColumnSelector;\n","export const SCROLL_LIMIT = 'scroll_limit';\nexport const FILTER_LIMIT = 'filter_limit';\n\nexport const DEFAULT_ROW_LIMIT = 14;\n\nexport const ATTENTION_LIST_TYPE = 'attention_list';\nexport const COMMENT_LIST_TYPE = 'comment_list';\nexport const DIMENSION_TYPE = 'category_value';\nexport const METRIC_TYPE = 'metric';\n","export const TEXT_VISUALIZATION_TYPE = 'text';\nexport const BAR_VISUALIZATION_TYPE = 'bar';\nexport const COLUMN_VISUALIZATION_TYPE = 'column';\nexport const CHRONOGRAM_VISUALIZATION_TYPE = 'chronogram';\n\nexport const DIMENSION_ORDER = 'dimension';\nexport const VALUE_ORDER = 'value';\nexport const TIME_ORDER = 'time';\n\nexport const TEXT_FORMAT_TYPE = 'spark_dimension_text';\nexport const BAR_FORMAT_TYPE = 'spark_dimension_bar';\nexport const COLUMN_FORMAT_TYPE = 'spark_dimension_column';\nexport const CHRONOGRAM_FORMAT_TYPE = 'spark_dimension_chronogram';\n\nexport const DIMENSION_VISUALIZATION_TYPES = {\n TEXT_VISUALIZATION_TYPE,\n BAR_VISUALIZATION_TYPE,\n COLUMN_VISUALIZATION_TYPE,\n CHRONOGRAM_VISUALIZATION_TYPE\n};\n\nexport const DIMENSION_VISUALIZATION_ORDER_BY_TYPES = {\n DIMENSION_ORDER,\n TIME_ORDER,\n VALUE_ORDER\n};\n\nexport const DIMENSION_VISUALIZATION_FORMAT_TYPES = {\n TEXT_FORMAT_TYPE,\n BAR_FORMAT_TYPE,\n COLUMN_FORMAT_TYPE,\n CHRONOGRAM_FORMAT_TYPE,\n};\n\nexport const DIMENSION_VISUALIZATION_TO_TYPE = {\n 'bar' : BAR_FORMAT_TYPE,\n 'column': COLUMN_FORMAT_TYPE,\n 'chronogram': CHRONOGRAM_FORMAT_TYPE,\n 'text': TEXT_FORMAT_TYPE\n};\n\nexport const DURATION_METRIC = 'duration';\n","import React, { useState, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport TextField from '../TextField';\nimport { formatNumber } from 'Common/util/format';\nimport { trunc } from 'Common/util/language/math';\nimport InlineError from 'Common/components/Error/InlineError';\n\nconst DEFAULT_MAX_FRACTION_DIGITS = 3;\n\nconst NumberInput = styled(TextField).attrs(({isEditing}) => ({\n // While editing we want to be a number field for better input filtering and mobile\n // keypad support. But we change to a readonly text field when not editing so we can\n // show formatted values like percentages and thousands separators.\n //\n type: isEditing ? 'number' : 'text',\n readonly: !isEditing,\n}))`\n /* Hides the up/down arrows for number inputs */\n & input[type=number] {\n /* Chrome / Safari */\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n /* Firefox */\n -moz-appearance: textfield;\n\n /* In Firefox we also need to hide the box shadow for invalid inputs */\n &:invalid {\n box-shadow: none;\n }\n }\n\n text-align: right;\n ${({disabled}) => disabled && css`\n color: ${({theme}) => theme.colors.darkText.disabled};\n `}\n`;\n\nconst Container = styled.div`\n display: inline-block;\n width: 100%;\n`;\n\nfunction convertInputValue(percent, value, maximumFractionDigits) {\n let newInputValue = '';\n\n if (Number.isFinite(value)) {\n // Adjust the value to look like a percentage instead of a fractional value\n // for the user to edit.\n //\n newInputValue = percent ? value * 100 : value;\n\n // Do not show precision beyond our max precision\n newInputValue = Number(newInputValue.toFixed(maximumFractionDigits));\n }\n\n return newInputValue;\n}\n\n/**\n * A number input field with the standard styles applied with prop type\n * validation and numerical conversion for the onChange event.\n *\n * @param {Number} [value] The number to use as the value of the field, decimal portion\n * may be truncated on blur if integral prop is set to true.\n * @param {Function} [onChange] Called with the new value when a value is committed on a\n * blur event.\n * @param {Number} [minFractionDigits = 0] Enforce a minimum number for fractional digits.\n * @param {Boolean} [percent = false] When true values are multiplied by 100 and shown with a %\n * symbol while not focused.\n * @param {Number} [minLeftDigits = 0] Number of digits to ensure on the left side of the\n * decimal point, padding with zeros as needed.\n * @param {String} [placeholder = '']\n * @param {Node} [error] An error message if relevant.\n * @param {Boolean} [showErrorInline = true] If there is an error present show it inline under the\n * input.\n */\nexport default function NumberField({\n className,\n value,\n name,\n placeholder,\n onChange: onChangeProp,\n minLeftDigits,\n minFractionDigits,\n percent,\n error,\n showErrorInline,\n disabled\n}) {\n const maximumFractionDigits = Math.max(\n DEFAULT_MAX_FRACTION_DIGITS,\n minFractionDigits,\n );\n\n const [isEditing, setIsEditing] = useState(false);\n const [inputValue, setInputValue] = useState(convertInputValue(percent, value, maximumFractionDigits));\n\n let stringValue = '';\n\n if (Number.isFinite(value)) {\n stringValue = formatNumber(value, {\n minDigits: minLeftDigits,\n type: percent ? 'percent' : 'decimal',\n minimumFractionDigits: minFractionDigits,\n maximumFractionDigits,\n });\n }\n\n const onFocus = useCallback(() => {\n setIsEditing(true);\n setInputValue(convertInputValue(percent, value, maximumFractionDigits));\n }, [percent, value, maximumFractionDigits]);\n\n const handleChange = useCallback(({ newValue: newValueString, shouldTruncate = false }) => {\n newValueString = newValueString.trim();\n let newValue = Number(newValueString);\n\n if (newValueString.length > 0 && !Number.isNaN(newValue)) {\n if (shouldTruncate) {\n newValue = trunc(newValue, maximumFractionDigits);\n }\n\n // Apply percentage adjustment after truncation as the max fraction digits\n // applies to what the user sees, not the value used under the hood.\n //\n if (percent) {\n newValue = Number((newValue / 100).toFixed(maximumFractionDigits + 2));\n }\n }\n else {\n newValue = null;\n }\n\n onChangeProp({\n target: {\n value: newValue,\n name,\n },\n });\n }, [onChangeProp, maximumFractionDigits, name, percent]);\n\n const onBlur = useCallback((event) => {\n setIsEditing(false);\n\n handleChange({\n newValue: event.target.value,\n shouldTruncate: true,\n });\n }, [handleChange]);\n\n const onChange = useCallback((event) => {\n setInputValue(event.target.value);\n handleChange({\n newValue: event.target.value,\n });\n }, [handleChange]);\n\n return (\n
\n \n {showErrorInline && error && (\n \n {error}\n \n )}\n \n );\n}\n\nNumberField.propTypes = {\n className: PropTypes.string,\n value: PropTypes.number,\n name: PropTypes.string,\n placeholder: PropTypes.string,\n onChange: PropTypes.func,\n minLeftDigits: PropTypes.number,\n minFractionDigits: PropTypes.number,\n percent: PropTypes.bool,\n error: PropTypes.node,\n showErrorInline: PropTypes.bool,\n disabled: PropTypes.bool\n};\n\nNumberField.defaultProps = {\n placeholder: '',\n onChange: () => { },\n minLeftDigits: 0,\n minFractionDigits: 0,\n percent: false,\n showErrorInline: true,\n disabled: false\n};\n","import NumberField from './NumberField';\n\nexport default NumberField;\n","import Dropdown from 'Common/components/Dropdown/Dropdown';\nimport FieldSelectControl from 'Common/components/LiveControls/FieldSelectControl';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport SelectDropdownButton from 'Common/components/SelectList/SelectDropdownButton';\nimport { useTranslator } from 'Common/hooks/useTranslation';\n\n/**\n * Dropdown with internally managed open/close state.\n */\nfunction MetricSelectField({\n disabled,\n name,\n onChange,\n options,\n selectedItem,\n collapsibleGroups,\n showFlattenCheckbox,\n placeholderText,\n}) {\n const translator = useTranslator();\n const [isOpen, setIsOpen] = React.useState(false);\n\n const openHandler = () => {\n setIsOpen(true);\n };\n\n const closeHandler = () => {\n setIsOpen(false);\n };\n\n const onChangeHandler = (event) => {\n closeHandler();\n onChange(event);\n };\n\n const renderContent = () => {\n return (\n
\n );\n };\n\n const itemName = (selectedItem.displayKey ? translator(selectedItem.displayKey) : selectedItem.displayName);\n\n return (\n
\n \n {itemName || placeholderText || ''}\n \n \n );\n}\n\nMetricSelectField.propTypes = {\n disabled: PropTypes.bool,\n name: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n options: PropTypes.arrayOf(PropTypes.object).isRequired,\n selectedItem: PropTypes.object.isRequired,\n showFlattenCheckbox: PropTypes.bool,\n collapsibleGroups: PropTypes.bool,\n placeholderText: PropTypes.string,\n};\n\nMetricSelectField.defaultProps = {\n disabled: false,\n name: 'MetricSelectField',\n placeholderText: '',\n};\n\nexport default MetricSelectField;\n","import MetricSelectField from \"./MetricSelectField\";\n\nexport default MetricSelectField;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport CategorySelectList from '.';\nimport Dropdown from 'Common/components/Dropdown/Dropdown';\nimport SelectDropdownButton from 'Common/components/SelectList/SelectDropdownButton';\nimport { useTranslator } from 'Common/hooks/useTranslation';\n\n/**\n * Drop-In SelectField for CategorySelectLists which wraps CategorySelectList in a dropdown\n * with internally managed open/close state.\n */\nfunction CategorySelectField({\n name,\n options,\n selectedItem,\n onChange,\n disabled,\n collapsibleGroups,\n showFlattenCheckbox,\n placeholderText,\n}) {\n const translator = useTranslator();\n const [isOpen, setIsOpen] = useState(false);\n\n const openHandler = () => {\n setIsOpen(true);\n };\n\n const closeHandler = () => {\n setIsOpen(false);\n };\n\n const onChangeHandler = (event) => {\n closeHandler();\n onChange(event);\n };\n\n const renderContent = () => {\n return (\n \n );\n };\n\n const itemName = selectedItem.displayKey ? translator(selectedItem.displayKey) : selectedItem.displayName;\n\n return (\n \n \n {itemName || placeholderText || ''}\n \n \n );\n}\n\nCategorySelectField.propTypes = {\n name: PropTypes.string,\n options: PropTypes.arrayOf(PropTypes.object).isRequired,\n selectedItem: PropTypes.object.isRequired,\n onChange: PropTypes.func.isRequired,\n disabled: PropTypes.bool,\n showFlattenCheckbox: PropTypes.bool,\n collapsibleGroups: PropTypes.bool,\n placeholderText: PropTypes.string,\n};\n\nCategorySelectField.defaultProps = {\n name: 'CategorySelectField',\n disabled: false,\n placeholderText: '',\n};\n\nexport default CategorySelectField;\n","\n\n/**\n * Validation function for the common NumberField component.\n *\n * @param {Number|String} num Number value to validate.\n * @param {Object} [opts]\n * @param {Number} [opts.min = MIN_SAFE_INT] The lower bound for a valid number.\n * @param {Number} [opts.max = MAX_SAFE_INT] The upper bound for a valid number.\n * @param {Boolean} [opts.integral = false] If true the number should be a whole number to\n * pass validation.\n * @param {Boolean} [opts.percentage = false] If true treat as a percentage.\n * @param {Boolean} [opts.allowEmpty = false] If true count empty values as valid.\n * @param {Function} [opts.translator] The translator used to return string literals from\n * provided keys and substitution mapping.\n *\n * @returns {String} Error message if applicable, undefined if there are no errors to report.\n */\nexport default function validateNumber(num, {\n min = Number.MIN_SAFE_INTEGER,\n max = Number.MAX_SAFE_INTEGER,\n integral,\n percentage,\n allowEmpty,\n translator,\n}) {\n let error;\n\n const originalNum = num;\n\n num = Number(num);\n\n const nanErrorLiteral = translator({ key: 'not_a_number_error'});\n const gteErrorLiteral = translator({\n key: 'number_must_be_gte_error',\n substitutions: { min: min }\n });\n const lteErrorLiteral = translator({\n key: 'number_must_be_lte_error',\n substitutions: { max: max }\n });\n const wholeNumberErrorLiteral = translator({ key: 'not_a_whole_number_error'});\n\n if (Number.isNaN(num)) {\n if (!allowEmpty || originalNum) {\n error = nanErrorLiteral;\n }\n else {\n // No need to check anything else since we are NaN\n return undefined;\n }\n }\n else if (num < min) {\n error = gteErrorLiteral;\n }\n else if (num > max) {\n error = lteErrorLiteral;\n }\n else if (integral) {\n const adjustedNum = percentage ? num * 100 : num;\n\n if (adjustedNum !== Math.trunc(adjustedNum)) {\n error = wholeNumberErrorLiteral;\n }\n }\n\n return error;\n}\n","import React, { useCallback, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { filterGroupedFields } from 'Common/components/FieldBuilder/FieldBuilder';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport styled from 'styled-components';\nimport { Body5 } from 'Common/components/typography';\nimport Button from 'Common/components/Button';\nimport BasicSelectField from 'Common/components/BasicSelectField/BasicSelectField';\nimport NumberField from 'Common/components/NumberField';\nimport MetricSelectField from 'Common/components/MetricSelectField';\nimport CategorySelectField from 'Common/components/CategorySelectList/CategorySelectField';\nimport InlineError from 'Common/components/Error/InlineError';\nimport validateNumber from 'Common/data/validateNumber';\nimport {\n BAR_VISUALIZATION_TYPE,\n COLUMN_VISUALIZATION_TYPE,\n DIMENSION_ORDER,\n DIMENSION_VISUALIZATION_TYPES,\n TEXT_VISUALIZATION_TYPE,\n VALUE_ORDER\n} from '../SparkVisualization/SparkDimensionConstants';\n\nconst NO_METRIC = 'none';\n\nfunction getVisualizationOptions(translator) {\n return [\n {\n value: DIMENSION_VISUALIZATION_TYPES.TEXT_VISUALIZATION_TYPE,\n displayName: translator('widget.spark_visualization.dimension_visualization_options.visualization.text'),\n },\n {\n value: DIMENSION_VISUALIZATION_TYPES.BAR_VISUALIZATION_TYPE,\n displayName: translator('widget.spark_visualization.dimension_visualization_options.visualization.bar'),\n },\n {\n value: DIMENSION_VISUALIZATION_TYPES.COLUMN_VISUALIZATION_TYPE,\n displayName: translator('widget.spark_visualization.dimension_visualization_options.visualization.column'),\n },\n ];\n}\n\nfunction getOrderOptions(translator) {\n return [\n {\n value: DIMENSION_ORDER,\n displayName: translator('widget.spark_visualization.dimension_visualization_options.order_by.by_dimension'),\n },\n {\n value: VALUE_ORDER,\n displayName: translator('widget.spark_visualization.dimension_visualization_options.order_by.by_value'),\n },\n ];\n}\n\nfunction getMetricOptions(fieldOptions, visualization) {\n return fieldOptions.category_value_metrics[visualization];\n}\n\n/**\n * A helper function to find the first option in a hierarchical set of options.\n *\n * Similar to Array.find().\n * \n * @param {Array} options Array of options.\n * @param {Function} func Supplied function that should return true if the option matches.\n * @returns {Object|undefined} The found option or undefined.\n */\nconst findOptionRecursive = (options, func) => {\n for (const opt of options) {\n if (opt.entries) {\n const foundEntry = findOptionRecursive(opt.entries, func);\n if (foundEntry !== undefined) {\n return foundEntry;\n }\n }\n else {\n if (func(opt)) {\n return opt;\n }\n }\n }\n\n return undefined;\n};\n\nconst findMetricOption = (metricOptions, metric) => {\n const foundOption = findOptionRecursive(metricOptions, (opt) => {\n return opt.name === metric;\n });\n\n return foundOption || null;\n};\n\nfunction hasChanges(newConfig, initialConfig) {\n return newConfig.dimension !== initialConfig?.name\n || newConfig.visualization !== initialConfig?.dimensionVisualization?.visualization\n || newConfig.metric !== initialConfig?.dimensionVisualization?.metric\n || newConfig.order !== initialConfig?.dimensionVisualization?.orderBy\n || newConfig.limit !== initialConfig?.dimensionVisualization?.maxElementsShown;\n}\n\nconst verticalPadding = 5;\nconst ListDropdownContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 14px ${verticalPadding}px 14px;\n`;\n\nconst LimitContainer = styled.div`\n padding: 0 14px;\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nconst LimitErrorContainer = styled.div`\n display: flex;\n flex-direction: row;\n padding: 0 14px ${verticalPadding}px 14px;\n`;\n\nconst SparkColumnLabel = styled.div`\n width: 38%;\n flex: 0 0 auto;\n padding-right: 10px;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nconst SparkColumnContainer = styled.div`\n min-width: 1px;\n flex: 1 1 auto;\n`;\n\nconst HelperTextContainer = styled(Body5).attrs({ as: 'div' })`\n color: ${({ theme }) => theme.colors.darkText.mediumEmphasis };\n padding: 0 0 10px 14px;\n`;\n\nconst ValidationText = styled(Body5)`\n color: ${({theme}) => theme.colors.palette.error.red };\n`;\n\nconst ValidationContainer = styled.div`\n justify-content: flex-end;\n flex: 0 0 auto;\n padding: 0 10px;\n`;\n\nconst ApplyContainer = styled.div`\n display: flex;\n justify-content: flex-end;\n padding: 0 14px 14px 14px;\n`;\n\nconst NumberFieldContainer = styled.div`\n width: 30px;\n`;\n\n/**\n * Use this in a history stack style column control for when the user is editing/adding a category.\n *\n */\nconst SparkDimensionColumnSelector = ({\n fieldOptions,\n selectedColumnIndex,\n selectedColumns,\n onChange,\n startingValue\n}) => {\n const translator = useTranslator();\n\n // initial column\n const initialCategoryColumn = Number.isFinite(selectedColumnIndex) ? selectedColumns[selectedColumnIndex] : null;\n const initalDimensionVisualization = initialCategoryColumn?.dimensionVisualization || null;\n\n const [dimension, setDimension] = useState(initialCategoryColumn?.name || startingValue?.name || '');\n const [visualization, setVisualization] = useState(initalDimensionVisualization?.visualization || BAR_VISUALIZATION_TYPE);\n const [metric, setMetric] = useState(initalDimensionVisualization?.metric || startingValue?.metric || null);\n const [order, setOrder] = useState(initalDimensionVisualization?.orderBy || DIMENSION_ORDER);\n const [limit, setLimit] = useState(Number.isFinite(initalDimensionVisualization?.maxElementsShown) ? initalDimensionVisualization?.maxElementsShown : 10);\n\n const usesLimit = (visualization !== TEXT_VISUALIZATION_TYPE);\n\n const limitNumberError = useMemo(() => {\n return usesLimit ?\n validateNumber(limit, {\n integral: true,\n min: 1,\n max: 15,\n translator: translator,\n })\n : '';\n }, [limit, translator, usesLimit]);\n\n const configurationError = useMemo(() => {\n if (!metric && visualization !== DIMENSION_VISUALIZATION_TYPES.TEXT_VISUALIZATION_TYPE) {\n return translator('editors.spark_dimension.validation.need_metric');\n }\n else {\n return '';\n }\n }, [metric, visualization, translator]);\n\n const dimensionList = useMemo(() => {\n const unselectableFields = initialCategoryColumn\n ? selectedColumns.filter(col => col.name !== initialCategoryColumn.name)\n : selectedColumns;\n const filteredFields = filterGroupedFields(fieldOptions.category_value || [], unselectableFields);\n\n return filteredFields.map((option) => {\n return {\n ...option,\n isDummyGroup: false,\n };\n });\n }, [fieldOptions, selectedColumns, initialCategoryColumn]);\n\n const selectedDimension = useMemo(() => {\n const foundOption = findOptionRecursive(dimensionList, (opt) => {\n return opt.name === dimension;\n });\n\n return foundOption || null;\n }, [ dimensionList, dimension ]);\n\n const handleDimensionChange = useCallback((e) => {\n const column = e.target.value.name;\n setDimension(column);\n }, []);\n\n const handleVisualizationChange = useCallback((e) => {\n const value = e.target.value.value;\n\n setLimit((currentLimit) => {\n if (value === TEXT_VISUALIZATION_TYPE) {\n return null;\n }\n else if (!currentLimit) {\n return 10;\n }\n else {\n return currentLimit;\n }\n });\n\n setMetric((currentMetric) => {\n // Check that the current metric is valid for this\n // visualization type, otherwise set it to null.\n const newMetricOptions = getMetricOptions(fieldOptions, value);\n if (!findMetricOption(newMetricOptions, currentMetric)) {\n // Metric not available as an option anymore.\n return null;\n }\n else {\n // Metric is still valid; no changes.\n return currentMetric;\n }\n });\n\n setOrder(DIMENSION_ORDER);\n setVisualization(value);\n }, [fieldOptions]);\n\n const handleMetricChange = useCallback((e) => {\n const value = e.target.value.name;\n if (typeof value !== 'string') {\n throw new Error('handleMetricChange: Bad value for metric');\n }\n setMetric(value === NO_METRIC ? null : value);\n }, []);\n\n const handleOrderChange = useCallback((e) => {\n const value = e.target.value.value;\n setOrder(value);\n }, []);\n\n const handleLimitChange = useCallback((e) => {\n const value = e.target.value;\n setLimit(value);\n }, []);\n\n const handleOnChange = useCallback(() => {\n const sparkDimension = {\n ...selectedDimension,\n name: selectedDimension.name,\n channel: selectedDimension.channel,\n displayName: selectedDimension.displayName,\n dimensionVisualization: {\n visualization,\n metric: metric,\n orderBy: order,\n maxElementsShown: limit,\n },\n };\n\n let newSelectedColumns = selectedColumns;\n\n if (!Number.isFinite(selectedColumnIndex)) {\n newSelectedColumns = selectedColumns.concat([sparkDimension]);\n }\n else {\n if (selectedColumns.length < selectedColumnIndex) {\n console.warn(`Can not update column at index ${selectedColumnIndex} there are only ${selectedColumns.length} columns.`);\n }\n else {\n // Array.splice is in-place, so copy the array before.\n newSelectedColumns = [ ...selectedColumns ];\n newSelectedColumns.splice(selectedColumnIndex, 1, sparkDimension);\n }\n }\n\n onChange({\n target: {\n value: newSelectedColumns,\n }\n });\n }, [selectedColumns, onChange, selectedColumnIndex, limit, metric, order, visualization, selectedDimension]);\n\n const visualizationOptions = useMemo(() => getVisualizationOptions(translator), [ translator ]);\n const selectedVisualizationOption = useMemo(() => {\n return visualizationOptions.find((opt) => {\n return opt.value === visualization;\n });\n }, [ visualizationOptions, visualization ]);\n\n const metricOptions = useMemo(() => {\n return [\n {\n name: NO_METRIC,\n displayName: translator('none_literal'),\n isDummyGroup: true,\n entries: [{\n name: NO_METRIC,\n displayName: translator('bracket_none_literal'),\n }]\n }\n ].concat(getMetricOptions(fieldOptions, visualization));\n }, [fieldOptions, visualization, translator]);\n\n const selectedMetric = useMemo(() => {\n return findMetricOption(metricOptions, metric);\n }, [ metricOptions, metric ]);\n\n const orderOptions = useMemo(() => getOrderOptions(translator), [ translator ]);\n const selectedOrderOption = useMemo(() => {\n return orderOptions.find((opt) => {\n return opt.value === order;\n });\n }, [ orderOptions, order ]);\n\n const categoryPlaceholderText = translator('editors.filter.dropdown_placeholder', {value: translator('value_literal').toLowerCase()});\n const metricPlaceholderText = translator('editors.filter.dropdown_placeholder', {value: translator('value_literal').toLowerCase()});\n\n return (\n \n \n {translator('widget.spark_visualization.add_dimension_helper_text')}\n \n \n {translator('widget.spark_visualization.dimension')}\n \n \n \n \n \n {translator('widget.spark_visualization.visualization')}\n \n \n \n \n \n {translator('widget.spark_visualization.metric')}\n \n \n \n \n {metric && (\n {translator('widget.spark_visualization.order')}\n \n \n \n \n )}\n {usesLimit && (\n \n {translator('widget.spark_visualization.max_elements')}\n \n \n \n \n )}\n \n \n \n {limitNumberError}\n \n \n {configurationError && (\n \n \n {configurationError}\n \n \n )}\n \n \n {translator('apply_literal')}\n \n \n \n );\n};\n\nconst categoryValueMetricOptionsPropType = PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired\n })\n);\n// hello\nSparkDimensionColumnSelector.propTypes = {\n fieldOptions: PropTypes.shape({\n category_value: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string.isRequired,\n })),\n category_value_metrics: PropTypes.exact({\n [BAR_VISUALIZATION_TYPE]: categoryValueMetricOptionsPropType.isRequired,\n [COLUMN_VISUALIZATION_TYPE]: categoryValueMetricOptionsPropType.isRequired,\n [TEXT_VISUALIZATION_TYPE]: categoryValueMetricOptionsPropType.isRequired,\n }),\n }).isRequired,\n selectedColumnIndex: PropTypes.number,\n selectedColumns: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string.isRequired\n })),\n startingValue: PropTypes.shape({\n name: PropTypes.string,\n metric: PropTypes.string\n }),\n\n onChange: PropTypes.func.isRequired,\n};\n\nexport default SparkDimensionColumnSelector;\n","import React, { useMemo, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport omit from 'lodash/omit';\n\nimport { filterFields, filterGroupedFields } from 'Common/components/FieldBuilder/FieldBuilder';\nimport FieldBuilderTypeSelect, { flattenEntries, SEPARATOR_TYPE } from 'Common/components/FieldBuilderTypeSelect/FieldBuilderTypeSelect';\nimport MetricAndMetricSetOption from 'Common/components/ColumnControl/MetricAndMetricSetOption';\nimport mergeMetricAndMetricSet, { filterCombinedMetricAndMetricSets } from 'Common/components/ColumnControl/mergeMetricAndMetricSet';\nimport CommentListColumnSelector from './CommentListColumnSelector';\nimport MetricListColumnEditor from './MetricListColumnEditor';\nimport AttentionListColumnSelector from './AttentionListColumnSelector';\nimport { METRIC_LIST_TYPE } from \"Common/util/MetricListColumnConstants\";\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport { ATTENTION_LIST_TYPE, COMMENT_LIST_TYPE } from '../tableWidgetConstants';\nimport { BAR_VISUALIZATION_TYPE, COLUMN_VISUALIZATION_TYPE, TEXT_VISUALIZATION_TYPE } from 'Common/components/SparkVisualization/SparkDimensionConstants';\nimport SparkDimensionColumnSelector from 'Common/components/ColumnControl/SparkDimensionColumnSelector';\n\nconst METRIC = 'metric';\nconst CATEGORY_VALUE = 'category_value';\nconst METRIC_SET = 'metric_set';\n\n/**\n * This generates the list of available types and searchable fields.\n *\n * @returns {Object} Shape: {\n * primary {Array}: The primary menu items for the ADD_COLUMN menu,\n * searchable {Array}: The menu items when searching in the the ADD_COLUMN menu,\n * }\n*/\nfunction generateMenuOptions(translator, fieldOptions = {}, selectedFields = []) {\n let primaryMenuOptions = [];\n let searchableMenuOptions = [];\n\n const generateOptions = ({fields, searchFilter = filterFields, name, displayName}) => {\n const filteredFields = searchFilter(fields, selectedFields);\n\n searchableMenuOptions = searchableMenuOptions\n .concat(flattenEntries(filteredFields))\n .map((option) => {\n let displayType = '';\n if (option.fieldType === METRIC) {\n displayType = translator('metric_literal');\n }\n else if (option.fieldType === CATEGORY_VALUE) {\n displayType = translator('category_literal');\n }\n else if (option.fieldType === ATTENTION_LIST_TYPE) {\n displayType = translator('attention_list');\n }\n else if (option.fieldType === METRIC_LIST_TYPE) {\n displayType = translator('metric_list');\n }\n else if (option.fieldType === METRIC_SET) {\n displayType = translator('metric_set');\n }\n\n return { ...option, displayType };\n });\n\n primaryMenuOptions.push({\n name,\n displayName,\n disabled: filteredFields.length === 0,\n hasChildren: true,\n });\n };\n\n const generateSeparator = () => {\n const numberOfOptions = primaryMenuOptions.length;\n\n // Never start with a separator and never put two separators in a row\n if (numberOfOptions !== 0\n && primaryMenuOptions[numberOfOptions - 1].type !== SEPARATOR_TYPE)\n {\n primaryMenuOptions.push({\n type: SEPARATOR_TYPE,\n });\n }\n };\n\n generateOptions({\n fields: mergeMetricAndMetricSet(fieldOptions.metric || [], fieldOptions.metric_set || []),\n searchFilter: filterCombinedMetricAndMetricSets,\n name: METRIC,\n displayName: translator('metric_literal'),\n });\n\n if (fieldOptions.category_value) {\n generateOptions({\n fields: fieldOptions.category_value,\n searchFilter: filterGroupedFields,\n name: CATEGORY_VALUE,\n displayName: translator('category_literal'),\n });\n }\n\n generateSeparator();\n\n if (fieldOptions.attention_list) {\n generateOptions({\n fields: fieldOptions.attention_list,\n name: ATTENTION_LIST_TYPE,\n displayName: translator('attention_list'),\n });\n }\n\n if (fieldOptions.metric_list) {\n generateOptions({\n fields: fieldOptions.metric_list,\n searchFilter: (fields) => { return fields; },\n name: METRIC_LIST_TYPE,\n displayName: translator('metric_list')\n });\n }\n\n generateSeparator();\n\n if (fieldOptions.comment_list) {\n generateOptions({\n fields: fieldOptions.comment_list,\n name: COMMENT_LIST_TYPE,\n displayName: translator('comment')\n });\n }\n\n return {\n primary: primaryMenuOptions,\n searchable: searchableMenuOptions,\n };\n}\n\nconst categoryValueMetricOptionsPropType = PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired\n })\n);\n\nconst TableFieldsOption = ({\n fieldOptions,\n selectedColumns,\n onChange,\n transitionForward,\n initialMenuSelection\n}) => {\n const translator = useTranslator();\n\n // the different types of fields available\n // for column selection and their respective lists\n const menuOptions = useMemo(() => {\n return generateMenuOptions(translator, fieldOptions, selectedColumns);\n }, [fieldOptions, selectedColumns, translator]);\n\n const handleOnChange = useCallback((e) => {\n if (e.target.type === 'main' \n || e.target.value.fieldType === ATTENTION_LIST_TYPE \n || e.target.value.fieldType === METRIC_LIST_TYPE \n || e.target.value.fieldType === COMMENT_LIST_TYPE \n || e.target.value.fieldType === CATEGORY_VALUE) {\n // we keep the users selection highlighted if they end up traveling back here\n let menuSelection = e.target.value.name;\n let newControlOptions = null;\n\n if (menuSelection === METRIC) {\n newControlOptions = { control: MetricAndMetricSetOption, props: {}, title: translator('add_field_template', { field: translator('metric_literal')}) };\n }\n else if (e.target.type === 'search' && e.target.value.fieldType === CATEGORY_VALUE) {\n newControlOptions = { control: SparkDimensionColumnSelector, props: { startingValue: { metric: 'duration', name: e.target.value.name} }, title: translator('add_field_template', { field: translator('category_literal')}) };\n }\n else if (menuSelection === CATEGORY_VALUE) {\n newControlOptions = { control: SparkDimensionColumnSelector, props: { startingValue: { metric: 'duration' } }, title: translator('add_field_template', { field: translator('category_literal')}) };\n }\n else {\n // displayType was added so lets remove it\n const column = e.target.type === 'main' ? null : omit(e.target.value, 'displayType');\n\n if (menuSelection === ATTENTION_LIST_TYPE || column?.fieldType === ATTENTION_LIST_TYPE) {\n newControlOptions = { control: AttentionListColumnSelector, props: column ? { startingValue: column } : {}, title: translator('add_field_template', { field: translator('attention_list')}) };\n }\n else if (menuSelection === METRIC_LIST_TYPE || column?.fieldType === METRIC_LIST_TYPE) {\n newControlOptions = { control: MetricListColumnEditor, props: column ? { startingValue: { initialValue: omit(column, 'name') } } : {}, title: translator('add_field_template', { field: translator('metric_list')}) };\n }\n else if (menuSelection === COMMENT_LIST_TYPE || column?.fieldType === COMMENT_LIST_TYPE) {\n newControlOptions = { control: CommentListColumnSelector, props: column ? { startingValue: column } : {}, title: translator('add_field_template', { field: translator('comment')}) };\n }\n }\n\n if (newControlOptions) {\n transitionForward(\n newControlOptions,\n { control: TableFieldsOption, props: { initialMenuSelection: menuSelection }, title: translator('add_column_literal') }\n );\n }\n }\n else {\n const column = e.target.value;\n if (column.fieldType === METRIC_SET) {\n const newColumns = column.columns;\n let updatedColumns = [ ...selectedColumns ];\n\n let selectedColumnsByName = selectedColumns.reduce((byName, col) => {\n byName[col.name] = col;\n return byName;\n }, []);\n\n // for every column in the new metric set, check if it already exists in the table.\n // If not, concat the new column onto the array\n\n newColumns.forEach(newColumn => {\n if (!selectedColumnsByName[newColumn.name]) {\n updatedColumns.push(newColumn);\n }\n });\n\n onChange({\n target: {\n value: updatedColumns,\n }\n });\n }\n else {\n // displayType was added so lets remove it\n const modifiedColumn = omit(column, 'displayType');\n onChange({\n target: {\n value: selectedColumns.concat([modifiedColumn]),\n }\n });\n }\n }\n }, [onChange, transitionForward, selectedColumns, translator]);\n\n return (\n );\n};\n\nTableFieldsOption.propTypes = {\n fieldOptions: PropTypes.shape({\n metric: PropTypes.arrayOf(\n PropTypes.shape({\n entries: PropTypes.arrayOf(\n PropTypes.shape({\n fieldType: PropTypes.string,\n }),\n ).isRequired,\n }),\n ).isRequired,\n metric_set: PropTypes.arrayOf(\n PropTypes.shape({\n entries: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n channel: PropTypes.string.isRequired,\n fieldType: PropTypes.string.isRequired,\n }),\n ).isRequired,\n }),\n ).isRequired,\n category_value: PropTypes.arrayOf(\n PropTypes.shape({\n entries: PropTypes.arrayOf(\n PropTypes.shape({\n fieldType: PropTypes.string,\n }),\n ).isRequired,\n }),\n ),\n category_value_metrics: PropTypes.exact({\n [BAR_VISUALIZATION_TYPE]: categoryValueMetricOptionsPropType.isRequired,\n [COLUMN_VISUALIZATION_TYPE]: categoryValueMetricOptionsPropType.isRequired,\n [TEXT_VISUALIZATION_TYPE]: categoryValueMetricOptionsPropType.isRequired,\n }),\n attention_list: PropTypes.arrayOf(\n PropTypes.shape({\n fieldType: PropTypes.string,\n }),\n ),\n metric_list: PropTypes.arrayOf(\n PropTypes.shape({\n entries: PropTypes.arrayOf(\n PropTypes.shape({\n fieldType: PropTypes.string.isRequired,\n }),\n ).isRequired,\n }),\n ),\n comment_list: PropTypes.arrayOf(\n PropTypes.shape({\n fieldType: PropTypes.string,\n }),\n ),\n }).isRequired,\n initialMenuSelection: PropTypes.string,\n selectedColumns: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n channel: PropTypes.string.isRequired,\n fieldType: PropTypes.string.isRequired,\n }),\n ).isRequired,\n onChange: PropTypes.func.isRequired,\n transitionForward: PropTypes.func.isRequired,\n};\n\nexport default TableFieldsOption;\n","import React, { Fragment, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport ListButton from 'Common/components/ListButton';\nimport DraggableFieldItem from './DraggableFieldItem';\nimport DraggableListWithTrashCan from 'Common/components/DraggableList/DraggableListWithTrashCan';\nimport Button from 'Common/components/Button';\n\nimport TableFieldsOption from './TableFieldsOption';\nimport MetricAndMetricSetOption from 'Common/components/ColumnControl/MetricAndMetricSetOption';\nimport CommentListColumnSelector from './CommentListColumnSelector';\nimport MetricListColumnEditor from './MetricListColumnEditor';\nimport AttentionListColumnSelector from './AttentionListColumnSelector';\nimport SparkDimensionColumnSelector from 'Common/components/ColumnControl/SparkDimensionColumnSelector';\nimport { METRIC_LIST_TYPE, SHOW_AS_BAR_CHART, SHOW_WITH_HEAT_MAP_INDICATORS } from \"Common/util/MetricListColumnConstants\";\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport { Body5 } from 'Common/components/typography';\nimport { ATTENTION_LIST_TYPE, COMMENT_LIST_TYPE } from '../tableWidgetConstants';\nimport {\n BAR_VISUALIZATION_TYPE,\n COLUMN_VISUALIZATION_TYPE,\n DIMENSION_ORDER,\n TEXT_VISUALIZATION_TYPE,\n VALUE_ORDER\n} from 'Common/components/SparkVisualization/SparkDimensionConstants';\n\nconst METRIC = 'metric';\nconst CATEGORY_VALUE = 'category_value';\n\nconst AddButtonContainer = styled.div`\n padding: 0 4px;\n padding-bottom: 4px;\n border-bottom: 1px solid ${({theme}) => theme.colors.palette.grey.silver };\n`;\n\nconst ButtonContainer = styled.div`\n box-sizing: border-box;\n min-height: 44px;\n min-width: 44px;\n display: flex;\n align-items: center;\n flex: 0 0 auto;\n padding-right: 11px;\n`;\n\nconst ApplyContainer = styled(ButtonContainer)`\n justify-content: flex-end;\n flex: 0 0 auto;\n`;\n\nconst ValidationContainer = styled.div`\n justify-content: flex-end;\n flex: 0 0 auto;\n padding: 0 10px;\n`;\n\nconst ValidationText = styled(Body5)`\n color: ${({theme}) => theme.colors.palette.error.red };\n`;\n\n// Used to handle reordering the drag/drop values\nfunction reorder(list, startIndex, endIndex) {\n const result = Array.from(list);\n const [removed] = result.splice(startIndex, 1);\n result.splice(endIndex, 0, removed);\n\n return result;\n}\n\n// Create secondary text from a field based on its type and or configuration\nfunction getSecondaryTextFromField(translator, item, fieldOptions) {\n if (item.fieldType === METRIC) {\n return translator('metric_literal');\n }\n else if (item.fieldType === CATEGORY_VALUE) {\n const fieldTypeDisplayName = translator('category_literal');\n\n let visualizationDisplayName;\n if (item.dimensionVisualization.visualization === BAR_VISUALIZATION_TYPE) {\n visualizationDisplayName = translator('widget.spark_visualization.dimension_visualization_options.visualization.bar');\n }\n else if (item.dimensionVisualization.visualization === COLUMN_VISUALIZATION_TYPE) {\n visualizationDisplayName = translator('widget.spark_visualization.dimension_visualization_options.visualization.column');\n }\n else if (item.dimensionVisualization.visualization === TEXT_VISUALIZATION_TYPE) {\n visualizationDisplayName = translator('widget.spark_visualization.dimension_visualization_options.visualization.text');\n }\n\n let orderDisplayName;\n if (item.dimensionVisualization.orderBy === VALUE_ORDER) {\n orderDisplayName = translator('widget.spark_visualization.dimension_visualization_options.order_by.by_value');\n }\n else if (item.dimensionVisualization.orderBy === DIMENSION_ORDER) {\n orderDisplayName = translator('widget.spark_visualization.dimension_visualization_options.order_by.by_dimension');\n }\n\n let metricDisplayName = translator('unknown_field_literal');\n fieldOptions.category_value_metrics[item.dimensionVisualization.visualization].find(({ entries }) => {\n const foundEntry = entries.find(col => col.name === item.dimensionVisualization.metric);\n if (foundEntry) {\n metricDisplayName = foundEntry.displayName;\n }\n return foundEntry;\n });\n\n let secondaryText = `${fieldTypeDisplayName}; ${visualizationDisplayName}`;\n\n if (item.dimensionVisualization.metric) {\n secondaryText += `; ${metricDisplayName}; ${orderDisplayName}`;\n }\n\n if (item.dimensionVisualization.maxElementsShown) {\n secondaryText += `; ${item.dimensionVisualization.maxElementsShown} ${translator('items_literal')}`;\n }\n \n return secondaryText;\n }\n else if (item.fieldType === ATTENTION_LIST_TYPE) {\n return `${translator('attention_list')}; ${item?.attentionList?.limit || 0} ${translator('items_literal')}`;\n }\n else if (item.fieldType === METRIC_LIST_TYPE) {\n const metrics = item.columns.map(({ displayName }) => (displayName)).join(', ') || '';\n \n let displayAs = translator('widget.table.column_control.as_text');\n if (item.showAs === SHOW_AS_BAR_CHART) {\n displayAs = translator('widget.table.column_control.as_bar_chart');\n }\n else if (item.showAs === SHOW_WITH_HEAT_MAP_INDICATORS) {\n displayAs = translator('widget.table.column_control.as_heat_map_indicator');\n }\n\n return `${translator('metric_list')}; ${metrics}; ${displayAs}`;\n }\n else if (item.fieldType === COMMENT_LIST_TYPE) {\n const displayAs = item.commentList.includeAllComments\n ? translator('widget.table.column_control.all_for_time_peroid')\n : translator('widget.table.column_control.only_for_directly_linked');\n return `${displayAs}`;\n }\n else {\n return '';\n }\n}\n\n/**\n * This component is one of the options traveled to by TableColumnControl.\n * It's the start, allowing the user to add/update/remove fields.\n */\n\nconst TableSelectedFieldsOption = ({\n selectedColumns,\n fieldOptions,\n isValid,\n validation,\n isDirty,\n onChange,\n onApply,\n transitionForward,\n}) => {\n const translator = useTranslator();\n\n const handleAddField = useCallback((e) => {\n transitionForward(\n { control: TableFieldsOption, props: {}, title: translator('add_column_literal') }\n );\n }, [transitionForward, translator]);\n\n const onDragEnd = useCallback((result) => {\n const newValue = reorder(\n selectedColumns,\n result.source.index,\n result.destination.index\n );\n\n onChange({\n target: {\n value: newValue\n }\n });\n }, [selectedColumns, onChange]);\n\n const onDelete = useCallback((result) => {\n const newValue = selectedColumns.filter((item) => {\n return item.name !== result.id;\n });\n\n onChange({\n target: {\n value: newValue\n }\n });\n }, [selectedColumns, onChange]);\n\n const handleUpdateFields = useCallback((e) => {\n const columnIndex = selectedColumns.findIndex((col) => (col.name === e.target.value));\n\n if (columnIndex < 0) {\n console.warn(`Can not find column ${e.target.value}`);\n return;\n }\n\n const columnFieldType = selectedColumns[columnIndex].fieldType;\n\n if (columnFieldType === METRIC) {\n transitionForward(\n { control: MetricAndMetricSetOption, props: { selectedColumnIndex: columnIndex }, title: translator('edit_field_template', { field: translator('metric_literal')}) }\n );\n }\n else if (columnFieldType === CATEGORY_VALUE) {\n transitionForward(\n { control: SparkDimensionColumnSelector, props: { selectedColumnIndex: columnIndex }, title: translator('edit_field_template', { field: translator('category_literal')}) }\n );\n }\n else if (columnFieldType === ATTENTION_LIST_TYPE) {\n transitionForward(\n { control: AttentionListColumnSelector, props: { selectedColumnIndex: columnIndex }, title: translator('edit_field_template', { field: translator('attention_list')}) }\n );\n }\n else if (columnFieldType === METRIC_LIST_TYPE) {\n transitionForward(\n { control: MetricListColumnEditor, props: { selectedColumnIndex: columnIndex }, title: translator('edit_field_template', { field: translator('metric_list')}) }\n );\n }\n else if (columnFieldType === COMMENT_LIST_TYPE) {\n transitionForward(\n { control: CommentListColumnSelector, props: { selectedColumnIndex: columnIndex }, title: translator('edit_field_template', { field: translator('comment')}) }\n );\n }\n\n }, [selectedColumns, transitionForward, translator]);\n\n return (\n \n \n \n {translator('add_column_literal')}\n \n \n \n {selectedColumns.map((item) => {\n return (\n \n );\n })}\n \n {validation && (\n \n \n {validation}\n \n \n )}\n \n \n {translator('apply_literal')}\n \n \n \n );\n};\n\nTableSelectedFieldsOption.propTypes = {\n selectedColumns: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n channel: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n fieldType: PropTypes.string.isRequired,\n showAs: PropTypes.string,\n columns: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n channel: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n })\n ),\n attentionList: PropTypes.shape({\n limit: PropTypes.number,\n }),\n commentList: PropTypes.shape({\n includeAllComments: PropTypes.bool,\n })\n }),\n ).isRequired,\n fieldOptions: PropTypes.shape({\n metric_set: PropTypes.arrayOf(\n PropTypes.shape({\n entries: PropTypes.arrayOf(\n PropTypes.shape({\n metric_set: PropTypes.string.isRequired,\n columns: PropTypes.arrayOf(\n PropTypes.shape({\n displayName: PropTypes.string.isRequired,\n }).isRequired\n ).isRequired\n }).isRequired\n ).isRequired,\n }),\n ).isRequired,\n }).isRequired,\n isValid: PropTypes.bool.isRequired,\n validation: PropTypes.string,\n isDirty: PropTypes.bool.isRequired,\n onApply: PropTypes.func.isRequired,\n onChange: PropTypes.func.isRequired,\n transitionForward: PropTypes.func.isRequired,\n};\n\nexport default TableSelectedFieldsOption;\n","import {useState, useCallback} from 'react';\n\n/**\n * This hook holds a stack of objects and returns the last item on the stack.\n * It allows the user to pop items off the stack to show the previous item,\n * and to add items to the stack to show a new one. The user can provide\n * updates for the current item on push as well, so the stack has the most\n * up-to-date info.\n *\n */\nexport default function useStackHistory(initialItem) {\n\n const [ historyStack, setHistoryStack ] = useState([initialItem]);\n\n const push = useCallback((newItem, currentItem) => {\n setHistoryStack(currHistoryStack => {\n let newStack = currHistoryStack.concat([]);\n if (currentItem) {\n // remove current item so it can be updated\n newStack.pop();\n // update current item\n newStack.push(currentItem);\n }\n\n // add new item\n if (newItem) {\n newStack.push(newItem);\n }\n\n return newStack;\n });\n }, []);\n\n const clear = useCallback(() => {\n setHistoryStack([initialItem]);\n }, [initialItem]);\n\n const pop = useCallback(() => {\n setHistoryStack(currHistoryStack => {\n if (currHistoryStack.length > 1) {\n let k = currHistoryStack.slice(0, currHistoryStack.length - 1);\n return k;\n }\n else {\n return [initialItem];\n }\n });\n }, [initialItem]);\n\n return { current: historyStack[historyStack.length -1], canPop: historyStack.length > 1, push, pop, clear };\n}\n","import { useCallback, useMemo, useState } from 'react';\n\nfunction useDialogState() {\n const [ isInvalidDialogVisible, setIsInvalidDialogVisible ] = useState(false);\n\n const showInvalidDialog = useCallback(() => {\n setIsInvalidDialogVisible(true);\n }, []);\n\n const hideInvalidDialog = useCallback(() => {\n setIsInvalidDialogVisible(false);\n }, []);\n\n return {\n isInvalidDialogVisible,\n showInvalidDialog,\n hideInvalidDialog,\n };\n}\n\nconst defaultDetectChanges = (initialValue, value) => initialValue !== value;\n\n/**\n * A hook for managing state of a live control that requires validation.\n *\n * Internally, the hook stores a \"modified\" value (set by calling the returned\n * `setValue` function), and runs that though the provided `validate` function.\n * If `validate` returns any truthy value, then the modified value is considered\n * invalid.\n *\n * `apply` Should be called when the `value` is to be applied/saved. When called:\n * - If the current value is valid: `onChange` will be called, the internal\n * state will be reset, and `apply` will return true to indicate success.\n * - If the current value is invalid: `apply` will return false and\n * `isInvalidDialogVisible` will be set to true.\n *\n * `reset` can be called to cancel any changes and return to the initial state.\n *\n * An optional `detectChanges` function can be provided for custom checking of\n * changes between the initial and modified value.\n *\n * @param {{\n * initialValue,\n * validate: function(value) : * | null,\n * onChange: function(value),\n * detectChanges?: function(initialValue, value) : bool\n * }} params\n * @returns {{\n * value: *,\n * setValue: function(value),\n * isDirty: boolean,\n * isValid: boolean,\n * reset: function(),\n * validationErrors: * | null,\n * apply: function() : boolean,\n * isInvalidDialogVisible: boolean,\n * hideInvalidDialog: function(),\n * }}\n */\nexport default function useValidationState({\n initialValue,\n validate,\n onChange,\n detectChanges = defaultDetectChanges,\n}) {\n const [ modifiedValue, setModifiedValue ] = useState(null);\n\n const {\n isInvalidDialogVisible,\n showInvalidDialog,\n hideInvalidDialog,\n } = useDialogState();\n\n // Let the internal value follow initialValue until the user makes changes.\n const value = modifiedValue === null ? initialValue : modifiedValue;\n\n const isDirty = useMemo(() => {\n return detectChanges(initialValue, value);\n }, [ detectChanges, initialValue, value ]);\n\n const reset = useCallback(() => {\n setModifiedValue(null);\n hideInvalidDialog();\n }, [ hideInvalidDialog ]);\n\n const validationErrors = useMemo(() => {\n return validate(value);\n }, [ validate, value ]);\n\n const isValid = !validationErrors;\n\n const apply = useCallback(() => {\n if (!isValid) {\n showInvalidDialog();\n return false;\n }\n\n setModifiedValue(null);\n hideInvalidDialog();\n\n if (isDirty) {\n onChange(value);\n }\n\n return true;\n }, [ isValid, isDirty, setModifiedValue, showInvalidDialog, hideInvalidDialog, onChange, value ]);\n\n return {\n value: value,\n setValue: setModifiedValue,\n isDirty: isDirty,\n isValid: isValid,\n reset: reset,\n validationErrors: validationErrors,\n apply: apply,\n isInvalidDialogVisible,\n hideInvalidDialog,\n };\n}\n","import Button from 'Common/components/Button';\nimport ModalWindow from 'Common/components/ModalWindow/ModalWindow';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { useTranslator } from 'Common/hooks/useTranslation';\n\nexport default function InvalidLiveControlDialog({\n title,\n content,\n onContinue,\n onCancel,\n}) {\n const translator = useTranslator();\n const cancelText = translator('control.common.invalid_changes_popup.cancel');\n const continueText = translator('control.common.invalid_changes_popup.continue');\n\n return (\n \n {cancelText}\n ,\n \n {continueText}\n \n ]}\n >\n \n {content}\n
\n \n );\n}\n\nInvalidLiveControlDialog.propTypes = {\n title: PropTypes.string.isRequired,\n content: PropTypes.node.isRequired,\n onContinue: PropTypes.func.isRequired,\n onCancel: PropTypes.func.isRequired,\n};\n","import React, {\n useCallback,\n useImperativeHandle,\n forwardRef,\n createElement,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport TableSelectedFieldsOption from './TableSelectedFieldsOption';\nimport LiveControlDropdownHeader from 'Common/components/LiveControlBar/LiveControlDropdownHeader';\nimport LiveControlDropdownLayout from 'Common/components/LiveControlBar/LiveControlDropdownLayout';\nimport useStackHistory from 'Common/hooks/useStackHistory';\nimport { METRIC_LIST_TYPE } from 'Common/util/MetricListColumnConstants';\nimport Filters from 'Common/types/Filters/Filters';\nimport useValidationState from 'Common/components/LiveControlBar/useValidationState';\nimport InvalidLiveControlDialog from 'Common/components/LiveControlBar/InvalidLiveControlDialog';\nimport useTranslation, { useTranslator } from 'Common/hooks/useTranslation';\nimport { ATTENTION_LIST_TYPE, COMMENT_LIST_TYPE, DIMENSION_TYPE } from '../tableWidgetConstants';\nimport isEqual from 'lodash/isEqual';\n\nconst Root = styled.div`\n box-sizing: border-box;\n width: 275px;\n display: flex;\n flex-direction: column;\n min-height: 1px;\n`;\n\n// compares columns to see if they are the same\nfunction detectChanges (initialColumns, updatedColumns) {\n if (initialColumns.length !== updatedColumns.length) {\n return true;\n }\n\n return !initialColumns.every((column, index) => {\n const updatedColumn = updatedColumns[index];\n let isSameColumn = column.name === updatedColumn?.name &&\n column.channel === updatedColumn?.channel;\n\n if (column.fieldType === ATTENTION_LIST_TYPE && isSameColumn) {\n return column.attentionList.limit === updatedColumn.attentionList.limit;\n }\n else if (column.fieldType === COMMENT_LIST_TYPE && isSameColumn) {\n return column.commentList.includeAllComments === updatedColumn.commentList.includeAllComments;\n }\n else if (column.fieldType === METRIC_LIST_TYPE && isSameColumn) {\n return (column.showAs === updatedColumn.showAs)\n && (column.displayName === updatedColumn.displayName)\n && (!detectChanges(column.columns, updatedColumn.columns));\n }\n else if (column.fieldType === DIMENSION_TYPE && isSameColumn) {\n return isEqual(column.dimensionVisualization, updatedColumn.dimensionVisualization);\n }\n else {\n return isSameColumn;\n }\n });\n}\n\n/**\n * This component is used by table to select which columns will be shown in the table.\n *\n */\nconst TableColumnControl = forwardRef((props, ref) => {\n const {\n defaultTitle,\n fieldOptions,\n icon,\n selectedColumns: initialSelectedColumns,\n goBack,\n onChange,\n filterValue,\n maxNumColumns,\n } = props;\n\n const translator = useTranslator();\n\n const validate = useCallback((value) => {\n if (value.length > maxNumColumns) {\n return translator('control.column.too_many_columns_template', { max: maxNumColumns });\n }\n else {\n return null;\n }\n }, [ translator, maxNumColumns ]);\n\n const handleChange = useCallback((value) => {\n onChange({\n target: {\n value: value,\n },\n });\n }, [ onChange ]);\n\n const {\n value,\n setValue,\n isDirty,\n isValid,\n validationErrors,\n apply,\n reset,\n isInvalidDialogVisible,\n hideInvalidDialog,\n } = useValidationState({\n initialValue: initialSelectedColumns,\n validate,\n detectChanges: detectChanges,\n onChange: handleChange,\n });\n\n useImperativeHandle(ref, () => ({\n onClose: () => {\n const isApplySuccess = apply();\n return isApplySuccess;\n },\n }), [ apply ]);\n\n // handles navigation between different controls\n const {\n current: currentProps,\n canPop: internalCanGoBack,\n push: transitionForward,\n pop: internalGoBack,\n clear,\n } = useStackHistory({ control: TableSelectedFieldsOption, props: {}, title: defaultTitle });\n\n const handleOnColumnsChange = useCallback((event) => {\n setValue(event.target.value);\n clear();\n }, [ clear, setValue ]);\n\n const title = currentProps.title || defaultTitle;\n\n // a go back link can also come from\n // parent not just the history stack\n const canGoBack = !!goBack;\n\n const headerGoBack = internalCanGoBack\n ? internalGoBack\n : canGoBack ? goBack : null;\n\n // this handles what happens when the user selects\n // the go back link\n const handleHeaderGoBack = useCallback(() => {\n if (headerGoBack) {\n headerGoBack();\n }\n }, [headerGoBack]);\n\n const header = (\n \n );\n\n const invalidChangesPopupTitleLiteral = useTranslation('control.column.invalid_changes_popup.title');\n const invalidChangesPopupMessageLiteral = useTranslation('control.column.invalid_changes_popup.message');\n\n const handleInvalidDialogCancel = useCallback(() => {\n // Reset the validation state.\n reset();\n // Trigger a change with the initial value to indicate the user has\n // completed completed making changes to this control.\n handleChange(initialSelectedColumns);\n }, [ reset, handleChange, initialSelectedColumns ]);\n\n const body = (\n \n {createElement(currentProps.control, {\n ...(currentProps.props || {}),\n maxNumColumns,\n fieldOptions,\n filterValue,\n selectedColumns: value,\n isValid,\n validation: validationErrors,\n isDirty,\n title,\n transitionForward,\n transitionBackward: internalGoBack,\n onChange: handleOnColumnsChange,\n onApply: apply,\n })}\n {isInvalidDialogVisible && (\n \n )}\n \n );\n\n return (\n \n );\n});\n\nTableColumnControl.propTypes = {\n fieldOptions: PropTypes.object.isRequired,\n selectedColumns: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n channel: PropTypes.string.isRequired,\n fieldType: PropTypes.string.isRequired,\n attentionList: PropTypes.shape({\n limit: PropTypes.number.isRequired\n }),\n commentList: PropTypes.shape({\n includeAllComments: PropTypes.bool.isRequired\n }),\n displayName: PropTypes.string,\n showAs: PropTypes.string,\n columns: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n channel: PropTypes.string.isRequired,\n })\n )\n })\n ).isRequired,\n maxNumColumns: PropTypes.number,\n icon: PropTypes.node.isRequired,\n defaultTitle: PropTypes.string.isRequired,\n\n filterValue: Filters.propType,\n\n onChange: PropTypes.func.isRequired,\n goBack: PropTypes.func,\n\n};\n\nTableColumnControl.displayName = 'TableColumnControl';\n\nTableColumnControl.defaultProps = {\n maxNumColumns: Infinity,\n};\n\nexport default TableColumnControl;\n","import TableColumnControl from './TableColumnControl';\n\nexport default TableColumnControl;\n","\nexport const channel_schema = {\n 'calendar_day': {\n 'display_name': 'calendar_day_channel_literal',\n 'name': 'calendar_day',\n 'projecting_base': 'production_metric'\n },\n 'diagnostic': {\n 'annotations': {\n 'message': {\n 'display_name': 'term.message.name',\n 'help_text': 'term.message.short',\n 'name': 'message',\n 'rollup': true,\n 'scoreboard_name': 'term.message.scoreboard_name'\n }\n },\n 'category_values': {\n 'diagnostic_event_type': {\n 'category': 'diagnostic_event_type',\n 'display_name': 'term.diagnostic_event_type.name',\n 'help_text': 'term.diagnostic_event_type.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'diagnostic_event_type',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.diagnostic_event_type.scoreboard_name'\n },\n 'error_category': {\n 'category': 'error_category',\n 'display_name': 'term.error_category.name',\n 'help_text': 'term.error_category.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'error_category',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.error_category.scoreboard_name'\n }\n },\n 'display_name': 'diagnostic_channel_literal',\n 'fragmenting_parent': 'production_metric',\n 'metrics': {\n 'diagnostic_event_id': {\n 'classification': 'miscellaneous',\n 'display_name': 'term.diagnostic_event_id.name',\n 'help_text': 'term.diagnostic_event_id.short',\n 'name': 'diagnostic_event_id',\n 'rollup': true,\n 'scoreboard_name': 'term.diagnostic_event_id.scoreboard_name',\n 'type': 'uint64'\n },\n 'event_id': {\n 'display_name': 'term.event_id.name',\n 'help_text': 'term.event_id.short',\n 'indexed': true,\n 'internal': true,\n 'name': 'event_id',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.event_id.scoreboard_name',\n 'type': 'id'\n },\n 'production_day_number': {\n 'aggregation': 'none',\n 'display_name': 'term.production_day_number.name',\n 'help_text': 'term.production_day_number.short',\n 'internal': true,\n 'name': 'production_day_number',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.production_day_number.scoreboard_name',\n 'type': 'uint64'\n },\n 'production_metric_parent_event_id': {\n 'display_name': 'term.production_metric_parent_event_id.name',\n 'help_text': 'term.production_metric_parent_event_id.short',\n 'name': 'production_metric_parent_event_id',\n 'persist': true,\n 'reference': true,\n 'rollup': true,\n 'scoreboard_name': 'term.production_metric_parent_event_id.scoreboard_name',\n 'type': 'id'\n },\n 'record_id': {\n 'aggregation': 'max',\n 'display_name': 'term.record_id.name',\n 'help_text': 'term.record_id.short',\n 'name': 'record_id',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.record_id.scoreboard_name',\n 'type': 'id'\n },\n 'record_order': {\n 'aggregation': 'min',\n 'display_name': 'term.record_order.name',\n 'help_text': 'term.record_order.short',\n 'indexed': true,\n 'internal': true,\n 'name': 'record_order',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.record_order.scoreboard_name',\n 'type': 'id'\n },\n 'slice_order': {\n 'display_name': 'term.slice_order.name',\n 'help_text': 'term.slice_order.short',\n 'indexed': true,\n 'internal': true,\n 'name': 'slice_order',\n 'persist': true,\n 'reference': true,\n 'rollup': true,\n 'scoreboard_name': 'term.slice_order.scoreboard_name',\n 'type': 'id'\n },\n 'sync_id': {\n 'aggregation': 'sync_id',\n 'display_name': 'term.sync_id.name',\n 'help_text': 'term.sync_id.short',\n 'indexed': true,\n 'internal': true,\n 'name': 'sync_id',\n 'rollup': true,\n 'scoreboard_name': 'term.sync_id.scoreboard_name',\n 'type': 'id'\n },\n 'time': {\n 'classification': 'miscellaneous',\n 'display_name': 'term.time.name',\n 'help_text': 'term.time.short',\n 'name': 'time',\n 'rollup': true,\n 'scoreboard_name': 'term.time.scoreboard_name',\n 'type': 'date_time'\n }\n },\n 'name': 'diagnostic',\n 'primary_key': 'record_id'\n },\n 'hour': {\n 'display_name': 'hour_channel_literal',\n 'name': 'hour',\n 'projecting_base': 'production_metric',\n 'protected': true\n },\n 'job': {\n 'display_name': 'job_channel_literal',\n 'name': 'job',\n 'projecting_base': 'production_metric'\n },\n 'month': {\n 'display_name': 'month_channel_literal',\n 'name': 'month',\n 'projecting_base': 'production_metric',\n 'protected': true\n },\n 'ordinal_shift': {\n 'display_name': 'ordinal_shift_channel_literal',\n 'name': 'ordinal_shift',\n 'projecting_base': 'production_metric',\n 'protected': true\n },\n 'part': {\n 'display_name': 'part_channel_literal',\n 'name': 'part',\n 'projecting_base': 'production_metric'\n },\n 'process_state': {\n 'display_name': 'process_state_channel_literal',\n 'name': 'process_state',\n 'projecting_base': 'production_metric',\n 'protected': true\n },\n 'production_day': {\n 'display_name': 'production_day_channel_literal',\n 'name': 'production_day',\n 'projecting_base': 'production_metric',\n 'protected': true\n },\n 'production_metric': {\n 'annotations': {\n 'job_display_name': {\n 'display_name': 'term.job_display_name.name',\n 'help_text': 'term.job_display_name.short',\n 'name': 'job_display_name',\n 'scoreboard_name': 'term.job_display_name.scoreboard_name'\n },\n 'part_display_name': {\n 'display_name': 'term.part_display_name.name',\n 'help_text': 'term.part_display_name.short',\n 'name': 'part_display_name',\n 'scoreboard_name': 'term.part_display_name.scoreboard_name'\n },\n 'process_state_reason_display_name': {\n 'display_name': 'term.process_state_reason_display_name.name',\n 'help_text': 'term.process_state_reason_display_name.short',\n 'name': 'process_state_reason_display_name',\n 'scoreboard_name': 'term.process_state_reason_display_name.scoreboard_name'\n },\n 'shift_display_name': {\n 'display_name': 'term.shift_display_name.name',\n 'help_text': 'term.shift_display_name.short',\n 'name': 'shift_display_name',\n 'scoreboard_name': 'term.shift_display_name.scoreboard_name'\n },\n 'team_display_name': {\n 'display_name': 'term.team_display_name.name',\n 'help_text': 'term.team_display_name.short',\n 'name': 'team_display_name',\n 'scoreboard_name': 'term.team_display_name.scoreboard_name'\n }\n },\n 'category_values': {\n 'calendar_day': {\n 'category': 'calendar_day',\n 'display_name': 'term.calendar_day.name',\n 'help_text': 'term.calendar_day.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'calendar_day',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.calendar_day.scoreboard_name'\n },\n 'hour': {\n 'category': 'hour',\n 'display_name': 'term.hour.name',\n 'help_text': 'term.hour.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'hour',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.hour.scoreboard_name'\n },\n 'information_source': {\n 'category': 'information_source',\n 'display_name': 'term.information_source.name',\n 'help_text': 'term.information_source.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'information_source',\n 'persist': true,\n 'projecting_source': 'process_state',\n 'rollup': true,\n 'scoreboard_name': 'term.information_source.scoreboard_name'\n },\n 'job': {\n 'category': 'job',\n 'display_name': 'term.job.name',\n 'help_text': 'term.job.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'job',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.job.scoreboard_name'\n },\n 'month': {\n 'category': 'month',\n 'display_name': 'term.month.name',\n 'help_text': 'term.month.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'month',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.month.scoreboard_name'\n },\n 'ordinal_shift': {\n 'category': 'ordinal_shift',\n 'display_name': 'term.ordinal_shift.name',\n 'help_text': 'term.ordinal_shift.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'ordinal_shift',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.ordinal_shift.scoreboard_name'\n },\n 'part': {\n 'category': 'part',\n 'display_name': 'term.part.name',\n 'help_text': 'term.part.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'part',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.part.scoreboard_name'\n },\n 'performance_impact': {\n 'category': 'performance_impact',\n 'display_name': 'term.performance_impact.name',\n 'help_text': 'term.performance_impact.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'performance_impact',\n 'persist': true,\n 'projecting_source': 'process_state',\n 'rollup': true,\n 'scoreboard_name': 'term.performance_impact.scoreboard_name'\n },\n 'process_state': {\n 'category': 'process_state',\n 'display_name': 'term.process_state.name',\n 'help_text': 'term.process_state.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'process_state',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.process_state.scoreboard_name'\n },\n 'process_state_reason': {\n 'category': 'process_state_reason',\n 'display_name': 'term.process_state_reason.name',\n 'help_text': 'term.process_state_reason.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'process_state_reason',\n 'persist': true,\n 'projecting_source': 'process_state',\n 'rollup': true,\n 'scoreboard_name': 'term.process_state_reason.scoreboard_name'\n },\n 'production_day': {\n 'category': 'production_day',\n 'display_name': 'term.production_day.name',\n 'help_text': 'term.production_day.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'production_day',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.production_day.scoreboard_name'\n },\n 'production_phase': {\n 'category': 'production_phase',\n 'display_name': 'term.production_phase.name',\n 'help_text': 'term.production_phase.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'production_phase',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.production_phase.scoreboard_name'\n },\n 'quarter': {\n 'category': 'quarter',\n 'display_name': 'term.quarter.name',\n 'help_text': 'term.quarter.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'quarter',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.quarter.scoreboard_name'\n },\n 'shift': {\n 'category': 'shift',\n 'display_name': 'term.shift.name',\n 'help_text': 'term.shift.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'shift',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.shift.scoreboard_name'\n },\n 'shift_hour': {\n 'category': 'shift_hour',\n 'display_name': 'term.shift_hour.name',\n 'help_text': 'term.shift_hour.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'shift_hour',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.shift_hour.scoreboard_name'\n },\n 'team': {\n 'category': 'team',\n 'display_name': 'term.team.name',\n 'help_text': 'term.team.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'team',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.team.scoreboard_name'\n },\n 'week': {\n 'category': 'week',\n 'display_name': 'term.week.name',\n 'help_text': 'term.week.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'week',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.week.scoreboard_name'\n },\n 'year': {\n 'category': 'year',\n 'display_name': 'term.year.name',\n 'help_text': 'term.year.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'year',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.year.scoreboard_name'\n }\n },\n 'display_name': 'production_metric_channel_literal',\n 'is_slicing_parent': true,\n 'metrics': {\n 'all_time': {\n 'aggregation': 'none',\n 'classification': 'production_times',\n 'display_name': 'term.all_time.name',\n 'formula': 'production_time + not_scheduled_time',\n 'help_text': 'term.all_time.short',\n 'name': 'all_time',\n 'rollup': true,\n 'scoreboard_name': 'term.all_time.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'availability': {\n 'aggregation': 'none',\n 'classification': 'oee',\n 'display_name': 'term.availability.name',\n 'formula': 'run_time / production_time',\n 'help_text': 'term.availability.short',\n 'increasing_is': 'good',\n 'name': 'availability',\n 'rollup': true,\n 'scoreboard_name': 'term.availability.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'availability_loss': {\n 'aggregation': 'none',\n 'classification': 'oee',\n 'display_name': 'term.availability_loss.name',\n 'formula': '1 - availability',\n 'help_text': 'term.availability_loss.short',\n 'increasing_is': 'bad',\n 'name': 'availability_loss',\n 'rollup': true,\n 'scoreboard_name': 'term.availability_loss.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'availability_lost_time': {\n 'aggregation': 'none',\n 'classification': 'oee',\n 'display_name': 'term.availability_lost_time.name',\n 'formula': 'availability_loss * production_time',\n 'help_text': 'term.availability_lost_time.short',\n 'increasing_is': 'bad',\n 'name': 'availability_lost_time',\n 'rollup': true,\n 'scoreboard_name': 'term.availability_lost_time.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'availability_or_zero': {\n 'aggregation': 'none',\n 'classification': 'oee',\n 'display_name': 'term.availability_or_zero.name',\n 'formula': 'zero_null(availability)',\n 'help_text': 'term.availability_or_zero.short',\n 'increasing_is': 'good',\n 'internal': true,\n 'name': 'availability_or_zero',\n 'rollup': true,\n 'scoreboard_name': 'term.availability_or_zero.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'average_cycle_time': {\n 'aggregation': 'none',\n 'classification': 'cycles',\n 'display_name': 'term.average_cycle_time.name',\n 'formula': 'total_cycle_time / total_cycles',\n 'help_text': 'term.average_cycle_time.short',\n 'increasing_is': 'bad',\n 'name': 'average_cycle_time',\n 'rollup': true,\n 'scoreboard_name': 'term.average_cycle_time.scoreboard_name',\n 'subtype': 'cycle_time',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'average_ideal_cycle_time': {\n 'aggregation': 'none',\n 'classification': 'cycles',\n 'display_name': 'term.average_ideal_cycle_time.name',\n 'formula': 'ideal_time / total_cycles',\n 'help_text': 'term.average_ideal_cycle_time.short',\n 'name': 'average_ideal_cycle_time',\n 'rollup': true,\n 'scoreboard_name': 'term.average_ideal_cycle_time.scoreboard_name',\n 'subtype': 'cycle_time',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'average_run_cycle_time': {\n 'aggregation': 'none',\n 'classification': 'cycles',\n 'display_name': 'term.average_run_cycle_time.name',\n 'formula': '(ideal_time / (partial_cycles + run_cycles + small_stops)) + (run_cycle_lost_time / run_cycles)',\n 'help_text': 'term.average_run_cycle_time.short',\n 'name': 'average_run_cycle_time',\n 'rollup': true,\n 'scoreboard_name': 'term.average_run_cycle_time.scoreboard_name',\n 'subtype': 'cycle_time',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'average_small_stop_time': {\n 'aggregation': 'none',\n 'classification': 'cycles',\n 'display_name': 'term.average_small_stop_time.name',\n 'formula': '(ideal_time / (partial_cycles + run_cycles + small_stops)) + (small_stop_lost_time / small_stops)',\n 'help_text': 'term.average_small_stop_time.short',\n 'increasing_is': 'bad',\n 'name': 'average_small_stop_time',\n 'rollup': true,\n 'scoreboard_name': 'term.average_small_stop_time.scoreboard_name',\n 'subtype': 'cycle_time',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'average_takt_time': {\n 'aggregation': 'none',\n 'classification': 'target',\n 'display_name': 'term.average_takt_time.name',\n 'formula': 'manufacturing_time / target_cycles',\n 'help_text': 'term.average_takt_time.short',\n 'name': 'average_takt_time',\n 'rollup': true,\n 'scoreboard_name': 'term.average_takt_time.scoreboard_name',\n 'subtype': 'cycle_time',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'average_team_size': {\n 'aggregation': 'none',\n 'classification': 'labor',\n 'display_name': 'term.average_team_size.name',\n 'formula': 'labor / production_time',\n 'help_text': 'term.average_team_size.short',\n 'name': 'average_team_size',\n 'rollup': true,\n 'scoreboard_name': 'term.average_team_size.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'calendar_day_event_id': {\n 'display_name': 'term.calendar_day_event_id.name',\n 'help_text': 'term.calendar_day_event_id.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'calendar_day_event_id',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.calendar_day_event_id.scoreboard_name',\n 'type': 'id'\n },\n 'calendar_day_number': {\n 'aggregation': 'none',\n 'classification': 'production_times',\n 'display_name': 'term.calendar_day_number.name',\n 'help_text': 'term.calendar_day_number.short',\n 'indexed': true,\n 'internal': true,\n 'name': 'calendar_day_number',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.calendar_day_number.scoreboard_name',\n 'type': 'uint64'\n },\n 'capacity_loss': {\n 'aggregation': 'none',\n 'classification': 'teep',\n 'display_name': 'term.capacity_loss.name',\n 'formula': '1 - utilization',\n 'help_text': 'term.capacity_loss.short',\n 'increasing_is': 'bad',\n 'name': 'capacity_loss',\n 'rollup': true,\n 'scoreboard_name': 'term.capacity_loss.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'capacity_lost_time': {\n 'aggregation': 'none',\n 'classification': 'teep',\n 'display_name': 'term.capacity_lost_time.name',\n 'formula': 'capacity_loss * all_time',\n 'help_text': 'term.capacity_lost_time.short',\n 'increasing_is': 'bad',\n 'name': 'capacity_lost_time',\n 'rollup': true,\n 'scoreboard_name': 'term.capacity_lost_time.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'count_variance': {\n 'aggregation': 'none',\n 'classification': 'target',\n 'display_name': 'term.count_variance.name',\n 'formula': 'good_count - target_count',\n 'help_text': 'term.count_variance.short',\n 'name': 'count_variance',\n 'rollup': true,\n 'scoreboard_name': 'term.count_variance.scoreboard_name',\n 'subtype': 'count',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'current_cycle_time': {\n 'classification': 'cycles',\n 'display_name': 'term.current_cycle_time.name',\n 'ephemeral': true,\n 'help_text': 'term.current_cycle_time.short',\n 'name': 'current_cycle_time',\n 'persist': true,\n 'rollup': false,\n 'scoreboard_name': 'term.current_cycle_time.scoreboard_name',\n 'subtype': 'cycle_time',\n 'type': 'time_span'\n },\n 'current_good_rate': {\n 'classification': 'rates',\n 'display_name': 'term.current_good_rate.name',\n 'ephemeral': true,\n 'help_text': 'term.current_good_rate.short',\n 'name': 'current_good_rate',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.current_good_rate.scoreboard_name',\n 'subtype': 'rate',\n 'type': 'double'\n },\n 'current_good_rate_per_hour': {\n 'classification': 'rates',\n 'display_name': 'term.current_good_rate_per_hour.name',\n 'ephemeral': true,\n 'help_text': 'term.current_good_rate_per_hour.short',\n 'name': 'current_good_rate_per_hour',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.current_good_rate_per_hour.scoreboard_name',\n 'subtype': 'rate_per_hour',\n 'type': 'double'\n },\n 'current_in_rate': {\n 'classification': 'rates',\n 'display_name': 'term.current_in_rate.name',\n 'ephemeral': true,\n 'help_text': 'term.current_in_rate.short',\n 'name': 'current_in_rate',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.current_in_rate.scoreboard_name',\n 'subtype': 'rate',\n 'type': 'double'\n },\n 'current_in_rate_per_hour': {\n 'classification': 'rates',\n 'display_name': 'term.current_in_rate_per_hour.name',\n 'ephemeral': true,\n 'help_text': 'term.current_in_rate_per_hour.short',\n 'name': 'current_in_rate_per_hour',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.current_in_rate_per_hour.scoreboard_name',\n 'subtype': 'rate_per_hour',\n 'type': 'double'\n },\n 'current_pack_out_rate': {\n 'classification': 'rates',\n 'display_name': 'term.current_pack_out_rate.name',\n 'ephemeral': true,\n 'help_text': 'term.current_pack_out_rate.short',\n 'name': 'current_pack_out_rate',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.current_pack_out_rate.scoreboard_name',\n 'subtype': 'rate',\n 'type': 'double'\n },\n 'current_pack_out_rate_per_hour': {\n 'classification': 'rates',\n 'display_name': 'term.current_pack_out_rate_per_hour.name',\n 'ephemeral': true,\n 'help_text': 'term.current_pack_out_rate_per_hour.short',\n 'name': 'current_pack_out_rate_per_hour',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.current_pack_out_rate_per_hour.scoreboard_name',\n 'subtype': 'rate_per_hour',\n 'type': 'double'\n },\n 'current_reject_rate': {\n 'classification': 'rates',\n 'display_name': 'term.current_reject_rate.name',\n 'ephemeral': true,\n 'help_text': 'term.current_reject_rate.short',\n 'name': 'current_reject_rate',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.current_reject_rate.scoreboard_name',\n 'subtype': 'rate',\n 'type': 'double'\n },\n 'current_reject_rate_per_hour': {\n 'classification': 'rates',\n 'display_name': 'term.current_reject_rate_per_hour.name',\n 'ephemeral': true,\n 'help_text': 'term.current_reject_rate_per_hour.short',\n 'name': 'current_reject_rate_per_hour',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.current_reject_rate_per_hour.scoreboard_name',\n 'subtype': 'rate_per_hour',\n 'type': 'double'\n },\n 'current_target_labor_per_piece': {\n 'classification': 'labor',\n 'display_name': 'term.current_target_labor_per_piece.name',\n 'ephemeral': true,\n 'help_text': 'term.current_target_labor_per_piece.short',\n 'name': 'current_target_labor_per_piece',\n 'persist': true,\n 'rollup': false,\n 'scoreboard_name': 'term.current_target_labor_per_piece.scoreboard_name',\n 'subtype': 'cycle_time',\n 'type': 'time_span'\n },\n 'current_total_rate': {\n 'classification': 'rates',\n 'display_name': 'term.current_total_rate.name',\n 'ephemeral': true,\n 'help_text': 'term.current_total_rate.short',\n 'name': 'current_total_rate',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.current_total_rate.scoreboard_name',\n 'subtype': 'rate',\n 'type': 'double'\n },\n 'current_total_rate_per_hour': {\n 'classification': 'rates',\n 'display_name': 'term.current_total_rate_per_hour.name',\n 'ephemeral': true,\n 'help_text': 'term.current_total_rate_per_hour.short',\n 'name': 'current_total_rate_per_hour',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.current_total_rate_per_hour.scoreboard_name',\n 'subtype': 'rate_per_hour',\n 'type': 'double'\n },\n 'cycle_loss': {\n 'aggregation': 'none',\n 'classification': 'six_big_losses',\n 'display_name': 'term.cycle_loss.name',\n 'formula': 'cycle_lost_time / production_time',\n 'help_text': 'term.cycle_loss.short',\n 'increasing_is': 'bad',\n 'name': 'cycle_loss',\n 'rollup': true,\n 'scoreboard_name': 'term.cycle_loss.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'cycle_lost_time': {\n 'aggregation': 'none',\n 'classification': 'six_big_losses',\n 'display_name': 'term.cycle_lost_time.name',\n 'formula': 'run_cycle_lost_time + partial_cycle_lost_time',\n 'help_text': 'term.cycle_lost_time.short',\n 'increasing_is': 'bad',\n 'name': 'cycle_lost_time',\n 'rollup': true,\n 'scoreboard_name': 'term.cycle_lost_time.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'down_loss': {\n 'aggregation': 'none',\n 'classification': 'six_big_losses',\n 'display_name': 'term.down_loss.name',\n 'formula': 'unplanned_stop_loss',\n 'help_text': 'term.down_loss.short',\n 'increasing_is': 'bad',\n 'name': 'down_loss',\n 'rollup': true,\n 'scoreboard_name': 'term.down_loss.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'down_lost_time': {\n 'aggregation': 'none',\n 'classification': 'six_big_losses',\n 'display_name': 'term.down_lost_time.name',\n 'formula': 'unplanned_stop_lost_time',\n 'help_text': 'term.down_lost_time.short',\n 'increasing_is': 'bad',\n 'name': 'down_lost_time',\n 'rollup': true,\n 'scoreboard_name': 'term.down_lost_time.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'down_time': {\n 'aggregation': 'none',\n 'classification': 'production_times',\n 'display_name': 'term.down_time.name',\n 'formula': 'unplanned_stop_time',\n 'help_text': 'term.down_time.short',\n 'increasing_is': 'bad',\n 'name': 'down_time',\n 'rollup': true,\n 'scoreboard_name': 'term.down_time.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'duration': {\n 'classification': 'production_times',\n 'display_name': 'term.duration.name',\n 'help_text': 'term.duration.short',\n 'name': 'duration',\n 'rollup': true,\n 'scoreboard_name': 'term.duration.scoreboard_name',\n 'type': 'time_span'\n },\n 'earned_labor': {\n 'classification': 'labor',\n 'display_name': 'term.earned_labor.name',\n 'help_text': 'term.earned_labor.short',\n 'name': 'earned_labor',\n 'rollup': true,\n 'scoreboard_name': 'term.earned_labor.scoreboard_name',\n 'type': 'time_span'\n },\n 'efficiency': {\n 'aggregation': 'none',\n 'classification': 'target',\n 'display_name': 'term.efficiency.name',\n 'formula': 'good_count / target_count',\n 'help_text': 'term.efficiency.short',\n 'increasing_is': 'good',\n 'name': 'efficiency',\n 'rollup': true,\n 'scoreboard_name': 'term.efficiency.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'elapsed_time': {\n 'classification': 'production_times',\n 'display_name': 'term.elapsed_time.name',\n 'ephemeral': true,\n 'help_text': 'term.elapsed_time.short',\n 'name': 'elapsed_time',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.elapsed_time.scoreboard_name',\n 'type': 'time_span'\n },\n 'end_time': {\n 'aggregation': 'datetime_max',\n 'classification': 'production_times',\n 'display_name': 'term.end_time.name',\n 'help_text': 'term.end_time.short',\n 'name': 'end_time',\n 'persist': true,\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': 'term.end_time.scoreboard_name',\n 'type': 'date_time'\n },\n 'equipment_cycles': {\n 'classification': 'cycles',\n 'display_name': 'term.equipment_cycles.name',\n 'help_text': 'term.equipment_cycles.short',\n 'name': 'equipment_cycles',\n 'rollup': true,\n 'scoreboard_name': 'term.equipment_cycles.scoreboard_name',\n 'type': 'uint64'\n },\n 'event_efficiency': {\n 'aggregation': 'none',\n 'classification': 'production_times',\n 'display_name': 'term.event_efficiency.name',\n 'formula': 'event_target / duration',\n 'help_text': 'term.event_efficiency.short',\n 'increasing_is': 'good',\n 'internal': true,\n 'name': 'event_efficiency',\n 'rollup': true,\n 'scoreboard_name': 'term.event_efficiency.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'event_id': {\n 'display_name': 'term.event_id.name',\n 'help_text': 'term.event_id.short',\n 'indexed': true,\n 'internal': true,\n 'name': 'event_id',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.event_id.scoreboard_name',\n 'type': 'id'\n },\n 'event_target': {\n 'classification': 'production_times',\n 'display_name': 'term.event_target.name',\n 'help_text': 'term.event_target.short',\n 'internal': true,\n 'name': 'event_target',\n 'rollup': true,\n 'scoreboard_name': 'term.event_target.scoreboard_name',\n 'type': 'time_span'\n },\n 'event_time_variance': {\n 'aggregation': 'none',\n 'classification': 'production_times',\n 'display_name': 'term.event_time_variance.name',\n 'formula': 'event_target - duration',\n 'help_text': 'term.event_time_variance.short',\n 'internal': true,\n 'name': 'event_time_variance',\n 'rollup': true,\n 'scoreboard_name': 'term.event_time_variance.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'event_variance': {\n 'aggregation': 'none',\n 'classification': 'production_times',\n 'display_name': 'term.event_variance.name',\n 'formula': '(event_target - duration) / event_target',\n 'help_text': 'term.event_variance.short',\n 'internal': true,\n 'name': 'event_variance',\n 'rollup': true,\n 'scoreboard_name': 'term.event_variance.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'fully_productive_time': {\n 'aggregation': 'none',\n 'classification': 'oee',\n 'display_name': 'term.fully_productive_time.name',\n 'formula': 'ideal_time * (1 - zero_null(percent_reject))',\n 'help_text': 'term.fully_productive_time.short',\n 'increasing_is': 'good',\n 'name': 'fully_productive_time',\n 'rollup': true,\n 'scoreboard_name': 'term.fully_productive_time.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'goal_count': {\n 'classification': 'planning',\n 'display_name': 'term.goal_count.name',\n 'ephemeral': true,\n 'help_text': 'term.goal_count.short',\n 'name': 'goal_count',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.goal_count.scoreboard_name',\n 'subtype': 'count',\n 'type': 'double'\n },\n 'count': {\n 'comment': 'This is added to allow email templates to have a special count column that combines changeover and down events',\n 'classification': 'counts',\n 'display_name': 'config.counts.displayKey',\n 'name': 'count',\n 'rollup': true,\n 'subtype': 'count',\n 'type': 'double'\n },\n 'good_count': {\n 'classification': 'counts',\n 'display_name': 'term.good_count.name',\n 'help_text': 'term.good_count.short',\n 'name': 'good_count',\n 'rollup': true,\n 'scoreboard_name': 'term.good_count.scoreboard_name',\n 'subtype': 'count',\n 'type': 'double'\n },\n 'good_pieces_left': {\n 'classification': 'target',\n 'display_name': 'term.good_pieces_left.name',\n 'ephemeral': true,\n 'help_text': 'term.good_pieces_left.short',\n 'name': 'good_pieces_left',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.good_pieces_left.scoreboard_name',\n 'subtype': 'count',\n 'type': 'double'\n },\n 'good_pieces_per_labor_hour': {\n 'aggregation': 'none',\n 'classification': 'labor',\n 'display_name': 'term.good_pieces_per_labor_hour.name',\n 'formula': 'good_count / (labor / 3600)',\n 'help_text': 'term.good_pieces_per_labor_hour.short',\n 'increasing_is': 'good',\n 'name': 'good_pieces_per_labor_hour',\n 'rollup': true,\n 'scoreboard_name': 'term.good_pieces_per_labor_hour.scoreboard_name',\n 'subtype': 'rate',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'good_rate': {\n 'aggregation': 'none',\n 'classification': 'rates',\n 'display_name': 'term.good_rate.name',\n 'formula': 'good_count / manufacturing_time * 60',\n 'help_text': 'term.good_rate.short',\n 'name': 'good_rate',\n 'rollup': true,\n 'scoreboard_name': 'term.good_rate.scoreboard_name',\n 'subtype': 'rate',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'good_rate_per_hour': {\n 'aggregation': 'none',\n 'classification': 'rates',\n 'display_name': 'term.good_rate_per_hour.name',\n 'formula': 'good_count / manufacturing_time * 3600',\n 'help_text': 'term.good_rate_per_hour.short',\n 'name': 'good_rate_per_hour',\n 'rollup': true,\n 'scoreboard_name': 'term.good_rate_per_hour.scoreboard_name',\n 'subtype': 'rate_per_hour',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'good_speed': {\n 'aggregation': 'none',\n 'classification': 'rates',\n 'display_name': 'term.good_speed.name',\n 'formula': 'good_count / run_time * 60',\n 'help_text': 'term.good_speed.short',\n 'name': 'good_speed',\n 'rollup': true,\n 'scoreboard_name': 'term.good_speed.scoreboard_name',\n 'subtype': 'rate',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'good_speed_per_hour': {\n 'aggregation': 'none',\n 'classification': 'rates',\n 'display_name': 'term.good_speed_per_hour.name',\n 'formula': 'good_count / run_time * 3600',\n 'help_text': 'term.good_speed_per_hour.short',\n 'name': 'good_speed_per_hour',\n 'rollup': true,\n 'scoreboard_name': 'term.good_speed_per_hour.scoreboard_name',\n 'subtype': 'rate_per_hour',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'hidden_factory_time': {\n 'aggregation': 'none',\n 'classification': 'teep',\n 'display_name': 'term.hidden_factory_time.name',\n 'formula': 'capacity_lost_time + oee_lost_time',\n 'help_text': 'term.hidden_factory_time.short',\n 'increasing_is': 'bad',\n 'name': 'hidden_factory_time',\n 'rollup': true,\n 'scoreboard_name': 'term.hidden_factory_time.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'hour_event_id': {\n 'display_name': 'term.hour_event_id.name',\n 'help_text': 'term.hour_event_id.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'hour_event_id',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.hour_event_id.scoreboard_name',\n 'type': 'id'\n },\n 'ideal_cycle_time': {\n 'classification': 'cycles',\n 'display_name': 'term.ideal_cycle_time.name',\n 'ephemeral': true,\n 'help_text': 'term.ideal_cycle_time.short',\n 'name': 'ideal_cycle_time',\n 'persist': true,\n 'rollup': false,\n 'scoreboard_name': 'term.ideal_cycle_time.scoreboard_name',\n 'subtype': 'cycle_time',\n 'type': 'time_span'\n },\n 'ideal_time': {\n 'classification': 'cycles',\n 'display_name': 'term.ideal_time.name',\n 'help_text': 'term.ideal_time.short',\n 'name': 'ideal_time',\n 'rollup': true,\n 'scoreboard_name': 'term.ideal_time.scoreboard_name',\n 'type': 'time_span'\n },\n 'in_count': {\n 'classification': 'counts',\n 'display_name': 'term.in_count.name',\n 'help_text': 'term.in_count.short',\n 'name': 'in_count',\n 'rollup': true,\n 'scoreboard_name': 'term.in_count.scoreboard_name',\n 'subtype': 'count',\n 'type': 'double'\n },\n 'in_rate': {\n 'aggregation': 'none',\n 'classification': 'rates',\n 'display_name': 'term.in_rate.name',\n 'formula': 'in_count / manufacturing_time * 60',\n 'help_text': 'term.in_rate.short',\n 'name': 'in_rate',\n 'rollup': true,\n 'scoreboard_name': 'term.in_rate.scoreboard_name',\n 'subtype': 'rate',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'in_rate_per_hour': {\n 'aggregation': 'none',\n 'classification': 'rates',\n 'display_name': 'term.in_rate_per_hour.name',\n 'formula': 'in_count / manufacturing_time * 3600',\n 'help_text': 'term.in_rate_per_hour.short',\n 'name': 'in_rate_per_hour',\n 'rollup': true,\n 'scoreboard_name': 'term.in_rate_per_hour.scoreboard_name',\n 'subtype': 'rate_per_hour',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'in_speed': {\n 'aggregation': 'none',\n 'classification': 'rates',\n 'display_name': 'term.in_speed.name',\n 'formula': 'in_count / run_time * 60',\n 'help_text': 'term.in_speed.short',\n 'name': 'in_speed',\n 'rollup': true,\n 'scoreboard_name': 'term.in_speed.scoreboard_name',\n 'subtype': 'rate',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'in_speed_per_hour': {\n 'aggregation': 'none',\n 'classification': 'rates',\n 'display_name': 'term.in_speed_per_hour.name',\n 'formula': 'in_count / run_time * 3600',\n 'help_text': 'term.in_speed_per_hour.short',\n 'name': 'in_speed_per_hour',\n 'rollup': true,\n 'scoreboard_name': 'term.in_speed_per_hour.scoreboard_name',\n 'subtype': 'rate_per_hour',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'job_event_id': {\n 'display_name': 'term.job_event_id.name',\n 'help_text': 'term.job_event_id.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'job_event_id',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.job_event_id.scoreboard_name',\n 'type': 'id'\n },\n 'job_null_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'job_null_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Job',\n 'category_value': 'No Job'\n },\n 'type': 'id'\n },\n 'job_null_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'job_null_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Job',\n 'category_value': 'No Job'\n },\n 'type': 'double'\n },\n 'job_occurrences': {\n 'display_name': 'term.job_occurrences.name',\n 'help_text': 'term.job_occurrences.short',\n 'internal': true,\n 'name': 'job_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': 'term.job_occurrences.scoreboard_name',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Job'\n },\n 'type': 'double'\n },\n 'job_unknown_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'job_unknown_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Job',\n 'category_value': 'Unknown Job'\n },\n 'type': 'id'\n },\n 'job_unknown_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'job_unknown_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Job',\n 'category_value': 'Unknown Job'\n },\n 'type': 'double'\n },\n 'labor': {\n 'classification': 'labor',\n 'display_name': 'term.labor.name',\n 'help_text': 'term.labor.short',\n 'name': 'labor',\n 'rollup': true,\n 'scoreboard_name': 'term.labor.scoreboard_name',\n 'type': 'time_span'\n },\n 'labor_efficiency': {\n 'aggregation': 'none',\n 'classification': 'labor',\n 'display_name': 'term.labor_efficiency.name',\n 'formula': 'earned_labor / labor',\n 'help_text': 'term.labor_efficiency.short',\n 'increasing_is': 'good',\n 'name': 'labor_efficiency',\n 'rollup': true,\n 'scoreboard_name': 'term.labor_efficiency.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'labor_per_good_piece': {\n 'aggregation': 'none',\n 'classification': 'labor',\n 'display_name': 'term.labor_per_good_piece.name',\n 'formula': 'labor / good_count',\n 'help_text': 'term.labor_per_good_piece.short',\n 'increasing_is': 'bad',\n 'name': 'labor_per_good_piece',\n 'rollup': true,\n 'scoreboard_name': 'term.labor_per_good_piece.scoreboard_name',\n 'subtype': 'cycle_time',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'labor_per_piece': {\n 'aggregation': 'none',\n 'classification': 'labor',\n 'display_name': 'term.labor_per_piece.name',\n 'formula': 'labor / total_count',\n 'help_text': 'term.labor_per_piece.short',\n 'increasing_is': 'bad',\n 'name': 'labor_per_piece',\n 'rollup': true,\n 'scoreboard_name': 'term.labor_per_piece.scoreboard_name',\n 'subtype': 'cycle_time',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'last_down_time': {\n 'classification': 'production_times',\n 'display_name': 'term.last_down_time.name',\n 'ephemeral': true,\n 'help_text': 'term.last_down_time.short',\n 'name': 'last_down_time',\n 'persist': true,\n 'rollup': false,\n 'scoreboard_name': 'term.last_down_time.scoreboard_name',\n 'type': 'time_span'\n },\n 'last_not_scheduled_time': {\n 'classification': 'production_times',\n 'display_name': 'term.last_not_scheduled_time.name',\n 'ephemeral': true,\n 'help_text': 'term.last_not_scheduled_time.short',\n 'name': 'last_not_scheduled_time',\n 'persist': true,\n 'rollup': false,\n 'scoreboard_name': 'term.last_not_scheduled_time.scoreboard_name',\n 'type': 'time_span'\n },\n 'last_planned_stop_time': {\n 'classification': 'production_times',\n 'display_name': 'term.last_planned_stop_time.name',\n 'ephemeral': true,\n 'help_text': 'term.last_planned_stop_time.short',\n 'name': 'last_planned_stop_time',\n 'persist': true,\n 'rollup': false,\n 'scoreboard_name': 'term.last_planned_stop_time.scoreboard_name',\n 'type': 'time_span'\n },\n 'last_run_time': {\n 'classification': 'production_times',\n 'display_name': 'term.last_run_time.name',\n 'ephemeral': true,\n 'help_text': 'term.last_run_time.short',\n 'name': 'last_run_time',\n 'persist': true,\n 'rollup': false,\n 'scoreboard_name': 'term.last_run_time.scoreboard_name',\n 'type': 'time_span'\n },\n 'last_unplanned_stop_time': {\n 'classification': 'production_times',\n 'display_name': 'term.last_unplanned_stop_time.name',\n 'ephemeral': true,\n 'help_text': 'term.last_unplanned_stop_time.short',\n 'name': 'last_unplanned_stop_time',\n 'persist': true,\n 'rollup': false,\n 'scoreboard_name': 'term.last_unplanned_stop_time.scoreboard_name',\n 'type': 'time_span'\n },\n 'lost_labor': {\n 'aggregation': 'none',\n 'classification': 'labor',\n 'display_name': 'term.lost_labor.name',\n 'formula': 'labor - earned_labor',\n 'help_text': 'term.lost_labor.short',\n 'name': 'lost_labor',\n 'rollup': true,\n 'scoreboard_name': 'term.lost_labor.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'manufacturing_time': {\n 'aggregation': 'none',\n 'classification': 'production_times',\n 'display_name': 'term.manufacturing_time.name',\n 'formula': 'run_time + unplanned_stop_time',\n 'help_text': 'term.manufacturing_time.short',\n 'name': 'manufacturing_time',\n 'rollup': true,\n 'scoreboard_name': 'term.manufacturing_time.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'max_slice_order': {\n 'aggregation': 'none',\n 'display_name': 'term.max_slice_order.name',\n 'help_text': 'term.max_slice_order.short',\n 'internal': true,\n 'name': 'max_slice_order',\n 'rollup': false,\n 'scoreboard': false,\n 'scoreboard_name': 'term.max_slice_order.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'uint64'\n },\n 'min_slice_order': {\n 'aggregation': 'none',\n 'display_name': 'term.min_slice_order.name',\n 'help_text': 'term.min_slice_order.short',\n 'internal': true,\n 'name': 'min_slice_order',\n 'rollup': false,\n 'scoreboard': false,\n 'scoreboard_name': 'term.min_slice_order.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'uint64'\n },\n 'month_event_id': {\n 'display_name': 'term.month_event_id.name',\n 'help_text': 'term.month_event_id.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'month_event_id',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.month_event_id.scoreboard_name',\n 'type': 'id'\n },\n 'mtbf': {\n 'aggregation': 'none',\n 'classification': 'mean_times',\n 'display_name': 'term.mtbf.name',\n 'formula': 'run_time / process_state_down_occurrences',\n 'help_text': 'term.mtbf.short',\n 'increasing_is': 'good',\n 'name': 'mtbf',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': 'term.mtbf.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'mttr': {\n 'aggregation': 'none',\n 'classification': 'mean_times',\n 'display_name': 'term.mttr.name',\n 'formula': 'unplanned_stop_time / process_state_down_occurrences',\n 'help_text': 'term.mttr.short',\n 'increasing_is': 'bad',\n 'name': 'mttr',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': 'term.mttr.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'not_scheduled_time': {\n 'classification': 'production_times',\n 'display_name': 'term.not_scheduled_time.name',\n 'help_text': 'term.not_scheduled_time.short',\n 'name': 'not_scheduled_time',\n 'rollup': true,\n 'scoreboard_name': 'term.not_scheduled_time.scoreboard_name',\n 'type': 'time_span'\n },\n 'oee': {\n 'aggregation': 'none',\n 'classification': 'oee',\n 'display_name': 'term.oee.name',\n 'formula': 'availability * performance_or_zero * quality_or_zero',\n 'help_text': 'term.oee.short',\n 'increasing_is': 'good',\n 'name': 'oee',\n 'rollup': true,\n 'scoreboard_name': 'term.oee.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'oee_loss': {\n 'aggregation': 'none',\n 'classification': 'oee',\n 'display_name': 'term.oee_loss.name',\n 'formula': '1 - oee',\n 'help_text': 'term.oee_loss.short',\n 'increasing_is': 'bad',\n 'name': 'oee_loss',\n 'rollup': true,\n 'scoreboard_name': 'term.oee_loss.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'oee_lost_time': {\n 'aggregation': 'none',\n 'classification': 'oee',\n 'display_name': 'term.oee_lost_time.name',\n 'formula': 'production_time - fully_productive_time',\n 'help_text': 'term.oee_lost_time.short',\n 'increasing_is': 'bad',\n 'name': 'oee_lost_time',\n 'rollup': true,\n 'scoreboard_name': 'term.oee_lost_time.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'ordinal_shift_event_id': {\n 'display_name': 'term.ordinal_shift_event_id.name',\n 'help_text': 'term.ordinal_shift_event_id.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'ordinal_shift_event_id',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.ordinal_shift_event_id.scoreboard_name',\n 'type': 'id'\n },\n 'pace_timer': {\n 'classification': 'target',\n 'display_name': 'term.pace_timer.name',\n 'ephemeral': true,\n 'help_text': 'term.pace_timer.short',\n 'name': 'pace_timer',\n 'rollup': false,\n 'scoreboard_name': 'term.pace_timer.scoreboard_name',\n 'type': 'time_span'\n },\n 'pack_out_count': {\n 'classification': 'counts',\n 'display_name': 'term.pack_out_count.name',\n 'help_text': 'term.pack_out_count.short',\n 'name': 'pack_out_count',\n 'rollup': true,\n 'scoreboard_name': 'term.pack_out_count.scoreboard_name',\n 'subtype': 'count',\n 'type': 'double'\n },\n 'pack_out_rate': {\n 'aggregation': 'none',\n 'classification': 'rates',\n 'display_name': 'term.pack_out_rate.name',\n 'formula': 'pack_out_count / manufacturing_time * 60',\n 'help_text': 'term.pack_out_rate.short',\n 'name': 'pack_out_rate',\n 'rollup': true,\n 'scoreboard_name': 'term.pack_out_rate.scoreboard_name',\n 'subtype': 'rate',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'pack_out_rate_per_hour': {\n 'aggregation': 'none',\n 'classification': 'rates',\n 'display_name': 'term.pack_out_rate_per_hour.name',\n 'formula': 'pack_out_count / manufacturing_time * 3600',\n 'help_text': 'term.pack_out_rate_per_hour.short',\n 'name': 'pack_out_rate_per_hour',\n 'rollup': true,\n 'scoreboard_name': 'term.pack_out_rate_per_hour.scoreboard_name',\n 'subtype': 'rate_per_hour',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'pack_out_speed': {\n 'aggregation': 'none',\n 'classification': 'rates',\n 'display_name': 'term.pack_out_speed.name',\n 'formula': 'pack_out_count / run_time * 60',\n 'help_text': 'term.pack_out_speed.short',\n 'name': 'pack_out_speed',\n 'rollup': true,\n 'scoreboard_name': 'term.pack_out_speed.scoreboard_name',\n 'subtype': 'rate',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'pack_out_speed_per_hour': {\n 'aggregation': 'none',\n 'classification': 'rates',\n 'display_name': 'term.pack_out_speed_per_hour.name',\n 'formula': 'pack_out_count / run_time * 3600',\n 'help_text': 'term.pack_out_speed_per_hour.short',\n 'name': 'pack_out_speed_per_hour',\n 'rollup': true,\n 'scoreboard_name': 'term.pack_out_speed_per_hour.scoreboard_name',\n 'subtype': 'rate_per_hour',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'part_event_id': {\n 'display_name': 'term.part_event_id.name',\n 'help_text': 'term.part_event_id.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'part_event_id',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.part_event_id.scoreboard_name',\n 'type': 'id'\n },\n 'part_null_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'part_null_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Part',\n 'category_value': 'No Part'\n },\n 'type': 'id'\n },\n 'part_null_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'part_null_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Part',\n 'category_value': 'No Part'\n },\n 'type': 'double'\n },\n 'part_occurrences': {\n 'display_name': 'term.part_occurrences.name',\n 'help_text': 'term.part_occurrences.short',\n 'internal': true,\n 'name': 'part_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': 'term.part_occurrences.scoreboard_name',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Part'\n },\n 'type': 'double'\n },\n 'part_sample_part_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'part_sample_part_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Part',\n 'category_value': 'Sample Part'\n },\n 'type': 'id'\n },\n 'part_sample_part_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'part_sample_part_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Part',\n 'category_value': 'Sample Part'\n },\n 'type': 'double'\n },\n 'part_unknown_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'part_unknown_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Part',\n 'category_value': 'Unknown Part'\n },\n 'type': 'id'\n },\n 'part_unknown_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'part_unknown_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Part',\n 'category_value': 'Unknown Part'\n },\n 'type': 'double'\n },\n 'partial_cycle_lost_time': {\n 'classification': 'cycles',\n 'display_name': 'term.partial_cycle_lost_time.name',\n 'help_text': 'term.partial_cycle_lost_time.short',\n 'name': 'partial_cycle_lost_time',\n 'rollup': true,\n 'scoreboard_name': 'term.partial_cycle_lost_time.scoreboard_name',\n 'type': 'time_span'\n },\n 'partial_cycles': {\n 'classification': 'cycles',\n 'display_name': 'term.partial_cycles.name',\n 'help_text': 'term.partial_cycles.short',\n 'name': 'partial_cycles',\n 'rollup': true,\n 'scoreboard_name': 'term.partial_cycles.scoreboard_name',\n 'subtype': 'cycle',\n 'type': 'double'\n },\n 'percent_done': {\n 'classification': 'planning',\n 'display_name': 'term.percent_done.name',\n 'ephemeral': true,\n 'help_text': 'term.percent_done.short',\n 'name': 'percent_done',\n 'persist': true,\n 'rollup': false,\n 'scoreboard_name': 'term.percent_done.scoreboard_name',\n 'subtype': 'percent',\n 'type': 'double'\n },\n 'percent_down': {\n 'aggregation': 'none',\n 'classification': 'production_times',\n 'display_name': 'term.percent_down.name',\n 'formula': 'percent_unplanned_stop',\n 'help_text': 'term.percent_down.short',\n 'increasing_is': 'bad',\n 'name': 'percent_down',\n 'rollup': true,\n 'scoreboard_name': 'term.percent_down.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'percent_good': {\n 'aggregation': 'none',\n 'classification': 'counts',\n 'display_name': 'term.percent_good.name',\n 'formula': 'good_count / total_count',\n 'help_text': 'term.percent_good.short',\n 'increasing_is': 'good',\n 'name': 'percent_good',\n 'rollup': true,\n 'scoreboard_name': 'term.percent_good.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'percent_good_or_zero': {\n 'aggregation': 'none',\n 'classification': 'counts',\n 'display_name': 'term.percent_good_or_zero.name',\n 'formula': 'zero_null(percent_good)',\n 'help_text': 'term.percent_good_or_zero.short',\n 'increasing_is': 'good',\n 'internal': true,\n 'name': 'percent_good_or_zero',\n 'rollup': true,\n 'scoreboard_name': 'term.percent_good_or_zero.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'percent_planned_stop': {\n 'aggregation': 'none',\n 'classification': 'production_times',\n 'display_name': 'term.percent_planned_stop.name',\n 'formula': 'planned_stop_time / production_time',\n 'help_text': 'term.percent_planned_stop.short',\n 'increasing_is': 'bad',\n 'name': 'percent_planned_stop',\n 'rollup': true,\n 'scoreboard_name': 'term.percent_planned_stop.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'percent_production_rejects_or_zero': {\n 'aggregation': 'none',\n 'classification': 'counts',\n 'display_name': 'term.percent_production_rejects_or_zero.name',\n 'formula': 'zero_null(production_rejects / total_count)',\n 'help_text': 'term.percent_production_rejects_or_zero.short',\n 'increasing_is': 'bad',\n 'internal': true,\n 'name': 'percent_production_rejects_or_zero',\n 'rollup': true,\n 'scoreboard_name': 'term.percent_production_rejects_or_zero.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'percent_reject': {\n 'aggregation': 'none',\n 'classification': 'counts',\n 'display_name': 'term.percent_reject.name',\n 'formula': 'reject_count / total_count',\n 'help_text': 'term.percent_reject.short',\n 'increasing_is': 'bad',\n 'name': 'percent_reject',\n 'rollup': true,\n 'scoreboard_name': 'term.percent_reject.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'percent_run': {\n 'aggregation': 'none',\n 'classification': 'production_times',\n 'display_name': 'term.percent_run.name',\n 'formula': 'run_time / production_time',\n 'help_text': 'term.percent_run.short',\n 'increasing_is': 'good',\n 'name': 'percent_run',\n 'rollup': true,\n 'scoreboard_name': 'term.percent_run.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'percent_startup_rejects_or_zero': {\n 'aggregation': 'none',\n 'classification': 'counts',\n 'display_name': 'term.percent_startup_rejects_or_zero.name',\n 'formula': 'zero_null(startup_rejects / total_count)',\n 'help_text': 'term.percent_startup_rejects_or_zero.short',\n 'increasing_is': 'bad',\n 'internal': true,\n 'name': 'percent_startup_rejects_or_zero',\n 'rollup': true,\n 'scoreboard_name': 'term.percent_startup_rejects_or_zero.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'percent_unplanned_stop': {\n 'aggregation': 'none',\n 'classification': 'production_times',\n 'display_name': 'term.percent_unplanned_stop.name',\n 'formula': 'unplanned_stop_time / production_time',\n 'help_text': 'term.percent_unplanned_stop.short',\n 'increasing_is': 'bad',\n 'name': 'percent_unplanned_stop',\n 'rollup': true,\n 'scoreboard_name': 'term.percent_unplanned_stop.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'percent_variance': {\n 'aggregation': 'none',\n 'classification': 'target',\n 'display_name': 'term.percent_variance.name',\n 'formula': 'count_variance / target_count',\n 'help_text': 'term.percent_variance.short',\n 'name': 'percent_variance',\n 'rollup': true,\n 'scoreboard_name': 'term.percent_variance.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'performance': {\n 'aggregation': 'none',\n 'classification': 'oee',\n 'display_name': 'term.performance.name',\n 'formula': 'ideal_time / run_time',\n 'help_text': 'term.performance.short',\n 'increasing_is': 'good',\n 'name': 'performance',\n 'rollup': true,\n 'scoreboard_name': 'term.performance.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'performance_loss': {\n 'aggregation': 'none',\n 'classification': 'oee',\n 'display_name': 'term.performance_loss.name',\n 'formula': '(1 - performance) * availability_or_zero',\n 'help_text': 'term.performance_loss.short',\n 'increasing_is': 'bad',\n 'name': 'performance_loss',\n 'rollup': true,\n 'scoreboard_name': 'term.performance_loss.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'performance_lost_time': {\n 'aggregation': 'none',\n 'classification': 'oee',\n 'display_name': 'term.performance_lost_time.name',\n 'formula': 'performance_loss * production_time',\n 'help_text': 'term.performance_lost_time.short',\n 'increasing_is': 'bad',\n 'name': 'performance_lost_time',\n 'rollup': true,\n 'scoreboard_name': 'term.performance_lost_time.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'performance_or_zero': {\n 'aggregation': 'none',\n 'classification': 'oee',\n 'display_name': 'term.performance_or_zero.name',\n 'formula': 'zero_null(performance)',\n 'help_text': 'term.performance_or_zero.short',\n 'increasing_is': 'good',\n 'internal': true,\n 'name': 'performance_or_zero',\n 'rollup': true,\n 'scoreboard_name': 'term.performance_or_zero.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'pieces_per_labor_hour': {\n 'aggregation': 'none',\n 'classification': 'labor',\n 'display_name': 'term.pieces_per_labor_hour.name',\n 'formula': 'total_count / (labor / 3600)',\n 'help_text': 'term.pieces_per_labor_hour.short',\n 'increasing_is': 'good',\n 'name': 'pieces_per_labor_hour',\n 'rollup': true,\n 'scoreboard_name': 'term.pieces_per_labor_hour.scoreboard_name',\n 'subtype': 'rate',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'planned_stop_loss': {\n 'aggregation': 'none',\n 'classification': 'six_big_losses',\n 'display_name': 'term.planned_stop_loss.name',\n 'formula': 'planned_stop_time / production_time',\n 'help_text': 'term.planned_stop_loss.short',\n 'increasing_is': 'bad',\n 'name': 'planned_stop_loss',\n 'rollup': true,\n 'scoreboard_name': 'term.planned_stop_loss.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'planned_stop_lost_time': {\n 'aggregation': 'none',\n 'classification': 'six_big_losses',\n 'display_name': 'term.planned_stop_lost_time.name',\n 'formula': 'planned_stop_time',\n 'help_text': 'term.planned_stop_lost_time.short',\n 'increasing_is': 'bad',\n 'name': 'planned_stop_lost_time',\n 'rollup': true,\n 'scoreboard_name': 'term.planned_stop_lost_time.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'planned_stop_time': {\n 'classification': 'production_times',\n 'display_name': 'term.planned_stop_time.name',\n 'help_text': 'term.planned_stop_time.short',\n 'increasing_is': 'bad',\n 'name': 'planned_stop_time',\n 'rollup': true,\n 'scoreboard_name': 'term.planned_stop_time.scoreboard_name',\n 'type': 'time_span'\n },\n 'previous_cycle_time': {\n 'classification': 'cycles',\n 'display_name': 'term.previous_cycle_time.name',\n 'ephemeral': true,\n 'help_text': 'term.previous_cycle_time.short',\n 'name': 'previous_cycle_time',\n 'persist': true,\n 'rollup': false,\n 'scoreboard_name': 'term.previous_cycle_time.scoreboard_name',\n 'subtype': 'cycle_time',\n 'type': 'time_span'\n },\n 'process_state_break_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_break_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'Meal/Break'\n },\n 'type': 'id'\n },\n 'process_state_break_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_break_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'Meal/Break'\n },\n 'type': 'double'\n },\n 'process_state_changeover_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_changeover_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'Changeover'\n },\n 'type': 'id'\n },\n 'process_state_changeover_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_changeover_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'Changeover'\n },\n 'type': 'double'\n },\n 'process_state_detecting_state_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_detecting_state_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'Detecting State'\n },\n 'type': 'id'\n },\n 'process_state_detecting_state_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_detecting_state_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'Detecting State'\n },\n 'type': 'double'\n },\n 'process_state_down_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_down_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'Down'\n },\n 'type': 'id'\n },\n 'process_state_down_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_down_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'Down'\n },\n 'type': 'double'\n },\n 'process_state_event_id': {\n 'display_name': 'term.process_state_event_id.name',\n 'help_text': 'term.process_state_event_id.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'process_state_event_id',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.process_state_event_id.scoreboard_name',\n 'type': 'id'\n },\n 'process_state_information_source_barcode_scan_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_information_source_barcode_scan_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Information Source',\n 'category_value': 'Barcode Scan'\n },\n 'type': 'id'\n },\n 'process_state_information_source_barcode_scan_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_information_source_barcode_scan_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Information Source',\n 'category_value': 'Barcode Scan'\n },\n 'type': 'double'\n },\n 'process_state_information_source_data_modification_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_information_source_data_modification_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Information Source',\n 'category_value': 'Data Modification'\n },\n 'type': 'id'\n },\n 'process_state_information_source_data_modification_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_information_source_data_modification_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Information Source',\n 'category_value': 'Data Modification'\n },\n 'type': 'double'\n },\n 'process_state_information_source_digital_input_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_information_source_digital_input_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Information Source',\n 'category_value': 'Digital Input'\n },\n 'type': 'id'\n },\n 'process_state_information_source_digital_input_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_information_source_digital_input_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Information Source',\n 'category_value': 'Digital Input'\n },\n 'type': 'double'\n },\n 'process_state_information_source_late_start_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_information_source_late_start_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Information Source',\n 'category_value': 'Time Schedule (Late Start)'\n },\n 'type': 'id'\n },\n 'process_state_information_source_late_start_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_information_source_late_start_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Information Source',\n 'category_value': 'Time Schedule (Late Start)'\n },\n 'type': 'double'\n },\n 'process_state_information_source_part_configuration_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_information_source_part_configuration_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Information Source',\n 'category_value': 'Part Configuration'\n },\n 'type': 'id'\n },\n 'process_state_information_source_part_configuration_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_information_source_part_configuration_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Information Source',\n 'category_value': 'Part Configuration'\n },\n 'type': 'double'\n },\n 'process_state_information_source_run_detector_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_information_source_run_detector_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Information Source',\n 'category_value': 'Run Detector'\n },\n 'type': 'id'\n },\n 'process_state_information_source_run_detector_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_information_source_run_detector_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Information Source',\n 'category_value': 'Run Detector'\n },\n 'type': 'double'\n },\n 'process_state_information_source_time_schedule_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_information_source_time_schedule_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Information Source',\n 'category_value': 'Time Schedule'\n },\n 'type': 'id'\n },\n 'process_state_information_source_time_schedule_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_information_source_time_schedule_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Information Source',\n 'category_value': 'Time Schedule'\n },\n 'type': 'double'\n },\n 'process_state_information_source_timer_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_information_source_timer_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Information Source',\n 'category_value': 'Timer'\n },\n 'type': 'id'\n },\n 'process_state_information_source_timer_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_information_source_timer_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Information Source',\n 'category_value': 'Timer'\n },\n 'type': 'double'\n },\n 'process_state_information_source_web_page_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_information_source_web_page_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Information Source',\n 'category_value': 'Web Page'\n },\n 'type': 'id'\n },\n 'process_state_information_source_web_page_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_information_source_web_page_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Information Source',\n 'category_value': 'Web Page'\n },\n 'type': 'double'\n },\n 'process_state_maintenance_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_maintenance_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'Maintenance'\n },\n 'type': 'id'\n },\n 'process_state_maintenance_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_maintenance_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'Maintenance'\n },\n 'type': 'double'\n },\n 'process_state_meeting_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_meeting_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'Meeting'\n },\n 'type': 'id'\n },\n 'process_state_meeting_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_meeting_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'Meeting'\n },\n 'type': 'double'\n },\n 'process_state_no_production_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_no_production_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'No Production'\n },\n 'type': 'id'\n },\n 'process_state_no_production_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_no_production_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'No Production'\n },\n 'type': 'double'\n },\n 'process_state_not_monitored_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_not_monitored_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'Not Monitored'\n },\n 'type': 'id'\n },\n 'process_state_not_monitored_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_not_monitored_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'Not Monitored'\n },\n 'type': 'double'\n },\n 'process_state_occurrences': {\n 'display_name': 'term.process_state_occurrences.name',\n 'help_text': 'term.process_state_occurrences.short',\n 'internal': true,\n 'name': 'process_state_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': 'term.process_state_occurrences.scoreboard_name',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Information Source'\n },\n 'type': 'double'\n },\n 'process_state_performance_impact_not_scheduled_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_performance_impact_not_scheduled_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Impact',\n 'category_value': 'Not Scheduled'\n },\n 'type': 'id'\n },\n 'process_state_performance_impact_not_scheduled_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_performance_impact_not_scheduled_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Impact',\n 'category_value': 'Not Scheduled'\n },\n 'type': 'double'\n },\n 'process_state_performance_impact_planned_stop_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_performance_impact_planned_stop_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Impact',\n 'category_value': 'Planned Stop'\n },\n 'type': 'id'\n },\n 'process_state_performance_impact_planned_stop_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_performance_impact_planned_stop_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Impact',\n 'category_value': 'Planned Stop'\n },\n 'type': 'double'\n },\n 'process_state_performance_impact_run_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_performance_impact_run_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Impact',\n 'category_value': 'Run'\n },\n 'type': 'id'\n },\n 'process_state_performance_impact_run_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_performance_impact_run_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Impact',\n 'category_value': 'Run'\n },\n 'type': 'double'\n },\n 'process_state_performance_impact_unplanned_stop_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_performance_impact_unplanned_stop_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Impact',\n 'category_value': 'Unplanned Stop'\n },\n 'type': 'id'\n },\n 'process_state_performance_impact_unplanned_stop_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_performance_impact_unplanned_stop_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Impact',\n 'category_value': 'Unplanned Stop'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_5s_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_5s_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': '5S'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_5s_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_5s_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': '5S'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_adjustment_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_adjustment_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Adjustment'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_adjustment_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_adjustment_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Adjustment'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_autonomous_maintenance_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_autonomous_maintenance_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Autonomous Maintenance'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_autonomous_maintenance_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_autonomous_maintenance_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Autonomous Maintenance'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_break_ended_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_break_ended_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Break Ended'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_break_ended_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_break_ended_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Break Ended'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_break_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_break_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Break'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_break_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_break_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Break'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_breakdown_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_breakdown_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Breakdown'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_breakdown_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_breakdown_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Breakdown'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_changeover_ended_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_changeover_ended_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Changeover Ended'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_changeover_ended_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_changeover_ended_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Changeover Ended'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_changeover_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_changeover_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Setup'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_changeover_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_changeover_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Setup'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_cleaning_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_cleaning_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Cleaning'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_cleaning_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_cleaning_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Cleaning'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_detecting_state_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_detecting_state_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Detecting State'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_detecting_state_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_detecting_state_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Detecting State'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_down_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_down_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Missing Reason'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_down_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_down_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Missing Reason'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_event_cleared_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_event_cleared_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Event Cleared'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_event_cleared_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_event_cleared_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Event Cleared'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_jam_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_jam_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Jam'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_jam_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_jam_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Jam'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_lubrication_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_lubrication_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Lubrication'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_lubrication_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_lubrication_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Lubrication'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_lunch_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_lunch_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Lunch'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_lunch_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_lunch_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Lunch'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_maintenance_ended_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_maintenance_ended_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Maintenance Ended'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_maintenance_ended_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_maintenance_ended_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Maintenance Ended'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_maintenance_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_maintenance_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'General Maintenance'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_maintenance_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_maintenance_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'General Maintenance'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_material_change_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_material_change_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Material Change'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_material_change_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_material_change_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Material Change'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_meeting_ended_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_meeting_ended_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Meeting Ended'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_meeting_ended_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_meeting_ended_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Meeting Ended'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_meeting_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_meeting_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Team Meeting'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_meeting_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_meeting_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Team Meeting'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_no_material_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_no_material_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'No Material'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_no_material_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_no_material_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'No Material'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_no_operator_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_no_operator_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'No Operator'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_no_operator_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_no_operator_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'No Operator'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_no_orders_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_no_orders_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'No Orders'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_no_orders_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_no_orders_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'No Orders'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_no_process_state_enabled_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_no_process_state_enabled_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'No State Enabled'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_no_process_state_enabled_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_no_process_state_enabled_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'No State Enabled'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_no_production_ended_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_no_production_ended_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'No Production Ended'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_no_production_ended_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_no_production_ended_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'No Production Ended'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_no_production_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_no_production_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'No Shift Scheduled'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_no_production_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_no_production_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'No Shift Scheduled'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_not_monitored_ended_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_not_monitored_ended_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Not Monitored Ended'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_not_monitored_ended_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_not_monitored_ended_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Not Monitored Ended'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_not_monitored_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_not_monitored_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Not Monitored'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_not_monitored_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_not_monitored_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Not Monitored'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_optional_shift_scheduled_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_optional_shift_scheduled_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Optional Shift Scheduled'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_optional_shift_scheduled_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_optional_shift_scheduled_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Optional Shift Scheduled'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_part_change_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_part_change_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Part Change'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_part_change_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_part_change_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Part Change'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_powered_off_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_powered_off_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Powered Off'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_powered_off_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_powered_off_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Powered Off'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_production_rejects_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_production_rejects_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Production Rejects'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_production_rejects_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_production_rejects_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Production Rejects'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_running_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_running_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Running Normally'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_running_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_running_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Running Normally'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_running_poor_quality_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_running_poor_quality_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Running Poor Quality'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_running_poor_quality_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_running_poor_quality_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Running Poor Quality'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_running_poorly_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_running_poorly_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Slow w/ Poor Quality'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_running_poorly_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_running_poorly_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Slow w/ Poor Quality'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_running_slow_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_running_slow_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Slow and/or Small Stops'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_running_slow_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_running_slow_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Slow and/or Small Stops'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_safety_meeting_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_safety_meeting_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Safety Meeting'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_safety_meeting_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_safety_meeting_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Safety Meeting'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_shift_ended_early_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_shift_ended_early_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Shift Ended Early'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_shift_ended_early_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_shift_ended_early_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Shift Ended Early'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_shift_handover_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_shift_handover_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Shift Handover'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_shift_handover_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_shift_handover_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Shift Handover'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_startup_rejects_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_startup_rejects_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Startup Rejects'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_startup_rejects_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_startup_rejects_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Startup Rejects'\n },\n 'type': 'double'\n },\n 'process_state_process_state_reason_upgrading_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_upgrading_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Upgrading'\n },\n 'type': 'id'\n },\n 'process_state_process_state_reason_upgrading_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_process_state_reason_upgrading_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Reason',\n 'category_value': 'Upgrading'\n },\n 'type': 'double'\n },\n 'process_state_remaining_time': {\n 'classification': 'production_times',\n 'display_name': 'term.process_state_remaining_time.name',\n 'ephemeral': true,\n 'help_text': 'term.process_state_remaining_time.short',\n 'name': 'process_state_remaining_time',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.process_state_remaining_time.scoreboard_name',\n 'type': 'time_span'\n },\n 'process_state_running_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_running_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'Running'\n },\n 'type': 'id'\n },\n 'process_state_running_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_running_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'Running'\n },\n 'type': 'double'\n },\n 'process_state_running_poor_quality_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_running_poor_quality_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'Running Poor Quality'\n },\n 'type': 'id'\n },\n 'process_state_running_poor_quality_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_running_poor_quality_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'Running Poor Quality'\n },\n 'type': 'double'\n },\n 'process_state_running_poorly_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_running_poorly_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'Running Poorly'\n },\n 'type': 'id'\n },\n 'process_state_running_poorly_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_running_poorly_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'Running Poorly'\n },\n 'type': 'double'\n },\n 'process_state_running_slow_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_running_slow_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'Running Slow'\n },\n 'type': 'id'\n },\n 'process_state_running_slow_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'process_state_running_slow_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Production State',\n 'category_value': 'Running Slow'\n },\n 'type': 'double'\n },\n 'production_day_event_id': {\n 'display_name': 'term.production_day_event_id.name',\n 'help_text': 'term.production_day_event_id.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'production_day_event_id',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.production_day_event_id.scoreboard_name',\n 'type': 'id'\n },\n 'production_day_number': {\n 'aggregation': 'none',\n 'classification': 'production_times',\n 'display_name': 'term.production_day_number.name',\n 'help_text': 'term.production_day_number.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'internal': true,\n 'name': 'production_day_number',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.production_day_number.scoreboard_name',\n 'type': 'uint64'\n },\n 'production_loss': {\n 'aggregation': 'none',\n 'classification': 'teep',\n 'display_name': 'term.production_loss.name',\n 'formula': ' 1 - teep - capacity_loss',\n 'help_text': 'term.production_loss.short',\n 'increasing_is': 'bad',\n 'name': 'production_loss',\n 'rollup': true,\n 'scoreboard_name': 'term.production_loss.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'production_lost_time': {\n 'aggregation': 'none',\n 'classification': 'teep',\n 'display_name': 'term.production_lost_time.name',\n 'formula': 'oee_lost_time',\n 'help_text': 'term.production_lost_time.short',\n 'increasing_is': 'bad',\n 'name': 'production_lost_time',\n 'rollup': true,\n 'scoreboard_name': 'term.production_lost_time.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'production_phase_changeover_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'production_phase_changeover_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Production Phase',\n 'category_value': 'Changeover'\n },\n 'type': 'id'\n },\n 'production_phase_changeover_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'production_phase_changeover_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Production Phase',\n 'category_value': 'Changeover'\n },\n 'type': 'double'\n },\n 'production_phase_event_id': {\n 'display_name': 'term.production_phase_event_id.name',\n 'help_text': 'term.production_phase_event_id.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'production_phase_event_id',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.production_phase_event_id.scoreboard_name',\n 'type': 'id'\n },\n 'production_phase_null_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'production_phase_null_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Production Phase',\n 'category_value': 'No Part'\n },\n 'type': 'id'\n },\n 'production_phase_null_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'production_phase_null_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Production Phase',\n 'category_value': 'No Part'\n },\n 'type': 'double'\n },\n 'production_phase_occurrences': {\n 'display_name': 'term.production_phase_occurrences.name',\n 'help_text': 'term.production_phase_occurrences.short',\n 'internal': true,\n 'name': 'production_phase_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': 'term.production_phase_occurrences.scoreboard_name',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Production Phase'\n },\n 'type': 'double'\n },\n 'production_phase_remaining_time': {\n 'classification': 'production_times',\n 'display_name': 'term.production_phase_remaining_time.name',\n 'ephemeral': true,\n 'help_text': 'term.production_phase_remaining_time.short',\n 'internal': true,\n 'name': 'production_phase_remaining_time',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.production_phase_remaining_time.scoreboard_name',\n 'type': 'time_span'\n },\n 'production_phase_startup_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'production_phase_startup_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Production Phase',\n 'category_value': 'Startup'\n },\n 'type': 'id'\n },\n 'production_phase_startup_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'production_phase_startup_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Production Phase',\n 'category_value': 'Startup'\n },\n 'type': 'double'\n },\n 'production_phase_steady_state_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'production_phase_steady_state_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Production Phase',\n 'category_value': 'Steady-State'\n },\n 'type': 'id'\n },\n 'production_phase_steady_state_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'production_phase_steady_state_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Production Phase',\n 'category_value': 'Steady-State'\n },\n 'type': 'double'\n },\n 'production_reject_loss': {\n 'aggregation': 'none',\n 'classification': 'six_big_losses',\n 'display_name': 'term.production_reject_loss.name',\n 'formula': 'percent_production_rejects_or_zero * availability_or_zero * performance_or_zero',\n 'help_text': 'term.production_reject_loss.short',\n 'increasing_is': 'bad',\n 'name': 'production_reject_loss',\n 'rollup': true,\n 'scoreboard_name': 'term.production_reject_loss.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'production_reject_loss_or_zero': {\n 'aggregation': 'none',\n 'classification': 'six_big_losses',\n 'display_name': 'term.production_reject_loss_or_zero.name',\n 'formula': 'zero_null(production_reject_loss)',\n 'help_text': 'term.production_reject_loss_or_zero.short',\n 'increasing_is': 'bad',\n 'internal': true,\n 'name': 'production_reject_loss_or_zero',\n 'rollup': true,\n 'scoreboard_name': 'term.production_reject_loss_or_zero.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'production_reject_lost_time': {\n 'aggregation': 'none',\n 'classification': 'six_big_losses',\n 'display_name': 'term.production_reject_lost_time.name',\n 'formula': 'production_reject_loss_or_zero * production_time',\n 'help_text': 'term.production_reject_lost_time.short',\n 'increasing_is': 'bad',\n 'name': 'production_reject_lost_time',\n 'rollup': true,\n 'scoreboard_name': 'term.production_reject_lost_time.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'production_rejects': {\n 'aggregation': 'none',\n 'classification': 'counts',\n 'display_name': 'term.production_rejects.name',\n 'formula': 'reject_count - startup_rejects',\n 'help_text': 'term.production_rejects.short',\n 'name': 'production_rejects',\n 'rollup': true,\n 'scoreboard_name': 'term.production_rejects.scoreboard_name',\n 'subtype': 'count',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'production_time': {\n 'aggregation': 'none',\n 'classification': 'production_times',\n 'display_name': 'term.production_time.name',\n 'formula': 'manufacturing_time + planned_stop_time',\n 'help_text': 'term.production_time.short',\n 'name': 'production_time',\n 'rollup': true,\n 'scoreboard_name': 'term.production_time.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'quality': {\n 'aggregation': 'none',\n 'classification': 'oee',\n 'display_name': 'term.quality.name',\n 'formula': '1 - zero_null(reject_count / total_count)',\n 'help_text': 'term.quality.short',\n 'increasing_is': 'good',\n 'name': 'quality',\n 'rollup': true,\n 'scoreboard_name': 'term.quality.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'quality_loss': {\n 'aggregation': 'none',\n 'classification': 'oee',\n 'display_name': 'term.quality_loss.name',\n 'formula': '(1 - quality) * availability_or_zero * performance_or_zero',\n 'help_text': 'term.quality_loss.short',\n 'increasing_is': 'bad',\n 'name': 'quality_loss',\n 'rollup': true,\n 'scoreboard_name': 'term.quality_loss.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'quality_lost_time': {\n 'aggregation': 'none',\n 'classification': 'oee',\n 'display_name': 'term.quality_lost_time.name',\n 'formula': 'quality_loss * production_time',\n 'help_text': 'term.quality_lost_time.short',\n 'increasing_is': 'bad',\n 'name': 'quality_lost_time',\n 'rollup': true,\n 'scoreboard_name': 'term.quality_lost_time.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'quality_or_zero': {\n 'aggregation': 'none',\n 'classification': 'oee',\n 'display_name': 'term.quality_or_zero.name',\n 'formula': 'zero_null(quality)',\n 'help_text': 'term.quality_or_zero.short',\n 'increasing_is': 'good',\n 'internal': true,\n 'name': 'quality_or_zero',\n 'rollup': true,\n 'scoreboard_name': 'term.quality_or_zero.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'quarter_event_id': {\n 'display_name': 'term.quarter_event_id.name',\n 'help_text': 'term.quarter_event_id.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'quarter_event_id',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.quarter_event_id.scoreboard_name',\n 'type': 'id'\n },\n 'rate_efficiency': {\n 'aggregation': 'none',\n 'classification': 'target',\n 'display_name': 'term.rate_efficiency.name',\n 'formula': 'efficiency',\n 'help_text': 'term.rate_efficiency.short',\n 'increasing_is': 'good',\n 'name': 'rate_efficiency',\n 'rollup': true,\n 'scoreboard_name': 'term.rate_efficiency.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'record_id': {\n 'aggregation': 'max',\n 'display_name': 'term.record_id.name',\n 'help_text': 'term.record_id.short',\n 'name': 'record_id',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.record_id.scoreboard_name',\n 'type': 'id'\n },\n 'record_order': {\n 'aggregation': 'min',\n 'display_name': 'term.record_order.name',\n 'help_text': 'term.record_order.short',\n 'indexed': true,\n 'internal': true,\n 'name': 'record_order',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.record_order.scoreboard_name',\n 'type': 'id'\n },\n 'reject_count': {\n 'aggregate_to': {\n 'channel': 'quality',\n 'metric': 'count'\n },\n 'classification': 'counts',\n 'display_name': 'term.reject_count.name',\n 'help_text': 'term.reject_count.short',\n 'name': 'reject_count',\n 'rollup': true,\n 'scoreboard_name': 'term.reject_count.scoreboard_name',\n 'subtype': 'count',\n 'type': 'double'\n },\n 'reject_rate': {\n 'aggregation': 'none',\n 'classification': 'rates',\n 'display_name': 'term.reject_rate.name',\n 'formula': 'reject_count / manufacturing_time * 60',\n 'help_text': 'term.reject_rate.short',\n 'name': 'reject_rate',\n 'rollup': true,\n 'scoreboard_name': 'term.reject_rate.scoreboard_name',\n 'subtype': 'rate',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'reject_rate_per_hour': {\n 'aggregation': 'none',\n 'classification': 'rates',\n 'display_name': 'term.reject_rate_per_hour.name',\n 'formula': 'reject_count / manufacturing_time * 3600',\n 'help_text': 'term.reject_rate_per_hour.short',\n 'name': 'reject_rate_per_hour',\n 'rollup': true,\n 'scoreboard_name': 'term.reject_rate_per_hour.scoreboard_name',\n 'subtype': 'rate_per_hour',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'reject_speed': {\n 'aggregation': 'none',\n 'classification': 'rates',\n 'display_name': 'term.reject_speed.name',\n 'formula': 'reject_count / run_time * 60',\n 'help_text': 'term.reject_speed.short',\n 'name': 'reject_speed',\n 'rollup': true,\n 'scoreboard_name': 'term.reject_speed.scoreboard_name',\n 'subtype': 'rate',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'reject_speed_per_hour': {\n 'aggregation': 'none',\n 'classification': 'rates',\n 'display_name': 'term.reject_speed_per_hour.name',\n 'formula': 'reject_count / run_time * 3600',\n 'help_text': 'term.reject_speed_per_hour.short',\n 'name': 'reject_speed_per_hour',\n 'rollup': true,\n 'scoreboard_name': 'term.reject_speed_per_hour.scoreboard_name',\n 'subtype': 'rate_per_hour',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'remaining_percent': {\n 'classification': 'production_times',\n 'display_name': 'term.remaining_percent.name',\n 'ephemeral': true,\n 'help_text': 'term.remaining_percent.short',\n 'internal': true,\n 'name': 'remaining_percent',\n 'persist': true,\n 'rollup': false,\n 'scoreboard_name': 'term.remaining_percent.scoreboard_name',\n 'subtype': 'percent',\n 'type': 'double'\n },\n 'run_confidence': {\n 'classification': 'production_times',\n 'display_name': 'term.run_confidence.name',\n 'ephemeral': true,\n 'help_text': 'term.run_confidence.short',\n 'internal': true,\n 'name': 'run_confidence',\n 'persist': true,\n 'rollup': false,\n 'scoreboard_name': 'term.run_confidence.scoreboard_name',\n 'subtype': 'percent',\n 'type': 'double'\n },\n 'run_cycle_lost_time': {\n 'classification': 'cycles',\n 'display_name': 'term.run_cycle_lost_time.name',\n 'help_text': 'term.run_cycle_lost_time.short',\n 'increasing_is': 'bad',\n 'name': 'run_cycle_lost_time',\n 'rollup': true,\n 'scoreboard_name': 'term.run_cycle_lost_time.scoreboard_name',\n 'type': 'time_span'\n },\n 'run_cycles': {\n 'classification': 'cycles',\n 'display_name': 'term.run_cycles.name',\n 'help_text': 'term.run_cycles.short',\n 'name': 'run_cycles',\n 'rollup': true,\n 'scoreboard_name': 'term.run_cycles.scoreboard_name',\n 'subtype': 'cycle',\n 'type': 'double'\n },\n 'run_time': {\n 'classification': 'production_times',\n 'display_name': 'term.run_time.name',\n 'help_text': 'term.run_time.short',\n 'increasing_is': 'good',\n 'name': 'run_time',\n 'rollup': true,\n 'scoreboard_name': 'term.run_time.scoreboard_name',\n 'type': 'time_span'\n },\n 'shift_event_id': {\n 'display_name': 'term.shift_event_id.name',\n 'help_text': 'term.shift_event_id.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'shift_event_id',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.shift_event_id.scoreboard_name',\n 'type': 'id'\n },\n 'shift_first_shift_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'shift_first_shift_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Shift',\n 'category_value': 'First Shift'\n },\n 'type': 'id'\n },\n 'shift_first_shift_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'shift_first_shift_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Shift',\n 'category_value': 'First Shift'\n },\n 'type': 'double'\n },\n 'shift_hour_event_id': {\n 'display_name': 'term.shift_hour_event_id.name',\n 'help_text': 'term.shift_hour_event_id.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'shift_hour_event_id',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.shift_hour_event_id.scoreboard_name',\n 'type': 'id'\n },\n 'shift_hour_occurrences': {\n 'display_name': 'term.shift_hour_occurrences.name',\n 'help_text': 'term.shift_hour_occurrences.short',\n 'internal': true,\n 'name': 'shift_hour_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': 'term.shift_hour_occurrences.scoreboard_name',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Hour'\n },\n 'type': 'double'\n },\n 'shift_null_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'shift_null_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Shift',\n 'category_value': 'No Shift'\n },\n 'type': 'id'\n },\n 'shift_null_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'shift_null_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Shift',\n 'category_value': 'No Shift'\n },\n 'type': 'double'\n },\n 'shift_occurrences': {\n 'display_name': 'term.shift_occurrences.name',\n 'help_text': 'term.shift_occurrences.short',\n 'internal': true,\n 'name': 'shift_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': 'term.shift_occurrences.scoreboard_name',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Shift'\n },\n 'type': 'double'\n },\n 'shift_second_shift_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'shift_second_shift_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Shift',\n 'category_value': 'Second Shift'\n },\n 'type': 'id'\n },\n 'shift_second_shift_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'shift_second_shift_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Shift',\n 'category_value': 'Second Shift'\n },\n 'type': 'double'\n },\n 'shift_third_shift_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'shift_third_shift_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Shift',\n 'category_value': 'Third Shift'\n },\n 'type': 'id'\n },\n 'shift_third_shift_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'shift_third_shift_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Shift',\n 'category_value': 'Third Shift'\n },\n 'type': 'double'\n },\n 'shift_unknown_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'shift_unknown_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Shift',\n 'category_value': 'Unknown Shift'\n },\n 'type': 'id'\n },\n 'shift_unknown_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'shift_unknown_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Shift',\n 'category_value': 'Unknown Shift'\n },\n 'type': 'double'\n },\n 'slice_order': {\n 'display_name': 'term.slice_order.name',\n 'help_text': 'term.slice_order.short',\n 'indexed': true,\n 'internal': true,\n 'name': 'slice_order',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.slice_order.scoreboard_name',\n 'type': 'id',\n 'unique': true\n },\n 'small_stop_loss': {\n 'aggregation': 'none',\n 'classification': 'six_big_losses',\n 'display_name': 'term.small_stop_loss.name',\n 'formula': 'small_stop_lost_time / production_time',\n 'help_text': 'term.small_stop_loss.short',\n 'increasing_is': 'bad',\n 'name': 'small_stop_loss',\n 'rollup': true,\n 'scoreboard_name': 'term.small_stop_loss.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'small_stop_lost_time': {\n 'classification': 'six_big_losses',\n 'display_name': 'term.small_stop_lost_time.name',\n 'help_text': 'term.small_stop_lost_time.short',\n 'increasing_is': 'bad',\n 'name': 'small_stop_lost_time',\n 'rollup': true,\n 'scoreboard_name': 'term.small_stop_lost_time.scoreboard_name',\n 'type': 'time_span'\n },\n 'small_stops': {\n 'classification': 'cycles',\n 'display_name': 'term.small_stops.name',\n 'help_text': 'term.small_stops.short',\n 'name': 'small_stops',\n 'rollup': true,\n 'scoreboard_name': 'term.small_stops.scoreboard_name',\n 'subtype': 'cycle',\n 'type': 'double'\n },\n 'start_time': {\n 'aggregation': 'datetime_min',\n 'classification': 'production_times',\n 'display_name': 'term.start_time.name',\n 'help_text': 'term.start_time.short',\n 'name': 'start_time',\n 'persist': true,\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': 'term.start_time.scoreboard_name',\n 'type': 'date_time'\n },\n 'startup_reject_loss': {\n 'aggregation': 'none',\n 'classification': 'six_big_losses',\n 'display_name': 'term.startup_reject_loss.name',\n 'formula': 'percent_startup_rejects_or_zero * availability_or_zero * performance_or_zero',\n 'help_text': 'term.startup_reject_loss.short',\n 'increasing_is': 'bad',\n 'name': 'startup_reject_loss',\n 'rollup': true,\n 'scoreboard_name': 'term.startup_reject_loss.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'startup_reject_loss_or_zero': {\n 'aggregation': 'none',\n 'classification': 'six_big_losses',\n 'display_name': 'term.startup_reject_loss_or_zero.name',\n 'formula': 'zero_null(startup_reject_loss)',\n 'help_text': 'term.startup_reject_loss_or_zero.short',\n 'increasing_is': 'bad',\n 'internal': true,\n 'name': 'startup_reject_loss_or_zero',\n 'rollup': true,\n 'scoreboard_name': 'term.startup_reject_loss_or_zero.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'startup_reject_lost_time': {\n 'aggregation': 'none',\n 'classification': 'six_big_losses',\n 'display_name': 'term.startup_reject_lost_time.name',\n 'formula': 'startup_reject_loss_or_zero * production_time',\n 'help_text': 'term.startup_reject_lost_time.short',\n 'increasing_is': 'bad',\n 'name': 'startup_reject_lost_time',\n 'rollup': true,\n 'scoreboard_name': 'term.startup_reject_lost_time.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'startup_rejects': {\n 'classification': 'counts',\n 'display_name': 'term.startup_rejects.name',\n 'help_text': 'term.startup_rejects.short',\n 'name': 'startup_rejects',\n 'rollup': true,\n 'scoreboard_name': 'term.startup_rejects.scoreboard_name',\n 'subtype': 'count',\n 'type': 'double'\n },\n 'sync_id': {\n 'aggregation': 'sync_id',\n 'display_name': 'term.sync_id.name',\n 'help_text': 'term.sync_id.short',\n 'indexed': true,\n 'internal': true,\n 'name': 'sync_id',\n 'rollup': true,\n 'scoreboard_name': 'term.sync_id.scoreboard_name',\n 'type': 'id'\n },\n 'takt_time': {\n 'classification': 'target',\n 'display_name': 'term.takt_time.name',\n 'ephemeral': true,\n 'help_text': 'term.takt_time.short',\n 'name': 'takt_time',\n 'persist': true,\n 'rollup': false,\n 'scoreboard_name': 'term.takt_time.scoreboard_name',\n 'subtype': 'cycle_time',\n 'type': 'time_span'\n },\n 'target_count': {\n 'classification': 'target',\n 'display_name': 'term.target_count.name',\n 'help_text': 'term.target_count.short',\n 'name': 'target_count',\n 'rollup': true,\n 'scoreboard_name': 'term.target_count.scoreboard_name',\n 'subtype': 'count',\n 'type': 'double'\n },\n 'target_cycles': {\n 'classification': 'target',\n 'display_name': 'term.target_cycles.name',\n 'help_text': 'term.target_cycles.short',\n 'name': 'target_cycles',\n 'rollup': true,\n 'scoreboard_name': 'term.target_cycles.scoreboard_name',\n 'subtype': 'cycle',\n 'type': 'double'\n },\n 'target_labor_per_piece': {\n 'aggregation': 'none',\n 'classification': 'labor',\n 'display_name': 'term.target_labor_per_piece.name',\n 'formula': 'earned_labor / good_count',\n 'help_text': 'term.target_labor_per_piece.short',\n 'name': 'target_labor_per_piece',\n 'rollup': true,\n 'scoreboard_name': 'term.target_labor_per_piece.scoreboard_name',\n 'subtype': 'cycle_time',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'target_rate': {\n 'aggregation': 'none',\n 'classification': 'rates',\n 'display_name': 'term.target_rate.name',\n 'formula': 'target_count / manufacturing_time * 60',\n 'help_text': 'term.target_rate.short',\n 'name': 'target_rate',\n 'rollup': true,\n 'scoreboard_name': 'term.target_rate.scoreboard_name',\n 'subtype': 'rate',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'target_rate_per_hour': {\n 'aggregation': 'none',\n 'classification': 'rates',\n 'display_name': 'term.target_rate_per_hour.name',\n 'formula': 'target_count / manufacturing_time * 3600',\n 'help_text': 'term.target_rate_per_hour.short',\n 'name': 'target_rate_per_hour',\n 'rollup': true,\n 'scoreboard_name': 'term.target_rate_per_hour.scoreboard_name',\n 'subtype': 'rate_per_hour',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'target_time': {\n 'classification': 'production_times',\n 'display_name': 'term.target_time.name',\n 'ephemeral': true,\n 'help_text': 'term.target_time.short',\n 'name': 'target_time',\n 'persist': true,\n 'rollup': false,\n 'scoreboard_name': 'term.target_time.scoreboard_name',\n 'type': 'time_span'\n },\n 'team_event_id': {\n 'display_name': 'term.team_event_id.name',\n 'help_text': 'term.team_event_id.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'team_event_id',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.team_event_id.scoreboard_name',\n 'type': 'id'\n },\n 'team_null_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'team_null_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Team',\n 'category_value': 'No Team'\n },\n 'type': 'id'\n },\n 'team_null_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'team_null_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Team',\n 'category_value': 'No Team'\n },\n 'type': 'double'\n },\n 'team_occurrences': {\n 'display_name': 'term.team_occurrences.name',\n 'help_text': 'term.team_occurrences.short',\n 'internal': true,\n 'name': 'team_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': 'term.team_occurrences.scoreboard_name',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Team'\n },\n 'type': 'double'\n },\n 'team_size': {\n 'classification': 'labor',\n 'display_name': 'term.team_size.name',\n 'ephemeral': true,\n 'help_text': 'term.team_size.short',\n 'name': 'team_size',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.team_size.scoreboard_name',\n 'type': 'double'\n },\n 'team_unknown_list_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'team_unknown_list_occurrences',\n 'post_process': 'id_array',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'translation_arguments': {\n 'category': 'Team',\n 'category_value': 'Unknown Team'\n },\n 'type': 'id'\n },\n 'team_unknown_occurrences': {\n 'classification': 'events',\n 'display_name': 'occurrences_display_name_template',\n 'help_text': 'occurrences_help_text_template',\n 'name': 'team_unknown_occurrences',\n 'rollup': true,\n 'scoreboard': false,\n 'scoreboard_name': '',\n 'subtype': 'count',\n 'translation_arguments': {\n 'category': 'Team',\n 'category_value': 'Unknown Team'\n },\n 'type': 'double'\n },\n 'teep': {\n 'aggregation': 'none',\n 'classification': 'teep',\n 'display_name': 'term.teep.name',\n 'formula': 'availability_or_zero * performance_or_zero * quality_or_zero * utilization',\n 'help_text': 'term.teep.short',\n 'increasing_is': 'good',\n 'name': 'teep',\n 'rollup': true,\n 'scoreboard_name': 'term.teep.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'time_variance': {\n 'aggregation': 'none',\n 'classification': 'target',\n 'display_name': 'term.time_variance.name',\n 'formula': 'percent_variance * manufacturing_time',\n 'help_text': 'term.time_variance.short',\n 'name': 'time_variance',\n 'rollup': true,\n 'scoreboard_name': 'term.time_variance.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'total_count': {\n 'aggregation': 'none',\n 'classification': 'counts',\n 'display_name': 'term.total_count.name',\n 'formula': 'good_count + reject_count',\n 'help_text': 'term.total_count.short',\n 'name': 'total_count',\n 'rollup': true,\n 'scoreboard_name': 'term.total_count.scoreboard_name',\n 'subtype': 'count',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'total_cycle_time': {\n 'aggregation': 'none',\n 'classification': 'cycles',\n 'display_name': 'term.total_cycle_time.name',\n 'formula': 'ideal_time + run_cycle_lost_time + small_stop_lost_time + partial_cycle_lost_time',\n 'help_text': 'term.total_cycle_time.short',\n 'name': 'total_cycle_time',\n 'rollup': true,\n 'scoreboard_name': 'term.total_cycle_time.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'total_cycles': {\n 'aggregation': 'none',\n 'classification': 'cycles',\n 'display_name': 'term.total_cycles.name',\n 'formula': 'run_cycles + small_stops + partial_cycles',\n 'help_text': 'term.total_cycles.short',\n 'name': 'total_cycles',\n 'rollup': true,\n 'scoreboard_name': 'term.total_cycles.scoreboard_name',\n 'subtype': 'cycle',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'total_rate': {\n 'aggregation': 'none',\n 'classification': 'rates',\n 'display_name': 'term.total_rate.name',\n 'formula': 'total_count / manufacturing_time * 60',\n 'help_text': 'term.total_rate.short',\n 'name': 'total_rate',\n 'rollup': true,\n 'scoreboard_name': 'term.total_rate.scoreboard_name',\n 'subtype': 'rate',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'total_rate_per_hour': {\n 'aggregation': 'none',\n 'classification': 'rates',\n 'display_name': 'term.total_rate_per_hour.name',\n 'formula': 'total_count / manufacturing_time * 3600',\n 'help_text': 'term.total_rate_per_hour.short',\n 'name': 'total_rate_per_hour',\n 'rollup': true,\n 'scoreboard_name': 'term.total_rate_per_hour.scoreboard_name',\n 'subtype': 'rate_per_hour',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'total_speed': {\n 'aggregation': 'none',\n 'classification': 'rates',\n 'display_name': 'term.total_speed.name',\n 'formula': 'total_count / run_time * 60',\n 'help_text': 'term.total_speed.short',\n 'name': 'total_speed',\n 'rollup': true,\n 'scoreboard_name': 'term.total_speed.scoreboard_name',\n 'subtype': 'rate',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'total_speed_per_hour': {\n 'aggregation': 'none',\n 'classification': 'rates',\n 'display_name': 'term.total_speed_per_hour.name',\n 'formula': 'total_count / run_time * 3600',\n 'help_text': 'term.total_speed_per_hour.short',\n 'name': 'total_speed_per_hour',\n 'rollup': true,\n 'scoreboard_name': 'term.total_speed_per_hour.scoreboard_name',\n 'subtype': 'rate_per_hour',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'unplanned_stop_loss': {\n 'aggregation': 'none',\n 'classification': 'six_big_losses',\n 'display_name': 'term.unplanned_stop_loss.name',\n 'formula': 'unplanned_stop_time / production_time',\n 'help_text': 'term.unplanned_stop_loss.short',\n 'increasing_is': 'bad',\n 'name': 'unplanned_stop_loss',\n 'rollup': true,\n 'scoreboard_name': 'term.unplanned_stop_loss.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'unplanned_stop_lost_time': {\n 'aggregation': 'none',\n 'classification': 'six_big_losses',\n 'display_name': 'term.unplanned_stop_lost_time.name',\n 'formula': 'unplanned_stop_time',\n 'help_text': 'term.unplanned_stop_lost_time.short',\n 'increasing_is': 'bad',\n 'name': 'unplanned_stop_lost_time',\n 'rollup': true,\n 'scoreboard_name': 'term.unplanned_stop_lost_time.scoreboard_name',\n 'translation_arguments': {},\n 'type': 'time_span'\n },\n 'unplanned_stop_time': {\n 'classification': 'production_times',\n 'display_name': 'term.unplanned_stop_time.name',\n 'help_text': 'term.unplanned_stop_time.short',\n 'increasing_is': 'bad',\n 'name': 'unplanned_stop_time',\n 'rollup': true,\n 'scoreboard_name': 'term.unplanned_stop_time.scoreboard_name',\n 'type': 'time_span'\n },\n 'utilization': {\n 'aggregation': 'none',\n 'classification': 'teep',\n 'display_name': 'term.utilization.name',\n 'formula': 'production_time / all_time',\n 'help_text': 'term.utilization.short',\n 'increasing_is': 'good',\n 'name': 'utilization',\n 'rollup': true,\n 'scoreboard_name': 'term.utilization.scoreboard_name',\n 'subtype': 'percent',\n 'translation_arguments': {},\n 'type': 'double'\n },\n 'week_event_id': {\n 'display_name': 'term.week_event_id.name',\n 'help_text': 'term.week_event_id.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'week_event_id',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.week_event_id.scoreboard_name',\n 'type': 'id'\n },\n 'wip': {\n 'aggregation': 'none',\n 'classification': 'counts',\n 'display_name': 'term.wip.name',\n 'help_text': 'term.wip.short',\n 'name': 'wip',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.wip.scoreboard_name',\n 'subtype': 'count',\n 'type': 'double'\n },\n 'year_event_id': {\n 'display_name': 'term.year_event_id.name',\n 'help_text': 'term.year_event_id.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'year_event_id',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.year_event_id.scoreboard_name',\n 'type': 'id'\n }\n },\n 'name': 'production_metric',\n 'primary_key': 'record_id',\n 'slicing_parent': 'production_metric'\n },\n 'production_phase': {\n 'display_name': 'production_phase_channel_literal',\n 'name': 'production_phase',\n 'projecting_base': 'production_metric',\n 'protected': true\n },\n 'quality': {\n 'aggregating_boundary_parent': 'production_metric',\n 'annotations': {\n 'reject_reason_display_name': {\n 'display_name': 'term.reject_reason_display_name.name',\n 'help_text': 'term.reject_reason_display_name.short',\n 'name': 'reject_reason_display_name',\n 'scoreboard_name': 'term.reject_reason_display_name.scoreboard_name'\n }\n },\n 'category_values': {\n 'reject_reason': {\n 'category': 'reject_reason',\n 'display_name': 'term.reject_reason.name',\n 'help_text': 'term.reject_reason.short',\n 'indexed': true,\n 'name': 'reject_reason',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.reject_reason.scoreboard_name'\n }\n },\n 'display_name': 'quality_channel_literal',\n 'metrics': {\n 'boundary_parent_event_id': {\n 'display_name': 'term.boundary_parent_event_id.name',\n 'help_text': 'term.boundary_parent_event_id.short',\n 'indexed': true,\n 'internal': true,\n 'name': 'boundary_parent_event_id',\n 'persist': true,\n 'reference': true,\n 'rollup': true,\n 'scoreboard_name': 'term.boundary_parent_event_id.scoreboard_name',\n 'type': 'id'\n },\n 'count': {\n 'classification': 'counts',\n 'display_name': 'term.count.name',\n 'help_text': 'term.count.short',\n 'name': 'count',\n 'rollup': true,\n 'scoreboard_name': 'term.count.scoreboard_name',\n 'subtype': 'count',\n 'type': 'double'\n },\n 'event_id': {\n 'display_name': 'term.event_id.name',\n 'help_text': 'term.event_id.short',\n 'indexed': true,\n 'internal': true,\n 'name': 'event_id',\n 'persist': true,\n 'reference': true,\n 'rollup': true,\n 'scoreboard_name': 'term.event_id.scoreboard_name',\n 'type': 'id'\n },\n 'production_day_number': {\n 'aggregation': 'none',\n 'display_name': 'term.production_day_number.name',\n 'help_text': 'term.production_day_number.short',\n 'internal': true,\n 'name': 'production_day_number',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.production_day_number.scoreboard_name',\n 'type': 'uint64'\n },\n 'record_id': {\n 'aggregation': 'max',\n 'display_name': 'term.record_id.name',\n 'help_text': 'term.record_id.short',\n 'name': 'record_id',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.record_id.scoreboard_name',\n 'type': 'id'\n },\n 'record_order': {\n 'aggregation': 'min',\n 'display_name': 'term.record_order.name',\n 'help_text': 'term.record_order.short',\n 'indexed': true,\n 'internal': true,\n 'name': 'record_order',\n 'persist': true,\n 'reference': true,\n 'rollup': true,\n 'scoreboard_name': 'term.record_order.scoreboard_name',\n 'type': 'id'\n },\n 'slice_order': {\n 'display_name': 'term.slice_order.name',\n 'help_text': 'term.slice_order.short',\n 'indexed': true,\n 'internal': true,\n 'name': 'slice_order',\n 'persist': true,\n 'reference': true,\n 'rollup': true,\n 'scoreboard_name': 'term.slice_order.scoreboard_name',\n 'type': 'id'\n },\n 'sync_id': {\n 'aggregation': 'sync_id',\n 'display_name': 'term.sync_id.name',\n 'help_text': 'term.sync_id.short',\n 'indexed': true,\n 'internal': true,\n 'name': 'sync_id',\n 'rollup': true,\n 'scoreboard_name': 'term.sync_id.scoreboard_name',\n 'type': 'id'\n }\n },\n 'name': 'quality',\n 'primary_key': 'record_id'\n },\n 'quarter': {\n 'display_name': 'quarter_channel_literal',\n 'name': 'quarter',\n 'projecting_base': 'production_metric',\n 'protected': true\n },\n 'shift': {\n 'display_name': 'shift_channel_literal',\n 'name': 'shift',\n 'projecting_base': 'production_metric'\n },\n 'shift_hour': {\n 'display_name': 'shift_hour_channel_literal',\n 'name': 'shift_hour',\n 'projecting_base': 'production_metric',\n 'protected': true\n },\n 'system': {\n 'annotations': {},\n 'category_values': {\n 'internal_storage_lifetime': {\n 'category': 'internal_storage_lifetime',\n 'display_name': 'term.internal_storage_lifetime.name',\n 'help_text': 'term.internal_storage_lifetime.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'internal_storage_lifetime',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.internal_storage_lifetime.scoreboard_name'\n },\n 'last_scan_reason': {\n 'category': 'process_state_reason',\n 'display_name': 'term.last_scan_reason.name',\n 'ephemeral': true,\n 'help_text': 'term.last_scan_reason.short',\n 'indexed': true,\n 'indexed_with': [\n 'record_order'\n ],\n 'name': 'last_scan_reason',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.last_scan_reason.scoreboard_name'\n }\n },\n 'display_name': 'system_channel_literal',\n 'metrics': {\n 'event_id': {\n 'display_name': 'term.event_id.name',\n 'help_text': 'term.event_id.short',\n 'indexed': true,\n 'internal': true,\n 'name': 'event_id',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.event_id.scoreboard_name',\n 'type': 'id'\n },\n 'production_day_number': {\n 'aggregation': 'none',\n 'display_name': 'term.production_day_number.name',\n 'help_text': 'term.production_day_number.short',\n 'internal': true,\n 'name': 'production_day_number',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.production_day_number.scoreboard_name',\n 'type': 'uint64'\n },\n 'record_id': {\n 'aggregation': 'max',\n 'display_name': 'term.record_id.name',\n 'help_text': 'term.record_id.short',\n 'name': 'record_id',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.record_id.scoreboard_name',\n 'type': 'id'\n },\n 'record_order': {\n 'aggregation': 'min',\n 'display_name': 'term.record_order.name',\n 'help_text': 'term.record_order.short',\n 'indexed': true,\n 'internal': true,\n 'name': 'record_order',\n 'persist': true,\n 'rollup': true,\n 'scoreboard_name': 'term.record_order.scoreboard_name',\n 'type': 'id'\n },\n 'slice_order': {\n 'display_name': 'term.slice_order.name',\n 'help_text': 'term.slice_order.short',\n 'indexed': true,\n 'internal': true,\n 'name': 'slice_order',\n 'persist': true,\n 'reference': true,\n 'rollup': true,\n 'scoreboard_name': 'term.slice_order.scoreboard_name',\n 'type': 'id'\n },\n 'sync_id': {\n 'aggregation': 'sync_id',\n 'display_name': 'term.sync_id.name',\n 'help_text': 'term.sync_id.short',\n 'indexed': true,\n 'internal': true,\n 'name': 'sync_id',\n 'rollup': true,\n 'scoreboard_name': 'term.sync_id.scoreboard_name',\n 'type': 'id'\n }\n },\n 'name': 'system',\n 'primary_key': 'record_id'\n },\n 'team': {\n 'display_name': 'team_channel_literal',\n 'name': 'team',\n 'projecting_base': 'production_metric'\n },\n 'week': {\n 'display_name': 'week_channel_literal',\n 'name': 'week',\n 'projecting_base': 'production_metric',\n 'protected': true\n },\n 'year': {\n 'display_name': 'year_channel_literal',\n 'name': 'year',\n 'projecting_base': 'production_metric',\n 'protected': true\n }\n};\n","import ParamTypes, { paramTest as importedParamTest } from './ParamTypes';\n\nexport const paramTest = importedParamTest;\n\nexport default ParamTypes;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Tooltip from '../Tooltip';\nimport Icon from '../Icon';\nimport styled from 'styled-components';\n\nconst ErrorIcon = styled.div`\n display: inline-block;\n color: ${({theme}) => theme.colors.palette.error.red};\n`;\n\n/**\n * When error is provided render a red error indicator that displays\n * a tooltip with the error message when hovered or tapped.\n *\n * @param {String[]} error The array of errors from the data request.\n * If empty or falsey render nothing.\n */\nfunction ErrorIndicator({\n error,\n}) {\n if (!error || error.length === 0) {\n return null;\n }\n\n // NOTE: We only display the first error message, even if there\n // are multiple errors.\n //\n let [errorMessage] = error;\n\n return (\n \n \n \n \n \n );\n}\n\nErrorIndicator.propTypes = {\n error: PropTypes.arrayOf(PropTypes.string),\n};\n\nErrorIndicator.defaultProps = { };\n\nexport default ErrorIndicator;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ParamTypes from 'Common/util/ParamTypes';\nimport { paramTest } from 'Common/util/ParamTypes/ParamTypes';\nimport styled from 'styled-components';\nimport useTranslation from 'Common/hooks/useTranslation';\nimport Tooltip from 'Common/components/Tooltip';\nimport Icon from 'Common/components/Icon';\nimport ErrorIndicator from '../ErrorIndicator';\nimport { Body5 } from 'Common/components/typography';\n\nexport const assetFormatTypes = [\n 'asset',\n 'area',\n 'plant',\n 'enterprise',\n];\n\nexport const categoryValueFormatTypes = [\n 'category_value',\n ...assetFormatTypes,\n];\n\nconst Root = styled.div`\n display: inline-block;\n`;\n\nconst MultipleCategoriesListItem = styled(Body5).attrs({ as: 'div' })`\n padding: 4px 5px;\n`;\n\nconst MultipleCategoriesList = styled.div`\n line-height: 16px;\n\n ${MultipleCategoriesListItem}:nth-child(2n) {\n border-radius: 3px;\n background-color: ${({theme}) => theme.colors.palette.grey.cloud};\n }\n`;\n\nconst ErrorContainer = styled.div`\n display: inline-block;\n margin-right: 4px;\n`;\n\n\nconst ValueText = styled.span`\n .fa-circle::before {\n display: table-cell;\n };\n`;\n\n\n/**\n * Gets the text value for this category value.\n * @param {Object} rawValue The rawValue that makes up the category value.\n * @param {Function} translator Translates keys to correct text\n * \n * @return {String}\n */\nexport function getCategoryValueText(parameters) {\n paramTest(parameters, ParamTypes.shape({\n rawValue: ParamTypes.any,\n translator: ParamTypes.func.isRequired,\n }), 'getCategoryValueText');\n\n const {\n rawValue,\n translator,\n } = parameters;\n\n let value = rawValue;\n\n if (!Array.isArray(value)) {\n value = [value];\n }\n\n if (value.length > 1) {\n return translator('multiple_category_value_template', {\n number: value.length,\n });\n }\n else {\n if(!value[0]) {\n return translator('null_metric_literal');\n }\n else {\n return value[0].displayName;\n }\n }\n}\n\n/**\n * A React component that renders a visual representation of a category\n * value. Takes in at minimum a format type and a rawValue which will be\n * formatted and rendered out.\n *\n * @param {Object} data The data that makes up the category value.\n * @param {String[]} [error] List of any errors to be displayed in\n * place of the metric.\n * @param {boolean} [noColorIndicatorOnText=false] When true, don't render the\n * color indicator with the text. This does not affect the color\n * indicator's visibility in the tooltip.\n * @param {boolean} [noColor=false] When true, don't render the metric\n * with any non-grey-scale colors. Mostly used for printing.\n * @param {boolean} [noTooltip=false] When true, disable the tooltip.\n */\nfunction CategoryValue({\n data,\n error,\n noColorIndicatorOnText,\n noColor,\n noTooltip,\n\n className,\n style,\n}) {\n const nullValue = useTranslation('null_metric_literal');\n const {\n rawValue,\n hasColorIndicator,\n } = (data || {});\n\n let value = rawValue;\n\n if (value === null || value === undefined) {\n value = [{\n name: 'null',\n displayName: nullValue,\n assetLink: ''\n }];\n }\n\n if (!Array.isArray(value)) {\n value = [value];\n }\n\n let content = nullValue;\n\n const renderValueText = ({ displayName, color }, { noColorIndicator } = { }) => {\n // If it isn't a string treat it as a null value\n displayName = (typeof displayName === 'string') ? displayName : nullValue;\n const showColorIndicator = !noColor && !noColorIndicator && hasColorIndicator;\n\n return (\n \n {showColorIndicator && (\n \n )}\n {displayName}\n \n );\n };\n\n const renderValue = ({ displayName, color, assetLink }) => {\n // If it isn't a string treat it as a null value\n displayName = (typeof displayName === 'string') ? displayName : nullValue;\n\n let categoryJsx = renderValueText({ displayName, color }, { noColorIndicator: noColorIndicatorOnText });\n\n // If this has a tooltip, wrap it in a tooltip.\n if (!noTooltip) {\n let tooltipContent;\n\n if (assetLink) {\n tooltipContent = `${displayName} (${assetLink})`;\n }\n else {\n tooltipContent = renderValueText({ displayName, color }, { noColorIndicator: false });\n }\n\n categoryJsx = (\n \n {categoryJsx}\n \n );\n }\n\n // If this is an asset link, wrap it in a link.\n if (assetLink) {\n categoryJsx = (\n \n {categoryJsx}\n \n );\n }\n\n return categoryJsx;\n };\n\n const multipleCategoriesLabel = useTranslation('multiple_category_value_template', {\n number: value.length,\n });\n\n if (value.length === 1) {\n content = renderValue(value[0].dimension || value[0]);\n }\n else if (value.length > 1) {\n const tooltipContent = (\n \n {\n value.map((val, index) => (\n \n {renderValueText(val, { noColorIndicator: false })}\n \n ))\n }\n \n );\n\n const innerContent = (\n \n {multipleCategoriesLabel}\n \n );\n\n content = !noTooltip\n ? (\n \n {innerContent}\n )\n : innerContent;\n }\n\n return (\n \n {error && }\n {content}\n \n );\n}\n\nconst tooltipDataPropType = PropTypes.arrayOf(\n PropTypes.shape({\n dimension: PropTypes.shape({\n displayName: PropTypes.string,\n name: PropTypes.string,\n color: PropTypes.string,\n }).isRequired,\n metric: PropTypes.shape({\n displayName: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n formatType: PropTypes.string.isRequired,\n rawValue: PropTypes.number\n }).isRequired,\n }),\n).isRequired;\n\nconst categoryValuePropType = PropTypes.shape({ \n displayName: PropTypes.string,\n color: PropTypes.string,\n assetLink: PropTypes.string,\n});\n\nCategoryValue.propTypes = {\n data: PropTypes.shape({\n name: PropTypes.string,\n formatType: PropTypes.oneOf(categoryValueFormatTypes).isRequired,\n rawValue: PropTypes.oneOfType([\n PropTypes.arrayOf(categoryValuePropType),\n categoryValuePropType,\n tooltipDataPropType,\n ]),\n hasColorIndicator: PropTypes.bool,\n }),\n error: PropTypes.arrayOf(\n PropTypes.string,\n ),\n noColorIndicatorOnText: PropTypes.bool,\n noColor: PropTypes.bool,\n noTooltip: PropTypes.bool,\n\n className: PropTypes.string,\n style: PropTypes.object,\n};\n\nCategoryValue.defaultProps = {\n noColorIndicatorOnText: false,\n noColor: false,\n noTooltip: false,\n};\n\nexport default CategoryValue;\n","import CategoryValue from './CategoryValue';\n\nexport default CategoryValue;\n","import { useContext, useMemo } from 'react';\nimport { LocaleContext } from 'Common/providers/LocaleProvider';\n\n\n export default function useLocale() {\n const localeContext = useContext(LocaleContext);\n\n const locale = useMemo(() => {\n return localeContext();\n }, [localeContext]);\n\n return locale;\n}\n","import isString from 'lodash/isString';\nimport size from 'lodash/size';\nimport isObject from 'lodash/isObject';\nimport isNumber from 'lodash/isNumber';\nimport isFinite from 'lodash/isFinite';\n\n/**\n * Defines the Qualitative Palette, colors that look good together but are not\n * related.\n */\n export const Q_PALETTE = Object.freeze([\n '#5cbae6',\n '#b6d957',\n '#fac364',\n '#d998cb',\n '#ccc5a8',\n '#8cd3ff',\n '#f2d249',\n '#93b9c6',\n '#52bacc',\n '#dbdb46',\n '#98aafb'\n]);\n\n/**\n * Get a qualitative color for an index; will automatically repeat colors when\n * the index goes beyond the number of colors in the palette.\n *\n * @see Q_PALETTE\n *\n * @param {Number} index Integer index into the color palette.\n * @returns {String} Qalitative color in #FFFFFF format.\n */\n export function getQualitativeColor(index) {\n const colorIndex = index % Q_PALETTE.length;\n return Q_PALETTE[colorIndex];\n}\n\n/**\n * Convert CSS color to an RGB object. Includes the alpha channel if present.\n * Inspired by: https://stackoverflow.com/a/21966100\n *\n * @param {String} input CSS color string.\n *\n * @returns {Object} RGB object of the form { r: \\d+, g: \\d+, b: \\d+, [a]: \\d+ }\n */\nexport function cssToRGB(input) {\n if (!isString(input)) {\n throw new Error('cssToRGB requires a String for input!');\n }\n\n let inputLength = size(input),\n rv = null;\n\n if (input.startsWith('#') && (inputLength === 10 || inputLength === 7 || inputLength === 4)) {\n // #xxx or #xxxxxx or #xxxxxxxxx ?\n let colLength = (input.length - 1) / 3,\n factor = [17, 1, 0.062272][colLength - 1];\n\n rv = {\n r: Math.round(Number.parseInt(input.substr(1, colLength), 16) * factor),\n g: Math.round(Number.parseInt(input.substr(1 + colLength, colLength), 16) * factor),\n b: Math.round(Number.parseInt(input.substr(1 + (2 * colLength), colLength), 16) * factor)\n };\n }\n else if (input.startsWith('rgb')) {\n let rgbArray = input.split('(')[1].split(')')[0].split(',').map(Math.round);\n\n rv = {\n r: rgbArray[0],\n g: rgbArray[1],\n b: rgbArray[2],\n };\n\n // Are we rgba? If so include the alpha value\n if (input.startsWith('rgba')) {\n rv.a = rgbArray[3];\n }\n }\n else {\n throw new Error(input + ' is an invalid CSS color!');\n }\n\n return rv;\n}\n\nexport function interpolateColor(rgb1, rgb2, factor) {\n let result = { ...rgb1 };\n\n ['r', 'g', 'b'].forEach((comp) => {\n result[comp] = Math.round(\n result[comp] + factor * (rgb2[comp] - rgb1[comp])\n );\n });\n\n return result;\n}\n\n/**\n * Given an RGB object, return a CSS hex color string.\n *\n * @param {Object} rgb RGB object with an r, g, and b component.\n *\n * @returns {String} CSS color of the form #RRGGBB\n */\nexport function rgbToCss(rgb) {\n if (!isObject(rgb)) {\n throw new Error('RGB must be an object!');\n }\n\n let decimalToHexString = function(decimal) {\n let hexStr = decimal.toString(16);\n\n // Ensure leading 0\n return hexStr.length === 1 ? ('0' + hexStr) : hexStr;\n };\n\n let rr = decimalToHexString(rgb.r || 0),\n gg = decimalToHexString(rgb.g || 0),\n bb = decimalToHexString(rgb.b || 0);\n\n return '#' + rr + gg + bb;\n}\n\n/**\n * A simple function to brighten or darken a color a certain amount.\n *\n * @param {String/Object} color CSS color or RGB object to shade.\n * @param {Number} amount Amount in which to brighten/darken the color. Use a positive\n * value for brightening and a negative value for darkening.\n *\n * @returns {String/Object} Either a CSS color or RGB object depending on the type of the\n * given color.\n */\nexport function adjustBrightness(color, amount) {\n let rgb,\n returnCss = false;\n\n if (isString(color)) {\n rgb = cssToRGB(color);\n returnCss = true;\n }\n else if (isObject(color)) {\n rgb = color;\n }\n else {\n throw new Error('Provided color is not a color or RGB object!');\n }\n\n if (!isNumber(amount) || !isFinite(amount)) {\n throw new Error('Amount must be a finite number!');\n }\n\n let shade = function(component) {\n let newComponent = component + amount;\n\n if (newComponent > 255) { newComponent = 255; }\n else if (newComponent < 0) { newComponent = 0; }\n\n return newComponent;\n };\n\n let newRgb = {\n r: shade(rgb.r),\n g: shade(rgb.g),\n b: shade(rgb.b)\n };\n\n return returnCss ? rgbToCss(newRgb) : newRgb;\n}\n\nexport function getTextColorForBackground(backgroundColor) {\n // Based on https://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx\n const {r, g, b} = cssToRGB(backgroundColor);\n const brightness = Math.sqrt(\n (r * r * 0.241) +\n (g * g * 0.691) +\n (b * b * 0.068)\n );\n\n return brightness < 130 ? '#ffffff' : '#000000';\n}\n\n/**\n * Takes in a CSS color (hex or rgb) and an alpha (opacity) value and outputs a CSS-friendly\n * rgba color.\n *\n * @param {String} cssColor Hex or rgb CSS color string.\n * @param {Number} [alpha=1.0] Alpha channel value from 0.0 -> 1.0\n *\n * @returns {String} CSS-friendly rgba(r,g,b,a) color string.\n */\nexport function addAlphaToCssColor(cssColor, alpha = 1.0) {\n let rgba = cssToRGB(cssColor);\n\n rgba.a = alpha;\n\n return `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})`;\n}\n","import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport ParamTypes from 'Common/util/ParamTypes';\nimport { paramTest } from 'Common/util/ParamTypes/ParamTypes';\nimport styled from 'styled-components';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport useLocale from 'Common/hooks/useLocale';\nimport { getDefaultFormatter } from 'Common/data/defaultFormatters';\nimport { getTextColorForBackground } from 'Common/util/color/util';\nimport ErrorIndicator from '../ErrorIndicator';\n\nconst Root = styled.div`\n display: inline-block;\n`;\n\nconst MetricContent = styled.div`\n display: inline-block;\n`;\n\nconst MetricText = styled.div`\n display: inline-block;\n`;\n\nconst ErrorContainer = styled.div`\n display: inline-block;\n margin-right: 4px;\n`;\n\nexport const HEAT_BLOB_WIDTH = 8;\nexport const HEAT_BLOB_MARGIN = 4;\nconst BLOB_HEIGHT = 16;\n\nconst HeatBlobElement = styled.div.attrs(props => ({\n style: {\n backgroundColor: props.color\n }\n}))`\n display: inline-block;\n height: ${BLOB_HEIGHT}px;\n width: ${HEAT_BLOB_WIDTH}px;\n margin-left: ${HEAT_BLOB_MARGIN}px;\n border-radius: 0.2em;\n`;\n\n\nexport function getBlobStyleForHeat(heatColor) {\n if (heatColor) {\n return {\n backgroundColor: heatColor,\n color: getTextColorForBackground(heatColor),\n };\n }\n}\n\n/**\n * @param {String} severity the severity based on where it fit in metric alerts\n * (best, good, warning, caution, critical)\n * @param {Object} blobStyle the style that was already created for the blob will be re-used for very-bad\n * @param {boolean} heatColor Should it the color of the metric value for non-very-bad_metrics match heat color\n */\nexport function getMetricStyleFromBlob(severity, blobStyle, heatColor) {\n if (severity === 'critical') {\n return {\n ...blobStyle,\n borderRadius: '0.3em',\n fontWeight: 500,\n paddingLeft: '0.3em',\n paddingRight: '0.3em',\n };\n }\n else if (blobStyle && heatColor) {\n return {\n color: blobStyle.backgroundColor,\n paddingLeft: '0.3em',\n paddingRight: '0.3em',\n };\n }\n else {\n return {};\n }\n}\n\nexport function isNullValue(rawValue) {\n return rawValue === null || rawValue === undefined || Number.isNaN(rawValue);\n}\n\n/**\n * Gets the text value for this metric.\n * @param {Object} formatType The formatType that describes the metric value.\n * @param {Object} rawValue The rawValue that makes up the metric value.\n * @param {Function} translator Translates keys to correct text\n * @param {String} locale Client locale\n * \n * @return {String}\n */\n export function getMetricText(parameters) {\n paramTest(parameters, ParamTypes.shape({\n formatType: ParamTypes.string,\n rawValue: ParamTypes.any,\n locale: ParamTypes.string.isRequired,\n translator: ParamTypes.func.isRequired,\n }), 'getMetricText');\n\n const {\n formatType,\n rawValue,\n locale,\n translator,\n } = parameters;\n\n const isNull = isNullValue(rawValue);\n let newRawValue = rawValue;\n // id_array be an empty array if it is null.\n // This sets the proper null value according to Type.js\n if (isNull && formatType !== 'invalid') {\n if (formatType === 'id_array') {\n newRawValue = [];\n }\n else {\n return translator('null_metric_literal');\n }\n }\n\n const valueFormatter = getDefaultFormatter({\n type: formatType,\n locale,\n translator,\n });\n\n let t = valueFormatter ? valueFormatter(newRawValue, {react: true}) : newRawValue;\n return t;\n}\n\n/**\n * A React component that renders a visual representation of a metric.\n * Takes in at minimum a format type and a rawValue which will be\n * formatted and rendered out.\n *\n * @param {Object} data The data that makes up the metric value.\n * @param {String[]} [error] List of any errors to be displayed in\n * place of the metric.\n * @param {boolean} [showHeatBlob=true] When true we show a heat colored\n * blob next to the value. Only applies to heat mappable metrics.\n * @param {boolean} [noColor=false] When true, don't render the metric\n * with any non-grey-scale colors. Mostly used for printing.\n */\nfunction Metric({\n data,\n error,\n noColor,\n showHeatBlob,\n\n // Used to forward style information\n className,\n style,\n}) {\n const {\n rawValue,\n formatType,\n heatConfig,\n } = (data || {});\n\n const translator = useTranslator();\n const locale = useLocale();\n\n const formattedValue = useMemo(() => {\n return getMetricText({ formatType, locale, translator, rawValue });\n }, [formatType, locale, translator, rawValue]);\n\n let content;\n\n if (heatConfig && !noColor) {\n const getReactHeatBlob = (blobStyle) => {\n if (blobStyle && showHeatBlob) {\n return (\n \n );\n }\n };\n\n const blobStyle = getBlobStyleForHeat(heatConfig.color);\n const metricStyle = getMetricStyleFromBlob(heatConfig.severity, blobStyle, !showHeatBlob);\n\n content = (\n \n {formattedValue}\n {getReactHeatBlob(blobStyle)}\n \n );\n }\n else {\n content = {formattedValue};\n }\n\n return (\n \n {error && }\n {content}\n \n );\n}\n\nMetric.propTypes = {\n error: PropTypes.arrayOf(PropTypes.string),\n data: PropTypes.shape({\n name: PropTypes.string,\n formatType: PropTypes.string.isRequired,\n rawValue: PropTypes.any,\n\n heatConfig: PropTypes.shape({\n severity: PropTypes.oneOf([\n 'best',\n 'good',\n 'warning',\n 'caution',\n 'critical',\n 'unknown',\n ]).isRequired,\n color: PropTypes.string,\n }),\n }),\n noColor: PropTypes.bool,\n showHeatBlob: PropTypes.bool,\n\n className: PropTypes.string,\n style: PropTypes.object,\n};\n\nMetric.defaultProps = {\n noColor: false,\n showHeatBlob: true,\n};\n\nexport default Metric;\n","import Metric from './Metric';\n\nexport default Metric;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport CategoryValue from './CategoryValue';\nimport { categoryValueFormatTypes } from './CategoryValue/CategoryValue';\nimport Metric from './Metric';\n\nfunction FormattedDatum({\n data,\n noColor,\n error,\n\n // Forward other props to inner elements\n ...otherProps\n}) {\n let content = null;\n const formatType = data?.formatType;\n\n if (categoryValueFormatTypes.includes(formatType)) {\n content = (\n \n );\n }\n else {\n content = (\n \n );\n }\n\n return content;\n}\n\nFormattedDatum.propTypes = {\n data: PropTypes.shape({\n // These are common to all data types\n name: PropTypes.string,\n formatType: PropTypes.string.isRequired,\n rawValue: PropTypes.any,\n\n // Additional fields that are not common are still\n // forwarded to the child components.\n //\n }),\n error: PropTypes.arrayOf(PropTypes.string),\n noColor: PropTypes.bool,\n};\n\nFormattedDatum.defaultProps = {\n noColor: false,\n};\n\nexport default FormattedDatum;\n","import FormattedDatum from './FormattedDatum';\n\nexport default FormattedDatum;\n","import { rgbToCss, interpolateColor } from 'Common/util/color/util';\nimport keyBy from 'lodash/keyBy';\nimport isNumber from 'lodash/isNumber';\n\nconst DEFAULT_COLOR = 'rgba(170,170,170,0.32)';\n\nconst BASE_HEAT_MAP_CONFIG = [\n {\n name: 'critical',\n baseColor: { r: 139, g: 0, b: 0 },\n baseMonochrome: { r: 51, g: 51, b: 51 },\n },\n {\n name: 'warning',\n baseColor: { r: 217, g: 17, b: 17 },\n baseMonochrome: { r: 102, g: 102, b: 102 },\n },\n {\n name: 'caution',\n baseColor: { r: 255, g: 191, b: 0 },\n baseMonochrome: { r: 153, g: 153, b: 153 },\n },\n {\n name: 'good',\n baseColor: { r: 34, g: 139, b: 34 },\n baseMonochrome: { r: 204, g: 204, b: 204 },\n },\n {\n name: 'best',\n baseColor: { r: 0, g: 100, b: 0 },\n baseMonochrome: { r: 238, g: 238, b: 238 },\n },\n];\n\nconst METRIC_LIMITS = {\n efficiency: {\n min: 0,\n max: 1.2,\n },\n default: {\n min: 0,\n max: 1,\n },\n};\n\nfunction getHeatMapConfig(columnName, metricAlertConfig) {\n const directionality = metricAlertConfig.directionality;\n const rangesBySeverity = keyBy(metricAlertConfig.ranges, (item) => item.name);\n\n let heatMapConfigBySeverity = BASE_HEAT_MAP_CONFIG\n .reduce((map, heatMapConfigItem) => {\n const severity = heatMapConfigItem.name;\n const { min, max } = rangesBySeverity[severity] || {};\n\n map[severity] = {\n ...heatMapConfigItem,\n min: min,\n max: max,\n };\n\n return map;\n }, {});\n\n const metricLimits = METRIC_LIMITS[columnName] || METRIC_LIMITS.default;\n\n const critical = { ...heatMapConfigBySeverity.critical };\n const good = { ...heatMapConfigBySeverity.good };\n const best = { ...heatMapConfigBySeverity.best };\n\n if (directionality === 'lower_better') {\n if (critical.min >= metricLimits.max) {\n critical.min = undefined;\n }\n else {\n critical.max = metricLimits.max;\n }\n\n if (good.max <= metricLimits.min) {\n good.min = good.max;\n }\n else {\n good.min = metricLimits.min;\n best.max = metricLimits.min;\n }\n }\n else {\n if (critical.max <= metricLimits.min) {\n critical.max = undefined;\n }\n else {\n critical.min = metricLimits.min;\n }\n\n if (good.min >= metricLimits.max) {\n good.max = good.min;\n }\n else {\n good.max = metricLimits.max;\n best.min = metricLimits.max;\n }\n }\n\n heatMapConfigBySeverity = {\n ...heatMapConfigBySeverity,\n critical: critical,\n good: good,\n best: best,\n };\n\n let severityOrder = BASE_HEAT_MAP_CONFIG.map(item => item.name);\n\n if (directionality === 'lower_better') {\n severityOrder = severityOrder.reverse();\n }\n\n return severityOrder\n .map((severity) => {\n return heatMapConfigBySeverity[severity];\n })\n // We don't want to include unused thresholds\n .filter((heatMapConfigItem) => {\n return isNumber(heatMapConfigItem.min) || isNumber(heatMapConfigItem.max);\n });\n}\n\nfunction getHeatMapColor(columnName, value, metricAlertConfig, { noColor = false } = {}) {\n const heatMapConfig = getHeatMapConfig(columnName, metricAlertConfig);\n\n let rgbColor;\n\n if (value) {\n const first = heatMapConfig[0];\n const last = heatMapConfig[heatMapConfig.length - 1];\n\n const firstMin = isNumber(first.min) ? first.min : first.max;\n const firstMax = isNumber(last.max) ? last.max : last.min;\n\n const colorKey = noColor ? 'baseMonochrome' : 'baseColor';\n\n if (value <= firstMin) {\n rgbColor = first[colorKey];\n }\n else if (value >= firstMax) {\n rgbColor = last[colorKey];\n }\n else if (!Number.isNaN(value)) {\n const thresholdIndex = heatMapConfig.findIndex((configItem) => {\n if (!configItem) {\n return false;\n }\n\n const { min, max } = configItem;\n\n return (value >= min) && (value < max);\n });\n\n let { min, max, [colorKey]: baseColor } = heatMapConfig[thresholdIndex];\n\n let nextIndex;\n\n if (metricAlertConfig.directionality === 'lower_better') {\n nextIndex = thresholdIndex - 1;\n\n const oldMin = min;\n\n min = max;\n max = oldMin;\n }\n else {\n nextIndex = thresholdIndex + 1;\n }\n\n let { [colorKey]: nextColor } = heatMapConfig[nextIndex];\n\n // Interpolate the color between its surrounding severity colors.\n {\n const maxDiff = max - min;\n const actualDiff = value - min;\n const factor = actualDiff / maxDiff;\n\n rgbColor = interpolateColor(baseColor, nextColor, factor);\n }\n }\n }\n\n return rgbColor ? rgbToCss(rgbColor) : DEFAULT_COLOR;\n}\n\nfunction getHeatSeverity(rawValue, metricAlertConfig) {\n const stateSet = metricAlertConfig && metricAlertConfig.ranges;\n let severity = 'unknown';\n\n if (stateSet && stateSet.some) {\n stateSet.some((state) => {\n const {\n min = -Infinity,\n max = Infinity,\n name,\n } = state;\n\n if ((rawValue > min) && (rawValue <= max)) {\n severity = name;\n return true; // stop looking\n }\n });\n }\n\n return severity;\n}\n\n// [TODO] Document this\nexport function getHeatConfig(columnName, rawValue, metricAlertConfig) {\n const severity = getHeatSeverity(rawValue, metricAlertConfig);\n let color;\n\n if (metricAlertConfig) {\n color = getHeatMapColor(columnName, rawValue, metricAlertConfig);\n }\n\n return {\n severity,\n color,\n };\n}\n","\nimport React from 'react';\nimport { getColumnFormatType } from './getColumnFormatType';\nimport {\n channel_schema\n} from './ChannelSchema';\nimport FormattedDatum from 'Common/components/FormattedDatum';\nimport { OffsetDate } from 'Common/data/date/OffsetDate';\nimport { getHeatConfig } from './HeatMapColors';\n\nexport const metricOptions = [\n {\n 'name': 'counts',\n 'displayName': 'Counts',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'pack_out_count',\n 'channel': 'production_metric',\n 'displayName': 'End of Line Count',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'count'\n },\n {\n 'name': 'good_count',\n 'channel': 'production_metric',\n 'displayName': 'Good Count',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'count'\n },\n {\n 'name': 'in_count',\n 'channel': 'production_metric',\n 'displayName': 'In Count',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'count'\n },\n {\n 'name': 'percent_good',\n 'channel': 'production_metric',\n 'displayName': 'Percent Good',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'percent_reject',\n 'channel': 'production_metric',\n 'displayName': 'Percent Reject',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'production_rejects',\n 'channel': 'production_metric',\n 'displayName': 'Production Rejects',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'count'\n },\n {\n 'name': 'reject_count',\n 'channel': 'production_metric',\n 'displayName': 'Reject Count',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'count'\n },\n {\n 'name': 'startup_rejects',\n 'channel': 'production_metric',\n 'displayName': 'Startup Rejects',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'count'\n },\n {\n 'name': 'total_count',\n 'channel': 'production_metric',\n 'displayName': 'Total Count',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'count'\n }\n ]\n },\n {\n 'name': 'cycles',\n 'displayName': 'Cycles',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'average_cycle_time',\n 'channel': 'production_metric',\n 'displayName': 'Avg. Cycle Time',\n 'fieldType': 'metric',\n 'type': 'time_span',\n 'subType': 'cycle_time'\n },\n {\n 'name': 'average_ideal_cycle_time',\n 'channel': 'production_metric',\n 'displayName': 'Avg. Ideal Cycle Time',\n 'fieldType': 'metric',\n 'type': 'time_span',\n 'subType': 'cycle_time'\n },\n {\n 'name': 'average_run_cycle_time',\n 'channel': 'production_metric',\n 'displayName': 'Avg. Run Cycle Time',\n 'fieldType': 'metric',\n 'type': 'time_span',\n 'subType': 'cycle_time'\n },\n {\n 'name': 'average_small_stop_time',\n 'channel': 'production_metric',\n 'displayName': 'Avg. Small Stop Time',\n 'fieldType': 'metric',\n 'type': 'time_span',\n 'subType': 'cycle_time'\n },\n {\n 'name': 'equipment_cycles',\n 'channel': 'production_metric',\n 'displayName': 'Equipment Cycles',\n 'fieldType': 'metric',\n 'type': 'uint64'\n },\n {\n 'name': 'ideal_time',\n 'channel': 'production_metric',\n 'displayName': 'Ideal Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'partial_cycle_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Partial Cycle Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'partial_cycles',\n 'channel': 'production_metric',\n 'displayName': 'Partial Cycles',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'cycle'\n },\n {\n 'name': 'run_cycle_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Run Cycle Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'run_cycles',\n 'channel': 'production_metric',\n 'displayName': 'Run Cycles',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'cycle'\n },\n {\n 'name': 'small_stops',\n 'channel': 'production_metric',\n 'displayName': 'Small Stops',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'cycle'\n },\n {\n 'name': 'total_cycle_time',\n 'channel': 'production_metric',\n 'displayName': 'Total Cycle Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'total_cycles',\n 'channel': 'production_metric',\n 'displayName': 'Total Cycles',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'cycle'\n }\n ]\n },\n {\n 'name': 'labor',\n 'displayName': 'Labor',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'earned_labor',\n 'channel': 'production_metric',\n 'displayName': 'Earned Labor',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'good_pieces_per_labor_hour',\n 'channel': 'production_metric',\n 'displayName': 'Good Pieces per Labor Hour',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'labor_efficiency',\n 'channel': 'production_metric',\n 'displayName': 'Labor Efficiency',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'labor_per_good_piece',\n 'channel': 'production_metric',\n 'displayName': 'Labor per Good Piece',\n 'fieldType': 'metric',\n 'type': 'time_span',\n 'subType': 'cycle_time'\n },\n {\n 'name': 'labor_per_piece',\n 'channel': 'production_metric',\n 'displayName': 'Labor per Piece',\n 'fieldType': 'metric',\n 'type': 'time_span',\n 'subType': 'cycle_time'\n },\n {\n 'name': 'lost_labor',\n 'channel': 'production_metric',\n 'displayName': 'Lost Labor',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'pieces_per_labor_hour',\n 'channel': 'production_metric',\n 'displayName': 'Pieces per Labor Hour',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'target_labor_per_piece',\n 'channel': 'production_metric',\n 'displayName': 'Target Labor per Piece',\n 'fieldType': 'metric',\n 'type': 'time_span',\n 'subType': 'cycle_time'\n },\n {\n 'name': 'average_team_size',\n 'channel': 'production_metric',\n 'displayName': 'Team Size',\n 'fieldType': 'metric',\n 'type': 'double'\n },\n {\n 'name': 'labor',\n 'channel': 'production_metric',\n 'displayName': 'Total Labor',\n 'fieldType': 'metric',\n 'type': 'time_span'\n }\n ]\n },\n {\n 'name': 'oee',\n 'displayName': 'OEE',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'availability',\n 'channel': 'production_metric',\n 'displayName': 'Availability',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'availability_loss',\n 'channel': 'production_metric',\n 'displayName': 'Availability Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'availability_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Availability Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'fully_productive_time',\n 'channel': 'production_metric',\n 'displayName': 'Fully Productive Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'oee',\n 'channel': 'production_metric',\n 'displayName': 'OEE',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'oee_loss',\n 'channel': 'production_metric',\n 'displayName': 'OEE Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'oee_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'OEE Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'performance',\n 'channel': 'production_metric',\n 'displayName': 'Performance',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'performance_loss',\n 'channel': 'production_metric',\n 'displayName': 'Performance Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'performance_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Performance Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'quality',\n 'channel': 'production_metric',\n 'displayName': 'Quality',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'quality_loss',\n 'channel': 'production_metric',\n 'displayName': 'Quality Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'quality_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Quality Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n }\n ]\n },\n {\n 'name': 'production_times',\n 'displayName': 'Production Times',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'all_time',\n 'channel': 'production_metric',\n 'displayName': 'All Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'down_time',\n 'channel': 'production_metric',\n 'displayName': 'Down Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'duration',\n 'channel': 'production_metric',\n 'displayName': 'Duration',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'end_time',\n 'channel': 'production_metric',\n 'displayName': 'End Time',\n 'fieldType': 'metric',\n 'type': 'date_time'\n },\n {\n 'name': 'manufacturing_time',\n 'channel': 'production_metric',\n 'displayName': 'Manufacturing Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'not_scheduled_time',\n 'channel': 'production_metric',\n 'displayName': 'Not Scheduled Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'percent_down',\n 'channel': 'production_metric',\n 'displayName': 'Percent Down',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'percent_planned_stop',\n 'channel': 'production_metric',\n 'displayName': 'Percent Planned Stop',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'percent_run',\n 'channel': 'production_metric',\n 'displayName': 'Percent Run',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'percent_unplanned_stop',\n 'channel': 'production_metric',\n 'displayName': 'Percent Unplanned Stop',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'planned_stop_time',\n 'channel': 'production_metric',\n 'displayName': 'Planned Stop Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'production_time',\n 'channel': 'production_metric',\n 'displayName': 'Production Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'run_time',\n 'channel': 'production_metric',\n 'displayName': 'Run Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'start_time',\n 'channel': 'production_metric',\n 'displayName': 'Start Time',\n 'fieldType': 'metric',\n 'type': 'date_time'\n },\n {\n 'name': 'unplanned_stop_time',\n 'channel': 'production_metric',\n 'displayName': 'Unplanned Stop Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n }\n ]\n },\n {\n 'name': 'rates',\n 'displayName': 'Rates',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'pack_out_rate_per_hour',\n 'channel': 'production_metric',\n 'displayName': 'End of Line Rate PPH',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate_per_hour'\n },\n {\n 'name': 'pack_out_rate',\n 'channel': 'production_metric',\n 'displayName': 'End of Line Rate PPM',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'pack_out_speed_per_hour',\n 'channel': 'production_metric',\n 'displayName': 'End of Line Speed PPH',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate_per_hour'\n },\n {\n 'name': 'pack_out_speed',\n 'channel': 'production_metric',\n 'displayName': 'End of Line Speed PPM',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'good_rate_per_hour',\n 'channel': 'production_metric',\n 'displayName': 'Good Rate PPH',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate_per_hour'\n },\n {\n 'name': 'good_rate',\n 'channel': 'production_metric',\n 'displayName': 'Good Rate PPM',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'good_speed_per_hour',\n 'channel': 'production_metric',\n 'displayName': 'Good Speed PPH',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate_per_hour'\n },\n {\n 'name': 'good_speed',\n 'channel': 'production_metric',\n 'displayName': 'Good Speed PPM',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'in_rate_per_hour',\n 'channel': 'production_metric',\n 'displayName': 'In Rate PPH',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate_per_hour'\n },\n {\n 'name': 'in_rate',\n 'channel': 'production_metric',\n 'displayName': 'In Rate PPM',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'in_speed_per_hour',\n 'channel': 'production_metric',\n 'displayName': 'In Speed PPH',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate_per_hour'\n },\n {\n 'name': 'in_speed',\n 'channel': 'production_metric',\n 'displayName': 'In Speed PPM',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'reject_rate_per_hour',\n 'channel': 'production_metric',\n 'displayName': 'Reject Rate PPH',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate_per_hour'\n },\n {\n 'name': 'reject_rate',\n 'channel': 'production_metric',\n 'displayName': 'Reject Rate PPM',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'reject_speed_per_hour',\n 'channel': 'production_metric',\n 'displayName': 'Reject Speed PPH',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate_per_hour'\n },\n {\n 'name': 'reject_speed',\n 'channel': 'production_metric',\n 'displayName': 'Reject Speed PPM',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'target_rate_per_hour',\n 'channel': 'production_metric',\n 'displayName': 'Target Rate PPH',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate_per_hour'\n },\n {\n 'name': 'target_rate',\n 'channel': 'production_metric',\n 'displayName': 'Target Rate PPM',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'total_rate_per_hour',\n 'channel': 'production_metric',\n 'displayName': 'Total Rate PPH',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate_per_hour'\n },\n {\n 'name': 'total_rate',\n 'channel': 'production_metric',\n 'displayName': 'Total Rate PPM',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'total_speed_per_hour',\n 'channel': 'production_metric',\n 'displayName': 'Total Speed PPH',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate_per_hour'\n },\n {\n 'name': 'total_speed',\n 'channel': 'production_metric',\n 'displayName': 'Total Speed PPM',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n }\n ]\n },\n {\n 'name': 'six_big_losses',\n 'displayName': 'Six Big Losses',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'cycle_loss',\n 'channel': 'production_metric',\n 'displayName': 'Cycle Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'cycle_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Cycle Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'down_loss',\n 'channel': 'production_metric',\n 'displayName': 'Down Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'down_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Down Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'planned_stop_loss',\n 'channel': 'production_metric',\n 'displayName': 'Planned Stop Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'planned_stop_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Planned Stop Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'production_reject_loss',\n 'channel': 'production_metric',\n 'displayName': 'Production Reject Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'production_reject_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Production Reject Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'small_stop_loss',\n 'channel': 'production_metric',\n 'displayName': 'Small Stop Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'small_stop_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Small Stop Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'startup_reject_loss',\n 'channel': 'production_metric',\n 'displayName': 'Startup Reject Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'startup_reject_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Startup Reject Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'unplanned_stop_loss',\n 'channel': 'production_metric',\n 'displayName': 'Unplanned Stop Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'unplanned_stop_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Unplanned Stop Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n }\n ]\n },\n {\n 'name': 'target',\n 'displayName': 'Target',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'average_takt_time',\n 'channel': 'production_metric',\n 'displayName': 'Avg. Takt Time',\n 'fieldType': 'metric',\n 'type': 'time_span',\n 'subType': 'cycle_time'\n },\n {\n 'name': 'count_variance',\n 'channel': 'production_metric',\n 'displayName': 'Count Variance',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'count'\n },\n {\n 'name': 'efficiency',\n 'channel': 'production_metric',\n 'displayName': 'Efficiency',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'percent_variance',\n 'channel': 'production_metric',\n 'displayName': 'Percent Variance',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'rate_efficiency',\n 'channel': 'production_metric',\n 'displayName': 'Rate Efficiency',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n\n {\n 'name': 'target_count',\n 'channel': 'production_metric',\n 'displayName': 'Target Count',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'count'\n },\n {\n 'name': 'target_cycles',\n 'channel': 'production_metric',\n 'displayName': 'Target Cycles',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'cycle'\n },\n {\n 'name': 'time_variance',\n 'channel': 'production_metric',\n 'displayName': 'Time Variance',\n 'fieldType': 'metric',\n 'type': 'time_span'\n }\n ]\n },\n {\n 'name': 'teep',\n 'displayName': 'TEEP',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'hidden_factory_time',\n 'channel': 'production_metric',\n 'displayName': 'Hidden Factory Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'production_loss',\n 'channel': 'production_metric',\n 'displayName': 'Production Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'production_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Production Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'capacity_loss',\n 'channel': 'production_metric',\n 'displayName': 'Schedule Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'capacity_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Schedule Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'teep',\n 'channel': 'production_metric',\n 'displayName': 'TEEP',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'utilization',\n 'channel': 'production_metric',\n 'displayName': 'Utilization',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n }\n ]\n }\n];\n\nexport const hierarchyNodeOptions = [\n {\n 'displayName': 'Enterprise',\n 'iconClass': 'vorne-icon vorne-icon-globe',\n 'level': 0,\n 'name': '3eb732c7-aeaa-4e46-8ac1-bfccd1d537a9',\n 'isAsset': false\n },\n {\n 'displayName': 'Site',\n 'iconClass': 'vorne-icon vorne-icon-factory',\n 'level': 1,\n 'name': 'fc76e8de-f046-46e5-803a-d1f5230b69a5',\n 'isAsset': false\n },\n {\n 'displayName': 'Area',\n 'iconClass': 'vorne-icon vorne-icon-department',\n 'level': 2,\n 'name': '0f1deb3a-b76e-45be-b033-bce3417f7565',\n 'isAsset': false\n },\n {\n 'displayName': 'XL810-1',\n 'iconClass': 'vorne-icon vorne-icon-gear',\n 'level': 3,\n 'name': 'self',\n 'isAsset': true\n }\n];\n\nexport const filterOptions = {\n 'metrics': [],\n 'categories': [\n {\n 'displayName': 'Production',\n 'name': 'production',\n 'entries': [\n {\n 'name': 'shift',\n 'displayName': 'Shift',\n 'channel': 'production_metric',\n 'fieldType': 'category_value',\n 'type': 'string',\n 'grouping': -1,\n 'groupName': 'team',\n 'groupingLevel': 0,\n 'assetLevel': null,\n 'isAssetBased': false\n },\n {\n 'name': 'team',\n 'displayName': 'Team',\n 'channel': 'production_metric',\n 'fieldType': 'category_value',\n 'type': 'string',\n 'grouping': -1,\n 'groupName': 'team',\n 'groupingLevel': 1,\n 'assetLevel': null,\n 'isAssetBased': false\n },\n {\n 'name': 'part',\n 'displayName': 'Part',\n 'channel': 'production_metric',\n 'fieldType': 'category_value',\n 'type': 'string',\n 'grouping': 0,\n 'groupName': 'production',\n 'groupingLevel': 2,\n 'assetLevel': null,\n 'isAssetBased': false\n },\n {\n 'name': 'job',\n 'displayName': 'Job',\n 'channel': 'production_metric',\n 'fieldType': 'category_value',\n 'type': 'string',\n 'grouping': 0,\n 'groupName': 'production',\n 'groupingLevel': 3,\n 'assetLevel': null,\n 'isAssetBased': false\n },\n {\n 'name': 'process_state',\n 'displayName': 'Production State',\n 'channel': 'production_metric',\n 'fieldType': 'category_value',\n 'type': 'string',\n 'grouping': 1,\n 'groupName': 'process_state',\n 'groupingLevel': 4,\n 'assetLevel': null,\n 'isAssetBased': false\n },\n {\n 'name': 'process_state_reason',\n 'displayName': 'Reason',\n 'channel': 'production_metric',\n 'fieldType': 'category_value',\n 'type': 'string',\n 'grouping': 1,\n 'groupName': 'process_state',\n 'groupingLevel': 5,\n 'assetLevel': null,\n 'isAssetBased': false\n },\n {\n 'name': 'performance_impact',\n 'displayName': 'Impact',\n 'channel': 'production_metric',\n 'fieldType': 'category_value',\n 'type': 'string',\n 'grouping': 2,\n 'groupName': 'impact',\n 'groupingLevel': 6,\n 'assetLevel': null,\n 'isAssetBased': false\n },\n {\n 'name': 'production_phase',\n 'displayName': 'Production Phase',\n 'channel': 'production_metric',\n 'fieldType': 'category_value',\n 'type': 'string',\n 'grouping': 2,\n 'groupName': 'impact',\n 'groupingLevel': 7,\n 'assetLevel': null,\n 'isAssetBased': false\n }\n ]\n },\n {\n 'displayName': 'Date and Time',\n 'name': 'date_and_time',\n 'entries': [\n {\n 'name': 'shift_hour',\n 'displayName': 'Hour',\n 'channel': 'production_metric',\n 'fieldType': 'category_value',\n 'type': 'string',\n 'grouping': -1,\n 'groupName': 'time_based',\n 'groupingLevel': 0,\n 'assetLevel': null,\n 'isAssetBased': false,\n 'short_description_key': 'shift_hour_short_description'\n },\n {\n 'name': 'ordinal_shift',\n 'displayName': 'Ordinal Shift',\n 'channel': 'production_metric',\n 'fieldType': 'category_value',\n 'type': 'string',\n 'grouping': -1,\n 'groupName': 'time_based',\n 'groupingLevel': 1,\n 'assetLevel': null,\n 'isAssetBased': false,\n 'short_description_key': 'ordinal_shift_short_description'\n },\n {\n 'name': 'production_day',\n 'displayName': 'Day of Week',\n 'channel': 'production_metric',\n 'fieldType': 'category_value',\n 'type': 'string',\n 'grouping': -1,\n 'groupName': 'time_based',\n 'groupingLevel': 3,\n 'assetLevel': null,\n 'isAssetBased': false,\n 'short_description_key': 'production_day_short_description'\n },\n {\n 'name': 'week',\n 'displayName': 'Week',\n 'channel': 'production_metric',\n 'fieldType': 'category_value',\n 'type': 'string',\n 'grouping': -1,\n 'groupName': 'time_based',\n 'groupingLevel': 4,\n 'assetLevel': null,\n 'isAssetBased': false,\n 'short_description_key': 'week_short_description'\n },\n {\n 'name': 'month',\n 'displayName': 'Month',\n 'channel': 'production_metric',\n 'fieldType': 'category_value',\n 'type': 'string',\n 'grouping': -1,\n 'groupName': 'time_based',\n 'groupingLevel': 6,\n 'assetLevel': null,\n 'isAssetBased': false,\n 'short_description_key': 'month_short_description'\n },\n {\n 'name': 'quarter',\n 'displayName': 'Quarter',\n 'channel': 'production_metric',\n 'fieldType': 'category_value',\n 'type': 'string',\n 'grouping': -1,\n 'groupName': 'time_based',\n 'groupingLevel': 7,\n 'assetLevel': null,\n 'isAssetBased': false,\n 'short_description_key': 'quarter_short_description'\n },\n {\n 'name': 'year',\n 'displayName': 'Year',\n 'channel': 'production_metric',\n 'fieldType': 'category_value',\n 'type': 'string',\n 'grouping': -1,\n 'groupName': 'time_based',\n 'groupingLevel': 8,\n 'assetLevel': null,\n 'isAssetBased': false,\n 'short_description_key': 'year_short_description'\n }\n ]\n }\n ],\n 'values': {\n 'shift': [\n {\n 'name': 'none',\n 'displayName': 'none',\n 'isDummyGroup': true,\n 'entries': [\n {\n 'name': 'first_shift',\n 'displayName': 'First Shift'\n },\n {\n 'name': 'second_shift',\n 'displayName': 'Second Shift'\n },\n {\n 'name': 'third_shift',\n 'displayName': 'Third Shift'\n },\n {\n 'name': 'unknown',\n 'displayName': 'Unknown Shift'\n }\n ]\n }\n ],\n 'team': [\n {\n 'name': 'none',\n 'displayName': 'none',\n 'isDummyGroup': true,\n 'entries': [\n {\n 'name': 'unknown',\n 'displayName': 'Unknown Team'\n }\n ]\n }\n ],\n 'part': [\n {\n 'name': 'none',\n 'displayName': 'none',\n 'isDummyGroup': true,\n 'entries': [\n {\n 'name': 'sample_part',\n 'displayName': 'Sample Part'\n },\n {\n 'name': 'unknown',\n 'displayName': 'Unknown Part'\n }\n ]\n }\n ],\n 'job': [\n {\n 'name': 'none',\n 'displayName': 'none',\n 'isDummyGroup': true,\n 'entries': [\n {\n 'name': 'unknown',\n 'displayName': 'Unknown Job'\n }\n ]\n }\n ],\n 'process_state': [\n {\n 'name': 'not_scheduled',\n 'displayName': 'Not Scheduled (Excluded from OEE)',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'meeting',\n 'displayName': 'Meeting',\n 'link': 'not_scheduled'\n },\n {\n 'name': 'break',\n 'displayName': 'Meal/Break',\n 'link': 'not_scheduled'\n },\n {\n 'name': 'no_production',\n 'displayName': 'No Production',\n 'link': 'not_scheduled'\n },\n {\n 'name': 'not_monitored',\n 'displayName': 'Not Monitored',\n 'link': 'not_scheduled'\n }\n ]\n },\n {\n 'name': 'planned_stop',\n 'displayName': 'Planned Stop',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'maintenance',\n 'displayName': 'Maintenance',\n 'link': 'planned_stop'\n },\n {\n 'name': 'changeover',\n 'displayName': 'Changeover',\n 'link': 'planned_stop'\n }\n ]\n },\n {\n 'name': 'run',\n 'displayName': 'Run',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'running',\n 'displayName': 'Running',\n 'link': 'run'\n },\n {\n 'name': 'running_slow',\n 'displayName': 'Running Slow',\n 'link': 'run'\n },\n {\n 'name': 'running_poor_quality',\n 'displayName': 'Running Poor Quality',\n 'link': 'run'\n },\n {\n 'name': 'running_poorly',\n 'displayName': 'Running Poorly',\n 'link': 'run'\n }\n ]\n },\n {\n 'name': 'unplanned_stop',\n 'displayName': 'Unplanned Stop',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'down',\n 'displayName': 'Down',\n 'link': 'unplanned_stop'\n }\n ]\n }\n ],\n 'process_state_reason': [\n {\n 'name': 'changeover',\n 'displayName': 'Changeover',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'material_change',\n 'displayName': 'Material Change',\n 'link': 'changeover'\n },\n {\n 'name': 'part_change',\n 'displayName': 'Part Change',\n 'link': 'changeover'\n },\n {\n 'name': 'changeover',\n 'displayName': 'Setup',\n 'link': 'changeover'\n }\n ]\n },\n {\n 'name': 'down',\n 'displayName': 'Down',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'adjustment',\n 'displayName': 'Adjustment',\n 'link': 'down'\n },\n {\n 'name': 'autonomous_maintenance',\n 'displayName': 'Autonomous Maintenance',\n 'link': 'down'\n },\n {\n 'name': 'breakdown',\n 'displayName': 'Breakdown',\n 'link': 'down'\n },\n {\n 'name': 'jam',\n 'displayName': 'Jam',\n 'link': 'down'\n },\n {\n 'name': 'down',\n 'displayName': 'Missing Reason',\n 'link': 'down'\n },\n {\n 'name': 'no_material',\n 'displayName': 'No Material',\n 'link': 'down'\n },\n {\n 'name': 'no_operator',\n 'displayName': 'No Operator',\n 'link': 'down'\n }\n ]\n },\n {\n 'name': 'maintenance',\n 'displayName': 'Maintenance',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': '5s',\n 'displayName': '5S',\n 'link': 'maintenance'\n },\n {\n 'name': 'cleaning',\n 'displayName': 'Cleaning',\n 'link': 'maintenance'\n },\n {\n 'name': 'maintenance',\n 'displayName': 'General Maintenance',\n 'link': 'maintenance'\n },\n {\n 'name': 'lubrication',\n 'displayName': 'Lubrication',\n 'link': 'maintenance'\n }\n ]\n },\n {\n 'name': 'break',\n 'displayName': 'Meal/Break',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'break',\n 'displayName': 'Break',\n 'link': 'break'\n },\n {\n 'name': 'lunch',\n 'displayName': 'Lunch',\n 'link': 'break'\n }\n ]\n },\n {\n 'name': 'meeting',\n 'displayName': 'Meeting',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'safety_meeting',\n 'displayName': 'Safety Meeting',\n 'link': 'meeting'\n },\n {\n 'name': 'shift_handover',\n 'displayName': 'Shift Handover',\n 'link': 'meeting'\n },\n {\n 'name': 'meeting',\n 'displayName': 'Team Meeting',\n 'link': 'meeting'\n }\n ]\n },\n {\n 'name': 'no_production',\n 'displayName': 'No Production',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'no_orders',\n 'displayName': 'No Orders',\n 'link': 'no_production'\n },\n {\n 'name': 'no_production',\n 'displayName': 'No Shift Scheduled',\n 'link': 'no_production'\n },\n {\n 'name': 'no_process_state_enabled',\n 'displayName': 'No State Enabled',\n 'link': 'no_production'\n },\n {\n 'name': 'optional_shift_scheduled',\n 'displayName': 'Optional Shift Scheduled',\n 'link': 'no_production'\n },\n {\n 'name': 'shift_ended_early',\n 'displayName': 'Shift Ended Early',\n 'link': 'no_production'\n }\n ]\n },\n {\n 'name': 'not_monitored',\n 'displayName': 'Not Monitored',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'event_cleared',\n 'displayName': 'Event Cleared',\n 'link': 'not_monitored'\n },\n {\n 'name': 'not_monitored',\n 'displayName': 'Not Monitored',\n 'link': 'not_monitored'\n },\n {\n 'name': 'powered_off',\n 'displayName': 'Powered Off',\n 'link': 'not_monitored'\n },\n {\n 'name': 'upgrading',\n 'displayName': 'Upgrading',\n 'link': 'not_monitored'\n }\n ]\n },\n {\n 'name': 'running',\n 'displayName': 'Running',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'running',\n 'displayName': 'Running Normally',\n 'link': 'running'\n }\n ]\n },\n {\n 'name': 'running_poor_quality',\n 'displayName': 'Running Poor Quality',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'production_rejects',\n 'displayName': 'Production Rejects',\n 'link': 'running_poor_quality'\n },\n {\n 'name': 'running_poor_quality',\n 'displayName': 'Running Poor Quality',\n 'link': 'running_poor_quality'\n },\n {\n 'name': 'startup_rejects',\n 'displayName': 'Startup Rejects',\n 'link': 'running_poor_quality'\n }\n ]\n },\n {\n 'name': 'running_poorly',\n 'displayName': 'Running Poorly',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'running_poorly',\n 'displayName': 'Slow w/ Poor Quality',\n 'link': 'running_poorly'\n }\n ]\n },\n {\n 'name': 'running_slow',\n 'displayName': 'Running Slow',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'running_slow',\n 'displayName': 'Slow and/or Small Stops',\n 'link': 'running_slow'\n }\n ]\n }\n ],\n 'performance_impact': [\n {\n 'name': 'none',\n 'displayName': 'none',\n 'isDummyGroup': true,\n 'entries': [\n {\n 'name': 'run',\n 'displayName': 'Run'\n },\n {\n 'name': 'planned_stop',\n 'displayName': 'Planned Stop'\n },\n {\n 'name': 'unplanned_stop',\n 'displayName': 'Unplanned Stop'\n },\n {\n 'name': 'not_scheduled',\n 'displayName': 'Not Scheduled'\n }\n ]\n }\n ],\n 'production_phase': [\n {\n 'name': 'none',\n 'displayName': 'none',\n 'isDummyGroup': true,\n 'entries': [\n {\n 'name': 'changeover',\n 'displayName': 'Changeover'\n },\n {\n 'name': 'startup',\n 'displayName': 'Startup'\n },\n {\n 'name': 'steady_state',\n 'displayName': 'Steady State'\n }\n ]\n }\n ],\n 'shift_hour': [\n {\n 'name': 'none',\n 'displayName': 'none',\n 'isDummyGroup': true,\n 'entries': [\n {\n 'name': '1',\n 'displayName': 'Shift Hour 01'\n },\n {\n 'name': '2',\n 'displayName': 'Shift Hour 02'\n },\n {\n 'name': '3',\n 'displayName': 'Shift Hour 03'\n },\n {\n 'name': '4',\n 'displayName': 'Shift Hour 04'\n },\n {\n 'name': '5',\n 'displayName': 'Shift Hour 05'\n },\n {\n 'name': '6',\n 'displayName': 'Shift Hour 06'\n },\n {\n 'name': '7',\n 'displayName': 'Shift Hour 07'\n },\n {\n 'name': '8',\n 'displayName': 'Shift Hour 08'\n },\n {\n 'name': '9',\n 'displayName': 'Shift Hour 09'\n },\n {\n 'name': '10',\n 'displayName': 'Shift Hour 10'\n },\n {\n 'name': '11',\n 'displayName': 'Shift Hour 11'\n },\n {\n 'name': '12',\n 'displayName': 'Shift Hour 12'\n },\n {\n 'name': '13',\n 'displayName': 'Shift Hour 13'\n },\n {\n 'name': '14',\n 'displayName': 'Shift Hour 14'\n },\n {\n 'name': '15',\n 'displayName': 'Shift Hour 15'\n },\n {\n 'name': '16',\n 'displayName': 'Shift Hour 16'\n },\n {\n 'name': '17',\n 'displayName': 'Shift Hour 17'\n },\n {\n 'name': '18',\n 'displayName': 'Shift Hour 18'\n },\n {\n 'name': '19',\n 'displayName': 'Shift Hour 19'\n },\n {\n 'name': '20',\n 'displayName': 'Shift Hour 20'\n },\n {\n 'name': '21',\n 'displayName': 'Shift Hour 21'\n },\n {\n 'name': '22',\n 'displayName': 'Shift Hour 22'\n },\n {\n 'name': '23',\n 'displayName': 'Shift Hour 23'\n },\n {\n 'name': '24',\n 'displayName': 'Shift Hour 24'\n },\n {\n 'name': 'extra',\n 'displayName': 'Shift Hour 25+'\n }\n ]\n }\n ],\n 'ordinal_shift': [\n {\n 'name': 'none',\n 'displayName': 'none',\n 'isDummyGroup': true,\n 'entries': [\n {\n 'name': '1',\n 'displayName': 'Ordinal Shift 1'\n },\n {\n 'name': '2',\n 'displayName': 'Ordinal Shift 2'\n },\n {\n 'name': '3',\n 'displayName': 'Ordinal Shift 3'\n },\n {\n 'name': '4',\n 'displayName': 'Ordinal Shift 4'\n },\n {\n 'name': '5',\n 'displayName': 'Ordinal Shift 5'\n },\n {\n 'name': '6',\n 'displayName': 'Ordinal Shift 6'\n },\n {\n 'name': '7',\n 'displayName': 'Ordinal Shift 7'\n },\n {\n 'name': '8',\n 'displayName': 'Ordinal Shift 8'\n },\n {\n 'name': '9',\n 'displayName': 'Ordinal Shift 9+'\n }\n ]\n }\n ],\n 'production_day': [\n {\n 'name': 'none',\n 'displayName': 'none',\n 'isDummyGroup': true,\n 'entries': [\n {\n 'name': '0',\n 'displayName': 'Monday'\n },\n {\n 'name': '1',\n 'displayName': 'Tuesday'\n },\n {\n 'name': '2',\n 'displayName': 'Wednesday'\n },\n {\n 'name': '3',\n 'displayName': 'Thursday'\n },\n {\n 'name': '4',\n 'displayName': 'Friday'\n },\n {\n 'name': '5',\n 'displayName': 'Saturday'\n },\n {\n 'name': '6',\n 'displayName': 'Sunday'\n }\n ]\n }\n ],\n 'week': [\n {\n 'name': 'none',\n 'displayName': 'none',\n 'isDummyGroup': true,\n 'entries': [\n {\n 'name': '1',\n 'displayName': 'Week 01'\n },\n {\n 'name': '2',\n 'displayName': 'Week 02'\n },\n {\n 'name': '3',\n 'displayName': 'Week 03'\n },\n {\n 'name': '4',\n 'displayName': 'Week 04'\n },\n {\n 'name': '5',\n 'displayName': 'Week 05'\n },\n {\n 'name': '6',\n 'displayName': 'Week 06'\n },\n {\n 'name': '7',\n 'displayName': 'Week 07'\n },\n {\n 'name': '8',\n 'displayName': 'Week 08'\n },\n {\n 'name': '9',\n 'displayName': 'Week 09'\n },\n {\n 'name': '10',\n 'displayName': 'Week 10'\n },\n {\n 'name': '11',\n 'displayName': 'Week 11'\n },\n {\n 'name': '12',\n 'displayName': 'Week 12'\n },\n {\n 'name': '13',\n 'displayName': 'Week 13'\n },\n {\n 'name': '14',\n 'displayName': 'Week 14'\n },\n {\n 'name': '15',\n 'displayName': 'Week 15'\n },\n {\n 'name': '16',\n 'displayName': 'Week 16'\n },\n {\n 'name': '17',\n 'displayName': 'Week 17'\n },\n {\n 'name': '18',\n 'displayName': 'Week 18'\n },\n {\n 'name': '19',\n 'displayName': 'Week 19'\n },\n {\n 'name': '20',\n 'displayName': 'Week 20'\n },\n {\n 'name': '21',\n 'displayName': 'Week 21'\n },\n {\n 'name': '22',\n 'displayName': 'Week 22'\n },\n {\n 'name': '23',\n 'displayName': 'Week 23'\n },\n {\n 'name': '24',\n 'displayName': 'Week 24'\n },\n {\n 'name': '25',\n 'displayName': 'Week 25'\n },\n {\n 'name': '26',\n 'displayName': 'Week 26'\n },\n {\n 'name': '27',\n 'displayName': 'Week 27'\n },\n {\n 'name': '28',\n 'displayName': 'Week 28'\n },\n {\n 'name': '29',\n 'displayName': 'Week 29'\n },\n {\n 'name': '30',\n 'displayName': 'Week 30'\n },\n {\n 'name': '31',\n 'displayName': 'Week 31'\n },\n {\n 'name': '32',\n 'displayName': 'Week 32'\n },\n {\n 'name': '33',\n 'displayName': 'Week 33'\n },\n {\n 'name': '34',\n 'displayName': 'Week 34'\n },\n {\n 'name': '35',\n 'displayName': 'Week 35'\n },\n {\n 'name': '36',\n 'displayName': 'Week 36'\n },\n {\n 'name': '37',\n 'displayName': 'Week 37'\n },\n {\n 'name': '38',\n 'displayName': 'Week 38'\n },\n {\n 'name': '39',\n 'displayName': 'Week 39'\n },\n {\n 'name': '40',\n 'displayName': 'Week 40'\n },\n {\n 'name': '41',\n 'displayName': 'Week 41'\n },\n {\n 'name': '42',\n 'displayName': 'Week 42'\n },\n {\n 'name': '43',\n 'displayName': 'Week 43'\n },\n {\n 'name': '44',\n 'displayName': 'Week 44'\n },\n {\n 'name': '45',\n 'displayName': 'Week 45'\n },\n {\n 'name': '46',\n 'displayName': 'Week 46'\n },\n {\n 'name': '47',\n 'displayName': 'Week 47'\n },\n {\n 'name': '48',\n 'displayName': 'Week 48'\n },\n {\n 'name': '49',\n 'displayName': 'Week 49'\n },\n {\n 'name': '50',\n 'displayName': 'Week 50'\n },\n {\n 'name': '51',\n 'displayName': 'Week 51'\n },\n {\n 'name': '52',\n 'displayName': 'Week 52'\n },\n {\n 'name': '53',\n 'displayName': 'Week 53'\n },\n {\n 'name': 'unknown',\n 'displayName': 'Unknown'\n }\n ]\n }\n ],\n 'month': [\n {\n 'name': 'none',\n 'displayName': 'none',\n 'isDummyGroup': true,\n 'entries': [\n {\n 'name': '1',\n 'displayName': 'January'\n },\n {\n 'name': '2',\n 'displayName': 'February'\n },\n {\n 'name': '3',\n 'displayName': 'March'\n },\n {\n 'name': '4',\n 'displayName': 'April'\n },\n {\n 'name': '5',\n 'displayName': 'May'\n },\n {\n 'name': '6',\n 'displayName': 'June'\n },\n {\n 'name': '7',\n 'displayName': 'July'\n },\n {\n 'name': '8',\n 'displayName': 'August'\n },\n {\n 'name': '9',\n 'displayName': 'September'\n },\n {\n 'name': '10',\n 'displayName': 'October'\n },\n {\n 'name': '11',\n 'displayName': 'November'\n },\n {\n 'name': '12',\n 'displayName': 'December'\n },\n {\n 'name': 'unknown',\n 'displayName': 'Unknown'\n }\n ]\n }\n ],\n 'quarter': [\n {\n 'name': 'none',\n 'displayName': 'none',\n 'isDummyGroup': true,\n 'entries': [\n {\n 'name': '1',\n 'displayName': 'Q1'\n },\n {\n 'name': '2',\n 'displayName': 'Q2'\n },\n {\n 'name': '3',\n 'displayName': 'Q3'\n },\n {\n 'name': '4',\n 'displayName': 'Q4'\n },\n {\n 'name': 'unknown',\n 'displayName': 'Unknown'\n }\n ]\n }\n ],\n 'year': [\n {\n 'name': 'none',\n 'displayName': 'none',\n 'isDummyGroup': true,\n 'entries': [\n {\n 'name': '1999',\n 'displayName': '1999'\n },\n {\n 'name': '2000',\n 'displayName': '2000'\n },\n {\n 'name': '2001',\n 'displayName': '2001'\n },\n {\n 'name': '2002',\n 'displayName': '2002'\n },\n {\n 'name': '2003',\n 'displayName': '2003'\n },\n {\n 'name': '2004',\n 'displayName': '2004'\n },\n {\n 'name': '2005',\n 'displayName': '2005'\n },\n {\n 'name': '2006',\n 'displayName': '2006'\n },\n {\n 'name': '2007',\n 'displayName': '2007'\n },\n {\n 'name': '2008',\n 'displayName': '2008'\n },\n {\n 'name': '2009',\n 'displayName': '2009'\n },\n {\n 'name': '2010',\n 'displayName': '2010'\n },\n {\n 'name': '2011',\n 'displayName': '2011'\n },\n {\n 'name': '2012',\n 'displayName': '2012'\n },\n {\n 'name': '2013',\n 'displayName': '2013'\n },\n {\n 'name': '2014',\n 'displayName': '2014'\n },\n {\n 'name': '2015',\n 'displayName': '2015'\n },\n {\n 'name': '2016',\n 'displayName': '2016'\n },\n {\n 'name': '2017',\n 'displayName': '2017'\n },\n {\n 'name': '2018',\n 'displayName': '2018'\n },\n {\n 'name': '2019',\n 'displayName': '2019'\n },\n {\n 'name': '2020',\n 'displayName': '2020'\n },\n {\n 'name': '2021',\n 'displayName': '2021'\n },\n {\n 'name': '2022',\n 'displayName': '2022'\n },\n {\n 'name': '2023',\n 'displayName': '2023'\n },\n {\n 'name': '2024',\n 'displayName': '2024'\n },\n {\n 'name': '2025',\n 'displayName': '2025'\n },\n {\n 'name': '2026',\n 'displayName': '2026'\n },\n {\n 'name': '2027',\n 'displayName': '2027'\n },\n {\n 'name': '2028',\n 'displayName': '2028'\n },\n {\n 'name': '2029',\n 'displayName': '2029'\n },\n {\n 'name': '2030',\n 'displayName': '2030'\n },\n {\n 'name': 'unknown',\n 'displayName': 'Unknown'\n }\n ]\n }\n ]\n }\n};\n\nconst mockDimensionValues = {\n asset: [\n 'Stamping 1',\n 'Stamping 2',\n 'Stamping 3',\n 'Bottling 1',\n 'Bottling 2',\n 'Bottling 3',\n ],\n part: [\n 'Part A',\n 'Part B',\n 'Part C',\n 'Part D',\n 'Part E',\n ],\n process_state_reason: [\n 'Material Change',\n 'Part Change',\n 'Setup',\n 'Breakdown',\n 'Jam',\n 'Adjustment',\n 'Autonomous Maintenance',\n 'No Material',\n ],\n reject_reason: [\n 'Cosmetic Defect',\n 'Scratch',\n 'Underweight',\n 'Overweight',\n 'Out of Spec',\n ],\n};\n\nconst getColumnChannelName = (columnId) => {\n const channel = columnId.channel ? columnId.channel : 'production_metric';\n const columnName = columnId.name ? columnId.name : columnId;\n return {\n channel,\n columnName,\n };\n};\n\n// helper function to find the columnConfig from the channel schema\nconst getColumnConfig = (channel, columnName) => {\n let columnConfig = channel_schema[channel].metrics[columnName];\n if (columnConfig) {\n return columnConfig;\n }\n\n columnConfig = channel_schema[channel].category_values[columnName];\n if (columnConfig) {\n return columnConfig;\n }\n\n if (columnName === 'asset') {\n return {\n category: 'asset',\n display_name: 'email_table.group.work_center.display_name',\n help_text: 'term.part.short',\n indexed: true,\n indexed_with: [\n 'record_order'\n ],\n name: 'asset',\n persist: true,\n rollup: true,\n formatType: 'category_value'\n };\n }\n\n return {};\n};\n\n/**\n * creates a js object with fake data for a column that can then be used by widgets to display something\n */\nconst getMockData = (columnId, translator, index, metricThresholds) => {\n const { channel, columnName } = getColumnChannelName(columnId);\n\n const columnConfig = getColumnConfig(channel, columnName);\n // if category exists in config then it is a category value\n const isCategoryValue = !!columnConfig.category;\n\n let format = getColumnFormatType(columnConfig, isCategoryValue);\n\n const displayName = translator ? translator(columnConfig.display_name) : columnName;\n\n let rawValue;\n\n if (format === 'count') {\n rawValue = 1234;\n }\n else if (format === 'cycle') {\n rawValue = 1234;\n }\n else if (format === 'cycle_time') {\n rawValue = 1.23;\n }\n else if (format === 'percent') {\n // heatConfig = {\n // 'severity': 'caution',\n // 'color': '#84a213',\n // };\n rawValue = 0.123;\n }\n else if (format === 'rate') {\n rawValue = 12.34;\n }\n else if (format === 'rate_per_hour') {\n rawValue = 123.4;\n }\n else if (format === 'time_span') {\n rawValue = 5025;\n }\n else if (format === 'category_value') {\n const randomValues = mockDimensionValues[columnConfig.category];\n if (!randomValues) {\n console.error(`Could not find random list for ${columnConfig.category}, update mockDimensionValues`);\n }\n const ii = index % randomValues.length;\n rawValue = {\n displayName: randomValues[ii],\n };\n }\n else if (format === 'date_time') {\n const now = new Date();\n now.setMinutes(now.getMinutes() - index * 11);\n rawValue = OffsetDate.fromDate(now, now.getTimezoneOffset() * -1);\n }\n else {\n rawValue = 999;\n }\n\n let heatConfig;\n\n if (metricThresholds?.[columnName]) {\n heatConfig = getHeatConfig(columnName, rawValue, metricThresholds[columnName]);\n }\n\n return {\n name: columnName,\n formatType: format,\n heatConfig,\n rawValue,\n displayName,\n };\n};\n\n/**\n * generate fake KPI Group data based on widget stf\n */\nexport const getKpiGroupData = (widgetData, translator, metricThresholds) => {\n const {\n fields\n } = widgetData;\n\n // for each field in fields create an entry into an js object indexed by column name pointing\n // at data for that column\n let fieldData = fields.reduce((rv, field) => {\n const data = getMockData(field.name, translator, null, metricThresholds);\n rv[field.name] = data;\n return rv;\n }, {});\n\n return {\n response: fieldData,\n error: null\n };\n};\n\n/**\n * generate fake KPI data based on widget stf\n */\nexport const getKpiData = (name, translator, metricThresholds) => {\n const data = getMockData(name, translator, null, metricThresholds);\n\n return {\n response: {\n metricData: data,\n },\n error: null\n };\n};\n\nexport const hierarchyNodeDisplayName = {\n 'response': 'Node Display Name',\n 'error': null\n};\n\nexport const timeRangePrimaryDetails = {\n 'response': null,\n 'error': null\n};\n\nexport const timeRangeSecondaryDetails = {\n 'response': null,\n 'error': null\n};\n\nexport const emailWidgetFieldOptions = {\n 'metric': [\n {\n 'name': 'counts',\n 'displayName': 'Counts',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'pack_out_count',\n 'channel': 'production_metric',\n 'displayName': 'End of Line Count',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'count'\n },\n {\n 'name': 'good_count',\n 'channel': 'production_metric',\n 'displayName': 'Good Count',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'count'\n },\n {\n 'name': 'in_count',\n 'channel': 'production_metric',\n 'displayName': 'In Count',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'count'\n },\n {\n 'name': 'percent_good',\n 'channel': 'production_metric',\n 'displayName': 'Percent Good',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'percent_reject',\n 'channel': 'production_metric',\n 'displayName': 'Percent Reject',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'production_rejects',\n 'channel': 'production_metric',\n 'displayName': 'Production Rejects',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'count'\n },\n {\n 'name': 'reject_count',\n 'channel': 'production_metric',\n 'displayName': 'Reject Count',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'count'\n },\n {\n 'name': 'startup_rejects',\n 'channel': 'production_metric',\n 'displayName': 'Startup Rejects',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'count'\n },\n {\n 'name': 'total_count',\n 'channel': 'production_metric',\n 'displayName': 'Total Count',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'count'\n }\n ]\n },\n {\n 'name': 'cycles',\n 'displayName': 'Cycles',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'average_cycle_time',\n 'channel': 'production_metric',\n 'displayName': 'Avg. Cycle Time',\n 'fieldType': 'metric',\n 'type': 'time_span',\n 'subType': 'cycle_time'\n },\n {\n 'name': 'average_ideal_cycle_time',\n 'channel': 'production_metric',\n 'displayName': 'Avg. Ideal Cycle Time',\n 'fieldType': 'metric',\n 'type': 'time_span',\n 'subType': 'cycle_time'\n },\n {\n 'name': 'average_run_cycle_time',\n 'channel': 'production_metric',\n 'displayName': 'Avg. Run Cycle Time',\n 'fieldType': 'metric',\n 'type': 'time_span',\n 'subType': 'cycle_time'\n },\n {\n 'name': 'average_small_stop_time',\n 'channel': 'production_metric',\n 'displayName': 'Avg. Small Stop Time',\n 'fieldType': 'metric',\n 'type': 'time_span',\n 'subType': 'cycle_time'\n },\n {\n 'name': 'equipment_cycles',\n 'channel': 'production_metric',\n 'displayName': 'Equipment Cycles',\n 'fieldType': 'metric',\n 'type': 'uint64'\n },\n {\n 'name': 'ideal_time',\n 'channel': 'production_metric',\n 'displayName': 'Ideal Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'partial_cycle_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Partial Cycle Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'partial_cycles',\n 'channel': 'production_metric',\n 'displayName': 'Partial Cycles',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'cycle'\n },\n {\n 'name': 'run_cycle_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Run Cycle Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'run_cycles',\n 'channel': 'production_metric',\n 'displayName': 'Run Cycles',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'cycle'\n },\n {\n 'name': 'small_stops',\n 'channel': 'production_metric',\n 'displayName': 'Small Stops',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'cycle'\n },\n {\n 'name': 'total_cycle_time',\n 'channel': 'production_metric',\n 'displayName': 'Total Cycle Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'total_cycles',\n 'channel': 'production_metric',\n 'displayName': 'Total Cycles',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'cycle'\n }\n ]\n },\n {\n 'name': 'labor',\n 'displayName': 'Labor',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'earned_labor',\n 'channel': 'production_metric',\n 'displayName': 'Earned Labor',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'good_pieces_per_labor_hour',\n 'channel': 'production_metric',\n 'displayName': 'Good Pieces per Labor Hour',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'labor_efficiency',\n 'channel': 'production_metric',\n 'displayName': 'Labor Efficiency',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'labor_per_good_piece',\n 'channel': 'production_metric',\n 'displayName': 'Labor per Good Piece',\n 'fieldType': 'metric',\n 'type': 'time_span',\n 'subType': 'cycle_time'\n },\n {\n 'name': 'labor_per_piece',\n 'channel': 'production_metric',\n 'displayName': 'Labor per Piece',\n 'fieldType': 'metric',\n 'type': 'time_span',\n 'subType': 'cycle_time'\n },\n {\n 'name': 'lost_labor',\n 'channel': 'production_metric',\n 'displayName': 'Lost Labor',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'pieces_per_labor_hour',\n 'channel': 'production_metric',\n 'displayName': 'Pieces per Labor Hour',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'target_labor_per_piece',\n 'channel': 'production_metric',\n 'displayName': 'Target Labor per Piece',\n 'fieldType': 'metric',\n 'type': 'time_span',\n 'subType': 'cycle_time'\n },\n {\n 'name': 'average_team_size',\n 'channel': 'production_metric',\n 'displayName': 'Team Size',\n 'fieldType': 'metric',\n 'type': 'double'\n },\n {\n 'name': 'labor',\n 'channel': 'production_metric',\n 'displayName': 'Total Labor',\n 'fieldType': 'metric',\n 'type': 'time_span'\n }\n ]\n },\n {\n 'name': 'oee',\n 'displayName': 'OEE',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'availability',\n 'channel': 'production_metric',\n 'displayName': 'Availability',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'availability_loss',\n 'channel': 'production_metric',\n 'displayName': 'Availability Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'availability_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Availability Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'fully_productive_time',\n 'channel': 'production_metric',\n 'displayName': 'Fully Productive Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'oee',\n 'channel': 'production_metric',\n 'displayName': 'OEE',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'oee_loss',\n 'channel': 'production_metric',\n 'displayName': 'OEE Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'oee_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'OEE Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'performance',\n 'channel': 'production_metric',\n 'displayName': 'Performance',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'performance_loss',\n 'channel': 'production_metric',\n 'displayName': 'Performance Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'performance_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Performance Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'quality',\n 'channel': 'production_metric',\n 'displayName': 'Quality',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'quality_loss',\n 'channel': 'production_metric',\n 'displayName': 'Quality Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'quality_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Quality Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n }\n ]\n },\n {\n 'name': 'production_times',\n 'displayName': 'Production Times',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'all_time',\n 'channel': 'production_metric',\n 'displayName': 'All Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'down_time',\n 'channel': 'production_metric',\n 'displayName': 'Down Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'duration',\n 'channel': 'production_metric',\n 'displayName': 'Duration',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'end_time',\n 'channel': 'production_metric',\n 'displayName': 'End Time',\n 'fieldType': 'metric',\n 'type': 'date_time'\n },\n {\n 'name': 'manufacturing_time',\n 'channel': 'production_metric',\n 'displayName': 'Manufacturing Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'not_scheduled_time',\n 'channel': 'production_metric',\n 'displayName': 'Not Scheduled Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'percent_down',\n 'channel': 'production_metric',\n 'displayName': 'Percent Down',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'percent_planned_stop',\n 'channel': 'production_metric',\n 'displayName': 'Percent Planned Stop',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'percent_run',\n 'channel': 'production_metric',\n 'displayName': 'Percent Run',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'percent_unplanned_stop',\n 'channel': 'production_metric',\n 'displayName': 'Percent Unplanned Stop',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'planned_stop_time',\n 'channel': 'production_metric',\n 'displayName': 'Planned Stop Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'production_time',\n 'channel': 'production_metric',\n 'displayName': 'Production Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'run_time',\n 'channel': 'production_metric',\n 'displayName': 'Run Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'start_time',\n 'channel': 'production_metric',\n 'displayName': 'Start Time',\n 'fieldType': 'metric',\n 'type': 'date_time'\n },\n {\n 'name': 'unplanned_stop_time',\n 'channel': 'production_metric',\n 'displayName': 'Unplanned Stop Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n }\n ]\n },\n {\n 'name': 'rates',\n 'displayName': 'Rates',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'pack_out_rate_per_hour',\n 'channel': 'production_metric',\n 'displayName': 'End of Line Rate PPH',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate_per_hour'\n },\n {\n 'name': 'pack_out_rate',\n 'channel': 'production_metric',\n 'displayName': 'End of Line Rate PPM',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'pack_out_speed_per_hour',\n 'channel': 'production_metric',\n 'displayName': 'End of Line Speed PPH',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate_per_hour'\n },\n {\n 'name': 'pack_out_speed',\n 'channel': 'production_metric',\n 'displayName': 'End of Line Speed PPM',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'good_rate_per_hour',\n 'channel': 'production_metric',\n 'displayName': 'Good Rate PPH',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate_per_hour'\n },\n {\n 'name': 'good_rate',\n 'channel': 'production_metric',\n 'displayName': 'Good Rate PPM',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'good_speed_per_hour',\n 'channel': 'production_metric',\n 'displayName': 'Good Speed PPH',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate_per_hour'\n },\n {\n 'name': 'good_speed',\n 'channel': 'production_metric',\n 'displayName': 'Good Speed PPM',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'in_rate_per_hour',\n 'channel': 'production_metric',\n 'displayName': 'In Rate PPH',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate_per_hour'\n },\n {\n 'name': 'in_rate',\n 'channel': 'production_metric',\n 'displayName': 'In Rate PPM',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'in_speed_per_hour',\n 'channel': 'production_metric',\n 'displayName': 'In Speed PPH',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate_per_hour'\n },\n {\n 'name': 'in_speed',\n 'channel': 'production_metric',\n 'displayName': 'In Speed PPM',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'reject_rate_per_hour',\n 'channel': 'production_metric',\n 'displayName': 'Reject Rate PPH',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate_per_hour'\n },\n {\n 'name': 'reject_rate',\n 'channel': 'production_metric',\n 'displayName': 'Reject Rate PPM',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'reject_speed_per_hour',\n 'channel': 'production_metric',\n 'displayName': 'Reject Speed PPH',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate_per_hour'\n },\n {\n 'name': 'reject_speed',\n 'channel': 'production_metric',\n 'displayName': 'Reject Speed PPM',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'target_rate_per_hour',\n 'channel': 'production_metric',\n 'displayName': 'Target Rate PPH',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate_per_hour'\n },\n {\n 'name': 'target_rate',\n 'channel': 'production_metric',\n 'displayName': 'Target Rate PPM',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'total_rate_per_hour',\n 'channel': 'production_metric',\n 'displayName': 'Total Rate PPH',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate_per_hour'\n },\n {\n 'name': 'total_rate',\n 'channel': 'production_metric',\n 'displayName': 'Total Rate PPM',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n },\n {\n 'name': 'total_speed_per_hour',\n 'channel': 'production_metric',\n 'displayName': 'Total Speed PPH',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate_per_hour'\n },\n {\n 'name': 'total_speed',\n 'channel': 'production_metric',\n 'displayName': 'Total Speed PPM',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'rate'\n }\n ]\n },\n {\n 'name': 'six_big_losses',\n 'displayName': 'Six Big Losses',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'cycle_loss',\n 'channel': 'production_metric',\n 'displayName': 'Cycle Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'cycle_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Cycle Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'down_loss',\n 'channel': 'production_metric',\n 'displayName': 'Down Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'down_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Down Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'planned_stop_loss',\n 'channel': 'production_metric',\n 'displayName': 'Planned Stop Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'planned_stop_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Planned Stop Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'production_reject_loss',\n 'channel': 'production_metric',\n 'displayName': 'Production Reject Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'production_reject_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Production Reject Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'small_stop_loss',\n 'channel': 'production_metric',\n 'displayName': 'Small Stop Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'small_stop_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Small Stop Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'startup_reject_loss',\n 'channel': 'production_metric',\n 'displayName': 'Startup Reject Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'startup_reject_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Startup Reject Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'unplanned_stop_loss',\n 'channel': 'production_metric',\n 'displayName': 'Unplanned Stop Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'unplanned_stop_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Unplanned Stop Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n }\n ]\n },\n {\n 'name': 'target',\n 'displayName': 'Target',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'average_takt_time',\n 'channel': 'production_metric',\n 'displayName': 'Avg. Takt Time',\n 'fieldType': 'metric',\n 'type': 'time_span',\n 'subType': 'cycle_time'\n },\n {\n 'name': 'count_variance',\n 'channel': 'production_metric',\n 'displayName': 'Count Variance',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'count'\n },\n {\n 'name': 'efficiency',\n 'channel': 'production_metric',\n 'displayName': 'Efficiency',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'percent_variance',\n 'channel': 'production_metric',\n 'displayName': 'Percent Variance',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'rate_efficiency',\n 'channel': 'production_metric',\n 'displayName': 'Rate Efficiency',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'target_count',\n 'channel': 'production_metric',\n 'displayName': 'Target Count',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'count'\n },\n {\n 'name': 'target_cycles',\n 'channel': 'production_metric',\n 'displayName': 'Target Cycles',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'cycle'\n },\n {\n 'name': 'time_variance',\n 'channel': 'production_metric',\n 'displayName': 'Time Variance',\n 'fieldType': 'metric',\n 'type': 'time_span'\n }\n ]\n },\n {\n 'name': 'teep',\n 'displayName': 'TEEP',\n 'isDummyGroup': false,\n 'entries': [\n {\n 'name': 'hidden_factory_time',\n 'channel': 'production_metric',\n 'displayName': 'Hidden Factory Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'production_loss',\n 'channel': 'production_metric',\n 'displayName': 'Production Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'production_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Production Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'capacity_loss',\n 'channel': 'production_metric',\n 'displayName': 'Schedule Loss',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'capacity_lost_time',\n 'channel': 'production_metric',\n 'displayName': 'Schedule Lost Time',\n 'fieldType': 'metric',\n 'type': 'time_span'\n },\n {\n 'name': 'teep',\n 'channel': 'production_metric',\n 'displayName': 'TEEP',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n },\n {\n 'name': 'utilization',\n 'channel': 'production_metric',\n 'displayName': 'Utilization',\n 'fieldType': 'metric',\n 'type': 'double',\n 'subType': 'percent'\n }\n ]\n }\n ],\n 'metric_set': [\n {\n 'name': 'overview',\n 'displayName': 'Overview',\n 'entries': [\n {\n 'name': 'overview_set',\n 'displayName': 'Production Overview',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'overview',\n 'group': 'overview',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'OEE',\n 'fieldType': 'metric',\n 'name': 'oee',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'In Count',\n 'fieldType': 'metric',\n 'name': 'in_count',\n 'subType': 'count',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Good Count',\n 'fieldType': 'metric',\n 'name': 'good_count',\n 'subType': 'count',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Run Time',\n 'fieldType': 'metric',\n 'name': 'run_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Down Time',\n 'fieldType': 'metric',\n 'name': 'down_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Planned Stop Time',\n 'fieldType': 'metric',\n 'name': 'planned_stop_time',\n 'type': 'time_span'\n }\n ]\n },\n {\n 'name': 'target_overview_set',\n 'displayName': 'Target Overview',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'target_overview',\n 'group': 'overview',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'Target Count',\n 'fieldType': 'metric',\n 'name': 'target_count',\n 'subType': 'count',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Good Count',\n 'fieldType': 'metric',\n 'name': 'good_count',\n 'subType': 'count',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Efficiency',\n 'fieldType': 'metric',\n 'name': 'efficiency',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Down Time',\n 'fieldType': 'metric',\n 'name': 'down_time',\n 'type': 'time_span'\n }\n ]\n }\n ],\n 'isDummyGroup': false\n },\n {\n 'name': 'counts',\n 'displayName': 'Counts',\n 'entries': [\n {\n 'name': 'counts_set',\n 'displayName': 'Count Overview',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'counts',\n 'group': 'counts',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'In Count',\n 'fieldType': 'metric',\n 'name': 'in_count',\n 'subType': 'count',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Good Count',\n 'fieldType': 'metric',\n 'name': 'good_count',\n 'subType': 'count',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Reject Count',\n 'fieldType': 'metric',\n 'name': 'reject_count',\n 'subType': 'count',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'End of Line Count',\n 'fieldType': 'metric',\n 'name': 'pack_out_count',\n 'subType': 'count',\n 'type': 'double'\n }\n ]\n },\n {\n 'name': 'reject_count_set',\n 'displayName': 'Reject Count Overview',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'reject_count',\n 'group': 'counts',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'Reject Count',\n 'fieldType': 'metric',\n 'name': 'reject_count',\n 'subType': 'count',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Percent Reject',\n 'fieldType': 'metric',\n 'name': 'percent_reject',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Startup Rejects',\n 'fieldType': 'metric',\n 'name': 'startup_rejects',\n 'subType': 'count',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Production Rejects',\n 'fieldType': 'metric',\n 'name': 'production_rejects',\n 'subType': 'count',\n 'type': 'double'\n }\n ]\n },\n {\n 'name': 'total_count_set',\n 'displayName': 'Total Count Detail',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'total_count',\n 'group': 'counts',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'Total Count',\n 'fieldType': 'metric',\n 'name': 'total_count',\n 'subType': 'count',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Good Count',\n 'fieldType': 'metric',\n 'name': 'good_count',\n 'subType': 'count',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Reject Count',\n 'fieldType': 'metric',\n 'name': 'reject_count',\n 'subType': 'count',\n 'type': 'double'\n }\n ]\n }\n ],\n 'isDummyGroup': false\n },\n {\n 'name': 'cycles',\n 'displayName': 'Cycles',\n 'entries': [\n {\n 'name': 'cycle_time_set',\n 'displayName': 'Total Cycle Time Detail',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'cycle_time',\n 'group': 'cycles',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'Total Cycle Time',\n 'fieldType': 'metric',\n 'name': 'total_cycle_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Ideal Time',\n 'fieldType': 'metric',\n 'name': 'ideal_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Cycle Lost Time',\n 'fieldType': 'metric',\n 'name': 'cycle_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Small Stop Lost Time',\n 'fieldType': 'metric',\n 'name': 'small_stop_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Partial Cycle Lost Time',\n 'fieldType': 'metric',\n 'name': 'partial_cycle_lost_time',\n 'type': 'time_span'\n }\n ]\n },\n {\n 'name': 'cycle_time_validation_set',\n 'displayName': 'Cycle Time Audit',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'cycle_time_validation',\n 'group': 'cycles',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'Performance',\n 'fieldType': 'metric',\n 'name': 'performance',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Avg. Ideal Cycle Time',\n 'fieldType': 'metric',\n 'name': 'average_ideal_cycle_time',\n 'subType': 'cycle_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Avg. Run Cycle Time',\n 'fieldType': 'metric',\n 'name': 'average_run_cycle_time',\n 'subType': 'cycle_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Run Cycles',\n 'fieldType': 'metric',\n 'name': 'run_cycles',\n 'subType': 'cycle',\n 'type': 'double'\n }\n ]\n },\n {\n 'name': 'cycles_set',\n 'displayName': 'Total Cycles Detail',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'cycles',\n 'group': 'cycles',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'Total Cycles',\n 'fieldType': 'metric',\n 'name': 'total_cycles',\n 'subType': 'cycle',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Run Cycles',\n 'fieldType': 'metric',\n 'name': 'run_cycles',\n 'subType': 'cycle',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Small Stops',\n 'fieldType': 'metric',\n 'name': 'small_stops',\n 'subType': 'cycle',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Partial Cycles',\n 'fieldType': 'metric',\n 'name': 'partial_cycles',\n 'subType': 'cycle',\n 'type': 'double'\n }\n ]\n }\n ],\n 'isDummyGroup': false\n },\n {\n 'name': 'times',\n 'displayName': 'Times',\n 'entries': [\n {\n 'name': 'all_time_set',\n 'displayName': 'All Time Detail',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'all_time',\n 'group': 'times',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'All Time',\n 'fieldType': 'metric',\n 'name': 'all_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Run Time',\n 'fieldType': 'metric',\n 'name': 'run_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Down Time',\n 'fieldType': 'metric',\n 'name': 'down_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Planned Stop Time',\n 'fieldType': 'metric',\n 'name': 'planned_stop_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Not Scheduled Time',\n 'fieldType': 'metric',\n 'name': 'not_scheduled_time',\n 'type': 'time_span'\n }\n ]\n },\n {\n 'name': 'production_time_set',\n 'displayName': 'Production Time Detail',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'production_time',\n 'group': 'times',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'Production Time',\n 'fieldType': 'metric',\n 'name': 'production_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Run Time',\n 'fieldType': 'metric',\n 'name': 'run_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Down Time',\n 'fieldType': 'metric',\n 'name': 'down_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Planned Stop Time',\n 'fieldType': 'metric',\n 'name': 'planned_stop_time',\n 'type': 'time_span'\n }\n ]\n },\n {\n 'name': 'production_time_percentages_set',\n 'displayName': 'Production Time Percentages',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'production_time_percentages',\n 'group': 'times',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'Production Time',\n 'fieldType': 'metric',\n 'name': 'production_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Percent Run',\n 'fieldType': 'metric',\n 'name': 'percent_run',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Percent Down',\n 'fieldType': 'metric',\n 'name': 'percent_down',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Percent Planned Stop',\n 'fieldType': 'metric',\n 'name': 'percent_planned_stop',\n 'subType': 'percent',\n 'type': 'double'\n }\n ]\n },\n {\n 'name': 'run_time_set',\n 'displayName': 'Run Time Detail',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'run_time',\n 'group': 'times',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'Run Time',\n 'fieldType': 'metric',\n 'name': 'run_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Fully Productive Time',\n 'fieldType': 'metric',\n 'name': 'fully_productive_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Cycle Lost Time',\n 'fieldType': 'metric',\n 'name': 'cycle_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Small Stop Lost Time',\n 'fieldType': 'metric',\n 'name': 'small_stop_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Quality Lost Time',\n 'fieldType': 'metric',\n 'name': 'quality_lost_time',\n 'type': 'time_span'\n }\n ]\n }\n ],\n 'isDummyGroup': false\n },\n {\n 'name': 'labor',\n 'displayName': 'Labor',\n 'entries': [\n {\n 'name': 'labor_overview_set',\n 'displayName': 'Labor Overview',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'labor_overview',\n 'group': 'labor',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'Team Size',\n 'fieldType': 'metric',\n 'name': 'average_team_size',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Total Labor',\n 'fieldType': 'metric',\n 'name': 'labor',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Lost Labor',\n 'fieldType': 'metric',\n 'name': 'lost_labor',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Labor Efficiency',\n 'fieldType': 'metric',\n 'name': 'labor_efficiency',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Target Labor per Piece',\n 'fieldType': 'metric',\n 'name': 'target_labor_per_piece',\n 'subType': 'cycle_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Labor per Good Piece',\n 'fieldType': 'metric',\n 'name': 'labor_per_good_piece',\n 'subType': 'cycle_time',\n 'type': 'time_span'\n }\n ]\n },\n {\n 'name': 'labor_time_set',\n 'displayName': 'Labor Time Detail',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'labor_time',\n 'group': 'labor',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'Total Labor',\n 'fieldType': 'metric',\n 'name': 'labor',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Lost Labor',\n 'fieldType': 'metric',\n 'name': 'lost_labor',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Earned Labor',\n 'fieldType': 'metric',\n 'name': 'earned_labor',\n 'type': 'time_span'\n }\n ]\n }\n ],\n 'isDummyGroup': false\n },\n {\n 'name': 'oee',\n 'displayName': 'OEE',\n 'entries': [\n {\n 'name': 'oee_loss_set',\n 'displayName': 'OEE Loss Detail',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'oee_loss',\n 'group': 'oee',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'OEE Loss',\n 'fieldType': 'metric',\n 'name': 'oee_loss',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Availability Loss',\n 'fieldType': 'metric',\n 'name': 'availability_loss',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Performance Loss',\n 'fieldType': 'metric',\n 'name': 'performance_loss',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Quality Loss',\n 'fieldType': 'metric',\n 'name': 'quality_loss',\n 'subType': 'percent',\n 'type': 'double'\n }\n ]\n },\n {\n 'name': 'oee_lost_time_set',\n 'displayName': 'OEE Lost Time Detail',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'oee_lost_time',\n 'group': 'oee',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'OEE Lost Time',\n 'fieldType': 'metric',\n 'name': 'oee_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Availability Lost Time',\n 'fieldType': 'metric',\n 'name': 'availability_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Performance Lost Time',\n 'fieldType': 'metric',\n 'name': 'performance_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Quality Lost Time',\n 'fieldType': 'metric',\n 'name': 'quality_lost_time',\n 'type': 'time_span'\n }\n ]\n },\n {\n 'name': 'oee_waterfall_set',\n 'displayName': 'OEE Waterfall',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'oee_waterfall',\n 'group': 'oee',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'Production Time',\n 'fieldType': 'metric',\n 'name': 'production_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Availability Lost Time',\n 'fieldType': 'metric',\n 'name': 'availability_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Performance Lost Time',\n 'fieldType': 'metric',\n 'name': 'performance_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Quality Lost Time',\n 'fieldType': 'metric',\n 'name': 'quality_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Fully Productive Time',\n 'fieldType': 'metric',\n 'name': 'fully_productive_time',\n 'type': 'time_span'\n }\n ]\n },\n {\n 'name': 'oee_with_factors_set',\n 'displayName': 'OEE Factors',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'oee_with_factors',\n 'group': 'oee',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'OEE',\n 'fieldType': 'metric',\n 'name': 'oee',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Availability',\n 'fieldType': 'metric',\n 'name': 'availability',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Performance',\n 'fieldType': 'metric',\n 'name': 'performance',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Quality',\n 'fieldType': 'metric',\n 'name': 'quality',\n 'subType': 'percent',\n 'type': 'double'\n }\n ]\n }\n ],\n 'isDummyGroup': false\n },\n {\n 'name': 'six_big_losses',\n 'displayName': 'Six Big Losses',\n 'entries': [\n {\n 'name': 'six_big_losses_set',\n 'displayName': 'Six Big Loss Detail',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'six_big_losses',\n 'group': 'six_big_losses',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'OEE Loss',\n 'fieldType': 'metric',\n 'name': 'oee_loss',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Down Loss',\n 'fieldType': 'metric',\n 'name': 'down_loss',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Planned Stop Loss',\n 'fieldType': 'metric',\n 'name': 'planned_stop_loss',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Cycle Loss',\n 'fieldType': 'metric',\n 'name': 'cycle_loss',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Small Stop Loss',\n 'fieldType': 'metric',\n 'name': 'small_stop_loss',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Startup Reject Loss',\n 'fieldType': 'metric',\n 'name': 'startup_reject_loss',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Production Reject Loss',\n 'fieldType': 'metric',\n 'name': 'production_reject_loss',\n 'subType': 'percent',\n 'type': 'double'\n }\n ]\n },\n {\n 'name': 'six_big_losses_lost_time_set',\n 'displayName': 'Six Big Loss Time Detail',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'six_big_losses_lost_time',\n 'group': 'six_big_losses',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'OEE Lost Time',\n 'fieldType': 'metric',\n 'name': 'oee_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Down Lost Time',\n 'fieldType': 'metric',\n 'name': 'down_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Planned Stop Lost Time',\n 'fieldType': 'metric',\n 'name': 'planned_stop_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Cycle Lost Time',\n 'fieldType': 'metric',\n 'name': 'cycle_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Small Stop Lost Time',\n 'fieldType': 'metric',\n 'name': 'small_stop_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Startup Reject Lost Time',\n 'fieldType': 'metric',\n 'name': 'startup_reject_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Production Reject Lost Time',\n 'fieldType': 'metric',\n 'name': 'production_reject_lost_time',\n 'type': 'time_span'\n }\n ]\n }\n ],\n 'isDummyGroup': false\n },\n {\n 'name': 'teep',\n 'displayName': 'TEEP',\n 'entries': [\n {\n 'name': 'hidden_factory_set',\n 'displayName': 'Hidden Factory',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'hidden_factory',\n 'group': 'teep',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'Hidden Factory Time',\n 'fieldType': 'metric',\n 'name': 'hidden_factory_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Schedule Lost Time',\n 'fieldType': 'metric',\n 'name': 'capacity_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Availability Lost Time',\n 'fieldType': 'metric',\n 'name': 'availability_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Performance Lost Time',\n 'fieldType': 'metric',\n 'name': 'performance_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Quality Lost Time',\n 'fieldType': 'metric',\n 'name': 'quality_lost_time',\n 'type': 'time_span'\n }\n ]\n },\n {\n 'name': 'teep_capacity_set',\n 'displayName': 'TEEP Overview',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'teep_capacity',\n 'group': 'teep',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'TEEP',\n 'fieldType': 'metric',\n 'name': 'teep',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Utilization',\n 'fieldType': 'metric',\n 'name': 'utilization',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Schedule Loss',\n 'fieldType': 'metric',\n 'name': 'capacity_loss',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Schedule Lost Time',\n 'fieldType': 'metric',\n 'name': 'capacity_lost_time',\n 'type': 'time_span'\n }\n ]\n },\n {\n 'name': 'teep_waterfall_set',\n 'displayName': 'TEEP Waterfall',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'teep_waterfall',\n 'group': 'teep',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'All Time',\n 'fieldType': 'metric',\n 'name': 'all_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Schedule Lost Time',\n 'fieldType': 'metric',\n 'name': 'capacity_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Availability Lost Time',\n 'fieldType': 'metric',\n 'name': 'availability_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Performance Lost Time',\n 'fieldType': 'metric',\n 'name': 'performance_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Quality Lost Time',\n 'fieldType': 'metric',\n 'name': 'quality_lost_time',\n 'type': 'time_span'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Fully Productive Time',\n 'fieldType': 'metric',\n 'name': 'fully_productive_time',\n 'type': 'time_span'\n }\n ]\n },\n {\n 'name': 'teep_with_factors_set',\n 'displayName': 'TEEP Factors',\n 'type': 'metric_set',\n 'fieldType': 'metric_set',\n 'metric_set': 'teep_with_factors',\n 'group': 'teep',\n 'channel': 'production_metric',\n 'columns': [\n {\n 'channel': 'production_metric',\n 'displayName': 'TEEP',\n 'fieldType': 'metric',\n 'name': 'teep',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Utilization',\n 'fieldType': 'metric',\n 'name': 'utilization',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Availability',\n 'fieldType': 'metric',\n 'name': 'availability',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Performance',\n 'fieldType': 'metric',\n 'name': 'performance',\n 'subType': 'percent',\n 'type': 'double'\n },\n {\n 'channel': 'production_metric',\n 'displayName': 'Quality',\n 'fieldType': 'metric',\n 'name': 'quality',\n 'subType': 'percent',\n 'type': 'double'\n }\n ]\n }\n ],\n 'isDummyGroup': false\n }\n ],\n};\n\n// search the email table metric list options for a specific metric\nexport const getEmailTableMetricListMetricOptions = (metricName) => {\n let found;\n for (let i = 0; i < emailWidgetFieldOptions.metric.length; i += 1) {\n const metricGroup = emailWidgetFieldOptions.metric[i];\n found = metricGroup.entries.find((mm) => {\n return mm.name === metricName;\n });\n if (found) {\n break;\n }\n }\n return found;\n};\n\nexport const getMockTableData = (translator, rowCount) => {\n // this mock data is not actually read when filling out the table, this table information comes\n // from the 'accessor' function on the column\n // This array does need to exist though for each row that may be represented in the table\n return Array(rowCount).fill({});\n};\n\nexport const getMockTableHeaderColumns = (columns, translator, metricThresholds) => {\n return columns.map((columnId) => {\n const { channel, columnName } = getColumnChannelName(columnId);\n\n const columnConfig = getColumnConfig(channel, columnName);\n\n return {\n Header: translator(columnConfig.display_name),\n id: columnName,\n width: 200,\n fillCellWidth: true,\n accessor: (datum, rowIndex) => {\n const dataItem = getMockData(columnId, translator, rowIndex, metricThresholds);\n const get = () => {\n return (\n \n );\n };\n\n return get();\n },\n title: 'A Title',\n };\n });\n};\n","\nexport function getColumnFormatType(columnSchema, isCategoryValue = false) {\n const isAssetBased = false;\n\n const {\n type,\n subtype,\n name,\n post_process,\n } = columnSchema;\n\n let formatType;\n\n if (post_process) {\n // Each post process type is it's own formatType\n formatType = post_process;\n }\n else if (isAssetBased) {\n // Each asset has its own formatType.\n formatType = name;\n }\n else if (isCategoryValue) {\n formatType = 'category_value';\n }\n else {\n // Anything else just uses the subtype if they have one\n // or they just fallback to type.\n //\n formatType = subtype || type;\n }\n\n return formatType;\n}\n","import React, {\n useCallback,\n useRef,\n useState,\n} from 'react';\nimport BasicSelectList from 'Common/components/SelectList/BasicSelectList';\nimport SelectSeparator from 'Common/components/SelectList/SelectSeparator';\nimport PropTypes from 'prop-types';\nimport LiveControlBar from 'Common/components/LiveControlBar';\nimport LiveControl from 'Common/components/LiveControlBar/LiveControl';\nimport BasicSelectField from 'Common/components/BasicSelectField/BasicSelectField';\nimport LiveControlIcon from 'Common/components/LiveControlBar/LiveControlIcon';\nimport styled from 'styled-components';\nimport {\n Body2,\n Subtitle2,\n} from 'Components/typography/typography';\n\nimport TableColumnControl from 'Common/components/widgets/TableWidget/TableColumnControl';\n\nimport {\n emailWidgetFieldOptions,\n} from './MockWidgetData';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport Button from 'Common/components/Button';\n\nconst MAX_ROWS_OPTIONS = [ {\n displayName: '5',\n value: '5',\n}, {\n displayName: '10',\n value: '10',\n}, {\n displayName: '15',\n value: '15',\n}, {\n displayName: '20',\n value: '20',\n}, {\n displayName: '25',\n value: '25',\n} ];\n\nconst TABLE_TYPES_WITH_MAX_ROW_ENABLED = new Set([\n 'availability_events',\n 'availability_reasons',\n 'reject_reasons',\n]);\n\nconst RowOptionsContainer = styled.div`\n margin-left: 10px;\n margin-right: 10px;\n margin-bottom: 10px;\n`;\n\nconst MaxRowLabel = styled(Body2)`\n color: ${props => props.theme.colors.darkText.highEmphasis };\n display: inline-flex;\n align-items: center;\n margin-right: 10px;\n`;\n\nconst MaxRowLabelDisabled = styled(MaxRowLabel)`\n color: ${props => props.theme.colors.darkText.disabled };\n`;\n\nconst RowLimitContainer = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst RowOptionsHeading = styled(Subtitle2)`\n color: ${props => props.theme.colors.palette.blue.awesome};\n`;\n\nconst ApplyContainer = styled.div`\n box-sizing: border-box;\n min-height: 44px;\n min-width: 44px;\n display: flex;\n align-items: center;\n flex: 0 0 auto;\n padding-right: 11px;\n justify-content: flex-end;\n`;\n\nexport default function EmailTableLiveControls(props) {\n const {\n onDimensionOptionsChange,\n maxRowCount,\n onColumnsChange,\n selectedColumns,\n tableType,\n maxNumUserSelectedColumns,\n children,\n } = props;\n\n const translator = useTranslator();\n const editable = true;\n const columnControlRef = useRef();\n\n const [selectedControl, setSelectedControl] = useState(null);\n const [tableTypeState, setTableTypeState] = useState(tableType);\n const [maxRowCountState, setMaxRowCountState] = useState(maxRowCount);\n\n const handleSelectionChange = useCallback((newSelection) => {\n let blockSelectionChange = false;\n\n if (selectedControl === 'columns' && newSelection !== 'columns') {\n blockSelectionChange = !columnControlRef.current.onClose();\n }\n\n if (!blockSelectionChange) {\n setSelectedControl(newSelection);\n }\n }, [ selectedControl ]);\n\n // setup for column control\n const columnControlIcon = ( );\n const filterValue = {};\n const handleColumnsChange = useCallback((evt) => {\n onColumnsChange(evt.target.value);\n setSelectedControl(null);\n }, [ onColumnsChange, setSelectedControl ]);\n\n // setup for row control\n const columnControlDisplayName = translator('control.common.column');\n\n const rowControlIcon = ( );\n\n const groupOptionsWithIcons = [\n 'availability_events', // start time, reason, duration\n 'availability_reasons', // reason, duration, count\n 'reject_reasons', // reason, count\n 'part_run', // start time, duration, part id, good count*, efficiency*, oee*\n 'work_center', // work center, efficiency*, good count*, reject count*, down time*, oee*\n ].map((groupId) => ({\n value: groupId,\n displayName: translator(`email_table.group.${groupId}.display_name`),\n description: translator(`email_table.group.${groupId}.description`),\n }));\n\n const enableMaxRowControl = TABLE_TYPES_WITH_MAX_ROW_ENABLED.has(tableTypeState);\n\n const handleDimensionApplyButton = (evt) => {\n handleSelectionChange(null);\n onDimensionOptionsChange(tableTypeState, maxRowCountState);\n };\n\n const handleTableTypeChange = (evt) => {\n setTableTypeState(evt.target.value);\n };\n\n const handleMaxRowCountChange = (evt) => {\n setMaxRowCountState(parseInt(evt.target.value.value, 10));\n };\n\n const isDirty = maxRowCount !== maxRowCountState || tableType !== tableTypeState;\n\n return (\n \n {editable && (\n (\n \n \n \n \n \n Row Options\n \n \n {enableMaxRowControl\n ? (Max Rows)\n : (Max Rows)\n }\n \n \n \n \n \n {translator('apply_literal')}\n \n \n\n \n )}\n />\n )}\n {editable && (\n {\n return (\n \n );\n }}\n handleContentLayout={true}\n />\n )}\n {children}\n \n );\n}\n\nEmailTableLiveControls.propTypes = {\n onDimensionOptionsChange: PropTypes.func.isRequired,\n onColumnsChange: PropTypes.func.isRequired,\n selectedColumns: PropTypes.array.isRequired,\n tableType: PropTypes.string.isRequired,\n maxNumUserSelectedColumns: PropTypes.number.isRequired,\n maxRowCount: PropTypes.number.isRequired,\n children: PropTypes.node,\n};\n\nEmailTableLiveControls.defaultProps = {};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\n\nconst Root = styled.div`\n\tbreak-inside: avoid;\n\tbackground-color: #fff;\n\n ${({$showBorder}) => $showBorder && css`\n border: 1px solid #a0a0a0;\n\t border-radius: 6px;\n `}\n`;\n\nfunction WidgetFrame({\n isPrint,\n frameHeader,\n liveControls,\n showBorder,\n \n children,\n}) {\n return (\n \n {frameHeader}\n {!isPrint && (\n \n {liveControls}\n
\n )}\n \n {children}\n
\n \n );\n}\n\nWidgetFrame.propTypes = {\n isPrint: PropTypes.bool,\n frameHeader: PropTypes.node,\n liveControls: PropTypes.node,\n showBorder: PropTypes.bool,\n children: PropTypes.node,\n};\n\nWidgetFrame.defaultProps = {\n showBorder: false,\n isPrint: false,\n};\n\nexport default WidgetFrame;\n","import {useState, useLayoutEffect} from 'react';\nimport useResizeObserver from '@react-hook/resize-observer';\n\n/**\n * A hook to provide the bounding rect of a target element. Updates on resize.\n *\n * @param {Element} target The DOM element to track the size of.\n *\n * @returns {Object} the bounding content rect of the target.\n */\nexport default function useBounds(target) {\n const [bounds, setBounds] = useState();\n\n useLayoutEffect(() => {\n if (target) {\n setBounds(target.getBoundingClientRect());\n }\n }, [target]);\n\n useResizeObserver(target, (entry) => setBounds(entry.contentRect));\n\n return bounds;\n}\n","export const TABLE_MIN_WIDTH = 320;\n\nexport const COLUMN_PADDING = 8;\nexport const SORT_ARROW_WIDTH_ALLOWANCE = 20;\nexport const EXPANDABLE_COLUMN_INDENT_PER_DEPTH = 14;\nexport const EXPANDABLE_COLUMN_INDENT_PER_DEPTH_PRINT = 8;\nexport const COLUMN_LEFT_INDENT_PER_DEPTH = 0;\nexport const COLUMN_RIGHT_INDENT_PER_DEPTH = 0;\nexport const COLUMN_BORDER_WIDTH = 1;\nexport const MAX_METRIC_PADDING = 8;\nexport const MIN_COLUMN_WIDTH = 50;\nexport const DEFAULT_COLUMN_WIDTH = 150;\nexport const MAX_COLUMN_WIDTH = 400;\n\nexport const STANDARD_HEADER_ROW_HEIGHT = 32;\nexport const SECONDARY_HEADER_ROW_HEIGHT = 24;\nexport const MINIMUM_ROW_HEIGHT = 24;\nexport const ADDITIONAL_ROW_HEIGHT_UNIT = 19;\nexport const STANDARD_FOOTER_HEIGHT = 12;\n\n// This is the proportion of the container width at which the table attempts to force\n// itself to be full width by expanding columns beyond their preferred width.\nexport const FORCE_FULL_WIDTH_PROPORTION = 0.8;\n\n// These are the offsets of the containerWidth to prevent overflow when resizing columns\nexport const CONTAINER_FULL_WIDTH_ADJUSTMENT = 0.96;\nexport const CONTAINER_FORCE_FULL_WIDTH_PROPORTION_ADJUSTMENT = 0.97;\n","// Import our styling for .cpe-ellipsis.\r\n\r\n// Adapted from: https://stackoverflow.com/a/13382873\r\nconst scrollBarWidth = (() => {\r\n if (!document) {\r\n return 0;\r\n }\r\n\r\n // Creating invisible container\r\n const outer = document.createElement('div');\r\n outer.style.visibility = 'hidden';\r\n outer.style.overflow = 'scroll'; // forcing scrollbar to appear\r\n document.body.appendChild(outer);\r\n\r\n // Creating inner element and placing it in the container\r\n const inner = document.createElement('div');\r\n outer.appendChild(inner);\r\n\r\n // Calculating difference between container's full width and the child width\r\n const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);\r\n\r\n // Removing temporary elements from the DOM\r\n outer.parentNode.removeChild(outer);\r\n\r\n return scrollbarWidth >= 0 ? scrollbarWidth : 0;\r\n})();\r\n\r\n/**\r\n * Gets the width of the scrollbar in the current browser. This function uses\r\n * a value calculated on initial load, so the scrollbar is not remeasured on\r\n * every call to this method.\r\n *\r\n * @returns the calculated width of the scrollbar in the browser in pixels\r\n */\r\nexport function getScrollBarWidth() {\r\n return scrollBarWidth;\r\n}\r\n","import { useMemo } from 'react';\n\nimport * as TableConstants from './tableConstants';\nimport { getScrollBarWidth } from 'Common/util/getScrollBarWidth';\nimport { getTextWidth, measureString } from 'Common/util/domUtils';\n\n\nconst scrollBarWidth = getScrollBarWidth();\n\nfunction getIndentPerDepth(column) {\n if (column.expandable === true) {\n return TableConstants.EXPANDABLE_COLUMN_INDENT_PER_DEPTH;\n }\n else if (column.align === 'right') {\n return TableConstants.COLUMN_RIGHT_INDENT_PER_DEPTH;\n }\n else {\n return TableConstants.COLUMN_LEFT_INDENT_PER_DEPTH;\n }\n}\n\nfunction forEachDataRow(data, cb, depth = 0) {\n data.forEach((row, rowIndex) => {\n cb(row, rowIndex, depth);\n\n if (row.subRows) {\n forEachDataRow(row.subRows, cb, depth + 1);\n }\n });\n}\n\n// If a textOnlyHeader is available prefer that.\nfunction getHeaderText(column) {\n const { Header, textOnlyHeader = null } = column;\n\n if (typeof textOnlyHeader === 'string') {\n return textOnlyHeader;\n }\n else if (typeof Header === 'string') {\n return Header;\n }\n else {\n // We don't know how to measure this.\n console.warn('Cannot get header text; assuming empty string');\n return '';\n }\n}\n\nfunction measureColumn({ column, data, maxWidth, minWidth, isLastColumn, headerTextWidthMap }) {\n // savedWidth trumps anything else\n if(column.savedWidth) {\n return {\n measuredWidth: column.savedWidth,\n optimalWidth: column.savedWidth,\n };\n }\n\n let maxMeasuredWidth = minWidth;\n let measureCell = column.measureCell || ((datum, measureFunction) => {\n let w = measureFunction(datum);\n return {measuredWidth: w, optimalWidth: w};\n });\n\n const accessor = column.accessor;\n const accessorType = (typeof accessor);\n let getCellData = null;\n\n if (accessorType === 'string') {\n getCellData = (row) => row[accessor];\n }\n else {\n getCellData = accessor;\n }\n\n const indentPerDepth = getIndentPerDepth(column);\n let maxOptimalWidth = 0;\n\n forEachDataRow(data, (row, rowIndex, depth) => {\n const { width, optimalWidth } = measureCell(getCellData(row), measureString);\n const approximateWidth = (w) => (\n w\n + (TableConstants.COLUMN_PADDING * 2) // left and right padding\n + (indentPerDepth * depth)\n + TableConstants.MAX_METRIC_PADDING\n + (TableConstants.COLUMN_BORDER_WIDTH * 2) // left and right border for some cells\n + (isLastColumn ? scrollBarWidth : 0)\n );\n\n maxMeasuredWidth = Math.max(approximateWidth(width), maxMeasuredWidth);\n maxOptimalWidth = Math.max(approximateWidth(optimalWidth), maxOptimalWidth);\n });\n\n // ensure room for sort icon by ensuring a certain width\n if (column.sortOrder) {\n //[FUTUREHACK] try to add just a little more wiggle room for the arrow + order\n maxMeasuredWidth = Math.max(maxMeasuredWidth, TableConstants.MIN_COLUMN_WIDTH + TableConstants.SORT_ARROW_WIDTH_ALLOWANCE);\n maxOptimalWidth = Math.max(maxOptimalWidth, TableConstants.MIN_COLUMN_WIDTH + TableConstants.SORT_ARROW_WIDTH_ALLOWANCE);\n }\n\n let measuredWidth = Math.min(Math.max(maxMeasuredWidth, minWidth), maxWidth);\n let optimalWidth = Math.min(Math.max(maxOptimalWidth, minWidth), maxWidth);\n\n const headerText = getHeaderText(column);\n const headerTextWidth = headerTextWidthMap[headerText] || (\n getTextWidth({fontName: \"Roboto\", fontSize: \"15px\", fontWeight: \"bold\"}, headerText) +\n (TableConstants.COLUMN_PADDING * 2) + \n TableConstants.MAX_METRIC_PADDING + \n TableConstants.COLUMN_BORDER_WIDTH +\n (column.sortable ? TableConstants.SORT_ARROW_WIDTH_ALLOWANCE : 0)\n );\n headerTextWidthMap[headerText] = headerTextWidth;\n\n if (headerTextWidth > optimalWidth) {\n optimalWidth = headerTextWidth;\n }\n\n return {\n measuredWidth: Math.floor(measuredWidth),\n optimalWidth: Math.floor(optimalWidth),\n };\n}\n\nfunction mapEachColumn(columns, cb, isLast=null) {\n return columns.map((column, columnIndex) => {\n const isLastColumn = columnIndex === (columns.length - 1);\n const newIsLast = isLast === null\n ? isLastColumn\n : isLast && isLastColumn;\n\n if (column.columns) {\n return {\n ...column,\n columns: mapEachColumn(column.columns, cb, newIsLast),\n };\n }\n else {\n return cb(column, columnIndex, newIsLast);\n }\n });\n}\n\n/**\n * Pass in the columns and total widths object you want updated.\n * This recursively goes through columns and aggregates the\n * totals based on of the leaf columns width information.\n * @param columns \n * @param totals \n */\nfunction aggregateTotalsForLowestLevelColumns(columns, totals) {\n columns.forEach(column => {\n if (column.columns) {\n aggregateTotalsForLowestLevelColumns(column.columns, totals);\n }\n else {\n totals.measuredWidth += column.measuredWidth;\n totals.optimalWidth += column.optimalWidth;\n if (column.savedWidth > 0) {\n totals.fixedWidth += column.savedWidth;\n }\n else if (column.measuredWidth >= column.maxWidth) {\n totals.fixedWidth += column.measuredWidth;\n }\n }\n });\n}\n\nconst PRIMARY_COLUMN_WIDTH = 200;\n\n/**\n * A hook to size columns for a table.\n *\n * Columns will be sized based on their width property. Any columns with width set to\n * 'auto' will be measured and sized appropriately. This measurement is done by calling\n * measureCell (see columns param) on each piece of data. The header text is also\n * measured. By default this measurement is not precise and only provides a best guess\n * measurement while being very performant.\n *\n * If the isPrint property is supplied columns will be forced to fit in the given space\n * with little regard to the contents of the column.\n *\n * @param {Array} columns The columns parameter for useTable, these are the relevant\n * fields for useSizedColumns:\n * width {Number | String} - If a number, try and use that as the width, if\n * isPrint is true a different width may need to be used. Any column with\n * the width set to 'auto' will be measured via measureCell.\n * [measureCell] {Function} - Columns can optionally have a member named\n * measureCell to provide a method for data to be measured. measureCell is\n * called with two args (data, measureFunction), data is the raw data object\n * for that cell and measureFunction is a method which takes a string as\n * input and outputs its best guess for that strings width in a table cell.\n * Most column types should only need to call that with a textOnly value to\n * calculate their width. If auto is used and measureCell is not provided one\n * will be generated based on the accessor, note that if the accessor does\n * not return a string the value cannot be measured in this case.\n * accessor {String|Function} - A standard react-table column accessor method.\n * when called on a data row it returns the raw table data for the cell in\n * the current column.\n * [textOnlyHeader] {String} - A plain-text version of the Header text meant to\n * to provide a decent estimation for the header text width. If supplied\n * it may be measured and factored in to the automatic width of a column if\n * space allows.\n * Header {Node|String} - If textOnlyHeader is not supplied and Header is a\n * string it may be measured and factored in to the automatic width of a\n * column if space allows.\n * [isPrimary] {Boolean} - If set to true, the column will be given a\n * larger width relative to other columns in print view.\n * @param {Array} data The data parameter for useTable.\n * @param {Number} containerWidth The width of the table container in pixels. Used for\n * \"auto\" width column calculation and used as a maximum width for isPrint.\n * @param {Boolean} [isPrint] If supplied, constrain the width available for all the\n * columns to containerWidth. With width supplied preset column widths are ignored\n * and will all be treated like they are set to 'auto'.\n *\n * @returns {Array} A memoized columns array with all width members set to their new\n * widths. The minWidth and maxWidth properties on columns may also be set to a\n * new size.\n */\nexport default function useSizedColumns({ columns, data, containerWidth, isPrint }) {\n const newColumns = useMemo(() => {\n let headerTextWidthMap = {}; // used so we don't have to recalculate same header text widths\n let updatedColumns = mapEachColumn(columns, (column, columnIndex, isLastColumn) => {\n if (column.width === 'auto') {\n const minWidth = column.minWidth === undefined\n ? TableConstants.MIN_COLUMN_WIDTH\n : column.minWidth;\n const maxWidth = column.maxWidth === undefined\n ? TableConstants.MAX_COLUMN_WIDTH\n : column.maxWidth;\n\n return {\n ...column,\n // measureColumn returns measuredWidth and optimalWidth\n // measureColumn respects column.savedWidth and will not recalculate\n // the width.\n ...measureColumn({\n column,\n data,\n minWidth,\n maxWidth,\n isLastColumn,\n headerTextWidthMap,\n }),\n maxWidth: maxWidth,\n isAuto: true,\n };\n }\n else if (typeof column.width === 'number') {\n // If we were given a hardcoded width, then use it!\n // This will be used for columns that are not supposed to be resized.\n return {\n ...column,\n optimalWidth: column.width,\n measuredWidth: column.width,\n };\n }\n else {\n return column;\n }\n });\n\n // Accumulate the measured, optimal, and fixed widths.\n let totals = {\n measuredWidth: 0,\n optimalWidth: 0,\n fixedWidth: 0,\n };\n aggregateTotalsForLowestLevelColumns(updatedColumns, totals);\n\n // At this point, we have a measured, optimal, and maximum width for each column,\n // as well as know the total measured width, total optimal width, and total\n // fixed width.\n\n // Let's determine the final column widths\n if(totals.measuredWidth > containerWidth) {\n if (isPrint) {\n const colIsPrimary = (col) => {\n let rv = col.isPrimary;\n if(col.columns) {\n rv = rv || col.columns.some(colIsPrimary);\n }\n return rv;\n };\n\n const countColumns = (cols, primary) => {\n return cols.reduce((acc, column) => {\n if(column.columns) {\n return acc + countColumns(column.columns, primary);\n }\n else {\n let count = 1;\n if (primary) {\n count = column.isPrimary ? 1 : 0;\n }\n return acc + count;\n }\n }, 0);\n };\n\n const numTopLevelColumns = columns.length;\n\n const numPrimaryColumns = countColumns(columns, true);\n\n const numRegularColumns = countColumns(columns, false) - numPrimaryColumns;\n\n // If there's enough space to make primary columns a little\n // bit bigger, do it.\n const primaryColumnWidth = containerWidth > (PRIMARY_COLUMN_WIDTH * numPrimaryColumns * 1.5)\n ? PRIMARY_COLUMN_WIDTH\n : containerWidth / numTopLevelColumns;\n\n const columnWidth = numRegularColumns > 0\n ? (containerWidth - (primaryColumnWidth * numPrimaryColumns)) / numRegularColumns\n : primaryColumnWidth;\n\n // Map through the top level of columns separately, because\n // only the top-level of columns supports the larger primary\n // column.\n return columns.map((column) => {\n const rv = {\n ...column,\n width: colIsPrimary(column)\n ? primaryColumnWidth\n : columnWidth,\n minWidth: 0,\n maxWidth: TableConstants.MAX_COLUMN_WIDTH,\n };\n\n if (rv.columns) {\n rv.columns = mapEachColumn(rv.columns, (subColumn) => {\n return {\n ...subColumn,\n width: colIsPrimary(subColumn)\n ? primaryColumnWidth\n : columnWidth,\n minWidth: 0,\n maxWidth: TableConstants.MAX_COLUMN_WIDTH,\n };\n });\n }\n\n return rv;\n });\n }\n else {\n // We are going to overflow, no matter what. Use measured width for each column.\n updatedColumns = mapEachColumn(updatedColumns, column => {\n if (column.savedWidth) {\n // Leave saved widths alone\n column.width = column.savedWidth;\n }\n else {\n column.width = column.measuredWidth;\n }\n return column;\n });\n }\n }\n else if (totals.optimalWidth > containerWidth) {\n // We can fit more than the measured width, but not all of the optimal width.\n // Use a width for each column proportionally between measured and optimal.\n\n // If we were to use only measured width, how much room do we still have to\n // expand columns closer to their optimal width?\n // To prevent overflow, we need less than the full container width\n const roomToExpand = (containerWidth * TableConstants.CONTAINER_FORCE_FULL_WIDTH_PROPORTION_ADJUSTMENT) - totals.measuredWidth;\n\n // What is the starting width for the columns that can be expanded (i.e., don't\n // have a saved width)?\n const totalStartingWidth = totals.measuredWidth - totals.fixedWidth;\n\n updatedColumns = mapEachColumn(updatedColumns, column => {\n if (column.savedWidth) {\n // Leave saved widths alone\n column.width = column.savedWidth;\n }\n else {\n // Give this column it's proportion of the room we have to expand\n column.width = Math.floor(roomToExpand * (column.measuredWidth/totalStartingWidth) + column.measuredWidth);\n }\n return column;\n });\n }\n else if (totals.optimalWidth > Math.floor(containerWidth * TableConstants.FORCE_FULL_WIDTH_PROPORTION)) {\n // Our optimal width is close to the size of a container, so expand a little more to \n // fill the space and not \"look broken\".\n\n // If we were to use only optimal width, how much room do we still have to\n // expand columns in order to fill the container?\n // To prevent overflow, we need less than the full container width\n const roomToExpand = (containerWidth * TableConstants.CONTAINER_FULL_WIDTH_ADJUSTMENT) - totals.optimalWidth;\n\n // What is the starting width for the columns that can be expanded (i.e., don't\n // have a saved width)? \n const spreadableWidth = totals.optimalWidth - totals.fixedWidth;\n\n updatedColumns = mapEachColumn(updatedColumns, column => {\n if (column.savedWidth) {\n // Leave saved widths alone\n column.width = column.savedWidth;\n }\n else {\n // Give this column its proportion of the room we have to expand\n column.width = Math.floor(roomToExpand * (column.optimalWidth/spreadableWidth) + column.optimalWidth);\n }\n return column;\n });\n }\n else {\n // We have lots of open room, just use optimal width for each column.\n updatedColumns = mapEachColumn(updatedColumns, column => {\n if (column.savedWidth) {\n // Leave saved widths alone\n column.width = column.savedWidth;\n }\n else {\n column.width = column.optimalWidth;\n }\n return column;\n });\n }\n\n return updatedColumns;\n }, [ columns, data, containerWidth, isPrint ]);\n\n return newColumns;\n}\n","/**\n * Gets the depth of the table data. Currently only the first data\n * row is sampled as all rows are assumed to have the same depth.\n *\n * @param {Array} data The data or sub-data of a table data-set.\n * @param {Number} [depth=0] The depth into the data the caller is at.\n */\nexport function getMaxDepth(data, depth = 0) {\n if (data.length > 0) {\n return data.reduce((acc, dd) => {\n const subRows = dd.subRows;\n\n if (subRows && subRows.length > 0) {\n return Math.max(getMaxDepth(subRows, depth + 1), acc);\n }\n\n return acc;\n }, depth);\n }\n\n return depth;\n}\n\n/**\n * Calculates the full expanded state for react-table given a\n * collapse level.\n *\n * @param {Number} collapseLevel The level at which to collapse to.\n * Negative values are relative to the max depth as calculated\n * by getMaxDepth .\n * @param {Array} data Data passed in to Table component\n */\nexport function calculateExpandedStateAtLevel(collapseLevel, data) {\n // Negative collapse levels should be relative to the max depth\n // of the hierarchy.\n //\n if (collapseLevel < 0) {\n collapseLevel = getMaxDepth(data) + collapseLevel;\n }\n\n const buildState = (rows, expandedState = {}, levels = []) => {\n if (levels.length >= collapseLevel) {\n return expandedState;\n }\n\n rows.forEach((row, rowIndex) => {\n const currentLevels = levels.concat(rowIndex);\n\n expandedState[currentLevels.join('.')] = true;\n\n if (row.subRows && row.subRows.length > 0) {\n buildState(\n row.subRows,\n expandedState,\n currentLevels\n );\n }\n });\n\n return expandedState;\n };\n\n return buildState(data);\n}\n\n/**\n * Font weight for the dimension cell based on its depth,\n * the maxDepth, and rootNodeCount.\n * \n * @param {Number} depth \n * @param {*} maxDepth \n * @param {*} rootNodeCount \n */\nexport const getCellFontWeight = (depth, maxDepth, rootNodeCount) => {\n // only bold certain rows if there is any depth at all\n if (maxDepth !== 0) {\n // assume that only the first depth will have bold text\n let boldDepth = 0;\n // if there is only a single root node (as in Enterprise) bold the first two depths\n if (rootNodeCount === 1) {\n boldDepth = 1;\n }\n if (depth <= boldDepth && depth !== maxDepth) {\n return '700';\n }\n }\n};\n\n/**\n * Helper function for handling the resize column info that comes from table.\n * \n * @param {Object} savedColumnWidths\n * @param {Object} updatedColumnWidths\n */\nexport function updateSavedColumnWidths({ savedColumnWidths, updatedColumnWidths }) {\n let newColumnWidths = { ...savedColumnWidths };\n Object.keys(updatedColumnWidths).forEach(id => {\n if (Number.isFinite(updatedColumnWidths[id])) {\n newColumnWidths[id] = updatedColumnWidths[id];\n }\n else {\n delete newColumnWidths[id];\n }\n });\n return newColumnWidths;\n}\n","const cssValueRegex = (() => {\n const cssUnitRegexString = [\n 'px', 'em', 'rem', '%',\n 'pt', 'vw', 'vh', 'vmin',\n 'vmax', 'in', 'cm', 'mm',\n 'lh', 'pc', 'ex', 'ch',\n 'Q',\n ].map((unit) => `(?:${unit})`).join('|');\n\n // A css value\n const regexString = `^(-?\\\\d+\\\\.?\\\\d*)(?:${cssUnitRegexString})?$`;\n\n return RegExp(regexString);\n})();\n\n/**\n * Helper to parse css unit strings such as \"123px\" into the numeric representation such as 123\n *\n * @param {Number|String} cssValue A number of units or css value such as \"123px\", \"15em\", or \"0\"\n *\n * @returns {Number} Numeric representation of the unit value.\n */\nexport function cssValueToNumber(cssValue) {\n const parseFail = (error = 'unknown') => {\n throw new Error(`Cannot parse cssValue value of \"${cssValue}\". Error: ${error}`);\n };\n\n if (typeof cssValue === 'number') {\n return cssValue;\n }\n else if (typeof cssValue === 'string') {\n cssValue = cssValue.trim();\n\n const unitValueMatches = cssValue.match(cssValueRegex);\n\n if (unitValueMatches) {\n const numericValue = Number(unitValueMatches[1]);\n\n if (Number.isNaN(numericValue)) {\n parseFail('parsed value is NaN');\n }\n else {\n return numericValue;\n }\n }\n else {\n parseFail('unsupported unit or format');\n }\n }\n else {\n parseFail('unsupported type');\n }\n}\n","import React from 'react';\nimport Icon from 'Common/components/Icon';\nimport styled from 'styled-components';\nimport useTranslation from 'Common/hooks/useTranslation';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: row;\n padding: 0 10px;\n align-items: center;\n min-height: 24px;\n`;\n\nconst IconContainer = styled.div`\n padding-right: 3px;\n`;\n\nexport default function NoDataPlaceholder() {\n const iconTitle = useTranslation('no_data_in_gap_extended_copy');\n const noDataText = useTranslation('no_data_literal');\n\n return (\n \n \n \n \n {noDataText}
\n \n );\n}\n","import React, {\n useCallback,\n useEffect,\n useMemo,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\nimport {\n useTable,\n useResizeColumns,\n useFlexLayout,\n useRowSelect,\n} from 'react-table';\n\nimport { FixedSizeList } from 'react-window';\nimport { FontFamily } from 'Common/components/typography';\nimport Icon from 'Common/components/Icon';\nimport useSizedColumns from './internal/useSizedColumns';\nimport * as TableConstants from './internal/tableConstants';\nimport { getMaxDepth, getCellFontWeight } from './tableUtil';\nimport { getScrollBarWidth } from 'Common/util/getScrollBarWidth';\nimport { cssValueToNumber } from 'Common/util/cssHelpers';\nimport NoDataPlaceholder from './internal/NoDataPlaceholder';\nimport useExpandedRows from './internal/useExpandedRows';\n\nconst printBorderColor = ({ theme }) => theme.colors.palette.grey.silver;\n\nconst scrollBarWidth = getScrollBarWidth();\n\nconst roundingRadius = '4px';\n\nconst ExpanderContainer = styled.div`\n display: inline-block;\n font-size: 6px;\n padding-right: 1em;\n height: 1.5em;\n vertical-align: middle;\n`;\n\nconst CellContent = styled.div.attrs(({leftPadding, rightPadding, fontWeight, width}) => {\n return {\n style: {\n paddingLeft: leftPadding,\n paddingRight: rightPadding,\n fontWeight: fontWeight,\n width: width,\n },\n };\n})`\n min-width: 0px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: flex;\n align-items: center;\n height: 100%;\n\n span.cpe-data-item,\n span.cpe-metric-value {\n display: inline;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n`;\n\nconst leftShadow = 'inset 8px 0px 10px -10px rgba(0,0,0,0.08)';\nconst rightShadow = 'inset -8px 0px 10px -10px rgba(0,0,0,0.08)';\n\nconst TableCell = styled.div`\n ${({showCellBorders, isPrint}) => showCellBorders && !isPrint && css`\n /* Ensure all cells, including the header, get padding when showing\n cell borders.\n */\n padding: 0 ${TableConstants.COLUMN_PADDING}px;\n\n :first-child {\n box-shadow: ${rightShadow};\n }\n\n :not(:first-child) {\n box-shadow: ${leftShadow}, ${rightShadow};\n border-left: ${TableConstants.COLUMN_BORDER_WIDTH}px solid white;\n }\n\n :last-child {\n box-shadow: ${leftShadow};\n }\n `}\n`;\n\nconst HeaderCell = styled(TableCell)`\n ${({isPrint, showTopBorder, hasContent}) => showTopBorder && !isPrint && hasContent && css`\n border-top: ${TableConstants.COLUMN_BORDER_WIDTH}px solid white;\n `}\n`;\n\nconst ResizeHandle = styled.div``;\n\nconst CellBorderResizeTarget = styled.div.attrs(({isLastColumn, bodyHasScrollbar}) => {\n return {\n style: {\n right: isLastColumn && !bodyHasScrollbar ? 0 : -10,\n width: isLastColumn ? 10 : 20,\n },\n };\n})`\n position: absolute;\n height: 24px;\n\n /* Just need to make sure it ends up above the neighboring cell */\n z-index: 10;\n`;\n\nconst SortClickTarget = styled.div`\n flex: 1 1 auto;\n min-width: 0px;\n height: 100%;\n\n ${({readonly}) => !readonly && css`\n cursor: pointer;\n `}\n`;\nconst CellContentAndSortContainer = styled.div`\n display: flex;\n align-items: baseline;\n min-width: 0px;\n\n > * {\n user-select: none;\n }\n`;\nconst SortOrderSubScript = styled.sub`\n padding-left: 2px;\n font-size: 8px;\n`;\n\nconst TableRowBase = styled.div`\n ${({ isPrint }) => isPrint && css`\n border-radius: 0;\n border-top: 1px solid ${printBorderColor};\n border-left: 1px solid ${printBorderColor};\n `}\n`;\n\nconst HeaderRow = styled(TableRowBase)`\n ${({ bodyHasScrollbar }) => bodyHasScrollbar && css`\n padding-right: ${scrollBarWidth}px;\n `}\n\n background-color: ${({theme, isSecondaryHeaderRow}) => isSecondaryHeaderRow\n ? theme.colors.palette.grey.ash\n : theme.colors.palette.grey.manatee\n };\n\n ${({ isPrint, theme }) => isPrint && css`\n background-color: ${theme.colors.palette.white};\n `}\n\n ${({isSecondaryHeaderRow}) => isSecondaryHeaderRow\n ? css`\n font-size: 12px;\n `\n : css`\n border-top-left-radius: ${roundingRadius};\n border-top-right-radius: ${roundingRadius};\n `\n }\n\n ${HeaderCell} {\n position: relative;\n margin: 0;\n height: ${({isSecondaryHeaderRow}) => isSecondaryHeaderRow\n ? TableConstants.SECONDARY_HEADER_ROW_HEIGHT\n : TableConstants.STANDARD_HEADER_ROW_HEIGHT\n }px;\n padding-left: ${TableConstants.COLUMN_PADDING}px;\n\n ${({ isPrint }) => isPrint && css`\n border-right: 1px solid ${printBorderColor};\n padding: 0 2px;\n `}\n\n ${ResizeHandle} {\n right: 0;\n position: relative;\n height: 13px;\n width: 18px;\n flex: 0 0 auto;\n\n z-index: 1;\n color: ${({theme}) => theme.colors.palette.grey.silver};\n font-size: 9px;\n text-align: center;\n\n /* prevents from scrolling while dragging on touch devices */\n touch-action: none;\n\n ${({ isPrint }) => isPrint && css`\n position: absolute;\n right: -9px; /* Half of width */\n opacity: 0; /* Invisible. Column border is there as a visual indicator. */\n `}\n\n /* Hide the handle when page is printed */\n @media print {\n display: none;\n }\n }\n }\n`;\n\nconst BodyRow = styled(TableRowBase)`\n ${({isPrint }) => !isPrint && css`\n border-radius: ${roundingRadius};\n\n /* The last row should not have a bottom border radius for aesthetics. */\n :last-child {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n }\n `}\n\n ${({ stripedRow, theme, noColor }) => stripedRow && css`\n background-color: ${noColor ? theme.colors.palette.grey.cloud : theme.colors.palette.blue.ice};\n `}\n\n ${({isTotal}) => isTotal && css`\n font-weight: bold;\n `}\n\n ${({isPrint, theme}) => !isPrint && css`\n :hover {\n background-color: ${theme.colors.palette.grey.cloud};\n }\n `}\n\n ${TableCell} {\n position: relative;\n margin: 0;\n padding: 0 ${TableConstants.COLUMN_PADDING}px;\n\n ${({ isPrint }) => isPrint && css`\n border-right: 1px solid ${printBorderColor};\n padding: 0 2px;\n `}\n }\n`;\n\nconst Thead = styled.div``;\nconst Tbody = styled.div``;\nconst TableFooter = styled.div``;\n\n/**\n * When there are no header columns give the table a header.\n */\nconst EmptyTableHeader = styled.div`\n width: 100%;\n height: ${TableConstants.STANDARD_FOOTER_HEIGHT}px;\n background-color: ${({theme}) => theme.colors.palette.grey.manatee};\n border-top-left-radius: ${roundingRadius};\n border-top-right-radius: ${roundingRadius};\n\n ${({isPrint}) => isPrint && css`\n height: 0;\n border-top: 1px solid ${printBorderColor};\n border-radius: none;\n `}\n`;\n\nconst Table = styled.div`\n font-family: ${FontFamily.primary};\n\n ${Thead} {\n color: ${({theme}) => theme.colors.palette.white};\n font-size: 14px;\n border-top-left-radius: ${roundingRadius};\n border-top-right-radius: ${roundingRadius};\n\n ${({ isPrint }) => isPrint && css`\n border-radius: 0;\n color: ${({theme}) => theme.colors.darkText.highEmphasis};\n background-color: ${({theme}) => theme.colors.palette.white};\n font-size: 12px;\n font-weight: bold;\n `}\n }\n\n ${Tbody} {\n color: ${({theme}) => theme.colors.darkText.highEmphasis};\n background-color: ${({theme}) => theme.colors.palette.white};\n font-size: 12px;\n overflow-x: hidden;\n\n ${({ isPrint }) => isPrint && css`\n font-size: 11px;\n `}\n }\n\n ${TableFooter} {\n width: 100%;\n height: ${TableConstants.STANDARD_FOOTER_HEIGHT}px;\n background-color: ${({theme}) => theme.colors.palette.grey.manatee};\n border-bottom-left-radius: ${roundingRadius};\n border-bottom-right-radius: ${roundingRadius};\n\n ${({isPrint}) => isPrint && css`\n height: 0;\n border-top: 1px solid ${printBorderColor};\n border-radius: none;\n `}\n }\n`;\n\nconst Root = styled.div.attrs(({ minWidth, isPrint }) => {\n return {\n style: {\n minWidth,\n overflow: isPrint ? 'hidden' : 'auto',\n },\n };\n})`\n display: block;\n`;\n\nconst getStyle = (align, style = {}) => {\n let justifyContent = 'space-between';\n\n if (align === 'right') {\n justifyContent = 'flex-end';\n }\n else if (align === 'center') {\n justifyContent = 'center';\n }\n\n let rv = {\n justifyContent,\n alignItems: 'center',\n display: 'flex',\n };\n\n\n\n return rv;\n};\n\nconst getStyles = (props, align = 'left') => {\n return [\n props,\n {\n style: getStyle(align, props.style)\n },\n ];\n};\n\nconst headerProps = (props, { column }) => {\n let title = column.title;\n\n if (title === undefined && typeof column.Header === 'string') {\n title = column.Header;\n }\n\n return [\n ...getStyles(props, column.align),\n {\n title,\n },\n ];\n};\n\nconst cellProps = (props, { cell }) => getStyles(props, cell.column.align);\n\n/**\n * TableComponent - A simple, virtualized React table that supports\n * hierarchical data.\n *\n * @param {Object} props\n * @param {Array} props.columns The columns to be passed into first through\n * useSizedColumns and then react-table. Should be memoized.\n * @param {Array} props.data The rows of data to be passed to react-table.\n * Supports hierarchy through the subRows property. Should be memoized.\n * Any data rows that should be treated as total rows should have the\n * property `isTotal` set to true.\n * @param {Number} [props.containerWidth = 0] The width of the table's\n * container in pixels.\n * @param {Function} [props.setExpandedRows] Called when state changes\n * so user can externally save the expanded row state.\n * @param {Function} [props.setResizedColumnWidths] Called when state changes\n * so user can externally save the resized column widths state.\n * @param {Function} [props.onSortByColumnChange] If provided, called when user\n * clicks on the header columns.\n * @param {Boolean} [props.isPrint = false] If true the table will be rendered\n * in a print friendly format with minimal interactivity. If true isPrint\n * also forces the height prop for the table to be 'full'.\n * @param {Boolean} [props.noColor = false] If true don't render colors for\n * what the table controls and pass noColor to column render functions.\n * @param {Number} [props.rowHeight = 1] A number of lines of data that should\n * fit in a row. This value changes the height of all rows in the table\n * (excluding the header and footer).\n * @param {Number} [props.maxRowsShown] The number of rows shown within the viewport\n * of the the table. If this value is not provided, the height of all rows will be\n * the height of table viewport.\n * @param {Boolean} [props.showCellBorders = false] If true show vertical\n * borders for the data / header cells and do not show the drag handles.\n * @param {Boolean} [props.showNoDataPlaceholder = false] When set to true if\n * if there is no data it will still show a row saying no data.\n *\n * @param {Function} [props.onColumnResizeStart] If provided, called when user\n * clicks starts resizing a column.\n * @param {Function} [props.onColumnResizeEnd] If provided, called when user\n * clicks stops resizing a column.\n *\n * @see react-table\n * @see useSizedColumns\n */\nfunction TableComponent({\n columns: originalColumns,\n containerWidth,\n data,\n expandedRows,\n isPrint,\n maxRowsShown,\n noColor,\n rowHeight,\n showCellBorders,\n showNoDataPlaceholder,\n\n onSortByColumnChange,\n setExpandedRows,\n setResizedColumnWidths,\n\n onColumnResizeStart,\n onColumnResizeEnd,\n}) {\n\n const defaultColumn = useMemo(\n () => ({\n // When using useFlexLayout:\n // minWidth is only used as a limit for resizing\n // width is used for both the flex-basis and flex-grow\n // maxWidth is only used as a limit for resizing\n //\n minWidth: TableConstants.MIN_COLUMN_WIDTH,\n width: TableConstants.DEFAULT_COLUMN_WIDTH,\n maxWidth: TableConstants.MAX_COLUMN_WIDTH,\n }),\n []\n );\n\n // number of root nodes in the data\n // for enterprise hierarchies this will be 1, Enterprise\n // for other hierarchies it can be more than 1, like n parts\n const rootNodeCount = data.length;\n const maxDepth = getMaxDepth(data);\n const columns = useSizedColumns({\n columns: originalColumns,\n data,\n isPrint,\n containerWidth: containerWidth - (isPrint ? 0 : scrollBarWidth),\n });\n\n const {\n getTableProps,\n headerGroups,\n rows,\n totalColumnsWidth,\n prepareRow,\n state,\n } = useTable(\n {\n columns,\n data,\n defaultColumn,\n },\n useResizeColumns,\n useFlexLayout,\n useRowSelect,\n );\n\n // allow saving the column resizing state\n const columnResizedWidths = state?.columnResizing?.columnWidths;\n const resizingHasFinished = state?.columnResizing?.isResizingColumn === null;\n useEffect(() => {\n if (resizingHasFinished ) {\n setResizedColumnWidths(columnResizedWidths);\n }\n }, [columnResizedWidths, setResizedColumnWidths, resizingHasFinished]);\n\n const isResizingColumn = typeof state?.columnResizing?.isResizingColumn === 'string';\n\n useEffect(() => {\n if (isResizingColumn) {\n onColumnResizeStart();\n }\n else {\n onColumnResizeEnd();\n }\n }, [isResizingColumn, onColumnResizeStart, onColumnResizeEnd]);\n\n const rowsWithExpandedDetails = useExpandedRows({ expanded:expandedRows, rows, setExpandedRows });\n\n const width = isPrint\n ? containerWidth\n : Math.max(\n totalColumnsWidth + scrollBarWidth,\n TableConstants.TABLE_MIN_WIDTH\n );\n\n const readonlySort = !onSortByColumnChange || isPrint;\n\n const tableProps = useCallback((initialTableProps) => {\n let minWidth = cssValueToNumber(initialTableProps.style.minWidth);\n minWidth = Math.max(minWidth, totalColumnsWidth);\n\n if (!isPrint) {\n minWidth += scrollBarWidth;\n }\n\n return [\n initialTableProps,\n {\n style: {\n minWidth,\n },\n },\n ];\n }, [ isPrint, totalColumnsWidth ]);\n\n const renderRow = useCallback(\n ({ index, style }) => {\n const row = rowsWithExpandedDetails[index];\n prepareRow(row);\n\n return (\n \n {row.cells.map((cell, cellIndex) => {\n const inverseDepth = maxDepth - row.depth;\n const canExpand = row.subRows?.length;\n let expander = null;\n let contentProps = {};\n let expandedIconOffset = !canExpand && !isPrint ? 12 : 0;\n\n if (cell.column.expandable === true) {\n if (canExpand && !isPrint) {\n contentProps = {\n onClick: () => { row.handleExpandToggle(row.id); },\n style: { cursor: 'pointer'},\n };\n expander = (\n \n \n \n );\n }\n\n const indentPerDepth = isPrint\n ? TableConstants.EXPANDABLE_COLUMN_INDENT_PER_DEPTH_PRINT\n : TableConstants.EXPANDABLE_COLUMN_INDENT_PER_DEPTH;\n\n contentProps.leftPadding = `${expandedIconOffset + (row.depth * indentPerDepth)}px`;\n }\n else if (!isPrint) {\n\n if (inverseDepth < 0) {\n throw new Error(\n `Row depth of ${row.depth} is greater than specified max depth of ${maxDepth}`\n );\n }\n\n if (cell.column.align === 'right') {\n contentProps.rightPadding = `${inverseDepth * TableConstants.COLUMN_RIGHT_INDENT_PER_DEPTH}px`;\n }\n else {\n contentProps.leftPadding = `${row.depth * TableConstants.COLUMN_LEFT_INDENT_PER_DEPTH}px`;\n }\n }\n\n if (cell.column.fillCellWidth) {\n contentProps.width = '100%';\n }\n\n // The following exists for backwards compatibility:\n // Allow left aligned data items to stretch out and use the full cell.\n if (cell.column.align === 'left') {\n contentProps.width = '100%';\n }\n\n contentProps.fontWeight = getCellFontWeight(row.depth, maxDepth, rootNodeCount);\n return (\n \n \n {expander}\n {cell.render('Cell', { noColor, rowHeight })}\n \n \n );\n })}\n \n );\n },\n [prepareRow, rowsWithExpandedDetails, isPrint, maxDepth, rootNodeCount, noColor, rowHeight, showCellBorders]\n );\n\n const renderHeaderRows = useCallback(\n (headerGroupsToRender, bodyHasScrollbar) => {\n const maxGroupIndex = headerGroupsToRender.length - 1;\n\n if (headerGroupsToRender.length === 0) {\n return (\n \n );\n }\n else {\n return headerGroupsToRender.map((headerGroup, groupIndex) => {\n const showSortOrder = headerGroup.headers.filter( (hh) => {return hh.sortIndex !== null;}).length > 1;\n const isHigherOrderHeader = (groupIndex !== maxGroupIndex);\n const isSecondaryHeaderRow = groupIndex !== 0;\n const isLightweightHeaderRow = maxGroupIndex > 0 && groupIndex === maxGroupIndex;\n const showTopBorder = groupIndex > 1 ;\n \n return (\n \n {headerGroup.headers.map((column, columnIndex) => (\n \n {\n if (column.sortable && !readonlySort) {\n onSortByColumnChange(columnIndex, !e.shiftKey);\n }\n }}\n >\n \n \n {column.render('Header')}\n \n {\n column.sortOrder && (\n \n )\n }\n {\n showSortOrder && Number.isInteger(column.sortIndex) && (\n {column.sortIndex + 1}\n )\n }\n \n \n {column.canResize && (showCellBorders\n ? (\n {\n setResizedColumnWidths({ [column.id]: null });\n }}\n bodyHasScrollbar={bodyHasScrollbar}\n />\n )\n : (\n {\n setResizedColumnWidths({ [column.id]: null });\n }}\n >\n {}\n \n )\n )}\n \n ))}\n \n );\n });\n }\n },\n [isPrint, onSortByColumnChange, readonlySort, showCellBorders, setResizedColumnWidths]\n );\n\n // The minimum row height accounts for some padding that should not be included\n // in for additional row height increments, so the min row height and additional\n // row height are kept as separate values.\n //\n const rowPixelHeight = TableConstants.MINIMUM_ROW_HEIGHT + ((rowHeight - 1) * TableConstants.ADDITIONAL_ROW_HEIGHT_UNIT);\n\n let bodyHeight = 0;\n let bodyHasScrollbar;\n\n const totalRowHeight = rowsWithExpandedDetails.length * rowPixelHeight;\n\n if (isPrint) {\n bodyHeight = totalRowHeight;\n bodyHasScrollbar = false;\n }\n else {\n bodyHeight = Math.min(totalRowHeight, rowPixelHeight * maxRowsShown);\n\n bodyHasScrollbar = totalRowHeight > bodyHeight;\n\n // If the table doesn't have enough content to fill the full body\n // height, make the body height smaller.\n //\n if (!bodyHasScrollbar) {\n bodyHeight = totalRowHeight;\n }\n }\n\n return (\n \n \n \n {renderHeaderRows(headerGroups, bodyHasScrollbar)}\n \n \n \n {renderRow}\n \n {rowsWithExpandedDetails.length === 0 && showNoDataPlaceholder && ()}\n \n \n
\n \n );\n}\n\nconst ColumnPropType = PropTypes.arrayOf(\n PropTypes.shape({\n Header: PropTypes.node.isRequired,\n textOnlyHeader: PropTypes.string,\n accessor: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.func,\n ]),\n title: PropTypes.string,\n // react-table useSortBy is not current being used beware\n // of other sort props found on column\n sortOrder: PropTypes.oneOf(['asc', 'desc']),\n sortIndex: PropTypes.number,\n }),\n);\nTableComponent.propTypes = {\n columns: PropTypes.oneOfType([\n PropTypes.arrayOf(\n PropTypes.shape({\n Header: PropTypes.node.isRequired,\n textOnlyHeader: PropTypes.string,\n columns: ColumnPropType.isRequired,\n }),\n ),\n ColumnPropType,\n ]),\n containerWidth: PropTypes.number,\n data: PropTypes.array,\n expandedRows: PropTypes.object,\n isPrint: PropTypes.bool,\n maxRowsShown: PropTypes.number,\n noColor: PropTypes.bool,\n rowHeight: PropTypes.number,\n showCellBorders: PropTypes.bool,\n showNoDataPlaceholder: PropTypes.bool,\n\n onSortByColumnChange: PropTypes.func,\n setExpandedRows: PropTypes.func,\n setResizedColumnWidths: PropTypes.func,\n\n onColumnResizeStart: PropTypes.func,\n onColumnResizeEnd: PropTypes.func,\n};\n\nTableComponent.defaultProps = {\n columns: [],\n containerWidth: 0,\n data: [],\n expandedRows: {},\n isPrint: false,\n maxRowsShown: 14,\n noColor: false,\n rowHeight: 1,\n showCellBorders: false,\n showNoDataPlaceholder: false,\n\n setExpandedRows: () => {},\n setResizedColumnWidths: () => {},\n\n onColumnResizeStart: () => {},\n onColumnResizeEnd: () => {},\n};\n\nexport default TableComponent;\n","import {\n useMemo,\n} from 'react';\n\n/**\n * Hook to handle expanded rows. We don't use the one included with react-table\n * because the widgets are allowed to change the expanded rows as well.\n * \n * @param {Object} expanded the expanded state\n * @param {Object[]} rows the data shown as rows in the table\n * @param {Function} setExpandedRows update expanded state\n */\nexport default function ({ expanded, rows, setExpandedRows }) {\n return useMemo(() => {\n let expandedRows = [];\n const handleExpandRow = (row) => {\n const isExpanded = expanded[row.id];\n expandedRows.push({\n ...row,\n isExpanded,\n handleExpandToggle: (id) => {\n let updatedExpandedState = {\n ...expanded\n };\n if (updatedExpandedState[id]) {\n delete updatedExpandedState[id];\n }\n else {\n updatedExpandedState[id] = true;\n }\n setExpandedRows(updatedExpandedState);\n }\n });\n\n if (row.subRows?.length && isExpanded) {\n row.subRows.forEach(handleExpandRow);\n }\n };\n\n rows.forEach(handleExpandRow);\n\n return expandedRows;\n }, [rows, expanded, setExpandedRows]);\n}\n","import React, { useCallback, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport useBounds from 'Common/hooks/useBounds';\n\nimport Table from './Table';\n\nconst Container = styled.div`\n display: flex;\n width: 100%;\n`;\n\n/**\n * A wrapper around that watches for changes in the available width and\n * passes it to the Table.\n *\n * This wapper also blocks rerenders of the Table during column resizing.\n *\n * @see Table\n */\nfunction WidthAdjustableTable(props) {\n const [container, setContainer] = useState(null);\n\n const bounds = useBounds(container);\n\n const [ isResizing, setIsResizing ] = useState(false);\n\n const handleColumnResizeStart = useCallback(() => {\n setIsResizing(true);\n }, []);\n\n const handleColumnResizeEnd = useCallback(() => {\n setIsResizing(false);\n }, []);\n\n const lastTablePropsRef = useRef(props);\n const lastTableBounds = useRef(bounds);\n\n // Only allow the props to change if a column is not being resized.\n // Otherwise, keep reusing the same props until the resize is done.\n if (!isResizing) {\n lastTablePropsRef.current = props;\n lastTableBounds.current = bounds;\n }\n\n return (\n \n \n \n );\n}\n\nexport default WidthAdjustableTable;\n","\nimport React, { useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport EmailTableLiveControls from './EmailTableLiveControls';\nimport WidgetFrame from 'Common/components/WidgetFrame/WidgetFrame';\nimport Table from 'Common/components/Table/WidthAdjustableTable';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport {\n getMockTableData,\n getMockTableHeaderColumns,\n getEmailTableMetricListMetricOptions,\n} from './MockWidgetData';\n\nconst CONFIG_BY_TABLE_TYPE = {\n 'availability_events': {\n hardCodedColumns: [\n 'start_time',\n 'process_state_reason',\n 'duration',\n ],\n maxNumUserSelectedColumns: 0,\n },\n 'availability_reasons': {\n hardCodedColumns: [\n 'process_state_reason',\n 'duration',\n 'count',\n ],\n maxNumUserSelectedColumns: 0,\n },\n 'reject_reasons': {\n hardCodedColumns: [\n { channel: 'quality', name: 'reject_reason' },\n { channel: 'quality', name: 'count' },\n ],\n maxNumUserSelectedColumns: 0,\n },\n 'part_run': {\n hardCodedColumns: [\n 'start_time',\n 'duration',\n 'part',\n ],\n maxNumUserSelectedColumns: 3,\n },\n 'work_center': {\n hardCodedColumns: [\n 'asset',\n ],\n maxNumUserSelectedColumns: 5,\n },\n};\n\nconst getHardCodedColumnsForTableType = (tableType) => {\n if (!CONFIG_BY_TABLE_TYPE[tableType]) {\n throw new Error(`Invalid tableType: ${tableType}`);\n }\n\n return CONFIG_BY_TABLE_TYPE[tableType].hardCodedColumns;\n};\n\nconst getMaxNumUserSelectedColumnsForTableType = (tableType) => {\n if (!CONFIG_BY_TABLE_TYPE[tableType]) {\n throw new Error(`Invalid tableType: ${tableType}`);\n }\n\n return CONFIG_BY_TABLE_TYPE[tableType].maxNumUserSelectedColumns;\n};\n\nexport default function EmailTableWidget({\n metricThresholds,\n widgetStf,\n widgetState,\n areLiveControlsVisible,\n actions,\n timeRange,\n explorationPath,\n mutable,\n dragHandleProps,\n isDragEnabled,\n isLayoutModeActive,\n dataService,\n isPrint,\n hideTrend,\n printConfig,\n suppressedControls,\n suppressDelete,\n}) {\n const showLiveControls = areLiveControlsVisible;\n\n // function to update state with new columns\n const updateColumnsInFieldSet = (origState, newColumns) => {\n const newFieldSet = {\n ...origState.exploration_path.field_set,\n fields: newColumns\n };\n\n const newExplorationPath = {\n ...origState.exploration_path,\n field_set: newFieldSet\n };\n\n return {\n ...origState,\n exploration_path: newExplorationPath,\n };\n };\n\n const [dirtyUserSelectedColumns, setDirtyUserSelectedColumns] = useState(false);\n\n const onDimensionOptionsChange = (tableType, maxRowCount) => {\n actions.setWidgetStf((stf) => {\n // update tableType in stf\n let newStf = {\n ...stf,\n tableType: tableType,\n row_limit: {\n limit: maxRowCount,\n },\n };\n\n const maxNumUserSelectedColumns = getMaxNumUserSelectedColumnsForTableType(tableType);\n\n // depending on what the new table type and the current state update the selected columns\n if (maxNumUserSelectedColumns === 0) {\n // when selecting these table types the user selected columns are completely wiped,\n // which means other table types will revert back to defaults (thus clean)\n setDirtyUserSelectedColumns(false);\n newStf = updateColumnsInFieldSet(newStf, []);\n }\n else if (dirtyUserSelectedColumns) {\n // The user had made some changes to the selected columns.\n // Instead of replacing them with defaults, just trim them so\n // they don't exceed the max number of columns for the new table\n // type.\n const userSelectedColumns = (stf.exploration_path.field_set.fields || []).slice(0, maxNumUserSelectedColumns);\n newStf = updateColumnsInFieldSet(newStf, userSelectedColumns);\n }\n else if (tableType === 'part_run') {\n // if the user is coming from a blank column set then add the default columns for this table type\n newStf = updateColumnsInFieldSet(newStf, [\n getEmailTableMetricListMetricOptions('good_count'),\n getEmailTableMetricListMetricOptions('efficiency'),\n getEmailTableMetricListMetricOptions('oee'),\n ]);\n }\n else if (tableType === 'work_center') {\n // if the user is coming from a blank column set then add the default columns for this table type\n newStf = updateColumnsInFieldSet(newStf, [\n getEmailTableMetricListMetricOptions('efficiency'),\n getEmailTableMetricListMetricOptions('good_count'),\n getEmailTableMetricListMetricOptions('reject_count'),\n getEmailTableMetricListMetricOptions('down_time'),\n getEmailTableMetricListMetricOptions('oee'),\n ]);\n }\n\n return newStf;\n });\n };\n\n const onColumnsChange = (newColumns) => {\n setDirtyUserSelectedColumns(true);\n actions.setWidgetStf((stf) => {\n return updateColumnsInFieldSet(stf, newColumns);\n });\n };\n\n const translator = useTranslator();\n\n let maxRowCount = 5;\n if (widgetStf.row_limit) {\n maxRowCount = widgetStf.row_limit.limit;\n }\n\n const tableType = widgetStf.tableType;\n // this is the user selected columns\n const selectedColumns = widgetStf.exploration_path.field_set.fields;\n const maxNumUserSelectedColumns = getMaxNumUserSelectedColumnsForTableType(tableType);\n\n const tableColumns = useMemo(() => [\n ...getHardCodedColumnsForTableType(tableType),\n ...selectedColumns,\n ], [ tableType, selectedColumns ]);\n\n const columns = getMockTableHeaderColumns(tableColumns, translator, metricThresholds);\n\n return (\n \n )}\n >\n \n \n );\n}\n\nEmailTableWidget.propTypes = {\n metricThresholds: PropTypes.object,\n widgetStf: PropTypes.object.isRequired,\n widgetState: PropTypes.object,\n areLiveControlsVisible: PropTypes.bool.isRequired,\n\n actions: PropTypes.exact({\n setWidgetStf: PropTypes.func.isRequired,\n setWidgetState: PropTypes.func.isRequired,\n setWidgetPrintStatus: PropTypes.func.isRequired,\n setWidgetExportItem: PropTypes.func.isRequired,\n exportWidgetData: PropTypes.func.isRequired,\n deleteWidget: PropTypes.func.isRequired,\n duplicateWidget: PropTypes.func.isRequired,\n setWidgetLiveControlsVisibility: PropTypes.func.isRequired,\n }).isRequired,\n\n timeRange: PropTypes.object,\n explorationPath: PropTypes.object,\n\n mutable: PropTypes.bool.isRequired,\n parentTitle: PropTypes.string,\n dragHandleProps: PropTypes.object,\n isDragEnabled: PropTypes.bool.isRequired,\n isLayoutModeActive: PropTypes.bool.isRequired,\n isPrint: PropTypes.bool.isRequired,\n hideTrend: PropTypes.bool.isRequired,\n printConfig: PropTypes.object,\n suppressedControls: PropTypes.object,\n suppressDelete: PropTypes.bool,\n\n dataService: PropTypes.shape({\n getKpiWidgetData: PropTypes.func.isRequired,\n getWorkCenterCount: PropTypes.func.isRequired,\n getColumnConfig: PropTypes.func.isRequired,\n getColumnHelpText: PropTypes.func.isRequired,\n getTimeRangePrimaryDetails: PropTypes.func.isRequired,\n getTimeRangeSecondaryDetails: PropTypes.func.isRequired,\n getHierarchyNodeDisplayName: PropTypes.func.isRequired,\n }).isRequired,\n};\n","import styled from 'styled-components';\nimport { FontFamily } from 'Common/components/typography';\n\nconst KPIValue = styled.div`\n display: inline-block;\n font-family: ${FontFamily.primary};\n color: ${({theme}) => theme.colors.palette.black};\n cursor: text;\n`;\n\nexport default KPIValue;\n","import React, { useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport Highcharts from 'highcharts';\nimport styled from 'styled-components';\nimport theme from 'Common/theme/default';\n\nconst SparkLineContainer = styled.div`\n display: inline-block;\n width: 100%;\n height: 100%;\n`;\n\nconst defaultChartOptions = {\n chart: {\n backgroundColor: null,\n borderWidth: 0,\n type: 'area',\n margin: [0, 0, 0, 0],\n width: null,\n height: null,\n // small optimization for sparklines\n skipClone: true,\n },\n title: {\n text: ''\n },\n credits: {\n enabled: false\n },\n xAxis: {\n visible: false\n },\n yAxis: {\n visible: false\n },\n legend: {\n enabled: false\n },\n tooltip: {\n enabled: false,\n },\n plotOptions: {\n series: {\n animation: false,\n states: {\n hover: {\n enabled: false,\n }\n },\n marker: {\n enabled: false,\n },\n fillOpacity: 1,\n }\n }\n};\n\nfunction createSparkline({ renderTo, data, lineWidth, fillColor, lineColor }) {\n let chartOptions = {\n chart: {\n renderTo,\n },\n series: [{\n data,\n }],\n plotOptions: {\n series: {\n lineWidth,\n fillColor,\n lineColor,\n },\n },\n };\n\n chartOptions = Highcharts.merge(defaultChartOptions, chartOptions);\n\n return new Highcharts.Chart(chartOptions);\n}\n\nfunction SparkLine({ data, lineWidth, fillColor, lineColor, ...otherProps }) {\n const sparkLineContainerEl = useRef(null);\n\n // Called on any prop and lifecycle changes\n useEffect(() => {\n const el = sparkLineContainerEl.current;\n\n if (el) {\n createSparkline({\n renderTo: el,\n data,\n lineWidth,\n fillColor,\n lineColor,\n });\n }\n });\n\n return (\n \n );\n}\n\n// Use memo to prevent re-renders when the props haven't changed.\n//\nexport default React.memo(SparkLine);\n\nSparkLine.propTypes = {\n data: PropTypes.arrayOf(\n PropTypes.arrayOf(\n PropTypes.number.isRequired\n )\n ),\n lineWidth: PropTypes.number,\n fillColor: PropTypes.string,\n lineColor: PropTypes.string,\n};\n\nSparkLine.defaultProps = {\n data: [],\n lineWidth: 1,\n fillColor: theme.colors.palette.blue.cruise,\n lineColor: theme.colors.palette.blue.cruise,\n};\n","import SparkLine from './SparkLine';\n\nexport default SparkLine;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport SparkLine from 'Common/components/SparkLine';\n\nfunction KPISparkLine({ data, noColor, ...otherProps }) {\n\n let sparkLineProps = {};\n\n if (noColor) {\n sparkLineProps = {\n lineWidth: 2,\n lineColor: 'black',\n fillColor: 'silver',\n };\n }\n\n return (\n \n );\n}\n\nKPISparkLine.propTypes = {\n data: PropTypes.array,\n noColor: PropTypes.bool,\n};\n\nKPISparkLine.defaultProps = {\n data: null,\n noColor: false,\n};\n\nexport default KPISparkLine;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\nimport KPIValue from './KPIValue';\nimport KPISparkLine from './KPISparkLine';\nimport { FontWeight } from 'Common/components/typography';\n\nconst StyledKpiValue = styled(KPIValue)``;\n\nconst TrendDotContainer = styled.div``;\n\nconst BottomContainer = styled.div``;\nconst TrendInfo = styled.div``;\nconst SparkLineContainer = styled.div``;\nconst StyledSparkLine = styled(KPISparkLine)``;\n\nconst KPIDataContainer = styled.div`\n\n ${({ condensed }) => condensed && css`\n margin-top: 8px;\n `}\n\n ${BottomContainer} {\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n ${StyledKpiValue} {\n flex: 1 0 auto;\n align-self: flex-end;\n text-align: left;\n\n ${({hideTrend}) => hideTrend && css`\n text-align: center;\n `}\n\n font-weight: ${FontWeight.medium};\n font-size: 36px;\n line-height: 1em;\n\n padding-right: 0.5em;\n\n ${({isPrint}) => isPrint && css`\n font-size: 20px;\n `}\n\n ${({condensed}) => condensed && css`\n font-size: 18px;\n `}\n\n /* Very bad metrics look a little funky in KPIs\n due to how text is aligned and how large the\n font size is. Allowing the background to overflow\n and slightly reducing some of the paddings keeps\n everything aligned and looking how we want.\n */\n .cpe-metric-container {\n overflow: visible;\n\n span.cpe-metric-very-bad {\n padding-top: 0;\n padding-bottom: 0;\n }\n }\n }\n\n ${TrendInfo} {\n display: flex;\n flex-direction: column;\n vertical-align: middle;\n justify-content: space-between;\n\n flex: 0 1 154px;\n\n height: 53px;\n\n ${({condensed}) => condensed && css`\n height: 43px;\n `}\n\n min-width: 25px;\n max-width: 154px;\n\n ${({isPrint}) => isPrint && css`\n width: 40%;\n `}\n\n ${({condensed}) => condensed && css`\n text-align: left;\n max-width: 75px;\n `}\n\n ${TrendDotContainer} {\n text-align: center;\n flex: 1 0 auto;\n padding-top: 6px;\n }\n\n ${SparkLineContainer} {\n display: block;\n flex: 0 1 35px;\n min-height: 15px;\n\n ${({condensed}) => condensed && css`\n text-align: left;\n height: 15px;\n `}\n }\n }\n`;\n\nexport default function KPIData({\n value,\n trendDot,\n sparkLineData,\n noColor,\n isPrint,\n condensed,\n hideTrend,\n ...otherProps\n}) {\n\n const renderTrendInfo = () => {\n if (! hideTrend) {\n return (\n \n \n {trendDot}\n \n \n \n \n \n );\n }\n };\n return (\n \n \n \n {value}\n \n {renderTrendInfo()}\n \n \n );\n}\n\nKPIData.propTypes = {\n value: PropTypes.node,\n trendDot: PropTypes.node,\n sparkLineData: PropTypes.arrayOf(\n PropTypes.arrayOf(\n PropTypes.number.isRequired\n )\n ),\n noColor: PropTypes.bool,\n isPrint: PropTypes.bool,\n condensed: PropTypes.bool,\n hideTrend: PropTypes.bool.isRequired,\n};\n\nKPIData.defaultProps = {\n value: '',\n sparkLineData: null,\n noColor: false,\n isPrint: false,\n condensed: false,\n};\n","import { trend, trendPercent } from 'Common/util/language/math.js';\n\n/**\n * this is the index that extra data items can expected to be located.\n * This is an artifact of how HighCharts expects data for charting [x, y] or [x, y, val] (for heat map)\n * We use the fourth position to store data items which can be used to further define the actual data.\n */\nconst DATA_INDEX = 3;\n\n/**\n * removes open event data points that contain the current open event as well as\n * null or NaN data points\n *\n * @param {Object} opts the following options used to transform the trend data so it can be calculated\n * @param {Object[]} opts.data an array of data points to compute trend. Each data point should\n * consist of an array of 4 elements [x, y, ?, { ...DataItems, sync_id: DataItem }]\n * The DataItems should be adapted for common, i.e. they should be pure data objects with no functions\n * @param {String} opts.columnName columnName of datapoint to check if it is null\n */\nfunction transformTrendData({data, columnName}) {\n data = data.filter((dataPoint) => {\n let rawValue = dataPoint[DATA_INDEX][columnName].rawValue;\n if (dataPoint[DATA_INDEX][columnName].formatType === 'id_array' && (Array.isArray(rawValue) || typeof rawValue === 'number')) {\n // ensure its an array\n rawValue = Array.isArray(rawValue) ? rawValue : [rawValue];\n // then find the length\n rawValue = rawValue.length;\n }\n const isNumeric = rawValue !== null && typeof rawValue === 'number' && ! Number.isNaN(rawValue);\n\n if (!dataPoint[DATA_INDEX].sync_id) {\n throw 'Need to have sync_id included in trend data';\n }\n const containsOpenEvent = dataPoint[DATA_INDEX].sync_id.rawValue === -1;\n\n return isNumeric && !containsOpenEvent;\n });\n\n return data;\n}\n\nconst maxTrend = 10;\n/**\n *\n *\n * @param {Number} value The trend percent to limit\n * @return {Object} return\n * @return {Object} return.value the original trend, or if it was too big/small the limit\n * @return {Object} return.qualifier if necessary a > or < if the value was limited\n */\nexport function limitTrendPercent (value) {\n let qualifier = '';\n\n if (Math.abs(value) >= maxTrend) {\n qualifier = (value < 0) ? '<' : '>';\n value = maxTrend * ((value < 0) ? -1 : 1);\n }\n\n return { value, qualifier };\n}\n\n/*\n see transformTrendData for options\n*/\nexport function trendNoOpenEvent(opts) {\n let data = transformTrendData(opts);\n return trend(data);\n}\n\n/*\n see transformTrendData for options\n*/\nexport function trendPercentNoOpenEvent(opts) {\n let data = transformTrendData(opts);\n return trendPercent(data);\n}\n","export const GOOD = 'good';\nexport const BAD = 'bad';\nexport const NEUTRAL = 'neutral';\nexport const NONE = 'none';\nexport const UGLY = 'ugly';\n","import React from 'react';\nimport styled from 'styled-components';\nimport Icon from 'Common/components/Icon';\n\nconst StyledIcon = styled(Icon)`\n display: inline-block;\n padding-left: 4px;\n cursor: pointer;\n\n color: ${({theme}) => theme.colors.palette.grey.ash};\n`;\n\nexport default function TrendNotAvailableIcon(props) {\n return (\n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport { formatNumber } from 'Common/util/format.js';\nimport { limitTrendPercent } from 'Common/data/trend';\nimport { Body5, Body6 } from 'Common/components/typography';\nimport * as TrendGoodness from './TrendGoodness';\nimport TrendNotAvailableIcon from './TrendNotAvailableIcon';\nimport useTranslation from 'Common/hooks/useTranslation';\nimport useLocale from 'Common/hooks/useLocale';\n\n\nconst TrendIndicator = styled.div`\n color: ${props => props.theme.colors.trend[props.trendGoodness]};\n display: inline-block;\n padding-right: 0.3em;\n\n &::before {\n font-family: 'FontAwesome';\n content: '\\f111';\n }\n`;\n\nconst TrendValue = styled.span`\n display: inline-block;\n`;\n\nfunction TrendDot({\n trendGoodness,\n value,\n notAvailable,\n condensed,\n isPrint,\n noColor,\n showTrendLabel,\n showPositiveTrendQualifier,\n ...otherProps\n}) {\n const naSymbol = useTranslation('na_symbol');\n const nullMetricLiteral = useTranslation('null_metric_literal');\n const trendLiteral = useTranslation('trend_literal');\n const locale = useLocale();\n \n let trendValue = naSymbol;\n let qualifier = '';\n\n if (notAvailable) {\n trendValue = (\n \n {naSymbol}\n \n \n );\n }\n else if (typeof value === 'number') {\n const trendConfig = limitTrendPercent(value);\n\n trendValue = formatNumber(trendConfig.value, { type: 'percent', places: 1, locale: locale || 'en' });\n\n const hasPositiveTrendQualifier = (value > 0 && showPositiveTrendQualifier);\n qualifier = trendConfig.qualifier || (hasPositiveTrendQualifier ? '+' : '');\n }\n else if (!value) {\n trendValue = nullMetricLiteral;\n }\n\n const TrendContainer = (condensed || isPrint) ? Body6 : Body5;\n \n const trendLabel = showTrendLabel ? `${trendLiteral} ` : '';\n\n const trendGoodnessColor = noColor ? \"none\" : trendGoodness;\n \n return (\n \n \n {trendLabel}{qualifier}{trendValue}\n \n \n \n \n );\n}\n\nTrendDot.propTypes = {\n trendGoodness: PropTypes.oneOf(Object.values(TrendGoodness)),\n value: PropTypes.number,\n notAvailable: PropTypes.bool,\n condensed: PropTypes.bool,\n isPrint: PropTypes.bool,\n noColor: PropTypes.bool,\n showTrendLabel: PropTypes.bool,\n showPositiveTrendQualifier: PropTypes.bool,\n};\n\nTrendDot.defaultProps = {\n trendGoodness: 'none',\n notAvailable: false,\n condensed: false,\n isPrint: false,\n noColor: false,\n showTrendLabel: false,\n showPositiveTrendQualifier: false,\n};\n\nexport default React.memo(TrendDot);\n","import TrendDot from './TrendDot.js';\n\nexport default TrendDot;\n","import TrendDot from 'Common/components/TrendDot';\nimport styled from 'styled-components';\n\n// Allow it to be styled by it's parent\nexport default styled(TrendDot)`\n color: ${props => props.theme.colors.darkText.mediumEmphasis};\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport KPIData from './internal/KPIData';\nimport KPITrendDot from './internal/KPITrendDot';\nimport * as TrendGoodness from 'Common/components/TrendDot/TrendGoodness';\n\n\nconst Container = styled.div`\n height: 65px;\n\n padding-top: 0;\n padding-bottom: ${({theme}) => theme.layout.widget.verticalPadding };\n padding-left: ${({theme}) => theme.layout.widget.horizontalPadding };\n padding-right: ${({theme}) => theme.layout.widget.horizontalPadding };\n\n ${({ condensed }) => condensed && `\n padding: 0px 12px;\n height: 55px;\n `}\n\n ${({ isPrint }) => isPrint && `\n padding: 0 8px 6px 8px;\n `}\n`;\n\nexport default function KPIContent({\n condensed,\n noColor,\n kpiData,\n sparkLineData,\n trendGoodness,\n trendValue,\n isPrint,\n hideTrend,\n}) {\n const finalTrendGoodness =\n noColor ? TrendGoodness.NONE : trendGoodness;\n\n return (\n \n \n )}\n />\n \n );\n}\n\nKPIContent.propTypes = {\n condensed: PropTypes.bool,\n noColor: PropTypes.bool.isRequired,\n kpiData: PropTypes.node.isRequired,\n sparkLineData: PropTypes.array.isRequired,\n trendGoodness: PropTypes.string.isRequired,\n trendValue: PropTypes.number,\n isPrint: PropTypes.bool,\n hideTrend: PropTypes.bool.isRequired,\n};\n\nKPIContent.defaultProps = {\n condensed: false,\n isPrint: false,\n};\n","import ParamTypes, { paramTest } from 'Common/util/ParamTypes/ParamTypes';\nimport { ProductionDay, getCategoryBounds } from 'Common/data/date/ProductionDay';\nimport { daysBetween } from 'Common/util/language/date';\nimport has from 'lodash/has';\n\n// shift/team/part/job/shift_hour/hour/week/month/quarter/year/production_day/time\n// in the case of time start and end our actual production day numbers\nconst basicTimeRangeParamType = ParamTypes.shape({\n units: ParamTypes.oneOf(['shift', 'team', 'part', 'job', 'shift_hour', 'hour', 'week',\n 'month', 'quarter', 'year', 'production_day', 'time'\n ]).isRequired,\n start: ParamTypes.number.isRequired,\n end: ParamTypes.number.isRequired,\n sameDimensionValue: ParamTypes.string,\n // though units will always be production_day this stipulates if it is\n // actually calendar_day (when dayBasis === 'calendar')\n dayBasis: ParamTypes.string,\n});\n\n// ordinal shift\nconst ordinalShiftRangeParamType = ParamTypes.shape({\n units: ParamTypes.exactly('ordinal_shift').isRequired,\n productionDayOffset: ParamTypes.number.isRequired,\n ordinalShiftValue: ParamTypes.string.isRequired,\n sameDimensionValue: ParamTypes.string,\n});\n\n// all time\nconst allTimeRangeParamType = ParamTypes.shape({\n units: ParamTypes.exactly('all').isRequired,\n});\n\nconst timeRangeParamType = ParamTypes.oneOfType([\n basicTimeRangeParamType,\n ordinalShiftRangeParamType,\n allTimeRangeParamType,\n]);\n\nconst productionDayBasedUnits = [\n 'production_day',\n 'week',\n 'month',\n 'quarter',\n 'year',\n];\n\nexport function getTimeRangeObjectPropType() {\n return function(props, propName, componentName) {\n const isValid = paramTest(props[propName], timeRangeParamType, 'argument', { throwError: false, noLog: true });\n return isValid\n ? null\n : new Error(`Invalid prop '${propName} supplied to '${componentName}' was an invalid timerange`);\n };\n}\n\nexport default class TimeRange {\n static timeRangeParamType = timeRangeParamType;\n\n static includesNow (timeRange, now) {\n if (timeRange.units === 'time') {\n return now >= timeRange.start && now <= timeRange.end;\n }\n else if (timeRange.units === 'ordinal_shift') {\n return false;\n }\n else if (timeRange.units == 'all') {\n return true;\n }\n // If we're using other units, and the range includes the current\n // unit, then this TimeRange certainly includes right now\n else if (timeRange.end === 0) {\n return true;\n }\n \n return false;\n }\n\n static isCalendarDayBasis (timeRange) {\n return timeRange.dayBasis === 'calendar';\n }\n \n /**\n * Is this time range unit based on production days?\n *\n * @param {String} timeRangeUnit\n */\n static isProductionDayBasedUnit(timeRangeUnit) {\n return productionDayBasedUnits.indexOf(timeRangeUnit) !== -1;\n }\n \n /**\n * Return a time range start and end in absolute terms using today and the time range start\n * and end offsets for the given units. Only works for production day based units.\n *\n * @param {Object} timeRange Object representing the time range with units, start, and end.\n * @param {Any} today The ProductionDay, CalendarDay, production day number, or date representing today.\n *\n * @returns {Object} With start and end as absolute production day numbers.\n */\n static computeProductionDayRangeFromToday(timeRange, today) {\n const { units, start, end } = timeRange;\n \n let startDate, endDate;\n \n if (units === 'time') {\n // already in terms of production day numbers\n startDate = start;\n endDate = end;\n }\n else if (TimeRange.isProductionDayBasedUnit(units)) {\n const productionDay = new ProductionDay(today);\n \n const unitsToUse = (units === 'production_day' ? 'days' : (units + 's'));\n startDate = productionDay.add(unitsToUse, start);\n endDate = productionDay.add(unitsToUse, end);\n \n // Now, startDate and endDate are within the desired week/month/whatever.\n // Get the bounds for each.\n startDate = getCategoryBounds(startDate, units)[0];\n endDate = getCategoryBounds(endDate, units)[1];\n }\n else {\n // This must be category based. We can't form an accurate range for this,\n // and therefor don't support it.\n //\n throw new Error(\n `computeProductionDayRangeFromToday does not support time range units \"${units}\"`\n );\n }\n \n return {\n start: startDate,\n end: endDate\n };\n }\n\n /**\n * Get the estimated number of days in a time range.\n *\n * @param {Object} timeRange The time range.\n *\n * @return {Number} An estimated number of days in range. Will be Infinity\n * if the time range is \"all time\". Will be zero if the units are not\n * time based (e.g., part, shift) or a unit is expected to be less than\n * a day (e.g., shift_hour).\n */\n static getEstimatedNumberOfDays(timeRange) {\n const { units, start, end } = timeRange;\n\n if (units === 'all') {\n return Infinity;\n }\n else if (units === 'time') {\n // 'time' is in terms of production day numbers.\n return Math.abs(end - start);\n }\n else if (units === 'production_day') {\n return Math.abs(end - start);\n }\n else if (units === 'week') {\n return 7;\n }\n else if (units === 'month') {\n return 365 / 12; // Avg number of days in a month.\n }\n else if (units === 'quarter') {\n return 365 / 4; // Avg number of days in a quarter.\n }\n else if (units === 'year') {\n return 365;\n }\n else {\n // Default\n return 0;\n }\n }\n\n /**\n * A simple utility function for determining if a request should repeat.\n *\n * @param {object} timeRange\n * @returns {boolean} True if a repeating request is recommended.\n */\n static shouldRepeatRequestWithTimeRange(timeRange) {\n let rangeContainsOpenInterval = false;\n\n if (timeRange.units !== 'all'\n && timeRange.units !== 'ordinal_shift'\n && timeRange.units !== 'time'\n ) {\n // We're in the future, therefore not in the open interval\n const inTheFuture = timeRange.start > 0;\n\n // Start must be less than or equal to 0, so if end is 0 or greater\n // we must contain the open interval. Otherwise we must not.\n //\n rangeContainsOpenInterval = !inTheFuture && timeRange.end >= 0;\n }\n\n return (\n rangeContainsOpenInterval &&\n TimeRange.getEstimatedNumberOfDays(timeRange) <= 7\n );\n }\n\n /**\n * Given a time range object, generate text describing the units of the time range.\n *\n * @param {Object} timeRange Object representing the time range with units, start, and end.\n * @param {Function} translator Function for translating text keys for the user output.\n *\n * @returns {String} Some text representing the time range units.\n */\n static getFullUnitText(timeRange, translator) {\n let units = timeRange.units === 'ordinal_shift' ? 'shift' : timeRange.units;\n let dayCount;\n let startAsDate;\n let endAsDate;\n let fullUnitText;\n\n // Anything represented in a number of days gets special treatment. Right now, that's\n // days and time.\n //\n if (units === 'production_day') {\n dayCount = timeRange.end - timeRange.start + 1;\n }\n else if (units === 'time') {\n units = 'production_day';\n startAsDate = new ProductionDay(timeRange.start).toDate();\n endAsDate = new ProductionDay(timeRange.end).toDate();\n dayCount = daysBetween(startAsDate, endAsDate) + 1;\n }\n\n // If we have a dayCount that's greater than 1, express ourself from the translation table.\n // Otherwise, we're just the singular of the unit name (since we changed `time` to `day`\n // above)\n //\n fullUnitText = dayCount > 1\n ? translator('timerange.n_days', { x: dayCount })\n : translator(`time_range_selector_dropdown.${units}.singular`);\n\n return fullUnitText;\n }\n /*\n * Is the `current` identifier available for a request made with this time\n * range?\n *\n * @param {Object} timeRange Object representing the time range with units, start, and end.\n * @returns {Boolean}\n */\n static isCurrentIdentifierAvailable(timeRange) {\n // current data is only for special units\n // this shift, this shift_hour, this part\n //\n const specialUnits = {\n shift: true,\n part: true,\n shift_hour: true\n };\n\n const isThis = (!timeRange.sameDimensionValue) &&\n (timeRange.end === 0) &&\n (timeRange.start === 0);\n\n return isThis && has(specialUnits, timeRange.units);\n }\n\n /**\n * Get column name for the event id based on the current units and if they are calendar day based\n *\n * @param {Object} timeRange\n *\n * @returns {String} event_id name or empty string if timerange had no event id name\n */\n static getUnitsEventIdName(timeRange) {\n const units = timeRange.units;\n const isCalendarDayBased = TimeRange.isCalendarDayBasis(timeRange);\n let rv = '';\n if (units === 'time') {\n if (isCalendarDayBased) {\n rv = 'calendar_day_event_id';\n }\n else {\n rv = 'production_day_event_id';\n }\n }\n else if (units !== 'all') {\n rv = `${units}_event_id`;\n }\n return rv;\n }\n}\n","import ParamTypes from 'Common/util/ParamTypes';\n\nconst fieldParamType = ParamTypes.shape({\n name: ParamTypes.string.isRequired,\n displayKey: ParamTypes.string,\n channel: ParamTypes.string,\n alternate_display: ParamTypes.string,\n type: ParamTypes.oneOf([\n 'string',\n 'integer',\n 'double',\n 'time_span',\n 'date_time',\n 'id',\n 'id_array',\n 'percent',\n 'other',\n 'custom',\n ]),\n});\n\nexport default fieldParamType;\n","import React from 'react';\n\nconst DashboardCacheContext = React.createContext(null);\nDashboardCacheContext.displayName = 'DashboardCacheContext';\n\nexport default DashboardCacheContext;\n","import isEqual from 'lodash/isEqual';\nimport uniqueId from 'Common/util/uniqueId';\n\nclass AsyncValueCacheEntry {\n constructor({\n args,\n load,\n getTime,\n }) {\n this._getTime = getTime;\n\n this._loadFunction = load;\n this._loadArgs = args;\n this._loadAbortController = new AbortController();\n this._loadPromise = null;\n this._loadComplete = false;\n this._loadCompleteTime = null;\n\n this._getters = {};\n }\n\n getArgs() {\n return this._loadArgs;\n }\n\n isComplete() {\n return this._loadComplete;\n }\n\n isAborted() {\n return this._loadAbortController.signal.aborted;\n }\n\n getAge() {\n if (this._loadComplete) {\n return this._getTime() - this._loadCompleteTime;\n }\n else {\n return 0;\n }\n }\n\n get({ abortSignal }) {\n // If the getter has already aborted OR the load is already aborted,\n // do nothing.\n if (abortSignal.aborted || this._loadAbortController.signal.aborted) {\n return Promise.resolve();\n }\n\n const getter = {\n id: uniqueId(),\n abortSignal: abortSignal,\n resolve: null,\n reject: null,\n promise: null,\n };\n\n getter.promise = new Promise((resolve, reject) => {\n getter.resolve = resolve;\n getter.reject = reject;\n });\n\n this._getters[getter.id] = getter;\n\n /* eslint-disable no-use-before-define */\n const cleanupGetter = () => {\n // Delete the entry from active getters\n delete this._getters[getter.id];\n // Remove listeners\n getter.abortSignal.removeEventListener('abort', handleGetAbort);\n };\n /* eslint-enable no-use-before-define */\n\n const handleGetAbort = () => {\n cleanupGetter();\n // Immediately resolve the promise\n getter.resolve();\n // If this getter is aborted while the load is pending and there's\n // no getters left to get the response, abort the load itself.\n if (!this._loadComplete && Object.keys(this._getters).length === 0) {\n this._loadAbortController.abort();\n }\n };\n\n getter.abortSignal.addEventListener('abort', handleGetAbort);\n\n this._load()\n .then((response) => {\n cleanupGetter();\n if (!getter.abortSignal.aborted) {\n getter.resolve(response);\n }\n })\n .catch((error) => {\n cleanupGetter();\n if (!getter.abortSignal.aborted) {\n getter.reject(error);\n }\n });\n\n return getter.promise;\n }\n\n _load() {\n // Only ever create one load promise for this instance.\n if (!this._loadPromise) {\n const abortSignal = this._loadAbortController.signal;\n\n this._loadPromise =\n this._loadFunction(\n { abortSignal: abortSignal },\n ...this._loadArgs,\n )\n .then((response) => {\n this._loadComplete = true;\n this._loadCompleteTime = this._getTime();\n\n if (abortSignal.aborted) {\n return Promise.resolve();\n }\n else {\n return Promise.resolve(response);\n }\n })\n .catch((error) => {\n this._loadComplete = true;\n this._loadCompleteTime = this._getTime();\n\n if (abortSignal.aborted) {\n return Promise.resolve();\n }\n else {\n return Promise.reject(error);\n }\n });\n }\n\n return this._loadPromise;\n }\n}\n\n/**\n * A class for caching a single async value.\n */\nexport default class AsyncValueCache {\n constructor(opts = {}) {\n const {\n getTime = () => Date.now()\n } = opts;\n\n this._getTime = getTime;\n this._lastCompleted = null;\n this._pending = null;\n }\n\n /**\n * Get the value from the cache. If the value has not been loaded yet, the\n * provided load function will be called to get the value. If it has already\n * been loaded (or is pending) with the same args, then the cached value is\n * returned.\n *\n * @param {object} cacheOptions\n * @param {AbortSignal} [cacheOptions.abortSignal] An abort signal\n * @param {Number} [cacheOptions.maxAge = Infinity] The oldest a cached value\n * can be before it will be reloaded.\n * @param {Function} cacheOptions.load A function that loads the value, if\n * it is not cached.\n * @param {...any} args Args that are deep compared to determine if the\n * value needs to be reloaded. They are also passed to the `load` function. \n * @returns {Promise}\n */\n async get(cacheOptions, ...args) {\n let {\n abortSignal,\n maxAge = Infinity,\n load,\n } = cacheOptions;\n\n // Make an abort signal if one isn't provided.\n if (!abortSignal) {\n abortSignal = (new AbortController()).signal;\n }\n\n // Some bookeeping here:\n // 1. If there's a pending get that has since been aborted, clear it\n // out; we don't want it anymore.\n // 2. If there's a pending get that has since completed, move it into\n // the completed slot.\n if (\n this._pending &&\n (this._pending.isAborted() || this._pending.isComplete())\n ) {\n // Only keep the latest result if it wasn't aborted.\n if (!this._pending.isAborted()) {\n this._lastCompleted = this._pending;\n }\n\n this._pending = null;\n }\n\n // If there is a last get entry, it's not too old, and its arguments\n // match, use it.\n if (\n this._lastCompleted &&\n this._lastCompleted.getAge() <= maxAge &&\n isEqual(args, this._lastCompleted.getArgs())\n ) {\n return this._lastCompleted.get({ abortSignal });\n }\n\n // If there's a pending get with matching arguments, use it.\n if (\n this._pending &&\n isEqual(args, this._pending.getArgs())\n ) {\n return this._pending.get({ abortSignal });\n }\n\n // Cache miss. Create a new entry and get from it.\n\n this._pending = new AsyncValueCacheEntry({\n args: args,\n load: load,\n getTime: this._getTime,\n });\n\n return this._pending.get({ abortSignal });\n }\n}\n","import AsyncValueCache from './AsyncValueCache';\n\nconst validateWidgetId = (widgetId) => {\n if (typeof widgetId === 'undefined') {\n throw new Error('widgetId is required');\n }\n else if (typeof widgetId !== 'string') {\n throw new Error('widgetId must be a string');\n }\n};\n\nconst validateCacheId = (cacheId) => {\n if (typeof cacheId === 'undefined') {\n throw new Error('cacheId is required');\n }\n else if (typeof cacheId !== 'string') {\n throw new Error('cacheId must be a string');\n }\n};\n\n/**\n * A class to manage many AsyncValueCaches for a dashboard. Each cache is\n * accessed by a combination of widget ID and cache ID strings.\n */\nexport default class DashboardCache {\n constructor() {\n this._widgetCaches = {};\n }\n\n /**\n * Get a value cache for a widget by widget ID and cache ID. If one does\n * not exist yet, it will be created.\n *\n * @param {String} widgetId \n * @param {String} cacheId \n * @returns {AsyncValueCache}\n */\n getWidgetValueCache(widgetId, cacheId) {\n validateWidgetId(widgetId);\n validateCacheId(cacheId);\n\n if (!this._widgetCaches[widgetId]) {\n this._widgetCaches[widgetId] = {};\n }\n\n if (!this._widgetCaches[widgetId][cacheId]) {\n this._widgetCaches[widgetId][cacheId] = new AsyncValueCache();\n }\n\n return this._widgetCaches[widgetId][cacheId];\n }\n\n /**\n * Clear a value cache for a widget by widget ID and cache ID.\n *\n * @param {String} widgetId\n * @param {String} cacheId\n */\n clearWidgetValueCache(widgetId, cacheId) {\n validateWidgetId(widgetId);\n validateCacheId(cacheId);\n\n if (!this._widgetCaches[widgetId]) {\n return; // Nothing to clear\n }\n\n if (!this._widgetCaches[widgetId][cacheId]) {\n return; // Nothing to clear\n }\n\n delete this._widgetCaches[widgetId][cacheId];\n }\n\n /**\n * Clear all the value caches for the specified widget.\n *\n * @param {String} widgetId\n */\n clearAllValueCachesForWidget(widgetId) {\n validateWidgetId(widgetId);\n\n if (!this._widgetCaches[widgetId]) {\n return; // Nothing to clear\n }\n\n // Delete all value caches for the widget.\n delete this._widgetCaches[widgetId];\n }\n}\n","import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport DashboardCacheContext from './internal/InternalDashboardCacheContext';\nimport DashboardCache from './internal/DashboardCache';\n\n/**\n * A React context provider to enable use of widget data caches. Should be\n * placed at the top level of a dashboard.\n *\n * The cache can be accessed using `useDashboardCache`.\n */\nexport default function DashboardCacheProvider({\n children,\n}) {\n const value = useMemo(() => {\n return new DashboardCache();\n }, []);\n\n return (\n \n {children}\n \n );\n}\n\nDashboardCacheProvider.propTypes = {\n children: PropTypes.node,\n};\n","import React from 'react';\n\nexport const WidgetCacheContext = React.createContext(null);\nWidgetCacheContext.displayName = 'WidgetCacheContext';\n\nexport default WidgetCacheContext;\n","import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport WidgetCacheContext from './internal/InternalWidgetCacheContext';\nimport useDashboardCache from './useDashboardCache';\n\n/**\n * A React context provider that enables the use of `useWidgetCache`.\n *\n * This provider requires that `DashboardCacheProvider` exist higher in the\n * React tree.\n */\nexport default function WidgetCacheProvider({ widgetId, children }) {\n const dashboardCache = useDashboardCache();\n\n const value = useMemo(() => {\n return {\n getValueCache: function(cacheId) {\n return dashboardCache.getWidgetValueCache(widgetId, cacheId);\n },\n clearValueCache: function(cacheId) {\n return dashboardCache.clearWidgetValueCache(widgetId, cacheId);\n },\n };\n }, [ dashboardCache, widgetId ]);\n\n return (\n \n {children}\n \n );\n}\n\nWidgetCacheProvider.propTypes = {\n widgetId: PropTypes.string.isRequired,\n children: PropTypes.node,\n};\n","import { useContext } from 'react';\nimport DashboardCacheContext from './internal/InternalDashboardCacheContext';\n\n/**\n * A React hook to get the dashboard cache from context. Requires\n * `DashboardCacheProvider` to be present in the React tree.\n *\n * @returns {DashboardCache}\n */\nexport default function useDashboardCache() {\n const dashboardCache = useContext(DashboardCacheContext);\n\n // The value of `DashboardCacheContext` defaults to null, which means there\n // is no `DashboardCacheContext` higher up in the React tree.\n if (dashboardCache === null) {\n throw new Error('useDashboardCache requires DashboardCacheProvider to be in the React tree.');\n }\n\n return dashboardCache;\n}\n","import { useContext, useMemo, useRef } from 'react';\nimport WidgetCacheContext from './internal/InternalWidgetCacheContext';\n\n/**\n * A React hook to get a cache for a widget. Requires `WidgetCacheProvider` to\n * be present higher up in the React tree.\n *\n * @param {object} options\n * @param {string} options.cacheId A name for the cache.\n * @param {function} options.load An async function to load the value.\n * `load` is called with arguments ({ abortSignal: AbortSignal }, ...args: any[])\n * where `args` are forwarded from the call to `cache.get(...)`\n * @returns {object} A widget cache object with the following methods:\n * get( cacheOptions: object, ...args: any[] ).\n * @see AsyncValueCache for valid cacheOptions\n */\nexport default function useWidgetCache({\n cacheId,\n load,\n}) {\n const loadRef = useRef(null);\n loadRef.current = load;\n\n const widgetCache = useContext(WidgetCacheContext);\n\n if (widgetCache === null) {\n throw new Error('useWidgetCache requires WidgetCacheProvider to be in the React tree.');\n }\n\n const widgetValueCache = useMemo(() => {\n return widgetCache.getValueCache(cacheId);\n }, [ widgetCache, cacheId ]);\n\n return useMemo(() => {\n return {\n get: (cacheOptions, ...args) => {\n return widgetValueCache.get(\n {\n ...(cacheOptions || {}),\n load: loadRef.current,\n },\n ...args,\n );\n },\n };\n }, [ widgetValueCache ]);\n}\n","import { useEffect } from 'react';\n\nconst DEFAULT_UPDATE_INTERVAL_SECONDS = 10;\n\n/**\n * Determine the data update interval time.\n * @param {String|Number} updateTimeInterval is either the string default or the number of seconds\n * @param {*} defaultInterval default number of seconds\n * @returns intervalTime in milliseconds\n */\nexport const getDataUpdateInterval = (updateTimeInterval, defaultInterval = DEFAULT_UPDATE_INTERVAL_SECONDS) => {\n let rv = null;\n\n // updateTimeInterval could be zero, which is falsey\n if (updateTimeInterval) {\n if (typeof updateTimeInterval === 'string') {\n if (updateTimeInterval === 'default') {\n rv = defaultInterval * 1e3;\n }\n else {\n throw new Error('Invalid time interval type: ' + updateTimeInterval);\n }\n }\n else {\n if (Number.isFinite(updateTimeInterval) && updateTimeInterval > 0) {\n // Convert the update time interval to milliseconds\n rv = updateTimeInterval * 1e3;\n }\n }\n }\n\n return rv;\n};\n\n/**\n * Get a good max age (i.e., expiration) for any cache that might be attached to\n * a request sent through `useRepeatingRequest`.\n *\n * Generally, this value will be slightly less than the `updateInterval` so that\n * when the request is resent the cached value will have expired.\n *\n * @param {boolean} disableRepeat\n * @param {number} updateInterval In milliseconds.\n * @returns {number}\n */\nexport function getMaxAgeForRepeatingRequest(disableRepeat, updateInterval) {\n let maxAge;\n\n if (disableRepeat) {\n // We want to always use cached values when the request is not\n // repeating.\n maxAge = Infinity;\n }\n else {\n // If there's an update interval let the value be\n // cached for just less than the interval.\n maxAge = Math.max(0, updateInterval - 100);\n }\n\n return maxAge;\n}\n\n/**\n * A promise that resolves after a certain time, with support for aborting using\n * an AbortSignal.\n *\n * If aborted, the promise will resolve.\n *\n * @param {Number} delayMs \n * @param {AbortSignal} abortSignal \n * @returns {Promise}\n */\n async function abortableAsyncDelay(delayMs, abortSignal) {\n if (abortSignal.aborted) {\n // Already aborted before we've even started\n return Promise.resolve();\n }\n\n return new Promise((resolve) => {\n let timeout = null;\n\n /* eslint-disable no-use-before-define */\n const cleanup = () => {\n // Clear the current timeout, if needed\n if (timeout !== null) {\n clearTimeout(timeout);\n timeout = null;\n }\n // Remove from listeners\n abortSignal.removeEventListener('abort', handleAbort);\n };\n /* eslint-enable no-use-before-define */\n\n const handleAbort = () => {\n // Cleanup and resolve the promise\n cleanup();\n resolve();\n };\n\n abortSignal.addEventListener('abort', handleAbort);\n\n // Setup the timout to resolve the promise\n timeout = setTimeout(() => {\n // Finished, timer does not need to be cleared\n timeout = null;\n // Cleanup and resolve the promise\n cleanup();\n resolve();\n }, delayMs);\n });\n}\n\n/**\n * A hook to periodically send a request at a specified interval.\n *\n * IMPORTANT: Be sure to memoize (i.e., useCallback) the `sendRequest` function\n * because the loop will be restarted (and any pending requests aborted)\n * each time the reference to the function changes.\n *\n * @param {Object} opts\n * @param {function({ isInitialRequest: boolean, abortSignal: AbortSignal }): Promise} opts.sendRequest\n * Async function to send a request. `isInitialRequest` will be true only\n * for the first time the request is sent.\n * @param {number} opts.delayMs How often (in milliseconds) should the request repeat?\n * @param {boolean} opts.disableRepeat If true, opts.delayMs is ignored and the\n * request will not repeat.\n */\nexport default function useRepeatingRequest({\n sendRequest,\n delayMs,\n disableRepeat,\n}) {\n // Validate the arguments, because bad values in here (especially a too\n // short of a delay) can result in a flurry of requests, possibly causing\n // someone's computer to explode.\n //\n if (typeof sendRequest !== 'function') {\n throw new Error(`useRepeatingRequest: sendRequest is required and must be a function.`);\n }\n\n if (!disableRepeat) {\n if (!Number.isFinite(delayMs)) {\n throw new Error(`useRepeatingRequest: delayMs must be a finite number.`);\n }\n else if (delayMs < 3e3) {\n throw new Error(`useRepeatingRequest: delayMs must be at least 3000.`);\n }\n }\n\n useEffect(() => {\n const abortController = new AbortController();\n const abortSignal = abortController.signal;\n let isInitialRequest = true;\n let isRunning = false;\n\n async function runLoop() {\n isRunning = true;\n\n // Keep this loop going until the abort signal indicates that it\n // should stop.\n while (!abortSignal.aborted) {\n try {\n await sendRequest({\n isInitialRequest,\n abortSignal,\n });\n }\n catch (error) {\n console.error(error);\n }\n\n // If this request should be sent only once, break after the\n // first time the request is sent.\n if (disableRepeat) {\n break;\n }\n\n isInitialRequest = false;\n\n if (abortSignal.aborted) {\n return;\n }\n\n await abortableAsyncDelay(delayMs, abortSignal);\n }\n\n isRunning = false;\n }\n\n runLoop();\n\n // Cleanup\n return () => {\n if (isRunning) {\n abortController.abort();\n }\n };\n }, [ sendRequest, delayMs, disableRepeat ]);\n}\n","import { useCallback, useMemo, useState } from 'react';\nimport * as RequestStatus from 'Common/data/RequestStatus';\nimport isPlainObject from 'lodash/isPlainObject';\n\n/**\n * Check the response of the request and let the developer know if they might\n * have messed something up.\n *\n * Note: This function only logs; it does not throw. It is intended to be used\n * only as a help to developers, not as legitimate validation.\n *\n * @param {*} result\n */\nfunction checkRequestResult(result) {\n const codingMistakeMsg = 'This indicates a possible mistake in the request function.';\n\n if (!isPlainObject(result)) {\n console.error(\n `useRequestWithStatus: Request returned something that isn't a`\n + ` plain object.`\n + ` ${codingMistakeMsg}`\n );\n }\n else if (result?.error && result?.response) {\n // Let the developer know they might have messed something up.\n console.error(\n `useRequestWithStatus: Request returned values for both`\n + ` \\`error\\` and \\`response\\` properties.`\n + ` Because \\`error\\` is truthy, this response is`\n + ` interpreted as a failure and \\`response\\` is ignored.`\n + ` ${codingMistakeMsg}`\n );\n }\n}\n\n/**\n * A hook for managing the state of an async request in a consistent format.\n *\n * @param {function({ abortSignal: AbortSignal }): Promise<{ error?: *, response?: * }>} sendFn\n * An async function that sends a request.\n * @returns {{\n * send: function({ abortSignal: AbortSignal }): Promise,\n * resend: function({ abortSignal: AbortSignal }): Promise,\n * requestState: {\n * status: RequestStatus,\n * error?: *,\n * response?: *,\n * },\n * }}\n */\nexport default function useRequestWithStatus(sendFn) {\n const [ requestState, setRequestState ] = useState({\n status: RequestStatus.IDLE,\n error: null,\n response: null,\n });\n\n /**\n * Internal function with common request sending logic.\n */\n const _sendInternal = useCallback(async ({ isInitialRequest, abortSignal }) => {\n try {\n // Set as pending before sending the request.\n if (isInitialRequest ) {\n setRequestState({\n status: RequestStatus.PENDING,\n error: null,\n response: null,\n });\n }\n\n const result = await sendFn({ abortSignal, isInitialRequest });\n\n if (abortSignal.aborted) {\n // Request was aborted, do nothing.\n return;\n }\n\n // Let the developer know if they might have messed something up.\n checkRequestResult(result);\n\n if (result?.error) {\n // Set the state to failed and include the error.\n setRequestState({\n status: RequestStatus.FAILURE,\n error: result?.error,\n response: null,\n });\n }\n else {\n // Set the state to success.\n setRequestState({\n status: RequestStatus.SUCCESS,\n error: null,\n response: result?.response,\n });\n }\n }\n catch (error) {\n console.error(error);\n console.error(\n 'useRequestWithStatus: The above error was caught when sending'\n + ' the request.'\n + ' Generally, these errors should be caught within the function'\n + ' that sends the request so it can do proper error handling.'\n );\n // Set the state to failed and include the error.\n setRequestState({\n status: RequestStatus.FAILURE,\n error: error?.message || error,\n response: null,\n });\n }\n }, [ sendFn, setRequestState ]);\n \n const send = useCallback(async ({ abortSignal }) => {\n return _sendInternal({\n isInitialRequest: true,\n abortSignal,\n });\n }, [ _sendInternal ]);\n\n const resend = useCallback(async ({ abortSignal }) => {\n return _sendInternal({\n isInitialRequest: false, // Don't reset the state when pending\n abortSignal,\n });\n }, [ _sendInternal ]);\n\n return useMemo(() => ({\n send,\n resend,\n requestState,\n }), [ send, resend, requestState]);\n}\n","import { useCallback } from 'react';\nimport useRepeatingRequest from './useRepeatingRequest';\nimport useRequestWithStatus from './useRequestWithStatus';\n\n/**\n * Like useRepeatingRequest, but returns the current status and state of the\n * request.\n *\n * IMPORTANT: Be sure to memoize (i.e., useCallback) the `sendRequest` function\n * because the loop will be restarted (and any pending requests aborted)\n * each time the reference to the function changes.\n *\n * @param {Object} opts\n * @param {function({ abortSignal: AbortSignal }): Promise<{ error?: *, response?: * }>} opts.sendRequest\n * Async function to send a request.\n * @param {number} opts.delayMs How often (in milliseconds) should the request repeat?\n * @param {boolean} opts.disableRepeat If true, opts.delayMs is ignored and the\n * request will not repeat.\n *\n * @returns {{\n * status: RequestStatus,\n * error?: *,\n * response?: *,\n * }}\n */\nexport default function useRepeatingRequestWithStatus({\n sendRequest,\n delayMs,\n disableRepeat,\n}) {\n const {\n send,\n resend,\n requestState,\n } = useRequestWithStatus(sendRequest);\n\n const internalSendRequest = useCallback(async ({ isInitialRequest, abortSignal }) => {\n if (isInitialRequest) {\n return send({ abortSignal });\n }\n else {\n return resend({ abortSignal });\n }\n }, [ send, resend ]);\n\n useRepeatingRequest({\n sendRequest: internalSendRequest,\n delayMs,\n disableRepeat,\n });\n\n return requestState;\n}\n","import { useCallback, useMemo } from 'react';\nimport ParamTypes from 'Common/util/ParamTypes';\nimport { paramTest } from 'Common/util/ParamTypes/ParamTypes';\nimport TimeRange from 'Common/types/TimeRange/TimeRange';\nimport fieldParamType from 'Common/types/stf/fieldParamType';\nimport Filters from 'Common/types/Filters/Filters';\nimport { useWidgetCache } from 'Common/components/Dashboard/DashboardCache';\nimport { getMaxAgeForRepeatingRequest } from 'Common/hooks/requests/useRepeatingRequest';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport useRepeatingRequestWithStatus from 'Common/hooks/requests/useRepeatingRequestWithStatus';\n\nconst filtersParamType = ParamTypes.shape({\n slice_filter: ParamTypes.shape({\n combine_type: ParamTypes.oneOf(['and', 'or']),\n expressions: ParamTypes.arrayOf(Filters.sliceFilterExpressionParamType),\n }),\n group_filter: ParamTypes.shape({\n combine_type: ParamTypes.oneOf(['and', 'or']),\n expressions: ParamTypes.arrayOf(Filters.groupFilterExpressionParamType),\n }),\n});\n\nconst paramTypes = ParamTypes.shape({\n hierarchyNode: ParamTypes.string.isRequired,\n field: fieldParamType.isRequired,\n widgetFilters: filtersParamType,\n pageFilters: filtersParamType,\n timeRange: TimeRange.timeRangeParamType.isRequired,\n getKpiWidgetData: ParamTypes.func.isRequired,\n updateInterval: ParamTypes.number,\n});\n\nexport default function useKpiWidgetData(parameters) {\n paramTest(parameters, paramTypes, 'getKpiWidgetData');\n\n const {\n hierarchyNode,\n field,\n widgetFilters,\n pageFilters,\n timeRange,\n getKpiWidgetData,\n updateInterval,\n } = parameters;\n\n const translator = useTranslator();\n\n const disableRepeat = useMemo(() => {\n // Disable the repeat if there's no update interval or if the time\n // range is not suitable.\n return (\n !updateInterval ||\n !TimeRange.shouldRepeatRequestWithTimeRange(timeRange)\n );\n }, [ timeRange, updateInterval ]);\n\n // getting data\n const getKpiWidgetDataCache = useWidgetCache({\n cacheId: 'getKpiWidgetData',\n load: ({ abortSignal }, args) => {\n return getKpiWidgetData({\n ...args,\n abortSignal,\n });\n },\n });\n\n // A cached version of `getKpiWidgetData`\n const getKpiWidgetDataCached = useCallback((args) => {\n const { abortSignal, ...otherArgs } = args;\n const maxAge = getMaxAgeForRepeatingRequest(disableRepeat, updateInterval);\n\n return getKpiWidgetDataCache.get(\n {\n abortSignal,\n maxAge,\n },\n otherArgs\n );\n }, [ disableRepeat, getKpiWidgetDataCache, updateInterval ]);\n\n\n const requestData = useCallback(async ({ abortSignal }) => {\n try {\n return getKpiWidgetDataCached({\n asset: hierarchyNode,\n field: field,\n filters: Filters.mergeFilters(widgetFilters, pageFilters),\n timeRange,\n abortSignal,\n });\n }\n catch(err) {\n console.error(err);\n return { error: translator('error_literal') };\n }\n }, [field, hierarchyNode, pageFilters, timeRange, widgetFilters,\n getKpiWidgetDataCached, translator]);\n\n return useRepeatingRequestWithStatus({\n sendRequest: requestData,\n delayMs: updateInterval || 0,\n disableRepeat: disableRepeat,\n });\n}\n","import ParamTypes from 'Common/util/ParamTypes';\nimport fieldParamType from './fieldParamType';\n\nconst sortRule = ParamTypes.shape({\n column: ParamTypes.string,\n channel: ParamTypes.string,\n group: ParamTypes.string,\n isCategoriesAll: ParamTypes.bool,\n order: ParamTypes.oneOf([\n 'asc',\n 'desc'\n ]).isRequired,\n});\n\nconst fieldSetParamType = ParamTypes.oneOfType([\n ParamTypes.shape({\n default_channel: ParamTypes.string,\n grouped_fields: ParamTypes.arrayOf(\n ParamTypes.shape({\n alternate_display: ParamTypes.string,\n channel: ParamTypes.string.isRequired,\n name: ParamTypes.string.isRequired,\n }),\n ),\n fields: ParamTypes.arrayOf(\n ParamTypes.oneOfType([\n ParamTypes.string,\n fieldParamType,\n ]),\n ),\n metric_set: ParamTypes.string,\n sort: ParamTypes.oneOfType([\n ParamTypes.arrayOf(sortRule),\n sortRule\n ])\n }),\n ParamTypes.string,\n]);\n\nexport default fieldSetParamType;\n","import ParamTypes from 'Common/util/ParamTypes';\nimport Filters from 'Common/types/Filters/Filters';\nimport fieldSetParamType from './fieldSetParamType';\n\n/**\n * The configuration for the ExplorationPath\n */\nconst explorationPathParamType = ParamTypes.shape({\n asset_control: ParamTypes.shape({\n layout: ParamTypes.oneOf([\n 'hierarchy',\n 'list',\n ]),\n level: ParamTypes.oneOfType([\n ParamTypes.number,\n ParamTypes.string,\n ]),\n root: ParamTypes.string,\n }),\n field_set: fieldSetParamType,\n slice_filter: ParamTypes.shape({\n combine_type: ParamTypes.oneOf(['and', 'or']),\n expressions: ParamTypes.arrayOf(Filters.sliceFilterExpressionParamType),\n }),\n group_filter: ParamTypes.shape({\n combine_type: ParamTypes.oneOf(['and', 'or']),\n expressions: ParamTypes.arrayOf(Filters.groupFilterExpressionParamType),\n }),\n});\n\nexport default explorationPathParamType;\n","import { useEffect, useState } from 'react';\nimport ParamTypes from 'Common/util/ParamTypes';\nimport { paramTest } from 'Common/util/ParamTypes/ParamTypes';\n\nconst paramTypes = ParamTypes.shape({\n dataService: ParamTypes.shape({\n getHierarchyOptions: ParamTypes.func.isRequired,\n getAllFilterOptions: ParamTypes.func.isRequired,\n getAllMetricOptions: ParamTypes.func.isRequired,\n }).isRequired,\n});\n\nexport default function useKpiWidgetInitialization(parameters) {\n paramTest(parameters, paramTypes, 'useKpiWidgetInitialization');\n\n const { dataService } = parameters;\n\n const [ isInitialized, setIsInitialized ] = useState(false);\n const [ liveControlOptions, setLiveControlOptions ] = useState({\n hierarchyNodeOptions: null,\n metricOptions: null,\n filterOptions: null,\n });\n\n useEffect(() => {\n let aborted = false;\n\n async function run() {\n const [\n hierarchyNodeOptions,\n filterOptions,\n metricOptions,\n ] = await Promise.all([\n dataService.getHierarchyOptions(),\n dataService.getAllFilterOptions(),\n dataService.getAllMetricOptions(),\n ]);\n\n if (!aborted) {\n setLiveControlOptions({\n hierarchyNodeOptions,\n filterOptions,\n metricOptions\n });\n\n setIsInitialized(true);\n }\n }\n\n run();\n\n return () => {\n aborted = true;\n };\n }, [ dataService ]);\n\n return {\n isInitialized,\n liveControlOptions,\n };\n}\n","import { formatDate, formatNumber } from 'Common/util/format';\nimport { ProductionDay } from \"Common/data/date/ProductionDay\";\n\n/**\n * @typedef {Object} PrimaryDescription\n * @property {string} title Primary text of the primary description\n * @property {string} detail Secondary text of the primary description\n */\n\n/**\n *\n * Gets primary description for a dimension.\n *\n * @param {String} dimensionDetailsDisplayName\n * @param {Boolean} dimensionDetailsIsMixed\n * @param {Number} timeRangeStart\n * @param {Object} timeRangeSameDimensionValue\n * @param {String} timeRangeUnits\n * @param {Boolean} atEndOfData\n * @param {Function} translator\n *\n * @returns {PrimaryDescription}\n *\n */\nconst handleDimensions = ({\n dimensionDetailsDisplayName,\n dimensionDetailsIsMixed,\n timeRangeStart,\n timeRangeSameDimensionValue,\n timeRangeUnits,\n timeRangeProductionDayOffset,\n atEndOfData,\n translator,\n}) => {\n const formattedCount = formatNumber(-timeRangeStart);\n\n if (timeRangeSameDimensionValue && timeRangeUnits !== 'ordinal_shift') {\n const dimensionName = dimensionDetailsDisplayName;\n\n if (timeRangeStart == 0) {\n return {\n title: `${translator(`timerange.dimensions.most_recent`)}`,\n detail: `${translator(`timerange.dimensions.only`, {\n x: dimensionName,\n })}`,\n };\n }\n else if (atEndOfData) {\n return {\n title: `${translator(`timerange.dimensions.end`)}`,\n detail: `${translator(`timerange.dimensions.only`, {\n x: dimensionName,\n })}`,\n };\n }\n else {\n return {\n title: `${translator(`timerange.dimensions.n_back`, {\n x: formattedCount,\n })}`,\n detail: `${translator(`timerange.dimensions.only`, {\n x: dimensionName,\n })}`,\n };\n }\n }\n else if (timeRangeStart === 0) {\n const detail = dimensionDetailsIsMixed\n ? `${translator(`timerange.dimensions.${timeRangeUnits}.mixed`)}`\n : dimensionDetailsDisplayName\n ? `${dimensionDetailsDisplayName}`\n : '';\n return {\n title: translator(`timerange.dimensions.${timeRangeUnits}.this`),\n detail,\n };\n }\n else if (timeRangeStart === -1) {\n const detail = dimensionDetailsIsMixed\n ? `${translator(`timerange.dimensions.${timeRangeUnits}.mixed`)}`\n : dimensionDetailsDisplayName\n ? `${dimensionDetailsDisplayName}`\n : '';\n return {\n title: translator(`timerange.dimensions.${timeRangeUnits}.last`),\n detail,\n };\n }\n else {\n let title;\n\n let detail = dimensionDetailsIsMixed\n ? `${translator(`timerange.dimensions.${timeRangeUnits}.mixed`)}`\n : dimensionDetailsDisplayName\n ? `${dimensionDetailsDisplayName}`\n : '';\n\n if (timeRangeUnits === 'ordinal_shift') {\n title = timeRangeProductionDayOffset === 0\n ? translator(`timerange.times.production_day.current`)\n : timeRangeProductionDayOffset === -1\n ? translator(`timerange.times.production_day.previous`)\n : translator(`timerange.times.production_day.n_ago`, {\n x: formatNumber(-timeRangeProductionDayOffset),\n });\n\n if (timeRangeSameDimensionValue) {\n detail = translator(`timerange.dimensions.only`, {\n x: detail,\n });\n }\n }\n else {\n title = translator(`timerange.dimensions.${timeRangeUnits}.n_ago`, {\n x: formattedCount,\n });\n }\n\n return {\n title,\n detail,\n };\n }\n};\n\n/**\n *\n * Gets primary description for time.\n *\n * @param {String} dimensionDetailsDisplayName\n * @param {Boolean} dimensionDetailsIsMixed\n * @param {Number} timeRangeStart\n * @param {Number} timeRangeEnd\n * @param {String} timeRangeUnits\n * @param {Function} translator\n *\n * @returns {PrimaryDescription}\n *\n */\nconst handleTime = ({\n dimensionDetailsDisplayName,\n dimensionDetailsIsMixed,\n timeRangeStart,\n timeRangeEnd,\n timeRangeUnits,\n translator,\n}) => {\n const formattedCount = formatNumber(-timeRangeStart);\n\n if (timeRangeUnits === \"shift_hour\") {\n const detail = dimensionDetailsIsMixed\n ? `${translator(`timerange.times.${timeRangeUnits}.mixed`)}`\n : dimensionDetailsDisplayName\n ? `${dimensionDetailsDisplayName}`\n : '';\n if (timeRangeStart === 0) {\n return {\n title: translator(`timerange.times.shift_hour.this`),\n detail,\n };\n } else if (timeRangeStart === -1) {\n return {\n title: translator(`timerange.times.shift_hour.last`),\n detail,\n };\n } else {\n return {\n title: translator(`timerange.times.shift_hour.n_ago`, {\n x: formattedCount,\n }),\n detail,\n };\n }\n }\n else {\n\n const isSingleUnit = timeRangeStart === timeRangeEnd;\n\n if (isSingleUnit) {\n const detail = dimensionDetailsDisplayName ? `${dimensionDetailsDisplayName}` : \"\";\n if (timeRangeStart === 0) {\n return {\n title: `${translator(\n `timerange.times.${timeRangeUnits}.current`\n )}`,\n detail,\n };\n }\n else if (timeRangeStart === 1) {\n return {\n title: `${translator(\n `timerange.times.${timeRangeUnits}.future`\n )}`,\n detail,\n };\n }\n else if (timeRangeStart === -1) {\n return {\n title: `${translator(\n `timerange.times.${timeRangeUnits}.previous`\n )}`,\n detail,\n };\n }\n else if (timeRangeStart < -1) {\n return {\n title: `${translator(\n `timerange.times.${timeRangeUnits}.n_ago`,\n {\n x: formattedCount,\n }\n )}`,\n detail,\n };\n }\n }\n else if (timeRangeUnits === \"production_day\") {\n const translationKey =\n timeRangeEnd === 0\n ? `timerange.times.last_n_days_ago`\n : `timerange.times.n_days_ago`;\n return {\n title: `${translator(translationKey, {\n x: -(timeRangeStart - timeRangeEnd - 1),\n })}`,\n detail: \"\",\n };\n }\n }\n};\n\n/**\n *\n * Gets primary description for all time.\n * \n * @param {Function} translator\n *\n * @returns {PrimaryDescription}\n *\n */\nconst handleAllTime = (translator) => {\n return {\n title: translator(\"timerange.all_time\"),\n detail: \"\",\n };\n};\n\n/**\n *\n * Gets primary description for time range.\n *\n * @param {Number} timeRangeStart\n * @param {Number} timeRangeEnd\n * @param {String} locale\n * @param {Function} translator\n *\n * @returns {PrimaryDescription}\n *\n */\nconst handleTimeRange = (timeRangeStart, timeRangeEnd, locale, translator) => {\n const isSingleUnit = timeRangeStart === timeRangeEnd;\n const start = new ProductionDay(timeRangeStart);\n const end = new ProductionDay(timeRangeEnd);\n\n if (isSingleUnit) {\n return {\n title: formatDate(start, {\n selector: \"date\",\n formatLength: \"short\",\n locale\n }),\n detail: \"\",\n };\n }\n else {\n return {\n title: translator(\"timerange.times.date_range\", {\n x: formatDate(start, {\n selector: \"date\",\n formatLength: \"short\",\n locale\n }),\n y: formatDate(end, {\n selector: \"date\",\n formatLength: \"short\",\n locale\n }),\n }),\n detail: \"\",\n };\n }\n};\n\n/**\n *\n * Gets primary description\n *\n * @param {String} dimensionDetailsDisplayName\n * @param {Boolean} dimensionDetailsIsMixed\n * @param {Number} timeRangeStart\n * @param {Number} timeRangeEnd\n * @param {Object} timeRangeSameDimensionValue\n * @param {String} timeRangeUnits\n * @param {Boolean} atEndOfData\n * @param {String} locale\n * @param {Function} translator\n *\n * @returns {PrimaryDescription}\n *\n */\nconst getPrimaryDescription = ({\n dimensionDetailsDisplayName,\n dimensionDetailsIsMixed,\n timeRangeStart,\n timeRangeEnd,\n timeRangeSameDimensionValue,\n timeRangeUnits,\n timeRangeProductionDayOffset,\n atEndOfData,\n locale,\n translator,\n}) => {\n const supportedDimensions = [\"part\", \"shift\", \"ordinal_shift\"];\n const supportedTimes = [\n \"shift_hour\",\n \"production_day\",\n \"week\",\n \"month\",\n \"quarter\",\n \"year\",\n ];\n\n if (supportedDimensions.includes(timeRangeUnits)) {\n return handleDimensions({\n dimensionDetailsDisplayName,\n dimensionDetailsIsMixed,\n timeRangeStart,\n timeRangeSameDimensionValue,\n timeRangeUnits,\n timeRangeProductionDayOffset,\n atEndOfData,\n translator,\n });\n } else if (supportedTimes.includes(timeRangeUnits)) {\n return handleTime({\n dimensionDetailsDisplayName,\n dimensionDetailsIsMixed,\n timeRangeStart,\n timeRangeEnd,\n timeRangeUnits,\n translator,\n });\n } else if (timeRangeUnits === \"all\") {\n return handleAllTime(translator);\n } else if (timeRangeUnits === \"time\") {\n return handleTimeRange(timeRangeStart, timeRangeEnd, locale, translator);\n } else {\n throw `${timeRangeUnits} is not supported`;\n }\n};\n\nexport default getPrimaryDescription;\n","import { formatDate } from 'Common/util/format';\nimport { toJulianDay } from 'Common/util/language/date';\nimport formatDuration from 'Common/util/formatDuration';\nimport { ProductionDay } from \"Common/data/date/ProductionDay\";\nimport TimeRange from \"Common/types/TimeRange/TimeRange\";\nimport moment from \"moment-timezone\";\n\n/**\n * @typedef {Object} SecondaryDescription\n * @property {string} title Primary text of the secondary description\n *\n * @typedef {Object} Range\n * @property {Object} start\n * @property {String} start.error\n * @property {String} start.errorType\n * @property {OffsetDate} start.startTime\n * @property {Number} start.productionDayNumber\n * @property {Object} end\n * @property {String} end.error\n * @property {String} end.errorType\n * @property {OffsetDate} end.endTime\n * @property {Number} end.productionDayNumber\n * @property {Number} duration\n * \n */\n\n/**\n *\n * Gets the number of days between the start and end date.\n *\n * @param {Object} startDate\n * @param {Object} endDate\n *\n * @returns {number}\n *\n */\nconst getDaysBetween = (startDate, endDate) => {\n const julianStart = toJulianDay(startDate),\n julianEnd = toJulianDay(endDate);\n\n return julianEnd - julianStart;\n};\n\n/**\n *\n * Gets duration in number of days.\n *\n * @param {number} dayCount\n * @param {Function} translator\n *\n * @returns {string}\n *\n */\nconst getDayDuration = (dayCount, translator) => {\n return dayCount === 1\n ? translator(\"timerange.one_day\")\n : translator(\"timerange.n_days\", { x: dayCount });\n};\n\n/**\n *\n * Gets formatted start date.\n *\n * @param {Object} offset\n * @param {String} locale\n * @param {Function} translator\n *\n * @returns {SecondaryDescription}\n *\n */\nconst getFormattedStartDate = (offset, locale, translator) => {\n const today = new Date();\n const startOfWeekToday = moment(today).startOf(\"isoWeek\");\n const startOfWeekOffset = moment(offset).startOf(\"isoWeek\");\n const weeksBetween = startOfWeekToday.diff(startOfWeekOffset, \"week\");\n const daysBetween = getDaysBetween(offset, today);\n const dayOfWeek = [\n \"timerange.day_of_week.sunday\",\n \"timerange.day_of_week.monday\",\n \"timerange.day_of_week.tuesday\",\n \"timerange.day_of_week.wednesday\",\n \"timerange.day_of_week.thursday\",\n \"timerange.day_of_week.friday\",\n \"timerange.day_of_week.saturday\",\n ];\n\n if (daysBetween === -1) {\n return translator(\"timerange.day_of_week.tomorrow\");\n } else if (daysBetween === 0) {\n return translator(\"timerange.day_of_week.today\");\n } else if (daysBetween === 1) {\n return translator(\"timerange.day_of_week.yesterday\");\n } else if (weeksBetween === 0) {\n return translator(dayOfWeek[offset.getDay()]);\n } else if (weeksBetween === 1) {\n return translator(\"timerange.day_of_week.last_secondary\", {\n x: translator(dayOfWeek[offset.getDay()]),\n });\n } else {\n return formatDate(offset, {\n selector: \"date\",\n formatLength: \"long\",\n locale,\n });\n }\n};\n\n/**\n *\n * Gets secondary description for dimensions.\n *\n * @param {Range} range\n * @param {Number} timeRangeEnd\n * @param {Object} timeRangeSameDimensionValue\n * @param {String} locale\n * @param {Function} translator\n *\n * @returns {SecondaryDescription}\n *\n */\nconst handleDimensions = (range, timeRangeEnd, timeRangeSameDimensionValue, timeRangeUnits, locale, translator) => {\n if (range === undefined || range.start.errorType === \"nodata\" || !range.start.startTime) {\n return {\n title: translator(\"timerange.no_data\"),\n };\n }\n\n const offset = range.start.startTime.getOffsetDate();\n const startTime = formatDate(offset, { selector: \"time\", locale });\n const startDate = getFormattedStartDate(offset, locale, translator);\n let duration;\n let startIntervalLiteral = \"timerange.start_interval\";\n\n if (timeRangeEnd === 0 && !timeRangeSameDimensionValue) {\n duration = translator(\"timerange.open\");\n }\n else if ([\"ordinal_shift\", \"shift\"].includes(timeRangeUnits)) {\n duration = \"\";\n startIntervalLiteral = \"timerange.start_interval_no_duration\";\n }\n else {\n const numberOfDays = Math.floor(range.duration / (24 * 60 * 60));\n if (numberOfDays >= 1) {\n duration = getDayDuration(numberOfDays, translator);\n }\n else {\n duration = formatDuration(Number(range.duration).toFixed(4), {\n translator,\n pattern: 'h\"h\" mm\"m\"',\n });\n }\n }\n\n return {\n title: translator(startIntervalLiteral, {\n x: `${startDate} ${startTime}`,\n y: duration,\n }),\n };\n};\n\n/**\n *\n * Gets secondary description for time.\n *\n * @param {Range} range\n * @param {Number} timeRangeStart\n * @param {Number} timeRangeEnd\n * @param {Object} timeRangeSameDimensionValue\n * @param {String} timeRangeUnits\n * @param {ProductionDay} originDay\n * @param {String} locale\n * @param {Function} translator\n *\n * @returns {SecondaryDescription}\n *\n */\nconst handleTime = (range, timeRangeStart, timeRangeEnd, timeRangeSameDimensionValue, timeRangeUnits, originDay, locale, translator) => {\n\n if (timeRangeUnits === \"shift_hour\") {\n return handleDimensions(range, timeRangeEnd, timeRangeSameDimensionValue, timeRangeUnits, locale, translator);\n }\n else {\n let title;\n\n const hasNoData = range === undefined || range.start.errorType === 'nodata' || range.start.error;\n\n if (hasNoData || !originDay) {\n title = translator(\"timerange.no_data\");\n }\n else {\n // Get the production day range using the relative offset starts and\n // ends of the time range\n const productionDayRange = TimeRange.computeProductionDayRangeFromToday(\n {\n units: timeRangeUnits,\n start: timeRangeStart,\n end: timeRangeEnd,\n },\n originDay\n );\n\n // The start of the actual data in the time range\n const dataStart = range?.start.startTime?.getOffsetDate();\n\n let duration;\n\n if (timeRangeEnd === 0 && !timeRangeSameDimensionValue) {\n duration = translator(\"timerange.open\");\n }\n else {\n const dayCount = productionDayRange.end - productionDayRange.start + 1;\n duration = getDayDuration(dayCount, translator);\n }\n\n title = translator(\"timerange.start_interval\", {\n x: getFormattedStartDate(dataStart, locale, translator),\n y: duration,\n });\n }\n\n return {\n title: title,\n };\n }\n};\n\n/**\n *\n * Gets secondary description for all time.\n *\n * @param {Range} range\n * @param {Number} timeRangeEnd\n * @param {Object} timeRangeSameDimensionValue\n * @param {String} locale\n * @param {Function} translator\n *\n * @returns {SecondaryDescription}\n *\n */\nconst handleAllTime = (range, timeRangeEnd, timeRangeSameDimensionValue, timeRangeUnits, locale, translator) => {\n return handleDimensions(range, timeRangeEnd, timeRangeSameDimensionValue, timeRangeUnits, locale, translator);\n};\n\n/**\n *\n * Gets secondary description for time range.\n *\n * @param {Range} range\n * @param {Number} timeRangeStart\n * @param {Number} timeRangeEnd\n * @param {String} locale\n * @param {Function} translator\n *\n * @returns {SecondaryDescription}\n *\n */\n\nconst handleTimeRange = (range, timeRangeStart, timeRangeEnd, locale, translator) => {\n const today = new ProductionDay(new Date());\n\n let title;\n\n const hasNoData = range === undefined || range.start.errorType === \"nodata\" || range.start.errorType === \"deviceunresponsive\";\n\n if (hasNoData) {\n title = translator(\"timerange.no_data\");\n }\n else {\n const startAsDay = new ProductionDay(timeRangeStart);\n const endAsDay = new ProductionDay(timeRangeEnd);\n // The start of the actual data in the time range\n const dataStartDate = range?.start.startTime?.getOffsetDate();\n\n const isOpen = (\n endAsDay.isOnOrAfter(today) &&\n startAsDay.isOnOrBefore(today)\n );\n\n let duration;\n\n if (isOpen) {\n duration = translator(\"timerange.open\");\n }\n else {\n const timeRangeEndDate = new ProductionDay(timeRangeEnd).toDate();\n\n const daysBetween = getDaysBetween(\n dataStartDate,\n timeRangeEndDate\n );\n\n duration = getDayDuration(daysBetween + 1, translator);\n }\n\n title = translator(\"timerange.start_interval\", {\n x: formatDate(dataStartDate, {\n selector: \"date\",\n formatLength: \"short\",\n locale\n }),\n y: duration,\n });\n }\n\n return {\n title: title,\n };\n};\n\n/**\n *\n * Gets secondary description.\n *\n * @param {Range} range\n * @param {Number} timeRangeStart\n * @param {Number} timeRangeEnd\n * @param {Object} timeRangeSameDimensionValue\n * @param {String} timeRangeUnits\n * @param {ProductionDay} originDay\n * @param {String} locale\n * @param {Function} translator\n *\n * @returns {SecondaryDescription}\n *\n */\nconst getSecondaryDescription = ({\n range,\n timeRangeStart,\n timeRangeEnd,\n timeRangeSameDimensionValue,\n timeRangeUnits,\n originDay,\n locale,\n translator\n}) => {\n const supportedDimensions = [\"part\", \"shift\", \"ordinal_shift\"];\n const supportedTimes = [\n \"shift_hour\",\n \"production_day\",\n \"week\",\n \"month\",\n \"quarter\",\n \"year\",\n ];\n\n if (range === undefined) {\n return {\n title: translator(\"timerange.loading\"),\n };\n }\n\n if (supportedDimensions.includes(timeRangeUnits)) {\n return handleDimensions(range, timeRangeEnd, timeRangeSameDimensionValue, timeRangeUnits, locale, translator);\n } else if (supportedTimes.includes(timeRangeUnits)) {\n return handleTime(range, timeRangeStart, timeRangeEnd, timeRangeSameDimensionValue, timeRangeUnits, originDay, locale, translator);\n } else if (timeRangeUnits === \"all\") {\n return handleAllTime(range, timeRangeEnd, timeRangeSameDimensionValue, timeRangeUnits, locale, translator);\n } else if (timeRangeUnits === \"time\") {\n return handleTimeRange(range, timeRangeStart, timeRangeEnd, locale, translator);\n } else {\n throw `${timeRangeUnits} is not supported`;\n }\n};\n\nexport default getSecondaryDescription;\n","import ParamTypes from 'Common/util/ParamTypes';\nimport { paramTest } from 'Common/util/ParamTypes/ParamTypes';\nimport PropTypes from 'prop-types';\nimport * as RequestStatus from 'Common/data/RequestStatus';\n\n/**\n * An object representing the state of a request.\n *\n * @typedef {{ status: RequestStatus, error?: *, response?: * }} RequestStateType\n */\n\n/**\n * A set of utility functions using the standard request state object.\n */\nexport default class RequestState {\n //\n // ParamTypes\n //\n\n static requestStatusParamType = ParamTypes.oneOf([\n RequestStatus.IDLE,\n RequestStatus.PENDING,\n RequestStatus.SUCCESS,\n RequestStatus.FAILURE,\n ]);\n\n /**\n * A ParamTypes definition for a RequestState object, but with a ParamType of\n * your choosing for the `response` field.\n *\n * @param {*} responseParamType \n * @returns ParamTypes validatior.\n */\n static paramTypeWithResponseOf(responseParamType) {\n return ParamTypes.shape({\n status: RequestState.requestStatusParamType.isRequired,\n response: responseParamType,\n error: ParamTypes.any,\n });\n }\n\n static paramType = RequestState.paramTypeWithResponseOf(ParamTypes.any);\n\n //\n // PropTypes\n //\n\n static requestStatusPropType = PropTypes.oneOf([\n RequestStatus.IDLE,\n RequestStatus.PENDING,\n RequestStatus.SUCCESS,\n RequestStatus.FAILURE,\n ]);\n\n /**\n * A PropTypes definition for a RequestState object, but with a PropType of\n * your choosing for the `response` field.\n *\n * @param {*} responsePropType \n * @returns PropTypes validatior.\n */\n static propTypeWithResponseOf(responsePropType) {\n return PropTypes.shape({\n status: RequestState.requestStatusPropType.isRequired,\n response: responsePropType,\n error: PropTypes.any,\n });\n }\n\n static propType = RequestState.propTypeWithResponseOf(PropTypes.any);\n\n //\n // Methods\n //\n\n static validate(requestState) {\n paramTest(requestState, RequestState.paramType, 'RequestState');\n }\n\n /**\n * Is the request completed (i.e., not IDLE or PENDING)?\n * @param {RequestStateType} requestState\n * @returns {boolean}\n */\n static isRequestCompleted(requestState) {\n RequestState.validate(requestState);\n\n return requestState.status !== RequestStatus.IDLE &&\n requestState.status !== RequestStatus.PENDING;\n }\n\n /**\n * Is the request pending?\n *\n * @param {RequestStateType} requestState\n * @returns {boolean}\n */\n static isRequestPending(requestState) {\n RequestState.validate(requestState);\n return requestState.status === RequestStatus.PENDING;\n }\n\n /**\n * Was the request completed and successful?\n *\n * @param {RequestStateType} requestState \n * @returns {boolean}\n */\n static isRequestSuccessful(requestState) {\n RequestState.validate(requestState);\n return requestState.status === RequestStatus.SUCCESS;\n }\n\n /**\n * Was the request completed and failed?\n *\n * @param {RequestStateType} requestState \n * @returns {boolean}\n */\n static isRequestFailure(requestState) {\n RequestState.validate(requestState);\n return requestState.status === RequestStatus.FAILURE;\n }\n\n /**\n * Are all of the requests completed (i.e., not IDLE or PENDING)?\n *\n * @param {Array} requestStates\n * @returns {boolean}\n */\n static areAllRequestsCompleted(requestStates) {\n if (!Array.isArray(requestStates)) {\n throw new Error('RequestState.areAllRequestsCompleted: Argument must be an array');\n }\n\n return requestStates.every((requestState) => RequestState.isRequestCompleted(requestState));\n }\n}\n","import { useCallback, useMemo } from 'react';\nimport ParamTypes from 'Common/util/ParamTypes';\nimport { paramTest } from 'Common/util/ParamTypes/ParamTypes';\nimport TimeRange from 'Common/types/TimeRange/TimeRange';\nimport { useWidgetCache } from 'Common/components/Dashboard/DashboardCache';\nimport useRepeatingRequest, { getMaxAgeForRepeatingRequest } from 'Common/hooks/requests/useRepeatingRequest';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport useRequestWithStatus from 'Common/hooks/requests/useRequestWithStatus';\n\nexport const TIME_RANGE_PRIMARY_DETAILS = 'timeRangePrimaryDetails';\nexport const TIME_RANGE_SECONDARY_DETAILS = 'timeRangeSecondaryDetails';\n\nfunction useTimeRangeDataInternal({\n getTimeRangePrimaryDetails,\n getTimeRangeSecondaryDetails,\n hierarchyNodes,\n timeRange,\n translator,\n updateIntervalMs,\n disableRepeat,\n}) {\n const timeRangePrimaryRequest = useRequestWithStatus(\n useCallback(async ({ abortSignal }) => {\n try {\n if (timeRange) {\n return await getTimeRangePrimaryDetails({\n abortSignal: abortSignal,\n hierarchyNodes,\n timeRange,\n });\n }\n else {\n return {\n response: null,\n error: null\n };\n }\n }\n catch (err) {\n console.error(err);\n return { error: translator('error_literal') };\n }\n }, [ getTimeRangePrimaryDetails, hierarchyNodes, timeRange, translator ]),\n );\n\n const timeRangeSecondaryRequest = useRequestWithStatus(\n useCallback(async ({ abortSignal }) => {\n try {\n if (timeRange) {\n return await getTimeRangeSecondaryDetails({\n abortSignal: abortSignal,\n hierarchyNodes,\n timeRange,\n });\n }\n else {\n return {\n response: null,\n error: null\n };\n }\n }\n catch (err) {\n console.error(err);\n return { error: translator('error_literal') };\n }\n }, [ getTimeRangeSecondaryDetails, hierarchyNodes, timeRange, translator ]),\n );\n\n const {\n send: sendTimeRangePrimaryRequest,\n resend: resendTimeRangePrimaryRequest,\n requestState: timeRangePrimaryRequestState,\n } = timeRangePrimaryRequest;\n\n const {\n send: sendTimeRangeSecondaryRequest,\n resend: resendTimeRangeSecondaryRequest,\n requestState: timeRangeSecondaryRequestState,\n } = timeRangeSecondaryRequest;\n\n // Put both of the requests into a single async function.\n const requestTimeRangeData = useCallback(\n async ({ isInitialRequest, abortSignal }) => {\n if (isInitialRequest) {\n await Promise.allSettled([\n sendTimeRangePrimaryRequest({ abortSignal }),\n sendTimeRangeSecondaryRequest({ abortSignal }),\n ]);\n }\n else {\n await Promise.allSettled([\n resendTimeRangePrimaryRequest({ abortSignal }),\n resendTimeRangeSecondaryRequest({ abortSignal }),\n ]);\n }\n },\n [\n sendTimeRangePrimaryRequest,\n sendTimeRangeSecondaryRequest,\n resendTimeRangePrimaryRequest,\n resendTimeRangeSecondaryRequest,\n ]\n );\n\n useRepeatingRequest({\n sendRequest: requestTimeRangeData,\n delayMs: updateIntervalMs,\n disableRepeat,\n });\n\n return useMemo(() => {\n return {\n [TIME_RANGE_PRIMARY_DETAILS]: timeRangePrimaryRequestState,\n [TIME_RANGE_SECONDARY_DETAILS]: timeRangeSecondaryRequestState,\n };\n }, [ timeRangePrimaryRequestState, timeRangeSecondaryRequestState ]);\n}\n\nconst paramTypes = ParamTypes.shape({\n getTimeRangePrimaryDetails: ParamTypes.func.isRequired,\n getTimeRangeSecondaryDetails: ParamTypes.func.isRequired,\n\n hierarchyNode: ParamTypes.string.isRequired,\n timeRange: TimeRange.timeRangeParamType,\n updateInterval: ParamTypes.number,\n});\n\nexport default function useTimeRangeData(parameters) {\n paramTest(parameters, paramTypes, 'useTimeRangeData');\n\n const {\n getTimeRangePrimaryDetails,\n getTimeRangeSecondaryDetails,\n hierarchyNode,\n timeRange,\n updateInterval,\n } = parameters;\n\n const disableRepeat = useMemo(() => {\n // Disable the repeat if there's no update interval or if the time\n // range is not suitable.\n return (\n !updateInterval ||\n !timeRange ||\n !TimeRange.shouldRepeatRequestWithTimeRange(timeRange)\n );\n }, [ timeRange, updateInterval ]);\n\n const updateIntervalMs = updateInterval || 0;\n\n const translator = useTranslator();\n\n const hierarchyNodes = useMemo(() => { return [hierarchyNode]; }, [hierarchyNode]);\n\n // getting timerange primary details\n const getTimeRangePrimaryDetailsCache = useWidgetCache({\n cacheId: 'getTimeRangePrimaryDetails',\n load: ({ abortSignal }, args) => {\n return getTimeRangePrimaryDetails({\n ...args,\n abortSignal,\n });\n },\n });\n\n // A cached version of `getTimeRangePrimaryDetails`\n const getTimeRangePrimaryDetailsCached = useCallback((args) => {\n const { abortSignal, ...otherArgs } = args;\n const maxAge = getMaxAgeForRepeatingRequest(disableRepeat, updateIntervalMs);\n\n return getTimeRangePrimaryDetailsCache.get(\n {\n abortSignal,\n maxAge,\n },\n otherArgs\n );\n }, [ disableRepeat, getTimeRangePrimaryDetailsCache, updateIntervalMs ]);\n\n // getting timerange secondary details\n const getTimeRangeSecondaryDetailsCache = useWidgetCache({\n cacheId: 'getTimeRangeSecondaryDetails',\n load: ({ abortSignal }, args) => {\n return getTimeRangeSecondaryDetails({\n ...args,\n abortSignal,\n });\n },\n });\n\n // A cached version of `getTimeRangeSecondaryDetails`\n const getTimeRangeSecondaryDetailsCached = useCallback((args) => {\n const { abortSignal, ...otherArgs } = args;\n const maxAge = getMaxAgeForRepeatingRequest(disableRepeat, updateIntervalMs);\n\n return getTimeRangeSecondaryDetailsCache.get(\n {\n abortSignal,\n maxAge,\n },\n otherArgs\n );\n }, [ disableRepeat, getTimeRangeSecondaryDetailsCache, updateIntervalMs ]);\n\n return useTimeRangeDataInternal({\n getTimeRangePrimaryDetails: getTimeRangePrimaryDetailsCached,\n getTimeRangeSecondaryDetails: getTimeRangeSecondaryDetailsCached,\n hierarchyNodes,\n timeRange,\n translator,\n updateIntervalMs,\n disableRepeat,\n });\n}\n","export default function formatFiltersForRequest(filters) {\n let formatted = [];\n if (filters.slice) {\n formatted.push({ ...filters.slice, type: 'slice' });\n }\n if (filters.group) {\n formatted.push({ ...filters.group, type: 'group' });\n }\n return formatted;\n}\n","function getPrettyOperator(uglyOp, translator) {\n if (uglyOp === 'eq') {\n return translator('filter.equal_to');\n }\n else if (uglyOp === 'ne') {\n return translator('filter.not_equal_to');\n }\n else if (uglyOp === 'lt') {\n return translator('filter.less_than');\n }\n else if (uglyOp === 'le') {\n return translator('filter.less_than_or_equal_to');\n }\n else if (uglyOp === 'gt') {\n return translator('filter.greater_than');\n }\n else if (uglyOp === 'ge') {\n return translator('filter.greater_than_or_equal_to');\n }\n else {\n return uglyOp;\n }\n}\n\nfunction getFormulaOperator(op) {\n if (op === 'eq') {\n return '==';\n }\n else if (op === 'ne') {\n return '!=';\n }\n else if (op === 'lt') {\n return '<';\n }\n else if (op === 'le') {\n return '<=';\n }\n else if (op === 'gt') {\n return '>';\n }\n else if (op === 'ge') {\n return '>=';\n }\n else {\n throw `Cannot convert ${op} to a formula equivalent.`;\n }\n}\n\nfunction formatForURL ({ rhs, op, lhs }) {\n if (Array.isArray(rhs)) {\n throw 'Break rhs out individually before trying to format';\n }\n let opString = op;\n let lhsString = '';\n let rhsString = '';\n\n if (typeof lhs === 'string' ) {\n lhsString = lhs;\n }\n else {\n lhsString = lhs.getName();\n // [FUTUREHACK]\n // swap out list_occurrences for _occurrences so it doesn't try to do\n // [8,9,4] > 3\n const list_occurrences = '_list_occurrences';\n if (lhsString.endsWith(list_occurrences)) {\n lhsString = `${lhsString.slice(0, -list_occurrences.length)}_occurrences`;\n }\n\n // [FUTUREHACK]\n // swap out category_value fieldType columns that have\n // a display name column counterpart\n // this helps when the request is made across devices\n // and has discrepancies between category value keys\n if (lhs.isCategoryValue() && lhs.isValid()) {\n const displayName = `${lhsString}_display_name`;\n const displayNameColumn = lhs.getTable().getColumn(displayName);\n \n if (displayNameColumn.isValid()) {\n lhsString = displayNameColumn.getName();\n\n // convert what is expected to be category_value key to display name\n // if not found stick with original value\n const rhsDisplayName = lhs.getConfigurationCategoryValue(rhs)?.getDisplayName();\n rhsString = rhsDisplayName ? rhsDisplayName : rhs;\n }\n else {\n rhsString = rhs;\n }\n\n rhsString = `'${rhsString}'`;\n }\n\n // current is a viable option for metrics ending in event_id\n const event_ids = '_event_id';\n if (rhs === 'current' && lhsString.endsWith(event_ids)) {\n rhsString = `'${rhs}'`;\n }\n }\n\n if (rhs instanceof Date) {\n // In our REST API, Dates are represented in UNIX timestamps.\n // Make sure to convert them from their JS milliseconds to seconds.\n rhsString = (rhs.valueOf() / 1000).toString(); // Convert from ms to s.\n }\n else {\n rhsString = (rhsString || rhs ).toString();\n }\n\n return `${lhsString} ${opString} ${rhsString}`;\n}\n\nfunction formatForFormula ({ rhs, op, lhs }) {\n if (Array.isArray(rhs)) {\n throw 'Break rhs out individually before trying to format';\n }\n let opString = getFormulaOperator(op);\n let lhsString = '';\n let rhsString = rhs.toString();\n\n if (typeof lhs === 'string' ) {\n lhsString = lhs;\n }\n else {\n // [FUTUREHACK]\n if (lhs.isCategoryValue()) {\n throw 'Currently unsupported category value in filter formula.';\n }\n\n lhsString = lhs.getName();\n }\n\n return `${lhsString} ${opString} ${rhsString}`;\n}\n\nfunction formatForReadable ({ rhs, op, lhs, translator, combineRHS }) {\n let opString = getPrettyOperator(op, translator);\n let lhsString = '';\n let rhsStrings = [];\n\n if (typeof lhs === 'string' ) {\n lhsString = lhs;\n rhsStrings = rhs.map(singleValue => (singleValue.toString()));\n }\n else {\n lhsString = lhs.getDisplayName();\n rhsStrings = rhs.map(singleValue => {\n if (lhs.isCategoryValue()) { \n // convert what is expected to be category_value key to display name\n // if not found stick with original value\n const rhsDisplayName = lhs.getConfigurationCategoryValue(singleValue)?.getDisplayName();\n return rhsDisplayName ? rhsDisplayName : translator('unknown_literal');\n }\n else {\n const formatter = lhs.getFormatter(null, {\n // This value is what it looks like after post process\n handlePostProcess: false,\n });\n return formatter(rhs);\n }\n });\n }\n\n let rhsFinalString = '';\n\n if (rhsStrings.length === 1) {\n rhsFinalString = rhsStrings[0];\n }\n else if (rhsStrings.length === 2) {\n rhsFinalString = `${rhsStrings[0]} ${combineRHS} ${rhsStrings[1]}`;\n }\n else {\n const lastRHSValue = rhsStrings.pop();\n rhsFinalString = `${rhsStrings.join(', ')}, ${combineRHS} ${lastRHSValue}`;\n }\n\n return `${lhsString} ${opString} ${rhsFinalString}`;\n}\n\n/**\n * Filter out any filter expression that is not active.\n * @param {Object[]} filters the filters to write out\n * \n * @returns {Object[]}\n */\nexport function filterActiveFilters(filters) {\n return filters\n .map((filter) => {\n // Filter out any expressions that have no rhs value\n const activeExpressions = filter.expressions.filter((expression) => {\n if (Array.isArray(expression.rhs)) {\n return expression.rhs.length > 0;\n }\n else {\n return expression.rhs !== null && expression.rhs !== undefined;\n }\n });\n\n return {\n ...filter,\n expressions: activeExpressions,\n };\n })\n // Filter out any filters with no expressions\n .filter((filter) => {\n return filter.expressions.length > 0;\n });\n}\n\nexport const HUMAN_READABLE = 'hr';\nexport const FOR_URL = 'url';\nexport const FOR_FORMULA = 'formula';\n\nfunction isHumanReadable(printType) {\n return printType === HUMAN_READABLE;\n}\n\n/**\n * type should be and or or, this will either return the translated version of the base\n * version depending on if the text should be human readable or not\n */\nfunction handleTranslate(printType, type, translator) {\n if (isHumanReadable(printType)) {\n return translator('filter.' + type);\n }\n return type;\n}\n\nconst validPrintTypes = [HUMAN_READABLE, FOR_URL, FOR_FORMULA]\n .reduce((validTypes, type) => {\n validTypes[type] = true;\n return validTypes;\n }, {});\n\n/**\n * Translate a filter expression to a string.\n * This is used to generate the text for the url, or just displaying it\n * so the user can more easily read it and more.\n * @param {Object} expression the filters to write out\n * @param {Object} opts the options for how to generate the filter text\n * @param {String} opts.printType the different ways to print it \n * humanReadable - this will include spaces \n * between the parenthesis, show > instead of ge,\n * and format values (.ie 75% instead of .75)\n * url - this will print it with less spaces and show ge instead of >\n * formula - this will print it so it can be utilized in formula\n * so it will show > instead of ge.\n * @param {Function} translator A function which accepts an object and returns the\n * translated string. The objects shape is:\n * - {String} key: the translation key.\n * - {Object} substitutions: The substitutions passed along to the translator\n * for dynamic translations.\n * \n * @returns {String}\n */\nexport function generateFilterExpressionText(expression, printType = HUMAN_READABLE, translator) {\n const { lhs, op, rhs } = expression;\n const rhsArray = Array.isArray(rhs) ? rhs : [rhs];\n const showExcessSpacing = isHumanReadable(printType);\n\n const combineRHS = op === 'eq'\n ? handleTranslate(printType, 'or', translator)\n : handleTranslate(printType, 'and', translator);\n\n if (isHumanReadable(printType)) {\n return formatForReadable({ lhs, rhs: rhsArray, op, translator, combineRHS });\n }\n else {\n return rhsArray.map((rr) => {\n let stringExpression = '';\n switch (printType) {\n case FOR_FORMULA:\n stringExpression = formatForFormula({ lhs, rhs:rr, op });\n break;\n case FOR_URL:\n stringExpression = formatForURL({ lhs, rhs:rr, op });\n break;\n }\n\n return rhsArray.length > 1\n ? showExcessSpacing ? `( ${stringExpression} )` : `(${stringExpression})`\n : `${stringExpression}`;\n }).join(` ${combineRHS} `);\n }\n}\n\n/**\n * Based on a filter array this will write out the expressions as strings.\n * This is used to generate the text for the url, or just displaying it\n * so the user can more easily read it and more.\n * @param {Object[]} filters the filters to write out\n * @param {Object} opts the options for how to generate the filter text\n * @param {String} opts.printType the different ways to print it \n * humanReadable - this will include spaces \n * between the parenthesis, show > instead of ge,\n * and format values (.ie 75% instead of .75)\n * url - this will print it with less spaces and show ge instead of >\n * formula - this will print it so it can be utilized in formula\n * so it will show > instead of ge.\n * @param {Function} translator A function which accepts an object and returns the\n * translated string. The objects shape is:\n * - {String} key: the translation key.\n * - {Object} substitutions: The substitutions passed along to the translator\n * for dynamic translations.\n * \n * @returns {String}\n */\nexport function generateFilterText (filters, printType = HUMAN_READABLE, translator) {\n if (!validPrintTypes[printType]) {\n throw `${printType} is not a valid print type.`;\n }\n\n const showExcessSpacing = isHumanReadable(printType);\n\n filters = filterActiveFilters(filters);\n\n return filters\n .reduce((agg, { expressions, combine_type }) => {\n if (agg) {\n agg += ` ${handleTranslate(printType, 'and', translator)} `;\n }\n\n // [FUTURUEHACK] combine_custom exists but is not yet implemented to work\n if (combine_type === 'custom') {\n throw 'This functionality has not yet been implemented';\n }\n\n if (expressions.length > 1) {\n agg += showExcessSpacing ? '( ' : '(';\n }\n\n expressions.forEach((exp, expIndex) => {\n if (expIndex > 0) {\n const translatedOp = combine_type === 'and'\n ? handleTranslate(printType, 'and', translator)\n : handleTranslate(printType, 'or', translator);\n agg += ` ${translatedOp} `;\n }\n\n const rhsLength = Array.isArray(exp.rhs) ? exp.rhs.length : 1;\n if (filters.length > 1 || expressions.length > 1 || rhsLength > 1) {\n agg += showExcessSpacing ? '( ' : '(';\n }\n\n agg += generateFilterExpressionText(exp, printType, translator);\n\n if (filters.length > 1 || expressions.length > 1 || rhsLength > 1) {\n agg += showExcessSpacing ? ' )' : ')';\n }\n });\n\n if (expressions.length > 1) {\n agg += showExcessSpacing ? ' )' : ')';\n }\n\n return agg;\n }, '');\n}\n\n/**\n * Get only slice filters from a filter array.\n * @param {Object[]} filters the filters\n * @param {Object} opts\n * @param {String} opts.type the type we want to filter slice or group\n * @param {Boolean} opts.isValid set to true to only get valid filters that have rhs defined\n * \n * @returns {Object[]}\n */\nfunction filterFilters(filters, opts) {\n return filters.reduce((validFilters, filter) => {\n if (filter.type === opts.type) {\n validFilters.push({\n ...filter,\n expressions: opts.isValid\n ? filter.expressions.filter(({lhs, rhs, op}) =>\n (lhs && op && rhs !== null && rhs !== undefined)\n )\n : filter.expressions\n });\n }\n return validFilters;\n }, []);\n}\n\n/**\n * Get only slice filters from a filter array.\n * @param {Object[]} filters the filters\n * @param {Object} opts\n * @param {Boolean} opts.isValid filters so its only valid filters that have rhs defined\n * \n * @returns {Object[]}\n */\nexport function getSliceFilters(filters, opts={}) {\n return filterFilters(filters, { isValid: !!opts.isValid, type: 'slice' });\n}\n\n/**\n * Get only group filters from a filter array.\n * @param {Object[]} filters the filters\n * @param {Object} opts\n * @param {Boolean} opts.isValid filters so its only valid filters that have rhs defined\n * \n * @returns {Object[]}\n */\nexport function getGroupFilters(filters, opts={}) {\n return filterFilters(filters, { isValid: !!opts.isValid, type: 'group' });\n}\n\n/**\n * Get the lhs column for each filter.\n * @param {Object[]} filters \n *\n * @returns {Column/RequestColumn[]}\n */\nexport function getLHSColumns(filters) {\n return filters.reduce((columns, {expressions}) => {\n expressions.forEach(({lhs}) => {\n columns.push(lhs);\n });\n return columns;\n },[]);\n}\n\n/**\n * Update lhs column or remove expression based on updateRemoveFunc.\n * @param {Object[]} filters\n * @param {Function} updateRemoveFunc\n *\n * @returns {Object[]}\n */\nexport function updateRemoveFilterBasedOnLHS(filters, updateRemoveFunc) {\n return filters.reduce((updatedFilters, filter) => {\n let expressions = filter.expressions.reduce((updatedExpressions, expression) => {\n let updatedLHS = updateRemoveFunc(expression.lhs);\n if (updatedLHS) {\n updatedExpressions.push({ ...expression, lhs: updatedLHS });\n }\n return updatedExpressions;\n }, []);\n\n if (expressions.length) {\n updatedFilters.push({ ...filter, expressions });\n }\n\n return updatedFilters;\n }, []);\n}\n","import { useEffect, useState } from 'react';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport useLocale from 'Common/hooks/useLocale';\nimport Filters from 'Common/types/Filters/Filters';\nimport formatFiltersForRequest from 'Common/util/formatFiltersForRequest';\nimport { filterActiveFilters } from 'Common/components/FilterBuilderText/FilterBuilderUtils';\nimport ParamTypes from 'Common/util/ParamTypes';\nimport { paramTest } from 'Common/util/ParamTypes/ParamTypes';\n\nconst paramTypes = ParamTypes.shape({\n sliceFilters: Filters.sliceFiltersParamType,\n groupFilters: Filters.groupFiltersParamType,\n dataService: ParamTypes.shape({\n getMultipleColumnConfigs: ParamTypes.func.isRequired,\n getMultipleCategoryValueConfigs: ParamTypes.func.isRequired,\n }).isRequired,\n});\n\nexport default function useFormattedFilters(parameters) {\n paramTest(parameters, paramTypes, 'useFormattedFilters');\n\n const {\n sliceFilters,\n groupFilters,\n dataService,\n } = parameters;\n\n const translator = useTranslator();\n const locale = useLocale();\n\n const [ formattedFilters, setFormattedFilter ] = useState([]);\n\n useEffect(() => {\n const abortSignal = { aborted: false };\n\n async function run() {\n if (!sliceFilters && !groupFilters) {\n // No filters; skip the rest.\n return;\n }\n\n const filters = { slice: sliceFilters, group: groupFilters };\n const filterColumnNames = Filters.getColumnsFromFilters(filters);\n const columnConfigs = await dataService.getMultipleColumnConfigs(filterColumnNames);\n const filterCategoryValueNames = Filters.getCategoryValuesFromFilters(filters);\n const categoryValueConfigs = await dataService.getMultipleCategoryValueConfigs(filterCategoryValueNames); \n const filtersWithDisplayValues = Filters.convertToDisplayValues(\n filters,\n columnConfigs,\n categoryValueConfigs,\n translator,\n locale\n );\n\n if (abortSignal.aborted) {\n return;\n }\n\n setFormattedFilter(filterActiveFilters(formatFiltersForRequest(filtersWithDisplayValues)));\n }\n\n run();\n\n // Cleanup\n return () => {\n abortSignal.aborted = true;\n };\n }, [ sliceFilters, groupFilters, dataService, translator, locale ]);\n\n return formattedFilters;\n}\n","import useKpiWidgetData from './useKpiWidgetData';\nimport ParamTypes from 'Common/util/ParamTypes';\nimport { paramTest } from 'Common/util/ParamTypes/ParamTypes';\nimport TimeRange from 'Common/types/TimeRange/TimeRange';\nimport explorationPathParamType from 'Common/types/stf/explorationPathParamType';\nimport { useEffect, useMemo, useState, useCallback } from 'react';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport useKpiWidgetInitialization from './useKpiWidgetInitialization';\nimport getPrimaryDescription from \"Common/components/TimeRangeSelector/helpers/getPrimaryDescription\";\nimport getSecondaryDescription from \"Common/components/TimeRangeSelector/helpers/getSecondaryDescription\";\nimport useKpiWidgetPrintStatus from './useKpiWidgetPrintStatus';\nimport { getDataUpdateInterval } from 'Common/hooks/requests/useRepeatingRequest';\nimport useTimeRangeData, { TIME_RANGE_PRIMARY_DETAILS, TIME_RANGE_SECONDARY_DETAILS } from 'Common/components/TimeRangeSelector/hooks/useTimeRangeData';\nimport useFormattedFilters from 'Common/hooks/useFormattedFilters';\n\nconst extractFiltersFromExplorationPath = (explorationPath) => {\n let filters = {};\n\n if (explorationPath?.group_filter) {\n filters.group = explorationPath.group_filter;\n }\n\n if (explorationPath?.slice_filter) {\n filters.slice = explorationPath.slice_filter;\n }\n\n if (Object.keys(filters) === 0) {\n // There were either no filters, or no exploration path. Return undefined.\n return undefined;\n }\n else {\n return filters;\n }\n};\n\nconst paramTypes = ParamTypes.shape({\n widgetStf: ParamTypes.shape({\n exploration_path: explorationPathParamType,\n rangeSelection: TimeRange.timeRangeParamType,\n hideLiveControls: ParamTypes.bool,\n showLiveControlsOnImmutablePages: ParamTypes.bool,\n }),\n setWidgetStf: ParamTypes.func.isRequired,\n setWidgetPrintStatus: ParamTypes.func.isRequired,\n setWidgetLiveControlsVisibility: ParamTypes.func.isRequired,\n dataService: ParamTypes.shape({\n getKpiWidgetData: ParamTypes.func.isRequired,\n getColumnConfig: ParamTypes.func.isRequired,\n getColumnHelpText: ParamTypes.func.isRequired,\n getTimeRangePrimaryDetails: ParamTypes.func.isRequired,\n getTimeRangeSecondaryDetails: ParamTypes.func.isRequired,\n }).isRequired,\n pageTimeRange: TimeRange.timeRangeParamType,\n pageExplorationPath: explorationPathParamType,\n reportHierarchyNode: ParamTypes.shape({\n name: ParamTypes.string,\n displayName: ParamTypes.string\n }),\n isPrint: ParamTypes.bool.isRequired,\n mutable: ParamTypes.bool.isRequired,\n areLiveControlsVisible: ParamTypes.bool.isRequired,\n});\n\nconst useKpiController = (parameters) => {\n paramTest(parameters, paramTypes, 'useKpiController');\n\n const {\n widgetStf,\n setWidgetStf,\n setWidgetPrintStatus,\n setWidgetLiveControlsVisibility,\n areLiveControlsVisible,\n dataService,\n pageTimeRange,\n pageExplorationPath,\n reportHierarchyNode,\n isPrint,\n isLayoutModeActive,\n duplicateWidget,\n mutable\n } = parameters;\n\n const {\n isInitialized,\n liveControlOptions,\n } = useKpiWidgetInitialization({ dataService });\n\n const translator = useTranslator();\n\n const [columnConfig, setColumnConfig] = useState({});\n\n // livecontrol goodies\n const supportsLiveControls = useMemo(() => {\n return !widgetStf.hideLiveControls \n && (!!widgetStf.showLiveControlsOnImmutablePages || mutable);\n }, [widgetStf, mutable]);\n\n const toggleShowLiveControls = useCallback(() => {\n setWidgetLiveControlsVisibility(!areLiveControlsVisible);\n }, [ areLiveControlsVisible, setWidgetLiveControlsVisibility ]);\n\n const rawSliceFilters = widgetStf.exploration_path.slice_filter;\n\n const filters = useMemo(() => {\n if (!rawSliceFilters) {\n return {\n slice: {\n combine_type: 'and',\n expressions: [],\n }\n };\n }\n else {\n return {\n slice: rawSliceFilters\n };\n }\n }, [rawSliceFilters]);\n\n const setSliceFilters = (newFilters) => {\n setWidgetStf((stf) => ({\n ...stf,\n exploration_path: {\n ...stf.exploration_path,\n slice_filter: newFilters,\n },\n }));\n };\n\n const formattedFilters = useFormattedFilters({\n sliceFilters: filters.slice,\n dataService,\n });\n\n const followPageTimeRange = !widgetStf.rangeSelection;\n const setTimeRange = (rs) => {\n setWidgetStf((stf) => ({\n ...stf,\n rangeSelection: rs,\n }));\n };\n\n const widgetHierarchyNode = widgetStf?.exploration_path?.asset_control?.root;\n const followAppBarHierarchyNode = !widgetHierarchyNode;\n const mergedHierarchyNode = widgetHierarchyNode || reportHierarchyNode?.name;\n\n const setHierarchyNode = useCallback((newHierarchyNode) => {\n setWidgetStf((stf) => {\n let newExplorationPath = {\n ...stf.exploration_path\n };\n if (newHierarchyNode) {\n newExplorationPath.asset_control = {\n root: newHierarchyNode,\n };\n }\n else {\n delete newExplorationPath.asset_control;\n }\n\n return {\n ...stf,\n exploration_path: newExplorationPath,\n };\n });\n }, [setWidgetStf]);\n\n const widgetExplorationPath = widgetStf.exploration_path;\n\n const widgetField = widgetStf?.exploration_path?.field_set?.fields?.[0];\n const field = widgetField || null;\n\n useEffect(() => {\n let isMounted = true;\n\n async function getColumnConfig() {\n const config = await dataService.getColumnConfig(field.name, field.channel);\n const helpText = await dataService.getColumnHelpText(field.name, field.channel);\n\n // Just tack on the help text to the config\n // Additionally, if the KPIWidget has been unmounted in the time it took to await those\n // previous functions then don't set the state here since it will be setting the state\n // on an unmounted component and flagged as a memory leak\n if (isMounted) {\n // Just tack on the help text to the config\n setColumnConfig({\n ...config,\n helpText,\n });\n }\n }\n\n getColumnConfig();\n\n // useEffect cleanup function to track if we're still mounted after async awaits\n return () => { isMounted = false; };\n }, [field.name, field.channel, dataService]);\n\n const pageFilters = useMemo(() => {\n return extractFiltersFromExplorationPath(pageExplorationPath);\n }, [ pageExplorationPath ]);\n\n const widgetFilters = useMemo(() => {\n return extractFiltersFromExplorationPath(widgetExplorationPath);\n }, [ widgetExplorationPath ]);\n\n const setMetric = (metric) => {\n paramTest(metric, ParamTypes.shape({\n name: ParamTypes.string.isRequired,\n channel: ParamTypes.string.isRequired,\n }).isRequired, 'setMetric.metric');\n\n setWidgetStf((stf) => {\n return {\n ...stf,\n exploration_path: {\n ...stf.exploration_path,\n field_set: {\n ...stf.exploration_path.field_set,\n fields: [{\n name: metric.name,\n channel: metric.channel,\n }],\n },\n },\n };\n });\n };\n\n // Disable the update interval if the widget is in print view\n const widgetUpdateTimeInterval = isPrint ? null : widgetStf.updateTimeInterval;\n \n const dataRequest = useKpiWidgetData({\n hierarchyNode: mergedHierarchyNode,\n field,\n widgetFilters,\n pageFilters,\n timeRange: widgetStf.rangeSelection || pageTimeRange,\n getKpiWidgetData: dataService.getKpiWidgetData,\n updateInterval: getDataUpdateInterval(widgetUpdateTimeInterval),\n });\n\n const defaultTitle = columnConfig.displayName || '';\n let title = widgetStf.title;\n if (!title && widgetStf.titleKey) {\n title = translator(widgetStf.titleKey);\n }\n\n const setTitle = (newTitle) => {\n setWidgetStf((stf) => ({\n ...stf,\n title: newTitle,\n }));\n };\n\n const tooltipContent = useMemo(() => {\n return {\n displayName: columnConfig.displayName || '',\n description: columnConfig.helpText || '',\n trendDescription: translator('widget.kpi.trend_tooltip'),\n };\n }, [columnConfig, translator]);\n\n const timeRangeRequests = useTimeRangeData({\n getTimeRangePrimaryDetails: dataService.getTimeRangePrimaryDetails,\n getTimeRangeSecondaryDetails: dataService.getTimeRangeSecondaryDetails,\n hierarchyNode: mergedHierarchyNode,\n timeRange: widgetStf.rangeSelection,\n updateInterval: getDataUpdateInterval(widgetUpdateTimeInterval),\n });\n\n const timeRangeDescription = useMemo(() => {\n const primaryDetails = timeRangeRequests[TIME_RANGE_PRIMARY_DETAILS]?.response;\n const secondaryDetails = timeRangeRequests[TIME_RANGE_SECONDARY_DETAILS]?.response;\n\n if (primaryDetails && translator) {\n const primary = getPrimaryDescription({\n dimensionDetailsDisplayName: primaryDetails?.dimensionDetails.displayName,\n dimensionDetailsIsMixed: primaryDetails?.dimensionDetails.isMixed || false,\n timeRangeStart: primaryDetails?.timeRange.start,\n timeRangeEnd: primaryDetails?.timeRange.end,\n timeRangeSameDimensionValue: primaryDetails?.timeRange.sameDimensionValue || false,\n timeRangeUnits: primaryDetails?.timeRange.units,\n timeRangeProductionDayOffset: primaryDetails?.timeRange.productionDayOffset,\n atEndOfData: !!secondaryDetails?.atEndOfData,\n locale: primaryDetails.locale,\n translator: translator,\n });\n\n const secondary = getSecondaryDescription({\n range: secondaryDetails?.range,\n timeRangeStart: primaryDetails?.timeRange.start,\n timeRangeEnd: primaryDetails?.timeRange.end,\n timeRangeSameDimensionValue: primaryDetails?.timeRange.sameDimensionValue || null,\n timeRangeUnits: primaryDetails?.timeRange.units || '',\n originDay: primaryDetails?.originDay || '',\n locale: primaryDetails?.locale,\n translator: translator,\n });\n\n return {\n primary,\n secondary\n };\n }\n else {\n return null;\n }\n\n }, [timeRangeRequests, translator]);\n\n // Keeps the print status updated\n useKpiWidgetPrintStatus({\n // Do not update print status when we're already in print view.\n disabled: isPrint,\n setWidgetPrintStatus,\n kpiWidgetDataRequest: dataRequest,\n timeRangePrimaryRequest: timeRangeRequests[TIME_RANGE_PRIMARY_DETAILS],\n timeRangeSecondaryRequest: timeRangeRequests[TIME_RANGE_SECONDARY_DETAILS],\n });\n\n return {\n isInitialized,\n metric: field.name,\n setMetric,\n filters,\n setSliceFilters,\n formattedFilters,\n timeRange: widgetStf.rangeSelection,\n setTimeRange,\n followPageTimeRange,\n followAppBarHierarchyNode,\n hierarchyNode: widgetHierarchyNode,\n setHierarchyNode,\n defaultTitle,\n title,\n setTitle,\n tooltipContent,\n metricOptions: liveControlOptions?.metricOptions,\n hierarchyNodeOptions: liveControlOptions?.hierarchyNodeOptions || [],\n filterOptions: liveControlOptions?.filterOptions,\n dataRequest,\n timeRangeDescription,\n shouldShowFilterText: widgetStf.shouldShowFilterText,\n showLiveControls: areLiveControlsVisible,\n supportsLiveControls,\n toggleShowLiveControls,\n isLayoutModeActive,\n duplicateWidget,\n };\n};\n\nexport default useKpiController;\n","import { useEffect } from 'react';\nimport RequestState from 'Common/types/RequestState/RequestState';\n\nexport default function useKpiWidgetPrintStatus({\n disabled = false,\n setWidgetPrintStatus,\n kpiWidgetDataRequest,\n timeRangePrimaryRequest,\n timeRangeSecondaryRequest,\n}) {\n // Effect to keep the widget's print status up to date.\n useEffect(() => {\n if (disabled) {\n return;\n }\n\n setWidgetPrintStatus(RequestState.areAllRequestsCompleted([\n kpiWidgetDataRequest,\n timeRangePrimaryRequest,\n timeRangeSecondaryRequest,\n ]));\n }, [ disabled, kpiWidgetDataRequest, timeRangePrimaryRequest, timeRangeSecondaryRequest, setWidgetPrintStatus ]);\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Checkbox from 'Common/components/Checkbox';\nimport EnterpriseHierarchySelectList from 'Common/components/EnterpriseHierarchySelectList';\nimport { useTranslator } from 'Common/hooks/useTranslation';\n\nconst StyledCheckbox = styled(Checkbox)`\n padding-left: 10px;\n`;\n\nfunction EnterpriseHierarchyControl({\n hierarchySelection,\n onHierarchySelectionChange,\n\n hierarchyList,\n onlyAssets,\n\n collapseHierarchyValue,\n showCollapseHierarchyCheckbox,\n onCollapseHierarchyChange,\n\n followAppBar,\n showFollowAppBarCheckbox,\n onFollowAppBar,\n}) {\n const translator = useTranslator();\n\n const collapseHierarchyLiteral = translator('control.common.collapse_hierarchy');\n const searchAssetLiteral = translator('control.common.search_asset_hierarchy');\n const loadingLiteral = translator('loading_literal');\n const filterboxNoSelectionsCopyLiteral = translator('filterbox_no_selections_copy');\n const followAppBarCheckboxText = translator('control.common.follow_app_bar');\n \n return (\n \n {showFollowAppBarCheckbox && (\n \n )}\n {showCollapseHierarchyCheckbox && (\n \n )}\n \n \n );\n}\n\nEnterpriseHierarchyControl.propTypes = {\n hierarchySelection: PropTypes.string,\n onHierarchySelectionChange: PropTypes.func.isRequired,\n\n hierarchyList: PropTypes.arrayOf(\n PropTypes.shape({\n displayName: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n iconClass: PropTypes.string.isRequired,\n level: PropTypes.number.isRequired,\n })\n ),\n onlyAssets: PropTypes.bool,\n\n \n collapseHierarchyValue: PropTypes.bool,\n showCollapseHierarchyCheckbox: PropTypes.bool,\n onCollapseHierarchyChange: PropTypes.func,\n\n followAppBar: PropTypes.bool,\n showFollowAppBarCheckbox: PropTypes.bool,\n onFollowAppBar: PropTypes.func,\n};\n\nEnterpriseHierarchyControl.defaultProps = {\n onlyAssets: false,\n showCollapseHierarchyCheckbox: false,\n showFollowAppBarCheckbox: false,\n};\n\nexport default EnterpriseHierarchyControl;\n","import EnterpriseHierarchyControl from './EnterpriseHierarchyControl';\n\nexport default EnterpriseHierarchyControl;\n","import React, {\n useMemo,\n useState,\n useCallback,\n useImperativeHandle,\n forwardRef,\n} from 'react';\nimport styled from 'styled-components';\nimport Button from 'Common/components/Button';\nimport PropTypes from 'prop-types';\nimport { useTranslator } from 'Common/hooks/useTranslation';\n\nfunction useValidationState({\n initialValue,\n validate,\n detectChanges,\n translator,\n}) {\n const [ modifiedValue, setModifiedValue ] = useState(null);\n \n // Let the internal value follow initialValue until the user makes changes.\n const value = modifiedValue === null ? initialValue : modifiedValue;\n\n const isDirty = useMemo(() => {\n return detectChanges(initialValue, value);\n }, [ detectChanges, initialValue, value ]);\n\n const handleReset = useCallback(() => {\n setModifiedValue(null);\n }, []);\n\n const validationErrors = useMemo(() => {\n return validate(value, translator);\n }, [ validate, value, translator ]);\n\n const isValid = !validationErrors;\n\n return {\n initialValue: initialValue,\n value: value,\n setValue: setModifiedValue,\n isDirty: isDirty,\n isValid: isValid,\n reset: handleReset,\n validationErrors: validationErrors,\n };\n}\n\nconst Root = styled.div`\n display:flex;\n flex-direction: column;\n min-height: 1px;\n`;\n\nconst ButtonContainer = styled.div`\n box-sizing: border-box;\n min-height: 44px;\n min-width: 44px;\n display: flex;\n align-items: center;\n flex: 0 0 auto;\n margin-right: 12px;\n`;\n\nconst ApplyContainer = styled(ButtonContainer)`\n justify-content: flex-end;\n flex: 0 0 auto;\n`;\n\n/**\n * Utility component for controls with an Apply button that can optionally have\n * invalid configuration.\n *\n * Primary Responsibilities:\n *\n * - Starting with an initial value, stores the modified (i.e. \"draft\") value\n * of an editor.\n * - Performs validation (if provided) on the current value of an editor.\n * - Provides an \"Apply\" button for the user to submit valid changes.\n * - Allows a parent component to notify (via `ref`) about an attempt to close\n * the control. If the value is invalid, a dialog will be displayed allowing\n * the user to cancel changes or continue editing.\n *\n * @param {Object} props\n * @param {Object} props.initialValue The starting value for the editor.\n * @param {Function} props.onApply Called when changes are to be applied, always\n * supplied with a valid value.\n * @param {Function} props.onCancel Called when changes are dismissed and the\n * control should be closed.\n * @param {Function} [props.validate] Validate the current editor value and\n * return any validation errors. Returning `null` from this function\n * indicates the value is valid.\n * @param {Function} [props.detectChanges] Provided with the initialValue and\n * the current value. Return true if there are changes. Defaults to doing\n * a strict equality (`===`) check between `initialValue` and `value`.\n * @param {Function} props.renderControl Renders the editor.\n * { value, validationErrors, onChange } are provided.\n * @param {Function} [props.renderInvalidDialog] Renders a dialog informing the\n * user of an invalid value.\n * { value, validationErrors, onContinue, onCancel } are provided.\n *\n * @param {Object} ref An attempt to close the live control can be triggered\n * by a parent component using `ref.onClose()`. This function will return\n * true if the value is valid and can be closed. Otherwise, the invalid\n * dialog is displayed using `renderInvalidDialog`.\n */\nconst ValidatedLiveControl = forwardRef((props, ref) => {\n const {\n initialValue,\n onApply,\n onCancel,\n validate,\n detectChanges,\n renderControl,\n renderInvalidDialog,\n } = props;\n\n const translator = useTranslator();\n\n const [ isDialogVisible, setIsDialogVisible ] = useState(false);\n\n const showDialog = useCallback(() => {\n setIsDialogVisible(true);\n }, []);\n\n const hideDialog = useCallback(() => {\n setIsDialogVisible(false);\n }, []);\n\n const {\n value,\n setValue,\n isDirty,\n isValid,\n reset,\n validationErrors,\n } = useValidationState({\n initialValue: initialValue,\n validate: validate,\n detectChanges: detectChanges,\n translator: translator,\n });\n\n const handleChange = useCallback((event) => {\n setValue(event.target.value);\n }, [ setValue ]);\n\n const handleApply = useCallback(() => {\n reset();\n hideDialog();\n onApply({\n target: {\n value: value,\n },\n });\n }, [ reset, hideDialog, onApply, value ]);\n\n const handleCancel = useCallback(() => {\n reset();\n hideDialog();\n onCancel();\n }, [ reset, hideDialog, onCancel ]);\n\n const handleOuterClose = useCallback(() => {\n if (!isValid) {\n showDialog();\n return false;\n }\n\n if (!isDirty) {\n return true;\n }\n\n onApply({\n target: {\n value: value,\n },\n });\n\n reset();\n\n return true;\n }, [ isValid, showDialog, isDirty, value, onApply, reset ]);\n\n useImperativeHandle(ref, () => ({\n onClose: () => {\n return handleOuterClose();\n },\n }), [ handleOuterClose ]);\n\n return (\n \n {(isDialogVisible && renderInvalidDialog) ?\n (\n renderInvalidDialog({\n value,\n validationErrors,\n onContinue: hideDialog,\n onCancel: handleCancel,\n })\n )\n : null\n }\n {renderControl({\n value,\n validationErrors,\n onChange: handleChange\n })}\n \n \n {translator('apply_literal')}\n \n \n \n );\n});\n\nValidatedLiveControl.displayName = 'ValidatedLiveControl';\n\nValidatedLiveControl.propTypes = {\n initialValue: PropTypes.any.isRequired,\n onApply: PropTypes.func.isRequired,\n onCancel: PropTypes.func.isRequired,\n validate: PropTypes.func,\n detectChanges: PropTypes.func,\n renderControl: PropTypes.func.isRequired,\n renderInvalidDialog: PropTypes.func,\n};\n\nValidatedLiveControl.defaultProps = {\n validate: (value) => null,\n detectChanges: (initialValue, value) => initialValue !== value,\n};\n\nexport default ValidatedLiveControl;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport InlineError from 'Common/components/Error/InlineError';\nimport { arrayJoin } from 'Common/util/language/array';\n\nconst StyledInlineError = styled(InlineError)`\n padding-top: 4px;\n`;\n\nfunction DurationFieldError({\n error,\n ...otherProps\n}) {\n const renderError = (type) => {\n let errorJsx = null;\n\n if (error[type]) {\n errorJsx = (\n \n {error[type]}\n \n );\n }\n\n return errorJsx;\n };\n\n return (\n \n {arrayJoin(\n ['h', 'm', 's'].map(renderError).filter(err => err),\n (
)\n )}\n \n );\n}\n\nDurationFieldError.propTypes = {\n error: PropTypes.shape({\n h: PropTypes.node,\n m: PropTypes.node,\n s: PropTypes.node,\n }),\n};\n\nexport default DurationFieldError;\n","/**\n * Map an array through a function, and then filter out the falsy values.\n */\nexport function filterMap(arr, fn, scope) {\n if (typeof fn !== \"function\") {\n throw new TypeError();\n }\n\n var rv = [];\n var i;\n var len = arr.length;\n for (i = 0; i < len; i++) {\n if (arr.hasOwnProperty(i)) {\n var r = fn.call(scope || null, arr[i], i, arr);\n if (r) { rv.push(r); }\n }\n }\n\n return rv;\n}\n\n/**\n * Convert the argument to an instance of Array\n *\n * @param {Any} arg The thing to be converted. If it has a length property, its members\n * will be added to the array and returned. If `arg` doesn't have a length property,\n * `[arg]` will be returned.\n *\n * @returns {Array}\n */\nexport function toArray(arg) {\n var rv = [];\n\n if (arg === undefined || arg === null) {\n // Do nothing, we'll return the empty array.\n }\n else if (arg.length === undefined) {\n rv.push(arg);\n }\n // NodeLists and such in IE8 are not JS Objects, and will fail this check\n else if (arg instanceof Object) {\n rv = Array.prototype.slice.call(arg);\n }\n else {\n var i;\n for (i = 0; i < arg.length; ++i) {\n rv.push(arg[i]);\n }\n }\n return rv;\n}\n\n/**\n * Similar to Array.prototype.join, arrayJoin intermixes joiner between each item in the\n * array, but unlike Array.prototype.join the output is a new array with those added items\n * instead of a string.\n *\n * Example: arrayJoin([1, 2, 3], '\\n')\n * Returns: [1, '\\n', 2, '\\n', 3]\n *\n * @param {Array} array\n * @param {Any} joiner\n *\n * @returns {Array}\n */\nexport function arrayJoin(array, joiner) {\n if (array.length < 2) {\n return array;\n }\n else {\n const joinedArray = [];\n\n array.forEach((item, index) => {\n joinedArray.push(item);\n\n if (index !== array.length - 1) {\n joinedArray.push(joiner);\n }\n });\n\n return joinedArray;\n }\n}\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport { Body5 } from 'Common/components/typography';\nimport NumberField from 'Common/components/NumberField';\nimport Dropdown from '../Dropdown/Dropdown';\nimport SelectDropdownButton from '../SelectList/SelectDropdownButton';\nimport { formatNumber } from 'Common/util/format';\nimport DurationFieldError from './internal/DurationFieldError';\n\nconst DropdownErrorContainer = styled.div`\n /* Make sure it doesn't stretch out the container when an error\n is shown.\n */\n width: 150px;\n`;\n\nconst FieldContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nconst NumberFieldContainer = styled.div`\n width: ${({minFractionDigits}) => 2.5 + minFractionDigits}em;\n`;\n\nconst DropdownContent = styled.div`\n padding: 8px;\n`;\n\nconst FieldsRoot = styled.div`\n display: flex;\n`;\n\nconst Label = styled(Body5)`\n padding-left: 1px;\n padding-right: 6px;\n color: ${({theme}) => theme.colors.palette.grey.emperor};\n`;\n\nfunction getPrecision(precision, type) {\n // The precision prop only applies to the seconds field\n return type === 's' ? precision : 0;\n}\n\nexport default function DurationField({\n name,\n value,\n onChange,\n labels,\n precision,\n error,\n placeholderText,\n}) {\n const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n const handleChange = (event) => {\n const {\n value: eventValue,\n name: eventName,\n } = event.target;\n\n const newValue = {\n ...value,\n [eventName]: eventValue,\n };\n\n onChange({\n target: {\n name,\n value: newValue,\n },\n });\n };\n\n const renderField = (type) => {\n const minFractionDigits = getPrecision(precision, type);\n\n const field = (\n \n \n \n \n \n \n );\n\n return field;\n };\n\n const formatHmsValue = (type) => {\n return formatNumber(value?.[type] || 0, {\n minDigits: 2,\n places: getPrecision(precision, type),\n }) + labels[type];\n };\n\n const hasValue = Number.isFinite(value.h) || Number.isFinite(value.m) || Number.isFinite(value.s);\n\n return (\n \n {\n setIsDropdownOpen(false);\n }}\n renderContent={() => (\n \n \n {['h', 'm', 's'].map(renderField)}\n \n {error && (\n \n \n \n )}\n \n )}\n >\n {hasValue\n ? (\n setIsDropdownOpen(true)}\n >\n {formatHmsValue('h')} \n {formatHmsValue('m')} \n {formatHmsValue('s')}\n )\n : (\n setIsDropdownOpen(true)}\n isPlaceholderText\n >\n {placeholderText}\n )}\n \n {error && (\n \n )}\n \n );\n}\n\nDurationField.propTypes = {\n name: PropTypes.string,\n value: PropTypes.shape({\n h: PropTypes.number,\n m: PropTypes.number,\n s: PropTypes.number,\n }),\n onChange: PropTypes.func,\n labels: PropTypes.shape({\n h: PropTypes.string,\n m: PropTypes.string,\n s: PropTypes.string,\n }).isRequired,\n error: PropTypes.shape({\n h: PropTypes.node,\n m: PropTypes.node,\n s: PropTypes.node,\n }),\n precision: PropTypes.number,\n placeholderText: PropTypes.string,\n};\n\nDurationField.defaultProps = {\n value: {\n h: 0,\n m: 0,\n s: 0,\n },\n onChange: () => { },\n precision: 0,\n placeholderText: ''\n};\n","import DurationField from './DurationField';\n\nexport default DurationField;\n","import React, { useState, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\n\nimport FieldBuilderSelect from 'Common/components/FieldBuilder/FieldBuilderSelect';\nimport FieldSelectControl from 'Common/components/LiveControls/FieldSelectControl';\nimport DurationField from 'Common/components/DurationField';\nimport NumberField from 'Common/components/NumberField';\nimport BasicSelectField from 'Common/components/BasicSelectField/BasicSelectField';\nimport ButtonBase from 'Common/components/Button/ButtonBase';\nimport Dropdown from 'Common/components/Dropdown/Dropdown';\nimport SelectDropdownButton from 'Common/components/SelectList/SelectDropdownButton';\nimport Icon from 'Common/components/Icon';\nimport { useTranslator } from 'Common/hooks/useTranslation';\n\nconst RowContainer = styled.div`\n box-sizing: border-box;\n display: flex;\n align-items: center;\n padding: 3px 0;\n @media (hover: none) and (pointer: coarse) {\n padding: 10px 0;\n }\n`;\n\nexport const ExpressionInfoContainer = styled.div`\n flex: 1 1 auto;\n display: flex;\n min-width: 1px;\n`;\n\nexport const FieldContainer = styled.div`\n flex: 0 1 39%;\n display: flex;\n flex-direction: column;\n min-width: 44px;\n padding: 0px 3px;\n`;\n\nexport const OperatorContainer = styled.div`\n flex: 0 .5 22%;\n display: flex;\n flex-direction: column;\n min-width: 44px;\n padding: 0px 3px;\n`;\n\nconst DeleteButtonWidthStyle = css`\n width: 24px;\n height: 24px;\n @media (hover: none) and (pointer: coarse) {\n width: 44px;\n }\n`;\n\nexport const DeleteButtonContainer = styled.div`\n flex: 0 0 auto;\n ${DeleteButtonWidthStyle}\n`;\n\nconst DeleteButton = styled(ButtonBase)`\n flex: 0 0 auto;\n ${DeleteButtonWidthStyle}\n display: flex;\n justify-content: center;\n align-items: center;\n\n /* Touch Target */\n :before {\n border-radius: 50%;\n background-color: transparent;\n transition: background-color 300ms;\n }\n\n :hover {\n :before {\n background-color: rgba(0,0,0,0.05);\n }\n }\n\n :active {\n :before {\n background-color: rgba(0,0,0,0.1);\n }\n }\n\n :not(:hover):focus {\n :before {\n background-color: rgba(0,0,0,0.05);\n }\n }\n`;\n\nconst DeleteButtonIcon = styled(Icon).attrs({\n type: 'vorne',\n iconName: 'chip-delete',\n})`\n font-size: 12px;\n color: ${props => props.theme.colors.darkText.mediumEmphasis};\n`;\n\n// check if the user has selected a metric and \"is 0\" or \"is not 0\", users are only allowed to\n// use metric equality operators to compare to 0\nfunction didUserSelectMetricComparedToZero(opValue, fieldType) {\n return fieldType === 'metric' && (opValue === 'eq' || opValue === 'ne');\n}\n\nfunction isDuration(type) {\n return type === 'time_span';\n}\n\nexport function ExpressionRow({\n name,\n lhs,\n op,\n rhs,\n onChange,\n onDeleteRow,\n categoryOptions,\n metricOptions,\n categoryValueOptions,\n allowDelete,\n error,\n}) {\n const translator = useTranslator();\n\n const categoryOperators = [\n {value:'eq', displayName:'='},\n {value:'ne', displayName:'≠'},\n ];\n\n const metricOperators = [\n {value:'eq', displayName: translator('filter.is_zero')},\n {value:'ne', displayName: translator('filter.is_not_zero')},\n {value:'gt', displayName:'>'},\n {value:'ge', displayName:'≥'},\n {value:'lt', displayName:'<'},\n {value:'le', displayName:'≤'}\n ];\n const handleDeleteRow = useCallback(() => { onDeleteRow(name); }, [onDeleteRow, name]);\n\n // state for lhsPicker\n const [ isLHSPickerOpen, setIsLHSPickerOpen ] = useState(false);\n\n // state for rhsPicker\n const [ isRHSPickerOpen, setIsRHSPickerOpen ] = useState(false);\n\n const onRowChange = (e, { isCategoryValue = false } = {}) => {\n const { target } = e;\n let newValue = { lhs, op, rhs };\n\n if (target.name === 'op') {\n newValue[target.name] = target.value.value;\n // force rhs if comparing a metric using an equality operator\n if (didUserSelectMetricComparedToZero(target.value.value, lhs?.fieldType)) {\n newValue.rhs = 0;\n }\n // force rhs if changing from using equality operator\n else if (didUserSelectMetricComparedToZero(op, lhs?.fieldType)) {\n newValue.rhs = isDuration(lhs?.type)\n ? { h: null, m: null, s: null}\n : null;\n }\n }\n else if (isCategoryValue) {\n newValue[target.name] = target.value.map((val) => val.name);\n }\n else {\n newValue[target.name] = target.value;\n }\n\n onChange({\n target: {\n name: name,\n value: newValue,\n }\n });\n };\n\n const onPickerChangeClosePicker = (e) => {\n const { target } = e;\n if (target.name === 'lhs') {\n setIsLHSPickerOpen(false);\n }\n else if (target.name === 'rhs') {\n setIsRHSPickerOpen(false);\n }\n onRowChange(e);\n };\n\n const selectedFieldDisplayName = lhs\n ? lhs.displayName\n : translator(\"editors.filter.dropdown_placeholder\", {value: translator('field_literal').toLowerCase()});\n\n // determine which collection to search to find selected operator\n let operatorList = categoryOperators;\n if (lhs?.fieldType === 'metric') {\n operatorList = metricOperators;\n }\n\n const selectedOp = operatorList.find((operator) => {\n return operator.value === op;\n });\n\n // only show value field if not comparing metric using equality operators\n let showValueField = ! didUserSelectMetricComparedToZero(selectedOp.value, lhs?.fieldType);\n\n // if not showing the value field force rhs to be zero\n if (! showValueField) {\n rhs = 0;\n }\n\n let valueField = null;\n\n if (showValueField && lhs && lhs.fieldType === 'category_value') {\n const valueOptions = categoryValueOptions[lhs.name] || [];\n\n // Create a lookup table of display names for use in the dropdown to\n // prevent us from looping through the options list over and over\n // again to generate the list of display values.\n //\n const displayNameMap = valueOptions.reduce((acc, valueOption) => {\n return valueOption.entries.reduce((displayMap, entry) => {\n displayMap[entry.name] = entry.displayName;\n return displayMap;\n }, acc);\n }, {});\n\n const selectedValue = rhs;\n let selectedValueDisplayName = selectedValue.reduce((result, x) => {\n if (result) {\n result += ', ';\n }\n result += (displayNameMap[x] || translator('unknown_field_literal') );\n return result;\n }, '');\n\n if (selectedValue.length > 1) {\n selectedValueDisplayName = `(${selectedValue.length}) ${selectedValueDisplayName}`;\n }\n else if (selectedValue.length === 0) {\n selectedValueDisplayName = translator(\"editors.filter.dropdown_placeholder\", {value: translator('value_literal').toLowerCase()});\n }\n\n const fieldSelectListValue = rhs.reduce((acc, rhsValue) => {\n // filter out any values that no longer exist\n if (displayNameMap[rhsValue]) {\n acc.push({\n name: rhsValue,\n });\n }\n\n return acc;\n }, []);\n\n valueField = (\n { setIsRHSPickerOpen(false); }}\n renderContent={() =>{\n return ( onRowChange(e, { isCategoryValue: true })}\n />);\n }}\n >\n { setIsRHSPickerOpen(true); }}\n isPlaceholderText={selectedValue.length === 0}\n >\n {selectedValueDisplayName}\n \n \n );\n }\n else if (showValueField && isDuration(lhs?.type)) {\n valueField = (\n \n );\n }\n else if (showValueField && lhs && (lhs.type === 'double' || lhs.type == 'uint64' || lhs.type == 'id')) {\n let precision;\n\n if (lhs.type == 'uint64' || lhs.type == 'id' || lhs.subType === 'count') {\n precision = 0;\n }\n else if (lhs.subType == 'cycle' || lhs.subType == 'rate' || lhs.subType == 'rate_per_hour') {\n precision = 2;\n }\n else {\n precision = 1;\n }\n\n valueField = (\n \n );\n }\n else if (showValueField && lhs) {\n console.error(`Metric with mysterious type and subtype combo: type:${lhs.type} subType:${lhs.subType}`);\n valueField = 'Error: No Field Found';\n }\n\n const opName = selectedOp.displayKey ? translator(selectedOp.displayKey) : selectedOp.displayName;\n\n const renderDeleteButton = () => {\n if (allowDelete) {\n return (\n \n \n \n \n \n );\n }\n };\n\n return (\n \n \n \n { setIsLHSPickerOpen(false); }}\n renderContent={() => {\n return ();\n }}\n >\n { setIsLHSPickerOpen(true); }}\n >\n {selectedFieldDisplayName}\n \n \n \n \n \n \n \n {valueField}\n \n \n {renderDeleteButton()}\n \n );\n}\n\nExpressionRow.propTypes = {\n name: PropTypes.string.isRequired,\n lhs: PropTypes.shape({\n name: PropTypes.string.isRequired,\n channel: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n fieldType: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n subType: PropTypes.string,\n }).isRequired,\n op: PropTypes.string.isRequired,\n rhs: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.number,\n PropTypes.array,\n ]),\n onDeleteRow: PropTypes.func.isRequired,\n onChange: PropTypes.func.isRequired,\n categoryOptions: PropTypes.array,\n categoryValueOptions: PropTypes.object.isRequired,\n metricOptions: PropTypes.array,\n allowDelete: PropTypes.bool.isRequired,\n error: PropTypes.shape({\n rhs: PropTypes.any,\n }),\n};\n\nExpressionRow.defaultProps = {\n categoryOptions: [],\n metricOptions: [],\n allowDelete: true,\n};\n","import React, { useState, useCallback, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport BasicSelectField from 'Common/components/BasicSelectField/BasicSelectField.js';\nimport Button from 'Common/components/Button/Button.js';\nimport Dropdown from 'Common/components/Dropdown/Dropdown.js';\nimport FieldBuilderSelect from 'Common/components/FieldBuilder/FieldBuilderSelect';\nimport InfoCircle from 'Common/components/InfoCircle';\nimport NoDataMessage from 'Common/components/NoDataMessage/NoDataMessage.js';\nimport { useTranslator } from 'Common/hooks/useTranslation';\n\nimport {\n ExpressionInfoContainer, FieldContainer, OperatorContainer, DeleteButtonContainer, ExpressionRow\n} from './internal/ExpressionRow';\n\nimport { RadioButton, RadioButtonGroup } from 'Common/components/RadioButton';\nimport { Body4, Heading4, FontWeight } from 'Common/components/typography';\n\nconst Root = styled.div`\n width: 375px;\n padding: 0;\n display:flex;\n flex-direction: column;\n min-height: 1px;\n /* The 'flex' below is required or else the ValidatedLiveControl will not\n handle overflow properly. */\n flex: 1 0 auto;\n`;\n\nconst ButtonContainer = styled.div`\n box-sizing: border-box;\n min-height: 44px;\n min-width: 44px;\n display: flex;\n align-items: center;\n flex: 0 0 auto;\n`;\n\nconst TitleContainer = styled.div`\n display: flex;\n color: ${props => props.theme.colors.palette.blue.awesome};\n font-weight: ${FontWeight.medium};\n flex: 0 0 auto;\n\n align-items: center;\n`;\n\nconst ExpressionsContainer = styled.div`\n overflow-y: auto;\n flex: 1 1 auto;\n`;\n\nconst TextContainer = styled.div`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-align: left;\n`;\n\nconst EmptyExpressionsTextContainer = styled.div`\n padding: 5px 0 0px 5px;\n`;\n\nconst CombinedFilterContainer = styled.div`\n padding-bottom: 10px;\n padding-right: 10px;\n`;\n\nconst Separator = styled.div`\n border-top: 1px solid ${({ theme }) => theme.colors.separator};\n`;\n\nconst CommentsContainer = styled.div`\n`;\n\nconst CommentsContainerTitle = styled.div`\n margin-bottom: 5px 0px;\n color: ${\n ({disabled,theme}) =>\n disabled ? theme.colors.darkText.disabled : theme.colors.darkText.highEmphasis\n };\n`;\n\nconst StyledRadioButtonGroup = styled(RadioButtonGroup)`\n padding-left: 10px;\n`;\n\nfunction getDefaultRhsValue(selectedExpression) {\n const { fieldType } = selectedExpression;\n\n if (fieldType === 'category_value') {\n return [];\n }\n else if (fieldType === 'metric') {\n // create new metric expression with a default value of zero \n return 0;\n }\n}\n\n/**\n * Control used to update the filter property of an ExplorationPath.\n * Intended to be used via the useFilterBuilder hook.\n *\n * @see useFilterBuilder\n */\nexport default function FilterBuilder(props) {\n const {\n categoryOptions,\n metricOptions,\n noMetricOptionsMsg,\n categoryValueOptions,\n value,\n onChange,\n error,\n allowDelete,\n combineTypes,\n } = props;\n\n const translator = useTranslator();\n const disableCommentsToInclude = (0 < value.slice.expressions.length);\n const withAllCommentsSelected = !!(value?.showEvents?.with_all_comments_within_time);\n const categoryOptionsInternal = useMemo(() => (\n withAllCommentsSelected ? [] : categoryOptions\n ), [withAllCommentsSelected, categoryOptions]);\n const noCategoryOptionsMsg = withAllCommentsSelected ? translator('control.filter.invalid_filters.category') : '';\n\n // state for Add Expression picker\n const [ isAddExpressionOpen, setIsAddExpressionOpen ] = useState(false);\n\n const openAddExpression = useCallback(() => {\n setIsAddExpressionOpen(true);\n }, [setIsAddExpressionOpen]);\n\n const closeAddExpression = useCallback(() => {\n setIsAddExpressionOpen(false);\n }, [setIsAddExpressionOpen]);\n\n const handleChange = useCallback((newValue) => {\n onChange({\n target: {\n value: newValue,\n },\n });\n }, [onChange]);\n\n const handleAddExpression = useCallback((event) => {\n closeAddExpression();\n\n const selectedField = event.target.value;\n let expressionType = 'group';\n\n // [FUTURE HACK]\n // production_day_number/calendar_day_number/record_id/event_id\n // are metrics that should get placed in slice filters\n // and are currently set to internal so user can not select them\n if (selectedField.fieldType === 'category_value'\n || selectedField.name === 'production_day_number'\n || selectedField.name === 'calendar_day_number'\n || selectedField.name === 'record_id'\n || selectedField.name.endsWith('event_id')) {\n expressionType = 'slice';\n }\n\n const newValue = {\n ...value,\n [expressionType]: {\n ...value[expressionType],\n expressions: [\n {\n lhs: selectedField,\n op: 'eq',\n rhs: getDefaultRhsValue(selectedField),\n },\n ...value[expressionType].expressions\n ]\n }\n };\n\n handleChange(newValue);\n }, [closeAddExpression, value, handleChange]);\n\n const renderAddExpressionContent = useCallback(() => (\n \n ), [categoryOptionsInternal, withAllCommentsSelected, handleAddExpression, metricOptions]);\n\n const handleExpressionChange = useCallback((event) => {\n const { target } = event;\n const targetDetails = target.name.split('.');\n const expressionType = targetDetails[0];\n const expressionIndex = targetDetails[2];\n\n if(!value[expressionType]?.expressions[expressionIndex]) {\n console.error(`Cannot update expression ${expressionType} at index ${expressionIndex}, no expression was found.`);\n return;\n }\n\n let nextExpressions = [ ...value[expressionType].expressions ];\n let updatedExpression = { ...target.value };\n\n // clear rhs and set operator to equals if lhs changed\n if (target.value.lhs.name !== nextExpressions[expressionIndex].lhs.name) {\n updatedExpression.op = 'eq';\n updatedExpression.rhs = getDefaultRhsValue(target.value.lhs);\n }\n nextExpressions[expressionIndex] = updatedExpression;\n let updatedFilterSection = { ...value[expressionType], expressions: nextExpressions };\n\n handleChange({\n ...value,\n [expressionType]: updatedFilterSection\n });\n }, [value, handleChange]);\n\n const handleDeleteButtonClick = useCallback((expressionName) => {\n const targetDetails = expressionName.split('.');\n const expressionType = targetDetails[0];\n const expressionIndex = targetDetails[2];\n\n if(!value[expressionType]?.expressions[expressionIndex]) {\n console.error(`Cannot delete expression ${expressionType} at index ${expressionIndex}, no expression was found.`);\n return;\n }\n\n let nextExpressions = [ ...value[expressionType].expressions ];\n nextExpressions.splice(expressionIndex, 1);\n let updatedFilterSection = { ...value[expressionType], expressions: nextExpressions };\n\n handleChange({\n ...value,\n [expressionType]: updatedFilterSection\n });\n }, [value, handleChange]);\n\n const handleCombineTypeChange = (event) => {\n const expressionType = event.target.name;\n const newValue = event.target.value.value;\n const updatedFilterSection = { ...value[expressionType], combine_type: newValue };\n\n handleChange({\n ...value,\n [expressionType]: updatedFilterSection\n });\n };\n\n const addExpressionText = translator('add_expression_literal');\n\n const combineExpressionOptions = [\n {\n value: 'and',\n displayName: translator('editors.filter.combine_filter_options.all_true')\n },\n {\n value: 'or',\n displayName: translator('editors.filter.combine_filter_options.at_least_one_true')\n }\n ].filter((type) => {\n return combineTypes.includes(type.value);\n });\n\n const createFilterTitle = (type) => {\n let filterTitle = translator('dimensions_literal');\n let filterHelpText = translator('editors.filter.slice_filter_help_text');\n\n if (type === 'group') {\n filterTitle = translator('metrics_literal');\n filterHelpText = translator('editors.filter.group_filter_help_text');\n }\n\n return (\n \n {filterTitle}\n {filterHelpText}\n \n );\n };\n\n const createFilter = (type) => {\n const data = value[type];\n\n const expressions = data.expressions.map((item, index) => {\n const key = `${type}.expressions.${index}`;\n let expressionRowProps = {\n name: key,\n lhs: item.lhs,\n op: item.op,\n rhs: item.rhs,\n categoryValueOptions: (withAllCommentsSelected ? {} : categoryValueOptions),\n onChange: handleExpressionChange,\n onDeleteRow: handleDeleteButtonClick,\n allowDelete: allowDelete,\n error: error && error[type] && error[type][index] || null,\n };\n\n if (type === 'slice') {\n expressionRowProps.categoryOptions = categoryOptionsInternal;\n }\n else if (type === 'group') {\n expressionRowProps.metricOptions = metricOptions;\n }\n\n return (\n \n );\n });\n\n const renderCombineFilterContainer = () => {\n if (expressions.length > 1) {\n const selectedItem = combineExpressionOptions.find((x) => (x.value === data.combine_type));\n const itemName = selectedItem.displayKey ? translator(selectedItem.displayKey) : selectedItem.displayName;\n\n if (combineExpressionOptions.length > 1) {\n return (\n \n \n \n );\n }\n return (\n \n { combineExpressionOptions[0].displayName }\n \n );\n }\n };\n\n return (\n \n {renderCombineFilterContainer()}\n \n \n \n {translator('field_literal')}\n \n \n {translator('operator_copy')}\n \n \n {translator('value_literal')}\n \n \n \n \n \n {expressions.length > 0\n ? expressions\n : (\n \n \n \n )\n }\n \n \n );\n };\n\n const createNoOptionsMsg = (msg, noMessageType) => {\n return (\n \n \n \n );\n };\n\n const INCLUDE_EVENTS_ALL = 'include_events.all';\n const INCLUDE_EVENTS_DIRECTLY_LINKED = 'include_events.directly_linked';\n const INCLUDE_EVENTS_NOT_DIRECTLY_LINKED = 'include_events.not_directly_linked';\n\n /**\n * with_comments without_comments\n * ------------- ----------------\n * INCLUDE_EVENTS_ALL | true true\n * INCLUDE_EVENTS_DIRECTLY_LINKED | true false\n * INCLUDE_EVENTS_NOT_DIRECTLY_LINKED | false true\n */\n const onEventsRadioGroupChange = useCallback((event) => {\n let showEvents = { ...value.showEvents };\n\n switch (event.target.value) {\n case INCLUDE_EVENTS_ALL:\n showEvents.with_comments = true;\n showEvents.without_comments = true;\n break;\n case INCLUDE_EVENTS_DIRECTLY_LINKED:\n showEvents.with_comments = true;\n showEvents.without_comments = false;\n break;\n case INCLUDE_EVENTS_NOT_DIRECTLY_LINKED:\n showEvents.with_comments = false;\n showEvents.without_comments = true;\n break;\n }\n\n onChange({\n target: {\n value: {\n ...value,\n showEvents: showEvents,\n }\n }\n });\n }, [value, onChange]);\n\n let initialEventsValue = INCLUDE_EVENTS_ALL;\n\n // value.showEvents should only be present for EventListWidget\n if (value?.showEvents?.with_comments) {\n initialEventsValue =\n value?.showEvents?.without_comments ?\n INCLUDE_EVENTS_ALL : INCLUDE_EVENTS_DIRECTLY_LINKED;\n }\n else if (value?.showEvents?.without_comments) {\n initialEventsValue = INCLUDE_EVENTS_NOT_DIRECTLY_LINKED;\n }\n\n const INCLUDE_COMMENTS_ALL = 'include_comments.all';\n const INCLUDE_COMMENTS_DIRECTLY_LINKED = 'include_comments.directly_linked';\n\n /**\n * with_all_comments_within_time\n * -----------------------------\n * INCLUDE_COMMENTS_ALL | true\n * INCLUDE_COMMENTS_DIRECTLY_LINKED | false\n */\n const onCommentsRadioGroupChange = useCallback((event) => {\n let showEvents = { ...value.showEvents };\n\n switch (event.target.value) {\n case INCLUDE_COMMENTS_ALL:\n showEvents.with_all_comments_within_time = true;\n break;\n case INCLUDE_COMMENTS_DIRECTLY_LINKED:\n showEvents.with_all_comments_within_time = false;\n break;\n }\n\n onChange({\n target: {\n value: {\n ...value,\n showEvents: showEvents,\n }\n }\n });\n }, [value, onChange]);\n\n // value.showEvents should only be present for EventListWidget\n const initialCommentsValue =\n value?.showEvents?.with_all_comments_within_time ?\n INCLUDE_COMMENTS_ALL : INCLUDE_COMMENTS_DIRECTLY_LINKED;\n\n const separatorSpacing = 4;\n\n const categoryFilters = (categoryOptionsInternal.length || noCategoryOptionsMsg)\n ? (\n \n {createFilterTitle('slice')}\n {categoryOptionsInternal.length ? createFilter('slice', value) : createNoOptionsMsg(noCategoryOptionsMsg)}\n \n ) : null;\n\n const metricFilters = (metricOptions.length || noMetricOptionsMsg)\n ? (\n \n {createFilterTitle('group')}\n {metricOptions.length ? createFilter('group', value) : createNoOptionsMsg(noMetricOptionsMsg)}\n \n ) : null;\n\n return (\n \n \n \n \n {addExpressionText}\n \n \n \n \n {categoryFilters}\n {metricOptions.length && categoryOptionsInternal.length ? : null}\n {metricFilters}\n\n {/* value.showEvents should only be present for EventListWidget */}\n {value?.showEvents ?\n (\n \n \n \n {translator('comments')}\n {translator('control.filter.comments.tooltip')}\n \n \n \n {translator('control.filter.comments.include_events.title')}\n \n \n \n {translator(`control.filter.comments.${INCLUDE_EVENTS_ALL}`)}\n \n \n {translator(`control.filter.comments.${INCLUDE_EVENTS_DIRECTLY_LINKED}`)}\n \n \n {translator(`control.filter.comments.${INCLUDE_EVENTS_NOT_DIRECTLY_LINKED}`)}\n \n \n \n {translator('control.filter.comments.include_comments.title')}\n \n \n \n {translator(`control.filter.comments.${INCLUDE_COMMENTS_ALL}`)}\n \n \n {translator(`control.filter.comments.${INCLUDE_COMMENTS_DIRECTLY_LINKED}`)}\n \n \n {disableCommentsToInclude ? createNoOptionsMsg(translator('control.filter.comments.invalid_selection')) : null}\n \n \n )\n :\n null\n }\n \n );\n}\n\nconst filterProp = PropTypes.shape({\n expressions: PropTypes.arrayOf(\n PropTypes.shape({\n lhs: PropTypes.shape({\n name: PropTypes.string.isRequired,\n channel: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n fieldType: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n subType: PropTypes.string,\n }),\n op: PropTypes.string.isRequired,\n rhs: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.number,\n PropTypes.array,\n ]),\n }).isRequired,\n ).isRequired,\n combine_type: PropTypes.string,\n});\n\nFilterBuilder.propTypes = {\n categoryOptions: PropTypes.array.isRequired,\n metricOptions: PropTypes.array.isRequired,\n noMetricOptionsMsg: PropTypes.string,\n categoryValueOptions: PropTypes.object.isRequired,\n value: PropTypes.shape({\n slice: filterProp.isRequired,\n group: filterProp.isRequired,\n showEvents: PropTypes.shape({\n with_all_comments_within_time: PropTypes.bool.isRequired,\n with_comments: PropTypes.bool.isRequired,\n without_comments: PropTypes.bool.isRequired,\n }),\n }).isRequired,\n onChange: PropTypes.func.isRequired,\n error: PropTypes.shape({\n slice: PropTypes.arrayOf(PropTypes.shape({\n rhs: PropTypes.any,\n })),\n group: PropTypes.arrayOf(PropTypes.shape({\n rhs: PropTypes.any,\n })),\n }),\n allowDelete: PropTypes.bool.isRequired,\n combineTypes: PropTypes.array.isRequired,\n};\n\nFilterBuilder.defaultProps = {\n noMetricOptionsMsg: '',\n allowDelete: true,\n combineTypes: ['and', 'or'],\n};\n","import validateNumber from 'Common/data/validateNumber';\n\nconst hmsTypeDisplayKeys = {\n h: 'hours_literal',\n m: 'minutes_literal',\n s: 'seconds_literal',\n};\n\n/**\n * Validation function for the common DurationField component.\n *\n * [FUTUREHACK]: The validation exists outside of Common for now as we don't have a common\n * way of handling translations.\n *\n * @param {Object} hmsValue Has h, m, and s components which should be numeral values.\n * @param {Object} [opts]\n * @param {Boolean} [opts.integral = false] If true the duration should be a whole number to\n * pass validation.\n * @param {Number} [opts.maxHours = MAX_SAFE_INT] The upper bound for a valid number of hours.\n * @param {Function} opts.translator String translator function.\n *\n * @returns {Object} Object with each key (h, m, or s) having an error if applicable. Returns\n * undefined if there are no validation errors.\n */\nexport default function validateDuration(hmsValue, { integral, maxHours = Number.MIN_SAFE_INTEGER, translator }) {\n let errors = {};\n\n Object.keys(hmsValue).forEach((key) => {\n const numberError = validateNumber(hmsValue[key] || 0, {\n min: 0,\n max: key === 'h' ? ( maxHours ) : 59,\n integral: (key !== 's') || integral,\n translator: translator,\n });\n\n if (numberError) {\n errors[key] = `${translator(hmsTypeDisplayKeys[key])}: ${numberError}`;\n }\n });\n\n return Object.keys(errors).length ? errors : undefined;\n}\n","import validateDuration from 'Common/data/validateDuration';\nimport validateNumber from 'Common/data/validateNumber';\n\n// Seconds is the underlying value so\n// we can't allow it to be greater than\n// what's safe.\nconst maxHours = Math.trunc(Number.MAX_SAFE_INTEGER / 3600);\n\nexport default function validateFilters(filters, translator) {\n let errors = {};\n\n const validateExpression = (exp) => {\n const { fieldType, type, subType } = exp.lhs;\n let rhsError;\n\n if (fieldType === 'metric') {\n if (type === 'time_span') {\n rhsError = validateDuration(exp.rhs, {\n integral: subType !== 'cycle_time',\n maxHours,\n translator: translator,\n });\n }\n else {\n const integral = type == 'uint64' || type == 'id' || subType === 'count';\n\n rhsError = validateNumber(exp.rhs, {\n integral,\n percentage: subType === 'percent',\n allowEmpty: true,\n translator: translator,\n });\n }\n }\n\n return rhsError ? {\n rhs: rhsError,\n } : undefined;\n };\n\n const sliceErrors = filters.slice.expressions.map(validateExpression);\n const groupErrors = filters.group.expressions.map(validateExpression);\n\n if (sliceErrors?.find(error => (error))) {\n errors.slice = sliceErrors;\n }\n\n if (groupErrors?.find(error => (error))) {\n errors.group = groupErrors;\n }\n\n return errors.slice || errors.group ? errors : undefined;\n}\n","import PropTypes from 'prop-types';\nimport React, { useMemo, useCallback, forwardRef } from 'react';\nimport styled from 'styled-components';\n\nimport InvalidLiveControlDialog from 'Common/components/LiveControlBar/InvalidLiveControlDialog';\nimport ValidatedLiveControl from 'Common/components/LiveControlBar/ValidatedLiveControl';\n\nimport { secondsToHms, hmsToSeconds } from 'Common/components/DurationField/hmsHelpers';\n\nimport FilterBuilder from 'Common/components/FilterBuilder/FilterBuilder';\nimport validateFilters from './internal/validateFilters';\nimport useTranslation, { useTranslator } from 'Common/hooks/useTranslation';\nimport Filters from 'Common/types/Filters/Filters';\n\nconst DEFAULT_COMBINE_TYPE = 'and';\n\nfunction addColumnInfoToFilters({ filters, categoryOptions, metricOptions }) {\n\n // Combine all category and metric options into a two-level object for\n // quick lookup. First keyed by channel, then by name.\n\n const filterLhsOptions = {};\n\n [ ...categoryOptions, ...metricOptions ].forEach((group) => {\n group.entries.forEach((entry) => {\n if (!filterLhsOptions[entry.channel]) {\n filterLhsOptions[entry.channel] = {};\n }\n\n filterLhsOptions[entry.channel][entry.name] = entry;\n });\n }, []);\n\n return {\n ...filters,\n slice: {\n combine_type: filters.slice?.combine_type || DEFAULT_COMBINE_TYPE,\n expressions: (filters.slice?.expressions || []).map((exp) => {\n const lhsOption = filterLhsOptions[exp.lhs.channel]?.[exp.lhs.name];\n\n return {\n lhs: lhsOption,\n op: exp.op,\n rhs: exp.rhs || [],\n };\n }),\n },\n group: {\n combine_type: filters.group?.combine_type || DEFAULT_COMBINE_TYPE,\n expressions: (filters.group?.expressions || []).map((exp) => {\n const lhsOption = filterLhsOptions[exp.lhs.channel]?.[exp.lhs.name];\n\n return {\n lhs: lhsOption,\n op: exp.op,\n rhs: exp.rhs,\n };\n }),\n }\n };\n}\n\nfunction convertFromInitialValue(filters) {\n let convertedFilters = {};\n\n Object.entries(filters).forEach(([type, filter]) => {\n if ('expressions' in filter) {\n convertedFilters[type] = {\n ...filter,\n expressions: filter.expressions.map((exp) => {\n if (exp?.lhs?.type === 'time_span') {\n return {\n ...exp,\n rhs: secondsToHms(exp.rhs || 0),\n };\n }\n else {\n return exp;\n }\n })\n };\n }\n else {\n convertedFilters[type] = filter;\n }\n });\n\n return convertedFilters;\n}\n\nfunction convertToOutgoingValue(filters) {\n const {\n slice: sliceFilters,\n group: groupFilters,\n ...convertedFilters\n } = filters;\n\n // Convert slice filters.\n //\n\n const sliceFilterExpressions = Array.isArray(sliceFilters?.expressions)\n ? sliceFilters.expressions\n : [];\n\n convertedFilters.slice = {\n combine_type: sliceFilters.combine_type || DEFAULT_COMBINE_TYPE,\n expressions: sliceFilterExpressions.filter((exp) => exp.lhs).map((exp) => {\n return {\n lhs: {\n name: exp.lhs.name,\n channel: exp.lhs.channel,\n },\n op: exp.op,\n rhs: Array.isArray(exp.rhs) ?\n exp.rhs.map((rhsPart) => {\n // Only include the name for objects with a name field\n return rhsPart?.name ? rhsPart.name : rhsPart;\n })\n : [],\n };\n }),\n };\n\n // Convert group filters.\n //\n\n const groupFilterExpressions = Array.isArray(groupFilters?.expressions) ?\n groupFilters.expressions\n : [];\n\n convertedFilters.group = {\n combine_type: groupFilters.combine_type || DEFAULT_COMBINE_TYPE,\n expressions: groupFilterExpressions.filter((exp) => exp.lhs).map((exp) => {\n let newRhs = exp.rhs;\n\n if (exp.lhs.type === 'time_span') {\n // Time spans must be converted from hms object back into\n // a number.\n\n // Allow rhs to be a raw zero as opposed to an hms object.\n if (exp.rhs === 0) {\n newRhs = 0;\n }\n else {\n newRhs = hmsToSeconds(exp.rhs);\n }\n }\n else if (exp.rhs === undefined) {\n // Prefer null over undefined for filters.\n return {\n ...exp,\n rhs: null,\n };\n }\n\n return {\n lhs: {\n name: exp.lhs.name,\n channel: exp.lhs.channel,\n },\n op: exp.op,\n rhs: newRhs,\n };\n }),\n };\n\n return convertedFilters;\n}\n\nconst FilterBuilderContainer = styled.div`\n padding: 0 12px;\n`;\n\nconst FilterControl = forwardRef((props, ref) => {\n const {\n initialValue,\n onApply,\n onCancel,\n categoryOptions,\n metricOptions,\n noMetricOptionsMsg,\n categoryValueOptions,\n allowDelete,\n combineTypes,\n } = props;\n\n const convertedInitialValue = useMemo(() => {\n const initialValueWithColumnInfo = addColumnInfoToFilters({\n filters: initialValue,\n categoryOptions,\n metricOptions,\n });\n\n return convertFromInitialValue(initialValueWithColumnInfo);\n }, [ initialValue, categoryOptions, metricOptions ]);\n\n const translator = useTranslator();\n const validate = useCallback((value) => {\n const validFilters = {\n ...value,\n slice: {\n ...value.slice,\n expressions: value.slice.expressions.filter((expression) => {\n if (expression.lhs) {\n return expression;\n }\n })\n }\n };\n \n return validateFilters(validFilters, translator);\n }, [ translator ]);\n\n const handleApply = useCallback((event) => {\n onApply({\n target: {\n value: convertToOutgoingValue(event.target.value),\n },\n });\n }, [ onApply ]);\n\n const invalidChangesPopupTitleLiteral = useTranslation('editors.filter.invalid_changes_popup.title');\n const invalidChangesPopupMessageLiteral = useTranslation('editors.filter.invalid_changes_popup.message');\n\n return (\n {\n return (\n \n \n \n );\n }}\n renderInvalidDialog={({ onContinue, onCancel: onDialogCancel }) => {\n return (\n \n );\n }}\n />\n );\n});\n\nFilterControl.displayName = 'FilterControl';\n\nFilterControl.propTypes = {\n initialValue: Filters.propType.isRequired,\n onApply: PropTypes.func.isRequired,\n onCancel: PropTypes.func.isRequired,\n categoryOptions: PropTypes.array.isRequired,\n metricOptions: PropTypes.array.isRequired,\n noMetricOptionsMsg: PropTypes.string,\n categoryValueOptions: PropTypes.object.isRequired,\n allowDelete: PropTypes.bool.isRequired,\n combineTypes: PropTypes.array.isRequired,\n};\n\nFilterControl.defaultProps = {\n allowDelete: true,\n combineTypes: ['and', 'or'],\n};\n\nexport default FilterControl;\n","/**\n * Converts from seconds to an hms (hours, minutes, seconds) object.\n *\n * Example:\n *\n * secondsToHms(65)\n * returns:\n * {\n * h: 0,\n * m: 1,\n * s: 5,\n * }\n *\n * @param {Number} seconds\n *\n * @returns {Object} with h,m,s properties representing hours, minutes, and seconds.\n */\nexport function secondsToHms(seconds) {\n let h = null;\n let m = null;\n let s = null;\n\n if (Number.isFinite(seconds)) {\n s = seconds % 60;\n m = ((seconds - s) / 60) % 60;\n h = ((seconds - (m * 60) - s)) / (60 * 60);\n }\n\n return {\n h,\n m,\n s,\n };\n}\n\nexport function hmsToSeconds({\n h,\n m,\n s,\n}) {\n if (Number.isFinite(h) || Number.isFinite(m) || Number.isFinite(s)) {\n return ((h || 0) * 60 * 60) + ((m || 0) * 60) + (s || 0);\n }\n else {\n return null;\n }\n}\n","import FilterControl from './FilterControl';\n\nexport default FilterControl;\n","import React, {\n useCallback,\n useState,\n} from 'react';\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\n\nimport styled from 'styled-components';\n\nimport PropTypes from 'prop-types';\nimport LiveControlDropdownHeader from 'Common/components/LiveControlBar/LiveControlDropdownHeader';\nimport LiveControlDropdownLayout from 'Common/components/LiveControlBar/LiveControlDropdownLayout';\nimport Checkbox from 'Common/components/Checkbox';\nimport LiveControlIcon from 'Common/components/LiveControlBar/LiveControlIcon';\nimport Icon from 'Common/components/Icon';\nimport useStackHistory from 'Common/hooks/useStackHistory';\nimport BasicSelectOption from 'Common/components/SelectList/BasicSelectOption';\nimport SelectList from 'Common/components/SelectList';\nimport SelectSeparator from 'Common/components/SelectList/SelectSeparator';\nimport { ProductionDay } from 'Common/data/date/ProductionDay';\nimport Button from 'Common/components/Button';\nimport { useTranslator } from 'Common/hooks/useTranslation';\n\nconst DatePickerWrapper = styled.div`\n align-self: center;\n`;\n\nconst CalendarContainer = styled.div`\n font-size: 12px;\n font-family: inherit;\n color: inherit;\n border-radius: 4px;\n\n .react-datepicker__current-month {\n font-size: 0.9em;\n font-family: inherit;\n }\n\n .react-datepicker__day-name,\n .react-datepicker__day,\n .react-datepicker__time-name {\n color: inherit;\n width: 25px;\n line-height: 25px;\n }\n\n .react-datepicker__day--keyboard-selected {\n color: inherit;\n background-color: transparent;\n }\n\n .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,\n .react-datepicker__month-text--selected,\n .react-datepicker__month-text--in-selecting-range,\n .react-datepicker__month-text--in-range,\n .react-datepicker__quarter-text--selected,\n .react-datepicker__quarter-text--in-selecting-range,\n .react-datepicker__quarter-text--in-range,\n .react-datepicker__year-text--selected,\n .react-datepicker__year-text--in-selecting-range,\n .react-datepicker__year-text--in-range,\n .react-datepicker__month-text--keyboard-selected,\n .react-datepicker__quarter-text--keyboard-selected,\n .react-datepicker__year-text--keyboard-selected {\n border-radius: 50%;\n background-color: ${({theme}) => theme.colors.palette.grey.ash};\n color: ${({theme}) => theme.colors.palette.grey.cloud};\n }\n\n .react-datepicker__day:hover,\n .react-datepicker__month-text:hover,\n .react-datepicker__quarter-text:hover,\n .react-datepicker__year-text:hover {\n border-radius: 50%;\n background-color: ${({theme}) => theme.colors.palette.grey.manatee};\n color: ${({theme}) => theme.colors.palette.grey.cloud};\n }\n\n .react-datepicker__header {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n background-color: ${({theme}) => theme.colors.palette.grey.cloud};\n }\n\n .react-datepicker__navigation--previous {\n border-right-color: ${({theme}) => theme.colors.palette.grey.manatee};\n }\n\n .react-datepicker__navigation--previous:hover {\n border-right-color: ${({theme}) => theme.colors.palette.grey.ash};\n }\n\n .react-datepicker__navigation--previous--disabled, .react-datepicker__navigation--previous--disabled:hover {\n border-left-color: ${({theme}) => theme.colors.palette.grey.manatee};\n opacity: 50%;\n }\n\n .react-datepicker__navigation--next {\n border-left-color: ${({theme}) => theme.colors.palette.grey.manatee};\n }\n\n .react-datepicker__navigation--next:hover {\n border-left-color: ${({theme}) => theme.colors.palette.grey.ash};\n }\n\n .react-datepicker__navigation--next--disabled, .react-datepicker__navigation--next--disabled:hover {\n border-left-color: ${({theme}) => theme.colors.palette.grey.manatee};\n opacity: 50%;\n }\n`;\n\nconst DatePickerControl = styled.div`\n display: flex;\n flex-direction: column;\n\n padding: 12px;\n\n & > div {\n display: inline-block;\n }\n`;\n\nconst ApplyButton = styled(Button)`\n margin-top: 12px;\n align-self: flex-end;\n`;\n\nconst Root = styled.div`\n box-sizing: border-box;\n width: 275px;\n display: flex;\n flex-direction: column;\n min-height: 1px;\n color: ${({theme}) => theme.colors.darkText.highEmphasis};\n`;\n\nconst Separator = styled.div`\n border-bottom: 1px solid ${({theme}) => theme.colors.palette.grey.silver };\n margin: 3px 11px;\n`;\n\nconst StyledBasicSelectOption = styled(BasicSelectOption)`\n flex: 1 1 auto;\n`;\n\nconst OptionContentWrapper = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n`;\n\nconst StyledIcon = styled(Icon)`\n font-size: 9px;\n`;\n\nconst StyledCheckbox = styled(Checkbox)`\n padding-left: 18px;\n padding-right: 18px;\n`;\n\nconst INITIAL = 'initial';\n\n// These all look \"off by one\" as the start and end range is inclusive, so that\n// { start: -6, end: 0 }, is a seven day (one week) time range.\n//\nconst lastNOptions = {\n week: 6,\n month: 29,\n quarter: 89,\n year: 364,\n};\n\nconst staticMenuOptions = {\n 'this': {\n start: 0,\n end: 0,\n },\n 'last': {\n start: -1,\n end: -1,\n },\n '2_back': {\n start: -2,\n end: -2,\n },\n '3_back': {\n start: -3,\n end: -3,\n },\n};\n\nfunction getTimeRangeFromMenuOption(type, count = null) {\n if (type === 'last_n') {\n return {\n units: 'production_day',\n start: -count,\n end: 0,\n };\n }\n\n return { ...staticMenuOptions[type] };\n}\n\n// need to handle ordinal_shift same as shift\nfunction handleUnits(units) {\n if (units === 'ordinal_shift') {\n return 'shift';\n }\n else {\n return units;\n }\n}\n\nfunction getMenuOptionFromTimeRange(timeRangeValue, openMenuName) {\n const outer = handleUnits(timeRangeValue?.units);\n let menuOption = {\n outer,\n inner: undefined,\n };\n\n // First check if we are a \"same\" type\n if (timeRangeValue?.sameDimensionValue) {\n menuOption.inner = 'same';\n }\n // Then check if start and end match our static options\n else {\n const staticOption = Object.keys(staticMenuOptions).find((key) => {\n const staticTimeRange = staticMenuOptions[key];\n\n return timeRangeValue?.start === staticTimeRange.start\n && timeRangeValue?.end === staticTimeRange.end;\n });\n\n if (staticOption) {\n menuOption.inner = staticOption;\n }\n // If not, move on to the 'last_n' options if end is 0\n else if(timeRangeValue?.end === 0) {\n const matchingLastNKey = Object.keys(lastNOptions).find((lastNOptionKey) => {\n return timeRangeValue.start === -lastNOptions[lastNOptionKey];\n });\n\n if (matchingLastNKey) {\n menuOption.outer = matchingLastNKey;\n menuOption.inner = 'last_n';\n }\n }\n }\n\n // The outer menu does not match the currently selected menu,\n // therefore there must not be an inner menu option for this\n // menu selection.\n //\n if (menuOption.outer !== openMenuName) {\n delete menuOption.inner;\n }\n\n return menuOption;\n}\n\nexport default function TimeRangeControl(props) {\n const {\n monthLimited,\n isDayBased,\n showFollowPageCheckbox,\n dimensionValueDetails,\n\n selectionValue,\n followPageValue,\n onSelectionChange,\n onFollowPageChange,\n onSameOnlyOptionChange,\n } = props;\n\n const translator = useTranslator();\n\n const icon = (\n \n );\n\n // handles navigation between different controls\n const {\n current: shownItemProps,\n canPop: internalCanGoBack,\n push: transitionForward,\n pop: internalGoBack,\n } = useStackHistory({ name: INITIAL, props: {}});\n\n const shownItemName = shownItemProps.name;\n\n let title = translator('time_range_selector_dropdown.title');\n\n const [ customStartDate, setCustomStartDate] = useState(selectionValue?.units === 'time'\n ? new ProductionDay(selectionValue.start).toDate()\n : null\n );\n const [ customEndDate, setCustomEndDate] = useState(selectionValue?.units === 'time'\n ? new ProductionDay(selectionValue.end).toDate()\n : null\n );\n\n if (shownItemName === 'time') {\n title = translator('time_range_selector_dropdown.custom_dates');\n }\n else if (shownItemName !== INITIAL) {\n title = translator(`time_range_selector_dropdown.${shownItemName}.singular`);\n }\n\n let currentControl = null;\n\n const handleHeaderGoBack = internalCanGoBack ? internalGoBack : null;\n\n const handleInnerMenuSelection = useCallback((identifier, event) => {\n const { value: menuValue } = event.target;\n\n if (menuValue === 'same') {\n onSameOnlyOptionChange();\n }\n else if (identifier !== 'all') {\n let count = menuValue === 'last_n'\n ? lastNOptions[identifier]\n : undefined;\n\n const value = {\n units: identifier,\n ...getTimeRangeFromMenuOption(menuValue, count),\n };\n\n onSelectionChange({\n target: {\n value,\n },\n });\n }\n else if (identifier === 'all') {\n onSelectionChange({\n target: {\n value: {\n units: identifier,\n }\n },\n });\n }\n\n }, [onSelectionChange, onSameOnlyOptionChange]);\n\n const handleInitialMenuSelection = (event) => {\n const { value } = event.target;\n\n if (value === 'all') {\n handleInnerMenuSelection('all', event);\n }\n else if (value === 'time') {\n transitionForward(\n {name: value, props: {name: 'time'}}\n );\n }\n else {\n transitionForward(\n {name: value, props: {}},\n {name: INITIAL, props: {}}\n );\n }\n };\n\n let buildWrapper = function(identifier) {\n return (\n \n \n {translator(`time_range_selector_dropdown.${identifier}.singular`)}\n \n \n \n );\n };\n\n const followPageCheckbox = showFollowPageCheckbox\n ? (\n \n \n \n \n )\n : null;\n\n const currentMenuOption = getMenuOptionFromTimeRange(selectionValue, shownItemName);\n\n if (shownItemName === INITIAL) {\n currentControl = (\n \n {followPageCheckbox}\n \n {!isDayBased && buildWrapper('shift')}\n {!isDayBased && buildWrapper('part')}\n {!isDayBased && }\n {!isDayBased && buildWrapper('shift_hour')}\n {buildWrapper('production_day')}\n {buildWrapper('week')}\n {buildWrapper('month')}\n {!monthLimited && buildWrapper('quarter')}\n {!monthLimited && buildWrapper('year')}\n \n {!monthLimited && (\n \n {translator('time_range_selector_dropdown.all.singular')}\n \n )}\n \n \n {translator('time_range_selector_dropdown.custom_dates')}\n \n \n \n \n \n );\n }\n else if (shownItemName === 'time') {\n currentControl = (\n \n \n {\n const [newStartDate, newEndDate] = dates;\n setCustomStartDate(newStartDate);\n setCustomEndDate(newEndDate);\n }}\n openToDate={customStartDate ? customStartDate : undefined}\n startDate={customStartDate}\n endDate={customEndDate}\n inline\n selectsRange\n />\n \n {\n // The datepicker will give us dates that are midnight\n // of the selected date. Some locales can make this\n // a problem.\n //\n // For example, London's daylight savings\n // time offset is GMT+0100 and their standard time is\n // GMT+0000. Assume the browser's timezone is London,\n // and the current date is during standard time.\n // Constructing a Date for midnight on a date during\n // DST will assume the offset at that date.\n // So you will get something like the following:\n // >> new Date('2022-07-13T00:00:00').toISOString()\n // << '2022-07-12T23:00:00.000Z'\n // Notice how the date \"went back\" from the 13th to the\n // 12th. This is not good when the user is selecting\n // a date, not a time.\n //\n // Instead, we can extract the selected year+month+day\n // from the Date objects and use those to construct the\n // ProductionDay so we don't lose the date.\n\n const getProductionDayNumber = (d) => {\n return new ProductionDay(\n d.getFullYear(),\n d.getMonth() + 1,\n d.getDate(),\n ).getProductionDayNumber();\n };\n\n onSelectionChange({\n target: {\n value: {\n units: 'time',\n start: getProductionDayNumber(customStartDate),\n end: getProductionDayNumber(customEndDate)\n }\n }\n });\n }}\n >\n {translator('apply_literal')}\n \n \n );\n }\n else {\n const lastNStart = lastNOptions[shownItemName];\n\n let sameOnlyOption = null;\n const hasSameOnlyOption = ['shift', 'part'].includes(shownItemName);\n\n if (hasSameOnlyOption) {\n let sameOnlyKeyPart = !dimensionValueDetails?.isMixed && ( !dimensionValueDetails?.sameBackDetails?.key && dimensionValueDetails?.displayName )\n ? 'same_category_multi_asset'\n : 'same_category';\n let sameOnlyKeyParams = {\n category: translator(`time_range_selector_dropdown.${shownItemName}.singular`),\n };\n\n const correctSameBackDetails = handleUnits(dimensionValueDetails?.sameBackDetails?.units) === shownItemName\n && handleUnits(selectionValue?.units) === shownItemName;\n\n const shouldBeDisabled = !correctSameBackDetails\n || dimensionValueDetails?.isMixed\n || (!dimensionValueDetails?.sameBackDetails?.key || dimensionValueDetails?.sameBackDetails?.key === 'null');\n\n if (!shouldBeDisabled) {\n sameOnlyKeyParams = {\n category: dimensionValueDetails?.displayName,\n };\n }\n\n sameOnlyOption = [\n ,\n (\n \n {translator(`time_range_selector_dropdown.${sameOnlyKeyPart}`, sameOnlyKeyParams)}\n \n ),\n ];\n }\n\n currentControl = (\n handleInnerMenuSelection(shownItemName, e)}\n value={currentMenuOption.inner}\n >\n \n {translator(`time_range_selector_dropdown.${shownItemName}.this`)}\n \n \n \n {translator(`time_range_selector_dropdown.${shownItemName}.last`)}\n \n \n {translator(`time_range_selector_dropdown.${shownItemName}.2_back`)}\n \n \n {translator(`time_range_selector_dropdown.${shownItemName}.3_back`)}\n \n {lastNStart && [\n (),\n (\n {translator('time_range_selector_dropdown.last_n_days', {\n n: lastNStart + 1,\n })}\n )\n ]\n }\n {onSameOnlyOptionChange && sameOnlyOption}\n \n );\n }\n\n const header = (\n \n );\n const body = ({currentControl});\n\n return (\n \n );\n}\n\nTimeRangeControl.propTypes = {\n monthLimited: PropTypes.bool,\n isDayBased: PropTypes.bool,\n\n selectionValue: PropTypes.shape({\n units: PropTypes.string.isRequired,\n start: PropTypes.number,\n end: PropTypes.number,\n sameDimensionValue: PropTypes.string,\n }),\n\n showFollowPageCheckbox: PropTypes.bool,\n followPageValue: PropTypes.bool,\n onSelectionChange: PropTypes.func.isRequired,\n onFollowPageChange: PropTypes.func,\n\n dimensionValueDetails: PropTypes.shape({\n displayName: PropTypes.string,\n isMixed: PropTypes.bool,\n sameBackDetails: PropTypes.shape({\n key: PropTypes.string,\n units: PropTypes.string,\n }),\n }),\n onSameOnlyOptionChange: PropTypes.func\n};\n\nTimeRangeControl.defaultProps = {\n showFollowPageCheckbox: false,\n\n monthLimited: false,\n isDayBased: false,\n};\n","import TimeRangeControl from \"./TimeRangeControl\";\n\nexport default TimeRangeControl;\n","import React from 'react';\nimport LiveControl from 'Common/components/LiveControlBar/LiveControl';\nimport LiveControlIcon from 'Common/components/LiveControlBar/LiveControlIcon';\n\n/**\n * Simple function to render a element for duplicating a widget.\n *\n * @param {object} props\n * @param {string} props.name\n * @param {string} props.key React `key`\n * @param {function} props.action Called when the live control is clicked.\n * @param {function} props.translator\n *\n * @returns {React.ElementType}\n */\nexport default function renderDuplicateLiveControl({\n name,\n key,\n action,\n translator,\n}) {\n return (\n \n )}\n action={action}\n />\n );\n}\n","import React, { useCallback, useRef, useState, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport LiveControlBar from 'Common/components/LiveControlBar';\nimport LiveControl from 'Common/components/LiveControlBar/LiveControl';\nimport LiveControlIcon from 'Common/components/LiveControlBar/LiveControlIcon';\nimport LiveControlSeparator from 'Common/components/LiveControlBar/LiveControlSeparator';\nimport Filters from 'Common/types/Filters/Filters';\n\nimport useTranslation, { useTranslator } from 'Common/hooks/useTranslation';\n\nimport EnterpriseHierarchyControl from 'Common/components/LiveControls/EnterpriseHierarchyControl';\nimport FieldSelectControl from 'Common/components/LiveControls/FieldSelectControl';\nimport FilterControl from 'Common/components/LiveControls/FilterControl';\nimport TimeRangeControl from 'Common/components/LiveControls/TimeRangeControl';\nimport renderDuplicateLiveControl from 'Common/components/LiveControls/DuplicateLiveControl/renderDuplicateLiveControl';\n\n\nexport default function KPIWidgetLiveControls ({\n controller,\n suppressedControls,\n children,\n}) {\n const {\n metric,\n setMetric,\n metricOptions,\n\n filters,\n setSliceFilters,\n filterOptions,\n\n followPageTimeRange,\n timeRange,\n setTimeRange,\n\n followAppBarHierarchyNode,\n hierarchyNode,\n setHierarchyNode,\n hierarchyNodeOptions,\n\n isLayoutModeActive,\n duplicateWidget,\n } = controller;\n const translator = useTranslator();\n \n const [selectedControl, setSelectedControl] = useState(null);\n\n const closeSelectedControl = useCallback(() => {\n setSelectedControl(null);\n }, []);\n\n const hideControl = (controlName) => {\n // hide control there is a suppressed object and the control name is truthy within that\n // object\n return Boolean(suppressedControls && suppressedControls[controlName]);\n };\n\n const filterControlRef = useRef(null);\n\n const onFilterClose = useCallback(() => {\n return filterControlRef.current.onClose();\n }, []);\n\n const handleSelectionChange = useCallback((newSelection) => {\n let blockSelectionChange = false;\n\n if (selectedControl === 'filter' && newSelection !== 'filter') {\n blockSelectionChange = !onFilterClose();\n }\n\n if (!blockSelectionChange) {\n setSelectedControl(newSelection);\n }\n }, [onFilterClose, selectedControl]);\n\n // Filters\n //\n\n const activeFilterCount = useMemo(() => {\n return Filters.countActiveExpressions(filters);\n }, [filters]);\n\n const transformedFilterValue = useMemo(() => {\n // Enforce that ONLY slice filters are ever used.\n return {\n slice: filters.slice,\n group: { expressions: [] },\n };\n }, [ filters ]);\n\n const handleFilterApply = useCallback((event) => {\n // Close the control when the filters are applied\n closeSelectedControl();\n\n // We only care about slice filters\n const newSliceFilters = event.target.value.slice;\n setSliceFilters(newSliceFilters);\n }, [closeSelectedControl, setSliceFilters]);\n\n // Metric\n //\n\n const transformedMetricValue = useMemo(() => {\n return {\n name: metric,\n };\n }, [metric]);\n\n const handleMetricChange = useCallback((event) => {\n // Close the control after picking a metric field\n handleSelectionChange(null);\n setMetric(event.target.value);\n }, [handleSelectionChange, setMetric]);\n\n // Hierarchy Node\n //\n\n const handleHierarchyNodeChange = useCallback((event) => {\n // Close the control after picking a node\n handleSelectionChange(null);\n setHierarchyNode(event.target.value);\n }, [handleSelectionChange, setHierarchyNode]);\n\n const handleFollowAppBarHierarchyNodeChange = useCallback((event) => {\n const newFollowAppBarHierarchyNode = event.target.value;\n\n let newHierarchyNode;\n\n if (newFollowAppBarHierarchyNode) {\n // Clear the hierarchy node\n newHierarchyNode = null;\n }\n else {\n // Set hierarchy node to default\n newHierarchyNode = 'self';\n }\n\n setHierarchyNode(newHierarchyNode);\n }, [setHierarchyNode]);\n\n // Time Range\n //\n\n const handleTimeRangeChange = useCallback((event) => {\n // Close the control after picking a time range\n handleSelectionChange(null);\n setTimeRange(event.target.value);\n }, [handleSelectionChange, setTimeRange]);\n\n const handleFollowPageTimeRangeChange = useCallback((event) => {\n const newFollowPageTimeRange = event.target.value;\n\n let newTimeRange;\n\n if (newFollowPageTimeRange) {\n // Clear the time range\n newTimeRange = null;\n }\n else {\n // Set time range to default\n newTimeRange = { units: 'shift', start: 0, end: 0 };\n }\n\n setTimeRange(newTimeRange);\n }, [setTimeRange]);\n\n const assetHierarchyLiteral = useTranslation('control.common.asset_hierarchy');\n const timeRangeLiteral = useTranslation('control.common.time_range');\n const kpiMetricLiteral = useTranslation('control.kpi.metric');\n const filterLiteral = useTranslation('control.common.filter');\n\n const showDuplicateControl = () => {\n return isLayoutModeActive && ! hideControl('duplicateWidget');\n };\n\n return (\n \n { hideControl('hierarchyNode') || \n {\n return (\n \n );\n }}\n icon={(\n \n )}\n />\n }\n { hideControl('timeRange') || \n {\n return (\n \n );\n }}\n icon={(\n \n )}\n />\n }\n \n { hideControl('field') || \n {\n return (\n \n );\n }}\n icon={(\n \n )}\n />\n }\n { hideControl('filter') || \n \n )}\n controlRender={() => {\n return (\n \n );\n }}\n />\n }\n {showDuplicateControl() && }\n {showDuplicateControl() && (\n renderDuplicateLiveControl({\n name: 'duplicateWidget',\n key: 'duplicateWidget',\n translator: translator,\n action: duplicateWidget,\n })\n )}\n {children}\n \n );\n}\n\nKPIWidgetLiveControls.propTypes = {\n name: PropTypes.string,\n controller: PropTypes.shape({\n metric: PropTypes.string.isRequired,\n setMetric: PropTypes.func.isRequired,\n metricOptions: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n isDummyGroup: PropTypes.bool.isRequired,\n entries: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n }).isRequired\n ).isRequired,\n }).isRequired\n ).isRequired,\n\n filters: PropTypes.object.isRequired,\n setSliceFilters: PropTypes.func.isRequired,\n filterOptions: PropTypes.shape({\n categories: PropTypes.arrayOf(\n PropTypes.object\n ).isRequired,\n values: PropTypes.object.isRequired,\n }).isRequired,\n\n followPageTimeRange: PropTypes.bool.isRequired,\n timeRange: PropTypes.object,\n setTimeRange: PropTypes.func.isRequired,\n\n followAppBarHierarchyNode: PropTypes.bool.isRequired,\n hierarchyNode: PropTypes.string,\n setHierarchyNode: PropTypes.func.isRequired,\n hierarchyNodeOptions: PropTypes.arrayOf(\n PropTypes.shape({\n displayName: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n iconClass: PropTypes.string.isRequired,\n level: PropTypes.number.isRequired,\n })\n ).isRequired,\n\n isLayoutModeActive: PropTypes.bool.isRequired,\n duplicateWidget: PropTypes.func.isRequired,\n }),\n suppressedControls: PropTypes.object,\n children: PropTypes.node,\n};\n\nKPIWidgetLiveControls.defaultProps = {};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: row;\n padding: 12px;\n justify-content: center;\n`;\n\nconst Box = styled.div`\n border: 1px solid ${({theme}) => theme.colors.palette.grey.silver};\n padding: 10px;\n border-radius: 4px;\n`;\n\nexport default function WidgetValidationErrorMessage({ error }) {\n return (\n \n \n \n {error}\n \n \n \n );\n}\n\nWidgetValidationErrorMessage.propTypes = {\n error: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nconst Box = styled.div``;\n\nconst Root = styled.div`\n margin-left: auto;\n margin-right: auto;\n\n font-size: ${({variant}) => {\n switch(variant) {\n case 'small': return '5px';\n case 'medium': return '8px';\n case 'large': return '12px';\n }\n }};\n\n ${Box} {\n display: inline-block;\n width: 1.2em;\n height: 2em;\n background-color: ${({theme}) => theme.colors.palette.blue.awesome};\n\n margin-left: 0.2em;\n margin-right: 0.2em;\n\n animation-name: box-grow;\n animation-duration: 1.6s;\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n animation-direction: both;\n\n :nth-child(2) {\n animation-delay: 0.2s;\n }\n\n :nth-child(3) {\n animation-delay: 0.4s;\n }\n }\n\n @keyframes box-grow {\n 0%, 90%, 100% {\n transform: scale(0.4);\n }\n 50% {\n transform: scale(1.0);\n }\n }\n`;\n\nfunction LoadingIndicator({\n variant,\n ...otherProps\n}) {\n return (\n \n \n \n \n \n );\n}\n\nLoadingIndicator.propTypes = {\n variant: PropTypes.oneOf([\n 'small',\n 'medium',\n 'large',\n ]),\n};\n\nLoadingIndicator.defaultProps = {\n variant: 'medium',\n};\n\nexport default LoadingIndicator;\n","import LoadingIndicator from './LoadingIndicator';\n\nexport default LoadingIndicator;\n","import React from 'react';\nimport LoadingIndicator from 'Common/components/LoadingIndicator';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: row;\n padding: 12px;\n justify-content: center;\n`;\n\nconst Box = styled.div`\n border: 1px solid ${({theme}) => theme.colors.palette.grey.silver};\n padding: 10px;\n border-radius: 4px;\n`;\n\nexport default function WidgetLoadingIndicator() {\n return (\n \n \n \n \n \n );\n}\n","import React from 'react';\nimport styled, { css } from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { Body5 } from 'Common/components/typography';\nimport themeColors from 'Common/theme/default';\n\nconst LayoutWrapper = styled.div`\n box-sizing: border-box;\n display: inline-flex;\n max-width: 100%;\n position: relative;\n padding: auto;\n min-height: 1.3em;\n\n ${({ $canEdit }) => $canEdit && css`\n cursor: text;\n `}\n`;\n\nconst BaseTitle = styled(Body5)`\n color: ${props => props.textColor};\n border: none;\n border-bottom: 1px solid transparent;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n overflow: hidden;\n`;\n\nconst StyledInputTitle = styled(BaseTitle).attrs(props => (\n {\n as: 'input',\n title: props.value,\n }))`\n border-bottom-color: ${({theme}) => theme.colors.palette.grey.ash};\n outline: none;\n padding: 0;\n position: absolute;\n width: 100%;\n text-overflow: ellipsis;\n transition: border-bottom-color .250s ease-in-out;\n\n :focus {\n border-bottom-color: ${({theme}) => theme.colors.palette.black};\n }\n :not(:focus) {\n ::placeholder {\n color: ${props => props.textColor};\n }\n }\n`;\n\nconst HiddenTitle = styled(BaseTitle).attrs(props => {\n let style = { minWidth: props.inputMinWidth };\n style.maxWidth = props.inputMaxWidth >= 0 ? props.inputMaxWidth : '100%';\n return {style};\n})`\n box-sizing: border-box;\n opacity: 0;\n white-space: pre;\n\n /* Be sure to pass through pointer events to not steal clicks from the input */\n pointer-events: none;\n`;\n\nconst ShownTitle = styled(BaseTitle).attrs(props => {\n let style = { minWidth: props.inputMinWidth };\n style.maxWidth = props.inputMaxWidth >= 0 ? props.inputMaxWidth : '100%';\n let attributes = {\n title: props.title ? props.title : undefined,\n style\n };\n return {attributes};\n})`\n color: ${props => props.textColor};\n position: absolute;\n text-overflow: ellipsis;\n white-space: pre;\n width: 100%;\n`;\n\n/**\n * This component horizontally resizes an input or span based on the given value\n * and the width limitations. Its attempts to inherit its typography from its parent\n * so create a wrapper component around it to define those properties.\n */\nexport default class AutoResizeTitle extends React.PureComponent {\n\n static propTypes = {\n canEdit: PropTypes.bool.isRequired,\n defaultTitleText: PropTypes.string,\n minWidth: PropTypes.number,\n maxWidth: PropTypes.number, /** if no maxWidth assume its 100% width */\n textColor: PropTypes.string,\n type: PropTypes.string.isRequired,\n value: PropTypes.string,\n\n onChange: PropTypes.func,\n };\n\n static defaultProps = {\n defaultTitleText: '',\n minWidth: 150,\n textColor: themeColors.colors.palette.black,\n value: '',\n\n onChange: () => {},\n };\n\n constructor(props) {\n super(props);\n\n this.inputEl = React.createRef();\n }\n\n _handleBlur = (event) => {\n\n if (this.inputEl.current) {\n this.inputEl.current.scrollLeft = 0;\n }\n\n // if we blur when the current value of the input is the empty string,\n // we want to change the value to match the placeholder so we don't\n // save the empty string value as the title\n if (!this.inputEl.current?.value && this.props.onChange)\n {\n this.props.onChange({\n target: {\n value: this._getPlaceholder(this.inputEl.current?.value, this.props.defaultTitleText)\n }\n });\n }\n };\n\n _handleClick = (event) => {\n // We are taking complete control over this click\n event.preventDefault();\n event.stopPropagation();\n\n if (this.props.canEdit && this.inputEl.current) {\n this.inputEl.current.focus();\n }\n };\n\n _getTitleValue = (value, defaultValue) => {\n // We want to preserve the empty string as a valid value\n // for the title if the user is actively editing it, so we\n // will not use the default value when actively editing the title\n return document.activeElement === this.inputEl.current\n ? value\n : value || defaultValue;\n };\n\n _getPlaceholder = (value, defaultValue) => {\n return value ? '' : defaultValue;\n };\n\n render() {\n const {\n canEdit,\n defaultTitleText,\n maxWidth,\n minWidth,\n onChange,\n textColor,\n value\n } = this.props;\n\n const placeholder = this._getPlaceholder(value, defaultTitleText);\n\n return (\n \n {canEdit\n ? \n : \n {value || defaultTitleText}\n \n }\n \n {this._getTitleValue(value, defaultTitleText)}\n \n \n );\n }\n}\n","import AutoResizeTitle from './AutoResizeTitle';\n\nexport default AutoResizeTitle;\n","import React from 'react';\nimport styled,{ css } from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport { Heading2, FontWeight } from 'Common/components/typography';\nimport isEmpty from 'lodash/isEmpty';\n\nimport AutoResizeTitle from \"Common/components/AutoResizeTitle\";\nimport Icon from 'Common/components/Icon';\nimport InfoCircle from 'Common/components/InfoCircle';\n\nconst Root = styled.div.attrs(props => {\n let style = {};\n\n style.paddingLeft = props.$isPrint\n ? '8px'\n : props.$isDragEnabled // Leave room for drag handle\n ? '0'\n : props.theme.layout.widget.horizontalPadding;\n\n style.paddingRight = props.$isPrint\n ? '8px'\n : props.theme.layout.widget.horizontalPadding;\n\n if (props.$isPrint) {\n style.paddingTop = '6px';\n }\n else {\n style.minHeight = 52;\n }\n\n return isEmpty(style) ? {} : {style};\n})`\n position: relative;\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n overflow: hidden;\n width: 100%;\n`;\n\nconst AssetTitleActionContainer = styled.div.attrs(props => {\n return props.isPrint ? {} : { style: { height: '44' } };\n})`\n min-width: 1px;\n flex: 1 1 auto;\n display: inline-flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n width: 100%;\n`;\n\nconst DragHandle = styled.div`\n flex: 0 0 auto;\n width: ${({theme}) => theme.layout.widget.horizontalPadding};\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 15px;\n color: ${({theme}) => theme.colors.darkText.mediumEmphasis};\n`;\n\nconst TextContainer = styled(Heading2).attrs(props => {\n let style = {};\n\n if (props.containerMinWidth) {\n style.minWidth = props.containerMinWidth;\n }\n\n if (props.isPrint) {\n style.fontSize = 12;\n }\n\n return { style };\n})`\n flex: 0 1 auto;\n display: inline-flex;\n align-items: center;\n`;\n\nconst TitleContainer = styled(TextContainer)`\n flex: 0 1 auto;\n`;\n\nconst AssetDisplay = styled.div.attrs(props => ({\n title: props.title ? props.title : undefined,\n}))`\n border: 1px solid transparent;\n color: ${props => props.hasError ? props.theme.colors.palette.error.red : props.theme.colors.palette.black };\n font-weight: ${FontWeight.regular};\n min-width: 1px;\n width: 100%;\n overflow: hidden;\n padding-left: .2em;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nconst frameTitleIconButtonWidth = 44;\nconst FrameTitleIconButton = styled.button`\n background: none;\n border: none;\n margin: 0;\n outline: none;\n padding: 0;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n width: ${frameTitleIconButtonWidth}px;\n height: 44px;\n\n transition: background-color 0.25s;\n color: ${({theme}) => theme.colors.palette.grey.manatee};\n background-color: transparent;\n border-radius: 4px;\n\n &:hover {\n cursor: pointer;\n background-color: ${({ theme }) => theme.colors.palette.grey.cloud};\n }\n`;\n\nconst DeleteIconButton = styled(FrameTitleIconButton)`\n position: relative;\n right: -15px;\n`;\n\nconst ShowHideIcon = styled(Icon)`\n font-size: 14px;\n\n transition: transform 0.25s;\n\n ${({inverted}) => inverted && css`\n transform: rotate(-180deg);\n `}\n`;\n\nconst DeleteIcon = styled(Icon)`\n font-size: 14px;\n`;\n\nconst TimeRangeDisplayContainer = styled.div`\n padding-top: 9px;\n`;\n\nconst InfoCircleContainer = styled.div`\n height: 44px;\n padding-left: 9px;\n display: flex;\n align-items: center;\n`;\n\nconst assetMinWidth = 40;\n\nexport default function FrameTitle({\n assetError,\n assetValue,\n defaultTitleText,\n isPrint,\n showAsset,\n showDelete,\n shouldShowLiveControls,\n canEditTitle,\n showLiveControlsOnClick,\n showLiveControlsButton,\n titleValue,\n titleOnChange,\n infoTooltipContent,\n deleteOnClick,\n timeRangeDisplay,\n isDragEnabled,\n dragHandleProps,\n}) {\n const hasInfoCircle = !!infoTooltipContent;\n const minTitleWidth = isPrint ? 1 : 44;\n\n return (\n \n \n {isDragEnabled && (\n \n \n \n )}\n \n \n \n {showAsset && \n \n {assetValue}\n \n }\n {showLiveControlsButton && !isPrint && (\n \n \n \n )}\n \n {!!timeRangeDisplay && (\n \n {timeRangeDisplay}\n \n )}\n {hasInfoCircle && !isPrint && !showDelete && (\n \n \n {infoTooltipContent}\n \n \n )}\n {showDelete && (\n \n \n \n )}\n \n );\n}\n\nFrameTitle.propTypes = {\n assetValue: PropTypes.string,\n assetError: PropTypes.string,\n defaultTitleText: PropTypes.string,\n isPrint: PropTypes.bool.isRequired,\n shouldShowLiveControls: PropTypes.bool.isRequired,\n canEditTitle: PropTypes.bool.isRequired,\n showAsset: PropTypes.bool.isRequired,\n showDelete: PropTypes.bool.isRequired,\n showLiveControlsButton: PropTypes.bool.isRequired,\n titleValue: PropTypes.string,\n infoTooltipContent: PropTypes.node,\n\n showLiveControlsOnClick: PropTypes.func.isRequired,\n titleOnChange: PropTypes.func.isRequired,\n deleteOnClick: PropTypes.func.isRequired,\n\n assets: PropTypes.array,\n timeRangeDisplay: PropTypes.node,\n isDragEnabled: PropTypes.bool,\n dragHandleProps: PropTypes.object,\n};\n\nFrameTitle.defaultProps = {\n assetValue: '',\n assetError: '',\n defaultTitleText: '',\n showAsset: false,\n infoTooltipContent: '',\n isDragEnabled: false,\n dragHandleProps: {},\n\n deleteOnClick: () => {},\n showLiveControlsOnClick: () => {},\n titleOnChange: () => {},\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport { Subheading2 } from 'Common/components/typography';\n\nimport AutoResizeTitle from \"Common/components/AutoResizeTitle\";\nimport Icon from 'Common/components/Icon';\nimport themeColors from 'Common/theme/default';\n\nconst Container = styled.div`\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n`;\n\nconst SectionContainer = styled.div`\n flex: 0 0 auto;\n padding-left: 7px;\n`;\n\nconst SectionAction = styled(Subheading2)`\n align-items: center;\n display: flex;\n height: 100%;\n .fa {\n cursor: pointer;\n transform: rotate(-45deg);\n }\n\n ${(props) => props.collapsed && `\n .fa {\n transform: rotate(-90deg);\n }\n `}\n`;\n\nconst TextContainer = styled(Subheading2).attrs(props => {\n let style = {};\n\n if (props.isPrint) {\n style.fontSize = 12;\n }\n\n return { style };\n })`\n flex: 1 1 auto;\n display: inline-flex;\n min-width: 1px;\n padding: 7px 0;\n`;\n\n\nfunction SectionFrameTitle (props) {\n return (\n \n \n \n {!props.isPrint && }\n \n \n \n \n \n \n );\n}\n\nSectionFrameTitle.propTypes = {\n isCollapsed: PropTypes.bool.isRequired,\n isPrint: PropTypes.bool.isRequired,\n titleValue: PropTypes.string.isRequired,\n\n sectionOnClick: PropTypes.func.isRequired,\n};\n\nexport default React.memo(SectionFrameTitle);\n","import React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport { Body5 } from 'Common/components/typography';\nimport Icon from 'Common/components/Icon';\n\nconst Container = styled.div`\n position: relative;\n display: block;\n flex-direction: row;\n flex-wrap: nowrap;\n overflow: hidden;\n width: 100%;\n`;\n\nconst StyledText = styled(Body5)`\n padding-left: 15px; \n color: ${({theme}) => theme.colors.palette.grey.manatee };\n`;\n\nconst StyledIcon = styled(Icon)`\n font-size: 9px;\n margin-right: 6px;\n`;\n\n\n/**\n * Container for TimeRange title and detail.\n * Rendered when containing FrameHeader width shrinks beyond a specified breakpoint\n */\nexport default function TimeRangeDisplaySmall({\n title,\n detail\n}) \n{\n return (\n \n \n \n {title} {detail}\n \n \n );\n}\n\nTimeRangeDisplaySmall.propTypes = {\n title: PropTypes.string,\n detail: PropTypes.string,\n};\n","import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { Heading4 } from 'Common/components/typography';\nimport { generateFilterExpressionText, HUMAN_READABLE } from 'Common/components/FilterBuilderText/FilterBuilderUtils';\nimport { useTranslator } from 'Common/hooks/useTranslation';\n\nconst expressionIndent = 10;\n\n/**\n * Take the formatted filters and expand them to a pretty format.\n * ie\n * ( a = 1 )\n * AND\n * (\n * ( b = 2 )\n * OR\n * ( c = 3 )\n * )\n */\n\nfunction FilterBuilderPrettyFormat({\n formattedFilters,\n}) {\n const translator = useTranslator();\n\n const prettyFormattedText = useMemo(() => {\n const numberOfFilters = formattedFilters.length;\n const hasMultipleFilters = numberOfFilters > 1;\n\n return formattedFilters\n .map(({ expressions, combine_type }, filterIndex) => {\n const combineType = combine_type || 'or';\n\n // [FUTURUEHACK] combine_type:custom does not yet exist\n if (combineType === 'custom') {\n throw 'This functionality has not yet been implemented';\n }\n\n const hasMultipleExpressions = expressions.length > 1;\n const expandedExpressions = expressions.reduce((expandedExps, exp, expIndex) => {\n let expressionText = generateFilterExpressionText(exp, HUMAN_READABLE, translator);\n const paddingLeft = hasMultipleFilters ? expressionIndent : 0;\n\n if (hasMultipleExpressions) {\n if (expIndex > 0) {\n expandedExps.push((\n {translator(`filter.${combineType}`).toUpperCase()}
\n ));\n }\n expressionText = `( ${expressionText} )`;\n }\n\n expandedExps.push((\n {expressionText}
\n ));\n\n return expandedExps;\n }, []);\n\n if (hasMultipleFilters) {\n return (\n \n {'( '}\n {expandedExpressions}\n {' )'}\n {numberOfFilters !== (filterIndex + 1)\n ?
{translator(`filter.and`).toUpperCase()}
\n : null\n }\n
\n {translator('filter.title')}\n
\n {prettyFormattedText}\n \n );\n}\n\nFilterBuilderPrettyFormat.propTypes = {\n formattedFilters: PropTypes.arrayOf(\n PropTypes.shape({\n expressions: PropTypes.arrayOf(\n PropTypes.shape({\n lhs: PropTypes.any.isRequired,\n op: PropTypes.any.isRequired,\n rhs: PropTypes.any.isRequired,\n })\n ).isRequired,\n combine_type: PropTypes.oneOf(['and', 'or'])\n })\n ).isRequired,\n};\n\nexport default FilterBuilderPrettyFormat;\n","import React, { useMemo } from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { Body5 } from 'Common/components/typography';\nimport Icon from 'Common/components/Icon';\nimport { TouchableTooltipTarget } from 'Common/components/Tooltip';\nimport { generateFilterText, HUMAN_READABLE } from 'Common/components/FilterBuilderText/FilterBuilderUtils';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport FilterBuilderPrettyFormat from './FilterBuilderPrettyFormat';\n\nconst StyledText = styled(Body5)`\n color: ${({theme}) => theme.colors.palette.grey.manatee };\n`;\n\nconst StyledIcon = styled(Icon)`\n font-size: 9px;\n margin-right: 6px;\n`;\n\nconst HelpText = styled.span`\n border-bottom: 1px dashed ${({theme}) => theme.colors.palette.heatMap.green};\n cursor: pointer;\n`;\n\nconst FilterBuilderTextContainer = styled.div`\n padding: 0 ${({theme}) => theme.layout.widget.horizontalPadding };\n min-height: 19px;\n max-width: 300px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\n\nfunction FilterBuilderText({\n formattedFilters\n}) {\n const translator = useTranslator();\n\n const tooltipContent = ();\n\n const helpText = useMemo(() => {\n return generateFilterText(formattedFilters, HUMAN_READABLE, translator);\n }, [formattedFilters, translator]);\n\n return (\n \n \n \n \n {helpText}\n \n \n \n );\n}\n\nFilterBuilderText.propTypes = {\n formattedFilters: PropTypes.array.isRequired\n};\n\nexport default FilterBuilderText;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Icon from 'Common/components/Icon';\n\nimport { Heading3, Body4, FontWeight, FontSize } from 'Common/components/typography';\n\nconst StyledPrimary = styled.span`\n text-align: right;\n min-width: 250px;\n`;\n\nconst StyledPrimaryTitle = styled(Heading3)``;\n\nconst StyledPrimaryDetails = styled(Heading3)`\n font-weight: ${FontWeight.medium}\n`;\n\n\nconst StyledSubtitle = styled(Body4)`\n text-align: right;\n display: block;\n color: ${({theme}) => theme.colors.darkText.mediumEmphasis };\n`;\n\nconst PaddedIcon = styled(Icon)`\n font-weight: ${FontWeight.medium};\n font-size: ${FontSize.size3}px;\n padding: 0 6px;\n`;\n\nconst Root = styled.span`\n width: 100%;\n display: inline-block;\n vertical-align: middle;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n text-align: right;\n cursor: ${props => props.isDropdownTrigger ? \"pointer\" : \"inherit\"};\n user-select: none;\n\n &:hover {\n background-color: ${({isDropdownTrigger, theme}) => isDropdownTrigger ? theme.colors.palette.grey.cloud : \"inherit\"};\n }\n`;\n\nexport default function TimeRangeDisplay(props) {\n const {\n description,\n isDropdownTrigger,\n onClick,\n } = props;\n\n const { primary, secondary } = description;\n\n return(\n \n \n \n {primary.title}\n \n {\n primary.detail &&\n {primary.detail}\n }\n \n {\n isDropdownTrigger &&\n \n }\n {secondary.title}\n \n );\n}\n\nTimeRangeDisplay.propTypes = {\n description: PropTypes.shape({\n primary: PropTypes.shape({\n title: PropTypes.string.isRequired,\n detail: PropTypes.string.isRequired,\n }).isRequired,\n secondary: PropTypes.shape({\n title: PropTypes.string.isRequired,\n }).isRequired,\n }),\n isDropdownTrigger: PropTypes.bool,\n onClick: PropTypes.func,\n};\n\nTimeRangeDisplay.defaultProps = {\n isDropdownTrigger: false,\n onClick: () => { },\n};\n","import React, { useState, useCallback, useMemo } from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport FrameTitle from 'Common/components/WidgetFrame/FrameTitle';\nimport SectionFrameTitle from 'Common/components/WidgetFrame/SectionFrameTitle';\nimport TimeRangeDisplaySmall from 'Common/components/TimeRangeSelector/TimeRangeDisplaySmall';\nimport FilterBuilderText from 'Common/components/FilterBuilderText/FilterBuilderText';\nimport TimeRangeDisplay from 'Common/components/TimeRangeSelector/TimeRangeDisplay';\n\nimport useBounds from 'Common/hooks/useBounds';\nimport { useTranslator } from 'Common/hooks/useTranslation';\n\nconst Container = styled.div`\n position: relative;\n display: block;\n flex-direction: row;\n flex-wrap: nowrap;\n overflow: hidden;\n width: 100%;\n`;\n\nconst FilterBuilderTextContainer = styled.div`\n padding: 0 ${({theme}) => theme.layout.widget.horizontalPadding };\n min-height: 19px;\n`;\n\n/**\n * Container for FrameTitle, TimeRangeSmall, and FilterBuilderTextContainer. Added to manage time range visibility on resizing of widgets \n */\nexport default function FrameHeader({\n hierarchyNodes,\n hierarchyNodeValue,\n defaultTitleText,\n isPrint,\n showAsset,\n showDelete,\n shouldShowLiveControls,\n canEditTitle,\n showLiveControlsOnClick,\n showLiveControlsButton,\n titleValue,\n titleOnChange,\n infoTooltipContent,\n deleteOnClick,\n isSectionFrameTitle,\n isCollapsed,\n sectionOnClick,\n formattedFilters,\n isDragEnabled,\n dragHandleProps,\n timeRangeDescription,\n})\n{\n const [container, setContainer] = useState(null);\n const containerBounds = useBounds(container);\n const translator = useTranslator();\n\n const timeRangeBreakpointWidth = 500;\n const doesTimeRangeFit = containerBounds?.width > timeRangeBreakpointWidth;\n\n const { assetValue, assetError } = useMemo(() => {\n const fullHierarchyNode = hierarchyNodes.find(option => (option.name === hierarchyNodeValue));\n\n if (fullHierarchyNode) {\n return {\n assetValue: fullHierarchyNode?.displayName,\n assetError: '',\n };\n }\n else if (hierarchyNodes.length) {\n // We've loaded the hierarchy options but can't find it; show that\n // it's not available.\n return {\n assetValue: translator('na_symbol'),\n assetError: 'Missing Node',\n };\n }\n else {\n return {\n assetValue: '',\n assetError: '',\n };\n }\n }, [ hierarchyNodeValue, hierarchyNodes, translator ]);\n\n const renderFilterText = useCallback(() => {\n let finalFiltersText = null;\n if (formattedFilters?.length && (!shouldShowLiveControls || isPrint)) {\n finalFiltersText = (\n \n \n \n );\n }\n\n return finalFiltersText;\n }, [formattedFilters, shouldShowLiveControls, isPrint]);\n\n const timeRangeDisplay = !isSectionFrameTitle && doesTimeRangeFit && timeRangeDescription ?\n (\n \n )\n : null;\n\n const frame = isSectionFrameTitle\n ? ()\n : ();\n let timeRangeDetail = '';\n\n if (timeRangeDescription?.primary.detail) {\n timeRangeDetail = `(${timeRangeDescription.primary.detail})`;\n }\n return (\n \n {frame}\n {!isSectionFrameTitle && !doesTimeRangeFit && timeRangeDescription &&\n ()\n }\n {renderFilterText()}\n \n );\n}\n\nFrameHeader.propTypes = {\n hierarchyNodes: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n })\n ).isRequired,\n hierarchyNodeValue: PropTypes.string,\n defaultTitleText: PropTypes.string,\n isPrint: PropTypes.bool.isRequired,\n shouldShowLiveControls: PropTypes.bool,\n canEditTitle: PropTypes.bool,\n showAsset: PropTypes.bool,\n showDelete: PropTypes.bool,\n showLiveControlsButton: PropTypes.bool,\n titleValue: PropTypes.string,\n infoTooltipContent: PropTypes.node,\n\n showLiveControlsOnClick: PropTypes.func,\n titleOnChange: PropTypes.func,\n deleteOnClick: PropTypes.func,\n\n isSectionFrameTitle: PropTypes.bool,\n formattedFilters: PropTypes.array,\n isCollapsed: PropTypes.bool,\n timeRangeDescription: PropTypes.object,\n sectionOnClick: PropTypes.func,\n isDragEnabled: PropTypes.bool,\n dragHandleProps: PropTypes.object,\n};\n\nFrameHeader.defaultProps = {\n defaultTitleText: '',\n showAsset: false,\n showDelete: false,\n infoTooltipContent: '',\n isDragEnabled: false,\n dragHandleProps: {},\n\n deleteOnClick: () => {},\n showLiveControlsOnClick: () => {},\n titleOnChange: () => {},\n};\n","import { useEffect, useRef } from 'react';\nimport { FAILURE, SUCCESS } from 'Common/data/RequestStatus';\n\nexport default function usePersistWidgetHeight(dataRequestStatus) {\n \n // Keep around a measurement of the most recent height of the widget and use\n // it as the height of the loading indicator. This stops the layout from\n // jumping around when the widget switches in and out of loading.\n\n let widgetContainerRef = useRef(null);\n let lastWidgetHeightRef = useRef(null);\n\n useEffect(() => {\n if (dataRequestStatus === FAILURE) {\n // Reset the widget height.\n lastWidgetHeightRef.current = null;\n }\n else if (dataRequestStatus === SUCCESS) {\n // Measure the widget height and save it.\n lastWidgetHeightRef.current = widgetContainerRef.current?.getBoundingClientRect()?.height || null;\n }\n }, [ dataRequestStatus, lastWidgetHeightRef, widgetContainerRef ]);\n\n return {\n lastWidgetHeight: lastWidgetHeightRef.current,\n widgetContainerRef\n };\n}\n","import React, { useCallback, useMemo } from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport KPIContent from './KPIContent';\nimport { SUCCESS } from 'Common/data/RequestStatus';\nimport * as TrendGoodness from 'Common/components/TrendDot/TrendGoodness';\nimport useKpiController from './internal/useKpiController';\nimport FormattedDatum from 'Common/components/FormattedDatum';\nimport KPIWidgetLiveControls from './KPIWidgetLiveControls';\nimport WidgetFrame from 'Common/components/WidgetFrame/WidgetFrame';\nimport WidgetValidationErrorMessage from 'Common/components/WidgetFrame/WidgetValidationErrorMessage';\nimport WidgetLoadingIndicator from 'Common/components/WidgetFrame/WidgetLoadingIndicator';\nimport FrameHeader from 'Common/components/WidgetFrame/FrameHeader';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport { generateFilterText, HUMAN_READABLE } from 'Common/components/FilterBuilderText/FilterBuilderUtils';\nimport usePersistWidgetHeight from 'Common/hooks/usePersistWidgetHeight';\nimport RequestState from 'Common/types/RequestState/RequestState';\n\nconst emptyArray = [];\n\nconst LoadingContainer = styled.div.attrs(({ $minHeight }) => {\n if ($minHeight) {\n return {\n style: { minHeight: `${$minHeight}px` }\n };\n }\n})``;\n\nconst KPIContainer = styled.div`\n padding-bottom: ${({ theme }) => theme.layout.widget.verticalPadding};\n padding-left: ${({ theme }) => theme.layout.widget.horizontalPadding};\n padding-right: ${({ theme }) => theme.layout.widget.horizontalPadding};\n padding-top: ${({ theme }) => theme.layout.widget.verticalPadding};\n`;\n \nexport default function KPIWidget({\n alwaysShowAsset,\n widgetStf,\n widgetState,\n areLiveControlsVisible,\n actions,\n timeRange,\n reportHierarchyNode,\n explorationPath,\n mutable,\n dragHandleProps,\n isDragEnabled,\n isLayoutModeActive,\n dataService,\n isPrint,\n hideTrend,\n printConfig,\n suppressedControls,\n suppressDelete,\n}) {\n const translator = useTranslator();\n const controller = useKpiController({\n widgetStf,\n setWidgetStf: actions.setWidgetStf,\n widgetState,\n setWidgetState: actions.setWidgetState,\n setWidgetPrintStatus: actions.setWidgetPrintStatus,\n setWidgetLiveControlsVisibility: actions.setWidgetLiveControlsVisibility,\n areLiveControlsVisible: areLiveControlsVisible,\n dataService: dataService,\n pageTimeRange: timeRange,\n pageExplorationPath: explorationPath,\n reportHierarchyNode,\n isPrint,\n mutable,\n isLayoutModeActive,\n duplicateWidget: actions.duplicateWidget\n });\n\n const {\n isInitialized,\n title,\n defaultTitle,\n setTitle,\n dataRequest: kpiWidgetDataRequest,\n timeRangeDescription,\n tooltipContent,\n formattedFilters,\n followAppBarHierarchyNode,\n hierarchyNodeOptions,\n hierarchyNode,\n showLiveControls,\n toggleShowLiveControls,\n supportsLiveControls,\n shouldShowFilterText,\n } = controller;\n\n const handleTitleChange = useCallback((event) => {\n setTitle(event.target.value);\n }, [ setTitle ]);\n\n const noColor = isPrint && printConfig.noColor;\n\n const {\n widgetContainerRef,\n lastWidgetHeight\n } = usePersistWidgetHeight(kpiWidgetDataRequest?.status);\n\n const contentElement = useMemo(() => {\n if (!RequestState.isRequestCompleted(kpiWidgetDataRequest)) {\n return (\n \n \n \n );\n }\n else if (kpiWidgetDataRequest?.status === SUCCESS) {\n const trend = kpiWidgetDataRequest.response.trendData;\n const kpiData = (\n \n );\n return (\n \n \n \n );\n }\n else {\n const erroMessage = kpiWidgetDataRequest?.error || translator('error_literal');\n return (\n \n );\n }\n }, [ kpiWidgetDataRequest, noColor, isPrint, hideTrend, translator, lastWidgetHeight, widgetContainerRef ]);\n\n let finalTooltipContent = (\n \n \n {tooltipContent.displayName}\n
\n {tooltipContent.description}
\n
\n {tooltipContent.trendDescription}\n \n );\n\n const filtersLabelLiteral = translator('filters_label');\n\n const filtersText = useMemo(() => {\n return generateFilterText(formattedFilters, HUMAN_READABLE, translator);\n }, [formattedFilters, translator]);\n\n if (filtersText && shouldShowFilterText) {\n finalTooltipContent = (\n \n {!!finalTooltipContent && (\n \n {finalTooltipContent}\n
\n \n )}\n {filtersLabelLiteral}
\n {filtersText}\n \n );\n }\n\n return (\n \n )}\n liveControls={isInitialized && mutable && showLiveControls && (\n \n )}\n >\n {contentElement}\n \n );\n}\n\nKPIWidget.defaultProps = {\n hideTrend: false,\n};\n\nKPIWidget.propTypes = {\n widgetStf: PropTypes.object.isRequired,\n widgetState: PropTypes.object,\n areLiveControlsVisible: PropTypes.bool.isRequired,\n\n actions: PropTypes.shape({\n setWidgetStf: PropTypes.func.isRequired,\n setWidgetState: PropTypes.func.isRequired,\n setWidgetPrintStatus: PropTypes.func.isRequired,\n deleteWidget: PropTypes.func.isRequired,\n duplicateWidget: PropTypes.func.isRequired,\n setWidgetLiveControlsVisibility: PropTypes.func.isRequired,\n }).isRequired,\n\n timeRange: PropTypes.object,\n explorationPath: PropTypes.object,\n reportHierarchyNode: PropTypes.shape({\n name: PropTypes.string,\n displayName: PropTypes.string\n }).isRequired,\n\n alwaysShowAsset: PropTypes.bool,\n mutable: PropTypes.bool.isRequired,\n parentTitle: PropTypes.string,\n dragHandleProps: PropTypes.object,\n isDragEnabled: PropTypes.bool.isRequired,\n isLayoutModeActive: PropTypes.bool.isRequired,\n isPrint: PropTypes.bool.isRequired,\n hideTrend: PropTypes.bool.isRequired,\n printConfig: PropTypes.object,\n suppressedControls: PropTypes.object,\n suppressDelete: PropTypes.bool,\n\n dataService: PropTypes.shape({\n getKpiWidgetData: PropTypes.func.isRequired,\n getColumnConfig: PropTypes.func.isRequired,\n getColumnHelpText: PropTypes.func.isRequired,\n getTimeRangePrimaryDetails: PropTypes.func.isRequired,\n getTimeRangeSecondaryDetails: PropTypes.func.isRequired,\n }).isRequired,\n};\n","import { useEffect, useState } from 'react';\nimport ParamTypes from 'Common/util/ParamTypes';\nimport { paramTest } from 'Common/util/ParamTypes/ParamTypes';\n\nconst paramTypes = ParamTypes.shape({\n dataService: ParamTypes.shape({\n getHierarchyOptions: ParamTypes.func.isRequired,\n getSliceFilterOptions: ParamTypes.func.isRequired,\n getKPIGroupWidgetFieldOptions: ParamTypes.func.isRequired,\n }).isRequired,\n});\n\nexport default function useKPIGroupWidgetInitialization(parameters) {\n paramTest(parameters, paramTypes, 'useKPIGroupWidgetInitialization');\n\n const { dataService } = parameters;\n\n const [ isInitialized, setIsInitialized ] = useState(false);\n const [ liveControlOptions, setLiveControlOptions ] = useState({\n hierarchyNodeOptions: [],\n filterOptions: [],\n columnOptions: {},\n });\n\n useEffect(() => {\n let aborted = false;\n\n async function run() {\n const [\n hierarchyNodeOptions,\n filterOptions,\n columnOptions,\n ] = await Promise.all([\n dataService.getHierarchyOptions(),\n dataService.getSliceFilterOptions(),\n dataService.getKPIGroupWidgetFieldOptions(),\n ]);\n\n if (!aborted) {\n setLiveControlOptions({\n hierarchyNodeOptions,\n filterOptions,\n columnOptions,\n });\n\n setIsInitialized(true);\n }\n }\n\n run();\n\n return () => {\n aborted = true;\n };\n }, [ dataService ]);\n\n return {\n isInitialized,\n liveControlOptions,\n };\n}\n","import PropTypes from 'prop-types';\n\nexport const BLANK_ROW_TYPE = 'separator';\nexport const HEADING_TYPE = 'heading';\nexport const FIELD_TYPE = 'field';\nexport const CATEGORY_VALUE = 'category_value';\n\nexport const KPI_GROUP_COLUMNS_PROPTYPE = PropTypes.arrayOf(\n PropTypes.oneOfType([\n PropTypes.shape({ // separator or heading\n type: PropTypes.oneOf([BLANK_ROW_TYPE, HEADING_TYPE]),\n name: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n }),\n PropTypes.shape({ // actual field\n type: PropTypes.oneOf([FIELD_TYPE]),\n name: PropTypes.string.isRequired,\n channel: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n fieldType: PropTypes.string.isRequired,\n }),\n PropTypes.shape({ // spark dimension\n name: PropTypes.string.isRequired,\n type: PropTypes.oneOf([FIELD_TYPE]),\n displayName: PropTypes.string.isRequired,\n fieldType: PropTypes.oneOf(['category_value']).isRequired,\n dimensionVisualization: PropTypes.shape({\n visualization: PropTypes.string.isRequired,\n metric: PropTypes.string.isRequired,\n orderBy: PropTypes.string.isRequired,\n maxElementsShown: PropTypes.number,\n }),\n }),\n ]),\n);\n\n","import { useCallback, useMemo } from 'react';\nimport ParamTypes from 'Common/util/ParamTypes';\nimport { paramTest } from 'Common/util/ParamTypes/ParamTypes';\nimport TimeRange from 'Common/types/TimeRange/TimeRange';\nimport Filters from 'Common/types/Filters/Filters';\nimport { useWidgetCache } from 'Common/components/Dashboard/DashboardCache';\nimport { getMaxAgeForRepeatingRequest } from 'Common/hooks/requests/useRepeatingRequest';\nimport { FIELD_TYPE } from 'Common/components/widgets/KPIGroupWidget/KPIGroupWidgetConstants';\nimport useRepeatingRequestWithStatus from 'Common/hooks/requests/useRepeatingRequestWithStatus';\nimport { useTranslator } from 'Common/hooks/useTranslation';\n\nconst paramTypes = ParamTypes.shape({\n getKPIGroupWidgetData: ParamTypes.func.isRequired,\n contents: ParamTypes.array.isRequired,\n hierarchyNode: ParamTypes.string.isRequired,\n pageFilters: Filters.paramType,\n widgetFilters: Filters.paramType,\n timeRange: TimeRange.timeRangeParamType.isRequired,\n updateInterval: ParamTypes.number,\n});\n\nexport default function useKPIGroupWidgetData(parameters) {\n paramTest(parameters, paramTypes, 'useKPIGroupWidgetData');\n\n const translator = useTranslator();\n\n const {\n getKPIGroupWidgetData,\n contents,\n hierarchyNode,\n pageFilters,\n widgetFilters,\n timeRange,\n updateInterval,\n } = parameters;\n\n const disableRepeat = useMemo(() => {\n // Disable the repeat if there's no update interval or if the time\n // range is not suitable.\n return (\n !updateInterval ||\n !TimeRange.shouldRepeatRequestWithTimeRange(timeRange)\n );\n }, [ timeRange, updateInterval ]);\n\n // getting data\n const getKPIGroupWidgetDataCache = useWidgetCache({\n cacheId: 'getKPIGroupWidgetData',\n load: ({ abortSignal }, args) => {\n return getKPIGroupWidgetData({\n ...args,\n abortSignal,\n });\n },\n });\n\n // A cached version of `getKPIGroupWidgetData`\n const getKPIGroupWidgetDataCached = useCallback((args) => {\n const { abortSignal, ...otherArgs } = args;\n const maxAge = getMaxAgeForRepeatingRequest(disableRepeat, updateInterval);\n\n return getKPIGroupWidgetDataCache.get(\n {\n abortSignal,\n maxAge,\n },\n otherArgs\n );\n }, [ disableRepeat, getKPIGroupWidgetDataCache, updateInterval ]);\n\n const sendRequest = useCallback(async ({ abortSignal }) => {\n let result;\n try {\n result = await getKPIGroupWidgetDataCached({\n abortSignal,\n fields: contents.reduce((acc, item) => {\n if (item.type === FIELD_TYPE) {\n acc.push(item.field);\n }\n return acc;\n }, []),\n filters: Filters.mergeFilters(widgetFilters, pageFilters),\n hierarchyNode,\n timeRange,\n });\n\n if (result?.response) {\n result = {\n error: null,\n response: {\n data: result.response,\n contents\n }\n };\n }\n }\n catch (err) {\n console.error(err);\n result = { error: translator('error_literal') };\n }\n\n return result;\n }, [contents, hierarchyNode, widgetFilters, pageFilters, timeRange, getKPIGroupWidgetDataCached, translator ]);\n\n return useRepeatingRequestWithStatus({\n sendRequest: sendRequest,\n delayMs: updateInterval || 0,\n // Disable the repeat if there's no update interval or if the time\n // range is not an open interval.\n disableRepeat,\n });\n}\n","import ParamTypes from 'Common/util/ParamTypes';\nimport { paramTest } from 'Common/util/ParamTypes/ParamTypes';\nimport TimeRange from 'Common/types/TimeRange/TimeRange';\nimport explorationPathParamType from 'Common/types/stf/explorationPathParamType';\nimport { useEffect, useMemo, useCallback } from 'react';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport useKPIGroupWidgetInitialization from './useKPIGroupWidgetInitialization';\nimport useKPIGroupWidgetData from './useKPIGroupWidgetData';\nimport getPrimaryDescription from \"Common/components/TimeRangeSelector/helpers/getPrimaryDescription\";\nimport getSecondaryDescription from \"Common/components/TimeRangeSelector/helpers/getSecondaryDescription\";\nimport useFormattedFilters from 'Common/hooks/useFormattedFilters';\nimport { getDataUpdateInterval } from 'Common/hooks/requests/useRepeatingRequest';\nimport { DIMENSION_VISUALIZATION_TYPES, DIMENSION_VISUALIZATION_ORDER_BY_TYPES } from 'Common/components/SparkVisualization/SparkDimensionConstants';\nimport useTimeRangeData, { TIME_RANGE_PRIMARY_DETAILS, TIME_RANGE_SECONDARY_DETAILS } from 'Common/components/TimeRangeSelector/hooks/useTimeRangeData';\nimport RequestState from 'Common/types/RequestState/RequestState';\nimport { BLANK_ROW_TYPE, FIELD_TYPE, HEADING_TYPE } from '../KPIGroupWidgetConstants';\n\nconst extractFiltersFromExplorationPath = (explorationPath) => {\n let filters = {};\n\n if (explorationPath?.group_filter) {\n filters.group = explorationPath.group_filter;\n }\n\n if (explorationPath?.slice_filter) {\n filters.slice = explorationPath.slice_filter;\n }\n\n if (Object.keys(filters) === 0) {\n // There were either no filters, or no exploration path.\n return null;\n }\n else {\n return filters;\n }\n};\n\nconst contentRowParamType = ParamTypes.arrayOf(\n ParamTypes.shape({\n type: ParamTypes.oneOf([\n HEADING_TYPE,\n FIELD_TYPE,\n BLANK_ROW_TYPE,\n ]).isRequired,\n // For the heading type:\n heading: ParamTypes.shape({\n displayName: ParamTypes.string,\n displayKey: ParamTypes.string,\n }),\n // For field type:\n field: ParamTypes.shape({\n name: ParamTypes.string.isRequired,\n channel: ParamTypes.string.isRequired,\n // Only for dimension fields (ie: shift)\n dimensionVisualization: ParamTypes.shape({ \n visualization: ParamTypes.oneOf(Object.values(DIMENSION_VISUALIZATION_TYPES)).isRequired,\n metric: ParamTypes.string,\n orderBy: ParamTypes.oneOf(Object.values(DIMENSION_VISUALIZATION_ORDER_BY_TYPES)),\n maxElementsShown: ParamTypes.number\n }),\n }),\n })\n).isRequired;\n\nconst paramTypes = ParamTypes.shape({\n areLiveControlsVisible: ParamTypes.bool.isRequired,\n dataService: ParamTypes.object.isRequired,\n isPrint: ParamTypes.bool.isRequired,\n mutable: ParamTypes.bool.isRequired,\n pageExplorationPath: explorationPathParamType,\n pageTimeRange: TimeRange.timeRangeParamType,\n parentTitle: ParamTypes.string,\n reportHierarchyNode: ParamTypes.shape({\n name: ParamTypes.string,\n displayName: ParamTypes.string\n }),\n setWidgetLiveControlsVisibility: ParamTypes.func.isRequired,\n setWidgetPrintStatus: ParamTypes.func.isRequired,\n setWidgetStf: ParamTypes.func.isRequired,\n widgetStf: ParamTypes.shape({\n type: ParamTypes.exactly('kpi_group_widget').isRequired,\n exploration_path: explorationPathParamType,\n rangeSelection: TimeRange.timeRangeParamType,\n hideLiveControls: ParamTypes.bool,\n hideTimeRange: ParamTypes.bool,\n contents: contentRowParamType,\n }),\n});\n\nconst useKPIGroupWidgetController = (parameters) => {\n paramTest(parameters, paramTypes, 'useKPIGroupWidgetController');\n\n const {\n areLiveControlsVisible,\n dataService,\n isPrint,\n pageExplorationPath,\n pageTimeRange,\n reportHierarchyNode,\n mutable,\n setWidgetLiveControlsVisibility,\n setWidgetPrintStatus,\n setWidgetStf,\n widgetStf,\n } = parameters;\n\n const {\n isInitialized,\n liveControlOptions,\n } = useKPIGroupWidgetInitialization({ dataService });\n\n const translator = useTranslator();\n const widgetExplorationPath = widgetStf.exploration_path;\n\n\n // hide/show livecontrol stuff\n const supportsLiveControls = !widgetStf.hideLiveControls && mutable;\n\n const toggleShowLiveControls = useCallback(() => {\n setWidgetLiveControlsVisibility(!areLiveControlsVisible);\n }, [ areLiveControlsVisible, setWidgetLiveControlsVisibility ]);\n\n\n // hierarchy stuff\n const widgetHierarchyNode = widgetExplorationPath?.asset_control?.root;\n const followAppBarHierarchyNode = !widgetHierarchyNode;\n const mergedHierarchyNode = widgetHierarchyNode || reportHierarchyNode?.name;\n\n const setHierarchyNode = useCallback((newHierarchyNode) => {\n setWidgetStf((stf) => {\n let newExplorationPath = {\n ...stf.exploration_path\n };\n if (newHierarchyNode) {\n newExplorationPath.asset_control = {\n root: newHierarchyNode,\n };\n }\n else {\n delete newExplorationPath.asset_control;\n }\n\n return {\n ...stf,\n exploration_path: newExplorationPath,\n };\n });\n }, [setWidgetStf]);\n\n\n // title stuff\n const defaultTitle = translator('kpi_group_literal');\n let title = widgetStf.title;\n if (!title && widgetStf.titleKey) {\n title = translator(widgetStf.titleKey);\n }\n const handleTitleChange = (event) => {\n const newTitle = event.target.value;\n setWidgetStf((stf) => ({\n ...stf,\n title: newTitle,\n }));\n };\n\n\n // filter stuff\n const rawSliceFilters = widgetStf.exploration_path?.slice_filter;\n\n const filters = useMemo(() => {\n if (!rawSliceFilters) {\n return {\n slice: {\n combine_type: 'and',\n expressions: [],\n }\n };\n }\n else {\n return {\n slice: rawSliceFilters\n };\n }\n }, [rawSliceFilters]);\n\n const setSliceFilters = useCallback((newFilters) => {\n setWidgetStf((stf) => ({\n ...stf,\n exploration_path: {\n ...stf.exploration_path,\n slice_filter: newFilters,\n },\n }));\n }, [setWidgetStf]);\n\n const formattedFilters = useFormattedFilters({\n sliceFilters: filters.slice,\n dataService,\n });\n\n const pageFilters = useMemo(() => {\n return extractFiltersFromExplorationPath(pageExplorationPath);\n }, [ pageExplorationPath ]);\n\n const widgetFilters = useMemo(() => {\n return extractFiltersFromExplorationPath(widgetExplorationPath);\n }, [ widgetExplorationPath ]);\n\n\n // column stuff\n const widgetContents = widgetStf.contents;\n const setContents = useCallback((updatedContents) => {\n paramTest(updatedContents, contentRowParamType, 'setContents.row');\n\n setWidgetStf((stf) => {\n return {\n ...stf,\n contents: updatedContents,\n };\n });\n }, [setWidgetStf]);\n\n\n // data stuff\n\n // Disable the update interval if the widget is in print view\n const widgetUpdateTimeInterval = isPrint ? null : widgetStf.updateTimeInterval;\n\n const dataRequest = useKPIGroupWidgetData({\n getKPIGroupWidgetData: dataService.getKPIGroupWidgetData,\n contents: widgetContents,\n hierarchyNode: mergedHierarchyNode,\n pageFilters,\n widgetFilters,\n timeRange: widgetStf.rangeSelection || pageTimeRange,\n updateInterval: getDataUpdateInterval(widgetUpdateTimeInterval),\n });\n \n\n // time range stuff\n const followPageTimeRange = !widgetStf.rangeSelection;\n const setTimeRange = useCallback((rs) => {\n setWidgetStf((stf) => ({\n ...stf,\n rangeSelection: rs,\n }));\n }, [setWidgetStf]);\n const widgetTimeRange = widgetStf.rangeSelection;\n\n const timeRangeRequests = useTimeRangeData({\n getTimeRangePrimaryDetails: dataService.getTimeRangePrimaryDetails,\n getTimeRangeSecondaryDetails: dataService.getTimeRangeSecondaryDetails,\n hierarchyNode: mergedHierarchyNode,\n timeRange: widgetStf.hideTimeRange ? undefined : widgetStf.rangeSelection,\n updateInterval: getDataUpdateInterval(widgetUpdateTimeInterval),\n });\n\n\n const timeRangeDescription = useMemo(() => {\n const primaryDetails = timeRangeRequests[TIME_RANGE_PRIMARY_DETAILS]?.response;\n const secondaryDetails = timeRangeRequests[TIME_RANGE_SECONDARY_DETAILS]?.response;\n\n if (primaryDetails && translator) {\n const primary = getPrimaryDescription({\n dimensionDetailsDisplayName: primaryDetails?.dimensionDetails.displayName,\n dimensionDetailsIsMixed: primaryDetails?.dimensionDetails.isMixed || false,\n timeRangeStart: primaryDetails?.timeRange.start,\n timeRangeEnd: primaryDetails?.timeRange.end,\n timeRangeSameDimensionValue: primaryDetails?.timeRange.sameDimensionValue || false,\n timeRangeUnits: primaryDetails?.timeRange.units,\n timeRangeProductionDayOffset: primaryDetails?.timeRange.productionDayOffset,\n atEndOfData: !!secondaryDetails?.atEndOfData,\n locale: primaryDetails.locale,\n translator: translator,\n });\n\n const secondary = getSecondaryDescription({\n range: secondaryDetails?.range,\n timeRangeStart: primaryDetails?.timeRange.start,\n timeRangeEnd: primaryDetails?.timeRange.end,\n timeRangeSameDimensionValue: primaryDetails?.timeRange.sameDimensionValue || null,\n timeRangeUnits: primaryDetails?.timeRange.units || '',\n originDay: primaryDetails?.originDay || '',\n locale: primaryDetails?.locale,\n translator: translator,\n });\n\n return {\n primary,\n secondary\n };\n }\n else {\n return null;\n }\n\n }, [timeRangeRequests, translator]);\n\n\n // print stuff\n // Effect to keep the widget's print status up to date.\n useEffect(() => {\n if (isPrint) {\n return;\n }\n\n setWidgetPrintStatus(RequestState.areAllRequestsCompleted([\n dataRequest,\n timeRangeRequests[TIME_RANGE_PRIMARY_DETAILS],\n timeRangeRequests[TIME_RANGE_SECONDARY_DETAILS],\n ]));\n }, [ isPrint, setWidgetPrintStatus, dataRequest, timeRangeRequests ]);\n\n return {\n defaultTitle,\n handleTitleChange,\n title,\n\n dataRequest: dataRequest,\n\n filterOptions: liveControlOptions.filterOptions,\n filters,\n setSliceFilters,\n formattedFilters,\n\n followPageTimeRange,\n setTimeRange,\n widgetTimeRange,\n timeRangeDescription,\n\n followAppBarHierarchyNode,\n hierarchyNode: widgetHierarchyNode,\n hierarchyNodeOptions: liveControlOptions.hierarchyNodeOptions,\n setHierarchyNode,\n\n columns: widgetContents,\n setColumns: setContents,\n columnOptions: liveControlOptions.columnOptions,\n\n isInitialized,\n\n supportsLiveControls,\n toggleShowLiveControls,\n };\n};\n\nexport default useKPIGroupWidgetController;\n","import React, { useCallback, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport uniqueId from 'lodash/uniqueId';\n\nimport TextField from 'Common/components/TextField';\nimport Button from 'Common/components/Button';\nimport { KPI_GROUP_COLUMNS_PROPTYPE, HEADING_TYPE } from 'Common/components/widgets/KPIGroupWidget/KPIGroupWidgetConstants';\nimport { useTranslator } from 'Common/hooks/useTranslation';\n\nconst Root = styled.div`\n padding: 5px 10px;\n`;\n\nconst HeadingContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: 150px;\n`;\n\nconst HeadingLabel = styled.div`\n flex: 0 0 auto;\n padding-right: 10px;\n color: ${({theme}) => theme.colors.darkText.highEmphasis};\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nconst ApplyContainer = styled.div`\n padding-top: 5px;\n display: flex;\n justify-content: flex-end;\n`;\n\n/**\n * A component to edit the heading text in a column in Kpi Group.\n *\n */\nconst KPIGroupHeadingOption = ({\n selectedColumnIndex,\n selectedColumns,\n onChange,\n}) => {\n const translator = useTranslator();\n const initialHeadingColumn = Number.isFinite(selectedColumnIndex) ? selectedColumns[selectedColumnIndex] : null;\n const [heading, setHeading] = useState(initialHeadingColumn?.displayName || '');\n const [headingHasChanged, setHeadingHasChanged] = useState(false);\n const canApplyChanges = heading !== initialHeadingColumn && !!heading.trim();\n\n const onHeadingChange = useCallback((e) => {\n setHeading(e.target.value || '');\n setHeadingHasChanged(true);\n }, [setHeading, setHeadingHasChanged]);\n\n const handleApply = () => {\n const column = {\n type: HEADING_TYPE,\n name: uniqueId('kpigroupheading_'),\n displayName: heading.trim(),\n };\n let newSelectedColumns = selectedColumns;\n if (!Number.isFinite(selectedColumnIndex)) {\n newSelectedColumns = selectedColumns.concat([column]);\n }\n else {\n if (selectedColumns.length < selectedColumnIndex) {\n console.warn(`Can not update column at index ${selectedColumnIndex} there are only ${selectedColumns.length} columns.`);\n }\n else {\n newSelectedColumns = [].concat(selectedColumns);\n newSelectedColumns.splice(selectedColumnIndex, 1, column);\n }\n }\n onChange({\n target: {\n value: newSelectedColumns,\n }\n });\n };\n\n return (\n \n \n {translator('widget.kpi_group.heading')}\n \n \n \n \n {translator('apply_literal')}\n \n \n \n );\n};\n\nKPIGroupHeadingOption.propTypes = {\n selectedColumnIndex: PropTypes.number,\n selectedColumns: KPI_GROUP_COLUMNS_PROPTYPE.isRequired,\n\n onChange: PropTypes.func.isRequired,\n};\n\nexport default KPIGroupHeadingOption;\n","import React, { useCallback, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { filterGroupedFields } from 'Common/components/FieldBuilder/FieldBuilder';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport styled from 'styled-components';\nimport { Body5 } from 'Common/components/typography';\nimport Button from 'Common/components/Button';\nimport BasicSelectField from 'Common/components/BasicSelectField/BasicSelectField';\nimport NumberField from 'Common/components/NumberField';\nimport MetricSelectField from 'Common/components/MetricSelectField';\nimport CategorySelectField from 'Common/components/CategorySelectList/CategorySelectField';\nimport InlineError from 'Common/components/Error/InlineError';\nimport validateNumber from 'Common/data/validateNumber';\nimport {\n BAR_VISUALIZATION_TYPE,\n CHRONOGRAM_VISUALIZATION_TYPE, \n COLUMN_VISUALIZATION_TYPE, \n DIMENSION_ORDER, \n DIMENSION_VISUALIZATION_TYPES, \n DURATION_METRIC, \n TEXT_VISUALIZATION_TYPE, \n TIME_ORDER, \n VALUE_ORDER\n} from 'Common/components/SparkVisualization/SparkDimensionConstants';\n\nconst REJECT_REASON_DIMENSION = 'reject_reason';\nconst REJECT_COUNT_METRIC = 'reject_count';\nconst NO_METRIC = 'none';\n\nfunction getVisualizationOptions(translator) {\n return [\n {\n value: DIMENSION_VISUALIZATION_TYPES.TEXT_VISUALIZATION_TYPE,\n displayName: translator('widget.spark_visualization.dimension_visualization_options.visualization.text'),\n },\n {\n value: DIMENSION_VISUALIZATION_TYPES.BAR_VISUALIZATION_TYPE,\n displayName: translator('widget.spark_visualization.dimension_visualization_options.visualization.bar'),\n },\n {\n value: DIMENSION_VISUALIZATION_TYPES.COLUMN_VISUALIZATION_TYPE,\n displayName: translator('widget.spark_visualization.dimension_visualization_options.visualization.column'),\n },\n {\n value: DIMENSION_VISUALIZATION_TYPES.CHRONOGRAM_VISUALIZATION_TYPE,\n displayName: translator('widget.spark_visualization.dimension_visualization_options.visualization.chronogram'),\n },\n ];\n}\n\nfunction getOrderOptions(translator) {\n return [\n {\n value: DIMENSION_ORDER,\n displayName: translator('widget.spark_visualization.dimension_visualization_options.order_by.by_dimension'),\n },\n {\n value: VALUE_ORDER,\n displayName: translator('widget.spark_visualization.dimension_visualization_options.order_by.by_value'),\n },\n ];\n}\n\nfunction getMetricOptions(fieldOptions, visualization) {\n return fieldOptions.category_value_metrics[visualization];\n}\n\n/**\n * A helper function to find the first option in a hierarchical set of options.\n *\n * Similar to Array.find().\n * \n * @param {Array} options Array of options.\n * @param {Function} func Supplied function that should return true if the option matches.\n * @returns {Object|undefined} The found option or undefined.\n */\nconst findOptionRecursive = (options, func) => {\n for (const opt of options) {\n if (opt.entries) {\n const foundEntry = findOptionRecursive(opt.entries, func);\n if (foundEntry !== undefined) {\n return foundEntry;\n }\n }\n else {\n if (func(opt)) {\n return opt;\n }\n }\n }\n\n return undefined;\n};\n\nconst findMetricOption = (metricOptions, metric) => {\n const foundOption = findOptionRecursive(metricOptions, (opt) => {\n return opt.name === metric;\n });\n\n return foundOption || null;\n};\n\nfunction hasChanges(newConfig, initialConfig) {\n return newConfig.dimension !== initialConfig?.name\n || newConfig.visualization !== initialConfig?.dimensionVisualization?.visualization\n || newConfig.metric !== initialConfig?.dimensionVisualization?.metric\n || newConfig.order !== initialConfig?.dimensionVisualization?.orderBy\n || newConfig.limit !== initialConfig?.dimensionVisualization?.maxElementsShown;\n}\n\nconst verticalPadding = 5;\nconst ListDropdownContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 14px ${verticalPadding}px 14px;\n`;\n\nconst LimitContainer = styled.div`\n padding: 0 14px;\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nconst LimitErrorContainer = styled.div`\n display: flex;\n flex-direction: row;\n padding: 0 14px ${verticalPadding}px 14px;\n`;\n\nconst SparkColumnLabel = styled.div`\n width: 38%;\n flex: 0 0 auto;\n padding-right: 10px;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nconst SparkColumnContainer = styled.div`\n min-width: 1px;\n flex: 1 1 auto;\n`;\n\nconst HelperTextContainer = styled(Body5).attrs({ as: 'div' })`\n color: ${({ theme }) => theme.colors.darkText.mediumEmphasis };\n padding: 0 0 10px 14px;\n`;\n\nconst ValidationText = styled(Body5)`\n color: ${({theme}) => theme.colors.palette.error.red };\n`;\n\nconst ValidationContainer = styled.div`\n justify-content: flex-end;\n flex: 0 0 auto;\n padding: 0 10px;\n`;\n\nconst ApplyContainer = styled.div`\n display: flex;\n justify-content: flex-end;\n padding: 0 14px 14px 14px;\n`;\n\nconst NumberFieldContainer = styled.div`\n width: 30px;\n`;\n\n/**\n * Use this in a history stack style column control for when the user is editing/adding a category.\n *\n */\nconst SparkDimensionColumnSelector = ({\n fieldOptions,\n selectedColumnIndex,\n selectedColumns,\n onChange,\n startingValue\n}) => {\n const translator = useTranslator();\n\n // initial column\n const initialCategoryColumn = Number.isFinite(selectedColumnIndex) ? selectedColumns[selectedColumnIndex] : null;\n const initalDimensionVisualization = initialCategoryColumn?.dimensionVisualization || null;\n\n const [dimension, setDimension] = useState(initialCategoryColumn?.name || startingValue?.name || '');\n const [visualization, setVisualization] = useState(initalDimensionVisualization?.visualization || BAR_VISUALIZATION_TYPE);\n const [metric, setMetric] = useState(initalDimensionVisualization?.metric || startingValue?.metric || null);\n const [order, setOrder] = useState(initalDimensionVisualization?.orderBy || DIMENSION_ORDER);\n const [limit, setLimit] = useState(Number.isFinite(initalDimensionVisualization?.maxElementsShown) ? initalDimensionVisualization?.maxElementsShown : 10);\n\n const usesLimit = (visualization !== CHRONOGRAM_VISUALIZATION_TYPE && visualization !== TEXT_VISUALIZATION_TYPE);\n\n const limitNumberError = useMemo(() => {\n return usesLimit ?\n validateNumber(limit, {\n integral: true,\n min: 1,\n max: 15,\n translator: translator,\n })\n : '';\n }, [limit, translator, usesLimit]);\n\n const configurationError = useMemo(() => {\n if (visualization === CHRONOGRAM_VISUALIZATION_TYPE && (['enterprise', 'plant', 'area', 'asset', REJECT_REASON_DIMENSION].includes(dimension))) {\n return translator('editors.spark_dimension.validation.chronogram_with_only_primary_dimensions');\n }\n else if (!metric && visualization !== DIMENSION_VISUALIZATION_TYPES.TEXT_VISUALIZATION_TYPE) {\n return translator('editors.spark_dimension.validation.need_metric');\n }\n else if (metric && metric !== REJECT_COUNT_METRIC && dimension === REJECT_REASON_DIMENSION) {\n return translator('editors.spark_dimension.validation.reject_reason_needs_reject_count');\n }\n else {\n return '';\n }\n }, [dimension, metric, visualization, translator]);\n\n const dimensionList = useMemo(() => {\n const unselectableFields = initialCategoryColumn\n ? selectedColumns.filter(col => col.name !== initialCategoryColumn.name)\n : selectedColumns;\n const filteredFields = filterGroupedFields(fieldOptions.category_value || [], unselectableFields);\n\n return filteredFields.map((option) => {\n return {\n ...option,\n isDummyGroup: false,\n };\n });\n }, [fieldOptions, selectedColumns, initialCategoryColumn]);\n\n const selectedDimension = useMemo(() => {\n const foundOption = findOptionRecursive(dimensionList, (opt) => {\n return opt.name === dimension;\n });\n\n return foundOption || null;\n }, [ dimensionList, dimension ]);\n\n const handleDimensionChange = useCallback((e) => {\n const column = e.target.value.name;\n setDimension(column);\n if (column === REJECT_REASON_DIMENSION && metric) {\n setMetric(REJECT_COUNT_METRIC);\n }\n }, [metric]);\n\n const handleVisualizationChange = useCallback((e) => {\n const value = e.target.value.value;\n\n if (value === CHRONOGRAM_VISUALIZATION_TYPE) {\n setOrder(TIME_ORDER);\n setMetric(DURATION_METRIC);\n setLimit(null);\n }\n else {\n if (value === TEXT_VISUALIZATION_TYPE) {\n setLimit(null);\n }\n else if (!limit) {\n setLimit(10);\n }\n\n if (dimension === REJECT_REASON_DIMENSION && metric) {\n setMetric(REJECT_COUNT_METRIC);\n }\n else {\n setMetric((currentMetric) => {\n // Check that the current metric is valid for this\n // visualization type, otherwise set it to null.\n const newMetricOptions = getMetricOptions(fieldOptions, value);\n if (!findMetricOption(newMetricOptions, currentMetric)) {\n // Metric not available as an option anymore.\n return null;\n }\n else {\n // Metric is still valid; no changes.\n return currentMetric;\n }\n });\n }\n\n setOrder(DIMENSION_ORDER);\n }\n setVisualization(value);\n }, [fieldOptions, dimension, limit, metric]);\n\n const handleMetricChange = useCallback((e) => {\n const value = e.target.value.name;\n if (typeof value !== 'string') {\n throw new Error('handleMetricChange: Bad value for metric');\n }\n setMetric(value === NO_METRIC ? null : value);\n }, []);\n\n const handleOrderChange = useCallback((e) => {\n const value = e.target.value.value;\n setOrder(value);\n }, []);\n\n const handleLimitChange = useCallback((e) => {\n const value = e.target.value;\n setLimit(value);\n }, []);\n\n const handleOnChange = useCallback(() => {\n const sparkDimension = {\n ...selectedDimension,\n name: selectedDimension.name,\n channel: selectedDimension.channel,\n displayName: selectedDimension.displayName,\n dimensionVisualization: {\n visualization,\n metric: metric,\n orderBy: order,\n maxElementsShown: limit,\n },\n };\n\n let newSelectedColumns = selectedColumns;\n\n if (!Number.isFinite(selectedColumnIndex)) {\n newSelectedColumns = selectedColumns.concat([sparkDimension]);\n }\n else {\n if (selectedColumns.length < selectedColumnIndex) {\n console.warn(`Can not update column at index ${selectedColumnIndex} there are only ${selectedColumns.length} columns.`);\n }\n else {\n // Array.splice is in-place, so copy the array before.\n newSelectedColumns = [ ...selectedColumns ];\n newSelectedColumns.splice(selectedColumnIndex, 1, sparkDimension);\n }\n }\n\n onChange({\n target: {\n value: newSelectedColumns,\n }\n });\n }, [selectedColumns, onChange, selectedColumnIndex, limit, metric, order, visualization, selectedDimension]);\n\n const visualizationOptions = useMemo(() => getVisualizationOptions(translator), [ translator ]);\n const selectedVisualizationOption = useMemo(() => {\n return visualizationOptions.find((opt) => {\n return opt.value === visualization;\n });\n }, [ visualizationOptions, visualization ]);\n\n const metricOptions = useMemo(() => {\n return [\n {\n name: NO_METRIC,\n displayName: translator('none_literal'),\n isDummyGroup: true,\n entries: [{\n name: NO_METRIC,\n displayName: translator('bracket_none_literal'),\n }]\n }\n ].concat(getMetricOptions(fieldOptions, visualization));\n }, [fieldOptions, visualization, translator]);\n\n const selectedMetric = useMemo(() => {\n return findMetricOption(metricOptions, metric);\n }, [ metricOptions, metric ]);\n\n const orderOptions = useMemo(() => getOrderOptions(translator), [ translator ]);\n const selectedOrderOption = useMemo(() => {\n if (order === TIME_ORDER) {\n return {\n value: TIME_ORDER,\n displayName: translator('widget.spark_visualization.dimension_visualization_options.order_by.by_time'),\n };\n }\n else {\n return orderOptions.find((opt) => {\n return opt.value === order;\n });\n }\n }, [ orderOptions, order, translator ]);\n\n const categoryPlaceholderText = translator('editors.filter.dropdown_placeholder', {value: translator('value_literal').toLowerCase()});\n const metricPlaceholderText = translator('editors.filter.dropdown_placeholder', {value: translator('value_literal').toLowerCase()});\n\n return (\n \n \n {translator('widget.spark_visualization.add_dimension_helper_text')}\n \n \n {translator('widget.spark_visualization.dimension')}\n \n \n \n \n \n {translator('widget.spark_visualization.visualization')}\n \n \n \n \n \n {translator('widget.spark_visualization.metric')}\n \n \n \n \n {metric && (\n {translator('widget.spark_visualization.order')}\n \n \n \n \n )}\n {usesLimit && (\n \n {translator('widget.spark_visualization.max_elements')}\n \n \n \n \n )}\n \n \n \n {limitNumberError}\n \n \n {configurationError && (\n \n \n {configurationError}\n \n \n )}\n \n \n {translator('apply_literal')}\n \n \n \n );\n};\n\nconst categoryValueMetricOptionsPropType = PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired\n })\n);\n\nSparkDimensionColumnSelector.propTypes = {\n fieldOptions: PropTypes.shape({\n category_value: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string.isRequired,\n })),\n category_value_metrics: PropTypes.exact({\n [BAR_VISUALIZATION_TYPE]: categoryValueMetricOptionsPropType.isRequired,\n [CHRONOGRAM_VISUALIZATION_TYPE]: categoryValueMetricOptionsPropType.isRequired,\n [COLUMN_VISUALIZATION_TYPE]: categoryValueMetricOptionsPropType.isRequired,\n [TEXT_VISUALIZATION_TYPE]: categoryValueMetricOptionsPropType.isRequired,\n }),\n }).isRequired,\n selectedColumnIndex: PropTypes.number,\n selectedColumns: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string.isRequired\n })),\n startingValue: PropTypes.shape({\n name: PropTypes.string,\n metric: PropTypes.string\n }),\n\n onChange: PropTypes.func.isRequired,\n};\n\nexport default SparkDimensionColumnSelector;\n","import React, { useMemo, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport uniqueId from 'lodash/uniqueId';\nimport omit from 'lodash/omit';\n\nimport { filterFields, filterGroupedFields } from 'Common/components/FieldBuilder/FieldBuilder';\nimport FieldBuilderTypeSelect, { flattenEntries, SEPARATOR_TYPE } from 'Common/components/FieldBuilderTypeSelect/FieldBuilderTypeSelect';\nimport mergeMetricAndMetricSet, { filterCombinedMetricAndMetricSets } from 'Common/components/ColumnControl/mergeMetricAndMetricSet';\nimport MetricAndMetricSetOption from 'Common/components/ColumnControl/MetricAndMetricSetOption';\nimport KPIGroupHeadingOption from './KPIGroupHeadingOption';\nimport { KPI_GROUP_COLUMNS_PROPTYPE, HEADING_TYPE, BLANK_ROW_TYPE, FIELD_TYPE } from 'Common/components/widgets/KPIGroupWidget/KPIGroupWidgetConstants';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport SparkDimensionColumnSelector from './SparkDimensionColumnSelector';\n\nconst METRIC = 'metric';\nconst CATEGORY_VALUE = 'category_value';\nconst METRIC_SET = 'metric_set';\n\nfunction createKeyFromColumn(column) {\n return `${column.channel}_${column.name}`;\n}\n\n/**\n * This generates the list of available types and searchable fields.\n *\n * @returns {Object} Shape: {\n * primary {Array}: The primary menu items for the main menu,\n * searchable {Array}: The menu items when searching in the the searchable menu,\n * }\n*/\nfunction generateMenuOptions(fieldOptions = {}, selectedColumns = [], translator) {\n let primaryMenuOptions = [];\n let searchableMenuOptions = [];\n\n const generateOptions = ({fields, searchFilter = filterFields, name, displayName, hasChildren}) => {\n const filteredFields = searchFilter(fields, selectedColumns);\n\n searchableMenuOptions = searchableMenuOptions\n .concat(flattenEntries(filteredFields))\n .map((option) => {\n let displayType = '';\n if (option.fieldType === 'metric') {\n displayType = translator('metric_literal');\n }\n else if (option.fieldType === 'category_value') {\n displayType = translator('category_literal');\n }\n else if (option.fieldType === 'metric_set') {\n displayType = translator('metric_set');\n }\n\n return { ...option, displayType };\n });\n\n primaryMenuOptions.push({\n name,\n displayName,\n disabled: filteredFields.length === 0,\n hasChildren: hasChildren\n });\n };\n\n const generateSeparator = () => {\n const numberOfOptions = primaryMenuOptions.length;\n\n // Never start with a separator and never put two separators in a row\n if (numberOfOptions !== 0\n && primaryMenuOptions[numberOfOptions - 1].type !== SEPARATOR_TYPE)\n {\n primaryMenuOptions.push({\n type: SEPARATOR_TYPE,\n });\n }\n };\n\n generateOptions({\n name: METRIC,\n fields: mergeMetricAndMetricSet(fieldOptions.metric || [], fieldOptions.metric_set || []),\n searchFilter: filterCombinedMetricAndMetricSets,\n displayName: translator('metric_literal'),\n hasChildren: true,\n });\n\n if (fieldOptions.category_value) {\n generateOptions({\n name: CATEGORY_VALUE,\n fields: fieldOptions.category_value,\n searchFilter: filterGroupedFields,\n displayName: translator('category_literal'),\n hasChildren: true,\n });\n }\n\n generateSeparator();\n\n generateOptions({\n name: BLANK_ROW_TYPE,\n fields: [{\n name: BLANK_ROW_TYPE,\n displayName: translator('widget.kpi_group.blank_row'),\n }],\n displayName: translator('widget.kpi_group.blank_row'),\n hasChildren: false,\n });\n\n generateOptions({\n name: HEADING_TYPE,\n fields: [{\n name: HEADING_TYPE,\n displayName: translator('widget.kpi_group.heading'),\n }],\n displayName: translator('widget.kpi_group.heading'),\n hasChildren: true,\n });\n\n return {\n primary: primaryMenuOptions,\n searchable: searchableMenuOptions,\n };\n}\n\nconst KPIGroupFieldsOption = ({\n fieldOptions,\n selectedColumns,\n onChange,\n transitionForward,\n initialMenuSelection\n}) => {\n const translator = useTranslator();\n\n // the different types of fields available\n // for column selection and their respective lists\n const menuOptions = useMemo(() => {\n return generateMenuOptions(fieldOptions, selectedColumns, translator);\n }, [fieldOptions, selectedColumns, translator]);\n\n const handleOnChange = useCallback((e) => {\n // three options user selected:\n // add blank row\n // further explore that column type\n // add specific field\n if (e.target.type === 'main' && e.target.value.name === BLANK_ROW_TYPE) {\n onChange({\n target: {\n value: selectedColumns.concat([{\n type: BLANK_ROW_TYPE,\n name: uniqueId('kpigroupseparator_'),\n displayName: translator('widget.kpi_group.blank_row'),\n }]),\n }\n });\n }\n else if (e.target.type === 'main' || e.target.value.fieldType === CATEGORY_VALUE) {\n // we keep the users selection highlighted if they end up traveling back here\n let menuSelection = e.target.value.name;\n let newControlOptions = null;\n\n if (menuSelection === METRIC) {\n newControlOptions = { control: MetricAndMetricSetOption, props: {}, title: translator('add_field_template', { field: translator('metric_literal')}) };\n }\n else if (menuSelection === CATEGORY_VALUE) {\n newControlOptions = { control: SparkDimensionColumnSelector, props: { startingValue: { metric: 'duration' } }, title: translator('add_field_template', { field: translator('category_literal')}) };\n }\n else if (menuSelection === HEADING_TYPE) {\n newControlOptions = { control: KPIGroupHeadingOption, props: {}, title: translator('add_field_template', { field: translator('widget.kpi_group.heading')}) };\n }\n else {\n // displayType was added so lets remove it\n const column = e.target.type === 'main' ? null : omit(e.target.value, 'displayType');\n newControlOptions = { control: SparkDimensionColumnSelector, props: column ? { startingValue: { name: column.name, metric: 'duration' } } : {}, title: translator('add_field_template', { field: translator('category_literal')}) };\n }\n\n if (newControlOptions) {\n transitionForward(\n newControlOptions,\n { control: KPIGroupFieldsOption, props: { initialMenuSelection: menuSelection }, title: translator('add_row_literal') }\n );\n }\n }\n else {\n const column = e.target.value;\n if (column.fieldType === METRIC_SET) {\n const newColumns = column.columns;\n let updatedColumns = [ ...selectedColumns ];\n\n let selectedColumnsByName = selectedColumns.reduce((byName, col) => {\n const key = createKeyFromColumn(col);\n byName[key] = col;\n return byName;\n }, []);\n\n // for every column in the new metric set, check if it already exists in the table.\n // If not, concat the new column onto the array\n\n newColumns.forEach(newColumn => {\n if (!selectedColumnsByName[createKeyFromColumn(newColumn)]) {\n updatedColumns.push({\n type: FIELD_TYPE,\n name: newColumn.name,\n channel: newColumn.channel,\n displayName: newColumn.displayName,\n fieldType: newColumn.fieldType\n });\n }\n });\n\n onChange({\n target: {\n value: updatedColumns,\n }\n });\n }\n else {\n const modifiedColumn = {\n type: FIELD_TYPE,\n name: column.name,\n channel: column.channel,\n displayName: column.displayName,\n fieldType: column.fieldType\n };\n onChange({\n target: {\n value: selectedColumns.concat([modifiedColumn]),\n }\n });\n }\n }\n }, [onChange, transitionForward, selectedColumns, translator]);\n\n return (\n );\n};\n\nKPIGroupFieldsOption.propTypes = {\n fieldOptions: PropTypes.shape({\n metric: PropTypes.array,\n category_value: PropTypes.array,\n metric_set: PropTypes.array,\n }).isRequired,\n initialMenuSelection: PropTypes.string,\n selectedColumns: KPI_GROUP_COLUMNS_PROPTYPE.isRequired,\n\n onChange: PropTypes.func.isRequired,\n transitionForward: PropTypes.func.isRequired,\n};\n\nexport default KPIGroupFieldsOption;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\nimport { HEADING_TYPE, BLANK_ROW_TYPE } from 'Common/components/widgets/KPIGroupWidget/KPIGroupWidgetConstants';\n\nconst Root = styled.span`\n ${({theme, type}) => {\n if (type === HEADING_TYPE) {\n return css`\n font-weight: 500;\n color: ${theme.colors.palette.blue.awesome};\n `;\n }\n else if (type === BLANK_ROW_TYPE) {\n return css`\n color: ${theme.colors.darkText.disabled};\n `;\n }\n }}\n`;\n\nfunction KPIGroupFieldChipText({\n type,\n children,\n}) {\n return (\n \n {children}\n \n );\n}\n\nKPIGroupFieldChipText.propTypes = {\n type: PropTypes.string.isRequired,\n children: PropTypes.node.isRequired,\n};\n\nKPIGroupFieldChipText.defaultProps = { };\n\nexport default KPIGroupFieldChipText;\n","import React, { Fragment, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport FieldBuilder from 'Common/components/FieldBuilder/FieldBuilder';\nimport ListButton from 'Common/components/ListButton';\nimport KPIGroupFieldsOption from './KPIGroupFieldsOption';\nimport MetricAndMetricSetOption from 'Common/components/ColumnControl/MetricAndMetricSetOption';\nimport KPIGroupHeadingOption from './KPIGroupHeadingOption';\nimport { KPI_GROUP_COLUMNS_PROPTYPE } from 'Common/components/widgets/KPIGroupWidget/KPIGroupWidgetConstants';\nimport KPIGroupFieldChipText from './KPIGroupFieldChipText';\nimport Button from 'Common/components/Button';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport SparkDimensionColumnSelector from './SparkDimensionColumnSelector';\n\nconst AddButtonContainer = styled.div`\n padding: 0 4px;\n padding-bottom: 4px;\n border-bottom: 1px solid ${({theme}) => theme.colors.palette.grey.silver };\n margin-bottom: -1px;\n`;\n\nconst InstructionLabel = styled.div`\n color: ${({theme}) => theme.colors.darkText.mediumEmphasis};\n padding: 1px 11px 4px 11px;\n`;\n\nconst FieldBuilderContainer = styled.div`\n overflow-y: auto;\n flex: 1 1 auto;\n`;\n\nconst ButtonContainer = styled.div`\n box-sizing: border-box;\n min-height: 44px;\n min-width: 44px;\n display: flex;\n align-items: center;\n flex: 0 0 auto;\n padding-right: 11px;\n border-top: 1px solid ${({theme}) => theme.colors.palette.grey.silver };\n`;\n\nconst ApplyContainer = styled(ButtonContainer)`\n justify-content: flex-end;\n flex: 0 0 auto;\n`;\n\nconst renderFieldText = (field) => {\n return (\n \n {field.displayName}\n \n );\n};\n\n/**\n * This component is one of the options traveled to by KPIGroupColumnControl.\n * Its the start allowing the user to add/update/remove fields.\n */\n\nconst KPIGroupSelectedFieldsOption = ({\n selectedColumns,\n onChange,\n transitionForward,\n onApply,\n isDirty\n}) => {\n\n const translator = useTranslator();\n const handleAddField = useCallback((e) => {\n transitionForward(\n { control: KPIGroupFieldsOption, props: {}, title: translator('add_row_literal') }\n );\n }, [transitionForward, translator]);\n\n const handleUpdateFields = useCallback((e) => {\n const columnIndex = selectedColumns.findIndex((col) => (col.name === e.target.value));\n\n if (columnIndex < 0) {\n console.warn(`Can not find column ${e.target.value}`);\n return;\n }\n\n const columnType = selectedColumns[columnIndex].type;\n\n if (columnType === 'field') {\n const columnFieldType = selectedColumns[columnIndex].fieldType;\n if (columnFieldType === 'metric') {\n transitionForward(\n { control: MetricAndMetricSetOption, props: { selectedColumnIndex: columnIndex }, title: translator('edit_field_template', { field: translator('metric_literal')}) }\n );\n }\n else if (columnFieldType === 'category_value') {\n transitionForward(\n { control: SparkDimensionColumnSelector, props: { selectedColumnIndex: columnIndex }, title: translator('edit_field_template', { field: translator('category_literal')}) }\n );\n }\n }\n else if (columnType === 'heading') {\n transitionForward(\n { control: KPIGroupHeadingOption, props: { selectedColumnIndex: columnIndex }, title: translator('edit_field_template', { field: translator('widget.kpi_group.heading')}) }\n );\n }\n\n }, [transitionForward, selectedColumns, translator]);\n\n return (\n \n \n \n {translator('add_row_literal')}\n \n \n {selectedColumns.length > 0 ? {translator('widget.table.column_control.instructions')} : null}\n \n \n \n \n \n {translator('apply_literal')}\n \n \n \n );\n};\n\nKPIGroupSelectedFieldsOption.propTypes = {\n selectedColumns: KPI_GROUP_COLUMNS_PROPTYPE.isRequired,\n isDirty: PropTypes.bool.isRequired,\n onApply: PropTypes.func.isRequired,\n onChange: PropTypes.func.isRequired,\n transitionForward: PropTypes.func.isRequired,\n};\n\nexport default KPIGroupSelectedFieldsOption;\n","import React, {\n useState,\n useCallback,\n useMemo,\n useImperativeHandle,\n forwardRef,\n createElement,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport LiveControlDropdownHeader from 'Common/components/LiveControlBar/LiveControlDropdownHeader';\nimport LiveControlDropdownLayout from 'Common/components/LiveControlBar/LiveControlDropdownLayout';\nimport KPIGroupSelectedFieldsOption from './KPIGroupSelectedFieldsOption';\nimport useStackHistory from 'Common/hooks/useStackHistory';\nimport { KPI_GROUP_COLUMNS_PROPTYPE, FIELD_TYPE, CATEGORY_VALUE } from 'Common/components/widgets/KPIGroupWidget/KPIGroupWidgetConstants';\nimport isEqual from 'lodash/isEqual';\n\nconst Root = styled.div`\n box-sizing: border-box;\n width: 275px;\n display: flex;\n flex-direction: column;\n min-height: 1px;\n`;\n\n// compares columns to see if they are the same\nfunction hasChanges (initialColumns, updatedColumns) {\n if (initialColumns.length !== updatedColumns.length) {\n return true;\n }\n\n return !initialColumns.every((column, index) => {\n const updatedColumn = updatedColumns[index];\n return isEqual(column, updatedColumn);\n });\n}\n\n/**\n * This component is used by KPIGroupWidget to edit/add/remove fields. It is in the style\n * of a stack so as the user travels through the interface it will replace the current\n * control with the next one.\n *\n */\nconst KPIGroupColumnControl = forwardRef((props, ref) => {\n const {\n defaultTitle,\n fieldOptions,\n icon,\n selectedColumns: initialSelectedColumns,\n goBack,\n onChange,\n } = props;\n\n const [selectedColumns, setSelectedColumns] = useState(initialSelectedColumns);\n\n const isDirty = useMemo(() => {\n return hasChanges(initialSelectedColumns, selectedColumns);\n }, [selectedColumns, initialSelectedColumns]);\n\n const handleOuterClose = useCallback(() => {\n if (!isDirty) {\n return true;\n }\n\n onChange({\n target: {\n value: selectedColumns,\n },\n });\n\n return true;\n }, [ isDirty, selectedColumns, onChange ]);\n\n useImperativeHandle(ref, () => ({\n onClose: () => {\n return handleOuterClose();\n },\n }), [ handleOuterClose ]);\n\n // handles navigation between different controls\n const { \n current: currentProps,\n canPop: internalCanGoBack,\n push: transitionForward,\n pop: internalGoBack,\n clear\n } = useStackHistory({ control: KPIGroupSelectedFieldsOption, props: {}, title: defaultTitle });\n\n const handleOnColumnsChange = useCallback((event) => {\n // in certain cases we just add the full column object\n // so now we will modify it to allign it with what\n // KPIGroupWidget expects\n const columns = event.target.value.map((col) => {\n if (col.fieldType === CATEGORY_VALUE && col.type !== FIELD_TYPE) {\n return {\n type: FIELD_TYPE,\n name: col.name,\n channel: col.channel,\n displayName: col.displayName,\n fieldType: col.fieldType,\n dimensionVisualization: col.dimensionVisualization\n };\n }\n else if (col.fieldType && col.type !== FIELD_TYPE) {\n return {\n type: FIELD_TYPE,\n name: col.name,\n channel: col.channel,\n displayName: col.displayName,\n fieldType: col.fieldType,\n };\n }\n else {\n return col;\n }\n });\n setSelectedColumns(columns);\n clear();\n }, [clear]);\n\n const title = currentProps.title || defaultTitle;\n\n // a go back link can also come from\n // parent not just the history stack\n const canGoBack = !!goBack;\n\n const headerGoBack = internalCanGoBack\n ? internalGoBack\n : canGoBack ? goBack : null;\n\n // this handles what happens when the user selects\n // the go back link\n const handleHeaderGoBack = useCallback(() => {\n if (headerGoBack) {\n headerGoBack();\n }\n }, [headerGoBack]);\n\n const header = (\n \n );\n\n const body = (\n \n {createElement(currentProps.control, {\n ...(currentProps.props || {}),\n fieldOptions,\n selectedColumns,\n isDirty,\n transitionForward,\n onChange: handleOnColumnsChange,\n onApply: handleOuterClose\n })}\n \n );\n\n return (\n \n );\n});\n\nKPIGroupColumnControl.displayName = 'KPIGroupColumnControl';\n\nKPIGroupColumnControl.propTypes = {\n fieldOptions: PropTypes.shape({\n metric: PropTypes.array,\n category_value: PropTypes.array,\n metric_set: PropTypes.array,\n }).isRequired,\n selectedColumns: KPI_GROUP_COLUMNS_PROPTYPE.isRequired,\n icon: PropTypes.node.isRequired,\n defaultTitle: PropTypes.string.isRequired,\n\n onChange: PropTypes.func.isRequired,\n goBack: PropTypes.func,\n};\n\nexport default KPIGroupColumnControl;\n","import React, { useCallback, useRef, useState, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport LiveControlBar from 'Common/components/LiveControlBar';\nimport LiveControl from 'Common/components/LiveControlBar/LiveControl';\nimport LiveControlIcon from 'Common/components/LiveControlBar/LiveControlIcon';\nimport LiveControlSeparator from 'Common/components/LiveControlBar/LiveControlSeparator';\nimport Filters from 'Common/types/Filters/Filters';\n\nimport { useTranslator } from 'Common/hooks/useTranslation';\n\nimport EnterpriseHierarchyControl from 'Common/components/LiveControls/EnterpriseHierarchyControl';\nimport FilterControl from 'Common/components/LiveControls/FilterControl';\nimport TimeRangeControl from 'Common/components/LiveControls/TimeRangeControl';\nimport KPIGroupColumnControl from './KPIGroupColumnControl/KPIGroupColumnControl';\nimport { FIELD_TYPE, HEADING_TYPE, BLANK_ROW_TYPE } from 'Common/components/widgets/KPIGroupWidget/KPIGroupWidgetConstants';\nimport renderDuplicateLiveControl from 'Common/components/LiveControls/DuplicateLiveControl/renderDuplicateLiveControl';\n\nconst emptyArray = [];\n\nexport default function KPIGroupWidgetLiveControls ({\n filters,\n setSliceFilters,\n filterOptions,\n\n followPageTimeRange,\n timeRange,\n setTimeRange,\n\n followAppBarHierarchyNode,\n hierarchyNode,\n setHierarchyNode,\n hierarchyNodeOptions,\n\n columns: selectedColumns,\n setColumns,\n columnOptions,\n\n isLayoutModeActive,\n duplicateWidget,\n\n suppressedControls,\n}) {\n const translator = useTranslator();\n \n const [selectedControl, setSelectedControl] = useState(null);\n const closeSelectedControl = useCallback(() => {\n setSelectedControl(null);\n }, []);\n\n const hideControl = (controlName) => {\n // hide control there is a suppressed object and the control name is truthy within that\n // object\n return Boolean(suppressedControls && suppressedControls[controlName]);\n };\n\n\n // Filters\n //\n const filterLiteral = translator('control.common.filter');\n\n const activeFilterCount = useMemo(() => {\n return Filters.countActiveExpressions(filters);\n }, [filters]);\n\n const transformedFilterValue = useMemo(() => {\n // Enforce that ONLY slice filters are ever used.\n return {\n slice: filters.slice,\n group: { expressions: [] },\n };\n }, [ filters ]);\n\n const filterControlRef = useRef(null);\n\n const onFilterClose = useCallback(() => {\n return filterControlRef.current.onClose();\n }, []);\n\n const handleFilterApply = useCallback((event) => {\n // Close the control when the filters are applied\n closeSelectedControl();\n\n // We only care about slice filters\n const newSliceFilters = event.target.value.slice;\n setSliceFilters(newSliceFilters);\n }, [closeSelectedControl, setSliceFilters]);\n\n\n // Hierarchy Node\n //\n const assetHierarchyLiteral = translator('control.common.asset_hierarchy');\n\n const handleHierarchyNodeChange = useCallback((event) => {\n // Close the control after picking a node\n closeSelectedControl();\n setHierarchyNode(event.target.value);\n }, [closeSelectedControl, setHierarchyNode]);\n\n const handleFollowAppBarHierarchyNodeChange = useCallback((event) => {\n const newFollowAppBarHierarchyNode = event.target.value;\n\n let newHierarchyNode;\n\n if (newFollowAppBarHierarchyNode) {\n // Clear the hierarchy node\n newHierarchyNode = null;\n }\n else {\n // Set hierarchy node to default\n newHierarchyNode = 'self';\n }\n\n setHierarchyNode(newHierarchyNode);\n }, [setHierarchyNode]);\n\n\n // Time Range\n //\n const timeRangeLiteral = translator('control.common.time_range');\n\n const handleTimeRangeChange = useCallback((event) => {\n // Close the control after picking a time range\n closeSelectedControl();\n setTimeRange(event.target.value);\n }, [closeSelectedControl, setTimeRange]);\n\n const handleFollowPageTimeRangeChange = useCallback((event) => {\n const newFollowPageTimeRange = event.target.value;\n\n let newTimeRange;\n\n if (newFollowPageTimeRange) {\n // Clear the time range\n newTimeRange = null;\n }\n else {\n // Set time range to default\n newTimeRange = { units: 'shift', start: 0, end: 0 };\n }\n\n setTimeRange(newTimeRange);\n }, [setTimeRange]);\n\n\n // KPIGroupColumn\n const rowLiteral = translator('control.common.row');\n const rowControlIcon = ();\n const columnControlRef = useRef(null);\n\n const onColumnClose = useCallback(() => {\n return columnControlRef.current.onClose();\n }, [columnControlRef]);\n\n const handleColumnChange = useCallback((event) => {\n // Close the control after picking a node\n closeSelectedControl();\n\n // convert format of columns to stf friendly\n const modifiedColumns = event.target.value.reduce((contents, field) => {\n if (field.type === BLANK_ROW_TYPE) {\n contents.push({\n type: field.type,\n });\n }\n else if (field.type === HEADING_TYPE) {\n contents.push({\n heading: { displayName: field.displayName },\n type: field.type,\n });\n }\n else if (field.type === FIELD_TYPE) {\n const fieldStf = {\n type: field.type,\n field: {\n name: field.name,\n channel: field.channel,\n },\n };\n\n // Add in dimension visualization config, if given.\n if (field.dimensionVisualization) {\n const dv = field.dimensionVisualization;\n\n fieldStf.field.dimensionVisualization = {\n visualization: dv.visualization,\n metric: dv.metric,\n orderBy: dv.orderBy,\n maxElementsShown: dv.maxElementsShown,\n };\n }\n\n contents.push(fieldStf);\n }\n // if somehow its a type we dont know ignore it\n\n return contents;\n }, []);\n\n setColumns(modifiedColumns);\n }, [closeSelectedControl, setColumns]);\n\n const fullSelectedColumns = useMemo(() => {\n const columnsByName = Object.keys(columnOptions).reduce((acc, fieldType) => {\n // The chips only show \"top-level\" selections of category values\n // or metrics.\n if (fieldType === 'category_value' || fieldType === 'metric') {\n columnOptions[fieldType].forEach(group => {\n group.entries.forEach(col => {\n acc[col.name] = col;\n });\n });\n }\n\n return acc;\n }, {});\n\n return selectedColumns.reduce((fields, field, index) => {\n if (field.type === BLANK_ROW_TYPE) {\n fields.push({\n name: `separator_${index}`,\n displayName: translator('widget.kpi_group.blank_row'),\n type: field.type,\n });\n }\n else if (field.type === HEADING_TYPE) {\n let displayName = field.heading?.displayName\n ? field.heading?.displayName\n : field.heading?.displayKey ? translator(field.heading.displayKey) : translator('widget.kpi_group.heading');\n\n fields.push({\n name: `heading_${index}`,\n displayName,\n type: field.type,\n });\n }\n else if (field.type === FIELD_TYPE) {\n const channel = field.field.channel || 'production_metric';\n const column = columnsByName[field.field.name];\n\n const fullField = {\n type: field.type,\n name: field.field.name,\n channel: channel,\n displayName: column?.displayName || translator('na_symbol'),\n fieldType: column?.fieldType || 'invalid',\n };\n\n if (field.field.dimensionVisualization) {\n fullField.dimensionVisualization = field.field.dimensionVisualization;\n }\n \n fields.push(fullField);\n }\n // if somehow its a type we dont know ignore it\n\n return fields;\n }, []);\n }, [selectedColumns, translator, columnOptions]);\n\n\n const handleSelectionChange = useCallback((newSelection) => {\n let blockSelectionChange = false;\n\n if (selectedControl === 'filter' && newSelection !== 'filter') {\n blockSelectionChange = !onFilterClose();\n }\n\n if (selectedControl === 'columns' && newSelection !== 'columns') {\n onColumnClose();\n }\n\n if (!blockSelectionChange) {\n setSelectedControl(newSelection);\n }\n }, [selectedControl, onFilterClose, onColumnClose]);\n\n const showDuplicateControl = () => {\n return isLayoutModeActive && ! hideControl('duplicateWidget');\n };\n\n return (\n \n { hideControl('hierarchyNode') || \n {\n return (\n \n );\n }}\n icon={(\n \n )}\n />\n }\n { hideControl('timeRange') || \n {\n return (\n \n );\n }}\n icon={(\n \n )}\n />\n }\n \n {\n return (\n \n );\n }}\n handleContentLayout={true}\n icon={rowControlIcon}\n />\n { hideControl('filter') || \n \n )}\n controlRender={() => {\n return (\n \n );\n }}\n />\n }\n {showDuplicateControl() && }\n {showDuplicateControl() && (\n renderDuplicateLiveControl({\n name: 'duplicateWidget',\n key: 'duplicateWidget',\n translator: translator,\n action: duplicateWidget,\n })\n )}\n \n );\n}\n\nKPIGroupWidgetLiveControls.propTypes = {\n name: PropTypes.string,\n\n filters: PropTypes.object.isRequired,\n setSliceFilters: PropTypes.func.isRequired,\n filterOptions: PropTypes.shape({\n categories: PropTypes.arrayOf(\n PropTypes.object\n ).isRequired,\n values: PropTypes.object.isRequired,\n }).isRequired,\n\n followPageTimeRange: PropTypes.bool.isRequired,\n timeRange: PropTypes.object,\n setTimeRange: PropTypes.func.isRequired,\n\n followAppBarHierarchyNode: PropTypes.bool.isRequired,\n hierarchyNode: PropTypes.string,\n setHierarchyNode: PropTypes.func.isRequired,\n hierarchyNodeOptions: PropTypes.arrayOf(\n PropTypes.shape({\n displayName: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n iconClass: PropTypes.string.isRequired,\n level: PropTypes.number.isRequired,\n })\n ).isRequired,\n\n columns: PropTypes.arrayOf(PropTypes.object.isRequired),\n setColumns: PropTypes.func.isRequired,\n columnOptions: PropTypes.shape({\n metric: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n entries: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n channel: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n })\n ),\n }).isRequired\n ),\n metric_set: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n entries: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n channel: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n })\n ),\n }).isRequired\n ),\n category_value: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n entries: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n channel: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n })\n ),\n }).isRequired\n ),\n }).isRequired,\n\n isLayoutModeActive: PropTypes.bool.isRequired,\n duplicateWidget: PropTypes.func.isRequired,\n suppressedControls: PropTypes.object,\n};\n\nKPIGroupWidgetLiveControls.defaultProps = {\n suppressedControls: {},\n};\n","import NoDataMessage from './NoDataMessage';\n\nexport default NoDataMessage;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\nimport { FontFamily } from 'Common/components/typography';\n\nconst RowCell = styled.div`\n min-width: 1px;\n\n ${({ $singleLine }) => $singleLine && css`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `}\n\n &:not(:first-child) {\n padding-left: 8px;\n }\n\n ${({ $alignRight }) => $alignRight && css`\n text-align: right;\n `}\n\n /* Line below is helpful for debugging */\n /* box-shadow: inset 0 0 0 1px rgb(255,0,0); */\n`;\n\nconst RowText = styled.span`\n font-family: ${FontFamily.primary};\n font-size: 12px;\n color: ${({theme}) => theme.colors.darkText.highEmphasis};\n\n div.cpe-metric-container {\n display: inline-block;\n }\n`;\n\nexport default function EventDataCell(props) {\n const {\n allowOverflow,\n alignRight,\n children,\n style,\n } = props;\n\n return (\n \n {children}\n \n );\n}\n\nEventDataCell.propTypes = {\n alignRight: PropTypes.bool,\n allowOverflow: PropTypes.bool,\n children: PropTypes.node,\n colspan: PropTypes.number,\n size: PropTypes.number,\n style: PropTypes.object,\n};\n\nEventDataCell.defaultProps = {\n alignRight: false,\n allowOverflow: false,\n colspan: 1,\n size: 1,\n};\n","import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\nimport { elementsOfType } from 'Common/util/propTypeHelpers';\nimport EventDataCell from './EventDataCell';\n\nconst Root = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 10px;\n min-height: 24px;\n\n font-size: 11px;\n border-radius: 4px;\n\n ${({ striped }) => striped && css`\n background-color: ${({theme}) => theme.colors.palette.grey.cloud};\n `}\n`;\n\nexport default function EventDataRow(props) {\n const { striped, columnOrder, columnConfigs, children } = props;\n\n const cellMap = useMemo(() => {\n const childrenArray = React.Children.toArray(children);\n\n const map = {};\n\n childrenArray.forEach((child, i) => {\n let columnName = child.props.column;\n \n if (columnName === undefined) {\n columnName = i;\n }\n \n if (typeof columnName === 'number') {\n columnName = columnOrder[columnName];\n }\n \n if (map[columnName]) {\n console.warn(`Detected cell with duplicate column: ${child.props.column}`);\n }\n \n map[columnName] = child;\n });\n\n return map;\n }, [ columnOrder, children ]);\n\n const cells = useMemo(() => {\n const totalRowSize = columnOrder.reduce((sum, columnName) => {\n return sum + columnConfigs[columnName].size;\n }, 0);\n\n return columnOrder.map((columnName, columnIndex) => {\n let child = cellMap[columnName];\n\n if (!child) {\n child = (\n {''}\n );\n }\n\n const colspan = child.props.colspan;\n let cellSize = 0;\n\n for (let i = columnIndex; i < Math.min(columnIndex + colspan, columnOrder.length); i++) {\n cellSize += columnConfigs[columnOrder[i]].size;\n }\n\n const percentWidth = Math.floor((cellSize / totalRowSize) * 100);\n\n return React.cloneElement(child, {\n key: String(columnName),\n style: {\n ...(child.props.style || {}),\n flex: `0 0 ${percentWidth}%`,\n },\n });\n });\n }, [ cellMap, columnOrder, columnConfigs ]);\n\n return (\n \n {cells}\n \n );\n}\n\nEventDataRow.propTypes = {\n striped: PropTypes.bool,\n columnOrder: PropTypes.arrayOf(PropTypes.string),\n columnConfigs: PropTypes.objectOf(PropTypes.shape({\n name: PropTypes.string.isRequired,\n size: PropTypes.number.isRequired,\n })),\n children: elementsOfType([ EventDataCell ]),\n};\n\nEventDataRow.defaultProps = {\n striped: false,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { elementsOfType } from 'Common/util/propTypeHelpers';\nimport EventDataRow from './EventDataRow';\n\nconst Root = styled.div`\n border-radius: 5px;\n`;\n\nexport default function EventDataGroup(props) {\n const { columnOrder, columnConfigs, children } = props;\n\n const rows = React.Children.map(children, (child, i) => {\n return React.cloneElement(child, {\n striped: i % 2 === 0,\n columnOrder: columnOrder,\n columnConfigs: columnConfigs,\n });\n });\n\n return (\n \n {rows}\n \n );\n}\n\nEventDataGroup.propTypes = {\n columnOrder: PropTypes.array,\n columnConfigs: PropTypes.object,\n children: elementsOfType([ EventDataRow ]),\n};\n\nEventDataGroup.defaultProps = {};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\n\nimport EventDataGroup from 'Common/components/EventData/EventDataGroup';\n\nconst Root = styled.div``;\n\nconst WrapperRow = styled.div`\n height: 12px;\n background-color: ${({theme}) => theme.colors.palette.grey.manatee};\n border-radius: ${(props) => props.position === 'header'\n ? css`4px 4px 0px 0px`\n : css`0px 0px 4px 4px`\n };\n`;\n\n/**\n * A simple wrapper around EventDataGroup that adds a header and footer and default column\n * configs for use in KPIGroupWidget. All children are forwarded to EventDataGroup.\n *\n * @see EventDataGroup\n */\nexport default function KPIGroupContent({\n children,\n isPrint,\n}) {\n const columnOrder = ['label', 'value'];\n const columnConfigs = {\n label: {\n name: 'label',\n size: 1\n },\n value: {\n name: 'value',\n size: 1\n }\n };\n\n return (\n \n {!isPrint && }\n \n {children}\n \n {!isPrint && }\n \n );\n}\n\nKPIGroupContent.propTypes = {\n children: PropTypes.node,\n isPrint: PropTypes.bool,\n};\n\nKPIGroupContent.defaultProps = {\n isPrint: false,\n};\n","import { Heading4 } from 'Common/components/typography';\nimport styled from 'styled-components';\n\nconst KPIGroupHeading = styled(Heading4)`\n color: ${({theme, noColor}) => noColor\n ? theme.colors.darkText.highEmphasis\n : theme.colors.palette.blue.awesome\n };\n`;\n\nexport default KPIGroupHeading;\n","import React, { useMemo } from 'react';\nimport styled from 'styled-components';\nimport CategoryValue from 'Common/components/FormattedDatum/CategoryValue';\nimport Metric from 'Common/components/FormattedDatum/Metric';\nimport PropTypes from 'prop-types';\nimport { Body5, Heading5 } from 'Common/components/typography';\nimport { useTranslator } from 'Common/hooks/useTranslation';\n\nconst StyledCategoryValue = styled(CategoryValue)`\n padding-right: 20px;\n display: block;\n`;\nconst StyledMetric = styled(Metric)`\n display: block;\n text-align: right;\n`;\n\nconst Row = styled(Body5).attrs({ as: 'div' })`\n display: grid;\n padding: 4px 5px 5px 5px;\n grid-template-columns: auto auto;\n align-items: center;\n`;\n\nconst Root = styled.div`\n line-height: 16px;\n\n ${Row}:nth-child(2n) {\n border-radius: 3px;\n background-color: ${({theme}) => theme.colors.palette.grey.cloud};\n }\n`;\n\nconst InformationalText = styled.div`\n padding: 8px 5px 4px 5px;\n`;\n\nconst TooltipHeader = styled(Heading5)`\n display: block;\n text-align: left;\n`;\n\nconst MAX_ITEMS = 100;\n\nfunction TooltipContent({ data }) {\n const { displayName, values:dataValues } = data;\n const translator = useTranslator();\n const header = useMemo(() => {\n const hasMetrics = dataValues.find(x => x.metric);\n return hasMetrics\n ? (\n \n \n {displayName}\n \n
\n )\n : null;\n },[displayName, dataValues]);\n const content = useMemo(() => {\n if (!dataValues) {\n return [];\n }\n let values = dataValues;\n const orignalValuesLength = values.length;\n // we will only count too many items as max items + 1\n // this means we won't show a message that one item is missing\n // instead of just showing that one item\n const hasTooManyItems = orignalValuesLength > (MAX_ITEMS + 1);\n\n // we limit how much we show, too many items in here\n // can cause the tooltip to take a full second to load\n // and is soo much data that it's not very digestable to the user.\n if (hasTooManyItems) {\n values = values.slice(0, MAX_ITEMS);\n }\n\n let contentValues = values.map((elem, index) => {\n return elem.metric\n ? (\n \n \n
)\n : (\n \n
);\n });\n\n if (hasTooManyItems) {\n contentValues.push({translator('widget.spark_visualization.spark_dimension_label.chronogram_max_items', {numItems: orignalValuesLength - MAX_ITEMS})});\n }\n\n return contentValues;\n }, [dataValues, translator]);\n\n return (\n \n {header}\n {content}\n \n );\n}\n\nTooltipContent.propTypes = {\n data: PropTypes.shape({\n displayName: PropTypes.string.isRequired,\n values: PropTypes.arrayOf(\n PropTypes.shape({\n dimension: PropTypes.shape({\n displayName: PropTypes.string,\n name: PropTypes.string,\n formatType: PropTypes.string,\n rawValue: PropTypes.shape({\n displayName: PropTypes.string,\n name: PropTypes.string,\n color: PropTypes.string,\n }),\n }).isRequired,\n metric: PropTypes.shape({\n displayName: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n formatType: PropTypes.string.isRequired,\n rawValue: PropTypes.number\n }),\n }),\n ).isRequired,\n }),\n};\n\nexport default TooltipContent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Tooltip from 'Common/components/Tooltip';\nimport TooltipContent from './internal/TooltipContent';\nimport Icon from 'Common/components/Icon';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport { Body5 } from 'Common/components/typography';\nimport { TOOLTIP_LARGE } from 'Common/components/Tooltip/Tooltip';\nimport { TEXT_FORMAT_TYPE } from 'Common/components/SparkVisualization/SparkDimensionConstants';\nimport { categoryValueFormatTypes } from '../FormattedDatum/CategoryValue/CategoryValue';\n\nconst emptyArray = [];\n\nconst SparkTextContainer = styled.div.attrs(({ $width, $height }) => {\n if (isFinite($width)) {\n return {\n style: {\n width: `${$width}px`,\n height: `${$height}px`,\n },\n };\n }\n else {\n return {\n style: {\n height: `${$height}px`,\n },\n };\n }\n \n})`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n`;\n\nfunction TextSparkVisualization(props) {\n const translator = useTranslator();\n const {width, height, data} = props;\n const values = data?.values || emptyArray;\n\n let textContent = values.length === 0\n ? translator('null_metric_literal')\n : translator('multiple_category_value_template', {\n number: values.length,\n });\n\n let disableTooltip = false;\n\n if (values.length === 1){\n const displayName = values[0].dimension.rawValue.displayName;\n const color = values[0]?.dimension?.color;\n\n if (!displayName) {\n disableTooltip = true;\n }\n\n if(color) {\n textContent = (\n \n \n {displayName}\n \n );\n }\n else {\n textContent = displayName;\n }\n }\n\n return (\n }\n style={{ display: 'inline-block'}}\n maxWidth={TOOLTIP_LARGE}\n disabled={disableTooltip}\n >\n \n {textContent}\n \n \n );}\n\nTextSparkVisualization.propTypes = {\n data: PropTypes.shape({\n name: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n formatType: PropTypes.oneOf([TEXT_FORMAT_TYPE]).isRequired,\n values: PropTypes.arrayOf(\n PropTypes.shape({\n dimension: PropTypes.shape({\n displayName: PropTypes.string,\n name: PropTypes.string,\n formatType: PropTypes.oneOf(categoryValueFormatTypes).isRequired,\n rawValue: PropTypes.shape({\n displayName: PropTypes.string,\n name: PropTypes.string,\n color: PropTypes.string\n }),\n }).isRequired,\n metric: PropTypes.shape({\n displayName: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n formatType: PropTypes.string.isRequired,\n rawValue: PropTypes.number\n }),\n }),\n ).isRequired,\n }),\n width: PropTypes.number,\n height: PropTypes.number.isRequired,\n noColor: PropTypes.bool,\n};\n\nexport default TextSparkVisualization;\n","import { getQualitativeColor } from 'Common/util/color/util';\n\n/**\n * Given an array of values for a dimension visualization, fill in any dimensions\n * that do not have colors (at `dimension.color`) with colors chosen from the\n * qualitative color palette.\n *\n * If maxElements is provided, then any dimensions that would be merged in the\n * visualization (when values.length > maxElements) will be given the color\n * specified by `otherColor`.\n *\n * @param {Object} opts\n * @param {Object[]} opts.values The values to have colors added.\n * @param {Number} [opts.maxElements] Max elements show in the visualization.\n * @param {String} [opts.otherColor] A CSS color string to be used for any values\n * grouped into the \"other\" value due to maxElements. \n * @returns {Object[]} Values with colors for every dimension.\n */\nexport default function addDimensionColors({\n values,\n maxElements = null,\n otherColor = null,\n}) {\n if (maxElements && (!Number.isInteger(maxElements) || maxElements <= 0)) {\n throw new Error(`maxElements must be a positive integer or null. Got '${maxElements}'`);\n }\n\n if (maxElements && typeof otherColor !== 'string') {\n throw new Error(`otherColor is required if maxElements is set.`);\n }\n\n // Only enable 'other' coloring when maxElements is set and the number\n // of values exceeds maxElements.\n const enableOtherColoring = maxElements && values.length > maxElements;\n\n return values.map((value, index) => {\n const isOther = enableOtherColoring && index >= maxElements - 1;\n\n let color;\n\n if (isOther) {\n color = otherColor;\n }\n else if (value.dimension?.rawValue?.color) {\n color = value.dimension.rawValue.color;\n }\n else {\n color = getQualitativeColor(index);\n }\n\n return {\n ...value,\n dimension: {\n ...value.dimension,\n rawValue: {\n ...value.dimension.rawValue,\n color\n }\n },\n };\n });\n}\n","import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { useTheme } from 'styled-components';\nimport Tooltip from 'Common/components/Tooltip';\nimport TooltipContent from './internal/TooltipContent';\nimport { TOOLTIP_LARGE } from 'Common/components/Tooltip/Tooltip';\nimport { addSeconds, secondsBetween } from 'Common/util/language/date';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport addDimensionColors from './internal/addDimensionColors';\nimport { categoryValueFormatTypes } from '../FormattedDatum/CategoryValue/CategoryValue';\n\nconst PADDING = 4;\nconst MAX_HEIGHT = 30;\nconst MIN_BAR_WIDTH = 0.5;\n\nconst Root = styled.div.attrs(({ $width, $height, $showBars }) => {\n return {\n style: {\n width: `${$width}px`,\n height: `${$height}px`,\n justifyContent: $showBars ? 'center' : 'end',\n padding: $showBars ? `${PADDING}px` : 0,\n },\n };\n})`\n display: flex;\n align-items: center;\n`;\n\nconst BarContainer = styled.div.attrs(({ $width, $height }) => {\n return {\n style: {\n width: `${$width}px`,\n height: `${$height}px`,\n },\n };\n})`\n position: relative;\n border-radius: 5px;\n overflow: hidden;\n`;\n\nconst ChronogramEvent = styled.div.attrs(({ $width, $height, $left, $backgroundColor }) => {\n return {\n style: {\n width: `${$width}px`,\n height: `${$height}px`,\n left: `${$left}px`,\n backgroundColor: $backgroundColor,\n },\n };\n})`\n position: absolute;\n top: 0;\n`;\n\nfunction getMinStartTime(data) {\n if (!data?.values || data.values.length === 0) {\n return null;\n }\n\n // Just the start_time of the first value.\n return data?.values[0]?.start_time?.rawValue?.getDate?.() || null;\n}\n\nfunction getTotalDuration(data) {\n if (!data?.values || data.values.length === 0) {\n return 0;\n }\n\n const startTime = getMinStartTime(data);\n const lastValue = data.values[data.values.length - 1];\n const lastStartTime = lastValue?.start_time?.rawValue?.getDate?.();\n const lastDuration = lastValue?.duration?.rawValue;\n\n const endTime = addSeconds(lastStartTime, lastDuration);\n\n return secondsBetween(startTime, endTime);\n}\n\nfunction calcOffsetLeft(startTimeDate, totalStartTimeDate, totalDuration, totalWidth) {\n const secondsFromStart = secondsBetween(totalStartTimeDate, startTimeDate);\n return totalWidth * (secondsFromStart / totalDuration);\n}\n\nfunction calcWidth(duration, totalDuration, totalWidth) {\n return (duration / totalDuration) * totalWidth;\n}\n\nexport default function ChronogramSparkVisualization({\n width,\n height,\n data,\n noColor,\n}) {\n const widthSansPadding = width - (2 * PADDING);\n const heightSansPadding = height - (2 * PADDING);\n const theme = useTheme();\n const translator = useTranslator();\n\n const coloredData = useMemo(() => {\n if (!data) {\n return data;\n }\n\n return {\n ...data,\n values: addDimensionColors({\n values: data.values,\n }),\n };\n }, [ data ]);\n\n const bars = useMemo(() => {\n const totalStartTimeDate = getMinStartTime(coloredData);\n const totalDuration = getTotalDuration(coloredData);\n let noChronogramValue = true;\n\n const chronogramContent = (coloredData?.values || [])\n // Calculate rendered sizes for each chronogram event.\n .map((elem) => {\n let backgroundColor;\n\n if (elem.dimension.rawValue.color && !noColor) {\n backgroundColor = elem.dimension.rawValue.color;\n }\n else {\n backgroundColor = null;\n }\n if (elem.dimension.name !== 'null') {\n noChronogramValue = false;\n }\n const offsetLeft = calcOffsetLeft(\n elem.start_time.rawValue.getDate(),\n totalStartTimeDate,\n totalDuration,\n widthSansPadding,\n );\n\n const newWidth = calcWidth(\n elem.duration.rawValue,\n totalDuration,\n widthSansPadding,\n );\n\n return {\n left: offsetLeft,\n width: newWidth,\n height: height >= (MAX_HEIGHT+(2*PADDING)) ? MAX_HEIGHT : heightSansPadding,\n backgroundColor: backgroundColor,\n };\n })\n // Merge any adjacent event bars that are below the min width.\n .reduce((acc, bar) => {\n const isTooSmall = bar.width < MIN_BAR_WIDTH;\n\n if (isTooSmall) {\n const prev = acc[acc.length - 1];\n const shouldMerge = (\n prev &&\n prev.isCombined &&\n bar.left - (prev.left + prev.width) <= MIN_BAR_WIDTH\n );\n\n if (shouldMerge) {\n acc[acc.length - 1] = {\n ...prev,\n width: (bar.left + bar.width) - prev.left,\n };\n }\n else {\n acc.push({\n ...bar,\n isCombined: true,\n backgroundColor: null,\n });\n }\n }\n else {\n acc.push(bar);\n }\n\n return acc;\n }, [])\n // Filter any remaining bars that are less than the min width.\n .filter((bar) => {\n return bar.width >= MIN_BAR_WIDTH;\n })\n // Convert event bar objects into final components.\n .map((bar, index) => {\n let backgroundColor = bar.backgroundColor;\n\n if (bar.isCombined || !backgroundColor) {\n backgroundColor =\n index % 2 === 0\n ? theme.colors.palette.grey.silver\n : theme.colors.palette.grey.ash;\n }\n\n return (\n \n );\n });\n\n return noChronogramValue ? null : chronogramContent;\n }, [height, heightSansPadding, widthSansPadding, coloredData, theme, noColor]);\n\n // Convert tooltip data to just have metric instead of duration and\n // start_time.\n const tooltipData = useMemo(() => {\n if (!coloredData) {\n return null;\n }\n else {\n return {\n ...coloredData,\n values: (coloredData?.values || []).map((item) => {\n return {\n dimension: item.dimension,\n metric: item.duration,\n };\n }),\n };\n }\n }, [coloredData]);\n\n return (\n \n }\n style={{ display: 'inline-block'}}\n maxWidth={TOOLTIP_LARGE}\n disabled={!bars}\n >\n {bars ? (\n \n {bars}\n \n ) : (\n \n {translator(\"null_metric_literal\")}\n
\n )\n\n }\n \n \n \n );\n}\n\nChronogramSparkVisualization.propTypes = {\n data: PropTypes.shape({\n values: PropTypes.arrayOf(\n PropTypes.shape({\n dimension: PropTypes.shape({\n displayName: PropTypes.string,\n name: PropTypes.string,\n formatType: PropTypes.oneOf(categoryValueFormatTypes).isRequired,\n rawValue: PropTypes.shape({\n displayName: PropTypes.string,\n name: PropTypes.string,\n color: PropTypes.string\n })\n }).isRequired,\n start_time: PropTypes.shape({\n displayName: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n formatType: PropTypes.string.isRequired,\n rawValue: PropTypes.object.isRequired,\n }).isRequired,\n duration: PropTypes.shape({\n displayName: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n formatType: PropTypes.string.isRequired,\n rawValue: PropTypes.number.isRequired,\n }).isRequired,\n }),\n ).isRequired,\n }),\n width: PropTypes.number.isRequired,\n height: PropTypes.number.isRequired,\n noColor: PropTypes.bool,\n};\n","/**\n * Given an array of values for a bar or column visualization, calculate the\n * total of all metric values. Any `metric.rawValue` that is not a finite number\n * is considered 0.\n *\n * @param {Object[]} values\n * @returns {Number} Total of all `metric.rawValue`.\n */\nexport function getTotalMetricValue(values) {\n return values.reduce((total, value) => {\n return total + (Number.isFinite(value.metric.rawValue) ? value.metric.rawValue : 0);\n }, 0);\n}\n\n/**\n * Given an array of values for a bar or column visualization, merge any values\n * after `maxElements` into the last value, resulting in an array no longer\n * than `maxElements`. If the initial length does not exceed `maxElements`,\n * nothing will be done.\n *\n * NOTE: Not for use with chronogram visualizations. Chronograms don't have\n * maxElements and they don't have the same data shape.\n *\n * @param {Object[]} values\n * @param {Number} maxElements\n * @returns {Object[]} (Possibly) Merged values.\n */\nexport function mergeValuesAfterMaxElements(values, maxElements) {\n if (!Number.isInteger(maxElements) || maxElements <= 0) {\n throw new Error(`maxElements must be a positive integer > 0. Got '${maxElements}'`);\n }\n\n // If needed, merge any values after maxElements into the last element.\n //\n if (values.length > maxElements) {\n const graphableData = values.slice(0, maxElements - 1);\n const otherData = values.slice(maxElements - 1);\n const otherMetricValue = getTotalMetricValue(otherData);\n // Use the first color in `otherData` as the color for the whole group.\n // This is safe because in this context, otherData.length > 0.\n const otherColor = otherData[0].dimension.rawValue.color;\n // Carry over props from `metric`\n const metricProps = otherData[0].metric;\n\n return [\n ...graphableData,\n // The additional \"Other\" value...\n {\n dimension: {\n rawValue: {\n displayName: null,\n name: null,\n color: otherColor,\n },\n },\n metric: {\n ...metricProps,\n rawValue: otherMetricValue\n },\n },\n ];\n }\n else {\n // No merging needed.\n return values;\n }\n}\n","import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { useTheme } from 'styled-components';\nimport Tooltip from 'Common/components/Tooltip';\nimport TooltipContent from './internal/TooltipContent';\nimport { TOOLTIP_LARGE } from 'Common/components/Tooltip/Tooltip';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport addDimensionColors from './internal/addDimensionColors';\nimport { getTotalMetricValue, mergeValuesAfterMaxElements } from './internal/barAndColumnUtils';\nimport { BAR_FORMAT_TYPE } from 'Common/components/SparkVisualization/SparkDimensionConstants';\nimport { categoryValueFormatTypes } from '../FormattedDatum/CategoryValue/CategoryValue';\n\nconst PADDING = 4;\nconst MAX_HEIGHT = 30;\n\nconst Root = styled.div.attrs(({ $width, $height }) => {\n return {\n style: {\n width: `${$width}px`,\n height: `${$height}px`,\n },\n };\n})`\n padding: ${PADDING}px;\n padding-right: ${({$showBars}) => $showBars ? `${PADDING}px` : '0'};\n justify-content: ${({$showBars}) => $showBars ? 'center' : 'end'};\n display: flex;\n align-items: center;\n`;\n\nconst SparkBar = styled.div.attrs(({ $width, $height, $backgroundColor }) => {\n return {\n style: {\n width: `${$width}px`,\n height: `${$height}px`,\n backgroundColor: $backgroundColor,\n },\n };\n})``;\n\nconst SparkBarContainer = styled.div`\n border-radius: 5px;\n overflow: hidden;\n display: flex;\n`;\n\nfunction calcWidth(curr, total, totWidth) {\n if (total === 0 || !curr) {\n return 0;\n }\n\n return (curr / total) * totWidth;\n}\n\nfunction BarSparkVisualization(props) {\n const { width, height, data, maxElements, noColor } = props;\n const widthSansPadding = width - (2*PADDING);\n const heightSansPadding = height - (2*PADDING);\n const theme = useTheme();\n const translator = useTranslator();\n\n const coloredData = useMemo(() => {\n if (!data) {\n return data;\n }\n\n return {\n ...data,\n values: addDimensionColors({\n values: data.values,\n otherColor: theme.colors.palette.grey.ash,\n maxElements,\n }),\n };\n }, [ data, maxElements, theme ]);\n\n const mergedValues = useMemo(() => {\n return mergeValuesAfterMaxElements(coloredData?.values || [], maxElements);\n }, [ coloredData, maxElements ]);\n\n const barDetails = useMemo(() => {\n const total = getTotalMetricValue(mergedValues);\n let allValuesAreZero = !!mergedValues.length;\n let allValuesAreNull = true;\n const barValues = mergedValues.map((elem, index) => {\n let backgroundColor = elem.dimension?.rawValue.color;\n if (noColor) {\n backgroundColor = index % 2 === 0\n ? theme.colors.palette.grey.silver\n : theme.colors.palette.grey.ash;\n }\n\n const rawValue = elem.metric.rawValue;\n\n if (Number.isFinite(rawValue)) {\n allValuesAreNull = false;\n if (rawValue !== 0) {\n allValuesAreZero = false;\n }\n }\n\n const barWidth = calcWidth(rawValue, total, widthSansPadding);\n const barHeight = Math.min(heightSansPadding, MAX_HEIGHT);\n\n return (\n \n );\n });\n return {\n bars: barValues,\n allValuesAreNull,\n allValuesAreZero\n };\n }, [heightSansPadding, widthSansPadding, mergedValues, theme, noColor]);\n\n return (\n \n }\n style={{ display: 'inline-block'}}\n maxWidth={TOOLTIP_LARGE}\n disabled={barDetails.allValuesAreNull}\n >\n {coloredData?.error || barDetails.allValuesAreNull\n ? (\n \n {translator(\"null_metric_literal\")}\n
\n )\n : barDetails.allValuesAreZero\n ? (\n \n {translator(\"all_zero_values\")}\n
\n )\n : (\n \n {barDetails.bars}\n \n )}\n \n \n );\n}\n\nBarSparkVisualization.propTypes = {\n data: PropTypes.shape({\n name: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n formatType: PropTypes.oneOf([BAR_FORMAT_TYPE]).isRequired,\n values: PropTypes.arrayOf(\n PropTypes.shape({\n dimension: PropTypes.shape({\n displayName: PropTypes.string,\n name: PropTypes.string,\n formatType: PropTypes.oneOf(categoryValueFormatTypes).isRequired,\n rawValue: PropTypes.shape({\n displayName: PropTypes.string,\n name: PropTypes.string,\n color: PropTypes.string\n })\n }).isRequired,\n metric: PropTypes.shape({\n displayName: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n formatType: PropTypes.string.isRequired,\n rawValue: PropTypes.number\n }).isRequired,\n }),\n ).isRequired,\n }),\n width: PropTypes.number.isRequired,\n height: PropTypes.number.isRequired,\n maxElements: PropTypes.number.isRequired,\n noColor: PropTypes.bool,\n};\n\nexport default BarSparkVisualization;\n","import React, { useMemo } from 'react';\nimport styled, { useTheme } from 'styled-components';\nimport Tooltip from 'Common/components/Tooltip';\nimport TooltipContent from './internal/TooltipContent';\nimport PropTypes from 'prop-types';\nimport { TOOLTIP_LARGE } from 'Common/components/Tooltip/Tooltip';\nimport { COLUMN_FORMAT_TYPE } from 'Common/components/SparkVisualization/SparkDimensionConstants';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport addDimensionColors from './internal/addDimensionColors';\nimport { mergeValuesAfterMaxElements } from './internal/barAndColumnUtils';\nimport { categoryValueFormatTypes } from '../FormattedDatum/CategoryValue/CategoryValue';\n\nconst PADDING = 4;\nconst BORDER_RADIUS = 4;\n\nconst SparkColumn = styled.div.attrs(({ $width, $height, $margin, $backgroundColor }) => {\n // Heights between 0 and 1px or having decimal px can look weird when rendered.\n const height = Math.round(Math.max(1, $height));\n\n // Don't let the border radius be larger than the height or the browser\n // might render it weird.\n let borderRadius = Math.min(BORDER_RADIUS, height);\n\n // For some reason, a height and border radius of 1px will also lead the\n // browser to some weird rendering.\n if (height <= 1) {\n borderRadius = 0;\n }\n\n return {\n style: {\n width: `${$width}px`,\n height: `${height}px`,\n marginLeft: `${$margin}px`,\n marginRight: `${$margin}px`,\n backgroundColor: $backgroundColor,\n borderRadius: `${borderRadius}px ${borderRadius}px 0 0`,\n },\n };\n})`\n display: inline-block;\n vertical-align: bottom;\n`;\n\nconst SparkColumnContainer = styled.div.attrs(({ $width, $height }) => {\n return {\n style: {\n width: `${$width}px`,\n height: `${$height}px`,\n },\n };\n})`\n padding: ${PADDING}px;\n text-align: left;\n display: flex;\n align-items: end;\n`;\n\nconst NoValueContainer = styled.div`\n align-self: end;\n`;\n\nfunction getMaxMetricValue(values){\n return values.reduce((max, val) => {\n if (val.metric.rawValue) {\n return Math.max(max, val.metric.rawValue);\n }\n else {\n return max;\n }\n }, 0);\n}\n\nfunction calcHeight(currValue, maxValue, totalHeight) {\n if (!currValue) {\n return 0;\n }\n\n return (currValue / maxValue) * totalHeight;\n}\n\nfunction ColumnSparkVisualization(props) {\n const {width, height, data, maxElements, noColor} = props;\n const heightSansPadding = height - (2*PADDING);\n const theme = useTheme();\n const translator = useTranslator();\n\n const coloredData = useMemo(() => {\n if (!data) {\n return data;\n }\n\n return {\n ...data,\n values: addDimensionColors({\n values: data.values,\n otherColor: theme.colors.palette.grey.ash,\n maxElements,\n }),\n };\n }, [ data, maxElements, theme ]);\n\n const mergedValues = useMemo(() => {\n return mergeValuesAfterMaxElements(coloredData?.values || [], maxElements);\n }, [ coloredData, maxElements ]);\n\n const columnDetails = useMemo(() => {\n const margin = (maxElements > 7) ? 1 : 2;\n const colWidth = (width/maxElements) - (2*margin);\n let allValuesAreZero = !!mergedValues.length;\n let allValuesAreNull = true;\n\n const max = getMaxMetricValue(mergedValues);\n\n const columnValues = mergedValues.map((elem, index) => {\n let backgroundColor = elem.dimension.rawValue.color;\n\n if (noColor) {\n backgroundColor = index % 2 === 0\n ? theme.colors.palette.grey.silver\n : theme.colors.palette.grey.ash;\n }\n\n const rawValue = elem.metric.rawValue;\n const colHeight = calcHeight(rawValue, max, heightSansPadding);\n\n if (Number.isFinite(rawValue)) {\n allValuesAreNull = false;\n if (rawValue !== 0) {\n allValuesAreZero = false;\n }\n }\n \n return (\n \n );\n });\n\n return {\n columns: columnValues,\n allValuesAreNull,\n allValuesAreZero\n };\n }, [theme, heightSansPadding, mergedValues, maxElements, width, noColor]);\n\n return (\n }\n style={{ display: 'inline-block' }}\n maxWidth={TOOLTIP_LARGE}\n disabled={columnDetails.allValuesAreNull}\n >\n {columnDetails.allValuesAreNull\n ? (\n \n {translator(\"null_metric_literal\")}\n \n )\n : columnDetails.allValuesAreZero\n ? (\n \n {translator(\"all_zero_values\")}\n \n )\n : (\n \n {columnDetails.columns}\n \n )\n }\n \n );\n}\n\nColumnSparkVisualization.propTypes = {\n data: PropTypes.shape({\n name: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n formatType: PropTypes.oneOf([COLUMN_FORMAT_TYPE]).isRequired,\n values: PropTypes.arrayOf(\n PropTypes.shape({\n dimension: PropTypes.shape({\n displayName: PropTypes.string,\n name: PropTypes.string,\n formatType: PropTypes.oneOf(categoryValueFormatTypes).isRequired,\n rawValue: PropTypes.shape({\n displayName: PropTypes.string,\n name: PropTypes.string,\n color: PropTypes.string\n })\n }).isRequired,\n metric: PropTypes.shape({\n displayName: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n formatType: PropTypes.string.isRequired,\n rawValue: PropTypes.number\n }).isRequired,\n }),\n ).isRequired,\n }),\n width: PropTypes.number.isRequired,\n height: PropTypes.number.isRequired,\n maxElements: PropTypes.number.isRequired,\n noColor: PropTypes.bool,\n};\n\nexport default ColumnSparkVisualization;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Metric from 'Common/components/FormattedDatum/Metric/Metric';\nimport { DIMENSION_VISUALIZATION_FORMAT_TYPES } from 'Common/components/SparkVisualization/SparkDimensionConstants';\nimport TextSparkVisualization from 'Common/components/SparkVisualization/TextSparkVisualization';\nimport ChronogramSparkVisualization from 'Common/components/SparkVisualization/ChronogramSparkVisualization';\nimport BarSparkVisualization from 'Common/components/SparkVisualization/BarSparkVisualization';\nimport ColumnSparkVisualization from 'Common/components/SparkVisualization/ColumnSparkVisualization';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport InfoCircle from 'Common/components/InfoCircle';\n\nexport default function KPIGroupFormattedDatum({\n error,\n validationError,\n data,\n width,\n height,\n maxElements,\n noColor,\n}) {\n const translator = useTranslator();\n\n let content = null;\n const formatType = data?.formatType;\n\n if (error?.length) {\n content = (\n \n {translator('null_metric_literal')} \n \n );\n }\n else if (validationError) {\n content = (\n \n \n {validationError}\n \n
\n );\n }\n else if (formatType === DIMENSION_VISUALIZATION_FORMAT_TYPES.BAR_FORMAT_TYPE) {\n content = (\n \n );\n }\n else if (formatType === DIMENSION_VISUALIZATION_FORMAT_TYPES.CHRONOGRAM_FORMAT_TYPE) {\n content = (\n \n );\n }\n else if (formatType === DIMENSION_VISUALIZATION_FORMAT_TYPES.COLUMN_FORMAT_TYPE) {\n content = (\n \n );\n }\n else if (formatType === DIMENSION_VISUALIZATION_FORMAT_TYPES.TEXT_FORMAT_TYPE) {\n content = (\n \n );\n }\n else {\n content = (\n \n );\n }\n\n return content;\n}\n\nKPIGroupFormattedDatum.propTypes = {\n error: PropTypes.arrayOf(PropTypes.string),\n data: PropTypes.object.isRequired,\n width: PropTypes.number.isRequired,\n height: PropTypes.number.isRequired,\n maxElements: PropTypes.number,\n noColor: PropTypes.bool,\n validationError: PropTypes.string,\n};\n\nKPIGroupFormattedDatum.defaultProps = {\n noColor: false,\n};\n","import React, { useMemo, useState } from 'react';\nimport useBounds from 'Common/hooks/useBounds';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport { FAILURE } from 'Common/data/RequestStatus';\nimport useKPIGroupWidgetController from './internal/useKPIGroupWidgetController';\nimport KPIGroupWidgetLiveControls from './KPIGroupWidgetLiveControls';\nimport WidgetFrame from 'Common/components/WidgetFrame/WidgetFrame';\nimport FrameHeader from 'Common/components/WidgetFrame/FrameHeader';\nimport WidgetValidationErrorMessage from 'Common/components/WidgetFrame/WidgetValidationErrorMessage';\nimport WidgetLoadingIndicator from 'Common/components/WidgetFrame/WidgetLoadingIndicator';\nimport NoDataMessage from 'Common/components/NoDataMessage';\nimport KPIGroupContent from 'Common/components/widgets/KPIGroupWidget/KPIGroupContent';\nimport KPIGroupHeading from 'Common/components/widgets/KPIGroupWidget/KPIGroupHeading';\nimport EventDataRow from 'Common/components/EventData/EventDataRow';\nimport EventDataCell from 'Common/components/EventData/EventDataCell';\nimport { DIMENSION_VISUALIZATION_FORMAT_TYPES } from 'Common/components/SparkVisualization/SparkDimensionConstants';\nimport usePersistWidgetHeight from 'Common/hooks/usePersistWidgetHeight';\nimport RequestState from 'Common/types/RequestState/RequestState';\nimport KPIGroupFormattedDatum from './internal/KPIGroupFormattedDatum';\nimport CategoryValue from 'Common/components/FormattedDatum/CategoryValue/CategoryValue';\nimport { FIELD_TYPE, HEADING_TYPE } from './KPIGroupWidgetConstants';\n\nconst KPIGroupContainer = styled.div`\n padding: 4px 12px 12px 12px;\n`;\n\nconst DataCellContentContainer = styled.div`\n display: flex;\n justify-content: flex-end;\n text-align: right;\n`;\n\nconst AssetLabelContainer = styled.div`\n padding-left: 15px;\n`;\n\nconst LoadingContainer = styled.div.attrs(({ $minHeight }) => {\n if ($minHeight) {\n return {\n style: { minHeight: `${$minHeight}px` }\n };\n }\n})``;\n\nconst calculateSparkVisualizationWidth = (containerWidth) => {\n const defaultMaxWidth = 150;\n\n return containerWidth === undefined || isNaN(containerWidth)\n ? defaultMaxWidth\n : Math.min(defaultMaxWidth, containerWidth);\n};\n\nexport default function KPIGroupWidget({\n actions,\n alwaysShowAsset,\n areLiveControlsVisible,\n dataService,\n dragHandleProps,\n explorationPath,\n isDragEnabled,\n isLayoutModeActive,\n isPrint,\n mutable,\n printConfig,\n reportHierarchyNode,\n timeRange: pageTimeRange,\n widgetState,\n widgetStf,\n suppressedControls,\n suppressDelete,\n}) {\n\n const translator = useTranslator();\n const noColor = isPrint && printConfig.noColor;\n\n const {\n defaultTitle,\n handleTitleChange,\n title,\n\n dataRequest,\n\n filterOptions,\n filters,\n setSliceFilters,\n formattedFilters,\n\n followPageTimeRange,\n setTimeRange,\n widgetTimeRange,\n timeRangeDescription,\n\n followAppBarHierarchyNode,\n hierarchyNode,\n hierarchyNodeOptions,\n setHierarchyNode,\n\n columns,\n setColumns,\n columnOptions,\n\n isInitialized,\n\n supportsLiveControls,\n toggleShowLiveControls,\n } = useKPIGroupWidgetController({\n areLiveControlsVisible,\n dataService,\n isPrint,\n pageExplorationPath: explorationPath,\n pageTimeRange,\n reportHierarchyNode,\n mutable,\n setWidgetLiveControlsVisibility: actions.setWidgetLiveControlsVisibility,\n setWidgetPrintStatus: actions.setWidgetPrintStatus,\n setWidgetState: actions.setWidgetState,\n setWidgetStf: actions.setWidgetStf,\n widgetStf,\n widgetState,\n });\n\n const {\n widgetContainerRef,\n lastWidgetHeight\n } = usePersistWidgetHeight(dataRequest?.status);\n\n const [dataCellContentContainer, setDataCellContentContainer] = useState(null);\n const dataCellContentContainerBounds = useBounds(dataCellContentContainer);\n const dataCellContentContainerWidth = dataCellContentContainerBounds?.width;\n\n const contentElement = useMemo(() => {\n if (!RequestState.isRequestCompleted(dataRequest)) {\n return (\n \n \n \n );\n }\n else if (dataRequest?.status === FAILURE) {\n return (\n \n );\n }\n else {\n const contents = dataRequest.response.contents;\n const hasFieldsOrHeadings = !!contents.find(row => row.type === FIELD_TYPE || row.type === HEADING_TYPE);\n if (hasFieldsOrHeadings) {\n const data = dataRequest.response.data;\n const rowElements = contents.reduce((acc, row) => {\n if (row.type === HEADING_TYPE) {\n const displayName = row.heading?.displayName || translator(row.heading?.displayKey || '');\n acc.push(\n \n \n \n {displayName}\n \n \n \n );\n }\n else if (row.type === FIELD_TYPE) {\n const dataItem = data?.[row.field.name];\n const label = dataItem?.displayName || '';\n const formatType = dataItem?.formatType;\n const maxElements = row.field?.dimensionVisualization?.maxElementsShown;\n const cellHeight = 24;\n const dataCellWidth = calculateSparkVisualizationWidth(dataCellContentContainerWidth);\n\n // we need to handle having a row for each asset of the chronogram\n if (formatType === DIMENSION_VISUALIZATION_FORMAT_TYPES.CHRONOGRAM_FORMAT_TYPE) {\n // when we have multiple assets we need one per row\n if (dataItem?.values?.length > 1) {\n // put a title for the dimension\n acc.push(\n \n \n \n {label}\n \n \n \n );\n \n dataItem.values.forEach(assetData => {\n const finalDataItem = {\n ...dataItem,\n values: assetData.values\n };\n\n const dataCellContent = dataItem ? (\n \n \n \n ) : null;\n \n acc.push(\n \n \n \n \n \n \n \n {dataCellContent} \n \n \n );\n });\n\n }\n // if were only showing one put it a single row\n else {\n let finalDataItem = null;\n let finalDataItemError;\n let finalDataItemValidationError;\n if (dataItem) {\n let newValues = [];\n if (dataItem.values.length) {\n newValues = dataItem.values[0].values;\n finalDataItemError = dataItem.values[0].error;\n finalDataItemValidationError = dataItem.values[0].validationError;\n }\n finalDataItem = {\n ...dataItem,\n values: newValues\n };\n }\n\n const dataCellContent = finalDataItem ? (\n \n \n \n ) : null;\n \n acc.push(\n \n \n \n {label}\n \n \n \n {dataCellContent} \n \n \n );\n }\n }\n else {\n const dataCellContent = dataItem ? (\n \n \n \n ) : null;\n \n acc.push(\n \n \n \n {label}\n \n \n \n {dataCellContent} \n \n \n );\n }\n }\n else {\n // Any other row type can just be left a blank row\n acc.push(\n \n \n \n );\n }\n return acc;\n }, []);\n return (\n \n {rowElements}\n \n );\n }\n else {\n return (\n \n \n \n );\n }\n }\n }, [dataRequest, noColor, translator, isPrint, lastWidgetHeight, widgetContainerRef, dataCellContentContainerWidth]);\n\n return (\n \n )}\n liveControls={isInitialized && mutable && areLiveControlsVisible && (\n \n )}\n >\n {contentElement}\n \n );\n}\n\nKPIGroupWidget.propTypes = {\n widgetStf: PropTypes.object.isRequired,\n widgetState: PropTypes.object,\n alwaysShowAsset: PropTypes.bool,\n areLiveControlsVisible: PropTypes.bool.isRequired,\n suppressedControls: PropTypes.object,\n suppressDelete: PropTypes.bool,\n\n actions: PropTypes.shape({\n setWidgetStf: PropTypes.func.isRequired,\n setWidgetState: PropTypes.func.isRequired,\n setWidgetPrintStatus: PropTypes.func.isRequired,\n setWidgetExportItem: PropTypes.func.isRequired,\n deleteWidget: PropTypes.func.isRequired,\n duplicateWidget: PropTypes.func.isRequired,\n setWidgetLiveControlsVisibility: PropTypes.func.isRequired,\n }).isRequired,\n\n timeRange: PropTypes.object,\n explorationPath: PropTypes.object,\n reportHierarchyNode: PropTypes.shape({\n name: PropTypes.string,\n displayName: PropTypes.string\n }),\n\n mutable: PropTypes.bool.isRequired,\n dragHandleProps: PropTypes.object,\n isDragEnabled: PropTypes.bool.isRequired,\n isLayoutModeActive: PropTypes.bool.isRequired,\n isPrint: PropTypes.bool.isRequired,\n printConfig: PropTypes.object,\n\n dataService: PropTypes.shape({\n getColumnConfig: PropTypes.func.isRequired,\n getTimeRangePrimaryDetails: PropTypes.func.isRequired,\n getTimeRangeSecondaryDetails: PropTypes.func.isRequired,\n }).isRequired,\n};\n","\nexport const widgetSchema = {\n kpi_widget: {\n type: 'kpi_widget',\n descriptionKey: 'dashboard.widget_descriptions.kpi_widget',\n displayKey: 'kpi_literal',\n liveControls: true,\n iconUrl: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMiAxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIgMTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO30KCS5zdDF7ZmlsbDojRkZGRkZGO30KCS5zdDJ7ZmlsbDojMDU1MzkxO30KPC9zdHlsZT4KPGc+Cgk8ZGVmcz4KCQk8cmVjdCBpZD0iU1ZHSURfMV8iIHk9IjAiIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIvPgoJPC9kZWZzPgoJPGNsaXBQYXRoIGlkPSJTVkdJRF8yXyI+CgkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfMV8iICBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZTsiLz4KCTwvY2xpcFBhdGg+Cgk8ZyBpZD0iQWRkX1dpZGdldF9LUEkiIGNsYXNzPSJzdDAiPgoJCTxyZWN0IHk9IjAiIGNsYXNzPSJzdDEiIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIvPgoJCTxnIGlkPSJHcm91cF8zOTExIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDAuNSkiPgoJCQk8Zz4KCQkJCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik01LjQsNC4yYzAsMC40LTAuMSwwLjctMC4yLDFDNS4xLDUuNiw0LjksNS45LDQuNyw2LjJMMy4yLDguNUgxLjNsMS42LTIuMmwwLDBMMi43LDYuM2wtMC4yLDAKCQkJCQljLTAuMywwLTAuNSwwLTAuOC0wLjFDMS40LDYuMSwxLjIsNiwxLDUuOEMwLjgsNS42LDAuNyw1LjQsMC42LDUuMUMwLjUsNC45LDAuNCw0LjYsMC40LDQuM2MwLTAuNCwwLjEtMC43LDAuMi0xCgkJCQkJczAuMy0wLjUsMC41LTAuN2MwLjItMC4yLDAuNS0wLjMsMC44LTAuNUMyLjIsMiwyLjYsMiwyLjksMmMwLjMsMCwwLjcsMC4xLDEsMC4yYzAuMywwLjEsMC42LDAuMywwLjgsMC41CgkJCQkJQzQuOSwyLjgsNS4xLDMsNS4yLDMuM1M1LjQsMy45LDUuNCw0LjJ6IE0zLjksNC4yYzAtMC4zLTAuMS0wLjUtMC4zLTAuN0MzLjUsMy4zLDMuMiwzLjIsMi45LDMuMmMtMC4zLDAtMC42LDAuMS0wLjcsMC4zCgkJCQkJQzIsMy43LDEuOSwzLjksMS45LDQuMmMwLDAuMywwLjEsMC41LDAuMywwLjdjMC4yLDAuMiwwLjQsMC4zLDAuNywwLjNjMC4zLDAsMC41LTAuMSwwLjctMC4zQzMuOCw0LjgsMy45LDQuNSwzLjksNC4yeiIvPgoJCQkJPHBhdGggY2xhc3M9InN0MiIgZD0iTTExLjEsNi43YzAsMC4zLTAuMSwwLjYtMC4yLDAuOVMxMC42LDgsMTAuNCw4LjJTOS45LDguNSw5LjYsOC41UzksOC43LDguNyw4LjdjLTAuMywwLTAuNiwwLTAuOS0wLjEKCQkJCQlTNy4zLDguMyw3LjEsOC4yQzYuOCw4LDYuNyw3LjgsNi41LDcuNlM2LjMsNyw2LjMsNi43YzAtMC4yLDAtMC40LDAuMS0wLjVzMC4xLTAuMywwLjItMC40QzYuOCw1LjYsNi45LDUuNSw3LDUuNAoJCQkJCWMwLjEtMC4xLDAuMy0wLjIsMC40LTAuMnYwQzcuMiw1LDcsNC45LDYuOCw0LjdDNi42LDQuNCw2LjUsNC4xLDYuNSwzLjhjMC0wLjMsMC4xLTAuNiwwLjItMC44QzYuOCwyLjgsNywyLjYsNy4yLDIuNAoJCQkJCWMwLjItMC4yLDAuNC0wLjMsMC43LTAuM0M4LjEsMiw4LjQsMiw4LjcsMkM5LDIsOS4zLDIsOS42LDIuMWMwLjMsMC4xLDAuNSwwLjIsMC43LDAuM2MwLjIsMC4xLDAuNCwwLjMsMC41LDAuNgoJCQkJCWMwLjEsMC4yLDAuMiwwLjUsMC4yLDAuOGMwLDAuNC0wLjEsMC43LTAuMywwLjlDMTAuNSw0LjksMTAuMyw1LDEwLDUuMXYwYzAuMiwwLDAuMywwLjEsMC40LDAuMmMwLjEsMC4xLDAuMywwLjIsMC40LDAuMwoJCQkJCVMxMSw2LDExLDYuMkMxMS4xLDYuMywxMS4xLDYuNSwxMS4xLDYuN3ogTTkuNiw2LjZjMC0wLjItMC4xLTAuNS0wLjItMC42QzkuMiw1LjgsOSw1LjgsOC43LDUuOEM4LjUsNS44LDguMiw1LjgsOC4xLDYKCQkJCQlDNy45LDYuMiw3LjgsNi40LDcuOCw2LjZjMCwwLjMsMC4xLDAuNSwwLjIsMC42YzAuMiwwLjIsMC40LDAuMiwwLjYsMC4yczAuNS0wLjEsMC42LTAuMkM5LjUsNy4xLDkuNiw2LjksOS42LDYuNnogTTkuNSwzLjkKCQkJCQljMC0wLjItMC4xLTAuNC0wLjItMC41QzkuMSwzLjIsOC45LDMuMSw4LjcsMy4xYy0wLjIsMC0wLjQsMC4xLTAuNSwwLjJTOCwzLjYsOCwzLjlDOCw0LjEsOCw0LjIsOC4yLDQuNAoJCQkJCWMwLjEsMC4yLDAuMywwLjIsMC42LDAuMmMwLjIsMCwwLjQtMC4xLDAuNS0wLjJDOS40LDQuMiw5LjUsNC4xLDkuNSwzLjl6Ii8+CgkJCTwvZz4KCQk8L2c+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==',\n\n defaults: {\n __meta__: {},\n exploration_path: {\n asset_control: {\n level: '',\n root: 'self'\n },\n field_set: {\n default_channel: 'production_metric',\n fields: [\n {\n channel: 'production_metric',\n name: 'oee',\n }\n ]\n\n },\n // Provide some convenient default filters that don't\n // fill out the right hand side.\n //\n slice_filter: {\n expressions: [\n {\n lhs: {\n channel: 'production_metric',\n name: 'shift',\n },\n op: 'eq',\n rhs: null,\n },\n {\n lhs: {\n channel: 'production_metric',\n name: 'part',\n },\n op: 'eq',\n rhs: null,\n }\n ],\n combine_type: 'and'\n }\n },\n hideLiveControls: true,\n shouldShowFilterText: true,\n type: 'kpi_widget',\n updateTimeInterval: 'default'\n }\n },\n kpi_group_widget: {\n type: 'kpi_group_widget',\n descriptionKey: 'dashboard.widget_descriptions.kpi_group_widget',\n displayKey: 'kpi_group_literal',\n iconUrl: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMiAxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIgMTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO30KCS5zdDF7ZmlsbDojRkZGRkZGO30KCS5zdDJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNF8pO30KCS5zdDN7ZmlsbDojMDU1MzkyO30KCS5zdDR7ZmlsbDojNDE4Q0NBO30KPC9zdHlsZT4KPGc+Cgk8ZGVmcz4KCQk8cmVjdCBpZD0iU1ZHSURfMV8iIHk9IjAiIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIvPgoJPC9kZWZzPgoJPGNsaXBQYXRoIGlkPSJTVkdJRF8yXyI+CgkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfMV8iICBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZTsiLz4KCTwvY2xpcFBhdGg+Cgk8ZyBpZD0iQWRkX1dpZGdldF9LUEkiIGNsYXNzPSJzdDAiPgoJCTxyZWN0IHk9IjAiIGNsYXNzPSJzdDEiIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIvPgoJPC9nPgo8L2c+CjxnPgoJPGRlZnM+CgkJPHJlY3QgaWQ9IlNWR0lEXzNfIiB5PSIwIiB3aWR0aD0iMTIiIGhlaWdodD0iMTIiLz4KCTwvZGVmcz4KCTxjbGlwUGF0aCBpZD0iU1ZHSURfNF8iPgoJCTx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzNfIiAgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7Ii8+Cgk8L2NsaXBQYXRoPgoJPGcgaWQ9IkFkZF9XaWRnZXRfS1BJX0dyb3VwIiBjbGFzcz0ic3QyIj4KCQk8Zz4KCQkJPHJlY3QgeT0iMCIgY2xhc3M9InN0MSIgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIi8+CgkJCTxwYXRoIGNsYXNzPSJzdDMiIGQ9Ik02LjQsNC40bDEtMS40bDAsMEw3LjIsM0w3LDNjLTAuMiwwLTAuMywwLTAuNS0wLjFTNi4yLDIuNyw2LjEsMi42QzYsMi41LDUuOSwyLjQsNS45LDIuMgoJCQkJQzUuOCwyLjEsNS44LDEuOSw1LjgsMS43YzAtMC4yLDAtMC40LDAuMS0wLjZDNS45LDEsNiwwLjgsNi4yLDAuN3MwLjMtMC4yLDAuNS0wLjNDNi44LDAuNCw3LDAuNCw3LjIsMC40YzAuMiwwLDAuNCwwLDAuNiwwLjEKCQkJCWMwLjIsMC4xLDAuMywwLjIsMC41LDAuM0M4LjMsMC45LDguNCwxLDguNSwxLjJzMC4xLDAuMywwLjEsMC41YzAsMC4xLDAsMC4yLDAsMC4zYzAsMC4xLDAsMC4yLTAuMSwwLjNTOC40LDIuNSw4LjQsMi42CgkJCQljMCwwLjEtMC4xLDAuMi0wLjIsMC4zbC0xLDEuNUg2LjR6IE03LjksMS43YzAtMC4xLDAtMC4yLTAuMS0wLjNjMC0wLjEtMC4xLTAuMi0wLjItMC4yQzcuNywxLjEsNy42LDEsNy41LDFTNy4zLDAuOSw3LjIsMC45CgkJCQlDNywwLjksNi44LDEsNi42LDEuMUM2LjUsMS4zLDYuNCwxLjUsNi40LDEuN2MwLDAuMSwwLDAuMiwwLjEsMC4zYzAsMC4xLDAuMSwwLjIsMC4yLDAuMmwwLjIsMC4yYzAuMSwwLDAuMiwwLjEsMC4zLDAuMQoJCQkJYzAuMSwwLDAuMiwwLDAuMy0wLjFjMC4xLDAsMC4yLTAuMSwwLjItMC4yQzcuOCwyLjIsNy44LDIuMSw3LjksMkM3LjksMS45LDcuOSwxLjgsNy45LDEuN3oiLz4KCQkJPHBhdGggY2xhc3M9InN0MyIgZD0iTTEwLjUsMC40YzAuMiwwLDAuMywwLDAuNSwwLjFjMC4xLDAsMC4zLDAuMSwwLjQsMC4yYzAuMSwwLjEsMC4yLDAuMiwwLjMsMC4zczAuMSwwLjMsMC4xLDAuNAoJCQkJYzAsMC4yLTAuMSwwLjQtMC4yLDAuNmMtMC4xLDAuMi0wLjMsMC4zLTAuNCwwLjN2MGMwLjEsMCwwLjIsMC4xLDAuMywwLjFsMC4yLDAuMmMwLjEsMC4xLDAuMSwwLjIsMC4yLDAuM3MwLjEsMC4yLDAuMSwwLjMKCQkJCWMwLDAuMiwwLDAuNC0wLjEsMC41Yy0wLjEsMC4xLTAuMiwwLjMtMC4zLDAuNHMtMC4zLDAuMi0wLjQsMC4yYy0wLjIsMC4xLTAuMywwLjEtMC41LDAuMWMtMC4yLDAtMC40LDAtMC41LTAuMQoJCQkJQzkuOCw0LjMsOS43LDQuMiw5LjYsNC4xQzkuNSw0LDkuNCwzLjksOS4zLDMuOFM5LjIsMy40LDkuMiwzLjNjMC0wLjEsMC0wLjIsMC4xLTAuM2MwLTAuMSwwLjEtMC4yLDAuMi0wLjNsMC4yLTAuMgoJCQkJYzAuMS0wLjEsMC4yLTAuMSwwLjMtMC4xdjBDOS43LDIuMiw5LjYsMi4xLDkuNSwyQzkuNCwxLjksOS4zLDEuNyw5LjMsMS40YzAtMC4yLDAtMC4zLDAuMS0wLjRjMC4xLTAuMSwwLjItMC4yLDAuMy0wLjMKCQkJCUM5LjgsMC42LDkuOSwwLjUsMTAsMC40UzEwLjQsMC40LDEwLjUsMC40eiBNMTAuNSwyLjZjLTAuMSwwLTAuMiwwLTAuMywwbC0wLjIsMC4xTDkuOSwzYzAsMC4xLTAuMSwwLjItMC4xLDAuMwoJCQkJYzAsMC4yLDAuMSwwLjQsMC4yLDAuNWMwLjEsMC4xLDAuMywwLjIsMC41LDAuMmMwLjIsMCwwLjMtMC4xLDAuNS0wLjJjMC4xLTAuMSwwLjItMC4zLDAuMi0wLjVjMC0wLjEsMC0wLjItMC4xLTAuM0wxMSwyLjgKCQkJCWwtMC4yLTAuMUMxMC43LDIuNiwxMC42LDIuNiwxMC41LDIuNnogTTEwLjUsMC45Yy0wLjIsMC0wLjMsMC0wLjQsMC4xUzEwLDEuMywxMCwxLjVjMCwwLjIsMC4xLDAuMywwLjIsMC40UzEwLjQsMiwxMC41LDJsMC4yLDAKCQkJCWwwLjItMC4xbDAuMS0wLjJsMC0wLjJsMC0wLjJsLTAuMS0wLjJsLTAuMi0wLjFMMTAuNSwwLjl6Ii8+CgkJCTxwb2x5Z29uIGNsYXNzPSJzdDMiIHBvaW50cz0iNy41LDguNyA2LjcsOS4zIDYuMyw4LjggNy41LDcuOSA4LjEsNy45IDguMSwxMS44IDcuNSwxMS44IAkJCSIvPgoJCQk8cG9seWdvbiBjbGFzcz0ic3QzIiBwb2ludHM9IjEwLjgsOC43IDEwLjEsOS4zIDkuNyw4LjggMTAuOSw3LjkgMTEuNSw3LjkgMTEuNSwxMS44IDEwLjgsMTEuOCAJCQkiLz4KCQkJPHBhdGggY2xhc3M9InN0NCIgZD0iTTAuOSw3LjloMS41YzAuMSwwLDAuMywwLDAuNCwwLjFTMy4xLDgsMy4yLDguMWMwLjEsMC4xLDAuMiwwLjIsMC4zLDAuM2MwLjEsMC4xLDAuMSwwLjMsMC4xLDAuNQoJCQkJYzAsMC4yLTAuMSwwLjQtMC4yLDAuNUMzLjMsOS41LDMuMSw5LjYsMi45LDkuN3YwYzAuMiwwLDAuNCwwLjEsMC42LDAuM2MwLjIsMC4yLDAuMiwwLjQsMC4yLDAuNmMwLDAuMiwwLDAuNC0wLjEsMC41CgkJCQljLTAuMSwwLjEtMC4yLDAuMy0wLjMsMC4zYy0wLjEsMC4xLTAuMywwLjItMC41LDAuMmMtMC4yLDAtMC40LDAuMS0wLjUsMC4xSDAuOVY3Ljl6IE0xLjYsOS40aDAuNmMwLjIsMCwwLjQsMCwwLjUtMC4xCgkJCQlzMC4yLTAuMiwwLjItMC40YzAtMC4yLTAuMS0wLjMtMC4yLTAuNEMyLjYsOC41LDIuNCw4LjQsMi4xLDguNEgxLjZWOS40eiBNMS42LDExLjJoMC42YzAuMSwwLDAuMiwwLDAuMywwYzAuMSwwLDAuMiwwLDAuMy0wLjEKCQkJCUwzLDEwLjljMC4xLTAuMSwwLjEtMC4yLDAuMS0wLjNjMC0wLjItMC4xLTAuMy0wLjItMC40QzIuNywxMC4xLDIuNSwxMCwyLjIsMTBIMS42VjExLjJ6Ii8+CgkJCTxwYXRoIGNsYXNzPSJzdDQiIGQ9Ik0xLjgsMC41aDAuNkw0LDQuNEgzLjNMMi45LDMuNUgxLjJMMC44LDQuNEgwLjFMMS44LDAuNXogTTIuNiwyLjlMMiwxLjNMMS40LDIuOUgyLjZ6Ii8+CgkJPC9nPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=',\n\n liveControls: true,\n\n defaults: {\n __meta__: {},\n exploration_path: {\n asset_control: {\n level: '',\n root: 'self'\n },\n // Provide some convenient default filters that don't\n // fill out the right hand side.\n //\n slice_filter: {\n expressions: [\n {\n lhs: {\n channel: 'production_metric',\n name: 'shift',\n },\n op: 'eq',\n rhs: null,\n },\n {\n lhs: {\n channel: 'production_metric',\n name: 'part',\n },\n op: 'eq',\n rhs: null,\n }\n ],\n combine_type: 'and'\n }\n },\n contents: [],\n hideLiveControls: true,\n shouldShowFilterText: true,\n type: 'kpi_group_widget',\n updateTimeInterval: 'default'\n }\n },\n email_table_widget: {\n type: 'email_table_widget',\n descriptionKey: 'dashboard.widget_descriptions.table_widget',\n displayKey: 'table_literal',\n liveControls: true,\n iconUrl: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiI+CiAgPGRlZnM+CiAgICA8Y2xpcFBhdGggaWQ9ImNsaXAtQWRkX1dpZGdldF9UYWJsZSI+CiAgICAgIDxyZWN0IHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIvPgogICAgPC9jbGlwUGF0aD4KICA8L2RlZnM+CiAgPGcgaWQ9IkFkZF9XaWRnZXRfVGFibGUiIGRhdGEtbmFtZT0iQWRkIFdpZGdldCDigJPCoFRhYmxlIiBjbGlwLXBhdGg9InVybCgjY2xpcC1BZGRfV2lkZ2V0X1RhYmxlKSI+CiAgICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9IiNmZmYiLz4KICAgIDxnIGlkPSJHcm91cF8zOTEyIiBkYXRhLW5hbWU9Ikdyb3VwIDM5MTIiPgogICAgICA8cGF0aCBpZD0iUmVjdGFuZ2xlXzEwMzYiIGRhdGEtbmFtZT0iUmVjdGFuZ2xlIDEwMzYiIGQ9Ik0xLDBIM0EwLDAsMCwwLDEsMywwVjEyYTAsMCwwLDAsMSwwLDBIMWExLDEsMCwwLDEtMS0xVjFBMSwxLDAsMCwxLDEsMFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyKSByb3RhdGUoOTApIiBmaWxsPSIjNmE2YTZhIi8+CiAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGVfMTAzNyIgZGF0YS1uYW1lPSJSZWN0YW5nbGUgMTAzNyIgd2lkdGg9IjQiIGhlaWdodD0iMTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyIDMpIHJvdGF0ZSg5MCkiIGZpbGw9IiNmZmYiLz4KICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZV8xMDM4IiBkYXRhLW5hbWU9IlJlY3RhbmdsZSAxMDM4IiB3aWR0aD0iNCIgaGVpZ2h0PSIxMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIgNykgcm90YXRlKDkwKSIgZmlsbD0icmdiYSgwLDAsMCwwLjEpIi8+CiAgICAgIDxwYXRoIGlkPSJSZWN0YW5nbGVfMTAzOSIgZGF0YS1uYW1lPSJSZWN0YW5nbGUgMTAzOSIgZD0iTS41LDBIMUEwLDAsMCwwLDEsMSwwVjEyYTAsMCwwLDAsMSwwLDBILjVhLjUuNSwwLDAsMS0uNS0uNVYuNUEuNS41LDAsMCwxLC41LDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEyKSByb3RhdGUoLTkwKSIgZmlsbD0iIzZhNmE2YSIvPgogICAgPC9nPgogICAgPHJlY3QgaWQ9IlJlY3RhbmdsZV8xMjA0IiBkYXRhLW5hbWU9IlJlY3RhbmdsZSAxMjA0IiB3aWR0aD0iMC41IiBoZWlnaHQ9IjEyIiByeD0iMC4yNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNi4yNSAxMikgcm90YXRlKDE4MCkiIGZpbGw9IiM2YTZhNmEiLz4KICA8L2c+Cjwvc3ZnPgo=',\n\n defaults: {\n __meta__: {},\n tableType: 'availability_events',\n exploration_path: {\n field_set: {\n default_channel: 'production_metric',\n fields: [\n ]\n\n },\n },\n hideLiveControls: true,\n type: 'email_table_widget',\n hideEditableLiveControls: false,\n }\n },\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useDroppable } from '@dnd-kit/core';\nimport { useTheme } from 'styled-components';\n\nexport default function DroppableSpot(props) {\n const {\n droppableId,\n sectionIndex,\n columnIndex,\n widgetIndex,\n widgetId,\n outerHeight,\n } = props;\n\n const { isOver, setNodeRef } = useDroppable({\n id: droppableId,\n data: {\n sectionIndex: sectionIndex,\n columnIndex: columnIndex,\n widgetIndex: widgetIndex,\n widgetId: widgetId,\n },\n });\n\n const placeholderHeight = 4;\n\n const placeholderTop = Math.round(\n outerHeight / 2 - placeholderHeight / 2,\n );\n\n const theme = useTheme();\n\n return (\n \n }\n \n );\n}\n\nDroppableSpot.propTypes = {\n droppableId: PropTypes.string.isRequired,\n sectionIndex: PropTypes.number.isRequired,\n columnIndex: PropTypes.number.isRequired,\n widgetIndex: PropTypes.number.isRequired,\n widgetId: PropTypes.string,\n outerHeight: PropTypes.number.isRequired,\n};\n","import React, { createContext, useCallback, useContext, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { DndContext } from '@dnd-kit/core';\n\nconst WorkaroundDndMonitorContext = createContext({\n addListener: () => {},\n removeListener: () => {},\n});\n\nconst emptyFn = () => {};\n\n/**\n * A workaround for a bug in dnd-kit where useDndMonitor onDragStart will\n * sometimes not be called. This wraps around the DndContext with another\n * context to provide an equivalent to useDndMonitor that actually works.\n * \n * When using this context, the useWorkaroundDndMonitor can be used instead of\n * useDndMonitor.\n * \n * A GitHub issue has been opened here:\n * https://github.com/clauderic/dnd-kit/issues/369\n * \n * Once the issue is resolved, this code can be deleted.\n *\n * @param {*} props\n * @returns {React.ReactElement}\n */\nexport function WorkaroundDndContext(props) {\n const {\n onDragStart,\n onDragMove,\n onDragOver,\n onDragEnd,\n onDragCancel,\n ...otherProps\n } = props;\n\n const listeners = useRef({\n onDragStart: [],\n onDragMove: [],\n onDragOver: [],\n onDragEnd: [],\n onDragCancel: [],\n });\n\n const addListener = useRef((eventName, fn) => {\n listeners.current[eventName].push(fn);\n });\n\n const removeListener = useRef((eventName, fn) => {\n listeners.current[eventName] = listeners.current[eventName].filter((l) => {\n return l !== fn;\n });\n });\n\n const callListeners = useRef((eventName, ...args) => {\n listeners.current[eventName].forEach((l) => {\n l(...args);\n });\n });\n\n const handleDragStart = useCallback((...args) => {\n onDragStart(...args);\n callListeners.current('onDragStart', ...args);\n }, [ onDragStart ]);\n const handleDragMove = useCallback((...args) => {\n onDragMove(...args);\n callListeners.current('onDragMove', ...args);\n }, [ onDragMove ]);\n const handleDragOver = useCallback((...args) => {\n onDragOver(...args);\n callListeners.current('onDragOver', ...args);\n }, [ onDragOver ]);\n const handleDragEnd = useCallback((...args) => {\n onDragEnd(...args);\n callListeners.current('onDragEnd', ...args);\n }, [ onDragEnd ]);\n const handleDragCancel = useCallback((...args) => {\n onDragCancel(...args);\n callListeners.current('onDragCancel', ...args);\n }, [ onDragCancel ]);\n\n const valueRef = useRef({\n addListener: addListener.current,\n removeListener: removeListener.current,\n });\n\n return (\n \n \n \n );\n}\n\nWorkaroundDndContext.propTypes = {\n onDragStart: PropTypes.func,\n onDragMove: PropTypes.func,\n onDragOver: PropTypes.func,\n onDragEnd: PropTypes.func,\n onDragCancel: PropTypes.func,\n};\n\nWorkaroundDndContext.defaultProps = {\n onDragStart: emptyFn,\n onDragMove: emptyFn,\n onDragOver: emptyFn,\n onDragEnd: emptyFn,\n onDragCancel: emptyFn,\n};\n\nexport function useWorkaroundDndMonitor({\n onDragStart = emptyFn,\n onDragMove = emptyFn,\n onDragOver = emptyFn,\n onDragEnd = emptyFn,\n onDragCancel = emptyFn,\n}) {\n const monitorContext = useContext(WorkaroundDndMonitorContext);\n\n useEffect(() => {\n monitorContext.addListener('onDragStart', onDragStart);\n return () => {\n monitorContext.removeListener('onDragStart', onDragStart);\n };\n }, [ onDragStart, monitorContext ]);\n useEffect(() => {\n monitorContext.addListener('onDragMove', onDragMove);\n return () => {\n monitorContext.removeListener('onDragMove', onDragMove);\n };\n }, [ onDragMove, monitorContext ]);\n useEffect(() => {\n monitorContext.addListener('onDragOver', onDragOver);\n return () => {\n monitorContext.removeListener('onDragOver', onDragOver);\n };\n }, [ onDragOver, monitorContext ]);\n useEffect(() => {\n monitorContext.addListener('onDragEnd', onDragEnd);\n return () => {\n monitorContext.removeListener('onDragEnd', onDragEnd);\n };\n }, [ onDragEnd, monitorContext ]);\n useEffect(() => {\n monitorContext.addListener('onDragCancel', onDragCancel);\n return () => {\n monitorContext.removeListener('onDragCancel', onDragCancel);\n };\n }, [ onDragCancel, monitorContext ]);\n}\n","import React, { useCallback, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { useDraggable } from '@dnd-kit/core';\nimport { useWorkaroundDndMonitor } from './WorkaroundDndContext';\n\nfunction getScrollPosition(scrollParent) {\n if (scrollParent === window) {\n return {\n x: window.scrollX,\n y: window.scrollY,\n };\n }\n else {\n if (typeof scrollParent.scrollTop !== 'number' || typeof scrollParent.scrollLeft !== 'number') {\n throw new Error('Invalid scroll parent');\n }\n else {\n return {\n x: scrollParent.scrollLeft,\n y: scrollParent.scrollTop,\n };\n }\n }\n}\n\nconst Root = styled.div`\n /*\n Add some vertical space between the widgets by adding a margin-top to\n each widget, excluding the first/top one.\n */\n margin-top: ${({ $isFirstWidget }) => $isFirstWidget ? '0' : '10px'};\n`;\n\nexport default function DraggableWrapper(props) {\n const {\n isLayoutModeActive,\n sectionIndex,\n columnIndex,\n widgetIndex,\n widgetId,\n renderWidget,\n disabled,\n getScrollParent,\n } = props;\n\n const [isDragInProgress, setIsDragInProgress] = useState(false);\n\n const [initialWindowScroll, setInitialWindowScroll] = useState({\n x: 0,\n y: 0,\n });\n\n const [translate, setTranslate] = useState({ x: 0, y: 0 });\n\n const { attributes, listeners, setNodeRef, isDragging } = useDraggable({\n id: widgetId,\n data: {\n widgetIndex,\n columnIndex,\n sectionIndex,\n widgetId,\n },\n disabled: disabled,\n });\n\n useWorkaroundDndMonitor({\n onDragStart: useCallback(\n (event) => {\n setIsDragInProgress(true);\n\n if (event.active.id !== widgetId) {\n return;\n }\n\n const scrollPosition = getScrollPosition(getScrollParent());\n\n setInitialWindowScroll({\n x: scrollPosition.x,\n y: scrollPosition.y,\n });\n setTranslate({ x: 0, y: 0 });\n },\n [ widgetId, getScrollParent ],\n ),\n onDragMove: useCallback(\n (event) => {\n if (event.active.id !== widgetId) {\n return;\n }\n\n setTranslate({\n x: event.delta.x - initialWindowScroll.x,\n y: event.delta.y - initialWindowScroll.y,\n });\n },\n [ widgetId, initialWindowScroll ],\n ),\n onDragEnd: () => {\n setIsDragInProgress(false);\n setInitialWindowScroll({ x: 0, y: 0 });\n setTranslate({ x: 0, y: 0 });\n },\n onDragCancel: () => {\n setIsDragInProgress(false);\n setInitialWindowScroll({ x: 0, y: 0 });\n setTranslate({ x: 0, y: 0 });\n },\n });\n\n const style = {\n transition: 'opacity 300ms',\n opacity: '1',\n // Add some vertical space between the widgets by adding a margin-top to\n // each widget, excluding the first/top one.\n marginTop: widgetIndex === 0 ? '0' : '10px',\n zIndex: '0',\n };\n\n // Only set the position and zIndex when there is a drag in progress.\n // Otherwise, you risk messing with the visibility/overlapping of widgets\n // during normal operation.\n if (isDragInProgress) {\n style.position = 'relative';\n style.zIndex = '0';\n }\n\n if (isDragging) {\n style.transform = `translate3d(${translate.x}px, ${translate.y}px, 0)`;\n style.opacity = '0.4';\n style.zIndex = '500000';\n }\n\n const memoizedWidget = useMemo(() => {\n return renderWidget(\n widgetId,\n {\n dragHandleProps: {\n ...listeners,\n ...attributes,\n style: {\n cursor: disabled\n ? 'default'\n : 'move',\n // Make drag handles touch friendly\n touchAction: 'none',\n },\n },\n isLayoutModeActive,\n isDragging: isDragging,\n isDragEnabled: !disabled,\n sectionIndex: sectionIndex,\n columnIndex: columnIndex,\n widgetIndex: widgetIndex,\n },\n );\n }, [\n isLayoutModeActive,\n renderWidget,\n widgetId,\n listeners,\n attributes,\n isDragging,\n disabled,\n sectionIndex,\n columnIndex,\n widgetIndex,\n ]);\n\n return (\n \n {memoizedWidget}\n \n );\n}\n\nDraggableWrapper.propTypes = {\n isLayoutModeActive: PropTypes.bool.isRequired,\n sectionIndex: PropTypes.number.isRequired,\n columnIndex: PropTypes.number.isRequired,\n widgetIndex: PropTypes.number.isRequired,\n widgetId: PropTypes.string.isRequired,\n renderWidget: PropTypes.func.isRequired,\n disabled: PropTypes.bool,\n getScrollParent: PropTypes.func.isRequired,\n};\n\nDraggableWrapper.defaultProps = {\n disabled: false,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Root = styled.span.attrs(({ $url, style }) => {\n return {\n style: {\n ...style,\n backgroundImage: `url(${$url})`,\n },\n };\n})`\n background-size: contain;\n display: inline-block;\n width: 1em;\n height: 1em;\n align-self: center;\n`;\n\nexport default function ImageIcon({ className, style, url }) {\n return (\n \n );\n}\n\nImageIcon.propTypes = {\n className: PropTypes.string,\n style: PropTypes.object,\n url: PropTypes.string.isRequired,\n};\n\nImageIcon.defaultProps = {};\n","import React, { useCallback, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\nimport ButtonBase from 'Common/components/Button/ButtonBase';\nimport Icon from 'Common/components/Icon';\nimport ImageIcon from 'Common/components/Icon/ImageIcon';\nimport { Heading5 } from 'Common/components/typography';\nimport Dropdown from 'Common/components/Dropdown/Dropdown';\nimport BasicSelectList from 'Common/components/SelectList/BasicSelectList';\nimport { useTranslator } from 'Common/hooks/useTranslation';\n\nconst Root = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nconst StyledDropdown = styled(Dropdown)`\n width: 100%;\n max-width: 200px;\n`;\n\nconst DropdownContentContainer = styled.div``;\n\nconst OpenButton = styled(Heading5).attrs({ as: ButtonBase })`\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: relative;\n box-sizing: border-box;\n margin: 0;\n padding: 10px 10px;\n width: 100%;\n height: 42px;\n border-radius: 4px;\n text-align: center;\n white-space: nowrap;\n\n ${({ theme }) => css`\n color: ${theme.colors.darkText.mediumEmphasis};\n color: ${theme.colors.palette.blue.awesome};\n `};\n\n transition: color 0.25s, background-color 0.25s;\n\n &:not(:disabled) {\n cursor: pointer;\n\n &:hover, &:focus {\n background-color: rgba(0, 0, 0, 0.05);\n }\n\n &:active { /* When the button is being pressed. */\n ${({ theme }) => css`\n background-color: ${theme.colors.palette.grey.silver};\n `};\n }\n }\n\n &:disabled {\n ${({ theme }) => css`\n color: ${theme.colors.darkText.disabled};\n `};\n }\n`;\n\nconst ButtonIcon = styled(Icon)`\n margin-right: 4px;\n`;\n\nconst ButtonText = styled.span``;\n\nexport default function AddWidgetButton({\n disabled,\n onAddWidget,\n widgetSchema,\n}) {\n const [isOpen, setIsOpen] = useState(false);\n\n const openDropdown = useCallback(() => {\n setIsOpen(true);\n }, [ setIsOpen ]);\n\n const closeDropdown = useCallback(() => {\n setIsOpen(false);\n }, [ setIsOpen ]);\n\n const handleChange = useCallback((event) => {\n onAddWidget(event.target.value);\n closeDropdown();\n }, [ onAddWidget, closeDropdown ]);\n\n const translator = useTranslator();\n const options = useMemo(() => {\n return Object.values(widgetSchema).map((item) => {\n return {\n description: translator(item.descriptionKey),\n displayName: translator(item.displayKey) + (item.liveControls ? '' : '…'),\n icon: (\n \n ),\n value: item.type,\n };\n });\n }, [translator, widgetSchema]);\n\n const renderContent = useCallback(() => {\n return (\n \n \n \n );\n }, [ handleChange, options ]);\n\n return (\n \n \n \n \n {translator('add_widget_literal')}\n \n \n \n );\n}\n\nAddWidgetButton.propTypes = {\n disabled: PropTypes.bool,\n onAddWidget: PropTypes.func.isRequired,\n widgetSchema: PropTypes.object.isRequired,\n};\n\nAddWidgetButton.defaultProps = {\n disabled: false,\n};\n","import React, { useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\nimport DroppableSpot from './DroppableSpot';\nimport DraggableWrapper from './DraggableWrapper';\nimport AddWidgetButton from './AddWidgetButton';\n\nconst Root = styled.div`\n margin-right: 10px;\n\n :last-of-type {\n margin-right: 0;\n };\n`;\n\nconst WidgetHolder = styled.div`\n position: relative;\n vertical-align: top;\n\n`;\n\nconst WidgetHolderAsSelection = styled(WidgetHolder)`\n margin-bottom: 10px;\n\n ${({ $isLayoutModeActive }) => $isLayoutModeActive && css`\n border: 1px solid ${({ theme }) => theme.colors.palette.grey.ash};\n padding: 3px 2px;\n border-radius: 6px;\n min-height: 50px;\n user-select: none;\n `}\n\n transition: background-color 0.25s, border-color 0.25s;\n\n ${({ $showHover }) => $showHover && css`\n border-color: ${({ theme }) => theme.colors.palette.grey.manatee};\n background-color: ${({ theme }) => theme.colors.palette.blue.ice};\n `}\n\n ${({ $showSelected }) => $showSelected && css`\n border-color: ${({ theme }) => theme.colors.palette.blue.awesome};\n background-color: ${({ theme }) => theme.colors.palette.blue.ice};\n `}\n\n ${({ $showDeleteHover }) => $showDeleteHover && css`\n border-color: ${({ theme }) => theme.colors.palette.error.red};\n background-color: ${({ theme }) => theme.colors.palette.error.helios};\n `}\n`;\n\nexport default function Column(props) {\n const {\n columnIndex,\n sectionIndex,\n maxWidgets,\n widgets,\n renderWidget,\n isLayoutModeActive,\n getScrollParent,\n showHover,\n showDeleteHover,\n showSelected,\n onAddWidget,\n widgetSchema,\n sectionAsSelection,\n } = props;\n\n const numWidgets = widgets.length;\n\n const handleAddWidget = useCallback((widgetType) => {\n onAddWidget({\n destination: {\n sectionIndex,\n columnIndex,\n widgetIndex: numWidgets,\n },\n widgetType,\n });\n }, [ onAddWidget, sectionIndex, columnIndex, numWidgets ]);\n\n const showAddWidgetButton = () => {\n return isLayoutModeActive && widgets.length < maxWidgets;\n };\n\n const WidgetHolderComponent = sectionAsSelection ? WidgetHolder : WidgetHolderAsSelection;\n\n return (\n \n \n {widgets.map((widgetId, widgetIndex) => {\n // Use widgetId (not index) for key and IDs so that the nodes\n // are not unnecessarily unmounted and remounted when widgets\n // are moved.\n const dropBeforeId = `${widgetId}-before`;\n return [\n ,\n ,\n ];\n })}\n \n {showAddWidgetButton() && widgetSchema && (\n \n )}\n \n \n );\n}\n\nColumn.propTypes = {\n sectionIndex: PropTypes.number.isRequired,\n columnIndex: PropTypes.number.isRequired,\n maxWidgets: PropTypes.number.isRequired,\n widgets: PropTypes.arrayOf(PropTypes.string).isRequired,\n renderWidget: PropTypes.func.isRequired,\n isLayoutModeActive: PropTypes.bool.isRequired,\n getScrollParent: PropTypes.func.isRequired,\n showHover: PropTypes.bool.isRequired,\n showDeleteHover: PropTypes.bool.isRequired,\n showSelected: PropTypes.bool,\n onAddWidget: PropTypes.func.isRequired,\n widgetSchema: PropTypes.object,\n // true if the entire section should show selected, hover and deleted activity or if it should\n // be displayed individually per column\n sectionAsSelection: PropTypes.bool.isRequired,\n};\n","const COLUMN_PROPERTIES = {\n full: {num: 1 },\n halves: {num: 2},\n 'two-thirds-one-third': {num: 2},\n 'one-third-two-thirds': {num: 2},\n thirds: {num: 3},\n fourths: {num: 4},\n fifths: {num: 5},\n sixths: {num: 6},\n scoreboard: {num: 3},\n};\n\nexport {\n COLUMN_PROPERTIES\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport IconButton from 'Common/components/IconButton';\nimport Tooltip from 'Common/components/Tooltip';\n\n/**\n * A button on a SectionToolbar\n */\nfunction SectionToolbarButton({\n disabled,\n displayName,\n name,\n icon,\n onClick,\n selected,\n buttonRef,\n}) {\n return (\n \n \n {icon}\n \n \n );\n}\n\nSectionToolbarButton.propTypes = {\n disabled: PropTypes.bool,\n displayName: PropTypes.string.isRequired,\n name: PropTypes.string,\n icon: PropTypes.node.isRequired,\n onClick: PropTypes.func,\n selected: PropTypes.bool,\n buttonRef: PropTypes.func,\n};\n\nSectionToolbarButton.defaultProps = {\n disabled: false,\n onClick: () => {},\n selected: false,\n};\n\nexport default React.memo(SectionToolbarButton);\n","import React, { useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport LiveControlSeparator from 'Common/components/LiveControlBar/LiveControlSeparator';\nimport BasicSelectField from 'Common/components/BasicSelectField/BasicSelectField';\nimport { useDisplayMode, DisplayMode } from 'Common/util/DisplayMode';\nimport SectionToolbarButton from './SectionToolbarButton';\n\nconst Root = styled.div`\n position: relative;\n width: 100%;\n text-align: center;\n`;\n\nconst ShadowBorderWrapper = styled.div`\n display: inline-block;\n white-space: nowrap;\n border: 1px solid ${({ theme }) => theme.colors.palette.grey.silver};\n border-radius: 4px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.18);\n`;\n\nconst ChildRow = styled.div`\n display: block;\n`;\n\nconst SelectFieldWrapper = styled.div`\n padding: 8px;\n`;\n\nexport default function SectionToolbarBase(props) {\n const {\n children: childrenProp,\n onSectionTypeChange,\n sectionTypeOptions,\n sectionTypeValue,\n } = props;\n\n const displayMode = useDisplayMode();\n\n let childRows = [];\n\n const children = React.Children.toArray(childrenProp);\n\n const handleSectionTypeDropdownChange = useCallback((event) => {\n onSectionTypeChange({\n target: {\n value: event.target.value.value,\n },\n });\n }, [ onSectionTypeChange ]);\n\n if (displayMode !== DisplayMode.MOBILE) {\n childRows.push([\n ...children,\n ,\n ...sectionTypeOptions.map((opt) => {\n return (\n {\n onSectionTypeChange({\n target: {\n value: opt.value,\n },\n });\n }}\n />\n );\n }),\n ]);\n }\n else {\n childRows.push(children);\n\n let selectedOption = null;\n\n // Object sectionTypeOptions can be empty which means there are no section options for the\n // user to choose from. This happens in enterprise email report templates.\n if (sectionTypeOptions.length > 0) {\n const options = sectionTypeOptions.map((opt) => {\n const rv = {\n value: opt.value,\n displayName: opt.displayName,\n icon: opt.icon,\n };\n\n if (opt.value === sectionTypeValue) {\n selectedOption = opt;\n }\n\n return rv;\n });\n\n childRows.push(\n \n \n \n );\n }\n }\n\n return (\n \n \n {childRows.map((rowChildren, i) => {\n return (\n \n {rowChildren}\n \n );\n })}\n \n \n );\n}\n\nSectionToolbarBase.propTypes = {\n children: PropTypes.node,\n onSectionTypeChange: PropTypes.func.isRequired,\n sectionTypeOptions: PropTypes.arrayOf(\n PropTypes.exact({\n displayName: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n icon: PropTypes.node.isRequired,\n })\n ).isRequired,\n sectionTypeValue: PropTypes.string.isRequired,\n};\n\nSectionToolbarBase.defaultProps = {};\n","import React, {\n useCallback,\n useEffect,\n useState,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from 'Common/components/Icon';\nimport SectionToolbarBase from './SectionToolbarBase';\nimport SectionToolbarButton from './SectionToolbarButton';\nimport useHover from 'Common/hooks/useHover';\nimport { useTranslator } from 'Common/hooks/useTranslation';\n\n/**\n * Manages the Section Toolbar on a dashboard page where the user can add, delete, and move sections.\n * Also allows the user to change the number and layout of columns in a section.\n */\nexport default function SectionToolbar(props) {\n const {\n index,\n sectionConfig,\n isLastSection,\n isDeleteDisabled,\n onAddSection,\n onDeleteSection,\n onMoveSection,\n onModifySection,\n onDeleteSectionHovered,\n sectionTypeOptions,\n } = props;\n\n const translator = useTranslator();\n\n const [selectedControl, setSelectedControl] = useState(null);\n\n const handleSelectionChange = useCallback((sc) => {\n setSelectedControl(sc);\n }, []);\n\n const moveUpEnabled = index > 0;\n const moveDownEnabled = ! isLastSection;\n\n const [deleteSectionElement, setDeleteSectionElement] = useState(null);\n const isDeleteSectionHovered = useHover(deleteSectionElement);\n\n useEffect(() => {\n onDeleteSectionHovered(!isDeleteDisabled && isDeleteSectionHovered);\n }, [isDeleteSectionHovered, onDeleteSectionHovered, isDeleteDisabled]);\n\n const handleSectionTypeChange = useCallback((event) => {\n onModifySection({\n sectionIndex: index,\n sectionType: event.target.value,\n });\n }, [ onModifySection, index ]);\n\n const handleActionButtonClick = useCallback((event) => {\n const buttonName = event.currentTarget.name;\n\n switch (buttonName) {\n case 'add_section':\n onAddSection({\n sectionIndex: index,\n sectionType: 'full'\n });\n break;\n case 'move_section_up':\n onMoveSection({\n sectionSrcIndex: index,\n sectionDestIndex: index - 1\n });\n break;\n case 'move_section_down':\n onMoveSection({\n sectionSrcIndex: index,\n sectionDestIndex: index + 1\n });\n break;\n case 'delete_section':\n onDeleteSection({ sectionIndex: index });\n break;\n }\n }, [ index, onAddSection, onMoveSection, onDeleteSection ]);\n\n return (\n \n )}\n onClick={handleActionButtonClick}\n />\n )}\n disabled={! moveUpEnabled}\n onClick={handleActionButtonClick}\n />\n )}\n disabled={! moveDownEnabled}\n onClick={handleActionButtonClick}\n />\n )}\n disabled={isDeleteDisabled}\n onClick={handleActionButtonClick}\n />\n \n );\n}\n\nSectionToolbar.propTypes = {\n sectionConfig: PropTypes.object.isRequired,\n sectionTypeOptions: PropTypes.arrayOf(\n PropTypes.shape({\n displayName: PropTypes.string.isRequired,\n icon: PropTypes.node.isRequired,\n value: PropTypes.string.isRequired,\n }).isRequired,\n ).isRequired,\n index: PropTypes.number.isRequired,\n isLastSection: PropTypes.bool.isRequired,\n isDeleteDisabled: PropTypes.bool,\n onAddSection: PropTypes.func.isRequired,\n onDeleteSection: PropTypes.func.isRequired,\n onMoveSection: PropTypes.func.isRequired,\n onModifySection: PropTypes.func.isRequired,\n onDeleteSectionHovered: PropTypes.func.isRequired,\n};\n\nSectionToolbar.defaultProps = {\n isDeleteDisabled: false,\n};\n","import React, { useCallback, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\nimport { useTranslator } from 'Common/hooks/useTranslation';\n\nimport { Subheading2 } from 'Common/components/typography';\n\nconst Root = styled.div`\n margin-top: 20px;\n margin-left: 0;\n margin-right: 10px;\n`;\n\nconst Container = styled(Subheading2).attrs({ as: 'div' })`\n position: relative;\n display: block;\n box-sizing: border-box;\n border: none;\n outline: none;\n margin: 0;\n height: 39px;\n max-width: 350px;\n\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n\n background-color: ${({theme}) => theme.colors.palette.grey.cloud};\n border-bottom: 1px solid ${({theme}) => theme.colors.palette.grey.emperor};\n\n transition: background-color 0.3s, border-color 0.3s;\n\n ${({hasFocus}) => hasFocus && css`\n background-color: ${({theme}) => theme.colors.palette.blue.ice};\n border-bottom-color: ${({theme}) => theme.colors.palette.blue.awesome};\n `}\n\n`;\n\nconst TextInput = styled(Subheading2).attrs({ as: 'input' })`\n position: absolute;\n display: block;\n box-sizing: border-box;\n border: none;\n outline: none;\n margin: 0;\n /* Since there is a bottom border, in order of the text to line up with\n the baseline we need to nudge down a pixel.\n */\n top: 1px;\n bottom: 0;\n left: 0;\n right: 0;\n width: 100%;\n height: 100%;\n\n padding-top: 0;\n padding-bottom: 0;\n padding-left: 10px;\n padding-right: 10px;\n\n transition: color 0.3s;\n\n text-align: inherit;\n\n background-color: transparent;\n\n &::placeholder {\n color: ${({theme}) => theme.colors.darkText.mediumEmphasis};\n opacity: 0.5;\n transition: color 0.3s, opacity 0.3s;\n }\n\n &:focus {\n /* Only hide placeholder text on focused number inputs */\n &[type=\"number\"]::placeholder {\n opacity: 0;\n }\n }\n`;\n\n/**\n * This component is the Section Heading TextField. For now it does not use\n * TextField because there are some size complexity we would need to handle in TextField\n * that we are going to hold off on til we find another time we need to make this change.\n */\nconst SectionHeadingEditor = ({\n value,\n onChange,\n sectionIndex,\n}) => {\n const [ hasFocus, setHasFocus ] = useState(false);\n\n const handleFocus = useCallback((event) => {\n setHasFocus(true);\n }, []);\n\n const handleBlur = useCallback((event) => {\n setHasFocus(false);\n }, []);\n\n const onTextFieldChange = useCallback((event) => {\n onChange({\n sectionIndex,\n sectionHeading: event.target.value,\n });\n }, [sectionIndex, onChange]);\n\n const translator = useTranslator();\n \n return (\n \n \n \n \n \n );\n};\n\nSectionHeadingEditor.propTypes = {\n value: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n sectionIndex: PropTypes.number,\n};\n\nexport default SectionHeadingEditor;\n","import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Column from './Column';\nimport { COLUMN_PROPERTIES } from './constants';\nimport styled, { css } from 'styled-components';\n\nimport SectionToolbar from './SectionToolbar/SectionToolbar';\nimport SectionHeadingEditor from './SectionHeadingEditor';\nimport useHover from 'Common/hooks/useHover';\n\nconst breakWidth = {\n md: '1020px',\n sm: '680px',\n xs: '400px',\n};\n\nconst breakMap = {\n full: {\n lg: 'minmax(1px, auto)',\n md: 'minmax(1px, auto)',\n sm: 'minmax(1px, auto)',\n xs: 'minmax(1px, auto)',\n },\n halves: {\n lg: 'repeat(2, 50%)',\n md: 'repeat(2, 50%)',\n sm: 'minmax(1px, auto)',\n xs: 'minmax(1px, auto)',\n },\n 'two-thirds-one-third': {\n lg: '66.666% 33.333%',\n md: '66.666% 33.333%',\n sm: 'minmax(1px, auto)',\n xs: 'minmax(1px, auto)',\n },\n 'one-third-two-thirds':\n {\n lg: '33.333% 66.666%',\n md: '33.333% 66.666%',\n sm: 'minmax(1px, auto)',\n xs: 'minmax(1px, auto)',\n },\n thirds: {\n lg: 'repeat(3, 33.333%)',\n md: 'repeat(3, 33.333%)',\n sm: 'repeat(2, 50%)',\n xs: 'minmax(1px, auto)',\n },\n fourths: {\n lg: 'repeat(4, 25%)',\n md: 'repeat(3, 33.333%)',\n sm: 'repeat(2, 50%)',\n xs: 'minmax(1px, auto)',\n },\n fifths: {\n lg: 'repeat(5, 20%)',\n md: 'repeat(3, 33.333%)',\n sm: 'repeat(2, 50%)',\n xs: 'minmax(1px, auto)',\n },\n sixths: {\n lg: 'repeat(6, 16.666%)',\n md: 'repeat(3, 33.333%)',\n sm: 'repeat(2, 50%)',\n xs: 'minmax(1px, auto)',\n },\n scoreboard: {\n lg: '16.666% 66.666% 16.666%',\n md: '16.666% 66.666% 16.666%',\n sm: 'minmax(1px, auto)',\n xs: 'minmax(1px, auto)',\n },\n};\n\nconst SectionRoot = styled.div`\n`;\n\nconst SectionToolbarContainer = styled.div`\n transition: opacity 300ms, margin-top 300ms, height 300ms;\n\n ${({ $height }) => Number.isFinite($height) && css`\n height: ${$height}px;\n `}\n\n opacity: 0;\n margin-top: 0;\n\n ${({ $isEntering }) => $isEntering && css`\n opacity: 1;\n margin-top: 20px;\n `}\n\n ${({ $isEntered }) => $isEntered && css`\n opacity: 1;\n margin-top: 20px;\n `}\n\n ${({ $isLeaving }) => $isLeaving && css`\n opacity: 0;\n margin-top: 0;\n `}\n`;\n\nconst animationReducer = (state, action) => {\n const { type, payload } = action;\n\n switch(type) {\n case 'ENTER_BEFORE': {\n return {\n ...state,\n isEntering: false,\n isEntered: false,\n isLeaving: false,\n toolbarHeight: 0,\n renderToolbar: true,\n };\n }\n case 'ENTER_START': {\n const { toolbarContainerRef } = payload;\n\n return {\n ...state,\n isEntering: true,\n isEntered: false,\n isLeaving: false,\n toolbarHeight: toolbarContainerRef.current ?\n toolbarContainerRef.current.children[0].getBoundingClientRect().height\n : null,\n renderToolbar: true,\n };\n }\n case 'ENTER_END': {\n return {\n ...state,\n isEntering: false,\n isEntered: true,\n isLeaving: false,\n toolbarHeight: null,\n renderToolbar: true,\n };\n }\n case 'LEAVE_BEFORE': {\n const { toolbarContainerRef } = payload;\n\n return {\n ...state,\n isEntering: false,\n isEntered: false,\n isLeaving: false,\n toolbarHeight: toolbarContainerRef.current ?\n toolbarContainerRef.current.children[0].getBoundingClientRect().height\n : null,\n renderToolbar: true,\n };\n }\n case 'LEAVE_START': {\n return {\n ...state,\n isEntering: false,\n isEntered: false,\n isLeaving: true,\n toolbarHeight: 0,\n renderToolbar: true,\n };\n }\n case 'LEAVE_END': {\n return {\n ...state,\n isEntering: false,\n isEntered: false,\n isLeaving: false,\n toolbarHeight: null,\n renderToolbar: false,\n };\n }\n }\n};\n\n// Do not use grid on print and/or full section cause a full section doesn't have more than 1 column\n// Allow print views to lay things out in a reasonable manner with a wrapping flex box.\nconst ColumnContainer = styled.div`\n margin-top: 15px;\n\n ${({$isPrint, $isFullSection}) => (!$isPrint && !$isFullSection) && css`\n display: grid;\n grid-template-columns: ${({$colOpts}) => $colOpts.lg};\n\n @media (max-width: ${breakWidth.md}) {\n grid-template-columns: ${({$colOpts}) => $colOpts.md};\n }\n\n @media (max-width: ${breakWidth.sm}) {\n grid-template-columns: ${({$colOpts}) => $colOpts.sm};\n }\n\n @media (max-width: ${breakWidth.xs}) {\n grid-template-columns: ${({$colOpts}) => $colOpts.xs};\n }\n `}\n\n ${({$isPrint}) => $isPrint && css`\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: 10px;\n\n & > div {\n flex: 1;\n // let flex gap handle spacing between widgets\n margin-right: 0;\n margin-bottom: 0;\n // needed so it does not grow bigger than the parent\n min-width: 0;\n }\n\n & > div > div {\n margin-bottom: 0;\n }\n `}\n`;\n\nconst ColumnContainerAsSelection = styled(ColumnContainer)`\n ${({ $isLayoutModeActive }) => $isLayoutModeActive && css`\n border: 1px solid ${({ theme }) => theme.colors.palette.grey.ash};\n padding: 10px 10px;\n border-radius: 6px;\n min-height: 50px;\n user-select: none;\n `}\n\n ${({ $showHover }) => $showHover && css`\n border-color: ${({ theme }) => theme.colors.palette.grey.manatee};\n background-color: ${({ theme }) => theme.colors.palette.blue.ice};\n `}\n\n ${({ $showSelected }) => $showSelected && css`\n border-color: ${({ theme }) => theme.colors.palette.blue.awesome};\n background-color: ${({ theme }) => theme.colors.palette.blue.ice};\n `}\n\n ${({ $showDeleteHover }) => $showDeleteHover && css`\n border-color: ${({ theme }) => theme.colors.palette.error.red};\n background-color: ${({ theme }) => theme.colors.palette.error.helios};\n `}\n\n`;\n\nexport default function Section(props) {\n const {\n isDeleteDisabled,\n isLastSection,\n isLayoutModeActive,\n isPrint,\n sectionIndex,\n sectionConfig,\n selected,\n addSection,\n deleteSection,\n getScrollParent,\n modifySection,\n moveSection,\n onAddWidget,\n onSelect,\n renderWidget,\n widgetSchema,\n sectionTypeOptions,\n maxWidgetsPerColumn,\n sectionAsSelection,\n } = props;\n\n const showSelected = selected && isLayoutModeActive;\n\n const numColumns = COLUMN_PROPERTIES[sectionConfig.type].num;\n\n const [ deleteSectionHovered, setDeleteSectionHovered ] = useState(false);\n\n const handleDeleteSectionHoverChange = (val) => {\n if (val !== deleteSectionHovered) {\n setDeleteSectionHovered(val);\n }\n };\n\n const handleClick = () => {\n onSelect(sectionIndex);\n };\n\n const [sectionElement, setSectionElement] = useState(null);\n const isHovered = useHover(sectionElement);\n\n const showHover = isHovered && ! deleteSectionHovered;\n\n const showToolbar = isLayoutModeActive && selected;\n\n const toolbarContainerRef = useRef(null);\n\n const [{ toolbarHeight, renderToolbar, isEntering, isEntered }, dispatch] = useReducer(animationReducer, {\n toolbarHeight: null,\n renderToolbar: showToolbar,\n isEntering: false,\n isEntered: showToolbar,\n isLeaving: false,\n });\n\n const firstRender = useRef(true);\n\n useEffect(() => {\n let animationTimer = null;\n\n if (firstRender.current) {\n firstRender.current = false;\n return;\n }\n\n if (showToolbar) {\n dispatch({\n type: 'ENTER_BEFORE',\n payload: { toolbarContainerRef },\n });\n\n animationTimer = setTimeout(() => {\n dispatch({\n type: 'ENTER_START',\n payload: { toolbarContainerRef },\n });\n animationTimer = setTimeout(() => {\n dispatch({\n type: 'ENTER_END',\n payload: { toolbarContainerRef },\n });\n animationTimer = null;\n }, 300);\n }, 10);\n }\n else {\n dispatch({\n type: 'LEAVE_BEFORE',\n payload: { toolbarContainerRef },\n });\n\n animationTimer = setTimeout(() => {\n dispatch({\n type: 'LEAVE_START',\n payload: { toolbarContainerRef },\n });\n animationTimer = setTimeout(() => {\n dispatch({\n type: 'LEAVE_END',\n payload: { toolbarContainerRef },\n });\n animationTimer = null;\n }, 1000);\n }, 10);\n }\n\n return () => {\n if (animationTimer) {\n clearTimeout(animationTimer);\n animationTimer = null;\n }\n };\n }, [ showToolbar ]);\n\n const handleSectionToolbarContainerClick = useCallback((event) => {\n // Stop clicks from bubbling out of the toolbar. This is needed because\n // clicking anywhere in the section will cause the section to become\n // selected. That is not good because sometimes we want to switch\n // the selected selection in response to a toolbar click, like when\n // adding or moving a section.\n event.stopPropagation();\n }, []);\n\n const ColumnContainerComponent = sectionAsSelection ? ColumnContainerAsSelection : ColumnContainer;\n\n return (\n \n {isLayoutModeActive && (\n )}\n \n {Array(numColumns).fill(null).map((_, columnIndex) => {\n const widgets = sectionConfig.columns[columnIndex]?.widgets || [];\n\n return (\n \n );\n })}\n \n \n {renderToolbar && (\n \n )}\n \n \n );\n}\n\nSection.propTypes = {\n isDeleteDisabled: PropTypes.bool,\n isLastSection: PropTypes.bool,\n isLayoutModeActive: PropTypes.bool.isRequired,\n isPrint: PropTypes.bool.isRequired,\n sectionConfig: PropTypes.shape(\n {\n columns: PropTypes.arrayOf(\n PropTypes.shape({\n widgets: PropTypes.arrayOf(\n PropTypes.string.isRequired,\n ),\n }).isRequired,\n ).isRequired,\n heading: PropTypes.string,\n type: PropTypes.string.isRequired,\n }\n ).isRequired,\n sectionIndex: PropTypes.number.isRequired,\n // true if the entire section should show selected, hover and deleted activity or if it should\n // be displayed individually per column\n sectionAsSelection: PropTypes.bool.isRequired,\n maxWidgetsPerColumn: PropTypes.number.isRequired,\n selected: PropTypes.bool,\n\n addSection: PropTypes.func,\n deleteSection: PropTypes.func,\n getScrollParent: PropTypes.func,\n modifySection: PropTypes.func,\n moveSection: PropTypes.func,\n onAddWidget: PropTypes.func,\n onSelect: PropTypes.func,\n renderWidget: PropTypes.func.isRequired,\n widgetSchema: PropTypes.object,\n sectionTypeOptions: PropTypes.arrayOf(\n PropTypes.shape({\n displayName: PropTypes.string.isRequired,\n icon: PropTypes.node.isRequired,\n value: PropTypes.string.isRequired,\n }).isRequired,\n ),\n};\n\nSection.defaultProps = {\n isDeleteDisabled: false,\n isLastSection: false,\n selected: false,\n\n addSection: () => {},\n deleteSection: () => {},\n getScrollParent: () => window,\n modifySection: () => {},\n moveSection: () => {},\n onAddWidget: () => {},\n onSelect: () => {},\n};\n","import React, { \n useCallback,\n useState,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport {\n KeyboardSensor,\n LayoutMeasuringStrategy,\n PointerSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport Section from './Section';\nimport Button from 'Common/components/Button';\nimport ModalWindow from 'Common/components/ModalWindow/ModalWindow';\nimport { WorkaroundDndContext } from './WorkaroundDndContext';\nimport { useTranslator } from 'Common/hooks/useTranslation';\n\nfunction closest(rects, rect, testFn) {\n let closestId = null;\n let minDistance = Infinity;\n\n rects.forEach((testRect) => {\n const distance = Math.abs(testFn(testRect[1], rect));\n if (distance < minDistance) {\n closestId = testRect[0];\n minDistance = distance;\n }\n });\n\n return closestId;\n}\n\nfunction closestTopLeftCorner(rects, rect) {\n return closest(rects, rect, (a, b) => {\n // 2D distance\n return Math.sqrt(\n Math.pow(a.offsetTop - b.top, 2) +\n Math.pow(a.offsetLeft - b.left, 2),\n );\n });\n}\n\nfunction customCollisionDetectionStrategy(rects, rect) {\n return closestTopLeftCorner(rects, rect);\n}\n\nconst Root = styled.div``;\n\nexport default function DashboardLayoutEditor(props) {\n const {\n sections,\n onWidgetMove,\n renderWidget,\n getScrollParent,\n addSection,\n deleteSection,\n modifySection,\n moveSection,\n onAddWidget,\n widgetSchema,\n sectionTypeOptions,\n maxWidgetsPerColumn,\n sectionAsSelection,\n } = props;\n\n const sensors = useSensors(\n useSensor(PointerSensor, {\n // Require the mouse to move by 10 pixels before activating\n activationConstraint: {\n distance: 10,\n },\n }),\n useSensor(KeyboardSensor),\n );\n\n const translator = useTranslator();\n\n const [ isDragging, setIsDragging ] = useState(false);\n\n const handleDragStart = useCallback(() => {\n setIsDragging(true);\n }, []);\n\n const handleDragCancel = useCallback(() => {\n setIsDragging(false);\n }, []);\n\n const handleDragEnd = useCallback((event) => {\n setIsDragging(false);\n\n const source = event.active.data.current;\n\n if (!event.over) {\n return;\n }\n\n const destination = event.over.data.current;\n\n // If the widget is being moved within the same column, then we may need\n // to apply an offset to the destination widgetIndex to account for the\n // fact that higher indexes will shift when the widget is removed.\n let destinationOffset = 0;\n if (\n // Same starting and ending column\n source.sectionIndex === destination.sectionIndex &&\n source.columnIndex === destination.columnIndex &&\n // Dropped at higher than starting index\n source.widgetIndex < destination.widgetIndex\n ) {\n destinationOffset = -1;\n }\n\n onWidgetMove({\n source: {\n sectionIndex: source.sectionIndex,\n columnIndex: source.columnIndex,\n widgetIndex: source.widgetIndex,\n },\n destination: {\n sectionIndex: destination.sectionIndex,\n columnIndex: destination.columnIndex,\n widgetIndex: destination.widgetIndex + destinationOffset,\n },\n });\n }, [ onWidgetMove ]);\n\n const [ selectedSection, setSelectedSection ] = useState(0);\n\n const onMoveSection = useCallback((event) => {\n const { sectionDestIndex } = event;\n moveSection(event);\n setSelectedSection(sectionDestIndex);\n }, [\n moveSection, setSelectedSection\n ]);\n\n const onAddSection = useCallback((event) => {\n const { sectionIndex } = event;\n addSection(event);\n setSelectedSection(sectionIndex + 1);\n }, [addSection, setSelectedSection]);\n\n const [ deleteSectionConfirmationState, setDeleteSectionConfirmationState ] = useState({showDialog: false});\n\n const onDeleteSectionContinue = useCallback(() => {\n deleteSection(deleteSectionConfirmationState.event);\n setDeleteSectionConfirmationState({showDialog: false});\n }, [deleteSection, deleteSectionConfirmationState]);\n\n const onDeleteSectionCancel = useCallback(() => {\n setDeleteSectionConfirmationState({showDialog: false});\n }, []);\n\n const onDeleteSelection = useCallback((event) => {\n const { sectionIndex } = event;\n const sectionToDelete = sections[sectionIndex];\n const sectionToDeleteHasColumns = !!sectionToDelete?.columns.find(col => (col.widgets.find(widget => (widget))));\n\n if (!sectionToDelete) {\n return;\n }\n else if (sectionToDeleteHasColumns) {\n setDeleteSectionConfirmationState({event, showDialog: true});\n }\n else {\n deleteSection(event);\n const newSelectedSection = sectionIndex > 0 ? sectionIndex - 1 : 0;\n setSelectedSection(newSelectedSection);\n }\n }, [\n sections, deleteSection, setSelectedSection, setDeleteSectionConfirmationState\n ]);\n\n return (\n \n \n {sections.map((section, sectionIndex) => {\n return (\n \n );\n })}\n \n {deleteSectionConfirmationState.showDialog &&\n (\n \n {translator('cancel_literal')}\n ,\n \n {translator('control.section.delete_dialog.delete_section')}\n \n ]}\n >\n \n {translator('control.section.delete_dialog.body')}\n
\n \n )\n }\n \n );\n}\n\nDashboardLayoutEditor.defaultProps = {\n maxWidgetsPerColumn: Number.MAX_SAFE_INTEGER,\n};\n\nDashboardLayoutEditor.propTypes = {\n sections: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.string.isRequired,\n columns: PropTypes.array.isRequired,\n }).isRequired,\n ).isRequired,\n onWidgetMove: PropTypes.func.isRequired,\n renderWidget: PropTypes.func.isRequired,\n getScrollParent: PropTypes.func,\n addSection: PropTypes.func.isRequired,\n deleteSection: PropTypes.func.isRequired,\n modifySection: PropTypes.func.isRequired,\n moveSection: PropTypes.func.isRequired,\n onAddWidget: PropTypes.func.isRequired,\n widgetSchema: PropTypes.object,\n // sectionTypeOptions is an array of options that will be placed after the core section options\n // of add, move up, move down, delete. Currently in XLPA they are used for modifying the number\n // of columns a section has\n sectionTypeOptions: PropTypes.arrayOf(\n PropTypes.shape({\n displayName: PropTypes.string.isRequired,\n icon: PropTypes.node.isRequired,\n value: PropTypes.string.isRequired,\n }).isRequired,\n ).isRequired,\n // true if the entire section should show selected, hover and deleted activity or if it should\n // be displayed individually per column\n sectionAsSelection: PropTypes.bool.isRequired,\n maxWidgetsPerColumn: PropTypes.number.isRequired,\n};\n","import React, { useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport ButtonBase from 'Common/components/Button/ButtonBase';\nimport { elideTextCss } from 'Common/util/cssSnippets';\nimport { FontFamily, FontWeight } from 'Common/components/typography';\n\n/**\n * MenuItem\n *\n * A MenuItem represents a single selection in a MenuList or MenuDropdown.\n * It is displayed with its configured icon, text, and dropdownicon if supplied.\n * When clicked, the `onClick` function\n * prop will be called (if the item is not disabled).\n *\n */\n\nconst Root = styled(ButtonBase)`\n display: inline-block;\n color: ${({theme}) => theme.colors.palette.grey.emperor};\n padding: 4px 8px;\n font-family: ${FontFamily.primary};\n\n font-weight: ${FontWeight.medium};\n color: ${({ theme }) => theme.colors.palette.grey.manatee};\n\n &:hover {\n background-color: ${({ theme }) => theme.colors.palette.grey.cloud};\n }\n\n &:disabled {\n background: transparent;\n color: ${({ theme }) => theme.colors.darkText.disabled};\n }\n\n /* Give mobile users a nice big touch target */\n @media (hover: none) and (pointer: coarse) {\n min-width: 44px;\n min-height: 44px;\n }\n`;\n\nconst Label = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: ${({hasText}) => hasText ? 'flex-start' : 'center'};\n align-items: baseline;\n padding-left: ${({level}) => {\n // allow only 4 levels deep of padding\n const limitedLevel = Math.min(level, 4);\n return limitedLevel * 8;\n }}px;\n\n & > * :not(:last-child) {\n padding-right: 4px;\n // enough space to make sure text next to icons lines up\n min-width: 20px;\n }\n`;\n\nconst TextContainer = styled.span`\n ${elideTextCss}\n\n flex: 1 1 auto;\n text-align: left;\n`;\n\nexport default function MenuItem(props) {\n const {\n onClick,\n onClose,\n disabled,\n text,\n icon,\n dropdownIcon,\n level,\n ...otherProps\n } = props;\n\n const itemOnClick = useCallback(() => {\n onClick();\n onClose();\n }, [onClick, onClose]);\n\n return (\n \n \n \n );\n}\n\nMenuItem.propTypes = {\n disabled: PropTypes.bool,\n dropdownIcon: PropTypes.node,\n icon: PropTypes.node,\n level: PropTypes.number,\n text: PropTypes.node.isRequired,\n onClick: PropTypes.func.isRequired,\n onClose: PropTypes.func,\n};\n\nMenuItem.defaultProps = {\n disabled: false,\n dropdownIcon: null,\n icon: null,\n level: 0,\n onClose: () => {},\n};\n\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport MenuItem from './MenuItem';\nimport { FontSize } from 'Common/components/typography';\n\n/**\n * MenuButton\n *\n * Styled button for use in a Menu Toolbar. Shows the button's icon, text, and dropdownicon\n * if supplied.\n *\n */\n\n\nconst StyledMenuItem = styled(MenuItem)`\n border: 1px solid transparent;\n font-size: ${FontSize.size4}px;\n\n &:active {\n box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.4) inset;\n }\n`;\n\nexport default function MenuButton(props) {\n return (\n \n );\n}\n\nMenuButton.propTypes = {\n icon: PropTypes.node,\n text: PropTypes.string.isRequired,\n disabled: PropTypes.bool,\n dropdownIcon: PropTypes.node,\n onClick: PropTypes.func.isRequired,\n};\n\nMenuButton.defaultProps = {\n disabled: false,\n dropdownIcon: null,\n icon: null,\n};\n","import styled from 'styled-components';\n\n/* Styled component used in MenuList and MenuDropdown to separate items.\n*/\n\nexport default styled.div`\n margin: 4px 0;\n border-top: 1px solid ${({ theme }) => theme.colors.separator};\n`;\n","import React, { useState, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { childrenAreOneOf } from 'Common/util/propTypeHelpers';\nimport Dropdown from 'Common/components/Dropdown/Dropdown';\nimport MenuButton from './MenuButton';\nimport Icon from 'Common/components/Icon';\nimport MenuSeparator from 'Common/components/MenuToolbar/MenuSeparator';\n\n/**\n * MenuDropdown\n *\n * A dropdown used in a MenuToolbar. Really should be top level, do not use MenuDropdown in MenuDropdown\n * instead check out MenuList. Children are the items in the dropdown, and text and icon are used in label.\n *\n */\n\nconst Root = styled(Dropdown)`\n display: inline-block;\n`;\n\nconst Container = styled.div`\n padding: 10px;\n display: flex;\n flex-direction: column;\n`;\n\nconst dropdownIconStyle = { fontSize: 10, alignSelf: 'center' };\n\nexport default function MenuDropdown(props) {\n const { text, icon, children, disabled, buttonStyle } = props;\n\n const [isOpen, setIsOpen] = useState(false);\n\n const onOpen = useCallback(() => {\n setIsOpen(true);\n }, [setIsOpen]);\n\n const onClose = useCallback(() => {\n setIsOpen(false);\n }, [setIsOpen]);\n\n const renderContent = useCallback(() => {\n return (\n \n {React.Children.map(children, (child) => {\n if (child) {\n let childProps = { ...child.props, onClose };\n return React.cloneElement(child, childProps);\n }\n else {\n return null;\n }\n })}\n \n );\n }, [children, onClose]);\n\n return (\n \n )}\n style={buttonStyle}\n />\n \n );\n}\n\nMenuDropdown.propTypes = {\n text: PropTypes.string.isRequired,\n icon: PropTypes.node,\n children: childrenAreOneOf({\n elementTypes: [\n MenuSeparator\n ],\n propShapes: [\n // list:\n [\n 'text',\n 'children',\n ],\n // group:\n [\n 'label',\n 'children',\n ],\n // item:\n [\n 'onClick',\n 'text',\n ],\n // info item:\n [\n 'children'\n ]\n ],\n }),\n buttonStyle: PropTypes.object,\n disabled: PropTypes.bool,\n};\n\nMenuDropdown.defaultProps = {\n buttonStyle: {},\n icon: null,\n disabled: false,\n};\n","import React, { useState, useCallback, useMemo } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport SearchableSelectList from 'Common/components/SelectList/SearchableSelectList.js';\nimport SelectList from 'Common/components/SelectList/SelectList.js';\nimport BasicSelectOption from 'Common/components/SelectList/BasicSelectOption';\nimport SelectDropdownButton from 'Common/components/SelectList/SelectDropdownButton.js';\nimport SelectSeparator from 'Common/components/SelectList/SelectSeparator';\nimport SelectOptionGroup from 'Common/components/SelectList/SelectOptionGroup';\nimport Dropdown from 'Common/components/Dropdown/Dropdown.js';\n\n\nfunction generateViewsList(views, translator) {\n let list = [];\n // group options into their groups based on their parents if they have them\n let groupsOrder = [];\n let viewsByGroup = views.reduce((grouped, view) => {\n if (view.groupName) {\n if (grouped[view.groupName]) {\n grouped[view.groupName].push(view);\n }\n else {\n groupsOrder.push(view.groupName);\n grouped[view.groupName] = [view];\n }\n }\n return grouped;\n }, {});\n\n // sort the views alphabetically\n Object.keys(viewsByGroup).forEach(groupName => {\n // if we have a separator we want to keep the defined order\n if (!viewsByGroup[groupName].find(view => view.isSeparator)) {\n viewsByGroup[groupName].sort((a, b) => a.displayName.localeCompare(b.displayName));\n }\n });\n\n function createListNode (view, index) {\n if (view.isSeparator) {\n return ();\n }\n else if (view.isPlaceHolder) {\n const noneDisplayName = translator('navigation_dropdown_empty_group_literal');\n return (\n \n {noneDisplayName}\n \n );\n }\n else {\n return (\n \n {view.displayName}\n \n );\n }\n }\n\n // if we have groups create appropriate select elements\n if (groupsOrder.length) {\n groupsOrder.forEach((groupDisplayName, groupIndex) => {\n const entries = viewsByGroup[groupDisplayName].map((view, viewIndex) => createListNode(view, viewIndex, translator));\n list.push(\n \n {entries}\n \n );\n });\n }\n // no grouping so standard select elements\n else {\n let sortedViews = [].concat(views);\n // sort the views alphabetically\n // if we have a separator we want to keep the defined order\n if (!sortedViews.find(view => view.isSeparator)) {\n sortedViews.sort((a, b) => a.displayName.localeCompare(b.displayName));\n }\n list = sortedViews.map((view, viewIndex) => createListNode(view, viewIndex));\n }\n\n return list;\n}\n\n/**\n * A component that displays the current view name and allows a user to select different views under the same page.\n */\nconst PageSelectField = ({\n children,\n disabled,\n hideSearch,\n name,\n options,\n value,\n onChange,\n}) => {\n const translator = useTranslator();\n\n const [isOpen, setIsOpen] = useState(false);\n\n const optionElements = useMemo(() => generateViewsList(options, translator), [options, translator]);\n\n const openHandler = useCallback(() => {\n setIsOpen(true);\n }, []);\n\n const closeHandler = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const onChangeHandler = useCallback((event) => {\n closeHandler();\n onChange(event);\n }, [closeHandler, onChange]);\n\n const renderContent = useCallback(() => {\n if (hideSearch) {\n return (\n \n {optionElements}\n \n );\n }\n else {\n return (\n \n {optionElements}\n \n );\n }\n }, [onChangeHandler, optionElements, value, hideSearch, translator]);\n\n return options.length > 1\n ? (\n \n \n {children}\n \n \n )\n : null;\n};\n\nPageSelectField.propTypes = {\n children: PropTypes.node.isRequired,\n disabled: PropTypes.bool,\n hideSearch: PropTypes.bool,\n name: PropTypes.string,\n options: PropTypes.arrayOf(PropTypes.shape({\n groupName: PropTypes.string,\n displayName: PropTypes.string,\n path: PropTypes.string,\n isSeparator: PropTypes.bool.isRequired,\n isPlaceHolder: PropTypes.bool.isRequired,\n })).isRequired,\n value: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n};\n\nPageSelectField.defaultProps = {\n disabled: false,\n hideSearch: true,\n};\n\nexport default PageSelectField;\n","import React, { useState, useCallback, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\nimport { childrenAreOneOf } from 'Common/util/propTypeHelpers';\nimport MenuItem from './MenuItem';\nimport Icon from 'Common/components/Icon';\nimport MenuSeparator from 'Common/components/MenuToolbar/MenuSeparator';\n\n/**\n * MenuList\n *\n * A way to add a hierachy of lists in a MenuToolbar. It can have children\n * of either another MenuList or MenuItem.\n *\n */\n\nconst StyledMenuItem = styled(MenuItem)`\n ${({showChildren}) => showChildren && css`\n background-color: ${({theme}) => theme.colors.palette.blue.pool};\n `}\n`;\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst dropdownIconStyle = { fontSize: 10, alignSelf: 'center' };\n\nexport default function MenuList(props) {\n const {\n text,\n icon,\n children,\n level,\n onClose,\n } = props;\n\n const [showChildren, setShowChildren] = useState(false);\n\n const onToggleChildren = useCallback(() => {\n setShowChildren(!showChildren);\n }, [showChildren, setShowChildren]);\n\n const displayedChildren = useMemo(() => {\n return React.Children.map(children, (child) => {\n let childProps = { ...child.props, onClose, level: level + 1 };\n return React.cloneElement(child, childProps);\n });\n }, [children, onClose, level]);\n\n const dropdownIcon = showChildren\n ? ()\n : ();\n \n return (\n \n \n {\n showChildren ? displayedChildren : null\n }\n \n );\n}\n\nMenuList.propTypes = {\n children: childrenAreOneOf({\n elementTypes: [\n MenuSeparator\n ],\n propShapes: [\n // dropdown:\n [\n 'text',\n 'children',\n ],\n // item:\n [\n 'onClick',\n 'text',\n ],\n // info item:\n [\n 'children'\n ]\n ],\n }),\n icon: PropTypes.node,\n level: PropTypes.number,\n text: PropTypes.string.isRequired,\n onClose: PropTypes.func,\n};\n\nMenuList.defaultProps = {\n icon: null,\n level: 0,\n onClose: () => {},\n};\n","import React, { useState, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { childrenAreOneOf } from 'Common/util/propTypeHelpers';\n\nimport MenuItem from './MenuItem';\nimport MenuList from './MenuList';\nimport Dropdown from 'Common/components/Dropdown/Dropdown';\nimport MenuButton from './MenuButton';\nimport Icon from 'Common/components/Icon';\n\n/**\n * MenuToolbarOverflow\n *\n * Handles the items that get overflowed in MenuToolbar.\n *\n */\n\nconst StyledDropdown = styled(Dropdown)`\n display: inline-block;\n`;\n\nexport default function MenuToolbarOverflow(props) {\n const { children, buttonStyle } = props;\n\n const [isOpen, setIsOpen] = useState(false);\n\n const onOpen = useCallback(() => {\n setIsOpen(true);\n }, [setIsOpen]);\n\n const onClose = useCallback(() => {\n setIsOpen(false);\n }, [setIsOpen]);\n\n const renderContent = useCallback(() => {\n return React.Children.map(children, (child) => {\n let childProps = { ...child.props, onClose };\n const isDropdown = !!child.props.children;\n if (isDropdown) {\n return ();\n }\n else {\n return ();\n }\n });\n }, [children, onClose]);\n\n return (\n \n )}\n text=\"\"\n style={buttonStyle}\n />\n \n );\n}\n\n\nMenuToolbarOverflow.propTypes = {\n buttonStyle: PropTypes.object,\n children: childrenAreOneOf({\n elementTypes: [],\n propShapes: [\n // dropdown:\n [\n 'text',\n 'children',\n ],\n // item:\n [\n 'onClick',\n 'text',\n ],\n ],\n }),\n};\n\nMenuToolbarOverflow.defaultProps = {\n buttonStyle: {},\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport { childrenAreOneOf } from 'Common/util/propTypeHelpers';\nimport { useElidedChildren } from 'Common/components/MenuToolbar/hooks';\nimport MenuToolbarOverflow from './MenuToolbarOverflow';\n\n\n/**\n * MenuToolbar\n *\n * A horizontal toolbar that holds MenuDropdowns or MenuButtons.\n *\n */\nconst Root = styled.div`\n white-space: nowrap;\n overflow-y: visible;\n\n &:first-child {\n margin-left: -10px;\n }\n`;\n\nexport default function MenuToolbar(props) {\n const children = React.Children.toArray(props.children);\n const { containerRef, visibleItems } = useElidedChildren(children.length);\n const vc = visibleItems !== null ? visibleItems : children.length;\n\n let visibleChildren = [];\n let overflowChildren = [];\n\n // Display only the number of items that will fit in the menu bar.\n for (let ii = 0; ii < children.length; ii++) {\n // Clone each item in children so that we can add a key to keep react happy,\n // then add them to the main or overflow list.\n const list = ii < vc ? visibleChildren : overflowChildren;\n list.push(React.cloneElement(children[ii], {key: ii}));\n }\n\n // And put the rest into an overflow dropdown.\n if (overflowChildren.length > 0) {\n const overflowDropdown = (\n \n {overflowChildren}\n \n );\n visibleChildren.push(overflowDropdown);\n }\n\n return (\n \n {visibleChildren}\n \n );\n}\n\n\nMenuToolbar.propTypes = {\n children: childrenAreOneOf({\n elementTypes: [],\n propShapes: [\n // dropdown:\n [\n 'text',\n 'children',\n ],\n // item:\n [\n 'onClick',\n 'text',\n ],\n ],\n }),\n};\n","\nimport {\n channel_schema\n} from './ChannelSchema';\n\nimport {\n filterOptions,\n hierarchyNodeOptions,\n hierarchyNodeDisplayName,\n getKpiData,\n getKpiGroupData,\n metricOptions,\n timeRangePrimaryDetails,\n timeRangeSecondaryDetails,\n emailWidgetFieldOptions,\n} from './MockWidgetData';\n\nexport default function getDataService(translator, metricThresholds) {\n return {\n getKPIGroupWidgetFieldOptions: async () => {\n return emailWidgetFieldOptions;\n },\n getKPIGroupWidgetData: async (widgetData) => {\n return getKpiGroupData(widgetData, translator, metricThresholds);\n },\n getKpiWidgetData: async (widgetData, a, b) => {\n return getKpiData(widgetData.field.name, translator, metricThresholds);\n },\n getWorkCenterCount: () => {\n return 'Work Center Count';\n },\n getColumnConfig: async (columnName) => {\n const columnConfig = channel_schema.production_metric.metrics[columnName];\n return {\n displayName: translator(columnConfig.display_name),\n formatType: columnConfig.subtype,\n name: columnName,\n };\n },\n getColumnHelpText: (columnName) => {\n const columnConfig = channel_schema.production_metric.metrics[columnName];\n return translator(columnConfig.help_text);\n },\n getTimeRangePrimaryDetails: async () => {\n return timeRangePrimaryDetails;\n },\n getTimeRangeSecondaryDetails: async () => {\n return timeRangeSecondaryDetails;\n },\n getHierarchyNodeDisplayName: async () => {\n return hierarchyNodeDisplayName;\n },\n getHierarchyOptions: () => {\n return hierarchyNodeOptions;\n },\n getAllMetricOptions: () => {\n return metricOptions;\n },\n getAllFilterOptions: () => {\n return filterOptions;\n },\n getMetricOptions: () => {\n return metricOptions;\n },\n getSliceFilterOptions: () => {\n return filterOptions;\n },\n getMultipleColumnConfigs: () => {\n return {\n shift: {\n name: 'shift',\n formatType: 'category_value',\n displayName: 'Shift'\n },\n part: {\n name: 'part',\n formatType: 'category_value',\n displayName: 'Part'\n },\n };\n },\n getMultipleCategoryValueConfigs: () => {\n return {};\n },\n };\n}\n","import { COLUMN_PROPERTIES } from 'Common/components/Dashboard/DashboardLayout/constants';\n\nconst ActionTypes = {\n INIT_PAGE: 'INIT_PAGE',\n ADD_WIDGET: 'ADD_WIDGET',\n DELETE_WIDGET: 'DELETE_WIDGET',\n SET_WIDGET_STF: 'SET_WIDGET_STF',\n SET_WIDGET_STATE: 'SET_WIDGET_STATE',\n SET_WIDGET_EXPORT_ITEM: 'SET_WIDGET_EXPORT_ITEM',\n SET_WIDGET_PRINT_STATUS: 'SET_WIDGET_PRINT_STATUS',\n SET_WIDGET_LIVE_CONTROLS_VISIBILITY: 'SET_WIDGET_LIVE_CONTROLS_VISIBILITY',\n MOVE_WIDGET: 'MOVE_WIDGET',\n ADD_SECTION: 'ADD_SECTION',\n DELETE_SECTION: 'DELETE_SECTION',\n MOVE_SECTION: 'MOVE_SECTION',\n MODIFY_SECTION: 'MODIFY_SECTION',\n SET_PAGE_CLEAN: 'SET_PAGE_CLEAN',\n SET_ALL_LIVE_CONTROL_VISIBILITIES: 'SET_ALL_LIVE_CONTROL_VISIBILITIES',\n SET_EXPLORATION_PATH: 'SET_EXPLORATION_PATH',\n SET_HIERARCHY_NODE: 'SET_PAGE_HIERARCHY_NODE',\n SET_SLICE_FILTERS: 'SET_SLICE_FILTERS',\n SET_GROUPED_FIELDS: 'SET_GROUPED_FIELDS',\n SET_FIELDS: 'SET_FIELDS',\n SET_SORT_FIELDS: 'SET_SORT_FIELDS',\n SET_TABLE_STRUCTURE: 'SET_TABLE_STRUCTURE',\n SET_TABLE_LEVEL: 'SET_TABLE_LEVEL',\n SET_TIME_RANGE: 'SET_TIME_RANGE',\n};\n\nfunction forEachWidgetsInLayout(state, func) {\n (state.pageStf?.sections || []).forEach(section => {\n (section.columns || []).forEach(column => {\n (column.widgets || []).forEach((widgetId) => {\n func(widgetId);\n });\n });\n });\n}\n\nfunction mapWidgetsInLayout(state, mapFunc) {\n return (state.pageStf.sections || []).map(section => {\n return {\n ...section,\n columns: (section.columns || []).map(column => {\n return {\n ...column,\n widgets: (column.widgets || []).map((widgetId) => {\n return mapFunc(widgetId);\n }),\n };\n }),\n };\n });\n}\n\nfunction isWithinInclusive(num, min, max) {\n return (num >= min && num <= max);\n}\n\nfunction validateSourceLocation(state, source) {\n if (!isWithinInclusive(source.sectionIndex, 0, state.pageStf.sections.length - 1)) {\n return `Source section index '${source.sectionIndex}' is out of bounds`;\n }\n\n const section = state.pageStf.sections[source.sectionIndex];\n\n if (!isWithinInclusive(source.columnIndex, 0, section.columns.length - 1)) {\n return `Source column index '${source.columnIndex}' is out of bounds`;\n }\n\n const column = section.columns[source.columnIndex];\n\n if (!isWithinInclusive(source.widgetIndex, 0, column.widgets.length - 1)) {\n return `Source widget index '${source.widgetIndex}' is out of bounds`;\n }\n\n return null;\n}\n\nfunction validateDestinationLocation(state, destination) {\n if (!isWithinInclusive(destination.sectionIndex, 0, state.pageStf.sections.length - 1)) {\n return `Destination section index '${destination.sectionIndex}' is out of bounds`;\n }\n\n const section = state.pageStf.sections[destination.sectionIndex];\n\n if (!isWithinInclusive(destination.columnIndex, 0, section.columns.length - 1)) {\n return `Destination column index '${destination.columnIndex}' is out of bounds`;\n }\n\n const column = section.columns[destination.columnIndex];\n\n // A destination widget index is allowed to be 1 higher than the highest\n // index (i.e., the length of the array) to allow appending the widget to\n // the end of the array.\n if (!isWithinInclusive(destination.widgetIndex, 0, column.widgets.length)) {\n return `Destination widget index '${destination.widgetIndex}' is out of bounds`;\n }\n\n return null;\n}\n\nconst widgetInitialState = {\n widgetStf: null,\n widgetState: undefined,\n exportItem: null,\n dataAssets: null,\n printStatus: false,\n};\n\nfunction widgetReducer(state = widgetInitialState, action) {\n switch (action?.type) {\n case ActionTypes.ADD_WIDGET: {\n const { widgetStf } = action.payload;\n\n return {\n ...state,\n widgetStf: widgetStf,\n areLiveControlsVisible: true\n };\n }\n case ActionTypes.SET_WIDGET_STF: {\n const { widgetStf } = action.payload;\n\n return {\n ...state,\n widgetStf: widgetStf,\n };\n }\n case ActionTypes.SET_WIDGET_STATE: {\n const { widgetState } = action.payload;\n\n return {\n ...state,\n widgetState: widgetState,\n };\n }\n case ActionTypes.SET_WIDGET_EXPORT_ITEM: {\n const { exportItem } = action.payload;\n\n return {\n ...state,\n exportItem: exportItem,\n };\n }\n case ActionTypes.SET_WIDGET_PRINT_STATUS: {\n const { printStatus } = action.payload;\n\n return {\n ...state,\n printStatus: printStatus,\n };\n }\n case ActionTypes.SET_WIDGET_LIVE_CONTROLS_VISIBILITY: {\n const { areLiveControlsVisible } = action.payload;\n\n return {\n ...state,\n areLiveControlsVisible: areLiveControlsVisible,\n };\n }\n default: {\n return state;\n }\n }\n}\n\nconst initialState = {\n pageStf: {\n sections: [],\n exploration_path: null,\n rangeSelection: null,\n },\n widgetsById: {},\n isPageDirty: false,\n};\n\n/**\n * Selector to get all widgets in section as a single array.\n *\n * @param {Object} state\n * @param {Number} sectionIndex\n */\nexport function selectSectionWidgets(state, sectionIndex) {\n return state.pageStf.sections[sectionIndex].columns.reduce(\n (widgets, column) => [...widgets, ...(column.widgets || [])],\n []\n );\n}\n\n\nexport function dashboardLayoutReducer(state = initialState, action) {\n switch (action?.type) {\n case ActionTypes.INIT_PAGE: {\n const { pageStf } = action.payload;\n\n // Reset the state to the starting value.\n state = initialState;\n\n // Init time range if there is one.\n //\n let rangeSelection;\n\n if (pageStf.rangeSelection) {\n // Default the time range, if needed.\n if (pageStf.rangeSelection) {\n rangeSelection = { ...pageStf.rangeSelection };\n }\n else {\n rangeSelection = {\n units: 'shift',\n start: 0,\n end: 0,\n };\n }\n\n }\n else {\n rangeSelection = null;\n }\n\n // Init exploration_path if there is one.\n //\n let exploration_path;\n\n if (pageStf.exploration_path) {\n exploration_path = pageStf.exploration_path;\n }\n else {\n exploration_path = null;\n }\n\n const widgetsById = {};\n\n // Convert sections into a layout that holds just the widget IDs,\n // not the entire STF. Collect the widget STFs into `widgetsById`.\n //\n const sections = (pageStf.sections || []).map(section => {\n const columns = (section.columns || []).map(column => {\n const widgets = (column.widgets || []).map((widgetStf) => {\n const widgetId = widgetStf.widgetId;\n\n // Add widget to `widgetsById`\n widgetsById[widgetId] = {\n ...widgetReducer(undefined, {}),\n widgetStf: widgetStf,\n };\n\n return widgetId;\n });\n return { ...column, widgets };\n });\n return { ...section, columns };\n });\n\n return {\n ...state,\n pageStf: {\n ...state.pageStf,\n ...pageStf,\n sections: sections,\n rangeSelection: rangeSelection,\n exploration_path: exploration_path,\n },\n widgetsById: widgetsById,\n isPageDirty: false,\n };\n }\n case ActionTypes.ADD_WIDGET: {\n const { widgetId, destination } = action.payload;\n\n // If there are no sections, a full-width one will be created by\n // default.\n let newSections = (\n (state.pageStf.sections && state.pageStf.sections?.length > 0)\n ? state.pageStf.sections\n : [\n { type: 'full', columns: [{ widgets: [] }] }\n ]\n );\n\n // Use the modified state in case a section was added by default.\n const destinationValidation = validateDestinationLocation(\n {\n ...state,\n pageStf: {\n ...state.pageStf,\n sections: newSections,\n },\n },\n destination\n );\n\n if (destinationValidation) {\n throw new Error(`Unable to add widget: ${destinationValidation}`);\n }\n\n newSections = newSections.map((section, sectionIndex) => {\n const isDestinationSection = destination.sectionIndex === sectionIndex;\n\n // If this section is not involved at all, leave it fully\n // unmodified.\n if (!isDestinationSection) {\n return section;\n }\n\n let columns = section.columns;\n\n columns = columns.map((column, columnIndex) => {\n const isDestinationColumn = (\n isDestinationSection &&\n destination.columnIndex === columnIndex\n );\n\n // If this column is not involved at all, leave it fully\n // unmodified.\n if (!isDestinationColumn) {\n return column;\n }\n\n let widgets = column.widgets;\n\n if (isDestinationColumn) {\n // Add the widget to its new location\n widgets = [...widgets];\n widgets.splice(\n destination.widgetIndex,\n 0,\n widgetId,\n );\n }\n\n return {\n ...column,\n widgets,\n };\n });\n\n return {\n ...section,\n columns,\n };\n });\n\n return {\n ...state,\n pageStf: {\n ...state.pageStf,\n sections: newSections,\n },\n widgetsById: {\n ...state.widgetsById,\n [widgetId]: widgetReducer(undefined, action),\n },\n isPageDirty: true,\n };\n }\n case ActionTypes.MOVE_WIDGET: {\n const { source, destination } = action.payload;\n\n const sourceValidation = validateSourceLocation(state, source);\n if (sourceValidation) {\n throw new Error(`Unable to move widget: ${sourceValidation}`);\n }\n\n const destinationValidation = validateDestinationLocation(state, destination);\n if (destinationValidation) {\n throw new Error(`Unable to move widget: ${destinationValidation}`);\n }\n\n // Get the ID of the widget being moved\n const widgetId = (\n state.pageStf.sections[source.sectionIndex]\n .columns[source.columnIndex]\n .widgets[source.widgetIndex]\n );\n\n // Special Case: Same starting and ending location\n if (\n source.sectionIndex === destination.sectionIndex &&\n source.columnIndex === destination.columnIndex &&\n source.widgetIndex === destination.widgetIndex\n ) {\n return state; // noop\n }\n\n const newSections = state.pageStf.sections.map((section, sectionIndex) => {\n const isSourceSection = source.sectionIndex === sectionIndex;\n const isDestinationSection = destination.sectionIndex === sectionIndex;\n\n // If this section is not involved at all, leave it fully\n // unmodified.\n if (!(isSourceSection || isDestinationSection)) {\n return section;\n }\n\n let columns = section.columns;\n \n columns = columns.map((column, columnIndex) => {\n const isSourceColumn = (\n isSourceSection &&\n source.columnIndex === columnIndex\n );\n\n const isDestinationColumn = (\n isDestinationSection &&\n destination.columnIndex === columnIndex\n );\n\n // If this column is not involved at all, leave it fully\n // unmodified.\n if (!(isSourceColumn || isDestinationColumn)) {\n return column;\n }\n\n let widgets = column.widgets;\n \n if (isSourceColumn) {\n // Remove the widget from its starting location\n widgets = [...widgets];\n widgets.splice(\n source.widgetIndex,\n 1\n );\n }\n \n if (isDestinationColumn) {\n // Add the widget to its new location\n widgets = [...widgets];\n widgets.splice(\n destination.widgetIndex,\n 0,\n widgetId,\n );\n }\n \n return {\n ...column,\n widgets,\n };\n });\n \n return {\n ...section,\n columns,\n };\n });\n\n return {\n ...state,\n pageStf: {\n ...state.pageStf,\n sections: newSections,\n },\n isPageDirty: true,\n };\n }\n case ActionTypes.DELETE_WIDGET: {\n const { source } = action.payload;\n\n const sourceValidation = validateSourceLocation(state, source);\n if (sourceValidation) {\n throw new Error(`Unable to delete widget: ${sourceValidation}`);\n }\n\n let deletedWidgetId = null;\n\n const newSections = state.pageStf.sections.map((section, sectionIndex) => {\n const isSourceSection = source.sectionIndex === sectionIndex;\n\n // If this section is not involved at all, leave it fully\n // unmodified.\n if (!isSourceSection) {\n return section;\n }\n\n let columns = section.columns;\n\n columns = columns.map((column, columnIndex) => {\n const isSourceColumn = (\n isSourceSection &&\n source.columnIndex === columnIndex\n );\n\n // If this column is not involved at all, leave it fully\n // unmodified.\n if (!isSourceColumn) {\n return column;\n }\n \n // Remove the widget\n let widgets = [...column.widgets];\n [ deletedWidgetId ] = widgets.splice(\n source.widgetIndex,\n 1\n );\n \n return {\n ...column,\n widgets,\n };\n });\n \n return {\n ...section,\n columns,\n };\n });\n\n // Remove the widget from `widgetsById`\n const newWidgetsById = { ...state.widgetsById };\n delete newWidgetsById[deletedWidgetId];\n\n return {\n ...state,\n pageStf: {\n ...state.pageStf,\n sections: newSections,\n },\n widgetsById: newWidgetsById,\n isPageDirty: true,\n };\n }\n case ActionTypes.SET_WIDGET_STF: {\n const { widgetId } = action.payload;\n\n if (!state.widgetsById[widgetId]) {\n throw new Error(`Unable to set widget STF: Widget with ID '${widgetId}' not found.`);\n }\n\n return {\n ...state,\n widgetsById: {\n ...state.widgetsById,\n [widgetId]: widgetReducer(state.widgetsById[widgetId], action),\n },\n isPageDirty: true,\n };\n }\n case ActionTypes.SET_WIDGET_STATE: {\n const { widgetId } = action.payload;\n\n if (!state.widgetsById[widgetId]) {\n throw new Error(`Unable to set widget state: Widget with ID '${widgetId}' not found.`);\n }\n\n return {\n ...state,\n widgetsById: {\n ...state.widgetsById,\n [widgetId]: widgetReducer(state.widgetsById[widgetId], action),\n },\n };\n }\n case ActionTypes.SET_WIDGET_EXPORT_ITEM: {\n const { widgetId } = action.payload;\n\n if (!state.widgetsById[widgetId]) {\n throw new Error(`Unable to set widget export item: Widget with ID '${widgetId}' not found.`);\n }\n\n return {\n ...state,\n widgetsById: {\n ...state.widgetsById,\n [widgetId]: widgetReducer(state.widgetsById[widgetId], action),\n },\n };\n }\n case ActionTypes.SET_WIDGET_PRINT_STATUS: {\n const { widgetId } = action.payload;\n\n if (!state.widgetsById[widgetId]) {\n throw new Error(`Unable to set widget print status: Widget with ID '${widgetId}' not found.`);\n }\n\n return {\n ...state,\n widgetsById: {\n ...state.widgetsById,\n [widgetId]: widgetReducer(state.widgetsById[widgetId], action),\n },\n };\n }\n case ActionTypes.SET_WIDGET_LIVE_CONTROLS_VISIBILITY: {\n const { widgetId } = action.payload;\n\n if (!state.widgetsById[widgetId]) {\n throw new Error(`Unable to set widget live control visibility: Widget with ID '${widgetId}' not found.`);\n }\n\n return {\n ...state,\n widgetsById: {\n ...state.widgetsById,\n [widgetId]: widgetReducer(state.widgetsById[widgetId], action),\n },\n };\n }\n case ActionTypes.ADD_SECTION: {\n const { type, sectionIndex } = action.payload;\n\n let newSections = [ ...state.pageStf.sections ];\n newSections.splice((sectionIndex + 1), 0, { type, columns: [{ widgets: [] }] });\n\n return {\n ...state,\n pageStf: {\n ...state.pageStf,\n sections: newSections,\n },\n isPageDirty: true,\n };\n }\n case ActionTypes.DELETE_SECTION: {\n const { sectionIndex } = action.payload;\n\n if (!state.pageStf.sections || !state.pageStf.sections[sectionIndex]) {\n throw 'Unable to delete section: invalid index';\n }\n\n if (state.pageStf.sections.length < 2) {\n throw 'Can not delete last section';\n }\n\n // Get IDs of all the widgets in the section\n const deletedWidgetIds = [];\n state.pageStf.sections[sectionIndex].columns.forEach((column) => {\n const widgets = column.widgets;\n widgets.forEach((widgetId) => {\n deletedWidgetIds.push(widgetId);\n });\n });\n\n const newSections = state.pageStf.sections.filter((_, index) => index !== sectionIndex);\n\n const newWidgetsById = { ...state.widgetsById };\n\n deletedWidgetIds.forEach((widgetId) => {\n delete newWidgetsById[widgetId];\n });\n\n return {\n ...state,\n pageStf: {\n ...state.pageStf,\n sections: newSections,\n },\n widgetsById: newWidgetsById,\n isPageDirty: true,\n };\n }\n case ActionTypes.MOVE_SECTION: {\n const { sectionSrcIndex, sectionDestIndex } = action.payload;\n\n if (!state.pageStf.sections || !state.pageStf.sections[sectionSrcIndex]) {\n throw 'Unable to move section: invalid src index';\n }\n if (!state.pageStf.sections || !state.pageStf.sections[sectionDestIndex]) {\n throw 'Unable to move section: invalid dest index';\n }\n\n const sectionToMove = state.pageStf.sections[sectionSrcIndex];\n const newSections = state.pageStf.sections.filter((_, index) => sectionSrcIndex !== index);\n newSections.splice(sectionDestIndex, 0, sectionToMove);\n\n return {\n ...state,\n pageStf: {\n ...state.pageStf,\n sections: newSections,\n },\n isPageDirty: true,\n };\n }\n case ActionTypes.MODIFY_SECTION: {\n const { sectionIndex, sectionType, sectionHeading } = action.payload;\n\n if (!state.pageStf.sections || !state.pageStf.sections[sectionIndex]) {\n throw 'Unable to modify section: invalid section index';\n }\n\n const newSections = [...state.pageStf.sections];\n\n const newSection = {\n type: state.pageStf.sections[sectionIndex].type,\n heading: sectionHeading === undefined ? state.pageStf.sections[sectionIndex].heading : sectionHeading,\n columns: state.pageStf.sections[sectionIndex].columns,\n };\n\n if (sectionType && newSection.type !== sectionType) {\n const widgets = selectSectionWidgets(state, sectionIndex);\n const numColumns = COLUMN_PROPERTIES[sectionType].num;\n const numWidgetsPerColumn = Math.ceil(widgets.length / numColumns);\n\n // Make the empty columns and fill them in with widgets.\n const newColumns = new Array(numColumns).fill(null).map((_, columnIndex) => {\n const sliceStart = columnIndex * numWidgetsPerColumn;\n\n const columnWidgets = widgets.slice(\n sliceStart,\n sliceStart + numWidgetsPerColumn\n );\n\n return {\n widgets: columnWidgets,\n };\n });\n\n newSection.type = sectionType;\n newSection.columns = newColumns;\n }\n\n newSections[sectionIndex] = newSection;\n return {\n ...state,\n pageStf: {\n ...state.pageStf,\n sections: newSections,\n },\n isPageDirty: true,\n };\n }\n case ActionTypes.SET_PAGE_CLEAN: {\n return {\n ...state,\n isPageDirty: false,\n };\n }\n case ActionTypes.SET_ALL_LIVE_CONTROL_VISIBILITIES: {\n const areLiveControlsVisible = action.payload.areLiveControlsVisible;\n\n const widgetAction = {\n type: ActionTypes.SET_WIDGET_LIVE_CONTROLS_VISIBILITY,\n payload: {\n areLiveControlsVisible: areLiveControlsVisible,\n }\n };\n let newWidgets = {};\n\n forEachWidgetsInLayout(state, (widgetId) => {\n newWidgets[widgetId] = widgetReducer(state.widgetsById[widgetId], widgetAction);\n });\n\n return {\n ...state,\n widgetsById: {\n ...newWidgets,\n },\n };\n }\n case ActionTypes.SET_EXPLORATION_PATH: {\n const { explorationPath } = action.payload;\n\n return {\n ...state,\n pageStf: {\n ...state.pageStf,\n exploration_path: explorationPath,\n },\n isPageDirty: true,\n };\n }\n case ActionTypes.SET_HIERARCHY_NODE: {\n const { hierarchyNode } = action.payload;\n let newAssetControl = {\n ...state.pageStf.exploration_path.asset_control,\n root: hierarchyNode,\n };\n\n if (!hierarchyNode) {\n delete newAssetControl.root;\n }\n // [FUTUREHACK]\n // unset level if it assets, this is only for all production\n // as it is the only page that uses page level\n if (Number.isFinite(newAssetControl?.level) && newAssetControl?.layout !== 'list') {\n newAssetControl.level = '';\n }\n\n const newExplorationPath = {\n ...state.pageStf.exploration_path,\n asset_control: newAssetControl,\n };\n\n return {\n ...state,\n pageStf: {\n ...state.pageStf,\n exploration_path: newExplorationPath,\n },\n isPageDirty: true,\n };\n }\n case ActionTypes.SET_SLICE_FILTERS: {\n const { sliceFilters } = action.payload;\n const newExplorationPath = {\n ...state.pageStf.exploration_path,\n slice_filter: sliceFilters,\n };\n\n return {\n ...state,\n pageStf: {\n ...state.pageStf,\n exploration_path: newExplorationPath,\n },\n isPageDirty: true,\n };\n }\n case ActionTypes.SET_GROUPED_FIELDS: {\n const { groupedFields } = action.payload;\n const newFieldSet = {\n ...state.pageStf.exploration_path.field_set,\n grouped_fields: groupedFields\n };\n const newExplorationPath = {\n ...state.pageStf.exploration_path,\n field_set: newFieldSet\n };\n\n return {\n ...state,\n pageStf: {\n ...state.pageStf,\n exploration_path: newExplorationPath,\n },\n isPageDirty: true,\n };\n }\n case ActionTypes.SET_FIELDS: {\n const { fields } = action.payload;\n // lets keep the sort columns up-to-date\n const fieldsByName = fields.reduce((acc, columnField) => {\n acc[columnField.name] = columnField;\n return acc;\n }, {});\n const newFieldSet = {\n ...state.pageStf.exploration_path.field_set,\n fields,\n sort: (state.pageStf.exploration_path.field_set.sort || [])\n .filter(sortRule => (sortRule.isCategoriesAll || fieldsByName[sortRule.column] ))\n };\n const newExplorationPath = {\n ...state.pageStf.exploration_path,\n field_set: newFieldSet\n };\n\n return {\n ...state,\n pageStf: {\n ...state.pageStf,\n exploration_path: newExplorationPath,\n },\n isPageDirty: true,\n };\n }\n case ActionTypes.SET_SORT_FIELDS: {\n const { fields } = action.payload;\n const newFieldSet = {\n ...state.pageStf.exploration_path.field_set,\n sort: fields\n };\n const newExplorationPath = {\n ...state.pageStf.exploration_path,\n field_set: newFieldSet\n };\n\n return {\n ...state,\n pageStf: {\n ...state.pageStf,\n exploration_path: newExplorationPath,\n },\n isPageDirty: true,\n };\n }\n case ActionTypes.SET_TABLE_STRUCTURE: {\n const { tableStructure } = action.payload;\n const newExplorationPath = {\n ...state.pageStf.exploration_path,\n asset_control: {\n ...state.pageStf.exploration_path.asset_control,\n layout: tableStructure,\n },\n };\n\n return {\n ...state,\n pageStf: {\n ...state.pageStf,\n exploration_path: newExplorationPath,\n },\n isPageDirty: true,\n };\n }\n case ActionTypes.SET_TABLE_LEVEL: {\n const { tableLevel } = action.payload;\n const newExplorationPath = {\n ...state.pageStf.exploration_path,\n asset_control: {\n ...state.pageStf.exploration_path.asset_control,\n level: tableLevel,\n },\n };\n\n return {\n ...state,\n pageStf: {\n ...state.pageStf,\n exploration_path: newExplorationPath,\n },\n isPageDirty: true,\n };\n }\n case ActionTypes.SET_TIME_RANGE: {\n const { timeRange } = action.payload;\n\n return {\n ...state,\n pageStf: {\n ...state.pageStf,\n rangeSelection: timeRange,\n },\n isPageDirty: true,\n };\n }\n default: {\n return state;\n }\n }\n}\n\n/**\n * Selector to get the sections/columns/widgets of the page.\n * \n * NOTE: This function returns widgets only as widget IDs.\n * \n * @param {Object} state\n * @returns {Object}\n */\nexport function selectSections(state) {\n return state.pageStf.sections;\n}\n\n/**\n * Select the widget ID at a location in the layout\n *\n * @param {Object} state\n * @param {Object} location\n * @param {Number} location.sectionIndex\n * @param {Number} location.columnIndex\n * @param {Number} location.widgetIndex\n *\n * @returns {String} widget ID\n */\n export function selectWidgetIdAtLocation(state, location) {\n const {\n sectionIndex,\n columnIndex,\n widgetIndex,\n } = location;\n\n return state.pageStf.sections[sectionIndex]?.columns?.[columnIndex]?.widgets?.[widgetIndex];\n}\n\n/**\n * Selector to get the STF for a widget.\n *\n * @param {Object} state\n * @param {String} widgetId\n * @returns {Object}\n */\nexport function selectWidgetStf(state, widgetId) {\n return state.widgetsById[widgetId]?.widgetStf;\n}\n\n/**\n * Selector to get the state for a widget.\n *\n * @param {Object} state\n * @param {String} widgetId\n * @returns {Object}\n */\nexport function selectWidgetState(state, widgetId) {\n return state.widgetsById[widgetId]?.widgetState;\n}\n\n/**\n * Selector to get the export item for a widget.\n *\n * @param {Object} state\n * @param {String} widgetId\n * @returns {Object}\n */\nexport function selectWidgetExportItem(state, widgetId) {\n return state.widgetsById[widgetId]?.exportItem;\n}\n\n/**\n * Selector to get the page's export items.\n *\n * @param {Object} state\n * @returns {Object[]}\n */\nexport function selectWidgetExportItems(state) {\n const items = [];\n\n forEachWidgetsInLayout(state, (widgetId) => {\n const exportItem = selectWidgetExportItem(state, widgetId);\n if (exportItem) {\n items.push({ ...exportItem, widgetId });\n }\n });\n\n return items;\n}\n\n/**\n * Selector to get a widget's data assets.\n *\n * @param {Object} state\n * @returns {[]|null}\n */\nexport function selectWidgetDataAssets(state, widgetId) {\n return state.widgetsById[widgetId]?.dataAssets;\n}\n\n/**\n * Get all of the page's data assets, with ability to filter on widget stf.\n *\n * @param {Object} state\n * @param {Function} shouldInclude based on the widget's stf\n * if we include this widget's data assets\n * @param {Object} reportHierarchyNode\n * @param {String} pageType\n * @returns {String[]}\n */\nfunction getWidgetsHierarchyNodeNames(state, shouldInclude, reportHierarchyNode, pageType) {\n let hierarchyNodeMap = {};\n let hierarchyNodesArray = [];\n if (pageType === 'all-production') {\n hierarchyNodesArray.push(state.pageStf.exploration_path?.asset_control?.root || reportHierarchyNode?.name || 'self');\n }\n else {\n forEachWidgetsInLayout(state, (widgetId) => {\n // [FUTUREHACK] enforce self even if there are no specific hierarchy nodes\n const widgetStf = selectWidgetStf(state, widgetId);\n const hiearchyNode = widgetStf?.exploration_path?.asset_control?.root || widgetStf?.asset_control?.root || reportHierarchyNode?.name || 'self';\n\n if (hiearchyNode && !hierarchyNodeMap[hiearchyNode] && shouldInclude(widgetStf)) {\n hierarchyNodeMap[hiearchyNode] = true;\n hierarchyNodesArray.push(hiearchyNode);\n }\n });\n }\n\n // If there are no widgets which report a hierarchy node default to self\n if (hierarchyNodesArray.length === 0) {\n hierarchyNodesArray.push('self');\n }\n \n return hierarchyNodesArray;\n}\n\n/**\n * Selector to get all of the page's data assets.\n *\n * @param {Object} state\n * @param {Object} reportHierarchyNode\n * @param {String} pageType\n * @returns {String[]}\n */\nexport function selectPageWidgetsHierarchyNodeNames(state, reportHierarchyNode, pageType) {\n return getWidgetsHierarchyNodeNames(state, (stf) => true, reportHierarchyNode, pageType);\n}\n\n/**\n * Selector to get the page's data assets which affect the page time range.\n *\n * @param {Object} state\n * @param {Object} reportHierarchyNode\n * @param {String} pageType\n * @returns {String[]}\n */\n export function selectPageWidgetsHierarchyNodeNamesForPageTimeRange(state, reportHierarchyNode, pageType) {\n return getWidgetsHierarchyNodeNames(state, (stf) => (!stf?.rangeSelection), reportHierarchyNode, pageType);\n}\n\n/**\n * Selector to get a widget's print status.\n *\n * @param {Object} state\n * @returns {Boolean}\n */\n export function selectWidgetPrintStatus(state, widgetId) {\n return state.widgetsById[widgetId]?.printStatus;\n}\n\n/**\n * Selector to get a widget's live control visibility.\n *\n * @param {Object} state\n * @returns {Bool}\n */\n export function selectWidgetLiveControlsVisibility(state, widgetId) {\n return state.widgetsById[widgetId]?.areLiveControlsVisible;\n}\n\n/**\n * Selector to get the page's print status.\n *\n * @param {Object} state\n * @returns {Boolean}\n */\n export function selectPagePrintStatus(state) {\n let allWidgetsReady = true;\n\n forEachWidgetsInLayout(state, (widgetId) => {\n const widgetPrintStatus = selectWidgetPrintStatus(state, widgetId);\n\n if (!widgetPrintStatus) {\n allWidgetsReady = false;\n }\n });\n\n return allWidgetsReady;\n}\n\n/**\n * Selector to get the page's STF. Usually for saving.\n *\n * @param {Object} state\n * @returns {object}\n */\nexport function selectPageStf(state) {\n const stfObject = {\n ...state.pageStf,\n sections: mapWidgetsInLayout(state, (widgetId) => {\n let widgetStf = { ...selectWidgetStf(state, widgetId) };\n delete widgetStf.widgetId;\n return widgetStf;\n }),\n };\n\n // Delete exploration_path from STF if it's not set\n if (!stfObject.exploration_path) {\n delete stfObject.exploration_path;\n }\n\n // Delete rangeSelection from STF if it's not set\n if (!stfObject.rangeSelection) {\n delete stfObject.rangeSelection;\n }\n\n return stfObject;\n}\n\n/**\n * Selector to return true if any widgets have visible live controls\n *\n * @param {Object} state\n * @returns {Boolean}\n */\nexport function selectAnyLiveControlsVisible(state) {\n let anyVisible = false;\n\n forEachWidgetsInLayout(state, (widgetId) => {\n anyVisible = selectWidgetLiveControlsVisibility(state, widgetId) || anyVisible;\n });\n\n return anyVisible;\n}\n\n/**\n * Selector to return true if any widgets have hidden live controls\n *\n * @param {Object} state\n * @returns {Boolean}\n */\n export function selectAnyLiveControlsHidden(state) {\n let anyHidden = false;\n\n forEachWidgetsInLayout(state, (widgetId) => {\n anyHidden = !selectWidgetLiveControlsVisibility(state, widgetId) || anyHidden;\n });\n\n return anyHidden;\n}\n\n/**\n * Selector for the page-level exploration path.\n *\n * @param {Object} state\n * @returns {Object|null} Exploration path STF\n */\nexport function selectExplorationPath(state) {\n return state.pageStf.exploration_path;\n}\n\n/**\n * Selector for the page-level fields.\n *\n * @param {Object} state\n * @returns {Array|null} Exploration path STF fields\n */\n export function selectFields(state) {\n return state.pageStf.exploration_path?.field_set?.fields;\n}\n\n/**\n * Selector for the page-level filters.\n *\n * @param {Object} state\n * @returns {Object|null} Exploration path STF filters\n */\n export function selectSliceFilters(state) {\n return state.pageStf.exploration_path?.slice_filter;\n}\n\n/**\n * Selector for the page-level grouped fields.\n *\n * @param {Object} state\n * @returns {Object|null} Exploration path STF grouped fields\n */\n export function selectGroupedFields(state) {\n return state.pageStf.exploration_path?.field_set?.grouped_fields;\n}\n\n/**\n * Selector for the page-level hierarchy node.\n *\n * @param {Object} state\n * @returns {Object|null} Exploration path STF hierarchy node\n */\n export function selectHierarchyNode(state) {\n return state.pageStf.exploration_path?.asset_control?.root;\n}\n\n/**\n * Selector for the page-level table structure.\n *\n * @param {Object} state\n * @returns {Object|null} Exploration path STF table sturcture\n */\n export function selectTableStructure(state) {\n return state.pageStf.exploration_path?.asset_control?.layout;\n}\n\n/**\n * Selector for the page-level time range.\n *\n * @param {Object} state\n * @returns {Object|null} Time range STF\n */\nexport function selectTimeRange(state) {\n return state.pageStf.rangeSelection;\n}\n\n/**\n * Selector for if the page is dirty (i.e., unsaved changes).\n *\n * @param {Object} state\n * @returns {Boolean}\n */\nexport function selectIsPageDirty(state) {\n return state.isPageDirty;\n}\n\n/**\n * Action creator to initialize a page\n *\n * @param {Object} pageStf\n * @returns {Object} Init page action\n */\nexport function initPage(pageStf) {\n return {\n type: ActionTypes.INIT_PAGE,\n payload: {\n pageStf,\n },\n };\n}\n\n/**\n * Action creator to move a widget within the layout\n *\n * @param {Object} source\n * @param {Number} source.sectionIndex\n * @param {Number} source.columnIndex\n * @param {Number} source.widgetIndex\n * @param {Object} destination\n * @param {Number} destination.sectionIndex\n * @param {Number} destination.columnIndex\n * @param {Number} destination.widgetIndex\n *\n * @returns {Object} Move widget action\n */\nexport function moveWidget(source, destination) {\n return {\n type: ActionTypes.MOVE_WIDGET,\n payload: {\n source,\n destination,\n },\n };\n}\n\n/**\n * Action creator to add a widget to the layout\n *\n * @param {String} widgetId\n * @param {Object} destination\n * @param {Number} destination.sectionIndex\n * @param {Number} destination.columnIndex\n * @param {Number} destination.widgetIndex\n * @param {Object} widgetStf\n *\n * @returns {Object} Add widget action\n */\nexport function addWidget(widgetId, destination, widgetStf) {\n return {\n type: ActionTypes.ADD_WIDGET,\n payload: {\n widgetId,\n destination,\n widgetStf,\n },\n };\n}\n\n/**\n * Action creator to delete a widget within the layout\n *\n * @param {Object} source\n * @param {Number} source.sectionIndex\n * @param {Number} source.columnIndex\n * @param {Number} source.widgetIndex\n *\n * @returns {Object} Delete widget action\n */\nexport function deleteWidget(source) {\n return {\n type: ActionTypes.DELETE_WIDGET,\n payload: {\n source,\n },\n };\n}\n\n/**\n * Action creator to set a widget's STF within the layout\n *\n * @param {String} widgetId\n * @param {Object} widgetStf\n *\n * @returns {Object} Set widget STF action\n */\nexport function setWidgetStf(widgetId, widgetStf) {\n return {\n type: ActionTypes.SET_WIDGET_STF,\n payload: {\n widgetId,\n widgetStf,\n },\n };\n}\n\n/**\n * Async action creator to set/update a widget's STF based on the current STF.\n *\n * @param {String} widgetId\n * @param {Object} updater\n *\n * @returns {Object} Set widget STF async action\n */\nexport function setWidgetStfAsync(widgetId, widgetStf) {\n return (dispatch, getState) => {\n const currentWidgetStf = selectWidgetStf(getState(), widgetId);\n const newWidgetStf = widgetStf(currentWidgetStf);\n\n return dispatch(\n setWidgetStf(widgetId, newWidgetStf)\n );\n };\n}\n\n/**\n * Action creator to set a widget's state within the layout\n *\n * @param {String} widgetId\n * @param {Object} widgetState\n *\n * @returns {Object} Set widget state action\n */\nexport function setWidgetState(widgetId, widgetState) {\n return {\n type: ActionTypes.SET_WIDGET_STATE,\n payload: {\n widgetId,\n widgetState,\n },\n };\n}\n\n/**\n * Async action creator to set/update a widget's state based on the current state.\n *\n * @param {String} widgetId\n * @param {Object} updater\n *\n * @returns {Object} Set widget state async action\n */\nexport function setWidgetStateAsync(widgetId, updater) {\n return (dispatch, getState) => {\n const currentWidgetState = selectWidgetState(getState(), widgetId);\n const newWidgetState = updater(currentWidgetState);\n\n return dispatch(\n setWidgetState(widgetId, newWidgetState)\n );\n };\n}\n\n/**\n * Action creator to set a widget's export item\n *\n * @param {String} widgetId\n * @param {Object} exportItem\n * @param {String} exportItem.title\n * @param {Boolean} exportItem.isExportReady\n * @param {Function} exportItem.exportData\n *\n * @returns {Object} Set widget export item action\n */\nexport function setWidgetExportItem(widgetId, { title, isExportReady, exportData, getDataToExport, fileName, worksheetTitle, }) {\n let exportItem = { title, isExportReady };\n if (exportData) {\n exportItem.exportData = exportData;\n }\n else {\n exportItem.fileName = fileName;\n exportItem.worksheetTitle = worksheetTitle;\n exportItem.getDataToExport = getDataToExport;\n }\n\n return {\n type: ActionTypes.SET_WIDGET_EXPORT_ITEM,\n payload: {\n widgetId,\n exportItem,\n },\n };\n}\n\n/**\n * Action creator to set a widget's print status\n * @param {String} widgetId\n * @param {Boolean} printStatus\n *\n * @returns {Object} Set widget print status action\n */\nexport function setWidgetPrintStatus(widgetId, printStatus) {\n return {\n type: ActionTypes.SET_WIDGET_PRINT_STATUS,\n payload: {\n widgetId: widgetId,\n printStatus,\n },\n };\n}\n\nexport function setWidgetLiveControlsVisibility(widgetId, visible) {\n const areLiveControlsVisible = Boolean(visible);\n\n return {\n type: ActionTypes.SET_WIDGET_LIVE_CONTROLS_VISIBILITY,\n payload: {\n widgetId: widgetId,\n areLiveControlsVisible: areLiveControlsVisible,\n },\n };\n}\n\n/**\n * Action creator to add a section to the layout\n *\n * @param {String} sectionType\n *\n * @returns {Object} Add section action\n */\nexport function addSection(sectionType, sectionIndex) {\n return {\n type: ActionTypes.ADD_SECTION,\n payload: {\n type: sectionType,\n sectionIndex,\n },\n };\n}\n\n/**\n * Action creator to delete a section within the layout\n *\n * @param {Number} sectionIndex\n *\n * @returns {Object} Delete section action\n */\nexport function deleteSection(sectionIndex) {\n return {\n type: ActionTypes.DELETE_SECTION,\n payload: {\n sectionIndex,\n },\n };\n}\n\n/**\n * Action creator to move a section within the layout\n *\n * @param {Number} sectionSrcIndex\n * @param {Number} sectionDestIndex\n *\n * @returns {Object} Move section action\n */\nexport function moveSection(sectionSrcIndex, sectionDestIndex) {\n return {\n type: ActionTypes.MOVE_SECTION,\n payload: {\n sectionSrcIndex,\n sectionDestIndex\n },\n };\n}\n\n/**\n * Action creator to modify a section within the layout\n *\n * @param {Number} sectionIndex\n * @param {String} sectionType\n * @param {String} sectionHeading\n *\n * @returns {Object} Modify section action\n */\nexport function modifySection(sectionIndex, sectionType, sectionHeading) {\n return {\n type: ActionTypes.MODIFY_SECTION,\n payload: {\n sectionIndex,\n sectionType,\n sectionHeading\n },\n };\n}\n\n/**\n * Action creator to set a page as clean\n *\n * @returns {Object} Set page clean action\n */\nexport function setPageClean() {\n return {\n type: ActionTypes.SET_PAGE_CLEAN,\n };\n}\n\nexport function setAllLiveControlVisibilities(visible) {\n return {\n type: ActionTypes.SET_ALL_LIVE_CONTROL_VISIBILITIES,\n payload: {\n areLiveControlsVisible: visible,\n }\n };\n}\n\n/**\n * Action creator to set the page-level fields\n *\n * @returns {Object[]} Set fields action\n */\nexport function setFields(fields) {\n return {\n type: ActionTypes.SET_FIELDS,\n payload: { fields },\n };\n}\n\n/**\n * Action creator to set the page-level sort\n *\n * @returns {Object} Set sort fields action\n */\n export function setSortFields(fields) {\n return {\n type: ActionTypes.SET_SORT_FIELDS,\n payload: { fields },\n };\n}\n\n/**\n * Action creator to set the page-level slice filters\n *\n * @returns {Object} Set slice filters action\n */\n export function setSliceFilters(sliceFilters) {\n return {\n type: ActionTypes.SET_SLICE_FILTERS,\n payload: { sliceFilters },\n };\n}\n\n/**\n * Action creator to set the page-level grouped fields\n *\n * @returns {Object[]} Set grouped fields action\n */\n export function setGroupedFields(groupedFields) {\n return {\n type: ActionTypes.SET_GROUPED_FIELDS,\n payload: { groupedFields },\n };\n}\n\n/**\n * Action creator to set the page-level hierarchy node\n *\n * @returns {String} Set hierarchy node action\n */\n export function setHierarchyNode(hierarchyNode) {\n return {\n type: ActionTypes.SET_HIERARCHY_NODE,\n payload: { hierarchyNode },\n };\n}\n\n/**\n * Action creator to set the page-level table structure\n *\n * @returns {String} Set table structure action\n */\n export function setTableStructure(tableStructure) {\n return {\n type: ActionTypes.SET_TABLE_STRUCTURE,\n payload: { tableStructure },\n };\n}\n\n/**\n * Action creator to set the page-level table level\n *\n * @returns {String} Set table leve action\n */\n export function setTableLevel(tableLevel) {\n return {\n type: ActionTypes.SET_TABLE_LEVEL,\n payload: { tableLevel },\n };\n}\n\n/**\n * Action creator to set the page-level time range\n *\n * @returns {Object} Set time range action\n */\nexport function setTimeRange(timeRange) {\n return {\n type: ActionTypes.SET_TIME_RANGE,\n payload: { timeRange },\n };\n}\n","import {\n resourceCollectionReducer,\n resourceReducer,\n} from 'Common/util/ResourceCollection';\nimport {\n selectResources,\n} from 'Common/util/ResourceCollection/resourceCollectionReducer';\n\nexport default resourceCollectionReducer('emailTemplates', {\n getResourceId: (resource) => resource.id,\n requests: [ 'getEmailTemplates', 'postEmailTemplate', 'patchEmailTemplate', 'deleteEmailTemplate' ],\n resourceReducer: resourceReducer({\n requests: [ 'getEmailTemplates', 'patchEmailTemplate', 'deleteEmailTemplate' ],\n }),\n sort: (reportA, reportB) => {\n return reportA.title.localeCompare(reportB.title);\n },\n});\n\nexport function getEmailTemplatesList(state) {\n return selectResources(state);\n}\n","import { resourceReducer } from 'Common/util/ResourceCollection';\nimport { selectResourceData } from 'Common/util/ResourceCollection/resourceReducer';\n\nexport default resourceReducer({\n requests: [ 'getMetricThresholds', 'putMetricThresholds' ],\n setResource: (data) => {\n return (data?.metrics || []);\n }\n});\n\n/**\n * Select the metric threshold configs (as an array).\n *\n * @param {Object} state The state of the redux store.\n * @returns {Array} Metric thresholds.\n */\nexport function selectMetricThresholds(state) {\n const rv = selectResourceData(state);\n return rv;\n}\n\n/**\n * Select the metric threshold configs as a map keyed by column name.\n *\n * @param {Object} state The state of the redux store.\n * @returns {Object} The map of metric thresholds.\n */\nexport function selectMetricThresholdsByColumnName(state) {\n const metricThresholds = selectResourceData(state);\n return metricThresholds.reduce((map, item) => {\n map[item.name] = item;\n return map;\n }, {});\n}\n","\nimport React, {\n useReducer,\n useEffect,\n useState,\n useMemo,\n useCallback,\n} from 'react';\nimport LoadingPage from 'Components/pages/loading/LoadingPage';\nimport InvalidUrlPage from 'Components/pages/invalid-url/InvalidUrlPage';\nimport EmailTableWidget from './EmailTableWidget';\nimport KPIWidget from 'Common/components/widgets/KPIWidget/KPIWidget';\nimport KPIGroupWidget from 'Common/components/widgets/KPIGroupWidget/KPIGroupWidget';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport {\n cloneDeep,\n} from 'lodash';\n\nimport useNavigationPrevention from 'Common/hooks/useNavigationPrevention';\nimport { useTranslator } from 'Common/hooks/useTranslation';\nimport { widgetSchema } from './WidgetSchema';\nimport ConfigPageTitle from 'Components/page/ConfigPageTitle';\nimport DashboardLayoutEditor from 'Common/components/Dashboard/DashboardLayout/DashboardLayoutEditor';\nimport { Heading4 } from 'Common/components/typography';\nimport Form from 'Components/form/Form';\nimport Icon from 'Common/components/Icon';\nimport InfoCircle from 'Common/components/InfoCircle';\nimport MenuDropdown from 'Common/components/MenuToolbar/MenuDropdown';\nimport PageSelectField from 'Common/components/Dashboard/DashboardLayout/PageSelectField';\nimport MenuItem from 'Common/components/MenuToolbar/MenuItem';\nimport MenuToolbar from 'Common/components/MenuToolbar/MenuToolbar';\nimport ModalWindow from 'Common/components/ModalWindow/ModalWindow';\nimport Page from 'Components/page/Page';\nimport PageContent from 'Components/page/PageContentWide';\nimport PageDescription from 'Components/page/PageDescription';\nimport TextInput from 'Components/text-input/TextInput';\nimport { WidgetCacheProvider, DashboardCacheProvider } from 'Common/components/Dashboard/DashboardCache';\nimport { v4 as uuid } from 'uuid';\nimport { bindActionCreators } from 'redux';\nimport getDataService from './getDataService';\n\nimport {\n postEmailTemplate,\n patchEmailTemplate,\n getEmailTemplates,\n deleteEmailTemplate,\n getMetricThresholds,\n} from 'Redux/actions';\nimport { connect } from 'react-redux';\nimport {\n useHistory,\n useLocation,\n useParams,\n withRouter,\n} from 'react-router-dom';\n\nimport {\n addSection,\n addWidget,\n dashboardLayoutReducer,\n deleteSection,\n deleteWidget,\n initPage,\n modifySection,\n moveSection,\n moveWidget,\n selectIsPageDirty,\n selectPageStf,\n selectWidgetState,\n selectWidgetStf,\n setWidgetExportItem,\n setWidgetLiveControlsVisibility,\n setWidgetPrintStatus,\n setWidgetState,\n setWidgetStf,\n} from 'Common/components/Dashboard/DashboardLayout/dashboardLayoutReducer';\nimport { getEmailTemplatesList } from 'Redux/reducers/emailTemplates';\nimport Button from 'Common/components/Button';\nimport { selectMetricThresholdsByColumnName } from 'Redux/reducers/metricThresholds';\n\nconst leftPadding = 20;\n\nconst buttonStyle = {\n minHeight: '35px'\n};\n\nfunction getNextWidgetId() {\n const id = `widget-${uuid()}`;\n return id;\n}\n\nconst NewTitleTextInput = styled(TextInput)`\n width: 100%\n`;\n\nconst ToolbarContainer = styled.div`\n padding-left: ${leftPadding}px;\n background-color: ${props => props.theme.colors.palette.grey.cloud};\n`;\n\n// style copied from ContentArea system to keep things looking the same\nconst PageHeaderContainer = styled.div`\n padding-left: ${leftPadding}px;\n`;\n\n// style copied from ContentArea system to keep things looking the same\nconst PageLiveControlBarContainer = styled.div`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n`;\n\n// style copied from ContentArea system to keep things looking the same\nconst PageSelectContainer = styled.div`\n padding: 5px 15px 5px 0px;\n min-width: 150px;\n`;\n\n// style copied from ContentArea system to keep things looking the same\nconst PageSelectDisplayContainer = styled.div`\n display: flex;\n align-items: baseline;\n flex-direction: row;\n justify-content: space-between;\n`;\n\n// style copied from ContentArea system to keep things looking the same\nconst DropdownDisplay = styled(Heading4).attrs({ as: 'div' })`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\n// style copied from ContentArea system to keep things looking the same\nconst PageName = styled(DropdownDisplay)`\n flex: 1 1 auto;\n`;\n\nconst NewTitleDialogState = {\n HIDE: 'HIDE',\n NEW: 'NEW',\n SAVE_AS: 'SAVE_AS',\n DUPLICATE: 'DUPLICATE',\n};\n\nconst DEFAULT_NEW_PAGE_STF = {\n sections: [\n {\n 'type': 'full',\n 'columns': [\n {\n 'widgets': []\n }\n ]\n }\n ]\n};\n\nfunction renderWidget(widgetId, widgetProps, contentAreaProps) {\n const {\n isLayoutModeActive,\n dragHandleProps,\n sectionIndex,\n columnIndex,\n widgetIndex,\n } = widgetProps;\n\n const {\n reducerState,\n dataService,\n\n mutable,\n originName,\n parentTitle,\n onSavePage,\n onExportReadyChange,\n exportWidgetData,\n\n timeRange,\n explorationPath,\n\n actions,\n\n isPrint,\n printConfig,\n\n // Legacy stuff needed only for the top losses page\n selectedLossCount,\n collapseHierarchy,\n onLossCountSelectorChange,\n\n // Legacy stuff needed only for the time schedule\n scheduleTab,\n onScheduleTabSelectorChange,\n timeSelector,\n onTimeSelectorChange,\n metricThresholds,\n } = contentAreaProps;\n\n const widgetStf = selectWidgetStf(reducerState, widgetId);\n const widgetState = selectWidgetState(reducerState, widgetId);\n\n const areLiveControlsVisible = true;\n\n /**\n * render a specific type of widget based on the type as defined in the stf\n */\n const renderWidgetByType = () => {\n if (widgetStf.type === 'kpi_widget') {\n return (\n \n );\n }\n else if (widgetStf.type === 'kpi_group_widget') {\n return (\n \n );\n }\n else if (widgetStf.type === 'email_table_widget') {\n return (\n \n );\n }\n };\n\n return (\n \n \n {renderWidgetByType()}\n\n \n \n );\n}\n\nfunction getRenderWidget(contentAreaProps) {\n const duplicateWidget = (source, newStf) => {\n // Copy the widget STF, but with a new widget ID.\n let widgetStf = cloneDeep(newStf);\n const newWidgetId = getNextWidgetId();\n widgetStf.widgetId = newWidgetId;\n\n addWidget(\n newWidgetId,\n {\n sectionIndex: source.sectionIndex,\n columnIndex: source.columnIndex,\n widgetIndex: source.widgetIndex,\n },\n widgetStf,\n );\n };\n\n const exportWidgetData = () => {\n console.error('unsupported');\n };\n\n return (widgetId, widgetOpts) => {\n return renderWidget(widgetId, widgetOpts, {\n ...contentAreaProps,\n actions: {\n deleteWidget,\n duplicateWidget,\n exportWidgetData,\n setWidgetExportItem,\n setWidgetLiveControlsVisibility,\n setWidgetPrintStatus: (printStatus) => {\n setWidgetPrintStatus(widgetId, printStatus);\n },\n setWidgetState,\n setWidgetStf: (func) => {\n const widgetStf = selectWidgetStf(contentAreaProps.reducerState, widgetId);\n const newStf = func(widgetStf);\n const reducer = setWidgetStf(widgetId, newStf);\n contentAreaProps.dispatch(reducer);\n },\n },\n });\n };\n}\n\nfunction sortTemplates(lhs, rhs) {\n lhs = lhs.data;\n rhs = rhs.data;\n\n if (lhs.built_in && !rhs.built_in) {\n return -1;\n }\n if (rhs.built_in && !lhs.built_in) {\n return 1;\n }\n\n return lhs.title.localeCompare(rhs.title);\n}\n\nfunction EmailTemplatesPage(props) {\n\n const {\n actions,\n emailTemplates,\n metricThresholds,\n requests,\n } = props;\n\n const [showNewTitleDialog, setShowNewTitleDialog] = useState(NewTitleDialogState.HIDE);\n const [newTitleValue, setNewTitleValue] = useState('');\n const [showDeleteDialog, setShowDeleteDialog] = useState(false);\n\n const history = useHistory();\n const location = useLocation();\n const { pageId } = useParams();\n const pageIdNumber = pageId ? parseInt(pageId, 10) : pageId;\n\n useEffect(() => {\n const load = async () => {\n await Promise.all([\n actions.getEmailTemplates(),\n actions.getMetricThresholds(),\n ]);\n };\n\n load();\n }, [actions]);\n\n // triggered pageId changes, only impacts the page when pageId to non falsey to redirect the\n // browser to an actual url as opposed to non-id url. Basically implements the default template\n useEffect(() => {\n if (! pageId || pageId === '0') {\n const defaultId = emailTemplates.length > 0 ? emailTemplates[0].data.id : 0;\n history.push(`/config/plant-floor/email-templates/${defaultId}`);\n }\n }, [pageId, history, emailTemplates]);\n\n // savedPageData contains the data for the page as it is stored in enterprise redux, essentially\n // cloning what is on the server\n const savedPageData = useMemo(() => {\n const rv = emailTemplates.find((template) => {\n return template.data.id === pageIdNumber;\n });\n if (rv?.data) {\n // Add widget IDs since they are no longer stored in stf as of commit: 1e79ee2f741\n rv.data.content.sections = (rv.data.content.sections || []).map(section => {\n const columns = (section.columns || []).map(column => {\n const widgets = (column.widgets || [])\n .map((widgetStf) => {\n const widgetId = getNextWidgetId();\n\n return {\n ...widgetStf,\n widgetId: widgetId,\n };\n });\n return { ...column, widgets };\n });\n return { ...section, columns };\n });\n }\n return rv;\n }, [pageIdNumber, emailTemplates]);\n\n // maps the other report templates available to a data structure that likes\n // for the dropdown\n const allEmailTemplatesView = useMemo(() => emailTemplates.sort(sortTemplates).map((template) => {\n const { data } = template;\n return {\n displayName: data.title,\n groupName: data.built_in ? 'Built-In Views' : 'Shared Views',\n id: data.id,\n isPlaceHolder: false,\n isSeparator: false,\n path: `/config/plant-floor/email-templates/${data.id}`,\n };\n }), [ emailTemplates ]);\n\n // state and reducer system for the current state of the page, this is not part of the\n // enterprise redux state store\n // it is initialized with the saved page from the server or a default initial state\n //TODO this should be populated from the API with the current state of the page.\n const [pageState, dispatch] = useReducer(\n dashboardLayoutReducer,\n {\n pageStf: DEFAULT_NEW_PAGE_STF,\n isPageDirty: false,\n printStatus: {\n isReady: false,\n },\n }\n );\n\n // reinitialize the page when savedPageData is first computed or it has changed\n useEffect(() => {\n // make sure not to reload the save page data while the patch email request is pending\n if (savedPageData && savedPageData.requests.patchEmailTemplate.status !== 'PENDING') {\n dispatch(initPage({ ...savedPageData?.data.content }));\n }\n }, [savedPageData]);\n\n const isPageDirty = selectIsPageDirty(pageState);\n const {\n component: navigationPrevention,\n cancel: cancelNav,\n reset: resetNav,\n } = useNavigationPrevention(isPageDirty);\n\n const submitNewReport = (newTitle, newContent) => {\n actions.postEmailTemplate({\n title: newTitle,\n content: newContent,\n }, (newReportList) => {\n // find the template id that was added so the page can redirect there\n const origTemplateIds = emailTemplates.map((et) => {\n return et.data.id;\n });\n const newTemplateIds = newReportList.map((et) => {\n return et.id;\n });\n const added = newTemplateIds.filter(x => !origTemplateIds.includes(x));\n // when navigating away after saving a new page assume navigation prevention is unnecessary\n // the user probably just did a save as so the original page can be abandoned without worry\n cancelNav();\n history.push(`/config/plant-floor/email-templates/${added}`);\n resetNav();\n });\n };\n\n const onDeleteReport = useCallback(async () => {\n let newPage = 0;\n\n if (emailTemplates.length > 0) {\n emailTemplates.forEach(report => {\n if (report.data.id !== pageIdNumber && newPage !== 0) {\n newPage = report.data.id;\n }\n });\n }\n\n await actions.deleteEmailTemplate(pageIdNumber);\n history.push(`/config/plant-floor/email-templates/${newPage}`);\n }, [actions, history, pageIdNumber, emailTemplates]);\n\n const onSaveReport = () => {\n actions.patchEmailTemplate(pageIdNumber, {\n 'content': selectPageStf(pageState),\n 'title': savedPageData.data.title,\n });\n };\n\n const handleWidgetMove = (event) => {\n dispatch(moveWidget(event.source, event.destination));\n };\n\n const dispatchNewWidget = (sectionIndex, columnIndex, widgetIndex, defaultStf) => {\n const newWidgetId = getNextWidgetId();\n let widgetStf = cloneDeep(defaultStf);\n widgetStf.widgetId = newWidgetId;\n\n dispatch(addWidget(\n newWidgetId,\n {\n sectionIndex,\n columnIndex,\n widgetIndex,\n },\n widgetStf,\n ));\n };\n\n const handleAddWidget = (event) => {\n const { widgetType, destination } = event;\n const schema = widgetSchema[widgetType];\n const defaultStf = schema.defaults;\n\n let sectionType;\n if (widgetType === 'kpi_widget') {\n sectionType = 'thirds';\n }\n else if (widgetType === 'kpi_group_widget') {\n sectionType = 'halves';\n }\n else if (widgetType === 'email_table_widget') {\n sectionType = 'full';\n }\n\n dispatch(modifySection(destination.sectionIndex, sectionType, undefined));\n\n if (widgetType === 'kpi_widget') {\n dispatchNewWidget(destination.sectionIndex, 0, 0, defaultStf);\n dispatchNewWidget(destination.sectionIndex, 1, 0, defaultStf);\n dispatchNewWidget(destination.sectionIndex, 2, 0, defaultStf);\n }\n else if (widgetType === 'kpi_group_widget') {\n dispatchNewWidget(destination.sectionIndex, 0, 0, defaultStf);\n dispatchNewWidget(destination.sectionIndex, 1, 0, defaultStf);\n }\n else if (widgetType === 'email_table_widget') {\n dispatchNewWidget(destination.sectionIndex, 0, 0, defaultStf);\n }\n };\n\n const getScrollParent = () => {\n console.warn('getScrollParent');\n };\n\n const handleSectionAdd = (event) => {\n dispatch(addSection(event.sectionType, event.sectionIndex));\n };\n\n const handleSectionDelete = (event) => {\n dispatch(deleteSection(event.sectionIndex));\n };\n\n const handleSectionModify = (event) => {\n dispatch(modifySection(event.sectionIndex, event.sectionType, event.sectionHeading));\n };\n\n const handleSectionMove = (event) => {\n dispatch(moveSection(event.sectionSrcIndex, event.sectionDestIndex));\n };\n\n const translator = useTranslator();\n\n const dataService = getDataService(translator, metricThresholds);\n\n const timeRange = {\n units: 'production_day',\n start: 0,\n end: 0,\n dayBasis: 'day',\n };\n\n const explorationPath = {\n };\n\n const renderWidgetFn = getRenderWidget({\n dispatch,\n reducerState: pageState,\n dataService: dataService,\n mutable: true,\n originName: 'originName',\n parentTitle: 'parentTitle',\n timeRange: timeRange,\n explorationPath: explorationPath,\n metricThresholds,\n });\n\n const viewPath = location.pathname;\n const viewDisplayName = savedPageData?.data.title || 'Unknown';\n\n // built-in pages can not be saved to or deleted\n // users can still make modifications that they can Save As or Duplicate\n const canModifyCurrentPage = ! savedPageData?.data?.built_in;\n\n const onPageChange = (evt) => {\n // navigate to newly selected page\n history.push(evt.target.value);\n };\n\n if (! pageId ) {\n return (\n \n Redirecting to default page\n
\n );\n }\n\n const renderNewTitleInput = () => {\n const newTitleIsValid = (title) => {\n const exists = emailTemplates.some(\n (emailTemplate) => emailTemplate.data.title === title\n );\n return (!exists && title.length > 0);\n };\n\n let newHeading = 'New Report';\n if (showNewTitleDialog === NewTitleDialogState.SAVE_AS) {\n newHeading = 'Save As…';\n }\n else if (showNewTitleDialog === NewTitleDialogState.DUPLICATE) {\n newHeading = 'Duplicate Report';\n }\n\n return (\n \n {\n if (showNewTitleDialog === NewTitleDialogState.NEW) {\n submitNewReport(newTitleValue, DEFAULT_NEW_PAGE_STF);\n }\n else {\n submitNewReport(newTitleValue, selectPageStf(pageState));\n }\n setShowNewTitleDialog(NewTitleDialogState.HIDE);\n setNewTitleValue('');\n }}\n onReset={() => {\n setShowNewTitleDialog(NewTitleDialogState.HIDE);\n setNewTitleValue('');\n }}\n allowSubmit={newTitleIsValid(newTitleValue)}\n allowCancel={true}\n >\n {\n setNewTitleValue(event.target.value);\n }}\n />\n \n \n );\n };\n\n const renderPage = () => {\n if (requests.getEmailTemplates.status === 'PENDING') {\n return ;\n }\n if (! savedPageData) {\n return ;\n }\n return (\n \n Email Report Templates\n \n Use this page to structure and organize email templates.\n Templates are shown with mock data.\n \n Each email template can include any number of sections. Each section can\n hold one widget row. A widget row contains either three KPI widgets, two\n KPI Group widgets, or one Table widget.
\n\n Email template widgets are very simple so they can function well across a\n broad range of email clients, as email clients are much less standardized\n than web browsers.
\n\n Click anywhere within a section to select it. A floating toolbar under\n the section enables you to add a new section, as well as move or delete the\n selected section.
\n \n \n \n {showDeleteDialog ? setShowDeleteDialog(false)}\n >\n {translator('report_templates.keep_report')}\n ,\n {\n onDeleteReport();\n setShowDeleteDialog(false);\n }}\n >\n {translator('report_templates.delete_report')}\n \n ]}>\n \n {translator('report_templates.delete_report_msg')}\n
\n : null}\n {(showNewTitleDialog !== NewTitleDialogState.HIDE) && renderNewTitleInput()}\n \n \n \n );\n };\n\n return (\n \n {navigationPrevention}\n \n \n )}\n text={'Reports'}\n buttonStyle={buttonStyle}\n >\n {setShowNewTitleDialog(NewTitleDialogState.NEW);}}\n disabled={false}\n icon={()}\n text={'New Report...'}\n />\n setShowDeleteDialog(true)}\n disabled={! canModifyCurrentPage}\n icon={()}\n text={'Delete'}\n />\n {setShowNewTitleDialog(NewTitleDialogState.DUPLICATE);}}\n disabled={false}\n icon={()}\n text={'Duplicate...'}\n />\n \n )}\n text={'Save'}\n buttonStyle={buttonStyle}\n >\n )}\n text={'Save'}\n />\n {setShowNewTitleDialog(NewTitleDialogState.SAVE_AS);}}\n disabled={false}\n icon={()}\n text={'Save As…'}\n />\n \n \n \n \n \n \n \n \n {viewDisplayName}\n \n \n \n \n \n {renderPage()}\n \n );\n}\n\nEmailTemplatesPage.propTypes = {\n actions: PropTypes.shape({\n getEmailTemplates: PropTypes.func.isRequired,\n postEmailTemplate: PropTypes.func.isRequired,\n patchEmailTemplate: PropTypes.func.isRequired,\n deleteEmailTemplate: PropTypes.func.isRequired,\n getMetricThresholds: PropTypes.func.isRequired,\n }).isRequired,\n requests: PropTypes.object.isRequired,\n emailTemplates: PropTypes.arrayOf(\n PropTypes.shape({\n list: PropTypes.arrayOf(PropTypes.number),\n data: PropTypes.shape({\n built_in: PropTypes.bool.isRequired,\n content: PropTypes.object.isRequired,\n id: PropTypes.number.isRequired,\n title: PropTypes.string.isRequired,\n }),\n resources: PropTypes.array\n })\n ).isRequired,\n metricThresholds: PropTypes.any, // [TODO] Complete this proptype\n};\n\nconst mapStateToProps = state => {\n const {\n emailTemplates,\n metricThresholds,\n } = state;\n\n return {\n emailTemplates: getEmailTemplatesList(emailTemplates),\n metricThresholds: selectMetricThresholdsByColumnName(metricThresholds),\n requests: {\n getEmailTemplates: emailTemplates.requests.getEmailTemplates,\n }\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n actions: bindActionCreators({\n getEmailTemplates,\n postEmailTemplate,\n patchEmailTemplate,\n deleteEmailTemplate,\n getMetricThresholds,\n }, dispatch)\n };\n};\n\n// connect the component to Redux\nexport default withRouter(connect(\n mapStateToProps,\n mapDispatchToProps\n)(EmailTemplatesPage));\n","\n import API from \"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./MetricThresholds.scss\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./MetricThresholds.scss\";\n export default content && content.locals ? content.locals : undefined;\n","\nimport React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { useTranslator } from 'Common/hooks/useTranslation';\n\nimport Table from 'Components/table/Table';\nimport TableHeader from 'Components/table/TableHeader';\nimport TableHeaderRow from 'Components/table/TableHeaderRow';\nimport TableHeaderColumn from 'Components/table/TableHeaderColumn';\nimport TableBody from 'Components/table/TableBody';\nimport TableRow from 'Components/table/TableRow';\nimport TableColumn from 'Components/table/TableColumn';\nimport NumberField from 'Common/components/NumberField';\nimport './MetricThresholds.scss';\n\nconst StyledDiv = styled.div`\n min-width: 225px;\n`;\n\nconst RangeDiv = styled.div`\n min-width: 125px;\n display: flex;\n gap: 6px;\n align-items: center;\n`;\n\nfunction convertToIntPercent(val) {\n // round to the nearest integer to avoid 54.999999999 and other floating point artifacts\n return Math.round(val * 100.0);\n}\n\nexport default function MetricThresholdsTable(props) {\n const {\n errorList,\n metricThresholds,\n onChange,\n } = props;\n\n const translator = useTranslator();\n\n const sortFunc = (lhs, rhs) => {\n return translator(`term.${lhs.name}.name`).localeCompare(translator(`term.${rhs.name}.name`));\n };\n\n const renderRows = () => {\n return metricThresholds.sort(sortFunc).map((metricThreshold, idx) => {\n const errors = errorList[idx];\n const {\n name,\n directionality,\n ranges,\n } = metricThreshold;\n\n const directionInfo = directionality === 'higher_better' ? {\n crit: 'Below',\n good: 'above',\n highSide: 'max',\n lowSide: 'min',\n adjust: -0.1,\n } : {\n crit: 'Above',\n good: 'below',\n highSide: 'min',\n lowSide: 'max',\n adjust: 0.1,\n };\n\n const rangeMap = ranges.reduce((acc, field) => {\n acc[field.name] = field;\n return acc;\n }, {});\n\n const warningError = errors.includes('warning') ? 'Invalid Range' : undefined;\n const cautionError = errors.includes('caution') ? 'Invalid Range' : undefined;\n\n return (\n \n \n \n {translator(`term.${name}.name`)} {metricThreshold.error}\n \n \n \n \n {translator(directionality)}\n \n \n \n \n {directionInfo.crit} {convertToIntPercent(rangeMap.critical[directionInfo.highSide])}%\n \n \n \n \n \n onChange(name, 'warning', 'critical', directionInfo.lowSide, directionInfo.highSide, evt.target.value)}\n percent={true}\n type=\"number\"\n value={rangeMap.warning[directionInfo.lowSide]}\n />\n \n \n to {convertToIntPercent(rangeMap.warning[directionInfo.highSide]) + directionInfo.adjust}%\n \n \n \n \n \n \n onChange(name, 'caution', 'warning', directionInfo.lowSide, directionInfo.highSide, evt.target.value)}\n percent={true}\n error={warningError}\n type=\"number\"\n value={rangeMap.caution[directionInfo.lowSide]}\n />\n \n \n to {convertToIntPercent(rangeMap.caution[directionInfo.highSide]) + directionInfo.adjust}%\n \n \n \n \n \n \n onChange(name, 'good', 'caution', directionInfo.lowSide, directionInfo.highSide, evt.target.value)}\n percent={true}\n error={cautionError}\n type=\"number\"\n value={rangeMap.good[directionInfo.lowSide]}\n />\n \n \n and {directionInfo.good}\n \n \n \n \n );\n });\n };\n\n return (\n \n \n \n \n Value\n \n \n Directionality\n \n \n Critical\n \n \n Warning\n \n \n Caution\n \n \n Good\n \n \n \n \n {renderRows()}\n \n
\n );\n}\n\nMetricThresholdsTable.propTypes = {\n errorList: PropTypes.array.isRequired,\n metricThresholds: PropTypes.array.isRequired,\n onChange: PropTypes.func.isRequired,\n};\n","\nimport React, {\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport MetricThresholdsTable from './MetricThresholdsTable';\nimport Form from 'Components/form/Form';\nimport * as RequestStatus from 'Common/data/RequestStatus';\n\nfunction useErrorList(thresholds) {\n return useMemo(() => {\n let hasError = false;\n const errorList = thresholds.map((thresh) => {\n const rangeMap = thresh.ranges.reduce((acc, field) => {\n acc[field.name] = field;\n return acc;\n }, {});\n\n let error = [];\n if (thresh.directionality === 'higher_better') {\n if (rangeMap.critical.max >= rangeMap.warning.max) {\n hasError = true;\n error.push('warning');\n }\n if (rangeMap.warning.max >= rangeMap.caution.max) {\n hasError = true;\n error.push('caution');\n }\n if (rangeMap.caution.max >= rangeMap.good.max) {\n hasError = true;\n error.push('good');\n }\n }\n else {\n if (rangeMap.critical.min <= rangeMap.warning.min) {\n hasError = true;\n error.push('warning');\n }\n else if (rangeMap.warning.min <= rangeMap.caution.min) {\n hasError = true;\n error.push('caution');\n }\n else if (rangeMap.caution.min <= rangeMap.good.min) {\n hasError = true;\n error.push('good');\n }\n }\n return error;\n });\n return {\n hasError,\n errorList,\n };\n }, [thresholds]);\n}\n\nexport default function MetricThresholdsForm(props) {\n const {\n metricThresholds,\n onSubmit,\n requests,\n } = props;\n\n const [ modifiedThresholds, setModifiedThresholds ] = useState(metricThresholds);\n const [ isDirty, setIsDirty ] = useState(false);\n\n const [ lastPatchStatus, setLastPatchStatus ] = useState(requests?.putMetricThresholds?.status);\n\n useEffect(() => {\n const nextPatchStatus = requests?.putMetricThresholds?.status;\n\n if (lastPatchStatus === RequestStatus.PENDING &&\n nextPatchStatus === RequestStatus.SUCCESS\n ) {\n setIsDirty(false);\n }\n\n if (lastPatchStatus !== nextPatchStatus) {\n setLastPatchStatus(nextPatchStatus);\n }\n }, [lastPatchStatus, requests?.putMetricThresholds?.status]);\n\n const {\n errorList,\n hasError,\n } = useErrorList(modifiedThresholds);\n\n // name of the metric being updated\n // rangeName critical, warning, caution, good\n // rangeSide (updating the min or the max)\n // value the string percentage to update\n const onChange = (name, rangeName, adjacentRange, rangeSide, adjacentRangeSide, value) => {\n const newThresholds = modifiedThresholds.map((thresh) => {\n if (name === thresh.name) {\n const newRange = thresh.ranges.map((range) => {\n if (range.name === rangeName) {\n return {\n ...range,\n [rangeSide]: value,\n };\n }\n if (range.name === adjacentRange) {\n return {\n ...range,\n [adjacentRangeSide]: value,\n };\n }\n return range;\n });\n return {\n ...thresh,\n ranges: newRange,\n };\n }\n return thresh;\n });\n setIsDirty(true);\n setModifiedThresholds(newThresholds);\n };\n\n const isLoading = requests.putMetricThresholds.status === RequestStatus.PENDING;\n\n const allowSubmit = !isLoading && isDirty && !hasError;\n const allowCancel = !isLoading && isDirty;\n\n const handleReset = () => {\n setModifiedThresholds(metricThresholds);\n setIsDirty(false);\n };\n\n const handleSubmit = (a) => {\n onSubmit(modifiedThresholds);\n };\n\n return (\n \n \n \n \n \n );\n}\n\nMetricThresholdsForm.propTypes = {\n metricThresholds: PropTypes.array.isRequired,\n onSubmit: PropTypes.func.isRequired,\n requests: PropTypes.object.isRequired,\n};\n","\nimport React, {\n useEffect,\n} from 'react';\n\nimport { connect } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport { bindActionCreators } from 'redux';\nimport { selectMetricThresholds } from 'Redux/reducers/metricThresholds';\nimport {\n getMetricThresholds,\n putMetricThresholds,\n} from 'Redux/actions';\nimport Page from 'Components/page/Page';\nimport PageContent from 'Components/page/PageContentWide';\nimport ConfigPageTitle from 'Components/page/ConfigPageTitle';\nimport MetricThresholdsionForm from './MetricThresholdsForm';\nimport RequestLoadingWrapper from 'Components/loading-indicator/RequestLoadingWrapper';\n\nfunction MetricThresholdsPage(props) {\n\n const {\n actions,\n metricThresholds,\n requests,\n } = props;\n\n useEffect(() => {\n actions.getMetricThresholds();\n }, [actions]);\n\n const handleSubmit = (evt) => {\n actions.putMetricThresholds({\n metrics: evt\n });\n };\n\n return (\n \n Metric Thresholds\n \n (\n \n )}\n />\n \n \n );\n}\n\nMetricThresholdsPage.propTypes = {\n actions: PropTypes.shape({\n getMetricThresholds: PropTypes.func.isRequired,\n putMetricThresholds: PropTypes.func.isRequired,\n }).isRequired,\n\n metricThresholds: PropTypes.array,\n requests: PropTypes.shape({\n getMetricThresholds: PropTypes.object.isRequired,\n putMetricThresholds: PropTypes.object.isRequired,\n }),\n};\n\nconst mapStateToProps = (state, ownProps) => {\n const {\n metricThresholds,\n } = state;\n return {\n metricThresholds: selectMetricThresholds(metricThresholds),\n requests: (metricThresholds?.requests) || null,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n actions: bindActionCreators({\n getMetricThresholds,\n putMetricThresholds,\n }, dispatch)\n };\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(MetricThresholdsPage);\n","import { sendGetRequest } from 'Http/request';\nimport { getResources } from 'Common/util/ResourceCollection';\n\nexport function getAlertSubscriptions() {\n return getResources({\n resourceType: 'alertSubscriptions',\n requestId: 'getAlertSubscriptions',\n sendRequest: async () => {\n return sendGetRequest('/api/v1/accounts/user/alert-subscriptions');\n },\n });\n}\n\nexport default getAlertSubscriptions;\n","import { sendPatchRequest } from 'Http/request';\nimport { patchResources } from 'Common/util/ResourceCollection';\n\nfunction generateAlertSubscriptionsPatchSection(initialData, modifiedData) {\n const generateMap = ids => ids.reduce((map, id) => {\n map[id] = true;\n return map;\n }, {});\n\n const initialDataMap = generateMap(initialData);\n const modifiedDataMap = generateMap(modifiedData);\n\n let patch = { add: [], remove: [] };\n\n // IDs in initial but not modified have been removed\n Object.keys(initialDataMap).forEach((id) => {\n if (!modifiedDataMap[id]) {\n patch.remove.push(Number(id));\n }\n });\n\n // IDs in modified but not initial have been added\n Object.keys(modifiedDataMap).forEach((id) => {\n if (!initialDataMap[id]) {\n patch.add.push(Number(id));\n }\n });\n\n return patch;\n}\n\nexport function generateAlertSubscriptionsPatch(initialData, modifiedData) {\n const patch = {\n add: {},\n remove: {},\n };\n\n Object.keys(initialData).forEach((alertType) => {\n const subPatch = generateAlertSubscriptionsPatchSection(initialData[alertType], modifiedData[alertType]);\n patch.add[alertType] = subPatch.add;\n patch.remove[alertType] = subPatch.remove;\n });\n\n return patch;\n}\n\nexport function patchAlertSubscriptions(data) {\n return patchResources({\n resourceType: 'alertSubscriptions',\n requestId: 'patchAlertSubscriptions',\n requestData: data,\n sendRequest: async () => {\n return sendPatchRequest('/api/v1/accounts/user/alert-subscriptions', {\n body: { ...data },\n });\n },\n });\n}\n","import { combineReducers } from 'redux';\nimport actionFilter from 'Common/util/reducerUtils/actionFilter';\nimport actionMap from 'Common/util/reducerUtils/actionMap';\n\nimport { requestReducer } from 'Common/util/ResourceCollection';\nimport { REQUEST_PENDING, REQUEST_SUCCESS, REQUEST_FAILURE } from 'Common/util/ResourceCollection/actions';\n\nconst initialListState = {\n metric: [],\n process_state_duration: [],\n process_state_target_time: [],\n};\n\nconst dataReducer = (state = initialListState, action) => {\n const {\n type,\n requestMethod,\n payload,\n } = action;\n\n if (requestMethod === 'GET') {\n switch (type) {\n case REQUEST_PENDING:\n return initialListState;\n case REQUEST_FAILURE:\n return initialListState;\n case REQUEST_SUCCESS: {\n return {\n metric: payload.metric,\n process_state_duration: payload.process_state_duration,\n process_state_target_time: payload.process_state_target_time,\n };\n }\n default:\n return state;\n }\n }\n else if (requestMethod === 'PATCH') {\n switch (type) {\n case REQUEST_SUCCESS: {\n return {\n metric: payload.metric,\n process_state_duration: payload.process_state_duration,\n process_state_target_time: payload.process_state_target_time,\n };\n }\n default:\n return state;\n }\n }\n else {\n return state;\n }\n};\n\nconst alertSubscriptionsReducer = actionFilter(\n (action) => action?.resourceType === 'alertSubscriptions',\n combineReducers({\n data: dataReducer,\n requests: actionMap(\n (action) => action?.requestId,\n {\n getAlertSubscriptions: requestReducer,\n patchAlertSubscriptions: requestReducer,\n }\n ),\n })\n);\n\nexport default alertSubscriptionsReducer;\n\nexport function selectAlertSubscriptions(state) {\n return state.data;\n}\n\nexport function selectAlertSubscriptionsRequest(state, requestId) {\n const request = state.requests[requestId];\n\n if (!request) {\n throw new Error(`Unknown alert subscriptions request with ID \"${requestId}\"`);\n }\n\n return request;\n}\n","import { combineReducers } from 'redux';\nimport actionFilter from 'Common/util/reducerUtils/actionFilter';\nimport actionMap from 'Common/util/reducerUtils/actionMap';\n\nimport { requestReducer } from 'Common/util/ResourceCollection';\nimport { REQUEST_PENDING, REQUEST_FAILURE, REQUEST_SUCCESS } from 'Common/util/ResourceCollection/actions';\n\nfunction multiCompare(compareResults) {\n for (let i = 0; i < compareResults.length; i++) {\n if (compareResults[i] !== 0) {\n return compareResults[i];\n }\n }\n\n return 0;\n}\n\nconst sortAlerts = alertType => (alertA, alertB) => {\n switch (alertType) {\n case 'metric': {\n const comparisonOrder = ['less_than', 'greater_than'];\n\n return multiCompare([\n alertA.metric.localeCompare(alertB.metric),\n comparisonOrder.indexOf(alertA.comparison) - comparisonOrder.indexOf(alertB.comparison),\n alertA.threshold - alertB.threshold\n ]);\n }\n case 'process_state_duration': {\n return multiCompare([\n alertA.process_state.localeCompare(alertB.process_state),\n alertA.threshold - alertB.threshold\n ]);\n }\n case 'process_state_target_time': {\n const comparisonOrder = ['before_target', 'over_target'];\n\n return multiCompare([\n comparisonOrder.indexOf(alertA.comparison) - comparisonOrder.indexOf(alertB.comparison),\n alertA.threshold - alertB.threshold\n ]);\n }\n default:\n throw new Error(`Unable to sort unkown alert type \"${alertType}\"`);\n }\n};\n\nconst initialDataState = {\n metric: [],\n process_state_duration: [],\n process_state_target_time: [],\n};\n\nconst dataReducer = (state = initialDataState, action) => {\n const {\n type,\n requestMethod,\n payload,\n } = action;\n\n if (requestMethod === 'GET') {\n switch (type) {\n case REQUEST_PENDING:\n return initialDataState;\n case REQUEST_FAILURE:\n return initialDataState;\n case REQUEST_SUCCESS: {\n const sorted = {};\n\n Object.keys(payload).forEach((alertType) => {\n sorted[alertType] = [ ...(payload[alertType]) ].sort(sortAlerts(alertType));\n });\n\n return sorted;\n }\n default:\n return state;\n }\n }\n else if (requestMethod === 'PATCH') {\n switch (type) {\n case REQUEST_SUCCESS: {\n const sorted = {};\n\n Object.keys(payload).forEach((alertType) => {\n sorted[alertType] = [ ...(payload[alertType]) ].sort(sortAlerts(alertType));\n });\n\n return sorted;\n }\n default:\n return state;\n }\n }\n else {\n return state;\n }\n};\n\nconst alertsReducer = actionFilter(\n (action) => action?.resourceType === 'alerts',\n combineReducers({\n data: dataReducer,\n requests: actionMap(\n (action) => action?.requestId,\n {\n getAlerts: requestReducer,\n patchAlerts: requestReducer,\n }\n ),\n })\n);\n\nexport default alertsReducer;\n\nexport function selectAlerts(state) {\n return state.data;\n}\n\nexport function selectAlertsRequest(state, requestId) {\n const request = state.requests[requestId];\n\n if (!request) {\n throw new Error(`Unknown alerts request with requestId \"${requestId}\"`);\n }\n\n return request;\n}\n","import { combineReducers } from 'redux';\nimport actionFilter from 'Common/util/reducerUtils/actionFilter';\nimport actionMap from 'Common/util/reducerUtils/actionMap';\n\nimport { requestReducer } from 'Common/util/ResourceCollection';\nimport { REQUEST_PENDING, REQUEST_FAILURE, REQUEST_SUCCESS } from 'Common/util/ResourceCollection/actions';\n\nconst initialDataState = {};\n\nconst dataReducer = (state = initialDataState, action) => {\n const {\n type,\n requestMethod,\n payload,\n } = action;\n\n if (requestMethod === 'GET') {\n switch (type) {\n case REQUEST_PENDING:\n return initialDataState;\n case REQUEST_FAILURE:\n return initialDataState;\n case REQUEST_SUCCESS: {\n return payload;\n }\n default:\n return state;\n }\n }\n else if (requestMethod === 'PATCH') {\n switch (type) {\n case REQUEST_SUCCESS: {\n return payload;\n }\n default:\n return state;\n }\n }\n else {\n return state;\n }\n};\n\nconst alertWindowReducer = actionFilter(\n (action) => action?.resourceType === 'alertWindow',\n combineReducers({\n data: dataReducer,\n requests: actionMap(\n (action) => action?.requestId,\n {\n getAlertWindow: requestReducer,\n patchAlertWindow: requestReducer,\n }\n ),\n })\n);\n\nexport default alertWindowReducer;\n\nexport function selectAlertWindow(state) {\n return state.data;\n}\n\nexport function selectAlertWindowRequest(state, requestId) {\n const request = state.requests[requestId];\n\n if (!request) {\n throw new Error(`Unknown alert window request with ID \"${requestId}\"`);\n }\n\n return request;\n}\n","import { combineReducers } from 'redux';\nimport actionFilter from 'Common/util/reducerUtils/actionFilter';\nimport actionMap from 'Common/util/reducerUtils/actionMap';\n\nimport { requestReducer } from 'Common/util/ResourceCollection';\nimport { REQUEST_FAILURE, REQUEST_PENDING, REQUEST_SUCCESS } from 'Common/util/ResourceCollection/actions';\n\nconst initialListState = [];\n\nconst listReducer = (state = initialListState, action) => {\n const {\n type,\n requestMethod,\n payload,\n } = action;\n\n if (requestMethod === 'GET') {\n switch (type) {\n case REQUEST_PENDING:\n return initialListState;\n case REQUEST_FAILURE:\n return initialListState;\n case REQUEST_SUCCESS: {\n return [ ...payload.subscribed ];\n }\n default:\n return state;\n }\n }\n else if (requestMethod === 'PATCH') {\n switch (type) {\n case REQUEST_SUCCESS: {\n return [ ...payload.subscribed ];\n }\n default:\n return state;\n }\n }\n else {\n return state;\n }\n\n};\n\nconst deviceSubscriptionsReducer = actionFilter(\n (action) => action?.resourceType === 'deviceSubscriptions',\n combineReducers({\n list: listReducer,\n requests: actionMap(\n (action) => action?.requestId,\n {\n getDeviceSubscriptions: requestReducer,\n patchDeviceSubscriptions: requestReducer,\n }\n ),\n })\n);\n\nexport default deviceSubscriptionsReducer;\n\nexport function selectDeviceSubscriptions(state) {\n return state.list;\n}\n\nexport function selectDeviceSubscriptionsRequest(state, requestId) {\n const request = state.requests[requestId];\n\n if (!request) {\n throw new Error(`Unknown device subscriptions request with ID \"${requestId}\"`);\n }\n\n return request;\n}\n","import styled from 'styled-components';\nimport { Body1 } from 'Components/typography/typography';\n\nconst SelectGroupLabel = styled(Body1)`\n display: block;\n padding: 6px;\n font-weight: bold;\n color: ${props => props.theme.colors.palette.blue.awesome};\n`;\n\nexport default SelectGroupLabel;\n","import PropTypes from 'prop-types';\nimport { getMetricsMap } from 'System/metrics';\n\nconst metricsMap = getMetricsMap();\n\nconst comparisonMap = {\n greater_than: '>',\n less_than: '<',\n};\n\nexport default function MetricAlertText(props) {\n const { metric, comparison, threshold } = props;\n\n return (\n `${metricsMap[metric].name} ${comparisonMap[comparison]} ${Math.round(threshold * 100.0)}%`\n );\n}\n\nMetricAlertText.propTypes = {\n metric: PropTypes.oneOf(Object.keys(metricsMap)).isRequired,\n comparison: PropTypes.oneOf(Object.keys(comparisonMap)).isRequired,\n threshold: PropTypes.number.isRequired,\n};\n","import PropTypes from 'prop-types';\nimport { getProcessStatesMap } from 'System/processStates';\n\nconst processStatesMap = getProcessStatesMap();\n\nexport default function ProcessStateDurationAlertText(props) {\n const { process_state, threshold } = props;\n\n const thresholdMin = Math.floor(threshold / 60);\n\n return (\n `${processStatesMap[process_state].name} > ${thresholdMin} min.`\n );\n}\n\nProcessStateDurationAlertText.propTypes = {\n process_state: PropTypes.oneOf(Object.keys(processStatesMap)).isRequired,\n threshold: PropTypes.number.isRequired,\n};\n","import PropTypes from 'prop-types';\nimport { getProcessStatesMap } from 'System/processStates';\n\nconst processStatesMap = getProcessStatesMap();\n\nconst comparisonMap = {\n over_target: 'Over Target',\n before_target: 'Before Target',\n};\n\nexport default function ProcessStateTargetTimeAlertText(props) {\n const { process_state, comparison, threshold } = props;\n\n const thresholdMin = Math.floor(threshold / 60);\n\n return (\n `${processStatesMap[process_state].name} ${thresholdMin} min. ${comparisonMap[comparison]}`\n );\n}\n\nProcessStateTargetTimeAlertText.propTypes = {\n process_state: PropTypes.oneOf(Object.keys(processStatesMap)).isRequired,\n comparison: PropTypes.oneOf(Object.keys(comparisonMap)).isRequired,\n threshold: PropTypes.number.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport every from 'lodash/every';\nimport SelectGroup from 'Components/select/SelectGroup';\nimport SelectGroupLabel from 'Components/select/SelectGroupLabel';\nimport SelectOption from 'Components/select/SelectOption';\nimport SelectOptionContent from 'Components/select/SelectOptionContent';\nimport SelectInput from 'Components/select/SelectInput';\nimport FormElement from 'Components/form-element/FormElement';\nimport MetricAlertText from './MetricAlertText';\nimport ProcessStateDurationAlertText from './ProcessStateDurationAlertText';\nimport ProcessStateTargetTimeAlertText from './ProcessStateTargetTimeAlertText';\n\nconst StyledSelectInput = styled(SelectInput)`\n min-width: 225px;\n`;\n\nexport default class AlertSubscriptionsEditor extends React.Component {\n constructor(props) {\n super(props);\n }\n\n _handleChange = (event) => {\n const value = event.target.value;\n\n let subscriptions = {\n metric: [],\n process_state_duration: [],\n process_state_target_time: [],\n };\n\n value.forEach((selectedValue) => {\n const [ alertType, alertId ] = selectedValue.split('/');\n subscriptions[alertType].push(Number(alertId));\n });\n\n this.props.onChange({\n target: {\n name: this.props.name,\n value: subscriptions,\n },\n });\n };\n\n render() {\n const { name, alerts, subscriptions, allowEdit } = this.props;\n\n // Construct the value\n const value = [];\n Object.keys(subscriptions).forEach((alertType) => {\n subscriptions[alertType].forEach((alertId) => {\n value.push(`${alertType}/${alertId}`);\n });\n });\n\n const noAlerts = every(alerts, list => list.length === 0);\n const disabled = !allowEdit || noAlerts;\n\n return (\n \n \n {`Select Alerts (${value.length})`}\n \n )}\n onChange={this._handleChange}\n optionsWidth={350}\n maxOptionsHeight={500}\n >\n {Object.keys(alerts).map((alertType) => {\n let title;\n let AlertText = 'div';\n\n switch (alertType) {\n case 'metric':\n title = 'Metric';\n AlertText = MetricAlertText;\n break;\n case 'process_state_duration':\n title = 'Production State Time';\n AlertText = ProcessStateDurationAlertText;\n break;\n case 'process_state_target_time':\n title = 'Production State Target';\n AlertText = ProcessStateTargetTimeAlertText;\n break;\n default:\n throw new Error(`Unknown alert type \"${alertType}\"`);\n }\n\n const alertList = alerts[alertType];\n\n // Don't show empty groups\n if (alertList.length === 0) {\n return null;\n }\n\n return (\n {title}}\n >\n {alertList.map((alert) => {\n const alertId = alert.id;\n\n return (\n \n \n \n \n \n );\n })}\n \n );\n })}\n \n \n );\n }\n}\n\nconst AlertListPropType = PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number.isRequired,\n }).isRequired,\n).isRequired;\n\nAlertSubscriptionsEditor.propTypes = {\n name: PropTypes.string,\n alerts: PropTypes.shape({\n metric: AlertListPropType,\n process_state_duration: AlertListPropType,\n process_state_target_time: AlertListPropType,\n }).isRequired,\n subscriptions: PropTypes.shape({\n metric: PropTypes.arrayOf(PropTypes.number).isRequired,\n process_state_duration: PropTypes.arrayOf(PropTypes.number).isRequired,\n process_state_target_time: PropTypes.arrayOf(PropTypes.number).isRequired,\n }),\n onChange: PropTypes.func.isRequired,\n allowEdit: PropTypes.bool.isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport AlertSubscriptionsEditor from 'Components/pages/alerts-subscribe/AlertSubscriptionsEditor';\nimport Form from 'Components/form/Form';\nimport * as RequestStatus from 'Common/data/RequestStatus';\n\nexport default class AlertSubscriptionsForm extends React.Component {\n static propTypes = {\n name: PropTypes.string,\n alerts: PropTypes.object.isRequired,\n data: PropTypes.object.isRequired,\n requests: PropTypes.object.isRequired,\n onSubmit: PropTypes.func.isRequired,\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n modifiedData: props.data,\n lastPatchStatus: props?.requests?.patchAlertSubscriptions?.status,\n };\n }\n\n static getDerivedStateFromProps(props, state) {\n const lastPatchStatus = state.lastPatchStatus;\n const nextPatchStatus = props?.requests?.patchAlertSubscriptions?.status;\n\n if (lastPatchStatus !== nextPatchStatus) {\n let nextModifiedData = state.modifiedData;\n\n // Watch for when patchAlertSubscriptions changes from PENDING to SUCCESS and\n // reset the data\n if (lastPatchStatus === RequestStatus.PENDING &&\n nextPatchStatus === RequestStatus.SUCCESS\n ) {\n nextModifiedData = props.data;\n }\n\n return {\n modifiedData: nextModifiedData,\n lastPatchStatus: nextPatchStatus,\n };\n }\n\n return null; // No changes\n }\n\n _handleChange = (event) => {\n this.setState({\n modifiedData: event.target.value,\n });\n };\n\n _handleReset = () => {\n this.setState({\n modifiedData: this.props.data,\n });\n };\n\n _handleSubmit = () => {\n this.props.onSubmit({\n target: {\n name: this.props.name,\n value: this.state.modifiedData,\n },\n });\n };\n\n render() {\n const { alerts, data: initialData, requests } = this.props;\n const { modifiedData } = this.state;\n\n const hasChanges = modifiedData !== initialData;\n const isLoading = requests.patchAlertSubscriptions.status === RequestStatus.PENDING;\n\n const allowEdit = !isLoading;\n const allowSubmit = !isLoading && hasChanges;\n const allowCancel = !isLoading && hasChanges;\n\n return (\n \n \n \n );\n }\n}\n","import moment from 'moment';\n\nconst acceptedTimeFormats = [\n // locale time format\n 'LT',\n // AM/PM with space\n 'h:mm a',\n 'h:mm:ss a',\n // AM/PM no space\n 'h:mma',\n 'h:mm:ssa',\n // 24 hour time\n 'H:mm',\n 'H:mm:ss'\n];\n\nexport function parseTime(timeString, { useStrictParsing = true } = {}) {\n let parsedTime;\n\n timeString = String(timeString).trim();\n\n acceptedTimeFormats.some((timeFormat) => {\n parsedTime = moment.utc(timeString, timeFormat, useStrictParsing);\n return parsedTime.isValid();\n });\n\n return parsedTime;\n}\n\nexport function format24HourTime(time) {\n if (!moment.isMoment(time)) {\n // Just parse it as a string\n time = parseTime(time);\n }\n\n return time.isValid() ? time.format('HH:mm') : '';\n}\n\nexport function formatLocaleTime(time) {\n if (!moment.isMoment(time)) {\n // Just parse it as a string\n time = parseTime(time);\n }\n\n return time.isValid() ? time.format('LT') : '';\n}\n","import { parseTime } from 'Components/util/timeUtils';\n\nexport default function validate(value) {\n let error;\n\n if (!parseTime(String(value)).isValid()) {\n error = 'Must provide a valid time entry';\n }\n\n return error;\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport FormElement from 'Components/form-element/FormElement';\nimport FormElementLabel from 'Components/form-element/FormElementLabel';\nimport SelectInput from 'Components/select/SelectInput';\nimport SelectOption from 'Components/select/SelectOption';\nimport SelectOptionContent from 'Components/select/SelectOptionContent';\n\nconst StyledSelectInput = styled(SelectInput)`\n min-width: 225px;\n`;\n\nfunction DndSelect(props) {\n const {\n id,\n label,\n name,\n value,\n error,\n onChange,\n ...otherProps\n } = props;\n\n return (\n \n {label}\n \n \n \n Only Send Alerts During Receive Window\n \n \n \n \n Send Alerts 24/7\n \n \n \n \n Never\n \n \n \n \n );\n}\n\nDndSelect.propTypes = {\n id: PropTypes.string,\n label: PropTypes.string,\n name: PropTypes.string,\n value: PropTypes.string,\n error: PropTypes.bool,\n onChange: PropTypes.func,\n};\n\nexport default DndSelect;\n","import React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport TextInputField from 'Components/text-input/TextInputField';\nimport { parseTime, format24HourTime, formatLocaleTime } from 'Components/util/timeUtils';\n\n// Let's avoid having to do this more than once\nconst timeInputSupported = (() => {\n let input = document.createElement('input');\n\n const value = 'abcdefghijklmnop';\n input.setAttribute('type', 'time');\n input.setAttribute('value', value);\n\n // the time input does not allow for non-time input, so the value\n // it reports should not equal the value we gave it. If it fell\n // back to a plain 'ol text input they will be equal and this\n // check will fail.\n //\n return (input.value !== value);\n})();\n\nconst StyledInput = styled(TextInputField)`\n /* These arrows in Chrome mess with the height of the input field.\n The arrows do not exist in any other browser anyway, so it should\n be fine to remove them entirely. See the chromium bug for this\n here: https://bugs.chromium.org/p/chromium/issues/detail?id=417606\n */\n &::-webkit-inner-spin-button {\n display: none;\n }\n`;\n\nexport default class TimeInput extends React.Component {\n static defaultProps = {\n onChange: () => { },\n onBlur: () => { },\n };\n\n static propTypes = {\n name: PropTypes.string.isRequired,\n value: PropTypes.string,\n onChange: PropTypes.func,\n onBlur: PropTypes.func,\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n lastPropValue: undefined, // initialized in getDerivedStateFromProps\n internalValue: '',\n };\n }\n\n static getDerivedStateFromProps(props, state) {\n const derived = {\n lastPropValue: props.value,\n };\n\n // Only update the internal value if the prop changes and the time\n // value from the props is different from what the user has entered\n\n if (state.lastPropValue !== props.value) {\n const parsedValue = parseTime(props.value);\n\n if (parsedValue.isValid()) {\n const parsedInternalValue = parseTime(state.internalValue);\n const formattedInternalValue = parsedInternalValue.isValid() ? format24HourTime(parsedInternalValue) : '';\n\n const formattedValue = format24HourTime(parsedValue);\n\n // Check if the prop is different from the internal\n if (formattedValue !== formattedInternalValue) {\n derived.internalValue = formatLocaleTime(parsedValue);\n }\n }\n }\n\n return derived;\n }\n\n _handleChange = (event) => {\n const value = event.target.value;\n\n this.setState({\n internalValue: value,\n });\n\n let normalizedValue = '';\n\n const parsedValue = parseTime(value);\n\n if (parsedValue.isValid()) {\n normalizedValue = format24HourTime(parsedValue);\n }\n\n // Only fire change if the normalized value is actually changing\n if (normalizedValue !== this.props.value) {\n return this.props.onChange({\n target: {\n name: this.props.name,\n value: normalizedValue,\n },\n });\n }\n };\n\n _handleBlur = (event) => {\n let normalizedValue = '';\n const parsedValue = parseTime(this.state.internalValue);\n\n // When blurring, set the internal value to the cleanly formatted time.\n // We only do this if the time is valid, so there is no need to fire\n // an `onChange`, because we aren't actually changing the time.\n if (parsedValue.isValid()) {\n normalizedValue = format24HourTime(parsedValue);\n this.setState({\n internalValue: formatLocaleTime(parsedValue),\n });\n }\n\n event.target = {\n name: this.props.name,\n value: normalizedValue,\n };\n\n this.props.onBlur(event);\n };\n\n render() {\n const { internalValue } = this.state;\n const { value, name, onChange, onBlur, ...otherProps } = this.props;\n\n let stringValue = '';\n\n if (timeInputSupported) {\n let parsedValue = parseTime(internalValue);\n\n if (parsedValue.isValid()) {\n // HTML5 time input expects 24 hour time\n stringValue = format24HourTime(parsedValue);\n }\n else {\n stringValue = '';\n }\n }\n else {\n stringValue = internalValue;\n }\n\n return (\n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\n\nimport FormElement from 'Components/form-element/FormElement';\nimport Table from 'Components/table/Table';\nimport TableHeader from 'Components/table/TableHeader';\nimport TableHeaderRow from 'Components/table/TableHeaderRow';\nimport TableHeaderColumn from 'Components/table/TableHeaderColumn';\nimport TableBody from 'Components/table/TableBody';\nimport TableRow from 'Components/table/TableRow';\nimport TableColumn from 'Components/table/TableColumn';\nimport TableErrorRow from 'Components/table/TableErrorRow';\nimport TableErrorColumn from 'Components/table/TableErrorColumn';\nimport TimeInput from 'Components/time-input/TimeInput';\nimport ThemedCheckboxInput from 'Components/checkbox/ThemedCheckboxInput';\n\nfunction parseChildName(fullName) {\n // The fullName is in the form of \"DAY-THE_NAME\", we want to split\n // the day key and the name apart, dropping the hyphen.\n //\n const day = fullName.split('-', 1)[0];\n const name = fullName.substring(day.length + 1);\n\n return {\n key: day,\n name,\n };\n}\n\nclass AlertWindowEditor extends React.Component {\n static propTypes = {\n name: PropTypes.string.isRequired,\n validation: PropTypes.objectOf(\n PropTypes.shape({\n start: PropTypes.string,\n end: PropTypes.string,\n }),\n ),\n allowEdit: PropTypes.bool,\n onChange: PropTypes.func,\n value: PropTypes.objectOf(\n PropTypes.shape({\n enabled: PropTypes.bool.isRequired,\n start: PropTypes.string.isRequired,\n end: PropTypes.string.isRequired,\n }).isRequired,\n ),\n };\n\n static defaultProps = {\n allowEdit: true,\n onChange: () => { },\n };\n\n constructor(props) {\n super(props);\n }\n\n _handleChildChange = (event) => {\n const {\n name: fullChildName,\n value: childValue,\n } = event.target;\n\n const {\n name: thisName,\n onChange,\n } = this.props;\n\n const child = parseChildName(fullChildName);\n\n onChange({\n target: {\n name: thisName,\n value: {\n ...this.props.value,\n [child.key]: {\n ...this.props.value[child.key],\n [child.name]: childValue,\n },\n },\n },\n });\n };\n\n _renderRows() {\n const {\n value,\n validation,\n allowEdit,\n } = this.props;\n\n const dayNames = moment.weekdays(false);\n const dayKeys = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];\n\n let rows = [];\n\n dayKeys.forEach((dayKey, i) => {\n const dayValue = value[dayKey];\n const dayError = validation[dayKey] || {};\n\n if (dayValue) {\n const {\n enabled,\n start,\n end,\n } = dayValue;\n\n const {\n start: startError,\n end: endError,\n } = dayError;\n\n rows.push(\n \n \n {dayNames[i]}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n\n if (startError || endError) {\n rows.push(\n \n \n \n {startError || endError}\n \n \n );\n }\n }\n });\n\n return rows;\n }\n\n render() {\n const {\n validation,\n onChange,\n value,\n ...otherProps\n } = this.props;\n\n return (\n \n \n \n \n Day\n \n \n Receive Alerts\n \n \n Start Time\n \n \n End Time\n \n \n \n \n {this._renderRows()}\n \n
\n );\n }\n}\n\nexport default AlertWindowEditor;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Form from 'Components/form/Form';\nimport validate from 'Components/pages/alerts-subscribe/AlertWindowValidation';\nimport * as RequestStatus from 'Common/data/RequestStatus';\nimport DndSelect from './DndSelect';\nimport AlertWindowEditor from './AlertWindowEditor';\nimport every from 'lodash/every';\nimport mapValues from 'lodash/mapValues';\nimport { format24HourTime } from 'Components/util/timeUtils';\nimport { isValidationValid } from 'Components/util/validationUtils';\n\nconst defaultDayWindow = {\n enabled: true,\n start: '07:00',\n end: '15:00',\n};\n\nfunction getDndSelectValueFromWindow(alertWindow) {\n // If all disabled => never\n const allDisabled = every(alertWindow, (day) => day.enabled === false);\n\n if (allDisabled) {\n return 'never';\n }\n\n const allFullDay = every(alertWindow, (day) => (\n day.enabled &&\n day.start === '00:00' &&\n day.end === '00:00'\n ));\n\n if (allFullDay) {\n return 'always';\n }\n\n // Must be a window\n return 'window';\n}\n\nfunction getInitialDefaultWindowValue(dndSelection, data) {\n switch (dndSelection) {\n case 'window': {\n return data;\n }\n case 'always': {\n // Default week\n return mapValues(data, (curr, day) => {\n if (day === 'saturday' || day === 'sunday') {\n return {\n ...defaultDayWindow,\n enabled: false,\n };\n }\n else {\n return {\n ...defaultDayWindow,\n enabled: true,\n };\n }\n });\n }\n case 'never': {\n // Keep the existing window values and disable each day\n return mapValues(data, (curr) => {\n return {\n ...curr,\n enabled: false,\n };\n });\n }\n default: {\n console.error(`Unknown dndSelection value '${dndSelection}'`);\n // Just default the days in this case\n return mapValues(data, (curr, day) => {\n if (day === 'saturday' || day === 'sunday') {\n return {\n ...defaultDayWindow,\n enabled: false,\n };\n }\n else {\n return {\n ...defaultDayWindow,\n enabled: true,\n };\n }\n });\n }\n }\n}\n\nfunction transformIncomingData(alertWindow) {\n return mapValues(alertWindow, (day) => {\n return {\n enabled: day.enabled,\n start: format24HourTime(day.start),\n end: format24HourTime(day.end),\n };\n });\n}\n\nfunction transformOutgoingData(alertWindow) {\n return mapValues(alertWindow, (day) => {\n return {\n enabled: day.enabled,\n start: format24HourTime(day.start) + ':00',\n end: format24HourTime(day.end) + ':00',\n };\n });\n}\n\nconst StyledAlertWindowEditor = styled(AlertWindowEditor)`\n margin-top: 10px;\n`;\n\nexport default class AlertWindowForm extends React.Component {\n constructor(props) {\n super(props);\n\n const initialData = transformIncomingData(props.data);\n const dndSelection = getDndSelectValueFromWindow(initialData);\n\n this.state = {\n dndSelection: dndSelection,\n initialData: initialData,\n modifiedData: initialData,\n defaultWindow: getInitialDefaultWindowValue(dndSelection, initialData),\n lastPatchStatus: props?.requests?.patchAlertWindow?.status,\n };\n }\n\n static getDerivedStateFromProps(props, state) {\n const lastPatchStatus = state.lastPatchStatus;\n const nextPatchStatus = props?.requests?.patchAlertWindow?.status;\n\n if (lastPatchStatus !== nextPatchStatus) {\n let nextInitialData = state.initialData;\n let nextModifiedData = state.modifiedData;\n let nextDefaultWindow = state.defaultWindow;\n\n // Watch for when patchAlertWindow changes from PENDING to SUCCESS and\n // reset the data\n if (lastPatchStatus === RequestStatus.PENDING &&\n nextPatchStatus === RequestStatus.SUCCESS\n ) {\n nextInitialData = transformIncomingData(props.data);\n nextModifiedData = nextInitialData;\n nextDefaultWindow = getInitialDefaultWindowValue(state.dndSelection, nextInitialData);\n }\n\n return {\n initialData: nextInitialData,\n modifiedData: nextModifiedData,\n defaultWindow: nextDefaultWindow,\n lastPatchStatus: nextPatchStatus,\n };\n }\n\n return null; // No changes\n }\n\n _handleSubmit = (event) => {\n // Perform any data cleanup here\n const cleanedUpData = transformOutgoingData(this.state.modifiedData);\n\n this.props.onSubmit({\n target: {\n name: this.props.name,\n value: cleanedUpData,\n },\n });\n };\n\n _handleChange = (event) => {\n const { dndSelection, defaultWindow } = this.state;\n const { value } = event.target;\n\n this.setState({\n modifiedData: value,\n defaultWindow: dndSelection === 'window' ? value : defaultWindow,\n });\n };\n\n _handleReset = () => {\n this.setState((state) => {\n const dndSelection = getDndSelectValueFromWindow(state.initialData);\n\n return {\n dndSelection: dndSelection,\n modifiedData: state.initialData,\n defaultWindow: getInitialDefaultWindowValue(dndSelection, state.initialData),\n };\n });\n };\n\n _handleDndSelectChange = (event) => {\n const { initialData, modifiedData, defaultWindow } = this.state;\n const newDndSelection = event.target.value;\n\n let newData = { ...modifiedData };\n\n switch (newDndSelection) {\n case 'never': {\n // When set to never, use the initial data (that we know is\n // valid) and set every day to disabled\n newData = mapValues(initialData, (curr) => {\n return {\n ...curr,\n enabled: false,\n };\n });\n break;\n }\n case 'always': {\n newData = mapValues(modifiedData, (curr) => {\n return {\n enabled: true,\n start: '00:00',\n end: '00:00',\n };\n });\n break;\n }\n case 'window': {\n newData = defaultWindow;\n break;\n }\n }\n\n this.setState({\n dndSelection: newDndSelection,\n modifiedData: newData,\n });\n };\n\n render() {\n const { requests } = this.props;\n const { dndSelection, initialData, modifiedData } = this.state;\n\n const hasChanges = modifiedData !== initialData;\n const validation = validate(modifiedData);\n const isValid = isValidationValid(validation);\n const isLoading = requests.patchAlertWindow.status === RequestStatus.PENDING;\n\n const allowEdit = !isLoading;\n const allowSubmit = !isLoading && isValid && hasChanges;\n const allowCancel = !isLoading && hasChanges;\n\n const showReceiveWindow = dndSelection === 'window';\n\n return (\n \n \n \n {showReceiveWindow ? (\n \n ) : null}\n \n \n );\n }\n}\n\nAlertWindowForm.propTypes = {\n name: PropTypes.string,\n onSubmit: PropTypes.func.isRequired,\n data: PropTypes.object.isRequired,\n requests: PropTypes.shape({\n patchAlertWindow: PropTypes.shape({\n status: PropTypes.string.isRequired,\n error: PropTypes.shape({\n message: PropTypes.string,\n }),\n }).isRequired,\n }).isRequired,\n};\n\nAlertWindowForm.defaultProps = {\n name: '',\n};\n","import forEach from 'lodash/forEach';\nimport { parseTime } from 'Components/util/timeUtils';\nimport timeInputValidation from 'Components/time-input/timeInputValidation';\n\nfunction startBeforeEnd(start, end) {\n const startTime = parseTime(start);\n const endTime = parseTime(end);\n\n // Midnight is ambiguous. Therefore, if both equal midnight, then we can\n // assume `end` is referring to the next day\n if (startTime.isSame(endTime)) {\n return startTime.isSame(parseTime('00:00'));\n }\n\n return startTime.isBefore(endTime);\n}\n\nexport default function validate(value = {}) {\n const errors = {};\n\n forEach(value, (dayValue = {}, key) => {\n let startError, endError;\n\n if (dayValue.enabled) {\n const { start, end } = dayValue;\n\n startError = timeInputValidation(start);\n endError = timeInputValidation(end);\n\n if (!startError && !endError) {\n if (!startBeforeEnd(start, end)) {\n startError = 'Start time must occur before end time';\n }\n }\n }\n\n // Only set key if there are errors\n if (startError || endError) {\n errors[key] = {\n start: startError,\n end: endError,\n };\n }\n });\n\n return errors;\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport FormElement from 'Components/form-element/FormElement';\nimport SelectInput from 'Components/select/SelectInput';\nimport SelectOption from 'Components/select/SelectOption';\nimport SelectOptionContent from 'Components/select/SelectOptionContent';\n\nconst StyledSelectInput = styled(SelectInput)`\n min-width: 225px;\n`;\n\nexport default class DeviceSubscriptionsEditor extends React.Component {\n static propTypes = {\n name: PropTypes.string,\n devices: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number.isRequired,\n asset_name: PropTypes.string.isRequired,\n }).isRequired,\n ).isRequired,\n value: PropTypes.arrayOf(PropTypes.number).isRequired,\n onChange: PropTypes.func.isRequired,\n allowEdit: PropTypes.bool.isRequired,\n };\n\n constructor(props) {\n super(props);\n }\n\n _handleChange = (event) => {\n this.props.onChange({\n target: {\n name: this.props.name,\n value: event.target.value.map(Number),\n }\n });\n };\n\n render() {\n const { name, devices, value, allowEdit } = this.props;\n\n const disabled = !allowEdit || devices.length === 0;\n\n return (\n \n \n {`Select Work Centers (${value.length})`}\n \n )}\n onChange={this._handleChange}\n optionsWidth={350}\n maxOptionsHeight={500}\n >\n {devices.map((device) => {\n const deviceId = device.id;\n\n return (\n \n \n {device.asset_name}\n \n \n );\n })}\n \n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport DeviceSubscriptionEditor from './DeviceSubscriptionsEditor';\nimport Form from 'Components/form/Form';\nimport * as RequestStatus from 'Common/data/RequestStatus';\n\nexport default class DeviceSubscriptionsForm extends React.Component {\n static propTypes = {\n name: PropTypes.string,\n devices: PropTypes.array.isRequired,\n data: PropTypes.arrayOf(PropTypes.number).isRequired,\n requests: PropTypes.object.isRequired,\n onSubmit: PropTypes.func.isRequired,\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n modifiedData: props.data,\n lastPatchStatus: props?.requests?.patchDeviceSubscriptions?.status,\n };\n }\n\n static getDerivedStateFromProps(props, state) {\n const lastPatchStatus = state.lastPatchStatus;\n const nextPatchStatus = props?.requests?.patchDeviceSubscriptions?.status;\n\n if (lastPatchStatus !== nextPatchStatus) {\n let nextModifiedData = state.modifiedData;\n\n // Watch for when patchDeviceSubscriptions changes from PENDING to SUCCESS and\n // reset the data\n if (lastPatchStatus === RequestStatus.PENDING &&\n nextPatchStatus === RequestStatus.SUCCESS\n ) {\n nextModifiedData = props.data;\n }\n\n return {\n modifiedData: nextModifiedData,\n lastPatchStatus: nextPatchStatus,\n };\n }\n\n return null; // No changes\n }\n\n _handleChange = (event) => {\n this.setState({\n modifiedData: event.target.value,\n });\n };\n\n _handleReset = () => {\n this.setState({\n modifiedData: this.props.data,\n });\n };\n\n _handleSubmit = () => {\n this.props.onSubmit({\n target: {\n name: this.props.name,\n value: this.state.modifiedData,\n },\n });\n };\n\n render() {\n const { devices, data: initialData, requests } = this.props;\n const { modifiedData } = this.state;\n\n const hasChanges = modifiedData !== initialData;\n const isLoading = requests.patchDeviceSubscriptions.status === RequestStatus.PENDING;\n\n const allowEdit = !isLoading;\n const allowSubmit = !isLoading && hasChanges;\n const allowCancel = !isLoading && hasChanges;\n\n return (\n \n \n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter } from 'react-router-dom';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\n\nimport {\n generateDeviceSubscriptionsPatch,\n getAlerts,\n getAlertWindow,\n getDeviceSubscriptions,\n getHierarchy,\n getUsers,\n patchAlertWindow,\n patchDeviceSubscriptions,\n} from 'Redux/actions';\nimport getAlertSubscriptions from 'Redux/actions/getAlertSubscriptions';\nimport { patchAlertSubscriptions, generateAlertSubscriptionsPatch } from 'Redux/actions/patchAlertSubscriptions';\nimport { selectAlertSubscriptionsRequest, selectAlertSubscriptions } from 'Redux/reducers/alertSubscriptions';\nimport { selectAlertsRequest, selectAlerts } from 'Redux/reducers/alerts';\nimport { selectAlertWindow, selectAlertWindowRequest } from 'Redux/reducers/alertWindow';\nimport { selectAdminUsers, selectUsersRequest } from 'Redux/reducers/users';\nimport { selectDeviceSubscriptionsRequest, selectDeviceSubscriptions } from 'Redux/reducers/deviceSubscriptions';\nimport { selectDevicesList, selectHierarchyRequest } from 'Redux/reducers/hierarchy';\nimport { selectSessionUser } from 'Redux/reducers/session';\nimport * as RequestStatus from 'Common/data/RequestStatus';\n\nimport Page from 'Components/page/Page';\nimport PageTitle from 'Components/page/PageTitle';\nimport RequestLoadingWrapper from 'Components/loading-indicator/RequestLoadingWrapper';\nimport MultiRequestLoadingWrapper from 'Components/loading-indicator/MultiRequestLoadingWrapper';\nimport AlertSubscriptionsForm from './AlertSubscriptionsForm';\nimport AlertWindowForm from './AlertWindowForm';\nimport DeviceSubscriptionsForm from './DeviceSubscriptionsForm';\nimport PageFrame from 'Components/page/PageFrame';\nimport PageDescription from 'Components/page/PageDescription';\nimport PageContentWide from 'Components/page/PageContentWide';\nimport SectionDescription from 'Components/text/SectionDescription';\nimport WarningNotice from 'Components/notice/WarningNotice';\nimport { nullable } from 'Components/util/propTypesUtils';\n\nexport class AlertsSubscribePagePresentation extends React.Component {\n static propTypes = {\n // Admins\n admins: PropTypes.arrayOf(PropTypes.object).isRequired,\n // Alerts\n alerts: PropTypes.object.isRequired,\n alertSubscriptions: PropTypes.object.isRequired,\n // Alert Window\n alertWindow: PropTypes.object.isRequired,\n // Device Subscriptons\n deviceSubscriptions: PropTypes.array.isRequired,\n\n sessionUser: PropTypes.shape({\n hierarchy_visibility: nullable(PropTypes.number).isRequired,\n }).isRequired,\n hierarchy: PropTypes.object.isRequired,\n\n actions: PropTypes.exact({\n getUsers: PropTypes.func.isRequired,\n getAlerts: PropTypes.func.isRequired,\n getAlertSubscriptions: PropTypes.func.isRequired,\n patchAlertSubscriptions: PropTypes.func.isRequired,\n getAlertWindow: PropTypes.func.isRequired,\n patchAlertWindow: PropTypes.func.isRequired,\n getDeviceSubscriptions: PropTypes.func.isRequired,\n getHierarchy: PropTypes.func.isRequired,\n patchDeviceSubscriptions: PropTypes.func.isRequired,\n }).isRequired,\n requests: PropTypes.exact({\n getUsers: PropTypes.object.isRequired,\n getAlerts: PropTypes.object.isRequired,\n getAlertSubscriptions: PropTypes.object.isRequired,\n patchAlertSubscriptions: PropTypes.object.isRequired,\n getAlertWindow: PropTypes.object.isRequired,\n patchAlertWindow: PropTypes.object.isRequired,\n getDeviceSubscriptions: PropTypes.shape({\n status: PropTypes.string.isRequired,\n }).isRequired,\n getHierarchy: PropTypes.object.isRequired,\n patchDeviceSubscriptions: PropTypes.object.isRequired,\n }).isRequired,\n };\n\n constructor(props) {\n super(props);\n }\n\n componentDidMount() {\n this.props.actions.getUsers();\n this.props.actions.getAlerts();\n this.props.actions.getAlertSubscriptions();\n this.props.actions.getAlertWindow();\n this.props.actions.getDeviceSubscriptions();\n this.props.actions.getHierarchy();\n }\n\n _renderPageDescription() {\n const { admins } = this.props;\n\n const names = admins.map(user => user.data.name).join(', ');\n\n return (\n `Use this page to subscribe to automatic email notifications for\n alerts that fall within the scope of your responsibility.\n Alert rules are configured by XL Enterprise\n Administrators${names.length ? ` (${names})` : ''}.`\n );\n }\n\n _handleAlertWindowSubmit = (event) => {\n this.props.actions.patchAlertWindow(event.target.value);\n };\n\n _renderAlertWindowForm() {\n const { alertWindow, requests } = this.props;\n\n return (\n {\n return (\n \n );\n }}\n />\n );\n }\n\n _handleAlertSubscriptionsSubmit = (event) => {\n const patchData = generateAlertSubscriptionsPatch(\n this.props.alertSubscriptions,\n event.target.value\n );\n\n this.props.actions.patchAlertSubscriptions(patchData);\n };\n\n _renderAlertSubscriptionsForm = () => {\n const {\n alerts,\n alertSubscriptions,\n requests,\n } = this.props;\n\n return (\n {\n return (\n \n );\n }}\n />\n );\n };\n\n _handleDeviceSubscriptionsSubmit = (event) => {\n const patchData = generateDeviceSubscriptionsPatch(\n this.props.deviceSubscriptions,\n event.target.value\n );\n\n this.props.actions.patchDeviceSubscriptions(patchData);\n };\n\n _renderDeviceSubscriptionsForm = () => {\n const {\n deviceSubscriptions,\n sessionUser,\n requests,\n hierarchy\n } = this.props;\n\n const devicesList = hierarchy ? selectDevicesList(hierarchy) : [];\n\n const hasNoVisibility = (\n sessionUser.hierarchy_visibility === null ||\n devicesList.length === 0\n );\n\n return (\n {\n return (\n \n {hasNoVisibility && (\n \n You currently have no access to any devices in the\n enterprise hierarchy and therefore are unable to\n subscribe to any work centers.\n Contact your organization's administrator(s)\n to gain access.\n \n )}\n \n \n );\n }}\n />\n );\n };\n\n render() {\n const { deviceSubscriptions, requests, alertSubscriptions } = this.props;\n\n const alertSubscriptionsCount = (\n alertSubscriptions.metric.length\n + alertSubscriptions.process_state_duration.length\n + alertSubscriptions.process_state_target_time.length\n );\n\n return (\n \n Alert Subscriptions\n\n \n {this._renderPageDescription()}\n \n\n \n {requests.getDeviceSubscriptions.status === RequestStatus.SUCCESS &&\n requests.getAlertSubscriptions.status === RequestStatus.SUCCESS &&\n alertSubscriptionsCount > 0 &&\n deviceSubscriptions.length === 0 && (\n \n You haven't subscribed to any work centers. Alerts will only be sent for\n work centers that you have selected below.\n \n )}\n \n\n \n \n Select the alerts for which you would like to receive\n email notifications. Metric Alerts are only sent after\n there has been at least 30 minutes of manufacturing time\n in the shift (enough time for the alert to be meaningful\n and actionable). Each Metric Alert is sent one\n time per shift. In other words, if a metric crosses an\n alert threshold multiple times, the alert is sent only\n the first time. Production State Time and \n Production State Target alerts are sent each time\n the alert threshold is crossed.\n \n {this._renderAlertSubscriptionsForm()}\n \n\n \n \n Select the work centers for which you would like to receive notifications.\n \n \n {this._renderDeviceSubscriptionsForm()}\n \n \n\n \n \n Configure a receive window to establish when you would like to receive\n alerts. This typically should be set to match your regular working hours\n (in your local time). You can also choose to temporarily override the\n configured receive window.\n \n {this._renderAlertWindowForm()}\n \n \n );\n }\n}\n\nconst mapStateToProps = state => {\n const {\n users,\n alerts,\n alertSubscriptions,\n alertWindow,\n deviceSubscriptions,\n hierarchy,\n } = state;\n\n return {\n admins: selectAdminUsers(users),\n alerts: selectAlerts(alerts),\n alertSubscriptions: selectAlertSubscriptions(alertSubscriptions),\n alertWindow: selectAlertWindow(alertWindow),\n deviceSubscriptions: selectDeviceSubscriptions(deviceSubscriptions),\n hierarchy: state.hierarchy,\n sessionUser: selectSessionUser(state.session),\n\n requests: {\n getUsers: selectUsersRequest(users, 'getUsers'),\n getAlerts: selectAlertsRequest(alerts, 'getAlerts'),\n getAlertSubscriptions: selectAlertSubscriptionsRequest(alertSubscriptions, 'getAlertSubscriptions'),\n patchAlertSubscriptions: selectAlertSubscriptionsRequest(alertSubscriptions, 'patchAlertSubscriptions'),\n getAlertWindow: selectAlertWindowRequest(alertWindow, 'getAlertWindow'),\n patchAlertWindow: selectAlertWindowRequest(alertWindow, 'patchAlertWindow'),\n getDeviceSubscriptions: selectDeviceSubscriptionsRequest(deviceSubscriptions, 'getDeviceSubscriptions'),\n patchDeviceSubscriptions: selectDeviceSubscriptionsRequest(deviceSubscriptions, 'patchDeviceSubscriptions'),\n getHierarchy: selectHierarchyRequest(hierarchy, 'getHierarchy'),\n },\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n actions: bindActionCreators({\n getUsers: getUsers,\n getAlerts: getAlerts,\n getAlertSubscriptions: getAlertSubscriptions,\n patchAlertSubscriptions: patchAlertSubscriptions,\n getAlertWindow: getAlertWindow,\n patchAlertWindow: patchAlertWindow,\n getDeviceSubscriptions: getDeviceSubscriptions,\n patchDeviceSubscriptions: patchDeviceSubscriptions,\n getHierarchy: getHierarchy,\n }, dispatch),\n };\n};\n\n// connect the component to Redux\nconst AlertsSubscribePage = withRouter(connect(\n mapStateToProps,\n mapDispatchToProps\n)(AlertsSubscribePagePresentation));\n\nexport default AlertsSubscribePage;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter } from 'react-router-dom';\nimport { connect } from 'react-redux';\nimport { getVersion } from 'Redux/actions';\nimport Page from 'Components/page/Page';\nimport PageContent from 'Components/page/PageContentStandard';\nimport PageTitle from 'Components/page/PageTitle';\nimport RequestLoadingWrapper from 'Components/loading-indicator/RequestLoadingWrapper';\nimport styled from 'styled-components';\nimport { Body1 } from 'Components/typography/typography';\n\nconst Body = styled(Body1)``;\n\nexport class VersionPagePresentation extends React.Component {\n constructor(props) {\n super(props);\n this._renderVersions = this._renderVersions.bind(this);\n }\n\n componentDidMount() {\n this.props.onDidMount();\n }\n\n _renderVersions() {\n const { versionData } = this.props;\n return (\n \n Container: {versionData.container_tag}
\n Schema: {versionData.db_schema_version}
\n Deployment: {versionData.source_version}
\n \n );\n }\n\n render() {\n return (\n \n About XL Enterprise\n \n \n \n \n );\n }\n}\n\nVersionPagePresentation.propTypes = {\n onDidMount: PropTypes.func.isRequired,\n versionData: PropTypes.shape({\n source_version: PropTypes.string.isRequired,\n container_tag: PropTypes.string.isRequired,\n db_schema_version: PropTypes.string.isRequired,\n }),\n requests: PropTypes.shape({\n getVersion: PropTypes.shape({\n status: PropTypes.string.isRequired,\n error: PropTypes.shape({\n message: PropTypes.string,\n }),\n }).isRequired,\n }).isRequired,\n};\n\nVersionPagePresentation.defaultProps = {\n versionData: null,\n};\n\nconst mapStateToProps = (state, ownProps) => {\n const { version } = state;\n\n return {\n versionData: version.versionData || null,\n requests: version.requests,\n };\n};\n\nconst mapDispatchToProps = {\n onDidMount: getVersion,\n};\n\nconst VersionPage = withRouter(connect(\n mapStateToProps,\n mapDispatchToProps\n)(VersionPagePresentation));\n\nexport default VersionPage;\n","import React from 'react';\nimport Page from 'Components/page/Page';\nimport PageTitle from 'Components/page/PageTitle';\nimport PageContent from 'Components/page/PageContentWide';\nimport { Body1 } from 'Components/typography/typography';\nimport styled from 'styled-components';\n\nconst Body = styled(Body1)`\n white-space: pre-wrap;\n display: block;\n`;\n\nexport default function PrivacyPage() {\n return (\n \n Privacy Policy\n \n \n XL Enterprise is currently in preview release and this page will be updated soon.\n Please contact us if you have any questions.\n \n \n \n );\n}\n","import React from 'react';\nimport Page from 'Components/page/Page';\nimport PageTitle from 'Components/page/PageTitle';\nimport PageContent from 'Components/page/PageContentWide';\nimport styled from 'styled-components';\nimport { T2, Body2 } from 'Components/typography/typography';\n\nconst Heading = styled(T2)`\n display: block;\n color: ${props => props.theme.colors.palette.blue.awesome};\n text-transform: uppercase;\n margin-bottom: 10px;\n`;\n\nconst Body = styled(Body2)`\n white-space: pre-wrap;\n display: block;\n`;\n\nconst Section = styled(Body)`\n display: block;\n margin-bottom: 20px;\n`;\n\nconst ListItem = styled.li``;\n\nexport default function CookiePolicyPage() {\n return (\n \n Cookie Policy\n \n \n Introduction\n \n As with many companies, our websites and emails use standard technologies referred to as “cookies” and “beacons”.\n \n \n A cookie is a small data file that is transferred to your computer (when you allow your browser to accept cookies). Cookies are used to identify your web browser whenever you visit a site and may be necessary to providing a better browsing experience and/or to analyze site traffic as a means of improving page content.\n A beacon is an electronic image placed in a web page or email. Beacons are generally used to provide a notification when web pages are loaded and when emails are opened.\n
\n \n \n Managing Cookies\n \n If you do not want information collected through the use of cookies, you can opt-out of providing this information by adjusting cookie settings in your browser. Your browser controls allow you to refuse some or all cookies, as well as delete existing cookies from your machine. Please refer to your browser's privacy or help documentation for more information about how to block or disable cookies in your browser.\n \n \n Users located in the European Union will also have the option of disabling cookies through the onsite banner that will appear when originally visiting our websites.\n \n \n \n Type of Cookies and Information Collected\n \n Our websites uses the following types of cookies:\n \n \n Strictly Necessary: These cookies are required for the operation of our sites. They are not used to track your activity or collect information about you. We recommend that you do not turn these cookies off as this may limit your ability to view and navigate our sites.\n Performance: These cookies are used to collect overall information about how visitors use our websites. They recognize and count website visitors and help us see how visitors reach and move around our websites. This helps us ensure that users are able to easily find what they are looking for, and to identify errors. Information collected by performance cookies is anonymous or pseudonymized and cannot be used to identify you. Some performance cookies are managed for us by third parties. For more information see Key Third Party Providers below.\n Functionality: These cookies are used to provide content such as videos. We do not use Functionality Cookies to target advertising content. You can block these cookies using your browser settings, but this may mean you will not be able to view certain content.\n Targeting: These cookies are used to store your contact details once entered on a web form. This information allows us to track and record the pages you have visited and the links you have clicked. This helps us to identify which pages of our website are most relevant to people who visit our sites, so that we can develop and improve our content.\n
\n \n If you choose to receive marketing emails or newsletters from Vorne we use web beacons and personalized URLs to track that you’ve opened the message, and to identify any clicked links within those messages. This allows Vorne to optimize future communications and limit these communications to subjects that are of interest to you. You will not receive these communications if you have opted-out of receiving marketing materials from us (every email includes an opt-out option in the email footer).\n \n \n You can turn off Targeting Cookies. However, if you block them, we may not be able to offer you certain functionality.\n \n \n \n Cookie Duration\n \n The length of time that a cookie remains on your machine will depend on whether they are session or persistent cookies.\n \n \n Session Cookies: Remain in place only for the duration of your visit. They are deleted at the end of your browsing session.\n Persistent Cookies: Remain in place for a period of time after you leave our website. How long the cookie remains on your machine will depend on the “lifetime” of the specific cookie as well as your browser settings. You can also manually delete these cookies.\n
\n \n \n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { T2, Body2, Body1 } from 'Components/typography/typography';\n\nconst LicenseContainer = styled.div`\n margin-bottom: 20px;\n`;\n\nconst LicenseName = styled(T2)`\n display: block;\n color: ${props => props.theme.colors.palette.blue.awesome};\n text-transform: uppercase;\n margin-bottom: 10px;\n`;\n\nconst LicenseIntro = styled(Body1)`\n display: block;\n margin-bottom: 10px;\n`;\n\nconst LicenseText = styled(Body2)`\n display: block;\n white-space: pre-wrap;\n margin-left: 50px;\n margin-bottom: 30px;\n`;\n\nfunction LicenseDescription({ name, text }) {\n return (\n \n \n {name}\n \n \n This product contains code from the {name} package, which is licensed as follows.\n \n \n {text}\n \n \n );\n}\n\nLicenseDescription.propTypes = {\n name: PropTypes.string.isRequired,\n text: PropTypes.string.isRequired,\n};\n\nexport default LicenseDescription;\n","import React from 'react';\nimport Page from 'Components/page/Page';\nimport PageTitle from 'Components/page/PageTitle';\nimport PageContent from 'Components/page/PageContentWide';\nimport licenses from 'Licenses/licenses.json';\nimport LicenseDescription from './LicenseDesciption';\nimport PageDescription from 'Components/page/PageDescription';\n\nexport default function LicensesPage() {\n return (\n \n Third-Party Licenses\n \n XL Enterprise™ utilizes a collection of various pieces of software\n (referred to collectively as the "Software").\n
\n
\n Some pieces of the Software require license information to be provided.\n The licensing information in this section pertains only to the\n specifically listed software libraries.\n
\n
\n Please note that copyright notices and license text appear in their\n original language.\n \n \n {\n licenses.map((license) => {\n return (\n \n );\n })\n }\n \n \n );\n}\n","import React from 'react';\nimport Page from 'Components/page/Page';\nimport PageTitle from 'Components/page/PageTitle';\nimport PageContent from 'Components/page/PageContentWide';\nimport { Body1 } from 'Components/typography/typography';\nimport styled from 'styled-components';\n\nconst Body = styled(Body1)`\n white-space: pre-wrap;\n display: block;\n`;\n\nexport default function TermsOfUsePage() {\n return (\n \n Terms of Use\n \n \n XL Enterprise is currently in preview release and this page will be updated soon.\n Please contact us if you have any questions.\n \n \n \n );\n}\n","\nimport {\n resourceCollectionReducer,\n resourceReducer,\n} from 'Common/util/ResourceCollection';\nimport {\n selectResources,\n} from 'Common/util/ResourceCollection/resourceCollectionReducer';\n\nexport default resourceCollectionReducer('emailSubscriptions', {\n getResourceId: (resource) => resource.id,\n requests: [\n 'getEmailSubscriptions',\n 'patchEmailSubscriptions',\n 'deleteEmailSubscription',\n ],\n resourceReducer: resourceReducer({\n requests: [\n 'getEmailSubscriptions',\n 'patchEmailSubscriptions',\n 'deleteEmailSubscription',\n ],\n }),\n sort: (subscriptionA, subscriptionB) => {\n return subscriptionA.id - subscriptionB.id;\n },\n});\n\nexport function getEmailSubscriptionsList(state) {\n return selectResources(state);\n}\n","\nimport React, {\n useState,\n} from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport SelectOptionContent from 'Components/select/SelectOptionContent';\n\nimport FormElement from 'Components/form-element/FormElement';\nimport SelectOption from 'Components/select/SelectOption';\nimport Table from 'Components/table/Table';\nimport TableHeader from 'Components/table/TableHeader';\nimport TableHeaderRow from 'Components/table/TableHeaderRow';\nimport TableHeaderColumn from 'Components/table/TableHeaderColumn';\nimport TableBody from 'Components/table/TableBody';\nimport TableRow from 'Components/table/TableRow';\nimport TableColumn from 'Components/table/TableColumn';\nimport EnterpriseHierarchySelect from 'Components/enterprise-hierarchy-select/EnterpriseHierarchySelect';\nimport VorneIcon from 'Components/vorne-icon/VorneIcon';\nimport ButtonBase from 'Common/components/Button/ButtonBase';\nimport InfoCircle from 'Common/components/InfoCircle';\n\nimport SelectInput from 'Components/select/SelectInput';\n\nconst DeleteButtonIcon = styled(VorneIcon).attrs({\n i: 'chip-delete',\n})`\n color: ${props => props.theme.colors.darkText.mediumEmphasis};\n`;\n\nconst StyledSelectInput = styled(SelectInput)`\n min-width: 225px;\n`;\n\nconst CreateNewSubscriptionText = styled(SelectOptionContent)`\n color: ${props => props.theme.colors.palette.grey.manatee};\n`;\n\n// should have no padding around drop down and other controls in this particular table,\n// additionally remove the padding that will show up around the enterprise drop down control or the\n// select work center doesn't line up with the rest\nconst SubTable = styled(Table)`\n tbody tr td {\n padding: 0;\n }\n\n tbody tr td button div {\n padding: 0;\n }\n`;\n\nconst ReportingPeriodOptions = [ {\n id: 'every_shift',\n displayName: 'Every Shift',\n}, {\n id: 'ordinal_shift_1',\n displayName: '1st Shift of Day',\n}, {\n id: 'ordinal_shift_2',\n displayName: '2nd Shift of Day',\n}, {\n id: 'ordinal_shift_3',\n displayName: '3rd Shift of Day',\n}, {\n id: 'ordinal_shift_4',\n displayName: '4th Shift of Day',\n}, {\n id: 'day',\n displayName: 'Production Day',\n}, {\n id: 'week',\n displayName: 'Production Week',\n}, {\n id: 'month',\n displayName: 'Month',\n} ];\n\n/**\n * returns a string that is a combination of the report template and selected hierarchy node\n */\nfunction getCombinedSubscriptionPseudoId(subscription) {\n return subscription.data.report_template_id + '-' + subscription.data.hierarchy_node_id;\n}\n\n/**\n * Special Handling of reporting periods\n * This explanation may help explain some of the less straight-forward code in this component\n * The front end allows users to choose a report template and a work center, and select 1 of many reporting periods for that combo\n * The back-end sees each unique report tempalte, work center, reporting period as its own unique subscription\n * The code here looks through all reporting periods for a given report template and work center and combines them into an array.\n */\nexport default function EmailsSubscriptionTable(props) {\n const {\n emailSubscriptions,\n emailTemplates,\n flattenedHierarchy,\n onAddRemove,\n onChange,\n onDeleteRow,\n partialRowStatus,\n } = props;\n\n // this object stores a mapping of pseudo id (report template id + hierarchy node id) pointing\n // to an array of reporting periods\n // the user can have multiple reporting periods selected for each report template + enterprise node\n // the back-end sees each reporting periods combination as a separate subscription\n const combinedEmailSubscriptions = emailSubscriptions.reduce((acc, subscription) => {\n const subscriptionPseudoId = getCombinedSubscriptionPseudoId(subscription);\n const obj = {\n reporting_period: subscription.data.reporting_period,\n subscription_id: subscription.data.id,\n };\n if (acc[subscriptionPseudoId]) {\n acc[subscriptionPseudoId].push(obj);\n }\n else {\n acc[subscriptionPseudoId] = [obj];\n }\n return acc;\n }, {});\n\n // renders the email templates in the dropdown menu\n const renderEmailTemplateOptions = () => {\n return emailTemplates.map((report) => {\n return (\n \n \n {report.data.title}\n \n \n );\n });\n };\n\n const renderReportingPeriodOptions = () => {\n return ReportingPeriodOptions.map((opt) => {\n return (\n \n \n {opt.displayName}\n \n \n );\n });\n };\n\n const renderRows = () => {\n const allowEdit = true;\n\n const onTemplateChange = (subscription, evt) => {\n onChange(subscription.data.id, {\n ...subscription.data,\n report_template_id: parseInt(evt.value, 10),\n });\n };\n\n const onReportingPeriodClose = (subscription, evt) => {\n const newPeriods = evt.value;\n const subscriptionPseudoId = getCombinedSubscriptionPseudoId(subscription);\n const previousReportingPeriods = combinedEmailSubscriptions[subscriptionPseudoId].map((x) => x.reporting_period);\n\n // some fancy js to find differences between two arrays of reporting periods so we can\n // know what was actually added or removed\n const removed = previousReportingPeriods.filter(x => !newPeriods.includes(x));\n const added = newPeriods.filter(x => !previousReportingPeriods.includes(x));\n\n const subscriptionsWithCombo = combinedEmailSubscriptions[subscriptionPseudoId];\n const removedSubscriptions = subscriptionsWithCombo.filter((ss) => {\n return removed.includes(ss.reporting_period);\n });\n\n onAddRemove({\n hierarchy_node_id: subscription.data.hierarchy_node_id,\n reporting_period: added,\n report_template_id: subscription.data.report_template_id,\n },\n removedSubscriptions,\n );\n };\n\n const onHierarchyChange = (subscription, evt) => {\n const newHierarchy = evt.value;\n if (newHierarchy !== subscription.data.hierarchy_node_id.toString()) {\n onChange(subscription.data.id, {\n ...subscription.data,\n hierarchy_node_id: parseInt(evt.value, 10),\n });\n }\n };\n\n const onDeleteClick = (subscription) => {\n onDeleteRow(subscription);\n };\n\n // track if a particular template / work center subscription has already been rendered\n // prevents us from rendering multiple rows for a template/work center for each reporting period\n // only want to see one row with multiple reporting periods in a drop down\n let displayedCombinedSubscription = new Set();\n\n return emailSubscriptions.filter((subscription) => {\n const subscriptionPseudoId = getCombinedSubscriptionPseudoId(subscription);\n const rv = ! displayedCombinedSubscription.has(subscriptionPseudoId);\n displayedCombinedSubscription.add(subscriptionPseudoId);\n return rv;\n }).map((subscription) => {\n const subscriptionPseudoId = getCombinedSubscriptionPseudoId(subscription);\n\n const {\n hierarchy_node_id,\n report_template_id,\n } = subscription.data;\n\n const selectedReportingPeriods = combinedEmailSubscriptions[subscriptionPseudoId].map((ss) => ss.reporting_period);\n\n const getReportPeriodDisplay = () => {\n return (\n Select Reporting Period ({selectedReportingPeriods.length}) \n );\n };\n\n return (\n \n \n \n onTemplateChange(subscription, e.target)}\n >\n {renderEmailTemplateOptions()}\n \n \n \n \n \n onHierarchyChange(subscription, e.target)}\n enterpriseHierarchy={flattenedHierarchy}\n />\n \n \n \n \n onReportingPeriodClose(subscription, e.target)}\n selectionDisplay={getReportPeriodDisplay()}\n >\n {renderReportingPeriodOptions()}\n \n \n \n \n \n onDeleteClick(subscription)} >\n \n \n \n \n \n );\n });\n };\n\n // manages state of last row where user configures a brand new subscription\n const [ newSubscription, setNewSubscription ] = useState({\n report_template_id: '',\n hierarchy_node_id: '',\n reporting_period: [],\n });\n\n // renders the bottom row where a user adds a new subscription\n const renderAddNewRow = () => {\n const allowEdit = true;\n\n // check if a new subscription will be complete (all data items will be filled out) with\n // the addition of the addedPiece\n const willBeComplete = (addedPiece) => {\n // copy new subscription state and add a true value for the to be added piece\n const testSub = {\n ...newSubscription,\n [addedPiece]: true,\n };\n let rv = true;\n // check if any keys in the copied new subscription are falsey.\n for (const key in testSub) {\n if (! testSub[key] || (Array.isArray(testSub[key]) && testSub[key].length === 0) ) {\n // there is a falsey piece in the subscription so is will not be considered\n // complete and ready to be saved\n rv = false;\n break;\n }\n }\n return rv;\n };\n\n const clearNewSubscriptionState = () => {\n setNewSubscription({\n report_template_id: '',\n hierarchy_node_id: '',\n reporting_period: [],\n });\n };\n\n const onNewTemplateChange = (evt) => {\n if (willBeComplete('report_template_id')) {\n onAddRemove({\n hierarchy_node_id: parseInt(newSubscription.hierarchy_node_id, 10),\n report_template_id: parseInt(evt.target.value, 10),\n reporting_period: newSubscription.reporting_period,\n }, []);\n\n clearNewSubscriptionState();\n partialRowStatus(false);\n }\n else {\n setNewSubscription((orig) => {\n return {\n ...orig,\n report_template_id: evt.target.value,\n };\n });\n partialRowStatus(true);\n }\n };\n\n const onNewHierarchyChange = (evt) => {\n if (willBeComplete('hierarchy_node_id')) {\n onAddRemove({\n report_template_id: parseInt(newSubscription.report_template_id, 10),\n hierarchy_node_id: parseInt(evt.target.value, 10),\n reporting_period: newSubscription.reporting_period,\n }, []);\n\n clearNewSubscriptionState();\n partialRowStatus(false);\n }\n else {\n setNewSubscription((orig) => {\n return {\n ...orig,\n hierarchy_node_id: evt.target.value,\n };\n });\n partialRowStatus(true);\n }\n };\n\n const onNewReportingPeriodChange = (evt) => {\n setNewSubscription((orig) => {\n return {\n ...orig,\n reporting_period: evt.target.value,\n };\n });\n };\n\n const onNewReportPeriodClose = (evt) => {\n if (willBeComplete('reporting_period')) {\n onAddRemove({\n hierarchy_node_id: parseInt(newSubscription.hierarchy_node_id, 10),\n report_template_id: parseInt(newSubscription.report_template_id, 10),\n reporting_period: evt.target.value,\n }, []);\n\n clearNewSubscriptionState();\n partialRowStatus(false);\n }\n else {\n partialRowStatus(true);\n }\n };\n\n // gets the element that displays the value in the drop downs when nothing is selected\n const getSelectionDisplay = (value, text) => {\n if (! value) {\n return (\n \n {text}\n \n );\n }\n };\n\n const getReportPeriodSelectionDisplay = (value) => {\n const text = value.length === 0 ? 'Select reporting period…' : `Select Reporting Period (${value.length})`;\n return (\n \n {text}\n \n );\n };\n\n const error = !!newSubscription.report_template_id && !newSubscription.hierarchy_node_id ||\n !newSubscription.report_template_id && !!newSubscription.hierarchy_node_id;\n\n return (\n \n \n \n \n {renderEmailTemplateOptions()}\n \n \n \n \n \n \n \n \n \n \n \n {renderReportingPeriodOptions()}\n \n \n \n \n \n );\n };\n return (\n \n \n \n \n Report Template\n \n Select a predefined email template using the dropdown. Email templates are\n organized under two headings: Built-In (templates created by Vorne) and\n Custom (templates created by your XL Enterprise administrator).\n \n \n \n Work Centers\n \n Select a node in the Enterprise hierarchy using the dropdown. The dropdown\n shows all work centers to which access has been granted to you by your XL\n Enterprise administrator. All work centers at or under the selected node will\n be included in the report.\n \n \n \n Reporting Period\n \n Select the reporting period covered by the subscription using the dropdown.\n You can select Every Shift (you will receive end of shift templates for\n every shift), or individual shifts of First Shift of Day, Second Shift\n of Day, Third Shift of Day, or Fourth Shift of Day. Individual shifts\n are ordered by when they appear within the production day.\n \n \n \n \n \n \n {renderRows()}\n {renderAddNewRow()}\n \n \n );\n}\n\nEmailsSubscriptionTable.propTypes = {\n emailSubscriptions: PropTypes.array.isRequired,\n emailTemplates: PropTypes.array.isRequired,\n flattenedHierarchy: PropTypes.object,\n onAddRemove: PropTypes.func.isRequired,\n onChange: PropTypes.func.isRequired,\n onDeleteRow: PropTypes.func.isRequired,\n partialRowStatus: PropTypes.func.isRequired,\n};\n","\nimport React, {\n useState,\n useEffect,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport EmailsSubscriptionTable from './EmailsSubscriptionTable';\nimport Form from 'Components/form/Form';\nimport * as RequestStatus from 'Common/data/RequestStatus';\n\nfunction getUniqueSubscriptionId(sub) {\n return sub.data.hierarchy_node_id + '-' + sub.data.report_template_id + '-' + sub.data.reporting_period;\n}\n\nfunction getSetOfSubscriptionIds(modifiedSubscriptions) {\n return new Set(modifiedSubscriptions.map((sub) => {\n return getUniqueSubscriptionId(sub);\n }));\n}\n\nexport default function EmailsSubscriptionForm(props) {\n const {\n emailSubscriptions,\n emailTemplates,\n flattenedHierarchy,\n onSubmit,\n requests,\n } = props;\n\n const [ modifiedSubscriptions, setModifiedSubscriptions ] = useState(emailSubscriptions);\n const [ isDirty, setIsDirty ] = useState(false);\n const [ fullRow, setFullRow ] = useState(true);\n\n const onChange = (subscriptionId, data) => {\n const currentSubscriptions = getSetOfSubscriptionIds(modifiedSubscriptions);\n\n const originalSubscription = modifiedSubscriptions.find((sub) => {\n return sub.data.id === data.id;\n });\n\n const newBackendSubscriptions = modifiedSubscriptions.map((sub) => {\n if (sub.data.hierarchy_node_id === originalSubscription.data.hierarchy_node_id &&\n sub.data.report_template_id === originalSubscription.data.report_template_id) {\n const rv = {\n data: {\n ...sub.data,\n report_template_id: data.report_template_id,\n hierarchy_node_id: data.hierarchy_node_id,\n }\n };\n const uniqueId = getUniqueSubscriptionId(rv);\n if (currentSubscriptions.has(uniqueId)) {\n return null;\n }\n return rv;\n }\n\n return sub;\n }).filter((sub) => {\n return !!sub;\n });\n\n setIsDirty(true);\n setModifiedSubscriptions(newBackendSubscriptions);\n };\n\n const onAddRemove = (createdSub, deletedSubs) => {\n let newSubs = [\n ...modifiedSubscriptions,\n ];\n\n // track unique subscriptions based on hierarchy node, report template id, and reporting period\n const currentSubscriptions = getSetOfSubscriptionIds(modifiedSubscriptions);\n\n // the new subscription sent here will contain an array of reporting periods. Each element\n // in that array should correspond to a unique subscription as far as the back-end is\n // concerned\n const newBackendSubscriptions = createdSub.reporting_period.map((rp, index) => {\n return {\n data: {\n ...createdSub,\n // add an index because this loop is tight enough that the now value doesn't always change\n id: Date.now() + index,\n reporting_period: rp,\n },\n };\n }).filter((sub) => {\n // do not bother to add subscriptions that match something that is already added (possibly\n // in another row of the table)\n const uniqueId = getUniqueSubscriptionId(sub);\n return ! currentSubscriptions.has(uniqueId);\n });\n\n // it's possible that all new subscriptions were filtered out, in that case there is nothing to do here\n if (newBackendSubscriptions.length > 0) {\n // concatenate the current set of modified subscriptions (they may not actually be modified though)\n // with any new subscriptions that may have been created, and set that as our new modifiedSubscription state\n newSubs = [\n ...newSubs,\n ...newBackendSubscriptions,\n ];\n }\n\n // list containing only the sub ids to be deleted\n const deletedSubIds = deletedSubs.map((ss) => ss.subscription_id);\n newSubs = newSubs.filter((sub) => {\n return ! deletedSubIds.includes(sub.data.id);\n });\n\n setIsDirty(true);\n setModifiedSubscriptions(newSubs);\n };\n\n const onDeleteRow = (deletedSub) => {\n // filter out all subscriptions that match the hierarchy_node_id and report_template_id for the sent deletedSub\n const newSubs = modifiedSubscriptions.filter((sub) => {\n return ! (deletedSub.data.hierarchy_node_id === sub.data.hierarchy_node_id && deletedSub.data.report_template_id === sub.data.report_template_id);\n });\n setIsDirty(true);\n setModifiedSubscriptions(newSubs);\n };\n\n const onPartialRowStatusUpdate = (partialRowStatus) => {\n setFullRow(! partialRowStatus);\n };\n\n // track status of the patch request to know when we've gone from a pending to success and we\n // can clear the dirty flag\n const [ lastPatchStatus, setLastPatchStatus ] = useState(requests?.patchEmailSubscriptions?.status);\n\n useEffect(() => {\n const nextPatchStatus = requests?.patchEmailSubscriptions?.status;\n\n if (lastPatchStatus === RequestStatus.PENDING &&\n nextPatchStatus === RequestStatus.SUCCESS\n ) {\n setIsDirty(false);\n }\n\n if (lastPatchStatus !== nextPatchStatus) {\n setLastPatchStatus(nextPatchStatus);\n }\n }, [lastPatchStatus, requests?.patchEmailSubscriptions?.status]);\n\n const isLoading = requests.patchEmailSubscriptions.status === RequestStatus.PENDING;\n\n const allowSubmit = !isLoading && isDirty && fullRow;\n const allowCancel = !isLoading && isDirty && fullRow;\n\n const handleReset = () => {\n setModifiedSubscriptions(emailSubscriptions);\n setIsDirty(false);\n };\n\n const handleSubmit = (a) => {\n onSubmit(modifiedSubscriptions);\n };\n\n return (\n \n \n \n \n \n );\n}\n\nEmailsSubscriptionForm.propTypes = {\n emailSubscriptions: PropTypes.array.isRequired,\n emailTemplates: PropTypes.array.isRequired,\n onSubmit: PropTypes.func.isRequired,\n flattenedHierarchy: PropTypes.object,\n requests: PropTypes.object.isRequired,\n};\n","\nimport React, {\n useEffect,\n useState,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport Form from 'Components/form/Form';\nimport * as RequestStatus from 'Common/data/RequestStatus';\nimport SelectInput from 'Components/select/SelectInput';\nimport SelectOption from 'Components/select/SelectOption';\nimport SelectOptionContent from 'Components/select/SelectOptionContent';\nimport FormElement from 'Components/form-element/FormElement';\nimport styled from 'styled-components';\n\nconst StyledSelectInput = styled(SelectInput)`\n min-width: 225px;\n`;\n\nconst OptionContent = styled(SelectOptionContent)`\n min-width: 200px;\n color: inherit;\n`;\n\nconst day_of_week = [ {\n displayName: 'Monday',\n value: 'monday',\n}, {\n displayName: 'Tuesday',\n value: 'tuesday',\n}, {\n displayName: 'Wednesday',\n value: 'wednesday',\n}, {\n displayName: 'Thursday',\n value: 'thursday',\n}, {\n displayName: 'Friday',\n value: 'friday',\n}, {\n displayName: 'Saturday',\n value: 'saturday',\n}, {\n displayName: 'Sunday',\n value: 'sunday',\n}];\n\nexport default function DayOfWeekForm(props) {\n const {\n requests,\n user,\n onSubmit,\n } = props;\n\n const [ isDirty, setIsDirty ] = useState(false);\n const [ selectedDOW, setSelectedDOW ] = useState(user.first_day_of_week);\n const [ lastPatchStatus, setLastPatchStatus ] = useState(requests?.patchSessionUser?.status);\n\n useEffect(() => {\n const nextPatchStatus = requests?.patchSessionUser?.status;\n\n if (lastPatchStatus === RequestStatus.PENDING &&\n nextPatchStatus === RequestStatus.SUCCESS\n ) {\n setIsDirty(false);\n }\n\n if (lastPatchStatus !== nextPatchStatus) {\n setLastPatchStatus(nextPatchStatus);\n }\n }, [lastPatchStatus, requests?.patchSessionUser?.status]);\n\n const handleReset = () => {\n setSelectedDOW(user.first_day_of_week);\n setIsDirty(false);\n };\n\n const handleSubmit = (a) => {\n onSubmit(selectedDOW);\n };\n\n const handleChange = (evt) => {\n setSelectedDOW(evt.target.value);\n setIsDirty(true);\n };\n\n const renderOptions = () => {\n return day_of_week.map((dow) => {\n return (\n \n {dow.displayName}\n \n );\n });\n };\n\n const isLoading = requests.patchSessionUser.status === RequestStatus.PENDING;\n\n const allowSubmit = !isLoading && isDirty;\n const allowCancel = !isLoading && isDirty;\n\n return (\n \n \n \n \n {renderOptions()}\n \n \n \n \n );\n}\n\nDayOfWeekForm.propTypes = {\n user: PropTypes.object.isRequired,\n requests: PropTypes.object.isRequired,\n onSubmit: PropTypes.func.isRequired,\n};\n","\nimport React, {\n useEffect,\n} from 'react';\n\nimport { connect } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport { bindActionCreators } from 'redux';\nimport { selectFlattenedHierarchy } from 'Redux/reducers/hierarchy';\nimport { selectSessionUser } from 'Redux/reducers/session';\nimport {\n generateEmailSubscriptionsPatch,\n getEmailSubscriptions,\n getEmailTemplates,\n getHierarchy,\n getSessionUser,\n patchEmailSubscriptions,\n patchSessionUser,\n} from 'Redux/actions';\nimport { getEmailTemplatesList } from 'Redux/reducers/emailTemplates';\nimport { getEmailSubscriptionsList } from 'Redux/reducers/emailSubscriptions';\nimport Page from 'Components/page/Page';\nimport PageContent from 'Components/page/PageContentWide';\nimport ConfigPageTitle from 'Components/page/ConfigPageTitle';\nimport EmailsSubscriptionForm from './EmailsSubscriptionForm';\nimport RequestLoadingWrapper from 'Components/loading-indicator/RequestLoadingWrapper';\nimport PageDescription from 'Components/page/PageDescription';\nimport PageFrame from 'Components/page/PageFrame';\nimport InfoCircle from 'Common/components/InfoCircle';\nimport DayOfWeekForm from './DayOfWeekForm';\n\nfunction EmailsSubscribePage(props) {\n\n const {\n actions,\n emailSubscriptions,\n emailTemplates,\n flattenedHierarchy,\n requests,\n user,\n } = props;\n\n useEffect(() => {\n const load = async () => {\n await Promise.all([\n actions.getEmailTemplates(),\n actions.getEmailSubscriptions(),\n actions.getHierarchy(),\n actions.getSessionUser(),\n ]);\n };\n\n load();\n }, [actions]);\n\n const handleEmailSubscriptionPatch = (evt) => {\n const patchData = generateEmailSubscriptionsPatch(\n emailSubscriptions,\n evt,\n );\n actions.patchEmailSubscriptions(patchData);\n };\n\n const handleDOWPatch = (dow) => {\n actions.patchSessionUser({\n first_day_of_week: dow\n });\n };\n\n return (\n \n Email Report Subscriptions\n \n Use this page to add, configure, and delete email report subscriptions.\n \n \n \n Subscribe to email reports to have them automatically sent to you.\n Reports are created by administrators on the Email Report Templates page.\n
\n \n For each subscription you can configure which report you would like to receive,\n which work center(s) you would like included, and the reporting period.\n
\n \n Reports are emailed as soon as all XL devices communicating to XL Enterprise\n have completed the last shift for the reporting period. Keep in mind that\n including work centers with different shift schedules or across multiple\n time zones can significantly delay sending reports.\n
\n \n \n \n \n \n (\n \n )}\n />\n \n \n (\n \n )}\n />\n \n \n \n );\n}\n\nEmailsSubscribePage.propTypes = {\n actions: PropTypes.shape({\n getEmailSubscriptions: PropTypes.func.isRequired,\n getEmailTemplates: PropTypes.func.isRequired,\n getHierarchy: PropTypes.func.isRequired,\n getSessionUser: PropTypes.func.isRequired,\n patchEmailSubscriptions: PropTypes.func.isRequired,\n patchSessionUser: PropTypes.func.isRequired,\n }).isRequired,\n user: PropTypes.object.isRequired,\n emailSubscriptions: PropTypes.array.isRequired,\n emailTemplates: PropTypes.array.isRequired,\n flattenedHierarchy: PropTypes.object,\n requests: PropTypes.shape({\n getEmailSubscriptions: PropTypes.object.isRequired,\n patchEmailSubscriptions: PropTypes.object.isRequired,\n getSessionUser: PropTypes.object.isRequired,\n }),\n};\n\nconst mapStateToProps = (state, ownProps) => {\n const {\n emailTemplates,\n emailSubscriptions,\n hierarchy,\n session,\n } = state;\n\n const user = selectSessionUser(session);\n return {\n emailSubscriptions: emailSubscriptions ? getEmailSubscriptionsList(emailSubscriptions) : [],\n emailTemplates: emailTemplates ? getEmailTemplatesList(emailTemplates) : [],\n flattenedHierarchy: selectFlattenedHierarchy(hierarchy),\n requests: {\n ...emailSubscriptions.requests,\n ...session.requests,\n },\n user: user,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n actions: bindActionCreators({\n getEmailSubscriptions,\n getEmailTemplates,\n getHierarchy,\n getSessionUser,\n patchEmailSubscriptions,\n patchSessionUser,\n }, dispatch)\n };\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(EmailsSubscribePage);\n","import React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nconst TocItem = styled.div`\n display: inline-block;\n margin-right: 0.5em;\n`;\n\nexport default function AnchorTocItem(props) {\n const { id, name } = props;\n\n return (\n \n [ {name} ]\n \n );\n}\n\nAnchorTocItem.propTypes = {\n id: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport { elementsOfType } from 'Components/util/propTypesUtils';\n\nimport AnchorTocItem from './AnchorTocItem';\nimport { Body1 } from 'Components/typography/typography';\n\nconst Toc = styled(Body1)``;\n\nexport default function AnchorToc(props) {\n const { children } = props;\n\n return (\n \n {children}\n \n );\n}\n\nAnchorToc.propTypes = {\n children: elementsOfType([\n AnchorTocItem,\n ]),\n};\n","import React from 'react';\nimport Page from 'Components/page/Page';\nimport PageTitle from 'Components/page/PageTitle';\nimport PageContent from 'Components/page/PageContentWide';\nimport PageDescription from 'Components/page/PageDescription';\nimport PageFrame from 'Components/page/PageFrame';\nimport Table from 'Components/table/Table';\nimport TableHeader from 'Components/table/TableHeader';\nimport TableHeaderColumn from 'Components/table/TableHeaderColumn';\nimport TableBody from 'Components/table/TableBody';\nimport TableColumn from 'Components/table/TableColumn';\nimport TableRow from 'Components/table/TableRow';\nimport TableHeaderRow from 'Components/table/TableHeaderRow';\nimport AnchorToc from 'Components/anchor-toc/AnchorToc';\nimport AnchorTocItem from 'Components/anchor-toc/AnchorTocItem';\n\nexport default class MobileGatewaysHelpPage extends React.PureComponent {\n constructor(props) {\n super(props);\n\n this.state = {\n gateways: null,\n };\n }\n\n componentDidMount() {\n import(/* webpackChunkName: \"mobileGateways\" */ './mobileGateways')\n .then(({ getMobileGateways }) => {\n let gateways = getMobileGateways();\n\n // Sort the carriers alphabetically\n gateways = gateways.map((country) => {\n country.gateways.sort((gatewayA, gatewayB) => {\n return gatewayA.carrier.localeCompare(gatewayB.carrier);\n });\n\n // Add an id value to a country, used for anchor links\n country.id = country.country.toLowerCase().replace(/\\s/g, '-');\n\n return country;\n });\n\n this.setState({\n gateways,\n });\n })\n .catch(error => 'An error occurred while loading the mobile gateways');\n }\n\n renderToc() {\n const { gateways } = this.state;\n\n if (!gateways) {\n return null;\n }\n\n return (\n \n {gateways.map(({ country, id }) => (\n \n ))}\n \n );\n }\n\n renderGatewayRow({ carrier, format, type, activationRequired }, index) {\n return (\n \n \n {carrier}\n \n \n {format}\n \n \n {activationRequired ? 'Yes' : 'No' }\n \n \n );\n }\n\n renderCountryMessage(country) {\n if (country.message) {\n return (\n \n {country.message}\n \n );\n }\n }\n\n renderSmsGateways() {\n const { gateways } = this.state;\n\n if (!gateways) {\n return null;\n }\n\n return gateways.map((country) => {\n const { country: countryName, id } = country;\n\n return (\n \n {this.renderCountryMessage(country)}\n \n \n \n \n Carrier\n \n \n Gateway Address Format\n \n \n Activation Required by Carrier\n \n \n \n \n {country.gateways.map(this.renderGatewayRow)}\n \n
\n \n );\n });\n }\n\n render() {\n return (\n \n Mobile Gateways\n \n \n XL Enterprise can send you alerts as emails or text messages. Email is\n preferred as it includes the most information. Text messages can be useful\n if you do not have a mobile-accessible company email address AND your mobile\n carrier supports email to text message gateways. Please note that message and\n data rates from your mobile carrier may apply to text messages sent to you by\n XL Enterprise.\n
\n \n XL uses email gateways provided by mobile carriers to send text messages. Not\n all carriers provide this service and some carriers only provide it as a premium\n service with additional charges. SMS gateways are preferred as the messages are\n often delivered faster. Locate your country and carrier below, and use the email\n address format to construct an email address for alerts (using your phone number\n in place of the # symbols).\n
\n \n \n {this.renderToc()}\n {this.renderSmsGateways()}\n \n \n );\n }\n}\n","import { sendPostRequest } from 'Http/request';\nimport { requestActionCreator } from 'Common/util/ResourceCollection/requestActionCreator';\nimport { REQUEST_RESET } from 'Common/util/ResourceCollection';\nimport { REQUEST_PENDING, REQUEST_SUCCESS, REQUEST_FAILURE } from 'Common/util/ResourceCollection/actions';\n\nexport function verifyAccountReset() {\n return {\n type: REQUEST_RESET,\n requestId: 'verifyAccount',\n };\n}\n\nexport const verifyAccount = ({ token }) => requestActionCreator(\n {\n request: () => ({\n type: REQUEST_PENDING,\n requestId: 'verifyAccount',\n }),\n success: (payload) => ({\n type: REQUEST_SUCCESS,\n requestId: 'verifyAccount',\n payload,\n }),\n failure: (error) => ({\n type: REQUEST_FAILURE,\n requestId: 'verifyAccount',\n payload: { error },\n }),\n },\n () => sendPostRequest('/api/v1/accounts/verify-account', {\n body: { token },\n })\n);\n\nexport default verifyAccount;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Redirect, withRouter } from 'react-router-dom';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport queryString from 'query-string';\nimport Page from 'Components/page/Page';\nimport { Body1 } from 'Components/typography/typography';\nimport PageTitle from 'Components/page/PageTitle';\nimport PageContent from 'Components/page/PageContentStandard';\nimport ErrorNotice from 'Components/notice/ErrorNotice';\nimport SuccessNotice from 'Components/notice/SuccessNotice';\nimport { login, logout } from 'Redux/actions';\nimport LoginForm from 'Components/login-form/LoginForm';\nimport { selectSessionRequest, selectIsLoggedIn } from 'Redux/reducers/session';\nimport { PENDING } from 'Common/data/RequestStatus';\nimport { REQUEST_SUCCESS, REQUEST_FAILURE } from 'Common/util/ResourceCollection/actions';\nimport verifyAccount from 'Redux/actions/verifyAccount';\nimport ContainedButton from 'Components/button/ContainedButton';\n\nconst STEPS = {\n VERIFY_TOKEN: 'VERIFY_TOKEN',\n LOGIN: 'LOGIN',\n COMPLETE: 'COMPLETE',\n};\n\nfunction getTokenFromProps(props) {\n const urlParams = queryString.parse(props.location.search);\n const token = urlParams.t;\n return token;\n}\n\nexport class VerifyAccountPagePresentation extends React.Component {\n static propTypes = {\n location: PropTypes.shape({\n search: PropTypes.string\n }).isRequired,\n isLoggedIn: PropTypes.bool.isRequired,\n requests: PropTypes.shape({\n login: PropTypes.object.isRequired,\n logout: PropTypes.object.isRequired,\n verifyAccount: PropTypes.object.isRequired,\n }),\n actions: PropTypes.shape({\n login: PropTypes.func.isRequired,\n logout: PropTypes.func.isRequired,\n verifyAccount: PropTypes.func.isRequired,\n }).isRequired,\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n currentStep: STEPS.VERIFY_TOKEN,\n email: '',\n showSuccessMessage: true,\n };\n }\n\n _submitToken = async (token) => {\n const { isLoggedIn, actions } = this.props;\n\n if (isLoggedIn) {\n // We don't actually care if this succeeds, it's just a nice-to-have.\n await actions.logout();\n }\n\n const response = await actions.verifyAccount({\n token: token,\n });\n\n // If the verify token request was successful, move to the next step\n if (response.type === REQUEST_SUCCESS) {\n this.setState((state) => {\n return {\n currentStep: STEPS.LOGIN,\n email: response.payload?.email || '',\n };\n });\n }\n };\n\n _handleLoginSubmit = async ({ email, password }) => {\n const { actions } = this.props;\n\n const response = await actions.login({ email, password });\n\n // If the login request was successful, move to the next step\n if (response.type === REQUEST_SUCCESS) {\n this.setState({\n currentStep: STEPS.COMPLETE,\n });\n }\n else if (response.type === REQUEST_FAILURE) {\n this.setState({\n showSuccessMessage: false,\n });\n }\n };\n\n _renderVerifyToken() {\n const { requests } = this.props;\n\n const token = getTokenFromProps(this.props);\n\n let mergedRequest = { ...requests.verifyAccount };\n\n // Merge the requests together and treat them like one request.\n if (requests.logout.status === PENDING) {\n mergedRequest.status = PENDING;\n }\n\n return (\n \n Verify Account\n \n {token && (\n { this._submitToken(token); }}\n >\n Verify Account\n \n )}\n {!token && (\n \n \n The link used to come to this page is invalid\n \n \n )}\n \n \n );\n }\n\n _renderLogin() {\n const { requests } = this.props;\n const { email, showSuccessMessage } = this.state;\n\n return (\n \n Log In\n \n {showSuccessMessage && (\n \n Congratulations, you have verified your email address!\n Please log in to continue.\n \n )}\n \n \n \n );\n }\n\n _renderComplete() {\n const urlParams = queryString.parse(this.props.location.search);\n const linkingToken = urlParams.dlt;\n const assetName = urlParams.an;\n\n if (linkingToken && assetName) {\n return (\n \n );\n }\n else {\n // Redirect to home page\n return (\n \n );\n }\n }\n\n render() {\n const { currentStep } = this.state;\n\n switch (currentStep) {\n case STEPS.VERIFY_TOKEN:\n return this._renderVerifyToken();\n case STEPS.LOGIN:\n return this._renderLogin();\n case STEPS.COMPLETE:\n return this._renderComplete();\n default:\n throw new Error(`Unknown step: ${currentStep}`);\n }\n }\n}\n\nconst mapStateToProps = (state, ownProps) => {\n return {\n isLoggedIn: selectIsLoggedIn(state.session),\n requests: {\n login: selectSessionRequest(state.session, 'login'),\n logout: selectSessionRequest(state.session, 'logout'),\n verifyAccount: selectSessionRequest(state.session, 'verifyAccount'),\n },\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n actions: bindActionCreators({\n login: login,\n logout: logout,\n verifyAccount: verifyAccount,\n }, dispatch),\n };\n};\n\n// connect the component to Redux\nconst VerifyAccountPage = withRouter(connect(\n mapStateToProps,\n mapDispatchToProps\n)(VerifyAccountPagePresentation));\n\nexport default VerifyAccountPage;\n","import { connect } from 'react-redux';\nimport React from 'react';\nimport { withRouter, Route } from 'react-router-dom';\nimport LoadingPage from 'Components/pages/loading/LoadingPage';\nimport PropTypes from 'prop-types';\nimport { selectIsInitialized } from 'Redux/reducers/session';\n\nconst InitializationRequiredRoute = ({ component: Component, isInitialized, ...otherProps }) => {\n return (\n {\n if (isInitialized) {\n return (\n \n );\n }\n else {\n return (\n \n );\n }\n }}\n />\n );\n};\n\nInitializationRequiredRoute.propTypes = {\n component: PropTypes.func.isRequired,\n isInitialized: PropTypes.bool.isRequired,\n};\n\nconst mapStateToProps = state => {\n const { session } = state;\n return {\n isInitialized: selectIsInitialized(session),\n };\n};\n\nexport default withRouter(connect(mapStateToProps)(InitializationRequiredRoute));\n","import { sendPostRequest } from 'Http/request';\nimport { requestActionCreator } from 'Common/util/ResourceCollection/requestActionCreator';\nimport { REQUEST_RESET } from 'Common/util/ResourceCollection';\nimport { REQUEST_PENDING, REQUEST_SUCCESS, REQUEST_FAILURE } from 'Common/util/ResourceCollection/actions';\n\nexport function verifyEmailChangeReset() {\n return {\n type: REQUEST_RESET,\n requestId: 'verifyEmailChange',\n };\n}\n\nexport const verifyEmailChange = ({ token }) => requestActionCreator(\n {\n request: () => ({\n type: REQUEST_PENDING,\n requestId: 'verifyEmailChange',\n }),\n success: (payload) => ({\n type: REQUEST_SUCCESS,\n requestId: 'verifyEmailChange',\n payload,\n }),\n failure: (error) => ({\n type: REQUEST_FAILURE,\n requestId: 'verifyEmailChange',\n payload: { error },\n }),\n },\n () => sendPostRequest('/api/v1/accounts/verify-email-change', {\n body: { token },\n })\n);\n\nexport default verifyEmailChange;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { withRouter, Link } from 'react-router-dom';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport queryString from 'query-string';\nimport Page from 'Components/page/Page';\nimport { Body1 } from 'Components/typography/typography';\nimport PageTitle from 'Components/page/PageTitle';\nimport PageContent from 'Components/page/PageContentStandard';\nimport PageContentFull from 'Components/page/PageContentFull';\nimport ErrorNotice from 'Components/notice/ErrorNotice';\nimport { login } from 'Redux/actions';\nimport LoginForm from 'Components/login-form/LoginForm';\nimport { selectSessionRequest, selectIsLoggedIn } from 'Redux/reducers/session';\nimport { REQUEST_SUCCESS } from 'Common/util/ResourceCollection/actions';\nimport verifyEmailChange from 'Redux/actions/verifyEmailChange';\nimport PageDescription from 'Components/page/PageDescription';\nimport FaIcon from 'Components/icon/FaIcon';\nimport ContainedButton from 'Components/button/ContainedButton';\n\nconst STEPS = {\n LOGIN: 'LOGIN',\n VERIFY_TOKEN: 'VERIFY_TOKEN',\n COMPLETE: 'COMPLETE',\n};\n\nfunction getTokenFromProps(props) {\n const urlParams = queryString.parse(props.location.search);\n const token = urlParams.t;\n return token;\n}\n\nconst SuccessPage = styled(Page)`\n max-width: 100%;\n padding: 32px;\n`;\n\nconst SuccessContent = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n`;\n\nconst CheckIcon = styled(props => ())`\n color: ${props => props.theme.colors.success};\n font-size: 120px;\n`;\n\nconst PrimarySuccessButton = styled(ContainedButton)`\n text-decoration: none;\n`;\n\nexport class VerifyEmailChangePagePresentation extends React.Component {\n static propTypes = {\n location: PropTypes.shape({\n search: PropTypes.string\n }).isRequired,\n isLoggedIn: PropTypes.bool.isRequired,\n requests: PropTypes.shape({\n login: PropTypes.object.isRequired,\n verifyEmailChange: PropTypes.object.isRequired,\n }),\n actions: PropTypes.shape({\n login: PropTypes.func.isRequired,\n verifyEmailChange: PropTypes.func.isRequired,\n }).isRequired,\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n // If the user is already logged in, just go straight to verifying the token\n currentStep: props.isLoggedIn ? STEPS.VERIFY_TOKEN : STEPS.LOGIN,\n };\n }\n\n _handleLoginSubmit = async ({ email, password }) => {\n const { actions } = this.props;\n\n const response = await actions.login({ email, password });\n\n // If the login request was successful, move to the next step\n if (response.type === REQUEST_SUCCESS) {\n this.setState({\n currentStep: STEPS.VERIFY_TOKEN,\n });\n }\n };\n\n _submitToken = async (token) => {\n const { actions } = this.props;\n\n const response = await actions.verifyEmailChange({\n token: token,\n });\n\n // If the change email request was successful, move to the next step\n if (response.type === REQUEST_SUCCESS) {\n this.setState((state) => {\n return {\n currentStep: STEPS.COMPLETE,\n email: response.payload?.email || '',\n };\n });\n }\n };\n\n _renderLogin() {\n const { requests } = this.props;\n\n return (\n \n Verify Email Update - Log In\n \n Please log in with your current primary email to confirm your email update.\n \n \n \n \n \n );\n }\n\n _renderVerifyToken() {\n const token = getTokenFromProps(this.props);\n\n return (\n \n Verify Email Update\n \n {token && (\n { this._submitToken(token); }}\n >\n Verify Email Address\n \n )}\n {!token && (\n \n \n The link used to come to this page is invalid.\n \n \n )}\n \n \n );\n }\n\n _renderComplete() {\n return (\n \n \n \n \n Success!\n \n You have successfully updated your email address.\n \n \n Continue\n \n \n \n \n );\n }\n\n render() {\n const { currentStep } = this.state;\n\n switch (currentStep) {\n case STEPS.VERIFY_TOKEN:\n return this._renderVerifyToken();\n case STEPS.LOGIN:\n return this._renderLogin();\n case STEPS.COMPLETE:\n return this._renderComplete();\n default:\n throw new Error(`Unknown step: ${currentStep}`);\n }\n }\n}\n\nconst mapStateToProps = (state, ownProps) => {\n return {\n isLoggedIn: selectIsLoggedIn(state.session),\n requests: {\n login: selectSessionRequest(state.session, 'login'),\n verifyEmailChange: selectSessionRequest(state.session, 'verifyEmailChange'),\n },\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n actions: bindActionCreators({\n login: login,\n verifyEmailChange: verifyEmailChange,\n }, dispatch),\n };\n};\n\n// connect the component to Redux\nconst VerifyEmailChangePage = withRouter(connect(\n mapStateToProps,\n mapDispatchToProps\n)(VerifyEmailChangePagePresentation));\n\nexport default VerifyEmailChangePage;\n","// import { combineReducers } from 'redux';\nimport {\n resourceCollectionReducer,\n resourceReducer,\n} from 'Common/util/ResourceCollection';\nimport {\n selectResources,\n} from 'Common/util/ResourceCollection/resourceCollectionReducer';\n\nexport default resourceCollectionReducer('supportUsers', {\n getResourceId: (resource) => resource.id,\n requests: [ 'getSupportUsers', 'deleteSupportUser', 'patchSupportUser' ],\n resourceReducer: resourceReducer({\n requests: [ 'getSupportUsers', 'deleteSupportUser', 'patchSupportUser' ],\n }),\n sort: (userA, userB) => {\n return userA.email_address.email.localeCompare(userB.email_address.email);\n },\n additionalReducers: (state, action) => {\n const {\n type,\n payload,\n } = action;\n switch (type) {\n case 'sort-support-table': {\n const newOrder = state.list.sort((left, right) => {\n const lUser = payload.accessor(state.resources[left]);\n const rUser = payload.accessor(state.resources[right]);\n\n if (lUser.localeCompare) {\n return lUser.localeCompare(rUser) * payload.direction;\n }\n return (lUser - rUser) * payload.direction;\n });\n\n return {\n ...state,\n list: newOrder,\n };\n }\n default: {\n return state;\n }\n }\n },\n});\n\nexport function getSupportUsersList(state) {\n return selectResources(state);\n}\n","\nimport React, {\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter } from 'react-router-dom';\n\nimport { connect } from 'react-redux';\nimport {\n getSupportUsers,\n getSupportUsersReset,\n deleteSupportUser,\n patchSupportUser,\n sortSupportUsers,\n} from 'Redux/actions';\nimport Table from 'Common/components/Table/WidthAdjustableTable';\n\nimport Page from 'Components/page/Page';\nimport styled from 'styled-components';\nimport ConfigPageTitle from 'Components/page/ConfigPageTitle';\nimport PageContent from 'Components/page/PageContentFull';\nimport { getSupportUsersList, } from 'Redux/reducers/supportUsers';\nimport { bindActionCreators } from 'redux';\nimport { Roles } from 'Components/app/roles';\nimport useSearchBox, { doesValueMatchSearch } from 'Common/hooks/useSearchBox';\n\nconst TableContainer = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 10px;\n`;\n\nfunction SupportUserPage({\n actions,\n sessionData,\n users,\n}) {\n\n const [deleteConfirm, setDeleteConfirm] = useState(0);\n\n const [sortColumn, setSortColumn] = useState(2);\n const [sortDirection, setSortDirection] = useState(1);\n\n const {\n searchValue,\n renderSearchBox,\n } = useSearchBox({\n placeholder: 'Search organization name, user name, email, or pending email',\n });\n\n useEffect(() => {\n actions.getSupportUsers();\n return actions.getSupportUsersReset();\n }, [actions]);\n\n const columns = useMemo(() => {\n const renderRole = (user) => {\n const changeRole = (evt) => {\n const newRole = evt.target.value;\n actions.patchSupportUser(user.data.id, {\n role: newRole\n });\n };\n\n const renderOptions = () => {\n return Object.keys(Roles).map((kk) => {\n return (\n \n );\n });\n };\n\n return (\n \n );\n };\n\n const renderDelete = (user) => {\n\n const deleteStepOne = () => {\n setDeleteConfirm(user.data.id);\n };\n\n const deleteStepTwo = () => {\n actions.deleteSupportUser(user.data.id);\n setDeleteConfirm(0);\n };\n\n if (user.data.id === deleteConfirm) {\n return (\n \n );\n }\n\n if (user.data.id !== sessionData.id) {\n return (\n \n );\n }\n\n return (\n Can't Delete
\n );\n };\n\n return [{\n Header: 'Name',\n accessor: (user) => {\n return user.data.name;\n },\n sortable: true,\n width: 204,\n }, {\n Header: 'Organization',\n sortable: true,\n accessor: (user) => {\n return user.data.organization.name;\n },\n width: 204,\n }, {\n Header: 'Org. Id',\n sortable: true,\n accessor: (user) => {\n return user.data.organization_id;\n },\n width: 71,\n }, {\n Header: 'Email',\n sortable: true,\n accessor: (user) => {\n return user.data.email_address.email;\n },\n width: 204,\n }, {\n Header: 'Email Verified',\n accessor: (user) => {\n return user.data.email_address.verified ? 'true' : 'false';\n },\n width: 102,\n }, {\n Header: 'Pending Email',\n accessor: (user) => {\n return user.data.pending_email_address?.email || 'No Pending';\n },\n width: 204,\n }, {\n Header: 'Acct. Created',\n accessor: (user) => {\n return (new Date(user.data.created)).toLocaleString();\n },\n sortAccessor: (user) => {\n return new Date(user.data.created);\n },\n width: 150,\n sortable: true,\n }, {\n Header: 'Role',\n accessor: (user) => {\n return renderRole(user);\n },\n sortAccessor: (user) => {\n return user.data.role;\n },\n width: 96,\n sortable: true,\n }, {\n Header: 'Delete',\n accessor: (user) => {\n return renderDelete(user);\n },\n width: 84,\n }];\n }, [deleteConfirm, actions, sessionData]);\n\n const onSortByColumnChange = (headerColumnIndex, unsetOtherColumns) => {\n if (headerColumnIndex === sortColumn) {\n setSortDirection(sortDirection * -1);\n }\n else {\n setSortColumn(headerColumnIndex);\n }\n };\n\n useEffect(() => {\n const column = columns[sortColumn];\n let accessor = column.accessor;\n if (column.sortAccessor) {\n accessor = column.sortAccessor;\n }\n actions.sortSupportUsers(accessor, sortDirection);\n }, [actions, columns, sortColumn, sortDirection]);\n\n const data = useMemo(() => {\n return users.filter((dd) => {\n dd = dd.data;\n if (\n doesValueMatchSearch(dd?.organization?.name, searchValue) ||\n doesValueMatchSearch(dd?.name, searchValue) ||\n doesValueMatchSearch(dd?.email_address?.email, searchValue) ||\n doesValueMatchSearch(dd?.pending_email_address?.email, searchValue)\n ) {\n return true;\n }\n return false;\n });\n }, [searchValue, users]);\n\n return (\n \n All Enterprise Users\n \n \n {renderSearchBox()}\n \n \n \n \n );\n}\n\nSupportUserPage.propTypes = {\n actions: PropTypes.shape({\n getSupportUsers: PropTypes.func.isRequired,\n getSupportUsersReset: PropTypes.func.isRequired,\n deleteSupportUser: PropTypes.func.isRequired,\n patchSupportUser: PropTypes.func.isRequired,\n sortSupportUsers: PropTypes.func.isRequired,\n }).isRequired,\n sessionData: PropTypes.shape({\n id: PropTypes.number.isRequired,\n }).isRequired,\n users: PropTypes.arrayOf(\n PropTypes.shape({\n data: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string,\n email_address: PropTypes.object.isRequired,\n role: PropTypes.string.isRequired,\n active: PropTypes.bool.isRequired,\n }),\n })\n ).isRequired,\n};\n\nconst mapStateToProps = state => {\n const {\n session,\n supportUsers,\n } = state;\n\n return {\n users: getSupportUsersList(supportUsers),\n sessionData: session.sessionData,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n actions: bindActionCreators({\n getSupportUsers: getSupportUsers,\n getSupportUsersReset: getSupportUsersReset,\n deleteSupportUser: deleteSupportUser,\n patchSupportUser: patchSupportUser,\n sortSupportUsers: sortSupportUsers,\n }, dispatch)\n };\n};\n\n// connect the component to Redux\nexport default withRouter(connect(\n mapStateToProps,\n mapDispatchToProps\n)(SupportUserPage));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Switch, Route, Redirect, withRouter } from 'react-router-dom';\nimport { connect } from 'react-redux';\nimport PrivateRoute from './PrivateRoute';\nimport SupportRoute from './SupportRoute';\nimport StrictlyPublicRoute from './StrictlyPublicRoute';\nimport { Roles } from './roles';\nimport HomePage from 'Components/pages/home/HomePage';\nimport InvalidUrlPage from 'Components/pages/invalid-url/InvalidUrlPage';\nimport CreateAccountPage from 'Components/pages/create-account/CreateAccountPage';\nimport DevicesPage from 'Components/pages/devices/DevicesPage';\n//import SoftwareUpdatesPage from 'Components/pages/software-updates/SoftwareUpdatePage';\nimport XLConnectPage from 'Components/pages/xlconnect/XLConnectPage';\nimport AddUserPage from 'Components/pages/add-user/AddUserPage';\nimport SetupNewUserPage from 'Components/pages/setup-new-user/SetupNewUserPage';\nimport ResetPasswordPage from 'Components/pages/reset-password/ResetPasswordPage';\nimport ForgotPasswordPage from 'Components/pages/forgot-password/ForgotPasswordPage';\nimport EditUserPage from 'Components/pages/edit-user/EditUserPage';\nimport EditSessionUserPage from 'Components/pages/edit-user/EditSessionUserPage';\nimport UsersPage from 'Components/pages/users/UsersPage';\nimport OrganizationPage from 'Components/pages/organization/OrganizationPage';\nimport EditAlertsPage from 'Components/pages/alerts-edit/EditAlertsPage';\nimport EmailTemplatesPage from 'Components/pages/email-templates/EmailTemplatesPage';\nimport MetricThresholdsPage from 'Components/pages/metric-thresholds/MetricThresholdsPage';\nimport AlertsSubscribePage from 'Components/pages/alerts-subscribe/AlertsSubscribePage';\nimport VersionPage from 'Components/pages/version/VersionPage';\nimport PrivacyPage from 'Components/pages/privacy/PrivacyPage';\nimport CookiePolicyPage from 'Components/pages/cookie-policy/CookiePolicyPage';\nimport LicensesPage from 'Components/pages/licenses/LicensesPage';\nimport TermsOfUsePage from 'Components/pages/terms-of-use/TermsOfUsePage';\nimport { loginReset } from 'Redux/actions';\nimport EmailsSubscribePage from 'Components/pages/email-subscribe/EmailsSubscribePage';\nimport MobileGatewaysHelpPage from 'Components/pages/help/MobileGatewaysHelpPage';\nimport VerifyAccountPage from 'Components/pages/verify/VerifyAccountPage';\nimport InitializationRequiredRoute from './InitializationRequiredRoute';\nimport VerifyEmailChangePage from 'Components/pages/verify/VerifyEmailChangePage';\nimport SupportUsersPage from 'Components/pages/support-users/SupportUsersPage';\n\nclass Main extends React.Component {\n static propTypes = {\n className: PropTypes.string,\n loginReset: PropTypes.func.isRequired,\n // Provided by `withRouter`\n location: PropTypes.shape({\n pathname: PropTypes.string.isRequired,\n }).isRequired,\n };\n\n constructor(props) {\n super(props);\n }\n\n componentDidUpdate(prevProps) {\n // Detect navigation change\n if (prevProps.location.pathname !== this.props.location.pathname) {\n this.props.loginReset();\n }\n }\n\n render() {\n const { className } = this.props;\n\n return (\n \n
\n {/* Non-logged-in user only pages */}\n \n \n \n\n {/* Always available public pages */}\n \n \n \n \n \n\n {/* Email link only public pages. THESE SHOULD NOT CHANGE, if they do\n you MUST include a redirect for the original link! */}\n \n \n \n \n\n {/* XL Linking pages. THESE SHOULD NOT CHANGE, if they do\n you MUST include a redirect for the original link! */}\n \n\n {/* Subscription pages */}\n \n \n \n {/* New email reports have their own mechanism for choosing assets,\n so asset subs have been combined with alerts */}\n \n \n\n {/* General user config pages */}\n \n {/* 2.10 XL devices link to /devices, make sure that URL continues to work */}\n \n \n \n\n {/* Admin config pages */}\n \n \n \n \n \n \n \n \n {/**/}\n\n {/* Private help pages */}\n \n\n \n\n {/* 404 */}\n \n \n