From 7da4c27f35615338c248b09af765d7c4c1c39cd6 Mon Sep 17 00:00:00 2001 From: Sciator <39964450+Sciator@users.noreply.github.com> Date: Wed, 20 Jan 2021 08:09:54 +0100 Subject: [PATCH] feat: stories missing knobs added --- giraffe/README.md | 2 +- giraffe/src/utils/gaugeMiniThemeNormalize.ts | 3 +- stories/src/gaugeMini.stories.tsx | 254 ++++++++++++++++--- 3 files changed, 221 insertions(+), 38 deletions(-) diff --git a/giraffe/README.md b/giraffe/README.md index 7fb85f0d..ccda3092 100644 --- a/giraffe/README.md +++ b/giraffe/README.md @@ -725,7 +725,7 @@ TableGraphLayerConfig uses the `fluxResponse` property from `config` as the data - **groupByColumns** _string[]_ bar for each unique combination of given columns values. _(example: `['cpu', '_field', ]`)_ - **bars** _{ barDef: string[], label?: string }[]_ where _barDef_ contains values for specific bar columns and label for this bar. Each barDef value belongs to key grom groupByColumns with same index. - - **mode**: _'progress' | 'bullet'._ + - **mode** _'progress' | 'bullet'._ - `'bullet'` backgroud bar is colored and value bar has always secondary color - `'progress'` value bar is colored and backgroud bar has always secondary color diff --git a/giraffe/src/utils/gaugeMiniThemeNormalize.ts b/giraffe/src/utils/gaugeMiniThemeNormalize.ts index 3fcca275..5a1dd663 100644 --- a/giraffe/src/utils/gaugeMiniThemeNormalize.ts +++ b/giraffe/src/utils/gaugeMiniThemeNormalize.ts @@ -18,6 +18,7 @@ type TBarsDefinitions = GaugeMiniBarsDefinitions<{[key: string]: true}> type RestrictedTypesProperties = { barsDefinitions: TBarsDefinitions colors?: GaugeMiniColors + gaugeMiniColors?: GaugeMiniColors valueFormater?: (value: number) => string axesSteps: undefined | number[] @@ -136,7 +137,6 @@ const getColors = ( } } -// todo: more validations export const gaugeMiniNormalizeThemeMemoized = ( theme: Required ): Required => { @@ -158,6 +158,7 @@ export const gaugeMiniNormalizeThemeMemoized = ( ...theme, barsDefinitions, colors, + gaugeMiniColors: colors, valueFormater: getFormater(theme.valueFormater), axesSteps, diff --git a/stories/src/gaugeMini.stories.tsx b/stories/src/gaugeMini.stories.tsx index 45820dd8..f44d6b46 100644 --- a/stories/src/gaugeMini.stories.tsx +++ b/stories/src/gaugeMini.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import {storiesOf} from '@storybook/react' -import {withKnobs, number, select, text} from '@storybook/addon-knobs' +import {withKnobs, number, select, boolean, text} from '@storybook/addon-knobs' import { Config, GaugeMiniLayerConfig, @@ -14,8 +14,16 @@ import { GAUGE_MINI_THEME_PROGRESS_DARK, } from '../../giraffe/src/constants/gaugeMiniStyles' import {gaugeMiniTable} from './data/gaugeMiniLayer' +import { + gaugeMiniNormalizeThemeMemoized, + GaugeMiniThemeNormalized, +} from '../../giraffe/src/utils/gaugeMiniThemeNormalize' +import {range} from 'd3-array' +import {FormatStatValueOptions} from '../../giraffe/src/utils/formatStatValue' type Theme = Required +type ThemeNormalized = Required +type Color = ThemeNormalized['gaugeMiniColors']['min'] const color = (() => { const colors = (() => { @@ -24,11 +32,74 @@ const color = (() => { return obj })() - // todo: type definitions return (label: string, ...rest: any[]) => select(label, colors, ...rest) })() -const editableLayer = (theme: Theme): Theme & {numberOfBars: number} => ({ +const randInt: { + (max: number): number + (min: number, max: number): number +} = (min: number, max?: number) => { + if (max === undefined) return Math.floor(Math.random() * min) + return min + Math.floor(Math.random() * (max - min)) +} + +const colorRandom = () => { + const colors = Object.values(InfluxColors) + return colors[randInt(colors.length)] +} + +const colorHexValue = ( + label: string, + colorDefault: Color, + groupID: string, + numberOptions: any = {} +): Color => { + return { + hex: color(label + ' - hex', colorDefault?.hex ?? '#888888', groupID), + value: number( + label + ' - value', + colorDefault?.value ?? 50, + numberOptions, + groupID + ), + } +} + +const formatStatValueOptions = ( + label: string, + formDefault: FormatStatValueOptions, + groupID: string +): FormatStatValueOptions => { + const l = (sublabel: string) => label + ' - ' + sublabel + return { + decimalPlaces: { + isEnforced: boolean( + l('decimalPlaces - isEnforced'), + formDefault?.decimalPlaces?.isEnforced ?? false, + groupID + ), + digits: number( + l('decimalPlaces - digits'), + formDefault?.decimalPlaces?.digits ?? 2, + {}, + groupID + ), + }, + prefix: text(l('prefix'), formDefault?.prefix, groupID), + suffix: text(l('suffix'), formDefault?.suffix, groupID), + } +} + +const knobGroups = { + basics: 'basics', + sizing: 'sizing', + colors: 'colors', + labels: 'labels', +} + +const editableLayer = ( + theme: ThemeNormalized +): Theme & {numberOfBars: number} => ({ type: theme.type, mode: select( 'Mode', @@ -36,7 +107,8 @@ const editableLayer = (theme: Theme): Theme & {numberOfBars: number} => ({ bullet: 'bullet', progress: 'progress', }, - theme.mode + theme.mode, + knobGroups.basics ), textMode: select( 'textMode', @@ -44,44 +116,144 @@ const editableLayer = (theme: Theme): Theme & {numberOfBars: number} => ({ follow: 'follow', left: 'left', }, - theme.textMode + theme.textMode, + knobGroups.basics ), - numberOfBars: number('number of bars', 1), + numberOfBars: number('number of bars', 1, {}, knobGroups.basics), barsDefinitions: { groupByColumns: {_field: true}, }, - valueHeight: number('valueHeight', theme.valueHeight), - gaugeHeight: number('gaugeHeight', theme.gaugeHeight), - valueRounding: number('valueRounding', theme.valueRounding), - gaugeRounding: number('gaugeRounding', theme.gaugeRounding), - barPaddings: number('barPaddings', theme.barPaddings), - sidePaddings: number('gaugePaddingSides', theme.sidePaddings), - oveflowFraction: number('oveflowFraction', theme.oveflowFraction), + valueHeight: number('valueHeight', theme.valueHeight, {}, knobGroups.sizing), + gaugeHeight: number('gaugeHeight', theme.gaugeHeight, {}, knobGroups.sizing), + valueRounding: number( + 'valueRounding', + theme.valueRounding, + {}, + knobGroups.sizing + ), + gaugeRounding: number( + 'gaugeRounding', + theme.gaugeRounding, + {}, + knobGroups.sizing + ), + barPaddings: number('barPaddings', theme.barPaddings, {}, knobGroups.sizing), + sidePaddings: number( + 'gaugePaddingSides', + theme.sidePaddings, + {}, + knobGroups.sizing + ), + oveflowFraction: number( + 'oveflowFraction', + theme.oveflowFraction, + {}, + knobGroups.sizing + ), + + colorSecondary: color( + 'colorSecondary', + theme.colorSecondary, + knobGroups.colors + ), + gaugeMiniColors: (() => { + const {thresholds} = theme.gaugeMiniColors + const min = colorHexValue( + 'colorMin', + theme.gaugeMiniColors.min, + knobGroups.colors + ) + const max = colorHexValue( + 'colorMax', + theme.gaugeMiniColors.max, + knobGroups.colors + ) - // todo: add knobs - gaugeMiniColors: theme.gaugeMiniColors, - colorSecondary: color('colorSecondary', theme.colorSecondary), + const colors: Theme['gaugeMiniColors'] = { + min, + max, + thresholds: (() => { + const length = number( + 'thresholds number', + thresholds.length, + {}, + knobGroups.colors + ) - labelMain: text('labelMain', 'Gauge-mini example'), - labelMainFontSize: number('labelMainFontSize', theme.labelMainFontSize), - labelMainFontColor: color('labelMainFontColor', theme.labelMainFontColor), + return range(length).map(x => + colorHexValue( + `threshold ${x}`, + thresholds[x] || { + hex: colorRandom(), + value: randInt(min.value + 1, max.value), + }, + knobGroups.colors, + { + range: true, + min: min.value, + max: max.value, + step: 1, + } + ) + ) + })(), + } + return colors + })(), - labelBarsFontSize: number('labelBarsFontSize', theme.labelBarsFontSize), - labelBarsFontColor: color('labelBarsFontColor', theme.labelBarsFontColor), + labelMain: text('labelMain', 'Gauge-mini example', knobGroups.labels), + labelMainFontSize: number( + 'labelMainFontSize', + theme.labelMainFontSize, + {}, + knobGroups.labels + ), + labelMainFontColor: color( + 'labelMainFontColor', + theme.labelMainFontColor, + knobGroups.labels + ), - valuePadding: number('valuePadding', theme.valuePadding), - valueFontSize: number('valueFontSize', theme.valueFontSize), + labelBarsFontSize: number( + 'labelBarsFontSize', + theme.labelBarsFontSize, + {}, + knobGroups.labels + ), + labelBarsFontColor: color( + 'labelBarsFontColor', + theme.labelBarsFontColor, + knobGroups.labels + ), + + valuePadding: number( + 'valuePadding', + theme.valuePadding, + {}, + knobGroups.labels + ), + valueFontSize: number( + 'valueFontSize', + theme.valueFontSize, + {}, + knobGroups.labels + ), valueFontColorInside: color( 'valueFontColorInside', - theme.valueFontColorInside + theme.valueFontColorInside, + knobGroups.labels ), valueFontColorOutside: color( 'valueFontColorOutside', - theme.valueFontColorOutside + theme.valueFontColorOutside, + knobGroups.labels + ), + valueFormater: formatStatValueOptions( + 'valueFormater', + theme.valueFormater as any, + knobGroups.labels ), - // todo: add knobs - valueFormater: theme.valueFormater, axesSteps: select( 'axesSteps', @@ -92,16 +264,26 @@ const editableLayer = (theme: Theme): Theme & {numberOfBars: number} => ({ 2: 2, undefined: null, }, - theme.axesSteps + 'thresholds', + knobGroups.basics + ), + axesFontSize: number( + 'axesFontSize', + theme.axesFontSize, + {}, + knobGroups.labels + ), + axesFontColor: color('axesFontColor', theme.axesFontColor, knobGroups.labels), + axesFormater: formatStatValueOptions( + 'axesFormater', + theme.axesFormater as any, + knobGroups.labels ), - axesFontSize: number('axesFontSize', theme.axesFontSize), - axesFontColor: color('axesFontColor', theme.axesFontColor), - // todo: add knobs - axesFormater: theme.axesFormater, }) -const createStory = (theme: Theme) => () => { - const layer = editableLayer(theme) +const Story: React.FC<{theme: Theme}> = ({theme}) => { + const normalized = gaugeMiniNormalizeThemeMemoized(theme) + const layer = editableLayer(normalized) const config: Config = { table: gaugeMiniTable(0, 100, layer.numberOfBars), @@ -118,5 +300,5 @@ const createStory = (theme: Theme) => () => { storiesOf('Gauge mini', module) .addDecorator(withKnobs) - .add('Bullet', createStory(GAUGE_MINI_THEME_BULLET_DARK)) - .add('Progress', createStory(GAUGE_MINI_THEME_PROGRESS_DARK)) + .add('Bullet', () => ) + .add('Progress', () => )