diff --git a/docs/images/lens_data_info.gif b/docs/images/lens_data_info.gif new file mode 100644 index 0000000000000..e2c565de9f6a7 Binary files /dev/null and b/docs/images/lens_data_info.gif differ diff --git a/docs/images/lens_drag_drop.gif b/docs/images/lens_drag_drop.gif new file mode 100644 index 0000000000000..39cde64fb97eb Binary files /dev/null and b/docs/images/lens_drag_drop.gif differ diff --git a/docs/images/lens_remove_layer.png b/docs/images/lens_remove_layer.png new file mode 100644 index 0000000000000..4184e5b846870 Binary files /dev/null and b/docs/images/lens_remove_layer.png differ diff --git a/docs/images/lens_suggestions.gif b/docs/images/lens_suggestions.gif new file mode 100644 index 0000000000000..0452207b86456 Binary files /dev/null and b/docs/images/lens_suggestions.gif differ diff --git a/docs/images/lens_tutorial_1.png b/docs/images/lens_tutorial_1.png new file mode 100644 index 0000000000000..7992276c833e7 Binary files /dev/null and b/docs/images/lens_tutorial_1.png differ diff --git a/docs/images/lens_tutorial_2.png b/docs/images/lens_tutorial_2.png new file mode 100644 index 0000000000000..b47e7feff3b9f Binary files /dev/null and b/docs/images/lens_tutorial_2.png differ diff --git a/docs/images/lens_tutorial_3.png b/docs/images/lens_tutorial_3.png new file mode 100644 index 0000000000000..ea40b458202b7 Binary files /dev/null and b/docs/images/lens_tutorial_3.png differ diff --git a/docs/user/visualize.asciidoc b/docs/user/visualize.asciidoc index eec9ef65cba90..ed74525d22e7c 100644 --- a/docs/user/visualize.asciidoc +++ b/docs/user/visualize.asciidoc @@ -24,9 +24,10 @@ To create a visualization: . Click on *Visualize* in the side navigation. . Click the *Create new visualization* button or the **+** button. . Choose the visualization type: -+ + * *Basic charts* [horizontal] +<>:: Quickly build several types of basic visualizations by simply dragging and dropping the data fields you want to display. <>:: Compare different series in X/Y charts. <>:: Shade cells within a matrix. <>:: Display each source's contribution to a total. @@ -142,6 +143,8 @@ include::{kib-repo-dir}/visualize/saving.asciidoc[] include::{kib-repo-dir}/visualize/visualize_rollup_data.asciidoc[] +include::{kib-repo-dir}/visualize/lens.asciidoc[] + include::{kib-repo-dir}/visualize/xychart.asciidoc[] include::{kib-repo-dir}/visualize/controls.asciidoc[] diff --git a/docs/visualize/lens.asciidoc b/docs/visualize/lens.asciidoc new file mode 100644 index 0000000000000..086f88c636c81 --- /dev/null +++ b/docs/visualize/lens.asciidoc @@ -0,0 +1,186 @@ +[role="xpack"] +[[lens]] +== Lens + +beta[] + +*Lens* provides you with a simple and fast way to create visualizations from your Elasticsearch data. With Lens, you can: + +* Quickly build visualizations by dragging and dropping data fields. + +* Understand your data with a summary view on each field. + +* Easily change the visualization type by selecting the automatically generated visualization suggestions. + +* Save your visualization for use in a dashboard. + +[float] +[[drag-drop]] +=== Drag and drop + +The data panel in the left column shows the data fields for the selected time period. When +you drag a field from the data panel, Lens highlights where you can drop that field. The first time you drag a data field, +you'll see two places highlighted in green: + +* The visualization builder pane + +* The *X-axis* or *Y-axis* fields in the right column + +You can incorporate many fields into your visualization, and Lens uses heuristics to decide how +to apply each one to the visualization. + +[role="screenshot"] +image::images/lens_drag_drop.gif[] + +TIP: Drag-and-drop capabilities are available only when Lens knows how to use the data. You can still customize +your visualization if Lens is unable to make a suggestion. + +[float] +[[apply-lens-filters]] +==== Find the right data + +Lens shows you fields based on the <> you have defined in +{kib}, and the current time range. When you change the index pattern or time filter, +the list of fields are updated. + +To narrow the list of fields you see in the left panel, you can: + +* Enter the field name in *Search field names*. + +* Click *Filter by type*, then select the filter. You can also select *Only show fields with data* +to show the full list of fields from the index pattern. + +[float] +[[view-data-summaries]] +==== Data summaries + +To help you decide exactly the data you want to display, get a quick summary of each data field. +The summary shows the distribution of values in the time range. + +To view the data information, navigate to a data field, then click *i*. + +[role="screenshot"] +image::images/lens_data_info.gif[] + +[float] +[[change-the-visualization-type]] +==== Change the visualization type + +With Lens, you are no longer required to build each visualization from scratch. Lens allows +you to switch between any supported chart type at any time. Lens also provides +suggestions, which are shortcuts to alternate visualizations based on the data you have. + +You can switch between suggestions without losing your previous state: + +[role="screenshot"] +image::images/lens_suggestions.gif[] + +If you want to switch to a chart type that is not suggested, click the chart type in the +top right, then select a chart type. When there is an exclamation point (!) +next to a chart type, Lens is unable to transfer your current data, but +still allows you to make the change. + +[float] +[[customize-operation]] +==== Customize the data for your visualization + +Lens allows some customizations of the data for each visualization. + +. Change the index pattern. + +.. In the left column, click the index pattern name. + +.. Select the new index pattern. ++ +If there is a match, Lens displays the new data. All fields that do not match the index pattern are removed. + +. Change the data field options, such as the aggregation or label. + +.. Click *Drop a field here* or the field name in the right column. + +.. Change the options that appear depending on the type of field. + +[float] +[[layers]] +==== Layers in bar, line, and area charts + +The bar, line, and area charts allow you to layer two different series. To add a layer, click *+*. + +To remove a layer, click the chart icon next to the index name: + +[role="screenshot"] +image::images/lens_remove_layer.png[] + +[float] +[[lens-tutorial]] +=== Lens tutorial + +Ready to create your own visualization with Lens? Use the following tutorial to create a visualization that +lets you compare sales over time. + +[float] +[[lens-before-begin]] +==== Before you begin + +To start, you'll need to add the <>. + +[float] +==== Build the visualization + +Drag and drop your data onto the visualization builder pane. + +. Open *Visualize*, then click *Create visualization*. + +. On the *New Visualization* window, click *Lens*. + +. In the left column, select the *kibana_sample_data_ecommerce* index. + +. Click image:images/time-filter-calendar.png[], then click *Last 7 days*. The list of data fields are updated. + +. Drag and drop the *taxful_total_price* data field to the visualization builder pane. ++ +[role="screenshot"] +image::images/lens_tutorial_1.png[Lens tutorial] + +Lens has taken your intent to see *taxful_total_price* and added in the *order_date* field to show +average order prices over time. + +To break down your data, drag the *category.keyword* field to the visualization builder pane. Lens +understands that you want to show the top categories and compare them across the dates, +and creates a chart that compares the sales for each of the top 3 categories: + +[role="screenshot"] +image::images/lens_tutorial_2.png[Lens tutorial] + +[float] +[[customize-lens-visualization]] +==== Further customization + +Customize your visualization to look exactly how you want. + +. In the right column, click *Average of taxful_total_price*. + +.. Change the *Label* to `Sales`, or a name that you prefer for the data. + +. Click *Top values of category.keyword*. + +.. Increase *Number of values* to `10`. The visualization updates in the background to show there are only +six available categories. + +. Look at the suggestions. None of them show an area chart, but for sales data, a stacked area chart +might make sense. To switch the chart type: + +.. Click *Stacked bar chart* in the right column. + +.. Click *Stacked area*. ++ +[role="screenshot"] +image::images/lens_tutorial_3.png[Lens tutorial] + +[float] +[[lens-tutorial-next-steps]] +==== Next steps + +Now that you've created your visualization in Lens, you can add it to a Dashboard. + +For more information, see <>. diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/StaticPlot.js b/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/StaticPlot.js index dd95a0a3db12d..0e44bafa0c2a6 100644 --- a/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/StaticPlot.js +++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/StaticPlot.js @@ -158,13 +158,9 @@ class StaticPlot extends PureComponent { }; render() { - const { width, series, tickFormatY, plotValues, noHits } = this.props; + const { series, tickFormatY, plotValues, noHits } = this.props; const { xTickValues, yTickValues } = plotValues; - // approximate number of x-axis ticks based on the width of the plot. There should by approx 1 tick per 100px - // d3 will determine the exact number of ticks based on the selected range - const xTickTotal = Math.floor(width / 100); - const tickFormatX = this.props.tickFormatX || this.tickFormatXTime; return ( @@ -172,7 +168,6 @@ class StaticPlot extends PureComponent { diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/getTimezoneOffsetInMs.test.ts b/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/getTimezoneOffsetInMs.test.ts index dc815145db4ad..d99cb5cb9f1f1 100644 --- a/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/getTimezoneOffsetInMs.test.ts +++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/getTimezoneOffsetInMs.test.ts @@ -8,7 +8,7 @@ import { getTimezoneOffsetInMs } from './getTimezoneOffsetInMs'; import moment from 'moment-timezone'; // FAILING: https://github.com/elastic/kibana/issues/50005 -describe.skip('getTimezoneOffsetInMs', () => { +describe('getTimezoneOffsetInMs', () => { describe('when no default timezone is set', () => { it('guesses the timezone', () => { const guess = jest.fn(() => 'Etc/UTC'); @@ -34,7 +34,11 @@ describe.skip('getTimezoneOffsetInMs', () => { }); it('returns the time in milliseconds', () => { - expect(getTimezoneOffsetInMs(Date.now())).toEqual(21600000); + const now = Date.now(); + // get the expected offset from moment to prevent any issues with DST + const expectedOffset = + moment.tz.zone('America/Denver')!.parse(now) * 60000; + expect(getTimezoneOffsetInMs(Date.now())).toEqual(expectedOffset); }); }); }); diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/plotUtils.js b/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/plotUtils.js index 7923ae25c22a3..4186f6c899750 100644 --- a/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/plotUtils.js +++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/plotUtils.js @@ -75,11 +75,15 @@ export function getPlotValues( const yMaxNice = yScale.domain()[1]; const yTickValues = [0, yMaxNice / 2, yMaxNice]; + // approximate number of x-axis ticks based on the width of the plot. There should by approx 1 tick per 100px + // d3 will determine the exact number of ticks based on the selected range + const xTickTotal = Math.floor(width / 100); + const xTickValues = d3.time.scale .utc() .domain([xMinZone, xMaxZone]) .range([0, width]) - .ticks() + .ticks(xTickTotal) .map(x => { const time = x.getTime(); return new Date(time + getTimezoneOffsetInMs(time));