vue

Author: flagmanAndrew

Vue/src/assets/main.css

@@ -3,6 +3,6 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
-  margin: 50px 50px;
-  width: 90vh;
+  margin: 50px;
+  width: 90vw;
 }

Vue/src/components/HomeContent.vue

@@ -1,28 +1,158 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-
+<script setup lang='ts'>
+import { ref } from 'vue';
 import 'devextreme/dist/css/dx.material.blue.light.compact.css';
-import DxButton from 'devextreme-vue/button';
+import DxPivotGrid, { DxFieldChooser } from 'devextreme-vue/pivot-grid';
+import DxCheckBox, { type DxCheckBoxTypes } from 'devextreme-vue/check-box';
+import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
+import service, { type Sale } from './data';
+
+const isConditional = ref(true);
+const pivotGridRef = ref<DxPivotGrid|null>(null);
+
+function toggleConditionalChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
+  isConditional.value = e.value;
+  pivotGridRef.value?.instance?.getDataSource().reload();
+}
+
+interface CustomSummaryValue {
+  summaryProcess?: string;
+  value?: any;
+  totalValue?: any;
+}
+
+const tempSales = service.getSales();
 
-const props = defineProps({
-  text: {
-    type: String,
-    default: 'count',
-  },
+tempSales.forEach((sale: Sale, index: number) => {
+  sale.isApproved = index % 2 !== 0;
 });
-const count = ref(0);
-const buttonText = computed<string>(
-  () => `Click ${props.text}: ${count.value}`
-);
-function clickHandler() {
-  count.value += 1;
+
+const sales = tempSales;
+
+function calculateCustomSummary(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 || !isConditional.value) {
+        options.totalValue = options.totalValue.rawVal;
+      } else {
+        options.totalValue = options.totalValue.conditionalVal;
+      }
+      break;
+    default: break;
+  }
 }
+
+const dataSource: PivotGridDataSource = new PivotGridDataSource({
+  fields: [{
+    caption: 'Region',
+    width: 120,
+    dataField: 'region',
+    area: 'row',
+    expanded: true,
+  }, {
+    caption: 'City',
+    dataField: 'city',
+    width: 150,
+    area: 'row',
+    selector: (data: Sale): string => `${data.city} (${data.country})`,
+  }, {
+    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,
+});
+
 </script>
 <template>
   <div>
-    <DxButton
-      :text="buttonText"
-      @click="clickHandler"
-    />
+    <div class='long-title'>
+      <h3>Conditional Summary Calculation</h3>
+    </div>
+    <DxPivotGrid
+      ref='pivotGridRef'
+      :allow-sorting-by-summary='true'
+      :allow-sorting='true'
+      :allow-filtering='true'
+      :allow-expand-all='true'
+      :height='440'
+      :show-borders='true'
+      :data-source='dataSource'
+    >
+      <DxFieldChooser :enabled='false'/>
+    </DxPivotGrid>
+    <div class='options'>
+      <div class='caption'>Options</div>
+      <div class='option'>
+        <DxCheckBox
+          :value.sync='isConditional'
+          text='Toggle Conditional Summary Calculation'
+          @value-changed='toggleConditionalChanged'
+        />
+      </div>
+    </div>
   </div>
 </template>
+<style scoped>
+#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;
+}
+</style>