Merge pull request #274 from vizzuhq/release

Release 0.8

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## [Unreleased]
 
+## [0.8.0] - 2023-07-12
+
 ### Fixed
 
 - Missing Area/line marker rewireing (on orientation change,

README.md

@@ -134,13 +134,6 @@ We have a comprehensive list of features we plan to implement, on our
 We welcome contributions to the project, visit our
 [wiki page](https://github.com/vizzuhq/vizzu-lib/wiki) for further info.
 
-Shortcuts:
-
-- [Report an issue](https://github.com/vizzuhq/vizzu-lib/issues),
-- [Building](https://github.com/vizzuhq/vizzu-lib/blob/main/project/build.md)
-  and [testing](https://github.com/vizzuhq/vizzu-lib/blob/main/test/test.md) the
-  project.
-
 ## Contact
 
 - Join our Slack:

docs/tutorial/aggregating_data.js

@@ -0,0 +1,167 @@
+const dataLoaded = import("../assets/data/music_data.js");
+const mdChartLoaded = import("../assets/javascripts/mdchart.js");
+
+Promise.all([dataLoaded, mdChartLoaded]).then((results) => {
+  const data = results[0].default;
+  const MdChart = results[1].default;
+  const mdchart = new MdChart(data, "./vizzu.js", "tutorial");
+
+  mdchart.create([
+    {
+      anims: [
+        (chart) => {
+          return chart.animate({
+            config: {
+              title: "Sum of all Popularity Values",
+            },
+          });
+        },
+        (chart) => {
+          return chart.animate({
+            config: {
+              channels: {
+                y: { set: "Popularity" },
+              },
+            },
+          });
+        },
+        (chart) => {
+          return chart.animate({
+            config: {
+              title: "Sum of Popularity by Genre",
+            },
+          });
+        },
+        (chart) => {
+          return chart.animate({
+            config: {
+              channels: {
+                x: { set: "Genres" },
+              },
+            },
+          });
+        },
+      ],
+    },
+    {
+      anims: [
+        (chart) => {
+          return chart.animate({
+            config: {
+              title: "Minimum of Popularity by Genre",
+            },
+          });
+        },
+        (chart) => {
+          return chart.animate({
+            config: {
+              channels: {
+                y: { set: "min(Popularity)" },
+              },
+            },
+          });
+        },
+      ],
+    },
+    {
+      anims: [
+        (chart) => {
+          return chart.animate({
+            config: {
+              title: "Maximum of Popularity by Genre",
+            },
+          });
+        },
+        (chart) => {
+          return chart.animate({
+            config: {
+              channels: {
+                y: { set: "max(Popularity)" },
+              },
+            },
+          });
+        },
+      ],
+    },
+    {
+      anims: [
+        (chart) => {
+          return chart.animate({
+            config: {
+              title: "Mean of Popularity by Genre",
+            },
+          });
+        },
+        (chart) => {
+          return chart.animate({
+            config: {
+              channels: {
+                y: { set: "mean(Popularity)" },
+              },
+            },
+          });
+        },
+      ],
+    },
+    {
+      anims: [
+        (chart) => {
+          return chart.animate({
+            config: {
+              title: "Count of items by Genre",
+            },
+          });
+        },
+        (chart) => {
+          return chart.animate({
+            config: {
+              channels: {
+                y: { set: "count()" },
+              },
+            },
+          });
+        },
+      ],
+    },
+    {
+      anims: [
+        (chart) => {
+          return chart.animate({
+            config: {
+              title: "Distinct Kinds by Genre",
+            },
+          });
+        },
+        (chart) => {
+          return chart.animate({
+            config: {
+              channels: {
+                y: { set: "distinct(Kinds)" },
+              },
+            },
+          });
+        },
+      ],
+    },
+    {
+      anims: [
+        (chart) => {
+          return chart.animate({
+            config: {
+              title: "Sum of Popularity by Genre",
+            },
+          });
+        },
+        (chart) => {
+          return chart.animate({
+            config: {
+              channels: {
+                y: { set: "sum(Popularity)" },
+              },
+            },
+          });
+        },
+      ],
+    },
+  ]);
+});

docs/tutorial/aggregating_data.md

@@ -0,0 +1,177 @@
+---
+data_url: ../../assets/data/music_data.js
+---
+
+# Aggregating data
+
+The default logic of `Vizzu` is to show the sum of values that are in the
+categories added to a chart. So if we create a simple vertical bar chart by
+adding the `Popularity` measure to the y-axis, the height of the bar will be the
+sum of all `Popularity` values and when we add `Genres` to the x-axis, the
+height of the bars will be the sum of `Popularity` values in each category
+within `Genres`.
+
+<div id="tutorial_01"></div>
+
+??? info "Info - How to setup Vizzu"
+    In `HTML`, create a placeholder element that will contain the rendered
+    chart.
+
+    ```html
+    <html>
+     <body>
+      <div id="myVizzu">
+      </div>
+     </body>
+    </html>
+
+    ```
+
+    In `JavaScript`, initialize and configure the chart:
+
+    ```javascript
+    import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@latest/dist/vizzu.min.js'
+    import data from 'https://lib.vizzuhq.com/latest/assets/data/music_data.js'
+
+    let chart = new Vizzu('myVizzu')
+
+    chart.initializing
+
+    chart.animate({
+        data
+    })
+    ```
+
+```javascript
+chart.animate({
+    config: {
+        channels: {
+            y: {
+                set: ['Popularity']
+            }
+        }
+    }
+})
+
+chart.animate({
+    config: {
+        channels: {
+            x: {
+                set: ['Genres']
+            }
+        }
+    }
+})
+```
+
+Next to the default logic of sum, there are a handful of other aggregation
+logics that are available in `Vizzu`: `min`, `max`, `mean`, `count` and
+`distinct`. Let's go through them to see how they work.
+
+Minimum value: the height of the bars show the minimum value in the `Popularity`
+measure in each of the `Genres`.
+
+<div id="tutorial_02"></div>
+
+```javascript
+chart.animate({
+    config: {
+        channels: {
+            y: {
+                set: ['min(Popularity)']
+            }
+        }
+    }
+})
+```
+
+Maximum value: the height of the bars show the maximum value in the `Popularity`
+measure in each of the `Genres`.
+
+<div id="tutorial_03"></div>
+
+```javascript
+chart.animate({
+    config: {
+        channels: {
+            y: {
+                set: ['max(Popularity)']
+            }
+        }
+    }
+})
+```
+
+Mean value: the height of the bars show the mean value of the `Popularity`
+measure in each of the `Genres`.
+
+<div id="tutorial_04"></div>
+
+```javascript
+chart.animate({
+    config: {
+        channels: {
+            y: {
+                set: ['mean(Popularity)']
+            }
+        }
+    }
+})
+```
+
+Count: the height of the bars show the number of items (rows if you will) in
+each of the `Genres`.
+
+<div id="tutorial_05"></div>
+
+```javascript
+chart.animate({
+    config: {
+        channels: {
+            y: {
+                set: ["count()"]
+            }
+        }
+    }
+})
+```
+
+Distinct: the height of the bars show the number of distinct categories of
+`Kinds` in each of the `Genres`.
+
+!!! note
+    Distinct aggregation logic relates to dimensions like `Genres` and not to
+    measures like `Popularity`.
+
+<div id="tutorial_06"></div>
+
+```javascript
+chart.animate({
+    config: {
+        channels: {
+            y: {
+                set: ["distinct(Kinds)"]
+            }
+        }
+    }
+})
+```
+
+Sum: this is how you can get back to the default aggregation logic of `Vizzu`
+that sums the `Popularity` values in each of the `Genres`.
+
+<div id="tutorial_07"></div>
+
+```javascript
+chart.animate({
+    config: {
+        channels: {
+            y: {
+                set: ['sum(Popularity)']
+            }
+        }
+    }
+})
+```
+
+<script src="../aggregating_data.js"></script>