- { mode !== 'block' && (
+ { showHeaderControls && (
{ title }
- { isViewportWide && legendDirection === 'row' && legend }
+ { legendPosition === 'top' && legend }
{ this.renderIntervalSelector() }
- { isViewportWide && legendDirection === 'column' && mode !== 'block' && legend }
+ { legendPosition === 'side' && legend }
{ isRequesting && (
@@ -328,7 +344,7 @@ class Chart extends Component {
height={ chartHeight }
interval={ interval }
margin={ margin }
- mode={ mode === 'block' ? 'item-comparison' : mode }
+ mode={ mode }
orderedKeys={ orderedKeys }
tooltipLabelFormat={ tooltipLabelFormat }
tooltipValueFormat={ tooltipValueFormat }
@@ -343,7 +359,7 @@ class Chart extends Component {
/>
) }
- { ( ! isViewportWide || mode === 'block' ) && (
+ { ( legendPosition === 'bottom' ) && (
{ legend }
) }
@@ -353,6 +369,10 @@ class Chart extends Component {
}
Chart.propTypes = {
+ /**
+ * Allowed intervals to show in a dropdown.
+ */
+ allowedIntervals: PropTypes.array,
/**
* An array of data.
*/
@@ -365,6 +385,11 @@ Chart.propTypes = {
* Label describing the legend items.
*/
itemsLabel: PropTypes.string,
+ /**
+ * `item-comparison` (default) or `time-comparison`, this is used to generate correct
+ * ARIA properties.
+ */
+ mode: PropTypes.oneOf( [ 'item-comparison', 'time-comparison' ] ),
/**
* Current path
*/
@@ -373,6 +398,35 @@ Chart.propTypes = {
* The query string represented in object form
*/
query: PropTypes.object,
+ /**
+ * Whether the legend items can be activated/deactivated.
+ */
+ interactiveLegend: PropTypes.bool,
+ /**
+ * Interval specification (hourly, daily, weekly etc).
+ */
+ interval: PropTypes.oneOf( [ 'hour', 'day', 'week', 'month', 'quarter', 'year' ] ),
+ /**
+ * Information about the currently selected interval, and set of allowed intervals for the chart. See `getIntervalsForQuery`.
+ */
+ intervalData: PropTypes.object,
+ /**
+ * Render a chart placeholder to signify an in-flight data request.
+ */
+ isRequesting: PropTypes.bool,
+ /**
+ * Position the legend must be displayed in. If it's not defined, it's calculated
+ * depending on the viewport width and the mode.
+ */
+ legendPosition: PropTypes.oneOf( [ 'bottom', 'side', 'top' ] ),
+ /**
+ * Wether header UI controls must be displayed.
+ */
+ showHeaderControls: PropTypes.bool,
+ /**
+ * A title describing this chart.
+ */
+ title: PropTypes.string,
/**
* A datetime formatting string or overriding function to format the tooltip label.
*/
@@ -385,6 +439,14 @@ Chart.propTypes = {
* A string to use as a title for the tooltip. Takes preference over `tooltipLabelFormat`.
*/
tooltipTitle: PropTypes.string,
+ /**
+ * Chart type of either `line` or `bar`.
+ */
+ type: PropTypes.oneOf( [ 'bar', 'line' ] ),
+ /**
+ * What type of data is to be displayed? Number, Average, String?
+ */
+ valueType: PropTypes.string,
/**
* A datetime formatting string, passed to d3TimeFormat.
*/
@@ -397,53 +459,22 @@ Chart.propTypes = {
* A number formatting string, passed to d3Format.
*/
yFormat: PropTypes.string,
- /**
- * `item-comparison` (default) or `time-comparison`, this is used to generate correct
- * ARIA properties.
- */
- mode: PropTypes.oneOf( [ 'block', 'item-comparison', 'time-comparison' ] ),
- /**
- * A title describing this chart.
- */
- title: PropTypes.string,
- /**
- * Chart type of either `line` or `bar`.
- */
- type: PropTypes.oneOf( [ 'bar', 'line' ] ),
- /**
- * Information about the currently selected interval, and set of allowed intervals for the chart. See `getIntervalsForQuery`.
- */
- intervalData: PropTypes.object,
- /**
- * Interval specification (hourly, daily, weekly etc).
- */
- interval: PropTypes.oneOf( [ 'hour', 'day', 'week', 'month', 'quarter', 'year' ] ),
- /**
- * Allowed intervals to show in a dropdown.
- */
- allowedIntervals: PropTypes.array,
- /**
- * What type of data is to be displayed? Number, Average, String?
- */
- valueType: PropTypes.string,
- /**
- * Render a chart placeholder to signify an in-flight data request.
- */
- isRequesting: PropTypes.bool,
};
Chart.defaultProps = {
data: [],
dateParser: '%Y-%m-%dT%H:%M:%S',
+ interactiveLegend: true,
+ interval: 'day',
+ isRequesting: false,
+ mode: 'time-comparison',
+ showHeaderControls: true,
tooltipLabelFormat: '%B %d, %Y',
tooltipValueFormat: ',',
+ type: 'line',
xFormat: '%d',
x2Format: '%b %Y',
yFormat: '$.3s',
- mode: 'time-comparison',
- type: 'line',
- interval: 'day',
- isRequesting: false,
};
export default withViewportMatch( {