diff --git a/.storybook/Story.scss b/.storybook/Story.scss new file mode 100644 index 00000000..772a71ef --- /dev/null +++ b/.storybook/Story.scss @@ -0,0 +1,273 @@ +@import './styles/modules'; + +.story--example { + max-width: 100%; + border: $cf-border solid $g4-onyx; + border-radius: $cf-radius; + display: flex; + justify-content: center; + align-items: center; + align-content: center; +} + +/* + Markdown Styles + ------------------------------------------------------------------------------ +*/ + +$docs-text-base: 14px; +$docs-text-scale: 1.19; +$docs-text-base-1: (ceil($docs-text-base * $docs-text-scale)); +$docs-text-base-2: ( + ceil($docs-text-base * $docs-text-scale * $docs-text-scale) +); +$docs-text-base-3: ( + ceil($docs-text-base * $docs-text-scale * $docs-text-scale * $docs-text-scale) +); +$docs-text-base-4: ( + ceil( + $docs-text-base * $docs-text-scale * $docs-text-scale * $docs-text-scale * + $docs-text-scale + ) +); +$docs-text-base-5: ( + ceil( + $docs-text-base * $docs-text-scale * $docs-text-scale * $docs-text-scale * + $docs-text-scale * $docs-text-scale + ) +); + +body.sb-show-main { + padding: 52px; +} + +.storybook-readme-story div.markdown-body { + font-size: $docs-text-base; + font-family: 'Roboto', Helvetica, Arial, Tahoma, Verdana, sans-serif; + + h1, + h2, + h3, + h4, + h5, + h6, + p, + ol, + ul { + color: $g13-mist; + margin: 0.25em 0 0.75em 0; + } + + h1, + h2 { + border-bottom: 2px solid $g2-kevlar; + } + + h1 { + line-height: 1.25em; + font-size: ceil($docs-text-base-5 * $docs-text-scale); + font-weight: 300; + letter-spacing: 0.01em; + } + h2 { + line-height: 1.25em; + font-size: $docs-text-base-4; + font-weight: 300; + } + h3 { + line-height: 1.25em; + font-size: $docs-text-base-3; + font-weight: 500; + small { + font-weight: 500; + } + } + h4 { + line-height: 1.25em; + font-size: $docs-text-base-2; + font-weight: 400; + small { + font-weight: 400; + } + } + h5 { + line-height: 1.25em; + font-size: $docs-text-base-1; + font-weight: 600; + small { + font-weight: 500; + } + } + h6 { + line-height: 1.25em; + font-size: $docs-text-base; + font-weight: 900; + small { + font-weight: 500; + } + } + p { + color: $g11-sidewalk; + font-size: $docs-text-base; + line-height: 1.55em; + font-weight: 500; + + b, + strong { + font-weight: 900; + } + + small { + font-weight: 500; + } + } + + ol, + ul { + font-size: $docs-text-base; + } + + li { + line-height: 1.55em; + font-weight: 500; + } + + hr { + margin: $cf-marg-d 0; + height: $cf-border; + border-radius: $cf-border / 2; + background-color: $g2-kevlar; + } + + code { + font-family: 'RobotoMono', monospace; + text-shadow: none; + font-weight: 500; + color: $c-potassium; + background-color: $g2-kevlar; + font-size: inherit; + } + + code.language-js span.token { + &.punctuation { + color: $g10-wolf; + } + &.keyword { + color: $c-hydrogen; + } + &.string { + color: $c-krypton; + } + &.function { + color: $c-pool; + } + &.operator { + color: $c-tungsten; + } + &.comment { + color: $g8-storm; + font-style: italic; + } + } + + pre { + font-size: $docs-text-base; + background-color: $g2-kevlar; + margin: 0.5em 0 1.25em 0; + + p { + margin: 0; + background-color: transparent; + } + } +} + +.storybook-readme-story div.markdown-body table { + border: 0; + + thead th, + tbody td { + border: 0; + padding: $cf-marg-b; + font-size: 13px; + } + + thead tr { + border: 0; + border-bottom: $cf-border solid $g4-onyx; + background-color: transparent; + } + + thead th { + color: $g17-whisper; + } + + tbody tr { + border: 0; + border-top: $cf-border solid $g2-kevlar; + background-color: transparent; + } + + tbody td { + color: $g13-mist; + } +} + +.storybook-readme-story div.markdown-body.markdown-props-table { + h3 { + margin-top: 0.75em !important; + margin-bottom: 0.25em; + } + + table { + display: table; + width: 100%; + + thead th, + tbody td { + text-align: left; + border: 0; + padding: $cf-marg-b; + font-size: 13px; + } + + tbody tr { + background-color: $g0-obsidian; + border: $cf-border solid $g3-castle; + + &:nth-child(even) { + background-color: $g1-raven; + } + + &:nth-child(odd) { + background-color: $g2-kevlar; + } + } + } +} + +table.two-axis-table { + thead tr, + tbody tr { + border: 0; + } + + tbody tr td { + border: $cf-border solid $g2-kevlar; + border-left: 0; + text-align: center; + vertical-align: center; + + &:first-child { + text-align: left; + } + + &:last-child { + border-right: 0; + } + } + + tbody tr:first-child td { + border-top: 0; + } +} diff --git a/.storybook/config.js b/.storybook/config.js index a2a7a981..69369478 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -1,6 +1,10 @@ -import {configure, addParameters} from '@storybook/react' +import {configure, addParameters, addDecorator} from '@storybook/react' import {create} from '@storybook/theming' +import {addReadme} from 'storybook-readme' import 'storybook-chromatic' +import './Story.scss' + +addDecorator(addReadme) addParameters({ options: { diff --git a/.storybook/styles/_influx-colors.scss b/.storybook/styles/_influx-colors.scss new file mode 100644 index 00000000..f4720b12 --- /dev/null +++ b/.storybook/styles/_influx-colors.scss @@ -0,0 +1,77 @@ +/* + Influx Color Palette + ----------------------------------------------------------------------------- +*/ + +// Nuetrals (Dark to Light) +$g0-obsidian: #0f0e15; +$g1-raven: #1c1c21; +$g2-kevlar: #202028; +$g3-castle: #292933; +$g4-onyx: #31313d; +$g5-pepper: #383846; +$g6-smoke: #434453; +$g7-graphite: #545667; +$g8-storm: #676978; +$g9-mountain: #757888; +$g10-wolf: #8e91a1; +$g11-sidewalk: #999dab; +$g12-forge: #a4a8b6; +$g13-mist: #bec2cc; +$g14-chromium: #c6cad3; +$g15-platinum: #d4d7dd; +$g16-pearl: #e7e8eb; +$g17-whisper: #eeeff2; +$g18-cloud: #f6f6f8; +$g19-ghost: #fafafc; +$g20-white: #ffffff; + +// Telegraf (Dark to Light) +$c-basalt: #2F1F29; +$c-ruby: #BF3D5E; +$c-fire: #DC4E58; +$c-curacao: #F95F53; +$c-dreamsicle: #FF8564; +$c-tungsten: #FFB6A0; +$c-marmelade: #FFDCCF; +$c-flan: #FFF7F4; + +// InfluxDB (Dark to Light) +$c-abyss: #182838; +$c-sapphire: #326BBA; +$c-ocean: #4591ED; +$c-pool: #22ADF6; +$c-laser: #00C9FF; +$c-hydrogen: #6BDFFF; +$c-neutrino: #BEF0FF; +$c-yeti: #F0FCFF; + +// Chronograf (Dark to Light) +$c-shadow: #1F2039; +$c-void: #311F94; +$c-amethyst: #513CC6; +$c-star: #7A65F2; +$c-comet: #9394FF; +$c-potassium: #B1B6FF; +$c-moonstone: #C9D0FF; +$c-twilight: #F2F4FF; + +// Kapacitor (Dark to Light) +$c-gypsy: #152B2D; +$c-emerald: #108174; +$c-viridian: #32B08C; +$c-rainforest: #4ED8A0; +$c-honeydew: #7CE490; +$c-krypton: #A5F3B4; +$c-wasabi: #C6FFD0; +$c-mint: #F2FFF4; + +// Warnings (Dark to Light) +$c-oak: #3F241F; +$c-topaz: #E85B1C; +$c-tiger: #F48D38; +$c-pineapple: #FFB94A; +$c-thunder: #FFD255; +$c-sulfur: #FFE480; +$c-daisy: #FFF6B8; +$c-banana: #FFFDDE; diff --git a/.storybook/styles/_variables.scss b/.storybook/styles/_variables.scss new file mode 100644 index 00000000..4762aafe --- /dev/null +++ b/.storybook/styles/_variables.scss @@ -0,0 +1,121 @@ +/* + Z Variables + ----------------------------------------------------------------------------- + Might not actually need any of these yet +*/ + +$z--notifications: 9999; +$z--right-click-layer: 9995; +$z--overlays: 9990; +$z--drag-n-drop: 5000; +$z--draggable-resizer-mask: 9980; + +/* + Page Layout + ----------------------------------------------------------------------------- + NavMenu + Page components +*/ + +$nav-menu--size: 50px; +$nav-menu--gutter: 16px; +$nav-menu--bg: $c-pool; +$nav-menu--bg-accent: $c-comet; +$nav-menu--breakpoint: 800px; + +$page--header-size: 66px; +$page--gutter: 54px; +$page--max-width: 1608px; +$page--title-size: 21px; +$page--title-weight: 400; +$page--gradient-start: $g2-kevlar; +$page--gradient-stop: $g0-obsidian; + +/* + Motifs + ----------------------------------------------------------------------------- + Goal is to re-use these variables as much as possible to ensure powerful + control over the UI kit proportions +*/ + +$cf-marg-a: 4px; +$cf-marg-b: 8px; +$cf-marg-c: 16px; +$cf-marg-d: 32px; +$cf-marg-e: 64px; +$cf-marg-f: 128px; + +$cf-border: 2px; +$cf-radius: 4px; +$cf-radius-sm: $cf-radius - 1px; + +/* + Typography + ----------------------------------------------------------------------------- +*/ + +$cf-text-tiny: 11px; +$cf-text-base: 12px; +$cf-text-scale: 1.19; +$cf-text-base-1: (ceil($cf-text-base * $cf-text-scale)); +$cf-text-base-2: (ceil($cf-text-base * $cf-text-scale * $cf-text-scale)); +$cf-text-base-3: ( + ceil($cf-text-base * $cf-text-scale * $cf-text-scale * $cf-text-scale) +); +$cf-text-base-4: ( + ceil( + $cf-text-base * $cf-text-scale * $cf-text-scale * $cf-text-scale * + $cf-text-scale + ) +); +$cf-text-base-5: ( + ceil( + $cf-text-base * $cf-text-scale * $cf-text-scale * $cf-text-scale * + $cf-text-scale * $cf-text-scale + ) +); + +$cf-text-default: $g13-mist; +$cf-link-default: $c-pool; +$cf-link-default-hover: $c-laser; +$cf-link-success: $c-rainforest; +$cf-link-success-hover: $c-honeydew; +$cf-link-warning: $c-pineapple; +$cf-link-warning-hover: $c-thunder; +$cf-text-secondary: $c-star; +$cf-text-secondary-hover: $c-comet; +$cf-link-danger: $c-curacao; +$cf-link-danger-hover: $c-dreamsicle; + +$cf-text-selection-bg: $c-pool; +$cf-text-selection-color: $g20-white; + +/* + Form Element Sizing + ----------------------------------------------------------------------------- + These ensure consistent sizing across ]elements such as Buttons, Radio, + Dropdown, Input, etc. +*/ + +$form-xs-height: 22px; +$form-xs-padding: 6px; +$form-xs-font: 11px; + +$form-sm-height: 30px; +$form-sm-padding: 9px; +$form-sm-font: 12px; + +$form-md-height: 38px; +$form-md-padding: 12px; +$form-md-font: 13px; + +$form-lg-height: 46px; +$form-lg-padding: 15px; +$form-lg-font: 17px; + +/* + Empty State + ----------------------------------------------------------------------------- +*/ + +$empty-state-text: $g9-mountain; +$empty-state-highlight: $g13-mist; diff --git a/.storybook/styles/modules.scss b/.storybook/styles/modules.scss new file mode 100644 index 00000000..24bd89f1 --- /dev/null +++ b/.storybook/styles/modules.scss @@ -0,0 +1,2 @@ +@import 'influx-colors'; +@import 'variables'; diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index b4d5c569..607b2b43 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -1,19 +1,36 @@ module.exports = ({config}) => { - config.module.rules.push({ - test: /\.(ts|tsx)$/, - use: [ - { - loader: require.resolve('ts-loader'), - options: { - compilerOptions: { - rootDir: null, - outDir: null, - declaration: false, + config.module.rules.push( + { + test: /\.(ts|tsx)$/, + use: [ + { + loader: require.resolve('ts-loader'), + options: { + compilerOptions: { + rootDir: null, + outDir: null, + declaration: false, + }, }, }, - }, - ], - }) + { + loader: require.resolve('react-docgen-typescript-loader'), + }, + ], + }, + { + test: /\.md$/, + use: [ + { + loader: require.resolve('markdown-loader'), + }, + ], + }, + { + test: /\.(css|scss)$/, + loaders: ['style-loader', 'css-loader', 'sass-loader?sourceMap'], + } + ) config.resolve.extensions.push('.ts', '.tsx') return config } diff --git a/package.json b/package.json index 47e405d7..8a1f8913 100644 --- a/package.json +++ b/package.json @@ -29,9 +29,11 @@ "@types/d3-scale": "^2.1.1", "@types/d3-shape": "^1.3.1", "@types/jest": "^24.0.11", + "@types/marked": "^0.6.5", "@types/memoize-one": "^4.1.1", "@types/react": "^16.8.3", "@types/react-dom": "^16.8.2", + "@types/storybook-readme": "^5.0.3", "@types/storybook__react": "^4.0.1", "@typescript-eslint/eslint-plugin": "^1.5.0", "@typescript-eslint/parser": "^1.5.0", @@ -43,14 +45,19 @@ "d3-interpolate": "^1.3.2", "d3-scale": "^3.0.0", "d3-shape": "^1.3.5", + "css-loader": "^2.1.1", "eslint": "^5.15.3", "eslint-config-prettier": "^5.0.0", "eslint-plugin-prettier": "^3.0.1", "eslint-plugin-react": "^7.12.4", "jest": "^24.5.0", "memoize-one": "^5.0.2", + "markdown-loader": "^5.0.0", + "marked": "^0.6.2", + "node-sass": "^4.12.0", "prettier": "^1.16.4", "react": "^16.8.0", + "react-docgen-typescript-loader": "^3.1.0", "react-dom": "^16.8.0", "react-virtualized-auto-sizer": "^1.0.2", "rollup": "^1.10.0", @@ -60,7 +67,10 @@ "rollup-plugin-sourcemaps": "^0.4.2", "rollup-plugin-terser": "^5.0.0", "rollup-plugin-typescript2": "^0.21.2", + "sass-loader": "^7.1.0", "storybook-chromatic": "^1.3.3", + "storybook-readme": "^5.0.3", + "style-loader": "^0.23.1", "ts-jest": "^24.0.0", "ts-loader": "^6.0.4", "typescript": "^3.3.4000", diff --git a/src/components/HistogramLayer.md b/src/components/HistogramLayer.md new file mode 100644 index 00000000..aad377fb --- /dev/null +++ b/src/components/HistogramLayer.md @@ -0,0 +1,38 @@ +# Histogram + +Histogram description + +## Example + + + +## Component + +Histogram Layer + + + +## Usage + +```js +import {HistogramLayer} from '@influxdata/vis' +``` + +## Config + +### DrawBarsOptions + +| Key | Type | +| :------------------ | :---------------------- | +| `canvas` | `HTMLCanvasElement` | +| `table` | `Table` | +| `width` | `number` | +| `height` | `number` | +| `xScale` | `Scale` | +| `yScale` | `Scale` | +| `fillScale` | `Scale` | +| `hoveredRowIndices` | `number[] | null` | + + + + diff --git a/src/components/Plot.tsx b/src/components/Plot.tsx index 3bde5eb0..81ed30a7 100644 --- a/src/components/Plot.tsx +++ b/src/components/Plot.tsx @@ -6,6 +6,7 @@ import {Config, SizedConfig} from '../types' import {SizedPlot} from './SizedPlot' interface Props { + /** Configuration object which describes the visualization */ config: Config } diff --git a/stories/index.stories.tsx b/stories/index.stories.tsx index 2cc89db1..666c3b36 100644 --- a/stories/index.stories.tsx +++ b/stories/index.stories.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import marked from 'marked' import {storiesOf} from '@storybook/react' import {withKnobs, number, select, boolean} from '@storybook/addon-knobs' @@ -18,6 +19,9 @@ import { interpolationKnob, } from './helpers' +// Notes +const histogramReadme = marked(require('../src/components/HistogramLayer.md')) + storiesOf('XY Plot', module) .addDecorator(withKnobs) .add('Line', () => { @@ -62,9 +66,11 @@ storiesOf('XY Plot', module) } return ( - - - +
+ + + +
) }) .add('Scatterplot', () => { @@ -98,9 +104,11 @@ storiesOf('XY Plot', module) } return ( - - - +
+ + + +
) }) .add('Heatmap', () => { @@ -122,32 +130,44 @@ storiesOf('XY Plot', module) } return ( - - - +
+ + + +
) }) - .add('Histogram', () => { - const table = tableKnob() - const colors = colorSchemeKnob() - const legendFont = legendFontKnob() - const tickFont = tickFontKnob() - const x = xKnob(table, '_value') - const showAxes = showAxesKnob() - const binCount = number('Bin Count', 10) + .add( + 'Histogram', + () => { + const table = tableKnob() + const colors = colorSchemeKnob() + const legendFont = legendFontKnob() + const tickFont = tickFontKnob() + const x = xKnob(table, '_value') + const showAxes = showAxesKnob() + const binCount = number('Bin Count', 10) - const config: Config = { - table, - legendFont, - tickFont, - showAxes, - valueFormatters: {[x]: x => `${Math.round(x)}%`}, - layers: [{type: 'histogram', x, fill: ['cpu'], colors, binCount}], - } + const config: Config = { + table, + legendFont, + tickFont, + showAxes, + valueFormatters: {[x]: x => `${Math.round(x)}%`}, + layers: [{type: 'histogram', x, fill: ['cpu'], colors, binCount}], + } - return ( - - - - ) - }) + return ( +
+ + + +
+ ) + }, + { + readme: { + content: histogramReadme, + }, + } + ) diff --git a/stories/sin.stories.tsx b/stories/sin.stories.tsx index 978c02e3..ce821332 100644 --- a/stories/sin.stories.tsx +++ b/stories/sin.stories.tsx @@ -20,8 +20,10 @@ storiesOf('Line Plot Stress Test', module).add('Line', () => { } return ( - - - +
+ + + +
) })