From 79d29b5dc793d64a96a6bd03bc6bc285d7e6ba7a Mon Sep 17 00:00:00 2001 From: Shruthi Rai Date: Wed, 13 Apr 2022 16:04:45 +0200 Subject: [PATCH] fix: code refactoring --- .../ColorSelector/ColorSelectorComponent.tsx | 19 +--- .../ColorSelector/ColorSelectorWrapper.tsx | 47 +++++----- .../src/component/Legend/ContinuousLegend.tsx | 2 +- .../src/component/Legend/DiscreteLegend.tsx | 62 ++----------- .../component/{ => Utils}/ColorTableTypes.ts | 0 .../src/component/Utils/continousLegend.ts | 2 +- .../src/component/Utils/discreteLegend.ts | 93 +++---------------- react-app/src/index.ts | 5 +- 8 files changed, 50 insertions(+), 180 deletions(-) rename react-app/src/component/{ => Utils}/ColorTableTypes.ts (100%) diff --git a/react-app/src/component/ColorSelector/ColorSelectorComponent.tsx b/react-app/src/component/ColorSelector/ColorSelectorComponent.tsx index d8b6d526..43b556d0 100644 --- a/react-app/src/component/ColorSelector/ColorSelectorComponent.tsx +++ b/react-app/src/component/ColorSelector/ColorSelectorComponent.tsx @@ -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"; @@ -17,7 +16,6 @@ declare type legendProps = { useDiscColorTable?: boolean; valueIndex?: any; colorScaleData: any; - getColorMapname?: any | null; } declare type ItemColor = { @@ -26,7 +24,6 @@ declare type ItemColor = { } export const ColorSelectorComponent: React.FC = ({ - // position, colorsObject, legendColor, legendColorName, @@ -34,7 +31,6 @@ export const ColorSelectorComponent: React.FC = ({ useDiscColorTable, valueIndex, colorScaleData, - // getColorMapname, }: legendProps) => { const divRef = useRef(null); @@ -159,7 +155,6 @@ export const ColorSelectorComponent: React.FC = ({ .attr("y", 15) .style("font-size", "smaller") .style("font-weight", "900") - // .attr("textLength","5em") .text(colorsObject.name); // draw the rectangle and fill with gradient @@ -314,16 +309,4 @@ export const ColorSelectorComponent: React.FC = ({ ref={divRef} onClick={handleChange}> ); -}; - -// 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 : []; -} \ No newline at end of file +}; \ No newline at end of file diff --git a/react-app/src/component/ColorSelector/ColorSelectorWrapper.tsx b/react-app/src/component/ColorSelector/ColorSelectorWrapper.tsx index a135684b..ab2ac2d9 100644 --- a/react-app/src/component/ColorSelector/ColorSelectorWrapper.tsx +++ b/react-app/src/component/ColorSelector/ColorSelectorWrapper.tsx @@ -59,6 +59,30 @@ export const ColorSelectorWrapper: React.FC = ({ let continuousLegend; let discreteLegend; + // return continuous and discrete legend which uses d3 data + if (useD3Colors) { + continuousLegend = continuosD3ColorData.map((val: any, key: any) => { + return + }); + + discreteLegend = d3discreteData.map((val: any, key: any) => { + return + }); + } + // return continuous and discrete legend which uses colortable data if (useColorTableColors) { continuousLegend = continuosColorData.map((value: any, key: any) => { @@ -83,29 +107,6 @@ export const ColorSelectorWrapper: React.FC = ({ /> }); } - // return continuous and discrete legend which uses d3 data - if (useD3Colors) { - continuousLegend = continuosD3ColorData.map((val: any, key: any) => { - return - }); - - discreteLegend = d3discreteData.map((val: any, key: any) => { - return - }); - } return (
}; @@ -16,7 +17,7 @@ declare type colorLegendProps = { colorTables: colorTablesArray | string; horizontal?: boolean | null; updateLegend?: any -} +}; export const DiscreteColorLegend: React.FC = ({ discreteData, @@ -56,12 +57,10 @@ export const DiscreteColorLegend: React.FC = ({ 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) { @@ -69,7 +68,7 @@ export const DiscreteColorLegend: React.FC = ({ //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; } @@ -103,36 +102,13 @@ export const DiscreteColorLegend: React.FC = ({ useSelectorLegend = true; } - // const toolTipName = itemName.map((word, idx) => { - // return
  • {word}
    • ; - // }); - - // 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; @@ -148,12 +124,6 @@ export const DiscreteColorLegend: React.FC = ({ 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 @@ -210,18 +180,6 @@ export const DiscreteColorLegend: React.FC = ({ ); }; -// 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), diff --git a/react-app/src/component/ColorTableTypes.ts b/react-app/src/component/Utils/ColorTableTypes.ts similarity index 100% rename from react-app/src/component/ColorTableTypes.ts rename to react-app/src/component/Utils/ColorTableTypes.ts diff --git a/react-app/src/component/Utils/continousLegend.ts b/react-app/src/component/Utils/continousLegend.ts index 3d6f8c8c..4424f24f 100644 --- a/react-app/src/component/Utils/continousLegend.ts +++ b/react-app/src/component/Utils/continousLegend.ts @@ -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( diff --git a/react-app/src/component/Utils/discreteLegend.ts b/react-app/src/component/Utils/discreteLegend.ts index 2d0e564a..3609387a 100644 --- a/react-app/src/component/Utils/discreteLegend.ts +++ b/react-app/src/component/Utils/discreteLegend.ts @@ -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 @@ -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, 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) { - // //console.log('d', d) - // return d["color"]; - // }) - - // // Alighment of cell in straight line - // g.selectAll("g.legendCells").attr( - // "transform", - // function (_d: Record, 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 diff --git a/react-app/src/index.ts b/react-app/src/index.ts index 3c73fffe..6e685969 100644 --- a/react-app/src/index.ts +++ b/react-app/src/index.ts @@ -2,11 +2,11 @@ import { ColorSelectorAccordion } from './component/ColorSelector/ColorSelectorA import { ColorSelectorComponent } from './component/ColorSelector/ColorSelectorComponent'; import { ColorSelectorWrapper } from './component/ColorSelector/ColorSelectorWrapper'; import { ContinuousLegend } from './component/Legend/ContinuousLegend'; -import { colorTableData, DiscreteColorLegend } from './component/Legend/DiscreteLegend'; +import { DiscreteColorLegend } from './component/Legend/DiscreteLegend'; import { ColorLegend } from './component/Legend/ColorLegend'; import { colorsArray, rgbValues, RGBToHex } from './component/Utils/continousLegend'; import { d3ColorScales } from './component/Utils/d3ColorScale'; -import { colorTablesObj, colorTablesArray } from './component/ColorTableTypes'; +import { colorTablesObj, colorTablesArray } from './component/Utils/ColorTableTypes'; import * as colorTables from './component/color-tables.json'; export { @@ -14,7 +14,6 @@ export { ColorSelectorComponent, ColorSelectorWrapper, ContinuousLegend, - colorTableData, DiscreteColorLegend, ColorLegend, colorsArray,