React 갈고리를 사용하여 비즈니스 인텔리전스: 보고서 응용 프로그램 만들기
지역 사회가 React Hooks에 대해 의견 차이가 있는 것 같다. 이것은 React 16.8.0 버전에 도입된 새로운 개념이다.일부 개발자들은 그것에 대해 매우 열정적이지만, 다른 사람들은 이것에 대해 공감한다.한 가지 확실한 것은 React Hooks가 React 커뮤니티에서 핫한 토론의 화제이기 때문에 더욱 자세하게 연구할 필요가 있다.
그것의 인기를 감안하여 저는 연결을 하나의 개념으로 더욱 잘 이해하고 이를 이용하여 React 응용 프로그램을 구축하는 방법을 보여 드리기 위해 최선을 다하기로 결정했습니다. 이 응용 프로그램은 재무 보고에 사용되는 상호작용식 계기판을 가지고 있습니다.
다음은 이 강좌를 완성한 결과입니다.
준비했어
우리 시작합시다!
React Hooks 배후 동기
우선, React 연결이 무엇인지 알아봅시다.갈고리의 주요 목적은 기능 구성 요소에서 상태 관리, 부작용 및 기타 React 기능을 사용할 수 있도록 하는 것이다.
그것의 장점은 갈고리에 성공적으로 봉인될 수 있기 때문에 불필요한 구성 요소를 업무 논리의 용기로 작성하는 것을 피할 수 있다는 것이다.
따라서 구성 요소 간에 공유 논리가 많을 때 갈고리가 도움이 됩니다.그것들을 사용하면 React의 포장기 지옥을 피하고 구성 요소의 나무 구조를 납작하게 할 수 있습니다.이 밖에 많은 사람들이 연결고리를 사용하면 열 재부팅과 최적화를 더욱 빨리 실행할 수 있다는 것을 알아차렸다.
그 밖에 많은 개발자들은 갈고리를 위한 테스트가 클래스 구성 요소에 대한 테스트보다 쉽다고 인정한다.
마지막으로 마찬가지로 중요한 것은 갈고리가 있는 함수 구성 요소는 종종 그들의 클래스 옵션보다 경량급이다.
프로젝트에서 연결을 사용할지 여부를 결정합니다.내가 보기에 React의 강력한 기능, 특히 새로운 점은 당신이 가장 좋아하는 세계인 OOP나 함수식 프로그래밍을 자유롭게 선택할 수 있다는 것이다.
연결을 사용하여 React 응용 프로그램 구축
우리 갈고리의 실천 경험을 계속 공부합시다.이 절에서, 나는 당신에게 간단하지만 기능이 강한 분석 응용 프로그램을 위해 사용자 인터페이스를 만드는 방법을 보여 주고 싶습니다. 이 응용 프로그램은 최소한의 코드 줄만 작성하면 됩니다.
React 데이터 시각화 도구
분석 기능(즉 데이터 투시와 도표)의 요구를 만족시키기 위해 우리는 Flexmonster Pivot Table & Charts 을 사용할 것이다.왜?현재, 이것은 내가 찾을 수 있는 유일한 React 실시간 연결을 지원하는 웹 보고서에 사용되는 자바스크립트 라이브러리이다.또한 React의 최신 버전과 호환됩니다.
프레젠테이션 목적으로 Create React App environment 을 사용하여 단일 페이지 응용 프로그램을 만들 것입니다.
다음 단계는 React 프로젝트에 보고 도구를 설정하는 것입니다.이를 위해, 우리는 단지 세 가지 간단한 절차를 채택할 수 있을 뿐이다.설정 절차를 건너뛰고 React 프로그램의 라이브러리를 직접 사용하려면 기존 project from GitHub 를 다운로드하여 실행하고 필요에 따라 사용자 정의할 수 있습니다.
하지만 다음 지침을 통해 구성 보고 솔루션을 체험해 보십시오.
npm i react-flexmonster --save
PivotTableHooks.js 파일을 만들고 FlexmonsterReact를 포함합니다.import * as FlexmonsterReact from 'react-flexmonster/hooks';
먼저 나중에 분석할 JSON 데이터 세트를 저장하는 변수를 만듭니다.
const dataset = [{
"Revenue": {
"type": "number"
},
"Burn Rate": {
"type": "number"
},
"Net Sales": {
"type": "number"
},
"Expenses": {
"type": "number"
},
"Date": {
"type": "date"
},
"Date Time": {
"type": "date string"
},
"Discount": {
"type": "number"
}
},
{
"Burn Rate": 0.01,
"Revenue": 455,
"Net Sales": 250,
"Expenses": 55,
"Date": "2018-02-14T07:34:08",
"Date Time": "2018-02-14T07:34:08",
"Discount": 45
},
/// ...
]
const pivot_ref = React.useRef();
const column_chart_ref = React.useRef();
const line_chart_ref = React.useRef();
const line_chart2_ref = React.useRef();
const line_chart3_ref = React.useRef();
const pivot_report = {
dataSource: {
data: dataset
},
"slice": {
"reportFilters": [{
"uniqueName": "Date.Year",
"filter": {
"members": [
"date.year.[2018]",
"date.year.[2019]"
]
}
}],
"rows": [{
"uniqueName": "Date.Month"
}],
"columns": [{
"uniqueName": "[Measures]"
}],
"measures": [{
"uniqueName": "Revenue",
"aggregation": "sum"
},
{
"uniqueName": "Discount",
"aggregation": "sum"
},
{
"uniqueName": "Net Sales",
"aggregation": "sum"
},
{
"uniqueName": "Gross Sales",
"formula": "sum(\"Net Sales\") + sum(\"Discount\")",
"caption": "Gross Sales"
},
{
"uniqueName": "Gross Profit Margin",
"formula": "(sum(\"Revenue\") - sum(\"Net Sales\") ) / sum(\"Revenue\")",
"caption": "Gross Profit Margin",
"format": "percentages_formatting"
},
{
"uniqueName": "Burn Rate",
"aggregation": "average",
"active": false,
"format": "percentages_formatting"
}
]
},
"conditions": [{
"formula": "#value > 6000",
"measure": "Revenue",
"format": {
"backgroundColor": "#00A45A",
"color": "#FFFFFF",
"fontFamily": "Arial",
"fontSize": "12px"
}
},
{
"formula": "#value > 1000",
"measure": "Discount",
"format": {
"backgroundColor": "#df3800",
"color": "#FFFFFF",
"fontFamily": "Arial",
"fontSize": "12px"
}
}
],
"formats": [{
"name": "percentages_formatting",
"decimalPlaces": 2,
"isPercent": true
}]
};
return <div className="App">
<FlexmonsterReact.Pivot ref={pivot_ref} toolbar={true} width="100%" report={pivot_report} reportcomplete={onReportComplete} reportchange={syncFilters}/>
<FlexmonsterReact.Pivot ref={column_chart_ref} toolbar={false} width="100%" report={report_column_chart}/>
<FlexmonsterReact.Pivot ref={line_chart_ref} toolbar={false} width="100%" report={report_line_chart}/>
<FlexmonsterReact.Pivot ref={line_chart2_ref} toolbar={false} width="100%" report={report_line_chart_2}/>
<FlexmonsterReact.Pivot ref={line_chart3_ref} toolbar={false} width="100%" report={report_line_chart_3}/>
</div>;
Flexmonster의 모든 실례를 초기화한 후에 보상으로 그것들을 연결할 것을 건의합니다.우리는 계기판 요소의 필터를 동기화하여 그것들 간의 실시간 상호작용을 실현할 수 있다.모든 투시도가 투시표의 필터 설정의 변경에 반응하도록 합니다.이것은
src 이벤트와 사용자 정의 함수를 통해 쉽게 완성할 수 있습니다.const syncFilters = () => {
if (!pivot_ref || !column_chart_ref || !line_chart_ref || !line_chart2_ref || !line_chart3_ref) return;
// apply filters from the pivot table to all the charts
var hierarchies = pivot_ref.current.flexmonster().getAllHierarchies();
hierarchies.forEach(function(item) {
column_chart_ref.current.flexmonster().setFilter(item.uniqueName, pivot_ref.current.flexmonster().getFilter(item.uniqueName));
line_chart_ref.current.flexmonster().setFilter(item.uniqueName, pivot_ref.current.flexmonster().getFilter(item.uniqueName));
line_chart2_ref.current.flexmonster().setFilter(item.uniqueName, pivot_ref.current.flexmonster().getFilter(item.uniqueName));
line_chart3_ref.current.flexmonster().setFilter(item.uniqueName, pivot_ref.current.flexmonster().getFilter(item.uniqueName));
});
}
reportchange 및 라우터 처리 홈 페이지:import React, {Component} from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import PivotTableHooks from './PivotTableHooks';
class App extends Component {
render(){
return (
<Router>
<Route path="/" component={PivotTableHooks}/>
</Router>
);
}
}
export default App;
결과
이제 응용 프로그램을 실행하고 결과를 볼 때가 되었습니다!콘솔에
PivotTableHooks 를 입력하고 App.js 를 엽니다.보시다시피 데이터 투시표와 데이터 투시도는 한 페이지에 표시됩니다.결합하여 그들은 같은 데이터의 다른 보기를 제공했다.응용 프로그램의 최종 사용자는 이러한 삽입식 분석과 상호작용을 하여 통찰력 있는 보고서를 생성할 수 있다.모든 대시보드의 요소가 동기화되기 때문에 격자에서 데이터를 필터할 때마다 데이터도 투시도에서 필터링됩니다.
참고로 보고서는 코드뿐만 아니라 UI를 통해 구성할 수 있습니다.또한 JSON 형식으로 저장하고 PDF, Excel, HTML 및 기타 형식으로 내보낼 수 있습니다.
코드
myGitHub에서 예시 항목의 전체 코드를 볼 수 있습니다.
대시보드를 사용하고 기능을 탐색하려면 CodePen 에서 제공하는 다른 JavaScript 예제를 테스트할 수 있습니다.
마지막 생각
오늘 우리는 데이터 분석의 도전에 대응하기 위해 React 연결을 사용하여 응용 프로그램을 만들고 응용 프로그램에 맞춤형 삽입식 보고 솔루션을 제공하는 연습을 했습니다.
당신의 경험에서 결론을 얻을 수 있듯이, 이러한 응용 프로그램을 만드는 데는 거의 시간이 필요하지 않다.내가 보기에, 이것은 연결고리를 사용하면 투시표를 쉽게 추가할 수 있기 때문이다.가져오기 문장을 작성하고 몇 초 안에 보고 기능을 응용 프로그램에 연결할 수 있습니다.
이 강좌는 이 구성 요소를 사용하는 많은 장면 중 하나를 제공했다.또는, 투시표를 SQL/NoSQL 데이터베이스, OLAP 다차원 데이터 집합 또는 Elasticsearch에서 데이터를 검색하여 더욱 복잡한 데이터를 구축할 수 있습니다. 구체적으로는 당신이 가장 좋아하는 데이터 원본에 달려 있습니다.
피드백
나는 당신이 본 강좌에 대한 피드백을 듣고 매우 기쁩니다.만약 어떤 개선 건의가 있다면, 우리는 감격을 금할 수 없을 것이다.
자세한 내용
React 연결에 대한 이해를 높이기 위해 official guide on React Hooks 및 Hooks at a Glance - 경험이 있는 React 사용자의 개요를 읽어보시기 바랍니다.그 밖에 소피 알버트, 단 아브라모프, 라이언 플로렌스의 강연을 좋아할 수도 있다.
Flexmonster의 기능을 더욱 깊이 있게 이해하기 위해 나는 그live demos,tutorials on integration with frameworks과API reference를 탐색할 것을 건의한다.
Reference
이 문제에 관하여(React 갈고리를 사용하여 비즈니스 인텔리전스: 보고서 응용 프로그램 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/veronikaro/towards-business-intelligence-with-react-hooks-creating-a-reporting-app-3j3l텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
