From 41fccfd801e0927fe037d9bd1ec7ce731cde510f Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Mon, 24 Feb 2020 17:19:08 +0300 Subject: [PATCH] Fix TS for vislib --- .eslintrc.js | 12 -- .../components/common/validation_wrapper.tsx | 2 +- .../metrics_axes/category_axis_panel.tsx | 4 +- .../components/options/metrics_axes/index.tsx | 138 ++++++++++-------- .../options/metrics_axes/value_axes_panel.tsx | 2 +- .../metrics_axes/value_axis_options.tsx | 3 +- .../options/point_series/grid_panel.tsx | 2 +- 7 files changed, 80 insertions(+), 83 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 9b00135df5ba..a678243e4f07 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -76,18 +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_type_table/**/*.{js,ts,tsx}'], - rules: { - 'react-hooks/exhaustive-deps': 'off', - }, - }, { files: [ 'src/legacy/core_plugins/vis_default_editor/public/components/controls/**/*.{ts,tsx}', diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/common/validation_wrapper.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/common/validation_wrapper.tsx index 9e1d5ea5ae38..c069d4c93566 100644 --- a/src/legacy/core_plugins/vis_type_vislib/public/components/common/validation_wrapper.tsx +++ b/src/legacy/core_plugins/vis_type_vislib/public/components/common/validation_wrapper.tsx @@ -52,7 +52,7 @@ function ValidationWrapper({ useEffect(() => { setValidity(isPanelValid); - }, [isPanelValid]); + }, [isPanelValid, setValidity]); return ; } diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/category_axis_panel.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/category_axis_panel.tsx index a19a300960ab..c1da70f5c17c 100644 --- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/category_axis_panel.tsx +++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/category_axis_panel.tsx @@ -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 && } + {axis.show && } ); } diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/index.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/index.tsx index cdc8996f3fde..40c43225db13 100644 --- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/index.tsx +++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/index.tsx @@ -89,72 +89,82 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps) } ); - 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 }; - - stateParams.valueAxes.forEach((axis, axisNumber) => { - let newCustomLabel = ''; - 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); + const updateAxisTitle = useCallback( + (seriesParams?: SeriesParam[]) => { + const series = seriesParams || stateParams.seriesParams; + const axes = cloneDeep(stateParams.valueAxes); + let isAxesChanged = false; + let lastValuesChanged = false; + const lastLabels = { ...lastCustomLabels }; + const lastMatchingSeriesAgg = { ...lastSeriesAgg }; + + stateParams.valueAxes.forEach((axis, axisNumber) => { + let newCustomLabel = ''; + 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); + } + }); + + 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 (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', ''); + 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; + 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 }, + lastMatchingSeriesAgg[matchingSeries[0].id] = { + type: matchingSeriesAggType, + field: matchingSeriesAggField, }; - isAxesChanged = true; + 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 (isAxesChanged) { - setValue('valueAxes', axes); - } + if (isAxesChanged) { + setValue('valueAxes', axes); + } - if (lastValuesChanged) { - setLastSeriesAgg(lastMatchingSeriesAgg); - setLastCustomLabels(lastLabels); - } - }; + if (lastValuesChanged) { + setLastSeriesAgg(lastMatchingSeriesAgg); + setLastCustomLabels(lastLabels); + } + }, + [ + aggs, + lastCustomLabels, + lastSeriesAgg, + setValue, + stateParams.seriesParams, + stateParams.valueAxes, + ] + ); const onValueAxisPositionChanged = useCallback( (index: number, value: ValueAxis['position']) => { @@ -168,7 +178,7 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps) }; setValue('valueAxes', valueAxes); }, - [stateParams.valueAxes, getUpdatedAxisName, setValue] + [stateParams.valueAxes, setValue] ); const onCategoryAxisPositionChanged = useCallback( @@ -226,7 +236,7 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps) setValue('grid', { ...stateParams.grid, valueAxis: undefined }); } }, - [stateParams.seriesParams, stateParams.valueAxes, setValue] + [stateParams.seriesParams, stateParams.valueAxes, setValue, stateParams.grid] ); const changeValueAxis: ChangeValueAxis = useCallback( @@ -241,13 +251,13 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps) 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 +288,7 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps) setValue('seriesParams', updatedSeries); updateAxisTitle(updatedSeries); - }, [metrics, firstValueAxesId]); + }, [metrics, firstValueAxesId, setValue, stateParams.seriesParams, updateAxisTitle]); const visType = useMemo(() => { const types = uniq(stateParams.seriesParams.map(({ type }) => type)); diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/value_axes_panel.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/value_axes_panel.tsx index b94f5ebbcce4..4aa2aee083a6 100644 --- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/value_axes_panel.tsx +++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/value_axes_panel.tsx @@ -78,7 +78,7 @@ function ValueAxesPanel(props: ValueAxesPanelProps) { /> ), - [removeValueAxis] + [removeValueAxis, removeButtonTooltip] ); const addButtonTooltip = useMemo( diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.tsx index 0ebe62a70a7b..d094a1d42238 100644 --- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.tsx +++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.tsx @@ -175,7 +175,7 @@ function ValueAxisOptions(props: ValueAxisOptionsParams) { setValue={setValueAxisTitle} /> - + ) : ( @@ -204,7 +204,6 @@ function ValueAxisOptions(props: ValueAxisOptionsParams) { <>