Brijesh619 commented on code in PR #703:
URL: https://github.com/apache/atlas/pull/703#discussion_r3860318454
##########
dashboard/src/styles/stats.scss:
##########
@@ -60,3 +60,191 @@
.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;
+}
+
+.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: #d3d3d3;
+}
+
+.legend-active {
+ color: #333;
+}
+
+.chart-card {
+ padding: 16px;
+ border-radius: 8px;
+ min-height: 200px;
+ transition: box-shadow 0.3s ease;
+}
+
+.chart-card:hover {
+ box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.1), 0px 2px 4px -1px
rgba(0,0,0,0.06);
+}
+
+.chart-card-min-340 {
Review Comment:
Done. Verified that it's no longer referenced anywhere in the codebase and
removed it from `stats.scss`.
##########
dashboard/src/styles/stats.scss:
##########
@@ -60,3 +60,191 @@
.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;
+}
+
+.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: #d3d3d3;
+}
+
+.legend-active {
+ color: #333;
+}
+
+.chart-card {
Review Comment:
Done. I've removed the hardcoded SCSS classes (`.chart-card`,
`.chart-card-header`, `.chart-card-title`) and replaced them with inline `sx`
properties using MUI theme variables (e.g., `text.primary`, `divider`) directly
in the components to ensure proper dark mode support.
##########
dashboard/src/views/DashboardOverview/EntityStatusDonut.tsx:
##########
@@ -147,18 +117,15 @@ const EntityStatusDonut = memo(({ entity, isLoading }:
EntityStatusDonutProps) =
isAnimationActive
animationDuration={800}
animationEasing="ease-out"
-
activeIndex={activeIndex}
activeShape={renderActiveShape}
Review Comment:
Done. I've restored the `activeIndex` state and explicitly bound
`onMouseEnter` and `onMouseLeave` to manually manage hover state for the `Pie`
component, which restores the highlight effect using the Recharts v3 API.
##########
dashboard/src/views/DashboardOverview/dashboardChartPalette.ts:
##########
@@ -25,6 +25,8 @@ export const ENTITY_STATUS_DONUT_COLORS = {
/** Active primary series / bar fill (aligned with Classification Distribution
bars) */
export const CHART_BAR_ACTIVE_BLUE = "#1976d2";
+
Review Comment:
Done. Removed the extra blank lines.
##########
dashboard/src/views/Statistics/EntityStatsChart.tsx:
##########
@@ -87,21 +98,24 @@ const EntityStatsChart = ({
cursor={{ stroke: "rgba(0, 0, 0, 0.1)",
strokeWidth: 2 }}
/>
<Legend
- onClick={(e) => {
- if (e && e.id) {
-
onLegendClick(String(e.id));
- }
- }}
-
payload={Object.keys(activeKeys).map((key) => ({
- id: key,
- type: "square",
- value: key,
- color:
- activeKeys[key as keyof
ActiveKeys] === true
- ?
getColorForKey(key)
- : "#d3d3d3",
- inactive: !activeKeys[key as
keyof ActiveKeys],
- }))}
+ content={() => (
+ <Stack direction="row"
spacing={2} justifyContent="center" mt={1}>
Review Comment:
Done. I've extracted the legend content function into a memoized
`useCallback` to optimize performance and prevent unnecessary recreations on
every render.
--
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]
