<commit_before>import Ember from 'ember';
import moment from 'moment';
import d3 from 'd3';
import buildTooltip from 'thirdeye-frontend/helpers/build-tooltip';
import { toBaselineUrn, toMetricUrn, filterPrefix, hasPrefix, toBaselineRange, toFilters, toMetricLabel, colorMapping } from 'thirdeye-frontend/helpers/utils';

const TIMESERIES_MODE_ABSOLUTE = 'absolute';
const TIMESERIES_MODE_RELATIVE = 'relative';
const TIMESERIES_MODE_LOG = 'log';
const TIMESERIES_MODE_SPLIT = 'split';

const EVENT_MIN_GAP = 60000;

export default Ember.Component.extend({
  entities: null, // {}

  selectedUrns: null, // Set

  timeseries: null, // {}

  context: null, // {}

  onHover: null, // function (urns)

  timeseriesMode: null, // 'absolute', 'relative', 'log'

  classNames: ['rootcause-chart'],

  init() {
    this._super(...arguments);
    this.set('timeseriesMode', TIMESERIES_MODE_ABSOLUTE);
  },

  legend: {
    show: false
  },

  subchart: {
    show: true
  },

  colorMapping: colorMapping,

  /**
   * Adding the buildTooltip Template helper to the this context
   */
  buildTooltip: buildTooltip,

  /**
   * custom height for split mode
   */
  splitChartHeight: {
    height: 200
  },

  tooltip: Ember.computed(
    'onHover',
    function () {
      return {
        grouped: true,
        contents: (items, defaultTitleFormat, defaultValueFormat, color) => {
          const t = moment(items[0].x);
          const hoverUrns = this._onHover(t.valueOf());

          const {
            entities,
            timeseries
          } = this.getProperties('entities', 'timeseries');

          const tooltip = this.buildTooltip.create();

          return tooltip.compute({
            entities,
            timeseries,
            hoverUrns,
            hoverTimestamp: t.valueOf()
          });
        }
      };
    }
  ),

  axis: Ember.computed(
    'context',
    function () {
      const { context } = this.getProperties('context');

      const { analysisRange } = context;

      return {
        y: {
          show: true,
          tick: {
            format: d3.format('.2s')
          }
        },
        y2: {
          show: false,
          min: 0,
          max: 1
        },
        x: {
          type: 'timeseries',
          show: true,
          min: analysisRange[0],
          max: analysisRange[1],
          tick: {
            count: Math.ceil(moment.duration(analysisRange[1] - analysisRange[0]).asDays()),
            format: '%Y-%m-%d'
          }<commit_msg>allow for more granular x axes (#2353)<commit_after>import Ember from 'ember';
import moment from 'moment';
import d3 from 'd3';
import buildTooltip from 'thirdeye-frontend/helpers/build-tooltip';
import { toBaselineUrn, toMetricUrn, filterPrefix, hasPrefix, toBaselineRange, toFilters, toMetricLabel, colorMapping } from 'thirdeye-frontend/helpers/utils';

const TIMESERIES_MODE_ABSOLUTE = 'absolute';
const TIMESERIES_MODE_RELATIVE = 'relative';
const TIMESERIES_MODE_LOG = 'log';
const TIMESERIES_MODE_SPLIT = 'split';

const EVENT_MIN_GAP = 60000;

export default Ember.Component.extend({
  entities: null, // {}

  selectedUrns: null, // Set

  timeseries: null, // {}

  context: null, // {}

  onHover: null, // function (urns)

  timeseriesMode: null, // 'absolute', 'relative', 'log'

  classNames: ['rootcause-chart'],

  init() {
    this._super(...arguments);
    this.set('timeseriesMode', TIMESERIES_MODE_ABSOLUTE);
  },

  legend: {
    show: false
  },

  subchart: {
    show: true
  },

  colorMapping: colorMapping,

  /**
   * Adding the buildTooltip Template helper to the this context
   */
  buildTooltip: buildTooltip,

  /**
   * custom height for split mode
   */
  splitChartHeight: {
    height: 200
  },

  tooltip: Ember.computed(
    'onHover',
    function () {
      return {
        grouped: true,
        contents: (items, defaultTitleFormat, defaultValueFormat, color) => {
          const t = moment(items[0].x);
          const hoverUrns = this._onHover(t.valueOf());

          const {
            entities,
            timeseries
          } = this.getProperties('entities', 'timeseries');

          const tooltip = this.buildTooltip.create();

          return tooltip.compute({
            entities,
            timeseries,
            hoverUrns,
            hoverTimestamp: t.valueOf()
          });
        }
      };
    }
  ),

  axis: Ember.computed(
    'context',
    function () {
      const { context } = this.getProperties('context');

      const { analysisRange } = context;

      return {
        y: {
          show: true,
          tick: {
            format: d3.format('.2s')
          }
        },
        y2: {
          show: false,
          min: 0,
          max: 1
        },
        x: {
          type: 'timeseries',
          show: true,
          min: analysisRange[0],
          max: analysisRange[1],
          tick: {
            fit: false
          }
{'fraction_non_alphanumeric': 0.125, 'fraction_numerical': 0.008522727272727272, 'mean_word_length': 2.141491395793499, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, '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': '141858', 'n_tokens_mistral': 1552, 'n_tokens_neox': 1499, 'n_words': 339}