Fixes #13010 - Add config to react vis; Adding dateFormat to all visualziations that display dates (#13626)
This commit is contained in:
parent
e1cb4c6954
commit
8071ff5cd6
|
@ -2,7 +2,7 @@ import _ from 'lodash';
|
|||
import getLastValue from '../../visualizations/lib/get_last_value';
|
||||
import tickFormatter from './tick_formatter';
|
||||
import moment from 'moment';
|
||||
export default (series, model) => {
|
||||
export default (series, model, dateFormat = 'lll') => {
|
||||
const variables = {};
|
||||
model.series.forEach(seriesModel => {
|
||||
series
|
||||
|
@ -24,7 +24,7 @@ export default (series, model) => {
|
|||
data: {
|
||||
raw: row.data,
|
||||
formatted: row.data.map(point => {
|
||||
return [moment(point[0]).format('lll'), formatter(point[1])];
|
||||
return [moment(point[0]).format(dateFormat), formatter(point[1])];
|
||||
})
|
||||
}
|
||||
};
|
||||
|
|
|
@ -32,9 +32,9 @@ class MarkdownEditor extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { model, visData } = this.props;
|
||||
const { model, visData, dateFormat } = this.props;
|
||||
const series = _.get(visData, `${model.id}.series`, []);
|
||||
const variables = convertSeriesToVars(series, model);
|
||||
const variables = convertSeriesToVars(series, model, dateFormat);
|
||||
const rows = [];
|
||||
const rawFormatter = tickFormatter('0.[0000]');
|
||||
|
||||
|
@ -137,7 +137,8 @@ class MarkdownEditor extends Component {
|
|||
MarkdownEditor.propTypes = {
|
||||
onChange: PropTypes.func,
|
||||
model: PropTypes.object,
|
||||
visData: PropTypes.object
|
||||
visData: PropTypes.object,
|
||||
dateFormat: PropTypes.string
|
||||
};
|
||||
|
||||
export default MarkdownEditor;
|
||||
|
|
|
@ -28,6 +28,7 @@ PanelConfig.propTypes = {
|
|||
model: PropTypes.object,
|
||||
onChange: PropTypes.func,
|
||||
visData: PropTypes.object,
|
||||
dateFormat: PropTypes.string
|
||||
};
|
||||
|
||||
export default PanelConfig;
|
||||
|
|
|
@ -158,6 +158,7 @@ MarkdownPanelConfig.propTypes = {
|
|||
model: PropTypes.object,
|
||||
onChange: PropTypes.func,
|
||||
visData: PropTypes.object,
|
||||
dateFormat: PropTypes.string
|
||||
};
|
||||
|
||||
export default MarkdownPanelConfig;
|
||||
|
|
|
@ -62,6 +62,7 @@ class VisEditor extends Component {
|
|||
const reversed = this.state.reversed;
|
||||
return (
|
||||
<Visualization
|
||||
dateFormat={this.props.config.get('dateFormat')}
|
||||
reversed={reversed}
|
||||
onBrush={this.onBrush}
|
||||
fields={this.props.vis.fields}
|
||||
|
@ -90,11 +91,13 @@ class VisEditor extends Component {
|
|||
onCommit={handleCommit}
|
||||
onToggleAutoApply={handleAutoApplyToggle}
|
||||
onChange={handleChange}
|
||||
dateFormat={this.props.config.get('dateFormat')}
|
||||
/>
|
||||
<PanelConfig
|
||||
fields={this.props.vis.fields}
|
||||
model={model}
|
||||
visData={this.props.visData}
|
||||
dateFormat={this.props.config.get('dateFormat')}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
@ -115,6 +118,7 @@ VisEditor.propTypes = {
|
|||
visData: PropTypes.object,
|
||||
appState: PropTypes.object,
|
||||
renderComplete: PropTypes.func,
|
||||
config: PropTypes.object
|
||||
};
|
||||
|
||||
export default VisEditor;
|
||||
|
|
|
@ -97,6 +97,7 @@ class VisEditorVisualization extends Component {
|
|||
<Visualization
|
||||
backgroundColor={visBackgroundColor}
|
||||
className="dashboard__visualization"
|
||||
dateFormat={this.props.dateFormat}
|
||||
model={this.props.model}
|
||||
onBrush={this.props.onBrush}
|
||||
onChange={this.handleChange}
|
||||
|
@ -124,7 +125,8 @@ VisEditorVisualization.propTypes = {
|
|||
onToggleAutoApply: PropTypes.func,
|
||||
visData: PropTypes.object,
|
||||
dirty: PropTypes.bool,
|
||||
autoApply: PropTypes.bool
|
||||
autoApply: PropTypes.bool,
|
||||
dateFormat: PropTypes.string
|
||||
};
|
||||
|
||||
export default VisEditorVisualization;
|
||||
|
|
|
@ -7,9 +7,9 @@ import replaceVars from '../../lib/replace_vars';
|
|||
import convertSeriesToVars from '../../lib/convert_series_to_vars';
|
||||
|
||||
function MarkdownVisualization(props) {
|
||||
const { backgroundColor, model, visData } = props;
|
||||
const { backgroundColor, model, visData, dateFormat } = props;
|
||||
const series = _.get(visData, `${model.id}.series`, []);
|
||||
const variables = convertSeriesToVars(series, model);
|
||||
const variables = convertSeriesToVars(series, model, dateFormat);
|
||||
const style = { };
|
||||
let reversed = props.reversed;
|
||||
const panelBackgroundColor = model.background_color || backgroundColor;
|
||||
|
@ -54,7 +54,8 @@ MarkdownVisualization.propTypes = {
|
|||
onBrush: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
reversed: PropTypes.bool,
|
||||
visData: PropTypes.object
|
||||
visData: PropTypes.object,
|
||||
dateFormat: PropTypes.string
|
||||
};
|
||||
|
||||
export default MarkdownVisualization;
|
||||
|
|
|
@ -122,6 +122,7 @@ function TimeseriesVisualization(props) {
|
|||
}
|
||||
|
||||
const params = {
|
||||
dateFormat: props.dateFormat,
|
||||
crosshair: true,
|
||||
tickFormatter: formatter,
|
||||
legendPosition: model.legend_position || 'right',
|
||||
|
@ -159,7 +160,8 @@ TimeseriesVisualization.propTypes = {
|
|||
onBrush: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
reversed: PropTypes.bool,
|
||||
visData: PropTypes.object
|
||||
visData: PropTypes.object,
|
||||
dateFormat: PropTypes.string
|
||||
};
|
||||
|
||||
export default TimeseriesVisualization;
|
||||
|
|
|
@ -31,6 +31,7 @@ function Visualization(props) {
|
|||
const component = types[model.type];
|
||||
if (component) {
|
||||
return React.createElement(component, {
|
||||
dateFormat: props.dateFormat,
|
||||
reversed: props.reversed,
|
||||
backgroundColor: props.backgroundColor,
|
||||
model: props.model,
|
||||
|
@ -53,7 +54,8 @@ Visualization.propTypes = {
|
|||
onBrush: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
reversed: PropTypes.bool,
|
||||
visData: PropTypes.object
|
||||
visData: PropTypes.object,
|
||||
dateFormat: PropTypes.string
|
||||
};
|
||||
|
||||
export default Visualization;
|
||||
|
|
|
@ -4,7 +4,7 @@ import { FetchFieldsProvider } from '../lib/fetch_fields';
|
|||
import { extractIndexPatterns } from '../lib/extract_index_patterns';
|
||||
const AUTO_APPLY_KEY = 'metrics_autoApply';
|
||||
|
||||
function ReactEditorControllerProvider(Private, localStorage) {
|
||||
function ReactEditorControllerProvider(Private, localStorage, config) {
|
||||
const fetchFields = Private(FetchFieldsProvider);
|
||||
|
||||
class ReactEditorController {
|
||||
|
@ -24,7 +24,7 @@ function ReactEditorControllerProvider(Private, localStorage) {
|
|||
fetchFields(indexPatterns).then(fields => {
|
||||
this.vis.fields = { ...fields, ...this.vis.fields };
|
||||
const Component = this.vis.type.editorConfig.component;
|
||||
render(<Component vis={this.vis} visData={visData} renderComplete={resolve}/>, this.el);
|
||||
render(<Component config={config} vis={this.vis} visData={visData} renderComplete={resolve}/>, this.el);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
@ -122,6 +122,7 @@ class Timeseries extends Component {
|
|||
<div style={styles.content} className="rhythm_chart__content">
|
||||
<div className="rhythm_chart__visualization">
|
||||
<TimeseriesChart
|
||||
dateFormat={this.props.dateFormat}
|
||||
crosshair={this.props.crosshair}
|
||||
onBrush={this.props.onBrush}
|
||||
plothover={this.plothover}
|
||||
|
@ -170,7 +171,8 @@ Timeseries.propTypes = {
|
|||
options: PropTypes.object,
|
||||
tickFormatter: PropTypes.func,
|
||||
showGrid: PropTypes.bool,
|
||||
xaxisLabel: PropTypes.string
|
||||
xaxisLabel: PropTypes.string,
|
||||
dateFormat: PropTypes.string
|
||||
};
|
||||
|
||||
export default Timeseries;
|
||||
|
|
|
@ -182,7 +182,7 @@ class TimeseriesChart extends Component {
|
|||
<div style={styles.text}>{ item.series.label }</div>
|
||||
<div style={styles.value}>{ formatter(value) }</div>
|
||||
</div>
|
||||
<div style={styles.date}>{ moment(item.datapoint[0]).format('ll LTS') }</div>
|
||||
<div style={styles.date}>{ moment(item.datapoint[0]).format(this.props.dateFormat) }</div>
|
||||
</div>
|
||||
<i className="fa fa-caret-right" style={styles.rightCaret} />
|
||||
</div>
|
||||
|
@ -227,7 +227,8 @@ class TimeseriesChart extends Component {
|
|||
}
|
||||
|
||||
TimeseriesChart.defaultProps = {
|
||||
showGrid: true
|
||||
showGrid: true,
|
||||
dateFormat: 'll LTS'
|
||||
};
|
||||
|
||||
TimeseriesChart.propTypes = {
|
||||
|
@ -242,7 +243,8 @@ TimeseriesChart.propTypes = {
|
|||
tickFormatter: PropTypes.func,
|
||||
yaxes: PropTypes.array,
|
||||
showGrid: PropTypes.bool,
|
||||
xaxisLabel: PropTypes.string
|
||||
xaxisLabel: PropTypes.string,
|
||||
dateFormat: PropTypes.string
|
||||
};
|
||||
|
||||
export default TimeseriesChart;
|
||||
|
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
import { render, unmountComponentAtNode } from 'react-dom';
|
||||
import { VisTypeProvider } from 'ui/vis/vis_types';
|
||||
|
||||
export function ReactVisTypeProvider(Private, getAppState) {
|
||||
export function ReactVisTypeProvider(Private, getAppState, config) {
|
||||
const VisType = Private(VisTypeProvider);
|
||||
|
||||
class ReactVisController {
|
||||
|
@ -17,7 +17,7 @@ export function ReactVisTypeProvider(Private, getAppState) {
|
|||
return new Promise((resolve, reject) => {
|
||||
if (!this.visData) return reject();
|
||||
const Component = this.vis.type.visConfig.component;
|
||||
render(<Component vis={this.vis} appState={getAppState()} visData={visData} renderComplete={resolve} />, this.el);
|
||||
render(<Component config={config} vis={this.vis} appState={getAppState()} visData={visData} renderComplete={resolve} />, this.el);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue