test: adding stories

elastic · Mar 4, 2020 · 2c5a5e1 · 2c5a5e1
1 parent 2fdd016
commit 2c5a5e1
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 7 deletions.
diff --git a/src/chart_types/partition_chart/layout/types/viewmodel_types.ts b/src/chart_types/partition_chart/layout/types/viewmodel_types.ts
@@ -108,5 +108,4 @@ export interface ShapeTreeNode extends TreeNode, SectorGeomSpecY {
 export type RawTextGetter = (node: ShapeTreeNode) => string;
 export type ValueGetterFunction = (node: ShapeTreeNode) => number;
 export type ValueGetter = ValueGetterFunction | ValueGetterName;
-export type ValueFormatter = (value: number) => string;
 export type NodeColorAccessor = (d: ShapeTreeNode, index: number, array: HierarchyOfArrays) => string;
diff --git a/src/chart_types/partition_chart/layout/viewmodel/fill_text_layout.ts b/src/chart_types/partition_chart/layout/viewmodel/fill_text_layout.ts
@@ -9,7 +9,6 @@ import {
   RowSet,
   RowSpace,
   ShapeTreeNode,
-  ValueFormatter,
   ValueGetterFunction,
 } from '../types/viewmodel_types';
 import { Box, Font, PartialFont, TextMeasure } from '../types/types';

diff --git a/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts b/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts
@@ -1,13 +1,11 @@
 import { Distance } from '../types/geometry_types';
 import { Config } from '../types/config_types';
 import { TAU, trueBearingToStandardPositionAngle } from '../utils/math';
-import { LinkLabelVM, ShapeTreeNode, ValueFormatter, ValueGetterFunction } from '../types/viewmodel_types';
+import { LinkLabelVM, ShapeTreeNode, ValueGetterFunction } from '../types/viewmodel_types';
 import { meanAngle } from '../geometry';
 import { TextMeasure } from '../types/types';
-import { AGGREGATE_KEY } from '../utils/group_by_rollup';
 import { ValueFormatter } from '../../../../utils/commons';
 
-// todo modularize this large function
 export function linkTextLayout(
   measure: TextMeasure,
   config: Config,

diff --git a/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts b/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts
@@ -17,7 +17,6 @@ import {
   RowSet,
   ShapeTreeNode,
   ShapeViewModel,
-  ValueFormatter,
   ValueGetterFunction,
 } from '../types/viewmodel_types';
 import { Layer } from '../../specs/index';
@@ -45,7 +44,7 @@ import {
   parentAccessor,
   sortIndexAccessor,
 } from '../utils/group_by_rollup';
-import { ValueAccessor } from '../../../../utils/commons';
+import { ValueAccessor, ValueFormatter } from '../../../../utils/commons';
 
 function paddingAccessor(n: ArrayEntry) {
   return entryValue(n).depth > 1 ? 1 : [0, 2][entryValue(n).depth];

diff --git a/stories/sunburst/26_percentage.tsx b/stories/sunburst/26_percentage.tsx
@@ -0,0 +1,77 @@
+import { Chart, Datum, Partition, PartitionLayout } from '../../src';
+import { mocks } from '../../src/mocks/hierarchical/index';
+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';
+
+export const example = () => (
+  <Chart className="story-chart">
+    <Partition
+      id="spec_26"
+      data={mocks.miniSunburst}
+      valueAccessor={(d: Datum) => d.exportVal as number}
+      valueGetter="percent"
+      valueFormatter={(d: number) => `${Math.round(d)}%`}
+      layers={[
+        {
+          groupByRollup: (d: Datum) => d.sitc1,
+          nodeLabel: (d: any) => 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: any) => regionLookup[d].regionName,
+          shape: {
+            fillColor: (d: ShapeTreeNode) => {
+              return categoricalFillColor(colorBrewerCategoricalStark9, 0.5)(d.parent.sortIndex);
+            },
+          },
+        },
+        {
+          groupByRollup: (d: Datum) => d.dest,
+          nodeLabel: (d: any) => countryLookup[d].name,
+          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: {
+          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>
+);
diff --git a/stories/sunburst/sunburst.stories.tsx b/stories/sunburst/sunburst.stories.tsx
@@ -34,3 +34,4 @@ export { example as counterClockwiseSpecial } from './22_counter_clockwise';
 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';
diff --git a/stories/treemap/7_percentage.tsx b/stories/treemap/7_percentage.tsx
@@ -0,0 +1,73 @@
+import { Chart, Datum, Partition, PartitionLayout } from '../../src';
+import { mocks } from '../../src/mocks/hierarchical/index';
+import { percentValueGetter } from '../../src/chart_types/partition_chart/layout/config/config';
+import { arrayToLookup, hueInterpolator } from '../../src/chart_types/partition_chart/layout/utils/calcs';
+import { countryDimension, regionDimension } from '../../src/mocks/hierarchical/dimension_codes';
+import { palettes } from '../../src/mocks/hierarchical/palettes';
+import React from 'react';
+import { ShapeTreeNode } from '../../src/chart_types/partition_chart/layout/types/viewmodel_types';
+
+const regionLookup = arrayToLookup((d: Datum) => d.region, regionDimension);
+const countryLookup = arrayToLookup((d: Datum) => d.country, countryDimension);
+
+const interpolatorTurbo = hueInterpolator(palettes.turbo.map(([r, g, b]) => [r, g, b, 0.7]));
+
+export const example = () => (
+  <Chart
+    className="story-chart"
+    size={
+      {
+        /*height: 800*/
+      }
+    }
+  >
+    <Partition
+      id="spec_7"
+      data={mocks.sunburst}
+      valueAccessor={(d: Datum) => d.exportVal as number}
+      valueGetter={percentValueGetter}
+      valueFormatter={(d: number) => `${Math.round(d)}%`}
+      layers={[
+        {
+          groupByRollup: (d: Datum) => countryLookup[d.dest].continentCountry.substr(0, 2),
+          nodeLabel: (d: any) => regionLookup[d].regionName,
+          fillLabel: {
+            fontFamily: 'Phosphate-Inline',
+            textColor: 'yellow',
+            textInvertible: false,
+          },
+          shape: { fillColor: 'rgba(0,0,0,0)' },
+        },
+        {
+          groupByRollup: (d: Datum) => d.dest,
+          nodeLabel: (d: any) => countryLookup[d].name,
+          fillLabel: {
+            textColor: 'black',
+            textInvertible: false,
+            fontWeight: 200,
+            fontStyle: 'normal',
+            fontFamily: 'Helvetica',
+            fontVariant: 'small-caps',
+            valueFont: { fontWeight: 400, fontStyle: 'italic' },
+          },
+          shape: {
+            fillColor: (d: ShapeTreeNode) => {
+              // primarily, pick color based on parent's index, but then perturb by the index within the parent
+              return interpolatorTurbo(
+                (d.parent.sortIndex + d.sortIndex / d.parent.children.length) / (d.parent.parent.children.length + 1),
+              );
+            },
+          },
+        },
+      ]}
+      config={{
+        partitionLayout: PartitionLayout.treemap,
+        margin: { top: 0, bottom: 0, left: 0, right: 0 },
+        minFontSize: 4,
+        maxFontSize: 84,
+        idealFontSizeJump: 1.15,
+        outerSizeRatio: 1,
+      }}
+    />
+  </Chart>
+);
diff --git a/stories/treemap/treemap.stories.tsx b/stories/treemap/treemap.stories.tsx
@@ -13,3 +13,4 @@ export { example as midTwoLayers } from './3_mid_two';
 export { example as twoLayersStressTest } from './4_two_layer_stress';
 export { example as multiColor } from './5_multicolor';
 export { example as customStyle } from './6_custom_style';
+export { example as percentage } from './7_percentage';