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

1 Answer 38 Views
Chart Chart wrappers (package) Error
henri
Top achievements
Rank 1
henri asked on 25 Oct 2023, 06:51 PM

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>

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 30 Oct 2023, 04:14 PM

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:

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:

 

Regards,
Vessy
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources

Tags
Chart Chart wrappers (package) Error
Asked by
henri
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or