-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(charts): data props for columns, pies, stackedColumns, sparkline…
…s, donuts (#43) * start integration steps for pies * integrate data props for percentage type stacked column chart * integrate non percentage stacked column and update docs * empower line charts to know about data * updates deploy socs for line * update data api for sparklines * fixes legend data * integrate donuts with data; add donut example; * smplify sparkline * document sparklines
- Loading branch information
1 parent
565932c
commit 9f35d11
Showing
19 changed files
with
361 additions
and
286 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,66 +1,65 @@ | ||
| import React, {PureComponent} from 'react'; | ||
| import styled from 'styled-components'; | ||
|
|
||
| const TrendLegendDiv = styled.div` | ||
| width: 100%; | ||
| text-align:center; | ||
| ` | ||
| // TODO remove the implicit fontawesome dependency | ||
|
|
||
| class TrendLegend extends PureComponent { | ||
| render() { | ||
| const trend = this.getTrend(); | ||
| const volume = this.getVolume(); | ||
| const date = this.getPreviousDate(); | ||
|
|
||
| //TODO avoid fontawesome dependency; maybe inject somehow? | ||
| const iconClass = `metric-trend fa fa-arrow-${trend}` | ||
| import React, {PureComponent} from 'react'; | ||
| import styled from 'styled-components'; | ||
|
|
||
| return ( | ||
| <TrendLegendDiv> | ||
| <span className={iconClass}></span> | ||
| <span className='summary-text'>{trend} {volume} since {date}</span> | ||
| </TrendLegendDiv> | ||
| ) | ||
| } | ||
|
|
||
| getPreviousDate() { | ||
| return this.props.previousDate; | ||
| } | ||
| const getPreviousDate = (data) => { | ||
| const secondLastDatum = data[data.length - 2]; | ||
|
|
||
| getVolume() { | ||
| let diff = this.getDifference(); | ||
| if (secondLastDatum && secondLastDatum.category) { | ||
| return secondLastDatum.category; | ||
| } | ||
| return null; | ||
| }; | ||
|
|
||
| switch(diff) { | ||
| const getVolume = (diff) => { | ||
| switch(diff) { | ||
| case 0: | ||
| return ''; | ||
| default: | ||
| return Math.abs(diff); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| getTrend() { | ||
| let diff = this.getDifference(); | ||
|
|
||
| switch(true) { | ||
| const getTrend = (diff) => { | ||
| switch(true) { | ||
| case diff > 0: | ||
| return 'up'; | ||
| case diff < 0: | ||
| return 'down'; | ||
| default: | ||
| return 'unchanged'; | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| getDifference() { | ||
| let data = this.getData(); | ||
| let lastVal = data[data.length - 1].y | ||
| let previousVal = data[data.length -2].y | ||
| return lastVal - previousVal | ||
| } | ||
| const getDifference = (data) => { | ||
| const lastVal = data[data.length - 1].y; | ||
| const previousVal = data[data.length -2].y; | ||
| return lastVal - previousVal; | ||
| }; | ||
|
|
||
|
|
||
| const TrendLegend = ({data}) => { | ||
| const difference = getDifference(data); | ||
| const date = getPreviousDate(data); | ||
| const trend = getTrend(difference); | ||
| const volume = getVolume(difference); | ||
| return ( | ||
| <div className="trend-legend"> | ||
| <i className={`metric-trend fa fa-arrow-${trend}`}></i> | ||
| {date && <span className='summary-text'>{trend} {volume} since {date}</span>} | ||
| </div> | ||
| ) | ||
| }; | ||
|
|
||
| getData() { | ||
| return this.props.data; | ||
| const StyledTrendLegend = styled(TrendLegend)` | ||
| .trend-legend { | ||
| width: 100%; | ||
| text-align:center; | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| export default TrendLegend; | ||
| export default StyledTrendLegend; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,31 @@ | ||
| Basic Donut Widget: | ||
| ### Multiple Category Singular Slice: | ||
|
|
||
| <DonutWidget widget={{ | ||
| title: 'Devices used', | ||
| dateUpdated: '22 Feb 2016', | ||
| }} /> | ||
| Renders slice data to each of its sectors. | ||
|
|
||
| <DonutWidget chartConfig={{ | ||
| "series":[{ | ||
| name: "Jan", | ||
| data: [ | ||
| {"name":"Mobile","y":183}, | ||
| {"name":"Tablet","y":30}, | ||
| {"name":"Desktop","y":200} | ||
| ] | ||
| }] | ||
| }} | ||
| title="Devices used" | ||
| units="percentage" | ||
| type="donut" | ||
| dateLastUpdated="2017-02-01T01:02:02.240Z" | ||
| _singleCategory={true} | ||
| _singleSection={false} | ||
| minimumValue="30" /> | ||
|
|
||
|
|
||
| ### Multiple Category Multiple Slices (shown as aggregate over time (many slices)): | ||
|
|
||
| `@todo - new feature` | ||
|
|
||
|
|
||
| ### Multiple Category Multiple Slices (multiple pies) | ||
|
|
||
| `@todo - new feature - as example: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/pie-donut/` |
Oops, something went wrong.