Skip to content

Commit

Permalink
feat(line): add canvas implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
Raphaël Benitte authored and Raphaël Benitte committed May 3, 2019
1 parent 97dc958 commit d47d5cb
Show file tree
Hide file tree
Showing 301 changed files with 6,589 additions and 4,783 deletions.
3 changes: 2 additions & 1 deletion .storybook/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ addDecorator(withInfo({

function loadStories() {
require('../packages/bar/stories/bar.stories')
// require('../packages/bar/stories/bar_00.stories')
require('../packages/bar/stories/raceChart.stories')
require('../packages/bar/stories/barCanvas.stories')
require('../packages/bullet/stories/bullet.stories')
require('../packages/calendar/stories/calendar.stories')
Expand All @@ -54,6 +54,7 @@ function loadStories() {
require('../packages/circle-packing/stories/bubbleHtml.stories')
require('../packages/heatmap/stories/heatmap.stories')
require('../packages/line/stories/line.stories')
require('../packages/line/stories/LineCanvas.stories')
require('../packages/pie/stories/pie.stories')
require('../packages/radar/stories/radar.stories')
require('../packages/sankey/stories/sankey.stories')
Expand Down
2 changes: 2 additions & 0 deletions Makefile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -296,3 +296,5 @@ api: ##@5 API run API in regular mode (no watcher)
@echo "${YELLOW}Starting API${RESET}"
@cd api && yarn start

api-deploy: ##@5 Deploy API on heroku
git subtree push --prefix api heroku master
22 changes: 9 additions & 13 deletions api/src/lib/render/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,15 @@ exports.chart = ({ type, props }, override) => {
const chart = mapping[type]
const overridable = chart.runtimeProps || []
const rendered = renderToStaticMarkup(
React.createElement(
chart.component,
Object.assign(
{
animate: false,
isInteractive: false,
theme,
},
chart.defaults,
props,
_.pick(override, overridable)
)
)
React.createElement(chart.component, {
animate: false,
isInteractive: false,
renderWrapper: false,
theme,
...chart.defaults,
...props,
..._.pick(override, overridable),
})
)

return `<?xml version="1.0" ?>${rendered}`
Expand Down
18 changes: 9 additions & 9 deletions api/src/mapping/line.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,14 +56,14 @@ module.exports = {

lineWidth: Joi.number().min(0),

enableDots: Joi.boolean(),
dotSize: Joi.number().min(0),
dotColor: inheritedColor,
dotBorderWidth: Joi.number().min(0),
dotBorderColor: inheritedColor,
enableDotLabel: Joi.boolean(),
dotLabel: Joi.string(),
dotLabelYOffset: Joi.number(),
enablePoints: Joi.boolean(),
pointSize: Joi.number().min(0),
pointColor: inheritedColor,
pointBorderWidth: Joi.number().min(0),
pointBorderColor: inheritedColor,
enablePointLabel: Joi.boolean(),
pointLabel: Joi.string(),
pointLabelYOffset: Joi.number(),

enableArea: Joi.boolean(),
areaBlendMode: common.blendMode,
Expand All @@ -86,7 +86,7 @@ module.exports = {
colorBy: Joi.string(),
})
),
runtimeProps: ['width', 'height', 'colors', 'stacked'],
runtimeProps: ['width', 'height', 'colors'],
defaults: {
margin: { top: 40, right: 50, bottom: 40, left: 50 },
},
Expand Down
99 changes: 45 additions & 54 deletions conf/base.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,140 +8,131 @@ capture:
#
#########################################################################

- path: /swarmplot
selector: '#chart'
output: ./packages/swarmplot/doc/swarmplot.png
- path: /swarmplot/canvas
selector: '#chart'
theme: dark
output: ./packages/swarmplot/doc/swarmplot-canvas.png
# - path: /swarmplot
# selector: '#chart'
# output: ./packages/swarmplot/doc/swarmplot.png
# - path: /swarmplot/canvas
# selector: '#chart'
# theme: dark
# output: ./packages/swarmplot/doc/swarmplot-canvas.png

# - path: /geomap
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/geo/doc/geomap.png

# - path: /geomap/canvas
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/geo/doc/geomap-canvas.png

# - path: /choropleth
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/geo/doc/choropleth.png

# - path: /choropleth/canvas
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/geo/doc/choropleth-canvas.png

# - path: /bar
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/bar/doc/bar.png

# - path: /bar/canvas
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/bar/doc/bar-canvas.png

# - path: /calendar
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/calendar/doc/calendar.png

# - path: /chord
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/chord/doc/chord.png

# - path: /chord/canvas
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/chord/doc/chord-canvas.png

# - path: /bubble
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/circle-packing/doc/bubble.png

# - path: /bubble/html
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/circle-packing/doc/bubble-html.png

# - path: /bubble/canvas
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/circle-packing/doc/bubble-canvas.png

# - path: /bullet
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/bullet/doc/bullet.png

# - path: /heatmap
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/heatmap/doc/heatmap.png

# - path: /heatmap/canvas
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/heatmap/doc/heatmap-canvas.png

# - path: /line
# selector: .chart-tabs__content
# output: ./packages/line/doc/line.png
- path: /line
selector: '#chart'
output: ./packages/line/doc/line.png
- path: /line/canvas
selector: '#chart'
theme: dark
output: ./packages/line/doc/line-canvas.png

# - path: /parallel-coordinates
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/parallel-coordinates/doc/parallel-coordinates.png

# - path: /parallel-coordinates/canvas
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/parallel-coordinates/doc/parallel-coordinates-canvas.png

# - path: /pie
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/pie/doc/pie.png

# - path: /radar
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/radar/doc/radar.png

# - path: /sankey
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/sankey/doc/sankey.png

# - path: /scatterplot
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/scatterplot/doc/scatterplot.png

# - path: /scatterplot/canvas
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/scatterplot/doc/scatterplot-canvas.png

# - path: /stream
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/stream/doc/stream.png

# - path: /sunburst
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/sunburst/doc/sunburst.png

# - path: /treemap
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/treemap/doc/treemap.png

# - path: /treemap/html
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/treemap/doc/treemap-html.png

# - path: /treemap/canvas
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/treemap/doc/treemap-canvas.png

# - path: /voronoi
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/voronoi/doc/voronoi.png

# - path: /waffle
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/waffle/doc/waffle.png

# - path: /waffle/html
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/waffle/doc/waffle-html.png

# - path: /waffle/canvas
# selector: .chart-tabs__content
# selector: '#chart'
# output: ./packages/waffle/doc/waffle-canvas.png

#########################################################################
Expand Down
64 changes: 7 additions & 57 deletions packages/annotations/src/Annotation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
import React, { memo } from 'react'
import PropTypes from 'prop-types'
import { Motion, spring } from 'react-motion'
import { motionPropTypes } from '@nivo/core'
import { useMotionConfig } from '@nivo/core'
import { defaultProps } from './props'
import { useComputedAnnotation } from './hooks'
import AnnotationNote from './AnnotationNote'
Expand All @@ -34,10 +34,8 @@ const Annotation = memo(
noteWidth,
noteTextOffset,
note,
animate,
motionStiffness,
motionDamping,
}) => {
const { animate, springConfig } = useMotionConfig()
const computed = useComputedAnnotation({
type,
containerWidth,
Expand All @@ -53,57 +51,15 @@ const Annotation = memo(
noteTextOffset,
})

const springConfig = {
stiffness: motionStiffness,
damping: motionDamping,
}

return (
<>
<AnnotationLink
points={computed.points}
isOutline={true}
animate={animate}
motionStiffness={motionStiffness}
motionDamping={motionDamping}
/>
{type === 'circle' && (
<CircleAnnotationOutline
x={x}
y={y}
size={size}
animate={animate}
motionStiffness={motionStiffness}
motionDamping={motionDamping}
/>
)}
{type === 'dot' && (
<DotAnnotationOutline
x={x}
y={y}
size={size}
animate={animate}
motionStiffness={motionStiffness}
motionDamping={motionDamping}
/>
)}
<AnnotationLink points={computed.points} isOutline={true} />
{type === 'circle' && <CircleAnnotationOutline x={x} y={y} size={size} />}
{type === 'dot' && <DotAnnotationOutline x={x} y={y} size={size} />}
{type === 'rect' && (
<RectAnnotationOutline
x={x}
y={y}
width={width}
height={height}
animate={animate}
motionStiffness={motionStiffness}
motionDamping={motionDamping}
/>
<RectAnnotationOutline x={x} y={y} width={width} height={height} />
)}
<AnnotationLink
points={computed.points}
animate={animate}
motionStiffness={motionStiffness}
motionDamping={motionDamping}
/>
<AnnotationLink points={computed.points} />
{!animate && (
<AnnotationNote x={computed.text[0]} y={computed.text[1]} note={note} />
)}
Expand Down Expand Up @@ -159,16 +115,10 @@ Annotation.propTypes = {
noteWidth: PropTypes.number.isRequired,
noteTextOffset: PropTypes.number.isRequired,
note: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,

...motionPropTypes,
}
Annotation.defaultProps = {
noteWidth: defaultProps.noteWidth,
noteTextOffset: defaultProps.noteTextOffset,

animate: defaultProps.animate,
motionStiffness: defaultProps.motionStiffness,
motionDamping: defaultProps.motionDamping,
}

export default Annotation
Loading

0 comments on commit d47d5cb

Please sign in to comment.