From ea2421fdf6c9dcd64d4a92cd68154278be76ab78 Mon Sep 17 00:00:00 2001 From: Zoe Steinkamp Date: Sun, 7 Feb 2021 19:03:27 -0700 Subject: [PATCH 1/7] feat: adding the abilities to add bytes --- giraffe/src/components/Gauge.tsx | 109 +++++++++++++++++--------- giraffe/src/components/GaugeLayer.tsx | 2 + giraffe/src/types/index.ts | 1 + stories/src/gauge.stories.tsx | 4 +- 4 files changed, 79 insertions(+), 37 deletions(-) diff --git a/giraffe/src/components/Gauge.tsx b/giraffe/src/components/Gauge.tsx index 5f8d5e7f..d8fa5c16 100644 --- a/giraffe/src/components/Gauge.tsx +++ b/giraffe/src/components/Gauge.tsx @@ -29,6 +29,7 @@ interface Props { decimalPlaces: DecimalPlaces theme: GaugeTheme gaugeSize: number + gaugeUnit: string[] } const resetCanvas = ( @@ -55,7 +56,7 @@ const updateCanvas = ( canvasRef: React.MutableRefObject, props: Props ): void => { - const {width, height, colors, theme, gaugeSize} = props + const {width, height, colors, theme, gaugeSize, gaugeUnit} = props resetCanvas(canvasRef, width, height) const canvas = canvasRef.current @@ -122,9 +123,17 @@ const updateCanvas = ( theme, gaugeSize ) - drawGaugeLabels(ctx, radius, gradientThickness, minValue, maxValue, props) + drawGaugeLabels( + ctx, + radius, + gradientThickness, + minValue, + maxValue, + gaugeUnit, + props + ) drawGaugeValue(ctx, radius, labelValueFontSize, props) - drawNeedle(ctx, radius, minValue, maxValue, props) + drawNeedle(ctx, radius, minValue, maxValue, gaugeUnit, props) } const drawGradientGauge = ( @@ -295,55 +304,79 @@ const drawGaugeLabels = ( gradientThickness: number, minValue: number, maxValue: number, + gaugeUnit: string[], props: Props ): void => { const {tickPrefix, tickSuffix, decimalPlaces, gaugeSize} = props const {lineCount, labelColor, labelFontSize} = props.theme - - const tickValues = [ - ...range(minValue, maxValue, Math.abs(maxValue - minValue) / lineCount), - maxValue, - ] - - const labels = tickValues.map(tick => - formatStatValue(tick, { - decimalPlaces, - prefix: tickPrefix, - suffix: tickSuffix, - }) - ) const startDegree = Math.PI - (gaugeSize - Math.PI) / 2 const arcLength = gaugeSize const arcIncrement = arcLength / lineCount + let labelRadius: number // Format labels text ctx.font = `bold ${labelFontSize}px Rubik` ctx.fillStyle = labelColor ctx.textBaseline = 'middle' ctx.textAlign = 'right' - let labelRadius: number - for (let i = 0; i <= lineCount; i++) { - labelRadius = radius + gradientThickness + 23 - if (lineCount === 1 && i === 1) { - ctx.textAlign = 'left' - } else if (lineCount % 2 === 0 && lineCount / i === 2) { - ctx.textAlign = 'center' - } else if (i / (lineCount + 1) >= 0.5) { - ctx.textAlign = 'left' + if (gaugeUnit.toString() === 'bytes') { + const labels = ['0b', '1024Kb', '1024Mb', '1024Gb', '1024Tb', '1024Pb'] + const lineCount = 5 + for (let i = 0; i <= lineCount; i++) { + labelRadius = radius + gradientThickness + 23 + if (i / (lineCount + 1) >= 0.5) { + ctx.textAlign = 'left' + } + + ctx.rotate(startDegree) + ctx.rotate(i * arcIncrement) + ctx.translate(labelRadius, 0) + ctx.rotate(i * -arcIncrement) + ctx.rotate(-startDegree) + ctx.fillText(labels[i], 0, 0) + ctx.rotate(startDegree) + ctx.rotate(i * arcIncrement) + ctx.translate(-labelRadius, 0) + ctx.rotate(i * -arcIncrement) + ctx.rotate(-startDegree) } + } else { + const tickValues = [ + ...range(minValue, maxValue, Math.abs(maxValue - minValue) / lineCount), + maxValue, + ] + + const labels = tickValues.map(tick => + formatStatValue(tick, { + decimalPlaces, + prefix: tickPrefix, + suffix: tickSuffix, + }) + ) - ctx.rotate(startDegree) - ctx.rotate(i * arcIncrement) - ctx.translate(labelRadius, 0) - ctx.rotate(i * -arcIncrement) - ctx.rotate(-startDegree) - ctx.fillText(labels[i], 0, 0) - ctx.rotate(startDegree) - ctx.rotate(i * arcIncrement) - ctx.translate(-labelRadius, 0) - ctx.rotate(i * -arcIncrement) - ctx.rotate(-startDegree) + for (let i = 0; i <= lineCount; i++) { + labelRadius = radius + gradientThickness + 23 + if (lineCount === 1 && i === 1) { + ctx.textAlign = 'left' + } else if (lineCount % 2 === 0 && lineCount / i === 2) { + ctx.textAlign = 'center' + } else if (i / (lineCount + 1) >= 0.5) { + ctx.textAlign = 'left' + } + + ctx.rotate(startDegree) + ctx.rotate(i * arcIncrement) + ctx.translate(labelRadius, 0) + ctx.rotate(i * -arcIncrement) + ctx.rotate(-startDegree) + ctx.fillText(labels[i], 0, 0) + ctx.rotate(startDegree) + ctx.rotate(i * arcIncrement) + ctx.translate(-labelRadius, 0) + ctx.rotate(i * -arcIncrement) + ctx.rotate(-startDegree) + } } } @@ -377,6 +410,7 @@ const drawNeedle = ( radius: number, minValue: number, maxValue: number, + gaugeUnit: string[], props: Props ): void => { const {gaugePosition, gaugeSize, decimalPlaces} = props @@ -394,6 +428,9 @@ const drawNeedle = ( digits = Math.min(digits, MAX_DECIMAL_PLACES) const formattedGaugePosition = Number(gaugePosition.toFixed(digits)) + if (gaugeUnit.toString() === 'bytes') { + maxValue = 5120 + } if (formattedGaugePosition < minValue) { needleRotation = 0 - overflowDelta diff --git a/giraffe/src/components/GaugeLayer.tsx b/giraffe/src/components/GaugeLayer.tsx index 25295be8..cec40d50 100644 --- a/giraffe/src/components/GaugeLayer.tsx +++ b/giraffe/src/components/GaugeLayer.tsx @@ -25,6 +25,7 @@ export const GaugeLayer: FunctionComponent = (props: Props) => { gaugeColors, gaugeSize = Math.PI, gaugeTheme = {}, + gaugeUnit, } = config const MAX_PI_DECIMALS = 3 // values above 3 distort Gauge styling @@ -57,6 +58,7 @@ export const GaugeLayer: FunctionComponent = (props: Props) => { decimalPlaces={decimalPlaces} gaugeSize={validGaugeSize} theme={{...GAUGE_THEME_DARK, ...gaugeTheme}} + gaugeUnit={gaugeUnit} /> )} diff --git a/giraffe/src/types/index.ts b/giraffe/src/types/index.ts index 1d87344c..0676fc22 100644 --- a/giraffe/src/types/index.ts +++ b/giraffe/src/types/index.ts @@ -301,6 +301,7 @@ export interface GaugeLayerConfig { gaugeColors: Color[] gaugeSize?: number gaugeTheme?: Partial + gaugeUnit: string[] } export interface GaugeTheme { diff --git a/stories/src/gauge.stories.tsx b/stories/src/gauge.stories.tsx index 73c65016..aa938bf0 100644 --- a/stories/src/gauge.stories.tsx +++ b/stories/src/gauge.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import {storiesOf} from '@storybook/react' -import {withKnobs, number, text} from '@storybook/addon-knobs' +import {withKnobs, number, text, select} from '@storybook/addon-knobs' import {Config, Plot, GaugeTheme} from '../../giraffe/src' import {DEFAULT_GAUGE_COLORS} from '../../giraffe/src' @@ -43,6 +43,7 @@ storiesOf('Gauge', module) const suffix = text('Suffix', '') const tickPrefix = text('TickPrefix', '') const tickSuffix = text('TickSuffix', '') + const gaugeUnit = select('Unit', {bytes: 'bytes', none: ''}, '') const config: Config = { table: gaugeTable(gaugeMin, gaugeMax), @@ -62,6 +63,7 @@ storiesOf('Gauge', module) {...DEFAULT_GAUGE_COLORS[1], value: gaugeMax}, ], gaugeSize, + gaugeUnit, gaugeTheme: { valuePositionYOffset, valuePositionXOffset, From 5d496b084c52fac2e56c9614d005f8ac315980ca Mon Sep 17 00:00:00 2001 From: Zoe Steinkamp Date: Fri, 2 Apr 2021 14:21:37 -0600 Subject: [PATCH 2/7] feat: adding more unit options --- giraffe/src/components/Gauge.tsx | 42 ++++++++++++++++++++++++++++++++ stories/src/gauge.stories.tsx | 8 ++++-- 2 files changed, 48 insertions(+), 2 deletions(-) diff --git a/giraffe/src/components/Gauge.tsx b/giraffe/src/components/Gauge.tsx index d8fa5c16..e563f152 100644 --- a/giraffe/src/components/Gauge.tsx +++ b/giraffe/src/components/Gauge.tsx @@ -329,6 +329,48 @@ const drawGaugeLabels = ( ctx.textAlign = 'left' } + ctx.rotate(startDegree) + ctx.rotate(i * arcIncrement) + ctx.translate(labelRadius, 0) + ctx.rotate(i * -arcIncrement) + ctx.rotate(-startDegree) + ctx.fillText(labels[i], 0, 0) + ctx.rotate(startDegree) + ctx.rotate(i * arcIncrement) + ctx.translate(-labelRadius, 0) + ctx.rotate(i * -arcIncrement) + ctx.rotate(-startDegree) + } + } else if (gaugeUnit.toString() === 'time') { + const labels = ['0', '60s', '60m', '24h', '30d'] + const lineCount = 5 + for (let i = 0; i <= lineCount; i++) { + labelRadius = radius + gradientThickness + 23 + if (i / (lineCount + 1) >= 0.5) { + ctx.textAlign = 'left' + } + + ctx.rotate(startDegree) + ctx.rotate(i * arcIncrement) + ctx.translate(labelRadius, 0) + ctx.rotate(i * -arcIncrement) + ctx.rotate(-startDegree) + ctx.fillText(labels[i], 0, 0) + ctx.rotate(startDegree) + ctx.rotate(i * arcIncrement) + ctx.translate(-labelRadius, 0) + ctx.rotate(i * -arcIncrement) + ctx.rotate(-startDegree) + } + } else if (gaugeUnit.toString() === 'USD') { + const labels = ['0', '60s', '60m', '24h', '30d'] + const lineCount = 5 + for (let i = 0; i <= lineCount; i++) { + labelRadius = radius + gradientThickness + 23 + if (i / (lineCount + 1) >= 0.5) { + ctx.textAlign = 'left' + } + ctx.rotate(startDegree) ctx.rotate(i * arcIncrement) ctx.translate(labelRadius, 0) diff --git a/stories/src/gauge.stories.tsx b/stories/src/gauge.stories.tsx index aa938bf0..bcd8af75 100644 --- a/stories/src/gauge.stories.tsx +++ b/stories/src/gauge.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import {storiesOf} from '@storybook/react' -import {withKnobs, number, text, select} from '@storybook/addon-knobs' +import {boolean, withKnobs, number, text, select} from '@storybook/addon-knobs' import {Config, Plot, GaugeTheme} from '../../giraffe/src' import {DEFAULT_GAUGE_COLORS} from '../../giraffe/src' @@ -43,7 +43,11 @@ storiesOf('Gauge', module) const suffix = text('Suffix', '') const tickPrefix = text('TickPrefix', '') const tickSuffix = text('TickSuffix', '') - const gaugeUnit = select('Unit', {bytes: 'bytes', none: ''}, '') + const gaugeUnit = select( + 'Unit', + {bytes: 'bytes', time: 'time', usd: 'USD', none: ''}, + '' + ) const config: Config = { table: gaugeTable(gaugeMin, gaugeMax), From 0a409e347b8c78fa668692ff0eb1306d9af64081 Mon Sep 17 00:00:00 2001 From: Zoe Steinkamp Date: Tue, 13 Apr 2021 14:33:45 -0600 Subject: [PATCH 3/7] fix: add usd --- giraffe/src/components/Gauge.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/giraffe/src/components/Gauge.tsx b/giraffe/src/components/Gauge.tsx index e563f152..71c9a2e0 100644 --- a/giraffe/src/components/Gauge.tsx +++ b/giraffe/src/components/Gauge.tsx @@ -363,7 +363,7 @@ const drawGaugeLabels = ( ctx.rotate(-startDegree) } } else if (gaugeUnit.toString() === 'USD') { - const labels = ['0', '60s', '60m', '24h', '30d'] + const labels = ['0', '1000', '1000m', '1000b', '1000t'] const lineCount = 5 for (let i = 0; i <= lineCount; i++) { labelRadius = radius + gradientThickness + 23 From b39906ccbfb7b0621ba664b47250f843e166df23 Mon Sep 17 00:00:00 2001 From: Zoe Steinkamp Date: Mon, 10 May 2021 11:57:40 -0600 Subject: [PATCH 4/7] fix: the line count issue --- giraffe/src/components/Gauge.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/giraffe/src/components/Gauge.tsx b/giraffe/src/components/Gauge.tsx index 71c9a2e0..6179da68 100644 --- a/giraffe/src/components/Gauge.tsx +++ b/giraffe/src/components/Gauge.tsx @@ -90,6 +90,15 @@ const updateCanvas = ( ) ) + //gauge line needs to be changed if gauge unit is being used + if (gaugeUnit.toString() === 'bytes') { + theme.lineCount = 5 + } else if (gaugeUnit.toString() === 'time') { + theme.lineCount = 4 + } else if (gaugeUnit.toString() === 'USD') { + theme.lineCount = 4 + } + // The following functions must be called in the specified order if (colors.length === MIN_THRESHOLDS) { drawGradientGauge( From 1267e5d5d6d90f883409b300ff2ed76f8a8d6bb3 Mon Sep 17 00:00:00 2001 From: Zoe Steinkamp Date: Mon, 10 May 2021 12:33:09 -0600 Subject: [PATCH 5/7] fix: remove boolean --- stories/src/gauge.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stories/src/gauge.stories.tsx b/stories/src/gauge.stories.tsx index bcd8af75..44d0b5a5 100644 --- a/stories/src/gauge.stories.tsx +++ b/stories/src/gauge.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import {storiesOf} from '@storybook/react' -import {boolean, withKnobs, number, text, select} from '@storybook/addon-knobs' +import {withKnobs, number, text, select} from '@storybook/addon-knobs' import {Config, Plot, GaugeTheme} from '../../giraffe/src' import {DEFAULT_GAUGE_COLORS} from '../../giraffe/src' From 8e68aecec1360924029e87b3e14c64554789cb41 Mon Sep 17 00:00:00 2001 From: Zoe Steinkamp Date: Mon, 10 May 2021 21:25:05 -0600 Subject: [PATCH 6/7] fix: fixed the errors for the two units --- giraffe/src/components/Gauge.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/giraffe/src/components/Gauge.tsx b/giraffe/src/components/Gauge.tsx index 6179da68..d1fb41a4 100644 --- a/giraffe/src/components/Gauge.tsx +++ b/giraffe/src/components/Gauge.tsx @@ -94,9 +94,9 @@ const updateCanvas = ( if (gaugeUnit.toString() === 'bytes') { theme.lineCount = 5 } else if (gaugeUnit.toString() === 'time') { - theme.lineCount = 4 + theme.lineCount = 5 } else if (gaugeUnit.toString() === 'USD') { - theme.lineCount = 4 + theme.lineCount = 5 } // The following functions must be called in the specified order @@ -351,7 +351,7 @@ const drawGaugeLabels = ( ctx.rotate(-startDegree) } } else if (gaugeUnit.toString() === 'time') { - const labels = ['0', '60s', '60m', '24h', '30d'] + const labels = ['0', '60s', '60m', '12h', '24h', '30d'] const lineCount = 5 for (let i = 0; i <= lineCount; i++) { labelRadius = radius + gradientThickness + 23 @@ -372,7 +372,7 @@ const drawGaugeLabels = ( ctx.rotate(-startDegree) } } else if (gaugeUnit.toString() === 'USD') { - const labels = ['0', '1000', '1000m', '1000b', '1000t'] + const labels = ['0', '100', '1000', '1000m', '1000b', '1000t'] const lineCount = 5 for (let i = 0; i <= lineCount; i++) { labelRadius = radius + gradientThickness + 23 From 6ea52ffb39347b7a616fc67597204a1f191963ea Mon Sep 17 00:00:00 2001 From: Zoe Steinkamp Date: Thu, 13 May 2021 12:29:20 -0600 Subject: [PATCH 7/7] doc: adding update to read docs --- giraffe/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/giraffe/README.md b/giraffe/README.md index d34f3e3c..5d36b001 100644 --- a/giraffe/README.md +++ b/giraffe/README.md @@ -717,6 +717,8 @@ TableGraphLayerConfig uses the `fluxResponse` property from `config` as the data - **tickSuffix**: _string. Optional._ The text that appears after each tick label. Use an empty string if no text is preferred. + - **gaugeUnit**: _select. Optional._ It allows the user to pick a unit of byte, usd, or time. Automatically set to none. This will change the tick prefix to change to the preset units. If Gauge units is selected lineCount is overwritten and will not respond to inputs. + - **decimalPlaces**: _Object. Optional._ - **isEnforced**: _boolean. Optional. Defaults to false when not included._ Indicates whether the number of decimal places ("**digits**") will be enforced. When **isEnforced** is falsy or omitted, **digits** will be locked to 2 for stat values with a decimal and 0 for stat values that are integers, and the **digits** option will be ignored.