@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 theChartAreacomponent usingrecursiveCloneChildren| |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 fromprepChartData` |