Description

Before, the labels along the x axis were generated using the selected interval (months, years, quarters...). This can lead to issues where the selected interval is not specific enough that the time series chart only has a few labels on the x axis with not enough specificity.

This feature dynamically generates the labels along the x axis given a maxNumberOfLabels parameter that increases the specificity until there are enough labels along the x axis. For example, if the time range spans a period of 2 years, the labels should not be year based as it would result in only two labels. The specificity should be increased to be month based.

The example website was also changed so the example time series chart includes the option to play around with the dynamic x axis.

@mgreenbaum @billy-addepar @mauriziocalo @sicasli @liuyang-li

UI Pics

Chart without dynamic x axis ticked. Note how the tick interval being set to years means that the labelling is pretty sparse along the x axis.

Dynamic x axis is ticked. This disables the tick interval (which is irrelevant when a dynamic x axis is used) and it also introduces a slider to adjust the maximum number of labels along the x axis. Here, there are a max of 14 labels across the x axis so the specificity is increased to the month level to generate the labels.

The max number of labels is now set to 7. This changes the specificity to quarters and distributes those labels across the x axis.

To reduce the chance of overlapping labels, the pie chart's startOffset defaults to Math.PI / 4 so that the smaller labels are likely to appear towards the right side of the chart, where there is more space.

Also, redraw the chart when startOffset changes. This makes it easy to specify and change the rotation of the chart.

Before:

After:

@Addepar/fire

Ember Charts looks way cool, but I'm finding the project overly complicated and the documentation overly lacking. Could you please provide a hello world example that displays a simple chart with some data and nothing else? Please no fancy build systems, no coffee script, etc. Just raw EmberJS like you see in the EmberJS guides.

Right now it's possible for a time series chart to fail to render on page load. This occurs because the renderVars observers added in ChartComponent.init aren't firing, which occurs because the 'finishedData' observers don't fire unless you actually consume it somewhere.

@Dylnuge @azirbel

@Addepar/fire @xudaniel11work

For horizontal bar charts with a mix of negative and positive values, labels were incorrectly being truncated even though there was plenty of space.

Before

After

This PR aims to do:

• Split the hasAxisTitles into hasXAxisTitle and hasYxisTitle to have more granular configuration for X & Y axis titles
• The current measurement for X axis title is not correct and does not take into account of the legend padding for axis title. This PR makes legendChartPadding to be dependent on height of axis titles. The legendChartPadding is move from scatter-chart.js into axis-titles.js mixin.

@jordansmith42 @philpee2 @embooglement

First of all, this is a great package. It has been super-helpful in getting my reporting site up and going.

Today, I upgraded my site from Ember 1.2 to 1.3.1. I'm now getting this error in my browser console when I run the working code I ran before to render charts:

• 12:45:35.905 Error: assertion failed: You must use Ember.set() to access this property (of Ember.Charts.VerticalBarComponent:ember2047) ember.js:836
• 12:45:35.905 Error: assertion failed: You called yield in a template that was not a layout

Are there people working on getting ember-charts compatible with the latest Ember version? If so, any sense when it might be released?

Bryan

Ember 1.9 included an upgrade from Handlebars 1.0 to Handlebars 2.0, and Ember 1.10 replaced the templating library with HTMLBars. Because ember-charts packages pre-compiled templates in our dist files, it's not possible for us to support future versions of Ember while also continuing to support users of ember-charts who have not yet upgraded.

Our ideal strategy for dealing with this problem is to move to ember-cli, however we need a solution for the meantime and we need a solution that supports ember-charts users who are not on ember-cli and are planning to continue using our globals build.

@ebryn, @azirbel, @igillis and I have all discussed this and come up with the following strategy:

• The current code on ember-charts master, which includes dist files that work with Ember 1.8 and earlier, will be released one last time as ember-charts 0.4.0. This will be the final ember-charts release to support Ember 1.8 and earlier. (Update: this has now been done)
• The Handlebars 2.0 upgrade (#65) will be merged, and released as ember-charts 0.5.0. This will be the only release of ember-charts to support Ember 1.9.
• The HTMLBars upgrade (#76) will be merged, and released as ember-charts 0.6.0. This will be the first version of ember-charts to support Ember 1.10+. Going forward, all future releases of ember-charts will be compiled for Ember 1.10+.

For users who are still on versions of Ember before 1.10, our recommended action is to upgrade as soon as possible. In the meantime, as new features and bugfixes are brought into the ember-charts library, it will remain possible to manually cherry-pick them and build your own dist files for older versions of Ember.

There was a bug with Minor Ticks that arose from a complication with how D3 manages selections. This issue only occurs in the axis is made smaller (eliminating labels) and then made larger again.

And here is the state of the DOM:

<g class="tick" transform="translate(185.39634888126415,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text y="9" x="0" dy="0.71em" style="text-anchor: middle; display: block;">Dec '14</text></g>
<g class="tick" transform="translate(334.4525531050245,0)" style="opacity: 1;"><line y2="12" x2="0"></line><text y="9" x="0" dy="0.71em" style="text-anchor: middle; display: none;">Dec '15</text></g>
<g class="tick" transform="translate(110.4428580586997,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text y="9" x="0" dy="0.71em" style="text-anchor: middle; display: block;">Jun '14</text></g>
<g class="tick" transform="translate(259.49906228246005,0)" style="opacity: 1;"><line y2="12" x2="0"></line><text y="9" x="0" dy="0.71em" style="text-anchor: middle; display: none;">Jun '15</text></g>

Hey everyone,

It's great to see so many people using and enjoying ember-charts. When this project was first started, we never expected the attention and support we're now getting.

We've been spending a lot of time recently discussing how to port things to ember-cli, upgrade to Ember 1.9 and 1.10, and a whole lot more, and we've come to a conclusion.

We clearly are big fans of porting things around and spending time working on upgrades. Once we're on ember-cli, these things will become a thing of the past. Thanks to Ember's "stability without stagnation" mission, we'll never have to worry about complicated upgrade processes. Even upgrading to 2.0 should be painless.

We don't want this. I think it goes without saying, but I'll say it anyways: no pain, no gain.

We're therefore planning to move this whole repository over to Angular 1.0 now, and upgrade to Angular 2.0 when it's ready. This should give us years of additional pain. Hopefully Angular 3.0 will be ready by the time we're on 2.0 to keep us constantly burning off those code calories.

In order to avoid any confusion, we will be keeping the name the same! "ember-charts" will still be the same Ember Charts library you know and love, just now in Angular.

Please let us know what you think!

When a horizontal bar chart has all data less than or equal to zero, all grouping labels should be on the right and all value labels should be on the left. However, all rows with data = 0 used to have grouping labels on the left and value labels on the right. The PR fixes this pre-existing bug.

@Addepar/fire , @philpee2 , @jordansmith42

Before Change: Note that Label 1 and Label 6 are on the left instead of right when all data is <= 0

After Change: Note that Label 1 and Label 6 are with the rest of the labels when all data is <= 0

Same as before: For mixes of positive and negative data, rows with value of 0 will have the grouping label on the left and the value label on the right.

This package relies on alias behavior from pre 1.6 Ember..

https://github.com/emberjs/ember.js/issues/9265#issue-44757560

This replicates the old behavior by implementing alias as a computed. In the main application where ember-charts is used this is already being done, and this package on the whole may not even work without this change.

In order to get the codemod I wrote to fix the alias I needed to first run https://github.com/ember-codemods/ember-modules-codemod which converted the global use to the module import use

Bumps eslint-utils from 1.4.0 to 1.4.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps mixin-deep from 1.3.1 to 1.3.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps acorn from 5.7.3 to 5.7.4.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.