github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

Fix TS for vis_type_vislib (#58345)

Browse source 
* Fix TS for vislib

* Fix TS

* Revert table changes

* Update unit test

* Refactor updateAxisTitle

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Maryia Lapata 2020-03-04 13:57:16 +03:00 • committed by GitHub
parent 01e4b96492
commit 80db96b823
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 87 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

6
.eslintrc.js
View file

@ -76,12 +76,6 @@ module.exports = {
'react-hooks/exhaustive-deps': 'off',
},
},
{
files: ['src/legacy/core_plugins/vis_type_vislib/**/*.{js,ts,tsx}'],
rules: {
'react-hooks/exhaustive-deps': 'off',
},
},
{
files: [
'src/legacy/core_plugins/vis_default_editor/public/components/controls/**/*.{ts,tsx}',

2
src/legacy/core_plugins/vis_type_vislib/public/components/common/validation_wrapper.tsx
View file

@ -52,7 +52,7 @@ function ValidationWrapper<T = unknown>({
useEffect(() => {
setValidity(isPanelValid);
}, [isPanelValid]);
}, [isPanelValid, setValidity]);
return <Component {...rest} setMultipleValidity={setValidityHandler} />;
}

4
src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/category_axis_panel.tsx
View file

@ -46,7 +46,7 @@ function CategoryAxisPanel(props: CategoryAxisPanelProps) {
};
setCategoryAxis(updatedAxis);
},
[setCategoryAxis]
[setCategoryAxis, axis]
);
const setPosition = useCallback(
@ -89,7 +89,7 @@ function CategoryAxisPanel(props: CategoryAxisPanelProps) {
setValue={setAxis}
/>
{axis.show && <LabelOptions axis={axis} axesName="categoryAxes" index={0} {...props} />}
{axis.show && <LabelOptions axesName="categoryAxes" index={0} {...props} />}
</EuiPanel>
);
}

7
src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/index.test.tsx
View file

@ -193,9 +193,10 @@ describe('MetricsAxisOptions component', () => {
const updatedSeriesParams = [{ ...chart, data: { ...chart.data, label: agg.makeLabel() } }];
const updatedValues = [{ ...axis, title: { text: agg.makeLabel() } }];
expect(setValue).toHaveBeenCalledTimes(3);
expect(setValue).toHaveBeenNthCalledWith(2, SERIES_PARAMS, updatedSeriesParams);
expect(setValue).toHaveBeenNthCalledWith(3, VALUE_AXES, updatedValues);
expect(setValue).toHaveBeenCalledTimes(5);
expect(setValue).toHaveBeenNthCalledWith(3, SERIES_PARAMS, updatedSeriesParams);
expect(setValue).toHaveBeenNthCalledWith(5, SERIES_PARAMS, updatedSeriesParams);
expect(setValue).toHaveBeenNthCalledWith(4, VALUE_AXES, updatedValues);
});
it('should not set the custom title to match the value axis label when more than one agg exists for that axis', () => {

141
src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/index.tsx
View file

@ -89,72 +89,85 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
}
);
const updateAxisTitle = (seriesParams?: SeriesParam[]) => {
const series = seriesParams || stateParams.seriesParams;
const axes = cloneDeep(stateParams.valueAxes);
let isAxesChanged = false;
let lastValuesChanged = false;
const lastLabels = { ...lastCustomLabels };
const lastMatchingSeriesAgg = { ...lastSeriesAgg };
const updateAxisTitle = useCallback(
(seriesParams?: SeriesParam[]) => {
const series = seriesParams || stateParams.seriesParams;
let isAxesChanged = false;
let lastValuesChanged = false;
const lastLabels = { ...lastCustomLabels };
const lastMatchingSeriesAgg = { ...lastSeriesAgg };
stateParams.valueAxes.forEach((axis, axisNumber) => {
let newCustomLabel = '';
const matchingSeries: IAggConfig[] = [];
const axes = stateParams.valueAxes.map((axis, axisNumber) => {
let newCustomLabel = '';
let updatedAxis;
const matchingSeries: IAggConfig[] = [];
series.forEach((serie, seriesIndex) => {
if ((axisNumber === 0 && !serie.valueAxis) || serie.valueAxis === axis.id) {
const aggByIndex = aggs.bySchemaName('metric')[seriesIndex];
matchingSeries.push(aggByIndex);
series.forEach((serie, seriesIndex) => {
if ((axisNumber === 0 && !serie.valueAxis) || serie.valueAxis === axis.id) {
const aggByIndex = aggs.bySchemaName('metric')[seriesIndex];
matchingSeries.push(aggByIndex);
}
});
if (matchingSeries.length === 1) {
// if several series matches to the axis, axis title is set according to the first serie.
newCustomLabel = matchingSeries[0].makeLabel();
}
if (lastCustomLabels[axis.id] !== newCustomLabel && newCustomLabel !== '') {
const lastSeriesAggType = get(lastSeriesAgg, `${matchingSeries[0].id}.type`);
const lastSeriesAggField = get(lastSeriesAgg, `${matchingSeries[0].id}.field`);
const matchingSeriesAggType = get(matchingSeries, '[0]type.name', '');
const matchingSeriesAggField = get(matchingSeries, '[0]params.field.name', '');
const aggTypeIsChanged = lastSeriesAggType !== matchingSeriesAggType;
const aggFieldIsChanged = lastSeriesAggField !== matchingSeriesAggField;
lastMatchingSeriesAgg[matchingSeries[0].id] = {
type: matchingSeriesAggType,
field: matchingSeriesAggField,
};
lastLabels[axis.id] = newCustomLabel;
lastValuesChanged = true;
if (
Object.keys(lastCustomLabels).length !== 0 &&
(aggTypeIsChanged ||
aggFieldIsChanged ||
axis.title.text === '' ||
lastCustomLabels[axis.id] === axis.title.text) &&
newCustomLabel !== axis.title.text
) {
// Override axis title with new custom label
updatedAxis = {
...axis,
title: { ...axis.title, text: newCustomLabel },
};
isAxesChanged = true;
}
}
return updatedAxis || axis;
});
if (matchingSeries.length === 1) {
// if several series matches to the axis, axis title is set according to the first serie.
newCustomLabel = matchingSeries[0].makeLabel();
if (isAxesChanged) {
setValue('valueAxes', axes);
}
if (lastCustomLabels[axis.id] !== newCustomLabel && newCustomLabel !== '') {
const lastSeriesAggType = get(lastSeriesAgg, `${matchingSeries[0].id}.type`);
const lastSeriesAggField = get(lastSeriesAgg, `${matchingSeries[0].id}.field`);
const matchingSeriesAggType = get(matchingSeries, '[0]type.name', '');
const matchingSeriesAggField = get(matchingSeries, '[0]params.field.name', '');
const aggTypeIsChanged = lastSeriesAggType !== matchingSeriesAggType;
const aggFieldIsChanged = lastSeriesAggField !== matchingSeriesAggField;
lastMatchingSeriesAgg[matchingSeries[0].id] = {
type: matchingSeriesAggType,
field: matchingSeriesAggField,
};
lastLabels[axis.id] = newCustomLabel;
lastValuesChanged = true;
if (
Object.keys(lastCustomLabels).length !== 0 &&
(aggTypeIsChanged ||
aggFieldIsChanged ||
axis.title.text === '' ||
lastCustomLabels[axis.id] === axis.title.text)
) {
// Override axis title with new custom label
axes[axisNumber] = {
...axis,
title: { ...axis.title, text: newCustomLabel },
};
isAxesChanged = true;
}
if (lastValuesChanged) {
setLastSeriesAgg(lastMatchingSeriesAgg);
setLastCustomLabels(lastLabels);
}
});
if (isAxesChanged) {
setValue('valueAxes', axes);
}
if (lastValuesChanged) {
setLastSeriesAgg(lastMatchingSeriesAgg);
setLastCustomLabels(lastLabels);
}
};
},
[
aggs,
lastCustomLabels,
lastSeriesAgg,
setValue,
stateParams.seriesParams,
stateParams.valueAxes,
]
);
const onValueAxisPositionChanged = useCallback(
(index: number, value: ValueAxis['position']) => {
@ -168,7 +181,7 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
};
setValue('valueAxes', valueAxes);
},
[stateParams.valueAxes, getUpdatedAxisName, setValue]
[stateParams.valueAxes, setValue]
);
const onCategoryAxisPositionChanged = useCallback(
@ -226,7 +239,7 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
setValue('grid', { ...stateParams.grid, valueAxis: undefined });
}
},
[stateParams.seriesParams, stateParams.valueAxes, setValue]
[stateParams.seriesParams, stateParams.valueAxes, setValue, stateParams.grid]
);
const changeValueAxis: ChangeValueAxis = useCallback(
@ -241,13 +254,13 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
updateAxisTitle();
},
[addValueAxis, setParamByIndex]
[addValueAxis, setParamByIndex, updateAxisTitle]
);
const schemaName = vis.type.schemas.metrics[0].name;
const metrics = useMemo(() => {
const schemaName = vis.type.schemas.metrics[0].name;
return aggs.bySchemaName(schemaName);
}, [vis.type.schemas.metrics[0].name, aggs]);
}, [schemaName, aggs]);
const firstValueAxesId = stateParams.valueAxes[0].id;
@ -278,7 +291,7 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
setValue('seriesParams', updatedSeries);
updateAxisTitle(updatedSeries);
}, [metrics, firstValueAxesId]);
}, [metrics, firstValueAxesId, setValue, stateParams.seriesParams, updateAxisTitle]);
const visType = useMemo(() => {
const types = uniq(stateParams.seriesParams.map(({ type }) => type));

2
src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/value_axes_panel.tsx
View file

@ -78,7 +78,7 @@ function ValueAxesPanel(props: ValueAxesPanelProps) {
/>
</EuiToolTip>
),
[removeValueAxis]
[removeValueAxis, removeButtonTooltip]
);
const addButtonTooltip = useMemo(

3
src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.tsx
View file

@ -175,7 +175,7 @@ function ValueAxisOptions(props: ValueAxisOptionsParams) {
setValue={setValueAxisTitle}
/>
<LabelOptions axis={axis} axesName="valueAxes" index={index} {...props} />
<LabelOptions axesName="valueAxes" {...props} />
</>
) : (
<EuiSpacer size="xs" />
@ -204,7 +204,6 @@ function ValueAxisOptions(props: ValueAxisOptionsParams) {
<>
<EuiSpacer size="m" />
<CustomExtentsOptions
axis={axis}
setValueAxisScale={setValueAxisScale}
setValueAxis={setValueAxis}
{...props}

2
src/legacy/core_plugins/vis_type_vislib/public/components/options/point_series/grid_panel.tsx
View file

@ -55,7 +55,7 @@ function GridPanel({ stateParams, setValue, hasHistogramAgg }: VisOptionsProps<B
if (hasHistogramAgg) {
setGrid('categoryLines', false);
}
}, [hasHistogramAgg]);
}, [hasHistogramAgg, setGrid]);
return (
<EuiPanel paddingSize="s">