<commit_before><template lang='html'>
  <div class='o-data-view__graph'>
    <svg :id='graphElementId'></svg>
  </div>
</template>

<script>
import Moment from 'moment';
import drawGraph from '../presenters/data-graph';

export default {
  props: {
    indicator: {
      required: false,
      type: Object,
    },
    theme: {
      required: true,
      type: Object,
    },
    elementId: {
      required: true,
      type: String,
    },
  },

  computed: {
    graphElementId() {
      return `${this.elementId}-graph`;
    },

    /** The data projection is the slice of the query results matching the statistics
     * in this theme. It updates automatically when the query results change. */
    dataProjection() {
      return this.$store.state.queryResults &&
        this.$store.state.queryResults.projection(this.indicator, this.theme);
    },

    selectedStatistics() {
      return this.$store.state.selectedStatistics;
    },

    fromMoment() {
      return Moment(this.$store.state.fromDate.date);
    },

    toMoment() {
      return Moment(this.$store.state.toDate.date);
    },

    /** @return The duration of the selected dates, in months */
    period() {
      return Math.ceil(this.toMoment.diff(this.fromMoment, 'months', true));
    },

    /** @return The date range for the selected dates */
    dateRange() {
      return [
        this.fromMoment.startOf('month').toDate(),
        this.toMoment.endOf('month').toDate(),
      ];
    },
  },

  watch: {
    dataProjection() {
      this.updateGraph();
    },

    selectedStatistics() {
      this.updateGraph();
    },
  },

  methods: {
    updateGraph() {
      if (this.dataProjection && this.isVisible(this.graphElementId)) {
        this.$nextTick(this.redrawGraph);
      }
    },

    redrawGraph() {
      drawGraph(
        this.dataProjection,
        {
          dateRange: this.dateRange,
          elementId: this.graphElementId,
          indicatorId: this.indicator ? this.indicator.root_name : 'salesVolume',
          period: this.period,
          selectedStatistics: this.selectedStatistics,<commit_msg>Requires deep watch to detect change in selected statistics<commit_after><template lang='html'>
  <div class='o-data-view__graph'>
    <svg :id='graphElementId'></svg>
  </div>
</template>

<script>
import Moment from 'moment';
import drawGraph from '../presenters/data-graph';

export default {
  props: {
    indicator: {
      required: false,
      type: Object,
    },
    theme: {
      required: true,
      type: Object,
    },
    elementId: {
      required: true,
      type: String,
    },
  },

  computed: {
    graphElementId() {
      return `${this.elementId}-graph`;
    },

    /** The data projection is the slice of the query results matching the statistics
     * in this theme. It updates automatically when the query results change. */
    dataProjection() {
      return this.$store.state.queryResults &&
        this.$store.state.queryResults.projection(this.indicator, this.theme);
    },

    selectedStatistics() {
      return this.$store.state.selectedStatistics;
    },

    fromMoment() {
      return Moment(this.$store.state.fromDate.date);
    },

    toMoment() {
      return Moment(this.$store.state.toDate.date);
    },

    /** @return The duration of the selected dates, in months */
    period() {
      return Math.ceil(this.toMoment.diff(this.fromMoment, 'months', true));
    },

    /** @return The date range for the selected dates */
    dateRange() {
      return [
        this.fromMoment.startOf('month').toDate(),
        this.toMoment.endOf('month').toDate(),
      ];
    },
  },

  mounted() {
    this.$watch('$store.state.selectedStatistics', this.updateGraph, { deep: true });
  },

  watch: {
    dataProjection() {
      this.updateGraph();
    },
  },

  methods: {
    updateGraph() {
      if (this.dataProjection && this.isVisible(this.graphElementId)) {
        this.$nextTick(this.redrawGraph);
      }
    },

    redrawGraph() {
      drawGraph(
        this.dataProjection,
        {
          dateRange: this.dateRange,
          elementId: this.graphElementId,
          indicatorId: this.indicator ? this.indicator.root_name : 'salesVolume',
          period: this.period,
          selectedStatistics: this.selectedStatistics,
{'fraction_non_alphanumeric': 0.13645857507542353, 'fraction_numerical': 0.0, 'mean_word_length': 2.4674175382139985, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 17, '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': '7385879', 'n_tokens_mistral': 1294, 'n_tokens_neox': 1269, 'n_words': 268}