chore: move Single Stat stories and add custom csv option (#699)

influxdata · Nov 15, 2021 · fea8150 · fea8150
1 parent 3e89bdc
commit fea8150
Show file tree

Hide file tree

Showing 4 changed files with 282 additions and 216 deletions.
diff --git a/giraffe/package.json b/giraffe/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/giraffe",
-  "version": "2.20.1",
+  "version": "2.20.2",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "MIT",

diff --git a/stories/package.json b/stories/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/giraffe-stories",
-  "version": "2.20.1",
+  "version": "2.20.2",
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/stories/src/customLayer.stories.tsx b/stories/src/customLayer.stories.tsx
@@ -1,33 +1,11 @@
 import * as React from 'react'
 import {storiesOf} from '@storybook/react'
-import {boolean, number, select, text, withKnobs} from '@storybook/addon-knobs'
-import {
-  Config,
-  Plot,
-  LayerConfig,
-  LASER,
-  timeFormatter,
-} from '../../giraffe/src'
+import {withKnobs} from '@storybook/addon-knobs'
+import {Config, Plot} from '../../giraffe/src'
 
-import {
-  PlotContainer,
-  xKnob,
-  yKnob,
-  xScaleKnob,
-  yScaleKnob,
-  fillKnob,
-  colorSchemeKnob,
-  legendFontKnob,
-  tickFontKnob,
-  showAxesKnob,
-  interpolationKnob,
-  timeZoneKnob,
-  tooltipOrientationThresholdKnob,
-  tooltipColorizeRowsKnob,
-} from './helpers'
+import {PlotContainer} from './helpers'
 
 import {CPU} from './data/cpu'
-import {singleStatTable} from './data/singleStatLayer'
 
 storiesOf('Custom Layer', module)
   .addDecorator(withKnobs)
@@ -67,192 +45,3 @@ storiesOf('Custom Layer', module)
       </PlotContainer>
     )
   })
-  .add('Single Stat', () => {
-    const decimalPlaces = Number(text('Decimal Places', '4'))
-    const textOpacity = number('Single Stat Opacity', 1, {
-      range: true,
-      min: 0,
-      max: 1,
-      step: 0.01,
-    })
-    const viewBoxWidth = number('SVG viewBox width', 55, {
-      range: true,
-      min: 0,
-      max: 1000,
-      step: 1,
-    })
-    const viewBoxX = number('SVG viewBox x', 0, {
-      range: true,
-      min: -500,
-      max: 500,
-      step: 1,
-    })
-    const viewBoxY = number('SVG viewBox y', 0, {
-      range: true,
-      min: -500,
-      max: 500,
-      step: 1,
-    })
-    const prefix = text('Prefix', '')
-    const suffix = text('Suffix', '')
-    const config: Config = {
-      table: singleStatTable,
-      showAxes: false,
-      layers: [
-        {
-          type: 'single stat',
-          prefix,
-          suffix,
-          decimalPlaces: {
-            isEnforced: true,
-            digits: decimalPlaces,
-          },
-          textColor: LASER,
-          textOpacity,
-          svgAttributes: {
-            viewBox: stat =>
-              `${viewBoxX} ${viewBoxY} ${stat.length * viewBoxWidth} 100`,
-          },
-        },
-      ],
-    }
-    return (
-      <PlotContainer>
-        <Plot config={config} />
-      </PlotContainer>
-    )
-  })
-  .add('Single Stat on top of Line Layer', () => {
-    const includeSingleStatLayer = boolean('Single Stat', true)
-    const decimalPlaces = Number(text('Decimal Places', '2'))
-    const textOpacity = number('Single Stat Opacity', 1, {
-      range: true,
-      min: 0,
-      max: 1,
-      step: 0.01,
-    })
-    const viewBoxWidth = number('SVG viewBox width', 55, {
-      range: true,
-      min: 0,
-      max: 1000,
-      step: 1,
-    })
-    const viewBoxX = number('SVG viewBox x', 0, {
-      range: true,
-      min: -500,
-      max: 500,
-      step: 1,
-    })
-    const viewBoxY = number('SVG viewBox y', 0, {
-      range: true,
-      min: -500,
-      max: 500,
-      step: 1,
-    })
-    const prefix = text('Prefix', '')
-    const suffix = text('Suffix', '')
-    const table = singleStatTable
-    const colors = colorSchemeKnob()
-    const legendFont = legendFontKnob()
-    const tickFont = tickFontKnob()
-    const x = xKnob(table)
-    const y = yKnob(table)
-    const valueAxisLabel = text('Value Axis Label', 'foo')
-    const xScale = xScaleKnob()
-    const yScale = yScaleKnob()
-    const timeZone = timeZoneKnob()
-    const timeFormat = select(
-      'Time Format',
-      {
-        'DD/MM/YYYY HH:mm:ss.sss': 'DD/MM/YYYY HH:mm:ss.sss',
-        'MM/DD/YYYY HH:mm:ss.sss': 'MM/DD/YYYY HH:mm:ss.sss',
-        'YYYY/MM/DD HH:mm:ss': 'YYYY/MM/DD HH:mm:ss',
-        'YYYY-MM-DD HH:mm:ss ZZ': 'YYYY-MM-DD HH:mm:ss ZZ',
-        'hh:mm a': 'hh:mm a',
-        'HH:mm': 'HH:mm',
-        'HH:mm:ss': 'HH:mm:ss',
-        'HH:mm:ss ZZ': 'HH:mm:ss ZZ',
-        'HH:mm:ss.sss': 'HH:mm:ss.sss',
-        'MMMM D, YYYY HH:mm:ss': 'MMMM D, YYYY HH:mm:ss',
-        'dddd, MMMM D, YYYY HH:mm:ss': 'dddd, MMMM D, YYYY HH:mm:ss',
-      },
-      'YYYY-MM-DD HH:mm:ss ZZ'
-    )
-    const fill = fillKnob(table, ['cpu'])
-    const position = select(
-      'Line Position',
-      {stacked: 'stacked', overlaid: 'overlaid'},
-      'overlaid'
-    )
-    const interpolation = interpolationKnob()
-    const showAxes = showAxesKnob()
-    const lineWidth = number('Line Width', 1)
-    const shadeBelow = boolean('Shade Area', false)
-    const shadeBelowOpacity = number('Area Opacity', 0.1)
-    const hoverDimension = select(
-      'Hover Dimension',
-      {auto: 'auto', x: 'x', y: 'y', xy: 'xy'},
-      'auto'
-    )
-    const legendOrientationThreshold = tooltipOrientationThresholdKnob()
-    const legendColorizeRows = tooltipColorizeRowsKnob()
-
-    const layers = [
-      {
-        type: 'line',
-        x,
-        y,
-        fill,
-        position,
-        interpolation,
-        colors,
-        lineWidth,
-        hoverDimension,
-        shadeBelow,
-        shadeBelowOpacity,
-      },
-    ] as LayerConfig[]
-
-    if (includeSingleStatLayer) {
-      layers.push({
-        type: 'single stat',
-        prefix,
-        suffix,
-        decimalPlaces: {
-          isEnforced: true,
-          digits: decimalPlaces,
-        },
-        textColor: LASER,
-        textOpacity,
-        svgAttributes: {
-          viewBox: stat =>
-            `${viewBoxX} ${viewBoxY} ${stat.length * viewBoxWidth} 100`,
-        },
-      })
-    }
-
-    const config: Config = {
-      table,
-      valueFormatters: {
-        _time: timeFormatter({timeZone, format: timeFormat}),
-        _value: val =>
-          `${val.toFixed(2)}${
-            valueAxisLabel ? ` ${valueAxisLabel}` : valueAxisLabel
-          }`,
-      },
-      xScale,
-      yScale,
-      legendFont,
-      legendOrientationThreshold,
-      legendColorizeRows,
-      tickFont,
-      showAxes,
-      layers,
-    }
-
-    return (
-      <PlotContainer>
-        <Plot config={config} />
-      </PlotContainer>
-    )
-  })