14-10 [FE] [논문 상세 - 네트워크 차트] 피인용수 color range 범례를 표시한다.

frontend/src/hooks/graph/useNodeUpdate.ts

@@ -15,7 +15,10 @@ export default function useNodeUpdate(
  const normalSymbol = d3.symbol().type(d3.symbolSquare).size(NORMAL_SYMBOL_SIZE)();
  const starSymbol = d3.symbol().type(d3.symbolStar).size(STAR_SYMBOL_SIZE)();
 
- const converToColor = d3.scaleLog([1, 10000], ['white', theme.COLOR.secondary2]).interpolate(d3.interpolateRgb);
+ const converToColor = (value: number) => {
+ const loged = Math.trunc(Math.log10(value));
+ return d3.scaleLinear([0, 4], ['white', theme.COLOR.secondary2]).interpolate(d3.interpolateRgb)(loged);
+ };
 
  d3.select(nodesSelector)
  .selectAll('path')

frontend/src/pages/PaperDetail/PaperDetail.tsx

@@ -7,6 +7,7 @@ import MoonLoader from '../../components/loader/MoonLoader';
 import { PATH_MAIN } from '../../constants/path';
 import LogoIcon from '../../icons/LogoIcon';
 import PreviousButtonIcon from '../../icons/PreviousButtonIcon';
+import ColorRangeBar from './components/ColorRangeBar';
 import { usePaperQuery } from '../../queries/queries';
 import PaperInfo from './components/PaperInfo';
 import ReferenceGraph from './components/ReferenceGraph';
@@ -68,6 +69,7 @@ const PaperDatail = () => {
  </>
  )}
  </Main>
+ <ColorRangeBar />
  {isLoading && (
  <LoaderWrapper>
  <MoonLoader />

frontend/src/pages/PaperDetail/components/ColorRangeBar.tsx

@@ -0,0 +1,69 @@
+import * as d3 from 'd3';
+import styled from 'styled-components';
+import theme from '../../../style/theme';
+
+const ColorRangeBar = () => {
+ const converToColor = d3.scaleLog([1, 10000], ['white', theme.COLOR.secondary2]).interpolate(d3.interpolateRgb);
+ const axisNums = [1, 10, 100, 1000, 10000];
+ const colors = axisNums.map(converToColor);
+
+ return (
+ <Container>
+ <label>citations</label>
+ <ColorRange>
+ {colors.map((color) => (
+ <div key={color} style={{ background: color }} />
+ ))}
+ </ColorRange>
+
+ <Axis>
+ {axisNums.map((num, i) => (
+ <span key={num} style={{ color: colors[i], left: `${(100 / axisNums.length) * i}%` }}>
+ {num}
+ {i === axisNums.length - 1}
+ </span>
+ ))}
+ <span style={{ color: colors[colors.length - 1], left: '100%' }}>
+ {axisNums[axisNums.length - 1]}
+ {'+'}
+ </span>
+ </Axis>
+ </Container>
+ );
+};
+
+const Container = styled.div`
+ ${({ theme }) => theme.TYPO.caption};
+ position: absolute;
+ bottom: 30px;
+ right: 30px;
+ > label {
+ color: ${(props) => props.theme.COLOR.offWhite};
+ margin: 0 0 0 auto;
+ }
+`;
+
+const ColorRange = styled.div`
+ margin: 0 auto;
+ width: 200px;
+ height: 20px;
+ margin: 10px 0;
+ display: flex;
+ > div {
+ flex: 1;
+ }
+`;
+
+const Axis = styled.div`
+ position: relative;
+ display: flex;
+ justify-content: space-between;
+ ${({ theme }) => theme.TYPO.caption};
+ color: ${(props) => props.theme.COLOR.offWhite};
+ > span {
+ position: absolute;
+ transform: translateX(-50%);
+ }
+`;
+
+export default ColorRangeBar;