search

swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular
https://swimlane.github.io/ngx-charts/
MIT License
4.28k stars 1.15k forks source link

[ngx-charts-bar-vertical-2d]: xAxisTickFormatting -- data are "pre-formatted" before hitting this input. #1045

Open sjdemoor opened 5 years ago

sjdemoor commented 5 years ago

I'm submitting a ... (check one with "x")

Current behavior Note: This (probably) applies to all version of 'ngx-charts-bar-xxx' charts, but I haven't tested completely.

When sending Date() formatted data as the "name" (x-axis) field, the data are pre-formatted to a (non-localized) "MM/DD/YYYY" string. The pre-formatting overrides the (optional) [xAxisTickFormatting] input field.

Expected behavior On the 'ngx-charts-line-chart', I am able to use the [xAxisTickFormatting] input to format date strings using localization (see code snippet below). This functionality does not work on the bar charts, because the ngx-charts-bar-xxxx components pre-format the (name) fields as "MM/DD/YYYY" prior to invoking the [xAxisTickFormatting] input.

// this is where I set chart options (in typescript), which are fed to the <ngx-charts-bar-xxx> input fields in the template.
this.chartOptions = {
...
xAxisTickFormatting: (val) => this.dateTickFormatting(val),
...
}

// typescript source for dateTickFormatting() function
  dateTickFormatting(val: any) {
    if (val instanceof Date) {
      return (<Date> val).toLocaleDateString(this.locale);
    } else {
      return val;
    }
  }

Reproduction of the problem See code in previous section.

What is the motivation / use case for changing the behavior? Need to be able to use localization for Dates. Functionality for (optional) input fields should be consistent between components. The 'ngx-charts-line-chart' exhibits the documented behavior.

Please tell us about your environment: All OS and environments.

orestes commented 4 years ago

I'm hitting this same bug right now.

"@swimlane/ngx-charts": "^12.0.1",
"@angular/core": "^8.2.13",
alovega commented 4 years ago

I am hitting the same bug with line-charts 

"@swimlane/ngx-charts": "^13.0.2",
"@angular/core": "^8.2.14",

How can we solve it because am fetching my result from a django app thus the dates-value are coming as string here is a sample result

"data": [
        {
            "series": [
                {
                    "name": "2020-02-06T09:32:45.782Z",
                    "value": 1.0
                },
                {
                    "name": "2020-02-06T09:34:52.094Z",
                    "value": 0.0
                },
                {
                    "name": "2020-01-27T08:08:10.395Z",
                    "value": 1.0
                },
                {
                    "name": "2020-01-27T08:54:49.915Z",
                    "value": 0.0
                },
                {
                    "name": "2020-01-27T11:47:04.054Z",
                    "value": 1.0
                },
                {
                    "name": "2020-01-20T13:53:08.058Z",
                    "value": 1.0
                },
                {
                    "name": "2020-01-20T13:53:55.327Z",
                    "value": 1.0
                }
            ],
            "name": "Github"
        }
]
alovega commented 4 years ago

I got the answer, the dates in the key name need to be converted to javascript date format for it to be able to use the default tickFormatting function for dates. So I created A function that takes in an array of objects and convert all the dates in the key value name to javascript new date object.

dateConvert(value: []) {
    value.forEach((element: any) => {
      element.series.forEach((item: any) => {
        item.name = new Date(item.name);
      });
    });
  }

This for anyone who might get into the same bug or problem