<commit_before>import { pluck } from '../tools';
import PlotlyChart from './plotly-chart';

function mkGradient(id, colors) {
  const stops = [];
  const step = 100 / colors.length;
  colors.forEach((color, index) => {
    stops.push({
      color,
      offset: step * index,
    });
    stops.push({
      color,
      offset: step * (index + 1),
    });
  });

  return (
    <linearGradient id={id} x1="0%" y1="0%" x2="100%" y2="0%">
      {stops.map(({color, offset}) =>
        <stop
          offset={offset+'%'}
          style={{
            stopColor: color,
            stopOpacity: 1,
          }}
        />
      )}
    </linearGradient>
  )
}

class TaggedBarChart extends React.PureComponent {<commit_msg>OCE-439 Diagonal gradient<commit_after>import { pluck } from '../tools';
import PlotlyChart from './plotly-chart';

function mkGradient(id, colors) {
  const stops = [];
  const step = 100 / colors.length;
  colors.forEach((color, index) => {
    stops.push({
      color,
      offset: step * index,
    });
    stops.push({
      color,
      offset: step * (index + 1),
    });
  });

  return (
    <linearGradient id={id} x1="0%" y1="0%" x2="100%" y2="100%">
      {stops.map(({color, offset}) =>
        <stop
          offset={offset+'%'}
          style={{
            stopColor: color,
            stopOpacity: 1,
          }}
        />
      )}
    </linearGradient>
  )
}

class TaggedBarChart extends React.PureComponent {
{'fraction_non_alphanumeric': 0.16964285714285715, 'fraction_numerical': 0.02403846153846154, 'mean_word_length': 2.1, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 13, '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': '6603474', 'n_tokens_mistral': 501, 'n_tokens_neox': 474, 'n_words': 104}