adjustColorSplit should use valid available split limits

src/client/components/timeseries-visualization-controls/split-menu.tsx

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { range } from "d3";
 import React, { useMemo, useState } from "react";
+import { colorSplitLimits } from "../../../common/models/colors/colors";
 import { granularityToString } from "../../../common/models/granularity/granularity";
 import { DimensionSortOn, SortOn } from "../../../common/models/sort-on/sort-on";
 import { useSettingsContext } from "../../views/cube-view/settings-context";
@@ -55,14 +55,6 @@ const TimeSeriesContinuousSplitMenu: React.FunctionComponent<SplitMenuProps> = p
   </SplitMenuBase>;
 };
 
-function getLimitOptions(max: number): number[] {
-  const limits = range(5, max, 5);
-  if (limits[limits.length - 1] < max) {
-    return [...limits, max];
-  }
-  return limits;
-}
-
 const TimeSeriesCategorySplitMenu: React.FunctionComponent<SplitMenuProps> = props => {
   const { openOn, containerStage, onClose, dimension, saveSplit, split, essence } = props;
 
@@ -72,7 +64,7 @@ const TimeSeriesCategorySplitMenu: React.FunctionComponent<SplitMenuProps> = pro
   ];
 
   const { customization: { visualizationColors: { series } } } = useSettingsContext();
-  const limitOptions = useMemo(() => getLimitOptions(series.length), [series.length]);
+  const limitOptions = useMemo(() => colorSplitLimits(series.length), [series.length]);
 
   const [sort, setSort] = useState(split.sort);
   const [limit, setLimit] = useState(split.limit);

src/common/models/colors/colors.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { hsl, rgb } from "d3";
+import { hsl, range, rgb } from "d3";
 
 export const DEFAULT_SERIES_COLORS = [
   "#2D95CA",
@@ -50,3 +50,11 @@ export function alphaMain(colors: VisualizationColors): string {
   const { r, g, b } = rgb(colors.main);
   return `rgba(${r}, ${g}, ${b}, ${0.14})`;
 }
+
+export function colorSplitLimits(max: number): number[] {
+  const limits = range(5, max, 5);
+  if (limits[limits.length - 1] < max) {
+    return [...limits, max];
+  }
+  return limits;
+}

src/common/utils/rules/split-adjustments.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { VisualizationColors } from "../../models/colors/colors";
+import { colorSplitLimits, VisualizationColors } from "../../models/colors/colors";
 import { Dimension } from "../../models/dimension/dimension";
 import { SeriesList } from "../../models/series-list/series-list";
 import { DimensionSort, SeriesSort, SortDirection } from "../../models/sort/sort";
@@ -23,16 +23,10 @@ import { thread } from "../functional/functional";
 
 export function adjustColorSplit(split: Split, dimension: Dimension, series: SeriesList, visualizationColors: VisualizationColors): Split {
   const colorsCount = visualizationColors.series.length;
-  const availableLimits = new Set([
-    // TODO: This magic 5 will disappear in #756
-    5,
-    Math.min(split.limit, colorsCount),
-    colorsCount
-  ]);
   return thread(
     split,
     adjustSort(dimension, series),
-    adjustFiniteLimit([...availableLimits], colorsCount)
+    adjustFiniteLimit(colorSplitLimits(colorsCount), colorsCount)
   );
 }