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

Commit

Permalink
feat(graph): add labels and icons
Browse files Browse the repository at this point in the history 
adds a label option and icon option to the bar chart
  • Loading branch information
@eddier
eddier committed Mar 20, 2017
1 parent 7d8587e commit c69858f
Show file tree
Hide file tree
Showing 7 changed files with 11,210 additions and 43 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
"glob": "^7.1.1",
"gulp": "^3.9.1",
"html-loader": "^0.4.4",
"immutable": "^3.8.1",
"javascript-natural-sort": "^0.7.1",
"jest": "^19.0.2",
"nsp": "^2.6.2",
Expand Down
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.
4 changes: 3 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,8 +6,10 @@ 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
/>
</div>

Expand Down
47 changes: 23 additions & 24 deletions src/components/charts/BarChart/BarChart.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
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'))
import Immutable from 'immutable'
var d3 = Object.assign({}, require('d3-time-format'), require('d3-axis'))

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

class BarChart extends React.Component {
constructor (props) {
Expand Down Expand Up @@ -48,37 +50,28 @@ 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 xScale = ChartUtils.xScaleBand(data, innerWidth, barPadding);
const data = Immutable.fromJS(this.props.data).toJS()
const xScaleTimeLineData = Immutable.fromJS(this.props.data).toJS()
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 +88,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 +106,9 @@ BarChart.propTypes = {
height: number,
margin: object,
width: number,
xDataType: string
xDataType: string,
showXLabel: bool,
showIcon: bool
}

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

export default BarChart
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
4 changes: 4 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4380,6 +4380,10 @@ image-size@~0.5.0:
version "0.5.1"
resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.1.tgz#28eea8548a4b1443480ddddc1e083ae54652439f"

immutable@^3.8.1:
version "3.8.1"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.1.tgz#200807f11ab0f72710ea485542de088075f68cd2"

import-regex@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/import-regex/-/import-regex-1.1.0.tgz#a55c52e4c705c765ca210e9242a06bbcc8aa7f66"
Expand Down

0 comments on commit c69858f

Please sign in to comment.