[ES|QL][Discover] Applies the breakdown first and then the date_histogram (elastic#239685)

Author: stratoula

src/platform/packages/shared/kbn-unified-histogram/services/lens_vis_service.suggestions.test.ts

@@ -286,7 +286,7 @@ describe('LensVisService suggestions', () => {
 
     const histogramQuery = {
       esql: `from the-data-view | limit 100
-| STATS results = COUNT(*) BY timestamp = BUCKET(@timestamp, 30 minute), \`var0\` | sort \`var0\` asc`,
+| STATS results = COUNT(*) BY \`var0\`, timestamp = BUCKET(@timestamp, 30 minute) | sort \`var0\` asc`,
     };
 
     expect(lensVis.visContext?.attributes.state.query).toStrictEqual(histogramQuery);
@@ -367,7 +367,7 @@ describe('LensVisService suggestions', () => {
 
     const histogramQuery = {
       esql: `from the-data-view | limit 100
-| STATS results = COUNT(*) BY timestamp = BUCKET(@timestamp, 30 minute), \`coordinates\``,
+| STATS results = COUNT(*) BY \`coordinates\`, timestamp = BUCKET(@timestamp, 30 minute)`,
     };
 
     expect(lensVis.visContext?.attributes.state.query).toStrictEqual(histogramQuery);

src/platform/packages/shared/kbn-unified-histogram/services/lens_vis_service.ts

@@ -619,7 +619,7 @@ export class LensVisService {
     const language = getAggregateQueryMode(query);
     const safeQuery = removeDropCommandsFromESQLQuery(query[language]);
     const normalizedQuery = convertTimeseriesCommandToFrom(safeQuery);
-    const breakdown = breakdownColumn ? `, \`${breakdownColumn.name}\`` : '';
+    const breakdown = breakdownColumn ? `\`${breakdownColumn.name}\`, ` : '';
 
     // sort by breakdown column if it's sortable
     const sortBy =
@@ -630,7 +630,7 @@ export class LensVisService {
     const timeBuckets = `${TIMESTAMP_COLUMN} = BUCKET(${dataView.timeFieldName}, ${queryInterval})`;
     return appendToESQLQuery(
       normalizedQuery,
-      `| STATS results = COUNT(*) BY ${timeBuckets}${breakdown}${sortBy}`
+      `| STATS results = COUNT(*) BY ${breakdown}${timeBuckets}${sortBy}`
     );
   };