swimlane / ngx-charts Goto Github PK

Add an option to toggle the grid lines on bar, line, and area charts.

need index.d.ts with
export { NG2D3Module } from './src/ng2d3';

is needed for typescript compile

ng2d3 seems to be incompatible with AoT compilation

I'd like to have a force directed graph as part of this library. I'm working on a PR to add it.

Add an input property to line and area charts that specifies the interpolation algorithm used to generate the paths.

The available values would be 'linear', 'cardinal', and 'monotone'.

Example:
http://bl.ocks.org/mbostock/4342190

The charts are wired to use the Popover component in common/popover. The Popover component uses angular.element from angular 1 and needs to be updated to work without it though.

Demo page that lets me explore all types of data/formats/etc

• TravisCI
• Hook coverage reports to codeclimate
• Browserstack?

The link to gitbook is not working.

Remove all the D3 Transitions for animations and switch it to Angular2 Animations

• Example: https://github.com/sghall/react-d3-transitions

I know this is in your coming soon features, but I'm still adding it as the other coming soon features are open issues. I'm also interested to know if someone is already working on this? I would surely like to give a hand as this feature is a must have for responsive components!

"self.context.clickHandler is not a function"

this message can be seen when you click bar on "https://swimlane.gitbooks.io/ng2d3/content/charts/bar-vertical.html"

I'd like to be able to customize the tooltip for any chart that extends BaseChart.

I'll make a PR if you like the idea.

Something like this:

<some-chart>
  <template #tooltipTemplate let-model>
    {{model.customValue}} and {{some.outside.value}}
  </template>
</some-chart>

BaseChart would register @ContentChild('tooltipTemplate') tooltipTemplate: TemplateRef

And each chart would be responsible for plugging this.tooltipTemplate into the swui-template directive.

Note: I haven't thought of a good way to override the area-tooltips. I won't touch them in this PR.

Let me know what you think.

All the files should be named following the official Angular 2 styleguide. Example: Chart.ts -> chart.component.ts etc..

Add some packaging magic like: https://github.com/swimlane/angular2-data-table/blob/master/package.json#L33

A few files use jquery/moment functions/helpers, we have to remove these

Axis labels overlap. The axis components need to handle this automatically. To prevent overlap, first try to use rotation (by increasing the angle).

If the angle is 90, and there is still overlap, reduce the number of labels.

We can not use this module in to shared module since common module use browser module can we fix this please?
basically lazy loaded module

ng2d3.css missing in release folder

Big screen:

Small screen:

Chart.ts currently uses bootstrap classes to lay out the chart and it's legend. We need to remove those.

Hot module reloading to webpack dev setup

Currently trying to reproduce the area-chart from the demo and with the same options and data passed to the table I'm getting this for the dates:

I'm also wondering if the epoch is supported in this current version?

It's easy to fix but I cannot as it's on plunker

I'm trying to use in my project (Angular 2 + angular-cli). I installed all dependencies by npm. If I install typings of core-js solve this issue but get many conflict errors like Duplicate identifier 'PropertyKey'. What it takes to make working properly?

(if you need any more information about my project, just ask)

Bubble Chart, like: http://www.screencast.com/t/rP2MpdfYdOG

Versions

• TypeScript 2.0

Type Definitions

If you are installing a new third-party project, you will likely need to install the typings for that
project like so npm install @types/body-parser --save-dev. If types are not available
for your module read here

release/ng2d3.js has comment which says it is 1.3.0

Trying to use ng2d3 with the angular2-FINAL release. I'm also using the latest angular-cli (beta-14), using webpack.

After "npm installing" the following d3 libraries (d3-array d3-brush d3-color d3-format d3-interpolate d3-scale d3-selection d3-shape), I managed to compile my project. However when I load my webapp, I get the following exception:

chart.component.js:32 Uncaught ReferenceError: __decorate is not defined

Anything else I should install?

umd format not working

with systemjs

only ng2d3.cjs.js
and ng2d3.umd.js with ( format:'cjs' ) works

angular version: 2.1.0.beta.0

Charts need to support negative values (except the ones where it doesn't make sense, like pie charts).

Example:
http://www.screencast.com/t/k4pidKg8u

Current support is buggy:

It looks like a few source files are missing:

• common/utils/number/format: in src/treemap/Cell.ts
• common/utils/truncate: in src/pieChart/AdvancedPieChart.ts
• countUp: in src/Cards.ts

After adding chart resize functionality, the charts can now be resized to fit their parent containers when the window is resized. This is done by not specifying the view input property of the chart.

However, if the parent container dimensions change without the window being resized, window.resize will not fire and the chart will not be resized.

We need to add an event listener to the charts that can manually trigger update() from outside.

• Bar + Line

http://screencast.com/t/yxZAnwgwwShX

"rxjs" has no root module, it should be some child

We should refactor the app to use NgModules, this way we can remove the directives/pipes from all components.
Should we make an NgModule / chart type, and a global one that export everything ?

Allow specifying custom date formatting via input properties on the charts.

This would allow us to specify the representation of numbers and dates, as well as add prefixes and suffixes to their string representations in axis labels, legends, and tooltips.

• Unit Tests
• Functional
• Coverage Report

Semi related to #12

Requirement

Rather than have watchers/etc, use RxJS for more 'reactive' design.

Scatter Plot, like: http://www.screencast.com/t/rBL8NOoheZD

I'm planning to use this library, and I noticed that it isn't AoT compatible yet.

I've written an article that walks through generating *.metadata.json files for your library and troubleshooting errors that might come up. I'll work on a PR if I get a chance.

Decide on how to name the input properties:

Example: results vs data vs model

The number inside the doughnut in the pie grid, as well as the number in the number card chart should animate from 0 to the current value.

Example: https://inorganik.github.io/countUp.js/