lucid-ui
Version:
A UI component library from Xandr.
106 lines • 4.81 kB
TypeScript
import React from 'react';
import PropTypes from 'prop-types';
import * as d3scale from 'd3-scale';
import { StandardProps, Overwrite } from '../../util/component-types';
export interface IAxisPropsRaw extends StandardProps {
/** Must be a d3 scale. Lucid exposes the \`lucid.d3Scale\` library for use here.
We support `ScaleTime | ScaleBand | ScalePoint` and possibly more. */
scale: d3scale.ScaleBand<number> | d3scale.ScalePoint<number> | d3scale.ScaleContinuousNumeric<number, number> | d3scale.ScaleTime<number, number>;
/** Size of the ticks for each discrete tick mark. */
innerTickSize: number;
/** Size of the tick marks found at the beginning and end of the axis. It's
common to set this to \`0\` to remove them. */
outerTickSize: number;
/** An optional function that can format ticks. Generally this shouldn't be
needed since d3 has very good default formatters for most data. */
tickFormat?: (d: number | Date) => string;
/** If you need fine grained control over the axis ticks, you can pass them
in this array. */
ticks?: Array<number | Date>;
/** Determines the spacing between each tick and its text. */
tickPadding: number;
/** Determines the orientation of the ticks. \`left\` and \`right\` will
generate a vertical axis, whereas \`top\` and \`bottom\` will generate a
horizontal axis. */
orient: 'top' | 'bottom' | 'left' | 'right';
/** Control the number of ticks displayed. If the scale is time based or
linear, this number acts a "hint" per the default behavior of D3. If it's
an ordinal scale, this number is treated as an absolute number of ticks
to display and is powered by our own utility function \`discreteTicks\`. */
tickCount: number | null;
/** Determines the orientation of the tick text. This may override what the orient prop
tries to determine. This defaults to `horizontal`. */
textOrientation: 'vertical' | 'horizontal' | 'diagonal';
}
export declare type IAxisProps = Overwrite<React.SVGAttributes<SVGGElement>, IAxisPropsRaw>;
export declare const Axis: {
(props: IAxisProps): React.ReactElement;
defaultProps: {
innerTickSize: number;
outerTickSize: number;
tickPadding: number;
textOrientation: "horizontal";
orient: "bottom";
tickCount: null;
};
displayName: string;
peek: {
description: string;
categories: string[];
};
propTypes: {
/**
Appended to the component-specific class names set on the root element.
*/
className: PropTypes.Requireable<string>;
/**
Must be a d3 scale. Lucid exposes the \`lucid.d3Scale\` library for use
here.
*/
scale: PropTypes.Validator<(...args: any[]) => any>;
/**
Size of the ticks for each discrete tick mark.
*/
innerTickSize: PropTypes.Requireable<number>;
/**
Size of the tick marks found at the beginning and end of the axis. It's
common to set this to \`0\` to remove them.
*/
outerTickSize: PropTypes.Requireable<number>;
/**
An optional function that can format ticks. Generally this shouldn't be
needed since d3 has very good default formatters for most data.
Signature: \`(tick) => {}\`
*/
tickFormat: PropTypes.Requireable<(...args: any[]) => any>;
/**
If you need fine grained control over the axis ticks, you can pass them
in this array.
*/
ticks: PropTypes.Requireable<any[]>;
/**
Determines the spacing between each tick and its text.
*/
tickPadding: PropTypes.Requireable<number>;
/**
Determines the orientation of the ticks. \`left\` and \`right\` will
generate a vertical axis, whereas \`top\` and \`bottom\` will generate a
horizontal axis.
*/
orient: PropTypes.Requireable<string>;
/**
Control the number of ticks displayed. If the scale is time based or
linear, this number acts a "hint" per the default behavior of D3. If it's
an ordinal scale, this number is treated as an absolute number of ticks
to display and is powered by our own utility function \`discreteTicks\`.
*/
tickCount: PropTypes.Requireable<number>;
/**
Determines the orientation of the tick text. This may override what the orient prop
tries to determine. This defaults to \`horizontal\`.
*/
textOrientation: PropTypes.Requireable<string>;
};
};
export default Axis;
//# sourceMappingURL=Axis.d.ts.map