react

Author: flagmanAndrew

React/src/App.css

@@ -1,4 +1,43 @@
-.main {
+.app {
   margin: 50px;
   width: 90vw;
-}
+}
+
+#sales {
+    margin-top: 80px;
+}
+
+.long-title h3 {
+    font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
+    font-weight: 200;
+    font-size: 28px;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.options {
+    margin-top: 20px;
+    padding: 20px;
+    background: #f5f5f5;
+}
+
+.options .caption {
+    font-size: 18px;
+    font-weight: 500;
+}
+
+.option {
+    margin-top: 10px;
+}
+
+.option > span {
+    width: 120px;
+    display: inline-block;
+}
+
+.option > .dx-widget {
+    display: inline-block;
+    vertical-align: middle;
+    width: 100%;
+    max-width: 350px;
+}

React/src/App.tsx

@@ -1,16 +1,124 @@
-import { useCallback, useState } from 'react';
-import './App.css';
 import 'devextreme/dist/css/dx.material.blue.light.compact.css';
-import Button from 'devextreme-react/button';
+import {
+  useMemo, useState, useRef, useCallback,
+} from 'react';
+import { type DataSourceOptions } from 'devextreme/common/data';
+import PivotGrid, { FieldChooser, type PivotGridRef } from 'devextreme-react/pivot-grid';
+import CheckBox, { type CheckBoxTypes } from 'devextreme-react/check-box';
+import service, { type Sale } from './service.ts';
+import './App.css';
+
+interface CustomSummaryValue {
+  summaryProcess?: string;
+  value?: any;
+  totalValue?: any;
+}
+
+const tempSales = service.getSales();
+
+tempSales.forEach((sale: Sale, index: number) => {
+  sale.isApproved = index % 2 !== 0;
+});
+
+const sales = tempSales;
+
+function citySelector(data: Sale): string {
+  return `${data.city} (${data.country})`;
+}
 
 function App(): JSX.Element {
-  var [count, setCount] = useState<number>(0);
-  const clickHandler = useCallback(() => {
-    setCount((prev) => prev + 1);
-  }, [setCount]);
+  const [isConditional, setIsConditional] = useState(true);
+  const isConditionalRef = useRef(isConditional);
+  const pivotGridRef = useRef<PivotGridRef>(null);
+
+  isConditionalRef.current = isConditional;
+
+  const calculateCustomSummary = useCallback((options: CustomSummaryValue) => {
+    switch (options.summaryProcess) {
+      case 'start':
+        options.totalValue = { conditionalVal: 0, rawVal: 0, count: 0 };
+        break;
+      case 'calculate':
+        options.totalValue.count += 1;
+        options.totalValue.rawVal += options.value.amount;
+        if (options.value.isApproved) {
+          options.totalValue.conditionalVal += options.value.amount;
+        }
+        break;
+      case 'finalize':
+        if (options.totalValue.count === 1 || !isConditionalRef.current) {
+          options.totalValue = options.totalValue.rawVal;
+        } else {
+          options.totalValue = options.totalValue.conditionalVal;
+        }
+        break;
+      default: break;
+    }
+  }, []);
+
+  const dataSource = useMemo<DataSourceOptions>(() => ({
+    fields: [{
+      caption: 'Region',
+      width: 120,
+      dataField: 'region',
+      area: 'row',
+      expanded: true,
+    }, {
+      caption: 'City',
+      dataField: 'city',
+      width: 150,
+      area: 'row',
+      selector: citySelector,
+    }, {
+      dataField: 'date',
+      dataType: 'date',
+      area: 'column',
+      expanded: true,
+    }, {
+      caption: 'Sales',
+      dataType: 'number',
+      summaryType: 'custom',
+      format: 'currency',
+      area: 'data',
+      calculateCustomSummary,
+    }, {
+      caption: 'Approved',
+      dataField: 'isApproved',
+      summaryType: 'sum',
+      area: 'data',
+    }],
+    store: sales,
+  }), [calculateCustomSummary]);
+
+  const onValueChanged = useCallback((arg: CheckBoxTypes.ValueChangedEvent) => {
+    setIsConditional(arg.value);
+    pivotGridRef.current?.instance().getDataSource().reload().catch(() => {});
+  }, []);
+
   return (
-    <div className="main">
-      <Button text={`Click count: ${count}`} onClick={clickHandler} />
+    <div className="app">
+      <div className="long-title"><h3>Conditional Summary Calculation</h3></div>
+      <PivotGrid id="sales"
+        ref={pivotGridRef}
+        allowSortingBySummary={true}
+        allowSorting={true}
+        allowFiltering={true}
+        allowExpandAll={true}
+        height={440}
+        showBorders={true}
+        dataSource={dataSource}>
+        <FieldChooser enabled={false} />
+      </PivotGrid>
+
+      <div className="options">
+        <div className="caption">Options</div>
+        <div className="option">
+          <CheckBox
+            value={isConditional}
+            text="Toggle Conditional Summary Calculation"
+            onValueChanged={onValueChanged} />
+        </div>
+      </div>
     </div>
   );
 }