Replace flot with elastic-chart in Timelion

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

@@ -48,7 +48,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();
 
@@ -360,6 +359,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/public/components/_timelion_vis.scss

@@ -1,61 +1,20 @@
-.timChart {
+.timChart__legendCaption {
+  color: $euiTextColor;
+  white-space: nowrap;
+  font-weight: $euiFontWeightBold;
+}
+
+.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;
+.chart-top-title {
+  @include euiFontSizeXS;
+  flex: 0;
+  text-align: center;
   font-weight: $euiFontWeightBold;
 }
 

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

@@ -0,0 +1,65 @@
+/*
+ * 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 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 ?? true,
+      },
+      area: {
+        fill: data.color,
+        opacity: !lines.fill || lines.fill < 0 ? 0 : lines.fill,
+        visible: lines.show ?? true,
+      },
+      point: {
+        fill: points.fillColor,
+        opacity: !points.fill || points.fill < 0 ? 1 : points.fill,
+        radius: points.radius || 3,
+        stroke: data.color,
+        strokeWidth: points.lineWidth || 2,
+        visible: Boolean(points.show),
+      },
+    },
+    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,54 @@
+/*
+ * 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 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: {
+      rectBorder: {
+        stroke: data.color,
+        strokeWidth: parseInt(bars.lineWidth || '0', 10),
+        visible: bars.show ?? true,
+      },
+      rect: {
+        fill: data.color,
+        opacity: !bars.fill || bars.fill < 0 ? 1 : bars.fill,
+      },
+    },
+  };
+
+  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}
+    />
+  );
+}