From b3f4f90e006f5b4c9b476460a71685396486cc54 Mon Sep 17 00:00:00 2001 From: Rachel Shen Date: Wed, 13 Jan 2021 09:45:55 -0700 Subject: [PATCH 1/2] fix(legend): remove ids for circles (#973) --- src/components/__snapshots__/chart.test.tsx.snap | 2 +- src/components/icons/assets/dot.tsx | 10 ++-------- .../legend/__snapshots__/legend.test.tsx.snap | 6 +++--- 3 files changed, 6 insertions(+), 12 deletions(-) diff --git a/src/components/__snapshots__/chart.test.tsx.snap b/src/components/__snapshots__/chart.test.tsx.snap index fce65eefa4..2d4e865b13 100644 --- a/src/components/__snapshots__/chart.test.tsx.snap +++ b/src/components/__snapshots__/chart.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Chart should render the legend name test 1`] = `"
"`; +exports[`Chart should render the legend name test 1`] = `"
"`; diff --git a/src/components/icons/assets/dot.tsx b/src/components/icons/assets/dot.tsx index 3c4321869e..28e78788f8 100644 --- a/src/components/icons/assets/dot.tsx +++ b/src/components/icons/assets/dot.tsx @@ -29,15 +29,9 @@ export class DotIcon extends React.Component { } render() { - const { color } = this.props; return ( - - - - - - - + + ); } diff --git a/src/components/legend/__snapshots__/legend.test.tsx.snap b/src/components/legend/__snapshots__/legend.test.tsx.snap index a64f4750d2..73439392f5 100644 --- a/src/components/legend/__snapshots__/legend.test.tsx.snap +++ b/src/components/legend/__snapshots__/legend.test.tsx.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Legend #legendColorPicker should match snapshot after onChange is called 1`] = `"
    • "`; +exports[`Legend #legendColorPicker should match snapshot after onChange is called 1`] = `"
    • "`; -exports[`Legend #legendColorPicker should match snapshot after onClose is called 1`] = `"
    • "`; +exports[`Legend #legendColorPicker should match snapshot after onClose is called 1`] = `"
    • "`; exports[`Legend #legendColorPicker should render colorPicker when color is clicked 1`] = `"
    Custom Color Picker
    "`; -exports[`Legend #legendColorPicker should render colorPicker when color is clicked 2`] = `"
    • Custom Color Picker
    • "`; +exports[`Legend #legendColorPicker should render colorPicker when color is clicked 2`] = `"
    • Custom Color Picker
    • "`; From 40e6a8af4c91eab010025641a08009290bd36945 Mon Sep 17 00:00:00 2001 From: Nick Partridge Date: Wed, 13 Jan 2021 11:55:16 -0600 Subject: [PATCH 2/2] chore: cleanup ts ignores (#969) --- scripts/setup_enzyme.ts | 10 +- .../state/selectors/get_heatmap_table.ts | 2 - .../layout/viewmodel/fill_text_layout.ts | 15 +- src/chart_types/xy_chart/domains/x_domain.ts | 8 +- .../state/selectors/compute_series_domains.ts | 2 - src/chart_types/xy_chart/state/utils/utils.ts | 5 - src/chart_types/xy_chart/utils/series.ts | 224 ++++++------------ src/components/chart.tsx | 9 - 8 files changed, 88 insertions(+), 187 deletions(-) diff --git a/scripts/setup_enzyme.ts b/scripts/setup_enzyme.ts index 21f55d8db7..abb50b14aa 100644 --- a/scripts/setup_enzyme.ts +++ b/scripts/setup_enzyme.ts @@ -24,6 +24,15 @@ configure({ adapter: new Adapter() }); process.env.RNG_SEED = 'jest-unit-tests'; +declare global { + interface Window { + /** + * ResizeObserverMock override + */ + ResizeObserver: typeof ResizeObserverMock; + } +} + /** * Mocking RAF and ResizeObserver to missing RAF and RO in jsdom */ @@ -50,5 +59,4 @@ class ResizeObserverMock { disconnect() {} } -// @ts-ignore window.ResizeObserver = ResizeObserverMock; diff --git a/src/chart_types/heatmap/state/selectors/get_heatmap_table.ts b/src/chart_types/heatmap/state/selectors/get_heatmap_table.ts index c19ffccc53..d7939ab4a7 100644 --- a/src/chart_types/heatmap/state/selectors/get_heatmap_table.ts +++ b/src/chart_types/heatmap/state/selectors/get_heatmap_table.ts @@ -72,8 +72,6 @@ export const getHeatmapTableSelector = createCachedSelector( }, ); - // FIXME, typing for mergeXDomain without seriesType - // @ts-ignore resultData.xDomain = mergeXDomain([{ xScaleType: spec.xScaleType }], resultData.xValues, xDomain); // sort values by their predicates diff --git a/src/chart_types/partition_chart/layout/viewmodel/fill_text_layout.ts b/src/chart_types/partition_chart/layout/viewmodel/fill_text_layout.ts index ed3fe43763..db5ec2c5f3 100644 --- a/src/chart_types/partition_chart/layout/viewmodel/fill_text_layout.ts +++ b/src/chart_types/partition_chart/layout/viewmodel/fill_text_layout.ts @@ -263,7 +263,7 @@ export const getRectangleRowGeometry: GetShapeRowGeometry function rowSetComplete(rowSet: RowSet, measuredBoxes: RowBox[]) { return ( - !measuredBoxes.length && + measuredBoxes.length === 0 && !rowSet.rows.some( (r) => isNaN(r.length) || r.rowWords.length === 0 || r.rowWords.every((rw) => rw.text.length === 0), ) @@ -314,7 +314,7 @@ export function getFillTextColor( textContrast: TextContrast, sliceFillColor: string, containerBackgroundColor?: Color, -) { +): string | undefined { const bgColorAlpha = isColorValid(containerBackgroundColor) ? chroma(containerBackgroundColor).alpha() : 1; if (!isColorValid(containerBackgroundColor) || bgColorAlpha < 1) { if (bgColorAlpha < 1) { @@ -332,7 +332,7 @@ export function getFillTextColor( ); } - let adjustedTextColor = textColor; + let adjustedTextColor: string | undefined = textColor; const containerBackground = combineColors(sliceFillColor, containerBackgroundColor); const textShouldBeInvertedAndTextContrastIsFalse = textInvertible && !textContrast; const textShouldBeInvertedAndTextContrastIsSetToTrue = textInvertible && typeof textContrast !== 'number'; @@ -343,7 +343,6 @@ export function getFillTextColor( if (textShouldBeInvertedAndTextContrastIsFalse || textShouldBeInvertedAndTextContrastIsSetToTrue) { const backgroundIsDark = colorIsDark(combineColors(sliceFillColor, containerBackgroundColor)); const specifiedTextColorIsDark = colorIsDark(textColor); - // @ts-ignore adjustedTextColor = getTextColorIfTextInvertible( backgroundIsDark, specifiedTextColorIsDark, @@ -482,7 +481,7 @@ function tryFontSize( boxes: Box[], maxRowCount: number, ) { - return function (initialRowSet: RowSet, fontSize: Pixels): { rowSet: RowSet; completed: boolean } { + return function tryFontSizeFn(initialRowSet: RowSet, fontSize: Pixels): { rowSet: RowSet; completed: boolean } { let rowSet: RowSet = initialRowSet; const wordSpacing = getWordSpacing(fontSize); @@ -555,9 +554,9 @@ function tryFontSize( let rowHasRoom = true; // iterate through words: keep adding words while there's room - while (measuredBoxes.length && rowHasRoom) { + while (measuredBoxes.length > 0 && rowHasRoom) { // adding box to row - const currentBox = measuredBoxes[0]; + const [currentBox] = measuredBoxes; const wordBeginning = currentRowLength; currentRowLength += currentBox.width + wordSpacing; @@ -576,7 +575,7 @@ function tryFontSize( innerCompleted = rowSetComplete(rowSet, measuredBoxes); } - const completed = !measuredBoxes.length; + const completed = measuredBoxes.length === 0; return { rowSet, completed }; }; } diff --git a/src/chart_types/xy_chart/domains/x_domain.ts b/src/chart_types/xy_chart/domains/x_domain.ts index 8e066474cd..05667484f1 100644 --- a/src/chart_types/xy_chart/domains/x_domain.ts +++ b/src/chart_types/xy_chart/domains/x_domain.ts @@ -17,6 +17,8 @@ * under the License. */ +import { Optional } from 'utility-types'; + import { ScaleType } from '../../../scales/constants'; import { compareByValueAsc, identity } from '../../../utils/commons'; import { computeContinuousDataDomain, computeOrdinalDataDomain, Domain } from '../../../utils/domain'; @@ -35,7 +37,7 @@ import { XDomain } from './types'; * @internal */ export function mergeXDomain( - specs: Pick[], + specs: Optional, 'seriesType'>[], xValues: Set, customXDomain?: DomainRange | Domain, fallbackScale?: XScaleType, @@ -177,13 +179,13 @@ export function findMinInterval(xValues: number[]): number { * @internal */ export function convertXScaleTypes( - specs: Pick[], + specs: Optional, 'seriesType'>[], ): { scaleType: XScaleType; isBandScale: boolean; timeZone?: string; } | null { - const seriesTypes = new Set(); + const seriesTypes = new Set(); const scaleTypes = new Set(); const timeZones = new Set(); specs.forEach((spec) => { diff --git a/src/chart_types/xy_chart/state/selectors/compute_series_domains.ts b/src/chart_types/xy_chart/state/selectors/compute_series_domains.ts index 12f3edc396..3acda2eb00 100644 --- a/src/chart_types/xy_chart/state/selectors/compute_series_domains.ts +++ b/src/chart_types/xy_chart/state/selectors/compute_series_domains.ts @@ -45,8 +45,6 @@ export const computeSeriesDomainsSelector = createCachedSelector( deselectedDataSeries, settingsSpec.xDomain, settingsSpec.orderOrdinalBinsBy, - // @ts-ignore blind sort option for vislib - settingsSpec.enableVislibSeriesSort, smallMultiples, ); }, diff --git a/src/chart_types/xy_chart/state/utils/utils.ts b/src/chart_types/xy_chart/state/utils/utils.ts index bcf579410b..3522087236 100644 --- a/src/chart_types/xy_chart/state/utils/utils.ts +++ b/src/chart_types/xy_chart/state/utils/utils.ts @@ -187,9 +187,6 @@ function getLastValues(dataSeries: DataSeries[], xDomain: XDomain): Map, - * then all series will be factored into computations. Otherwise, selectedDataSeries - * is used to restrict the computation for just the selected series * @param smallMultiples * @returns `SeriesDomainsAndData` * @internal @@ -200,14 +197,12 @@ export function computeSeriesDomains( deselectedDataSeries: SeriesIdentifier[] = [], customXDomain?: DomainRange | Domain, orderOrdinalBinsBy?: OrderBy, - enableVislibSeriesSort?: boolean, smallMultiples?: { vertical?: GroupBySpec; horizontal?: GroupBySpec }, ): SeriesDomainsAndData { const { dataSeries, xValues, seriesCollection, fallbackScale, smHValues, smVValues } = getDataSeriesFromSpecs( seriesSpecs, deselectedDataSeries, orderOrdinalBinsBy, - enableVislibSeriesSort, smallMultiples, ); // compute the x domain merging any custom domain diff --git a/src/chart_types/xy_chart/utils/series.ts b/src/chart_types/xy_chart/utils/series.ts index 1e62f0c732..52cf403241 100644 --- a/src/chart_types/xy_chart/utils/series.ts +++ b/src/chart_types/xy_chart/utils/series.ts @@ -135,7 +135,6 @@ export function splitSeriesDataByAccessors( spec: BasicSeriesSpec, xValueSums: Map, isStacked = false, - enableVislibSeriesSort = false, stackMode?: StackMode, smallMultiples?: { vertical?: GroupBySpec; horizontal?: GroupBySpec }, ): { @@ -161,169 +160,82 @@ export function splitSeriesDataByAccessors( const smHValues: Set = new Set(); const nonNumericValues: any[] = []; - if (enableVislibSeriesSort) { - /* - * This logic is mostly duplicated from below but is a temporary fix before - * https://github.com/elastic/elastic-charts/issues/795 is completed to allow sorting - * The difference from below is that it loops through all the yAsccessors before the data. - */ - yAccessors.forEach((accessor, index) => { - for (let i = 0; i < data.length; i++) { - const datum = data[i]; - const splitAccessors = getSplitAccessors(datum, splitSeriesAccessors); - // if splitSeriesAccessors are defined we should have at least one split value to include datum - if (splitSeriesAccessors.length > 0 && splitAccessors.size < 1) { - continue; - } + for (let i = 0; i < data.length; i++) { + const datum = data[i]; + const splitAccessors = getSplitAccessors(datum, splitSeriesAccessors); + // if splitSeriesAccessors are defined we should have at least one split value to include datum + if (splitSeriesAccessors.length > 0 && splitAccessors.size < 1) { + continue; + } - // skip if the datum is not an object or null - if (typeof datum !== 'object' || datum === null) { - continue; - } - const x = getAccessorValue(datum, xAccessor); + // skip if the datum is not an object or null + if (typeof datum !== 'object' || datum === null) { + continue; + } + const x = getAccessorValue(datum, xAccessor); + // skip if the x value is not a string or a number + if (typeof x !== 'string' && typeof x !== 'number') { + continue; + } - // skip if the x value is not a string or a number - if (typeof x !== 'string' && typeof x !== 'number') { - continue; - } + xValues.push(x); + let sum = xValueSums.get(x) ?? 0; - xValues.push(x); - let sum = xValueSums.get(x) ?? 0; + // extract small multiples aggregation values + const smH = smallMultiples?.horizontal?.by + ? smallMultiples.horizontal?.by(spec, datum) + : DEFAULT_SINGLE_PANEL_SM_VALUE; + if (!isNil(smH)) { + smHValues.add(smH); + } - // extract small multiples aggregation values - const smH = smallMultiples?.horizontal?.by - ? smallMultiples.horizontal?.by(spec, datum) - : DEFAULT_SINGLE_PANEL_SM_VALUE; - if (!isNil(smH)) { - smHValues.add(smH); - } + const smV = smallMultiples?.vertical?.by ? smallMultiples.vertical.by(spec, datum) : DEFAULT_SINGLE_PANEL_SM_VALUE; + if (!isNil(smV)) { + smVValues.add(smV); + } - const smV = smallMultiples?.vertical?.by - ? smallMultiples.vertical.by(spec, datum) - : DEFAULT_SINGLE_PANEL_SM_VALUE; - if (!isNil(smV)) { - smVValues.add(smV); - } + yAccessors.forEach((accessor, index) => { + const cleanedDatum = extractYAndMarkFromDatum( + datum, + accessor, + nonNumericValues, + y0Accessors && y0Accessors[index], + markSizeAccessor, + ); - const cleanedDatum = extractYAndMarkFromDatum( - datum, - accessor, - nonNumericValues, - y0Accessors && y0Accessors[index], - markSizeAccessor, - ); - const accessorStr = getAccessorFieldName(accessor, index); - const splitAccessorStrs = [...splitAccessors.values()].map((a, si) => getAccessorFieldName(a, si)); - const seriesKeys = [...splitAccessorStrs, accessorStr]; - const seriesIdentifier: Omit = { - specId, - yAccessor: accessorStr, - splitAccessors, + const accessorStr = getAccessorFieldName(accessor, index); + const splitAccessorStrs = [...splitAccessors.values()].map((a, si) => getAccessorFieldName(a, si)); + const seriesKeys = [...splitAccessorStrs, accessorStr]; + const seriesIdentifier: Omit = { + specId, + seriesKeys, + yAccessor: accessorStr, + splitAccessors, + smVerticalAccessorValue: smV, + smHorizontalAccessorValue: smH, + }; + const seriesKey = getSeriesKey(seriesIdentifier, groupId); + sum += cleanedDatum.y1 ?? 0; + const newDatum = { x, ...cleanedDatum, smH, smV }; + const series = dataSeries.get(seriesKey); + if (series) { + series.data.push(newDatum); + } else { + dataSeries.set(seriesKey, { + ...seriesIdentifier, + groupId, + seriesType, + stackMode, + isStacked, seriesKeys, - smVerticalAccessorValue: smV, - smHorizontalAccessorValue: smH, - }; - const seriesKey = getSeriesKey(seriesIdentifier, groupId); - sum += cleanedDatum.y1 ?? 0; - const newDatum = { x, ...cleanedDatum, smH, smV }; - const series = dataSeries.get(seriesKey); - if (series) { - series.data.push(newDatum); - } else { - dataSeries.set(seriesKey, { - ...seriesIdentifier, - stackMode, - seriesType, - groupId, - isStacked, - key: seriesKey, - data: [newDatum], - spec, - }); - } - xValueSums.set(x, sum); - } - }); - } else { - for (let i = 0; i < data.length; i++) { - const datum = data[i]; - const splitAccessors = getSplitAccessors(datum, splitSeriesAccessors); - // if splitSeriesAccessors are defined we should have at least one split value to include datum - if (splitSeriesAccessors.length > 0 && splitAccessors.size < 1) { - continue; - } - - // skip if the datum is not an object or null - if (typeof datum !== 'object' || datum === null) { - continue; - } - const x = getAccessorValue(datum, xAccessor); - // skip if the x value is not a string or a number - if (typeof x !== 'string' && typeof x !== 'number') { - continue; - } - - xValues.push(x); - let sum = xValueSums.get(x) ?? 0; - - // extract small multiples aggregation values - const smH = smallMultiples?.horizontal?.by - ? smallMultiples.horizontal?.by(spec, datum) - : DEFAULT_SINGLE_PANEL_SM_VALUE; - if (!isNil(smH)) { - smHValues.add(smH); - } - - const smV = smallMultiples?.vertical?.by - ? smallMultiples.vertical.by(spec, datum) - : DEFAULT_SINGLE_PANEL_SM_VALUE; - if (!isNil(smV)) { - smVValues.add(smV); + key: seriesKey, + data: [newDatum], + spec, + }); } - yAccessors.forEach((accessor, index) => { - const cleanedDatum = extractYAndMarkFromDatum( - datum, - accessor, - nonNumericValues, - y0Accessors && y0Accessors[index], - markSizeAccessor, - ); - - const accessorStr = getAccessorFieldName(accessor, index); - const splitAccessorStrs = [...splitAccessors.values()].map((a, si) => getAccessorFieldName(a, si)); - const seriesKeys = [...splitAccessorStrs, accessorStr]; - const seriesIdentifier: Omit = { - specId, - seriesKeys, - yAccessor: accessorStr, - splitAccessors, - smVerticalAccessorValue: smV, - smHorizontalAccessorValue: smH, - }; - const seriesKey = getSeriesKey(seriesIdentifier, groupId); - sum += cleanedDatum.y1 ?? 0; - const newDatum = { x, ...cleanedDatum, smH, smV }; - const series = dataSeries.get(seriesKey); - if (series) { - series.data.push(newDatum); - } else { - dataSeries.set(seriesKey, { - ...seriesIdentifier, - groupId, - seriesType, - stackMode, - isStacked, - seriesKeys, - key: seriesKey, - data: [newDatum], - spec, - }); - } - - xValueSums.set(x, sum); - }); - } + xValueSums.set(x, sum); + }); } if (nonNumericValues.length > 0) { @@ -482,7 +394,6 @@ export function getDataSeriesFromSpecs( seriesSpecs: BasicSeriesSpec[], deselectedDataSeries: SeriesIdentifier[] = [], orderOrdinalBinsBy?: OrderBy, - enableVislibSeriesSort?: boolean, smallMultiples?: { vertical?: GroupBySpec; horizontal?: GroupBySpec }, ): { dataSeries: DataSeries[]; @@ -522,7 +433,6 @@ export function getDataSeriesFromSpecs( spec, mutatedXValueSums, isStacked, - enableVislibSeriesSort, specGroup?.stackMode, smallMultiples, ); diff --git a/src/components/chart.tsx b/src/components/chart.tsx index d3de77cdd1..8b450afd9f 100644 --- a/src/components/chart.tsx +++ b/src/components/chart.tsx @@ -149,15 +149,6 @@ export class Chart extends React.Component { bgCtx.fillRect(0, 0, canvas.width, canvas.height); bgCtx.drawImage(canvas, 0, 0); - // @ts-ignore - if (bgCtx.msToBlob) { - // @ts-ignore - const blobOrDataUrl = bgCtx.msToBlob(); - return { - blobOrDataUrl, - browser: 'IE11', - }; - } return { blobOrDataUrl: backgroundCanvas.toDataURL(), browser: 'other',