diff --git a/ui/app/components/chart-primitives/v-annotations.js b/ui/app/components/chart-primitives/v-annotations.js index 0b64141f1..f05481778 100644 --- a/ui/app/components/chart-primitives/v-annotations.js +++ b/ui/app/components/chart-primitives/v-annotations.js @@ -1,6 +1,7 @@ import Component from '@glimmer/component'; import { htmlSafe } from '@ember/template'; import { action } from '@ember/object'; +import styleString from 'nomad-ui/utils/properties/glimmer-style-string'; const iconFor = { error: 'cancel-circle-fill', @@ -12,30 +13,6 @@ const iconClassFor = { info: '', }; -// TODO: This is what styleStringProperty looks like in the pure decorator world -function styleString(target, name, descriptor) { - if (!descriptor.get) throw new Error('styleString only works on getters'); - const orig = descriptor.get; - descriptor.get = function() { - const styles = orig.apply(this); - - let str = ''; - - if (styles) { - str = Object.keys(styles) - .reduce(function(arr, key) { - const val = styles[key]; - arr.push(key + ':' + (typeof val === 'number' ? val.toFixed(2) + 'px' : val)); - return arr; - }, []) - .join(';'); - } - - return htmlSafe(str); - }; - return descriptor; -} - export default class ChartPrimitiveVAnnotations extends Component { @styleString get chartAnnotationsStyle() { diff --git a/ui/app/utils/properties/glimmer-style-string.js b/ui/app/utils/properties/glimmer-style-string.js new file mode 100644 index 000000000..cde60808f --- /dev/null +++ b/ui/app/utils/properties/glimmer-style-string.js @@ -0,0 +1,31 @@ +import { htmlSafe } from '@ember/template'; + +// A decorator for transforming an object into an html +// compatible style attribute string. +// +// ex. @styleString +// get styleStr() { +// return { color: '#FF0', 'border-width': '1px' } +// } +export default function styleString(target, name, descriptor) { + if (!descriptor.get) throw new Error('styleString only works on getters'); + const orig = descriptor.get; + descriptor.get = function() { + const styles = orig.apply(this); + + let str = ''; + + if (styles) { + str = Object.keys(styles) + .reduce(function(arr, key) { + const val = styles[key]; + arr.push(key + ':' + (typeof val === 'number' ? val.toFixed(2) + 'px' : val)); + return arr; + }, []) + .join(';'); + } + + return htmlSafe(str); + }; + return descriptor; +}