Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@influxdata/giraffe

Package Overview
Dependencies
Maintainers
21
Versions
179
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@influxdata/giraffe - npm Package Compare versions

Comparing version 0.23.0 to 0.24.0

dist/components/DapperScrollbars.d.ts

5

dist/components/Axes.d.ts
import { FunctionComponent, CSSProperties } from 'react';
import { Margins, Scale, SizedConfig, Formatter } from '../types';
import { Margins, Scale, SizedConfig, Formatter, ColumnType } from '../types';
import { PlotEnv } from '../utils/PlotEnv';

@@ -16,3 +16,3 @@ interface Props {

xTicks: number[];
yTicks: number[];
yTicks: Array<number | string>;
xTickFormatter: Formatter;

@@ -23,2 +23,3 @@ yTickFormatter: Formatter;

config: SizedConfig;
yColumnType?: ColumnType;
}

@@ -25,0 +26,0 @@ export declare const drawAxes: ({ canvas, innerWidth, innerHeight, margins, xDomain, yDomain, xTicks, yTicks, xTickFormatter, yTickFormatter, xScale, yScale, config: { width, height, axisColor, axisOpacity, gridColor, gridOpacity, tickFont, tickFontColor, xAxisLabel, yAxisLabel, }, }: DrawAxesOptions) => void;

@@ -0,1 +1,69 @@

export declare enum InfluxColors {
Obsidian = "#0f0e15",
Raven = "#181820",
Kevlar = "#202028",
Castle = "#292933",
Onyx = "#31313d",
Pepper = "#383846",
Smoke = "#434453",
Graphite = "#545667",
Storm = "#676978",
Mountain = "#757888",
Wolf = "#8e91a1",
Sidewalk = "#999dab",
Forge = "#a4a8b6",
Mist = "#bec2cc",
Chromium = "#c6cad3",
Platinum = "#d4d7dd",
Pearl = "#e7e8eb",
Whisper = "#eeeff2",
Cloud = "#f6f6f8",
Ghost = "#fafafc",
White = "#ffffff",
Abyss = "#120653",
Sapphire = "#0b3a8d",
Ocean = "#066fc5",
Pool = "#00a3ff",
Laser = "#00C9FF",
Hydrogen = "#6BDFFF",
Neutrino = "#BEF0FF",
Yeti = "#F0FCFF",
Shadow = "#2b007e",
Void = "#5c10a0",
Amethyst = "#8e1fc3",
Star = "#be2ee4",
Comet = "#ce58eb",
Potassium = "#dd84f1",
Moonstone = "#ebadf8",
Twilight = "#fad9ff",
Gypsy = "#003e34",
Emerald = "#006f49",
Viridian = "#009f5f",
Rainforest = "#34bb55",
Honeydew = "#67d74e",
Krypton = "#9bf445",
Wasabi = "#c6f98e",
Mint = "#f3ffd6",
Oak = "#3F241F",
Topaz = "#E85B1C",
Tiger = "#F48D38",
Pineapple = "#FFB94A",
Thunder = "#FFD255",
Sulfur = "#FFE480",
Daisy = "#FFF6B8",
Banana = "#FFFDDE",
Basalt = "#2F1F29",
Ruby = "#BF3D5E",
Fire = "#DC4E58",
Curacao = "#F95F53",
Dreamsicle = "#FF8564",
Tungsten = "#FFB6A0",
Marmelade = "#FFDCCF",
Flan = "#FFF7F4",
Chartreuse = "#D6F622",
DeepPurple = "#13002D",
Magenta = "#BF2FE5",
Galaxy = "#9394FF",
Pulsar = "#513CC6"
}
export declare const VIRIDIS: string[];

@@ -2,0 +70,0 @@ export declare const MAGMA: string[];

1

dist/constants/columnKeys.d.ts

@@ -12,1 +12,2 @@ export declare const X_MIN = "xMin";

export declare const LINE_COUNT = "lines";
export declare const SERIES = "series";

@@ -11,2 +11,2 @@ export { Plot } from './components/Plot';

export * from './constants/gaugeStyles';
export { ColumnData, ColumnType, Config, DomainLabel, Formatter, GaugeTheme, GaugeLayerConfig, HistogramLayerConfig, HistogramPosition, LayerConfig, LayerTypes, LineInterpolation, LineLayerConfig, LinePosition, Margins, NumericColumnData, Scale, SingleStatLayerConfig, Table, } from './types';
export { ColumnData, ColumnType, Config, DomainLabel, Formatter, GaugeTheme, GaugeLayerConfig, HistogramLayerConfig, HistogramPosition, LayerConfig, LayerTypes, LineInterpolation, LineLayerConfig, LinePosition, Margins, NumericColumnData, RawFluxDataTableLayerConfig, Scale, SingleStatLayerConfig, Table, } from './types';

@@ -12,2 +12,3 @@ /// <reference types="react" />

gridOpacity?: number;
cursor?: string;
showAxes?: boolean;

@@ -17,3 +18,3 @@ axisColor?: string;

xTicks?: number[];
yTicks?: number[];
yTicks?: Array<number | string>;
tickFont?: string;

@@ -28,3 +29,4 @@ tickFontColor?: string;

yScale?: string;
table: Table;
table?: Table;
fluxResponse?: string;
layers: LayerConfig[];

@@ -44,2 +46,3 @@ xDomain?: number[];

legendColumns?: string[];
yColumnType?: ColumnType;
}

@@ -74,2 +77,3 @@ export declare enum FormatterType {

export declare enum LayerTypes {
RawFluxDataTable = "flux data table",
Gauge = "gauge",

@@ -81,5 +85,6 @@ Custom = "custom",

Line = "line",
Scatter = "scatter"
Scatter = "scatter",
Mosaic = "mosaic"
}
export declare type LayerConfig = CustomLayerConfig | GaugeLayerConfig | SingleStatLayerConfig | HeatmapLayerConfig | HistogramLayerConfig | LineLayerConfig | ScatterLayerConfig;
export declare type LayerConfig = CustomLayerConfig | RawFluxDataTableLayerConfig | GaugeLayerConfig | SingleStatLayerConfig | HeatmapLayerConfig | HistogramLayerConfig | LineLayerConfig | ScatterLayerConfig | MosaicLayerConfig;
export interface CustomLayerConfig {

@@ -99,4 +104,12 @@ type: 'custom';

innerHeight: number;
yColumnType: ColumnType;
columnFormatter: (colKey: string) => (x: any) => string;
}
export interface RawFluxDataTableLayerConfig {
type: 'flux data table';
files: string[];
width: number;
height: number;
disableVerticalScrolling?: boolean;
}
export interface GaugeLayerConfig {

@@ -175,2 +188,15 @@ type: 'gauge';

}
export interface MosaicLayerConfig {
type: 'mosaic';
x: string;
y: string;
fill?: string[];
hoverDimension?: MosaicHoverDimension | 'auto';
colors?: string[];
symbol?: string[];
strokeWidth?: number;
strokePadding?: number;
strokeOpacity?: number;
fillOpacity?: number;
}
export declare type RectLayerConfig = HeatmapLayerConfig | HistogramLayerConfig;

@@ -199,8 +225,39 @@ export interface LineLayerConfig {

}
export declare type LayerSpec = LineLayerSpec | ScatterLayerSpec | RectLayerSpec;
export interface FluxTable {
id: string;
name: string;
data: string[][];
result: string;
groupKey: {
[columnName: string]: string;
};
dataTypes: {
[columnName: string]: string;
};
}
export declare type LayerSpec = LineLayerSpec | ScatterLayerSpec | RectLayerSpec | MosaicLayerSpec;
export declare enum SpecTypes {
Line = "line",
Scatter = "scatter",
Rect = "rect"
Rect = "rect",
Mosaic = "mosaic"
}
export interface MosaicLayerSpec {
type: 'mosaic';
inputTable: Table;
table: Table;
xDomain: number[];
yDomain: number[];
xColumnKey: string;
yColumnKey: string;
xColumnType: ColumnType;
yColumnType: ColumnType;
scales: {
fill: Scale<number, string>;
};
columnGroupMaps: {
fill: ColumnGroupMap;
};
yTicks: Array<string>;
}
export interface LineLayerSpec {

@@ -269,2 +326,3 @@ type: 'line';

plotConfig: SizedConfig;
yColumnType: ColumnType;
columnFormatter: (colKey: string) => (x: any) => string;

@@ -308,2 +366,4 @@ hoverX: number | null;

export declare type HistogramPosition = 'overlaid' | 'stacked';
export declare type MosaicPosition = 'stacked';
export declare type MosaicHoverDimension = 'x' | 'y' | 'xy';
export declare type SymbolType = 'circle' | 'triangle' | 'square' | 'plus' | 'tritip' | 'ex';

@@ -310,0 +370,0 @@ export interface ColumnGroupMap {

import { Formatter, FormatterType } from '../types';
interface TimeFormatter extends Formatter {
(x: number, options?: {
(timestamp: number, options?: {
domainWidth?: number;

@@ -5,0 +5,0 @@ }): string;

@@ -1,2 +0,2 @@

export declare const getMargins: (showAxes: boolean, xAxisLabel: string, yAxisLabel: string, yTicks: number[], yTickFormatter: (tick: number) => string, tickFont: string) => {
export declare const getMargins: (showAxes: boolean, xAxisLabel: string, yAxisLabel: string, yTicks: (string | number)[], yTickFormatter: (tick: string | number) => string, tickFont: string) => {
top: number;

@@ -3,0 +3,0 @@ right: number;

export declare const identityMerge: <S extends object, T extends object>(source: S, target: T) => T;
export declare const enumeratePaths: (target: any, pathToTarget?: string[], acc?: string[][]) => string[][];
export declare const getByPath: (target: any, path: string[]) => any;
export declare const setByPath: (target: any, path: string[], value: any) => void;
declare type Path = string[];
export declare const enumeratePaths: (target: any, pathToTarget?: Path, acc?: Path[]) => Path[];
export declare const getByPath: (target: any, path: Path) => any;
export declare const setByPath: (target: any, path: Path, value: any) => void;
export declare const isEqual: (a: any, b: any) => boolean;
export {};

@@ -1,2 +0,3 @@

import { Table } from '../types';
import { Table, Config } from '../types';
export declare const newTable: (length: number) => Table;
export declare const newTableFromConfig: (config: Config) => Table;

@@ -1,2 +0,2 @@

import { Formatter, LayerSpec, Margins, Scale, SizedConfig } from '../types';
import { ColumnType, Formatter, LayerSpec, Margins, Scale, SizedConfig } from '../types';
export declare class PlotEnv {

@@ -7,23 +7,28 @@ private _config;

private fns;
config: SizedConfig | null;
readonly margins: Margins;
readonly innerWidth: number;
readonly innerHeight: number;
readonly xTicks: number[];
readonly yTicks: number[];
readonly xScale: Scale<number, number>;
readonly yScale: Scale<number, number>;
xDomain: number[];
yDomain: number[];
readonly xTickFormatter: Formatter;
readonly yTickFormatter: Formatter;
get config(): SizedConfig | null;
set config(config: SizedConfig);
get margins(): Margins;
get innerWidth(): number;
get innerHeight(): number;
get xTicks(): number[];
get yTicks(): Array<number | string>;
get xScale(): Scale<number, number>;
get yScale(): Scale<number, number>;
get yColumnType(): ColumnType;
set yColumnType(columnType: ColumnType);
get xDomain(): number[];
set xDomain(newXDomain: number[]);
get yDomain(): number[];
set yDomain(newYDomain: number[]);
get xTickFormatter(): Formatter;
get yTickFormatter(): Formatter;
getSpec(layerIndex: number): LayerSpec;
getFormatterForColumn: (colKey: string) => Formatter;
resetDomains: () => void;
private readonly isXControlled;
private readonly isYControlled;
private get isXControlled();
private get isYControlled();
private getXDomain;
private getYDomain;
private getColumnTypeByKey;
private readonly rangePadding;
private get rangePadding();
}

@@ -1,4 +0,4 @@

import { Table, Scale, TooltipColumn, ColumnGroupMap } from '../types';
import { Table, Scale, TooltipData, ColumnGroupMap } from '../types';
export declare const findHoveredRects: (rectTable: Table, hoverX: number, hoverY: number, xScale: Scale<number, number>, yScale: Scale<number, number>, binDimension: "xy" | "x") => number[];
export declare const get1DTooltipData: (hoveredRectRows: number[], rectTable: Table, inputTable: Table, xColKey: string, fillGroupMap: ColumnGroupMap, fillScale: Scale<number, string>, columnFormatter: (colKey: string) => (x: any) => string) => TooltipColumn[];
export declare const get2DTooltipData: (hoveredRectRows: number[], rectTable: Table, inputTable: Table, xColKey: string, yColKey: string, columnFormatter: (colKey: string) => (x: any) => string) => TooltipColumn[];
export declare const get1DTooltipData: (hoveredRectRows: number[], rectTable: Table, inputTable: Table, xColKey: string, fillGroupMap: ColumnGroupMap, fillScale: Scale<number, string>, columnFormatter: (colKey: string) => (x: any) => string) => TooltipData;
export declare const get2DTooltipData: (hoveredRectRows: number[], rectTable: Table, inputTable: Table, xColKey: string, yColKey: string, columnFormatter: (colKey: string) => (x: any) => string) => TooltipData;

@@ -1,3 +0,3 @@

import { LinePosition, LineData, TooltipColumn, Scale, Table } from '../types';
import { LinePosition, LineData, TooltipData, Scale, Table } from '../types';
export declare const getRangeLabel: (min: number, max: number, formatter: any) => string;
export declare const getPointsTooltipData: (hoveredRowIndices: number[], table: Table, xColKey: string, yColKey: string, groupColKey: string, getValueFormatter: (colKey: string) => (x: any) => string, fillColKeys: string[], fillScale: Scale<number, string>, position?: LinePosition, lineData?: LineData) => TooltipColumn[];
export declare const getPointsTooltipData: (hoveredRowIndices: number[], table: Table, xColKey: string, yColKey: string, groupColKey: string, getValueFormatter: (colKey: string) => (x: any) => string, fillColKeys: string[], fillScale: Scale<number, string>, position?: LinePosition, lineData?: LineData) => TooltipData;

@@ -1,2 +0,2 @@

import { MutableRefObject } from 'react';
export declare const useCanvas: (canvasRef: MutableRefObject<HTMLCanvasElement>, width: number, height: number, renderFunction: (context: CanvasRenderingContext2D) => void, renderFunctionDeps?: readonly any[]) => void;
import { DependencyList, MutableRefObject } from 'react';
export declare const useCanvas: (canvasRef: MutableRefObject<HTMLCanvasElement>, width: number, height: number, renderFunction: (context: CanvasRenderingContext2D) => void, renderFunctionDeps?: DependencyList) => void;
import { Scale, NumericColumnData } from '../types';
export declare const useHoverPointIndices: (mode: "x" | "y" | "xy", mouseX: number, mouseY: number, xColData: NumericColumnData, yColData: NumericColumnData, groupColData: NumericColumnData, xScale: Scale<number, number>, yScale: Scale<number, number>, width: number, height: number) => number[];
export declare const useHoverPointIndices: (mode: "x" | "y" | "xy", mouseX: number, mouseY: number, xColumnData: NumericColumnData, yColumnData: NumericColumnData, groupColData: NumericColumnData, xScale: Scale<number, number>, yScale: Scale<number, number>, width: number, height: number) => number[];

@@ -1,1 +0,2 @@

export declare const useLazyMemo: <T>(factory: () => T, deps: readonly any[], canCompute: boolean) => T;
import { DependencyList } from 'react';
export declare const useLazyMemo: <T>(factory: () => T, deps: DependencyList, canCompute: boolean) => T;

@@ -1,2 +0,2 @@

import { EffectCallback } from 'react';
export declare const useMountedEffect: (effect: EffectCallback, inputs?: readonly any[]) => void;
import { EffectCallback, DependencyList } from 'react';
export declare const useMountedEffect: (effect: EffectCallback, inputs?: DependencyList) => void;
{
"name": "@influxdata/giraffe",
"version": "0.23.0",
"version": "0.24.0",
"main": "dist/index.js",

@@ -22,2 +22,3 @@ "license": "MIT",

"histogram",
"mosaic",
"influxdb",

@@ -34,2 +35,4 @@ "layer",

"devDependencies": {
"@rollup/plugin-commonjs": "^13.0.0",
"@rollup/plugin-node-resolve": "^8.1.0",
"@types/d3-array": "^2.0.0",

@@ -48,2 +51,3 @@ "@types/d3-color": "^1.2.2",

"@typescript-eslint/parser": "^2.10.0",
"classnames": "^2.2.3",
"d3-array": "^2.0.3",

@@ -63,15 +67,19 @@ "d3-color": "^1.2.3",

"memoize-one": "^5.0.2",
"node-sass": "^4.14.1",
"papaparse": "^4.6.3",
"prettier": "^1.19.1",
"react": "^16.8.0",
"react-dom": "^16.8.0",
"react-scrollbars-custom": "^4.0.20",
"react-virtualized": "^9.21.2",
"react-virtualized-auto-sizer": "^1.0.2",
"rollup": "^1.27.8",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-gzip": "^2.2.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-sourcemaps": "^0.4.2",
"rollup-plugin-terser": "^5.1.2",
"rollup-plugin-typescript2": "^0.25.3",
"rollup": "^2.21.0",
"rollup-plugin-gzip": "^2.5.0",
"rollup-plugin-peer-deps-external": "^2.2.3",
"rollup-plugin-postcss": "^3.1.2",
"rollup-plugin-sourcemaps": "^0.6.2",
"rollup-plugin-terser": "^6.1.0",
"rollup-plugin-typescript2": "^0.27.1",
"ts-jest": "^24.0.0",
"typescript": "^3.3.4000",
"typescript": "3.8.3",
"version-bump-prompt": "^5.0.0"

@@ -78,0 +86,0 @@ },

@@ -17,3 +17,3 @@ # Giraffe

2. Build the config object.
2. Build the config object.
a. **Required properties**:

@@ -27,2 +27,3 @@

- gridlines: color and opacity
- cursor: type of mouse cursor
- axes: appearance, color, opacity, and scaling

@@ -75,4 +76,6 @@ - ticks: generation, formatting and labeling, font, and color

When generating the table through a Flux result:
Two ways:
#### I. When generating the table through a Flux result:
- call the `fromFlux` utility function on the csv that is generated by Flux

@@ -129,2 +132,48 @@ - get the table in the returned object from calling `fromFlux`

#### II. When using the comma separate values (CSV) from the Flux query as the `fluxResponse` property:
<pre>
import {Plot} from '@influxdata/giraffe'
// ...
const fluxResponse = `#datatype,string,long,dateTime:RFC3339,dateTime:RFC3339,dateTime:RFC3339,double,string,string,string,string
#group,false,false,true,true,false,false,true,true,true,true
#default,_result,,,,,,,,,
,result,table,_start,_stop,_time,_value,_field,_measurement,example,location
,,0,2020-03-25T20:58:15.731129Z,2020-04-24T20:58:15.731129Z,2020-04-03T18:31:33.95Z,29.9,value,temperature,index.html,browser
,,0,2020-03-25T20:58:15.731129Z,2020-04-24T20:58:15.731129Z,2020-04-03T18:55:23.863Z,28.7,value,temperature,index.html,browser
,,0,2020-03-25T20:58:15.731129Z,2020-04-24T20:58:15.731129Z,2020-04-03T19:50:52.357Z,15,value,temperature,index.html,browser
,,0,2020-03-25T20:58:15.731129Z,2020-04-24T20:58:15.731129Z,2020-04-03T19:53:37.198Z,24.8,value,temperature,index.html,browser
,,0,2020-03-25T20:58:15.731129Z,2020-04-24T20:58:15.731129Z,2020-04-03T19:53:53.033Z,23,value,temperature,index.html,browser
,,0,2020-03-25T20:58:15.731129Z,2020-04-24T20:58:15.731129Z,2020-04-03T20:19:21.88Z,20.1,value,temperature,index.html,browser
,,0,2020-03-25T20:58:15.731129Z,2020-04-24T20:58:15.731129Z,2020-04-10T22:20:40.776Z,28.7,value,temperature,index.html,browser
`
const lineLayer = {
type: "line",
x: "_time",
y: "_value",
}
const config = {
fluxResponse,
layers: [lineLayer],
}
// ...
// return this element in your React rendering code:
&#60;div
style={{
width: "calc(70vw - 20px)",
height: "calc(70vh - 20px)",
margin: "40px",
}}
&#62;
&#60;Plot config={config} /&#62;
&#60;/div&#62;
</pre>
## Config

@@ -153,2 +202,4 @@

- **cursor**: _string. Optional. Defaults to "crosshair" when excluded._ The [_CSS cursor_](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) property when the cursor is inside the rendered area of `<Plot>`.
- **gridOpacity**: _number. Optional. Recommendation: do not include. Defaults to 1 when excluded._ A value between 0 and 1 inclusive for the [_CanvasRenderingContext2D globalAlpha_](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalAlpha) of the grid lines. Applies to the inner horizontal and vertical rule lines. Excludes the axes and the border around the graph.

@@ -191,3 +242,3 @@

- **table**: _Object. **Required**._ A data object produced by [Giraffe's utility functions](#utility-functions). Houses the data and getters and setters for that data, for the `<Plot>`.
- **table**: _Object. Optional. When missing, `config` will look for **fluxResponse** to create the **table**. When both are missing, `config` will create an empty **table**._ A data object produced by [Giraffe's utility functions](#utility-functions). Houses the data and getters and setters for that data, for the `<Plot>`.

@@ -198,2 +249,4 @@ - the `table` property of the return value from the `fromFlux` utility function.

- **fluxResponse**: _String. Optional. Ignored when **table** is present; **table** takes precendence. When both are missing, `config` will create an empty **table**._ [A string of comma separated values returned from a Flux query representing the data to be visualized](https://github.com/influxdata/flux/blob/master/docs/SPEC.md#csv).
- **layers**: _array[Object, ...]. **Required**._ An array of [LayerConfig objects](#layerconfig). These objects are customizations specific to a type of `<Plot>`. Currently, Giraffe supports only one pre-defined `<Plot>` type per graph with any number of "custom layers". Custom layers are not pre-defined in Giraffe, but created through a callback render function in the configuration.

@@ -337,2 +390,10 @@

- **RawFluxDataTableLayerConfig**: _Object_. Maximum one per `<Plot>`. Properties are:
- **type**: _'flux data table'. **Required**._ Specifies that this LayerConfig is a flux data table.
- **files**: _array[string, ...]. **Required**._ An array of strings of comma separated values (CSV). Each CSV string can be taken from a Flux response or manually created. At least one string is required. The string cannot not be an empty string nor a string of only empty space(s).
- **disableVerticalScrolling**: _boolean. **Optional**. Recommendation: do not include. Defaults to false when excluded._ Disables the vertical scrollbar for the rendered table.
- **GaugeLayerConfig**: _Object_. Maximum one per `<Plot>`. Properties are:

@@ -339,0 +400,0 @@

@@ -1,4 +0,6 @@

import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import sourceMaps from 'rollup-plugin-sourcemaps'
import postcss from 'rollup-plugin-postcss'
import peerDepsExternal from 'rollup-plugin-peer-deps-external'
import {terser} from 'rollup-plugin-terser'

@@ -16,2 +18,8 @@ import gzip from 'rollup-plugin-gzip'

sourceMaps(),
peerDepsExternal(),
postcss({
extract: false,
modules: true,
use: ['sass'],
}),
]

@@ -18,0 +26,0 @@

@@ -0,1 +1,77 @@

export enum InfluxColors {
// Greys
Obsidian = '#0f0e15',
Raven = '#181820',
Kevlar = '#202028',
Castle = '#292933',
Onyx = '#31313d',
Pepper = '#383846',
Smoke = '#434453',
Graphite = '#545667',
Storm = '#676978',
Mountain = '#757888',
Wolf = '#8e91a1',
Sidewalk = '#999dab',
Forge = '#a4a8b6',
Mist = '#bec2cc',
Chromium = '#c6cad3',
Platinum = '#d4d7dd',
Pearl = '#e7e8eb',
Whisper = '#eeeff2',
Cloud = '#f6f6f8',
Ghost = '#fafafc',
White = '#ffffff',
// Blues
Abyss = '#120653',
Sapphire = '#0b3a8d',
Ocean = '#066fc5',
Pool = '#00a3ff',
Laser = '#00C9FF',
Hydrogen = '#6BDFFF',
Neutrino = '#BEF0FF',
Yeti = '#F0FCFF',
// Purples
Shadow = '#2b007e',
Void = '#5c10a0',
Amethyst = '#8e1fc3',
Star = '#be2ee4',
Comet = '#ce58eb',
Potassium = '#dd84f1',
Moonstone = '#ebadf8',
Twilight = '#fad9ff',
// Greens
Gypsy = '#003e34',
Emerald = '#006f49',
Viridian = '#009f5f',
Rainforest = '#34bb55',
Honeydew = '#67d74e',
Krypton = '#9bf445',
Wasabi = '#c6f98e',
Mint = '#f3ffd6',
// Yellows
Oak = '#3F241F',
Topaz = '#E85B1C',
Tiger = '#F48D38',
Pineapple = '#FFB94A',
Thunder = '#FFD255',
Sulfur = '#FFE480',
Daisy = '#FFF6B8',
Banana = '#FFFDDE',
// Reds
Basalt = '#2F1F29',
Ruby = '#BF3D5E',
Fire = '#DC4E58',
Curacao = '#F95F53',
Dreamsicle = '#FF8564',
Tungsten = '#FFB6A0',
Marmelade = '#FFDCCF',
Flan = '#FFF7F4',
// Brand Colors
Chartreuse = '#D6F622',
DeepPurple = '#13002D',
Magenta = '#BF2FE5',
Galaxy = '#9394FF',
Pulsar = '#513CC6',
}
export const VIRIDIS = [

@@ -2,0 +78,0 @@ '#440154',

@@ -15,1 +15,2 @@ // Computed column names in binned tables (heatmap, histogram)

export const LINE_COUNT = 'lines'
export const SERIES = 'series'

@@ -91,2 +91,12 @@ import {

},
mosaic: {
fill: [],
colors: DEFAULT_COLOR_SCHEME,
position: 'stacked',
binCount: null,
strokeWidth: 1,
strokePadding: 0.75,
strokeOpacity: 1,
fillOpacity: 0.75,
},
}

@@ -93,0 +103,0 @@

@@ -41,2 +41,3 @@ // Components

NumericColumnData,
RawFluxDataTableLayerConfig,
Scale,

@@ -43,0 +44,0 @@ SingleStatLayerConfig,

import CSS from 'csstype'
export type SizedConfig = Config & {width: number; height: number}
export interface Config {

@@ -12,2 +11,4 @@ width?: number

cursor?: string
showAxes?: boolean

@@ -20,3 +21,3 @@ axisColor?: string

xTicks?: number[]
yTicks?: number[]
yTicks?: Array<number | string>
tickFont?: string

@@ -34,3 +35,4 @@ tickFontColor?: string

table: Table
table?: Table
fluxResponse?: string
layers: LayerConfig[]

@@ -63,2 +65,5 @@

legendColumns?: string[]
// The type of the y-axis column
yColumnType?: ColumnType
}

@@ -128,2 +133,3 @@

export enum LayerTypes {
RawFluxDataTable = 'flux data table',
Gauge = 'gauge',

@@ -136,2 +142,3 @@ Custom = 'custom',

Scatter = 'scatter',
Mosaic = 'mosaic',
}

@@ -141,2 +148,3 @@

| CustomLayerConfig
| RawFluxDataTableLayerConfig
| GaugeLayerConfig

@@ -148,2 +156,3 @@ | SingleStatLayerConfig

| ScatterLayerConfig
| MosaicLayerConfig

@@ -165,5 +174,14 @@ export interface CustomLayerConfig {

innerHeight: number
yColumnType: ColumnType
columnFormatter: (colKey: string) => (x: any) => string
}
export interface RawFluxDataTableLayerConfig {
type: 'flux data table' // do not refactor or restrict to LayerTypes.RawFluxDataTable
files: string[]
width: number
height: number
disableVerticalScrolling?: boolean
}
export interface GaugeLayerConfig {

@@ -249,2 +267,16 @@ type: 'gauge' // do not refactor or restrict to LayerTypes.Gauge

export interface MosaicLayerConfig {
type: 'mosaic' // do not refactor or restrict to LayerTypes.Mosaic
x: string
y: string
fill?: string[]
hoverDimension?: MosaicHoverDimension | 'auto'
colors?: string[]
symbol?: string[]
strokeWidth?: number
strokePadding?: number
strokeOpacity?: number
fillOpacity?: number
}
export type RectLayerConfig = HeatmapLayerConfig | HistogramLayerConfig

@@ -276,2 +308,15 @@

export interface FluxTable {
id: string
name: string
data: string[][]
result: string
groupKey: {
[columnName: string]: string
}
dataTypes: {
[columnName: string]: string
}
}
/*

@@ -303,3 +348,7 @@ When a user supplies a config for a layer, we derive various data from it:

*/
export type LayerSpec = LineLayerSpec | ScatterLayerSpec | RectLayerSpec
export type LayerSpec =
| LineLayerSpec
| ScatterLayerSpec
| RectLayerSpec
| MosaicLayerSpec

@@ -310,4 +359,22 @@ export enum SpecTypes {

Rect = 'rect',
Mosaic = 'mosaic',
}
export interface MosaicLayerSpec {
type: 'mosaic'
inputTable: Table
table: Table // has `X_MIN`, `X_MAX`, `Y_MIN`, `Y_MAX`, and `COUNT` columns, and maybe a `FILL` column
xDomain: number[]
yDomain: number[]
xColumnKey: string
yColumnKey: string
xColumnType: ColumnType
yColumnType: ColumnType
scales: {fill: Scale<number, string>}
columnGroupMaps: {
fill: ColumnGroupMap
}
yTicks: Array<string>
}
export interface LineLayerSpec {

@@ -375,2 +442,3 @@ type: 'line' // do not refactor or restrict to SpecTypes.Line

plotConfig: SizedConfig
yColumnType: ColumnType
columnFormatter: (colKey: string) => (x: any) => string

@@ -452,2 +520,6 @@ hoverX: number | null

export type MosaicPosition = 'stacked'
export type MosaicHoverDimension = 'x' | 'y' | 'xy'
export type SymbolType =

@@ -454,0 +526,0 @@ | 'circle'

@@ -100,3 +100,3 @@ /*

interface TimeFormatter extends Formatter {
(x: number, options?: {domainWidth?: number}): string
(timestamp: number, options?: {domainWidth?: number}): string

@@ -176,6 +176,11 @@ _GIRAFFE_FORMATTER_TYPE: FormatterType.Time

const getValidDate = (timestamp: number): Date => {
const date = new Date(timestamp)
return date.getTime() === date.getTime() ? date : new Date()
}
if (format) {
// If a `format` string is passed, we simply use it
formatter = (x: number) =>
formatStringFormatter(new Date(x), format, {
formatter = (timestamp: number) =>
formatStringFormatter(getValidDate(timestamp), format, {
locale,

@@ -189,3 +194,3 @@ timezone: timeZone,

// time range)
formatter = (x: number, {domainWidth = null} = {}) => {
formatter = (timestamp: number, {domainWidth = null} = {}) => {
let timeFormats = DEFAULT_TIME_FORMATS

@@ -219,3 +224,3 @@

return formatStringFormatter(new Date(x), timeFormat, {
return formatStringFormatter(getValidDate(timestamp), timeFormat, {
timezone: timeZone,

@@ -222,0 +227,0 @@ locale,

@@ -14,4 +14,4 @@ import {getTextMetrics} from './getTextMetrics'

yAxisLabel: string,
yTicks: number[],
yTickFormatter: (tick: number) => string,
yTicks: Array<string | number>,
yTickFormatter: (tick: number | string) => string,
tickFont: string

@@ -23,6 +23,4 @@ ) => {

const longestYTick = maxBy(
d => d.length,
yTicks.map(t => yTickFormatter(t))
)
const formattedYTicks = yTicks.map(t => yTickFormatter(t))
const longestYTick = maxBy(d => d.length, formattedYTicks)

@@ -29,0 +27,0 @@ const {width: maxTextWidth, height: textHeight} = getTextMetrics(

@@ -1,2 +0,3 @@

import {Table, ColumnType, ColumnData} from '../types'
import {Table, ColumnType, ColumnData, Config} from '../types'
import {fromFlux} from './fromFlux'

@@ -103,1 +104,14 @@ // Don't export me!

export const newTable = (length: number): Table => new SimpleTable(length)
export const newTableFromConfig = (config: Config): Table => {
if (!config) {
return newTable(0)
}
if (config.table) {
return config.table
}
if (config.fluxResponse) {
return fromFlux(config.fluxResponse).table
}
return newTable(0)
}

@@ -0,1 +1,2 @@

import {newTableFromConfig} from './newTable'
import {getHorizontalTicks, getVerticalTicks} from './getTicks'

@@ -12,2 +13,3 @@ import {getMargins} from './getMargins'

import {heatmapTransform} from '../transforms/heatmap'
import {mosaicTransform} from '../transforms/mosaic'

@@ -64,3 +66,2 @@ import {

} = this
const getMarginsMemoized = this.fns.get('margins', getMargins)

@@ -107,7 +108,14 @@

public get yTicks(): number[] {
public get yTicks(): Array<number | string> {
const currLayerSpec = this.config.layers.map((_, i) => this.getSpec(i))[0]
if (
currLayerSpec &&
currLayerSpec.type === 'mosaic' &&
Array.isArray(currLayerSpec.yTicks)
) {
return currLayerSpec.yTicks
}
if (this.config.yTicks) {
return this.config.yTicks
}
const getTicksMemoized = this.fns.get('yTicks', getVerticalTicks)

@@ -153,2 +161,20 @@

public get yColumnType(): ColumnType {
//added to allow the y-axis type to be a string
//if there are multiple layers (ex. single stat + line graph),
//it will pick the yColumnType of the 1st layer (so BEWARE)
for (let i = 0; i < this.config.layers.length; i++) {
const layer: any = this.config.layers[i]
if (layer.yColumnType) {
return layer.yColumnType
}
}
return 'number'
}
public set yColumnType(columnType: ColumnType) {
this.config.yColumnType = columnType
}
public get xDomain(): number[] {

@@ -216,2 +242,6 @@ if (this.isXControlled) {

const layerConfig = this.config.layers[layerIndex]
if (!this.config.table) {
this.config.table = newTableFromConfig(this.config)
}
const table = this.config.table

@@ -262,2 +292,15 @@

case LayerTypes.Mosaic: {
const transform = this.fns.get(memoizedTransformKey, mosaicTransform)
return transform(
table,
layerConfig.x,
layerConfig.y,
this.config.xDomain,
layerConfig.fill,
layerConfig.colors
)
}
case LayerTypes.Heatmap: {

@@ -279,2 +322,3 @@ const transform = this.fns.get(memoizedTransformKey, heatmapTransform)

case LayerTypes.RawFluxDataTable:
case LayerTypes.Gauge:

@@ -281,0 +325,0 @@ case LayerTypes.Custom:

@@ -42,7 +42,5 @@ import {range} from 'd3-array'

}
const xyIndices = xIndices.filter(
i => yMinData[i] <= dataY && yMaxData[i] > dataY
)
return xyIndices

@@ -49,0 +47,0 @@ }

@@ -12,4 +12,4 @@ import {range} from 'd3-array'

mouseY: number,
xColData: NumericColumnData,
yColData: NumericColumnData,
xColumnData: NumericColumnData,
yColumnData: NumericColumnData,
groupColData: NumericColumnData,

@@ -31,2 +31,5 @@ xScale: Scale<number, number>,

const xColData = xColumnData ? xColumnData : []
const yColData = yColumnData ? yColumnData : []
const index = useLazyMemo(

@@ -33,0 +36,0 @@ () => buildIndex(xColData, yColData, xScale, yScale, width, height),

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc