diff --git a/package.json b/package.json index 2553521b662be..998d54ad9eb79 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "@dnd-kit/utilities": "^2.0.0", "@elastic/apm-rum": "^5.15.0", "@elastic/apm-rum-react": "^2.0.1", - "@elastic/charts": "61.0.3", + "@elastic/charts": "61.2.0", "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1", "@elastic/ems-client": "8.5.1", diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap b/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap index afd6ce21ad36f..f797f9ba344e0 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap @@ -191,6 +191,19 @@ exports[`GaugeComponent renders the chart 1`] = ` "visible": true, }, }, + "bulletGraph": Object { + "angularTickLabelPadding": 10, + "barBackground": "#343741", + "border": "#EDF0F5", + "colorBands": Array [ + "#D9C6EF", + "#AA87D1", + ], + "fallbackBandColor": "#98A2B3", + "minHeight": 64, + "nonFiniteText": "N/A", + "textColor": "#343741", + }, "chartMargins": Object { "bottom": 0, "left": 0, @@ -510,7 +523,7 @@ exports[`GaugeComponent renders the chart 1`] = ` "tooltip": Object { "defaultDotColor": "black", "maxTableHeight": 120, - "maxWidth": 260, + "maxWidth": 500, }, } } diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap b/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap index 241e2ac6f4faf..f7c57d6e765df 100644 --- a/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap @@ -421,6 +421,19 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` "visible": true, }, }, + "bulletGraph": Object { + "angularTickLabelPadding": 10, + "barBackground": "#343741", + "border": "#EDF0F5", + "colorBands": Array [ + "#D9C6EF", + "#AA87D1", + ], + "fallbackBandColor": "#98A2B3", + "minHeight": 64, + "nonFiniteText": "N/A", + "textColor": "#343741", + }, "chartMargins": Object { "bottom": 0, "left": 0, @@ -740,7 +753,7 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` "tooltip": Object { "defaultDotColor": "black", "maxTableHeight": 120, - "maxWidth": 260, + "maxWidth": 500, }, } } @@ -1324,6 +1337,19 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] = "visible": true, }, }, + "bulletGraph": Object { + "angularTickLabelPadding": 10, + "barBackground": "#343741", + "border": "#EDF0F5", + "colorBands": Array [ + "#D9C6EF", + "#AA87D1", + ], + "fallbackBandColor": "#98A2B3", + "minHeight": 64, + "nonFiniteText": "N/A", + "textColor": "#343741", + }, "chartMargins": Object { "bottom": 0, "left": 0, @@ -1643,7 +1669,7 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] = "tooltip": Object { "defaultDotColor": "black", "maxTableHeight": 120, - "maxWidth": 260, + "maxWidth": 500, }, } } @@ -2287,6 +2313,19 @@ exports[`PartitionVisComponent should render correct structure for multi-metric "visible": true, }, }, + "bulletGraph": Object { + "angularTickLabelPadding": 10, + "barBackground": "#343741", + "border": "#EDF0F5", + "colorBands": Array [ + "#D9C6EF", + "#AA87D1", + ], + "fallbackBandColor": "#98A2B3", + "minHeight": 64, + "nonFiniteText": "N/A", + "textColor": "#343741", + }, "chartMargins": Object { "bottom": 0, "left": 0, @@ -2606,7 +2645,7 @@ exports[`PartitionVisComponent should render correct structure for multi-metric "tooltip": Object { "defaultDotColor": "black", "maxTableHeight": 120, - "maxWidth": 260, + "maxWidth": 500, }, } } @@ -3252,6 +3291,19 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = ` "visible": true, }, }, + "bulletGraph": Object { + "angularTickLabelPadding": 10, + "barBackground": "#343741", + "border": "#EDF0F5", + "colorBands": Array [ + "#D9C6EF", + "#AA87D1", + ], + "fallbackBandColor": "#98A2B3", + "minHeight": 64, + "nonFiniteText": "N/A", + "textColor": "#343741", + }, "chartMargins": Object { "bottom": 0, "left": 0, @@ -3571,7 +3623,7 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = ` "tooltip": Object { "defaultDotColor": "black", "maxTableHeight": 120, - "maxWidth": 260, + "maxWidth": 500, }, } } @@ -4155,6 +4207,19 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] = "visible": true, }, }, + "bulletGraph": Object { + "angularTickLabelPadding": 10, + "barBackground": "#343741", + "border": "#EDF0F5", + "colorBands": Array [ + "#D9C6EF", + "#AA87D1", + ], + "fallbackBandColor": "#98A2B3", + "minHeight": 64, + "nonFiniteText": "N/A", + "textColor": "#343741", + }, "chartMargins": Object { "bottom": 0, "left": 0, @@ -4474,7 +4539,7 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] = "tooltip": Object { "defaultDotColor": "black", "maxTableHeight": 120, - "maxWidth": 260, + "maxWidth": 500, }, } } @@ -5013,6 +5078,19 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] = "visible": true, }, }, + "bulletGraph": Object { + "angularTickLabelPadding": 10, + "barBackground": "#343741", + "border": "#EDF0F5", + "colorBands": Array [ + "#D9C6EF", + "#AA87D1", + ], + "fallbackBandColor": "#98A2B3", + "minHeight": 64, + "nonFiniteText": "N/A", + "textColor": "#343741", + }, "chartMargins": Object { "bottom": 0, "left": 0, @@ -5332,7 +5410,7 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] = "tooltip": Object { "defaultDotColor": "black", "maxTableHeight": 120, - "maxWidth": 260, + "maxWidth": 500, }, } } diff --git a/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap b/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap index 7f5aeab32335a..267833cba170d 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap @@ -763,6 +763,19 @@ exports[`XYChart component it renders area 1`] = ` "visible": true, }, }, + "bulletGraph": Object { + "angularTickLabelPadding": 10, + "barBackground": "#343741", + "border": "#EDF0F5", + "colorBands": Array [ + "#D9C6EF", + "#AA87D1", + ], + "fallbackBandColor": "#98A2B3", + "minHeight": 64, + "nonFiniteText": "N/A", + "textColor": "#343741", + }, "chartMargins": Object { "bottom": 0, "left": 0, @@ -1082,7 +1095,7 @@ exports[`XYChart component it renders area 1`] = ` "tooltip": Object { "defaultDotColor": "black", "maxTableHeight": 120, - "maxWidth": 260, + "maxWidth": 500, }, } } @@ -2286,6 +2299,19 @@ exports[`XYChart component it renders bar 1`] = ` "visible": true, }, }, + "bulletGraph": Object { + "angularTickLabelPadding": 10, + "barBackground": "#343741", + "border": "#EDF0F5", + "colorBands": Array [ + "#D9C6EF", + "#AA87D1", + ], + "fallbackBandColor": "#98A2B3", + "minHeight": 64, + "nonFiniteText": "N/A", + "textColor": "#343741", + }, "chartMargins": Object { "bottom": 0, "left": 0, @@ -2605,7 +2631,7 @@ exports[`XYChart component it renders bar 1`] = ` "tooltip": Object { "defaultDotColor": "black", "maxTableHeight": 120, - "maxWidth": 260, + "maxWidth": 500, }, } } @@ -3809,6 +3835,19 @@ exports[`XYChart component it renders horizontal bar 1`] = ` "visible": true, }, }, + "bulletGraph": Object { + "angularTickLabelPadding": 10, + "barBackground": "#343741", + "border": "#EDF0F5", + "colorBands": Array [ + "#D9C6EF", + "#AA87D1", + ], + "fallbackBandColor": "#98A2B3", + "minHeight": 64, + "nonFiniteText": "N/A", + "textColor": "#343741", + }, "chartMargins": Object { "bottom": 0, "left": 0, @@ -4128,7 +4167,7 @@ exports[`XYChart component it renders horizontal bar 1`] = ` "tooltip": Object { "defaultDotColor": "black", "maxTableHeight": 120, - "maxWidth": 260, + "maxWidth": 500, }, } } @@ -5332,6 +5371,19 @@ exports[`XYChart component it renders line 1`] = ` "visible": true, }, }, + "bulletGraph": Object { + "angularTickLabelPadding": 10, + "barBackground": "#343741", + "border": "#EDF0F5", + "colorBands": Array [ + "#D9C6EF", + "#AA87D1", + ], + "fallbackBandColor": "#98A2B3", + "minHeight": 64, + "nonFiniteText": "N/A", + "textColor": "#343741", + }, "chartMargins": Object { "bottom": 0, "left": 0, @@ -5651,7 +5703,7 @@ exports[`XYChart component it renders line 1`] = ` "tooltip": Object { "defaultDotColor": "black", "maxTableHeight": 120, - "maxWidth": 260, + "maxWidth": 500, }, } } @@ -6855,6 +6907,19 @@ exports[`XYChart component it renders stacked area 1`] = ` "visible": true, }, }, + "bulletGraph": Object { + "angularTickLabelPadding": 10, + "barBackground": "#343741", + "border": "#EDF0F5", + "colorBands": Array [ + "#D9C6EF", + "#AA87D1", + ], + "fallbackBandColor": "#98A2B3", + "minHeight": 64, + "nonFiniteText": "N/A", + "textColor": "#343741", + }, "chartMargins": Object { "bottom": 0, "left": 0, @@ -7174,7 +7239,7 @@ exports[`XYChart component it renders stacked area 1`] = ` "tooltip": Object { "defaultDotColor": "black", "maxTableHeight": 120, - "maxWidth": 260, + "maxWidth": 500, }, } } @@ -8378,6 +8443,19 @@ exports[`XYChart component it renders stacked bar 1`] = ` "visible": true, }, }, + "bulletGraph": Object { + "angularTickLabelPadding": 10, + "barBackground": "#343741", + "border": "#EDF0F5", + "colorBands": Array [ + "#D9C6EF", + "#AA87D1", + ], + "fallbackBandColor": "#98A2B3", + "minHeight": 64, + "nonFiniteText": "N/A", + "textColor": "#343741", + }, "chartMargins": Object { "bottom": 0, "left": 0, @@ -8697,7 +8775,7 @@ exports[`XYChart component it renders stacked bar 1`] = ` "tooltip": Object { "defaultDotColor": "black", "maxTableHeight": 120, - "maxWidth": 260, + "maxWidth": 500, }, } } @@ -9901,6 +9979,19 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = ` "visible": true, }, }, + "bulletGraph": Object { + "angularTickLabelPadding": 10, + "barBackground": "#343741", + "border": "#EDF0F5", + "colorBands": Array [ + "#D9C6EF", + "#AA87D1", + ], + "fallbackBandColor": "#98A2B3", + "minHeight": 64, + "nonFiniteText": "N/A", + "textColor": "#343741", + }, "chartMargins": Object { "bottom": 0, "left": 0, @@ -10220,7 +10311,7 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = ` "tooltip": Object { "defaultDotColor": "black", "maxTableHeight": 120, - "maxWidth": 260, + "maxWidth": 500, }, } } @@ -11454,6 +11545,19 @@ exports[`XYChart component split chart should render split chart if both, splitR "visible": true, }, }, + "bulletGraph": Object { + "angularTickLabelPadding": 10, + "barBackground": "#343741", + "border": "#EDF0F5", + "colorBands": Array [ + "#D9C6EF", + "#AA87D1", + ], + "fallbackBandColor": "#98A2B3", + "minHeight": 64, + "nonFiniteText": "N/A", + "textColor": "#343741", + }, "chartMargins": Object { "bottom": 0, "left": 0, @@ -11773,7 +11877,7 @@ exports[`XYChart component split chart should render split chart if both, splitR "tooltip": Object { "defaultDotColor": "black", "maxTableHeight": 120, - "maxWidth": 260, + "maxWidth": 500, }, } } @@ -13215,6 +13319,19 @@ exports[`XYChart component split chart should render split chart if splitColumnA "visible": true, }, }, + "bulletGraph": Object { + "angularTickLabelPadding": 10, + "barBackground": "#343741", + "border": "#EDF0F5", + "colorBands": Array [ + "#D9C6EF", + "#AA87D1", + ], + "fallbackBandColor": "#98A2B3", + "minHeight": 64, + "nonFiniteText": "N/A", + "textColor": "#343741", + }, "chartMargins": Object { "bottom": 0, "left": 0, @@ -13534,7 +13651,7 @@ exports[`XYChart component split chart should render split chart if splitColumnA "tooltip": Object { "defaultDotColor": "black", "maxTableHeight": 120, - "maxWidth": 260, + "maxWidth": 500, }, } } @@ -14969,6 +15086,19 @@ exports[`XYChart component split chart should render split chart if splitRowAcce "visible": true, }, }, + "bulletGraph": Object { + "angularTickLabelPadding": 10, + "barBackground": "#343741", + "border": "#EDF0F5", + "colorBands": Array [ + "#D9C6EF", + "#AA87D1", + ], + "fallbackBandColor": "#98A2B3", + "minHeight": 64, + "nonFiniteText": "N/A", + "textColor": "#343741", + }, "chartMargins": Object { "bottom": 0, "left": 0, @@ -15288,7 +15418,7 @@ exports[`XYChart component split chart should render split chart if splitRowAcce "tooltip": Object { "defaultDotColor": "black", "maxTableHeight": 120, - "maxWidth": 260, + "maxWidth": 500, }, } } diff --git a/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap b/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap index acf41bdf93448..6f9a8644bb706 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap +++ b/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap @@ -204,6 +204,19 @@ exports[`DonutChart component passes correct props without errors for valid prop "visible": true, }, }, + "bulletGraph": Object { + "angularTickLabelPadding": 10, + "barBackground": "#343741", + "border": "#EDF0F5", + "colorBands": Array [ + "#D9C6EF", + "#AA87D1", + ], + "fallbackBandColor": "#98A2B3", + "minHeight": 64, + "nonFiniteText": "N/A", + "textColor": "#343741", + }, "chartMargins": Object { "bottom": 0, "left": 0, @@ -523,7 +536,7 @@ exports[`DonutChart component passes correct props without errors for valid prop "tooltip": Object { "defaultDotColor": "black", "maxTableHeight": 120, - "maxWidth": 260, + "maxWidth": 500, }, } } diff --git a/yarn.lock b/yarn.lock index 7b2754c8719c8..bf07d32acc0c7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1544,14 +1544,14 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@61.0.3": - version "61.0.3" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-61.0.3.tgz#77a2e1f18a39dd4b421a91edfd30f19cde740594" - integrity sha512-TY7hUieULTchNFgvpi6Rt7wMxrYMCmuZ4bbS6szOGBIY4WKJvZCgMfgZ2kUdC5MVG/jEzd8Qu+Xixce7GDpRxw== +"@elastic/charts@61.2.0": + version "61.2.0" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-61.2.0.tgz#fa065b85324d5660e4b6355390cca8699ef0d6ff" + integrity sha512-LBmZ+6wSR9/BCR+go5eIBy51Jpxr0cbK/a7vslZNYIGCdpHsWxGZgcqG3KgshFxOmUvcP7kj9LEEmeCTEGhbUQ== dependencies: "@popperjs/core" "^2.11.8" bezier-easing "^2.1.0" - chroma-js "^2.1.0" + chroma-js "^2.4.2" classnames "^2.2.6" d3-array "^1.2.4" d3-cloud "^1.2.5"