9783014174

Committed 03 Jul 2024 06:25PM UTC coverage: 31.873% (+0.002%) from 31.871%

Build # 9783014174

Build Type

push

github

Committed by

s-cheng

Commit Message

fix placeholder user img positioning, add center tick to sparkline, and misc code cleanup

Run Details

4901 of 40217 branches covered (12.19%)

Branch coverage included in aggregate %.

3 of 15 new or added lines in 1 file covered. (20.0%)

1 existing line in 1 file now uncovered.

28588 of 64852 relevant lines covered (44.08%)

180.49 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

26.67

/packages/lesswrong/components/common/Sparkline.tsx

import React from "react";
import { registerComponent } from "../../lib/vulcan-lib";
import countBy from "lodash/countBy";

const styles = (theme: ThemeType): JssStyles => ({
  path: {
    strokeWidth: '2px',
    strokeLinejoin: 'round',
    strokeLinecap: 'round',
  },
  line: {
    strokeWidth: '2px',
  },
})

// The width and height of the SVG coordinate system
const svgWidth = 1000
const svgHeight = 30

/**
 * Generate an SVG sparkline based on the given data.
 * The x-axis is the data, normalized to be between 0-1 (rounded to 2 decimal places),
 * and the y-axis is the frequency of each data point.
 *
 * This was made for ForumEventPoll, so if you want to use it elsewhere,
 * you'll want to audit the code first.
 */
const Sparkline = ({data, min=0, max=1, classes }: {
  data: number[],
  min?: number,
  max?: number,
  classes: ClassesType<typeof styles>
}) => {
  // Normalize the data
  const normalizedData = data.map(v => {
    // Round to 2 decimal places
    return Math.round(100 * (v - min) / (max - min)) / 100
  }).sort()
  
  // Calculate the frequency of each data point
  const frequencyMap: Record<number, number> = countBy(normalizedData)
  const maxFrequency = Math.max(...Object.values(frequencyMap))
  const normalizedFrequencies = normalizedData.map(v => frequencyMap[v] / maxFrequency)
  
  // Track the y-values for the center tick mark
  let tickY1 = svgHeight - 10
  let tickY2 = svgHeight

  const getPath = () => {
    // Start the path at the first data point
    let path = `M 0,${(1 - normalizedFrequencies[0]) * svgHeight}`
    
    // Loop through the data points starting from the second point
    for (let i = 1; i < normalizedData.length; i++) {
      // Calculate the x-coordinate for the current point
      const x = normalizedData[i] * svgWidth
      // Calculate the y-coordinate for the current point, inverting the normalized frequency
      const y = (1 - normalizedFrequencies[i]) * svgHeight
      
      path += ` L ${x},${y}`
      
      // Update the y-values for the center tick mark
      if (Math.round(x / 10) === 50) {
        tickY1 = Math.max(y - 5, 0)
        tickY2 = Math.min(y + 5, svgHeight)
      }
    }
    
    return path
  }

  return (
    <svg width="100%" height={svgHeight} viewBox={`0 0 ${svgWidth} ${svgHeight}`}>
      <path
        d={getPath()}
        fill="none"
        className={classes.path}
      />
      <line x1="500" y1={tickY1} x2="500" y2={tickY2} className={classes.line} />
    </svg>
  );
};

const SparklineComponent = registerComponent("Sparkline", Sparkline, { styles });

declare global {
  interface ComponentTypes {
    Sparkline: typeof SparklineComponent;
  }
}

1	import React from "react";	1✔
2	import { registerComponent } from "../../lib/vulcan-lib";	1✔
3	import countBy from "lodash/countBy";	1✔
4
5	const styles = (theme: ThemeType): JssStyles => ({	1✔
6	path: {
7	strokeWidth: '2px',
8	strokeLinejoin: 'round',
9	strokeLinecap: 'round',
10	},
11	line: {
12	strokeWidth: '2px',
13	},
14	})
15
16	// The width and height of the SVG coordinate system
17	const svgWidth = 1000	1✔
18	const svgHeight = 30	1✔
19
20	/**
21	* Generate an SVG sparkline based on the given data.
22	* The x-axis is the data, normalized to be between 0-1 (rounded to 2 decimal places),
23	* and the y-axis is the frequency of each data point.
24	*
25	* This was made for ForumEventPoll, so if you want to use it elsewhere,
26	* you'll want to audit the code first.
27	*/
28	const Sparkline = ({data, min=0, max=1, classes }: {	1!
29	data: number[],
30	min?: number,
31	max?: number,
32	classes: ClassesType<typeof styles>
33	}) => {
34	// Normalize the data
NEW 35	const normalizedData = data.map(v => {	×
36	// Round to 2 decimal places
NEW 37	return Math.round(100 * (v - min) / (max - min)) / 100	×
38	}).sort()
39
40	// Calculate the frequency of each data point
NEW 41	const frequencyMap: Record<number, number> = countBy(normalizedData)	×
42	const maxFrequency = Math.max(...Object.values(frequencyMap))	×
NEW 43	const normalizedFrequencies = normalizedData.map(v => frequencyMap[v] / maxFrequency)	×
44
45	// Track the y-values for the center tick mark
NEW 46	let tickY1 = svgHeight - 10	×
NEW 47	let tickY2 = svgHeight	×
48
49	const getPath = () => {	×
50	// Start the path at the first data point
NEW 51	let path = `M 0,${(1 - normalizedFrequencies[0]) * svgHeight}`	×
52
53	// Loop through the data points starting from the second point
54	for (let i = 1; i < normalizedData.length; i++) {	×
55	// Calculate the x-coordinate for the current point
NEW 56	const x = normalizedData[i] * svgWidth	×
57	// Calculate the y-coordinate for the current point, inverting the normalized frequency
NEW 58	const y = (1 - normalizedFrequencies[i]) * svgHeight	×
59
UNCOV 60	path += ` L ${x},${y}`	×
61
62	// Update the y-values for the center tick mark
NEW 63	if (Math.round(x / 10) === 50) {	×
NEW 64	tickY1 = Math.max(y - 5, 0)	×
NEW 65	tickY2 = Math.min(y + 5, svgHeight)	×
66	}
67	}
68
69	return path	×
70	}
71
72	return (	×
73	<svg width="100%" height={svgHeight} viewBox={`0 0 ${svgWidth} ${svgHeight}`}>
74	<path
75	d={getPath()}
76	fill="none"
77	className={classes.path}
78	/>
79	<line x1="500" y1={tickY1} x2="500" y2={tickY2} className={classes.line} />
80	</svg>
81	);
82	};
83
84	const SparklineComponent = registerComponent("Sparkline", Sparkline, { styles });	1✔
85
86	declare global {
87	interface ComponentTypes {
88	Sparkline: typeof SparklineComponent;
89	}
90	}

ForumMagnum / ForumMagnum / 9783014174

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous