feat(partition): small multiples

.eslintrc.js

@@ -56,6 +56,17 @@ module.exports = {
         : 0,
     'import/namespace': process.env.NODE_ENV === 'production' ? 2 : 0,
 
+    /**
+     **************************************************************
+     * Rules that ensure sufficient freedom of expressing intent
+     **************************************************************
+     */
+    'no-else-return': 'off',
+    'no-param-reassign': [1, { props: false }],
+    '@typescript-eslint/comma-spacing': 0,
+    'unicorn/no-nested-ternary': 0,
+    '@typescript-eslint/lines-between-class-members': ['error', 'always', { exceptAfterSingleLine: true }],
+
     /**
      *****************************************
      * Rules to consider adding/fixing later
@@ -81,8 +92,6 @@ module.exports = {
     'global-require': 1,
     'import/no-dynamic-require': 1,
     'no-shadow': 1,
-    'no-param-reassign': [1, { props: false }],
-    '@typescript-eslint/comma-spacing': 0,
     'react/no-array-index-key': 1,
     'react/prefer-stateless-function': 1,
     'react/require-default-props': 'off',
@@ -92,7 +101,6 @@ module.exports = {
     'jsx-a11y/click-events-have-key-events': 1,
     '@typescript-eslint/member-ordering': 1,
     eqeqeq: 1,
-    'unicorn/no-nested-ternary': 0,
 
     /**
      * Standard rules
@@ -107,7 +115,6 @@ module.exports = {
     'no-bitwise': 0,
     'no-void': 0,
     yoda: 0,
-    '@typescript-eslint/lines-between-class-members': ['error', 'always', { exceptAfterSingleLine: true }],
     'no-restricted-globals': 0,
     'no-case-declarations': 0,
     'no-return-await': 0,
@@ -255,6 +262,7 @@ module.exports = {
     'unicorn/no-null': 0,
     'unicorn/no-fn-reference-in-iterator': 0,
     'unicorn/prefer-query-selector': 0,
+    'unicorn/prefer-array-find': 0,
     'unicorn/no-for-loop': 0,
     'unicorn/no-reduce': 0,
     'unicorn/no-useless-undefined': 0,

.playground/playground.tsx

@@ -19,7 +19,7 @@
 
 import React from 'react';
 
-import { Example } from '../stories/wordcloud/1_wordcloud';
+import { Example } from '../stories/small_multiples/7_sunbursts';
 
 export class Playground extends React.Component {
   render() {

api/charts.api.md

@@ -1680,6 +1680,9 @@ export type ProjectedValues = {
 // @public
 export type ProjectionClickListener = (values: ProjectedValues) => void;
 
+// @public
+export type Ratio = number;
+
 // Warning: (ae-missing-release-tag) "RawTextGetter" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -1738,6 +1741,12 @@ export type RecursivePartial<T> = {
     [P in keyof T]?: T[P] extends NonAny[] ? T[P] : T[P] extends ReadonlyArray<NonAny> ? T[P] : T[P] extends (infer U)[] ? RecursivePartial<U>[] : T[P] extends ReadonlyArray<infer U> ? ReadonlyArray<RecursivePartial<U>> : T[P] extends Set<infer V> ? Set<RecursivePartial<V>> : T[P] extends Map<infer K, infer V> ? Map<K, RecursivePartial<V>> : T[P] extends NonAny ? T[P] : RecursivePartial<T[P]>;
 };
 
+// @alpha
+export type RelativeBandsPadding = {
+    outer: Ratio;
+    inner: Ratio;
+};
+
 // Warning: (ae-missing-release-tag) "RenderChangeListener" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
@@ -2036,19 +2045,20 @@ export interface SimplePadding {
 export const SmallMultiples: React_2.FunctionComponent<SmallMultiplesProps>;
 
 // @alpha (undocumented)
-export type SmallMultiplesProps = Partial<Omit<SmallMultiplesSpec, 'id' | 'chatType' | 'specType'>>;
+export type SmallMultiplesProps = Partial<Omit<SmallMultiplesSpec, 'chatType' | 'specType'>>;
 
 // @alpha (undocumented)
 export interface SmallMultiplesSpec extends Spec {
-    // (undocumented)
     splitHorizontally?: string;
-    // (undocumented)
     splitVertically?: string;
-    // (undocumented)
-    style?: {
-        verticalPanelPadding?: [number, number];
-        horizontalPanelPadding?: [number, number];
-    };
+    splitZigzag?: string;
+    style?: Partial<SmallMultiplesStyle>;
+}
+
+// @alpha
+export interface SmallMultiplesStyle {
+    horizontalPanelPadding: RelativeBandsPadding;
+    verticalPanelPadding: RelativeBandsPadding;
 }
 
 // Warning: (ae-missing-release-tag) "SORT_INDEX_KEY" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -2455,8 +2465,8 @@ export type YDomainRange = YDomainBase & DomainRange & LogScaleOptions;
 // src/chart_types/heatmap/layout/types/config_types.ts:29:13 - (ae-forgotten-export) The symbol "SizeRatio" needs to be exported by the entry point index.d.ts
 // src/chart_types/heatmap/layout/types/config_types.ts:61:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts
 // src/chart_types/heatmap/layout/types/config_types.ts:62:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts
-// src/chart_types/partition_chart/layout/types/config_types.ts:132:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts
-// src/chart_types/partition_chart/layout/types/config_types.ts:133:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts
+// src/chart_types/partition_chart/layout/types/config_types.ts:139:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts
+// src/chart_types/partition_chart/layout/types/config_types.ts:140:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

src/chart_types/goal_chart/state/selectors/geometries.ts

@@ -22,13 +22,13 @@ import createCachedSelector from 're-reselect';
 import { ChartTypes } from '../../..';
 import { SpecTypes } from '../../../../specs/constants';
 import { GlobalChartState } from '../../../../state/chart_state';
+import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+import { getSpecs } from '../../../../state/selectors/get_settings_specs';
 import { getSpecsFromStore } from '../../../../state/utils';
 import { nullShapeViewModel, ShapeViewModel } from '../../layout/types/viewmodel_types';
 import { GoalSpec } from '../../specs';
 import { render } from './scenegraph';
 
-const getSpecs = (state: GlobalChartState) => state.specs;
-
 const getParentDimensions = (state: GlobalChartState) => state.parentDimensions;
 
 /** @internal */
@@ -38,4 +38,4 @@ export const geometries = createCachedSelector(
     const goalSpecs = getSpecsFromStore<GoalSpec>(specs, ChartTypes.Goal, SpecTypes.Series);
     return goalSpecs.length === 1 ? render(goalSpecs[0], parentDimensions) : nullShapeViewModel();
   },
-)((state) => state.chartId);
+)(getChartIdSelector);

src/chart_types/goal_chart/state/selectors/picked_shapes.ts

@@ -21,6 +21,7 @@ import createCachedSelector from 're-reselect';
 
 import { LayerValue } from '../../../../specs';
 import { GlobalChartState } from '../../../../state/chart_state';
+import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
 import { BulletViewModel } from '../../layout/types/viewmodel_types';
 import { geometries } from './geometries';
 
@@ -38,7 +39,7 @@ export const getPickedShapes = createCachedSelector(
     const y = pointerPosition.y - chartCenter.y;
     return picker(x, y);
   },
-)((state) => state.chartId);
+)(getChartIdSelector);
 
 /** @internal */
 export const getPickedShapesLayerValues = createCachedSelector(
@@ -57,4 +58,4 @@ export const getPickedShapesLayerValues = createCachedSelector(
     });
     return elements;
   },
-)((state) => state.chartId);
+)(getChartIdSelector);

src/chart_types/goal_chart/state/selectors/tooltip.ts

@@ -20,6 +20,7 @@
 import createCachedSelector from 're-reselect';
 
 import { TooltipInfo } from '../../../../components/tooltip/types';
+import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
 import { getSpecOrNull } from './goal_spec';
 import { getPickedShapes } from './picked_shapes';
 
@@ -58,4 +59,4 @@ export const getTooltipInfoSelector = createCachedSelector(
 
     return tooltipInfo;
   },
-)((state) => state.chartId);
+)(getChartIdSelector);

src/chart_types/heatmap/specs/heatmap.ts

@@ -20,6 +20,7 @@
 import React from 'react';
 
 import { ChartTypes } from '../..';
+import { Predicate } from '../../../common/predicate';
 import { ScaleType } from '../../../scales/constants';
 import { SeriesScales, Spec } from '../../../specs';
 import { SpecTypes } from '../../../specs/constants';
@@ -28,7 +29,6 @@ import { Accessor, AccessorFn } from '../../../utils/accessor';
 import { Color, Datum, RecursivePartial } from '../../../utils/common';
 import { config } from '../layout/config/config';
 import { Config } from '../layout/types/config_types';
-import { Predicate } from '../utils/common';
 
 const defaultProps = {
   chartType: ChartTypes.Heatmap,

src/chart_types/heatmap/state/selectors/get_heatmap_spec.ts

@@ -20,13 +20,11 @@ import createCachedSelector from 're-reselect';
 
 import { ChartTypes } from '../../..';
 import { SpecTypes } from '../../../../specs';
-import { GlobalChartState } from '../../../../state/chart_state';
 import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+import { getSpecs } from '../../../../state/selectors/get_settings_specs';
 import { getSpecsFromStore } from '../../../../state/utils';
 import { HeatmapSpec } from '../../specs';
 
-const getSpecs = (state: GlobalChartState) => state.specs;
-
 /** @internal */
 export const getHeatmapSpecSelector = createCachedSelector([getSpecs], (specs) => {
   const spec = getSpecsFromStore<HeatmapSpec>(specs, ChartTypes.Heatmap, SpecTypes.Series);

src/chart_types/heatmap/state/selectors/get_heatmap_table.ts

@@ -18,12 +18,12 @@
  */
 import createCachedSelector from 're-reselect';
 
+import { getPredicateFn } from '../../../../common/predicate';
 import { ScaleType } from '../../../../scales/constants';
 import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
 import { getAccessorValue } from '../../../../utils/accessor';
 import { mergeXDomain } from '../../../xy_chart/domains/x_domain';
-import { getPredicateFn } from '../../utils/common';
 import { HeatmapTable } from './compute_chart_dimensions';
 import { getHeatmapSpecSelector } from './get_heatmap_spec';
 

src/chart_types/partition_chart/layout/types/config_types.ts

@@ -79,12 +79,19 @@ export interface FillFontSizeRange {
   maximizeFontSize: boolean;
 }
 
+export interface RelativeMargins {
+  left: SizeRatio;
+  right: SizeRatio;
+  top: SizeRatio;
+  bottom: SizeRatio;
+}
+
 // todo switch to `io-ts` style, generic way of combining static and runtime type info
 export interface StaticConfig extends FillFontSizeRange {
   // shape geometry
   width: number;
   height: number;
-  margin: { left: SizeRatio; right: SizeRatio; top: SizeRatio; bottom: SizeRatio };
+  margin: RelativeMargins;
   emptySizeRatio: SizeRatio;
   outerSizeRatio: SizeRatio;
   clockwiseSectors: boolean;

src/chart_types/partition_chart/layout/types/viewmodel_types.ts

@@ -26,6 +26,7 @@ import {
   PointTuple,
   PointTuples,
   Radian,
+  SizeRatio,
 } from '../../../../common/geometry';
 import { Font, VerticalAlignments } from '../../../../common/text_utils';
 import { LegendPath } from '../../../../state/actions/legend';
@@ -35,7 +36,7 @@ import { Layer } from '../../specs';
 import { config, MODEL_KEY, ValueGetterName } from '../config';
 import { ArrayNode, HierarchyOfArrays } from '../utils/group_by_rollup';
 import { LinkLabelsViewModelSpec } from '../viewmodel/link_text_layout';
-import { Config } from './config_types';
+import { Config, PartitionLayout } from './config_types';
 
 /** @internal */
 export type LinkLabelVM = {
@@ -88,7 +89,13 @@ export interface RowSet {
 }
 
 /** @internal */
-export interface QuadViewModel extends ShapeTreeNode {
+export interface SmallMultiplesIndices {
+  index: number;
+  innerIndex: number;
+}
+
+/** @internal */
+export interface QuadViewModel extends ShapeTreeNode, SmallMultiplesIndices {
   strokeWidth: number;
   strokeStyle: string;
   fillColor: string;
@@ -104,7 +111,21 @@ export interface OutsideLinksViewModel {
 export type PickFunction = (x: Pixels, y: Pixels, focus: ContinuousDomainFocus) => Array<QuadViewModel>;
 
 /** @internal */
-export type ShapeViewModel = {
+export interface PartitionSmallMultiplesModel extends SmallMultiplesIndices {
+  panelTitle: string;
+  partitionLayout: PartitionLayout;
+  top: SizeRatio;
+  left: SizeRatio;
+  width: SizeRatio;
+  height: SizeRatio;
+  innerRowCount: number;
+  innerColumnCount: number;
+  innerRowIndex: number;
+  innerColumnIndex: number;
+}
+
+/** @internal */
+export interface ShapeViewModel extends PartitionSmallMultiplesModel {
   config: Config;
   layers: Layer[];
   quadViewModel: QuadViewModel[];
@@ -114,7 +135,7 @@ export type ShapeViewModel = {
   diskCenter: PointObject;
   pickQuads: PickFunction;
   outerRadius: number;
-};
+}
 
 const defaultFont: Font = {
   fontStyle: 'normal',
@@ -125,8 +146,25 @@ const defaultFont: Font = {
   textOpacity: 1,
 };
 
+/** @internal */
+export const nullPartitionSmallMultiplesModel = (partitionLayout: PartitionLayout): PartitionSmallMultiplesModel => ({
+  index: 0,
+  innerIndex: 0,
+  panelTitle: '',
+  top: 0,
+  left: 0,
+  width: 0,
+  height: 0,
+  innerRowCount: 0,
+  innerColumnCount: 0,
+  innerRowIndex: 0,
+  innerColumnIndex: 0,
+  partitionLayout,
+});
+
 /** @internal */
 export const nullShapeViewModel = (specifiedConfig?: Config, diskCenter?: PointObject): ShapeViewModel => ({
+  ...nullPartitionSmallMultiplesModel((specifiedConfig || config).partitionLayout),
   config: specifiedConfig || config,
   layers: [],
   quadViewModel: [],

src/chart_types/partition_chart/layout/viewmodel/picked_shapes.ts

@@ -27,17 +27,10 @@ import { AGGREGATE_KEY, DEPTH_KEY, getNodeName, PARENT_KEY, PATH_KEY, SORT_INDEX
 /** @internal */
 export const pickedShapes = (
   models: ShapeViewModel[],
-  pointerPosition: Point,
+  { x, y }: Point,
   foci: ContinuousDomainFocus[],
-): QuadViewModel[] => {
-  const geoms = models[0];
-  const focus = foci[0];
-  const picker = geoms.pickQuads;
-  const { diskCenter } = geoms;
-  const x = pointerPosition.x - diskCenter.x;
-  const y = pointerPosition.y - diskCenter.y;
-  return picker(x, y, focus);
-};
+): QuadViewModel[] =>
+  models.flatMap(({ diskCenter, pickQuads }) => pickQuads(x - diskCenter.x, y - diskCenter.y, foci[0]));
 
 /** @internal */
 export function pickShapesLayerValues(shapes: QuadViewModel[]): LayerValue[][] {