experience-based-fact-box/src/js/components/sampler-textual.riot

<sampler-textual>
    <div class="current-sample-wrapper">
        <div class="current-sample" style="visibility: { visibility }">
            <div class="current-sample-colour"></div>
            <p class="current-sample-label">{ props.textual.subject } { props.mouseOver ? (props.sampler.currentSample.id + 1) : (props.sampler.samples.length) }</p>
            <div class="current-sample-number" style="background-color: { props.colours[props.sampler.currentSample.cid] }">
                { props.sampler.calculatedYield }
            </div>
            <p class="current-sample-label">
                { props.sampler.currentSample.cid === 0 ?
                    props.textual.failure + ' ' + props.investmentOutput + ' Euro' :
                    props.textual.success + ' ' + props.investmentOutput + ' Euro' }
            </p>
        </div>
    </div>
    <script charset="utf-8">
        export default {

            // life cycle methods
            onBeforeMount(props, state) {
                state.mouseOver = false;
                Object.defineProperty(this, 'visibility', { get: this.visibility });  // define visibility as getter only when 'this.props' is defined
                Object.defineProperty(this, 'sampleLabel', { get: this.sampleLabel });  // define visibility as getter only when 'this.props' is defined
            },

            // evaluates if modal should be shown
            visibility() {
                let visibility = 'hidden';
                if ((this.props.sampler.samples.length > 0 && this.props.groupSizeId === 0) ||
                    (this.props.sampler.samples.length > 0 && this.props.mouseOver === true)) {
                    visibility = 'visible';
                }
                return visibility;
            },

            sampleLabel () {
                let label = '';
                if (this.props.sampler.currentSample.cid === 0) {
                    label = this.props.textual.failure;
                } else {
                    label = this.props.textual.success;
                }
                return label += ' ' + this.props.investmentOutput + ' ' + this.props.labels.currency;
            }
        }
    </script>
</sampler-textual>