docs: custom tooltip example for partition charts (#818)

stories/sunburst/32_custom_tooltip.tsx

@@ -0,0 +1,108 @@
+/*
+ * 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 { boolean } from '@storybook/addon-knobs';
+import React from 'react';
+
+import { Chart, Datum, Partition, PartitionLayout, Settings, CustomTooltip } from '../../src';
+import { config } from '../../src/chart_types/partition_chart/layout/config/config';
+import { mocks } from '../../src/mocks/hierarchical';
+import { STORYBOOK_LIGHT_THEME } from '../shared';
+import { getPlacementKnob, getFallbackPlacementsKnob, getBoundaryKnob } from '../utils/knobs';
+import { countryLookup, indexInterpolatedFillColor, interpolatorCET2s, regionLookup } from '../utils/utils';
+
+const CustomTooltip: CustomTooltip = ({ values }) => (
+  <div
+    style={{
+      padding: 10,
+      minHeight: 40,
+      backgroundColor: 'blue',
+      color: 'white',
+    }}
+  >
+    My Custom Tooltip:
+    <br />
+    {values.map(({ label }) => label)}
+  </div>
+);
+
+export const Example = () => {
+  const tooltipOptions = {
+    placement: getPlacementKnob('Tooltip placement'),
+    fallbackPlacements: getFallbackPlacementsKnob(),
+    boundary: getBoundaryKnob(),
+    customTooltip: boolean('Custom Tooltip', false) ? CustomTooltip : undefined,
+  };
+  return (
+    <Chart className="story-chart">
+      <Settings showLegend legendMaxDepth={1} theme={STORYBOOK_LIGHT_THEME} tooltip={tooltipOptions} />
+      <Partition
+        id="spec_1"
+        data={mocks.sunburst}
+        valueAccessor={(d: Datum) => d.exportVal as number}
+        valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`}
+        layers={[
+          {
+            groupByRollup: (d: Datum) => countryLookup[d.dest].continentCountry.slice(0, 2),
+            nodeLabel: (d: any) => regionLookup[d].regionName,
+            fillLabel: {
+              fontFamily: 'Impact',
+              valueFormatter: (d: number) =>
+                `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000000))}\u00A0Tn`,
+            },
+            shape: {
+              fillColor: (d) =>
+                // pick color from color palette based on mean angle - rather distinct colors in the inner ring
+                indexInterpolatedFillColor(interpolatorCET2s)(d, (d.x0 + d.x1) / 2 / (2 * Math.PI), []),
+            },
+          },
+          {
+            groupByRollup: (d: Datum) => d.dest,
+            nodeLabel: (d: any) => countryLookup[d].name,
+            shape: {
+              fillColor: (d) =>
+                // pick color from color palette based on mean angle - related yet distinct colors in the outer ring
+                indexInterpolatedFillColor(interpolatorCET2s)(d, (d.x0 + d.x1) / 2 / (2 * Math.PI), []),
+            },
+          },
+        ]}
+        config={{
+          partitionLayout: PartitionLayout.sunburst,
+          linkLabel: {
+            maxCount: 0,
+            fontSize: 14,
+          },
+          fontFamily: 'Arial',
+          fillLabel: {
+            textInvertible: true,
+            valueFormatter: (d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`,
+            fontStyle: 'italic',
+          },
+          margin: { top: 0, bottom: 0, left: 0, right: 0 },
+          minFontSize: 1,
+          idealFontSizeJump: 1.1,
+          outerSizeRatio: 0.95,
+          emptySizeRatio: 0,
+          circlePadding: 4,
+          backgroundColor: 'rgba(229,229,229,1)',
+        }}
+      />
+    </Chart>
+  );
+};

stories/sunburst/sunburst.stories.tsx

@@ -61,3 +61,4 @@ export { Example as notANumber } from './28_not_a_number';
 export { Example as customStroke } from './29_custom_stroke';
 export { Example as largestCircle } from './30_largest_circle';
 export { Example as boldLinkValue } from './31_bold_link_value';
+export { Example as customTooltip } from './32_custom_tooltip';