Skip to content

Commit

Permalink
feat(partition): general sunburst via slice show control (#592)
Browse files Browse the repository at this point in the history
* feat(partition): control which slices/sectors are shown, for example, for general sunburst charts
* chore(partition): ignore incompliant data
  • Loading branch information
monfera authored Mar 18, 2020
1 parent 30fd07c commit 5e6a30b
Show file tree
Hide file tree
Showing 9 changed files with 177 additions and 8 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 18 additions & 7 deletions src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ export function shapeViewModel(
textMeasure: TextMeasure,
config: Config,
layers: Layer[],
facts: Relation,
rawFacts: Relation,
rawTextGetter: RawTextGetter,
valueAccessor: ValueAccessor,
specifiedValueFormatter: ValueFormatter,
Expand Down Expand Up @@ -176,11 +176,16 @@ export function shapeViewModel(

const aggregator = aggregators.sum;

// don't render anything if there are no tuples, or some are negative, or the total is not positive
const facts = rawFacts.filter((n) => {
const value = valueAccessor(n);
return Number.isFinite(value) && value >= 0;
});

// don't render anything if the total, the width or height is not positive
if (
facts.length === 0 ||
facts.some((n) => valueAccessor(n) < 0) ||
facts.reduce((p: number, n) => aggregator.reducer(p, valueAccessor(n)), aggregator.identity()) <= 0
facts.reduce((p: number, n) => aggregator.reducer(p, valueAccessor(n)), aggregator.identity()) <= 0 ||
!(width > 0) ||
!(height > 0)
) {
return nullShapeViewModel(config, diskCenter);
}
Expand All @@ -207,15 +212,21 @@ export function shapeViewModel(
? treemap(tree, treemapAreaAccessor, paddingAccessor, { x0: -width / 2, y0: -height / 2, width, height })
: sunburst(tree, sunburstAreaAccessor, { x0: 0, y0: -1 }, clockwiseSectors, specialFirstInnermostSector);

const shownChildNodes = rawChildNodes.filter((n: Part) => {
const layerIndex = entryValue(n.node).depth - 1;
const layer = layers[layerIndex];
return !layer || !layer.showAccessor || layer.showAccessor(entryKey(n.node));
});

// use the smaller of the two sizes, as a circle fits into a square
const circleMaximumSize = Math.min(innerWidth, innerHeight);
const outerRadius: Radius = (outerSizeRatio * circleMaximumSize) / 2;
const innerRadius: Radius = outerRadius - (1 - emptySizeRatio) * outerRadius;
const treeHeight = rawChildNodes.reduce((p: number, n: any) => Math.max(p, entryValue(n.node).depth), 0); // 1: pie, 2: two-ring donut etc.
const treeHeight = shownChildNodes.reduce((p: number, n: any) => Math.max(p, entryValue(n.node).depth), 0); // 1: pie, 2: two-ring donut etc.
const ringThickness = (outerRadius - innerRadius) / treeHeight;

const quadViewModel = makeQuadViewModel(
rawChildNodes.slice(1).map(
shownChildNodes.slice(1).map(
(n: Part): ShapeTreeNode => {
const node: ArrayEntry = n.node;
return {
Expand Down
11 changes: 10 additions & 1 deletion src/chart_types/partition_chart/specs/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,22 @@ import { Spec, SpecTypes } from '../../../specs/index';
import { Config, FillLabelConfig } from '../layout/types/config_types';
import { ShapeTreeNode, ValueGetter } from '../layout/types/viewmodel_types';
import { AGGREGATE_KEY } from '../layout/utils/group_by_rollup';
import { Datum, LabelAccessor, RecursivePartial, ValueAccessor, ValueFormatter } from '../../../utils/commons';
import {
Datum,
LabelAccessor,
RecursivePartial,
ShowAccessor,
ValueAccessor,
ValueFormatter,
} from '../../../utils/commons';
import { NodeColorAccessor } from '../layout/types/viewmodel_types';
import { PrimitiveValue } from '../layout/utils/group_by_rollup';

export interface Layer {
groupByRollup: IndexedAccessorFn;
nodeLabel?: LabelAccessor;
fillLabel?: Partial<FillLabelConfig>;
showAccessor?: ShowAccessor;
shape?: { fillColor: string | NodeColorAccessor };
}

Expand All @@ -48,6 +56,7 @@ const defaultProps = {
{
groupByRollup: (d: Datum, i: number) => i,
nodeLabel: (d: PrimitiveValue) => String(d),
showAccessor: () => true,
fillLabel: {},
},
],
Expand Down
1 change: 1 addition & 0 deletions src/utils/commons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -194,3 +194,4 @@ export function isNumberArray(value: unknown): value is number[] {
export type ValueFormatter = (value: number) => string;
export type ValueAccessor = (d: Datum) => number;
export type LabelAccessor = (value: PrimitiveValue) => string;
export type ShowAccessor = (value: PrimitiveValue) => boolean;
98 changes: 98 additions & 0 deletions stories/sunburst/27_heterogeneous_depth.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you 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 { Chart, Datum, Partition, PartitionLayout } from '../../src';
import { mocks } from '../../src/mocks/hierarchical/index';
import { config } from '../../src/chart_types/partition_chart/layout/config/config';
import React from 'react';
import { ShapeTreeNode } from '../../src/chart_types/partition_chart/layout/types/viewmodel_types';
import {
categoricalFillColor,
colorBrewerCategoricalStark9,
countryLookup,
productLookup,
regionLookup,
} from '../utils/utils';
import { PrimitiveValue } from '../../src/chart_types/partition_chart/layout/utils/group_by_rollup';

export const example = () => (
<Chart className="story-chart" /*size={{ width: 1200, height: 800 }}*/>
<Partition
id="spec_1"
data={mocks.miniSunburst}
valueAccessor={(d: Datum) => d.exportVal as number}
valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`}
layers={[
{
groupByRollup: (d: Datum) => d.sitc1,
nodeLabel: (d: PrimitiveValue) => d !== null && productLookup[d].name,
shape: {
fillColor: (d: ShapeTreeNode) => {
return categoricalFillColor(colorBrewerCategoricalStark9, 0.7)(d.sortIndex);
},
},
},
{
groupByRollup: (d: Datum) => countryLookup[d.dest].continentCountry.substr(0, 2),
nodeLabel: (d: PrimitiveValue) => d !== null && regionLookup[d].regionName,
shape: {
fillColor: (d: ShapeTreeNode) => {
return categoricalFillColor(colorBrewerCategoricalStark9, 0.5)(d.parent.sortIndex);
},
},
},
{
groupByRollup: (d: Datum) => d.dest,
nodeLabel: (d: PrimitiveValue) => d !== null && countryLookup[d].name,
showAccessor: (d: PrimitiveValue) => (['chn', 'hkg', 'jpn', 'kor'] as PrimitiveValue[]).indexOf(d) === -1,
shape: {
fillColor: (d: ShapeTreeNode) => {
return categoricalFillColor(colorBrewerCategoricalStark9, 0.3)(d.parent.parent.sortIndex);
},
},
},
]}
config={{
partitionLayout: PartitionLayout.sunburst,
linkLabel: {
maxCount: 0,
fontSize: 14,
},
fontFamily: 'Arial',
fillLabel: {
valueFormatter: (d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`,
fontStyle: 'italic',
textInvertible: true,
fontWeight: 900,
valueFont: {
fontFamily: 'Menlo',
fontStyle: 'normal',
fontWeight: 100,
},
},
margin: { top: 0, bottom: 0, left: 0, right: 0 },
minFontSize: 1,
idealFontSizeJump: 1.1,
outerSizeRatio: 1,
emptySizeRatio: 0,
circlePadding: 4,
backgroundColor: 'rgba(229,229,229,1)',
}}
/>
</Chart>
);
48 changes: 48 additions & 0 deletions stories/sunburst/28_not_a_number.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you 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 { Chart, Datum, Partition, PartitionLayout } from '../../src';
import { mocks } from '../../src/mocks/hierarchical/index';
import { config } from '../../src/chart_types/partition_chart/layout/config/config';
import React from 'react';
import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';

export const example = () => (
<Chart className="story-chart">
<Partition
id="spec_1"
data={mocks.pie
.slice(0, 2)
.concat(mocks.pie.slice(2, 3).map((s) => ({ ...s, exportVal: (undefined as unknown) as number })))
.concat(mocks.pie.slice(3))}
valueAccessor={(d: Datum) => d.exportVal as number}
valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`}
layers={[
{
groupByRollup: (d: Datum) => d.sitc1,
nodeLabel: (d: Datum) => productLookup[d].name,
fillLabel: { textInvertible: true },
shape: {
fillColor: indexInterpolatedFillColor(interpolatorCET2s),
},
},
]}
config={{ partitionLayout: PartitionLayout.sunburst }}
/>
</Chart>
);
2 changes: 2 additions & 0 deletions stories/sunburst/sunburst.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,3 +53,5 @@ export { example as clockwiseNoSpecial } from './23_clockwise';
export { example as linkedLabelsOnly } from './24_linked_label';
export { example as noLabels } from './25_no_labels';
export { example as percentage } from './26_percentage';
export { example as heterogeneous } from './27_heterogeneous_depth';
export { example as notANumber } from './28_not_a_number';

0 comments on commit 5e6a30b

Please sign in to comment.