I am not sure what is causing this error when using the aggregate sum and baseunit props on the same chart ?

[henri]

I keep running into a Vue warn error when trying to use a chart that has its aggregate prop set to sum and it's baseunit prop set to days,weeks or years. The error says "You may have an infinite update loop in watcher with expression "dataItems" ". I have also attached a picture of the full error for better context. I have tried both the native component chart and the wrapper component chart. Both produce the exact same error.  I am currently using Vue 2 to be specific Vue 2.7.0 . I am assuming that being on Vue 2 is causing the error because the code I have attached below works on stackblitz but on stackblitz the dev environment is using Vue 3 not 2.  

Here is my code using the native component:

<template>
  <div>
    <Chart>
      <ChartTitle :text="'Daily Max (&deg;C)'" />
      <ChartSeries>
        <ChartSeriesItem
          :type="'line'"
          :field="'VisitCount'"
          :category-field="'Date'"
          :data-items="testor"
          :aggregate="'sum'"
          :name="'test'"
        />
      </ChartSeries>
      <ChartCategoryAxis>
        <ChartCategoryAxisItem :base-unit="'weeks'" />
      </ChartCategoryAxis>
    </Chart>
  </div>
</template>

<script>
import {
  Chart,
  ChartTitle,
  ChartSeries,
  ChartSeriesItem,
  ChartCategoryAxis,
  ChartCategoryAxisItem,
} from '@progress/kendo-vue-charts';
import 'hammerjs';

export default {
  components: {
    Chart,
    ChartTitle,
    ChartSeries,
    ChartSeriesItem,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
  },
  data: function () {
    return {
      testor: [
        {
          VisitCount: 13,
          timestamp: '2018-01-01T00:00:00.000',
          Date: new Date('2018-01-01T00:00:00.000'),
        },
        {
          VisitCount: 13,
          timestamp: '2018-01-01T00:00:00.000',
          Date: new Date('2018-01-01T00:00:00.000'),
        },
        {
          VisitCount: 13,
          timestamp: '2018-01-05T00:00:00.000',
          Date: new Date('2018-01-05T00:00:00.000'),
        },
        {
          VisitCount: 50,
          timestamp: '2018-02-01T00:00:00.000',
          Date: new Date('2018-02-01T00:00:00.000'),
        },
        {
          VisitCount: 13,
          timestamp: '2018-04-01T00:00:00.000',
          Date: new Date('2018-04-01T00:00:00.000'),
        },
      ],
    };
  },
};
</script>

Here is my code using the  wrapper component:

<template>
  <div>
    <chart
      ref="chart"
      :series-defaults-type="'line'"
      :category-axis="axis"
    >
      <chart-series-item
        :name="'test'"
        :data="testor"
        :category-field="'Date'"
        :field="'VisitCount'"
        :color="'#f3ac32'"
        :aggregate="'sum'"
      >
      </chart-series-item>
    </chart>
  </div>
</template>

<script>
import { Chart, ChartSeriesItem } from '@progress/kendo-charts-vue-wrapper';

export default {
  name: 'App',
  components: {
    chart: Chart,
    'chart-series-item': ChartSeriesItem,
  },
  data: function () {
    return {
      axis: {
        baseUnit: 'weeks',
      },
      testor: [
        {
          VisitCount: 13,
          timestamp: '2018-01-01T00:00:00.000',
          Date: new Date('2018-01-01T00:00:00.000'),
        },
        {
          VisitCount: 13,
          timestamp: '2018-01-01T00:00:00.000',
          Date: new Date('2018-01-01T00:00:00.000'),
        },
        {
          VisitCount: 13,
          timestamp: '2018-01-05T00:00:00.000',
          Date: new Date('2018-01-05T00:00:00.000'),
        },
        {
          VisitCount: 50,
          timestamp: '2018-02-01T00:00:00.000',
          Date: new Date('2018-02-01T00:00:00.000'),
        },
        {
          VisitCount: 13,
          timestamp: '2018-04-01T00:00:00.000',
          Date: new Date('2018-04-01T00:00:00.000'),
        },
      ],
      categories: [
        1952, 1956, 1960, 1964, 1968, 1972, 1976, 1980, 1984, 1988, 1992, 1996,
        2000, 2004, 2008, 2012,
      ],
      tooltiptemplate: '#= series.name #: #= value #',
    };
  },
};
</script>

[Vessy]

Hello, henri,

I have just answered to your colleague's' primary support ticket on the same matter, for convenience I will copy my answer here as well:

We have logged this behavior as a bug in the chart component, you can track its progress here:

•  https://github.com/telerik/kendo-vue/issues/470 

Please, have in mind that Vue 2 will be officially deprecated at the end of this year, so I strongly encourage you to migrate to Vue 3, where the bug above is not observed as well:

• https://v2.vuejs.org/lts/ 

 

Regards,
Vessy
Progress Telerik