Skip to content

Commit

Permalink
Merge pull request #92 from emerson-eps/Code-Refactor
Browse files Browse the repository at this point in the history 
fix: code refactoring
  • Loading branch information
@shruthirai
shruthirai authored Apr 13, 2022
2 parents a7cd6b7 + 79d29b5 commit f2a2410
Show file tree
Hide file tree
Showing 8 changed files with 50 additions and 180 deletions.
19 changes: 1 addition & 18 deletions react-app/src/component/ColorSelector/ColorSelectorComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { RGBToHex } from "../Utils/continousLegend";
import {d3ColorScales} from "../Utils/d3ColorScale";
import { select, range} from "d3";
import * as d3 from "d3";
import { colorTablesArray, colorTablesObj } from "../ColorTableTypes";
import discreteLegendUtil from "../Utils/discreteLegend";
import { color } from "d3-color";

Expand All @@ -17,7 +16,6 @@ declare type legendProps = {
useDiscColorTable?: boolean;
valueIndex?: any;
colorScaleData: any;
getColorMapname?: any | null;
}

declare type ItemColor = {
Expand All @@ -26,15 +24,13 @@ declare type ItemColor = {
}

export const ColorSelectorComponent: React.FC<legendProps> = ({
// position,
colorsObject,
legendColor,
legendColorName,
useContColorTable,
useDiscColorTable,
valueIndex,
colorScaleData,
// getColorMapname,
}: legendProps) => {

const divRef = useRef<HTMLDivElement>(null);
Expand Down Expand Up @@ -159,7 +155,6 @@ export const ColorSelectorComponent: React.FC<legendProps> = ({
.attr("y", 15)
.style("font-size", "smaller")
.style("font-weight", "900")
// .attr("textLength","5em")
.text(colorsObject.name);

// draw the rectangle and fill with gradient
Expand Down Expand Up @@ -314,16 +309,4 @@ export const ColorSelectorComponent: React.FC<legendProps> = ({
ref={divRef} onClick={handleChange}></div>
</div>
);
};

// Based on name return the colors array from color.tables.json file
export function colorTableData(
colorName: string,
colorTables: colorTablesArray
): [number, number, number, number][] {
const colorTableData = colorTables.filter(
(value: colorTablesObj) =>
value.name.toLowerCase() == colorName.toLowerCase()
);
return colorTableData.length > 0 ? colorTableData[0].colors : [];
}
};
47 changes: 24 additions & 23 deletions react-app/src/component/ColorSelector/ColorSelectorWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,30 @@ export const ColorSelectorWrapper: React.FC<legendProps> = ({
let continuousLegend;
let discreteLegend;

// return continuous and discrete legend which uses d3 data
if (useD3Colors) {
continuousLegend = continuosD3ColorData.map((val: any, key: any) => {
return <ColorSelectorComponent
position={position + key}
legendColor={val.color}
legendColorName={val.name}
useContColorTable={false}
valueIndex={key + "0"}
colorScaleData={colorScaleObject.colorScaleObject}
/>
});

discreteLegend = d3discreteData.map((val: any, key: any) => {
return <ColorSelectorComponent
position={position + key}
colorsObject={val.colors}
legendColorName={val.name}
useDiscColorTable={false}
colorScaleData={colorScaleObject.colorScaleObject}
/>
});
}

// return continuous and discrete legend which uses colortable data
if (useColorTableColors) {
continuousLegend = continuosColorData.map((value: any, key: any) => {
Expand All @@ -83,29 +107,6 @@ export const ColorSelectorWrapper: React.FC<legendProps> = ({
/>
});
}
// return continuous and discrete legend which uses d3 data
if (useD3Colors) {
continuousLegend = continuosD3ColorData.map((val: any, key: any) => {
return <ColorSelectorComponent
position={position + key}
legendColor={val.color}
legendColorName={val.name}
useContColorTable={false}
valueIndex={key + "0"}
colorScaleData={colorScaleObject.colorScaleObject}
/>
});

discreteLegend = d3discreteData.map((val: any, key: any) => {
return <ColorSelectorComponent
position={position + key}
colorsObject={val.colors}
legendColorName={val.name}
useDiscColorTable={false}
colorScaleData={colorScaleObject.colorScaleObject}
/>
});
}

return (
<div className="legendWrapper"
Expand Down
2 changes: 1 addition & 1 deletion react-app/src/component/Legend/ContinuousLegend.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from "react";
import { useRef } from "react";
import { RGBToHex, colorsArray } from "../Utils/continousLegend";
import { select, scaleLinear, scaleSequential, axisBottom, axisRight } from "d3";
import { colorTablesArray } from "../ColorTableTypes";
import { colorTablesArray } from "../Utils/ColorTableTypes";

declare type legendProps = {
min: number;
Expand Down
62 changes: 10 additions & 52 deletions react-app/src/component/Legend/DiscreteLegend.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@ import * as React from "react";
import { useRef } from "react";
import discreteLegendUtil from "../Utils/discreteLegend";
import { select, scaleOrdinal } from "d3";
import { colorTablesArray, colorTablesObj } from "../ColorTableTypes";
import { colorTablesArray } from "../Utils/ColorTableTypes";
import { colorsArray } from "../Utils/continousLegend"

declare type ItemColor = {
color: string;
}
};

declare type colorLegendProps = {
discreteData: { objects: Record<string, [number[], number]> };
Expand All @@ -16,7 +17,7 @@ declare type colorLegendProps = {
colorTables: colorTablesArray | string;
horizontal?: boolean | null;
updateLegend?: any
}
};

export const DiscreteColorLegend: React.FC<colorLegendProps> = ({
discreteData,
Expand Down Expand Up @@ -56,20 +57,18 @@ export const DiscreteColorLegend: React.FC<colorLegendProps> = ({
dataSet = await res.json();
}

const colorsArray =
const arrayOfColors =
typeof colorTables === "string"
? colorTableData(colorName, dataSet)
: colorTableData(colorName, colorTables);

console.log('updateLegend', updateLegend)
? colorsArray(colorName, dataSet)
: colorsArray(colorName, colorTables);

// Main discrete legend
if (!updateLegend || updateLegend.length == 0) {
Object.keys(discreteData).forEach((key) => {
//eslint-disable-next-line
let code = (discreteData as { [key: string]: any })[key][1]
//compare the first value in colorarray(colortable) and code from discreteData
const matchedColorsArrays = colorsArray.find(
const matchedColorsArrays = arrayOfColors.find(
(value: number[]) => {
return value[0] == code;
}
Expand Down Expand Up @@ -103,36 +102,13 @@ export const DiscreteColorLegend: React.FC<colorLegendProps> = ({
useSelectorLegend = true;
}

// const toolTipName = itemName.map((word, idx) => {
// return <li key={idx}>{word}</li>;
// });

// let nameTool;

// toolTipName.forEach((data) => {
// //nameTool.push(data.props.children)
// nameTool = data.props.children;
// });

// // create a tooltip
// const tooltip = select(divRef.current)
// .append("div")
// .style("position", "absolute")
// .style("visibility", "hidden")
// .style("background-color", "black")
// .style("border", "solid")
// .style("border-width", "1px")
// .style("border-radius", "5px")
// .style("padding", "10px")
// .text(nameTool)
// .style("color", "grey");

const ordinalValues = scaleOrdinal().domain(itemName);
const colorLegend = discreteLegendUtil(
itemColor,
useSelectorLegend,
horizontal
).inputScale(ordinalValues);
)
.inputScale(ordinalValues);
const currentDiv = select(divRef.current);
let totalRect;

Expand All @@ -148,12 +124,6 @@ export const DiscreteColorLegend: React.FC<colorLegendProps> = ({
const svgLegend = currentDiv
.style("margin", "5px")
.append("svg")
// .on("mouseover", function () {
// return tooltip.style("visibility", "visible");
// })
// .on("mouseout", function () {
// return tooltip.style("visibility", "hidden");
// })
.call(colorLegend);

// Style for main horizontal legend
Expand Down Expand Up @@ -210,18 +180,6 @@ export const DiscreteColorLegend: React.FC<colorLegendProps> = ({
);
};

// Based on name return the colors array from color.tables.json file
export function colorTableData(
colorName: string,
colorTables: colorTablesArray
): [number, number, number, number][] {
const colorTableData = colorTables.filter(
(value: colorTablesObj) =>
value.name.toLowerCase() == colorName.toLowerCase()
);
return colorTableData.length > 0 ? colorTableData[0].colors : [];
}

export function RGBToHex(rgb: number[]) {
let r = rgb[1].toString(16),
g = rgb[2].toString(16),
Expand Down
0 react-app/src/component/ColorTableTypes.ts → ...pp/src/component/Utils/ColorTableTypes.ts
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion react-app/src/component/Utils/continousLegend.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { interpolateRgb } from "d3-interpolate";
import {
colorTablesArray,
colorTablesObj,
} from "../ColorTableTypes";
} from "../Utils/ColorTableTypes";

// Based on objectName return the colors array from color.tables.json file
export function colorsArray(
Expand Down
93 changes: 11 additions & 82 deletions react-app/src/component/Utils/discreteLegend.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,6 @@ declare type ItemColor = {

// eslint-disable-next-line
export default function discreteLegendUtil(itemColor: ItemColor[], isSelectorLegend?: boolean, horizontal?: any): any {
// var cellWidth = 22;
// var cellHeight = 22;

// if (isSelectorLegend) {
// cellWidth = 25;
// cellHeight = 22;
// }

const legendValues: ItemColor[] = [];

// eslint-disable-next-line
Expand All @@ -37,105 +29,42 @@ export default function discreteLegendUtil(itemColor: ItemColor[], isSelectorLeg
if (horizontal && !isSelectorLegend) {
g.selectAll("rect")
.attr("x", function (d: number, i: number) {
console.log(d)
return i;
// temporary workaround to ignore typescript error (d value as unused)
if (i) return i;
else if (d) return null;
})
.attr("y", 0);
} else if (!horizontal && !isSelectorLegend) {
g.selectAll("rect")
.attr("y", function (d: number, i: number) {
console.log(d)
return i;
if (i) return i;
else if (d) return null;
})
.attr("x", 0);
} else if (horizontal == true && isSelectorLegend) {
g.selectAll("rect")
.attr("x", function (d: number, i: number) {
console.log(d)
return i;
if (i) return i;
else if (d) return null;
})
.attr("y", 0);
} else if (horizontal == false && isSelectorLegend) {
g.selectAll("rect")
.attr("y", function (d: number, i: number) {
console.log(d)
return i;
if (i) return i;
else if (d) return null;
})
.attr("x", 0);
} else {
g.selectAll("rect")
.attr("x", function (d: number, i: number) {
console.log(d)
return i;
if (i) return i;
else if (d) return null;
})
.attr("y", 0);
}

// Display the labels for legend
// g.selectAll("g")
// .style("background", "grey")
// .append("text")
// .attr("class", "breakLabels")
// .style("font-size", "0.4")
// //.attr("x", cellWidth + cellPadding)
// //.attr("y", 5 + cellHeight / 2)
// .attr("x", function (d: any, i: any) {
// //console.log(d)
// return i + "." + 25
// })
// .attr("y", 1.5)
// .text(function (d: any, i: any) {
// //console.log(d)
// return i;
// })
//}
// styling for main legend
// else {
// itemColor.forEach((item, index) => {
// legendValues[index].color = item.color;
// });
// g.selectAll("g.legendCells")
// .append("text")
// .attr("class", "breakLabels")
// .style("fill", "#6F6F6F")
// .attr("x", cellWidth + cellPadding)
// .attr("y", 5 + cellHeight / 2)
// .text(function (d: Record<string, unknown>, i:any) {
// return d['label'];
// });
// g.selectAll("g.legendCells")
// .style("cursor", "pointer")
// .append("rect")
// .attr("height", cellHeight)
// .attr("width", cellWidth)
// .style("fill", function (d: Record<string, unknown>) {
// //console.log('d', d)
// return d["color"];
// })

// // Alighment of cell in straight line
// g.selectAll("g.legendCells").attr(
// "transform",
// function (_d: Record<string, unknown>, i: number) {
// return (
// "translate(0," + i * (cellHeight + cellPadding) + ")"
// //"translate(0," + i + ")"
// );
// }
// );
// }
}

// display the discrete legend
// if (!isSelectorLegend) {
// // console.log('itemcolor', itemColor)
// g.selectAll("g.legendCells")
// .data(legendValues)
// .enter()
// .append("g")
// .attr("class", "legendCells")
// }

drawLegend();
}
// eslint-disable-next-line
Expand Down
Loading

0 comments on commit f2a2410

Please sign in to comment.