Как вывести сложный объект на график в DevExtreme Angular 17?

Question

[Nik Faraday]

Изучаю как работают графики в DevExtreme на Angular 17. Сначала попробовал простой пример графика. Список с телефонами и количеством продажей за некий год. Сам список:

public getPhonesData(): ChartDataItem[] {
        return [
          { name: "iPhone 14", count: 5000 },
          { name: "iPhone 14 Pro", count: 5200 },
          { name: "iPhone SE (2023)", count: 3000 },
          { name: "Samsung Galaxy S23", count: 4500 },
          { name: "Samsung Galaxy S23 Ultra", count: 4800 },
          { name: "Samsung Galaxy A54", count: 4000 },
          { name: "Google Pixel 7", count: 3200 },
          { name: "Google Pixel 7 Pro", count: 3500 },
          { name: "Xiaomi Mi 13", count: 2700 },
          { name: "Xiaomi Mi 13 Pro", count: 2900 },
          { name: "OnePlus 11", count: 2100 },
          { name: "Sony Xperia 1 V", count: 1800 },
          { name: "Sony Xperia 5 V", count: 1600 },
          { name: "Huawei P60 Pro", count: 1500 },
          { name: "Oppo Find X6", count: 1300 },
          { name: "Realme GT 3", count: 1200 },
          { name: "Motorola Edge 40", count: 1100 },
          { name: "Asus ROG Phone 7", count: 900 },
          { name: "Nokia G22", count: 800 }
        ];
      }

Компонент:

@Component({
      selector: 'app-charts',
      standalone: true,
      imports: [CommonModule,
        DxChartModule],
      templateUrl: './charts.component.html',
      styleUrl: './charts.component.css'
    })
    
    export class ChartsComponent {
      constructor(private source: ChartDataSources) {
        this.phones = source.getPhonesData();
      }
      
      protected phones: ChartDataItem[];
    }
    
    @Injectable({
      providedIn: 'root'
    })
    export class ChartDataSources {
      public getPhonesData(): ChartDataItem[] {
        return [ ... ];
      }
    }

html:

<dx-chart [dataSource]="phones">
        <dxi-series [valueField]="'name'" [argumentField]="'count'"></dxi-series>
        <dxo-legend [visible]="true"></dxo-legend>
        <dxo-export [enabled]="true"></dxo-export>
    </dx-chart>

По я попробовал вывести более сложный объект, над котором ломаю голову уже пол дня:

public getPhoneSalesData() : PhoneSalesDataItem[] {
        return [
          {
            country: "USA",
            statistic: [
              { name: "iPhone 14", count: 5000 },
              { name: "iPhone 14", count: 5001 },
              { name: "iPhone 14 Pro", count: 4500 },
              { name: "iPhone SE (2023)", count: 3000 },
              { name: "Samsung Galaxy S23", count: 4800 },
              { name: "Samsung Galaxy S23 Ultra", count: 4200 },
              { name: "Google Pixel 7", count: 3200 },
              { name: "Google Pixel 7 Pro", count: 2800 },
              { name: "OnePlus 11", count: 2100 },
              { name: "Sony Xperia 1 V", count: 1800 }
            ]
          },
          {
            country: "Germany",
            statistic: [
              { name: "iPhone 14", count: 4000 },
              { name: "iPhone 14 Pro", count: 3700 },
              { name: "Samsung Galaxy S23", count: 4100 },
              { name: "Samsung Galaxy S23 Ultra", count: 3900 },
              { name: "Xiaomi Mi 13", count: 2900 },
              { name: "Xiaomi Mi 13 Pro", count: 2600 },
              { name: "Google Pixel 7", count: 2200 },
              { name: "Huawei P60 Pro", count: 1800 },
              { name: "Oppo Find X6", count: 1700 }
            ]
          },
          {
            country: "India",
            statistic: [
              { name: "Xiaomi Mi 13", count: 3100 },
              { name: "Xiaomi Mi 13 Pro", count: 2900 },
              { name: "Samsung Galaxy A54", count: 3600 },
              { name: "OnePlus 11", count: 3400 },
              { name: "Realme GT 3", count: 2800 },
              { name: "Oppo Find X5", count: 2500 },
              { name: "iPhone 14", count: 3000 },
              { name: "Samsung Galaxy S22", count: 2200 }
            ]
          },
          {
            country: "China",
            statistic: [
              { name: "Huawei P60 Pro", count: 3400 },
              { name: "Huawei Mate 60", count: 3200 },
              { name: "Oppo Find X6", count: 3100 },
              { name: "Xiaomi Mi 13", count: 3300 },
              { name: "Xiaomi Mi 13 Pro", count: 3500 },
              { name: "Realme GT 3", count: 2800 },
              { name: "OnePlus 11", count: 2700 },
              { name: "iPhone 14", count: 2900 }
            ]
          },
          {
            country: "Japan",
            statistic: [
              { name: "Sony Xperia 1 V", count: 2500 },
              { name: "Sony Xperia 5 V", count: 2300 },
              { name: "iPhone 14", count: 3000 },
              { name: "iPhone 14 Pro", count: 2900 },
              { name: "Google Pixel 7", count: 2000 },
              { name: "Samsung Galaxy S23", count: 2200 },
              { name: "Xiaomi Mi 13", count: 1800 }
            ]
          },
          {
            country: "UK",
            statistic: [
              { name: "iPhone 14", count: 2800 },
              { name: "iPhone 14 Pro", count: 2600 },
              { name: "Samsung Galaxy S23", count: 2300 },
              { name: "Google Pixel 7", count: 1900 },
              { name: "OnePlus 11", count: 2000 },
              { name: "Sony Xperia 1 V", count: 1700 },
              { name: "Realme GT 3", count: 1600 }
            ]
          },
          {
            country: "France",
            statistic: [
              { name: "Samsung Galaxy S23", count: 2500 },
              { name: "Samsung Galaxy S23 Ultra", count: 2300 },
              { name: "iPhone 14", count: 2400 },
              { name: "iPhone 14 Pro", count: 2200 },
              { name: "Asus ROG Phone 7", count: 2000 },
              { name: "Google Pixel 7", count: 1800 },
              { name: "Xiaomi Mi 13", count: 1900 }
            ]
          },
          {
            country: "Brazil",
            statistic: [
              { name: "Motorola Edge 40", count: 1700 },
              { name: "Samsung Galaxy A54", count: 1600 },
              { name: "Xiaomi Mi 13", count: 1500 },
              { name: "iPhone SE (2023)", count: 1400 },
              { name: "Oppo Find X5", count: 1300 }
            ]
          },
          {
            country: "UA",
            statistic: [
              { name: "Nokia G22", count: 900 },
              { name: "Samsung Galaxy A54", count: 1100 },
              { name: "iPhone 14", count: 1000 },
              { name: "Xiaomi Mi 13", count: 950 },
              { name: "Motorola Edge 40", count: 870 }
            ]
          },
          {
            country: "South Korea",
            statistic: [
              { name: "Samsung Galaxy S23", count: 3400 },
              { name: "Samsung Galaxy S23 Ultra", count: 3200 },
              { name: "Samsung Galaxy Z Fold 4", count: 3000 },
              { name: "Samsung Galaxy Z Flip 4", count: 2800 },
              { name: "iPhone 14", count: 2600 }
            ]
          },
          {
            country: "Italy",
            statistic: [
              { name: "iPhone 14", count: 2100 },
              { name: "Samsung Galaxy S23", count: 1900 },
              { name: "Google Pixel 7", count: 1700 },
              { name: "Xiaomi Mi 13", count: 1600 },
              { name: "Oppo Find X6", count: 1500 }
            ]
          }
        ];
      }

В этом случае мы берём ту же статистику, только привязываем её уже к некоторым странам. Суть в том, что бы вывести несколько "линий" на один график разного цвета. Компонент:

@Component({
      selector: 'app-charts',
      standalone: true,
      imports: [CommonModule,
        DxChartModule],
      templateUrl: './charts.component.html',
      styleUrl: './charts.component.css'
    })
    
    export class ChartsComponent {
      constructor(private source: ChartDataSources) {
        this.phoneSales = source.getPhoneSalesData();
      }
      
      protected phoneSales: PhoneSalesDataItem[];
    }
    
    @Injectable({
      providedIn: 'root'
    })
    export class ChartDataSources {
    public getPhoneSalesData() : PhoneSalesDataItem[] {
        return [ ... ];
      }
    }

Разметка:

<dx-chart [dataSource]="phoneSales">
        <dxi-series *ngFor="let sale of phoneSales" [valueField]="'sale.statistic.name'" [argumentField]="'sale.statistic.count'" [name]="sale.country"></dxi-series>
        
        <dxo-common-axis-settings>
            <dxo-grid [visible]="true"></dxo-grid>
        </dxo-common-axis-settings> 
        <dxo-export [enabled]="true"></dxo-export>
    </dx-chart>

В таком виде данные не выводятся на график, а в консоли получаю ошибку:

main.ts:5 W2002 - The Italy series cannot be drawn because the sale.statistic.count data field is missing.
    
    For additional information on this warning message, see: https://js.devexpress.com/error/24_1/W2002

Как правильно вывести такую структуру данных на график?

Answer 1

[0xD34F]

Надо найти в документации пример нужного вам графика, посмотреть, в каком виде следует подавать в него данные, привести свои данные к этому виду. Всё.

Comments

[Nik Faraday]

В документации все плоские массивы, максимум, это комбинация из двух массивов, но нет варианта вложенных массивов. Перелистал документацию вдоль и в поперек, нужного варианта не нашёл.

Конвертировать массив в нужный формат, это в плоский? Но ведь клиент не может контролировать формат данных, что отправляет сервер.

К примеру, есть сеть магазинов электроники по всему миру. Я хочу узнать статистику продажи телефонов в них и сервер мне присылает данные такого формата, как я указал во втором примере вопроса. Наиболее приближённый пример в документации, это данные вот такого формата, которые выводятся в несколько линий на одном графике:

const architecturesInfo: ArchitectureInfo[] = [{
  year: 1997,
  smp: 263,
  mmp: 208,
  cnstl: 9,
  cluster: 1,
}, {
  year: 1999,
  smp: 169,
  mmp: 270,
  cnstl: 61,
  cluster: 7,
}, {
  year: 2001,
  smp: 57,
  mmp: 261,
  cnstl: 157,
  cluster: 45,
}, {
  year: 2003,
  smp: 0,
  mmp: 154,
  cnstl: 121,
  cluster: 211,
}, {
  year: 2005,
  smp: 0,
  mmp: 97,
  cnstl: 39,
  cluster: 382,
}, {
  year: 2007,
  smp: 0,
  mmp: 83,
  cnstl: 3,
  cluster: 437,
}];

Проблема тут, и разница между моими данными заключается в том, что тут данные являются статичными, т.е., строго типизированный объект данных. В моём примере вы можете увидеть, что к примеру, в USA на последней позиции находится телефон Sony Xperia 1 V, которого нет в списке той же Germany, т.к. этот телефон плохо продавался и не попал в выборку, или вообще не продавался (Может быть, в зависимости от бизнес логики. Не прошёл таможню)

[0xD34F]

Проблема тут, и разница между моими данными заключается в том, что тут данные...

Nik Faraday, не вижу проблемы - слышал, будто можно определять типы с заранее неизвестным набором ключей.

[Nik Faraday]

0xD34F, ну так как ты определишь, какие данные и бд потянутся при выборке? Можно сразу тип сделать с ключами-значениями...

[0xD34F]

Nik Faraday, повторяю - не надо определять заранее, чего там может подтянуться. Погуглите index signature.

[Nik Faraday]

0xD34F, это я знаю, но, кажется, вы не до конца поняли в чём сложность. В примере кода из документации в каждом элементе есть ключ, к примеру, smp с некоторым значением. Плюс, не указано к какой стране привязан тот или иной элемент массива.

В моём примере нет конкретного значения, какой телефон будет в выборке, соответственно, и его продажи. Но ведь должен быть какой-то способ достучаться в этом коде к массиву:

<dx-chart [dataSource]="phoneSales">
        <dxi-series *ngFor="let sale of phoneSales" [valueField]="'sale.statistic.name'" [argumentField]="'sale.statistic.count'" [name]="sale.country"></dxi-series>
        
        <dxo-common-axis-settings>
            <dxo-grid [visible]="true"></dxo-grid>
        </dxo-common-axis-settings> 
        <dxo-export [enabled]="true"></dxo-export>
    </dx-chart>

[0xD34F]

В примере кода из документации в каждом элементе есть ключ, к примеру, smp с некоторым значением. Плюс, не указано к какой стране привязан тот или иной элемент массива.

Там не страна, а год. Если попробовать удалить какой-нибудь из ключей (кроме year) и перезагрузить пример, то можно будет увидеть, что соответствующая точка просто пропадёт.

В моём примере нет конкретного значения, какой телефон будет в выборке, соответственно, и его продажи. Но ведь должен быть какой-то способ достучаться в этом коде к массиву:

<dx-chart [dataSource]="phoneSales">

Здесь должен быть другой массив. Тот, который вы соберёте из того, что есть сейчас. Похожий на тот, что в примере из документации - у каждого элемента есть свойство country, и ещё несколько свойств, содержащих информацию о продажах.

<dxi-series *ngFor="let sale of phoneSales"

И здесь тоже должен использоваться другой массив - массив уникальных значений свойств name элементов подмассивов statistic. Т.е., массив моделей телефонов. Его вам тоже надо собрать из того, что есть сейчас.

UPD. Добавил в ответ ссылку на пример. Смотрите, думайте.