Skip to content
This repository has been archived by the owner on Aug 18, 2020. It is now read-only.

Commit

Permalink
Merge pull request #52 from Tripwire/graphlabels
Browse files Browse the repository at this point in the history 
Feat:  BarChart axis and icons
  • Loading branch information
@jhegg
jhegg authored Mar 21, 2017
2 parents 9e19e4c + b06a1c1 commit f305208
Show file tree
Hide file tree
Showing 6 changed files with 11,212 additions and 45 deletions.
5,562 changes: 5,562 additions & 0 deletions src/assets/icon_eh_error.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5,563 changes: 5,563 additions & 0 deletions src/assets/icon_eh_warning.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 7 additions & 1 deletion src/components/charts/BarChart/BarChart.examples.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,17 @@ Standard Area AreaChart
borderRadius={0}
data={[ { x: '12-10-2016 01:02:00', y: 40, currentState: 'normal' }, { x: '12-11-2016 03:15:00', y: 50, currentState: 'normal' }, { x: '12-12-2016 05:22:00', y: 65, currentState: 'normal' }, { x: '12-13-2016 05:22:00', y: 60, currentState: 'normal' }, { x: '12-14-2016 05:22:00', y: 70, currentState: 'normal' }, { x: '12-15-2016 05:22:00', y: 55, currentState: 'normal' }, { x: '12-16-2016 05:22:00', y: 80, currentState: 'warning' }, { x: '12-17-2016 05:22:00', y: 55, currentState: 'normal' }, { x: '12-18-2016 05:22:00', y: 75, currentState: 'critical' }, { x: '12-19-2016 05:22:00', y: 50, currentState: 'normal' } ]}
height={120}
width={300}
width={500}
xDataType='date'
showIcon
showXLabel
tooltipTitle='OPERATIONS'
/>
</div>

Icons are driven from the currentState property of every record. Warning and critical will display icons while 'normal' does not.
Set the showIcon & showXLabel props to respectively enable those display properties.

Sample data series:

```javascript
Expand Down
50 changes: 25 additions & 25 deletions src/components/charts/BarChart/BarChart.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,16 @@ import React, { PropTypes } from 'react'
import Rect from './Rect'
import ToolTip from './BarChartTooltip'
import * as ChartUtils from '../Chart/utils'
var d3 = Object.assign({}, require('d3-time-format'))

const { array, number, object, string } = PropTypes

var d3 = Object.assign({}, require('d3-time-format'), require('d3-axis'))
const { array, number, object, string, bool } = PropTypes
class BarChart extends React.Component {
constructor (props) {
super(props)
this.state = {
tooltip: {
display: false,
color: null,
title: '',
data: { key: '', value: '' },
pos: { x: '', y: '' }
}
Expand All @@ -26,6 +25,7 @@ class BarChart extends React.Component {
tooltip: {
display: true,
color: e.target.getAttribute('fill'),
title: this.props.tooltipTitle,
data: {
key: e.target.getAttribute('data-key'),
value: e.target.getAttribute('data-value')
Expand All @@ -48,37 +48,29 @@ class BarChart extends React.Component {
}

render () {
const { barPadding, borderRadius, height, margin, width, xDataType } = this.props
const { barPadding, borderRadius, height, margin, width, xDataType, showXLabel, showIcon } = this.props
const innerWidth = width - (margin.left + margin.right)
const innerHeight = height - (margin.top + margin.bottom)
const transform = `translate(-${margin.left}, ${margin.top})`
const data = this.props.data
let xScale = null
const data = JSON.parse(JSON.stringify(this.props.data))
const xScaleTimeLineData = JSON.parse(JSON.stringify(this.props.data))

// const xScale = ChartUtils.xScaleBand(data, innerWidth, barPadding);
if (this.props.xDataType === 'date') {
const parseDate = d3.timeParse('%m-%d-%Y %H:%M:%S')
data.forEach((d) => {
d.x = parseDate(d.x)
})
xScaleTimeLineData.forEach((d) => {
d.x = parseDate(d.x)
})

xScale = ChartUtils.xScaleBand(data, innerWidth, barPadding)
} else {
xScale = ChartUtils.xScaleLinear(data, innerWidth, barPadding)
}
xScale = ChartUtils.xScaleBand(data, innerWidth, barPadding)
const yScale = ChartUtils.yScaleLinear(data, innerHeight, 0)

// const rectBackground = (this.props.data).map((d, i) => {
// return (
// <rect
// fill="#58657f"
// rx={borderRadius}
// ry={borderRadius}
// key={i}
// x={xScale(d[xData])}
// y={margin.top - margin.bottom}
// height={innerHeight}
// width={xScale.bandwidth()}
// />
// );
// });
const yScale = ChartUtils.yScaleLinear(data, innerHeight, 0)

return (
<div className='bar-chart__container svg-overflow-visible'>
Expand All @@ -95,6 +87,8 @@ class BarChart extends React.Component {
xScale={xScale}
yScale={yScale}
xDataType={xDataType}
showXLabel={showXLabel}
showIcon={showIcon}
/>
<ToolTip tooltip={this.state.tooltip} yScale={yScale} />
</g>
Expand All @@ -111,7 +105,10 @@ BarChart.propTypes = {
height: number,
margin: object,
width: number,
xDataType: string
xDataType: string,
showXLabel: bool,
showIcon: bool,
tooltipTitle: string
}

BarChart.defaultProps = {
Expand All @@ -120,7 +117,10 @@ BarChart.defaultProps = {
height: 70,
margin: { top: 0, right: 5, bottom: -5, left: 10 },
width: 200,
xDataType: 'month'
xDataType: 'month',
showXLabel: false,
showIcon: false,
tooltipTitle: ''
}

export default BarChart
2 changes: 1 addition & 1 deletion src/components/charts/BarChart/BarChartTooltip.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const ToolTip = (props) => {
transform={transformLine}
/>
<text is visibility={visibility} transform={transformText} >
<tspan is x='0' y='10' text-anchor='left' font-size='12px' fill='#657d8e'>{`OPERATIONS (${props.tooltip.data.value})`}</tspan>
<tspan is x='0' y='10' text-anchor='left' font-size='12px' fill='#657d8e'>{`${props.tooltip.title} (${props.tooltip.data.value})`}</tspan>
<tspan is x='0' y='20' text-anchor='left' dy='12px' font-size='12px' fill='#657d8e'>{props.tooltip.data.key}</tspan>
</text>

Expand Down
72 changes: 54 additions & 18 deletions src/components/charts/BarChart/Rect.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,37 +4,69 @@ var d3 = Object.assign({}, require('d3-time-format'))

const { array, func, number, string } = PropTypes

const warningIconUri = require('../../../assets/icon_eh_warning.svg')
const criticalIconUri = require('../../../assets/icon_eh_error.svg')

const Rect = (props) => {
const { borderRadius, data, fill, innerHeight, xScale, yScale } = props

const rects = data.map((d, i) => {
let xDataKey = d.x
let xDateLabel = ''
let iconUri = ''
let fillColor = fill
if (props.xDataType === 'date') {
xDataKey = d3.timeFormat('%m/%d/%Y (%H:%M)')(d.x)
xDateLabel = d3.timeFormat('%m/%d')(d.x)
}
if (d.currentState === 'warning') {
fillColor = palette.yellow
iconUri = warningIconUri
} else if (d.currentState === 'critical') {
fillColor = palette.red
iconUri = criticalIconUri
}
return (
<rect
className='shadow'
fill={fillColor}
height={innerHeight - yScale(d.y)}
key={i}
cx={xScale(d.x)}
cy={yScale(d.y)}
rx={borderRadius}
ry={borderRadius}
width={xScale.bandwidth()}
x={xScale(d.x)}
y={yScale(d.y)}
data-key={xDataKey}
data-value={d.y}
onMouseEnter={props.showToolTip}
onMouseOut={props.hideToolTip}
<g key={`${i}-g`}>
<rect
className='shadow'
fill={fillColor}
height={innerHeight - yScale(d.y)}
key={i}
cx={xScale(d.x) + 5}
cy={yScale(d.y)}
rx={borderRadius}
ry={borderRadius}
width={xScale.bandwidth()}
x={xScale(d.x)}
y={yScale(d.y)}
data-key={xDataKey}
data-value={d.y}
onMouseEnter={props.showToolTip}
onMouseOut={props.hideToolTip}
/>
{ (props.showIcon)
? <image
xmlns='http://www.w3.org/2000/svg'
xlinkHref={iconUri}
x={(xScale(d.x))}
key={`${i}-i`}
y={(innerHeight - yScale(d.y)) / 2}
width={xScale.bandwidth()}
height='50px'
className='svgicon'
cx={xScale(d.x)}
cy={yScale(d.y)}
pointerEvents='none'

/>
: '' }
{ (props.showXLabel)
? <text x={(xScale(d.x)) + (xScale.bandwidth() / 2)} key={`${i}-t`} width={xScale.bandwidth()} y={innerHeight + 13} fill={palette.grey} textAnchor='middle'>
{xDateLabel}
</text>
: '' }
</g>
)
})

Expand All @@ -54,12 +86,16 @@ Rect.propTypes = {
showToolTip: func.isRequired,
xDataType: string.isRequired,
xScale: func.isRequired,
yScale: func.isRequired
yScale: func.isRequired,
showXLabel: React.PropTypes.bool,
showIcon: React.PropTypes.bool
}

Rect.defaultProps = {
borderRadius: 3,
fill: palette.blue
fill: palette.blue,
showXLabel: false,
showIcon: false
}

export default Rect

0 comments on commit f305208

Please sign in to comment.