Bar Chart

[jimbol]

Component showing bar chart

Visuals

• Bar chart with vertical bars
• Accepts color configuration for basic and selected states to be passed through
• Accepts unit for Y axis labels
• There might be other things like distance between bars or chart size. What do you think?

  Data

• Accepts collection of models
• Has valueKey property, states which model property should be used as value
• Has labelKey property, states which model property should be used as the bar label
• {{bar-chart valueKey="amount" labelKey="name"}}
  • Will use the value of model.amount for bar value
  • Will use the value of model.name for bar label
  • (if you know of a better approach, go for it!)

    Interaction

• Chart should emit action when bars are clicked
  • Selected model passed through as argument
  • Clicked model should have isSelected set to true
• Chart should emit action when bars are hovered over
  • Selected model passed through as argument
• Models marked with isSelected property should be highlighted

If this is too much, let me know.

[dehuszar]

This shouldn't be too hard at all. Couple of quick questions for clarification...

How are we intending for these to display? Do we have any initial use cases or implementation scenarios identified that would describe the chart's relationship to surrounding content? Specifically, will the chart live as a full-width block element, fixed-dimensions in the context of an article whose paragraphs might flow around it, in a tablular dashboard-like layout with other charts? All of the above?

Is there a sample of the data we want to pass into these? More specifically, from the description above, it seems like this might be a couple of components, one for each bar, and one for the parent container which would iterate through the bar components in an each loop. Unless we want to reuse the bars in other contexts, it's probably easier and more performant to just pass in the whole collection and generate individual bars from d3 rather than loop through instances of a bar component passing in individual values to each one. i.e. {{bar-chart bars="controller.values"}}, but the answers to this and the above question might change that assumption.

Do we want the labels to live on the bars themselves, or as an x/y axis? Either? Both? Something else?

How are we defining highlighting? Do we want the styles assigned to the svg's attrs directly or just have an .is-selected class assigned and let the visual assignment happen in the stylesheets (my preference unless the desired effect can only be achieved in SMIL)?

Is there any reason to not have this behave as a horizontal bar chart as well? i.e. {{bar-chart bars="controller.values" orientation="horz"}}. All we'd be doing is toggling our data to map to either x or y values.

Any existing implementations out in the interwehbs that illustrate what you want to see would be useful.

[jimbol]

So heres one of the initial comps. But the graphs still need a lot of work, so use you best judgment. Make it pretty.

The line graph will be replaced with a bar chart. Dont worry about the slider looking thing right now (we dont have that much data so we dont need it).

This would have to be a dynamically sized block element.

In terms of Data, what I was initially thinking was that we would pass in an Ember Array of Ember Data Models, as well as passing in which keys of the model to use. For example if we had a Model with:

var Industry = DS.Model.extend({
    amount: attr('number')
});

we would have to pass in that we want to use the amount as the value like so {{bar-chart data=arrayOfModels value="amount"}}. The idea was then when we interacted with a single bar, it would have the Model associated with it and we could do what we want with that Model.

Another thing we could do is pass in a formatted JS array like:

[{
  id: 2,  // this is the id of the ember model, for later use
  value: 230000,
  label: "Comcast" 
},{
  id: 4,
  value: 10000,
  label: "United Auto Workers" 
}]

Its up to you, what do you think would be better?

I'm thinking y axis labels should be displayed on the left as normal. I dont really want x label right now cause Organization names are usually really long. Later we can use the actions to create popovers or display selections.

Internally it doesnt matter how we handle the highlighting. The big thing will be how we pass data through events.

It could someday be horizontal, design it so it'd be easy to add that feature, but dont worry about it now.

Heres what I was looking at to start off with. It doesnt give us all the customization we need though: http://www.chartjs.org/docs/#bar-chart

[jimbol]

So I think we should delay the total redesign and just iterate on what we have, pulling ideas from Eric's comps. Theyre not quite complete enough to be a good guide for us.

Heres a quick sketch of how I think the bar chart should look.

It should show the top ten Contributors (lets just focus on contributors now).