Handle time shift on bar-chart

src/client/utils/extent/extent.mocha.ts

@@ -0,0 +1,87 @@
+/*
+ * Copyright 2017-2019 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 { expect } from "chai";
+import { Datum } from "plywood";
+import { Measure } from "../../../common/models/measure/measure";
+import { SeriesDerivation } from "../../../common/models/series/concrete-series";
+import { MeasureConcreteSeries } from "../../../common/models/series/measure-concrete-series";
+import { MeasureSeries } from "../../../common/models/series/measure-series";
+import { datumsExtent, Selector, seriesSelectors } from "./extent";
+
+describe("extent", () => {
+  describe("seriesSelectors", () => {
+    const reference = "count";
+    const seriesFixture = new MeasureConcreteSeries(
+      new MeasureSeries({ reference }),
+      Measure.fromJS({ title: "Count", name: reference, formula: "$main.count()" }));
+
+    const datumFixture = {
+      [seriesFixture.plywoodKey()]: 42,
+      [seriesFixture.plywoodKey(SeriesDerivation.PREVIOUS)]: 101
+    } as Datum;
+
+    describe("hasComparison is false", () => {
+      it("should return one selector", () => {
+        const selectors = seriesSelectors(seriesFixture, false);
+        expect(selectors).to.have.length(1);
+      });
+
+      it("should return selector which pick current value", () => {
+        const [selector] = seriesSelectors(seriesFixture, false);
+        expect(selector(datumFixture)).to.be.equal(42);
+      });
+    });
+
+    describe("hasComparison is true", () => {
+      it("should return two selectors", () => {
+        const selectors = seriesSelectors(seriesFixture, true);
+        expect(selectors).to.have.length(2);
+      });
+
+      it("should return selector which pick current value", () => {
+        const [selector] = seriesSelectors(seriesFixture, true);
+        expect(selector(datumFixture)).to.be.equal(42);
+      });
+
+      it("should return selector which pick previous value", () => {
+        const [, selector] = seriesSelectors(seriesFixture, true);
+        expect(selector(datumFixture)).to.be.equal(101);
+      });
+    });
+  });
+
+  describe("datumsExtent", () => {
+    const fooSelector: Selector = d => d.foo as number;
+    const barSelector: Selector = d => d.bar as number;
+
+    const datumsFixture = [
+      { foo: 0, bar: 100 },
+      { foo: 1, bar: -200 },
+      { foo: 3, bar: 4 }
+    ];
+
+    it("should pick extent by one selector", () => {
+      const selectors = [fooSelector];
+      expect(datumsExtent(datumsFixture, selectors)).to.be.deep.equal([0, 3]);
+    });
+
+    it("should pick extent by two selectors", () => {
+      const selectors = [fooSelector, barSelector];
+      expect(datumsExtent(datumsFixture, selectors)).to.be.deep.equal([-200, 100]);
+    });
+  });
+});

src/client/utils/extent/extent.ts

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2017-2019 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 * as d3 from "d3";
+import { Datum } from "plywood";
+import { ConcreteSeries, SeriesDerivation } from "../../../common/models/series/concrete-series";
+import { Unary } from "../../../common/utils/functional/functional";
+import { readNumber } from "../../../common/utils/general/general";
+
+export type Selector = Unary<Datum, number>;
+export type Extent = [number, number];
+
+export function seriesSelectors(series: ConcreteSeries, hasComparison: boolean): Selector[] {
+  const get = (d: Datum) => readNumber(series.selectValue(d));
+  if (!hasComparison) return [get];
+  return [
+    get,
+    (d: Datum) => readNumber(series.selectValue(d, SeriesDerivation.PREVIOUS))
+  ];
+}
+
+export function datumsExtent(datums: Datum[], selectors: Selector[]): Extent {
+  return selectors.reduce((acc, selector) => {
+    const extent =  d3.extent(datums, selector);
+    return d3.extent([...extent, ...acc]);
+  }, [0, 0]) as Extent;
+}

src/client/visualizations/bar-chart/improved-bar-chart/bars/bar.tsx

@@ -16,28 +16,31 @@
 
 import { Datum } from "plywood";
 import * as 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 { DomainValue } from "../utils/x-domain";
 import { XScale } from "../utils/x-scale";
 
-interface BarProps {
+export const TOP_PADDING = 5;
+
+interface SingleBarProps {
   datum: Datum;
   yScale: LinearScale;
   xScale: XScale;
-  getY: Unary<Datum, number>;
+  series: ConcreteSeries;
   getX: Unary<Datum, DomainValue>;
   maxHeight: number;
 }
 
-export const BAR_PADDING = 3;
+const SIDE_PADDING = 5;
 
-export const Bar: React.SFC<BarProps> = props => {
-  const { datum, xScale, yScale, getX, getY, maxHeight } = props;
+const SingleBar: React.SFC<SingleBarProps> = props => {
+  const { datum, xScale, yScale, getX, series, maxHeight } = props;
   const x = getX(datum);
-  const xPos = xScale.calculate(x) + BAR_PADDING;
-  const width = xScale.rangeBand() - (2 * BAR_PADDING);
-  const y = getY(datum);
+  const xPos = xScale.calculate(x) + SIDE_PADDING;
+  const width = xScale.rangeBand() - (2 * SIDE_PADDING);
+  const y = series.selectValue(datum);
   const yPos = yScale(y);
   const height = maxHeight - yPos;
 
@@ -48,3 +51,58 @@ export const Bar: React.SFC<BarProps> = props => {
     width={width}
     height={height} />;
 };
+
+interface TimeShiftBarProps {
+  datum: Datum;
+  yScale: LinearScale;
+  xScale: XScale;
+  series: ConcreteSeries;
+  getX: Unary<Datum, DomainValue>;
+  maxHeight: number;
+}
+
+const TimeShiftBar: React.SFC<TimeShiftBarProps> = props => {
+  const { datum, xScale, yScale, getX, series, maxHeight } = props;
+  const x = getX(datum);
+  const xStart = xScale.calculate(x);
+  const rangeBand = xScale.rangeBand();
+  const fullWidth = rangeBand - 2 * SIDE_PADDING;
+  const barWidth = fullWidth * 2 / 3;
+
+  const yCurrent = series.selectValue(datum);
+  const yPrevious = series.selectValue(datum, SeriesDerivation.PREVIOUS);
+  const yCurrentStart = yScale(yCurrent);
+  const yPreviousStart = yScale(yPrevious);
+
+  return <React.Fragment>
+    <rect
+      className="bar-chart-bar"
+      x={xStart + SIDE_PADDING}
+      y={yCurrentStart}
+      width={barWidth}
+      height={maxHeight - yCurrentStart} />
+    <rect
+      className="bar-chart-bar-previous"
+      x={xStart + rangeBand - SIDE_PADDING - barWidth}
+      y={yPreviousStart}
+      width={barWidth}
+      height={maxHeight - yPreviousStart} />
+  </React.Fragment>;
+};
+
+interface BarProps {
+  datum: Datum;
+  yScale: LinearScale;
+  xScale: XScale;
+  series: ConcreteSeries;
+  getX: Unary<Datum, DomainValue>;
+  showPrevious: boolean;
+  maxHeight: number;
+}
+
+export const Bar: React.SFC<BarProps> = props => {
+  const { showPrevious, ...otherProps } = props;
+  return showPrevious ?
+    <TimeShiftBar {...otherProps} /> :
+    <SingleBar {...otherProps} />;
+};

src/client/visualizations/bar-chart/improved-bar-chart/bars/bars.scss

@@ -21,6 +21,11 @@
     @include css-variable(fill, brand);
   }
 
+  .bar-chart-bar-previous {
+    @include css-variable(fill, main-time-area);
+  }
+
+
   .bar-chart-total {
     position: absolute;
     top: 15px;

src/client/visualizations/bar-chart/improved-bar-chart/bars/bars.tsx

@@ -29,6 +29,7 @@ import { Interaction } from "../interactions/interaction";
 import { calculateChartStage } from "../utils/layout";
 import { firstSplitRef } from "../utils/splits";
 import { xGetter, XScale } from "../utils/x-scale";
+import { yExtent } from "../utils/y-extent";
 import { Background } from "./background";
 import { Bar } from "./bar";
 import "./bars.scss";
@@ -56,12 +57,9 @@ export class Bars extends React.Component<BarsProps> {
     const chartStage = calculateChartStage(stage);
     const firstSplitReference = firstSplitRef(essence);
     const getX = xGetter(firstSplitReference);
-    const getY = (datum: Datum) => series.selectValue(datum);
-    // TODO: move outside line chart
     const datums = selectFirstSplitDatums(dataset);
-
-    const yExtent = d3.extent(datums, getY);
-    const yScale = getScale(yExtent, chartStage.height);
+    const extent = yExtent(datums, series, essence);
+    const yScale = getScale(extent, chartStage.height);
 
     return <div
       ref={this.container}
@@ -82,7 +80,8 @@ export class Bars extends React.Component<BarsProps> {
               datum={datum}
               yScale={yScale}
               xScale={xScale}
-              getY={getY}
+              series={series}
+              showPrevious={essence.hasComparison()}
               getX={getX}
               maxHeight={chartStage.height} />)}
           </g>

src/client/visualizations/bar-chart/improved-bar-chart/foreground/foreground.tsx

@@ -58,6 +58,7 @@ export const Foreground: React.SFC<ForegroundProps> = props => {
         rect={rect} />
       <HighlightOverlay
         interaction={interaction}
+        showPrevious={essence.hasComparison()}
         stage={stage}
         xScale={xScale}
         yScale={yScale}

src/client/visualizations/bar-chart/improved-bar-chart/foreground/highlight-overlay.tsx

@@ -16,12 +16,12 @@
 
 import { Datum } from "plywood";
 import * as React from "react";
-import { ConcreteSeries } from "../../../../../common/models/series/concrete-series";
+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 { BAR_PADDING } from "../bars/bar";
+import { TOP_PADDING } from "../bars/bar";
 import { Highlight } from "../interactions/interaction";
 import { DomainValue } from "../utils/x-domain";
 import { XScale } from "../utils/x-scale";
@@ -33,14 +33,22 @@ interface HighlightOverlayProps {
   series: ConcreteSeries;
   getX: Unary<Datum, DomainValue>;
   stage: Stage;
+  showPrevious: boolean;
+}
+
+function getYValue(datum: Datum, series: ConcreteSeries, includePrevious: boolean): number {
+  if (!includePrevious) {
+    return series.selectValue(datum);
+  }
+  return Math.max(series.selectValue(datum), series.selectValue(datum, SeriesDerivation.PREVIOUS));
 }
 
 export const HighlightOverlay: React.SFC<HighlightOverlayProps> = props => {
-  const { stage, yScale, series, xScale, interaction: { datum }, getX } = props;
+  const { stage, yScale, series, xScale, showPrevious, interaction: { datum }, getX } = props;
   const xValue = getX(datum);
   const left = xScale.calculate(xValue);
   const right = left + xScale.rangeBand();
-  const yValue = series.selectValue(datum);
-  const top = yScale(yValue) + stage.y - BAR_PADDING;
+  const yValue = getYValue(datum, series, showPrevious);
+  const top = yScale(yValue) + stage.y - TOP_PADDING;
   return <Highlighter left={left} right={right} top={top} />;
 };

src/client/visualizations/bar-chart/improved-bar-chart/utils/calculate-segment-stage.mocha.ts

@@ -31,7 +31,7 @@ describe("calculateSegmentStage", () => {
     });
 
     it("should set width domain size * minimal bar width if big enough", () => {
-      const minimalBarWidth = 20;
+      const minimalBarWidth = 30;
       const domainSize = 2000;
       const stage = calculateSegmentStage(bodyStage, domainSize, 1);
       expect(stage.width).to.be.equal(domainSize * minimalBarWidth);

src/client/visualizations/bar-chart/improved-bar-chart/utils/calculate-segment-stage.ts

@@ -16,7 +16,7 @@
 
 import { Stage } from "../../../../../common/models/stage/stage";
 
-const BAR_MIN_WIDTH = 20;
+const BAR_MIN_WIDTH = 30;
 const MIN_CHART_HEIGHT = 200;
 
 export function calculateSegmentStage(bodyStage: Stage, domainSize: number, seriesCount: number): Stage {

src/client/visualizations/bar-chart/improved-bar-chart/utils/y-extent.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 { Essence } from "../../../../../common/models/essence/essence";
+import { ConcreteSeries } from "../../../../../common/models/series/concrete-series";
+import { datumsExtent, Extent, seriesSelectors } from "../../../../utils/extent/extent";
+
+export function yExtent(datums: Datum[], series: ConcreteSeries, essence: Essence): Extent {
+  return datumsExtent(datums, seriesSelectors(series, essence.hasComparison()));
+}