<commit_before>import React from 'react';
import Show from '../components/Show';
import Lines from '../components/tiles/Lines';

export default () => {
  return (
    <Show component={Lines} title="Lines">
      {`import React from 'react';
import { Group } from '@vx/group';
import { LinePath } from '@vx/shape';
import { curveMonotoneX } from '@vx/curve';
import { genDateValue } from '@vx/mock-data';
import { scaleTime, scaleLinear } from '@vx/scale';
import { extent, max } from 'd3-array';

function genLines(num) {
  return new Array(num).fill(1).map(() => {
    return genDateValue(25);
  });
}

const series = genLines(12);
const data = series.reduce((rec, d) => {
  return rec.concat(d);
}, []);

// accessors
const x = d => d.date;
const y = d => d.value;

export default ({ width, height }) => {
  // bounds
  const xMax = width;
  const yMax = height / 8;

  // scales
  const xScale = scaleTime({
    range: [0, xMax],
    domain: extent(data, x)
  });
  const yScale = scaleLinear({
    range: [yMax, 0],
    domain: [0, max(data, y)]
  });

  return (
    <svg width={width} height={height}>
      <rect x={0} y={0} width={width} height={height} fill="#242424" rx={14} />
      {xMax > 8 &&
        series.map((d, i) => {
          return (
            <Group key={\`lines-\${i}\`} top={i * yMax / 2}>
              <LinePath
                data={d}
                x={d => xScale(x(d))}
                y={d => yScale(y(d))}
                stroke={'#ffffff'}
                strokeWidth={1}
                curve={i % 2 == 0 ? curveMonotoneX : undefined}
              />
            </Group>
          );
        })}
    </svg>
  );
};
`}
    </Show>
  );
};<commit_msg>typescript(vx-demo): update Lines page code<commit_after>import React from 'react';
import Show from '../components/Show';
import Lines from '../components/tiles/Lines';

export default () => {
  return (
    <Show component={Lines} title="Lines">
      {`import React from 'react';
import { Group } from '@vx/group';
import { LinePath } from '@vx/shape';
import { curveMonotoneX } from '@vx/curve';
import generateDateValue, { DateValue } from '@vx/mock-data/lib/generators/genDateValue';
import { scaleTime, scaleLinear } from '@vx/scale';
import { extent, max } from 'd3-array';

const series = new Array(12).fill(null).map(_ => generateDateValue(25));
const allData = series.reduce((rec, d) => rec.concat(d), []);

// accessors
const getX = (d: DateValue) => d.date;
const getY = (d: DateValue) => d.value;

export default ({ width, height }) => {
  // bounds
  const xMax = width;
  const yMax = height / 8;

  // scales
  const xScale = scaleTime({
    range: [0, xMax],
    domain: extent(allData, getX),
  });
  const yScale = scaleLinear({
    range: [yMax, 0],
    domain: [0, max(allData, getY)],
  });

  return (
    <svg width={width} height={height}>
      <rect x={0} y={0} width={width} height={height} fill="#242424" rx={14} />
      {xMax > 8 &&
        series.map((lineData, i) => (
          <Group key={\`lines-\${i}\`} top={(i * yMax) / 2}>
            <LinePath<DateValue>
              data={lineData}
              x={d => xScale(getX(d))}
              y={d => yScale(getY(d))}
              stroke="#ffffff"
              strokeWidth={1}
              curve={i % 2 === 0 ? curveMonotoneX : undefined}
            />
          </Group>
        ))}
    </svg>
  );
};`}
    </Show>
  );
};
{'fraction_non_alphanumeric': 0.18766519823788547, 'fraction_numerical': 0.014390602055800294, 'mean_word_length': 2.430010070493454, 'pattern_counts': {'":': 0, '<': 20, '<?xml version=': 0, '>': 40, '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': '6184579', 'n_tokens_mistral': 1180, 'n_tokens_neox': 1124, 'n_words': 284}