fix E2203 (#421)

Author: flagmanAndrew

packages/angular/src/app/components/utils/sales-range-card/sales-range-card.component.html

@@ -1,25 +1,27 @@
 <card-analytics contentClass="sales-range" [isMenuVisible]="false">
-  <dx-range-selector
-    [dataSource]="data"
-    [(value)]="visualRange"
-    (onValueChanged)="onRangeChanged($event)"
-  >
-    <dxo-scale
-      minorTickInterval="day"
-      tickInterval="month"
-      valueType="datetime"
+  @if (data && data.length > 0) {
+    <dx-range-selector
+      [dataSource]="data"
+      [(value)]="visualRange"
+      (onValueChanged)="onRangeChanged($event)"
     >
-      <dxo-minor-tick [visible]="false"></dxo-minor-tick>
-      <dxo-marker [visible]="false"></dxo-marker>
-      <dxo-label format="MMM yyyy"></dxo-label>
-    </dxo-scale>
-    <dxo-size [height]="90"></dxo-size>
+      <dxo-scale
+        minorTickInterval="day"
+        tickInterval="month"
+        valueType="datetime"
+      >
+        <dxo-minor-tick [visible]="false"></dxo-minor-tick>
+        <dxo-marker [visible]="false"></dxo-marker>
+        <dxo-label format="MMM yyyy"></dxo-label>
+      </dxo-scale>
+      <dxo-size [height]="90"></dxo-size>
 
-    <dxo-loading-indicator [show]="true"></dxo-loading-indicator>
-
-    <dxo-chart>
-      <dxi-series type="line" argumentField="date" valueField="total">
-      </dxi-series>
-    </dxo-chart>
-  </dx-range-selector>
+      <dxo-chart>
+        <dxi-series type="line" argumentField="date" valueField="total">
+        </dxi-series>
+      </dxo-chart>
+    </dx-range-selector>
+  } @else {
+    <dx-load-indicator class="centered"></dx-load-indicator>
+  }
 </card-analytics>

packages/angular/src/app/components/utils/sales-range-card/sales-range-card.component.scss

@@ -2,6 +2,11 @@
 @use "sass:math";
 
 :host {
+  .centered {
+    margin: auto;
+    display: block;
+  }
+  
   ::ng-deep .card.sales-range {
     margin-top: 20px;
 

packages/angular/src/app/components/utils/sales-range-card/sales-range-card.component.ts

@@ -7,6 +7,7 @@ import {
 import { CardAnalyticsComponent } from '../../library/card-analytics/card-analytics.component';
 import { DxRangeSelectorModule } from 'devextreme-angular/ui/range-selector';
 import { Sale } from 'src/app/types/analytics';
+import { DxLoadIndicatorModule } from 'devextreme-angular';
 
 @Component({
   selector: 'sales-range-card',
@@ -15,6 +16,7 @@ import { Sale } from 'src/app/types/analytics';
   imports: [
     CardAnalyticsComponent,
     DxRangeSelectorModule,
+    DxLoadIndicatorModule
   ],
 })
 export class SalesRangeCardComponent {

packages/react/src/components/utils/sales-range-card/SalesRangeCard.scss

@@ -0,0 +1,4 @@
+.card .centered {
+  margin: auto;
+  display: block;
+}

packages/react/src/components/utils/sales-range-card/SalesRangeCard.tsx

@@ -1,23 +1,26 @@
-import RangeSelector, { Chart, Label, LoadingIndicator, Marker, MinorTick, Scale, Series, Size, RangeSelectorTypes } from 'devextreme-react/range-selector';
+import RangeSelector, { Chart, Label, Marker, MinorTick, Scale, Series, Size, RangeSelectorTypes } from 'devextreme-react/range-selector';
+import LoadIndicator from 'devextreme-react/load-indicator';
 import React from 'react';
 import { CardAnalytics } from '../../library/card-analytics/CardAnalytics';
 import { Sale } from '../../../types/analytics';
 
+import './SalesRangeCard.scss';
+
 export const SalesRangeCard = ({ datasource, range, onRangeChanged }: {
   datasource: Sale[], range: Date[], onRangeChanged: (e: RangeSelectorTypes.ValueChangedEvent) => void
 }) => (
   <CardAnalytics title='' contentClass='sales-range' menuVisible={false}>
-    <RangeSelector id='range' dataSource={datasource} value={range} onValueChanged={onRangeChanged}>
+    {datasource.length > 0 && <RangeSelector id='range' dataSource={datasource} value={range} onValueChanged={onRangeChanged}>
       <Scale minorTickInterval='day' tickInterval='month' valueType='datetime'>
         <MinorTick visible={false} />
         <Marker visible={false} />
         <Label format='MMM yyyy' />
       </Scale>
       <Size height={90} />
-      <LoadingIndicator show />
       <Chart>
         <Series type='line' argumentField='date' valueField='total' />
       </Chart>
-    </RangeSelector>
+    </RangeSelector>}
+    {datasource.length === 0 && <LoadIndicator className='centered' />}
   </CardAnalytics>
 );

packages/vue/src/components/utils/sales-range-card.vue

@@ -4,7 +4,12 @@
     selected-range-update-mode="reset"
     :is-menu-visible="false"
   >
+    <dx-load-indicator
+      v-if="!props.data || props.data.length === 0"
+      class="centered"
+    />
     <dx-range-selector
+      v-if="props.data && props.data.length > 0"
       :data-source="props.data"
       :value="props.value"
       @value-changed="(e) => emit('range-changed', e)"
@@ -20,8 +25,6 @@
       </dx-scale>
       <dx-size :height="90" />
 
-      <dx-loading-indicator :show="false" />
-
       <dx-range-selector-chart>
         <dx-series
           type="line"
@@ -40,11 +43,11 @@ import {
   DxMinorTick,
   DxSize,
   DxMarker,
-  DxLoadingIndicator,
   DxChart as DxRangeSelectorChart,
   DxLabel as DxRangeSelectorLabel,
   DxSeries,
 } from 'devextreme-vue/range-selector';
+import { DxLoadIndicator } from 'devextreme-vue/load-indicator';
 
 import { Sales, SalesByState } from '@/types/analytics';
 import CardAnalytics from '@/components/library/card-analytics.vue';
@@ -57,6 +60,11 @@ const props = defineProps<{
 }>();
 </script>
 <style scoped lang="scss">
+.centered {
+  margin: auto;
+  display: block;
+}
+
 :deep(.sales-range) {
   margin-top: 20px;
 

packages/vue/src/pages/analytics-sales-analysis.vue

@@ -50,9 +50,9 @@ import SalesRangeCard from '@/components/utils/sales-range-card.vue';
 import SalesByRangeCard from '@/components/utils/sales-by-range-card.vue';
 import SalesPerformanceCard from '@/components/utils/sales-performance-card.vue';
 
-const sales = ref<Sales | null>(null);
-const salesByDateAndCategory = ref<Sales | null>(null);
-const salesByCategory = ref<SalesByStateAndCity | null>(null);
+const sales = ref<Sales>([]);
+const salesByDateAndCategory = ref<Sales>([]);
+const salesByCategory = ref<SalesByStateAndCity>([]);
 
 const visualRange = ref<[Date, Date]>([]);