EZ-Components

This commit is contained in:
Andreas Österreicher
2009-02-17 15:27:43 +00:00
parent 359c3c55c9
commit 0a8e90a8b3
572 changed files with 64490 additions and 0 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

@@ -0,0 +1,143 @@
eZ component: Graph, Design
~~~~~~~~~~~~~~~~~~~~~~~~~~~
:Author: Kore Nordmann
:Revision: $Revision: 3273 $
:Date: $Date: 2006-08-15 11:42:17 +0200 (Tue, 15 Aug 2006) $
Design Description
==================
Purpose of Graph package
------------------------
The Graph package will be used to generate different chart types from a user
defined set of data. There will be 2D and 3D presentations for each chart
type.
Classes
-------
ezcGraph
Controller for the generated graphs. Offers factory methods for the other
classes, handles and dispatches the configuration and actions to the other
classes.
ezcGraphDataset
Receives the user data, and stores the configuration for the dataset, like
color, label, etc. How the data is stored depends on the kind of the
dataset. The dataset will be extended for algorithms like averaging and
polynomial interpolation in the dataset.
ezcGraphChart
Abstract class, which handles the global charts options like background
colors or images. Aggregates ezcGraphChartElement for configurable sub
elements.
ezcGraphChartPie
Extends ezcGraphChart for pie charts. Offers additional options for pie
charts like tresh hold under which data is combined.
ezcGraphChartLine
Extends ezcGraphChart for line charts. Additionally contains two objects
to represent and configure the axes.
ezcGraphChartElement
Abstract class to define the interface how to access the configuration
directives of different chart elements like axes and legend.
ezcGraphChartElementLegend
Offers configuration options for the charts legend like background color,
position and size.
ezcGraphChartElementAxe
Offers the axes configuration options like scaling, lines within the
graph and labeling. Can do automagic scaling of the axes.
ezcGraphRenderer
Abstract class which transforms the chart elements like pie segments,
bars, texts and lines to image primitives depending on the renderer.
ezcGraphRenderer2D
Creates image primitives for the chart elements considered as two
dimensional.
ezcGraphRenderer3D
Creates image primitives for the chart elements considered as three
dimensional.
ezcGraphDriver
Offers methods to draw image primitives like textboxes, arcs, rectangles,
polygons and lines. Needs to be extended for each output format.
ezcGraphDriverGD
Creates PNG images utilizing the GDlib bundled with PHP.
Implementation
==============
ezcGraphManagager
-----------------
Offers factory methods to build up the wanted graph, containing a chart of a
selected type, a renderer and a driver. Once aggregated the manager offers an
unified interface to configure all parts of the graph.
The manager can aggregate a finite count of datasets and forwards the to the
chart. The chart builds the visual chart elements like pie segments, lines or
bars, which are forwarded to the renderer. They are transformed to image
primitives accoringly to the selected renderer.
The datasets can be configured individually by the user of the package.
API example
-----------
The following example shows how to use the class: ::
<?php
$pie = new ezcGraphPieChart();
$pie->options->backgroundImage = 'background.png';
$pie->options->border->color = '#ff0000';
$pie->title = 'Apple Pie';
$pie->data['humanoids'] = new ezcGraphArrayDataSet(
array( 'monkey' => 54, 'ape' => 37, 'human' => 9 ) // adds a new data set
);
$pie->data['humanoids']->color['monkey'] = 'blueish'; // setting datapoint color
$pie->data['humanoids']->highlight( 'monkey' ); // chart type dependent
$line = new ezcGraphLineChart();
$line->options->backgroundColor = 'pink';
$line->data['income'] = new ezcGraphArrayDataSet(
array( 1990 => 5, 5.1, 5.4, 5.3, 6.9 )
);
$line->data['income']->color = 'blue';
$line->data['income']->symbol = ezcGraph::diamond;
$line->data['incomeWithTax'] = new ezcGraphArrayDataSet(
array( 1990 => 4.9, 5.0, 5.2, 5.1, 6.4 )
);
$line->data['incomeWithTax']->color = 'red';
$line->data['incomeWithTax']->symbol = ezcGraph::squareWithChupi;
// Create a new averaging line
$line->data['averageIncome'] = new ezcGraphAverageDatasSet( $line->data['income'] [, options] );
$line->renderer = new ezcGraphRenderer2D();
$line->driver = new ezcGraphGDDriver();
$line->render( 500, 200, 'file.png' );
?>
..
Local Variables:
mode: rst
fill-column: 79
End:
vim: et syn=rst tw=79
@@ -0,0 +1,167 @@
eZ component: Graph: Interactive data points, Design
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
:Author: $Author: dr $
:Revision: $Rev: 8393 $
:Date: $Date: 2008-06-16 10:22:05 +0200 (Mon, 16 Jun 2008) $
Introduction
============
Description
-----------
Interactive data points describe a feature in charts, that the viewer of the
chart can interactively get more information about data, when viewing the
chart, or moving his mouse pointer over points of interest in the chart.
Requirements
============
There are two major sets of features to implement
Value indication
----------------
The value indication means, that at the position of the mouse pointer lines
are drawn, depeding on the chart type, to indicate the current data value at
this poistion in the chart. In a line chart this would mean a horizontal and a
vertical line to the axis and some coordinate information at the current
position of the mouse pointer, while in radar chart a line to the center of
the chart and an ellipse, indicating the value on the y axis, needs to be
drawn.
To enable this an option will be added to the driver option classes for the
drivers, which are capeable of drawing this. The value indication will be off
by default and can be enabled like this:
::
$chart->driver->options->valueIndication = true;
This option will be defined in the driver classes for the drivers implementing
the ezcGraphDriverValueIndication interface. We cannot add those options to
ezcGraphDriverOptions, because not all drivers will support this new feature,
and implementing an interface in the driver option class makes no sense, as no
methods, but only properties, will be added. The configure options will be
delegated to an option class ezcGraphDriverValueIndicationOptions to have a
central unique place to maintain those options.
Driver support
^^^^^^^^^^^^^^
The driver itself needs to implement a new interface which defines the methods
required to add the interactive elements to the resulting image. The renderer
will call those methods on the driver if it implements the interface.
::
interface ezcGraphDriverValueIndication
{
/***
* Add value indication for a cartesian coordinate system
*
* The graph data is rendered in the bounding box, the x values to
* indicate start with $xStart up to $xEnd, and the y values start
* with $yStart, up to $yEnd.
*
* http://en.wikipedia.org/wiki/Cartesian_coordinate
*
* @param ezcGraphBoundings $box
* @param float $xStart
* @param float $xEnd
* @param float $yStart
* @param float $yEnd
* return void
*/
public function cartesianValueIndication(
ezcGraphBoundings $box,
$xStart,
$xEnd,
$yStart,
$yEnd
);
/***
* Add value indication for a polar coordinate system
*
* The graph data is rendered in the bounding box, the x values to
* indicate start with $xStart up to $xEnd, and the y values start
* with $yStart, up to $yEnd. The middle point of the polar coordinate
* system is always the center point of the bounding box. The zero
* angle may be rotated, depending on the graph rotation.
*
* http://en.wikipedia.org/wiki/Polar_coordinate
*
* @param ezcGraphBoundings $box
* @param float $xStart
* @param float $xEnd
* @param float $yStart
* @param float $yEnd
* return void
*/
public function polarValueIndication(
ezcGraphBoundings $box,
$xStart,
$xEnd,
$yStart,
$yEnd
);
}
Additional data point information
---------------------------------
When hovering or clicking on a data point or a legenda item, a box with
additional information should be displayed. The box should contain text or
user defined content.
The data will be associated with the data point the same way we now associate
URLs, by an additional option, so that you can optionally add information when
creating your chart. This will consume nearly no memory if this feature is not
used.
::
$chart->data['data'] = new DataSet();
$chart->data['data']->informationBox['key'] = $object;
You may of course set the informationBox property without specifying a special
data set key to set it for all data points of a data set, even it may not make
sense semantically.
The value defined in the informationBox property will be passed to the driver.
The driver classes do not need to implement additional public methods for
this, but may optionally use an extended version of the ezcGraphContext
structure, which is already used to pass semantical context of rendered image
primitives to the driver. This struct will be extended by the additional
optional property $informationBox.
The type of $object cannot be checked before the graph is actually rendered,
or the scripts for the data point information are created, because it
rigorously depends on the driver, which values are accepted here.
- The ming driver accepts SWFMovie, SWFSprite and SWFShape objects.
- The SVG driver accepts XML, which should be valid SVG, which we won't check
for performance reasons.
- The GD driver will use enhanced imagemaps with JavaScript, so it will accept
IDs of HTML elements of the document the image will be embedded in. The
element may contain arbitrary content and will get an absolut poistion and
moved in front of the chart image.
The driver classes do not need to implement additional public methods to make
use of the new informationBox property, but can just check the context struct,
if it is available and render it properly then.
The gd driver can of course not natively support this, because bitmaps may not
contain any active content. An additional method createInteractiveImageMap()
will be added to the ezcGraphTools class. This may be called, or the user can
implement the JavaScript itself, to not infere with his own scripting
mechanisms.
..
Local Variables:
mode: rst
fill-column: 79
End:
vim: et syn=rst tw=79
@@ -0,0 +1,97 @@
eZ component: Graph: Multiple axis, Design
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
:Author: $Author: kn $
:Revision: $Revision: 5847 $
:Date: $Date: 2007-08-08 12:26:43 +0200 (Wed, 08 Aug 2007) $
Introduction
============
Description
-----------
Multiple axis are used in three different cases.
- In stock chart, for example, they are used to show a different meaning of
the displayed data, for example the value of a single stock option and the
value sum of the complete company.
- Another case multiple axis may be used, is displaying relating data in one
chart which has completely different scalings or units, like the used RAM
and the load on a machine.
- A third case multiple axis could be used for, are named separators to
highlight data borders in your chart. In this case the step labels should be
at least optional.
Requirements
============
From an implementation point of view the feature seperates into two different
APIs we need to define.
Adding additional axis
^^^^^^^^^^^^^^^^^^^^^^
When adding additional axis we want to support a finite number of marker axis,
at every possible position in the chart.
::
$marker = new ezcGraphChartElementLabeledAxis();
$marker->position = ezcGraph::LEFT;
$marker->chartPosition = .4;
$chart->additionalAxis[] = $marker;
The property $position is already used by ezcGraphChartElement to indicate the
overall position and accepts bitmasks of LEFT, RIGHT, BOTTOM and TOP. For Axis
this indicates the base point of the axis and for additional axis it will
define wheather the new axis is an X or Y axis in the cartesian coordinate
system of bar and line charts.
As the property $position is already used the property $chartPosition
indicates the position of the axis in the charts data section. A value of 1
will place the axis at the very end, and a value of 0 at the very beginning of
the data.
In the example above ezcGraph::LEFT means that the axis is drawn from the left
to the right, so it is an additional x axis, and the $chartPosition indicates
the position at 40% of the chart data bounding height.
Adding data for additional axis
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Data may be added explicitely on one of the additional axis to use different
scaling und units for this dataset. The axis values are received from the data
sets when rendering the charts, so that we are able to define the usage of an
additional axis at any point before rendering.
::
$chart->data['foo'] = new ezcGraphArrayDataSet( ... );
$chart->data['foo']->xAxis = $marker; // See last example
$chart->data['foo']->yAxis = $chart->yAxis; // Redundant
The assignement of additional axis is optional and if none was defined the
original common chart axis will be used. You may define custom axis for one or
both axis.
Special consideration
=====================
You may of course define custom scaling, custom axis types and custom axis
label rendering algorithms for each of the used axis.
If no data set has been assigned to a axis it will not render any labels by
using the ezcGraphAxisNoLabelRenderer. Otherwise the assigned data will be
used the common way to calculate some default step sizes.
..
Local Variables:
mode: rst
fill-column: 79
End:
vim: et syn=rst tw=79
@@ -0,0 +1,75 @@
eZ component: Graph, Requirements
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
:Author: Derick Rethans
:Revision: $Revision: 2547 $
:Date: $Date: 2006-04-12 11:53:25 +0200 (Wed, 12 Apr 2006) $
Introduction
============
Description
-----------
The purpose of this component is to generate different kinds of diagrams from
different kinds of data. The diagrams' appearance needs to be slick and
customizable.
Requirements
============
The first version of the component should cover the following types of
charts:
Piechart
--------
A diagram showing values as elements of a piechart. It should support:
- highlighted parts (shown as a little bit outwards of the pie)
- setting a tresh hold under which values are combined together in an "others"
part
- automatic colours, but they should be able to set manually too
- automatic legenda generation and label placement
- 2D view, like:
http://www.eia.doe.gov/neic/brochure/gas04/images/pie%20chart.gif
- 3D view, like: http://www.chambersfund.org/images/piechart.jpg
- background image and/or colours
Linechart
---------
A diagram with a variable y-axis showing values for a finite set of data
points. The chart should be able to show different data sets, but all measured
only in the same unit.
Line charts should support:
- automatic colours and styles, but each dataset should be able to be styled
manually
- automatic scaling of the x and y-axis
- automatic legenda generation
- automatic label placement for both x and y-axis
- options for setting when to draw vertical and horizontal lines, and in which
style they should be drawn
- 2D view, like: http://www.swiftchart.com/line_ex5.jpg
- 3D view, like: http://www.jspwiki.org/attach/LineChart/Line+Chart+3D.png
- background image and/or colours
Special Considerations
======================
The component should be flexible enough to allow averaging and other analysis
methods to work on datasets and add rendered data to the resulting graph. This
can for example be trend analysis or mean average etc.
Formats
=======
Graphs should be rendered as PNGs in the first version, but it should be
possible to have different renders to render to f.e. SVG or flash in later
versions of the component.
..
Local Variables:
mode: rst
fill-column: 79
End:
vim: et syn=rst tw=79
@@ -0,0 +1,81 @@
eZ component: Graph: Interactive data points, Requirements
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
:Author: $Author: kn $
:Revision: $Rev: 5711 $
:Date: $Date: 2007-07-10 11:29:28 +0200 (Tue, 10 Jul 2007) $
Introduction
============
Description
-----------
Interactive data points describe a feature in charts, that the viewer of the
chart can interactively get more information about data, when viewing the
chart, or moving his mouse pointer over points of interest in the chart.
Requirements
============
There are two major sets of features to implement
Value indication
----------------
The value indication means, that at the position of the mouse pointer lines
are drawn, depeding on the chart type, to indicate the current data value at
this poistion in the chart. In a line chart this would mean a horizontal and a
vertical line to the axis and some coordinate information at the current
position of the mouse pointer, while in radar chart a line to the center of
the chart and an ellipse, indicating the value on the y axis, needs to be
drawn.
SVG
No real problem.
GD / Cairo / IMagick
Not possible without large effort.
Flash
No really big deal with flash and ext/ming.
Additional data point information
---------------------------------
When hovering or clicking on a data point or a legenda ite, a box with
additional information should be displayed. The box should contain text or
user defined content.
SVG
With only user defined inlined SVGs or Text in a box no big deal.
GD / Cairo / IMagick
With a tool script generating HTML and javascript to use with the image
map, it should be possible to use HTML and text in boxes. This is similar
to the currently used mechanism to create image maps.
Flash
Possible with user provided SWFMovies or shapes.
Special consideration
=====================
It is impossible to implement natively more then simple text in a box for the
additional information in highlighted data points, because this would require
a complete redering model like HTML uses.
Formats
=======
The integration of HTML, Flash or SVG documents should be possible, but would
be a non driver generic mechanism. It seems not easily possible to convert
user defined Flash, HTML and SVG to the respective other format.
..
Local Variables:
mode: rst
fill-column: 79
End:
vim: et syn=rst tw=79
@@ -0,0 +1,60 @@
eZ component: Graph: Multiple axis, Requirements
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
:Author: $Author: kn $
:Revision: $Rev: 5844 $
:Date: $Date: 2007-08-08 11:00:39 +0200 (Wed, 08 Aug 2007) $
Introduction
============
Description
-----------
Multiple axis are used in three different cases.
- In stock chart, for example, they are used to show a different meaning of
the displayed data, for example the value of a single stock option and the
value sum of the complete company.
- Another case multiple axis may be used, is displaying relating data in one
chart which has completely different scalings or units, like the used RAM
and the load on a machine.
- A third case multiple axis could be used for, are named separators to
highlight data borders in your chart. In this case the step labels should be
at least optional.
Requirements
============
To act as additional axis and seperators it is required, that additional axis
can be placed at any position in the chart, especially at the very end and
beginning of the charts data.
It should be possible to associate a data set with a non default axis, to
calculate the position of its data points based on a diffenrent scaling, then
the default one.
It should also be possible to add axis not depending on any data set and
define the scaling manually. Those axis can be placed at any position in the
chart, and if no scaling was explicitely given and no data set is associated,
those axis will omit drawing steps or step labeling and just display a single
line with the (optional) axis label.
Special consideration
=====================
An API for assigning data sets to axis other then the default one will be
defined in the design document. The calculation of the poistion of a data
point in a chart is completely done in the chart classes, so it will be no
problem to use another axis for this. No changes or additions in the renderers
will be required.
..
Local Variables:
mode: rst
fill-column: 79
End:
vim: et syn=rst tw=79