From d6be7c3b382a8a671c1f221d784c37f4d23d3261 Mon Sep 17 00:00:00 2001 From: Emma Cunningham Date: Thu, 4 Apr 2019 14:26:44 -0700 Subject: [PATCH 01/19] feat(legend): display last series value in legend --- src/components/_legend.scss | 9 +++++++-- src/components/legend.tsx | 8 ++++---- src/components/legend_element.tsx | 8 +++++++- src/lib/series/legend.ts | 5 +++++ src/lib/series/series.ts | 11 +++++++++++ src/state/chart_state.test.ts | 2 ++ 6 files changed, 36 insertions(+), 7 deletions(-) diff --git a/src/components/_legend.scss b/src/components/_legend.scss index 755b60379a..0023ebd028 100644 --- a/src/components/_legend.scss +++ b/src/components/_legend.scss @@ -104,8 +104,8 @@ $elasticChartsLegendMaxHeight: $euiSize * 4; } .elasticChartsLegendListItem__title { - width: $elasticChartsLegendMaxWidth - 4 * $euiSize; - max-width: $elasticChartsLegendMaxWidth - 4 * $euiSize; + width: $elasticChartsLegendMaxWidth - 5 * $euiSize; + max-width: $elasticChartsLegendMaxWidth - 5 * $euiSize; &.elasticChartsLegendListItem__title--selected { .elasticChartsLegendListItem__title { @@ -114,6 +114,11 @@ $elasticChartsLegendMaxHeight: $euiSize * 4; } } +.elasticChartsLegendListItem__lastBucket { + font-weight: $euiFontWeightMedium; + text-align: right; +} + .elasticChartsLegend__toggle { border-radius: $euiBorderRadius; border-bottom-right-radius: 0; diff --git a/src/components/legend.tsx b/src/components/legend.tsx index 46ba3bd320..717c810467 100644 --- a/src/components/legend.tsx +++ b/src/components/legend.tsx @@ -68,7 +68,7 @@ class LegendComponent extends React.Component { responsive={false} > {[...legendItems.values()].map((item) => { - const { color, label, isSeriesVisible, isLegendItemVisible } = item; + const { color, label, isSeriesVisible, isLegendItemVisible, lastValue } = item; const legendItemProps = { key: item.key, @@ -81,7 +81,7 @@ class LegendComponent extends React.Component { return ( - {this.renderLegendElement({ color, label, isSeriesVisible }, item.key)} + {this.renderLegendElement({ color, label, isSeriesVisible, lastValue }, item.key)} ); })} @@ -100,10 +100,10 @@ class LegendComponent extends React.Component { } private renderLegendElement = ( - { color, label, isSeriesVisible }: Partial, + { color, label, isSeriesVisible, lastValue }: Partial, legendItemKey: string, ) => { - const props = { color, label, isSeriesVisible, legendItemKey }; + const props = { color, label, isSeriesVisible, legendItemKey, lastValue }; return ; } diff --git a/src/components/legend_element.tsx b/src/components/legend_element.tsx index f36b7be950..6b0deb53ce 100644 --- a/src/components/legend_element.tsx +++ b/src/components/legend_element.tsx @@ -22,6 +22,7 @@ interface LegendElementProps { color: string | undefined; label: string | undefined; isSeriesVisible?: boolean; + lastValue: string; } interface LegendElementState { @@ -52,7 +53,7 @@ class LegendElementComponent extends React.Component + + + {lastValue} + + ); } diff --git a/src/lib/series/legend.ts b/src/lib/series/legend.ts index b4983b30d8..45eda2d384 100644 --- a/src/lib/series/legend.ts +++ b/src/lib/series/legend.ts @@ -10,6 +10,7 @@ export interface LegendItem { value: DataSeriesColorsValues; isSeriesVisible?: boolean; isLegendItemVisible?: boolean; + lastValue: any; } export function computeLegend( seriesColor: Map, @@ -33,6 +34,9 @@ export function computeLegend( return; } + // Use this to get axis spec w/ tick formatter + // const { xAxis, yAxis } = getAxesSpecForSpecId(axesSpecs, groupId); + const { hideInLegend } = spec; legendItems.set(key, { @@ -42,6 +46,7 @@ export function computeLegend( value: series, isSeriesVisible, isLegendItemVisible: !hideInLegend, + lastValue: series.lastValue, }); }); return legendItems; diff --git a/src/lib/series/series.ts b/src/lib/series/series.ts index eeff8ef351..c23351414c 100644 --- a/src/lib/series/series.ts +++ b/src/lib/series/series.ts @@ -47,6 +47,7 @@ export interface DataSeriesCounts { export interface DataSeriesColorsValues { specId: SpecId; colorValues: any[]; + lastValue?: any; } /** @@ -61,6 +62,7 @@ export function splitSeries( rawDataSeries: RawDataSeries[]; colorsValues: Map; xValues: Set; + splitSeriesLastValues: Map; } { const { xAccessor, yAccessors, splitSeriesAccessors = [] } = accessors; const colorAccessors = accessors.colorAccessors ? accessors.colorAccessors : splitSeriesAccessors; @@ -68,6 +70,8 @@ export function splitSeries( const series = new Map(); const colorsValues = new Map(); const xValues = new Set(); + const splitSeriesLastValues = new Map(); + data.forEach((datum) => { const seriesKey = getAccessorsValues(datum, splitSeriesAccessors); if (isMultipleY) { @@ -76,6 +80,7 @@ export function splitSeries( const colorValuesKey = getColorValuesAsString(colorValues, specId); colorsValues.set(colorValuesKey, colorValues); const cleanedDatum = cleanDatum(datum, xAccessor, accessor); + splitSeriesLastValues.set(colorValuesKey, cleanedDatum.y); xValues.add(cleanedDatum.x); updateSeriesMap(series, [...seriesKey, accessor], cleanedDatum, specId, colorValuesKey); }, {}); @@ -84,14 +89,17 @@ export function splitSeries( const colorValuesKey = getColorValuesAsString(colorValues, specId); colorsValues.set(colorValuesKey, colorValues); const cleanedDatum = cleanDatum(datum, xAccessor, yAccessors[0]); + splitSeriesLastValues.set(colorValuesKey, cleanedDatum.y); xValues.add(cleanedDatum.x); updateSeriesMap(series, [...seriesKey], cleanedDatum, specId, colorValuesKey); } }, {}); + return { rawDataSeries: [...series.values()], colorsValues, xValues, + splitSeriesLastValues, }; } @@ -370,9 +378,12 @@ export function getSplittedSeries( splittedSeries.set(specId, currentRawDataSeries); dataSeries.colorsValues.forEach((colorValues, key) => { + const lastValue = dataSeries.splitSeriesLastValues.get(key); + seriesColors.set(key, { specId, colorValues, + lastValue, }); }); diff --git a/src/state/chart_state.test.ts b/src/state/chart_state.test.ts index 99afa7488a..ae2cadf33f 100644 --- a/src/state/chart_state.test.ts +++ b/src/state/chart_state.test.ts @@ -43,6 +43,7 @@ describe('Chart Store', () => { specId: SPEC_ID, colorValues: [], }, + lastValue: 'last', }; const secondLegendItem = { @@ -53,6 +54,7 @@ describe('Chart Store', () => { specId: SPEC_ID, colorValues: [], }, + lastValue: 'last', }; test('can add a single spec', () => { From 8bbbaadd02de7f20998b8984e7bcada47ccee32a Mon Sep 17 00:00:00 2001 From: Emma Cunningham Date: Fri, 5 Apr 2019 09:06:09 -0700 Subject: [PATCH 02/19] feat(legend): format lastValue with axisSpec tickFormatter --- src/components/legend.tsx | 9 ++++---- src/lib/series/legend.test.ts | 40 +++++++++++++++++++++++++++-------- src/lib/series/legend.ts | 21 ++++++++++++------ src/state/chart_state.ts | 1 + 4 files changed, 52 insertions(+), 19 deletions(-) diff --git a/src/components/legend.tsx b/src/components/legend.tsx index 717c810467..e0d28caadd 100644 --- a/src/components/legend.tsx +++ b/src/components/legend.tsx @@ -68,7 +68,7 @@ class LegendComponent extends React.Component { responsive={false} > {[...legendItems.values()].map((item) => { - const { color, label, isSeriesVisible, isLegendItemVisible, lastValue } = item; + const { isLegendItemVisible } = item; const legendItemProps = { key: item.key, @@ -81,7 +81,7 @@ class LegendComponent extends React.Component { return ( - {this.renderLegendElement({ color, label, isSeriesVisible, lastValue }, item.key)} + {this.renderLegendElement(item, item.key)} ); })} @@ -100,10 +100,11 @@ class LegendComponent extends React.Component { } private renderLegendElement = ( - { color, label, isSeriesVisible, lastValue }: Partial, + { color, label, isSeriesVisible, lastValue }: LegendItem, legendItemKey: string, ) => { - const props = { color, label, isSeriesVisible, legendItemKey, lastValue }; + + const props = { color, label, isSeriesVisible, legendItemKey, lastValue: lastValue.formatted }; return ; } diff --git a/src/lib/series/legend.test.ts b/src/lib/series/legend.test.ts index c2558c9196..2067b35cf7 100644 --- a/src/lib/series/legend.test.ts +++ b/src/lib/series/legend.test.ts @@ -1,8 +1,8 @@ -import { getGroupId, getSpecId, SpecId } from '../utils/ids'; +import { AxisId, getAxisId, getGroupId, getSpecId, SpecId } from '../utils/ids'; import { ScaleType } from '../utils/scales/scales'; import { computeLegend, getSeriesColorLabel } from './legend'; import { DataSeriesColorsValues } from './series'; -import { BasicSeriesSpec } from './specs'; +import { AxisSpec, BasicSeriesSpec, Position } from './specs'; const colorValues1a = { specId: getSpecId('spec1'), @@ -46,6 +46,22 @@ const spec2: BasicSeriesSpec = { hideInLegend: false, }; +const axesSpecs = new Map(); +const axisSpec: AxisSpec = { + id: getAxisId('axis1'), + groupId: getGroupId('group1'), + hide: false, + showOverlappingTicks: false, + showOverlappingLabels: false, + position: Position.Left, + tickSize: 10, + tickPadding: 10, + tickFormat: (value: any) => { + return `${value}`; + }, +}; +axesSpecs.set(axisSpec.id, axisSpec); + describe('Legends', () => { const seriesColor = new Map(); const seriesColorMap = new Map(); @@ -61,7 +77,7 @@ describe('Legends', () => { }); it('compute legend for a single series', () => { seriesColor.set('colorSeries1a', colorValues1a); - const legend = computeLegend(seriesColor, seriesColorMap, specs, 'violet'); + const legend = computeLegend(seriesColor, seriesColorMap, specs, 'violet', axesSpecs); const expected = [ { color: 'red', @@ -70,6 +86,7 @@ describe('Legends', () => { isSeriesVisible: true, isLegendItemVisible: true, key: 'colorSeries1a', + lastValue: {}, }, ]; expect(Array.from(legend.values())).toEqual(expected); @@ -77,7 +94,7 @@ describe('Legends', () => { it('compute legend for a single spec but with multiple series', () => { seriesColor.set('colorSeries1a', colorValues1a); seriesColor.set('colorSeries1b', colorValues1b); - const legend = computeLegend(seriesColor, seriesColorMap, specs, 'violet'); + const legend = computeLegend(seriesColor, seriesColorMap, specs, 'violet', axesSpecs); const expected = [ { color: 'red', @@ -86,6 +103,7 @@ describe('Legends', () => { isSeriesVisible: true, isLegendItemVisible: true, key: 'colorSeries1a', + lastValue: {}, }, { color: 'blue', @@ -94,6 +112,7 @@ describe('Legends', () => { isSeriesVisible: true, isLegendItemVisible: true, key: 'colorSeries1b', + lastValue: {}, }, ]; expect(Array.from(legend.values())).toEqual(expected); @@ -101,7 +120,7 @@ describe('Legends', () => { it('compute legend for multiple specs', () => { seriesColor.set('colorSeries1a', colorValues1a); seriesColor.set('colorSeries2a', colorValues2a); - const legend = computeLegend(seriesColor, seriesColorMap, specs, 'violet'); + const legend = computeLegend(seriesColor, seriesColorMap, specs, 'violet', axesSpecs); const expected = [ { color: 'red', @@ -110,6 +129,7 @@ describe('Legends', () => { isSeriesVisible: true, isLegendItemVisible: true, key: 'colorSeries1a', + lastValue: {}, }, { color: 'green', @@ -118,19 +138,20 @@ describe('Legends', () => { isSeriesVisible: true, isLegendItemVisible: true, key: 'colorSeries2a', + lastValue: {}, }, ]; expect(Array.from(legend.values())).toEqual(expected); }); it('empty legend for missing spec', () => { seriesColor.set('colorSeries2b', colorValues2b); - const legend = computeLegend(seriesColor, seriesColorMap, specs, 'violet'); + const legend = computeLegend(seriesColor, seriesColorMap, specs, 'violet', axesSpecs); expect(legend.size).toEqual(0); }); it('compute legend with default color for missing series color', () => { seriesColor.set('colorSeries1a', colorValues1a); const emptyColorMap = new Map(); - const legend = computeLegend(seriesColor, emptyColorMap, specs, 'violet'); + const legend = computeLegend(seriesColor, emptyColorMap, specs, 'violet', axesSpecs); const expected = [ { color: 'violet', @@ -139,6 +160,7 @@ describe('Legends', () => { isSeriesVisible: true, isLegendItemVisible: true, key: 'colorSeries1a', + lastValue: {}, }, ]; expect(Array.from(legend.values())).toEqual(expected); @@ -152,7 +174,7 @@ describe('Legends', () => { const emptyColorMap = new Map(); const deselectedDataSeries = null; - const legend = computeLegend(seriesColor, emptyColorMap, specs, 'violet', deselectedDataSeries); + const legend = computeLegend(seriesColor, emptyColorMap, specs, 'violet', axesSpecs, deselectedDataSeries); const visibility = [...legend.values()].map((item) => item.isSeriesVisible); @@ -167,7 +189,7 @@ describe('Legends', () => { const emptyColorMap = new Map(); const deselectedDataSeries = [colorValues1a, colorValues1b]; - const legend = computeLegend(seriesColor, emptyColorMap, specs, 'violet', deselectedDataSeries); + const legend = computeLegend(seriesColor, emptyColorMap, specs, 'violet', axesSpecs, deselectedDataSeries); const visibility = [...legend.values()].map((item) => item.isSeriesVisible); expect(visibility).toEqual([false, false, true]); diff --git a/src/lib/series/legend.ts b/src/lib/series/legend.ts index 45eda2d384..af29d9ec32 100644 --- a/src/lib/series/legend.ts +++ b/src/lib/series/legend.ts @@ -1,7 +1,8 @@ -import { findDataSeriesByColorValues } from '../../state/utils'; -import { SpecId } from '../utils/ids'; +import { findDataSeriesByColorValues, getAxesSpecForSpecId } from '../../state/utils'; +import { identity } from '../utils/commons'; +import { AxisId, SpecId } from '../utils/ids'; import { DataSeriesColorsValues } from './series'; -import { BasicSeriesSpec } from './specs'; +import { AxisSpec, BasicSeriesSpec } from './specs'; export interface LegendItem { key: string; @@ -10,13 +11,17 @@ export interface LegendItem { value: DataSeriesColorsValues; isSeriesVisible?: boolean; isLegendItemVisible?: boolean; - lastValue: any; + lastValue: { + raw: any; + formatted: any; + }; } export function computeLegend( seriesColor: Map, seriesColorMap: Map, specs: Map, defaultColor: string, + axesSpecs: Map, deselectedDataSeries?: DataSeriesColorsValues[] | null, ): Map { const legendItems: Map = new Map(); @@ -35,7 +40,8 @@ export function computeLegend( } // Use this to get axis spec w/ tick formatter - // const { xAxis, yAxis } = getAxesSpecForSpecId(axesSpecs, groupId); + const { yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId); + const formatter = yAxis ? yAxis.tickFormat : identity; const { hideInLegend } = spec; @@ -46,7 +52,10 @@ export function computeLegend( value: series, isSeriesVisible, isLegendItemVisible: !hideInLegend, - lastValue: series.lastValue, + lastValue: { + raw: series.lastValue, + formatted: formatter(series.lastValue), + }, }); }); return legendItems; diff --git a/src/state/chart_state.ts b/src/state/chart_state.ts index 537f78732c..8e4b406a6d 100644 --- a/src/state/chart_state.ts +++ b/src/state/chart_state.ts @@ -758,6 +758,7 @@ export class ChartStore { this.seriesColorMap, this.seriesSpecs, this.chartTheme.colors.defaultVizColor, + this.axesSpecs, this.deselectedDataSeries, ); // tslint:disable-next-line:no-console From 343b8832516580563513adb4b480e6d1f1762692 Mon Sep 17 00:00:00 2001 From: Emma Cunningham Date: Fri, 5 Apr 2019 17:24:31 -0700 Subject: [PATCH 03/19] feat(series): sort seriesColors by last value in series --- src/lib/series/series.ts | 27 ++++++++++++++++++++++++--- src/state/chart_state.test.ts | 15 +++++++++++---- 2 files changed, 35 insertions(+), 7 deletions(-) diff --git a/src/lib/series/series.ts b/src/lib/series/series.ts index c23351414c..e7d7fa290e 100644 --- a/src/lib/series/series.ts +++ b/src/lib/series/series.ts @@ -377,13 +377,34 @@ export function getSplittedSeries( splittedSeries.set(specId, currentRawDataSeries); - dataSeries.colorsValues.forEach((colorValues, key) => { - const lastValue = dataSeries.splitSeriesLastValues.get(key); + const { splitSeriesLastValues } = dataSeries; + + // We sort the series keys by their last values and this order determines the + // insertion order of the seriesColors Map so that when it is iterated over, + // the items are in order of this sorting. + const isAsc = false; // TODO: get this from Setting spec legendSortOrder + const sortOp = isAsc ? 1 : -1; + + [...splitSeriesLastValues.keys()].sort((keyA, keyB) => { + const lastValueA = splitSeriesLastValues.get(keyA); + const lastValueB = splitSeriesLastValues.get(keyB); + + if (!lastValueA || !lastValueB) { + return -1; + } + + return (lastValueA - lastValueB) * sortOp; + }).forEach((key) => { + const colorValues = dataSeries.colorsValues.get(key); + + if (!colorValues) { + return; + } seriesColors.set(key, { specId, colorValues, - lastValue, + lastValue: splitSeriesLastValues.get(key), }); }); diff --git a/src/state/chart_state.test.ts b/src/state/chart_state.test.ts index ae2cadf33f..4eb6dd69b2 100644 --- a/src/state/chart_state.test.ts +++ b/src/state/chart_state.test.ts @@ -1,3 +1,4 @@ +import { LegendItem } from '../lib/series/legend'; import { GeometryValue, IndexedGeometry } from '../lib/series/rendering'; import { DataSeriesColorsValues } from '../lib/series/series'; import { @@ -35,7 +36,7 @@ describe('Chart Store', () => { hideInLegend: false, }; - const firstLegendItem = { + const firstLegendItem: LegendItem = { key: 'color1', color: 'foo', label: 'bar', @@ -43,10 +44,13 @@ describe('Chart Store', () => { specId: SPEC_ID, colorValues: [], }, - lastValue: 'last', + lastValue: { + raw: 'last', + formatted: 'formatted-last', + }, }; - const secondLegendItem = { + const secondLegendItem: LegendItem = { key: 'color2', color: 'baz', label: 'qux', @@ -54,7 +58,10 @@ describe('Chart Store', () => { specId: SPEC_ID, colorValues: [], }, - lastValue: 'last', + lastValue: { + raw: 'last', + formatted: 'formatted-last', + }, }; test('can add a single spec', () => { From d7536efda647efffd7b55e35f0f871ea9be95279 Mon Sep 17 00:00:00 2001 From: Emma Cunningham Date: Fri, 5 Apr 2019 17:56:40 -0700 Subject: [PATCH 04/19] test(series): test seriesColors sorting --- src/lib/series/series.test.ts | 73 +++++++++++++++++++++++++++++++++++ src/lib/series/series.ts | 72 ++++++++++++++++++++-------------- 2 files changed, 116 insertions(+), 29 deletions(-) diff --git a/src/lib/series/series.test.ts b/src/lib/series/series.test.ts index d79772eec5..9669848aae 100644 --- a/src/lib/series/series.test.ts +++ b/src/lib/series/series.test.ts @@ -4,6 +4,7 @@ import { ScaleType } from '../utils/scales/scales'; import { DataSeriesColorsValues, formatStackedDataSeriesValues, + getDataSeriesColorsValuesMap, getFormattedDataseries, getSeriesColorMap, getSplittedSeries, @@ -316,4 +317,76 @@ describe('Series', () => { const subsetSplit = getSplittedSeries(seriesSpecs, deselectedDataSeries); expect(subsetSplit.splittedSeries.get(specId)!.length).toBe(1); }); + + test('should get sorted dataSeriesColorsValues map', () => { + const specId = getSpecId('spec1'); + + const splitSeriesLastValues = new Map(); + splitSeriesLastValues.set('a', 20); + splitSeriesLastValues.set('b', 10); + splitSeriesLastValues.set('c', 30); + + const colorValuesA = ['a', '1']; + const colorValuesB = ['b', '2']; + const colorValuesC = ['b', '3']; + + const colorValuesMap = new Map(); + + const dataSeriesColorsValuesA = { + specId, + colorValues: colorValuesA, + lastValue: 20, + }; + + const dataSeriesColorsValuesB = { + specId, + colorValues: colorValuesB, + lastValue: 10, + }; + + const dataSeriesColorsValuesC = { + specId, + colorValues: colorValuesC, + lastValue: 30, + }; + + const missingColorValues = getDataSeriesColorsValuesMap( + splitSeriesLastValues, + colorValuesMap, + specId, + ); + + expect(missingColorValues).toEqual(new Map()); + + colorValuesMap.set('a', colorValuesA); + colorValuesMap.set('b', colorValuesB); + colorValuesMap.set('c', colorValuesC); + + const defaultDesc = getDataSeriesColorsValuesMap( + splitSeriesLastValues, + colorValuesMap, + specId, + ); + + const expectedDefaultDesc = new Map(); + expectedDefaultDesc.set('c', dataSeriesColorsValuesC); + expectedDefaultDesc.set('a', dataSeriesColorsValuesA); + expectedDefaultDesc.set('b', dataSeriesColorsValuesB); + + expect(defaultDesc).toEqual(expectedDefaultDesc); + + const ascMap = getDataSeriesColorsValuesMap( + splitSeriesLastValues, + colorValuesMap, + specId, + false, + ); + + const expectedAscMap = new Map(); + expectedAscMap.set('b', dataSeriesColorsValuesB); + expectedAscMap.set('a', dataSeriesColorsValuesA); + expectedAscMap.set('c', dataSeriesColorsValuesC); + + expect(ascMap).toEqual(expectedAscMap); + }); }); diff --git a/src/lib/series/series.ts b/src/lib/series/series.ts index e7d7fa290e..4771b8a399 100644 --- a/src/lib/series/series.ts +++ b/src/lib/series/series.ts @@ -357,7 +357,7 @@ export function getSplittedSeries( xValues: Set; } { const splittedSeries = new Map(); - const seriesColors = new Map(); + let seriesColors = new Map(); const xValues: Set = new Set(); for (const [specId, spec] of seriesSpecs) { const dataSeries = splitSeries(spec.data, spec, specId); @@ -377,36 +377,15 @@ export function getSplittedSeries( splittedSeries.set(specId, currentRawDataSeries); - const { splitSeriesLastValues } = dataSeries; - - // We sort the series keys by their last values and this order determines the - // insertion order of the seriesColors Map so that when it is iterated over, - // the items are in order of this sorting. - const isAsc = false; // TODO: get this from Setting spec legendSortOrder - const sortOp = isAsc ? 1 : -1; - - [...splitSeriesLastValues.keys()].sort((keyA, keyB) => { - const lastValueA = splitSeriesLastValues.get(keyA); - const lastValueB = splitSeriesLastValues.get(keyB); + const { splitSeriesLastValues, colorsValues } = dataSeries; - if (!lastValueA || !lastValueB) { - return -1; - } - - return (lastValueA - lastValueB) * sortOp; - }).forEach((key) => { - const colorValues = dataSeries.colorsValues.get(key); - - if (!colorValues) { - return; - } + const dataSeriesColorValues = getDataSeriesColorsValuesMap( + splitSeriesLastValues, + colorsValues, + specId, + ); - seriesColors.set(key, { - specId, - colorValues, - lastValue: splitSeriesLastValues.get(key), - }); - }); + seriesColors = new Map([...seriesColors, ...dataSeriesColorValues]); for (const xValue of dataSeries.xValues) { xValues.add(xValue); @@ -419,6 +398,41 @@ export function getSplittedSeries( }; } +export function getDataSeriesColorsValuesMap( + splitSeriesLastValues: Map, + colorValuesMap: Map, + specId: SpecId, + isDesc: boolean = true, +): Map { + const seriesColors = new Map(); + + // We sort the series keys by their last values and this order determines the + // insertion order of the seriesColors Map so that when it is iterated over, + // the items are in order of this sorting. + const sortOp = isDesc ? -1 : 1; + + [...splitSeriesLastValues.keys()].sort((keyA, keyB) => { + const lastValueA = splitSeriesLastValues.get(keyA); + const lastValueB = splitSeriesLastValues.get(keyB); + + return (lastValueA - lastValueB) * sortOp; + }).forEach((key) => { + const colorValues = colorValuesMap.get(key); + + if (!colorValues) { + return; + } + + seriesColors.set(key, { + specId, + colorValues, + lastValue: splitSeriesLastValues.get(key), + }); + }); + + return seriesColors; +} + export function getSeriesColorMap( seriesColors: Map, chartColors: ColorConfig, From ced7a3b08f0d729b8caf2ebbe0249cab401174b0 Mon Sep 17 00:00:00 2001 From: Emma Cunningham Date: Fri, 5 Apr 2019 20:19:03 -0700 Subject: [PATCH 05/19] feat(legend): display tooltipValue in legendItem --- src/components/legend.tsx | 11 +++++++++-- src/components/legend_element.tsx | 6 +++--- src/lib/series/legend.test.ts | 12 ++++++------ src/lib/series/legend.ts | 25 +++++++++++++++++++++++-- src/lib/series/tooltip.ts | 14 +++++++++++++- src/lib/utils/interactions.ts | 3 ++- src/state/chart_state.ts | 9 ++++++++- 7 files changed, 64 insertions(+), 16 deletions(-) diff --git a/src/components/legend.tsx b/src/components/legend.tsx index e0d28caadd..e77815a801 100644 --- a/src/components/legend.tsx +++ b/src/components/legend.tsx @@ -100,11 +100,18 @@ class LegendComponent extends React.Component { } private renderLegendElement = ( - { color, label, isSeriesVisible, lastValue }: LegendItem, + { color, label, isSeriesVisible, displayValue }: LegendItem, legendItemKey: string, ) => { + const tooltipValues = this.props.chartStore!.legendItemTooltipValues.get(); + let tooltipValue; - const props = { color, label, isSeriesVisible, legendItemKey, lastValue: lastValue.formatted }; + if (tooltipValues && tooltipValues.get(legendItemKey)) { + tooltipValue = tooltipValues.get(legendItemKey); + } + + const display = tooltipValue != null ? tooltipValue : displayValue.formatted; + const props = { color, label, isSeriesVisible, legendItemKey, displayValue: display }; return ; } diff --git a/src/components/legend_element.tsx b/src/components/legend_element.tsx index 6b0deb53ce..839e1f85b6 100644 --- a/src/components/legend_element.tsx +++ b/src/components/legend_element.tsx @@ -22,7 +22,7 @@ interface LegendElementProps { color: string | undefined; label: string | undefined; isSeriesVisible?: boolean; - lastValue: string; + displayValue: string; } interface LegendElementState { @@ -53,7 +53,7 @@ class LegendElementComponent extends React.Component - {lastValue} + {displayValue} diff --git a/src/lib/series/legend.test.ts b/src/lib/series/legend.test.ts index 2067b35cf7..f4bfde607d 100644 --- a/src/lib/series/legend.test.ts +++ b/src/lib/series/legend.test.ts @@ -86,7 +86,7 @@ describe('Legends', () => { isSeriesVisible: true, isLegendItemVisible: true, key: 'colorSeries1a', - lastValue: {}, + displayValue: {}, }, ]; expect(Array.from(legend.values())).toEqual(expected); @@ -103,7 +103,7 @@ describe('Legends', () => { isSeriesVisible: true, isLegendItemVisible: true, key: 'colorSeries1a', - lastValue: {}, + displayValue: {}, }, { color: 'blue', @@ -112,7 +112,7 @@ describe('Legends', () => { isSeriesVisible: true, isLegendItemVisible: true, key: 'colorSeries1b', - lastValue: {}, + displayValue: {}, }, ]; expect(Array.from(legend.values())).toEqual(expected); @@ -129,7 +129,7 @@ describe('Legends', () => { isSeriesVisible: true, isLegendItemVisible: true, key: 'colorSeries1a', - lastValue: {}, + displayValue: {}, }, { color: 'green', @@ -138,7 +138,7 @@ describe('Legends', () => { isSeriesVisible: true, isLegendItemVisible: true, key: 'colorSeries2a', - lastValue: {}, + displayValue: {}, }, ]; expect(Array.from(legend.values())).toEqual(expected); @@ -160,7 +160,7 @@ describe('Legends', () => { isSeriesVisible: true, isLegendItemVisible: true, key: 'colorSeries1a', - lastValue: {}, + displayValue: {}, }, ]; expect(Array.from(legend.values())).toEqual(expected); diff --git a/src/lib/series/legend.ts b/src/lib/series/legend.ts index af29d9ec32..36c3d2259b 100644 --- a/src/lib/series/legend.ts +++ b/src/lib/series/legend.ts @@ -1,6 +1,7 @@ import { findDataSeriesByColorValues, getAxesSpecForSpecId } from '../../state/utils'; import { identity } from '../utils/commons'; import { AxisId, SpecId } from '../utils/ids'; +import { TooltipValue } from '../utils/interactions'; import { DataSeriesColorsValues } from './series'; import { AxisSpec, BasicSeriesSpec } from './specs'; @@ -11,11 +12,12 @@ export interface LegendItem { value: DataSeriesColorsValues; isSeriesVisible?: boolean; isLegendItemVisible?: boolean; - lastValue: { + displayValue: { raw: any; formatted: any; }; } + export function computeLegend( seriesColor: Map, seriesColorMap: Map, @@ -52,7 +54,7 @@ export function computeLegend( value: series, isSeriesVisible, isLegendItemVisible: !hideInLegend, - lastValue: { + displayValue: { raw: series.lastValue, formatted: formatter(series.lastValue), }, @@ -79,3 +81,22 @@ export function getSeriesColorLabel( return label; } + +export function getSeriesTooltipValues( + tooltipValues: TooltipValue[], +): Map { + // map from seriesKey to tooltipValue + const seriesTooltipValues = new Map(); + + // First tooltipValue is the header + if (tooltipValues.length <= 1) { + return seriesTooltipValues; + } + + tooltipValues.slice(1).forEach((tooltipValue: TooltipValue) => { + const { seriesKey, value } = tooltipValue; + seriesTooltipValues.set(seriesKey, value); + }); + + return seriesTooltipValues; +} diff --git a/src/lib/series/tooltip.ts b/src/lib/series/tooltip.ts index efbe3d52da..fa62bea077 100644 --- a/src/lib/series/tooltip.ts +++ b/src/lib/series/tooltip.ts @@ -1,6 +1,8 @@ import { Accessor } from '../utils/accessor'; +import { SpecId } from '../utils/ids'; import { TooltipValue } from '../utils/interactions'; import { IndexedGeometry } from './rendering'; +import { getColorValuesAsString } from './series'; import { AxisSpec, BasicSeriesSpec, Datum, TickFormatter } from './specs'; export function formatTooltip( @@ -24,6 +26,8 @@ export function formatTooltip( } // format y value return formatAccessor( + spec.id, + seriesKey, datum, yAccessors, color, @@ -53,6 +57,8 @@ export function formatXTooltipValue( name = spec.name || `${spec.id}`; } const xValues = formatAccessor( + spec.id, + searchIndexValue.seriesKey, searchIndexValue.datum, [spec.xAccessor], color, @@ -63,7 +69,10 @@ export function formatXTooltipValue( ); return xValues[0]; } -function formatAccessor( + +export function formatAccessor( + specId: SpecId, + seriesKeys: any[], datum: Datum, accessors: Accessor[] = [], color: string, @@ -72,9 +81,12 @@ function formatAccessor( isXValue: boolean, name?: string, ): TooltipValue[] { + const seriesKey = getColorValuesAsString(seriesKeys, specId); + return accessors.map( (accessor): TooltipValue => { return { + seriesKey, name: name || `${accessor}`, value: formatter(datum[accessor]), color, diff --git a/src/lib/utils/interactions.ts b/src/lib/utils/interactions.ts index b9ccc74ae1..196ab34667 100644 --- a/src/lib/utils/interactions.ts +++ b/src/lib/utils/interactions.ts @@ -19,6 +19,7 @@ export interface TooltipValue { color: string; isHighlighted: boolean; isXValue: boolean; + seriesKey: string; } export interface HighlightedElement { position: { @@ -83,7 +84,7 @@ export function areIndexedGeometryArraysEquals(arr1: IndexedGeometry[], arr2: In if (arr1.length !== arr2.length) { return false; } - for (let i = arr1.length; i--; ) { + for (let i = arr1.length; i--;) { return areIndexedGeomsEquals(arr1[i], arr2[i]); } return true; diff --git a/src/state/chart_state.ts b/src/state/chart_state.ts index 8e4b406a6d..5b7914ba6a 100644 --- a/src/state/chart_state.ts +++ b/src/state/chart_state.ts @@ -10,7 +10,7 @@ import { import { CanvasTextBBoxCalculator } from '../lib/axes/canvas_text_bbox_calculator'; import { XDomain } from '../lib/series/domains/x_domain'; import { YDomain } from '../lib/series/domains/y_domain'; -import { computeLegend, LegendItem } from '../lib/series/legend'; +import { computeLegend, getSeriesTooltipValues, LegendItem } from '../lib/series/legend'; import { AreaGeometry, BarGeometry, @@ -401,6 +401,11 @@ export class ChartStore { } }); + legendItemTooltipValues = computed(() => { + // update legend items with value to display + return getSeriesTooltipValues(this.tooltipData); + }); + annotationTooltipState = computed(() => { // get positions relative to chart const xPos = this.rawCursorPosition.x - this.chartDimensions.left; @@ -455,6 +460,7 @@ export class ChartStore { // clear highlight geoms this.highlightedGeometries.clear(); this.tooltipData.clear(); + document.body.style.cursor = 'default'; }); @@ -761,6 +767,7 @@ export class ChartStore { this.axesSpecs, this.deselectedDataSeries, ); + // tslint:disable-next-line:no-console // console.log({ legendItems: this.legendItems }); From 05f8d5e9958dd61e1ac017b6dda5bbec0c43404c Mon Sep 17 00:00:00 2001 From: Emma Cunningham Date: Fri, 5 Apr 2019 20:34:21 -0700 Subject: [PATCH 06/19] test(chart_state): add test for legendItemsTooltipValues --- src/lib/series/legend.ts | 20 ------------------- src/lib/series/tooltip.ts | 19 ++++++++++++++++++ src/state/chart_state.test.ts | 37 +++++++++++++++++++++++++++++++++-- src/state/chart_state.ts | 4 ++-- 4 files changed, 56 insertions(+), 24 deletions(-) diff --git a/src/lib/series/legend.ts b/src/lib/series/legend.ts index 36c3d2259b..ae0393b9fa 100644 --- a/src/lib/series/legend.ts +++ b/src/lib/series/legend.ts @@ -1,7 +1,6 @@ import { findDataSeriesByColorValues, getAxesSpecForSpecId } from '../../state/utils'; import { identity } from '../utils/commons'; import { AxisId, SpecId } from '../utils/ids'; -import { TooltipValue } from '../utils/interactions'; import { DataSeriesColorsValues } from './series'; import { AxisSpec, BasicSeriesSpec } from './specs'; @@ -81,22 +80,3 @@ export function getSeriesColorLabel( return label; } - -export function getSeriesTooltipValues( - tooltipValues: TooltipValue[], -): Map { - // map from seriesKey to tooltipValue - const seriesTooltipValues = new Map(); - - // First tooltipValue is the header - if (tooltipValues.length <= 1) { - return seriesTooltipValues; - } - - tooltipValues.slice(1).forEach((tooltipValue: TooltipValue) => { - const { seriesKey, value } = tooltipValue; - seriesTooltipValues.set(seriesKey, value); - }); - - return seriesTooltipValues; -} diff --git a/src/lib/series/tooltip.ts b/src/lib/series/tooltip.ts index fa62bea077..bb79d3ccb4 100644 --- a/src/lib/series/tooltip.ts +++ b/src/lib/series/tooltip.ts @@ -5,6 +5,25 @@ import { IndexedGeometry } from './rendering'; import { getColorValuesAsString } from './series'; import { AxisSpec, BasicSeriesSpec, Datum, TickFormatter } from './specs'; +export function getSeriesTooltipValues( + tooltipValues: TooltipValue[], +): Map { + // map from seriesKey to tooltipValue + const seriesTooltipValues = new Map(); + + // First tooltipValue is the header + if (tooltipValues.length <= 1) { + return seriesTooltipValues; + } + + tooltipValues.slice(1).forEach((tooltipValue: TooltipValue) => { + const { seriesKey, value } = tooltipValue; + seriesTooltipValues.set(seriesKey, value); + }); + + return seriesTooltipValues; +} + export function formatTooltip( searchIndexValue: IndexedGeometry, spec: BasicSeriesSpec, diff --git a/src/state/chart_state.test.ts b/src/state/chart_state.test.ts index 4eb6dd69b2..01226bc895 100644 --- a/src/state/chart_state.test.ts +++ b/src/state/chart_state.test.ts @@ -44,7 +44,7 @@ describe('Chart Store', () => { specId: SPEC_ID, colorValues: [], }, - lastValue: { + displayValue: { raw: 'last', formatted: 'formatted-last', }, @@ -58,7 +58,7 @@ describe('Chart Store', () => { specId: SPEC_ID, colorValues: [], }, - lastValue: { + displayValue: { raw: 'last', formatted: 'formatted-last', }, @@ -568,6 +568,7 @@ describe('Chart Store', () => { color: 'a', isHighlighted: false, isXValue: false, + seriesKey: 'a', }; store.cursorPosition.x = -1; store.cursorPosition.y = 1; @@ -619,6 +620,7 @@ describe('Chart Store', () => { color: 'a', isHighlighted: false, isXValue: false, + seriesKey: 'a', }; store.xScale = new ScaleContinuous([0, 100], [0, 100], ScaleType.Linear); store.cursorPosition.x = 1; @@ -705,4 +707,35 @@ describe('Chart Store', () => { store.cursorPosition.x = 0; expect(store.annotationTooltipState.get()).toBe(null); }); + test('can get tooltipValues by seriesKeys', () => { + store.tooltipData.clear(); + + expect(store.legendItemTooltipValues.get()).toEqual(new Map()); + + const headerValue: TooltipValue = { + name: 'header', + value: 'foo', + color: 'a', + isHighlighted: false, + isXValue: true, + seriesKey: 'headerSeries', + }; + + store.tooltipData.replace([headerValue]); + expect(store.legendItemTooltipValues.get()).toEqual(new Map()); + + const tooltipValue: TooltipValue = { + name: 'a', + value: 123, + color: 'a', + isHighlighted: false, + isXValue: false, + seriesKey: 'seriesKey', + }; + store.tooltipData.replace([headerValue, tooltipValue]); + + const expectedTooltipValues = new Map(); + expectedTooltipValues.set('seriesKey', 123); + expect(store.legendItemTooltipValues.get()).toEqual(expectedTooltipValues); + }); }); diff --git a/src/state/chart_state.ts b/src/state/chart_state.ts index 5b7914ba6a..b4d5b3f117 100644 --- a/src/state/chart_state.ts +++ b/src/state/chart_state.ts @@ -10,7 +10,7 @@ import { import { CanvasTextBBoxCalculator } from '../lib/axes/canvas_text_bbox_calculator'; import { XDomain } from '../lib/series/domains/x_domain'; import { YDomain } from '../lib/series/domains/y_domain'; -import { computeLegend, getSeriesTooltipValues, LegendItem } from '../lib/series/legend'; +import { computeLegend, LegendItem } from '../lib/series/legend'; import { AreaGeometry, BarGeometry, @@ -39,7 +39,7 @@ import { Rendering, Rotation, } from '../lib/series/specs'; -import { formatTooltip, formatXTooltipValue } from '../lib/series/tooltip'; +import { formatTooltip, formatXTooltipValue, getSeriesTooltipValues } from '../lib/series/tooltip'; import { LIGHT_THEME } from '../lib/themes/light_theme'; import { mergeWithDefaultAnnotationLine, Theme } from '../lib/themes/theme'; import { computeChartDimensions, Dimensions } from '../lib/utils/dimensions'; From 1434cabe412a9ebc849d99b140fdf14264a12d9b Mon Sep 17 00:00:00 2001 From: Emma Cunningham Date: Sun, 7 Apr 2019 15:53:45 -0700 Subject: [PATCH 07/19] feat(legend): adjust width of legend item display value --- src/components/_legend.scss | 10 +++++++--- src/components/legend_element.tsx | 6 +++++- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/components/_legend.scss b/src/components/_legend.scss index 0023ebd028..969a3433bb 100644 --- a/src/components/_legend.scss +++ b/src/components/_legend.scss @@ -81,11 +81,13 @@ $elasticChartsLegendMaxHeight: $euiSize * 4; overflow: hidden; flex-shrink: 1; flex-grow: 0; + max-width: 100%; } .elasticChartsLegendList { overflow-y: auto; overflow-x: hidden; height: 100%; + max-width: 100%; @include euiScrollBar; } @@ -104,8 +106,8 @@ $elasticChartsLegendMaxHeight: $euiSize * 4; } .elasticChartsLegendListItem__title { - width: $elasticChartsLegendMaxWidth - 5 * $euiSize; - max-width: $elasticChartsLegendMaxWidth - 5 * $euiSize; + width: $elasticChartsLegendMaxWidth - 6 * $euiSize; + max-width: $elasticChartsLegendMaxWidth - 6 * $euiSize; &.elasticChartsLegendListItem__title--selected { .elasticChartsLegendListItem__title { @@ -114,7 +116,9 @@ $elasticChartsLegendMaxHeight: $euiSize * 4; } } -.elasticChartsLegendListItem__lastBucket { +.elasticChartsLegendListItem__displayValue { + width: $euiSize * 2; + max-width: $euiSize * 2; font-weight: $euiFontWeightMedium; text-align: right; } diff --git a/src/components/legend_element.tsx b/src/components/legend_element.tsx index 839e1f85b6..9374a7439e 100644 --- a/src/components/legend_element.tsx +++ b/src/components/legend_element.tsx @@ -113,7 +113,11 @@ class LegendElementComponent extends React.Component - + {displayValue} From a8dadeda3f7104cc95f7579ed6d339713c9df5fa Mon Sep 17 00:00:00 2001 From: Emma Cunningham Date: Sun, 7 Apr 2019 17:21:41 -0700 Subject: [PATCH 08/19] feat(settings): add isLegendItemsSortDesc to control sort order --- src/lib/series/domains/x_domain.test.ts | 20 ++++++++------- src/lib/series/series.test.ts | 12 +++++---- src/lib/series/series.ts | 2 ++ src/specs/settings.tsx | 4 +++ src/state/chart_state.ts | 3 +++ src/state/utils.ts | 2 ++ stories/legend.tsx | 33 +++++++++++++++++++++++++ 7 files changed, 62 insertions(+), 14 deletions(-) diff --git a/src/lib/series/domains/x_domain.test.ts b/src/lib/series/domains/x_domain.test.ts index 49340a821c..bda930613a 100644 --- a/src/lib/series/domains/x_domain.test.ts +++ b/src/lib/series/domains/x_domain.test.ts @@ -5,6 +5,8 @@ import { BasicSeriesSpec } from '../specs'; import { convertXScaleTypes, findMinInterval, mergeXDomain } from './x_domain'; describe('X Domain', () => { + const isSortDesc = true; + test('Should return null when missing specs or specs types', () => { const seriesSpecs: BasicSeriesSpec[] = []; const mainXScale = convertXScaleTypes(seriesSpecs); @@ -149,7 +151,7 @@ describe('X Domain', () => { const specDataSeries = new Map(); specDataSeries.set(ds1.id, ds1); specDataSeries.set(ds2.id, ds2); - const { xValues } = getSplittedSeries(specDataSeries); + const { xValues } = getSplittedSeries(specDataSeries, isSortDesc); const mergedDomain = mergeXDomain( [ { @@ -187,7 +189,7 @@ describe('X Domain', () => { const specDataSeries = new Map(); specDataSeries.set(ds1.id, ds1); specDataSeries.set(ds2.id, ds2); - const { xValues } = getSplittedSeries(specDataSeries); + const { xValues } = getSplittedSeries(specDataSeries, isSortDesc); const mergedDomain = mergeXDomain( [ { @@ -225,7 +227,7 @@ describe('X Domain', () => { const specDataSeries = new Map(); specDataSeries.set(ds1.id, ds1); specDataSeries.set(ds2.id, ds2); - const { xValues } = getSplittedSeries(specDataSeries); + const { xValues } = getSplittedSeries(specDataSeries, isSortDesc); const mergedDomain = mergeXDomain( [ { @@ -267,7 +269,7 @@ describe('X Domain', () => { const specDataSeries = new Map(); specDataSeries.set(ds1.id, ds1); specDataSeries.set(ds2.id, ds2); - const { xValues } = getSplittedSeries(specDataSeries); + const { xValues } = getSplittedSeries(specDataSeries, isSortDesc); const mergedDomain = mergeXDomain( [ { @@ -309,7 +311,7 @@ describe('X Domain', () => { const specDataSeries = new Map(); specDataSeries.set(ds1.id, ds1); specDataSeries.set(ds2.id, ds2); - const { xValues } = getSplittedSeries(specDataSeries); + const { xValues } = getSplittedSeries(specDataSeries, isSortDesc); const mergedDomain = mergeXDomain( [ { @@ -351,7 +353,7 @@ describe('X Domain', () => { const specDataSeries = new Map(); specDataSeries.set(ds1.id, ds1); specDataSeries.set(ds2.id, ds2); - const { xValues } = getSplittedSeries(specDataSeries); + const { xValues } = getSplittedSeries(specDataSeries, isSortDesc); const mergedDomain = mergeXDomain( [ { @@ -393,7 +395,7 @@ describe('X Domain', () => { const specDataSeries = new Map(); specDataSeries.set(ds1.id, ds1); specDataSeries.set(ds2.id, ds2); - const { xValues } = getSplittedSeries(specDataSeries); + const { xValues } = getSplittedSeries(specDataSeries, isSortDesc); const mergedDomain = mergeXDomain( [ { @@ -435,7 +437,7 @@ describe('X Domain', () => { const specDataSeries = new Map(); specDataSeries.set(ds1.id, ds1); specDataSeries.set(ds2.id, ds2); - const { xValues } = getSplittedSeries(specDataSeries); + const { xValues } = getSplittedSeries(specDataSeries, isSortDesc); const mergedDomain = mergeXDomain( [ { @@ -479,7 +481,7 @@ describe('X Domain', () => { const specDataSeries = new Map(); specDataSeries.set(ds1.id, ds1); specDataSeries.set(ds2.id, ds2); - const { xValues } = getSplittedSeries(specDataSeries); + const { xValues } = getSplittedSeries(specDataSeries, isSortDesc); const mergedDomain = mergeXDomain( [ diff --git a/src/lib/series/series.test.ts b/src/lib/series/series.test.ts index 9669848aae..ec77b72df2 100644 --- a/src/lib/series/series.test.ts +++ b/src/lib/series/series.test.ts @@ -15,6 +15,8 @@ import { BasicSeriesSpec } from './specs'; import * as TestDataset from './utils/test_dataset'; describe('Series', () => { + const isSortDesc = true; + test('Can split dataset into 1Y0G series', () => { const splittedSeries = splitSeries( TestDataset.BARCHART_1Y0G, @@ -199,7 +201,7 @@ describe('Series', () => { }; seriesSpecs.set(spec1.id, spec1); seriesSpecs.set(spec2.id, spec2); - const splittedDataSeries = getSplittedSeries(seriesSpecs); + const splittedDataSeries = getSplittedSeries(seriesSpecs, isSortDesc); expect(splittedDataSeries.splittedSeries.get(getSpecId('spec1'))).toMatchSnapshot(); expect(splittedDataSeries.splittedSeries.get(getSpecId('spec2'))).toMatchSnapshot(); }); @@ -232,7 +234,7 @@ describe('Series', () => { }; seriesSpecs.set(spec1.id, spec1); seriesSpecs.set(spec2.id, spec2); - const splittedDataSeries = getSplittedSeries(seriesSpecs); + const splittedDataSeries = getSplittedSeries(seriesSpecs, isSortDesc); const stackedDataSeries = getFormattedDataseries( [spec1, spec2], splittedDataSeries.splittedSeries, @@ -304,17 +306,17 @@ describe('Series', () => { seriesSpecs.set(splitSpec.id, splitSpec); - const allSeries = getSplittedSeries(seriesSpecs, null); + const allSeries = getSplittedSeries(seriesSpecs, isSortDesc, null); expect(allSeries.splittedSeries.get(specId)!.length).toBe(2); - const emptyDeselected = getSplittedSeries(seriesSpecs, []); + const emptyDeselected = getSplittedSeries(seriesSpecs, isSortDesc, []); expect(emptyDeselected.splittedSeries.get(specId)!.length).toBe(2); const deselectedDataSeries: DataSeriesColorsValues[] = [{ specId, colorValues: ['y1'], }]; - const subsetSplit = getSplittedSeries(seriesSpecs, deselectedDataSeries); + const subsetSplit = getSplittedSeries(seriesSpecs, isSortDesc, deselectedDataSeries); expect(subsetSplit.splittedSeries.get(specId)!.length).toBe(1); }); diff --git a/src/lib/series/series.ts b/src/lib/series/series.ts index 4771b8a399..0865a8a828 100644 --- a/src/lib/series/series.ts +++ b/src/lib/series/series.ts @@ -350,6 +350,7 @@ export function formatStackedDataSeriesValues( export function getSplittedSeries( seriesSpecs: Map, + isSortOrderDesc: boolean, deselectedDataSeries?: DataSeriesColorsValues[] | null, ): { splittedSeries: Map; @@ -383,6 +384,7 @@ export function getSplittedSeries( splitSeriesLastValues, colorsValues, specId, + isSortOrderDesc, ); seriesColors = new Map([...seriesColors, ...dataSeriesColorValues]); diff --git a/src/specs/settings.tsx b/src/specs/settings.tsx index de41530089..d14d42dc26 100644 --- a/src/specs/settings.tsx +++ b/src/specs/settings.tsx @@ -29,6 +29,7 @@ interface SettingSpecProps { tooltipSnap?: boolean; debug: boolean; legendPosition?: Position; + isLegendItemsSortDesc: boolean; onElementClick?: ElementClickListener; onElementOver?: ElementOverListener; onElementOut?: () => undefined; @@ -52,6 +53,7 @@ function updateChartStore(props: SettingSpecProps) { tooltipType, tooltipSnap, legendPosition, + isLegendItemsSortDesc, onElementClick, onElementOver, onElementOut, @@ -78,6 +80,7 @@ function updateChartStore(props: SettingSpecProps) { chartStore.setShowLegend(showLegend); chartStore.legendPosition = legendPosition; + chartStore.isLegendItemsSortDesc = isLegendItemsSortDesc; chartStore.xDomain = xDomain; if (onElementOver) { @@ -118,6 +121,7 @@ export class SettingsComponent extends PureComponent { debug: false, tooltipType: DEFAULT_TOOLTIP_TYPE, tooltipSnap: DEFAULT_TOOLTIP_SNAP, + isLegendItemsSortDesc: true, }; componentDidMount() { updateChartStore(this.props); diff --git a/src/state/chart_state.ts b/src/state/chart_state.ts index b4d5b3f117..0fdfb8e109 100644 --- a/src/state/chart_state.ts +++ b/src/state/chart_state.ts @@ -219,6 +219,8 @@ export class ChartStore { showLegend = observable.box(false); legendCollapsed = observable.box(false); legendPosition: Position | undefined; + isLegendItemsSortDesc = true; + toggleLegendCollapsed = action(() => { this.legendCollapsed.set(!this.legendCollapsed.get()); this.computeChart(); @@ -738,6 +740,7 @@ export class ChartStore { const seriesDomains = computeSeriesDomains( this.seriesSpecs, domainsByGroupId, + this.isLegendItemsSortDesc, this.xDomain, this.deselectedDataSeries, ); diff --git a/src/state/utils.ts b/src/state/utils.ts index 51eb57941a..71195ca489 100644 --- a/src/state/utils.ts +++ b/src/state/utils.ts @@ -119,11 +119,13 @@ export function getUpdatedCustomSeriesColors( export function computeSeriesDomains( seriesSpecs: Map, domainsByGroupId: Map, + isSortOrderDesc: boolean, customXDomain?: DomainRange | Domain, deselectedDataSeries?: DataSeriesColorsValues[] | null, ): SeriesDomainsAndData { const { splittedSeries, xValues, seriesColors } = getSplittedSeries( seriesSpecs, + isSortOrderDesc, deselectedDataSeries, ); // tslint:disable-next-line:no-console diff --git a/stories/legend.tsx b/stories/legend.tsx index d0a357a0b4..d19d82361e 100644 --- a/stories/legend.tsx +++ b/stories/legend.tsx @@ -211,4 +211,37 @@ storiesOf('Legend', module) /> ); + }) + .add('display values', () => { + const isLegendItemsSortDesc = boolean('sort legend items descending', true); + + return ( + + + + Number(d).toFixed(2)} + /> + + + + ); }); From 91a9acd8efdd05f0e747b3c4443e909a3bc23f29 Mon Sep 17 00:00:00 2001 From: Emma Cunningham Date: Sun, 7 Apr 2019 17:52:36 -0700 Subject: [PATCH 09/19] feat(settings): add showLegendDisplayValue --- src/components/_legend.scss | 13 +++++++----- src/components/legend_element.tsx | 33 +++++++++++++++++++++---------- src/specs/settings.tsx | 4 ++++ src/state/chart_state.ts | 1 + stories/legend.tsx | 8 +++++++- 5 files changed, 43 insertions(+), 16 deletions(-) diff --git a/src/components/_legend.scss b/src/components/_legend.scss index 969a3433bb..2215539c04 100644 --- a/src/components/_legend.scss +++ b/src/components/_legend.scss @@ -106,13 +106,16 @@ $elasticChartsLegendMaxHeight: $euiSize * 4; } .elasticChartsLegendListItem__title { - width: $elasticChartsLegendMaxWidth - 6 * $euiSize; - max-width: $elasticChartsLegendMaxWidth - 6 * $euiSize; + width: $elasticChartsLegendMaxWidth - 4 * $euiSize; + max-width: $elasticChartsLegendMaxWidth - 4 * $euiSize; &.elasticChartsLegendListItem__title--selected { - .elasticChartsLegendListItem__title { - text-decoration: underline; - } + text-decoration: underline; + } + + &.elasticChartsLegendListItem__title--hasDisplayValue { + width: $elasticChartsLegendMaxWidth - 6 * $euiSize; + max-width: $elasticChartsLegendMaxWidth - 6 * $euiSize; } } diff --git a/src/components/legend_element.tsx b/src/components/legend_element.tsx index 9374a7439e..45d4cea0a4 100644 --- a/src/components/legend_element.tsx +++ b/src/components/legend_element.tsx @@ -51,18 +51,37 @@ class LegendElementComponent extends React.Component + {displayValue} + + ); + } + render() { const { legendItemKey } = this.props; const { color, label, isSeriesVisible, displayValue } = this.props; const onTitleClick = this.onLegendTitleClick(legendItemKey); + const showLegendDisplayValue = this.props.chartStore!.showLegendDisplayValue.get(); const isSelected = legendItemKey === this.props.chartStore!.selectedLegendItemKey.get(); const titleClassNames = classNames( + 'eui-textTruncate', + 'elasticChartsLegendListItem__title', { ['elasticChartsLegendListItem__title--selected']: isSelected, + ['elasticChartsLegendListItem__title--hasDisplayValue']: this.props.chartStore!.showLegendDisplayValue.get(), }, - 'elasticChartsLegendListItem__title', ); const colorDotProps = { @@ -91,11 +110,11 @@ class LegendElementComponent extends React.Component {this.renderVisibilityButton(legendItemKey, isSeriesVisible)} - + + {label} } @@ -113,13 +132,7 @@ class LegendElementComponent extends React.Component - - {displayValue} - + {this.renderDisplayValue(displayValue, showLegendDisplayValue)} ); diff --git a/src/specs/settings.tsx b/src/specs/settings.tsx index d14d42dc26..a09eda755e 100644 --- a/src/specs/settings.tsx +++ b/src/specs/settings.tsx @@ -30,6 +30,7 @@ interface SettingSpecProps { debug: boolean; legendPosition?: Position; isLegendItemsSortDesc: boolean; + showLegendDisplayValue: boolean; onElementClick?: ElementClickListener; onElementOver?: ElementOverListener; onElementOut?: () => undefined; @@ -54,6 +55,7 @@ function updateChartStore(props: SettingSpecProps) { tooltipSnap, legendPosition, isLegendItemsSortDesc, + showLegendDisplayValue, onElementClick, onElementOver, onElementOut, @@ -81,6 +83,7 @@ function updateChartStore(props: SettingSpecProps) { chartStore.setShowLegend(showLegend); chartStore.legendPosition = legendPosition; chartStore.isLegendItemsSortDesc = isLegendItemsSortDesc; + chartStore.showLegendDisplayValue.set(showLegendDisplayValue); chartStore.xDomain = xDomain; if (onElementOver) { @@ -122,6 +125,7 @@ export class SettingsComponent extends PureComponent { tooltipType: DEFAULT_TOOLTIP_TYPE, tooltipSnap: DEFAULT_TOOLTIP_SNAP, isLegendItemsSortDesc: true, + showLegendDisplayValue: true, }; componentDidMount() { updateChartStore(this.props); diff --git a/src/state/chart_state.ts b/src/state/chart_state.ts index 0fdfb8e109..7f1956f4c2 100644 --- a/src/state/chart_state.ts +++ b/src/state/chart_state.ts @@ -220,6 +220,7 @@ export class ChartStore { legendCollapsed = observable.box(false); legendPosition: Position | undefined; isLegendItemsSortDesc = true; + showLegendDisplayValue = observable.box(true); toggleLegendCollapsed = action(() => { this.legendCollapsed.set(!this.legendCollapsed.get()); diff --git a/stories/legend.tsx b/stories/legend.tsx index d19d82361e..d4d424045c 100644 --- a/stories/legend.tsx +++ b/stories/legend.tsx @@ -214,10 +214,16 @@ storiesOf('Legend', module) }) .add('display values', () => { const isLegendItemsSortDesc = boolean('sort legend items descending', true); + const showLegendDisplayValue = boolean('show display value in legend', true); return ( - + Date: Sun, 7 Apr 2019 18:00:04 -0700 Subject: [PATCH 10/19] test: fix tests with isSortDesc argument --- src/lib/series/rendering.areas.test.ts | 16 +++++++++------- src/lib/series/rendering.bars.test.ts | 11 ++++++----- src/lib/series/rendering.lines.test.ts | 16 +++++++++------- src/state/crosshair_utils.linear_snap.test.ts | 12 +++++++----- src/state/crosshair_utils.ordinal_snap.test.ts | 12 +++++++----- src/state/test/interactions.test.ts | 4 +++- src/state/utils.test.ts | 16 +++++++++------- 7 files changed, 50 insertions(+), 37 deletions(-) diff --git a/src/lib/series/rendering.areas.test.ts b/src/lib/series/rendering.areas.test.ts index 377eab8439..ffc74edc74 100644 --- a/src/lib/series/rendering.areas.test.ts +++ b/src/lib/series/rendering.areas.test.ts @@ -9,6 +9,8 @@ const SPEC_ID = getSpecId('spec_1'); const GROUP_ID = getGroupId('group_1'); describe('Rendering points - areas', () => { + const isSortDesc = true; + describe('Single series area chart - ordinal', () => { const pointSeriesSpec: AreaSeriesSpec = { id: SPEC_ID, @@ -23,7 +25,7 @@ describe('Rendering points - areas', () => { }; const pointSeriesMap = new Map(); pointSeriesMap.set(SPEC_ID, pointSeriesSpec); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); let renderedArea: { @@ -120,7 +122,7 @@ describe('Rendering points - areas', () => { const pointSeriesMap = new Map(); pointSeriesMap.set(spec1Id, pointSeriesSpec1); pointSeriesMap.set(spec2Id, pointSeriesSpec2); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); @@ -258,7 +260,7 @@ describe('Rendering points - areas', () => { }; const pointSeriesMap = new Map(); pointSeriesMap.set(SPEC_ID, pointSeriesSpec); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); @@ -351,7 +353,7 @@ describe('Rendering points - areas', () => { const pointSeriesMap = new Map(); pointSeriesMap.set(spec1Id, pointSeriesSpec1); pointSeriesMap.set(spec2Id, pointSeriesSpec2); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); @@ -488,7 +490,7 @@ describe('Rendering points - areas', () => { }; const pointSeriesMap = new Map(); pointSeriesMap.set(SPEC_ID, pointSeriesSpec); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); @@ -581,7 +583,7 @@ describe('Rendering points - areas', () => { const pointSeriesMap = new Map(); pointSeriesMap.set(spec1Id, pointSeriesSpec1); pointSeriesMap.set(spec2Id, pointSeriesSpec2); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); @@ -703,7 +705,7 @@ describe('Rendering points - areas', () => { }; const pointSeriesMap = new Map(); pointSeriesMap.set(SPEC_ID, pointSeriesSpec); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 90); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); diff --git a/src/lib/series/rendering.bars.test.ts b/src/lib/series/rendering.bars.test.ts index cc1013f5ec..0384294185 100644 --- a/src/lib/series/rendering.bars.test.ts +++ b/src/lib/series/rendering.bars.test.ts @@ -8,6 +8,7 @@ const SPEC_ID = getSpecId('spec_1'); const GROUP_ID = getGroupId('group_1'); describe('Rendering bars', () => { + const isSortDesc = true; describe('Single series bar chart - ordinal', () => { const barSeriesSpec: BarSeriesSpec = { id: SPEC_ID, @@ -22,7 +23,7 @@ describe('Rendering bars', () => { }; const barSeriesMap = new Map(); barSeriesMap.set(SPEC_ID, barSeriesSpec); - const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map()); + const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map(), isSortDesc); const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100); const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0); @@ -98,7 +99,7 @@ describe('Rendering bars', () => { const barSeriesMap = new Map(); barSeriesMap.set(spec1Id, barSeriesSpec1); barSeriesMap.set(spec2Id, barSeriesSpec2); - const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map()); + const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map(), isSortDesc); const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100); const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0); @@ -205,7 +206,7 @@ describe('Rendering bars', () => { }; const barSeriesMap = new Map(); barSeriesMap.set(SPEC_ID, barSeriesSpec); - const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map()); + const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map(), isSortDesc); const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100); const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0); @@ -281,7 +282,7 @@ describe('Rendering bars', () => { const barSeriesMap = new Map(); barSeriesMap.set(spec1Id, barSeriesSpec1); barSeriesMap.set(spec2Id, barSeriesSpec2); - const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map()); + const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map(), isSortDesc); const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100); const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0); @@ -402,7 +403,7 @@ describe('Rendering bars', () => { const barSeriesMap = new Map(); barSeriesMap.set(spec1Id, barSeriesSpec1); barSeriesMap.set(spec2Id, barSeriesSpec2); - const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map()); + const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map(), isSortDesc); const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100); const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0); diff --git a/src/lib/series/rendering.lines.test.ts b/src/lib/series/rendering.lines.test.ts index 717d089b77..f8ac9cf423 100644 --- a/src/lib/series/rendering.lines.test.ts +++ b/src/lib/series/rendering.lines.test.ts @@ -9,6 +9,8 @@ const SPEC_ID = getSpecId('spec_1'); const GROUP_ID = getGroupId('group_1'); describe('Rendering points - line', () => { + const isSortDesc = true; + describe('Single series line chart - ordinal', () => { const pointSeriesSpec: LineSeriesSpec = { id: SPEC_ID, @@ -23,7 +25,7 @@ describe('Rendering points - line', () => { }; const pointSeriesMap = new Map(); pointSeriesMap.set(SPEC_ID, pointSeriesSpec); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); let renderedLine: { @@ -116,7 +118,7 @@ describe('Rendering points - line', () => { const pointSeriesMap = new Map(); pointSeriesMap.set(spec1Id, pointSeriesSpec1); pointSeriesMap.set(spec2Id, pointSeriesSpec2); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); @@ -252,7 +254,7 @@ describe('Rendering points - line', () => { }; const pointSeriesMap = new Map(); pointSeriesMap.set(SPEC_ID, pointSeriesSpec); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); @@ -344,7 +346,7 @@ describe('Rendering points - line', () => { const pointSeriesMap = new Map(); pointSeriesMap.set(spec1Id, pointSeriesSpec1); pointSeriesMap.set(spec2Id, pointSeriesSpec2); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); @@ -479,7 +481,7 @@ describe('Rendering points - line', () => { }; const pointSeriesMap = new Map(); pointSeriesMap.set(SPEC_ID, pointSeriesSpec); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); @@ -571,7 +573,7 @@ describe('Rendering points - line', () => { const pointSeriesMap = new Map(); pointSeriesMap.set(spec1Id, pointSeriesSpec1); pointSeriesMap.set(spec2Id, pointSeriesSpec2); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); @@ -693,7 +695,7 @@ describe('Rendering points - line', () => { }; const pointSeriesMap = new Map(); pointSeriesMap.set(SPEC_ID, pointSeriesSpec); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 90); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); diff --git a/src/state/crosshair_utils.linear_snap.test.ts b/src/state/crosshair_utils.linear_snap.test.ts index b8d7dd795e..8b791bebf0 100644 --- a/src/state/crosshair_utils.linear_snap.test.ts +++ b/src/state/crosshair_utils.linear_snap.test.ts @@ -7,6 +7,8 @@ import { getCursorBandPosition, getSnapPosition } from './crosshair_utils'; import { computeSeriesDomains } from './utils'; describe('Crosshair utils linear scale', () => { + const isSortDesc = true; + const barSeries1SpecId = getSpecId('barSeries1'); const barSeries2SpecId = getSpecId('barSeries2'); const lineSeries1SpecId = getSpecId('lineSeries1'); @@ -59,28 +61,28 @@ describe('Crosshair utils linear scale', () => { const barSeriesMap = new Map(); barSeriesMap.set(barSeries1SpecId, barSeries1); - const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map()); + const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map(), isSortDesc); const multiBarSeriesMap = new Map(); multiBarSeriesMap.set(barSeries1SpecId, barSeries1); multiBarSeriesMap.set(barSeries2SpecId, barSeries2); - const multiBarSeriesDomains = computeSeriesDomains(multiBarSeriesMap, new Map()); + const multiBarSeriesDomains = computeSeriesDomains(multiBarSeriesMap, new Map(), isSortDesc); const lineSeriesMap = new Map(); lineSeriesMap.set(lineSeries1SpecId, lineSeries1); - const lineSeriesDomains = computeSeriesDomains(lineSeriesMap, new Map()); + const lineSeriesDomains = computeSeriesDomains(lineSeriesMap, new Map(), isSortDesc); const multiLineSeriesMap = new Map(); multiLineSeriesMap.set(lineSeries1SpecId, lineSeries1); multiLineSeriesMap.set(lineSeries2SpecId, lineSeries2); - const multiLineSeriesDomains = computeSeriesDomains(multiLineSeriesMap, new Map()); + const multiLineSeriesDomains = computeSeriesDomains(multiLineSeriesMap, new Map(), isSortDesc); const mixedLinesBarsMap = new Map(); mixedLinesBarsMap.set(lineSeries1SpecId, lineSeries1); mixedLinesBarsMap.set(lineSeries2SpecId, lineSeries2); mixedLinesBarsMap.set(barSeries1SpecId, barSeries1); mixedLinesBarsMap.set(barSeries2SpecId, barSeries2); - const mixedLinesBarsSeriesDomains = computeSeriesDomains(mixedLinesBarsMap, new Map()); + const mixedLinesBarsSeriesDomains = computeSeriesDomains(mixedLinesBarsMap, new Map(), isSortDesc); const barSeriesScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 120); const multiBarSeriesScale = computeXScale( diff --git a/src/state/crosshair_utils.ordinal_snap.test.ts b/src/state/crosshair_utils.ordinal_snap.test.ts index bbe359afe9..436df26a44 100644 --- a/src/state/crosshair_utils.ordinal_snap.test.ts +++ b/src/state/crosshair_utils.ordinal_snap.test.ts @@ -6,6 +6,8 @@ import { getSnapPosition } from './crosshair_utils'; import { computeSeriesDomains } from './utils'; describe('Crosshair utils ordinal scales', () => { + const isSortDesc = true; + const barSeries1SpecId = getSpecId('barSeries1'); const barSeries2SpecId = getSpecId('barSeries2'); const lineSeries1SpecId = getSpecId('lineSeries1'); @@ -58,28 +60,28 @@ describe('Crosshair utils ordinal scales', () => { const barSeriesMap = new Map(); barSeriesMap.set(barSeries1SpecId, barSeries1); - const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map()); + const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map(), isSortDesc); const multiBarSeriesMap = new Map(); multiBarSeriesMap.set(barSeries1SpecId, barSeries1); multiBarSeriesMap.set(barSeries2SpecId, barSeries2); - const multiBarSeriesDomains = computeSeriesDomains(multiBarSeriesMap, new Map()); + const multiBarSeriesDomains = computeSeriesDomains(multiBarSeriesMap, new Map(), isSortDesc); const lineSeriesMap = new Map(); lineSeriesMap.set(lineSeries1SpecId, lineSeries1); - const lineSeriesDomains = computeSeriesDomains(lineSeriesMap, new Map()); + const lineSeriesDomains = computeSeriesDomains(lineSeriesMap, new Map(), isSortDesc); const multiLineSeriesMap = new Map(); multiLineSeriesMap.set(lineSeries1SpecId, lineSeries1); multiLineSeriesMap.set(lineSeries2SpecId, lineSeries2); - const multiLineSeriesDomains = computeSeriesDomains(multiLineSeriesMap, new Map()); + const multiLineSeriesDomains = computeSeriesDomains(multiLineSeriesMap, new Map(), isSortDesc); const mixedLinesBarsMap = new Map(); mixedLinesBarsMap.set(lineSeries1SpecId, lineSeries1); mixedLinesBarsMap.set(lineSeries2SpecId, lineSeries2); mixedLinesBarsMap.set(barSeries1SpecId, barSeries1); mixedLinesBarsMap.set(barSeries2SpecId, barSeries2); - const mixedLinesBarsSeriesDomains = computeSeriesDomains(mixedLinesBarsMap, new Map()); + const mixedLinesBarsSeriesDomains = computeSeriesDomains(mixedLinesBarsMap, new Map(), isSortDesc); const barSeriesScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 120); const multiBarSeriesScale = computeXScale( diff --git a/src/state/test/interactions.test.ts b/src/state/test/interactions.test.ts index 7b361bada0..3f91935c46 100644 --- a/src/state/test/interactions.test.ts +++ b/src/state/test/interactions.test.ts @@ -9,6 +9,8 @@ import { ScaleType } from '../../lib/utils/scales/scales'; import { ChartStore } from '../chart_state'; import { computeSeriesDomains } from '../utils'; +const isSortDesc = true; + const SPEC_ID = getSpecId('spec_1'); const GROUP_ID = getGroupId('group_1'); @@ -183,7 +185,7 @@ function mouseOverTestSuite(scaleType: ScaleType) { store = initStore(spec); const barSeriesMap = new Map(); barSeriesMap.set(SPEC_ID, spec); - const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map()); + const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map(), isSortDesc); const barSeriesScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100); const yScales = computeYScales(barSeriesDomains.yDomain, 0, 100); store.xScale = barSeriesScale; diff --git a/src/state/utils.test.ts b/src/state/utils.test.ts index cfab1d817a..e182443bac 100644 --- a/src/state/utils.test.ts +++ b/src/state/utils.test.ts @@ -23,6 +23,8 @@ import { } from './utils'; describe('Chart State utils', () => { + const isSortDesc = true; + it('should compute and format specifications for non stacked chart', () => { const spec1: BasicSeriesSpec = { id: getSpecId('spec1'), @@ -49,7 +51,7 @@ describe('Chart State utils', () => { const specs = new Map(); specs.set(spec1.id, spec1); specs.set(spec2.id, spec2); - const domains = computeSeriesDomains(specs, new Map(), undefined); + const domains = computeSeriesDomains(specs, new Map(), isSortDesc, undefined); expect(domains.xDomain).toEqual({ domain: [0, 3], isBandScale: false, @@ -105,7 +107,7 @@ describe('Chart State utils', () => { const specs = new Map(); specs.set(spec1.id, spec1); specs.set(spec2.id, spec2); - const domains = computeSeriesDomains(specs, new Map(), undefined); + const domains = computeSeriesDomains(specs, new Map(), isSortDesc, undefined); expect(domains.xDomain).toEqual({ domain: [0, 3], isBandScale: false, @@ -360,7 +362,7 @@ describe('Chart State utils', () => { defaultVizColor: 'red', }; const domainsByGroupId = mergeDomainsByGroupId(axesSpecs, chartRotation); - const seriesDomains = computeSeriesDomains(seriesSpecs, domainsByGroupId); + const seriesDomains = computeSeriesDomains(seriesSpecs, domainsByGroupId, isSortDesc); const seriesColorMap = getSeriesColorMap(seriesDomains.seriesColors, chartColors, new Map()); const geometries = computeSeriesGeometries( seriesSpecs, @@ -428,7 +430,7 @@ describe('Chart State utils', () => { defaultVizColor: 'red', }; const domainsByGroupId = mergeDomainsByGroupId(axesSpecs, chartRotation); - const seriesDomains = computeSeriesDomains(seriesSpecs, domainsByGroupId); + const seriesDomains = computeSeriesDomains(seriesSpecs, domainsByGroupId, isSortDesc); const seriesColorMap = getSeriesColorMap(seriesDomains.seriesColors, chartColors, new Map()); const geometries = computeSeriesGeometries( seriesSpecs, @@ -496,7 +498,7 @@ describe('Chart State utils', () => { defaultVizColor: 'red', }; const domainsByGroupId = mergeDomainsByGroupId(axesSpecs, chartRotation); - const seriesDomains = computeSeriesDomains(seriesSpecs, domainsByGroupId); + const seriesDomains = computeSeriesDomains(seriesSpecs, domainsByGroupId, isSortDesc); const seriesColorMap = getSeriesColorMap(seriesDomains.seriesColors, chartColors, new Map()); const geometries = computeSeriesGeometries( seriesSpecs, @@ -564,7 +566,7 @@ describe('Chart State utils', () => { defaultVizColor: 'red', }; const domainsByGroupId = mergeDomainsByGroupId(axesSpecs, chartRotation); - const seriesDomains = computeSeriesDomains(seriesSpecs, domainsByGroupId); + const seriesDomains = computeSeriesDomains(seriesSpecs, domainsByGroupId, isSortDesc); const seriesColorMap = getSeriesColorMap(seriesDomains.seriesColors, chartColors, new Map()); const geometries = computeSeriesGeometries( seriesSpecs, @@ -632,7 +634,7 @@ describe('Chart State utils', () => { defaultVizColor: 'red', }; const domainsByGroupId = mergeDomainsByGroupId(axesSpecs, chartRotation); - const seriesDomains = computeSeriesDomains(seriesSpecs, domainsByGroupId); + const seriesDomains = computeSeriesDomains(seriesSpecs, domainsByGroupId, isSortDesc); const seriesColorMap = getSeriesColorMap(seriesDomains.seriesColors, chartColors, new Map()); const geometries = computeSeriesGeometries( seriesSpecs, From f4d6c67f63dcb513b67544846c779f7775a0bce9 Mon Sep 17 00:00:00 2001 From: Emma Cunningham Date: Mon, 8 Apr 2019 10:43:46 -0700 Subject: [PATCH 11/19] fix: remove isLegendItemsSortDesc --- src/lib/series/domains/x_domain.test.ts | 20 +++++++++----------- src/lib/series/series.test.ts | 12 +++++------- src/lib/series/series.ts | 2 -- src/specs/settings.tsx | 3 --- src/state/chart_state.ts | 2 -- src/state/utils.ts | 2 -- stories/legend.tsx | 2 -- 7 files changed, 14 insertions(+), 29 deletions(-) diff --git a/src/lib/series/domains/x_domain.test.ts b/src/lib/series/domains/x_domain.test.ts index bda930613a..49340a821c 100644 --- a/src/lib/series/domains/x_domain.test.ts +++ b/src/lib/series/domains/x_domain.test.ts @@ -5,8 +5,6 @@ import { BasicSeriesSpec } from '../specs'; import { convertXScaleTypes, findMinInterval, mergeXDomain } from './x_domain'; describe('X Domain', () => { - const isSortDesc = true; - test('Should return null when missing specs or specs types', () => { const seriesSpecs: BasicSeriesSpec[] = []; const mainXScale = convertXScaleTypes(seriesSpecs); @@ -151,7 +149,7 @@ describe('X Domain', () => { const specDataSeries = new Map(); specDataSeries.set(ds1.id, ds1); specDataSeries.set(ds2.id, ds2); - const { xValues } = getSplittedSeries(specDataSeries, isSortDesc); + const { xValues } = getSplittedSeries(specDataSeries); const mergedDomain = mergeXDomain( [ { @@ -189,7 +187,7 @@ describe('X Domain', () => { const specDataSeries = new Map(); specDataSeries.set(ds1.id, ds1); specDataSeries.set(ds2.id, ds2); - const { xValues } = getSplittedSeries(specDataSeries, isSortDesc); + const { xValues } = getSplittedSeries(specDataSeries); const mergedDomain = mergeXDomain( [ { @@ -227,7 +225,7 @@ describe('X Domain', () => { const specDataSeries = new Map(); specDataSeries.set(ds1.id, ds1); specDataSeries.set(ds2.id, ds2); - const { xValues } = getSplittedSeries(specDataSeries, isSortDesc); + const { xValues } = getSplittedSeries(specDataSeries); const mergedDomain = mergeXDomain( [ { @@ -269,7 +267,7 @@ describe('X Domain', () => { const specDataSeries = new Map(); specDataSeries.set(ds1.id, ds1); specDataSeries.set(ds2.id, ds2); - const { xValues } = getSplittedSeries(specDataSeries, isSortDesc); + const { xValues } = getSplittedSeries(specDataSeries); const mergedDomain = mergeXDomain( [ { @@ -311,7 +309,7 @@ describe('X Domain', () => { const specDataSeries = new Map(); specDataSeries.set(ds1.id, ds1); specDataSeries.set(ds2.id, ds2); - const { xValues } = getSplittedSeries(specDataSeries, isSortDesc); + const { xValues } = getSplittedSeries(specDataSeries); const mergedDomain = mergeXDomain( [ { @@ -353,7 +351,7 @@ describe('X Domain', () => { const specDataSeries = new Map(); specDataSeries.set(ds1.id, ds1); specDataSeries.set(ds2.id, ds2); - const { xValues } = getSplittedSeries(specDataSeries, isSortDesc); + const { xValues } = getSplittedSeries(specDataSeries); const mergedDomain = mergeXDomain( [ { @@ -395,7 +393,7 @@ describe('X Domain', () => { const specDataSeries = new Map(); specDataSeries.set(ds1.id, ds1); specDataSeries.set(ds2.id, ds2); - const { xValues } = getSplittedSeries(specDataSeries, isSortDesc); + const { xValues } = getSplittedSeries(specDataSeries); const mergedDomain = mergeXDomain( [ { @@ -437,7 +435,7 @@ describe('X Domain', () => { const specDataSeries = new Map(); specDataSeries.set(ds1.id, ds1); specDataSeries.set(ds2.id, ds2); - const { xValues } = getSplittedSeries(specDataSeries, isSortDesc); + const { xValues } = getSplittedSeries(specDataSeries); const mergedDomain = mergeXDomain( [ { @@ -481,7 +479,7 @@ describe('X Domain', () => { const specDataSeries = new Map(); specDataSeries.set(ds1.id, ds1); specDataSeries.set(ds2.id, ds2); - const { xValues } = getSplittedSeries(specDataSeries, isSortDesc); + const { xValues } = getSplittedSeries(specDataSeries); const mergedDomain = mergeXDomain( [ diff --git a/src/lib/series/series.test.ts b/src/lib/series/series.test.ts index ec77b72df2..9669848aae 100644 --- a/src/lib/series/series.test.ts +++ b/src/lib/series/series.test.ts @@ -15,8 +15,6 @@ import { BasicSeriesSpec } from './specs'; import * as TestDataset from './utils/test_dataset'; describe('Series', () => { - const isSortDesc = true; - test('Can split dataset into 1Y0G series', () => { const splittedSeries = splitSeries( TestDataset.BARCHART_1Y0G, @@ -201,7 +199,7 @@ describe('Series', () => { }; seriesSpecs.set(spec1.id, spec1); seriesSpecs.set(spec2.id, spec2); - const splittedDataSeries = getSplittedSeries(seriesSpecs, isSortDesc); + const splittedDataSeries = getSplittedSeries(seriesSpecs); expect(splittedDataSeries.splittedSeries.get(getSpecId('spec1'))).toMatchSnapshot(); expect(splittedDataSeries.splittedSeries.get(getSpecId('spec2'))).toMatchSnapshot(); }); @@ -234,7 +232,7 @@ describe('Series', () => { }; seriesSpecs.set(spec1.id, spec1); seriesSpecs.set(spec2.id, spec2); - const splittedDataSeries = getSplittedSeries(seriesSpecs, isSortDesc); + const splittedDataSeries = getSplittedSeries(seriesSpecs); const stackedDataSeries = getFormattedDataseries( [spec1, spec2], splittedDataSeries.splittedSeries, @@ -306,17 +304,17 @@ describe('Series', () => { seriesSpecs.set(splitSpec.id, splitSpec); - const allSeries = getSplittedSeries(seriesSpecs, isSortDesc, null); + const allSeries = getSplittedSeries(seriesSpecs, null); expect(allSeries.splittedSeries.get(specId)!.length).toBe(2); - const emptyDeselected = getSplittedSeries(seriesSpecs, isSortDesc, []); + const emptyDeselected = getSplittedSeries(seriesSpecs, []); expect(emptyDeselected.splittedSeries.get(specId)!.length).toBe(2); const deselectedDataSeries: DataSeriesColorsValues[] = [{ specId, colorValues: ['y1'], }]; - const subsetSplit = getSplittedSeries(seriesSpecs, isSortDesc, deselectedDataSeries); + const subsetSplit = getSplittedSeries(seriesSpecs, deselectedDataSeries); expect(subsetSplit.splittedSeries.get(specId)!.length).toBe(1); }); diff --git a/src/lib/series/series.ts b/src/lib/series/series.ts index 0865a8a828..4771b8a399 100644 --- a/src/lib/series/series.ts +++ b/src/lib/series/series.ts @@ -350,7 +350,6 @@ export function formatStackedDataSeriesValues( export function getSplittedSeries( seriesSpecs: Map, - isSortOrderDesc: boolean, deselectedDataSeries?: DataSeriesColorsValues[] | null, ): { splittedSeries: Map; @@ -384,7 +383,6 @@ export function getSplittedSeries( splitSeriesLastValues, colorsValues, specId, - isSortOrderDesc, ); seriesColors = new Map([...seriesColors, ...dataSeriesColorValues]); diff --git a/src/specs/settings.tsx b/src/specs/settings.tsx index a09eda755e..4ae7d06cc3 100644 --- a/src/specs/settings.tsx +++ b/src/specs/settings.tsx @@ -54,7 +54,6 @@ function updateChartStore(props: SettingSpecProps) { tooltipType, tooltipSnap, legendPosition, - isLegendItemsSortDesc, showLegendDisplayValue, onElementClick, onElementOver, @@ -82,7 +81,6 @@ function updateChartStore(props: SettingSpecProps) { chartStore.setShowLegend(showLegend); chartStore.legendPosition = legendPosition; - chartStore.isLegendItemsSortDesc = isLegendItemsSortDesc; chartStore.showLegendDisplayValue.set(showLegendDisplayValue); chartStore.xDomain = xDomain; @@ -124,7 +122,6 @@ export class SettingsComponent extends PureComponent { debug: false, tooltipType: DEFAULT_TOOLTIP_TYPE, tooltipSnap: DEFAULT_TOOLTIP_SNAP, - isLegendItemsSortDesc: true, showLegendDisplayValue: true, }; componentDidMount() { diff --git a/src/state/chart_state.ts b/src/state/chart_state.ts index 7f1956f4c2..10ad4b06b3 100644 --- a/src/state/chart_state.ts +++ b/src/state/chart_state.ts @@ -219,7 +219,6 @@ export class ChartStore { showLegend = observable.box(false); legendCollapsed = observable.box(false); legendPosition: Position | undefined; - isLegendItemsSortDesc = true; showLegendDisplayValue = observable.box(true); toggleLegendCollapsed = action(() => { @@ -741,7 +740,6 @@ export class ChartStore { const seriesDomains = computeSeriesDomains( this.seriesSpecs, domainsByGroupId, - this.isLegendItemsSortDesc, this.xDomain, this.deselectedDataSeries, ); diff --git a/src/state/utils.ts b/src/state/utils.ts index 71195ca489..51eb57941a 100644 --- a/src/state/utils.ts +++ b/src/state/utils.ts @@ -119,13 +119,11 @@ export function getUpdatedCustomSeriesColors( export function computeSeriesDomains( seriesSpecs: Map, domainsByGroupId: Map, - isSortOrderDesc: boolean, customXDomain?: DomainRange | Domain, deselectedDataSeries?: DataSeriesColorsValues[] | null, ): SeriesDomainsAndData { const { splittedSeries, xValues, seriesColors } = getSplittedSeries( seriesSpecs, - isSortOrderDesc, deselectedDataSeries, ); // tslint:disable-next-line:no-console diff --git a/stories/legend.tsx b/stories/legend.tsx index d4d424045c..a4f29685ed 100644 --- a/stories/legend.tsx +++ b/stories/legend.tsx @@ -213,7 +213,6 @@ storiesOf('Legend', module) ); }) .add('display values', () => { - const isLegendItemsSortDesc = boolean('sort legend items descending', true); const showLegendDisplayValue = boolean('show display value in legend', true); return ( @@ -221,7 +220,6 @@ storiesOf('Legend', module) Date: Mon, 8 Apr 2019 10:44:14 -0700 Subject: [PATCH 12/19] test: revert "test: fix tests with isSortDesc argument" This reverts commit 2d0a815fcf4616dd0110f37397e09b37080c6eb9. --- src/lib/series/rendering.areas.test.ts | 16 +++++++--------- src/lib/series/rendering.bars.test.ts | 11 +++++------ src/lib/series/rendering.lines.test.ts | 16 +++++++--------- src/state/crosshair_utils.linear_snap.test.ts | 12 +++++------- src/state/crosshair_utils.ordinal_snap.test.ts | 12 +++++------- src/state/test/interactions.test.ts | 4 +--- src/state/utils.test.ts | 16 +++++++--------- 7 files changed, 37 insertions(+), 50 deletions(-) diff --git a/src/lib/series/rendering.areas.test.ts b/src/lib/series/rendering.areas.test.ts index ffc74edc74..377eab8439 100644 --- a/src/lib/series/rendering.areas.test.ts +++ b/src/lib/series/rendering.areas.test.ts @@ -9,8 +9,6 @@ const SPEC_ID = getSpecId('spec_1'); const GROUP_ID = getGroupId('group_1'); describe('Rendering points - areas', () => { - const isSortDesc = true; - describe('Single series area chart - ordinal', () => { const pointSeriesSpec: AreaSeriesSpec = { id: SPEC_ID, @@ -25,7 +23,7 @@ describe('Rendering points - areas', () => { }; const pointSeriesMap = new Map(); pointSeriesMap.set(SPEC_ID, pointSeriesSpec); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); let renderedArea: { @@ -122,7 +120,7 @@ describe('Rendering points - areas', () => { const pointSeriesMap = new Map(); pointSeriesMap.set(spec1Id, pointSeriesSpec1); pointSeriesMap.set(spec2Id, pointSeriesSpec2); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); @@ -260,7 +258,7 @@ describe('Rendering points - areas', () => { }; const pointSeriesMap = new Map(); pointSeriesMap.set(SPEC_ID, pointSeriesSpec); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); @@ -353,7 +351,7 @@ describe('Rendering points - areas', () => { const pointSeriesMap = new Map(); pointSeriesMap.set(spec1Id, pointSeriesSpec1); pointSeriesMap.set(spec2Id, pointSeriesSpec2); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); @@ -490,7 +488,7 @@ describe('Rendering points - areas', () => { }; const pointSeriesMap = new Map(); pointSeriesMap.set(SPEC_ID, pointSeriesSpec); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); @@ -583,7 +581,7 @@ describe('Rendering points - areas', () => { const pointSeriesMap = new Map(); pointSeriesMap.set(spec1Id, pointSeriesSpec1); pointSeriesMap.set(spec2Id, pointSeriesSpec2); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); @@ -705,7 +703,7 @@ describe('Rendering points - areas', () => { }; const pointSeriesMap = new Map(); pointSeriesMap.set(SPEC_ID, pointSeriesSpec); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 90); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); diff --git a/src/lib/series/rendering.bars.test.ts b/src/lib/series/rendering.bars.test.ts index 0384294185..cc1013f5ec 100644 --- a/src/lib/series/rendering.bars.test.ts +++ b/src/lib/series/rendering.bars.test.ts @@ -8,7 +8,6 @@ const SPEC_ID = getSpecId('spec_1'); const GROUP_ID = getGroupId('group_1'); describe('Rendering bars', () => { - const isSortDesc = true; describe('Single series bar chart - ordinal', () => { const barSeriesSpec: BarSeriesSpec = { id: SPEC_ID, @@ -23,7 +22,7 @@ describe('Rendering bars', () => { }; const barSeriesMap = new Map(); barSeriesMap.set(SPEC_ID, barSeriesSpec); - const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map(), isSortDesc); + const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map()); const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100); const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0); @@ -99,7 +98,7 @@ describe('Rendering bars', () => { const barSeriesMap = new Map(); barSeriesMap.set(spec1Id, barSeriesSpec1); barSeriesMap.set(spec2Id, barSeriesSpec2); - const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map(), isSortDesc); + const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map()); const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100); const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0); @@ -206,7 +205,7 @@ describe('Rendering bars', () => { }; const barSeriesMap = new Map(); barSeriesMap.set(SPEC_ID, barSeriesSpec); - const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map(), isSortDesc); + const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map()); const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100); const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0); @@ -282,7 +281,7 @@ describe('Rendering bars', () => { const barSeriesMap = new Map(); barSeriesMap.set(spec1Id, barSeriesSpec1); barSeriesMap.set(spec2Id, barSeriesSpec2); - const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map(), isSortDesc); + const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map()); const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100); const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0); @@ -403,7 +402,7 @@ describe('Rendering bars', () => { const barSeriesMap = new Map(); barSeriesMap.set(spec1Id, barSeriesSpec1); barSeriesMap.set(spec2Id, barSeriesSpec2); - const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map(), isSortDesc); + const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map()); const xScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100); const yScales = computeYScales(barSeriesDomains.yDomain, 100, 0); diff --git a/src/lib/series/rendering.lines.test.ts b/src/lib/series/rendering.lines.test.ts index f8ac9cf423..717d089b77 100644 --- a/src/lib/series/rendering.lines.test.ts +++ b/src/lib/series/rendering.lines.test.ts @@ -9,8 +9,6 @@ const SPEC_ID = getSpecId('spec_1'); const GROUP_ID = getGroupId('group_1'); describe('Rendering points - line', () => { - const isSortDesc = true; - describe('Single series line chart - ordinal', () => { const pointSeriesSpec: LineSeriesSpec = { id: SPEC_ID, @@ -25,7 +23,7 @@ describe('Rendering points - line', () => { }; const pointSeriesMap = new Map(); pointSeriesMap.set(SPEC_ID, pointSeriesSpec); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); let renderedLine: { @@ -118,7 +116,7 @@ describe('Rendering points - line', () => { const pointSeriesMap = new Map(); pointSeriesMap.set(spec1Id, pointSeriesSpec1); pointSeriesMap.set(spec2Id, pointSeriesSpec2); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); @@ -254,7 +252,7 @@ describe('Rendering points - line', () => { }; const pointSeriesMap = new Map(); pointSeriesMap.set(SPEC_ID, pointSeriesSpec); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); @@ -346,7 +344,7 @@ describe('Rendering points - line', () => { const pointSeriesMap = new Map(); pointSeriesMap.set(spec1Id, pointSeriesSpec1); pointSeriesMap.set(spec2Id, pointSeriesSpec2); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); @@ -481,7 +479,7 @@ describe('Rendering points - line', () => { }; const pointSeriesMap = new Map(); pointSeriesMap.set(SPEC_ID, pointSeriesSpec); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); @@ -573,7 +571,7 @@ describe('Rendering points - line', () => { const pointSeriesMap = new Map(); pointSeriesMap.set(spec1Id, pointSeriesSpec1); pointSeriesMap.set(spec2Id, pointSeriesSpec2); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 100); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); @@ -695,7 +693,7 @@ describe('Rendering points - line', () => { }; const pointSeriesMap = new Map(); pointSeriesMap.set(SPEC_ID, pointSeriesSpec); - const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map(), isSortDesc); + const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map()); const xScale = computeXScale(pointSeriesDomains.xDomain, pointSeriesMap.size, 0, 90); const yScales = computeYScales(pointSeriesDomains.yDomain, 100, 0); diff --git a/src/state/crosshair_utils.linear_snap.test.ts b/src/state/crosshair_utils.linear_snap.test.ts index 8b791bebf0..b8d7dd795e 100644 --- a/src/state/crosshair_utils.linear_snap.test.ts +++ b/src/state/crosshair_utils.linear_snap.test.ts @@ -7,8 +7,6 @@ import { getCursorBandPosition, getSnapPosition } from './crosshair_utils'; import { computeSeriesDomains } from './utils'; describe('Crosshair utils linear scale', () => { - const isSortDesc = true; - const barSeries1SpecId = getSpecId('barSeries1'); const barSeries2SpecId = getSpecId('barSeries2'); const lineSeries1SpecId = getSpecId('lineSeries1'); @@ -61,28 +59,28 @@ describe('Crosshair utils linear scale', () => { const barSeriesMap = new Map(); barSeriesMap.set(barSeries1SpecId, barSeries1); - const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map(), isSortDesc); + const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map()); const multiBarSeriesMap = new Map(); multiBarSeriesMap.set(barSeries1SpecId, barSeries1); multiBarSeriesMap.set(barSeries2SpecId, barSeries2); - const multiBarSeriesDomains = computeSeriesDomains(multiBarSeriesMap, new Map(), isSortDesc); + const multiBarSeriesDomains = computeSeriesDomains(multiBarSeriesMap, new Map()); const lineSeriesMap = new Map(); lineSeriesMap.set(lineSeries1SpecId, lineSeries1); - const lineSeriesDomains = computeSeriesDomains(lineSeriesMap, new Map(), isSortDesc); + const lineSeriesDomains = computeSeriesDomains(lineSeriesMap, new Map()); const multiLineSeriesMap = new Map(); multiLineSeriesMap.set(lineSeries1SpecId, lineSeries1); multiLineSeriesMap.set(lineSeries2SpecId, lineSeries2); - const multiLineSeriesDomains = computeSeriesDomains(multiLineSeriesMap, new Map(), isSortDesc); + const multiLineSeriesDomains = computeSeriesDomains(multiLineSeriesMap, new Map()); const mixedLinesBarsMap = new Map(); mixedLinesBarsMap.set(lineSeries1SpecId, lineSeries1); mixedLinesBarsMap.set(lineSeries2SpecId, lineSeries2); mixedLinesBarsMap.set(barSeries1SpecId, barSeries1); mixedLinesBarsMap.set(barSeries2SpecId, barSeries2); - const mixedLinesBarsSeriesDomains = computeSeriesDomains(mixedLinesBarsMap, new Map(), isSortDesc); + const mixedLinesBarsSeriesDomains = computeSeriesDomains(mixedLinesBarsMap, new Map()); const barSeriesScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 120); const multiBarSeriesScale = computeXScale( diff --git a/src/state/crosshair_utils.ordinal_snap.test.ts b/src/state/crosshair_utils.ordinal_snap.test.ts index 436df26a44..bbe359afe9 100644 --- a/src/state/crosshair_utils.ordinal_snap.test.ts +++ b/src/state/crosshair_utils.ordinal_snap.test.ts @@ -6,8 +6,6 @@ import { getSnapPosition } from './crosshair_utils'; import { computeSeriesDomains } from './utils'; describe('Crosshair utils ordinal scales', () => { - const isSortDesc = true; - const barSeries1SpecId = getSpecId('barSeries1'); const barSeries2SpecId = getSpecId('barSeries2'); const lineSeries1SpecId = getSpecId('lineSeries1'); @@ -60,28 +58,28 @@ describe('Crosshair utils ordinal scales', () => { const barSeriesMap = new Map(); barSeriesMap.set(barSeries1SpecId, barSeries1); - const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map(), isSortDesc); + const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map()); const multiBarSeriesMap = new Map(); multiBarSeriesMap.set(barSeries1SpecId, barSeries1); multiBarSeriesMap.set(barSeries2SpecId, barSeries2); - const multiBarSeriesDomains = computeSeriesDomains(multiBarSeriesMap, new Map(), isSortDesc); + const multiBarSeriesDomains = computeSeriesDomains(multiBarSeriesMap, new Map()); const lineSeriesMap = new Map(); lineSeriesMap.set(lineSeries1SpecId, lineSeries1); - const lineSeriesDomains = computeSeriesDomains(lineSeriesMap, new Map(), isSortDesc); + const lineSeriesDomains = computeSeriesDomains(lineSeriesMap, new Map()); const multiLineSeriesMap = new Map(); multiLineSeriesMap.set(lineSeries1SpecId, lineSeries1); multiLineSeriesMap.set(lineSeries2SpecId, lineSeries2); - const multiLineSeriesDomains = computeSeriesDomains(multiLineSeriesMap, new Map(), isSortDesc); + const multiLineSeriesDomains = computeSeriesDomains(multiLineSeriesMap, new Map()); const mixedLinesBarsMap = new Map(); mixedLinesBarsMap.set(lineSeries1SpecId, lineSeries1); mixedLinesBarsMap.set(lineSeries2SpecId, lineSeries2); mixedLinesBarsMap.set(barSeries1SpecId, barSeries1); mixedLinesBarsMap.set(barSeries2SpecId, barSeries2); - const mixedLinesBarsSeriesDomains = computeSeriesDomains(mixedLinesBarsMap, new Map(), isSortDesc); + const mixedLinesBarsSeriesDomains = computeSeriesDomains(mixedLinesBarsMap, new Map()); const barSeriesScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 120); const multiBarSeriesScale = computeXScale( diff --git a/src/state/test/interactions.test.ts b/src/state/test/interactions.test.ts index 3f91935c46..7b361bada0 100644 --- a/src/state/test/interactions.test.ts +++ b/src/state/test/interactions.test.ts @@ -9,8 +9,6 @@ import { ScaleType } from '../../lib/utils/scales/scales'; import { ChartStore } from '../chart_state'; import { computeSeriesDomains } from '../utils'; -const isSortDesc = true; - const SPEC_ID = getSpecId('spec_1'); const GROUP_ID = getGroupId('group_1'); @@ -185,7 +183,7 @@ function mouseOverTestSuite(scaleType: ScaleType) { store = initStore(spec); const barSeriesMap = new Map(); barSeriesMap.set(SPEC_ID, spec); - const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map(), isSortDesc); + const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map()); const barSeriesScale = computeXScale(barSeriesDomains.xDomain, barSeriesMap.size, 0, 100); const yScales = computeYScales(barSeriesDomains.yDomain, 0, 100); store.xScale = barSeriesScale; diff --git a/src/state/utils.test.ts b/src/state/utils.test.ts index e182443bac..cfab1d817a 100644 --- a/src/state/utils.test.ts +++ b/src/state/utils.test.ts @@ -23,8 +23,6 @@ import { } from './utils'; describe('Chart State utils', () => { - const isSortDesc = true; - it('should compute and format specifications for non stacked chart', () => { const spec1: BasicSeriesSpec = { id: getSpecId('spec1'), @@ -51,7 +49,7 @@ describe('Chart State utils', () => { const specs = new Map(); specs.set(spec1.id, spec1); specs.set(spec2.id, spec2); - const domains = computeSeriesDomains(specs, new Map(), isSortDesc, undefined); + const domains = computeSeriesDomains(specs, new Map(), undefined); expect(domains.xDomain).toEqual({ domain: [0, 3], isBandScale: false, @@ -107,7 +105,7 @@ describe('Chart State utils', () => { const specs = new Map(); specs.set(spec1.id, spec1); specs.set(spec2.id, spec2); - const domains = computeSeriesDomains(specs, new Map(), isSortDesc, undefined); + const domains = computeSeriesDomains(specs, new Map(), undefined); expect(domains.xDomain).toEqual({ domain: [0, 3], isBandScale: false, @@ -362,7 +360,7 @@ describe('Chart State utils', () => { defaultVizColor: 'red', }; const domainsByGroupId = mergeDomainsByGroupId(axesSpecs, chartRotation); - const seriesDomains = computeSeriesDomains(seriesSpecs, domainsByGroupId, isSortDesc); + const seriesDomains = computeSeriesDomains(seriesSpecs, domainsByGroupId); const seriesColorMap = getSeriesColorMap(seriesDomains.seriesColors, chartColors, new Map()); const geometries = computeSeriesGeometries( seriesSpecs, @@ -430,7 +428,7 @@ describe('Chart State utils', () => { defaultVizColor: 'red', }; const domainsByGroupId = mergeDomainsByGroupId(axesSpecs, chartRotation); - const seriesDomains = computeSeriesDomains(seriesSpecs, domainsByGroupId, isSortDesc); + const seriesDomains = computeSeriesDomains(seriesSpecs, domainsByGroupId); const seriesColorMap = getSeriesColorMap(seriesDomains.seriesColors, chartColors, new Map()); const geometries = computeSeriesGeometries( seriesSpecs, @@ -498,7 +496,7 @@ describe('Chart State utils', () => { defaultVizColor: 'red', }; const domainsByGroupId = mergeDomainsByGroupId(axesSpecs, chartRotation); - const seriesDomains = computeSeriesDomains(seriesSpecs, domainsByGroupId, isSortDesc); + const seriesDomains = computeSeriesDomains(seriesSpecs, domainsByGroupId); const seriesColorMap = getSeriesColorMap(seriesDomains.seriesColors, chartColors, new Map()); const geometries = computeSeriesGeometries( seriesSpecs, @@ -566,7 +564,7 @@ describe('Chart State utils', () => { defaultVizColor: 'red', }; const domainsByGroupId = mergeDomainsByGroupId(axesSpecs, chartRotation); - const seriesDomains = computeSeriesDomains(seriesSpecs, domainsByGroupId, isSortDesc); + const seriesDomains = computeSeriesDomains(seriesSpecs, domainsByGroupId); const seriesColorMap = getSeriesColorMap(seriesDomains.seriesColors, chartColors, new Map()); const geometries = computeSeriesGeometries( seriesSpecs, @@ -634,7 +632,7 @@ describe('Chart State utils', () => { defaultVizColor: 'red', }; const domainsByGroupId = mergeDomainsByGroupId(axesSpecs, chartRotation); - const seriesDomains = computeSeriesDomains(seriesSpecs, domainsByGroupId, isSortDesc); + const seriesDomains = computeSeriesDomains(seriesSpecs, domainsByGroupId); const seriesColorMap = getSeriesColorMap(seriesDomains.seriesColors, chartColors, new Map()); const geometries = computeSeriesGeometries( seriesSpecs, From a5dc9956c10deac3615f9406de5a97295a50c8fe Mon Sep 17 00:00:00 2001 From: Emma Cunningham Date: Mon, 8 Apr 2019 14:25:22 -0700 Subject: [PATCH 13/19] fix(series): remove internal series sorting --- src/lib/series/series.test.ts | 14 -------------- src/lib/series/series.ts | 13 +------------ 2 files changed, 1 insertion(+), 26 deletions(-) diff --git a/src/lib/series/series.test.ts b/src/lib/series/series.test.ts index 9669848aae..bfeedd241d 100644 --- a/src/lib/series/series.test.ts +++ b/src/lib/series/series.test.ts @@ -374,19 +374,5 @@ describe('Series', () => { expectedDefaultDesc.set('b', dataSeriesColorsValuesB); expect(defaultDesc).toEqual(expectedDefaultDesc); - - const ascMap = getDataSeriesColorsValuesMap( - splitSeriesLastValues, - colorValuesMap, - specId, - false, - ); - - const expectedAscMap = new Map(); - expectedAscMap.set('b', dataSeriesColorsValuesB); - expectedAscMap.set('a', dataSeriesColorsValuesA); - expectedAscMap.set('c', dataSeriesColorsValuesC); - - expect(ascMap).toEqual(expectedAscMap); }); }); diff --git a/src/lib/series/series.ts b/src/lib/series/series.ts index 4771b8a399..61169340f9 100644 --- a/src/lib/series/series.ts +++ b/src/lib/series/series.ts @@ -402,21 +402,10 @@ export function getDataSeriesColorsValuesMap( splitSeriesLastValues: Map, colorValuesMap: Map, specId: SpecId, - isDesc: boolean = true, ): Map { const seriesColors = new Map(); - // We sort the series keys by their last values and this order determines the - // insertion order of the seriesColors Map so that when it is iterated over, - // the items are in order of this sorting. - const sortOp = isDesc ? -1 : 1; - - [...splitSeriesLastValues.keys()].sort((keyA, keyB) => { - const lastValueA = splitSeriesLastValues.get(keyA); - const lastValueB = splitSeriesLastValues.get(keyB); - - return (lastValueA - lastValueB) * sortOp; - }).forEach((key) => { + [...splitSeriesLastValues.keys()].forEach((key) => { const colorValues = colorValuesMap.get(key); if (!colorValues) { From aa47cda75559f25367af958c961340a3589bc31b Mon Sep 17 00:00:00 2001 From: Emma Cunningham Date: Tue, 9 Apr 2019 11:43:56 -0700 Subject: [PATCH 14/19] feat(series): add sortIndex to SeriesSpec & sort legend items --- src/lib/series/legend.ts | 7 +++-- src/lib/series/series.test.ts | 59 ----------------------------------- src/lib/series/series.ts | 48 +++++++++++++++++----------- src/lib/series/specs.ts | 2 ++ stories/legend.tsx | 52 +++++++++++++++++++++--------- 5 files changed, 74 insertions(+), 94 deletions(-) diff --git a/src/lib/series/legend.ts b/src/lib/series/legend.ts index ae0393b9fa..097b29d4d7 100644 --- a/src/lib/series/legend.ts +++ b/src/lib/series/legend.ts @@ -1,7 +1,7 @@ import { findDataSeriesByColorValues, getAxesSpecForSpecId } from '../../state/utils'; import { identity } from '../utils/commons'; import { AxisId, SpecId } from '../utils/ids'; -import { DataSeriesColorsValues } from './series'; +import { DataSeriesColorsValues, getDataSeriesColorsValuesMap } from './series'; import { AxisSpec, BasicSeriesSpec } from './specs'; export interface LegendItem { @@ -26,7 +26,10 @@ export function computeLegend( deselectedDataSeries?: DataSeriesColorsValues[] | null, ): Map { const legendItems: Map = new Map(); - seriesColor.forEach((series, key) => { + + const sortedSeriesColors = getDataSeriesColorsValuesMap(specs, seriesColor); + + sortedSeriesColors.forEach((series, key) => { const spec = specs.get(series.specId); const color = seriesColorMap.get(key) || defaultColor; diff --git a/src/lib/series/series.test.ts b/src/lib/series/series.test.ts index bfeedd241d..d79772eec5 100644 --- a/src/lib/series/series.test.ts +++ b/src/lib/series/series.test.ts @@ -4,7 +4,6 @@ import { ScaleType } from '../utils/scales/scales'; import { DataSeriesColorsValues, formatStackedDataSeriesValues, - getDataSeriesColorsValuesMap, getFormattedDataseries, getSeriesColorMap, getSplittedSeries, @@ -317,62 +316,4 @@ describe('Series', () => { const subsetSplit = getSplittedSeries(seriesSpecs, deselectedDataSeries); expect(subsetSplit.splittedSeries.get(specId)!.length).toBe(1); }); - - test('should get sorted dataSeriesColorsValues map', () => { - const specId = getSpecId('spec1'); - - const splitSeriesLastValues = new Map(); - splitSeriesLastValues.set('a', 20); - splitSeriesLastValues.set('b', 10); - splitSeriesLastValues.set('c', 30); - - const colorValuesA = ['a', '1']; - const colorValuesB = ['b', '2']; - const colorValuesC = ['b', '3']; - - const colorValuesMap = new Map(); - - const dataSeriesColorsValuesA = { - specId, - colorValues: colorValuesA, - lastValue: 20, - }; - - const dataSeriesColorsValuesB = { - specId, - colorValues: colorValuesB, - lastValue: 10, - }; - - const dataSeriesColorsValuesC = { - specId, - colorValues: colorValuesC, - lastValue: 30, - }; - - const missingColorValues = getDataSeriesColorsValuesMap( - splitSeriesLastValues, - colorValuesMap, - specId, - ); - - expect(missingColorValues).toEqual(new Map()); - - colorValuesMap.set('a', colorValuesA); - colorValuesMap.set('b', colorValuesB); - colorValuesMap.set('c', colorValuesC); - - const defaultDesc = getDataSeriesColorsValuesMap( - splitSeriesLastValues, - colorValuesMap, - specId, - ); - - const expectedDefaultDesc = new Map(); - expectedDefaultDesc.set('c', dataSeriesColorsValuesC); - expectedDefaultDesc.set('a', dataSeriesColorsValuesA); - expectedDefaultDesc.set('b', dataSeriesColorsValuesB); - - expect(defaultDesc).toEqual(expectedDefaultDesc); - }); }); diff --git a/src/lib/series/series.ts b/src/lib/series/series.ts index 61169340f9..ecd1a92c23 100644 --- a/src/lib/series/series.ts +++ b/src/lib/series/series.ts @@ -357,7 +357,7 @@ export function getSplittedSeries( xValues: Set; } { const splittedSeries = new Map(); - let seriesColors = new Map(); + const seriesColors = new Map(); const xValues: Set = new Set(); for (const [specId, spec] of seriesSpecs) { const dataSeries = splitSeries(spec.data, spec, specId); @@ -377,15 +377,15 @@ export function getSplittedSeries( splittedSeries.set(specId, currentRawDataSeries); - const { splitSeriesLastValues, colorsValues } = dataSeries; - - const dataSeriesColorValues = getDataSeriesColorsValuesMap( - splitSeriesLastValues, - colorsValues, - specId, - ); + dataSeries.colorsValues.forEach((colorValues, key) => { + const lastValue = dataSeries.splitSeriesLastValues.get(key); - seriesColors = new Map([...seriesColors, ...dataSeriesColorValues]); + seriesColors.set(key, { + specId, + colorValues, + lastValue, + }); + }); for (const xValue of dataSeries.xValues) { xValues.add(xValue); @@ -399,24 +399,34 @@ export function getSplittedSeries( } export function getDataSeriesColorsValuesMap( - splitSeriesLastValues: Map, - colorValuesMap: Map, - specId: SpecId, + specs: Map, + colorValuesMap: Map, ): Map { const seriesColors = new Map(); - [...splitSeriesLastValues.keys()].forEach((key) => { - const colorValues = colorValuesMap.get(key); + [...colorValuesMap.keys()].sort((keyA, keyB) => { + const colorValuesA = colorValuesMap.get(keyA); + const colorValuesB = colorValuesMap.get(keyB); + if (!colorValuesA || !colorValuesB) { + return -1; + } + + const specA = specs.get(colorValuesA.specId); + const specB = specs.get(colorValuesB.specId); + + if (!specA || !specB) { + return -1; + } + + return (specA.sortIndex || -1) - (specB.sortIndex || -1); + }).forEach((seriesKey: string) => { + const colorValues = colorValuesMap.get(seriesKey); if (!colorValues) { return; } - seriesColors.set(key, { - specId, - colorValues, - lastValue: splitSeriesLastValues.get(key), - }); + seriesColors.set(seriesKey, colorValues); }); return seriesColors; diff --git a/src/lib/series/specs.ts b/src/lib/series/specs.ts index cf19aa4c0c..9480eff376 100644 --- a/src/lib/series/specs.ts +++ b/src/lib/series/specs.ts @@ -43,6 +43,8 @@ export interface SeriesSpec { * @default false */ hideInLegend?: boolean; + /** Index per series to sort by */ + sortIndex?: number; } export type CustomSeriesColorsMap = Map; diff --git a/stories/legend.tsx b/stories/legend.tsx index a4f29685ed..55fbc5111d 100644 --- a/stories/legend.tsx +++ b/stories/legend.tsx @@ -1,10 +1,12 @@ -import { boolean } from '@storybook/addon-knobs'; +import { array, boolean, select } from '@storybook/addon-knobs'; import { storiesOf } from '@storybook/react'; import React from 'react'; import { + AreaSeries, Axis, BarSeries, Chart, + CurveType, getAxisId, getSpecId, LineSeries, @@ -13,6 +15,7 @@ import { Settings, } from '../src/'; import * as TestDatasets from '../src/lib/series/utils/test_dataset'; +import { TSVB_DATASET } from '../src/lib/series/utils/test_dataset_tsvb'; storiesOf('Legend', module) .add('right', () => { @@ -214,12 +217,44 @@ storiesOf('Legend', module) }) .add('display values', () => { const showLegendDisplayValue = boolean('show display value in legend', true); + const legendPosition = select('legendPosition', { + right: Position.Right, + bottom: Position.Bottom, + left: Position.Left, + top: Position.Top, + }, Position.Right); + const tsvbSeries = TSVB_DATASET.series; + + const namesArray = array('series names (in sort order)', [ + 'jpg', + 'php', + 'png', + 'css', + 'gif', + ]); + + const seriesComponents = tsvbSeries.map((series: any) => { + const sortIndex = namesArray.findIndex((name: string) => name === series.label); + + return (); + }); return ( Number(d).toFixed(2)} /> - - + {seriesComponents} ); }); From d853eabd92ddece27ca56cf127458415721fecc5 Mon Sep 17 00:00:00 2001 From: Emma Cunningham Date: Tue, 9 Apr 2019 12:21:36 -0700 Subject: [PATCH 15/19] test(series): add tests for series colors sorting --- src/lib/series/legend.ts | 4 +- src/lib/series/series.test.ts | 89 +++++++++++++++++++++++++++++++++++ src/lib/series/series.ts | 7 ++- stories/legend.tsx | 3 +- 4 files changed, 98 insertions(+), 5 deletions(-) diff --git a/src/lib/series/legend.ts b/src/lib/series/legend.ts index 097b29d4d7..ccfb056f9d 100644 --- a/src/lib/series/legend.ts +++ b/src/lib/series/legend.ts @@ -1,7 +1,7 @@ import { findDataSeriesByColorValues, getAxesSpecForSpecId } from '../../state/utils'; import { identity } from '../utils/commons'; import { AxisId, SpecId } from '../utils/ids'; -import { DataSeriesColorsValues, getDataSeriesColorsValuesMap } from './series'; +import { DataSeriesColorsValues, getSortedDataSeriesColorsValuesMap } from './series'; import { AxisSpec, BasicSeriesSpec } from './specs'; export interface LegendItem { @@ -27,7 +27,7 @@ export function computeLegend( ): Map { const legendItems: Map = new Map(); - const sortedSeriesColors = getDataSeriesColorsValuesMap(specs, seriesColor); + const sortedSeriesColors = getSortedDataSeriesColorsValuesMap(specs, seriesColor); sortedSeriesColors.forEach((series, key) => { const spec = specs.get(series.specId); diff --git a/src/lib/series/series.test.ts b/src/lib/series/series.test.ts index d79772eec5..8e124798af 100644 --- a/src/lib/series/series.test.ts +++ b/src/lib/series/series.test.ts @@ -6,6 +6,7 @@ import { formatStackedDataSeriesValues, getFormattedDataseries, getSeriesColorMap, + getSortedDataSeriesColorsValuesMap, getSplittedSeries, RawDataSeries, splitSeries, @@ -316,4 +317,92 @@ describe('Series', () => { const subsetSplit = getSplittedSeries(seriesSpecs, deselectedDataSeries); expect(subsetSplit.splittedSeries.get(specId)!.length).toBe(1); }); + + test('should sort series color by series spec sort index', () => { + const seriesSpecs = new Map(); + + const baseSpec: BasicSeriesSpec = { + id: getSpecId('spec'), + groupId: getGroupId('group'), + seriesType: 'line', + yScaleType: ScaleType.Log, + xScaleType: ScaleType.Linear, + xAccessor: 'x', + yAccessors: ['y1', 'y2'], + stackAccessors: ['x'], + yScaleToDataExtent: false, + data: TestDataset.BARCHART_2Y0G, + hideInLegend: false, + }; + + const spec1: BasicSeriesSpec = { + ...baseSpec, + id: getSpecId('spec1'), + sortIndex: 0, + }; + const spec2: BasicSeriesSpec = { + ...baseSpec, + id: getSpecId('spec2'), + sortIndex: 1, + }; + const spec3: BasicSeriesSpec = { + ...baseSpec, + id: getSpecId('spec3'), + sortIndex: 2, + }; + + seriesSpecs.set(spec3.id, spec3); + seriesSpecs.set(spec1.id, spec1); + seriesSpecs.set(spec2.id, spec2); + + const colorValuesMap = new Map(); + const dataSeriesValues1: DataSeriesColorsValues = { + specId: spec1.id, + colorValues: [], + }; + + const dataSeriesValues2: DataSeriesColorsValues = { + specId: spec2.id, + colorValues: [], + }; + + const dataSeriesValues3: DataSeriesColorsValues = { + specId: spec3.id, + colorValues: [], + }; + + colorValuesMap.set(spec3.id, dataSeriesValues3); + colorValuesMap.set(spec1.id, dataSeriesValues1); + colorValuesMap.set(spec2.id, dataSeriesValues2); + + const descSortedColorValues = new Map(); + descSortedColorValues.set(spec1.id, dataSeriesValues1); + descSortedColorValues.set(spec2.id, dataSeriesValues2); + descSortedColorValues.set(spec3.id, dataSeriesValues3); + + expect(getSortedDataSeriesColorsValuesMap(seriesSpecs, colorValuesMap)).toEqual(descSortedColorValues); + + const ascSortedColorValues = new Map(); + spec1.sortIndex = 2; + spec2.sortIndex = 1; + spec3.sortIndex = 0; + + ascSortedColorValues.set(spec3.id, dataSeriesValues3); + ascSortedColorValues.set(spec2.id, dataSeriesValues2); + ascSortedColorValues.set(spec1.id, dataSeriesValues1); + + expect(getSortedDataSeriesColorsValuesMap(seriesSpecs, colorValuesMap)).toEqual(ascSortedColorValues); + + // Any series with undefined sort order should come last + const undefinedSortedColorValues = new Map(); + spec1.sortIndex = 1; + spec2.sortIndex = undefined; + spec3.sortIndex = 0; + + undefinedSortedColorValues.set(spec3.id, dataSeriesValues3); + undefinedSortedColorValues.set(spec1.id, dataSeriesValues1); + undefinedSortedColorValues.set(spec2.id, dataSeriesValues2); + + expect(getSortedDataSeriesColorsValuesMap(seriesSpecs, colorValuesMap)).toEqual(undefinedSortedColorValues); + }); }); diff --git a/src/lib/series/series.ts b/src/lib/series/series.ts index ecd1a92c23..9ac2238ee9 100644 --- a/src/lib/series/series.ts +++ b/src/lib/series/series.ts @@ -398,7 +398,7 @@ export function getSplittedSeries( }; } -export function getDataSeriesColorsValuesMap( +export function getSortedDataSeriesColorsValuesMap( specs: Map, colorValuesMap: Map, ): Map { @@ -419,7 +419,10 @@ export function getDataSeriesColorsValuesMap( return -1; } - return (specA.sortIndex || -1) - (specB.sortIndex || -1); + const specAIndex = specA.sortIndex != null ? specA.sortIndex : colorValuesMap.size; + const specBIndex = specB.sortIndex != null ? specB.sortIndex : colorValuesMap.size; + + return specAIndex - specBIndex; }).forEach((seriesKey: string) => { const colorValues = colorValuesMap.get(seriesKey); if (!colorValues) { diff --git a/stories/legend.tsx b/stories/legend.tsx index 55fbc5111d..81ae1afe67 100644 --- a/stories/legend.tsx +++ b/stories/legend.tsx @@ -235,7 +235,8 @@ storiesOf('Legend', module) ]); const seriesComponents = tsvbSeries.map((series: any) => { - const sortIndex = namesArray.findIndex((name: string) => name === series.label); + const nameIndex = namesArray.findIndex((name: string) => name === series.label); + const sortIndex = nameIndex > -1 ? nameIndex : undefined; return ( Date: Tue, 9 Apr 2019 12:39:18 -0700 Subject: [PATCH 16/19] refactor(series): sort colorsValuesMap using specSortIndex --- src/lib/series/legend.ts | 2 +- src/lib/series/series.test.ts | 89 ++++++++++++----------------------- src/lib/series/series.ts | 36 ++++---------- 3 files changed, 40 insertions(+), 87 deletions(-) diff --git a/src/lib/series/legend.ts b/src/lib/series/legend.ts index ccfb056f9d..055529e35e 100644 --- a/src/lib/series/legend.ts +++ b/src/lib/series/legend.ts @@ -27,7 +27,7 @@ export function computeLegend( ): Map { const legendItems: Map = new Map(); - const sortedSeriesColors = getSortedDataSeriesColorsValuesMap(specs, seriesColor); + const sortedSeriesColors = getSortedDataSeriesColorsValuesMap(seriesColor); sortedSeriesColors.forEach((series, key) => { const spec = specs.get(series.specId); diff --git a/src/lib/series/series.test.ts b/src/lib/series/series.test.ts index 8e124798af..2e666ea1c6 100644 --- a/src/lib/series/series.test.ts +++ b/src/lib/series/series.test.ts @@ -319,90 +319,61 @@ describe('Series', () => { }); test('should sort series color by series spec sort index', () => { - const seriesSpecs = new Map(); - - const baseSpec: BasicSeriesSpec = { - id: getSpecId('spec'), - groupId: getGroupId('group'), - seriesType: 'line', - yScaleType: ScaleType.Log, - xScaleType: ScaleType.Linear, - xAccessor: 'x', - yAccessors: ['y1', 'y2'], - stackAccessors: ['x'], - yScaleToDataExtent: false, - data: TestDataset.BARCHART_2Y0G, - hideInLegend: false, - }; - - const spec1: BasicSeriesSpec = { - ...baseSpec, - id: getSpecId('spec1'), - sortIndex: 0, - }; - const spec2: BasicSeriesSpec = { - ...baseSpec, - id: getSpecId('spec2'), - sortIndex: 1, - }; - const spec3: BasicSeriesSpec = { - ...baseSpec, - id: getSpecId('spec3'), - sortIndex: 2, - }; - - seriesSpecs.set(spec3.id, spec3); - seriesSpecs.set(spec1.id, spec1); - seriesSpecs.set(spec2.id, spec2); + const spec1Id = getSpecId('spec1'); + const spec2Id = getSpecId('spec2'); + const spec3Id = getSpecId('spec3'); const colorValuesMap = new Map(); const dataSeriesValues1: DataSeriesColorsValues = { - specId: spec1.id, + specId: spec1Id, colorValues: [], + specSortIndex: 0, }; const dataSeriesValues2: DataSeriesColorsValues = { - specId: spec2.id, + specId: spec2Id, colorValues: [], + specSortIndex: 1, }; const dataSeriesValues3: DataSeriesColorsValues = { - specId: spec3.id, + specId: spec3Id, colorValues: [], + specSortIndex: 3, }; - colorValuesMap.set(spec3.id, dataSeriesValues3); - colorValuesMap.set(spec1.id, dataSeriesValues1); - colorValuesMap.set(spec2.id, dataSeriesValues2); + colorValuesMap.set(spec3Id, dataSeriesValues3); + colorValuesMap.set(spec1Id, dataSeriesValues1); + colorValuesMap.set(spec2Id, dataSeriesValues2); const descSortedColorValues = new Map(); - descSortedColorValues.set(spec1.id, dataSeriesValues1); - descSortedColorValues.set(spec2.id, dataSeriesValues2); - descSortedColorValues.set(spec3.id, dataSeriesValues3); + descSortedColorValues.set(spec1Id, dataSeriesValues1); + descSortedColorValues.set(spec2Id, dataSeriesValues2); + descSortedColorValues.set(spec3Id, dataSeriesValues3); - expect(getSortedDataSeriesColorsValuesMap(seriesSpecs, colorValuesMap)).toEqual(descSortedColorValues); + expect(getSortedDataSeriesColorsValuesMap(colorValuesMap)).toEqual(descSortedColorValues); const ascSortedColorValues = new Map(); - spec1.sortIndex = 2; - spec2.sortIndex = 1; - spec3.sortIndex = 0; + dataSeriesValues1.specSortIndex = 2; + dataSeriesValues2.specSortIndex = 1; + dataSeriesValues3.specSortIndex = 0; - ascSortedColorValues.set(spec3.id, dataSeriesValues3); - ascSortedColorValues.set(spec2.id, dataSeriesValues2); - ascSortedColorValues.set(spec1.id, dataSeriesValues1); + ascSortedColorValues.set(spec3Id, dataSeriesValues3); + ascSortedColorValues.set(spec2Id, dataSeriesValues2); + ascSortedColorValues.set(spec1Id, dataSeriesValues1); - expect(getSortedDataSeriesColorsValuesMap(seriesSpecs, colorValuesMap)).toEqual(ascSortedColorValues); + expect(getSortedDataSeriesColorsValuesMap(colorValuesMap)).toEqual(ascSortedColorValues); // Any series with undefined sort order should come last const undefinedSortedColorValues = new Map(); - spec1.sortIndex = 1; - spec2.sortIndex = undefined; - spec3.sortIndex = 0; + dataSeriesValues1.specSortIndex = 1; + dataSeriesValues2.specSortIndex = undefined; + dataSeriesValues3.specSortIndex = 0; - undefinedSortedColorValues.set(spec3.id, dataSeriesValues3); - undefinedSortedColorValues.set(spec1.id, dataSeriesValues1); - undefinedSortedColorValues.set(spec2.id, dataSeriesValues2); + undefinedSortedColorValues.set(spec3Id, dataSeriesValues3); + undefinedSortedColorValues.set(spec1Id, dataSeriesValues1); + undefinedSortedColorValues.set(spec2Id, dataSeriesValues2); - expect(getSortedDataSeriesColorsValuesMap(seriesSpecs, colorValuesMap)).toEqual(undefinedSortedColorValues); + expect(getSortedDataSeriesColorsValuesMap(colorValuesMap)).toEqual(undefinedSortedColorValues); }); }); diff --git a/src/lib/series/series.ts b/src/lib/series/series.ts index 9ac2238ee9..366db0f4e3 100644 --- a/src/lib/series/series.ts +++ b/src/lib/series/series.ts @@ -48,6 +48,7 @@ export interface DataSeriesColorsValues { specId: SpecId; colorValues: any[]; lastValue?: any; + specSortIndex?: number; } /** @@ -382,6 +383,7 @@ export function getSplittedSeries( seriesColors.set(key, { specId, + specSortIndex: spec.sortIndex, colorValues, lastValue, }); @@ -399,40 +401,20 @@ export function getSplittedSeries( } export function getSortedDataSeriesColorsValuesMap( - specs: Map, colorValuesMap: Map, ): Map { - const seriesColors = new Map(); - - [...colorValuesMap.keys()].sort((keyA, keyB) => { - const colorValuesA = colorValuesMap.get(keyA); - const colorValuesB = colorValuesMap.get(keyB); + const seriesColorsArray = [...colorValuesMap]; + seriesColorsArray.sort((seriesA, seriesB) => { + const [, colorValuesA] = seriesA; + const [, colorValuesB] = seriesB; - if (!colorValuesA || !colorValuesB) { - return -1; - } - - const specA = specs.get(colorValuesA.specId); - const specB = specs.get(colorValuesB.specId); - - if (!specA || !specB) { - return -1; - } - - const specAIndex = specA.sortIndex != null ? specA.sortIndex : colorValuesMap.size; - const specBIndex = specB.sortIndex != null ? specB.sortIndex : colorValuesMap.size; + const specAIndex = colorValuesA.specSortIndex != null ? colorValuesA.specSortIndex : colorValuesMap.size; + const specBIndex = colorValuesB.specSortIndex != null ? colorValuesB.specSortIndex : colorValuesMap.size; return specAIndex - specBIndex; - }).forEach((seriesKey: string) => { - const colorValues = colorValuesMap.get(seriesKey); - if (!colorValues) { - return; - } - - seriesColors.set(seriesKey, colorValues); }); - return seriesColors; + return new Map([...seriesColorsArray]); } export function getSeriesColorMap( From 27798cc69f863ed6e99841bb7043e32f9b7d1a37 Mon Sep 17 00:00:00 2001 From: Emma Cunningham Date: Tue, 9 Apr 2019 13:00:23 -0700 Subject: [PATCH 17/19] fix(legend): align displayValue to the right --- src/components/_legend.scss | 3 --- src/components/legend_element.tsx | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/_legend.scss b/src/components/_legend.scss index 2215539c04..47f68bdb8c 100644 --- a/src/components/_legend.scss +++ b/src/components/_legend.scss @@ -120,9 +120,6 @@ $elasticChartsLegendMaxHeight: $euiSize * 4; } .elasticChartsLegendListItem__displayValue { - width: $euiSize * 2; - max-width: $euiSize * 2; - font-weight: $euiFontWeightMedium; text-align: right; } diff --git a/src/components/legend_element.tsx b/src/components/legend_element.tsx index 45d4cea0a4..09d28e6926 100644 --- a/src/components/legend_element.tsx +++ b/src/components/legend_element.tsx @@ -131,7 +131,7 @@ class LegendElementComponent extends React.Component - + {this.renderDisplayValue(displayValue, showLegendDisplayValue)} From e235e157173aac5437849dccd8aa17710c617eb7 Mon Sep 17 00:00:00 2001 From: Emma Cunningham Date: Wed, 10 Apr 2019 07:49:02 -0700 Subject: [PATCH 18/19] feat(legend): hide displayValue if !isSeriesVisible --- src/components/_legend.scss | 4 ++++ src/components/legend_element.tsx | 9 ++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/_legend.scss b/src/components/_legend.scss index 47f68bdb8c..f6f4269c4b 100644 --- a/src/components/_legend.scss +++ b/src/components/_legend.scss @@ -121,6 +121,10 @@ $elasticChartsLegendMaxHeight: $euiSize * 4; .elasticChartsLegendListItem__displayValue { text-align: right; + + &.elasticChartsLegendListItem__displayValue--hidden { + display: none; + } } .elasticChartsLegend__toggle { diff --git a/src/components/legend_element.tsx b/src/components/legend_element.tsx index 09d28e6926..dc6801befa 100644 --- a/src/components/legend_element.tsx +++ b/src/components/legend_element.tsx @@ -91,6 +91,13 @@ class LegendElementComponent extends React.Component; + const displayValueClassNames = classNames( + 'elasticChartsLegendListItem__displayValue', + { + ['elasticChartsLegendListItem__displayValue--hidden']: !isSeriesVisible, + }, + ); + return ( @@ -131,7 +138,7 @@ class LegendElementComponent extends React.Component - + {this.renderDisplayValue(displayValue, showLegendDisplayValue)} From c87f7c434301542bfcde3cade1a4f0f8758a45af Mon Sep 17 00:00:00 2001 From: Emma Cunningham Date: Wed, 10 Apr 2019 09:38:26 -0700 Subject: [PATCH 19/19] docs(legend): update story name --- stories/legend.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stories/legend.tsx b/stories/legend.tsx index 81ae1afe67..a606b48de6 100644 --- a/stories/legend.tsx +++ b/stories/legend.tsx @@ -215,7 +215,7 @@ storiesOf('Legend', module) ); }) - .add('display values', () => { + .add('display values in legend elements', () => { const showLegendDisplayValue = boolean('show display value in legend', true); const legendPosition = select('legendPosition', { right: Position.Right,