Split utils (#849)

* Set limit for newly created Split based on last available limit on dimension * Utils for selecting values and formatting them based on defined Split * Replace raw property access with proper Split utils * Fix test * Split tests * Use split utils in Scatterplot
allegro · Mar 9, 2022 · 82a04a4 · 82a04a4
1 parent 795774b
commit 82a04a4
Show file tree

Hide file tree

Showing 31 changed files with 142 additions and 145 deletions.
diff --git a/src/client/components/tabular-scroller/splits/flattened-split-columns.tsx b/src/client/components/tabular-scroller/splits/flattened-split-columns.tsx
@@ -32,7 +32,7 @@ export const FlattenedSplitColumns: React.SFC<FlattenedSplitColumnsProps> = ({ s
   <React.Fragment>
     {splits.map(split => {
       const { reference } = split;
-      const value = datum[reference];
+      const value = split.selectValue(datum);
       return <div key={reference} className="flattened-split-value">{formatSegment(value, timezone)}</div>;
     })}
   </React.Fragment>;
diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-bar.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-bar.tsx
@@ -17,8 +17,8 @@
 import { Datum } from "plywood";
 import React from "react";
 import { ConcreteSeries } from "../../../../../common/models/series/concrete-series";
-import { Unary } from "../../../../../common/utils/functional/functional";
 import { LinearScale } from "../../../../utils/linear-scale/linear-scale";
+import { BaseBarChartModel } from "../utils/bar-chart-model";
 import { DomainValue } from "../utils/x-domain";
 import { XScale } from "../utils/x-scale";
 import { SIDE_PADDING } from "./padding";
@@ -28,13 +28,13 @@ interface SingleBarProps {
   yScale: LinearScale;
   xScale: XScale;
   series: ConcreteSeries;
-  getX: Unary<Datum, DomainValue>;
+  model: BaseBarChartModel;
 }
 
 export const SingleBar: React.SFC<SingleBarProps> = props => {
-  const { datum, xScale, yScale, getX, series } = props;
+  const { datum, xScale, yScale, model: { continuousSplit }, series } = props;
   const [maxHeight] = yScale.range();
-  const x = getX(datum);
+  const x = continuousSplit.selectValue<DomainValue>(datum);
   const xPos = xScale.calculate(x) + SIDE_PADDING;
   const width = xScale.bandwidth() - (2 * SIDE_PADDING);
   const y = series.selectValue(datum);

diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-time-shift-bar.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar/single-time-shift-bar.tsx
@@ -17,8 +17,8 @@
 import { Datum } from "plywood";
 import React from "react";
 import { ConcreteSeries, SeriesDerivation } from "../../../../../common/models/series/concrete-series";
-import { Unary } from "../../../../../common/utils/functional/functional";
 import { LinearScale } from "../../../../utils/linear-scale/linear-scale";
+import { BaseBarChartModel } from "../utils/bar-chart-model";
 import { DomainValue } from "../utils/x-domain";
 import { XScale } from "../utils/x-scale";
 import { SIDE_PADDING } from "./padding";
@@ -28,13 +28,13 @@ interface SingleTimeShiftBar {
   yScale: LinearScale;
   xScale: XScale;
   series: ConcreteSeries;
-  getX: Unary<Datum, DomainValue>;
+  model: BaseBarChartModel;
 }
 
 export const SingleTimeShiftBar: React.SFC<SingleTimeShiftBar> = props => {
-  const { datum, xScale, yScale, getX, series } = props;
+  const { datum, xScale, yScale, model: { continuousSplit }, series } = props;
   const [maxHeight] = yScale.range();
-  const x = getX(datum);
+  const x = continuousSplit.selectValue<DomainValue>(datum);
   const xStart = xScale.calculate(x);
   const rangeBand = xScale.bandwidth();
   const fullWidth = rangeBand - 2 * SIDE_PADDING;

diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-bar.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-bar.tsx
@@ -17,7 +17,6 @@
 import { Datum } from "plywood";
 import React from "react";
 import { ConcreteSeries } from "../../../../../common/models/series/concrete-series";
-import { Unary } from "../../../../../common/utils/functional/functional";
 import { selectSplitDatums } from "../../../../utils/dataset/selectors/selectors";
 import { LinearScale } from "../../../../utils/linear-scale/linear-scale";
 import { StackedBarChartModel } from "../utils/bar-chart-model";
@@ -32,21 +31,19 @@ interface StackedBarProps {
   yScale: LinearScale;
   xScale: XScale;
   series: ConcreteSeries;
-  getX: Unary<Datum, DomainValue>;
 }
 
 export const StackedBar: React.SFC<StackedBarProps> = props => {
-  const { datum, xScale, yScale, getX, series, model } = props;
-  const ref = model.nominalSplit.reference;
+  const { datum, xScale, yScale, series, model: { colors, continuousSplit, nominalSplit } } = props;
   const datums = selectSplitDatums(datum);
 
-  const x = getX(datum);
+  const x = continuousSplit.selectValue<DomainValue>(datum);
   const xPos = xScale.calculate(x) + SIDE_PADDING;
   const width = xScale.bandwidth() - (2 * SIDE_PADDING);
-  const color = (d: Datum) => model.colors.get(String(d[ref]));
+  const color = (d: Datum) => colors.get(String(nominalSplit.selectValue(d)));
   return <React.Fragment>
     {datums.map(datum => {
-      const key = datum[ref];
+      const key = String(nominalSplit.selectValue(datum));
       const y = series.selectValue(datum);
       const y0 = selectBase(datum, series);
       const yPos = yScale(y + y0);

diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-time-shift-bar.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bar/stacked-time-shift-bar.tsx
@@ -18,7 +18,6 @@ import * as d3 from "d3";
 import { Datum } from "plywood";
 import React from "react";
 import { ConcreteSeries, SeriesDerivation } from "../../../../../common/models/series/concrete-series";
-import { Unary } from "../../../../../common/utils/functional/functional";
 import { selectSplitDatums } from "../../../../utils/dataset/selectors/selectors";
 import { LinearScale } from "../../../../utils/linear-scale/linear-scale";
 import { StackedBarChartModel } from "../utils/bar-chart-model";
@@ -33,24 +32,22 @@ interface StackedTimeShiftBarProps {
   yScale: LinearScale;
   xScale: XScale;
   series: ConcreteSeries;
-  getX: Unary<Datum, DomainValue>;
 }
 
 export const StackedTimeShiftBar: React.SFC<StackedTimeShiftBarProps> = props => {
-  const { datum, xScale, yScale, getX, series, model } = props;
-  const { reference: nominalReference } = model.nominalSplit;
+  const { datum, xScale, yScale, series, model: { nominalSplit, continuousSplit, colors } } = props;
   const datums = selectSplitDatums(datum);
 
-  const x = getX(datum);
+  const x = continuousSplit.selectValue<DomainValue>(datum);
 
   const xStart = xScale.calculate(x);
   const rangeBand = xScale.bandwidth();
   const fullWidth = rangeBand - 2 * SIDE_PADDING;
   const barWidth = fullWidth * 2 / 3;
-  const color = (d: Datum) => model.colors.get(String(d[nominalReference]));
+  const color = (d: Datum) => colors.get(String(nominalSplit.selectValue(d)));
   return <React.Fragment>
     {datums.map(datum => {
-      const key = `${datum[nominalReference]}--previous`;
+      const key = `${nominalSplit.selectValue(datum)}--previous`;
       const yPrevious = series.selectValue(datum, SeriesDerivation.PREVIOUS);
       const yPreviousBase = selectBase(datum, series, SeriesDerivation.PREVIOUS);
       const yPreviousPos = yScale(yPrevious + yPreviousBase);
@@ -70,7 +67,7 @@ export const StackedTimeShiftBar: React.SFC<StackedTimeShiftBarProps> = props =>
         />;
     })}
     {datums.map(datum => {
-      const key = `${datum[nominalReference]}--current`;
+      const key = `${nominalSplit.selectValue(datum)}--current`;
       const yCurrent = series.selectValue(datum);
       const yCurrentBase = selectBase(datum, series);
       const yCurrentPos = yScale(yCurrent + yCurrentBase);

diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bars/bars-container.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bars/bars-container.tsx
@@ -25,7 +25,7 @@ import { Foreground } from "../foreground/foreground";
 import { Interaction } from "../interactions/interaction";
 import { BarChartModel } from "../utils/bar-chart-model";
 import { calculateChartStage } from "../utils/layout";
-import { xGetter, XScale } from "../utils/x-scale";
+import { XScale } from "../utils/x-scale";
 import { yExtent } from "../utils/y-extent";
 import { Bars } from "./bars";
 import "./bars.scss";
@@ -53,8 +53,6 @@ export class BarsContainer extends React.Component<BarsContainerProps> {
     const { dropHighlight, acceptHighlight, interaction, model, stage, scrollLeft, series, totals, datums, xScale } = this.props;
     const hasComparison = model.hasComparison;
     const chartStage = calculateChartStage(stage);
-    const { reference: continuousReference } = model.continuousSplit;
-    const getX = xGetter(continuousReference);
     const extent = yExtent(datums, series, hasComparison);
     const yScale = getScale(extent, chartStage.height);
 
@@ -73,7 +71,6 @@ export class BarsContainer extends React.Component<BarsContainerProps> {
           model={model}
           stage={chartStage}
           xScale={xScale}
-          getX={getX}
           series={series}
           datums={datums} />
         {interaction && <Foreground
@@ -85,7 +82,6 @@ export class BarsContainer extends React.Component<BarsContainerProps> {
           model={model}
           xScale={xScale}
           series={series}
-          getX={getX}
           yScale={yScale} />}
       </div>
     </React.Fragment>;

diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/bars/bars.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/bars/bars.tsx
@@ -18,14 +18,12 @@ import { Datum } from "plywood";
 import React from "react";
 import { ConcreteSeries } from "../../../../../common/models/series/concrete-series";
 import { Stage } from "../../../../../common/models/stage/stage";
-import { Unary } from "../../../../../common/utils/functional/functional";
 import getScale, { LinearScale } from "../../../../utils/linear-scale/linear-scale";
 import { SingleBar } from "../bar/single-bar";
 import { SingleTimeShiftBar } from "../bar/single-time-shift-bar";
 import { StackedBar } from "../bar/stacked-bar";
 import { StackedTimeShiftBar } from "../bar/stacked-time-shift-bar";
-import { BarChartModel, isStacked, StackedBarChartModel } from "../utils/bar-chart-model";
-import { DomainValue } from "../utils/x-domain";
+import { BarChartModel, isStacked } from "../utils/bar-chart-model";
 import { XScale } from "../utils/x-scale";
 import { yExtent } from "../utils/y-extent";
 import { Background } from "./background";
@@ -36,7 +34,6 @@ interface BarProps {
   yScale: LinearScale;
   xScale: XScale;
   series: ConcreteSeries;
-  getX: Unary<Datum, DomainValue>;
 }
 
 const Bar: React.SFC<BarProps> = props => {
@@ -48,21 +45,20 @@ const Bar: React.SFC<BarProps> = props => {
       : <StackedBar {...rest} model={model} />;
   }
   return showPrevious
-    ? <SingleTimeShiftBar {...rest} />
-    : <SingleBar {...rest} />;
+    ? <SingleTimeShiftBar {...rest} model={model} />
+    : <SingleBar {...rest} model={model} />;
 };
 
 interface BarsProps {
   model: BarChartModel;
   stage: Stage;
   xScale: XScale;
-  getX: Unary<Datum, DomainValue>;
   series: ConcreteSeries;
   datums: Datum[];
 }
 
 export const Bars: React.SFC<BarsProps> = props => {
-  const { model, stage, getX, xScale, series, datums } = props;
+  const { model, stage, xScale, series, datums } = props;
   const extent = yExtent(datums, series, model.hasComparison);
   const yScale = getScale(extent, stage.height);
   if (!yScale) return null;
@@ -77,7 +73,7 @@ export const Bars: React.SFC<BarsProps> = props => {
           yScale={yScale}
           xScale={xScale}
           series={series}
-          getX={getX} />)}
+        />)}
       </g>
     </svg>
   </React.Fragment>;

diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/foreground/foreground.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/foreground/foreground.tsx
@@ -14,16 +14,14 @@
  * limitations under the License.
  */
 
-import { Datum } from "plywood";
 import React from "react";
 import { ConcreteSeries } from "../../../../../common/models/series/concrete-series";
 import { Stage } from "../../../../../common/models/stage/stage";
-import { Nullary, Unary } from "../../../../../common/utils/functional/functional";
+import { Nullary } from "../../../../../common/utils/functional/functional";
 import { LinearScale } from "../../../../utils/linear-scale/linear-scale";
 import { HoverTooltip } from "../hover-tooltip/hover-tooltip";
 import { Interaction, isHighlight, isHover } from "../interactions/interaction";
 import { BarChartModel } from "../utils/bar-chart-model";
-import { DomainValue } from "../utils/x-domain";
 import { XScale } from "../utils/x-scale";
 import { HighlightModal } from "./highlight-modal";
 import { HighlightOverlay } from "./highlight-overlay";
@@ -36,41 +34,37 @@ interface ForegroundProps {
   xScale: XScale;
   yScale: LinearScale;
   series: ConcreteSeries;
-  getX: Unary<Datum, DomainValue>;
   model: BarChartModel;
   stage: Stage;
 }
 
 export const Foreground: React.SFC<ForegroundProps> = props => {
-  const { stage, dropHighlight, acceptHighlight, container, getX, model, series, xScale, yScale, interaction } = props;
+  const { stage, dropHighlight, acceptHighlight, container, model, series, xScale, yScale, interaction } = props;
   const rect = container.current.getBoundingClientRect();
   return <React.Fragment>
     {isHighlight(interaction) && <React.Fragment>
       <HighlightModal
         interaction={interaction}
         dropHighlight={dropHighlight}
         acceptHighlight={acceptHighlight}
-        timezone={model.timezone}
         xScale={xScale}
         yScale={yScale}
-        getX={getX}
+        model={model}
         series={series}
         rect={rect} />
       <HighlightOverlay
         interaction={interaction}
-        showPrevious={model.hasComparison}
         stage={stage}
         xScale={xScale}
         yScale={yScale}
         series={series}
-        getX={getX} />
+        model={model} />
     </React.Fragment>}
     {isHover(interaction) && <HoverTooltip
       rect={rect}
       interaction={interaction}
       xScale={xScale}
       yScale={yScale}
-      getX={getX}
       series={series}
       model={model} />}
   </React.Fragment>;

diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-modal.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-modal.tsx
@@ -14,47 +14,43 @@
  * limitations under the License.
  */
 
-import { Timezone } from "chronoshift";
-import { Datum } from "plywood";
 import React from "react";
 import { ConcreteSeries } from "../../../../../common/models/series/concrete-series";
-import { formatValue } from "../../../../../common/utils/formatter/formatter";
-import { Nullary, Unary } from "../../../../../common/utils/functional/functional";
+import { Nullary } from "../../../../../common/utils/functional/functional";
 import { HighlightModal as BaseHighlightModal } from "../../../../components/highlight-modal/highlight-modal";
 import { LinearScale } from "../../../../utils/linear-scale/linear-scale";
 import { Highlight } from "../interactions/interaction";
+import { BarChartModel } from "../utils/bar-chart-model";
 import { DomainValue } from "../utils/x-domain";
 import { XScale } from "../utils/x-scale";
 
 interface HighlightModalProps {
   interaction: Highlight;
   dropHighlight: Nullary<void>;
   acceptHighlight: Nullary<void>;
-  timezone: Timezone;
   xScale: XScale;
   yScale: LinearScale;
   series: ConcreteSeries;
-  getX: Unary<Datum, DomainValue>;
+  model: BarChartModel;
   rect: ClientRect | DOMRect;
 }
 
 export const HighlightModal: React.SFC<HighlightModalProps> = props => {
   const {
-    timezone,
+    model: { timezone, continuousSplit },
     rect: { left, top },
     interaction: { datum },
     dropHighlight,
     acceptHighlight,
     yScale,
-    getX,
     series,
     xScale } = props;
-  const xValue = getX(datum);
+  const xValue = continuousSplit.selectValue<DomainValue>(datum);
   const x = xScale.calculate(xValue) + (xScale.bandwidth() / 2);
   const yValue = series.selectValue(datum);
   const y = yScale(yValue);
   return <BaseHighlightModal
-    title={formatValue(xValue, timezone)}
+    title={continuousSplit.formatValue(datum, timezone)}
     left={left + x}
     top={top + y}
     dropHighlight={dropHighlight}

diff --git a/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-overlay.tsx b/src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-overlay.tsx
@@ -18,11 +18,11 @@ import { Datum } from "plywood";
 import React from "react";
 import { ConcreteSeries, SeriesDerivation } from "../../../../../common/models/series/concrete-series";
 import { Stage } from "../../../../../common/models/stage/stage";
-import { Unary } from "../../../../../common/utils/functional/functional";
 import { Highlighter } from "../../../../components/highlighter/highlighter";
 import { LinearScale } from "../../../../utils/linear-scale/linear-scale";
 import { TOP_PADDING } from "../bar/padding";
 import { Highlight } from "../interactions/interaction";
+import { BarChartModel } from "../utils/bar-chart-model";
 import { DomainValue } from "../utils/x-domain";
 import { XScale } from "../utils/x-scale";
 
@@ -31,9 +31,8 @@ interface HighlightOverlayProps {
   xScale: XScale;
   yScale: LinearScale;
   series: ConcreteSeries;
-  getX: Unary<Datum, DomainValue>;
   stage: Stage;
-  showPrevious: boolean;
+  model: BarChartModel;
 }
 
 function getYValue(datum: Datum, series: ConcreteSeries, includePrevious: boolean): number {
@@ -44,11 +43,11 @@ function getYValue(datum: Datum, series: ConcreteSeries, includePrevious: boolea
 }
 
 export const HighlightOverlay: React.SFC<HighlightOverlayProps> = props => {
-  const { stage, yScale, series, xScale, showPrevious, interaction: { datum }, getX } = props;
-  const xValue = getX(datum);
+  const { stage, yScale, series, xScale, model: { hasComparison, continuousSplit }, interaction: { datum } } = props;
+  const xValue = continuousSplit.selectValue<DomainValue>(datum);
   const left = xScale.calculate(xValue);
   const right = left + xScale.bandwidth();
-  const yValue = getYValue(datum, series, showPrevious);
+  const yValue = getYValue(datum, series, hasComparison);
   const top = yScale(yValue) + stage.y - TOP_PADDING;
   return <Highlighter left={left} right={right} top={top} />;
 };