devabhishekpal commented on code in PR #5090:
URL: https://github.com/apache/ozone/pull/5090#discussion_r1283041165
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/heatMap/heatMapConfiguration.tsx:
##########
@@ -16,80 +16,77 @@
* limitations under the License.
*/
-import React, { Component } from 'react';
+import React from 'react';
import { AgChartsReact } from 'ag-charts-react';
-import {byteToSize} from 'utils/common';
+import { byteToSize } from 'utils/common';
-export default class HeatMapConfiguration extends Component {
- constructor(props: {} | Readonly<{}>) {
- super(props);
- const { data } = this.props;
+interface ITreeResponse {
+ label: string;
+ children: IChildren[];
+ size: number;
+ path: string;
+ minAccessCount: number;
+ maxAccessCount: number;
+}
- const colorRange1 = [
- '#ffff99', //yellow start 80%
- '#ffff80', //75%
- '#ffff66', //70%
- '#ffff4d', //yellow 65%
- '#ffd24d', //dark Mustered yellow start 65%
- '#ffbf00', //dark Mustard yellow end 50%
- '#b38600', //Dark Mustard yellow 35%
- '#ffb366', //orange start 70%
- '#ff9933', //orange 60%
- '#ff8c1a', //55%
- '#e67300', //45%
- '#994d00', //orange end 30%
- '#ff6633', //Red start 60%
- '#ff4000', // Red 50%
- '#cc3300', //40%
- '#992600', //30%
- '#802000', //25%
- '#661a00', //20%
- '#4d1300', // 15%
- '#330000', //dark Maroon
- '#330d00', //10 % Last Red
- ];
+interface IChildren {
+ label: string;
+ size: number;
+ accessCount: number;
+ color: number;
+}
+
+interface IHeatmapConfigurationProps {
+ data: ITreeResponse[];
+ onClick: Function;
+ colorScheme: string[];
+}
+export default class HeatMapConfiguration extends
React.Component<IHeatmapConfigurationProps> {
+ constructor(props: IHeatmapConfigurationProps) {
+ super(props);
+ const { data, colorScheme } = this.props;
this.state = {
// Tree Map Options Start
options: {
data,
- series: [
- {
+ series: [{
type: 'treemap',
labelKey: 'label',// the name of the key to fetch the label value
from
sizeKey: 'normalizedSize',// the name of the key to fetch the value
that will determine tile size
- colorkey: 'color',
- fontSize: 35,
- title: { color: 'white', fontSize: 18, fontFamily:'Courier New' },
- subtitle: { color: 'white', fontSize: 15, fontFamily:'Courier New' },
+ colorKey: 'color',
+ title: { color: '#424242', fontSize: 16, fontFamily: 'Roboto',
fontWeight: '600' },
+ subtitle: { color: '#424242', fontSize: 12, fontFamily: 'Roboto',
fontWeight: '400' },
tooltip: {
renderer: (params) => {
return {
content: this.tooltipContent(params)
};
}
},
- formatter: ({ highlighted}) => {
- const stroke = highlighted ? 'yellow' : 'white';
+ formatter: ({ highlighted }) => {
+ const stroke = highlighted ? '#CED4D9' : '#FFFFFF';
return { stroke };
},
labels: {
- color: 'white',
+ color: '#FFFFFF',
fontWeight: 'bold',
fontSize: 12
},
- tileStroke: 'white',
- tileStrokeWidth: 1,
+ tileStroke: '#FFFFFF',
+ tileStrokeWidth: 1.5,
colorDomain: [0.000, 0.050, 0.100, 0.150, 0.200, 0.250, 0.300,
0.350, 0.400, 0.450, 0.500, 0.550, 0.600, 0.650, 0.700, 0.750, 0.800, 0.850,
0.900, 0.950, 1.000],
- colorRange: [...colorRange1],
- nodePadding: 1.5, //Distance between two nodes
- nodeGap: '10',
+ colorRange: [...colorScheme],
+ groupFill: '#E6E6E6',
+ groupStroke: "#E1E2E6",
+ nodePadding: 3.5,
labelShadow: { enabled: false }, //labels shadow
+ gradient: false,
highlightStyle: {
text: {
- color: 'yellow',
+ color: '#424242',
Review Comment:
highlightStyle controls the properties/visuals shown when we hover over the
tiles.
So, after the changes yellow colour was not having a good contrast.
<img width="191" alt="Screenshot 2023-08-03 at 4 34 32 PM"
src="https://github.com/apache/ozone/assets/43001336/f3535008-09a7-438c-b7c1-5197e95c8fb0";>
Hence I had changed it to a grey colour to maintain the contrast:
<img width="185" alt="Screenshot 2023-08-03 at 4 36 00 PM"
src="https://github.com/apache/ozone/assets/43001336/3d777cc9-23e7-4f88-a77c-618d556d9235";>
--
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]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
