diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/README.md b/README.md index f9bd013..f093d38 100644 --- a/README.md +++ b/README.md @@ -1,178 +1,105 @@ -# 📊 Getting Started — React Pivot Table Component (Syncfusion EJ2) +# 📊 React Pivot Table Sample (Syncfusion EJ2) -[![License](https://img.shields.io/badge/license-SEE%20LICENSE%20IN%20license-blue.svg)](https://www.syncfusion.com/content/downloads/syncfusion_license.pdf) -[![React](https://img.shields.io/badge/React-19.2.4-blue.svg)](https://react.dev/) -[![Last Updated](https://img.shields.io/github/last-commit/SyncfusionExamples/getting-started-with-the-react-pivot-table-component.svg)](https://github.com/SyncfusionExamples/getting-started-with-the-react-pivot-table-component/commits) -[![Syncfusion Version](https://img.shields.io/badge/Syncfusion%20EJ2-32.1.19-green.svg)](https://www.syncfusion.com/react-components/) -[![Node.js](https://img.shields.io/badge/Node.js-LTS-green.svg)](https://nodejs.org/) -[![npm](https://img.shields.io/badge/npm-v10%2B-blue.svg)](https://www.npmjs.com/) +[![React](https://img.shields.io/badge/React-19.2.6-blue.svg)](https://react.dev/) +[![Syncfusion](https://img.shields.io/badge/Syncfusion%20EJ2-33.2.6-green.svg)](https://www.syncfusion.com/react-components/) +[![TypeScript](https://img.shields.io/badge/TypeScript-6.0-blue.svg)](https://www.typescriptlang.org/) +[![Vite](https://img.shields.io/badge/Vite-8.0-purple.svg)](https://vitejs.dev/) -> 🚀 **React quick-start template** demonstrating Syncfusion EJ2 `PivotView` (Pivot Table) with **Field List**, **Calculated Fields**, **Data Formatting**, **Multi-level Sorting & Filtering** — includes sample sales data, CLI scripts, and production-ready configuration. +> A **minimal React sample** demonstrating Syncfusion EJ2 `PivotView` with **Field List**, **Calculated Fields**, and **Currency Formatting**. Built with TypeScript, Vite, and includes sample sales data. > **📺 Official Demo:** https://ej2.syncfusion.com/react/demos/#/material3/pivot-table/overview -> **📚 Official Documentation:** https://ej2.syncfusion.com/react/documentation/pivotview/getting-started +> **📚 Documentation:** https://ej2.syncfusion.com/react/documentation/pivotview/getting-started --- -## 📑 Table of Contents +## 📑 Quick Links - [🔍 Overview](#-overview) -- [✨ Key Features](#-key-features) -- [📋 Prerequisites](#-prerequisites) -- [🧭 Quick Start](#-quick-start) +- [✨ Features](#-features) +- [⚡ Quick Start](#-quick-start) - [🗂️ Project Structure](#-project-structure) -- [🎨 Theming & Styling](#-theming--styling) -- [🧩 Minimal Example](#-minimal-example) -- [⚙️ Configuration & Customization](#-configuration--customization) -- [💡 Usage Examples](#-usage-examples) -- [🔗 Dependencies & Browser Support](#-dependencies--browser-support) -- [🤝 Contributing](#-contributing) -- [📜 License & Support](#-license--support) +- [📦 Dependencies](#-dependencies) --- ## 🔍 Overview -This repository provides a **production-ready starter template** for integrating Syncfusion's powerful `PivotView` (Pivot Table) component into your **React applications**. It demonstrates essential pivot table features for real-world business intelligence and data analysis scenarios. +A practical React sample showcasing Syncfusion's `PivotView` component. This sample demonstrates: -The sample includes: -- ✅ Interactive Pivot Table with comprehensive data analysis -- ✅ Dynamic Field List for runtime field configuration -- ✅ Calculated Fields for custom data computations -- ✅ Data Formatting (currency, percentages, custom formats) -- ✅ Multi-level Sorting and Filtering capabilities -- ✅ Sample sales dataset with real-world data structure -- ✅ Responsive design with Tailwind CSS styling -- ✅ Pre-configured data source with drill-down support +- **Interactive Pivot Table** with sales data (Country, State, Product, Date, Amount, Quantity) +- **Dynamic Field List** for runtime field configuration +- **Calculated Fields** for custom calculations +- **Currency Formatting** (Amount displayed in currency format) +- **Pre-configured Data Source** with drill-down support for France -### Who Should Use This? +### Use Cases -- 📈 Business analysts building custom reporting tools -- 💼 Enterprise developers creating dashboards and analytics -- 🎓 React developers learning Syncfusion component integration -- 🛠️ Teams migrating from legacy pivot table solutions +- 📊 Business analytics dashboards +- 💼 Sales data visualization +- 📈 Multi-dimensional data exploration --- -## ✨ Key Features - -| Feature | Description | Benefit | -|---------|-------------|---------| -| 🎯 **Field List Interface** | Dynamically add, remove, and rearrange data fields at runtime | Empowers end-users to customize reports without code modifications | -| 📊 **Flexible Data Binding** | Supports relational data binding with hierarchical structures | Handle complex multi-dimensional business data | -| 🧮 **Calculated Fields** | Create custom formulas combining multiple data fields | Advanced data analysis and business metric computation | -| 💱 **Data Formatting** | Display values in currency, percentages, and custom formats | Professional presentation of numerical data | -| ↕️ **Multi-Level Sorting** | Sort by multiple fields with ascending/descending control | Enhanced data exploration and trend analysis | -| 🔗 **Advanced Filtering** | Filter by single or multiple criteria across all dimensions | Focused data analysis and drill-down exploration | -| 📱 **Responsive Design** | Adapts seamlessly to desktop, tablet, and mobile screens | Universal accessibility across all devices | -| 📤 **Export Functionality** | Export pivot table data to Excel and PDF formats | Generate shareable reports and archives | -| 🎨 **Theme Support** | Multiple Tailwind and Bootstrap themes available | Consistent branding and visual customization | -| ⚡ **Performance Optimized** | Efficient rendering with virtual scrolling | Handle large datasets without performance degradation | +## ✨ Features ---- - -## 📋 Prerequisites - -Ensure you have the following installed on your system: - -- **Node.js** (LTS version 18.x or higher) — [Download](https://nodejs.org/) -- **npm** (v9+) or **yarn** (v1.22+) — Included with Node.js -- **Visual Studio Code** (Recommended) — [Download](https://code.visualstudio.com/download) -- **Git** (For cloning the repository) — [Download](https://git-scm.com/) - -### Supported Browsers - -- ✅ Chrome (Latest) -- ✅ Firefox (Latest) -- ✅ Safari (Latest) -- ✅ Edge (Latest) +| Feature | Details | +|---------|---------| +| 🎯 **Field List** | Dynamically configure rows, columns, values, and filters | +| 🧮 **Calculated Fields** | Create custom formulas for advanced analysis | +| 💱 **Currency Formatting** | Amount values displayed in currency format | +| 📊 **Drill-Down Support** | France pre-configured for drill-down exploration | +| 🔄 **Multi-Dimensional Data** | Organized by Country, State, Product, and Date | +| 📏 **Compact & Efficient** | Minimal setup, ready-to-run sample --- -## 🧭 Quick Start +## ⚡ Quick Start -### 1️⃣ Clone the Repository +### Prerequisites -```bash -git clone https://github.com/SyncfusionExamples/getting-started-with-the-react-pivot-table-component.git -cd getting-started-with-the-react-pivot-table-component -``` +- **Node.js** v18+ — [Download](https://nodejs.org/) +- **npm** v9+ (included with Node.js) -### 2️⃣ Install Dependencies - -#### Using npm: +### Installation & Setup ```bash +# Install dependencies npm install -``` - -#### Using yarn: - -```bash -yarn install -``` - -### 3️⃣ Start the Development Server - -#### Using npm: - -```bash -npm start -``` - -#### Using yarn: -```bash -yarn start +# Start development server +npm run dev ``` -The application will automatically open in your default browser at: -``` -http://localhost:3000 -``` +The application opens at `http://localhost:5173` --- -## 🔗 Dependencies & Browser Support - -### Primary Dependencies - -``` -@syncfusion/ej2-react-pivotview (^26.1.39) -├── @syncfusion/ej2-pivotview -├── @syncfusion/ej2-data -├── @syncfusion/ej2-grids -├── @syncfusion/ej2-excel-export -├── @syncfusion/ej2-pdf-export -├── @syncfusion/ej2-calendars -├── @syncfusion/ej2-charts -├── @syncfusion/ej2-inputs -├── @syncfusion/ej2-buttons -├── @syncfusion/ej2-dropdowns -├── @syncfusion/ej2-lists -├── @syncfusion/ej2-popups -└── @syncfusion/ej2-navigations -``` +## � Dependencies -### Other Project Dependencies +### Production ```json { - "react": "^19.2.4", - "react-dom": "^19.2.4", - "react-scripts": "5.0.1" + "@syncfusion/ej2-react-pivotview": "^33.2.6", + "react": "^19.2.6", + "react-dom": "^19.2.6" } ``` -### Browser Compatibility +### Development + +- TypeScript (~6.0.2) +- Vite (^8.0.12) +- ESLint (^10.3.0) -| Browser | Minimum Version | Status | -|---------|-----------------|--------| -| Chrome | 90+ | ✅ Fully Supported | -| Firefox | 88+ | ✅ Fully Supported | -| Safari | 14+ | ✅ Fully Supported | -| Edge | 90+ | ✅ Fully Supported | -| IE 11 | - | ⚠️ Requires Polyfills | +### Available Scripts + +```bash +npm run dev # Start development server +npm run build # Build for production +npm run lint # Run ESLint +npm run preview # Preview production build +``` --- @@ -180,309 +107,78 @@ http://localhost:3000 ``` getting-started-with-the-react-pivot-table-component/ -├── public/ -│ ├── index.html # Main HTML entry point -│ ├── manifest.json # PWA manifest configuration -│ └── robots.txt # SEO robots configuration ├── src/ -│ ├── App.js # Main React component with PivotView -│ ├── App.css # Component styling & theme imports -│ ├── App.test.js # Unit tests for App component -│ ├── datasource.js # Sample sales data (pivot table dataset) -│ ├── index.js # React application entry point -│ ├── index.css # Global application styles -│ ├── reportWebVitals.js # Performance monitoring -│ └── setupTests.js # Test environment configuration -├── package.json # Project dependencies & scripts -├── README.md # This file -├── getting-started.md # Detailed getting started guide -└── .gitignore # Git ignore configuration - -### Key Files Explained: - -- **`src/App.js`** — Core PivotView component with configuration, field list, and calculated fields enabled -- **`src/datasource.js`** — Sample dataset containing sales data across multiple countries -- **`src/App.css`** — Imports all required Syncfusion themes and component styles -``` - ---- - -## 🎨 Theming & Styling - -### Available Themes - -Syncfusion provides multiple professional themes. Update your `src/App.css` to use your preferred theme: - -#### Option 1: Tailwind3 Theme (Default - Recommended) -```css -@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-react-pivotview/styles/tailwind3.css'; +│ ├── App.tsx # Main React component with PivotView +│ ├── App.css # Component styling +│ ├── datasource.ts # Sales dataset (15 records) +│ ├── main.tsx # React entry point +│ └── index.css # Global styles +├── public/ # Static assets +├── package.json # Dependencies & scripts +├── vite.config.ts # Vite configuration +├── tsconfig.json # TypeScript configuration +└── README.md # This file ``` -#### Option 2: Bootstrap5 Theme -Replace `tailwind3.css` with `bootstrap5.css` in all imports +### Key Files -#### Option 3: Material Theme -Replace `tailwind3.css` with `material.css` in all imports +- **src/App.tsx** — PivotView configuration with rows (Country, State), columns (Date, Product), and values (Amount, Quantity) -### Custom Styling - -Add custom CSS to `src/App.css` after the theme imports: - -```css -/* Override Syncfusion defaults */ -.e-pivotview { - background-color: #f5f5f5; - border-radius: 8px; -} - -.e-pivot-button { - border-color: #007bff; -} -``` - ---- - -## 🧩 Minimal Example - -Create a basic PivotView with just a few lines of code: - -```jsx -import React from 'react'; -import { PivotViewComponent, Inject, FieldList } from '@syncfusion/ej2-react-pivotview'; -import './App.css'; - -const MinimalPivotApp = () => { - const dataSourceSettings = { - dataSource: [ - { Country: 'USA', Product: 'Bike', Amount: 1000, Quantity: 10 }, - { Country: 'USA', Product: 'Car', Amount: 5000, Quantity: 5 }, - { Country: 'Canada', Product: 'Bike', Amount: 800, Quantity: 8 } - ], - rows: [{ name: 'Country' }], - columns: [{ name: 'Product' }], - values: [{ name: 'Amount', caption: 'Sales Amount' }], - filters: [] - }; - - return ( - - - - ); -}; - -export default MinimalPivotApp; -``` --- -## ⚙️ Configuration & Customization - -### Essential Properties - -```jsx - - - -``` +## 📖 Core Implementation -### DataSourceSettings Configuration +### PivotView Configuration (src/App.tsx) -```jsx -const dataSourceSettings = { - dataSource: pivotData, +```tsx +const dataSourceSettings: DataSourceSettingsModel = { + columns: [{ name: 'Date', caption: 'Date' }, { name: 'Product' }], + dataSource: pivotData as IDataSet[], expandAll: false, - - // Field arrangement in axes - rows: [ - { name: 'Country', caption: 'Country' }, - { name: 'State' } - ], - columns: [ - { name: 'Date', caption: 'Fiscal Year' }, - { name: 'Product' } - ], - values: [ - { name: 'Amount', caption: 'Total Sales', type: 'Sum' }, - { name: 'Quantity', caption: 'Quantity Sold', type: 'Count' } - ], filters: [], - - // Formatting - formatSettings: [ - { name: 'Amount', format: 'C2' }, // Currency with 2 decimals - { name: 'Quantity', format: 'N0' } // Number without decimals - ], - - // Drill-down configuration - drilledMembers: [ - { name: 'Country', items: ['France'] } - ] -}; -``` - -### Format String Examples - -| Format Code | Example Output | Use Case | -|------------|-----------------|----------| -| `C0` | $1,234 | Currency without decimals | -| `C2` | $1,234.56 | Currency with 2 decimals | -| `N0` | 1,234 | General number | -| `N2` | 1,234.56 | Decimal numbers | -| `P0` | 50% | Percentage | -| `P2` | 50.25% | Percentage with decimals | - ---- - -## 💡 Usage Examples - -### Example 1: Sales Dashboard with Calculated Fields - -```jsx -import { PivotViewComponent, Inject, CalculatedField, FieldList } from '@syncfusion/ej2-react-pivotview'; -import { pivotData } from './datasource'; - -function SalesDashboard() { - const dataSourceSettings = { - dataSource: pivotData, - rows: [{ name: 'Country' }], - columns: [{ name: 'Date' }, { name: 'Product' }], - values: [ - { name: 'Amount', caption: 'Sales' }, - { name: 'Quantity', caption: 'Qty' } - ], - formatSettings: [{ name: 'Amount', format: 'C0' }] - }; - - return ( -
-

📊 International Sales Dashboard

- - - -
- ); -} - -export default SalesDashboard; -``` - -### Example 2: Regional Performance Analysis - -```jsx -const regionalSettings = { - dataSource: pivotData, + drilledMembers: [{ name: 'Country', items: ['France'] }], + formatSettings: [{ name: 'Amount', format: 'C0' }], rows: [{ name: 'Country' }, { name: 'State' }], - columns: [{ name: 'Date' }], values: [ - { name: 'Amount', caption: 'Revenue' }, - { name: 'Quantity', caption: 'Units Sold' } - ], - filters: [{ name: 'Product', caption: 'Filter by Product' }], - formatSettings: [{ name: 'Amount', format: 'C2' }], - drilledMembers: [{ name: 'Country', items: ['France', 'Germany'] }] -}; -``` - -### Example 3: Custom Formatting with Conditional Styling - -```jsx -const advancedSettings = { - dataSource: pivotData, - rows: [{ name: 'Country' }], - columns: [{ name: 'Product' }], - values: [{ name: 'Amount', caption: 'Total Amount' }], - formatSettings: [ - { - name: 'Amount', - format: 'C2', - minimumSignificantDigits: 1, - maximumSignificantDigits: 3 - } + { name: 'Amount', caption: 'Sold Amount' }, + { name: 'Quantity', caption: 'Quantity' } ] }; ``` ---- - -## 🤝 Contributing - -We welcome contributions! Here's how you can help: +- **Rows:** Country, State (hierarchical) +- **Columns:** Date, Product +- **Values:** Amount (currency), Quantity +- **Currency Formatting:** Amount shows as C0 (e.g., $2,100) +- **Drill-Down:** France pre-configured for exploration -1. **Fork** the repository -2. **Create** a feature branch (`git checkout -b feature/amazing-feature`) -3. **Commit** your changes (`git commit -m 'Add amazing feature'`) -4. **Push** to the branch (`git push origin feature/amazing-feature`) -5. **Open** a Pull Request +### Sample Data Structure -### Guidelines - -- Follow React and ES6+ best practices -- Include comments for complex logic -- Add tests for new features -- Update documentation as needed +```typescript +{ + Amount: number, + Country: string, // Canada, France, Germany, United Kingdom, United States + Date: string, // FY 2005-2008 + Product: string, // Bike, Van, Car + Quantity: number, + State: string +} +``` --- -## 📜 License & Support - -### License - -This project is licensed under the **Syncfusion Community License**. See the [Syncfusion License](https://www.syncfusion.com/content/downloads/syncfusion_license.pdf) for details. - -### Support & Resources +## 🚀 Next Steps -- 📚 **Official Documentation:** [Syncfusion React PivotView](https://ej2.syncfusion.com/react/documentation/pivotview/getting-started) -- 🎬 **Video Tutorials:** [Syncfusion YouTube Channel](https://www.youtube.com/c/SyncfusionInc) -- 💬 **Support Forum:** [Syncfusion Support](https://www.syncfusion.com/forums/react-js2) -- 🐛 **Report Issues:** [GitHub Issues](https://github.com/SyncfusionExamples/getting-started-with-the-react-pivot-table-component/issues) -- 📧 **Contact Us:** support@syncfusion.com - -### Additional Resources - -- 🔗 [Syncfusion React Components](https://www.syncfusion.com/react-components/) -- 📖 [Syncfusion Community](https://www.syncfusion.com/forums/react-js2) -- 🎯 [Getting Started with React](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) +1. Modify `src/datasource.ts` to add your own data +2. Update `dataSourceSettings` in `src/App.tsx` for different dimensions +3. Add more field services (`GroupingBar`, `ConditionalFormatting`, etc.) via Inject +4. Enable exports: `allowExcelExport`, `allowPdfExport` --- -## ⚡ Performance Tips +## 📚 Resources -- ✅ Use **virtual scrolling** for large datasets (1000+ rows) -- ✅ Enable **lazy loading** for remote data sources -- ✅ Optimize **format settings** to reduce rendering overhead -- ✅ Use **filter and drill-down** to reduce data volume displayed -- ✅ Consider **server-side aggregation** for very large datasets - ---- +- [Syncfusion PivotView Docs](https://ej2.syncfusion.com/react/documentation/pivotview/getting-started) +- [Syncfusion React Components](https://www.syncfusion.com/react-components/) +- [GitHub Issues](https://github.com/SyncfusionExamples/) diff --git a/eslint.config.js b/eslint.config.js new file mode 100644 index 0000000..ef614d2 --- /dev/null +++ b/eslint.config.js @@ -0,0 +1,22 @@ +import js from '@eslint/js' +import globals from 'globals' +import reactHooks from 'eslint-plugin-react-hooks' +import reactRefresh from 'eslint-plugin-react-refresh' +import tseslint from 'typescript-eslint' +import { defineConfig, globalIgnores } from 'eslint/config' + +export default defineConfig([ + globalIgnores(['dist']), + { + files: ['**/*.{ts,tsx}'], + extends: [ + js.configs.recommended, + tseslint.configs.recommended, + reactHooks.configs.flat.recommended, + reactRefresh.configs.vite, + ], + languageOptions: { + globals: globals.browser, + }, + }, +]) diff --git a/index.html b/index.html new file mode 100644 index 0000000..bc7c5f5 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + pivot-sample + + +
+ + + diff --git a/package.json b/package.json index 2fd7934..efd9532 100644 --- a/package.json +++ b/package.json @@ -1,39 +1,31 @@ { - "name": "getting-started-with-the-react-pivot-table-component", - "version": "0.1.0", + "name": "pivot-sample", "private": true, - "dependencies": { - "@syncfusion/ej2-react-pivotview": "^26.1.39", - "@testing-library/jest-dom": "^5.17.0", - "@testing-library/react": "^16.3.2", - "@testing-library/user-event": "^14.5.2", - "react": "^19.2.4", - "react-dom": "^19.2.4", - "react-scripts": "5.0.1", - "web-vitals": "^2.1.4" - }, + "version": "0.0.0", + "type": "module", "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "dev": "vite", + "build": "tsc -b && vite build", + "lint": "eslint .", + "preview": "vite preview" }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] + "dependencies": { + "@syncfusion/ej2-react-pivotview": "^33.2.6", + "react": "^19.2.6", + "react-dom": "^19.2.6" }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] + "devDependencies": { + "@eslint/js": "^10.0.1", + "@types/node": "^24.12.3", + "@types/react": "^19.2.14", + "@types/react-dom": "^19.2.3", + "@vitejs/plugin-react": "^6.0.1", + "eslint": "^10.3.0", + "eslint-plugin-react-hooks": "^7.1.1", + "eslint-plugin-react-refresh": "^0.5.2", + "globals": "^17.6.0", + "typescript": "~6.0.2", + "typescript-eslint": "^8.59.2", + "vite": "^8.0.12" } } diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index a11777c..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..6893eb1 --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons.svg b/public/icons.svg new file mode 100644 index 0000000..e952219 --- /dev/null +++ b/public/icons.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/index.html b/public/index.html deleted file mode 100644 index aa069f2..0000000 --- a/public/index.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - - - - - - - - React App - - - -
- - - diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/public/logo192.png and /dev/null differ diff --git a/public/logo512.png b/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/public/logo512.png and /dev/null differ diff --git a/public/manifest.json b/public/manifest.json deleted file mode 100644 index 080d6c7..0000000 --- a/public/manifest.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "short_name": "React App", - "name": "Create React App Sample", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} diff --git a/public/robots.txt b/public/robots.txt deleted file mode 100644 index e9e57dc..0000000 --- a/public/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -# https://www.robotstxt.org/robotstxt.html -User-agent: * -Disallow: diff --git a/src/App.css b/src/App.css index 7b0a56e..b2638aa 100644 --- a/src/App.css +++ b/src/App.css @@ -1,11 +1,11 @@ -@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-grids/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css"; -@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-react-pivotview/styles/material.css'; \ No newline at end of file +@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-react-pivotview/styles/tailwind3.css'; \ No newline at end of file diff --git a/src/App.js b/src/App.js deleted file mode 100644 index 2906fef..0000000 --- a/src/App.js +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react'; -import { CalculatedField, FieldList, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview'; -import { pivotData } from './datasource'; -import './App.css'; - -function App() { - const dataSourceSettings = { - columns: [{ name: 'Date', caption: 'Date' }, { name: 'Product' }], - dataSource: pivotData, - expandAll: false, - filters: [], - drilledMembers: [{ name: 'Country', items: ['France'] }], - formatSettings: [{ name: 'Amount', format: 'C0' }], - rows: [{ name: 'Country' }, { name: 'State' }], - values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }] - }; - let pivotObj; - return ( - pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings} allowCalculatedField={true} showFieldList={true}> - - - ); -} - -export default App; \ No newline at end of file diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..0505ef1 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,21 @@ +import { CalculatedField, FieldList, type IDataSet, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview'; +import type { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model'; +import { pivotData } from './datasource'; +import './App.css'; + +function App() { + const dataSourceSettings: DataSourceSettingsModel = { + columns: [{ name: 'Date', caption: 'Date' }, { name: 'Product' }], + dataSource: pivotData as IDataSet[], + expandAll: false, + filters: [], + drilledMembers: [{ name: 'Country', items: ['France'] }], + formatSettings: [{ name: 'Amount', format: 'C0' }], + rows: [{ name: 'Country' }, { name: 'State' }], + values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }] + }; + return ( + ); +}; + +export default App; diff --git a/src/assets/hero.png b/src/assets/hero.png new file mode 100644 index 0000000..02251f4 Binary files /dev/null and b/src/assets/hero.png differ diff --git a/src/assets/react.svg b/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/vite.svg b/src/assets/vite.svg new file mode 100644 index 0000000..5101b67 --- /dev/null +++ b/src/assets/vite.svg @@ -0,0 +1 @@ +Vite diff --git a/src/datasource.js b/src/datasource.js deleted file mode 100644 index 45396c6..0000000 --- a/src/datasource.js +++ /dev/null @@ -1,17 +0,0 @@ -export let pivotData = [ - { Amount: 2100, Country: "Canada", Date: "FY 2005", Product: "Bike", Quantity: 22, State: "Alberta" }, - { Amount: 1100, Country: "Canada", Date: "FY 2006", Product: "Van", Quantity: 32, State: "Quebec" }, - { Amount: 3100, Country: "Canada", Date: "FY 2007", Product: "Car", Quantity: 22, State: "Alberta" }, - { Amount: 4800, Country: "France", Date: "FY 2005", Product: "Bike", Quantity: 49, State: "Charente-Maritime" }, - { Amount: 9100, Country: "France", Date: "FY 2007", Product: "Car", Quantity: 64, State: "Charente-Maritime" }, - { Amount: 2350, Country: "France", Date: "FY 2008", Product: "Van", Quantity: 46, State: "Gers" }, - { Amount: 3400, Country: "Germany", Date: "FY 2005", Product: "Bike", Quantity: 78, State: "Bayern" }, - { Amount: 8400, Country: "Germany", Date: "FY 2006", Product: "Van", Quantity: 90, State: "Hamburg" }, - { Amount: 7200, Country: "Germany", Date: "FY 2008", Product: "Car", Quantity: 92, State: "Bayern" }, - { Amount: 1040, Country: "United Kingdom", Date: "FY 2005", Product: "Bike", Quantity: 47, State: "England" }, - { Amount: 1500, Country: "United Kingdom", Date: "FY 2006", Product: "Van", Quantity: 24, State: "England" }, - { Amount: 4820, Country: "United Kingdom", Date: "FY 2008", Product: "Car", Quantity: 72, State: "England" }, - { Amount: 1520, Country: "United States", Date: "FY 2006", Product: "Bike", Quantity: 53, State: "North Carolina" }, - { Amount: 3320, Country: "United States", Date: "FY 2007", Product: "Car", Quantity: 49, State: "South Carolina" }, - { Amount: 6300, Country: "United States", Date: "FY 2008", Product: "Van", Quantity: 45, State: "South Carolina" }, -]; \ No newline at end of file diff --git a/src/datasource.ts b/src/datasource.ts new file mode 100644 index 0000000..35f2ed7 --- /dev/null +++ b/src/datasource.ts @@ -0,0 +1,17 @@ +export let pivotData: { [key: string]: Object }[] = [ + { Amount: 2100, Country: "Canada", Date: "FY 2005", Product: "Bike", Quantity: 22, State: "Alberta" }, + { Amount: 1100, Country: "Canada", Date: "FY 2006", Product: "Van", Quantity: 32, State: "Quebec" }, + { Amount: 3100, Country: "Canada", Date: "FY 2007", Product: "Car", Quantity: 22, State: "Alberta" }, + { Amount: 4800, Country: "France", Date: "FY 2005", Product: "Bike", Quantity: 49, State: "Charente-Maritime" }, + { Amount: 9100, Country: "France", Date: "FY 2007", Product: "Car", Quantity: 64, State: "Charente-Maritime" }, + { Amount: 2350, Country: "France", Date: "FY 2008", Product: "Van", Quantity: 46, State: "Gers" }, + { Amount: 3400, Country: "Germany", Date: "FY 2005", Product: "Bike", Quantity: 78, State: "Bayern" }, + { Amount: 8400, Country: "Germany", Date: "FY 2006", Product: "Van", Quantity: 90, State: "Hamburg" }, + { Amount: 7200, Country: "Germany", Date: "FY 2008", Product: "Car", Quantity: 92, State: "Bayern" }, + { Amount: 1040, Country: "United Kingdom", Date: "FY 2005", Product: "Bike", Quantity: 47, State: "England" }, + { Amount: 1500, Country: "United Kingdom", Date: "FY 2006", Product: "Van", Quantity: 24, State: "England" }, + { Amount: 4820, Country: "United Kingdom", Date: "FY 2008", Product: "Car", Quantity: 72, State: "England" }, + { Amount: 1520, Country: "United States", Date: "FY 2006", Product: "Bike", Quantity: 53, State: "North Carolina" }, + { Amount: 3320, Country: "United States", Date: "FY 2007", Product: "Car", Quantity: 49, State: "South Carolina" }, + { Amount: 6300, Country: "United States", Date: "FY 2008", Product: "Van", Quantity: 45, State: "South Carolina" }, +]; \ No newline at end of file diff --git a/src/index.css b/src/index.css index ec2585e..e69de29 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.js b/src/index.js deleted file mode 100644 index d563c0f..0000000 --- a/src/index.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; - -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render( - - - -); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..bef5202 --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import './index.css' +import App from './App.tsx' + +createRoot(document.getElementById('root')!).render( + + + , +) diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js deleted file mode 100644 index 5253d3a..0000000 --- a/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/src/setupTests.js b/src/setupTests.js deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; diff --git a/tsconfig.app.json b/tsconfig.app.json new file mode 100644 index 0000000..7f42e5f --- /dev/null +++ b/tsconfig.app.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "target": "es2023", + "lib": ["ES2023", "DOM"], + "module": "esnext", + "types": ["vite/client"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"] +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..1ffef60 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,7 @@ +{ + "files": [], + "references": [ + { "path": "./tsconfig.app.json" }, + { "path": "./tsconfig.node.json" } + ] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..d3c52ea --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "target": "es2023", + "lib": ["ES2023"], + "module": "esnext", + "types": ["node"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["vite.config.ts"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..8b0f57b --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], +})