<commit_before>/**
 * Animated radial line example using svg dash offset trick. See here for more
 * https://www.visualcinnamon.com/2016/01/animating-dashed-line-d3.html
 */
import React, { useRef, useState, useLayoutEffect } from 'react';
import { Group } from '@vx/group';
import { LineRadial } from '@vx/shape';
import { scaleTime, scaleLog } from '@vx/scale';
import { curveBasisOpen } from '@vx/curve';
import appleStock, { AppleStock } from '@vx/mock-data/lib/mocks/appleStock';
import { LinearGradient } from '@vx/gradient';
import { animated, useSpring } from 'react-spring';

const green = '#e5fd3d';
const blue = '#aeeef8';
const darkgreen = '#dff84d';
const background = '#744cca';
const darkbackground = '#603FA8';
const springConfig = {
  tension: 100,
  friction: 150,
};

// utils
function extent<Datum>(data: Datum[], value: (d: Datum) => number) {
  return [Math.min(...data.map(value)), Math.max(...data.map(value))];
}

// accessors
const date = (d: AppleStock) => new Date(d.date).valueOf();
const close = (d: AppleStock) => d.close;

// scales
const xScale = scaleTime<number>({
  range: [0, Math.PI * 2],
  domain: extent(appleStock, date),
});
const yScale = scaleLog<number>({
  domain: extent(appleStock, close),
});

const angle = (d: AppleStock) => xScale(date(d));
const radius = (d: AppleStock) => yScale(close(d));

const firstPoint = appleStock[0];
const lastPoint = appleStock[appleStock.length - 1];

type Props = {
  width: number;
  height: number;
  animate?: boolean;
};

export default ({ width, height, animate = true }: Props) => {
  const lineRef = useRef<SVGPathElement>();
  const [lineLength, setLineLength] = useState<number>(0);
  const [shouldAnimate, setShouldAnimate] = useState<boolean>(false);

  // set line length once it is known after initial render
  useLayoutEffect(() => {
    if (lineRef.current) {
      setLineLength(lineRef.current.getTotalLength());
    }
  }, [lineRef]);

  const spring = useSpring({
    frame: shouldAnimate ? 0 : 1,
    config: springConfig,
    onRest: () => setShouldAnimate(false),
  });<commit_msg>fix(demo/line-radial): fix useEffect logic for codesandbox<commit_after>/**
 * Animated radial line example using svg dash offset trick. See here for more
 * https://www.visualcinnamon.com/2016/01/animating-dashed-line-d3.html
 */
import React, { useRef, useState, useEffect } from 'react';
import { Group } from '@vx/group';
import { LineRadial } from '@vx/shape';
import { scaleTime, scaleLog } from '@vx/scale';
import { curveBasisOpen } from '@vx/curve';
import appleStock, { AppleStock } from '@vx/mock-data/lib/mocks/appleStock';
import { LinearGradient } from '@vx/gradient';
import { animated, useSpring } from 'react-spring';

const green = '#e5fd3d';
const blue = '#aeeef8';
const darkgreen = '#dff84d';
const background = '#744cca';
const darkbackground = '#603FA8';
const springConfig = {
  tension: 20,
};

// utils
function extent<Datum>(data: Datum[], value: (d: Datum) => number) {
  return [Math.min(...data.map(value)), Math.max(...data.map(value))];
}

// accessors
const date = (d: AppleStock) => new Date(d.date).valueOf();
const close = (d: AppleStock) => d.close;

// scales
const xScale = scaleTime<number>({
  range: [0, Math.PI * 2],
  domain: extent(appleStock, date),
});
const yScale = scaleLog<number>({
  domain: extent(appleStock, close),
});

const angle = (d: AppleStock) => xScale(date(d));
const radius = (d: AppleStock) => yScale(close(d));

const firstPoint = appleStock[0];
const lastPoint = appleStock[appleStock.length - 1];

type Props = {
  width: number;
  height: number;
  animate?: boolean;
};

export default ({ width, height, animate = true }: Props) => {
  const lineRef = useRef<SVGPathElement>();
  const [lineLength, setLineLength] = useState<number>(0);
  const [shouldAnimate, setShouldAnimate] = useState<boolean>(false);

  const spring = useSpring({
    frame: shouldAnimate ? 0 : 1,
    config: springConfig,
    onRest: () => setShouldAnimate(false),
  });

  // set line length once it is known after initial render
  const effectDependency = lineRef.current;
  useEffect(() => {
    if (lineRef.current) {
      setLineLength(lineRef.current.getTotalLength());
    }
  }, [effectDependency]);
{'fraction_non_alphanumeric': 0.16226415094339622, 'fraction_numerical': 0.014150943396226415, 'mean_word_length': 4.5149544863459035, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 31, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, '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': '3317135', 'n_tokens_mistral': 1457, 'n_tokens_neox': 1376, 'n_words': 372}