From c32c5729e3402b20983c020dfb8d51d569be916c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= Date: Thu, 14 Dec 2017 05:54:01 +0900 Subject: [PATCH] feat(website): improve chart tabs --- .../nivo-line/src/canvas/LineChartCanvas.js | 209 +++++++++++++----- packages/nivo-line/src/compute.js | 126 ----------- packages/nivo-line/src/index.js | 1 - packages/nivo-line/src/props.js | 128 ----------- packages/nivo-line/src/svg/LineChartSvg.js | 2 +- packages/nivo-scales/src/Scales.js | 18 +- packages/nivo-scales/src/compute.js | 14 ++ website/src/components/ChartHeader.js | 12 +- website/src/components/ChartTabs.js | 68 +++--- website/src/components/charts/bar/Bar.js | 10 +- .../src/components/charts/bar/BarCanvas.js | 5 +- .../src/components/charts/bubble/Bubble.js | 8 +- .../components/charts/bubble/BubbleCanvas.js | 16 +- .../components/charts/bubble/BubbleHtml.js | 8 +- website/src/components/charts/chord/Chord.js | 13 +- .../components/charts/chord/ChordCanvas.js | 7 +- .../src/components/charts/heatmap/HeatMap.js | 11 +- .../charts/heatmap/HeatMapCanvas.js | 7 +- .../src/components/charts/line/Line/index.js | 17 +- .../charts/line/LineCanvas/defaultSettings.js | 1 + .../charts/line/LineCanvas/generateData.js | 6 + .../charts/line/LineCanvas/index.js | 13 +- website/src/components/charts/line/props.js | 4 +- website/src/components/charts/pie/Pie.js | 3 +- website/src/components/charts/radar/Radar.js | 8 +- .../src/components/charts/sankey/Sankey.js | 15 +- .../charts/scatterplot/ScatterPlot.js | 15 +- .../charts/scatterplot/ScatterPlotCanvas.js | 9 +- .../src/components/charts/stream/Stream.js | 16 +- .../components/charts/sunburst/Sunburst.js | 8 +- .../src/components/charts/treemap/TreeMap.js | 13 +- .../charts/treemap/TreeMapCanvas.js | 16 +- .../components/charts/treemap/TreeMapHtml.js | 13 +- .../src/components/charts/voronoi/Voronoi.js | 10 +- website/src/styles/charts.css | 54 ++--- website/src/styles/index.css | 10 +- 36 files changed, 361 insertions(+), 533 deletions(-) delete mode 100644 packages/nivo-line/src/props.js diff --git a/packages/nivo-line/src/canvas/LineChartCanvas.js b/packages/nivo-line/src/canvas/LineChartCanvas.js index b9019f950..61d8bcd2a 100644 --- a/packages/nivo-line/src/canvas/LineChartCanvas.js +++ b/packages/nivo-line/src/canvas/LineChartCanvas.js @@ -7,6 +7,7 @@ * file that was distributed with this source code. */ import React, { Component } from 'react' +import PropTypes from 'prop-types' import { sortBy } from 'lodash' import { line, area } from 'd3-shape' import compose from 'recompose/compose' @@ -15,10 +16,17 @@ import withPropsOnChange from 'recompose/withPropsOnChange' import defaultProps from 'recompose/defaultProps' import setDisplayName from 'recompose/setDisplayName' import { renderAxesToCanvas, renderGridLinesToCanvas } from '@nivo/axes' -import { withTheme, withColors, withDimensions, curveFromProp, Container } from '@nivo/core' -import { renderLegendToCanvas } from '@nivo/legends' -import { getScales, getStackedScales, generateLines, generateStackedLines } from '../compute' -import { LinePropTypes, LineDefaultProps } from '../props' +import { + withTheme, + withColors, + withDimensions, + curveFromProp, + Container, + lineCurvePropType, +} from '@nivo/core' +import { renderLegendToCanvas, LegendPropShape } from '@nivo/legends' +import { generateStackedLines } from '../compute' +import { scalesFromConfig } from '@nivo/scales' class LineChartCanvas extends Component { componentDidMount() { @@ -86,7 +94,7 @@ class LineChartCanvas extends Component { lines.forEach(line => { ctx.beginPath() boundGenerator( - line.points.map(d => ({ + line.data.map(d => ({ x: d.x !== null ? xScale(d.x) : null, y: d.y !== null ? yScale(d.y) : null, })) @@ -104,7 +112,7 @@ class LineChartCanvas extends Component { lines.forEach(line => { ctx.beginPath() boundGenerator( - line.points.map(d => ({ + line.data.map(d => ({ x: d.x !== null ? xScale(d.x) : null, y: d.y !== null ? yScale(d.y) : null, })) @@ -122,7 +130,7 @@ class LineChartCanvas extends Component { })) legends.forEach(legend => { - renderLegendToCanvas(this.ctx, { + renderLegendToCanvas(ctx, { ...legend, data: legendData, containerWidth: width, @@ -251,76 +259,171 @@ class LineChartCanvas extends Component { } } -LineChartCanvas.propTypes = LinePropTypes +LineChartCanvas.propTypes = { + // data + data: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + data: PropTypes.arrayOf( + PropTypes.shape({ + x: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, + y: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + }) + ).isRequired, + }) + ).isRequired, + + stacked: PropTypes.bool.isRequired, + curve: lineCurvePropType.isRequired, + + lines: PropTypes.array.isRequired, + slices: PropTypes.array.isRequired, + + xScale: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired, + yScale: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired, + + // axes & grid + axisTop: PropTypes.object, + axisRight: PropTypes.object, + axisBottom: PropTypes.object, + axisLeft: PropTypes.object, + enableGridX: PropTypes.bool.isRequired, + enableGridY: PropTypes.bool.isRequired, + + // dots + enableDots: PropTypes.bool.isRequired, + dotsEveryNth: PropTypes.number.isRequired, + dotSymbol: PropTypes.func, + dotSize: PropTypes.number.isRequired, + dotColor: PropTypes.any.isRequired, + dotBorderWidth: PropTypes.number.isRequired, + dotBorderColor: PropTypes.any.isRequired, + enableDotLabel: PropTypes.bool.isRequired, + + // markers + markers: PropTypes.arrayOf( + PropTypes.shape({ + axis: PropTypes.oneOf(['x', 'y']).isRequired, + value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, + style: PropTypes.object, + }) + ), + + // styling + getColor: PropTypes.func.isRequired, + enableArea: PropTypes.bool.isRequired, + areaOpacity: PropTypes.number.isRequired, + lineWidth: PropTypes.number.isRequired, + + // interactivity + isInteractive: PropTypes.bool.isRequired, + enableStackTooltip: PropTypes.bool.isRequired, + tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + + legends: PropTypes.arrayOf(PropTypes.shape(LegendPropShape)).isRequired, +} const enhance = compose( - defaultProps(LineDefaultProps), + setDisplayName('LineChartCanvas'), + defaultProps({ + // scales + xScale: { + type: 'linear', + }, + yScale: { + type: 'linear', + min: 0, + }, + + stacked: false, + curve: 'linear', + + // grid + enableGridX: true, + enableGridY: true, + + // dots + enableDots: true, + dotsEveryNth: 1, + dotSize: 6, + dotColor: 'inherit', + dotBorderWidth: 0, + dotBorderColor: 'inherit', + enableDotLabel: false, + + // styling + colors: 'nivo', + colorBy: 'id', + enableArea: false, + areaOpacity: 0.2, + lineWidth: 2, + defs: [], + + // interactivity + isInteractive: true, + enableStackTooltip: true, + + legends: [], + }), withTheme(), withColors(), withDimensions(), withPropsOnChange(['curve', 'height'], ({ curve, height }) => ({ areaGenerator: area() + .defined(d => d && d.x !== null && d.y !== null) .x(d => d.x) .y0(height) .y1(d => d.y) .curve(curveFromProp(curve)), lineGenerator: line() - .defined(d => d.value !== null) + .defined(d => d && d.x !== null && d.y !== null) .x(d => d.x) .y(d => d.y) .curve(curveFromProp(curve)), })), withPropsOnChange( - ['data', 'stacked', 'width', 'height', 'minY', 'maxY', 'xScaleType'], - ({ data, stacked, width, height, margin, minY, maxY, xScaleType }) => { - let scales - const args = { data, width, height, minY, maxY, xScaleType } - if (stacked === true) { - scales = getStackedScales(args) - } else { - scales = getScales(args) - } + ['data', 'stacked', 'width', 'height', 'xScale', 'yScale'], + ({ data, stacked, width, height, xScale, yScale }) => { + const scales = scalesFromConfig([ + { + ...xScale, + id: 'x', + property: 'x', + range: [0, width], + data: data.map(data => data.data), + }, + { + ...yScale, + id: 'y', + property: 'y', + range: [height, 0], + stacked, + data: data.map(data => data.data), + }, + ]) return { - margin, - width, - height, - ...scales, + xScale: scales.x, + yScale: scales.y, } } ), - withPropsOnChange( - ['getColor', 'xScale', 'yScale'], - ({ data, stacked, xScale, yScale, getColor }) => { - let lines - if (stacked === true) { - lines = generateStackedLines(data, xScale, yScale, getColor) - } else { - lines = generateLines(data, xScale, yScale, getColor) - } + withPropsOnChange(['data', 'stacked', 'getColor'], ({ data, stacked, getColor }) => { + let lines + if (stacked === true) { + lines = generateStackedLines(data).map(serie => ({ ...serie, color: getColor(serie) })) + } else { + lines = data.map(serie => ({ + ...serie, + color: getColor(serie), + })) + } - const slices = xScale.domain().map((id, i) => { - let points = sortBy( - lines.map(line => ({ - id: line.id, - value: line.points[i].value, - y: line.points[i].y, - color: line.color, - })), - 'y' - ) - - return { - id, - x: xScale(id), - points, - } - }) + const slices = [] - return { lines, slices } - } - ), + return { lines, slices } + }), pure ) -export default setDisplayName('LineChartCanvas')(enhance(LineChartCanvas)) +export default enhance(LineChartCanvas) diff --git a/packages/nivo-line/src/compute.js b/packages/nivo-line/src/compute.js index 6ab9b7fc8..d8f29002c 100644 --- a/packages/nivo-line/src/compute.js +++ b/packages/nivo-line/src/compute.js @@ -9,132 +9,6 @@ import { range, min, max, sumBy, uniq } from 'lodash' import { scalePoint, scaleLinear } from 'd3-scale' -/** - * Generates X scale. - * - * @param {Array.} data - * @param {number} width - * @param {('linear'|'ordinal')} type - * - * @returns {Function} - */ -export const getXScale = (data, width, type) => { - if (type === 'linear') { - const minX = min(data.map(({ data }) => min(data.map(d => d.x)))) - const maxX = max(data.map(({ data }) => max(data.map(d => d.x)))) - - return scaleLinear() - .range([0, width]) - .domain([minX, maxX]) - } else if (type === 'ordinal') { - const xLengths = uniq(data.map(({ data }) => data.length)) - if (xLengths.length > 1) { - throw new Error( - [ - `Found inconsitent data for x,`, - `expecting all series to have same length`, - `but found: ${xLengths.join(', ')}`, - ].join(' ') - ) - } - - return scalePoint() - .range([0, width]) - .domain(data[0].data.map(({ x }) => x)) - } - - throw new TypeError(`Invalid scale type '${type}', must be one of: 'linear', 'ordinal'`) -} - -/** - * Generates Y scale for line chart. - * - * @param {Array.} data - * @param {number} height - * @param {number|string} minValue - * @param {number|string} maxValue - * @returns {Function} - */ -export const getYScale = (data, height, minValue, maxValue) => { - let minY = minValue - if (minValue === 'auto') { - minY = min(data.map(serie => min(serie.data.map(d => d.y)))) - } - - let maxY = maxValue - if (maxValue === 'auto') { - maxY = max(data.map(serie => max(serie.data.map(d => d.y)))) - } - - return scaleLinear() - .rangeRound([height, 0]) - .domain([minY, maxY]) -} - -/** - * Generates Y scale for stacked line chart. - * - * @param {Array.} data - * @param {Object} xScale - * @param {number} height - * @param {number|string} minValue - * @param {number|string} maxValue - * @returns {Function} - */ -export const getStackedYScale = (data, xScale, height, minValue, maxValue) => { - let minY = minValue - if (minValue === 'auto') { - minY = min(data.map(serie => min(serie.data.map(d => d.y)))) - } - - let maxY = maxValue - if (maxValue === 'auto') { - maxY = max(range(xScale.domain().length).map(i => sumBy(data, serie => serie.data[i].y))) - } - - return scaleLinear() - .rangeRound([height, 0]) - .domain([minY, maxY]) -} - -/** - * Generates stacked x/y scales. - * - * @param {Array} data - * @param {number} width - * @param {number} height - * @param {number|string} minY - * @param {number|string} maxY - * @param {('linear'|'ordinal')} xScaleType - * - * @return {{ xScale: Function, yScale: Function }} - */ -export const getStackedScales = ({ data, width, height, minY, maxY, xScaleType }) => { - const xScale = getXScale(data, width, xScaleType) - const yScale = getStackedYScale(data, xScale, height, minY, maxY) - - return { xScale, yScale } -} - -/** - * Generates non stacked x/ scales - * - * @param {Array} data - * @param {number} width - * @param {number} height - * @param {number|string} minY - * @param {number|string} maxY - * @param {('linear'|'ordinal')} xScaleType - * - * @return {{ xScale: Function, yScale: Function }} - */ -export const getScales = ({ data, width, height, minY, maxY, xScaleType }) => { - const xScale = getXScale(data, width, xScaleType) - const yScale = getYScale(data, height, minY, maxY) - - return { xScale, yScale } -} - /** * Generates x/y scales & lines for line chart. * diff --git a/packages/nivo-line/src/index.js b/packages/nivo-line/src/index.js index 15d0886db..308a85b02 100644 --- a/packages/nivo-line/src/index.js +++ b/packages/nivo-line/src/index.js @@ -6,6 +6,5 @@ * For the full copyright and license information, please view the LICENSE * file that was distributed with this source code. */ -export * from './props' export * from './svg' export * from './canvas' diff --git a/packages/nivo-line/src/props.js b/packages/nivo-line/src/props.js deleted file mode 100644 index 288d65546..000000000 --- a/packages/nivo-line/src/props.js +++ /dev/null @@ -1,128 +0,0 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ -import PropTypes from 'prop-types' -import { lineCurvePropType } from '@nivo/core' -import { LegendPropShape } from '@nivo/legends' - -export const LinePropTypes = { - // data - data: PropTypes.arrayOf( - PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - data: PropTypes.arrayOf( - PropTypes.shape({ - x: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, - y: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - }) - ).isRequired, - }) - ).isRequired, - - stacked: PropTypes.bool.isRequired, - curve: lineCurvePropType.isRequired, - - lines: PropTypes.array.isRequired, - slices: PropTypes.array.isRequired, - - minY: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.oneOf(['auto'])]) - .isRequired, - maxY: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.oneOf(['auto'])]) - .isRequired, - - xScaleType: PropTypes.oneOf(['linear', 'ordinal']).isRequired, - xScale: PropTypes.func, // computed - yScale: PropTypes.func, // computed - - // axes & grid - axisTop: PropTypes.object, - axisRight: PropTypes.object, - axisBottom: PropTypes.object, - axisLeft: PropTypes.object, - enableGridX: PropTypes.bool.isRequired, - enableGridY: PropTypes.bool.isRequired, - - // dots - enableDots: PropTypes.bool.isRequired, - dotsEveryNth: PropTypes.number.isRequired, - dotSymbol: PropTypes.func, - dotSize: PropTypes.number.isRequired, - dotColor: PropTypes.any.isRequired, - dotBorderWidth: PropTypes.number.isRequired, - dotBorderColor: PropTypes.any.isRequired, - enableDotLabel: PropTypes.bool.isRequired, - - // markers - markers: PropTypes.arrayOf( - PropTypes.shape({ - axis: PropTypes.oneOf(['x', 'y']).isRequired, - value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, - style: PropTypes.object, - }) - ), - - // styling - getColor: PropTypes.func.isRequired, - enableArea: PropTypes.bool.isRequired, - areaOpacity: PropTypes.number.isRequired, - lineWidth: PropTypes.number.isRequired, - defs: PropTypes.arrayOf( - PropTypes.shape({ - id: PropTypes.string.isRequired, - }) - ).isRequired, - - // interactivity - isInteractive: PropTypes.bool.isRequired, - enableStackTooltip: PropTypes.bool.isRequired, - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - - legends: PropTypes.arrayOf(PropTypes.shape(LegendPropShape)).isRequired, -} - -export const LineDefaultProps = { - indexBy: 'id', - keys: ['value'], - - stacked: false, - curve: 'linear', - - // scales - xScaleType: 'linear', - minY: 0, - maxY: 'auto', - - // axes & grid - axisBottom: {}, - axisLeft: {}, - enableGridX: true, - enableGridY: true, - - // dots - enableDots: true, - dotsEveryNth: 1, - dotSize: 6, - dotColor: 'inherit', - dotBorderWidth: 0, - dotBorderColor: 'inherit', - enableDotLabel: false, - - // styling - colors: 'nivo', - colorBy: 'id', - enableArea: false, - areaOpacity: 0.2, - lineWidth: 2, - defs: [], - - // interactivity - isInteractive: true, - enableStackTooltip: true, - - legends: [], -} diff --git a/packages/nivo-line/src/svg/LineChartSvg.js b/packages/nivo-line/src/svg/LineChartSvg.js index a81b5f639..b566af3dd 100644 --- a/packages/nivo-line/src/svg/LineChartSvg.js +++ b/packages/nivo-line/src/svg/LineChartSvg.js @@ -328,7 +328,7 @@ const enhance = compose( stacked: false, curve: 'linear', - // axes & grid + // grid enableGridX: true, enableGridY: true, diff --git a/packages/nivo-scales/src/Scales.js b/packages/nivo-scales/src/Scales.js index ea5be1d8c..8651eca5a 100644 --- a/packages/nivo-scales/src/Scales.js +++ b/packages/nivo-scales/src/Scales.js @@ -13,12 +13,7 @@ import setDisplayName from 'recompose/setDisplayName' import pure from 'recompose/pure' import PropTypes from 'prop-types' import { LinearScalePropType, PointScalePropType } from './propsTypes' -import { computeLinearScale, computePointScale } from './compute' - -const computeFunctionByType = { - linear: computeLinearScale, - point: computePointScale, -} +import { scalesFromConfig } from './compute' const Scales = ({ computedScales, children }) => {children(computedScales)} @@ -31,14 +26,9 @@ Scales.propTypes = { const enhance = compose( setDisplayName('Scales'), - withPropsOnChange(['scales'], ({ scales }) => { - const computedScales = {} - scales.forEach(scaleConfig => { - computedScales[scaleConfig.id] = computeFunctionByType[scaleConfig.type](scaleConfig) - }) - - return { computedScales } - }), + withPropsOnChange(['scales'], ({ scales }) => ({ + computedScales: scalesFromConfig(scales), + })), pure ) diff --git a/packages/nivo-scales/src/compute.js b/packages/nivo-scales/src/compute.js index acf275b48..5fca4017f 100644 --- a/packages/nivo-scales/src/compute.js +++ b/packages/nivo-scales/src/compute.js @@ -74,3 +74,17 @@ export const computePointScale = ({ .range(range) .domain(domain) } + +const computeFunctionByType = { + linear: computeLinearScale, + point: computePointScale, +} + +export const scalesFromConfig = scaleConfigs => { + const computedScales = {} + scaleConfigs.forEach(scaleConfig => { + computedScales[scaleConfig.id] = computeFunctionByType[scaleConfig.type](scaleConfig) + }) + + return computedScales +} diff --git a/website/src/components/ChartHeader.js b/website/src/components/ChartHeader.js index f996e5188..04b05b4f0 100644 --- a/website/src/components/ChartHeader.js +++ b/website/src/components/ChartHeader.js @@ -7,18 +7,11 @@ class ChartHeader extends Component { } render() { - const { chartClass, tags, diceRoll } = this.props + const { chartClass, tags } = this.props return (
-

- {chartClass} - {diceRoll && ( - - roll the dice - - )} -

+

{chartClass}

{tags.map(tag => ( @@ -34,7 +27,6 @@ class ChartHeader extends Component { ChartHeader.propTypes = { chartClass: PropTypes.string.isRequired, tags: PropTypes.array.isRequired, - diceRoll: PropTypes.func, } ChartHeader.defaultProps = { diff --git a/website/src/components/ChartTabs.js b/website/src/components/ChartTabs.js index 77459d1e0..7cac518c7 100644 --- a/website/src/components/ChartTabs.js +++ b/website/src/components/ChartTabs.js @@ -18,6 +18,7 @@ export default class ChartTabs extends Component { code: PropTypes.string.isRequired, nodeCount: PropTypes.number, mode: PropTypes.string.isRequired, + diceRoll: PropTypes.func, } static defaultProps = { @@ -38,12 +39,12 @@ export default class ChartTabs extends Component { } render() { - const { chartClass, mode, data, code, children, nodeCount } = this.props + const { chartClass, mode, data, code, children, diceRoll, nodeCount } = this.props const { tab: currentTab, hoverTab } = this.state let content if (currentTab === 'chart') { - content = children + content =
{children}
} else if (currentTab === 'code') { content = (
@@ -64,41 +65,42 @@ export default class ChartTabs extends Component { mode.length > 0 ? ` chart-tabs--${mode}` : '' } chart-tabs--${currentTab}`} > - {content}
- - {hoverTab} - -
- {tabs.map(tab => { - const icon = tab === 'chart' ? chartClass : tab - const iconColor = - tab === currentTab || hoverTab === tab ? 'red' : 'grey' + {tabs.map(tab => { + const isCurrent = tab === currentTab + const icon = tab === 'chart' ? chartClass : tab + const iconColor = isCurrent || hoverTab === tab ? 'red' : 'grey' - return ( + return ( + { + this.handleTabToggle(tab) + }} + onMouseEnter={() => { + this.handleTabHover(tab) + }} + onMouseLeave={() => { + this.handleTabHover(null) + }} + > { - this.handleTabToggle(tab) - }} - onMouseEnter={() => { - this.handleTabHover(tab) - }} - onMouseLeave={() => { - this.handleTabHover(null) - }} - > - - - ) - })} -
+ className={`chart-tabs__menu__item__icon sprite-icons-${icon}-${iconColor}`} + /> + {tab} + + ) + })} + {diceRoll && ( + + roll the dice + + )}
+ {content} {currentTab === 'chart' && nodeCount !== undefined && ( diff --git a/website/src/components/charts/bar/Bar.js b/website/src/components/charts/bar/Bar.js index 38bcdae90..260725fdf 100644 --- a/website/src/components/charts/bar/Bar.js +++ b/website/src/components/charts/bar/Bar.js @@ -174,13 +174,7 @@ export default class Bar extends Component { { pkg: '@nivo/bar', defaults: BarDefaultProps } ) - const header = ( - - ) + const header = const description = (
@@ -250,7 +244,7 @@ export default class Bar extends Component { {header} {description} - + - ) + const header = const description = (
@@ -171,6 +169,7 @@ export default class BarCanvas extends Component { code={code} data={data} nodeCount={data.length * keys.length} + diceRoll={this.diceRoll} > + ) const description = ( @@ -156,7 +152,7 @@ export default class Bubble extends Component { {header} {description} - + - ) + const header = const description = (
@@ -129,7 +123,13 @@ export default class BubbleCanvas extends Component { {header} {description} - + + ) const description = ( @@ -145,7 +141,7 @@ export default class BubbleHtml extends Component { {header} {description} - + + ) const description = ( @@ -174,7 +170,12 @@ export default class Chord extends Component { {header} {description} - + + ) const description = ( @@ -138,6 +134,7 @@ export default class ChordCanvas extends Component { code={code} data={matrix} nodeCount={MATRIX_SIZE * MATRIX_SIZE + MATRIX_SIZE} + diceRoll={this.diceRoll} > - ) + const header = const description = (
@@ -200,7 +198,12 @@ export default class HeatMap extends Component { {header} {description} - + + ) const description = ( @@ -174,6 +170,7 @@ export default class HeatMap extends Component { code={code} data={data} nodeCount={data.length * keys.length} + diceRoll={this.diceRoll} > + ) const description = (
- w

A line chart with stacking ability. Given an array of data series having an id and a nested array of points (with x, y properties), it will compute the line @@ -65,7 +60,7 @@ export default class LineChartSvgDemo extends Component { config.

- This component also accept empty values, but please note that they must be + This component also accepts empty values, but please note that they must be explicitly defined though, eg. {'{ x: 10, y: null }'}. When{' '} stacked is true, you must use consistent lengths, also if one of the series contains some null values, all values for subsequent series @@ -129,7 +124,13 @@ export default class LineChartSvgDemo extends Component { {header} {description} - + { const keys = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'] + const gaps = { + C: [[50, 80]], + H: [[110, 140]], + L: [[130, 160]], + } return keys.map((key, i) => ({ id: `item ${key}`, @@ -20,6 +25,7 @@ export default () => { y1: Math.random() * 80, yRand: Math.random() * 3, easing: 'random', + xGaps: gaps[key] || [], }), })) } diff --git a/website/src/components/charts/line/LineCanvas/index.js b/website/src/components/charts/line/LineCanvas/index.js index c201ecfe6..b9f40b5d6 100644 --- a/website/src/components/charts/line/LineCanvas/index.js +++ b/website/src/components/charts/line/LineCanvas/index.js @@ -9,7 +9,7 @@ import React, { Component } from 'react' import { Link } from 'react-router-dom' import MediaQuery from 'react-responsive' -import { LineDefaultProps, ResponsiveLineChartCanvas } from '@nivo/line' +import { ResponsiveLineChartCanvas, LineChartCanvas } from '@nivo/line' import ChartHeader from '../../../ChartHeader' import ChartTabs from '../../../ChartTabs' import LineControls from '../LineControls' @@ -20,7 +20,7 @@ import propsMapper from '../propsMapper' import generateData from './generateData' import defaultSettings from './defaultSettings' -export default class LinePage extends Component { +export default class LineChartCanvasDemo extends Component { state = { data: generateData(), settings: { ...defaultSettings }, @@ -41,7 +41,7 @@ export default class LinePage extends Component { const code = generateCode('ResponsiveLineChartCanvas', mappedSettings, { pkg: '@nivo/line', - defaults: LineDefaultProps, + defaults: LineChartCanvas.defaultProps, }) const header = ( @@ -74,7 +74,12 @@ export default class LinePage extends Component { {header} {description} - + { curveOptions.push('{curve}') diff --git a/website/src/components/charts/pie/Pie.js b/website/src/components/charts/pie/Pie.js index f6ce4eee5..e700eed42 100644 --- a/website/src/components/charts/pie/Pie.js +++ b/website/src/components/charts/pie/Pie.js @@ -59,7 +59,6 @@ export default class Pie extends Component { ) @@ -115,7 +114,7 @@ export default class Pie extends Component { {header} {description} - + + ) const description = ( @@ -162,7 +158,7 @@ export default class Radar extends Component { {header} {description} - + - ) + const header = const description = (

@@ -170,7 +164,12 @@ export default class Sankey extends Component { {header} {description} - + - ) + const header = const description = (
@@ -180,7 +174,12 @@ export default class ScatterPlot extends Component { {header} {description} - + - ) + const header = const description = (
@@ -169,6 +163,7 @@ export default class ScatterPlotCanvas extends Component { code={code} data={data} nodeCount={data.length * data[0].data.length} + diceRoll={this.diceRoll} > - ) + const header = const description = (
@@ -86,7 +80,13 @@ export default class Stream extends Component { {header} {description} - + + ) const description = ( @@ -90,7 +86,7 @@ export default class Sunburst extends Component { {header} {description} - +
diff --git a/website/src/components/charts/treemap/TreeMap.js b/website/src/components/charts/treemap/TreeMap.js index 586132ceb..e90fe15dc 100644 --- a/website/src/components/charts/treemap/TreeMap.js +++ b/website/src/components/charts/treemap/TreeMap.js @@ -90,11 +90,7 @@ export default class TreeMap extends Component { }) const header = ( - + ) const description = ( @@ -159,7 +155,12 @@ export default class TreeMap extends Component { {header} {description} - + - ) + const header = const description = (
@@ -134,7 +128,13 @@ export default class TreeMapCanvas extends Component { {header} {description} - + + ) const description = ( @@ -160,7 +156,12 @@ export default class TreeMapHtml extends Component { {header} {description} - + - ) + const header = const description = (
@@ -94,7 +88,7 @@ export default class Voronoi extends Component { {header} {description} - +