feat: fit functions for null y1 values

.eslintrc.js

@@ -47,7 +47,6 @@ module.exports = {
       },
     ],
     'sort-keys': 'off',
-    'import/no-default-export': 'error',
     'import/no-unresolved': 'error',
     'no-irregular-whitespace': 'error',
     'no-unused-expressions': 'error',
@@ -73,7 +72,7 @@ module.exports = {
   },
   overrides: [
     {
-      files: [ '*.js' ],
+      files: [ '*.js', '*test.ts' ],
       rules: {
         '@typescript-eslint/no-var-requires': 0
       }

.playground/playgroud.tsx

@@ -1,6 +1,22 @@
-import React, { Fragment } from 'react';
-import { Axis, Chart, getAxisId, getSpecId, Position, ScaleType, BarSeries, Settings, niceTimeFormatter } from '../src';
-import { KIBANA_METRICS } from '../src/utils/data_samples/test_dataset_kibana';
+import React from 'react';
+import { Axis, Chart, getAxisId, getSpecId, Position, ScaleType, Settings, LineSeries } from '../src';
+import { Fit } from '../src/chart_types/xy_chart/utils/specs';
+
+const data = [
+  { x: 0, y: null },
+  { x: 1, y: 3 },
+  { x: 2, y: 5 },
+  { x: 3, y: null },
+  { x: 4, y: 4 },
+  { x: 5, y: null },
+  { x: 6, y: 5 },
+  { x: 7, y: 6 },
+  { x: 8, y: null },
+  { x: 9, y: null },
+  { x: 10, y: null },
+  { x: 11, y: 12 },
+  { x: 12, y: null },
+];
 
 export class Playground extends React.Component<{}, { dataLimit: boolean }> {
   state = {
@@ -14,35 +30,47 @@ export class Playground extends React.Component<{}, { dataLimit: boolean }> {
     });
   };
   render() {
-    const { data } = KIBANA_METRICS.metrics.kibana_os_load[0];
     return (
-      <Fragment>
-        <div>
-          <button onClick={this.changeData}>Reduce data</button>
-        </div>
+      <>
         <div className="chart">
-          <Chart>
-            <Settings showLegend />
+          <Chart className="story-chart">
+            <Settings
+              showLegend
+              theme={{
+                areaSeriesStyle: {
+                  point: {
+                    visible: true,
+                  },
+                },
+              }}
+            />
             <Axis
-              id={getAxisId('top')}
+              id={getAxisId('bottom')}
               position={Position.Bottom}
-              title={'Top axis'}
-              tickFormat={niceTimeFormatter([data[0][0], data[data.length - 1][0]])}
+              title={'Bottom axis'}
+              showOverlappingTicks={true}
             />
-            <Axis id={getAxisId('left2')} title={'Left axis'} position={Position.Left} />
-
-            <BarSeries
-              id={getSpecId('bars1')}
-              xScaleType={ScaleType.Time}
+            <Axis id={getAxisId('left')} title={'Left axis'} position={Position.Left} />
+            <LineSeries
+              id={getSpecId('test')}
+              xScaleType={ScaleType.Linear}
               yScaleType={ScaleType.Linear}
-              xAccessor={0}
-              yAccessors={[1]}
-              timeZone={'US/Pacific'}
+              xAccessor={'x'}
+              yAccessors={['y']}
+              // curve={2}
+              // splitSeriesAccessors={['g']}
+              // stackAccessors={['x']}
+              fit={Fit.Linear}
               data={data}
+              // fit={{
+              //   type: Fit.Average,
+              //   endValue: 0,
+              // }}
+              // data={data}
             />
           </Chart>
         </div>
-      </Fragment>
+      </>
     );
   }
 }

global.d.ts

@@ -0,0 +1,2 @@
+// https://github.com/jest-community/jest-extended
+import 'jest-extended';

integration/helpers.ts

@@ -24,6 +24,7 @@ function requireAllStories() {
 function encodeString(string: string) {
   return string
     .replace(/\//gi, ' ')
+    .replace(/-/g, ' ')
     .replace(/[^a-z|A-Z|0-9|\s|\/]+/gi, '')
     .trim()
     .replace(/\s+/g, '-')

integration/page_objects/common.ts

@@ -26,30 +26,34 @@ class CommonPage {
     const padding: number = opts && opts.padding ? opts.padding : 0;
     const path: string | undefined = opts && opts.path ? opts.path : undefined;
 
-    await page.waitForSelector(selector, { timeout: 10000 });
-    const rect = await page.evaluate((selector) => {
-      const element = document.querySelector(selector);
-
-      if (!element) {
-        return null;
-      }
-
-      const { x, y, width, height } = element.getBoundingClientRect();
-
-      return { left: x, top: y, width, height, id: element.id };
-    }, selector);
-
-    if (!rect) throw Error(`Could not find element that matches selector: ${selector}.`);
-
-    return page.screenshot({
-      path,
-      clip: {
-        x: rect.left - padding,
-        y: rect.top - padding,
-        width: rect.width + padding * 2,
-        height: rect.height + padding * 2,
-      },
-    });
+    try {
+      await page.waitForSelector(selector, { timeout: 10000 });
+      const rect = await page.evaluate((selector) => {
+        const element = document.querySelector(selector);
+
+        if (!element) {
+          return null;
+        }
+
+        const { x, y, width, height } = element.getBoundingClientRect();
+
+        return { left: x, top: y, width, height, id: element.id };
+      }, selector);
+
+      if (!rect) throw Error(`Could not find element that matches selector: ${selector}.`);
+
+      return page.screenshot({
+        path,
+        clip: {
+          x: rect.left - padding,
+          y: rect.top - padding,
+          width: rect.width + padding * 2,
+          height: rect.height + padding * 2,
+        },
+      });
+    } catch (error) {
+      throw Error(`Could not find element that matches selector: ${selector}.`);
+    }
   }
 
   /**
@@ -78,7 +82,7 @@ class CommonPage {
 
       expect(chart).toMatchImageSnapshot();
     } catch (error) {
-      throw new Error(error);
+      throw new Error(`${error}\n\n${url}`);
     }
   }
 }

integration/tests/all.test.ts

@@ -14,7 +14,8 @@ describe('Baseline Visual tests for all stories', () => {
       stories.forEach(({ title, encodedTitle }) => {
         describe(title, () => {
           it('visually looks correct', async () => {
-            await common.expectChartAtUrlToMatchScreenshot(`http://localhost:9001?id=${encodedGroup}--${encodedTitle}`);
+            const url = `http://localhost:9001?id=${encodedGroup}--${encodedTitle}`;
+            await common.expectChartAtUrlToMatchScreenshot(url);
           });
         });
       });

integration/tests/mixed-stories.test.ts

@@ -0,0 +1,86 @@
+import { common } from '../page_objects';
+import { Fit } from '../../src/chart_types/xy_chart/utils/specs';
+
+describe('Mixed series stories', () => {
+  describe('Fitting functions', () => {
+    describe('Area charts - no endValue', () => {
+      Object.values(Fit).forEach((fitType) => {
+        it(`should display correct fit for type - ${fitType}`, async () => {
+          await common.expectChartAtUrlToMatchScreenshot(
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=area&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=none&knob-Explicit valuve (using Fit.Explicit)=8`,
+          );
+        });
+      });
+    });
+
+    describe('Area charts - endValue set to 2', () => {
+      Object.values(Fit).forEach((fitType) => {
+        it(`should display correct fit for type - ${fitType}`, async () => {
+          await common.expectChartAtUrlToMatchScreenshot(
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=area&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=2&knob-Explicit valuve (using Fit.Explicit)=8`,
+          );
+        });
+      });
+    });
+
+    describe('Area charts - endValue set to "nearest"', () => {
+      Object.values(Fit).forEach((fitType) => {
+        it(`should display correct fit for type - ${fitType}`, async () => {
+          await common.expectChartAtUrlToMatchScreenshot(
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=area&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=nearest&knob-Explicit valuve (using Fit.Explicit)=8`,
+          );
+        });
+      });
+    });
+
+    describe('Area charts - with curved - endValue set to 2', () => {
+      Object.values(Fit).forEach((fitType) => {
+        it(`should display correct fit for type - ${fitType}`, async () => {
+          await common.expectChartAtUrlToMatchScreenshot(
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=area&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=1&knob-End value=2&knob-Explicit valuve (using Fit.Explicit)=8`,
+          );
+        });
+      });
+    });
+
+    describe('Area charts - Ordinal dataset - no endValue', () => {
+      Object.values(Fit).forEach((fitType) => {
+        it(`should display correct fit for type - ${fitType}`, async () => {
+          await common.expectChartAtUrlToMatchScreenshot(
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=area&knob-dataset=ordinal&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=none&knob-Explicit valuve (using Fit.Explicit)=8`,
+          );
+        });
+      });
+    });
+
+    describe('Line charts - no endValue', () => {
+      Object.values(Fit).forEach((fitType) => {
+        it(`should display correct fit for type - ${fitType}`, async () => {
+          await common.expectChartAtUrlToMatchScreenshot(
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=line&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=none&knob-Explicit valuve (using Fit.Explicit)=8`,
+          );
+        });
+      });
+    });
+
+    describe('Line charts - endValue set to 2', () => {
+      Object.values(Fit).forEach((fitType) => {
+        it(`should display correct fit for type - ${fitType}`, async () => {
+          await common.expectChartAtUrlToMatchScreenshot(
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=line&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=2&knob-Explicit valuve (using Fit.Explicit)=8`,
+          );
+        });
+      });
+    });
+
+    describe('Line charts - with curve - endValue set to 2', () => {
+      Object.values(Fit).forEach((fitType) => {
+        it(`should display correct fit for type - ${fitType}`, async () => {
+          await common.expectChartAtUrlToMatchScreenshot(
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=line&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=1&knob-End value=2&knob-Explicit valuve (using Fit.Explicit)=8`,
+          );
+        });
+      });
+    });
+  });
+});

jest.config.js

@@ -2,7 +2,9 @@ module.exports = {
   roots: ['<rootDir>/src'],
   preset: 'ts-jest',
   testEnvironment: 'jest-environment-jsdom-fourteen',
-  setupFilesAfterEnv: ['<rootDir>/scripts/setup_enzyme.ts'],
+  setupFilesAfterEnv: ['jest-extended', '<rootDir>/scripts/setup_enzyme.ts', '<rootDir>/scripts/custom_matchers.ts'],
+  coveragePathIgnorePatterns: ['<rootDir>/src/mocks/', '<rootDir>/node_modules/'],
+  clearMocks: true,
   globals: {
     'ts-jest': {
       tsConfig: 'tsconfig.jest.json',

package.json

@@ -25,18 +25,18 @@
     "storybook:build": "rm -rf .out && build-storybook -c .storybook -o .out",
     "lint": "eslint --ext .tsx,.ts,.js src/ stories/ scripts/ .storybook/ .playground/",
     "lint:fix": "yarn lint --fix",
-    "test": "jest --config jest.config.js",
+    "test": "jest --verbose --config jest.config.js",
     "test:tz": "yarn test:tz-utc && yarn test:tz-ny && yarn test:tz-jp",
-    "test:tz-utc": "TZ=UTC jest --config=jest.tz.config.js",
-    "test:tz-ny": "TZ=America/New_York jest --config=jest.tz.config.js",
-    "test:tz-jp": "TZ=Asia/Tokyo jest --config=jest.tz.config.js",
+    "test:tz-utc": "TZ=UTC jest --verbose --config=jest.tz.config.js",
+    "test:tz-ny": "TZ=America/New_York jest --verbose --config=jest.tz.config.js",
+    "test:tz-jp": "TZ=Asia/Tokyo jest --verbose --config=jest.tz.config.js",
     "watch": "yarn test --watch",
     "semantic-release": "semantic-release",
     "typecheck:src": "yarn build:ts --noEmit",
     "typecheck:all": "tsc -p ./tsconfig.json --noEmit",
     "playground": "cd .playground && webpack-dev-server",
     "playground:ie": "cd .playground && webpack-dev-server --host=0.0.0.0 --disable-host-check --useLocalIp",
-    "jest:integration": "TZ=UTC JEST_PUPPETEER_CONFIG=integration/jest-puppeteer.config.js jest --rootDir=integration -c=integration/jest.config.js --runInBand"
+    "jest:integration": "TZ=UTC JEST_PUPPETEER_CONFIG=integration/jest-puppeteer.config.js jest --verbose --rootDir=integration -c=integration/jest.config.js --runInBand"
   },
   "files": [
     "dist/**/*",
@@ -109,9 +109,12 @@
     "husky": "^1.3.1",
     "jest": "^24.9.0",
     "jest-environment-jsdom-fourteen": "^0.1.0",
+    "jest-extended": "^0.11.2",
     "jest-image-snapshot": "^2.11.0",
+    "jest-matcher-utils": "^24.9.0",
     "jest-puppeteer": "^4.3.0",
     "jest-puppeteer-docker": "^1.2.0",
+    "lodash": "^4.17.15",
     "lorem-ipsum": "^2.0.3",
     "luxon": "^1.11.3",
     "moment-timezone": "^0.5.27",
@@ -131,6 +134,7 @@
     "ts-jest": "^24.1.0",
     "ts-loader": "^6.1.2",
     "typescript": "^3.6.3",
+    "utility-types": "^3.8.0",
     "webpack": "^4.29.5",
     "webpack-cli": "^3.3.1",
     "webpack-dev-server": "^3.3.1"