diff --git a/api/charts.api.md b/api/charts.api.md index 9eb847396f..5781c77fdb 100644 --- a/api/charts.api.md +++ b/api/charts.api.md @@ -1873,8 +1873,7 @@ export type TooltipValueFormatter = (data: TooltipValue) => JSX.Element | string export interface UnaryAccessorFn { // (undocumented) (datum: Datum): Return; - // (undocumented) - seriesName?: string; + fieldName?: string; } // @public (undocumented) diff --git a/integration/tests/bar_stories.test.ts b/integration/tests/bar_stories.test.ts index e5c8faac72..02e468497c 100644 --- a/integration/tests/bar_stories.test.ts +++ b/integration/tests/bar_stories.test.ts @@ -202,13 +202,13 @@ describe('Bar series stories', () => { }); describe('functional accessors', () => { - it('functional accessors with seriesName', async () => { + it('functional accessors with fieldName', async () => { await common.expectChartAtUrlToMatchScreenshot( 'http://localhost:9001/?path=/story/bar-chart--functional-accessors&knob-y fn name=testY&knob-split fn name=testSplit', ); }); - it('functional accessors with seriesName - with tooltip', async () => { + it('functional accessors with fieldName - with tooltip', async () => { await common.expectChartWithMouseAtUrlToMatchScreenshot( 'http://localhost:9001/?path=/story/bar-chart--functional-accessors&knob-y fn name=testY&knob-split fn name=testSplit', { diff --git a/src/chart_types/xy_chart/utils/__snapshots__/series.test.ts.snap b/src/chart_types/xy_chart/utils/__snapshots__/series.test.ts.snap index 353ac581ef..58c42c38b7 100644 --- a/src/chart_types/xy_chart/utils/__snapshots__/series.test.ts.snap +++ b/src/chart_types/xy_chart/utils/__snapshots__/series.test.ts.snap @@ -23832,7 +23832,7 @@ Array [ ] `; -exports[`Series functional accessors Can use functional splitSeriesAccessor with seriesName 1`] = ` +exports[`Series functional accessors Can use functional splitSeriesAccessor with fieldName 1`] = ` Array [ Object { "data": Array [ @@ -27135,7 +27135,7 @@ Array [ ] `; -exports[`Series functional accessors Can use functional yAccessor with seriesName 1`] = ` +exports[`Series functional accessors Can use functional yAccessor with fieldName 1`] = ` Array [ Object { "data": Array [ diff --git a/src/chart_types/xy_chart/utils/series.test.ts b/src/chart_types/xy_chart/utils/series.test.ts index 577ba049c0..d92facf7d0 100644 --- a/src/chart_types/xy_chart/utils/series.test.ts +++ b/src/chart_types/xy_chart/utils/series.test.ts @@ -1008,9 +1008,9 @@ describe('Series', () => { expect([...splitSeries.dataSeries.values()].map(matchOnlyDataSeriesLegacySnapshot)).toMatchSnapshot(); }); - test('Can use functional yAccessor with seriesName', () => { + test('Can use functional yAccessor with fieldName', () => { const yAccessor: AccessorFn = (d) => d.y1; - yAccessor.seriesName = 'custom name'; + yAccessor.fieldName = 'custom name'; const splitSeries = splitSeriesDataByAccessors( MockSeriesSpec.bar({ data: TestDataset.BARCHART_2Y2G, @@ -1020,7 +1020,7 @@ describe('Series', () => { new Map(), ); expect([...splitSeries.dataSeries.values()].map(({ yAccessor }) => yAccessor)).toEqualArrayOf( - yAccessor.seriesName, + yAccessor.fieldName, ); expect([...splitSeries.dataSeries.values()].length).toBe(2); expect([...splitSeries.dataSeries.values()].map(matchOnlyDataSeriesLegacySnapshot)).toMatchSnapshot(); @@ -1061,9 +1061,9 @@ describe('Series', () => { expect([...splitSeries.dataSeries.values()].map(matchOnlyDataSeriesLegacySnapshot)).toMatchSnapshot(); }); - test('Can use functional splitSeriesAccessor with seriesName', () => { + test('Can use functional splitSeriesAccessor with fieldName', () => { const splitSeriesAccessor: AccessorFn = (d) => d.g1; - splitSeriesAccessor.seriesName = 'custom name'; + splitSeriesAccessor.fieldName = 'custom name'; const splitSeries = splitSeriesDataByAccessors( MockSeriesSpec.bar({ data: TestDataset.BARCHART_2Y2G, @@ -1074,7 +1074,7 @@ describe('Series', () => { ); expect( flatten([...splitSeries.dataSeries.values()].map(({ splitAccessors }) => [...splitAccessors.keys()])), - ).toEqualArrayOf(splitSeriesAccessor.seriesName); + ).toEqualArrayOf(splitSeriesAccessor.fieldName); expect([...splitSeries.dataSeries.values()].length).toBe(2); expect([...splitSeries.dataSeries.values()].map(matchOnlyDataSeriesLegacySnapshot)).toMatchSnapshot(); }); diff --git a/src/chart_types/xy_chart/utils/series.ts b/src/chart_types/xy_chart/utils/series.ts index 40ccee0423..1e62f0c732 100644 --- a/src/chart_types/xy_chart/utils/series.ts +++ b/src/chart_types/xy_chart/utils/series.ts @@ -120,8 +120,8 @@ export function getSeriesIndex(series: SeriesIdentifier[], target: SeriesIdentif * @param index * @internal */ -export function getAccessorString(accessor: Accessor | AccessorFn, index: number) { - return typeof accessor === 'function' ? accessor.seriesName ?? `(index:${index})` : accessor; +export function getAccessorFieldName(accessor: Accessor | AccessorFn, index: number) { + return typeof accessor === 'function' ? accessor.fieldName ?? `(index:${index})` : accessor; } /** @@ -212,8 +212,8 @@ export function splitSeriesDataByAccessors( y0Accessors && y0Accessors[index], markSizeAccessor, ); - const accessorStr = getAccessorString(accessor, index); - const splitAccessorStrs = [...splitAccessors.values()].map((a, si) => getAccessorString(a, si)); + const accessorStr = getAccessorFieldName(accessor, index); + const splitAccessorStrs = [...splitAccessors.values()].map((a, si) => getAccessorFieldName(a, si)); const seriesKeys = [...splitAccessorStrs, accessorStr]; const seriesIdentifier: Omit = { specId, @@ -290,8 +290,8 @@ export function splitSeriesDataByAccessors( markSizeAccessor, ); - const accessorStr = getAccessorString(accessor, index); - const splitAccessorStrs = [...splitAccessors.values()].map((a, si) => getAccessorString(a, si)); + const accessorStr = getAccessorFieldName(accessor, index); + const splitAccessorStrs = [...splitAccessors.values()].map((a, si) => getAccessorFieldName(a, si)); const seriesKeys = [...splitAccessorStrs, accessorStr]; const seriesIdentifier: Omit = { specId, @@ -379,7 +379,7 @@ function getSplitAccessors( accessors.forEach((accessor: Accessor | AccessorFn, index) => { const value = getAccessorValue(datum, accessor); if (typeof value === 'string' || typeof value === 'number') { - const accessorStr = getAccessorString(accessor, index); + const accessorStr = getAccessorFieldName(accessor, index); splitAccessors.set(accessorStr, value); } }); diff --git a/src/utils/accessor.ts b/src/utils/accessor.ts index bd4d220fcc..600097dd7e 100644 --- a/src/utils/accessor.ts +++ b/src/utils/accessor.ts @@ -25,7 +25,10 @@ import { Datum } from './commons'; * @public */ export interface UnaryAccessorFn { - seriesName?: string; + /** + * Name used as accessor field name in place of function reference + */ + fieldName?: string; (datum: Datum): Return; } diff --git a/stories/bar/54_functional_accessors.tsx b/stories/bar/54_functional_accessors.tsx index 3b734db94c..90f399631e 100644 --- a/stories/bar/54_functional_accessors.tsx +++ b/stories/bar/54_functional_accessors.tsx @@ -28,9 +28,9 @@ import { SB_SOURCE_PANEL } from '../utils/storybook'; export const Example = () => { const xAccessorFn: AccessorFn = (d) => d.x; const yAccessorFn: AccessorFn = (d) => d.y; - yAccessorFn.seriesName = text('y fn name', '') || undefined; + yAccessorFn.fieldName = text('y fn name', '') || undefined; const splitAccessorFn: AccessorFn = (d) => d.g2; - splitAccessorFn.seriesName = text('split fn name', '') || undefined; + splitAccessorFn.fieldName = text('split fn name', '') || undefined; const onElementClick: ElementClickListener = ([[, { key }]]) => action('clicked series key')(key); @@ -64,16 +64,16 @@ This enables serialization of complex values, without needing to transform raw d \`\`\`ts // simple example const yAccessorFn: AccessorFn = (d) => d.y; -yAccessorFn.seriesName = 'simple y value'; +yAccessorFn.fieldName = 'simple y value'; // complex example const yAccessorFn: AccessorFn = ({ range }) => \`\${range.to} - \${range.from}\`; -yAccessorFn.seriesName = 'complex y value'; +yAccessorFn.fieldName = 'complex y value'; \`\`\` -If no \`seriesName\` is provided, the default value will be set using the index \`(index:0)\`. +If no \`fieldName\` is provided, the default value will be set using the index \`(index:0)\`. -Try changing the \`seriesName\` for the y and split accessor functions in the storybook knobs. +Try changing the \`fieldName\` for the y and split accessor functions in the storybook knobs. `, }, },