mindar / charty Goto Github PK

A MutationObserver has to be added to the Pointchart element, so it can react to changes whenever the element's style changes. In addition the mutation observer allows to check for new or removed children.

Things that need to be observed

• Style changes
• New Children / Removed children
• attribute changes (to both children and the element itself)

Add documentation for every feature of Charty that can be accessed by HTML.

Stuff to document:

• Attributes
• Elements
• Datasource Requirements
• Charty's behavior in error cases (e.g. faulty csv, 404, ...)
• Other things as needed

Develop a flexible data backend interface that can be used to implement backends for various types of data such as *.csv files, json data, xml data, etc. The backend will be used to provide data to a chart frontend/renderer.

To better demonstrate the css properties and their effect on the chart, a live demo could be added.

Description
The demo would show a small CSS snippet for every option and a small charty-chart next to it. The demo would then cycle between two different states that demonstrate the effect of the css property on the chart. For example: A height: 100px; demo could cycle between 100px height and 150px height with a frequency of ~1 Hz. A simple animation would be added to better demonstrate the change. The CSS snippet's property value would always reflect the actual chart's properties. Maybe even make this interactive so users can play around with the values themselves.

Motivation
In order to keep the code as clean as possible it's necessary to extract a LinechartRenderer or LinechartFrontend from the current Linechart class. The Linechart class has become painfully bloated and needs to be debloated. Maybe LinechartRenderer itself should only be an interface. This would allow to implement various LinechartRenderers such as a canvas renderer or svg renderer. The type of linechart renderer should be selected automatically be the Linechart element itself. This selection should be overrideable by the user using some attribute on the element.

What should this LinechartRenderer be able to do?
For now it should be able to render a collection of (x, y) coordinates/points into a canvas. Rendering must take the following options into account: Point-symbol (circle, rectangle, triangle, ...), Line (yes/no, if yes: thickness?), Color (applies to both the point symbol and the optional connecting line). The renderer should automatically scale the viewport so that all data fits into the canvas. It should also render the diagram's axis.

Right now there are no markings on either axis. To properly estimate a point's x and y values from a chart it is absolutely vital to have at least some markings. The markings should automatically adjust to the range of values displayed in the chart.

Autoscaling
Markings on each axis should automatically adjust to the displayed range of values. For example when values between 0 and 10 are displayed on an axis, the markings should be 1 unit apart. If values between 0.1 and 0.5 are displayed, the units should be 0.01 or 0.1 units apart (depending on how it looks, if it's too cluttered, the number of markings should be reduced). 'Clutteredness' could be measured by the number of markings currently on screen or by the distance in pixels between two markings. The Number interface has a toExponential method which returns a string that represents the number in exponential notation. This string could be parsed and used to calculate the number of markings required for a given range. Edit: Turns out I'm dumb and Logarithm exist.

Everything that can be done from HTML should be doable from javascript. Right now this is not the case. Both the CsvLoader and the Linechart class need a easy to use, public API.
This API also requires proper documentation.

The API should have at least the following features and should be expanded as the HTML functionality grows:

• Set Chart title
• Set Chart axis (range, scale, description)
• Set chart's selected datacolumn (of the csv file; might need some adjustment for other datasources; depends on Backend Interface)
• Set Chart colors
• Set Data
• Get Canvas to draw custom things on it

Charty charts should be able to light up in all sorts of colors. To achieve that it is necessary to define, implement and document several of the most important CSS properties.

Required Properties

For charty-pointchart elements:

• --charty-axis-color: For coloring the axis (maybe split this up into 2 separate properties for x and y)
• --charty-axis-thickness: For making the axis thicker or thinner (right now it's hardcoded as 1px)
• --charty-legend-display: (none, North/East/South/West or combination) to display a legend in a certain place or not at all
• --charty-x-range: 'auto' or 2 numerical values for min & max
• --charty-y-range: 'auto' or 2 numerical values for min & max
• background-color: For the background of the chart
• color: For the text of axis labels etc
• font-family and other font-related (where possible): For axis labels etc

Research and add an appropriate unit testing framework. Add the tests to the package.json "test" script. Tests should cover the graphical output. Graphical output tests could be done by phantom.js or (since Chrome 60) by running headless chrome. Maybe an actual framework would be nice to have instead of just developing a home brew solution.