From 9114175db28bd5b672c103e6fe564e78b9acff46 Mon Sep 17 00:00:00 2001
From: "JUST.in DO IT" <justin.park@airbnb.com>
Date: Tue, 9 Aug 2022 01:12:00 -0700
Subject: [PATCH] fix(plugin-echart-timeseries: legend trancated on show extra
 controls (#21017)

---
 .../AreaTimeseries/Stories.tsx                |  88 ++
 .../AreaTimeseries/data.ts                    | 771 ++++++++++++++++++
 .../src/Timeseries/EchartsTimeseries.tsx      |  14 +-
 3 files changed, 870 insertions(+), 3 deletions(-)
 create mode 100644 superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/AreaTimeseries/Stories.tsx
 create mode 100644 superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/AreaTimeseries/data.ts

diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/AreaTimeseries/Stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/AreaTimeseries/Stories.tsx
new file mode 100644
index 000000000..4cffeabd3
--- /dev/null
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/AreaTimeseries/Stories.tsx
@@ -0,0 +1,88 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF 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 { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import { boolean, number, select, withKnobs } from '@storybook/addon-knobs';
+import {
+  EchartsAreaChartPlugin,
+  TimeseriesTransformProps,
+} from '@superset-ui/plugin-chart-echarts';
+import data from './data';
+import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
+
+new EchartsAreaChartPlugin().configure({ key: 'echarts_area' }).register();
+
+getChartTransformPropsRegistry().registerValue(
+  'echarts_area',
+  TimeseriesTransformProps,
+);
+
+export default {
+  title: 'Chart Plugins/plugin-chart-echarts/Timeseries Area',
+  decorators: [withKnobs, withResizableChartDemo],
+};
+
+export const Timeseries = ({ width, height }) => {
+  const forecastEnabled = boolean('Enable forecast', true);
+  const queryData = data
+    .map(row =>
+      forecastEnabled
+        ? row
+        : {
+            // eslint-disable-next-line no-underscore-dangle
+            __timestamp: row.__timestamp,
+            Boston: row.Boston,
+            California: row.California,
+            WestTexNewMexico: row.WestTexNewMexico,
+          },
+    )
+    .filter(row => forecastEnabled || !!row.Boston);
+  return (
+    <SuperChart
+      chartType="echarts_area"
+      width={width}
+      height={height}
+      queriesData={[{ data: queryData }]}
+      formData={{
+        area: true,
+        contributionMode: undefined,
+        forecastEnabled,
+        colorScheme: 'supersetColors',
+        seriesType: select(
+          'Line type',
+          ['line', 'scatter', 'smooth', 'bar', 'start', 'middle', 'end'],
+          'line',
+        ),
+        show_extra_controls: boolean('Extra Controls', false),
+        logAxis: boolean('Log axis', false),
+        yAxisFormat: 'SMART_NUMBER',
+        stack: boolean('Stack', false),
+        showValue: boolean('Show Values', false),
+        onlyTotal: boolean('Only Total', false),
+        percentageThreshold: number('Percentage Threshold', 0),
+        markerEnabled: boolean('Enable markers', false),
+        markerSize: number('Marker Size', 6),
+        minorSplitLine: boolean('Minor splitline', false),
+        opacity: number('Opacity', 0.2),
+        zoomable: boolean('Zoomable', false),
+      }}
+    />
+  );
+};
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/AreaTimeseries/data.ts b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/AreaTimeseries/data.ts
new file mode 100644
index 000000000..ac6b5d0a5
--- /dev/null
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/AreaTimeseries/data.ts
@@ -0,0 +1,771 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF 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.
+ */
+
+export default [
+  {
+    __timestamp: 1419811200000,
+    Boston__yhat: 1.5348466045278903,
+    Boston__yhat_lower: 1.4108696830290821,
+    Boston__yhat_upper: 1.65406759478647,
+    Boston: 1.425,
+    California__yhat: 1.1428578093572317,
+    California__yhat_lower: 0.9954265301846809,
+    California__yhat_upper: 1.285336837473888,
+    California: 1.085,
+    WestTexNewMexico__yhat: 1.2189159706952082,
+    WestTexNewMexico__yhat_lower: 1.04104376708674,
+    WestTexNewMexico__yhat_upper: 1.3729774938431487,
+    WestTexNewMexico: 1.195,
+  },
+  {
+    __timestamp: 1420416000000,
+    Boston__yhat: 1.5183086928032201,
+    Boston__yhat_lower: 1.4051623626305831,
+    Boston__yhat_upper: 1.6373864508998999,
+    Boston: 1.52,
+    California__yhat: 1.1473836815806109,
+    California__yhat_lower: 0.9896908958316125,
+    California__yhat_upper: 1.3074486619072236,
+    California: 1.01,
+    WestTexNewMexico__yhat: 1.2101876636102695,
+    WestTexNewMexico__yhat_lower: 1.0531768381015862,
+    WestTexNewMexico__yhat_upper: 1.3798811980337082,
+    WestTexNewMexico: 1.305,
+  },
+  {
+    __timestamp: 1421020800000,
+    Boston__yhat: 1.5008792239446107,
+    Boston__yhat_lower: 1.3900408734935294,
+    Boston__yhat_upper: 1.6209717523914786,
+    Boston: 1.615,
+    California__yhat: 1.1257411477192287,
+    California__yhat_lower: 0.9647179126679808,
+    California__yhat_upper: 1.2856214776337003,
+    California: 1.13,
+    WestTexNewMexico__yhat: 1.211700721257458,
+    WestTexNewMexico__yhat_lower: 1.0512509758817796,
+    WestTexNewMexico__yhat_upper: 1.3838299538827643,
+    WestTexNewMexico: 1.255,
+  },
+  {
+    __timestamp: 1421625600000,
+    Boston__yhat: 1.493895763520492,
+    Boston__yhat_lower: 1.3819463100452443,
+    Boston__yhat_upper: 1.614560073797367,
+    Boston: 1.59,
+    California__yhat: 1.0914497359848156,
+    California__yhat_lower: 0.9309999613012108,
+    California__yhat_upper: 1.2413000315404008,
+    California: 1.18,
+    WestTexNewMexico__yhat: 1.208627046579019,
+    WestTexNewMexico__yhat_lower: 1.0443728779662684,
+    WestTexNewMexico__yhat_upper: 1.3675637830491076,
+    WestTexNewMexico: 1.215,
+  },
+  {
+    __timestamp: 1422230400000,
+    Boston__yhat: 1.5016078116606606,
+    Boston__yhat_lower: 1.3867245804741557,
+    Boston__yhat_upper: 1.614234955854214,
+    Boston: 1.5,
+    California__yhat: 1.0697859033873383,
+    California__yhat_lower: 0.9250294445931526,
+    California__yhat_upper: 1.227180419756037,
+    California: 0.98,
+    WestTexNewMexico__yhat: 1.1903524073209464,
+    WestTexNewMexico__yhat_lower: 1.0158621722285877,
+    WestTexNewMexico__yhat_upper: 1.3552685059028697,
+    WestTexNewMexico: 1.24,
+  },
+  {
+    __timestamp: 1422835200000,
+    Boston__yhat: 1.5159923617934186,
+    Boston__yhat_lower: 1.3970137282601371,
+    Boston__yhat_upper: 1.6308844178549995,
+    Boston: 1.475,
+    California__yhat: 1.0746946690720922,
+    California__yhat_lower: 0.9113788241318873,
+    California__yhat_upper: 1.2273689220316724,
+    California: 1.13,
+    WestTexNewMexico__yhat: 1.162418169193016,
+    WestTexNewMexico__yhat_lower: 0.984399666972796,
+    WestTexNewMexico__yhat_upper: 1.3286127921414361,
+    WestTexNewMexico: 1.19,
+  },
+  {
+    __timestamp: 1423440000000,
+    Boston__yhat: 1.525604106275286,
+    Boston__yhat_lower: 1.4091552054110317,
+    Boston__yhat_upper: 1.6398544651033324,
+    Boston: 1.555,
+    California__yhat: 1.0983484232374483,
+    California__yhat_lower: 0.9499667479813172,
+    California__yhat_upper: 1.2604622036877084,
+    California: 1.24,
+    WestTexNewMexico__yhat: 1.1407497573494716,
+    WestTexNewMexico__yhat_lower: 0.9682090338277108,
+    WestTexNewMexico__yhat_upper: 1.3110751375528853,
+    WestTexNewMexico: 1.24,
+  },
+  {
+    __timestamp: 1424044800000,
+    Boston__yhat: 1.5285159859188788,
+    Boston__yhat_lower: 1.4151325345500827,
+    Boston__yhat_upper: 1.63898403722097,
+    Boston: 1.485,
+    California__yhat: 1.1215587530856748,
+    California__yhat_lower: 0.9680608180357422,
+    California__yhat_upper: 1.282442960930767,
+    California: 1.185,
+    WestTexNewMexico__yhat: 1.1360040254613264,
+    WestTexNewMexico__yhat_lower: 0.963307750313048,
+    WestTexNewMexico__yhat_upper: 1.2986544671046583,
+    WestTexNewMexico: 1.28,
+  },
+  {
+    __timestamp: 1424649600000,
+    Boston__yhat: 1.5334822003771225,
+    Boston__yhat_lower: 1.4176345632105387,
+    Boston__yhat_upper: 1.6496071238192505,
+    Boston: 1.48,
+    California__yhat: 1.1336412205342397,
+    California__yhat_lower: 0.9743289540694136,
+    California__yhat_upper: 1.2898768461219847,
+    California: 0.995,
+    WestTexNewMexico__yhat: 1.1446754348884136,
+    WestTexNewMexico__yhat_lower: 0.986235125109336,
+    WestTexNewMexico__yhat_upper: 1.307986287217312,
+    WestTexNewMexico: 1.24,
+  },
+  {
+    __timestamp: 1425254400000,
+    Boston__yhat: 1.547848654545939,
+    Boston__yhat_lower: 1.4328177356803633,
+    Boston__yhat_upper: 1.673661661344583,
+    Boston: 1.54,
+    California__yhat: 1.1421270972002817,
+    California__yhat_lower: 0.9880212170643778,
+    California__yhat_upper: 1.298074311825913,
+    California: 1.22,
+    WestTexNewMexico__yhat: 1.1538926041448758,
+    WestTexNewMexico__yhat_lower: 1.0019767923899103,
+    WestTexNewMexico__yhat_upper: 1.3221026377048228,
+    WestTexNewMexico: 1.16,
+  },
+  {
+    __timestamp: 1425859200000,
+    Boston__yhat: 1.5675203083502125,
+    Boston__yhat_lower: 1.4543946077807537,
+    Boston__yhat_upper: 1.6864674764386627,
+    Boston: 1.62,
+    California__yhat: 1.1632572393543539,
+    California__yhat_lower: 0.9970086508003331,
+    California__yhat_upper: 1.3209871054747437,
+    California: 1.29,
+    WestTexNewMexico__yhat: 1.1530029605889838,
+    WestTexNewMexico__yhat_lower: 0.9729319698723828,
+    WestTexNewMexico__yhat_upper: 1.3054475293729533,
+    WestTexNewMexico: 1.285,
+  },
+  {
+    __timestamp: 1426464000000,
+    Boston__yhat: 1.581607931619551,
+    Boston__yhat_lower: 1.4723154031359578,
+    Boston__yhat_upper: 1.7069606387126863,
+    Boston: 1.56,
+    California__yhat: 1.2030769562029524,
+    California__yhat_lower: 1.04933598570031,
+    California__yhat_upper: 1.3591487662881023,
+    California: 1.18,
+    WestTexNewMexico__yhat: 1.1414541767825306,
+    WestTexNewMexico__yhat_lower: 0.9717441065782068,
+    WestTexNewMexico__yhat_upper: 1.312661843170456,
+    WestTexNewMexico: 1.345,
+  },
+  {
+    __timestamp: 1427068800000,
+    Boston__yhat: 1.5853316979769883,
+    Boston__yhat_lower: 1.4708451743058149,
+    Boston__yhat_upper: 1.7117728705026014,
+    Boston: 1.585,
+    California__yhat: 1.2479444775684796,
+    California__yhat_lower: 1.0837411336417548,
+    California__yhat_upper: 1.3998890149965297,
+    California: 1.315,
+    WestTexNewMexico__yhat: 1.1283059431234486,
+    WestTexNewMexico__yhat_lower: 0.9778619797162577,
+    WestTexNewMexico__yhat_upper: 1.2954488963192434,
+    WestTexNewMexico: 1.255,
+  },
+  {
+    __timestamp: 1427673600000,
+    Boston__yhat: 1.5841383828593085,
+    Boston__yhat_lower: 1.4654575751911438,
+    Boston__yhat_upper: 1.6946343035808373,
+    Boston: 1.59,
+    California__yhat: 1.2739437360014318,
+    California__yhat_lower: 1.1100282969104833,
+    California__yhat_upper: 1.428117476226516,
+    California: 1.32,
+    WestTexNewMexico__yhat: 1.1249371539002126,
+    WestTexNewMexico__yhat_lower: 0.9695967792994402,
+    WestTexNewMexico__yhat_upper: 1.287869970682996,
+    WestTexNewMexico: 1.28,
+  },
+  {
+    __timestamp: 1428278400000,
+    Boston__yhat: 1.5839751550296846,
+    Boston__yhat_lower: 1.4658964846078435,
+    Boston__yhat_upper: 1.710402200124056,
+    Boston: 1.56,
+    California__yhat: 1.2665706718822929,
+    California__yhat_lower: 1.1158333765771138,
+    California__yhat_upper: 1.4320483959058965,
+    California: 1.28,
+    WestTexNewMexico__yhat: 1.1355965911503207,
+    WestTexNewMexico__yhat_lower: 0.964066677858961,
+    WestTexNewMexico__yhat_upper: 1.3022575299852956,
+    WestTexNewMexico: 1.21,
+  },
+  {
+    __timestamp: 1428883200000,
+    Boston__yhat: 1.5816178634356794,
+    Boston__yhat_lower: 1.4715929905435854,
+    Boston__yhat_upper: 1.7003122219671367,
+    Boston: 1.545,
+    California__yhat: 1.232881524770783,
+    California__yhat_lower: 1.0767786935430315,
+    California__yhat_upper: 1.3959964303961667,
+    California: 1.285,
+    WestTexNewMexico__yhat: 1.1523828742682716,
+    WestTexNewMexico__yhat_lower: 0.9811195853500172,
+    WestTexNewMexico__yhat_upper: 1.3138046554765905,
+    WestTexNewMexico: 1.15,
+  },
+  {
+    __timestamp: 1429488000000,
+    Boston__yhat: 1.5693505553611033,
+    Boston__yhat_lower: 1.454366551073654,
+    Boston__yhat_upper: 1.672997430777775,
+    Boston: 1.57,
+    California__yhat: 1.1961960021745208,
+    California__yhat_lower: 1.0574856955397094,
+    California__yhat_upper: 1.3527191406913728,
+    California: 1.325,
+    WestTexNewMexico__yhat: 1.1605683040698191,
+    WestTexNewMexico__yhat_lower: 1.0031473604785308,
+    WestTexNewMexico__yhat_upper: 1.3131490159580719,
+    WestTexNewMexico: 1.33,
+  },
+  {
+    __timestamp: 1430092800000,
+    Boston__yhat: 1.548687090028952,
+    Boston__yhat_lower: 1.4345338808929986,
+    Boston__yhat_upper: 1.674291034018414,
+    Boston: 1.495,
+    California__yhat: 1.17944168965866,
+    California__yhat_lower: 1.0208437159576145,
+    California__yhat_upper: 1.3437648164186333,
+    California: 1.18,
+    WestTexNewMexico__yhat: 1.152452251304891,
+    WestTexNewMexico__yhat_lower: 0.9925163021235553,
+    WestTexNewMexico__yhat_upper: 1.33370469389031,
+    WestTexNewMexico: 1.125,
+  },
+  {
+    __timestamp: 1430697600000,
+    Boston__yhat: 1.5339945463021136,
+    Boston__yhat_lower: 1.4131803310322042,
+    Boston__yhat_upper: 1.6534068731295286,
+    Boston: 1.58,
+    California__yhat: 1.1914708975476587,
+    California__yhat_lower: 1.0346943811155895,
+    California__yhat_upper: 1.346918284211045,
+    California: 1.165,
+    WestTexNewMexico__yhat: 1.136951442350726,
+    WestTexNewMexico__yhat_lower: 0.9785853981941628,
+    WestTexNewMexico__yhat_upper: 1.305120499270747,
+    WestTexNewMexico: 1.07,
+  },
+  {
+    __timestamp: 1431302400000,
+    Boston__yhat: 1.538494530655746,
+    Boston__yhat_lower: 1.417157877783077,
+    Boston__yhat_upper: 1.6657402419552576,
+    Boston: 1.585,
+    California__yhat: 1.2250425993396363,
+    California__yhat_lower: 1.0694624006721893,
+    California__yhat_upper: 1.3779793141537178,
+    California: 1.285,
+    WestTexNewMexico__yhat: 1.131850140196041,
+    WestTexNewMexico__yhat_lower: 0.9693152036413223,
+    WestTexNewMexico__yhat_upper: 1.2969371429211514,
+    WestTexNewMexico: 1.06,
+  },
+  {
+    __timestamp: 1431907200000,
+    Boston__yhat: 1.5586586605892516,
+    Boston__yhat_lower: 1.4437718674345732,
+    Boston__yhat_upper: 1.678444300307212,
+    Boston: 1.54,
+    California__yhat: 1.2640228484312774,
+    California__yhat_lower: 1.105695580617842,
+    California__yhat_upper: 1.4262751320209555,
+    California: 1.3,
+    WestTexNewMexico__yhat: 1.14279691969869,
+    WestTexNewMexico__yhat_lower: 0.9744635833347896,
+    WestTexNewMexico__yhat_upper: 1.309843116203469,
+    WestTexNewMexico: 1.065,
+  },
+  {
+    __timestamp: 1432512000000,
+    Boston__yhat: 1.5775197465059267,
+    Boston__yhat_lower: 1.4598708798261923,
+    Boston__yhat_upper: 1.6911276338952719,
+    Boston: 1.6,
+    California__yhat: 1.292475578711032,
+    California__yhat_lower: 1.1228796890918014,
+    California__yhat_upper: 1.4471391733217347,
+    California: 1.24,
+    WestTexNewMexico__yhat: 1.151946670246945,
+    WestTexNewMexico__yhat_lower: 0.9787075088274869,
+    WestTexNewMexico__yhat_upper: 1.3257344034341332,
+    WestTexNewMexico: 1.065,
+  },
+  {
+    __timestamp: 1433116800000,
+    Boston__yhat: 1.5847361491556036,
+    Boston__yhat_lower: 1.469478725883583,
+    Boston__yhat_upper: 1.698200477547973,
+    Boston: 1.625,
+    California__yhat: 1.301640708602741,
+    California__yhat_lower: 1.1448194258091566,
+    California__yhat_upper: 1.4657411831360765,
+    California: 1.325,
+    WestTexNewMexico__yhat: 1.1344270549760207,
+    WestTexNewMexico__yhat_lower: 0.9628949633601395,
+    WestTexNewMexico__yhat_upper: 1.2999364461809975,
+    WestTexNewMexico: 1.08,
+  },
+  {
+    __timestamp: 1433721600000,
+    Boston__yhat: 1.588841301654564,
+    Boston__yhat_lower: 1.4701868286368829,
+    Boston__yhat_upper: 1.708276878629705,
+    Boston: 1.555,
+    California__yhat: 1.2945568932951903,
+    California__yhat_lower: 1.1357913193434988,
+    California__yhat_upper: 1.441658100122194,
+    California: 1.325,
+    WestTexNewMexico__yhat: 1.090609476160724,
+    WestTexNewMexico__yhat_lower: 0.9171628023326979,
+    WestTexNewMexico__yhat_upper: 1.2519104172461586,
+    WestTexNewMexico: 1.125,
+  },
+  {
+    __timestamp: 1434326400000,
+    Boston__yhat: 1.60467809761448,
+    Boston__yhat_lower: 1.4872087156545453,
+    Boston__yhat_upper: 1.7206390174307566,
+    Boston: 1.65,
+    California__yhat: 1.2866911289244536,
+    California__yhat_lower: 1.1223304657283866,
+    California__yhat_upper: 1.4489712765550424,
+    California: 1.38,
+    WestTexNewMexico__yhat: 1.058286202137859,
+    WestTexNewMexico__yhat_lower: 0.8983319008178635,
+    WestTexNewMexico__yhat_upper: 1.2230688588329341,
+    WestTexNewMexico: 1.2,
+  },
+  {
+    __timestamp: 1434931200000,
+    Boston__yhat: 1.6296561292532252,
+    Boston__yhat_lower: 1.5147117985377605,
+    Boston__yhat_upper: 1.7484553862428687,
+    Boston: 1.64,
+    California__yhat: 1.298704180420278,
+    California__yhat_lower: 1.143996831592798,
+    California__yhat_upper: 1.4569530963291766,
+    California: 1.385,
+    WestTexNewMexico__yhat: 1.0837741118769433,
+    WestTexNewMexico__yhat_lower: 0.9165400527844431,
+    WestTexNewMexico__yhat_upper: 1.2633713277285281,
+    WestTexNewMexico: 1.145,
+  },
+  {
+    __timestamp: 1435536000000,
+    Boston__yhat: 1.6387330700540754,
+    Boston__yhat_lower: 1.5214382052884348,
+    Boston__yhat_upper: 1.7593446818133576,
+    Boston: 1.7,
+    California__yhat: 1.3419159537936654,
+    California__yhat_lower: 1.1824389777530346,
+    California__yhat_upper: 1.5077615808876883,
+    California: 1.395,
+    WestTexNewMexico__yhat: 1.1753283438356257,
+    WestTexNewMexico__yhat_lower: 1.0084515427055218,
+    WestTexNewMexico__yhat_upper: 1.3411968014102083,
+    WestTexNewMexico: 1.18,
+  },
+  {
+    __timestamp: 1436140800000,
+    Boston__yhat: 1.6078378110129543,
+    Boston__yhat_lower: 1.4858780410049368,
+    Boston__yhat_upper: 1.7333942938670541,
+    Boston: 1.665,
+    California__yhat: 1.4064610022347392,
+    California__yhat_lower: 1.2518481325894115,
+    California__yhat_upper: 1.5631376401498112,
+    California: 1.465,
+    WestTexNewMexico__yhat: 1.2876812690769497,
+    WestTexNewMexico__yhat_lower: 1.118277996711148,
+    WestTexNewMexico__yhat_upper: 1.453601368173299,
+    WestTexNewMexico: 1.365,
+  },
+  {
+    __timestamp: 1436745600000,
+    Boston__yhat: 1.54126454151401,
+    Boston__yhat_lower: 1.4242640278872807,
+    Boston__yhat_upper: 1.658820938407199,
+    Boston: 1.615,
+    California__yhat: 1.4648637533773619,
+    California__yhat_lower: 1.3165708549095063,
+    California__yhat_upper: 1.6123722518242183,
+    California: 1.535,
+    WestTexNewMexico__yhat: 1.359084635413718,
+    WestTexNewMexico__yhat_lower: 1.1923924916510695,
+    WestTexNewMexico__yhat_upper: 1.5397046826260015,
+    WestTexNewMexico: 1.25,
+  },
+  {
+    __timestamp: 1437350400000,
+    Boston__yhat: 1.4716975989229104,
+    Boston__yhat_lower: 1.3478802335545248,
+    Boston__yhat_upper: 1.5897005348114144,
+    Boston: 1.65,
+    California__yhat: 1.492196708250474,
+    California__yhat_lower: 1.3281011466171584,
+    California__yhat_upper: 1.6482617063876424,
+    California: 1.53,
+    WestTexNewMexico__yhat: 1.3665720856468249,
+    WestTexNewMexico__yhat_lower: 1.1985870084342607,
+    WestTexNewMexico__yhat_upper: 1.540444302838635,
+    WestTexNewMexico: 1.325,
+  },
+  {
+    __timestamp: 1437955200000,
+    Boston__yhat: 1.4316465654883939,
+    Boston__yhat_lower: 1.3151590237205186,
+    Boston__yhat_upper: 1.5502363732881383,
+    Boston: 1.645,
+    California__yhat: 1.486878703643501,
+    California__yhat_lower: 1.3387136764087475,
+    California__yhat_upper: 1.6406538496379224,
+    California: 1.575,
+    WestTexNewMexico__yhat: 1.3430004296140337,
+    WestTexNewMexico__yhat_lower: 1.1696134333274417,
+    WestTexNewMexico__yhat_upper: 1.5143254675484394,
+    WestTexNewMexico: 1.345,
+  },
+  {
+    __timestamp: 1438560000000,
+    Boston__yhat: 1.4271527274427822,
+    Boston__yhat_lower: 1.3009869979033386,
+    Boston__yhat_upper: 1.5444571765505344,
+    Boston: 1.545,
+    California__yhat: 1.4721251850161223,
+    California__yhat_lower: 1.3130424764080704,
+    California__yhat_upper: 1.6322300582937983,
+    California: 1.565,
+    WestTexNewMexico__yhat: 1.3385023304664054,
+    WestTexNewMexico__yhat_lower: 1.169557000507694,
+    WestTexNewMexico__yhat_upper: 1.501423586440048,
+    WestTexNewMexico: 1.3,
+  },
+  {
+    __timestamp: 1439164800000,
+    Boston__yhat: 1.4407299749907534,
+    Boston__yhat_lower: 1.323436292855159,
+    Boston__yhat_upper: 1.5636100946562665,
+    Boston: 1.62,
+    California__yhat: 1.4747274927843579,
+    California__yhat_lower: 1.3090246017944651,
+    California__yhat_upper: 1.6212028571910875,
+    California: 1.535,
+    WestTexNewMexico__yhat: 1.369033029466056,
+    WestTexNewMexico__yhat_lower: 1.2063418855681307,
+    WestTexNewMexico__yhat_upper: 1.5410908830393701,
+    WestTexNewMexico: 1.215,
+  },
+  {
+    __timestamp: 1439769600000,
+    Boston__yhat: 1.4558141240561584,
+    Boston__yhat_lower: 1.3384500860436346,
+    Boston__yhat_upper: 1.5593449899412495,
+    Boston: 1.535,
+    California__yhat: 1.5004588541583503,
+    California__yhat_lower: 1.3525771130800601,
+    California__yhat_upper: 1.6557709189818204,
+    California: 1.515,
+    WestTexNewMexico__yhat: 1.4078705349829708,
+    WestTexNewMexico__yhat_lower: 1.2465576754469605,
+    WestTexNewMexico__yhat_upper: 1.5765990094113416,
+    WestTexNewMexico: 1.205,
+  },
+  {
+    __timestamp: 1440374400000,
+    Boston__yhat: 1.4714837581619955,
+    Boston__yhat_lower: 1.3542849882799493,
+    Boston__yhat_upper: 1.587250053083524,
+    Boston: 1.58,
+    California__yhat: 1.5302322554730527,
+    California__yhat_lower: 1.3712263333300627,
+    California__yhat_upper: 1.6766472256899916,
+    California: 1.53,
+    WestTexNewMexico__yhat: 1.425931627994101,
+    WestTexNewMexico__yhat_lower: 1.2620778981321579,
+    WestTexNewMexico__yhat_upper: 1.5920830784029816,
+    WestTexNewMexico: 1.255,
+  },
+  {
+    __timestamp: 1440979200000,
+    Boston__yhat: 1.491444403016728,
+    Boston__yhat_lower: 1.3719274262306433,
+    Boston__yhat_upper: 1.6081603165448515,
+    Boston: 1.54,
+    California__yhat: 1.5411777460499874,
+    California__yhat_lower: 1.3904365117687372,
+    California__yhat_upper: 1.694546785101698,
+    California: 1.54,
+    WestTexNewMexico__yhat: 1.4320134472163049,
+    WestTexNewMexico__yhat_lower: 1.273365593253299,
+    WestTexNewMexico__yhat_upper: 1.5931974288222444,
+    WestTexNewMexico: 1.29,
+  },
+  {
+    __timestamp: 1441584000000,
+    Boston__yhat: 1.5051820756139245,
+    Boston__yhat_lower: 1.3835553327078385,
+    Boston__yhat_upper: 1.6240589221993718,
+    Boston: 1.515,
+    California__yhat: 1.5313765368007273,
+    California__yhat_lower: 1.3681294180618269,
+    California__yhat_upper: 1.6892153479755334,
+    California: 1.55,
+    WestTexNewMexico__yhat: 1.4638751687570226,
+    WestTexNewMexico__yhat_lower: 1.2864210645323784,
+    WestTexNewMexico__yhat_upper: 1.6187694320540935,
+    WestTexNewMexico: 1.37,
+  },
+  {
+    __timestamp: 1442188800000,
+    Boston__yhat: 1.4894325587299742,
+    Boston__yhat_lower: 1.3727869467332703,
+    Boston__yhat_upper: 1.6084226338870418,
+    Boston: 1.58,
+    California__yhat: 1.522640140138669,
+    California__yhat_lower: 1.3734557489282102,
+    California__yhat_upper: 1.6743091049728624,
+    California: 1.53,
+    WestTexNewMexico__yhat: 1.5400751405380166,
+    WestTexNewMexico__yhat_lower: 1.3774375535282375,
+    WestTexNewMexico__yhat_upper: 1.723050870346822,
+    WestTexNewMexico: 1.485,
+  },
+  {
+    __timestamp: 1442793600000,
+    Boston__yhat: 1.4322083667601824,
+    Boston__yhat_lower: 1.3101390870258312,
+    Boston__yhat_upper: 1.5571183048764867,
+    Boston: 1.535,
+    California__yhat: 1.5378925480202739,
+    California__yhat_lower: 1.3886019658089772,
+    California__yhat_upper: 1.6978496884233474,
+    California: 1.445,
+    WestTexNewMexico__yhat: 1.6287478669084643,
+    WestTexNewMexico__yhat_lower: 1.478287058860101,
+    WestTexNewMexico__yhat_upper: 1.795633152002224,
+    WestTexNewMexico: 1.275,
+  },
+  {
+    __timestamp: 1443398400000,
+    Boston__yhat: 1.351816621968265,
+    Boston__yhat_lower: 1.2376540378452352,
+    Boston__yhat_upper: 1.4729299390946764,
+    Boston: 1.175,
+    California__yhat: 1.5759661525657334,
+    California__yhat_lower: 1.4231456717732236,
+    California__yhat_upper: 1.733586091013307,
+    California: 1.51,
+    WestTexNewMexico__yhat: 1.6721603417638533,
+    WestTexNewMexico__yhat_lower: 1.508503941330916,
+    WestTexNewMexico__yhat_upper: 1.8462459308936394,
+    WestTexNewMexico: 1.43,
+  },
+  {
+    __timestamp: 1444003200000,
+    Boston__yhat: 1.286486461072129,
+    Boston__yhat_lower: 1.1680220690052265,
+    Boston__yhat_upper: 1.4035977590666622,
+    Boston: 1.2,
+    California__yhat: 1.6097139361369517,
+    California__yhat_lower: 1.4449082988736466,
+    California__yhat_upper: 1.7603053272180196,
+    California: 1.575,
+    WestTexNewMexico__yhat: 1.639290251177639,
+    WestTexNewMexico__yhat_lower: 1.473164681029519,
+    WestTexNewMexico__yhat_upper: 1.8064957246654998,
+    WestTexNewMexico: 1.47,
+  },
+  {
+    __timestamp: 1444608000000,
+    Boston__yhat: 1.2630051620190224,
+    Boston__yhat_lower: 1.1467376145041555,
+    Boston__yhat_upper: 1.377446221614078,
+    Boston: 1.1,
+    California__yhat: 1.6098713751752662,
+    California__yhat_lower: 1.4600843147210683,
+    California__yhat_upper: 1.763955521152191,
+    California: 1.54,
+    WestTexNewMexico__yhat: 1.5551952931382806,
+    WestTexNewMexico__yhat_lower: 1.3962129897996904,
+    WestTexNewMexico__yhat_upper: 1.726357454658797,
+    WestTexNewMexico: 1.415,
+  },
+  {
+    __timestamp: 1445212800000,
+    Boston__yhat: 1.276278781347193,
+    Boston__yhat_lower: 1.1580450205542776,
+    Boston__yhat_upper: 1.3920651070329326,
+    Boston: 1.145,
+    California__yhat: 1.571148844853862,
+    California__yhat_lower: 1.4083378535887405,
+    California__yhat_upper: 1.733966017882931,
+    California: 1.38,
+    WestTexNewMexico__yhat: 1.4722932415830279,
+    WestTexNewMexico__yhat_lower: 1.3050378331324088,
+    WestTexNewMexico__yhat_upper: 1.6418924805303612,
+    WestTexNewMexico: 1.41,
+  },
+  {
+    __timestamp: 1445817600000,
+    Boston__yhat: 1.2991073481696098,
+    Boston__yhat_lower: 1.1878452793959065,
+    Boston__yhat_upper: 1.424293199867907,
+    Boston: 1.18,
+    California__yhat: 1.5150187954091354,
+    California__yhat_lower: 1.3476318997481405,
+    California__yhat_upper: 1.677657858675358,
+    California: 1.275,
+    WestTexNewMexico__yhat: 1.4199561158957161,
+    WestTexNewMexico__yhat_lower: 1.263080331712721,
+    WestTexNewMexico__yhat_upper: 1.5718996342613911,
+    WestTexNewMexico: 1.36,
+  },
+  {
+    __timestamp: 1446422400000,
+    Boston__yhat: 1.308880887797368,
+    Boston__yhat_lower: 1.1862924735231104,
+    Boston__yhat_upper: 1.4168025454442827,
+    Boston: 1.13,
+    California__yhat: 1.467196455991084,
+    California__yhat_lower: 1.31469058277437,
+    California__yhat_upper: 1.6266140472626818,
+    California: 1.32,
+    WestTexNewMexico__yhat: 1.385809818488925,
+    WestTexNewMexico__yhat_lower: 1.2178231659097734,
+    WestTexNewMexico__yhat_upper: 1.5529990050614997,
+    WestTexNewMexico: 1.37,
+  },
+  {
+    __timestamp: 1447027200000,
+    Boston__yhat: 1.3030202507313675,
+    Boston__yhat_lower: 1.1871331759675903,
+    Boston__yhat_upper: 1.4220034213332513,
+    Boston: 1.1,
+    California__yhat: 1.432710953584346,
+    California__yhat_lower: 1.2824951329265597,
+    California__yhat_upper: 1.586661603708675,
+    California: 1.21,
+    WestTexNewMexico__yhat: 1.3404954026443072,
+    WestTexNewMexico__yhat_lower: 1.1821733202392815,
+    WestTexNewMexico__yhat_upper: 1.5011656305912942,
+    WestTexNewMexico: 1.315,
+  },
+  {
+    __timestamp: 1447632000000,
+    Boston__yhat: 1.2921088188147662,
+    Boston__yhat_lower: 1.1728345442847379,
+    Boston__yhat_upper: 1.4033407585022522,
+    Boston: 1.17,
+    California__yhat: 1.3931387239731783,
+    California__yhat_lower: 1.2432214745880616,
+    California__yhat_upper: 1.5498822030297323,
+    California: 1.26,
+    WestTexNewMexico__yhat: 1.276766317307663,
+    WestTexNewMexico__yhat_lower: 1.0999844956570386,
+    WestTexNewMexico__yhat_upper: 1.446687228788756,
+    WestTexNewMexico: 1.375,
+  },
+  {
+    __timestamp: 1448236800000,
+    Boston__yhat: 1.2844900175902454,
+    Boston__yhat_lower: 1.1751725419028316,
+    Boston__yhat_upper: 1.4071918419152338,
+    Boston: 1.235,
+    California__yhat: 1.3280733170736323,
+    California__yhat_lower: 1.168686173676362,
+    California__yhat_upper: 1.4828349526176714,
+    California: 1.33,
+    WestTexNewMexico__yhat: 1.2150153206911025,
+    WestTexNewMexico__yhat_lower: 1.0575514264315589,
+    WestTexNewMexico__yhat_upper: 1.3738174939464802,
+    WestTexNewMexico: 1.445,
+  },
+  {
+    __timestamp: 1448841600000,
+    Boston__yhat: 1.2805251906155837,
+    Boston__yhat_lower: 1.1707757707707065,
+    Boston__yhat_upper: 1.3999312395395147,
+    Boston: 1.155,
+    California__yhat: 1.2392981370779044,
+    California__yhat_lower: 1.0733806154601595,
+    California__yhat_upper: 1.4014509402239486,
+    California: 1.13,
+    WestTexNewMexico__yhat: 1.1770436607980383,
+    WestTexNewMexico__yhat_lower: 0.993583553273554,
+    WestTexNewMexico__yhat_upper: 1.333422820891247,
+    WestTexNewMexico: 0.74,
+  },
+  {
+    __timestamp: 1449446400000,
+    Boston__yhat: 1.279267142574869,
+    Boston__yhat_lower: 1.1585705827510129,
+    Boston__yhat_upper: 1.3983536869495787,
+    Boston: 1.28,
+    California__yhat: 1.1539951545645342,
+    California__yhat_lower: 0.9889501465743559,
+    California__yhat_upper: 1.3053289212843744,
+    California: 1.13,
+    WestTexNewMexico__yhat: 1.162380614252356,
+    WestTexNewMexico__yhat_lower: 0.9965272411245537,
+    WestTexNewMexico__yhat_upper: 1.3253180367221955,
+    WestTexNewMexico: 1.29,
+  },
+];
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx
index a9947e0d5..d08499c61 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { ViewRootGroup } from 'echarts/types/src/util/types';
 import GlobalModel from 'echarts/types/src/model/Global';
 import ComponentModel from 'echarts/types/src/model/Component';
@@ -46,6 +46,12 @@ export default function EchartsTimeseries({
   const lastTimeRef = useRef(Date.now());
   const lastSelectedLegend = useRef('');
   const clickTimer = useRef<ReturnType<typeof setTimeout>>();
+  const extraControlRef = useRef<HTMLDivElement>(null);
+  const [extraControlHeight, setExtraControlHeight] = useState(0);
+  useEffect(() => {
+    const updatedHeight = extraControlRef.current?.offsetHeight || 0;
+    setExtraControlHeight(updatedHeight);
+  }, [formData.showExtraControls]);
 
   const handleDoubleClickChange = useCallback(
     (name?: string) => {
@@ -199,10 +205,12 @@ export default function EchartsTimeseries({
 
   return (
     <>
-      <ExtraControls formData={formData} setControlValue={setControlValue} />
+      <div ref={extraControlRef}>
+        <ExtraControls formData={formData} setControlValue={setControlValue} />
+      </div>
       <Echart
         ref={echartRef}
-        height={height}
+        height={height - extraControlHeight}
         width={width}
         echartOptions={echartOptions}
         eventHandlers={eventHandlers}