Replace flot with elastic-chart in Timelion

src/plugins/timelion/public/index.scss

@@ -10,9 +10,4 @@
 @import './app';
 @import './base';
 @import './directives/index';
-
-// these styles is needed to be loaded here explicitly if the timelion visualization was not opened in browser
-// 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 './panels/timechart/index';

src/plugins/timelion/public/panels/timechart/_index.scss

@@ -0,0 +1,67 @@
+.timChart {
+  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;
+}
+
+.chart-top-title {
+  @include euiFontSizeXS;
+  flex: 0;
+  text-align: center;
+  font-weight: $euiFontWeightBold;
+}

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

@@ -37,7 +37,6 @@ 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();
 
@@ -349,6 +348,7 @@ export function timechartFn(dependencies: TimelionVisualizationDependencies) {
           if (options.yaxes) {
             options.yaxes.forEach((yaxis: any) => {
               if (yaxis && yaxis.units) {
+                const formatters = tickFormatters(yaxis) as any;
                 yaxis.tickFormatter = formatters[yaxis.units.type];
                 const byteModes = ['bytes', 'bytes/s'];
                 if (byteModes.includes(yaxis.units.type)) {

src/plugins/vis_type_timelion/kibana.json

@@ -4,6 +4,6 @@
   "kibanaVersion": "kibana",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["visualizations", "data", "expressions"],
+  "requiredPlugins": ["visualizations", "data", "expressions", "charts"],
   "requiredBundles": ["kibanaUtils", "kibanaReact", "visDefaultEditor"]
 }

src/plugins/vis_type_timelion/public/components/area_series/index.tsx

@@ -0,0 +1,55 @@
+/*
+ * 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 } from '@elastic/charts';
+
+export function AreaSeriesComponent({ data, index }: { data: any; index: number }) {
+  const lines = data.lines || {};
+  const points = data.points || {};
+  const styles = {
+    areaSeriesStyle: {
+      line: {
+        stroke: data.color,
+        strokeWidth: Number(lines.lineWidth) || 3,
+        visible: lines.show ?? !points.show,
+      },
+      area: {
+        fill: data.color,
+        opacity: lines.fill ?? 0,
+        visible: lines.show ?? !points.show,
+      },
+      point: {
+        fill: points.fillColor,
+        opacity: points.fill * 10 ?? 10,
+        radius: points.radius || 3,
+        stroke: data.color,
+        strokeWidth: points.lineWidth || 2,
+        visible: points.show ?? false,
+        shape: points.symbol,
+      },
+    },
+    curve: lines.steps ? CurveType.CURVE_STEP : CurveType.LINEAR,
+  };
+
+  return (
+    <AreaSeries
+      id={index + data.label}
+      name={data.label}
+      xScaleType={ScaleType.Time}
+      yScaleType={ScaleType.Linear}
+      xAccessor={0}
+      yAccessors={[1]}
+      data={data.data}
+      sortIndex={index}
+      color={data.color}
+      stackAccessors={data.stack ? [0] : undefined}
+      {...styles}
+    />
+  );
+}

src/plugins/vis_type_timelion/public/components/bar_series/index.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 } from '@elastic/charts';
+
+export function BarSeriesComponent({ data, index }: { data: any; index: number }) {
+  const bars = data.bars || {};
+  const styles = {
+    barSeriesStyle: {
+      rect: {
+        fill: data.color,
+        opacity: !bars.fill || bars.fill < 0 ? 1 : bars.fill,
+        widthPixel: bars.lineWidth,
+      },
+    },
+  };
+
+  return (
+    <BarSeries
+      id={index + data.label}
+      name={data.label}
+      xScaleType={ScaleType.Time}
+      yScaleType={ScaleType.Linear}
+      xAccessor={0}
+      yAccessors={[1]}
+      data={data.data}
+      sortIndex={index}
+      color={data.color}
+      stackAccessors={data.stack ? [0] : undefined}
+      {...styles}
+    />
+  );
+}

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

@@ -1,60 +1,13 @@
-.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;
+.timelionChart__topTitle {
+  @include euiFontSizeXS;
+  flex: 0;
+  text-align: center;
   font-weight: $euiFontWeightBold;
 }