Brijesh619 commented on code in PR #703:
URL: https://github.com/apache/atlas/pull/703#discussion_r3871722470
##########
dashboard/src/views/DashboardOverview/ClassificationDistributionCard.tsx:
##########
@@ -50,6 +50,12 @@ interface ClassificationDistributionCardProps {
isLoading?: boolean;
}
+interface RechartsEventPayload {
Review Comment:
I have extracted the RechartsEventPayload interface and the helper logic
into a new generic function getPayloadFromRechartsEvent in
dashboard/src/utils/metricsUtils.ts.
I also updated both ClassificationDistributionCard.tsx and
EntityTypeBarChart.tsx to use this new shared utility, resolving the duplicated
code as suggested in the PR comment.
Let me know if there's anything else you'd like me to address!
##########
dashboard/src/views/DashboardOverview/MessageConsumptionChart.tsx:
##########
@@ -234,12 +234,8 @@ const MessageConsumptionChart = memo(
dataKey="count"
position="top"
offset={8}
- formatter={(v:
number) => numberFormatWithComma(v)}
- style={{
-
fontSize: 11,
-
fontWeight: 600,
- fill:
"#374151",
- }}
+ formatter={(v:
unknown) => numberFormatWithComma(Number(v))}
Review Comment:
I have updated the LabelList mock in
dashboard/src/views/DashboardOverview/__tests__/MessageConsumptionChart.test.tsx
to align with the new formatter signature (v: unknown).
I added tests to verify that the formatter gracefully handles multiple types
by simulating calls with both a numeric value (99) and a string value ("42"),
checking that data-label-formatted attributes are rendered correctly in both
scenarios.
I've also run the Jest tests to ensure everything is passing cleanly.
Let me know if there are any other comments to address!
##########
dashboard/src/views/DashboardOverview/EntityStatusDonut.tsx:
##########
@@ -150,15 +121,18 @@ const EntityStatusDonut = memo(({ entity, isLoading }:
EntityStatusDonutProps) =
activeIndex={activeIndex}
activeShape={renderActiveShape}
onMouseEnter={(_,
index) => setActiveIndex(index)}
- onMouseLeave={() =>
setActiveIndex(-1)}
- onClick={(data) =>
handleStatusClick(data.name as "Active" | "Shell" | "Deleted")}
+ onMouseLeave={() =>
setActiveIndex(undefined)}
+ onClick={(data:
unknown) => {
+ const d = data
as { name?: string } | undefined | null;
+
handleStatusClick(d?.name as "Active" | "Shell" | "Deleted");
+ }}
>
{chartData.map((entry,
index) => (
<Cell
key={`cell-${index}`} fill={entry.color} stroke="none" />
))}
</Pie>
<Tooltip
- formatter={(value:
number) => numberFormatWithComma(value)}
+ formatter={(value:
unknown) => numberFormatWithComma(Number(value || 0))}
contentStyle={{
borderRadius: 8 }}
Review Comment:
I have removed the contentStyle inline CSS from the <Tooltip /> component in
EntityStatusDonut.tsx to adhere to the "no CSS-in-JS" rule. Instead, I added a
wrapperClassName="donut-tooltip-wrapper" prop to the Tooltip and moved the
border-radius styling to dashboard/src/styles/stats.scss.
Let me know if there's any other feedback you need addressed!
##########
dashboard/src/styles/stats.scss:
##########
@@ -60,3 +60,202 @@
.classification-name-cell {
max-width: 400px;
}
+
+.chart-cursor-pointer {
+ cursor: pointer;
+}
+
+.chart-cursor-default {
+ cursor: default;
+}
+
+.chart-label-list {
+ font-size: 12px;
+ font-weight: 500;
+ fill: #1976d2;
+}
+
+.chart-label-list-sm {
+ font-size: 11px;
+ font-weight: 600;
+ fill: #374151;
+}
+
+.legend-button {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 4px;
+ background: none;
+ padding: 0;
+ margin: 0;
+ border-radius: 4px;
+}
+
+.legend-color-box {
+ width: 12px;
+ height: 12px;
+ border-radius: 2px;
+}
+
+.legend-typography {
+ font-size: 0.875rem;
+}
+
+.legend-inactive {
+ color: #868e96;
+}
+
+.legend-active {
+ // Color inherits from Typography (text.primary)
Review Comment:
I have removed the empty .legend-active class from
dashboard/src/styles/stats.scss as requested in the PR comment.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
