Skip to content

Commit e4b6038

Browse files
PixselvePixselve
committed
Merge remote-tracking branch 'refs/remotes/origin/main' into warning-icon-to-markers
# Conflicts: # src/__tests__/__snapshots__/documenter.test.ts.snap # src/core/chart-api/chart-extra-legend.tsx # src/core/interfaces.ts # src/core/utils.ts
2 parents 04918a0 + 80443d9 commit e4b6038

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1538
-303
lines changed

‎.github/CODEOWNERS‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
* @pan-kot @jperals
1+
* @cloudscape-design/cloudscape-dev

‎.github/workflows/visual-regression.yml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,19 @@ on:
99
- main
1010
merge_group:
1111

12+
permissions:
13+
contents: read
14+
actions: write
15+
1216
env:
1317
VISUAL_REGRESSION_SNAPSHOT_DIRECTORY: "__image_snapshots__"
1418

1519
jobs:
1620
test:
1721
name: Run Tests
1822
runs-on: ubuntu-latest
23+
permissions:
24+
contents: read
1925
if: github.event.ref != 'refs/heads/main'
2026
steps:
2127
- uses: actions/checkout@v4
@@ -46,6 +52,8 @@ jobs:
4652
update:
4753
name: Update Snapshots
4854
runs-on: ubuntu-latest
55+
permissions:
56+
contents: write
4957
if: github.event.ref == 'refs/heads/main'
5058
steps:
5159
- uses: actions/checkout@v4

‎pages/03-core/core-dual-axis-chart.page.tsx‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import { omit } from "lodash";
5+
6+
import Link from "@cloudscape-design/components/link";
7+
8+
import CoreChart from "../../lib/components/internal-do-not-use/core-chart";
9+
import { dateFormatter } from "../common/formatters";
10+
import { PageSettingsForm, useChartSettings } from "../common/page-settings";
11+
import { Page } from "../common/templates";
12+
import pseudoRandom from "../utils/pseudo-random";
13+
14+
function randomInt(min: number, max: number) {
15+
return min + Math.floor(pseudoRandom() * (max - min));
16+
}
17+
18+
const colors = [
19+
"#F15C80",
20+
"#2B908F",
21+
"#F45B5B",
22+
"#91E8E1",
23+
"#8085E9",
24+
"#E4D354",
25+
"#8D4654",
26+
"#7798BF",
27+
"#AAEEEE",
28+
"#FF9655",
29+
];
30+
31+
const baseline = [
32+
{ x: 1600984800000, y: 58020 },
33+
{ x: 1600985700000, y: 102402 },
34+
{ x: 1600986600000, y: 104920 },
35+
{ x: 1600987500000, y: 94031 },
36+
{ x: 1600988400000, y: 125021 },
37+
{ x: 1600989300000, y: 159219 },
38+
{ x: 1600990200000, y: 193082 },
39+
{ x: 1600991100000, y: 162592 },
40+
{ x: 1600992000000, y: 274021 },
41+
{ x: 1600992900000, y: 264286 },
42+
{ x: 1600993800000, y: 289210 },
43+
{ x: 1600994700000, y: 256362 },
44+
{ x: 1600995600000, y: 257306 },
45+
{ x: 1600996500000, y: 186776 },
46+
{ x: 1600997400000, y: 294020 },
47+
{ x: 1600998300000, y: 385975 },
48+
{ x: 1600999200000, y: 486039 },
49+
{ x: 1601000100000, y: 490447 },
50+
{ x: 1601001000000, y: 361845 },
51+
{ x: 1601001900000, y: 339058 },
52+
{ x: 1601002800000, y: 298028 },
53+
{ x: 1601003400000, y: 255555 },
54+
{ x: 1601003700000, y: 231902 },
55+
{ x: 1601004600000, y: 224558 },
56+
{ x: 1601005500000, y: 253901 },
57+
{ x: 1601006400000, y: 102839 },
58+
{ x: 1601007300000, y: 234943 },
59+
{ x: 1601008200000, y: 204405 },
60+
{ x: 1601009100000, y: 190391 },
61+
{ x: 1601010000000, y: 183570 },
62+
{ x: 1601010900000, y: 162592 },
63+
{ x: 1601011800000, y: 148910 },
64+
];
65+
66+
const generatePrimaryAxisData = (letter: string, index: number) => {
67+
return baseline.map(({ x, y }) => ({
68+
name: `Events ${letter}`,
69+
x,
70+
y: y === null ? null : y + randomInt(-100000 * ((index % 3) + 1), 100000 * ((index % 3) + 1)),
71+
}));
72+
};
73+
74+
const generateSecondaryAxisData = (letter: string, index: number) => {
75+
return baseline.map(({ x, y }) => ({
76+
name: `Percentage ${letter}`,
77+
x,
78+
y: y === null ? null : (y / 10000) * randomInt(3 + (index % 5), 10 + (index % 10)),
79+
}));
80+
};
81+
82+
const primarySeriesData: Record<string, ReturnType<typeof generatePrimaryAxisData>> = {};
83+
for (let i = 0; i < 10; i++) {
84+
const letter = String.fromCharCode(65 + i);
85+
primarySeriesData[`data${letter}`] = generatePrimaryAxisData(letter, i);
86+
}
87+
88+
const secondarySeriesData: Record<string, ReturnType<typeof generatePrimaryAxisData>> = {};
89+
for (let i = 0; i < 10; i++) {
90+
const letter = String.fromCharCode(65 + i);
91+
secondarySeriesData[`data${letter}`] = generateSecondaryAxisData(letter, i);
92+
}
93+
94+
const series: Highcharts.SeriesOptionsType[] = [
95+
...Object.values(primarySeriesData),
96+
...Object.values(secondarySeriesData),
97+
].map((data, index) => {
98+
const name = data[0].name;
99+
const isPercentage = name.startsWith("Percentage");
100+
return {
101+
name,
102+
type: "line",
103+
data: data,
104+
yAxis: isPercentage ? 1 : 0,
105+
color: colors[index % colors.length],
106+
dashStyle: isPercentage ? "Dash" : "Solid",
107+
};
108+
});
109+
110+
export default function () {
111+
const { chartProps } = useChartSettings();
112+
return (
113+
<Page
114+
title="Core dual-axis chart demo"
115+
subtitle="This page demonstrates the use of the core chart with two Y axes for displaying data with different scales."
116+
settings={
117+
<PageSettingsForm
118+
selectedSettings={[
119+
"showLegend",
120+
"legendPosition",
121+
"legendBottomMaxHeight",
122+
"showLegendTitle",
123+
"showLegendActions",
124+
]}
125+
/>
126+
}
127+
>
128+
<CoreChart
129+
{...omit(chartProps.cartesian, "ref")}
130+
chartHeight={400}
131+
ariaLabel="Dual axis line chart"
132+
tooltip={{ placement: "outside" }}
133+
options={{
134+
series: series,
135+
xAxis: [
136+
{
137+
type: "datetime",
138+
title: { text: "Time (UTC)" },
139+
valueFormatter: dateFormatter,
140+
},
141+
],
142+
yAxis: [
143+
{
144+
title: { text: "Events" },
145+
},
146+
{
147+
opposite: true,
148+
title: { text: "Percentage (%)" },
149+
},
150+
],
151+
}}
152+
getLegendTooltipContent={({ legendItem }) => ({
153+
header: (
154+
<div style={{ display: "flex" }}>
155+
{legendItem.marker}
156+
{legendItem.name}
157+
</div>
158+
),
159+
body: (
160+
<table>
161+
<tbody style={{ textAlign: "left" }}>
162+
<tr>
163+
<th scope="row">Period</th>
164+
<td>15 min</td>
165+
</tr>
166+
<tr>
167+
<th scope="row">Statistic</th>
168+
<td>Average</td>
169+
</tr>
170+
<tr>
171+
<th scope="row">Unit</th>
172+
<td>Count</td>
173+
</tr>
174+
</tbody>
175+
</table>
176+
),
177+
footer: (
178+
<Link external={true} href="https://example.com/" variant="primary">
179+
Learn more
180+
</Link>
181+
),
182+
})}
183+
/>
184+
</Page>
185+
);
186+
}

‎pages/03-core/core-legend.page.tsx‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -109,21 +109,45 @@ const initialLegendItems: readonly LegendItem[] = [
109109
{
110110
id: "CPU Utilization",
111111
name: "CPU Utilization",
112-
marker: <ChartSeriesMarker i18nStrings={i18nStrings} color={colors[0]} type={"square"} visible={true} />,
112+
marker: (
113+
<ChartSeriesMarker
114+
status={"default"}
115+
i18nStrings={i18nStrings}
116+
color={colors[0]}
117+
type={"square"}
118+
visible={true}
119+
/>
120+
),
113121
visible: true,
114122
highlighted: false,
115123
},
116124
{
117125
id: "Memory Usage",
118126
name: "Memory Usage",
119-
marker: <ChartSeriesMarker i18nStrings={i18nStrings} color={colors[1]} type={"square"} visible={true} />,
127+
marker: (
128+
<ChartSeriesMarker
129+
status={"default"}
130+
i18nStrings={i18nStrings}
131+
color={colors[1]}
132+
type={"square"}
133+
visible={true}
134+
/>
135+
),
120136
visible: true,
121137
highlighted: false,
122138
},
123139
{
124140
id: "Storage Capacity",
125141
name: "Storage Capacity",
126-
marker: <ChartSeriesMarker i18nStrings={i18nStrings} color={colors[2]} type={"square"} visible={true} />,
142+
marker: (
143+
<ChartSeriesMarker
144+
status={"default"}
145+
i18nStrings={i18nStrings}
146+
color={colors[2]}
147+
type={"square"}
148+
visible={true}
149+
/>
150+
),
127151
visible: true,
128152
highlighted: false,
129153
},
@@ -186,6 +210,7 @@ export default function () {
186210
highlighted: visible,
187211
marker: (
188212
<ChartSeriesMarker
213+
status={"default"}
189214
i18nStrings={i18nStrings}
190215
color={colors[index % colors.length]}
191216
type={"square"}

‎pages/03-core/core-line-chart.page.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,9 @@ export default function () {
127127
},
128128
},
129129
}}
130-
getSeriesStatus={(s) => (s.userOptions.id === "A" ? "warning" : undefined)}
130+
getItemProps={(id) => ({
131+
status: id === "A" ? "warning" : "default",
132+
})}
131133
chartHeight={400}
132134
tooltip={{ placement: "outside" }}
133135
getTooltipContent={() => ({

‎pages/03-core/marker-permutations.page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ const permutationsForColors = [
5454
],
5555
color: [color],
5656
i18nStrings: [{ seriesStatusWarningAriaLabel: "warning" }],
57+
status: ["default"],
5758
},
5859
]),
5960
);

‎pages/06-visual-tests/cartesian-tooltip.page.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const dataA = baseline.map(({ x, y }) => ({ x, y }));
3131
const dataB = baseline.map(({ x, y }, index) => ({ x, y: y + index * 10000 }));
3232

3333
const series: Highcharts.SeriesOptionsType[] = [
34-
{ name: "A", type: "spline", data: dataA },
34+
{ id: 'A', name: "A", type: "spline", data: dataA },
3535
{ name: "B", type: "spline", data: dataB },
3636
];
3737

@@ -49,6 +49,9 @@ export default function () {
4949
}}
5050
chartHeight={400}
5151
tooltip={{ placement: "outside" }}
52+
getItemProps={(id) => ({
53+
status: id === "A" ? "warning" : "default",
54+
})}
5255
getTooltipContent={() => ({
5356
footer() {
5457
return <Button>Footer action</Button>;

‎pages/06-visual-tests/column-hover.page.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ function Chart({ type }: { type: "single" | "stacked" | "grouped" }) {
4646
plotOptions: { series: { stacking: type === "stacked" ? "normal" : undefined } },
4747
series: [
4848
{
49+
id: "Severe",
4950
name: "Severe",
5051
type: "column" as const,
5152
data: [22, 28, 25, 13, 28],
@@ -75,6 +76,9 @@ function Chart({ type }: { type: "single" | "stacked" | "grouped" }) {
7576
],
7677
yAxis: [{ title: { text: "Error count" } }],
7778
}}
79+
getItemProps={(id) => ({
80+
status: id === "Severe" ? "warning" : "default",
81+
})}
7882
callback={(api) => {
7983
setTimeout(() => {
8084
if (api.chart.series) {

‎pages/06-visual-tests/pie-tooltip.page.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const series: Highcharts.SeriesOptionsType[] = [
1515
type: "pie",
1616
data: [
1717
{ name: "Running", y: 60 },
18-
{ name: "Failed", y: 30 },
18+
{ name: "Failed", y: 30, id: "Failed" },
1919
{ name: "In-progress", y: 10 },
2020
],
2121
},
@@ -31,6 +31,9 @@ export default function () {
3131
options={{
3232
series: series,
3333
}}
34+
getItemProps={(id) => ({
35+
status: id === "Failed" ? "warning" : "default",
36+
})}
3437
chartHeight={400}
3538
getTooltipContent={() => ({
3639
footer() {

0 commit comments

Comments
 (0)