Helper for ColorEntry creation. When datum for hovered range is not a…

…vailable - show pause. (#661)

src/client/visualizations/line-chart/charts/charts-per-series/series-hover-content.tsx

@@ -20,18 +20,15 @@ import { ReactNode } from "react";
 import { NORMAL_COLORS } from "../../../../../common/models/colors/colors";
 import { Essence } from "../../../../../common/models/essence/essence";
 import { ConcreteSeries, SeriesDerivation } from "../../../../../common/models/series/concrete-series";
-import { mapTruthy } from "../../../../../common/utils/functional/functional";
 import { ColorEntry, ColorSwabs } from "../../../../components/color-swabs/color-swabs";
-import { Delta } from "../../../../components/delta/delta";
 import { MeasureBubbleContent } from "../../../../components/measure-bubble-content/measure-bubble-content";
 import { selectSplitDataset } from "../../../../utils/dataset/selectors/selectors";
+import { createColorEntry } from "../../utils/color-entry";
 import { getContinuousDimension, getContinuousReference, getNominalSplit, hasNominalSplit } from "../../utils/splits";
 
-function findNestedDatumByAttribute(dimensionName: string, range: PlywoodRange): (d: Datum) => Datum {
-  return (d: Datum): Datum => {
-    const dataset = selectSplitDataset(d);
-    return dataset != null ? dataset.findDatumByAttribute(dimensionName, range) : null;
-  };
+function findSplitDatumByAttribute(d: Datum, dimensionName: string, range: PlywoodRange): Datum {
+  const dataset = selectSplitDataset(d);
+  return dataset != null ? dataset.findDatumByAttribute(dimensionName, range) : null;
 }
 
 function measureLabel(dataset: Dataset, range: PlywoodRange, series: ConcreteSeries, essence: Essence): ReactNode {
@@ -53,36 +50,30 @@ function measureLabel(dataset: Dataset, range: PlywoodRange, series: ConcreteSer
 }
 
 function colorEntries(dataset: Dataset, range: PlywoodRange, series: ConcreteSeries, essence: Essence): ColorEntry[] {
-  const categorySplit = getNominalSplit(essence);
+  const { data } = dataset;
+  const { reference: nominalRef } = getNominalSplit(essence);
   const continuousRef = getContinuousReference(essence);
-  const hoverDatums = dataset.data.map(findNestedDatumByAttribute(continuousRef, range));
-  const colorValues = NORMAL_COLORS;
   const hasComparison = essence.hasComparison();
-  return mapTruthy(dataset.data, (d, i) => {
-    const segment = d[categorySplit.reference];
-    const hoverDatum = hoverDatums[i];
-    if (!hoverDatum) return null;
+  return data.map((datum, i) => {
+    const name = String(datum[nominalRef]);
+    const color = NORMAL_COLORS[i];
+    const hoverDatum = findSplitDatumByAttribute(datum, continuousRef, range);
 
-    const currentEntry: ColorEntry = {
-      color: colorValues[i],
-      name: String(segment),
-      value: series.formatValue(hoverDatum)
-    };
-
-    if (!hasComparison) {
-      return currentEntry;
+    if (!hoverDatum) {
+      return {
+        color,
+        name,
+        value: "-"
+      };
     }
 
-    return {
-      ...currentEntry,
-      previous: series.formatValue(hoverDatum, SeriesDerivation.PREVIOUS),
-      delta: <Delta
-        currentValue={series.selectValue(hoverDatum)}
-        previousValue={series.selectValue(hoverDatum, SeriesDerivation.PREVIOUS)}
-        formatter={series.formatter()}
-        lowerIsBetter={series.measure.lowerIsBetter}
-      />
-    };
+    return createColorEntry({
+      color,
+      name,
+      series,
+      datum: hoverDatum,
+      hasComparison
+    });
   });
 }
 

src/client/visualizations/line-chart/charts/charts-per-split/split-hover-content.tsx

@@ -19,10 +19,10 @@ import * as React from "react";
 import { NORMAL_COLORS } from "../../../../../common/models/colors/colors";
 import { Essence } from "../../../../../common/models/essence/essence";
 import { ConcreteSeries, SeriesDerivation } from "../../../../../common/models/series/concrete-series";
-import { ColorEntry, ColorSwabs } from "../../../../components/color-swabs/color-swabs";
-import { Delta } from "../../../../components/delta/delta";
+import { ColorSwabs } from "../../../../components/color-swabs/color-swabs";
 import { MeasureBubbleContent } from "../../../../components/measure-bubble-content/measure-bubble-content";
 import { Hover } from "../../interactions/interaction";
+import { createColorEntry } from "../../utils/color-entry";
 import { getContinuousReference } from "../../utils/splits";
 
 interface SplitHoverContentProps {
@@ -59,26 +59,9 @@ interface ColoredSeriesProps {
 const ColoredSeries: React.SFC<ColoredSeriesProps> = props => {
   const { datum, hasComparison, series } = props;
   const colorEntries = series.map((series, index) => {
-    const currentEntry: ColorEntry = {
-      color: NORMAL_COLORS[index],
-      name: series.title(),
-      value: series.formatValue(datum)
-    };
-
-    if (!hasComparison) {
-      return currentEntry;
-    }
-
-    return {
-      ...currentEntry,
-      previous: series.formatValue(datum, SeriesDerivation.PREVIOUS),
-      delta: <Delta
-        currentValue={series.selectValue(datum)}
-        previousValue={series.selectValue(datum, SeriesDerivation.PREVIOUS)}
-        formatter={series.formatter()}
-        lowerIsBetter={series.measure.lowerIsBetter}
-      />
-    };
+    const color = NORMAL_COLORS[index];
+    const name = series.title();
+    return createColorEntry({ color, name, hasComparison, datum, series });
   });
   return <ColorSwabs colorEntries={colorEntries} />;
 };

src/client/visualizations/line-chart/utils/color-entry.tsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2017-2018 Allegro.pl
+ *
+ * Licensed 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 { Datum } from "plywood";
+import * as React from "react";
+import { ConcreteSeries, SeriesDerivation } from "../../../../common/models/series/concrete-series";
+import { ColorEntry } from "../../../components/color-swabs/color-swabs";
+import { Delta } from "../../../components/delta/delta";
+
+interface Parameters {
+  color: string;
+  name: string;
+  series: ConcreteSeries;
+  datum: Datum;
+  hasComparison: boolean;
+}
+
+export function createColorEntry({ color, name, series, datum, hasComparison }: Parameters): ColorEntry {
+  const current = {
+    color,
+    name,
+    value: series.formatValue(datum)
+  };
+
+  if (!hasComparison) return current;
+
+  return {
+    ...current,
+    previous: series.formatValue(datum, SeriesDerivation.PREVIOUS),
+    delta: <Delta
+      currentValue={series.selectValue(datum)}
+      previousValue={series.selectValue(datum, SeriesDerivation.PREVIOUS)}
+      lowerIsBetter={series.measure.lowerIsBetter}
+      formatter={series.formatter()} />
+  };
+}