devextreme-planit-treegrid-react 0.0.1

package/README.md

@@ -0,0 +1,105 @@
+# DevExtreme Planit Tree Grid
+
+DevExtreme Planit Tree Grid는 Devextreme의 PivotGrid에 Colspan과 컬러 지정 기능 등의 몇 가지 추가 기능을 설정한 React Wrapper입니다.
+코드는 React와 typescript로 작성되었으며, DevExtreme 22.1 버전에서 테스트 되었습니다.
+
+## Dependecies
+
+엑셀 다운로드 기능을 사용하기 위해서는 아래의 두 의존성을 설치해야 합니다.
+
+```
+npm install exceljs
+
+npm install file-saver
+```
+
+## Getting Started
+
+DevExtreme이 설치되어 있어야 합니다.
+
+```
+npm install devextreme
+```
+
+```
+npm install devextreme-planit-tree-grid-react
+```
+
+사용 방법은 DevExtreme의 PivotGrid의 사용방법과 같습니다. [DevExtreme PivotGrid](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxPivotGrid/)의 기능을 그대로 사용하실 수 있습니다.
+
+```
+import DxPlanitTreeGrid from 'devextreme-planit-tree-grid-react'
+
+<DxPlanitTreeGrid
+  ref={$childRef}
+  dataSource={dataSource}
+  groupField={TreeDataGroup}
+  dataColor={[
+    { format: 'percent', color: 'rgb(26, 169, 228)', condition: '>= 110' },
+    { format: 'percent', color: '#fd7e14', condition: '< 100' },
+  ]}
+  convertNullToHipen={true}
+  convertZeroToHipen={true}
+  stateStoringKey={'dx-vera-pivotgrid-storing'}
+  allowSortingBySummary={true}
+  ...
+/>
+```
+
+DevExtreme PivotGrid에 몇몇 기능이 추가되었습니다. 추가된 기능은 아래와 같습니다.
+
+### 1. dataColor
+
+특정 조건 데이터의 컬러를 직접 지정하실 수 있습니다.
+
+1. format: [DevExtreme PivotGrid Data Format](https://js.devexpress.com/Documentation/ApiReference/Common/Object_Structures/Format/) 타입을 사용하실 수 있습니다.
+2. color: (string) 사용하고자 하는 컬러값을 rgba 혹은 hex 형식으로 입력합니다.
+3. condition: (string) 컬러값을 사용할 조건을 입력합니다.(예: 100보다 큰 수에만 컬러를 적용하고자 하는 경우 '> 100')
+
+### 2. convertNullToHipen
+
+value가 null 인 데이터를 하이픈('-')으로 보여줍니다.
+
+### 3. convertZeroToHipen
+
+value가 0 | '0' | '0%' 인 데이터를 하이픈('-')으로 보여줍니다.
+
+### 4. groupField
+
+groupField는 그리드 상단에 colspan 된 새로운 column을 생성합니다.
+
+```
+export const TreeDataGroup: IGroupField[] = [
+  {
+    groupCaption: '진료 수입 (백만원)',
+    groupName: 'mediIncome',
+    depth: 1,
+    colspan: 7,
+  },
+  {
+    groupCaption: '전체',
+    groupName: 'mediIncomeAll',
+    depth: 2,
+    colspan: 3,
+  },
+
+  ....
+
+```
+
+\*\*Note: [DevExtreme PivotGrid](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxPivotGrid/) 중 아래의 기능은 사용 불능 처리되었습니다.
+
+> id, width, height, showColumnGrandTotals, showColumnTotals, showRowGrandTotals, FieldChooser
+
+\*\*Note: [DevExtreme PivotGrid](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxPivotGrid/) 중 아래의 기능은 사용 방법이 변경되었습니다.
+
+> &lt;StateStoring enabled='true' /&gt; 은 stateStoringKey: boolean property로 대체되었습니다.
+>
+> stateStoringKey가 없을 경우, &lt;StateStoring enabled='false' /&gt; 와 동일하게 작동합니다.
+
+```
+<DxPlanitTreeGrid
+  stateStoringKey={'dx-vera-pivotgrid-storing'}
+  ...
+/>
+```

package/dist/index.tsx

@@ -0,0 +1,3 @@
+import DxPlanitTreeGrid from './DxPlanitTreeGrid';
+
+export default DxPlanitTreeGrid;

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "devextreme-planit-treegrid-react",
+  "version": "0.0.1",
+  "description": "Devextreme의 DxPivotGrid를 Tree Grid처럼 보여주는 Wrapper입니다.",
+  "main": "dist/DxPlanitTreeGrid.js",
+  "types": "dist/type.d.ts",
+  "files": [
+    "dist/index.tsx",
+    "README.md"
+  ],
+  "repository": "https://github.com/hsquare-analytics/ui-tree-grid.git",
+  "author": "bcahn <antonio1926@gmail.com>",
+  "license": "MIT",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "clean": "rimraf dist",
+    "compile": "npm run clean && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-react"
+    ]
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "devextreme": "^22.1.6",
+    "devextreme-planit-tree-grid-react": "^0.0.2",
+    "devextreme-react": "^22.1.6",
+    "exceljs": "^4.3.0",
+    "file-saver": "^2.0.5",
+    "typescript": "^4.9.3",
+    "uuid": "^9.0.0",
+    "web-vitals": "^2.1.4"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.3",
+    "react-scripts": "^5.0.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.19.3",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/file-saver": "^2.0.5",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@types/uuid": "^8.3.4",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.27.0",
+    "prettier": "^2.7.1"
+  }
+}