create charts components

[zebapy]

Considering:

• http://www.chartjs.org/
• https://gionkunz.github.io/chartist-js/index.html

[zebapy]

Will be using chartjs for pie and barcharts.

For the map, we will load a world.svg file and highlight svg paths with css

[imcbride]

Should I have Drupal install and load the chartjs library or would you like to manage that in the frontend project, or both?

[zebapy]

I'd like to have it in frontend somehow. I think I can add it as a node dependency, then using gulp to copy it to dist/js which would just put it with the other js files when deploying to the theme. Then on the Drupal side, it'd be great to load the file only if chart components are on the page.

[imcbride]

Tagging @adamfranco so he's aware of this.

[adamfranco]

@zebapy I've gotten the markup outputting from Drupal (also on ah charts branch). See http://hammer.middlebury.edu/afranco-drupal-miis8/test-chart-page for an example.

For some reason one of the bars on my bar chart isn't displaying maybe because of the auto-zero-point of the axis. It works fine in the pie chart. We should look into another parameter to for the axis to have a minimum of zero.

Also, the menu is overlapping -- not sure if that is something you need to change on your end.

I made a few tweaks to the Twig template to output the JSON with correct escaping which you might want to add to your version. See: https://github.com/middlebury/drupal8/blob/cb714aeba06465ab95fad66b0e9a7def420ca838/themes/custom/institute_theme/templates/paragraphs/paragraph--chart-basic.html.twig#L12-L15

[zebapy]

menu is overlapping

We'll need to duplicate the basic content template for the chart content type. Can @imcbride help you with that?

auto zero point axis

Looks like we can set it to beginAtZero: true but it's nested within xAxis/yAxis so I'm not sure how you'd prefer to implement that if this is going to be a setting on the Paragraph

[imcbride]

@adamfranco Add your chart content type to this list https://github.com/middlebury/drupal8/blob/master/themes/custom/institute_theme/institute_theme.theme#L267 to change the page template to one with a sidebar.

[adamfranco]

Thanks, @imcbride. That change fixed the sidebar issue.

@zebapy Can you think of cases where a bar chart shouldn't start at zero? Maybe just defaulting to that would be sufficient -- we can always add an option later to allow starting at something other than zero if that is needed.

[zebapy]

@adamfranco We're ok with defaulting it at beginAtZero

[adamfranco]

Ok, is that something you can add to your Javascript chart-loading in the frontend project or do you need me to add something to the markup?

I think this is the only thing left to do before we deploy this work now that I have the map working: http://hammer.middlebury.edu/afranco-drupal-miis8/test-chart-page

[zebapy]

Ok I handled this on the client side https://github.com/middlebury/frontend/commit/71c53cbbf4943c8f2d9c64a33e93cb44af68f831