feat(discover): add basic elastic-charts bar chart to discover

src/legacy/core_plugins/kibana/public/discover/components/histogram/directive.js

@@ -0,0 +1,28 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import 'ngreact';
+import { uiModules } from 'ui/modules';
+import { DiscoverHistogram } from './histogram';
+
+import { wrapInI18nContext } from 'ui/i18n';
+
+const app = uiModules.get('apps/discover', ['react']);
+
+app.directive('discoverHistogram', reactDirective => reactDirective(wrapInI18nContext(DiscoverHistogram)));

src/legacy/core_plugins/kibana/public/discover/components/histogram/histogram.tsx

@@ -0,0 +1,133 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import moment from 'moment';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  AnnotationDomainTypes,
+  Axis,
+  BarSeries,
+  Chart,
+  getAnnotationId,
+  getAxisId,
+  getSpecId,
+  LineAnnotation,
+  Position,
+  ScaleType,
+  Settings,
+  RectAnnotation,
+} from '@elastic/charts';
+
+export interface DiscoverHistogramProps {
+  chartData: any; // TODO: make this unknown?
+}
+
+export class DiscoverHistogram extends Component<DiscoverHistogramProps> {
+  static propTypes = {
+    chartData: PropTypes.object,
+  };
+
+  render() {
+    if (!this.props.chartData || !this.props.chartData.series[0]) {
+      return null;
+    }
+
+    const format = this.props.chartData.xAxisFormat.params.pattern;
+
+    const formatter = (val: string) => {
+      return moment(val).format(format);
+    };
+
+    const currentTime = {
+      dataValue: moment(),
+      details: '',
+    };
+
+    const lineAnnotationStyle = {
+      line: {
+        strokeWidth: 2,
+        stroke: '#c80000',
+        opacity: 0.3,
+      },
+    };
+
+    const domain = this.props.chartData.ordered;
+    const domainStart = domain.min;
+    const domainEnd = domain.max;
+
+    const rectAnnotations = [
+      {
+        coordinates: {
+          x0: domainStart.valueOf(),
+        },
+        details: 'This area may contain partial data',
+      },
+      {
+        coordinates: {
+          x1: domainEnd.valueOf(),
+        },
+        details: 'This area may contain partial data',
+      },
+    ];
+
+    const xDomain = {
+      min: domainStart.valueOf(),
+      max: domainEnd.valueOf(),
+    };
+
+    return (
+      <Chart className="escDiscoverHistogram">
+        <Settings debug={false} xDomain={xDomain} />
+        <Axis
+          id={getAxisId('discover-histogram-left-axis')}
+          position={Position.Left}
+          title={this.props.chartData.yAxisLabel}
+        />
+        <Axis
+          id={getAxisId('discover-histogram-bottom-axis')}
+          position={Position.Bottom}
+          title={this.props.chartData.xAxisLabel}
+          tickFormat={formatter}
+        />
+        <LineAnnotation
+          annotationId={getAnnotationId('line-annotation')}
+          domainType={AnnotationDomainTypes.XDomain}
+          dataValues={[currentTime]}
+          hideTooltips={true}
+          style={lineAnnotationStyle}
+        />
+        <RectAnnotation
+          dataValues={rectAnnotations}
+          annotationId={getAnnotationId('rect-annotation')}
+        />
+
+        <BarSeries
+          id={getSpecId('discover-histogram')}
+          xScaleType={ScaleType.Time}
+          yScaleType={ScaleType.Linear}
+          xAccessor="x"
+          yAccessors={['y']}
+          data={this.props.chartData.series[0].values}
+        />
+      </Chart>
+    );
+  }
+}

src/legacy/core_plugins/kibana/public/discover/components/histogram/index.js

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import './directive';

src/legacy/core_plugins/kibana/public/discover/controllers/discover.js

@@ -56,6 +56,7 @@ import { VisualizeLoaderProvider } from 'ui/visualize/loader/visualize_loader';
 import { recentlyAccessed } from 'ui/persisted_log';
 import { getDocLink } from 'ui/documentation_links';
 import '../components/fetch_error';
+import '../components/histogram';
 import { getPainlessError } from './get_painless_error';
 import { showShareContextMenu, ShareContextMenuExtensionsRegistryProvider } from 'ui/share';
 import { getUnhashableStatesProvider } from 'ui/state_management/state_hashing';
@@ -737,6 +738,7 @@ function discoverController(
         .resolve(buildVislibDimensions($scope.vis, { timeRange: $scope.timeRange, searchSource: $scope.searchSource }))
         .then(resp => responseHandler(tabifiedData, resp))
         .then(resp => {
+          $scope.histogramData = resp;
           visualizeHandler.render({
             as: 'visualization',
             value: {

src/legacy/core_plugins/kibana/public/discover/index.html

@@ -161,6 +161,13 @@ <h1 tabindex="0" id="kui_local_breadcrumb" class="kuiLocalBreadcrumb" ng-if="opt
 
               </header>
 
+              <discover-histogram
+                style="display: flex; height: 200px"
+                ng-show="vis && rows.length !== 0"
+                chart-data="histogramData"
+                watch-depth="reference"
+              ></discover-histogram>
+
               <div id="discoverHistogram"
                 ng-show="vis && rows.length !== 0"
                 style="display: flex; height: 200px"

src/legacy/ui/ui_render/ui_render_mixin.js

@@ -56,6 +56,7 @@ export function uiRenderMixin(kbnServer, server, config) {
 
   server.exposeStaticDir('/node_modules/@elastic/eui/dist/{path*}', fromRoot('node_modules/@elastic/eui/dist'));
   server.exposeStaticDir('/node_modules/@kbn/ui-framework/dist/{path*}', fromRoot('node_modules/@kbn/ui-framework/dist'));
+  server.exposeStaticDir('/node_modules/@elastic/charts/dist/{path*}', fromRoot('node_modules/@elastic/charts/dist'));
 
   const translationsCache = { translations: null, hash: null };
   server.route({
@@ -125,6 +126,7 @@ export function uiRenderMixin(kbnServer, server, config) {
                 `${basePath}/node_modules/@kbn/ui-framework/dist/kui_light.css`,
               ]
           ),
+          `${basePath}/node_modules/@elastic/charts/dist/style.css`,
           `${regularBundlePath}/${darkMode ? 'dark' : 'light'}_theme.style.css`,
           `${regularBundlePath}/commons.style.css`,
           `${regularBundlePath}/${app.getId()}.style.css`,