Skip to content

Commit

Permalink
feat(website): improve chart tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
Raphaël Benitte authored and Raphaël Benitte committed Jan 27, 2018
1 parent 20a30ab commit 2c2265f
Show file tree
Hide file tree
Showing 26 changed files with 233 additions and 291 deletions.
2 changes: 1 addition & 1 deletion packages/nivo-legends/src/props.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,5 +76,5 @@ export const LegendPropShape = {
symbolSize: PropTypes.number,
symbolSpacing: PropTypes.number,
symbolShape: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
textColor: PropTypes.string
textColor: PropTypes.string,
}
12 changes: 2 additions & 10 deletions website/src/components/ChartHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,11 @@ class ChartHeader extends Component {
}

render() {
const { chartClass, tags, diceRoll } = this.props
const { chartClass, tags } = this.props

return (
<div className="chart_header">
<h1 className="chart__title">
{chartClass}
{diceRoll && (
<span className="dice-roll no-select" onClick={diceRoll}>
roll the dice
</span>
)}
</h1>
<h1 className="chart__title">{chartClass}</h1>
<div className="component_meta">
{tags.map(tag => (
<span key={tag} className="component_meta_tag">
Expand All @@ -34,7 +27,6 @@ class ChartHeader extends Component {
ChartHeader.propTypes = {
chartClass: PropTypes.string.isRequired,
tags: PropTypes.array.isRequired,
diceRoll: PropTypes.func,
}

ChartHeader.defaultProps = {
Expand Down
75 changes: 36 additions & 39 deletions website/src/components/ChartTabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default class ChartTabs extends Component {
data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
code: PropTypes.string.isRequired,
nodeCount: PropTypes.number,
mode: PropTypes.string.isRequired,
diceRoll: PropTypes.func,
}

static defaultProps = {
Expand All @@ -38,12 +38,12 @@ export default class ChartTabs extends Component {
}

render() {
const { chartClass, mode, data, code, children, nodeCount } = this.props
const { chartClass, data, code, children, diceRoll, nodeCount } = this.props
const { tab: currentTab, hoverTab } = this.state

let content
if (currentTab === 'chart') {
content = children
content = <div className="chart-tabs__content">{children}</div>
} else if (currentTab === 'code') {
content = (
<div className="code-snippet">
Expand All @@ -59,46 +59,43 @@ export default class ChartTabs extends Component {
}

return (
<div
className={`chart-tabs${
mode.length > 0 ? ` chart-tabs--${mode}` : ''
} chart-tabs--${currentTab}`}
>
{content}
<div className={`chart-tabs chart-tabs--${currentTab}`}>
<div className="chart-tabs__menu">
<span
className={`chart-tabs__menu__helper chart-tabs__menu__helper--${currentTab}`}
>
{hoverTab}
</span>
<div className="chart-tabs__menu__wrapper">
{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 (
<span
key={tab}
className={`chart-tabs__menu__item no-select ${
isCurrent ? 'chart-tabs__menu__item--current' : ''
}`}
onClick={() => {
this.handleTabToggle(tab)
}}
onMouseEnter={() => {
this.handleTabHover(tab)
}}
onMouseLeave={() => {
this.handleTabHover(null)
}}
>
<span
key={tab}
className="chart-tabs__menu__item"
onClick={() => {
this.handleTabToggle(tab)
}}
onMouseEnter={() => {
this.handleTabHover(tab)
}}
onMouseLeave={() => {
this.handleTabHover(null)
}}
>
<span
className={`chart-tabs__menu__item__icon sprite-icons-${icon}-${iconColor}`}
/>
</span>
)
})}
</div>
className={`chart-tabs__menu__item__icon sprite-icons-${icon}-${iconColor}`}
/>
{tab}
</span>
)
})}
{diceRoll && (
<span className="dice-roll no-select" onClick={diceRoll}>
roll the dice
</span>
)}
</div>
{content}
{currentTab === 'chart' &&
nodeCount !== undefined && (
<span className="chart-tabs__node-count">
Expand Down
10 changes: 2 additions & 8 deletions website/src/components/charts/bar/Bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,13 +174,7 @@ export default class Bar extends Component {
{ pkg: '@nivo/bar', defaults: BarDefaultProps }
)

const header = (
<ChartHeader
chartClass="Bar"
tags={['basic', 'isomorphic', 'api']}
diceRoll={this.diceRoll}
/>
)
const header = <ChartHeader chartClass="Bar" tags={['basic', 'isomorphic', 'api']} />

const description = (
<div className="chart-description">
Expand Down Expand Up @@ -250,7 +244,7 @@ export default class Bar extends Component {
{header}
{description}
</MediaQuery>
<ChartTabs chartClass="bar" code={code} data={data}>
<ChartTabs chartClass="bar" code={code} data={data} diceRoll={this.diceRoll}>
<ResponsiveBar
data={data}
keys={keys}
Expand Down
5 changes: 2 additions & 3 deletions website/src/components/charts/bar/BarCanvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,9 +141,7 @@ export default class BarCanvas extends Component {
{ pkg: '@nivo/bar' }
)

const header = (
<ChartHeader chartClass="BarCanvas" tags={['bar', 'canvas']} diceRoll={this.diceRoll} />
)
const header = <ChartHeader chartClass="BarCanvas" tags={['bar', 'canvas']} />

const description = (
<div className="chart-description">
Expand All @@ -170,6 +168,7 @@ export default class BarCanvas extends Component {
chartClass="bar"
code={code}
data={data}
diceRoll={this.diceRoll}
nodeCount={data.length * keys.length}
>
<ResponsiveBarCanvas
Expand Down
22 changes: 9 additions & 13 deletions website/src/components/charts/bubble/Bubble.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,11 +92,7 @@ export default class Bubble extends Component {
})

const header = (
<ChartHeader
chartClass="Bubble"
tags={['hierarchy', 'svg', 'isomorphic', 'api']}
diceRoll={diceRoll}
/>
<ChartHeader chartClass="Bubble" tags={['hierarchy', 'svg', 'isomorphic', 'api']} />
)

const description = (
Expand Down Expand Up @@ -151,31 +147,31 @@ export default class Bubble extends Component {

return (
<div className="page_content grid">
<div className="chart-page_aside">
<div className="chart-page_main">
<MediaQuery query="(max-width: 1000px)">
{header}
{description}
</MediaQuery>
<ChartTabs chartClass="bubble" code={code} data={root}>
<ChartTabs chartClass="bubble" code={code} data={root} diceRoll={diceRoll}>
<ResponsiveBubble
root={cloneDeep(root)}
{...mappedSettings}
theme={nivoTheme}
/>
</ChartTabs>
</div>
<div className="chart-page_main">
<MediaQuery query="(min-width: 1000px)">
{header}
{description}
</MediaQuery>
<BubbleControls
scope="Bubble"
settings={settings}
onChange={this.handleSettingsUpdate}
/>
<ComponentPropsDocumentation chartClass="Bubble" properties={properties} />
</div>
<div className="chart-page_aside">
<MediaQuery query="(min-width: 1000px)">
{header}
{description}
</MediaQuery>
</div>
</div>
)
}
Expand Down
30 changes: 15 additions & 15 deletions website/src/components/charts/bubble/BubbleCanvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,13 +98,7 @@ export default class BubbleCanvas extends Component {
defaults: BubbleCanvasDefaultProps,
})

const header = (
<ChartHeader
chartClass="BubbleCanvas"
tags={['hierarchy', 'canvas']}
diceRoll={diceRoll}
/>
)
const header = <ChartHeader chartClass="BubbleCanvas" tags={['hierarchy', 'canvas']} />

const description = (
<div className="chart-description">
Expand All @@ -124,24 +118,24 @@ export default class BubbleCanvas extends Component {

return (
<div className="page_content grid">
<div className="chart-page_aside">
<div className="chart-page_main">
<MediaQuery query="(max-width: 1000px)">
{header}
{description}
</MediaQuery>
<ChartTabs chartClass="bubble" code={code} data={root} nodeCount={NODE_COUNT}>
<ChartTabs
chartClass="bubble"
code={code}
data={root}
nodeCount={NODE_COUNT}
diceRoll={diceRoll}
>
<ResponsiveBubbleCanvas
root={cloneDeep(root)}
{...mappedSettings}
theme={nivoTheme}
/>
</ChartTabs>
</div>
<div className="chart-page_main">
<MediaQuery query="(min-width: 1000px)">
{header}
{description}
</MediaQuery>
<BubbleControls
scope="BubbleCanvas"
settings={settings}
Expand All @@ -152,6 +146,12 @@ export default class BubbleCanvas extends Component {
properties={properties}
/>
</div>
<div className="chart-page_aside">
<MediaQuery query="(min-width: 1000px)">
{header}
{description}
</MediaQuery>
</div>
</div>
)
}
Expand Down
22 changes: 9 additions & 13 deletions website/src/components/charts/bubble/BubbleHtml.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,11 +81,7 @@ export default class BubbleHtml extends Component {
})

const header = (
<ChartHeader
chartClass="BubbleHtml"
tags={['hierarchy', 'html', 'isomorphic']}
diceRoll={diceRoll}
/>
<ChartHeader chartClass="BubbleHtml" tags={['hierarchy', 'html', 'isomorphic']} />
)

const description = (
Expand Down Expand Up @@ -140,31 +136,31 @@ export default class BubbleHtml extends Component {

return (
<div className="page_content grid">
<div className="chart-page_aside">
<div className="chart-page_main">
<MediaQuery query="(max-width: 1000px)">
{header}
{description}
</MediaQuery>
<ChartTabs chartClass="bubble" code={code} data={root}>
<ChartTabs chartClass="bubble" code={code} data={root} diceRoll={diceRoll}>
<ResponsiveBubbleHtml
root={cloneDeep(root)}
{...mappedSettings}
theme={nivoTheme}
/>
</ChartTabs>
</div>
<div className="chart-page_main">
<MediaQuery query="(min-width: 1000px)">
{header}
{description}
</MediaQuery>
<BubbleControls
scope="BubbleHtml"
settings={settings}
onChange={this.handleSettingsUpdate}
/>
<ComponentPropsDocumentation chartClass="BubbleHtml" properties={properties} />
</div>
<div className="chart-page_aside">
<MediaQuery query="(min-width: 1000px)">
{header}
{description}
</MediaQuery>
</div>
</div>
)
}
Expand Down
Loading

0 comments on commit 2c2265f

Please sign in to comment.