|
| 1 | +/* |
| 2 | + * Licensed to Elasticsearch B.V. under one or more contributor |
| 3 | + * license agreements. See the NOTICE file distributed with |
| 4 | + * this work for additional information regarding copyright |
| 5 | + * ownership. Elasticsearch B.V. licenses this file to you under |
| 6 | + * the Apache License, Version 2.0 (the "License"); you may |
| 7 | + * not use this file except in compliance with the License. |
| 8 | + * You may obtain a copy of the License at |
| 9 | + * |
| 10 | + * http://www.apache.org/licenses/LICENSE-2.0 |
| 11 | + * |
| 12 | + * Unless required by applicable law or agreed to in writing, |
| 13 | + * software distributed under the License is distributed on an |
| 14 | + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| 15 | + * KIND, either express or implied. See the License for the |
| 16 | + * specific language governing permissions and limitations |
| 17 | + * under the License. */ |
| 18 | + |
| 19 | +import { Chart, Datum, Partition, PartitionLayout } from '../../src'; |
| 20 | +import { mocks } from '../../src/mocks/hierarchical/index'; |
| 21 | +import { config } from '../../src/chart_types/partition_chart/layout/config/config'; |
| 22 | +import { arrayToLookup, hueInterpolator } from '../../src/chart_types/partition_chart/layout/utils/calcs'; |
| 23 | +import { productDimension } from '../../src/mocks/hierarchical/dimension_codes'; |
| 24 | +import { palettes } from '../../src/mocks/hierarchical/palettes'; |
| 25 | +import React from 'react'; |
| 26 | + |
| 27 | +const productLookup = arrayToLookup((d: Datum) => d.sitc1, productDimension); |
| 28 | + |
| 29 | +// style calcs |
| 30 | +const interpolatorCET2s = hueInterpolator(palettes.CET2s.map(([r, g, b]) => [r, g, b, 0.7])); |
| 31 | + |
| 32 | +const defaultFillColor = (colorMaker: any) => (d: any, i: number, a: any[]) => colorMaker(i / (a.length + 1)); |
| 33 | + |
| 34 | +export const example = () => ( |
| 35 | + <Chart className="story-chart"> |
| 36 | + <Partition |
| 37 | + id="spec_1" |
| 38 | + data={mocks.pie.map((d: any, i: number) => (i ? d : { ...d, exportVal: 0 }))} |
| 39 | + valueAccessor={(d: Datum) => d.exportVal as number} |
| 40 | + valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`} |
| 41 | + layers={[ |
| 42 | + { |
| 43 | + groupByRollup: (d: Datum) => d.sitc1, |
| 44 | + nodeLabel: (d: Datum) => productLookup[d].name, |
| 45 | + fillLabel: { |
| 46 | + textInvertible: true, |
| 47 | + valueFormatter: (d: number) => `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`, |
| 48 | + }, |
| 49 | + shape: { |
| 50 | + fillColor: defaultFillColor(interpolatorCET2s), |
| 51 | + }, |
| 52 | + }, |
| 53 | + ]} |
| 54 | + config={{ |
| 55 | + partitionLayout: PartitionLayout.treemap, |
| 56 | + }} |
| 57 | + /> |
| 58 | + </Chart> |
| 59 | +); |
0 commit comments