diff --git a/README.md b/README.md index c0d7d0b..6263c18 100644 --- a/README.md +++ b/README.md @@ -7,14 +7,9 @@ Build calendar graphs with unlimited chart layers #### [Month](https://github.com/YGGverse/graph-php/blob/main/src/Calendar/Month.php) -![yggverse-graph-php-example](https://github.com/YGGverse/graph-php/assets/108541346/bbac7626-1f0b-476c-b154-f8a6f2933530) +##### Example -##### Examples - - * [YGGstate](https://github.com/YGGverse/YGGstate) - Yggdrasil Network Explorer - * [HLState](https://github.com/YGGverse/HLState) - Web Monitor for Half-Life Servers - -##### Usage +![2 layers example](https://github.com/YGGverse/graph-php/blob/main/media/calendar/example-2-layers.png?raw=true) ###### Server-side @@ -32,7 +27,7 @@ foreach ($calendarMonth->getNodes() as $day => $node) $calendarMonth->addNode( $day, // required, number of day, on this example we are processing all of days in the initiated month rand(1, 1000), // required, set some digit value for this day and current layer - 'label 0', // optional, label text that could be displayed on element over + 'label 1', // optional, label text that could be displayed on element over 'class-name', // optional, customize output with CSS class 0 // optional, define chart layer if you want to build multiple charts in single day case // e.g. 1, 2, 3... or some keyword. first layer has 0 index by default. @@ -43,20 +38,17 @@ foreach ($calendarMonth->getNodes() as $day => $node) { // To build independent chart layer, make sure that layer attribute increased, for example to 1 $calendarMonth->addNode($day, rand(0, 1000), 'my hourly label 1, 'my-class-name-1', 1); - $calendarMonth->addNode($day, rand(0, 1000), 'my hourly label 2, 'my-class-name-2', 1); + $calendarMonth->addNode($day, rand(0, 1000), 'my hourly label 1, 'my-class-name-1', 1); } } ``` ###### Client-side - * [CSS](https://github.com/YGGverse/YGGstate/blob/main/src/public/assets/theme/default/css/yggverse/graph/calendar/month.css) - * [PHP/HTML](https://github.com/YGGverse/YGGstate/blob/main/src/public/index.php) - -To make your own implementation, play with: +Coming soon on [YGGstate](https://github.com/YGGverse/YGGstate) or play with dump generated: ``` var_dump( $calendarMonth->getNodes() ); -``` +``` \ No newline at end of file diff --git a/media/calendar/example-2-layers.png b/media/calendar/example-2-layers.png new file mode 100644 index 0000000..9a5491c Binary files /dev/null and b/media/calendar/example-2-layers.png differ diff --git a/src/Calendar/Month.php b/src/Calendar/Month.php index 9a0bacf..ccb6719 100644 --- a/src/Calendar/Month.php +++ b/src/Calendar/Month.php @@ -2,7 +2,7 @@ declare(strict_types=1); -namespace Yggverse\Graph\Calendar; +namespace YGGverse\Graph\Calendar; class Month { @@ -35,19 +35,18 @@ class Month public function getNodes() : object { - // Calculate max value - $max = 0; + // Calculate month totals + $total = []; foreach ($this->_node as $i => $day) { foreach ($day as $l => $layer) { + $total[$i][$l] = 0; + foreach ($layer as $data) { - if ($data['value'] > $max) - { - $max = $data['value']; - } + $total[$i][$l] += $data['value']; } } } @@ -67,8 +66,8 @@ class Month // Calculate column width, height, offset foreach ($layer as $j => $data) { - $this->_node[$i][$l][$j]['height'] = $max ? ceil($data['value'] / $max * 100) : 0; $this->_node[$i][$l][$j]['width'] = $width; + $this->_node[$i][$l][$j]['height'] = $total[$i][$l] ? ceil($data['value'] / $total[$i][$l] * 100) : 0; $this->_node[$i][$l][$j]['offset'] = $width * $j; } }