add histogram

histogram-component
e26chiu 2 months ago
parent 9526f1b0f5
commit a45a7de79b
  1. 25
      components/BarGraph.tsx
  2. 7
      components/Histogram.tsx
  3. 13
      data/mocks.ts
  4. 18
      pages/playground.tsx

@ -11,7 +11,7 @@ import { Color } from "utils/Color";
import styles from "./BarGraph.module.css";
interface BarGraphProps {
export interface BarGraphProps {
data: BarGraphData[];
/** Width of the entire graph, in pixels. */
width: number;
@ -33,7 +33,7 @@ interface BarGraphProps {
hoverLabelSize?: number;
/** Label text for the category axis. */
categoryAxisLabel?: string;
/** Font size of the label for the cateogry axis, in pixels. */
/** Font size of the label for the category axis, in pixels. */
categoryAxisLabelSize?: number;
/** Controls the distance between the category axis label and the category axis. */
categoryAxisLabelOffset?: number;
@ -43,6 +43,10 @@ interface BarGraphProps {
valueAxisLabelSize?: number;
/** Controls the distance between the value axis label and the value axis. */
valueAxisLabelOffset?: number;
/** Controls the space between each bar. */
barPadding?: number;
/** Shift bottom axis labels to the right and extends grid lines to center bars in the graph if true */
shiftBottomAxis?: boolean;
}
interface BarGraphData {
@ -68,10 +72,9 @@ export function BarGraphHorizontal(props: BarGraphProps) {
valueAxisLabel,
valueAxisLabelSize = DEFAULT_LABEL_SIZE,
valueAxisLabelOffset = 0,
barPadding = 0.4,
} = props;
const barPadding = 0.4;
const categoryMax = height - margin.top - margin.bottom;
const valueMax = width - margin.left - margin.right;
@ -217,9 +220,11 @@ export function BarGraphVertical(props: BarGraphProps) {
valueAxisLabel,
valueAxisLabelSize = DEFAULT_LABEL_SIZE,
valueAxisLabelOffset = 0,
barPadding = 0.4,
shiftBottomAxis = false,
} = props;
const barPadding = 0.4;
const gridRowExtension = shiftBottomAxis ? margin.left / 4 : 0; // extend the grid lines to center the bars in the graph
const categoryMax = width - margin.left - margin.right;
const valueMax = height - margin.top - margin.bottom;
@ -228,7 +233,7 @@ export function BarGraphVertical(props: BarGraphProps) {
const getValue = (d: BarGraphData) => d.value;
const categoryScale = scaleBand({
range: [0, categoryMax],
range: [gridRowExtension, categoryMax + gridRowExtension],
domain: data.map(getCategory),
padding: barPadding,
});
@ -242,6 +247,10 @@ export function BarGraphVertical(props: BarGraphProps) {
const categoryPoint = (d: BarGraphData) => categoryScale(getCategory(d));
const valuePoint = (d: BarGraphData) => valueScale(getValue(d));
const bottomAxisLabelsOffset = shiftBottomAxis
? categoryScale.bandwidth() / 2
: 0;
return (
<svg className={className} width={width} height={height}>
<Group top={margin.top} left={margin.left}>
@ -265,7 +274,7 @@ export function BarGraphVertical(props: BarGraphProps) {
</Group>
<GridRows
scale={valueScale}
width={categoryMax}
width={categoryMax + gridRowExtension * 2}
numTicks={5}
stroke={Color.label}
strokeWidth={4}
@ -305,7 +314,7 @@ export function BarGraphVertical(props: BarGraphProps) {
<AxisBottom
scale={categoryScale}
top={valueMax + margin.top}
left={margin.left}
left={margin.left + bottomAxisLabelsOffset}
hideAxisLine
hideTicks
tickLabelProps={() => {

@ -0,0 +1,7 @@
import React from "react";
import { BarGraphVertical, BarGraphProps } from "./BarGraph";
export function Histogram(props: BarGraphProps) {
return <BarGraphVertical {...props} barPadding={0} shiftBottomAxis={true} />;
}

@ -106,3 +106,16 @@ export const mockQuoteDataLong = [
"Hello, world!",
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in enim neque. Sed sit amet convallis tellus. Integer condimentum a felis id gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam metus libero, sagittis in consectetur in, scelerisque sed sapien. Nullam ut feugiat sapien. Praesent dictum ac ipsum ac lacinia.",
];
export const mockHistogramData = [
{ category: "10", value: 88 },
{ category: "20", value: 16 },
{ category: "30", value: 22 },
{ category: "40", value: 20 },
{ category: "50", value: 45 },
{ category: "60", value: 17 },
{ category: "70", value: 35 },
{ category: "80", value: 27 },
{ category: "90", value: 54 },
{ category: "100", value: 50 },
];

@ -1,11 +1,13 @@
import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
import { BoxPlot } from "components/Boxplot";
import { Histogram } from "components/Histogram";
import {
mockCategoricalData,
moreMockCategoricalData,
mockBoxPlotData,
mockQuoteData,
mockQuoteDataLong,
mockHistogramData,
} from "data/mocks";
import React from "react";
@ -94,6 +96,22 @@ export default function Home() {
circleDiameter={180}
/>
</div>
<h2>
<code>{"<Histogram />"}</code>
</h2>
<Histogram
className={styles.barGraphDemo}
data={mockHistogramData}
width={800}
height={500}
margin={{
top: 20,
bottom: 80,
left: 50,
right: 60,
}}
/>
</div>
);
}

Loading…
Cancel
Save