<commit_before>import * as React from 'react'
import * as d3 from 'd3'
import { translate } from './ChartUtils';
import TextEllipsis from './TextEllipsis';
import { Rule } from './Rule';
import { PivotTable } from './PivotTable';

interface LegendProps {
  pivot: PivotTable;
  xRule: Rule<"content">;
  yRule: Rule<"legend">;
  color: d3.ScaleOrdinal<string, string>;
}

export default function Legend(p: LegendProps) {

  const { pivot, xRule, yRule, color } = p;

  var legendScale = d3.scaleBand()
    .domain(pivot.columns.map((s, i) => i.toString()))
    .range([0, xRule.size('content')]);

  if (legendScale.bandwidth() <= 50)
    return null;

  var legendMargin = yRule.size('legend') + 4;

  var textWidth = legendScale.bandwidth() - legendMargin;

  return (
    <g>
      <g className="color-legend" transform={translate(xRule.start('content'), yRule.start('legend'))}>
        {pivot.columns.map((s, i) =><g> <rect key={s.key} className="color-rect" transform={translate(legendScale(i.toString())!, 0)}
          width={yRule.size('legend')}
          height={yRule.size('legend')}
          fill={s.color ?? color(s.key)} />
          {(textWidth > 30) && <TextEllipsis key={s.key} transform={translate(legendScale(i.toString())! + legendMargin, yRule.size('legend')  / 2 + 1)}
            maxWidth={textWidth} className="color-text"
            dominantBaseline="middle">
            {s.niceName!}
          </TextEllipsis>
          }
          <title>
            {s.niceName}
          </title>
          </g>
          )}
      </g>
    </g>
  );
}<commit_msg>fix Legend warnings<commit_after>import * as React from 'react'
import * as d3 from 'd3'
import { translate } from './ChartUtils';
import TextEllipsis from './TextEllipsis';
import { Rule } from './Rule';
import { PivotTable } from './PivotTable';

interface LegendProps {
  pivot: PivotTable;
  xRule: Rule<"content">;
  yRule: Rule<"legend">;
  color: d3.ScaleOrdinal<string, string>;
}

export default function Legend(p: LegendProps) {

  const { pivot, xRule, yRule, color } = p;

  var legendScale = d3.scaleBand()
    .domain(pivot.columns.map((s, i) => i.toString()))
    .range([0, xRule.size('content')]);

  if (legendScale.bandwidth() <= 50)
    return null;

  var legendMargin = yRule.size('legend') + 4;

  var textWidth = legendScale.bandwidth() - legendMargin;
  return (
    <g>
      <g className="color-legend" transform={translate(xRule.start('content'), yRule.start('legend'))}>
        {pivot.columns.map((s, i) =>
          <g key={s.key}>
            <rect  className="color-rect" transform={translate(legendScale(i.toString())!, 0)}
              width={yRule.size('legend')}
              height={yRule.size('legend')}
              fill={s.color ?? color(s.key)} />
            {(textWidth > 30) && <TextEllipsis transform={translate(legendScale(i.toString())! + legendMargin, yRule.size('legend') / 2 + 1)}
              maxWidth={textWidth} className="color-text"
              dominantBaseline="middle">
              {s.niceName!}
            </TextEllipsis>}
            <title>
              {s.niceName}
            </title>
          </g>
        )}
      </g>
    </g>
  );
}
{'fraction_non_alphanumeric': 0.17235976183014728, 'fraction_numerical': 0.00814791601378878, 'mean_word_length': 2.7819905213270144, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 37, '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': '3520842', 'n_tokens_mistral': 1079, 'n_tokens_neox': 1018, 'n_words': 215}