diff --git a/src/client/components/timeseries-visualization-controls/split-menu.tsx b/src/client/components/timeseries-visualization-controls/split-menu.tsx index 797a7edaa..4d1109ea6 100644 --- a/src/client/components/timeseries-visualization-controls/split-menu.tsx +++ b/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 = p ; }; -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 = props => { const { openOn, containerStage, onClose, dimension, saveSplit, split, essence } = props; @@ -72,7 +64,7 @@ const TimeSeriesCategorySplitMenu: React.FunctionComponent = 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); diff --git a/src/common/models/colors/colors.ts b/src/common/models/colors/colors.ts index cbb747c88..58ce70b2b 100644 --- a/src/common/models/colors/colors.ts +++ b/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; +} diff --git a/src/common/utils/rules/split-adjustments.ts b/src/common/utils/rules/split-adjustments.ts index bf17b58a1..57af68a5f 100644 --- a/src/common/utils/rules/split-adjustments.ts +++ b/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) ); }