Replace flot with elastic-chart in Timelion

docs/management/advanced-options.asciidoc

@@ -514,6 +514,10 @@ Shows the Timelion tutorial to users when they first open the Timelion app.
 Used for calculating automatic intervals in visualizations, this is the number
 of buckets to try to represent.
 
+[[timelion-legacyChartsLibrary]]`timelion:legacyChartsLibrary`::
+Enables the legacy charts library for timelion charts in Visualize.
+
+
 [float]
 [[kibana-visualization-settings]]
 ==== Visualization

src/core/public/doc_links/doc_links_service.ts

@@ -228,6 +228,7 @@ export class DocLinksService {
           indexManagement: `${ELASTICSEARCH_DOCS}index-mgmt.html`,
           kibanaSearchSettings: `${KIBANA_DOCS}advanced-options.html#kibana-search-settings`,
           visualizationSettings: `${KIBANA_DOCS}advanced-options.html#kibana-visualization-settings`,
+          timelionSettings: `${KIBANA_DOCS}advanced-options.html#kibana-timelion-settings`,
         },
         ml: {
           guide: `${ELASTIC_WEBSITE_URL}guide/en/machine-learning/${DOC_LINK_VERSION}/index.html`,

src/plugins/kibana_usage_collection/server/collectors/management/schema.ts

@@ -80,6 +80,10 @@ export const stackManagementSchema: MakeSchemaFrom<UsageStats> = {
     type: 'text',
     _meta: { description: 'Non-default value of setting.' },
   },
+  'timelion:legacyChartsLibrary': {
+    type: 'boolean',
+    _meta: { description: 'Non-default value of setting.' },
+  },
   'timelion:target_buckets': {
     type: 'long',
     _meta: { description: 'Non-default value of setting.' },

src/plugins/kibana_usage_collection/server/collectors/management/types.ts

@@ -45,6 +45,7 @@ export interface UsageStats {
   'visualization:tileMap:maxPrecision': number;
   'csv:separator': string;
   'visualization:tileMap:WMSdefaults': string;
+  'timelion:legacyChartsLibrary': boolean;
   'timelion:target_buckets': number;
   'timelion:max_buckets': number;
   'timelion:es.timefield': string;

src/plugins/telemetry/schema/oss_plugins.json

@@ -7258,6 +7258,12 @@
             "description": "Non-default value of setting."
           }
         },
+        "timelion:legacyChartsLibrary": {
+          "type": "boolean",
+          "_meta": {
+            "description": "Non-default value of setting."
+          }
+        },
         "timelion:target_buckets": {
           "type": "long",
           "_meta": {

src/plugins/timelion/public/app.js

@@ -21,7 +21,7 @@ import {
   registerListenEventListener,
   watchMultiDecorator,
 } from '../../kibana_legacy/public';
-import { getTimezone } from '../../vis_type_timelion/public';
+import { _LEGACY_ as visTypeTimelion } from '../../vis_type_timelion/public';
 import { initCellsDirective } from './directives/cells/cells';
 import { initFullscreenDirective } from './directives/fullscreen/fullscreen';
 import { initFixedElementDirective } from './directives/fixed_element';
@@ -144,7 +144,7 @@ export function initTimelionApp(app, deps) {
     $scope.updatedSheets = [];
 
     const savedVisualizations = deps.plugins.visualizations.savedVisualizationsLoader;
-    const timezone = getTimezone(deps.core.uiSettings);
+    const timezone = visTypeTimelion.getTimezone(deps.core.uiSettings);
 
     const defaultExpression = '.es(*)';
 

src/plugins/timelion/public/directives/timelion_expression_input_helpers.js

@@ -7,7 +7,7 @@
  */
 
 import _ from 'lodash';
-import { parseTimelionExpressionAsync } from '../../../vis_type_timelion/public';
+import { _LEGACY_ as visTypeTimelion } from '../../../vis_type_timelion/public';
 
 export const SUGGESTION_TYPE = {
   ARGUMENTS: 'arguments',
@@ -180,7 +180,7 @@ async function extractSuggestionsFromParsedResult(
 
 export async function suggest(expression, functionList, cursorPosition, argValueSuggestions) {
   try {
-    const result = await parseTimelionExpressionAsync(expression);
+    const result = await visTypeTimelion.parseTimelionExpressionAsync(expression);
     return await extractSuggestionsFromParsedResult(
       result,
       cursorPosition,

src/plugins/timelion/public/index.scss

@@ -15,4 +15,4 @@
 // styles for timelion visualization are lazy loaded only while a vis is opened
 // this will duplicate styles only if both Timelion app and timelion visualization are loaded
 // could be left here as it is since the Timelion app is deprecated
-@import '../../vis_type_timelion/public/components/timelion_vis.scss';
+@import '../../vis_type_timelion/public/legacy/timelion_vis.scss';

src/plugins/timelion/public/panels/timechart/schema.ts

@@ -11,13 +11,7 @@ import $ from 'jquery';
 import moment from 'moment-timezone';
 // @ts-ignore
 import observeResize from '../../lib/observe_resize';
-import {
-  calculateInterval,
-  DEFAULT_TIME_FORMAT,
-  tickFormatters,
-  xaxisFormatterProvider,
-  generateTicksProvider,
-} from '../../../../vis_type_timelion/public';
+import { _LEGACY_ as visTypeTimelion } from '../../../../vis_type_timelion/public';
 import { TimelionVisualizationDependencies } from '../../application';
 
 const DEBOUNCE_DELAY = 50;
@@ -37,9 +31,9 @@ export function timechartFn(dependencies: TimelionVisualizationDependencies) {
       help: 'Draw a timeseries chart',
       render($scope: any, $elem: any) {
         const template = '<div class="chart-top-title"></div><div class="chart-canvas"></div>';
-        const formatters = tickFormatters() as any;
-        const getxAxisFormatter = xaxisFormatterProvider(uiSettings);
-        const generateTicks = generateTicksProvider();
+        const formatters = visTypeTimelion.tickFormatters() as any;
+        const getxAxisFormatter = visTypeTimelion.xaxisFormatterProvider(uiSettings);
+        const generateTicks = visTypeTimelion.generateTicksProvider();
 
         // TODO: I wonder if we should supply our own moment that sets this every time?
         // could just use angular's injection to provide a moment service?
@@ -226,7 +220,7 @@ export function timechartFn(dependencies: TimelionVisualizationDependencies) {
           if (legendCaption) {
             legendCaption.text(
               moment(pos.x).format(
-                _.get(dataset, '[0]._global.legend.timeFormat', DEFAULT_TIME_FORMAT)
+                _.get(dataset, '[0]._global.legend.timeFormat', visTypeTimelion.DEFAULT_TIME_FORMAT)
               )
             );
           }
@@ -289,7 +283,7 @@ export function timechartFn(dependencies: TimelionVisualizationDependencies) {
 
           // Get the X-axis tick format
           const time = timefilter.timefilter.getBounds() as any;
-          const interval = calculateInterval(
+          const interval = visTypeTimelion.calculateInterval(
             time.min.valueOf(),
             time.max.valueOf(),
             uiSettings.get('timelion:target_buckets') || 200,

src/plugins/vis_type_timelion/common/constants.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const UI_SETTINGS = {
+  LEGACY_CHARTS_LIBRARY: 'timelion:legacyChartsLibrary',
+  ES_TIMEFIELD: 'timelion:es.timefield',
+  DEFAULT_INDEX: 'timelion:es.default_index',
+  TARGET_BUCKETS: 'timelion:target_buckets',
+  MAX_BUCKETS: 'timelion:max_buckets',
+  MIN_INTERVAL: 'timelion:min_interval',
+  GRAPHITE_URL: 'timelion:graphite.url',
+  QUANDL_KEY: 'timelion:quandl.key',
+};

src/plugins/vis_type_timelion/common/vis_data.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export interface VisSeries {
+  yaxis?: number;
+  label: string;
+  lines?: {
+    show?: boolean;
+    lineWidth?: number;
+    fill?: number;
+    steps?: number;
+  };
+  points?: {
+    show?: boolean;
+    symbol?: 'cross' | 'x' | 'circle' | 'square' | 'diamond' | 'plus' | 'triangle';
+    fillColor?: string;
+    fill?: number;
+    radius?: number;
+    lineWidth?: number;
+  };
+  bars: {
+    lineWidth?: number;
+    fill?: number;
+  };
+  color?: string;
+  data: Array<Array<number | null>>;
+  stack: boolean;
+}

src/plugins/vis_type_timelion/kibana.json

@@ -4,7 +4,7 @@
   "kibanaVersion": "kibana",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["visualizations", "data", "expressions"],
+  "requiredPlugins": ["visualizations", "data", "expressions", "charts"],
   "requiredBundles": ["kibanaUtils", "kibanaReact", "visDefaultEditor"],
   "owner": {
     "name": "Kibana App",

src/plugins/vis_type_timelion/public/components/series/area.tsx

@@ -0,0 +1,62 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { AreaSeries, ScaleType, CurveType, AreaSeriesStyle, PointShape } from '@elastic/charts';
+import type { VisSeries } from '../../../common/vis_data';
+
+interface AreaSeriesComponentProps {
+  index: number;
+  visData: VisSeries;
+  groupId: string;
+}
+
+const isShowLines = (lines: VisSeries['lines'], points: VisSeries['points']) =>
+  lines?.show ? true : points?.show ? false : true;
+
+const getAreaSeriesStyle = ({ color, lines, points }: AreaSeriesComponentProps['visData']) =>
+  ({
+    line: {
+      opacity: isShowLines(lines, points) ? 1 : 0,
+      stroke: color,
+      strokeWidth: lines?.lineWidth !== undefined ? Number(lines.lineWidth) : 3,
+      visible: isShowLines(lines, points),
+    },
+    area: {
+      fill: color,
+      opacity: lines?.fill ?? 0,
+      visible: lines?.show ?? points?.show ?? true,
+    },
+    point: {
+      fill: points?.fillColor ?? color,
+      opacity: points?.lineWidth !== undefined ? (points.fill || 1) * 10 : 10,
+      radius: points?.radius ?? 3,
+      stroke: color,
+      strokeWidth: points?.lineWidth ?? 2,
+      visible: points?.show ?? false,
+      shape: points?.symbol === 'cross' ? PointShape.X : points?.symbol,
+    },
+    curve: lines?.steps ? CurveType.CURVE_STEP : CurveType.LINEAR,
+  } as AreaSeriesStyle);
+
+export const AreaSeriesComponent = ({ index, groupId, visData }: AreaSeriesComponentProps) => (
+  <AreaSeries
+    id={index + visData.label}
+    groupId={groupId}
+    name={visData.label}
+    xScaleType={ScaleType.Time}
+    yScaleType={ScaleType.Linear}
+    xAccessor={0}
+    yAccessors={[1]}
+    data={visData.data}
+    sortIndex={index}
+    color={visData.color}
+    stackAccessors={visData.stack ? [0] : undefined}
+    areaSeriesStyle={getAreaSeriesStyle(visData)}
+  />
+);

src/plugins/vis_type_timelion/public/components/series/bar.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { BarSeries, ScaleType, BarSeriesStyle } from '@elastic/charts';
+import type { VisSeries } from '../../../common/vis_data';
+
+interface BarSeriesComponentProps {
+  index: number;
+  visData: VisSeries;
+  groupId: string;
+}
+
+const getBarSeriesStyle = ({ color, bars }: BarSeriesComponentProps['visData']) => {
+  let opacity = bars.fill ?? 1;
+
+  if (opacity < 0) {
+    opacity = 0;
+  } else if (opacity > 1) {
+    opacity = 1;
+  }
+
+  return {
+    rectBorder: {
+      stroke: color,
+      strokeWidth: Math.max(1, bars.lineWidth ? Math.ceil(bars.lineWidth / 2) : 1),
+      visible: true,
+    },
+    rect: {
+      fill: color,
+      opacity,
+      widthPixel: 1,
+    },
+  } as BarSeriesStyle;
+};
+
+export const BarSeriesComponent = ({ index, groupId, visData }: BarSeriesComponentProps) => (
+  <BarSeries
+    id={index + visData.label}
+    groupId={groupId}
+    name={visData.label}
+    xScaleType={ScaleType.Time}
+    yScaleType={ScaleType.Linear}
+    xAccessor={0}
+    yAccessors={[1]}
+    data={visData.data}
+    sortIndex={index}
+    enableHistogramMode={false}
+    color={visData.color}
+    stackAccessors={visData.stack ? [0] : undefined}
+    barSeriesStyle={getBarSeriesStyle(visData)}
+  />
+);

src/plugins/vis_type_timelion/public/components/series/index.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { BarSeriesComponent } from './bar';
+export { AreaSeriesComponent } from './area';

src/plugins/vis_type_timelion/public/components/timelion_vis.scss

@@ -1,60 +1,10 @@
-.timChart {
+.timelionChart {
   height: 100%;
   width: 100%;
   display: flex;
   flex-direction: column;
-
-  // Custom Jquery FLOT / schema selectors
-  // Cannot change at the moment
-
-  .chart-top-title {
-    @include euiFontSizeXS;
-    flex: 0;
-    text-align: center;
-    font-weight: $euiFontWeightBold;
-  }
-
-  .chart-canvas {
-    min-width: 100%;
-    flex: 1;
-    overflow: hidden;
-  }
-
-  .legendLabel {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow-x: hidden;
-    line-height: normal;
-  }
-
-  .legendColorBox {
-    vertical-align: middle;
-  }
-
-  .ngLegendValue {
-    color: $euiTextColor;
-    cursor: pointer;
-
-    &:focus,
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  .ngLegendValueNumber {
-    margin-left: $euiSizeXS;
-    margin-right: $euiSizeXS;
-    font-weight: $euiFontWeightBold;
-  }
-
-  .flot-tick-label {
-    font-size: $euiFontSizeXS;
-    color: $euiColorDarkShade;
-  }
 }
 
-.timChart__legendCaption {
-  color: $euiTextColor;
-  white-space: nowrap;
-  font-weight: $euiFontWeightBold;
+.timelionChart__topTitle {
+  text-align: center;
 }