From a8f9c8b929c3aa565fa5f67efa1308a9b599825e Mon Sep 17 00:00:00 2001 From: Joan Perals Tresserra Date: Fri, 19 Sep 2025 12:08:27 +0200 Subject: [PATCH] chore: Sync examples changes --- package-lock.json | 26 +++- package.json | 2 + src/pages/dashboard/widgets/chart-commons.tsx | 114 +++++++++++------- .../dashboard/widgets/instance-hours/data.ts | 64 +++++----- .../widgets/instance-hours/index.tsx | 67 +++++----- .../dashboard/widgets/network-traffic/data.ts | 90 +++++++------- .../widgets/network-traffic/index.tsx | 60 +++++---- .../dashboard/widgets/zone-status/index.tsx | 58 +++++---- .../origin-request-policy.tsx | 2 +- test/e2e/configurable-dashboard.test.ts | 2 +- 10 files changed, 274 insertions(+), 211 deletions(-) diff --git a/package-lock.json b/package-lock.json index b09dc7c9..fcf4475d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@babel/preset-typescript": "^7.18.6", "@cloudscape-design/board-components": "^3.0.0", "@cloudscape-design/browser-test-tools": "^3.0.0", + "@cloudscape-design/chart-components": "^1.0.0", "@cloudscape-design/chat-components": "^1.0.0", "@cloudscape-design/code-view": "^3.0.0", "@cloudscape-design/collection-hooks": "^1.0.0", @@ -47,6 +48,7 @@ "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-simple-import-sort": "^12.1.1", + "highcharts": "^12.2.0", "husky": "^8.0.1", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", @@ -3926,12 +3928,6 @@ "tslib": "2" } }, - "node_modules/@juggle/resize-observer": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz", - "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==", - "dev": true - }, "node_modules/@leichtgewicht/ip-codec": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz", @@ -11322,6 +11318,24 @@ "node": ">= 0.4" } }, + "node_modules/highcharts": { + "version": "12.4.0", + "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-12.4.0.tgz", + "integrity": "sha512-o6UxxfChSUrvrZUbWrAuqL1HO/+exhAUPcZY6nnqLsadZQlnP16d082sg7DnXKZCk1gtfkyfkp6g3qkIZ9miZg==", + "dev": true, + "license": "https://www.highcharts.com/license" + }, + "node_modules/highcharts-react-official": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/highcharts-react-official/-/highcharts-react-official-3.2.2.tgz", + "integrity": "sha512-2kkWOB6RpdR26fmAJkrtJFG9xWFUDGKWyat88tW3fa/3l/Jc7D5ZfwTng2MZsdiKIH32AFy0Pr75udUe7uN6LA==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "highcharts": ">=6.0.0", + "react": ">=16.8.0" + } + }, "node_modules/hosted-git-info": { "version": "2.8.9", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", diff --git a/package.json b/package.json index 8a9e2b7a..8273dda0 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "@babel/preset-typescript": "^7.18.6", "@cloudscape-design/board-components": "^3.0.0", "@cloudscape-design/browser-test-tools": "^3.0.0", + "@cloudscape-design/chart-components": "^1.0.0", "@cloudscape-design/chat-components": "^1.0.0", "@cloudscape-design/code-view": "^3.0.0", "@cloudscape-design/collection-hooks": "^1.0.0", @@ -61,6 +62,7 @@ "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-simple-import-sort": "^12.1.1", + "highcharts": "^12.2.0", "husky": "^8.0.1", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", diff --git a/src/pages/dashboard/widgets/chart-commons.tsx b/src/pages/dashboard/widgets/chart-commons.tsx index 062bce50..6a4fb353 100644 --- a/src/pages/dashboard/widgets/chart-commons.tsx +++ b/src/pages/dashboard/widgets/chart-commons.tsx @@ -1,69 +1,79 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: MIT-0 -import React from 'react'; +import React, { useEffect, useState } from 'react'; +import type Highcharts from 'highcharts'; +import { CartesianChartProps } from '@cloudscape-design/chart-components'; import Box from '@cloudscape-design/components/box'; export const percentageFormatter = (value: number) => `${(value * 100).toFixed(0)}%`; -const numberTickFormatter = (value: number) => { +export const numberTickFormatter = (value: number | null) => { + if (value === null) { + return ''; + } if (Math.abs(value) < 1000) { return value.toString(); } return (value / 1000).toFixed() + 'k'; }; -export const dateTimeFormatter = (date: Date) => +export const dateTimeFormatter = (date: number | null) => date - .toLocaleDateString('en-US', { - month: 'short', - day: 'numeric', - hour: 'numeric', - minute: 'numeric', - hour12: false, - }) - .split(',') - .join('\n'); + ? new Date(date) + .toLocaleDateString('en-US', { + month: 'short', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + hour12: false, + }) + .split(',') + .join('\n') + : ''; -export const dateFormatter = (date: Date) => +export const dateFormatter = (date: number | null) => date - .toLocaleDateString('en-US', { - month: 'short', - day: 'numeric', - hour12: false, - }) - .split(' ') - .join('\n'); + ? new Date(date) + .toLocaleDateString('en-US', { + month: 'short', + day: 'numeric', + hour12: false, + }) + .split(' ') + .join('\n') + : ''; -export const commonChartProps = { - loadingText: 'Loading chart', - errorText: 'Error loading data.', - recoveryText: 'Retry', - empty: ( - - No data available - - There is no data available +export const commonChartProps: Omit = { + noData: { + statusType: 'finished', + empty: ( + + No data available + + There is no data available + - - ), - noMatch: ( - - No matching data - - There is no matching data to display + ), + noMatch: ( + + No matching data + + There is no matching data to display + - - ), + ), + }, i18nStrings: { - filterLabel: 'Filter displayed data', - filterPlaceholder: 'Filter data', - filterSelectedAriaLabel: 'selected', + loadingText: 'Loading chart', + errorText: 'Error loading data.', + recoveryText: 'Retry', + seriesFilterLabel: 'Filter displayed data', + seriesFilterPlaceholder: 'Filter data', + seriesFilterSelectedAriaLabel: 'selected', legendAriaLabel: 'Legend', - chartAriaRoleDescription: 'line chart', - xAxisAriaRoleDescription: 'x axis', - yAxisAriaRoleDescription: 'y axis', - yTickFormatter: numberTickFormatter, + xAxisRoleDescription: 'x axis', + yAxisRoleDescription: 'y axis', }, }; @@ -71,3 +81,17 @@ export const lineChartInstructions = 'Use up/down arrow keys to navigate between series, and left/right arrow keys to navigate within a series.'; export const barChartInstructions = 'Use left/right arrow keys to navigate between data groups.'; + +export const useHighcharts = () => { + const [highcharts, setHighcharts] = useState(null); + useEffect(() => { + const load = async () => { + const importedHighcharts = await import('highcharts'); + await import('highcharts/modules/accessibility'); + await import('highcharts/highcharts-more'); + setHighcharts(importedHighcharts); + }; + load(); + }, []); + return highcharts; +}; diff --git a/src/pages/dashboard/widgets/instance-hours/data.ts b/src/pages/dashboard/widgets/instance-hours/data.ts index d53c9fb8..eb31d265 100644 --- a/src/pages/dashboard/widgets/instance-hours/data.ts +++ b/src/pages/dashboard/widgets/instance-hours/data.ts @@ -1,46 +1,42 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: MIT-0 -import { BarChartProps } from '@cloudscape-design/components/bar-chart'; - -const cpuData = [ - { date: new Date(2020, 8, 16), 'm1.large': 878, 'm1.xlarge': 491, 'm1.medium': 284, 'm1.small': 70 }, - { date: new Date(2020, 8, 17), 'm1.large': 781, 'm1.xlarge': 435, 'm1.medium': 242, 'm1.small': 96 }, - { date: new Date(2020, 8, 18), 'm1.large': 788, 'm1.xlarge': 478, 'm1.medium': 311, 'm1.small': 79 }, - { date: new Date(2020, 8, 19), 'm1.large': 729, 'm1.xlarge': 558, 'm1.medium': 298, 'm1.small': 97 }, - { date: new Date(2020, 8, 20), 'm1.large': 988, 'm1.xlarge': 530, 'm1.medium': 255, 'm1.small': 97 }, - { date: new Date(2020, 8, 21), 'm1.large': 1016, 'm1.xlarge': 445, 'm1.medium': 339, 'm1.small': 70 }, - { date: new Date(2020, 8, 22), 'm1.large': 987, 'm1.xlarge': 549, 'm1.medium': 273, 'm1.small': 62 }, - { date: new Date(2020, 8, 23), 'm1.large': 986, 'm1.xlarge': 518, 'm1.medium': 341, 'm1.small': 67 }, - { date: new Date(2020, 8, 24), 'm1.large': 925, 'm1.xlarge': 454, 'm1.medium': 382, 'm1.small': 68 }, - { date: new Date(2020, 8, 25), 'm1.large': 742, 'm1.xlarge': 538, 'm1.medium': 361, 'm1.small': 70 }, - { date: new Date(2020, 8, 26), 'm1.large': 920, 'm1.xlarge': 486, 'm1.medium': 262, 'm1.small': 91 }, - { date: new Date(2020, 8, 27), 'm1.large': 826, 'm1.xlarge': 457, 'm1.medium': 248, 'm1.small': 76 }, - { date: new Date(2020, 8, 28), 'm1.large': 698, 'm1.xlarge': 534, 'm1.medium': 243, 'm1.small': 66 }, - { date: new Date(2020, 8, 29), 'm1.large': 1003, 'm1.xlarge': 523, 'm1.medium': 393, 'm1.small': 70 }, - { date: new Date(2020, 8, 30), 'm1.large': 811, 'm1.xlarge': 527, 'm1.medium': 353, 'm1.small': 88 }, +export const cpuData = [ + { date: new Date(2020, 8, 16).getTime(), 'm1.large': 878, 'm1.xlarge': 491, 'm1.medium': 284, 'm1.small': 70 }, + { date: new Date(2020, 8, 17).getTime(), 'm1.large': 781, 'm1.xlarge': 435, 'm1.medium': 242, 'm1.small': 96 }, + { date: new Date(2020, 8, 18).getTime(), 'm1.large': 788, 'm1.xlarge': 478, 'm1.medium': 311, 'm1.small': 79 }, + { date: new Date(2020, 8, 19).getTime(), 'm1.large': 729, 'm1.xlarge': 558, 'm1.medium': 298, 'm1.small': 97 }, + { date: new Date(2020, 8, 20).getTime(), 'm1.large': 988, 'm1.xlarge': 530, 'm1.medium': 255, 'm1.small': 97 }, + { date: new Date(2020, 8, 21).getTime(), 'm1.large': 1016, 'm1.xlarge': 445, 'm1.medium': 339, 'm1.small': 70 }, + { date: new Date(2020, 8, 22).getTime(), 'm1.large': 987, 'm1.xlarge': 549, 'm1.medium': 273, 'm1.small': 62 }, + { date: new Date(2020, 8, 23).getTime(), 'm1.large': 986, 'm1.xlarge': 518, 'm1.medium': 341, 'm1.small': 67 }, + { date: new Date(2020, 8, 24).getTime(), 'm1.large': 925, 'm1.xlarge': 454, 'm1.medium': 382, 'm1.small': 68 }, + { date: new Date(2020, 8, 25).getTime(), 'm1.large': 742, 'm1.xlarge': 538, 'm1.medium': 361, 'm1.small': 70 }, + { date: new Date(2020, 8, 26).getTime(), 'm1.large': 920, 'm1.xlarge': 486, 'm1.medium': 262, 'm1.small': 91 }, + { date: new Date(2020, 8, 27).getTime(), 'm1.large': 826, 'm1.xlarge': 457, 'm1.medium': 248, 'm1.small': 76 }, + { date: new Date(2020, 8, 28).getTime(), 'm1.large': 698, 'm1.xlarge': 534, 'm1.medium': 243, 'm1.small': 66 }, + { date: new Date(2020, 8, 29).getTime(), 'm1.large': 1003, 'm1.xlarge': 523, 'm1.medium': 393, 'm1.small': 70 }, + { date: new Date(2020, 8, 30).getTime(), 'm1.large': 811, 'm1.xlarge': 527, 'm1.medium': 353, 'm1.small': 88 }, ]; -export const cpuDomain = cpuData.map(({ date }) => date); - -export const cpuSeries: BarChartProps['series'] = [ +export const cpuSeries = [ { - title: 'm1.large', - type: 'bar', - data: cpuData.map(datum => ({ x: datum.date, y: datum['m1.large'] })), + name: 'm1.large', + type: 'column', + data: cpuData.map(datum => datum['m1.large']), }, { - title: 'm1.xlarge', - type: 'bar', - data: cpuData.map(datum => ({ x: datum.date, y: datum['m1.xlarge'] })), + name: 'm1.xlarge', + type: 'column', + data: cpuData.map(datum => datum['m1.xlarge']), }, { - title: 'm1.medium', - type: 'bar', - data: cpuData.map(datum => ({ x: datum.date, y: datum['m1.medium'] })), + name: 'm1.medium', + type: 'column', + data: cpuData.map(datum => datum['m1.medium']), }, { - title: 'm1.small', - type: 'bar', - data: cpuData.map(datum => ({ x: datum.date, y: datum['m1.small'] })), + name: 'm1.small', + type: 'column', + data: cpuData.map(datum => datum['m1.small']), }, -]; +] as const; diff --git a/src/pages/dashboard/widgets/instance-hours/index.tsx b/src/pages/dashboard/widgets/instance-hours/index.tsx index c3f72a64..b891bf10 100644 --- a/src/pages/dashboard/widgets/instance-hours/index.tsx +++ b/src/pages/dashboard/widgets/instance-hours/index.tsx @@ -2,13 +2,19 @@ // SPDX-License-Identifier: MIT-0 import React from 'react'; -import BarChart from '@cloudscape-design/components/bar-chart'; +import { CartesianChart } from '@cloudscape-design/chart-components'; import Header from '@cloudscape-design/components/header'; import Link from '@cloudscape-design/components/link'; -import { barChartInstructions, commonChartProps, dateFormatter } from '../chart-commons'; +import { + barChartInstructions, + commonChartProps, + dateFormatter, + numberTickFormatter, + useHighcharts, +} from '../chart-commons'; import { WidgetConfig } from '../interfaces'; -import { cpuDomain, cpuSeries } from './data'; +import { cpuData, cpuSeries } from './data'; function InstanceHoursHeader() { return ( @@ -19,39 +25,42 @@ function InstanceHoursHeader() { } function InstanceHoursContent() { + const highcharts = useHighcharts(); return ( - dateFormatter(datum.date)), + }} + yAxis={{ title: 'Total instance hours', min: 0, max: 2000, valueFormatter: numberTickFormatter }} ariaLabel="Instance hours" - ariaDescription={`Bar chart showing total instance hours per instance type over the last 15 days. ${barChartInstructions}`} + series={cpuSeries} i18nStrings={{ ...commonChartProps.i18nStrings, - filterLabel: 'Filter displayed instance types', - filterPlaceholder: 'Filter instance types', - xTickFormatter: dateFormatter, + chartRoleDescription: `Bar chart showing total instance hours per instance type over the last 15 days. ${barChartInstructions}`, + seriesFilterLabel: 'Filter displayed instance types', + seriesFilterPlaceholder: 'Filter instance types', + }} + tooltip={{ + point: ({ item }) => ({ + key: item.series.name, + value: ( + + {item.y} + + ), + }), }} - detailPopoverSeriesContent={({ series, y }) => ({ - key: series.title, - value: ( - - {y} - - ), - })} /> ); } diff --git a/src/pages/dashboard/widgets/network-traffic/data.ts b/src/pages/dashboard/widgets/network-traffic/data.ts index bc0ef6a5..d36128e7 100644 --- a/src/pages/dashboard/widgets/network-traffic/data.ts +++ b/src/pages/dashboard/widgets/network-traffic/data.ts @@ -1,143 +1,139 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: MIT-0 -import { LineChartProps } from '@cloudscape-design/components/line-chart'; +import { CartesianChartProps } from '@cloudscape-design/chart-components'; const networkTrafficData = [ - { date: new Date(1600984800000), 'i-03736447': 68003, 'i-06f70d90': 46560, 'i-02924ba6': 25865, 'i-0e36f15f': 21350 }, - { date: new Date(1600985700000), 'i-03736447': 67382, 'i-06f70d90': 49666, 'i-02924ba6': 24253, 'i-0e36f15f': 21055 }, - { date: new Date(1600986600000), 'i-03736447': 74322, 'i-06f70d90': 47996, 'i-02924ba6': 25269, 'i-0e36f15f': 20188 }, - { date: new Date(1600987500000), 'i-03736447': 72499, 'i-06f70d90': 46020, 'i-02924ba6': 20308, 'i-0e36f15f': 22246 }, - { date: new Date(1600988400000), 'i-03736447': 69616, 'i-06f70d90': 46568, 'i-02924ba6': 24315, 'i-0e36f15f': 21998 }, + { date: 1600984800000, 'i-03736447': 68003, 'i-06f70d90': 46560, 'i-02924ba6': 25865, 'i-0e36f15f': 21350 }, + { date: 1600985700000, 'i-03736447': 67382, 'i-06f70d90': 49666, 'i-02924ba6': 24253, 'i-0e36f15f': 21055 }, + { date: 1600986600000, 'i-03736447': 74322, 'i-06f70d90': 47996, 'i-02924ba6': 25269, 'i-0e36f15f': 20188 }, + { date: 1600987500000, 'i-03736447': 72499, 'i-06f70d90': 46020, 'i-02924ba6': 20308, 'i-0e36f15f': 22246 }, + { date: 1600988400000, 'i-03736447': 69616, 'i-06f70d90': 46568, 'i-02924ba6': 24315, 'i-0e36f15f': 21998 }, { - date: new Date(1600989300000), + date: 1600989300000, 'i-03736447': 70055, 'i-06f70d90': 47205, 'i-02924ba6': 25181, 'i-0e36f15f': 190307, }, { - date: new Date(1600990200000), + date: 1600990200000, 'i-03736447': 74055, 'i-06f70d90': 46329, 'i-02924ba6': 23027, 'i-0e36f15f': 180385, }, - { date: new Date(1600991100000), 'i-03736447': 73420, 'i-06f70d90': 49614, 'i-02924ba6': 20500, 'i-0e36f15f': 21715 }, - { date: new Date(1600992000000), 'i-03736447': 65713, 'i-06f70d90': 49792, 'i-02924ba6': 25369, 'i-0e36f15f': 20760 }, - { date: new Date(1600992900000), 'i-03736447': 68954, 'i-06f70d90': 48284, 'i-02924ba6': 23369, 'i-0e36f15f': 21803 }, - { date: new Date(1600993800000), 'i-03736447': 74289, 'i-06f70d90': 47697, 'i-02924ba6': 24184, 'i-0e36f15f': 21356 }, - { date: new Date(1600994700000), 'i-03736447': 76521, 'i-06f70d90': 46463, 'i-02924ba6': 22768, 'i-0e36f15f': 20269 }, - { date: new Date(1600995600000), 'i-03736447': 78337, 'i-06f70d90': 47384, 'i-02924ba6': 21965, 'i-0e36f15f': 20700 }, + { date: 1600991100000, 'i-03736447': 73420, 'i-06f70d90': 49614, 'i-02924ba6': 20500, 'i-0e36f15f': 21715 }, + { date: 1600992000000, 'i-03736447': 65713, 'i-06f70d90': 49792, 'i-02924ba6': 25369, 'i-0e36f15f': 20760 }, + { date: 1600992900000, 'i-03736447': 68954, 'i-06f70d90': 48284, 'i-02924ba6': 23369, 'i-0e36f15f': 21803 }, + { date: 1600993800000, 'i-03736447': 74289, 'i-06f70d90': 47697, 'i-02924ba6': 24184, 'i-0e36f15f': 21356 }, + { date: 1600994700000, 'i-03736447': 76521, 'i-06f70d90': 46463, 'i-02924ba6': 22768, 'i-0e36f15f': 20269 }, + { date: 1600995600000, 'i-03736447': 78337, 'i-06f70d90': 47384, 'i-02924ba6': 21965, 'i-0e36f15f': 20700 }, { - date: new Date(1600996500000), + date: 1600996500000, 'i-03736447': 105029, 'i-06f70d90': 47986, 'i-02924ba6': 23129, 'i-0e36f15f': 20881, }, { - date: new Date(1600997400000), + date: 1600997400000, 'i-03736447': 104961, 'i-06f70d90': 49529, 'i-02924ba6': 23483, 'i-0e36f15f': 20082, }, { - date: new Date(1600998300000), + date: 1600998300000, 'i-03736447': 102044, 'i-06f70d90': 48146, 'i-02924ba6': 21048, 'i-0e36f15f': 21947, }, { - date: new Date(1600999200000), + date: 1600999200000, 'i-03736447': 120062, 'i-06f70d90': 46001, 'i-02924ba6': 23181, 'i-0e36f15f': 20636, }, { - date: new Date(1601000100000), + date: 1601000100000, 'i-03736447': 140112, 'i-06f70d90': 46649, 'i-02924ba6': 22824, 'i-0e36f15f': 21470, }, { - date: new Date(1601001000000), + date: 1601001000000, 'i-03736447': 138935, 'i-06f70d90': 47895, 'i-02924ba6': 24827, 'i-0e36f15f': 21910, }, { - date: new Date(1601001900000), + date: 1601001900000, 'i-03736447': 139103, 'i-06f70d90': 47977, 'i-02924ba6': 23661, 'i-0e36f15f': 20620, }, { - date: new Date(1601002800000), + date: 1601002800000, 'i-03736447': 132378, 'i-06f70d90': 46908, 'i-02924ba6': 21907, 'i-0e36f15f': 20412, }, { - date: new Date(1601003700000), + date: 1601003700000, 'i-03736447': 112884, 'i-06f70d90': 46496, 'i-02924ba6': 59489, 'i-0e36f15f': 22751, }, { - date: new Date(1601004600000), + date: 1601004600000, 'i-03736447': 74689, 'i-06f70d90': 47991, 'i-02924ba6': 190975, 'i-0e36f15f': 21277, }, - { date: new Date(1601005500000), 'i-03736447': 68451, 'i-06f70d90': 48881, 'i-02924ba6': 22827, 'i-0e36f15f': 21625 }, - { date: new Date(1601006400000), 'i-03736447': 66404, 'i-06f70d90': 48833, 'i-02924ba6': 20384, 'i-0e36f15f': 21267 }, - { date: new Date(1601007300000), 'i-03736447': 67037, 'i-06f70d90': 46665, 'i-02924ba6': 23365, 'i-0e36f15f': 21555 }, - { date: new Date(1601008200000), 'i-03736447': 70425, 'i-06f70d90': 49552, 'i-02924ba6': 23635, 'i-0e36f15f': 21072 }, - { date: new Date(1601009100000), 'i-03736447': 65583, 'i-06f70d90': 49013, 'i-02924ba6': 22462, 'i-0e36f15f': 21418 }, - { date: new Date(1601010000000), 'i-03736447': 67361, 'i-06f70d90': 48834, 'i-02924ba6': 23409, 'i-0e36f15f': 20808 }, - { date: new Date(1601010900000), 'i-03736447': 66421, 'i-06f70d90': 49644, 'i-02924ba6': 20730, 'i-0e36f15f': 22795 }, - { date: new Date(1601011800000), 'i-03736447': 69670, 'i-06f70d90': 48032, 'i-02924ba6': 21257, 'i-0e36f15f': 20953 }, - { date: new Date(1601012700000), 'i-03736447': 68534, 'i-06f70d90': 49544, 'i-02924ba6': 23190, 'i-0e36f15f': 20834 }, - { date: new Date(1601013600000), 'i-03736447': 71507, 'i-06f70d90': 49043, 'i-02924ba6': 23497, 'i-0e36f15f': 22604 }, + { date: 1601005500000, 'i-03736447': 68451, 'i-06f70d90': 48881, 'i-02924ba6': 22827, 'i-0e36f15f': 21625 }, + { date: 1601006400000, 'i-03736447': 66404, 'i-06f70d90': 48833, 'i-02924ba6': 20384, 'i-0e36f15f': 21267 }, + { date: 1601007300000, 'i-03736447': 67037, 'i-06f70d90': 46665, 'i-02924ba6': 23365, 'i-0e36f15f': 21555 }, + { date: 1601008200000, 'i-03736447': 70425, 'i-06f70d90': 49552, 'i-02924ba6': 23635, 'i-0e36f15f': 21072 }, + { date: 1601009100000, 'i-03736447': 65583, 'i-06f70d90': 49013, 'i-02924ba6': 22462, 'i-0e36f15f': 21418 }, + { date: 1601010000000, 'i-03736447': 67361, 'i-06f70d90': 48834, 'i-02924ba6': 23409, 'i-0e36f15f': 20808 }, + { date: 1601010900000, 'i-03736447': 66421, 'i-06f70d90': 49644, 'i-02924ba6': 20730, 'i-0e36f15f': 22795 }, + { date: 1601011800000, 'i-03736447': 69670, 'i-06f70d90': 48032, 'i-02924ba6': 21257, 'i-0e36f15f': 20953 }, + { date: 1601012700000, 'i-03736447': 68534, 'i-06f70d90': 49544, 'i-02924ba6': 23190, 'i-0e36f15f': 20834 }, + { date: 1601013600000, 'i-03736447': 71507, 'i-06f70d90': 49043, 'i-02924ba6': 23497, 'i-0e36f15f': 22604 }, ]; -export const networkTrafficDomain = [ - networkTrafficData[0].date, - networkTrafficData[networkTrafficData.length - 1].date, -]; +export const networkTrafficDomain = { + min: networkTrafficData[0].date, + max: networkTrafficData[networkTrafficData.length - 1].date, +}; -export const networkTrafficSeries: LineChartProps['series'] = [ +export const networkTrafficSeries: CartesianChartProps.SeriesOptions[] = [ { - title: 'i-03736447', + name: 'i-03736447', type: 'line', - valueFormatter: value => value.toLocaleString('en-US'), data: networkTrafficData.map(datum => ({ x: datum.date, y: datum['i-03736447'] })), }, { - title: 'i-06f70d90', + name: 'i-06f70d90', type: 'line', - valueFormatter: value => value.toLocaleString('en-US'), data: networkTrafficData.map(datum => ({ x: datum.date, y: datum['i-06f70d90'] })), }, { - title: 'i-02924ba6', + name: 'i-02924ba6', type: 'line', - valueFormatter: value => value.toLocaleString('en-US'), data: networkTrafficData.map(datum => ({ x: datum.date, y: datum['i-02924ba6'] })), }, { - title: 'i-0e36f15f', + name: 'i-0e36f15f', type: 'line', - valueFormatter: value => value.toLocaleString('en-US'), data: networkTrafficData.map(datum => ({ x: datum.date, y: datum['i-0e36f15f'] })), }, ]; diff --git a/src/pages/dashboard/widgets/network-traffic/index.tsx b/src/pages/dashboard/widgets/network-traffic/index.tsx index f5f1bfe7..cc5092e5 100644 --- a/src/pages/dashboard/widgets/network-traffic/index.tsx +++ b/src/pages/dashboard/widgets/network-traffic/index.tsx @@ -2,11 +2,17 @@ // SPDX-License-Identifier: MIT-0 import React from 'react'; +import { CartesianChart } from '@cloudscape-design/chart-components'; import Header from '@cloudscape-design/components/header'; -import LineChart from '@cloudscape-design/components/line-chart'; import Link from '@cloudscape-design/components/link'; -import { commonChartProps, dateTimeFormatter, lineChartInstructions } from '../chart-commons'; +import { + commonChartProps, + dateTimeFormatter, + lineChartInstructions, + numberTickFormatter, + useHighcharts, +} from '../chart-commons'; import { WidgetConfig } from '../interfaces'; import { networkTrafficDomain, networkTrafficSeries } from './data'; @@ -19,34 +25,44 @@ function NetworkTrafficHeader() { } export default function NetworkTrafficContent() { + const highcharts = useHighcharts(); return ( - ({ + key: ( + + {item.series.name} + + ), + value: item.y, + }), }} - detailPopoverSeriesContent={({ series, y }) => ({ - key: ( - - {series.title} - - ), - value: y, - })} /> ); } diff --git a/src/pages/dashboard/widgets/zone-status/index.tsx b/src/pages/dashboard/widgets/zone-status/index.tsx index aee08b43..2f75c073 100644 --- a/src/pages/dashboard/widgets/zone-status/index.tsx +++ b/src/pages/dashboard/widgets/zone-status/index.tsx @@ -2,11 +2,11 @@ // SPDX-License-Identifier: MIT-0 import React from 'react'; +import { PieChart } from '@cloudscape-design/chart-components'; import Header from '@cloudscape-design/components/header'; -import PieChart from '@cloudscape-design/components/pie-chart'; import { colorChartsStatusHigh, colorChartsStatusPositive } from '@cloudscape-design/design-tokens'; -import { percentageFormatter } from '../chart-commons'; +import { percentageFormatter, useHighcharts } from '../chart-commons'; import { WidgetConfig } from '../interfaces'; function ZoneStatusHeader() { @@ -18,37 +18,43 @@ function ZoneStatusHeader() { } function ZoneStatusContent() { + const highcharts = useHighcharts(); return ( `${datum.value} zones, ${percentageFormatter(datum.value / sum)}`} - detailPopoverContent={(datum, sum) => [ - { - key: 'Zone count', - value: datum.value, - }, - { - key: 'Percentage', - value: percentageFormatter(datum.value / sum), - }, - ]} + segmentDescription={({ segmentValue, totalValue }) => + `${segmentValue} zones, ${percentageFormatter(segmentValue / totalValue)}` + } + tooltip={{ + details: ({ segmentValue, totalValue }) => [ + { + key: 'Zone count', + value: segmentValue, + }, + { + key: 'Percentage', + value: percentageFormatter(segmentValue / totalValue), + }, + ], + }} i18nStrings={{ - filterLabel: 'Filter displayed data', - filterPlaceholder: 'Filter data', - filterSelectedAriaLabel: 'selected', + chartRoleDescription: 'Pie chart summarizing the status of all zones.', + seriesFilterLabel: 'Filter displayed data', + seriesFilterPlaceholder: 'Filter data', + seriesFilterSelectedAriaLabel: 'selected', detailPopoverDismissAriaLabel: 'Dismiss', - legendAriaLabel: 'Legend', - chartAriaRoleDescription: 'pie chart', - segmentAriaRoleDescription: 'segment', + segmentRoleDescription: 'segment', }} /> ); diff --git a/src/pages/form/components/cache-behavior-panel/origin-request-policy.tsx b/src/pages/form/components/cache-behavior-panel/origin-request-policy.tsx index 49a22634..f5e386b2 100644 --- a/src/pages/form/components/cache-behavior-panel/origin-request-policy.tsx +++ b/src/pages/form/components/cache-behavior-panel/origin-request-policy.tsx @@ -61,7 +61,7 @@ export default function OriginRequestPolicy({ description={ <> Choose an existing origin request policy or create a new one. To configure advanced settings{' '} - + create origin request policy . diff --git a/test/e2e/configurable-dashboard.test.ts b/test/e2e/configurable-dashboard.test.ts index 3242667a..c8d6c60b 100644 --- a/test/e2e/configurable-dashboard.test.ts +++ b/test/e2e/configurable-dashboard.test.ts @@ -34,7 +34,7 @@ class ConfigurableDashboardPageObject extends BaseExamplePage { { type: 'pointerMove', duration: 0, origin: originEl, x: 1, y: 1 }, { type: 'pointerDown', button: 0 }, { type: 'pause', duration: 200 }, - { type: 'pointerMove', duration: 200, origin: 'pointer', x: xOffset, y: yOffset }, + { type: 'pointerMove', duration: 400, origin: 'pointer', x: xOffset, y: yOffset }, { type: 'pointerUp', button: 0 }, { type: 'pause', duration: 200 }, ],