<commit_before><template>
  <div
    class="plotly-chart"
    :title="title"
    @click="click"
  />
</template>

<script>
import Plotly from 'utils/plotly-loader'

export default {
    'name': "PlotlyChart",
    'props': {
        'layout': {
            'type': Object,
            'required': true,
        },
        'chartData': {
            'type': Array,
            'required': true,
        },
        'annotations': {
            'type': Array,
            'default': [],
        },
        'title': {
            'type': String,
            'default': '',
        },
        'static': {
            // Set to true if the chart is NOT interactive
            'type': Boolean,
            'default': false,
        }
    },
    'data': function() {
        return {
            'chartActive': false,
            'originalXAxis': [0, 0],
            'originalYAxis': [0, 0],
        }
    },
    'watch': {
        'annotations': function() {
            this.redrawChart()
        },
    },
    'mounted': function () {
        this.$watch(
            function() {
                return {
                    'layout': this.layout,
                    'data': this.chartData,
                }
            },
            this.showChart
        )
        this.showChart()
    },
    'beforeDestroy': function() {
        this.destroyChart()
    },
    'methods': {
        'destroyChart': function() {
            if (this.chartActive) {
                Plotly.purge(this.$el)
                this.chartActive = false
            }
        },
        'redrawChart': function() {
            if (this.chartActive) {
                Plotly.relayout(this.$el, {
                    'annotations': this.annotations,
                })
            }
        },
        'showChart': function() {
            this.destroyChart()
            this.chartActive = true

            const options = this.static ? {
                'staticPlot': true,
            } : {
                'displaylogo': false,
                'displayModeBar': true,
            }

            const layout = this.layout<commit_msg>[SCI-10134] Fixed Plotly responsive scaling<commit_after><template>
  <div
    class="plotly-chart"
    :title="title"
    @click="click"
  />
</template>

<script>
import Plotly from 'utils/plotly-loader'

export default {
    'name': "PlotlyChart",
    'props': {
        'layout': {
            'type': Object,
            'required': true,
        },
        'chartData': {
            'type': Array,
            'required': true,
        },
        'annotations': {
            'type': Array,
            'default': [],
        },
        'title': {
            'type': String,
            'default': '',
        },
        'static': {
            // Set to true if the chart is NOT interactive
            'type': Boolean,
            'default': false,
        }
    },
    'data': function() {
        return {
            'chartActive': false,
            'originalXAxis': [0, 0],
            'originalYAxis': [0, 0],
        }
    },
    'watch': {
        'annotations': function() {
            this.redrawChart()
        },
    },
    'mounted': function () {
        this.$watch(
            function() {
                return {
                    'layout': this.layout,
                    'data': this.chartData,
                }
            },
            this.showChart
        )
        this.showChart()
    },
    'beforeDestroy': function() {
        this.destroyChart()
    },
    'methods': {
        'destroyChart': function() {
            if (this.chartActive) {
                Plotly.purge(this.$el)
                this.chartActive = false
            }
        },
        'redrawChart': function() {
            if (this.chartActive) {
                Plotly.relayout(this.$el, {
                    'annotations': this.annotations,
                })
            }
        },
        'showChart': function() {
            this.destroyChart()
            this.chartActive = true

            const options = this.static ? {
                'staticPlot': true,
                'responsive': true,
            } : {
                'displaylogo': false,
                'displayModeBar': true,
                'responsive': true,
            }

            const layout = this.layout
{'fraction_non_alphanumeric': 0.1362164662349676, 'fraction_numerical': 0.0030064754856614245, 'mean_word_length': 1.1538844621513944, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, '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': '6977679', 'n_tokens_mistral': 1179, 'n_tokens_neox': 1150, 'n_words': 225}