Release 16.0.1 (#712)

## What's Changed
* feat: Added visual map component by @dvmoritzschoefl in
#711


**Full Changelog**:
v16.0.0...v16.0.1

package.json

@@ -1,7 +1,7 @@
 {
   "name": "visyn_core",
   "description": "Core repository for datavisyn applications.",
-  "version": "16.0.0",
+  "version": "16.0.1",
   "author": {
     "name": "datavisyn GmbH",
     "email": "[email protected]",

src/echarts/useChart.ts

@@ -14,6 +14,7 @@ import {
   TitleComponent,
   ToolboxComponent,
   TooltipComponent,
+  VisualMapComponent,
 } from 'echarts/components';
 // The component option types are defined with the ComponentOption suffix
 import type { DatasetComponentOption, GridComponentOption, TitleComponentOption, TooltipComponentOption } from 'echarts/components';
@@ -46,6 +47,7 @@ use([
   ToolboxComponent, // A group of utility tools, which includes export, data view, dynamic type switching, data area zooming, and reset.
   DataZoomComponent, // Used in Line Graph Charts
   CanvasRenderer, // If you only need to use the canvas rendering mode, the bundle will not include the SVGRenderer module, which is not needed.
+  VisualMapComponent, // Interestingly enough, this component is required if someone wants to map a color channel to a data range.
 ]);
 
 type ElementEventName =

src/vis/vishooks/hooks/VisHooks.stories.tsx

@@ -8,6 +8,7 @@ import { SVGBrush } from '../components';
 import { useAnimatedTransform } from './useAnimatedTransform';
 import { useBrush } from './useBrush';
 import { useCanvas } from './useCanvas';
+import { useChart } from '../../../echarts/useChart';
 import { SVGLasso } from '../components/SVGLasso';
 import { ZoomTransform } from '../interfaces';
 import { m4 } from '../math';
@@ -115,6 +116,61 @@ function UseAnimatedTransformComponent() {
   );
 }
 
+function UseChartComponent() {
+  const { setRef, instance } = useChart({
+    options: {
+      xAxis: {},
+      yAxis: {},
+      visualMap: [
+        {
+          type: 'continuous',
+          min: 0,
+          max: 10,
+          inRange: {
+            color: ['red', 'yellow', 'green'],
+          },
+          dimension: 1,
+        },
+      ],
+      series: [
+        {
+          data: [
+            [10.0, 8.04],
+            [8.07, 6.95],
+            [13.0, 7.58],
+            [9.05, 8.81],
+            [11.0, 8.33],
+            [14.0, 7.66],
+            [13.4, 6.81],
+            [10.0, 6.33],
+            [14.0, 8.96],
+            [12.5, 6.82],
+            [9.15, 7.2],
+            [11.5, 7.2],
+            [3.03, 4.23],
+            [12.2, 7.83],
+            [2.02, 4.47],
+            [1.05, 3.33],
+            [4.05, 4.96],
+            [6.03, 7.24],
+            [12.0, 6.26],
+            [12.0, 8.84],
+            [7.08, 5.82],
+            [5.02, 5.68],
+          ],
+          type: 'scatter',
+        },
+      ],
+    },
+  });
+
+  return (
+    <Center w={600} h={400}>
+      <div ref={setRef} style={{ width: 600, height: 400 }} />
+    </Center>
+  );
+}
+
 function VisHooksComponent() {
   const [element, setElement] = React.useState<HTMLElement>();
 
@@ -151,6 +207,12 @@ export const UseCanvas: Story = {
   },
 };
 
+export const UseChart: Story = {
+  render: () => {
+    return <UseChartComponent />;
+  },
+};
+
 export const UseAnimated: Story = {
   render: () => {
     return <UseAnimatedTransformComponent />;