From 96f8ac2945bcfd80d773ea23895fc7f6bf672786 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= Date: Sat, 23 Mar 2019 01:33:41 +0900 Subject: [PATCH] feat(calendar): add CalendarCanvas component --- packages/calendar/package.json | 1 - packages/calendar/src/Calendar.js | 1 + packages/calendar/src/CalendarCanvas.js | 235 ++++++++++++++++++ packages/calendar/src/CalendarDay.js | 7 +- packages/calendar/src/CalendarYearLegends.js | 2 +- .../calendar/src/ResponsiveCalendarCanvas.js | 19 ++ packages/calendar/src/computeCalendar.js | 19 +- packages/calendar/src/enhance.js | 151 ++++++----- packages/calendar/src/index.js | 2 + packages/calendar/src/props.js | 21 +- website/src/SiteMap.js | 21 +- .../components/charts/calendar/Calendar.js | 25 +- .../charts/calendar/CalendarCanvas.js | 166 +++++++++++++ .../charts/calendar/CalendarControls.js | 1 + .../charts/calendar/CalendarPage.js | 2 +- .../src/components/charts/calendar/props.js | 32 ++- .../components/charts/waffle/WaffleCanvas.js | 2 +- website/src/nivoTheme.js | 2 +- 18 files changed, 590 insertions(+), 119 deletions(-) create mode 100644 packages/calendar/src/CalendarCanvas.js create mode 100644 packages/calendar/src/ResponsiveCalendarCanvas.js create mode 100644 website/src/components/charts/calendar/CalendarCanvas.js diff --git a/packages/calendar/package.json b/packages/calendar/package.json index 186f9b6fe..885383f7f 100644 --- a/packages/calendar/package.json +++ b/packages/calendar/package.json @@ -29,7 +29,6 @@ "d3-time": "^1.0.10", "d3-time-format": "^2.1.3", "lodash": "^4.17.4", - "react-spring": "^8.0.18", "recompose": "^0.30.0" }, "peerDependencies": { diff --git a/packages/calendar/src/Calendar.js b/packages/calendar/src/Calendar.js index f0e5cf0a9..de7068502 100644 --- a/packages/calendar/src/Calendar.js +++ b/packages/calendar/src/Calendar.js @@ -111,6 +111,7 @@ const Calendar = ({ ) } +Calendar.displayName = 'Calendar' Calendar.propTypes = CalendarPropTypes export default setDisplayName('Calendar')(enhance(Calendar)) diff --git a/packages/calendar/src/CalendarCanvas.js b/packages/calendar/src/CalendarCanvas.js new file mode 100644 index 000000000..5316d5811 --- /dev/null +++ b/packages/calendar/src/CalendarCanvas.js @@ -0,0 +1,235 @@ +/* + * 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 React, { Component } from 'react' +import setDisplayName from 'recompose/setDisplayName' +import { + isCursorInRect, + getRelativeCursor, + Container, + degreesToRadians, + BasicTooltip, +} from '@nivo/core' +import { renderLegendToCanvas } from '@nivo/legends' +import enhance from './enhance' +import { CalendarCanvasPropTypes } from './props' + +const findDayUnderCursor = (days, size, spacing, margin, x, y) => { + return days.find(day => { + return ( + day.value !== undefined && + isCursorInRect( + day.x + margin.left - spacing / 2, + day.y + margin.top - spacing / 2, + size + spacing, + size + spacing, + x, + y + ) + ) + }) +} + +class CalendarCanvas extends Component { + static propTypes = CalendarCanvasPropTypes + + componentDidMount() { + this.ctx = this.surface.getContext('2d') + this.draw(this.props) + } + + shouldComponentUpdate(props) { + if ( + this.props.outerWidth !== props.outerWidth || + this.props.outerHeight !== props.outerHeight || + this.props.isInteractive !== props.isInteractive || + this.props.theme !== props.theme + ) { + return true + } else { + this.draw(props) + return false + } + } + + componentDidUpdate() { + this.ctx = this.surface.getContext('2d') + this.draw(this.props) + } + + draw(props) { + const { + pixelRatio, + + margin, + width, + height, + outerWidth, + outerHeight, + + colorScale, + + yearLegends, + yearLegend, + + monthLegends, + monthLegend, + + days, + dayBorderWidth, + dayBorderColor, + + legends, + + theme, + } = props + + this.surface.width = outerWidth * pixelRatio + this.surface.height = outerHeight * pixelRatio + + this.ctx.scale(pixelRatio, pixelRatio) + this.ctx.fillStyle = theme.background + this.ctx.fillRect(0, 0, outerWidth, outerHeight) + this.ctx.translate(margin.left, margin.top) + + days.forEach(day => { + this.ctx.fillStyle = day.color + if (dayBorderWidth > 0) { + this.ctx.strokeStyle = dayBorderColor + this.ctx.lineWidth = dayBorderWidth + } + + this.ctx.beginPath() + this.ctx.rect(day.x, day.y, day.size, day.size) + this.ctx.fill() + + if (dayBorderWidth > 0) { + this.ctx.stroke() + } + }) + + this.ctx.textAlign = 'center' + this.ctx.textBaseline = 'middle' + this.ctx.fillStyle = theme.labels.text.fill + this.ctx.font = `${theme.labels.text.fontSize}px ${theme.labels.text.fontFamily}` + + monthLegends.forEach(month => { + this.ctx.save() + this.ctx.translate(month.x, month.y) + this.ctx.rotate(degreesToRadians(month.rotation)) + this.ctx.fillText(monthLegend(month.year, month.month, month.date), 0, 0) + this.ctx.restore() + }) + + yearLegends.forEach(year => { + this.ctx.save() + this.ctx.translate(year.x, year.y) + this.ctx.rotate(degreesToRadians(year.rotation)) + this.ctx.fillText(yearLegend(year.year), 0, 0) + this.ctx.restore() + }) + + legends.forEach(legend => { + const legendData = colorScale.ticks(legend.itemCount).map(value => ({ + id: value, + label: value, + color: colorScale(value), + })) + + renderLegendToCanvas(this.ctx, { + ...legend, + data: legendData, + containerWidth: width, + containerHeight: height, + theme, + }) + }) + } + + handleMouseHover = (showTooltip, hideTooltip) => event => { + const { + isInteractive, + margin, + theme, + days, + daySpacing, + tooltipFormat, + tooltip, + } = this.props + + if (!isInteractive || !days || days.length === 0) return + + const [x, y] = getRelativeCursor(this.surface, event) + const currentDay = findDayUnderCursor(days, days[0].size, daySpacing, margin, x, y) + + if (currentDay !== undefined) { + showTooltip( + , + event + ) + } else { + hideTooltip() + } + } + + handleMouseLeave = hideTooltip => () => { + if (this.props.isInteractive !== true) return + + hideTooltip() + } + + handleClick = event => { + const { isInteractive, margin, onClick, days, daySpacing } = this.props + + if (!isInteractive || !days || days.length === 0) return + + const [x, y] = getRelativeCursor(this.surface, event) + const currentDay = findDayUnderCursor(days, days[0].size, daySpacing, margin, x, y) + if (currentDay !== undefined) onClick(currentDay, event) + } + + render() { + const { outerWidth, outerHeight, pixelRatio, isInteractive, theme } = this.props + + return ( + + {({ showTooltip, hideTooltip }) => ( + { + this.surface = surface + }} + width={outerWidth * pixelRatio} + height={outerHeight * pixelRatio} + style={{ + width: outerWidth, + height: outerHeight, + }} + onMouseEnter={this.handleMouseHover(showTooltip, hideTooltip)} + onMouseMove={this.handleMouseHover(showTooltip, hideTooltip)} + onMouseLeave={this.handleMouseLeave(hideTooltip)} + onClick={this.handleClick} + /> + )} + + ) + } +} + +CalendarCanvas.displayName = 'CalendarCanvas' + +export default setDisplayName(CalendarCanvas.displayName)(enhance(CalendarCanvas)) diff --git a/packages/calendar/src/CalendarDay.js b/packages/calendar/src/CalendarDay.js index 9d91c46ce..7bdc8f7a3 100644 --- a/packages/calendar/src/CalendarDay.js +++ b/packages/calendar/src/CalendarDay.js @@ -8,11 +8,8 @@ */ import React from 'react' import PropTypes from 'prop-types' -import compose from 'recompose/compose' -import withPropsOnChange from 'recompose/withPropsOnChange' -import pure from 'recompose/pure' -import { noop } from '@nivo/core' -import { BasicTooltip } from '@nivo/core' +import { compose, withPropsOnChange, pure } from 'recompose' +import { BasicTooltip, noop } from '@nivo/core' const CalendarDay = ({ x, diff --git a/packages/calendar/src/CalendarYearLegends.js b/packages/calendar/src/CalendarYearLegends.js index bc2357b67..68e5abad3 100644 --- a/packages/calendar/src/CalendarYearLegends.js +++ b/packages/calendar/src/CalendarYearLegends.js @@ -34,6 +34,6 @@ CalendarYearLegends.propTypes = { theme: PropTypes.object.isRequired, } -CalendarYearLegends.setDisplayName = 'CalendarYearLegends' +CalendarYearLegends.displayName = 'CalendarYearLegends' export default CalendarYearLegends diff --git a/packages/calendar/src/ResponsiveCalendarCanvas.js b/packages/calendar/src/ResponsiveCalendarCanvas.js new file mode 100644 index 000000000..560356eb1 --- /dev/null +++ b/packages/calendar/src/ResponsiveCalendarCanvas.js @@ -0,0 +1,19 @@ +/* + * 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 React from 'react' +import { ResponsiveWrapper } from '@nivo/core' +import CalendarCanvas from './CalendarCanvas' + +const ResponsiveCalendarCanvas = props => ( + + {({ width, height }) => } + +) + +export default ResponsiveCalendarCanvas diff --git a/packages/calendar/src/computeCalendar.js b/packages/calendar/src/computeCalendar.js index 54240562c..aed1dfbdd 100644 --- a/packages/calendar/src/computeCalendar.js +++ b/packages/calendar/src/computeCalendar.js @@ -10,7 +10,6 @@ import memoize from 'lodash/memoize' import isDate from 'lodash/isDate' import range from 'lodash/range' import max from 'lodash/max' -import assign from 'lodash/assign' import { timeFormat } from 'd3-time-format' import { timeDays, timeWeek, timeWeeks, timeMonths, timeYear } from 'd3-time' @@ -233,16 +232,14 @@ export const computeLayout = ({ width, height, from, to, direction, yearSpacing, const yearEnd = new Date(year + 1, 0, 1) days = days.concat( - timeDays(yearStart, yearEnd).map(dayDate => - assign( - { - date: dayDate, - day: dayFormat(dayDate), - size: cellSize, - }, - cellPosition(dayDate, i) - ) - ) + timeDays(yearStart, yearEnd).map(dayDate => { + return { + date: dayDate, + day: dayFormat(dayDate), + size: cellSize, + ...cellPosition(dayDate, i), + } + }) ) const yearMonths = timeMonths(yearStart, yearEnd).map(monthDate => ({ diff --git a/packages/calendar/src/enhance.js b/packages/calendar/src/enhance.js index dc1dad946..315fd3dee 100644 --- a/packages/calendar/src/enhance.js +++ b/packages/calendar/src/enhance.js @@ -12,7 +12,7 @@ import withPropsOnChange from 'recompose/withPropsOnChange' import pure from 'recompose/pure' import { scaleQuantize } from 'd3-scale' import { withTheme, withDimensions } from '@nivo/core' -import { CalendarDefaultProps } from './props' +import { CalendarDefaultProps, CalendarCanvasDefaultProps } from './props' import { computeDomain, computeLayout, @@ -21,77 +21,90 @@ import { computeMonthLegendPositions, } from './computeCalendar' -export default Component => - compose( - defaultProps(CalendarDefaultProps), - withTheme(), - withDimensions(), - withPropsOnChange( - ['data', 'minValue', 'maxValue', 'colors'], - ({ data, minValue, maxValue, colors }) => { - const domain = computeDomain(data, minValue, maxValue) +const commonEnhancers = [ + withTheme(), + withDimensions(), + withPropsOnChange( + ['data', 'minValue', 'maxValue', 'colors'], + ({ data, minValue, maxValue, colors }) => { + const domain = computeDomain(data, minValue, maxValue) - const colorScale = scaleQuantize() - .domain(domain) - .range(colors) + const colorScale = scaleQuantize() + .domain(domain) + .range(colors) - return { colorScale } - } - ), - withPropsOnChange( - ['width', 'height', 'from', 'to', 'direction', 'yearSpacing', 'daySpacing'], - ({ width, height, from, to, direction, yearSpacing, daySpacing }) => { - const { years, months, days } = computeLayout({ - width, - height, - from, - to, - direction, - yearSpacing, - daySpacing, - }) + return { colorScale } + } + ), + withPropsOnChange( + ['width', 'height', 'from', 'to', 'direction', 'yearSpacing', 'daySpacing'], + ({ width, height, from, to, direction, yearSpacing, daySpacing }) => { + const { years, months, days } = computeLayout({ + width, + height, + from, + to, + direction, + yearSpacing, + daySpacing, + }) - return { years, months, days } - } - ), - withPropsOnChange( - ['years', 'direction', 'yearLegendPosition', 'yearLegendOffset'], - ({ years, direction, yearLegendPosition, yearLegendOffset }) => { - return { - yearLegends: computeYearLegendPositions({ - years, - direction, - position: yearLegendPosition, - offset: yearLegendOffset, - }), - } + return { years, months, days } + } + ), + withPropsOnChange( + ['years', 'direction', 'yearLegendPosition', 'yearLegendOffset'], + ({ years, direction, yearLegendPosition, yearLegendOffset }) => { + return { + yearLegends: computeYearLegendPositions({ + years, + direction, + position: yearLegendPosition, + offset: yearLegendOffset, + }), } - ), - withPropsOnChange( - ['months', 'direction', 'monthLegendPosition', 'monthLegendOffset'], - ({ months, direction, monthLegendPosition, monthLegendOffset }) => { - return { - monthLegends: computeMonthLegendPositions({ - months, - direction, - position: monthLegendPosition, - offset: monthLegendOffset, - }), - } + } + ), + withPropsOnChange( + ['months', 'direction', 'monthLegendPosition', 'monthLegendOffset'], + ({ months, direction, monthLegendPosition, monthLegendOffset }) => { + return { + monthLegends: computeMonthLegendPositions({ + months, + direction, + position: monthLegendPosition, + offset: monthLegendOffset, + }), } - ), - withPropsOnChange( - ['days', 'data', 'colorScale', 'emptyColor'], - ({ days, data, colorScale, emptyColor }) => { - return { - days: bindDaysData({ - days, - data, - colorScale, - emptyColor, - }), - } + } + ), + withPropsOnChange( + ['days', 'data', 'colorScale', 'emptyColor'], + ({ days, data, colorScale, emptyColor }) => { + return { + days: bindDaysData({ + days, + data, + colorScale, + emptyColor, + }), } - ), - pure - )(Component) + } + ), +] + +export default Component => { + switch (Component.displayName) { + case 'Calendar': + return compose(...[defaultProps(CalendarDefaultProps), ...commonEnhancers, pure])( + Component + ) + + case 'CalendarCanvas': + return compose(...[defaultProps(CalendarCanvasDefaultProps), ...commonEnhancers, pure])( + Component + ) + } + + return Component +} diff --git a/packages/calendar/src/index.js b/packages/calendar/src/index.js index 5be5d8124..fe5bd5f82 100644 --- a/packages/calendar/src/index.js +++ b/packages/calendar/src/index.js @@ -8,4 +8,6 @@ */ export { default as Calendar } from './Calendar' export { default as ResponsiveCalendar } from './ResponsiveCalendar' +export { default as CalendarCanvas } from './CalendarCanvas' +export { default as ResponsiveCalendarCanvas } from './ResponsiveCalendarCanvas' export * from './props' diff --git a/packages/calendar/src/props.js b/packages/calendar/src/props.js index 96493ccf3..623d80820 100644 --- a/packages/calendar/src/props.js +++ b/packages/calendar/src/props.js @@ -13,7 +13,7 @@ import { LegendPropShape } from '@nivo/legends' const monthLabelFormat = timeFormat('%b') -export const CalendarPropTypes = { +const commonPropTypes = { from: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]).isRequired, to: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]).isRequired, data: PropTypes.arrayOf( @@ -60,7 +60,14 @@ export const CalendarPropTypes = { ).isRequired, } -export const CalendarDefaultProps = { +export const CalendarPropTypes = commonPropTypes + +export const CalendarCanvasPropTypes = { + ...commonPropTypes, + pixelRatio: PropTypes.number.isRequired, +} + +const commonDefaultProps = { colors: ['#61cdbb', '#97e3d5', '#e8c1a0', '#f47560'], direction: 'horizontal', @@ -78,7 +85,7 @@ export const CalendarDefaultProps = { monthBorderColor: '#000', monthLegend: (year, month, date) => monthLabelFormat(date), monthLegendPosition: 'before', - monthLegendOffset: -6, + monthLegendOffset: 10, weekdayLegend: d => d, daySpacing: 0, @@ -90,3 +97,11 @@ export const CalendarDefaultProps = { legends: [], } + +export const CalendarDefaultProps = commonDefaultProps + +export const CalendarCanvasDefaultProps = { + ...commonDefaultProps, + pixelRatio: + global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1, +} diff --git a/website/src/SiteMap.js b/website/src/SiteMap.js index 13bbf3fd7..b4b15bb74 100644 --- a/website/src/SiteMap.js +++ b/website/src/SiteMap.js @@ -55,7 +55,8 @@ import TreeMapCanvas from './components/charts/treemap/TreeMapCanvas' import TreeMapAPI from './components/charts/treemap/TreeMapAPI' import CalendarPage from './components/charts/calendar/CalendarPage' import Calendar from './components/charts/calendar/Calendar' -import CalendarAPI from './components/charts/calendar/CalendarAPI' +import CalendarCanvas from './components/charts/calendar/CalendarCanvas' +// import CalendarAPI from './components/charts/calendar/CalendarAPI' import ChordPage from './components/charts/chord/ChordPage' import Chord from './components/charts/chord/Chord' import ChordCanvas from './components/charts/chord/ChordCanvas' @@ -179,12 +180,20 @@ const SITEMAP = [ tags: ['svg', 'isomorphic'], }, { - className: 'api', - path: '/api', - label: 'Calendar API', - component: CalendarAPI, - tags: ['api'], + className: 'canvas', + path: '/canvas', + label: 'CalendarCanvas', + component: CalendarCanvas, + tags: ['canvas'], }, + // @todo: update calendar API + // { + // className: 'api', + // path: '/api', + // label: 'Calendar API', + // component: CalendarAPI, + // tags: ['api'], + // }, ], }, { diff --git a/website/src/components/charts/calendar/Calendar.js b/website/src/components/charts/calendar/Calendar.js index 50e47600f..f2dce3cb9 100644 --- a/website/src/components/charts/calendar/Calendar.js +++ b/website/src/components/charts/calendar/Calendar.js @@ -18,14 +18,12 @@ import ComponentPropsDocumentation from '../../properties/ComponentPropsDocument import nivoTheme from '../../../nivoTheme' import properties from './props' import propsMapper from './propsMapper' -import config from '../../../config' +// import config from '../../../config' const Tooltip = data => { /* return custom tooltip */ } -const colors = ['#61cdbb', '#97e3d5', '#e8c1a0', '#f47560'] - export default class Calendar extends Component { state = { settings: { @@ -33,7 +31,7 @@ export default class Calendar extends Component { to: '2016-07-12', emptyColor: '#eeeeee', - colors, + colors: ['#61cdbb', '#97e3d5', '#e8c1a0', '#f47560'], minValue: 0, maxValue: 'auto', @@ -64,7 +62,7 @@ export default class Calendar extends Component { legends: [ { - anchor: 'bottom-right', + anchor: 'bottom', direction: 'row', translateY: 36, itemCount: 4, @@ -105,7 +103,7 @@ export default class Calendar extends Component { ) const header = ( - + ) const description = ( @@ -113,18 +111,15 @@ export default class Calendar extends Component {

This component is heavily inspired by{' '} - this block + this demo .

-

- This component is suitable for isomorphic rendering but require to use the{' '} - Calendar component not the ResponsiveCalendar one. -

+ {/*

This component is available in the{' '} .

+ */} +

+ The responsive alternative of this component is ResponsiveCalendar, + it also offers a canvas implementations, see{' '} + CalendarCanvas. +

See the dedicated guide on how to setup legends for this component. diff --git a/website/src/components/charts/calendar/CalendarCanvas.js b/website/src/components/charts/calendar/CalendarCanvas.js new file mode 100644 index 000000000..413763e73 --- /dev/null +++ b/website/src/components/charts/calendar/CalendarCanvas.js @@ -0,0 +1,166 @@ +/* + * 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 React, { Component } from 'react' +import { Link } from 'react-router-dom' +import MediaQuery from 'react-responsive' +import ChartHeader from '../../ChartHeader' +import ChartTabs from '../../ChartTabs' +import generateCode from '../../../lib/generateChartCode' +import CalendarControls from './CalendarControls' +import { ResponsiveCalendarCanvas, CalendarCanvasDefaultProps } from '@nivo/calendar' +import ComponentPropsDocumentation from '../../properties/ComponentPropsDocumentation' +import nivoTheme from '../../../nivoTheme' +import properties from './props' +import propsMapper from './propsMapper' + +const Tooltip = data => { + /* return custom tooltip */ +} + +export default class CalendarCanvas extends Component { + state = { + settings: { + pixelRatio: window && window.devicePixelRatio ? window.devicePixelRatio : 1, + + from: '2013-03-01', + to: '2019-07-12', + + emptyColor: '#eeeeee', + colors: ['#61cdbb', '#97e3d5', '#e8c1a0', '#f47560'], + minValue: 0, + maxValue: 'auto', + + margin: { + top: 40, + right: 40, + bottom: 50, + left: 40, + }, + direction: 'vertical', + + yearSpacing: 30, + yearLegendPosition: 'before', + yearLegendOffset: 10, + + monthBorderWidth: 2, + monthBorderColor: '#ffffff', + monthLegendPosition: 'before', + monthLegendOffset: 10, + + daySpacing: 0, + dayBorderWidth: 2, + dayBorderColor: '#ffffff', + + isInteractive: true, + 'custom tooltip example': false, + tooltip: null, + + legends: [ + { + anchor: 'bottom', + direction: 'row', + translateY: 40, + itemCount: 4, + itemWidth: 34, + itemHeight: 36, + itemDirection: 'top-to-bottom', + }, + ], + + theme: { + ...nivoTheme, + labels: { + ...nivoTheme.labels, + text: { + ...nivoTheme.labels.text, + fontSize: 10, + }, + }, + }, + }, + } + + handleSettingsUpdate = settings => { + this.setState({ settings }) + } + + handleNodeClick = (node, event) => { + alert(`${node.day}: ${node.value}\nclicked at x: ${event.clientX}, y: ${event.clientY}`) + } + + render() { + const { data } = this.props + const { settings } = this.state + + const mappedSettings = propsMapper(settings) + + const code = generateCode( + 'ResponsiveCalendarCanvas', + { + ...mappedSettings, + tooltip: mappedSettings.tooltip ? Tooltip : undefined, + }, + { + pkg: '@nivo/calendar', + defaults: CalendarCanvasDefaultProps, + } + ) + + const header = + + const description = ( +

+

+ A variation around the Calendar component. Well + suited for large data sets as it does not impact DOM tree depth, however you'll + lose the isomorphic rendering ability. +

+

+ The responsive alternative of this component is{' '} + ResponsiveCalendarCanvas. +

+
+ ) + + return ( +
+
+ + {header} + {description} + + + + + + +
+
+ + {header} + {description} + +
+
+ ) + } +} diff --git a/website/src/components/charts/calendar/CalendarControls.js b/website/src/components/charts/calendar/CalendarControls.js index 42c7389f3..95d6a6983 100644 --- a/website/src/components/charts/calendar/CalendarControls.js +++ b/website/src/components/charts/calendar/CalendarControls.js @@ -14,6 +14,7 @@ import properties from './props' const groupsByScope = { Calendar: getPropertiesGroupsControls(properties, 'Calendar'), + CalendarCanvas: getPropertiesGroupsControls(properties, 'CalendarCanvas'), api: getPropertiesGroupsControls(properties, 'api'), } diff --git a/website/src/components/charts/calendar/CalendarPage.js b/website/src/components/charts/calendar/CalendarPage.js index ff708515d..40fb0e421 100644 --- a/website/src/components/charts/calendar/CalendarPage.js +++ b/website/src/components/charts/calendar/CalendarPage.js @@ -15,7 +15,7 @@ class CalendarPage extends Component { super(props) const from = new Date(2015, 3, 1) - const to = new Date(2016, 7, 12) + const to = new Date(2018, 7, 12) this.state = { from, diff --git a/website/src/components/charts/calendar/props.js b/website/src/components/charts/calendar/props.js index b642c48e4..301cc3fea 100644 --- a/website/src/components/charts/calendar/props.js +++ b/website/src/components/charts/calendar/props.js @@ -49,8 +49,8 @@ export default [ docScopes: '*', description: ( - not required if using  - <ResponsiveCalendar />. + not required if using responsive alternative of the component{' '} + <Responsive*/>. ), help: 'Chart width.', @@ -71,8 +71,8 @@ export default [ docScopes: '*', description: ( - not required if using  - <ResponsiveCalendar />. + not required if using responsive alternative of the component{' '} + <Responsive*/>. ), help: 'Chart height.', @@ -176,6 +176,20 @@ export default [ controlType: 'colorPicker', controlGroup: 'Base', }, + { + key: 'pixelRatio', + scopes: ['CalendarCanvas'], + description: `Adjust pixel ratio, useful for HiDPI screens.`, + required: false, + default: 'Depends on device', + type: `{number}`, + controlType: 'range', + controlGroup: 'Base', + controlOptions: { + min: 1, + max: 2, + }, + }, // Years { key: 'yearSpacing', @@ -227,6 +241,7 @@ export default [ // Months { key: 'monthBorderWidth', + scopes: ['Calendar', 'api'], description: 'width of month borders.', type: '{number}', required: false, @@ -241,6 +256,7 @@ export default [ }, { key: 'monthBorderColor', + scopes: ['Calendar', 'api'], description: 'color to use for months border.', type: '{string}', required: false, @@ -321,7 +337,7 @@ export default [ ...marginProperties, { key: 'isInteractive', - scopes: ['Calendar'], + scopes: ['Calendar', 'CalendarCanvas'], description: 'Enable/disable interactivity.', type: '{boolean}', required: false, @@ -331,14 +347,14 @@ export default [ }, { key: 'onClick', - scopes: ['Calendar'], + scopes: ['Calendar', 'CalendarCanvas'], description: 'onClick handler, it receives clicked day data and mouse event.', type: '{Function}', required: false, }, { key: 'custom tooltip example', - scopes: ['Calendar'], + scopes: ['Calendar', 'CalendarCanvas'], excludeFromDoc: true, description: ( @@ -352,7 +368,7 @@ export default [ }, { key: 'tooltip', - scopes: ['Calendar'], + scopes: ['Calendar', 'CalendarCanvas'], type: '{Function}', required: false, description: ( diff --git a/website/src/components/charts/waffle/WaffleCanvas.js b/website/src/components/charts/waffle/WaffleCanvas.js index 5fa1d22fa..b28da7240 100644 --- a/website/src/components/charts/waffle/WaffleCanvas.js +++ b/website/src/components/charts/waffle/WaffleCanvas.js @@ -198,7 +198,7 @@ export default class WaffleCanvas extends Component {

The responsive alternative of this component is{' '} - ResponsiveWaffleHtml, it also offers other implementations, see{' '} + ResponsiveWaffleCanvas, it also offers other implementations, see{' '} Waffle and WaffleHtml.

diff --git a/website/src/nivoTheme.js b/website/src/nivoTheme.js index 192dd3fd5..7704f3741 100644 --- a/website/src/nivoTheme.js +++ b/website/src/nivoTheme.js @@ -77,7 +77,7 @@ export const lightTheme = { legends: { text: { fill: '#6a7c89', - fontSize: '12px', + fontSize: 12, }, }, tooltip: {