<commit_before><template>
    <div :style="{display:'inline-block', 'margin-right': getSpacing}">
        <svg :width="getWidth" :height="getHeight" @mousemove="mouseMoving" @click="selected">
            <mask x="0" y="0" :id="fillId">
                <rect fill="#fff" :width="getFill" height="100%" />
            </mask>

            <image :xlink:href="src" :mask="getFillId" :height="getHeight" :width="getWidth" />
            <image :xlink:href="src" :height="getHeight" :width="getWidth" :style="getOpacity" />
        </svg>
    </div>
</template>

<script type="text/javascript">
import Vue from 'vue';
import RatingItem from '../../mixins/RatingItem.js';
export default Vue.extend({
    mixins: [RatingItem],
    created() {
        this.opacity = this.customProps.opacity;
        this.src = this.customProps.src;

        let img = new Image();
        img.onload = () => {
           this.originalHeight = img.height;
           this.originalWidth = img.width;
        };
         img.src = this.src;
    },
    computed: {
        getOpacity() {
            return "opacity:" + this.opacity;
        }
    },
    data() {
        return {<commit_msg>Updated mixin import to ES5<commit_after><template>
    <div :style="{display:'inline-block', 'margin-right': getSpacing}">
        <svg :width="getWidth" :height="getHeight" @mousemove="mouseMoving" @click="selected">
            <mask x="0" y="0" :id="fillId">
                <rect fill="#fff" :width="getFill" height="100%" />
            </mask>

            <image :xlink:href="src" :mask="getFillId" :height="getHeight" :width="getWidth" />
            <image :xlink:href="src" :height="getHeight" :width="getWidth" :style="getOpacity" />
        </svg>
    </div>
</template>

<script type="text/javascript">
import Vue from 'vue';
import RatingItem from '../../mixins/es5/RatingItem.js';
export default Vue.extend({
    mixins: [RatingItem],
    created() {
        this.opacity = this.customProps.opacity;
        this.src = this.customProps.src;

        let img = new Image();
        img.onload = () => {
           this.originalHeight = img.height;
           this.originalWidth = img.width;
        };
         img.src = this.src;
    },
    computed: {
        getOpacity() {
            return "opacity:" + this.opacity;
        }
    },
    data() {
        return {
{'fraction_non_alphanumeric': 0.17404255319148937, 'fraction_numerical': 0.005106382978723404, 'mean_word_length': 2.3585714285714285, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 29, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6931233', 'n_tokens_mistral': 740, 'n_tokens_neox': 723, 'n_words': 144}