diff --git a/package.json b/package.json index dd07e8e589b23..92df014257db2 100644 --- a/package.json +++ b/package.json @@ -117,7 +117,7 @@ "@elastic/apm-rum": "^5.17.0", "@elastic/apm-rum-core": "^5.23.0", "@elastic/apm-rum-react": "^2.0.6", - "@elastic/charts": "68.1.0", + "@elastic/charts": "69.2.1", "@elastic/datemath": "5.0.3", "@elastic/ebt": "^1.1.1", "@elastic/ecs": "^8.11.5", diff --git a/src/platform/plugins/shared/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap b/src/platform/plugins/shared/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap index ae2eb489200ad..8b7ad3bd9a885 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap +++ b/src/platform/plugins/shared/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap @@ -97,24 +97,6 @@ exports[`GaugeComponent renders the chart 1`] = ` "strokeWidth": 1, "visible": true, }, - "lumaSteps": Array [ - 224, - 184, - 128, - 96, - 64, - 32, - 16, - 8, - 4, - 2, - 1, - 0, - 0, - 0, - 0, - 0, - ], "vertical": Object { "dash": Array [ 0, @@ -257,6 +239,7 @@ exports[`GaugeComponent renders the chart 1`] = ` }, }, "flamegraph": Object { + "minimapFocusBorder": "magenta", "navigation": Object { "buttonBackgroundColor": "#CCE4F5", "buttonDisabledBackgroundColor": "#D3DAE626", @@ -334,7 +317,7 @@ exports[`GaugeComponent renders the chart 1`] = ` "align": "center", "border": Object { "stroke": "gray", - "strokeWidth": 1, + "strokeWidth": 0, }, "label": Object { "fontFamily": "Sans-Serif", @@ -358,7 +341,7 @@ exports[`GaugeComponent renders the chart 1`] = ` }, }, "xAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -374,7 +357,7 @@ exports[`GaugeComponent renders the chart 1`] = ` "visible": true, }, "yAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -469,7 +452,7 @@ exports[`GaugeComponent renders the chart 1`] = ` "emptySizeRatio": 0, "fillLabel": Object { "clipText": false, - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontStyle": "normal", "fontVariant": "normal", "fontWeight": 400, @@ -486,7 +469,7 @@ exports[`GaugeComponent renders the chart 1`] = ` "horizontalTextEnforcer": 1, "idealFontSizeJump": 1.05, "linkLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 11, "fontStyle": "normal", "fontVariant": "normal", diff --git a/src/platform/plugins/shared/chart_expressions/expression_metric/public/components/metric_vis.test.tsx b/src/platform/plugins/shared/chart_expressions/expression_metric/public/components/metric_vis.test.tsx index ab20e5899c0d0..da8c330b9710b 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_metric/public/components/metric_vis.test.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_metric/public/components/metric_vis.test.tsx @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import React from 'react'; +import React, { ReactElement } from 'react'; import { shallow } from 'enzyme'; import { Datatable, DatatableColumn } from '@kbn/expressions-plugin/common'; import { MetricVis, MetricVisComponentProps } from './metric_vis'; @@ -1363,7 +1363,10 @@ describe('MetricVisComponent', function () { extra, } = component.find(Metric).props().data?.[0][0]! as MetricWNumber; - return { primary: valueFormatter(primaryMetric), secondary: extra?.props.children[1] }; + return { + primary: valueFormatter(primaryMetric), + secondary: (extra as ReactElement).props.children[1], + }; }; it.each` diff --git a/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap b/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap index 4da1ba4572401..6e4486822b7a7 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap +++ b/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap @@ -298,24 +298,6 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` "strokeWidth": 1, "visible": true, }, - "lumaSteps": Array [ - 224, - 184, - 128, - 96, - 64, - 32, - 16, - 8, - 4, - 2, - 1, - 0, - 0, - 0, - 0, - 0, - ], "vertical": Object { "dash": Array [ 0, @@ -458,6 +440,7 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` }, }, "flamegraph": Object { + "minimapFocusBorder": "magenta", "navigation": Object { "buttonBackgroundColor": "#CCE4F5", "buttonDisabledBackgroundColor": "#D3DAE626", @@ -535,7 +518,7 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` "align": "center", "border": Object { "stroke": "gray", - "strokeWidth": 1, + "strokeWidth": 0, }, "label": Object { "fontFamily": "Sans-Serif", @@ -559,7 +542,7 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` }, }, "xAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -575,7 +558,7 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` "visible": true, }, "yAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -670,7 +653,7 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` "emptySizeRatio": 0, "fillLabel": Object { "clipText": false, - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontStyle": "normal", "fontVariant": "normal", "fontWeight": 400, @@ -687,7 +670,7 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` "horizontalTextEnforcer": 1, "idealFontSizeJump": 1.05, "linkLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 11, "fontStyle": "normal", "fontVariant": "normal", @@ -1199,24 +1182,6 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] = "strokeWidth": 1, "visible": true, }, - "lumaSteps": Array [ - 224, - 184, - 128, - 96, - 64, - 32, - 16, - 8, - 4, - 2, - 1, - 0, - 0, - 0, - 0, - 0, - ], "vertical": Object { "dash": Array [ 0, @@ -1359,6 +1324,7 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] = }, }, "flamegraph": Object { + "minimapFocusBorder": "magenta", "navigation": Object { "buttonBackgroundColor": "#CCE4F5", "buttonDisabledBackgroundColor": "#D3DAE626", @@ -1436,7 +1402,7 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] = "align": "center", "border": Object { "stroke": "gray", - "strokeWidth": 1, + "strokeWidth": 0, }, "label": Object { "fontFamily": "Sans-Serif", @@ -1460,7 +1426,7 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] = }, }, "xAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -1476,7 +1442,7 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] = "visible": true, }, "yAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -1571,7 +1537,7 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] = "emptySizeRatio": 0, "fillLabel": Object { "clipText": false, - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontStyle": "normal", "fontVariant": "normal", "fontWeight": 400, @@ -1588,7 +1554,7 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] = "horizontalTextEnforcer": 1, "idealFontSizeJump": 1.05, "linkLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 11, "fontStyle": "normal", "fontVariant": "normal", @@ -2160,24 +2126,6 @@ exports[`PartitionVisComponent should render correct structure for multi-metric "strokeWidth": 1, "visible": true, }, - "lumaSteps": Array [ - 224, - 184, - 128, - 96, - 64, - 32, - 16, - 8, - 4, - 2, - 1, - 0, - 0, - 0, - 0, - 0, - ], "vertical": Object { "dash": Array [ 0, @@ -2320,6 +2268,7 @@ exports[`PartitionVisComponent should render correct structure for multi-metric }, }, "flamegraph": Object { + "minimapFocusBorder": "magenta", "navigation": Object { "buttonBackgroundColor": "#CCE4F5", "buttonDisabledBackgroundColor": "#D3DAE626", @@ -2397,7 +2346,7 @@ exports[`PartitionVisComponent should render correct structure for multi-metric "align": "center", "border": Object { "stroke": "gray", - "strokeWidth": 1, + "strokeWidth": 0, }, "label": Object { "fontFamily": "Sans-Serif", @@ -2421,7 +2370,7 @@ exports[`PartitionVisComponent should render correct structure for multi-metric }, }, "xAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -2437,7 +2386,7 @@ exports[`PartitionVisComponent should render correct structure for multi-metric "visible": true, }, "yAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -2532,7 +2481,7 @@ exports[`PartitionVisComponent should render correct structure for multi-metric "emptySizeRatio": 0, "fillLabel": Object { "clipText": false, - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontStyle": "normal", "fontVariant": "normal", "fontWeight": 400, @@ -2549,7 +2498,7 @@ exports[`PartitionVisComponent should render correct structure for multi-metric "horizontalTextEnforcer": 1, "idealFontSizeJump": 1.05, "linkLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 11, "fontStyle": "normal", "fontVariant": "normal", @@ -3123,24 +3072,6 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = ` "strokeWidth": 1, "visible": true, }, - "lumaSteps": Array [ - 224, - 184, - 128, - 96, - 64, - 32, - 16, - 8, - 4, - 2, - 1, - 0, - 0, - 0, - 0, - 0, - ], "vertical": Object { "dash": Array [ 0, @@ -3283,6 +3214,7 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = ` }, }, "flamegraph": Object { + "minimapFocusBorder": "magenta", "navigation": Object { "buttonBackgroundColor": "#CCE4F5", "buttonDisabledBackgroundColor": "#D3DAE626", @@ -3360,7 +3292,7 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = ` "align": "center", "border": Object { "stroke": "gray", - "strokeWidth": 1, + "strokeWidth": 0, }, "label": Object { "fontFamily": "Sans-Serif", @@ -3384,7 +3316,7 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = ` }, }, "xAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -3400,7 +3332,7 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = ` "visible": true, }, "yAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -3495,7 +3427,7 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = ` "emptySizeRatio": 0, "fillLabel": Object { "clipText": false, - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontStyle": "normal", "fontVariant": "normal", "fontWeight": 400, @@ -3512,7 +3444,7 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = ` "horizontalTextEnforcer": 1, "idealFontSizeJump": 1.05, "linkLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 11, "fontStyle": "normal", "fontVariant": "normal", @@ -4024,24 +3956,6 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] = "strokeWidth": 1, "visible": true, }, - "lumaSteps": Array [ - 224, - 184, - 128, - 96, - 64, - 32, - 16, - 8, - 4, - 2, - 1, - 0, - 0, - 0, - 0, - 0, - ], "vertical": Object { "dash": Array [ 0, @@ -4184,6 +4098,7 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] = }, }, "flamegraph": Object { + "minimapFocusBorder": "magenta", "navigation": Object { "buttonBackgroundColor": "#CCE4F5", "buttonDisabledBackgroundColor": "#D3DAE626", @@ -4261,7 +4176,7 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] = "align": "center", "border": Object { "stroke": "gray", - "strokeWidth": 1, + "strokeWidth": 0, }, "label": Object { "fontFamily": "Sans-Serif", @@ -4285,7 +4200,7 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] = }, }, "xAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -4301,7 +4216,7 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] = "visible": true, }, "yAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -4396,7 +4311,7 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] = "emptySizeRatio": 0, "fillLabel": Object { "clipText": false, - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontStyle": "normal", "fontVariant": "normal", "fontWeight": 400, @@ -4413,7 +4328,7 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] = "horizontalTextEnforcer": 1, "idealFontSizeJump": 1.05, "linkLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 11, "fontStyle": "normal", "fontVariant": "normal", @@ -4880,24 +4795,6 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] = "strokeWidth": 1, "visible": true, }, - "lumaSteps": Array [ - 224, - 184, - 128, - 96, - 64, - 32, - 16, - 8, - 4, - 2, - 1, - 0, - 0, - 0, - 0, - 0, - ], "vertical": Object { "dash": Array [ 0, @@ -5040,6 +4937,7 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] = }, }, "flamegraph": Object { + "minimapFocusBorder": "magenta", "navigation": Object { "buttonBackgroundColor": "#CCE4F5", "buttonDisabledBackgroundColor": "#D3DAE626", @@ -5117,7 +5015,7 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] = "align": "center", "border": Object { "stroke": "gray", - "strokeWidth": 1, + "strokeWidth": 0, }, "label": Object { "fontFamily": "Sans-Serif", @@ -5141,7 +5039,7 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] = }, }, "xAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -5157,7 +5055,7 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] = "visible": true, }, "yAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -5252,7 +5150,7 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] = "emptySizeRatio": 0, "fillLabel": Object { "clipText": false, - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontStyle": "normal", "fontVariant": "normal", "fontWeight": 400, @@ -5269,7 +5167,7 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] = "horizontalTextEnforcer": 1, "idealFontSizeJump": 1.05, "linkLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 11, "fontStyle": "normal", "fontVariant": "normal", diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap index 507d9fb0aeab2..69986304131c6 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap +++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap @@ -663,24 +663,6 @@ exports[`XYChart component it renders area 1`] = ` "strokeWidth": 1, "visible": true, }, - "lumaSteps": Array [ - 224, - 184, - 128, - 96, - 64, - 32, - 16, - 8, - 4, - 2, - 1, - 0, - 0, - 0, - 0, - 0, - ], "vertical": Object { "dash": Array [ 0, @@ -823,6 +805,7 @@ exports[`XYChart component it renders area 1`] = ` }, }, "flamegraph": Object { + "minimapFocusBorder": "magenta", "navigation": Object { "buttonBackgroundColor": "#CCE4F5", "buttonDisabledBackgroundColor": "#D3DAE626", @@ -900,7 +883,7 @@ exports[`XYChart component it renders area 1`] = ` "align": "center", "border": Object { "stroke": "gray", - "strokeWidth": 1, + "strokeWidth": 0, }, "label": Object { "fontFamily": "Sans-Serif", @@ -924,7 +907,7 @@ exports[`XYChart component it renders area 1`] = ` }, }, "xAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -940,7 +923,7 @@ exports[`XYChart component it renders area 1`] = ` "visible": true, }, "yAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -1035,7 +1018,7 @@ exports[`XYChart component it renders area 1`] = ` "emptySizeRatio": 0, "fillLabel": Object { "clipText": false, - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontStyle": "normal", "fontVariant": "normal", "fontWeight": 400, @@ -1052,7 +1035,7 @@ exports[`XYChart component it renders area 1`] = ` "horizontalTextEnforcer": 1, "idealFontSizeJump": 1.05, "linkLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 11, "fontStyle": "normal", "fontVariant": "normal", @@ -2213,24 +2196,6 @@ exports[`XYChart component it renders bar 1`] = ` "strokeWidth": 1, "visible": true, }, - "lumaSteps": Array [ - 224, - 184, - 128, - 96, - 64, - 32, - 16, - 8, - 4, - 2, - 1, - 0, - 0, - 0, - 0, - 0, - ], "vertical": Object { "dash": Array [ 0, @@ -2373,6 +2338,7 @@ exports[`XYChart component it renders bar 1`] = ` }, }, "flamegraph": Object { + "minimapFocusBorder": "magenta", "navigation": Object { "buttonBackgroundColor": "#CCE4F5", "buttonDisabledBackgroundColor": "#D3DAE626", @@ -2450,7 +2416,7 @@ exports[`XYChart component it renders bar 1`] = ` "align": "center", "border": Object { "stroke": "gray", - "strokeWidth": 1, + "strokeWidth": 0, }, "label": Object { "fontFamily": "Sans-Serif", @@ -2474,7 +2440,7 @@ exports[`XYChart component it renders bar 1`] = ` }, }, "xAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -2490,7 +2456,7 @@ exports[`XYChart component it renders bar 1`] = ` "visible": true, }, "yAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -2585,7 +2551,7 @@ exports[`XYChart component it renders bar 1`] = ` "emptySizeRatio": 0, "fillLabel": Object { "clipText": false, - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontStyle": "normal", "fontVariant": "normal", "fontWeight": 400, @@ -2602,7 +2568,7 @@ exports[`XYChart component it renders bar 1`] = ` "horizontalTextEnforcer": 1, "idealFontSizeJump": 1.05, "linkLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 11, "fontStyle": "normal", "fontVariant": "normal", @@ -3763,24 +3729,6 @@ exports[`XYChart component it renders horizontal bar 1`] = ` "strokeWidth": 1, "visible": true, }, - "lumaSteps": Array [ - 224, - 184, - 128, - 96, - 64, - 32, - 16, - 8, - 4, - 2, - 1, - 0, - 0, - 0, - 0, - 0, - ], "vertical": Object { "dash": Array [ 0, @@ -3923,6 +3871,7 @@ exports[`XYChart component it renders horizontal bar 1`] = ` }, }, "flamegraph": Object { + "minimapFocusBorder": "magenta", "navigation": Object { "buttonBackgroundColor": "#CCE4F5", "buttonDisabledBackgroundColor": "#D3DAE626", @@ -4000,7 +3949,7 @@ exports[`XYChart component it renders horizontal bar 1`] = ` "align": "center", "border": Object { "stroke": "gray", - "strokeWidth": 1, + "strokeWidth": 0, }, "label": Object { "fontFamily": "Sans-Serif", @@ -4024,7 +3973,7 @@ exports[`XYChart component it renders horizontal bar 1`] = ` }, }, "xAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -4040,7 +3989,7 @@ exports[`XYChart component it renders horizontal bar 1`] = ` "visible": true, }, "yAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -4135,7 +4084,7 @@ exports[`XYChart component it renders horizontal bar 1`] = ` "emptySizeRatio": 0, "fillLabel": Object { "clipText": false, - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontStyle": "normal", "fontVariant": "normal", "fontWeight": 400, @@ -4152,7 +4101,7 @@ exports[`XYChart component it renders horizontal bar 1`] = ` "horizontalTextEnforcer": 1, "idealFontSizeJump": 1.05, "linkLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 11, "fontStyle": "normal", "fontVariant": "normal", @@ -5313,24 +5262,6 @@ exports[`XYChart component it renders line 1`] = ` "strokeWidth": 1, "visible": true, }, - "lumaSteps": Array [ - 224, - 184, - 128, - 96, - 64, - 32, - 16, - 8, - 4, - 2, - 1, - 0, - 0, - 0, - 0, - 0, - ], "vertical": Object { "dash": Array [ 0, @@ -5473,6 +5404,7 @@ exports[`XYChart component it renders line 1`] = ` }, }, "flamegraph": Object { + "minimapFocusBorder": "magenta", "navigation": Object { "buttonBackgroundColor": "#CCE4F5", "buttonDisabledBackgroundColor": "#D3DAE626", @@ -5550,7 +5482,7 @@ exports[`XYChart component it renders line 1`] = ` "align": "center", "border": Object { "stroke": "gray", - "strokeWidth": 1, + "strokeWidth": 0, }, "label": Object { "fontFamily": "Sans-Serif", @@ -5574,7 +5506,7 @@ exports[`XYChart component it renders line 1`] = ` }, }, "xAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -5590,7 +5522,7 @@ exports[`XYChart component it renders line 1`] = ` "visible": true, }, "yAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -5685,7 +5617,7 @@ exports[`XYChart component it renders line 1`] = ` "emptySizeRatio": 0, "fillLabel": Object { "clipText": false, - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontStyle": "normal", "fontVariant": "normal", "fontWeight": 400, @@ -5702,7 +5634,7 @@ exports[`XYChart component it renders line 1`] = ` "horizontalTextEnforcer": 1, "idealFontSizeJump": 1.05, "linkLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 11, "fontStyle": "normal", "fontVariant": "normal", @@ -6863,24 +6795,6 @@ exports[`XYChart component it renders stacked area 1`] = ` "strokeWidth": 1, "visible": true, }, - "lumaSteps": Array [ - 224, - 184, - 128, - 96, - 64, - 32, - 16, - 8, - 4, - 2, - 1, - 0, - 0, - 0, - 0, - 0, - ], "vertical": Object { "dash": Array [ 0, @@ -7023,6 +6937,7 @@ exports[`XYChart component it renders stacked area 1`] = ` }, }, "flamegraph": Object { + "minimapFocusBorder": "magenta", "navigation": Object { "buttonBackgroundColor": "#CCE4F5", "buttonDisabledBackgroundColor": "#D3DAE626", @@ -7100,7 +7015,7 @@ exports[`XYChart component it renders stacked area 1`] = ` "align": "center", "border": Object { "stroke": "gray", - "strokeWidth": 1, + "strokeWidth": 0, }, "label": Object { "fontFamily": "Sans-Serif", @@ -7124,7 +7039,7 @@ exports[`XYChart component it renders stacked area 1`] = ` }, }, "xAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -7140,7 +7055,7 @@ exports[`XYChart component it renders stacked area 1`] = ` "visible": true, }, "yAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -7235,7 +7150,7 @@ exports[`XYChart component it renders stacked area 1`] = ` "emptySizeRatio": 0, "fillLabel": Object { "clipText": false, - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontStyle": "normal", "fontVariant": "normal", "fontWeight": 400, @@ -7252,7 +7167,7 @@ exports[`XYChart component it renders stacked area 1`] = ` "horizontalTextEnforcer": 1, "idealFontSizeJump": 1.05, "linkLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 11, "fontStyle": "normal", "fontVariant": "normal", @@ -8413,24 +8328,6 @@ exports[`XYChart component it renders stacked bar 1`] = ` "strokeWidth": 1, "visible": true, }, - "lumaSteps": Array [ - 224, - 184, - 128, - 96, - 64, - 32, - 16, - 8, - 4, - 2, - 1, - 0, - 0, - 0, - 0, - 0, - ], "vertical": Object { "dash": Array [ 0, @@ -8573,6 +8470,7 @@ exports[`XYChart component it renders stacked bar 1`] = ` }, }, "flamegraph": Object { + "minimapFocusBorder": "magenta", "navigation": Object { "buttonBackgroundColor": "#CCE4F5", "buttonDisabledBackgroundColor": "#D3DAE626", @@ -8650,7 +8548,7 @@ exports[`XYChart component it renders stacked bar 1`] = ` "align": "center", "border": Object { "stroke": "gray", - "strokeWidth": 1, + "strokeWidth": 0, }, "label": Object { "fontFamily": "Sans-Serif", @@ -8674,7 +8572,7 @@ exports[`XYChart component it renders stacked bar 1`] = ` }, }, "xAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -8690,7 +8588,7 @@ exports[`XYChart component it renders stacked bar 1`] = ` "visible": true, }, "yAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -8785,7 +8683,7 @@ exports[`XYChart component it renders stacked bar 1`] = ` "emptySizeRatio": 0, "fillLabel": Object { "clipText": false, - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontStyle": "normal", "fontVariant": "normal", "fontWeight": 400, @@ -8802,7 +8700,7 @@ exports[`XYChart component it renders stacked bar 1`] = ` "horizontalTextEnforcer": 1, "idealFontSizeJump": 1.05, "linkLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 11, "fontStyle": "normal", "fontVariant": "normal", @@ -9963,24 +9861,6 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = ` "strokeWidth": 1, "visible": true, }, - "lumaSteps": Array [ - 224, - 184, - 128, - 96, - 64, - 32, - 16, - 8, - 4, - 2, - 1, - 0, - 0, - 0, - 0, - 0, - ], "vertical": Object { "dash": Array [ 0, @@ -10123,6 +10003,7 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = ` }, }, "flamegraph": Object { + "minimapFocusBorder": "magenta", "navigation": Object { "buttonBackgroundColor": "#CCE4F5", "buttonDisabledBackgroundColor": "#D3DAE626", @@ -10200,7 +10081,7 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = ` "align": "center", "border": Object { "stroke": "gray", - "strokeWidth": 1, + "strokeWidth": 0, }, "label": Object { "fontFamily": "Sans-Serif", @@ -10224,7 +10105,7 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = ` }, }, "xAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -10240,7 +10121,7 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = ` "visible": true, }, "yAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -10335,7 +10216,7 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = ` "emptySizeRatio": 0, "fillLabel": Object { "clipText": false, - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontStyle": "normal", "fontVariant": "normal", "fontWeight": 400, @@ -10352,7 +10233,7 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = ` "horizontalTextEnforcer": 1, "idealFontSizeJump": 1.05, "linkLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 11, "fontStyle": "normal", "fontVariant": "normal", @@ -11543,24 +11424,6 @@ exports[`XYChart component split chart should render split chart if both, splitR "strokeWidth": 1, "visible": true, }, - "lumaSteps": Array [ - 224, - 184, - 128, - 96, - 64, - 32, - 16, - 8, - 4, - 2, - 1, - 0, - 0, - 0, - 0, - 0, - ], "vertical": Object { "dash": Array [ 0, @@ -11703,6 +11566,7 @@ exports[`XYChart component split chart should render split chart if both, splitR }, }, "flamegraph": Object { + "minimapFocusBorder": "magenta", "navigation": Object { "buttonBackgroundColor": "#CCE4F5", "buttonDisabledBackgroundColor": "#D3DAE626", @@ -11780,7 +11644,7 @@ exports[`XYChart component split chart should render split chart if both, splitR "align": "center", "border": Object { "stroke": "gray", - "strokeWidth": 1, + "strokeWidth": 0, }, "label": Object { "fontFamily": "Sans-Serif", @@ -11804,7 +11668,7 @@ exports[`XYChart component split chart should render split chart if both, splitR }, }, "xAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -11820,7 +11684,7 @@ exports[`XYChart component split chart should render split chart if both, splitR "visible": true, }, "yAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -11915,7 +11779,7 @@ exports[`XYChart component split chart should render split chart if both, splitR "emptySizeRatio": 0, "fillLabel": Object { "clipText": false, - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontStyle": "normal", "fontVariant": "normal", "fontWeight": 400, @@ -11932,7 +11796,7 @@ exports[`XYChart component split chart should render split chart if both, splitR "horizontalTextEnforcer": 1, "idealFontSizeJump": 1.05, "linkLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 11, "fontStyle": "normal", "fontVariant": "normal", @@ -13331,24 +13195,6 @@ exports[`XYChart component split chart should render split chart if splitColumnA "strokeWidth": 1, "visible": true, }, - "lumaSteps": Array [ - 224, - 184, - 128, - 96, - 64, - 32, - 16, - 8, - 4, - 2, - 1, - 0, - 0, - 0, - 0, - 0, - ], "vertical": Object { "dash": Array [ 0, @@ -13491,6 +13337,7 @@ exports[`XYChart component split chart should render split chart if splitColumnA }, }, "flamegraph": Object { + "minimapFocusBorder": "magenta", "navigation": Object { "buttonBackgroundColor": "#CCE4F5", "buttonDisabledBackgroundColor": "#D3DAE626", @@ -13568,7 +13415,7 @@ exports[`XYChart component split chart should render split chart if splitColumnA "align": "center", "border": Object { "stroke": "gray", - "strokeWidth": 1, + "strokeWidth": 0, }, "label": Object { "fontFamily": "Sans-Serif", @@ -13592,7 +13439,7 @@ exports[`XYChart component split chart should render split chart if splitColumnA }, }, "xAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -13608,7 +13455,7 @@ exports[`XYChart component split chart should render split chart if splitColumnA "visible": true, }, "yAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -13703,7 +13550,7 @@ exports[`XYChart component split chart should render split chart if splitColumnA "emptySizeRatio": 0, "fillLabel": Object { "clipText": false, - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontStyle": "normal", "fontVariant": "normal", "fontWeight": 400, @@ -13720,7 +13567,7 @@ exports[`XYChart component split chart should render split chart if splitColumnA "horizontalTextEnforcer": 1, "idealFontSizeJump": 1.05, "linkLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 11, "fontStyle": "normal", "fontVariant": "normal", @@ -15112,24 +14959,6 @@ exports[`XYChart component split chart should render split chart if splitRowAcce "strokeWidth": 1, "visible": true, }, - "lumaSteps": Array [ - 224, - 184, - 128, - 96, - 64, - 32, - 16, - 8, - 4, - 2, - 1, - 0, - 0, - 0, - 0, - 0, - ], "vertical": Object { "dash": Array [ 0, @@ -15272,6 +15101,7 @@ exports[`XYChart component split chart should render split chart if splitRowAcce }, }, "flamegraph": Object { + "minimapFocusBorder": "magenta", "navigation": Object { "buttonBackgroundColor": "#CCE4F5", "buttonDisabledBackgroundColor": "#D3DAE626", @@ -15349,7 +15179,7 @@ exports[`XYChart component split chart should render split chart if splitRowAcce "align": "center", "border": Object { "stroke": "gray", - "strokeWidth": 1, + "strokeWidth": 0, }, "label": Object { "fontFamily": "Sans-Serif", @@ -15373,7 +15203,7 @@ exports[`XYChart component split chart should render split chart if splitRowAcce }, }, "xAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -15389,7 +15219,7 @@ exports[`XYChart component split chart should render split chart if splitRowAcce "visible": true, }, "yAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -15484,7 +15314,7 @@ exports[`XYChart component split chart should render split chart if splitRowAcce "emptySizeRatio": 0, "fillLabel": Object { "clipText": false, - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontStyle": "normal", "fontVariant": "normal", "fontWeight": 400, @@ -15501,7 +15331,7 @@ exports[`XYChart component split chart should render split chart if splitRowAcce "horizontalTextEnforcer": 1, "idealFontSizeJump": 1.05, "linkLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 11, "fontStyle": "normal", "fontVariant": "normal", diff --git a/src/platform/plugins/shared/charts/public/services/theme/mock.ts b/src/platform/plugins/shared/charts/public/services/theme/mock.ts index 063c6fc196245..9be24c7452e7d 100644 --- a/src/platform/plugins/shared/charts/public/services/theme/mock.ts +++ b/src/platform/plugins/shared/charts/public/services/theme/mock.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { LIGHT_THEME, PartialTheme } from '@elastic/charts'; +import { AMSTERDAM_LIGHT_THEME, PartialTheme } from '@elastic/charts'; import { ThemeService } from './theme'; export const MOCK_SPARKLINE_THEME: PartialTheme = { @@ -28,7 +28,7 @@ export const MOCK_SPARKLINE_THEME: PartialTheme = { }; export const themeServiceMock: ThemeService = { - chartsDefaultBaseTheme: LIGHT_THEME, + chartsDefaultBaseTheme: AMSTERDAM_LIGHT_THEME, chartsBaseTheme$: jest.fn(() => ({ subscribe: jest.fn(), })), @@ -36,6 +36,6 @@ export const themeServiceMock: ThemeService = { subscribe: jest.fn(), })), useDarkMode: jest.fn().mockReturnValue(false), - useChartsBaseTheme: jest.fn().mockReturnValue(LIGHT_THEME), + useChartsBaseTheme: jest.fn().mockReturnValue(AMSTERDAM_LIGHT_THEME), useSparklineOverrides: jest.fn().mockReturnValue(MOCK_SPARKLINE_THEME), } as any; diff --git a/src/platform/plugins/shared/charts/public/services/theme/theme.test.tsx b/src/platform/plugins/shared/charts/public/services/theme/theme.test.tsx index 82110d8eee32e..e18bbf7e29fa5 100644 --- a/src/platform/plugins/shared/charts/public/services/theme/theme.test.tsx +++ b/src/platform/plugins/shared/charts/public/services/theme/theme.test.tsx @@ -12,7 +12,7 @@ import { from } from 'rxjs'; import { take } from 'rxjs'; import { render, act as renderAct, renderHook, act } from '@testing-library/react'; -import { LIGHT_THEME, DARK_THEME } from '@elastic/charts'; +import { AMSTERDAM_LIGHT_THEME, AMSTERDAM_DARK_THEME } from '@elastic/charts'; import { ThemeService } from './theme'; import { coreMock } from '@kbn/core/public/mocks'; @@ -56,7 +56,9 @@ describe('ThemeService', () => { const themeService = new ThemeService(); themeService.init(setUpMockTheme); - expect(await themeService.chartsBaseTheme$.pipe(take(1)).toPromise()).toEqual(LIGHT_THEME); + expect(await themeService.chartsBaseTheme$.pipe(take(1)).toPromise()).toEqual( + AMSTERDAM_LIGHT_THEME + ); }); describe('in dark mode', () => { @@ -67,7 +69,7 @@ describe('ThemeService', () => { themeService.init(setUpMockTheme); const result = await themeService.chartsBaseTheme$.pipe(take(1)).toPromise(); - expect(result).toEqual(DARK_THEME); + expect(result).toEqual(AMSTERDAM_DARK_THEME); }); }); }); @@ -80,19 +82,19 @@ describe('ThemeService', () => { const { useChartsBaseTheme } = themeService; const { result } = renderHook(() => useChartsBaseTheme()); - expect(result.current).toBe(LIGHT_THEME); + expect(result.current).toBe(AMSTERDAM_LIGHT_THEME); act(() => { setUpMockTheme.theme$ = createTheme$Mock(true); themeService.init(setUpMockTheme); }); - expect(result.current).toBe(DARK_THEME); + expect(result.current).toBe(AMSTERDAM_DARK_THEME); act(() => { setUpMockTheme.theme$ = createTheme$Mock(false); themeService.init(setUpMockTheme); }); // act(() => darkMode$.next(false)); - expect(result.current).toBe(LIGHT_THEME); + expect(result.current).toBe(AMSTERDAM_LIGHT_THEME); }); it('should not rerender when emitting the same value', () => { diff --git a/src/platform/plugins/shared/charts/public/services/theme/theme.ts b/src/platform/plugins/shared/charts/public/services/theme/theme.ts index d7ec8c03e506c..e8fcef92849dd 100644 --- a/src/platform/plugins/shared/charts/public/services/theme/theme.ts +++ b/src/platform/plugins/shared/charts/public/services/theme/theme.ts @@ -11,11 +11,11 @@ import { useEffect, useRef, useState } from 'react'; import { Observable, BehaviorSubject } from 'rxjs'; import { CoreSetup, CoreTheme } from '@kbn/core/public'; -import { DARK_THEME, LIGHT_THEME, PartialTheme, Theme } from '@elastic/charts'; +import { AMSTERDAM_DARK_THEME, AMSTERDAM_LIGHT_THEME, PartialTheme, Theme } from '@elastic/charts'; export class ThemeService { /** Returns default charts theme */ - public readonly chartsDefaultBaseTheme = LIGHT_THEME; + public readonly chartsDefaultBaseTheme = AMSTERDAM_LIGHT_THEME; private theme$?: Observable; private _chartsBaseTheme$ = new BehaviorSubject(this.chartsDefaultBaseTheme); @@ -103,7 +103,7 @@ export class ThemeService { public init(theme: CoreSetup['theme']) { this.theme$ = theme.theme$; this.theme$.subscribe(({ darkMode }) => { - this._chartsBaseTheme$.next(darkMode ? DARK_THEME : LIGHT_THEME); + this._chartsBaseTheme$.next(darkMode ? AMSTERDAM_DARK_THEME : AMSTERDAM_LIGHT_THEME); }); } } diff --git a/x-pack/platform/plugins/shared/ml/public/application/contexts/kibana/__mocks__/kibana_context.ts b/x-pack/platform/plugins/shared/ml/public/application/contexts/kibana/__mocks__/kibana_context.ts index c31a7e57c73d5..61fea57a15545 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/contexts/kibana/__mocks__/kibana_context.ts +++ b/x-pack/platform/plugins/shared/ml/public/application/contexts/kibana/__mocks__/kibana_context.ts @@ -10,11 +10,11 @@ import { fieldFormatsServiceMock } from '@kbn/field-formats-plugin/public/mocks' import { BehaviorSubject } from 'rxjs'; import { mlApiServicesMock } from '../../../services/__mocks__/ml_api_services'; import { notificationServiceMock } from '@kbn/core-notifications-browser-mocks'; -import { LIGHT_THEME } from '@elastic/charts'; +import { AMSTERDAM_LIGHT_THEME } from '@elastic/charts'; export const chartsServiceMock = { theme: { - useChartsBaseTheme: jest.fn(() => LIGHT_THEME), + useChartsBaseTheme: jest.fn(() => AMSTERDAM_LIGHT_THEME), }, activeCursor: { activeCursor$: new BehaviorSubject({ diff --git a/x-pack/platform/plugins/shared/ml/public/application/memory_usage/nodes_overview/memory_preview_chart.tsx b/x-pack/platform/plugins/shared/ml/public/application/memory_usage/nodes_overview/memory_preview_chart.tsx index e2ac5873418b6..5c01d32e83876 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/memory_usage/nodes_overview/memory_preview_chart.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/memory_usage/nodes_overview/memory_preview_chart.tsx @@ -19,7 +19,7 @@ import { LineAnnotation, AnnotationDomainType, Tooltip, - LIGHT_THEME, + AMSTERDAM_LIGHT_THEME, } from '@elastic/charts'; import { EuiIcon } from '@elastic/eui'; import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common'; @@ -123,7 +123,7 @@ export const MemoryPreviewChart: FC = ({ memoryOverview } /> ; const defaultProps: Props = { - chartProps: { baseTheme: LIGHT_THEME }, + chartProps: { baseTheme: AMSTERDAM_LIGHT_THEME }, comparator: COMPARATORS.GREATER_THAN, id: 'componentId', thresholds: [90], diff --git a/x-pack/solutions/observability/plugins/infra/public/alerting/common/components/threshold.test.tsx b/x-pack/solutions/observability/plugins/infra/public/alerting/common/components/threshold.test.tsx index 754665c18adf3..d0bd4693a355c 100644 --- a/x-pack/solutions/observability/plugins/infra/public/alerting/common/components/threshold.test.tsx +++ b/x-pack/solutions/observability/plugins/infra/public/alerting/common/components/threshold.test.tsx @@ -6,7 +6,7 @@ */ import { COMPARATORS } from '@kbn/alerting-comparators'; -import { Metric, LIGHT_THEME } from '@elastic/charts'; +import { Metric, AMSTERDAM_LIGHT_THEME } from '@elastic/charts'; import { render } from '@testing-library/react'; import React from 'react'; import type { Props } from './threshold'; @@ -23,7 +23,7 @@ jest.mock('@elastic/charts', () => { describe('Threshold', () => { const renderComponent = (props: Partial = {}) => { const defaultProps: Props = { - chartProps: { baseTheme: LIGHT_THEME }, + chartProps: { baseTheme: AMSTERDAM_LIGHT_THEME }, comparator: COMPARATORS.GREATER_THAN, id: 'componentId', thresholds: [90], diff --git a/x-pack/solutions/observability/plugins/observability/public/components/annotations/components/new_line_annotation.tsx b/x-pack/solutions/observability/plugins/observability/public/components/annotations/components/new_line_annotation.tsx index d61fcc7d8985d..905bec688e61b 100644 --- a/x-pack/solutions/observability/plugins/observability/public/components/annotations/components/new_line_annotation.tsx +++ b/x-pack/solutions/observability/plugins/observability/public/components/annotations/components/new_line_annotation.tsx @@ -11,6 +11,7 @@ import { AnnotationDomainType, LineAnnotation } from '@elastic/charts'; import { EuiText, useEuiTheme } from '@elastic/eui'; import { useFormContext } from 'react-hook-form'; import { SLOWithSummaryResponse } from '@kbn/slo-schema'; +import { cloneDeep } from 'lodash'; import { AnnotationIcon } from '.'; import { AnnotationTooltip } from './annotation_tooltip'; import type { Annotation, CreateAnnotationParams } from '../../../../common/annotations'; @@ -34,7 +35,7 @@ export function NewLineAnnotation({ return ( ); } diff --git a/x-pack/solutions/observability/plugins/observability/public/components/annotations/components/new_rect_annotation.tsx b/x-pack/solutions/observability/plugins/observability/public/components/annotations/components/new_rect_annotation.tsx index 2fe60edcdbd5a..e670997b4778b 100644 --- a/x-pack/solutions/observability/plugins/observability/public/components/annotations/components/new_rect_annotation.tsx +++ b/x-pack/solutions/observability/plugins/observability/public/components/annotations/components/new_rect_annotation.tsx @@ -11,6 +11,7 @@ import { useEuiTheme } from '@elastic/eui'; import moment from 'moment'; import { useFormContext } from 'react-hook-form'; import { SLOWithSummaryResponse } from '@kbn/slo-schema'; +import { cloneDeep } from 'lodash'; import { AnnotationTooltip } from './annotation_tooltip'; import type { Annotation, CreateAnnotationParams } from '../../../../common/annotations'; @@ -35,7 +36,7 @@ export function NewRectAnnotation({ return ( ); } diff --git a/x-pack/solutions/observability/plugins/observability/public/components/annotations/use_annotations.tsx b/x-pack/solutions/observability/plugins/observability/public/components/annotations/use_annotations.tsx index 08eace65e72a7..cd9c831802c86 100644 --- a/x-pack/solutions/observability/plugins/observability/public/components/annotations/use_annotations.tsx +++ b/x-pack/solutions/observability/plugins/observability/public/components/annotations/use_annotations.tsx @@ -10,10 +10,6 @@ import { FormProvider, useForm } from 'react-hook-form'; import moment from 'moment'; import useKey from 'react-use/lib/useKey'; import { clone } from 'lodash'; -import { - defaultRangeAnnotationLabel, - defaultAnnotationRangeColor, -} from '@kbn/event-annotation-common'; import { SLOWithSummaryResponse } from '@kbn/slo-schema'; import { getDefaultAnnotation } from './default_annotation'; import { useEditAnnotationHelper } from './hooks/use_edit_annotation_helper'; @@ -160,20 +156,14 @@ export const useAnnotations = ({ }, createAnnotation: (start: string | number, end?: string | null) => { if (isCreateOpen) return; - reset(getDefaultAnnotation({ slo })); - - if (isNaN(Number(start))) { - setValue('@timestamp', moment(start)); - } else { - setValue('@timestamp', moment(new Date(Number(start)))); - } - if (end) { - setValue('event.end', moment(new Date(Number(end)))); - } - if (end) { - setValue('message', defaultRangeAnnotationLabel); - setValue('annotation.style.color', defaultAnnotationRangeColor); - } + const timestampStart = isNaN(Number(start)) ? moment(start) : moment(new Date(Number(start))); + reset( + getDefaultAnnotation({ + slo, + timestamp: timestampStart, + eventEnd: end ? moment(new Date(Number(end))) : undefined, + }) + ); setIsCreateOpen(true); }, AddAnnotationButton: () => { diff --git a/x-pack/solutions/observability/plugins/observability/public/components/custom_threshold/components/custom_threshold.stories.tsx b/x-pack/solutions/observability/plugins/observability/public/components/custom_threshold/components/custom_threshold.stories.tsx index fe4e419d660e3..1a98779a34576 100644 --- a/x-pack/solutions/observability/plugins/observability/public/components/custom_threshold/components/custom_threshold.stories.tsx +++ b/x-pack/solutions/observability/plugins/observability/public/components/custom_threshold/components/custom_threshold.stories.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { Meta } from '@storybook/react'; -import { LIGHT_THEME } from '@elastic/charts'; +import { AMSTERDAM_LIGHT_THEME } from '@elastic/charts'; import { COMPARATORS } from '@kbn/alerting-comparators'; import { Props, Threshold as Component } from './threshold'; @@ -29,7 +29,7 @@ export default { } as Meta; const defaultProps: Props = { - chartProps: { baseTheme: LIGHT_THEME }, + chartProps: { baseTheme: AMSTERDAM_LIGHT_THEME }, comparator: COMPARATORS.GREATER_THAN, id: 'componentId', threshold: [90], diff --git a/x-pack/solutions/observability/plugins/observability/public/components/custom_threshold/components/threshold.test.tsx b/x-pack/solutions/observability/plugins/observability/public/components/custom_threshold/components/threshold.test.tsx index 9e592f2336dc1..681cf97a833d9 100644 --- a/x-pack/solutions/observability/plugins/observability/public/components/custom_threshold/components/threshold.test.tsx +++ b/x-pack/solutions/observability/plugins/observability/public/components/custom_threshold/components/threshold.test.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { LIGHT_THEME } from '@elastic/charts'; +import { AMSTERDAM_LIGHT_THEME } from '@elastic/charts'; import React from 'react'; import { render } from '@testing-library/react'; @@ -15,7 +15,7 @@ import { Props, Threshold } from './threshold'; describe('Threshold', () => { const renderComponent = (props: Partial = {}) => { const defaultProps: Props = { - chartProps: { baseTheme: LIGHT_THEME }, + chartProps: { baseTheme: AMSTERDAM_LIGHT_THEME }, comparator: COMPARATORS.GREATER_THAN, id: 'componentId', threshold: [90], diff --git a/x-pack/solutions/observability/plugins/observability/public/pages/annotations/annotations_list.tsx b/x-pack/solutions/observability/plugins/observability/public/pages/annotations/annotations_list.tsx index b9ee4745b6b2a..e7ba4a665d2bb 100644 --- a/x-pack/solutions/observability/plugins/observability/public/pages/annotations/annotations_list.tsx +++ b/x-pack/solutions/observability/plugins/observability/public/pages/annotations/annotations_list.tsx @@ -56,6 +56,7 @@ export function AnnotationsList() { const renderToolsLeft = () => { return ( { return [ - , + , ]; }; const allTags = data?.items?.map((obj) => obj.tags ?? []).flat() ?? []; diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap index 15f8ad666dced..0457d81357632 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap @@ -110,24 +110,6 @@ exports[`DonutChart component passes correct props without errors for valid prop "strokeWidth": 1, "visible": true, }, - "lumaSteps": Array [ - 224, - 184, - 128, - 96, - 64, - 32, - 16, - 8, - 4, - 2, - 1, - 0, - 0, - 0, - 0, - 0, - ], "vertical": Object { "dash": Array [ 0, @@ -270,6 +252,7 @@ exports[`DonutChart component passes correct props without errors for valid prop }, }, "flamegraph": Object { + "minimapFocusBorder": "magenta", "navigation": Object { "buttonBackgroundColor": "#CCE4F5", "buttonDisabledBackgroundColor": "#D3DAE626", @@ -347,7 +330,7 @@ exports[`DonutChart component passes correct props without errors for valid prop "align": "center", "border": Object { "stroke": "gray", - "strokeWidth": 1, + "strokeWidth": 0, }, "label": Object { "fontFamily": "Sans-Serif", @@ -371,7 +354,7 @@ exports[`DonutChart component passes correct props without errors for valid prop }, }, "xAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -387,7 +370,7 @@ exports[`DonutChart component passes correct props without errors for valid prop "visible": true, }, "yAxisLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 12, "fontStyle": "normal", "fontVariant": "normal", @@ -482,7 +465,7 @@ exports[`DonutChart component passes correct props without errors for valid prop "emptySizeRatio": 0, "fillLabel": Object { "clipText": false, - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontStyle": "normal", "fontVariant": "normal", "fontWeight": 400, @@ -499,7 +482,7 @@ exports[`DonutChart component passes correct props without errors for valid prop "horizontalTextEnforcer": 1, "idealFontSizeJump": 1.05, "linkLabel": Object { - "fontFamily": "Sans-Serif", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "fontSize": 11, "fontStyle": "normal", "fontVariant": "normal", diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/contexts/uptime_theme_context.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/contexts/uptime_theme_context.tsx index 97787ba9db4e9..f420ead15cc94 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/contexts/uptime_theme_context.tsx +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/contexts/uptime_theme_context.tsx @@ -7,7 +7,7 @@ import { euiLightVars, euiDarkVars } from '@kbn/ui-theme'; import React, { createContext, useMemo, FC, PropsWithChildren } from 'react'; -import { DARK_THEME, LIGHT_THEME, PartialTheme, Theme } from '@elastic/charts'; +import { AMSTERDAM_DARK_THEME, AMSTERDAM_LIGHT_THEME, PartialTheme, Theme } from '@elastic/charts'; import { UptimeAppColors } from '../app/uptime_app'; export interface UptimeThemeContextValues { @@ -34,7 +34,7 @@ const defaultContext: UptimeThemeContextValues = { lightestShade: euiLightVars.euiColorLightestShade, }, chartTheme: { - baseTheme: LIGHT_THEME, + baseTheme: AMSTERDAM_LIGHT_THEME, }, }; @@ -76,7 +76,7 @@ export const UptimeThemeContextProvider: FC return { colors, chartTheme: { - baseTheme: darkMode ? DARK_THEME : LIGHT_THEME, + baseTheme: darkMode ? AMSTERDAM_DARK_THEME : AMSTERDAM_LIGHT_THEME, }, }; }, [colors, darkMode]); diff --git a/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/data_quality_details/storage_details/storage_treemap/index.test.tsx b/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/data_quality_details/storage_details/storage_treemap/index.test.tsx index 2210054471404..3e59b57ae2e3f 100644 --- a/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/data_quality_details/storage_details/storage_treemap/index.test.tsx +++ b/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/data_quality_details/storage_details/storage_treemap/index.test.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { DARK_THEME, Settings } from '@elastic/charts'; +import { AMSTERDAM_DARK_THEME, Settings } from '@elastic/charts'; import numeral from '@elastic/numeral'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; @@ -77,7 +77,9 @@ describe('StorageTreemap', () => { render( - + @@ -148,7 +150,9 @@ describe('StorageTreemap', () => { beforeEach(() => { render( - + diff --git a/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/index.test.tsx b/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/index.test.tsx index f925a67ea3d32..68584701132fe 100644 --- a/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/index.test.tsx +++ b/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/index.test.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { DARK_THEME } from '@elastic/charts'; +import { AMSTERDAM_DARK_THEME } from '@elastic/charts'; import { render, screen } from '@testing-library/react'; import { notificationServiceMock } from '@kbn/core-notifications-browser-mocks'; import React from 'react'; @@ -65,7 +65,7 @@ describe('DataQualityPanel', () => { reportDataQualityIndexChecked={jest.fn()} reportDataQualityCheckAllCompleted={jest.fn()} setLastChecked={jest.fn()} - baseTheme={DARK_THEME} + baseTheme={AMSTERDAM_DARK_THEME} toasts={toasts} defaultStartTime={'now-7d'} defaultEndTime={'now'} diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.test.tsx index 12113e5553457..9b36fb72b8c91 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.test.tsx @@ -18,7 +18,7 @@ import { WrappedByAutoSizer, useThemes, } from './common'; -import { LIGHT_THEME, DARK_THEME } from '@elastic/charts'; +import { AMSTERDAM_LIGHT_THEME, AMSTERDAM_DARK_THEME } from '@elastic/charts'; jest.mock('@elastic/eui', () => { const actual = jest.requireActual('@elastic/eui'); @@ -184,7 +184,7 @@ describe('checkIfAllValuesAreZero', () => { }); const { result } = renderHook(() => useThemes()); - expect(result.current.baseTheme).toBe(LIGHT_THEME); + expect(result.current.baseTheme).toBe(AMSTERDAM_LIGHT_THEME); }); it('should return dark baseTheme when isDarkMode true', () => { @@ -194,7 +194,7 @@ describe('checkIfAllValuesAreZero', () => { }); const { result } = renderHook(() => useThemes()); - expect(result.current.baseTheme).toBe(DARK_THEME); + expect(result.current.baseTheme).toBe(AMSTERDAM_DARK_THEME); }); }); }); diff --git a/yarn.lock b/yarn.lock index d2d8c9b651027..246a981ae9c04 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2058,10 +2058,10 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@68.1.0": - version "68.1.0" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-68.1.0.tgz#7c2e471e984cb8cfe9a05dba8eda19ff26a880e7" - integrity sha512-4Wb0g9lgEpsgKJgdV6uqmY444elBJ5VhVJQ0ZUpnn8CV9mzEz8HqXAanpfqG9NTGca8C/EnwlSeQEgF+9orU4A== +"@elastic/charts@69.2.1": + version "69.2.1" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-69.2.1.tgz#28243fa3a9c3dc1af5118d97d437b2ef62398a2b" + integrity sha512-odyqH1qnBvWkwtEcqGJ7EBei1/Yj+59aUr0L1zgLcTapyOZZjvD3gHzAnVmZ0RaFf6qakwSYt8MBodNw7+vujA== dependencies: "@popperjs/core" "^2.11.8" bezier-easing "^2.1.0"