feat: stories missing knobs added

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
 

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<GaugeMiniLayerConfig>
 ): Required<GaugeMiniThemeNormalized> => {
@@ -158,6 +158,7 @@ export const gaugeMiniNormalizeThemeMemoized = (
     ...theme,
     barsDefinitions,
     colors,
+    gaugeMiniColors: colors,
     valueFormater: getFormater(theme.valueFormater),
 
     axesSteps,

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<GaugeMiniLayerConfig>
+type ThemeNormalized = Required<GaugeMiniThemeNormalized>
+type Color = ThemeNormalized['gaugeMiniColors']['min']
 
 const color = (() => {
   const colors = (() => {
@@ -24,64 +32,228 @@ 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',
     {
       bullet: 'bullet',
       progress: 'progress',
     },
-    theme.mode
+    theme.mode,
+    knobGroups.basics
   ),
   textMode: select(
     'textMode',
     {
       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', () => <Story theme={GAUGE_MINI_THEME_BULLET_DARK} />)
+  .add('Progress', () => <Story theme={GAUGE_MINI_THEME_PROGRESS_DARK} />)