} containerDisplayMode="block">
);
};
const RelativeOpsBreakdown = styled('div')`
position: relative;
display: flex;
`;
const RectangleRelativeOpsBreakdown = styled(RowRectangle)`
position: relative;
top: 0;
width: 100%;
`;
const OtherRelativeOpsBreakdown = styled(RectangleRelativeOpsBreakdown)`
background-color: ${p => p.theme.gray100};
`;
/**
* Get the field renderer for the named field and metadata
*
* @param {String} field name
* @param {object} metadata mapping.
* @returns {Function}
*/
export function getFieldRenderer(
field: string,
meta: MetaType
): FieldFormatterRenderFunctionPartial {
if (SPECIAL_FIELDS.hasOwnProperty(field)) {
return SPECIAL_FIELDS[field].renderFunc;
}
if (isRelativeSpanOperationBreakdownField(field)) {
return spanOperationRelativeBreakdownRenderer;
}
const fieldName = getAggregateAlias(field);
const fieldType = meta[fieldName];
for (const alias in SPECIAL_FUNCTIONS) {
if (fieldName.startsWith(alias)) {
return SPECIAL_FUNCTIONS[alias];
}
}
if (FIELD_FORMATTERS.hasOwnProperty(fieldType)) {
return partial(FIELD_FORMATTERS[fieldType].renderFunc, fieldName);
}
return partial(FIELD_FORMATTERS.string.renderFunc, fieldName);
}
type FieldTypeFormatterRenderFunctionPartial = (data: EventData) => React.ReactNode;
/**
* Get the field renderer for the named field only based on its type from the given
* metadata.
*
* @param {String} field name
* @param {object} metadata mapping.
* @returns {Function}
*/
export function getFieldFormatter(
field: string,
meta: MetaType
): FieldTypeFormatterRenderFunctionPartial {
const fieldName = getAggregateAlias(field);
const fieldType = meta[fieldName];
if (FIELD_FORMATTERS.hasOwnProperty(fieldType)) {
return partial(FIELD_FORMATTERS[fieldType].renderFunc, fieldName);
}
return partial(FIELD_FORMATTERS.string.renderFunc, fieldName);
}