Merge pull request #112 from simzer/main

Presets fixed

Author: simzer

CHANGELOG.md

@@ -7,7 +7,8 @@
 - Allow more than 5 colors in TS color palette and gradient declaration. 
   The format won`t be checked in compile time, only in runtime.
 - animation-begin event called after actual animation is set up.
-- animation control methods take effect immediately.
+- Animation control methods take effect immediately.
+- Wrong orientation after switching from circle geometry fixed.
 
 ### Added
 

docs/content/tutorial/18-presets.md

@@ -0,0 +1,56 @@
+## Chart presets
+
+In this tutorial, we have shown how you can create charts with Vizzu 
+using a chart type-agnostic, uniform way, without being limited to a predefined
+set of available charts. But sometimes, we know exactly the chart type we 
+would like to use, and it is easier to start with that, skipping all the 
+necessary configurations to build it from scratch. For this reason, Vizzu
+provides preset configurations for many known chart types
+(for all available presets, see the [preset galery](#chart-presets)).
+
+Presets are available through methods of the 'presets' static property of the Vizzu class.
+These methods are returning chart configuration objects which can be passed to
+the 'animate' method. Let's create a Stacked Bubble chart. 
+
+```javascript { "title": "Using a preset" }
+chart.animate(Vizzu.presets.stackedBubble({
+	size: 'Popularity',
+	color: 'Kinds',
+	stackedBy: 'Genres'
+}));
+```
+
+Presets will override all the channels, so previously set series will be
+removed from the chart. They will also explicitly set most of the chart 
+configuration parameters since these will effectively result in the selected
+chart type. Exceptions are the 'legend', 'title', 'reverse', and 'sort' properties
+which can be set along with the preset. Let's sort the next preset chart by values.
+
+```javascript { "title": "Setting sorting for a preset" }
+chart.animate(Vizzu.presets.radialStackedBar({
+	angle: 'Popularity',
+	radius: 'Genres',
+	stackedBy: 'Kinds',
+	sort: 'byValue'
+}));
+```
+
+Presets will affect only the chart configuration. If you need to set the styles
+or the underlying data, you can use the more verbose syntax below, explicitly
+pass the preset to the 'config' property of the animate method's parameter. 
+
+```javascript { "title": "Setting style for a preset" }
+chart.animate({
+	config: Vizzu.presets.radialBar({
+		angle: 'Popularity',
+		radius: 'Genres',
+	}),
+	style: {
+		'plot.xAxis.interlacing.color': '#ffffff00'
+	}
+});
+```
+
+As you can see, the preset won't override the previously configured sorting, 
+and it won't affect the rest of the chart config parameters mentioned above, 
+which can be set along with the preset.

src/apps/weblib/js-api/presets.js

@@ -358,6 +358,7 @@ export default class Presets {
       orientation: "horizontal",
       rotate: 0,
       split: false,
+      geometry: "rectangle",
       channels: {
         x: null,
         y: null,
@@ -367,16 +368,15 @@ export default class Presets {
         noop: null,
         label: null,
       },
-      legend: "auto",
-      title: "",
-      reverse: false,
-      sort: "none",
     };
   }
 
   _createPresetConfig(presetName) {
     let presetConfig = this._presetConfigs[presetName];
+    let nullConfig = this._nullConfig();
+    let channelBase = Object.assign(nullConfig.channels, presetConfig.channels);
     let base = Object.assign(this._nullConfig(), presetConfig);
+    base.channels = channelBase;
     return base;
   }
 

src/apps/weblib/js-api/vizzu.d.ts

@@ -713,7 +713,7 @@ type Snapshot = number;
     - tooltip: tooltips on the chart appearing on markers on mouse over. 
       Since the tooltip uses the animation interface, calling animate() while
       the tooltip is enabled can cause unwanted behaviour. */
-type Feature = 'tooltip';
+type Feature = 'tooltip'|'logging'|'rendering';
 
 /** Class representing a single chart in Vizzu. */
 export default class Vizzu {

src/chart/options/advancedoptions.cpp

@@ -86,6 +86,13 @@ OptionsSetter &OrientationSelector::setHorizontal(bool horizontal)
 	return *this;
 }
 
+OptionsSetter &OrientationSelector::setShape(const ShapeType::Type &type)
+{
+	Base::setShape(type);
+	fixHorizontal();
+	return *this;
+}
+
 void OrientationSelector::fixHorizontal()
 {
 	auto horOver = horizontalOverride();

src/chart/options/advancedoptions.h

@@ -18,6 +18,8 @@ class OrientationSelector : public OptionsSetter
 							 std::optional<size_t> pos = std::nullopt) override;
 	OptionsSetter &deleteSeries(const ScaleId &scaleId, const Data::SeriesIndex &index) override;
 	OptionsSetter &setHorizontal(bool horizontal) override;
+	OptionsSetter &setShape(const ShapeType::Type &type) override;
+
 private:
 	std::optional<bool> horizontalOverride() const;
 	void fixHorizontal();