Replace line, area and bar charts with elastic charts

config/kibana.yml

@@ -1,6 +1,8 @@
 # Kibana is served by a back end server. This setting specifies the port to use.
 #server.port: 5601
 
+vis_type_xy.enabled: true
+
 # Specifies the address to which the Kibana server will bind. IP addresses and host names are both valid values.
 # The default is 'localhost', which usually means remote machines will not be able to connect.
 # To allow connections from remote users, set this parameter to a non-loopback address.

package.json

@@ -226,7 +226,7 @@
     "@babel/parser": "^7.11.2",
     "@babel/types": "^7.11.0",
     "@elastic/apm-rum": "^5.5.0",
-    "@elastic/charts": "21.1.2",
+    "@elastic/charts": "21.3.2",
     "@elastic/ems-client": "7.9.3",
     "@elastic/eslint-config-kibana": "0.15.0",
     "@elastic/eslint-plugin-eui": "0.0.2",

packages/kbn-ui-shared-deps/package.json

@@ -9,7 +9,7 @@
     "kbn:watch": "node scripts/build --dev --watch"
   },
   "dependencies": {
-    "@elastic/charts": "21.1.2",
+    "@elastic/charts": "21.3.2",
     "@elastic/eui": "29.0.0",
     "@elastic/numeral": "^2.5.0",
     "@kbn/i18n": "1.0.0",

src/plugins/charts/public/services/colors/colors.ts

@@ -48,7 +48,7 @@ export class ColorsService {
   }
 
   createColorLookupFunction(
-    arrayOfStringsOrNumbers?: any,
+    arrayOfStringsOrNumbers?: Array<string | number>,
     colorMapping: Partial<Record<string, string>> = {}
   ) {
     if (!Array.isArray(arrayOfStringsOrNumbers)) {
@@ -67,7 +67,7 @@ export class ColorsService {
 
     this.mappedColors.mapKeys(arrayOfStringsOrNumbers);
 
-    return (value: string) => {
+    return (value: string | number) => {
       return colorMapping[value] || this.mappedColors.get(value);
     };
   }

src/plugins/charts/public/services/colors/mapped_colors.ts

@@ -45,10 +45,6 @@ export class MappedColors {
     return _.mapValues(this.uiSettings.get(COLOR_MAPPING_SETTING), standardizeColor);
   }
 
-  public get oldMap(): any {
-    return this._oldMap;
-  }
-
   public get mapping(): any {
     return this._mapping;
   }
@@ -57,16 +53,6 @@ export class MappedColors {
     return this.getConfigColorMapping()[key as any] || this._mapping[key];
   }
 
-  flush() {
-    this._oldMap = _.clone(this._mapping);
-    this._mapping = {};
-  }
-
-  purge() {
-    this._oldMap = {};
-    this._mapping = {};
-  }
-
   mapKeys(keys: Array<string | number>) {
     const configMapping = this.getConfigColorMapping();
     const configColors = _.values(configMapping);

src/plugins/charts/public/static/components/_legend_toggle.scss

@@ -0,0 +1,30 @@
+.legend__toggle {
+  border-radius: $euiBorderRadius;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  padding: $euiSizeXS;
+  background-color: $euiColorEmptyShade;
+  transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance, background-color $euiAnimSpeedFast $euiAnimSlightResistance $euiAnimSpeedExtraSlow;
+  z-index: 1;
+  margin: $euiSizeXS;
+
+  &:focus {
+    @include euiFocusRing();
+  }
+
+  &--isOpen {
+    background-color: transparentize($euiColorDarkestShade, .9);
+    opacity: 1;
+  }
+
+  &--position-left,
+  &--position-bottom {
+    left: auto;
+    bottom: auto;
+    right: 0;
+    top: 0;
+  }
+}
+

src/plugins/charts/public/static/components/basic_options.tsx

@@ -18,15 +18,18 @@
  */
 
 import React from 'react';
+
 import { i18n } from '@kbn/i18n';
+import { Position } from '@elastic/charts';
+
+import { VisOptionsProps } from '../../../../vis_default_editor/public';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { SwitchOption } from './switch';
 import { SelectOption } from './select';
 
 interface BasicOptionsParams {
   addTooltip: boolean;
-  legendPosition: string;
+  legendPosition: Position;
 }
 
 function BasicOptions<VisParams extends BasicOptionsParams>({

src/plugins/charts/public/static/components/collections.ts

@@ -18,17 +18,22 @@
  */
 
 import { $Values } from '@kbn/utility-types';
+import { i18n } from '@kbn/i18n';
 
-export const ColorModes = Object.freeze({
-  BACKGROUND: 'Background' as 'Background',
-  LABELS: 'Labels' as 'Labels',
-  NONE: 'None' as 'None',
+export const ColorMode = Object.freeze({
+  Background: 'Background' as 'Background',
+  Labels: 'Labels' as 'Labels',
+  None: 'None' as 'None',
 });
-export type ColorModes = $Values<typeof ColorModes>;
+export type ColorMode = $Values<typeof ColorMode>;
 
-export const Rotates = Object.freeze({
-  HORIZONTAL: 0,
-  VERTICAL: 90,
-  ANGLED: 75,
+export const LabelRotation = Object.freeze({
+  Horizontal: 0,
+  Vertical: 90,
+  Angled: 75,
+});
+export type LabelRotation = $Values<typeof LabelRotation>;
+
+export const defaultCountLabel = i18n.translate('charts.countText', {
+  defaultMessage: 'Count',
 });
-export type Rotates = $Values<typeof Rotates>;

src/plugins/charts/public/static/components/color_picker.tsx

@@ -0,0 +1,114 @@
+/*
+ * 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 classNames from 'classnames';
+import React from 'react';
+
+import { EuiIcon } from '@elastic/eui';
+
+export const legendColors: string[] = [
+  '#3F6833',
+  '#967302',
+  '#2F575E',
+  '#99440A',
+  '#58140C',
+  '#052B51',
+  '#511749',
+  '#3F2B5B',
+  '#508642',
+  '#CCA300',
+  '#447EBC',
+  '#C15C17',
+  '#890F02',
+  '#0A437C',
+  '#6D1F62',
+  '#584477',
+  '#629E51',
+  '#E5AC0E',
+  '#64B0C8',
+  '#E0752D',
+  '#BF1B00',
+  '#0A50A1',
+  '#962D82',
+  '#614D93',
+  '#7EB26D',
+  '#EAB839',
+  '#6ED0E0',
+  '#EF843C',
+  '#E24D42',
+  '#1F78C1',
+  '#BA43A9',
+  '#705DA0',
+  '#9AC48A',
+  '#F2C96D',
+  '#65C5DB',
+  '#F9934E',
+  '#EA6460',
+  '#5195CE',
+  '#D683CE',
+  '#806EB7',
+  '#B7DBAB',
+  '#F4D598',
+  '#70DBED',
+  '#F9BA8F',
+  '#F29191',
+  '#82B5D8',
+  '#E5A8E2',
+  '#AEA2E0',
+  '#E0F9D7',
+  '#FCEACA',
+  '#CFFAFF',
+  '#F9E2D2',
+  '#FCE2DE',
+  '#BADFF4',
+  '#F9D9F9',
+  '#DEDAF7',
+];
+
+interface ColorPickerProps {
+  onChange: (color: string) => void;
+  color: string;
+}
+
+export const ColorPicker = ({ onChange, color: selectedColor }: ColorPickerProps) => (
+  <div className="visLegend__valueDetails">
+    <div className="visLegend__valueColorPicker" role="listbox">
+      {legendColors.map((color) => (
+        <EuiIcon
+          role="option"
+          tabIndex={0}
+          type="dot"
+          size="l"
+          color={selectedColor}
+          key={color}
+          aria-label={color}
+          aria-selected={color === selectedColor}
+          onClick={() => onChange(color)}
+          onKeyPress={() => onChange(color)}
+          className={classNames('visLegend__valueColorPickerDot', {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            'visLegend__valueColorPickerDot-isSelected': color === selectedColor,
+          })}
+          style={{ color }}
+          data-test-subj={`legendSelectColor-${color}`}
+        />
+      ))}
+    </div>
+  </div>
+);

src/plugins/charts/public/static/components/current_time.tsx

@@ -0,0 +1,67 @@
+/*
+ * 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, { Moment } from 'moment';
+import React, { FC, useMemo } from 'react';
+
+import { LineAnnotation, AnnotationDomainTypes, LineAnnotationStyle } from '@elastic/charts';
+import lightEuiTheme from '@elastic/eui/dist/eui_theme_light.json';
+import darkEuiTheme from '@elastic/eui/dist/eui_theme_dark.json';
+
+interface CurrentTimeProps {
+  isDarkMode: boolean;
+  domainEnd?: number | Moment;
+}
+
+/**
+ * Render current time line annotation on @elastic/charts `Chart`
+ */
+export const CurrentTime: FC<CurrentTimeProps> = ({ isDarkMode, domainEnd }) => {
+  const lineAnnotationStyle = useMemo<Partial<LineAnnotationStyle>>(
+    () => ({
+      line: {
+        strokeWidth: 2,
+        stroke: isDarkMode ? darkEuiTheme.euiColorDanger : lightEuiTheme.euiColorDanger,
+        opacity: 0.7,
+      },
+    }),
+    [isDarkMode]
+  );
+
+  // Domain end of 'now' will be milliseconds behind current time, so we extend time by 1 minute and check if
+  // the annotation is within this range; if so, the line annotation uses the domainEnd as its value
+  const now = moment();
+  const isAnnotationAtEdge = domainEnd
+    ? moment(domainEnd).add(1, 'm').isAfter(now) && now.isAfter(domainEnd)
+    : false;
+  const lineAnnotationData = [
+    {
+      dataValue: isAnnotationAtEdge ? domainEnd : now.valueOf(),
+    },
+  ];
+
+  return (
+    <LineAnnotation
+      id="__current-time__"
+      hideTooltips
+      domainType={AnnotationDomainTypes.XDomain}
+      dataValues={lineAnnotationData}
+      style={lineAnnotationStyle}
+    />
+  );
+};