Skip to content

Commit eb5b9f8

Browse files
jperalsjperals
authored
Merge branch 'main' into main
2 parents 98fa299 + cea6c9d commit eb5b9f8

File tree

15 files changed

+240
-40
lines changed

15 files changed

+240
-40
lines changed

‎.github/workflows/dry-run.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ on:
88
- main
99
merge_group:
1010

11+
permissions:
12+
contents: read
13+
1114
jobs:
1215
dry-run:
1316
uses: cloudscape-design/actions/.github/workflows/dry-run.yml@main

‎package-lock.json‎

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@
114114
"stylelint-config-recommended-scss": "^14.1.0",
115115
"stylelint-prettier": "^5.0.2",
116116
"typescript": "^4.9.4",
117-
"vite": "^6.3.6",
117+
"vite": "^6.4.1",
118118
"vitest": "^3.0.7"
119119
},
120120
"//": "ensure that typedoc uses latest typescript. It prints a warning, but works",

‎pages/01-cartesian-chart/line-dash-styles.page.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import { range } from "lodash";
5+
6+
import { CartesianChart, CartesianChartProps } from "../../lib/components";
7+
import { dateFormatter } from "../common/formatters";
8+
import { useChartSettings } from "../common/page-settings";
9+
import { Page } from "../common/templates";
10+
11+
const startDate = new Date(1600984800000); // 2020-09-25T06:00:00.000Z
12+
const endDate = new Date(1601014500000); // 2020-09-25T14:00:00.000Z
13+
const domain = range(startDate.getTime(), endDate.getTime(), 15 * 60 * 1000).map((time) => new Date(time));
14+
const rawData = [
15+
58020, 102402, 104920, 94031, 125021, 159219, 193082, 162592, 274021, 264286, 289210, 256362, 257306, 186776, 294020,
16+
385975, 486039, 490447, 361845, 339058, 298028, 231902, 224558, 253901, 102839, 234943, 204405, 190391, 183570,
17+
162592, 148910, 229492, 293910,
18+
];
19+
20+
function createSeries(offset: number, dashStyle?: Highcharts.DashStyleValue): CartesianChartProps.SeriesOptions {
21+
return {
22+
name: `spline-${dashStyle ?? "default"}`,
23+
type: "spline",
24+
dashStyle,
25+
data: rawData.map((y, index) => ({
26+
x: domain[index].getTime(),
27+
y: offset + y + Math.round((index * 0.5 - 20) * (index + 5) * 5000),
28+
})),
29+
};
30+
}
31+
const series: CartesianChartProps.SeriesOptions[] = [
32+
createSeries(0),
33+
createSeries(50_000, "Dash"),
34+
createSeries(250_000, "DashDot"),
35+
createSeries(440_000, "Dot"),
36+
createSeries(789_000, "LongDash"),
37+
createSeries(999_000, "LongDashDot"),
38+
createSeries(1_132_000, "LongDashDotDot"),
39+
createSeries(1_350_000, "ShortDash"),
40+
createSeries(1_400_000, "ShortDashDot"),
41+
createSeries(1_560_000, "ShortDashDotDot"),
42+
createSeries(1_880_000, "ShortDot"),
43+
createSeries(2_000_000, "Solid"),
44+
{ type: "x-threshold", name: "threshold-default", value: 1601000100000 },
45+
{ type: "y-threshold", name: "threshold-DashDot", value: 1_500_000, dashStyle: "DashDot" },
46+
];
47+
48+
export default function () {
49+
const { chartProps } = useChartSettings();
50+
return (
51+
<Page title="Dash style demo" subtitle="This pages shows all supported line dash styles for line-like series.">
52+
<CartesianChart
53+
{...chartProps.cartesian}
54+
chartHeight={700}
55+
ariaLabel="Line chart"
56+
series={series}
57+
xAxis={{
58+
type: "datetime",
59+
title: "Time (UTC)",
60+
min: domain[0].getTime(),
61+
max: domain[domain.length - 1].getTime(),
62+
valueFormatter: dateFormatter,
63+
}}
64+
yAxis={{ title: "Bytes transferred" }}
65+
/>
66+
</Page>
67+
);
68+
}

‎pages/01-cartesian-chart/many-series.page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const loremIpsum =
1313
export default function () {
1414
return (
1515
<Page
16-
title="Legend demo"
16+
title="Chart with many series"
1717
subtitle="This pages shows how legend works in a chart with many series."
1818
settings={
1919
<PageSettingsForm

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

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import Checkbox from "@cloudscape-design/components/checkbox";
5+
6+
import CoreChart from "../../lib/components/internal-do-not-use/core-chart";
7+
import { dateFormatter } from "../common/formatters";
8+
import { PageSettings, PageSettingsForm, useChartSettings } from "../common/page-settings";
9+
import { Page } from "../common/templates";
10+
import pseudoRandom from "../utils/pseudo-random";
11+
12+
interface ThisPageSettings extends PageSettings {
13+
boostEnabled: boolean;
14+
}
15+
16+
export default function () {
17+
const {
18+
settings: { boostEnabled = false },
19+
setSettings,
20+
} = useChartSettings<ThisPageSettings>();
21+
return (
22+
<Page
23+
title="Boost module"
24+
subtitle="This demonstrates the use of the boost module"
25+
settings={
26+
<PageSettingsForm
27+
selectedSettings={[
28+
{
29+
content: (
30+
<Checkbox
31+
checked={boostEnabled}
32+
onChange={({ detail }) => setSettings({ boostEnabled: detail.checked })}
33+
>
34+
Enable boost module
35+
</Checkbox>
36+
),
37+
},
38+
]}
39+
/>
40+
}
41+
>
42+
<Component boostEnabled={boostEnabled} />
43+
</Page>
44+
);
45+
}
46+
47+
const domain: number[] = [];
48+
for (
49+
let time = new Date("2015-01-01").getTime();
50+
time < new Date("2025-01-01").getTime();
51+
time += 12 * 60 * 60 * 1000
52+
) {
53+
domain.push(time);
54+
}
55+
function Component({ boostEnabled }: { boostEnabled: boolean }) {
56+
const { chartProps } = useChartSettings({ boost: true });
57+
return (
58+
<CoreChart
59+
{...chartProps.cartesian}
60+
chartHeight={500}
61+
options={{
62+
boost: { enabled: boostEnabled },
63+
plotOptions: { series: { boostThreshold: 1 } },
64+
series: [
65+
{
66+
name: "Site 1",
67+
type: "spline",
68+
data: domain.map((x, index) => ({
69+
x,
70+
y: Math.round(1000 + pseudoRandom() * 10 * index),
71+
})),
72+
},
73+
{
74+
name: "Site 2",
75+
type: "spline",
76+
data: domain.map((x, index) => ({
77+
x,
78+
y: Math.round(99_000 - pseudoRandom() * 10 * index),
79+
})),
80+
},
81+
],
82+
xAxis: [
83+
{
84+
type: "linear",
85+
title: { text: "Time (UTC)" },
86+
min: domain[0],
87+
max: domain[domain.length - 1],
88+
valueFormatter: dateFormatter,
89+
},
90+
],
91+
yAxis: [{ title: { text: "Bytes transferred" }, min: 0, max: 100_000 }],
92+
}}
93+
ariaLabel="Large chart"
94+
tooltip={{
95+
placement: "outside",
96+
}}
97+
/>
98+
);
99+
}

‎pages/common/page-settings.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ export function useChartSettings<SettingsType extends PageSettings = PageSetting
7777
more?: boolean;
7878
xrange?: boolean;
7979
solidgauge?: boolean;
80+
boost?: boolean;
8081
} = {},
8182
): {
8283
settings: SettingsType;

‎pages/common/use-highcharts.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ export function useHighcharts({
1010
more = false,
1111
xrange = false,
1212
solidgauge = false,
13-
}: { more?: boolean; xrange?: boolean; solidgauge?: boolean } = {}) {
13+
boost = false,
14+
}: { more?: boolean; xrange?: boolean; solidgauge?: boolean; boost?: boolean } = {}) {
1415
const [highcharts, setHighcharts] = useState<null | typeof Highcharts>(null);
1516

1617
useEffect(() => {
@@ -29,6 +30,9 @@ export function useHighcharts({
2930
if (solidgauge) {
3031
await import("highcharts/modules/solid-gauge");
3132
}
33+
if (boost) {
34+
await import("highcharts/modules/boost");
35+
}
3236

3337
if (isDevelopment) {
3438
await import("highcharts/modules/debugger");
@@ -38,7 +42,7 @@ export function useHighcharts({
3842
};
3943

4044
load();
41-
}, [more, xrange, solidgauge]);
45+
}, [more, xrange, solidgauge, boost]);
4246

4347
return highcharts;
4448
}

‎scripts/prepare-package-lock.js‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,27 @@ if (packageLock.lockfileVersion !== 2) {
1717
throw new Error('package-lock.json must have "lockfileVersion": 2');
1818
}
1919

20+
const disallowedHosts = [
21+
{
22+
host: "codeartifact.us-west-2.amazonaws.com",
23+
errorMessage:
24+
"package-lock.json file contains a reference to CodeArtifact. Use regular npm to update the packages.",
25+
},
26+
];
27+
2028
function unlock(packages) {
2129
Object.keys(packages).forEach((dependencyName) => {
2230
const dependency = packages[dependencyName];
2331

2432
if (dependencyName.includes("@cloudscape-design/")) {
2533
delete packages[dependencyName];
26-
} else if (dependency.resolved && dependency.resolved.includes("codeartifact.us-west-2.amazonaws.com")) {
27-
throw Error(
28-
"package-lock.json file contains a reference to CodeArtifact. Use regular npm to update the packages.",
29-
);
34+
} else if (dependency.resolved) {
35+
const host = new URL(dependency.resolved).host;
36+
for (const disalloweHost of disallowedHosts) {
37+
if (host === disalloweHost.host || host.endsWith(`.${disalloweHost.host}`)) {
38+
throw Error(disalloweHost.errorMessage);
39+
}
40+
}
3041
}
3142
});
3243

‎src/cartesian-chart/chart-series-cartesian.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ export const transformCartesianSeries = (
2727
const seriesId = getOptionsId(s);
2828
const style = { ...Styles.thresholdPlotLine, color: s.color ?? Styles.thresholdPlotLine.color };
2929
if (s.type === "x-threshold" && visibleSeries.includes(seriesId)) {
30-
xPlotLines.push({ id: seriesId, value: s.value, ...style });
30+
xPlotLines.push({ id: seriesId, value: s.value, ...style, dashStyle: s.dashStyle ?? style.dashStyle });
3131
}
3232
if (s.type === "y-threshold" && visibleSeries.includes(seriesId)) {
33-
yPlotLines.push({ id: seriesId, value: s.value, ...style });
33+
yPlotLines.push({ id: seriesId, value: s.value, ...style, dashStyle: s.dashStyle ?? style.dashStyle });
3434
}
3535
}
3636
// The threshold series require data points to enable keyboard navigation and hover effects.

0 commit comments

Comments
 (0)