Merge remote-tracking branch 'upstream/master' into pass-labels

CHANGELOG.md

@@ -1,3 +1,21 @@
+# [28.1.0](https://github.com/elastic/elastic-charts/compare/v28.0.1...v28.1.0) (2021-04-13)
+
+
+### Bug Fixes
+
+* **legend:** sizing for short labels with scrollbar ([#1115](https://github.com/elastic/elastic-charts/issues/1115)) ([6e1f223](https://github.com/elastic/elastic-charts/commit/6e1f223d5126c2707101d269ebaa5dc117ac61c4))
+* **xy:** negative bar highlight and click ([#1109](https://github.com/elastic/elastic-charts/issues/1109)) ([ec17cb2](https://github.com/elastic/elastic-charts/commit/ec17cb2eb2f13e0be4370a2dc89d3872f9b6de5a)), closes [#1100](https://github.com/elastic/elastic-charts/issues/1100)
+
+
+### Features
+
+* **a11y:** improve chart figure ([#1104](https://github.com/elastic/elastic-charts/issues/1104)) ([815cf39](https://github.com/elastic/elastic-charts/commit/815cf39873e3e1f0a526dd88bb06c2b87f22f9e8))
+* **partition:** order slices and sectors ([#1112](https://github.com/elastic/elastic-charts/issues/1112)) ([74df29b](https://github.com/elastic/elastic-charts/commit/74df29b5554eaa5b88c670c71321ce676683da6f))
+* **partitions:** small multipies events pass on smAccessorValue ([#1106](https://github.com/elastic/elastic-charts/issues/1106)) ([a3234fe](https://github.com/elastic/elastic-charts/commit/a3234feee9e579cf7bdb21d487f80c8200a0fa73))
+* **xy:** optionally rounds the domain to nice values ([#1087](https://github.com/elastic/elastic-charts/issues/1087)) ([f644cc4](https://github.com/elastic/elastic-charts/commit/f644cc4653bf4bea3180057b981f80bdcabee00f))
+* **xy:** specify pixel and ratio width for bars ([#1114](https://github.com/elastic/elastic-charts/issues/1114)) ([58de413](https://github.com/elastic/elastic-charts/commit/58de413564a5f0b9a8bef9f5cb2119cdde18794f))
+* mosaic ([#1113](https://github.com/elastic/elastic-charts/issues/1113)) ([64bdd88](https://github.com/elastic/elastic-charts/commit/64bdd88836210a4c4c997dc207859c3fbd773d80))
+
 ## [28.0.1](https://github.com/elastic/elastic-charts/compare/v28.0.0...v28.0.1) (2021-04-06)
 
 

api/charts.api.md

@@ -1562,6 +1562,8 @@ export interface RectBorderStyle {
 export interface RectStyle {
     fill?: Color | ColorVariant;
     opacity: number;
+    widthPixel?: Pixels;
+    widthRatio?: Ratio;
 }
 
 // @public
@@ -1678,7 +1680,9 @@ export type SeriesNameFn = (series: XYChartSeriesIdentifier, isTooltip: boolean)
 // @public (undocumented)
 export interface SeriesScales {
     timeZone?: string;
+    xNice?: boolean;
     xScaleType: XScaleType;
+    yNice?: boolean;
     // @deprecated
     yScaleToDataExtent?: boolean;
     yScaleType: ScaleContinuousType;

integration/tests/bar_stories.test.ts

@@ -227,4 +227,21 @@ describe('Bar series stories', () => {
       );
     });
   });
+  describe('custom bar width', () => {
+    it('pixel size', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/stylings--custom-series-styles-bars&knob-apply bar style (bar 1 series)_Chart Global Theme=true&knob-enable custom rect width (px)_Bar width=true&knob-rect width (px)_Bar width=15&knob-enable custom rect width (ratio)_Bar width=&knob-rect width (ratio)_Bar width=0.5&knob-border stroke_Bar 1 Style=blue&knob-border strokeWidth_Bar 1 Style=2&knob-border visible_Bar 1 Style=true&knob-rect fill_Bar 1 Style=#22C61A&knob-rect opacity_Bar 1 Style=0.3&knob-theme border stroke_Chart Global Theme=red&knob-theme border strokeWidth_Chart Global Theme=2&knob-theme border visible_Chart Global Theme=true&knob-theme opacity _Chart Global Theme=0.9',
+      );
+    });
+    it('ratio size', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/stylings--custom-series-styles-bars&knob-apply bar style (bar 1 series)_Chart Global Theme=true&knob-enable custom rect width (px)_Bar width=&knob-rect width (px)_Bar width=30&knob-enable custom rect width (ratio)_Bar width=true&knob-rect width (ratio)_Bar width=0.5&knob-border stroke_Bar 1 Style=blue&knob-border strokeWidth_Bar 1 Style=2&knob-border visible_Bar 1 Style=true&knob-rect fill_Bar 1 Style=#22C61A&knob-rect opacity_Bar 1 Style=0.3&knob-theme border stroke_Chart Global Theme=red&knob-theme border strokeWidth_Chart Global Theme=2&knob-theme border visible_Chart Global Theme=true&knob-theme opacity _Chart Global Theme=0.9',
+      );
+    });
+    it('pixel and ratio size', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/stylings--custom-series-styles-bars&knob-apply bar style (bar 1 series)_Chart Global Theme=true&knob-enable custom rect width (px)_Bar width=true&knob-rect width (px)_Bar width=40&knob-enable custom rect width (ratio)_Bar width=true&knob-rect width (ratio)_Bar width=0.2&knob-border stroke_Bar 1 Style=blue&knob-border strokeWidth_Bar 1 Style=2&knob-border visible_Bar 1 Style=true&knob-rect fill_Bar 1 Style=#22C61A&knob-rect opacity_Bar 1 Style=0.3&knob-theme border stroke_Chart Global Theme=red&knob-theme border strokeWidth_Chart Global Theme=2&knob-theme border visible_Chart Global Theme=true&knob-theme opacity _Chart Global Theme=0.9',
+      );
+    });
+  });
 });

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/charts",
   "description": "Elastic-Charts data visualization library",
-  "version": "28.0.1",
+  "version": "28.1.0",
   "author": "Marco Vettorello <[email protected]>",
   "license": "Apache-2.0",
   "main": "dist/index.js",

src/chart_types/heatmap/layout/viewmodel/viewmodel.ts

@@ -110,15 +110,16 @@ export function shapeViewModel(
   let xValues = xDomain.domain as any[];
 
   const timeScale =
-    xDomain.scaleType === ScaleType.Time
+    xDomain.type === ScaleType.Time
       ? new ScaleContinuous(
           {
             type: ScaleType.Time,
             domain: xDomain.domain,
             range: [0, chartDimensions.width],
+            nice: false,
           },
           {
-            ticks: getTicks(chartDimensions.width, config.xAxisLabel),
+            desiredTickCount: getTicks(chartDimensions.width, config.xAxisLabel),
             timeZone: config.timeZone,
           },
         )
@@ -315,7 +316,7 @@ export function shapeViewModel(
    * @param y
    */
   const pickHighlightedArea: PickHighlightedArea = (x: Array<string | number>, y: Array<string | number>) => {
-    if (xDomain.scaleType !== ScaleType.Time) {
+    if (xDomain.type !== ScaleType.Time) {
       return null;
     }
     const [startValue, endValue] = x;

src/chart_types/heatmap/specs/heatmap.ts

@@ -29,6 +29,7 @@ import { Accessor, AccessorFn } from '../../../utils/accessor';
 import { Color, Datum, RecursivePartial } from '../../../utils/common';
 import { config } from '../layout/config/config';
 import { Config } from '../layout/types/config_types';
+import { X_SCALE_DEFAULT } from './scale_defaults';
 
 const defaultProps = {
   chartType: ChartType.Heatmap,
@@ -38,7 +39,7 @@ const defaultProps = {
   colorScale: ScaleType.Linear,
   xAccessor: ({ x }: { x: string | number }) => x,
   yAccessor: ({ y }: { y: string | number }) => y,
-  xScaleType: ScaleType.Ordinal,
+  xScaleType: X_SCALE_DEFAULT.type,
   valueAccessor: ({ value }: { value: string | number }) => value,
   valueFormatter: (value: number) => `${value}`,
   xSortPredicate: Predicate.AlphaAsc,

src/chart_types/heatmap/specs/scale_defaults.ts

@@ -0,0 +1,27 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ScaleType } from '../../../scales/constants';
+
+/** @internal */
+export const X_SCALE_DEFAULT = {
+  type: ScaleType.Ordinal,
+  nice: false,
+  desiredTickCount: 10,
+};

src/chart_types/heatmap/state/selectors/get_heatmap_table.ts

@@ -25,6 +25,8 @@ import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
 import { getAccessorValue } from '../../../../utils/accessor';
 import { mergeXDomain } from '../../../xy_chart/domains/x_domain';
+import { getXNiceFromSpec, getXScaleTypeFromSpec } from '../../../xy_chart/scales/get_api_scales';
+import { X_SCALE_DEFAULT } from '../../specs/scale_defaults';
 import { HeatmapTable } from './compute_chart_dimensions';
 import { getHeatmapSpecSelector } from './get_heatmap_spec';
 
@@ -73,7 +75,16 @@ export const getHeatmapTableSelector = createCachedSelector(
       },
     );
 
-    resultData.xDomain = mergeXDomain([{ xScaleType: spec.xScaleType }], resultData.xValues, xDomain);
+    resultData.xDomain = mergeXDomain(
+      {
+        type: getXScaleTypeFromSpec(spec.xScaleType),
+        nice: getXNiceFromSpec(),
+        isBandScale: false,
+        desiredTickCount: X_SCALE_DEFAULT.desiredTickCount,
+        customDomain: xDomain,
+      },
+      resultData.xValues,
+    );
 
     // sort values by their predicates
     if (spec.xScaleType === ScaleType.Ordinal) {

src/chart_types/heatmap/state/selectors/get_x_axis_right_overflow.ts

@@ -33,7 +33,7 @@ import { getHeatmapTableSelector } from './get_heatmap_table';
 export const getXAxisRightOverflow = createCachedSelector(
   [getHeatmapConfigSelector, getHeatmapTableSelector],
   ({ xAxisLabel: { fontSize, fontFamily, padding, formatter, width }, timeZone }, { xDomain }): number => {
-    if (xDomain.scaleType !== ScaleType.Time) {
+    if (xDomain.type !== ScaleType.Time) {
       return 0;
     }
     if (typeof width === 'number') {

src/chart_types/xy_chart/crosshair/crosshair_utils.linear_snap.test.ts

@@ -18,9 +18,12 @@
  */
 
 import { ChartType } from '../..';
+import { MockGlobalSpec } from '../../../mocks/specs/specs';
+import { MockXDomain } from '../../../mocks/xy/domains';
 import { ScaleType } from '../../../scales/constants';
 import { SpecType } from '../../../specs/constants';
 import { Dimensions } from '../../../utils/dimensions';
+import { getScaleConfigsFromSpecs } from '../state/selectors/get_api_scale_configs';
 import { computeSeriesDomains } from '../state/utils/utils';
 import { computeXScale } from '../utils/scales';
 import { BasicSeriesSpec, SeriesType } from '../utils/specs';
@@ -97,22 +100,35 @@ describe('Crosshair utils linear scale', () => {
     yScaleType: ScaleType.Linear,
   };
 
-  const domainGroup = new Map([['group1', { fit: true }]]);
-
   const barSeries = [barSeries1];
-  const barSeriesDomains = computeSeriesDomains(barSeries, domainGroup);
+  const barSeriesDomains = computeSeriesDomains(
+    barSeries,
+    getScaleConfigsFromSpecs([], barSeries, MockGlobalSpec.settings()),
+  );
 
   const multiBarSeries = [barSeries1, barSeries2];
-  const multiBarSeriesDomains = computeSeriesDomains(multiBarSeries, domainGroup);
+  const multiBarSeriesDomains = computeSeriesDomains(
+    multiBarSeries,
+    getScaleConfigsFromSpecs([], multiBarSeries, MockGlobalSpec.settings()),
+  );
 
   const lineSeries = [lineSeries1];
-  const lineSeriesDomains = computeSeriesDomains(lineSeries, domainGroup);
+  const lineSeriesDomains = computeSeriesDomains(
+    lineSeries,
+    getScaleConfigsFromSpecs([], lineSeries, MockGlobalSpec.settings()),
+  );
 
   const multiLineSeries = [lineSeries1, lineSeries2];
-  const multiLineSeriesDomains = computeSeriesDomains(multiLineSeries, domainGroup);
+  const multiLineSeriesDomains = computeSeriesDomains(
+    multiLineSeries,
+    getScaleConfigsFromSpecs([], multiLineSeries, MockGlobalSpec.settings()),
+  );
 
   const mixedLinesBars = [lineSeries1, lineSeries2, barSeries1, barSeries2];
-  const mixedLinesBarsSeriesDomains = computeSeriesDomains(mixedLinesBars, domainGroup);
+  const mixedLinesBarsSeriesDomains = computeSeriesDomains(
+    mixedLinesBars,
+    getScaleConfigsFromSpecs([], mixedLinesBars, MockGlobalSpec.settings()),
+  );
 
   const barSeriesScale = computeXScale({
     xDomain: barSeriesDomains.xDomain,
@@ -1456,13 +1472,11 @@ describe('Crosshair utils linear scale', () => {
     const chartDimensions: Dimensions = { top: 0, left: 0, width: 120, height: 120 };
     test('cursor at begin of domain', () => {
       const barSeriesScaleLimited = computeXScale({
-        xDomain: {
+        xDomain: MockXDomain.fromScaleType(ScaleType.Linear, {
           domain: [0.5, 3.5],
           isBandScale: true,
           minInterval: 1,
-          scaleType: ScaleType.Linear,
-          type: 'xDomain',
-        },
+        }),
         totalBarsInCluster: 1,
         range: [0, 120],
       });
@@ -1487,13 +1501,11 @@ describe('Crosshair utils linear scale', () => {
     });
     test('cursor at end of domain', () => {
       const barSeriesScaleLimited = computeXScale({
-        xDomain: {
+        xDomain: MockXDomain.fromScaleType(ScaleType.Linear, {
           domain: [-0.5, 2.5],
           isBandScale: true,
           minInterval: 1,
-          scaleType: ScaleType.Linear,
-          type: 'xDomain',
-        },
+        }),
         totalBarsInCluster: barSeries.length,
         range: [0, 120],
       });
@@ -1518,13 +1530,11 @@ describe('Crosshair utils linear scale', () => {
     });
     test('cursor at top begin of domain', () => {
       const barSeriesScaleLimited = computeXScale({
-        xDomain: {
+        xDomain: MockXDomain.fromScaleType(ScaleType.Linear, {
           domain: [0.5, 3.5],
           isBandScale: true,
           minInterval: 1,
-          scaleType: ScaleType.Linear,
-          type: 'xDomain',
-        },
+        }),
         totalBarsInCluster: 1,
         range: [0, 120],
       });
@@ -1549,13 +1559,11 @@ describe('Crosshair utils linear scale', () => {
     });
     test('cursor at top end of domain', () => {
       const barSeriesScaleLimited = computeXScale({
-        xDomain: {
+        xDomain: MockXDomain.fromScaleType(ScaleType.Linear, {
           domain: [-0.5, 2.5],
           isBandScale: true,
           minInterval: 1,
-          scaleType: ScaleType.Linear,
-          type: 'xDomain',
-        },
+        }),
         totalBarsInCluster: barSeries.length,
         range: [0, 120],
       });

src/chart_types/xy_chart/crosshair/crosshair_utils.ordinal_snap.test.ts

@@ -18,8 +18,10 @@
  */
 
 import { ChartType } from '../..';
+import { MockGlobalSpec } from '../../../mocks/specs/specs';
 import { ScaleType } from '../../../scales/constants';
 import { SpecType } from '../../../specs/constants';
+import { getScaleConfigsFromSpecs } from '../state/selectors/get_api_scale_configs';
 import { computeSeriesDomains } from '../state/utils/utils';
 import { computeXScale } from '../utils/scales';
 import { BasicSeriesSpec, SeriesType } from '../utils/specs';
@@ -96,22 +98,36 @@ describe('Crosshair utils ordinal scales', () => {
     yScaleType: ScaleType.Linear,
   };
 
-  const domainGroup = new Map([['group1', { fit: true }]]);
-
   const barSeries = [barSeries1];
-  const barSeriesDomains = computeSeriesDomains(barSeries, domainGroup);
+
+  const barSeriesDomains = computeSeriesDomains(
+    barSeries,
+    getScaleConfigsFromSpecs([], barSeries, MockGlobalSpec.settings()),
+  );
 
   const multiBarSeries = [barSeries1, barSeries2];
-  const multiBarSeriesDomains = computeSeriesDomains(multiBarSeries, domainGroup);
+  const multiBarSeriesDomains = computeSeriesDomains(
+    multiBarSeries,
+    getScaleConfigsFromSpecs([], multiBarSeries, MockGlobalSpec.settings()),
+  );
 
   const lineSeries = [lineSeries1];
-  const lineSeriesDomains = computeSeriesDomains(lineSeries, domainGroup);
+  const lineSeriesDomains = computeSeriesDomains(
+    lineSeries,
+    getScaleConfigsFromSpecs([], lineSeries, MockGlobalSpec.settings()),
+  );
 
   const multiLineSeries = [lineSeries1, lineSeries2];
-  const multiLineSeriesDomains = computeSeriesDomains(multiLineSeries, domainGroup);
+  const multiLineSeriesDomains = computeSeriesDomains(
+    multiLineSeries,
+    getScaleConfigsFromSpecs([], multiLineSeries, MockGlobalSpec.settings()),
+  );
 
   const mixedLinesBars = [lineSeries1, lineSeries2, barSeries1, barSeries2];
-  const mixedLinesBarsSeriesDomains = computeSeriesDomains(mixedLinesBars, domainGroup);
+  const mixedLinesBarsSeriesDomains = computeSeriesDomains(
+    mixedLinesBars,
+    getScaleConfigsFromSpecs([], mixedLinesBars, MockGlobalSpec.settings()),
+  );
 
   const barSeriesScale = computeXScale({
     xDomain: barSeriesDomains.xDomain,

src/chart_types/xy_chart/domains/nice.ts

@@ -0,0 +1,23 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/** @internal */
+export function areAllNiceDomain(nice: Array<boolean>) {
+  return nice.length > 0 && nice.every((d) => d);
+}