diff --git a/CHANGELOG.md b/CHANGELOG.md index a41c313294..aa548fe9ac 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/api/charts.api.md b/api/charts.api.md index f4b23fe262..3797a95ec7 100644 --- a/api/charts.api.md +++ b/api/charts.api.md @@ -621,7 +621,7 @@ export const DEFAULT_TOOLTIP_SNAP = true; export const DEFAULT_TOOLTIP_TYPE: "vertical"; // @public (undocumented) -export type DefaultSettingsProps = 'id' | 'chartType' | 'specType' | 'rendering' | 'rotation' | 'resizeDebounce' | 'animateData' | 'debug' | 'tooltip' | 'theme' | 'hideDuplicateAxes' | 'brushAxis' | 'minBrushDelta' | 'externalPointerEvents' | 'showLegend' | 'showLegendExtra' | 'legendPosition' | 'legendMaxDepth'; +export type DefaultSettingsProps = 'id' | 'chartType' | 'specType' | 'rendering' | 'rotation' | 'resizeDebounce' | 'animateData' | 'debug' | 'tooltip' | 'theme' | 'hideDuplicateAxes' | 'brushAxis' | 'minBrushDelta' | 'externalPointerEvents' | 'showLegend' | 'showLegendExtra' | 'legendPosition' | 'legendMaxDepth' | 'description' | 'useDefaultSummary'; // @public (undocumented) export const DEPTH_KEY = "depth"; @@ -1743,6 +1743,7 @@ export interface SettingsSpec extends Spec, LegendSpec { debug: boolean; // @alpha debugState?: boolean; + description?: string; // @alpha externalPointerEvents: ExternalPointerEventsSettings; hideDuplicateAxes: boolean; @@ -1773,6 +1774,7 @@ export interface SettingsSpec extends Spec, LegendSpec { roundHistogramBrushValues?: boolean; theme?: PartialTheme | PartialTheme[]; tooltip: TooltipSettings; + useDefaultSummary: boolean; // (undocumented) xDomain?: CustomXDomain; } diff --git a/integration/page_objects/common.ts b/integration/page_objects/common.ts index 71983806e1..8db68687b7 100644 --- a/integration/page_objects/common.ts +++ b/integration/page_objects/common.ts @@ -474,6 +474,16 @@ class CommonPage { }); return accessibilitySnapshot; } + + /** + * Get HTML for element to test aria labels etc + */ + // eslint-disable-next-line class-methods-use-this + async getElementHTML(url: string) { + await this.loadElementFromURL(url); + // https://github.com/puppeteer/puppeteer/issues/406#issuecomment-323555639 + return await page.evaluate(() => new XMLSerializer().serializeToString(document)); + } } export const common = new CommonPage(); diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-use-default-group-domain-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-use-default-group-domain-visually-looks-correct-1-snap.png new file mode 100644 index 0000000000..ffeffd75c0 Binary files /dev/null and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-use-default-group-domain-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-add-custom-description-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-add-custom-description-visually-looks-correct-1-snap.png new file mode 100644 index 0000000000..4d6061f750 Binary files /dev/null and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-add-custom-description-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-legend-scroll-bar-sizing-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-legend-scroll-bar-sizing-visually-looks-correct-1-snap.png new file mode 100644 index 0000000000..09ba4ae302 Binary files /dev/null and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-legend-scroll-bar-sizing-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png index c2b710b122..2ea28c8ce0 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png differ diff --git a/package.json b/package.json index 2a52f15b7f..2c917f354e 100644 --- a/package.json +++ b/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 ", "license": "Apache-2.0", "main": "dist/index.js", diff --git a/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx b/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx index 40a174a841..e9b35ea5db 100644 --- a/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx +++ b/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx @@ -25,6 +25,7 @@ import { LegendItem } from '../../../../common/legend'; import { onChartRendered } from '../../../../state/actions/chart'; import { GlobalChartState } from '../../../../state/chart_state'; import { getChartContainerDimensionsSelector } from '../../../../state/selectors/get_chart_container_dimensions'; +import { getChartIdSelector } from '../../../../state/selectors/get_chart_id'; import { getChartRotationSelector } from '../../../../state/selectors/get_chart_rotation'; import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme'; import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized'; @@ -78,6 +79,9 @@ export interface ReactiveChartStateProps { annotationSpecs: AnnotationSpec[]; panelGeoms: PanelGeoms; seriesTypes: Set; + description?: string; + useDefaultSummary: boolean; + chartId: string; } interface ReactiveChartDispatchProps { @@ -155,6 +159,9 @@ class XYChartComponent extends React.Component { isChartEmpty, chartContainerDimensions: { width, height }, seriesTypes, + description, + useDefaultSummary, + chartId, } = this.props; if (!initialized || isChartEmpty) { @@ -164,7 +171,7 @@ class XYChartComponent extends React.Component { const chartSeriesTypes = seriesTypes.size > 1 ? `Mixed chart: ${[...seriesTypes].join(' and ')} chart` : `${[...seriesTypes]} chart`; - + const chartIdDescription = `${chartId}--description`; return (
{ }} // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role role="presentation" + {...(description ? { 'aria-describedby': chartIdDescription } : {})} > -
-
Chart type
-
{chartSeriesTypes}
-
+ {(description || useDefaultSummary) && ( +
+ {description &&

{description}

} + {useDefaultSummary && ( +
+
Chart type
+
{chartSeriesTypes}
+
+ )} +
+ )}
); @@ -237,6 +252,9 @@ const DEFAULT_PROPS: ReactiveChartStateProps = { annotationSpecs: [], panelGeoms: [], seriesTypes: new Set(), + description: undefined, + useDefaultSummary: true, + chartId: '', }; const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => { @@ -245,11 +263,12 @@ const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => { } const { geometries, geometriesIndex } = computeSeriesGeometriesSelector(state); + const { debug, description, useDefaultSummary } = getSettingsSpecSelector(state); return { initialized: true, isChartEmpty: isChartEmptySelector(state), - debug: getSettingsSpecSelector(state).debug, + debug, geometries, geometriesIndex, theme: getChartThemeSelector(state), @@ -266,6 +285,9 @@ const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => { annotationSpecs: getAnnotationSpecsSelector(state), panelGeoms: computePanelsSelectors(state), seriesTypes: getSeriesTypes(state), + description, + useDefaultSummary, + chartId: getChartIdSelector(state), }; }; diff --git a/src/chart_types/xy_chart/state/chart_state.a11y.test.ts b/src/chart_types/xy_chart/state/chart_state.a11y.test.ts new file mode 100644 index 0000000000..cc296f7c06 --- /dev/null +++ b/src/chart_types/xy_chart/state/chart_state.a11y.test.ts @@ -0,0 +1,76 @@ +/* + * 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 { Store } from 'redux'; + +import { MockGlobalSpec, MockSeriesSpec } from '../../../mocks/specs'; +import { MockStore } from '../../../mocks/store/store'; +import { GlobalChartState } from '../../../state/chart_state'; +import { getSettingsSpecSelector } from '../../../state/selectors/get_settings_specs'; + +describe('custom description for screen readers', () => { + let store: Store; + beforeEach(() => { + store = MockStore.default(); + MockStore.addSpecs( + [ + MockSeriesSpec.bar({ + data: [ + { x: 1, y: 10 }, + { x: 2, y: 5 }, + ], + }), + MockGlobalSpec.settings(), + ], + store, + ); + }); + it('should test defaults', () => { + const state = store.getState(); + const { description, useDefaultSummary } = getSettingsSpecSelector(state); + expect(description).toBeUndefined(); + expect(useDefaultSummary).toBeTrue(); + }); + it('should allow user to set a custom description for chart', () => { + MockStore.addSpecs( + [ + MockGlobalSpec.settings({ + description: 'This is sample Kibana data', + }), + ], + store, + ); + const state = store.getState(); + const { description } = getSettingsSpecSelector(state); + expect(description).toBe('This is sample Kibana data'); + }); + it('should be able to disable generated descriptions', () => { + MockStore.addSpecs( + [ + MockGlobalSpec.settings({ + useDefaultSummary: false, + }), + ], + store, + ); + const state = store.getState(); + const { useDefaultSummary } = getSettingsSpecSelector(state); + expect(useDefaultSummary).toBe(false); + }); +}); diff --git a/src/chart_types/xy_chart/state/selectors/get_api_scale_configs.test.ts b/src/chart_types/xy_chart/state/selectors/get_api_scale_configs.test.ts new file mode 100644 index 0000000000..60c532d8ae --- /dev/null +++ b/src/chart_types/xy_chart/state/selectors/get_api_scale_configs.test.ts @@ -0,0 +1,94 @@ +/* + * 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 { MockGlobalSpec, MockSeriesSpec } from '../../../../mocks/specs/specs'; +import { MockStore } from '../../../../mocks/store/store'; +import { DEFAULT_GLOBAL_ID } from '../../utils/specs'; +import { computeSeriesGeometriesSelector } from './compute_series_geometries'; +import { getScaleConfigsFromSpecsSelector } from './get_api_scale_configs'; + +describe('GroupIds and useDefaultGroupId', () => { + it('use the specified useDefaultGroupId to compute scale configs', () => { + const store = MockStore.default(); + MockStore.addSpecs( + [ + MockSeriesSpec.bar({ + groupId: 'other', + useDefaultGroupDomain: 'a different one', + }), + ], + store, + ); + const scaleConfigs = getScaleConfigsFromSpecsSelector(store.getState()); + expect(scaleConfigs.y['a different one']).toBeDefined(); + }); + + it('have 2 different y domains with 2 groups', () => { + const store = MockStore.default(); + MockStore.addSpecs( + [ + MockSeriesSpec.bar({ id: 'one' }), + MockSeriesSpec.bar({ + id: 'two', + groupId: 'other', + useDefaultGroupDomain: 'a different one', + }), + ], + store, + ); + const scaleConfigs = getScaleConfigsFromSpecsSelector(store.getState()); + expect(Object.keys(scaleConfigs.y)).toHaveLength(2); + expect(scaleConfigs.y['a different one']).toBeDefined(); + expect(scaleConfigs.y[DEFAULT_GLOBAL_ID]).toBeDefined(); + }); + + it('have 2 different y domains with 3 groups', () => { + const store = MockStore.default({ width: 120, height: 100, left: 0, top: 0 }); + MockStore.addSpecs( + [ + MockGlobalSpec.settingsNoMargins(), + MockSeriesSpec.bar({ id: 'one', data: [{ x: 1, y: 10 }] }), + MockSeriesSpec.bar({ + id: 'two', + groupId: 'other', + useDefaultGroupDomain: 'a different one', + data: [{ x: 1, y: 10 }], + }), + MockSeriesSpec.bar({ + id: 'three', + groupId: 'another again', + useDefaultGroupDomain: 'a different one', + data: [{ x: 1, y: 10 }], + }), + ], + store, + ); + const scaleConfigs = getScaleConfigsFromSpecsSelector(store.getState()); + expect(Object.keys(scaleConfigs.y)).toHaveLength(2); + expect(scaleConfigs.y['a different one']).toBeDefined(); + expect(scaleConfigs.y[DEFAULT_GLOBAL_ID]).toBeDefined(); + + const geoms = computeSeriesGeometriesSelector(store.getState()); + const { bars } = geoms.geometries; + expect(bars).toHaveLength(3); + expect(bars[0].value[0].width).toBe(40); + expect(bars[1].value[0].width).toBe(40); + expect(bars[2].value[0].width).toBe(40); + }); +}); diff --git a/src/chart_types/xy_chart/state/selectors/get_api_scale_configs.ts b/src/chart_types/xy_chart/state/selectors/get_api_scale_configs.ts index c66aa1077d..ecec96bd0e 100644 --- a/src/chart_types/xy_chart/state/selectors/get_api_scale_configs.ts +++ b/src/chart_types/xy_chart/state/selectors/get_api_scale_configs.ts @@ -33,6 +33,7 @@ import { isHorizontalAxis, isVerticalAxis } from '../../utils/axis_type_utils'; import { groupBy } from '../../utils/group_data_series'; import { AxisSpec, BasicSeriesSpec, CustomXDomain, XScaleType, YDomainRange } from '../../utils/specs'; import { isHorizontalRotation } from '../utils/common'; +import { getSpecDomainGroupId } from '../utils/spec'; import { getAxisSpecsSelector, getSeriesSpecsSelector } from './get_specs'; import { mergeYCustomDomainsByGroupId } from './merge_y_custom_domains'; @@ -83,14 +84,15 @@ export function getScaleConfigsFromSpecs( }; // y axes - const scaleConfigsByGroupId = groupBy(seriesSpecs, ['groupId'], true).reduce< + const scaleConfigsByGroupId = groupBy(seriesSpecs, getSpecDomainGroupId, true).reduce< Record >((acc, series) => { const yScaleTypes = series.map(({ yScaleType, yNice }) => ({ nice: getYNiceFromSpec(yNice), type: getYScaleTypeFromSpec(yScaleType), })); - acc[series[0].groupId] = coerceYScaleTypes(yScaleTypes); + const groupId = getSpecDomainGroupId(series[0]); + acc[groupId] = coerceYScaleTypes(yScaleTypes); return acc; }, {}); diff --git a/src/components/__snapshots__/chart.test.tsx.snap b/src/components/__snapshots__/chart.test.tsx.snap index 6c1e2f571a..995341dbc1 100644 --- a/src/components/__snapshots__/chart.test.tsx.snap +++ b/src/components/__snapshots__/chart.test.tsx.snap @@ -54,7 +54,7 @@ exports[`Chart should render the legend name test 1`] = ` - + @@ -72,17 +72,19 @@ exports[`Chart should render the legend name test 1`] = ` - +
-
-
- Chart type -
-
- bar chart -
-
+
+
+
+ Chart type +
+
+ bar chart +
+
+
diff --git a/src/specs/constants.ts b/src/specs/constants.ts index ed3f70674f..f6c7c98b19 100644 --- a/src/specs/constants.ts +++ b/src/specs/constants.ts @@ -155,6 +155,7 @@ export const DEFAULT_SETTINGS_SPEC: SettingsSpec = { baseTheme: LIGHT_THEME, brushAxis: BrushAxis.X, minBrushDelta: 2, + useDefaultSummary: true, ...DEFAULT_LEGEND_CONFIG, }; diff --git a/src/specs/settings.tsx b/src/specs/settings.tsx index 5eda362448..44ac0599e7 100644 --- a/src/specs/settings.tsx +++ b/src/specs/settings.tsx @@ -548,6 +548,15 @@ export interface SettingsSpec extends Spec, LegendSpec { * Render component for no results UI */ noResults?: ComponentType | ReactChild; + /** + * User can provide a custom description to be read by a screen reader about their chart + */ + description?: string; + /** + * Disable the automated charts series types from being provided for screen readers + * @defaultValue true + */ + useDefaultSummary: boolean; } /** @@ -608,7 +617,9 @@ export type DefaultSettingsProps = | 'showLegend' | 'showLegendExtra' | 'legendPosition' - | 'legendMaxDepth'; + | 'legendMaxDepth' + | 'description' + | 'useDefaultSummary'; /** @public */ export type SettingsSpecProps = Partial>; diff --git a/src/state/selectors/get_legend_size.ts b/src/state/selectors/get_legend_size.ts index 10b15b84ad..26ce650420 100644 --- a/src/state/selectors/get_legend_size.ts +++ b/src/state/selectors/get_legend_size.ts @@ -33,7 +33,7 @@ import { getLegendItemsLabelsSelector } from './get_legend_items_labels'; const getParentDimensionSelector = (state: GlobalChartState) => state.parentDimensions; -const SCROLL_BAR_WIDTH = 6; // ~1em +const SCROLL_BAR_WIDTH = 16; // ~1em const MARKER_WIDTH = 16; const SHARED_MARGIN = 4; const VERTICAL_PADDING = 4; diff --git a/stories/bar/56_test_use_dfl_gdomain.tsx b/stories/bar/56_test_use_dfl_gdomain.tsx new file mode 100644 index 0000000000..0c308bc77d --- /dev/null +++ b/stories/bar/56_test_use_dfl_gdomain.tsx @@ -0,0 +1,52 @@ +/* + * 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 React from 'react'; + +import { Axis, BarSeries, Chart, Position, ScaleType } from '../../src'; + +export const Example = () => { + return ( + + + + + + + ); +}; diff --git a/stories/bar/bars.stories.tsx b/stories/bar/bars.stories.tsx index c492126d2d..b79a058670 100644 --- a/stories/bar/bars.stories.tsx +++ b/stories/bar/bars.stories.tsx @@ -85,3 +85,4 @@ export { Example as testMinHeightPositiveAndNegativeValues } from './46_test_min export { Example as testTooltipAndRotation } from './48_test_tooltip'; export { Example as tooltipBoundary } from './55_tooltip_boundary'; export { Example as testDualYAxis } from './49_test_dual_axis'; +export { Example as testUseDefaultGroupDomain } from './56_test_use_dfl_gdomain'; diff --git a/stories/mosaic/10_mosaic_simple.tsx b/stories/mosaic/10_mosaic_simple.tsx index 8a0bf240d7..af3289c283 100644 --- a/stories/mosaic/10_mosaic_simple.tsx +++ b/stories/mosaic/10_mosaic_simple.tsx @@ -17,7 +17,7 @@ * under the License. */ -import { boolean } from '@storybook/addon-knobs'; +import { boolean, radios } from '@storybook/addon-knobs'; import React from 'react'; import { @@ -62,6 +62,15 @@ const productToColor = new Map( ); export const Example = () => { + const partitionLayout = radios( + 'Partition layout', + { + [PartitionLayout.mosaic]: PartitionLayout.mosaic, + [PartitionLayout.treemap]: PartitionLayout.treemap, + [PartitionLayout.sunburst]: PartitionLayout.sunburst, + }, + PartitionLayout.mosaic, + ); return ( @@ -78,7 +87,7 @@ export const Example = () => { fontWeight: 400, }, shape: { - fillColor: () => 'white', + fillColor: partitionLayout === PartitionLayout.sunburst ? 'lightgrey' : 'white', }, }, { @@ -103,7 +112,9 @@ export const Example = () => { }, ]} config={{ - partitionLayout: PartitionLayout.mosaic, + partitionLayout, + linkLabel: { maxCount: 0 }, // relevant for sunburst only + outerSizeRatio: 0.9, // relevant for sunburst only }} /> diff --git a/stories/test_cases/5_legend_scroll_bar_sizing.tsx b/stories/test_cases/5_legend_scroll_bar_sizing.tsx new file mode 100644 index 0000000000..8b62ddbe32 --- /dev/null +++ b/stories/test_cases/5_legend_scroll_bar_sizing.tsx @@ -0,0 +1,89 @@ +/* + * 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 React from 'react'; + +import { Chart, Axis, Position, BarSeries, ScaleType, Settings } from '../../src'; + +const data = [ + { g: 'AE', x: '2021-04-06 00:00', y: 1 }, + { g: 'AE', x: '2021-04-06 03:00', y: 0 }, + { g: 'AF', x: '2021-04-07 06:00', y: 1 }, + { g: 'AF', x: '2021-04-07 09:00', y: 0 }, + { g: 'AM', x: '2021-04-10 09:00', y: 1 }, + { g: 'AO', x: '2021-04-07 09:00', y: 1 }, + { g: 'AO', x: '2021-04-07 12:00', y: 0 }, + { g: 'AR', x: '2021-04-07 03:00', y: 1 }, + { g: 'AR', x: '2021-04-07 06:00', y: 0 }, + { g: 'AT', x: '2021-04-12 03:00', y: 1 }, + { g: 'AU', x: '2021-04-06 09:00', y: 1 }, + { g: 'AU', x: '2021-04-06 12:00', y: 0 }, + { g: 'AZ', x: '2021-04-10 15:00', y: 1 }, + { g: 'AZ', x: '2021-04-10 18:00', y: 0 }, + { g: 'BA', x: '2021-04-09 06:00', y: 1 }, + { g: 'BA', x: '2021-04-09 09:00', y: 0 }, + { g: 'BD', x: '2021-04-06 03:00', y: 3 }, + { g: 'BD', x: '2021-04-06 06:00', y: 2 }, + { g: 'BD', x: '2021-04-06 09:00', y: 1 }, + { g: 'BD', x: '2021-04-06 12:00', y: 0 }, + { g: 'BE', x: '2021-04-07 06:00', y: 1 }, + { g: 'BF', x: '2021-04-09 09:00', y: 1 }, + { g: 'BJ', x: '2021-04-07 15:00', y: 1 }, + { g: 'BJ', x: '2021-04-07 18:00', y: 0 }, + { g: 'BO', x: '2021-04-07 06:00', y: 1 }, + { g: 'BO', x: '2021-04-07 09:00', y: 0 }, + { g: 'BR', x: '2021-04-06 03:00', y: 3 }, + { g: 'BR', x: '2021-04-06 06:00', y: 0 }, + { g: 'BR', x: '2021-04-06 09:00', y: 2 }, + { g: 'BR', x: '2021-04-06 12:00', y: 1 }, + { g: 'BR', x: '2021-04-06 15:00', y: 0 }, + { g: 'BW', x: '2021-04-06 03:00', y: 1 }, + { g: 'BY', x: '2021-04-08 06:00', y: 1 }, + { g: 'CA', x: '2021-04-07 09:00', y: 1 }, + { g: 'CA', x: '2021-04-07 12:00', y: 0 }, + { g: 'CA', x: '2021-04-08 06:00', y: 0 }, + { g: 'CA', x: '2021-04-08 09:00', y: 2 }, + { g: 'CA', x: '2021-04-08 12:00', y: 0 }, + { g: 'CD', x: '2021-04-07 03:00', y: 1 }, + { g: 'CD', x: '2021-04-07 06:00', y: 1 }, + { g: 'CD', x: '2021-04-07 09:00', y: 1 }, + { g: 'CD', x: '2021-04-07 12:00', y: 0 }, + { g: 'CG', x: '2021-04-12 06:00', y: 1 }, +]; + +/** + * Should filter out zero values when fitting domain + */ +export const Example = () => { + return ( + + + + + + + ); +}; diff --git a/stories/test_cases/6_a11y_custom_description.tsx b/stories/test_cases/6_a11y_custom_description.tsx new file mode 100644 index 0000000000..118a27b57f --- /dev/null +++ b/stories/test_cases/6_a11y_custom_description.tsx @@ -0,0 +1,42 @@ +/* + * 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 { boolean, text } from '@storybook/addon-knobs'; +import React from 'react'; + +import { AreaSeries, Chart, ScaleType, Settings } from '../../src'; +import { KIBANA_METRICS } from '../../src/utils/data_samples/test_dataset_kibana'; + +export const Example = () => { + const automatedSeries = boolean('Use the default generated series types of charts for screen readers', true); + const customDescriptionForScreenReaders = text('custom description for screen readers', ''); + return ( + + + + + ); +}; diff --git a/stories/test_cases/test_cases.stories.tsx b/stories/test_cases/test_cases.stories.tsx index 816243fb2e..b9c2885a71 100644 --- a/stories/test_cases/test_cases.stories.tsx +++ b/stories/test_cases/test_cases.stories.tsx @@ -30,3 +30,5 @@ export { Example as noSeries } from './1_no_series'; export { Example as chromePathBugFix } from './2_chrome_path_bug_fix'; export { Example as noAxesAnnotationBugFix } from './3_no_axes_annotation'; export { Example as filterZerosInLogFitDomain } from './4_filter_zero_values_log'; +export { Example as legendScrollBarSizing } from './5_legend_scroll_bar_sizing'; +export { Example as addCustomDescription } from './6_a11y_custom_description';