` inside headings bigger than `` inside paragraphs so components headings are actually clearer as such… [#297](https://github.com/hshoff/vx/pull/297)
- [shape] Add Pie documentation. [#297](https://github.com/hshoff/vx/pull/297)
#### :white_check_mark: Tests
- [shape] Add tests for sort callbacks in the `Pie` component. [#292](https://github.com/hshoff/vx/pull/292)
#### :trophy: Contributors
- [yuchi](https://github.com/yuchi)
```
Changes:
- @vx/annotation: 0.0.162 => 0.0.164
- @vx/axis: 0.0.162 => 0.0.164
- @vx/demo: 0.0.163 => 0.0.164
- @vx/grid: 0.0.162 => 0.0.164
- @vx/marker: 0.0.162 => 0.0.164
- @vx/shape: 0.0.162 => 0.0.164
- @vx/threshold: 0.0.162 => 0.0.164
- @vx/vx: 0.0.163 => 0.0.164
```
# v0.0.163
#### :bug: Bug Fix
- [tooltip] don't pass `getRects` func prop from `withBoundingRects` to `Tooltip` [#290](https://github.com/hshoff/vx/pull/290)
#### :trophy: Contributors
- [williaster](https://github.com/williaster)
```
Changes:
- @vx/demo: 0.0.162 => 0.0.163
- @vx/tooltip: 0.0.161 => 0.0.163
- @vx/vx: 0.0.162 => 0.0.163
```
# v0.0.162
#### :rocket: Enhancements
- [threshold] add ` ({
textAnchor: 'middle',
verticalAnchor: 'middle',
width: 100,
scaleToFit: true
})
/>
```
- [axis] ` (
{formattedValue}
)}
/>
```
`tickComponent` accepts a function and gets called with the following attribute:
```js
tickComponent({ x, y, formattedValue, ...tickLabelPropsObj })
```
#### :memo: Documentation
- [axis] update `@vx/axis` documentation. [#260](https://github.com/hshoff/vx/pull/260)
- [demo] fix bargroup example code. [#250](https://github.com/hshoff/vx/pull/250)
- [demo] fix barstack example code. [#249](https://github.com/hshoff/vx/pull/249)
- [text] fix readme.md of `@vx/text` package. [#257](https://https://github.com/hshoff/vx/pull/257)
#### :trophy: Contributors
- [bulat-f](https://github.com/bulat-f)
- [sto3psl](https://github.com/sto3psl)
- [browniefed](https://github.com/browniefed)
```bash
Changes:
- @vx/axis: 0.0.158 => 0.0.159
- @vx/demo: 0.0.158 => 0.0.159
- @vx/text: 0.0.153 => 0.0.159
- @vx/vx: 0.0.158 => 0.0.159
```
# v0.0.158
#### :rocket: Enhancements
- [responsive] add debounceTime prop to ``, `` and `` components, which were incomplete [#208](https://github.com/hshoff/vx/pull/208)
#### :rocket: Enhancements
- [geo] Added pointRadius and fixed center [#213](https://github.com/hshoff/vx/pull/213)
- [text] Add new ``, with the following features
- Word-wrapping (when width prop is defined)
- Vertical alignment (verticalAnchor prop)
- Rotation (angle prop)
- Scale-to-fit text (scaleToFit prop)
#### :bug: Bug Fix
- [geo] Fixed center typo [#213](https://github.com/hshoff/vx/pull/213)
#### :memo: Documentation
- [responsive] Backticks import not working so, copy paste broken [#212](https://github.com/hshoff/vx/pull/212)
#### :house: Internal
- [text] Update `vx-text` author to @techniq [#210](https://github.com/hshoff/vx/pull/210)
```bash
Changes:
- @vx/demo: 0.0.149 => 0.0.150
- @vx/geo: 0.0.143 => 0.0.150
- @vx/responsive: 0.0.149 => 0.0.150
- @vx/text: 0.0.143 => 0.0.150
- @vx/vx: 0.0.149 => 0.0.150
```
# v0.0.149
#### :rocket: Enhancements
- [responsive] bump `resize-observer-polyfill` [#206](https://github.com/hshoff/vx/pull/206)
#### :bug: Bug Fix
- [demo] add overflow hidden on flex: 1 ` not on [#87](https://github.com/hshoff/vx/pull/87)
- [mock data] add mock/bitcoinPrice [#87](https://github.com/hshoff/vx/pull/87)
- [demo] add tooltip demo to dots and barstack, add legend to barstack [#87](https://github.com/hshoff/vx/pull/87)
- [shape] update `data` passed to each bar in
### visx
visx is a collection of reusable low-level visualization components. visx combines the power of d3
to generate your visualization with the benefits of react for updating the DOM.
Docs
•
Gallery
•
Blog
•
Discussions
•
Changelog
•
Getting started tutorial
## Usage
Let's make a simple bar graph.
First we'll install the relevant packages:
```bash
npm install --save @visx/mock-data @visx/group @visx/shape @visx/scale
```
```javascript
import React from 'react';
import { letterFrequency } from '@visx/mock-data';
import { Group } from '@visx/group';
import { Bar } from '@visx/shape';
import { scaleLinear, scaleBand } from '@visx/scale';
// We'll use some mock data from `@visx/mock-data` for this.
const data = letterFrequency;
// Define the graph dimensions and margins
const width = 500;
const height = 500;
const margin = { top: 20, bottom: 20, left: 20, right: 20 };
// Then we'll create some bounds
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;
// We'll make some helpers to get at the data we want
const x = (d) => d.letter;
const y = (d) => +d.frequency * 100;
// And then scale the graph by our data
const xScale = scaleBand({
range: [0, xMax],
round: true,
domain: data.map(x),
padding: 0.4,
});
const yScale = scaleLinear({
range: [yMax, 0],
round: true,
domain: [0, Math.max(...data.map(y))],
});
// Compose together the scale and accessor functions to get point functions
const compose = (scale, accessor) => (data) => scale(accessor(data));
const xPoint = compose(xScale, x);
const yPoint = compose(yScale, y);
// Finally we'll embed it all in an SVG
function BarGraph(props) {
return (
);
}
// ... somewhere else, render it ...
//
SVG `Annotation`s enable you to label points, thresholds, or regions of a visualization to provide
additional context to for your chart consumer. This package is heavily inspired by
[Susie Lu](https://github.com/susielu/)'s
[`react-annotation`](https://github.com/susielu/react-annotation) library.
Each annotation consists of three (optional) parts:
1. `Subject` (`CircleSubject`, `LineSubject`, more 🔜) – what part of a chart is being annotated
(point, line, region)
2. `Label` – the text component for the annotation. Handles SVG text wrapping using `@visx/text`,
and supports `title` and `subtitle` customization as well as vertical & horizontal anchors /
alignment
3. `Connector` – line connecting a subject and label
The `Annotation` or `EditableAnnotation` component wrappers allow you to compose these components
and simplify their individual positioning:
```tsx
...}
>
```
Components can also be used in isolation, in which case you must specify exact positions for each
item:
```tsx
() => (
)
```
##### ⚠️ `ResizeObserver` dependency
The `Label` component relies on `ResizeObserver`s for auto-sizing. If you need a polyfill, you can
either polute the `window` object or inject it cleanly through props:
```tsx
import { ResizeObserver } from 'your-favorite-polyfill';
function App() {
return
```
## Installation
```
npm install --save @visx/annotation
```
================================================
FILE: packages/visx-annotation/package.json
================================================
{
"name": "@visx/annotation",
"version": "4.0.1-alpha.0",
"description": "visx annotation",
"sideEffects": false,
"main": "lib/index.js",
"module": "esm/index.js",
"types": "lib/index.d.ts",
"exports": {
".": {
"types": "./lib/index.d.ts",
"import": "./esm/index.js",
"require": "./lib/index.js"
}
},
"files": [
"lib",
"esm"
],
"repository": {
"type": "git",
"url": "git+https://github.com/airbnb/visx.git"
},
"keywords": [
"visx",
"react",
"d3",
"visualizations",
"charts"
],
"author": "@hshoff",
"license": "MIT",
"bugs": {
"url": "https://github.com/airbnb/visx/issues"
},
"homepage": "https://github.com/airbnb/visx#readme",
"peerDependencies": {
"react": "^16.14.0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0"
},
"dependencies": {
"@types/react": "*",
"@visx/drag": "workspace:*",
"@visx/group": "workspace:*",
"@visx/text": "workspace:*",
"classnames": "^2.3.1",
"react-use-measure": "^2.0.4"
},
"devDependencies": {
"@juggle/resize-observer": "^3.3.1"
},
"publishConfig": {
"access": "public"
}
}
================================================
FILE: packages/visx-annotation/src/components/Annotation.tsx
================================================
import { useMemo, type ReactNode } from 'react';
import AnnotationContext from '../context/AnnotationContext';
import type { AnnotationContextType } from '../types';
export type AnnotationProps = Pick & {
/** Annotation children (Subject, Label, Connector) */
children: ReactNode;
};
export default function Annotation({ x, y, dx, dy, children }: AnnotationProps) {
const value = useMemo(() => ({ x, y, dx, dy }), [x, y, dx, dy]);
return {children} ;
}
================================================
FILE: packages/visx-annotation/src/components/CircleSubject.tsx
================================================
import { useContext, type SVGProps } from 'react';
import cx from 'classnames';
import type { AnnotationContextType } from '../types';
import AnnotationContext from '../context/AnnotationContext';
export type CircleSubjectProps = Pick & {
/** Optional className to apply to CircleSubject in addition to 'visx-annotation-subject'. */
className?: string;
/** Color of CircleSubject. */
stroke?: string;
/** Radius of CircleSubject. */
radius?: number;
};
export default function CircleSubject({
className,
x: propsX,
y: propsY,
stroke = '#222',
radius = 16,
...restProps
}: CircleSubjectProps & Omit, keyof CircleSubjectProps>) {
// if props are provided, they take precedence over context
const annotationContext = useContext(AnnotationContext);
return (
& {
/** Optional className to apply to container in addition to 'visx-annotation-connector'. */
className?: string;
/** Connector type. */
type?: 'line' | 'elbow';
/** Color of the connector line. */
stroke?: string;
/** Optional additional props. */
pathProps?: SVGProps;
};
export default function Connector({
className,
x: propsX,
y: propsY,
dx: propsDx,
dy: propsDy,
type = 'elbow',
stroke = '#222',
pathProps,
}: ConnectorProps) {
// if props are provided, they take precedence over context
const annotationContext = useContext(AnnotationContext);
const x0 = propsX == null ? annotationContext.x ?? 0 : propsX;
const y0 = propsY == null ? annotationContext.y ?? 0 : propsY;
const dx = propsDx == null ? annotationContext.dx ?? 0 : propsDx;
const dy = propsDy == null ? annotationContext.dy ?? 0 : propsDy;
let x1: number = x0; // only used with elbow type
let y1: number = y0;
const x2 = x0 + dx;
const y2 = y0 + dy;
if (type === 'elbow') {
// if dx < dy, find the intesection of y=x or y=-x from subject, with vertical line to label
if (Math.abs(dx) <= Math.abs(dy)) {
// target line is vertical x = x2
x1 = x2;
// intersection with y=x line (if dy > 0) or y=x (if dy < 0)
const sign = dy > 0 ? 1 : -1;
y1 = y0 + sign * Math.abs(x1 - x0);
}
// if dx > dy, find the intesection of y=x or y=-x from subject, with horizontal line to label
else {
// target line is horizontal y = y2
y1 = y2;
// find intersection with y=-x line (if dx > 0) or y=x (if dx < 0)
const sign = dx > 0 ? 1 : -1;
x1 = x0 + sign * Math.abs(y1 - y0);
}
}
return (
& {
/** Width of the possible drag canvas (e.g., SVG container). */
width: number;
/** Height of the possible drag canvas (e.g., SVG container). */
height: number;
/** Annotation children (Subject, Label, Connector) */
children: ReactNode;
/** Whether the Label position (dx, dy) is editable. */
canEditLabel?: boolean;
/** Whether the Subject position (x, y) is editable. */
canEditSubject?: boolean;
/** Optional circle props to set on the subject drag handle. */
subjectDragHandleProps?: SVGProps;
/** Optional circle props to set on the label drag handle. */
labelDragHandleProps?: SVGProps;
/** Callback invoked on drag start. */
onDragStart?: ({ x, y, dx, dy, event }: HandlerArgs) => void;
/** Callback invoked on drag move. */
onDragMove?: ({ x, y, dx, dy, event }: HandlerArgs) => void;
/** Callback invoked on drag end. */
onDragEnd?: ({ x, y, dx, dy, event }: HandlerArgs) => void;
};
export type HandlerArgs = {
x: number;
y: number;
dx: number;
dy: number;
event: MouseEvent | TouchEvent;
};
const defaultDragHandleProps = {
r: 10,
fill: 'transparent',
stroke: '#777',
strokeDasharray: '4,2',
strokeWidth: 2,
};
export default function EditableAnnotation({
canEditLabel = true,
canEditSubject = true,
children,
dx: labelDx = 0,
dy: labelDy = 0,
height,
labelDragHandleProps,
onDragEnd,
onDragMove,
onDragStart,
subjectDragHandleProps,
width,
x: subjectX = 0,
y: subjectY = 0,
}: EditableAnnotationProps) {
// chicken before the egg, we need these to reference drag state
// in drag callbacks which are defined before useDrag() state is available
const subjectDragRef = useRef(undefined);
const labelDragRef = useRef(undefined);
const handleDragStart = useCallback(
({ event }: DragHandlerArgs) => {
if (onDragStart) {
onDragStart({
event,
x: subjectX + (subjectDragRef.current?.dx ?? 0),
y: subjectY + (subjectDragRef.current?.dy ?? 0),
dx: labelDx + (labelDragRef.current?.dx ?? 0),
dy: labelDy + (labelDragRef.current?.dy ?? 0),
});
}
},
[labelDx, labelDy, onDragStart, subjectX, subjectY],
);
const handleDragMove = useCallback(
({ event }: DragHandlerArgs) => {
if (onDragMove) {
onDragMove({
event,
x: subjectX + (subjectDragRef.current?.dx ?? 0),
y: subjectY + (subjectDragRef.current?.dy ?? 0),
dx: labelDx + (labelDragRef.current?.dx ?? 0),
dy: labelDy + (labelDragRef.current?.dy ?? 0),
});
}
},
[labelDx, labelDy, onDragMove, subjectX, subjectY],
);
const handleDragEnd = useCallback(
({ event }: DragHandlerArgs) => {
if (onDragEnd) {
onDragEnd({
event,
x: subjectX + (subjectDragRef.current?.dx ?? 0),
y: subjectY + (subjectDragRef.current?.dy ?? 0),
dx: labelDx + (labelDragRef.current?.dx ?? 0),
dy: labelDy + (labelDragRef.current?.dy ?? 0),
});
}
},
[labelDx, labelDy, onDragEnd, subjectX, subjectY],
);
const subjectDrag = useDrag({
onDragStart: handleDragStart,
onDragMove: handleDragMove,
onDragEnd: handleDragEnd,
x: subjectX,
y: subjectY,
});
const labelDrag = useDrag({
onDragStart: handleDragStart,
onDragMove: handleDragMove,
onDragEnd: handleDragEnd,
x: labelDx,
y: labelDy,
});
// enable referencing these in the callbacks defined before useDrag is called
subjectDragRef.current = subjectDrag;
labelDragRef.current = labelDrag;
return (
<>
{children}
{subjectDrag.isDragging && (
, be aware that most non-browser SVG renderers will not render HTML s. See: https://github.com/airbnb/visx/issues/1173#issuecomment-1014380545. */
children?: ReactNode;
/** Optional styles to apply to the HTML container. */
containerStyle?: CSSProperties;
};
export default function HtmlLabel({
anchorLineStroke = '#222',
children,
className,
containerStyle,
horizontalAnchor: propsHorizontalAnchor,
resizeObserverPolyfill,
showAnchorLine = true,
verticalAnchor: propsVerticalAnchor,
x: propsX,
y: propsY,
}: HtmlLabelProps) {
// we must measure the rendered title + subtitle to compute container height
const [labelRef, titleBounds] = useMeasure({
polyfill: resizeObserverPolyfill,
});
const { width, height } = titleBounds;
// if props are provided, they take precedence over context
const { x = 0, y = 0, dx = 0, dy = 0 } = useContext(AnnotationContext);
// offset container position based on horizontal + vertical anchor
const horizontalAnchor =
propsHorizontalAnchor || (Math.abs(dx) < Math.abs(dy) ? 'middle' : dx > 0 ? 'start' : 'end');
const verticalAnchor =
propsVerticalAnchor || (Math.abs(dx) > Math.abs(dy) ? 'middle' : dy > 0 ? 'start' : 'end');
const containerCoords = useMemo(() => {
let adjustedX: number = propsX == null ? x + dx : propsX;
let adjustedY: number = propsY == null ? y + dy : propsY;
if (horizontalAnchor === 'middle') adjustedX -= width / 2;
if (horizontalAnchor === 'end') adjustedX -= width;
if (verticalAnchor === 'middle') adjustedY -= height / 2;
if (verticalAnchor === 'end') adjustedY -= height;
return { x: adjustedX, y: adjustedY };
}, [propsX, x, dx, propsY, y, dy, horizontalAnchor, verticalAnchor, width, height]);
return (
{children}
{showAnchorLine && (
Math.abs(dy) ? 'vertical' : 'horizontal'}
anchorLineStroke={anchorLineStroke}
verticalAnchor={verticalAnchor}
horizontalAnchor={horizontalAnchor}
width={width}
height={height}
/>
)}
);
}
================================================
FILE: packages/visx-annotation/src/components/Label.tsx
================================================
import { useContext, useMemo } from 'react';
import type { SVGProps, CSSProperties } from 'react';
import cx from 'classnames';
import { Group } from '@visx/group';
import type { TextProps } from '@visx/text';
import { Text, useText } from '@visx/text';
import type { Options as UseMeasureOptions } from 'react-use-measure';
import useMeasure from 'react-use-measure';
import AnnotationContext from '../context/AnnotationContext';
import AnchorLine from './LabelAnchorLine';
export type LabelProps = {
/** Stroke color of anchor line. */
anchorLineStroke?: string;
/** Background color of label. */
backgroundFill?: string;
/** Padding of text from background. */
backgroundPadding?: number | { top?: number; right?: number; bottom?: number; left?: number };
/** Additional props to be passed to background SVGRectElement. */
backgroundProps?: SVGProps;
/** Optional className to apply to container in addition to 'visx-annotation-label'. */
className?: string;
/** Color of title and subtitle text. */
fontColor?: string;
/** Whether the label is horizontally anchored to the start, middle, or end of its x position. */
horizontalAnchor?: TextProps['textAnchor'];
/** Optionally inject a ResizeObserver polyfill, else this *must* be globally available. */
resizeObserverPolyfill?: UseMeasureOptions['polyfill'];
/** Whether to render a line indicating label text anchor. */
showAnchorLine?: boolean;
/** Whether to render a label background. */
showBackground?: boolean;
/** Optional subtitle. */
subtitle?: string;
/** Optional title font size. */
subtitleFontSize?: TextProps['fontSize'];
/** Optional title font weight. */
subtitleFontWeight?: TextProps['fontWeight'];
/** The vertical offset of the subtitle from the title. */
subtitleDy?: number;
/** Optional subtitle Text props (to override color, etc.). */
subtitleProps?: Partial;
/** Optional title. */
title?: string;
/** Optional title font size. */
titleFontSize?: TextProps['fontSize'];
/** Optional title font weight. */
titleFontWeight?: TextProps['fontWeight'];
/** Optional title Text props (to override color, etc.). */
titleProps?: Partial;
/** Whether the label is vertically anchored to the start, middle, or end of its y position. */
verticalAnchor?: TextProps['verticalAnchor'];
/** Width of annotation, including background, for text wrapping. */
width?: number;
/** Max width of annotation, including background, for text wrapping. */
maxWidth?: number;
/** Left offset of entire AnnotationLabel, if not specified uses x + dx from Annotation. */
x?: number;
/** Top offset of entire AnnotationLabel, if not specified uses y + dy from Annotation. */
y?: number;
};
const DEFAULT_PADDING = { top: 12, right: 12, bottom: 12, left: 12 };
function getCompletePadding(padding: LabelProps['backgroundPadding']) {
if (typeof padding === 'undefined') return DEFAULT_PADDING;
if (typeof padding === 'number') {
return { top: padding, right: padding, bottom: padding, left: padding };
}
return { ...DEFAULT_PADDING, ...padding };
}
export default function Label({
anchorLineStroke = '#222',
backgroundFill = '#eaeaea',
backgroundPadding,
backgroundProps,
className,
fontColor = '#222',
horizontalAnchor: propsHorizontalAnchor,
resizeObserverPolyfill,
showAnchorLine = true,
showBackground = true,
subtitle,
subtitleDy = 4,
subtitleFontSize = 12,
subtitleFontWeight = 200,
subtitleProps,
title,
titleFontSize = 16,
titleFontWeight = 600,
titleProps,
verticalAnchor: propsVerticalAnchor,
width: propWidth,
maxWidth = 125,
x: propsX,
y: propsY,
}: LabelProps) {
// we must measure the rendered html content to compute container height
const [titleRef, titleBounds] = useMeasure({
polyfill: resizeObserverPolyfill,
});
const [subtitleRef, subtitleBounds] = useMeasure({
polyfill: resizeObserverPolyfill,
});
const padding = useMemo(() => getCompletePadding(backgroundPadding), [backgroundPadding]);
// if props are provided, they take precedence over context
const { x = 0, y = 0, dx = 0, dy = 0 } = useContext(AnnotationContext);
const height = Math.floor(
padding.top + padding.bottom + (titleBounds.height ?? 0) + (subtitleBounds.height ?? 0),
);
const { wordsByLines: titleWordsByLine } = useText({
children: title,
verticalAnchor: 'start',
capHeight: titleFontSize,
fontSize: titleFontSize,
fontWeight: titleFontWeight,
fontFamily: titleProps?.fontFamily,
width: maxWidth,
...titleProps,
});
const { wordsByLines: subtitleWordsByLine } = useText({
children: subtitle,
verticalAnchor: 'start',
capHeight: subtitleFontSize,
fontSize: subtitleFontSize,
fontWeight: subtitleFontWeight,
fontFamily: subtitleProps?.fontFamily,
width: maxWidth,
...subtitleProps,
});
const titleMeasuredWidth = titleWordsByLine.reduce(
(maxTitleWidth, line) => Math.max(maxTitleWidth, line.width ?? 0),
0,
);
const subtitleMeasuredWidth = subtitleWordsByLine.reduce(
(maxSubtitleWidth, line) => Math.max(maxSubtitleWidth, line.width ?? 0),
0,
);
const textMeasuredWidth = Math.ceil(
Math.min(maxWidth, Math.max(titleMeasuredWidth, subtitleMeasuredWidth)),
);
const measuredWidth = padding.right + padding.left + textMeasuredWidth;
const width = propWidth ?? measuredWidth;
const innerWidth = width - padding.left - padding.right;
// offset container position based on horizontal + vertical anchor
const horizontalAnchor =
propsHorizontalAnchor || (Math.abs(dx) < Math.abs(dy) ? 'middle' : dx > 0 ? 'start' : 'end');
const verticalAnchor =
propsVerticalAnchor || (Math.abs(dx) > Math.abs(dy) ? 'middle' : dy > 0 ? 'start' : 'end');
const containerCoords = useMemo(() => {
let adjustedX: number = propsX == null ? x + dx : propsX;
let adjustedY: number = propsY == null ? y + dy : propsY;
if (horizontalAnchor === 'middle') adjustedX -= width / 2;
if (horizontalAnchor === 'end') adjustedX -= width;
if (verticalAnchor === 'middle') adjustedY -= height / 2;
if (verticalAnchor === 'end') adjustedY -= height;
return { x: adjustedX, y: adjustedY };
}, [propsX, x, dx, propsY, y, dy, horizontalAnchor, verticalAnchor, width, height]);
const titleFontFamily = titleProps?.fontFamily;
const titleStyle = useMemo(
() => ({
fontSize: titleFontSize,
fontWeight: titleFontWeight,
fontFamily: titleFontFamily,
}),
[titleFontSize, titleFontWeight, titleFontFamily],
) as CSSProperties;
const subtitleFontFamily = subtitleProps?.fontFamily;
const subtitleStyle = useMemo(
() => ({
fontSize: subtitleFontSize,
fontWeight: subtitleFontWeight,
fontFamily: subtitleFontFamily,
}),
[subtitleFontSize, subtitleFontWeight, subtitleFontFamily],
) as CSSProperties;
return !title && !subtitle ? null : (
{showBackground && (
Math.abs(dy) ? 'vertical' : 'horizontal'}
anchorLineStroke={anchorLineStroke}
verticalAnchor={verticalAnchor}
horizontalAnchor={horizontalAnchor}
width={width}
height={height}
/>
)}
{title && (
{title}
)}
{subtitle && (
{subtitle}
)}
);
}
================================================
FILE: packages/visx-annotation/src/components/LabelAnchorLine.tsx
================================================
import type { TextProps } from '@visx/text';
interface AnchorLineProps {
anchorLineOrientation: 'horizontal' | 'vertical';
verticalAnchor: TextProps['verticalAnchor'];
horizontalAnchor: TextProps['textAnchor'];
anchorLineStroke: string;
width: number;
height: number;
}
export default function AnchorLine({
anchorLineOrientation,
anchorLineStroke,
verticalAnchor,
horizontalAnchor,
width,
height,
}: AnchorLineProps) {
const backgroundOutline = { stroke: anchorLineStroke, strokeWidth: 2 };
return (
<>
{anchorLineOrientation === 'horizontal' && verticalAnchor === 'start' && (
, keyof LineSubjectProps>) {
// if props are provided, they take precedence over context
const annotationContext = useContext(AnnotationContext);
const lineIsVertical = orientation === 'vertical';
return (
({});
export default AnnotationContext;
================================================
FILE: packages/visx-annotation/src/index.ts
================================================
// @visx/annotation
export { default as Connector } from './components/Connector';
export { default as Label } from './components/Label';
export { default as HtmlLabel } from './components/HtmlLabel';
export { default as CircleSubject } from './components/CircleSubject';
export { default as LineSubject } from './components/LineSubject';
export { default as Annotation } from './components/Annotation';
export { default as EditableAnnotation } from './components/EditableAnnotation';
export { default as AnnotationContext } from './context/AnnotationContext';
export type * from './types';
export type { AnnotationProps } from './components/Annotation';
export type { CircleSubjectProps } from './components/CircleSubject';
export type { ConnectorProps } from './components/Connector';
export type { EditableAnnotationProps } from './components/EditableAnnotation';
export type { HtmlLabelProps } from './components/HtmlLabel';
export type { LabelProps } from './components/Label';
export type { LineSubjectProps } from './components/LineSubject';
================================================
FILE: packages/visx-annotation/src/types/index.ts
================================================
export type AnnotationContextType = {
/** x position of the Subject. */
x?: number;
/** y position of the Subject. */
y?: number;
/** x delta of the Label from the Subject. */
dx?: number;
/** y delta of the Label from the Subject. */
dy?: number;
};
================================================
FILE: packages/visx-annotation/test/Annotation.test.tsx
================================================
import { render } from '@testing-library/react';
import React, { useContext } from 'react';
import { Annotation } from '../src';
import AnnotationContext from '../src/context/AnnotationContext';
describe('
,
);
});
});
================================================
FILE: packages/visx-annotation/test/CircleSubject.test.tsx
================================================
import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import { CircleSubject } from '../src';
describe(';
const defaultProps: EditableAnnotationProps = {
width: 100,
height: 100,
x: 0,
y: 0,
dx: 0,
dy: 0,
children: Child content,
};
function renderComponent(props?: Partial) {
return render(
,
);
}
beforeEach(() => {
vi.clearAllMocks();
addMock();
});
afterEach(removeMock);
it('should be defined', () => {
expect(() => renderComponent()).not.toThrow();
});
it('should render two resize handles by default', () => {
const { container } = renderComponent();
const circles = container.querySelectorAll('circle');
expect(circles).toHaveLength(2);
});
it('should render one resize handle if canEditLabel is false', () => {
const { container } = renderComponent({ canEditLabel: false });
const circles = container.querySelectorAll('circle');
expect(circles).toHaveLength(1);
});
it('should render one resize handle if canEditSubject is false', () => {
const { container } = renderComponent({ canEditSubject: false });
const circles = container.querySelectorAll('circle');
expect(circles).toHaveLength(1);
});
it('should render children content', () => {
const { getByTestId } = renderComponent();
expect(getByTestId('child-content')).toBeInTheDocument();
});
it('should render with correct initial positions', () => {
const { container } = renderComponent({
x: 10,
y: 20,
dx: 30,
dy: 40,
});
const circles = container.querySelectorAll('circle');
const [subjectHandle, labelHandle] = Array.from(circles);
expect(subjectHandle).toHaveAttribute('cx', '10');
expect(subjectHandle).toHaveAttribute('cy', '20');
expect(labelHandle).toHaveAttribute('cx', '40'); // x + dx
expect(labelHandle).toHaveAttribute('cy', '60'); // y + dy
});
});
================================================
FILE: packages/visx-annotation/test/HtmlLabel.test.tsx
================================================
import React from 'react';
import { ResizeObserver } from '@juggle/resize-observer';
import { render } from '@testing-library/react';
import { HtmlLabel } from '../src';
describe(') =>
render(
,
);
beforeEach(addMock);
afterEach(removeMock);
it('should be defined', () => {
expect(Label).toBeDefined();
});
it('should render title text', async () => {
const { findByText } = renderLabel({
title: 'title',
resizeObserverPolyfill: ResizeObserver,
});
expect(await findByText('title')).toBeInTheDocument();
});
it('should render subtitle text', async () => {
const { findByText } = renderLabel({
title: 'title',
subtitle: 'subtitle',
resizeObserverPolyfill: ResizeObserver,
});
expect(await findByText('subtitle')).toBeInTheDocument();
});
it('should render background', () => {
const { container } = renderLabel({
title: 'title',
showBackground: true,
resizeObserverPolyfill: ResizeObserver,
});
const rect = container.querySelector('rect');
expect(rect).toBeInTheDocument();
});
it('should render anchor line', () => {
const { container } = renderLabel({
title: 'title',
showAnchorLine: true,
resizeObserverPolyfill: ResizeObserver,
});
const line = container.querySelector('line');
expect(line).toBeInTheDocument();
});
});
================================================
FILE: packages/visx-annotation/test/LineSubject.test.tsx
================================================
import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import { LineSubject } from '../src';
describe('
An axis component consists of a line with ticks, tick labels, and an axis label that helps viewers
interpret your graph.
You can use one of the 4 pre-made axes, or you can create your own based on the ` = SharedAxisProps & {
orientation?: OrientationType;
};
export default function Axis({
children = AxisRenderer,
axisClassName,
hideAxisLine = false,
hideTicks = false,
hideZero = false,
innerRef,
left = 0,
numTicks = 10,
orientation = Orientation.bottom,
rangePadding = 0,
scale,
tickFormat,
tickLength = 8,
tickValues,
top = 0,
...restProps
}: AxisProps) {
const format = tickFormat ?? getTickFormatter(scale);
const isLeft = orientation === Orientation.left;
const isTop = orientation === Orientation.top;
const horizontal = isTop || orientation === Orientation.bottom;
const tickPosition = getTickPosition(scale);
const tickSign = isLeft || isTop ? -1 : 1;
const range = scale.range();
const rangePaddingConfig = getAxisRangePaddingConfig(rangePadding);
const axisFromPoint = createPoint(
{ x: Number(range[0]) + 0.5 - rangePaddingConfig.start, y: 0 },
horizontal,
);
const axisToPoint = createPoint(
{ x: Number(range[range.length - 1]) + 0.5 + rangePaddingConfig.end, y: 0 },
horizontal,
);
const filteredTickValues = (tickValues ?? getTicks(scale, numTicks))
.filter((value) => !hideZero || (value !== 0 && value !== '0'))
.map((value, index) => ({ value, index }));
const ticks = filteredTickValues.map(({ value, index }) => {
const scaledValue = coerceNumber(tickPosition(value));
return {
value,
index,
from: createPoint({ x: scaledValue, y: 0 }, horizontal),
to: createPoint({ x: scaledValue, y: tickLength * tickSign }, horizontal),
formattedValue: format(value, index, filteredTickValues),
};
});
return (
{children({
...restProps,
axisFromPoint,
axisToPoint,
hideAxisLine,
hideTicks,
hideZero,
horizontal,
numTicks,
orientation,
rangePadding,
scale,
tickFormat: format,
tickLength,
tickPosition,
tickSign,
ticks,
})}
);
}
================================================
FILE: packages/visx-axis/src/axis/AxisBottom.tsx
================================================
import cx from 'classnames';
import Axis from './Axis';
import Orientation from '../constants/orientation';
import type { SharedAxisProps, AxisScale } from '../types';
export const bottomTickLabelProps = {
dy: '0.25em',
fill: '#222',
fontFamily: 'Arial',
fontSize: 10,
textAnchor: 'middle',
} as const;
export default function AxisBottom({
axisClassName,
labelOffset = 8,
tickLength = 8,
tickLabelProps,
...restProps
}: SharedAxisProps) {
const tickLabelPropsFinal =
typeof tickLabelProps === 'function'
? tickLabelProps
: {
...bottomTickLabelProps,
...tickLabelProps,
};
return (
({
axisClassName,
labelOffset = 36,
tickLength = 8,
tickLabelProps,
...restProps
}: SharedAxisProps) {
const tickLabelPropsFinal =
typeof tickLabelProps === 'function'
? tickLabelProps
: {
...leftTickLabelProps,
...tickLabelProps,
};
return (
= {
textAnchor: 'middle',
fontFamily: 'Arial',
fontSize: 10,
fill: '#222',
};
export default function AxisRenderer({
axisFromPoint,
axisLineClassName,
axisToPoint,
hideAxisLine,
hideTicks,
horizontal,
label = '',
labelClassName,
labelOffset = 14,
labelProps,
orientation = Orientation.bottom,
scale,
stroke = '#222',
strokeDasharray,
strokeWidth = 1,
tickClassName,
tickComponent,
tickLineProps,
tickLabelProps,
tickLength = 8,
tickStroke = '#222',
tickTransform,
ticks,
ticksComponent = Ticks,
}: AxisRendererProps) {
const combinedLabelProps = {
...defaultTextProps,
...labelProps,
};
const tickLabelPropsDefault = {
...defaultTextProps,
...(typeof tickLabelProps === 'object' ? tickLabelProps : null),
};
// compute the max tick label size to compute label offset
const allTickLabelProps = ticks.map(({ value, index }) =>
typeof tickLabelProps === 'function'
? tickLabelProps(value, index, ticks)
: tickLabelPropsDefault,
);
const maxTickLabelFontSize = Math.max(
10,
...allTickLabelProps.map((props) => (typeof props.fontSize === 'number' ? props.fontSize : 0)),
);
return (
<>
{ticksComponent({
hideTicks,
horizontal,
orientation,
scale,
tickClassName,
tickComponent,
tickLabelProps: allTickLabelProps,
tickStroke,
tickTransform,
ticks,
strokeWidth,
tickLineProps,
})}
{!hideAxisLine && (
{label}
)}
);
}
================================================
FILE: packages/visx-axis/src/axis/AxisRight.tsx
================================================
import cx from 'classnames';
import Axis from './Axis';
import Orientation from '../constants/orientation';
import type { SharedAxisProps, AxisScale } from '../types';
export type AxisRightProps = SharedAxisProps;
export const rightTickLabelProps = {
dx: '0.25em',
dy: '0.25em',
fill: '#222',
fontFamily: 'Arial',
fontSize: 10,
textAnchor: 'start',
} as const;
export default function AxisRight({
axisClassName,
labelOffset = 36,
tickLength = 8,
tickLabelProps,
...restProps
}: AxisRightProps) {
const tickLabelPropsFinal =
typeof tickLabelProps === 'function'
? tickLabelProps
: {
...rightTickLabelProps,
...tickLabelProps,
};
return (
= SharedAxisProps;
export const topTickLabelProps = {
dy: '-0.75em',
fill: '#222',
fontFamily: 'Arial',
fontSize: 10,
textAnchor: 'middle',
} as const;
export default function AxisTop({
axisClassName,
labelOffset = 8,
tickLength = 8,
tickLabelProps,
...restProps
}: AxisTopProps) {
const tickLabelPropsFinal =
typeof tickLabelProps === 'function'
? tickLabelProps
: {
...topTickLabelProps,
...tickLabelProps,
};
return (
({
hideTicks,
horizontal,
orientation,
tickClassName,
tickComponent,
tickLabelProps: allTickLabelProps,
tickStroke = '#222',
tickTransform,
ticks,
strokeWidth,
tickLineProps,
}: TicksRendererProps) {
return ticks.map(({ value, index, from, to, formattedValue }) => {
const tickLabelProps = allTickLabelProps[index] ?? {};
const tickLabelFontSize = Math.max(
10,
(typeof tickLabelProps.fontSize === 'number' && tickLabelProps.fontSize) || 0,
);
const tickYCoord =
to.y + (horizontal && orientation !== Orientation.top ? tickLabelFontSize : 0);
return (
{!hideTicks && (
{formattedValue}
)}
);
});
}
================================================
FILE: packages/visx-axis/src/constants/orientation.ts
================================================
import type { ValueOf } from '@visx/scale';
const Orientation = {
top: 'top',
left: 'left',
right: 'right',
bottom: 'bottom',
} as const;
export type OrientationType = ValueOf;
export default Orientation;
================================================
FILE: packages/visx-axis/src/index.ts
================================================
// @visx/axis
export { default as Axis } from './axis/Axis';
export type { AxisProps } from './axis/Axis';
export { default as AxisLeft } from './axis/AxisLeft';
export { default as AxisRight } from './axis/AxisRight';
export { default as AxisTop } from './axis/AxisTop';
export { default as AxisBottom } from './axis/AxisBottom';
export { default as Orientation } from './constants/orientation';
export type * from './types';
================================================
FILE: packages/visx-axis/src/types.ts
================================================
import type { D3Scale, NumberLike, ScaleInput, ValueOf } from '@visx/scale';
import type { TextProps } from '@visx/text';
import type { ReactNode, Ref, SVGProps } from 'react';
import type Orientation from './constants/orientation';
// In order to plot values on an axis, output of the scale must be number.
// Some scales return undefined.
export type AxisScaleOutput = number | NumberLike | undefined;
/** A catch-all type for scales that are compatible with axis */
export type AxisScale