frappe/charts

Need to accept empty data

Open

#220 opened on Apr 8, 2019

View on GitHub
 (9 comments) (8 reactions) (1 assignee)JavaScript (14,858 stars) (769 forks)batch import
help wanted

Description

Errors occurred when I tried to use empty data object to initialize a chart instance.

  const chart = new frappe.Chart('.panel .chart', {
    data: {},
    type: 'line',
    height: 320,
    colors: ['#0294FF'],
  })

This caused an Uncaught TypeError:

frappe-charts.min.iife.js:1 Uncaught TypeError: Cannot read property 'map' of undefined
    at Ct (frappe-charts.min.iife.js:1)
    at i.value (frappe-charts.min.iife.js:1)
    at i.e (frappe-charts.min.iife.js:1)
    at new i (frappe-charts.min.iife.js:1)
    at Tt (frappe-charts.min.iife.js:1)
    at new t (frappe-charts.min.iife.js:1)
    at HTMLDocument.<anonymous> (stats-overview.js:20)
    at l (jquery.js:2)
    at Object.fireWith [as resolveWith] (jquery.js:2)
    at Function.ready (jquery.js:2)

Seems frappe tried to call map function of datasets or labels. But I only need to create an empty chart at that time, and update data on future user events.

I tried to use this as init data

{
  labels: [],
  datasets: [],
}

and got a lot of SVG errors which blocked the future data updatings.

Error: <g> attribute transform: Trailing garbage, "translate(0, undefined)".

It's weird that

{
  labels: [''],
  datasets: [{
    values: [0],
  }],
}

also cause some errors such as

frappe-charts.min.iife.js:1 Error: <path> attribute d: Unexpected end of attribute. Expected number, "M".

and

Error: <circle> attribute cy: Expected length, "undefined".

but without blocking future updatings.

Seems it only works fine with two or more data points.

User-Agent:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36

Contributor guide

Tech stack
javascript
Domain
datafrontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic JavaScriptUnderstanding of chart initialization
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75
Research direction
Investigate the chart initialization code in the repository, likely in src/index.js or similar. The issue is that empty data objects or arrays cause errors when trying to call .map on undefined. A fix would involve adding checks for empty or undefined datasets/labels before rendering. Ensure that the chart can render an empty state gracefully.
Need to accept empty data · frappe/charts#220 | Good First Issue