[7.x] TSVB Inaccurate Group By (#73683)

src/plugins/vis_type_timeseries/common/ui_restrictions.ts

@@ -17,6 +17,8 @@
  * under the License.
  */
 
+import { PANEL_TYPES } from './panel_types';
+
 /**
  * UI Restrictions keys
  * @constant
@@ -56,3 +58,12 @@ export type TimeseriesUIRestrictions = {
 export const DEFAULT_UI_RESTRICTION: UIRestrictions = {
   '*': true,
 };
+
+/** limit on the number of series for the panel
+ * @constant
+ * @public
+ */
+export const limitOfSeries = {
+  [PANEL_TYPES.GAUGE]: 1,
+  [PANEL_TYPES.METRIC]: 2,
+};

src/plugins/vis_type_timeseries/public/application/components/panel_config/gauge.js

@@ -46,6 +46,9 @@ import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 import { QueryBarWrapper } from '../query_bar_wrapper';
 import { getDefaultQueryLanguage } from '../lib/get_default_query_language';
 
+import { limitOfSeries } from '../../../../common/ui_restrictions';
+import { PANEL_TYPES } from '../../../../common/panel_types';
+
 class GaugePanelConfigUi extends Component {
   constructor(props) {
     super(props);
@@ -110,7 +113,7 @@ class GaugePanelConfigUi extends Component {
         <SeriesEditor
           colorPicker={true}
           fields={this.props.fields}
-          limit={1}
+          limit={limitOfSeries[PANEL_TYPES.GAUGE]}
           model={this.props.model}
           name={this.props.name}
           onChange={this.props.onChange}

src/plugins/vis_type_timeseries/public/application/components/panel_config/metric.js

@@ -41,6 +41,8 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 import { QueryBarWrapper } from '../query_bar_wrapper';
 import { getDefaultQueryLanguage } from '../lib/get_default_query_language';
+import { limitOfSeries } from '../../../../common/ui_restrictions';
+import { PANEL_TYPES } from '../../../../common/panel_types';
 
 export class MetricPanelConfig extends Component {
   constructor(props) {
@@ -75,7 +77,7 @@ export class MetricPanelConfig extends Component {
         <SeriesEditor
           colorPicker={false}
           fields={this.props.fields}
-          limit={2}
+          limit={limitOfSeries[PANEL_TYPES.METRIC]}
           model={this.props.model}
           name={this.props.name}
           onChange={this.props.onChange}

src/plugins/vis_type_timeseries/server/lib/vis_data/helpers/get_active_series.js → src/plugins/vis_type_timeseries/server/lib/vis_data/helpers/get_active_series.ts

@@ -16,8 +16,20 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-export const getActiveSeries = (panel) => {
-  const shouldNotApplyFilter = ['gauge', 'markdown'].includes(panel.type);
 
-  return (panel.series || []).filter((series) => !series.hidden || shouldNotApplyFilter);
+import { PanelSchema } from '../../../../common/types';
+import { PANEL_TYPES } from '../../../../common/panel_types';
+import { limitOfSeries } from '../../../../common/ui_restrictions';
+
+export const getActiveSeries = (panel: PanelSchema) => {
+  let visibleSeries = panel.series || [];
+
+  if (panel.type in limitOfSeries) {
+    visibleSeries = visibleSeries.slice(0, limitOfSeries[panel.type]);
+  }
+
+  // Toogle visibility functionality for 'gauge', 'markdown' is not accessible
+  const shouldNotApplyFilter = [PANEL_TYPES.GAUGE, PANEL_TYPES.MARKDOWN].includes(panel.type);
+
+  return visibleSeries.filter((series) => !series.hidden || shouldNotApplyFilter);
 };