WIP: basic marimekko

CONTRIBUTING.md

@@ -51,7 +51,7 @@ const <visualizationName>: React.FunctionComponent<ChartProps> = () => {
     </div>;
 };
 
-export function <visualizationName>Visualization(props: VisualizationProps) {
+export default function <visualizationName>Visualization(props: VisualizationProps) {
     return <React.Fragment>
         <DefaultVisualizationControls {...props} />
         <ChartPanel {...props} queryFactory={makeQuery} chartComponent={<visualizationName>}/>

src/client/components/vis-selector/vis-selector-menu.tsx

@@ -95,6 +95,8 @@ export class VisSelectorMenu extends React.Component<VisSelectorMenuProps, VisSe
         return null;
       case "bar-chart":
         return null;
+      case "marimekko":
+        return null;
       case "line-chart":
         const LineChartSettingsComponent = settingsComponent(visualization.name);
         return <LineChartSettingsComponent onChange={this.changeSettings as Unary<ImmutableRecord<LineChartSettings>, void>}

src/client/views/cube-view/cube-view.tsx

@@ -509,7 +509,8 @@ export class CubeView extends React.Component<CubeViewProps, CubeViewState> {
     return menuStage.within({
       left,
       right,
-      top: CONTROL_PANEL_HEIGHT
+      top: CONTROL_PANEL_HEIGHT,
+      bottom: 20 // TODO: from .cube-view .center-panel margins
     });
   }
 

src/client/visualization-settings/settings-component.ts

@@ -24,6 +24,7 @@ interface SettingsComponents {
   "bar-chart": null;
   "line-chart": typeof LineChartSettingsComponent;
   "heatmap": null;
+  "marimekko": null;
   "grid": null;
   "totals": null;
   "scatterplot": typeof ScatterplotSettingsComponent;
@@ -33,6 +34,7 @@ const Components: SettingsComponents = {
   "bar-chart": null,
   "line-chart": LineChartSettingsComponent,
   "heatmap": null,
+  "marimekko": null,
   "grid": null,
   "totals": null,
   "table": TableSettingsComponent,

src/client/visualizations/index.ts

@@ -24,6 +24,7 @@ const VISUALIZATIONS  = {
   "line-chart": () => import(/* webpackChunkName: "line-chart" */ "./line-chart/line-chart"),
   "bar-chart": () => import(/* webpackChunkName: "bar-chart" */ "./bar-chart/bar-chart"),
   "heatmap": () => import(/* webpackChunkName: "heatmap" */ "./heat-map/heat-map"),
+  "marimekko": () => import(/* webpackChunkName: "marimekko" */ "./marimekko/marimekko"),
   "grid": () => import(/* webpackChunkName: "grid" */ "./grid/grid"),
   "scatterplot": () => import(/* webpackChunkName: "scatterplot" */ "./scatterplot/scatterplot")
 };

src/client/visualizations/marimekko/marimekko.scss

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2017-2022 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 '../../imports';
+
+.marimekko .absolute {
+  @include pin-full;
+}
+
+.marimekko .rect {
+  @include ellipsis;
+  padding: 8px;
+  border: 2px solid #fff;
+}

src/client/visualizations/marimekko/marimekko.tsx

@@ -0,0 +1,209 @@
+/*
+ * Copyright 2017-2022 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 { sum } from "d3";
+import { Dataset, Datum } from "plywood";
+import React, { CSSProperties } from "react";
+import { ChartProps } from "../../../common/models/chart-props/chart-props";
+import { findDimensionByName } from "../../../common/models/dimension/dimensions";
+import { Essence } from "../../../common/models/essence/essence";
+import { percentFormatter } from "../../../common/models/series/series-format";
+import { Stage } from "../../../common/models/stage/stage";
+import { flatMap } from "../../../common/utils/functional/functional";
+import { mapValues } from "../../../common/utils/object/object";
+import makeQuery from "../../../common/utils/query/visualization-query";
+import { LegendSpot } from "../../components/pinboard-panel/pinboard-panel";
+import { selectFirstSplitDatums, selectSplitDatums } from "../../utils/dataset/selectors/selectors";
+import {
+  ChartPanel,
+  DefaultVisualizationControls,
+  VisualizationProps
+} from "../../views/cube-view/center-panel/center-panel";
+import { useSettingsContext } from "../../views/cube-view/settings-context";
+import { Legend } from "../line-chart/legend/legend";
+import "./marimekko.scss";
+
+function prepareData(data: Dataset, essence: Essence) {
+  const series = essence.getConcreteSeries().first();
+  const xSplit = essence.splits.getSplit(1);
+
+  const ySplit = essence.splits.getSplit(0);
+
+  const dataset = selectFirstSplitDatums(data);
+
+  const baseYs = dataset.map(datum => ySplit.selectValue(datum));
+
+  const xs: Record<string, Datum[]> = {};
+
+  dataset.forEach(datum => {
+    const nested = selectSplitDatums(datum);
+    const yValue = ySplit.selectValue(datum);
+    const y = {
+      [ySplit.reference]: yValue
+    };
+    nested.forEach(splitDatum => {
+      const x = String(xSplit.selectValue(splitDatum));
+      if (xs[x] === undefined) {
+        xs[x] = [];
+      }
+      xs[x].push({ ...splitDatum, ...y });
+    });
+  });
+
+  const xs2 = mapValues(xs, (data, key): Datum => {
+    const measure = {
+      [series.plywoodKey()]: d3.sum(data, datum => series.selectValue(datum))
+    };
+    const x = {
+      [xSplit.toKey()]: key
+    };
+    return {
+      ...x,
+      ...measure,
+      nest: Dataset.fromJS(data)
+    };
+  });
+
+  function stackYs(ys: Datum[]): Datum[] {
+    const sorted = flatMap(baseYs, y => {
+      const found = ys.find(datum => ySplit.selectValue(datum) === y);
+      return found ? [found] : [];
+    });
+    return sorted.map((datum, index, coll) => {
+      const y0 = sum(coll.slice(0, index), datum => series.selectValue(datum));
+
+      return {
+        ...datum,
+        y0
+      };
+    });
+  }
+
+  const xs3 = Object.values(xs2)
+    .sort((a, b) => series.selectValue(b) - series.selectValue(a))
+    .map((datum, index, coll) => {
+      const x0 = sum(coll.slice(0, index), d => series.selectValue(d));
+      const stackedNest = stackYs((datum.nest as Dataset).data);
+      return {
+        ...datum,
+        x0,
+        nest: Dataset.fromJS(stackedNest)
+      };
+    });
+
+  return xs3;
+}
+
+const X_AXIS_HEIGHT = 30;
+
+const Marimekko: React.FunctionComponent<ChartProps> = props => {
+  const { stage, data: dataset, essence } = props;
+  const { dataCube: { dimensions } } = essence;
+  const { customization } = useSettingsContext();
+  const colors = customization.visualizationColors.series;
+  const chartStage = new Stage({
+    x: 10,
+    y: 20,
+    height: stage.height - 30,
+    width: stage.width - 20
+  });
+
+  const series = essence.getConcreteSeries().first();
+
+  const ySplit = essence.splits.getSplit(0);
+  const xSplit = essence.splits.getSplit(1);
+  const yDimension = findDimensionByName(dimensions, ySplit.reference);
+  const colorValues = selectFirstSplitDatums(dataset).map(datum => String(ySplit.selectValue(datum)));
+
+  const colorScale = d3.scaleOrdinal<string>()
+    .range(colors)
+    .domain(colorValues);
+
+  const data = prepareData(dataset, essence);
+
+  const total = sum(data, datum => series.selectValue(datum));
+  const xScale = d3.scaleLinear()
+    .range([0, chartStage.width])
+    .domain([0, total]);
+
+  const stackHeight = chartStage.height - X_AXIS_HEIGHT;
+
+  return <>
+    <LegendSpot>
+      <Legend values={colorValues} title={ySplit.getTitle(yDimension)}/>
+    </LegendSpot>
+    <div className="absolute" style={chartStage.getLeftTop()}>
+      {data.map(datum => {
+        const x = series.selectValue(datum);
+        const x0 = datum.x0 as number;
+        const name = String(xSplit.selectValue(datum));
+        const left = xScale(x0);
+        const width = xScale(x);
+        const ys = (datum.nest as Dataset).data;
+
+        const yScale = d3.scaleLinear()
+          .range([0, stackHeight])
+          .domain([0, x]);
+
+        return (
+          <div className="absolute" style={{ left, width }} key={name}>
+            <span>
+              {name}: {series.formatter()(x)} ({percentFormatter(x / total)})
+            </span>
+            <div className="absolute" style={{ top: X_AXIS_HEIGHT }}>
+              {ys.map(datum => {
+                const y = series.selectValue(datum);
+                const y0 = datum.y0 as number;
+                const name = String(ySplit.selectValue(datum));
+
+                const top = yScale(y0);
+                const height = yScale(y);
+                const width = xScale(x);
+
+                const backgroundColor = colorScale(name);
+                const textColor = d3.hsl(backgroundColor).l > 0.5 ? "#000" : "#fff";
+
+                const styles: CSSProperties = {
+                  top,
+                  height,
+                  width,
+                  backgroundColor,
+                  color: textColor
+                };
+
+                return <div
+                  key={name}
+                  className="absolute rect"
+                  style={styles}
+                >
+                  <span>{name}: {series.formatter()(y)} ({percentFormatter(y / x)})</span>
+                </div>;
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  </>;
+};
+
+export default function marimekkoVisualization(props: VisualizationProps) {
+  return <React.Fragment>
+    <DefaultVisualizationControls {...props} />
+    <ChartPanel {...props} queryFactory={makeQuery} chartComponent={Marimekko}/>
+  </React.Fragment>;
+}

src/client/visualizations/scatterplot/utils/get-plotting-data.ts

@@ -24,7 +24,7 @@ import { LinearScale } from "../../../utils/linear-scale/linear-scale";
 const MARGIN = 40;
 const X_AXIS_HEIGHT = 50;
 const Y_AXIS_WIDTH = 50;
-const BREAKPOINT_SMALL = 768;
+const BREAKPOINT_SMALL = 748;
 const TICK_COUNT = 10;
 const EXTENT_EXTEND_FACTOR = 0.05;
 const X_AXIS_LABEL_OFFSET = 55;

src/common/models/series/series-format.ts

@@ -53,7 +53,7 @@ export function formatFnFactory(format: string): (n: number) => string {
 export const exactFormat = "0,0";
 const exactFormatter = formatFnFactory(exactFormat);
 export const percentFormat = "0[.]00%";
-const percentFormatter = formatFnFactory(percentFormat);
+export const percentFormatter = formatFnFactory(percentFormat);
 export const measureDefaultFormat = "0,0.0 a";
 export const defaultFormatter = formatFnFactory(measureDefaultFormat);
 

src/common/models/visualization-manifest/visualization-manifest.ts

@@ -90,7 +90,7 @@ export class Resolve {
   }
 }
 
-export type Visualization = "heatmap" | "table" | "totals" | "bar-chart" | "line-chart" | "grid" | "scatterplot";
+export type Visualization = "heatmap" | "table" | "totals" | "bar-chart" | "line-chart" | "grid" | "scatterplot" | "marimekko";
 
 export class VisualizationManifest<T extends object = {}> {
   constructor(

src/common/utils/object/object.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { assoc, Unary } from "../functional/functional";
+import { assoc, Binary, Unary } from "../functional/functional";
 import { isTruthy } from "../general/general";
 
 export function extend(source: any, target: any): any {
@@ -37,9 +37,9 @@ export function omitFalsyValues<T>(obj: T): Partial<T> {
 
 type Key = string;
 
-export function mapValues<K extends Key, S, T>(obj: Record<K, S>, fn: Unary<S, T>): Record<K, T> {
+export function mapValues<K extends Key, S, T>(obj: Record<K, S>, fn: Binary<S, K, T>): Record<K, T> {
   return Object.keys(obj).reduce((result: Record<K, T>, key: K) => {
-    result[key] = fn(obj[key]);
+    result[key] = fn(obj[key], key);
     return result;
   }, {} as Record<K, T>);
 }

src/common/visualization-manifests/heat-map/heat-map.ts

@@ -60,12 +60,12 @@ const rulesEvaluator = visualizationDependentEvaluatorBuilder
   })
   .build();
 
-const suggestRemovingSplits = ({ splits }: ActionVariables) => [{
+export const suggestRemovingSplits = ({ splits }: ActionVariables) => [{
   description: splits.length() === 3 ? "Remove last split" : `Remove last ${splits.length() - 2} splits`,
   adjustment: { splits: splits.slice(0, 2) }
 }];
 
-const suggestAddingSplits = ({ dataCube, splits }: ActionVariables) =>
+export const suggestAddingSplits = ({ dataCube, splits }: ActionVariables) =>
   allDimensions(dataCube.dimensions)
     .filter(dimension => !splits.hasSplitOn(dimension))
     .slice(0, 2)
@@ -76,7 +76,7 @@ const suggestAddingSplits = ({ dataCube, splits }: ActionVariables) =>
       }
     }));
 
-const suggestAddingMeasure = ({ dataCube, series }: ActionVariables) => {
+export const suggestAddingMeasure = ({ dataCube, series }: ActionVariables) => {
   const firstMeasure = allMeasures(dataCube.measures)[0];
   return [{
     description: `Add measure ${firstMeasure.title}`,
@@ -86,7 +86,8 @@ const suggestAddingMeasure = ({ dataCube, series }: ActionVariables) => {
   }];
 };
 
-const suggestRemovingMeasures = ({ series }: ActionVariables) => [{
+// TODO: Move these exports to commons
+export const suggestRemovingMeasures = ({ series }: ActionVariables) => [{
   description: series.count() === 2 ? "Remove last measure" : `Remove last ${series.count() - 1} measures`,
   adjustment: {
     series: series.takeFirst()