You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@ozone.apache.org by "devabhishekpal (via GitHub)" <gi...@apache.org> on 2023/08/03 10:29:21 UTC
[GitHub] [ozone] devabhishekpal commented on a diff in pull request #5090: HDDS-8837. [Recon] Heatmap UI improvements
devabhishekpal commented on code in PR #5090:
URL: https://github.com/apache/ozone/pull/5090#discussion_r1283001828
##########
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' },
Review Comment:
So over here previously we were having a black stroke/border over the tiles.
<img width="1407" alt="Screenshot 2023-08-03 at 3 57 00 PM" src="https://github.com/apache/ozone/assets/43001336/2e8769b7-6fc3-439c-939e-fe20e6e63d8c">
But since we updated to a white colour for the border, the text colour was changed to `#424242 (grey)` to maintain contrast, i.e. we swapped the colours for text and border of the containers
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org