search

GraFiddle / angular-chart

AngularJS directive for adjustable dynamically updating c3 charts
http://grafiddle.github.io/angular-chart/
MIT License
127 stars 40 forks source link

Agenda for angular-chart 0.3.0 #55

Closed maxklenk closed 9 years ago

maxklenk commented 9 years ago

Version 0.3.0 will contain some structural changes to separate functions and to be able to keep up with the development of c3.js.

Tasks

ulilicht commented 9 years ago

an idea: Maybe start with fresh copy of the c3 config object each update run - this would make most "else" branches obsolete. Currently, most of them are used to set null values or empty strings.

maxklenk commented 9 years ago

@ulilicht That would definitely help, we could start with an empty object an rely on the c3.js defaults or we could set own defaults.

Before focusing on the implementation I would like to discuss the API:

API

The options object contains four types of key:value pairs:

Combined Access (close to current implementation)

var options = {
  rows: [{
    key: 'income',
    type: 'bar',
    axis: 'y' // default
  }],
  axis: {
    x: {
      key: 'day',
      displayFormat: '%Y-%m-%d %H:%M:%S',
      max: 5,
      editor: true
    }
  },
  size: {
    height: 200,
    width: 200
  },
  zoom: {
    range: [2, 4]
  }
};

:+1: Advantages

:-1: Disadvantages

Distinct Access

var options = {
  dimensions:  {
    "income": {
      type: 'bar',
      axis: 'y' // default
    },
    'day': {
      axis: 'x',
      displayFormat: '%Y-%m-%d %H:%M:%S'
    }
  },
  chart: {
    size: {
      height: 200,
      width: 200
    },
    axis: {
      x: {
        max: 5
      }
    }
  },
  editors: {
    xAxis: true
  },
  state: {
    zoomRange: [2, 4]
  }
};

:+1: Advantages

:-1: Disadvantages

@ulilicht, @sebastianhenneberg and anybody else: What advantages/disadvantages do you see, which other solutions are possible?

ulilicht commented 9 years ago

Hi Max, thanks for your comparision!

what is the goal of angular-chart? Is it

For me, it seems to be the latter as reinventing the wheel does not make much sense to me here. Therefore I'd keep everything very close to the original c3.js.

Some other points are: pro solution 1:

pro solution 2:

maxklenk commented 9 years ago

Hey @ulilicht,

thank you for your feedback. I discussed it and where we want to go with angular-chart with @sebastianhenneberg. angular-chart does not only connect c3.js to the AngularJS data-binding, projects like jettro/c3-angular-sample try to solve only this task so. We want to do more, especially the formatting of the data using our schema object and the display of the different dimensions should be easier configurable. On the long run we plan to extend the library to support more chart types and perhaps even trees or other visualizations.

maxklenk commented 9 years ago

I put some more time in defining the new API. It builds on top of the "Distinct Access" version introduced earlier and includes all information required to visualize the data. The options object can either be passed as one into the directive: <angular-chart options="options">... or the specific sub objects may be passed one by one: <angular-chart data="data" dimensions="dimensions">....

var options = {
  data: [],
  schema: {
    day: {
      type: 'datetime',
      format: '%Y-%m-%d_%H:%M:%S',
      displayFormat: '%Y-%m-%d',
      name: 'Date',
      color: 'green' // would make sense to define only once here
    },
    income: {
      postfix: '€'
    }
  },
  dimensions:  {
    income: {
      type: 'bar',
      axis: 'y' // default
    },
    day: {
      axis: 'x'
    }
  },
  state: {
    zoomRange: [2, 4]
  },
  chart: {
    size: {
      height: 200,
      width: 200
    },
    axis: {
      x: {
        max: 5
      }
    }
  },
  editors: {
    xAxis: true
  }
};

The options are applied in the order they are presented above. When the data and the schema lay the basis, then the dimensions add c3 configuration options in various places by considering the schema (setting post/prefixes, displayFormat for axis, ...). This already enough to render the chart. The state object is used to save and reapply interactions with the chart, it is separated to allow to only save/sync it when required. The chart object takes all c3.js configurations and allows to overwrite the automatically set values. This way users which want total control can take advantage of this and don't have to use the separation in schema and dimensions. The last object enables the interactive editors, it is considered to move them in an own optional directive.

maxklenk commented 9 years ago

Furthermore I would like to break the directives code in multiple parts, which can be tested on their own and support a better overview what is happening where.