mindar / charty Goto Github PK
View Code? Open in Web Editor NEWA declarative chart library for web pages
License: MIT License
A declarative chart library for web pages
License: MIT License
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
Add documentation for every feature of Charty that can be accessed by HTML.
Stuff to document:
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:
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:
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.