Total on grid

src/client/components/tabular-scroller/measures/measure-row.tsx

@@ -15,6 +15,7 @@
  */
 
 import * as d3 from "d3";
+import { Map } from "immutable";
 import { Datum } from "plywood";
 import * as React from "react";
 import { Essence } from "../../../../common/models/essence/essence";
@@ -29,25 +30,26 @@ interface MeasureRowProps {
   style: React.CSSProperties;
   datum: Datum;
   cellWidth: number;
-  scales: Array<d3.scale.Linear<number, number>>;
+  scales: Map<string, d3.scale.Linear<number, number>>;
+  showBar: boolean;
 }
 
 export const MeasureRow: React.SFC<MeasureRowProps> = props => {
-  const { datum, scales, cellWidth, highlight, dimmed, style, essence } = props;
+  const { datum, showBar, scales, cellWidth, highlight, dimmed, style, essence } = props;
 
   const concreteSeries = essence.getConcreteSeries().toArray();
 
   return <div
     className={classNames("measure-row", { highlight, dimmed })}
     style={style}
   >
-    {concreteSeries.map((series, i) => {
+    {concreteSeries.map(series => {
       return <MeasureValue
         key={series.reactKey()}
         series={series}
         datum={datum}
         highlight={highlight}
-        scale={scales[i]}
+        barScale={showBar ? scales.get(series.reactKey()) : null}
         cellWidth={cellWidth}
         showPrevious={essence.hasComparison()} />;
     })}

src/client/components/tabular-scroller/measures/measure-rows.tsx

@@ -15,27 +15,28 @@
  */
 
 import * as d3 from "d3";
+import { Map } from "immutable";
 import { Datum, PseudoDatum } from "plywood";
 import * as React from "react";
 import { Essence } from "../../../../common/models/essence/essence";
+import { Predicate } from "../../../../common/utils/functional/functional";
 import { VisibleRows } from "../visible-rows/visible-rows";
 import { MeasureRow } from "./measure-row";
 
 interface MeasureRowsProps {
   visibleRowsIndexRange: [number, number];
   essence: Essence;
   highlightedRowIndex: number | null;
-  scales: Array<d3.scale.Linear<number, number>>;
+  scales: Map<string, d3.scale.Linear<number, number>>;
   data: PseudoDatum[];
   hoverRow?: Datum;
   cellWidth: number;
   rowWidth: number;
+  showBarPredicate: Predicate<Datum>;
 }
 
 export const MeasureRows: React.SFC<MeasureRowsProps> = props => {
-  const { rowWidth, essence, cellWidth, hoverRow, scales, data, visibleRowsIndexRange, highlightedRowIndex } = props;
-
-  const lastLevel = essence.splits.length();
+  const { rowWidth, showBarPredicate, essence, cellWidth, hoverRow, scales, data, visibleRowsIndexRange, highlightedRowIndex } = props;
 
   return <VisibleRows
     visibleRowsIndexRange={visibleRowsIndexRange}
@@ -45,7 +46,7 @@ export const MeasureRows: React.SFC<MeasureRowsProps> = props => {
     renderRow={props => {
       const { index, top, datum, highlight, dimmed } = props;
       const rowStyle: React.CSSProperties = { top, width: rowWidth };
-      const showScales = datum["__nest"] === lastLevel;
+      const showBar = showBarPredicate(datum);
 
       return <MeasureRow
         key={`row_${index}`}
@@ -55,6 +56,7 @@ export const MeasureRows: React.SFC<MeasureRowsProps> = props => {
         style={rowStyle}
         datum={datum}
         cellWidth={cellWidth}
-        scales={showScales && scales} />;
+        showBar={showBar}
+        scales={scales} />;
     }} />;
 };

src/client/components/tabular-scroller/measures/measure-value.tsx

@@ -25,14 +25,14 @@ import { MeasureCell } from "./measure-cell";
 interface MeasureValueProps {
   series: ConcreteSeries;
   datum: Datum;
-  scale: d3.scale.Linear<number, number>;
+  barScale?: d3.scale.Linear<number, number>;
   cellWidth: number;
   showPrevious: boolean;
   highlight: boolean;
 }
 
 export const MeasureValue: React.SFC<MeasureValueProps> = props => {
-  const { series, datum, scale, highlight, showPrevious, cellWidth } = props;
+  const { series, datum, barScale, highlight, showPrevious, cellWidth } = props;
 
   const currentValue = series.selectValue(datum);
 
@@ -41,7 +41,7 @@ export const MeasureValue: React.SFC<MeasureValueProps> = props => {
     width={cellWidth}
     value={series.formatValue(datum)}
   >
-    {scale && <MeasureBackground highlight={highlight} width={scale(currentValue)} />}
+    {barScale && <MeasureBackground highlight={highlight} width={barScale(currentValue)} />}
   </MeasureCell>;
 
   if (!showPrevious) {
@@ -56,7 +56,7 @@ export const MeasureValue: React.SFC<MeasureValueProps> = props => {
       key={series.reactKey(SeriesDerivation.PREVIOUS)}
       width={cellWidth}
       value={series.formatValue(datum, SeriesDerivation.PREVIOUS)}>
-      {scale && <MeasureBackground highlight={highlight} width={scale(previousValue)} />}
+      {barScale && <MeasureBackground highlight={highlight} width={barScale(previousValue)} />}
     </MeasureCell>
     <MeasureCell
       width={cellWidth}

src/client/components/tabular-scroller/splits/flattened-splits.tsx

@@ -16,25 +16,26 @@
 
 import { Datum, PseudoDatum } from "plywood";
 import * as React from "react";
-import { Essence } from "../../../../common/models/essence/essence";
 import { SPACE_LEFT } from "../dimensions";
 import { VisibleRows } from "../visible-rows/visible-rows";
-import { FlattenedSplitColumns } from "./flattened-split-columns";
 import "./flattened-splits.scss";
 import { SplitValue } from "./split-value";
 
+export interface SplitLabelProps {
+  datum: Datum;
+}
+
 interface FlattenedSplitsProps {
   visibleRowsIndexRange: [number, number];
-  essence: Essence;
   data: PseudoDatum[];
   hoverRow?: Datum;
   segmentWidth: number;
   highlightedRowIndex: number | null;
+  splitLabel: React.ComponentType<SplitLabelProps>;
 }
 
 export const FlattenedSplits: React.SFC<FlattenedSplitsProps> = props => {
-  const { essence, data, highlightedRowIndex, hoverRow, visibleRowsIndexRange, segmentWidth } = props;
-  const { splits: { splits }, timezone } = essence;
+  const { splitLabel: SplitLabel, data, highlightedRowIndex, hoverRow, visibleRowsIndexRange, segmentWidth } = props;
 
   return <div className="flattened-splits-rows">
     <VisibleRows
@@ -52,7 +53,7 @@ export const FlattenedSplits: React.SFC<FlattenedSplitsProps> = props => {
           style={segmentStyle}
           dimmed={dimmed}
           highlight={highlight}>
-          <FlattenedSplitColumns splits={splits} datum={datum} timezone={timezone} />
+          <SplitLabel datum={datum} />
         </SplitValue>;
       }} />
   </div>;

src/client/visualizations/table/utils/get-scales-for-columns.mocha.ts → src/client/components/tabular-scroller/utils/get-scales-for-columns.mocha.ts

@@ -28,18 +28,22 @@ const essenceFixture = EssenceFixtures
     stringSplitCombine("channel", { sort: { reference: "delta", direction: SortDirection.descending }, limit: 50 })
   ), VisStrategy.KeepAlways);
 
+const deltaSeries = essenceFixture.getConcreteSeries().get(0);
+const countSeries = essenceFixture.getConcreteSeries().get(1);
+const addedSeries = essenceFixture.getConcreteSeries().get(2);
+
 const dataMock = [
-  { __nest: 1, delta: -20, count: 10000, added: -12 },
-  { __nest: 1, delta: -10, count: 1312, added: 61 },
-  { __nest: 1, delta: 0, count: 2312, added: Infinity },
-  { __nest: 1, delta: 10, count: 9231, added: -Infinity },
-  { __nest: 1, delta: 20, count: 100, added: NaN }
+  { delta: -20, count: 10000, added: -12 },
+  { delta: -10, count: 1312, added: 61 },
+  { delta: 0, count: 2312, added: Infinity },
+  { delta: 10, count: 9231, added: -Infinity },
+  { delta: 20, count: 100, added: NaN }
 ];
 
 describe("getScalesForColumns", () => {
   it("should return scale for each series", () => {
     const scales = getScalesForColumns(essenceFixture, dataMock);
-    expect(scales).to.have.length(3);
+    expect(scales.count()).to.be.equal(3);
   });
 
   it("should return scales with range [0, 100]", () => {
@@ -51,27 +55,27 @@ describe("getScalesForColumns", () => {
 
   describe("delta scale", () => {
     it("should return scale with correct domain", () => {
-      const [deltaScale] = getScalesForColumns(essenceFixture, dataMock);
-      expect(deltaScale.domain()).to.be.deep.equal([-20, 20]);
+      const scales = getScalesForColumns(essenceFixture, dataMock);
+      expect(scales.get(deltaSeries.reactKey()).domain()).to.be.deep.equal([-20, 20]);
     });
   });
 
   describe("count scale", () => {
     it("should return scale with included 0 in domain", () => {
-      const [, countScale] = getScalesForColumns(essenceFixture, dataMock);
-      expect(countScale.domain()).to.be.deep.equal([0, 10000]);
+      const scales = getScalesForColumns(essenceFixture, dataMock);
+      expect(scales.get(countSeries.reactKey()).domain()).to.be.deep.equal([0, 10000]);
     });
   });
 
   describe("added scale", () => {
     it("should handle non numeric values", () => {
-      const [, , addedScale] = getScalesForColumns(essenceFixture, dataMock);
-      expect(addedScale.domain()).to.be.deep.equal([-Infinity, Infinity]);
+      const scales = getScalesForColumns(essenceFixture, dataMock);
+      expect(scales.get(addedSeries.reactKey()).domain()).to.be.deep.equal([-Infinity, Infinity]);
     });
   });
 
   it("should handle missing values", () => {
-    const [deltaScale] = getScalesForColumns(essenceFixture, []);
-    expect(deltaScale.domain()).to.be.deep.equal([0, 0]);
+    const scales = getScalesForColumns(essenceFixture, []);
+    expect(scales.get(deltaSeries.reactKey()).domain()).to.be.deep.equal([0, 0]);
   });
 });

src/client/visualizations/table/utils/get-scales-for-columns.ts → src/client/components/tabular-scroller/utils/get-scales-for-columns.ts

@@ -14,17 +14,17 @@
  * limitations under the License.
  */
 import * as d3 from "d3";
+import { Map } from "immutable";
 import { Datum, PseudoDatum } from "plywood";
 import { Essence } from "../../../../common/models/essence/essence";
 
-export function getScalesForColumns(essence: Essence, flatData: PseudoDatum[]): Array<d3.scale.Linear<number, number>> {
-  const concreteSeries = essence.getConcreteSeries().toArray();
-  const splitLength = essence.splits.length();
-
-  return concreteSeries.map(series => {
-    const measureValues = flatData
-      .filter((d: Datum) => d["__nest"] === splitLength)
-      .map((d: Datum) => series.selectValue(d));
+export function getScalesForColumns(essence: Essence, flatData: PseudoDatum[]): Map<string, d3.scale.Linear<number, number>> {
+  return essence.getConcreteSeries()
+    .groupBy(series => series.reactKey())
+    .map(seriesCollection => seriesCollection.first())
+    .toMap()
+    .map(series => {
+    const measureValues = flatData.map((d: Datum) => series.selectValue(d));
 
     return d3.scale.linear()
       // Ensure that 0 is in there

src/client/utils/dataset/selectors/selectors.ts

@@ -24,7 +24,7 @@ export const selectMainDatum = (dataset: Dataset): Datum =>
 export const selectSplitDataset = (datum: Datum): Dataset =>
   datum[SPLIT] as Dataset;
 
-const selectDatums = (dataset: Dataset): Datum[] =>
+export const selectDatums = (dataset: Dataset): Datum[] =>
   dataset.data;
 
 export const selectSplitDatums: (datum: Datum) => Datum[] =