' +\n '
' +\n '
' +\n this.createMarker('relative') +\n // render text every second step, except when only 2 steps\n (i % 2 === 0 || steps === 2\n ? this.createStepText(i, width, false, scale, suffix)\n : '') +\n '
'\n );\n }\n // render text at the end\n scaleSteps.push(this.createStepText(steps, width, true, scale, suffix));\n\n const scaleBarText = this.scaleBarText_\n ? `\n {Boolean(topRight1?.length) &&
{topRight1}
}\n {Boolean(topRight2?.length) &&
{topRight2}
}\n {Boolean(bottomLeft?.length) && (\n
\n {bottomLeft}\n
\n )}\n
\n );\n};\n\nconst getStyles = (topRight1Exists: boolean) => (theme: GrafanaTheme2) => ({\n overlay: css({\n position: 'absolute',\n width: '100%',\n height: '100%',\n zIndex: 500,\n pointerEvents: 'none',\n }),\n TR1: css({\n right: '0.5em',\n pointerEvents: 'auto',\n position: 'absolute',\n top: '0.5em',\n }),\n TR2: css({\n position: 'absolute',\n top: topRight1Exists ? '80px' : '8px',\n right: '8px',\n pointerEvents: 'auto',\n }),\n BL: css({\n position: 'absolute',\n bottom: '8px',\n left: '8px',\n pointerEvents: 'auto',\n }),\n});\n","import { FeatureLike } from 'ol/Feature';\nimport React from 'react';\n\nimport { ArrayDataFrame, DataFrame } from '@grafana/data';\n\nimport { DataHoverView } from './DataHoverView';\n\ntype Props = {\n feature?: FeatureLike;\n};\n\nexport const DataHoverRow = ({ feature }: Props) => {\n let data: DataFrame;\n let rowIndex = 0;\n if (!feature) {\n return null;\n }\n\n data = feature.get('frame');\n if (data) {\n rowIndex = feature.get('rowIndex');\n } else {\n const { geometry, ...properties } = feature.getProperties();\n data = new ArrayDataFrame([properties]);\n }\n\n return