<commit_before>import Color from 'color';
import { ScaleOrdinal } from 'd3';
import { select } from 'd3-selection';

import {
  EColorManipulations,
  TipContentFn,
} from '../Histogram';
import { IGroupDataItem } from '../HistogramD3';

interface IProps {
  bins: string[],
  hover?: Partial<Record<EColorManipulations, number>>,
  colors: ScaleOrdinal<string, string>,
  tipContentFn: TipContentFn<string>,
  tipContent: any,
  tip: any,
  tipContainer: string,
  colourIndex?: string,
};

interface IMouseOutProps {
  colors: ScaleOrdinal<string, string>,
  tip: any,
  tipContainer: any,
}
export const onMouseOver = (props: IProps) => (d: IGroupDataItem | any, i: number, nodes: any) => {
  const {
    bins,
    hover,
    colors,
    tipContentFn,
    tipContent,
    tip,
    tipContainer,
  } = props;
  const ix = bins.findIndex((b) => b === d.label);
  // Initial color
  let color = Color(colors(d.colorRef || String(i)));
  if (hover) {
    // Apply hover modifiers
    Object.keys(hover).forEach((key) => {
      if (color[key]) {
        color = color[key](hover![key]);
      }
    })
    select(nodes[i])
      .transition()
      .duration(250)
      .attr('fill', color.hsl().string());
  }
  tipContent.html(() => tipContentFn(bins, ix, d.value || d));
  tip.fx.in(tipContainer);
};

export const onMouseOut = (props: IMouseOutProps) => (d: IGroupDataItem | number, i: number, nodes: any) => {
  const { tip, tipContainer, colors } = props;
  tip.fx.out(tipContainer);
  select(nodes[i])
    .transition()
    .duration(250)
    .attr('fill', colors(typeof d === 'object' && d.colorRef ? d.colorRef : String(i)));
}
export const onClick = (onClick?: (v: any) => void) => (d: IGroupDataItem | number) => {
  if (onClick) {
    onClick(d);
  }
}<commit_msg>Remove colour fill on hover causing hover error on overlaid charts<commit_after>import Color from 'color';
import { ScaleOrdinal } from 'd3';
import { select } from 'd3-selection';

import {
  EColorManipulations,
  TipContentFn,
} from '../Histogram';
import { IGroupDataItem } from '../HistogramD3';

interface IProps {
  bins: string[],
  hover?: Partial<Record<EColorManipulations, number>>,
  colors: ScaleOrdinal<string, string>,
  tipContentFn: TipContentFn<string>,
  tipContent: any,
  tip: any,
  tipContainer: string,
  colourIndex?: string,
};

interface IMouseOutProps {
  colors: ScaleOrdinal<string, string>,
  tip: any,
  tipContainer: any,
}
export const onMouseOver = (props: IProps) => (d: IGroupDataItem | any, i: number, nodes: any) => {
  const {
    bins,
    hover,
    colors,
    tipContentFn,
    tipContent,
    tip,
    tipContainer,
  } = props;
  const ix = bins.findIndex((b) => b === d.label);
  // Initial color
  let color = Color(colors(d.colorRef || String(i)));
  if (hover) {
    // Apply hover modifiers
    Object.keys(hover).forEach((key) => {
      if (color[key]) {
        color = color[key](hover![key]);
      }
    })
    select(nodes[i])
      .transition()
      .duration(250)
      .attr('fill', color.hsl().string());
  }
  tipContent.html(() => tipContentFn(bins, ix, d.value || d));
  tip.fx.in(tipContainer);
};

export const onMouseOut = (props: IMouseOutProps) => (d: IGroupDataItem | number, i: number, nodes: any) => {
  const { tip, tipContainer, colors } = props;
  tip.fx.out(tipContainer);
  select(nodes[i])
    .transition()
    .duration(250);
}
export const onClick = (onClick?: (v: any) => void) => (d: IGroupDataItem | number) => {
  if (onClick) {
    onClick(d);
  }
}
{'fraction_non_alphanumeric': 0.16415362731152205, 'fraction_numerical': 0.005120910384068279, 'mean_word_length': 3.536774193548387, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 33, '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': '6850634', 'n_tokens_mistral': 1215, 'n_tokens_neox': 1190, 'n_words': 291}