@viiksetjs/utils NPM

@viiksetjs/utils

This library contains useful functions for manipulating data for data visualizations. It does not necessarily have to be used in conjunction with @viiksetjs/web Some of these functions are used in building the default assumptions for @viiksetjs/web charts, and may or may not be useful own their own.

Exported Functions

Function Name	Signature	Desc
`parseIfDate`	`(data: any): Date \\| undefined`	takes any piece of data and tries to convert it into instance of Date. Returns undefined if the conversion fails
`parseObject`	`<T>(obj: Object, arg: string, applicator: (obj) => any): T[]`	takes and object, a `typeof` argument, and an applicator function. It will map through the object's values with the applicator, then filter the results according to the `typeof` argument
`getX`	`(data: GenericData[], xKey?: string): any[]`	takes an array of data objects and optionally an xKey and returns the xKey points for each object in the data array, or tries to parse a date from each object. Example: `getX([{messages: 123, users: 133}, {messages: 100, users: 33}, 'messages'])` would return: `[123, 100, ...]`
`getY`	`(data: GenericData[], yKey?: string): any[]`	same as `getX` except it tries to fall back to a number instead of trying to parse a Date. Example: `getY([{messages: 123, date: '11-10-2018'},{messages: 100, date: '08-10-2018'}, ...])` would result in `[123, 100,...]`
`extractX`	`(datum: Object, xKey?: string, type: string): any[]`	similar to `getX`, but instead of taking an array of data objects, it takes a single data object and extracts all x values from that object
`extractY`	`(datum: Object, xKey?: string): any[]`	same as `extractX`, but with y values
`extractLabels`	`(datum: Object): string[]`	takes a data object and extracts the y labels by parsing which values contain numbers
`createLinearScales`	`(data: GenericData[], dataKeys: string[], height: number, margin: Margin ): ScalarObject`	creates a vertical linear scale for each of the data keys found in the array of data objects. Example: `createLinearScales([{messages: 123, users: 333}, ...], ['messages', 'users'], 400, {top: 10, bottom: 10, left: 10, right: 10})` would result in: `{messages: scaleFunctionForMessages, users: scaleFunctionForUsers}`
`formatTime`	`(d: string): string`	default time formatter for viiksetjs, returns dates in the following format: Mon Jan 19 (ddd mmm DD)
`tooltipTime`	`(d: string): string`	default time format for tooltips, returns time in this format: Sun Jan 21st 20:29 (ddd mmm DD HH:MM)
`formatTicks`	`(d: string \\| number): string`	default tick formatter, if it the argument is a number, it will return `${arg}k` if the argument is over 1000, else it just returns the argument
`formatXTicks`	`(d: string \\| Date \\| number): string \\| number`	returns the default date format if the argument passed is a valid date, otherwise, just returns what it was given
`determineXScale`	`(type: 'ordinal'\\|'linear', xPoints: number[]\\|Date[]\\|string[], orientation?: 'horizontal', margin: Margin, width: number): ScaleFunction`	returns a horizontal scale based on the type of chart, width, and margin
`determineYScale`	`(type: 'ordinal'\\|'linear', orientation?: 'horizontal', yPoints: number[]\\|string[], height: number, margin: Margin ): ScaleFunction`	returns a vertical scale based on the type of chart, height, and margin
`findTooltipX`	`(calculatedX: any, xScale: ScaleFunction): number`	takes a calculated x value and returns its position in the chart based on the given xScale
`prepChartData`	`(size: Size, xKey?: string, yKey?: string, type: 'ordinal'\\|'linear', margin: Margin, data: GenericData[], orientation?: 'horizontal'): Promise<State>`	prepares x and y scales, calculates chart height and width, xPoints, yPoints, and datakeys
`interpolateColors`	`(a: string, b: string, amount: number): string`	interpolates between the given 2 numbers to get, for example, the color in between the two. Amount is a range from 0.0 - 1.1

Exported Types and Interfaces

Interface Name	Signature	Desc
`ScaleProps`	`{ type: string; xPoints: number[] \\| string[] \\| Date[]; yPoints: number[] \\| string[]; width: number; invertedRange: boolean; height: number; orientation: string;margin: Margin; }`	props passed to scale functions as `Partial<ScaleProps>`
`ScaleFunction`	`ScaleBand<R> \\| ScaleContinuousNumeric<R, O> \\| ScaleLinear<R, O> \\| ScaleTime<R, O> \\| ScaleOrdinal<R, O>`	represents the different scale functions in viiksetjs
`Margin`	`{ left: number; right: number; top: number; bottom: number; }`	margin for chart areas
`Size`	`{ width: number; height: number; }`	represents the size of the div containing the chart area
`ScalarObject`	`<R, O> { [key: string]: ScaleFunction<R, O>; }`	contains a scale function for each object key
`Axis`	`{ x: Partial<AxisProps>; y: Partial<AxisProps>; }`	represents the axis configuration object
`AxisProps`	`{ format(d: any, i: number): string; tickLabelProps( d: any, i: number): { fontWeight: number; strokeWidth: number \\| string; textAnchor: string; fontSize: number \\| string; }; tickFormat(d: any, i?: number): string \\| number; tickStroke: number \\| string; labelProps: Object; tickFormat(d: string \\| number, i?: number): string \\| number; label: string; numTicks: number; stroke: string; }`	represents the configuration for an x or y axis
`MouseMove`	`{ event: React.SyntheticEvent; xPoints: number[] \| string[]; xScale: ScaleFunction<any, any>; yScale: ScaleFunction<any, any>; yScales: false \| { key: string: ScaleFunction<any, any> }; dataKeys: string[]; datum?: Object; } \| represents the mouseMove event driving tooltip behavior
`InheritedChartProps`	`{ noTool: boolean; axes: Axis; xPoints: string[] \\| number[]; declareBar(): void; type: string; orientation?: 'horizontal'; mouseMove(args: any): void; mouseLeave(): void; xKey?: string; yKey?: string; height: number; width: number; margin: Margin; size: Size; yPoints: string[] \\| number[]; data: GenericData[]; xScale: ScaleFunction<any, any>; inheritedScale: ScaleFunction<any, any>; children: any; }`	props cloned into children by the `ChartArea` component using `recursiveCloneChildren`
`State`	`{ width: number; height: number; xScale?: ScaleFunction<Range, Output>; yScale?: ScaleFunction<Range, Output>; yScales?: { [key: string]: ScaleFunction<any, any> } \\| false; biaxialChildren?: boolean; dataKeys?: string[]; yPoints: number[] \\| string[]; xPoints: number[] \\| string[]; }`	contains the state of the processed data returned in Promise from `prepChartData`