@influxdata/giraffe - npm Package Compare versions

Comparing version 0.10.0 to 0.11.0

dist/components/ScatterLayer.d.ts

@@ -6,4 +6,6 @@ import { FunctionComponent } from 'react';
     layerIndex: number;
+    hoverX: number;
+    hoverY: number;
 }
 export declare const ScatterLayer: FunctionComponent<Props>;
 export {};

dist/constants/index.d.ts

@@ -6,2 +6,4 @@ import { Config, LayerConfig } from '../types';
 export declare const DEFAULT_RANGE_PADDING = 0;
+export declare const SCATTER_POINT_SIZE = 6;
+export declare const SCATTER_HOVER_POINT_SIZE = 12;
 export declare const CURVES: {
@@ -8,0 +10,0 @@ linear: import("d3-shape").CurveFactory;

dist/index.d.ts

@@ -5,2 +5,2 @@ export { Plot } from './components/Plot';
 export * from './constants/colorSchemes';
-export { ColumnType, Table, Scale, Margins, HistogramLayerConfig, HistogramPosition, LineInterpolation, LineLayerConfig, LayerConfig, Config, } from './types';
+export { ColumnType, NumericColumnData, ColumnData, Table, Scale, Margins, HistogramLayerConfig, HistogramPosition, LineInterpolation, LineLayerConfig, LayerConfig, Config, } from './types';

dist/utils/drawShapes.d.ts

 export declare const drawCircle: (ctx: CanvasRenderingContext2D, x: number, y: number, diameter?: number) => void;
 export declare const drawSquare: (ctx: CanvasRenderingContext2D, centerX: number, centerY: number, size?: number) => void;
-export declare const drawTriangle: (ctx: CanvasRenderingContext2D, centerX: number, centerY: number, size?: number) => void;
+export declare const drawTriangle: (ctx: CanvasRenderingContext2D, centerX: number, centerY: number, sideLength?: number) => void;
 export declare const drawPlus: (ctx: CanvasRenderingContext2D, centerX: number, centerY: number, size?: number) => void;
 export declare const drawEx: (ctx: CanvasRenderingContext2D, centerX: number, centerY: number, size?: number) => void;
 export declare const drawTritip: (ctx: CanvasRenderingContext2D, centerX: number, centerY: number, size?: number) => void;

dist/utils/tooltip.d.ts

@@ -1,3 +0,4 @@
-import { TooltipColumn, Table } from '../types';
+import { TooltipColumn, Scale, Table } from '../types';
 export declare const getRangeLabel: (min: number, max: number, formatter: any) => string;
 export declare const getTooltipGroupColumns: (table: Table, rowIndices: number[], groupColKeys: string[], getValueFormatter: (colKey: string) => (x: any) => string, rowColors: string[]) => 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<string, string>) => TooltipColumn[];

package.json

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

README.md

@@ -1,6 +0,27 @@
-This repository contains a React-based visualization library used to implement several features in the [InfluxDB 2.0](https://github.com/influxdata/influxdb/) UI.
-The library is currently in a pre-alpha state.
+This repository contains Giraffe, a React-based visualization library used to implement the [InfluxDB 2.0](https://github.com/influxdata/influxdb/) UI.
 
+**This library is currently in a pre-alpha state.**
+Docs will follow as soon as the API has a chance to stabilize.
+
+## Features
+
+There exist plenty of terrific visualization libraries in the JavaScript ecosystem.
+Giraffe aims to distinguish itself with several features:
+
+- A high-level [_Grammar of Graphics_](http://vita.had.co.nz/papers/layered-grammar.pdf) style API that can specify a wide variety of visualizations with a few simple concepts
+- A [columnar](https://observablehq.com/@mbostock/manipulating-flat-arrays) interface for input data that enables efficient interop with Web Workers and [Apache Arrow](https://arrow.apache.org/)
+- Easy reactivity and extensibility via React
+- Self-contained configs in the style of [Vega-Lite](https://vega.github.io/vega-lite/)
+- Support for mapping groupings of columns to a single visual aesthetic
+
 ## Development
 
 See [`CONTRIBUTING.md`](./CONTRIBUTING.md).
+
+## Thanks
+
+<a href="https://www.chromaticqa.com/">
+  <img src="https://cdn-images-1.medium.com/letterbox/147/36/50/50/1*oHHjTjInDOBxIuYHDY2gFA.png?source=logoAvatar-d7276495b101---37816ec27d7a" width="120"/>
+</a>
+
+Thanks to [Chromatic](https://www.chromaticqa.com/) for providing us with a snapshot testing platform.

src/constants/index.ts

@@ -21,2 +21,5 @@ import {
 
+export const SCATTER_POINT_SIZE = 6
+export const SCATTER_HOVER_POINT_SIZE = 12
+
 export const CURVES = {
@@ -23,0 +26,0 @@ linear: curveLinear,

src/index.ts

@@ -14,2 +14,4 @@ // Components
   ColumnType,
+  NumericColumnData,
+  ColumnData,
   Table,
@@ -16,0 +18,0 @@ Scale,

src/utils/drawShapes.ts

@@ -33,8 +33,13 @@ export const drawCircle = (
   centerY: number,
-  size: number = 3
+  sideLength: number = 3
 ) => {
+  // Stroking and filling an area will result in a shape whose sides extend a
+  // little bit further than the same shape that is only filled
+  const STROKE_DELTA = 0.5
+  const halfSideLength = sideLength / 2 + STROKE_DELTA
+
   ctx.beginPath()
-  ctx.moveTo(centerX - size, centerY + size)
-  ctx.lineTo(centerX + size, centerY + size)
-  ctx.lineTo(centerX, centerY - size)
+  ctx.moveTo(centerX - halfSideLength, centerY + halfSideLength)
+  ctx.lineTo(centerX + halfSideLength, centerY + halfSideLength)
+  ctx.lineTo(centerX, centerY - halfSideLength)
   ctx.fill()
@@ -51,3 +56,3 @@ }
 
-  ctx.lineWidth = 1
+  ctx.lineWidth = 2
 
@@ -73,3 +78,3 @@ ctx.beginPath()
 
-  ctx.lineWidth = 1
+  ctx.lineWidth = 2
 
@@ -76,0 +81,0 @@ ctx.beginPath()

src/utils/tooltip.ts

@@ -1,2 +0,2 @@
-import {TooltipColumn, Table} from '../types'
+import {TooltipData, TooltipColumn, Scale, Table} from '../types'
 
@@ -38,1 +38,45 @@ const isVoid = (x: any) => x === null || x === undefined
   })
+
+export const getPointsTooltipData = (
+  hoveredRowIndices: number[],
+  table: Table,
+  xColKey: string,
+  yColKey: string,
+  groupColKey: string,
+  getValueFormatter: (colKey: string) => (x: any) => string,
+  fillColKeys: string[],
+  fillScale: Scale<string, string>
+): TooltipData => {
+  const xColData = table.getColumn(xColKey, 'number')
+  const yColData = table.getColumn(yColKey, 'number')
+  const groupColData = table.getColumn(groupColKey, 'string')
+  const colors = hoveredRowIndices.map(i => fillScale(groupColData[i]))
+  const xFormatter = getValueFormatter(xColKey)
+  const yFormatter = getValueFormatter(yColKey)
+
+  const tooltipXCol = {
+    key: xColKey,
+    name: table.getColumnName(xColKey),
+    type: table.getColumnType(xColKey),
+    colors,
+    values: hoveredRowIndices.map(i => xFormatter(xColData[i])),
+  }
+
+  const tooltipYCol = {
+    key: yColKey,
+    name: table.getColumnName(yColKey),
+    type: table.getColumnType(yColKey),
+    colors,
+    values: hoveredRowIndices.map(i => yFormatter(yColData[i])),
+  }
+
+  const fillColumns = getTooltipGroupColumns(
+    table,
+    hoveredRowIndices,
+    fillColKeys,
+    getValueFormatter,
+    colors
+  )
+
+  return [tooltipXCol, tooltipYCol, ...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

826996

increased by1.5%

Number of package files

158

increased by1.28%

Lines of code

10803

increased by1.67%

Number of lines in readme file

28

increased by300%

No dependency changes