@influxdata/giraffe
Advanced tools
Comparing version 0.23.0 to 0.24.0
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[]; |
@@ -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: | ||
<div | ||
style={{ | ||
width: "calc(70vw - 20px)", | ||
height: "calc(70vh - 20px)", | ||
margin: "40px", | ||
}} | ||
> | ||
<Plot config={config} /> | ||
</div> | ||
</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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
2461135
12974
532
48
215
74
4