feat: allow use of functions for y, y0, split and stack accessors (#943)

elastic · Dec 9, 2020 · 22425d3 · 22425d3
1 parent 3c823fd
commit 22425d3
Show file tree

Hide file tree

Showing 14 changed files with 4,857 additions and 545 deletions.
diff --git a/api/charts.api.md b/api/charts.api.md
@@ -1474,11 +1474,11 @@ export type ScaleType = $Values<typeof ScaleType>;
 // @public (undocumented)
 export interface SeriesAccessors {
     markSizeAccessor?: Accessor | AccessorFn;
-    splitSeriesAccessors?: Accessor[];
-    stackAccessors?: Accessor[];
+    splitSeriesAccessors?: (Accessor | AccessorFn)[];
+    stackAccessors?: (Accessor | AccessorFn)[];
     xAccessor: Accessor | AccessorFn;
-    y0Accessors?: Accessor[];
-    yAccessors: Accessor[];
+    y0Accessors?: (Accessor | AccessorFn)[];
+    yAccessors: (Accessor | AccessorFn)[];
 }
 
 // @public (undocumented)
@@ -1870,7 +1870,11 @@ export interface TooltipValue {
 export type TooltipValueFormatter = (data: TooltipValue) => JSX.Element | string;
 
 // @public
-export type UnaryAccessorFn<Return = any> = (datum: Datum) => Return;
+export interface UnaryAccessorFn<Return = any> {
+    // (undocumented)
+    (datum: Datum): Return;
+    fieldName?: string;
+}
 
 // @public (undocumented)
 export type UnboundedDomainWithInterval = DomainBase;
@@ -1933,7 +1937,7 @@ export interface XYChartSeriesIdentifier extends SeriesIdentifier {
     // (undocumented)
     splitAccessors: Map<string | number, string | number>;
     // (undocumented)
-    yAccessor: string | number;
+    yAccessor: Accessor;
 }
 
 // @public

diff --git a/...or-all-stories-bar-chart-functional-accessors-visually-looks-correct-1-snap.png b/...or-all-stories-bar-chart-functional-accessors-visually-looks-correct-1-snap.png
diff --git a/...es-stories-functional-accessors-functional-accessors-with-field-name-1-snap.png b/...es-stories-functional-accessors-functional-accessors-with-field-name-1-snap.png
diff --git a/...nctional-accessors-functional-accessors-with-field-name-with-tooltip-1-snap.png b/...nctional-accessors-functional-accessors-with-field-name-with-tooltip-1-snap.png
diff --git a/...-series-stories-functional-accessors-y-1-accessors-and-y-0-accessors-1-snap.png b/...-series-stories-functional-accessors-y-1-accessors-and-y-0-accessors-1-snap.png
diff --git a/integration/tests/bar_stories.test.ts b/integration/tests/bar_stories.test.ts
@@ -200,4 +200,31 @@ describe('Bar series stories', () => {
       });
     });
   });
+
+  describe('functional accessors', () => {
+    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 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',
+        {
+          top: 60,
+          right: 180,
+        },
+        {
+          screenshotSelector: 'body',
+        },
+      );
+    });
+
+    it('y1Accessors and y0Accessors', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/bar-chart--band-bar-chart&knob-fit Y domain=true&knob-use fn accessors=true',
+      );
+    });
+  });
 });