@octanejs/visx 0.1.0

package/src/legend/util/renderShape.ts

@@ -0,0 +1,67 @@
+import { cloneElement, createElement, isValidElement } from 'octane';
+import RectShape from '../shapes/Rect.tsrx';
+import CircleShape from '../shapes/Circle.tsrx';
+import LineShape from '../shapes/Line.tsrx';
+
+import type {
+	LegendShape,
+	FormattedLabel,
+	FillAccessor,
+	SizeAccessor,
+	ShapeStyleAccessor,
+	RenderShapeProvidedProps,
+} from '../types';
+
+type RenderShapeArgs<Data, Output> = {
+	shape?: LegendShape<Data, Output>;
+	label: FormattedLabel<Data, Output>;
+	item: Data;
+	itemIndex: number;
+	fill?: FillAccessor<Data, Output>;
+	size?: SizeAccessor<Data, Output>;
+	shapeStyle?: ShapeStyleAccessor<Data, Output>;
+	width?: string | number;
+	height?: string | number;
+};
+
+const NO_OP = () => undefined;
+
+export default function renderShape<Data, Output>({
+	shape = 'rect',
+	fill = NO_OP,
+	size = NO_OP,
+	width,
+	height,
+	label,
+	item,
+	itemIndex,
+	shapeStyle = NO_OP,
+}: RenderShapeArgs<Data, Output>) {
+	const props: RenderShapeProvidedProps<Data, Output> = {
+		width,
+		height,
+		item,
+		itemIndex,
+		label,
+		fill: fill({ ...label }),
+		size: size({ ...label }),
+		style: shapeStyle({ ...label }),
+	};
+
+	if (typeof shape === 'string') {
+		if (shape === 'circle') {
+			return createElement(CircleShape, props);
+		}
+		if (shape === 'line') {
+			return createElement(LineShape, props);
+		}
+		return createElement(RectShape, props);
+	}
+	if (isValidElement(shape)) {
+		return cloneElement(shape, props);
+	}
+	if (shape) {
+		return createElement(shape as any, props);
+	}
+	return null;
+}

package/src/legend/util/valueOrIdentity.ts

@@ -0,0 +1,12 @@
+export type ValueOrIdentity<T> = T | { value?: T };
+
+/** Returns an object's value if defined, or the object. */
+export default function valueOrIdentity<T>(_: ValueOrIdentity<T>): T {
+	if (_ && typeof _ === 'object' && 'value' in _ && typeof _.value !== 'undefined') return _.value;
+	return _ as T;
+}
+
+/** Returns an object's value if defined, or the object, coerced to a string. */
+export function valueOrIdentityString<T>(_: ValueOrIdentity<T>): string {
+	return String(valueOrIdentity(_));
+}

package/src/marker/index.ts

@@ -0,0 +1,9 @@
+// @octanejs/visx/marker
+export { default as Marker } from './markers/Marker.tsrx';
+export { default as MarkerArrow } from './markers/Arrow.tsrx';
+export { default as MarkerCross } from './markers/Cross.tsrx';
+export { default as MarkerX } from './markers/X.tsrx';
+export { default as MarkerCircle } from './markers/Circle.tsrx';
+export { default as MarkerLine } from './markers/Line.tsrx';
+
+export type { MarkerProps, MarkerComponentProps } from './markers/Marker.tsrx';

package/src/marker/markers/Arrow.tsrx

@@ -0,0 +1,30 @@
+import type { MarkerComponentProps } from './Marker.tsrx';
+import Marker from './Marker.tsrx';
+
+export default function MarkerArrow({
+	id,
+	size = 9,
+	strokeWidth = 1,
+	...restProps
+}: MarkerComponentProps) {
+	const max = size + strokeWidth * 2;
+	const midX = size;
+	const midY = max / 2;
+	const points = `0 0, ${size} ${size / 2}, 0 ${size}`;
+	return <Marker
+		id={id}
+		markerWidth={max}
+		markerHeight={max}
+		refX={midX}
+		refY={midY}
+		orient="auto"
+		markerUnits="strokeWidth"
+		fill="none"
+		strokeWidth={strokeWidth}
+		{...restProps}
+	>
+		<g transform={`translate(${strokeWidth}, ${strokeWidth})`}>
+			<polyline points={points} />
+		</g>
+	</Marker>;
+}

package/src/marker/markers/Arrow.tsrx.d.ts

@@ -0,0 +1,3 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { MarkerComponentProps } from './Marker.tsrx';
+export default function MarkerArrow({ id, size, strokeWidth, ...restProps }: MarkerComponentProps): import("react").JSX.Element;

package/src/marker/markers/Circle.tsrx

@@ -0,0 +1,26 @@
+import type { MarkerComponentProps } from './Marker.tsrx';
+import Marker from './Marker.tsrx';
+
+export default function MarkerCircle({
+	id,
+	size = 9,
+	strokeWidth = 1,
+	...restProps
+}: MarkerComponentProps) {
+	const diameter = size * 2;
+	const bounds = diameter + strokeWidth;
+	const mid = bounds / 2;
+	return <Marker
+		id={id}
+		markerWidth={bounds}
+		markerHeight={bounds}
+		refX={0}
+		refY={mid}
+		orient="auto-start-reverse"
+		markerUnits="strokeWidth"
+		strokeWidth={strokeWidth}
+		{...restProps}
+	>
+		<circle r={size} cx={mid} cy={mid} />
+	</Marker>;
+}

package/src/marker/markers/Circle.tsrx.d.ts

@@ -0,0 +1,3 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { MarkerComponentProps } from './Marker.tsrx';
+export default function MarkerCircle({ id, size, strokeWidth, ...restProps }: MarkerComponentProps): import("react").JSX.Element;

package/src/marker/markers/Cross.tsrx

@@ -0,0 +1,27 @@
+import type { MarkerComponentProps } from './Marker.tsrx';
+import Marker from './Marker.tsrx';
+
+export default function MarkerCross({
+	id,
+	size = 9,
+	strokeWidth = 1,
+	...restProps
+}: MarkerComponentProps) {
+	const bounds = size + strokeWidth;
+	const mid = size / 2;
+	const points = `0 ${mid}, ${mid} ${mid}, ${mid} 0, ${mid} ${size}, ${mid} ${mid}, ${size} ${mid}`;
+	return <Marker
+		id={id}
+		markerWidth={bounds}
+		markerHeight={bounds}
+		refX={mid}
+		refY={mid}
+		orient="auto"
+		markerUnits="strokeWidth"
+		fill="none"
+		strokeWidth={strokeWidth}
+		{...restProps}
+	>
+		<polyline points={points} />
+	</Marker>;
+}

package/src/marker/markers/Cross.tsrx.d.ts

@@ -0,0 +1,3 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { MarkerComponentProps } from './Marker.tsrx';
+export default function MarkerCross({ id, size, strokeWidth, ...restProps }: MarkerComponentProps): import("react").JSX.Element;

package/src/marker/markers/Line.tsrx

@@ -0,0 +1,29 @@
+import type { MarkerComponentProps } from './Marker.tsrx';
+import Marker from './Marker.tsrx';
+
+export default function MarkerLine({
+	id,
+	size = 9,
+	fill,
+	stroke,
+	strokeWidth = 1,
+	...restProps
+}: MarkerComponentProps) {
+	const max = Math.max(size, strokeWidth * 2);
+	const midX = max / 2;
+	const midY = size / 2;
+	return <Marker
+		id={id}
+		markerWidth={max}
+		markerHeight={size}
+		refX={midX}
+		refY={midY}
+		orient="auto"
+		markerUnits="strokeWidth"
+		fill={fill || stroke}
+		stroke="none"
+		{...restProps}
+	>
+		<rect width={strokeWidth} height={size} x={midX} />
+	</Marker>;
+}

package/src/marker/markers/Line.tsrx.d.ts

@@ -0,0 +1,3 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { MarkerComponentProps } from './Marker.tsrx';
+export default function MarkerLine({ id, size, fill, stroke, strokeWidth, ...restProps }: MarkerComponentProps): import("react").JSX.Element;

package/src/marker/markers/Marker.tsrx

@@ -0,0 +1,46 @@
+import type { ReactNode, SVGProps } from 'react';
+import useStableId from '../../kernel/ids/useStableId.tsrx';
+
+export interface Props {
+	/** Unique id for the `<marker>`. Should be unique across all page elements. */
+	id?: string;
+	/** A number used to determine the size of the bounding box the marker content. */
+	size?: number;
+	/** The width of the marker viewport */
+	markerWidth?: string | number;
+	/** The height of the marker viewport */
+	markerHeight?: string | number;
+	/** Set the coordinate system for the markerWidth, markerHeight, and `<marker>` contents  */
+	markerUnits?: string;
+	/** The x coordinate for the reference point of the maker */
+	refX?: string | number;
+	/** The y coordinate for the reference point of the maker */
+	refY?: string | number;
+	/** The stroke width. constrained to a `number` type due to use in bounding box calculations */
+	strokeWidth?: number;
+	/** The <marker> contents. Typically one of: `<path>`, `<line>`, `<polyline>`, or `<polygon>` */
+	children: ReactNode;
+}
+
+export type MarkerProps = Props & Omit<SVGProps<SVGMarkerElement>, keyof Props>;
+export type MarkerComponentProps = Omit<MarkerProps, 'children'>;
+
+export default function Marker({
+	id,
+	markerWidth = 3,
+	markerHeight = 3,
+	markerUnits = 'userSpaceOnUse',
+	children,
+	...restProps
+}: MarkerProps) {
+	const generatedId = useStableId('visx-marker');
+	return <defs>
+		<marker
+			id={id ?? generatedId}
+			markerWidth={markerWidth}
+			markerHeight={markerHeight}
+			markerUnits={markerUnits}
+			{...restProps}
+		>{children}</marker>
+	</defs>;
+}

package/src/marker/markers/Marker.tsrx.d.ts

@@ -0,0 +1,25 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, SVGProps } from 'react';
+export interface Props {
+    /** Unique id for the `<marker>`. Should be unique across all page elements. */
+    id?: string;
+    /** A number used to determine the size of the bounding box the marker content. */
+    size?: number;
+    /** The width of the marker viewport */
+    markerWidth?: string | number;
+    /** The height of the marker viewport */
+    markerHeight?: string | number;
+    /** Set the coordinate system for the markerWidth, markerHeight, and `<marker>` contents  */
+    markerUnits?: string;
+    /** The x coordinate for the reference point of the maker */
+    refX?: string | number;
+    /** The y coordinate for the reference point of the maker */
+    refY?: string | number;
+    /** The stroke width. constrained to a `number` type due to use in bounding box calculations */
+    strokeWidth?: number;
+    /** The <marker> contents. Typically one of: `<path>`, `<line>`, `<polyline>`, or `<polygon>` */
+    children: ReactNode;
+}
+export type MarkerProps = Props & Omit<SVGProps<SVGMarkerElement>, keyof Props>;
+export type MarkerComponentProps = Omit<MarkerProps, 'children'>;
+export default function Marker({ id, markerWidth, markerHeight, markerUnits, children, ...restProps }: MarkerProps): import("react").JSX.Element;

package/src/marker/markers/X.tsrx

@@ -0,0 +1,6 @@
+import Cross from './Cross.tsrx';
+import type { MarkerComponentProps } from './Marker.tsrx';
+
+export default function MarkerX(props: MarkerComponentProps) {
+	return <Cross orient={45} {...props} />;
+}

package/src/marker/markers/X.tsrx.d.ts

@@ -0,0 +1,3 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { MarkerComponentProps } from './Marker.tsrx';
+export default function MarkerX(props: MarkerComponentProps): import("react").JSX.Element;

package/src/mock-data/generators/genBin.ts

@@ -0,0 +1,28 @@
+export type CountFunction = (idx: number, number: number) => number;
+export type BinFunction = (idx: number, number?: number) => number;
+
+export interface Bin {
+	bin: number;
+	count: number;
+}
+
+const defaultCount: CountFunction = (idx, number) => Math.random() * (25 * (number - idx));
+
+const defaultBin: BinFunction = (idx, length) => idx * 150;
+
+export default function genBin(
+	length: number,
+	bin: BinFunction = defaultBin,
+	count: CountFunction = defaultCount,
+): Bin[] {
+	return new Array(length).fill(1).reduce(
+		(data, d, i) =>
+			data.concat([
+				{
+					bin: bin(i, length),
+					count: count(i, length),
+				},
+			]),
+		[],
+	);
+}

package/src/mock-data/generators/genBins.ts

@@ -0,0 +1,27 @@
+import type { Bin as BinType, BinFunction, CountFunction } from './genBin';
+import genBin from './genBin';
+
+export type Bin = BinType;
+
+export interface Bins {
+	bin: number;
+	bins: Bin[];
+}
+
+export default function genBins(
+	length: number,
+	height: number,
+	bin?: BinFunction,
+	count?: CountFunction,
+): Bins[] {
+	return new Array(length).fill(1).reduce(
+		(arr, _, i) =>
+			arr.concat([
+				{
+					bin: i,
+					bins: genBin(height, bin, count),
+				},
+			]),
+		[],
+	);
+}

package/src/mock-data/generators/genDateValue.ts

@@ -0,0 +1,22 @@
+import getSeededRandom from './getSeededRandom';
+
+export interface DateValue {
+	date: Date;
+	value: number;
+}
+
+export default function genDateValue(
+	length: number,
+	/** Optional random seed in the interval [0, 1). */
+	seed?: number,
+	/** Optional start time in ms UTC. */
+	startTimeMs?: number,
+): DateValue[] {
+	const random = seed == null ? Math.random : getSeededRandom(seed);
+	const startDateMs = startTimeMs == null ? Date.now() : new Date(startTimeMs).valueOf();
+	return new Array(length).fill(1).map((_, idx: number) => ({
+		date: new Date(startDateMs - idx * 3600000),
+		// eslint-disable-next-line no-bitwise
+		value: (random() * 3000) | 0,
+	}));
+}

package/src/mock-data/generators/genPhyllotaxis.ts

@@ -0,0 +1,27 @@
+export interface GenPhyllotaxis {
+	radius: number;
+	width: number;
+	height: number;
+}
+export interface PhyllotaxisPoint {
+	x: number;
+	y: number;
+}
+
+export type GenPhyllotaxisFunction = (idx: number) => PhyllotaxisPoint;
+
+export default function genPhyllotaxis({
+	radius,
+	width,
+	height,
+}: GenPhyllotaxis): GenPhyllotaxisFunction {
+	const theta = Math.PI * (3 - Math.sqrt(5));
+	return (idx) => {
+		const r = radius * Math.sqrt(idx);
+		const a = theta * idx;
+		return {
+			x: width / 2 + r * Math.cos(a),
+			y: height / 2 + r * Math.sin(a),
+		};
+	};
+}

package/src/mock-data/generators/genRandomNormalPoints.ts

@@ -0,0 +1,32 @@
+import { randomNormal } from 'd3-random';
+import getSeededRandom from './getSeededRandom';
+
+export type PointConfig = [number, number, number];
+export type PointsRange = [number, number, number];
+
+const sqrt3: number = Math.sqrt(3);
+
+function range(length: number): number[] {
+	return new Array(length).fill(1);
+}
+
+export function genPointsRange(
+	length: number,
+	[offsetX, offsetY, index]: PointConfig,
+	random: () => number = randomNormal(0, 0.2),
+): PointsRange[] {
+	return range(length).map(() => [random() + offsetX, random() + offsetY, index]);
+}
+
+export default function genPoints(
+	count: number = 300,
+	/** Optional random seed in the interval [0, 1). */
+	seed: number | undefined = undefined,
+): PointsRange[] {
+	const random = seed == null ? undefined : randomNormal.source(getSeededRandom(seed))(0, 0.2);
+	return [
+		...genPointsRange(count, [sqrt3, 1, 0], random),
+		...genPointsRange(count, [-sqrt3, 1, 1], random),
+		...genPointsRange(count, [0, -1, 2], random),
+	];
+}

package/src/mock-data/generators/genStats.ts

@@ -0,0 +1,96 @@
+import { randomNormal } from 'd3-random';
+
+export interface BoxPlot {
+	x: string;
+	min: number;
+	firstQuartile: number;
+	median: number;
+	thirdQuartile: number;
+	max: number;
+	outliers: number[];
+}
+
+export interface BinData {
+	value: number;
+	count: number;
+}
+
+export interface Stats {
+	boxPlot: BoxPlot;
+	binData: BinData[];
+}
+
+const defaultRandom = randomNormal(4, 3);
+const defaultRandomOffset = () => Math.random() * 10;
+const sampleSize = 1000;
+
+export default function genStats(
+	/** Number of stat distributions to generate. */
+	number: number,
+	/** Function which generates a random number. */
+	random: () => number = defaultRandom,
+	/** Function which generates an offset for each data point / invocation of random. */
+	randomOffset: () => number = defaultRandomOffset,
+): Stats[] {
+	const data = [];
+
+	for (let i = 0; i < number; i += 1) {
+		const points = [];
+		const offset = randomOffset();
+
+		for (let j = 0; j < sampleSize; j += 1) {
+			points.push(offset + random());
+		}
+
+		points.sort((a, b) => a - b);
+
+		const firstQuartile = points[Math.round(sampleSize / 4)];
+		const thirdQuartile = points[Math.round((3 * sampleSize) / 4)];
+		const IQR = thirdQuartile - firstQuartile;
+
+		const min = firstQuartile - 1.5 * IQR;
+		const max = thirdQuartile + 1.5 * IQR;
+
+		const outliers = points.filter((p) => p < min || p > max);
+		const binWidth = 2 * IQR * (sampleSize - outliers.length) ** (-1 / 3);
+		const binNum = Math.round((max - min) / binWidth);
+		const actualBinWidth = (max - min) / binNum;
+
+		const bins: number[] = new Array(binNum + 2).fill(0);
+		const values: number[] = new Array(binNum + 2).fill(min);
+
+		for (let ii = 1; ii <= binNum; ii += 1) {
+			values[ii] += actualBinWidth * (ii - 0.5);
+		}
+
+		values[values.length - 1] = max;
+
+		points
+			.filter((p) => p >= min && p <= max)
+			.forEach((p) => {
+				bins[Math.floor((p - min) / actualBinWidth) + 1] += 1;
+			});
+
+		const binData: BinData[] = values.map((v: number, index) => ({
+			value: v,
+			count: bins[index],
+		}));
+
+		const boxPlot: BoxPlot = {
+			x: `Statistics ${i}`,
+			min,
+			firstQuartile,
+			median: points[Math.round(sampleSize / 2)],
+			thirdQuartile,
+			max,
+			outliers,
+		};
+
+		data.push({
+			boxPlot,
+			binData,
+		});
+	}
+
+	return data;
+}

package/src/mock-data/generators/getSeededRandom.ts

@@ -0,0 +1,9 @@
+import { randomLcg } from 'd3-random';
+
+// returns a seeded random number generator
+export default function getSeededRandom(
+	/** Seed in the interval [0, 1). */
+	seed: number,
+) {
+	return randomLcg(seed);
+}

package/src/mock-data/index.ts

@@ -0,0 +1,40 @@
+// @octanejs/visx/mock-data
+export { default as genDateValue } from './generators/genDateValue';
+export { default as genRandomNormalPoints } from './generators/genRandomNormalPoints';
+export { default as getSeededRandom } from './generators/getSeededRandom';
+export { randomNormal as getRandomNormal } from 'd3-random';
+export { default as genBin } from './generators/genBin';
+export { default as genBins } from './generators/genBins';
+export { default as genPhyllotaxis } from './generators/genPhyllotaxis';
+export { default as genStats } from './generators/genStats';
+export { default as appleStock } from './mocks/appleStock';
+export { default as bitcoinPrice } from './mocks/bitcoinPrice';
+export { default as letterFrequency } from './mocks/letterFrequency';
+export { default as browserUsage } from './mocks/browserUsage';
+export { default as groupDateValue } from './mocks/groupDateValue';
+export { default as cityTemperature } from './mocks/cityTemperature';
+export { default as lesMiserables } from './mocks/lesMiserables';
+export { default as exoplanets } from './mocks/exoplanets';
+export { default as planets } from './mocks/planets';
+export { default as shakespeare } from './mocks/shakespeare';
+
+export type { Bin, BinFunction, CountFunction } from './generators/genBin';
+export type { Bin as GenBin, Bins } from './generators/genBins';
+export type { DateValue } from './generators/genDateValue';
+export type {
+	GenPhyllotaxis,
+	GenPhyllotaxisFunction,
+	PhyllotaxisPoint,
+} from './generators/genPhyllotaxis';
+export type { PointConfig, PointsRange } from './generators/genRandomNormalPoints';
+export type { BinData, BoxPlot, Stats } from './generators/genStats';
+export type { AppleStock } from './mocks/appleStock';
+export type { BitcoinPrice, BitcoinPrices } from './mocks/bitcoinPrice';
+export type { BrowserUsage } from './mocks/browserUsage';
+export type { CityTemperature } from './mocks/cityTemperature';
+export type { Exoplanets } from './mocks/exoplanets';
+export type { GroupDateValue } from './mocks/groupDateValue';
+export type { LesMiserables, LesMiserablesLink, LesMiserablesNode } from './mocks/lesMiserables';
+export type { LetterFrequency } from './mocks/letterFrequency';
+export type { Planets } from './mocks/planets';
+export type { Shakespeare } from './mocks/shakespeare';