@influxdata/giraffe - npm Package Compare versions

Comparing version 0.24.0 to 0.25.0

dist/constants/columnKeys.d.ts

@@ -13,1 +13,4 @@ export declare const X_MIN = "xMin";
 export declare const SERIES = "series";
+export declare const RESULT = "result";
+export declare const MAX = "max";
+export declare const MIN = "min";

dist/types/index.d.ts

@@ -43,2 +43,3 @@ /// <reference types="react" />
     legendColumns?: string[];
+    legendMessage?: string;
     yColumnType?: ColumnType;
@@ -81,6 +82,7 @@ }
     Line = "line",
+    Band = "band",
     Scatter = "scatter",
     Mosaic = "mosaic"
 }
-export declare type LayerConfig = CustomLayerConfig | RawFluxDataTableLayerConfig | GaugeLayerConfig | SingleStatLayerConfig | HeatmapLayerConfig | HistogramLayerConfig | LineLayerConfig | ScatterLayerConfig | MosaicLayerConfig;
+export declare type LayerConfig = CustomLayerConfig | RawFluxDataTableLayerConfig | GaugeLayerConfig | SingleStatLayerConfig | HeatmapLayerConfig | HistogramLayerConfig | LineLayerConfig | BandLayerConfig | ScatterLayerConfig | MosaicLayerConfig;
 export interface CustomLayerConfig {
@@ -211,2 +213,18 @@ type: 'custom';
 }
+export interface BandLayerConfig {
+    type: 'band';
+    x: string;
+    y: string;
+    fill: string[];
+    position?: LinePosition;
+    hoverDimension?: LineHoverDimension | 'auto';
+    maxTooltipRows?: number;
+    interpolation?: LineInterpolation;
+    lineWidth?: number;
+    lineOpacity?: number;
+    colors?: string[];
+    shadeOpacity?: number;
+    upperColumnName?: string;
+    lowerColumnName?: string;
+}
 export interface ScatterLayerConfig {
@@ -232,5 +250,6 @@ type: 'scatter';
 }
-export declare type LayerSpec = LineLayerSpec | ScatterLayerSpec | RectLayerSpec | MosaicLayerSpec;
+export declare type LayerSpec = LineLayerSpec | BandLayerSpec | ScatterLayerSpec | RectLayerSpec | MosaicLayerSpec;
 export declare enum SpecTypes {
     Line = "line",
+    Band = "band",
     Scatter = "scatter",
@@ -276,2 +295,23 @@ Rect = "rect",
 }
+export interface BandLayerSpec {
+    type: 'band';
+    bandFillColors: string[];
+    bandIndexMap: BandIndexMap;
+    bandName: string;
+    inputTable: Table;
+    table: Table;
+    lineData: LineData;
+    xDomain: number[];
+    yDomain: number[];
+    xColumnKey: string;
+    yColumnKey: string;
+    xColumnType: ColumnType;
+    yColumnType: ColumnType;
+    scales: {
+        fill: Scale<number, string>;
+    };
+    columnGroupMaps: {
+        fill: ColumnGroupMap;
+    };
+}
 export interface ScatterLayerSpec {
@@ -391,1 +431,19 @@ type: 'scatter';
 export declare type AxisTicks = Date[] | number[];
+export interface BandBorder {
+    xs: Array<number>;
+    ys: Array<number>;
+    fill: string;
+}
+export interface Band {
+    lineName: string;
+    min: BandBorder;
+    max: BandBorder;
+    xs: Array<number>;
+    ys: Array<number>;
+    fill: string;
+}
+export interface BandIndexMap {
+    rowIndices: number[];
+    minIndices: number[];
+    maxIndices: number[];
+}

dist/utils/tooltip.d.ts

 import { LinePosition, LineData, TooltipData, Scale, Table } from '../types';
+import { BandHoverIndices } from './getBandHoverIndices';
 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) => TooltipData;
+export declare const getBandTooltipData: (bandHoverIndices: BandHoverIndices, table: Table, xColKey: string, yColKey: string, bandName: string, getValueFormatter: (colKey: string) => (x: any) => string, fillColKeys: string[], colors: string[], position?: LinePosition, lineData?: LineData) => TooltipData;

package.json

 {
   "name": "@influxdata/giraffe",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "license": "MIT",

src/constants/columnKeys.ts

@@ -16,1 +16,6 @@ // Computed column names in binned tables (heatmap, histogram)
 export const SERIES = 'series'
+
+// Band Chart's most important column key
+export const RESULT = 'result'
+export const MAX = 'max'
+export const MIN = 'min'

src/types/index.ts

@@ -62,2 +62,3 @@ import CSS from 'csstype'
   legendColumns?: string[]
+  legendMessage?: string
 
@@ -137,2 +138,3 @@ // The type of the y-axis column
   Line = 'line',
+  Band = 'band',
   Scatter = 'scatter',
@@ -150,2 +152,3 @@ Mosaic = 'mosaic',
   | LineLayerConfig
+  | BandLayerConfig
   | ScatterLayerConfig
@@ -292,2 +295,19 @@ | MosaicLayerConfig
 
+export interface BandLayerConfig {
+  type: 'band' // do not refactor or restrict to LayerTypes.Line
+  x: string
+  y: string
+  fill: string[]
+  position?: LinePosition
+  hoverDimension?: LineHoverDimension | 'auto'
+  maxTooltipRows?: number
+  interpolation?: LineInterpolation
+  lineWidth?: number
+  lineOpacity?: number
+  colors?: string[]
+  shadeOpacity?: number
+  upperColumnName?: string
+  lowerColumnName?: string
+}
+
 export interface ScatterLayerConfig {
@@ -343,2 +363,3 @@ type: 'scatter' // do not refactor or restrict to LayerTypes.Scatter
   | LineLayerSpec
+  | BandLayerSpec
   | ScatterLayerSpec
@@ -350,2 +371,3 @@ | RectLayerSpec
   Line = 'line',
+  Band = 'band',
   Scatter = 'scatter',
@@ -392,2 +414,24 @@ Rect = 'rect',
 
+export interface BandLayerSpec {
+  type: 'band' // do not refactor or restrict to SpecTypes.Line
+  bandFillColors: string[]
+  bandIndexMap: BandIndexMap
+  bandName: string
+  inputTable: Table
+  table: Table // has `FILL` column added
+  lineData: LineData
+  xDomain: number[]
+  yDomain: number[]
+  xColumnKey: string
+  yColumnKey: string
+  xColumnType: ColumnType
+  yColumnType: ColumnType
+  scales: {
+    fill: Scale<number, string>
+  }
+  columnGroupMaps: {
+    fill: ColumnGroupMap
+  }
+}
+
 export interface ScatterLayerSpec {
@@ -559,1 +603,21 @@ type: 'scatter' // do not refactor or restrict to SpecTypes.Scatter
 export type AxisTicks = Date[] | number[]
+
+export interface BandBorder {
+  xs: Array<number>
+  ys: Array<number>
+  fill: string
+}
+export interface Band {
+  lineName: string
+  min: BandBorder
+  max: BandBorder
+  xs: Array<number>
+  ys: Array<number>
+  fill: string
+}
+
+export interface BandIndexMap {
+  rowIndices: number[]
+  minIndices: number[]
+  maxIndices: number[]
+}

src/utils/PlotEnv.ts

@@ -10,2 +10,3 @@ import {newTableFromConfig} from './newTable'
 import {lineTransform} from '../transforms/line'
+import {bandTransform} from '../transforms/band'
 import {scatterTransform} from '../transforms/scatter'
@@ -261,2 +262,14 @@ import {histogramTransform} from '../transforms/histogram'
 
+      case LayerTypes.Band: {
+        const transform = this.fns.get(memoizedTransformKey, bandTransform)
+
+        return transform(
+          table,
+          layerConfig.x,
+          layerConfig.y,
+          layerConfig.fill,
+          layerConfig.colors
+        )
+      }
+
       case LayerTypes.Scatter: {
@@ -263,0 +276,0 @@ const transform = this.fns.get(memoizedTransformKey, scatterTransform)

src/utils/tooltip.ts

@@ -14,5 +14,8 @@ import {
   LINE_COUNT,
+  RESULT,
+  VALUE,
 } from '../constants/columnKeys'
 
 import {getDomainDataFromLines} from './lineData'
+import {BandHoverIndices} from './getBandHoverIndices'
 
@@ -36,3 +39,3 @@ const isVoid = (x: any) => x === null || x === undefined
 ): number[] => {
-  if (position === 'overlaid') {
+  if (!position || position === 'overlaid') {
     return hoveredRowIndices
@@ -77,4 +80,4 @@ }
   rowColors: string[] | null
-): TooltipColumn[] =>
-  groupColKeys.map(key => {
+): TooltipColumn[] => {
+  return groupColKeys.map(key => {
     const colData = table.getColumn(key)
@@ -93,2 +96,3 @@ const formatter = getValueFormatter(key)
   })
+}
 
@@ -191,1 +195,155 @@ export const getPointsTooltipData = (
 }
+
+const getTooltipBandGroupColumns = (
+  table: Table,
+  rowIndices: number[],
+  groupColKeys: string[],
+  getValueFormatter: (colKey: string) => (x: any) => string,
+  rowColors: string[] | null
+): TooltipColumn[] => {
+  return groupColKeys.reduce((accum, key) => {
+    if (key === RESULT) {
+      return accum
+    }
+    const colData = table.getColumn(key)
+    const formatter = getValueFormatter(key)
+
+    accum.push({
+      key,
+      name: table.getColumnName(key),
+      type: table.getColumnType(key),
+      colors: rowColors,
+      values: rowIndices.map(i =>
+        !isVoid(colData[i]) ? formatter(colData[i]) : null
+      ),
+    })
+    return accum
+  }, [])
+}
+
+export const getBandTooltipData = (
+  bandHoverIndices: BandHoverIndices,
+  table: Table,
+  xColKey: string,
+  yColKey: string,
+  bandName: string,
+  getValueFormatter: (colKey: string) => (x: any) => string,
+  fillColKeys: string[],
+  colors: string[],
+  position?: LinePosition,
+  lineData?: LineData
+): TooltipData => {
+  const {
+    rowIndices: hoveredRowIndices,
+    minIndices,
+    maxIndices,
+  } = bandHoverIndices
+
+  const xColumnName =
+    xColKey === VALUE ? `${xColKey}:${bandName}` : table.getColumnName(xColKey)
+  const yColumnName =
+    yColKey === VALUE ? `${yColKey}:${bandName}` : table.getColumnName(yColKey)
+  const sortOrder = lineData
+    ? getDataSortOrder(lineData, hoveredRowIndices, position)
+    : hoveredRowIndices
+  const minOrder = lineData
+    ? getDataSortOrder(lineData, minIndices, position)
+    : minIndices
+  const maxOrder = lineData
+    ? getDataSortOrder(lineData, maxIndices, position)
+    : maxIndices
+  const xColData = table.getColumn(xColKey, 'number')
+  const yColData = table.getColumn(yColKey, 'number')
+  const xFormatter = getValueFormatter(xColKey)
+  const yFormatter = getValueFormatter(yColKey)
+
+  const tooltipXCol = {
+    key: xColKey,
+    name: xColumnName,
+    type: table.getColumnType(xColKey),
+    colors,
+    values: hoveredRowIndices.map(i => xFormatter(xColData[i])),
+  }
+
+  const tooltipYCol = {
+    key: yColKey,
+    name: yColumnName,
+    type: table.getColumnType(yColKey),
+    colors,
+    values: orderDataByValue(
+      hoveredRowIndices,
+      sortOrder,
+      hoveredRowIndices.map(i => yFormatter(yColData[i]))
+    ),
+  }
+
+  const tooltipAdditionalColumns = []
+
+  if (yColKey === VALUE) {
+    tooltipAdditionalColumns.push({
+      key: yColKey,
+      name: `${yColKey}:min`,
+      type: table.getColumnType(yColKey),
+      colors,
+      values: orderDataByValue(
+        minIndices,
+        minOrder,
+        minIndices.map(i => yFormatter(yColData[i]))
+      ),
+    })
+
+    tooltipAdditionalColumns.push({
+      key: yColKey,
+      name: `${yColKey}:max`,
+      type: table.getColumnType(yColKey),
+      colors,
+      values: orderDataByValue(
+        maxIndices,
+        maxOrder,
+        maxIndices.map(i => yFormatter(yColData[i]))
+      ),
+    })
+  } else {
+    tooltipAdditionalColumns.push({
+      key: xColKey,
+      name: `${xColKey}:min`,
+      type: table.getColumnType(xColKey),
+      colors,
+      values: orderDataByValue(
+        minIndices,
+        minOrder,
+        minIndices.map(i => xFormatter(xColData[i]))
+      ),
+    })
+
+    tooltipAdditionalColumns.push({
+      key: xColKey,
+      name: `${xColKey}:max`,
+      type: table.getColumnType(xColKey),
+      colors,
+      values: orderDataByValue(
+        maxIndices,
+        maxOrder,
+        maxIndices.map(i => xFormatter(xColData[i]))
+      ),
+    })
+  }
+
+  const fillColumns = getTooltipBandGroupColumns(
+    table,
+    sortOrder,
+    fillColKeys,
+    getValueFormatter,
+    colors
+  )
+
+  if (yColKey === VALUE) {
+    return [
+      tooltipXCol,
+      ...tooltipAdditionalColumns,
+      tooltipYCol,
+      ...fillColumns,
+    ]
+  }
+  return [tooltipYCol, ...tooltipAdditionalColumns, tooltipXCol, ...fillColumns]
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2545521

increased by3.43%

Number of package files

230

increased by6.98%

Lines of code

14243

increased by9.78%

No dependency changes