parkourkarthik / pkchart Goto Github PK

Ability to configure different charts and their options.

• analyse the differences in options for different types of charts
• provide a more generic way to create the basic layout of the different chart types

As a first step try to define a simple svg HTMLElement when PKChart is used over an HTMLElement in javascript implementation.

Analyse the possibility of adding material design in css for charts based on option.

Integrate webpack along with babel loader.
Webpack's primary uses:

• bundling modules
• Loaders (Babel for es6 with polyfills)
• Plugins

The input data could be of any range. Currently, the input data directly affects the x/width of the bar chart.
It should be manipulated in such a way that any range of inputs should be converted into respective values within the boundary limit of the chart.
Consideration:
Consider getting the max value from the input range and calculate the percentage values of other data such that the values don't exceed 100.

• add gh-pages npm package
• set deploy script in package.json as gh-pages -d dist
• add 'copy-webpack-plugin' to package
• configure webpack to copy index.html, pkchart.css to dist folder with the new plugin.
• change reference to pkchart.js in index.html

References:

https://github.com/webpack-contrib/copy-webpack-plugin
https://www.npmjs.com/package/gh-pages

Each bar should be dynamically provided with a new color. Use random-material-color or try to generate color with own algorithm between shades.

• move the interfaces into separate ts file.
• use import and export to share ts files.

Load a simple svg based chart with minimal attributes and values in a div element.

Prepare the class PKChart to be invoked through javascript over an element for this.

add options under config for providing title and description for chart.