2020-07-22 12:14:59 +02:00
|
|
|
/*
|
|
|
|
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
2021-02-04 03:12:39 +01:00
|
|
|
* or more contributor license agreements. Licensed under the Elastic License
|
|
|
|
* 2.0; you may not use this file except in compliance with the Elastic License
|
|
|
|
* 2.0.
|
2020-07-22 12:14:59 +02:00
|
|
|
*/
|
|
|
|
|
|
|
|
import './toolbar.scss';
|
|
|
|
import React, { useState } from 'react';
|
2020-11-10 15:15:26 +01:00
|
|
|
import useDebounce from 'react-use/lib/useDebounce';
|
2020-07-22 12:14:59 +02:00
|
|
|
import { i18n } from '@kbn/i18n';
|
|
|
|
import {
|
|
|
|
EuiFlexGroup,
|
|
|
|
EuiFormRow,
|
|
|
|
EuiSuperSelect,
|
|
|
|
EuiRange,
|
|
|
|
EuiHorizontalRule,
|
|
|
|
} from '@elastic/eui';
|
|
|
|
import { Position } from '@elastic/charts';
|
2021-02-15 13:00:31 +01:00
|
|
|
import { PaletteRegistry } from 'src/plugins/charts/public';
|
2020-07-22 12:14:59 +02:00
|
|
|
import { DEFAULT_PERCENT_DECIMALS } from './constants';
|
2021-02-03 12:03:55 +01:00
|
|
|
import { PieVisualizationState, SharedPieLayerState } from './types';
|
2020-11-04 11:27:52 +01:00
|
|
|
import { VisualizationDimensionEditorProps, VisualizationToolbarProps } from '../types';
|
2020-09-16 10:30:19 +02:00
|
|
|
import { ToolbarPopover, LegendSettingsPopover } from '../shared_components';
|
2020-11-04 11:27:52 +01:00
|
|
|
import { PalettePicker } from '../shared_components';
|
2020-07-22 12:14:59 +02:00
|
|
|
|
2021-02-03 12:03:55 +01:00
|
|
|
const numberOptions: Array<{
|
|
|
|
value: SharedPieLayerState['numberDisplay'];
|
|
|
|
inputDisplay: string;
|
|
|
|
}> = [
|
2020-07-22 12:14:59 +02:00
|
|
|
{
|
|
|
|
value: 'hidden',
|
|
|
|
inputDisplay: i18n.translate('xpack.lens.pieChart.hiddenNumbersLabel', {
|
|
|
|
defaultMessage: 'Hide from chart',
|
|
|
|
}),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: 'percent',
|
|
|
|
inputDisplay: i18n.translate('xpack.lens.pieChart.showPercentValuesLabel', {
|
|
|
|
defaultMessage: 'Show percent',
|
|
|
|
}),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: 'value',
|
|
|
|
inputDisplay: i18n.translate('xpack.lens.pieChart.showFormatterValuesLabel', {
|
|
|
|
defaultMessage: 'Show value',
|
|
|
|
}),
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
const categoryOptions: Array<{
|
2021-02-03 12:03:55 +01:00
|
|
|
value: SharedPieLayerState['categoryDisplay'];
|
2020-07-22 12:14:59 +02:00
|
|
|
inputDisplay: string;
|
|
|
|
}> = [
|
|
|
|
{
|
|
|
|
value: 'default',
|
|
|
|
inputDisplay: i18n.translate('xpack.lens.pieChart.showCategoriesLabel', {
|
|
|
|
defaultMessage: 'Inside or outside',
|
|
|
|
}),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: 'inside',
|
|
|
|
inputDisplay: i18n.translate('xpack.lens.pieChart.fitInsideOnlyLabel', {
|
|
|
|
defaultMessage: 'Inside only',
|
|
|
|
}),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: 'hide',
|
|
|
|
inputDisplay: i18n.translate('xpack.lens.pieChart.categoriesInLegendLabel', {
|
|
|
|
defaultMessage: 'Hide labels',
|
|
|
|
}),
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
const categoryOptionsTreemap: Array<{
|
2021-02-03 12:03:55 +01:00
|
|
|
value: SharedPieLayerState['categoryDisplay'];
|
2020-07-22 12:14:59 +02:00
|
|
|
inputDisplay: string;
|
|
|
|
}> = [
|
|
|
|
{
|
|
|
|
value: 'default',
|
|
|
|
inputDisplay: i18n.translate('xpack.lens.pieChart.showTreemapCategoriesLabel', {
|
|
|
|
defaultMessage: 'Show labels',
|
|
|
|
}),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: 'hide',
|
|
|
|
inputDisplay: i18n.translate('xpack.lens.pieChart.categoriesInLegendLabel', {
|
|
|
|
defaultMessage: 'Hide labels',
|
|
|
|
}),
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
const legendOptions: Array<{
|
2021-02-03 12:03:55 +01:00
|
|
|
value: SharedPieLayerState['legendDisplay'];
|
2020-07-22 12:14:59 +02:00
|
|
|
label: string;
|
|
|
|
id: string;
|
|
|
|
}> = [
|
|
|
|
{
|
|
|
|
id: 'pieLegendDisplay-default',
|
|
|
|
value: 'default',
|
|
|
|
label: i18n.translate('xpack.lens.pieChart.legendVisibility.auto', {
|
2020-09-16 10:30:19 +02:00
|
|
|
defaultMessage: 'Auto',
|
2020-07-22 12:14:59 +02:00
|
|
|
}),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 'pieLegendDisplay-show',
|
|
|
|
value: 'show',
|
|
|
|
label: i18n.translate('xpack.lens.pieChart.legendVisibility.show', {
|
2020-09-16 10:30:19 +02:00
|
|
|
defaultMessage: 'Show',
|
2020-07-22 12:14:59 +02:00
|
|
|
}),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 'pieLegendDisplay-hide',
|
|
|
|
value: 'hide',
|
|
|
|
label: i18n.translate('xpack.lens.pieChart.legendVisibility.hide', {
|
2020-09-16 10:30:19 +02:00
|
|
|
defaultMessage: 'Hide',
|
2020-07-22 12:14:59 +02:00
|
|
|
}),
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
export function PieToolbar(props: VisualizationToolbarProps<PieVisualizationState>) {
|
|
|
|
const { state, setState } = props;
|
|
|
|
const layer = state.layers[0];
|
|
|
|
if (!layer) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
return (
|
2020-09-16 10:30:19 +02:00
|
|
|
<EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
|
|
|
|
<ToolbarPopover
|
|
|
|
title={i18n.translate('xpack.lens.pieChart.valuesLabel', {
|
|
|
|
defaultMessage: 'Labels',
|
|
|
|
})}
|
2020-11-10 10:05:32 +01:00
|
|
|
type="labels"
|
2020-09-16 10:30:19 +02:00
|
|
|
groupPosition="left"
|
2020-09-18 18:41:22 +02:00
|
|
|
buttonDataTestSubj="lnsLabelsButton"
|
2020-09-16 10:30:19 +02:00
|
|
|
>
|
|
|
|
<EuiFormRow
|
|
|
|
label={i18n.translate('xpack.lens.pieChart.labelPositionLabel', {
|
|
|
|
defaultMessage: 'Position',
|
|
|
|
})}
|
|
|
|
fullWidth
|
|
|
|
display="columnCompressed"
|
2020-07-22 12:14:59 +02:00
|
|
|
>
|
2020-09-16 10:30:19 +02:00
|
|
|
<EuiSuperSelect
|
|
|
|
compressed
|
|
|
|
valueOfSelected={layer.categoryDisplay}
|
|
|
|
options={state.shape === 'treemap' ? categoryOptionsTreemap : categoryOptions}
|
|
|
|
onChange={(option) => {
|
|
|
|
setState({
|
|
|
|
...state,
|
|
|
|
layers: [{ ...layer, categoryDisplay: option }],
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</EuiFormRow>
|
|
|
|
<EuiFormRow
|
|
|
|
label={i18n.translate('xpack.lens.pieChart.numberLabels', {
|
|
|
|
defaultMessage: 'Values',
|
|
|
|
})}
|
|
|
|
fullWidth
|
|
|
|
display="columnCompressed"
|
|
|
|
>
|
|
|
|
<EuiSuperSelect
|
|
|
|
compressed
|
|
|
|
disabled={layer.categoryDisplay === 'hide'}
|
|
|
|
valueOfSelected={layer.categoryDisplay === 'hide' ? 'hidden' : layer.numberDisplay}
|
|
|
|
options={numberOptions}
|
|
|
|
onChange={(option) => {
|
|
|
|
setState({
|
|
|
|
...state,
|
|
|
|
layers: [{ ...layer, numberDisplay: option }],
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</EuiFormRow>
|
|
|
|
<EuiHorizontalRule margin="s" />
|
|
|
|
<EuiFormRow
|
|
|
|
label={i18n.translate('xpack.lens.pieChart.percentDecimalsLabel', {
|
|
|
|
defaultMessage: 'Maximum decimal places for percent',
|
|
|
|
})}
|
|
|
|
fullWidth
|
|
|
|
display="rowCompressed"
|
|
|
|
>
|
|
|
|
<DecimalPlaceSlider
|
|
|
|
value={layer.percentDecimals ?? DEFAULT_PERCENT_DECIMALS}
|
|
|
|
setValue={(value) =>
|
|
|
|
setState({
|
|
|
|
...state,
|
|
|
|
layers: [{ ...layer, percentDecimals: value }],
|
|
|
|
})
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</EuiFormRow>
|
|
|
|
</ToolbarPopover>
|
|
|
|
<LegendSettingsPopover
|
|
|
|
legendOptions={legendOptions}
|
|
|
|
mode={layer.legendDisplay}
|
|
|
|
onDisplayChange={(optionId) => {
|
|
|
|
setState({
|
|
|
|
...state,
|
|
|
|
layers: [
|
|
|
|
{
|
|
|
|
...layer,
|
|
|
|
legendDisplay: legendOptions.find(({ id }) => id === optionId)!.value,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
position={layer.legendPosition}
|
|
|
|
onPositionChange={(id) => {
|
|
|
|
setState({
|
|
|
|
...state,
|
|
|
|
layers: [{ ...layer, legendPosition: id as Position }],
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
renderNestedLegendSwitch
|
|
|
|
nestedLegend={!!layer.nestedLegend}
|
|
|
|
onNestedLegendChange={() => {
|
|
|
|
setState({
|
|
|
|
...state,
|
|
|
|
layers: [{ ...layer, nestedLegend: !layer.nestedLegend }],
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
/>
|
2020-07-22 12:14:59 +02:00
|
|
|
</EuiFlexGroup>
|
|
|
|
);
|
|
|
|
}
|
2020-09-14 11:46:43 +02:00
|
|
|
|
|
|
|
const DecimalPlaceSlider = ({
|
|
|
|
value,
|
|
|
|
setValue,
|
|
|
|
}: {
|
|
|
|
value: number;
|
|
|
|
setValue: (value: number) => void;
|
|
|
|
}) => {
|
|
|
|
const [localValue, setLocalValue] = useState(value);
|
|
|
|
useDebounce(() => setValue(localValue), 256, [localValue]);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<EuiRange
|
|
|
|
data-test-subj="indexPattern-dimension-formatDecimals"
|
|
|
|
value={localValue}
|
|
|
|
min={0}
|
|
|
|
max={10}
|
|
|
|
showInput
|
|
|
|
compressed
|
|
|
|
onChange={(e) => {
|
|
|
|
setLocalValue(Number(e.currentTarget.value));
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
};
|
2020-11-04 11:27:52 +01:00
|
|
|
|
2021-02-15 13:00:31 +01:00
|
|
|
export function DimensionEditor(
|
|
|
|
props: VisualizationDimensionEditorProps<PieVisualizationState> & {
|
|
|
|
paletteService: PaletteRegistry;
|
|
|
|
}
|
|
|
|
) {
|
2020-11-04 11:27:52 +01:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<PalettePicker
|
2021-02-15 13:00:31 +01:00
|
|
|
palettes={props.paletteService}
|
2020-11-04 11:27:52 +01:00
|
|
|
activePalette={props.state.palette}
|
|
|
|
setPalette={(newPalette) => {
|
|
|
|
props.setState({ ...props.state, palette: newPalette });
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|