feat: brush Plot options

giraffe/README.md

@@ -258,6 +258,10 @@ When using the comma separated values (CSV) from the Flux query as the `fluxResp
 
 - **axisOpacity**: _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 axes and the border around the graph. Excludes the inner horizontal and vertical rule lines.
 
+- **zoomBrushColor** _string. Optional. default: from BRUSH_THEME_DARK._ Color of zooming brush that shows on drag. Value can be any valid CSS color.
+
+- **zoomBrushOpacity** _number. Optional. default: from BRUSH_THEME_DARK._ Opacity of zooming brush that shows on drag. Value must be between 0 and 1.
+
 - **xTicks**: _array[number, ...]. Optional._ An array of values representing tick marks on the x-axis. Actual data values and axis scaling may cause Plot to not render all of the given ticks, or Plot rendering may extend beyond all of the rendered ticks. When excluded, Giraffe attempts to use as many ticks as possible on the x-axis while keeping reasonable spacing between them.
 
 - **yTicks**: _array[number, ...]. Optional._ An array of values representing tick marks on the y-axis. Actual data values and axis scaling may cause Plot to not render all of the given ticks, or Plot rendering may extend beyond all of the rendered ticks. When excluded, Giraffe attempts to use as many ticks as possible on the y-axis while keeping reasonable spacing between them.

giraffe/src/components/Brush.tsx

@@ -11,6 +11,8 @@ interface Props {
   event: DragEvent | null
   width: number
   height: number
+  opacity: number
+  color: string
   onXBrushEnd: (xRange: number[]) => void
   onYBrushEnd: (yRange: number[]) => void
 }
@@ -19,6 +21,8 @@ export const Brush: FunctionComponent<Props> = ({
   event,
   width,
   height,
+  opacity,
+  color,
   onXBrushEnd,
   onYBrushEnd,
 }) => {
@@ -69,8 +73,8 @@ export const Brush: FunctionComponent<Props> = ({
     width: `${brushWidth}px`,
     top: `${y}px`,
     height: `${brushHeight}px`,
-    opacity: 0.1,
-    backgroundColor: 'aliceblue',
+    opacity,
+    backgroundColor: color,
   }
 
   return <div className="giraffe-brush-selection" style={selectionStyle} />

giraffe/src/components/SizedPlot.tsx

@@ -225,6 +225,8 @@ export const SizedPlot: FunctionComponent<Props> = ({
           event={dragEvent}
           width={env.innerWidth}
           height={env.innerHeight}
+          color={env.config.zoomBrushColor}
+          opacity={env.config.zoomBrushOpacity}
           onXBrushEnd={handleXBrushEnd}
           onYBrushEnd={handleYBrushEnd}
         />

giraffe/src/constants/index.ts

@@ -21,6 +21,16 @@ export const DEFAULT_RANGE_PADDING = 0 // pixels
 export const SCATTER_POINT_SIZE = 6
 export const SCATTER_HOVER_POINT_SIZE = 12
 
+export const BRUSH_THEME_DARK = {
+  zoomBrushColor: 'aliceblue',
+  zoomBrushOpacity: 0.1,
+}
+
+export const BRUSH_THEME_LIGHT: Pick<Config, 'zoomBrushColor' & 'zoom'> = {
+  zoomBrushColor: '#A4A8B6',
+  zoomBrushOpacity: 0.34,
+}
+
 export const CURVES = {
   linear: curveLinear,
   monotoneX: curveMonotoneX,
@@ -52,6 +62,7 @@ export const CONFIG_DEFAULTS: Partial<Config> = {
   legendBackgroundColor: '#1c1c21',
   legendBorder: '1px solid #202028',
   legendCrosshairColor: '#31313d',
+  ...BRUSH_THEME_DARK,
 }
 
 export const LAYER_DEFAULTS: {[layerType: string]: Partial<LayerConfig>} = {

giraffe/src/index.ts

@@ -20,6 +20,7 @@ export {lineTransform} from './transforms/line'
 export * from './constants/colorSchemes'
 export * from './constants/singleStatStyles'
 export * from './constants/gaugeStyles'
+export {BRUSH_THEME_DARK, BRUSH_THEME_LIGHT} from './constants/index'
 export {DEFAULT_TABLE_COLORS} from './constants/tableGraph'
 
 // Types

giraffe/src/types/index.ts

@@ -66,6 +66,10 @@ export interface Config {
   legendOpacity?: number
   legendOrientationThreshold?: number
 
+  // The zoombrush is the selected area that appears when plot is dragged
+  zoomBrushColor?: string
+  zoomBrushOpacity?: number
+
   // The type of the y-axis column
   yColumnType?: ColumnType
 }

stories/src/band.stories.tsx

@@ -3,7 +3,7 @@ import {storiesOf} from '@storybook/react'
 import {withKnobs, number, select, text} from '@storybook/addon-knobs'
 
 import {Config, Plot, timeFormatter, fromFlux} from '../../giraffe/src'
-import {findStringColumns} from './helpers'
+import {findStringColumns, zoomBrushKnobs} from './helpers'
 import {
   colors6,
   cpu1,
@@ -94,6 +94,7 @@ storiesOf('Band Chart', module)
       step: 0.05,
     })
     const legendOrientationThreshold = tooltipOrientationThresholdKnob()
+    const {zoomBrushColor, zoomBrushOpacity} = zoomBrushKnobs()
 
     const config: Config = {
       fluxResponse: staticData,
@@ -130,6 +131,8 @@ storiesOf('Band Chart', module)
           lowerColumnName,
         },
       ],
+      zoomBrushColor,
+      zoomBrushOpacity,
     }
 
     return (

stories/src/helpers.tsx

@@ -154,3 +154,25 @@ export const timeZoneKnob = (initial?: string) =>
 
 export const tooltipOrientationThresholdKnob = () =>
   number('tooltipOrientationThreshold', 5)
+
+export const zoomBrushKnobs = () => {
+  const zoomBrushOpacity = number('Zoom brush Opacity (drag)', 0.1, {
+    range: true,
+    min: 0,
+    max: 1,
+    step: 0.01,
+  })
+  const zoomBrushColor = select(
+    'Zoom brush color (drag)',
+    {
+      aliceblue: 'aliceblue',
+      white: 'white',
+      yellow: 'yellow',
+      green: 'green',
+      red: 'red',
+      '#003b6f': '#003b6f',
+    },
+    'aliceblue'
+  )
+  return {zoomBrushColor, zoomBrushOpacity}
+}

stories/src/index.stories.tsx

@@ -29,6 +29,7 @@ import {
   interpolationKnob,
   timeZoneKnob,
   tooltipOrientationThresholdKnob,
+  zoomBrushKnobs,
 } from './helpers'
 
 storiesOf('XY Plot', module)
@@ -84,6 +85,7 @@ storiesOf('XY Plot', module)
       step: 0.05,
     })
     const legendOrientationThreshold = tooltipOrientationThresholdKnob()
+    const {zoomBrushColor, zoomBrushOpacity} = zoomBrushKnobs()
 
     const config: Config = {
       table,
@@ -116,6 +118,8 @@ storiesOf('XY Plot', module)
           shadeBelowOpacity,
         },
       ],
+      zoomBrushColor,
+      zoomBrushOpacity,
     }
 
     return (
@@ -169,6 +173,7 @@ storiesOf('XY Plot', module)
       step: 0.05,
     })
     const legendOrientationThreshold = tooltipOrientationThresholdKnob()
+    const {zoomBrushColor, zoomBrushOpacity} = zoomBrushKnobs()
 
     const config: Config = {
       table,
@@ -197,6 +202,8 @@ storiesOf('XY Plot', module)
           shadeBelowOpacity,
         },
       ],
+      zoomBrushColor,
+      zoomBrushOpacity,
     }
 
     return (
@@ -278,6 +285,7 @@ storiesOf('XY Plot', module)
       'auto'
     )
     const legendOrientationThreshold = tooltipOrientationThresholdKnob()
+    const {zoomBrushColor, zoomBrushOpacity} = zoomBrushKnobs()
 
     const layers = [
       {
@@ -329,6 +337,8 @@ storiesOf('XY Plot', module)
       tickFont,
       showAxes,
       layers,
+      zoomBrushColor,
+      zoomBrushOpacity,
     }
 
     return (
@@ -348,6 +358,7 @@ storiesOf('XY Plot', module)
     const yScale = yScaleKnob()
     const showAxes = showAxesKnob()
     const legendOrientationThreshold = tooltipOrientationThresholdKnob()
+    const {zoomBrushColor, zoomBrushOpacity} = zoomBrushKnobs()
 
     const config: Config = {
       table,
@@ -359,6 +370,8 @@ storiesOf('XY Plot', module)
       showAxes,
       valueFormatters: {_value: val => `${Math.round(val)}%`},
       layers: [{type: 'heatmap', x, y, colors}],
+      zoomBrushColor,
+      zoomBrushOpacity,
     }
 
     return (
@@ -378,6 +391,7 @@ storiesOf('XY Plot', module)
     const showAxes = showAxesKnob()
     const binCount = number('Bin Count', 10)
     const legendOrientationThreshold = tooltipOrientationThresholdKnob()
+    const {zoomBrushColor, zoomBrushOpacity} = zoomBrushKnobs()
 
     const config: Config = {
       table,
@@ -389,6 +403,8 @@ storiesOf('XY Plot', module)
       yScale,
       valueFormatters: {[x]: x => `${Math.round(x)}%`},
       layers: [{type: 'histogram', x, fill: ['cpu'], colors, binCount}],
+      zoomBrushColor,
+      zoomBrushOpacity,
     }
 
     return (
@@ -406,6 +422,7 @@ storiesOf('XY Plot', module)
     const showAxes = showAxesKnob()
     const hoverDimension = select('Hover Dimension', {x: 'x', xy: 'xy'}, 'xy')
     const legendOrientationThreshold = tooltipOrientationThresholdKnob()
+    const {zoomBrushColor, zoomBrushOpacity} = zoomBrushKnobs()
 
     const config: Config = {
       table: CPUString,
@@ -421,6 +438,8 @@ storiesOf('XY Plot', module)
           colors,
         } as LayerConfig,
       ],
+      zoomBrushColor,
+      zoomBrushOpacity,
     }
 
     return (

stories/src/linegraph.stories.tsx

@@ -18,6 +18,7 @@ import {
   yKnob,
   yScaleKnob,
   tooltipOrientationThresholdKnob,
+  zoomBrushKnobs,
 } from './helpers'
 
 import {tooltipFalsyValues} from './data/fluxCSV'
@@ -69,6 +70,7 @@ storiesOf('Line Graph', module)
       'auto'
     )
     const legendOrientationThreshold = tooltipOrientationThresholdKnob()
+    const {zoomBrushColor, zoomBrushOpacity} = zoomBrushKnobs()
 
     const config: Config = {
       fluxResponse: staticData,
@@ -96,6 +98,8 @@ storiesOf('Line Graph', module)
           shadeBelowOpacity,
         },
       ],
+      zoomBrushOpacity,
+      zoomBrushColor,
     }
 
     return (
@@ -145,6 +149,7 @@ storiesOf('Line Graph', module)
       'auto'
     )
     const legendOrientationThreshold = tooltipOrientationThresholdKnob()
+    const {zoomBrushColor, zoomBrushOpacity} = zoomBrushKnobs()
 
     const config: Config = {
       fluxResponse: csv,
@@ -172,6 +177,8 @@ storiesOf('Line Graph', module)
           shadeBelowOpacity,
         },
       ],
+      zoomBrushOpacity,
+      zoomBrushColor,
     }
 
     return (

stories/src/scatterplot.stories.tsx

@@ -20,6 +20,7 @@ import {
   tableKnob,
   fillKnob,
   symbolKnob,
+  zoomBrushKnobs,
 } from './helpers'
 
 storiesOf('Scatter Plot', module)
@@ -37,6 +38,7 @@ storiesOf('Scatter Plot', module)
     const symbol = symbolKnob(table, ['host'])
     const legendOrientationThreshold = tooltipOrientationThresholdKnob()
     const showAxes = showAxesKnob()
+    const {zoomBrushColor, zoomBrushOpacity} = zoomBrushKnobs()
 
     const config: Config = {
       table,
@@ -57,6 +59,8 @@ storiesOf('Scatter Plot', module)
           colors,
         },
       ],
+      zoomBrushColor,
+      zoomBrushOpacity,
     }
 
     return (
@@ -98,6 +102,7 @@ storiesOf('Scatter Plot', module)
     )
     const showAxes = showAxesKnob()
     const legendOrientationThreshold = tooltipOrientationThresholdKnob()
+    const {zoomBrushColor, zoomBrushOpacity} = zoomBrushKnobs()
 
     const config: Config = {
       table,
@@ -120,6 +125,8 @@ storiesOf('Scatter Plot', module)
           colors,
         },
       ],
+      zoomBrushColor,
+      zoomBrushOpacity,
     }
 
     return (