From e71fcb8a392ee31db65bd872cca5ee39eeccb0e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Roman=20Wehmh=C5=91ner?= Date: Tue, 13 Oct 2020 10:40:08 +0200 Subject: [PATCH 1/2] feat: brush Plot options --- giraffe/README.md | 4 ++++ giraffe/src/components/Brush.tsx | 8 ++++++-- giraffe/src/components/SizedPlot.tsx | 2 ++ giraffe/src/constants/index.ts | 2 ++ giraffe/src/types/index.ts | 4 ++++ stories/src/band.stories.tsx | 5 ++++- stories/src/helpers.tsx | 22 ++++++++++++++++++++++ stories/src/index.stories.tsx | 19 +++++++++++++++++++ stories/src/linegraph.stories.tsx | 7 +++++++ stories/src/scatterplot.stories.tsx | 7 +++++++ 10 files changed, 77 insertions(+), 3 deletions(-) diff --git a/giraffe/README.md b/giraffe/README.md index 5f43220c..9d5c950a 100644 --- a/giraffe/README.md +++ b/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: 'aliceblue'_ Color of zooming brush that shows on drag. Value can be any valid CSS color + +- **zoomBrushOpacity** _number. Optional. default: 0.1_ 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. diff --git a/giraffe/src/components/Brush.tsx b/giraffe/src/components/Brush.tsx index 8c57238a..29c97ff2 100644 --- a/giraffe/src/components/Brush.tsx +++ b/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 = ({ event, width, height, + opacity, + color, onXBrushEnd, onYBrushEnd, }) => { @@ -69,8 +73,8 @@ export const Brush: FunctionComponent = ({ width: `${brushWidth}px`, top: `${y}px`, height: `${brushHeight}px`, - opacity: 0.1, - backgroundColor: 'aliceblue', + opacity, + backgroundColor: color, } return
diff --git a/giraffe/src/components/SizedPlot.tsx b/giraffe/src/components/SizedPlot.tsx index 8f3e1f4e..0bb60b86 100644 --- a/giraffe/src/components/SizedPlot.tsx +++ b/giraffe/src/components/SizedPlot.tsx @@ -225,6 +225,8 @@ export const SizedPlot: FunctionComponent = ({ event={dragEvent} width={env.innerWidth} height={env.innerHeight} + color={env.config.zoomBrushColor} + opacity={env.config.zoomBrushOpacity} onXBrushEnd={handleXBrushEnd} onYBrushEnd={handleYBrushEnd} /> diff --git a/giraffe/src/constants/index.ts b/giraffe/src/constants/index.ts index 93562a11..4983b52f 100644 --- a/giraffe/src/constants/index.ts +++ b/giraffe/src/constants/index.ts @@ -52,6 +52,8 @@ export const CONFIG_DEFAULTS: Partial = { legendBackgroundColor: '#1c1c21', legendBorder: '1px solid #202028', legendCrosshairColor: '#31313d', + zoomBrushColor: 'aliceblue', + zoomBrushOpacity: 0.1, } export const LAYER_DEFAULTS: {[layerType: string]: Partial} = { diff --git a/giraffe/src/types/index.ts b/giraffe/src/types/index.ts index 4b81293e..c8330afc 100644 --- a/giraffe/src/types/index.ts +++ b/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 } diff --git a/stories/src/band.stories.tsx b/stories/src/band.stories.tsx index 1590167d..1591f33e 100644 --- a/stories/src/band.stories.tsx +++ b/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 ( diff --git a/stories/src/helpers.tsx b/stories/src/helpers.tsx index 91581df3..b8cae7e7 100644 --- a/stories/src/helpers.tsx +++ b/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} +} diff --git a/stories/src/index.stories.tsx b/stories/src/index.stories.tsx index 6b4773e8..12982429 100644 --- a/stories/src/index.stories.tsx +++ b/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 ( diff --git a/stories/src/linegraph.stories.tsx b/stories/src/linegraph.stories.tsx index b6236667..03ecf4c7 100644 --- a/stories/src/linegraph.stories.tsx +++ b/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 ( diff --git a/stories/src/scatterplot.stories.tsx b/stories/src/scatterplot.stories.tsx index 0668df51..21823e1e 100644 --- a/stories/src/scatterplot.stories.tsx +++ b/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 ( From 8482d191f4696422f395c7dd61e223306ee67424 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Roman=20Wehmh=C5=91ner?= Date: Fri, 16 Oct 2020 08:45:09 +0200 Subject: [PATCH 2/2] feat: BRUSH_THEME_ s added --- giraffe/README.md | 4 ++-- giraffe/src/constants/index.ts | 13 +++++++++++-- giraffe/src/index.ts | 1 + 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/giraffe/README.md b/giraffe/README.md index 9d5c950a..63e53472 100644 --- a/giraffe/README.md +++ b/giraffe/README.md @@ -258,9 +258,9 @@ 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: 'aliceblue'_ Color of zooming brush that shows on drag. Value can be any valid CSS color +- **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: 0.1_ Opacity of zooming brush that shows on drag. Value must be between 0 and 1. +- **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. diff --git a/giraffe/src/constants/index.ts b/giraffe/src/constants/index.ts index 4983b52f..0bb05190 100644 --- a/giraffe/src/constants/index.ts +++ b/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 = { + zoomBrushColor: '#A4A8B6', + zoomBrushOpacity: 0.34, +} + export const CURVES = { linear: curveLinear, monotoneX: curveMonotoneX, @@ -52,8 +62,7 @@ export const CONFIG_DEFAULTS: Partial = { legendBackgroundColor: '#1c1c21', legendBorder: '1px solid #202028', legendCrosshairColor: '#31313d', - zoomBrushColor: 'aliceblue', - zoomBrushOpacity: 0.1, + ...BRUSH_THEME_DARK, } export const LAYER_DEFAULTS: {[layerType: string]: Partial} = { diff --git a/giraffe/src/index.ts b/giraffe/src/index.ts index e34c5732..458e7dbb 100644 --- a/giraffe/src/index.ts +++ b/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