diff --git a/web-frontend/src/main/v3/packages/ui/package.json b/web-frontend/src/main/v3/packages/ui/package.json
index 3049734c08c6..3e973a283e29 100644
--- a/web-frontend/src/main/v3/packages/ui/package.json
+++ b/web-frontend/src/main/v3/packages/ui/package.json
@@ -43,7 +43,7 @@
"react-router-dom": "^6.10.0"
},
"dependencies": {
- "@billboard.js/react": "^1.1.0",
+ "@billboard.js/react": "^1.1.1",
"@hookform/resolvers": "^3.3.2",
"@pinpoint-fe/constants": "*",
"@pinpoint-fe/datetime-picker": "*",
@@ -76,7 +76,7 @@
"@tanstack/react-table": "^8.10.7",
"@tanstack/react-virtual": "^3.0.1",
"@types/react-text-truncate": "^0.14.3",
- "billboard.js": "3.9.4",
+ "billboard.js": "3.14.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.0.0",
"cmdk": "^1.0.0",
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/Chart/Load/LoadChart.tsx b/web-frontend/src/main/v3/packages/ui/src/components/Chart/Load/LoadChart.tsx
index aecce9f461c1..ef0d133e69fd 100644
--- a/web-frontend/src/main/v3/packages/ui/src/components/Chart/Load/LoadChart.tsx
+++ b/web-frontend/src/main/v3/packages/ui/src/components/Chart/Load/LoadChart.tsx
@@ -91,6 +91,7 @@ export const LoadChart = ({
x: 'dates',
},
padding: {
+ mode: 'fit',
top: 20,
bottom: 10,
right: 25,
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/Chart/ResponseAvgMax/ResponseAvgMaxChart.tsx b/web-frontend/src/main/v3/packages/ui/src/components/Chart/ResponseAvgMax/ResponseAvgMaxChart.tsx
index 7b6f133d9554..626af5647c15 100644
--- a/web-frontend/src/main/v3/packages/ui/src/components/Chart/ResponseAvgMax/ResponseAvgMaxChart.tsx
+++ b/web-frontend/src/main/v3/packages/ui/src/components/Chart/ResponseAvgMax/ResponseAvgMaxChart.tsx
@@ -63,6 +63,7 @@ export const ResponseAvgMaxChart = ({
},
},
padding: {
+ mode: 'fit',
top: 20,
right: 20, // (or 25)
},
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/Chart/ResponseSummary/ResponseSummaryChart.tsx b/web-frontend/src/main/v3/packages/ui/src/components/Chart/ResponseSummary/ResponseSummaryChart.tsx
index d8267ba6b674..be0b1994eff5 100644
--- a/web-frontend/src/main/v3/packages/ui/src/components/Chart/ResponseSummary/ResponseSummaryChart.tsx
+++ b/web-frontend/src/main/v3/packages/ui/src/components/Chart/ResponseSummary/ResponseSummaryChart.tsx
@@ -66,6 +66,7 @@ export const ResponseSummaryChart = ({
type: bar(),
},
padding: {
+ mode: 'fit',
top: 20,
},
legend: {
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/ErrorAnalysis/charts/ErrorAnalysisChartFetcher.tsx b/web-frontend/src/main/v3/packages/ui/src/components/ErrorAnalysis/charts/ErrorAnalysisChartFetcher.tsx
index f7590050bc8b..446d312211f4 100644
--- a/web-frontend/src/main/v3/packages/ui/src/components/ErrorAnalysis/charts/ErrorAnalysisChartFetcher.tsx
+++ b/web-frontend/src/main/v3/packages/ui/src/components/ErrorAnalysis/charts/ErrorAnalysisChartFetcher.tsx
@@ -31,9 +31,11 @@ export const ErrorAnalysisChartFetcher = ({
type: line(),
},
padding: {
+ mode: 'fit',
top: 20,
bottom: 10,
right: 25,
+ left: 15,
},
axis: {
x: {
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/Inspector/charts/ChartCore.tsx b/web-frontend/src/main/v3/packages/ui/src/components/Inspector/charts/ChartCore.tsx
index 8957388ab357..dceb380081bc 100644
--- a/web-frontend/src/main/v3/packages/ui/src/components/Inspector/charts/ChartCore.tsx
+++ b/web-frontend/src/main/v3/packages/ui/src/components/Inspector/charts/ChartCore.tsx
@@ -37,9 +37,11 @@ export const ChartCore = ({
},
},
padding: {
+ mode: 'fit',
top: DEFAULT_CHART_CONFIG.PADDING_TOP,
bottom: DEFAULT_CHART_CONFIG.PADDING_BOTTOM,
right: DEFAULT_CHART_CONFIG.PADDING_RIGHT,
+ left: DEFAULT_CHART_CONFIG.PADDING_LEFT,
},
axis: {
x: {
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/Inspector/charts/InspectorChart.tsx b/web-frontend/src/main/v3/packages/ui/src/components/Inspector/charts/InspectorChart.tsx
index 0b1096d07552..b8e56ee502ea 100644
--- a/web-frontend/src/main/v3/packages/ui/src/components/Inspector/charts/InspectorChart.tsx
+++ b/web-frontend/src/main/v3/packages/ui/src/components/Inspector/charts/InspectorChart.tsx
@@ -43,7 +43,7 @@ export const InspectorChart = ({
-
+
{children}
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/SystemMetric/charts/SystemMetricChartFetcher.tsx b/web-frontend/src/main/v3/packages/ui/src/components/SystemMetric/charts/SystemMetricChartFetcher.tsx
index 3d789bc2086f..14352ce3f49f 100644
--- a/web-frontend/src/main/v3/packages/ui/src/components/SystemMetric/charts/SystemMetricChartFetcher.tsx
+++ b/web-frontend/src/main/v3/packages/ui/src/components/SystemMetric/charts/SystemMetricChartFetcher.tsx
@@ -61,9 +61,11 @@ export const SystemMetricChartFetcher = ({
type: line(),
},
padding: {
+ mode: 'fit',
top: 20,
bottom: 10,
right: 25,
+ left: 15,
},
axis: {
x: {
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatApdexChart.tsx b/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatApdexChart.tsx
index 5cc16650c8c5..555ecf73898c 100644
--- a/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatApdexChart.tsx
+++ b/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatApdexChart.tsx
@@ -45,6 +45,7 @@ export const UrlStatApdexChart = ({
}, {}),
},
padding: {
+ mode: 'fit',
top: 20,
bottom: 10,
right: 25,
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatDefaultChart.tsx b/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatDefaultChart.tsx
index fa4b63debf68..e92350a2636e 100644
--- a/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatDefaultChart.tsx
+++ b/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatDefaultChart.tsx
@@ -28,6 +28,7 @@ export const UrlStatDefaultChart = ({
type: line(),
},
padding: {
+ mode: 'fit',
top: 20,
bottom: 10,
right: 25,
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatFailureCountChart.tsx b/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatFailureCountChart.tsx
index a68548d57456..dbce5a35031d 100644
--- a/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatFailureCountChart.tsx
+++ b/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatFailureCountChart.tsx
@@ -56,6 +56,7 @@ export const UrlStatFailureCountChart = ({
order: null,
},
padding: {
+ mode: 'fit',
top: 20,
bottom: 10,
right: 25,
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatLatencyChart.tsx b/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatLatencyChart.tsx
index 379e2cbcbaff..eb0383eea9d4 100644
--- a/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatLatencyChart.tsx
+++ b/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatLatencyChart.tsx
@@ -45,6 +45,7 @@ export const UrlStatLatencyChart = ({
}, {}),
},
padding: {
+ mode: 'fit',
top: 20,
bottom: 10,
right: 25,
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatTotalCountChart.tsx b/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatTotalCountChart.tsx
index 1cb5af364fe1..8042cd202b33 100644
--- a/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatTotalCountChart.tsx
+++ b/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatTotalCountChart.tsx
@@ -56,6 +56,7 @@ export const UrlStatTotalCountChart = ({
order: null,
},
padding: {
+ mode: 'fit',
top: 20,
bottom: 10,
right: 25,
diff --git a/web-frontend/src/main/v3/packages/ui/src/lib/charts/useChartConfig.ts b/web-frontend/src/main/v3/packages/ui/src/lib/charts/useChartConfig.ts
index 4a59745c9184..372020a0984f 100644
--- a/web-frontend/src/main/v3/packages/ui/src/lib/charts/useChartConfig.ts
+++ b/web-frontend/src/main/v3/packages/ui/src/lib/charts/useChartConfig.ts
@@ -9,7 +9,8 @@ import { useChartType } from './useChartType';
export const DEFAULT_CHART_CONFIG = {
PADDING_TOP: 20,
PADDING_BOTTOM: 10,
- PADDING_RIGHT: 25,
+ PADDING_RIGHT: 30,
+ PADDING_LEFT: 15,
EXTRA_AXIS_PADDING_RIGHT: 40,
DEFAULT_MAX: 10,
X_AXIS_TICK_COUNT: 4,
diff --git a/web-frontend/src/main/v3/yarn.lock b/web-frontend/src/main/v3/yarn.lock
index 1ded6d07109a..e32fdcb491d9 100644
--- a/web-frontend/src/main/v3/yarn.lock
+++ b/web-frontend/src/main/v3/yarn.lock
@@ -1259,7 +1259,7 @@
resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
-"@billboard.js/react@^1.1.0":
+"@billboard.js/react@^1.1.1":
version "1.1.1"
resolved "https://registry.yarnpkg.com/@billboard.js/react/-/react-1.1.1.tgz#2cfb31589cf1a4bff221285595bc7766a6e595fb"
integrity sha512-UZNh/+vIGlqpKo6TY88sP1qaexY50W6N4OkNHjub9m7OFRaqddQGofJKN7YfIYavOhwY8AYLQA6nQ4YWl++paw==
@@ -5531,11 +5531,16 @@
dependencies:
"@types/d3-time" "*"
-"@types/d3-selection@*", "@types/d3-selection@^3.0.5":
+"@types/d3-selection@*":
version "3.0.10"
resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.10.tgz#98cdcf986d0986de6912b5892e7c015a95ca27fe"
integrity sha512-cuHoUgS/V3hLdjJOLTT691+G2QoqAjCVLmr4kJXR4ha56w1Zdu8UUQ5TxLRqudgNjwXeQxKMq4j+lyf9sWuslg==
+"@types/d3-selection@^3.0.11":
+ version "3.0.11"
+ resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.11.tgz#bd7a45fc0a8c3167a631675e61bc2ca2b058d4a3"
+ integrity sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==
+
"@types/d3-shape@^3.1.0":
version "3.1.6"
resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.6.tgz#65d40d5a548f0a023821773e39012805e6e31a72"
@@ -5553,10 +5558,10 @@
resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-3.0.2.tgz#70bbda77dc23aa727413e22e214afa3f0e852f70"
integrity sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==
-"@types/d3-transition@^3.0.3":
- version "3.0.8"
- resolved "https://registry.yarnpkg.com/@types/d3-transition/-/d3-transition-3.0.8.tgz#677707f5eed5b24c66a1918cde05963021351a8f"
- integrity sha512-ew63aJfQ/ms7QQ4X7pk5NxQ9fZH/z+i24ZfJ6tJSfqxJMrYLiK01EAs2/Rtw/JreGUsS3pLPNV644qXFGnoZNQ==
+"@types/d3-transition@^3.0.9":
+ version "3.0.9"
+ resolved "https://registry.yarnpkg.com/@types/d3-transition/-/d3-transition-3.0.9.tgz#1136bc57e9ddb3c390dccc9b5ff3b7d2b8d94706"
+ integrity sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==
dependencies:
"@types/d3-selection" "*"
@@ -7536,13 +7541,13 @@ big.js@^5.2.2:
resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
-billboard.js@3.9.4:
- version "3.9.4"
- resolved "https://registry.yarnpkg.com/billboard.js/-/billboard.js-3.9.4.tgz#d626b7e31f0b6b131a1328003ab0b07f3f56a943"
- integrity sha512-0s0UifY1pzhizmOi+gDUZsVAy9lwoO9BfoMfB4HYn3LR7KFAgPsozwN+YKmJDVS59DITlbMGD4NnIpJ9KjwE/w==
+billboard.js@3.14.0:
+ version "3.14.0"
+ resolved "https://registry.yarnpkg.com/billboard.js/-/billboard.js-3.14.0.tgz#28e5cef016e5ed76f42e7b70ed43de8e50106959"
+ integrity sha512-A1uNa7oXTSee8vNDZlwgFvGiTWNRe8IZY+DETVhPinBOh35hCk+sSxXKEXB4/r8p8ArTEFXnthu+MDPsKjHPWQ==
dependencies:
- "@types/d3-selection" "^3.0.5"
- "@types/d3-transition" "^3.0.3"
+ "@types/d3-selection" "^3.0.11"
+ "@types/d3-transition" "^3.0.9"
d3-axis "^3.0.0"
d3-brush "^3.0.0"
d3-drag "^3.0.0"