어리둥절 분석가 그리고 개발자

import styled from '@emotion/styled'; import React from 'react'; import { VictoryChart, VictoryScatter, VictoryBar, VictoryAxis, VictoryLabel, VictoryContainer } from 'victory'; import { ReactComponent as Svg1} from "./svg/file1.svg"; import { ReactComponent as Svg2} from "./svg/file2.svg"; import { ReactComponent as Svg3} from "./svg/file3.svg"; import { ReactComponent as Svg4} from "./svg/file..

Victory Chart에서 제공하는 DataComponent 기능을 활용하면 SVG를 쉽게 차트 위에 올릴 수 있다! import styled from '@emotion/styled'; import React from 'react'; import { VictoryChart, VictoryLine, VictoryScatter } from 'victory'; import SvgFailedToLoad from "../../../public/assets/images/common/failed-to-load.svg"; const StyledPoint = styled.circle` fill: ${(props) => props.color}; `; const Container = styled.div` width: 80..

Victory 차트를 그리는데 발생한 에러 types/react 버전이 17이라면 types/react 버전을 18 버전으로 바꿔주면 된다 yarn add @types/react yarn add --dev @types/react or npm install @types/react 혹은 victory 버전을 낮춰준다 "victory": "36.5.3",

✔️ 필요성 Victory Native에서 x축과 y축을 예쁘게 꾸며봅시다 ✔️ x축 꾸미기 x축은 모든 숫자가 다 label로 나오게 하고 싶고, tick과 x축은 보이지 않게 하고 싶다. ✔️ y축 꾸미기 y축은 위치를 offsetX를 통해서 약간 이동시킨 다음에, 초를 분으로 바꿔서 2분 단위로 label이 나타나기를 원한다. 그리고 옅은 회색으로 보조선을 그리고 싶다. (grid) `${secondsToMinute(value)}`} /> ✔️ 통합 예제 코드 import React from 'react'; import styled from 'styled-components/native'; import {VictoryAxis, VictoryBar, VictoryChart} from 'victory-..

✔️ 필요성 Victory Native로 라인차트 두개를 겹쳐서 그리고 싶을 땐 어떻게 할까? ✔️ 문제 해결 너무 쉽다.... Victory Native 최고!!! 두개를 그냥 아래처럼 쌓아주면 된다 색깔이 다른 라인 두개가 생겼으니 범례를 만들어줘야겠지. 로 아래처럼 만들어주고 내부에 넣어주면 된다.

✔️ 필요성 Victory Native로 라인차트 두개를 겹쳐서 그리고 싶을 땐 어떻게 할까? ✔️ 문제 해결 너무 쉽다.... Victory Native 최고!!! 두개를 그냥 아래처럼 쌓아주면 된다 색깔이 다른 라인 두개가 생겼으니 범례를 만들어줘야겠지. 로 아래처럼 만들어주고 내부에 넣어주면 된다.

✔️ Victory Native 활용 예제 파헤치기 Victory Native 개인적으로 너무 만족스러운 라이브러리이다. 무엇보다 가볍고 사용법이 직관적이고, 기본적으로 제공하는 옵션들도 다양하다. Victory Native로 그린 아래 차트를 어떻게 그렸는지 기록해두고, 내가 라이브러리 사용할 때마다 찾아보려고 한다. ✔️ 전체 코드 import React from 'react'; import {View} from 'react-native'; import styled from 'styled-components/native'; import { VictoryAxis, VictoryBar, VictoryChart, VictoryGroup, VictoryLegend, VictoryLine, VictorySca..

✔️ 필요성 여러가지 차트(Bar, Line, StackedBar)를 하나의 축 위에 겹쳐 그리고 싶을 때가 많다. (복합차트) Victory Native는 복합 차트를 그리는 것이 매우 쉽다. 해당하는 컴포넌트를 그냥 같이 겹쳐 붙이기만 하면 된다. import React from 'react'; import styled from 'styled-components/native'; import { VictoryAxis, VictoryBar, VictoryChart, VictoryLine, } from 'victory-native'; const Container = styled.View` flex: 1; align-items: center; justify-content: center; `; const da..

✔️ 필요성 Bar 차트를 그린다고 하면 모든 Bar가 같은 색상을 가진게 아니라 특정값에 따라 동적으로 차트의 스타일(색깔 등)을 바꾸고 싶을 때가 있다. https://formidable.com/open-source/victory/docs/common-props/#style Victory | Common Props Not every component uses all of these props. These are all common to things like VictoryBar, VictoryScatter, but other components like VictoryStack use only some of them. The props explanations given here are general. E..

✔️ 필요성 React Native에서 막대그래프나 라인그래프 혹은 파이차트 같이 그래프/차트를 표현해야 할 때가 있다. React Native에서는 아직까지 엄청나게 우세한 차트 라이브러리는 없는 것 같았다. 이것 저것 찾아보던 중 Victory-Native라는 라이브러리가 전체적으로 간단하면서도 애니메이션을 잘 보여줘서 모바일 환경에서 적합한 라이브러리라고 생각되어 도전해보았다. 예시에서도 알 수 있듯이 코드가 간단하고 툴팁이나 x축 y축이 기본적으로 귀엽다 ✔️ 설치 설치도 굉장히 쉽다 npm install --save victory-native react-native install react-native-svg npx pod-install ✔️ 기본 예시 Victory Native에서 알려주고 있..