maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fixes #13010 - Add config to react vis; Adding dateFormat to all visualziations that display dates (#13626)

Browse source
This commit is contained in:
Chris Cowan 2017-08-28 09:09:46 -07:00
parent e1cb4c6954
commit 8071ff5cd6
13 changed files with 37 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/core_plugins/metrics/public/components/lib/convert_series_to_vars.js
View file

@ -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])];
})
}
};

7
src/core_plugins/metrics/public/components/markdown_editor.js
View file

@ -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;

1
src/core_plugins/metrics/public/components/panel_config.js
View file

@ -28,6 +28,7 @@ PanelConfig.propTypes = {
model: PropTypes.object,
onChange: PropTypes.func,
visData: PropTypes.object,
dateFormat: PropTypes.string
};
export default PanelConfig;

1
src/core_plugins/metrics/public/components/panel_config/markdown.js
View file

@ -158,6 +158,7 @@ MarkdownPanelConfig.propTypes = {
model: PropTypes.object,
onChange: PropTypes.func,
visData: PropTypes.object,
dateFormat: PropTypes.string
};
export default MarkdownPanelConfig;

4
src/core_plugins/metrics/public/components/vis_editor.js
View file

@ -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;

4
src/core_plugins/metrics/public/components/vis_editor_visualization.js
View file

@ -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
src/core_plugins/metrics/public/components/vis_types/markdown/vis.js
View file

@ -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;

4
src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js
View file

@ -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;

4
src/core_plugins/metrics/public/components/visualization.js
View file

@ -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
src/core_plugins/metrics/public/kbn_vis_types/editor_controller.js
View file

@ -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);
});
});
}

4
src/core_plugins/metrics/public/visualizations/components/timeseries.js
View file

@ -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;

8
src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js
View file

@ -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;

4
src/ui/public/vis/vis_types/react_vis_type.js
View file

@ -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);
});
}